/* ============================================================================
   ARTSFEST PUNK V2 — Black-Dominant Festival Palette
   ============================================================================
   Black-dominant punk aesthetic for SIT Arts Festival 2026: black ~60%,
   red ~25%, green ~10%, white ~5%. Hard shadows, sharp borders, star
   decorations. Fonts load via <link> in index.html (Abys + Finger Paint
   are bundled locally; Inter + Bebas Neue are the web fallbacks).
   ============================================================================ */

@font-face {
  font-family: 'Abys';
  src: url('../assets/fonts/Abys-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Finger Paint';
  src: url('../assets/fonts/FingerPaint-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* ============================================================================
   CORE PALETTE — Black/Red/Green/Off-White
   ============================================================================ */
:root {
  /* Vibrant festival colors */
  --festival-purple: #8B5CF6;      /* Primary purple */
  --festival-purple-light: #A78BFA; /* Light purple */
  --festival-pink: #EC4899;         /* Hot pink */
  --festival-orange: #F97316;       /* Bright orange */
  --festival-yellow: #FBBF24;       /* Sunny yellow */
  --festival-green: #10B981;        /* Fresh green */
  --festival-blue: #3B82F6;         /* Sky blue */
  --festival-red: #EF4444;          /* Bright red */
  --festival-cyan: #06B6D4;         /* Cyan accent */

  /* Core colors */
  --punk-black: #1A1A2E;      /* Deep purple-black */
  --punk-red: #EF4444;        /* Bright red */
  --punk-red-dark: #DC2626;   /* Darker red */
  --punk-green: #10B981;      /* Vibrant green */
  --punk-green-dark: #059669; /* Darker green */
  --punk-white: #FFFFFF;      /* White text */
  --punk-cream: #FEF3C7;      /* Warm cream */

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* App background — tokenized so key-event themes can remap it */
  --bg-body: linear-gradient(160deg, #101018 0%, #1A1A2E 55%, #20203A 100%);
  --gradient-festival: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --gradient-ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

  /* Text colors */
  --text-on-dark: #FFFFFF;
  --text-on-light: #1A1A2E;
  --text-accent: #8B5CF6;

  /* Background variants */
  --bg-dark: #1A1A2E;
  --bg-purple: #8B5CF6;
  --bg-pink: #EC4899;
  --bg-orange: #F97316;
  --bg-cream: #FEF3C7;

  /* Borders — black per the punk spec; red/green accents come from
     per-component overrides (hover states, alternation, milestones). */
  --border-thick: 3px solid #0D0D14;
  --border-purple: 3px solid #8B5CF6;
  --border-pink: 3px solid #EC4899;
  --border-white: 2px solid #FFFFFF;
  --border-red: 3px solid #EF4444;
  --border-green: 3px solid #10B981;

  /* Stars and decorations */
  --star-purple: #8B5CF6;
  --star-pink: #EC4899;
  --star-yellow: #FBBF24;
  --star-cyan: #06B6D4;
  --star-white: #FFFFFF;
  --star-red: #EF4444;
  --star-green: #10B981;

  /* Typography */
  --font-display: 'Abys', 'Bebas Neue', Impact, sans-serif;
  --font-hand: 'Finger Paint', 'Permanent Marker', cursive;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --module-padding: var(--space-lg);

  /* Effects */
  --shadow-hard: 4px 4px 0px #000000;
  --shadow-hard-sm: 2px 2px 0px #000000;
  --shadow-red: 4px 4px 0px #B22222;

  /* Transitions */
  --transition-punk: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   BASE — Black dominant background
   ============================================================================ */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  /* Black-dominant base with a hint of the deep-purple undertone, per the
     60/25/10/5 palette — cards, navs and accents carry the colour.
     --bg-body is remapped per key-event week (see the FEST THEMES block). */
  background: var(--bg-body);
  background-attachment: fixed;
  color: var(--punk-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ============================================================================
   BACKGROUND — Enhanced animated star pattern on black
   ============================================================================ */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 30%, var(--star-red) 1px, transparent 1.5px),
    radial-gradient(circle at 80% 20%, var(--star-green) 1.5px, transparent 2px),
    radial-gradient(circle at 40% 70%, var(--star-red) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, var(--star-green) 2px, transparent 2.5px),
    radial-gradient(circle at 10% 90%, var(--star-red) 1px, transparent 1.5px),
    radial-gradient(circle at 90% 50%, var(--star-white) 1px, transparent 1.5px);
  background-size: 200px 200px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  animation: drift 20s ease-in-out infinite;
}

/* Animated scan line effect */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--punk-red), transparent);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
  animation: scan-line 8s linear infinite;
}

/* Floating decorative elements */
.floating-decor {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
  font-size: 24px;
  color: var(--star-red);
  animation: float 10s ease-in-out infinite;
}

.floating-decor--1 { top: 10%; left: 5%; animation-delay: 0s; color: var(--star-red); }
.floating-decor--2 { top: 20%; right: 8%; animation-delay: 1s; color: var(--star-green); font-size: 20px; }
.floating-decor--3 { top: 60%; left: 3%; animation-delay: 2s; color: var(--star-white); font-size: 28px; }
.floating-decor--4 { top: 80%; right: 5%; animation-delay: 3s; color: var(--star-red); font-size: 18px; }
.floating-decor--5 { bottom: 15%; left: 10%; animation-delay: 4s; color: var(--star-green); font-size: 22px; }

/* ============================================================================
   TOP NAV — Black with red border
   ============================================================================ */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--punk-black);
  border-bottom: var(--border-red);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-md);
  z-index: 1000;
  box-shadow: var(--shadow-red);
}

.top-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.top-nav-logo img {
  height: 40px;
  width: auto;
}

.top-nav-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--punk-white);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.top-nav-name small {
  display: block;
  font-size: 11px;
  color: var(--punk-red);
  font-family: var(--font-body);
  letter-spacing: 1px;
  margin-top: -2px;
}

.top-nav-actions {
  display: flex;
  gap: var(--space-sm);
}

.back-btn {
  background: var(--punk-green) !important;
  border-color: var(--punk-white) !important;
}

.back-btn:hover {
  background: var(--punk-green-dark) !important;
}

.back-btn svg {
  stroke: #F5F5DC !important;
}

.util-btn {
  width: 48px;
  height: 48px;
  background: var(--punk-red);
  border: 3px solid var(--punk-white);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-punk);
  box-shadow: var(--shadow-hard-sm);
  position: relative;
  overflow: hidden;
}

.util-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: rotate(45deg);
  transition: 0.5s;
}

.util-btn:hover::before {
  animation: shine 1s ease-in-out;
}

.util-btn:hover {
  background: var(--punk-red-dark);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px #000000;
}

.util-btn:active {
  transform: translate(0, 0);
  box-shadow: var(--shadow-hard-sm);
}

.util-btn.confirming {
  background: var(--punk-green);
  border-color: var(--punk-white);
  animation: pulse-warning 0.5s ease-in-out infinite;
}

.util-btn.btn-animate {
  animation: button-pop 0.3s ease-out;
}

.util-btn svg {
  stroke: var(--punk-white);
  stroke-width: 3;
  filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.3));
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
}

/* ============================================================================
   CONTAINER
   ============================================================================ */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) 100px;
  position: relative;
  z-index: 1;
}

.stage {
  min-height: calc(100vh - 160px);
}

/* ============================================================================
   BOTTOM NAV
   ============================================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: var(--punk-black);
  border-top: var(--border-red);
  display: flex;
  z-index: 1000;
  box-shadow: 0 -4px 0px #B22222;
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-right: 1px solid #333;
  cursor: pointer;
  transition: var(--transition-punk);
  padding: var(--space-sm);
  position: relative;
  overflow: hidden;
}

.nav-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--punk-red);
  transform: scaleX(0);
  transition: transform 200ms ease;
}

.nav-tab:hover::before {
  transform: scaleX(1);
}

.nav-tab:last-child {
  border-right: none;
}

.nav-tab.active {
  background: var(--punk-red);
  animation: pulse 0.5s ease-in-out;
}

.nav-tab.active::before {
  transform: scaleX(1);
}

.nav-tab:hover:not(.active) {
  background: #1A1A1A;
  transform: translateY(-2px);
}

.nav-tab-label {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--punk-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.nav-tab-icon {
  width: 24px;
  height: 24px;
  fill: var(--punk-white);
}

/* ============================================================================
   CARDS — Black dominant with red/green accents
   ============================================================================ */
.punk-card {
  background: var(--punk-black);
  border: var(--border-thick);
  padding: var(--module-padding);
  position: relative;
  box-shadow: var(--shadow-hard);
  margin-bottom: var(--space-lg);
  color: var(--punk-white);
  transition: all 300ms ease;
  /* No overflow:hidden — the corner-star pseudo-elements sit deliberately
     outside the padding box; clipping them caused the cut-off look at the
     top-left of cards (Festival page badge area). */
}

.punk-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.3);
  border-color: var(--punk-red);
}

.punk-card--red {
  background: var(--punk-red);
  color: var(--punk-white);
}

.punk-card--red:hover {
  border-color: var(--punk-green);
}

.punk-card--green {
  background: var(--punk-green);
  color: var(--punk-white);
}

.punk-card--white {
  background: var(--punk-white);
  color: var(--punk-black);
}

.punk-card--cream {
  background: var(--punk-cream);
  color: var(--punk-black);
}

/* Corner stars */
.punk-card::before,
.punk-card::after {
  content: '★';
  position: absolute;
  font-size: 24px;
}

.punk-card::before {
  top: -12px;
  left: -8px;
  color: var(--punk-red);
}

.punk-card::after {
  bottom: -12px;
  right: -8px;
  color: var(--punk-green);
}

.punk-card--red::after {
  color: var(--punk-white);
}

.punk-card--green::before {
  color: var(--punk-red);
}

.punk-card--white::before,
.punk-card--cream::before {
  color: var(--punk-red);
}

.punk-card--white::after,
.punk-card--cream::after {
  color: var(--punk-green);
}

/* ============================================================================
   TYPOGRAPHY — Bold, high contrast
   ============================================================================ */
.punk-title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 4px;
  line-height: 1;
  margin: 0 0 var(--space-md);
  color: var(--punk-white);
}

.punk-title--red {
  color: var(--punk-red);
}

.punk-title--green {
  color: var(--punk-green);
}

.punk-title--xl {
  font-size: 64px;
  letter-spacing: 6px;
}

.punk-subtitle {
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--punk-red);
  margin: var(--space-sm) 0;
}

.punk-subtitle--green {
  color: var(--punk-green);
}

.punk-heading {
  font-family: var(--font-display);
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: var(--space-md) 0 var(--space-sm);
  color: inherit;
}

.punk-text {
  font-size: 16px;
  line-height: 1.6;
  margin: var(--space-sm) 0;
  color: inherit;
}

.punk-heading--red {
  color: var(--punk-red);
}

.punk-heading--green {
  color: var(--punk-green);
}

.punk-text--red {
  color: var(--punk-red);
  font-weight: 700;
}

.punk-text--green {
  color: var(--punk-green);
  font-weight: 700;
}

/* ============================================================================
   BUTTONS — Red primary, green secondary
   ============================================================================ */
