/* ============================================================
   GameAccountValue — brand design system
   Aurora-glass: deep charcoal-emerald base, gold/emerald brand
   gradient, frosted glass surfaces, soft drifting aurora light.
   Same visual language as the Telegram Mini App and PDF
   certificate (core/drawer.py) — same brand fonts, same tier-
   gold/emerald gradient, so the whole product reads as one thing.
   ============================================================ */

@font-face {
  font-family: 'GAVSerif';
  src: url('./fonts/serif.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'GAVBody';
  src: url('./fonts/body.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Reduced-motion guard for the @view-transition rule further down this
   file (cross-fade between pages). The generic "* { animation: none }"
   reduced-motion block below doesn't reach these — ::view-transition-*
   are generated pseudo-elements outside the normal document tree, not
   matched by a plain universal selector — so they need their own rule. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

:root {
  --gold: #D4AF37;
  --gold-rgb: 212,175,55;
  --emerald: #12b892;
  --emerald-rgb: 18,184,146;
  --bg: #08100E;
  --bg-2: #0c1614;
  --card: rgba(255,255,255,0.045);
  --card-solid: #10191c;
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(212,175,55,0.4);
  --text: #F1F2F6;
  --muted: #9c9cac;
  --accent: #2dd4bf;
  --accent-rgb: 45,212,191;
  --radius: 18px;
  --radius-sm: 12px;
  --serif: 'GAVSerif', Georgia, 'Times New Roman', serif;
  --body-font: 'GAVBody', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); }
/* Specificity note: every localized page carries its own inline <style>
   block (per-locale h1/line-height tuning for Arabic/CJK/German text
   length — see assets/style.css history) that ALSO sets a plain
   `body { background / font-family }` AFTER this stylesheet loads. Equal
   specificity + later source order means that inline rule wins and
   silently flattens any `body{...}` declared here. `html body` has one
   extra type selector of specificity, so it wins regardless of source
   order, without having to touch any of the 16 localized HTML files. */
html body {
  font-family: var(--body-font);
  position: relative;
  /* Near-flat black, Linear/Apple-style restraint — a bare hint of brand
     color in two corners instead of a loud all-over glow. The wow here
     is meant to come from typography scale and the certificate screenshot,
     not from background decoration competing with them. */
  background:
    radial-gradient(ellipse 60% 45% at 6% -10%, rgba(var(--gold-rgb), 0.09), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 110%, rgba(var(--emerald-rgb), 0.08), transparent 55%),
    var(--bg);
  background-attachment: fixed, fixed, fixed;
}

/* ---- shared glass-panel look, used across cards/steps/faq/footer box ---- */
.game-card, .step, details, .cert-sample img, .lang-dropdown {
  background: var(--card);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .game-card, .step, details { background: var(--card-solid); }
}

/* ---- nav ---- */
nav {
  background: rgba(8,16,14,0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 100;
}
.logo {
  font-family: var(--serif);
  font-variation-settings: 'wght' 750;
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  letter-spacing: 0.2px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.logo::before {
  content: '';
  width: 22px; height: 22px; flex-shrink: 0;
  background: linear-gradient(135deg, #f2d989 0%, var(--gold) 48%, var(--emerald) 100%);
  clip-path: polygon(50% 0%, 100% 38%, 50% 100%, 0% 38%);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.55);
}
.nav-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lang-selector {
  /* .lang-dropdown below is position:absolute — without this, it anchors to
     the nearest positioned ancestor (the sticky <nav>, or higher), landing
     it in the wrong spot and overlapping page content instead of sitting
     under its own toggle button. */
  position: relative;
}
.lang-btn {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; color: var(--text); background: rgba(255,255,255,0.03);
  font-family: inherit; user-select: none; transition: border-color .2s, background .2s;
}
.lang-btn:hover { border-color: var(--border-strong); background: rgba(212,175,55,0.08); }
.lang-selector.open .lang-arrow { transform: rotate(180deg); }
.lang-selector.open .lang-dropdown { display: block; }
.lang-dropdown {
  /* Overrides the shared frosted-glass rule above (background: var(--card),
     ~4.5% opacity) — a menu that overlaps page content needs a solid
     backing, not a translucent one, or the site's own text bleeds through
     and the language names become unreadable. */
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}
.lang-dropdown a { display: block; padding: 9px 11px; border-radius: 7px; color: var(--text); text-decoration: none; font-size: 14px; white-space: nowrap; transition: background .15s; }
.lang-dropdown a:hover { background: rgba(212,175,55,0.12); }
.lang-dropdown a.lang-current { color: var(--gold); font-weight: 700; }
.nav-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #f0d580, var(--gold) 55%, #b68f2a);
  color: #0c0a04; padding: 9px 20px; border-radius: 9px; text-decoration: none;
  font-weight: 700; font-size: 14px; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(var(--gold-rgb), 0.28);
  transition: transform .15s, box-shadow .15s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(var(--gold-rgb), 0.4); }
@media (max-width: 420px) {
  nav { padding: 12px 16px; }
  .logo { font-size: 16px; }
  .nav-cta { padding: 8px 15px; font-size: 13px; }
  .sticky-cta {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: linear-gradient(135deg, var(--gold), #8B6914);
    padding: 12px 24px; padding-bottom: max(12px, env(safe-area-inset-bottom));
    text-align: center; box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  }
  .sticky-cta a {
    display: inline-block; color: #0c0a04; font-weight: 700; font-size: 14px;
    text-decoration: none;
  }
  body { padding-bottom: 60px; }
}
@media (min-width: 421px) {
  .sticky-cta { display: none; }
}

/* ---- hero ---- */
.hero {
  position: relative; text-align: center; padding: 100px 24px 56px; max-width: 800px; margin: 0 auto;
}
.hero-badge {
  display: inline-block;
  background: rgba(212,175,55,0.08);
  border: 1px solid var(--border-strong);
  color: var(--gold);
  padding: 7px 18px; border-radius: 30px; font-size: 13px; font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 26px;
}
h1 span {
  color: var(--gold);
  background: linear-gradient(90deg, var(--gold), #f2d989, var(--emerald), var(--gold));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: gold-shimmer 6s ease-in-out infinite;
}
@keyframes gold-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
body h1 {
  /* font-size/line-height stay owned by each locale's own inline <style>
     block (tuned per-language for word length — German/Japanese/Arabic
     need different clamp ranges) — only add family/spacing here so we
     never fight that per-locale tuning. See the html-body note above. */
  font-family: var(--serif); font-variation-settings: 'wght' 800; letter-spacing: -0.015em;
}
.cta-group { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
/* EU AI Act Art. 50(1): explicit "you're talking to an AI" notice at the
   entry point, so it stands regardless of what the bot's own first message
   says (that lives in the separate private backend repo, out of our reach). */
.ai-notice { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 16px; }
.btn-primary {
  background: var(--gold);
  color: #0c0a04; padding: 16px 32px; border-radius: 10px; text-decoration: none;
  font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 8px;
  transition: transform .18s ease, background .18s ease;
}
.btn-primary:hover { transform: translateY(-2px); background: #e4c04f; }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  border: 1px solid var(--border); color: var(--text); padding: 16px 32px; border-radius: 12px;
  text-decoration: none; font-size: 16px; background: rgba(255,255,255,0.03);
  transition: border-color .18s, background .18s, transform .18s;
}
.btn-secondary:hover { border-color: var(--border-strong); background: rgba(212,175,55,0.06); transform: translateY(-2px); }

/* ---- stats ---- */
.stats {
  display: flex; justify-content: center; gap: 48px; padding: 40px 24px; flex-wrap: wrap;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat { text-align: center; }
.stat-num {
  font-family: var(--serif); font-variation-settings: 'wght' 800;
  font-size: 34px; font-weight: 800;
  background: linear-gradient(135deg, #f2d989, var(--gold) 60%, var(--emerald));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold);
}
.stat-lbl { font-size: 13px; color: var(--muted); margin-top: 4px; }

.section { max-width: 1000px; margin: 0 auto; padding: 68px 24px; }
.section-sub { text-align: center; color: var(--muted); margin-bottom: 42px; }
body .section-title { font-family: var(--serif); font-variation-settings: 'wght' 750; letter-spacing: -0.005em; }

/* ---- game cards ---- */
.games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.game-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 16px; text-align: center;
  transition: border-color 0.22s, transform 0.22s, box-shadow .22s, background .22s;
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  opacity: 0; animation: rise-in .5s ease-out forwards;
}
.games-grid .game-card:nth-child(1) { animation-delay: .02s; }
.games-grid .game-card:nth-child(2) { animation-delay: .06s; }
.games-grid .game-card:nth-child(3) { animation-delay: .10s; }
.games-grid .game-card:nth-child(4) { animation-delay: .14s; }
.games-grid .game-card:nth-child(5) { animation-delay: .18s; }
.games-grid .game-card:nth-child(6) { animation-delay: .22s; }
.games-grid .game-card:nth-child(7) { animation-delay: .26s; }
.games-grid .game-card:nth-child(8) { animation-delay: .30s; }
.games-grid .game-card:nth-child(9) { animation-delay: .34s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.game-card:hover {
  border-color: var(--border-strong); transform: translateY(-4px);
  background: rgba(212,175,55,0.05);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--gold-rgb),0.15) inset;
}
.game-card.coming-soon { cursor: default; animation: none; opacity: .55; }
.game-card.coming-soon .game-icon { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.08), rgba(255,255,255,0.03) 70%); border-color: var(--border); }
.game-card.coming-soon:hover { border-color: var(--border); transform: none; background: none; box-shadow: none; }
.game-card.coming-soon:hover .game-icon { transform: none; }
.game-icon {
  font-size: 26px; margin: 0 auto 12px; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(var(--gold-rgb),0.28), rgba(var(--emerald-rgb),0.12) 70%);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  transition: transform .22s;
}
.game-card:hover .game-icon { transform: scale(1.08) rotate(-4deg); }
.game-name { font-weight: 600; font-size: 14px; }

/* ---- steps ---- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; position: relative; }
.step {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 22px; transition: border-color .2s, transform .2s;
}
.step:hover { border-color: var(--border-strong); transform: translateY(-3px); }
/* Cursor-tracking spotlight, position set via --mx/--my by interactions.js.
   Kept off .game-card/.cert-sample img on purpose — those already tilt in
   3D, and layering a glow on top of a tilt reads as clutter, not polish. */
.step::before, details::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--gold-rgb), 0.14), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.step:hover::before, details:hover::before { opacity: 1; }
.step h3 { font-size: 16px; margin-bottom: 8px; font-weight: 700; }
.step p { font-size: 14px; color: var(--muted); line-height: 1.55; }

.cert-sample { max-width: 820px; margin: 48px auto 0; text-align: center; }
.cert-sample-label { color: var(--muted); font-size: 12px; margin-bottom: 16px; letter-spacing: 0.6px; text-transform: uppercase; }
.cert-sample img {
  width: 100%; height: auto; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  /* Linear/Apple-style "elevated product shot": one confident, mostly
     neutral drop shadow doing the work, not a colored glow halo. */
  box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.4);
  transition: transform .15s ease-out;
}

