/* =====================================================
   ADICTO DARE — Neon Vortex Edition
   Design system: pure black surfaces, electric cyan as
   the dominant neon, hot magenta as secondary accent.
   Inspired by the campaign poster's radial-rays vortex.

   Variable NAMES are kept from the original chocolate
   theme (--cocoa-*, --gold-*, --cream-*) so the rest of
   the stylesheet doesn't need rewriting — only the values
   here change. Mentally translate as:
     --cocoa-* → near-blacks with blue tint
     --gold-*  → electric cyan (the dominant neon)
     --cream-* → pure white text
   The new --magenta-* tokens are added for the secondary
   neon accent (hot pink/magenta) seen in the poster.
   ===================================================== */

:root {
  /* Color tokens — the neon vortex palette */
  --cocoa-900: #000004;          /* deepest pure black with faint blue undertone */
  --cocoa-800: #06080F;          /* near-black surface */
  --cocoa-700: #0C111C;          /* elevated surface, slight navy hint */
  --cocoa-600: #161E2E;          /* mid-dark navy */
  --cocoa-500: #1F2A40;          /* lighter dark for hover states */

  --gold-400: #5EE2FF;           /* bright cyan — for hover & highlights */
  --gold-500: #00D4FF;           /* primary electric cyan — the dominant accent */
  --gold-600: #0099CC;           /* deep cyan — for shadows & active states */

  --cream-100: #FFFFFF;          /* pure white — highest contrast text */
  --cream-200: #E0E8F2;          /* dimmed off-white with cool tint */
  --cream-300: #8FA0B8;          /* steel-grey secondary text */

  /* Secondary neon — the hot magenta from the poster's outer rays */
  --magenta-400: #FF52A8;        /* bright magenta */
  --magenta-500: #FF1B8D;        /* primary hot magenta */
  --magenta-600: #C8006B;        /* deep magenta */

  /* Deep blue used in the vortex rays for depth */
  --blue-deep: #0044FF;

  --jungle: #4A7C59;             /* (unused — kept for token compat) */
  --jungle-bright: #6FAE7A;

  /* Functional tokens */
  --bg: var(--cocoa-900);
  --surface: var(--cocoa-800);
  --surface-2: var(--cocoa-700);
  --ink: var(--cream-100);
  --ink-dim: rgba(224, 232, 242, 0.62);
  --ink-faint: rgba(224, 232, 242, 0.18);
  --gold: var(--gold-500);

  /* Typography
     IMPORTANT: These three fonts were chosen specifically because
     they ALL ship a Cyrillic subset on Google Fonts. The original
     English design used Bungee + Fraunces + Press Start 2P — those
     are Latin-only and would fall back to system fonts when
     rendering Mongolian. The replacements below preserve the
     same role and visual weight:
       - Russo One   ≈ Bungee        (chunky display)
       - Lora        ≈ Fraunces      (warm serif body)
       - JetBrains Mono Bold ≈ Press Start 2P (mono UI labels) */
  --font-display: 'Averta CY', 'Lora', sans-serif;
  --font-italic: 'Lora', 'Averta CY', serif;
  --font-pixel: 'Lora', 'Averta CY', monospace;

  /* Radii */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;

  /* Shadows — dual-neon glow (cyan + magenta), like the poster */
  --shadow-soft: 0 10px 30px -8px rgba(0, 0, 0, 0.7);
  --shadow-deep: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
  --shadow-gold: 0 0 24px rgba(0, 212, 255, 0.55), 0 12px 40px -8px rgba(0, 212, 255, 0.4);
  --shadow-magenta: 0 0 24px rgba(255, 27, 141, 0.55), 0 12px 40px -8px rgba(255, 27, 141, 0.4);

  /* Container */
  --max-w: 1200px;
  --pad-x: clamp(20px, 5vw, 60px);
}

/* =====================================================
   RESET / BASE
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Account for sticky header offset on anchor jumps */
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Selection — gold on cocoa, themed */
::selection { background: var(--gold-500); color: var(--cocoa-900); }

/* =====================================================
   PIXEL/UI FONT WEIGHT
   JetBrains Mono needs Bold (700) at small label sizes to
   approximate the strong visual weight of a true pixel font.
   This single rule covers every utility that uses the pixel
   font family without having to set weight on each.
   ===================================================== */

[style*="--font-pixel"],
.eyebrow,
.hero__badge,
.hero__stat-label,
.dropzone__hint,
.result__meta dt,
.player__score-num,
.player__score-label,
.player__progress-labels,
.species-tab,
.level-card__num,
.level-card__badge,
.tickets__counter-num,
.ticket__stub,
.ticket__id,
.step__num,
.footer__col h4,
.footer__pixel {
  font-weight: 700;
}

/* =====================================================
   TYPOGRAPHY UTILITIES
   ===================================================== */

.eyebrow {
  font-family: var(--font-pixel);
  font-weight: 700;       /* JetBrains Mono needs Bold to read like a label */
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cream-300);
  text-transform: uppercase;
  margin: 0 0 18px;
}

.eyebrow--gold { color: var(--gold-400); }

/* =====================================================
   ITALIC TYPE — always Lora
   The display + body fallbacks were swapped to Averta CY in the
   Mongolian build, but Averta CY's italic isn't part of the
   foundry pack. This rule pins any italic element to Lora
   (loaded via Google Fonts in the layout head) so handwritten,
   editorial italic moments — the hero accent <em>, the
   .hero__title-strike, .text-accent, any inline <em>/<i> — get
   the warm serif italic the design depends on.
   ===================================================== */

.text-accent {
  color: var(--gold-400);
  font-style: italic;
  font-family: var(--font-italic);
  font-weight: 700;
  /* Optical kerning so the italic serif sits naturally next to Russo One */
  letter-spacing: -0.02em;
}

/* Section heading defaults */
.section__head { max-width: 720px; margin: 0 auto 64px; text-align: center; }

.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5.5vw, 68px);
  line-height: 0.95;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.section__sub {
  font-size: clamp(16px, 1.5vw, 19px);
  color: white;
  margin: 0;
  line-height: 1.6;
}

/* =====================================================
   BUTTONS
   ===================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
  position: relative;
  white-space: nowrap;
}

.btn--primary {
  background: var(--gold-500);
  color: var(--cocoa-900);
  box-shadow: var(--shadow-gold), inset 0 -3px 0 rgba(0,0,0,0.18);
}

.btn--primary:hover {
  background: var(--gold-400);
  transform: translateY(-2px);
  box-shadow: 0 18px 50px -8px rgba(0, 212, 255, 0.5), inset 0 -3px 0 rgba(0,0,0,0.18);
}

.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--cream-100);
  border: 1.5px solid rgba(224, 232, 242, 0.25);
}

.btn--ghost:hover {
  border-color: var(--gold-400);
  color: var(--gold-400);
}

.btn--text {
  padding: 14px 8px;
  background: transparent;
  color: var(--cream-200);
  font-weight: 500;
}

.btn--text:hover { color: var(--gold-400); }

.btn--large { padding: 18px 32px; font-size: 16px; }

/* =====================================================
   NAV
   ===================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-x);
  background: rgba(0, 0, 4, 0.65);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(224, 232, 242, 0.06);
  transition: padding 0.3s ease, background 0.3s ease;
}

.nav.is-scrolled {
  padding: 12px var(--pad-x);
  background: rgba(0, 0, 4, 0.85);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav__logo-img {
  display: block;
  height: 38px;
  width: auto;
  object-fit: contain;
  background: gold;
  border-radius: 4px;
}

.nav__logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--cream-100);
}

.nav__links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cream-200);
}

.nav__links a {
  position: relative;
  transition: color 0.2s ease;
}

.nav__links a:hover { color: var(--gold-400); }

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--gold-400);
  transition: width 0.25s ease;
}

.nav__links a:hover::after { width: 100%; }

/* Compact .btn variant for the navbar — keeps .btn--ghost's
   cream→cyan hover treatment but tightens it to fit the bar. */
.nav__cta {
  padding: 8px 14px;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1;
  min-height: 0;
}

.nav__cta svg {
  transition: transform 0.2s ease;
}

.nav__cta:hover svg { transform: translateX(2px); }

/* Logged-in account cluster — phone · score · logout connected in one pill */
.nav__account {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  background: rgba(0, 0, 4, 0.55);
  border: 1px solid rgba(224, 232, 242, 0.14);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}

.nav__account > * {
  display: inline-flex;
  align-items: center;
}

/* Animal avatar — sits flush at the left end of the pill, mirrors
   the level-card media treatment (cocoa background + cyan inner glow,
   chromakey filter to strip the green so the animal floats clean). */
.nav__account-avatar {
  width: 28px;
  height: 28px;
  margin: 3px 8px 3px 4px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(0, 212, 255, 0.2), transparent 70%),
    var(--cocoa-900);
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.35);
  flex: 0 0 auto;
}

.nav__account-avatar img {
  width: 130%;
  height: 130%;
  object-fit: cover;
  transform: translate(-7%, -5%);
  filter: url(#chromakey);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  margin-right: -4px;
}

.nav__account-phone {
  padding: 0 12px 0 14px;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cream-200);
  font-variant-numeric: tabular-nums;
}

.nav__account-score {
  gap: 4px;
  padding: 0 12px;
  border-left: 1px solid rgba(224, 232, 242, 0.14);
  color: var(--gold-400);
}