.punk-btn {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 16px 32px;
  background: var(--punk-red);
  color: var(--punk-white);
  border: 3px solid var(--punk-black);
  cursor: pointer;
  box-shadow: var(--shadow-hard);
  transition: var(--transition-punk);
  text-align: center;
  display: inline-block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.punk-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.punk-btn:hover::before {
  width: 300px;
  height: 300px;
}

.punk-btn:hover {
  background: var(--punk-red-dark);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000000;
  animation: button-pop 0.3s ease-out;
}

.punk-btn:active {
  transform: translate(0, 0);
  box-shadow: var(--shadow-hard);
}

.punk-btn--green {
  background: var(--punk-green);
}

.punk-btn--green:hover {
  background: var(--punk-green-dark);
}

.punk-btn--outline {
  background: transparent;
  color: var(--punk-red);
  border-color: var(--punk-red);
}

.punk-btn--white {
  background: var(--punk-white);
  color: var(--punk-black);
}

/* Selected variant of an outline button (review-page filters). */
.punk-btn--outline.active {
  background: var(--punk-red);
  color: var(--punk-white);
  border-color: var(--punk-black);
}

/* ============================================================================
   QUIZ STYLES
   ============================================================================ */
/* ============================================================================
   ARCADE — STAGE PASS (game shell, engines, picker, care panel)
   ----------------------------------------------------------------------------
   Everything here is token-driven (var(--punk-*)), so all six festival
   theme weeks re-skin the games for free. Hit/miss feedback is
   semantic-locked near the bottom of the file (green/red never drift).
   ============================================================================ */
/* GAME HUD — TIME · POINTS · COMBO (classes keep their historical quiz-
   names: the shell reuses the same three-up strip construction). */
.quiz-timer {
  background: var(--punk-red);
  color: var(--punk-white);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 20px;
  display: inline-block;
  border: 2px solid var(--punk-black);
  position: relative;
  overflow: hidden;
}

/* The shell drives this bar's scaleX directly from the game clock. */
.quiz-timer__bar {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 3px;
  height: 4px;
  width: calc(100% - 12px);
  background: var(--punk-white);
  transform-origin: left center;
}

/* Last 5 seconds: hard flash between red and black — act now. */
.quiz-timer--urgent {
  animation: timer-flash 0.5s steps(1) infinite;
}

@keyframes timer-flash {
  0%, 100% { background: var(--punk-red); color: var(--punk-white); }
  50% { background: var(--punk-black); color: var(--punk-red); }
}

.quiz-hud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}

.quiz-hud .stat-card,
.quiz-hud .quiz-timer {
  margin: 0;
  padding: 8px 4px;
  display: block;
}

.game-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  color: var(--punk-red);
  margin: 0 auto 12px;
  width: fit-content;
  padding: 0 14px;
  border-top: 3px solid var(--punk-green);
  border-bottom: 3px solid var(--punk-green);
}

/* The play card: same construction as the old quiz card. */
.game-card {
  position: relative;
}

.game-card::before {
  content: '★';
  position: absolute;
  top: -12px;
  left: 20px;
  font-size: 28px;
  color: var(--punk-red);
}

/* Round-status strip (WAVE 2 · LANTERN GALE / ROUND 1 · YOUR TURN). */
.game-banner {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  text-align: center;
  color: var(--punk-cream);
  border: 2px solid var(--punk-green);
  padding: 6px 10px;
  margin-bottom: 10px;
  min-height: 20px;
}

.game-banner--flash {
  animation: banner-flash 300ms ease;
}

@keyframes banner-flash {
  0% { transform: scale(0.96); opacity: 0.4; }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

/* THE PLAY SURFACE — normalized [0,1] coordinates from the engines map to
   this box. Gameplay motion is JS transforms (survives reduced-motion);
   only flourishes below are CSS. touch-action kills double-tap zoom. */
.game-surface {
  position: relative;
  height: min(56vh, 440px);
  min-height: 300px;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  background:
    radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--punk-green) 14%, transparent), transparent 60%),
    var(--punk-black);
  border: 2px solid var(--punk-red);
  -webkit-user-select: none;
  user-select: none;
}

/* Sprites — absolutely positioned, translated by the engine each frame.
   Centered on their coordinate via translate(-50%,-50%) AFTER the JS
   position translate. */
.game-sprite {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 34px;
  line-height: 1;
  will-change: transform;
  animation: sprite-enter 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes sprite-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.game-sprite--star { color: var(--punk-cream); text-shadow: 0 0 8px color-mix(in srgb, var(--punk-cream) 60%, transparent); }
.game-sprite--gold { color: var(--festival-yellow); font-size: 40px; text-shadow: 0 0 10px color-mix(in srgb, var(--festival-yellow) 70%, transparent); }
.game-sprite--dud { color: var(--punk-red); opacity: 0.85; }
.game-sprite--lantern { font-size: 32px; filter: drop-shadow(0 0 6px rgba(254, 243, 199, 0.5)); }
.game-sprite--moon { color: var(--festival-yellow); font-size: 42px; text-shadow: 0 0 14px color-mix(in srgb, var(--festival-yellow) 80%, transparent); }
.game-sprite--ash { color: var(--punk-white); opacity: 0.5; font-size: 24px; }

.game-sprite--hit {
  animation: sprite-hit 460ms ease forwards;
}

@keyframes sprite-hit {
  0% { transform: var(--sprite-pos, none) scale(1); }
  60% { transform: var(--sprite-pos, none) scale(1.4); opacity: 1; }
  100% { transform: var(--sprite-pos, none) scale(1.7); opacity: 0; }
}

.game-sprite--bad {
  animation: sprite-bad 420ms ease forwards;
}

@keyframes sprite-bad {
  0%, 100% { opacity: 1; }
  20%, 60% { transform: var(--sprite-pos, none) translateX(-5px) rotate(-8deg); }
  40%, 80% { transform: var(--sprite-pos, none) translateX(5px) rotate(8deg); }
  100% { opacity: 0; }
}

/* Tap-point feedback pops: +100 ★ / DUD! −50 — rise and fade. */
.game-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 1px;
  pointer-events: none;
  animation: pop-rise 750ms ease forwards;
}

@keyframes pop-rise {
  0% { opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(-50%, -140%); opacity: 0; }
}

.game-pop--hit { color: #10B981; text-shadow: 0 0 8px rgba(16, 185, 129, 0.45); }
.game-pop--miss { color: #EF4444; text-shadow: 0 0 8px rgba(239, 68, 68, 0.45); }
.game-pop--whiff { color: color-mix(in srgb, var(--punk-white) 45%, transparent); font-size: 18px; }

.game-combo-toast {
  left: 50%;
  top: 18%;
  font-size: 20px;
  color: var(--festival-yellow);
  text-shadow: 0 0 12px color-mix(in srgb, var(--festival-yellow) 70%, transparent);
}

/* GO overlay — 3 · 2 · 1 · ★GO★, tap to skip. */
.game-go {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: color-mix(in srgb, var(--punk-black) 72%, transparent);
  cursor: pointer;
  touch-action: manipulation;
}

.game-go__beat {
  font-family: var(--font-display);
  font-size: 72px;
  color: var(--punk-white);
  text-shadow: var(--shadow-hard);
}

.game-go__beat--pop {
  animation: go-pop 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes go-pop {
  0% { transform: scale(0.6); opacity: 0; }
  55% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}


/* [hidden] MUST win over the display rules above, or the GO/end overlays
   cover the surface invisibly and eat every tap. */
.game-go[hidden],
.game-over-card[hidden] {
  display: none;
}

/* End-of-run freeze card. */
.game-over-card {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--punk-black) 65%, transparent);
  animation: pop-in 380ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.game-over-card .punk-heading {
  font-size: 40px;
  text-shadow: var(--shadow-hard);
}

/* ---- WHISK IT ------------------------------------------------------------ */
.whisk-bowl {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 64px;
  transform-origin: center;
  margin-left: -32px;
  margin-top: -32px;
  animation: bowl-pulse 900ms ease-in-out infinite;
}

@keyframes bowl-pulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.08; }
}

.whisk-bowl--pop {
  animation: bowl-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bowl-pop {
  0% { scale: 1; }
  55% { scale: 1.3; }
  100% { scale: 1; }
}

.whisk-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 90px;
  height: 90px;
  margin-left: -45px;
  margin-top: -45px;
  border: 4px solid var(--punk-green);
  border-radius: 50%;
  will-change: transform;
}

.whisk-ring--perfect { border-color: #10B981; animation: ring-burst 420ms ease forwards; }
.whisk-ring--good { border-color: var(--punk-cream); animation: ring-burst 420ms ease forwards; }
.whisk-ring--miss { border-color: #EF4444; animation: shake 350ms ease forwards, ring-fade 350ms ease forwards; }

@keyframes ring-burst {
  0% { opacity: 1; }
  100% { transform: translate(var(--rx, 0px), var(--ry, 0px)) scale(0.2); opacity: 0; }
}

@keyframes ring-fade {
  to { opacity: 0; }
}

/* ---- LIGHTS UP ------------------------------------------------------------ */
/* Nine cells laid out as an absolute 3×3 grid across the surface. */
.stage-cell {
  position: absolute;
  width: 33.333%;
  height: 33.333%;
  border: 1px dashed color-mix(in srgb, var(--punk-white) 14%, transparent);
  transition: background 220ms ease, box-shadow 220ms ease;
}

.stage-cell:nth-child(1) { left: 0; top: 0; }
.stage-cell:nth-child(2) { left: 33.333%; top: 0; }
.stage-cell:nth-child(3) { left: 66.666%; top: 0; }
.stage-cell:nth-child(4) { left: 0; top: 33.333%; }
.stage-cell:nth-child(5) { left: 33.333%; top: 33.333%; }
.stage-cell:nth-child(6) { left: 66.666%; top: 33.333%; }
.stage-cell:nth-child(7) { left: 0; top: 66.666%; }
.stage-cell:nth-child(8) { left: 33.333%; top: 66.666%; }
.stage-cell:nth-child(9) { left: 66.666%; top: 66.666%; }

.stage-cell--lit {
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--festival-yellow) 30%, transparent), transparent 70%);
  border-color: color-mix(in srgb, var(--festival-yellow) 55%, transparent);
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--festival-yellow) 20%, transparent);
}

.stage-performer {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 40px;
  transform: translate(-50%, -50%);
  animation: performer-in 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes performer-in {
  from { opacity: 0; scale: 0.5; }
  to { opacity: 1; scale: 1; }
}

.stage-performer--hit { animation: sprite-hit 460ms ease forwards; }
.stage-performer--bad { animation: sprite-bad 420ms ease forwards; }

/* ---- TAKE FIVE ------------------------------------------------------------ */
.tf-pads {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
}

.tf-pad {
  flex: 1;
  max-width: 92px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  background: var(--punk-black);
  border: 3px solid var(--punk-green);
  box-shadow: var(--shadow-hard-sm);
}

.tf-pad--flash {
  animation: pad-flash 380ms ease;
}

@keyframes pad-flash {
  0% { background: var(--punk-black); }
  35% { background: var(--punk-green); transform: scale(1.06); }
  100% { background: var(--punk-black); transform: scale(1); }
}

.tf-pad--pressed {
  animation: pad-pressed 200ms ease;
}

@keyframes pad-pressed {
  0% { transform: scale(1); }
  50% { transform: scale(0.94); box-shadow: none; }
  100% { transform: scale(1); }
}

/* ---- GAME PICKER ---------------------------------------------------------- */
.game-picker-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 560px) {
  .game-picker-grid { grid-template-columns: 1fr 1fr; }
}

.game-card-picker {
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.game-card-picker:hover {
  transform: translateY(-2px);
}

.game-card-picker--featured {
  border-color: var(--punk-red);
  grid-column: 1 / -1;
  position: relative;
}

.game-card-picker__chip {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--punk-black);
  background: var(--punk-red);
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 8px;
  transform: rotate(-2deg);
}

.game-card-picker__icon {
  color: var(--punk-red);
  margin: 4px 0 6px;
}

.game-card-picker__star {
  color: var(--festival-yellow);
}

.game-card-picker__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--punk-green);
}

/* ---- EVENT FLASH — the event that's ON now (or just passed) ----------------
   Sits under the countdown (which always aims at the NEXT event). The
   "up" state pulses gently; "passed" is a calm green nudge to redeem the
   code. Both still under the global reduced-motion kill-switch. */
.event-flash {
  position: relative;
  margin-top: 14px;
  padding: 14px 16px;
  border: 3px solid var(--punk-red);
  background: var(--punk-black);
  box-shadow: var(--shadow-hard);
  text-align: center;
}

