:root { --l9-night: #201835; --l9-gold: #f6d889; --l9-rose: #cf80ad; --l9-cream: #fff4d5; }
body { background: radial-gradient(ellipse at 50% 12%, #705586 0%, transparent 52%), radial-gradient(ellipse at 80% 90%, #a07847 0%, transparent 45%), #120f24; }
#game { box-shadow: 0 18px 70px #090714, 0 0 0 3px #f6d88980, 0 0 75px #cf80ad40; }
.overlay { background: radial-gradient(ellipse at 50% 0%, #493052eb, #18152af5 75%); color: var(--l9-cream); gap: clamp(.3rem, 1.25vh, .85rem); }
.overlay h1 { color: var(--l9-gold); text-shadow: 0 0 28px #f6d88955; }
.story, .prompt, .hint { color: var(--l9-cream); }
.story { max-width: 76%; }
.story b, .prompt b, .controls b { color: var(--l9-gold); }
.subtitle { color: #edb7d5; letter-spacing: .08em; }
.controls { max-width: 94%; }
.controls span { background: #30243b; border-color: #9b7887; color: var(--l9-cream); }
.level-pill { position: absolute; top: clamp(12px, 3vh, 22px); left: clamp(12px, 3vh, 22px); padding: .55em 1em; border: 1px solid #f6d88988; border-radius: 999px; background: #241c36; color: var(--l9-gold); font: 800 clamp(10px, 1.8vh, 14px)/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.level-friend { height: 19vh; filter: drop-shadow(0 0 22px #f6d88966); }
#complete-friend, .mini { filter: drop-shadow(0 0 28px #f6d88977); }
.overlay a { color: var(--l9-gold); }
@media (prefers-reduced-motion: reduce) { .overlay, .hero-img, .blink, #complete-friend { animation: none; } }