:root {
  --ink: #102e3c;
  --muted: #5d7480;
  --paper: #f6f1e6;
  --paper-deep: #e7dcc4;
  --ice: #dceef2;
  --navy: #0f3545;
  --blue: #24677c;
  --orange: #d76135;
  --gold: #efb24d;
  --green: #417b68;
  --white: #fffdf7;
  --shadow: 0 20px 60px rgba(9, 35, 48, .2);
}

* { box-sizing: border-box; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html { min-height: 100%; background: var(--navy); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Aptos", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 80% 5%, rgba(240, 181, 80, .18), transparent 24rem),
    linear-gradient(160deg, #dcecf0 0%, #eff2e9 45%, #d1e3e8 100%);
}

button, input { font: inherit; }
button { cursor: pointer; }
select { font: inherit; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .75rem 1rem;
  color: white;
  background: var(--navy);
  border-radius: .5rem;
}
.skip-link:focus { top: 1rem; }

.screen { min-height: 100vh; }

.welcome-screen {
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    linear-gradient(90deg, rgba(7, 31, 43, .82), rgba(7, 31, 43, .2)),
    url("../content/Antarctic Expedition master map.jpg") center / cover;
}

.welcome-card {
  width: min(39rem, 100%);
  margin-right: min(42vw, 30rem);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 1.5rem;
  background: rgba(255, 253, 247, .94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.eyebrow {
  margin: 0 0 .55rem;
  color: var(--orange);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.05;
}

h1 { font-size: clamp(2rem, 5vw, 4.4rem); }
h2 { font-size: clamp(1.45rem, 2.3vw, 2rem); }

.welcome-copy {
  max-width: 34rem;
  margin: 1.2rem 0 2rem;
  color: #385563;
  font-size: 1.12rem;
  line-height: 1.6;
}

.start-form label:first-child {
  display: block;
  margin-bottom: .55rem;
  font-weight: 750;
}

.name-row { display: flex; gap: .65rem; }

.difficulty-setting {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr);
  align-items: center;
  gap: .8rem;
  margin-top: .9rem;
  color: #385563;
  font-weight: 750;
}

.difficulty-setting select {
  min-width: 0;
  padding: .72rem .8rem;
  border: 2px solid #b8c9cc;
  border-radius: .7rem;
  color: var(--navy);
  background: white;
}

input[type="text"], input:not([type]) {
  min-width: 0;
  flex: 1;
  padding: .9rem 1rem;
  border: 2px solid #b8c9cc;
  border-radius: .75rem;
  background: white;
  color: var(--ink);
}

input:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.sound-setting {
  display: flex;
  gap: .55rem;
  align-items: center;
  margin-top: 1rem;
  color: var(--muted);
  font-size: .92rem;
}

.primary-button, .secondary-button, .text-button {
  border-radius: .75rem;
  font-weight: 760;
}

.primary-button {
  padding: .85rem 1.15rem;
  border: 2px solid var(--orange);
  color: white;
  background: var(--orange);
  box-shadow: 0 7px 18px rgba(215, 97, 53, .24);
}
.primary-button:hover { background: #b94b25; border-color: #b94b25; }

.secondary-button {
  padding: .72rem 1rem;
  border: 1px solid #9eb8be;
  color: var(--navy);
  background: rgba(255, 255, 255, .88);
}
.secondary-button:hover { border-color: var(--orange); }

.text-button {
  padding: .65rem .35rem;
  border: 0;
  color: var(--blue);
  background: transparent;
}
.text-button:hover { text-decoration: underline; }

.continue-area {
  align-items: center;
  gap: .8rem;
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid #d8d4c8;
}
.continue-area:not([hidden]) { display: flex; }

.tester-entry {
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid #d8d4c8;
}

.tester-entry p {
  margin: .65rem 0 0;
  color: #385563;
  font-size: .9rem;
  line-height: 1.45;
}

.tester-entry .secondary-button { min-height: 44px; }

.test-mode-badge:not([hidden]) {
  display: inline-block;
  margin: .75rem 0 0;
  padding: .3rem .65rem;
  border-radius: 999px;
  color: var(--navy);
  background: #fff0c7;
  font-size: .8rem;
  font-weight: 800;
}

.game-screen { padding: clamp(1rem, 2.5vw, 2.25rem); }

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  width: min(96rem, 100%);
  margin: 0 auto 1.25rem;
}

.game-header h1 { font-size: clamp(1.8rem, 3.5vw, 3rem); }
.header-actions { display: flex; align-items: center; gap: .8rem; }

.map-layout, .scene-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.1rem;
  width: min(96rem, 100%);
  margin: auto;
}

.map-viewport, .scene-viewport {
  position: relative;
  overflow: hidden;
  border: .5rem solid #f8f1df;
  border-radius: 1.15rem;
  background: #b7d5db;
  box-shadow: var(--shadow);
  isolation: isolate;
}

.map-viewport { aspect-ratio: 16 / 8.7; }
.scene-viewport { aspect-ratio: 16 / 8.7; }

.map-viewport::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -40%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.16) 49%, transparent 56%);
  animation: map-glint 9s linear infinite;
}

.map-viewport > img, .scene-viewport > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.player-marker {
  position: absolute;
  z-index: 8;
  left: 22%;
  top: 61%;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 3.55rem;
  filter: drop-shadow(0 5px 5px rgba(6, 30, 41, .48));
  transform: translate(-50%, -50%);
  transition: left .12s linear, top .12s linear;
  pointer-events: none;
}

.ship-marker {
  --facing: 1;
  width: 5.2rem;
  height: 3.4rem;
  filter: drop-shadow(0 .4rem .35rem rgba(6, 30, 41, .5));
}

.ship-marker.is-facing-left { --facing: -1; }

.map-ship-sprite {
  position: relative;
  display: block;
  width: 4.7rem;
  height: 2.8rem;
  transform-origin: 50% 75%;
  animation: map-ship-rock 2.4s ease-in-out infinite;
}