.event-flash--up {
  animation: event-flash-pulse 1.8s ease-in-out infinite;
}

@keyframes event-flash-pulse {
  0%, 100% { box-shadow: var(--shadow-hard); }
  50% { box-shadow: var(--shadow-hard), 0 0 0 3px color-mix(in srgb, var(--punk-red) 65%, transparent); }
}

.event-flash--passed {
  border-color: var(--punk-green);
  animation: none;
}

.event-flash__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--punk-black);
  background: var(--punk-red);
  padding: 3px 10px;
  transform: rotate(-1.5deg);
}

.event-flash--passed .event-flash__badge {
  background: var(--punk-green);
}

.event-flash__headline {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--punk-cream);
  margin-top: 8px;
  line-height: 1.3;
}

.event-flash__sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--punk-white);
  opacity: 0.85;
  margin-top: 6px;
  line-height: 1.45;
}

/* Revealed ROOT code rows (post-event). */
.event-flash__codes {
  margin-top: 12px;
  border-top: 2px dashed color-mix(in srgb, var(--punk-green) 55%, transparent);
  padding-top: 10px;
  display: grid;
  gap: 8px;
}

.event-flash__codes-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--punk-green);
}

.event-flash__code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.event-flash__code-title {
  flex: 1 1 100%;
  font-size: 11px;
  color: var(--punk-white);
  opacity: 0.75;
  letter-spacing: 0.5px;
}

.event-flash__code {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--punk-black);
  background: var(--punk-cream);
  border: 2px solid var(--punk-black);
  padding: 5px 12px;
  box-shadow: 3px 3px 0 var(--punk-black);
  -webkit-user-select: all;
  user-select: all;
}

.event-flash__copy {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--punk-white);
  background: var(--punk-green);
  border: 2px solid var(--punk-black);
  padding: 6px 12px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--punk-black);
}

.event-flash__copy:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* State swaps (door time / SGT midnight) fade rather than snap. */
#event-flash-holder.event-flash--swap .event-flash {
  transition: opacity 240ms ease;
  opacity: 0;
}

/* ---- ROOTLING CARE panel (Growth page) ------------------------------------ */
.care-panel {
  margin-top: 14px;
}

.care-btn-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.care-btn {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1.5px;
  padding: 12px 8px;
  background: var(--punk-cream);
  color: var(--punk-black);
  border: 3px solid var(--punk-black);
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.care-btn:hover:not(:disabled) { transform: translateY(-2px); }
.care-btn:active:not(:disabled) { box-shadow: none; transform: translateY(1px); }

.care-btn:disabled {
  cursor: default;
  opacity: 0.55;
  box-shadow: none;
}

.bond-chip {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--punk-black);
  background: var(--punk-green);
  padding: 3px 10px;
  display: inline-block;
  border: 2px solid var(--punk-black);
  transform: rotate(1.5deg);
}

/* ---- shared arcade keyframes kept from the quiz era ------------------------ */
@keyframes pop-in {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.explain-tap {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--punk-green);
  text-align: right;
  margin-top: 8px;
  animation: flicker 2s ease-in-out infinite;
}

/* ============================================================================
   PROGRESS & STATS
   ============================================================================ */
.progress-bar {
  height: 8px;
  background: var(--punk-black);
  border: 2px solid var(--punk-red);
  position: relative;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--punk-red), var(--punk-green));
  transition: width 300ms ease;
}

.stat-card {
  background: var(--punk-black);
  border: var(--border-thick);
  padding: var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-hard-sm);
  position: relative;
  color: var(--punk-white);
}

.stat-card::after {
  content: '★';
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 16px;
  color: var(--punk-red);
  animation: emblem-wiggle 2s ease-in-out infinite;
}

.stat-card:nth-child(even)::after {
  color: var(--punk-green);
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--punk-red);
  animation: pulse 0.5s ease-in-out;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--punk-red);
  line-height: 1;
  text-shadow: 0 0 10px rgba(178, 34, 34, 0.3);
}

.stat-card:nth-child(even) .stat-value {
  color: var(--punk-green);
  text-shadow: 0 0 10px rgba(46, 139, 87, 0.3);
}

.stat-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--punk-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: var(--space-xs);
}

/* ============================================================================
   PASSPORT / EVENT UNLOCK
   ============================================================================ */
.passport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.passport-slot {
  aspect-ratio: 1;
  background: var(--punk-black);
  border: var(--border-thick);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-hard-sm);
  color: var(--punk-white);
}

.passport-slot.unlocked {
  background: var(--punk-green);
  color: var(--punk-white);
}

.passport-slot::before {
  content: '★';
  position: absolute;
  top: -10px;
  right: -8px;
  font-size: 20px;
  color: var(--punk-red);
}

.passport-slot.unlocked::before {
  color: var(--punk-red);
}

.passport-slot-title {
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.passport-slot-date {
  font-family: var(--font-body);
  font-size: 12px;
  margin-top: var(--space-xs);
}

.stamp {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 60px;
  height: 60px;
  border: 3px solid var(--punk-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hand);
  font-size: 10px;
  color: var(--punk-red);
  transform: rotate(-15deg);
  background: var(--punk-white);
  opacity: 0;
  transition: opacity 200ms;
}

.passport-slot.unlocked .stamp {
  opacity: 1;
  border-color: var(--punk-green);
  color: var(--punk-green);
}

/* ============================================================================
   ACHIEVEMENTS
   ============================================================================ */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.badge {
  aspect-ratio: 1;
  background: var(--punk-black);
  border: 2px solid var(--punk-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  position: relative;
  box-shadow: var(--shadow-hard-sm);
}

.badge--green {
  border-color: var(--punk-green);
}

.badge.locked {
  opacity: 0.4;
  filter: grayscale(1);
}

.badge-icon {
  font-size: 32px;
  margin-bottom: var(--space-xs);
}

.badge-name {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--punk-white);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================================
   LEADERBOARD
   ============================================================================ */
.leaderboard-row {
  display: grid;
  grid-template-columns: 40px 1fr 80px;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--punk-black);
  border: 2px solid var(--punk-red);
  margin-bottom: var(--space-sm);
  align-items: center;
  box-shadow: var(--shadow-hard-sm);
  color: var(--punk-white);
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
}

.leaderboard-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, transparent, rgba(178, 34, 34, 0.2), transparent);
  transition: width 0.3s;
}

.leaderboard-row:hover::before {
  width: 100%;
}

.leaderboard-row:hover {
  transform: translateX(4px);
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
}

.leaderboard-row:nth-child(even) {
  border-color: var(--punk-green);
}

.leaderboard-row.you {
  background: var(--punk-red);
  color: var(--punk-white);
  border-color: var(--punk-white);
  animation: pulse 2s ease-in-out infinite;
}

.leaderboard-rank {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--punk-white);
}

.leaderboard-row:nth-child(even) .leaderboard-rank {
  color: var(--punk-green);
}

.leaderboard-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.leaderboard-score {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--punk-red);
}

.leaderboard-row:nth-child(even) .leaderboard-score {
  color: var(--punk-green);
}

.leaderboard-row.you .leaderboard-score {
  color: var(--punk-white);
}

/* ============================================================================
   INPUTS
   ============================================================================ */
.punk-input {
  width: 100%;
  padding: 16px;
  background: var(--punk-white);
  border: var(--border-thick);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--punk-black);
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: var(--shadow-hard-sm);
}

.punk-input::placeholder {
  color: #999;
  text-transform: none;
}

.punk-input:focus {
  outline: none;
  border-color: var(--punk-red);
  box-shadow: 2px 2px 0px var(--punk-red);
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */
.punk-hero {
  position: relative;
  background: var(--punk-black);
  border: var(--border-thick);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-hard);
  margin-bottom: var(--space-xl);
  overflow: hidden;
  color: var(--punk-white);
}

.punk-hero--red {
  background: var(--punk-red);
}

.punk-hero--green {
  background: var(--punk-green);
}

.punk-hero__content {
  position: relative;
  z-index: 1;
}

.punk-hero__badge {
  display: inline-block;
  background: var(--punk-red);
  color: var(--punk-white);
  padding: 8px 24px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 3px;
  margin-bottom: var(--space-md);
  border: 3px solid var(--punk-white);
  transform: rotate(-2deg);
  animation: flicker 4s ease-in-out infinite;
}

.punk-hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 10vw, 120px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 8px;
  color: var(--punk-white);
  margin: 0 0 var(--space-md);
  line-height: 0.9;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  animation: text-glow 3s ease-in-out infinite;
}

.punk-hero__subtitle {
  font-family: var(--font-hand);
  font-size: clamp(18px, 3vw, 28px);
  color: var(--punk-red);
  margin: 0 0 var(--space-sm);
  animation: float 5s ease-in-out infinite;
}

.punk-hero__tagline {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--punk-white);
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: var(--space-lg);
  animation: drift 8s ease-in-out infinite;
}

.punk-hero__cta {
  font-size: 16px;
  padding: 18px 40px;
  margin-top: var(--space-md);
  background: var(--punk-white);
  color: var(--punk-black);
}

.punk-hero__cta:hover {
  background: var(--punk-green);
  color: var(--punk-white);
}

.punk-hero__decor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.punk-star {
  position: absolute;
  opacity: 0.4;
  animation: twinkle 2s ease-in-out infinite;
}

.punk-star--1 {
  font-size: 60px;
  top: 10%;
  left: 5%;
  color: var(--punk-red);
  animation-delay: 0s;
}

.punk-star--2 {
  font-size: 40px;
  top: 20%;
  right: 10%;
  color: var(--punk-green);
  animation-delay: 0.5s;
}

.punk-star--3 {
  font-size: 80px;
  bottom: 20%;
  left: 15%;
  color: var(--punk-white);
  animation-delay: 1s;
}

.punk-star--4 {
  font-size: 50px;
  bottom: 10%;
  right: 5%;
  color: var(--punk-red);
  animation-delay: 1.5s;
}

.punk-star--5 {
  font-size: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--punk-green);
  animation-delay: 0.3s;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

/* ============================================================================
   STATS GRID
   ============================================================================ */
.punk-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.punk-stat-card {
  background: var(--punk-black);
  border: var(--border-thick);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-hard-sm);
  position: relative;
  color: var(--punk-white);
}

.punk-stat-card:nth-child(even) {
  border-color: var(--punk-green);
}

.punk-stat-card::after {
  content: '★';
  position: absolute;
  top: -10px;
  right: -8px;
  font-size: 18px;
  color: var(--punk-red);
}

.punk-stat-card:nth-child(even)::after {
  color: var(--punk-green);
}

.punk-stat__value {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--punk-red);
  line-height: 1;
}

.punk-stat-card:nth-child(even) .punk-stat__value {
  color: var(--punk-green);
}

.punk-stat__label {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--punk-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: var(--space-xs);
}

/* ============================================================================
   FEATURES GRID
   ============================================================================ */
.punk-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.punk-feature-card {
  border: var(--border-thick);
  padding: var(--space-lg);
  position: relative;
  box-shadow: var(--shadow-hard);
  background: var(--punk-black);
  color: var(--punk-white);
}

.punk-feature-card--red {
  background: var(--punk-red);
}

.punk-feature-card--green {
  background: var(--punk-green);
}

.punk-feature-card--white {
  background: var(--punk-white);
  color: var(--punk-black);
}

.punk-feature__icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: var(--space-sm);
}

.punk-feature__title {
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: var(--space-sm) 0;
  text-align: center;
}

.punk-feature__desc {
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* ============================================================================
   COUNTDOWN
   ============================================================================ */
.punk-countdown {
  background: var(--punk-black);
  border: var(--border-red);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-red);
  margin-bottom: var(--space-xl);
  position: relative;
  color: var(--punk-white);
}

.punk-countdown::before {
  content: '★';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  color: var(--punk-red);
}

.punk-countdown__label {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--punk-white);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--space-md);
}

.punk-countdown__timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
}

