/* GameAccountValue — Cyber-Glass design system (2026-09). Built from parts; see DESIGN.md.
   Self-hosted Inter: the CSP only allows font-src 'self'. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('./fonts/inter-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('./fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('./fonts/inter-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('./fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('./fonts/inter-latin.woff2') format('woff2'); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================================
   GameAccountValue — "Dark Cyber-Glass" skin (2026 gaming UI)
   Loaded after style.css + the page's inline <style>. Copy and
   script hooks unchanged; only look and placement.
   ============================================================ */
:root {
  --bg: #0A0E17; --glass: rgba(15,23,42,.65); --glass-hi: rgba(30,41,59,.72);
  --line: rgba(255,255,255,.12); --line-hi: rgba(34,211,238,.45);
  --white: #FFFFFF; --text: #F1F5F9; --body: #CBD5E1; --muted: #A5B4C8;
  --cyan: #22D3EE; --cyan-d: #06B6D4; --blue: #3B82F6; --em: #10B981; --em-l: #34D399; --indigo: #6366F1;
  --gold: var(--cyan); --emerald: var(--em); --border: var(--line); --border-strong: var(--line-hi);
  --card: var(--glass); --card-solid: #111827;
  --r: 16px; --r-xl: 12px;
  --body-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: all .2s ease-out;
}
html { background: var(--bg); scroll-behavior: smooth; }
html body { font-family: var(--body-font); color: var(--body); background: var(--bg); font-size: 17px; line-height: 1.65; }
/* fixed glow blobs */
html body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 8% 12%, rgba(99,102,241,.28), transparent 60%),
    radial-gradient(38vw 38vw at 95% 35%, rgba(6,182,212,.22), transparent 60%),
    radial-gradient(45vw 35vw at 50% 110%, rgba(99,102,241,.18), transparent 60%); }
body[class*="theme-"] { --gold: var(--cyan); --border-strong: var(--line-hi); }
::selection { background: var(--cyan-d); color: #04121A; }

/* glass surface helper */
.glass, .value-calc, .fact-box > span, .section-nav, .resources-callout a, .g-card, .risk-box, .reported-case, details {
  background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: var(--r); transition: var(--ease);
}

/* ---------- nav ---------- */
nav { background: rgba(10,14,23,.7); border-bottom: 1px solid var(--line); padding: 14px clamp(16px,3vw,32px); }
.logo { font-family: var(--body-font); font-weight: 800; font-size: 19px; letter-spacing: -.01em; font-variation-settings: normal; }
.logo::before { background: linear-gradient(135deg, var(--cyan), var(--indigo)); clip-path: none; border-radius: 7px; box-shadow: 0 0 14px rgba(34,211,238,.5); }
html body[class] .nav-cta, .nav-cta { background: linear-gradient(135deg, var(--cyan-d), var(--blue)) !important; color: #fff !important; border-radius: var(--r-xl);
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 20px; font-weight: 700; font-size: 15px; box-shadow: none; transition: var(--ease); }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(6,182,212,.4); }
.back-btn { max-width: 1200px; padding: 0 clamp(16px,3vw,32px); margin-top: 18px; }
.back-btn a { min-height: 44px; padding: 0 18px; border-radius: var(--r-xl); border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); font-size: 15px; font-weight: 600; }
.back-btn a:hover { border-color: var(--line-hi); background: rgba(34,211,238,.08); }

/* ---------- HERO: two columns ---------- */
.g-hero { max-width: 1200px; margin: 0 auto; padding: 32px clamp(16px,3vw,32px) 12px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
.g-hero .report-hero { text-align: left; padding: 8px 0 0; margin: 0; max-width: none; }
html body .g-hero h1 { font-family: var(--body-font); font-weight: 800; font-variation-settings: normal; color: var(--white);
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -.03em; margin-bottom: 16px; }
html body .g-hero .report-hero p[style] { color: var(--body) !important; font-size: clamp(17px,1.5vw,19px) !important; margin: 0; max-width: 600px; }
.g-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 6px; }
.report-updated, .fresh-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 9px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 600; line-height: 1.35; text-align: left; transition: var(--ease); }
.report-updated { color: var(--text); background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.4); }
.report-updated::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--em-l);
  box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: g-pulse 1.8s infinite; }
@keyframes g-pulse { 70% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.fresh-badge { color: #CFFAFE; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.35); }
/* price range = the number people came for */
.g-hero .price-range { display: block; margin: 22px 0 18px; padding: 20px 22px; border-radius: var(--r);
  background: linear-gradient(135deg, rgba(6,182,212,.16), rgba(99,102,241,.14)) !important; border: 1px solid var(--line-hi) !important;
  color: var(--white) !important; font-size: clamp(22px,2.4vw,30px); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; box-shadow: 0 0 30px rgba(6,182,212,.15) !important; }
.g-hero .fact-box { max-width: none; margin: 0; padding: 0; background: none; border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; font-size: 14px; color: var(--muted); }
.g-hero .fact-box > span { padding: 14px; line-height: 1.4; }
.g-hero .fact-box > span:hover { border-color: var(--line-hi); }
.g-hero .fact-box strong { display: block; color: var(--white); font-size: 19px; font-weight: 800; margin: 2px 0; }

/* ---------- calculator card (right column) ---------- */
.g-hero .value-calc { position: sticky; top: 90px; margin: 0; max-width: none; padding: 24px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); }
.value-calc::before { display: none; }
.value-calc:hover { border-color: var(--line-hi); }
.value-calc .vc-title { font-size: 20px; font-weight: 800; color: var(--white); background: none; border: 0; padding: 0; margin-bottom: 6px; }
.value-calc .vc-subtitle { font-size: 15px; color: var(--muted); line-height: 1.55; margin-bottom: 18px; }
.value-calc .vc-gamepad { display: none; }            /* replaced by Share / Reset buttons */
.value-calc .vc-sliders { display: grid; gap: 18px; }
.value-calc .vc-field { padding: 0; margin: 0; box-shadow: none !important; }
.value-calc label, .value-calc .vc-choice-heading, .value-calc .vc-checkbox-heading { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.value-calc .vc-field-val { color: var(--cyan); font-weight: 800; font-variant-numeric: tabular-nums; }
/* custom range: glowing cyan active track via --p set by glass.js */
.value-calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; accent-color: var(--cyan); }
.value-calc input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan-d), var(--cyan) var(--p,0%), rgba(255,255,255,.12) var(--p,0%)); box-shadow: 0 0 12px rgba(34,211,238,.25); }
.value-calc input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); }
.value-calc input[type="range"]::-moz-range-progress { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--cyan-d), var(--cyan)); }
.value-calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 4px solid var(--cyan-d); box-shadow: 0 0 0 6px rgba(34,211,238,.18), 0 0 16px rgba(34,211,238,.6); transition: var(--ease); }
.value-calc input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--cyan-d); box-shadow: 0 0 16px rgba(34,211,238,.6); }
.value-calc input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
.value-calc input[type="range"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; border-radius: 99px; }
.value-calc .vc-choice-tile { border-radius: var(--r-xl); min-height: 44px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--text); font-size: 15px; transition: var(--ease); }
.value-calc .vc-choice-tiles input:checked + .vc-choice-tile { background: linear-gradient(135deg, var(--cyan-d), var(--blue)); color: #fff; border-color: transparent; box-shadow: 0 0 16px rgba(6,182,212,.4); }
.value-calc .vc-checkbox { border-radius: var(--r-xl); min-height: 48px; font-size: 15px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.value-calc .vc-checkbox input[type="checkbox"] { accent-color: var(--cyan-d); width: 20px; height: 20px; }
/* result */
.value-calc .vc-result { order: 9; margin-top: 20px; padding: 20px; border-radius: var(--r); background: rgba(2,6,23,.55); border: 1px solid var(--line); text-align: left; }
.value-calc .vc-result-value { display: block; color: var(--white); font-family: var(--body-font); font-size: clamp(34px,3.6vw,44px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; background: none; -webkit-text-fill-color: currentColor; text-shadow: 0 0 24px rgba(34,211,238,.35); font-variant-numeric: tabular-nums; }
.value-calc .vc-scale { height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); margin: 14px 0 12px; max-width: none; }
.value-calc .vc-scale-fill { border-radius: 99px; background: linear-gradient(90deg, var(--em), var(--cyan), var(--indigo)); }
.value-calc .vc-meta { justify-content: flex-start; gap: 10px; }
.value-calc .vc-tier { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: #04121A !important; background: var(--em-l) !important; border: 0 !important; }
.value-calc .vc-confidence { font-size: 14px; color: var(--body); }
.value-calc .vc-result-note { display: block; font-size: 14px; color: var(--muted); margin: 10px 0 16px; }
.g-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.value-calc .vc-share-btn, .g-reset { min-height: 48px; padding: 0 20px; border-radius: var(--r-xl); font: 700 15px var(--body-font); cursor: pointer; transition: var(--ease); display: inline-flex; align-items: center; gap: 8px; }
.value-calc .vc-share-btn { flex: 1; justify-content: center; background: linear-gradient(135deg, var(--cyan-d), var(--blue)); color: #fff; border: 0; }
.value-calc .vc-share-btn:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(6,182,212,.4); background: linear-gradient(135deg, var(--cyan-d), var(--blue)); }
.g-reset { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line); }
.g-reset:hover { transform: translateY(-2px); border-color: var(--line-hi); background: rgba(34,211,238,.08); }
.value-calc .vc-share-btn:focus-visible, .g-reset:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ---------- section tabs + guides ---------- */
.section-nav { position: sticky; top: 76px; z-index: 90; max-width: 1200px; margin: 20px auto 10px; padding: 8px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.section-nav a { min-height: 48px; padding: 0 18px; border-radius: var(--r-xl); border: 1px solid transparent; background: transparent; color: var(--text);
  font-size: 16px; font-weight: 600; box-shadow: none; transition: var(--ease); }
.section-nav a:hover, .section-nav a:focus-visible { background: rgba(34,211,238,.12); border-color: var(--line-hi); transform: translateY(-2px); box-shadow: none; }
.anchor-target { scroll-margin-top: 150px; }
.resources-callout { max-width: 1200px; padding: 6px clamp(16px,3vw,32px) 10px; margin: 0 auto 10px; display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 10px; align-items: stretch; }
.resources-label { align-self: center; font-size: 15px; font-weight: 700; color: var(--muted); }
html body[class] .resources-callout a, html body .resources-callout a { min-height: 56px; justify-content: center; text-align: center; border-radius: var(--r-xl); padding: 8px 14px;
  color: var(--text) !important; background: var(--glass) !important; border: 1px solid var(--line) !important; font-size: 15px; font-weight: 600; box-shadow: none; }
html body[class] .resources-callout a:hover { transform: translateY(-2px); border-color: var(--line-hi) !important; box-shadow: 0 0 20px rgba(6,182,212,.25); }
@media (max-width: 900px) { .resources-callout { grid-template-columns: repeat(2, 1fr); } .resources-label { grid-column: 1 / -1; } }

/* ---------- article as bento + glass cards ---------- */
.article-body { max-width: 1200px; padding: 10px clamp(16px,3vw,32px) 24px; }
.g-sec { margin: 44px 0 0; }
html body .article-body h2 { font-family: var(--body-font); font-variation-settings: normal; text-transform: none; letter-spacing: -.02em;
  color: var(--white); font-size: clamp(26px,3vw,36px); font-weight: 800; margin: 0 0 18px; padding: 0; border: 0; }
html body .article-body h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--em)); }
html body .article-body h3 { font-family: var(--body-font); font-variation-settings: normal; color: var(--white); font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; }
.article-body p, .article-body li { color: var(--body); font-size: 17px; }
.article-body strong { color: var(--white); }
.article-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.article-body li { position: relative; padding-left: 28px; }
.article-body li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--em); box-shadow: 0 0 10px rgba(16,185,129,.6); }
.g-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.g-bento { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.g-card { padding: 24px; }
.g-card:hover { border-color: var(--line-hi); box-shadow: 0 0 0 1px rgba(34,211,238,.15), 0 20px 50px -20px rgba(6,182,212,.35); transform: translateY(-2px); }
.g-card > :last-child { margin-bottom: 0; }
.g-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; color: var(--cyan);
  background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.3); }
