:root {
  --l3-dusk: #453a6e;
  --l3-dusk-deep: #2d2649;
  --l3-amber: #e09a55;
  --l3-amber-deep: #a85f2c;
  --l3-cream: #fdecd2;
  --l3-rose: #c088c8;
  --l3-glow: #ffc168;
}

body {
  background:
    radial-gradient(circle at 18% 14%, rgba(224, 154, 85, .30), transparent 32%),
    radial-gradient(circle at 82% 88%, rgba(192, 136, 200, .22), transparent 34%),
    linear-gradient(155deg, #453a6e, #2d2649 54%, #3a2a22);
}

#game {
  box-shadow:
    0 18px 50px rgba(20, 12, 40, .62),
    0 0 0 3px rgba(224, 154, 85, .4),
    0 0 45px rgba(255, 193, 104, .16);
}

.overlay {
  background:
    linear-gradient(rgba(253, 236, 210, .9), rgba(244, 224, 240, .9)),
    radial-gradient(circle at 50% 20%, rgba(224, 154, 85, .35), transparent 48%);
}

.overlay h1 { color: var(--l3-dusk); }
.subtitle { color: var(--l3-amber-deep); font-weight: 700; }
.story, .story b, .prompt, .controls b, .hint { color: var(--l3-dusk); }
.prompt b { color: var(--l3-amber-deep); }
.controls span { border-color: var(--l3-amber); background: rgba(253, 236, 210, .9); color: #4c3c4f; }

#complete-friend,
.mini { filter: drop-shadow(0 10px 18px rgba(69, 58, 110, .3)); }

.level-pill {
  position: absolute;
  top: clamp(14px, 3vh, 24px);
  left: clamp(14px, 3vh, 24px);
  padding: .45em .9em;
  border-radius: 999px;
  background: var(--l3-amber-deep);
  color: var(--l3-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(120, 70, 30, .25);
}

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