:root { --l7-deep: #211b4d; --l7-violet: #5542a0; --l7-crystal: #9be7ff; --l7-gold: #ffe58a; --l7-ink: #25234a; }
body { background: radial-gradient(circle at 16% 16%, rgba(155,231,255,.3), transparent 31%), radial-gradient(circle at 84% 85%, rgba(255,229,138,.24), transparent 34%), linear-gradient(155deg, #5542a0, #211b4d 58%, #182f55); }
#game { box-shadow: 0 18px 50px rgba(15,10,45,.7), 0 0 0 3px rgba(155,231,255,.42), 0 0 50px rgba(255,229,138,.18); }
.overlay { background: linear-gradient(rgba(240,247,255,.92), rgba(224,225,255,.92)), radial-gradient(circle at 50% 20%, rgba(155,231,255,.35), transparent 48%); }
.overlay h1, .story, .story b, .prompt, .controls b, .hint { color: var(--l7-deep); }
.subtitle, .prompt b { color: #a06b32; }.controls span { border-color: var(--l7-crystal); background: rgba(240,247,255,.94); color: var(--l7-ink); }
#complete-friend, .mini { filter: drop-shadow(0 12px 20px rgba(33,27,77,.35)); }
.level-pill { position: absolute; top: clamp(14px,3vh,24px); left: clamp(14px,3vh,24px); padding: .45em .9em; border-radius: 999px; background: var(--l7-violet); color: #f0f7ff; font: 800 clamp(11px,1.8vh,14px)/1 system-ui,sans-serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 7px 16px rgba(33,27,77,.28); }
.level-friend { height: 22vh; border-radius: 22%; filter: drop-shadow(0 13px 20px rgba(33,27,77,.35)); }