/* One-time holo sweep for mobile visitors who scroll past without ever
   dragging the card — assets/tilt.js adds .tilt-idle-sweep via
   IntersectionObserver the first time the card enters view. A separate
   ::after layer (not the JS-driven .tilt-sheen/.tilt-iris divs) so this
   can never fight the live drag animation. */
.tilt-sheen-wrap.tilt-idle-sweep::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
  background-size: 250% 250%;
  mix-blend-mode: overlay;
  animation: tilt-idle-sweep 2.4s ease-in-out .5s 1;
}
@keyframes tilt-idle-sweep {
  0%   { background-position: 130% 130%; opacity: 0; }
  15%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { background-position: -30% -30%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tilt-sheen-wrap.tilt-idle-sweep::after { animation: none; }
}

/* ---- features ---- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature-icon {
  font-size: 21px; flex-shrink: 0; margin-top: 0;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(var(--gold-rgb),0.20), rgba(var(--emerald-rgb),0.14));
  border: 1px solid rgba(var(--gold-rgb),0.2);
}
.feature h3 { font-size: 15px; margin-bottom: 4px; font-weight: 700; }
.feature p { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* ---- faq ---- */
.faq { max-width: 700px; margin: 0 auto; }
details {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden;
  transition: border-color .2s;
}
details[open] { border-color: var(--border-strong); }
summary { padding: 17px 20px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--gold); font-size: 20px; flex-shrink: 0; transition: transform .2s; }
details[open] summary::after { content: '−'; }
details p { padding: 0 20px 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--border); padding: 44px 24px; text-align: center; color: var(--muted); font-size: 13px; }
footer a { color: var(--muted); text-decoration: none; margin: 0 10px; transition: color .15s; }
footer a:hover { color: var(--gold); }
.footer-logo {
  font-family: var(--serif); font-variation-settings: 'wght' 800;
  font-size: 21px; font-weight: 800; color: var(--gold); margin-bottom: 18px;
}