.nav__account-score-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.nav__account-score-label {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* button_to wraps the logout in a <form> — keep it inline so the
   button sits flush next to the account pill. */
.nav__logout-form {
  display: inline-flex;
  margin: 0;
  margin-left: 8px;
}

/* Logout reuses the redesigned .btn--ghost .nav__cta pill, but
   accents toward magenta to read as "exit / danger" — symmetric
   with login's cyan-leaning ghost. */
.nav__cta--logout:hover {
  border-color: var(--magenta-400);
  color: var(--magenta-400);
}

.nav__cta--logout:hover svg { transform: translateX(-2px); }

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__cta { padding: 7px 12px; font-size: 11px; }
}

@media (max-width: 520px) {
  /* Keep login/logout reachable on mobile — only the phone segment
     of the account pill collapses out to save space. */
  .nav__logo-img { height: 26px; }
  .nav__logo-text { display: none; }
  .nav__account-phone { display: none; }
  .nav__account { gap: 0; }
}

/* =====================================================
   HERO — Neon Vortex
   The hero recreates the poster's "panther emerging from
   a portal of light rays" aesthetic. Built in layers:
     z=-3 : darkened jungle PNG (atmosphere only)
     z=-2 : conic-gradient ray fan (cyan + magenta beams)
     z=-1 : radial cyan core glow
     z= 0 : grain overlay + content
   ===================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 120px var(--pad-x) 80px;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

/* Layer 1: darkened jungle as faint atmospheric texture */
.hero__bg {
  position: absolute;
  inset: 0;
  background: url('items/Background sunny.png') center/cover no-repeat;
  /* Crush brightness and saturation so the daytime jungle reads as
     a barely-perceptible night silhouette behind the neon vortex. */
  transform: scale(1.05);
  filter: saturate(0.3) brightness(0.18) hue-rotate(180deg) contrast(1.2);
  z-index: -3;
  animation: heroDrift 30s ease-in-out infinite alternate;
  opacity: 0.45;
}

@keyframes heroDrift {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.1) translate(-1.5%, -1%); }
}

/* Layer 2: the vortex of rays. We use the .hero__overlay element
   to host a conic-gradient that fans out beams of cyan and magenta
   from the visual center, exactly like the poster. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* Two stacked layers:
     1. A conic-gradient with alternating thin slices of cyan,
        deep blue, magenta, transparent — creates the ray streaks.
     2. A radial-gradient that fades the rays from bright at the
        center horizon to nearly invisible at the corners.
     The radial mask is applied via -webkit-mask-image. */
  background:
    conic-gradient(
      from 0deg at 50% 60%,
      transparent      0deg,
      var(--gold-500)  3deg,
      transparent      8deg,
      transparent      18deg,
      var(--magenta-500) 20deg,
      transparent       24deg,
      transparent       40deg,
      var(--gold-500)   43deg,
      transparent       48deg,
      transparent       60deg,
      var(--blue-deep)  62deg,
      transparent       66deg,
      transparent       80deg,
      var(--magenta-500) 82deg,
      transparent        86deg,
      transparent        100deg,
      var(--gold-500)    103deg,
      transparent        108deg,
      transparent        125deg,
      var(--gold-500)    128deg,
      transparent        133deg,
      transparent        148deg,
      var(--magenta-500) 150deg,
      transparent        154deg,
      transparent        170deg,
      var(--gold-500)    172deg,
      transparent        177deg,
      transparent        190deg,
      var(--blue-deep)   192deg,
      transparent        196deg,
      transparent        212deg,
      var(--magenta-500) 215deg,
      transparent        220deg,
      transparent        235deg,
      var(--gold-500)    237deg,
      transparent        242deg,
      transparent        258deg,
      var(--magenta-500) 260deg,
      transparent        264deg,
      transparent        280deg,
      var(--gold-500)    283deg,
      transparent        288deg,
      transparent        303deg,
      var(--blue-deep)   305deg,
      transparent        310deg,
      transparent        325deg,
      var(--gold-500)    328deg,
      transparent        333deg,
      transparent        350deg,
      var(--magenta-500) 352deg,
      transparent        356deg,
      transparent        360deg
    );
  /* Radial mask that fades the ray fan to transparent so the
     rays only burn brightly near the horizon and dissolve at
     the edges/top. */
  -webkit-mask-image: radial-gradient(
    ellipse 90% 70% at 50% 60%,
    black 0%,
    rgba(0,0,0,0.85) 25%,
    rgba(0,0,0,0.4) 55%,
    transparent 80%
  );
          mask-image: radial-gradient(
    ellipse 90% 70% at 50% 60%,
    black 0%,
    rgba(0,0,0,0.85) 25%,
    rgba(0,0,0,0.4) 55%,
    transparent 80%
  );
  opacity: 0.55;
  /* Slow rotation for a subtle "spinning portal" feel */
  animation: vortexSpin 80s linear infinite;
}

@keyframes vortexSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Layer 2.5: a vignette ON TOP of the rays so the center horizon
   reads as a bright glowing core and edges/corners stay deep black. */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Bright cyan core glow at the center-bottom (the "horizon") */
    radial-gradient(
      ellipse 60% 35% at 50% 65%,
      rgba(0, 212, 255, 0.45) 0%,
      rgba(0, 212, 255, 0.18) 30%,
      transparent 70%
    ),
    /* Top vignette so nav reads */
    linear-gradient(180deg,
      rgba(0, 0, 4, 0.9) 0%,
      rgba(0, 0, 4, 0.5) 12%,
      rgba(0, 0, 4, 0.0) 28%
    ),
    /* Bottom anchor for any text near the bottom */
    linear-gradient(0deg,
      rgba(0, 0, 4, 0.85) 0%,
      rgba(0, 0, 4, 0.0) 35%
    ),
    /* Hard corner darkening so the rays fade naturally to black */
    radial-gradient(
      ellipse 100% 100% at 50% 60%,
      transparent 35%,
      rgba(0, 0, 4, 0.6) 75%,
      rgba(0, 0, 4, 0.95) 100%
    );
}

/* Floating neon orbs in the corners — subtle ambient color spill
   to push the magenta/cyan duality off the rays themselves and
   into the surrounding canvas. */
.hero__foil {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

.hero__foil--1 {
  width: 500px; height: 500px;
  top: -150px; left: -100px;
  background: radial-gradient(circle, var(--magenta-500), transparent 65%);
  animation: float1 14s ease-in-out infinite;
}

.hero__foil--2 {
  width: 450px; height: 450px;
  bottom: -100px; right: -80px;
  background: radial-gradient(circle, var(--gold-500), transparent 65%);
  animation: float2 18s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, 30px); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-40px, -30px); }
}

.hero__inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(224, 232, 242, 0.08);
  border: 1px solid rgba(224, 232, 242, 0.18);
  backdrop-filter: blur(8px);
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--cream-200);
  text-transform: uppercase;
  margin-bottom: 32px;
}

.hero__badge .dot {
  width: 8px; height: 8px;
  background: var(--gold-400);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--gold-400);
  animation: pulseDot 1.6s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  /* Smaller max size for Mongolian — Cyrillic words like "сэрээгээрэй"
     are longer than English "wild side" so the headline needs to
     scale down to keep the layout intact at desktop sizes. */
  font-size: clamp(40px, 6.5vw, 88px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  max-width: 18ch;
  /* Soft white halo so the white text glows like a neon sign
     against the dark vortex background. */
  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.3),
    0 0 48px rgba(0, 212, 255, 0.2);
}

.hero__title-line { display: block; }

.hero__title-line--accent {
  /* Cyan italic accent — pairs with the magenta strikethrough
     above to give us the dual-neon poster effect. */
  color: var(--gold-400);
  line-height: 1.05;
  text-shadow:
    0 0 20px rgba(0, 212, 255, 0.55),
    0 0 40px rgba(0, 212, 255, 0.35);
}

.hero__title-line--accent em {
  font-style: italic;
  font-family: var(--font-body);
  font-weight: 700;
  /* Slight nudge so the serif italic sits naturally with Russo One */
  letter-spacing: -0.02em;
}

/* Strikethrough on the "cravings" word — a clever brand move
   that signals the campaign tone. The crossed-out word sets up
   the punchline that follows. */
.hero__title-strike {
  position: relative;
  display: inline-block;
  color: var(--cream-200);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 0.5em;
  margin-right: 0.3em;
  vertical-align: 0.4em;
  opacity: 0.75;
}

.hero__title-strike::after {
  content: "";
  position: absolute;
  left: -4%;
  top: 52%;
  width: 108%;
  height: 4px;
  /* Hot magenta strike — pairs with the cyan italic accent below
     to recreate the poster's dual-neon (cyan + magenta) palette. */
  background: var(--magenta-500);
  box-shadow: 0 0 12px rgba(255, 27, 141, 0.6);
  transform: rotate(-3deg);
}

.hero__tagline {
  font-size: clamp(17px, 1.7vw, 21px);
  color: var(--cream-200);
  max-width: 56ch;
  margin: 0 0 40px;
  line-height: 1.55;
}

.hero__cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

.hero__stats {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero__stat-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  color: var(--gold-400);
  line-height: 1;
}

.hero__stat-label {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--cream-300);
  text-transform: uppercase;
}

/* Scroll cue */
.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 1.5px solid rgba(224, 232, 242, 0.4);
  border-radius: 14px;
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease;
}

.hero__scroll:hover { border-color: var(--gold-400); }

.hero__scroll span {
  width: 3px; height: 8px;
  background: var(--gold-400);
  border-radius: 2px;
  animation: scrollDown 1.6s ease-in-out infinite;
}