.punk-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.punk-countdown__value {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--punk-red);
  line-height: 1;
  min-width: 80px;
  text-shadow: 0 0 15px rgba(178, 34, 34, 0.5);
  animation: pulse 2s ease-in-out infinite;
}

.punk-countdown__unit:nth-child(2) .punk-countdown__value {
  animation-delay: 0.5s;
}

.punk-countdown__unit:nth-child(4) .punk-countdown__value {
  animation-delay: 1s;
}

.punk-countdown__unit:nth-child(6) .punk-countdown__value {
  animation-delay: 1.5s;
}

.punk-countdown__unit .punk-countdown__label {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--punk-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: var(--space-xs);
}

.punk-countdown__separator {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--punk-green);
  margin-top: -16px;
  animation: flicker 3s ease-in-out infinite;
}

/* ============================================================================
   DATES BADGE
   ============================================================================ */
.punk-dates-badge {
  background: var(--punk-black);
  border: var(--border-thick);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-hard);
  position: relative;
  color: var(--punk-white);
}

.punk-dates-badge::after {
  content: '★';
  position: absolute;
  bottom: -12px;
  right: 20px;
  font-size: 20px;
  color: var(--punk-green);
}

.punk-dates-badge__title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--punk-red);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--space-sm);
}

.punk-dates-badge__dates {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--punk-white);
  margin-bottom: var(--space-sm);
}

.punk-dates-badge__status {
  display: inline-block;
  background: var(--punk-red);
  color: var(--punk-white);
  padding: 8px 20px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  border: 2px solid var(--punk-black);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
  .punk-title {
    font-size: 32px;
    letter-spacing: 2px;
  }

  .punk-title--xl {
    font-size: 40px;
    letter-spacing: 3px;
  }

  .punk-subtitle {
    font-size: 18px;
  }

  .punk-heading {
    font-size: 20px;
  }

  .game-title {
    font-size: 18px;
  }

  .punk-btn {
    font-size: 16px;
    padding: 14px 24px;
  }

  .container {
    padding: var(--space-md) var(--space-sm) 100px;
  }

  .passport-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .punk-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .punk-features-grid {
    grid-template-columns: 1fr;
  }

  .punk-hero__title {
    letter-spacing: 4px;
  }

  .punk-stat__value {
    font-size: 36px;
  }

  .punk-countdown__timer {
    gap: var(--space-sm);
  }

  .punk-countdown__value {
    font-size: 36px;
    min-width: 60px;
  }

  .punk-countdown__separator {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .punk-title {
    font-size: 28px;
  }

  .nav-tab-label {
    font-size: 9px;
  }

  .passport-grid {
    grid-template-columns: 1fr;
  }

  .punk-stats-grid {
    grid-template-columns: 1fr;
  }

  .punk-hero {
    padding: var(--space-xl) var(--space-md);
  }

  .punk-hero__badge {
    font-size: 14px;
    padding: 6px 16px;
  }

  .punk-countdown__value {
    font-size: 28px;
    min-width: 50px;
  }
}

/* ============================================================================
   UTILITIES
   ============================================================================ */
.text-red { color: var(--punk-red); }
.text-green { color: var(--punk-green); }
.text-white { color: var(--punk-white); }

.bg-black { background: var(--punk-black); }
.bg-red { background: var(--punk-red); }
.bg-green { background: var(--punk-green); }
.bg-white { background: var(--punk-white); }

.border-punk { border: var(--border-thick); }
.border-red { border: var(--border-red); }
.border-green { border: var(--border-green); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================================
   TOAST NOTIFICATIONS
   ============================================================================ */
.achievement-toast {
  position: fixed;
  top: 80px;
  right: 16px;
  background: var(--punk-black);
  border: var(--border-red);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-red);
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms;
  z-index: 3000;
  max-width: 320px;
}

.achievement-toast.show {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.achievement-toast .icon {
  font-size: 32px;
}

.achievement-toast .name {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--punk-red);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.achievement-toast .desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--punk-white);
}

.bonus-toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  /* FIX (stuck "+149 EXP" bug): the old resting state — translateY(100px)
     at bottom:90px — never left the viewport, so the pill stayed visible
     and interactive forever. The resting state is now genuinely off-screen
     AND invisible; the node is also removed by toast.js after exit. */
  transform: translateX(-50%) translateY(160%) scale(0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: var(--punk-green);
  color: var(--punk-white);
  padding: 12px 24px;
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: var(--border-thick);
  box-shadow: var(--shadow-hard);
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 250ms ease, visibility 250ms;
  z-index: 3000;
  max-width: min(88vw, 420px);
  text-align: center;
}

.bonus-toast.show {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}

/* ============================================================================
   UTILITY CLASSES FOR SCREENS
   ============================================================================ */
.screen {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: opacity 200ms ease;
}

.screen.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 3px 3px 0px #000000; }
  50% { opacity: 0.8; transform: scale(1.05); box-shadow: 4px 4px 0px var(--punk-red); }
}

@keyframes button-pop {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes shine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(2deg); }
  66% { transform: translateY(5px) rotate(-1deg); }
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, -5px) rotate(1deg); }
  50% { transform: translate(0, -10px) rotate(0deg); }
  75% { transform: translate(-5px, -5px) rotate(-1deg); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bounce-in {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  41%, 43% { opacity: 0.8; }
  45% { opacity: 1; }
  92%, 94% { opacity: 0.8; }
}

@keyframes scan-line {
  0% { top: -10%; }
  100% { top: 110%; }
}

@keyframes emblem-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes emblem-wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@keyframes border-glow {
  0%, 100% { border-color: var(--punk-red); }
  50% { border-color: var(--punk-green); }
}

@keyframes text-glow {
  0%, 100% { text-shadow: 0 0 5px var(--punk-red); }
  50% { text-shadow: 0 0 20px var(--punk-red), 0 0 30px var(--punk-red); }
}

.pulse-highlight {
  animation: pulse 600ms ease-in-out;
}

.emblem-bounce {
  animation: emblem-bounce 2s ease-in-out infinite;
}

.emblem-wiggle {
  animation: emblem-wiggle 1s ease-in-out infinite;
}

/* Enhanced floating animations */
.float-slow {
  animation: float 6s ease-in-out infinite;
}

.float-medium {
  animation: float 4s ease-in-out infinite;
}

.float-fast {
  animation: float 3s ease-in-out infinite;
}

.drift {
  animation: drift 8s ease-in-out infinite;
}

.spin-slow {
  animation: spin-slow 20s linear infinite;
}

.bounce-in {
  animation: bounce-in 0.6s ease-out;
}

.slide-up {
  animation: slide-up 0.4s ease-out;
}

.flicker {
  animation: flicker 3s ease-in-out infinite;
}

.border-glow {
  animation: border-glow 2s ease-in-out infinite;
}

.text-glow {
  animation: text-glow 2s ease-in-out infinite;
}

/* ============================================================================
   ROOT ARTWORK CONTAINER
   ============================================================================ */
.root-artwork-frame {
  text-align: center;
  padding: 16px;
  background: var(--punk-black);
  border: var(--border-thick);
  margin: 16px 0;
}

.root-artwork-frame svg {
  max-width: 100%;
  height: auto;
}

/* Drives the "growing artwork" in Event Unlock: layers for stages the
   player hasn't unlocked yet stay hidden until their event code lands. */
.artwork-layer--hidden {
  display: none;
}

/* ============================================================================
   FESTIVAL CARD (share card on the results screen)
   ============================================================================ */
.field-label {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--punk-red);
  margin: 16px 0 8px;
  text-align: center;
}

.text-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--punk-white);
  border: var(--border-thick);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--punk-black);
  box-shadow: var(--shadow-hard-sm);
}

.text-input:focus {
  outline: none;
  border-color: var(--punk-red);
  box-shadow: 2px 2px 0px var(--punk-red);
}

.passport-frame {
  margin: 16px 0;
  border: var(--border-thick);
  background: var(--punk-black);
  padding: 12px;
  box-shadow: var(--shadow-hard-sm);
}

.passport-frame.reveal {
  animation: bounce-in 0.6s ease-out;
}

.passport-preview {
  display: flex;
  justify-content: center;
}

.passport-preview img {
  max-width: 100%;
  height: auto;
  border: 2px solid var(--punk-white);
}

.loading-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--punk-white);
  text-align: center;
  padding: 32px 0;
}

.btn-row {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 12px 20px;
  background: var(--punk-red);
  color: var(--punk-white);
  border: 3px solid var(--punk-black);
  cursor: pointer;
  box-shadow: var(--shadow-hard-sm);
  transition: var(--transition-punk);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.btn:hover {
  background: var(--punk-red-dark);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}

.btn:active {
  transform: translate(0, 0);
  box-shadow: var(--shadow-hard-sm);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn--brush {
  background: var(--punk-white);
  color: var(--punk-black);
}

.btn--brush:hover {
  background: var(--punk-cream);
}

.btn.secondary {
  background: transparent;
  color: var(--punk-red);
  border-color: var(--punk-red);
}

.field-error {
  font-family: var(--font-body);
  font-size: 12px;
  color: #F87171;
  min-height: 16px;
  text-align: center;
}

/* ============================================================================
   EVENT-UNLOCK REVEAL OVERLAY
   ============================================================================ */
.reveal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 20, 0.88);
  z-index: 2500;
  animation: fade-in 200ms ease;
}

.reveal-overlay[hidden] {
  display: none;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================================================
   EMBLEM (results-screen star)
   ============================================================================ */
.emblem-lg {
  font-size: 56px;
  line-height: 1;
  color: var(--punk-red);
  text-align: center;
  text-shadow: 3px 3px 0 var(--punk-green);
}

/* ============================================================================
   FOCUS VISIBILITY — keyboard users get a clear yellow ring
   ============================================================================ */
.punk-btn:focus-visible,
.game-card-picker:focus-visible,
.util-btn:focus-visible,
.nav-tab:focus-visible,
.punk-input:focus-visible,
.text-input:focus-visible,
.btn:focus-visible,
.event-tab:focus-visible {
  outline: 3px solid var(--festival-yellow);
  outline-offset: 2px;
}

/* ============================================================================
   REDUCED MOTION — honour the OS preference for every decorative
   animation (the app sets html.reduce-motion too; see utils/motion.js).
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ============================================================================
   HOME — hero, action grid, countdown, daily challenge
   ============================================================================ */
.hero-logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.hero-logo img {
  height: 84px;
  width: auto;
}

/* "Our Roots" sub-logo as a compositional mark, not a stacked second logo:
   rotated, translucent, cropped off the hero's bottom-right corner. */
.hero-roots-mark {
  position: absolute;
  right: -56px;
  bottom: -48px;
  width: 300px;
  max-width: 60vw;
  transform: rotate(-14deg);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}

.hero-progress {
  max-width: 320px;
  margin: 16px auto 0;
  text-align: center;
}

.hero-progress-link {
  display: inline-block;
  background: none;
  border: none;
  color: var(--punk-red);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  margin: 8px auto 0;
  padding: 8px 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- 2×2 festival action grid ---- */
.home-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 440px;
  margin: 20px auto 0;
}

.home-action {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  min-height: 64px;
  padding: 14px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  cursor: pointer;
  border: 3px solid var(--punk-black);
  box-shadow: var(--shadow-hard-sm);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
  /* gentle sticker energy: alternating tiny rotations, one family */
}

.home-action:nth-child(1) { transform: rotate(-0.6deg); }
.home-action:nth-child(2) { transform: rotate(0.5deg); }
.home-action:nth-child(3) { transform: rotate(0.4deg); }
.home-action:nth-child(4) { transform: rotate(-0.5deg); }

.home-action__icon { font-size: 20px; line-height: 1; }

.home-action--primary { background: var(--punk-red); color: var(--punk-white); }
.home-action--outline { background: var(--punk-black); color: var(--punk-red); border-color: var(--punk-red); }
.home-action--green { background: var(--punk-green); color: var(--punk-white); }
.home-action--outline-green { background: var(--punk-black); color: var(--punk-green); border-color: var(--punk-green); }

.home-action:hover {
  transform: rotate(0deg) translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}

.home-action:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

@media (max-width: 359px) {
  .home-actions { gap: 8px; }
  .home-action { font-size: 14px; min-height: 56px; padding: 10px 6px; }
  .home-action__icon { display: none; }
}

/* ---- countdown feature ---- */
.countdown {
  max-width: 440px;
  margin: 20px auto 0;
  background: var(--punk-black);
  border: 3px solid var(--punk-green);
  box-shadow: 6px 6px 0px var(--punk-green-dark);
  padding: var(--space-md);
}

.countdown__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.countdown__label {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--punk-green);
}

