/* GamesWay: launcher-style store. Indigo panels, cyan highlights, amber prices. */

:root {
  /* Nebula theme: change these to re-colour the whole site */
  --void: #0A0718;      /* page behind the launcher */
  --shell: #120D29;     /* launcher frame */
  --panel: #1A1338;     /* main panels */
  --panel-2: #211948;   /* raised panels */
  --raised: #2B2160;    /* chips, inputs, hover */
  --line: #3A2D7E;      /* borders */
  --line-soft: #2A2160;
  --accent-1: #8B5CFF;  /* violet */
  --accent-2: #FF4DB8;  /* pink */
  --grad: linear-gradient(120deg, var(--accent-1), var(--accent-2));
  --cyan: #3CE3FF;      /* focus, info */
  --cyan-ink: #08202B;
  --amber: #FFC043;     /* prices */
  --gold: var(--amber);
  --text: #F4F1FF;
  --text-2: #D6D0F5;
  --muted: #ABA3D8;
  --dim: #776EB2;
  --ps: #3D7BFF;
  --xb: #3FD07A;
  --wa: #25D366;

  --r-shell: 38px;
  --r-panel: 28px;
  --r-card: 20px;
  --r-ctl: 14px;

  --font: "Readex Pro", system-ui, sans-serif;
  --display: "Unbounded", "Readex Pro", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
[dir="rtl"] { --display: "Readex Pro", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 85% -10%, #2A1F6B 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #10345C 0%, transparent 60%),
    var(--void);
  background-attachment: fixed;
  color: var(--text);
  font: 400 15px/1.5 var(--font);
  min-height: 100vh;
}
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; background: var(--cyan); color: var(--cyan-ink); padding: 10px 16px; border-radius: 12px; z-index: 100; font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }

/* ---------- Shell ---------- */
.shell {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 84px;
  gap: 18px;
  max-width: 1480px;
  margin: 24px auto;
  padding: 18px;
  background: var(--shell);
  border: 1px solid #2B2266;
  border-radius: var(--r-shell);
  box-shadow: 0 40px 120px -40px #000a, inset 0 1px 0 #ffffff0d;
  min-height: calc(100vh - 48px);
}