@keyframes scrollDown {
  0%   { transform: translateY(-6px); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(8px); opacity: 0; }
}

@media (max-width: 640px) {
  .hero { padding-top: 100px; }
  .hero__stats { gap: 32px; }
  .hero__title-strike { display: block; font-size: 0.4em; margin-bottom: 6px; }
}

/* =====================================================
   SECTIONS — Shared layout
   ===================================================== */

.section {
  padding: clamp(80px, 12vw, 140px) var(--pad-x);
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}

/* =====================================================
   2. UPLOAD
   ===================================================== */

.upload__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 880px) {
  .upload__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 36px;
  }
}

/* Drop zone — styled like a chocolate-bar wrapper / receipt */
.dropzone {
  position: relative;
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.04), rgba(22, 30, 46, 0.08)),
    var(--cocoa-800);
  border: 2px dashed rgba(224, 232, 242, 0.25);
  border-radius: var(--r-lg);
  padding: 60px 32px;
  text-align: center;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  outline: none;
}

.dropzone:hover,
.dropzone:focus-visible,
.dropzone.is-dragging {
  border-color: var(--gold-400);
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(22, 30, 46, 0.12)),
    var(--cocoa-800);
  transform: translateY(-2px);
}

.dropzone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.dropzone__icon {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 212, 255, 0.1);
  color: var(--gold-400);
  margin-bottom: 8px;
  transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1);
}

.dropzone:hover .dropzone__icon,
.dropzone.is-dragging .dropzone__icon {
  transform: scale(1.08) translateY(-4px);
}

.dropzone__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 28px);
  margin: 0;
  line-height: 1.1;
}

.dropzone__hint {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.dropzone__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.dropzone__actions .btn {
  padding: 12px 20px;
  font-size: 14px;
  gap: 8px;
}

/* Desktop / mouse-driven devices: the rear-camera capture is
   meaningless (browsers ignore it on desktop), so hide the
   camera button and promote the library button to primary. */
@media (hover: hover) and (pointer: fine) {
  .dropzone__camera-btn { display: none; }

  .dropzone__library-btn {
    background: var(--gold-500);
    color: var(--cocoa-900);
    border: 0;
    box-shadow: var(--shadow-gold), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  }
  .dropzone__library-btn:hover {
    background: var(--gold-400);
    color: var(--cocoa-900);
    transform: translateY(-2px);
    box-shadow: 0 18px 50px -8px rgba(0, 212, 255, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  }
}

@media (max-width: 480px) {
  .dropzone__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 280px; }
  .dropzone__actions .btn { justify-content: center; width: 100%; }
}

/* Decorative receipt edges (zigzag like torn paper) */
.dropzone__edge {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background-image: linear-gradient(135deg, var(--cocoa-800) 25%, transparent 25%),
                    linear-gradient(225deg, var(--cocoa-800) 25%, transparent 25%);
  background-size: 12px 12px;
  background-position: 0 0;
  opacity: 0.5;
}

.dropzone__edge--top { top: -4px; }
.dropzone__edge--bottom { bottom: -4px; transform: scaleY(-1); }

/* Result card */
.result {
  position: relative;
  background: linear-gradient(160deg, var(--cocoa-700), var(--cocoa-800));
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  /* Reveal animation */
  animation: resultIn 0.55s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes resultIn {
  0%   { opacity: 0; transform: translateY(16px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.result__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 72px);
  color: var(--gold-400);
  margin: 0 0 28px;
  line-height: 1;
}

.result__title #resultScore {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.result__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0 0 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(224, 232, 242, 0.12);
  border-bottom: 1px solid rgba(224, 232, 242, 0.12);
}

@media (min-width: 540px) {
  .result__meta { grid-template-columns: repeat(3, 1fr); }
}

.result__meta div { display: flex; flex-direction: column; gap: 4px; }

.result__meta dt {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.result__meta dd {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  color: var(--cream-100);
}

.result__again { width: 100%; justify-content: center; }

/* =====================================================
   LATEST RECEIPT CARD — extended fields
   Adds the eyebrow+status-pill header row, optional
   photo thumbnail, status-aware title variants
   (--alert / --pending), parse_error inline strip, and
   a two-button actions footer. Status modifier on the
   .result element tints the border to match the
   processed / failed / pending state.
   ===================================================== */

/* Compact variant — keeps the latest-receipt aside roughly the
   same height as the .dropzone next to it in the .upload__grid.
   Switches the photo from a 3:2 hero to a 64px thumbnail tucked
   into the header row, and condenses the meta grid. */
.result--compact { padding: 24px 24px; }

.result--compact .result__title {
  font-size: clamp(28px, 4vw, 40px);
  margin: 6px 0 0;
}

.result__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.result__head .eyebrow { margin: 0 0 2px; }

.result__head-text { min-width: 0; }

/* Tiny inline thumb — replaces the old 3:2 .result__photo */
.result__thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--cocoa-900);
  border: 1px solid rgba(0, 212, 255, 0.30);
  flex: 0 0 auto;
}

.result__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 2-column dense meta grid — fits 6 fields in 3 rows of 2 */
.result__meta--dense {
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  padding: 14px 0;
  margin: 0 0 16px;
}

.result__meta--dense dt { font-size: 8px; }
.result__meta--dense dd { font-size: 14px; line-height: 1.2; }

/* Smaller actions in the compact variant — matches the nav__cta
   pill scale so the card footer doesn't dominate vertically. */
.result--compact .result__actions .btn {
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1;
  min-height: 0;
}

/* Status-tinted card border */
.result--ok      { border-color: rgba(0, 212, 255, 0.40); }
.result--failed  { border-color: rgba(255, 27, 141, 0.45); }
.result--pending { border-color: rgba(0, 212, 255, 0.25); }

.result__title--alert   { color: var(--magenta-400); font-size: clamp(36px, 5vw, 56px); }
.result__title--pending { color: var(--cream-200); font-size: clamp(36px, 5vw, 56px); }

.result__error {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(200, 0, 107, 0.12);
  border: 1px solid rgba(255, 27, 141, 0.40);
  color: var(--magenta-400);
  font-size: 12px;
  line-height: 1.45;
}

/* Animated ellipsis for the pending state */
.result__dots {
  display: inline-flex;
  margin-left: 6px;
  gap: 2px;
}

.result__dots span {
  display: inline-block;
  font-weight: 700;
  animation: resultDots 1.4s ease-in-out infinite;
}
.result__dots span:nth-child(2) { animation-delay: 0.2s; }
.result__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes resultDots {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* Two-button actions footer */
.result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.result__actions .result__again { flex: 1 1 auto; width: auto; }

@media (prefers-reduced-motion: reduce) {
  .result__dots span { animation: none; opacity: 1; transform: none; }
}

/* Confetti particles */
.result__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.result__confetti span {
  position: absolute;
  width: 8px; height: 12px;
  background: var(--gold-400);
  top: -20px;
  border-radius: 1px;
  animation: confettiFall 2.4s ease-out forwards;
}

.result__confetti span:nth-child(1)  { left: 10%; background: var(--gold-400); animation-delay: 0s;    transform: rotate(15deg);  }
.result__confetti span:nth-child(2)  { left: 22%; background: var(--cream-200); animation-delay: 0.1s; transform: rotate(-25deg); }
.result__confetti span:nth-child(3)  { left: 34%; background: var(--gold-500); animation-delay: 0.2s; transform: rotate(45deg);  }
.result__confetti span:nth-child(4)  { left: 46%; background: var(--cocoa-500); animation-delay: 0.05s;transform: rotate(-15deg); }
.result__confetti span:nth-child(5)  { left: 58%; background: var(--gold-400); animation-delay: 0.25s;transform: rotate(30deg);  }
.result__confetti span:nth-child(6)  { left: 70%; background: var(--cream-300); animation-delay: 0.15s;transform: rotate(-40deg); }
.result__confetti span:nth-child(7)  { left: 82%; background: var(--gold-600); animation-delay: 0.3s; transform: rotate(20deg);  }
.result__confetti span:nth-child(8)  { left: 90%; background: var(--gold-400); animation-delay: 0.08s;transform: rotate(-30deg); }
.result__confetti span:nth-child(9)  { left: 14%; background: var(--cream-200); animation-delay: 0.4s; transform: rotate(35deg);  }
.result__confetti span:nth-child(10) { left: 64%; background: var(--gold-500); animation-delay: 0.45s;transform: rotate(-20deg); }

@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(420px) rotate(720deg); opacity: 0; }
}

/* =====================================================
   3. PROGRESS / PLAYER
   ===================================================== */

.player {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  background: linear-gradient(160deg, var(--cocoa-700), var(--cocoa-800) 60%);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: var(--r-xl);
  padding: 28px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  margin: 0 0 24px;
}

/* Locked placeholder shown when the visitor isn't logged in OR
   hasn't uploaded a receipt yet — replaces the .player + level
   track with a single dashed CTA card. Matches the .receipt-empty
   pattern but tuned to the wider progress-section context. */
.progress-locked {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 32px;
  text-align: center;
  border-radius: var(--r-xl);
  border: 1px dashed rgba(0, 212, 255, 0.35);
  background: linear-gradient(160deg, var(--cocoa-700), var(--cocoa-800) 60%);
  box-shadow: var(--shadow-deep);
  display: grid;
  gap: 16px;
  justify-items: center;
}

.progress-locked__icon {
  font-size: 44px;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(0, 212, 255, 0.45));
}