.countdown__doors {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--punk-white);
  opacity: 0.7;
}

.countdown__units {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
}

.countdown__unit { text-align: center; min-width: 56px; }

.countdown__value {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  color: var(--punk-white);
  text-shadow: 3px 3px 0px rgba(16, 185, 129, 0.35);
}

.countdown__value.tick {
  animation: cd-tick 320ms ease;
}

@keyframes cd-tick {
  0% { transform: translateY(-6px); opacity: 0.2; }
  100% { transform: translateY(0); opacity: 1; }
}

.countdown__sep {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--punk-green);
  line-height: 1.2;
}

.countdown__unit-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--punk-white);
  opacity: 0.7;
  margin-top: 6px;
}

@media (max-width: 379px) {
  .countdown__unit { min-width: 46px; }
  .countdown__value { font-size: 34px; }
  .countdown__sep { font-size: 26px; }
}

/* ---- countdown: per-event skins --------------------------------------------
   The home countdown rolls from key event to key event, and each event
   carries its own look. The base .countdown above IS the Launch Day skin
   (punk black/green). Modifiers below reskin everything: background,
   border, shadows, digit glow and one signature motif per event.
   -------------------------------------------------------------------------- */

/* the box morphs between skins; head/units dip out during a rollover swap */
.countdown {
  transition: background-color .3s ease, border-color .3s ease,
              border-radius .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
}

.countdown__head,
.countdown__units { transition: opacity .3s ease, transform .3s ease; }

.countdown--swap .countdown__head,
.countdown--swap .countdown__units {
  opacity: 0;
  transform: translateY(8px);
}

.countdown::before,
.countdown::after { transition: opacity .3s ease; }
.countdown--swap::before,
.countdown--swap::after { opacity: 0; }

/* -- MATCHA RAVE × VR ART — dark club, neon-lime glow, scanlines --------- */
.countdown--matcha {
  background: #0C1F16;
  border-color: #A3E635;
  box-shadow: 6px 6px 0px #14532D;
  animation: cd-glow-pulse 2.4s ease-in-out infinite;
}

.countdown--matcha::after {
  /* CRT scanlines over the club dark */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(163, 230, 53, 0.06) 0 1px,
    transparent 1px 4px
  );
  pointer-events: none;
}

.countdown--matcha .countdown__label { color: #A3E635; }
.countdown--matcha .countdown__doors { color: #D9F99D; opacity: 0.75; }
.countdown--matcha .countdown__value {
  color: #F7FFE0;
  text-shadow: 0 0 14px rgba(163, 230, 53, 0.55), 3px 3px 0px rgba(20, 83, 45, 0.6);
}
.countdown--matcha .countdown__sep { color: #A3E635; }
.countdown--matcha .countdown__unit-label { color: #D9F99D; opacity: 0.75; }

@keyframes cd-glow-pulse {
  0%, 100% { box-shadow: 6px 6px 0px #14532D, 0 0 0px rgba(163, 230, 53, 0); }
  50% { box-shadow: 6px 6px 0px #14532D, 0 0 22px rgba(163, 230, 53, 0.45); }
}

/* -- SITIZENS TAKE THE STAGE — spotlight beam, red curtain, marquee frame - */
.countdown--stage {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(251, 191, 36, 0.28), transparent 55%),
    #1A1A2E;
  border-color: var(--punk-red);
  box-shadow: 6px 6px 0px var(--punk-red-dark);
}

.countdown--stage::before {
  /* marquee bulb frame */
  content: '';
  position: absolute;
  inset: 6px;
  border: 2px dashed rgba(251, 191, 36, 0.45);
  pointer-events: none;
}

.countdown--stage .countdown__label {
  color: var(--festival-yellow);
  animation: cd-marquee 3.2s ease-in-out infinite;
}
.countdown--stage .countdown__doors { color: var(--punk-cream); opacity: 0.75; }
.countdown--stage .countdown__value {
  color: #FFF7E0;
  text-shadow: 3px 3px 0px rgba(220, 38, 38, 0.5);
}
.countdown--stage .countdown__sep { color: var(--festival-yellow); }
.countdown--stage .countdown__unit-label { color: var(--punk-cream); opacity: 0.75; }

@keyframes cd-marquee {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* -- MID-AUTUMN FESTIVAL — indigo night, full moon, lantern amber --------- */
.countdown--midautumn {
  background: #1E1B4B;
  border-color: #F59E0B;
  box-shadow: 6px 6px 0px #92400E;
  border-radius: 14px; /* the one soft-edged skin — a lantern, not a poster */
}

.countdown--midautumn::before {
  /* the full moon */
  content: '';
  position: absolute;
  top: 10px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FEF3C7, #FBBF24 70%, #F59E0B);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.6);
  animation: cd-moon 4s ease-in-out infinite;
  pointer-events: none;
}

.countdown--midautumn .countdown__head { padding-right: 44px; } /* clear the moon */
.countdown--midautumn .countdown__label { color: #FBBF24; }
.countdown--midautumn .countdown__doors { color: #FDE68A; opacity: 0.75; }
.countdown--midautumn .countdown__value {
  color: #FEF3C7;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.5), 3px 3px 0px rgba(146, 64, 14, 0.55);
}
.countdown--midautumn .countdown__sep { color: #FBBF24; }
.countdown--midautumn .countdown__unit-label { color: #FDE68A; opacity: 0.75; }

@keyframes cd-moon {
  0%, 100% { box-shadow: 0 0 14px rgba(251, 191, 36, 0.45); }
  50% { box-shadow: 0 0 26px rgba(251, 191, 36, 0.8); }
}

/* -- TAKE 5! CARNIVAL — the one daylight card: cream ticket, bunting ------ */
.countdown--takefive {
  background: var(--punk-cream);
  border-color: var(--punk-black);
  box-shadow: 6px 6px 0px var(--punk-red);
}

.countdown--takefive::before {
  /* carnival bunting strip */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    45deg,
    var(--punk-red) 0 12px,
    var(--festival-yellow) 12px 24px,
    var(--punk-green) 24px 36px
  );
  pointer-events: none;
}

.countdown--takefive .countdown__label { color: var(--punk-red); }
.countdown--takefive .countdown__doors { color: var(--punk-black); opacity: 0.7; }
.countdown--takefive .countdown__value {
  color: var(--punk-black);
  text-shadow: 3px 3px 0px rgba(239, 68, 68, 0.85);
}
.countdown--takefive .countdown__sep { color: var(--punk-red); }
.countdown--takefive .countdown__unit-label { color: var(--punk-black); opacity: 0.7; }

/* -- SITIZEN DAY FINALE — black & gold, confetti, shimmering label -------- */
.countdown--finale {
  background: #0D0D14;
  border-color: #FBBF24;
  box-shadow: 6px 6px 0px #B45309;
}

.countdown--finale::before {
  /* drifting confetti flecks */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(236, 72, 153, 0.5) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(59, 130, 246, 0.45) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(16, 185, 129, 0.45) 1.5px, transparent 2px);
  background-size: 97px 61px, 83px 47px, 71px 73px;
  background-position: 12px 8px, 40px 30px, 24px 52px;
  opacity: 0.5;
  animation: cd-confetti 9s linear infinite;
  pointer-events: none;
}

.countdown--finale .countdown__label {
  background: linear-gradient(100deg, #FBBF24 20%, #FEF3C7 40%, #FBBF24 60%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cd-shimmer 3s linear infinite;
}
.countdown--finale .countdown__doors { color: #FDE68A; opacity: 0.8; }
.countdown--finale .countdown__value {
  color: #FFFFFF;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5), 3px 3px 0px rgba(180, 83, 9, 0.6);
}
.countdown--finale .countdown__sep { color: #FBBF24; }
.countdown--finale .countdown__unit-label { color: #FDE68A; opacity: 0.8; }

@keyframes cd-confetti {
  from { background-position: 12px 8px, 40px 30px, 24px 52px; }
  to { background-position: 12px 69px, 40px 77px, 24px 125px; }
}

@keyframes cd-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---- daily challenge, given real presence ---- */
.challenge-card {
  position: relative;
  max-width: 440px;
  margin: 20px auto 0;
  background: var(--punk-black);
  border: 3px solid var(--punk-red);
  box-shadow: 6px 6px 0px var(--punk-red-dark);
  padding: var(--space-md);
}

.challenge-card__sticker {
  position: absolute;
  top: -14px;
  left: -10px;
  background: var(--punk-red);
  color: var(--punk-white);
  border: 2px solid var(--punk-white);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2px;
  padding: 4px 12px;
  transform: rotate(-6deg);
  box-shadow: 2px 2px 0px var(--punk-black);
}

.challenge-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.challenge-card__icon {
  font-size: 34px;
  line-height: 1;
  flex-shrink: 0;
}

.challenge-card__body { flex: 1; min-width: 0; text-align: left; }

.challenge-card__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--punk-red);
}

.challenge-card__name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--punk-white);
  letter-spacing: 1px;
}

.challenge-card__count {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--punk-green);
  flex-shrink: 0;
}

.challenge-card__count span { font-size: 14px; color: var(--punk-white); opacity: 0.7; }

.challenge-card__done {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--punk-green);
  border: 3px solid var(--punk-green);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
  flex-shrink: 0;
}

.challenge-card__desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--punk-white);
  margin: 10px 0;
  text-align: left;
}

.challenge-card__bar {
  height: 10px;
  border: 2px solid var(--punk-green);
  background: var(--punk-black);
}

.challenge-card__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--punk-red), var(--punk-green));
  transition: width 400ms ease;
}

.challenge-card__cta {
  display: block;
  margin: 14px auto 0;
  min-width: 200px;
}

.challenge-card--done {
  border-color: var(--punk-green);
  box-shadow: 6px 6px 0px var(--punk-green-dark);
}

.challenge-card--done .challenge-card__sticker { background: var(--punk-green); }
.challenge-card--done .challenge-card__eyebrow { color: var(--punk-green); }

/* ---- live / closed banners ---- */
.live-banner {
  background: var(--punk-green);
  border: 3px solid var(--punk-white);
  padding: 14px 20px;
  margin: 16px auto 0;
  text-align: center;
  box-shadow: var(--shadow-hard);
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--punk-white);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.closed-banner {
  background: var(--punk-black);
  border: 3px solid var(--punk-green);
  padding: 14px 20px;
  margin: 16px auto 0;
  text-align: center;
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--punk-green);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ============================================================================
   FESTIVAL GUIDE — hero, details line, event tabs/cards, quick passes
   ============================================================================ */
.festival-hero-logo {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 auto 16px;
}

.festival-details {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--punk-white);
  text-align: center;
  margin: 0 0 8px;
}

.guide-divider {
  margin: 24px 0;
  border-top: 2px solid var(--punk-red);
}

.guide-stat {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
}

.guide-stat--red { color: var(--punk-red); }
.guide-stat--green { color: var(--punk-green); }
.guide-stat--white { color: var(--punk-white); }

