:root {
  color-scheme: light;
  --ink: #123047;
  --muted: #557086;
  --foam: #f2fffb;
  --sky: #bde8ff;
  --sea: #1f8ca8;
  --deep: #0d4863;
  --sun: #ffd166;
  --coral: #ef6f6c;
  --ok: #2f9e73;
  --shadow: 0 22px 48px rgba(8, 52, 79, .22);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: ui-rounded, "SF Pro Rounded", "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 209, 102, .8), transparent 15rem),
    radial-gradient(circle at 82% 4%, rgba(189, 232, 255, .9), transparent 18rem),
    linear-gradient(180deg, #e8fbff 0 42%, #78cce3 42% 43%, #1f8ca8 43% 100%);
}
.topbar { padding: 1rem clamp(1rem, 4vw, 2rem); }
nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
nav a {
  color: var(--deep);
  background: rgba(255,255,255,.72);
  border: 2px solid rgba(13,72,99,.14);
  border-radius: 999px;
  padding: .55rem .9rem;
  text-decoration: none;
  font-weight: 900;
}
.shell { width: min(980px, calc(100% - 1.2rem)); margin: 0 auto 2rem; }
.hero { text-align: center; margin: .35rem auto 1rem; }
.eyebrow, .label { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
h1 { margin: .1rem 0; font-size: clamp(2.35rem, 9vw, 5.1rem); line-height: .92; text-shadow: 0 4px 0 rgba(255,255,255,.55); }
.lede { margin: .45rem auto 0; max-width: 46rem; font-size: 1.06rem; color: #294e63; }
.game-card {
  background: rgba(242,255,251,.92);
  border: 3px solid rgba(13,72,99,.16);
  border-radius: 30px;
  box-shadow: var(--shadow);
  padding: clamp(1rem, 3vw, 1.5rem);
}
.status-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: .9rem; }
.status-row > div, .briefing, .legend {
  background: rgba(255,255,255,.7);
  border: 2px solid rgba(13,72,99,.12);
  border-radius: 20px;
  padding: .8rem;
}
.status-row strong { display: block; margin-top: .15rem; font-size: 1.3rem; }
.briefing { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
h2 { margin: .12rem 0; font-size: clamp(1.25rem, 5vw, 1.75rem); }
#puzzleText { margin: 0; color: var(--muted); }
.legend { margin: .8rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem .9rem; color: #31586c; font-weight: 800; }
.legend b { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--deep); color: white; }
button {
  border: 0;
  border-radius: 16px;
  padding: .82rem 1rem;
  background: var(--deep);
  color: #fff;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 7px 0 rgba(0,0,0,.16);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
button:hover { filter: brightness(1.05); transform: translateY(-1px); }
button:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.16); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ghost, .secondary { background: #ffffff; color: var(--deep); border: 2px solid rgba(13,72,99,.16); }
.harbour-wrap {
  position: relative;
  height: clamp(320px, 56vw, 520px);
  overflow: hidden;
  border-radius: 28px;
  border: 3px solid rgba(7,61,86,.2);
  background:
    radial-gradient(circle at 20% 24%, rgba(255,255,255,.4), transparent 10rem),
    repeating-linear-gradient(165deg, rgba(255,255,255,.16) 0 12px, transparent 12px 28px),
    linear-gradient(180deg, #8edcee, #2392ad 58%, #126883);
}
#ropes { position: absolute; inset: 0; width: 100%; height: 100%; }
.rope { stroke: rgba(255,255,255,.58); stroke-width: 1.9; stroke-linecap: round; }
.rope.good { stroke: rgba(98, 255, 191, .95); filter: drop-shadow(0 0 5px rgba(98,255,191,.8)); }
.rope.bad { stroke-dasharray: 4 3; }
.rope-label {
  font: 700 4px ui-rounded, system-ui;
  fill: var(--deep);
  paint-order: stroke;
  stroke: rgba(255,255,255,.82);
  stroke-width: 1.2px;
}
.buoys { position: absolute; inset: 0; }
.buoy {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(58px, 12vw, 82px);
  min-height: clamp(58px, 12vw, 82px);
  border-radius: 28px 28px 34px 34px;
  border: 4px solid rgba(255,255,255,.8);
  background: linear-gradient(180deg, #fff 0 21%, var(--coral) 21% 56%, #fff 56% 69%, var(--sun) 69% 100%);
  color: var(--deep);
  box-shadow: 0 13px 24px rgba(0,0,0,.22), inset 0 -8px 0 rgba(0,0,0,.08);
  display: grid;
  place-items: center;
  text-align: center;
  padding: .35rem;
}
.buoy .name { font-size: .72rem; font-weight: 950; text-transform: uppercase; letter-spacing: .04em; }
.buoy .tone { font-size: 1.65rem; line-height: 1; font-weight: 1000; }
.buoy .note { font-size: .68rem; font-weight: 900; color: #345d70; }
.buoy:focus-visible { outline: 5px solid var(--sun); outline-offset: 4px; }
.buoy.solved { border-color: rgba(98,255,191,.95); }
.message { min-height: 2.2rem; text-align: center; font-weight: 900; color: var(--deep); }
.message.warn { color: #9b3d2f; }
.message.win { color: var(--ok); }
.actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 680px) {
  .status-row { grid-template-columns: 1fr; }
  .briefing { align-items: stretch; flex-direction: column; }
  .briefing button { width: 100%; }
  .harbour-wrap { height: 430px; }
}