.g-icon svg { width: 22px; height: 22px; }
.g-feature { background: linear-gradient(160deg, rgba(99,102,241,.2), var(--glass)); border-color: rgba(99,102,241,.4); }
.g-feature .g-icon { color: #A5B4FC; background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.4); }
.g-warn .g-icon { color: #FCA5A5; background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.4); }
.risk-box { background: rgba(248,113,113,.07); border-color: rgba(248,113,113,.3); padding: 16px 18px; margin: 0; }
/* table */
.tier-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; margin: 0 0 12px; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--line); }
.tier-table th, .tier-table td { border: 0; border-bottom: 1px solid var(--line); padding: 14px 14px; text-align: left; }
.tier-table tr:last-child td { border-bottom: 0; }
.tier-table th { background: rgba(255,255,255,.05); color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tier-table tr:not(:first-child):hover td { background: rgba(34,211,238,.06); }
.tier-table td:first-child { color: var(--white); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tier-table td:last-child { color: var(--body); font-weight: 500; white-space: normal; }
html body .article-body p[style*="font-size"] { font-size: 15px !important; color: var(--muted) !important; line-height: 1.6; }

/* ---------- CTA, other games, sources, footer ---------- */
.report-cta { max-width: 1200px; margin: 40px auto 10px; padding: 0 clamp(16px,3vw,32px); }
html body[class] .report-cta .btn-primary { display: flex; justify-content: center; width: 100%; min-height: 64px; border-radius: var(--r); font-size: 18px; font-weight: 800;
  background: linear-gradient(135deg, var(--cyan-d), var(--blue)) !important; color: #fff !important; box-shadow: none; transition: var(--ease); }
html body[class] .report-cta .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(6,182,212,.45); }
hr.report-divider { display: none; }
.other-games { max-width: 1200px; padding: 20px clamp(16px,3vw,32px) 30px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 16px; }
.other-games > p { flex-basis: 100%; font-size: 16px !important; color: var(--muted) !important; }
.other-games a { flex: 1 1 150px; margin: 0; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-xl);
  border: 1px solid var(--line); background: var(--glass); color: var(--text); font-size: 15px; font-weight: 600; transition: var(--ease); }
.other-games a:hover { border-color: var(--line-hi); background: rgba(34,211,238,.1); transform: translateY(-2px); }
.sources-list { max-width: 1200px; padding: 0 clamp(16px,3vw,32px) 60px; font-size: 15px; color: var(--muted); }
.sources-list a { color: var(--body); }
footer { border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
footer > div[style] { background: var(--glass) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; font-size: 14px !important; color: var(--body); }
footer a { color: var(--body); text-decoration: underline; text-underline-offset: 3px; }
footer strong[style] { color: var(--cyan) !important; }
.footer-logo { font-family: var(--body-font); font-variation-settings: normal; color: var(--white); }
.skip-link { background: var(--cyan); border-radius: 0 0 8px 0; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .g-hero { grid-template-columns: 1fr; }
  .g-hero .value-calc { position: relative; top: 0; }
  .g-bento { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .g-hero .fact-box { grid-template-columns: 1fr; }
  .section-nav { position: static; display: grid; grid-template-columns: repeat(2, 1fr); }
  .section-nav a { justify-content: center; font-size: 15px; }
  .section-nav a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .report-updated::before { animation: none; }
  * { transition: none !important; }
}

html body .value-calc .vc-title { font-family: var(--body-font); font-variation-settings: normal; text-transform: none; letter-spacing: -.01em; }

/* ============================================================
   Homepage (glass layout): cyberpunk city hero, AI scanner
   robot, calculator as the hero's right column
   ============================================================ */
.g-home { position: relative; isolation: isolate; max-width: 1240px; margin: 0 auto; min-height: min(92svh, 900px);
  padding: clamp(40px,6vw,80px) clamp(16px,3vw,32px) 80px; grid-template-columns: 1.05fr .95fr; gap: clamp(24px,4vw,56px); align-items: center; }
.g-fx { position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); overflow: hidden; pointer-events: none; }
.g-fx .g-city { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%; }
.g-fx .g-rain { position: absolute; inset: -40% 0 0; opacity: .35;
  background: repeating-linear-gradient(103deg, transparent 0 26px, rgba(165,180,252,.25) 26px 27px, transparent 27px 70px);
  background-size: 100% 180px; animation: g-rain .6s linear infinite; }
@keyframes g-rain { to { background-position: 0 180px; } }
.g-fx::before { content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(10,14,23,.92) 0%, rgba(10,14,23,.6) 40%, rgba(10,14,23,.15) 70%, rgba(10,14,23,.35) 100%); }
.g-fx::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 2; background: linear-gradient(transparent, var(--bg)); }
.g-traffic { animation: g-fly 9s linear infinite; }
@keyframes g-fly { to { transform: translateX(2300px); } }
@media (max-width: 960px) { .g-fx::before { background: linear-gradient(180deg, rgba(10,14,23,.55), rgba(10,14,23,.85) 45%, rgba(10,14,23,.92)); } }

/* left column */
.g-home .g-left { max-width: 620px; }
.g-home .hero-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 9px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: #CFFAFE; background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.4); }
.g-home .hero-badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--em-l); animation: g-pulse 1.8s infinite; }
html body .g-home h1 { font-family: var(--body-font); font-variation-settings: normal; font-weight: 800; color: var(--white);
  font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 20px; text-transform: none; }
html body .g-home h1 span { background: linear-gradient(95deg, var(--cyan), #A5B4FC 55%, var(--em-l)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--cyan); animation: none; }
html body .g-home .g-left > p { font-size: clamp(17px,1.5vw,19px); color: var(--body); line-height: 1.65; margin: 0 0 30px; max-width: 580px; }
.g-home .cta-group { justify-content: flex-start; gap: 12px; }
html body .g-home .btn-primary, html body .g-home .btn-secondary { min-height: 56px; padding: 0 26px; border-radius: var(--r-xl); font-size: 17px; font-weight: 700; transition: var(--ease); }
html body .g-home .btn-primary { background: linear-gradient(135deg, var(--cyan-d), var(--blue)); color: #fff; box-shadow: 0 8px 24px -8px rgba(6,182,212,.6); }
html body .g-home .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(6,182,212,.5); }
html body .g-home .btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line); }
html body .g-home .btn-secondary:hover { transform: translateY(-2px); border-color: var(--line-hi); background: rgba(34,211,238,.1); }
.g-home .ai-notice { text-align: left; font-size: 15px; color: var(--muted); margin-top: 18px; }

