/* ============================================================
   PLOT HOLE — Design Token System
   Shared by index.twig (game) and layout.twig (secondary pages)
   ============================================================ */

/* --- Light Theme (default) --- */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --bg-base:       #f5f4f0;
  --bg-surface:    #ffffff;
  --bg-elevated:   #eae8e3;
  --bg-inset:      #e8e6e0;
  --bg-sponsor-strip: #ffffff;

  /* Brand */
  --color-gold:       #c8960a;
  --color-gold-hover: #d9a61a;
  --color-gold-soft:  rgba(200, 150, 10, 0.1);
  --color-orange:     #d06a20;
  --color-green:      #2a9e2e;
  --color-red:        #c03030;
  --color-blue:       #2670c0;

  /* Text */
  --text-primary:   #1a1a24;
  --text-secondary: #555566;
  --text-muted:     #777788;
  --text-faint:     #999aaa;
  --text-ghost:     #bbbbcc;

  /* Borders */
  --border-default: #d8d6d0;
  --border-subtle:  #e8e6e0;

  /* On-brand (text on gold buttons) */
  --color-on-gold: #ffffff;

  /* Tier colors */
  --tier-bronze: #cd7f32;
  --tier-silver: #c0c0c0;
  --tier-gold:   #c8960a;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-glow-gold: 0 0 20px rgba(200,150,10,0.1);

  /* Gradients */
  --gradient-page: linear-gradient(180deg, #faf9f6 0%, #f0efe9 50%, #e6e4dd 100%);
  --gradient-card: linear-gradient(135deg, rgba(200,150,10,0.03) 0%, transparent 60%);
  --gradient-gold-btn: linear-gradient(135deg, #d4a310 0%, #c8960a 50%, #b8860a 100%);
  --gradient-gold-btn-hover: linear-gradient(135deg, #e0b020 0%, #d9a61a 50%, #c8960a 100%);
  --glow-gold-ambient: 0 0 30px rgba(200,150,10,0.06);
  --glow-gold-strong: 0 0 24px rgba(200,150,10,0.18), 0 0 48px rgba(200,150,10,0.08);

  /* Radii */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* Fonts */
  --font-logo:    'Bebas Neue', sans-serif;
  --font-display: 'Outfit', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Score pill */
  --score-pill-bg: #ffffff;

  /* Celebration / overlay */
  --overlay-bg: rgba(245, 244, 240, 0.96);
}

/* --- Dark Theme --- */
[data-theme="dark"] {
  --bg-base:       #0e0e14;
  --bg-surface:    #1a1a24;
  --bg-elevated:   #24242e;
  --bg-inset:      #141420;
  --bg-sponsor-strip: #131319;

  --color-gold:       #f0c24e;
  --color-gold-hover: #f5d06a;
  --color-gold-soft:  rgba(240, 194, 78, 0.12);
  --color-orange:     #f08a42;
  --color-green:      #5cd860;
  --color-red:        #e05555;
  --color-blue:       #5aa5f0;

  --text-primary:   #e4e4ec;
  --text-secondary: #9a9aac;
  --text-muted:     #6e6e80;
  --text-faint:     #4c4c5c;
  --text-ghost:     #3a3a4a;

  --border-default: #2c2c38;
  --border-subtle:  #1e1e28;

  --color-on-gold: #0e0e14;

  --tier-gold: #f0c24e;

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.45);
  --shadow-glow-gold: 0 0 20px rgba(240,194,78,0.15);

  --gradient-page: linear-gradient(180deg, #131318 0%, #0e0e14 50%, #060608 100%);
  --gradient-card: linear-gradient(135deg, rgba(240,194,78,0.03) 0%, transparent 60%);
  --gradient-gold-btn: linear-gradient(135deg, #f5d06a 0%, #f0c24e 50%, #daa830 100%);
  --gradient-gold-btn-hover: linear-gradient(135deg, #f8dc80 0%, #f5d06a 50%, #f0c24e 100%);
  --glow-gold-ambient: 0 0 30px rgba(240,194,78,0.06);
  --glow-gold-strong: 0 0 24px rgba(240,194,78,0.2), 0 0 48px rgba(240,194,78,0.08);

  --score-pill-bg: #1e1e2a;

  --overlay-bg: rgba(14, 14, 20, 0.96);
}


/* --- Universal Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
button, [role="button"], [onclick] { cursor: pointer; }
button:disabled { cursor: not-allowed; }

html {
  background: var(--bg-base);
  scroll-behavior: smooth;
  overscroll-behavior-x: none;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Fixed pseudo-element for gradient background — iOS Safari ignores
   background-attachment:fixed by design, so a position:fixed element
   is the only way to fill the viewport including behind safe areas. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--gradient-page);
  pointer-events: none;
}


/* --- Spotlight (desktop + dark mode only — position:fixed breaks Safari safe areas on mobile) --- */
.spotlight { display: none; }
@media (min-width: 521px) {
[data-theme="dark"] .spotlight {
  display: block;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
[data-theme="dark"] .spotlight-haze {
  position: absolute;
  top: -100px; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 800px;
  background: radial-gradient(ellipse 50% 60% at 50% 10%, rgba(240,194,78,0.08) 0%, rgba(218,168,48,0.04) 30%, rgba(240,194,78,0.02) 55%, transparent 75%);
}
[data-theme="dark"] .spotlight-inner {
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 650px;
  background: radial-gradient(ellipse 40% 50% at 50% 5%, rgba(255,248,225,0.05) 0%, rgba(240,194,78,0.025) 40%, transparent 70%);
}
[data-theme="dark"] .spotlight-dust {
  position: absolute;
  border-radius: 50%;
  background: rgba(240,194,78,0.35);
}
[data-theme="dark"] .sd1  { width: 2px; height: 2px; top: 15%; left: 42%; animation: dustFloat 8s ease-in-out infinite; }
[data-theme="dark"] .sd2  { width: 3px; height: 3px; top: 25%; left: 55%; animation: dustFloat 11s ease-in-out infinite 1.5s; opacity: 0.7; }
[data-theme="dark"] .sd3  { width: 1.5px; height: 1.5px; top: 35%; left: 48%; animation: dustFloat 9s ease-in-out infinite 3s; }
[data-theme="dark"] .sd4  { width: 2px; height: 2px; top: 20%; left: 38%; animation: dustFloat 10s ease-in-out infinite 2s; opacity: 0.5; }
[data-theme="dark"] .sd5  { width: 2.5px; height: 2.5px; top: 30%; left: 58%; animation: dustFloat 7s ease-in-out infinite 4s; opacity: 0.6; }
[data-theme="dark"] .sd6  { width: 1.5px; height: 1.5px; top: 40%; left: 44%; animation: dustFloat 12s ease-in-out infinite 0.5s; opacity: 0.8; }
[data-theme="dark"] .sd7  { width: 2px; height: 2px; top: 12%; left: 52%; animation: dustFloat 9.5s ease-in-out infinite 2.5s; opacity: 0.45; }
[data-theme="dark"] .sd8  { width: 3px; height: 3px; top: 45%; left: 50%; animation: dustFloat 8.5s ease-in-out infinite 1s; opacity: 0.35; }
[data-theme="dark"] .sd9  { width: 1.5px; height: 1.5px; top: 18%; left: 60%; animation: dustFloat 10.5s ease-in-out infinite 3.5s; opacity: 0.55; }
[data-theme="dark"] .sd10 { width: 2px; height: 2px; top: 38%; left: 40%; animation: dustFloat 11.5s ease-in-out infinite 5s; opacity: 0.4; }
[data-theme="dark"] .sd11 { width: 1px; height: 1px; top: 22%; left: 46%; animation: dustFloat 13s ease-in-out infinite 6s; opacity: 0.6; }
[data-theme="dark"] .sd12 { width: 2.5px; height: 2.5px; top: 33%; left: 53%; animation: dustFloat 7.5s ease-in-out infinite 0.8s; opacity: 0.3; }
@keyframes dustFloat {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translate(15px, -25px) scale(1.3); }
  85%  { opacity: 1; }
  100% { transform: translate(-10px, -50px) scale(0.7); opacity: 0; }
}
.game-over .spotlight { opacity: 0; transition: opacity 0.8s ease; }
.game-over .spotlight .spotlight-dust { animation-play-state: paused; }
}

/* --- Utility Classes --- */
.text-gold   { color: var(--color-gold); }
.text-orange { color: var(--color-orange); }
.text-red    { color: var(--color-red); }
.text-green  { color: var(--color-green); }
.text-blue   { color: var(--color-blue); }
.text-muted  { color: var(--text-muted); }
.text-faint  { color: var(--text-faint); }
.bg-surface  { background: var(--bg-surface); }
.bg-elevated { background: var(--bg-elevated); }


/* --- Theme Toggle --- */
.theme-btn i { font-size: 0.8rem; }


/* --- Shared CTA Button --- */
.cta { text-align: center; margin: 32px 0; }
.cta a {
  display: inline-block;
  background: var(--gradient-gold-btn);
  color: var(--color-on-gold);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-sm), var(--glow-gold-ambient);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
}
.cta a::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transition: none;
}
.cta a:hover {
  background: var(--gradient-gold-btn-hover);
  box-shadow: var(--shadow-md), var(--glow-gold-strong);
}
.cta a:hover::after {
  left: 120%;
  transition: left 0.5s ease;
}
.cta a:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-sm);
}


/* --- Icon sizing for secondary pages --- */
.cta a i                 { font-size: 1em; margin-right: 5px; }
h1 i, h2 i              { font-size: 1em; margin-right: 5px; }
.benefits i              { font-size: 0.85em; }
.nav a i                 { font-size: 1em; }
.step-num i              { font-size: 1em; }

/* --- Score color classes (used by JS) --- */
.score-high { color: var(--color-gold); }
.score-mid  { color: var(--color-orange); }
.score-low  { color: var(--color-red); }