.progress-locked__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 38px);
  line-height: 1.1;
  color: var(--cream-100);
  letter-spacing: -0.01em;
}

.progress-locked__hint {
  margin: 0;
  max-width: 32ch;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

.progress-locked .btn { margin-top: 4px; }

@media (max-width: 480px) {
  .progress-locked { padding: 36px 24px; }
  .progress-locked__icon { font-size: 36px; }
}

/* Subtle gold corner accents — pixel-art motif */
.player::before,
.player::after {
  content: "";
  position: absolute;
  width: 24px; height: 24px;
  border: 3px solid var(--gold-400);
  opacity: 0.6;
}

.player::before {
  top: 14px; left: 14px;
  border-right: none; border-bottom: none;
}

.player::after {
  bottom: 14px; right: 14px;
  border-left: none; border-top: none;
}

@media (min-width: 760px) {
  .player {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 56px;
    padding: 48px;
    margin: 0 96px 24px;
  }
}

/* Avatar display */
.player__avatar {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at center, rgba(0, 212, 255, 0.25), transparent 65%),
    var(--cocoa-900);
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Slight inner glow */
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(0, 212, 255, 0.3);
}

@media (min-width: 760px) {
  .player__avatar { width: 280px; height: 280px; }
}

/* The chroma-key filter strips the green from the MP4/PNG */
.avatar-media {
  width: 130%;
  height: 130%;
  /* The original assets have characters offset to lower-right of the frame.
     Translate the media so the character lands centered in our circular display. */
  object-fit: cover;
  transform: translate(0%, -8%);
  filter: url(#chromakey);
  /* Crisp pixel rendering — preserve the pixel-art aesthetic */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Decorative pixel frame — corner brackets */
.player__avatar-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* top-left */
    linear-gradient(to right, var(--gold-400) 24px, transparent 24px) top left / 24px 3px no-repeat,
    linear-gradient(to bottom, var(--gold-400) 24px, transparent 24px) top left / 3px 24px no-repeat,
    /* top-right */
    linear-gradient(to left, var(--gold-400) 24px, transparent 24px) top right / 24px 3px no-repeat,
    linear-gradient(to bottom, var(--gold-400) 24px, transparent 24px) top right / 3px 24px no-repeat,
    /* bottom-left */
    linear-gradient(to right, var(--gold-400) 24px, transparent 24px) bottom left / 24px 3px no-repeat,
    linear-gradient(to top, var(--gold-400) 24px, transparent 24px) bottom left / 3px 24px no-repeat,
    /* bottom-right */
    linear-gradient(to left, var(--gold-400) 24px, transparent 24px) bottom right / 24px 3px no-repeat,
    linear-gradient(to top, var(--gold-400) 24px, transparent 24px) bottom right / 3px 24px no-repeat;
}

/* Sparkle decorations around avatar */
.player__sparkle {
  position: absolute;
  color: var(--gold-400);
  font-size: 18px;
  opacity: 0;
  animation: sparkle 3s ease-in-out infinite;
  pointer-events: none;
}

.player__sparkle--1 { top: 16%;  left: 88%; animation-delay: 0s; }
.player__sparkle--2 { top: 70%;  left: 6%;  animation-delay: 1s; font-size: 22px; }
.player__sparkle--3 { top: 36%;  left: -4%; animation-delay: 2s; }

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.6) rotate(0); }
  50%      { opacity: 1; transform: scale(1) rotate(180deg); }
}

/* Player info side */
.player__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 20px;
  line-height: 1;
}

.player__score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
}

.player__score-num {
  font-family: var(--font-pixel);
  font-size: clamp(28px, 3.5vw, 38px);
  color: var(--gold-400);
  font-variant-numeric: tabular-nums;
}

.player__score-label {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* Progress bar */
.player__progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--cream-300);
  text-transform: uppercase;
}

.player__progress-track {
  position: relative;
  height: 14px;
  background: var(--cocoa-900);
  border-radius: 999px;
  overflow: hidden;
  /* Pixel-style edge */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.player__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400) 60%, var(--cream-200));
  border-radius: 999px;
  /* Neon red glow that bleeds out the right edge of the fill —
     makes the progress bar feel alive, like a charged-up meter. */
  box-shadow:
    0 0 12px rgba(0, 212, 255, 0.5),
    0 0 24px rgba(0, 212, 255, 0.25);
  transition: width 1s cubic-bezier(.16, 1, .3, 1);
}

.player__progress-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 200% 100%;
  animation: shine 2.4s ease-in-out infinite;
  pointer-events: none;
  border-radius: 999px;
}

@keyframes shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.player__progress-hint {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--ink-dim);
}

.player__progress-hint span {
  color: var(--gold-400);
  font-weight: 600;
}

/* Species tabs */
.species-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.species-tab {
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--cream-200);
  background: rgba(224, 232, 242, 0.05);
  border: 1px solid rgba(224, 232, 242, 0.15);
  transition: all 0.2s ease;
}

.species-tab:hover {
  border-color: var(--gold-400);
  color: var(--gold-400);
}

.species-tab.is-active {
  background: var(--gold-500);
  color: var(--cocoa-900);
  border-color: var(--gold-500);
}

/* Level track — horizontal scrollable */
.track-wrap {
  position: relative;
  margin: 0 calc(-1 * var(--pad-x));
  display: flex;
  justify-content: space-evenly;
}

.track-wrap::before,
.track-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: var(--pad-x);
  z-index: 2;
  pointer-events: none;
}

.track {
  display: flex;
  gap: 20px;
  padding: 16px var(--pad-x);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-500) transparent;
}

.track::-webkit-scrollbar { height: 8px; }
.track::-webkit-scrollbar-track { background: transparent; }
.track::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.4);
  border-radius: 4px;
}

.level-card {
  flex: 0 0 200px;
  scroll-snap-align: center;
  position: relative;
  background: var(--cocoa-700);
  border: 1px solid rgba(224, 232, 242, 0.08);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  text-align: center;
}

.level-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 212, 255, 0.4);
}

.level-card.is-current {
  border-color: var(--gold-400);
  background: linear-gradient(160deg, var(--cocoa-600), var(--cocoa-700));
  box-shadow: var(--shadow-gold);
  transform: translateY(-4px);
}

.level-card.is-locked .level-card__media {
  filter: url(#chromakey) grayscale(0.7) brightness(0.6);
}

.level-card__media-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(0,212,255,0.12), transparent 70%),
    var(--cocoa-900);
  display: grid;
  place-items: center;
}

.level-card__media {
  width: 130%;
  height: 130%;
  object-fit: cover;
  transform: translate(0%, -8%);
  filter: url(#chromakey);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.level-card__lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 4, 0.55);
  font-size: 28px;
  color: var(--cream-200);
}

.level-card__num {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold-400);
  text-transform: uppercase;
}

.level-card__name {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0;
  line-height: 1.1;
}

.level-card__score {
  font-size: 12px;
  color: var(--ink-dim);
  font-family: var(--font-body);
}

/* Tier 3+ "treasury" perk list — four lines of escalating
   rewards stacked under the score. Pushed to the bottom of the
   card via `margin-top: auto` so the score/header stay aligned
   across all cards even though only the high-tier ones grow. */
.level-card__perks {
  margin-top: auto;
  width: 100%;
  padding: 12px 10px 4px;
  border-top: 1px dashed rgba(0, 212, 255, 0.25);
  display: grid;
  gap: 6px;
}

.level-card__perks-title {
  margin: 0;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
  text-align: center;
}

.level-card__perks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  text-align: left;
}

.level-card__perks-list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.3;
  color: var(--cream-200);
}

.level-card__perks-list li span {
  color: var(--gold-400);
  font-size: 11px;
  text-align: center;
}

.level-card.is-locked .level-card__perks { opacity: 0.55; }

.level-card__badge {
  position: absolute;
  top: -8px; right: -8px;
  /* Hot magenta badge — provides visual contrast against the
     dominant cyan throughout the rest of the UI, exactly the
     dual-neon dynamic from the poster. */
  background: var(--magenta-500);
  color: var(--cream-100);
  box-shadow: 0 0 16px rgba(255, 27, 141, 0.55);
  font-family: var(--font-pixel);
  font-size: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

/* =====================================================
   4. TICKETS
   ===================================================== */

.tickets__counter {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  margin-bottom: 56px;
}

.tickets__counter-num {
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 160px);
  color: var(--gold-400);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 8px 30px rgba(0, 212, 255, 0.3);
}

.tickets__counter-label {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  color: var(--cream-200);
  line-height: 1.1;
}

.tickets__counter-strong { color: var(--gold-400); }

.ticket-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .ticket-stack { grid-template-columns: 1fr 1fr; }
}

/* Ticket — designed like an admit-one coupon with a perforated edge */
.ticket {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  background: linear-gradient(135deg, var(--cream-100), var(--cream-200));
  color: var(--cocoa-900);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* Reveal animation */
  opacity: 0;
  transform: translateY(12px);
  animation: ticketIn 0.5s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes ticketIn {
  to { opacity: 1; transform: translateY(0); }
}

.ticket:hover {
  transform: translateY(-4px) rotate(-0.5deg);
  box-shadow: var(--shadow-deep);
}

/* Stub side */
.ticket__stub {
  background: var(--gold-500);
  color: var(--cocoa-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  min-width: 80px;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Vertical text */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.ticket__stub-num {
  font-family: var(--font-display);
  font-size: 20px;
  writing-mode: horizontal-tb;
  transform: rotate(-180deg);
  letter-spacing: 0;
  margin-bottom: 6px;
}

/* Perforation between stub and body */
.ticket__perf {
  width: 2px;
  background-image: radial-gradient(circle, var(--cocoa-800) 1px, transparent 1.5px);
  background-size: 2px 8px;
  background-repeat: repeat-y;
  margin: 8px 0;
}

/* Body */
.ticket__body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  align-items: flex-start;
}

.ticket__title {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0;
  line-height: 1.1;
  color: var(--cocoa-800);
}

.ticket__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--cocoa-600);
  margin: 0;
}