.guide-stat__label {
  font-size: 11px;
  color: var(--punk-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

/* ---- event tabs ---- */
.event-tabs {
  display: flex;
  gap: 8px;
  margin: 20px 0;
  overflow-x: auto;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.event-tab {
  flex: 1 0 auto;
  min-width: 64px;
  padding: 12px 10px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  transition: background 150ms ease, color 150ms ease;
}

.event-tab.active {
  background: var(--punk-red);
  color: var(--punk-white);
}

/* ---- event cards ---- */
.event-card {
  position: relative;
  display: flex;
  gap: 16px;
  margin: 16px 0;
  background: var(--punk-black);
  border: 3px solid var(--punk-red);
  box-shadow: var(--shadow-hard-sm);
  padding: var(--space-md);
  align-items: flex-start;
}

.event-card--green { border-color: var(--punk-green); }

.event-card__date {
  flex-shrink: 0;
  min-width: 72px;
  text-align: center;
  background: var(--punk-red);
  color: var(--punk-white);
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.05;
  padding: 10px 8px;
  border: 2px solid var(--punk-black);
  box-shadow: 3px 3px 0px var(--punk-black);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.event-card--green .event-card__date { background: var(--punk-green); }

.event-card__main { flex: 1; min-width: 0; }

.event-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--punk-white);
  margin: 0 0 10px;
  padding-right: 40px;
}

.event-card__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--punk-white);
  margin: 0;
}

.event-card__sticker {
  position: absolute;
  top: -16px;
  right: -12px;
  width: 44px;
  height: auto;
  transform: rotate(12deg);
  pointer-events: none;
}

@media (max-width: 379px) {
  .event-card { gap: 10px; padding: 12px; }
  .event-card__date { min-width: 56px; font-size: 20px; }
  .event-card__title { font-size: 18px; padding-right: 34px; }
  .event-card__sticker { width: 34px; top: -12px; right: -8px; }
  .event-card__desc { font-size: 13px; }
}

/* ---- quick links as festival passes ---- */
.quick-passes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quick-pass {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 12px 14px 12px 20px;
  background: var(--punk-black);
  border: 3px solid var(--punk-red);
  box-shadow: var(--shadow-hard-sm);
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
  /* the whole card is the link — no tiny text targets */
}

.quick-pass--green { border-color: var(--punk-green); }

.quick-pass__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--punk-red);
  /* perforated ticket edge */
  background-image: linear-gradient(to bottom, var(--punk-red) 60%, transparent 60%);
  background-size: 100% 8px;
}

.quick-pass--green .quick-pass__spine {
  background-color: var(--punk-green);
  background-image: linear-gradient(to bottom, var(--punk-green) 60%, transparent 60%);
}

.quick-pass__icon {
  color: var(--punk-white);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.quick-pass__label {
  flex: 1;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--punk-white);
  line-height: 1.25;
}

.quick-pass__arrow {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--punk-red);
  flex-shrink: 0;
}

.quick-pass--green .quick-pass__arrow { color: var(--punk-green); }

.quick-pass:hover {
  transform: rotate(-1deg) translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}

.quick-pass:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

@media (max-width: 379px) {
  .quick-pass { min-height: 56px; padding: 10px 10px 10px 16px; }
  .quick-pass__label { font-size: 12px; }
}

/* ============================================================================
   POSTER BACKGROUND — festival stickers layered at the page edges
   ============================================================================ */
.bg-poster {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-poster img {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  animation: poster-float 9s ease-in-out infinite;
}

.bg-poster__wash {
  position: absolute;
  inset: 0;
  background-image: url('../assets/Texturelabs_Paper_269XL.jpg');
  background-size: cover;
  opacity: 0.05;
  mix-blend-mode: screen;
}

@keyframes poster-float {
  0%, 100% { transform: translateY(0) rotate(var(--pr, 0deg)); }
  50% { transform: translateY(-8px) rotate(var(--pr, 0deg)); }
}

/* ============================================================================
   SAFE AREAS — notched phones
   ============================================================================ */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(70px + env(safe-area-inset-bottom, 0px));
}

.container {
  padding-left: max(var(--space-md), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-md), env(safe-area-inset-right, 0px));
}

/* ============================================================================
   FESTIVAL GUIDE — section heads, programme grid, filter chips
   ============================================================================ */
.section-head { text-align: center; margin: 8px 0 16px; }

.section-head__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: var(--punk-red);
  text-transform: uppercase;
}

.section-head__title {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--punk-white);
  margin: 4px 0 0;
}

/* ---- programme filter chips: festival sticker tabs ---- */
.prog-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 16px 0 20px;
}

.prog-chip {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.5px;
  padding: 10px 14px;
  background: var(--punk-black);
  color: var(--punk-white);
  border: 2px solid var(--punk-red);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  min-height: 44px;
}

.prog-chip:nth-child(odd) { transform: rotate(-0.8deg); }
.prog-chip:nth-child(even) { transform: rotate(0.7deg); }

.prog-chip__count {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  background: var(--punk-red);
  color: var(--punk-white);
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.prog-chip.active {
  background: var(--punk-red);
  color: var(--punk-white);
}

.prog-chip.active .prog-chip__count {
  background: var(--punk-white);
  color: var(--punk-red);
}

.prog-chip:active { transform: translate(1px, 1px); }

@media (max-width: 430px) {
  .prog-filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .prog-chip { flex: 0 0 auto; }
}

/* ---- month groups + programme grid ---- */
.prog-month__label {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--punk-green);
  text-transform: uppercase;
  margin: 18px 0 12px;
  border-bottom: 2px solid var(--punk-green);
  padding-bottom: 6px;
}

.prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}

@media (max-width: 767px) {
  /* Two posters per row on phones where viable; the punk-card's own
     padding means auto-fill alone collapses to one column too early. */
  .prog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .prog-card__title { font-size: 13px; }
  .prog-card__art-date { font-size: 24px; }
}

@media (min-width: 768px) {
  .prog-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 359px) {
  .prog-grid { grid-template-columns: 1fr; }
  .prog-card__title { font-size: 15px; }
  .prog-card__art-date { font-size: 30px; }
}

/* ---- programme card: poster panel is the focal point ---- */
.prog-card {
  background: var(--punk-black);
  border: 3px solid var(--punk-red);
  box-shadow: var(--shadow-hard-sm);
  overflow: hidden;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.prog-card--workshop { border-color: var(--punk-green); }
.prog-card--experience { border-color: var(--punk-red); }

.prog-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}

.prog-card__art {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  display: block;
}

.prog-card__art--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: repeating-linear-gradient(-45deg, #14141F 0 14px, #191927 14px 28px);
  border-bottom: 3px solid var(--punk-black);
}

.prog-card--production .prog-card__art--placeholder { background: repeating-linear-gradient(-45deg, #2A1218 0 14px, #33161E 14px 28px); }
.prog-card--workshop .prog-card__art--placeholder { background: repeating-linear-gradient(-45deg, #10241C 0 14px, #122A20 14px 28px); }

.prog-card__art-date {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--punk-white);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
}

.prog-card__art-chip {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--punk-black);
  background: var(--punk-white);
  padding: 3px 10px;
  transform: rotate(-3deg);
}

.prog-card__body { padding: 10px 12px 12px; }

.prog-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--punk-white);
  line-height: 1.2;
  min-height: 2.4em;
}

.prog-card__secondary {
  font-family: var(--font-hand);
  font-size: 12px;
  color: var(--punk-red);
  margin-top: 2px;
}

.prog-card--workshop .prog-card__secondary { color: var(--punk-green); }

.prog-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.prog-card__date {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  color: var(--punk-white);
}

.prog-card__cat {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================================
   ROOTLING — the festival pet card on the Event Unlock page
   ============================================================================ */
.pet-card {
  background: var(--punk-black);
  border: 3px solid var(--punk-green);
  box-shadow: 6px 6px 0px var(--punk-green-dark);
  padding: var(--space-md);
}

.pet-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.pet-card__name {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--punk-white);
  background: transparent;
  border: none;
  border-bottom: 2px dashed var(--punk-green);
  padding: 2px 4px;
  width: 100%;
  max-width: 220px;
  cursor: text;
}

.pet-card__name:focus {
  outline: none;
  border-bottom: 2px solid var(--punk-green);
  background: rgba(16, 185, 129, 0.08);
}

.pet-card__species {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--punk-green);
  margin-top: 4px;
}

.pet-card__bond {
  font-size: 18px;
  color: var(--punk-red);
  letter-spacing: 2px;
  flex-shrink: 0;
  line-height: 1.2;
}

.pet-card__art {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.pet-card__art svg {
  width: min(240px, 80vw);
  height: auto;
}

.pet-card__caption {
  font-size: 13px !important;
  color: var(--punk-white) !important;
  text-align: center;
}

.pet-card__traits {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.pet-trait {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--punk-black);
  color: var(--punk-green);
  border: 2px solid var(--punk-green);
  padding: 4px 10px;
}

.pet-trait--line {
  font-family: var(--font-hand);
  text-transform: none;
  letter-spacing: 0;
  color: var(--punk-white);
  border-style: dashed;
}

.pet-card__mood {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-align: center;
  margin: 4px 0 0 !important;
}

/* ============================================================================
   LEVEL-JOURNEY TIMELINE (Home) — a festival path, not a corporate bar
   ============================================================================ */
.timeline {
  margin: 18px 0;
  padding: 16px;
  text-align: left;
}

.timeline__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.timeline__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--punk-cream);
  opacity: 0.85;
}

.timeline__level {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--punk-white);
  margin-top: 2px;
}

.timeline__growth {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--punk-cream);
  opacity: 0.85;
  margin-top: 4px;
}

.timeline__xp {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.timeline__xp-num {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--punk-white);
  line-height: 1;
}

.timeline__xp-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-align: right;
  color: var(--punk-cream);
}

/* the scrolling path */
.tl-track {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tl-road {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  height: 6px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  min-width: 100%;
}

.tl-road__fill {
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--punk-cream) 0 10px, #ffffff33 10px 14px);
  border-radius: 3px;
}

.tl-stops {
  display: flex;
  min-width: 100%;
  position: relative;
}

.tl-stop {
  flex: 1 0 auto;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px;
}

.tl-node {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--punk-black);
  border: 3px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tl-stop--done .tl-node {
  background: var(--punk-green);
  border-color: var(--punk-black);
}

.tl-stop--current .tl-node {
  width: 52px;
  height: 52px;
  margin-top: -6px;
  background: var(--punk-cream);
  border: 4px solid var(--punk-red);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.35), 4px 4px 0 rgba(0, 0, 0, 0.4);
}

.tl-check {
  color: var(--punk-black);
  font-weight: 900;
  font-size: 18px;
}

.tl-pet {
  width: 42px;
  height: 42px;
  margin: -4px 0 0 -2px;
}

.tl-pet svg {
  width: 100%;
  height: 100%;
}

.tl-pet-egg {
  font-size: 24px;
  line-height: 1;
}

.tl-name {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--punk-white);
  line-height: 1.25;
}

.tl-stop--future .tl-name {
  color: rgba(255, 255, 255, 0.55);
}

.tl-exp {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--punk-cream);
  opacity: 0.8;
  margin-top: 3px;
}

.tl-stop--future .tl-exp {
  opacity: 0.5;
}

.timeline__next {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--punk-white);
  text-align: center;
  margin: 10px 0 12px;
}

.timeline__cta {
  display: block;
  margin: 0 auto;
}

/* account banner on Home */
.hero-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 14px 0 4px;
  text-align: left;
  border: 3px dashed var(--punk-green);
  background: rgba(16, 185, 129, 0.08);
}

.hero-account__text {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--punk-white);
  flex: 1;
  line-height: 1.45;
}

.hero-account__btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 10px 14px;
}

/* ============================================================================
   AUTH SCREEN — festival profile
   ============================================================================ */
.auth-card {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
}

.auth-card__title {
  font-size: 34px;
  line-height: 1.05;
}

.auth-card__sub {
  font-size: 13px;
  color: var(--punk-white);
  margin: 10px 0 16px;
}

.auth-migrate {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  background: rgba(16, 185, 129, 0.12);
  border: 2px dashed var(--punk-green);
  padding: 12px;
  margin-bottom: 16px;
}

