:root {
  --l6-lagoon: #2e8fa3;
  --l6-lagoon-deep: #1f6b7e;
  --l6-coral: #f09090;
  --l6-coral-deep: #c0555f;
  --l6-sand: #f6dcae;
  --l6-pearl: #fff6ea;
  --l6-teal: #6fd0c0;
}

body {
  background:
    radial-gradient(circle at 18% 14%, rgba(111, 208, 192, .28), transparent 32%),
    radial-gradient(circle at 82% 88%, rgba(240, 144, 144, .26), transparent 34%),
    linear-gradient(155deg, #2e8fa3, #1f6b7e 54%, #3fa9a0);
}

#game {
  box-shadow:
    0 18px 50px rgba(9, 40, 48, .62),
    0 0 0 3px rgba(255, 246, 234, .42),
    0 0 45px rgba(240, 144, 144, .2);
}

.overlay {
  background:
    linear-gradient(rgba(255, 246, 234, .92), rgba(214, 240, 236, .92)),
    radial-gradient(circle at 50% 20%, rgba(111, 208, 192, .35), transparent 48%);
}

.overlay h1 { color: var(--l6-lagoon-deep); }
.subtitle { color: var(--l6-coral-deep); font-weight: 700; }
.story, .story b, .prompt, .controls b, .hint { color: var(--l6-lagoon-deep); }
.prompt b { color: var(--l6-coral-deep); }
.controls span { border-color: var(--l6-teal); background: rgba(255, 246, 234, .92); color: #256b75; }

#complete-friend,
.mini { filter: drop-shadow(0 10px 18px rgba(31, 107, 126, .3)); }

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

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