/* Zodita — top PC games, on mobile. One stylesheet, no framework.
   1 tokens · 2 base · 3 primitives (buttons, inputs, badges, cards) · 4 chrome (nav, footer) · 5 pages · 6 motion/responsive/print */

/* Latin subset of Inter (tools: pyftsubset); the other scripts are split into latinext/greek/cyrillic subsets so a single Cyrillic label (language switcher) loads ~50 KB instead of the full 340 KB */
@font-face { font-family: 'Inter'; src: url('/css/InterVariable-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2713, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url('/css/InterVariable-latinext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF; }
@font-face { font-family: 'Inter'; src: url('/css/InterVariable-greek.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0370-03FF; }
@font-face { font-family: 'Inter'; src: url('/css/InterVariable-cyrillic.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0400-04FF, U+0301, U+2116; }
/* metric-matched fallback so the swap to Inter does not shift the layout */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

/* ---------- 1 tokens ---------- */
:root {
  /* brand palette (unchanged core) */
  --bg: #05060a;
  --bg-2: #0a0c13;
  --bg-3: #10131d;
  --c1: #5ee7ff;
  --c2: #8b5cf6;
  --c2-text: #a78bfa;
  --c3: #ffb35c;
  --pink: #f472b6;
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #f87171;
  --grad: linear-gradient(100deg, var(--c1) 0%, #7c8cff 40%, var(--c2) 70%, var(--pink) 100%);
  --grad-warm: linear-gradient(100deg, #ffd27a, var(--c3) 45%, #ff6a5c);
  --grad-ring: conic-gradient(from 210deg, var(--c3), var(--pink), var(--c2), #3b82f6, var(--c1), var(--c3));

  /* surfaces & lines */
  --panel: rgba(255, 255, 255, .035);
  --panel-2: rgba(255, 255, 255, .06);
  --panel-3: rgba(255, 255, 255, .09);
  --glass: rgba(10, 12, 19, .72);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --line-3: rgba(255, 255, 255, .22);

  /* text (all AA on --bg: text 17:1, soft 11:1, muted 8:1, dim 6:1) */
  --text: #eef1f8;
  --soft: #c9cfdc;
  --muted: #9ba3b6;
  --dim: #848ca0;

  /* spacing scale (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px; --s11: 96px;
  /* radius */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;
  --radius: var(--r-lg); --radius-sm: var(--r-sm);
  /* elevation */
  --e1: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.6);
  --e2: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -24px rgba(0,0,0,.8);
  --e3: 0 1px 0 rgba(255,255,255,.08) inset, 0 50px 120px -40px rgba(0,0,0,.95);
  --glow: 0 18px 50px -14px rgba(124, 140, 255, .55);
  /* type scale */
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 22px;
  --fs-2xl: clamp(24px, 2.4vw, 30px); --fs-3xl: clamp(30px, 4vw, 48px); --fs-4xl: clamp(38px, 5.6vw, 72px); --fs-5xl: clamp(46px, 8vw, 108px);
  /* layout & motion */
  --wrap: 1280px;
  --gutter: 24px;
  --nav-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s; --t: .3s; --t-slow: .6s;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--c1);
  color-scheme: dark;
}

/* ---------- 2 base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 16px/1.6 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; }
::selection { background: rgba(139, 92, 246, .45); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; inset-inline-start: 16px; top: -60px; z-index: 200; padding: 12px 18px; border-radius: var(--r-sm); background: var(--text); color: var(--bg); font-weight: 700; transition: top var(--t) var(--ease); }
.skip:focus { top: 16px; }

/* ambient light: two faint glows behind the page (the SYC mark stays small, in the footer) */
body { background: radial-gradient(1100px 700px at 85% -10%, rgba(139,92,246,.10), transparent 70%), radial-gradient(900px 600px at -10% 40%, rgba(94,231,255,.05), transparent 70%), var(--bg); background-attachment: fixed; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 860px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-warm { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.eyebrow svg { width: 15px; height: 15px; color: var(--c3); }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--soft); max-width: 640px; }
.center .lead { margin-inline-start: auto; margin-inline-end: auto; }

/* ---------- 3 primitives ---------- */
/* buttons: .btn (primary, light), .ghost (glass), .ok (owned), sizes .sm/.lg, .block */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 22px;
  border-radius: var(--r-pill); border: 1px solid transparent; background: var(--text); color: #070810; font-weight: 650; font-size: var(--fs-md); letter-spacing: -.01em;
  cursor: pointer; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast); white-space: nowrap; text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--glow); background: #fff; }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--t) var(--ease); }
.btn:hover svg:last-child:not(:first-child) { transform: translateX(3px); }
.btn.ghost { background: rgba(255,255,255,.05); color: var(--text); border-color: var(--line-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn.ghost:hover { background: rgba(255,255,255,.1); border-color: var(--line-3); box-shadow: none; }
.btn.lg { height: 54px; padding: 0 28px; font-size: var(--fs-base); }
.btn.sm { height: 36px; padding: 0 16px; font-size: 14px; gap: 8px; }
.btn.sm svg { width: 16px; height: 16px; }
.btn.block { width: 100%; padding-top: 0; } /* .block is also the section spacing class */
.btn.ok { background: rgba(74, 222, 128, .12); color: #bbf7d0; border-color: rgba(74, 222, 128, .35); }
.btn.ok:hover { background: rgba(74, 222, 128, .18); box-shadow: 0 18px 50px -18px rgba(74,222,128,.5); }
.btn.danger, .link.danger { color: #fca5a5; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--c1); font-weight: 550; font-size: 14px; text-underline-offset: 3px; }
.link:hover { text-decoration: underline; }
.link-arrow { display: inline-flex; gap: 8px; align-items: center; color: var(--text); font-weight: 650; font-size: var(--fs-md); white-space: nowrap; }
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.cta-row.center { justify-content: center; }
.cta-row form, .cta-col form { margin: 0; }
.hint { font-size: var(--fs-sm); color: var(--dim); margin: 12px 0 0; line-height: 1.5; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(255,255,255,.04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: var(--fs-sm); color: #cfd5e3; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(74,222,128,.15); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: var(--muted); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.icon-btn:hover { background: rgba(255,255,255,.07); color: var(--text); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 21px; height: 21px; }

/* price tags (text) and badges (on covers) */
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 650; background: rgba(255,255,255,.08); color: var(--text); border: 1px solid var(--line); letter-spacing: 0; white-space: nowrap; }
.tag.free { background: rgba(74,222,128,.12); color: #bbf7d0; border-color: rgba(74,222,128,.3); }
.tag.promo, .tag.offer { background: rgba(255,179,92,.14); color: #ffd8a8; border-color: rgba(255,179,92,.38); }
.was { position: relative; color: var(--dim); font-size: var(--fs-sm); }
.badge { position: absolute; inset-inline-start: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-xs); font-size: 11.5px; font-weight: 750; letter-spacing: .02em; color: #05060a; background: var(--text); box-shadow: 0 8px 20px -8px rgba(0,0,0,.7); }
.badge svg { width: 14px; height: 14px; }
.badge.promo { background: var(--grad-warm); }
.badge.free { background: #86efac; }
.badge.demo { background: var(--c1); }

/* chips */
.chips { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li, .chips span { padding: 6px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: #cfd5e3; background: rgba(255,255,255,.05); border: 1px solid var(--line); }

/* forms */
.form { display: grid; gap: 18px; margin-top: 24px; }
.form.grid2 { grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 0; }
.span2 { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; }
.field > span { font-size: var(--fs-sm); font-weight: 600; color: #cfd5e3; }
.field small { font-size: 12.5px; color: var(--dim); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
  width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  color: var(--text); font-size: 16px; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
input::placeholder { color: #6f778b; }
input:hover:not(:disabled) { border-color: var(--line-3); }
input:focus, input:focus-visible { outline: none; border-color: rgba(94,231,255,.7); background: rgba(255,255,255,.06); box-shadow: 0 0 0 4px rgba(94,231,255,.14); }
input:user-invalid { border-color: rgba(248,113,113,.6); }
input:disabled { color: var(--dim); background: rgba(255,255,255,.02); cursor: not-allowed; }
input.code { letter-spacing: .4em; font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: center; height: 60px; }
input.code::placeholder { letter-spacing: .3em; color: #4b5263; }
.pw { position: relative; }
.pw input { padding-inline-end: 76px; }
.pw-toggle { position: absolute; inset-inline-end: 8px; top: 8px; height: 34px; min-width: 58px; padding: 0 12px; border-radius: 10px; border: 0; background: rgba(255,255,255,.07); color: var(--soft); font-size: 13px; font-weight: 600; cursor: pointer; }
.pw-toggle:hover { background: rgba(255,255,255,.12); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--soft); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--c2); flex: none; }
.check a { color: var(--c1); text-decoration: underline; text-underline-offset: 3px; }
.flash { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; font-size: 14.5px; margin: 18px 0; border: 1px solid; animation: rise .4s var(--ease-out); }
.flash svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.flash.ok { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.3); color: #bbf7d0; }
.flash.err { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.38); color: #fecaca; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 4 chrome ---------- */
.nav { position: sticky; top: 0; z-index: 50; -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); background: rgba(5, 6, 10, .62); border-bottom: 1px solid var(--line); }
.nav-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); height: var(--nav-h); display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .22em; font-size: 15px; flex: none; }
.brand svg { width: 28px; height: 28px; transition: transform var(--t-slow) var(--ease-out); }
.brand:hover svg { transform: rotate(-20deg) scale(1.06); }
.links { display: flex; gap: 2px; margin-inline-end: auto; }
.links a { position: relative; padding: 8px 12px; border-radius: var(--r-pill); font-size: 14px; color: var(--muted); font-weight: 550; transition: color var(--t-fast), background var(--t-fast); }
.links a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.links a[aria-current] { color: var(--text); }
.links a[aria-current]::after { content: ''; position: absolute; inset-inline-start: 12px; inset-inline-end: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--grad); }
.nav-right { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.dot { position: absolute; top: 3px; inset-inline-end: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--c2); color: #fff; font-size: 11px; line-height: 18px; font-weight: 700; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.burger { display: none; }
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #05060a; font-weight: 800; font-size: 15px; cursor: pointer; list-style: none; flex: none; transition: box-shadow var(--t-fast); }
.avatar::-webkit-details-marker { display: none; }
summary.avatar:hover { box-shadow: 0 0 0 3px rgba(139,92,246,.35); }
summary.avatar:focus-visible { outline: none; box-shadow: var(--focus); }
.avatar.lg { width: 48px; height: 48px; font-size: 19px; }
.menu { position: relative; margin-inline-start: 6px; }
.menu-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 12px); width: 250px; padding: 8px; border-radius: var(--r-md); background: rgba(14, 16, 24, .97); border: 1px solid var(--line-2); box-shadow: var(--e3); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: menu-in .2s var(--ease-out); transform-origin: top right; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu-pop a, .menu-pop button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: #cfd5e3; background: none; border: 0; cursor: pointer; }
.menu-pop svg { width: 18px; height: 18px; color: var(--muted); }
.menu-pop a:hover, .menu-pop button:hover { background: rgba(255,255,255,.06); color: var(--text); }
.menu-pop form { margin: 4px 0 0; border-top: 1px solid var(--line); padding-top: 4px; }
.menu-head { display: flex; gap: 12px; align-items: center; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-head .avatar { cursor: default; }
.menu-head strong { display: block; font-size: 15px; }
.menu-head span { font-size: 13px; color: var(--dim); }
.mobile-nav { display: grid; gap: 2px; padding: 8px var(--gutter) 20px; border-top: 1px solid var(--line); max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; animation: rise .25s var(--ease-out); }
.mobile-nav[hidden] { display: none; }
.mobile-nav > a { display: flex; align-items: center; justify-content: space-between; padding: 14px 6px; font-size: 18px; font-weight: 650; letter-spacing: -.01em; border-bottom: 1px solid var(--line); }
.mobile-nav > a svg { width: 18px; height: 18px; color: var(--dim); }
.mobile-nav > a[aria-current] { color: var(--c1); }
.mobile-nav-foot { display: grid; gap: 10px; padding-top: 18px; }
body.nav-open { overflow: hidden; }

/* footer */
.foot { margin-top: clamp(80px, 10vw, 140px); border-top: 1px solid var(--line); background: rgba(5,6,10,.78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.foot-in { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; padding-top: 56px; padding-bottom: 40px; }
.foot-brand p { color: var(--muted); font-size: 14.5px; margin: 16px 0 20px; }
.foot-app { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: rgba(255,255,255,.04); transition: border-color var(--t-fast), background var(--t-fast); }
.foot-app:hover { border-color: var(--line-3); background: rgba(255,255,255,.08); }
.foot-app svg { width: 24px; height: 24px; color: var(--c1); }
.foot-app small { display: block; font-size: 11px; color: var(--dim); line-height: 1.2; }
.foot-app b { display: block; font-size: 15px; line-height: 1.2; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.foot-cols h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); margin-bottom: 14px; font-weight: 650; }
.foot-cols a { display: block; color: var(--soft); font-size: 14.5px; padding: 6px 0; transition: color var(--t-fast); }
.foot-cols a:hover { color: var(--text); }
.foot-base { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 20px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.to-top { color: var(--muted); }
.to-top:hover { color: var(--text); }

/* breadcrumb */
.crumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.crumbs li + li::before { content: '/'; color: var(--dim); opacity: .7; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }

/* ---------- 5 pages ---------- */
.section { padding: clamp(64px, 8vw, 112px) 0 0; }
.section.wrap { padding-inline: var(--gutter); }
.block { padding-top: clamp(48px, 6vw, 80px); }
.sec-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.sec-head h2 { font-size: var(--fs-3xl); }
.sec-head p { color: var(--muted); font-size: 17px; margin: 14px 0 0; }
.sec-head.left { text-align: start; margin-inline-start: 0; }
.sec-head.row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; text-align: start; }
.sec-head.row p { max-width: 560px; }
.page-head { padding: clamp(56px, 8vw, 104px) var(--gutter) 44px; }
.page-head h1 { font-size: var(--fs-4xl); margin-bottom: 22px; letter-spacing: -.04em; }

/* --- rails (horizontal scroll-snap lists) --- */
.rail-wrap { position: relative; }
.rail-ctl { display: none; position: absolute; inset-inline-end: 0; top: -82px; gap: 8px; }
.js .sec-head.row:has(+ .rail-wrap) { padding-inline-end: 112px; }
.js .rail-ctl { display: flex; }
.rail-btn { border: 1px solid var(--line-2); color: var(--text); background: rgba(255,255,255,.03); }
.rail-btn:disabled { opacity: .3; cursor: default; background: transparent; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 20px) / 5); gap: 20px; margin: 0; padding: 6px 2px 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail > li { position: relative; scroll-snap-align: start; min-width: 0; }
.rail.wide { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
.rail .acard { height: 100%; }

/* --- game cards: portrait posters, title and price over a shade --- */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 20px; }
.game-grid.four { grid-template-columns: repeat(4, 1fr); }
.gcard { position: relative; display: block; border-radius: var(--r-lg); outline-offset: 5px; }
.gcard[hidden] { display: none; }
.gcard-media { position: relative; aspect-ratio: 3/4; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-3); box-shadow: 0 0 0 1px var(--line), var(--e2); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); isolation: isolate; }
.gcard-media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,6,10,0) 38%, rgba(5,6,10,.6) 62%, rgba(5,6,10,.96) 100%); }
.gcard-media::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 46%, transparent 62%); transform: translateX(-130%); transition: transform 1.1s var(--ease-out); }
.gcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.gcard-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; display: grid; gap: 3px; padding: 16px; }
.gcard-genre { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 65%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard h3 { font-size: 18px; line-height: 1.15; font-weight: 750; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0,0,0,.7); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gcard-price { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 8px; }
.gcard-price .tag { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gcard:hover .gcard-media, .gcard:focus-visible .gcard-media { transform: translateY(-8px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent), 0 34px 70px -22px color-mix(in srgb, var(--accent) 60%, transparent); }
.gcard:hover .gcard-media::before, .gcard:focus-visible .gcard-media::before { transform: translateX(130%); }
.gcard:hover .gcard-img, .gcard:focus-visible .gcard-img { transform: scale(1.1) translateY(-2%); }

/* --- promo countdown --- */
.countdown { display: flex; gap: 10px; margin: 26px 0 28px; }
.center .countdown { justify-content: center; }
.countdown div { min-width: 76px; padding: 12px 8px 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); text-align: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.countdown b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.countdown span { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); }

/* --- about / pillars --- */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pillars.wide { grid-template-columns: repeat(4, 1fr); }
.pillar { padding: 26px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: border-color var(--t), background var(--t), transform var(--t) var(--ease); }
.pillar:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateY(-2px); }
.pillar > svg, .pillar-ic svg { width: 26px; height: 26px; color: var(--c1); }
.pillar > svg { margin-bottom: 20px; width: 30px; height: 30px; }
.pillar-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(145deg, rgba(94,231,255,.14), rgba(139,92,246,.14)); border: 1px solid rgba(139,92,246,.25); margin-bottom: 20px; }
.pillar h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: -.02em; }
.pillar p { color: var(--muted); font-size: 15px; margin: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 0; counter-reset: step; }
.step { position: relative; padding: 32px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.step span { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 14px; color: #05060a; background: var(--grad); font-weight: 800; letter-spacing: 0; }
.step h3 { font-size: 21px; margin: 20px 0 10px; }
.step p { color: var(--muted); margin: 0; }

/* --- article cards: grid card · big (title over the image) · row (compact list item) --- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-grid.three { grid-template-columns: repeat(3, 1fr); }
.codex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.acard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--line); transition: transform .45s var(--ease-out), border-color var(--t), box-shadow .45s var(--ease-out); isolation: isolate; }
.acard[hidden] { display: none; }
.acard:hover, .acard:focus-visible { transform: translateY(-6px); border-color: var(--line-2); box-shadow: 0 30px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(94,231,255,.12); }
.acard-media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-3); }
.acard-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.acard:hover .acard-img, .acard:focus-visible .acard-img { transform: scale(1.07); }
.acard-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.acard-cat { font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--c1); }
.acard h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.02em; }
.acard p { color: var(--muted); font-size: 14.5px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.acard-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--dim); }
.acard.big { justify-content: flex-end; min-height: 440px; border-color: var(--line-2); }
.acard.big .acard-media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
.acard.big .acard-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,10,.97) 0%, rgba(5,6,10,.75) 34%, rgba(5,6,10,.1) 70%); }
.acard.big .acard-body { flex: none; padding: clamp(22px, 3vw, 34px); }
.acard.big h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; }
.acard.big p { color: var(--soft); font-size: 16px; -webkit-line-clamp: 3; max-width: 60ch; }
.acard.big .acard-meta { color: var(--muted); }
.codex-grid .acard.big { grid-column: span 2; grid-row: span 2; }
.acard.row { flex-direction: row; align-items: center; gap: 16px; padding: 10px; background: transparent; border-color: transparent; }
.acard.row:hover, .acard.row:focus-visible { transform: none; box-shadow: none; background: rgba(255,255,255,.05); border-color: var(--line); }
.acard.row .acard-media { width: 132px; flex: none; aspect-ratio: 4/3; border-radius: var(--r-sm); }
.acard.row .acard-body { padding: 0; gap: 4px; }
.acard.row h3 { font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acard.row .acard-meta { padding-top: 2px; }

/* --- app band: copy + a phone showing the library --- */
.app-band { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; padding: clamp(28px, 5vw, 72px); border-radius: var(--r-2xl); border: 1px solid var(--line-2); background: radial-gradient(640px 420px at 82% 20%, rgba(139,92,246,.28), transparent 70%), radial-gradient(520px 320px at 8% 110%, rgba(94,231,255,.14), transparent 70%), linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); overflow: hidden; isolation: isolate; }
.app-band h2 { font-size: var(--fs-3xl); margin-bottom: 18px; letter-spacing: -.04em; }
.app-band p { color: var(--soft); max-width: 520px; }
.phone { position: relative; justify-self: center; width: 290px; margin-bottom: -150px; padding: 11px; border-radius: 48px; background: linear-gradient(160deg, #353a52, #0b0d14 60%); box-shadow: 0 70px 140px -30px rgba(139,92,246,.55), 0 0 0 1px rgba(255,255,255,.14) inset, 0 0 0 2px #05060a; transform: rotate(-5deg) translateY(10px); transition: transform .9s var(--ease-out); }
.app-band:hover .phone { transform: rotate(-2deg) translateY(-6px); }
.phone-screen { position: relative; border-radius: 38px; background: radial-gradient(300px 200px at 50% 0, rgba(139,92,246,.18), transparent 70%), #080a11; padding: 40px 14px 24px; min-height: 560px; overflow: hidden; }
.phone-screen::before { content: ''; position: absolute; top: 12px; left: 50%; width: 86px; height: 24px; border-radius: 14px; background: #000; transform: translateX(-50%); }
.ph-top { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 19px; margin: 4px 6px 14px; }
.ph-top svg { width: 24px; height: 24px; }
.ph-feature { position: relative; display: flex; align-items: flex-end; height: 150px; margin-bottom: 12px; border-radius: 20px; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--line-2); }
.ph-feature img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ph-feature::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,6,10,.9), transparent 60%); }
.ph-feature b { padding: 12px 14px; font-size: 16px; letter-spacing: -.02em; }
.ph-row { display: flex; align-items: center; gap: 12px; padding: 9px; border-radius: 16px; background: rgba(255,255,255,.045); margin-bottom: 9px; }
.ph-row > div { min-width: 0; }
.ph-row b { display: block; font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-row small { color: var(--dim); font-size: 12px; }
.ph-thumb { width: 42px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.ph-play { margin-inline-start: auto; flex: none; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--text); color: #05060a; }

/* --- game page --- */
.ghero { position: relative; min-height: min(76vh, 760px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h); }
.ghero-art { position: absolute; inset: 0; z-index: -2; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.ghero-img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 30s ease-out both; }
.ghero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,6,10,.6) 0%, rgba(5,6,10,.72) 28%, rgba(5,6,10,.15) 65%, rgba(5,6,10,.55) 100%), linear-gradient(90deg, rgba(5,6,10,.85) 0%, transparent 62%); }
@keyframes kenburns { from { transform: scale(1.1); } to { transform: scale(1); } }
.ghero-in { padding-bottom: 48px; }
.ghero-copy { max-width: 760px; }
.ghero h1 { font-size: clamp(52px, 9vw, 128px); line-height: .92; letter-spacing: -.05em; font-weight: 800; margin-bottom: 14px; text-shadow: 0 10px 60px rgba(0,0,0,.5); }
.ghero h1.long { font-size: clamp(36px, 5.4vw, 76px); line-height: 1; }
.ghero .tagline { font-size: clamp(19px, 2vw, 26px); font-weight: 600; color: var(--accent); letter-spacing: -.02em; margin-bottom: 14px; filter: brightness(1.15); }
.ghero .lead { max-width: 600px; }
.ghero .chips { margin-top: 18px; }
.ghero-price { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ghero-price .tag { height: 32px; font-size: 14.5px; padding: 0 14px; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; }
.game-main { grid-column: 1; grid-row: 1; min-width: 0; }
.buybox { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--nav-h) + 20px); margin-top: -140px; padding: 20px; border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--line-2); box-shadow: var(--e3); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); z-index: 2; }
.buybox-cover { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1 / 1; margin-bottom: 18px; border: 1px solid var(--line); background: var(--bg-3); }
.buybox-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.buybox-main { display: grid; gap: 14px; }
.cta-col { display: grid; gap: 10px; }
.cta-col .btn { width: 100%; white-space: normal; height: auto; min-height: 54px; padding-top: 10px; padding-bottom: 10px; text-align: center; line-height: 1.3; }
.cta-col .hint { margin: 0; text-align: center; }
.buybox .hint { margin: 0; }
.facts { margin: 18px 0 0; padding: 0; display: grid; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 2px; border-top: 1px solid var(--line); font-size: 14px; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; font-weight: 600; text-align: end; }
.story { padding-top: clamp(40px, 5vw, 64px); display: grid; gap: 8px; }
.story .eyebrow { margin: 0; }
.story-text p { font-size: 18.5px; line-height: 1.7; color: var(--soft); max-width: 68ch; }
.story blockquote { margin: 18px 0 0; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.2; font-weight: 650; letter-spacing: -.03em; padding-inline-start: 26px; border-inline-start: 3px solid var(--accent); text-wrap: balance; }
.gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.gallery a { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-3); aspect-ratio: 16/9; cursor: zoom-in; }
.gallery a:first-child { grid-row: span 2; aspect-ratio: auto; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.gallery a:hover img, .gallery a:focus-visible img { transform: scale(1.04); }
.gallery-zoom { position: absolute; inset-inline-end: 12px; bottom: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(5,6,10,.6); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: scale(.9); transition: opacity var(--t), transform var(--t) var(--ease); }
.gallery-zoom svg { width: 18px; height: 18px; }
.gallery a:hover .gallery-zoom, .gallery a:focus-visible .gallery-zoom { opacity: 1; transform: none; }
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.feature { padding: 24px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); transition: border-color var(--t), background var(--t); }
.feature:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--panel-2); }
.feature-no { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .1em; filter: brightness(1.15); }
.feature h3 { font-size: 19px; margin: 14px 0 8px; letter-spacing: -.02em; }
.feature p { color: var(--muted); font-size: 15px; margin: 0; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.specs > div { padding: 22px 24px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.specs > div.rec { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--panel); }
.specs h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 12px; color: var(--soft); font-weight: 650; letter-spacing: 0; }
.specs h3 svg { width: 18px; height: 18px; color: var(--accent); }
.specs dl { margin: 0; }
.specs dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.specs dt { font-size: var(--fs-sm); color: var(--dim); }
.specs dd { margin: 0; font-size: 14.5px; text-align: end; font-weight: 550; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-weight: 600; font-size: 17px; position: relative; letter-spacing: -.01em; border-radius: 6px; transition: color var(--t-fast); }
.faq summary:hover { color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; inset-inline-end: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--t) var(--ease); }
.faq details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.faq details p { color: var(--muted); margin: 0 0 20px; max-width: 68ch; }
.faq details[open] p { animation: rise .3s var(--ease-out); }