/* Smooth cross-fade between language pages (Chrome/Edge/Safari 18.2+; other
   browsers ignore the at-rule and just navigate normally, no fallback code
   needed). Pairs with the speculationrules prerender on the lang dropdown. */
@view-transition {
  navigation: auto;
}

/* Reveal-on-scroll for the below-the-fold sections that don't already have
   a load-time entrance (the game cards do, via .rise-in above). Guarded by
   @supports so browsers without scroll-driven animations (~16% in 2026,
   mainly older Firefox) just show the content immediately — never hidden. */
@supports (animation-timeline: view()) {
  .step, .feature, details, .cert-sample {
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes reveal-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--gold); color: #000; padding: 10px 16px; z-index: 1000; font-weight: 700; text-decoration: none; border-radius: 0 0 6px 0; }
.skip-link:focus { left: 0; }

/* --- Value calculator widget (client-side only, no data collected) --- */
.value-calc {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 140% 60% at 50% -10%, rgba(255,255,255,0.05), transparent 60%),
    var(--card);
  border: 1px solid var(--border-strong); border-radius: 16px 16px 42px 42px;
  padding: 26px 24px 24px; margin: 24px 0 32px;
  scroll-margin-top: 128px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28), 0 0 0 1px rgba(var(--gold-rgb),0.06) inset;
}
/* Gamepad-console layout: title/subtitle intro text first, then the
   "screen" (vc-result, already styled as a recessed LCD below), then the
   D-pad + real controls (vc-sliders) — reordered visually only, DOM order
   stays title/subtitle/sliders/result so no page markup needed changing. */