.auth-migrate__icon {
  font-size: 22px;
}

.auth-migrate__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  color: var(--punk-white);
}

.auth-migrate__sub {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
  line-height: 1.4;
}

.auth-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}

.auth-tab {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 16px;
  background: var(--punk-black);
  color: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

.auth-tab.active {
  background: var(--punk-red);
  color: var(--punk-white);
  border-color: var(--punk-black);
  box-shadow: 3px 3px 0 var(--punk-black);
}

.auth-label {
  display: block;
  text-align: left;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--punk-red);
  margin: 14px 0 6px;
  text-transform: uppercase;
}

.auth-input {
  width: 100%;
}

.pin-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 4px 0;
}

.pin-dot {
  width: 52px;
  height: 60px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 28px;
  background: var(--punk-black);
  color: var(--punk-white);
  border: 3px solid var(--punk-red);
  border-radius: 8px;
  caret-color: var(--punk-red);
}

.pin-dot:focus {
  outline: 3px solid var(--punk-green);
  outline-offset: 1px;
  border-color: var(--punk-green);
}

.auth-pin-hint {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  margin: 6px 0 14px;
}

.auth-submit {
  width: 100%;
  font-size: 16px;
  padding: 14px;
}

.auth-message {
  font-family: var(--font-body);
  font-size: 12px;
  min-height: 18px;
  margin: 10px 0 0;
  color: var(--punk-red);
}

.auth-message--warn { color: var(--punk-cream); }
.auth-message--ok { color: var(--punk-green); }

.auth-skip {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  font-family: var(--font-hand);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  cursor: pointer;
}

.auth-skip:hover { color: var(--punk-white); }

/* ============================================================================
   EGG CHOICE
   ============================================================================ */
.egg-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.egg-card__title {
  font-size: 36px;
  line-height: 1.05;
}

.egg-card__title2 {
  font-size: 28px;
  margin: 8px 0;
}

.egg-card__sub {
  font-size: 13px;
  margin: 8px 0 18px;
}

.egg-card__note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 16px;
}

.egg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 560px) {
  .egg-grid { grid-template-columns: repeat(4, 1fr); }
}

.egg-option {
  background: var(--punk-black);
  border: 3px solid var(--punk-green);
  padding: 10px 8px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 160ms var(--transition-punk), box-shadow 160ms var(--transition-punk), border-color 160ms;
}

.egg-option:hover,
.egg-option:focus-visible {
  transform: translateY(-4px) rotate(-1deg);
  border-color: var(--punk-red);
  box-shadow: 5px 8px 0 rgba(239, 68, 68, 0.4);
}

.egg-option__name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--punk-cream);
  margin-bottom: 4px;
}

.egg-option__art svg {
  width: min(130px, 26vw);
  height: auto;
  animation: egg-bob 4s ease-in-out infinite;
}

.egg-option:nth-child(2n) .egg-option__art svg { animation-delay: 0.7s; }
.egg-option:nth-child(3n) .egg-option__art svg { animation-delay: 1.3s; }

@keyframes egg-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-6px) rotate(1.5deg); }
}

.egg-option__hint {
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 6px;
  min-height: 40px;
}

.egg-naming {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 12px 0;
}

@media (min-width: 620px) {
  .egg-naming { flex-direction: row; text-align: left; }
}

.egg-naming__art svg {
  width: min(180px, 40vw);
  height: auto;
}

.egg-naming__form { flex: 1; width: 100%; }

.egg-naming__variant {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  margin: 8px 0 14px;
}

.egg-naming__go { width: 100%; }

/* ============================================================================
   GROWTH PAGE
   ============================================================================ */
.growth-title {
  text-align: center;
  font-size: 40px;
  letter-spacing: 4px;
}

.guide-drop {
  border: 3px solid var(--punk-red);
  background: var(--punk-black);
  margin: 14px 0;
}

.guide-drop__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--punk-cream);
}

.guide-drop__chevron {
  transition: transform 250ms var(--transition-punk);
  color: var(--punk-red);
  font-size: 18px;
}

.guide-drop__head[aria-expanded="true"] .guide-drop__chevron {
  transform: rotate(180deg);
}

.guide-drop__body {
  padding: 4px 14px 14px;
  overflow: hidden;
}

.guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guide-steps li {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--punk-white);
  line-height: 1.45;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.guide-steps__num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--punk-red);
  color: var(--punk-white);
  font-family: var(--font-display);
  font-size: 13px;
  border-radius: 50%;
}

.guide-steps__close {
  font-family: var(--font-hand);
  font-size: 13px;
  color: var(--punk-cream);
  text-align: center;
  margin: 12px 0 0;
}

/* pet showcase stage */
.pet-stage {
  position: relative;
  border: 3px solid var(--punk-green);
  background: var(--punk-black);
  margin: 14px 0;
  overflow: hidden;
}

.pet-stage__env {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pet-stage__env svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-stage__art {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 12px 0 6px;
}

.pet-stage__art svg {
  width: min(230px, 70vw);
  height: auto;
  filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.45));
}

.pet-stage__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--punk-red);
  color: var(--punk-white);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1.5px;
  padding: 6px 12px;
  border: 2px solid var(--punk-black);
  box-shadow: var(--shadow-hard-sm);
  transform: rotate(3deg);
}

.growth-pet-head {
  margin: 10px 0;
  /* phones: the rank block wraps below the name instead of squeezing it */
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: flex-start;
}

.growth-pet-head .pet-card__id {
  min-width: 0;
  flex: 1 1 55%;
}

.growth-rank {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
}

.growth-rank__title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--punk-red);
  letter-spacing: 1px;
}

.growth-rank__xp {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.growth-next {
  text-align: center;
  padding: 12px;
  margin: 14px 0;
}

.growth-next__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.75);
}

.growth-next__main {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--punk-white);
  margin: 6px 0;
}

.growth-next__arrow { color: var(--punk-cream); }

.growth-next__how {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
}

.growth-code__label {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--punk-red);
}

.growth-code__sub {
  font-size: 12px;
  margin: 6px 0 10px;
}

.growth-code__row {
  display: flex;
  gap: 8px;
}

.growth-code__btn { flex-shrink: 0; }

.growth-code__msg {
  font-size: 12px;
  margin: 10px 0 0;
  text-align: center;
  min-height: 16px;
}

.growth-code__msg--ok { color: var(--punk-green); font-weight: 700; }
.growth-code__msg--warn { color: var(--punk-cream); }

.growth-share {
  text-align: center;
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.growth-share__tag {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin: 2px 0 0;
}

.growth-section { margin-top: 22px; }

/* accessory collection */
.acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.acc-card {
  position: relative;
  background: var(--punk-black);
  border: 2px solid rgba(255, 255, 255, 0.22);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
  min-height: 92px;
  justify-content: center;
}

.acc-card--owned {
  border-color: var(--punk-green);
  cursor: pointer;
  transition: transform 140ms var(--transition-punk);
}

.acc-card--owned:hover,
.acc-card--owned:focus-visible {
  transform: translateY(-3px) rotate(-1.5deg);
}

.acc-card--equipped {
  border-color: var(--punk-red);
  background: rgba(239, 68, 68, 0.12);
}

.acc-card__icon { font-size: 26px; }

.acc-card--owned[disabled] .acc-card__icon { filter: none; }
.acc-card:not(.acc-card--owned) .acc-card__icon { opacity: 0.4; }

.acc-card__name {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--punk-white);
  text-align: center;
  line-height: 1.25;
}

.acc-card:not(.acc-card--owned) .acc-card__name { color: rgba(255, 255, 255, 0.45); }

.acc-card__cat {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--punk-green);
}

.acc-card__on {
  position: absolute;
  top: -8px;
  right: -6px;
  background: var(--punk-red);
  color: var(--punk-white);
  font-size: 11px;
  font-weight: 900;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--punk-black);
}

.growth-equip {
  padding: 12px 14px;
}

.growth-equip__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--punk-red);
  margin-bottom: 10px;
}

.equip-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
}

.equip-row__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--punk-white);
}

.equip-row__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.equip-row__none {
  font-family: var(--font-hand);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.equip-chip {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  background: var(--punk-black);
  color: var(--punk-white);
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.equip-chip.active {
  background: var(--punk-green);
  border-color: var(--punk-black);
  box-shadow: 2px 2px 0 var(--punk-black);
}

/* ============================================================================
   LEVEL-UP OVERLAY
   ============================================================================ */
.levelup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 20, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3500;
  padding: 20px;
  overflow-y: auto;
}

.levelup-card {
  max-width: 360px;
  width: 100%;
  text-align: center;
  position: relative;
  animation: levelup-in 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes levelup-in {
  from { transform: scale(0.7) rotate(-3deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.levelup-burst {
  position: absolute;
  top: -18px;
  right: -14px;
  font-size: 34px;
  color: var(--punk-cream);
  animation: spin-slow 6s linear infinite;
}

@keyframes spin-slow { to { transform: rotate(360deg); } }

.levelup-title {
  font-family: var(--font-display);
  font-size: 42px;
  letter-spacing: 3px;
  color: var(--punk-white);
  text-shadow: 3px 3px 0 var(--punk-black);
}

.levelup-levels {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--punk-cream);
  margin: 6px 0;
}

.levelup-arrow { color: var(--punk-cream); }

.levelup-stage {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--punk-white);
  margin-bottom: 10px;
}

.levelup-pet {
  position: relative;
  width: 220px;
  height: 200px;
  margin: 0 auto;
}

.levelup-pet--grow { animation: pet-grow 900ms cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes pet-grow {
  0% { transform: scale(0.6); opacity: 0.4; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

.levelup-env {
  position: absolute;
  inset: 0;
}

.levelup-env svg {
  width: 100%;
  height: 100%;
}

.levelup-pet > svg:not(.levelup-env svg) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  height: auto;
  transform: translate(-50%, -54%);
  filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.5));
}

.levelup-caption {
  font-family: var(--font-hand);
  font-size: 12px;
  color: var(--punk-white);
  margin: 10px 0;
  line-height: 1.4;
}

.levelup-acc__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: var(--punk-cream);
}

.levelup-acc__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}

.levelup-acc__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  background: var(--punk-black);
  border: 2px solid var(--punk-cream);
  padding: 6px 12px;
  margin: 0 auto;
}

.levelup-acc__icon { font-size: 18px; }

.levelup-acc__name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--punk-white);
}

.levelup-acc__line {
  font-family: var(--font-hand);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin: 8px 0;
}

.levelup-cta { margin-top: 12px; }

/* fresh-accessory ping on the pet */
[data-fresh="1"] { animation: acc-ping 1.6s ease-in-out 2; }

@keyframes acc-ping {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 6px #F2E6D8) brightness(1.4); }
}

/* ============================================================================
   FAME — leaderboard
   ============================================================================ */
.fame-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin: 18px 0;
}

.fame-pod {
  background: var(--punk-black);
  border: 3px solid var(--punk-red);
  padding: 12px 8px 10px;
  text-align: center;
  position: relative;
  flex: 1;
  max-width: 150px;
}

.fame-pod--1 {
  border-color: var(--punk-cream);
  padding-top: 18px;
  box-shadow: 5px 5px 0 rgba(242, 230, 216, 0.35);
  order: 2;
}

.fame-pod--2 { order: 1; }
.fame-pod--3 { order: 3; }

.fame-pod__medal {
  font-size: 22px;
  color: var(--punk-red);
}

.fame-pod--1 .fame-pod__medal {
  color: var(--punk-cream);
  font-size: 28px;
}

.fame-pod__pet {
  display: block;
  width: 56px;
  height: 56px;
  margin: 4px auto;
}

.fame-pod__pet svg { width: 100%; height: 100%; }

.fame-pod--1 .fame-pod__pet { width: 72px; height: 72px; }

.fame-pod__name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  color: var(--punk-white);
  word-break: break-word;
}

