/* =====================================================
   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: 'Averta CY', 'Lora', 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;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.01em;
}

.nav__logo-mark {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  background: yellow;
  color: #000000;
  font-weight: bolder;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 18px;
  /* Pixel-style corner cuts */
  clip-path: polygon(
    4px 0, calc(100% - 4px) 0,
    100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) 100%, 4px 100%,
    0 calc(100% - 4px), 0 4px
  );
}

.nav__logo-text { font-size: 16px; }

.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;
}

.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-text { display: none; }
  .nav__account-phone { display: none; }
  .nav__account-phone + .nav__account-score { border-left: 0; padding-left: 12px; }
  .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;
}

/* 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; }

/* 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;
}

/* 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(-7%, -5%);
  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(28px, 3.5vw, 40px);
  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(-7%, -5%);
  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);
}

.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;
}

/* =====================================================
   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: 400;
  font-size: 24px;
  margin: 0 0 12px;
  line-height: 1.1;
}

.step__body {
  margin: 0;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.6;
}

/* =====================================================
   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;
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 16px;
}

.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;
}

.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;
  min-height: 110vh;
  padding-top: clamp(96px, 14vw, 140px);
}

.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;
  animation: uploadJungleDrift 28s ease-in-out infinite alternate;
  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%
    );
}

@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;
  /* Compact the section so the player + tabs + level track fit
     into one viewport on desktop instead of stretching to the
     default `clamp(80px, 12vw, 140px)` vertical padding. */
  padding-top: clamp(48px, 6vw, 80px);
  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);
}

/* 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; }

@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; }

  /* The upload section is the landing block — ensure its title clears
     the fixed nav (~60px tall) instead of sitting underneath it. */
  .section.upload { 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; }
}