/* right column: robot scanning the calculator */
.g-home .g-right { position: relative; padding-top: 70px; }
.g-robot { position: absolute; z-index: 3; top: -34px; right: -8px; width: 170px; pointer-events: none; filter: drop-shadow(0 0 24px rgba(34,211,238,.35)); }
.g-robot svg { width: 100%; height: auto; overflow: visible; }
.g-robot .visor-sweep { animation: gav-sweep 2.6s ease-in-out infinite alternate; }
@keyframes gav-sweep { from { transform: translateX(-70px); } to { transform: translateX(70px); } }
.g-robot .eye { transform-box: fill-box; transform-origin: center; animation: gav-blink 4s infinite; }
@keyframes gav-blink { 0%,46%,50%,100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
.g-robot .ring { transform-origin: 230px 250px; animation: gav-spin 14s linear infinite; }
.g-robot .ring2 { transform-origin: 230px 250px; animation: gav-spin 22s linear infinite reverse; }
@keyframes gav-spin { to { transform: rotate(360deg); } }
/* the robot's scan beam falling on the card */
.g-beam { position: absolute; z-index: 2; top: 62px; right: 40px; width: 110px; height: 90px; pointer-events: none;
  background: linear-gradient(180deg, rgba(34,211,238,.45), rgba(34,211,238,0)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); filter: blur(2px); animation: g-beam 2.6s ease-in-out infinite alternate; }
@keyframes g-beam { from { opacity: .35; } to { opacity: .9; } }
.g-calc-card { position: relative; overflow: hidden; padding: 26px; border-radius: 20px; background: rgba(15,23,42,.72);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); transition: var(--ease); }
.g-calc-card:hover { border-color: var(--line-hi); }
.g-calc-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 16px 3px rgba(34,211,238,.5); animation: g-scan 3.2s ease-in-out infinite; }
@keyframes g-scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
html body .g-calc-card .section-title { font-family: var(--body-font); font-size: 24px; line-height: 1.2; font-weight: 800; color: var(--white); text-align: left; margin: 0 0 6px; letter-spacing: -.01em; }
.g-calc-card .section-sub { text-align: left; font-size: 15px; color: var(--muted); margin: 0 0 18px; max-width: 80%; }
html body .g-calc-card .value-calc { max-width: none !important; margin: 0 !important; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.value-calc .vc-switcher { width: 100%; min-height: 52px; margin-bottom: 18px; padding: 0 44px 0 16px; border-radius: var(--r-xl); appearance: none; -webkit-appearance: none;
  background: rgba(2,6,23,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
  border: 1px solid var(--line-hi); color: var(--white); font: 700 17px var(--body-font); cursor: pointer; transition: var(--ease); }
.value-calc .vc-switcher:hover { box-shadow: 0 0 18px rgba(34,211,238,.25); }
.value-calc .vc-switcher:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.value-calc .vc-switcher option { background: #0F172A; color: #fff; }
@media (max-width: 960px) {
  .g-home { grid-template-columns: 1fr; min-height: 0; }
  .g-robot { width: 130px; top: -20px; }
  .g-calc-card .section-sub { max-width: 68%; }
}

/* ---------- homepage sections below the hero ---------- */
.stats { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px,3vw,32px); gap: 12px; border: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.stat { padding: 20px 12px; border-radius: var(--r); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); transition: var(--ease); }
.stat:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.stat-num { font-family: var(--body-font); font-variation-settings: normal; background: none; -webkit-text-fill-color: currentColor; color: var(--white); font-size: clamp(26px,3vw,34px); font-weight: 800; }
.stat-lbl { font-size: 15px; color: var(--muted); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:last-child { grid-column: 1 / -1; } }
.section { max-width: 1200px; padding: clamp(56px,7vw,88px) clamp(16px,3vw,32px); }
html body .section-title { font-family: var(--body-font); font-variation-settings: normal; font-weight: 800; color: var(--white); font-size: clamp(28px,3.4vw,42px); letter-spacing: -.02em; text-transform: none; }
html body .section-title::after { content: ""; display: block; width: 56px; height: 4px; margin: 14px auto 0; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--em)); }
.section-sub { font-size: 17px; color: var(--muted); }
.features { gap: 16px; }
.feature { padding: 22px; border-radius: var(--r); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); transition: var(--ease); }
.feature:hover { border-color: var(--line-hi); transform: translateY(-2px); box-shadow: 0 20px 50px -20px rgba(6,182,212,.35); }
.feature-icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.3); font-size: 21px; }
.feature h3 { font-size: 18px; font-weight: 700; color: var(--white); }
.feature p { font-size: 16px; color: var(--body); }
.games-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.game-card { padding: 24px 12px 20px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); transition: var(--ease); opacity: 1; }
.game-card:hover { border-color: var(--a, var(--line-hi)); transform: translateY(-4px); background: color-mix(in srgb, var(--a, var(--cyan)) 10%, var(--glass)); box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--a, var(--cyan)) 60%, transparent); }
.game-icon { width: 60px; height: 60px; border-radius: 16px; margin-bottom: 14px; color: var(--a, var(--cyan)); background: color-mix(in srgb, var(--a, var(--cyan)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--a, var(--cyan)) 40%, transparent); }
.game-icon svg { width: 34px; height: 34px; }
.game-name { font-size: 16px; font-weight: 700; color: var(--white); }
.game-card.coming-soon { --a: #94A3B8; opacity: 1; }
.game-card.coming-soon .game-name { color: var(--muted); }
.g-roblox { --a: #FACC15; } .g-fortnite { --a: #A78BFA; } .g-brawl { --a: #F472B6; } .g-mc { --a: #4ADE80; } .g-genshin { --a: #22D3EE; }
.g-coc { --a: #FB923C; } .g-cr { --a: #818CF8; } .g-ff { --a: #F97316; } .g-ml { --a: #FB7185; }
.steps { gap: 16px; }
.step { border-radius: var(--r); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); padding: 26px 22px; transition: var(--ease); }
.step:hover { border-color: var(--line-hi); }
.step-num { font-family: var(--body-font); font-variation-settings: normal; color: var(--cyan); opacity: 1; font-weight: 800; }
.step h3 { font-size: 18px; color: var(--white); }
.step p { font-size: 16px; color: var(--body); }
.cert-sample-label { font-size: 14px; color: var(--cyan); }
.cert-sample img { border-radius: var(--r); border: 1px solid var(--line-hi); box-shadow: 0 0 60px rgba(6,182,212,.18), 0 30px 70px rgba(0,0,0,.6); }
.faq { max-width: 860px; }
details { margin-bottom: 10px; }
details[open] { border-color: var(--line-hi); }
summary { font-size: 17px; font-weight: 600; color: var(--white); min-height: 56px; }
summary::after { color: var(--cyan); }
details p { font-size: 16px; color: var(--body); }
main > section:last-child { background: radial-gradient(60% 80% at 50% 100%, rgba(99,102,241,.2), transparent 70%) !important; }
main > section:last-child h2 { font-family: var(--body-font); color: var(--white); letter-spacing: -.02em; }
html body main > section:last-child .btn-primary { min-height: 64px; padding: 0 34px; border-radius: var(--r); background: linear-gradient(135deg, var(--cyan-d), var(--blue)); color: #fff; box-shadow: none; transition: var(--ease); }
html body main > section:last-child .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(6,182,212,.5); }
.lang-btn { min-height: 44px; border-radius: var(--r-xl); background: rgba(255,255,255,.05); border-color: var(--line); font-size: 15px; }
.lang-dropdown { background: #0F172A; border-color: var(--line); border-radius: var(--r-xl); }
.lang-dropdown a { font-size: 15px; }
.lang-dropdown a.lang-current { color: var(--cyan); }
@media (max-width: 420px) { .sticky-cta { background: rgba(10,14,23,.9); backdrop-filter: blur(12px); border-top: 1px solid var(--line); } .sticky-cta a { display: flex; justify-content: center; align-items: center; min-height: 50px; border-radius: 12px; background: linear-gradient(135deg, var(--cyan-d), var(--blue)); color: #fff; } }
@media (prefers-reduced-motion: reduce) { .g-fx .g-rain, .g-traffic, .g-robot *, .g-beam, .g-calc-card::after, .g-home .hero-badge::before { animation: none !important; } }

/* result sits right under the game picker: move a slider, see the price */
html body .value-calc { display: flex; flex-direction: column; }
.value-calc .vc-title { order: 0; } .value-calc .vc-subtitle { order: 1; }
.value-calc .vc-switcher { order: 2; }
html body .value-calc .vc-result { order: 3; margin: 0 0 22px; }
.value-calc .vc-sliders { order: 4; }
.value-calc .vc-gamepad { order: 5; }
/* custom checkboxes */
html body .value-calc .vc-checkbox { display: flex; align-items: center; gap: 14px; padding: 10px 16px; cursor: pointer; }
html body .value-calc .vc-checkbox input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; margin: 0;
  border-radius: 7px; border: 2px solid rgba(34,211,238,.6); background: rgba(2,6,23,.6); display: grid; place-items: center; cursor: pointer; transition: var(--ease); }
html body .value-calc .vc-checkbox input[type="checkbox"]::after { content: ""; width: 12px; height: 7px; border: 3px solid #04121A; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); opacity: 0; }
html body .value-calc .vc-checkbox input[type="checkbox"]:checked { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(34,211,238,.6); }
html body .value-calc .vc-checkbox input[type="checkbox"]:checked::after { opacity: 1; }
html body .value-calc .vc-checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
html body .value-calc .vc-checkbox:has(input:checked) { border-color: var(--line-hi); background: rgba(34,211,238,.08); }
.value-calc .vc-checkbox-heading { text-transform: none; letter-spacing: 0; }
/* let the city breathe */
.g-fx::before { background: linear-gradient(90deg, rgba(10,14,23,.82) 0%, rgba(10,14,23,.45) 42%, rgba(10,14,23,.05) 72%, rgba(10,14,23,.2) 100%); }
.g-fx .g-city { height: 88%; }
.g-home { align-items: start; }
.g-home .g-left { padding-top: clamp(0px, 5vw, 80px); }


/* ============================================================
   Homepage = the tool. Flow: 1 pick game → 2 set sliders →
   3 result (sticky) with the next step (bot) right beside it.
   ============================================================ */
.g-tool { position: relative; isolation: isolate; max-width: 1240px; margin: 0 auto; padding: clamp(28px,4vw,56px) clamp(16px,3vw,32px) 48px; }
.g-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: 22px; }
.g-head .hero-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 8px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: #CFFAFE; background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.4); }
.g-head .hero-badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--em-l); animation: g-pulse 1.8s infinite; }
html body .g-head h1 { font-family: var(--body-font); font-variation-settings: normal; font-weight: 800; color: var(--white); text-transform: none;
  font-size: clamp(36px, 5vw, 64px); line-height: 1.03; letter-spacing: -.035em; margin: 0; max-width: 820px; }
html body .g-head h1 br { display: none; }
html body .g-head h1 span { background: linear-gradient(95deg, var(--cyan), #A5B4FC 55%, var(--em-l)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: none; }
.g-tool .g-robot { position: relative; top: auto; right: auto; width: 210px; }

/* the big glass panel that holds the whole tool */
.g-panel { position: relative; overflow: hidden; padding: clamp(18px,2.4vw,30px); border-radius: 24px; background: rgba(15,23,42,.7);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: 0 40px 100px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.g-panel::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 16px 3px rgba(34,211,238,.5); animation: g-scan 4s ease-in-out infinite; }
.g-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; }
html body .g-intro .section-title { font-size: clamp(20px,2vw,24px); text-align: left; margin: 0; }
html body .g-intro .section-title::after { display: none; }
.g-intro .section-sub { margin: 0; font-size: 15px; text-align: left; }

/* step numbers */
.g-num { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 9px; font: 800 15px var(--body-font);
  color: #04121A; background: linear-gradient(135deg, var(--cyan), var(--em-l)); vertical-align: middle; flex: none; }

/* 1 — game tiles */
.g-pick-wrap { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.g-pick { flex: 1; display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; }
.g-pick-btn { --a: var(--cyan); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 12px 6px;
  border-radius: 14px; border: 1px solid var(--line); background: rgba(2,6,23,.45); color: var(--text); cursor: pointer; font: 700 13px/1.2 var(--body-font); text-align: center; transition: var(--ease); }
.g-pick-btn svg { width: 32px; height: 32px; color: var(--a); transition: var(--ease); }
.g-pick-btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--a) 60%, transparent); }
.g-pick-btn[aria-pressed="true"] { border-color: var(--a); background: color-mix(in srgb, var(--a) 16%, rgba(2,6,23,.6)); box-shadow: 0 0 0 1px var(--a), 0 0 22px color-mix(in srgb, var(--a) 40%, transparent); }
.g-pick-btn[aria-pressed="true"] svg { filter: drop-shadow(0 0 8px var(--a)); }
.g-pick-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.g-roblox { --a: #FACC15; } .g-fortnite { --a: #A78BFA; } .g-brawl-stars { --a: #F472B6; } .g-minecraft { --a: #4ADE80; } .g-genshin-impact { --a: #22D3EE; }
.g-clash-of-clans { --a: #FB923C; } .g-clash-royale { --a: #818CF8; } .g-free-fire { --a: #F97316; } .g-mobile-legends { --a: #FB7185; }

/* 2 + 3 — sliders left, result right (sticky) */
html body .g-panel .value-calc { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-areas: "s r"; gap: 24px; align-items: start;
  max-width: none !important; margin: 0 !important; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
html body .g-panel .value-calc .vc-switcher { display: none; }           /* the tiles are the picker */
html body .g-panel .value-calc .vc-sliders { grid-area: s; counter-reset: none; }
html body .g-panel .value-calc .vc-sliders::before { content: "2"; }
html body .g-panel .value-calc .vc-result { grid-area: r; position: sticky; top: 96px; margin: 0; padding: 22px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(34,211,238,.1), rgba(2,6,23,.7)); border: 1px solid var(--line-hi); }
html body .g-panel .value-calc .vc-result::before { content: "3"; margin-bottom: 12px; }
html body .g-panel .value-calc .vc-sliders::before, html body .g-panel .value-calc .vc-result::before {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font: 800 15px var(--body-font); color: #04121A; background: linear-gradient(135deg, var(--cyan), var(--em-l)); }
html body .g-panel .value-calc .vc-result-value { font-size: clamp(38px,4vw,52px); }
html body .g-panel .value-calc .vc-gamepad { display: none; }

/* next step right under the result: exact AI estimate in the bot */
.g-exact { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
html body .g-exact .btn-secondary { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 56px; border-radius: 12px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6); color: #fff; border: 0; font: 700 16px var(--body-font); text-transform: none; letter-spacing: 0; transition: var(--ease); }
html body .g-exact .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(139,92,246,.5); }
.g-exact .ai-notice { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: left; }

/* about band: the long explainer, off the first screen */
.g-about { max-width: 1240px; margin: 0 auto; padding: 8px clamp(16px,3vw,32px) 28px; }
html body .g-about p { max-width: 860px; margin: 0 auto; text-align: center; font-size: 18px; line-height: 1.7; color: var(--body); }

@media (max-width: 1100px) { .g-pick { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 860px) {
  html body .g-panel .value-calc { grid-template-columns: 1fr; grid-template-areas: "r" "s"; }
  html body .g-panel .value-calc .vc-result { position: relative; top: 0; }
  .g-tool .g-robot { width: 130px; }
}
@media (max-width: 560px) {
  .g-pick { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .g-pick-btn { min-height: 84px; font-size: 12px; }
  .g-pick-wrap .g-num { display: none; }
  .g-head { grid-template-columns: 1fr 96px; }
  .g-tool .g-robot { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .g-panel::after, .g-head .hero-badge::before { animation: none; } }

/* fixes after first review */
.g-panel { overflow: clip; }                    /* hidden made the panel a scroll box and broke sticky */
html body .g-panel .value-calc .vc-checkbox { justify-content: flex-start; text-align: left; }
@media (max-width: 860px) { html body .g-panel .value-calc { grid-template-areas: "s" "r"; } }
/* mobile mini price bar (glass.js shows it while the result card is off-screen) */
.g-mini { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 120; display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 18px; border-radius: 16px; background: rgba(15,23,42,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-hi); box-shadow: 0 10px 30px rgba(0,0,0,.6); color: var(--white); font: 800 22px var(--body-font); font-variant-numeric: tabular-nums; }
.g-mini.on { display: flex; }
.g-mini a { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--cyan-d), var(--blue)); color: #fff; text-decoration: none; font-size: 20px; }
@media (min-width: 861px) { .g-mini.on { display: none; } }
body:has(.g-tool) .sticky-cta { display: none; }
body:has(.g-tool) { padding-bottom: 0; }
html body .g-panel .value-calc { overflow: visible; }   /* style.css sets hidden, which made it the sticky scroll box */

/* Slider value (e.g. "0 R$") keeps its own direction inside RTL labels */
.vc-field-val { unicode-bidi: plaintext; }


/* ============================================================
   Cyber-Luxe layer: depth, restraint, expensive glow.
   Neon only on accents (buttons, key numbers, Live status).
   No extra markup: everything via pseudo-elements.
   ============================================================ */
:root { --bg: #080B11; --line: rgba(255,255,255,.08); --glass: rgba(15,23,42,.7); }
html, html body { background-color: var(--bg); }

/* 1. ambient light blobs (indigo top-left, cyan bottom-right, faint violet centre) */
html body::before {
  background:
    radial-gradient(600px 600px at -4% -8%, rgba(99,102,241,.30), transparent 70%),
    radial-gradient(640px 640px at 104% 108%, rgba(6,182,212,.26), transparent 70%),
    radial-gradient(900px 500px at 55% 45%, rgba(79,70,229,.10), transparent 70%);
}
/* 2. e-sports micro-grid, fading towards the edges */
html body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 35%, transparent 85%); mask-image: radial-gradient(circle at 50% 40%, #000 35%, transparent 85%); }
/* 3. film grain: kills the "cheap plastic" look (inline SVG noise, CSP allows data:) */
html::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* 4. premium glass: hairline border + top highlight, soft neon on hover */
.g-panel, .stat, .feature, .game-card, .step, details, .g-card, .value-calc, .fact-box > span, .section-nav, .g-pick-btn, .lang-dropdown {
  border-color: var(--line) !important;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), background-color .3s;
}
.g-panel { background: rgba(15,23,42,.62); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1); }
.stat:hover, .feature:hover, .game-card:hover, .step:hover, details:hover, .g-card:hover, .g-pick-btn:hover {
  border-color: rgba(34,211,238,.3) !important;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.7), 0 0 30px rgba(34,211,238,.12), inset 0 1px 0 rgba(255,255,255,.16); }
.g-pick-btn[aria-pressed="true"] { border-color: var(--a) !important; }

/* 5. ambient light response behind the price — the one "wow" spot */
html body .g-panel .value-calc .vc-result { isolation: isolate; border-color: rgba(34,211,238,.28); }
html body .g-panel .value-calc .vc-result::after { content: ""; position: absolute; inset: -30px; z-index: -1; border-radius: 40px; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 35%, rgba(34,211,238,.22), rgba(99,102,241,.14) 45%, transparent 75%); filter: blur(24px);
  animation: g-ambient 5s ease-in-out infinite alternate; }
@keyframes g-ambient { from { opacity: .55; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
html body .g-panel .value-calc .vc-result-value { text-shadow: 0 0 30px rgba(34,211,238,.35), 0 2px 0 rgba(0,0,0,.4); }

/* 6. restraint: calmer city, no busy rain; neon kept for accents */
.g-fx .g-rain { opacity: .12; }
.g-fx .g-city { opacity: .7; filter: saturate(.85); }
.g-panel::after { opacity: .6; }
html body .g-head h1 span { background: linear-gradient(95deg, #67E8F9, #A5B4FC 60%, #6EE7B7); -webkit-background-clip: text; background-clip: text; }
.g-head .hero-badge { background: rgba(255,255,255,.04); border-color: var(--line); color: #E2E8F0; }
.g-num, html body .g-panel .value-calc .vc-sliders::before, html body .g-panel .value-calc .vc-result::before { background: rgba(34,211,238,.14); color: var(--cyan); border: 1px solid rgba(34,211,238,.4); }

@media (prefers-reduced-motion: reduce) { html body .g-panel .value-calc .vc-result::after { animation: none; } }

/* game pages: compact calculator card in the hero */
.g-hero .value-calc { padding: 22px; }
.g-hero .value-calc .vc-subtitle { font-size: 14px; margin-bottom: 14px; }
.g-hero .value-calc .vc-result { order: 2; margin: 0 0 18px; position: relative; isolation: isolate; border-color: rgba(34,211,238,.28); background: linear-gradient(160deg, rgba(34,211,238,.1), rgba(2,6,23,.7)); }
.g-hero .value-calc .vc-result::after { content: ""; position: absolute; inset: -24px; z-index: -1; border-radius: 36px; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 35%, rgba(34,211,238,.2), rgba(99,102,241,.12) 45%, transparent 75%); filter: blur(22px); animation: g-ambient 5s ease-in-out infinite alternate; }
.g-hero .value-calc .vc-sliders { order: 3; }
html body .g-hero .g-exact .btn-primary { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 56px; border-radius: 12px; padding: 10px 16px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important; color: #fff !important; font: 700 16px/1.3 var(--body-font); text-align: center; text-transform: none; letter-spacing: 0; box-shadow: none; }
html body .g-hero .g-exact .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(139,92,246,.5); }
@media (prefers-reduced-motion: reduce) { .g-hero .value-calc .vc-result::after { animation: none; } }
.g-hero .g-right { position: sticky; top: 90px; }
.g-hero .g-right .value-calc { position: static; }
@media (max-width: 960px) { .g-hero .g-right { position: static; } }


/* ============================================================
   Report pages without the hero split (news / market watch)
   ============================================================ */
html body .report-hero h1 { font-family: var(--body-font); font-variation-settings: normal; font-weight: 800; color: var(--white); text-transform: none;
  font-size: clamp(32px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -.03em; }
.report-hero .report-updated, .report-hero .fresh-badge { margin: 8px 4px 0; }
.disclaimer-callout { max-width: 860px !important; margin: 10px auto 8px !important; padding: 16px 20px !important; border-radius: var(--r) !important;
  background: rgba(250,204,21,.06) !important; border: 1px solid rgba(250,204,21,.3) !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--body) !important; }
.disclaimer-callout strong { color: #FDE68A; }
html body .article-body > p[style*="font-size"]:first-child, .resources-callout + p[style], .section-nav + p[style] { font-size: 16px !important; }
/* each region = one glass card (wrapped by the builder) */
.g-news-card { margin: 28px 0 0; padding: 26px; }
html body .g-news-card h2 { margin-top: 0; }
/* the price for a region: big, cyan, readable */
html body .article-body .price-range, html body[class] .article-body .price-range { display: inline-block; margin: 6px 0 14px; padding: 12px 18px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(6,182,212,.16), rgba(99,102,241,.14)) !important; border: 1px solid var(--line-hi) !important; color: var(--white) !important;
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; box-shadow: 0 0 24px rgba(6,182,212,.15) !important; font-variant-numeric: tabular-nums; }
.article-body p[style*="font-size:13px"], .article-body p[style*="font-size: 13px"], .article-body p[style*="font-size:12px"] { font-size: 15px !important; color: var(--muted) !important; }
.reported-case { padding: 18px 20px; margin: 12px 0; }
.reported-case .tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.35); color: #FECACA; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.risk-box { margin: 12px 0; }
/* every in-text link readable on dark glass (was browser-default dark blue) */
html body main p a:not([class]), html body main li a:not([class]) { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
html body main p a:not([class]):hover { color: #A5F3FC; }
.g-news-card p[style*="font-size"], .g-news-card small { font-size: 15px !important; }


/* ============================================================
   Official events timeline (news pages)
   ============================================================ */
.ev-intro { font-size: 16px !important; color: var(--muted) !important; margin: 0 0 20px; }
.ev-list { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 14px; position: relative; }
.ev-list::before { content: ""; position: absolute; left: 62px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--cyan), rgba(99,102,241,.5) 70%, transparent); opacity: .5; }
.article-body .ev-list li.ev { padding: 0; display: grid; grid-template-columns: 118px 1fr; gap: 18px; align-items: start; }
.article-body .ev-list li.ev::before { display: none; }
.ev-date { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 76px; padding: 10px 6px; text-align: center;
  border-radius: 14px; background: #0B1220; border: 1px solid var(--line-hi); box-shadow: 0 0 18px rgba(34,211,238,.12); }
.ev-date time { font: 800 17px/1.2 var(--body-font); color: var(--white); }
.ev-date span { font: 600 13px var(--body-font); color: var(--muted); margin-top: 2px; }
.ev-body { padding: 16px 20px; border-radius: 16px; background: rgba(2,6,23,.45); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s, transform .3s; }
.ev-body:hover { border-color: rgba(34,211,238,.3); transform: translateY(-2px); }
html body .article-body .ev-body h3 { margin: 6px 0 6px; font-size: 19px; }
.ev-body p { font-size: 16px !important; margin: 0 0 6px; }
.ev-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; }
.ev-kind, .ev-status, .ev-count { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; font: 700 13px var(--body-font); letter-spacing: .02em; }
.ev-kind { background: rgba(255,255,255,.06); color: var(--body); border: 1px solid var(--line); }
.ev-ok { background: rgba(16,185,129,.14); color: #A7F3D0; border: 1px solid rgba(16,185,129,.45); }
.ev-ann { background: rgba(250,204,21,.1); color: #FDE68A; border: 1px solid rgba(250,204,21,.4); }
.ev-fact { background: rgba(148,163,184,.12); color: #E2E8F0; border: 1px solid rgba(148,163,184,.35); }
.ev-count:empty { display: none; }
.ev-count { background: rgba(34,211,238,.12); color: #A5F3FC; border: 1px solid rgba(34,211,238,.45); }
.ev-live .ev-count { background: rgba(244,63,94,.16); color: #FECDD3; border-color: rgba(244,63,94,.5); }
.ev-live .ev-count::before { content: ""; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #FB7185; animation: g-pulse 1.6s infinite; }
.ev-src { font-size: 14px !important; color: var(--muted) !important; }
.ev-src a::after { content: " \2197"; text-decoration: none; }        /* opens in a new tab */
/* the headline event of the half-year */
.ev-major .ev-date { background: linear-gradient(160deg, rgba(34,211,238,.25), rgba(99,102,241,.25)); border-color: var(--cyan); box-shadow: 0 0 26px rgba(34,211,238,.35); }
.ev-major .ev-body { border-color: rgba(34,211,238,.45); background: linear-gradient(160deg, rgba(34,211,238,.1), rgba(2,6,23,.55)); box-shadow: 0 0 30px -6px rgba(34,211,238,.3); }
html body .article-body .ev-major .ev-body h3 { font-size: 22px; }
/* finished: dimmed and moved to the end by events.js */
.ev-done { opacity: .55; }
.ev-done .ev-count { background: rgba(148,163,184,.12); color: #CBD5E1; border-color: rgba(148,163,184,.35); }
@media (max-width: 600px) {
  .article-body .ev-list li.ev { grid-template-columns: 1fr; gap: 8px; }
  .ev-list::before { display: none; }
  .ev-date { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 0; padding: 8px 14px; width: max-content; }
}
@media (prefers-reduced-motion: reduce) { .ev-live .ev-count::before { animation: none; } }


/* ============================================================
   Per-game themes. Each game page already carries body.theme-*
   (see DESIGN.md); Roblox gets theme-studs. A theme re-points the
   accent tokens, tints the ambient light and adds one quiet
   background motif drawn from the game's own visual language
   (generic shapes only — no logos, characters or trademarks).
   Contrast (vs #080B11 / dark text on accent), all checked:
   studs 9.2/8.3 · mythic 13.6/6.0 · bronze 10.5/6.9 · royal 7.5/7.2
   diamond 8.4/5.8 · gacha 13.2/11.4 · immortal 7.2/7.0
   rarity 7.7/7.4 · overworld 10.6/6.8 · default 10.9/5.2
   ============================================================ */
:root { --on-acc: #04121A; --blob1: rgba(99,102,241,.30); --blob2: rgba(6,182,212,.26); }

body.theme-studs     { --cyan: #38BDF8; --cyan-d: #38BDF8; --blue: #22C55E; --blob1: rgba(56,189,248,.26); --blob2: rgba(34,197,94,.18);
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='14' cy='14' r='8'/%3E%3Ccircle cx='42' cy='42' r='8'/%3E%3Cpath d='M2 28h24v26H2zM30 2h24v24H30z' stroke-opacity='.45'/%3E%3C/g%3E%3C/svg%3E"); }
body.theme-mythic    { --cyan: #FFD21F; --cyan-d: #FFD21F; --blue: #B86BFF; --blob1: rgba(184,107,255,.30); --blob2: rgba(255,210,31,.16);
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M22 8l4 9 10 1-7.5 6.5 2.3 9.5L22 29l-8.8 5 2.3-9.5L8 18l10-1z'/%3E%3Cpath d='M66 50l-9 15h8l-4 15 12-19h-8l5-11z' opacity='.7'/%3E%3C/svg%3E"); }
body.theme-bronze    { --cyan: #F6B042; --cyan-d: #F6B042; --blue: #E8823A; --blob1: rgba(232,130,58,.24); --blob2: rgba(246,176,66,.16);
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='40'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M0 1h64M0 21h64M16 1v20M48 1v20M0 21v18M32 21v18M64 21v18'/%3E%3C/g%3E%3C/svg%3E"); }
body.theme-royal     { --cyan: #7C9BFF; --cyan-d: #7C9BFF; --blue: #F9C846; --blob1: rgba(124,155,255,.30); --blob2: rgba(249,200,70,.14);
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M12 30l6 5 6-10 6 10 6-5-2.5 13h-19z'/%3E%3Cpath d='M52 64l4 3.5 4-7 4 7 4-3.5-1.7 9H53.7z' opacity='.6'/%3E%3C/svg%3E"); }
body.theme-diamond   { --cyan: #FF8A1F; --cyan-d: #FF8A1F; --blue: #FF4D4D; --blob1: rgba(255,77,77,.22); --blob2: rgba(255,138,31,.20);
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cpath d='M16 10l5 8-5 8-5-8z'/%3E%3Cpath d='M50 42l3.5 6-3.5 6-3.5-6z' opacity='.7'/%3E%3Ccircle cx='54' cy='16' r='2'/%3E%3Ccircle cx='24' cy='52' r='1.6' opacity='.6'/%3E%3C/svg%3E"); }
body.theme-gacha     { --cyan: #6EE7D8; --cyan-d: #6EE7D8; --blue: #E9C46A; --blob1: rgba(167,139,250,.24); --blob2: rgba(110,231,216,.18);
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M24 14l2.5 8.5L35 25l-8.5 2.5L24 36l-2.5-8.5L13 25l8.5-2.5z'/%3E%3Ccircle cx='84' cy='40' r='2.5'/%3E%3Ccircle cx='70' cy='92' r='2'/%3E%3Ccircle cx='104' cy='88' r='1.6'/%3E%3Cpath d='M84 40L70 92l34-4' fill='none' stroke='%23000' stroke-width='1' opacity='.6'/%3E%3C/svg%3E"); }
body.theme-immortal  { --cyan: #FF6B85; --cyan-d: #FF6B85; --blue: #F4C95D; --blob1: rgba(255,107,133,.24); --blob2: rgba(244,201,93,.14);
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
body.theme-rarity    { --cyan: #B98BFF; --cyan-d: #B98BFF; --blue: #4DB0FF; --blob1: rgba(185,139,255,.30); --blob2: rgba(77,176,255,.20);
  --motif: repeating-radial-gradient(circle at 82% 18%, #000 0 2px, transparent 2px 46px); }
body.theme-overworld { --cyan: #7BD34F; --cyan-d: #7BD34F; --blue: #C0925E; --blob1: rgba(123,211,79,.20); --blob2: rgba(192,146,94,.16);
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 0h16v16H0zM32 16h16v16H32zM16 32h16v16H16z'/%3E%3Cpath d='M16 0h16v16H16zM0 32h16v16H0z' opacity='.35'/%3E%3C/svg%3E"); }

body[class*="theme-"] { --line-hi: color-mix(in srgb, var(--cyan) 50%, transparent); --gold: var(--cyan); --border-strong: var(--line-hi); }
/* tinted ambient light */
html body[class*="theme-"]::before {
  background:
    radial-gradient(600px 600px at -4% -8%, var(--blob1), transparent 70%),
    radial-gradient(640px 640px at 104% 108%, var(--blob2), transparent 70%),
    radial-gradient(900px 500px at 55% 45%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 70%);
}
/* the motif: accent-coloured, very faint, only behind the top of the page */
body[class*="theme-"] main { position: relative; isolation: isolate; }
body[class*="theme-"] main::before { content: ""; position: absolute; left: 0; right: 0; top: -80px; height: 820px; z-index: -1; pointer-events: none;
  background: var(--cyan); opacity: .1;
  -webkit-mask-image: var(--motif), linear-gradient(#000 20%, transparent); -webkit-mask-composite: source-in;
  mask-image: var(--motif), linear-gradient(#000 20%, transparent); mask-composite: intersect; }

/* accent-filled controls always use dark text (white on bright accent failed 4.5:1) */
html body .nav-cta, html body[class] .nav-cta,
html body .value-calc .vc-share-btn, html body .value-calc .vc-share-btn:hover,
html body[class] .report-cta .btn-primary, html body .g-home .btn-primary, html body main > section:last-child .btn-primary,
.g-mini a, .sticky-cta a { color: var(--on-acc) !important; }
html body[class] .nav-cta, html body .nav-cta { background: linear-gradient(135deg, var(--cyan-d), var(--blue)) !important; }
html body[class] .report-cta .btn-primary { background: linear-gradient(135deg, var(--cyan-d), var(--blue)) !important; }
.g-num, html body .g-panel .value-calc .vc-sliders::before, html body .g-panel .value-calc .vc-result::before { color: var(--cyan); }
html body .article-body h2::after, html body .section-title::after { background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.value-calc .vc-scale-fill { background: linear-gradient(90deg, var(--cyan), var(--blue)) !important; }
html body .value-calc input[type="range"]::-webkit-slider-thumb { border-color: var(--cyan-d); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cyan) 18%, transparent), 0 0 16px color-mix(in srgb, var(--cyan) 60%, transparent); }
html body .value-calc input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--cyan-d), var(--cyan) var(--p,0%), rgba(255,255,255,.12) var(--p,0%)); }
html body .value-calc input[type="range"]::-moz-range-progress { background: var(--cyan); }
html body .value-calc .vc-result-value { text-shadow: 0 0 30px color-mix(in srgb, var(--cyan) 40%, transparent), 0 2px 0 rgba(0,0,0,.4); }
.g-hero .value-calc .vc-result::after, html body .g-panel .value-calc .vc-result::after {
  background: radial-gradient(60% 55% at 50% 35%, color-mix(in srgb, var(--cyan) 24%, transparent), color-mix(in srgb, var(--blue) 14%, transparent) 45%, transparent 75%); }
html body .g-hero .price-range { background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 18%, transparent), color-mix(in srgb, var(--blue) 12%, transparent)) !important;
  border-color: var(--line-hi) !important; box-shadow: 0 0 30px color-mix(in srgb, var(--cyan) 16%, transparent) !important; }
.section-nav a:hover, .section-nav a:focus-visible { background: color-mix(in srgb, var(--cyan) 14%, transparent); border-color: var(--line-hi); }
.logo::before { background: linear-gradient(135deg, var(--cyan), var(--blue)) !important; box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 50%, transparent); }
.ev-major .ev-date { background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 25%, transparent), color-mix(in srgb, var(--blue) 22%, transparent)); border-color: var(--cyan); }
@media (prefers-reduced-motion: reduce) { body[class*="theme-"] main::before { opacity: .08; } }


/* homepages without the calculator: same city hero, robot in the right column */
.g-home-plain { align-items: center; }
.g-home-plain .g-left { max-width: 640px; }
html body .g-home-plain h1 { font-family: var(--body-font); font-variation-settings: normal; font-weight: 800; color: var(--white); text-transform: none;
  font-size: clamp(36px, 5vw, 66px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 20px; }
html body .g-home-plain h1 span { background: linear-gradient(95deg, #67E8F9, #A5B4FC 60%, #6EE7B7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: none; }
html body .g-home-plain .g-left > p:not(.ai-notice) { font-size: clamp(17px,1.5vw,19px); color: var(--body); line-height: 1.65; margin: 0 0 28px; }
.g-home-plain .hero-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 8px 16px; border-radius: 999px; font-size: 15px; font-weight: 600;
  color: #E2E8F0; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.g-home-plain .hero-badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--em-l); animation: g-pulse 1.8s infinite; }
.g-home-plain .cta-group { justify-content: flex-start; }
.g-home-plain .g-robot { position: relative; top: auto; right: auto; width: min(100%, 380px); justify-self: center; }
.g-home-plain .ai-notice { text-align: left; }
[dir="rtl"] .g-home-plain .cta-group, [dir="rtl"] .g-home .cta-group { justify-content: flex-start; }
[dir="rtl"] .g-home-plain .ai-notice, [dir="rtl"] .g-exact .ai-notice { text-align: right; }
@media (max-width: 960px) { .g-home-plain .g-robot { order: -1; width: 180px; } }
@media (prefers-reduced-motion: reduce) { .g-home-plain .hero-badge::before { animation: none; } }

/* skip link: style.css hid it with left:-9999px, which on RTL pages (ar)
   created an 11,000px horizontal scroll area. Slide it in from the top instead. */
.skip-link { left: 0 !important; right: auto; top: 0; transform: translateY(-120%); transition: transform .15s; }
[dir="rtl"] .skip-link { left: auto !important; right: 0; }
.skip-link:focus, .skip-link:focus-visible { transform: none; }
/* key facts: only the first bold value becomes the big number; further
   <strong>s in the same fact (lists like "A, B, C") stay inline */
.g-hero .fact-box strong { display: inline; font-size: inherit; margin: 0; }
.g-hero .fact-box > span > strong:first-of-type { display: block; font-size: 19px; margin: 2px 0; }
.g-hero .fact-box > span > strong ~ strong { color: var(--white); font-weight: 700; }

/* full-bleed hero art is 100vw wide (includes the scrollbar): clip, do not scroll.
   clip (unlike hidden) creates no scroll box, so sticky still works. */
html, html body { overflow-x: clip; }
.g-about-cta { justify-content: center; margin-top: 18px; }

/* resource pages: breathing room between Q&A blocks */
html body .article-body h3:not(:first-child) { margin-top: 30px; }
html body .article-body > h2:not(:first-child) { margin-top: 52px; }

/* price ranges always read low → high: on RTL pages the lo/hi spans were
   bidi-reordered into "$15 – $3" */
.vc-result-value, .g-mini span { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .vc-result-value { text-align: right; }

/* performance: the rain layer caused CLS 0.86 (it resized while the calculator
   mounted) and repainted every frame; the art box no longer follows content height */
.g-fx .g-rain { display: none !important; }
.g-fx { bottom: auto !important; height: 980px; }
@media (max-width: 960px) { .g-fx { height: 760px; } }

/* reserve the meta row so the tier pill does not push content when it fills */
.value-calc .vc-meta { min-height: 30px; }

/* performance: backdrop blur only on the few large panels; small cards use a
   denser fill instead (on this dark background the difference is invisible,
   the rendering cost of ~40 blurred cards was not) */
.feature, .game-card, .step, details, .stat, .g-card, .fact-box > span, .ev-body, .g-pick-btn, .other-games a, .resources-callout a, .risk-box, .reported-case, .g-news-card {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.feature, .game-card, .step, details, .stat, .g-card, .fact-box > span, .g-news-card { background-color: rgba(15,23,42,.82); }

/* below-the-fold article cards: skip rendering until scrolled near (Baseline 2024);
   contain-intrinsic-size keeps the scrollbar stable (no layout shift) */
.article-body .g-news-card, .other-games, .sources-list, footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.article-body .g-news-card:first-child { content-visibility: visible; }


/* ============================================================
   "Prices around the world" (game pages): table on desktop,
   one card per market on phones; the visitor's market first.
   ============================================================ */
.wm-intro { font-size: 17px !important; color: var(--body) !important; margin: 0 0 18px; }
.wm-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); }
.wm-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 760px; }
.wm-table th, .wm-table td { padding: 13px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.wm-table thead th { background: rgba(255,255,255,.05); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.wm-table tbody th { color: var(--white); font-weight: 700; white-space: nowrap; }
.wm-table td { color: var(--body); }
.wm-table a { color: var(--cyan); }
.wm-num { color: var(--white) !important; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.wm-flag { margin-inline-end: 8px; }
.wm-mine { background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 14%, transparent), transparent); }
.wm-mine th { box-shadow: inset 3px 0 0 var(--cyan); }
[dir="rtl"] .wm-mine th { box-shadow: inset -3px 0 0 var(--cyan); }
.wm-you { display: inline-block; margin-inline-start: 8px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--on-acc); background: var(--cyan); vertical-align: 1px; }
.wm-sep td { padding: 16px 14px 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom: 0; }
.wm-nv { color: var(--muted) !important; font-style: italic; }
.wm-note { font-size: 14px !important; color: var(--muted) !important; margin: 14px 0 0; }
@media (max-width: 760px) {
  .wm-wrap { border: 0; overflow: visible; }
  .wm-table { min-width: 0; }
  .wm-table thead { display: none; }
  .wm-table, .wm-table tbody, .wm-table tr, .wm-table th, .wm-table td { display: block; width: 100%; }
  .wm-table tr { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(2,6,23,.45); overflow: hidden; }
  .wm-table tr.wm-sep { border: 0; background: none; margin: 14px 0 4px; }
  .wm-table tbody th { border-bottom: 1px solid var(--line); white-space: normal; }
  .wm-table td { border-bottom: 0; padding: 8px 14px; }
  .wm-table td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin-bottom: 2px; }
  .wm-table td.wm-num { white-space: normal; }
  .wm-mine th { box-shadow: none; }
  .wm-mine { border-color: var(--line-hi) !important; }
}
.g-world h3 { margin-top: 34px !important; }
.wm-small { min-width: 0; }
.wm-rank { display: inline-block; min-width: 26px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wm-miss { font-size: 15px !important; color: #FDE68A !important; margin: -6px 0 14px; }
@media (max-width: 760px) { .wm-table.wm-small tr { display: grid; grid-template-columns: 1fr auto; } .wm-table.wm-small th { grid-column: 1 / -1; } }
.wm-results th { white-space: normal !important; min-width: 220px; }
.wm-results .ev-where { font-weight: 500; font-size: 13px; }
.ev-where { display: block; font-size: 15px; color: var(--muted); margin-top: 2px; }
.g-world .ev-list { margin-bottom: 8px; }

/* ---- Brand: GAV emblem, breadcrumbs, robot note under the result ---- */
/* Emblem replaces the gradient square in front of the wordmark (logo = link home, NN/g) */
html body .logo::before { width: 32px; height: 32px; background: url("emblem.webp") center / cover no-repeat !important; clip-path: none; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 16px color-mix(in srgb, var(--cyan) 45%, transparent) !important; }

/* Breadcrumbs: explicit Home link on inner pages (replaces the back button) */
.crumbs { max-width: 1200px; margin: 18px auto 0; padding: 0 clamp(16px,3vw,32px); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 16px; font-weight: 600; }
.crumbs li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.crumbs li + li::before { content: "›"; color: var(--muted); font-size: 20px; line-height: 1; }
.crumbs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-xl); border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); text-decoration: none; }
.crumbs a:hover { border-color: var(--line-hi); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.crumbs a img { width: 22px; height: 22px; border-radius: 6px; }
.crumbs [aria-current] { color: var(--text); }
[dir="rtl"] .crumbs li + li::before { content: "‹"; }

/* Robot explains why the result is approximate — right next to the number */
.g-why { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); background: color-mix(in srgb, var(--cyan) 6%, rgba(8,11,17,.6)); }
.g-why svg { flex: 0 0 60px; width: 60px; height: 68px; }
.g-why p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }
.g-why strong { display: block; margin-bottom: 2px; color: var(--cyan); }

/* Art pass (2026-09-30): raster cyborg characters from owner-supplied Gemini renders.
   Hero cyborg with scanning beam + game icons, robot sitting on the result bar,
   18+ girl above the footer notice, joystick above the final CTA. */
.g-tool .g-robot.g-cyborg { width: 270px; --travel: -190px; }
.g-cyborg { position: relative; filter: none; }
.g-cyborg img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 96%); mask-image: linear-gradient(to bottom, #000 70%, transparent 96%); }
.g-cyborg .cy-beam { position: absolute; right: 71%; top: 44.6%; width: 170px; height: 3px; border-radius: 3px;
  background: linear-gradient(to left, #fff, #00F0FF 20%, rgba(0,240,255,0)); filter: drop-shadow(0 0 6px #00F0FF);
  transform-origin: right center; animation: cy-beam 2.4s ease-in-out infinite; }
.g-cyborg .cy-ico { position: absolute; right: 70.5%; top: calc(44.6% - 12px); width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center; background: rgba(5,12,24,.9); border: 1px solid currentColor; box-shadow: 0 0 10px currentColor;
  opacity: 0; animation: cy-fly 4.5s linear infinite; animation-delay: calc(var(--i) * -.5s); }
.g-cyborg .cy-ico svg { width: 16px; height: 16px; }
@keyframes cy-fly { 0% { transform: translate(0,0) scale(.2); opacity: 0; } 12% { opacity: 1; } 80% { opacity: .9; }
  100% { transform: translate(var(--travel), var(--dy)) scale(1); opacity: 0; } }
@keyframes cy-beam { 0%, 100% { opacity: .35; transform: scaleX(.6); } 50% { opacity: 1; transform: scaleX(1); } }

.g-sit { position: relative; height: 0; z-index: 4; pointer-events: none; }
.g-sit img { position: absolute; right: 6px; --w: 92px; width: var(--w); height: auto; top: calc(var(--w) * -1.30 - 8px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.g-sit img.blink { animation: sit-blink .6s ease; }
@keyframes sit-blink { 0% { filter: drop-shadow(0 0 0 #00F0FF); } 40% { filter: drop-shadow(0 0 18px #00F0FF); } 100% { filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); } }
.value-calc .vc-meta { padding-right: 100px; }

.g-18 { display: block; width: 190px; height: auto; margin: 0 auto -34px; position: relative; z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent);
  filter: drop-shadow(0 10px 30px rgba(255,46,136,.22)); }
.g-joystick { display: block; width: 220px; height: auto; margin: 0 auto 18px; filter: drop-shadow(0 10px 30px rgba(0,240,255,.18)); }

@media (max-width: 860px) {
  .g-tool .g-robot.g-cyborg { width: 160px; --travel: -64px; }
  .g-cyborg .cy-beam { width: 100px; }
}
@media (max-width: 560px) {
  .g-head { grid-template-columns: 1fr 120px; }
  .g-tool .g-robot.g-cyborg { width: 120px; --travel: -44px; }
  .g-cyborg .cy-beam { width: 60px; }
  .g-cyborg .cy-ico { width: 16px; height: 16px; top: calc(44.6% - 8px); border-radius: 4px; }
  .g-cyborg .cy-ico svg { width: 11px; height: 11px; }
  .g-sit img { --w: 70px; right: 2px; }
  .value-calc .vc-meta { padding-right: 74px; }
  .g-18 { width: 150px; margin-bottom: -26px; }
  .g-joystick { width: 170px; }
  /* header: language + bot button fill the second row instead of hugging the left */
  nav .nav-right { flex: 1 1 100%; flex-wrap: nowrap; gap: 10px; }
  nav .nav-right .lang-selector { flex: 0 0 auto; }
  nav .nav-right .nav-cta { flex: 1 1 auto; justify-content: center; text-align: center; }
  nav > .nav-cta { flex: 1 1 100%; justify-content: center; text-align: center; }
}
/* ---- performance (2026-09-30): phones repainted the whole hero every frame ----
   rain: background-position -> transform (GPU layer); scan line: top -> transform;
   phones: no rain and no backdrop blur (re-blurring a big panel over moving rain
   every frame was the main CPU/GPU cost). */
.g-fx .g-rain { background-position: 0 0; animation: g-rain-t .6s linear infinite; will-change: transform; }
@keyframes g-rain-t { from { transform: translateY(-180px); } to { transform: translateY(0); } }
.g-calc-card::after, .g-panel::after { top: 0; bottom: 0; height: auto; box-shadow: none;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent) bottom / 100% 2px no-repeat;
  filter: drop-shadow(0 0 6px rgba(34,211,238,.8)); animation-name: g-scan-t; will-change: transform, opacity; }
@keyframes g-scan-t { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@media (max-width: 860px), (pointer: coarse) {
  .g-fx .g-rain { display: none; }
  .g-panel, .g-calc-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(15,23,42,.94); }
}
/* ---- site-wide header menu: Games / Guides / News + language (nav_menu.py) ---- */
.lang-dropdown { position: absolute; top: calc(100% + 6px); left: 0; max-width: calc(100vw - 32px); padding: 6px; min-width: 190px;
  max-height: min(70vh, 420px); overflow-y: auto; box-shadow: 0 16px 40px rgba(0,0,0,.6); z-index: 200; display: none;
  background: #0F172A; border: 1px solid var(--line); border-radius: 14px; }
.lang-selector.open .lang-dropdown { display: block; }
nav:not(.crumbs) { z-index: 300; }   /* the breadcrumb bar is also a <nav>; keep header dropdowns above it */
nav .nav-menu { display: flex; align-items: center; gap: 8px; margin-right: auto; margin-left: 18px; }
nav .nav-dd .lang-btn, nav .nav-news { padding: 8px 13px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--text, #E2E8F0);
  background: rgba(255,255,255,.04); border: 1px solid var(--line); text-decoration: none; white-space: nowrap; line-height: 1.2; }
nav .nav-dd .lang-btn:hover, nav .nav-news:hover { border-color: rgba(34,211,238,.55); background: rgba(34,211,238,.08); }
nav .nav-news { color: #FDE68A; border-color: rgba(253,230,138,.35); }
nav .nav-dd .lang-dropdown a { font-size: 15px; }
[dir="rtl"] .g-cyborg { transform: scaleX(-1); }   /* face the text in right-to-left languages */
[dir="rtl"] nav .nav-menu { margin-left: auto; margin-right: 18px; }
[dir="rtl"] .lang-dropdown { left: auto; right: 0; }
@media (max-width: 860px) {
  nav { position: relative; }            /* 3-row header on phones: don't pin it over the content */
  nav .nav-menu { order: 3; flex: 1 1 100%; margin: 0; gap: 6px; }
  nav .nav-menu > * { flex: 1 1 0; }
  nav .nav-dd .lang-btn, nav .nav-news { width: 100%; justify-content: center; text-align: center; padding: 9px 6px; font-size: 13px; }
  nav .nav-right { order: 2; }
}
@media (max-width: 560px) {
  nav .nav-menu { order: 2; }
  nav .nav-right { order: 3; }
  nav .nav-dd:last-of-type .lang-dropdown { left: auto; right: 0; }
}
/* ---- news hub (news.html) ---- */
.news-grid { max-width: 1100px; margin: 0 auto 60px; padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.news-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 18px; text-decoration: none; color: var(--text, #E2E8F0);
  background: linear-gradient(160deg, rgba(34,211,238,.07), rgba(15,23,42,.85)); border: 1px solid var(--line); transition: transform .2s, border-color .2s; }
.news-card:hover { transform: translateY(-3px); border-color: rgba(34,211,238,.55); }
.news-card strong { font-size: 19px; line-height: 1.25; color: #fff; }
.news-date { font-size: 13px; color: #FDE68A; font-weight: 700; }
.news-lead { font-size: 15px; line-height: 1.55; color: var(--muted, #94A3B8); }
.news-more { margin-top: auto; font-weight: 700; color: var(--cyan, #22D3EE); }
/* ---- homepage "Everything on the site" hub (home_hub.py) ---- */
.hub-grid { max-width: 1100px; margin: 26px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.hub-card { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px; align-items: center;
  padding: 18px; border-radius: 18px; text-decoration: none; background: rgba(15,23,42,.72); border: 1px solid var(--line); transition: transform .2s, border-color .2s; }
.hub-card:hover { transform: translateY(-3px); border-color: rgba(34,211,238,.55); }
.hub-card .hub-ico { grid-row: span 2; width: 46px; height: 46px; display: grid; place-items: center; font-size: 24px; border-radius: 12px; background: rgba(34,211,238,.1); }
.hub-card strong { color: #fff; font-size: 17px; }
.hub-card span:last-child { color: var(--muted, #94A3B8); font-size: 14px; line-height: 1.45; }
.hub-card:first-child { border-color: rgba(253,230,138,.45); background: linear-gradient(135deg, rgba(253,230,138,.08), rgba(15,23,42,.8)); }
@media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } }
/* ---- button hierarchy (2026-09-30): one primary action per screen ----
   Primary = the bot CTA (filled, largest, glowing); share = outline; reset = ghost.
   Touch targets >= 48px (Google/WCAG). */
html body .g-exact .btn-primary, html body .g-exact .btn-secondary { position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%;
  min-height: 60px; border-radius: 14px; font-size: 17px; font-weight: 800; letter-spacing: .01em; color: #fff; border: 0; text-decoration: none;
  background: linear-gradient(135deg, #0E7490, #6D28D9); box-shadow: 0 10px 30px -8px rgba(124,58,237,.65); animation: cta-glow 2.4s ease-in-out infinite; }  /* white text >= 5.4:1 on both ends */
html body .g-hero .g-exact .btn-primary, html body .g-tool .g-exact .btn-primary, html body .g-exact .btn-primary, html body .g-exact .btn-secondary {
  background: linear-gradient(135deg, #0E7490, #6D28D9) !important; color: #fff !important; font-size: 17px; font-weight: 800; min-height: 60px; }
@keyframes cta-glow { 0%, 100% { box-shadow: 0 8px 24px -8px rgba(109,40,217,.6), 0 0 0 rgba(34,211,238,0); } 50% { box-shadow: 0 8px 28px -6px rgba(109,40,217,.8), 0 0 22px rgba(34,211,238,.45); } }
html body .g-exact .btn-primary:hover, html body .g-exact .btn-secondary:hover { transform: translateY(-2px); }
html body .value-calc .vc-share-btn, html body .value-calc .vc-share-btn:hover { color: #A5F3FC !important; }
.value-calc .vc-share-btn { background: transparent !important; color: #A5F3FC !important; border: 1.5px solid rgba(34,211,238,.6) !important; box-shadow: none !important; }
.value-calc .vc-share-btn:hover { background: rgba(34,211,238,.1) !important; }
.g-reset { background: transparent; color: var(--muted, #94A3B8); border-color: rgba(148,163,184,.25); }
.section-nav a, nav .nav-dd .lang-btn, nav .nav-news, nav .lang-btn { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 560px) { html body .g-exact .btn-primary, html body .g-exact .btn-secondary { min-height: 58px; font-size: 16px; } nav .nav-cta { min-height: 48px; } }
/* ---- visual pack (preview approved 2026-09-30): rays, cables, holo cards, page transitions, slot roll, scroll reveal ---- */
/* 0. light rays behind the cyborg */
.g-cyborg::before { content:""; position:absolute; left:50%; top:42%; width:180%; aspect-ratio:1; translate:-50% -50%; z-index:-1; pointer-events:none;
  background: repeating-conic-gradient(from 0deg, rgba(0,240,255,.16) 0 4deg, transparent 4deg 16deg, rgba(255,46,136,.12) 16deg 19deg, transparent 19deg 30deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 72%); mask: radial-gradient(closest-side, #000 20%, transparent 72%);
  animation: vis-spin 40s linear infinite; }
@keyframes vis-spin { to { rotate: 360deg; } }

/* 1. neon cables hanging from the cyborg into the calculator */
.vis-cables { position:absolute; left:0; top:80%; width:100%; height:150px; overflow:visible; pointer-events:none; z-index:6; }
.vis-cables .c { fill:none; stroke:#2B3252; stroke-width:8; stroke-linecap:round; filter: drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
.vis-cables .h { fill:none; stroke:rgba(190,205,255,.35); stroke-width:1.5; stroke-linecap:round; transform: translate(-1.5px,-1.5px); }
.vis-cables .plug { fill:#1B2033; stroke:#00F0FF; stroke-width:2; filter: drop-shadow(0 0 6px #00F0FF); }
.vis-cables .p { fill:none; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:36 150; animation: vis-pulse 2.6s linear infinite; filter: drop-shadow(0 0 5px currentColor); }
.vis-cables .p1 { stroke:#00F0FF; color:#00F0FF; }
.vis-cables .p2 { stroke:#FF2E88; color:#FF2E88; animation-delay:-.9s; animation-duration:3.1s; }
.vis-cables .p3 { stroke:#FCEE0A; color:#FCEE0A; animation-delay:-1.7s; animation-duration:3.6s; }
@keyframes vis-pulse { from { stroke-dashoffset: 178; } to { stroke-dashoffset: 0; } }
.vis-hot .vis-cables .p { animation-duration: .7s !important; stroke-width: 3.5; }

/* 2. holographic game cards */
.game-card, .g-pick-btn { position: relative; overflow: hidden; }
.game-card::after, .g-pick-btn::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:.0; mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 20%, rgba(255,46,136,.55) 36%, rgba(252,238,10,.5) 44%, rgba(0,240,255,.55) 52%, rgba(157,92,255,.5) 60%, transparent 76%);
  background-size: 250% 250%; background-position: var(--hx, 50%) var(--hy, 50%); transition: opacity .25s; }
.game-card:hover::after, .g-pick-btn:hover::after { opacity:.45; }
.g-pick-btn[aria-pressed="true"]::after, .g-pick-btn.active::after { opacity:.22; }
@media (pointer: coarse) { .game-card::after { opacity:.28; animation: vis-holo 5s ease-in-out infinite alternate; } }
@keyframes vis-holo { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* 3. smooth page-to-page transitions (Chrome/Edge/Safari 18+) */
@view-transition { navigation: auto; }
h1 { view-transition-name: page-title; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* 4. slot-machine roll of the estimate */
.vc-result-value.vis-roll .vc-lo, .vc-result-value.vis-roll .vc-hi { display:inline-block; animation: vis-roll .55s cubic-bezier(.2,.8,.2,1.2); }
.vc-result-value.vis-roll .vc-hi { animation-delay: .08s; }
@keyframes vis-roll { 0% { transform: translateY(-70%); filter: blur(6px); opacity:0; } 60% { filter: blur(0); opacity:1; } 100% { transform: none; } }

/* 5. scroll reveal with a glitch */
@supports (animation-timeline: view()) {
  .section .feature, .section .step, .section .faq details, .section .game-card, .section .section-title, .hub-card, .cert-sample {
    animation: vis-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes vis-reveal { 0% { opacity:0; transform: translateY(40px); filter: hue-rotate(90deg) blur(4px); } 60% { opacity:1; filter:none; } 100% { opacity:1; transform:none; } }
}
@media (max-width:860px) { .vis-cables { height: 110px; } }
@media (prefers-reduced-motion: reduce) { html body .g-exact .btn-primary, html body .g-exact .btn-secondary, .g-cyborg::before, .vis-cables .p, .game-card::after, .vc-result-value.vis-roll *, .section *, .hub-card { animation: none !important; } }
/* ---- card collection carousel (homepages) ---- */
.gc-sec { max-width: 1200px; margin: 0 auto; padding: 70px 0 40px; }
.gc-intro { max-width: 820px; margin: 0 auto 26px; padding: 0 20px; text-align: center; }
.gc-intro h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; margin: 0 0 12px; background: linear-gradient(90deg,#FDE68A,#F0ABFC,#67E8F9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gc-intro p { font-size: 17px; line-height: 1.6; color: #CBD5E1; margin: 0 0 14px; }
.gc-points { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 8px; max-width: 700px; text-align: left; }
.gc-points li { padding: 10px 14px; border-radius: 12px; background: rgba(15,23,42,.72); border: 1px solid rgba(148,163,184,.18); color: #E2E8F0; font-size: 15px; }
.gc-points b { color: #fff; }
.gc-stage { position: relative; margin-top: 26px; }
.gc-track { direction: ltr; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px calc(50% - 280px); scrollbar-width: none; perspective: 1400px; }
.gc-track::-webkit-scrollbar { display: none; }
.gc-card { flex: 0 0 560px; scroll-snap-align: center; position: relative; border-radius: 16px; cursor: pointer; transform: scale(.82); opacity: .5; filter: saturate(.7);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s, filter .45s; transform-style: preserve-3d; }
.gc-card img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 26px 60px rgba(0,0,0,.6); pointer-events: none; }
.gc-card.on { transform: scale(1); opacity: 1; filter: none; }
.gc-card::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, var(--sh1) 45%, var(--sh2) 50%, var(--sh3) 55%, transparent 70%); background-size: 260% 260%; background-position: 100% 0; }
.gc-card { --sh1: rgba(255,255,255,.35); --sh2: rgba(0,240,255,.25); --sh3: rgba(255,46,136,.22); animation: gc-idle 6s ease-in-out infinite; }
.gc-card:nth-child(2n) { animation-delay: -2s; } .gc-card:nth-child(3n) { animation-delay: -4s; }
.gc-card.on { animation: gc-tilt 4.2s ease-in-out infinite; }
.gc-card.on::after { animation: gc-sheen 4.2s ease-in-out infinite; }
.gc-card.on.play { animation: gc-tilt 2.2s ease-in-out 1, gc-tilt 4.2s ease-in-out 2.2s infinite; }
@keyframes gc-idle { 0%,100% { transform: scale(.82) rotateY(-4deg); } 50% { transform: scale(.82) rotateY(4deg) translateY(-4px); } }
.gc-card[data-k="wood"] { --sh1: rgba(255,220,170,.18); --sh2: rgba(210,150,90,.14); --sh3: rgba(255,200,140,.1); }
.gc-card[data-k="iron"] { --sh1: rgba(230,236,245,.3); --sh2: rgba(160,170,185,.25); --sh3: rgba(255,255,255,.15); }
.gc-card[data-k="bronze"] { --sh1: rgba(255,200,150,.35); --sh2: rgba(230,140,80,.3); --sh3: rgba(255,220,180,.2); }
.gc-card[data-k="silver"] { --sh1: rgba(255,255,255,.45); --sh2: rgba(200,210,225,.35); --sh3: rgba(255,255,255,.25); }
.gc-card[data-k="gold"], .gc-card[data-k="founder"] { --sh1: rgba(255,240,170,.45); --sh2: rgba(255,200,60,.35); --sh3: rgba(255,255,220,.25); }
.gc-card[data-k="platinum"] { --sh1: rgba(235,248,255,.45); --sh2: rgba(150,210,255,.35); --sh3: rgba(255,255,255,.25); }
.gc-card[data-k="emerald"] { --sh1: rgba(190,255,220,.4); --sh2: rgba(40,220,130,.32); --sh3: rgba(220,255,240,.2); }
.gc-card[data-k="whale"], .gc-card[data-k="genesis"] { --sh1: rgba(255,255,255,.35); --sh2: rgba(160,90,255,.32); --sh3: rgba(0,240,255,.3); }
@keyframes gc-tilt { 0% { transform: scale(1) rotateY(0) rotateX(0); } 25% { transform: scale(1.03) rotateY(-10deg) rotateX(4deg); } 55% { transform: scale(1.03) rotateY(10deg) rotateX(-3deg); } 80% { transform: scale(1.01) rotateY(-3deg); } 100% { transform: scale(1) rotateY(0) rotateX(0); } }
@keyframes gc-sheen { 0% { opacity: 0; background-position: 100% 0; } 20% { opacity: .9; } 80% { opacity: .9; } 100% { opacity: 0; background-position: 0 100%; } }
.gc-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(34,211,238,.5);
  background: rgba(10,14,23,.85); color: #fff; font-size: 26px; cursor: pointer; box-shadow: 0 0 20px rgba(34,211,238,.25); }
.gc-arrow:hover { background: rgba(34,211,238,.18); }
.gc-prev { left: 12px; } .gc-next { right: 12px; }
.gc-cap { text-align: center; margin-top: 4px; min-height: 64px; padding: 0 20px; }
.gc-cap strong { display: block; font-size: 22px; color: #fff; }
.gc-cap span { color: #94A3B8; font-size: 15px; }
.gc-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.gc-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(148,163,184,.35); }
.gc-dots i.on { background: #22D3EE; box-shadow: 0 0 8px #22D3EE; }
.gc-note { max-width: 760px; margin: 18px auto 0; padding: 0 20px; text-align: center; font-size: 13px; color: #94A3B8; }
@media (max-width: 700px) {
  .gc-track { padding: 20px 9%; gap: 10px; }
  .gc-card { flex-basis: 82%; }
  .gc-arrow { width: 42px; height: 42px; font-size: 20px; top: 45%; }
}
@media (prefers-reduced-motion: reduce) { .gc-card, .gc-card.on, .gc-card.on::after, .gc-card.on.play { animation: none !important; transition: none; } }
/* ---- robot animations (preview 2026-09-30, GPU-only: transform/opacity) ---- */
.g-cyborg img { animation: an-float 6s ease-in-out infinite; }
@keyframes an-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.g-cyborg .an-eye { position: absolute; left: 27.9%; top: 44.6%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 12%, #00F0FF 30%, rgba(0,240,255,0) 70%); mix-blend-mode: screen; animation: an-eye 2.4s ease-in-out infinite; }
@keyframes an-eye { 0%, 100% { opacity: .35; transform: translateY(0) scale(.7); } 50% { opacity: 1; transform: translateY(-4px) scale(1.2); } }
.g-sit .an-wrap { position: absolute; right: 6px; width: var(--w, 92px); top: calc(var(--w, 92px) * -1.30 - 8px); transform-origin: 50% 64%; animation: an-rock 3.2s ease-in-out infinite; }
.g-sit .an-wrap img { position: static; width: 100%; display: block; }
@media (max-width: 560px) { .g-sit .an-wrap { --w: 70px; right: 2px; } }
@keyframes an-rock { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.g-joystick { transform-origin: 50% 80%; }
.g-joystick.an-in { animation: an-wiggle 1.4s ease-in-out 2; }
@keyframes an-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }
.g-18 { animation: an-bob 5s ease-in-out infinite; }
@keyframes an-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.g-head h1 { animation: an-glitch .9s steps(2) 1 .3s; }
@keyframes an-glitch { 0% { text-shadow: 3px 0 #FF2E88, -3px 0 #00F0FF; transform: translateX(2px); } 25% { text-shadow: -4px 0 #FF2E88, 4px 0 #00F0FF; transform: translateX(-3px) skewX(-4deg); }
  50% { text-shadow: 2px 0 #FF2E88, -2px 0 #00F0FF; } 100% { text-shadow: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .g-cyborg img, .g-cyborg .an-eye, .g-sit .an-wrap, .g-joystick.an-in, .g-18, .g-head h1 { animation: none !important; } }
/* long article titles: one line in the breadcrumb on phones (the H1 shows the full title) */
@media (max-width: 600px) { nav.crumbs li[aria-current="page"] { display: inline-block; vertical-align: middle; max-width: 62vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } nav.crumbs li[aria-current="page"]::before { margin-inline-end: 10px; } }

/* ---- latest-news block on game pages (news_pages.py) ---- */
.g-fresh { max-width: 900px; margin: 18px auto; padding: 16px 18px; border: 1px solid rgba(34,211,238,.35); border-radius: 14px; background: rgba(34,211,238,.05); }
.g-fresh h2 { font-size: 18px; margin: 0 0 8px; }
.g-fresh a { color: inherit; }
.g-fresh p { margin: 4px 0; font-size: 15px; }
.g-fresh p a[href$="-news.html"] { color: #A5F3FC; }

/* ---- card teasers: hero chip + mini card under every bot CTA (card_teaser.py) ---- */
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hero-chips .hero-badge { margin-bottom: 0 !important; }
.hero-card-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px;
  color: #FDE68A; background: linear-gradient(135deg, rgba(253,230,138,.12), rgba(240,171,252,.1)); border: 1px solid rgba(253,230,138,.45); }
.hero-card-chip:hover { border-color: #FDE68A; }
.gc-teaser { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(135deg, rgba(253,230,138,.07), rgba(34,211,238,.06)); border: 1px solid rgba(253,230,138,.35); color: #E2E8F0; }
.gc-teaser:hover { border-color: #FDE68A; }
.gc-teaser .t-card { position: relative; width: 96px; border-radius: 8px; overflow: hidden; transform: rotate(-4deg); box-shadow: 0 8px 18px rgba(0,0,0,.5); animation: t-tilt 4s ease-in-out infinite; }
.gc-teaser .t-card img { display: block; width: 100%; height: auto; }
.gc-teaser .t-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, rgba(0,240,255,.35) 52%, transparent 65%);
  background-size: 250% 250%; mix-blend-mode: color-dodge; animation: t-sheen 3s ease-in-out infinite; }
.gc-teaser strong { display: block; font-size: 15px; color: #fff; line-height: 1.35; }
.gc-teaser span { display: block; font-size: 13px; color: #94A3B8; margin-top: 3px; }
.gc-teaser em { font-style: normal; color: #FDE68A; font-weight: 700; }
@keyframes t-tilt { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
@keyframes t-sheen { 0% { background-position: 100% 0; } 100% { background-position: 0 100%; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .gc-teaser .t-card, .gc-teaser .t-card::after { animation: none; } html { scroll-behavior: auto; } }
/* start the flying icons only after the page has loaded (keeps first paint light on phones) */
html:not(.gav-ld) .g-cyborg .cy-ico, html:not(.gav-ld) .g-cyborg .cy-beam { animation-play-state: paused; }
@media (max-width: 360px) {
  .g-head { grid-template-columns: 1fr 100px; }
  .g-tool .g-robot.g-cyborg { width: 100px; --travel: -36px; }
}
@media (prefers-reduced-motion: reduce) { .g-cyborg .cy-ico, .g-cyborg .cy-beam, .g-sit img.blink { animation: none; } }