.ticket__id {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cocoa-500);
  margin-top: 4px;
}

.tickets__cta {
  text-align: center;
  margin-top: 48px;
}

/* =====================================================
   LOTTERY HEADER — left-column header that mirrors the
   prize-column eyebrow. The big tabular-nums count keeps
   the eye drawn to the user's accumulated entries
   without occupying half the column like the old
   .tickets__counter (clamp(80px, 14vw, 160px)).
   ===================================================== */

.lottery-header {
  margin: 0 0 18px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--cocoa-700), var(--cocoa-800));
  border: 1px solid rgba(0, 212, 255, 0.30);
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.12) inset, 0 0 24px rgba(0, 212, 255, 0.10);
}

.lottery-header .eyebrow {
  margin: 0 0 8px;
  text-align: left;
}

.lottery-header__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
}

.lottery-header__num {
  font-size: clamp(40px, 7vw, 56px);
  color: var(--gold-400);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(0, 212, 255, 0.45);
}

.lottery-header__label {
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--cream-100);
  font-style: italic;
  font-family: var(--font-italic);
  letter-spacing: -0.01em;
}

.lottery-header__hint {
  margin: 6px 0 0;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* =====================================================
   LOTTERY LIST — compact row pattern (matches .lb-row /
   .prize-row) so the tickets and prizes columns share
   visual rhythm. Replaces the old admit-one coupon look
   that fought with the narrower 2-col layout.
   ===================================================== */

.lottery-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.lottery-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--cocoa-700), var(--cocoa-800));
  border: 1px solid rgba(224, 232, 242, 0.10);
  opacity: 0;
  transform: translateY(8px);
  animation: lotteryRowIn 0.45s cubic-bezier(.16, 1, .3, 1) forwards;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.lottery-row:hover {
  border-color: rgba(0, 212, 255, 0.30);
  transform: translateY(-1px);
}

@keyframes lotteryRowIn {
  to { opacity: 1; transform: translateY(0); }
}

.lottery-row__rank {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gold-400);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.30);
  font-variant-numeric: tabular-nums;
}

.lottery-row__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lottery-row__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--cream-100);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lottery-row__sub {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.lottery-row__star {
  color: var(--gold-400);
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.6);
}

.lottery-empty {
  margin: 0;
  padding: 32px 24px;
  text-align: center;
  color: var(--ink-dim);
  border: 1px dashed rgba(224, 232, 242, 0.18);
  border-radius: var(--r-md);
}

@media (max-width: 540px) {
  .lottery-row {
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    padding: 10px 12px;
  }
  .lottery-row__rank { width: 30px; height: 30px; font-size: 10px; }
  .lottery-row__num { font-size: 14px; }
  .lottery-row__star { font-size: 16px; }
}

/* =====================================================
   TICKETS + PRIZES — 2-column split inside the lottery
   section. Tickets stay on the left (counter + stack +
   CTA), prize ladder fills the right. At <860px the
   columns stack and the prize list slides under the
   tickets.
   ===================================================== */

.tickets-prizes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
  max-width: var(--max-w);
  margin: 0 auto;
}

@media (min-width: 860px) {
  .tickets-prizes {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
  }
}

.tickets-col,
.prizes-col {
  min-width: 0;
}

.tickets-col .eyebrow,
.prizes-col .eyebrow { margin-bottom: 18px; text-align: center; }

@media (min-width: 860px) {
  .prizes-col .eyebrow { text-align: left; }
}

/* Prize ladder — top-prize first, podium-tinted #1 row */
.prize-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.prize-row {
  display: grid;
  grid-template-columns: 36px 56px 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--cocoa-700), var(--cocoa-800));
  border: 1px solid rgba(224, 232, 242, 0.10);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.prize-row:hover {
  border-color: rgba(0, 212, 255, 0.30);
  transform: translateY(-1px);
}

.prize-row__rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  background: rgba(0, 0, 4, 0.45);
  border: 1px solid rgba(224, 232, 242, 0.10);
}

.prize-row__crown { color: var(--gold-400); font-size: 16px; }

.prize-row__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(0, 212, 255, 0.18), transparent 70%),
    var(--cocoa-900);
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.20);
  display: grid;
  place-items: center;
}

.prize-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prize-row__thumb-glyph {
  font-size: 22px;
  color: var(--gold-400);
}

.prize-row__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.prize-row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--cream-100);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prize-row__desc {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Top-prize row — gold-leaning podium tint mirroring leaderboard #1 */
.prize-row--top {
  border-color: rgba(0, 212, 255, 0.40);
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.20), 0 0 24px rgba(0, 212, 255, 0.18);
}

.prize-row--top .prize-row__rank {
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
  color: var(--cocoa-900);
  border-color: var(--gold-400);
}

.prize-row--top .prize-row__name { color: var(--gold-400); }

/* Эрдэнэсийн сан — top-tier "treasury" prizes get a magenta accent
   that ties them to the level-3+ perk block in the progress section.
   Stacks cleanly with .prize-row--top so prize #1 reads as both the
   grand prize AND a treasury item. */
.prize-row--treasury {
  border-color: rgba(255, 27, 141, 0.40);
  background:
    linear-gradient(160deg, rgba(255, 27, 141, 0.10), transparent 65%),
    linear-gradient(160deg, var(--cocoa-700), var(--cocoa-800));
}

.prize-row--treasury:hover {
  border-color: var(--magenta-400);
  box-shadow: 0 0 0 1px rgba(255, 27, 141, 0.30), 0 0 24px rgba(255, 27, 141, 0.20);
}

.prize-row--treasury .prize-row__thumb {
  box-shadow: inset 0 0 0 1px rgba(255, 27, 141, 0.45);
}

.prize-row--treasury.prize-row--top {
  border-color: rgba(255, 27, 141, 0.60);
  box-shadow: 0 0 0 1px rgba(255, 27, 141, 0.35), 0 0 24px rgba(255, 27, 141, 0.25);
}

.prize-row__treasury {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 27, 141, 0.12);
  border: 1px solid rgba(255, 27, 141, 0.45);
  color: var(--magenta-400);
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  width: max-content;
  max-width: 100%;
}

.prize-row__treasury span { color: var(--gold-400); font-size: 11px; }

.prizes-empty {
  margin: 0;
  padding: 32px 24px;
  text-align: center;
  color: var(--ink-dim);
  border: 1px dashed rgba(224, 232, 242, 0.18);
  border-radius: var(--r-md);
}

@media (max-width: 540px) {
  .prize-row {
    grid-template-columns: 28px 44px 1fr;
    gap: 10px;
    padding: 10px 12px;
  }
  .prize-row__rank { width: 24px; height: 24px; font-size: 12px; }
  .prize-row__crown { font-size: 13px; }
  .prize-row__thumb { width: 44px; height: 44px; }
  .prize-row__name { font-size: 14px; }
}

/* =====================================================
   5. HOW IT WORKS
   ===================================================== */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

.step {
  position: relative;
  background: var(--cocoa-800);
  border: 1px solid rgba(224, 232, 242, 0.08);
  border-radius: var(--r-lg);
  padding: 36px 28px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.step:hover {
  transform: translateY(-6px);
  border-color: var(--gold-400);
}

.step__num {
  position: absolute;
  top: -18px; left: 28px;
  background: var(--gold-500);
  color: var(--cocoa-900);
  font-family: var(--font-pixel);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

.step__icon {
  color: var(--gold-400);
  margin: 16px 0 24px;
}

.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 12px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--cream-100);
  min-height: 2.5em;
}

.step__body {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.55;
  text-wrap: pretty;
}

.step__body li {
  position: relative;
  padding-left: 18px;
}

.step__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gold-400);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.55);
}

.step__body-note {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400);
  white-space: nowrap;
}

/* =====================================================
   FOOTER
   ===================================================== */

.footer {
  background: var(--cocoa-900);
  border-top: 1px solid rgba(224, 232, 242, 0.06);
  padding: 80px var(--pad-x) 32px;
  position: relative;
  overflow: hidden;
}

/* Decorative neon-red pixel strip */
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--gold-400) 0, var(--gold-400) 20px,
    var(--cocoa-700) 20px, var(--cocoa-700) 40px,
    var(--gold-500) 40px, var(--gold-500) 60px,
    var(--cocoa-700) 60px, var(--cocoa-700) 80px
  );
}

.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 760px) {
  .footer__inner { grid-template-columns: 1.2fr 2fr; }
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer__logo-img {
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
  background: gold;
  border-radius: 4px;
}

.footer__logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--cream-100);
}

.footer__tag {
  color: var(--ink-dim);
  font-size: 15px;
  max-width: 36ch;
  margin: 0;
  line-height: 1.6;
}

/* Campaign URL — mirrors the small URL line on the poster */
.footer__url {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gold-400);
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.6);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.footer__url:hover {
  color: var(--cream-100);
  text-shadow: 0 0 16px rgba(0, 212, 255, 0.9);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
}

.footer__col h4 {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold-400);
  text-transform: uppercase;
  margin: 0 0 16px;
}