/* --- free page --- */
.free-list { display: grid; gap: 24px; }
.free-item { display: grid; grid-template-columns: 1.3fr 1fr; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-2); background: var(--panel); box-shadow: var(--e2); transition: border-color var(--t); }
.free-item:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.free-media { min-height: 340px; overflow: hidden; display: block; }
.free-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.free-item:hover .free-media img { transform: scale(1.04); }
.free-copy { padding: clamp(24px, 4vw, 48px); align-self: center; }
.free-copy h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 14px; }
.free-copy p { color: var(--muted); }

/* --- prose / article --- */
.prose { font-size: 18px; line-height: 1.75; color: #d2d7e2; max-width: 70ch; }
.prose > p:first-child { font-size: 20px; color: var(--text); }
.prose h2 { font-size: var(--fs-2xl); margin: 52px 0 16px; color: var(--text); letter-spacing: -.025em; scroll-margin-top: calc(var(--nav-h) + 20px); }
.prose ul, .prose ol { padding-inline-start: 24px; margin: 0 0 1.3em; }
.prose li { margin-bottom: 10px; padding-inline-start: 4px; }
.prose li::marker { color: var(--c1); }
.prose ol li::marker { font-weight: 700; }
.prose a { color: var(--c1); text-decoration: underline; text-decoration-color: rgba(94,231,255,.4); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--c1); }
.prose strong { color: var(--text); }
.prose .faq summary { font-size: 17px; }
.prose .tags { margin-top: 40px; }
.legal { padding-top: 64px; }
.legal h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 10px; }
.art-head { padding-top: clamp(40px, 6vw, 80px); }
.art-head h1 { font-size: clamp(34px, 5vw, 60px); margin-bottom: 20px; letter-spacing: -.035em; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--muted); margin-top: 22px; }
.byline > span:not(.byline-mark) + span::before { content: '·'; margin-inline-end: 14px; color: var(--dim); }
.byline-mark svg { width: 26px; height: 26px; }
.art-media { margin: 40px auto 56px; max-width: 1180px; }
.art-media img, .art-media .img-fallback { width: 100%; border-radius: var(--r-xl); aspect-ratio: 16/8; object-fit: cover; border: 1px solid var(--line); box-shadow: var(--e3); }
.art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: start; max-width: 1100px; }
.art-grid.solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.keyfacts { position: sticky; top: calc(var(--nav-h) + 24px); padding: 24px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.keyfacts h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--c1); margin-bottom: 12px; }
.keyfacts ul { list-style: none; padding: 0; margin: 0; }
.keyfacts li { position: relative; padding: 11px 0 11px 18px; border-top: 1px solid var(--line); font-size: 14.5px; color: #cfd5e3; line-height: 1.5; }
.keyfacts li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }
.kf-cta { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 12px; font-size: 14px; font-weight: 600; }
.sources { font-size: 15px; }

/* --- auth & gate: the first impression --- */
.auth { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 40px 16px; }
.auth.split { grid-template-columns: 1.1fr minmax(380px, .9fr); place-items: stretch; padding: 0; }
.auth-art { position: relative; display: flex; align-items: center; padding: clamp(40px, 6vw, 96px); overflow: hidden; isolation: isolate; border-inline-end: 1px solid var(--line); background: radial-gradient(900px 600px at 20% 30%, rgba(94,231,255,.10), transparent 60%), radial-gradient(800px 600px at 80% 90%, rgba(139,92,246,.18), transparent 65%); }
.auth-orbit { position: absolute; left: 50%; top: 50%; width: min(900px, 110%); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
.auth-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid transparent; background: var(--grad-ring) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); opacity: .35; transform: rotateX(70deg) rotateZ(0); animation: orbit 36s linear infinite; }
.auth-orbit i:nth-child(2) { inset: 12%; opacity: .25; animation-duration: 52s; animation-direction: reverse; }
.auth-orbit i:nth-child(3) { inset: 26%; opacity: .5; border-width: 2px; filter: blur(.4px); animation-duration: 24s; }
@keyframes orbit { to { transform: rotateX(70deg) rotateZ(360deg); } }
.auth-claim { position: relative; max-width: 560px; }
.auth-big { font-size: clamp(44px, 5.8vw, 92px); line-height: .96; letter-spacing: -.05em; font-weight: 800; margin: 26px 0 36px; }
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.auth-points li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-lg); background: rgba(10,12,19,.5); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); max-width: 440px; }
.auth-points svg { width: 22px; height: 22px; color: var(--c1); flex: none; margin-top: 2px; }
.auth-points b { display: block; font-size: 15px; margin-bottom: 2px; }
.auth-points span { font-size: 14px; color: var(--muted); line-height: 1.5; }
.auth-side { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; padding: 40px clamp(16px, 4vw, 56px); background: rgba(5,6,10,.55); }
.auth-card { width: 100%; max-width: 420px; padding: clamp(28px, 4vw, 40px); border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: var(--e3); position: relative; animation: rise .6s var(--ease-out); }
.auth-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(94,231,255,.55), rgba(139,92,246,.2) 40%, transparent 60%, rgba(255,179,92,.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.auth-card .brand { margin-bottom: 30px; }
.auth-card h1 { font-size: 30px; margin-bottom: 8px; letter-spacing: -.035em; }
.auth-card > .muted { margin-bottom: 0; }
.auth-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; margin-bottom: 18px; background: linear-gradient(145deg, rgba(94,231,255,.16), rgba(139,92,246,.16)); border: 1px solid rgba(139,92,246,.3); color: var(--c1); }
.auth-ic svg { width: 28px; height: 28px; }
.auth-alt { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 14.5px; }
.auth-alt a { color: var(--text); font-weight: 650; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.auth-note { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); line-height: 1.5; }
.auth-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ok); }
.auth-cancel { text-align: center; margin-top: 18px; }
.auth-foot { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0; font-size: 12.5px; color: var(--dim); }
.auth-foot a:hover { color: var(--text); }

