@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

/* ---------- tokens: an underwater scene drawn with thick ink outlines ---------- */
:root {
  --ink: #111;
  --paper: #fff;
  --sea-0: #5a9bf7; /* just under the surface */
  --sea-1: #2d6ae6;
  --sea-2: #2152c4;
  --sea-3: #1c46b0;
  --sea-4: #153a96;
  --sea-5: #0e2a74; /* the seabed */
  --sun: #ffd21f;
  --coral: #ff7a59;
  --pink: #f59bbe;
  --kelp: #2ec4a0;
  --sand: #f6d98a;
  --water: #b6e9ff;
  --good: var(--kelp);
  --bad: var(--coral);

  /* one typeface for the whole site; weight and size carry the hierarchy */
  --display: 'Fredoka', system-ui, sans-serif;
  --body: var(--display);
  --mono: var(--display);

  --bw: 3px;
  --border: var(--bw) solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radius: 18px;
  --radius-sm: 12px;

  --bg-top: var(--sea-0);
  --bg-bottom: var(--sea-3);
  --depth: 0; /* 0 at the surface, 1 on the seabed; the games set it as rounds go by */
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--body);
  font-weight: 500;
  color: var(--paper);
  background: var(--bg-bottom);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
body > :not(.sea) { position: relative; z-index: 1; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
[hidden] { display: none !important; }
a { color: inherit; }

/* ---------- the scene (fixed layer behind everything) ---------- */
.sea {
  --scene: 1; /* scales the line weight of the CSS-sized floor props; smaller on phones */
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(var(--bg-top), var(--bg-bottom));
}
@media (max-width: 700px) { .sea { --scene: 0.62; } }
.sea__rays {
  position: absolute;
  inset: -20% -15%;
  background: linear-gradient(104deg, transparent 12%, rgba(255, 255, 255, 0.1) 15%, transparent 22%, transparent 38%, rgba(255, 255, 255, 0.08) 42%, transparent 48%, transparent 70%, rgba(255, 255, 255, 0.09) 74%, transparent 80%);
  animation: rays 9s ease-in-out infinite alternate;
}
@keyframes rays { from { transform: translateX(-2.5%); opacity: 0.75; } to { transform: translateX(2.5%); opacity: 1; } }
.sea__snow { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the descent: darkness that thickens with depth, and the seabed that rises to meet you */
.sea__deep {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(8, 24, 80, 0.35), rgba(3, 9, 40, 0.92));
  opacity: var(--depth);
  transition: opacity 2.6s ease;
}
.sea__floor {
  position: absolute;
  inset: 0;
  transform: translateY(calc((1 - var(--depth)) * 62%));
  transition: transform 3s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.ripple { opacity: calc(0.85 * (1 - var(--depth))); transition: opacity 2.6s ease; } /* surface ripples fade as you sink */
.sea svg, .logo, .av { overflow: visible; }

.sea__bubble { position: absolute; bottom: -50px; animation: rise linear infinite; }
@keyframes rise { to { transform: translateY(-115vh); } }
.sea__pop { position: absolute; margin: -10px 0 0 -10px; animation: pop-bubble ease-out forwards; }
@keyframes pop-bubble { to { transform: translate(var(--dx, 0), -120px) scale(0.6); opacity: 0; } }

/* fish: the wrapper travels across the screen, the body bobs and faces the way it swims */
.fish { position: absolute; left: 0; width: 0; animation: swim-l linear infinite; }
.fish--r { animation-name: swim-r; }
.fish--far { opacity: 0.55; filter: saturate(0.7); }
.fish__body { display: block; height: auto; animation: bob 2.6s ease-in-out infinite alternate; }
.fish--r .fish__body { scale: -1 1; }
@keyframes swim-l { from { transform: translateX(110vw); } to { transform: translateX(-20vw); } }
@keyframes swim-r { from { transform: translateX(-20vw); } to { transform: translateX(110vw); } }
@keyframes bob { from { transform: translateY(-6px) rotate(-3deg); } to { transform: translateY(6px) rotate(3deg); } }

.jelly { position: absolute; height: auto; animation: drift 9s ease-in-out infinite alternate; transform-origin: top center; }
@keyframes drift { from { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(14px, -22px) rotate(0deg); } to { transform: translate(-10px, 8px) rotate(6deg); } }

.whale { position: absolute; top: 30%; left: 0; width: min(44vw, 640px); height: auto; animation: swim-l 110s linear infinite; animation-delay: -35s; }
/* ---- life inside the creatures (these classes live in the sprite symbols; --blink/--t vary per instance) ---- */
.blink { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; animation-delay: var(--blink, 0s); }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 94%, 97% { transform: scaleY(0.08); } }
.fish-tail { transform-box: fill-box; transform-origin: 0 50%; animation: wag 0.55s ease-in-out infinite alternate; animation-delay: var(--blink, 0s); }
@keyframes wag { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.fish-fin { transform-box: fill-box; transform-origin: 100% 0; animation: fin-flap 0.9s ease-in-out infinite alternate; animation-delay: var(--blink, 0s); }
@keyframes fin-flap { from { transform: rotate(-16deg); } to { transform: rotate(10deg); } }
.fish-dorsal { transform-box: fill-box; transform-origin: 50% 100%; animation: dorsal-wobble 1.3s ease-in-out infinite alternate; animation-delay: var(--blink, 0s); }
@keyframes dorsal-wobble { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.whale-tail { transform-box: fill-box; transform-origin: 0 50%; animation: tail-beat 2.6s ease-in-out infinite alternate; }
@keyframes tail-beat { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.jelly-bell { transform-box: fill-box; transform-origin: 50% 100%; animation: jelly-pulse 2.6s ease-in-out infinite; animation-delay: var(--t, 0s); }
@keyframes jelly-pulse { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(1.12, 0.88); } 70% { transform: scale(0.94, 1.06); } }
.jelly-tent { transform-box: fill-box; transform-origin: 50% 0; animation: jelly-sway 2.6s ease-in-out infinite; animation-delay: var(--t, 0s); }
@keyframes jelly-sway { 0%, 100% { transform: skewX(-9deg); } 50% { transform: skewX(9deg); } }
.crab-legs { transform-box: fill-box; animation: legs 0.45s ease-in-out infinite alternate; }
.crab-legs--l { transform-origin: 100% 0; }
.crab-legs--r { transform-origin: 0 0; animation-delay: -0.22s; }
@keyframes legs { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.crab-claw { --m: 1; transform-box: fill-box; animation: snap 4s ease-in-out infinite; }
.crab-claw--l { transform-origin: 100% 100%; }
.crab-claw--r { --m: -1; transform-origin: 0 100%; animation-delay: -2.1s; }
@keyframes snap { 0%, 76%, 100% { transform: rotate(0); } 82% { transform: rotate(calc(-18deg * var(--m))); } 88% { transform: rotate(calc(8deg * var(--m))); } 94% { transform: rotate(calc(-12deg * var(--m))); } }

/* soft mounds behind the floor give the seabed some depth; ripples drift in the water */
.mound { position: absolute; bottom: 10px; height: clamp(90px, 11vw, 170px); }
.mound--l { left: -6vw; width: 46vw; color: #2a5fdc; }
.mound--r { right: -8vw; width: 56vw; height: clamp(110px, 13vw, 200px); color: #7b5fb3; }
.ripple { position: absolute; height: auto; animation: ripple-drift 7s ease-in-out infinite alternate; }
@keyframes ripple-drift { from { transform: translateX(-6px); } to { transform: translateX(6px); } }

/* the floor: a sand band everything stands on */
.sea__sand { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(34px, 4vw, 52px); }
.prop { --sw: calc(0.9 * var(--scene)); position: absolute; bottom: clamp(22px, 2.6vw, 34px); height: auto; }
.prop--coral-l { left: clamp(56px, 7vw, 120px); width: clamp(80px, 9vw, 140px); color: var(--coral); transform-origin: bottom center; animation: sway 7s ease-in-out -2s infinite alternate; }
.prop--coral-r { right: clamp(120px, 14vw, 220px); width: clamp(70px, 8vw, 120px); color: var(--coral); transform-origin: bottom center; animation: sway 8s ease-in-out -5s infinite alternate; }
.prop--rock-l { --sw: calc(0.7 * var(--scene)); left: clamp(150px, 17vw, 270px); width: clamp(44px, 5vw, 76px); color: #5f6b8f; }
.prop--leafcoral { --sw: calc(0.85 * var(--scene)); left: clamp(240px, 29vw, 460px); width: clamp(60px, 6.5vw, 100px); color: #b58cff; transform-origin: bottom center; animation: sway 8s ease-in-out -3s infinite alternate; }
.prop--tube { --sw: calc(0.8 * var(--scene)); right: clamp(560px, 41vw, 700px); width: clamp(60px, 7vw, 110px); color: var(--sun); }
.prop--plant { --sw: calc(0.8 * var(--scene)); right: clamp(330px, 23vw, 420px); width: clamp(40px, 4.4vw, 70px); color: #8ee04f; transform-origin: bottom center; animation: sway 6s ease-in-out -1s infinite alternate; }
.prop--bigleaf { --sw: calc(0.8 * var(--scene)); left: clamp(120px, 11vw, 200px); width: clamp(28px, 3.2vw, 50px); color: var(--kelp); transform-origin: bottom center; animation: sway 7s ease-in-out -4s infinite alternate; }
@media (max-width: 700px) { .prop--leafcoral { left: auto; right: 40%; } }
.prop--rock-r { --sw: calc(0.6 * var(--scene)); right: clamp(60px, 9vw, 150px); width: clamp(36px, 4vw, 60px); color: #7a86aa; }
.prop--anchor { --sw: calc(0.7 * var(--scene)); left: clamp(200px, 24vw, 380px); bottom: clamp(16px, 2vw, 26px); width: clamp(40px, 4.6vw, 70px); color: #9aa3c4; transform-origin: bottom center; animation: rock 6s ease-in-out infinite alternate; }
@keyframes rock { from { transform: rotate(-16deg); } to { transform: rotate(-11deg); } }
.prop--chest { --sw: calc(0.75 * var(--scene)); right: clamp(270px, 30vw, 460px); width: clamp(54px, 6vw, 90px); }
.prop--chest > svg:first-child { display: block; width: 100%; height: auto; }
.prop__spark { position: absolute; width: 34%; top: -22%; right: -10%; animation: twinkle 2.2s ease-in-out infinite; }
.prop__spark--2 { width: 22%; top: 10%; left: -14%; right: auto; animation-delay: -1.1s; }
@keyframes twinkle { 0%, 100% { transform: scale(0.4) rotate(0deg); opacity: 0.4; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.prop--star { --sw: calc(0.55 * var(--scene)); left: clamp(300px, 36vw, 560px); bottom: clamp(18px, 2.2vw, 28px); width: clamp(28px, 3vw, 44px); color: var(--sun); animation: wiggle 9s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(14deg); } 40% { transform: rotate(26deg); } 60% { transform: rotate(10deg); } }
.prop--rock-l, .prop--rock-r { animation: none; }
.crab { --sw: calc(0.7 * var(--scene)); position: absolute; left: 46%; bottom: clamp(20px, 2.4vw, 30px); width: clamp(44px, 5vw, 74px); height: auto; color: var(--coral); animation: scuttle 14s ease-in-out infinite alternate; }
@keyframes scuttle { 0% { transform: translateX(0); } 45% { transform: translateX(14vw); } 55% { transform: translateX(14vw); } 100% { transform: translateX(-6vw); } }

.sea__weed {
  --sw: calc(0.85 * var(--scene));
  position: absolute;
  bottom: clamp(20px, 2.4vw, 30px);
  color: var(--kelp);
  width: clamp(40px, 5vw, 76px);
  height: auto;
  transform-origin: bottom center;
  animation: sway 5s ease-in-out infinite alternate;
}
.sea__weed--l { left: -8px; }
.sea__weed--l2 { --sw: calc(0.65 * var(--scene)); left: clamp(28px, 3.6vw, 56px); width: clamp(30px, 3.6vw, 54px); animation-delay: -2s; }
.sea__weed--r { right: -6px; animation-delay: -1s; }
.sea__weed--r2 { --sw: calc(0.6 * var(--scene)); right: clamp(30px, 4vw, 60px); width: clamp(26px, 3.2vw, 48px); animation-delay: -3s; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

.wave { display: block; width: 100%; height: 30px; }
.foam { display: block; width: 100%; height: 34px; }

/* ---------- logo ---------- */
.logo { display: block; width: 100%; height: auto; overflow: visible; }
/* the water inside the letters: the wave scrolls, the level breathes, bubbles rise and pop at the surface */
.logo__water { animation: logo-wave 3.4s linear infinite; }
@keyframes logo-wave { from { transform: translateX(0); } to { transform: translateX(-160px); } }
.logo__tide { animation: logo-tide 4.6s ease-in-out infinite alternate; }
@keyframes logo-tide { from { transform: translateY(3px); } to { transform: translateY(-4px); } }
.logo__inbub { animation: logo-inbub 3.6s linear infinite; animation-delay: var(--d, 0s); }
@keyframes logo-inbub { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(-38px); opacity: 0; } }

/* ---------- inline icons ---------- */
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; }
.ico--lg { width: 1.6em; height: 1.6em; vertical-align: middle; }
.streak { display: inline-flex; align-items: center; gap: 0.15em; font-family: var(--mono); font-weight: 700; }

/* ---------- player fish avatars ---------- */
.av { display: block; height: auto; transform-origin: center; }
/* player fish idle: a slow tail sway, fins flapping, the odd blink — each on its own clock via --t */
.av__tail { transform-box: fill-box; transform-origin: 0 50%; animation: av-sway 1.7s ease-in-out infinite alternate; animation-delay: var(--t, 0s); }
@keyframes av-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.av__fin { transform-box: fill-box; transform-origin: 100% 0; animation: fin-flap 1.9s ease-in-out infinite alternate; animation-delay: var(--t, 0s); }
.av__dorsal { transform-box: fill-box; transform-origin: 50% 100%; animation: dorsal-wobble 2.3s ease-in-out infinite alternate; animation-delay: var(--t, 0s); }
.av__eyes { transform-box: fill-box; transform-origin: center; animation: blink 6s infinite; animation-delay: var(--t, 0s); }
.av__eyes--closed { animation: none; }
/* asleep: eyes shut, everything else stays */
.av__sleep { display: none; }
.av.is-asleep .av__sleep { display: block; }
.av.is-asleep .av__eyes { display: none; }
.av.is-asleep .av__tail, .av.is-asleep .av__fin { animation-duration: 6s; }
/* keeled over: the face is replaced by x eyes and an o mouth */
.av__dead { display: none; }
.av.is-dead .av__dead { display: block; }
.av.is-dead .av__face > :not(.av__dead) { display: none; }
.av.is-dead .av__tail, .av.is-dead .av__fin { animation: none; }
.av__prop { transform-box: fill-box; transform-origin: center; animation: prop-spin 0.5s linear infinite; }
@keyframes prop-spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }

/* ---------- type ---------- */
/* numbers that tick or line up in columns keep a fixed width */
.pin, .secs, .clock, .counter, .streak, .rank__pos, .rank__score, .pbar__score, .result__points, .step__score, .tile__count, .roster__count, .input--pin { font-variant-numeric: tabular-nums; }
.mono-label {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.title-pill {
  display: inline-block;
  margin: 0;
  padding: 0.3em 1.2em;
  font: 600 clamp(1.3rem, 2.4vw, 1.7rem) var(--display);
  color: var(--ink);
  background: var(--paper);
  border: var(--border);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
}
.tag {
  display: inline-block;
  padding: 0.3em 0.8em;
  font: 700 0.8rem var(--mono);
  color: var(--ink);
  background: var(--sun);
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-6deg);
}
.qtag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.3em 0.85em;
  font: 700 0.8rem var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--sun);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}
.chip {
  display: inline-block;
  margin: 0;
  padding: 0.3em 0.85em;
  font: 700 0.8rem var(--mono);
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--pink);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.chip--sun { background: var(--sun); }
.chip--paper { background: var(--paper); }
.big {
  margin: 0;
  font: 700 clamp(2rem, 9vw, 3rem) var(--display);
  line-height: 1;
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--ink);
}
.lead { margin: 0; font-size: 1.05rem; font-weight: 600; max-width: 34ch; }
.light { color: var(--paper); }

/* "Powered by Intellstra": a small paper pill, so the wordmark reads on any water */
.powered {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding: 0.35em 0.9em;
  font: 500 0.8rem var(--display);
  color: #555;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
/* the wordmark is sized so its x-height matches the words, and nudged so the baselines meet:
   in the artwork the letters' baseline sits 7.3% above the bottom edge */
.powered img { height: 1.14em; width: auto; display: block; transform: translateY(7.3%); }
/* the big one at the foot of the landing page */
.powered--big { gap: 0.28em; padding: 0.55em 1.5em 0.55em 1.4em; font-size: 1.15rem; border-width: var(--bw); box-shadow: var(--shadow-sm); }

/* ---------- surfaces ---------- */
.card {
  background: var(--paper);
  color: var(--ink);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.porthole {
  position: relative;
  background: var(--paper);
  border: var(--border);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 14px;
}
.porthole::before, .porthole::after,
.porthole > .rivets::before, .porthole > .rivets::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #dfe7ff;
  border: 2.5px solid var(--ink);
  box-shadow: inset -2px -2px 0 #a9b8e8;
}
.porthole::before { left: 8px; top: 8px; }
.porthole::after { right: 8px; top: 8px; }
.porthole > .rivets::before { left: 8px; bottom: 8px; }
.porthole > .rivets::after { right: 8px; bottom: 8px; }
.porthole__glass {
  background: linear-gradient(var(--sea-1), var(--sea-2));
  border: var(--border);
  border-radius: 16px;
}

/* ---------- controls ---------- */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.7em 1.4em;
  font: 600 1rem var(--display);
  line-height: 1.1;
  color: var(--ink);
  background: var(--sun);
  border: var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm), inset 0 -4px 0 rgba(0, 0, 0, 0.14);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink), inset 0 -4px 0 rgba(0, 0, 0, 0.14); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink), inset 0 2px 0 rgba(0, 0, 0, 0.14); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }
.btn--paper { background: var(--paper); }
.btn--kelp { background: var(--kelp); }
.btn--danger { background: var(--coral); }
/* every button is the same size; --sm and --xl are kept only as names */
.btn--sm, .btn--xl { font-size: 1rem; padding: 0.7em 1.4em; border-width: var(--bw); }
.btn--block { width: 100%; }

.field { display: grid; gap: 0.4rem; }
.field > span { font-weight: 600; font-size: 0.9rem; }
.input {
  width: 100%;
  padding: 0.75em 0.9em;
  background: var(--paper);
  color: var(--ink);
  border: var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
}
.input::placeholder { color: #9aa3c4; font-weight: 500; }
.input:focus { outline: none; box-shadow: 0 0 0 4px var(--sun); }
.input--pin {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 7vw, 2rem);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 0.4em;
}
.input--name { font-family: var(--display); font-weight: 600; font-size: 1.35rem; text-align: center; }
.select {
  width: 100%;
  padding: 0.6em 0.8em;
  background: var(--paper);
  color: var(--ink);
  border: var(--border);
  border-radius: var(--radius-sm);
  font-weight: 800;
}

.error {
  margin: 0;
  padding: 0.65em 0.9em;
  background: var(--coral);
  color: var(--ink);
  border: var(--border);
  border-radius: var(--radius-sm);
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

/* ---------- timer: striped bar that drains ---------- */
.timer {
  position: relative;
  height: 20px;
  background: var(--paper);
  border: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.timer__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: repeating-linear-gradient(-45deg, var(--coral) 0 10px, #ff9a80 10px 20px);
  background-size: 28.284px 28.284px;
  border-right: var(--border);
  animation: stripes 0.8s linear infinite;
}
.timer--low .timer__fill { background-image: repeating-linear-gradient(-45deg, #ff3d5a 0 10px, #ff7a8c 10px 20px); }
@keyframes stripes { to { background-position: 28.284px 0; } }

/* ---------- answer tiles ---------- */
.shape {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  flex: none;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--ink);
}
.shape svg { width: 55%; height: 55%; fill: var(--deep); }
.tile {
  --c: var(--coral);
  --deep: #d8512f;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.9em 1em;
  min-height: 80px;
  background: var(--c);
  color: var(--ink);
  border: var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  font: 600 1.1rem var(--display);
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.2s, filter 0.2s;
}
.tile[data-i='0'] { color: var(--paper); }
.tile[data-i='1'] { --c: var(--sun); --deep: #d9a800; }
.tile[data-i='2'] { --c: var(--kelp); --deep: #178f72; }
.tile[data-i='3'] { --c: var(--paper); --deep: var(--sea-1); }
.tile[data-i='3'] .shape { background: var(--sea-1); }
.tile[data-i='3'] .shape svg { fill: var(--paper); }
button.tile:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
button.tile:active { transform: translate(3px, 3px); box-shadow: none; }
.tile.is-picked { outline: 4px solid var(--sun); outline-offset: 3px; }
.tile.is-dim { opacity: 0.4; filter: saturate(0.3); }
.tile.is-hidden { visibility: hidden; }
.tile.is-right { outline: 5px solid var(--sun); outline-offset: 4px; }
.tile__check {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  font-size: 0.85rem;
}
.tile__count { margin-left: auto; font-family: var(--mono); font-size: 1.1em; }

/* ---------- reactions floating up the host screen ---------- */
/* `body > .reaction-layer` so this outranks the body > :not(.sea) rule that lifts content above the scene */
body > .reaction-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.reaction {
  position: absolute;
  bottom: -90px;
  display: grid;
  justify-items: center;
  gap: 4px;
  animation: float-up 3.4s ease-out forwards;
}
.rx { display: block; width: 100%; height: 100%; overflow: visible; }
.reaction__bubble {
  display: grid;
  place-items: center;
  padding: 10px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 10%, rgba(255, 255, 255, 0.35) 12% 100%);
  border: 3px solid var(--ink);
  font-size: 2.4rem;
  line-height: 1;
}
.reaction small {
  font: 700 0.65rem var(--mono);
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.1em 0.5em;
  border-radius: 999px;
}
@keyframes float-up {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { opacity: 1; transform: translateY(-12vh) scale(1.1); }
  100% { transform: translateY(-85vh) scale(1); opacity: 0; }
}

/* ---------- utilities ---------- */
.stack { display: grid; gap: var(--gap, 1rem); }
.row { display: flex; gap: var(--gap, 0.75rem); align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { opacity: 0.7; }
.center { text-align: center; }
.small { font-size: 0.85rem; }

/* containers never bob; only creatures float */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pop { animation: pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }
.rise-in { animation: rise-in 0.45s cubic-bezier(0.2, 1, 0.3, 1) both; }
@keyframes rise-in { from { transform: translateY(24px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .sea__bubble, .fish, .jelly, .whale, .crab, .sea__pop { display: none; }
  .ripple { animation: none !important; }
  .float, .title-pill, .logo__water, .logo__tide, .logo__inbub, .blink, .fish-tail, .fish-fin, .fish-dorsal, .whale-tail, .jelly-bell, .jelly-tent, .crab-legs, .crab-claw, .av__tail, .av__fin, .av__dorsal, .av__eyes, .av__prop { animation: none !important; }
}

/* ---------- a pressed-in toggle button ---------- */
.btn.is-on { background: var(--sun); box-shadow: 0 0 0 var(--ink), inset 0 2px 0 rgba(0, 0, 0, 0.14); transform: translate(2px, 2px); }
.btn--paper.is-on { background: var(--sun); }

/* ---------- teams (shoals) ---------- */
.teams { display: grid; gap: 0.6rem; width: min(900px, 100%); margin: 0 auto; }
.team {
  display: grid;
  grid-template-columns: 2.4rem auto 1fr auto;
  grid-template-areas: 'pos name bar score' 'pos members members members';
  align-items: center;
  gap: 0.2rem 0.9rem;
  padding: 0.6rem 1rem;
  border-left: 14px solid var(--tc);
}
.team__pos { grid-area: pos; font: 700 1.4rem var(--display); }
.team__name { grid-area: name; font: 700 1.2rem var(--display); }
.team__bar { grid-area: bar; height: 14px; background: #eef2fb; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.team__bar i { display: block; height: 100%; background: var(--tc); transition: width 0.8s cubic-bezier(0.2, 1, 0.3, 1); }
.team__score { grid-area: score; font: 700 1.1rem var(--mono); }
.team__members { grid-area: members; font-size: 0.85rem; color: #555; }
.teams--big .team__name { font-size: 1.5rem; }
.name-chip--team { box-shadow: 2px 2px 0 var(--ink), 0 0 0 4px var(--tc, transparent); }

/* ---------- podium awards ---------- */
.awards { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; width: min(1100px, 100%); margin: 0 auto; }
.award { display: grid; gap: 0.25rem; justify-items: center; padding: 0.7rem 1.1rem; min-width: 200px; text-align: center; }
.award__title { font: 700 0.75rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sea-2); }
.award__detail { font-size: 0.85rem; color: #555; }

/* ---------- the phone's sound board and team picker ---------- */
.soundboard { width: 100%; }
.soundboard summary { list-style: none; width: 100%; cursor: pointer; }
.soundboard summary::-webkit-details-marker { display: none; }
.soundboard__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.6rem; }
.soundboard__btn {
  display: grid;
  gap: 0.1rem;
  justify-items: center;
  padding: 0.55rem 0.2rem;
  background: var(--paper);
  color: var(--ink);
  border: var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  font: 600 0.8rem var(--display);
  cursor: pointer;
}
.soundboard__btn span { font-size: 1.5rem; line-height: 1; }
.soundboard__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.soundboard__btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.teampick { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.teampick__btn {
  padding: 0.5em 1.1em;
  background: var(--paper);
  color: var(--ink);
  border: var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm), inset 0 0 0 0 var(--tc);
  font: 600 1rem var(--display);
  cursor: pointer;
  border-left: 12px solid var(--tc);
}
.teampick__btn.is-on { background: var(--tc); }
.miniboard { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 0.3rem; }
.miniboard li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.5rem; align-items: center; padding: 0.4rem 0.8rem; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 10px; font-size: 0.9rem; font-weight: 600; }
.miniboard li.is-me { background: var(--sun); }
.miniboard b { font-family: var(--mono); }
.reaction--sound .reaction__bubble { background: var(--sun); }