.footer__col a {
  display: block;
  font-size: 14px;
  color: var(--cream-200);
  padding: 6px 0;
  transition: color 0.2s ease, padding 0.2s ease;
}

.footer__col a:hover {
  color: var(--gold-400);
  padding-left: 4px;
}

/* =====================================================
   COOKIE POLICY MODAL — native <dialog> overlay
   Uses the browser's built-in modal flow (showModal +
   ::backdrop). The dialog itself is just a transparent
   centered shell — the actual styled card is its inner
   .legal-modal__panel so we can roundise corners and
   scroll the body without fighting UA dialog defaults.
   ===================================================== */

.legal-modal {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  max-width: min(92vw, 720px);
  width: 100%;
  max-height: 90vh;
  overflow: visible;
  outline: none;
}

.legal-modal::backdrop {
  background: rgba(0, 0, 4, 0.72);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
}

.legal-modal[open] {
  animation: legalModalIn 0.28s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes legalModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.legal-modal__panel {
  display: grid;
  grid-template-rows: auto 1fr;
  max-height: 90vh;
  background: linear-gradient(160deg, var(--cocoa-700), var(--cocoa-800) 60%);
  border: 1px solid rgba(0, 212, 255, 0.30);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-deep), 0 0 36px rgba(0, 212, 255, 0.18);
  overflow: hidden;
}

.legal-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(224, 232, 242, 0.10);
  background: rgba(0, 0, 4, 0.35);
}

.legal-modal__head .eyebrow { margin: 0; }

.legal-modal__close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(224, 232, 242, 0.22);
  background: rgba(0, 0, 4, 0.45);
  color: var(--cream-200);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.legal-modal__close:hover {
  color: var(--magenta-400);
  border-color: var(--magenta-400);
  background: rgba(255, 27, 141, 0.10);
}

.legal-modal__body {
  padding: 24px 24px 28px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-500) transparent;
}

.legal-modal__body::-webkit-scrollbar { width: 8px; }
.legal-modal__body::-webkit-scrollbar-track { background: transparent; }
.legal-modal__body::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.4);
  border-radius: 4px;
}

@media (max-width: 540px) {
  .legal-modal { max-width: 96vw; max-height: 92vh; }
  .legal-modal__head { padding: 16px 18px; }
  .legal-modal__body { padding: 18px 18px 22px; }
}

/* Body — shared by the cookie modal panel; padding/scroll are
   handled by .legal-modal__body, so this rule only sets prose
   typography and section rhythm. */
.footer__cookies-body {
  display: grid;
  gap: 28px;
  color: var(--cream-200);
  font-size: 14px;
  line-height: 1.6;
}

.footer__cookies-body section { display: grid; gap: 8px; }

.footer__cookies-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--gold-400);
}

.footer__cookies-body h4 {
  margin: 8px 0 0;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-100);
}

.footer__cookies-body p { margin: 0; }
.footer__cookies-body strong { color: var(--cream-100); font-weight: 700; }
.footer__cookies-body em { color: var(--gold-400); font-style: normal; font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 4px; }

.footer__cookies-body ul,
.footer__cookies-body ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.footer__cookies-body ul li::marker { color: var(--gold-400); }
.footer__cookies-body ol li::marker { color: var(--gold-400); font-family: var(--font-pixel); font-weight: 700; }

.footer__cookies-types li { padding-left: 4px; }

.footer__cookies-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 16px !important;
  list-style: none;
  padding: 0 !important;
}
.footer__cookies-grid li {
  padding: 6px 10px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: var(--r-sm);
  font-size: 13px;
}

.footer__cookies-rights {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 16px !important;
  list-style: none;
  padding: 0 !important;
}
.footer__cookies-rights li {
  padding: 6px 10px 6px 28px;
  position: relative;
  font-size: 13px;
}
.footer__cookies-rights li::before {
  content: "✓";
  position: absolute;
  left: 8px;
  color: var(--gold-400);
  font-weight: 700;
}

.footer__cookies-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 16px;
  margin: 0;
}
@media (min-width: 640px) {
  .footer__cookies-list { grid-template-columns: 180px 1fr; }
}
.footer__cookies-list dt {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  align-self: baseline;
  padding-top: 4px;
}
.footer__cookies-list dd {
  margin: 0 0 8px;
  font-size: 13px;
}
.footer__cookies-body code {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 4, 0.5);
  border: 1px solid rgba(224, 232, 242, 0.10);
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--gold-400);
  margin: 1px 2px;
}

.footer__cookies-mail {
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0, 212, 255, 0.45);
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.footer__cookies-mail:hover {
  color: var(--cream-100);
  text-decoration-color: var(--gold-400);
}

.footer__bottom {
  max-width: var(--max-w);
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(224, 232, 242, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-dim);
}

.footer__bottom-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.footer__pixel {
  color: var(--gold-400);
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 4px;
}

/* =====================================================
   SCROLL REVEAL
   Elements with .reveal start hidden and fade up.
   JS toggles .is-visible via IntersectionObserver.
   The hero uses .reveal applied immediately (already visible).
   ===================================================== */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(.16, 1, .3, 1) var(--delay, 0ms),
    transform 0.7s cubic-bezier(.16, 1, .3, 1) var(--delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   ACCESSIBILITY: respect motion preferences
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__bg { animation: none; transform: scale(1.02); }
}

/* =====================================================
   UPLOAD SECTION — animated jungle backdrop
   The section is `max-width: var(--max-w)` so we use a
   viewport-width pseudo-element (translateX(-50%)) to
   bleed the background to the page edges. body has
   overflow-x: hidden so the breakout doesn't trigger
   horizontal scroll.
   ===================================================== */

.section.upload {
  isolation: isolate;
}

.section.upload::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%) scale(1.05);
  z-index: -2;
  background: url("/assets/background-blue-68b96744.jpg") center/cover no-repeat;
  /* Lighter than the hero — let the GIF's own animation carry the
     section, only mildly cool-shifted to stay cohesive with the
     cyan accent palette. */
  filter: brightness(0.75);
  opacity: 0.85;
  pointer-events: none;
}

.section.upload::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 55% 45% at 50% 55%,
      rgba(0, 212, 255, 0.18) 0%,
      transparent 70%
    ),
    linear-gradient(180deg,
      var(--bg) 0%,
      rgba(0, 0, 4, 0.25) 12%,
      rgba(0, 0, 4, 0.0) 28%,
      rgba(0, 0, 4, 0.0) 72%,
      rgba(0, 0, 4, 0.85) 92%,
      var(--bg) 100%
    );
  height: 120vh;
  margin-top: -36px;
}

@keyframes uploadJungleDrift {
  0%   { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(1.12) translateY(-1.5%); }
}

@media (prefers-reduced-motion: reduce) {
  .section.upload::before {
    animation: none;
    transform: translateX(-50%) scale(1.05);
  }
}
.section.progress {
  isolation: isolate;
  /* Progress is now the first section on the page — pad the top
     enough that its title clears the fixed nav, then keep the
     bottom compact so the player + tabs + level track stay close
     to one viewport on desktop. */
  padding-top: clamp(96px, 14vw, 140px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* Tighter player card and avatar inside the compacted progress section. */
.section.progress .section__head { margin-bottom: 32px; }
.section.progress .player {
  padding: 28px;
  margin-bottom: 28px;
  gap: 24px;
}
@media (min-width: 760px) {
  .section.progress .player {
    padding: 32px;
    gap: 36px;
  }
}
.section.progress .player__avatar { width: 200px; height: 200px; }
@media (min-width: 760px) {
  .section.progress .player__avatar { width: 220px; height: 220px; }
}
.section.progress .player__name { margin-bottom: 12px; }
.section.progress .player__score { margin-bottom: 18px; }
.section.progress .species-tabs { margin-bottom: 20px; }
.section.progress .track { padding-top: 8px; padding-bottom: 8px; }
.section.progress .level-card { padding: 14px; gap: 8px; }
.section.progress .level-card__media-wrap { width: 100px; height: 100px; }

.section.progress::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%) scale(1.05);
  z-index: -2;
  background: url("/assets/levels/background-932321f8.gif") center/cover no-repeat;
  /*filter: brightness(0.8) contrast(1.05);*/
  /*opacity: 0.75;*/
  animation: progressJungleDrift 32s ease-in-out infinite alternate;
  pointer-events: none;
}

.section.progress::after {
  content: "";
  position: absolute;
  top: -34px; bottom: -34px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  /* Diagonal cyan→magenta neon gradient (the brand's dual-neon
     palette) layered with a soft magenta core glow + a vertical
     vignette that fades the panel into the upload section above
     and the tickets section below. */
  background:
    linear-gradient(
      135deg,
      rgba(0, 212, 255, 0.28) 0%,
      rgba(0, 212, 255, 0.0) 38%,
      rgba(255, 27, 141, 0.0) 62%,
      rgba(255, 27, 141, 0.28) 100%
    ),
    radial-gradient(
      ellipse 55% 45% at 50% 50%,
      rgba(255, 27, 141, 0.18) 0%,
      transparent 70%
    ),
    linear-gradient(180deg,
      var(--bg) 0%,
      rgba(0, 0, 4, 0.35) 10%,
      rgba(0, 0, 4, 0.0) 26%,
      rgba(0, 0, 4, 0.0) 74%,
      rgba(0, 0, 4, 0.85) 92%,
      var(--bg) 100%
    );
}