/* --- account --- */
.acct { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; padding-top: 44px; align-items: start; }
.acct-side { position: sticky; top: calc(var(--nav-h) + 24px); }
.acct-id { display: flex; gap: 14px; align-items: center; padding: 6px 6px 22px; }
.acct-id b { display: block; font-size: 16px; }
.acct-id small { color: var(--dim); }
.acct-nav { display: grid; gap: 2px; }
.acct-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--muted); font-size: 15px; font-weight: 550; transition: background var(--t-fast), color var(--t-fast); }
.acct-nav a > svg { width: 18px; height: 18px; flex: none; }
.acct-nav a > span:first-of-type { flex: 1; }
.acct-nav a:hover { background: rgba(255,255,255,.04); color: var(--text); }
.acct-nav a[aria-current] { background: rgba(255,255,255,.08); color: var(--text); box-shadow: inset 2px 0 0 var(--c1); }
.acct-nav a[aria-current] svg { color: var(--c1); }
.acct-nav b { font-size: 12px; background: var(--c2); color: #fff; padding: 1px 8px; border-radius: 99px; }
.acct-main, .acct-side { min-width: 0; }
.acct-title { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 28px; letter-spacing: -.035em; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stats a { position: relative; padding: 20px 22px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); transition: border-color var(--t-fast), background var(--t-fast), transform var(--t) var(--ease); }
.stats a:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateY(-2px); }
.stats svg { width: 20px; height: 20px; color: var(--muted); margin-bottom: 14px; }
.stats a.good svg { color: var(--ok); }
.stats a.warn svg { color: var(--c3); }
.stats b { display: block; font-size: 30px; letter-spacing: -.03em; line-height: 1.1; }
.stats span { font-size: var(--fs-sm); color: var(--dim); }
.panel { padding: 26px; border-radius: var(--r-lg); background: rgba(10,12,19,.62); border: 1px solid var(--line); margin-bottom: 20px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.panel-head h2 { font-size: 19px; letter-spacing: -.02em; }
.panel-head form { margin: 0; }
.pad { padding: 8px 0; margin: 0; }
.callout { display: flex; gap: 18px; align-items: center; padding: 20px 22px; border-radius: var(--r-lg); margin-bottom: 20px; background: linear-gradient(100deg, rgba(94,231,255,.08), rgba(139,92,246,.10)); border: 1px solid rgba(139,92,246,.3); }
.callout > svg { width: 30px; height: 30px; color: var(--c1); flex: none; }
.callout p { margin: 2px 0 0; color: var(--soft); font-size: 14.5px; }
.callout .btn { margin-inline-start: auto; }
.empty { padding: 56px 24px; text-align: center; border-radius: var(--r-lg); border: 1px dashed var(--line-2); background: radial-gradient(400px 200px at 50% 0%, rgba(139,92,246,.08), transparent 70%); }
.empty-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; margin-bottom: 18px; background: linear-gradient(145deg, rgba(94,231,255,.12), rgba(139,92,246,.14)); border: 1px solid rgba(139,92,246,.28); color: var(--c1); }
.empty-ic svg { width: 28px; height: 28px; }
.empty h3 { font-size: 20px; margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 420px; margin: 0 auto 22px; }
.notes { list-style: none; padding: 0; margin: 0; }
.notes li { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 16px 0 16px 20px; border-top: 1px solid var(--line); position: relative; }
.notes li.unread::before { content: ''; position: absolute; inset-inline-start: 0; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 0 4px rgba(94,231,255,.15); }
.notes p { margin: 2px 0 4px; color: var(--soft); font-size: 14.5px; }
.notes small { color: var(--dim); font-size: 12.5px; }
.thumb { width: 72px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); flex: none; background: var(--bg-3); }
.mini-lib { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.mini-lib a { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); transition: border-color var(--t), background var(--t); }
.mini-lib a:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--panel-2); }
.mini-lib .thumb { width: 48px; height: 64px; }
.mini-lib span { min-width: 0; }
.mini-lib b { display: block; font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-lib small { color: var(--dim); font-size: 12.5px; }
.lib { display: grid; gap: 12px; }
.lib-item { display: flex; gap: 20px; align-items: center; padding: 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); transition: border-color var(--t); }
.lib-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.lib-body { flex: 1; min-width: 0; }
.lib-body .eyebrow { margin-bottom: 4px; font-size: 11px; }
.lib-body h3 { font-size: 19px; }
.lib-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; color: var(--dim); }
.lib-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.lib-actions form { margin: 0; }
.status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 650; background: rgba(255,255,255,.07); color: #cfd5e3; white-space: nowrap; }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.s-owned, .s-free, .s-paid, .s-success, .s-on { background: rgba(74,222,128,.12); color: #bbf7d0; }
.s-trial, .s-open, .s-pending, .s-wait { background: rgba(255,179,92,.13); color: #ffd8a8; }
.s-cancelled, .s-void, .s-off { background: rgba(248,113,113,.1); color: #fecaca; }
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.cart-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cart-list li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 18px; align-items: center; padding: 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.cart-list .eyebrow { margin-bottom: 2px; font-size: 11px; }
.cart-list h3 { font-size: 18px; margin-bottom: 4px; }
.cart-list small { color: var(--dim); }
.cart-list form { margin: 0; }
.summary { padding: 26px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--line-2); position: sticky; top: calc(var(--nav-h) + 24px); }
.summary h2 { font-size: 19px; margin-bottom: 18px; }
.sum-row { display: flex; justify-content: space-between; padding: 10px 0; color: var(--muted); font-size: 15px; }
.sum-row.total { color: var(--text); font-weight: 700; font-size: 18px; border-top: 1px solid var(--line); margin: 8px 0 20px; padding-top: 16px; }
.table-wrap { overflow-x: auto; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: start; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 650; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 14px 12px; border-bottom: 1px solid var(--line); color: #d2d7e2; vertical-align: middle; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: rgba(255,255,255,.025); }
.table .right, .right { text-align: end; }
.table .inline { display: inline; margin-inline-start: 12px; }
.sessions { list-style: none; padding: 0; margin: 0; }
.sessions li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.sessions small { display: block; color: var(--dim); font-size: 13px; margin-top: 2px; }
.sessions form { margin: 0; }
.ok-line { display: flex; gap: 10px; align-items: center; color: #bbf7d0; }
.ok-line svg { width: 22px; height: 22px; flex: none; }
.mfa-setup { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
.qr { background: #fff; padding: 10px; border-radius: 16px; }
.qr svg { display: block; width: 100%; height: auto; }
.mini { padding-inline-start: 20px; color: var(--soft); font-size: 14.5px; margin: 0 0 8px; }
.mini li { margin-bottom: 6px; }
code { font: 600 14px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; background: rgba(255,255,255,.07); padding: 2px 8px; border-radius: 6px; letter-spacing: .05em; word-break: break-all; }
.app-card, .app-status { display: flex; gap: 18px; align-items: center; padding: 20px 22px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-2); margin-bottom: 20px; }
.app-card p { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.app-card .btn { margin-inline-start: auto; }
.app-card-icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: #0b0d16; border: 1px solid var(--line-2); flex: none; }
.app-card-icon svg { width: 32px; height: 32px; }
.app-status { max-width: 520px; margin: 32px auto 0; text-align: start; }
.app-status svg { width: 30px; height: 30px; color: var(--c1); flex: none; }
.app-status b { display: block; }
.app-status span { color: var(--muted); font-size: 14.5px; }
.dl { display: grid; gap: 12px; }
.dl-item { display: flex; gap: 18px; align-items: center; padding: 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.dl-item > div { flex: 1; min-width: 0; }
.dl-item h3 { font-size: 18px; margin-bottom: 4px; }
.dl-item small { color: var(--dim); }

/* invoice */
.invoice-page { padding-top: 40px; }
.inv-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.invoice { padding: clamp(24px, 5vw, 48px); border-radius: var(--r-xl); background: rgba(10,12,19,.82); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--e3); }
.invoice header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 36px; }
.invoice header p { margin: 10px 0 0; font-size: 13px; }
.inv-no { text-align: end; display: grid; gap: 6px; justify-items: end; }
.inv-no h1 { font-size: 32px; }
.inv-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.inv-meta span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin-bottom: 4px; }
.inv-meta small { display: block; color: var(--muted); }
.inv-table tfoot td { border-bottom: 0; padding: 8px 12px; color: var(--muted); }
.inv-table tfoot tr.total td { color: var(--text); font-weight: 700; font-size: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.pay { margin-top: 28px; padding: 22px; border-radius: var(--r-md); border: 1px dashed var(--line-2); }
.pay h3 { font-size: 17px; margin-bottom: 14px; }
.pay-methods { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-m { height: 44px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); font-weight: 600; opacity: .55; cursor: not-allowed; }
.invoice footer { margin-top: 32px; font-size: 13px; }

/* --- error pages --- */
.err { padding-top: clamp(64px, 10vw, 140px); }
.err-code { font-size: clamp(110px, 22vw, 260px); line-height: .85; font-weight: 900; letter-spacing: -.07em; margin: 0 0 18px; filter: drop-shadow(0 30px 80px rgba(139,92,246,.4)); }
.err h1 { font-size: var(--fs-4xl); margin-bottom: 18px; letter-spacing: -.04em; }

/* --- modal & lightbox --- */
.modal { padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-xl); background: #0b0d15; color: var(--text); width: min(520px, calc(100vw - 32px)); overflow: hidden; box-shadow: 0 60px 160px -20px rgba(0,0,0,.95); }
.modal::backdrop { background: rgba(3,4,8,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal[open] { animation: pop .45s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.modal-art { height: 190px; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.modal-art img { width: 100%; height: 100%; object-fit: cover; }
.modal-body { padding: 0 32px 32px; margin-top: -20px; position: relative; }
.modal-body .eyebrow { color: var(--ok); }
.modal-body .eyebrow svg { color: var(--ok); }
.modal-body h2 { font-size: 32px; margin-bottom: 14px; }
.modal-body p { color: var(--soft); }
.modal-body .cta-row { margin-top: 22px; }
.modal-x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; background: rgba(5,6,10,.6); color: var(--text); }
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(3,4,8,.94); color: var(--text); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; animation: fade .25s; }
.lightbox::backdrop { background: rgba(3,4,8,.6); }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-size: 14px; color: var(--muted); }
.lb-stage { position: relative; display: grid; place-items: center; padding: 0 72px; min-height: 0; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 40px 120px rgba(0,0,0,.8); animation: fade .3s; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; color: var(--text); background: rgba(255,255,255,.08); border: 1px solid var(--line-2); }
.lb-prev { inset-inline-start: 14px; } .lb-next { inset-inline-end: 14px; }
.lb-cap { padding: 14px 18px 22px; text-align: center; font-size: 14px; color: var(--muted); }
.lightbox .icon-btn { color: var(--text); }
@keyframes fade { from { opacity: 0; } }

.img-fallback { background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--accent, #8b5cf6) 45%, transparent), transparent 60%), linear-gradient(160deg, #141826, #07080d); }

/* --- round 2: sign-up, onboarding, editions, checkout, admin --- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-sm); font-weight: 600; color: #cfd5e3; }
.field-row .link { font-size: 13px; }
.field input[aria-invalid="true"] { border-color: rgba(248,113,113,.6); }
.avail-in { position: relative; }
.avail-in input { padding-inline-end: 44px; }
.avail-ic { position: absolute; inset-inline-end: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; }
.avail-ic.ok { background: var(--ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.avail-ic.bad { background: var(--err); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.avail-ic.wait { border: 2px solid var(--line-3); border-top-color: var(--c1); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.field small.avail:empty { display: none; }
.field small.avail.ok { color: #bbf7d0; }
.field small.avail.bad { color: #fecaca; }
.meter { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 2px; }
.meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--err); transition: width var(--t) var(--ease), background var(--t); }
.meter i[data-level="1"] { width: 25%; background: var(--err); }
.meter i[data-level="2"] { width: 50%; background: var(--warn); }
.meter i[data-level="3"] { width: 75%; background: var(--c1); }
.meter i[data-level="4"] { width: 100%; background: var(--ok); }
.meter-row small:empty { display: none; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rules li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--dim); line-height: 1.4; }
.rules svg { width: 14px; height: 14px; flex: none; margin-top: 2px; opacity: .35; }
.rules li.ok { color: #bbf7d0; }
.rules li.ok svg { opacity: 1; color: var(--ok); }
.intent { display: flex; gap: 14px; align-items: center; margin: 20px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: linear-gradient(120deg, rgba(94,231,255,.1), rgba(139,92,246,.1)); border: 1px solid rgba(94,231,255,.25); }
.intent-img, .intent-img img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.intent b { display: block; font-size: 14.5px; }
.intent small { color: var(--muted); font-size: 12.5px; }
.err-hint { color: #fecaca; margin-top: -8px; }
.guest { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.guest small { display: block; margin-top: 10px; color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.auth-art.has-game { overflow: hidden; }
.auth-game { position: absolute; inset: 0; opacity: .38; }
.auth-game img { width: 100%; height: 100%; object-fit: cover; }
.auth-game::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,6,10,.35), var(--bg) 96%), linear-gradient(0deg, var(--bg), transparent 40%); }
.has-game .auth-big { font-size: clamp(40px, 5vw, 76px); }
input.code { font-size: 24px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 650; }
.inline-code { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.inline-code .field { flex: 1 1 200px; }
.inline-code .btn { height: 52px; }
.onboard { padding-top: 56px; padding-bottom: 80px; }
.onboard h1 { font-size: var(--fs-3xl); letter-spacing: -.035em; margin: 12px 0 10px; }
.ob-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; }
.ob-step { min-width: 0; display: flex; gap: 18px; padding: 24px; border-radius: var(--r-lg); background: rgba(10,12,19,.62); border: 1px solid var(--line); }
.ob-step > div { flex: 1; min-width: 0; }
.ob-step h2 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 6px; }
.ob-step p { margin: 0; }
.ob-no { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; font-weight: 750; background: rgba(255,255,255,.06); border: 1px solid var(--line-2); }
.ob-step.done .ob-no { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.4); color: var(--ok); }
.ob-no svg { width: 20px; height: 20px; }
.game-grid.ob-games { margin-top: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .game-grid.ob-games { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ob-step { flex-direction: column; } }
.preview-bar { position: sticky; top: 0; z-index: 60; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 16px; background: linear-gradient(90deg, #3b2a6b, #1e3a5f); font-size: 14px; border-bottom: 1px solid var(--line-2); }
.preview-bar svg { width: 18px; height: 18px; color: var(--c1); }
.preview-bar form { margin: 0; }
/* editions */
.editions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.editions.one { grid-template-columns: minmax(0, 560px); }
.ed { position: relative; padding: 24px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.ed.full { background: linear-gradient(160deg, color-mix(in srgb, var(--accent, #8b5cf6) 16%, transparent), rgba(10,12,19,.6)); border-color: color-mix(in srgb, var(--accent, #8b5cf6) 45%, transparent); }
.ed-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ed.full .ed-tag { color: var(--c1); }
.ed-price { display: block; font-size: 30px; letter-spacing: -.03em; margin: 6px 0 8px; }
.ed-price small { font-size: 14px; color: var(--c3); font-weight: 650; letter-spacing: 0; }
.ed p { color: var(--soft); font-size: 14.5px; margin: 0 0 14px; }
.ed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ed li { display: flex; gap: 10px; font-size: 14.5px; color: #d2d7e2; }
.ed li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--ok); }
.ed-payee, .payee { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.5; }
.ed-payee svg, .payee svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--c2-text); }
.ed-chip { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 650; background: rgba(94,231,255,.12); color: var(--c1); }
.cta-sub { text-align: center; }
.s-demo, .s-settled, .s-created, .s-awaiting { background: rgba(94,231,255,.1); color: #bdf3ff; }
.s-owed, .s-submitted { background: rgba(255,179,92,.13); color: #ffd8a8; }
.s-refunded, .s-reversed, .s-failed, .s-mismatch { background: rgba(248,113,113,.1); color: #fecaca; }
.callout.warn-call { background: linear-gradient(120deg, rgba(255,179,92,.12), rgba(255,179,92,.04)); border: 1px solid rgba(255,179,92,.3); }
.callout.warn-call > svg { color: var(--c3); }
.callout.slim { padding: 12px 16px; font-size: 14px; }
.callout.slim > svg { width: 20px; height: 20px; }
.inv-paid { display: flex; gap: 10px; align-items: center; margin-top: 24px; color: #bbf7d0; font-weight: 600; }
.inv-paid svg { width: 18px; height: 18px; }
/* checkout */
.checkout { padding-top: 44px; padding-bottom: 80px; }
.co-head h1 { font-size: var(--fs-3xl); letter-spacing: -.035em; margin: 10px 0 20px; }
.co-steps { list-style: none; margin: 0 0 32px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.co-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); font-size: 13.5px; color: var(--dim); background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.co-steps li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.07); }
.co-steps li span svg { width: 14px; height: 14px; }
.co-steps li.done { color: #bbf7d0; } .co-steps li.done span { background: rgba(74,222,128,.18); }
.co-steps li[aria-current] { color: var(--text); border-color: rgba(94,231,255,.4); } .co-steps li[aria-current] span { background: var(--c1); color: #05060a; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.co-main { min-width: 0; }
.co-sum { padding: 24px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--line-2); position: sticky; top: calc(var(--nav-h) + 20px); }
.co-sum .panel-head { margin-bottom: 14px; }
.co-items { list-style: none; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--line); display: grid; gap: 14px; }
.co-items li { display: flex; gap: 12px; align-items: center; }
.co-items li > div { flex: 1; min-width: 0; }
.co-items picture { flex: none; }
.co-items .thumb, .co-items .thumb img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.co-items small { display: block; color: var(--dim); font-size: 12.5px; margin-top: 3px; }
.co-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.co-foot form { margin: 0; }
.state-card { padding: clamp(26px, 4vw, 40px); border-radius: var(--r-xl); background: rgba(10,12,19,.62); border: 1px solid var(--line-2); }
.state-card h2 { font-size: var(--fs-2xl); letter-spacing: -.03em; margin: 18px 0 10px; }
.state-card > p { color: var(--soft); max-width: 560px; }
.state-card.ok { border-color: rgba(74,222,128,.35); background: radial-gradient(500px 220px at 0 0, rgba(74,222,128,.1), transparent), rgba(10,12,19,.62); }
.state-card.bad { border-color: rgba(248,113,113,.35); }
.state-card.soon { background: radial-gradient(520px 240px at 0 0, rgba(139,92,246,.16), transparent), rgba(10,12,19,.62); }
.state-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(145deg, rgba(94,231,255,.18), rgba(139,92,246,.18)); border: 1px solid var(--line-2); color: var(--c1); }
.state-ic svg { width: 28px; height: 28px; }
.ok-ic { background: rgba(74,222,128,.15); color: var(--ok); border-color: rgba(74,222,128,.4); }
.bad-ic { background: rgba(248,113,113,.12); color: var(--err); border-color: rgba(248,113,113,.4); }
.muted-ic { color: var(--muted); }
.soon-methods { margin-top: 20px; opacity: .55; }
.soon-methods .pay-m { display: inline-flex; align-items: center; cursor: default; }
.pay-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.pay-form legend h2 { font-size: 19px; margin-bottom: 14px; }
.pay-opt { display: block; cursor: pointer; position: relative; }
.pay-opt input { position: absolute; inset-inline-start: 20px; top: 21px; width: 18px; height: 18px; margin: 0; opacity: 0; }
.pay-opt-in { display: grid; gap: 4px; padding: 18px 20px 18px 52px; position: relative; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--panel); transition: border-color var(--t-fast), background var(--t-fast); }
.pay-opt-in::before { content: ''; position: absolute; inset-inline-start: 20px; top: 21px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-3); }
.pay-opt input:checked + .pay-opt-in { border-color: var(--c1); background: rgba(94,231,255,.06); }
.pay-opt input:checked + .pay-opt-in::before { border: 6px solid var(--c1); }
.pay-opt input:focus-visible + .pay-opt-in { box-shadow: var(--focus); }
.pay-opt-in b { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.pay-opt-in small { color: var(--muted); font-size: 13.5px; }
.pay-opt .net { margin-top: 10px; }
.pp-mark, .usdt-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: 14px; font-weight: 800; background: #0070e0; color: #fff; }
.usdt-mark { background: #26a17b; }
.pay-form .btn { margin-top: 20px; }
.pay-form .hint svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--ok); }
.usdt h2 { font-size: var(--fs-xl); margin-bottom: 6px; }
.usdt-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; margin: 20px 0; align-items: start; }
.qr { width: 168px; padding: 10px; border-radius: 16px; background: #fff; }
.qr svg { display: block; width: 100%; height: auto; }
.usdt-rows { display: grid; gap: 8px; min-width: 0; }
.copy-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; }
.copy-row > span { color: var(--dim); font-size: 12.5px; }
.copy-row code { overflow-wrap: anywhere; font-size: 13.5px; color: var(--text); }
.copy-row.big code { font-size: 20px; font-weight: 750; color: var(--c1); }
.copy-row:not(:has(button)) { grid-template-columns: 96px minmax(0, 1fr); }
.kv { display: grid; gap: 12px; margin: 16px 0 0; }
.kv.cols { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kv div { min-width: 0; }
.kv dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin-bottom: 4px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv dd small { color: var(--dim); }
/* admin */
.admin { padding-top: 40px; padding-bottom: 80px; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-head .acct-title { margin: 8px 0 20px; }
.admin-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.admin-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); color: var(--muted); font-weight: 600; font-size: 14px; border: 1px solid var(--line); }
.admin-tabs a svg { width: 16px; height: 16px; }
.admin-tabs a[aria-current] { color: var(--text); background: rgba(255,255,255,.08); border-color: var(--line-2); }
.chips.filter { margin: 0; }
.chips.filter a { padding: 6px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--muted); border: 1px solid var(--line); }
.chips.filter a[aria-current] { color: var(--text); background: rgba(255,255,255,.08); }
.admin .table td { white-space: nowrap; }
.notes-pre { white-space: pre-wrap; font: 13.5px/1.6 ui-monospace, monospace; color: var(--soft); background: var(--panel); padding: 14px; border-radius: 12px; margin: 0; }
.center-ic { margin: 0 auto 18px; }
@media (max-width: 900px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-sum { position: static; order: -1; }
  .editions { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .usdt-grid { grid-template-columns: 1fr; }
  .qr { width: 150px; }
  .copy-row, .copy-row:not(:has(button)) { grid-template-columns: 1fr auto; }
  .copy-row > span { grid-column: 1 / -1; }
  .ob-step { padding: 18px; gap: 14px; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- 6 motion · responsive · print ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .rail { grid-auto-columns: calc((100% - 3 * 20px) / 4); }
}
@media (max-width: 1080px) {
  .links { display: none; }
  .burger { display: inline-grid; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .codex-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars.wide { grid-template-columns: repeat(2, 1fr); }
  .game-grid.four { grid-template-columns: repeat(2, 1fr); }
  .rail { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
  .rail.wide { grid-auto-columns: calc((100% - 20px) / 2); }
  .game-layout { grid-template-columns: 1fr; gap: 0; }
  .buybox { grid-column: 1; grid-row: 1; position: relative; top: 0; margin-top: -24px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start; }
  .buybox-cover { margin: 0; aspect-ratio: 3 / 4; }
  .buybox .facts { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 18px; margin-top: 4px; }
  .game-main { grid-row: 2; }
  .app-band, .art-grid, .cart { grid-template-columns: minmax(0, 1fr); }
  .keyfacts { position: static; }
  .acct { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 28px; }
  .acct-side { position: static; }
  .acct-nav { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-snap-type: x proximity; }
  .acct-nav::-webkit-scrollbar { display: none; }
  .acct-nav a { white-space: nowrap; border: 1px solid var(--line); gap: 8px; scroll-snap-align: start; }
  .acct-nav a[aria-current] { box-shadow: none; border-color: var(--line-3); }
  .summary { position: static; }
  .phone { transform: none; }
  .auth.split { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-side { min-height: 100vh; min-height: 100svh; background: transparent; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; --nav-h: 62px; }
  .nav-in { gap: 12px; }
  .nav-right .nav-signin { display: none; }
  .sec-head.row { flex-direction: column; align-items: flex-start; }
  .rail-ctl { top: -58px; }
  .js .sec-head.row:has(+ .rail-wrap) .link-arrow { order: 3; }
  .rail { grid-auto-columns: 44%; gap: 14px; }
  .rail.wide { grid-auto-columns: 84%; }
  .game-grid { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .gcard h3 { font-size: 15.5px; }
  .gcard .tag { height: 24px; font-size: 11.5px; padding: 0 9px; }
  .gcard .was { font-size: 12px; }
  .badge { inset-inline-start: 8px; top: 8px; height: 22px; font-size: 10.5px; padding: 0 8px; }
  .countdown { gap: 8px; }
  .countdown div { min-width: 0; flex: 1; }
  .countdown b { font-size: 24px; }
  .news-grid, .news-grid.three, .codex-grid, .features, .steps, .specs { grid-template-columns: 1fr; }
  .pillars, .pillars.wide { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 10px; }
  .gallery a:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16/9; }
  .gallery-zoom { opacity: 1; transform: none; width: 32px; height: 32px; inset-inline-end: 8px; bottom: 8px; }
  .ghero { min-height: 70vh; min-height: 70svh; }
  .ghero h1 { font-size: clamp(44px, 13vw, 64px); }
  .ghero h1.long { font-size: clamp(30px, 8.6vw, 40px); }
  .ghero .lead { font-size: 16px; }
  .buybox { grid-template-columns: 96px minmax(0, 1fr); padding: 16px; gap: 14px; }
  .buybox .btn.lg { height: 50px; padding: 0 18px; font-size: 15px; }
  .buybox .facts { grid-template-columns: 1fr; }
  .story-text p { font-size: 17px; }
  .free-item { grid-template-columns: 1fr; }
  .free-media { min-height: 220px; }
  .prose { font-size: 17px; }
  .prose > p:first-child { font-size: 18px; }
  .art-media { margin: 28px auto 36px; padding: 0; }
  .art-media img { border-radius: 0; border-inline-start: 0; border-inline-end: 0; aspect-ratio: 16/10; }
  .form.grid2 { grid-template-columns: 1fr; }
  .mfa-setup { grid-template-columns: 1fr; }
  .mfa-setup .qr { max-width: 220px; }
  .callout { flex-wrap: wrap; }
  .callout .btn, .app-card .btn { margin-inline-start: 0; }
  .app-card { flex-wrap: wrap; }
  .lib-item, .dl-item { flex-wrap: wrap; }
  .dl-item .status { white-space: normal; height: auto; min-height: 24px; padding: 3px 10px; }
  .lib-actions { width: 100%; justify-content: flex-start; }
  .cart-list li { grid-template-columns: auto 1fr; }
  .inv-meta { grid-template-columns: 1fr 1fr; }
  .invoice header { flex-direction: column; }
  .inv-no { text-align: start; justify-items: start; }
  .foot-in { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .foot-base { flex-direction: column; }
  .modal-body { padding: 0 22px 24px; }
  .lb-stage { padding: 0 8px; }
  .lb-prev, .lb-next { top: auto; bottom: -56px; transform: none; }
  .lb-prev { inset-inline-start: calc(50% - 60px); } .lb-next { inset-inline-end: calc(50% - 60px); }
  .lb-cap { padding-bottom: 80px; }
  .auth-card { padding: 26px 22px; }
  .crumbs li:last-child { display: none; }
  .err-code { margin-bottom: 8px; }
}
@media (hover: none) {
  .gcard:hover .gcard-media { transform: none; }
  .btn:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  .btn, .tag, .badge, .status { border: 1px solid CanvasText; }
  .grad, .grad-warm { color: CanvasText; background: none; }
}
@media print {
  .nav, .foot, .no-print, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .invoice { background: #fff; border: 0; color: #000; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; box-shadow: none; }
  .invoice *, .table td { color: #000 !important; }
  .brand svg { filter: none; }
}

/* ---------- languages ---------- */
/* RTL: direction icons mirror, hover nudges go the other way (layout itself uses logical properties) */
[dir=rtl] svg.dir { transform: scaleX(-1); }
[dir=rtl] .btn:hover svg.dir:last-child:not(:first-child) { transform: scaleX(-1) translateX(3px); }
[dir=rtl] .link-arrow:hover svg.dir { transform: scaleX(-1) translateX(4px); }
/* codes, keys, addresses, amounts stay left-to-right inside RTL text */
[dir=rtl] input.code, [dir=rtl] input[type=email], [dir=rtl] input[name=username], [dir=rtl] .mono { direction: ltr; text-align: center; }
[dir=rtl] input[type=email], [dir=rtl] input[name=username] { text-align: end; }
/* Chinese: system CJK fonts, no Latin tracking, CJK line breaking */
:root:lang(zh) body { font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif; line-break: strict; word-break: normal; }
:root:lang(zh) :is(h1, h2, h3, .page-head h1, .hero-title) { letter-spacing: 0; }
:root:lang(zh) .eyebrow, :root:lang(zh) .foot-cols h2 { letter-spacing: .06em; }
:root:lang(ja) body { font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif; line-break: strict; word-break: normal; }
:root:lang(ko) body { font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Noto Sans KR', sans-serif; word-break: keep-all; }
:root:is(:lang(ja), :lang(ko)) :is(h1, h2, h3, .page-head h1, .hero-title) { letter-spacing: 0; }
/* long Russian/Portuguese words: wrap instead of overflowing buttons, nav and cards */
.btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; height: auto; min-height: 46px; padding-block: 6px; }
.btn.lg { height: auto; min-height: 54px; } .btn.sm { height: auto; min-height: 36px; padding-block: 4px; }
.inline-code .btn { height: auto; min-height: 52px; }
@media (max-width: 720px) { .buybox .btn.lg { height: auto; min-height: 50px; } }
h1, h2, h3, .gcard, .acard, .tag { overflow-wrap: anywhere; hyphens: auto; }
/* header switcher */
.lang-btn { width: auto; min-width: 40px; padding: 0 10px; gap: 6px; display: inline-flex; border-radius: var(--r-pill); }
.lang-btn svg { width: 19px; height: 19px; }
.lang-cur { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.lang-menu summary { list-style: none; } .lang-menu summary::-webkit-details-marker { display: none; }
.lang-pop { width: 270px; }
.lang-pop-h { margin: 4px 12px 6px; font-size: 12px; font-weight: 650; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.lang-pop a { justify-content: flex-start; }
.lang-pop .lang-n { flex: 1; font-weight: 600; color: var(--text); }
.lang-pop small { font-size: 12px; color: var(--dim); }
.lang-pop a[aria-current] .lang-n { color: var(--c1); }
.lang-pop a svg { color: var(--c1); }
/* inline lists: mobile menu, footer, sign-in pages */
.mnav-lang, .foot-lang, .auth-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.mnav-lang svg, .foot-lang svg, .auth-lang svg { width: 16px; height: 16px; color: var(--dim); margin-inline-end: 4px; }
.mnav-lang a, .foot-lang a, .auth-lang a { padding: 5px 10px; border-radius: var(--r-pill); font-size: 13.5px; color: var(--muted); border: 1px solid transparent; }
.mnav-lang a:hover, .foot-lang a:hover, .auth-lang a:hover { color: var(--text); background: rgba(255,255,255,.06); }
.mnav-lang a[aria-current], .foot-lang a[aria-current], .auth-lang a[aria-current] { color: var(--text); border-color: var(--line-2); }
.mnav-lang { padding: 16px 0 4px; }
.foot-lang-row { padding-bottom: 18px; }
.auth-lang { justify-content: center; margin-top: 10px; }
/* first-visit suggestion bar */
.lang-bar { position: relative; z-index: 51; background: linear-gradient(90deg, rgba(94,231,255,.10), rgba(167,139,250,.10)); border-bottom: 1px solid var(--line-2); }
.lang-bar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-block: 10px; }
.lang-bar-in > svg { width: 20px; height: 20px; color: var(--c1); flex: none; }
.lang-bar-in p { margin: 0; flex: 1 1 220px; font-size: 14.5px; }
.lang-bar-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lang-x svg { width: 18px; height: 18px; }
@media (max-width: 420px) { .lang-btn .lang-cur { display: none; } .lang-btn { padding: 0; } }

/* ---------- 7 first-visit clarity: header app button, bottom app bar, home start, install guide, game CTA ---------- */
/* header: Sign in is a quiet link, Create account a ghost button, Get the app the one primary button */
.nav-signin { padding: 8px 12px; border-radius: var(--r-pill); font-size: 14px; font-weight: 550; color: var(--soft); white-space: nowrap; }
.nav-signin:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-right .nav-join, .nav-right .nav-app { flex: none; white-space: nowrap; }
.nav-app { margin-inline-start: 4px; }
.j-short { display: none; }
/* who publishes + legal links, next to the main calls to action */
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 18px 0 0; font-size: 13px; color: var(--dim); }
.trust svg { width: 16px; height: 16px; color: var(--ok); flex: none; margin-inline-end: -8px; }
.trust a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.trust a:hover { color: var(--text); }
.trust.sm { justify-content: center; margin-top: 14px; font-size: 12px; gap: 4px 10px; }
/* language suggestion: one slim line */
.lang-bar-in { flex-wrap: nowrap; gap: 10px; padding-block: 5px; }
.lang-bar-in > svg { width: 18px; height: 18px; }
.lang-bar-in p { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.lang-bar-in p a { color: var(--c1); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.lang-x { width: 32px; height: 32px; flex: none; }
.lang-x svg { width: 16px; height: 16px; }
/* phones: a fixed "Get the app" bar (not on /app itself) */
.appbar { display: none; }

/* game page: the add/install card sits in the first screen, with size, minimum specs and a 3-step guide */
.buybox-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.buybox-head .buybox-cover { width: 60px; flex: none; aspect-ratio: 3 / 4; margin: 0; border-radius: var(--r-xs); }
.buybox-head .hint { margin-top: 6px; font-size: 12.5px; }
.mini-guide { list-style: none; margin: 14px 0 0; padding: 12px 14px; display: grid; gap: 8px; border-radius: var(--r-md); background: rgba(255,255,255,.035); border: 1px solid var(--line); font-size: 14px; color: var(--soft); }
.mini-guide li { display: flex; gap: 10px; align-items: center; }
.mini-guide span { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--grad); color: #05060a; font-size: 12px; font-weight: 800; }
.mini-guide a { color: var(--c1); text-decoration: underline; text-underline-offset: 3px; }
.buybox .facts { margin-top: 10px; }
.buybox .facts div { padding: 8px 2px; font-size: 13.5px; }
@media (min-width: 1081px) {
  .ghero { min-height: 600px; }
  .ghero-copy { max-width: min(760px, calc(100% - 416px)); }
  .buybox { margin-top: -508px; max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; scrollbar-width: thin; }
}

/* /app: the install guide */
.app-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; padding-top: clamp(40px, 6vw, 88px); }
.app-hero h1 { font-size: var(--fs-4xl); letter-spacing: -.04em; margin-bottom: 18px; }
.app-hero .lead { margin-bottom: 28px; }
.btn.dl-btn { min-height: 62px; padding-inline: 34px; font-size: 18px; }
.dl-meta { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.qr-card { padding: 24px; border-radius: var(--r-xl); background: var(--panel); border: 1px solid var(--line-2); text-align: center; }
.qr-box { width: 196px; margin: 0 auto 16px; padding: 8px; border-radius: var(--r-md); background: #fff; }
.qr-box svg { width: 100%; height: auto; }
.qr-card b { display: block; font-size: 16px; }
.qr-card p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.isteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.istep { padding: 18px 18px 22px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.istep.key { border-color: rgba(94,231,255,.35); background: linear-gradient(160deg, rgba(94,231,255,.08), rgba(139,92,246,.06)); }
.istep-n { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-top: 18px; border-radius: 10px; background: var(--grad); color: #05060a; font-size: 14px; font-weight: 800; }
.istep h3 { font-size: 18px; margin: 12px 0 8px; letter-spacing: -.02em; }
.istep p { margin: 0; font-size: 14.5px; color: var(--muted); }
/* a phone's top half, drawn in CSS */
.mini-phone { position: relative; display: flex; align-items: center; height: 140px; margin: 0 6px; padding: 24px 10px 0; border: 6px solid #262a3a; border-bottom: 0; border-radius: 26px 26px 0 0; background: #0b0d14; overflow: hidden; }
.mini-phone::before { content: ''; position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; border-radius: 3px; background: #262a3a; transform: translateX(-50%); }
.mp-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; background: #171a26; border: 1px solid var(--line-2); font-size: 12.5px; }
.mp-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: rgba(94,231,255,.12); color: var(--c1); }
.mp-ic svg { width: 16px; height: 16px; }
.mp-file { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-btn { margin-inline-start: auto; padding: 5px 10px; border-radius: 999px; background: var(--c1); color: #05060a; font-size: 11.5px; font-style: normal; font-weight: 700; white-space: nowrap; }
.mp-note b { display: block; font-size: 12.5px; }
.mp-note small { display: block; font-size: 11.5px; color: var(--muted); }
.mp-label { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.mp-switch { position: relative; width: 36px; height: 20px; flex: none; border-radius: 10px; background: var(--c1); }
.mp-switch::after { content: ''; position: absolute; top: 3px; inset-inline-end: 3px; width: 14px; height: 14px; border-radius: 50%; background: #05060a; }
.mp-app svg { width: 30px; height: 30px; flex: none; }
.mp-app b { font-size: 14px; }
.app-info { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.app-info .sec-head { margin-bottom: 20px; }
.app-info h2 { font-size: var(--fs-2xl); }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.req-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--soft); }
.req-list svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--ok); }
.sha { font-size: 13px; color: var(--muted); }
.sha code { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); color: var(--soft); font: 12px/1.5 ui-monospace, monospace; word-break: break-all; text-align: left; }

@media (max-width: 1080px) {
  .buybox { display: block; }
  .isteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-info { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .nav-app, .nav-right .nav-signin { display: none; }
  .j-long { display: none; }
  .j-short { display: inline; }
  .nav-right .nav-join { padding-inline: 12px; }
  .appbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 49; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(5,6,10,.92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--line-2); }
  .appbar span { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--soft); line-height: 1.3; }
  .appbar .btn { flex: none; white-space: nowrap; }
  body:has(.appbar) { padding-bottom: 60px; }
  body.nav-open .appbar { display: none; }
  .ghero { min-height: 0; padding-top: calc(var(--nav-h) + 110px); }
  .ghero-in { padding-bottom: 36px; }
  .ghero .chips { display: none; }
  .ghero .lead { font-size: 15px; margin-bottom: 0; }
  .ghero .tagline { margin-bottom: 8px; }
  .app-hero { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .qr-card { display: none; }
  .btn.dl-btn { width: 100%; }
  .isteps { grid-template-columns: minmax(0, 1fr); }
  .mini-phone { height: 116px; }
}
.buybox-spec { margin: 8px 0 0; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.buybox-spec div { display: flex; gap: 6px; align-items: flex-start; }
.buybox-spec svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--c1); }
.buybox-spec dt::after { content: ':'; }
.buybox-spec dd { margin: 0; color: var(--text); font-weight: 600; }
.buybox-head { align-items: flex-start; }
.buybox > .hint { margin-top: 10px; text-align: center; font-size: 12.5px; }
@media (max-width: 720px) {
  .ghero { padding-top: calc(var(--nav-h) + 48px); }
  .ghero .lead { display: none; }
  .ghero h1.long { margin-bottom: 8px; }
  .ghero .eyebrow { margin-bottom: 8px; }
  .ghero .crumbs ol { margin-bottom: 10px; }
  .buybox-head { margin-bottom: 12px; }
  .buybox .cta-col .hint { font-size: 12.5px; }
  .mini-guide { margin-top: 10px; padding: 10px 12px; gap: 6px; }
}

/* ---------- 8 cinematic store: home hero, how-to strip, poster rails, free tiles, magazine news, reading ---------- */
/* header: glass over the full-bleed heroes */
.nav { background: linear-gradient(180deg, rgba(5,6,10,.62), rgba(5,6,10,.38)); border-bottom-color: rgba(255,255,255,.06); }
.links a[aria-current]::after { bottom: 0; }

/* home hero: one full-bleed slide per featured game on a scroll-snap track */
.hero { position: relative; height: clamp(560px, 82vh, 900px); height: clamp(560px, 82svh, 900px); margin-top: calc(-1 * var(--nav-h)); background: var(--bg-2); isolation: isolate; }
.hero-track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-track:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c1); border-radius: 0; }
.hero-slide { position: relative; flex: 0 0 100%; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; scroll-snap-align: start; }
.hero-img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform-origin: 65% 40%; animation: hero-zoom 26s ease-out infinite alternate; }
@keyframes hero-zoom { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.hero-slide::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,6,10,.92) 0%, rgba(5,6,10,.62) 32%, rgba(5,6,10,0) 64%), linear-gradient(0deg, var(--bg) 0%, rgba(5,6,10,.55) 24%, rgba(5,6,10,0) 50%), linear-gradient(180deg, rgba(5,6,10,.6) 0%, rgba(5,6,10,0) 22%); }
.hero-slide::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(760px 460px at 8% 92%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%); mix-blend-mode: screen; }
.hero-copy { padding-bottom: clamp(150px, 19vh, 190px); }
.hero-copy .eyebrow { margin-bottom: 16px; color: color-mix(in srgb, var(--accent) 60%, #fff); }
.hero-copy .eyebrow::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.hero-title { max-width: 13ch; font-size: clamp(52px, 7.4vw, 116px); line-height: .9; font-weight: 850; letter-spacing: -.055em; text-shadow: 0 12px 60px rgba(0,0,0,.55); }
.hero-title.long { max-width: 17ch; font-size: clamp(38px, 4.8vw, 72px); line-height: 1; }
.hero-pitch { max-width: 44ch; margin: 18px 0 16px; font-size: clamp(18px, 1.6vw, 23px); font-weight: 550; line-height: 1.45; color: #e9ecf5; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.hero-price { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero-price .tag { height: 30px; font-size: 13.5px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-copy .cta-row { margin-top: 26px; }
.hero-copy .btn.lg:not(.ghost) { box-shadow: 0 18px 50px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.hero-ctl { position: absolute; inset-inline: 0; bottom: 64px; display: flex; align-items: center; justify-content: flex-end; gap: 18px; pointer-events: none; }
.hero-thumbs { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; pointer-events: auto; }
.hero-thumb { position: relative; display: block; width: 58px; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; background: var(--bg-3); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 10px 30px -10px rgba(0,0,0,.8); opacity: .62; transition: opacity var(--t), transform var(--t) var(--ease), box-shadow var(--t); }
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-thumb span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-thumb:hover { opacity: .9; }
.hero-thumb[aria-current] { opacity: 1; transform: translateY(-6px); box-shadow: 0 0 0 2px var(--accent), 0 16px 40px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.hero-nav { display: none; gap: 6px; pointer-events: auto; }
.js .hero-nav { display: flex; }
.hero-nav .icon-btn { width: 44px; height: 44px; color: var(--text); background: rgba(5,6,10,.5); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero-nav .icon-btn:hover { background: rgba(255,255,255,.12); }

/* how it works: a slim glass strip that overlaps the hero */
.howto { position: relative; z-index: 2; margin-top: -40px; }
.howto-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); gap: 28px; align-items: center; padding: 20px 22px 20px 28px; border-radius: var(--r-xl); background: rgba(13,15,23,.78); border: 1px solid var(--line-2); box-shadow: var(--e3); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
.howto h1 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; margin-bottom: 8px; }
.howto-head p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.howto-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.howto-steps li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-md); background: rgba(255,255,255,.035); border: 1px solid var(--line); transition: background var(--t), border-color var(--t), transform var(--t) var(--ease); }
.howto-steps li:hover { background: rgba(255,255,255,.07); border-color: var(--line-2); transform: translateY(-2px); }
.howto-steps .n { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px; background: var(--grad); color: #05060a; font-size: 14px; font-weight: 800; }
.howto-steps a { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.howto-steps a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.howto-steps small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.howto-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 20px; padding: 12px 8px 0; }
.howto-foot .trust, .howto-foot p { margin: 0; font-size: 13px; }

/* rails of posters */
.rail.posters { grid-auto-columns: calc((100% - 5 * 18px) / 6); gap: 18px; padding: 10px 2px 22px; }

/* free right now: landscape tiles */
.free-head { align-items: flex-end; }
.free-head .countdown { margin: 0; flex: none; }
.wtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wtile { position: relative; display: flex; align-items: flex-end; min-height: 320px; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--line), var(--e2); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.wtile picture, .wtile-img { position: absolute; inset: 0; }
.wtile-img { z-index: -3; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.wtile::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5,6,10,.9) 0%, rgba(5,6,10,.5) 45%, rgba(5,6,10,0) 75%), linear-gradient(0deg, rgba(5,6,10,.85) 0%, rgba(5,6,10,0) 55%); }
.wtile::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(500px 300px at 0 100%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); mix-blend-mode: screen; }
.wtile-body { max-width: 440px; padding: 26px 28px; }
.wtile .eyebrow { margin-bottom: 8px; color: color-mix(in srgb, var(--accent) 60%, #fff); }
.wtile h3 { font-size: clamp(24px, 2.3vw, 34px); line-height: 1.02; font-weight: 800; letter-spacing: -.04em; }
.wtile p { margin: 8px 0 0; font-size: 15px; color: var(--soft); }
.wtile:hover, .wtile:focus-visible { transform: translateY(-6px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 40px 80px -30px color-mix(in srgb, var(--accent) 55%, transparent); }
.wtile:hover .wtile-img, .wtile:focus-visible .wtile-img { transform: scale(1.06); }

/* latest news on home: lead story + three rows */
.mag { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; }
.mag-side { display: grid; gap: 4px; align-content: start; padding: 8px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }

/* filter chips (games index, news index) */
.filters { display: none; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.js .filters { display: flex; }
.news-more .filters { margin: 0 0 24px; }
.chip { min-height: 38px; padding: 6px 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--soft); font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.chip:hover { background: rgba(255,255,255,.09); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--text); border-color: transparent; color: #05060a; }
.game-grid.posters { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 22px; }

/* news index: the top story full width */
.news-head { padding-bottom: 32px; }
.story-top { position: relative; display: flex; align-items: flex-end; min-height: clamp(440px, 48vw, 620px); border-radius: var(--r-2xl); overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--line-2), var(--e3); }
.story-top-media { position: absolute; inset: 0; z-index: -2; }
.story-top-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease-out); }
.story-top:hover .story-top-media img { transform: scale(1.05); }
.story-top::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,6,10,.97) 0%, rgba(5,6,10,.7) 38%, rgba(5,6,10,.05) 75%), linear-gradient(90deg, rgba(5,6,10,.6), transparent 60%); }
.story-top-body { max-width: 840px; padding: clamp(24px, 4vw, 56px); }
.story-top h2 { margin: 14px 0; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.02; font-weight: 800; letter-spacing: -.045em; text-shadow: 0 6px 40px rgba(0,0,0,.5); }
.story-top p { max-width: 62ch; font-size: clamp(16px, 1.35vw, 19px); color: var(--soft); }
.story-top .acard-meta { font-size: 13.5px; color: var(--muted); }
.story-top .btn { margin-top: 22px; margin-inline-start: 18px; }
.news-more { padding-top: 48px; }

/* article: full-bleed image with the title over it, then a 680px reading column */
.art-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(480px, 74vh, 780px); margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h); overflow: hidden; isolation: isolate; }
.art-hero-media { position: absolute; inset: 0; z-index: -2; }
.art-hero-img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 30s ease-out both; }
.art-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg) 0%, rgba(5,6,10,.82) 30%, rgba(5,6,10,.25) 68%, rgba(5,6,10,.6) 100%); }
.art-hero-in { max-width: 920px; padding-bottom: clamp(32px, 5vw, 56px); }
.art-hero h1 { margin: 14px 0 16px; font-size: clamp(36px, 5.2vw, 72px); line-height: 1.02; font-weight: 800; letter-spacing: -.045em; text-shadow: 0 8px 50px rgba(0,0,0,.55); }
.art-dek { max-width: 62ch; margin: 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--soft); }
.art-hero .byline { margin-top: 24px; }
.art-grid { grid-template-columns: minmax(0, 680px) 280px; justify-content: center; padding-top: clamp(28px, 4vw, 48px); }
.art-grid.solo { grid-template-columns: minmax(0, 680px); max-width: 728px; }
.reading .prose { max-width: 680px; font-size: 18.5px; line-height: 1.8; color: #d6dbe6; }
.reading .prose > p:first-child { font-size: inherit; color: inherit; }
.prose .lede { margin-bottom: 1.3em; font-size: clamp(20px, 1.9vw, 23px); line-height: 1.6; color: var(--text); }
.reading .prose > p:first-child::first-letter { float: inline-start; margin: .06em 0 0; margin-inline-end: .1em; font-size: 4.1em; line-height: .82; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root:is(:lang(fa), :lang(zh)) .reading .prose p::first-letter { float: none; margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; background: none; color: inherit; }
.reading .prose h2 { margin: 1.9em 0 .55em; font-size: clamp(24px, 2.3vw, 30px); }
.prose h3 { margin: 1.6em 0 .4em; font-size: 21px; color: var(--text); letter-spacing: -.02em; }
.pull { margin: 2em 0; padding: 26px 0; border-block: 1px solid var(--line-2); text-align: center; }
.pull::before { content: '“'; display: block; height: 34px; font-size: 72px; line-height: 1; font-weight: 800; color: var(--c2-text); }
.pull p { margin: 0; font-size: clamp(23px, 2.6vw, 32px); line-height: 1.28; font-weight: 750; letter-spacing: -.025em; color: var(--text); text-wrap: balance; }
.pull cite { display: block; margin-top: 12px; font-size: 14px; font-style: normal; color: var(--dim); }
.fig { margin: 2em 0; }
.fig img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--e2); }
.fig figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--dim); text-align: center; }
@media (min-width: 900px) { .art-grid.solo .fig { margin-inline: -56px; } }
.story-games, .pn { margin-top: 56px; }
.wrap.story-games { max-width: 728px; }
.story-games h2 { margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.sg-list { display: grid; gap: 12px; }
.sg { display: flex; gap: 16px; align-items: center; padding: 12px 18px 12px 12px; border-radius: var(--r-lg); background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(255,255,255,.02) 70%); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); transition: transform var(--t) var(--ease), box-shadow var(--t); }
.sg:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--accent) 70%, transparent); }
.sg-img { width: 60px; height: 80px; flex: none; border-radius: 10px; object-fit: cover; }
.sg > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sg .eyebrow { margin: 0; font-size: 11px; }
.sg b { font-size: 18px; line-height: 1.25; letter-spacing: -.02em; }
.sg .gcard-price { margin-top: 6px; }
.sg > svg { width: 22px; height: 22px; flex: none; color: var(--muted); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1100px; }
.pn a { position: relative; display: flex; align-items: flex-end; min-height: 190px; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; border: 1px solid var(--line); transition: border-color var(--t), transform var(--t) var(--ease); }
.pn a:hover { border-color: var(--line-3); transform: translateY(-3px); }
.pn-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: opacity var(--t), transform 1.4s var(--ease-out); }
.pn a:hover .pn-img { opacity: .7; transform: scale(1.05); }
.pn a::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,6,10,.95), rgba(5,6,10,.3)); }
.pn-body { display: grid; gap: 6px; padding: 20px 22px; }
.pn small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c1); }
.pn small svg { width: 15px; height: 15px; }
.pn b { font-size: 19px; line-height: 1.25; letter-spacing: -.02em; }
.pn-next { grid-column: 2; justify-content: flex-end; text-align: end; }

