:root {
  color-scheme: light;
  --ink: #111820;
  --muted: #66717d;
  --paper: #293239;
  --panel: #f4f0e5;
  --tarmac: #202831;
  --tarmac-2: #2a3540;
  --line: rgba(235, 239, 238, .25);
  --safety: #e9b93f;
  --danger: #e04343;
  --success: #1b8f68;
}

* { box-sizing: border-box; }

/* The interface is drawn on a 16:9 stage of 1600x900 design pixels. One rem
   is a hundredth of the stage width, so every size written in rem scales with
   the screen and the game fits any display without scrolling. */
html {
  font-size: min(100vw / 100, 100vh / 56.25);
  font-size: min(100vw / 100, 100dvh / 56.25);
}

html, body { height: 100%; }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #151a20;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
}

button, a, select { -webkit-tap-highlight-color: transparent; }
button, select { font: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.game-shell {
  position: relative;
  width: min(100vw, 100vh * 16 / 9);
  height: min(100vh, 100vw * 9 / 16);
  width: min(100vw, 100dvh * 16 / 9);
  height: min(100dvh, 100vw * 9 / 16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: radial-gradient(ellipse at 28% 30%, #576067, var(--paper) 75%);
  box-shadow: 0 0 3rem rgba(0, 0, 0, .6);
}

.topbar {
  flex: 0 0 auto;
  height: 4.25rem;
  gap: .75rem;
  padding: 0 2.2rem;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: .125rem solid var(--safety);
}

.brand {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .8rem;
}

.brand strong {
  display: block;
  font-family: "Arial Narrow", "Segoe UI", sans-serif;
  font-size: 1.2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.brand small {
  display: block;
  color: #aeb8c1;
  font-size: .75rem;
  margin-top: .125rem;
  letter-spacing: .04em;
}

.brand-mark {
  flex: 0 0 auto;
  width: 2.45rem;
  height: 1.9rem;
  border: .125rem solid var(--safety);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .2rem;
  padding: .3rem;
  transform: skewX(-7deg);
}

.brand-mark i { background: var(--safety); }

.topbar-side {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.flight-status {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: #dce1e5;
  font-size: .9rem;
  white-space: nowrap;
}

.flight-status b { color: #fff; font-weight: 650; }

.status-light {
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  background: #50dfa9;
  border-radius: 50%;
  box-shadow: 0 0 0 .25rem rgba(80, 223, 169, .12);
}

.flight-status time {
  min-width: 3.6rem;
  margin-left: .6rem;
  padding-left: 1rem;
  border-left: 1px solid #3e4852;
  color: var(--safety);
  font-variant-numeric: tabular-nums;
}

/* Sound and menu stay in reach from every screen of the shift. */
.topbar-button {
  flex: 0 0 auto;
  height: 2.4rem;
  padding: 0 .95rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid #3e4852;
  border-radius: .2rem;
  background: transparent;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.topbar-button:hover { border-color: var(--safety); color: var(--safety); }
.topbar-button:focus-visible { outline: .1875rem solid rgba(233, 185, 63, .45); outline-offset: .125rem; }
.icon-button { width: 2.4rem; padding: 0; justify-content: center; }

.menu-icon { width: 1.05rem; display: grid; gap: .2rem; }
.menu-icon i { height: .125rem; background: currentColor; border-radius: 1px; }

.sound-icon { width: 1.3rem; height: 1.3rem; }
.sound-icon .speaker { fill: currentColor; }
.sound-icon .waves,
.sound-icon .cross { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sound-icon .cross,
.is-muted .sound-icon .waves { display: none; }
.is-muted .sound-icon .cross { display: inline; }
.is-muted { color: #aeb8c1; }

.workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2rem;
  padding: 1.1rem 2.2rem 1.3rem;
  width: 100%;
}

.board-column {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.route-strip {
  flex: 0 0 auto;
  flex-wrap: wrap;
  margin: 0 auto .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #b3bdc5;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.route-strip span { white-space: nowrap; }
.route-strip i { width: 1.4rem; height: 1px; background: #c8cdd1; }
.route-strip span.active { color: #ffe093; }
.route-strip span.passed { color: #95d6ba; }

/* The scene fills whatever height the column has left and keeps its width in
   step with it, so the dolly never pushes the panel or the page out of view. */
.dolly-wrap {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Total height of the stack is the square bed plus the apron strip below it:
   width + width * 9 / 25, which is width * 34 / 25. The stack is also the
   clipping frame: the dolly drives in and out of it between flights. */
.dolly-stack {
  position: relative;
  width: min(100cqw, 100cqh * 25 / 34);
  border-radius: .75rem;
  overflow: hidden;
}

/* Paved apron that stays put while the vehicles move over it. The dolly
   artwork is a cutout, so this photo is the only ground in the scene; it is
   drawn in the stack's own 25:34 proportions and fills it exactly. The
   overlay adds the light the vehicles are lit with. */
.apron {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #a8a49b url("./assets/apron-ground.jpg") center / cover no-repeat;
  pointer-events: none;
}
.apron::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 85% at 26% 18%, rgba(255, 255, 255, .04), transparent 62%),
    linear-gradient(158deg, rgba(18, 24, 30, .07), rgba(18, 24, 30, .21));
}

/* The board and the dolly artwork share one responsive coordinate space.
   These percentages are the empty cargo bed inside the image's rails. */
.dolly-scene {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  isolation: isolate;
  container-type: inline-size;
}
/* Waiting behind the menu for the player to start the flight. */
.dolly-scene.is-parked { visibility: hidden; }
.dolly-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}
/* The cutout no longer carries the shadow its pavement had, so the dolly
   casts one from the same light as the tug. */
.dolly-art {
  filter: drop-shadow(.1875rem .375rem .3125rem rgba(8, 14, 18, .3));
}
.board {
  position: absolute;
  left: 15.8%;
  top: 10.1%;
  width: 68.8%;
  height: 64.8%;
  border: 0;
  background: transparent;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  overflow: hidden;
}

/* Extend the scene below the existing square, keeping the dolly and its
   playable bed at precisely their original responsive dimensions. */
.baggage-tug {
  position: absolute;
  z-index: 8;
  left: 34.16%;
  top: 91.35%;
  width: 32%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(.1875rem .375rem .3125rem rgba(8, 14, 18, .3));
}
/* Keeps the apron below the hitch inside the stack's height. */
.tug-clearance { position: relative; width: 100%; aspect-ratio: 25 / 9; }

.grid,
.regions-layer,
.draft-layer { position: absolute; inset: 0; }

/* Layer order inside the scene: the cargo (2) lies on top of the whole dolly,
   corner guards included; tags (6) and the live outline (7) stay above it. */
.regions-layer { z-index: 2; pointer-events: none; }
.grid { z-index: auto; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); pointer-events: none; }
.draft-layer { z-index: 7; pointer-events: none; }

.cell {
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cell:nth-child(7n) { border-right: 0; }
.cell:nth-last-child(-n + 7) { border-bottom: 0; }

.cell.occupied { border-color: transparent; }

.clue {
  z-index: 6;
  --clue: #fff;
  position: relative;
  min-width: clamp(1.5rem, 4.4cqw, 2.25rem);
  height: clamp(1.55rem, 4.4cqw, 2.25rem);
  padding: 0 clamp(.2rem, .7cqw, .45rem);
  background: #f3ede0;
  border: .125rem solid var(--clue);
  border-radius: .2rem;
  color: #111820;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  font-size: clamp(.75rem, 2.1cqw, 1rem);
  font-weight: 850;
  line-height: 1;
  box-shadow: .125rem .1875rem 0 rgba(0, 0, 0, .25);
  transform: rotate(var(--tilt, -2deg));
}

.clue::before {
  content: "";
  position: absolute;
  top: -.44rem;
  left: 50%;
  width: .38rem;
  height: .38rem;
  margin-left: -.19rem;
  background: var(--clue);
  border: 1px solid #fff;
  border-radius: 50%;
}

.clue.attached { box-shadow: .0625rem .1875rem .25rem rgba(0, 0, 0, .45); }
.clue-shape { font-size: .85em; font-weight: 900; }

.region {
  position: absolute;
  padding: clamp(.125rem, .48cqw, .3rem);
  pointer-events: none;
  animation: caseArrival .22s ease-out both;
}
.case-art {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(.0625rem .1875rem .125rem rgba(9, 15, 19, .55));
}
.region.hinted { animation: hintPulse 1s ease 2; }
.region.wrong { animation: wrongShake .28s ease 2; }
.region.wrong .case-art { filter: sepia(.6) saturate(3) drop-shadow(0 0 .1875rem #ff5353); }
.draft-region {
  position: absolute;
  border: .125rem dashed #ffe8a0;
  background: rgba(255, 224, 130, .18);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
  border-radius: .2rem;
}
.draft-region.invalid { border-color: #ff6868; background: rgba(224, 67, 67, .25); animation: wrongShake .28s ease 2; }
@keyframes caseArrival { from { opacity: .35; scale: .96; } to { opacity: 1; scale: 1; } }

.draft-counter {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 3.4rem;
  height: 2.125rem;
  padding: 0 .55rem;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  background: #111820;
  border: .125rem solid #f8fafb;
  color: #fff;
  box-shadow: .125rem .1875rem 0 rgba(0, 0, 0, .32);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.draft-counter b { font-weight: 900; }
.draft-counter i { color: #aeb8c1; font-style: normal; font-weight: 700; }
.draft-counter.matched { background: #147554; border-color: #72e3b8; }
.draft-counter.over { background: #a92e35; border-color: #ff9a9f; }
.draft-counter.unknown b:last-child { color: #aeb8c1; }

@keyframes wrongShake {
  25% { transform: translateX(-.1875rem); }
  75% { transform: translateX(.1875rem); }
}

@keyframes hintPulse {
  50% { filter: brightness(1.55); box-shadow: 0 0 0 .44rem rgba(255, 216, 77, .26); }
}

.mobile-help { display: none; }

.control-panel {
  flex: 0 0 23rem;
  align-self: center;
  max-height: 100%;
  overflow: hidden;
  background: var(--panel);
  border-top: .375rem solid var(--safety);
  box-shadow: 0 1rem 2.8rem rgba(8, 15, 20, .25);
  border-radius: .25rem;
  padding: 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
}

.eyebrow {
  margin: 0 0 .5rem;
  color: #74808b;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.briefing h1 {
  margin: 0;
  font-family: "Arial Narrow", "Segoe UI", sans-serif;
  font-size: 2.2rem;
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.briefing > p:last-child { color: var(--muted); line-height: 1.45; font-size: .9rem; margin: .8rem 0 0; }

.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin: 1.3rem 0;
}

.tool-button {
  min-height: 2.7rem;
  padding: 0 .4rem;
  border: 1px solid #cfd4d8;
  background: #fff;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.tool-button span[aria-hidden] { display: inline-block; margin-right: .3rem; font-size: 1.15em; }
.tool-button:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }
.tool-button:active:not(:disabled) { transform: translateY(1px); }
.tool-button:focus-visible { outline: .1875rem solid rgba(36, 111, 181, .35); outline-offset: .125rem; }
.tool-button:disabled { color: #a9b0b5; cursor: not-allowed; background: #f3f4f4; }
.hint-button { grid-column: 1 / -1; background: var(--safety); border-color: #d9b631; }

.advice {
  min-height: 6rem;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .75rem;
  padding: .9rem 1rem;
  background: #eef4f8;
  border-left: .25rem solid #3c79a9;
}

.advice.error { background: #fff0f0; border-left-color: var(--danger); }
.advice.success { background: #eef8f4; border-left-color: var(--success); }
.advice-icon { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; color: white; background: #3c79a9; font-weight: 900; }
.advice.error .advice-icon { background: var(--danger); }
.advice.success .advice-icon { background: var(--success); }
.advice strong { display: block; margin-bottom: .3rem; font-size: .95rem; }
.advice p { margin: 0; color: #5f6973; font-size: .875rem; line-height: 1.4; }

.legend { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid #e1e4e6; }
.legend h2 { margin: 0 0 .7rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.legend-row { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; color: #424b54; font-size: .84rem; }
.legend-row > span { display: inline-flex; align-items: center; gap: .35rem; }
.legend-shape { width: 1.3rem; height: 1.3rem; display: grid; place-items: center; background: #202831; color: white; font-size: .8rem; }
.legend > p { color: #7b858d; font-size: .78rem; margin: .6rem 0 0; }

.shift-stats {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #e1e4e6;
  color: #68737d;
  font-size: .82rem;
}
.shift-stats b { color: var(--ink); }

.complete-dialog {
  width: min(26rem, calc(100% - 2rem));
  border: 0;
  border-top: .5rem solid var(--success);
  border-radius: .25rem;
  padding: 2rem;
  color: var(--ink);
  box-shadow: 0 1.8rem 5rem rgba(0, 0, 0, .35);
  text-align: center;
}
.complete-dialog::backdrop { background: rgba(13, 20, 27, .73); }
.completion-stamp { width: 3.6rem; height: 3.6rem; display: grid; place-items: center; margin: 0 auto 1.1rem; border: .1875rem solid var(--success); color: var(--success); font-size: 2rem; font-weight: 900; transform: rotate(-5deg); }
.complete-dialog h2 { margin: 0; font-family: "Arial Narrow", sans-serif; font-size: 2.4rem; text-transform: uppercase; }
.complete-dialog > p:not(.eyebrow) { color: var(--muted); line-height: 1.5; font-size: .95rem; }
.complete-dialog button { width: 100%; min-height: 3rem; margin-top: .6rem; border: 0; background: var(--ink); color: #fff; font-weight: 800; cursor: pointer; }
.complete-dialog button span[aria-hidden] { color: var(--safety); margin-left: .3rem; }
.complete-dialog .secondary-button { background: transparent; color: var(--ink); border: 1px solid #cfd4d8; font-weight: 700; }
.complete-dialog .secondary-button:hover { border-color: var(--ink); }

/* The menu is the title screen and the pause screen. It sits in the top
   layer over the whole stage, laid out on the same 16:9 grid as the game. */
.menu-dialog {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: hidden;
}
.menu-dialog[open] { display: flex; align-items: center; justify-content: center; }
.menu-dialog::backdrop {
  background: radial-gradient(ellipse at 30% 35%, rgba(52, 62, 70, .84), rgba(13, 20, 27, .95) 78%);
  backdrop-filter: blur(6px);
  animation: menuFade .35s ease both;
}

.menu-stage {
  width: min(100vw, 100vh * 16 / 9);
  height: min(100vh, 100vw * 9 / 16);
  width: min(100vw, 100dvh * 16 / 9);
  height: min(100dvh, 100vw * 9 / 16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 29rem;
  align-items: center;
  gap: 4rem;
  padding: 3.5rem 5rem;
  animation: menuRise .45s cubic-bezier(.2, .7, .3, 1) both;
}

.menu-hero { min-width: 0; }
.menu-mark { width: 4.2rem; height: 3.2rem; padding: .5rem; gap: .32rem; border-width: .19rem; }
.menu-hero .eyebrow { margin: 2rem 0 .8rem; color: var(--safety); font-size: .9rem; }
.menu-title {
  margin: 0;
  font-family: "Arial Narrow", "Segoe UI", sans-serif;
  font-size: 6.6rem;
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.menu-tagline { max-width: 32rem; margin: 1.2rem 0 0; color: #c9d1d7; font-size: 1.25rem; line-height: 1.4; }

.menu-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 1rem 2.6rem;
  margin: 2.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.menu-stat.wide { grid-column: 1 / -1; }
.menu-stat dt { color: #9aa6b0; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.menu-stat dd { margin: .3rem 0 0; font-size: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.menu-stat.wide dd { color: #ffe093; }
.menu-note { max-width: 32rem; margin: 1.6rem 0 0; color: #9aa6b0; font-size: .9rem; line-height: 1.45; }
.menu-studio { margin: 1.4rem 0 0; color: #6f7b85; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.menu-card {
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  color: var(--ink);
  border-top: .375rem solid var(--safety);
  border-radius: .25rem;
  box-shadow: 0 1.4rem 3.6rem rgba(0, 0, 0, .45);
  padding: 1.9rem;
}
.menu-view { display: grid; gap: .7rem; }
.menu-view[hidden] { display: none; }

.menu-primary,
.menu-item,
.menu-back,
.reset-button {
  cursor: pointer;
  color: var(--ink);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.menu-primary:focus-visible,
.menu-item:focus-visible,
.menu-back:focus-visible,
.reset-button:focus-visible,
.segmented label:focus-within,
.switch:focus-visible,
.volume-control input:focus-visible { outline: .1875rem solid rgba(17, 24, 32, .5); outline-offset: .15rem; }

.menu-primary {
  min-height: 4rem;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  border: 0;
  border-radius: .2rem;
  background: var(--safety);
  box-shadow: inset 0 -.25rem 0 rgba(0, 0, 0, .14);
  font-size: 1.3rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.menu-primary:hover { background: #f1c552; transform: translateY(-1px); }
.menu-primary:active { transform: translateY(1px); }
.play-icon {
  width: 0;
  height: 0;
  border-top: .55rem solid transparent;
  border-bottom: .55rem solid transparent;
  border-left: .85rem solid currentColor;
}

.menu-item {
  min-height: 3.3rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 0 1rem;
  border: 1px solid #cfd4d8;
  border-radius: .2rem;
  background: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
}
.menu-item::after { content: "›"; margin-left: auto; color: #9aa3ab; font-size: 1.5rem; line-height: 1; }
.menu-item:hover { border-color: var(--ink); transform: translateY(-1px); }
.menu-item-icon {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  background: #202831;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
}

.menu-view-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .3rem; }
.menu-view-head h2 {
  margin: 0;
  font-family: "Arial Narrow", "Segoe UI", sans-serif;
  font-size: 1.9rem;
  line-height: 1;
  text-transform: uppercase;
}
.menu-back {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #cfd4d8;
  border-radius: .2rem;
  background: #fff;
  font-size: 1.2rem;
  font-weight: 800;
}
.menu-back:hover { border-color: var(--ink); }

.menu-section-title {
  margin: .8rem 0 0;
  color: #74808b;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.settings-group { margin: 0; padding: .3rem 0 .6rem; border: 0; border-top: 1px solid #e1e4e6; }
.settings-group legend {
  padding: .8rem 0 .2rem;
  color: #74808b;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.setting-row {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 650;
}
.setting-row small { display: block; margin-top: .15rem; color: #7b858d; font-size: .8rem; font-weight: 500; }

.switch {
  flex: 0 0 auto;
  appearance: none;
  position: relative;
  width: 3rem;
  height: 1.7rem;
  margin: 0;
  border-radius: 1rem;
  background: #c3c9ce;
  cursor: pointer;
  transition: background .15s ease;
}
.switch::before {
  content: "";
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 .0625rem .1875rem rgba(0, 0, 0, .3);
  transition: transform .15s ease;
}
.switch:checked { background: var(--success); }
.switch:checked::before { transform: translateX(1.3rem); }

.volume-control { display: inline-flex; align-items: center; gap: .7rem; }
.volume-control input { width: 10rem; margin: 0; accent-color: var(--success); cursor: pointer; }
.volume-control input:disabled { cursor: not-allowed; opacity: .45; }
.volume-control output { min-width: 2.8rem; color: #5f6973; font-size: .9rem; text-align: right; font-variant-numeric: tabular-nums; }

.segmented { display: inline-flex; border: 1px solid #cfd4d8; border-radius: .2rem; background: #fff; overflow: hidden; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: .55rem .8rem; font-size: .88rem; font-weight: 700; color: #5f6973; }
.segmented input:checked + span { background: var(--ink); color: #fff; }

.reset-button {
  width: 100%;
  min-height: 2.9rem;
  margin-top: .4rem;
  border: 1px solid #e3b4b4;
  border-radius: .2rem;
  background: #fff;
  color: #a92e35;
  font-size: .95rem;
  font-weight: 750;
}
.reset-button:hover { border-color: #a92e35; }
.reset-button.is-armed { background: #a92e35; border-color: #a92e35; color: #fff; }

.howto-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .55rem; color: #3b444c; font-size: .95rem; line-height: 1.42; }
.howto-steps li::marker { color: #9a7a1c; font-weight: 900; }
.howto-legend { margin: .2rem 0 0; }
.howto-controls {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .45rem 1rem;
  margin: 0;
  font-size: .9rem;
  line-height: 1.35;
}
.howto-controls dt { font-weight: 750; white-space: nowrap; }
.howto-controls dd { margin: 0; color: #5f6973; }
.howto-route { margin: .3rem 0 0; padding: .8rem .9rem; background: #eef4f8; border-left: .25rem solid #3c79a9; color: #4d5861; font-size: .86rem; line-height: 1.4; }

@keyframes menuFade { from { opacity: 0; } }
@keyframes menuRise { from { opacity: 0; transform: translateY(1rem); } }

.toast {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  max-width: min(32rem, calc(100% - 2rem));
  padding: .8rem 1rem;
  border-left: .25rem solid var(--safety);
  background: #111820;
  color: #fff;
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .3);
  font-size: .9rem;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, .75rem);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.toast.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Taller than wide: the 16:9 stage would leave a letterbox strip, so the
   shift stacks instead and every block shrinks to keep one screenful. */
@media (max-aspect-ratio: 1 / 1) {
  html {
    font-size: min(100vw / 26.5, 100vh / 50);
    font-size: min(100vw / 26.5, 100dvh / 50);
  }

  .game-shell { width: 100vw; height: 100vh; height: 100dvh; box-shadow: none; }

  .topbar { height: 3.2rem; padding: 0 .9rem; gap: .5rem; }
  .brand small { display: none; }
  .brand { gap: .5rem; }
  .brand strong { font-size: .95rem; white-space: nowrap; }
  .brand-mark { width: 2rem; height: 1.6rem; }
  .topbar-side { gap: .6rem; }
  /* The route strip right below already names the difficulty. */
  .flight-name { display: none; }
  .flight-status { font-size: .78rem; gap: .35rem; }
  .flight-status .status-light { display: none; }
  .flight-status time { min-width: 3rem; margin-left: .2rem; padding-left: .5rem; }
  .workspace {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
    padding: .7rem .8rem .9rem;
    max-width: 32rem;
    margin: 0 auto;
  }

  .route-strip { margin-bottom: .4rem; gap: .35rem; font-size: .72rem; letter-spacing: 0; text-transform: none; }
  .route-strip i { width: .6rem; }

  .mobile-help { display: block; margin: .35rem 0 0; text-align: center; color: #d0d7dd; font-size: .8rem; }

  .control-panel {
    flex: 0 0 auto;
    align-self: stretch;
    padding: .9rem 1rem 1rem;
  }

  .briefing, .legend { display: none; }
  .controls { grid-template-columns: repeat(3, 1fr); gap: .45rem; margin: 0 0 .7rem; }
  .hint-button { grid-column: auto; }
  .tool-button { min-height: 2.5rem; font-size: .85rem; }
  .tool-button span[aria-hidden] { margin-right: .15rem; }
  .advice { min-height: 0; padding: .7rem .8rem; gap: .6rem; grid-template-columns: 1.5rem 1fr; }
  .advice-icon { width: 1.4rem; height: 1.4rem; font-size: .8rem; }
  .shift-stats { margin-top: .8rem; padding-top: .7rem; }

  .complete-dialog { width: min(22rem, calc(100% - 2rem)); padding: 1.6rem; }
  .complete-dialog h2 { font-size: 2rem; }

  .topbar-button { height: 2.2rem; }
  .icon-button, #menuButton { width: 2.2rem; padding: 0; justify-content: center; }
  .topbar-button-label { display: none; }

  .menu-stage {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 32rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: 1.2rem;
    padding: 1.4rem .9rem;
  }
  .menu-mark { display: none; }
  .menu-hero .eyebrow { margin: 0 0 .4rem; font-size: .78rem; }
  .menu-title { font-size: 3.4rem; }
  .menu-tagline { margin-top: .6rem; font-size: .95rem; }
  .menu-stats { grid-template-columns: repeat(3, 1fr); gap: .7rem 1rem; margin-top: 1rem; padding-top: .9rem; }
  .menu-stat dt { font-size: .66rem; letter-spacing: .06em; }
  .menu-stat dd { font-size: 1.15rem; }
  .menu-note, .menu-studio { display: none; }
  .menu-card { padding: 1.2rem; }
  .menu-primary { min-height: 3.4rem; font-size: 1.15rem; }
  .menu-item { min-height: 3rem; font-size: 1rem; }
  .volume-control input { width: 7.5rem; }
  .setting-choice { flex-direction: column; align-items: stretch; gap: .5rem; padding: .3rem 0; }
  .segmented { display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
  /* A settings or rules page gets the whole screen. */
  .menu-dialog:not([data-view="main"]) .menu-hero { display: none; }
  .howto-controls { grid-template-columns: 1fr; gap: .1rem; }
  .howto-controls dd { margin-bottom: .45rem; }
}

/* Studio splash. It is part of the markup, so it covers the screen from the
   first paint until the first flight is ready and nobody sees half-loaded
   artwork. Sized in viewport units so it does not depend on the stage's rem
   scale while the page is still loading. */
.splash {
  --logo-h: min(58vh, 83vw);
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, #fffdf5, var(--panel) 72%);
  transition: opacity .5s ease, visibility .5s;
}
.splash.is-leaving { opacity: 0; visibility: hidden; }
.splash-logo {
  height: var(--logo-h);
  width: auto;
  user-select: none;
  animation: splashLogo .8s cubic-bezier(.2, .7, .3, 1) both;
}
/* The artwork has wide transparent margins; tuck the bar up under the
   lettering rather than leaving it adrift at the bottom of the canvas. */
.splash-progress {
  width: min(320px, 56vw);
  height: 4px;
  margin-top: calc(var(--logo-h) * -.07);
  border-radius: 2px;
  background: rgba(17, 24, 32, .12);
  overflow: hidden;
}
.splash-progress i {
  display: block;
  height: 100%;
  background: var(--ink);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  transition: transform .35s ease;
}
@keyframes splashLogo {
  from { opacity: 0; transform: scale(.94); }
}

/* Menu settings. "Animation" off stills the whole interface the way the
   system preference below does; economy graphics drop the soft shadows and
   the blur behind the menu, the costliest effects on a weak phone. */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after, .reduce-motion ::backdrop { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
.economy-graphics .dolly-art,
.economy-graphics .baggage-tug,
.economy-graphics .case-art { filter: none; }
.economy-graphics .menu-dialog::backdrop { backdrop-filter: none; background: rgba(17, 24, 30, .95); }

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