:root {
  --l4-indigo: #1b1442;
  --l4-indigo-deep: #151033;
  --l4-violet: #4b2d6e;
  --l4-crystal: #5fb8d9;
  --l4-crystal-deep: #347f9c;
  --l4-cream: #fff0a8;
  --l4-glow: #ffe27a;
  --l4-mint: #6fd9c4;
}

body {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 226, 122, .22), transparent 32%),
    radial-gradient(circle at 82% 88%, rgba(95, 184, 217, .22), transparent 34%),
    linear-gradient(155deg, #1b1442, #151033 54%, #2a1f47);
}

#game {
  box-shadow:
    0 18px 50px rgba(8, 4, 24, .66),
    0 0 0 3px rgba(95, 184, 217, .42),
    0 0 45px rgba(255, 226, 122, .18);
}

.overlay {
  background:
    linear-gradient(rgba(255, 240, 168, .9), rgba(225, 244, 255, .9)),
    radial-gradient(circle at 50% 20%, rgba(95, 184, 217, .35), transparent 48%);
}

.overlay h1 { color: var(--l4-indigo); }
.subtitle { color: var(--l4-crystal-deep); font-weight: 700; }
.story, .story b, .prompt, .controls b, .hint { color: var(--l4-indigo); }
.prompt b { color: var(--l4-crystal-deep); }
.controls span { border-color: var(--l4-crystal); background: rgba(255, 240, 168, .9); color: #2a1f47; }

#complete-friend,
.mini { filter: drop-shadow(0 10px 18px rgba(27, 20, 66, .3)); }

.level-pill {
  position: absolute;
  top: clamp(14px, 3vh, 24px);
  left: clamp(14px, 3vh, 24px);
  padding: .45em .9em;
  border-radius: 999px;
  background: var(--l4-crystal-deep);
  color: var(--l4-cream);
  font: 800 clamp(11px, 1.8vh, 14px)/1 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 7px 16px rgba(20, 60, 80, .25);
}

.level-friend {
  height: 22vh;
  border-radius: 22%;
  filter: drop-shadow(0 13px 20px rgba(27, 20, 66, .3));
}