:root {
  color-scheme: dark;
  --bg: #0b101b;
  --panel: #111727;
  --edge: #304758;
  --ink: #e6e5ed;
  --muted: #929db6;
  --mint: #70d6ed;
  --gold: #ffd189;
  --red: #ffabab;
  --depth: 0;
  font-family: Pixelify, ui-monospace, monospace;
  font-size: 18px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at top, #1a3e52 0, transparent 65%), var(--bg);
  color: var(--ink);
  line-height: 1.48;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  border-radius: 0.8rem;
  border: 1px solid var(--edge);
  background: #19394b;
  color: var(--ink);
  padding: 0.78rem 1rem;
  font-weight: 730;
  min-height: 44px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
button:hover {
  border-color: var(--mint);
  background: #264c5a;
}
button:disabled {
  opacity: 0.52;
  cursor: default;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
button.primary {
  background: var(--mint);
  border-color: var(--mint);
  color: #0a2633;
}
button.primary:hover {
  background: #c8f5e5;
}
button.quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
a {
  color: var(--mint);
}
p {
  margin: 0.25rem 0 0.7rem;
}
h1,
h2,
h3 {
  margin: 0;
  line-height: 1.13;
  letter-spacing: -0.035em;
}
h1 {
  font-size: clamp(2rem, 8vw, 4rem);
}
h2 {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
}
h3 {
  font-size: 1.12rem;
}
.top {
  height: 64px;
  max-width: 740px;
  padding: 0 1rem;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  letter-spacing: 0.13em;
  font-size: 0.82rem;
}
.wordmark i {
  font-style: normal;
  color: var(--mint);
}
main {
  max-width: 740px;
  margin: auto;
  padding: 0 1rem max(1rem, env(safe-area-inset-bottom));
  display: grid;
  gap: 0.9rem;
}
.hero {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--edge);
  background: #112d43;
  position: relative;
  isolation: isolate;
}
.hero img {
  width: 100%;
  height: clamp(180px, 44vw, 330px);
  object-fit: cover;
  object-position: center 52%;
  display: block;
}
.hero-copy {
  padding: 1.25rem 1.35rem 1.35rem;
  background: linear-gradient(0deg, #122c40 80%, transparent);
  position: relative;
  margin-top: -1.45rem;
}
.kicker {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--mint);
  font-size: 0.72rem;
  margin-bottom: 0.42rem;
}
.muted {
  color: var(--muted);
}
.sub {
  max-width: 44ch;
  color: var(--muted);
  margin: 0.7rem 0 1rem;
}
.panel {
  padding: 1rem 1.1rem;
  border: 1px solid var(--edge);
  border-radius: 1.05rem;
  background: var(--panel);
}
.actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}
.actions > * {
  flex: 1 1 auto;
}
.actions .primary {
  flex-grow: 2;
}
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.mode-grid button {
  text-align: left;
  min-height: 64px;
}
.mode-grid small {
  display: block;
  color: var(--muted);
  font-weight: 500;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.8rem 0;
}
.dive-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat {
  border: 1px solid var(--edge);
  border-radius: 0.65rem;
  padding: 0.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stat strong {
  display: block;
  font-size: 1.4rem;
  color: var(--gold);
}
.stat small {
  color: var(--muted);
}
.metrics {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 730;
  font-variant-numeric: tabular-nums;
}
.bar {
  height: 7px;
  background: #0a2135;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 0.55rem;
}
.bar b {
  display: block;
  background: linear-gradient(90deg, #48bcae, var(--mint));
  height: 100%;
  border-radius: 99px;
}
.bar[data-urgent="true"] b {
  background: var(--gold);
}
.arena {
  height: clamp(94px, 26vh, 206px);
  overflow: hidden;
  position: relative;
  border-radius: 1rem;
  background: #14354d url("/reef-v2.webp") center
    calc(45% + var(--depth) * 9%) / cover;
  border: 1px solid var(--edge);
  isolation: isolate;
}
.arena:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #041125;
  opacity: calc(var(--depth) * 0.53);
}
.arena .depth {
  position: absolute;
  right: 0.7rem;
  bottom: 0.65rem;
  background: #0a2334dd;
  padding: 0.33rem 0.6rem;
  border-radius: 0.5rem;
  color: var(--mint);
  font-size: 0.8rem;
  font-weight: 800;
}
.question {
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 820;
  line-height: 1.18;
}
.scope {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.91rem;
}
.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
input,
select {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: #0c2236;
  border: 1px solid #50727b;
  border-radius: 0.65rem;
  padding: 0.68rem 0.72rem;
  min-height: 44px;
  font-size: 16px;
}
input::placeholder {
  color: #a0b6c0;
}
.feedback {
  min-height: 1.5rem;
  margin: 0.45rem 0 0;
  color: var(--gold);
  font-size: 0.91rem;
}
.summary {
  padding: 1rem 1.2rem;
  background: linear-gradient(120deg, #244956, #173347);
}
.score {
  font-size: clamp(3.2rem, 13vw, 6rem);
  font-weight: 900;
  color: var(--gold);
  line-height: 1.02;
  letter-spacing: -0.08em;
  font-variant-numeric: tabular-nums;
}
.score span {
  font-size: 0.35em;
  letter-spacing: 0;
  color: var(--muted);
}
.tiles {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.37rem;
  margin: 1rem 0;
}
.tile {
  border-radius: 0.55rem;
  border: 1px solid #527681;
  display: grid;
  place-items: center;
  min-height: 43px;
  color: #0a2334;
  font-weight: 900;
  font-size: clamp(0.7rem, 3vw, 0.95rem);
}
.tiles [data-tier] { background: var(--tile-color); }
[data-tier="0"] { --tile-color: #8298a2; }
[data-tier="10"] { --tile-color: #d0e1df; }
[data-tier="15"] { --tile-color: #f2d68b; }
[data-tier="30"] { --tile-color: #90dfb8; }
[data-tier="60"] { --tile-color: #8fcfed; }
[data-tier="85"] { --tile-color: #cfb7ff; }
[data-tier="100"] { --tile-color: #ffad76; }
.review {
  margin: 0.55rem 0;
  border: 1px solid var(--edge);
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
}
.review summary {
  cursor: pointer;
  font-weight: 700;
}
.review ul {
  padding-left: 1.3rem;
  margin: 0.6rem 0;
}
.review-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.review-controls label, .daily-feedback label, .answer-appeal label { display: grid; gap: .3rem; font-size: .84rem; }
.review-controls input, .review-controls select, .daily-feedback select, .daily-feedback textarea,
.answer-appeal :is(input, textarea) { width: 100%; min-width: 0; }
.review [data-review-list] { max-height: none; }
.answer-appeal { margin: .75rem 0 0; padding-top: .65rem; border-top: 1px solid var(--edge); }
:is(.daily-feedback, .answer-appeal) summary { font-weight: 700; cursor: pointer; }
:is(.daily-feedback, .answer-appeal) form { display: grid; gap: .65rem; }
:is(.daily-feedback, .answer-appeal) form button { justify-self: start; }
:is(.daily-feedback, .answer-appeal) [role="status"]:empty { display: none; }
.compare {
  border: 1px solid #80bcad;
  border-radius: 0.85rem;
  background: #214652;
  padding: 0.8rem;
}
.answer-list {
  max-height: 180px;
  overflow: auto;
}
.seat-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.seat {
  border: 1px solid var(--edge);
  padding: 0.55rem 0.65rem;
  border-radius: 0.75rem;
  overflow-wrap: anywhere;
}
.seat.active {
  border-color: var(--gold);
  background: #334a51;
}
.seat.out {
  opacity: 0.58;
}
.seat small {
  display: block;
  color: var(--muted);
}
.status {
  color: var(--mint);
  font-weight: 800;
}
.error {
  color: var(--red);
}
#toast {
  position: fixed;
  bottom: max(0.8rem, env(safe-area-inset-bottom));
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 2rem);
  border-radius: 0.7rem;
  background: #e3f7e8;
  color: #13323b;
  padding: 0.55rem 0.8rem;
  box-shadow: 0 4px 24px #0006;
  pointer-events: none;
}
#toast:empty {
  display: none;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.footer-note {
  color: var(--muted);
  font-size: 0.78rem;
}
.invite-field {
  display: block;
  margin: 0.6rem 0;
}
.share-copy-dialog { width: min(32rem, calc(100% - 24px)); margin: auto; color: var(--ink); }
.share-copy-dialog::backdrop { background: #081325c7; }
.share-copy-dialog textarea { width: 100%; resize: vertical; }
.share-copy-dialog form { display: flex; justify-content: flex-end; }
.compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.toggle input {
  min-height: 0;
  width: 18px;
}
@media (max-width: 540px) {
  .top {
    height: 54px;
  }
  .hero-copy {
    padding: 1rem;
  }
  .panel {
    padding: 0.8rem;
  }
  .play .arena {
    height: clamp(65px, 17dvh, 140px);
  }
  .entry button {
    padding: 0.68rem 0.58rem;
  }
  .play:focus-within .arena {
    height: 64px;
  }
  .play:focus-within {
    gap: 0.45rem;
  }
  .play:focus-within .panel {
    padding: 0.62rem;
  }
  .seat-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-height: 500px) {
  .play .arena {
    display: none;
  }
  .play .scope {
    font-size: 0.8rem;
  }
  .play .panel {
    padding: 0.48rem;
  }
  .play .metrics {
    font-size: 0.75rem;
  }
  .top {
    height: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

.play > .play {
  display: grid;
  gap: 0.65rem;
}

/* The expedition panel shares the shape language of an old dive computer. */
@font-face {
  font-family: Pixelify;
  src: url("/VT323-Regular.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --bg: #0b101b;
  --panel: #111727;
  --edge: #304758;
  --ink: #e6e5ed;
  --muted: #929db6;
  --mint: #70d6ed;
  --gold: #e6c687;
}
body {
  background: radial-gradient(
    ellipse at top,
    #234e63 0,
    #0b2032 49%,
    var(--bg) 82%
  );
  background-attachment: fixed;
}
.top {
  height: 62px;
}
.wordmark,
.score,
h1,
h2,
h3,
.kicker,
.metrics,
.depth,
.tile {
  font-family: Pixelify, ui-monospace, monospace;
}
.wordmark {
  font-size: 1rem;
  letter-spacing: 0.09em;
  text-shadow: 2px 2px #2c6170;
}
.hero,
.panel,
.arena {
  border-radius: 0;
  box-shadow: none;
}
.hero img {
  height: clamp(195px, 45vw, 322px);
  object-position: center 45%;
  image-rendering: pixelated;
}
.hero-copy {
  margin-top: 0;
  padding: 2rem 1.2rem;
  background: transparent;
  text-align: center;
}
.hero { border: 0; background: transparent; overflow: visible; padding-top: 5vh; }
.hero .actions { justify-content: center; margin-top: 2rem; }
.hero .home-traveler { width: 52px; height: 52px; display: block; margin: 1.5rem auto; }
.hero .sub { max-width: 350px; margin: auto; color: #a8b3ca; }
.title {
  color: var(--ink);
  font-size: clamp(2.65rem, 11vw, 5.4rem);
  text-shadow: 0 2px #48506a;
  letter-spacing: .09em;
  font-weight: 400;
}
.kicker {
  font-size: 0.86rem;
  letter-spacing: 0.15em;
}
.metrics {
  font-size: 0.93rem;
  letter-spacing: 0.035em;
}
button {
  border-radius: 0;
  box-shadow: inset 0 0 0 3px #111727;
  font-weight: 400;
  letter-spacing: .09em;
}
button.primary {
  background: #121a2c;
  border: 2px solid #70d6ed;
  color: var(--ink);
  box-shadow: inset 0 0 0 3px #22313e;
}
button.quiet {
  box-shadow: none;
}
.summary {
  background: #101625eb;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.summary::before {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  z-index: -1;
  background: url("/reef-v2.webp") center/cover;
  opacity: 0;
  mask-image: linear-gradient(90deg, transparent, #000);
}
.score {
  font-size: clamp(4.2rem, 16vw, 7.25rem);
  letter-spacing: -0.08em;
  text-shadow: 3px 4px #473d41;
}
.summary .primary {
  background: #121a2c;
  border-color: #70d6ed;
  box-shadow: inset 0 0 0 3px #22313e;
}
.tiles {
  gap: 0.34rem;
}
.tile {
  border-radius: 0.32rem;
  border-color: #172e41;
  min-height: 40px;
}
.arena {
  height: clamp(115px, 24vh, 235px);
  background-position: center calc(45% + var(--depth) * 32%);
  transition: background-position 0.55s ease-out;
  image-rendering: pixelated;
}
.arena .depth {
  border: 1px solid #508497;
  border-radius: 0.27rem;
  right: 0.65rem;
}
.hud-score {
  color: var(--gold);
}
.question {
  font-family: system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.dive-log {
  background: linear-gradient(#16394b, #08192c);
}
.dive-graph {
  margin-top: 0.35rem;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 92px;
  background: repeating-linear-gradient(
    180deg,
    #a2e7d529 0px,
    #a2e7d529 1px,
    transparent 1px,
    transparent 24px
  );
}
.dive-column {
  text-align: center;
  position: relative;
  font:
    0.76rem Pixelify,
    monospace;
  color: var(--muted);
}
.dive-column b {
  display: block;
  height: calc(var(--drop) * 0.68);
  min-height: 1px;
  position: relative;
  width: 1px;
  margin: auto;
  background: #7dc9c8;
}
.dive-column i {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  transform: translate(-50%, 50%) rotate(45deg);
  background: #99ead5;
  box-shadow: 0 0 8px #82ddc5;
}
@media (max-width: 540px) {
  .top {
    height: 54px;
  }
  .hero-copy {
    padding: 1.1rem 0.95rem;
  }
  .play:focus-within .arena {
    height: 56px;
  }
  .tiles {
    margin: 0.7rem 0;
  }
  .summary .actions {
    gap: 0.4rem;
  }
}
@media (max-height: 500px) {
  .play:focus-within .arena {
    display: none;
  }
  .top {
    height: 42px;
  }
}
.arena,
.summary::before {
  background-image: url("/reef-v2.webp");
}
.keyboard-open .play .arena {
  display: none;
}
.keyboard-open .play .panel {
  padding: 0.52rem 0.65rem;
}
.keyboard-open .play .metrics {
  font-size: 0.78rem;
}
.dive-stage,
.clash-stage {
  background-image: url("/trench.webp");
  background-position: center calc(6% + var(--depth) * 72%);
}
.dive-stage.descent {
  animation: trench-descent 0.72s cubic-bezier(0.18, 0.69, 0.35, 1) both;
}
@keyframes trench-descent {
  from {
    background-position: center calc(6% + var(--from-depth) * 72%);
  }
  to {
    background-position: center calc(6% + var(--depth) * 72%);
  }
}
.diver-motion {
  position: absolute;
  left: 50%;
  top: calc(35% + var(--depth) * 24%);
  width: clamp(48px, 14%, 105px);
  height: auto;
  transform: translate(-50%, -50%);
}
.diver-motion img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  animation: bob 3.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 5px #00192f);
}
.creature {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: var(--buddy-atlas, url("/shrimp-swim.png")) 0 0 / 400% 200% no-repeat;
  image-rendering: pixelated;
  animation: shrimp-cycle 1.333s steps(1, end) infinite;
}
.descent .creature {
  animation: shrimp-cycle .571s steps(1, end) 3, shrimp-cycle 1.333s steps(1, end) 1.713s infinite;
}
.theme-dive .descent .diver-motion .creature {
  animation: shrimp-cycle .571s steps(1, end) 4, shrimp-cycle 1.333s steps(1, end) 2.284s infinite;
}
@keyframes shrimp-cycle {
  0%, 100% { background-position: 0 0; }
  12.5% { background-position: 33.333333% 0; }
  25% { background-position: 66.666667% 0; }
  37.5% { background-position: 100% 0; }
  50% { background-position: 0 100%; }
  62.5% { background-position: 33.333333% 100%; }
  75% { background-position: 66.666667% 100%; }
  87.5% { background-position: 100% 100%; }
}
.descent .diver-motion {
  animation: diver-sink 0.72s cubic-bezier(0.25, 0.58, 0.3, 1) both;
}
@keyframes diver-sink {
  from {
    top: calc(35% + var(--from-depth) * 24%);
    transform: translate(-50%, -50%) rotate(-7deg);
  }
  to {
    top: calc(35% + var(--depth) * 24%);
    transform: translate(-50%, -50%);
  }
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px) rotate(3deg);
  }
}
.diver-motion i {
  position: absolute;
  width: 4px;
  height: 4px;
  left: 54%;
  top: 17%;
  border: 1px solid #9fe3d7;
  border-radius: 1px;
  animation: bubble 1.9s ease-out infinite;
}
.diver-motion i:nth-of-type(2) {
  animation-delay: 0.45s;
  left: 61%;
}
.diver-motion i:nth-of-type(3) {
  animation-delay: 1.1s;
  left: 48%;
}
@keyframes bubble {
  from {
    opacity: 0.7;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-30px) translateX(6px);
  }
}
.depth-earned {
  position: absolute;
  right: 0.72rem;
  bottom: 2.85rem;
  color: var(--gold);
  font:
    bold 0.95rem Pixelify,
    monospace;
  background: #18364b;
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem;
  animation: points-rise 0.55s ease-out both;
}
@keyframes points-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.clash-stage {
  height: clamp(78px, 14vh, 145px);
  background-position: center 68%;
}
.pressure-orb {
  position: absolute;
  top: 47%;
  left: calc(17% + var(--seat) * 66%);
  width: clamp(34px, 8%, 58px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 33%;
  background: #efa364;
  border: 3px solid #ffda95;
  box-shadow:
    0 0 17px #ffd28b9e,
    inset 6px 7px #ffda9566,
    inset -8px -9px #ac526c;
  animation: orb-pass 0.42s ease-out both;
}
.pressure-orb i {
  position: absolute;
  left: 22%;
  top: 21%;
  width: 23%;
  height: 23%;
  background: #fff0bd;
  border-radius: 25%;
}
.pressure-orb.popped {
  background: #fd8c82;
}
@keyframes orb-pass {
  from {
    left: calc(17% + var(--from-seat) * 66%);
    scale: 0.86;
  }
  to {
    left: calc(17% + var(--seat) * 66%);
    scale: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dive-stage,
  .diver-motion,
  .diver-motion img,
  .creature,
  .diver-motion i,
  .pressure-orb,
  .depth-earned {
    animation: none !important;
  }
}

/* Active play takes over the viewport. HUD, prompt and answer dock are separate from the animated world. */
body.in-dive {
  overflow: hidden;
}
body.in-dive .top {
  display: none;
}
body:not(.in-dive)::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(transparent, #0b101bc9 38%, #0b101b 85%),
    url("/dive-map.svg") center top / 100% 400%;
}
main.full-game {
  display: block;
  padding: 0;
  max-width: none;
}
.full-dive {
  position: fixed;
  top: var(--game-top, 0px);
  left: 0;
  right: 0;
  height: var(--game-height, 100dvh);
  overflow: hidden;
  isolation: isolate;
  --game-image: url("/dive-map.svg");
  --game-portrait: url("/dive-map-portrait.svg");
}
.full-dive .arena {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: var(--game-image);
  background-size: 100% 400%;
  background-position: center calc(var(--depth) * 100%);
  image-rendering: pixelated;
}
.full-dive .arena::after {
  z-index: 0;
  background: linear-gradient(
    180deg,
    transparent,
    transparent 35%,
    #080d191a 66%,
    #090d17f5 91%
  );
  opacity: 1;
  pointer-events: none;
}
.full-dive.theme-dive .arena::after {
  background: linear-gradient(180deg, transparent 67%, #0b101a10 74%, #0b101af2 81%);
}
.full-dive .diver-motion {
  z-index: 1;
  left: 30%;
  width: clamp(40px, 10vw, 60px);
  top: 56%;
}
.full-dive .depth-earned {
  z-index: 2;
  top: 51%;
  bottom: auto;
  right: 23%;
}
.full-dive .descent .diver-motion {
  animation-name: scene-sink;
}
@keyframes scene-sink {
  from {
    transform: translate(-50%, -85%) rotate(-12deg);
  }
  to {
    transform: translate(-50%, -50%);
  }
}
.full-dive .dive-stage.descent {
  animation: depth-camera 1.8s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes depth-camera {
  from { background-position: center calc(var(--from-depth) * 100%); }
  to { background-position: center calc(var(--depth) * 100%); }
}
.full-dive::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #0002 0 1px, transparent 1px 3px);
  opacity: .4;
}
.stage-hud {
  position: absolute;
  z-index: 2;
  top: max(8px, env(safe-area-inset-top));
  left: max(10px, calc((100% - 700px) / 2));
  right: max(10px, calc((100% - 700px) / 2));
  display: grid;
  grid-template-columns: minmax(76px, 1fr) auto minmax(76px, 1fr);
  align-items: start;
  font-family: Pixelify, monospace;
  gap: 6px;
}
.stage-chip {
  justify-self: start;
  min-width: 80px;
  padding: 0.35rem 0.65rem;
  background: #111727ed;
  border: 0;
  box-shadow: none;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, 100% 4px, 100% calc(100% - 5px), calc(100% - 8px) calc(100% - 5px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 5px), 0 calc(100% - 5px), 0 4px, 8px 4px);
}
.stage-chip small,
.stage-progress small {
  display: block;
  color: #969eb4;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.stage-chip strong {
  color: var(--mint);
  font-size: 1.5rem;
  font-weight: 400;
}
.score-chip {
  justify-self: end;
  text-align: right;
}
.score-chip strong {
  color: #e56c96;
}
.stage-progress {
  text-align: center;
  align-self: center;
  padding: 0.3rem 0.4rem;
  background: transparent;
  border-radius: 0;
}
.stage-pips {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-bottom: 0.25rem;
}
.round-pip {
  width: clamp(10px, 2.4vw, 14px);
  aspect-ratio: 1;
  border: 1px solid #487285;
  background: #122739;
}
.round-pip.current {
  outline: 1px solid #ffc279;
}
.round-pip[data-tier="0"] {
  background: #697e89;
}
.round-pip[data-tier="10"] {
  background: #d0e1df;
}
.round-pip[data-tier="15"] {
  background: #f2d68b;
}
.round-pip[data-tier="30"] {
  background: #90dfb8;
}
.round-pip[data-tier="60"] {
  background: #8fcfed;
}
.round-pip[data-tier="85"] {
  background: #cfb7ff;
}
.round-pip[data-tier="100"] {
  background: #ffad76;
}
.stage-back {
  position: absolute;
  top: calc(max(8px, env(safe-area-inset-top)) + 62px);
  left: max(9px, env(safe-area-inset-left));
  z-index: 3;
  min-width: 36px;
  padding: 0.2rem 0.6rem;
  background: #0a1d30eb;
  font-size: 1.45rem;
}
.stage-question {
  position: absolute;
  top: clamp(112px, 24%, 190px);
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, calc(100% - 2.4rem));
  padding: 1.1rem 1.3rem;
  background: #111727f2;
  border-radius: 0;
  border: 0;
  box-shadow: 0 0 18px #0c142944;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, 100% 4px, 100% calc(100% - 6px), calc(100% - 8px) calc(100% - 6px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 6px), 0 calc(100% - 6px), 0 4px, 8px 4px);
}
.stage-question .question {
  font-family: Pixelify, monospace;
  letter-spacing: .025em;
  font-size: clamp(1.5rem, 5.4vw, 2rem);
  font-weight: 400;
  line-height: 1.12;
}
.stage-question .kicker { color: #df7199; font-size: .7rem; letter-spacing: .24em; margin-bottom: .65rem; }
.stage-question .scope { font-size: .85rem; letter-spacing: .06em; margin-top: .65rem; color: #9ca9c4; }
.stage-question.revealed {
  top: 15%;
  text-align: center;
  background: #080b16c9;
  border: 1px solid #bd895a;
  clip-path: none;
  padding: 1.2rem;
}
.stage-question.revealed .question { text-transform: uppercase; letter-spacing: .15em; font-size: 2.2rem; color: #e6c687; }
.reveal-score {
  margin-top: 0.4rem;
  font:
    400 1.16rem Pixelify,
    monospace;
  color: var(--gold);
}
.answer-dock {
  position: absolute;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(610px, calc(100% - 1.3rem));
  display: grid;
  gap: 0.35rem;
  padding: 0.58rem 0.65rem;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.answer-dock .entry {
  margin: 0;
}
.dock-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.42rem;
}
.clock-dial {
  min-width: 50px;
  border: 1px solid #468899;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #101b29, 0 0 0 3px #152b3b;
  display: grid;
  place-items: center;
  padding: 0.1rem 0.25rem;
  font:
    400 1.25rem Pixelify,
    monospace;
  color: #70d6ed;
}
.answer-dock input { border: 1px solid #70d6ed; border-radius: 0; background: #101526e6; font: 1.15rem Pixelify, monospace; color: #e6e5ed; padding: .6rem; min-height: 48px; }
.answer-dock button[type="submit"] { background: #b9537a; border-color: #592a43; color: #101321; box-shadow: inset 0 0 0 3px #9c476b; text-transform: uppercase; }
.answer-dock .bar { margin-left: 57px; height: 3px; border-radius: 0; }
.answer-dock .feedback:empty,
.answer-dock #correction:empty {
  display: none;
}
.answer-dock .feedback,
.answer-dock .bar {
  margin: 0;
  min-height: 0;
}
.answer-dock .skip {
  justify-self: end;
  min-height: 29px;
  padding: 0.1rem 0.35rem;
  font-size: 0.8rem;
}
.full-dive:not(.party-dive) .answer-dock {
  --dial-size: clamp(40px, 10vw, 64px);
  --answer-height: max(46px, calc(var(--dial-size) - 4px));
  bottom: clamp(22px, 12%, 110px);
  gap: 4px;
  padding: 0;
}
.full-dive:not(.party-dive) .dock-line { align-items: start; }
.full-dive:not(.party-dive) .clock-dial {
  width: var(--dial-size);
  min-width: 0;
  aspect-ratio: 1;
  border-color: #31566e;
  background: radial-gradient(circle, #17354a 0 35%, #111d30 37% 63%, #16263a 65%);
  box-shadow: inset 0 0 0 3px #101b29, 0 0 14px #35748b36;
}
.full-dive:not(.party-dive) .entry { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
.answer-field { position: relative; }
.answer-field input { height: var(--answer-height); min-height: 0; padding-inline: .7rem 44px; }
.answer-field input::placeholder { color: #8697b0; }
.answer-field input:focus-visible { outline: 2px solid #8be8ff; outline-offset: -2px; }
.answer-field button {
  position: absolute;
  inset: 0 1px 0 auto;
  width: 42px;
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  color: #a7c0d2;
}
.answer-field input:placeholder-shown + button { visibility: hidden; }
.answer-field button:hover { background: #71c9e323; color: #fff; }
.full-dive:not(.party-dive) .entry button[type="submit"] {
  height: var(--answer-height);
  min-width: clamp(60px, 10vw, 82px);
  padding: .6rem;
  letter-spacing: .12em;
}
.full-dive:not(.party-dive) .entry button[type="submit"]:enabled:is(:hover,:focus-visible) {
  background: #dc7a9f;
}
.full-dive:not(.party-dive) .answer-dock .bar { height: 4px; }
.full-dive:not(.party-dive) .answer-dock .bar b { background: #6bcde6; border-radius: 0; }
.full-dive:not(.party-dive) .answer-dock .bar[data-urgent="true"] b { background: var(--gold); }
.descent-countdown {
  justify-self: center;
  margin: 0 0 18px;
  padding: .75rem 1.15rem;
  background: #111727ed;
  color: #b4c3d9;
  font: clamp(.75rem, 3.4vw, 1rem) Pixelify, monospace;
  letter-spacing: .08em;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, calc(100% - 10px) 4px, calc(100% - 5px) 4px, calc(100% - 5px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 5px) calc(100% - 8px), calc(100% - 5px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px), calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 4px), 5px calc(100% - 4px), 5px calc(100% - 8px), 0 calc(100% - 8px), 0 8px, 5px 8px, 5px 4px, 10px 4px);
}
.descent-countdown strong { color: #8be8ff; font-weight: 400; }
@media (min-width: 720px) {
  .full-dive:not(.party-dive) .answer-dock { bottom: clamp(22px, 10%, 100px); }
  .full-dive:not(.party-dive) .stage-chip { min-width: 120px; padding-inline: .9rem; }
  .full-dive:not(.party-dive) .stage-back {
    top: calc(max(8px, env(safe-area-inset-top)) + 72px);
    left: max(10px, calc((100% - 904px) / 2));
    min-height: 36px;
  }
}
.stage-next {
  justify-self: center;
  min-width: min(100%, 190px);
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: .8rem 1.3rem;
}
.party-dive .clash-stage {
  background-position: center 63%;
}
.party-dive .pressure-orb {
  z-index: 1;
  top: 59%;
}
.party-dive .arena .depth {
  display: none;
}
.clash-seats {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22%;
  width: min(700px, calc(100% - 2rem));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
}
.clash-seat {
  padding: 0.22rem 0.4rem;
  background: #0a1a30df;
  border: 1px solid #527d8d;
  font-size: 0.76rem;
}
.clash-seat .creature { width: 38px; margin: -.5rem auto .1rem; }
.clash-seat.active .creature { animation-duration: .571s; }
.clash-seat:nth-child(odd) .creature { animation-delay: -.4s; }
.wordmark .brand-creature { width: 32px; height: 32px; flex: 0 0 32px; }
.clash-seat small {
  margin-left: 0.3rem;
  color: var(--muted);
}
.clash-seat.active {
  border-color: #ffd090;
}
.heart-meter {
  font:
    0.82rem Pixelify,
    monospace;
  color: var(--muted);
}
.used-answers {
  color: var(--muted);
  font-size: 0.82rem;
}
.used-answers .answer-list {
  max-height: min(100px, 14vh);
}
.theme-words {
  --game-image: url("/theme-words.svg");
  --campaign-actor: url("/actor-words.svg");
  --game-portrait: var(--game-image);
}
.theme-movies {
  --game-image: url("/theme-movies.svg");
  --campaign-actor: url("/actor-movies.svg");
  --game-portrait: var(--game-image);
}
.theme-sports {
  --game-image: url("/theme-sports.svg");
  --campaign-actor: url("/actor-sports.svg");
  --game-portrait: var(--game-image);
}
.theme-world {
  --game-image: url("/route-world.webp");
  --game-portrait: var(--game-image);
}
.full-dive:is(.theme-words, .theme-movies, .theme-sports, .theme-world)
  .dive-stage {
  background-position: calc(var(--depth) * 100%) top;
  background-size: auto 85%;
  background-repeat: no-repeat;
  background-color: #0a0c16;
}
.full-dive:is(.theme-words, .theme-movies, .theme-sports, .theme-world)
  .dive-stage.descent {
  animation-name: world-camera;
}
.full-dive:is(.theme-words, .theme-movies, .theme-sports, .theme-world)
  .diver-motion {
  top: 68%;
  left: 50%;
}
.full-dive:is(.theme-words, .theme-movies, .theme-sports, .theme-world)
  .descent
  .diver-motion {
  animation-name: scene-sink;
}
 .full-dive:is(.theme-words, .theme-movies, .theme-sports) .diver-motion .creature {
  background-image: var(--campaign-actor);
  filter: none;
}
.full-dive:is(.theme-words, .theme-movies, .theme-sports) .diver-motion i { display: none; }
body.is-packs:not(.in-dive)::before { background: linear-gradient(#111725, #0b111c 85%); }
.is-packs .top { display: none; }
.is-packs main { display: block; width: 100%; max-width: none; padding: 0; }
.pack-library { width: min(460px, calc(100% - 40px)); margin: auto; padding: clamp(54px, 7.5vh, 70px) 0 2rem; }
.pack-back { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
  z-index: 3; padding: .2rem .45rem; border: 1px solid #456580; background: #101a2a; color: #e2f2fd; text-decoration: none; }
.pack-library-title { margin-bottom: 1.6rem; }
.pack-library-title p, .pack-scene-title > p:first-child { margin: 0; color: #eef6fa; text-transform: uppercase;
  font: 400 2.3rem/.98 Pixelify, monospace; letter-spacing: .08em; text-shadow: -2px 2px #db6789, 2px -1px #4dc6de; }
.pack-library-title > p { font-size: 2.15rem; }
.pack-library-title h1 { margin: .65rem 0 0; color: #a5bdd2; font-size: .91rem; text-transform: uppercase; letter-spacing: .16em; }
.pack-words { --pack-art: url("/theme-words.webp"); --pack-cover: url("/pack-cover-words.webp"); --pack-accent: #d6b5fe; --pack-surface: #171b35; --pack-crop: 10%; }
.pack-movies { --pack-art: url("/theme-movies.webp"); --pack-cover: url("/pack-cover-movies.webp"); --pack-accent: #f7b594; --pack-surface: #261729; --pack-crop: 22%; }
.pack-sports { --pack-art: url("/theme-sports.webp"); --pack-cover: url("/pack-cover-sports.webp"); --pack-accent: #9fe6ae; --pack-surface: #152824; --pack-crop: 42%; }
.pack-world { --pack-art: url("/theme-world.webp"); --pack-cover: url("/pack-cover-world.webp"); --pack-accent: #9adce6; --pack-surface: #122833; --pack-crop: 27%; }
.pack-card-list { display: grid; gap: 1rem; }
.pack-card { display: block; overflow: hidden; border: 2px solid color-mix(in srgb, var(--pack-accent), #161d30 43%);
  background: var(--pack-surface); color: #eef6fd; text-decoration: none; box-shadow: 0 4px 0 #060b17; }
.pack-card:is(:hover, :focus-visible) { border-color: var(--pack-accent); outline: 1px solid var(--pack-accent); outline-offset: 3px; }
.pack-card-art { display: block; position: relative; aspect-ratio: 2.6;
  background: linear-gradient(transparent 77%, var(--pack-surface)), var(--pack-cover) center / cover; }
.pack-card.pack-words .pack-card-art { aspect-ratio: 2.14; }
@media (min-width: 720px) {
  .pack-card-art { aspect-ratio: 2.97; background-position: center, center 66%; }
  .pack-card.pack-words .pack-card-art { aspect-ratio: 2.3; }
}
.pack-card-art small { position: absolute; top: .55rem; right: .55rem; padding: .25rem .45rem; border: 1px solid var(--pack-accent);
  background: #101521e8; color: var(--pack-accent); text-transform: uppercase; letter-spacing: .1em; }
.pack-card.pack-words .pack-card-art small { inset: 0 0 auto; border: 0; padding: .48rem; text-align: center;
  background: #b3a4f1; color: #151631; }
.pack-card-copy { display: grid; gap: .38rem; padding: .74rem .9rem .8rem; line-height: 1.3; }
.pack-card-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .15rem .65rem; }
.pack-card-copy strong { color: #f0f5f9; font-size: 1.17rem; letter-spacing: .045em; }
.pack-card-heading small, .pack-card-description { color: #b8cce0; font-size: .84rem; }
@media (max-width: 600px) { .pack-library-title { margin-bottom: 1.2rem; } }
.pack-card-action { margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed #63788d69; text-align: right;
  color: var(--pack-accent); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
.pack-library-footer { margin-top: 1.2rem; padding: .7rem .85rem; border: 1px solid #46637c; background: #111d2e; }
.pack-library-footer h2, .pack-library-footer p { margin: .15rem 0 .45rem; }
.pack-scene { position: relative; min-height: 100svh; isolation: isolate; overflow: hidden; background: #0b111c; }
.pack-scene-art { position: absolute; z-index: -1; inset: 0; width: min(100%, 1050px); margin: auto;
  background: linear-gradient(#0a102259 0, transparent 44%, #0a102650 60%, #09111e 93%), var(--pack-art) center var(--pack-crop) / cover no-repeat; }
.pack-scene-title { text-align: center; padding: clamp(68px, 11vh, 105px) 12px 0; color: #e0eafa;
  text-shadow: 0 2px 4px #0b1324, 0 1px 8px #0b1324; }
.pack-scene-title > p:first-child { font-size: clamp(3.1rem, 8vw, 5.3rem); }
.pack-scene-title h1 { margin: .9rem auto .25rem; color: var(--pack-accent); font-size: clamp(1.4rem, 4vw, 2.05rem);
  text-transform: uppercase; letter-spacing: .13em; }
.pack-scene-title > p:last-child { margin: .35rem 0; }
.pack-scene-actor.creature { position: absolute; top: 44%; right: max(12%, calc((100% - 850px) / 2)); width: clamp(54px, 9vw, 102px);
  background-image: var(--campaign-actor, url("/shrimp-swim.png")); }
.pack-scene-actions { position: absolute; bottom: clamp(28px, 13vh, 105px); left: 50%; transform: translateX(-50%);
  width: min(610px, calc(100% - 24px)); color: #d8e9f4; }
.pack-log-trigger { padding: .25rem .35rem; min-height: 36px; text-decoration: underline; color: #e3edfb; }
.pack-selected { margin: .28rem 0 .45rem; line-height: 1.2; }
.pack-scene .pack-start { width: 100%; min-height: 66px; border-color: var(--pack-accent); background: #11192ce8; color: #f2f6fb;
  font-size: clamp(1.2rem, 4vw, 1.55rem); text-transform: uppercase; letter-spacing: .13em; }
.pack-scene-actions nav { display: flex; gap: .4rem; justify-content: flex-end; margin-top: .4rem; }
.pack-scene-actions nav a { padding: .3rem .45rem; background: #101b2b; color: #d4e6f4; border: 1px solid #5a7186; text-decoration: none; }
.pack-log { width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: .8rem;
  border: 2px solid #537a9e; background: #111c2e; color: #e7f2ff; overflow: auto; box-shadow: 4px 5px #070e1b; }
.pack-log::backdrop { background: #090f1ccd; }
.pack-log header { display: flex; justify-content: space-between; align-items: start; gap: .55rem; }
.pack-log header :is(h2, p) { margin: 0; }
.pack-log header h2 { color: var(--pack-accent); }
.pack-log header button { min-width: 39px; min-height: 39px; padding: .18rem .4rem; border: 1px solid #4b7191; }
.pack-log-summary { color: #a8c2da; margin: .6rem 0; }
.pack-chapters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .28rem; }
.pack-chapter { display: grid; place-content: center; gap: .15rem; min-width: 0; min-height: 58px; margin: 0; padding: .12rem;
  color: #e8f5ff; background: #16263b; border: 1px solid #496682; text-align: center; letter-spacing: .015em; }
.pack-chapter small { color: #b8d1e8; font-size: .68rem; white-space: nowrap; }
.pack-chapter[aria-pressed="true"] { border: 2px solid var(--pack-accent); color: var(--pack-accent); }
@media (max-width: 560px) {
  .pack-scene-actions { bottom: max(28px, 8vh); }
  .pack-chapters { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pack-chapter { min-height: 49px; }
}
@media (max-height: 520px) {
  .pack-scene-title { padding-top: 62px; }
  .pack-scene-title > p:first-child { font-size: 2.8rem; }
  .pack-scene-actions { bottom: 17px; }
  .pack-scene-actor.creature { top: 41%; right: 17%; width: 49px; }
  .pack-scene .pack-start { min-height: 52px; }
}
.full-dive.theme-world .dive-stage {
  background-size: auto 85%;
  background-repeat: no-repeat;
  background-position: calc(var(--depth) * 100%) top;
  background-color: #0a0c16;
}
.full-dive.theme-world .dive-stage.descent {
  animation: world-camera 1.8s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes world-camera {
  from { background-position: calc(var(--from-depth) * 100%) top; }
  to { background-position: calc(var(--depth) * 100%) top; }
}
.full-dive.theme-world .diver-motion { left: 50%; top: calc(74% - var(--depth) * 10%); }
.full-dive.theme-world .descent .diver-motion { animation-name: scene-sink; }
@media (orientation: portrait) {
  body:not(.in-dive)::before {
    background-image: linear-gradient(transparent, #0b101bc9 38%, #0b101b 85%), url("/dive-map-portrait.svg");
  }
  .full-dive .arena {
    background-image: var(--game-portrait);
  }
}
.keyboard-open .full-dive .stage-question {
  top: 88px;
  padding: 0.55rem 0.72rem;
}
.keyboard-open .full-dive .stage-back {
  top: 53px;
  min-height: 32px;
  min-width: 34px;
  font-size: 1rem;
}
.keyboard-open .full-dive .answer-dock {
  bottom: 4px;
}
.keyboard-open .full-dive:not(.party-dive) .answer-dock { bottom: 4px; }
.keyboard-open .full-dive .clash-seats {
  display: none;
}
.keyboard-open .full-dive .stage-question .scope {
  font-size: 0.76rem;
  margin: 0.25rem 0 0;
}
.keyboard-open .full-dive .stage-question .question {
  font-size: clamp(1.1rem, 4.5vw, 1.55rem);
}

.full-dive.theme-dive {
  --swim-stage-width: min(100%, 920px);
  --swim-start-x: calc((100% - var(--swim-stage-width)) / 2 + 48px);
  --swim-start-y: 64.7%;
  --swim-focus-x: 57.4%;
  --swim-focus-y: 34.5%;
  --swim-rest-x: calc((100% - var(--swim-stage-width)) / 2 + var(--swim-stage-width) * .13 + 32px);
  --swim-rest-y: 24.8%;
  --swim-across-ease: cubic-bezier(.173, .978, .410, .983);
  --swim-rise-ease: cubic-bezier(.207, .578, .158, 1);
  --swim-return-ease: cubic-bezier(.25, .73, .38, 1);
}
@supports (animation-timing-function: linear(0, 1)) {
  .full-dive.theme-dive {
    /* The bubble origin samples the same exponential approach, with a slower rise. */
    --swim-across-ease: linear(0, .2994, .5095, .6569, .7603, .8329, .8838, .9195, .9445, .9621, .9745, .9831, .9892, .9934, .9964, .9985, 1);
    --swim-rise-ease: linear(0, .1963, .4024, .5670, .6908, .7812, .8464, .8929, .9259, .9492, .9657, .9773, .9854, .9912, .9952, .9980, 1);
    --swim-return-ease: linear(0, .3733, .6346, .8069, .9116, .9677, .9922, .9993, 1);
  }
}
@media (max-width: 600px) {
  .full-dive.theme-dive {
    --swim-start-x: 13%; --swim-start-y: 66%;
    --swim-focus-x: 60%; --swim-focus-y: 37.2%;
    --swim-rest-x: 16%; --swim-rest-y: 25.7%;
  }
}
.full-dive.theme-dive .diver-motion { left: var(--swim-start-x); top: var(--swim-start-y); }
.full-dive.theme-dive.ocean-revealed .diver-motion {
  left: var(--swim-rest-x);
  top: var(--swim-rest-y);
  transform: translate(-50%, -50%) rotate(-5deg);
}
@keyframes ocean-reveal-approach {
  from { left: var(--swim-start-x); transform: translate(-50%, -50%); }
  to { left: var(--swim-focus-x); transform: translate(-50%, -50%) rotate(-8deg); }
}
@keyframes ocean-reveal-rise {
  from { top: var(--swim-start-y); }
  to { top: var(--swim-focus-y); }
}
@keyframes ocean-reveal-return {
  from { left: var(--swim-focus-x); top: var(--swim-focus-y); transform: translate(-50%, -50%) rotate(-8deg); }
  to { left: var(--swim-rest-x); top: var(--swim-rest-y); transform: translate(-50%, -50%) rotate(-5deg); }
}
.full-dive.theme-dive .reveal-float {
  top: 24%;
  background: none;
  border: 0;
  box-shadow: none;
  text-shadow: 2px 2px #091322;
}
.depth-overlay, .depth-notes, .depth-ruler, .depth-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.depth-overlay { z-index: 1; overflow: hidden; }
.depth-notes {
  mask-image: linear-gradient(transparent 37%, #000 45%, #000 66%, transparent 74%);
}
.ocean-revealed .depth-notes {
  /* Keep the moving depth annotations below the answer and score. The ruler stays visible. */
  mask-image: linear-gradient(transparent 57%, #000 62%, #000 67%, transparent 74%);
}
@media (max-height: 560px) {
  .ocean-revealed .depth-notes {
    mask-image: linear-gradient(transparent 64%, #000 69%, transparent 76%);
  }
}
.depth-ruler {
  --ruler-edge: max(12px, calc((100% - 896px) / 2));
  mask-image: linear-gradient(transparent 18%, #000 22%, #000 74%, transparent 87%);
}
.depth-ruler::before {
  content: "";
  position: absolute;
  inset: 22% var(--ruler-edge) 14% auto;
  border-right: 1px solid #b7e2ff4d;
}
.depth-track { transform: translateY(calc(var(--depth) * -300%)); }
.depth-note, .depth-tick {
  position: absolute;
  transform: translateY(-50%);
  font-family: Pixelify, monospace;
  text-shadow: 1px 1px #081323;
}
.depth-note {
  left: clamp(64px, 19%, 350px);
  max-inline-size: min(23%, 16rem);
  display: grid;
  gap: .08em;
  padding-inline-start: .45em;
  border-inline-start: 2px solid #98c3dd77;
  color: #b5ccda;
  font-size: clamp(.9rem, 1.65vw, 1.3rem);
  line-height: 1;
}
.depth-note.right {
  left: auto;
  right: clamp(82px, 20%, 245px);
  padding-inline: 0 .45em;
  border-inline-start: 0;
  border-inline-end: 2px solid #98c3dd77;
  text-align: right;
}
.depth-note small { color: #94bbd1; letter-spacing: .08em; }
.depth-note.zone span { color: #d1ebf3; text-transform: uppercase; letter-spacing: .09em; }
.high-contrast .depth-note :is(small, span) { color: var(--ink); }
.depth-tick {
  right: var(--ruler-edge);
  display: flex;
  align-items: center;
  gap: .35em;
  color: #b4d2e0ad;
  font-size: clamp(.65rem, 1.15vw, .85rem);
  white-space: nowrap;
}
.depth-tick::after { content: ""; width: 7px; border-top: 1px solid #91bbcba6; }
.depth-tick.major::after { width: 14px; border-top-color: #b3d8e9; }
.keyboard-open .depth-notes { visibility: hidden; }
.full-dive.theme-dive.travel-sequence .descent .depth-track {
  animation: depth-track-move var(--route-travel) var(--dive-ease) var(--answer-beat) both;
}
@keyframes depth-track-move {
  from { transform: translateY(calc(var(--from-depth) * -300%)); }
  to { transform: translateY(calc(var(--depth) * -300%)); }
}
.recap-ascent .depth-track {
  animation: depth-track-move var(--ascent-duration) cubic-bezier(.215, .61, .355, 1) both;
}
.rarity-plane {
  position: absolute;
  top: 71%;
  left: 12%;
  right: 12%;
  border-top: 1px dashed #e1c17d99;
  animation: rarity-plane-fade 2.2s ease-out both;
}
@keyframes rarity-plane-fade {
  from { opacity: 0; transform: translateY(18px); }
  25% { opacity: 1; }
  to { opacity: .5; transform: translateY(0); }
}
.reveal-bubbles {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.reveal-bubbles b {
  position: absolute;
  left: calc(var(--swim-start-x) + (var(--swim-focus-x) - var(--swim-start-x)) * var(--bubble-across) + var(--bubble-spread));
  top: calc(var(--swim-start-y) + (var(--swim-focus-y) - var(--swim-start-y)) * var(--bubble-rise));
  width: var(--bubble-size);
  height: var(--bubble-size);
  border: 1px solid #b6edf5;
  border-radius: 50%;
  background: #8bdcf344;
  animation: reveal-bubble .95s var(--bubble-delay) ease-out both;
}
@keyframes reveal-bubble {
  from { transform: translate(0, 0) scale(1); opacity: 0; }
  20% { opacity: .8; }
  to { transform: translate(var(--bubble-x), -11vh) scale(.45); opacity: 0; }
}
.stage-next.primary:is(:hover,:focus-visible) { background: #244358; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .reveal-bubbles b, .rarity-plane { animation: none; }
  .reveal-bubbles { display: none; }
}

body.is-home {
  --home-waterline: 56.6svh;
  --home-deck: #101b30;
  --home-foam: #86e6f5;
}
body.is-home:not(.in-dive)::before {
  background: linear-gradient(180deg, #6faec6, #b7dbe4 38%, #e2e9e4 57%, #142538 69%, #0b1320);
}
body.is-home::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(0deg, #0b182110 0 1px, transparent 1px 3px);
}
.is-home .top { display: none; }
.is-home main { display: block; width: 100%; max-width: none; padding: 0; }
.home-world {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.home-world::before {
  content: "";
  position: absolute;
  top: 4%;
  right: 12%;
  width: clamp(40px, 8vmin, 90px);
  aspect-ratio: 1;
  background: #f6dda0;
  clip-path: polygon(23% 0,77% 0,77% 10%,90% 10%,90% 23%,100% 23%,100% 77%,90% 77%,90% 90%,77% 90%,77% 100%,23% 100%,23% 90%,10% 90%,10% 77%,0 77%,0 23%,10% 23%,10% 10%,23% 10%);
}
.home-cloudfield {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: var(--home-waterline);
  fill: #f0f2e9;
}
.home-clouds { animation: home-cloud-drift 26s ease-in-out infinite alternate; }
.home-clouds-far { opacity: .58; animation: home-cloud-drift 38s ease-in-out infinite alternate-reverse; }
@keyframes home-cloud-drift { from { translate: -18px; } to { translate: 27px; } }
.home-water-body {
  position: absolute;
  inset: calc(var(--home-waterline) + 3px) 0 0;
  background: linear-gradient(#24445e 0 19px, #142a41 25%, #0b1627 72%, #0a111d);
}
.home-swell {
  position: absolute;
  top: calc(var(--home-waterline) - 13px);
  left: 0;
  width: 200%;
  height: 34px;
  animation: home-swell 10s linear infinite;
}
.home-swell-front { fill: #24445e; }
.home-swell-back {
  top: calc(var(--home-waterline) - 18px);
  fill: #527e96;
  opacity: .58;
  animation: home-swell 15s linear infinite reverse;
}
@keyframes home-swell { to { transform: translateX(-50%); } }
.home-boat {
  position: absolute;
  top: var(--home-waterline);
  left: max(13%, calc(50% - 320px));
  width: clamp(43px, 10vw, 125px);
  transform: translateY(-88%);
  transform-origin: 50% 86%;
  animation: home-boat-rock 10s ease-in-out infinite;
}
@keyframes home-boat-rock {
  0%, 100% { transform: translateY(-84%) rotate(-3deg); }
  25% { transform: translateY(-100%) rotate(3deg); }
  50% { transform: translateY(-86%) rotate(-2deg); }
  75% { transform: translateY(-96%) rotate(2deg); }
}
.home-school {
  position: absolute;
  width: clamp(75px, 15vw, 155px);
  fill: #72a9bc;
  opacity: .55;
  animation: home-school-glide 13s ease-in-out infinite alternate;
}
.home-school-near { top: calc(var(--home-waterline) + 36px); left: 8%; }
.home-school-far {
  top: calc(var(--home-waterline) + 74px);
  right: 5%;
  fill: #4c879d;
  animation: home-school-glide 17s ease-in-out infinite alternate-reverse;
}
.home-school-deep {
  top: calc(var(--home-waterline) + 164px);
  left: 16%;
  width: clamp(58px, 11vw, 112px);
  opacity: .5;
  animation: home-school-glide 19s ease-in-out infinite alternate-reverse;
}
@keyframes home-school-glide { from { translate: -20px 0; } to { translate: 76px 12px; } }
.home-world .home-krill {
  position: absolute;
  top: calc(var(--home-waterline) + 54px);
  left: calc(50% + min(34%, 252px));
  width: clamp(28px, 5.5vmin, 54px);
  margin: 0;
  animation: home-krill-swim 6s ease-in-out infinite alternate;
}
@keyframes home-krill-swim { from { translate: -8px 3px; rotate: -6deg; } to { translate: 21px -9px; rotate: 7deg; } }
.home-drift {
  position: absolute;
  inset: var(--home-waterline) 0 0;
  background:
    radial-gradient(circle at 20% 35%, #add9e6a1 0 1px, transparent 1.8px) 0 0 / 97px 79px,
    radial-gradient(circle at 74% 66%, #79b9c66c 0 1px, transparent 2px) 0 0 / 147px 97px;
  opacity: .31;
  animation: home-current 24s linear infinite;
}
@keyframes home-current { to { background-position: 97px -79px, -147px -97px; } }

.is-home .hero { position: relative; min-height: 100svh; margin: 0; padding: 0; }
.home-brand { padding: clamp(65px, 11svh, 140px) 12px 0; text-align: center; }
.is-home .home-brand .title {
  margin: 0;
  color: #f1f5ed;
  font: 400 clamp(3.3rem, 9vw, 6.4rem)/.9 Pixelify, monospace;
  letter-spacing: .105em;
  text-shadow: -3px 3px #e06188, 3px -2px #54c5dd, 0 3px #2f6176;
}
.is-home .home-brand .kicker {
  margin: clamp(.7rem, 4svh, 1.7rem) 0 .75rem;
  color: #136581;
  font-size: clamp(.95rem, 2.8vmin, 1.5rem);
  letter-spacing: .27em;
}
.is-home .home-brand .sub { max-width: 580px; margin: auto; color: #274860; font-size: clamp(.92rem, 2.1vmin, 1.23rem); }
.home-menu, .home-utilities {
  position: absolute;
  z-index: 4;
}
.home-menu { top: max(8px, env(safe-area-inset-top)); left: max(8px, calc((100% - 920px) / 2 + 6px)); }
.home-menu summary, .home-utilities button {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding: .2rem;
  border: 1px solid #0a1c30;
  background: #173249;
  color: #d9f0f7;
  cursor: pointer;
}
.home-menu summary { list-style: none; font-size: 1.12rem; }
.home-menu summary::-webkit-details-marker { display: none; }
.home-menu summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.home-menu nav {
  display: grid;
  width: min(258px, calc(100vw - 18px));
  max-height: 78svh;
  overflow: auto;
  margin-top: 5px;
  padding: .28rem;
  background: var(--home-deck);
  border: 1px solid #699eb4;
}
.home-menu nav :is(button, a) { padding: .3rem .45rem; color: #e2f1f9; text-align: left; }
.home-menu nav a { border: 1px solid #557c93; text-decoration: none; }
.home-menu nav a small { color: #a1c5d7; }
.home-utilities { top: max(68px, 11.4svh); right: max(8px, calc((100% - 920px) / 2 + 6px)); display: grid; gap: 3px; }
.home-utilities button { font-size: 1rem; }
.home-utilities button[aria-pressed="false"] { color: #839bb3; }
.home-guide {
  position: absolute;
  top: calc(var(--home-waterline) - 57px);
  left: max(10px, calc((100% - 610px) / 2 + 132px));
}
.home-guide .quiet { min-height: 38px; padding: .22rem .4rem; color: #16384f; background: #edf1e3b8; }
.home-actions {
  position: absolute;
  top: calc(var(--home-waterline) + 5px);
  left: 50%;
  transform: translateX(-50%);
  width: min(610px, calc(100% - 20px));
  display: grid;
  gap: 10px;
}
.is-home .hero-party, .is-home .home-start {
  position: relative;
  border: 3px solid var(--home-foam);
  background: var(--home-deck);
  color: #eaf4fb;
  box-shadow: inset 0 0 0 3px #273c54, 0 4px 0 #0d2637;
}
.is-home .hero-party {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 74px;
  width: min(355px, 95%);
  padding: .5rem .62rem;
  text-decoration: none;
}
.is-home .home-party-tag {
  position: absolute;
  top: -.8rem;
  left: .85rem;
  padding: 0 .35rem;
  color: #102235;
  background: var(--home-foam);
  text-transform: uppercase;
  font-size: .71rem;
  letter-spacing: .11em;
}
.home-party-mark .party-puffer { width: 45px; }
.home-party-title { font-size: clamp(1.15rem, 4.6vw, 1.55rem); text-transform: uppercase; letter-spacing: .08em; }
.is-home .hero-party > small:not(.home-party-tag) { margin-left: auto; color: #b9d7e8; white-space: nowrap; }
.is-home .home-start { width: 100%; min-height: 72px; text-transform: uppercase; font-size: clamp(1.2rem, 4.3vw, 1.6rem); letter-spacing: .17em; }
.is-home :is(.home-start, .hero-party):is(:hover,:focus-visible) { background: #1d344e; color: #fff; }
.home-shortcuts { display: flex; align-items: center; justify-content: space-between; gap: .4rem; color: #bdd2e7; }
.home-shortcuts nav { display: flex; gap: .35rem; }
.home-shortcuts button { min-height: 36px; padding: .18rem .45rem; color: #c1d7e8; border: 1px solid #476884; }
.is-home .home-resume { width: min(610px, calc(100% - 20px)); margin: 0 auto .9rem; }
.is-home .hero:has(.home-actions-invited) { min-height: max(100svh, calc(var(--home-waterline) + 425px)); }
.home-actions-invited .home-challenge { margin: 0 0 9px; padding: .75rem; }
.home-challenge h2, .home-challenge p { margin: .25rem 0 .55rem; }

@media (max-width: 600px) {
  .home-brand { padding-top: 17svh; }
  .home-cloudfield { top: 24svh; height: 33svh; }
  .home-world::before { top: 39%; right: 12%; }
  .home-boat { left: 25%; width: clamp(42px, 12vw, 64px); }
  .home-guide { top: calc(var(--home-waterline) + 9px); left: 10px; }
  .home-guide .quiet { color: #d4e8f7; background: #101f32b8; }
  .home-actions { top: calc(var(--home-waterline) + 73px); }
  .is-home .hero-party, .is-home .home-start { min-height: 68px; }
  .home-shortcuts { flex-wrap: wrap; }
  .home-shortcuts nav { flex: 1 0 100%; justify-content: space-between; }
  .home-shortcuts nav button { flex: 1; }
  .home-school-far { top: calc(var(--home-waterline) + 37px); right: 10%; }
  .home-world .home-krill { top: calc(var(--home-waterline) + 28px); }
}
@media (max-height: 660px) {
  .is-home .hero { min-height: max(100svh, calc(var(--home-waterline) + 218px)); }
  .home-brand { padding-top: clamp(47px, 12svh, 75px); }
  .is-home .home-brand .kicker { margin-block: .5rem .28rem; }
  .home-guide { top: calc(var(--home-waterline) - 42px); }
  .home-actions { top: calc(var(--home-waterline) + 13px); gap: 8px; }
  .is-home .hero-party, .is-home .home-start { min-height: 54px; }
}
.reduce-motion .home-world *, .low-power .home-world * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .home-world * { animation: none !important; }
}

[data-tier="0"] { --tier-light: #98a9bd; }
[data-tier="10"] { --tier-light: #c6dadd; }
[data-tier="15"] { --tier-light: #f2d68b; }
[data-tier="30"] { --tier-light: #90dfb8; }
[data-tier="60"] { --tier-light: #8fcfed; }
[data-tier="85"] { --tier-light: #cfb7ff; }
[data-tier="100"] { --tier-light: #ffad76; }

.full-dive:not(.party-dive) .stage-question { top: clamp(100px, 22%, 195px); }
.full-dive.theme-dive .stage-question { background: #111727e8; }
@media (min-width: 720px) {
  .full-dive.theme-dive .stage-question { left: calc(50% - 24px); padding: 1.4rem 1.6rem; }
}
@media (max-width: 719px) and (min-height: 561px) {
  .full-dive:not(.party-dive) .stage-back { top: calc(max(8px, env(safe-area-inset-top)) + 74px); }
}
@media (max-width: 360px), (max-height: 560px) {
  .full-dive:not(.party-dive) .stage-chip { padding: .25rem .5rem; }
  .full-dive:not(.party-dive) .stage-chip strong {
    display: block;
    font-size: 1.125rem;
    line-height: 1.05;
    white-space: nowrap;
  }
}
@media (max-height: 560px) {
  .full-dive:not(.party-dive) .stage-back {
    top: calc(max(8px, env(safe-area-inset-top)) + 52px);
    min-height: 32px;
    font-size: 1rem;
    line-height: 1;
  }
  .full-dive:not(.party-dive) .stage-question {
    top: calc(max(8px, env(safe-area-inset-top)) + 88px);
    max-height: max(3rem, calc(var(--game-height, 100dvh) - 218px));
    overflow: auto;
    padding: .6rem .8rem;
  }
  .full-dive:not(.party-dive) .stage-question .question { font-size: clamp(1rem, 4vh, 1.5rem); }
  .full-dive:not(.party-dive) .answer-dock { bottom: 6px; }
}
.full-dive:not(.party-dive) .exit-prompt { visibility: hidden; }
.full-dive.travel-sequence .exit-prompt { animation: keep-prompt var(--answer-beat) step-end both; }
.full-dive.travel-sequence .dive-stage.descent {
  animation-duration: var(--route-travel);
  animation-delay: var(--answer-beat);
}
.full-dive.travel-sequence:not(.theme-dive) .descent .diver-motion {
  animation-duration: var(--route-travel);
  animation-delay: var(--answer-beat);
}
:where(.full-dive.theme-dive).travel-sequence .descent .diver-motion {
  animation: ocean-reveal-approach var(--swim-approach) var(--swim-across-ease) var(--swim-start) both,
    ocean-reveal-rise var(--swim-approach) var(--swim-rise-ease) var(--swim-start) both,
    ocean-reveal-return var(--swim-return) var(--swim-return-ease) calc(var(--answer-beat) + var(--route-travel)) forwards;
}
.full-dive.theme-dive.travel-sequence { --dive-ease: cubic-bezier(.65, 0, .35, 1); }
.full-dive.theme-dive.travel-sequence[data-score-tier="10"] { --dive-ease: cubic-bezier(.37, 0, .63, 1); }
@supports (animation-timing-function: linear(0, 1)) {
  .full-dive.theme-dive.travel-sequence {
    --dive-ease: linear(0, .001, .0078, .0264, .0625, .1221, .2109, .335, .5, .665, .7891, .8779, .9375, .9736, .9922, .999, 1);
  }
  .full-dive.theme-dive.travel-sequence[data-score-tier="10"] {
    --dive-ease: linear(0, .0096, .0381, .0843, .1464, .2222, .3087, .4025, .5, .5975, .6913, .7778, .8536, .9157, .9619, .9904, 1);
  }
}
.full-dive.theme-dive.travel-sequence .dive-stage.descent {
  animation-timing-function: var(--dive-ease);
}
.full-dive.travel-sequence .rarity-plane { animation-delay: var(--answer-beat); }
.full-dive.travel-sequence .reveal-bubbles b { animation-delay: calc(var(--swim-start) + var(--bubble-delay)); }
.full-dive:is(.theme-words, .theme-movies, .theme-sports, .theme-world) .diver-motion {
  width: clamp(52px, 11vw, 86px);
}
.answer-beacon {
  position: absolute;
  top: 55%;
  left: 50%;
  z-index: 3;
  max-width: min(84%, 400px);
  padding: .28rem .85rem;
  border: 1px solid #81d1ea;
  background: #091426ed;
  color: #a9eafb;
  box-shadow: 0 0 20px #53d9f459;
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%);
  animation: answer-beacon var(--answer-beat) ease-out both;
}
.theme-dive .answer-beacon { left: max(15%, 105px); }
.scene-outcome {
  position: absolute;
  top: clamp(82px, 16%, 150px);
  left: 50%;
  z-index: 2;
  width: min(480px, calc(100% - 2.25rem));
  padding: clamp(.75rem, 4vh, 1.6rem) .8rem;
  transform: translateX(-50%);
  background: #0a1020df;
  border: 1px solid color-mix(in srgb, var(--tier-light), #0b1422 43%);
  box-shadow: inset 0 0 0 3px #131927, 0 9px 36px #03091672;
  text-align: center;
}
.travel-sequence .scene-outcome,
.travel-sequence .stage-next {
  animation: settle-outcome .24s calc(var(--answer-beat) + var(--route-travel)) ease-out both;
}
.outcome-beacon {
  display: block;
  width: 15px;
  height: 15px;
  margin: .35rem auto .8rem;
  color: var(--tier-light);
  background: currentColor;
  box-shadow: 0 0 9px currentColor, 0 0 25px currentColor;
  clip-path: polygon(33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%, 0 33%, 33% 33%);
}
.outcome-tier {
  color: var(--tier-light);
  font-size: clamp(1.2rem, 5vw, 1.85rem);
  text-transform: uppercase;
  letter-spacing: .15em;
}
.outcome-answer { margin: .35rem 0; font-size: clamp(1rem, 4.1vw, 1.4rem); overflow-wrap: anywhere; }
.outcome-distance { color: #b4c7da; font-size: .9rem; }
.outcome-distance strong { color: var(--tier-light); font-weight: 400; }
.ocean-outcome {
  --ocean-reveal-top: clamp(68px, 20.5%, 190px);
  --ocean-cta-space: 178px;
  top: var(--ocean-reveal-top);
  width: min(580px, calc(100% - 2rem));
  max-height: calc(100% - var(--ocean-reveal-top) - var(--ocean-cta-space));
  overflow: auto;
  padding: .5rem .7rem .85rem;
  background: radial-gradient(ellipse at center, #0616269c 0%, #06162635 48%, transparent 73%);
  border: 0;
  box-shadow: none;
}
.ocean-outcome[data-tier="30"] { --tier-light: #89e6fb; }
.full-dive .ocean-outcome ~ .answer-dock { bottom: clamp(12px, 16%, 113px); }
.ocean-outcome ~ .answer-dock .stage-next { min-width: min(100%, 178px); min-height: 55px; padding: .65rem 1.15rem; }
.outcome-emblem {
  display: block;
  width: clamp(48px, calc(12.7vmin + 16px), 88px);
  aspect-ratio: 1;
  margin: 0 auto .35rem;
  background: url("/reveal-emblems.png") var(--emblem-x) center / 700% 100% no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tier-light) 60%, transparent));
}
.ocean-outcome[data-tier="0"] .outcome-emblem { width: clamp(30px, 6vmin, 46px); filter: none; }
.ocean-outcome .outcome-tier {
  font-size: clamp(1.65rem, calc(4.85vmin + 24px), 60px);
  line-height: 1.1;
  text-shadow: 0 2px #071526, 0 0 18px color-mix(in srgb, var(--tier-light) 55%, transparent);
}
.ocean-outcome .outcome-answer {
  margin: .12rem 0 .22rem;
  color: #f5f7ff;
  font-size: clamp(1.12rem, calc(2.5vmin + 16px), 32px);
  line-height: 1.13;
  text-shadow: 0 2px #071526;
}
.ocean-outcome .outcome-distance {
  color: #e0eaf5;
  font-size: clamp(1.12rem, calc(2.8vmin + 18px), 38px);
  line-height: 1.1;
}
.ocean-outcome .outcome-note {
  margin: .22rem 0 0;
  color: #b9cadf;
  font-size: clamp(.9rem, calc(1.4vmin + 14px), 24px);
  letter-spacing: .07em;
  line-height: 1.1;
  text-shadow: 0 1px #071526;
}
@media (max-width: 600px) {
  .ocean-outcome { --ocean-reveal-top: clamp(68px, 23.5%, 208px); }
  .outcome-emblem { margin-bottom: .14rem; }
}
@media (max-height: 600px) {
  .ocean-outcome { --ocean-reveal-top: clamp(65px, 18%, 108px); --ocean-cta-space: 76px; }
  .full-dive .ocean-outcome ~ .answer-dock { bottom: max(10px, env(safe-area-inset-bottom)); }
}
.keyboard-open .scene-outcome.ocean-outcome {
  --ocean-reveal-top: 62px;
  --ocean-cta-space: 68px;
  top: var(--ocean-reveal-top);
}
.low-power .outcome-emblem { filter: none; }
@keyframes keep-prompt { from { visibility: visible; } to { visibility: hidden; } }
@keyframes answer-beacon {
  0% { opacity: 0; translate: 0 5px; }
  20%, 85% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes settle-outcome {
  from { opacity: 0; visibility: hidden; translate: 0 7px; }
  25% { visibility: visible; }
  to { opacity: 1; visibility: visible; translate: 0 0; }
}
.keyboard-open .full-dive:not(.party-dive) .stage-chip { padding: .25rem .5rem; }
.keyboard-open .full-dive:not(.party-dive) .stage-chip strong {
  display: block;
  font-size: 1.125rem;
  line-height: 1.05;
  white-space: nowrap;
}
.keyboard-open .full-dive:not(.party-dive) .stage-back {
  top: calc(max(8px, env(safe-area-inset-top)) + 52px);
  line-height: 1;
}
.keyboard-open .full-dive:not(.party-dive) .stage-question {
  top: calc(max(8px, env(safe-area-inset-top)) + 88px);
  max-height: max(3rem, calc(var(--game-height, 100dvh) - 218px));
  overflow: auto;
}
.keyboard-open .scene-outcome { top: 76px; }
.reduce-motion .travel-sequence :is(.dive-stage.descent, .descent .diver-motion, .descent .depth-track, .exit-prompt, .scene-outcome, .stage-next, .answer-beacon, .rarity-plane, .reveal-bubbles b),
.low-power .travel-sequence :is(.dive-stage.descent, .descent .diver-motion, .descent .depth-track, .exit-prompt, .scene-outcome, .stage-next, .answer-beacon, .rarity-plane, .reveal-bubbles b) { animation: none; }
.reduce-motion .travel-sequence :is(.answer-beacon, .reveal-bubbles),
.low-power .travel-sequence :is(.answer-beacon, .reveal-bubbles) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .travel-sequence :is(.dive-stage.descent, .descent .diver-motion, .descent .depth-track, .exit-prompt, .scene-outcome, .stage-next, .answer-beacon, .rarity-plane, .reveal-bubbles b) { animation: none; }
  .travel-sequence :is(.answer-beacon, .reveal-bubbles) { display: none; }
}

body.is-recap:not(.in-dive)::before {
  background: linear-gradient(#0b1324cc, #0a1626db 68%, #0b101bf5), url("/home-surface.svg") center / 100% 100% no-repeat;
}
.recap-ascent {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  --ascent-map: url("/dive-map.svg");
  background-image: linear-gradient(#0b132475, #0a1626ba 68%, #0b101bf5), var(--ascent-map);
  background-size: 100% 100%, 100% 400%;
  background-position: center, center var(--ascent-depth);
  animation: recap-ascent var(--ascent-duration) cubic-bezier(.215, .61, .355, 1) both;
}
@media (orientation: portrait) {
  .recap-ascent { --ascent-map: url("/dive-map-portrait.svg"); }
}
@media (prefers-reduced-motion: reduce) {
  .recap-ascent { display: none; }
}
@keyframes recap-ascent {
  0% { background-position: center, center var(--ascent-depth); }
  80% { opacity: 1; }
  100% { background-position: center, center top; opacity: 0; }
}
.recap { width: min(100%, 498px); margin-inline: auto; display: grid; gap: 1rem; }
.is-recap-ocean .top { display: none; }
.is-recap-ocean main.scene-menu { padding: 24px 20px max(20px, env(safe-area-inset-bottom)); }
.recap-ocean { width: min(100%, 448px); gap: .9rem; }
.recap-heading { padding: .2rem .22rem 0; }
.recap-heading .kicker { color: #b1cbdf; font-size: .71rem; }
.recap-ocean .recap-heading { padding: 0; }
.recap-ocean .recap-heading .kicker { min-height: 29px; display: flex; align-items: center; justify-content: space-between; gap: .55rem; }
.recap-ocean .recap-heading .kicker span { text-align: right; }
.recap-wordmark { color: #ecf4ff; text-decoration: none; font-size: 1.55rem; line-height: 1; text-shadow: -1px 1px #84e2f6, 2px 2px #a43b61; }
.recap-score { display: flex; align-items: baseline; gap: .65rem; }
.recap-score .score { margin: 0; line-height: .98; color: #ecf4f9; }
.recap-score .score span { font-size: .92rem; color: #94aabf; }
.recap-score p { color: var(--mint); margin: 0; }
.recap-score .creature { margin-left: auto; width: 48px; height: 48px; flex: 0 0 48px; align-self: center; }
.recap-ocean .recap-score { margin-top: .8rem; min-height: 74px; gap: .4rem; flex-wrap: wrap; }
.recap-ocean .recap-score .score { font-size: clamp(3.1rem, 12vw, 4.3rem); }
.recap-ocean .recap-score p { white-space: nowrap; }
.recap-distribution { padding: .35rem .2rem; }
.recap-ocean .recap-distribution { padding: .22rem 0 0; }
.recap-distribution h2 { font-size: .88rem; color: #acc5d6; letter-spacing: .16em; text-transform: uppercase; }
.recap-distribution p { color: #a2d6e8; font-size: .78rem; margin: .35rem 0 0; }
.score-curve { position: relative; margin-top: .3rem; padding-bottom: .75rem; }
.score-curve-track { position: relative; }
.score-curve svg { display: block; width: 100%; height: 110px; overflow: visible; }
.score-curve-fill { fill: #67c7ed22; }
.score-curve-line { fill: none; stroke: #83d6eb; stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.score-curve-marker { stroke: #ec8aa8; stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.score-curve-dot { position: absolute; left: var(--score-marker-x); top: var(--score-marker-y); width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); background: #ffa5c4; }
.score-axis { display: flex; justify-content: space-between; color: #afc2d5; font-size: .64rem; }
.score-you { position: absolute; bottom: 0; left: clamp(.7rem, var(--score-marker-x), calc(100% - .7rem)); transform: translateX(-50%); color: #ffa5c4; font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; }
.recap .dive-log { background: transparent; padding: .3rem .24rem .5rem; }
.recap .dive-log .metrics { font-size: .68rem; color: #adc5d7; letter-spacing: .14em; }
.recap .dive-graph {
  grid-template-columns: 36px repeat(7, minmax(0, 1fr));
  height: clamp(138px, 26vh, 220px);
  margin-top: .42rem;
  background: none;
}
.recap .dive-column {
  --plot-top: 1.25rem;
  --plot-height: calc(100% - var(--plot-top) - .55rem);
  background: repeating-linear-gradient(180deg, #8bbad13a 0 1px, transparent 1px 25%)
    0 var(--plot-top) / 100% var(--plot-height) no-repeat;
}
.recap .dive-column b {
  position: absolute;
  top: var(--plot-top);
  left: 50%;
  height: calc(var(--plot-height) * var(--drop));
  max-height: var(--plot-height);
  background: linear-gradient(transparent, var(--tier-light));
}
.recap .dive-column i { background: var(--tier-light); box-shadow: 0 0 9px var(--tier-light); }
.recap-ocean .dive-log { padding-inline: 0; }
.recap-ocean .dive-graph { height: clamp(168px, 39vh, 280px); }
.recap-ocean .dive-column { --plot-height: calc(100% - var(--plot-top) - 1.35rem); }
.recap-ocean button.dive-column { display: block; min-width: 0; padding: 0; align-content: start; border: 0; box-shadow: none; }
.recap-ocean .dive-column > span { position: absolute; inset-inline: 0; bottom: .05rem; line-height: 1; }
.recap-ocean button.dive-column:is(:hover, :focus-visible) { color: #f0faff; background-color: #75d5ee17; }
.recap-ocean button.dive-column:focus-visible { outline: 2px solid #8cddf2; outline-offset: -2px; }
.log-scale { display: flex; flex-direction: column; justify-content: space-between; margin-top: .88rem; color: #aabfd4; font-size: .61rem; }
.recap-ocean .log-scale { margin-bottom: .98rem; }
.recap-actions { text-align: left; }
.recap-actions .score-band { margin-top: 0; }
.recap-bearing h2, .recap-ocean .recap-catch h2 { color: #bed4e6; font-size: .98rem; letter-spacing: .14em; text-transform: uppercase; }
.recap-bearing ul { padding: 0; margin: .35rem 0 0; list-style: none; }
.recap-bearing li { display: grid; grid-template-columns: 4.7rem minmax(0, 1fr); gap: .4rem; padding: .35rem .5rem; border: 1px solid transparent; color: #bfcedd; }
.recap-bearing li[aria-current="true"] { border-color: #7bd5eb; color: #eafaff; background: #123249b8; }
.recap-bearing li > span { color: #b7ddec; font-size: .85rem; }
.recap-bearing li p { margin: .1rem 0 0; color: #a9bdce; font-size: .77rem; }
.recap-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.recap-navigation button { min-height: 44px; padding: .42rem; }
.recap-navigation .recap-party-link { color: #ffc3d9; border-color: #925a73; }
.recap-ocean .recap-catch { background: transparent; border: 0; padding: 0; }
.recap-ocean .review { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--edge); scroll-margin-top: 1rem; }
.recap-ocean .review:last-of-type { border-bottom: 1px solid var(--edge); }
.catch-summary { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto .7rem; align-items: center; gap: .5rem; min-height: 64px; padding: .3rem .28rem; list-style: none; }
.catch-summary::-webkit-details-marker { display: none; }
.catch-summary:focus-visible { outline: 2px solid #8cddf2; outline-offset: -2px; }
.catch-number, .catch-toggle { color: #b4c8d9; }
.catch-content { display: grid; min-width: 0; line-height: 1.15; }
.catch-prompt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .82rem; line-height: 1.13; font-weight: 400; color: #b9cbdd; }
.review[open] .catch-prompt { white-space: normal; }
.catch-answer { display: block; color: #ecf5fe; font-size: 1rem; overflow-wrap: anywhere; }
.catch-picks { color: #a5dbeb; font-size: .78rem; }
.catch-score { color: var(--tier-light); }
.catch-toggle::before { content: "+"; }
.review[open] .catch-toggle::before { content: "−"; }
.recap-ocean .review[open] > summary { background: #143147af; }
.recap-ocean .review-body { padding: .2rem .6rem .65rem; }
@media (max-height: 500px) {
  .scene-outcome { padding-block: .55rem; }
  .outcome-beacon { margin-block: .15rem .35rem; }
  .outcome-emblem { margin-bottom: .25rem; }
  .ocean-outcome .outcome-answer { margin-block: .3rem; }
  .ocean-outcome .outcome-note { margin-top: .4rem; }
}

.replay-practice { border: 1px solid var(--edge); background: #111e30; padding: .65rem .8rem; margin-block: .8rem; }
.unlimited-heading { text-align: center; margin: 0 auto 1.1rem; }
.unlimited-heading .creature { display: block; width: 56px; margin: 0 auto .45rem; }
.unlimited-heading .kicker { color: #ec91ad; }
.unlimited-heading h2, .unlimited-heading p { margin: .24rem auto; }
.replay-practice h3, .replay-practice p { margin: .15rem 0 .45rem; }
.replay-practice .actions { margin: .35rem 0 .1rem; }

.archive-find { display:flex; flex-wrap:wrap; align-items:end; gap:.55rem; margin-block:1rem; }
.archive-find label { display:grid; flex:1; min-width:11rem; gap:.3rem; }