.ship-hull {
  position: absolute;
  z-index: 3;
  left: .28rem;
  top: 1.38rem;
  width: 4.1rem;
  height: 1.08rem;
  border: .14rem solid #102e3c;
  border-radius: .25rem .78rem 1.25rem 1rem;
  background: linear-gradient(#e9ece7 0 42%, #b73f2c 43% 100%);
  clip-path: polygon(0 0, 100% 0, 88% 88%, 22% 100%, 7% 72%);
}

.ship-deck {
  position: absolute;
  z-index: 2;
  left: 1rem;
  top: .88rem;
  width: 2.55rem;
  height: .68rem;
  border: .12rem solid #102e3c;
  border-radius: .2rem .35rem 0 0;
  background: #f4f0dc;
}

.ship-cabin {
  position: absolute;
  z-index: 3;
  left: 1.85rem;
  top: .42rem;
  width: 1.3rem;
  height: .65rem;
  border: .12rem solid #102e3c;
  border-radius: .18rem .18rem 0 0;
  background: linear-gradient(90deg, #8cc2cf 0 26%, #f4f0dc 27% 36%, #8cc2cf 37% 63%, #f4f0dc 64% 73%, #8cc2cf 74%);
}

.ship-mast {
  position: absolute;
  z-index: 1;
  left: 2.55rem;
  top: .03rem;
  width: .11rem;
  height: 1.18rem;
  background: #102e3c;
}

.ship-mast::after {
  content: "";
  position: absolute;
  left: .1rem;
  top: .08rem;
  border-top: .34rem solid transparent;
  border-bottom: .34rem solid transparent;
  border-left: .78rem solid #efb24d;
}

.ship-wake {
  position: absolute;
  left: -.35rem;
  top: 2.3rem;
  width: 4.8rem;
  height: .55rem;
  opacity: .42;
  background: repeating-radial-gradient(ellipse at center, rgba(255,255,255,.95) 0 .13rem, transparent .15rem .42rem);
  transition: opacity .2s;
}

.ship-marker.is-walking .ship-wake { opacity: 1; animation: wake-flow .4s linear infinite; }

.explorer-sprite {
  position: relative;
  display: block;
  width: 2.25rem;
  height: 3.25rem;
  transform-origin: 50% 88%;
  animation: explorer-idle 1.8s ease-in-out infinite;
}

.explorer-head {
  position: absolute;
  z-index: 3;
  left: .58rem;
  top: .12rem;
  width: 1.12rem;
  height: 1.12rem;
  border: .18rem solid #133947;
  border-radius: 50%;
  background: #f0ba8e;
}

.explorer-head::before {
  content: "";
  position: absolute;
  left: -.22rem;
  top: -.28rem;
  width: 1.2rem;
  height: .62rem;
  border-radius: .7rem .7rem .2rem .2rem;
  background: #e85f38;
}

.explorer-body {
  position: absolute;
  z-index: 2;
  left: .42rem;
  top: 1.05rem;
  width: 1.45rem;
  height: 1.45rem;
  border: .17rem solid white;
  border-radius: .5rem .5rem .32rem .32rem;
  background: #e85f38;
}

.explorer-body::before {
  content: "";
  position: absolute;
  left: -.46rem;
  top: .2rem;
  width: .55rem;
  height: 1rem;
  border-radius: .3rem;
  background: #17495b;
}

.explorer-legs {
  position: absolute;
  left: .57rem;
  top: 2.35rem;
  width: .42rem;
  height: .84rem;
  border-radius: .2rem;
  background: #173b4a;
  box-shadow: .73rem 0 #173b4a;
}

.explorer-marker.is-facing-left .explorer-sprite { transform: scaleX(-1); }
.explorer-marker.is-walking .explorer-sprite { animation: explorer-walk .28s ease-in-out infinite alternate; }
.explorer-marker.is-walking .explorer-legs { animation: explorer-legs .28s ease-in-out infinite alternate; }

.map-stop {
  position: absolute;
  z-index: 4;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  transform: translate(-50%, -50%);
}

.stop-dot {
  width: 1.35rem;
  height: 1.35rem;
  border: 3px solid white;
  border-radius: 50%;
  background: #6f7d7f;
  box-shadow: 0 2px 9px rgba(10, 28, 34, .5);
}

.stop-label {
  display: none;
  margin-left: .35rem;
  padding: .25rem .45rem;
  border-radius: .4rem;
  background: rgba(255, 253, 247, .94);
  box-shadow: 0 2px 8px rgba(10, 28, 34, .25);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}

.map-stop:hover .stop-label, .map-stop:focus-visible .stop-label, .map-stop.is-unlocked .stop-label { display: inline-block; }
.map-stop.is-unlocked .stop-dot { background: var(--gold); }
.map-stop.is-unlocked .stop-dot, .activity-point:not(.is-complete) .activity-number { animation: checkpoint-pulse 1.8s ease-in-out infinite; }
.map-stop.is-complete .stop-dot { background: var(--green); }

.mission-panel {
  align-self: start;
  padding: 1.35rem;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 1rem;
  background: rgba(255, 253, 247, .92);
  box-shadow: 0 12px 34px rgba(15, 53, 69, .12);
}

.mission-panel p { line-height: 1.5; }
.phase-progress { margin: 1.4rem 0; }
.phase-progress > div:first-child { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.progress-track { height: .65rem; margin-top: .5rem; overflow: hidden; border-radius: 2rem; background: #d4e1e2; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--gold)); transition: width .25s; }
.status-message { min-height: 4.8rem; margin-bottom: 0; padding-top: 1rem; border-top: 1px solid #d8ddd9; color: var(--muted); font-size: .9rem; }

.map-controls {
  display: grid;
  justify-items: center;
  gap: .3rem;
  margin-top: 1rem;
}
.map-controls div { display: flex; gap: .3rem; }
.map-controls button {
  min-width: 3rem;
  min-height: 2.8rem;
  border: 1px solid #91abb1;
  border-radius: .65rem;
  color: var(--navy);
  background: rgba(255, 255, 255, .9);
  font-weight: 850;
}
.map-controls .interact-button { min-width: 5.5rem; color: white; background: var(--blue); }

.scene-play-area { min-width: 0; }
#sceneScreen .activity-point { min-width: 44px; min-height: 44px; }
.scene-viewport > img {
  object-position: center;
  transform: scale(1.015);
  animation: scene-breathe 12s ease-in-out infinite alternate;
}

.activity-point {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: .45rem;
  max-width: 11rem;
  padding: .45rem .65rem .45rem .45rem;
  border: 2px solid white;
  border-radius: 2rem;
  color: white;
  background: rgba(15, 53, 69, .92);
  box-shadow: 0 5px 16px rgba(6, 29, 39, .42);
  font-size: .8rem;
  font-weight: 800;
  text-align: left;
  transform: translate(-50%, -50%);
}
.activity-point:hover { background: var(--orange); transform: translate(-50%, -50%) scale(1.04); }
.activity-point.is-near { background: var(--orange); box-shadow: 0 0 0 .4rem rgba(239,178,77,.42), 0 5px 16px rgba(6, 29, 39, .42); }
.activity-point.is-complete { background: var(--green); }
.activity-number { display: grid; place-items: center; flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; color: var(--navy); background: var(--gold); }
.activity-point.is-complete .activity-number::before { content: "✓"; }
.activity-point.is-complete .activity-number { font-size: 0; background: white; }
.activity-point.is-complete .activity-number::before { font-size: .9rem; }

.full-width { width: 100%; margin-top: 1rem; }
.activity-checklist { margin: 1rem 0 0; padding: 0; list-style: none; }
.activity-checklist li { position: relative; padding: .65rem 0 .65rem 1.8rem; border-top: 1px solid #d8ddd9; color: var(--muted); }
.activity-checklist li::before { content: "○"; position: absolute; left: .2rem; font-weight: 900; }
.activity-checklist li.is-complete { color: var(--green); font-weight: 750; }
.activity-checklist li.is-complete::before { content: "✓"; }

.southern-seas-viewport {
  aspect-ratio: 2954 / 1440;
  background: #648495;
}

.southern-seas-viewport > img {
  object-position: center;
  transform: scale(1.006);
  animation: southern-seas-swell 9s ease-in-out infinite alternate;
}

.southern-seas-viewport::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 38%, rgba(218,245,249,.12) 48%, transparent 58%);
  animation: deck-light 8s linear infinite;
}

.seas-activity-point {
  z-index: 5;
  border-color: rgba(255,255,255,.9);
  color: #123b49;
  background: rgba(253,251,241,.72);
  box-shadow: 0 .25rem .7rem rgba(6,29,39,.28);
}

.seas-activity-point .activity-number {
  background: #f2bd59;
}

.seas-activity-point:hover,
.seas-activity-point:focus-visible {
  color: white;
  background: rgba(217,98,56,.92);
  box-shadow: 0 0 0 .35rem rgba(255,242,199,.35), 0 5px 16px rgba(6,29,39,.5);
}

.falklands-viewport {
  aspect-ratio: 1815 / 866;
  background: #9ab9a7;
}

.falklands-viewport > img {
  object-fit: contain;
  object-position: center;
  transform: scale(1.002);
  animation: falklands-map-breathe 12s ease-in-out infinite alternate;
}

.falklands-viewport::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 33%, rgba(255,255,232,.13) 46%, transparent 59%);
  animation: falklands-cloud-light 10s linear infinite;
}

.falklands-activity-point {
  z-index: 5;
  max-width: 9.5rem;
  border-color: rgba(255,255,255,.88);
  color: #153d3e;
  background: rgba(250,248,228,.60);
  min-width: 44px;
  min-height: 44px;
  box-shadow: 0 .22rem .62rem rgba(29,56,45,.3);
  backdrop-filter: blur(2px);
}

.falklands-activity-point.is-complete { color: #fff9e8; background: rgba(24,78,67,.76); }
.falklands-layout .scene-play-area { position: relative; align-self: start; container-type: inline-size; container-name: falklands-map; }
.falklands-quiz-launch-row { display: flex; justify-content: flex-end; padding: .8rem .4rem 0; }
.falklands-map-stage { position: relative; }
.falklands-quiz-launch { display: inline-flex; align-items: center; gap: .65rem; min-height: 48px; padding: .6rem 1.1rem; border: 2px solid #f4c666; border-radius: 2rem; color: #fff9ea; background: #245d62; box-shadow: 0 3px 9px #17374440; font: 700 1rem/1.3 system-ui,sans-serif; cursor: pointer; }
.falklands-quiz-launch span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #f4c666; color: #173744; }
.falklands-quiz-launch.is-complete { border-color: #a8dcc6; }
.falklands-quiz { color: #183e47; padding: clamp(.5rem,2vw,1.2rem); border: 1px solid #bed0cb; border-radius: 1rem; background: #f9f6ed; overflow-wrap: anywhere; text-align: left; }
.falklands-quiz-progress { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-bottom: .6rem; border-bottom: 1px solid #c8d6cf; font-weight: 700; }
.falklands-quiz h3 { font-size: clamp(1.25rem,3vw,1.7rem); line-height: 1.3; margin: .75rem 0; }
.falklands-quiz-choices { display: grid; gap: .65rem; margin-top: 1rem; }
.falklands-quiz-choice { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 52px; padding: .8rem; border: 2px solid #b8caca; border-radius: .7rem; background: white; color: #183e47; font: 600 1rem/1.45 system-ui,sans-serif; text-align: left; cursor: pointer; }
.falklands-quiz-letter { display: grid; place-items: center; flex: 0 0 1.8rem; height: 1.8rem; border-radius: 50%; background: #eaf0ec; font-weight: 800; }
.falklands-quiz-choice[aria-pressed="true"] { border-color: #276b7c; background: #e3f1f2; }
.falklands-quiz-choice.is-correct { border-color: #397b5a; background: #e2f3e6; }
.falklands-quiz-choice.is-wrong { border-color: #b16c4e; background: #f9e9df; }
.falklands-quiz-choice:disabled { opacity: 1; cursor: default; }
.falklands-quiz-choice strong { display: block; font-size: .9rem; }
.falklands-quiz-feedback { min-height: 1.5em; }
.falklands-quiz-note { padding: 1rem; margin-top: .8rem; border-left: 4px solid #dfb052; border-radius: .4rem; background: #fff; }
.falklands-quiz-note h4 { margin: 0; font-size: 1.2rem; }
.falklands-quiz-note figure { margin: 1rem 0; }
.falklands-quiz-note img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; border-radius: .6rem; background: #edf3ee; }
.falklands-quiz-note figcaption { margin-top: .4rem; font-size: .9rem; }
.falklands-quiz-note dl { display: grid; gap: .7rem; }
.falklands-quiz-note dt { font-weight: 800; }
.falklands-quiz-note dd { margin: .1rem 0 0; }
.falklands-quiz-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.falklands-quiz-actions button, .falklands-quiz-result button { min-height: 48px; flex: 1 1 160px; }
.falklands-quiz-final-score { color: #245d62; font: 800 2.5rem/1.2 system-ui,sans-serif; }
.falklands-quiz :focus-visible, .falklands-quiz-launch:focus-visible { outline: 3px solid #b46a20; outline-offset: 3px; }
@media (max-width: 620px) { .activity-dialog.falklands-quiz-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; } }
.falklands-location-labels { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.falklands-location-label { position: absolute; right: 2%; width: 20%; display: grid; gap: .12rem; color: #fff9e9; text-align: left; text-shadow: 0 1px 3px #173c50, 0 0 8px rgba(19,48,65,.75); }
.volunteer-point-label { top: 25%; }
.sea-lion-label { top: 32%; left: 17%; right: auto; width: 22%; }
.carcass-island-label { top: 80%; left: 6%; right: auto; width: 25%; }
.stanley-label { top: 62%; }
.stone-runs-label { top: 80%; left: 65%; right: auto; width: 28%; }
.falklands-location-label strong { font: 500 clamp(.85rem, 1.65cqw, 1.15rem)/1.2 Arial, sans-serif; text-transform: uppercase; }
.falklands-location-label span { font: 400 clamp(.75rem, 1.2cqw, .9rem)/1.3 Arial, sans-serif; }
@container falklands-map (max-width: 760px) {
  .volunteer-point-label { top: 27%; width: 23%; }
  .stanley-label { width: 25%; }
  .falklands-activity-point { width: 44px; max-width: 44px; height: 44px; padding: .4rem; justify-content: center; }
  .falklands-activity-point > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 700px) {
  .falklands-activity-point[data-falklands-activity="sea-lion"] { left: 9%; top: 59%; }
  .falklands-activity-point[data-falklands-activity="census"] { top: 20%; }
  .falklands-activity-point[data-falklands-activity="carcass"] { left: 32%; top: 58%; }
  .falklands-activity-point[data-falklands-activity="stone-runs"] { left: 56%; top: 58%; }
  .falklands-activity-point[data-falklands-activity="stanley"] { left: 89%; top: 59%; }
  .falklands-location-labels { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .6rem; padding: .75rem; border: 1px solid #baccc8; border-radius: .6rem; background: #f7f3e5; }
  .falklands-location-label { position: static; width: auto; color: #173e49; text-shadow: none; }
  .falklands-location-label strong { font-size: .85rem; }
  .falklands-location-label span { font-size: .75rem; }
  .volunteer-point-label strong::before { content: "1 · "; }
  .sea-lion-label strong::before { content: "2 · "; }
  .carcass-island-label strong::before { content: "3 · "; }
  .stanley-label strong::before { content: "4 · "; }
  .stone-runs-label strong::before { content: "5 · "; }
  .stone-runs-label { grid-column: 1 / -1; }
}

.falklands-activity-point:hover,
.falklands-activity-point:focus-visible {
  color: white;
  background: rgba(53,119,93,.94);
}

.falklands-activity-point .activity-number { background: #f0c35e; }
.falklands-preview-card { background: radial-gradient(circle at 50% 14%, rgba(244,197,103,.2), transparent 34%), linear-gradient(155deg, #477e68, #173d3f 76%); }
.falklands-preview-marker { display: grid; width: 6rem; height: 6rem; place-items: center; margin-bottom: .4rem; border: .24rem solid #f0c35e; border-radius: 50% 50% 50% 8%; transform: rotate(-45deg); background: rgba(247,244,221,.12); animation: preview-icon-float 2.2s ease-in-out infinite; }
.falklands-preview-marker span { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #f0c35e; box-shadow: 0 0 0 .35rem rgba(255,255,255,.18); }

.south-georgia-viewport {
  aspect-ratio: 2752 / 1536;
  background: #718d8c;
}

.south-georgia-viewport > img {
  object-fit: contain;
  object-position: center;
  transform: scale(1.002);
  animation: falklands-map-breathe 12s ease-in-out infinite alternate;
}

.south-georgia-viewport::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 35%, rgba(239,247,236,.12) 47%, transparent 59%);
  animation: falklands-cloud-light 11s linear infinite;
}

.south-georgia-activity-point {
  z-index: 5;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  max-width: none;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-color: rgba(255,255,255,.9);
  border-radius: 50%;
  color: #173f43;
  background: rgba(250,248,229,.62);
  box-shadow: 0 .22rem .62rem rgba(21,44,43,.3);
  backdrop-filter: blur(2px);
}

.south-georgia-activity-point:hover,
.south-georgia-activity-point:focus-visible {
  color: white;
  background: rgba(44,105,94,.94);
}

.south-georgia-activity-point .activity-number { flex-basis: 2rem; width: 2rem; height: 2rem; background: #efc65e; }
.south-georgia-preview-card { background: radial-gradient(circle at 50% 14%, rgba(239,198,94,.22), transparent 34%), linear-gradient(155deg, #617b63, #173f43 76%); }
.south-georgia-preview-marker { display: grid; width: 6rem; height: 6rem; place-items: center; margin-bottom: .4rem; border: .24rem solid #efc65e; border-radius: 50% 50% 50% 8%; transform: rotate(-45deg); background: rgba(247,244,221,.12); animation: preview-icon-float 2.2s ease-in-out infinite; }
.south-georgia-preview-marker span { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #efc65e; box-shadow: 0 0 0 .35rem rgba(255,255,255,.18); }

.antarctica-viewport {
  aspect-ratio: 2816 / 1536;
  background: #8db6cd;
}
.antarctica-viewport > img {
  object-fit: contain;
  transform: none;
  animation: none;
}
.antarctica-viewport .antarctica-activity-point {
  z-index: 5;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  max-width: none;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #123d50;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}
.antarctica-viewport .antarctica-activity-point:hover,
.antarctica-viewport .antarctica-activity-point:focus-visible { background: transparent; }
.antarctica-viewport .antarctica-activity-point:focus-visible { outline: .2rem solid #0a5675; outline-offset: .1rem; }
.antarctica-viewport .antarctica-activity-point .activity-number { flex-basis: 2.25rem; width: 2.25rem; height: 2.25rem; border: .12rem solid white; background: #f6cf6d; box-shadow: 0 .18rem .5rem rgba(11, 40, 55, .4); }
.antarctica-viewport .antarctica-activity-point:hover .activity-number,
.antarctica-viewport .antarctica-activity-point:focus-visible .activity-number { background: #f7e2a1; }
.antarctica-activity-list button { display: block; width: 100%; min-height: 44px; padding: .5rem 0; border: 0; color: inherit; background: none; text-align: left; font: inherit; cursor: pointer; }
.antarctica-activity-list button:focus-visible { outline: .18rem solid #0a5675; outline-offset: .15rem; }
.antarctica-preview-card { background: radial-gradient(circle at 50% 14%, rgba(186,226,242,.28), transparent 34%), linear-gradient(155deg, #628da4, #123d56 76%); }
.antarctica-preview-marker { display: grid; width: 6rem; height: 6rem; place-items: center; margin-bottom: .4rem; border: .24rem solid #f6cf6d; border-radius: 50%; background: rgba(247,251,255,.12); font: 900 2rem/1 Georgia, serif; }

.drake-viewport { aspect-ratio: 1544 / 1018; background: #515c70; }
.drake-viewport > img { object-fit: contain; transform: none; animation: none; }
.drake-viewport .drake-activity-point {
  z-index: 5;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  max-width: none;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #123d50;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}
.drake-viewport .drake-activity-point:hover,
.drake-viewport .drake-activity-point:focus-visible { background: transparent; }
.drake-viewport .drake-activity-point:focus-visible { outline: .2rem solid #f8d478; outline-offset: .1rem; }
.drake-viewport .drake-activity-point .activity-number {
  flex-basis: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border: .12rem solid white;
  background: #f6cf6d;
  box-shadow: 0 .18rem .5rem rgba(11, 29, 43, .55);
}
.drake-viewport .drake-activity-point:hover .activity-number,
.drake-viewport .drake-activity-point:focus-visible .activity-number { background: #f7e2a1; }
.drake-activity-list button { display: block; width: 100%; min-height: 44px; padding: .5rem 0; border: 0; color: inherit; background: none; text-align: left; font: inherit; cursor: pointer; }
.drake-activity-list button:focus-visible { outline: .18rem solid #0a5675; outline-offset: .15rem; }
.drake-preview-card { background: radial-gradient(circle at 50% 14%, rgba(231,238,255,.25), transparent 34%), linear-gradient(155deg, #68788d, #172c45 76%); }
.drake-preview-marker { display: grid; width: 6rem; height: 6rem; place-items: center; margin-bottom: .4rem; border: .24rem solid #f6cf6d; border-radius: 50%; background: rgba(247,251,255,.12); font: 900 2rem/1 Georgia, serif; }

.homecoming-viewport { aspect-ratio: 3 / 2; background: #d4ae86; }
.homecoming-viewport > img { object-fit: contain; transform: none; animation: none; }
.homecoming-viewport .homecoming-activity-point {
  z-index: 5;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #123d50;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}
.homecoming-viewport .homecoming-activity-point:hover { background: transparent; }
.homecoming-viewport .homecoming-activity-point:focus-visible { background: transparent; outline: .2rem solid #fff5d6; outline-offset: .12rem; }
.homecoming-viewport .homecoming-activity-point .activity-number {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-basis: 2.5rem;
  border: .12rem solid white;
  background: #f5c761;
  box-shadow: 0 .18rem .55rem rgba(38, 34, 38, .6);
  font-size: 1rem;
}
.homecoming-viewport .homecoming-activity-point:hover .activity-number,
.homecoming-viewport .homecoming-activity-point:focus-visible .activity-number { background: #ffe9a1; }
.homecoming-activity-list button { display: block; width: 100%; min-height: 44px; padding: .5rem 0; border: 0; color: inherit; background: none; text-align: left; font: inherit; cursor: pointer; }
.homecoming-activity-list button:focus-visible { outline: .18rem solid #0a5675; outline-offset: .15rem; }
.phase2-preview-card.homecoming-preview-card { background: radial-gradient(circle at 50% 14%, rgba(255,221,157,.28), transparent 35%), linear-gradient(155deg, #a66b52, #233e59 78%); }
.homecoming-preview-marker { display: grid; width: 6rem; height: 6rem; place-items: center; margin-bottom: .4rem; border: .24rem solid #f5c761; border-radius: 50%; background: rgba(255,255,255,.12); font: 900 2rem/1 Georgia, serif; }

@keyframes creche-wave-pulse { from { opacity: .65; transform: scale(.6); } to { opacity: 0; transform: scale(2.2); } }
@keyframes creche-chick-step { from { transform: translateX(0) rotate(-3deg); } to { transform: translateX(-1.8rem) rotate(2deg); } }
@keyframes creche-call-shake { 25% { transform: translateX(-.25rem); } 65% { transform: translateX(.25rem); } }
@keyframes creche-card-open { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
@keyframes creche-huddle { from { transform: translateX(-.4rem) rotate(-3deg); } to { transform: translateX(.4rem) rotate(3deg); } }

.creche-game { color: #173d46; text-align: left; }
.creche-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.creche-ripple-bank { display: flex; align-items: center; justify-content: flex-end; gap: .38rem; }
.creche-ripple-bank b { margin-left: .25rem; font-size: .67rem; text-transform: uppercase; }
.creche-ripple { display: block; width: 1.1rem; height: 1.1rem; border: .18rem double #168d9b; border-radius: 50%; background: #d7f4ef; box-shadow: 0 0 0 .14rem rgba(33,154,165,.18); }
.creche-ripple.is-lost { border-color: #bf665b; background: #ead6cd; opacity: .38; transform: scale(.82); }
.creche-colony { position: relative; min-height: 13rem; overflow: hidden; margin-top: .8rem; border: .25rem solid #5e6860; border-radius: .8rem; background: linear-gradient(#718e9d 0 56%, #c1c9b8 57% 74%, #8d9885 75%); }
.creche-colony-hills { position: absolute; inset: 36% -3% 0; background: #6c807c; clip-path: polygon(0 45%, 17% 22%, 33% 43%, 55% 6%, 76% 42%, 100% 15%, 100% 100%, 0 100%); opacity: .65; }
.creche-penguin { position: absolute; z-index: 1; bottom: .9rem; width: 2.1rem; height: 4.1rem; border: .22rem solid #1f353b; border-radius: 55% 55% 37% 37%; background: linear-gradient(90deg, #273d43 0 25%, #f9f0d1 26% 75%, #273d43 76%); }
.creche-penguin::before { content: ""; position: absolute; left: .29rem; top: -.64rem; width: 1.15rem; height: 1.2rem; border-radius: 50%; background: #263940; box-shadow: inset -.12rem -.25rem #f1b64d; }
.creche-penguin::after { content: ""; position: absolute; right: -.58rem; top: .2rem; width: .6rem; height: .4rem; background: #ecae48; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.creche-penguin.adult { left: 12%; }
.creche-penguin.chick { right: 12%; height: 2.9rem; width: 1.8rem; border-color: #64594a; background: #a79574; }
.creche-penguin.chick::before { background: #a79574; box-shadow: none; }
.creche-game.is-correct .creche-penguin.chick { animation: creche-chick-step .8s ease-in-out infinite alternate; }
.creche-wave { position: absolute; z-index: 1; left: 17%; bottom: 3.9rem; width: 2.5rem; height: 2.5rem; border: .17rem solid #f2d273; border-radius: 50%; animation: creche-wave-pulse 1.8s ease-out infinite; }
.creche-wave.two { animation-delay: -.9s; }
.creche-clue { position: relative; z-index: 2; width: min(70%, 41rem); margin: .9rem auto; padding: .7rem 1rem; border: .13rem solid #f0d591; border-radius: .5rem; color: #fdf8e9; background: rgba(17,53,62,.88); text-align: center; box-shadow: 0 .3rem .7rem rgba(16,42,48,.28); }
.creche-clue small { color: #f6d27b; font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.creche-clue p { margin: .35rem 0 0; font: 800 clamp(1rem, 2.6vw, 1.32rem)/1.35 Georgia, serif; }
.creche-nests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .8rem; }
.creche-nest { min-width: 0; padding: .75rem; border: .18rem solid #7b837b; border-radius: 1rem; background: radial-gradient(circle at 15% 18%, #e8ddbf .08rem, transparent .13rem), radial-gradient(circle at 55% 72%, #aab3a4 .08rem, transparent .15rem), #d0d4c5; background-size: 1.4rem 1.3rem, 1.8rem 1.7rem, auto; }
.creche-nest h3 { margin: 0 0 .5rem; color: #284c52; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.creche-nest > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.creche-pebble { display: grid; min-width: 0; min-height: 4rem; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .35rem; padding: .55rem; border: .13rem solid #66716f; border-radius: 1rem; color: #1a3f46; background: #f7f3e7; cursor: pointer; touch-action: manipulation; transition: background .15s, transform .15s; }
.creche-pebble:hover, .creche-pebble:focus-visible { transform: translateY(-.12rem); border-color: #127c99; }
.creche-pebble small { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; color: white; background: #57777a; font-size: .61rem; font-weight: 900; }
.creche-pebble strong { overflow-wrap: anywhere; font: 800 .95rem/1.15 Georgia, serif; }
.creche-nest:first-child .creche-pebble.is-selected { color: white; border-color: #075f91; background: #147aa8; box-shadow: 0 0 0 .14rem rgba(13,115,174,.17); }
.creche-nest:last-child .creche-pebble.is-selected { color: #3c341d; border-color: #ad7a23; background: #f7cf6b; box-shadow: 0 0 0 .14rem rgba(211,154,48,.18); }
.creche-nest:last-child .creche-pebble.is-selected small { background: #775121; }
.creche-fusion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: .8rem; padding: .65rem; border: .14rem solid #779a98; border-radius: .65rem; background: #eaf2ed; text-align: center; }
.creche-fusion span, .creche-fusion strong { min-width: 5rem; padding: .4rem .6rem; border-radius: .4rem; background: white; font: 800 .96rem/1.2 Georgia, serif; }
.creche-fusion strong { color: #146d74; background: #d2ebe5; overflow-wrap: anywhere; }
.creche-fusion b { color: #7b643c; }
.creche-game.is-correct .creche-fusion strong, .creche-game.is-failed .creche-fusion strong { color: #074a4b; background: #91dfd2; }
.creche-game.is-incorrect .creche-fusion { animation: creche-call-shake .35s ease; }
.creche-tried { margin: .55rem 0 0; color: #805247; font-size: .78rem; }
.creche-feedback { margin-top: .8rem; }
.creche-feedback.correct { background: #d8eee3; }
.creche-feedback.incorrect, .creche-feedback.failed { background: #ffe6dd; }
.creche-field-card { margin-top: .8rem; padding: 1rem; border: .17rem solid #288c8c; border-radius: .65rem; background: #eff8f4; animation: creche-card-open .35s ease both; }
.creche-field-card.is-failed { border-color: #c95c50; background: #fff1e9; }
.creche-field-card > .eyebrow { margin: 0 0 .35rem; }
.creche-field-card h3 { margin: 0; color: #16585c; font: 900 1.65rem/1.1 Georgia, serif; }
.creche-field-card p { margin: .6rem 0 0; line-height: 1.45; }
.creche-root-breakdown { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; margin-top: .7rem; }
.creche-root-breakdown span { padding: .6rem; border-radius: .38rem; background: white; line-height: 1.35; }
.creche-root-breakdown b { color: #a06d34; }
.creche-field-card blockquote { margin: .75rem 0 0; padding: .7rem; border-left: .24rem solid #d4a74d; background: white; font: 700 1rem/1.45 Georgia, serif; }
.creche-controls { display: flex; gap: .65rem; align-items: center; margin-top: .8rem; padding-bottom: max(.1rem, env(safe-area-inset-bottom)); }
.creche-controls [data-creche-next] { margin-left: auto; }
.creche-result { display: grid; min-height: 28rem; align-content: center; justify-items: center; gap: .7rem; padding: 1.5rem; border-radius: .85rem; color: white; background: linear-gradient(#3a7380, #1b4c51); text-align: center; }
.creche-result.is-retry { background: linear-gradient(#776b5f, #3d5053); }
.creche-result h3 { margin: 0; color: #f3cc71; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.creche-result > p:not(.eyebrow) { max-width: 37rem; margin: 0; line-height: 1.5; }
.creche-result-chicks { display: flex; gap: .35rem; align-items: end; min-height: 5rem; }
.creche-result-chicks i { display: block; width: 1.6rem; height: 3.2rem; border-radius: 60% 60% 40% 40%; background: linear-gradient(90deg, #243d43 25%, #fff1ce 26% 74%, #243d43 75%); animation: creche-huddle .7s ease-in-out infinite alternate; }
.creche-result-chicks i:nth-child(2) { height: 4rem; animation-delay: -.35s; }
.creche-result-chicks i:nth-child(3) { animation-delay: -.6s; }

@keyframes territory-roar-wave { from { opacity: .75; transform: scale(.35); } to { opacity: 0; transform: scale(2.1); } }
.territory-game { color: #173d46; text-align: left; }
.territory-dialog .dialog-close { min-width: 44px; min-height: 44px; }
.territory-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.territory-ring-bank { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.territory-ring-bank b { margin-left: .25rem; font-size: .67rem; text-transform: uppercase; }
.territory-ring { display: block; width: 1.12rem; height: 1.12rem; border: .18rem double #25899a; border-radius: 50%; background: #d9f1ec; }
.territory-ring.is-lost { border-color: #bd6655; background: #f5d7c9; opacity: .4; transform: scale(.78) rotate(30deg); }
.territory-coast { overflow: hidden; margin: .8rem 0 0; border: 1px solid #708683; border-radius: .75rem; background: #173d46; box-shadow: 0 .3rem .8rem rgba(24,49,52,.15); }
.territory-art { display: block; width: 100%; height: clamp(10rem, 24vw, 15rem); object-fit: cover; object-position: center; }
.territory-sector { padding: .65rem .85rem; color: #fff9e7; background: #173d46; }
.territory-sector small { color: #f3d580; font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.territory-sector p { margin: .25rem 0 0; font: 600 1rem/1.3 Georgia, serif; }
.territory-clues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .75rem; }
.territory-clues p { margin: 0; padding: .75rem; border-left: .28rem solid #cfaa5b; border-radius: .35rem; background: #f7f1de; line-height: 1.35; }
.territory-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.territory-rail section { min-width: 0; padding: .8rem; border: .15rem solid #647b7c; border-radius: .65rem; background: #e7efed; }
.territory-rail h3 { margin: 0 0 .55rem; color: #28565d; font-size: .77rem; letter-spacing: .06em; text-transform: uppercase; }
.territory-letters, .territory-gaps { display: flex; flex-wrap: wrap; justify-content: center; gap: .32rem; }
.territory-letter, .territory-static-letter { display: grid; width: 3.1rem; min-width: 2.75rem; height: 3.25rem; place-items: center; border: .14rem solid #688087; border-radius: .55rem; color: #163f4b; background: #fbf6e7; box-shadow: 0 .2rem #a5936e; font: 900 1.45rem/1 Georgia, serif; }
.territory-letter { cursor: pointer; touch-action: manipulation; }
.territory-letter:hover, .territory-letter:focus-visible { border-color: #187f96; transform: translateY(-.12rem); }
.territory-letter.is-selected { color: white; border-color: #136887; background: #217e97; box-shadow: 0 0 0 .15rem rgba(24,126,145,.2); transform: translateY(-.15rem); }
.territory-static-letter { background: #f3e2bd; }
.territory-slot-caption { margin: .8rem 0 .42rem; font-size: .82rem; }
.territory-gap { display: grid; min-width: 3.2rem; min-height: 3.3rem; place-content: center; gap: .12rem; padding: .28rem .35rem; border: .13rem dashed #a27a43; border-radius: .45rem; color: #453821; background: #fff5d8; cursor: pointer; touch-action: manipulation; }
.territory-gap b { font-size: .93rem; }
.territory-gap small { max-width: 5.8rem; font-size: .58rem; line-height: 1.1; }
.territory-gap:hover, .territory-gap:focus-visible { border-color: #187f96; background: #e6f4ef; }
.territory-gap.is-selected { color: white; border-style: solid; border-color: #0b627b; background: #277d96; box-shadow: 0 0 0 .14rem rgba(33,116,151,.2); }
.territory-preview { display: grid; grid-template-columns: .6fr 1fr 1fr; gap: .55rem; margin-top: .75rem; padding: .65rem; border: .14rem solid #708e8d; border-radius: .65rem; background: #dcece8; }
.territory-preview > div { display: grid; align-content: center; gap: .2rem; min-width: 0; padding: .4rem; border-radius: .3rem; background: white; text-align: center; }
.territory-preview small { color: #4d6367; font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.territory-preview strong { overflow-wrap: anywhere; color: #175e70; font: 900 clamp(1.08rem, 2.8vw, 1.45rem)/1.15 Georgia, serif; }
.territory-game.is-correct .territory-preview strong, .territory-game.is-failed .territory-preview strong { color: #0b6760; }
.territory-game.is-incorrect .territory-preview { animation: creche-call-shake .34s ease; }
.territory-tried { margin: .5rem 0 0; color: #8a4a44; font-size: .78rem; }
.territory-feedback { margin-top: .75rem; }
.territory-feedback.correct { background: #dcf0e5; }
.territory-feedback.incorrect, .territory-feedback.failed { background: #ffe8dc; }
.territory-log { margin-top: .75rem; padding: 1rem; border: .16rem solid #258d91; border-radius: .6rem; background: #f1f9f5; animation: creche-card-open .3s ease both; }
.territory-log.is-failed { border-color: #c86858; background: #fff2e9; }
.territory-log > .eyebrow { margin: 0 0 .35rem; }
.territory-log h3 { margin: 0; color: #165e62; font: 900 clamp(1.1rem, 2.8vw, 1.55rem)/1.2 Georgia, serif; }
.territory-log h3, .territory-log-words strong { overflow-wrap: anywhere; }
.territory-log > p:not(.eyebrow) { margin: .6rem 0; line-height: 1.4; }
.territory-log-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.territory-log-words > div { padding: .7rem; border-radius: .4rem; background: white; }
.territory-log-words strong { display: block; color: #146f74; font: 900 clamp(1rem, 2.4vw, 1.2rem)/1.1 Georgia, serif; }
.territory-log-words small { color: #765b3d; font-weight: 800; }
.territory-log-words p { margin: .3rem 0 0; line-height: 1.35; }
.territory-log blockquote { margin: .65rem 0 0; padding: .65rem; border-left: .24rem solid #d0a85b; background: white; font: 700 .98rem/1.4 Georgia, serif; }
.territory-controls { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; padding-bottom: max(.1rem, env(safe-area-inset-bottom)); }
.territory-controls [data-territory-next] { margin-left: auto; }
.territory-result { display: grid; min-height: 25rem; align-content: center; justify-items: center; gap: .7rem; padding: 1.2rem; border-radius: .8rem; color: white; background: linear-gradient(#4a818b, #1a4d56); text-align: center; }
.territory-result.is-retry { background: linear-gradient(#786e62, #40545a); }
.territory-result-art { width: min(100%, 34rem); height: clamp(10rem, 24vw, 13rem); border: 1px solid #a6c3bd; border-radius: .65rem; }
.territory-result h3 { margin: 0; color: #f8d37f; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.territory-result > p:not(.eyebrow) { max-width: 34rem; margin: 0; line-height: 1.45; }
.territory-result-waves { display: flex; gap: .6rem; }
.territory-result-waves i { width: 2.1rem; height: 2.1rem; border: .22rem solid #f8d37f; border-radius: 50%; animation: territory-roar-wave 2.1s ease-out infinite; }
.territory-result-waves i:nth-child(2) { animation-delay: -.7s; }
.territory-result-waves i:nth-child(3) { animation-delay: -1.4s; }

@keyframes salvage-tag-scrap { 45% { transform: rotate(-3deg) translateY(-.45rem); } 100% { transform: rotate(3deg) translateY(.25rem); } }
@keyframes salvage-valve-pop { 30% { transform: scale(1.25) rotate(24deg); } 100% { transform: scale(.8) rotate(42deg); } }
@keyframes salvage-stamp-arrive { from { opacity: 0; transform: rotate(-15deg) scale(1.5); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
.salvage-game { color: #203c43; text-align: left; }
.salvage-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .75rem; }
.salvage-valve-bank { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.salvage-valve-bank b { margin-left: .2rem; font-size: .72rem; text-transform: uppercase; }
.salvage-valve { position: relative; display: block; width: 1.2rem; height: 1.2rem; border: .2rem double #986c3a; border-radius: 50%; background: #edc16b; box-shadow: inset 0 0 0 .12rem #f7e9bd; }
.salvage-valve::after { content: ""; position: absolute; top: .3rem; left: -.15rem; right: -.15rem; height: .13rem; background: #81582e; transform: rotate(35deg); }
.salvage-valve.is-vented { opacity: .45; filter: grayscale(.65); animation: salvage-valve-pop .3s ease both; }
.salvage-yard { position: relative; height: clamp(12rem, 25vw, 15rem); overflow: hidden; margin: .75rem 0 0; border: 1px solid #6f827d; border-radius: .7rem; background: linear-gradient(160deg, #b7c9ca, #5b7778 55%, #554b3c); box-shadow: 0 .3rem .9rem rgba(28,49,47,.15); }
.salvage-yard > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.salvage-sector { position: absolute; z-index: 1; inset: auto 0 0; padding: 1.8rem 1rem .8rem; color: #fff9e7; background: linear-gradient(transparent, rgba(17,39,43,.93)); }
.salvage-sector small { color: #f7d797; font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.salvage-sector p { margin: .2rem 0; font: 600 1.15rem/1.25 Georgia, serif; }
.salvage-sector > span { font-size: .72rem; }
.salvage-yard.is-missing-art { height: 8rem; }
.salvage-manifest { position: relative; margin-top: .85rem; padding: 1rem; border: 1px solid #b8a687; border-top: .28rem solid #92734f; border-radius: .6rem; background: linear-gradient(110deg, #fff9e9, #f6ecd5); box-shadow: 0 .25rem .6rem rgba(62,56,48,.08); }
.salvage-manifest header { padding-bottom: .5rem; border-bottom: .1rem solid #b4a37e; }
.salvage-manifest header .eyebrow { margin: 0; }
.salvage-manifest h3 { margin: .35rem 0; color: #1d4650; font: 700 clamp(1.2rem, 2.5vw, 1.6rem)/1.25 Georgia, serif; }
.salvage-manifest h3 em { color: #934621; font-style: normal; text-decoration: underline; text-decoration-color: #dcad65; text-underline-offset: .2em; }
.salvage-manifest header p { margin: 0; color: #665743; line-height: 1.35; }
.salvage-tags { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; margin-top: .85rem; }
.salvage-tag { position: relative; display: grid; min-width: 0; min-height: 6.2rem; align-content: center; gap: .35rem; padding: .7rem .4rem .6rem; border: 2px solid #b8a483; border-radius: .3rem .3rem .7rem .7rem; color: #223e45; background: linear-gradient(135deg, #fffdf4, #f0dfb8); box-shadow: 0 .18rem 0 #a28b67, 0 .25rem .5rem rgba(72,56,33,.08); cursor: pointer; touch-action: manipulation; text-align: center; transition: border-color .15s, background .15s; }
.salvage-tag::before { content: ""; position: absolute; top: .55rem; left: .55rem; width: .4rem; height: .4rem; border: 1px solid #a48b63; border-radius: 50%; background: #e1d2ae; box-shadow: inset 0 1px 2px #827051; }
.salvage-tag small { color: #70604b; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.salvage-tag strong { overflow-wrap: anywhere; font: 700 clamp(1rem, 2vw, 1.3rem)/1.2 Georgia, serif; }
.salvage-tag-status { color: #70604b; font-size: .66rem; line-height: 1.2; }
.salvage-tag:hover:not(:disabled) { border-color: #39747a; }
.salvage-tag:focus-visible { outline: 3px solid #1f6270; outline-offset: 3px; }
.salvage-tag.is-selected { border-color: #1f6270; background: #e1f0ec; box-shadow: 0 .18rem #1f6270, 0 0 0 .12rem rgba(31,98,112,.15); }
.salvage-tag.is-selected .salvage-tag-status { color: #1a5962; font-weight: 800; }
.salvage-tag:disabled { opacity: 1; cursor: default; }
.salvage-tag.is-matching { color: #164c43; border-color: #649789; background: #e1efe5; box-shadow: 0 .18rem #649789; }
.salvage-tag.is-odd { color: #683b17; border-color: #aa7136; background: #ffe6b3; box-shadow: 0 .18rem #aa7136; animation: salvage-tag-scrap .55s ease both; }
.salvage-tag.is-matching .salvage-tag-status, .salvage-tag.is-odd .salvage-tag-status { color: inherit; font-weight: 700; }
.salvage-selected { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .8rem; color: #68563d; font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.salvage-selected strong { padding: .38rem .55rem; border: 1px solid #d0dad2; border-radius: .3rem; color: #1a5260; background: white; font: 700 1rem/1.2 Georgia, serif; text-transform: none; }
.salvage-check-step { margin-left: auto; color: #52675f; font-size: .7rem; }
.salvage-tried { margin: .6rem 0 0; color: #87524a; font-size: .8rem; }
.salvage-feedback { margin-top: .8rem; }
.salvage-feedback.correct { background: #d9eee4; }
.salvage-feedback.incorrect, .salvage-feedback.failed { background: #ffe8dc; }
.salvage-game.is-incorrect .salvage-manifest { animation: creche-call-shake .35s ease; }
.salvage-archive { margin-top: .8rem; padding: 1rem; border: .17rem solid #248689; border-radius: .6rem; background: #eff8f2; animation: creche-card-open .3s ease both; }
.salvage-archive.is-failed { border-color: #c96654; background: #fff2e9; }
.salvage-archive > .eyebrow { margin: 0 0 .35rem; }
.salvage-archive h3 { margin: 0; color: #145c61; font: 700 1.4rem/1.25 Georgia, serif; }
.salvage-archive > p:not(.eyebrow) { margin: .65rem 0; line-height: 1.4; }
.salvage-definitions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin: .75rem 0 0; }
.salvage-definitions > div { min-width: 0; padding: .75rem; border: 1px solid #bfd5ca; border-top: .25rem solid #649789; border-radius: .4rem; background: #fffcf3; }
.salvage-definitions > div.is-odd { border-color: #d2af7c; border-top-color: #aa7136; background: #fff1d6; }
.salvage-definitions dt { overflow-wrap: anywhere; color: #1c5e66; font: 700 1.05rem/1.25 Georgia, serif; }
.salvage-definitions dt small { display: block; margin-top: .25rem; color: #5a665d; font: 700 .65rem/1.25 Arial, sans-serif; }
.salvage-definitions > div.is-odd dt { color: #683b17; }
.salvage-definitions dd { margin: .4rem 0 0; font-size: .85rem; line-height: 1.45; }
.salvage-archive blockquote { margin: .75rem 0 0; padding: .65rem; border-left: .25rem solid #cda45b; background: white; font: 700 .98rem/1.4 Georgia, serif; }
.salvage-controls { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .8rem; padding-bottom: max(.1rem, env(safe-area-inset-bottom)); }
.salvage-controls button { min-width: 44px; min-height: 44px; }
.salvage-controls button:disabled { opacity: .5; cursor: default; box-shadow: none; }
.salvage-dialog .dialog-close { min-width: 44px; min-height: 44px; }
.salvage-controls [data-salvage-next] { margin-left: auto; }
.salvage-result { display: grid; min-height: 25rem; align-content: center; justify-items: center; gap: .7rem; padding: 1.2rem; border-radius: .75rem; color: white; background: linear-gradient(#577875, #214b50); text-align: center; }
.salvage-result.is-retry { background: linear-gradient(#816d60, #485252); }
.salvage-result h3 { margin: 0; color: #f5ce7b; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.salvage-result > p:not(.eyebrow) { max-width: 36rem; margin: 0; line-height: 1.45; }
.salvage-result-stamp { padding: .8rem 1.3rem; border: .35rem double #f0c970; border-radius: .25rem; color: #f0c970; font: 900 1.45rem/1 Georgia, serif; letter-spacing: .1em; transform: rotate(-8deg); animation: salvage-stamp-arrive .45s ease both; }
@media (max-width: 900px) {
  .salvage-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .salvage-definitions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .salvage-game *, .salvage-game *::before, .salvage-game *::after, .salvage-result * { animation: none !important; transition: none !important; }
}

@keyframes updraft-drift { from { transform: translateX(-1.5rem); } to { transform: translateX(1.5rem); } }
@keyframes updraft-soar { 50% { transform: translateY(-.45rem) rotate(-2deg); } }
@keyframes updraft-dip { 50% { transform: translateY(2rem) rotate(9deg); } }
@keyframes updraft-lift { 55% { transform: translateY(-2.2rem) rotate(-8deg); } }
.updraft-game { color: #203c4b; text-align: left; }
.updraft-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.updraft-ring-bank { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.updraft-ring-bank b { margin-left: .3rem; font-size: .68rem; text-transform: uppercase; }
.updraft-ring { display: block; width: 1.2rem; height: 1.2rem; border: .2rem solid #d9a846; border-radius: 50%; background: #f8e7a4; box-shadow: 0 0 .45rem #f5c96e; }
.updraft-ring.is-lost { border-color: #889ba1; background: transparent; box-shadow: none; opacity: .55; }
.updraft-sky { position: relative; height: clamp(9rem, 20vw, 13rem); overflow: hidden; margin-top: .7rem; border: .2rem solid #6c929f; border-radius: .7rem; background: linear-gradient(#729db4 0%, #c0d8dc 62%, #477c87 63%, #2e6973 100%); }
.updraft-cloud { position: absolute; width: 7.5rem; height: 1.4rem; border-radius: 100%; background: rgba(255,255,255,.65); box-shadow: 2rem -.35rem 0 .2rem rgba(255,255,255,.5), -1.5rem .15rem 0 rgba(255,255,255,.45); animation: updraft-drift 5s ease-in-out infinite alternate; }
.updraft-cloud-one { top: 20%; left: 8%; }
.updraft-cloud-two { top: 32%; right: 8%; animation-delay: -2s; }
.updraft-headland { position: absolute; right: -1%; bottom: 0; width: 37%; height: 70%; background: linear-gradient(140deg, #728e78, #4d685c 55%, #3c5854); clip-path: polygon(0 100%, 36% 34%, 54% 43%, 74% 0, 100% 12%, 100% 100%); }
.updraft-wind { position: absolute; right: 27%; bottom: 18%; color: #f0f8df; font-size: 1.5rem; letter-spacing: .3rem; transform: rotate(-25deg); text-shadow: 0 0 .5rem #e9f9d7; }
.updraft-bird { position: absolute; z-index: 1; top: 28%; left: 42%; width: 7.8rem; height: 3.1rem; background: #1b3a4a; clip-path: polygon(0 8%, 20% 32%, 44% 45%, 51% 34%, 61% 45%, 78% 33%, 100% 5%, 83% 58%, 61% 67%, 54% 76%, 51% 100%, 46% 76%, 39% 67%, 17% 58%); filter: drop-shadow(0 .25rem .15rem rgba(16,48,57,.4)); animation: updraft-soar 3s ease-in-out infinite; }
.updraft-game.is-incorrect .updraft-bird, .updraft-game.is-failed .updraft-bird { animation: updraft-dip .55s ease both; }
.updraft-game.is-correct .updraft-bird { animation: updraft-lift .7s ease both; }
.updraft-board { margin-top: .7rem; padding: clamp(.75rem, 2vw, 1.2rem); border: .16rem solid #718d9b; border-radius: .6rem; background: #e9f3f3; }
.updraft-board .eyebrow { margin: 0; }
.updraft-board h3 { margin: .35rem 0; color: #1f4e61; font: 900 clamp(1.2rem, 2.5vw, 1.55rem)/1.2 Georgia, serif; }
.updraft-board > p:not(.eyebrow) { margin: 0; line-height: 1.4; }
.updraft-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.updraft-word { min-width: 0; min-height: 3.7rem; padding: .65rem .4rem; border: .17rem solid #9ab4c1; border-radius: 1.2rem; color: #204b5a; background: #fffefa; box-shadow: 0 .25rem .2rem rgba(26,64,75,.15); font: 900 clamp(.95rem, 2vw, 1.18rem)/1.2 Georgia, serif; overflow-wrap: anywhere; cursor: pointer; touch-action: manipulation; }
.updraft-word:hover, .updraft-word:focus-visible { border-color: #427fa1; transform: translateY(-.1rem); }
.updraft-word.is-selected { border-color: #0073b8; background: #eaf9ff; box-shadow: 0 0 0 .2rem #fecd60; }
.updraft-word.is-pair { border-color: #147b79; color: #124b4d; background: #b8f0e4; }
.updraft-word.is-distractor { opacity: .6; }
.updraft-selection { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: .9rem; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.updraft-selection strong { padding: .45rem .65rem; border-radius: .4rem; background: white; font: 900 1rem/1.2 Georgia, serif; text-transform: none; }
.updraft-feedback { margin-top: .8rem; }
.updraft-feedback.correct { background: #ddf5ea; }
.updraft-feedback.incorrect, .updraft-feedback.failed { background: #ffebdf; }
.updraft-flight-log { margin-top: .8rem; padding: 1rem; border: .16rem solid #2c8f8b; border-radius: .6rem; background: #f1faf6; animation: creche-card-open .3s ease both; }
.updraft-flight-log > .eyebrow { margin: 0; }
.updraft-flight-log h3 { margin: .3rem 0; color: #17666a; font: 900 1.4rem/1.2 Georgia, serif; }
.updraft-flight-log h4 { margin: .85rem 0 .25rem; color: #205e69; font-size: .88rem; }
.updraft-flight-log > p:not(.eyebrow) { margin: .55rem 0; line-height: 1.4; }
.updraft-definitions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .8rem 0; }
.updraft-definitions > div { padding: .6rem; border-left: .22rem solid #829aa0; border-radius: .25rem; background: white; }
.updraft-definitions > div.is-pair { border-color: #1e9d92; }
.updraft-definitions dt { color: #155c67; font-weight: 900; }
.updraft-definitions dd { margin: .25rem 0 0; line-height: 1.35; }
.updraft-fact { padding: .55rem; border-radius: .3rem; background: #e3f0ed; }
.updraft-controls { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .8rem; padding-bottom: max(.1rem, env(safe-area-inset-bottom)); }
.updraft-controls [data-updraft-next] { margin-left: auto; }
.updraft-result { display: grid; min-height: 24rem; align-content: center; justify-items: center; gap: .65rem; padding: 1rem; border-radius: .7rem; color: white; background: linear-gradient(#6d9caa, #245a6c); text-align: center; }
.updraft-result.is-retry { background: linear-gradient(#8c9293, #485c65); }
.updraft-result-bird { color: #f6d37e; font-size: 3rem; }
.updraft-result h3 { margin: 0; color: #ffdc8f; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.updraft-result > p:not(.eyebrow) { max-width: 35rem; margin: 0; line-height: 1.45; }

.phase2-preview-card {
  position: relative;
  display: grid;
  min-height: 24rem;
  align-content: center;
  justify-items: center;
  gap: .65rem;
  overflow: hidden;
  padding: clamp(1.4rem, 4vw, 2.6rem);
  border-radius: .9rem;
  color: white;
  background:
    radial-gradient(circle at 50% 12%, rgba(244,193,89,.2), transparent 32%),
    linear-gradient(155deg, #246a78, #0b3444 72%);
  text-align: center;
}

.phase2-preview-card::before,
.phase2-preview-card::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  height: .22rem;
  opacity: .26;
  background: repeating-linear-gradient(90deg, #d9f1f3 0 1.8rem, transparent 1.8rem 3rem);
  animation: preview-signal 3s linear infinite;
}

.phase2-preview-card::before { top: 12%; }
.phase2-preview-card::after { bottom: 12%; animation-direction: reverse; }
.phase2-preview-card > * { position: relative; z-index: 1; }
.phase2-preview-card .eyebrow { margin: 0; color: #f3c467; }
.phase2-preview-card h3 { margin: 0; color: white; font-size: clamp(1.8rem, 5vw, 3rem); }
.phase2-preview-card > p:not(.eyebrow):not(.phase2-mechanic):not(.phase2-preview-note) { max-width: 39rem; margin: 0; line-height: 1.55; }
.phase2-mechanic { max-width: 38rem; margin: .35rem 0 0; padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.35); border-radius: .55rem; background: rgba(6,37,50,.5); font-weight: 750; line-height: 1.45; }
.phase2-preview-note { margin: .2rem 0 0; color: #bcdde2; font-size: .83rem; }

.phase2-preview-icon {
  display: grid;
  width: 6.8rem;
  height: 6.8rem;
  place-items: center;
  margin-bottom: .35rem;
  border: .25rem solid #f1c05d;
  border-radius: 50%;
  box-shadow: 0 0 0 .4rem rgba(242,193,93,.14);
  animation: preview-icon-float 2.2s ease-in-out infinite;
}

.phase2-preview-icon span::before {
  color: #fff7df;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.phase2-rigging .phase2-preview-icon span::before { content: "KNOT"; }
.phase2-course .phase2-preview-icon span::before { content: "CHART"; }
.phase2-weather .phase2-preview-icon span::before { content: "BAROMETER"; font-size: .57rem; }
.phase2-lookout .phase2-preview-icon span::before { content: "LOOKOUT"; font-size: .63rem; }

.rigging-game {
  color: #173846;
  text-align: left;
}

.rigging-progress { padding: .2rem .15rem .8rem; }

.rigging-board {
  position: relative;
  min-height: 20rem;
  overflow: hidden;
  padding: 0;
  border: .3rem solid #5d3b27;
  border-radius: .85rem;
  background: repeating-linear-gradient(0deg, transparent 0 2.6rem, #66492f 2.65rem 2.75rem), linear-gradient(105deg, #b0885b, #8d6542);
  box-shadow: inset 0 0 0 .2rem rgba(255,255,255,.12), 0 .7rem 1.2rem rgba(15,45,55,.2);
  transform-origin: 50% 100%;
}

.rigging-illustration { position: relative; height: clamp(9rem, 22vw, 15rem); overflow: hidden; background: #718f9a; }
.rigging-illustration img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rigging-scene-caption { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; color: #fff5d8; background: #213f4d; }
.rigging-scene-caption strong { display: block; margin-bottom: .18rem; color: #ffdc8d; font: 800 1.15rem/1.2 Georgia, serif; }
.rigging-scene-caption div > span { display: block; font-size: .85rem; line-height: 1.4; }
.rigging-tag-count { flex-shrink: 0; padding: .35rem .55rem; border: 1px solid #68838c; border-radius: .35rem; font-size: .75rem; font-weight: 800; }
.rigging-game.is-correct .rigging-scene-caption { background: #25594f; }
.rigging-game.is-correct .rigging-lines-art { animation: rigging-log-arrive .4s ease-out; }
.rigging-beam {
  position: relative;
  z-index: 2;
  border-block: .18rem solid #3d281c;
  color: #fff0c6;
  background: repeating-linear-gradient(4deg, #71472d 0 .5rem, #805337 .55rem 1.2rem);
  box-shadow: 0 .45rem .55rem rgba(20,20,16,.32);
  text-align: center;
}
.rigging-beam span { display: inline-block; padding: .4rem .8rem; border-inline: 1px solid rgba(255,255,255,.2); font-size: .7rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }

.rigging-work-area { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem; gap: .8rem; align-items: stretch; padding: 1rem; }
.rigging-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; padding: .8rem; border: .18rem solid #283e44; border-radius: .65rem; background: rgba(240,230,204,.96); box-shadow: inset 0 .25rem .6rem rgba(22,40,43,.22); }
.rigging-slot { position: relative; display: grid; min-height: 4.65rem; place-items: center; padding: 1.25rem .28rem .35rem; border: .13rem dashed #82999b; border-radius: .45rem; background: rgba(252,250,239,.58); transition: background .16s, border-color .16s; }
.rigging-slot.is-filled { border-style: solid; border-color: #637c7f; background: rgba(255,253,246,.9); }
.rigging-slot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .45rem; border-block: 1px solid #aa8050; background: repeating-linear-gradient(120deg, #e1bc76 0 .3rem, #b78b51 .32rem .39rem); opacity: .6; }
.rigging-slot .rigging-token, .rigging-empty-slot { position: relative; z-index: 1; }
.rigging-slot .rigging-token { min-width: 0; width: 100%; max-width: 100%; overflow-wrap: anywhere; }
.rigging-slot.is-rigging-dragover, .rigging-bin.is-rigging-dragover, .rigging-token-pool.is-rigging-dragover { border-color: #e09632; background-color: #fff1cd; }
.rigging-slot-number { position: absolute; left: .28rem; top: .2rem; display: grid; width: 1.18rem; height: 1.18rem; place-items: center; border-radius: 50%; color: white; background: #3d5962; font-size: .6rem; font-weight: 900; }
.rigging-empty-slot { padding: .15rem .3rem; border-radius: .2rem; color: #506c70; background: #f5edda; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.rigging-token {
  position: relative;
  min-width: 4rem;
  min-height: 44px;
  padding: .55rem .55rem .55rem 1rem;
  border: .17rem solid #5a371f;
  border-radius: .35rem .65rem .65rem .35rem;
  color: #2d241b;
  background: linear-gradient(105deg, #e4bc75, #f2d798 55%, #d9ad68);
  box-shadow: 0 .28rem 0 #4c301f, 0 .4rem .45rem rgba(30,35,31,.22);
  font: 800 clamp(.85rem, 1.6vw, 1rem)/1.2 Georgia, serif;
  text-align: center;
  touch-action: manipulation;
}
.rigging-token > span { position: absolute; left: -.38rem; top: 50%; width: .85rem; height: .85rem; border: .18rem solid #6d452a; border-radius: 50%; background: #ead29a; transform: translateY(-50%); }
.rigging-token:hover:not(:disabled), .rigging-token:focus-visible { filter: brightness(1.06); transform: translateY(-.1rem); }
.rigging-token.is-dragging { opacity: .45; }
.phase2-dialog .rigging-token { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.phase2-dialog .rigging-drag-ghost { position: absolute; z-index: 100; pointer-events: none; opacity: .9; cursor: grabbing; transform: none; }

.rigging-bin { position: relative; display: grid; min-height: 11rem; align-content: center; justify-items: center; gap: .6rem; padding: 4rem .8rem 1.7rem; border: 2px solid transparent; border-radius: .55rem; background: url("assets/rigging-bucket.svg") center / 100% 100% no-repeat; filter: drop-shadow(0 .3rem .2rem rgba(30,35,31,.25)); text-align: center; }
.rigging-bin-label { color: #fff7df; font-size: .75rem; font-weight: 900; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; text-shadow: 0 1px 2px #382415; }
.rigging-bin-empty { color: #fff1d5; font-size: .8rem; line-height: 1.25; text-shadow: 0 1px 2px #382415; }
.rigging-bin .rigging-token { max-width: 8rem; }

.rigging-rope-snap { position: absolute; z-index: 5; top: 5.6rem; width: .28rem; height: 8rem; opacity: 0; pointer-events: none; background: repeating-linear-gradient(#d6b36b 0 .55rem, #5f3e25 .58rem .75rem); transform-origin: top; }
.rigging-rope-snap::after { content: ""; position: absolute; left: -.3rem; bottom: -.45rem; width: .9rem; height: .9rem; background: repeating-conic-gradient(#d6b36b 0 12deg, transparent 12deg 28deg); clip-path: polygon(50% 0, 62% 38%, 100% 52%, 63% 65%, 49% 100%, 37% 65%, 0 51%, 38% 38%); }
.rigging-rope-snap.snap-one { left: 12%; }
.rigging-rope-snap.snap-two { right: 16%; }

.rigging-token-pool { margin-top: .8rem; padding: .9rem; border: .18rem solid #8ca5a6; border-radius: .7rem; background: #dbe8e5; }
.rigging-token-pool > div:first-child { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; color: #456068; font-size: .75rem; }
.rigging-token-pool > div:first-child strong { color: #1c4654; letter-spacing: .06em; text-transform: uppercase; }
.rigging-token-list { display: flex; min-height: 3.4rem; flex-wrap: wrap; justify-content: center; gap: .65rem; }
.rigging-token-pool .rigging-token::after { content: ""; position: absolute; left: -.75rem; top: calc(50% - .12rem); width: .65rem; height: .24rem; border-radius: 1rem; background: #9d713b; box-shadow: 0 1px #edd3a1; pointer-events: none; }
.rigging-pool-empty { align-self: center; color: #647b80; font-size: .8rem; }

.rigging-feedback { margin: .8rem 0 0; }
.rigging-feedback.correct { color: #17604e; background: #dff1e9; }
.rigging-feedback.incorrect { color: #842f2b; background: #fae4df; }
.rigging-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; margin-top: .85rem; }
.rigging-next { margin-left: auto; }

.rigging-grammar-card { margin-top: .85rem; padding: 1rem 1.1rem; border: .18rem solid #26a4a6; border-radius: .65rem; background: #eff9f6; box-shadow: 0 .4rem .8rem rgba(17,60,69,.1); animation: rigging-log-arrive .36s ease-out both; }
.rigging-grammar-card.is-audit { border-color: #d5595e; background: #fff2ef; }
.rigging-grammar-card .eyebrow { margin: 0 0 .6rem; color: #1d7f80; }
.rigging-grammar-card.is-audit .eyebrow { color: #be444c; }
.rigging-grammar-card h4 { margin: .65rem 0 .25rem; color: #183f4b; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.rigging-grammar-card p { margin: 0; line-height: 1.45; }
.rigging-correct-sentence { padding: .7rem .8rem; border-left: .28rem solid #e3ac41; color: #113a45; background: white; font: 800 1.08rem/1.45 Georgia, serif; }
.rigging-grammar-tip { margin-top: .7rem !important; padding-top: .65rem; border-top: 1px dashed #9ebdb7; }
.rigging-focus-word { margin-top: .55rem !important; color: #315962; }
.rigging-focus-word span { display: inline-block; margin-left: .35rem; padding: .12rem .38rem; border-radius: 1rem; color: white; background: #28757b; font-size: .64rem; font-weight: 900; text-transform: uppercase; }

.rigging-game.is-swell .rigging-board { animation: rigging-swell .68s ease-in-out; }
.rigging-game.is-swell .rigging-token { animation: rigging-token-shake .55s ease-in-out; }
.rigging-game.is-swell .snap-one { animation: rigging-line-snap .7s ease-out both; }
.rigging-game.is-reveal .snap-two { animation: rigging-line-snap .7s .08s ease-out both; }
.rigging-game.is-correct .rigging-slot, .rigging-game.is-reveal .rigging-slot { border-color: #1c8385; background: #d8f0eb; }
.rigging-game.is-correct .rigging-slot .rigging-token, .rigging-game.is-reveal .rigging-slot .rigging-token { color: white; border-color: #176e70; background: linear-gradient(105deg, #238e90, #32aaac); box-shadow: 0 .25rem 0 #155d5e; animation: rigging-lash .45s ease both; }
.rigging-game.is-reveal .rigging-bin .rigging-token { color: white; border-color: #9e303a; background: linear-gradient(105deg, #d74854, #f75e68); box-shadow: 0 .25rem 0 #8e2b34; animation: rigging-jettison .55s ease both; }

.rigging-result { display: grid; min-height: 30rem; align-content: center; justify-items: center; gap: .75rem; overflow: hidden; padding: 1.5rem; border-radius: .85rem; color: white; background: linear-gradient(#577985 0 45%, #704b31 46% 100%); text-align: center; }
.rigging-result.is-retry { background: linear-gradient(#5a6670 0 45%, #694338 46% 100%); }
.rigging-result h3 { margin: 0; color: #f3c35d; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.rigging-result > p:not(.eyebrow) { max-width: 38rem; margin: 0; line-height: 1.5; }
.rigging-result-art { width: 100%; overflow: hidden; border: 3px solid #c49b61; border-radius: .7rem; }
.course-game { color: #173846; text-align: left; }
.course-progress { grid-template-columns: repeat(3, 1fr); }
.course-chart-table {
  position: relative;
  overflow: hidden;
  padding: 3.25rem clamp(.8rem, 2.5vw, 1.5rem) 1.25rem;
  border: .26rem solid #6a4325;
  border-radius: .8rem;
  background: linear-gradient(rgba(18,67,81,.9), rgba(20,55,68,.94)), #174656;
  box-shadow: inset 0 0 0 .18rem #bc853f, inset 0 0 2.4rem rgba(4,25,34,.55), 0 .6rem 1rem rgba(24,42,45,.25);
}
.course-chart-lines { position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(rgba(223,238,220,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(223,238,220,.35) 1px, transparent 1px); background-size: 2rem 2rem; }
.course-chart-lines i { position: absolute; width: .55rem; height: .55rem; border: .14rem solid #f3c467; border-radius: 50%; box-shadow: 0 0 0 .25rem rgba(243,196,103,.15); }
.course-chart-lines i:nth-child(1) { left: 8%; top: 18%; }
.course-chart-lines i:nth-child(2) { left: 26%; top: 70%; }
.course-chart-lines i:nth-child(3) { right: 18%; top: 15%; }
.course-chart-lines i:nth-child(4) { right: 8%; bottom: 16%; }
.course-calipers { position: absolute; z-index: 3; display: flex; gap: .62rem; right: 1.25rem; top: .65rem; }
.course-caliper-pin { position: relative; display: block; width: 2.6rem; height: .32rem; border: .08rem solid #6a431e; border-radius: 2rem; background: linear-gradient(#f7d477, #b87925); box-shadow: 0 .12rem .2rem rgba(0,0,0,.3); transform-origin: 15% 50%; transition: transform .25s, filter .25s; }
.course-caliper-pin::after { content: ""; position: absolute; width: .4rem; height: .4rem; margin: -.12rem 0 0 2.15rem; border: .1rem solid #69441f; border-radius: 50%; background: #e4b251; }
.course-caliper-pin.is-bent { filter: grayscale(.45) brightness(.72); transform: rotate(19deg) translateY(.18rem); }
.course-logbook { position: relative; z-index: 2; max-width: 48rem; min-height: 16rem; margin: 0 auto; padding: 1.35rem clamp(1rem, 4vw, 2.5rem); border: .16rem solid #8f6a3d; border-radius: .5rem; background: linear-gradient(90deg, #efe0b5 0 49.2%, #d0b887 49.5% 50.5%, #f4e7c1 50.8% 100%); box-shadow: 0 .65rem 1rem rgba(0,0,0,.32), inset 0 0 1.5rem rgba(92,61,31,.16); text-align: center; }
.course-logbook::before, .course-logbook::after { content: ""; position: absolute; top: 9%; bottom: 9%; width: .18rem; background: rgba(118,82,43,.18); }
.course-logbook::before { left: 4%; }
.course-logbook::after { right: 4%; }
.course-log-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(101,70,39,.38); color: #62472c; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.course-log-heading small { align-self: center; font-size: .66rem; }
.course-calculation-label { margin: 1.25rem 0 .5rem; color: #9a4b28; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.course-logbook h3 { max-width: 41rem; margin: 0 auto; color: #173846; font: 800 clamp(1.25rem, 3vw, 1.8rem)/1.4 Georgia, serif; }
.course-answer-blank { display: inline-block; min-width: 6.2rem; padding: 0 .35rem .08rem; border-bottom: .16rem solid #a46b29; color: #a46b29; }
.course-answer-blank.is-filled { color: #0d7378; border-color: #0d7378; animation: course-bearing-lock .28s ease-out; }
.course-rule { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem; margin: 1.15rem 0 0; color: #665338; font-size: .78rem; }
.course-rule span { padding: .1rem .45rem; border-radius: 2rem; color: white; background: #277f83; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.course-divider { position: relative; z-index: 2; height: .65rem; max-width: 45rem; margin: .7rem auto; overflow: hidden; border: .08rem solid #5f3f24; border-radius: 2rem; background: #bc853f; }
.course-divider span { display: block; width: 24%; height: 100%; background: linear-gradient(90deg, transparent, #ffe7a4, transparent); animation: course-divider-scan 2.6s linear infinite; }
.course-bearing-panel { position: relative; z-index: 2; max-width: 52rem; margin: 0 auto; }
.course-bearing-panel > p { margin: 0 0 .6rem; color: #f9e5b2; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.course-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.course-option { display: grid; grid-template-columns: 2rem 1fr; align-items: center; min-height: 3.4rem; padding: .45rem .8rem; border: .15rem solid #d2a14f; border-radius: .55rem; color: #173846; background: linear-gradient(#fff8df, #e8d5a5); box-shadow: 0 .24rem 0 #714925; cursor: pointer; text-align: left; transition: transform .15s, filter .15s, border-color .15s; }
.course-option > span { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; color: white; background: #315d69; font-size: .7rem; font-weight: 900; }
.course-option > strong { font: 800 1rem/1.2 Georgia, serif; }
.course-option:hover:not(:disabled), .course-option:focus-visible { filter: brightness(1.05); transform: translateY(-.08rem); }
.course-option.is-selected { border-color: #38b4b1; background: #d9f2e9; box-shadow: 0 .24rem 0 #176e70, 0 0 0 .16rem rgba(56,180,177,.22); }
.course-option.is-rejected { color: #755f58; border-color: #a48f83; background: #d6cfca; box-shadow: none; opacity: .62; text-decoration: line-through; }
.course-option.is-correct { color: #145447; border-color: #218b72; background: #d9f1df; box-shadow: 0 .24rem 0 #176a57; opacity: 1; text-decoration: none; animation: course-bearing-lock .4s ease-out; }
.course-feedback { margin: .85rem 0 0; }
.course-feedback.correct { color: #17604e; background: #dff1e9; }
.course-feedback.incorrect { color: #842f2b; background: #fae4df; }
.course-audit-card { margin-top: .8rem; padding: 1rem; border: .14rem solid #29888a; border-radius: .65rem; background: #eff8f5; box-shadow: 0 .35rem .8rem rgba(22,61,65,.14); animation: course-audit-open .38s ease-out both; }
.course-audit-card.is-failed { border-color: #d35b51; background: #fff0ec; }
.course-audit-card .eyebrow { margin: 0 0 .5rem; color: #b54c35; }
.course-audit-card h4 { margin: 0 0 .4rem; color: #173846; }
.course-audit-card > p { line-height: 1.5; }
.course-definitions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: .75rem 0; }
.course-definitions div { padding: .65rem .75rem; border: 1px solid #b8d0cd; border-radius: .45rem; background: rgba(255,255,255,.72); }
.course-definitions dt { color: #0d7378; font-weight: 900; text-transform: capitalize; }
.course-definitions dd { margin: .2rem 0 0; color: #405961; font-size: .82rem; line-height: 1.4; }
.course-completed-log { margin: .65rem 0 0; padding: .65rem .75rem; border-left: .22rem solid #d6a438; background: white; font-family: Georgia, serif; }
.course-completed-log .course-answer-blank { min-width: 0; border: 0; color: #0d7378; font-weight: 900; }
.course-controls { display: flex; justify-content: flex-end; gap: .7rem; margin-top: .85rem; }
.course-next { margin-left: auto; }
.course-chart-table.is-caliper-hit { animation: course-chart-shudder .48s ease-in-out; }
.course-chart-table.is-caliper-hit .course-calipers { animation: rigging-token-shake .42s ease-in-out; }

.course-result { display: grid; min-height: 30rem; align-content: center; justify-items: center; gap: .7rem; padding: 1.5rem; border-radius: .85rem; color: white; background: linear-gradient(#164d61, #0f3443); text-align: center; }
.course-result.is-retry { background: linear-gradient(#5a6670, #35444c); }
.course-result h3 { margin: 0; color: #f3c35d; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.course-result > p:not(.eyebrow) { max-width: 39rem; margin: 0; line-height: 1.5; }
.course-result-chart { position: relative; width: min(36rem, 94%); height: 10rem; overflow: hidden; border: .16rem solid #d2a14f; border-radius: .6rem; background: repeating-linear-gradient(0deg, transparent 0 1.9rem, rgba(225,239,225,.13) 2rem), repeating-linear-gradient(90deg, transparent 0 1.9rem, rgba(225,239,225,.13) 2rem), #1d6074; }
.course-result-chart .route-line { position: absolute; left: 13%; top: 61%; width: 70%; height: .2rem; border-top: .22rem dashed #f5ca68; transform: rotate(-12deg); transform-origin: left; animation: course-route-draw 1.8s ease-out both; }
.course-result-chart i { position: absolute; width: .75rem; height: .75rem; border: .15rem solid #fff0b9; border-radius: 50%; background: #db7b3d; box-shadow: 0 0 0 .22rem rgba(255,240,185,.18); animation: course-waypoint-pop .3s ease-out both; }
.course-result-chart i:nth-of-type(1) { left: 13%; top: 56%; animation-delay: .2s; }
.course-result-chart i:nth-of-type(2) { left: 30%; top: 47%; animation-delay: .55s; }
.course-result-chart i:nth-of-type(3) { left: 47%; top: 40%; animation-delay: .9s; }
.course-result-chart i:nth-of-type(4) { left: 64%; top: 31%; animation-delay: 1.25s; }
.course-result-chart i:nth-of-type(5) { left: 81%; top: 22%; animation-delay: 1.6s; }
.course-captain { position: absolute; z-index: 2; left: 6%; bottom: .8rem; width: 2.2rem; height: 3.6rem; border-radius: 1rem 1rem .35rem .35rem; background: #e46c3b; box-shadow: 0 1.1rem 0 -.65rem #152f39; animation: result-crew-lash .8s ease-in-out infinite alternate; }

.weather-game { color: #173846; text-align: left; }
.weather-progress { grid-template-columns: repeat(3, 1fr); }
.weather-console { position: relative; overflow: hidden; padding: 1.1rem; border: .28rem solid #523822; border-radius: .9rem; background: linear-gradient(rgba(25,69,73,.92), rgba(14,48,57,.96)), #173d48; box-shadow: inset 0 0 0 .18rem #c18b40, inset 0 0 2.5rem rgba(0,0,0,.45), 0 .6rem 1rem rgba(23,44,48,.25); }
.weather-console-glow { position: absolute; inset: -30%; opacity: .16; background: conic-gradient(from 20deg, transparent, #d9f2e9, transparent 24%, transparent 68%, #f3c467, transparent 78%); animation: weather-console-glow 8s linear infinite; }
.weather-instrument-head { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem auto; gap: 1rem; align-items: center; padding: .85rem 1rem; border: .12rem solid rgba(246,220,160,.55); border-radius: .7rem; background: rgba(5,35,42,.52); color: #fff6d9; }
.weather-instrument-head p { margin: 0 0 .15rem; color: #f3c467; font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.weather-instrument-head h3 { margin: 0; color: white; font: 800 clamp(1.25rem, 3vw, 1.8rem)/1.15 Georgia, serif; }
.weather-instrument-head > div:first-child > span { display: block; margin-top: .3rem; color: #bcdde2; font-size: .72rem; }
.weather-dial { position: relative; width: 7rem; height: 4rem; overflow: hidden; justify-self: center; border: .28rem solid #b67d30; border-bottom: .7rem solid #6b4828; border-radius: 7rem 7rem .5rem .5rem; background: repeating-conic-gradient(from 270deg at 50% 100%, #e3c57f 0 2deg, transparent 2deg 12deg), radial-gradient(circle at 50% 100%, #f4e8be 0 52%, #2e565d 53%); box-shadow: inset 0 0 .8rem rgba(58,38,18,.45), 0 .3rem .5rem rgba(0,0,0,.3); }
.weather-dial::before { content: "LOW"; position: absolute; left: .45rem; bottom: .28rem; color: #61492f; font-size: .48rem; font-weight: 900; }
.weather-dial::after { content: "HIGH"; position: absolute; right: .35rem; bottom: .28rem; color: #8f372c; font-size: .48rem; font-weight: 900; }
.weather-dial-needle { position: absolute; z-index: 2; left: 50%; bottom: .16rem; width: 2.7rem; height: .18rem; border-radius: 1rem; background: #b43c35; transform: rotate(-28deg); transform-origin: left center; transition: transform .35s ease; }
.weather-dial i { position: absolute; z-index: 3; left: calc(50% - .32rem); bottom: -.08rem; width: .64rem; height: .64rem; border: .12rem solid #5c3a20; border-radius: 50%; background: #d6a249; }
.weather-dial.is-warning { animation: weather-dial-shake .6s ease-in-out; }
.weather-dial.is-warning .weather-dial-needle { animation: weather-needle-flail .55s ease-in-out; }
.weather-game.is-correct .weather-dial-needle { transform: rotate(28deg); }
.weather-pressure-pins { display: flex; gap: .45rem; align-items: center; }
.weather-pressure-pin { position: relative; display: block; width: 1.2rem; height: 2.8rem; border: .12rem solid #64421f; border-radius: .65rem .65rem .35rem .35rem; background: linear-gradient(90deg, #946625, #f1c461 50%, #9a6522); box-shadow: inset 0 .15rem .2rem rgba(255,255,255,.35), 0 .2rem .3rem rgba(0,0,0,.3); transform-origin: bottom; transition: transform .25s, filter .25s; }
.weather-pressure-pin::after { content: ""; position: absolute; left: .16rem; right: .16rem; bottom: .15rem; height: .72rem; border-radius: 50%; background: #d15d49; box-shadow: inset 0 .12rem .15rem rgba(255,255,255,.35); }
.weather-pressure-pin.is-broken { filter: grayscale(.65) brightness(.65); transform: rotate(18deg) translateY(.2rem); }
.weather-pressure-pin.is-broken::before { content: ""; position: absolute; left: -.15rem; top: .8rem; width: 1.35rem; border-top: .18rem solid #2a2520; transform: rotate(-24deg); }
.weather-scale-labels { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; margin: 1rem .2rem .55rem; color: #ffe6a4; font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.weather-scale-labels i { height: .15rem; background: linear-gradient(90deg, #66c6bd, #f3c467, #e25d4b); }
.weather-scale-labels i::after { content: ""; float: right; margin-top: -.26rem; border-top: .32rem solid transparent; border-bottom: .32rem solid transparent; border-left: .55rem solid #e25d4b; }
.weather-scale-rail { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; padding: .75rem; border: .18rem solid #a36e2e; border-radius: .65rem; background: linear-gradient(#d8c79d, #bba272); box-shadow: inset 0 .25rem .55rem rgba(60,41,20,.25); }
.weather-scale-slot { position: relative; display: grid; min-height: 5.5rem; place-items: center; padding: 1.45rem .35rem .45rem; border: .13rem dashed #78684e; border-radius: .5rem; background: rgba(255,249,222,.48); transition: border-color .15s, background .15s; }
.weather-scale-slot.is-filled { border-style: solid; border-color: #3e7578; background: rgba(245,251,235,.88); }
.weather-scale-slot.is-weather-dragover, .weather-reading-pool.is-weather-dragover { border-color: #f3c467; background-color: rgba(255,239,194,.94); }
.weather-slot-number { position: absolute; left: .3rem; top: .25rem; display: grid; width: 1.3rem; height: 1.3rem; place-items: center; border-radius: 50%; color: white; background: #315a63; font-size: .62rem; font-weight: 900; }
.weather-empty-slot { color: #756b5d; font-size: .64rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.weather-reading-tile { position: relative; min-width: 6rem; min-height: 2.8rem; padding: .55rem .65rem .55rem 1.15rem; border: .16rem solid #67502c; border-radius: .35rem .7rem .7rem .35rem; color: #173846; background: linear-gradient(110deg, #d6ae5e, #f4d98d 54%, #c9913e); box-shadow: 0 .26rem 0 #4b3824, 0 .36rem .4rem rgba(0,0,0,.2); cursor: pointer; touch-action: manipulation; }
.weather-reading-tile > span { position: absolute; left: -.34rem; top: 50%; width: .8rem; height: .8rem; border: .16rem solid #684c29; border-radius: 50%; background: #d8eadf; transform: translateY(-50%); }
.weather-reading-tile > strong { font: 800 clamp(.72rem, 1.6vw, 1rem)/1.1 Georgia, serif; }
.weather-reading-tile:hover:not(:disabled), .weather-reading-tile:focus-visible { filter: brightness(1.05); transform: translateY(-.08rem); }
.weather-reading-tile.is-dragging { opacity: .45; }
.weather-game.is-correct .weather-scale-slot, .weather-game.is-failed .weather-scale-slot { border-color: #23898b; background: #d8f0eb; }
.weather-game.is-correct .weather-scale-slot .weather-reading-tile, .weather-game.is-failed .weather-scale-slot .weather-reading-tile { color: white; border-color: #176e70; background: linear-gradient(110deg, #238e90, #32aaac); box-shadow: 0 .25rem 0 #155d5e; animation: weather-tile-lock .38s ease-out both; }
.weather-reading-pool { position: relative; z-index: 2; margin-top: .8rem; padding: .85rem; border: .16rem solid #88a3a4; border-radius: .65rem; background: #dce9e6; }
.weather-reading-pool > div:first-child { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; color: #456068; font-size: .74rem; }
.weather-reading-pool > div:first-child strong { color: #1c4654; letter-spacing: .06em; text-transform: uppercase; }
.weather-reading-list { display: flex; min-height: 3.5rem; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.weather-pool-empty { align-self: center; color: #647b80; font-size: .8rem; }
.weather-feedback { margin: .85rem 0 0; }
.weather-feedback.correct { color: #17604e; background: #dff1e9; }
.weather-feedback.incorrect { color: #842f2b; background: #fae4df; }
.weather-audit-card { margin-top: .8rem; padding: 1rem; border: .14rem solid #29888a; border-radius: .7rem; background: #eff8f5; box-shadow: 0 .35rem .8rem rgba(22,61,65,.14); animation: weather-audit-open .4s ease-out both; }
.weather-audit-card.is-failed { border-color: #d35b51; background: #fff0ec; }
.weather-audit-card .eyebrow { margin: 0 0 .4rem; color: #b54c35; }
.weather-audit-card h4 { margin: 0 0 .75rem; color: #173846; }
.weather-audit-spectrum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; counter-reset: weather-spectrum; }
.weather-audit-spectrum li { position: relative; padding: .75rem .7rem; border: 1px solid #b8d0cd; border-radius: .5rem; background: rgba(255,255,255,.82); counter-increment: weather-spectrum; }
.weather-audit-spectrum li:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; right: -.48rem; top: .55rem; color: #b7792a; font-weight: 900; }
.weather-audit-spectrum strong { display: block; margin-bottom: .3rem; color: #0d7378; font-family: Georgia, serif; }
.weather-audit-spectrum span { color: #405961; font-size: .76rem; line-height: 1.4; }
.weather-context { margin: .7rem 0 0; padding: .65rem .75rem; border-left: .22rem solid #d6a438; background: white; line-height: 1.45; }
.weather-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; margin-top: .85rem; }
.weather-next { margin-left: auto; }

.weather-result { display: grid; min-height: 30rem; align-content: center; justify-items: center; gap: .7rem; padding: 1.5rem; border-radius: .85rem; color: white; background: linear-gradient(#225c66, #123c49); text-align: center; }
.weather-result.is-retry { background: linear-gradient(#626971, #38444b); }
.weather-result h3 { margin: 0; color: #f3c35d; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.weather-result > p:not(.eyebrow) { max-width: 39rem; margin: 0; line-height: 1.5; }
.weather-result-instruments { position: relative; width: min(34rem, 94%); height: 10rem; border: .18rem solid #bd8740; border-radius: .65rem; background: linear-gradient(rgba(31,91,98,.78), rgba(16,54,64,.9)), repeating-linear-gradient(90deg, transparent 0 2rem, rgba(255,255,255,.08) 2.05rem); }
.result-barometer { position: absolute; left: 12%; top: 1rem; width: 7rem; height: 7rem; border: .35rem solid #c58e40; border-radius: 50%; background: radial-gradient(circle, #f3e7bd 0 57%, #2f5960 58%); }
.result-barometer::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 2.5rem; height: .18rem; border-radius: 1rem; background: #b43c35; transform: rotate(-25deg); transform-origin: left; animation: result-barometer-settle 1.2s ease-in-out infinite alternate; }
.result-barometer i { position: absolute; z-index: 2; left: calc(50% - .3rem); top: calc(50% - .3rem); width: .6rem; height: .6rem; border-radius: 50%; background: #d49b3b; }
.result-vane { position: absolute; left: 50%; top: 1.1rem; width: .25rem; height: 7rem; background: #d1b06c; }
.result-vane::before { content: ""; position: absolute; left: -2.4rem; top: .65rem; width: 5rem; height: 1rem; background: #e26d3e; clip-path: polygon(0 50%, 72% 0, 72% 35%, 100% 35%, 100% 65%, 72% 65%, 72% 100%); animation: result-vane-turn 1.4s ease-in-out infinite alternate; }
.result-log { position: absolute; right: 10%; top: 2rem; width: 7rem; height: 5.5rem; border: .2rem solid #8d6738; border-radius: .35rem; background: repeating-linear-gradient(#f0dfad 0 1rem, #c8b27e 1.04rem 1.1rem); transform: rotate(3deg); }

.lookout-game { color: #173846; text-align: left; }
.lookout-progress { grid-template-columns: repeat(3, 1fr); }
.lookout-binoculars { display: grid; grid-template-columns: 1fr; align-items: center; gap: 1rem; padding: 1rem; border: 2px solid #b9985e; border-radius: .9rem; background: linear-gradient(135deg, #254957, #143440); box-shadow: 0 .5rem 1rem rgba(21,47,53,.18); }
.lookout-station-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; grid-column: 1 / -1; padding-bottom: .7rem; border-bottom: 1px solid #52717b; color: #fff3d2; }
.lookout-watch-label { display: block; margin-bottom: .25rem; color: #bfcecf; font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.lookout-station-heading strong { font: 800 1.2rem/1.2 Georgia, serif; }
.lookout-viewfinder { position: relative; width: min(12rem, 100%); aspect-ratio: 1; justify-self: center; overflow: hidden; border: .4rem solid #b88b44; border-radius: 50%; background: #789ca5; box-shadow: 0 0 0 3px #523d25, inset 0 0 0 3px #f4d691, 0 .4rem .9rem #0b2835; }
.lookout-horizon-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .5s; filter: blur(1px) saturate(.65); }
.lookout-viewfinder::after { content: ""; position: absolute; inset: 0; border: 3px solid #efd399; border-radius: 50%; box-shadow: inset 0 0 1.5rem #163846; pointer-events: none; }
.lookout-fog { position: absolute; inset: -20% -30%; pointer-events: none; opacity: .65; background: radial-gradient(ellipse at 40% 48%, #edf5ef 0, #edf5ef99 25%, transparent 60%), linear-gradient(5deg, transparent 40%, #e3efeaad 52%, transparent 65%); animation: lookout-fog-drift 12s ease-in-out infinite alternate; transition: opacity .6s; }
.lookout-reticle { position: absolute; inset: 12%; border: 1px solid #fbf0c559; border-radius: 50%; pointer-events: none; }
.lookout-reticle::before, .lookout-reticle::after { content: ""; position: absolute; left: calc(50% - 1px); width: 2px; height: .65rem; background: #fff0b4; box-shadow: 0 0 .3rem #123b4a; }
.lookout-reticle::before { top: -.35rem; }
.lookout-reticle::after { bottom: -.35rem; }
.lookout-compass { position: absolute; left: calc(50% - .5rem); top: 1.5rem; color: #fff2b9; font: 900 .75rem/1 monospace; text-shadow: 0 1px 2px #193c4a; }
.lookout-viewfinder.is-clear .lookout-fog { opacity: .08; }
.lookout-viewfinder.is-clear .lookout-horizon-art { filter: none; }
.lookout-sighting-copy { min-width: 0; padding: 1rem; border: 1px solid #e0c58f; border-radius: .65rem; color: #173846; background: #fff9e9; }
.lookout-sighting-copy > p { margin: 0 0 .8rem; color: #96503b; font-size: .7rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.lookout-step { display: block; color: #556d70; font-size: .75rem; font-weight: 800; }
.lookout-sighting-copy h3 { margin: .35rem 0 1rem; color: #173846; font: 800 clamp(1.08rem, 2vw, 1.35rem)/1.35 Georgia, serif; }
.lookout-optical-signal { display: flex; min-height: 4rem; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; margin-top: .4rem; padding: .7rem .5rem; border: 1px solid #809b9e; border-radius: .55rem; background: #e1eeeb; color: #123e4c; font: 900 clamp(1.15rem, 2.6vw, 1.8rem)/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.lookout-missing-segment { display: inline-grid; min-width: 3.2rem; min-height: 2.8rem; place-items: center; padding: .15rem .4rem; border: 2px dashed #9b7235; border-radius: .35rem; color: #173b4a; background: #ffdf91; transition: background .16s, transform .16s; }
.lookout-missing-segment.is-filled { border-style: solid; border-color: #236e67; color: #fff; background: #28766e; }
.lookout-missing-segment.is-lookout-dragover { background: #ffcb55; transform: scale(1.05); }
.lookout-root-hint { display: grid; gap: .3rem; margin-top: .8rem; padding: .65rem .75rem; border-left: 3px solid #cf9b45; border-radius: .25rem; color: #405960; background: #f1ead6; font-size: .85rem; line-height: 1.45; }
.lookout-root-hint strong { color: #875333; font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; }
.lookout-ring-bank { display: flex; align-items: center; gap: .65rem; padding: .4rem .6rem; border: 1px solid #66828a; border-radius: .5rem; background: #13313d; }
.lookout-ring-bank > span { color: #d5e0dc; font-size: .7rem; font-weight: 800; }
.lookout-ring-bank > div { display: flex; gap: .4rem; }
.lookout-focus-ring { display: block; width: 1.2rem; height: 1.2rem; border: .22rem double #f1c25d; border-radius: 50%; box-shadow: inset 0 0 0 .12rem #765021; }
.lookout-focus-ring.is-slipped { opacity: .3; border-style: dashed; }
.lookout-binoculars.is-focus-error .lookout-viewfinder { animation: lookout-focus-shake .55s ease-in-out; }
.lookout-binoculars.is-focus-error .lookout-fog { opacity: .85; }
.lookout-segment-tray { margin-top: .85rem; padding: .85rem; border: 1px solid #b5c9c7; border-radius: .7rem; background: #f4f8f2; }
.lookout-segment-tray > div:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem; margin-bottom: .7rem; color: #536e72; font-size: .78rem; }
.lookout-segment-tray > div:first-child strong { color: #1d4854; font-size: .75rem; }
.lookout-segment-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.lookout-segment-tile { position: relative; display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); min-height: 4.5rem; align-items: center; gap: .25rem .5rem; padding: .65rem; border: 2px solid #ba9959; border-radius: .6rem; color: #173846; background: linear-gradient(115deg, #fff3cd, #f5dda5); box-shadow: 0 .2rem 0 #9c793f; cursor: pointer; touch-action: manipulation; transition: transform .15s, background .15s; }
.lookout-choice-key { display: grid; width: 1.3rem; height: 1.3rem; place-items: center; border-radius: 50%; color: #fff; background: #315764; font-size: .65rem; font-weight: 900; }
.lookout-segment-tile > strong { min-width: 0; font: 900 clamp(.95rem, 1.8vw, 1.2rem)/1.15 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .03em; overflow-wrap: anywhere; }
.lookout-choice-state { grid-column: 1 / -1; color: #586c68; font-size: .7rem; font-weight: 800; }
.lookout-segment-tile:hover:not(:disabled) { transform: translateY(-.1rem); }
.lookout-segment-tile:focus-visible { outline: 3px solid #ce813b; outline-offset: 3px; }
.lookout-segment-tile.is-selected { border-color: #176e70; background: #d2eee7; box-shadow: 0 .2rem 0 #155d5e; }
.lookout-segment-tile.is-rejected { border-color: #b97866; color: #8a4536; background: #f7e9e0; box-shadow: 0 .2rem 0 #b97866; }
.lookout-segment-tile.is-rejected > strong { text-decoration: line-through; }
.lookout-segment-tile.is-correct { border-color: #1c7568; color: #fff; background: #287b68; box-shadow: 0 .2rem 0 #155d5e; }
.lookout-segment-tile.is-correct .lookout-choice-state { color: #fff; }
.lookout-segment-tile.is-dragging { opacity: .45; }
.lookout-feedback { margin: .85rem 0 0; }
.lookout-feedback.correct { color: #17604e; background: #dff1e9; }
.lookout-feedback.incorrect { color: #842f2b; background: #fae4df; }
.lookout-meaning { margin: .6rem 0; padding: .6rem .8rem; color: #244d54; line-height: 1.45; }
@media (min-width: 700px) {
  .lookout-binoculars { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); padding: 1.1rem; }
  .lookout-viewfinder { width: min(17rem, 100%); }
  .lookout-segment-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lookout-field-log { margin-top: .8rem; padding: 1rem; border: .14rem solid #288e8e; border-radius: .7rem; background: #f0f8f4; box-shadow: 0 .35rem .8rem rgba(22,61,65,.14); animation: lookout-log-open .4s ease-out both; }
.lookout-field-log.is-failed { border-color: #d35b51; background: #fff0ec; }
.lookout-field-log .eyebrow { margin: 0 0 .55rem; color: #b54c35; }
.lookout-word-reveal { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .7rem .85rem; border-left: .25rem solid #d5a13e; background: white; }
.lookout-word-reveal span { color: #687e80; font-size: .65rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.lookout-word-reveal strong { min-width: 0; overflow-wrap: anywhere; color: #0f7477; font: 900 clamp(1.4rem, 4vw, 2.1rem)/1 Georgia, serif; }
.lookout-field-log dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: .75rem 0; }
.lookout-field-log dl div { padding: .7rem; border: 1px solid #c4d7d2; border-radius: .45rem; background: rgba(255,255,255,.78); }
.lookout-field-log dt { margin-bottom: .3rem; color: #9e4b36; font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.lookout-field-log dd { margin: 0; color: #40585e; font-size: .88rem; line-height: 1.45; }
.lookout-field-log dd .lookout-missing-segment { min-width: 2.4rem; min-height: 1.5rem; font-size: .72rem; vertical-align: middle; }
.lookout-context { margin: 0; padding: .65rem .75rem; border-left: .22rem solid #d6a438; background: white; line-height: 1.45; }
.lookout-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; margin-top: .85rem; }
.lookout-controls button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.lookout-next { margin-left: auto; }
.lookout-result { display: grid; min-height: 30rem; align-content: center; justify-items: center; gap: .7rem; padding: 1.5rem; border-radius: .85rem; color: white; background: linear-gradient(#1d6170, #123b49); text-align: center; }
.lookout-result.is-retry { background: linear-gradient(#626d73, #35454d); }
.lookout-result h3 { margin: 0; color: #f3c35d; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.lookout-result > p:not(.eyebrow) { max-width: 40rem; margin: 0; line-height: 1.5; }
.lookout-result-view { width: min(18rem, 90%); }
.passport-word-earned { border-color: #d7b568; background: #fff9e8; }
.passport-word small { display: block; margin-top: .3rem; color: #8a6728; font-size: .68rem; font-weight: 800; }

.game-dialog {
  width: min(42rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  padding: clamp(1.35rem, 4vw, 2.25rem);
  overflow: auto;
  border: 0;
  border-radius: 1.15rem;
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow);
}
.activity-dialog { width: min(68rem, calc(100% - 2rem)); }
.activity-dialog[open] { animation: dialog-arrive .24s ease-out; }
.departure-dialog { width: min(72rem, calc(100% - 1.5rem)); padding: 0; overflow: hidden; background: #0c2f3d; }
.departure-dialog[open] { animation: departure-dialog-arrive .35s ease-out; }
.game-dialog::backdrop { background: rgba(5, 25, 34, .72); backdrop-filter: blur(3px); }
.game-dialog h2 { margin-bottom: 1rem; }
.dialog-close { position: absolute; right: .8rem; top: .65rem; min-width: 44px; min-height: 44px; padding: .2rem .5rem; border: 0; color: var(--muted); background: transparent; font-size: 1.8rem; }
.dialog-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Audited phases remain usable in portrait and either native landscape direction. */
#sceneScreen { padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
#sceneScreen .activity-point { min-width: 44px; min-height: 44px; }
.phase1-dialog, .phase2-dialog, #miniGameIntroDialog, #departureDialog, #phase3DepartureDialog, #activityDialog.phase3-dialog, #activityDialog.phase4-dialog, #activityDialog.phase5-dialog, #activityDialog.phase6-dialog, #activityDialog.phase7-dialog, #voyageDiplomaDialog, #phase4DepartureDialog, #phase5DepartureDialog, #phase6DepartureDialog, #phase7DepartureDialog, #salvageIntroDialog {
  left: env(safe-area-inset-left); right: env(safe-area-inset-right);
  top: env(safe-area-inset-top); bottom: env(safe-area-inset-bottom);
  width: min(68rem, calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-width: calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right));
  max-height: calc(100vh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto; overscroll-behavior: contain;
}
:is(.phase1-dialog, .phase2-dialog, .phase3-dialog, .phase4-dialog, .phase5-dialog, .phase6-dialog, .phase7-dialog) { padding: clamp(.75rem, 2.5vw, 2.25rem); }
:is(.phase1-dialog, .phase2-dialog, .phase3-dialog, .phase4-dialog, .phase5-dialog, .phase6-dialog, .phase7-dialog) #activityTitle { padding-right: 2.8rem; }
:is(.phase1-dialog, .phase2-dialog, .phase3-dialog, .phase4-dialog, .phase5-dialog, .phase6-dialog, .phase7-dialog) .game-progress { flex-wrap: wrap; }
:is(.phase1-dialog, .phase2-dialog, .phase3-dialog, .phase4-dialog, .phase5-dialog, .phase6-dialog, .phase7-dialog) .game-progress > span { min-width: 0; }
:is(.phase1-dialog, .phase2-dialog, .phase3-dialog, .phase4-dialog, .phase5-dialog, .phase6-dialog, .phase7-dialog) .activity-preview { min-width: 0; }
:is(.phase1-dialog, .phase2-dialog, .phase3-dialog, .phase4-dialog, .phase5-dialog, .phase6-dialog, .phase7-dialog) button { min-width: 44px; min-height: 44px; touch-action: manipulation; }
.phase1-dialog .rpg-dpad button { touch-action: none; }
#activityDialog.ship3d-dialog[open] { padding: 0; width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: none; height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height: none; border: 0; border-radius: 0; overflow: hidden; background: #102f39; }
#activityDialog.ship3d-dialog > :not(#activityPreview) { display: none; }
#activityDialog.ship3d-dialog #activityPreview { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; }
.ship3d-host { display: block; width: 100%; height: 100%; border: 0; }
:is(#departureDialog, #phase3DepartureDialog, #phase4DepartureDialog, #phase5DepartureDialog, #phase6DepartureDialog) .departure-caption { position: static; padding: .65rem .85rem; background: #143c4c; }
:is(#departureDialog, #phase3DepartureDialog, #phase4DepartureDialog, #phase5DepartureDialog, #phase6DepartureDialog) .departure-video-frame video { max-height: min(52vh, 36rem); max-height: min(52dvh, 36rem); }
:is(#departureDialog, #phase3DepartureDialog, #phase4DepartureDialog, #phase5DepartureDialog, #phase6DepartureDialog) .dialog-actions button { min-width: 44px; min-height: 44px; }
.phase3-dialog { overflow-wrap: anywhere; }
.phase4-dialog { overflow-wrap: anywhere; }
.phase5-dialog { overflow-wrap: anywhere; }
.phase6-dialog { overflow-wrap: anywhere; }
.phase7-dialog, #voyageDiplomaDialog { overflow-wrap: anywhere; }
.phase7-dialog :is(button, summary):focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.phase7-dialog :is(.gangway-length, .gallery-blank) { white-space: normal; min-width: 0; max-width: 100%; }
.phase7-dialog .gangway-letter-strip .gangway-letter { flex-basis: max(44px, 1.6em); width: max(44px, 1.6em); height: max(44px, 1.6em); }
.phase7-dialog .word-entry { margin: .75rem 0; padding: .6rem; border: 1px solid #8ba8ae; border-radius: .4rem; background: #fffdf6; color: #173b4d; }
.phase7-dialog .word-entry summary { min-width: 44px; min-height: 44px; padding: .65rem .2rem; cursor: pointer; touch-action: manipulation; }
.phase7-dialog .word-entry-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(44px, 2.7rem), 1fr)); gap: .4rem; }
.phase7-dialog .word-entry-keys button { padding: .3rem; border: 1px solid #527783; border-radius: .3rem; background: #e6f1ee; color: #173b4d; font: 700 1.1rem/1.4 Georgia, serif; }
.phase7-dialog .word-entry-keys .word-entry-delete { grid-column: 1 / -1; font: inherit; }
.phase7-dialog .word-entry-preview { font-weight: 700; overflow-wrap: anywhere; }
.phase7-dialog :is(.postcards-heading, .postcards-paper-footer) { flex-wrap: wrap; }
.phase7-dialog .postcards-heading > div { min-width: 0; max-width: 100%; }
.phase7-dialog .keepsake-display { grid-template-columns: minmax(0, 1fr); }
.phase7-dialog .keepsake-artifact { width: 5rem; max-width: 100%; }
#homecomingScreen { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
#homecomingScreen .game-header > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#homecomingScreen button, #voyageDiplomaDialog button { min-width: 44px; min-height: 44px; touch-action: manipulation; overflow-wrap: anywhere; white-space: normal; }
.homecoming-activity-point .station-name { display: none; }
#voyageDiplomaDialog { box-sizing: border-box; }
#voyageDiplomaDialog h2 { padding-right: 2rem; }
#voyageDiplomaDialog .voyage-gold-seal { flex-wrap: wrap; }
@media (min-width: 700px) { .phase7-dialog .keepsake-display { grid-template-columns: 5rem minmax(0, 1fr); } }
@media (max-width: 700px) {
  #homecomingScreen .homecoming-viewport { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .55rem; padding: .55rem; aspect-ratio: auto; }
  #homecomingScreen .homecoming-viewport > img { position: static; grid-column: 1 / -1; width: 100%; height: auto; transform: none; }
  #homecomingScreen .homecoming-viewport::after { display: none; }
  #homecomingScreen .homecoming-activity-point { position: static; display: flex; width: 100%; max-width: none; min-width: 44px; height: auto; transform: none; gap: .45rem; padding: .45rem; border: 1px solid #b89863; border-radius: .6rem; background: #fff0ce; }
  #homecomingScreen .homecoming-activity-point .station-name { display: block; position: static; width: auto; height: auto; overflow: visible; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}
.phase6-dialog button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.phase6-dialog .activity-preview { min-width: 0; padding: clamp(.5rem, 2vw, 1.2rem); }
.phase6-dialog .triad-letters { grid-template-columns: repeat(auto-fit, minmax(max(44px, 2.7rem), 1fr)); }
.phase6-dialog :is(.current-options, .barometric-words) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.phase6-dialog .barometric-gauges { flex-wrap: wrap; }
.phase6-dialog :is(.hatch-brackets button strong, .pelagic-groups button strong) { min-width: 0; max-width: 100%; }
#drakePassageScreen { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
#drakePassageScreen button { min-width: 44px; min-height: 44px; touch-action: manipulation; overflow-wrap: anywhere; white-space: normal; }
.drake-activity-point .station-name { display: none; }
#phase7DepartureDialog .departure-heading { min-width: 0; flex-wrap: wrap; }
#phase7DepartureDialog .departure-heading > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#phase7DepartureDialog .dialog-actions { flex-wrap: wrap; }
@media (max-width: 700px) {
  #drakePassageScreen .drake-viewport { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .55rem; padding: .55rem; aspect-ratio: auto; }
  #drakePassageScreen .drake-viewport > img { position: static; grid-column: 1 / -1; width: 100%; height: auto; transform: none; }
  #drakePassageScreen .drake-viewport::after { display: none; }
  #drakePassageScreen .drake-activity-point { position: static; display: flex; width: 100%; max-width: none; height: auto; transform: none; gap: .45rem; padding: .45rem; border: 1px solid #8bb1bb; border-radius: .6rem; background: #e1f2f1; }
  #drakePassageScreen .drake-activity-point .station-name { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  #phase7DepartureDialog .dialog-actions { flex-direction: column; }
}
.phase5-dialog button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.phase5-dialog .activity-preview { min-width: 0; padding: clamp(.5rem, 2vw, 1.2rem); }
.phase5-dialog :is(.blood-probes, .ice-core-probes, .krill-cells, .meteorite-lenses, .ice-river-pitons, .radio-tubes) { flex-wrap: wrap; }
.phase5-dialog :is(.blood-slot, .blood-tile, .krill-slot, .krill-tile) { min-width: max(44px, 1.6em); }
.phase5-dialog :is(.ice-core-options, .meteorite-choices, .radio-choices) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.phase5-dialog :is(.ice-core-blank, .meteorite-equation strong) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.phase5-dialog :is(.radio-console-top, .ice-core-lab-title) { flex-wrap: wrap; }
.phase5-dialog .krill-arrow { justify-self: center; pointer-events: none; }
#antarcticaScreen { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
#antarcticaScreen button { min-width: 44px; min-height: 44px; touch-action: manipulation; }
.antarctica-activity-point .station-name { display: none; }
#phase6DepartureDialog :is(.departure-heading, .departure-route, .departure-caption, .dialog-actions) { flex-wrap: wrap; min-width: 0; }
#phase6DepartureDialog .departure-route { white-space: normal; max-width: 100%; }
#miniGameIntroDialog .departure-heading { min-width: 0; flex-wrap: wrap; }
#miniGameIntroDialog .departure-heading > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  #antarcticaScreen .antarctica-viewport { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .55rem; padding: .55rem; aspect-ratio: auto; }
  #antarcticaScreen .antarctica-viewport > img { position: static; grid-column: 1 / -1; width: 100%; height: auto; transform: none; }
  #antarcticaScreen .antarctica-viewport::after { display: none; }
  #antarcticaScreen .antarctica-activity-point { position: static; display: flex; width: 100%; max-width: none; height: auto; transform: none; gap: .45rem; padding: .45rem; border: 1px solid #8bb1bb; border-radius: .6rem; background: #e1f2f1; }
  #antarcticaScreen .antarctica-activity-point .station-name { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  #antarcticaScreen .radio-map-launch { position: static; grid-column: 1 / -1; width: 100%; max-width: 100%; }
  #phase6DepartureDialog .dialog-actions { flex-direction: column; }
  .phase5-dialog .ice-core-tray { grid-template-columns: minmax(0, 1fr); }
  .phase5-dialog .ice-core-tube { flex-direction: row; min-height: 4rem; }
}
.phase4-dialog button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.phase4-dialog .activity-preview { min-width: 0; padding: clamp(.5rem, 2vw, 1.2rem); }
.phase4-dialog .game-progress { gap: .5rem; }
.phase4-dialog :is(.creche-ripple-bank, .territory-ring-bank, .salvage-valve-bank, .updraft-ring-bank, .cipher-seal-bank, .snowball-lives) { flex-wrap: wrap; }
.phase4-dialog .cipher-keys { grid-template-columns: repeat(auto-fit, minmax(max(44px, 2.7rem), 1fr)); }
.phase4-dialog .cipher-slot { min-width: max(44px, 2.7rem); }
.phase4-dialog .cipher-postmark { position: static; margin: 0 0 .6rem auto; }
.phase4-dialog .cipher-mapping { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.phase4-dialog :is(.creche-nest > div, .salvage-tags, .updraft-words) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.phase4-dialog :is(.creche-fusion span, .creche-fusion strong) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.phase4-dialog .salvage-yard { height: auto; }
.phase4-dialog .salvage-yard > img { height: clamp(9rem, 25vw, 15rem); }
.phase4-dialog .salvage-sector { position: static; padding: .75rem; background: #244c50; }
.phase4-dialog :is(.salvage-definitions, .updraft-definitions) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.phase4-dialog .snowball-target { font-size: clamp(.875rem, 1.25vw, .94rem); }
#southGeorgiaScreen { padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
#southGeorgiaScreen button { min-width: 44px; min-height: 44px; touch-action: manipulation; }
.south-georgia-activity-point .station-name { display: none; }
:is(#phase5DepartureDialog, #salvageIntroDialog) { overflow-wrap: anywhere; }
:is(#phase5DepartureDialog, #salvageIntroDialog) :is(.departure-heading, .departure-route, .departure-caption, .dialog-actions) { flex-wrap: wrap; min-width: 0; }
:is(#phase5DepartureDialog, #salvageIntroDialog) .departure-route { max-width: 100%; white-space: normal; }
@media (max-width: 700px) {
  #southGeorgiaScreen .south-georgia-viewport { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .55rem; padding: .55rem; aspect-ratio: auto; }
  #southGeorgiaScreen .south-georgia-viewport > img { position: static; grid-column: 1 / -1; width: 100%; height: auto; transform: none; }
  #southGeorgiaScreen .south-georgia-viewport::after { display: none; }
  #southGeorgiaScreen .south-georgia-activity-point { position: static; width: 100%; max-width: none; height: auto; transform: none; gap: .45rem; padding: .45rem; border-radius: .6rem; }
  #southGeorgiaScreen .south-georgia-activity-point .station-name { position: static; display: block; width: auto; height: auto; overflow: visible; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  #southGeorgiaScreen .snowball-map-launch { position: static; grid-column: 1 / -1; width: 100%; max-width: 100%; }
  #phase5DepartureDialog .dialog-actions { flex-direction: column; }
}
.phase3-dialog button:focus-visible, .phase3-dialog input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.phase3-dialog:not(.field-match-dialog) .activity-preview { padding: clamp(.5rem, 2vw, 1.2rem); }
.phase3-dialog .game-progress { gap: .5rem; }
.phase3-dialog .sonar-screen p { grid-template-columns: minmax(0, 1fr); }
.phase3-dialog :is(.sonar-blank, .sonar-answer-lock, .dispatch-blank) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.phase3-dialog :is(.sonar-frequency-options, .dispatch-word-bank > div) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.phase3-dialog .stone-word-group { flex-wrap: nowrap; min-width: 0; max-width: 100%; gap: 2px; padding: .2rem; border: 1px solid #79908b; border-radius: .35rem; }
.phase3-dialog .stone-letter { flex: 0 1 44px; min-width: 0; width: 44px; height: 44px; border: 1px solid #8fa4a0; border-radius: .2rem; }
@media (max-width: 700px) {
  .phase3-dialog .stone-letter-console { padding: .6rem; }
  .phase3-dialog .stone-sentence-strip { gap: .3rem; padding: .4rem; }
  .phase3-dialog .stone-word-group { gap: 1px; padding: .15rem; }
  .phase3-dialog .stone-letter { flex-basis: 1.35rem; width: 1.35rem; font-size: .85rem; }
}
.phase3-dialog .stone-answer-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.phase3-dialog .stone-answer-row input { width: 100%; min-width: 0; min-height: 44px; }
.phase3-dialog .stone-answer-boxes { grid-template-columns: repeat(var(--stone-word-length, 4), minmax(0, 1fr)); }
#falklandsScreen { padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
#falklandsScreen button { min-width: 44px; min-height: 44px; touch-action: manipulation; }
#falklandsScreen .falklands-activity-point > span:last-child { min-width: 0; overflow-wrap: anywhere; }
#phase4DepartureDialog { overflow-wrap: anywhere; }
#phase4DepartureDialog :is(.departure-heading, .departure-route, .departure-caption) { flex-wrap: wrap; min-width: 0; }
#phase4DepartureDialog .departure-route { max-width: 100%; white-space: normal; }
@media (max-width: 700px) {
  #falklandsScreen .falklands-viewport { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .55rem; padding: .55rem; aspect-ratio: auto; }
  #falklandsScreen .falklands-viewport > img { position: static; grid-column: 1 / -1; width: 100%; height: auto; transform: none; }
  #falklandsScreen .falklands-viewport::after { display: none; }
  #falklandsScreen .falklands-activity-point { position: static; width: 100%; max-width: none; height: auto; min-height: 44px; transform: none; border-radius: .6rem; }
  #falklandsScreen .falklands-activity-point > span:last-child { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  #falklandsScreen .falklands-location-label { min-width: 0; overflow-wrap: anywhere; }
}
#southernSeasScreen { padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
#southernSeasScreen .seas-activity-point { min-width: 44px; min-height: 44px; left: clamp(6rem, var(--x), calc(100% - 6rem)); }
.phase2-dialog button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.phase2-dialog { overflow-wrap: anywhere; }
.phase2-dialog .activity-preview { padding: clamp(.5rem, 2vw, 1.2rem); }
.phase2-dialog .course-answer-blank { min-width: min(6.2rem, 100%); max-width: 100%; }
.phase2-dialog .rigging-slot .rigging-token, .phase2-dialog .weather-scale-slot .weather-reading-tile { min-width: 0; width: 100%; max-width: 100%; padding: .55rem .25rem .55rem .5rem; }
.phase2-dialog .rigging-rail, .phase2-dialog .weather-scale-rail { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(6rem, calc((100% - 2.4rem) / 4))), 1fr)); }
.phase2-dialog .lookout-segment-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(7rem, calc((100% - 2.4rem) / 4))), 1fr)); }
.phase2-dialog .game-progress { gap: .5rem; }
.rigging-discard { max-width: 100%; font-size: .8rem; }
@media (max-width: 700px) {
  #southernSeasScreen .southern-seas-viewport { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .55rem; aspect-ratio: auto; }
  #southernSeasScreen .southern-seas-viewport > img { position: static; grid-column: 1 / -1; width: 100%; height: auto; transform: none; animation: none; }
  #southernSeasScreen .southern-seas-viewport::after { display: none; }
  #southernSeasScreen .seas-activity-point { position: static; width: 100%; max-width: none; min-width: 0; transform: none; border-radius: .6rem; font-size: .875rem; overflow-wrap: anywhere; }
  #southernSeasScreen .seas-activity-point > span:last-child { position: static; width: auto; height: auto; overflow: visible; white-space: normal; }
  #southernSeasScreen .glass-sub-entry { position: static; grid-column: 1 / -1; width: 100%; max-width: none; border-radius: .6rem; }
  #southernSeasScreen .glass-sub-entry span { display: inline; }
}
.story-copy { line-height: 1.7; }
.story-word-ending { white-space: nowrap; }
.word-chip { min-width: 44px; min-height: 44px; padding: .05rem .25rem; border: 0; border-bottom: 2px dotted var(--orange); color: #9f3e1d; background: #fff1d8; font-weight: 800; touch-action: manipulation; }
.word-chip[aria-pressed="true"] { color: var(--white); background: #9f3e1d; }
.word-chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.word-meaning { min-height: 3.5rem; padding: .85rem 1rem; border-left: 4px solid var(--gold); background: #edf4f2; line-height: 1.45; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.5rem; }
.departure-prompt-button { animation: departure-prompt-pulse 1.8s ease-in-out infinite; }
.departure-video-shell { padding: clamp(1rem, 3vw, 1.8rem); color: white; }
.departure-heading { display: flex; justify-content: space-between; gap: 1.25rem; align-items: end; margin-bottom: 1rem; }
.departure-heading .eyebrow { margin-bottom: .35rem; color: #f1b24d; }
.departure-heading h2 { margin: 0; color: white; font-size: clamp(1.6rem, 4vw, 2.7rem); }
.departure-route { display: flex; align-items: center; gap: .55rem; padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.35); border-radius: 2rem; color: #d7eaed; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.departure-route i { display: block; width: 3.5rem; height: .22rem; background: repeating-linear-gradient(90deg, #efb24d 0 .45rem, transparent .45rem .75rem); animation: route-dashes .8s linear infinite; }
.departure-video-frame { position: relative; overflow: hidden; border: .25rem solid #f7edda; border-radius: .85rem; background: #061b24; box-shadow: 0 1rem 2rem rgba(0,0,0,.35); }
.departure-video-frame video { display: block; width: 100%; max-height: min(66vh, 44rem); aspect-ratio: 16 / 9; object-fit: contain; background: #061b24; }
.departure-caption { position: absolute; left: .75rem; right: .75rem; bottom: 3.4rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .65rem .8rem; border-radius: .55rem; color: white; background: rgba(8,38,50,.82); pointer-events: none; }
.departure-caption strong, .departure-caption span { display: block; }
.departure-caption span { color: #f5cb76; font-size: .84rem; font-weight: 800; }
.departure-video-message { margin: .85rem 0 0; color: #d7eaed; line-height: 1.45; }
.departure-dialog .dialog-actions { margin-top: .8rem; }
.salvage-intro-dialog, .mini-game-intro-dialog, .phase4-departure-dialog { max-height: calc(100dvh - 1rem); overflow: auto; }
.phase7-departure-dialog { box-sizing: border-box; width: min(72rem,calc(100vw - 1rem)); max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); overflow: auto; }
.phase7-departure-dialog .dialog-actions button { min-height: 44px; min-width: 44px; }
.salvage-intro-dialog .departure-video-frame video, .mini-game-intro-dialog .departure-video-frame video, .phase4-departure-dialog .departure-video-frame video { max-height: min(58dvh, 38rem); }
.mini-game-intro-dialog .departure-video-frame video[data-portrait="true"] { aspect-ratio: 9 / 16; height: min(50dvh, 38rem); }
.intro-player-controls { margin-top: .75rem; padding: .7rem; border: 1px solid #7697a3; border-radius: .65rem; color: #fff; background: #0b2936; }
.intro-player-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem .8rem; align-items: center; font-size: .9rem; }
.intro-player-heading label { margin: 0; font-weight: 800; }
.intro-player-heading output { color: #f5cb76; font-variant-numeric: tabular-nums; }
.intro-player-controls input[type="range"] { display: block; width: 100%; min-width: 0; min-height: 44px; margin: .2rem 0 .45rem; padding: 0; border: 0; background: transparent; accent-color: #ffc65c; cursor: pointer; touch-action: pan-y; }
.intro-player-controls button { min-height: 44px; min-width: 44px; padding: .5rem .85rem; }
.intro-player-controls :is(input, button):focus-visible { outline: 3px solid #ffc65c; outline-offset: 3px; }
.salvage-intro-dialog .dialog-actions button, .mini-game-intro-dialog .dialog-actions button, .phase4-departure-dialog .dialog-actions button { min-height: 44px; }
@media (max-width: 620px) {
  .mini-game-intro-dialog, .phase4-departure-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); }
  .mini-game-intro-dialog .dialog-actions, .phase4-departure-dialog .dialog-actions { flex-direction: column; }
}
.phase-completion-burst { gap: 1rem; }
.phase-completion-burst span { max-width: 32rem; padding: .65rem .9rem; border-radius: .5rem; background: rgba(15,53,69,.82); font-weight: 700; line-height: 1.45; }

.activity-preview {
  min-height: 10rem;
  display: block;
  margin-top: 1.2rem;
  padding: 1.2rem;
  border: 2px dashed #aac0c3;
  border-radius: .9rem;
  color: var(--muted);
  background: #eef5f3;
  text-align: center;
}

.game-progress {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .75rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.question-card {
  padding: 1rem;
  border: 1px solid #cfdcda;
  border-radius: .85rem;
  background: rgba(255,255,255,.82);
  text-align: left;
}

.question-card h3 {
  margin: 0 0 .8rem;
  color: var(--navy);
  font: 700 1.25rem/1.3 Georgia, serif;
}

.animated-scene {
  position: relative;
  height: 7rem;
  margin: 0 0 1rem;
  overflow: hidden;
  border-radius: .75rem;
  background: linear-gradient(#b9dce5 0 48%, #7aa6b0 49% 60%, #a17b54 61%);
}

.animated-ship {
  position: absolute;
  left: 38%;
  top: 2.35rem;
  width: 7rem;
  height: 2.2rem;
  border-radius: 55% 20% 50% 50%;
  background: #f2f0e7;
  box-shadow: inset 0 -.7rem #17495b;
  animation: ship-rock 2.5s ease-in-out infinite;
}
.animated-ship::before { content: ""; position: absolute; left: 3.7rem; top: -1.3rem; width: .3rem; height: 1.5rem; background: #173b4a; }
.animated-ship::after { content: ""; position: absolute; left: 4rem; top: -1.15rem; border-left: 1.6rem solid #f2f0e7; border-top: .7rem solid transparent; border-bottom: .7rem solid transparent; }
.animated-crate { position: absolute; bottom: .5rem; width: 2.2rem; height: 2rem; border: .2rem solid #68472c; background: #ba8754; animation: crate-bob 1.8s ease-in-out infinite alternate; }
.animated-crate.one { left: 12%; }
.animated-crate.two { left: 22%; animation-delay: -.7s; }

.repair-scene {
  position: relative;
  min-height: 14rem;
  margin: 0 0 1rem;
  overflow: hidden;
  border: .22rem solid white;
  border-radius: .8rem;
  background: #85aeb7;
  box-shadow: inset 0 0 0 1px rgba(15,53,69,.18);
}

.repair-visual {
  display: block;
  width: 100%;
  height: 14rem;
  background-image: url("../content/Endurance Repair Scenes.png");
  background-repeat: no-repeat;
  background-size: 200% 200%;
  filter: saturate(.92) contrast(1.03);
  animation: repair-camera 8s ease-in-out infinite alternate;
}

.repair-visual.panel-engine { background-position: left top; }
.repair-visual.panel-deck { background-position: right top; }
.repair-visual.panel-rigging { background-position: left bottom; }
.repair-visual.panel-stern { background-position: right bottom; }

.repair-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7,31,43,.08), transparent 34% 70%, rgba(7,31,43,.12));
}

.repair-focus {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border: .22rem dashed white;
  border-radius: 50%;
  color: white;
  background: rgba(215,97,53,.88);
  box-shadow: 0 0 0 .55rem rgba(239,178,77,.25), 0 .25rem 1rem rgba(7,31,43,.55);
  font-size: 1.55rem;
  transform: translate(-50%, -50%);
  animation: repair-pulse 1.25s ease-in-out infinite;
}

.repair-caption {
  position: absolute;
  z-index: 4;
  left: .65rem;
  bottom: .65rem;
  max-width: min(27rem, calc(100% - 1.3rem));
  padding: .55rem .75rem;
  border-radius: .55rem;
  color: white;
  background: rgba(15,53,69,.9);
  text-align: left;
}

.repair-caption strong, .repair-caption span { display: block; }
.repair-caption span { margin-top: .15rem; color: #dceef2; font-size: .86rem; }
.word-class-badge { display: inline-block; margin-left: .35rem; padding: .12rem .4rem; border-radius: 2rem; color: white; background: var(--blue); font-size: .68rem; vertical-align: middle; }

.repair-rpg-shell {
  position: relative;
  overflow: hidden;
  border: .28rem solid #f8f1df;
  border-radius: .9rem;
  background: #17495b;
  box-shadow: 0 .7rem 1.8rem rgba(9,35,48,.22);
}

#repairCanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  background: #a97249;
  outline: 0;
  touch-action: pan-y pinch-zoom;
}

#repairCanvas:focus-visible {
  box-shadow: inset 0 0 0 .28rem var(--gold);
}

.rpg-controls {
  width: max-content;
  margin: .35rem 0 0 auto;
  display: flex;
  align-items: end;
  gap: .3rem;
  padding: .28rem;
  border-radius: .55rem;
  background: rgba(15,53,69,.9);
  backdrop-filter: blur(3px);
  opacity: .9;
  max-width: 100%;
  flex-wrap: wrap;
  opacity: 1;
}

.rpg-controls:focus-within, .rpg-controls:hover { opacity: 1; }

.rpg-dpad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(2, 44px);
  gap: .18rem;
}

.rpg-dpad button, .rpg-interact-button, .rpg-stairs-button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: .32rem;
  color: white;
  background: rgba(36,103,124,.94);
  font-weight: 850;
  font-size: .8rem;
  line-height: 1;
  touch-action: none;
}

.rpg-dpad button:nth-child(1) { grid-column: 2; grid-row: 1; }
.rpg-dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.rpg-dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }
.rpg-dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }
.rpg-interact-button { min-width: 5.1rem; padding: .32rem .42rem; color: var(--navy); background: var(--gold); }
.rpg-actions { display: grid; gap: .18rem; }
.rpg-stairs-button { padding: .3rem .5rem; background: #276a86; }
.rpg-stairs-button:disabled { opacity: .45; }
.rpg-controls button:focus-visible { outline: 3px solid #fff1b9; outline-offset: 2px; }
.rpg-walk-help { margin: .45rem 0 .2rem; font-size: .85rem; line-height: 1.4; }
.rpg-destinations { margin-top: .75rem; text-align: left; }
.rpg-destinations h3 { margin: 0 0 .4rem; font-size: .9rem; }
.rpg-destination-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .5rem; }
.rpg-destination-list button { padding: .65rem; border: 1px solid #8daeb2; border-radius: .5rem; color: var(--navy); background: #fff8e9; text-align: left; }
.rpg-destination-list button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.rpg-destination-list button:disabled { opacity: .65; }
.rpg-controls button:hover { background: var(--orange); transform: translateY(-1px); }

.rpg-status {
  min-height: 2.9rem;
  margin: .7rem 0 0;
  padding: .65rem .85rem;
  border-left: .3rem solid var(--gold);
  border-radius: .4rem;
  color: var(--navy);
  background: #fff8e9;
  font-weight: 720;
  line-height: 1.4;
  text-align: left;
}

.repair-question {
  margin-top: .8rem;
  animation: dialog-arrive .2s ease-out;
}

.repair-question .eyebrow { margin-bottom: .45rem; }

.answer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .9rem;
}

.answer-button, .next-button, .word-label {
  min-height: 3.1rem;
  padding: .7rem .8rem;
  border: 2px solid #a7bdc1;
  border-radius: .7rem;
  color: var(--navy);
  background: white;
  font-weight: 760;
}
.answer-button:hover, .word-label:hover { border-color: var(--orange); transform: translateY(-2px); }
.answer-button.is-wrong { border-color: #b7462d; color: #8c311e; background: #fff0eb; animation: shake .28s; }
.answer-button.is-correct { border-color: var(--green); color: #205c48; background: #e2f3eb; animation: answer-pop .35s; }
.next-button { margin-top: .8rem; color: white; border-color: var(--blue); background: var(--blue); }

.game-feedback {
  min-height: 3.2rem;
  margin: .85rem 0 0;
  padding: .65rem .8rem;
  border-radius: .6rem;
  background: #e7efee;
  line-height: 1.4;
}
.game-feedback.is-correct { color: #205c48; background: #daf0e6; }
.game-feedback.is-wrong { color: #8c311e; background: #fbe4dc; }

.pack-progress { align-items: center; }

.pack-challenge {
  overflow: hidden;
  border: .25rem solid #f8f1df;
  border-radius: .9rem;
  box-shadow: 0 .7rem 1.8rem rgba(9,35,48,.18);
}

.pack-yard {
  position: relative;
  min-height: 27rem;
  padding: 9rem clamp(.65rem, 2.3vw, 1.4rem) 1.15rem;
  overflow: hidden;
  background:
    linear-gradient(175deg, transparent 0 67%, rgba(219,233,232,.7) 68%),
    linear-gradient(#b9dce5 0 38%, #7fa8b0 39% 48%, #6d7673 49% 100%);
}

.pack-yard::before {
  content: "";
  position: absolute;
  inset: 42% 0 auto;
  height: .45rem;
  background: repeating-linear-gradient(90deg, #d8e5df 0 2.8rem, #47616a 2.8rem 3rem);
  box-shadow: 0 .35rem rgba(15,53,69,.28);
}

/* Bundled SVG harbour artwork scales with the play area. */
.pack-skyline {
  position: absolute;
  inset: 0 0 auto;
  height: 8.5rem;
  background: url("assets/pack-harbour.svg") center bottom / cover no-repeat;
  pointer-events: none;
}

.pack-ship {
  position: absolute;
  right: 4%;
  bottom: .15rem;
  width: clamp(8rem, 24vw, 15rem);
  height: auto;
  animation: ship-rock 2.8s ease-in-out infinite;
}

.pack-crane {
  position: absolute;
  left: 3%;
  bottom: -.2rem;
  width: clamp(9rem, 26vw, 16rem);
  height: 8.7rem;
  object-fit: contain;
  object-position: left bottom;
}

.pack-yard h3 {
  position: relative;
  z-index: 4;
  max-width: 49rem;
  margin: 0 auto .85rem;
  padding: .68rem .9rem;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: .65rem;
  color: white;
  background: rgba(15,53,69,.91);
  font: 700 clamp(1rem, 2.2vw, 1.22rem)/1.35 Georgia, serif;
  text-align: center;
  box-shadow: 0 .3rem .9rem rgba(6,29,39,.22);
}

.pack-yard h3 em { color: #ffd372; font-style: normal; }

.cargo-container-row {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(.4rem, 1.5vw, .9rem);
}

.cargo-container {
  position: relative;
  min-height: 10.2rem;
  padding: 1rem .65rem 2rem;
  overflow: hidden;
  border: .24rem solid rgba(35,44,42,.65);
  border-radius: .35rem;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
  box-shadow: inset 0 0 0 .16rem rgba(255,255,255,.25), 0 .55rem .9rem rgba(7,31,43,.32);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.cargo-colour-1 { background: #b54930; }
.cargo-colour-2 { background: #2e7181; }
.cargo-colour-3 { background: #557949; }

.container-ribs {
  position: absolute;
  inset: 0;
  background: url("assets/pack-container.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.cargo-container strong, .container-manifest, .container-door { position: relative; z-index: 2; display: block; }
.cargo-container strong { font: 800 clamp(.88rem, 2vw, 1.2rem)/1.25 Georgia, serif; }
.container-manifest { margin-bottom: .5rem; font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.container-door { position: absolute; right: .4rem; bottom: .35rem; left: .4rem; padding: .22rem; border: 1px dashed rgba(255,255,255,.7); font-size: .58rem; letter-spacing: .09em; }
.cargo-container:hover, .cargo-container.is-dragover { filter: brightness(1.13); transform: translateY(-.2rem); box-shadow: inset 0 0 0 .16rem rgba(255,255,255,.35), 0 0 0 .35rem rgba(239,178,77,.38), 0 .55rem .9rem rgba(7,31,43,.32); }
.cargo-container.is-rejected { animation: cargo-reject .45s ease; }
.cargo-container.is-revealed { box-shadow: inset 0 0 0 .2rem #fff, 0 0 0 .38rem #efb24d, 0 .55rem .9rem rgba(7,31,43,.32); animation: correct-container-pulse 1s ease-in-out infinite alternate; }

.cargo-conveyor {
  position: relative;
  z-index: 5;
  height: 6rem;
  margin-top: .8rem;
  border: .28rem solid #35484c;
  border-radius: .6rem;
  background: #344c55 url("assets/pack-conveyor.svg") center / 100% 100% no-repeat;
  box-shadow: inset 0 .55rem rgba(255,255,255,.14), 0 .55rem .8rem rgba(6,29,39,.35);
}

.belt-label {
  position: absolute;
  left: .5rem;
  bottom: .28rem;
  padding: .1rem .35rem;
  color: #dce9e6;
  background: #1c2f33;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.cargo-box {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: min(14rem, 80%);
  min-height: 4.5rem;
  padding: .45rem .7rem;
  border: .24rem solid #68472c;
  border-radius: .2rem;
  color: #382613;
  background: #c89358 url("assets/pack-crate.svg") center / 100% 100% no-repeat;
  box-shadow: inset 0 0 0 .16rem rgba(255,231,187,.45), 0 .35rem .55rem rgba(9,35,48,.38);
  transform: translate(-50%, -50%);
  transition: box-shadow .18s ease;
  cursor: grab;
}

.phase1-dialog .cargo-box { touch-action: none; user-select: none; -webkit-user-select: none; }
.cargo-box span, .cargo-box strong, .cargo-box small { display: block; position: relative; background: #f9e7bf; padding-inline: .2rem; }
.cargo-box span { font-size: .55rem; font-weight: 900; letter-spacing: .08em; }
.cargo-box strong { margin: .12rem 0; font: 900 1.25rem/1.15 Georgia, serif; }
.cargo-box small { font-size: .62rem; }
.cargo-box.is-selected { box-shadow: inset 0 0 0 .16rem rgba(255,231,187,.45), 0 0 0 .38rem #efb24d, 0 .35rem .55rem rgba(9,35,48,.38); animation: selected-cargo .75s ease-in-out infinite alternate; }
.cargo-box.is-dragging { opacity: .55; cursor: grabbing; }
.cargo-box.pack-drag-ghost { z-index: 9999; pointer-events: none; transform: none; animation: none; transition: none; opacity: .9; }
.cargo-box.is-rejected { animation: cargo-box-bounce .48s ease; }
.cargo-box.is-loaded { animation: cargo-load 1.05s ease-in forwards; pointer-events: none; }

.odd-cargo-pallet {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  margin: 2.2rem auto 1rem;
  padding: 1rem .7rem 1.45rem;
  border-bottom: .65rem solid #6c482a;
  max-width: 52rem;
}

.odd-cargo-box {
  min-height: 8.2rem;
  padding: .8rem .45rem;
  border: .24rem solid #68472c;
  border-radius: .2rem;
  color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
  box-shadow: inset 0 0 0 .15rem rgba(255,255,255,.25), 0 .4rem .65rem rgba(9,35,48,.32);
}

.odd-cargo-box span, .odd-cargo-box strong { display: block; }
.odd-cargo-box span { margin-bottom: .7rem; font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.odd-cargo-box strong { font: 850 clamp(.85rem, 2vw, 1.2rem)/1.18 Georgia, serif; }
.odd-cargo-box:hover { transform: translateY(-.22rem); filter: brightness(1.1); }
.odd-cargo-box.is-rejected { animation: cargo-reject .45s ease; }
.odd-cargo-box.is-revealed { box-shadow: inset 0 0 0 .18rem white, 0 0 0 .35rem #efb24d; }
.odd-cargo-box.is-forklifted { animation: forklift-remove 1.05s ease-in forwards; pointer-events: none; }

.pack-forklift {
  position: absolute;
  z-index: 4;
  left: 4%;
  top: 2.25rem;
  width: 4.2rem;
  height: 2.7rem;
  border-radius: .4rem .7rem .25rem .25rem;
  background: #efb24d;
  box-shadow: inset -1.25rem .2rem #344d53;
  animation: forklift-idle 1.5s ease-in-out infinite alternate;
}

.pack-forklift::before { content: ""; position: absolute; left: 3.6rem; bottom: .15rem; width: 3.3rem; height: .18rem; background: #273d43; box-shadow: 0 -.55rem #273d43; }
.pack-forklift::after { content: ""; position: absolute; left: .45rem; bottom: -.45rem; width: .85rem; height: .85rem; border-radius: 50%; background: #1e3034; box-shadow: 2.25rem 0 #1e3034; }

.pack-feedback { text-align: left; }
.pack-next { display: block; margin-left: auto; }

.pack-relation {
  display: inline-block;
  padding: .08em .42em;
  border-radius: .25rem;
  color: #173a49;
  background: #ffdb7c;
  font-family: Arial, sans-serif;
  font-weight: 900;
}
.pack-learning { margin: .9rem 0; text-align: left; }
.pack-learning > .eyebrow { margin: 0 0 .5rem; }
.pack-meaning-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.pack-meaning-card { min-width: 0; padding: .85rem; border: 1px solid #bed2d5; border-radius: .65rem; background: #fffdf6; }
.pack-meaning-card.is-answer { border: 2px solid #398368; background: #eff8ee; }
.pack-meaning-role { display: block; color: #466571; font-size: .7rem; font-weight: 800; }
.pack-meaning-card h4 { margin: .35rem 0; color: var(--navy); font: 800 1.2rem/1.2 Georgia, serif; overflow-wrap: anywhere; }
.pack-meaning-card p { margin: 0; color: var(--navy); font-size: .9rem; line-height: 1.4; }
.cargo-container.is-loaded::after, .cargo-container.is-revealed::after,
.odd-cargo-box.is-forklifted::after, .odd-cargo-box.is-revealed::after {
  content: "✓ Correct"; position: absolute; top: .3rem; right: .35rem; z-index: 3; padding: .2rem .4rem; border-radius: .2rem; color: #173a49; background: #ffdb7c; font-size: .7rem; text-shadow: none;
}
.cargo-container.is-tried:not(.is-revealed)::after, .odd-cargo-box.is-tried:not(.is-revealed)::after {
  content: "Try another"; position: absolute; top: .3rem; right: .35rem; z-index: 3; padding: .15rem .3rem; border-radius: .2rem; color: #742b1a; background: #ffe8d9; font-size: .65rem; text-shadow: none;
}
.cargo-container:focus-visible, .cargo-box:focus-visible, .odd-cargo-box:focus-visible { outline: 3px solid #ffdb7c; outline-offset: 3px; }
.odd-cargo-box { position: relative; background-image: url("assets/pack-container.svg"); background-size: 100% 100%; }
@media (min-width: 600px) { .pack-meaning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pack-meaning-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dictionary-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.dictionary-heading h3 { margin: 0; color: var(--navy); font: 800 1.65rem/1 Georgia, serif; }
.dictionary-heading span { color: var(--muted); font-size: .78rem; font-weight: 800; }
.dictionary-definition { margin: .65rem 0; font-size: 1.05rem; font-weight: 750; }
.pack-dictionary-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .6rem 0; }
.pack-dictionary-card dl div { padding: .55rem .65rem; border-radius: .5rem; background: white; }
.pack-dictionary-card dt { color: var(--orange); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pack-dictionary-card dd { margin: .22rem 0 0; color: var(--navy); line-height: 1.35; }
.dictionary-example { margin: .65rem 0 0; padding-top: .65rem; border-top: 1px dashed #d9b76c; line-height: 1.45; }

.pack-result {
  min-height: 26rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .75rem;
  padding: 2rem;
  overflow: hidden;
  border-radius: .85rem;
  color: white;
  background: linear-gradient(160deg, #24677c, #0f3545);
}

.pack-result.is-retry { background: linear-gradient(160deg, #9a4e35, #542d29); }
.pack-result h3 { margin: 0; color: #ffd372; font: 900 clamp(3rem, 9vw, 6rem)/1 Georgia, serif; }
.pack-result p:not(.eyebrow) { max-width: 34rem; margin: 0; font-size: 1.05rem; line-height: 1.55; }
.pack-result .eyebrow { color: #ffd372; }
.result-crane { width: 10rem; height: 5rem; border-top: .6rem solid #efb24d; border-left: .6rem solid #efb24d; }
.result-crane span { display: block; width: 2px; height: 3rem; margin-left: 7.5rem; background: white; animation: crane-cable-sway 2.2s ease-in-out infinite; }
.result-crane span::after { content: "✓"; display: grid; width: 2rem; height: 2rem; place-items: center; margin: 2.7rem 0 0 -1rem; border-radius: 50%; color: var(--navy); background: #ffd372; font-weight: 900; }

.pack-yard.is-buzzing { animation: yard-buzz .3s ease; }
.pack-yard.is-loading .pack-crane { filter: drop-shadow(0 0 .4rem #ffe0a0); }
.pack-yard.is-removing .pack-forklift { animation: forklift-drive 1.2s ease-in forwards; }

.manifest-game { --paper: #f7f0db; }
.manifest-progress { margin-bottom: .75rem; }
.manifest-desk {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr);
  gap: 1.25rem;
  min-height: 31rem;
  padding: 2.2rem clamp(1rem, 3vw, 2.5rem);
  overflow: hidden;
  border: .25rem solid #315968;
  border-radius: .9rem;
  background:
    linear-gradient(90deg, transparent 0 49.5%, rgba(70,37,20,.14) 49.7% 50.2%, transparent 50.4%),
    repeating-linear-gradient(8deg, rgba(255,255,255,.035) 0 2px, transparent 2px 13px),
    #774d31;
  box-shadow: inset 0 0 0 .25rem rgba(255,255,255,.12), 0 .7rem 1.2rem rgba(18,48,58,.2);
}
.manifest-clipboard {
  position: relative;
  z-index: 2;
  align-self: stretch;
  padding: 3.2rem clamp(1.2rem, 3vw, 2rem) 2rem;
  border: .7rem solid #a97a43;
  border-radius: .45rem;
  color: #263c44;
  background:
    repeating-linear-gradient(0deg, transparent 0 1.65rem, rgba(40,77,91,.08) 1.69rem 1.74rem),
    var(--paper);
  box-shadow: 0 1rem 1.4rem rgba(25,18,12,.3), inset 0 0 0 1px #fff9e9;
  transform: rotate(-.45deg);
  animation: clipboard-arrive .48s ease-out both;
}
.clipboard-clip {
  position: absolute;
  top: -.85rem;
  left: 50%;
  width: 8.8rem;
  height: 2.6rem;
  border: .25rem solid #52626a;
  border-radius: .5rem .5rem 1rem 1rem;
  background: linear-gradient(#d7d9d7, #8d9aa0 55%, #bbc2c4);
  box-shadow: 0 .25rem .4rem rgba(0,0,0,.25);
  transform: translateX(-50%);
}
.manifest-clipboard header { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; padding-bottom: .8rem; border-bottom: .16rem solid #315968; text-transform: uppercase; }
.manifest-clipboard header span, .manifest-clipboard header small { color: #66777c; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.manifest-clipboard header strong { grid-column: 1 / -1; color: var(--navy); font: 800 clamp(1.2rem, 3vw, 1.8rem)/1.1 Georgia, serif; letter-spacing: .02em; }
.manifest-clipboard header small { grid-row: 1; grid-column: 2; }
.manifest-rule { display: flex; gap: .55rem; align-items: baseline; margin: 1rem 0 .35rem; text-transform: uppercase; }
.manifest-rule span { color: #97703d; font-size: .66rem; font-weight: 900; letter-spacing: .1em; }
.manifest-rule strong { color: #315968; font-size: .78rem; }
.manifest-instruction { margin: .4rem 0 1.2rem; color: #586970; font-size: .88rem; line-height: 1.45; }
.manifest-log { margin: 0; padding: 1.1rem; border: 1px solid rgba(49,89,104,.26); border-radius: .35rem; background: rgba(255,255,255,.55); font: 700 clamp(1.15rem, 2.5vw, 1.55rem)/1.6 Georgia, serif; }
.manifest-log mark { padding: .05rem .25rem; color: inherit; }
.manifest-slot { border-bottom: .18rem solid #d89936; background: rgba(239,178,77,.2); }
.manifest-error { color: #a3362b; background: rgba(196,74,55,.14); text-decoration: wavy underline #c44a37; text-underline-offset: .2rem; }
.approval-seal {
  position: absolute;
  right: 1.5rem;
  bottom: 1.35rem;
  padding: .35rem .7rem;
  border: .28rem double #25765f;
  border-radius: .3rem;
  color: #25765f;
  font: 900 1.15rem/1 Georgia, serif;
  letter-spacing: .08em;
  opacity: 0;
  text-transform: uppercase;
  transform: rotate(-11deg) scale(1.7);
}
.manifest-clipboard.is-approved .approval-seal { animation: approval-stamp .46s cubic-bezier(.2,.8,.25,1.25) forwards; }
.stamp-tray { z-index: 2; align-self: center; padding: 1rem; border: .25rem solid #2c3f44; border-radius: .7rem; background: #d5c2a3; box-shadow: inset 0 0 0 .35rem #a88961, 0 .7rem 1rem rgba(22,16,11,.26); }
.stamp-tray-label { display: block; margin-bottom: .75rem; color: #4c3827; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.stamp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.manifest-stamp {
  min-height: 6.2rem;
  padding: 1.2rem .45rem .65rem;
  border: .22rem solid #254b59;
  border-radius: .45rem;
  color: #173b4a;
  background: #f9f1dd;
  box-shadow: 0 .45rem 0 #173b4a, 0 .6rem .6rem rgba(20,25,24,.25);
  font: 800 clamp(.9rem, 2vw, 1.12rem)/1.15 Georgia, serif;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.manifest-stamp span { display: block; margin-bottom: .45rem; color: #bd4c35; font: 900 .58rem/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.manifest-stamp:hover:not(:disabled), .manifest-stamp:focus-visible { filter: brightness(1.06); transform: translateY(-.18rem); }
.manifest-stamp:active:not(:disabled) { box-shadow: 0 .1rem 0 #173b4a; transform: translateY(.35rem); }
.manifest-stamp.is-wrong { border-color: #a33c32; color: #872f29; animation: stamp-reject .42s; }
.manifest-stamp.is-correct, .manifest-stamp.is-revealed { border-color: #25765f; color: #155b48; background: #edf6ed; }
.manifest-stamp.is-correct { animation: stamp-press .44s ease; }
.manifest-stamp.is-revealed::after { content: "Correct word"; display: block; margin-top: .35rem; color: #25765f; font: 900 .58rem/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.manifest-stamp:disabled { cursor: default; opacity: .72; }
.manifest-stamp.is-correct:disabled, .manifest-stamp.is-revealed:disabled { opacity: 1; }
.inspector-sleeve { position: absolute; z-index: 1; right: -3.5rem; bottom: -4rem; width: 17rem; height: 8rem; border-radius: 55% 0 0; background: #173b4a; transform: rotate(-17deg); }
.inspector-sleeve i { position: absolute; left: -2.7rem; top: -1.5rem; width: 5rem; height: 5rem; border-radius: 50%; background: #d8aa7a; box-shadow: inset .4rem -.3rem 0 rgba(106,54,32,.13); }
.inspection-feedback { margin-top: .8rem; }
.audit-note { position: relative; margin-top: .75rem; padding: 1rem 1.1rem; border: .2rem solid #b13e31; border-radius: .5rem; color: #672b26; background: #fff1eb; animation: audit-note-arrive .45s ease both; }
.audit-note-title { margin: 0 0 .75rem; color: #b13e31; font: 900 .78rem/1.4 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.audit-note p { margin: 0; line-height: 1.45; }
.inspection-meaning-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .75rem; text-align: left; }
.inspection-meaning-card { min-width: 0; padding: .9rem; border: 1px solid #d5b8a7; border-radius: .65rem; color: #173b4a; background: #fffdf7; overflow-wrap: anywhere; }
.inspection-meaning-card h4 { margin: 0 0 .4rem; font: 700 1.25rem/1.3 Georgia, serif; }
.inspection-correct-label { display: block; margin-bottom: .45rem; color: #25765f; font: 800 .7rem/1.4 system-ui, sans-serif; }
.audit-note .inspection-usage-note { margin-top: .75rem; text-align: left; }
.inspection-corrected-log { margin-top: .85rem; padding-top: .75rem; border-top: 1px dashed #d79a8e; font: 700 1rem/1.45 Georgia, serif; }
.inspection-corrected-log > span { display: block; margin-bottom: .35rem; color: #a04a3d; font: 900 .65rem/1.2 system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.inspection-review.is-approved { border-color: #25765f; color: #173b4a; background: #eaf5ef; }
.inspection-review.is-approved .audit-note-title, .inspection-review.is-approved .inspection-corrected-log > span { color: #25765f; }
.inspection-result { min-height: 27rem; display: grid; align-content: center; justify-items: center; gap: .75rem; padding: 2rem; border-radius: .85rem; color: white; text-align: center; background: linear-gradient(160deg, #286f69, #123d4b); }
.inspection-result.is-retry { background: linear-gradient(160deg, #a6533f, #552d2b); }
.inspection-result h3 { margin: 0; color: #ffd372; font: 900 clamp(3rem, 9vw, 6rem)/1 Georgia, serif; }
.inspection-result p:not(.eyebrow) { max-width: 36rem; margin: 0; font-size: 1.05rem; line-height: 1.55; }
.inspection-result .eyebrow { color: #ffd372; }
.result-clipboard { display: grid; width: 8rem; height: 6rem; place-items: center; border: .45rem solid #b78950; border-radius: .4rem; background: #f7f0db; transform: rotate(-3deg); }
.result-clipboard span { padding: .35rem; border: .2rem double currentColor; color: #25765f; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-8deg); }
.inspection-result.is-retry .result-clipboard span { color: #b13e31; }

.inspection-board, .shop-board {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: .8rem;
  background: #b9dce5;
}
.inspection-board { aspect-ratio: 16 / 8.7; }
.shop-board { aspect-ratio: 16 / 8.7; }
.inspection-board img, .shop-board img { display: block; width: 100%; height: 100%; object-fit: cover; }

.inspection-board::after {
  content: "";
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,255,220,.23) 0 6%, transparent 18%);
  animation: inspector-scan 7s linear infinite;
}

.inspection-hotspot, .shop-object {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  width: 2.5rem;
  height: 2.5rem;
  border: .22rem solid white;
  border-radius: 50%;
  color: var(--navy);
  background: rgba(239,178,77,.9);
  box-shadow: 0 2px 10px rgba(6,29,39,.55);
  transform: translate(-50%, -50%);
  animation: hotspot-pulse 1.5s ease-in-out infinite;
}
.inspection-hotspot.is-found, .shop-object.is-matched { color: white; background: var(--green); animation: answer-pop .35s; }

.shop-instructions { margin: 0 0 .8rem; color: var(--muted); line-height: 1.45; }
.shop-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: .85rem; }
.word-label.is-selected { color: white; border-color: var(--orange); background: var(--orange); transform: translateY(-2px); }
.word-label.is-matched { color: #4e6b62; border-color: #b7cbc4; background: #dce8e3; text-decoration: line-through; }
.shop-object.is-wrong, .shop-labels.is-wrong { animation: shake .3s; }
.shop-object .object-check { font-weight: 900; }
.shop-game .shop-board { aspect-ratio: 1672 / 941; }
.shop-game .shop-object-pin { display: none; animation: none; width: 44px; height: 44px; }
.shop-marker { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border: 1px solid white; border-radius: 50%; color: var(--navy); background: var(--gold); transform: translate(-50%, -50%); font-size: .7rem; font-weight: 900; pointer-events: none; }
.shop-marker.is-matched { color: white; background: var(--green); }
.shop-game .shop-labels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.shop-game .word-label { min-width: 0; overflow-wrap: anywhere; }
.shop-closeups { margin-top: 1rem; text-align: left; }
.shop-closeups h3 { margin: 0 0 .4rem; font-size: 1rem; }
.shop-selection { margin: 0 0 .65rem; line-height: 1.4; }
.shop-object-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); gap: .65rem; }
.shop-object-card { display: grid; align-content: start; gap: .4rem; min-width: 0; padding: .5rem; border: 2px solid #98b4b5; border-radius: .65rem; color: var(--navy); background: #fffaf0; }
.shop-object-card svg { display: block; width: 100%; height: 8rem; border-radius: .35rem; background: #e4d8bf; }
.shop-object-card > span { font-size: .8rem; font-weight: 800; }
.shop-object-card:focus-visible, .shop-object-pin:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.shop-object-card.is-matched { border-color: var(--green); background: #e2f3eb; }
.shop-object-description { display: none; margin: 0; font-size: .9rem; line-height: 1.4; }
.shop-game.is-art-unavailable .shop-board, .shop-game.is-art-unavailable .shop-object-card svg { display: none; }
.shop-game.is-art-unavailable .shop-object-description { display: block; }
@media (min-width: 1100px) { .shop-game .shop-object-pin { display: grid; place-items: center; } .shop-game .shop-marker { display: none; } }
@media (max-width: 900px) {
  .phase1-dialog .manifest-desk { grid-template-columns: minmax(0, 1fr); padding: 1.5rem .65rem .8rem; }
  .phase1-dialog .manifest-clipboard { min-width: 0; padding-inline: .75rem; border-width: .4rem; transform: none; }
  .phase1-dialog .manifest-clipboard header { grid-template-columns: minmax(0, 1fr); }
  .phase1-dialog .manifest-clipboard header small { grid-column: 1; grid-row: auto; }
  .phase1-dialog .manifest-rule { flex-wrap: wrap; }
  .phase1-dialog .manifest-rule strong { overflow-wrap: anywhere; }
  .phase1-dialog .manifest-log { padding: .65rem; overflow-wrap: anywhere; }
  .phase1-dialog .manifest-slot { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
  .phase1-dialog .stamp-tray { min-width: 0; width: 100%; padding: .65rem; }
  .phase1-dialog .stamp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phase1-dialog .manifest-stamp { overflow-wrap: anywhere; }
  .phase1-dialog .manifest-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .phase1-dialog .manifest-progress > span:last-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .phase1-dialog .stamp-grid { grid-template-columns: minmax(0, 1fr); } }

.completion-burst {
  display: grid;
  min-height: 14rem;
  place-items: center;
  padding: 2rem;
  border-radius: .8rem;
  color: white;
  background: radial-gradient(circle, #f3be59 0 12%, #e27843 13% 28%, #24677c 29% 100%);
  animation: completion-glow 1.1s ease-in-out infinite alternate;
}
.completion-burst strong { font: 700 clamp(1.5rem, 4vw, 2.5rem)/1.1 Georgia, serif; }

@keyframes map-glint { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
@keyframes explorer-idle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.12rem); } }
@keyframes explorer-walk { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(4deg) translateY(-.2rem); } }
@keyframes explorer-legs { from { transform: skewX(-10deg); } to { transform: skewX(10deg); } }
@keyframes map-ship-rock { 0%,100% { transform: scaleX(var(--facing)) rotate(-1.7deg) translateY(0); } 50% { transform: scaleX(var(--facing)) rotate(1.7deg) translateY(-.16rem); } }
@keyframes wake-flow { from { transform: translateX(0); } to { transform: translateX(-.35rem); } }
@keyframes checkpoint-pulse { 0%,100% { box-shadow: 0 2px 9px rgba(10,28,34,.5); } 50% { box-shadow: 0 0 0 .42rem rgba(239,178,77,.35), 0 2px 9px rgba(10,28,34,.5); } }
@keyframes scene-breathe { from { transform: scale(1.015) translateX(-.15%); } to { transform: scale(1.045) translateX(.15%); } }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(1rem) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ship-rock { 0%,100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-.25rem); } }
@keyframes crate-bob { from { transform: translateY(0); } to { transform: translateY(-.2rem); } }
@keyframes repair-camera { from { transform: scale(1.01) translateX(-.2%); } to { transform: scale(1.055) translateX(.2%); } }
@keyframes repair-pulse { 0%,100% { transform: translate(-50%, -50%) rotate(-5deg) scale(.94); } 50% { transform: translate(-50%, -50%) rotate(5deg) scale(1.06); } }
@keyframes inspector-scan { from { transform: translate(-20%,-18%); } to { transform: translate(22%,18%); } }
@keyframes hotspot-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,178,77,.5); } 50% { box-shadow: 0 0 0 .5rem rgba(239,178,77,0); } }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes answer-pop { 50% { transform: scale(1.08); } }
@keyframes completion-glow { from { filter: saturate(.95); } to { filter: saturate(1.25) brightness(1.05); } }
@keyframes belt-move { from { background-position-x: 0; } to { background-position-x: 1.85rem; } }
@keyframes crane-cable-sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes crane-load { 0% { height: 3.6rem; transform: translateX(0); } 38% { height: 5.1rem; transform: translateX(0); } 100% { height: 1.4rem; transform: translateX(3rem); } }
@keyframes selected-cargo { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -54%) scale(1.025); } }
@keyframes cargo-box-bounce { 0%,100% { transform: translate(-50%, -50%); } 30% { transform: translate(-50%, -75%) rotate(-3deg); } 60% { transform: translate(-50%, -42%) rotate(3deg); } }
@keyframes cargo-reject { 0%,100% { transform: translateY(0); } 25% { transform: translateX(-.45rem) rotate(-1deg); } 55% { transform: translateX(.45rem) rotate(1deg); } 80% { transform: translateX(-.2rem); } }
@keyframes yard-buzz { 0%,100% { filter: none; } 50% { filter: saturate(1.5) sepia(.25); } }
@keyframes cargo-load { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 45% { transform: translate(-50%, -145%) scale(.9); opacity: 1; } 100% { transform: translate(95%, -260%) scale(.65); opacity: 0; } }
@keyframes correct-container-pulse { from { filter: brightness(1); } to { filter: brightness(1.2); } }
@keyframes forklift-idle { from { transform: translateX(0); } to { transform: translateX(.25rem); } }
@keyframes forklift-drive { from { transform: translateX(0); } to { transform: translateX(20rem); } }
@keyframes forklift-remove { 0% { transform: translate(0, 0); opacity: 1; } 40% { transform: translateY(-.4rem); opacity: 1; } 100% { transform: translateX(-13rem) translateY(-.4rem); opacity: 0; } }
@keyframes clipboard-arrive { from { opacity: 0; transform: translateY(1rem) rotate(-2deg); } to { opacity: 1; transform: rotate(-.45deg); } }
@keyframes stamp-press { 0%,100% { transform: translateY(0); } 48% { transform: translateY(.45rem) scale(.96); box-shadow: 0 .05rem 0 #173b4a; } }
@keyframes stamp-reject { 20% { transform: rotate(-4deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } }
@keyframes approval-stamp { 0% { opacity: 0; transform: rotate(-11deg) scale(1.7); } 70% { opacity: 1; transform: rotate(-11deg) scale(.9); } 100% { opacity: .9; transform: rotate(-11deg) scale(1); } }
@keyframes audit-note-arrive { from { opacity: 0; transform: translateY(-.5rem) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes departure-dialog-arrive { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes departure-prompt-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,178,77,0); } 50% { box-shadow: 0 0 0 .35rem rgba(239,178,77,.25); } }
@keyframes route-dashes { from { background-position-x: 0; } to { background-position-x: .75rem; } }
@keyframes southern-seas-swell { from { transform: scale(1.006) translateY(-.08%); } to { transform: scale(1.018) translateY(.08%); } }
@keyframes deck-light { from { transform: translateX(-42%); } to { transform: translateX(42%); } }
@keyframes preview-signal { from { transform: translateX(-3rem); } to { transform: translateX(3rem); } }
@keyframes preview-icon-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-.35rem) rotate(1deg); } }
@keyframes rigging-rain { from { transform: translateX(-2rem); } to { transform: translateX(2rem); } }
@keyframes rigging-clouds { from { transform: translateX(-8rem); } to { transform: translateX(58rem); } }
@keyframes rigging-swell { 0%,100% { transform: rotate(0) translateY(0); } 24% { transform: rotate(-1deg) translateY(.3rem); } 55% { transform: rotate(1.1deg) translateY(-.25rem); } 78% { transform: rotate(-.45deg) translateY(.1rem); } }
@keyframes rigging-token-shake { 20% { transform: translateX(-.25rem) rotate(-2deg); } 45% { transform: translateX(.28rem) rotate(2deg); } 70% { transform: translateX(-.12rem); } }
@keyframes rigging-line-snap { 0% { opacity: 0; transform: rotate(0) scaleY(1); } 22% { opacity: 1; transform: rotate(2deg) scaleY(1); } 48% { opacity: 1; transform: rotate(-7deg) scaleY(.56); } 100% { opacity: 0; transform: rotate(14deg) translateY(4rem) scaleY(.42); } }
@keyframes rigging-lash { from { opacity: .45; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
@keyframes rigging-jettison { from { opacity: 0; transform: translateY(-5rem) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes rigging-log-arrive { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
@keyframes result-rope-tighten { from { filter: brightness(.85); } to { filter: brightness(1.25); } }
@keyframes result-winch-turn { from { background-position: 0 0; } to { background-position: .8rem .8rem; } }
@keyframes result-crew-lash { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
@keyframes course-bearing-lock { from { opacity: .55; transform: scale(.93); } to { opacity: 1; transform: scale(1); } }
@keyframes course-divider-scan { from { transform: translateX(-110%); } to { transform: translateX(430%); } }
@keyframes course-audit-open { from { opacity: 0; transform: translateY(-.6rem) scaleY(.92); } to { opacity: 1; transform: none; } }
@keyframes course-chart-shudder { 20% { transform: translateX(-.25rem); } 42% { transform: translateX(.28rem); } 68% { transform: translateX(-.14rem); } }
@keyframes course-route-draw { from { width: 0; } to { width: 70%; } }
@keyframes course-waypoint-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes weather-console-glow { to { transform: rotate(360deg); } }
@keyframes weather-dial-shake { 20% { transform: rotate(-2deg); } 42% { transform: rotate(2deg); } 68% { transform: rotate(-1deg); } }
@keyframes weather-needle-flail { 20% { transform: rotate(-48deg); } 45% { transform: rotate(38deg); } 70% { transform: rotate(-12deg); } }
@keyframes weather-tile-lock { from { opacity: .5; transform: translateY(-.4rem); } to { opacity: 1; transform: none; } }
@keyframes weather-audit-open { from { opacity: 0; transform: translateY(-.6rem) scaleY(.92); } to { opacity: 1; transform: none; } }
@keyframes result-barometer-settle { from { transform: rotate(-25deg); } to { transform: rotate(28deg); } }
@keyframes result-vane-turn { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes lookout-fog-drift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@keyframes lookout-focus-shake { 18% { transform: translateX(-.35rem); filter: blur(0); } 42% { transform: translateX(.4rem); filter: blur(.08rem); } 68% { transform: translateX(-.18rem); } }
@keyframes lookout-defog { from { opacity: .7; filter: blur(.2rem); } to { opacity: .08; filter: blur(0); transform: translateX(12%); } }
@keyframes lookout-segment-lock { from { transform: scale(.88); } 65% { transform: scale(1.06); } to { transform: none; } }
@keyframes lookout-log-open { from { opacity: 0; transform: translateY(-.6rem) scaleY(.92); } to { opacity: 1; transform: none; } }
@keyframes lookout-beacon-flash { from { filter: brightness(.75); opacity: .6; } to { filter: brightness(1.35); opacity: 1; } }
@keyframes lookout-result-mist { from { transform: translateX(-3rem); opacity: .66; } to { transform: translateX(5rem); opacity: .24; } }
@keyframes falklands-map-breathe { from { transform: scale(1.002); } to { transform: scale(1.008); } }
@keyframes falklands-cloud-light { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
@keyframes census-page-open { from { opacity: 0; transform: translateY(.55rem) rotate(-.5deg); } to { opacity: 1; transform: none; } }
@keyframes census-notebook-shake { 20% { transform: translateX(-.3rem) rotate(-.35deg); } 45% { transform: translateX(.32rem) rotate(.35deg); } 70% { transform: translateX(-.15rem); } }
@keyframes census-letter-reveal { from { opacity: .25; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
@keyframes census-letter-set { from { opacity: .45; transform: translateY(.18rem) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes census-card-arrive { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
@keyframes sonar-status-blink { from { opacity: .45; filter: brightness(.75); } to { opacity: 1; filter: brightness(1.25); } }
@keyframes sonar-wave { from { transform: scaleY(.45); opacity: .45; } to { transform: scaleY(1.15); opacity: 1; } }
@keyframes sonar-console-static { 18% { transform: translateX(-.25rem); filter: contrast(1.15); } 38% { transform: translateX(.3rem); } 62% { transform: translateX(-.15rem); filter: brightness(1.15); } }
@keyframes sonar-answer-lock { from { opacity: .25; transform: scale(.72); } to { opacity: 1; transform: none; } }
@keyframes sonar-drawer-open { from { opacity: 0; transform: translateY(-.6rem) scaleY(.9); } to { opacity: 1; transform: none; } }
@keyframes sonar-result-ping { from { opacity: .9; transform: scale(.35); } to { opacity: 0; transform: scale(4.5); } }

.census-game { color: #183d46; text-align: left; }
.census-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.census-field-desk { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; align-items: stretch; padding: .65rem; border: .2rem solid #5a4635; border-radius: .9rem; background: linear-gradient(135deg, #856345, #544234); box-shadow: inset 0 0 0 .18rem rgba(245,210,142,.18), 0 .4rem .8rem rgba(19,45,50,.16); }
.census-notebook { position: relative; min-width: 0; overflow: hidden; padding: 1.4rem 1.3rem 1.2rem 2.7rem; border-radius: .35rem .7rem .7rem .35rem; background-color: #fff7dc; background-image: repeating-linear-gradient(0deg, transparent 0 1.72rem, rgba(63,126,137,.09) 1.72rem 1.79rem); box-shadow: .2rem .25rem 0 #c9b47e; animation: census-page-open .45s ease both; }
.census-notebook::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 86% 12%, rgba(193,130,62,.1), transparent 18%), radial-gradient(circle at 10% 86%, rgba(122,84,46,.08), transparent 25%); }
.census-binding { position: absolute; z-index: 2; left: .65rem; top: 0; bottom: 0; width: 1rem; background: repeating-linear-gradient(0deg, #35484a 0 .32rem, transparent .32rem .85rem); }
.census-notebook > *:not(.census-binding) { position: relative; z-index: 1; }
.census-notebook header { display: grid; gap: .18rem; padding-bottom: .7rem; border-bottom: .14rem solid rgba(39,79,82,.42); }
.census-notebook header p { margin: 0; color: #a64b36; font: 900 .68rem/1.2 system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.census-notebook header strong { color: #173d46; font: 800 clamp(1.35rem, 3vw, 1.8rem)/1.15 Georgia, serif; }
.census-notebook header small { color: #6d6b5f; font-weight: 800; }
.census-instruction { margin: 1rem 0 .55rem; color: #79513a; font-size: .85rem; font-weight: 800; }
.census-sentence { margin: 0; font: 700 clamp(1.15rem, 2.6vw, 1.45rem)/1.65 Georgia, serif; overflow-wrap: anywhere; }
.census-pattern { color: #175d63; letter-spacing: .04em; }
.census-pattern mark { padding: 0 .04em; color: inherit; background: #f2daa1; border-bottom: 2px solid #ad7639; }
.census-answer { margin-top: 1rem; padding-top: .1rem; border-top: 1px solid #c5c8a9; }
.census-answer > small { display: block; margin-top: .55rem; color: #5a6964; font-size: .75rem; line-height: 1.45; }
.census-game.is-correct .census-answer > small, .census-game.is-failed .census-answer > small { display: none; }
.census-word { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.census-letter-slot { position: relative; display: grid; flex: 0 0 2.8rem; width: 2.8rem; height: 3.6rem; place-items: center; padding: .85rem .2rem .2rem; cursor: pointer; border: .1rem dashed #a18051; border-bottom: .2rem solid #ad7639; border-radius: .45rem; color: #173d46; background: #fffdf2; font: 900 1.45rem/1 Georgia, serif; text-transform: lowercase; }
.census-letter-slot > small { position: absolute; left: .35rem; top: .25rem; color: #6e705d; font: 800 .6rem/1 system-ui, sans-serif; }
.census-letter-slot > i { position: absolute; right: .25rem; top: .2rem; font: 900 .65rem/1 system-ui, sans-serif; }
.census-letter-slot:disabled { opacity: 1; cursor: default; }
.census-letter-slot.is-next { border-style: solid; border-color: #256c70; box-shadow: 0 0 0 2px #bfdbd0; }
.census-letter-slot:not(:disabled):hover { border-style: solid; background: #f5e5bb; }
.census-letter-slot.is-filled { color: #a64b36; background: rgba(255,249,225,.88); animation: census-letter-set .18s ease-out both; }
.census-letter-slot.is-locked, .census-letter-slot.is-correct { color: #177567; border-color: #177567; background: #d9eee2; }
.census-letter-slot.is-revealed { color: #a53f39; border-color: #a53f39; background: #ffe1d8; animation: census-letter-reveal .5s ease both; }
.census-clues { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; margin-top: .8rem; }
.census-clues p { margin: 0; padding: .7rem .75rem; border: 1px solid rgba(75,98,88,.28); border-radius: .45rem; background: rgba(255,255,255,.48); line-height: 1.4; }
.census-clues strong { display: block; margin-bottom: .2rem; color: #a64b36; font: 900 .63rem/1.2 system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.census-attempts { display: flex; align-items: center; gap: .38rem; margin-top: 1rem; color: #536862; font-size: .78rem; font-weight: 800; }
.census-attempts { flex-wrap: wrap; }
.census-attempts > span:first-child { margin-right: .25rem; }
.census-footprint { display: inline-grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; color: #276554; background: #d2e7d8; }
.census-footprint.is-used { color: #9a4539; background: #efc3ae; opacity: .66; }
.census-notebook.is-ink-error { animation: census-notebook-shake .55s ease; }
.census-colony { position: relative; order: -1; overflow: hidden; border-radius: .6rem; color: #fff8e8; background: #b4cec1; }
.census-colony img { display: block; width: 100%; height: 9rem; object-fit: cover; object-position: 50% 50%; }
.census-colony > div { display: grid; gap: .3rem; padding: .6rem .9rem; background: #254c4f; }
.census-colony small { font: 800 .65rem/1.3 system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.census-colony strong { font: 700 1rem/1.3 Georgia, serif; }
.census-letter-rack { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; align-items: center; margin-top: .85rem; padding: .85rem; border: .12rem solid #8ba89b; border-radius: .65rem; background: #e3eee7; }
.census-letter-rack[hidden] { display: none; }
.census-letter-rack > div:first-child { display: grid; gap: .15rem; }
.census-letter-rack > div:first-child span { color: #5c706b; font-size: .76rem; }
.census-letter-rack > div:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: .42rem; }
.census-letter-tile { min-width: 2.8rem; min-height: 2.8rem; border: .12rem solid #9b6d37; border-radius: .45rem; color: #173d46; background: linear-gradient(#ffe6ac, #edc47e); box-shadow: 0 .18rem 0 #7b542e; font: 900 1.3rem/1 Georgia, serif; text-transform: lowercase; cursor: pointer; }
.census-letter-tile:focus-visible, .census-letter-slot:focus-visible { outline: 3px solid #206c79; outline-offset: 3px; }
.census-letter-tile:hover, .census-letter-tile:focus-visible { color: white; border-color: #175f64; background: #258d8d; transform: translateY(-.12rem); }
.census-rack-empty { color: #59706a; font-style: italic; }
.census-feedback { margin-top: .8rem; }
.census-feedback.correct { background: #d9eee2; }
.census-feedback.failed { background: #ffe1d8; }
.census-feedback.is-retry { background: #fff0d1; color: #74482b; }
.census-lexicon-card { margin-top: .8rem; padding: 1rem 1.1rem; border: .18rem solid #23827b; border-radius: .65rem; background: #eef8ee; animation: census-card-arrive .45s ease both; }
.census-lexicon-card.is-reveal { border-color: #bd5547; background: #fff0e9; }
.census-lexicon-card .eyebrow { margin: 0 0 .45rem; }
.census-lexicon-heading { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.census-lexicon-heading h3 { margin: 0; color: #173d46; font-size: 1.65rem; }
.census-meaning { margin: .45rem 0 .8rem; font-size: 1.05rem; line-height: 1.5; }
.census-lexicon-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: .75rem 0; }
.census-lexicon-card dl div { padding: .55rem; border-radius: .4rem; background: rgba(255,255,255,.65); }
.census-lexicon-card dt { color: #a64b36; font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.census-lexicon-card dd { margin: .2rem 0 0; line-height: 1.4; }
.census-lexicon-card > p:last-child { margin: .6rem 0 0; padding-top: .6rem; border-top: 1px dashed rgba(64,100,88,.38); line-height: 1.45; }
.census-controls { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; justify-content: flex-end; margin-top: .8rem; }
.census-controls button:disabled { opacity: .5; cursor: default; box-shadow: none; }
.census-next { margin-left: auto; }
.census-result { display: grid; min-height: 30rem; align-content: center; justify-items: center; gap: .7rem; padding: 1.7rem; overflow: hidden; border-radius: .85rem; color: white; text-align: center; background: linear-gradient(#72a59b 0 58%, #315e55 59%); }
.census-result.is-retry { background: linear-gradient(#8b958d, #4e5a55); }
.census-result h3 { margin: 0; color: #f4c768; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.census-result > p:not(.eyebrow) { max-width: 39rem; margin: 0; line-height: 1.5; }
.census-result-colony { display: block; width: min(32rem, 100%); height: 14rem; object-fit: cover; object-position: 50% 66%; border: .2rem solid #d8d5b5; border-radius: .75rem; }
@media (min-width: 700px) {
  .census-field-desk { grid-template-columns: minmax(0, 1fr) minmax(11rem, .38fr); padding: .9rem; }
  .census-colony { order: 0; min-height: 26rem; }
  .census-colony img { position: absolute; height: 100%; object-position: 50% 64%; }
  .census-colony > div { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.3rem .9rem .9rem; background: linear-gradient(transparent, rgba(23,53,57,.93)); }
  .census-letter-rack { grid-template-columns: minmax(10rem, .55fr) 1fr; }
}

.sonar-game { color: #173d4a; text-align: left; }
.sonar-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sonar-battery-bank { display: flex; align-items: center; justify-content: flex-end; gap: .28rem; }
.sonar-battery-bank b { margin-right: .25rem; font-size: .67rem; letter-spacing: .07em; text-transform: uppercase; }
.sonar-battery { position: relative; display: inline-block; width: 1.45rem; height: .72rem; padding: .12rem; border: .1rem solid #315d67; border-radius: .15rem; background: #eaf3ed; }
.sonar-battery::after { content: ""; position: absolute; right: -.22rem; top: .17rem; width: .16rem; height: .3rem; border-radius: 0 .08rem .08rem 0; background: #315d67; }
.sonar-battery i { display: block; width: 100%; height: 100%; border-radius: .05rem; background: #29a37f; box-shadow: 0 0 .35rem rgba(38,164,166,.58); }
.sonar-battery.is-drained i { width: 12%; background: #f75e68; box-shadow: none; }
.sonar-console { position: relative; overflow: hidden; margin-top: .85rem; padding: 1rem; border: .32rem solid #8a693e; border-radius: .8rem; color: #d9ffeb; background: linear-gradient(145deg, #163b48, #071f2a 72%); box-shadow: inset 0 0 0 .18rem #2e7180, 0 .55rem 1rem rgba(8,36,47,.3); }
.sonar-console::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; background: repeating-linear-gradient(0deg, transparent 0 .22rem, rgba(153,255,212,.18) .22rem .25rem); }
.sonar-console.is-static { animation: sonar-console-static .6s ease; }
.sonar-console-heading { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .65rem; margin: -.15rem 0 .75rem; color: #f4c766; font: 900 .72rem/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.sonar-console-heading span, .sonar-console-heading i { width: .7rem; height: .7rem; border-radius: 50%; background: #26a4a6; box-shadow: 0 0 .6rem #63f2dc; animation: sonar-status-blink 1.4s ease-in-out infinite alternate; }
.sonar-console-heading i { animation-delay: -.7s; }
.sonar-channel { position: relative; z-index: 2; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .7rem; align-items: stretch; margin-top: .6rem; }
.sonar-channel header { display: grid; align-content: center; gap: .18rem; padding: .8rem; border: 1px solid rgba(128,219,201,.35); border-radius: .45rem; background: rgba(0,115,184,.24); }
.sonar-channel header span { color: #f1c45e; font-weight: 900; text-transform: uppercase; }
.sonar-channel header small { color: #a5d9d1; line-height: 1.3; }
.sonar-screen { position: relative; min-height: 8rem; overflow: hidden; padding: 1.05rem; border: .15rem solid #277a7b; border-radius: .45rem; background: radial-gradient(circle at 50% 40%, rgba(31,125,106,.34), transparent 55%), #082d31; box-shadow: inset 0 0 1.15rem rgba(31,210,165,.2); }
.sonar-screen p { position: relative; z-index: 3; display: grid; min-height: 5.5rem; align-content: end; margin: 0; color: #ecfff1; font: 700 clamp(.98rem, 2vw, 1.18rem)/1.48 Georgia, serif; text-shadow: 0 1px 2px #061a1e; }
.sonar-waveform { position: absolute; z-index: 1; inset: .75rem; display: flex; align-items: center; justify-content: center; gap: .35rem; opacity: .4; }
.sonar-waveform i { display: block; width: .32rem; height: 32%; border-radius: 1rem; background: #54e4b5; box-shadow: 0 0 .45rem #54e4b5; animation: sonar-wave 1.1s ease-in-out infinite alternate; }
.sonar-waveform i:nth-child(2), .sonar-waveform i:nth-child(6) { height: 72%; animation-delay: -.35s; }
.sonar-waveform i:nth-child(3), .sonar-waveform i:nth-child(5) { height: 48%; animation-delay: -.7s; }
.sonar-waveform i:nth-child(4) { height: 88%; animation-delay: -.15s; }
.sonar-waveform.reverse { transform: scaleX(-1); }
.sonar-blank { display: inline-block; min-width: 6rem; border-bottom: .14rem solid #f4c766; color: #f4c766; letter-spacing: .06em; text-align: center; }
.sonar-answer-lock { display: inline-block; padding: .05rem .38rem; border-radius: .25rem; color: #062f32; background: #67e2bd; box-shadow: 0 0 .6rem rgba(103,226,189,.65); animation: sonar-answer-lock .48s ease both; }
.sonar-game.is-failed .sonar-answer-lock { color: white; background: #f75e68; }
.sonar-frequency-panel { display: grid; gap: .7rem; margin-top: .85rem; padding: .85rem; border: .15rem solid #a4bdba; border-radius: .65rem; background: #e9f1ed; }
.sonar-frequency-panel > div:first-child { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.sonar-frequency-panel > div:first-child strong { color: #0e5260; text-transform: uppercase; letter-spacing: .07em; }
.sonar-frequency-panel > div:first-child span { color: #5d716e; font-size: .78rem; }
.sonar-frequency-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.sonar-frequency-button { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: center; min-height: 4rem; padding: .45rem; border: .14rem solid #3d7178; border-radius: .5rem; color: #123e4a; background: #f9fbf2; box-shadow: 0 .2rem 0 #315961; cursor: pointer; }
.sonar-frequency-button span { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 50%; color: white; background: #327582; font-size: .7rem; font-weight: 900; }
.sonar-frequency-button strong { overflow-wrap: anywhere; font: 800 1rem/1.15 Georgia, serif; }
.sonar-frequency-button:hover, .sonar-frequency-button:focus-visible, .sonar-frequency-button.is-selected { color: white; border-color: #cb8a3d; background: #167e88; transform: translateY(-.08rem); }
.sonar-frequency-button.is-rejected { color: #7b8582; border-color: #b7bfbb; background: #d6ddda; box-shadow: none; opacity: .65; text-decoration: line-through; }
.sonar-frequency-button.is-correct { color: #083c3a; border-color: #168a75; background: #bcebd8; box-shadow: 0 0 .65rem rgba(38,164,166,.45); opacity: 1; text-decoration: none; }
.sonar-feedback { margin-top: .8rem; }
.sonar-feedback.correct { background: #d6efe3; }
.sonar-feedback.failed { background: #ffe1dc; }
.sonar-log-card { margin-top: .8rem; padding: 1rem 1.1rem; border: .18rem solid #26a4a6; border-radius: .65rem; background: #edf8f1; animation: sonar-drawer-open .45s ease both; }
.sonar-log-card.is-failed { border-color: #f75e68; background: #fff0e9; }
.sonar-log-card .eyebrow { margin: 0 0 .4rem; }
.sonar-log-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.sonar-log-heading h3 { margin: 0; color: #123e4a; font-size: 1.65rem; }
.sonar-log-heading span { color: #7e5c43; font-weight: 800; }
.sonar-sense-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .7rem; }
.sonar-sense-grid section { padding: .7rem; border-radius: .45rem; background: rgba(255,255,255,.72); }
.sonar-sense-grid small { color: #0e7778; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.sonar-sense-grid p { margin: .3rem 0 0; line-height: 1.4; }
.sonar-distractor-note, .sonar-database-note { margin: .65rem 0 0; padding-top: .65rem; border-top: 1px dashed #adc5bd; line-height: 1.45; }
.sonar-database-note { color: #61716d; font-size: .85rem; }
.sonar-controls { display: flex; gap: .65rem; align-items: center; margin-top: .8rem; }
.sonar-next { margin-left: auto; }
.sonar-result { display: grid; min-height: 30rem; align-content: center; justify-items: center; gap: .7rem; padding: 1.6rem; border-radius: .85rem; color: white; text-align: center; background: radial-gradient(circle at 50% 20%, rgba(72,212,183,.24), transparent 35%), linear-gradient(#176c78, #0b3544); }
.sonar-result.is-retry { background: radial-gradient(circle at 50% 20%, rgba(247,94,104,.2), transparent 35%), linear-gradient(#6c6d67, #343e42); }
.sonar-result h3 { margin: 0; color: #f5c66a; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.sonar-result > p:not(.eyebrow) { max-width: 40rem; margin: 0; line-height: 1.5; }
.sonar-result-array { position: relative; width: min(32rem, 92%); height: 9rem; overflow: hidden; border: .2rem solid #b88c50; border-radius: .8rem; background: #082d31; box-shadow: inset 0 0 1.2rem rgba(63,239,190,.24); }
.sonar-result-array span { position: absolute; left: 50%; bottom: 0; width: .5rem; height: 6.5rem; background: #b88c50; }
.sonar-result-array span::before { content: ""; position: absolute; left: -2.6rem; top: -.25rem; width: 5.5rem; height: 2.8rem; border: .35rem solid #b88c50; border-bottom: 0; border-radius: 50% 50% 0 0; }
.sonar-result-array i { position: absolute; left: 50%; top: 1rem; width: 2rem; height: 2rem; margin-left: -1rem; border: .12rem solid #5ce1bb; border-radius: 50%; animation: sonar-result-ping 1.8s ease-out infinite; }
.sonar-result-array i:nth-of-type(2) { animation-delay: -.6s; }
.sonar-result-array i:nth-of-type(3) { animation-delay: -1.2s; }

@keyframes biosecurity-warning-shake { 18% { transform: translateX(-.35rem); } 42% { transform: translateX(.34rem); } 68% { transform: translateX(-.16rem); } }
@keyframes biosecurity-seal-crack { 35% { transform: rotate(-12deg) scale(1.08); } to { transform: rotate(8deg) scale(.86); opacity: .45; } }
@keyframes biosecurity-card-open { from { opacity: 0; transform: translateY(-.55rem) scaleY(.92); } to { opacity: 1; transform: none; } }

.biosecurity-game { color: #173f46; text-align: left; }
.biosecurity-dialog #activityTitle, .biosecurity-dialog #activityEyebrow { padding-right: 2.5rem; }
.biosecurity-dialog .dialog-close { min-width: 44px; min-height: 44px; }
.biosecurity-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.biosecurity-seal-bank { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.biosecurity-seal-bank { flex-wrap: wrap; }
.biosecurity-seal-bank b { margin-right: .2rem; font-size: .72rem; letter-spacing: .03em; }
.biosecurity-seal { display: inline-grid; width: 1.4rem; height: 1.4rem; place-items: center; border: 1px solid #9bbdb0; border-radius: 50%; color: #24674f; background: #d8eadc; font-size: .8rem; }
.biosecurity-seal.is-cracked { color: #934b3b; border-color: #dcafa3; background: #f3dcd4; animation: biosecurity-seal-crack .35s ease both; }
.biosecurity-scanner { position: relative; overflow: hidden; margin-top: .85rem; padding: 1rem; border: .25rem solid #315f61; border-radius: .85rem; background: linear-gradient(145deg, #e9f1e8, #c9ded6); box-shadow: inset 0 0 0 .16rem rgba(255,255,255,.66), 0 .55rem 1rem rgba(25,55,55,.2); }
.biosecurity-scanner.is-warning { animation: biosecurity-warning-shake .6s ease; }
.biosecurity-mission { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; padding: .9rem; border: 1px solid #a8b9a0; border-radius: .6rem; background: #fff9e7; }
.biosecurity-question { min-width: 0; }
.biosecurity-question .eyebrow { margin: 0 0 .4rem; color: #9c4936; font-size: .65rem; }
.biosecurity-question h3 { margin: 0; color: #173f46; font: 800 clamp(1.35rem, 2.7vw, 1.85rem)/1.25 Georgia, serif; }
.biosecurity-question h3 mark { padding: 0 .1em; color: inherit; background: #f4d58f; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.biosecurity-question > p:not(.eyebrow) { margin: .65rem 0; line-height: 1.5; font-size: .95rem; }
.biosecurity-example { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; padding: .5rem .65rem; border: 1px dashed #ccb17b; border-radius: .45rem; background: #fffdf3; }
.biosecurity-example > small { color: #79573d; font-size: .7rem; font-weight: 800; }
.biosecurity-example strong { color: #1c6064; font: 800 1.05rem/1.3 Georgia, serif; }
.biosecurity-example > span { flex-basis: 100%; color: #60716a; font-size: .73rem; line-height: 1.4; }
.biosecurity-scene { min-width: 0; overflow: hidden; margin: 0; border: 1px solid #adc1ad; border-radius: .55rem; background: #bdd3c0; }
.biosecurity-scene img { display: block; width: 100%; height: 8.5rem; object-fit: contain; }
.biosecurity-scene figcaption { padding: .5rem .6rem; color: #fff6df; background: #315e5f; font-size: .65rem; font-weight: 800; line-height: 1.4; }
.biosecurity-field-context { display: grid; gap: .25rem; margin: .8rem 0 0; padding: .65rem .8rem; border-left: 3px solid #8da991; border-radius: 0 .4rem .4rem 0; color: #536d64; background: #f1f5e9; font-size: .8rem; line-height: 1.4; }
.biosecurity-field-context strong { color: #355e5e; }
.biosecurity-pods { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; align-items: center; margin-top: .8rem; }
.biosecurity-pods > section { padding: .8rem; border: .15rem solid #7b9891; border-radius: .65rem; background: rgba(249,250,241,.82); }
.biosecurity-pods h4 { margin: 0 0 .6rem; color: #326866; font-size: .86rem; line-height: 1.4; }
.biosecurity-pods section > div { display: grid; gap: .48rem; }
.biosecurity-word-card { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; min-height: 3.45rem; padding: .35rem .7rem .35rem .35rem; border: .12rem solid #93aaa4; border-radius: .48rem; color: #173f46; background: #f9f7eb; text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.biosecurity-word-card:hover, .biosecurity-word-card:focus-visible { transform: translateY(-.12rem); box-shadow: 0 .28rem .5rem rgba(27,65,65,.18); }
.biosecurity-word-card > span { grid-row: 1 / 3; display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 50%; color: white; background: #527c7a; font-size: .64rem; font-weight: 900; }
.biosecurity-word-card strong { font: 800 1.1rem/1.3 Georgia, serif; overflow-wrap: anywhere; }
.biosecurity-word-card > small { grid-column: 2; color: inherit; font-size: .65rem; line-height: 1.4; }
.biosecurity-word-card:focus-visible { outline: 3px solid #2b768c; outline-offset: 3px; }
.biosecurity-word-card:disabled { opacity: 1; cursor: default; }
.biosecurity-word-card:disabled:hover { transform: none; }
.biosecurity-word-card.pod-a.is-selected { color: white; border-color: #075d91; background: #0873a9; box-shadow: 0 0 0 .14rem rgba(8,115,169,.18); }
.biosecurity-word-card.pod-b.is-selected { color: #543813; border-color: #d18b24; background: #f5c65f; box-shadow: 0 0 0 .14rem rgba(245,198,95,.24); }
.biosecurity-word-card.pod-a.is-selected span { background: #093d60; }
.biosecurity-word-card.pod-b.is-selected span { background: #9a651c; }
.biosecurity-word-card.pod-a.is-correct, .biosecurity-word-card.pod-b.is-correct { color: #073e3c; border-color: #16877f; background: #7fe0cf; box-shadow: 0 0 .9rem rgba(38,164,166,.55); }
.biosecurity-game.is-failed .biosecurity-word-card.is-correct { border-color: #c55349; background: #f8b3a2; box-shadow: 0 0 .9rem rgba(213,88,76,.4); }
.biosecurity-link { display: flex; align-items: center; justify-content: center; gap: .22rem; color: #b07031; font-size: 1.5rem; font-weight: 900; }
.biosecurity-link { pointer-events: none; }
.biosecurity-link > span { transform: rotate(90deg); }
.biosecurity-selected-pair { margin-top: .8rem; padding: .65rem .8rem; border: .12rem dashed #759590; border-radius: .5rem; background: rgba(255,255,255,.58); text-align: center; }
.biosecurity-selected-pair small { color: #6d7772; font-size: .65rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.biosecurity-selected-pair > div { display: flex; flex-direction: column; min-height: 2rem; align-items: stretch; justify-content: center; gap: .45rem; margin-top: .4rem; }
.biosecurity-selected-pair strong { flex: 1; min-width: 0; padding: .5rem .65rem; border: 1px solid #a1bfb8; border-radius: .4rem; color: #174f53; background: #eff9f5; font: 800 1.06rem/1.3 Georgia, serif; overflow-wrap: anywhere; }
.biosecurity-selected-pair strong.is-empty { border-style: dashed; color: #60716d; background: transparent; font: 700 .8rem/1.4 system-ui, sans-serif; }
.biosecurity-selected-pair span { color: #7b6c58; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.biosecurity-feedback { margin-top: .8rem; }
.biosecurity-feedback.correct { background: #d7eee2; }
.biosecurity-feedback.failed { background: #ffe1d8; }
.biosecurity-feedback.is-retry { background: #fff0d0; color: #795133; }
.biosecurity-audit-card { margin-top: .8rem; padding: 1rem 1.1rem; border: .18rem solid #278f88; border-radius: .65rem; background: #eef7ed; animation: biosecurity-card-open .35s ease both; }
.biosecurity-audit-card.is-failed { border-color: #c95b4e; background: #fff0e8; }
.biosecurity-audit-card > .eyebrow { margin: 0 0 .55rem; }
.biosecurity-card-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; align-items: center; }
.biosecurity-card-pair section { padding: .7rem; border-radius: .48rem; background: rgba(255,255,255,.74); }
.biosecurity-card-pair small { color: #417b76; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.biosecurity-card-pair h3 { margin: .16rem 0 .25rem; color: #16484d; font-size: 1.35rem; }
.biosecurity-card-pair p { margin: 0; line-height: 1.42; }
.biosecurity-card-pair > span { justify-self: center; width: 2rem; color: #b17331; font-size: 1.35rem; font-weight: 900; text-align: center; pointer-events: none; }
.biosecurity-pair-rule, .biosecurity-fact { margin: .7rem 0 0; line-height: 1.45; }
.biosecurity-elimination { margin-top: .7rem; padding: .7rem; border-top: 1px dashed #a9c1b7; border-bottom: 1px dashed #a9c1b7; }
.biosecurity-elimination strong { color: #994f3c; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.biosecurity-elimination p { margin: .3rem 0 0; line-height: 1.45; }
.biosecurity-controls { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; justify-content: flex-end; margin-top: .8rem; }
.biosecurity-controls button:disabled { opacity: .5; cursor: default; box-shadow: none; }
.biosecurity-next { margin-left: auto; }
.biosecurity-result { display: grid; min-height: 30rem; align-content: center; justify-items: center; gap: .7rem; padding: 1.6rem; border-radius: .85rem; color: white; text-align: center; background: radial-gradient(circle at 50% 25%, rgba(96,229,194,.22), transparent 35%), linear-gradient(#286f69, #173f46); }
.biosecurity-result.is-retry { background: radial-gradient(circle at 50% 25%, rgba(247,94,104,.18), transparent 35%), linear-gradient(#766b5f, #3f4847); }
.biosecurity-result h3 { margin: 0; color: #f5c568; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.biosecurity-result > p:not(.eyebrow) { max-width: 42rem; margin: 0; line-height: 1.5; }
.biosecurity-result-scene { width: min(32rem, 100%); max-height: 17rem; object-fit: contain; border: 2px solid #a9c2a9; border-radius: .7rem; background: #b6cdb8; }
@media (min-width: 700px) {
  .biosecurity-mission { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
  .biosecurity-scene img { height: 12rem; }
  .biosecurity-pods { grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); }
  .biosecurity-link > span { transform: none; }
  .biosecurity-selected-pair > div { flex-direction: row; align-items: center; }
  .biosecurity-card-pair { grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); }
}

@keyframes dispatch-signal-pulse { from { opacity: .34; transform: scaleY(.45); } to { opacity: 1; transform: scaleY(1); } }
@keyframes dispatch-static-shake { 18% { transform: translateX(-.34rem); filter: contrast(1.25); } 42% { transform: translateX(.32rem); } 68% { transform: translateX(-.15rem); filter: brightness(1.12); } }
@keyframes dispatch-pin-burn { 35% { transform: scale(1.15); filter: brightness(1.7); } to { transform: scale(.86); filter: grayscale(.75); opacity: .42; } }
@keyframes dispatch-card-open { from { opacity: 0; transform: translateY(-.55rem) scaleY(.92); } to { opacity: 1; transform: none; } }
@keyframes dispatch-tape-run { from { transform: translateX(-1rem); } to { transform: translateX(1rem); } }

.dispatch-game { color: #173f46; text-align: left; }
.dispatch-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dispatch-pin-bank { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.dispatch-pin-bank b { margin-right: .2rem; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; }
.dispatch-relay-pin { position: relative; display: inline-grid; width: 1.35rem; height: 1.35rem; place-items: center; border: .12rem solid #8b6234; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #f5d177, #b17832 68%); box-shadow: inset 0 0 0 .12rem rgba(255,247,206,.28), .08rem .12rem .18rem rgba(43,45,40,.3); }
.dispatch-relay-pin i { width: .34rem; height: .65rem; border-radius: .15rem; background: #5e472d; }
.dispatch-relay-pin.is-burnt { animation: dispatch-pin-burn .38s ease both; }
.dispatch-relay-pin.is-burnt::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; color: #652f28; font-weight: 900; }
.dispatch-console { position: relative; overflow: hidden; margin-top: .85rem; padding: 1rem; border: .28rem solid #4c443a; border-radius: .8rem; background: linear-gradient(150deg, #5b574d, #2d3d3e); box-shadow: inset 0 0 0 .16rem rgba(230,204,145,.14), 0 .55rem 1rem rgba(23,43,44,.24); }
.dispatch-console.is-static { animation: dispatch-static-shake .6s ease; }
.dispatch-signal { display: flex; height: 1.3rem; align-items: end; justify-content: center; gap: .42rem; margin-bottom: .65rem; }
.dispatch-signal i { width: .18rem; height: 1rem; border-radius: .15rem; background: #e3bd5d; animation: dispatch-signal-pulse .7s ease-in-out infinite alternate; }
.dispatch-signal i:nth-child(2), .dispatch-signal i:nth-child(6) { height: .45rem; animation-delay: -.2s; }
.dispatch-signal i:nth-child(3), .dispatch-signal i:nth-child(5) { height: .75rem; animation-delay: -.45s; }
.dispatch-signal i:nth-child(4) { height: 1.25rem; animation-delay: -.62s; }
.dispatch-form { position: relative; padding: 1.1rem 1.2rem; border: .12rem solid #90734c; border-radius: .3rem; background-color: #f1e7c6; background-image: repeating-linear-gradient(0deg, transparent 0 1.7rem, rgba(77,104,96,.12) 1.7rem 1.75rem); box-shadow: .32rem .38rem 0 rgba(33,30,25,.42); }
.dispatch-form::after { content: ""; position: absolute; inset: .45rem; pointer-events: none; border: .08rem dashed rgba(123,86,52,.28); }
.dispatch-form > * { position: relative; z-index: 1; }
.dispatch-form header { padding-bottom: .65rem; border-bottom: .14rem solid #a2865c; text-align: center; }
.dispatch-form header p { margin: 0; color: #a34d38; font: 900 .66rem/1.2 system-ui, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.dispatch-form header strong { display: block; margin-top: .22rem; color: #263f43; font: 800 clamp(1.25rem, 3vw, 1.8rem)/1.1 Georgia, serif; }
.dispatch-form dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: .8rem 0; }
.dispatch-form dl div { padding: .55rem; border: .08rem solid rgba(93,91,71,.3); border-radius: .3rem; background: rgba(255,255,255,.48); }
.dispatch-form dt { color: #8f4c3a; font-size: .61rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.dispatch-form dd { margin: .22rem 0 0; color: #24444a; font-size: .82rem; font-weight: 800; }
.dispatch-sentence { margin: .8rem 0; padding: .8rem; border-left: .25rem solid #c49242; color: #173f46; background: rgba(255,255,255,.58); font: 700 clamp(1.05rem, 2.5vw, 1.35rem)/1.65 Georgia, serif; }
.dispatch-blank { display: inline-block; min-width: 7.5rem; margin-inline: .14rem; padding: .05rem .28rem; border-bottom: .15rem solid #9b5a3f; color: #795e48; background: rgba(255,255,255,.7); text-align: center; }
.dispatch-blank.is-filled { color: #0f5d63; background: #d5eae1; }
.dispatch-blank.is-correct, .dispatch-blank.is-revealed { color: #073f40; border-color: #16877f; background: #82ddce; }
.dispatch-game.is-failed .dispatch-blank.is-revealed { color: #6f251f; border-color: #c55349; background: #f7b4a4; }
.dispatch-clue { margin: 0; padding: .62rem .72rem; border: .1rem solid #b99c6d; border-radius: .35rem; color: #5d594c; background: rgba(250,245,222,.78); font-size: .86rem; line-height: 1.45; }
.dispatch-word-bank { margin-top: .8rem; padding: .85rem; border: .18rem solid #4d716e; border-radius: .7rem; background: #e5eee9; }
.dispatch-word-bank header { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .65rem; }
.dispatch-word-bank header strong { color: #265d60; letter-spacing: .06em; text-transform: uppercase; }
.dispatch-word-bank header span { color: #697772; font-size: .78rem; }
.dispatch-word-bank > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.dispatch-punch-card { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 4.4rem; align-items: center; padding: .45rem .55rem; border: .12rem solid #78928d; border-radius: .42rem; color: #173f46; background: #fbf7e8; text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.dispatch-punch-card:hover, .dispatch-punch-card:focus-visible { transform: translateY(-.12rem); box-shadow: 0 .28rem .5rem rgba(27,65,65,.18); }
.dispatch-punch-card > span { grid-row: 1 / 3; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; color: white; background: #587a77; font-size: .62rem; font-weight: 900; }
.dispatch-punch-card strong { overflow-wrap: anywhere; font: 800 1rem/1.18 Georgia, serif; }
.dispatch-punch-card small { color: #6e7771; font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.dispatch-punch-card.is-selected { color: white; border-color: #096596; background: #0b77aa; box-shadow: 0 0 0 .14rem rgba(11,119,170,.18); }
.dispatch-punch-card.is-selected > span { background: #073d5d; }
.dispatch-punch-card.is-selected small { color: #e1f4f8; }
.dispatch-punch-card.is-rejected { color: #696a65; border-style: dashed; background: #d8dbd6; opacity: .68; text-decoration: line-through; }
.dispatch-punch-card.is-correct { color: #073e3c; border-color: #16877f; background: #7fe0cf; box-shadow: 0 0 .9rem rgba(38,164,166,.48); text-decoration: none; opacity: 1; }
.dispatch-feedback { margin-top: .8rem; }
.dispatch-feedback.correct { background: #d7eee2; }
.dispatch-feedback.failed { background: #ffe1d8; }
.dispatch-archive-card { margin-top: .8rem; padding: 1rem 1.1rem; border: .18rem solid #278f88; border-radius: .65rem; background: #eef7ed; animation: dispatch-card-open .35s ease both; }
.dispatch-archive-card.is-failed { border-color: #c95b4e; background: #fff0e8; }
.dispatch-archive-card > .eyebrow { margin: 0 0 .45rem; }
.dispatch-archive-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.dispatch-archive-heading h3 { margin: 0; color: #16484d; font-size: 1.65rem; }
.dispatch-archive-heading span { color: #7b6047; font-weight: 850; }
.dispatch-definition, .dispatch-root-note, .dispatch-audit, .dispatch-fact { margin: .62rem 0 0; line-height: 1.45; }
.dispatch-definition-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.dispatch-definition-list li { display: grid; gap: .2rem; padding: .65rem; border-radius: .42rem; background: rgba(255,255,255,.7); }
.dispatch-definition-list li.is-correct { border: .12rem solid #278f88; background: #d9eee4; }
.dispatch-definition-list strong { color: #26595b; }
.dispatch-definition-list span { color: #4f625e; font-size: .84rem; line-height: 1.35; }
.dispatch-definition-list small { color: #167b75; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.dispatch-audit { padding-top: .65rem; border-top: 1px dashed #abc2b8; }
.dispatch-archive-card blockquote { margin: .72rem 0 0; padding: .72rem; border-left: .24rem solid #c28a3b; color: #23464a; background: rgba(255,255,255,.68); font: 700 1rem/1.5 Georgia, serif; }
.dispatch-controls { display: flex; gap: .65rem; align-items: center; margin-top: .8rem; padding-bottom: max(.1rem, env(safe-area-inset-bottom)); }
.dispatch-next { margin-left: auto; }
.dispatch-result { display: grid; min-height: 30rem; align-content: center; justify-items: center; gap: .7rem; padding: 1.6rem; border-radius: .85rem; color: white; text-align: center; background: radial-gradient(circle at 50% 20%, rgba(80,216,191,.22), transparent 34%), linear-gradient(#176a70, #193d49); }
.dispatch-result.is-retry { background: radial-gradient(circle at 50% 20%, rgba(247,94,104,.18), transparent 34%), linear-gradient(#71685f, #3d4848); }
.dispatch-result h3 { margin: 0; color: #f5c568; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.dispatch-result > p:not(.eyebrow) { max-width: 42rem; margin: 0; line-height: 1.5; }
.dispatch-result-machine { position: relative; display: flex; width: min(32rem, 94%); height: 8.5rem; align-items: end; justify-content: center; gap: .55rem; overflow: hidden; border: .2rem solid #9c7742; border-radius: .75rem; background: #1a3135; }
.dispatch-result-machine span { position: absolute; top: 1rem; left: 12%; right: 12%; height: 2.4rem; border: .12rem dashed #f0cc73; background: rgba(244,233,194,.12); animation: dispatch-tape-run 1.8s ease-in-out infinite alternate; }
.dispatch-result-machine i { width: .42rem; border-radius: .3rem .3rem 0 0; background: #59d2b8; animation: dispatch-signal-pulse .75s ease-in-out infinite alternate; }
.dispatch-result-machine i:nth-of-type(1), .dispatch-result-machine i:nth-of-type(5) { height: 2rem; }
.dispatch-result-machine i:nth-of-type(2), .dispatch-result-machine i:nth-of-type(4) { height: 3.8rem; animation-delay: -.3s; }
.dispatch-result-machine i:nth-of-type(3) { height: 5.4rem; animation-delay: -.55s; }

@keyframes stone-mist-drift { from { transform: translateX(-4%); } to { transform: translateX(7%); } }
@keyframes stone-ridge-breathe { from { transform: translateY(0) rotate(var(--stone-turn, 0deg)); } to { transform: translateY(-.18rem) rotate(var(--stone-turn, 0deg)); } }
@keyframes stone-rockslide { 20% { transform: translateX(-.35rem); } 45% { transform: translateX(.3rem); } 70% { transform: translateX(-.15rem); } }
@keyframes stone-letter-lock { from { transform: translateY(.25rem) scale(.82); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes stone-spark { from { box-shadow: 0 0 0 rgba(244,197,103,0); } to { box-shadow: 0 0 1rem rgba(244,197,103,.85); } }

.stone-run-game { color: #243f43; text-align: left; }
.stone-length-highlight { display: inline-block; padding: .04em .24em; border-radius: .22rem; color: #173d46; background: #f4c568; box-shadow: inset 0 -.08rem 0 rgba(155,88,39,.28); font-weight: 900; }
.stone-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stone-pick-bank { display: flex; align-items: center; justify-content: flex-end; gap: .32rem; }
.stone-pick-bank b { margin-right: .25rem; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; }
.stone-pick { position: relative; display: inline-block; width: 1.7rem; height: .5rem; border-radius: .2rem; background: linear-gradient(#d9e4e0, #718486); transform: rotate(-28deg); box-shadow: .08rem .12rem 0 #33484b; }
.stone-pick::after { content: ""; position: absolute; right: -.3rem; top: -.25rem; width: .55rem; height: 1rem; border-radius: .2rem; background: #9a6738; }
.stone-pick.is-broken { opacity: .42; transform: rotate(-28deg) translateY(.16rem); }
.stone-pick.is-broken::before { content: ""; position: absolute; left: 48%; top: -.2rem; width: .12rem; height: .9rem; background: #c74f45; transform: rotate(24deg); }
.stone-traverse-scene { position: relative; min-height: 18rem; overflow: hidden; margin-top: .85rem; padding: 1rem; border: .3rem solid #5d5144; border-radius: .8rem; background: linear-gradient(#a8c0c1 0 44%, #72817d 45% 59%, #424c49 60%); box-shadow: inset 0 0 0 .16rem rgba(241,224,181,.2), 0 .55rem 1rem rgba(25,46,48,.22); }
.stone-traverse-scene.is-rockslide { animation: stone-rockslide .6s ease; }
.stone-mist { position: absolute; z-index: 1; left: -8%; width: 75%; height: 3.2rem; border-radius: 50%; background: rgba(239,246,238,.42); filter: blur(.5rem); animation: stone-mist-drift 5s ease-in-out infinite alternate; }
.stone-mist.one { top: 1.5rem; }
.stone-mist.two { top: 5rem; left: 35%; animation-delay: -2.4s; }
.stone-ridge { position: absolute; z-index: 1; left: -2%; right: -2%; bottom: -2rem; display: flex; justify-content: space-around; align-items: end; height: 9rem; }
.stone-ridge i { --stone-turn: -7deg; display: block; width: 19%; height: 68%; border: .15rem solid #3b4543; border-radius: 45% 35% 18% 22%; background: linear-gradient(135deg, #9ba6a0, #5f6965 58%, #414b48); box-shadow: inset .35rem .25rem .55rem rgba(238,241,223,.22), .2rem .3rem .45rem rgba(20,30,29,.35); animation: stone-ridge-breathe 2.7s ease-in-out infinite alternate; }
.stone-ridge i:nth-child(2) { --stone-turn: 5deg; height: 88%; animation-delay: -.8s; }
.stone-ridge i:nth-child(3) { --stone-turn: -2deg; height: 72%; animation-delay: -1.7s; }
.stone-ridge i:nth-child(4) { --stone-turn: 8deg; height: 94%; animation-delay: -.35s; }
.stone-ridge i:nth-child(5) { --stone-turn: -4deg; height: 62%; animation-delay: -2.1s; }
.stone-field-log { position: relative; z-index: 3; width: min(47rem, 92%); margin: 0 auto; padding: 1rem 1.2rem; border: .12rem solid #8f704a; border-radius: .35rem; background: #f0e3b9; background-image: repeating-linear-gradient(0deg, transparent 0 1.65rem, rgba(91,119,111,.16) 1.65rem 1.7rem); box-shadow: .35rem .45rem 0 rgba(61,51,41,.45); transform: rotate(-.35deg); }
.stone-field-log header { display: grid; gap: .12rem; padding-bottom: .55rem; border-bottom: .12rem solid rgba(83,90,75,.4); }
.stone-field-log header p { margin: 0; color: #9b4e3c; font: 900 .65rem/1.2 system-ui, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.stone-field-log header strong { color: #25474c; font: 800 clamp(1.25rem, 3vw, 1.8rem)/1.1 Georgia, serif; }
.stone-field-log header small { color: #686960; font-weight: 800; }
.stone-task { margin: .75rem 0 .2rem; color: #7a5944; font-size: .78rem; font-weight: 850; }
.stone-field-log blockquote { margin: .45rem 0 .15rem; color: #1d3f46; font: 700 clamp(1.05rem, 2.4vw, 1.35rem)/1.55 Georgia, serif; }
.stone-letter-console { margin-top: .8rem; padding: .85rem; border: .18rem solid #526966; border-radius: .7rem; background: #e7ece5; }
.stone-console-heading { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.stone-console-heading strong { color: #285a5d; letter-spacing: .06em; text-transform: uppercase; }
.stone-console-heading span { color: #63716d; font-size: .78rem; }
.stone-sentence-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .38rem; margin-top: .7rem; padding: .75rem; border-radius: .5rem; background: #283b3c; box-shadow: inset 0 .15rem .45rem rgba(0,0,0,.35); }
.stone-word-group { display: inline-flex; }
.stone-letter { display: grid; width: 1.72rem; height: 2.1rem; place-items: center; padding: 0; border: .07rem solid #8fa4a0; border-right: 0; color: #f3edd7; background: #445958; font: 800 1rem/1 Georgia, serif; cursor: pointer; }
.stone-word-group .stone-letter:first-child { border-radius: .28rem 0 0 .28rem; }
.stone-word-group .stone-letter:last-child { border-right: .07rem solid #8fa4a0; border-radius: 0 .28rem .28rem 0; }
.stone-letter:hover, .stone-letter:focus-visible { position: relative; z-index: 2; color: #143b3c; background: #f4c567; transform: translateY(-.12rem); }
.stone-letter.is-selected { position: relative; z-index: 2; color: #073f40; border-color: #e4bd5c; background: #f4c567; box-shadow: 0 0 .55rem rgba(244,197,103,.75); animation: stone-letter-lock .18s ease-out both; }
.stone-letter.is-revealed { position: relative; z-index: 3; color: #063e3f; border-color: #7de1d3; background: #6ed6c8; animation: stone-spark .55s ease-in-out infinite alternate; }
.stone-run-game.is-failed .stone-letter.is-revealed { color: white; border-color: #f47b72; background: #c9534d; }
.stone-answer-row { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr); gap: .8rem; align-items: end; margin-top: .75rem; }
.stone-answer-row label { display: grid; gap: .25rem; color: #5c6864; font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.stone-answer-row input { min-height: 2.8rem; padding: .5rem .7rem; border: .14rem solid #64817b; border-radius: .4rem; color: #16484d; background: white; font: 900 1.15rem/1 Georgia, serif; letter-spacing: .3em; text-transform: uppercase; }
.stone-answer-row > div { display: grid; gap: .25rem; }
.stone-answer-row small { color: #5c6864; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.stone-answer-boxes { display: grid; grid-template-columns: repeat(var(--stone-word-length, 4), 2.8rem); gap: .35rem; }
.stone-answer-boxes span { display: grid; height: 2.8rem; place-items: center; border: .12rem dashed #876d4a; border-radius: .35rem; color: #8a8273; background: #f7edcf; font: 900 1.25rem/1 Georgia, serif; text-transform: uppercase; }
.stone-answer-boxes span.is-filled { color: #174f52; border-style: solid; border-color: #397a72; background: #d5ebe1; animation: stone-letter-lock .18s ease-out both; }
.stone-feedback { margin-top: .8rem; }
.stone-feedback.correct { background: #d7eee2; }
.stone-feedback.failed { background: #ffe2da; }
.stone-audit-card { margin-top: .8rem; padding: 1rem 1.1rem; border: .18rem solid #278f88; border-radius: .65rem; background: #edf7ed; }
.stone-audit-card.is-failed { border-color: #c95b4e; background: #fff0e8; }
.stone-audit-card .eyebrow { margin: 0 0 .4rem; }
.stone-audit-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.stone-audit-heading h3 { margin: 0; color: #214b50; font-size: 1.7rem; text-transform: uppercase; }
.stone-audit-heading span { color: #785e48; font-weight: 800; }
.stone-junction { display: flex; gap: .8rem; align-items: center; margin: .7rem 0; padding: .65rem; border-radius: .45rem; background: rgba(255,255,255,.7); }
.stone-junction strong { color: #99503e; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.stone-junction code { color: #283f41; font: 850 1.15rem/1.3 Georgia, serif; }
.stone-junction mark { padding: .08rem .25rem; color: #064948; background: #89dfd0; }
.stone-audit-card > p:not(.eyebrow) { margin: .55rem 0 0; line-height: 1.45; }
.stone-audit-card small { color: #61706c; }
.stone-controls { display: flex; gap: .65rem; align-items: center; margin-top: .8rem; }
.stone-next { margin-left: auto; }
.stone-result { display: grid; min-height: 30rem; align-content: center; justify-items: center; gap: .7rem; padding: 1.6rem; border-radius: .85rem; color: white; text-align: center; background: linear-gradient(#9eb7b2 0 35%, #596965 36% 56%, #343f3d 57%); }
.stone-result.is-retry { background: linear-gradient(#9d9f99, #535b58 48%, #343a38); }
.stone-result h3 { margin: 0; color: #f4c568; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.stone-result > p:not(.eyebrow) { max-width: 40rem; margin: 0; line-height: 1.5; }
.stone-result-path { display: flex; align-items: end; justify-content: center; gap: .25rem; width: min(34rem, 94%); height: 9rem; }
.stone-result-path i { display: block; width: 18%; height: 48%; border: .15rem solid #3b4744; border-radius: 50% 40% 18% 20%; background: linear-gradient(135deg, #aeb8b0, #58645f); box-shadow: .2rem .3rem .4rem rgba(0,0,0,.32); animation: stone-ridge-breathe 1.8s ease-in-out infinite alternate; }
.stone-result-path i:nth-child(2), .stone-result-path i:nth-child(4) { height: 72%; animation-delay: -.7s; }
.stone-result-path i:nth-child(3) { height: 92%; animation-delay: -1.2s; }

.passport-dialog { width: min(58rem, calc(100% - 2rem)); }
.passport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1.2rem; }
.passport-word { padding: .9rem; border: 1px solid #d3dedc; border-radius: .75rem; background: #f4f7f3; }
.passport-word div { display: flex; justify-content: space-between; gap: .7rem; align-items: baseline; }
.passport-word strong { font-family: Georgia, serif; font-size: 1.15rem; }
.passport-word span { padding: .18rem .45rem; border-radius: 1rem; color: white; background: var(--blue); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.passport-word p { margin: .45rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.35; }

[hidden] { display: none !important; }

@media (max-width: 900px) {
  .welcome-card { margin-right: 0; }
  .map-layout, .scene-layout { grid-template-columns: 1fr; }
  .mission-panel { display: grid; grid-template-columns: minmax(0, 1fr); }
  .scene-viewport { min-height: 0; }
}

@media (max-width: 620px) {
  .activity-dialog.census-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .activity-dialog.biosecurity-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .antarctica-viewport .antarctica-activity-point { left: var(--x-mobile); top: var(--y-mobile, var(--y)); }
  .drake-viewport .drake-activity-point { left: var(--x-mobile, var(--x)); top: var(--y-mobile, var(--y)); }
  .activity-dialog.territory-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .activity-dialog.salvage-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .activity-dialog.updraft-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .welcome-screen { padding: 1rem; }
  .name-row, .game-header, .header-actions, .dialog-actions { align-items: stretch; flex-direction: column; }
  .game-header { display: flex; }
  .header-actions { gap: .25rem; }
  .map-viewport { aspect-ratio: 4 / 3; }
  .map-viewport > img { object-fit: cover; }
  .stop-label { display: none !important; }
  .activity-point { max-width: 3rem; padding: .3rem; }
  .activity-point > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; }
  .answer-grid { grid-template-columns: 1fr; }
  .activity-preview { padding: .65rem; }
  .inspection-hotspot, .shop-object { width: 2rem; height: 2rem; }
  .passport-grid { grid-template-columns: 1fr; }
  .rpg-progress { display: grid; }
  .rpg-controls { position: static; justify-content: center; border-radius: 0; }
  .rpg-interact-button { min-width: 5.1rem; }
  .difficulty-setting { grid-template-columns: 1fr; gap: .4rem; }
  .pack-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .pack-progress span:last-child { grid-column: 1 / -1; }
  .pack-yard { min-height: 30rem; padding-top: 9rem; }
  .cargo-container-row { grid-template-columns: 1fr; gap: .6rem; }
  .cargo-container { min-height: 6rem; padding: .75rem .65rem 1.65rem; }
  .container-manifest { font-size: .54rem; }
  .cargo-container strong { font-size: 1rem; overflow-wrap: anywhere; }
  .odd-cargo-pallet { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .6rem; }
  .odd-cargo-box { min-height: 5.6rem; }
  .pack-dictionary-card dl { grid-template-columns: 1fr; }
  .manifest-desk { grid-template-columns: 1fr; padding: 1.5rem .8rem; }
  .manifest-clipboard { min-height: 22rem; padding-inline: 1rem; }
  .stamp-tray { width: 100%; }
  .manifest-stamp { min-height: 5.2rem; }
  .inspector-sleeve { display: none; }
  .departure-heading, .departure-caption { align-items: flex-start; flex-direction: column; }
  .departure-route { white-space: normal; }
  .departure-caption { bottom: 3rem; }
  .phase2-preview-card { min-height: 20rem; }
  .rigging-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .rigging-progress span:last-child { grid-column: 1 / -1; }
  .rigging-board { min-height: 0; }
  .rigging-scene-caption { align-items: flex-start; flex-direction: column; padding: .65rem; }
  .rigging-work-area { padding: .7rem; }
  .rigging-work-area { grid-template-columns: 1fr; }
  .rigging-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rigging-bin { min-height: 11rem; width: min(10rem, 100%); justify-self: center; }
  .rigging-token-pool > div:first-child { display: grid; }
  .rigging-controls { display: grid; grid-template-columns: 1fr; }
  .rigging-next { margin-left: 0; }
  .course-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .course-progress span:last-child { grid-column: 1 / -1; }
  .course-chart-table { padding-inline: .55rem; }
  .course-logbook { padding-inline: .8rem; background: #f3e4ba; }
  .course-log-heading { display: grid; }
  .course-options, .course-definitions { grid-template-columns: 1fr; }
  .course-controls { display: grid; grid-template-columns: 1fr; }
  .course-next { margin-left: 0; }
  .weather-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .weather-progress span:last-child { grid-column: 1 / -1; }
  .weather-instrument-head { grid-template-columns: 1fr auto; }
  .weather-instrument-head > div:first-child { grid-column: 1 / -1; }
  .weather-scale-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weather-reading-pool > div:first-child { display: grid; }
  .weather-audit-spectrum { grid-template-columns: 1fr; }
  .weather-audit-spectrum li:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -.62rem; }
  .weather-controls { display: grid; grid-template-columns: 1fr; }
  .weather-next { margin-left: 0; }
  .lookout-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .lookout-progress span:last-child { grid-column: 1 / -1; }
  .lookout-segment-tray > div:first-child { display: grid; }
  .lookout-segment-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lookout-field-log dl { grid-template-columns: 1fr; }
  .lookout-controls { display: grid; grid-template-columns: 1fr; }
  .lookout-next { margin-left: 0; }
  .census-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .census-progress span:last-child { grid-column: 1 / -1; }
  .census-field-desk { grid-template-columns: 1fr; padding: .55rem; }
  .census-notebook { padding: 1.1rem .7rem 1rem 1.9rem; }
  .census-binding { left: .35rem; width: .65rem; }
  .census-clues, .census-letter-rack, .census-lexicon-card dl { grid-template-columns: 1fr; }
  .census-letter-rack { text-align: center; }
  .census-controls { display: grid; grid-template-columns: 1fr; }
  .census-next { margin-left: 0; }
  .sonar-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .sonar-progress > span:last-child { grid-column: 1 / -1; justify-content: flex-start; }
  .sonar-channel { grid-template-columns: 1fr; }
  .sonar-channel header { display: flex; justify-content: space-between; align-items: baseline; }
  .sonar-frequency-panel > div:first-child { display: grid; }
  .sonar-frequency-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sonar-sense-grid { grid-template-columns: 1fr; }
  .sonar-controls { display: grid; grid-template-columns: 1fr; }
  .sonar-next { margin-left: 0; }
  .biosecurity-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .biosecurity-progress > span:last-child { grid-column: 1 / -1; justify-content: flex-start; }
  .biosecurity-scanner { padding: .55rem; }
  .biosecurity-pods { grid-template-columns: 1fr; }
  .biosecurity-link > span { transform: rotate(90deg); }
  .biosecurity-selected-pair > div { align-items: stretch; flex-direction: column; gap: .28rem; }
  .biosecurity-card-pair { grid-template-columns: 1fr; }
  .biosecurity-card-pair > span { transform: rotate(90deg); }
  .biosecurity-controls { display: grid; grid-template-columns: 1fr; }
  .biosecurity-next { margin-left: 0; }
  .dispatch-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .dispatch-progress > span:last-child { grid-column: 1 / -1; justify-content: flex-start; }
  .dispatch-console { padding: .55rem; }
  .dispatch-form { padding: .85rem .65rem; }
  .dispatch-form dl { grid-template-columns: 1fr; }
  .dispatch-word-bank header { display: grid; }
  .dispatch-word-bank > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dispatch-definition-list { grid-template-columns: 1fr; }
  .dispatch-archive-heading { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .dispatch-controls { display: grid; grid-template-columns: 1fr; }
  .dispatch-next { margin-left: 0; }
  .creche-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .creche-progress > span:last-child { grid-column: 1 / -1; justify-content: flex-start; }
  .creche-colony { min-height: 13.5rem; }
  .creche-clue { width: calc(100% - 1rem); padding: .6rem; }
  .creche-nests { grid-template-columns: 1fr; }
  .creche-nest { padding: .55rem; }
  .creche-pebble { grid-template-columns: 1fr; justify-items: center; gap: .25rem; padding: .35rem .2rem; text-align: center; }
  .creche-pebble strong { font-size: .82rem; }
  .creche-fusion { gap: .3rem; }
  .creche-fusion span, .creche-fusion strong { min-width: 0; padding: .35rem; font-size: .84rem; }
  .creche-root-breakdown { grid-template-columns: 1fr; }
  .creche-root-breakdown b { text-align: center; }
  .creche-controls { display: grid; grid-template-columns: 1fr; }
  .creche-controls [data-creche-next] { margin-left: 0; }
  .territory-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .territory-progress > span:last-child { grid-column: 1 / -1; justify-content: flex-start; }
  .territory-sector { padding: .6rem .7rem; }
  .territory-clues, .territory-rail, .territory-log-words { grid-template-columns: 1fr; }
  .territory-rail section { padding: .65rem; }
  .territory-gap { min-width: 3rem; }
  .territory-preview { grid-template-columns: 1fr 1fr; }
  .territory-preview > div:last-child { grid-column: 1 / -1; }
  .territory-controls { display: grid; grid-template-columns: 1fr; }
  .territory-controls [data-territory-next] { margin-left: 0; }
  .salvage-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .salvage-progress > span:last-child { grid-column: 1 / -1; justify-content: flex-start; }
  .salvage-yard { height: 12rem; }
  .salvage-sector { padding: 1.6rem .7rem .65rem; }
  .salvage-manifest { padding: .6rem; }
  .salvage-tags, .salvage-definitions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salvage-tag { min-height: 5.7rem; }
  .salvage-tags > :last-child { grid-column: 1 / -1; }
  .salvage-definitions > :last-child { grid-column: 1 / -1; }
  .salvage-check-step { width: 100%; margin-left: 0; }
  .salvage-controls { display: grid; grid-template-columns: 1fr; }
  .salvage-controls [data-salvage-next] { margin-left: 0; }
  .updraft-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .updraft-progress > span:last-child { grid-column: 1 / -1; justify-content: flex-start; }
  .updraft-words { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .updraft-definitions { grid-template-columns: 1fr; }
  .updraft-controls { display: grid; grid-template-columns: 1fr; }
  .updraft-controls [data-updraft-next] { margin-left: 0; }
  .stone-progress { display: grid; grid-template-columns: 1fr 1fr; }
  .stone-progress > span:last-child { grid-column: 1 / -1; justify-content: flex-start; }
  .stone-traverse-scene { padding: .6rem; }
  .stone-field-log { width: 100%; padding: .8rem; }
  .stone-console-heading { display: grid; }
  .stone-sentence-strip { gap: .28rem; padding: .55rem; }
  .stone-letter { width: 1.48rem; height: 1.9rem; }
  .stone-answer-row { grid-template-columns: 1fr; }
  .stone-audit-heading, .stone-junction { align-items: flex-start; flex-direction: column; }
  .stone-controls { display: grid; grid-template-columns: 1fr; }
  .stone-next { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Grytviken postal telegraph game: a tactile postcard, without hover-only controls. */
.cipher-game { color: #213e44; text-align: left; }
.cipher-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
.cipher-seal-bank { display: flex; align-items: center; justify-content: flex-end; gap: .28rem; }
.cipher-seal-bank b { margin-left: .25rem; font-size: .72rem; }
.cipher-seal { width: 1.25rem; height: 1.25rem; border: .12rem double #f3d6a3; border-radius: 50%; background: #ad493e; box-shadow: .05rem .1rem .12rem #62534b; }
.cipher-seal.is-cracked { background: #a39b8d; border-color: #6b6c66; transform: rotate(-17deg); opacity: .62; }
.cipher-terminal { position: relative; overflow: hidden; margin-top: .8rem; padding: .9rem; border: .25rem solid #624c3e; border-radius: .75rem; background: linear-gradient(#8b4b40 0 3rem, #49626a 3rem 100%); box-shadow: 0 .4rem .8rem #173f4633; }
.cipher-terminal-top { display: flex; gap: .55rem; height: 2.15rem; align-items: flex-start; }
.cipher-terminal-top span { width: .7rem; height: .7rem; border-radius: 50%; background: #eec77c; box-shadow: inset .1rem .1rem .15rem #fff8d2; }
.cipher-postcard { position: relative; padding: 1rem 1.25rem; border: .15rem solid #d0a97b; border-radius: .3rem; background: repeating-linear-gradient(0deg, #fbefd2 0 1.8rem, #e6d8b8 1.85rem 1.9rem); box-shadow: .3rem .35rem #273f4480; }
.cipher-postcard .eyebrow { margin: 0; }
.cipher-postcard h3 { margin: .3rem 0 .85rem; color: #213e44; font-size: clamp(1.25rem, 3vw, 1.8rem); }
.cipher-postmark { position: absolute; right: .8rem; top: .65rem; display: grid; width: 4.1rem; height: 4.1rem; place-items: center; border: .2rem double #9b6255; border-radius: 50%; color: #855246; font: 900 .6rem/1.2 system-ui, sans-serif; text-align: center; text-transform: uppercase; transform: rotate(-13deg); opacity: .72; }
.cipher-rule, .cipher-clue { max-width: 50rem; margin: .7rem 0 0; padding: .6rem .7rem; border-radius: .35rem; background: #fff9e9d9; line-height: 1.45; }
.cipher-code { margin-top: .85rem; }
.cipher-code > strong { display: block; margin-bottom: .45rem; color: #855145; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.cipher-code-tiles { display: flex; flex-wrap: wrap; gap: .3rem; }
.cipher-code-tile { display: grid; min-width: 2.4rem; min-height: 2.6rem; padding: .25rem; place-items: center; border: .1rem solid #526669; border-radius: .3rem; color: #f6f0d9; background: #284d55; font: 900 1.12rem/1 Georgia, serif; }
.cipher-input, .cipher-keyboard { margin-top: .8rem; padding: .8rem; border: .14rem solid #8aa5a0; border-radius: .6rem; background: #edf4ef; }
.cipher-input h3, .cipher-keyboard h3 { margin: 0 0 .35rem; color: #23545b; font-size: 1rem; }
.cipher-input p { margin: .1rem 0 .55rem; font-size: .84rem; line-height: 1.4; }
.cipher-slots { display: flex; flex-wrap: wrap; gap: .28rem; }
.cipher-slot { display: grid; min-width: 2.7rem; min-height: 3rem; place-items: center; border: .13rem solid #829892; border-radius: .35rem; color: #245058; background: #fffcf0; font: 900 1.35rem/1 Georgia, serif; cursor: pointer; }
.cipher-slot.is-active { border-color: #b85837; box-shadow: 0 0 0 .16rem #f1c777; }
.cipher-slot.is-fixed { color: #0b5b55; border-color: #278f88; background: #c8eee1; }
.cipher-slot:focus-visible, .cipher-key:focus-visible { outline: .18rem solid #b85837; outline-offset: .12rem; }
.cipher-slot:disabled { opacity: 1; cursor: default; }
.cipher-entry-status { margin-top: .5rem !important; color: #526c68; font-weight: 800; }
.cipher-keys { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: .35rem; }
.cipher-key { min-height: 2.85rem; padding: .1rem; border: .1rem solid #846744; border-radius: .35rem; color: #213e44; background: #f4d89f; font: 900 1.12rem/1 Georgia, serif; cursor: pointer; box-shadow: 0 .16rem #785638; }
.cipher-key:active { transform: translateY(.12rem); box-shadow: 0 .04rem #785638; }
.cipher-key:disabled { opacity: .65; cursor: default; }
.cipher-feedback { margin-top: .8rem; }
.cipher-feedback.correct { background: #d8efe4; }
.cipher-feedback.incorrect, .cipher-feedback.failed { background: #ffe5d8; }
.cipher-game.is-incorrect .cipher-slots { animation: cipher-rope-shake .3s ease; }
.cipher-stamp { width: max-content; max-width: 100%; margin: .7rem 0; padding: .3rem .7rem; border: .22rem double #167d78; border-radius: .3rem; color: #11716d; font: 900 1.2rem/1.1 Georgia, serif; letter-spacing: .08em; transform: rotate(-8deg); animation: cipher-stamp-in .3s ease-out; }
.cipher-stamp.is-audit { color: #b3483d; border-color: #b3483d; }
.cipher-archive { margin-top: .8rem; padding: .9rem 1rem; border: .14rem solid #3c8880; border-radius: .6rem; background: #f8f1dd; }
.cipher-archive h3 { margin: .1rem 0 .5rem; color: #214c4e; font-size: 1.5rem; text-transform: capitalize; }
.cipher-archive h4 { margin: .8rem 0 .35rem; }
.cipher-archive p { line-height: 1.45; }
.cipher-mapping { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .3rem; margin: 0; padding-left: 1.2rem; }
.cipher-mapping li { padding: .28rem; border-radius: .25rem; background: #fffaf0; font-weight: 750; }
.cipher-museum-note { padding-top: .6rem; border-top: 1px dashed #ae9c7f; }
.cipher-controls { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .8rem; padding-bottom: max(.1rem, env(safe-area-inset-bottom)); }
.cipher-controls button { min-height: 2.8rem; }
.cipher-controls [data-cipher-next] { margin-left: auto; }
.cipher-result { display: grid; min-height: 24rem; align-content: center; justify-items: center; gap: .65rem; padding: 1rem; border-radius: .8rem; color: white; background: linear-gradient(145deg, #356d6b, #1d4248); text-align: center; }
.cipher-result.is-retry { background: linear-gradient(145deg, #78675a, #424c4d); }
.cipher-result h3 { margin: 0; color: #f5d48c; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.cipher-result > p:not(.eyebrow) { max-width: 34rem; line-height: 1.5; }
.cipher-result-mark { display: grid; width: 6rem; height: 6rem; place-items: center; border: .2rem double #f5d48c; border-radius: 50%; font-size: 3rem; animation: cipher-stamp-in .4s ease-out; }
@keyframes cipher-stamp-in { from { opacity: 0; transform: scale(1.4) rotate(-15deg); } to { opacity: 1; transform: scale(1) rotate(-8deg); } }
@keyframes cipher-rope-shake { 25% { transform: translateX(-.2rem); } 65% { transform: translateX(.2rem); } }
@media (max-width: 620px) {
  .activity-dialog.cipher-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .cipher-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cipher-seal-bank { grid-column: 1 / -1; justify-content: flex-start; }
  .cipher-terminal { padding: .45rem; }
  .cipher-postcard { padding: .7rem; }
  .cipher-postmark { width: 3rem; height: 3rem; font-size: .5rem; }
  .cipher-postcard h3 { padding-right: 3rem; }
  .cipher-code-tile { min-width: 2rem; min-height: 2.2rem; }
  .cipher-slot { min-width: 46px; min-height: 46px; }
  .cipher-keys { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cipher-key { min-height: 46px; }
  .cipher-controls { display: grid; grid-template-columns: 1fr; }
  .cipher-controls [data-cipher-next] { margin-left: 0; }
}
@media (max-width: 380px) {
  .cipher-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cipher-game *, .cipher-game *::before, .cipher-game *::after, .cipher-result * { animation-duration: .001ms !important; }
}

/* Blood Falls: readable sensor controls for touch, mouse and keyboard. */
.blood-game { color: #1f3b43; text-align: left; }
.blood-dialog .dialog-close { min-width: 44px; min-height: 44px; }
.blood-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
.blood-probes { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.blood-probes b { margin-left: .35rem; font-size: .75rem; }
.blood-probe { display: inline-block; width: .8rem; height: 1.5rem; border: .12rem solid #73503b; border-radius: .25rem; background: linear-gradient(#ffe8a4, #e89b4f); box-shadow: 0 0 .6rem #f7bf6a; transform: rotate(12deg); transition: opacity .25s, filter .25s; }
.blood-probe.is-spent { opacity: .45; filter: grayscale(1); box-shadow: none; }
.blood-sensor { position: relative; overflow: hidden; margin-top: .85rem; border: .25rem solid #304850; border-radius: .85rem; background: #142f39; box-shadow: 0 .5rem 1rem #14374240; }
.blood-sensor-top { display: flex; gap: .5rem; align-items: center; min-height: 2.6rem; padding: .4rem .8rem; color: #e9ece0; background: linear-gradient(90deg, #314a50, #192d36); font-size: .73rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.blood-sensor-top span { color: #f17b69; font-size: 1rem; }
.blood-readout { position: relative; margin: .65rem; padding: clamp(.75rem, 2vw, 1.25rem); border: .1rem solid #579c99; border-radius: .55rem; color: #eff8ed; background: radial-gradient(circle at 85% 0, #295e60, #183d47 60%, #102b35); }
.blood-readout .eyebrow { color: #ffbd84; }
.blood-spectrum { display: flex; align-items: end; gap: .28rem; height: 2.35rem; padding: .25rem .1rem; border-bottom: 1px solid #70aaa96b; }
.blood-spectrum i { flex: 1; max-width: 1.3rem; height: 38%; border-radius: .12rem .12rem 0 0; background: linear-gradient(#f68c76, #5ac8c0); opacity: .8; animation: blood-spectrum-pulse 1.8s ease-in-out infinite alternate; }
.blood-spectrum i:nth-child(3n) { height: 82%; animation-delay: -.7s; }
.blood-spectrum i:nth-child(4n) { height: 55%; animation-delay: -1.2s; }
.blood-spectrum i:nth-child(5n) { height: 96%; animation-delay: -.4s; }
.blood-sentence { margin: .7rem 0 1rem; font: 800 clamp(1.1rem, 2.7vw, 1.55rem)/1.75 Georgia, serif; }
.blood-word { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .16rem; max-width: 100%; padding: .12rem .24rem; vertical-align: middle; border-bottom: .14rem solid #f4ae84; }
.blood-anchor { display: inline-grid; min-width: 1.15rem; height: 2.5rem; place-items: center; color: #fff9e9; }
.blood-slot { display: inline-grid; min-width: 44px; min-height: 44px; padding: .15rem; place-items: center; border: .12rem solid #9ac8c5; border-radius: .3rem; color: #fff; background: #285b63; font: 900 1.1rem/1 Georgia, serif; }
.blood-slot.is-active { border-color: #ffbb6a; box-shadow: 0 0 0 .12rem #ffbb6a; }
.blood-slot.is-fixed { color: #073c3d; border-color: #65d2c4; background: #bdf0e7; }
.blood-slot:disabled { opacity: 1; cursor: default; }
.blood-clue { padding: .7rem .85rem; border-left: .25rem solid #ed9b77; border-radius: .3rem; color: #ecf5ed; background: #0d2a34a8; }
.blood-clue strong, .blood-rack > strong { color: #ffce95; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.blood-clue p { margin: .35rem 0 0; line-height: 1.45; }
.blood-rack { margin-top: .8rem; padding: .75rem; border: .12rem solid #9dbbb6; border-radius: .6rem; background: #eaf5f1; }
.blood-rack > strong { color: #295760; }
.blood-rack p { margin: .3rem 0 .65rem; font-size: .86rem; }
.blood-tiles { display: flex; flex-wrap: wrap; gap: .45rem; }
.blood-tile { min-width: 2.85rem; min-height: 2.85rem; padding: .2rem; border: .12rem solid #8a593b; border-radius: .42rem; color: #3c302b; background: #f7dca7; box-shadow: 0 .18rem #a4744b; font: 900 1.25rem/1 Georgia, serif; }
.blood-tile:active { transform: translateY(.15rem); box-shadow: 0 .03rem #a4744b; }
.blood-tile.is-used { opacity: .38; box-shadow: none; }
.blood-slot:focus-visible, .blood-tile:focus-visible { outline: .2rem solid #ffb56d; outline-offset: .13rem; }
.blood-feedback { margin: .8rem 0; }
.blood-hint { margin: .6rem 0; padding: .65rem .8rem; border-left: .25rem solid #eab45c; border-radius: .3rem; background: #fff0cf; line-height: 1.45; }
.blood-log { margin: .85rem 0; padding: .9rem 1rem; border: .12rem solid #4c9d97; border-radius: .65rem; background: #fcf3de; }
.blood-log h3 { margin: .15rem 0 .65rem; color: #9b493c; font: 900 clamp(1.5rem, 3vw, 2rem)/1.1 Georgia, serif; text-transform: capitalize; }
.blood-log p { margin: .5rem 0; line-height: 1.5; }
.blood-log .blood-fact { padding-top: .5rem; border-top: 1px dashed #bfa983; }
.blood-controls { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; padding-bottom: max(.1rem, env(safe-area-inset-bottom)); }
.blood-controls button { min-height: 2.8rem; }
.blood-controls [data-blood-next] { margin-left: auto; }
.blood-game.is-correct .blood-sensor::after { content: ""; position: absolute; inset: 0 auto 0 -15%; width: 13%; pointer-events: none; background: linear-gradient(90deg, transparent, #9bf6e7aa, transparent); transform: skewX(-14deg); animation: blood-scan 1.1s ease-out forwards; }
.blood-game.is-failed .blood-readout { border-color: #f1a1a1; box-shadow: inset 0 0 1rem #bad3dc; }
.blood-readout.is-shaking { animation: blood-shake .38s ease; }
.blood-result { display: grid; min-height: 20rem; align-content: center; justify-items: center; gap: .6rem; padding: 1rem; border-radius: .8rem; color: white; background: linear-gradient(140deg, #215968, #143c43); text-align: center; }
.blood-result.is-retry { background: linear-gradient(140deg, #67575b, #33474b); }
.blood-result h3 { margin: 0; color: #ffcf8c; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.blood-result p:not(.eyebrow) { max-width: 34rem; line-height: 1.5; }
.blood-result-signal { display: grid; width: 5.5rem; height: 5.5rem; place-items: center; border: .2rem solid #ffc28c; border-radius: 50%; color: #ffce9a; font-size: 3rem; animation: blood-signal .6s ease-out; }
@keyframes blood-scan { to { left: 110%; } }
@keyframes blood-spectrum-pulse { to { opacity: .4; transform: scaleY(.7); } }
@keyframes blood-shake { 25% { transform: translateX(-.2rem); } 70% { transform: translateX(.2rem); } }
@keyframes blood-signal { from { opacity: .4; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 620px) {
  .activity-dialog.blood-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .blood-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blood-probes { grid-column: 1 / -1; justify-content: flex-start; }
  .blood-readout { margin: .4rem; padding: .65rem; }
  .blood-anchor { min-width: .9rem; height: 2.15rem; }
  .blood-slot { min-width: 44px; min-height: 44px; }
  .blood-controls { display: grid; grid-template-columns: 1fr; }
  .blood-controls [data-blood-next] { margin-left: 0; }
  .blood-tile { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .blood-game *, .blood-game *::before, .blood-game *::after, .blood-result * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Ice-core cloze game: a CSS-drawn laboratory tray with stable, tap-first controls. */
.ice-core-game { color: #173b49; text-align: left; }
.ice-core-dialog .dialog-close { min-width: 44px; min-height: 44px; }
.ice-core-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: .5rem; }
.ice-core-probes { display: flex; align-items: center; justify-content: flex-end; gap: .32rem; }
.ice-core-probes b { margin-left: .3rem; font-size: .72rem; }
.ice-core-probe { display: inline-block; width: .85rem; height: 1.5rem; border: .12rem solid #416776; border-radius: .25rem; background: linear-gradient(#eaffff, #80b9cb); box-shadow: 0 0 .45rem #b6eaf0; transform: rotate(12deg); transition: opacity .2s, filter .2s; }
.ice-core-probe.is-spent { opacity: .35; filter: grayscale(1); box-shadow: none; }
.ice-core-lab { overflow: hidden; margin-top: .8rem; border: .22rem solid #2e5363; border-radius: .85rem; background: linear-gradient(145deg, #496e79, #244954); box-shadow: 0 .4rem .85rem #153c4d35; }
.ice-core-lab-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; padding: .55rem .85rem; color: #f2fbf8; background: #153a47; font-size: .73rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.ice-core-lab-title small { color: #c5e2e5; font-size: .67rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.ice-core-tray { display: grid; grid-template-columns: minmax(5rem, 18%) minmax(0, 1fr); align-items: stretch; gap: .8rem; padding: .8rem; }
.ice-core-tube { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 15rem; padding: .25rem; border: .35rem solid #b5d9de; border-radius: 1.4rem; background: #dff6f5; box-shadow: inset 0 0 .6rem #43869b, 0 .18rem .4rem #122f3a70; }
.ice-core-tube::after { content: ""; position: absolute; inset: .5rem 1rem auto auto; width: .35rem; height: 85%; border-radius: 1rem; background: #ffffffaa; pointer-events: none; }
.ice-core-tube span { flex: 1; background: linear-gradient(90deg, #d8f2f2, #f8ffff 45%, #add9df); border-bottom: .15rem solid #79aeb9; }
.ice-core-tube span:nth-child(2n) { background: linear-gradient(90deg, #b8d6de, #e5f5f1 50%, #8ab9c6); }
.ice-core-tube span:nth-child(3n) { background-image: radial-gradient(circle at 35% 35%, #fff 0 .12rem, transparent .14rem), radial-gradient(circle at 65% 65%, #fff 0 .1rem, transparent .12rem), linear-gradient(90deg, #a9d2d8, #e5f7f7, #9ac4ca); }
.ice-core-sheet { align-self: stretch; min-width: 0; padding: clamp(.8rem, 2vw, 1.35rem); border: .14rem solid #b4d6d5; border-radius: .6rem; background: #f5fcf5; box-shadow: .15rem .2rem #163b4960; }
.ice-core-sheet .eyebrow { margin: 0; color: #356a78; }
.ice-core-sentence { margin: .95rem 0; font: 800 clamp(1.12rem, 2.7vw, 1.6rem)/1.5 Georgia, serif; }
.ice-core-blank { display: inline-block; min-width: 6.5rem; margin: 0 .12rem; padding: .08rem .35rem; border-bottom: .18rem solid #d69b58; color: #375c69; text-align: center; vertical-align: baseline; }
.ice-core-blank.is-filled { color: #16455c; background: #e2eff0; }
.ice-core-blank.is-correct { border-color: #229b87; color: #0a695e; background: #d9f3e8; }
.ice-core-clue { margin: .8rem 0 0; padding: .65rem .75rem; border-left: .25rem solid #d49d55; border-radius: .25rem; background: #e8f2ed; line-height: 1.45; }
.ice-core-rack { margin-top: .75rem; padding: .75rem; border: .12rem solid #9dbdbd; border-radius: .65rem; background: #e8f3f0; }
.ice-core-rack strong { color: #1c5260; }
.ice-core-rack p { margin: .2rem 0 .65rem; font-size: .86rem; }
.ice-core-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.ice-core-option { display: flex; min-width: 0; min-height: 3.5rem; align-items: center; justify-content: center; gap: .45rem; padding: .35rem .45rem; border: .12rem solid #527d88; border-radius: .55rem; color: #123e4d; background: #f8fcf7; font: 850 clamp(.83rem, 1.5vw, 1.1rem)/1.2 system-ui, sans-serif; overflow-wrap: anywhere; cursor: pointer; }
.ice-core-bit-icon { display: inline-block; flex: none; width: .65rem; height: 1.45rem; border: .1rem solid #4c6d73; border-radius: .2rem .2rem .08rem .08rem; background: linear-gradient(#b6d9d8, #6aa6aa); transform: rotate(14deg); }
.ice-core-option.is-selected { border-color: #a85b31; background: #fff2d1; box-shadow: inset 0 0 0 .1rem #e8aa6c; }
.ice-core-option.is-rejected { opacity: .5; text-decoration: line-through; }
.ice-core-option.is-answer { border-color: #138a7e; color: #0b665d; background: #d4f0e3; }
.ice-core-option:disabled { cursor: default; }
.ice-core-option.is-answer:disabled { opacity: 1; }
.ice-core-option:focus-visible, .ice-core-controls button:focus-visible { outline: .2rem solid #b85d38; outline-offset: .13rem; }
.ice-core-feedback { margin: .8rem 0; }
.ice-core-hint { margin: .6rem 0; padding: .65rem .8rem; border-left: .25rem solid #d2a359; border-radius: .3rem; background: #fff0cf; line-height: 1.45; }
.ice-core-archive { margin: .8rem 0; padding: .85rem 1rem; border: .12rem solid #59a397; border-radius: .65rem; background: #fcf5e3; }
.ice-core-archive h3 { margin: .12rem 0 .65rem; color: #236675; font: 900 clamp(1.5rem, 3vw, 2rem)/1.1 Georgia, serif; text-transform: capitalize; }
.ice-core-archive p, .ice-core-archive li { line-height: 1.48; }
.ice-core-archive ul { display: grid; gap: .3rem; margin: .4rem 0; padding-left: 1.4rem; }
.ice-core-archive .ice-core-fact { padding-top: .65rem; border-top: 1px dashed #b4a985; }
.ice-core-controls { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .75rem; padding-bottom: max(.1rem, env(safe-area-inset-bottom)); }
.ice-core-controls button { min-height: 44px; }
.ice-core-controls [data-core-next] { margin-left: auto; }
.ice-core-game.is-correct .ice-core-tube::before { content: ""; position: absolute; z-index: 1; inset: -20% 0 auto; height: 16%; pointer-events: none; background: #fff9d790; animation: ice-core-scan .8s ease-out forwards; }
.ice-core-tube.is-shaking { animation: ice-core-shake .35s ease; }
.ice-core-result { display: grid; min-height: 20rem; align-content: center; justify-items: center; gap: .6rem; padding: 1rem; border-radius: .8rem; color: white; background: linear-gradient(145deg, #316e75, #153f52); text-align: center; }
.ice-core-result.is-retry { background: linear-gradient(145deg, #786d68, #3d5260); }
.ice-core-result h3 { margin: 0; color: #f8dfa7; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.ice-core-result p:not(.eyebrow) { max-width: 35rem; line-height: 1.5; }
.ice-core-result-flake { display: grid; width: 5rem; height: 5rem; place-items: center; border: .16rem solid #e4f8ed; border-radius: 50%; font-size: 2.8rem; animation: blood-signal .5s ease-out; }
@keyframes ice-core-shake { 25% { transform: translateX(-.2rem); } 70% { transform: translateX(.2rem); } }
@keyframes ice-core-scan { to { top: 110%; } }
@media (max-width: 680px) {
  .activity-dialog.ice-core-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .ice-core-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ice-core-probes { grid-column: 1 / -1; justify-content: flex-start; }
  .ice-core-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ice-core-tray { grid-template-columns: minmax(3.5rem, 17%) minmax(0, 1fr); gap: .4rem; padding: .45rem; }
  .ice-core-tube { min-height: 14rem; }
  .ice-core-controls { display: grid; grid-template-columns: 1fr; }
  .ice-core-controls [data-core-next] { margin-left: 0; }
}
@media (max-width: 380px) {
  .ice-core-lab-title { padding: .4rem; }
  .ice-core-sheet { padding: .55rem; }
  .ice-core-sentence { font-size: 1rem; }
  .ice-core-blank { min-width: 4rem; }
  .ice-core-option { min-height: 48px; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ice-core-game *, .ice-core-game *::before, .ice-core-game *::after, .ice-core-result * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Krill signals: a responsive under-ice viewport drawn in CSS, with tap/keyboard letter controls. */
.krill-game { color: #173b49; text-align: left; }
.krill-dialog .dialog-close { min-width: 44px; min-height: 44px; }
.krill-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: .5rem; }
.krill-cells { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; }
.krill-cells b { margin-left: .3rem; font-size: .72rem; }
.krill-cell { width: 1.2rem; height: 1.2rem; border: .12rem solid #51c7b3; border-radius: 50%; background: #98fae0; box-shadow: 0 0 .7rem #6effdc; transition: opacity .2s, filter .2s; }
.krill-cell.is-spent { opacity: .35; filter: grayscale(1); box-shadow: none; }
.krill-dome { position: relative; overflow: hidden; isolation: isolate; min-height: 25rem; margin-top: .8rem; padding: 1rem; border: .5rem solid #7b6f5e; border-radius: 2.5rem 2.5rem 1rem 1rem; background: radial-gradient(circle at 50% 2%, #78bac1 0, #286477 35%, #123c58 73%, #0b243c 100%); box-shadow: inset 0 0 0 .25rem #c5b49b, inset 0 -1rem 2rem #081e37, 0 .45rem 1rem #102e433d; }
.krill-dome::before { content: ""; position: absolute; z-index: -1; inset: -2rem -1rem auto; height: 6rem; border-radius: 28% 31% 45% 30%; background: linear-gradient(#e7fcf6, #a8dce3 70%, #82c7cf); box-shadow: 0 .3rem 1rem #d5ffff80; }
.krill-dome::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 5rem; background: linear-gradient(transparent, #071b32dc); pointer-events: none; }
.krill-light { position: absolute; z-index: -1; top: 1rem; left: 15%; width: 40%; height: 75%; background: linear-gradient(#c4f8f669, transparent); clip-path: polygon(27% 0, 52% 0, 100% 100%, 0 100%); opacity: .55; animation: krill-light-sway 6s ease-in-out infinite alternate; }
.krill-whale { position: absolute; z-index: -1; right: -3%; top: 7rem; width: 33%; height: 6rem; border-radius: 52% 68% 43% 55%; background: #062b46a8; transform: rotate(-7deg); animation: krill-whale-swim 8s ease-in-out infinite alternate; }
.krill-whale::before { content: ""; position: absolute; left: 30%; top: 3rem; width: 32%; height: 3rem; border-radius: 0 0 80% 20%; background: #062b46a8; transform: rotate(24deg); }
.krill-whale::after { content: ""; position: absolute; right: -11%; top: 1.1rem; width: 22%; height: 3.4rem; background: #062b46a8; clip-path: polygon(0 40%, 100% 0, 85% 50%, 100% 100%, 0 65%); }
.krill-swarm { position: absolute; z-index: -1; inset: 4.8rem 1rem 2rem; pointer-events: none; }
.krill-creature { position: absolute; width: .8rem; height: .24rem; border-radius: 70% 30% 50% 50%; background: #f2b2aecc; box-shadow: 0 0 .2rem #ffc4b9; transform: rotate(-15deg); animation: krill-drift 3.5s ease-in-out infinite alternate; }
.krill-creature::before { content: ""; position: absolute; left: .2rem; top: .02rem; width: .18rem; height: .18rem; border-radius: 50%; background: #87f7de; box-shadow: 0 0 .45rem .12rem #71f8e0; animation: krill-pulse 1.8s ease-in-out infinite alternate; }
.krill-creature::after { content: ""; position: absolute; right: -.22rem; top: -.12rem; width: .3rem; height: .45rem; background: #f2b2aeaa; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.krill-creature:nth-child(1) { left: 5%; top: 23%; } .krill-creature:nth-child(2) { left: 16%; top: 50%; animation-delay: -.8s; }
.krill-creature:nth-child(3) { left: 27%; top: 17%; animation-delay: -1.7s; } .krill-creature:nth-child(4) { left: 38%; top: 63%; animation-delay: -.4s; }
.krill-creature:nth-child(5) { left: 49%; top: 32%; animation-delay: -2s; } .krill-creature:nth-child(6) { left: 61%; top: 72%; animation-delay: -1.2s; }
.krill-creature:nth-child(7) { left: 72%; top: 23%; animation-delay: -.6s; } .krill-creature:nth-child(8) { left: 83%; top: 54%; animation-delay: -2.5s; }
.krill-creature:nth-child(9) { left: 11%; top: 75%; animation-delay: -1.3s; } .krill-creature:nth-child(10) { left: 22%; top: 39%; animation-delay: -2.1s; }
.krill-creature:nth-child(11) { left: 44%; top: 82%; animation-delay: -.9s; } .krill-creature:nth-child(12) { left: 57%; top: 13%; animation-delay: -1.8s; }
.krill-creature:nth-child(13) { left: 79%; top: 83%; animation-delay: -.2s; } .krill-creature:nth-child(14) { left: 92%; top: 29%; animation-delay: -2.8s; }
.krill-hud { position: relative; max-width: 54rem; margin: 3rem auto 0; padding: clamp(.7rem, 2vw, 1.2rem); border: .16rem solid #6bd9d0; border-radius: .8rem; color: #f1fbf5; background: #092d44e8; box-shadow: 0 0 1.5rem #28c0b659, inset 0 0 .9rem #4ac4bd29; backdrop-filter: blur(2px); }
.krill-hud .eyebrow { margin: 0 0 .7rem; color: #a6f4d8; }
.krill-hud-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 2.4fr); align-items: center; gap: .5rem; }
.krill-prompt, .krill-target { min-width: 0; padding: .65rem; border: 1px solid #6dbbb8; border-radius: .5rem; background: #0d4259c2; }
.krill-prompt small, .krill-target small { display: block; margin-bottom: .35rem; color: #b6e7df; font-size: .69rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.krill-prompt strong { font: 900 clamp(1.05rem, 2.5vw, 1.45rem)/1.2 Georgia, serif; overflow-wrap: anywhere; }
.krill-arrow { color: #f5d586; font-size: 2rem; }
.krill-target-word { display: flex; flex-wrap: wrap; align-items: center; gap: .12rem; }
.krill-anchor { display: grid; min-width: 1.3rem; min-height: 2.8rem; place-items: center; color: #fff; font: 900 1.18rem/1 Georgia, serif; }
.krill-slot { display: grid; min-width: 44px; min-height: 44px; place-items: center; padding: .12rem; border: .12rem solid #70dcd0; border-radius: .35rem; color: #fff; background: #205b6d; font: 900 1.15rem/1 Georgia, serif; }
.krill-slot.is-active { border-color: #ffdc8d; box-shadow: 0 0 0 .12rem #ffdc8d; }
.krill-slot.is-fixed { border-color: #6af0cd; color: #064840; background: #c6f5e5; box-shadow: 0 0 .5rem #6cf8d1; }
.krill-slot:disabled { opacity: 1; cursor: default; }
.krill-definition { margin: .8rem 0 0; padding: .55rem .7rem; border-left: .2rem solid #eac47a; border-radius: .25rem; background: #032239a8; line-height: 1.45; }
.krill-rack { margin-top: .75rem; padding: .7rem; border: .12rem solid #a0bfba; border-radius: .6rem; background: #eaf5f1; }
.krill-rack strong { color: #235662; }
.krill-rack p { margin: .25rem 0 .6rem; font-size: .85rem; }
.krill-tiles { display: flex; flex-wrap: wrap; gap: .4rem; }
.krill-tile { min-width: 44px; min-height: 44px; padding: .15rem; border: .12rem solid #2b6d72; border-radius: .4rem; color: #173e4a; background: #c1eee3; box-shadow: 0 .16rem #408e89; font: 900 1.2rem/1 Georgia, serif; }
.krill-tile.is-used { opacity: .4; box-shadow: none; }
.krill-tile:active { transform: translateY(.12rem); }
.krill-slot:focus-visible, .krill-tile:focus-visible, .krill-controls button:focus-visible { outline: .18rem solid #ffbe7f; outline-offset: .12rem; }
.krill-feedback { margin: .75rem 0; }
.krill-hint { margin: .5rem 0; padding: .65rem .75rem; border-left: .22rem solid #e1ad5e; border-radius: .3rem; background: #fff1d6; line-height: 1.45; }
.krill-card { margin: .75rem 0; padding: .85rem 1rem; border: .12rem solid #3fae9c; border-radius: .6rem; background: #fdf4de; }
.krill-card h3 { margin: .15rem 0 .65rem; color: #215e69; font: 900 clamp(1.2rem, 3vw, 1.7rem)/1.2 Georgia, serif; }
.krill-card p { line-height: 1.47; }
.krill-card .krill-fact { padding-top: .6rem; border-top: 1px dashed #b2a784; }
.krill-controls { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .7rem; padding-bottom: max(.1rem, env(safe-area-inset-bottom)); }
.krill-controls button { min-height: 44px; }
.krill-controls [data-krill-next] { margin-left: auto; }
.krill-hud.is-shaking { animation: krill-hud-shake .38s ease; }
.krill-game.is-correct .krill-dome { box-shadow: inset 0 0 0 .25rem #c5b49b, 0 0 1.3rem #78f4d8, 0 .45rem 1rem #102e433d; }
.krill-result { display: grid; min-height: 20rem; align-content: center; justify-items: center; gap: .6rem; padding: 1rem; border-radius: .8rem; color: white; background: linear-gradient(145deg, #286e76, #0d354d); text-align: center; }
.krill-result.is-retry { background: linear-gradient(145deg, #6c6869, #2a4c5d); }
.krill-result h3 { margin: 0; color: #f8dea1; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.krill-result p:not(.eyebrow) { max-width: 34rem; line-height: 1.5; }
.krill-result-glow { display: grid; width: 5rem; height: 5rem; place-items: center; border: .17rem solid #b8ffe1; border-radius: 50%; box-shadow: 0 0 1rem #7af6d7; font-size: 2.8rem; }
@keyframes krill-drift { to { transform: translate(1.2rem, -.8rem) rotate(12deg); } }
@keyframes krill-pulse { to { opacity: .35; box-shadow: 0 0 .18rem #71f8e0; } }
@keyframes krill-whale-swim { to { transform: translateX(-2rem) rotate(-4deg); } }
@keyframes krill-light-sway { to { transform: translateX(2rem) rotate(5deg); opacity: .3; } }
@keyframes krill-hud-shake { 25% { transform: translateX(-.2rem); } 70% { transform: translateX(.2rem); } }
@media (max-width: 680px) {
  .activity-dialog.krill-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .krill-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .krill-cells { grid-column: 1 / -1; justify-content: flex-start; }
  .krill-dome { min-height: 25rem; padding: .5rem; border-radius: 1.5rem; }
  .krill-hud { margin-top: 4rem; padding: .6rem; }
  .krill-hud-pair { grid-template-columns: 1fr; }
  .krill-arrow { font-size: 1.35rem; line-height: 1; text-align: center; transform: rotate(90deg); }
  .krill-prompt, .krill-target { padding: .5rem; }
  .krill-anchor { min-width: .95rem; }
  .krill-controls { display: grid; grid-template-columns: 1fr; }
  .krill-controls [data-krill-next] { margin-left: 0; }
}
@media (max-width: 380px) {
  .krill-hud { margin-top: 4.6rem; }
  .krill-target-word { gap: .06rem; }
  .krill-anchor { min-width: .75rem; font-size: 1rem; }
  .krill-slot { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .krill-game *, .krill-game *::before, .krill-game *::after, .krill-result * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.snowball-map-launch { position: absolute; z-index: 7; top: 3%; left: 2%; display: flex; align-items: center; justify-content: center; gap: .35rem; min-width: 9.2rem; min-height: 3.2rem; padding: .35rem .7rem; border: .15rem solid #e9fffd; border-radius: 1.5rem; color: #fff; background: #164d65e8; box-shadow: 0 0 .7rem .2rem #c2ffef, inset 0 0 .6rem #77e7e1; font-size: .82rem; font-weight: 900; line-height: 1.1; text-shadow: 0 1px 2px #092e48; animation: snowball-launch-glow 2.5s ease-in-out infinite alternate; }
.snowball-map-launch > span { color: #aaf9ee; font-size: 1.2rem; }
.snowball-map-launch:hover, .snowball-map-launch:focus-visible { outline: .18rem solid #fff2b0; outline-offset: .12rem; background: #1c7185; }
.snowball-map-note { padding: .55rem .7rem; border-left: .2rem solid #6ab6c5; border-radius: .2rem; background: #e8f4f3; font-size: .9rem; line-height: 1.45; }
.activity-dialog.snowball-dialog { width: min(76rem, calc(100vw - 1.5rem)); }
.snowball-game { color: #183b4b; text-align: left; }
.snowball-progress { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .45rem 1rem; margin-bottom: .7rem; font-size: .84rem; font-weight: 900; }
.snowball-lives { display: flex; gap: .2rem; align-items: center; }
.snowball-lives b { margin-left: .3rem; color: #25586b; font-size: .75rem; white-space: nowrap; }
.snowball-life { color: #0e8baf; font-size: 1.4rem; line-height: 1; text-shadow: 0 0 .5rem #62dff6; }
.snowball-life.is-spent { color: #7e9299; text-shadow: none; opacity: .42; }
.snowball-field { position: relative; overflow: hidden; isolation: isolate; min-height: 27rem; padding: 1rem 1rem 5.7rem; border: .28rem solid #b8e8e7; border-radius: 1.15rem; background: radial-gradient(circle at 50% -35%, #5684a2 0, #244e75 38%, #102d54 77%, #071d39 100%); box-shadow: inset 0 0 2rem #041c3b, 0 .4rem .9rem #1137483d; }
.snowball-field::before { content: ""; position: absolute; z-index: -1; inset: auto -1rem -1.5rem; height: 8.5rem; background: #d7f0f2bd; clip-path: polygon(0 95%, 0 65%, 13% 36%, 23% 63%, 38% 28%, 51% 68%, 65% 39%, 77% 70%, 92% 30%, 100% 52%, 100% 100%); }
.snowball-flakes { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.snowball-flake { position: absolute; top: -8%; left: var(--flake-x); width: var(--flake-size); height: var(--flake-size); border-radius: 50%; background: #e8ffffdb; box-shadow: 0 0 .35rem #c4fcff; animation: snowball-snowfall var(--flake-duration) linear var(--flake-delay) infinite; }
.snowball-word-panel { position: relative; z-index: 2; width: fit-content; max-width: 100%; margin: 0 auto 1.2rem; padding: .55rem clamp(1rem, 3vw, 2rem); border: 1px solid #a7eeed; border-radius: .7rem; color: #fff; background: #071e3ad9; text-align: center; box-shadow: 0 0 1rem #49d6d857; }
.snowball-word-panel small { display: block; color: #a9f1e7; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.snowball-word-panel strong { display: block; font: 900 clamp(1.4rem, 4vw, 2.5rem)/1.15 Georgia, serif; overflow-wrap: anywhere; }
.snowball-targets { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; justify-items: center; gap: clamp(.35rem, 1vw, .9rem); max-width: 62rem; margin: auto; }
.snowball-target { display: grid; width: min(100%, 9rem); aspect-ratio: 1; min-height: 6.6rem; place-items: center; padding: .45rem; border: .2rem solid #e5ffff; border-radius: 47% 53% 51% 49% / 52% 47% 53% 48%; color: #103b55; background: radial-gradient(circle at 38% 28%, #fff 0, #efffff 37%, #b5e4ec 73%, #8ccbd9 100%); box-shadow: inset -.5rem -.7rem 1rem #5ca9c233, 0 .45rem 1rem #091c4099, 0 0 .75rem #b4fafa; font: 800 clamp(.72rem, 1.25vw, .94rem)/1.12 system-ui, sans-serif; text-align: center; overflow-wrap: anywhere; animation: snowball-drift 4.6s ease-in-out infinite; touch-action: manipulation; }
.snowball-target:nth-child(2) { animation-duration: 5.2s; animation-delay: -1.4s; animation-direction: reverse; }
.snowball-target:nth-child(3) { animation-duration: 4.9s; animation-delay: -2.8s; }
.snowball-target:nth-child(4) { animation-duration: 5.5s; animation-delay: -3.9s; animation-direction: reverse; }
.snowball-field.is-aiming .snowball-target, .snowball-field.is-feedback .snowball-target { animation-play-state: paused; }
.snowball-target:focus-visible { outline: .2rem solid #ffdf87; outline-offset: .18rem; }
.snowball-target:not(:disabled):hover { border-color: #ffe5a2; }
.snowball-target.is-wrong { color: #fff; border-color: #ffe3e5; background: #c63e50; box-shadow: 0 0 1.1rem #ff6a79; }
.snowball-target.is-correct { color: #123e35; border-color: #a4ffd2; background: #baf4d4; box-shadow: 0 0 1.1rem #8affc7; }
.snowball-target:disabled { cursor: default; }
.snowball-launcher { position: absolute; z-index: 2; left: 50%; bottom: .65rem; width: 5.3rem; height: 4.8rem; transform: translateX(-50%); border: .35rem solid #a2e2e9; border-radius: 60% 60% 25% 25%; background: linear-gradient(#397ca1, #124467); box-shadow: inset 0 .3rem .4rem #ccffff77, 0 .4rem 1rem #0c2743; }
.snowball-launcher::before { content: ""; position: absolute; left: 50%; top: -.35rem; width: 2.2rem; height: 2.2rem; transform: translateX(-50%); border: .2rem solid #fff; border-radius: 50%; background: radial-gradient(circle at 36% 28%, #fff, #beeaf3 80%); box-shadow: 0 0 1rem #a9edff; }
.snowball-launcher::after { content: ""; position: absolute; left: 50%; bottom: .25rem; width: 3rem; height: .7rem; transform: translateX(-50%); border-radius: 50%; background: #081f3b; }
.snowball-projectile { position: absolute; z-index: 6; left: var(--shot-left); top: var(--shot-top); width: 1.8rem; height: 1.8rem; border: .12rem solid #fff; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, #b7eafa); box-shadow: 0 0 .8rem #ddffff; pointer-events: none; animation: snowball-shot .42s ease-in forwards; }
.snowball-feedback { min-height: 2.9rem; margin: .7rem 0; padding: .6rem .8rem; border-radius: .5rem; background: #e6f4f1; line-height: 1.45; }
.snowball-feedback.is-correct { background: #def5e4; }
.snowball-feedback.is-wrong { background: #fff0e6; }
.snowball-result { display: grid; min-height: 20rem; align-content: center; justify-items: center; gap: .75rem; padding: 1rem; border-radius: .8rem; color: #fff; background: linear-gradient(150deg, #276d85, #0a3357); text-align: center; }
.snowball-result.is-failed { background: linear-gradient(150deg, #62798a, #183a59); }
.snowball-result h3 { margin: 0; color: #f8e4b9; font: 900 clamp(2.5rem, 7vw, 4.5rem)/1 Georgia, serif; }
.snowball-result p { max-width: 34rem; line-height: 1.5; }
.snowball-result button { min-height: 44px; }
.snowball-review { box-sizing: border-box; width: min(100%, 34rem); padding: .85rem 1rem; border-radius: .6rem; color: #193d4d; background: #f4fbfa; text-align: left; }
.snowball-review h4 { margin: 0 0 .6rem; color: #153b53; font-size: 1.1rem; }
.snowball-review ol { display: grid; gap: .65rem; margin: 0; padding-left: 1.35rem; }
.snowball-review li { padding-left: .15rem; line-height: 1.4; overflow-wrap: anywhere; }
.snowball-review li strong { display: block; color: #133c53; }
.snowball-review li span, .snowball-review li small { display: block; }
.snowball-review li small { margin-top: .15rem; color: #365e65; font-size: .9rem; }
.snowball-review-empty { margin: 0; }
@keyframes snowball-launch-glow { to { box-shadow: 0 0 1.1rem .38rem #a8fff1, inset 0 0 .8rem #91fcf6; } }
@keyframes snowball-snowfall { to { transform: translate3d(1.1rem, 33rem, 0); } }
@keyframes snowball-drift { 0%, 100% { transform: translate(-1.4rem, .7rem) rotate(-2deg); } 25% { transform: translate(1.4rem, -.9rem) rotate(2deg); } 50% { transform: translate(1.75rem, .5rem) rotate(1deg); } 75% { transform: translate(-1rem, -1.1rem) rotate(-1deg); } }
@keyframes snowball-shot { to { transform: translate(var(--shot-x), var(--shot-y)) scale(.8); opacity: .45; } }
@media (max-width: 700px) {
  .activity-dialog.snowball-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .snowball-field { min-height: 31rem; padding: .75rem .55rem 5.5rem; }
  .snowball-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 27rem; }
  .snowball-target { width: min(100%, 7.6rem); min-height: 6.6rem; font-size: clamp(.72rem, 2.5vw, .88rem); animation-name: snowball-drift-mobile; }
  .snowball-map-launch { min-width: 7.6rem; min-height: 44px; padding: .25rem .4rem; font-size: .68rem; }
}
@media (max-width: 380px) {
  .snowball-target { width: min(100%, 7rem); padding: .38rem; font-size: .72rem; }
  .snowball-progress { font-size: .72rem; }
}
@keyframes snowball-drift-mobile { 0%, 100% { transform: translate(-.25rem, .7rem); } 25% { transform: translate(.3rem, -.8rem); } 50% { transform: translate(.25rem, .5rem); } 75% { transform: translate(-.2rem, -1rem); } }
@media (prefers-reduced-motion: reduce) {
  .snowball-map-launch, .snowball-flake, .snowball-target, .snowball-projectile { animation: none !important; }
}

.antarctica-play-area { position: relative; container-type: inline-size; }
.radio-map-launch { position: absolute; z-index: 7; top: 6.5%; left: 1.5%; display: flex; align-items: center; justify-content: center; gap: .3rem; width: 7.1rem; min-height: 44px; padding: .25rem .35rem; border: .14rem solid #e9fffd; border-radius: 1.2rem; color: #fff; background: #164d65ed; box-shadow: 0 0 .7rem .2rem #bfffee, inset 0 0 .5rem #77e7e1; font: 900 .76rem/1.1 system-ui, sans-serif; text-align: center; text-shadow: 0 1px 2px #092e48; cursor: pointer; touch-action: manipulation; animation: snowball-launch-glow 2.5s ease-in-out infinite alternate; }
.radio-map-launch > span { color: #aaf9ee; font-size: 1rem; }
.radio-map-launch.is-complete::after { content: "✓"; position: absolute; top: -.45rem; right: -.35rem; display: grid; width: 1.25rem; height: 1.25rem; place-items: center; border: .1rem solid #fff; border-radius: 50%; color: #144734; background: #b7f5cf; text-shadow: none; }
.radio-map-launch:hover, .radio-map-launch:focus-visible { outline: .18rem solid #fff2b0; outline-offset: .1rem; background: #1c7185; }
.radio-map-note { padding: .55rem .7rem; border-left: .2rem solid #6ab6c5; border-radius: .2rem; background: #e8f4f3; font-size: .9rem; line-height: 1.45; }
.activity-dialog.radio-dialog { width: min(66rem, calc(100vw - 1.5rem)); }
.radio-game { color: #183b4b; }
.radio-progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem 1rem; margin: 0 0 .7rem; font-size: .85rem; }
.radio-tubes { display: flex; align-items: center; gap: .35rem; }
.radio-tubes small { margin-left: .25rem; font-size: .75rem; font-weight: 800; }
.radio-tube { width: .7rem; height: 1.5rem; border: .12rem solid #c59449; border-radius: .35rem .35rem .15rem .15rem; background: linear-gradient(#fff2bd, #f0a33f); box-shadow: 0 0 .5rem #f4bd59; }
.radio-tube.is-spent { border-color: #677574; background: #506363; box-shadow: none; }
.radio-console { position: relative; overflow: hidden; padding: 1rem clamp(.85rem, 2vw, 1.3rem); border: .33rem solid #b58b4d; border-radius: .75rem; color: #f5fff8; background: radial-gradient(circle at 50% -30%, #365b53, #122b2b 70%); box-shadow: inset 0 0 1.5rem #061b1a, 0 .4rem .8rem #12322f55; }
.radio-console-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: #e9d6aa; font-size: .75rem; letter-spacing: .04em; }
.radio-console-top > span:last-child { margin-left: auto; }
.radio-led { width: .7rem; height: .7rem; border-radius: 50%; background: #7cedbd; box-shadow: 0 0 .7rem #79fac0; }
.radio-console.is-static .radio-led { background: #ff6670; box-shadow: 0 0 .7rem #ff6670; }
.radio-wave { height: 3rem; margin: .7rem 0; border: .1rem solid #527e73; border-radius: .35rem; background: repeating-linear-gradient(90deg, #9bf3c60b 0, #9bf3c60b 1px, transparent 1px, transparent 24px), #082726; }
.radio-wave svg { width: 100%; height: 100%; overflow: visible; }
.radio-wave path { fill: none; stroke: #8cf2c2; stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 5px #77f6c0); stroke-dasharray: 500; animation: radio-pulse 3s linear infinite; }
.radio-console.is-static .radio-wave path { stroke: #ff7983; filter: drop-shadow(0 0 5px #ff7983); }
.radio-console blockquote { margin: .55rem 0; font: 700 clamp(1.1rem, 2vw, 1.45rem)/1.45 Georgia, serif; }
.radio-console mark { padding: .05rem .12rem; border-radius: .2rem; color: #1c3031; background: #f6d67d; }
.radio-console > p { margin: .6rem 0 0; color: #c3ebdc; font-size: .9rem; }
.radio-choices { display: grid; gap: .48rem; margin-top: .75rem; }
.radio-choice { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 44px; padding: .6rem .75rem; border: .13rem solid #acc7c5; border-radius: .5rem; color: #173c48; background: #f7fbf7; font: 700 .95rem/1.3 system-ui, sans-serif; text-align: left; cursor: pointer; touch-action: manipulation; }
.radio-choice > span { flex: 0 0 1.75rem; display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: .3rem; color: #fff; background: #426b70; font-size: .75rem; }
.radio-choice:hover, .radio-choice:focus-visible { outline: .16rem solid #e8bc62; outline-offset: .08rem; }
.radio-choice.is-selected { border-color: #ce923d; background: #fff1d0; box-shadow: 0 0 .35rem #f7bf64; }
.radio-choice.is-wrong { border-color: #c95661; color: #702832; background: #ffe5e7; }
.radio-choice.is-correct { border-color: #31816b; color: #194d3d; background: #d7f7df; }
.radio-choice:disabled { cursor: default; }
.radio-feedback { min-height: 2.7rem; margin: .7rem 0; padding: .65rem .8rem; border-radius: .45rem; background: #e8f2ef; line-height: 1.4; }
.radio-feedback.is-correct { background: #ddf5e5; }
.radio-feedback.is-wrong { background: #fff0e8; }
.radio-lexicon { margin: .75rem 0; padding: .8rem 1rem; border-left: .3rem solid #b99453; border-radius: .25rem; background: #fff7e4; line-height: 1.4; animation: radio-card-open .25s ease-out; }
.radio-lexicon > strong { color: #6d4a1d; }
.radio-lexicon p { margin: .45rem 0 0; }
.radio-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.radio-actions button { min-height: 44px; }
.radio-result { display: grid; min-height: 17rem; align-content: center; justify-items: center; gap: .6rem; padding: 1rem; border-radius: .7rem; color: #fff; background: linear-gradient(145deg, #38796e, #164344); text-align: center; }
.radio-result.is-failed { background: linear-gradient(145deg, #7a6253, #354647); }
.radio-result h3 { margin: 0; color: #ffe5a9; font: 900 3rem/1 Georgia, serif; }
.radio-result p { max-width: 32rem; line-height: 1.45; }
@keyframes radio-pulse { 50% { stroke-dashoffset: 250; opacity: .7; } to { stroke-dashoffset: 500; } }
@keyframes radio-card-open { from { opacity: 0; transform: translateY(-.4rem); } }
@container (max-width: 1000px) {
  .radio-map-launch { position: relative; top: auto; left: auto; width: auto; min-width: 7.1rem; margin: 0 0 .45rem .5rem; }
}
@media (max-width: 620px) {
  .activity-dialog.radio-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .radio-progress { font-size: .75rem; }
  .radio-console blockquote { font-size: 1.05rem; }
  .radio-choice { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .radio-map-launch, .radio-wave path, .radio-lexicon { animation: none !important; }
}

/* Meteorite analogies: a CSS-drawn training scanner with tap-first controls. */
.meteorite-game { color: #183c4a; text-align: left; }
.meteorite-dialog .dialog-close { min-width: 44px; min-height: 44px; }
.meteorite-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: .5rem; }
.meteorite-lenses { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; }
.meteorite-lenses b { margin-left: .3rem; font-size: .72rem; }
.meteorite-lens { display: inline-block; width: 1.1rem; height: 1.1rem; border: .16rem solid #b5e7ef; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #effcff, #55a4ba 65%, #174f69); box-shadow: 0 0 .5rem #78d8e5; transition: opacity .2s, filter .2s; }
.meteorite-lens.is-spent { opacity: .4; filter: grayscale(1); box-shadow: none; background-image: linear-gradient(45deg, transparent 42%, #35454b 43% 55%, transparent 56%); }
.meteorite-field { display: grid; grid-template-columns: minmax(7rem, 24%) minmax(0, 1fr); min-width: 0; overflow: hidden; border: .22rem solid #2b586e; border-radius: .8rem; background: #143b4f; box-shadow: 0 .4rem .8rem #13364240; }
.meteorite-specimen { position: relative; display: grid; min-height: 15rem; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 80%, #9dd7e0, #396f8d 48%, #17405e); }
.meteorite-specimen::before { content: ""; position: absolute; inset: auto -20% 0; height: 27%; background: linear-gradient(#c9eff1, #70abc3); border-radius: 50% 50% 0 0; }
.meteorite-rock { z-index: 1; width: 55%; max-width: 8.5rem; aspect-ratio: 1.35; border: .18rem solid #53646b; border-radius: 39% 48% 31% 45% / 43% 31% 52% 45%; background: radial-gradient(circle at 27% 22%, #627078, transparent 19%), radial-gradient(circle at 73% 64%, #0b202c, transparent 22%), linear-gradient(145deg, #3c4c56, #0e202c 70%); transform: rotate(-15deg); box-shadow: .35rem .5rem .35rem #102b3e80; }
.meteorite-scanline { position: absolute; z-index: 2; left: 8%; right: 8%; top: 5%; height: .25rem; background: #ffcf68; box-shadow: 0 0 1.2rem .2rem #ffcf68; opacity: .75; animation: meteorite-sweep 3s linear infinite alternate; pointer-events: none; }
.meteorite-hud { min-width: 0; padding: clamp(.75rem, 2vw, 1.2rem); border-left: .16rem solid #9dd7df; color: #e9f7f5; background: radial-gradient(circle at 80% 10%, #1a6375, #102c3d 70%); }
.meteorite-hud .eyebrow { color: #ffcf78; }
.meteorite-hud h3 { margin: .35rem 0 .8rem; color: #f7f8ee; font: 900 clamp(1.15rem, 2.5vw, 1.5rem)/1.2 Georgia, serif; }
.meteorite-equation { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0; font: 800 clamp(1rem, 2vw, 1.35rem)/1.4 Georgia, serif; }
.meteorite-equation span, .meteorite-equation strong { display: inline-block; max-width: 100%; padding: .28rem .52rem; border: 1px solid #91cbd3; border-radius: .35rem; overflow-wrap: anywhere; background: #204f64; }
.meteorite-equation i { color: #b8dde1; font: 700 .85rem/1.2 system-ui, sans-serif; }
.meteorite-equation strong { min-width: 5.5rem; border-color: #f1bc69; color: #ffe4a6; text-align: center; }
.meteorite-equation strong.is-filled { background: #49645d; }
.meteorite-equation strong.is-answer { border-color: #ffc862; color: #172e38; background: #ffdf8b; }
.meteorite-pair-clue { margin: .9rem 0 0; color: #d7ebec; font-size: .87rem; line-height: 1.4; }
.meteorite-choice-panel { margin-top: .75rem; padding: .8rem; border: .12rem solid #9bbfca; border-radius: .65rem; background: #eaf3f2; }
.meteorite-choice-panel > strong { color: #19556c; }
.meteorite-choice-panel > p { margin: .2rem 0 .7rem; font-size: .87rem; }
.meteorite-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.meteorite-choice { display: flex; align-items: center; justify-content: center; gap: .4rem; min-width: 0; min-height: 3.5rem; padding: .4rem; border: .13rem solid #43748a; border-radius: .5rem; color: #173d4b; background: #f9fffd; font: 850 clamp(.88rem, 1.5vw, 1.08rem)/1.2 system-ui, sans-serif; overflow-wrap: anywhere; cursor: pointer; }
.meteorite-choice-symbol { flex: none; color: #b57836; }
.meteorite-choice.is-selected { border-color: #b46a2e; background: #fff0cf; box-shadow: inset 0 0 0 .1rem #f0bd73; }
.meteorite-choice.is-rejected { opacity: .55; text-decoration: line-through; }
.meteorite-choice.is-answer { border-color: #0d846f; color: #0b5f55; background: #d7f1e2; opacity: 1; text-decoration: none; }
.meteorite-choice:disabled { cursor: default; }
.meteorite-choice:focus-visible, .meteorite-controls button:focus-visible { outline: .2rem solid #b55c33; outline-offset: .12rem; }
.meteorite-feedback { margin: .8rem 0; }
.meteorite-hint { margin: .6rem 0; padding: .65rem .8rem; border-left: .25rem solid #d8a04c; border-radius: .3rem; background: #fff1d5; line-height: 1.45; }
.meteorite-card { margin: .8rem 0; padding: .85rem 1rem; border: .12rem solid #56a39a; border-radius: .6rem; background: #fbf5e6; animation: meteorite-card-open .25s ease-out; }
.meteorite-card h3 { margin: .1rem 0 .55rem; color: #1c5d66; font: 900 clamp(1.4rem, 3vw, 1.9rem)/1.15 Georgia, serif; text-transform: capitalize; }
.meteorite-card p, .meteorite-card li { line-height: 1.45; }
.meteorite-card ul { display: grid; gap: .3rem; margin: .35rem 0 .8rem; padding-left: 1.3rem; }
.meteorite-fact { padding-top: .6rem; border-top: 1px dashed #b6aa86; }
.meteorite-controls { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .75rem; padding-bottom: max(.1rem, env(safe-area-inset-bottom)); }
.meteorite-controls button { min-height: 44px; }
.meteorite-controls [data-meteor-next] { margin-left: auto; }
.meteorite-game.is-failed .meteorite-hud { animation: meteorite-shake .35s ease; }
.meteorite-game.is-correct .meteorite-scanline { background: #89f0c6; box-shadow: 0 0 1.3rem .3rem #89f0c6; }
.meteorite-result { display: grid; min-height: 19rem; align-content: center; justify-items: center; gap: .6rem; padding: 1rem; border-radius: .8rem; color: white; background: linear-gradient(145deg, #247674, #164655); text-align: center; }
.meteorite-result.is-retry { background: linear-gradient(145deg, #74695f, #3b5462); }
.meteorite-result h3 { margin: 0; color: #ffe0a0; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.meteorite-result p:not(.eyebrow) { max-width: 33rem; line-height: 1.5; }
.meteorite-result-mark { display: grid; width: 5rem; height: 5rem; place-items: center; border: .18rem solid #d9f8f0; border-radius: 50%; font-size: 2.7rem; }
@keyframes meteorite-sweep { to { top: 95%; } }
@keyframes meteorite-shake { 25% { transform: translateX(-.2rem); } 70% { transform: translateX(.2rem); } }
@keyframes meteorite-card-open { from { opacity: 0; transform: translateY(-.3rem); } }
@media (max-width: 680px) {
  .activity-dialog.meteorite-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .meteorite-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meteorite-lenses { grid-column: 1 / -1; justify-content: flex-start; }
  .meteorite-field { grid-template-columns: 1fr; }
  .meteorite-specimen { min-height: 7rem; }
  .meteorite-rock { max-width: 5.5rem; }
  .meteorite-hud { border-left: 0; border-top: .15rem solid #9dd7df; }
  .meteorite-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meteorite-choice { min-height: 48px; }
  .meteorite-controls { display: grid; grid-template-columns: 1fr; }
  .meteorite-controls [data-meteor-next] { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .meteorite-game *, .meteorite-game *::before, .meteorite-game *::after, .meteorite-card { animation: none !important; transition: none !important; }
}

.ice-river-game { color: #17394a; text-align: left; }
.ice-rivers-dialog .dialog-close { min-width: 44px; min-height: 44px; }
.ice-river-progress { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem 1rem; }
.ice-river-pitons { display: inline-flex; align-items: center; gap: .2rem; }
.ice-river-pitons b { margin-left: .35rem; font-size: .75rem; }
.ice-river-piton { color: #168aa9; font-size: 1.1rem; text-shadow: 0 0 .4rem #84e9f5; }
.ice-river-piton.is-spent { color: #a36966; opacity: .55; text-shadow: none; }
.ice-river-board { position: relative; min-width: 0; overflow: hidden; margin-top: .7rem; padding: clamp(.6rem, 2vw, 1.1rem); border: .22rem solid #9cc8d3; border-radius: .8rem; background: linear-gradient(130deg, #d9f2f4, #87bccf 50%, #c7e7eb); box-shadow: inset 0 0 1.2rem #fff9, 0 .45rem .9rem #173d4c33; }
.ice-river-flow { position: absolute; inset: -20% -10%; background: repeating-linear-gradient(135deg, #ffffff38 0 1.2rem, #4e9cbb33 1.2rem 2.4rem, transparent 2.4rem 4rem); animation: ice-river-flow 13s linear infinite; pointer-events: none; }
.ice-river-console { position: relative; padding: clamp(.7rem, 2vw, 1.2rem); border: .14rem solid #90d6e1; border-radius: .55rem; color: #f2fbfc; background: #143e5add; box-shadow: 0 .3rem .7rem #10344455; }
.ice-river-console .eyebrow { margin: 0; color: #f9d293; }
.ice-river-console h3 { margin: .2rem 0 .35rem; color: #fff; font: 900 clamp(1.25rem, 3vw, 1.8rem)/1.2 Georgia, serif; }
.ice-river-console > p:not(.eyebrow) { margin: 0 0 .8rem; line-height: 1.45; }
.ice-river-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 10rem); gap: .65rem; align-items: stretch; }
.ice-river-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr)); gap: .42rem; min-width: 0; }
.ice-river-slot, .ice-river-bin { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 4.1rem; padding: .4rem; border: .13rem solid #8ac4d1; border-radius: .42rem; color: #284653; background: #e7f9fa; cursor: pointer; overflow-wrap: anywhere; }
.ice-river-slot-number { align-self: flex-start; display: grid; width: 1.2rem; height: 1.2rem; place-items: center; border-radius: 50%; color: white; background: #2a667d; font-size: .68rem; font-weight: 900; }
.ice-river-slot strong { font: 800 clamp(.84rem, 1.5vw, 1.08rem)/1.15 Georgia, serif; text-align: center; }
.ice-river-slot.is-filled { border-color: #2d9ba8; background: #c1f2ef; }
.ice-river-slot.is-selected, .ice-river-tile.is-selected, .ice-river-bin.is-selected { outline: .18rem solid #ffc86c; outline-offset: .07rem; }
.ice-river-slot:focus-visible, .ice-river-tile:focus-visible, .ice-river-bin:focus-visible, .ice-river-controls button:focus-visible { outline: .2rem solid #ffca69; outline-offset: .12rem; }
.ice-river-bin { gap: .35rem; border-color: #e6a07d; color: #fff; background: #934d45; text-align: center; }
.ice-river-bin span { font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ice-river-bin strong { font-size: .95rem; }
.ice-river-bin.is-filled { background: #b64f50; }
.ice-river-pool { margin-top: .75rem; padding: .8rem; border: .13rem solid #9fbec8; border-radius: .6rem; background: #edf7f5; }
.ice-river-pool > p { margin: .12rem 0 .6rem; font-size: .87rem; line-height: 1.4; }
.ice-river-tiles { display: flex; flex-wrap: wrap; gap: .4rem; }
.ice-river-tile { min-height: 44px; padding: .45rem .65rem; border: .13rem solid #35758b; border-radius: .35rem; color: #123e51; background: #d7eff3; box-shadow: 0 .15rem 0 #316d80; font: 800 .95rem/1.15 Georgia, serif; cursor: grab; }
.ice-river-tile[aria-pressed="true"] { color: #593b13; background: #ffebbd; }
.ice-river-feedback { margin: .75rem 0; }
.ice-river-game.is-warning .ice-river-console { animation: ice-river-warning .34s ease; }
.ice-river-game.is-correct .ice-river-slot.is-filled, .ice-river-game.is-failed .ice-river-slot.is-filled { border-color: #1b9b8c; background: #a8ebdb; animation: ice-river-lock .3s ease-out; }
.ice-river-game.is-failed .ice-river-bin { border-color: #ffe0dc; background: #c4515a; animation: ice-river-drop .35s ease-out; }
.ice-river-log { margin: .8rem 0; padding: .9rem 1rem; border: .14rem solid #58a9ac; border-radius: .6rem; background: #fff8e8; animation: ice-river-log-open .25s ease-out; }
.ice-river-log .eyebrow { margin: 0 0 .5rem; }
.ice-river-log h4 { margin: .6rem 0 .2rem; color: #1c5b69; }
.ice-river-log p { margin: .2rem 0 .7rem; line-height: 1.45; }
.ice-river-log .ice-river-correct-sentence { padding: .55rem .7rem; border-left: .22rem solid #2b9b9b; background: #fff; font: 800 1.1rem/1.35 Georgia, serif; }
.ice-river-log .ice-river-example { color: #3f6470; }
.ice-river-log .ice-river-fact { padding-top: .6rem; border-top: 1px dashed #c5bca2; }
.ice-river-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; padding-bottom: max(.1rem, env(safe-area-inset-bottom)); }
.ice-river-controls button { min-height: 44px; }
.ice-river-controls [data-ice-next] { margin-left: auto; }
.ice-river-result { display: grid; min-height: 19rem; align-content: center; justify-items: center; gap: .6rem; padding: 1rem; border-radius: .8rem; color: #fff; background: linear-gradient(145deg, #217b7b, #174960); text-align: center; }
.ice-river-result.is-retry { background: linear-gradient(145deg, #627d89, #314c60); }
.ice-river-result h3 { margin: 0; color: #ffdfaa; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.ice-river-result p:not(.eyebrow) { max-width: 34rem; line-height: 1.5; }
.ice-river-route-mark { display: grid; width: 4.5rem; height: 4.5rem; place-items: center; border: .16rem solid #dffefa; border-radius: 50%; font-size: 2.8rem; }
@keyframes ice-river-flow { to { transform: translate(5rem, 5rem); } }
@keyframes ice-river-warning { 25% { transform: translateX(-.2rem); } 70% { transform: translateX(.2rem); } }
@keyframes ice-river-lock { from { transform: scale(.93); opacity: .6; } }
@keyframes ice-river-drop { from { transform: translateY(-.4rem); opacity: .5; } }
@keyframes ice-river-log-open { from { transform: translateY(-.4rem); opacity: .5; } }
@media (max-width: 700px) {
  .activity-dialog.ice-rivers-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
  .ice-river-work { grid-template-columns: 1fr; }
  .ice-river-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ice-river-bin { min-height: 4rem; }
  .ice-river-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ice-river-controls button { min-width: 0; }
  .ice-river-controls [data-ice-next] { margin-left: 0; }
}
@media (max-width: 380px) {
  .ice-river-controls { grid-template-columns: 1fr; }
  .ice-river-progress { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ice-river-game *, .ice-river-game *::before, .ice-river-game *::after, .ice-river-result { animation: none !important; transition: none !important; }
}

/* Phase 6: tap-first barograph word classification. */
.barometric-game { color: #183b49; text-align: left; }
.barometric-dialog .dialog-close { min-width: 44px; min-height: 44px; }
.barometric-progress { display: grid; grid-template-columns: 1fr; align-items: center; gap: .4rem; }
.barometric-gauges { display: flex; align-items: center; gap: .35rem; }
.barometric-gauges b { margin-left: .3rem; font-size: .77rem; }
.barometric-gauge { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: .14rem solid #eac376; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1c8, #ba8144 70%, #654630); box-shadow: 0 0 .45rem #e7c17f; }
.barometric-gauge i { width: .5rem; height: .1rem; background: #233f4c; transform: rotate(-32deg); }
.barometric-gauge.is-spent { opacity: .42; filter: grayscale(1); box-shadow: none; }
.barometric-gauge.is-spent i { transform: rotate(-75deg); }
.barometric-console { position: relative; min-width: 0; overflow: hidden; margin-top: .75rem; padding: clamp(.75rem, 2vw, 1.25rem); border: .22rem solid #ab7d48; border-radius: .85rem; color: #f6f6ed; background: radial-gradient(circle at 85% 5%, #3c6676, #153447 62%, #102c3e); box-shadow: inset 0 0 0 .15rem #e4ba75, 0 .5rem 1rem #18313a44; }
.barometric-console::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background: repeating-linear-gradient(105deg, transparent 0 2.7rem, #acc8d4 2.75rem 2.8rem, transparent 2.85rem 5rem); }
.barometric-console > * { position: relative; z-index: 1; }
.barometric-topline { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.barometric-topline .eyebrow { margin: .2rem 0 0; color: #f5d293; }
.barometric-console h3 { margin: .3rem 0 .25rem; color: #fff8df; font: 900 clamp(1.35rem, 3vw, 1.9rem)/1.15 Georgia, serif; }
.barometric-console > p { line-height: 1.45; }
.barometric-dial { position: relative; flex: 0 0 4.3rem; width: 4.3rem; height: 4.3rem; border: .25rem solid #cba665; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff5cf, #c9b581 73%, #765e44); box-shadow: inset 0 0 .5rem #47392d, 0 0 0 .16rem #3f4f53; }
.barometric-dial::before, .barometric-dial::after { content: ""; position: absolute; left: 50%; top: .35rem; width: .1rem; height: .38rem; background: #5b5041; transform-origin: 0 1.55rem; }
.barometric-dial::before { transform: rotate(-45deg); }
.barometric-dial::after { transform: rotate(45deg); }
.barometric-needle { position: absolute; z-index: 2; left: calc(50% - .08rem); bottom: 50%; width: .16rem; height: 1.55rem; border-radius: .15rem; background: #a9483b; transform-origin: 50% 100%; animation: barometric-needle-waver 4s ease-in-out infinite alternate; }
.barometric-dial i { position: absolute; z-index: 3; left: calc(50% - .23rem); top: calc(50% - .23rem); width: .46rem; height: .46rem; border-radius: 50%; background: #263d48; }
.barometric-trace { height: 3rem; overflow: hidden; margin: .6rem 0 .9rem; border: 1px solid #b3c5ba; border-radius: .35rem; background: repeating-linear-gradient(0deg, #dbe7d8 0 .6rem, #b9cdbf .65rem .7rem), #dbe7d8; }
.barometric-trace svg { width: 100%; height: 100%; display: block; }
.barometric-trace path { fill: none; stroke: #a64f43; stroke-width: 3; stroke-dasharray: 580; stroke-dashoffset: 580; animation: barometric-trace-draw 2.2s ease forwards; }
.barometric-words { display: grid; grid-template-columns: 1fr; gap: .65rem; }
.barometric-word { display: flex; align-items: center; gap: .6rem; min-width: 0; min-height: 3.6rem; padding: .55rem .7rem; border: .14rem solid #a9c5c8; border-radius: .55rem; color: #183c4b; background: #f6faf6; box-shadow: 0 .2rem 0 #819ca0; text-align: left; cursor: pointer; touch-action: manipulation; }
.barometric-word strong { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 850 clamp(.95rem, 2vw, 1.2rem)/1.2 Georgia, serif; }
.barometric-word small { color: inherit; font-size: .72rem; font-weight: 800; }
.barometric-tag { display: grid; flex: 0 0 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; color: #fff7e5; background: #305b6b; font: 800 .78rem/1 system-ui, sans-serif; }
.barometric-word.is-selected { border-color: #e3a94d; background: #fff0ca; box-shadow: inset 0 0 0 .1rem #e9c077, 0 .2rem 0 #9b6f36; }
.barometric-word.is-rejected { color: #566b73; background: #dce5e4; text-decoration: line-through; }
.barometric-word.is-linked { color: #fff; border-color: #bdd9e4; background: #24617d; text-decoration: none; }
.barometric-word.is-answer { color: #115346; border-color: #78d4b2; background: #d8f4df; text-decoration: none; }
.barometric-game.is-failed .barometric-word.is-answer { color: #fff; border-color: #ffd4cf; background: #bc5050; }
.barometric-word:disabled { cursor: default; }
.barometric-word:focus-visible, .barometric-controls button:focus-visible { outline: .2rem solid #efbf66; outline-offset: .12rem; }
.barometric-selection { margin: .8rem 0 0; padding-top: .65rem; border-top: 1px solid #9db5ba; font-weight: 750; }
.barometric-feedback { margin: .8rem 0; }
.barometric-hint { margin: .65rem 0; padding: .7rem .85rem; border-left: .28rem solid #d2964f; border-radius: .3rem; background: #fff0d5; line-height: 1.45; }
.barometric-card { margin: .75rem 0; padding: .85rem 1rem; border: .12rem solid #77aca5; border-radius: .6rem; background: #f6f0df; animation: barometric-card-open .25s ease-out; }
.barometric-card h4 { margin: .15rem 0 .65rem; color: #174d58; font: 900 clamp(1.25rem, 3vw, 1.7rem)/1.2 Georgia, serif; }
.barometric-card h5 { margin: .8rem 0 .25rem; font-size: .95rem; }
.barometric-card p, .barometric-card li { line-height: 1.5; }
.barometric-card ul { display: grid; gap: .25rem; margin: .2rem 0 .8rem; padding-left: 1.3rem; }
.barometric-focus { padding: .6rem .75rem; border-left: .25rem solid #b98444; background: #fff9ec; }
.barometric-fact { padding-top: .6rem; border-top: 1px dashed #b4aa8d; }
.barometric-controls { display: grid; grid-template-columns: 1fr; gap: .6rem; padding-bottom: max(.1rem, env(safe-area-inset-bottom)); }
.barometric-controls button { min-height: 44px; }
.barometric-game.is-warning .barometric-dial { animation: barometric-warning .34s ease; }
.barometric-game.is-correct .barometric-needle { animation: none; transform: rotate(4deg); }
.barometric-game.is-failed .barometric-needle { animation: none; transform: rotate(-78deg); }
.barometric-result { display: grid; min-height: 18rem; align-content: center; justify-items: center; gap: .6rem; padding: 1.2rem; border-radius: .8rem; color: #fff; background: linear-gradient(145deg, #2a706f, #173d52); text-align: center; }
.barometric-result.is-retry { background: linear-gradient(145deg, #75624f, #32485b); }
.barometric-result h3 { margin: 0; color: #f8d78a; font: 900 clamp(3rem, 8vw, 5rem)/1 Georgia, serif; }
.barometric-result > p:not(.eyebrow) { max-width: 33rem; line-height: 1.5; }
.barometric-result-dial { position: relative; width: 5rem; height: 5rem; border: .3rem solid #edca7c; border-radius: 50%; background: #e9e0b9; box-shadow: 0 0 1.3rem #f4d59277; }
.barometric-result-dial i { position: absolute; left: 50%; bottom: 50%; width: .18rem; height: 1.7rem; background: #a64b3e; transform-origin: bottom; transform: rotate(3deg); }
.barometric-result.is-retry .barometric-result-dial i { transform: rotate(-70deg); }
@keyframes barometric-needle-waver { from { transform: rotate(-52deg); } to { transform: rotate(-20deg); } }
/* Circumpolar Current: button input is identical for mouse, touch and keyboard. */
.current-game { padding: clamp(.6rem, 2vw, 1.2rem); background: #edf5f5; border: 1px dashed #9dbdc5; border-radius: 1rem; }
.current-game .game-progress { display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; justify-content: space-between; margin-bottom: 1rem; }
.current-console { padding: clamp(.8rem, 2vw, 1.4rem); background: radial-gradient(ellipse at center, #184753, #081f30); color: #e0ffff; border: 3px solid #4c8793; border-radius: .8rem; overflow: hidden; }
.current-console .eyebrow { color: #96e8e3; }
.current-console h3 { color: white; }
.current-channels { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.current-channels article { padding: .7rem; border: 2px solid #4f999e; border-radius: .6rem; background: #092f39; text-align: center; min-width: 0; }
.current-channels small { color: #a2d9d6; font-weight: 800; }
.current-channels p { margin: .5rem 0; font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 700; overflow-wrap: anywhere; }
.current-sonar { height: 60px; position: relative; }
.current-sonar svg { width: 100%; height: 100%; opacity: .3; }
.current-sonar path { stroke: #4de0df; stroke-width: 3; fill: none; stroke-dasharray: 12 5; }
.current-sonar i { position: absolute; width: 28px; height: 28px; left: calc(50% - 14px); top: 14px; border: 2px solid #74d4d4; border-radius: 50%; animation: current-ping 3s ease-out infinite; }
.current-console.is-linked svg { opacity: 1; }
.current-console.is-linked path { animation: current-trace 1.5s linear infinite; }
.current-console.is-aligned .current-channels article { border-color: #4ce7b4; box-shadow: 0 0 12px #26a4a64a; }
.current-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.current-options button { min-height: 48px; min-width: 44px; padding: .65rem .4rem; background: #d9f3f5; color: #133f50; border: 2px solid #87c3ca; border-radius: .5rem; font-size: 1.1rem; font-weight: 800; cursor: pointer; overflow-wrap: anywhere; touch-action: manipulation; }
.current-options button.is-selected { background: #ffe4a8; border-color: #f5b849; }
.current-options button.is-answer { background: #b5edd2; border-color: #26a4a6; opacity: 1; }
.current-options button.is-wrong { background: #ffdae0; border-color: #dc717b; opacity: 1; text-decoration: line-through; }
.current-options button:focus-visible { outline: 3px solid #ffc55f; outline-offset: 3px; }
.current-controls { display: flex; flex-wrap: wrap; gap: .6rem; }
.current-controls button { min-height: 44px; flex: 1 1 140px; }
.current-log { background: #fffaf0; border-left: 4px solid #26a4a6; padding: 1rem; margin: 1rem 0; animation: barometric-card-open .2s ease-out; }
.current-log li, .current-result li { margin-bottom: .5rem; }
.current-fact { border-top: 1px dashed #adc4c6; padding-top: .7rem; }
.current-result { padding: 1.2rem; background: #edf5f5; border-radius: .8rem; }
@keyframes current-ping { from { opacity: .7; transform: scale(.5); } to { opacity: 0; transform: scale(1.8); } }
@keyframes current-trace { to { stroke-dashoffset: -34; } }
/* Pelagic Wildlife: independent native-button groups, with no drag/hover requirement. */
.pelagic-game { padding: clamp(.6rem,2vw,1.2rem); background: #edf5f5; border: 1px dashed #9dbdc5; border-radius: 1rem; }
.pelagic-game .game-progress { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; margin-bottom: 1rem; }
.pelagic-console { color: #ecfbff; padding: clamp(.7rem,2vw,1.25rem); border: 3px solid #568992; border-radius: .8rem; background: linear-gradient(155deg,#234f62,#0b273b); overflow: hidden; }
.pelagic-console .eyebrow { color: #b0e5eb; }
.pelagic-console h3 { margin: .6rem 0; color: #fff; font-family: Georgia,serif; }
.pelagic-ocean { position: relative; height: 75px; overflow: hidden; background: linear-gradient(#8bb8c4,#428796 65%,#123d51); border-radius: .5rem; }
.pelagic-ocean svg { width: 100%; height: 100%; }
.pelagic-whale { fill: #17323e; stroke: #a2c7cb; stroke-width: 1.5; animation: pelagic-swim 6s ease-in-out infinite alternate; }
.pelagic-wave { fill: none; stroke: #e0f5f8; stroke-width: 3; animation: pelagic-swell 3s ease-in-out infinite alternate; }
.pelagic-ocean i { position: absolute; width: 12px; height: 24px; left: 31%; top: 12px; border-top: 3px solid #e4faff; border-radius: 45%; animation: pelagic-spout 5s ease-out infinite; }
.pelagic-groups { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.pelagic-groups section { min-width: 0; border: 2px solid #7cb7cb; border-radius: .5rem; padding: .65rem; background: #173e52; }
.pelagic-groups section:last-child { border-color: #e4c076; }
.pelagic-groups h4 { color: #d7f4ff; margin: .2rem 0 .6rem; }
.pelagic-groups section:last-child h4 { color: #ffe2a0; }
.pelagic-groups [role="group"] { display: grid; gap: .5rem; }
.pelagic-groups button { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem; min-height: 48px; min-width: 44px; width: 100%; padding: .65rem .7rem; border: 2px solid #95b9c8; border-radius: .4rem; background: #e5f3f6; color: #15394a; cursor: pointer; text-align: left; touch-action: manipulation; }
.pelagic-groups button strong { font: 800 clamp(1rem,2vw,1.2rem)/1.2 Georgia,serif; overflow-wrap: anywhere; }
.pelagic-groups button small { font-size: .75rem; font-weight: 800; }
.pelagic-groups button.is-selected { background: #0073b8; border-color: #9bd4fb; color: #fff; }
.pelagic-groups section:last-child button.is-selected { background: #fecd60; color: #183b4c; border-color: #ffe2a0; }
.pelagic-groups button.is-answer { background: #c1f0df; color: #174c43; border-color: #26a4a6; opacity: 1; }
.pelagic-groups button:focus-visible { outline: 3px solid #ffdf93; outline-offset: 2px; }
.pelagic-pair { overflow-wrap: anywhere; margin-bottom: 0; padding: .75rem; border: 1px dashed #a2bdc4; border-radius: .4rem; font-weight: 800; }
.pelagic-console.is-balanced .pelagic-pair { background: #245e53; border-color: #84dcc7; }
.pelagic-hint { padding: .7rem; background: #fff0d5; border-left: 4px solid #cc9546; }
.pelagic-log { padding: 1rem; margin: 1rem 0; background: #fffaf0; border-left: 4px solid #26a4a6; animation: barometric-card-open .25s ease-out; text-align: left; }
.pelagic-log h4 { color: #174a56; }
.pelagic-log li, .pelagic-result li { margin-bottom: .6rem; line-height: 1.5; }
.pelagic-fact { border-top: 1px dashed #aac3c3; padding-top: .8rem; }
.pelagic-controls { display: flex; flex-wrap: wrap; gap: .6rem; padding-bottom: max(.2rem,env(safe-area-inset-bottom)); }
.pelagic-controls button { min-height: 44px; flex: 1 1 150px; }
.pelagic-result { padding: 1.2rem; background: #edf5f5; border-radius: .8rem; }
@keyframes pelagic-swim { from { transform: translate(-6px,1px); } to { transform: translate(10px,-3px); } }
@keyframes pelagic-swell { to { transform: translateY(4px); } }
@keyframes pelagic-spout { 0%,45%,100% { opacity: 0; transform: scaleY(.3); } 55%,70% { opacity: .7; transform: scaleY(1); } }
@media (min-width: 540px) { .pelagic-groups { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .activity-dialog.pelagic-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; } }
@media (prefers-reduced-motion: reduce) { .pelagic-game *, .pelagic-game *::before, .pelagic-game *::after { animation: none !important; transition: none !important; } }
@media (min-width: 640px) { .current-channels { grid-template-columns: 1fr 1fr; } .current-options { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 620px) { .activity-dialog.current-bridge-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; } }
@media (prefers-reduced-motion: reduce) { .current-game *, .current-game *::before, .current-game *::after { animation: none !important; transition: none !important; } }
@keyframes barometric-trace-draw { to { stroke-dashoffset: 0; } }
@keyframes barometric-warning { 25% { transform: rotate(-8deg); } 70% { transform: rotate(8deg); } }
@keyframes barometric-card-open { from { opacity: 0; transform: translateY(-.3rem); } }
@media (min-width: 520px) {
  .barometric-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barometric-controls { display: flex; flex-wrap: wrap; }
  .barometric-controls [data-storm-next] { margin-left: auto; }
}
@media (min-width: 700px) {
  .barometric-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .barometric-gauges { justify-content: flex-end; }
}
@media (max-width: 620px) {
  .activity-dialog.barometric-dialog { box-sizing: border-box; width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); padding: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .barometric-game *, .barometric-game *::before, .barometric-game *::after, .barometric-card { animation: none !important; transition: none !important; }
}