.fame-pod__xp {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--punk-cream);
  margin-top: 2px;
}

.fame-pod__petline {
  font-family: var(--font-body);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.65);
  margin: 2px 0 6px;
}

.fame-pod__rank {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--punk-red);
}

.fame-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
}

.fame-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--punk-black);
  border: 2px solid rgba(255, 255, 255, 0.16);
  padding: 8px 10px;
}

.fame-row--you {
  border-color: var(--punk-green);
  background: rgba(16, 185, 129, 0.14);
}

.fame-rank {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--punk-red);
  min-width: 38px;
}

.fame-row__pet {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.fame-row__pet svg { width: 100%; height: 100%; }

.fame-egg { font-size: 20px; }

.fame-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: var(--punk-white);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fame-you-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
  background: var(--punk-green);
  color: var(--punk-black);
  padding: 2px 5px;
  vertical-align: middle;
}

.fame-petname {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  display: none;
}

@media (min-width: 420px) {
  .fame-petname { display: block; max-width: 120px; }
}

.fame-xp {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--punk-cream);
  flex-shrink: 0;
}

.fame-you { margin-top: 16px; }

.fame-you__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--punk-green);
  text-align: center;
  margin-bottom: 6px;
}

/* ============================================================================
   PROGRAMME ICON COVERS
   ============================================================================ */
.prog-card__art--icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
}

.prog-icon {
  width: 74px;
  height: 74px;
}

.prog-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.prog-card__art--icon .prog-card__art-chip {
  position: absolute;
  bottom: 6px;
  right: 6px;
}

/* ============================================================================
   PROFILE MENU (top nav)
   ============================================================================ */
.top-nav-profile {
  display: flex;
  align-items: center;
}

.profile-menu { position: relative; }

.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--punk-black);
  border: 2px solid var(--punk-green);
  color: var(--punk-cream);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 7px 10px;
  cursor: pointer;
  max-width: 140px;
}

.profile-chip__name {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-chip--login {
  border-color: var(--punk-red);
  color: var(--punk-white);
}

.profile-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--punk-green);
  flex-shrink: 0;
}

.profile-chip__caret { font-size: 10px; }

.profile-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 230px;
  background: var(--punk-black);
  border: 3px solid var(--punk-red);
  box-shadow: var(--shadow-red);
  padding: 10px;
  z-index: 1200;
}

.profile-drop__head {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
  padding-bottom: 8px;
  margin-bottom: 6px;
}

.profile-drop__name {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--punk-white);
  word-break: break-word;
}

.profile-drop__growth {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  color: var(--punk-green);
  margin-top: 2px;
}

.profile-drop__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--punk-white);
  padding: 9px 8px;
  cursor: pointer;
}

.profile-drop__item:hover { background: rgba(239, 68, 68, 0.18); }

.profile-drop__item--danger { color: var(--punk-red); }

.profile-drop__pin {
  border-top: 1px dashed rgba(255, 255, 255, 0.25);
  margin-top: 6px;
  padding-top: 8px;
}

.profile-drop__sync {
  border-top: 1px dashed rgba(255, 255, 255, 0.25);
  margin-top: 8px;
  padding-top: 8px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================================
   RESPONSIVE — new components
   ============================================================================ */
@media (max-width: 430px) {
  .timeline__level { font-size: 20px; }
  .tl-stop { width: 88px; }
  .pin-row { gap: 8px; }
  .pin-dot { width: 48px; height: 56px; font-size: 24px; }
  .growth-code__row { flex-direction: column; }
  .growth-code__btn { width: 100%; }
  .fame-pod { max-width: none; }
  .profile-chip { max-width: 104px; }
  .profile-chip__name { max-width: 60px; }
}

@media (max-width: 340px) {
  .egg-grid { grid-template-columns: repeat(2, 1fr); }
  .acc-grid { grid-template-columns: repeat(2, 1fr); }
  .tl-stop { width: 80px; }
}

/* ============================================================================
   REDUCED MOTION — new components
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .egg-option__art svg,
  .levelup-burst,
  .levelup-card,
  .levelup-pet--grow,
  [data-fresh="1"],
  .tl-road__fill { animation: none !important; transition: none !important; }
  .egg-option:hover,
  .egg-option:focus-visible { transform: none; }
}

/* ============================================================================
   FIXED-TOP-NAV CLEARANCE — the 60px top nav (brand · profile · reset ·
   sound) used to overlap the first card of every screen (e.g. the egg
   screen's "Every Story Grows Differently" badge was partially hidden).
   Content now starts clear of the nav, notch-safe on phones.
   ============================================================================ */
.top-nav {
  padding-top: env(safe-area-inset-top, 0px);
  height: auto;
  min-height: 60px;
}

.container {
  padding-top: calc(76px + env(safe-area-inset-top, 0px));
}

/* ============================================================================
   HOME FOOTNOTE — "best in a real browser" nudge (upgraded when an in-app
   webview is detected, where downloads/share-sheet often break)
   ============================================================================ */
.home-browser-note {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  max-width: 36ch;
  margin: 18px auto 0;
}

.home-browser-note b {
  color: var(--punk-cream);
}

.home-browser-note--inapp {
  color: var(--punk-cream);
  border: 2px dashed var(--punk-green);
  padding: 10px 12px;
  font-size: 12px;
}

/* ============================================================================
   PHONE POLISH — narrow-screen type tightening
   ============================================================================ */
@media (max-width: 400px) {
  .game-title {
    font-size: 16px;
    letter-spacing: 2px;
  }
}

/* ============================================================================
   FEST THEMES — the whole app follows the countdown's key event
   ============================================================================
   html[data-fest-theme] is set by src/utils/festTheme.js from the same
   clock the home countdown rolls on. Each block remaps the core palette
   tokens, so every token-driven surface (hero, cards, buttons, nav,
   banners, stars) morphs with the festival's current chapter. Filled
   accent slots use text-safe shades (white text stays legible); the
   brighter "brand" hues live in the countdown skins, which paint their
   own literals. Quiz right/wrong feedback is pinned below so its meaning
   never drifts with a theme. 'base' (Launch Day + post-festival) needs
   no block — the :root values ARE the base look.
   ============================================================================ */

/* -- MATCHA RAVE × VR ART — deep matcha night, lime accents ------------- */
html[data-fest-theme='matcha'] {
  --punk-black: #0C2018;
  --punk-green: #65A30D;      /* lime-600 — white text stays readable */
  --punk-green-dark: #4D7C0F; /* lime-700, hover deepens */
  --punk-cream: #ECFCCB;
  --border-green: 3px solid #65A30D;
  --bg-body: linear-gradient(160deg, #081510 0%, #0C2018 55%, #103024 100%);
  --star-green: #A3E635;
}

/* -- SITIZENS TAKE THE STAGE — curtain plum, antique gold, red stays ---- */
html[data-fest-theme='stage'] {
  --punk-black: #241726;
  --punk-green: #B45309;      /* amber-700 — marquee gold fill */
  --punk-green-dark: #92400E; /* amber-800, hover deepens */
  --punk-cream: #FEF3C7;
  --border-green: 3px solid #B45309;
  --bg-body: linear-gradient(160deg, #170E18 0%, #241726 55%, #2E1C30 100%);
  --star-green: #FBBF24;
}

/* -- MID-AUTUMN FESTIVAL — indigo night, lantern amber, marigold cream -- */
html[data-fest-theme='midautumn'] {
  --punk-black: #1E1B4B;
  --punk-green: #D97706;      /* amber-600 — lantern glow fill */
  --punk-green-dark: #B45309; /* amber-700, hover deepens */
  --punk-cream: #FDE68A;
  --border-green: 3px solid #D97706;
  --bg-body: linear-gradient(160deg, #14122E 0%, #1E1B4B 55%, #28245C 100%);
  --star-green: #F59E0B;
}

/* -- TAKE 5! CARNIVAL — violet fairground night, marigold cream, RGB pop - */
html[data-fest-theme='takefive'] {
  --punk-black: #201827;
  --punk-green: #10B981;      /* carnival green stays green */
  --punk-green-dark: #059669;
  --punk-cream: #FDE68A;      /* marigold — chips and badges go carnival */
  --border-green: 3px solid #10B981;
  --bg-body: linear-gradient(160deg, #120D17 0%, #201827 55%, #2A2033 100%);
  --star-green: #FBBF24;
}

/* -- SITIZEN DAY FINALE — near-black, all gold, celebration ------------- */
html[data-fest-theme='finale'] {
  --punk-black: #0D0D14;
  --punk-green: #B45309;      /* gold fill */
  --punk-green-dark: #92400E;
  --punk-cream: #FDE68A;
  --border-green: 3px solid #B45309;
  --bg-body: linear-gradient(160deg, #08080C 0%, #0D0D14 55%, #15151F 100%);
  --star-green: #FBBF24;
}

/* ---- per-theme signature touches ------------------------------------------ */

/* Hero stars pick up each chapter's colours (decorative only). */
html[data-fest-theme='matcha'] .punk-star--1,
html[data-fest-theme='matcha'] .punk-star--4 { color: #A3E635; }

html[data-fest-theme='stage'] .punk-star--1,
html[data-fest-theme='stage'] .punk-star--2,
html[data-fest-theme='stage'] .punk-star--4 { color: #FBBF24; }
html[data-fest-theme='stage'] .punk-star--5 { color: #FBBF24; }

html[data-fest-theme='midautumn'] .punk-star--1,
html[data-fest-theme='midautumn'] .punk-star--4 { color: #F59E0B; }
html[data-fest-theme='midautumn'] .punk-star--2 { color: #818CF8; }

html[data-fest-theme='takefive'] .punk-star--1 { color: #EF4444; }
html[data-fest-theme='takefive'] .punk-star--2 { color: #FBBF24; }
html[data-fest-theme='takefive'] .punk-star--4 { color: #10B981; }

html[data-fest-theme='finale'] .punk-star--1,
html[data-fest-theme='finale'] .punk-star--2,
html[data-fest-theme='finale'] .punk-star--4,
html[data-fest-theme='finale'] .punk-star--5 { color: #FBBF24; }

/* The live banner carries the week's accent (fill shades keep text safe). */
html[data-fest-theme='matcha'] .live-banner { background: #65A30D; }
html[data-fest-theme='stage'] .live-banner,
html[data-fest-theme='midautumn'] .live-banner,
html[data-fest-theme='finale'] .live-banner { background: #B45309; }
html[data-fest-theme='takefive'] .live-banner {
  background: #FBBF24;               /* marigold marquee */
  color: #1A1A2E;                    /* black text on yellow */
}

/* Gold hero badge for the finale week. */
html[data-fest-theme='finale'] .punk-hero__badge { background: #B45309; }

/* ---- semantic lock ----------------------------------------------------------
   Hit/miss feedback means the same thing in every theme: pin it to the
   festival-wide green/red regardless of the week's accent remapping.
   -------------------------------------------------------------------------- */
html[data-fest-theme] .game-pop--hit,
html[data-fest-theme] .game-sprite--hit {
  color: #10B981;
}

html[data-fest-theme] .game-pop--miss,
html[data-fest-theme] .game-sprite--bad {
  color: #EF4444;
}

/* ---- theme veil --------------------------------------------------------------
   A brief full-screen dip when the festival changes chapter (see
   src/utils/festTheme.js) — colors swap underneath it, so nothing snaps.
   Stilled to an instant under prefers-reduced-motion by the global rule.
   -------------------------------------------------------------------------- */
.fest-theme-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--punk-black);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease;
}

.fest-theme-veil--on { opacity: 1; }

/* The Rootling reacts to a care tap — a happy little bounce (stilled under
   the global reduced-motion kill-switch like every flourish). */
.pet-stage__art--cared {
  animation: care-wiggle 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes care-wiggle {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-3deg) scale(1.06); }
  55% { transform: rotate(2.5deg) scale(1.03); }
  100% { transform: rotate(0deg) scale(1); }
}