.value-calc .vc-title { order: 1; }
.value-calc .vc-subtitle { order: 2; }
.value-calc .vc-result { order: 3; }
.value-calc .vc-sliders { order: 4; }
.value-calc::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), #f2d989, var(--emerald), var(--gold));
  background-size: 300% 100%; animation: gold-shimmer 6s ease-in-out infinite;
}
.value-calc .vc-title {
  display: inline-block; font-family: var(--serif); font-variation-settings: 'wght' 750; font-size: 13px;
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(212,175,55,0.08); border: 1px solid var(--border-strong);
  padding: 6px 14px; border-radius: 30px; margin-bottom: 10px;
}
.value-calc .vc-subtitle { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.value-calc .vc-field { margin-bottom: 16px; }
.value-calc .vc-field label { display: block; font-size: 14px; margin-bottom: 6px; color: var(--text); }
.value-calc .vc-field label strong { color: var(--gold); font-weight: 700; }
.value-calc input[type="range"] {
  width: 100%; accent-color: var(--gold); height: 5px; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.08); border-radius: 3px; outline: none;
}
.value-calc input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: transparent; }
.value-calc input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: transparent; }
.value-calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 32px; height: 36px; margin-top: -16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='36' viewBox='0 0 32 36'%3E%3Cellipse cx='16' cy='33' rx='8' ry='2.5' fill='%23000000' opacity='0.35'/%3E%3Crect x='13' y='15' width='6' height='15' rx='3' fill='%23D4AF37'/%3E%3Ccircle cx='16' cy='11' r='10' fill='%23D4AF37' stroke='%23f2d989' stroke-width='1.5'/%3E%3Ccircle cx='12.5' cy='7.5' r='3.3' fill='%23f2d989' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain; cursor: grab;
  transition: transform .12s ease-out;
}
.value-calc input[type="range"]::-moz-range-thumb {
  width: 32px; height: 36px; border: none; border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='36' viewBox='0 0 32 36'%3E%3Cellipse cx='16' cy='33' rx='8' ry='2.5' fill='%23000000' opacity='0.35'/%3E%3Crect x='13' y='15' width='6' height='15' rx='3' fill='%23D4AF37'/%3E%3Ccircle cx='16' cy='11' r='10' fill='%23D4AF37' stroke='%23f2d989' stroke-width='1.5'/%3E%3Ccircle cx='12.5' cy='7.5' r='3.3' fill='%23f2d989' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain; background-color: transparent; cursor: grab;
}
.value-calc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }
.value-calc input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 50%; }
.value-calc input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .value-calc input[type="range"]::-webkit-slider-thumb { transition: none; } }
/* WCAG 2.5.5: touch targets need to be at least 44x44 CSS px — the 32x36
   size above is tuned for mouse precision, so bump it up specifically on
   coarse (touch) pointers rather than penalizing desktop's look for it. */
