:root {
  --l2-mint: #8fcab5;
  --l2-mint-deep: #397868;
  --l2-cream: #f4f1d9;
  --l2-brown: #9a674b;
  --l2-coral: #ef9a8c;
}

body {
  background:
    radial-gradient(circle at 18% 14%, rgba(143, 202, 181, .42), transparent 32%),
    radial-gradient(circle at 82% 88%, rgba(239, 154, 140, .26), transparent 34%),
    linear-gradient(155deg, #315f53, #17372f 54%, #3e2d27);
}

#game {
  box-shadow:
    0 18px 50px rgba(5, 18, 14, .62),
    0 0 0 3px rgba(143, 202, 181, .4),
    0 0 45px rgba(239, 154, 140, .14);
}

.overlay {
  background:
    linear-gradient(rgba(244, 241, 217, .88), rgba(226, 242, 233, .88)),
    radial-gradient(circle at 50% 20%, rgba(143, 202, 181, .4), transparent 48%);
}

.overlay h1 { color: var(--l2-mint-deep); }
.subtitle { color: var(--l2-coral); font-weight: 700; }
.story, .story b, .prompt, .controls b, .hint { color: var(--l2-mint-deep); }
.prompt b { color: var(--l2-brown); }
.controls span { border-color: var(--l2-mint); background: rgba(244, 241, 217, .9); color: #3f564c; }

#complete-friend,
.mini { filter: drop-shadow(0 10px 18px rgba(57, 120, 104, .3)); }

.level-pill {
  position: absolute;
  top: clamp(14px, 3vh, 24px);
  left: clamp(14px, 3vh, 24px);
  padding: .45em .9em;
  border-radius: 999px;
  background: var(--l2-brown);
  color: var(--l2-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(112, 78, 61, .22);
}

.level-friend {
  height: 22vh;
  border-radius: 22%;
  filter: drop-shadow(0 13px 20px rgba(57, 120, 104, .28));
}