/* game page: taller hero with the game's glow, accent ring on the buy card, sticky bar on phones */
body.game .ghero { min-height: min(84vh, 860px); }
.ghero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(800px 480px at 10% 90%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%); mix-blend-mode: screen; }
.ghero h1 { font-weight: 850; }
.buybox { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), var(--e3), 0 40px 120px -50px color-mix(in srgb, var(--accent) 60%, transparent); }
.gallery a { border-radius: var(--r-lg); box-shadow: var(--e2); }
.feature { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); }
.feature-no { font-size: 34px; font-weight: 850; letter-spacing: -.04em; line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 80%, #fff); }
.gbar-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gbar-thumb { width: 36px; height: 48px; flex: none; border-radius: 8px; object-fit: cover; }
.gbar-id > span { display: grid; gap: 2px; min-width: 0; }
.gbar-id b { font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbar .tag { height: 22px; font-size: 11.5px; padding: 0 8px; justify-self: start; }
.gbar .was { display: none; }
.gbar .btn { background: var(--accent); color: #05060a; }
.appbar { transition: transform .35s var(--ease-out); }
.appbar.off { transform: translateY(110%); }

/* footer: the SYC mark stays small */
.foot { background: linear-gradient(180deg, rgba(10,12,19,.6), rgba(5,6,10,.95)); }
.foot-syc { display: inline-flex; align-items: center; gap: 10px; }
.syc-mark { width: 28px; height: 28px; border-radius: 8px; opacity: .9; }

/* staggered arrival of cards in a revealed section */
@keyframes card-in { from { opacity: 0; transform: translateY(20px); } }
.js .reveal:not(.in) :is(.gcard, .acard, .wtile, .sg) { opacity: 0; }
.js .reveal.in :is(.gcard, .acard, .wtile, .sg) { animation: card-in .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }

/* right-to-left: shades come from the side the text is on */
[dir=rtl] .hero-slide::before { background: linear-gradient(270deg, rgba(5,6,10,.92) 0%, rgba(5,6,10,.62) 32%, rgba(5,6,10,0) 64%), linear-gradient(0deg, var(--bg) 0%, rgba(5,6,10,.55) 24%, rgba(5,6,10,0) 50%), linear-gradient(180deg, rgba(5,6,10,.6) 0%, rgba(5,6,10,0) 22%); }
[dir=rtl] .hero-slide::after { background: radial-gradient(760px 460px at 92% 92%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%); }
[dir=rtl] .wtile::before { background: linear-gradient(270deg, rgba(5,6,10,.9) 0%, rgba(5,6,10,.5) 45%, rgba(5,6,10,0) 75%), linear-gradient(0deg, rgba(5,6,10,.85) 0%, rgba(5,6,10,0) 55%); }
[dir=rtl] .ghero-shade { background: linear-gradient(0deg, rgba(5,6,10,.6) 0%, rgba(5,6,10,.72) 28%, rgba(5,6,10,.15) 65%, rgba(5,6,10,.55) 100%), linear-gradient(270deg, rgba(5,6,10,.85) 0%, transparent 62%); }
[dir=rtl] .story-top::before { background: linear-gradient(0deg, rgba(5,6,10,.97) 0%, rgba(5,6,10,.7) 38%, rgba(5,6,10,.05) 75%), linear-gradient(270deg, rgba(5,6,10,.6), transparent 60%); }
[dir=rtl] .hero-title, [dir=rtl] .story-top h2, [dir=rtl] .art-hero h1 { line-height: 1.3; }

@media (max-width: 1180px) {
  .rail.posters { grid-auto-columns: calc((100% - 3 * 18px) / 4); }
}
@media (max-width: 1080px) {
  .howto-in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mag { grid-template-columns: minmax(0, 1fr); }
  .art-grid { grid-template-columns: minmax(0, 680px); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hero { height: clamp(540px, 80svh, 760px); }
  .hero-slide::before { background: linear-gradient(0deg, var(--bg) 0%, rgba(5,6,10,.88) 30%, rgba(5,6,10,.2) 62%, rgba(5,6,10,.55) 100%); }
  [dir=rtl] .hero-slide::before { background: linear-gradient(0deg, var(--bg) 0%, rgba(5,6,10,.88) 30%, rgba(5,6,10,.2) 62%, rgba(5,6,10,.55) 100%); }
  .hero-img { object-position: center 20%; }
  .hero-copy { padding-bottom: 126px; }
  .hero-title { font-size: clamp(42px, 12vw, 58px); }
  .hero-title.long { font-size: clamp(30px, 8.4vw, 38px); }
  .hero-pitch { margin: 10px 0 12px; font-size: 16.5px; }
  .hero-copy .cta-row { margin-top: 18px; gap: 10px; flex-wrap: nowrap; }
  .hero-copy .cta-row .btn { flex: 1 1 0; min-width: 0; min-height: 50px; padding-inline: 12px; font-size: 15px; }
  .hero-ctl { bottom: 56px; justify-content: center; }
  .hero-nav { display: none !important; }
  .hero-thumbs { gap: 8px; }
  .hero-thumb { width: 40px; border-radius: 9px; }
  .hero-thumb[aria-current] { transform: translateY(-4px); }
  .howto { margin-top: -36px; }
  .howto-in { padding: 16px; border-radius: var(--r-lg); }
  .howto h1 { font-size: 24px; }
  .howto-steps { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .howto-steps li { padding: 10px 12px; align-items: center; }
  .howto-steps small { font-size: 12.5px; }
  .howto-foot { padding: 12px 4px 0; }
  .rail.posters { grid-auto-columns: 42%; gap: 12px; }
  .gcard-body { padding: 12px; }
  .gcard h3 { font-size: 15.5px; }
  .free-head .countdown { width: 100%; }
  .wtiles { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .wtiles::-webkit-scrollbar { display: none; }
  .wtile { min-height: 380px; scroll-snap-align: start; }
  .wtile::before { background: linear-gradient(0deg, rgba(5,6,10,.96) 0%, rgba(5,6,10,.6) 45%, rgba(5,6,10,0) 75%) !important; }
  .wtile-body { padding: 20px; }
  .acard.row .acard-media { width: 104px; }
  .acard.big { min-height: 380px; }
  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .codex-grid .acard.big { grid-column: auto; grid-row: auto; }
  .story-top { min-height: 480px; border-radius: var(--r-lg); margin-inline: calc(-1 * var(--gutter) + 8px); }
  .story-top-body { padding: 22px 20px; }
  .story-top p { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .art-hero { min-height: min(72svh, 620px); }
  .art-hero h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .reading .prose { font-size: 17.5px; line-height: 1.75; }
  .pull p { font-size: 22px; }
  .pn { grid-template-columns: minmax(0, 1fr); }
  .pn-next { grid-column: auto; justify-content: flex-start; text-align: start; }
  .phone { width: 250px; margin-bottom: -170px; transform: rotate(-4deg); }
  .phone-screen { min-height: 520px; }
  .app-band { padding-bottom: 0; }
  body.game .ghero { min-height: 0; }
  .feature-no { font-size: 28px; }
  .gbar .btn { padding-inline: 14px; }
}

/* round 6: game categories, screenshot strips and the Made-by-SYC feature */
.cat { scroll-margin-top: 80px; }
.cat-head p { max-width: 560px; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cat-tabs .chip { text-decoration: none; }
.shot-strip { list-style: none; margin: 22px 0 0; padding: 0 0 6px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.shot-strip li { flex: 0 0 min(80vw, 420px); scroll-snap-align: start; }
.shot-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg, 16px); box-shadow: 0 0 0 1px var(--line); background: var(--surface, #0e1018); }
.syc-card { position: relative; display: flex; align-items: flex-end; min-height: 420px; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--line), var(--e2); }
.syc-card picture, .syc-img { position: absolute; inset: 0; }
.syc-img { z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.syc-card::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5,6,10,.88) 0%, rgba(5,6,10,.45) 50%, rgba(5,6,10,0) 80%), linear-gradient(0deg, rgba(5,6,10,.8) 0%, rgba(5,6,10,0) 55%); }
[dir=rtl] .syc-card::before { background: linear-gradient(270deg, rgba(5,6,10,.88) 0%, rgba(5,6,10,.45) 50%, rgba(5,6,10,0) 80%), linear-gradient(0deg, rgba(5,6,10,.8) 0%, rgba(5,6,10,0) 55%); }
.syc-body { max-width: 480px; padding: 32px; }
.syc-body h3 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.02; font-weight: 800; }
.syc-body p { margin: 10px 0 16px; color: var(--soft); }
.syc-body .btn { margin-top: 14px; }
@media (max-width: 720px) { .syc-card { min-height: 380px; } .syc-body { padding: 22px; } }

/* round 7: coming soon (real PC classics in the works), the screenshot wall, the codex rail */
.badge.soon { background: linear-gradient(135deg, #ffe08a, #ff9f5a); }
.tag.soon { background: rgba(255,200,110,.14); color: #ffe2b0; border-color: rgba(255,200,110,.4); }
.gcard.soon .gcard-img { filter: saturate(1.05) contrast(1.03); }
.rail.articles { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
.soon-tiles { margin-top: 6px; }
.shot-wall { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shot-wall li { position: relative; border-radius: var(--r-md, 14px); overflow: hidden; aspect-ratio: 16 / 9; }
.shot-wall li:first-child { grid-column: span 2; grid-row: span 2; }
.shot-wall a { display: block; height: 100%; }
.shot-wall img, .shot-wall picture { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.shot-wall a:hover img { transform: scale(1.05); }
.shot-wall span { position: absolute; inset-inline: 0; bottom: 0; padding: 18px 12px 8px; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
@media (max-width: 720px) {
  .rail.articles { grid-auto-columns: 82%; }
  .shot-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .shot-wall li:first-child { grid-column: span 2; grid-row: auto; }
}

/* ---------- round 9: world games (real releases from other studios) + Steam's live chart ---------- */
.rail.world { grid-auto-columns: calc((100% - 3 * 20px) / 4); }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.wcard { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--panel); box-shadow: 0 0 0 1px var(--line); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.wcard:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--accent) 60%, transparent); }
.wcard-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in srgb, var(--accent) 25%, var(--bg-3)); }
.wcard-media picture, .wcard-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wcard-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,10,.55), rgba(5,6,10,0) 45%); pointer-events: none; }
.wstat { position: absolute; inset-inline-start: 12px; top: 12px; z-index: 1; padding: 5px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; color: #fff; background: rgba(5,6,10,.72); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px var(--line-2); }
.wstat.soon { color: #1a1200; background: var(--grad-warm); box-shadow: none; }
.wstat.today { color: #04110a; background: var(--ok); box-shadow: none; }
.wcard-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.wcard-body .eyebrow { margin: 0; color: color-mix(in srgb, var(--accent) 60%, #fff); }
.wcard h3 { font-size: var(--fs-xl); line-height: 1.15; letter-spacing: -.02em; font-weight: 750; }
.wcard h3 a { color: inherit; text-decoration: none; }
.wcard h3 a::after { content: ''; position: absolute; inset: 0; }
.wcard p { margin: 0; color: var(--soft); font-size: var(--fs-sm); }
.wcard .wcard-when { color: var(--muted); }
.wcard .wcard-when b { color: var(--text); font-weight: 650; }
.wfacts { margin: auto 0 0; padding-top: 10px; display: grid; gap: 6px; font-size: var(--fs-xs); }
.wfacts div { display: flex; gap: 8px; align-items: baseline; }
.wfacts dt { color: var(--dim); min-width: 84px; }
.wfacts dd { margin: 0; color: var(--soft); }
.plats { display: flex; flex-wrap: wrap; gap: 4px; }
.plats span { padding: 2px 7px; border-radius: var(--r-xs); background: var(--panel-2); box-shadow: 0 0 0 1px var(--line); direction: ltr; }
.world-chart { margin-top: 30px; }
.world-chart h3 { font-size: var(--fs-xl); margin-bottom: 14px; }
.schart { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.schart li { position: relative; display: grid; grid-template-columns: 34px 120px minmax(0, 1fr) auto 44px; align-items: center; gap: 14px; padding: 8px 14px 8px 10px; border-radius: var(--r-md); background: var(--panel); box-shadow: 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; }
.sc-bar { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); z-index: -1; background: linear-gradient(90deg, rgba(94,231,255,.10), rgba(139,92,246,.16)); }
[dir="rtl"] .sc-bar { background: linear-gradient(270deg, rgba(94,231,255,.10), rgba(139,92,246,.16)); }
.sc-rank { font-size: var(--fs-xl); font-weight: 800; text-align: center; color: var(--muted); }
.schart li:nth-child(-n+3) .sc-rank { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-img { display: block; width: 120px; height: 56px; object-fit: cover; border-radius: var(--r-xs); background: var(--panel-2); }
.sc-name { display: flex; flex-direction: column; min-width: 0; font-weight: 650; }
.sc-name bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-name small, .sc-num small { font-weight: 450; color: var(--muted); font-size: var(--fs-xs); }
.sc-num { display: flex; flex-direction: column; align-items: flex-end; font-weight: 750; font-variant-numeric: tabular-nums; }
.sc-move { font-size: var(--fs-xs); font-weight: 700; text-align: center; }
.sc-move.up { color: var(--ok); } .sc-move.down { color: var(--err); }
.sc-move.new { color: #1a1200; background: var(--grad-warm); border-radius: var(--r-pill); padding: 2px 6px; }
.sc-note { margin-top: 12px; font-size: var(--fs-xs); }
.world-hero { position: relative; isolation: isolate; min-height: clamp(340px, 46vw, 540px); display: flex; align-items: flex-end; overflow: hidden; }
.world-hero .world-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: 0; }
.world-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, var(--bg) 0%, rgba(5,6,10,.6) 40%, rgba(5,6,10,.1) 100%), linear-gradient(90deg, rgba(5,6,10,.85) 0%, rgba(5,6,10,.4) 50%, rgba(5,6,10,0) 80%), radial-gradient(700px 400px at 0 100%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
.world-hero-in { position: relative; z-index: 2; padding-block: 40px 30px; }
.world-hero-in > * { max-width: 760px; }
.world-hero h1 { font-size: var(--fs-4xl); letter-spacing: -.04em; margin-bottom: 14px; }
[dir="rtl"] .world-hero::before { background: linear-gradient(0deg, var(--bg) 0%, rgba(5,6,10,.6) 40%, rgba(5,6,10,.1) 100%), linear-gradient(270deg, rgba(5,6,10,.85) 0%, rgba(5,6,10,.4) 50%, rgba(5,6,10,0) 80%); }
@media (max-width: 1100px) { .rail.world { grid-auto-columns: calc((100% - 2 * 20px) / 3); } }
@media (max-width: 720px) {
  .rail.world { grid-auto-columns: 80%; gap: 14px; }
  .schart li { grid-template-columns: 26px 72px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px 8px 6px; }
  .sc-img { width: 72px; height: 34px; }
  .sc-move { display: none; }
  .sc-rank { font-size: var(--fs-lg); }
}

/* ---------- round 10: hero autoplay progress, tags, poster marquee ---------- */
.hero-tag { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.hero-thumb::after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.hero.auto .hero-thumb[aria-current]::after { animation: thumb-prog var(--hero-dur, 7s) linear forwards; }
.hero.auto.paused .hero-thumb[aria-current]::after { animation-play-state: paused; }
@keyframes thumb-prog { to { width: 100%; } }
.hero-slide .hero-copy > * { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.hero.js .hero-slide:not(.on) .hero-copy > * { opacity: 0; transform: translateY(18px); }
.hero.js .hero-slide.on .hero-copy > :nth-child(2) { transition-delay: .06s; }
.hero.js .hero-slide.on .hero-copy > :nth-child(3) { transition-delay: .12s; }
.hero.js .hero-slide.on .hero-copy > :nth-child(4) { transition-delay: .18s; }
.hero.js .hero-slide.on .hero-copy > :nth-child(5) { transition-delay: .24s; }
.marquee { position: relative; overflow: hidden; padding: 26px 0 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; gap: 16px; width: max-content; animation: mq 70s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
[dir="rtl"] .mq-track { animation-name: mq-rtl; }
@keyframes mq { to { transform: translateX(calc(-50% - 8px)); } }
@keyframes mq-rtl { to { transform: translateX(calc(50% + 8px)); } }
.mq-item { display: block; width: 168px; aspect-ratio: 2 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--bg-3); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -20px rgba(0,0,0,.9); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.mq-item:nth-child(odd) { transform: translateY(14px); }
.mq-item img { width: 100%; height: 100%; object-fit: cover; }
.mq-item:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 0 0 2px var(--accent), 0 24px 50px -18px color-mix(in srgb, var(--accent) 70%, transparent); }
@media (max-width: 720px) { .mq-item { width: 110px; } .mq-track { gap: 10px; animation-duration: 50s; } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } .hero.js .hero-slide:not(.on) .hero-copy > * { opacity: 1; transform: none; } }
@media (max-width: 720px) { .hero-img { object-position: var(--pos, 50%) center; transform-origin: var(--pos, 50%) 40%; } }

/* 10-07: game avatar badge (PichBaz spotlight) */
.hero-avatar, .syc-avatar { display: block; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 0 0 7px color-mix(in srgb, var(--accent) 35%, transparent), 0 18px 48px color-mix(in srgb, var(--accent) 55%, transparent); animation: avatar-float 5s ease-in-out infinite; }
.syc-avatar { width: 64px; height: 64px; margin-bottom: 12px; }
picture.hero-avatar, picture.syc-avatar { display: block; box-shadow: none; animation: none; }
picture.hero-avatar img, picture.syc-avatar img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 18px; box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 0 0 7px color-mix(in srgb, var(--accent) 35%, transparent), 0 18px 48px color-mix(in srgb, var(--accent) 55%, transparent); animation: avatar-float 5s ease-in-out infinite; }
picture.syc-avatar img { width: 64px; height: 64px; margin-bottom: 12px; }
@keyframes avatar-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .hero-avatar, picture.hero-avatar img, picture.syc-avatar img { animation: none; } }
@media (max-width: 720px) { picture.hero-avatar img { width: 64px; height: 64px; margin-bottom: 12px; } }

/* 10-07: slow parallax drift on the hero art (Ken Burns), paused for reduced motion */
.hero-img { animation: hero-drift 22s ease-in-out infinite alternate; transform-origin: 60% 45%; will-change: transform; }
@keyframes hero-drift { 0% { transform: scale(1.02) translate3d(0, 0, 0); } 100% { transform: scale(1.09) translate3d(-1.6%, -1.2%, 0); } }
@media (prefers-reduced-motion: reduce) { .hero-img { animation: none; } }
/* game cards: a soft accent glow on hover, like the hero avatar */
.gcard:hover .gcard-media, .wtile:hover, .syc-card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 24px 60px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ===== 10-07 "living" home: aurora, cycling hero shots, headline ticker, platform tags, live chart ===== */
.aurora { position: absolute; inset: 0; z-index: -4; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .32; mix-blend-mode: screen; animation: aurora 26s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { left: -20vmax; top: -10vmax; background: radial-gradient(circle, #7c4dff, transparent 60%); }
.aurora i:nth-child(2) { right: -25vmax; top: 10vmax; background: radial-gradient(circle, #ff5ca8, transparent 60%); animation-duration: 31s; animation-delay: -8s; }
.aurora i:nth-child(3) { left: 25vmax; bottom: -35vmax; background: radial-gradient(circle, #19c7e6, transparent 60%); animation-duration: 37s; animation-delay: -16s; }
@keyframes aurora { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(12vmax, 8vmax, 0) scale(1.25); } }
.hero-cycle { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.hero-cycle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50%) 50%; opacity: 0; transition: opacity 1.4s ease; transform-origin: 50% 50%; }
.hero-cycle img.show { opacity: 1; animation: hero-drift 9s ease-in-out infinite alternate; }
.hero.js .hero-slide.on .hero-cycle.active ~ picture .hero-img, .hero.js .hero-slide.on .hero-cycle.active ~ .hero-img { opacity: 0; transition: opacity 1.4s ease; }
.hero-img { transition: opacity 1.4s ease; }
.ticker { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; margin: -2px 0 0; padding: 0 clamp(16px, 4vw, 40px); height: 44px; background: linear-gradient(90deg, color-mix(in srgb, var(--bg-2, #0b0d16) 92%, transparent), color-mix(in srgb, var(--bg-2, #0b0d16) 70%, transparent)); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
.ticker-live { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #ff5c7a; }
.ticker-live i, .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5c7a; box-shadow: 0 0 0 0 rgba(255,92,122,.6); animation: live-pulse 1.6s ease-out infinite; }
.live-dot { background: #2ee6a6; box-shadow: 0 0 0 0 rgba(46,230,166,.6); margin-inline-end: 6px; vertical-align: middle; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 100% { box-shadow: 0 0 0 9px rgba(0,0,0,0); } }
.ticker-track { flex: 1; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker-run { display: flex; flex: none; align-items: center; gap: 34px; padding-inline-end: 34px; animation: ticker 70s linear infinite; }
[dir="rtl"] .ticker-run { animation-name: ticker-rtl; }
.ticker:hover .ticker-run, .ticker:focus-within .ticker-run { animation-play-state: paused; }
.ticker-run a { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--text, #e9ecf5); text-decoration: none; opacity: .92; }
.ticker-run a:hover { color: #fff; opacity: 1; }
@keyframes ticker { to { transform: translateX(-100%); } }
@keyframes ticker-rtl { to { transform: translateX(100%); } }
.plat { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #06070c; background: #9ad8ff; }
.plat.mobile { background: #2ee6a6; } .plat.pc { background: #9ad8ff; } .plat.console { background: #ffb86b; }
.acard-media .plat { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 4; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.shot-wall img { transition: opacity .9s ease; } .shot-wall li.swap img { opacity: 0; }
.schart li { transition: opacity .6s ease; } .schart.refreshing li { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .aurora i, .ticker-run, .hero-cycle img.show, .ticker-live i, .live-dot { animation: none; } .ticker-track { overflow-x: auto; } }
@media (max-width: 720px) { .ticker { height: 40px; gap: 10px; } .ticker-live span { display: none; } .aurora i { filter: blur(60px); } }
.ticker { z-index: 3; }
.ticker + .howto { margin-top: 22px; }

/* ===== r15 (10-08): "In Mobile" stamps, offline chips, roadmap timeline, Zodita Cloud, Zodita Studio ===== */
.stamp { display: inline-flex; align-items: center; gap: 8px; width: max-content; padding: 0 14px; height: 34px; border-radius: 10px; font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #05060a; background: linear-gradient(100deg, #5ee7ff, #7c8cff 55%, #c084fc); box-shadow: 0 10px 30px -10px rgba(94,231,255,.7), inset 0 1px 0 rgba(255,255,255,.5); transform: rotate(-2deg); }
.stamp i { width: 8px; height: 8px; border-radius: 50%; background: #05060a; box-shadow: 0 0 0 3px rgba(5,6,10,.22); }
.stamp.sm { position: absolute; z-index: 3; inset-inline-end: 10px; top: 10px; height: 24px; padding: 0 9px; font-size: 10px; letter-spacing: .12em; transform: rotate(-3deg); }
.stamp.sm i { width: 6px; height: 6px; }
.hero-stamp { height: 42px; font-size: 15px; margin-bottom: 14px; animation: stamp-in .9s var(--ease-out) both; }
@keyframes stamp-in { from { transform: rotate(-9deg) scale(1.7); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }
.wtile .stamp.sm { top: 14px; inset-inline-end: 14px; }
.tag.offline { background: rgba(46,230,166,.14); color: #a7f3d0; border-color: rgba(46,230,166,.35); gap: 6px; }
.tag.online { background: rgba(94,231,255,.14); color: #bae6fd; border-color: rgba(94,231,255,.35); gap: 6px; }
.tag.offline svg, .tag.online svg, .tag.cloud svg, .chip-offline svg { width: 14px; height: 14px; flex: none; }
.tag.eta { background: rgba(255,179,92,.14); color: #ffd8a8; border-color: rgba(255,179,92,.38); }
.tag.model { background: rgba(167,139,250,.14); color: #ddd6fe; border-color: rgba(167,139,250,.38); }
.tag.cloud { background: linear-gradient(100deg, rgba(94,231,255,.22), rgba(139,92,246,.28)); color: #e0f2fe; border-color: rgba(94,231,255,.4); gap: 6px; }
.tag.sm { height: 22px; padding: 0 8px; font-size: 11px; }
.gcard-price { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wtile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips li.chip-offline { display: inline-flex; align-items: center; gap: 6px; color: #a7f3d0; border-color: rgba(46,230,166,.35); background: rgba(46,230,166,.1); }
.hero-price .tag.offline, .hero-price .tag.eta, .hero-price .tag.model { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* roadmap timeline */
.road { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 1fr); gap: 14px; margin: 0 0 22px; padding: 22px 2px 20px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.road::-webkit-scrollbar { display: none; }
.road::before { content: ''; position: absolute; top: 10px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--c1), var(--c2), var(--pink), var(--c3)); opacity: .5; }
.road-m { position: relative; scroll-snap-align: start; padding: 16px 14px 14px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--line); }
.road-m::before { content: ''; position: absolute; top: -18px; inset-inline-start: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px var(--bg), 0 0 18px rgba(124,140,255,.9); }
.road-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.road-head b { font-size: 17px; letter-spacing: -.02em; }
.road-head small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.road-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.road-game { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid transparent; transition: background var(--t), border-color var(--t), transform var(--t) var(--ease); }
.road-game:hover { background: rgba(255,255,255,.07); border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-2px); }
.road-cover, picture.road-cover img { width: 40px; height: 56px; object-fit: cover; border-radius: 7px; flex: none; box-shadow: 0 6px 16px -6px rgba(0,0,0,.8); }
picture.road-cover { display: block; flex: none; }
.road-game > span { display: grid; gap: 2px; min-width: 0; }
.road-game b { font-size: 13.5px; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.road-game small { font-size: 11px; color: color-mix(in srgb, var(--accent) 70%, #fff); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.road-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 26px; }
.road-step { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.road-step > svg { width: 22px; height: 22px; flex: none; color: var(--c1); margin-top: 2px; }
.road-step b { display: block; font-size: 15px; }
.road-step small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.4; }
@media (max-width: 720px) { .road-how { grid-template-columns: 1fr; } .road { grid-auto-columns: 80%; } }
/* Zodita Cloud: the home band */
.cloud-band { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: clamp(26px, 4vw, 48px); border-radius: var(--r-2xl); overflow: hidden; isolation: isolate; background: radial-gradient(900px 500px at 0% 0%, rgba(94,231,255,.22), transparent 60%), radial-gradient(800px 500px at 100% 100%, rgba(139,92,246,.32), transparent 60%), var(--bg-3); border: 1px solid var(--line-2); box-shadow: var(--e3); }
.cloud-band::before { content: ''; position: absolute; inset: -40%; z-index: -1; background: conic-gradient(from 0deg, transparent, rgba(94,231,255,.09), transparent 30%, rgba(244,114,182,.09), transparent 60%); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cloud-copy .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.cloud-copy .eyebrow svg, .cloud-hero .eyebrow svg, .studio-hero .eyebrow svg { width: 18px; height: 18px; }
.cloud-copy h2 { font-size: var(--fs-3xl); margin: 10px 0 12px; }
.cloud-copy > p { color: var(--soft); font-size: 16px; }
.cloud-support { padding: 12px 14px; border-radius: var(--r-md); background: rgba(255,179,92,.1); border: 1px solid rgba(255,179,92,.3); color: #ffe4c4; }
.cloud-support b { color: #ffd27a; }
.cloud-copy .cta-row .btn svg, .vote-row .btn svg { width: 18px; height: 18px; }
.cloud-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cloud-card { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: var(--r-lg); background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color var(--t); }
.cloud-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--accent) 60%, transparent); }
.cloud-cover, picture.cloud-cover img { width: 84px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; flex: none; }
picture.cloud-cover { display: block; flex: none; }
.cloud-meta { display: grid; gap: 4px; min-width: 0; }
.cloud-meta b { font-size: 18px; line-height: 1.15; letter-spacing: -.02em; }
.cloud-meta small { color: var(--muted); font-size: 13px; }
.cloud-meta .tag { width: max-content; height: 22px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 900px) { .cloud-band { grid-template-columns: 1fr; } }
/* Zodita Cloud: the page */
.cloud-hero .ghero-copy .lead, .studio-hero .ghero-copy .lead { max-width: 60ch; }
.cloud-hero .cloud-support { max-width: 60ch; margin-top: 10px; }
.cloud-hero .chips a { color: inherit; }
.cloud-grid { display: grid; gap: 26px; }
.ccard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r-2xl); overflow: hidden; background: var(--bg-3); border: 1px solid var(--line); box-shadow: var(--e2); scroll-margin-top: 90px; }
.ccard:target { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent), var(--e2); }
.ccard-media { position: relative; min-height: 340px; }
.ccard-img, .ccard-media picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ccard-media picture { display: contents; }
.ccard-media .tag { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; }
.ccard-no { position: absolute; bottom: 6px; inset-inline-end: 16px; font-size: 76px; font-weight: 900; letter-spacing: -.05em; color: rgba(255,255,255,.2); line-height: 1; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.ccard-body { padding: clamp(20px, 3vw, 36px); display: grid; gap: 10px; align-content: start; }
.ccard-body h3 { font-size: var(--fs-2xl); letter-spacing: -.03em; }
.ccard-body .tagline { color: color-mix(in srgb, var(--accent) 60%, #fff); font-weight: 650; margin: 0; }
.ccard-body > p { margin: 0; color: var(--soft); }
.ccard-body .story-text { color: var(--muted); font-size: 14.5px; }
.ccard-body .story-text p { margin: 0 0 8px; }
.vote-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; margin-top: 6px; }
.vote-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.vote-bar i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--accent), var(--c1)); border-radius: inherit; transition: width 1s var(--ease-out); }
.vote-row b { white-space: nowrap; font-size: 14px; }
.ccard .shot-strip { margin-top: 8px; }
@media (max-width: 860px) { .ccard { grid-template-columns: 1fr; } .ccard-media { min-height: 220px; } .vote-row { grid-template-columns: 1fr auto; } .vote-row form { grid-column: 1 / -1; } }
/* Zodita Studio */
.studio-band { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--r-xl); background: linear-gradient(100deg, rgba(255,179,92,.12), rgba(244,114,182,.1) 60%, rgba(139,92,246,.12)); border: 1px solid rgba(255,179,92,.3); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.studio-band:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -24px rgba(255,179,92,.6); }
.studio-band > svg { width: 28px; height: 28px; flex: none; color: var(--c3); }
.studio-band > span { display: grid; gap: 2px; }
.studio-band b { font-size: 16px; }
.studio-band small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #ffd8a8; font-weight: 700; }
.studio-band small svg { width: 14px; height: 14px; }
.studio-home { margin: 6px auto 10px; }
.studio-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sfact { padding: 24px; border-radius: var(--r-xl); background: var(--panel); border: 1px solid var(--line); }
.sfact > b { display: block; margin: 10px 0 8px; font-size: clamp(24px, 2.6vw, 36px); font-weight: 850; letter-spacing: -.04em; line-height: 1.08; }
.sfact p { margin: 0; color: var(--soft); font-size: 15px; }
.studio-mail { display: inline-block; margin: 10px 0 8px; font-size: clamp(19px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; color: var(--c3); word-break: break-all; }
@media (max-width: 860px) { .studio-facts { grid-template-columns: 1fr; } }
/* r15b: on poster cards the stamp sits under the corner badge instead of fighting it for the top row */
.gcard .stamp.sm { top: 44px; inset-inline-start: 10px; inset-inline-end: auto; transform: rotate(-3deg); }
.gcard .gcard-media:not(:has(.badge)) .stamp.sm { top: 10px; }
.hero-price { row-gap: 8px; }
@media (max-width: 720px) { .hero-stamp { height: 34px; font-size: 12.5px; } .hero-price .tag { height: 26px; font-size: 12px; } }
/* 10-09 showcase site (supporters): hero without game art, numbers, what is built, support */
.show-hero { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 124px) 0 clamp(40px, 6vw, 80px); }
.show-glow { position: absolute; inset: -10% -10% auto; height: 120%; pointer-events: none; background: radial-gradient(55% 50% at 18% 30%, rgba(94,231,255,.17), transparent 70%), radial-gradient(50% 45% at 82% 18%, rgba(139,92,246,.22), transparent 70%), radial-gradient(45% 40% at 62% 85%, rgba(255,179,92,.13), transparent 70%); }
.ghero-art .show-glow { inset: 0; height: 100%; }
.show-hero-in { position: relative; }
.show-hero-in > * { max-width: 880px; }
.show-hero h1 { font-size: clamp(40px, 6.4vw, 80px); line-height: 1.02; letter-spacing: -.045em; margin: 14px 0 18px; }
.show-hero .lead { max-width: 700px; }
.show-hero .eyebrow { display: flex; }
.show-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); font-size: 13px; color: var(--soft); margin-bottom: 18px; }
.show-pill svg { width: 14px; height: 14px; color: var(--c3); flex: none; }
.show-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.show-stat { padding: 22px 24px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.show-stat b { display: block; font-size: clamp(28px, 3.2vw, 40px); font-weight: 850; letter-spacing: -.04em; line-height: 1.12; margin-bottom: 6px; }
.show-stat span { color: var(--soft); font-size: 15px; }
.show-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.show-support { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; padding: clamp(26px, 4vw, 48px); border-radius: var(--r-xl); border: 1px solid var(--line-2); background: linear-gradient(135deg, rgba(94,231,255,.09), rgba(139,92,246,.12) 50%, rgba(255,179,92,.09)); }
.show-support h2 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.03em; margin: 10px 0 12px; }
.show-support p { color: var(--soft); margin: 0; }
.show-mail { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
@media (max-width: 860px) { .show-stats, .show-grid { grid-template-columns: 1fr 1fr; } .show-support { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .show-grid { grid-template-columns: 1fr; } .show-stat { padding: 18px; } .show-stat span { font-size: 14px; } }
/* 10-09 showcase: near-release games with Add free */
.early-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 18px; }
.early-card { display: grid; gap: 10px; align-content: start; }
.early-card .gcard-media { background: radial-gradient(120% 90% at 30% 10%, color-mix(in srgb, var(--accent) 45%, transparent), var(--bg-3)); }
.early-title { font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.early-eta { display: flex; align-items: center; gap: 5px; color: var(--soft); font-size: 12.5px; }
.early-eta svg { width: 13px; height: 13px; flex: none; }
.early-card form { margin: 0; }
.early-done { pointer-events: none; color: var(--ok); }
.early-done svg { color: var(--ok); }
.show-verify { padding: 22px; margin-bottom: 32px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-2); }
.show-verify h2 { font-size: 19px; margin-bottom: 6px; }
.show-out { margin-top: 36px; }
@media (max-width: 560px) { .early-grid { grid-template-columns: 1fr 1fr; gap: 16px 12px; } .early-title { font-size: 14.5px; } }

/* zoditaview-2 faq */
#faq .faq { margin-top: 8px; }

/* 10-09 launch banner (Skyrim + MDW release, free demo offer with countdown) */
.launch-wrap { padding-top: 18px; }
.launch { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: center; padding: clamp(18px, 3vw, 30px); border-radius: 22px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(139,92,246,.30), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(236,72,153,.22), transparent 60%), rgba(255,255,255,.03);
  border: 1px solid rgba(167,139,250,.35); box-shadow: 0 20px 60px -30px rgba(139,92,246,.6); overflow: hidden; }
.launch.compact { grid-template-columns: 1fr; padding: 14px 16px; margin: 6px 0 16px; border-radius: 16px; }
.launch h2 { margin: 8px 0 6px; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.2; }
.launch.compact h2 { font-size: 17px; margin: 6px 0 4px; }
.launch-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.launch-pill svg, .launch-when svg { width: 16px; height: 16px; }
.launch-when { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-weight: 600; opacity: .95; }
.launch-offer { margin: 0 0 12px; opacity: .9; }
.launch.compact .launch-when, .launch.compact .launch-offer { font-size: 13.5px; margin-bottom: 6px; }
.countdown { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; }
.cd-label { width: 100%; font-size: 13px; opacity: .8; }
.cd-u { display: grid; justify-items: center; min-width: 64px; padding: 8px 6px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); }
.cd-u b { font-size: clamp(22px, 3.2vw, 32px); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cd-u small { font-size: 11.5px; opacity: .75; }
.launch.compact .cd-u { min-width: 50px; padding: 6px 4px; } .launch.compact .cd-u b { font-size: 19px; }
.countdown.done .cd-u b { opacity: .5; }
.launch-covers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.launch-cover { display: grid; gap: 6px; } .launch-cover b { font-size: 13.5px; line-height: 1.3; }
.launch-img, .launch-cover img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; display: block; }
.launch-mine { margin: 10px 0 26px; }
.btn.google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600; }
.btn.google:hover { background: #f4f6fb; }
.g-mark { flex: none; }
.or { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 13px; opacity: .7; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .3; }
@media (max-width: 760px) { .launch { grid-template-columns: 1fr; } .launch-covers { order: -1; } .cd-u { min-width: 56px; } }

/* ---------- 10-11 owner review: key-art hero, poster marquee, genre tiles, roadmap grid, safety ---------- */
.shero { min-height: min(78vh, 760px); display: grid; align-items: end; padding-top: clamp(120px, 18vw, 220px); }
.shero-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.shero-slide { position: absolute; inset: 0; opacity: 0; animation: shero-fade 32s linear infinite; animation-delay: calc(var(--i) * -8s - 2s); }
.shero-slide:first-child { opacity: 1; }
.shero-img, .shero-slide picture, .shero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shero-slide img { animation: hero-zoom 16s ease-in-out infinite alternate; }
.shero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,10,.55) 0%, rgba(5,6,10,.25) 35%, rgba(5,6,10,.78) 70%, var(--bg) 100%), linear-gradient(90deg, rgba(5,6,10,.7), rgba(5,6,10,.15) 60%); }
@keyframes shero-fade { 0% { opacity: 0; } 6% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 100% { opacity: 0; } }
.shero .show-hero-in { padding-bottom: 8px; }
.shero h1 { text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.shero .lead { color: #e6e9f2; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.show-mq { margin-top: -8px; padding-top: 10px; }
.show-mq .mq-item { position: relative; }
.mq-tag { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(5,6,10,.82); color: var(--ok); }
[dir="rtl"] .mq-tag { left: auto; right: 8px; }
.gtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 22px 0 26px; }
.gtile { position: relative; display: block; aspect-ratio: 16 / 8; border-radius: var(--r-lg); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent, var(--c1)) 40%, transparent); background: var(--bg-3); padding: 0; cursor: pointer; color: var(--text); text-align: start; font: inherit; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .2s; isolation: isolate; }
.gtile.all { --accent: var(--c1); }
.gtile-img, .gtile picture, .gtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gtile::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--c1)) 18%, transparent), rgba(5,6,10,.25) 45%, rgba(5,6,10,.9) 100%); }
.gtile-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; display: grid; gap: 2px; padding: 14px 16px; }
.gtile-body b { font-size: 20px; font-weight: 850; letter-spacing: -.02em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.gtile-body small { font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--accent, var(--c1)) 80%, #fff); }
.gtile:hover, .gtile:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--accent, var(--c1)) 70%, transparent); }
.gtile:hover img { transform: scale(1.08); }
.gtile[aria-pressed="true"] { border-color: var(--accent, var(--c1)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, var(--c1)) 60%, transparent), 0 24px 50px -24px color-mix(in srgb, var(--accent, var(--c1)) 70%, transparent); }
.road-when, .road-free { position: absolute; top: 10px; z-index: 2; padding: 4px 9px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(5,6,10,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.road-when { inset-inline-start: 10px; color: var(--c3); }
.road-free { inset-inline-end: 10px; color: var(--ok); }
.road-grid .early-card[hidden] { display: none; }
.road-none { padding: 18px 0; }
.safe-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 0; border-radius: var(--r-2xl); border: 1px solid var(--line-2); overflow: hidden; background: linear-gradient(135deg, rgba(74,222,128,.08), rgba(94,231,255,.06) 50%, rgba(139,92,246,.1)); }
.safe-art { position: relative; min-height: 260px; }
.safe-img, .safe-art picture, .safe-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.safe-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--bg-2) 100%), linear-gradient(0deg, rgba(5,6,10,.5), transparent 50%); }
[dir="rtl"] .safe-art::after { background: linear-gradient(270deg, transparent 55%, var(--bg-2) 100%), linear-gradient(0deg, rgba(5,6,10,.5), transparent 50%); }
.safe-in { padding: clamp(24px, 4vw, 44px); }
.safe-in .sec-head { margin-bottom: 18px; }
.safe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.safe-card { padding: 18px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.safe-card .pillar-ic { color: var(--ok); }
.safe-card h3 { font-size: 16px; margin: 10px 0 6px; }
.safe-card p { color: var(--muted); font-size: 14px; margin: 0; }
.safe-hash { display: block; margin-top: 10px; color: var(--soft); font-size: 12px; }
.safe-hash code { font-size: 12px; }
.safe-head { position: relative; overflow: hidden; border-radius: var(--r-2xl); min-height: 300px; display: grid; align-items: end; padding: 40px clamp(20px, 4vw, 44px) !important; }
.safe-head-art { position: absolute; inset: 0; }
.safe-head-in { position: relative; max-width: 760px; }
.safe-h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 36px 0 10px; letter-spacing: -.02em; }
.safe-steps { padding-inline-start: 22px; color: var(--soft); display: grid; gap: 10px; margin: 12px 0 24px; }
.safe-facts { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; margin: 0 0 20px; padding: 20px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-2); }
.safe-facts dt { color: var(--muted); } .safe-facts dd { margin: 0; overflow-wrap: anywhere; }
.safe-facts code { font-size: 13px; }
@media (max-width: 860px) { .safe-wrap { grid-template-columns: 1fr; } .safe-art { min-height: 200px; } .safe-art::after { background: linear-gradient(0deg, var(--bg-2), transparent 60%); } [dir="rtl"] .safe-art::after { background: linear-gradient(0deg, var(--bg-2), transparent 60%); } .safe-grid { grid-template-columns: 1fr; } .safe-facts { grid-template-columns: 1fr; gap: 4px 0; } .safe-facts dt { margin-top: 8px; } }
@media (max-width: 560px) { .gtiles { grid-template-columns: 1fr 1fr; gap: 10px; } .gtile-body b { font-size: 16px; } .gtile-body { padding: 10px 12px; } .shero { min-height: min(70vh, 620px); padding-top: 110px; } }
@media (prefers-reduced-motion: reduce) { .shero-slide { animation: none; } .shero-slide:not(:first-child) { display: none; } .shero-slide img { animation: none; } }

/* ---------- 10-11 ZoditaSite1: the owner's ten ideas (video hero, previews, live bar, tags, game pages, motion, tones, badge, icon, news) ---------- */
@font-face { font-family: 'Oswald'; src: url('/css/Oswald-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('/css/Oswald-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
:root { --gold: #e2b44a; --gold-2: #ffd98a; --gold-deep: #9a6a14; --grad-gold: linear-gradient(100deg, #ffe29a 0%, #e2b44a 45%, #c48a2a 100%); }
/* the showcase: condensed display type for titles only (Oswald), gold accents; body copy stays Inter / Vazirmatn */
.show-home h1, .show-home h2, .show-home .show-stat b, .show-home .gtile-body b, .show-home .ncard-h, .show-home .ebadge h2 { font-family: 'Oswald', 'Inter', 'Inter Fallback', sans-serif; font-weight: 600; letter-spacing: .005em; text-transform: uppercase; line-height: .98; }
.show-home h2 { letter-spacing: .01em; }
:root:lang(fa) .show-home h1, :root:lang(fa) .show-home h2, :root:lang(fa) .show-home .show-stat b, :root:lang(fa) .show-home .gtile-body b, :root:lang(fa) .show-home .ncard-h, :root:lang(fa) .show-home .ebadge h2,
:root:lang(ar) .show-home h1, :root:lang(ar) .show-home h2, :root:lang(ar) .show-home .show-stat b, :root:lang(ar) .show-home .gtile-body b, :root:lang(ar) .show-home .ncard-h, :root:lang(ar) .show-home .ebadge h2,
:root:lang(ja) .show-home h1, :root:lang(ja) .show-home h2, :root:lang(ja) .show-home .show-stat b, :root:lang(ja) .show-home .gtile-body b, :root:lang(ja) .show-home .ncard-h, :root:lang(ja) .show-home .ebadge h2,
:root:lang(ko) .show-home h1, :root:lang(ko) .show-home h2, :root:lang(ko) .show-home .show-stat b, :root:lang(ko) .show-home .gtile-body b, :root:lang(ko) .show-home .ncard-h, :root:lang(ko) .show-home .ebadge h2,
:root:lang(zh) .show-home h1, :root:lang(zh) .show-home h2, :root:lang(zh) .show-home .show-stat b, :root:lang(zh) .show-home .gtile-body b, :root:lang(zh) .show-home .ncard-h, :root:lang(zh) .show-home .ebadge h2 { font-family: inherit; text-transform: none; letter-spacing: -.02em; line-height: 1.1; }
.show-home .show-hero h1 { font-size: clamp(46px, 7.4vw, 96px); }
.show-home .grad { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; }
.show-home .eyebrow { color: var(--gold); }
.show-home .eyebrow svg { color: var(--gold); }
.show-home .show-pill svg, .show-home .road-when { color: var(--gold); }
.show-home .btn:not(.ghost):not(.google) { background: var(--grad-gold); color: #120d02; border-color: transparent; box-shadow: 0 10px 30px -12px rgba(226,180,74,.6); }
.show-home .btn:not(.ghost):not(.google):hover { filter: brightness(1.06); box-shadow: 0 14px 34px -12px rgba(226,180,74,.75); }
.show-home .launch { border-color: rgba(226,180,74,.35); background: radial-gradient(120% 140% at 0% 0%, rgba(226,180,74,.22), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(139,92,246,.18), transparent 60%), rgba(255,255,255,.03); box-shadow: 0 20px 60px -30px rgba(226,180,74,.5); }
.show-home .launch-pill { background: var(--grad-gold); color: #120d02; }
.show-home .show-stat b.grad { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; }
.show-home .show-support { background: linear-gradient(135deg, rgba(226,180,74,.12), rgba(139,92,246,.1) 55%, rgba(94,231,255,.06)); border-color: rgba(226,180,74,.25); }
.show-home .gtile.all { --accent: var(--gold); }
.show-home .mq-item:nth-child(odd) { transform: translateY(14px) rotate(-1.2deg); } .show-home .mq-item:nth-child(even) { transform: rotate(1deg); }
/* 1) hero: Ken Burns drift in four directions; a slide with a clip plays it over the poster */
.shero-slide img { animation: none; }
.shero-slide.kb0 img { animation: kb0 18s ease-in-out infinite alternate; } .shero-slide.kb1 img { animation: kb1 20s ease-in-out infinite alternate; }
.shero-slide.kb2 img { animation: kb2 19s ease-in-out infinite alternate; } .shero-slide.kb3 img { animation: kb3 21s ease-in-out infinite alternate; }
@keyframes kb0 { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.16) translate(-2.5%, -1.5%); } }
@keyframes kb1 { from { transform: scale(1.12) translate(2%, 1%); } to { transform: scale(1.02) translate(0, 0); } }
@keyframes kb2 { from { transform: scale(1.05) translate(-1.5%, 1.5%); } to { transform: scale(1.18) translate(1.5%, -1%); } }
@keyframes kb3 { from { transform: scale(1.15) translate(0, -2%); } to { transform: scale(1.04) translate(-1%, 1%); } }
.shero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.shero-slide.has-clip .shero-video.playing { opacity: 1; }
.shero .show-hero-in { padding-bottom: 16px; }
/* 3) the live bar */
.live-bar { position: relative; z-index: 2; border-block: 1px solid var(--line); background: rgba(10,12,19,.92); margin-top: -1px; }
.live-in { display: flex; align-items: center; gap: 14px; height: 44px; overflow: hidden; }
.live-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: live-pulse 2.2s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.live-label { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.live-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; min-width: 0; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.live-item { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 13.5px; color: var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.live-item svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.live-item.swap { animation: live-swap .5s var(--ease-out); }
@keyframes live-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .live-list { animation: live-mq 28s linear infinite; mask-image: none; -webkit-mask-image: none; overflow: visible; }
  .live-bar:hover .live-list { animation-play-state: paused; } .live-label { display: none; } }
@keyframes live-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .live-list { animation-name: live-mq-rtl; }
@keyframes live-mq-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .live-list { animation: none; } .live-dot { animation: none; } }
/* 4) tags: one fixed colour per kind everywhere */
.ztags { display: flex; flex-wrap: wrap; gap: 6px; }
.ztags.top { position: absolute; top: 10px; inset-inline: 10px; z-index: 2; pointer-events: none; }
.ztags.gtop { margin-bottom: 14px; } .ztags.gtop .ztag { height: 28px; font-size: 12px; }
.ztag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(5,6,10,.86); border: 1px solid rgba(255,255,255,.14); white-space: nowrap; }
.ztag svg { width: 13px; height: 13px; }
.ztag.mc { background: #2e9f3e; border-color: #43c457; color: #fff; padding-inline-start: 6px; } .ztag.mc i { font-style: normal; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #fff; color: #1b6a27; font-size: 11px; font-weight: 900; }
.ztag.size { background: #1f3a73; border-color: #3a62b8; color: #d6e4ff; }
.ztag.offline { background: #0f5a57; border-color: #1fa39d; color: #c8fff9; }
.ztag.online { background: #4b2b7a; border-color: #8b5cf6; color: #e9ddff; }
.ztag.free { background: #7a3d05; border-color: var(--gold); color: #ffe6a8; }
.ztag.when { background: rgba(5,6,10,.78); border-color: rgba(226,180,74,.5); color: var(--gold-2); }
.ztag.cat { background: rgba(226,180,74,.14); border-color: rgba(226,180,74,.45); color: var(--gold-2); }
.ztag.plat { background: #26334f; border-color: #4a6aa8; color: #d6e4ff; } .ztag.plat.pc { background: #2c2a6b; border-color: #6a66d8; } .ztag.plat.console { background: #5a1e42; border-color: #c2458f; }
.road-card .road-when, .road-card .road-free { display: none; }
/* 2) card previews: hovering (or touching) a poster cycles its real screenshots */
.gcard-media.previewing .gcard-img { opacity: 0; }
.gcard-media .pv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; z-index: 0; }
.gcard-media .pv.show { opacity: 1; }
.gcard-media .pv-dots { position: absolute; bottom: 10px; inset-inline-end: 10px; z-index: 3; display: flex; gap: 4px; opacity: 0; transition: opacity .3s; }
.gcard-media.previewing .pv-dots { opacity: 1; }
.pv-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); } .pv-dots i.on { background: var(--gold); }
a.gcard-media { display: block; color: inherit; }
.early-card a.gcard-media:hover, .early-card a.gcard-media:focus-visible { transform: translateY(-6px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent), 0 34px 70px -22px color-mix(in srgb, var(--tone, var(--accent)) 70%, transparent); }
.early-card .gcard-media { box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px color-mix(in srgb, var(--tone, var(--accent)) 60%, transparent); }
/* 6) motion: cards arrive one after another */
.js .reveal:not(.in) :is(.early-card, .ncard, .gtile) { opacity: 0; }
.js .reveal.in :is(.early-card, .ncard, .gtile) { animation: card-in .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
/* 10) news as full-width picture cards */
.ncards { display: grid; gap: 18px; }
.ncards.list { margin-top: 18px; }
.ncard { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); color: inherit; transition: transform .45s var(--ease-out), border-color var(--t), box-shadow .45s var(--ease-out); isolation: isolate; }
.ncard[hidden] { display: none; }
.ncard:hover, .ncard:focus-visible { transform: translateY(-5px); border-color: rgba(226,180,74,.45); box-shadow: 0 30px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(226,180,74,.15); }
.ncard-media { position: relative; min-height: 240px; overflow: hidden; background: var(--bg-3); }
.ncard-img, .ncard-media picture, .ncard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.ncard:hover .ncard-media img { transform: scale(1.06); }
.ncard-body { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 3vw, 30px); }
.ncard-top { display: flex; flex-wrap: wrap; gap: 6px; }
.ncard-h { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -.02em; }
.ncard-dek { color: var(--muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ncard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--dim); }
.ncard-src { display: inline-flex; align-items: center; gap: 5px; color: var(--soft); } .ncard-src svg { width: 13px; height: 13px; color: var(--gold); }
.ncard.big { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); border-color: rgba(226,180,74,.35); }
.ncard.big .ncard-media { min-height: 380px; }
.ncard.big .ncard-body { justify-content: center; }
.ncard.big .ncard-h { font-size: clamp(28px, 3.6vw, 48px); }
.ncard.big .ncard-dek { color: var(--soft); font-size: 16px; }
@media (max-width: 760px) { .ncard, .ncard.big { grid-template-columns: 1fr; } .ncard-media, .ncard.big .ncard-media { min-height: 0; aspect-ratio: 16 / 9; } }
/* 5 + 7) the game page: the key art's own tone colours the page */
.gpage-body { background: radial-gradient(900px 500px at 70% -10%, color-mix(in srgb, var(--tone, #8b5cf6) 22%, transparent), transparent 70%), var(--bg); }
.gpage-hero { position: relative; overflow: hidden; min-height: min(78vh, 720px); display: grid; align-items: end; padding: clamp(110px, 16vw, 200px) 0 clamp(28px, 4vw, 48px); }
.gpage-hero .shero-scrim { background: linear-gradient(180deg, rgba(5,6,10,.5) 0%, rgba(5,6,10,.2) 35%, color-mix(in srgb, var(--tone) 18%, rgba(5,6,10,.85)) 75%, var(--bg) 100%), linear-gradient(90deg, rgba(5,6,10,.7), rgba(5,6,10,.1) 60%); }
.gpage-in { position: relative; }
.gpage-in h1 { font-size: clamp(42px, 7vw, 92px); text-shadow: 0 4px 30px rgba(0,0,0,.6); margin: 6px 0 10px; max-width: 900px; }
.gpage-in .tagline { font-size: clamp(17px, 2vw, 22px); color: var(--gold-2); margin: 0 0 10px; max-width: 760px; }
.gpage-in .lead { max-width: 720px; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.land-five { display: inline-flex; gap: 8px; align-items: center; color: var(--gold-2); font-weight: 600; margin: 4px 0 14px; max-width: 720px; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.land-five svg { flex: none; width: 18px; height: 18px; }
.gpage-in .crumbs ol { color: var(--soft); }
.gpage { background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 10%, transparent), transparent 40%); padding-bottom: 72px; }
.gpage .section { padding-top: clamp(40px, 6vw, 72px); }
.shot-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 14px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.shot { flex: 0 0 min(86vw, 640px); scroll-snap-align: start; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-3); box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px color-mix(in srgb, var(--tone) 60%, transparent); }
.shot img, .shot-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .shot:hover img { transform: scale(1.05); }
.gvideo { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: #000; border: 1px solid var(--line); }
.gpage-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: 32px; align-items: start; }
.gpage-main h2 { font-size: var(--fs-2xl); margin-bottom: 14px; } .gpage-main p { color: var(--soft); font-size: 16.5px; line-height: 1.65; }
.gfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 22px 0 0; }
.gfacts div { padding: 12px 14px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line); } .gfacts dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 750; } .gfacts dd { margin: 4px 0 0; font-size: 14.5px; font-weight: 600; }
.gpage-side { display: grid; gap: 14px; position: sticky; top: calc(var(--nav-h, 64px) + 16px); }
.gspecs, .gmodel { padding: 20px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--line)); }
.specs-table { width: 100%; border-collapse: collapse; margin: 6px 0 8px; } .specs-table th { text-align: start; font-weight: 600; color: var(--muted); font-size: 13.5px; padding: 8px 0; border-bottom: 1px solid var(--line); } .specs-table td { text-align: end; font-weight: 700; padding: 8px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.gmodel p { margin: 4px 0 0; font-weight: 600; } .gmodel p.small { font-weight: 400; }
.gsticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: none; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(8,9,14,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid rgba(226,180,74,.3); transform: translateY(110%); transition: transform .35s var(--ease-out); }
.gsticky.on { transform: none; }
.gsticky-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .gsticky-id b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsticky-thumb, .gsticky picture img { width: 36px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.gsticky form { margin: 0; } .gsticky .btn { white-space: nowrap; }
@media (max-width: 860px) { .gpage-grid { grid-template-columns: 1fr; } .gpage-side { position: static; } .gsticky { display: flex; } .gpage { padding-bottom: 96px; } .gpage-hero { min-height: min(72vh, 640px); } }
/* 8) the Early player badge */
.ebadge { display: flex; align-items: center; gap: 20px; padding: 20px 22px; margin: 0 0 28px; border-radius: var(--r-xl); border: 1px solid rgba(226,180,74,.4); background: radial-gradient(120% 140% at 0% 0%, rgba(226,180,74,.16), transparent 60%), var(--panel); }
.ebadge-svg { width: 84px; height: 84px; flex: none; filter: drop-shadow(0 10px 24px rgba(226,180,74,.35)); }
.ebadge h2 { font-size: 22px; margin: 2px 0 6px; } .ebadge p { margin: 0; color: var(--soft); }
@media (max-width: 560px) { .ebadge { flex-direction: column; align-items: flex-start; gap: 12px; } .ebadge-svg { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .shero-slide img { animation: none !important; } .shero-video { display: none; } .gcard-media .pv { transition: none; } }

/* performance (Lighthouse mobile): below-the-fold sections render lazily; the continuous animations start only after load */
.show-home main > .section:not(:first-of-type), .show-home main > #news, .gpage > .section { content-visibility: auto; contain-intrinsic-size: auto 700px; }
.show-home:not(.anim) .shero-slide, .show-home:not(.anim) .shero-slide img, .show-home:not(.anim) .mq-track, .show-home:not(.anim) .live-list, .show-home:not(.anim) .live-dot { animation: none; }
.show-home:not(.anim) .shero-slide:first-child { opacity: 1; }
@media (max-width: 560px) { .ztags.top .ztag.offline { display: none; } }

/* 10-16 commerce: discount code box, discount row, sale / pre-order tags */
.coupon { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; flex-wrap: wrap; }
.coupon label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; font-size: 13px; color: var(--muted); }
.coupon input { font: inherit; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; letter-spacing: .08em; text-transform: uppercase; }
.coupon.applied { align-items: center; justify-content: space-between; border-style: solid; border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.06); }
.coupon.applied code { padding: 1px 7px; border-radius: 6px; background: rgba(255,255,255,.08); letter-spacing: .08em; }
.sum-row.discount { color: #bbf7d0; }
.tag.preorder { background: rgba(167,139,250,.14); color: #ddd6fe; border-color: rgba(167,139,250,.4); }
.tag.sale { background: rgba(56,189,248,.14); color: #bae6fd; border-color: rgba(56,189,248,.4); }
.ed-chip.preorder { background: rgba(167,139,250,.16); color: #ddd6fe; }
.status.s-preorder { background: rgba(167,139,250,.16); color: #ddd6fe; }
.preorder-note, .preorder-hint { display: flex; gap: 8px; align-items: flex-start; }