/* EvadeCraft store - one stylesheet.
 *
 * Flat chunky panels with a darker 6 px bottom "lip", 3D realm buttons with drop-down menus,
 * a slanted yellow cart button, light and dark themes, phone and tablet layouts.
 * (This file is public once hosted: design notes live in the unpublished docs, not here.)
 */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --page: #E6E6E6;
  --panel: #FFFFFF;
  --panel-lip: #D9D9D9;
  --panel-inner: #FFFFFF;
  --well: #F5F5F5;
  --well-img: #FAFAFA;
  --well-border: rgba(34, 34, 34, .08);
  --text: #222222;
  --text-body: #4C4C4C;
  --text-muted: #767676;
  --text-faint: rgba(34, 34, 34, .6);
  --footer: #FFFFFF;
  --legal: #F5F5F5;
  --rule: rgba(34, 34, 34, .1);
  --overlay: rgba(0, 0, 0, .5);
  --drawer: #E6E6E6;
  --price: #222222;
  --link: #D97034;
  --focus: #1D72E8;
  --texture-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='144' fill='%23000000'%3E%3Crect x='0' y='0' width='48' height='48' fill-opacity='0.028'/%3E%3Crect x='96' y='0' width='48' height='48' fill-opacity='0.044'/%3E%3Crect x='144' y='0' width='48' height='48' fill-opacity='0.017'/%3E%3Crect x='48' y='48' width='48' height='48' fill-opacity='0.033'/%3E%3Crect x='144' y='48' width='48' height='48' fill-opacity='0.022'/%3E%3Crect x='192' y='48' width='48' height='48' fill-opacity='0.05'/%3E%3Crect x='0' y='96' width='48' height='48' fill-opacity='0.019'/%3E%3Crect x='96' y='96' width='48' height='48' fill-opacity='0.03'/%3E%3Crect x='192' y='96' width='48' height='48' fill-opacity='0.039'/%3E%3C/svg%3E");

  --blue: #4DB5E1;    --blue-lip: #239ACD;
  --green: #3EBE37;   --green-lip: #36A630;
  --orange: #FB8822;  --orange-lip: #E26D05;
  --red: #ED5252;     --red-lip: #D03A3A;
  --purple: #9780F4;  --purple-lip: #8469F2;
  --accent: #FF8C4B;  --accent-lip: #D97034;
  --yellow: #FFEE24;  --yellow-lip: #E2D10B; --yellow-text: #2F2F2F;
  --announce: #F53C3C;
  --grey-btn: #E3E3E3; --grey-btn-lip: #DBDBDB;
  --pill: #E9E9E9;    --pill-line: #D5D5D5;
  --side-active: #DADADA; --side-active-lip: #CDCDCD;
  --pill-dark: #000000; --pill-dark-line: #000000; --pill-dark-text: #FFFFFF;
  --paymark: #CFCFCF;

  --spacing: 24px;
  --gutter: 24px;
  --r-panel: 6px 6px 10px 10px;
  --r-btn: 6px 6px 8px 8px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mark: 'Lilita One', 'Inter', system-ui, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #282828;
  --panel: #474747;
  --panel-lip: #424242;
  --panel-inner: #3B3B3B;
  --well: #4D4D4D;
  --well-img: #424242;
  --well-border: rgba(255, 255, 255, .08);
  --text: #FFFFFF;
  --text-body: #DADADA;
  --text-muted: #BDBDBD;
  --text-faint: rgba(255, 255, 255, .6);
  --footer: #2D2D2D;
  --legal: #262626;
  --rule: rgba(255, 255, 255, .08);
  --drawer: #424242;
  --price: #52ED74;
  --link: #FF8C4B;
  --focus: #8AB8FF;
  --texture-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='144' fill='%23FFFFFF'%3E%3Crect x='0' y='0' width='48' height='48' fill-opacity='0.028'/%3E%3Crect x='96' y='0' width='48' height='48' fill-opacity='0.044'/%3E%3Crect x='144' y='0' width='48' height='48' fill-opacity='0.017'/%3E%3Crect x='48' y='48' width='48' height='48' fill-opacity='0.033'/%3E%3Crect x='144' y='48' width='48' height='48' fill-opacity='0.022'/%3E%3Crect x='192' y='48' width='48' height='48' fill-opacity='0.05'/%3E%3Crect x='0' y='96' width='48' height='48' fill-opacity='0.019'/%3E%3Crect x='96' y='96' width='48' height='48' fill-opacity='0.03'/%3E%3Crect x='192' y='96' width='48' height='48' fill-opacity='0.039'/%3E%3C/svg%3E");
  --grey-btn: #575757; --grey-btn-lip: #4D4D4D;
  --pill: #575757;    --pill-line: #4D4D4D;
  --side-active: #575757; --side-active-lip: #4D4D4D;
  --pill-dark: #3B3B3B; --pill-dark-line: #5C5C5C; --pill-dark-text: #FFFFFF;
  --paymark: #6B6B6B;
}

