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

/* --- Light Theme (default) --- */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --bg-base:       #e8dcc8;
  --bg-surface:    #f5eede;
  --bg-elevated:   #ded2ba;
  --bg-inset:      #e0d4bd;
  --bg-sponsor-strip: #f5eede;

  /* Brand */
  --color-gold:       #a8853c;
  --color-gold-hover: #c6a75e;
  --color-gold-soft:  rgba(168, 133, 60, 0.12);
  --color-orange:     #d06a20;
  --color-green:      #2a9e2e;
  --color-red:        #c03030;
  --color-blue:       #2670c0;

  /* Text */
  --text-primary:   #1f2a44;
  --text-secondary: #44506e;
  --text-muted:     #777788;
  --text-faint:     #999aaa;
  --text-ghost:     #bbbbcc;

  /* Borders */
  --border-default: #d0c3a6;
  --border-subtle:  #dccfb4;

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

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

  /* 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%, #a8853c 50%, #b8860a 100%);
  --gradient-gold-btn-hover: linear-gradient(135deg, #e0b020 0%, #c6a75e 50%, #a8853c 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 — Luminary Oscars champagne palette --- */
[data-theme="dark"] {
  /* Backgrounds — mapped to --lum-* equivalents */
  --bg-base:       #121009;   /* --lum-bg */
  --bg-surface:    #1d1a13;   /* --lum-card */
  --bg-elevated:   #232018;
  --bg-inset:      #15120c;   /* --lum-card-dark */
  --bg-sponsor-strip: #1d1a13;

  /* Brand — champagne gold family */
  --color-gold:       #d4af6a;  /* --lum-gold-3 */
  --color-gold-hover: #f0ddae;  /* --lum-gold-2 */
  --color-gold-soft:  rgba(212, 175, 106, 0.14);
  --color-orange:     #e0875a;
  --color-green:      #5cd860;
  --color-red:        #e05555;  /* --lum-urgent */
  --color-blue:       #7ab8f0;

  /* Text */
  --text-primary:   #f3eee1;   /* --lum-on-dark */
  --text-secondary: #d4c9b4;
  --text-muted:     #a89e88;   /* --lum-muted */
  --text-faint:     #6b6358;
  --text-ghost:     #3a3628;

  /* Borders — champagne hairline */
  --border-default: rgba(231,214,170,.28);  /* --lum-hairline */
  --border-subtle:  rgba(231,214,170,.15);

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

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

  --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(212,175,106,0.18);

  --gradient-page: linear-gradient(180deg, #1a1710 0%, #121009 50%, #0a0807 100%);
  --gradient-card: linear-gradient(135deg, rgba(212,175,106,0.04) 0%, transparent 60%);
  --gradient-gold-btn: linear-gradient(135deg, #f0ddae 0%, #d4af6a 50%, #c49a4a 100%);
  --gradient-gold-btn-hover: linear-gradient(135deg, #f7e7ce 0%, #f0ddae 50%, #d4af6a 100%);
  --glow-gold-ambient: 0 0 30px rgba(212,175,106,0.07);
  --glow-gold-strong: 0 0 24px rgba(212,175,106,0.22), 0 0 48px rgba(212,175,106,0.09);

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

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


/* --- Luminary Oscars palette (game-area specific; always dark) --- */
:root {
  --lum-bg:        #121009;
  --lum-card:      #1d1a13;
  --lum-card-dark: #15120c;
  --lum-gold-1:    #f7e7ce;
  --lum-gold-2:    #f0ddae;
  --lum-gold-3:    #d4af6a;
  --lum-gold-4:    #c49a4a;
  --lum-hairline:  rgba(231,214,170,.28);
  --lum-muted:     #a89e88;
  --lum-on-dark:   #f3eee1;
  --lum-urgent:    #e05555;
}

/* --- 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(198,167,94,0.08) 0%, rgba(218,168,48,0.04) 30%, rgba(198,167,94,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(198,167,94,0.025) 40%, transparent 70%);
}
[data-theme="dark"] .spotlight-dust {
  position: absolute;
  border-radius: 50%;
  background: rgba(198,167,94,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); }