@media (pointer: coarse) {
  .value-calc input[type="range"] { height: 8px; }
  .value-calc input[type="range"]::-webkit-slider-thumb {
    width: 44px; height: 50px; margin-top: -21px;
  }
  .value-calc input[type="range"]::-moz-range-thumb { width: 44px; height: 50px; }
}
.value-calc .vc-choice-heading { display: block; font-size: 14px; color: var(--text); margin-bottom: 8px; }
.value-calc .vc-choice-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.value-calc .vc-choice-tiles input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.value-calc .vc-choice-tile {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-width: 44px; min-height: 44px; padding: 8px 14px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
.value-calc .vc-choice-tile:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.07); }
.value-calc .vc-choice-tiles input:checked + .vc-choice-tile {
  border-color: var(--gold); background: rgba(212,175,55,0.14); color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset, 0 0 12px rgba(212,175,55,0.35);
  transform: translateY(1px);
}
.value-calc .vc-choice-tiles input:focus-visible + .vc-choice-tile { outline: 2px solid var(--emerald); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .value-calc .vc-choice-tile { transition: none; } }
.value-calc .vc-checkbox-heading { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.value-calc .vc-checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.value-calc .vc-checkbox {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
}
.value-calc .vc-checkbox:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.07); }
.value-calc .vc-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); flex-shrink: 0; }
.value-calc .vc-checkbox:has(input:checked) {
  border-color: var(--gold); background: rgba(212,175,55,0.14); color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset, 0 0 12px rgba(212,175,55,0.35);
  transform: translateY(1px);
}
.value-calc .vc-checkbox:has(input:focus-visible) { outline: 2px solid var(--emerald); outline-offset: 2px; }
.value-calc .vc-result {
  margin: 4px 0 20px; padding: 18px 16px 16px; text-align: center;
  background: linear-gradient(180deg, #060a09, #0b1210);
  border: 3px solid #1c1c1c; border-radius: var(--radius-sm);
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(var(--gold-rgb),0.08), 0 2px 0 rgba(0,0,0,0.4);
}
.value-calc .vc-result-value { display: block; font-family: var(--serif); font-size: 30px; font-weight: 800; color: var(--emerald); margin-bottom: 4px; }
.value-calc .vc-result-note { display: block; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.value-calc .vc-share-btn { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; transition: background .15s; }
.value-calc .vc-share-btn:hover { background: rgba(255,255,255,0.12); }
.value-calc .vc-share-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.value-calc .vc-scale { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; margin: 0 auto 12px; max-width: 260px; }
.value-calc .vc-scale-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--emerald), var(--gold)); transition: width .2s ease-out; }
.value-calc .vc-meta { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.value-calc .vc-tier { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); color: var(--muted); }
.value-calc .vc-tier.tier-casual { color: var(--text); border-color: var(--border); }
.value-calc .vc-tier.tier-pro { color: var(--emerald); border-color: var(--emerald); }
.value-calc .vc-tier.tier-collector { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(var(--gold-rgb),0.25); }
.value-calc .vc-confidence { font-size: 11px; color: var(--muted); }
.value-calc .vc-switcher { width: 100%; background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid var(--border-strong); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; cursor: pointer; margin-bottom: 18px; }
.value-calc .vc-switcher option { background: var(--card-solid); }