@keyframes progressJungleDrift {
  0%   { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(1.12) translate(1.5%, 1%); }
}

@media (prefers-reduced-motion: reduce) {
  .section.progress::before {
    animation: none;
    transform: translateX(-50%) scale(1.05);
  }
}

/* =====================================================
   RECEIPT DETAIL — show page
   Reuses .section / .section__head / .upload__grid /
   .result / .eyebrow grammar from above; only adds the
   bits that don't already exist (photo frame, items
   table, status banner, ticket rows).
   ===================================================== */

.receipt-section { padding-top: clamp(96px, 14vw, 140px); }

.receipt-photo {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(224, 232, 242, 0.12);
  background: var(--cocoa-800);
  box-shadow: var(--shadow-deep);
  aspect-ratio: 4 / 5;
}

.receipt-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.receipt-photo .status-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
}

/* Status pill */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(0, 0, 4, 0.55);
  border: 1px solid rgba(224, 232, 242, 0.18);
  color: var(--cream-200);
  backdrop-filter: blur(8px);
}

.status-badge.pill-cyan {
  border-color: rgba(0, 212, 255, 0.55);
  color: var(--gold-400);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.35);
}
.status-badge.pill-amber {
  border-color: rgba(255, 27, 141, 0.55);
  color: var(--magenta-400);
  box-shadow: 0 0 12px rgba(255, 27, 141, 0.35);
}
.status-badge.pill-red {
  border-color: rgba(255, 27, 141, 0.7);
  color: var(--magenta-400);
  background: rgba(200, 0, 107, 0.18);
}

/* Inline status banners (pending / failed) */
.status-banner {
  max-width: 720px;
  margin: -32px auto 36px;
  padding: 14px 20px;
  border-radius: var(--r-md);
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.status-banner--pending {
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.35);
  color: var(--gold-400);
}

.status-banner--failed {
  background: rgba(200, 0, 107, 0.12);
  border: 1px solid rgba(255, 27, 141, 0.45);
  color: var(--magenta-400);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

.status-banner__icon { font-size: 16px; line-height: 1.4; }

.status-banner__body strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
}

/* Failed-state result aside (right column on receipt detail) */
.result--failed {
  border-color: rgba(255, 27, 141, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 27, 141, 0.18), var(--shadow-deep);
}

.result--failed .result__title { color: var(--magenta-400); }

.result__failed-hint {
  margin: 0 0 24px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.55;
}

.result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.result__actions .result__again { width: auto; flex: 1 1 auto; }

/* Spacing for sections that follow the upload__grid hero */
.receipt-block {
  max-width: var(--max-w);
  margin: 56px auto 0;
}

.receipt-block .eyebrow { margin-bottom: 16px; }

/* Items table */
.items {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(160deg, var(--cocoa-700), var(--cocoa-800));
  border: 1px solid rgba(224, 232, 242, 0.10);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.items th,
.items td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(224, 232, 242, 0.08);
  font-size: 15px;
}

.items thead th {
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: rgba(0, 0, 4, 0.35);
}

.items tbody tr:last-child td { border-bottom: 0; }
.items tbody tr.is-qualified { background: rgba(0, 212, 255, 0.05); }

.items td.numeric,
.items th.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.items td.amount {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--cream-100);
}

/* Ticket rows */
.ticket-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticket-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--cocoa-700), var(--cocoa-800));
  border: 1px solid rgba(224, 232, 242, 0.10);
}

.ticket-row__name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--cream-100);
  letter-spacing: 0.06em;
}

.ticket-row__rule {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.ticket-row__star { color: var(--gold-400); font-size: 18px; }

/* =====================================================
   RECEIPT LIST — index page
   Each card mirrors the .ticket-row / .result surface
   treatment but adds a media thumb on the left, the
   merchant + date in the body, and a gold score chip on
   the right. Failed receipts get a magenta accent border
   and surface their parse_error inline.
   ===================================================== */

.receipt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 720px;
  margin-inline: auto;
}

.receipt-list__item { margin: 0; }

.receipt-card {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--cocoa-700), var(--cocoa-800));
  border: 1px solid rgba(224, 232, 242, 0.10);
  color: var(--cream-100);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.receipt-card:hover {
  border-color: rgba(0, 212, 255, 0.40);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.receipt-card--failed {
  border-color: rgba(255, 27, 141, 0.45);
  background: linear-gradient(160deg, rgba(200, 0, 107, 0.10), var(--cocoa-800));
}

.receipt-card--failed:hover {
  border-color: var(--magenta-400);
  box-shadow: var(--shadow-magenta);
}

/* Thumbnail */
.receipt-card__thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cocoa-900);
  display: block;
}

.receipt-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.receipt-card__thumb .status-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 7px;
  font-size: 8px;
  letter-spacing: 0.12em;
}

/* Body */
.receipt-card__body { min-width: 0; }

.receipt-card__date {
  margin: 0 0 4px;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.receipt-card__merchant {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cream-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-card__meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.receipt-card__meta .dot { color: rgba(224, 232, 242, 0.30); }

.receipt-card__error {
  margin: 8px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--magenta-400);
}

/* Score chip on the right */
.receipt-card__score {
  display: grid;
  justify-items: end;
  gap: 2px;
  padding-left: 12px;
  border-left: 1px solid rgba(224, 232, 242, 0.10);
}

.receipt-card__score-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--gold-400);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.receipt-card__score-label {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Empty state */
.receipt-empty {
  max-width: 480px;
  margin: 24px auto 0;
  padding: 40px 28px;
  text-align: center;
  border-radius: var(--r-lg);
  border: 1px dashed rgba(224, 232, 242, 0.18);
  background: rgba(0, 0, 4, 0.35);
}

.receipt-empty .eyebrow { margin-bottom: 12px; }

.receipt-empty__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 36px);
  line-height: 1.05;
  color: var(--cream-100);
}

.receipt-empty__sub {
  margin: 0 0 24px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 540px) {
  .receipt-card {
    grid-template-columns: 64px 1fr;
    gap: 12px;
    padding: 12px;
  }
  .receipt-card__thumb { width: 64px; height: 64px; }
  .receipt-card__score {
    grid-column: 1 / -1;
    justify-items: start;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(224, 232, 242, 0.10);
    padding-top: 10px;
    margin-top: 4px;
    flex-direction: row;
    grid-auto-flow: column;
    gap: 6px;
    align-items: baseline;
  }
}

@media (max-width: 540px) {
  .items th, .items td { padding: 12px 12px; font-size: 14px; }
  .items thead th:nth-child(3),
  .items tbody td:nth-child(3) { display: none; }
}

/* =====================================================
   MOBILE RESPONSIVE PASS
   Consolidated breakpoint adjustments — shrink the heavy
   desktop spacing so the stacked sections feel tight on
   phone-sized viewports without losing breathing room.
   ===================================================== */

@media (max-width: 640px) {
  /* Shared layout */
  .section { padding: 56px var(--pad-x); }
  .section__head { margin: 0 auto 32px; }
  .section__title { margin: 0 0 12px; }

  /* Progress is now the landing section — ensure its title clears
     the fixed nav (~60px tall) instead of sitting underneath it. */
  .section.progress { padding-top: 96px; }

  /* Receipt detail */
  .receipt-section { padding-top: 80px; }
  .receipt-block { margin-top: 32px; }
  .status-banner { margin: -16px auto 24px; padding: 10px 16px; font-size: 11px; }

  /* Tickets — stack the giant counter above the label */
  .tickets__counter {
    flex-direction: column;
    gap: 4px;
    margin-bottom: 32px;
  }
  .tickets__counter-label { align-items: center; text-align: center; }

  /* Steps */
  .step { padding: 28px 22px; }

  /* Footer */
  .footer { padding: 56px var(--pad-x) 24px; }
  .footer__inner { gap: 32px; }
  .footer__bottom { margin-top: 32px; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  /* Level cards */
  .level-card { flex: 0 0 160px; padding: 16px; }
  .level-card__media-wrap { width: 96px; height: 96px; }

  /* Ticket coupon */
  .ticket__stub { min-width: 64px; padding: 14px 10px; }
  .ticket__body { padding: 14px 16px; }
  .ticket__title { font-size: 15px; }

  /* Avatar */
  .player__avatar { width: 200px; height: 200px; }
  .player__name { font-size: 24px; margin: 0 0 14px; }

  /* Result card on receipts */
  .result { padding: 24px 20px; }
  .result__title { font-size: clamp(40px, 14vw, 56px); margin: 0 0 18px; }
  .result__meta { gap: 14px; padding: 18px 0; margin: 0 0 18px; }
  .result__meta dd { font-size: 16px; }
}

@media (max-width: 380px) {
  /* Account pill on the smallest phones — drop the "оноо" label
     so the pill stays compact alongside the login/logout pill. */
  .nav__account-score-label { display: none; }
}

/* =====================================================
   LEADERBOARD — top-10 ranking section
   Each row is a flex card matching the .receipt-card and
   .ticket-row surface treatment. Top-3 get a podium tint
   (gold / cyan / magenta) and the current viewer's row,
   if it appears in the top 10, gets a cyan glow ring.
   ===================================================== */

.leaderboard__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 720px;
  counter-reset: rank;
}

.lb-row {
  display: grid;
  grid-template-columns: 44px 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--cocoa-700), var(--cocoa-800));
  border: 1px solid rgba(224, 232, 242, 0.10);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.lb-row:hover {
  border-color: rgba(0, 212, 255, 0.30);
  transform: translateY(-1px);
}

