/* ============================================================
   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:       #ede3d3;
  --bg-surface:    #f7f0e2;
  --bg-elevated:   #e2d5bf;
  --bg-inset:      #e6dac6;
  --bg-sponsor-strip: #f7f0e2;

  /* Brand */
  --color-gold:       #b3812f;
  --color-gold-hover: #c99a45;
  --color-gold-soft:  rgba(179, 129, 47, 0.12);
  --color-orange:     #d06a20;
  --color-green:      #2a9e2e;
  --color-red:        #c03030;
  --color-blue:       #2670c0;
  --color-crimson:      #8e2f35;
  --color-crimson-soft: rgba(142, 47, 53, 0.12);

  /* Text */
  --text-primary:   #241a16;
  --text-secondary: #54443c;
  --text-muted:     #7a695f;
  --text-faint:     #9c8c80;
  --text-ghost:     #bdb0a4;

  /* Borders */
  --border-default: #d8c8a8;
  --border-subtle:  #e2d6bc;

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

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

  /* 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(179,129,47,0.1);

  /* Gradients */
  --gradient-page: linear-gradient(180deg, #f7f2e8 0%, #ece2d0 50%, #dfd3bd 100%);
  --gradient-card: linear-gradient(135deg, rgba(179,129,47,0.03) 0%, transparent 60%);
  --gradient-gold-btn: linear-gradient(135deg, #c99a45 0%, #b3812f 50%, #9c6f26 100%);
  --gradient-gold-btn-hover: linear-gradient(135deg, #d9ad58 0%, #c99a45 50%, #b3812f 100%);
  --glow-gold-ambient: 0 0 30px rgba(179,129,47,0.06);
  --glow-gold-strong: 0 0 24px rgba(179,129,47,0.18), 0 0 48px rgba(179,129,47,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: #fbf6ea;

  /* Celebration / overlay */
  --overlay-bg: rgba(243, 236, 224, 0.96);
}

/* --- Dark Theme — Movie Palace Night (velvet + marquee amber) --- */
[data-theme="dark"] {
  --bg-base:       #0d0c0d;
  --bg-surface:    #1b181a;
  --bg-elevated:   #232022;
  --bg-inset:      #131113;
  --bg-sponsor-strip: #141214;

  --color-gold:       #edc678;
  --color-gold-hover: #f5d99a;
  --color-gold-soft:  rgba(237, 198, 120, 0.14);
  --color-orange:     #e0875a;
  --color-green:      #5cd860;
  --color-red:        #e05555;
  --color-blue:       #7ab8f0;
  --color-crimson:      #9e353c;
  --color-crimson-soft: rgba(158, 53, 60, 0.16);

  --text-primary:   #f2ece2;
  --text-secondary: #cfc2b4;
  --text-muted:     #a3958a;
  --text-faint:     #6b5f57;
  --text-ghost:     #3d332f;

  --border-default: rgba(237,198,120,.30);
  --border-subtle:  rgba(237,198,120,.15);

  --color-on-gold: #1c1210;

  --tier-gold: #edc678;

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.65);
  --shadow-glow-gold: 0 0 20px rgba(237,198,120,0.18);

  --gradient-page: linear-gradient(180deg, #141213 0%, #0d0c0d 50%, #050505 100%);
  --gradient-card: linear-gradient(135deg, rgba(237,198,120,0.04) 0%, transparent 60%);
  --gradient-gold-btn: linear-gradient(135deg, #f5d99a 0%, #edc678 50%, #d9a03e 100%);
  --gradient-gold-btn-hover: linear-gradient(135deg, #fae6b8 0%, #f5d99a 50%, #edc678 100%);
  --glow-gold-ambient: 0 0 30px rgba(237,198,120,0.07);
  --glow-gold-strong: 0 0 24px rgba(237,198,120,0.22), 0 0 48px rgba(237,198,120,0.09);

  --score-pill-bg: #241619;

  --overlay-bg: rgba(7, 6, 7, 0.97);
}


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


/* --- Projector beam + palace atmosphere (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;
}
/* Velvet vignette: crimson-black shading on the viewport edges */
[data-theme="dark"] .spotlight::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 45% 90% at 0% 50%,  rgba(78,20,26,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 45% 90% at 100% 50%, rgba(78,20,26,0.16) 0%, transparent 65%);
}
/* Projector beam: angled cone from the booth (upper area, slightly off-center) */
[data-theme="dark"] .spotlight-haze {
  position: absolute;
  top: -140px; left: 50%;
  width: 1100px; height: 900px;
  transform: translateX(-50%) rotate(-4deg);
  background: conic-gradient(from 187deg at 50% 0%,
    transparent 0deg,
    rgba(237,198,120,0.055) 8deg,
    rgba(245,217,154,0.085) 13deg,
    rgba(237,198,120,0.055) 18deg,
    transparent 26deg);
  /* Fade the cone out before its bounding box ends — otherwise the beam
     terminates in a hard diagonal/horizontal edge mid-page. */
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 0%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse 65% 60% at 50% 0%, #000 25%, transparent 72%);
}
[data-theme="dark"] .spotlight-inner {
  position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  width: 650px; height: 700px;
  background: radial-gradient(ellipse 38% 52% at 50% 4%, rgba(255,244,220,0.05) 0%, rgba(237,198,120,0.025) 40%, transparent 70%);
}
/* Projector dust: motes drifting inside the beam */
[data-theme="dark"] .spotlight-dust {
  position: absolute;
  border-radius: 50%;
  background: rgba(237,198,120,0.4);
}
[data-theme="dark"] .sd1  { width: 2px; height: 2px; top: 15%; left: 45%; animation: dustFloat 8s ease-in-out infinite; }
[data-theme="dark"] .sd2  { width: 3px; height: 3px; top: 25%; left: 53%; 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: 47%; animation: dustFloat 9s ease-in-out infinite 3s; }
[data-theme="dark"] .sd4  { width: 2px; height: 2px; top: 20%; left: 42%; animation: dustFloat 10s ease-in-out infinite 2s; opacity: 0.5; }
[data-theme="dark"] .sd5  { width: 2.5px; height: 2.5px; top: 30%; left: 55%; animation: dustFloat 7s ease-in-out infinite 4s; opacity: 0.6; }
[data-theme="dark"] .sd6  { width: 1.5px; height: 1.5px; top: 40%; left: 45%; animation: dustFloat 12s ease-in-out infinite 0.5s; opacity: 0.8; }
[data-theme="dark"] .sd7  { width: 2px; height: 2px; top: 12%; left: 50%; animation: dustFloat 9.5s ease-in-out infinite 2.5s; opacity: 0.45; }
[data-theme="dark"] .sd8  { width: 3px; height: 3px; top: 45%; left: 49%; 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: 56%; animation: dustFloat 10.5s ease-in-out infinite 3.5s; opacity: 0.55; }
[data-theme="dark"] .sd10 { width: 2px; height: 2px; top: 38%; left: 43%; animation: dustFloat 11.5s ease-in-out infinite 5s; opacity: 0.4; }
[data-theme="dark"] .sd11 { width: 1px; height: 1px; top: 22%; left: 48%; animation: dustFloat 13s ease-in-out infinite 6s; opacity: 0.6; }
[data-theme="dark"] .sd12 { width: 2.5px; height: 2.5px; top: 33%; left: 52%; 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; }
}
/* Film grain: whisper of noise over the whole page */
[data-theme="dark"] body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* After the show, the house lights dim but never go dark — killing the
   spotlight entirely (the old opacity: 0) made the result screen feel dead
   next to the game screen's living backdrop. Dust keeps drifting. */
.game-over .spotlight { opacity: 0.55; transition: opacity 0.8s ease; }
}

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