/* Gamepad D-pad + A/B: a remote-control layer over the real inputs below —
   left/right nudge whichever field is highlighted, up/down move the
   highlight, A toggles a checkbox item, B shares the result. Every button
   only sets .value/.checked on the real input then dispatches its normal
   event, so this never becomes a second source of truth for the score. */
.value-calc .vc-gamepad {
  direction: ltr; /* a physical controller doesn't mirror for RTL languages */
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-bottom: 22px; padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15));
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}
.value-calc .vc-dpad {
  position: relative; width: 108px; height: 108px; flex-shrink: 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: ". up ." "left center right" ". down .";
}
/* Real touch screens force a 44x44 min touch target on every dpad button
   (WCAG 2.5.5) — the 3x3 grid has to grow to fit 3 of those (132px+) or the
   grid's min-content silently overflows its declared 108px box. Both rules
   live in the SAME media query so they can never drift out of sync again. */
@media (pointer: coarse) {
  .value-calc .vc-dpad { width: 140px; height: 140px; }
}
.value-calc .vc-dpad-btn {
  background: linear-gradient(180deg, #2a2a2e, #16161a); color: var(--gold);
  border: 1px solid rgba(255,255,255,0.08); font-size: 15px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform .08s ease-out, background .12s;
}
.value-calc .vc-dpad-btn:hover { background: linear-gradient(180deg, #34343a, #1c1c20); }
.value-calc .vc-dpad-btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,0.5); }
.value-calc .vc-dpad-btn:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.value-calc .vc-dpad-up { grid-area: up; border-radius: 6px 6px 0 0; }
.value-calc .vc-dpad-down { grid-area: down; border-radius: 0 0 6px 6px; }
.value-calc .vc-dpad-left { grid-area: left; border-radius: 6px 0 0 6px; }
.value-calc .vc-dpad-right { grid-area: right; border-radius: 0 6px 6px 0; }
.value-calc .vc-dpad-center { grid-area: center; background: #16161a; border: 1px solid rgba(255,255,255,0.06); }
.value-calc .vc-abtns { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.value-calc .vc-btn-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.value-calc .vc-btn-round {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #f2d989, var(--gold) 65%, #a8842a);
  color: #201802; font-weight: 800; font-size: 14px; border: 1px solid rgba(0,0,0,0.3);
  box-shadow: 0 3px 0 rgba(0,0,0,0.45), inset 0 1px 1px rgba(255,255,255,0.5);
  transition: transform .08s ease-out;
}
.value-calc .vc-btn-round:hover { filter: brightness(1.08); }
.value-calc .vc-btn-round:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.45); }
.value-calc .vc-btn-round:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.value-calc .vc-btn-b { background: radial-gradient(circle at 35% 30%, #7fe0c8, var(--emerald) 65%, #0a7a61); color: #04211a; }
.value-calc .vc-btn-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--muted); max-width: 64px; text-align: center; line-height: 1.15;
}

/* Highlight for whichever field the D-pad currently targets */
.value-calc .vc-field.vc-field-active {
  border-radius: var(--radius-sm); padding: 8px; margin: -8px -8px 8px;
  box-shadow: 0 0 0 2px var(--emerald), 0 0 14px rgba(var(--emerald-rgb),0.35);
  transition: box-shadow .15s;
}
.value-calc .vc-checkbox-group.vc-field.vc-field-active { box-shadow: none; padding: 0; margin: 0 0 16px; }
.value-calc .vc-checkbox.vc-field-active {
  border-color: var(--emerald); box-shadow: 0 0 0 2px var(--emerald), 0 0 14px rgba(var(--emerald-rgb),0.35);
}
@media (pointer: coarse) { .value-calc .vc-dpad-btn, .value-calc .vc-btn-round { min-width: 44px; min-height: 44px; } .value-calc .vc-btn-round { width: 48px; height: 48px; } }
@media (max-width: 480px) { .value-calc { padding: 18px; } .value-calc .vc-result-value { font-size: 24px; } .value-calc .vc-gamepad { padding: 12px 10px; gap: 8px; flex-wrap: nowrap; } }
@media (max-width: 360px) { .value-calc .vc-gamepad { gap: 4px; } .value-calc .vc-btn-label { max-width: 52px; font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .value-calc .vc-scale-fill { transition: none; } .value-calc .vc-dpad-btn, .value-calc .vc-btn-round { transition: none; } }