/* Left rail */
.rail {
  position: sticky; top: 18px;
  height: calc(100vh - 84px);
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  padding: 18px 0;
  background: var(--panel);
  border-radius: var(--r-panel);
}
.rail__logo img { width: 44px; height: 44px; }
.rail__links { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rail__btn {
  position: relative;
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 16px;
  color: var(--dim);
  text-decoration: none;
  transition: color .2s, background .2s;
}
.rail__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rail__btn:hover { color: var(--text); background: var(--raised); }
.rail__btn[aria-current="page"] { color: var(--cyan); background: #3EE6FF14; }
.rail__btn[aria-current="page"]::before {
  content: ""; position: absolute; inset-inline-start: -17px; top: 13px; bottom: 13px; width: 4px;
  border-radius: 4px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan);
}
.rail__wa { color: var(--wa); border: 1.5px dashed #25D36655; }
.rail__wa:hover { color: var(--wa); background: #25D36614; }

/* Right rail */
.side { position: sticky; top: 18px; height: calc(100vh - 84px); display: flex; flex-direction: column; gap: 18px; }
.side__group { background: var(--panel); border-radius: var(--r-panel); padding: 18px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 1; }
.side__group--small { flex: none; }
.side__sub {
  position: relative;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 13px/1 var(--display);
  color: #fff; text-decoration: none;
  background: var(--c);
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px color-mix(in srgb, var(--c) 45%, transparent);
}
.side__sub::after { content: attr(data-tip); position: absolute; inset-inline-end: 62px; white-space: nowrap; background: var(--raised); color: var(--text); font: 500 12px var(--font); padding: 6px 10px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.side__sub:hover::after, .side__sub:focus-visible::after { opacity: 1; }
.side__plat { font-size: 10px; color: var(--muted); margin-top: -8px; }
.side__wa { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: #06331A; }

/* ---------- Top bar ---------- */
.main-col { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.topbar { display: flex; align-items: center; gap: 18px; padding: 8px 6px 0; }
.greet { font: 500 22px/1.2 var(--display); color: var(--dim); white-space: nowrap; }
.greet strong { color: var(--text); font-weight: 700; }
.search {
  flex: 1; max-width: 420px; margin-inline-start: auto;
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  color: var(--dim);
}
.search:focus-within { border-color: var(--cyan); color: var(--cyan); }
.search svg { width: 18px; height: 18px; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); }
.search input::placeholder { color: var(--dim); }
.topbar__actions { display: flex; gap: 10px; }
.icon-btn {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  transition: border-color .2s, background .2s;
}
.icon-btn:hover { border-color: var(--cyan); }
.lang-btn { font: 600 17px/1 var(--font); }
.badge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--amber); color: #2B1700; font: 700 11px/20px var(--font); text-align: center; }
.badge.bump { animation: bump .4s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }

/* ---------- Layout blocks ---------- */
main, main:focus-visible { outline: 0; } 
main { display: flex; flex-direction: column; gap: 28px; padding-bottom: 12px; }
.home-top, .home-mid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sec-head h2 { font: 700 21px/1.2 var(--display); }
[dir="rtl"] .sec-head h2 { font-weight: 700; }
.link { color: var(--muted); font-size: 13px; text-decoration: none; background: none; border: 0; padding: 4px 0; }
.link:hover { color: var(--cyan); }
.panel { background: var(--panel); border-radius: var(--r-panel); padding: 22px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 330px;
  border-radius: var(--r-panel);
  background: var(--panel);
  isolation: isolate;
}
.hero__slide { position: absolute; inset: 0; display: flex; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.hero__slide.is-on { opacity: 1; visibility: visible; }
.hero__art { position: absolute; inset: 0; z-index: -1; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; }
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #1B1450 0%, #1B1450ee 30%, #1B145066 62%, transparent 100%),
    linear-gradient(0deg, #1B1450cc 0%, transparent 45%);
}
[dir="rtl"] .hero__art::after {
  background:
    linear-gradient(270deg, #1B1450 0%, #1B1450ee 30%, #1B145066 62%, transparent 100%),
    linear-gradient(0deg, #1B1450cc 0%, transparent 45%);
}
.hero__body { position: relative; max-width: 470px; padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; }
.hero__tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hero__title { font: 800 clamp(28px, 3.6vw, 46px)/1.02 var(--display); letter-spacing: -.02em; text-wrap: balance; }
[dir="rtl"] .hero__title { font-family: var(--font); font-weight: 700; letter-spacing: 0; direction: ltr; text-align: right; }
.hero__text { color: #CFC9F5; max-width: 40ch; font-size: 14px; }
.hero__buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.hero__price { font: 700 22px/1 var(--font); color: var(--amber); margin-inline-end: 6px; }
.hero__dots { position: absolute; top: 22px; inset-inline-end: 24px; display: flex; gap: 6px; z-index: 2; }
.hero__dot { width: 18px; height: 5px; border: 0; padding: 0; border-radius: 4px; background: #ffffff40; transition: width .3s var(--ease), background .3s; }
.hero__dot[aria-current="true"] { width: 34px; background: var(--cyan); }
.hero__dot::before { content: ""; position: absolute; } /* keeps hit area simple */

/* ---------- Chips & buttons ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: #ffffff1a; color: var(--text);
  backdrop-filter: blur(6px);
}
.chip--pre { background: var(--amber); color: #2B1700; }
.chip--new { background: var(--cyan); color: var(--cyan-ink); }
.plat { display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border-radius: 7px; font: 700 10px/1 var(--display); letter-spacing: .02em; color: #fff; }
.plat--ps { background: var(--ps); }
.plat--xb { background: var(--xb); color: #05301A; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 999px; border: 0;
  font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: transform .15s var(--ease), background .2s, box-shadow .2s;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--cyan); color: var(--cyan-ink); box-shadow: 0 8px 26px -10px var(--cyan); }
.btn--primary:hover { box-shadow: 0 10px 34px -8px var(--cyan); }
.btn--ghost { background: #ffffff14; color: var(--text); }
.btn--ghost:hover { background: #ffffff24; }
.btn--wa { background: var(--wa); color: #05301A; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; }

/* ---------- Upcoming list (hero side) ---------- */
.up-list { display: flex; flex-direction: column; gap: 12px; }
.up {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px; border-radius: 22px;
  background: var(--panel); border: 1px solid transparent;
  text-align: start; width: 100%;
  transition: border-color .2s;
}
[dir="rtl"] .up { padding: 10px 10px 10px 14px; }
.up:hover { border-color: var(--line); }
.up img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; flex: none; }
.up__txt { flex: 1; min-width: 0; }
.up__title { font-weight: 500; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.up__when { font-size: 12px; color: var(--cyan); margin-top: 3px; }
.up__chev { color: var(--dim); width: 18px; height: 18px; }
[dir="rtl"] .up__chev { transform: scaleX(-1); }
.side-col { display: flex; flex-direction: column; gap: 12px; }
.side-col .sec-head { margin: 0 4px 2px; }

/* ---------- Cards ---------- */
.rowscroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.rowscroll > * { scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }

.card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-card); overflow: hidden;
  background: var(--panel); border: 1px solid #2D2470;
  text-align: start; padding: 0; color: inherit;
  transition: border-color .2s, transform .2s var(--ease);
}
.card:hover, .card:focus-within { border-color: #3EE6FF66; }
.card__art { position: relative; aspect-ratio: 16 / 10; background: var(--raised); overflow: hidden; }
.card__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__art img { transform: scale(1.05); }
.card__flags { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; gap: 5px; }
.card__pre { position: absolute; top: 10px; inset-inline-end: 10px; }
.card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card__title { font-weight: 600; font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; direction: ltr; text-align: start; }
[dir="rtl"] .card__title { text-align: right; }
.card__meta { font-size: 12px; color: var(--dim); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.price { font-weight: 700; color: var(--amber); font-size: 15px; }
.price small { font-weight: 400; font-size: 11px; color: var(--muted); margin-inline-start: 2px; }
.price--ask { color: var(--muted); font-weight: 500; font-size: 13px; }
.card__open { position: absolute; inset: 0; z-index: 1; border: 0; background: none; border-radius: inherit; }
.card__add {
  position: relative; z-index: 2;
  width: 36px; height: 36px; border-radius: 12px; border: 0;
  display: grid; place-items: center;
  background: #3EE6FF1f; color: var(--cyan);
  transition: background .2s, color .2s;
}
.card__add:hover { background: var(--cyan); color: var(--cyan-ink); }
.card__add svg { width: 18px; height: 18px; }

/* ---------- Library ring ---------- */
.ring-panel { display: flex; flex-direction: column; align-items: center; gap: 16px; background: linear-gradient(180deg, #2A2063, var(--panel)); }
.ring-panel .sec-head { align-self: stretch; margin: 0; }
.ring { position: relative; width: 210px; height: 210px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-width: 22; cursor: pointer; transition: stroke-width .2s var(--ease), opacity .2s; }
.ring circle:hover, .ring circle:focus-visible { stroke-width: 28; outline: none; }
.ring__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.ring__num { font: 800 38px/1 var(--display); }
.ring__lbl { font-size: 12px; color: var(--muted); margin-top: 6px; }
.legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.legend button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 16px; background: #ffffff0a; border: 0; }
.legend button:hover { background: #ffffff16; }
.legend i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 10px var(--display); font-style: normal; color: #fff; }
.legend b { font: 600 15px var(--font); }
.legend span { font-size: 11px; color: var(--muted); }

/* ---------- Subscription promo on home ---------- */
.promo {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 22px 26px; border-radius: var(--r-panel);
  background: linear-gradient(100deg, #2B2270 0%, #213B7A 55%, #1B5568 100%);
}
.promo__badges { display: flex; }
.promo__badges span { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--display); color: #fff; background: var(--c); border: 3px solid #26306F; margin-inline-start: -12px; }
.promo__badges span:first-child { margin-inline-start: 0; }
.promo__txt { flex: 1; min-width: 200px; }
.promo__txt h2 { font: 700 19px/1.25 var(--display); }
.promo__txt p { color: #C9D3F5; font-size: 14px; margin-top: 4px; }

/* ---------- Genre strip ---------- */
.genres { display: flex; gap: 10px; flex-wrap: wrap; }
.genres button { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 13px; transition: color .2s, border-color .2s; }
.genres button:hover { color: var(--text); border-color: var(--cyan); }
.genres b { color: var(--dim); font-weight: 400; margin-inline-start: 4px; }

/* ---------- Page header (inner pages) ---------- */
.page-head { display: flex; flex-direction: column; gap: 6px; padding: 6px 4px 0; }
.page-head h1 { font: 800 clamp(26px, 3vw, 38px)/1.05 var(--display); letter-spacing: -.02em; }
[dir="rtl"] .page-head h1 { font-weight: 700; letter-spacing: 0; }
.page-head p { color: var(--muted); max-width: 60ch; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.seg button { height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--cyan); color: var(--cyan-ink); }
.select { position: relative; }
.select select {
  appearance: none; height: 46px; padding: 0 40px 0 16px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: 13px;
}
[dir="rtl"] .select select { padding: 0 16px 0 40px; }
.select::after { content: ""; position: absolute; inset-inline-end: 18px; top: 50%; width: 7px; height: 7px; border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.count { color: var(--dim); font-size: 13px; margin-inline-start: auto; }
.more { display: flex; justify-content: center; margin-top: 8px; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 16px; background: var(--panel); border-radius: var(--r-panel); }

/* ---------- Subscriptions page ---------- */
.subs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.sub {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px; border-radius: var(--r-panel);
  background: var(--panel); border: 1px solid #2D2470;
  scroll-margin-top: 24px;
}
.sub::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c); }
.sub:target { border-color: var(--c); }
.sub__head { display: flex; align-items: center; gap: 14px; }
.sub__logo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font: 700 14px var(--display); color: #fff; background: var(--c); flex: none; }
.sub__name { font: 700 18px/1.2 var(--display); direction: ltr; }
[dir="rtl"] .sub__name { text-align: right; font-family: var(--font); }
.sub__plats { display: flex; gap: 5px; margin-top: 6px; }
.sub__label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.tiers { display: flex; gap: 6px; flex-wrap: wrap; }
.tiers button, .months button {
  height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: none; color: var(--muted); font-size: 13px; font-weight: 500;
}
.tiers button[aria-pressed="true"], .months button[aria-pressed="true"] { border-color: var(--cyan); color: var(--text); background: #3EE6FF14; }
.months { display: flex; gap: 6px; flex-wrap: wrap; }
.months button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: auto; padding: 8px 14px; gap: 2px; }
.months button span { font-size: 12px; color: var(--amber); font-weight: 600; }
.perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: #D4CFF5; min-height: 84px; }
.perks li { display: flex; gap: 10px; align-items: flex-start; }
.perks li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 2px; background: var(--c); transform: rotate(45deg); }
.sub__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sub__price { font: 700 24px/1 var(--font); color: var(--amber); }
.sub__price small { font-size: 12px; font-weight: 400; color: var(--muted); }

/* ---------- Coming soon timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: 14px; }
.tl {
  display: grid; grid-template-columns: 84px 200px minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: 12px; padding-inline-end: 20px; border-radius: 24px;
  background: var(--panel); border: 1px solid transparent;
}
.tl:hover { border-color: var(--line); }
.tl__date { text-align: center; border-inline-end: 1px solid var(--line); padding: 6px 0; }
.tl__day { font: 800 28px/1 var(--display); }
.tl__mon { font-size: 12px; color: var(--muted); margin-top: 4px; }
.tl img { width: 200px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
.tl__title { font: 600 17px/1.3 var(--font); direction: ltr; text-align: start; }
[dir="rtl"] .tl__title { text-align: right; }
.tl__meta { color: var(--dim); font-size: 13px; margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl__count { color: var(--cyan); }
.tl__buy { display: flex; align-items: center; gap: 14px; }

/* ---------- Game modal ---------- */
.modal {
  width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--shell); color: var(--text);
  box-shadow: 0 40px 120px -20px #000c;
  overflow: auto;
}
.modal::backdrop { background: #07051acc; backdrop-filter: blur(6px); }
.modal[open] { animation: pop .35s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.gm { display: grid; grid-template-columns: 1.15fr 1fr; }
.gm__art { position: relative; min-height: 340px; }
.gm__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm__body { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.gm__close { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3; background: #19133Fcc; backdrop-filter: blur(6px); }
.gm__title { font: 800 26px/1.1 var(--display); letter-spacing: -.01em; direction: ltr; text-align: start; padding-inline-end: 40px; }
[dir="rtl"] .gm__title { text-align: right; font-family: var(--font); font-weight: 700; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13.5px; margin: 0; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; }
.gm__price { font: 700 28px/1 var(--font); color: var(--amber); }
.gm__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

/* ---------- Cart drawer ---------- */
.scrim { position: fixed; inset: 0; background: #07051aaa; backdrop-filter: blur(3px); z-index: 40; }
.cart {
  position: fixed; top: 12px; bottom: 12px; inset-inline-end: 12px; z-index: 50;
  width: min(420px, calc(100vw - 24px));
  display: flex; flex-direction: column;
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--r-panel);
  box-shadow: 0 30px 90px -20px #000c;
  transform: translateX(calc(100% + 24px)); transition: transform .35s var(--ease);
}
[dir="rtl"] .cart { transform: translateX(calc(-100% - 24px)); }
.cart.is-open { transform: none !important; }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; }
.cart__head h2 { font: 700 20px var(--display); }
.cart__body { flex: 1; overflow: auto; padding: 4px 20px; display: flex; flex-direction: column; gap: 12px; }
.ci { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: var(--panel); }
.ci__img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.ci__logo { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font: 700 14px var(--display); color: #fff; background: var(--c); }
.ci__title { font-size: 14px; font-weight: 500; line-height: 1.3; }
.ci__sub { font-size: 12px; color: var(--dim); margin-top: 2px; }
.ci__price { color: var(--amber); font-weight: 600; font-size: 14px; margin-top: 4px; }
.ci__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.qty { display: inline-flex; align-items: center; background: var(--raised); border-radius: 10px; }
.qty button { width: 28px; height: 28px; border: 0; background: none; color: var(--text); font-size: 16px; }
.qty span { min-width: 18px; text-align: center; font-size: 13px; }
.ci__rm { background: none; border: 0; color: var(--dim); font-size: 12px; padding: 2px; }
.ci__rm:hover { color: #FF8A9A; }
.cart__empty { margin: auto; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 10px; max-width: 32ch; }
.cart__foot { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); }
.cart__foot:empty { display: none; }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; }
.cart__total b { font-size: 24px; color: var(--amber); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.field input, .field textarea { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 12px; color: var(--text); font-size: 14px; resize: none; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--cyan); }
.cart__note { font-size: 12px; color: var(--dim); text-align: center; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; z-index: 60;
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  background: var(--cyan); color: var(--cyan-ink); font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: 999px; box-shadow: 0 12px 30px -10px var(--cyan);
  transition: transform .3s var(--ease), opacity .3s;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .shell { grid-template-columns: 84px minmax(0, 1fr); }
  .side { display: none; }
}
@media (max-width: 1060px) {
  .home-top, .home-mid { grid-template-columns: 1fr; }
  .side-col .up-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .ring-panel { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .ring-panel .legend { max-width: 360px; }
  .tl { grid-template-columns: 70px 140px minmax(0, 1fr); }
  .tl img { width: 140px; }
  .tl__buy { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  body { font-size: 14px; background-attachment: scroll; }
  .shell { display: block; margin: 0; padding: 12px 16px 96px; border: 0; border-radius: 0; box-shadow: none; background: transparent; min-height: 100vh; }
  .rail {
    position: fixed; z-index: 30; top: auto; bottom: 10px; left: 10px; right: 10px;
    height: 66px; padding: 0 10px; flex-direction: row; justify-content: space-around; gap: 0;
    background: #231B56f2; backdrop-filter: blur(12px); border: 1px solid var(--line);
    box-shadow: 0 10px 40px -10px #000c;
  }
  .rail__logo { display: none; }
  .rail__links { flex-direction: row; flex: 0 1 auto; gap: 4px; justify-content: space-around; width: 100%; }
  .rail__btn[aria-current="page"]::before { inset-inline-start: 13px; right: auto; left: auto; top: auto; bottom: -9px; width: 24px; height: 4px; }
  [dir="ltr"] .rail__btn[aria-current="page"]::before { left: 13px; }
  [dir="rtl"] .rail__btn[aria-current="page"]::before { right: 13px; }
  .rail__wa { display: none; }
  .topbar { flex-wrap: wrap; padding: 0; gap: 12px; }
  .greet { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar__actions { order: 2; }
  .search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  main { gap: 24px; }
  .hero { min-height: 420px; }
  .hero__art::after, [dir="rtl"] .hero__art::after { background: linear-gradient(0deg, #1B1450 0%, #1B1450ee 42%, #1B145055 75%, transparent 100%); }
  .hero__body { padding: 22px 20px; }
  .hero__dots { top: 16px; }
  .rowscroll { grid-auto-columns: 72%; margin: 0 -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card__body { padding: 10px 11px 11px; }
  .card__title { font-size: 13px; }
  .card__meta { display: none; }
  .card__pre { top: auto; bottom: 8px; inset-inline-end: auto; inset-inline-start: 8px; height: 22px; padding: 0 8px; font-size: 10.5px; }
  .panel { padding: 18px; }
  .ring { width: 170px; height: 170px; }
  .ring__num { font-size: 30px; }
  .filters { gap: 10px; }
  .filters .seg { width: 100%; }
  .filters .seg button { flex: 1; }
  .filters .select { flex: 1; }
  .filters .select select { width: 100%; }
  .count { width: 100%; margin: 0; }
  .subs { grid-template-columns: 1fr; }
  .sub { padding: 20px; }
  .tl { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding-inline-end: 12px; }
  .tl img { display: none; }
  .tl__day { font-size: 22px; }
  .tl__buy { grid-column: 1 / -1; justify-content: space-between; }
  .gm { grid-template-columns: 1fr; }
  .gm__art { min-height: 0; aspect-ratio: 16 / 9; }
  .gm__body { padding: 20px; }
  .gm__title { font-size: 22px; }
  .toast { bottom: 92px; }
}

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

/* Latin labels inside RTL layout */
.side__sub, .promo__badges span, .sub__logo, .ci__logo, .legend i { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .up__title { text-align: right; }

/* =================== Accounts, gift cards, challenges, milestones, rewards =================== */

.rail__sep { width: 26px; height: 1px; background: var(--line); margin: 4px auto; }
.rail__dot { position: absolute; top: 9px; inset-inline-end: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px var(--panel), 0 0 10px var(--amber); }
.rail { overflow-y: auto; scrollbar-width: none; }
.rail__links { gap: 6px; }

/* Account button */
.acct { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.acct:hover { border-color: var(--cyan); }
.acct svg { width: 20px; height: 20px; }
.acct--in { padding: 0 4px 0 14px; }
.acct__pts { display: inline-flex; align-items: center; gap: 5px; color: var(--amber); font-weight: 600; }
.acct__pts svg { width: 16px; height: 16px; fill: var(--amber); stroke: none; }
.acct__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--cyan), #7B6BFF); color: var(--cyan-ink); font: 700 15px var(--display); }
.menu { position: absolute; z-index: 45; min-width: 230px; padding: 8px; border-radius: 20px; background: var(--shell); border: 1px solid var(--line); box-shadow: 0 20px 60px -10px #000c; display: flex; flex-direction: column; }
.menu[hidden] { display: none; }
.menu__who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: flex; flex-direction: column; }
.menu__who span { color: var(--dim); font-size: 12px; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 0; background: none; text-decoration: none; font-size: 14px; text-align: start; }
.menu a:hover, .menu button:hover { background: var(--raised); }
.menu svg { width: 18px; height: 18px; color: var(--muted); }

/* Sign in */
.modal--auth { width: min(440px, calc(100vw - 32px)); }
.auth { position: relative; padding: 32px 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.auth h2 { font: 700 21px/1.2 var(--display); }
[dir="rtl"] .auth h2 { font-family: var(--font); }
.auth__muted { color: var(--muted); font-size: 13.5px; max-width: 34ch; }
.auth__form { width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: start; margin-top: 4px; }
.auth__switch { align-self: center; }
.auth__or { width: 100%; display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 12px; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__err { color: #FF9AA8; font-size: 13px; min-height: 1em; }
.auth__err:empty { display: none; }
.auth__demo { font-size: 12px; color: var(--amber); background: #FFB5471a; border-radius: 12px; padding: 10px 12px; }
.btn--google { background: #fff; color: #1F1F1F; }
.btn--google svg { width: 18px; height: 18px; }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* Shared */
.banner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 24px; border-radius: var(--r-panel); background: linear-gradient(100deg, #2C2272, #1E3F7A); border: 1px solid #3EE6FF33; }
.banner > div { flex: 1; min-width: 220px; }
.banner h2 { font: 700 17px/1.3 var(--display); }
[dir="rtl"] .banner h2 { font-family: var(--font); }
.banner p { color: #C9D3F5; font-size: 13.5px; margin-top: 4px; }
.loading { display: flex; gap: 8px; justify-content: center; padding: 80px 0; }
.loading span { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); animation: blink 1s infinite; }
.loading span:nth-child(2) { animation-delay: .15s; } .loading span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .2; transform: scale(.7); } }
.empty--sm { padding: 28px 20px; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 12px; white-space: nowrap; }
.tag--on, .tag--paid { background: #3EE6FF22; color: var(--cyan); }
.tag--pending { background: #FFB54722; color: var(--amber); }
.tag--cancelled { background: #ff6b8122; color: #FF9AA8; }
.cart__line { display: flex; justify-content: space-between; color: var(--cyan); font-size: 14px; }
.cart__earn { font-size: 12.5px; color: var(--muted); }
.cart__earn .link { font-size: 12.5px; color: var(--cyan); text-align: start; }
.field .select select { width: 100%; height: 42px; }

/* Gift cards */
.gcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.gc { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-panel); background: var(--panel); border: 1px solid #2D2470; }
.gc__card {
  position: relative; overflow: hidden; aspect-ratio: 1.586; border-radius: 18px; padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  box-shadow: 0 18px 40px -18px #000, inset 0 1px 0 #ffffff33;
}
.gc__card::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#ffffff38, transparent 65%); }
.gc__card--ps { background: linear-gradient(135deg, #0B3FD1 0%, #1F6BFF 55%, #00A3FF 100%); }
.gc__card--xbox { background: linear-gradient(135deg, #0A5C1F 0%, #107C10 50%, #3FD07A 100%); }
.gc__brand { font: 700 15px/1 var(--display); letter-spacing: -.01em; direction: ltr; text-align: left; }
.gc__brand b { font-weight: 500; opacity: .8; margin-left: 4px; }
.gc__value { font: 800 40px/1 var(--display); direction: ltr; text-align: left; }
.gc__region { font-size: 13px; opacity: .9; }
.gc .months button { min-width: 74px; }

/* Challenges */
.chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ch { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: 24px; background: var(--panel); border: 1px solid #2D2470; }
.ch__icon { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: var(--raised); color: var(--cyan); flex: none; }
.ch__icon svg { width: 26px; height: 26px; }
.ch__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ch__title { font: 600 15px/1.3 var(--font); }
.bar { height: 8px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2BB8FF, var(--cyan)); box-shadow: 0 0 12px var(--cyan); transition: width .6s var(--ease); }
.ch__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ch__pack { display: inline-flex; align-items: center; gap: 5px; color: var(--c); font-weight: 600; }
.ch__pack svg { width: 16px; height: 16px; }
.ch.is-done { border-color: #3EE6FF55; background: linear-gradient(135deg, #1E3D6B, var(--panel) 70%); }
.ch.is-done .ch__icon { background: var(--cyan); color: var(--cyan-ink); }
.ch.is-done .ch__meta > span:first-child { color: var(--cyan); font-weight: 600; }

/* Milestones */
.ms-status { display: flex; align-items: center; gap: 20px; }
.ms-count { display: flex; align-items: baseline; gap: 6px; }
.ms-count b { font: 800 56px/1 var(--display); color: var(--cyan); text-shadow: 0 0 30px #3EE6FF66; }
.ms-count span { font: 600 18px var(--display); color: var(--dim); }
.ms-status__txt { display: flex; flex-direction: column; gap: 2px; }
.ms-status__txt span { color: var(--muted); font-size: 14px; }
.track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 180px; gap: 14px; overflow-x: auto; padding: 8px 4px 18px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.track__line { position: absolute; top: 31px; left: 94px; height: 6px; border-radius: 6px; background: var(--raised); width: calc((var(--n) - 1) * 194px); }
.track__line i { display: block; height: 100%; width: var(--fill); border-radius: inherit; background: linear-gradient(90deg, #2BB8FF, var(--cyan)); box-shadow: 0 0 14px var(--cyan); }
[dir="rtl"] .track__line { right: 94px; left: auto; }
[dir="rtl"] .track__line i { margin-inline-start: 0; }
.node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; scroll-snap-align: center; }
.node__dot { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--shell); border: 3px solid var(--line); font: 700 14px var(--display); color: var(--muted); }
.node.is-got .node__dot { background: var(--cyan); border-color: var(--cyan); color: var(--cyan-ink); box-shadow: 0 0 22px #3EE6FF99; }
.node__card { width: 100%; flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 22px; background: var(--panel); border: 1px solid #2D2470; text-align: center; align-items: center; }
.node__icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--raised); color: var(--muted); }
.node__games { font-size: 12px; color: var(--dim); }
.node__label { font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.node__tag { margin-top: auto; font-size: 11px; color: var(--cyan); font-weight: 600; }
.node.is-got .node__card { border-color: #3EE6FF55; }
.node.is-got .node__icon { background: #3EE6FF22; color: var(--cyan); }
.node--final .node__dot { width: 60px; height: 60px; margin-top: -4px; border-color: var(--amber); color: var(--amber); }
.node--final .node__card { background: radial-gradient(120% 80% at 50% 0%, #5A3A12, var(--panel) 70%); border-color: #FFB54766; }
.node--final .node__icon { width: 58px; height: 58px; background: var(--amber); color: #2B1700; box-shadow: 0 0 30px #FFB54777; }
.node--final .node__icon svg { width: 30px; height: 30px; }
.node--final .node__label { font: 700 15px/1.25 var(--display); color: var(--amber); }
[dir="rtl"] .node--final .node__label { font-family: var(--font); }

/* Packs */
.pack {
  --w: 150px;
  position: relative; width: var(--w); aspect-ratio: 5 / 7; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background:
    linear-gradient(115deg, transparent 30%, #ffffff40 45%, transparent 60%) 0 0 / 250% 100%,
    radial-gradient(120% 70% at 50% 30%, color-mix(in srgb, var(--c) 90%, white), color-mix(in srgb, var(--c) 55%, #120C35) 75%);
  box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--c) 70%, black), inset 0 0 0 1px #ffffff40, inset 0 -30px 50px -20px #00000066;
  animation: foil 4s linear infinite;
}
@keyframes foil { to { background-position: -250% 0, 0 0; } }
.pack__crimp { position: absolute; top: 0; left: 0; right: 0; height: 12px; border-radius: 14px 14px 0 0; background: repeating-linear-gradient(90deg, #ffffff55 0 4px, #00000022 4px 8px); }
.pack__crimp--b { top: auto; bottom: 0; border-radius: 0 0 14px 14px; }
.pack__logo { width: 34%; filter: drop-shadow(0 4px 10px #0006); }
.pack__name { font: 700 13px/1.15 var(--display); color: #fff; text-align: center; padding: 0 10px; text-shadow: 0 2px 8px #0008; }
[dir="rtl"] .pack__name { font-family: var(--font); }
.pack--sm { --w: 112px; }
.pack--sm .pack__name { font-size: 11px; }
.pack--lg { --w: min(240px, 60vw); }
.pack--lg .pack__name { font-size: 18px; }
.packs { display: flex; gap: 20px; flex-wrap: wrap; }
.pack-slot { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wallet { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 22px 26px; border-radius: var(--r-panel); background: radial-gradient(100% 140% at 0% 0%, #4A3420 0%, var(--panel) 55%); border: 1px solid #FFB5472e; }
[dir="rtl"] .wallet { background: radial-gradient(100% 140% at 100% 0%, #4A3420 0%, var(--panel) 55%); }
.wallet__pts { display: flex; align-items: baseline; gap: 8px; }
.wallet__num { font: 800 46px/1 var(--display); color: var(--amber); }
.wallet__pts > span:last-child { color: var(--muted); }
.wallet__packs { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.mini-pack { width: 40px; height: 54px; border-radius: 8px; border: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 85%, white), color-mix(in srgb, var(--c) 60%, #120C35)); box-shadow: 0 6px 14px -6px var(--c); }
.mini-pack svg { width: 18px; height: 18px; }
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.shop__item { display: flex; gap: 18px; padding: 18px; border-radius: var(--r-panel); background: var(--panel); border: 1px solid #2D2470; align-items: flex-start; }
.shop__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.shop__body h3 { font: 700 17px/1.2 var(--display); color: var(--c); }
[dir="rtl"] .shop__body h3 { font-family: var(--font); }
.odds { width: 100%; font-size: 13px; }
.odds summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.odds summary:hover { color: var(--text); }
.odds ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.odds li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; color: #D4CFF5; }
.odds li svg { width: 16px; height: 16px; color: var(--c); }
.odds b { color: var(--muted); font-weight: 500; font-size: 12px; }
.prizes, .orders { display: flex; flex-direction: column; gap: 10px; }
.prize { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 20px; background: var(--panel); }
.prize__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #3EE6FF1c; color: var(--cyan); flex: none; }
.prize__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prize__txt b { font-weight: 500; font-size: 14px; }
.prize code, .reveal__code { font: 500 12px/1 ui-monospace, Menlo, monospace; color: var(--muted); letter-spacing: .04em; }
.prize.is-spent { opacity: .55; }
.prize.is-spent .prize__icon { background: var(--raised); color: var(--dim); }
.order { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 16px; align-items: center; padding: 12px 16px; border-radius: 18px; background: var(--panel); font-size: 13.5px; }
.order__date { color: var(--dim); font-size: 12.5px; }
.order__items { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; direction: ltr; text-align: start; }

/* Pack opener */
.opener { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); overflow: hidden; }
.opener::backdrop { background: radial-gradient(circle at 50% 45%, #241A62 0%, #07051Af2 65%); backdrop-filter: blur(8px); }
.opener[open] { display: grid; place-items: center; }
.opener__close { position: absolute; top: 20px; inset-inline-end: 20px; z-index: 3; }
.opener__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 20px; }
.opener__rays { position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; margin: -380px 0 0 -380px; pointer-events: none; opacity: .35;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 60%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 20%, transparent 100%); mask: radial-gradient(circle closest-side, #000 20%, transparent 100%);
  animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.opener__pack { position: relative; border: 0; background: none; padding: 0; border-radius: 16px; animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-1deg); } }
.opener__hint { position: relative; color: var(--muted); font-size: 14px; }
.opener__stage.is-shaking .opener__pack { animation: shake .12s linear infinite; }
.opener__stage.is-shaking .opener__rays { opacity: .8; animation-duration: 3s; }
.opener__stage.is-shaking .opener__hint { visibility: hidden; }
@keyframes shake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-4px, 2px) rotate(-3deg); } 50% { transform: translate(3px, -2px) rotate(2deg); } 75% { transform: translate(-2px, -3px) rotate(-2deg); } 100% { transform: translate(4px, 1px) rotate(3deg); } }
.opener__flash { position: fixed; inset: 0; background: radial-gradient(circle, #fff, color-mix(in srgb, var(--c) 70%, transparent) 40%, transparent 70%); animation: flash .9s var(--ease) forwards; pointer-events: none; }
@keyframes flash { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }
.reveal { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 380px; animation: rise .6s .15s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(30px) scale(.9); } }
.reveal__icon { width: 108px; height: 108px; border-radius: 32px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 85%, white), color-mix(in srgb, var(--c) 60%, #120C35)); box-shadow: 0 0 60px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 0 1px #ffffff55; }
.reveal__icon svg { width: 52px; height: 52px; }
.reveal__kicker { color: var(--muted); font-size: 14px; margin-top: 8px; }
.reveal__title { font: 800 28px/1.15 var(--display); text-wrap: balance; }
[dir="rtl"] .reveal__title { font-family: var(--font); font-weight: 700; }
.reveal__code { font-size: 15px; padding: 10px 16px; border-radius: 12px; background: #ffffff12; color: var(--text); }
.reveal__note { color: var(--cyan); font-size: 14px; }
.reveal__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

@media (max-width: 760px) {
  .acct span:not(.acct__pts):not(.acct__av) { display: none; }
  .acct { padding: 0 12px; }
  .acct--in { padding: 0 3px 0 10px; }
  .acct__av { width: 34px; height: 34px; }
  .rail__sep { display: none; }
  .rail { overflow-x: auto; overflow-y: hidden; justify-content: flex-start; }
  .rail__links { gap: 2px; justify-content: space-between; min-width: max-content; }
  .rail__btn { width: 40px; height: 46px; }
  .rail__dot { top: 7px; inset-inline-end: 5px; }
  .gcs, .chs, .shop { grid-template-columns: 1fr; }
  .gc__value { font-size: 34px; }
  .ms-count b { font-size: 44px; }
  .track { grid-auto-columns: 150px; margin: 0 -16px; padding-inline: 16px; }
  .track__line { left: 91px; width: calc((var(--n) - 1) * 164px); }
  [dir="rtl"] .track__line { right: 91px; }
  .wallet__num { font-size: 36px; }
  .wallet__packs { margin: 0; }
  .order { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .order__items { grid-column: 1 / -1; grid-row: 3; }
  .shop__item { padding: 16px; }
  .packs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 10px; gap: 14px; }
  .pack-slot .pack { --w: 118px; }
  .pack-slot .pack__name { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .pack, .opener__rays, .opener__pack { animation: none !important; }
}


/* =================== Nebula theme layer =================== */
body {
  background:
    radial-gradient(900px 600px at 88% -8%, #4A22A8aa 0%, transparent 60%),
    radial-gradient(800px 600px at -8% 105%, #7A1A6Daa 0%, transparent 60%),
    radial-gradient(700px 500px at 30% 40%, #0F3B5C55 0%, transparent 70%),
    var(--void);
  background-attachment: fixed;
}
.shell { background: #120D29d9; backdrop-filter: blur(18px); border-color: #ffffff12; box-shadow: 0 40px 120px -40px #000c, inset 0 1px 0 #ffffff14; }
.rail, .side__group, .panel { background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.rail__btn[aria-current="page"] { color: #fff; background: linear-gradient(135deg, #8B5CFF40, #FF4DB833); }
.rail__btn[aria-current="page"]::before { background: var(--grad); box-shadow: 0 0 16px var(--accent-2); }
.search:focus-within { border-color: var(--accent-1); color: var(--accent-1); }
.icon-btn:hover, .acct:hover { border-color: var(--accent-1); }
.link:hover { color: var(--accent-2); }

.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 10px 28px -12px var(--accent-2); }
.btn--primary:hover { box-shadow: 0 12px 34px -8px var(--accent-2); filter: brightness(1.08); }
.btn--ghost { background: #ffffff12; }
.chip--new { background: var(--grad); color: #fff; }
.seg button[aria-pressed="true"] { background: var(--grad); color: #fff; }
.tiers button[aria-pressed="true"], .months button[aria-pressed="true"] { border-color: var(--accent-1); background: linear-gradient(135deg, #8B5CFF2e, #FF4DB81f); color: var(--text); }
.hero__dot[aria-current="true"] { background: var(--grad); }
.hero__art::after { background: linear-gradient(90deg, #180F38 0%, #180F38ee 30%, #180F3866 62%, transparent 100%), linear-gradient(0deg, #180F38cc 0%, transparent 45%); }
[dir="rtl"] .hero__art::after { background: linear-gradient(270deg, #180F38 0%, #180F38ee 30%, #180F3866 62%, transparent 100%), linear-gradient(0deg, #180F38cc 0%, transparent 45%); }
.card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-color: var(--line-soft); }
.card:hover, .card:focus-within { border-color: #8B5CFF88; box-shadow: 0 16px 40px -20px #8B5CFF; }
.card__add { background: #8B5CFF26; color: #CDB8FF; }
.card__add:hover { background: var(--grad); color: #fff; }
.toast { background: var(--grad); color: #fff; box-shadow: 0 12px 30px -10px var(--accent-2); }
.bar i, .track__line i { background: var(--grad); box-shadow: 0 0 14px #FF4DB888; }
.ch.is-done { border-color: #8B5CFF66; background: linear-gradient(135deg, #3A1F6E, var(--panel) 70%); }
.ch.is-done .ch__icon { background: var(--grad); color: #fff; }
.ch.is-done .ch__meta > span:first-child { color: #E9B8FF; }
.ch__icon { color: #CDB8FF; }
.node.is-got .node__dot { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 0 22px #FF4DB899; }
.node.is-got .node__card { border-color: #8B5CFF66; }
.node.is-got .node__icon { background: #8B5CFF2e; color: #E2D4FF; }
.node__tag { color: #E9B8FF; }
.ms-count b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.acct__av { background: var(--grad); color: #fff; }
.tag--on, .tag--paid { background: #8B5CFF2e; color: #D9C8FF; }
.cart__line { color: #E9B8FF; }
.cart__earn .link { color: #E9B8FF; }
.promo { background: linear-gradient(110deg, #3A1F8A 0%, #5B1F7A 50%, #1F3E7A 100%); }
.banner { background: linear-gradient(110deg, #3A1F8A, #24336F); border-color: #8B5CFF44; }
.sub, .gc, .ch, .shop__item, .prize, .order, .node__card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-color: var(--line-soft); }
.prize__icon { background: #8B5CFF26; color: #D9C8FF; }
.field input:focus, .field textarea:focus { border-color: var(--accent-1); }
.page-head h1 { background: linear-gradient(120deg, #fff 30%, #E4CCFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-head h2 { color: var(--text); }
.genres button:hover { border-color: var(--accent-1); }
.wallet { background: radial-gradient(100% 140% at 0% 0%, #4A2A1A 0%, var(--panel) 55%); }

/* =================== Reward packs v2: holographic foil =================== */
.pack {
  --w: 150px;
  position: relative; isolation: isolate; overflow: hidden;
  width: var(--w); aspect-ratio: 5 / 7; border-radius: calc(var(--w) * .1);
  font-size: calc(var(--w) / 12);
  display: block; animation: none;
  background:
    repeating-linear-gradient(135deg, #ffffff10 0 2px, transparent 2px 11px),
    radial-gradient(95% 60% at 50% 36%, color-mix(in srgb, var(--c) 70%, white) 0%, var(--c) 34%, color-mix(in srgb, var(--c) 38%, #0A0718) 100%);
  box-shadow: 0 26px 50px -20px color-mix(in srgb, var(--c) 85%, black), inset 0 0 0 1.5px #ffffff59, inset 0 -3.5em 4em -2.5em #000b;
}
.pack__foil { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 22%, #ffffff40 36%, #ff9df555 44%, #9df6ff55 52%, #fff7a855 58%, transparent 70%) 0 0 / 260% 100%;
  animation: holo 3.6s linear infinite; }
@keyframes holo { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.pack__edge { position: absolute; left: 0; right: 0; top: 0; height: 1.1em; z-index: 3;
  background: repeating-linear-gradient(90deg, #ffffff50 0 .22em, #00000038 .22em .44em); border-bottom: 1px solid #ffffff55; }
.pack__edge--b { top: auto; bottom: 0; border-bottom: 0; border-top: 1px solid #ffffff55; }
.pack__stars { position: absolute; top: 1.9em; left: 0; right: 0; text-align: center; color: #fff; font-size: .95em; letter-spacing: .25em; text-shadow: 0 0 .6em #fff, 0 .1em .3em #0006; }
.pack__gem { position: absolute; left: 50%; top: 40%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg); border-radius: 22%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff 0%, color-mix(in srgb, var(--c) 55%, white) 30%, var(--c) 70%);
  box-shadow: 0 0 2.2em color-mix(in srgb, var(--c) 85%, transparent), inset 0 0 0 .14em #ffffffaa, inset -.4em -.5em 1em #0004; }
.pack__gem img { width: 62%; transform: rotate(-45deg); filter: drop-shadow(0 .2em .4em #0005); }
.pack__name { position: absolute; left: 0; right: 0; bottom: 2.7em; text-align: center; padding: 0 .6em; color: #fff;
  font: 800 1.2em/1.1 var(--display); letter-spacing: -.01em; text-shadow: 0 .1em .5em #0009; }
[dir="rtl"] .pack__name { font-family: var(--font); font-weight: 700; }
.pack__brand { position: absolute; left: 0; right: 0; bottom: 1.6em; text-align: center; font: 600 .5em var(--display); letter-spacing: .35em; color: #ffffffb0; }
/* Rarity tiers */
.pack--t1 { box-shadow: 0 26px 50px -18px color-mix(in srgb, var(--c) 90%, black), 0 0 0 1px #ffffff22, inset 0 0 0 1.5px #ffffff70, inset 0 -3.5em 4em -2.5em #000b; }
.pack--t1 .pack__foil { animation-duration: 2.8s; }
.pack--t2 { box-shadow: 0 0 0 .14em #FFE29A, 0 0 2.4em -.2em #FFC043cc, 0 26px 60px -18px #8a5a00, inset 0 -3.5em 4em -2.5em #000b; animation: legend 2.4s ease-in-out infinite; }
.pack--t2::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 80% 30%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 70%, #fff 0 1px, transparent 2px), radial-gradient(circle at 25% 78%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 50% 12%, #fff 0 1px, transparent 2px), radial-gradient(circle at 88% 85%, #fff 0 1px, transparent 2px);
  animation: twinkle 1.8s ease-in-out infinite alternate; }
.pack--t2 .pack__foil { animation-duration: 2.2s; }
@keyframes legend { 50% { box-shadow: 0 0 0 .14em #FFF0C2, 0 0 3.4em .2em #FFC043ee, 0 26px 60px -18px #8a5a00, inset 0 -3.5em 4em -2.5em #000b; } }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
.pack--sm { --w: 112px; }
.pack--lg { --w: min(250px, 62vw); }
.pack-slot .pack { transition: transform .25s var(--ease); }
.pack-slot:hover .pack { transform: translateY(-6px) rotate(-1.5deg); }
.mini-pack { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 70%, white), var(--c) 45%, color-mix(in srgb, var(--c) 45%, #0A0718)); box-shadow: 0 6px 16px -6px var(--c), inset 0 0 0 1px #ffffff66; }
.shop__item { position: relative; overflow: hidden; }
.shop__item::before { content: ""; position: absolute; inset: auto -20% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(color-mix(in srgb, var(--c) 35%, transparent), transparent 70%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pack, .pack__foil, .pack--t2::after { animation: none !important; } }

/* =================== Round 3: store/rewards tabs, consoles, classics, trophy challenges =================== */
.price, .hero__price, .sub__price, .gm__price, .ci__price, .cart__total b, .wallet__num, .months button span { font-variant-numeric: tabular-nums; }
summary, label, select { cursor: pointer; }

/* Section tabs (Store: Subscriptions | Gift cards, Rewards: Challenges | Milestones | Packs) */
.subtabs { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-soft); align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.subtabs a { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s, background .2s; }
.subtabs a:hover { color: var(--text); background: #ffffff0d; }
.subtabs a[aria-current="page"] { background: var(--grad); color: #fff; box-shadow: 0 8px 22px -10px var(--accent-2); }
main > .subtabs + .page-head { padding-top: 0; }

/* Shop by console */
.consoles { display: flex; flex-direction: column; gap: 10px; }
.consoles .sec-head { margin-bottom: 4px; }
.console { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 20px; border: 1px solid var(--line-soft); background: #ffffff08; color: var(--text); text-align: start; transition: border-color .2s, background .2s, transform .15s var(--ease); }
.console:hover { border-color: var(--accent-1); background: #ffffff10; }
.console:active { transform: scale(.98); }
.console > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.console b { font-weight: 600; font-size: 15px; }
.console small { color: var(--muted); font-size: 12.5px; }
.console__logo { width: 54px; height: 54px; flex: none; border-radius: 16px; display: grid; place-items: center; text-align: center; font: 800 12px/1.1 var(--display); color: #fff; }
.console--ps .console__logo { background: linear-gradient(135deg, #0B3FD1, #3D7BFF); }
.console--xb .console__logo { background: linear-gradient(135deg, #0A5C1F, #3FD07A); color: #04210F; }
.console--old .console__logo { background: linear-gradient(135deg, #5B3A12, #FFC043); color: #2B1700; font-size: 10.5px; }
.console .up__chev { color: var(--dim); }
[dir="rtl"] .console .up__chev { transform: scaleX(-1); }

/* Placeholder cover for games without art */
.noart { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; text-align: center; overflow: hidden; }
.noart span { position: relative; font: 800 15px/1.15 var(--display); color: #fff; text-shadow: 0 2px 10px #0008; direction: ltr; }
.noart::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #ffffff0c 0 2px, transparent 2px 12px); }
.noart--ps { background: radial-gradient(120% 90% at 20% 10%, #3D7BFF, #10236B 70%); }
.noart--xb { background: radial-gradient(120% 90% at 20% 10%, #2FA85E, #0B3A1E 70%); }
.noart--px { background: radial-gradient(120% 90% at 20% 10%, #8B5CFF, #3A1460 70%); }
.up .noart, .tl .noart { position: relative; width: 64px; height: 64px; border-radius: 16px; flex: none; padding: 4px; }
.up .noart span { font-size: 8px; }
.tl .noart { width: 200px; height: auto; aspect-ratio: 16 / 9; }
.tl .noart span { font-size: 13px; }

/* Challenges v2 */
.ch { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.ch__row { display: flex; gap: 16px; align-items: flex-start; padding: 18px; }
.ch__art { position: relative; height: 110px; overflow: hidden; }
.ch__art img { width: 100%; height: 100%; object-fit: cover; }
.ch__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--panel-2) 0%, transparent 80%); }
.ch--art .ch__row { margin-top: -34px; position: relative; }
.ch--art .ch__icon { box-shadow: 0 0 0 4px var(--panel-2); }
.ch__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ch__tags:empty { display: none; }
.ch__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.ch__tag--time { background: #FF4DB826; color: #FFB3E2; }
.ch__tag--trophy { background: #FFC04326; color: var(--gold); }
.ch__cta { align-self: flex-start; height: 40px; padding: 0 18px; }
.ch__ok { color: #E9B8FF; font-weight: 600; }
.ch__wait { color: var(--gold); font-weight: 500; }
.ch__no { color: #FF9AA8; }
.ch.is-later { opacity: .7; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: step; font-size: 13.5px; color: var(--text-2); }
.steps li { counter-increment: step; display: flex; gap: 10px; align-items: flex-start; }
.steps li > span { flex: 1; min-width: 0; padding-top: 2px; }
.steps li::before { content: counter(step); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font); background: var(--raised); color: var(--muted); }
.steps li.is-ok::before { content: "✓"; background: var(--grad); color: #fff; }
.steps li.is-wait::before { background: #FFC04333; color: var(--gold); }
.steps .link { font-size: 13px; color: #E9B8FF; padding: 0; text-decoration: underline; }
.choice { border: 0; margin: 0; padding: 0; gap: 8px; }
.choice label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-soft); font-size: 14px; }
.choice label:has(input:checked) { border-color: var(--accent-1); background: #8B5CFF1f; }
.choice input { accent-color: var(--accent-1); width: 18px; height: 18px; }
.reveal__icon--sm { width: 64px; height: 64px; border-radius: 20px; }
.reveal__icon--sm svg { width: 30px; height: 30px; }

/* Gift card region code (replaces flag emoji) */
.gc__region { display: flex; align-items: center; gap: 8px; }
.gc__region b { font: 700 11px var(--display); padding: 3px 7px; border-radius: 6px; background: #ffffff2e; letter-spacing: .04em; }

/* Bigger hit area for carousel dots */
.hero__dot { position: relative; height: 24px; background: none !important; display: grid; place-items: center; }
.hero__dot::after { content: ""; width: 100%; height: 5px; border-radius: 4px; background: #ffffff40; transition: background .3s; }
.hero__dot[aria-current="true"]::after { background: var(--grad); }

@media (max-width: 760px) {
  /* Bottom nav: 5 items with labels */
  .rail { height: 70px; padding: 0 6px; overflow: visible; }
  .rail__links { min-width: 0; width: 100%; justify-content: space-around; gap: 0; }
  .rail__btn { width: auto; flex: 1; height: 58px; display: flex; flex-direction: column; justify-content: center; gap: 3px; border-radius: 14px; }
  .rail__btn svg { width: 22px; height: 22px; }
  .rail__btn span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; font-size: 10.5px; font-weight: 500; line-height: 1; }
  .rail__btn[aria-current="page"]::before { display: none; }
  .rail__dot { top: 6px; inset-inline-end: calc(50% - 18px); }
  .shell { padding-bottom: 104px; }
  .subtabs { align-self: stretch; }
  .subtabs a { flex: 1; justify-content: center; padding: 0 12px; }
  .ch__row { padding: 16px; gap: 12px; }
  .ch__icon { width: 46px; height: 46px; border-radius: 15px; }
  .tl .noart { display: none; }
}
@media (max-width: 760px) {
  /* backdrop-filter on the frame would trap the fixed bottom nav inside it */
  .shell { backdrop-filter: none; background: transparent; box-shadow: none; }
}
@media (max-width: 760px) { .rail__btn.rail__wa { display: none; } }

/* =================== Points on prices + redeem pop-up =================== */
.pts { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: #8B5CFF29; color: #D9C8FF; font: 600 11px/1 var(--font); white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: middle; margin-inline-start: 6px; }
.pricebox { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.pricebox .pts { margin: 0; }
.hero__price { display: inline-flex; align-items: center; }
.hero__price .pts { height: 24px; font-size: 12px; }
.sub__price, .gm__price { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sub__price .pts, .gm__price .pts { margin: 0; height: 24px; font-size: 12px; }
.ci__price .pts { margin-inline-start: 4px; height: 18px; font-size: 10.5px; }
.wallet .btn { margin-inline-start: auto; }
.wallet .btn svg { fill: currentColor; stroke: none; }
.menu button svg { fill: none; }

.rdm { padding: 30px 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.rdm__kicker { color: var(--muted); font-size: 13px; text-align: center; }
.rdm__pts { display: flex; align-items: baseline; justify-content: center; gap: 8px; color: var(--muted); }
.rdm__pts span { font: 800 44px/1 var(--display); background: linear-gradient(120deg, #FFE29A, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.rdm > .auth__muted { text-align: center; margin: 0 auto 6px; }
.rdm__msg { padding: 10px 14px; border-radius: 14px; background: linear-gradient(120deg, #8B5CFF2e, #FF4DB824); color: var(--text); font-size: 13.5px; text-align: center; }
.rdm__msg code { font: 600 12px ui-monospace, Menlo, monospace; background: #ffffff1a; padding: 2px 6px; border-radius: 6px; }
.rdm__msg .link { color: #FFB3E2; text-decoration: underline; font-size: 13.5px; }
.rdm__h { font: 700 14px var(--display); margin: 10px 0 0; color: var(--text-2); }
[dir="rtl"] .rdm__h { font-family: var(--font); }
.rds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rd { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line-soft); }
.rd.is-locked { opacity: .6; }
.rd__art { width: 48px; flex: none; display: grid; place-items: center; }
.pack--xs { --w: 44px; }
.pack--xs .pack__name, .pack--xs .pack__brand, .pack--xs .pack__stars { display: none; }
.rd__art--coupon { height: 48px; border-radius: 14px; background: linear-gradient(135deg, #5B3A12, var(--gold)); color: #2B1700; position: relative; }
.rd__art--coupon svg { width: 18px; height: 18px; position: absolute; top: 5px; opacity: .55; }
.rd__art--coupon b { font: 800 14px var(--display); margin-top: 12px; }
.rd__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rd__txt b { font-weight: 600; font-size: 14px; }
.rd__cost { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rd__cost svg { width: 13px; height: 13px; fill: var(--gold); stroke: none; }
.rd .btn { height: 40px; padding: 0 16px; font-size: 13px; }
@media (max-width: 760px) {
  .rd { flex-wrap: wrap; }
  .rd .btn { width: 100%; }
  .card__foot { align-items: flex-end; }
}
#redeemModal { width: min(540px, calc(100vw - 32px)); }

/* Account type chooser (game window) */
.accts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.acct-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #ffffff08; color: var(--text); text-align: start; transition: border-color .2s, background .2s; }
.acct-opt:hover { border-color: var(--accent-1); }
.acct-opt[aria-checked="true"] { border-color: var(--accent-1); background: linear-gradient(135deg, #8B5CFF33, #FF4DB81f); box-shadow: 0 0 0 1px var(--accent-1) inset; }
.acct-opt__name { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.acct-opt[aria-checked="true"] .acct-opt__name { color: var(--text); }
.acct-opt__price { font-weight: 700; color: var(--gold); font-size: 15px; font-variant-numeric: tabular-nums; }
.acct-opt .pts { margin: 0; height: 18px; font-size: 10.5px; }
.acct-desc { margin-top: 10px; font-size: 13px; color: var(--text-2); padding: 10px 12px; border-radius: 12px; background: #ffffff0a; border-inline-start: 3px solid var(--accent-1); }
.hero__price small { font-size: 13px; font-weight: 400; color: var(--muted); }
@media (max-width: 760px) { .accts { grid-template-columns: 1fr; } .acct-opt { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Hero: size the frame to the tallest slide instead of a fixed height, so nothing is clipped */
.hero { display: grid; min-height: 340px; }
.hero__slide { position: relative; inset: auto; grid-area: 1 / 1; }
.hero__body { justify-content: center; padding: 34px 32px 30px; }
.hero__buy { row-gap: 10px; }
@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero__slide { min-height: 420px; }
  .hero__body { justify-content: flex-end; padding: 56px 20px 22px; }
}
/* 4 PlayStation account types fit on one row */
.accts { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

/* Netlify's "Powered by Netlify" badge covers the mobile menu */
#nl-badge-frame { display: none !important; }

/* InstaPay box in the cart */
.pay { border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 14px; padding: 12px; display: grid; gap: 8px; background: rgba(255,255,255,.03); }
.pay__head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pay__logo { font: 700 11px/1 "Unbounded", sans-serif; letter-spacing: .02em; color: #fff; padding: 6px 8px; border-radius: 8px; background: linear-gradient(135deg, #5B2D90, #8B3FD9); }
.pay__row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pay__k { color: var(--muted); min-width: 64px; }
.pay__row b { flex: 1; overflow-wrap: anywhere; }
.pay__copy { font: 600 12px/1 inherit; color: var(--cyan); background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.pay__steps { margin: 0; padding-inline-start: 18px; font-size: 12.5px; color: var(--muted); display: grid; gap: 2px; }
.pay__later { margin: 0; font-size: 12.5px; color: var(--dim); }

/* Spending milestones: monthly cap note + rewards terms */
.ms-status__txt .ms-cap { font-size: 12.5px; color: var(--dim); }
.node__dot { font-size: 12px; }
.terms { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: rgba(255,255,255,.02); }
.terms summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.terms ul { margin: 10px 0 2px; padding-inline-start: 18px; display: grid; gap: 6px; color: var(--muted); font-size: 13.5px; }

/* Launch pop-up + home strip */
.spot { width: min(960px, calc(100vw - 24px)); padding: 28px; position: relative; }
.spot__head { display: grid; gap: 6px; margin-bottom: 18px; padding-inline-end: 44px; }
.spot__kicker { font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--amber, #FFC043); }
.spot__title { font: 800 clamp(22px, 4vw, 32px)/1.1 var(--display); margin: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spot__head p { margin: 0; color: var(--muted); font-size: 14px; }
.spot__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.spot__card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--raised, #1a1440); display: flex; flex-direction: column; transition: transform .2s var(--ease), border-color .2s; }
.spot__card:hover { transform: translateY(-3px); border-color: var(--accent-1, #8B5CFF); }
.spot__art { position: relative; aspect-ratio: 16 / 10; background: var(--void, #0A0718); }
.spot__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot__badge { position: absolute; top: 10px; inset-inline-start: 10px; font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 999px; background: #0A0718cc; color: var(--cyan); backdrop-filter: blur(6px); }
.spot__badge.is-pre { color: var(--amber, #FFC043); }
.spot__body { padding: 14px; display: grid; gap: 10px; flex: 1; align-content: space-between; }
.spot__name { font: 700 15px/1.25 var(--display); margin: 0; text-align: start; }
.spot__price { font-weight: 700; color: var(--gold, #FFC043); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.spot__price small { color: var(--muted); font-weight: 500; }
@media (max-width: 720px) {
  .spot { padding: 20px 16px; }
  .spot__grid { grid-template-columns: 1fr; gap: 10px; }
  .spot__card { flex-direction: row; }
  .spot__art { width: 38%; aspect-ratio: auto; min-height: 120px; flex: none; }
  .spot__body { padding: 12px; }
}
.spot-strip { width: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 16px; border-radius: 14px; border: 1px solid #FFC04355; background: linear-gradient(90deg, #FFC04322, #FF4DB822, #8B5CFF22); color: var(--text); cursor: pointer; text-align: start; font: inherit; }
.spot-strip:hover { border-color: #FFC043aa; }
.spot-strip__k { font: 700 12px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--amber, #FFC043); }
.spot-strip__t { flex: 1; font-weight: 600; font-size: 14px; min-width: 0; }
.spot-strip__go { font-size: 13px; font-weight: 700; color: var(--cyan); }

/* =================== Mobile pass (phones are the main audience) =================== */
.topbar__brand { display: none; }
.spot__when { display: none; }
.gm__btnprice { display: none; }
@media (max-width: 760px) { .gm__btnprice { display: inline; } }
@media (max-width: 760px) {
  /* Header: logo + actions on one row, full-width search below */
  .topbar { gap: 10px; }
  .greet { display: none; }
  .topbar__brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font: 800 17px/1 var(--display); color: var(--text); text-decoration: none; }
  .topbar__brand img { width: 32px; height: 32px; border-radius: 9px; }
  .topbar__actions { gap: 8px; }
  .icon-btn { width: 42px; height: 42px; }
  .acct { height: 42px; }
  .search { height: 44px; }
  /* 16px stops iOS from zooming into fields */
  .search input, .field input, .field textarea, .field select, .select select { font-size: 16px; }

  main { gap: 22px; }
  .page-head h1 { font-size: 30px; }
  .page-head p { font-size: 14px; }

  /* Launch strip: one tidy line */
  .spot-strip { flex-wrap: nowrap; padding: 12px 14px; margin-bottom: 0; }
  .spot-strip__t { display: none; }
  .spot-strip__k { flex: 1; }

  /* Hero: shorter, less text */
  .hero__slide { min-height: 360px; }
  .hero__body { padding: 48px 18px 18px; gap: 10px; }
  .hero__title { font-size: 30px; }
  .hero__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; }
  .hero__tags .chip:not(.chip--pre):not(.chip--new) { display: none; }
  .hero__price { font-size: 20px; }

  /* Game cards: one-line price, no points tag (it's shown in the game window) */
  .grid { gap: 10px; }
  .card { border-radius: 18px; }
  .card__flags { top: 8px; inset-inline-start: 8px; gap: 4px; }
  .card__flags .plat { height: 20px; padding: 0 6px; font-size: 10px; }
  .card .pricebox .pts { display: none; }
  .card .price { font-size: 14px; white-space: nowrap; }
  .card .price small { font-size: 11px; }
  .card__add { width: 36px; height: 36px; }
  .rowscroll { grid-auto-columns: 62%; }

  /* Bottom nav: slimmer, clears the iPhone home bar */
  .rail { height: 62px; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; right: 8px; }
  .rail__btn { height: 52px; gap: 2px; }
  .rail__btn svg { width: 21px; height: 21px; }
  .shell { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Windows open as bottom sheets */
  dialog.modal { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92dvh; border-radius: 24px 24px 0 0; border-bottom: 0; }
  dialog.modal[open] { animation: sheet .3s var(--ease); }

  /* Game window */
  .gm__art { aspect-ratio: 16 / 8; }
  .gm__body { padding: 18px 18px 0; gap: 14px; }
  .gm__title { font-size: 22px; }
  .facts { font-size: 13px; }
  .accts { grid-template-columns: 1fr; gap: 8px; }
  .acct-opt { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; min-height: 52px; }
  .acct-opt__name { font-size: 14px; flex: 1; }
  .acct-opt__price { font-size: 16px; }
  .acct-opt .pts { order: 3; }
  .acct-desc { font-size: 12.5px; margin-top: 8px; }
  .gm__price { display: none; }
  .gm__actions { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 4px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--shell) 22%); }
  .gm__actions .btn { height: 50px; justify-content: center; }
  .gm__actions .btn--ghost { font-size: 0; width: 50px; padding: 0; gap: 0; }
  .gm__actions .btn--ghost svg { width: 22px; height: 22px; }
  .gm__actions .btn--wa:only-child { font-size: 15px; width: auto; grid-column: 1 / -1; }

  /* Cart: full-height sheet that scrolls as one page, checkout button always reachable */
  .cart { top: auto; bottom: 0; inset-inline-end: 0; width: 100%; max-height: 92dvh; height: 92dvh; border-radius: 24px 24px 0 0; overflow: auto; transform: translateY(100%); }
  [dir="rtl"] .cart { transform: translateY(100%); }
  .cart__head { position: sticky; top: 0; z-index: 2; background: var(--shell); padding: 16px 18px 10px; }
  .cart__body { flex: none; overflow: visible; padding: 4px 18px; }
  .cart__foot { padding: 14px 18px 0; gap: 10px; }
  .cart__foot #checkout { position: sticky; bottom: 0; z-index: 2; height: 52px; margin: 0 -18px; width: calc(100% + 36px); border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
  .cart__note { padding-bottom: 14px; }
  .field textarea { min-height: 44px; }
  .pay { padding: 10px 12px; }
  .pay__steps { font-size: 12px; }
}
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } }

/* Launch pop-up on phones: compact rows in a bottom sheet */
@media (max-width: 760px) {
  dialog.spot { padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); }
  .spot__head { gap: 4px; margin-bottom: 14px; }
  .spot__title { font-size: 23px; }
  .spot__head p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .spot__grid { gap: 10px; }
  .spot__card { flex-direction: row; align-items: center; border-radius: 16px; padding: 8px; gap: 12px; }
  .spot__card:hover { transform: none; }
  .spot__art { width: 76px; height: 76px; min-height: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; flex: none; }
  .spot__badge { display: none; }
  .spot__body { padding: 0; gap: 3px; grid-template-columns: 1fr auto; grid-template-areas: "name btn" "when btn" "price btn"; align-items: center; }
  .spot__name { grid-area: name; font-size: 14px; }
  .spot__when { display: block; grid-area: when; font-size: 11.5px; font-weight: 600; color: var(--cyan); }
  .spot__when.is-pre { color: var(--amber, #FFC043); }
  .spot__price { grid-area: price; font-size: 14px; }
  .spot__price .pts { display: none; }
  .spot__body .btn { grid-area: btn; width: auto; height: 40px; padding: 0 14px; font-size: 13px; }
}
@media (max-width: 760px) {
  /* Filters: console switch on top, genre + era side by side, sort below */
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters .seg { grid-column: 1 / -1; }
  .filters .select:last-child { grid-column: 1 / -1; }
  .filters .select select { height: 44px; }
}
@media (max-width: 760px) {
  .seg button[data-subacct] { font-size: 12.5px; white-space: nowrap; padding: 0 6px; }
  .ms-count { white-space: nowrap; flex: none; }
  .ms-status { gap: 14px; align-items: flex-start; }
}