/* realm theming: any element with data-realm gets --realm / --realm-lip */
[data-realm="farmking"] { --realm: var(--green);  --realm-lip: var(--green-lip); }
[data-realm="skyblock"] { --realm: var(--orange); --realm-lip: var(--orange-lip); }
[data-realm="factions"] { --realm: var(--red);    --realm-lip: var(--red-lip); }
[data-realm="global"]   { --realm: var(--purple); --realm-lip: var(--purple-lip); }
[data-realm="blue"]     { --realm: var(--blue);   --realm-lip: var(--blue-lip); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--page);
  color: var(--text);
  font: 500 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 16px;
  background: var(--yellow); color: var(--yellow-text); font-weight: 800; border-radius: 6px;
  text-decoration: none;
}
.skip:focus { top: 12px; }
.ic { width: 18px; height: 18px; flex: none; }
.container { width: 100%; max-width: 1367px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- buttons ---------- */
.btn {
  --b: var(--grey-btn); --b-lip: var(--grey-btn-lip); --b-text: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px;
  background: var(--b); color: var(--b-text);
  border: 0; border-bottom: 4px solid var(--b-lip); border-radius: var(--r-btn);
  font: 700 16px/26px var(--font); text-decoration: none; text-align: center;
  cursor: pointer; transition: filter .2s, transform .1s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn .ic { transition: transform .2s; }
.btn:hover .ic { transform: scale(1.1); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(.3) opacity(.62); }
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { filter: grayscale(.3) opacity(.62); }
.btn[disabled]:hover .ic { transform: none; }
.btn--green   { --b: var(--green); --b-lip: var(--green-lip); --b-text: #FFFFFF; }
.btn--red     { --b: var(--red); --b-lip: var(--red-lip); --b-text: #FFFFFF; }
.btn--purple  { --b: var(--purple); --b-lip: var(--purple-lip); --b-text: #FFFFFF; }
.btn--yellow  { --b: var(--yellow); --b-lip: var(--yellow-lip); --b-text: var(--yellow-text); }
.btn--white   { --b: #FFFFFF; --b-lip: rgba(0, 0, 0, .1); --b-text: var(--green); }
.btn--realm   { --b: var(--realm, var(--green)); --b-lip: var(--realm-lip, var(--green-lip)); --b-text: #FFFFFF; }
.btn--remove  { --b: var(--red); --b-lip: var(--red-lip); --b-text: #FFFFFF; }
.btn--tint    { --b: rgba(255, 255, 255, .22); --b-lip: rgba(0, 0, 0, .08); --b-text: #FFFFFF; }
.btn--square  { width: 64px; min-height: 64px; padding: 0; flex: none; }
.btn--square .ic { width: 22px; height: 22px; color: var(--text-faint); }
.btn--block   { width: 100%; }
.btn--big     { min-height: 64px; border-bottom-width: 6px; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: 9999px; border: 1px solid var(--pill-line);
  background: var(--pill); color: var(--text); font: 600 13px/1 var(--font);
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .2s;
}
.pill:hover { filter: brightness(1.05); }
.pill--dark { background: var(--pill-dark); color: var(--pill-dark-text); border-color: var(--pill-dark-line); }
.pill .ic { width: 15px; height: 15px; }

/* ---------- panels ---------- */
.panel {
  background: var(--panel); border-radius: var(--r-panel);
  border-bottom: 6px solid var(--panel-lip);
}
#view > * + * { margin-top: var(--spacing); }
.panel h2 { font: 700 20px/32px var(--font); }
.muted { color: var(--text-muted); }
.chip-note {
  display: inline-flex; gap: 12px; align-items: center; justify-content: center;
  padding: 13px 32px; border-radius: 6px; background: var(--well-border);
  border: 1px solid var(--well-border); color: var(--text);
  font: 500 14px/24px var(--font); text-align: left;
}
.chip-note .ic { width: 18px; height: 18px; }
.link { color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* block texture: pale squares, as on a stone wall (an inline SVG tile, no image files) */
.texture { position: absolute; pointer-events: none; background: var(--texture-img) repeat; background-size: 240px 144px; }

/* ---------- announcement bar ---------- */
.announce {
  background: var(--announce); color: #FFFFFF; text-align: center;
  padding: 5px 16px; font: 900 17px/22px var(--font); letter-spacing: .02em;
}

/* ---------- header ---------- */
.hero { position: relative; height: 480px; color: #FFFFFF; isolation: isolate; }
.hero__bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(180deg, #6FBFEA 0%, #CBEBF8 55%, #4E9A3C 100%);
}
.hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(6px); transform: scale(1.04);
}
.hero__bg::after {             /* darker sides, lighter middle */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .27), rgba(0, 0, 0, 0), rgba(0, 0, 0, .27));
}

.hero-top {
  height: 60px; background: rgba(0, 0, 0, .2); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.hero-top__in { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 16px; }
.hero-top__right { display: flex; align-items: center; gap: 64px; margin-left: auto; }
.hero-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
  background: none; border: 0; color: #FFFFFF; font: 700 14px/1 var(--font);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.hero-link .faint { color: rgba(255, 255, 255, .5); }
.hero-link .ic { width: 16px; height: 16px; }
.hero-link:hover { opacity: .85; }

.hero__main {
  position: relative; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding-top: 128px;
}
.splash {
  position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-width: 313px; min-height: 112px; padding: 28px 48px;
  background: rgba(255, 255, 255, .24); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px; color: #FFFFFF; text-decoration: none; text-align: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: inherit; cursor: pointer; transition: background .2s;
}
.splash:hover:not([aria-disabled="true"]) { background: rgba(255, 255, 255, .32); }
.splash[aria-disabled="true"] { cursor: default; }
.splash__title { font: 700 16px/24px var(--font); text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.splash__sub {
  display: flex; align-items: center; gap: 12px; font: 500 14px/22px var(--font);
  color: rgba(255, 255, 255, .78); text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; flex: none; }
.dot--live::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5);
  transform: translate(-50%, -50%); animation: pulse 1s ease-out infinite;
}
@keyframes pulse { to { width: 21px; height: 21px; opacity: 0; } }

/* the logo, centred over the header */
.logo {                         /* 75 px below the header's top edge: hero__main starts 60 px down */
  position: absolute; left: 50%; top: 15px; z-index: 2; transform: translateX(-50%);
  display: block; text-decoration: none; border-radius: 12px;
}
.logo img, .logo picture { display: block; }
.logo img { width: auto; height: 340px; max-width: 450px; object-fit: contain; transition: transform .5s; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25)); }
.logo:hover img, .logo:hover .wordmark { transform: scale(1.05); }
.wordmark {                     /* text fallback when no logo file is set */
  display: block; padding: 120px 0; transition: transform .5s;
  font: 400 96px/1 var(--font-mark); color: #FED51E; white-space: nowrap;
  -webkit-text-stroke: 8px #3D1500; paint-order: stroke fill;
  text-shadow: 0 6px 0 #753001, 0 12px 24px rgba(0, 0, 0, .35);
}
.wordmark--small { padding: 0; font-size: 34px; -webkit-text-stroke: 4px #3D1500; text-shadow: 0 3px 0 #753001; }

/* ---------- realm bar + dropdowns ---------- */
.realmbar { position: relative; z-index: 20; margin-top: -26px; }
.hero-raised .hero { z-index: 60; }
.realmbar__in { display: flex; justify-content: center; gap: var(--spacing); flex-wrap: wrap; }
.realm { position: relative; }
.realm__btn {
  display: inline-flex; align-items: center; justify-content: center; height: 68px; padding: 18px 54px;
  background: var(--realm); color: #FFFFFF; border: 0;
  border-bottom: 6px solid var(--realm-lip); border-radius: 12px 12px 14px 14px;
  font: 900 16px/26px var(--font); cursor: pointer; white-space: nowrap; transition: filter .2s;
}
.realm__btn:hover, .realm.is-open .realm__btn { filter: brightness(1.05); }
.dd__menu {
  position: absolute; left: 50%; top: calc(100% - 10px); z-index: 40;
  min-width: 100%; padding: 6px 0; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateX(-50%) scale(.9);
  transition: opacity .3s, transform .3s, top .3s, visibility .3s;
}
.dd.is-open > .dd__menu {
  opacity: 1; visibility: visible; top: calc(100% + 6px); transform: translateX(-50%) scale(1);
  /* visible at once on open: a still-hidden row cannot take focus */
  transition: opacity .3s, transform .3s, top .3s, visibility 0s;
}
.dd__menu::before {             /* the 8 px notch */
  content: ''; position: absolute; left: 50%; top: -8px; margin-left: -8px;
  border: 8px solid transparent; border-top: 0; border-bottom-color: var(--notch, #FFFFFF);
}
.realm__menu {
  --notch: var(--realm);
  background: var(--realm); border-radius: var(--r-panel); border-bottom: 6px solid var(--realm-lip);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .12);
}
.realm__menu a, .realm__menu span {
  display: block; padding: 12px 16px; color: #FFFFFF; text-align: center;
  font: 900 16px/19px var(--font); text-decoration: none; white-space: nowrap;
}
.realm__menu a:hover, .realm__menu a:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.realm__menu a:focus-visible { box-shadow: inset 0 0 0 2px #FFFFFF; }
.realm__menu span { opacity: .8; cursor: default; }

/* currency dropdown (header + cart) */
.dd { position: relative; }
.currency-menu {
  --notch: #FFFFFF;
  width: 132px; padding: 12px 8px; background: #FFFFFF; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); color: #222222;
}
.hero .currency-menu { left: -12px; transform: scale(.9); transform-origin: top left; }
.hero .dd.is-open > .currency-menu { transform: none; }
.hero .currency-menu::before { left: 30px; }
.currency-menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.currency-menu__grid--one { grid-template-columns: 1fr; }
.currency-menu button {
  padding: 5px 0; border: 0; border-radius: 4px; background: transparent; color: #222222;
  font: 700 14px/20px var(--font); cursor: pointer;
}
.currency-menu button:hover { background: #F5F5F5; }
.currency-menu button[aria-pressed="true"] { background: #000000; color: #FFFFFF; }
.currency-menu__note { margin-top: 8px; padding: 0 4px; font: 500 11px/15px var(--font); color: #767676; text-align: center; }

/* ---------- page ---------- */
.page { position: relative; z-index: 10; padding-top: var(--spacing); padding-bottom: 106px; min-height: 40vh; }
.page:focus { outline: none; }

/* page-top bar: greeting + slanted yellow cart button */
.pagetop {
  position: relative; display: flex; align-items: center; min-height: 106px;
  margin-bottom: var(--spacing); padding: 23px 290px 23px 33px;
}
.pagetop__hello { display: flex; flex-direction: column; min-width: 0; }
.pagetop__hello small { font: 700 14px/22px var(--font); color: var(--text-faint); }
.pagetop__hello strong { font: 700 16px/26px var(--font); overflow-wrap: anywhere; }
.cartbtn {
  position: absolute; top: 0; right: 0; bottom: -6px; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  width: 265px; padding: 20px 40px 20px 52px;
  background: var(--yellow); color: var(--yellow-text); border: 0; border-bottom: 6px solid var(--yellow-lip);
  border-radius: 0 6px 10px 0; clip-path: polygon(52px 0, 100% 0, 100% 100%, 0 100%);
  cursor: pointer; text-align: right; transition: filter .2s;
}
.cartbtn:hover { filter: brightness(1.04); }
.cartbtn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--focus); }
.cartbtn__who { font: 900 16px/24px var(--font); text-transform: uppercase; overflow-wrap: anywhere; }
.cartbtn__sum { font: 900 14px/22px var(--font); }
:root[data-theme="dark"] .pagetop::after {   /* orange glow behind the cart button */
  content: ''; position: absolute; top: 0; right: 40px; bottom: -6px; width: 265px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--accent)); opacity: .5; pointer-events: none;
  border-radius: 0 10px 10px 0;
}

/* phone row: menu + view cart (below 1050 / 850 px) */
.mobilebar { display: none; gap: 16px; margin-bottom: var(--spacing); }
.mobilebar__menu {
  display: flex; align-items: center; gap: 16px; flex: 1; min-height: 80px; padding: 14px 24px;
  background: var(--realm, var(--green)); color: #FFFFFF; border: 0;
  border-bottom: 6px solid var(--realm-lip, var(--green-lip)); border-radius: var(--r-panel);
  cursor: pointer; text-align: left;
}
.mobilebar__menu .ic { width: 30px; height: 30px; }
.mobilebar__menu .ic rect { fill: currentColor; }
.mobilebar__menu strong { display: block; font: 900 16px/24px var(--font); }
.mobilebar__menu small { display: block; font: 500 14px/20px var(--font); opacity: .9; }
.mobilebar__cart {
  display: none; flex: 2.6; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 80px; padding: 12px 16px; background: var(--yellow); color: var(--yellow-text);
  border: 0; border-bottom: 6px solid var(--yellow-lip); border-radius: var(--r-panel); cursor: pointer;
}
.mobilebar__cart strong { display: flex; align-items: center; gap: 10px; font: 900 18px/26px var(--font); }
.mobilebar__cart small { font: 700 14px/20px var(--font); }
.count-bubble {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 13px; background: #FFFFFF; color: var(--yellow-text); font: 900 14px/1 var(--font);
}

/* ---------- home ---------- */
.intro { position: relative; overflow: hidden; text-align: center; }
.intro .texture {
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 90%);
}
.intro__head { position: relative; padding: 48px 32px 0; }
.intro__head h1 { font: 700 24px/38px var(--font); }
.intro__body { position: relative; padding: 22px 154px 56px; }
.intro__body p { color: var(--text-body); font: 500 16px/28px var(--font); }
.intro__body p + p { margin-top: 18px; }
.intro .chip-note { margin-top: 28px; }

.modules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing); }
.module { position: relative; padding: 40px 40px 44px; min-width: 0; }
.module--wide { grid-column: 1 / -1; }
.module p { margin-top: 12px; color: var(--text); font: 500 14px/24px var(--font); }
.module p.muted { color: var(--text-muted); }

.topcust { display: flex; align-items: center; gap: 40px; min-height: 214px; padding: 56px 60px; overflow: hidden; }
.topcust__text { position: relative; z-index: 2; flex: 0 1 250px; min-width: 0; }
.topcust__text p { max-width: 220px; }
.topcust__figure { position: relative; z-index: 2; display: grid; place-items: center; width: 200px; flex: none; }
.topcust__figure .figure { width: 56px; height: 112px; }
.topcust .namechip { position: relative; z-index: 2; }
.topcust .texture {
  top: 0; right: 0; bottom: 0; width: 34%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 60%);
  mask-image: linear-gradient(to right, transparent, #000 60%);
}
:root[data-theme="dark"] .topcust__figure::before {      /* the pale rings under the figure */
  content: ''; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .035) 0 30%, rgba(255, 255, 255, .01) 30% 40%, rgba(255, 255, 255, .028) 40% 55%, rgba(255, 255, 255, .008) 55% 65%, rgba(255, 255, 255, .02) 65% 70.5%, transparent 71%);
}
.namechip {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 118px; min-height: 60px; padding: 0 28px;
  background: var(--well); border: 1px solid var(--well-border); border-radius: 6px; font: 700 16px/1 var(--font);
}

.paymarks { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px; margin-top: 22px; color: var(--paymark); }
.paymarks .ic { width: 38px; height: 38px; stroke-width: 1.8; }

.goal { position: relative; height: 44px; margin-top: 24px; border-radius: 6px; background: var(--well); overflow: hidden; }
.goal__fill {
  display: flex; align-items: center; justify-content: center; height: 100%; min-width: 62px; padding-right: 10px;
  background: var(--accent); color: #FFFFFF; font: 700 14px/1 var(--font);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}
.goal__fill--done { clip-path: none; padding-right: 0; }

.recent { display: grid; grid-template-columns: repeat(5, 74px); gap: 24px; margin-top: 22px; }
.recent__tile {
  position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 6px;
  background: var(--well); border: 1px solid var(--well-border);
}
.recent__tile--empty { background: transparent; border: 1px dashed var(--panel-lip); }
:root[data-theme="dark"] .recent__tile--empty { border-color: rgba(255, 255, 255, .14); }
.initial {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 4px;
  color: #FFFFFF; font: 900 20px/1 var(--font); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2);
}
.recent__tip {
  position: absolute; top: calc(100% + 8px); left: 50%; z-index: 5; width: 150px; padding: 8px 10px;
  transform: translateX(-50%); background: var(--well); border: 1px solid var(--well-border); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15); text-align: center; opacity: 0; visibility: hidden; transition: opacity .2s;
}
.recent__tile:hover .recent__tip, .recent__tile:focus .recent__tip { opacity: 1; visibility: visible; }
.recent__tip b { display: block; font: 600 14px/20px var(--font); }
.recent__tip span { display: block; font: 500 12px/18px var(--font); color: var(--text-muted); }

.giftcheck { display: grid; grid-template-columns: 1fr 164px; gap: 12px; margin-top: 22px; }
.giftcheck .btn { min-height: 72px; border-bottom: 0; }
.input {
  width: 100%; min-height: 64px; padding: 0 22px; border: 2px solid transparent; border-radius: 6px;
  background: var(--well); color: var(--text); font: 500 16px/1 var(--font);
}
.giftcheck .input { min-height: 72px; padding: 16px 32px; }
.input::placeholder { color: var(--text-faint); font-weight: 500; }
.input:focus { border-color: var(--focus); }
.input:disabled { cursor: not-allowed; }

/* optional Map Prizes panel (config.showPrizes) */
.prizes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px; align-items: center; padding: 44px 48px; }
.prizes__places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; list-style: none; margin: 0; padding: 0; }
.place {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px 16px;
  border-radius: 6px 6px 8px 8px; background: var(--well); border: 1px solid var(--well-border); text-align: center;
}
.place .art { width: 56px; height: 56px; }
.place--1 { padding-top: 30px; box-shadow: inset 0 -4px 0 var(--yellow-lip); }
.place--2 { box-shadow: inset 0 -4px 0 #A9B0BA; }
.place--3 { box-shadow: inset 0 -4px 0 #9C5A1E; }
.place__rank { font: 800 13px/18px var(--font); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.place__amount { font: 900 26px/32px var(--font); }
.place__what { font: 600 12px/16px var(--font); color: var(--text-muted); }
.prizes .small { margin-top: 14px; font: 500 13px/20px var(--font); color: var(--text-muted); }

/* ---------- category page ---------- */
.catlayout { display: flex; gap: var(--spacing); align-items: flex-start; }
.sidebar { width: 312px; flex: none; }
.sidebar > * + * { margin-top: var(--spacing); }
.catinfo {
  display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 106px;
  padding: 18px; background: var(--realm); color: #FFFFFF; border-bottom-color: var(--realm-lip);
  text-align: center;
}
.catinfo small { font: 500 14px/22px var(--font); }
.catinfo strong { font: 900 16px/24px var(--font); text-transform: uppercase; }
.sidenav { padding: 12px; }
.sidenav ul { list-style: none; margin: 0; padding: 0; }
.sidenav li + li { margin-top: 4px; }
.sidenav a {
  display: flex; align-items: center; gap: 12px; padding: 18px 32px; border-radius: 6px;
  color: var(--text); text-decoration: none; font: 500 16px/24px var(--font);
}
.sidenav a:hover { background: var(--well); }
.sidenav a[aria-current="page"] { background: var(--side-active); box-shadow: inset 0 -4px 0 var(--side-active-lip); font-weight: 700; }
.miniprize { padding: 22px 24px; }
.miniprize h3 { display: flex; align-items: center; gap: 8px; font: 800 16px/24px var(--font); }
.miniprize ol { list-style: none; margin: 10px 0 0; padding: 0; }
.miniprize li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--rule); font: 600 14px/22px var(--font); }
.miniprize p { margin-top: 8px; font: 500 12px/18px var(--font); color: var(--text-muted); }
.content { flex: 1; min-width: 0; }
.content > * + * { margin-top: var(--spacing); }
.catdesc { padding: 32px 40px; color: var(--text-muted); font: 400 16px/26px var(--font); }
.catdesc h1 { color: var(--text); font: 700 24px/34px var(--font); margin-bottom: 6px; }
.soonpanel { padding: 64px 40px; text-align: center; }
.soonpanel .art { width: 96px; height: 96px; margin: 0 auto 18px; }
.soonpanel h1 { font: 700 24px/34px var(--font); }
.soonpanel p { margin-top: 10px; color: var(--text-muted); }
.soonpanel .btn { margin-top: 24px; }

.globalinfo { position: relative; overflow: hidden; padding: 48px 56px 56px; text-align: center; margin-bottom: var(--spacing); }
.globalinfo .texture {
  inset: 0; opacity: .9;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%);
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
.globalinfo > *:not(.texture) { position: relative; }
.globalinfo h1 { font: 700 24px/36px var(--font); }
.globalinfo > p { max-width: 1011px; margin: 12px auto 0; color: var(--text-body); font: 500 16px/28px var(--font); }
.plate {
  display: inline-block; margin-top: 22px; padding: 10px 22px; border-radius: 6px; background: #1C1C1C;
  font: 900 26px/1 var(--font);
}
.plate span { background: linear-gradient(90deg, #FF8C4B, #FFEE24); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plate i { font-style: normal; color: #FFFFFF; }
.infosections { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing); margin-top: 36px; text-align: left; }
.infosection { padding: 32px 39px; background: #EAEAEA; border: 1px solid var(--well-border); border-radius: 6px; }
:root[data-theme="dark"] .infosection { background: var(--well); }
.infosection h3 { display: flex; align-items: center; gap: 10px; font: 700 16px/24px var(--font); }
.infosection h3 .art { width: 22px; height: 22px; }
.infosection p { margin-top: 8px; color: var(--text-muted); font: 500 14px/24px var(--font); }

/* sale panel */
.sale {
  --sale: var(--red); --sale-lip: var(--red-lip);
  position: relative; overflow: hidden; padding: 36px 32px 40px; text-align: center; color: #FFFFFF;
  background: var(--sale); border-bottom-color: var(--sale-lip);
}
.sale__spark { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px; opacity: .06; animation: spin 40s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.sale__dates {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 6px;
  background: rgba(255, 255, 255, .24); border: 1px solid rgba(255, 255, 255, .3); font: 700 16px/24px var(--font);
}
.sale__title {
  display: inline-block; margin-top: 16px; padding: 4px 78px; background: #FFFFFF; color: var(--sale);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
  font: 900 40px/64px var(--font); text-transform: uppercase;
}
.sale__sub { margin-top: 12px; font: 700 20px/28px var(--font); text-transform: uppercase; }
.sale__count { margin-top: 8px; font: 700 14px/20px var(--font); }

/* ---------- package cards ---------- */
.pkggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing); }
.pkglist > * + * { margin-top: var(--spacing); }
.pkg { position: relative; display: flex; flex-direction: column; min-width: 0; }
.pkg__img {
  position: relative; display: grid; place-items: center; width: 100%; height: 207px; padding: 0;
  background: var(--well-img); border: 0; border-radius: 6px 6px 0 0; cursor: pointer;
}
.pkg__img .art, .pkg__img img { width: 150px; height: 150px; object-fit: contain; transition: transform .3s; }
.pkg__img:hover .art, .pkg__img:hover img { transform: scale(1.06) rotate(-2deg); }
.discount {
  position: absolute; left: 12px; top: 12px; height: 26px; padding: 0 10px; border-radius: 4px 4px 6px 6px;
  background: var(--red); color: #FFFFFF; font: 700 14px/26px var(--font);
}
.discount--free { background: var(--green); }
.pkg__info { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 28px; text-align: center; }
.pkg__name { font: 500 20px/32px var(--font); overflow-wrap: anywhere; }
.pkg__name button { padding: 0; border: 0; background: none; font: inherit; text-align: inherit; cursor: pointer; }
.pkg__name button:hover { text-decoration: underline; text-underline-offset: 4px; }
.prices { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; margin-top: 4px; }
.price { color: var(--price); font: 600 16px/26px var(--font); }
.price--tba { color: var(--text-muted); }
.price--free { color: var(--green-lip); font-weight: 800; }
:root[data-theme="dark"] .price--free { color: var(--price); }
.price-old { position: relative; color: rgba(237, 82, 82, .7); font: 500 14px/22px var(--font); }
.price-old::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 1px; background: var(--red); }
.price-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 4px; background: var(--green); color: #FFFFFF;
  font: 800 12px/22px var(--font); letter-spacing: .02em;
}
.price-tag .ic { width: 12px; height: 12px; }
.price-tag small { font: 600 11px/22px var(--font); opacity: .9; }
.price-approx { width: 100%; color: var(--text-muted); font: 500 12px/18px var(--font); }
.countdown { margin-top: 6px; color: var(--red-lip); font: 600 14px/20px var(--font); }
:root[data-theme="dark"] .countdown { color: #FF8A8A; }
.pkg__buttons { display: flex; gap: 12px; margin-top: auto; padding-top: 20px; }
.btn--add { flex: 1; min-height: 64px; min-width: 0; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.modal__gift { margin-top: 22px; }

.pkg--list { flex-direction: row; align-items: stretch; }
.pkg--list .pkg__img { width: 186px; height: auto; min-height: 150px; flex: none; border-radius: 6px 0 0 6px; }
.pkg--list .pkg__img .art, .pkg--list .pkg__img img { width: 118px; height: 118px; }
.pkg--list .pkg__info { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 34px 20px 40px; text-align: left; }
.pkg--list .prices { justify-content: flex-start; }
.pkg--list .pkg__buttons { margin: 0; padding: 0; flex: none; }
.pkg--list .btn--add { width: 220px; flex: none; }

/* ---------- modal ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center;
  padding: 56px 18px; overflow-y: auto; background: var(--overlay);
  opacity: 0; transition: opacity .2s;
}
.overlay.is-open { opacity: 1; }
.modal {
  position: relative; width: 100%; max-width: 700px; margin: auto 0; background: var(--panel-inner);
  border-radius: var(--r-panel); border-bottom: 8px solid var(--panel-lip);
  transform: translateY(12px); transition: transform .2s;
}
.overlay.is-open .modal { transform: none; }
.modal--narrow { max-width: 560px; }
.modal__close {
  position: absolute; top: 0; right: -72px; display: grid; place-items: center; width: 48px; height: 54px;
  background: var(--red); color: #FFFFFF; border: 0; border-bottom: 6px solid var(--red-lip);
  border-radius: var(--r-btn); cursor: pointer; transition: filter .2s;
}
.modal__close:hover { filter: brightness(1.08); }
.modal__close .ic { width: 22px; height: 22px; }
.modal__head {
  position: sticky; top: -56px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 31px 40px 31px 48px; background: var(--well-img); border-bottom: 1px solid var(--well-border);
  border-radius: 6px 6px 0 0;
}
.modal__head h2 { font: 700 22px/32px var(--font); overflow-wrap: anywhere; }
.modal__head .prices { justify-content: flex-start; }
.modal__head .btn { width: 186px; flex: none; }
.modal__art { display: grid; place-items: center; padding: 28px 0 0; }
.modal__art .art { width: 120px; height: 120px; }
.modal__body { padding: 32px 48px 44px; color: var(--text-muted); font: 400 16px/26px var(--font); }
.modal__body h3 { margin: 22px 0 8px; color: var(--text); font: 700 18px/26px var(--font); }
.modal__body h3:first-child { margin-top: 0; }
.modal__body ul { margin: 0; padding: 0; list-style: none; }
.modal__body li { position: relative; padding: 4px 0 4px 22px; }
.modal__body li::before { content: ''; position: absolute; left: 0; top: 16px; width: 9px; height: 2px; background: var(--accent); }
.modal__body b, .modal__body strong { color: var(--text); }
.modal__note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); font: 500 14px/22px var(--font); }
.modal__pad { padding: 46px 48px 44px; text-align: center; }
.modal__pad h2 { font: 700 20px/32px var(--font); }
.modal__pad p { margin-top: 10px; color: var(--text-body); }
.modal__pad .btn { margin-top: 26px; min-width: 180px; }
.modal-clock { width: 84px; height: 84px; margin: 0 auto 16px; }

/* login / username prompt (page + modal) */
.login { padding: 46px 40px 52px; text-align: center; }
.login h1, .login h2 { font: 700 20px/32px var(--font); }
.login__note { max-width: 739px; margin: 14px auto 0; color: var(--text); font: 500 16px/26px var(--font); }
.login__note code { padding: 1px 6px; border-radius: 4px; background: var(--well); font: 700 15px/1 ui-monospace, Consolas, monospace; color: var(--text); }
.login__row { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
.login__row .input { min-width: 392px; width: auto; min-height: 72px; font-weight: 700; }
.login__row .btn { padding: 0 46px; min-height: 72px; }
.login__small { margin-top: 16px; color: var(--text-muted); font: 500 13px/20px var(--font); }
.alert {
  display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 739px; margin: 22px auto 0;
  padding: 12px 18px; border-radius: var(--r-panel); background: var(--red); color: #FFFFFF;
  font: 700 14px/22px var(--font);
}
.backhome {
  display: flex; align-items: center; gap: 10px; margin: var(--spacing) auto 0; width: max-content;
  padding: 10px 22px; border-radius: 6px; border: 2px solid #D3D3D3; background: #DCDCDC;
  color: rgba(34, 34, 34, .45); font: 700 16px/24px var(--font); text-decoration: none; text-transform: uppercase;
}
:root[data-theme="dark"] .backhome { background: #3B3B3B; border-color: #474747; color: rgba(255, 255, 255, .55); }
.backhome:hover { color: var(--text); }

.options { padding: 36px 48px 44px; }
.field { display: block; margin-top: 20px; text-align: left; }
.field:first-child { margin-top: 0; }
.field > span { display: block; margin-bottom: 8px; font: 700 14px/20px var(--font); color: var(--text); }
.field small { display: block; margin-top: 6px; color: var(--text-muted); font: 500 13px/20px var(--font); }
.select {
  width: 100%; min-height: 64px; padding: 0 48px 0 22px; border: 2px solid transparent; border-radius: 6px;
  background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23909090' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center / 20px;
  color: var(--text); font: 700 18px/1 var(--font); -webkit-appearance: none; appearance: none; cursor: pointer;
}
.select:focus { border-color: var(--focus); }
.options .btn--block { margin-top: 28px; }

/* copy-IP card: the logo overlaps the top edge */
.ipcard { padding: 0 40px 40px; text-align: center; }
.ipcard__logo { margin: -70px auto 14px; width: 150px; }
.ipcard__logo img { width: 100%; height: auto; }
.ipcard h3 { font: 700 20px/30px var(--font); text-transform: uppercase; overflow-wrap: anywhere; }
.ipcard h6 { margin-top: 6px; font: 500 15px/22px var(--font); color: var(--text-muted); }

/* ---------- drawers (cart right, navigation left) ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 105; background: var(--overlay); opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.scrim.is-open { opacity: 1; visibility: visible; }
.scrim:not(.is-open) { pointer-events: none; }   /* while it fades out, clicks reach the page */
.drawer {
  position: fixed; top: 0; bottom: 0; z-index: 110; display: flex; flex-direction: column;
  width: 492px; max-width: calc(100vw - 72px); padding: 32px; background: var(--drawer);
  visibility: hidden; transition: transform .3s ease, visibility .3s;
}
.drawer--right { right: 0; transform: translateX(100%); }
.drawer--left { left: 0; width: 303px; transform: translateX(-100%); }
.drawer.is-open { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
.drawer__close {
  position: absolute; top: 32px; display: grid; place-items: center; width: 48px; height: 54px;
  background: var(--red); color: #FFFFFF; border: 0; border-bottom: 6px solid var(--red-lip);
  border-radius: var(--r-btn); cursor: pointer;
}
.drawer--right .drawer__close { left: -64px; }
.drawer--left .drawer__close { right: -64px; }
.drawer__close .ic { width: 22px; height: 22px; }
.drawer__scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -8px; padding: 0 8px 12px; }

.carthead {
  position: relative; z-index: 3; padding: 28px 36px 32px; color: #FFFFFF; flex: none; overflow: visible;
  background: var(--green); border-radius: var(--r-panel); border-bottom: 6px solid var(--green-lip);
}
.carthead__art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.carthead__art::before {        /* glow on the right */
  content: ''; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 65%);
}
.carthead__art .texture { top: 0; right: 0; bottom: 0; width: 55%; --texture-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='144' fill='%23FFFFFF'%3E%3Crect x='0' y='0' width='48' height='48' fill-opacity='0.08'/%3E%3Crect x='96' y='0' width='48' height='48' fill-opacity='0.128'/%3E%3Crect x='144' y='0' width='48' height='48' fill-opacity='0.048'/%3E%3Crect x='48' y='48' width='48' height='48' fill-opacity='0.096'/%3E%3Crect x='144' y='48' width='48' height='48' fill-opacity='0.064'/%3E%3Crect x='192' y='48' width='48' height='48' fill-opacity='0.144'/%3E%3Crect x='0' y='96' width='48' height='48' fill-opacity='0.056'/%3E%3Crect x='96' y='96' width='48' height='48' fill-opacity='0.088'/%3E%3Crect x='192' y='96' width='48' height='48' fill-opacity='0.112'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to right, transparent, #000 70%); mask-image: linear-gradient(to right, transparent, #000 70%); }
.carthead > *:not(.carthead__art) { position: relative; }
.carthead h2 { display: flex; align-items: center; gap: 10px; font: 800 20px/28px var(--font); overflow-wrap: anywhere; }
.carthead h2 .ic { width: 22px; height: 22px; }
.carthead p { margin-top: 4px; font: 700 16px/24px var(--font); }
.carthead__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.carthead__btns .btn { min-height: 44px; padding: 8px 16px; font-size: 14px; }
.carthead :focus-visible { outline-color: #FFFFFF; }
.carthead .currency-menu { left: 0; transform: none; }
.carthead .dd.is-open > .currency-menu { transform: none; }
.carthead .currency-menu::before { left: 28px; }

.cartmsg { margin-top: var(--spacing); padding: 26px 24px; text-align: center; }
.cartmsg strong { display: block; font: 700 16px/24px var(--font); }
.cartmsg span { display: block; margin-top: 6px; color: var(--text-muted); font: 500 14px/22px var(--font); }
.cartitem { margin-top: var(--spacing); overflow: visible; }
.cartitem__where { padding: 8px 20px; background: #F3F3F3; border-radius: 6px 6px 0 0; color: var(--text-muted); font: 500 14px/20px var(--font); }
:root[data-theme="dark"] .cartitem { background: #575757; border-bottom-color: #4D4D4D; }
:root[data-theme="dark"] .cartitem__where { background: #4D4D4D; }
.cartitem__row { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 20px; }
.cartitem__text { flex: 1; min-width: 0; }
.cartitem__name { display: block; font: 600 16px/22px var(--font); overflow-wrap: anywhere; }
.cartitem__price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; color: var(--price); font: 600 14px/20px var(--font); }
.cartitem__price .price-old { font-size: 13px; }
.cartitem__opt { padding: 8px 20px 12px; border-top: 1px solid var(--rule); color: var(--text-muted); font: 500 13px/20px var(--font); }
.qty__select, .qty__fixed, .trash {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 56px; flex: none;
  border: 0; border-radius: 6px; background: #F3F3F3; color: var(--text); font: 700 20px/1 var(--font); cursor: pointer;
}
:root[data-theme="dark"] .qty__select, :root[data-theme="dark"] .qty__fixed { background: #4D4D4D; }
.qty__select {
  width: 72px; padding: 0 26px 0 14px; -webkit-appearance: none; appearance: none; text-align: left;
  background: #F3F3F3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23909090' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 14px;
}
:root[data-theme="dark"] .qty__select { background-color: #4D4D4D; }
.qty__fixed { cursor: default; }
.trash { background: var(--red); color: #FFFFFF; box-shadow: inset 0 -4px 0 var(--red-lip); }
.trash .ic { width: 20px; height: 20px; }

/* coupon box */
.coupon { margin-top: var(--spacing); padding: 20px 20px 22px; }
.coupon__title { display: flex; align-items: center; gap: 8px; font: 700 15px/22px var(--font); }
.coupon__title .ic { width: 16px; height: 16px; color: var(--green); }
.coupon__row { display: flex; gap: 10px; margin-top: 12px; }
.coupon__row .input { min-height: 52px; padding: 0 16px; font-weight: 700; text-transform: uppercase; }
.coupon__row .input::placeholder { text-transform: none; }
.coupon__row .btn { min-height: 52px; padding: 8px 22px; flex: none; }
.coupon__applied {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px 10px 14px;
  border-radius: 6px; background: rgba(62, 190, 55, .12); border: 1px solid rgba(62, 190, 55, .35);
}
.coupon__applied .ic { width: 18px; height: 18px; color: var(--green-lip); }
:root[data-theme="dark"] .coupon__applied .ic { color: var(--price); }
.coupon__applied div { flex: 1; min-width: 0; }
.coupon__applied strong { display: block; font: 800 14px/20px var(--font); letter-spacing: .03em; }
.coupon__applied span { display: block; color: var(--text-muted); font: 500 13px/19px var(--font); }
.coupon__remove {
  flex: none; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted);
  font: 700 13px/1 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.coupon__remove:hover { color: var(--text); }
.coupon .alert { margin: 12px 0 0; max-width: none; justify-content: flex-start; }

.cartfoot { padding-top: 18px; }
.cartfoot__total { text-align: center; font: 600 16px/24px var(--font); }
.cartfoot__note { margin-top: 4px; text-align: center; color: var(--text-muted); font: 500 12px/18px var(--font); }
.cartfoot .btn { margin-top: 14px; }

.navhead { display: flex; align-items: center; gap: 10px; padding: 0 4px 18px; font: 900 18px/1 var(--font); }
.navhome {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 6px; background: var(--panel);
  color: var(--text); text-decoration: none; font: 700 15px/22px var(--font); box-shadow: inset 0 -4px 0 var(--panel-lip);
}
.acc { margin-top: 12px; }
.acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 18px;
  background: var(--realm); color: #FFFFFF; border: 0; border-bottom: 4px solid var(--realm-lip);
  border-radius: var(--r-btn); font: 900 15px/22px var(--font); text-align: left; cursor: pointer;
}
.acc__btn .ic { width: 16px; height: 16px; transition: transform .3s; }
.acc__btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.acc__list { list-style: none; margin: 6px 0 0; padding: 6px; background: var(--panel); border-radius: 6px; }
.acc__list a, .acc__list span { display: block; padding: 10px 14px; border-radius: 6px; color: var(--text); text-decoration: none; font: 500 14px/20px var(--font); }
.acc__list a:hover { background: #EBEBEB; }
:root[data-theme="dark"] .acc__list a:hover { background: var(--well); }
.acc__list a[aria-current="page"] { background: #EBEBEB; box-shadow: inset 0 -4px 0 var(--side-active-lip); font-weight: 700; }
:root[data-theme="dark"] .acc__list a[aria-current="page"] { background: var(--side-active); }
.acc__list span { color: var(--text-muted); }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 300; display: flex; justify-content: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 640px;
  min-height: 48px; padding: 12px 20px; border-radius: 6px; border-bottom: 4px solid var(--green-lip);
  background: var(--green); color: #FFFFFF; font: 800 14px/22px var(--font); text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2); animation: toast-in .2s ease-out;
}
.toast--danger { background: var(--red); border-bottom-color: var(--red-lip); }
.toast .ic { width: 18px; height: 18px; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

/* ---------- static pages ---------- */
.doc { padding: 48px 56px; }
.doc h1 { font: 700 24px/36px var(--font); }
.doc h2 { margin-top: 26px; font: 700 18px/28px var(--font); }
.doc p { margin-top: 12px; color: var(--text-body); font: 500 16px/28px var(--font); }
.doc .chip-note { margin-top: 22px; }

/* ---------- footer ---------- */
.footer { background: var(--footer); color: var(--text); }
.footer__about { display: flex; align-items: center; gap: 32px; padding: 48px 0; }
.footer__mark { flex: none; display: block; width: 117px; }
.footer__mark img { width: 100%; height: auto; }
.footer__about-text { flex: 1; min-width: 0; }
.footer__about-text h2 { font: 700 16px/24px var(--font); }
.footer__about-text p { max-width: 583px; margin-top: 6px; color: var(--text-faint); font: 500 14px/23px var(--font); }
.footer__discord { flex: none; min-width: 228px; min-height: 57px; font-size: 14px; }
.footer__discord .ic { width: 20px; height: 20px; }
.footer__cols { display: flex; gap: 0; padding: 56px 0; border-top: 1px solid var(--rule); }
.footer__col { width: 215px; min-width: 0; padding-right: 24px; }
.footer__col h3 { font: 700 14px/23px var(--font); }
.footer__col ul { list-style: none; margin: 14px 0 0; padding: 0; }
.footer__col li + li { margin-top: 6px; }
.footer__col a, .footer__col span { position: relative; display: inline-block; padding-left: 14px; color: var(--text-faint); text-decoration: none; font: 500 14px/23px var(--font); }
.footer__col a::before, .footer__col span::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: currentColor; }
.footer__col a:hover { color: var(--text); }
.footer__btns { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 140px; flex: none; margin-left: auto; }
.footer__legal { background: var(--legal); }
.footer__legal-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 50px; padding-top: 12px; padding-bottom: 12px; }
.footer__legal p { color: var(--text-faint); font: 500 12px/18px var(--font); }
.footer__legal nav { display: flex; gap: 18px; flex: none; }
.footer__legal a { color: var(--text-faint); font: 600 12px/18px var(--font); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.footer__legal a:hover { color: var(--text); }

.loading { padding: 64px 0; text-align: center; color: var(--text-muted); }

/* ---------- breakpoints ---------- */
@media (max-width: 1300px) {
  .pkggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkg--list .pkg__img { display: none; }
  .modal__close { top: -66px; right: 0; }
  .overlay { padding-top: 92px; }
  .modal__head { top: -92px; }
  .intro__body { padding-left: 64px; padding-right: 64px; }
  .footer__col { width: 180px; }
}
@media (max-width: 1200px) {
  .modules { grid-template-columns: 1fr; }
  .module--wide { grid-column: auto; }
  .sale { display: none; }
  .topcust__figure, .topcust .texture { display: none; }
  .topcust { justify-content: space-between; }
  .globalinfo { padding: 32px 24px 36px; }
  .prizes { grid-template-columns: 1fr; }
}
@media (max-width: 1050px) {
  .realmbar, .sidebar { display: none; }
  .mobilebar { display: flex; }
  .page { padding-top: 8px; }
  .hero { height: 400px; }
  .logo { top: 26px; }
  .logo img { height: 240px; max-width: 264px; }
  .splash { min-width: 0; padding: 22px 26px; }
  .footer__col { width: auto; flex: 1; }
}
@media (max-width: 850px) {
  .pagetop { display: none; }
  .mobilebar__cart { display: flex; }
  .mobilebar__menu { flex: none; width: 112px; justify-content: center; padding: 14px; }
  .mobilebar__menu .mobilebar__text { display: none; }
  .pkg--list .pkg__info { flex-direction: column; align-items: stretch; text-align: center; padding: 24px; }
  .pkg--list .prices { justify-content: center; }
  .pkg--list .pkg__buttons { padding-top: 12px; }
  .pkg--list .btn--add { width: auto; flex: 1; }
  .footer__about { flex-wrap: wrap; }
}
@media (max-width: 780px) {
  .splash { display: none; }
  .hero { height: 380px; }
}
@media (max-width: 750px) {
  .footer__col { display: none; }
  .footer__cols { padding: 28px 0 32px; }
  .footer__btns { flex-direction: row; width: 100%; justify-content: center; margin-left: 0; }
  .footer__legal-in { flex-direction: column; align-items: flex-start; }
  .infosections { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pkggrid { grid-template-columns: minmax(0, 1fr); }
  .pkg__img { height: 231px; }
  .modal__head { flex-direction: column; align-items: center; text-align: center; padding: 24px; }
  .modal__head .prices { justify-content: center; }
  .modal__head .btn { width: 100%; }
  .drawer { width: 321px; padding: 20px; }
  .drawer--right .drawer__close { top: 20px; left: -60px; }
  .drawer--left .drawer__close { top: 20px; right: -60px; }
  .carthead { padding: 24px 22px 26px; }
  .prizes__places { gap: 10px; }
  .place__amount { font-size: 20px; }
  .topcust { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 650px) {
  :root { --gutter: 16px; }
  .hero-top__back { display: none; }
  .hero-top__right { gap: 20px; margin-left: 0; width: 100%; justify-content: space-between; }
  .intro__head { padding: 32px 20px 0; }
  .intro__body { padding: 18px 20px 32px; }
  .module, .doc, .topcust, .prizes { padding: 32px 22px; }
  .intro__head h1, .doc h1, .globalinfo h1, .soonpanel h1, .catdesc h1 { font-size: 20px; line-height: 30px; }
  .panel h2, .modal__head h2 { font-size: 16px; line-height: 26px; }
  .modal__body, .options, .modal__pad, .login { padding-left: 18px; padding-right: 18px; }
  .overlay { padding-left: 12px; padding-right: 12px; }
  .catdesc { padding: 22px; }
  .sale__title { font-size: 26px; line-height: 44px; padding: 4px 40px; }
  .giftcheck { grid-template-columns: 1fr; }
  .chip-note { padding: 12px 16px; }
  .footer__about { gap: 20px; padding: 32px 0; }
  .footer__discord { width: 100%; }
  .recent { grid-template-columns: repeat(5, minmax(0, 60px)); gap: 12px; }
  .recent__tile { width: 100%; height: auto; aspect-ratio: 1; }
}
@media (max-width: 560px) {
  .login__row { flex-direction: column; align-items: stretch; }
  .login__row .input { min-width: 0; width: 100%; }
}
@media (max-width: 450px) {
  .hero { height: 356px; }
  .logo img { height: 210px; max-width: 224px; }
  .mobilebar { gap: 12px; }
  .mobilebar__menu { width: 80px; }
  .prizes__places { grid-template-columns: 1fr; }
  .place--1 { padding-top: 18px; }
  .coupon__row { flex-direction: column; }
}
@media (max-width: 390px) {
  :root { --spacing: 12px; }
  .hero-link .faint { display: none; }
  .drawer { width: 280px; max-width: calc(100vw - 64px); padding: 16px; }
  .drawer--right .drawer__close { left: -56px; }
  .drawer--left .drawer__close { right: -56px; }
  .carthead { padding: 22px 18px 24px; }
  .cartitem__row { padding: 12px; gap: 8px; }
  .pkg__buttons { gap: 8px; }
  .btn--square { width: 52px; min-height: 56px; }
  .btn--add { min-height: 56px; padding-left: 10px; padding-right: 10px; }
  .btn--add .ic { display: none; }
  .pkg__info, .pkg--list .pkg__info { padding: 20px 16px 22px; }
  .qty__fixed, .trash { width: 46px; height: 50px; font-size: 17px; }
  .qty__select { width: 62px; height: 50px; font-size: 17px; padding-left: 10px; }
  .recent { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}