/* Rank cell */
.lb-row__rank {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  background: rgba(0, 0, 4, 0.45);
  border: 1px solid rgba(224, 232, 242, 0.10);
}

.lb-row__crown {
  font-size: 18px;
  color: var(--gold-400);
}

/* Avatar — same chromakey treatment as the nav account chip */
.lb-row__avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(0, 212, 255, 0.18), transparent 70%),
    var(--cocoa-900);
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.30);
}

.lb-row__avatar img {
  width: 130%;
  height: 130%;
  object-fit: cover;
  transform: translate(0%, -5%);
  filter: url(#chromakey);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Body — name + tier subtitle */
.lb-row__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lb-row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--cream-100);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-row__you {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gold-500);
  color: var(--cocoa-900);
  font-family: var(--font-pixel);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lb-row__sub {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Score chip on the right */
.lb-row__score {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.lb-row__score-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--gold-400);
  font-variant-numeric: tabular-nums;
}

.lb-row__score-label {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Podium tints — only the rank cell + a hairline border accent. */
.lb-row--p1 .lb-row__rank {
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
  color: var(--cocoa-900);
  border-color: var(--gold-400);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.45);
}
.lb-row--p1 { border-color: rgba(0, 212, 255, 0.35); }

.lb-row--p2 .lb-row__rank {
  background: linear-gradient(180deg, var(--cream-100), var(--cream-200));
  color: var(--cocoa-900);
  border-color: var(--cream-200);
}

.lb-row--p3 .lb-row__rank {
  background: linear-gradient(180deg, var(--magenta-400), var(--magenta-500));
  color: var(--cocoa-900);
  border-color: var(--magenta-400);
}

/* Highlight the viewer's own row */
.lb-row--self {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.35), 0 0 24px rgba(0, 212, 255, 0.18);
}

/* Out-of-top-10 own-rank summary */
.leaderboard__own-rank {
  max-width: 720px;
  margin: 18px auto 0;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: rgba(0, 212, 255, 0.06);
  border: 1px dashed rgba(0, 212, 255, 0.35);
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 14px;
}

.leaderboard__own-rank .eyebrow { margin: 0; }

.leaderboard__own-rank-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--gold-400);
  font-variant-numeric: tabular-nums;
}

.leaderboard__own-rank-hint {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.4;
}

.leaderboard__empty {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px;
  text-align: center;
  color: var(--ink-dim);
  border: 1px dashed rgba(224, 232, 242, 0.18);
  border-radius: var(--r-md);
}

@media (max-width: 540px) {
  .lb-row {
    grid-template-columns: 32px 40px 1fr auto;
    gap: 10px;
    padding: 10px 12px;
  }
  .lb-row__rank { width: 28px; height: 28px; font-size: 13px; }
  .lb-row__crown { font-size: 14px; }
  .lb-row__avatar { width: 40px; height: 40px; }
  .lb-row__name { font-size: 14px; }
  .lb-row__score-num { font-size: 17px; }

  .leaderboard__own-rank {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* =====================================================
   SHARE — Facebook + Instagram only
   Each .share-btn is a compact ghost pill that picks up
   its brand color on hover. Instagram has no public URL
   share API on the web, so its action copies the URL to
   the clipboard and flashes a hint via .is-copied.
   ===================================================== */

.player__share {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.player__share-label {
  margin: 0 4px 0 0;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(224, 232, 242, 0.22);
  background: rgba(0, 0, 4, 0.45);
  color: var(--cream-200);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.share-btn--large { padding: 12px 20px; font-size: 14px; gap: 10px; }

.share-btn svg { display: block; }

/* Brand hovers — single accent each, no full background-fill so
   the pills stay coherent with the rest of the .btn--ghost family. */
.share-btn--facebook:hover {
  border-color: #1877F2;
  color: #5B9BFF;
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.18);
}

.share-btn--instagram:hover {
  border-color: var(--magenta-400);
  color: var(--magenta-400);
  box-shadow: 0 0 0 3px rgba(255, 27, 141, 0.18);
}

/* On touch / coarse-pointer devices :hover never fires, so the
   brand color is baked into the resting state and the touch
   targets are bumped to the 44px tap-target guideline. */
@media (hover: none), (pointer: coarse) {
  .share-btn {
    padding: 12px 16px;
    font-size: 13px;
    min-height: 44px;
    justify-content: center;
  }
  .share-btn--facebook { border-color: rgba(24, 119, 242, 0.55); color: #5B9BFF; }
  .share-btn--instagram { border-color: rgba(255, 27, 141, 0.55); color: var(--magenta-400); }
  .share-btn--large { padding: 14px 22px; font-size: 15px; min-height: 48px; }

  /* Lay the share row out as a 2-col grid: the "Хуваалцах:" label
     spans both columns up top, and each button gets one half of
     the row underneath — never wraps into an awkward half-width
     orphan, always full-width tap targets. */
  .player__share {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
  }
  .player__share-label { grid-column: 1 / -1; margin: 0; }
}

/* Clipboard-flash state (Instagram only) */
.share-btn.is-copied {
  border-color: var(--gold-400);
  color: var(--gold-400);
  background: rgba(0, 212, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.18);
}

/* =====================================================
   PUBLIC PROFILE — shareable /u/:id page
   ===================================================== */

.section.public-profile {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  padding-top: clamp(96px, 14vw, 140px);
  display: grid;
  align-content: center;
}

.section.public-profile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--cocoa-900) url("/assets/background-blue-68b96744.jpg") center/cover no-repeat;
  filter: saturate(1.1) contrast(1.05);
}

.section.public-profile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 50% 30%, transparent 30%, rgba(0, 0, 4, 0.65) 75%, rgba(0, 0, 4, 0.95) 100%),
    radial-gradient(60% 45% at 50% 0%, rgba(255, 27, 141, 0.22), transparent 65%),
    radial-gradient(50% 40% at 50% 100%, rgba(0, 212, 255, 0.20), transparent 70%);
  pointer-events: none;
}

.public-profile__inner {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  text-align: center;
  display: grid;
  gap: 24px;
}

.public-profile__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 0.95;
  color: var(--cream-100);
  text-shadow: 0 0 40px rgba(255, 27, 141, 0.35);
}

.public-profile__avatar {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(0, 212, 255, 0.25), transparent 65%),
    var(--cocoa-900);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(0, 212, 255, 0.3);
  display: grid;
  place-items: center;
}

.public-profile__meta { display: grid; gap: 6px; }

.public-profile__animal {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--gold-400);
  letter-spacing: 0.02em;
}

.public-profile__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(224, 232, 242, 0.12);
  border-bottom: 1px solid rgba(224, 232, 242, 0.12);
  margin: 0;
}

.public-profile__stats div { display: grid; gap: 4px; }

.public-profile__stats dt {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.public-profile__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--cream-100);
  font-variant-numeric: tabular-nums;
}

.public-profile__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.public-profile__cta .btn {
  width: 100%;
  justify-content: center;
}

.public-profile__share-label {
  margin: 4px 0 -2px;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.public-profile__share {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}

.public-profile__share .share-btn { flex: 1 1 auto; justify-content: center; }

@media (max-width: 480px) {
  .public-profile__avatar { width: 200px; height: 200px; }
  .public-profile__animal { font-size: 20px; }
  .public-profile__stats dd { font-size: 18px; }
}

/* =====================================================
   SECTION BACKDROPS — leaderboard / tickets / how
   Each of the bottom three sections gets its own ambient
   backdrop layer. Pattern matches .section.upload: a
   full-bleed pseudo-element that breaks out of the
   max-width container via 100vw + translateX(-50%).
   Section already declares `position: relative`; we add
   `isolation: isolate` so the negative z-index stays
   contained and doesn't bleed under the fixed nav.
   ===================================================== */

.section.leaderboard,
.section.tickets,
.section.how { isolation: isolate; }

.section.leaderboard::before,
.section.tickets::before,
.section.how::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -2;
  pointer-events: none;
}

/* Leaderboard — gold/cyan podium glow. Top-down lighting
   echoes the crown ♛ on the #1 row. */
.section.leaderboard::before {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0, 212, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 35% 35% at 50% 0%, rgba(255, 215, 64, 0.12), transparent 75%),
    linear-gradient(180deg, var(--cocoa-700) 0%, var(--cocoa-900) 70%);
}

/* Tickets + Prizes — magenta treasury wash from the bottom.
   Pairs with the .prize-row--treasury rows so the whole
   section reads as the "rare reward" layer of the page. */
.section.tickets::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(255, 27, 141, 0.20), transparent 72%),
    radial-gradient(ellipse 35% 30% at 100% 0%, rgba(0, 212, 255, 0.10), transparent 70%),
    linear-gradient(180deg, var(--cocoa-900) 0%, var(--cocoa-800) 50%, var(--cocoa-900) 100%);
}

/* How it works — warm cocoa wash with subtle cream highlight
   so the instructional section feels grounded vs the
   high-energy podium/treasury sections above it. */
.section.how::before {
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(224, 232, 242, 0.06), transparent 70%),
    linear-gradient(180deg, var(--cocoa-900) 0%, var(--cocoa-800) 50%, var(--cocoa-900) 100%);
}

/* Subtle grain on top of each backdrop — same scanline
   density used elsewhere in the theme. Keeps the gradients
   from looking flat at large viewport heights. */
.section.leaderboard::after,
.section.tickets::after,
.section.how::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.012) 0,
    rgba(255, 255, 255, 0.012) 1px,
    transparent 1px,
    transparent 3px
  );
}