@font-face {
  font-family: Roboto;
  src: url(assets/Roboto-Regular.ttf);
}
@font-face {
  font-family: Roboto;
  src: url(assets/Roboto-Bold.ttf);
  font-weight: 700;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 15% 10%, #bdeefa 0, transparent 40%),
    radial-gradient(ellipse at 90% 80%, #ffe6b2 0, transparent 45%), #f0fafc;
  color: #233b57;
  font:
    15px Roboto,
    sans-serif;
}
main {
  max-width: 570px;
  margin: auto;
  padding: 20px 18px 24px;
}
header {
  display: flex;
  align-items: center;
  gap: 12px;
}
small {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
}
h1 {
  font-size: 23px;
  margin: 6px 0 18px;
}
.pill {
  font-size: 11px;
  white-space: nowrap;
  background: #d2e2d1;
  padding: 8px;
  border-radius: 20px;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: #f8f3e6;
  border-radius: 14px;
  cursor: pointer;
  min-height: 44px;
  padding: 9px 13px;
  touch-action: manipulation;
}
button:focus-visible,
input:focus-visible {
  outline: 3px solid #26887c;
  outline-offset: 2px;
}
button.selected {
  background: #34786d;
  color: white;
}
nav {
  flex-wrap: wrap;
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
nav button {
  flex: 1;
}
.game {
  background: #f8f3e6;
  border: 1px solid #dedfcd;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 32px #47584712;
}
.hud {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
}
.hud strong {
  flex: 1;
  font-size: 14px;
}
.hud button {
  background: #e8ecdd;
}
#board {
  position: relative;
  aspect-ratio: 390/520;
  max-height: 620px;
  width: 100%;
  overflow: hidden;
  background: #e4eadb;
}
canvas {
  touch-action: none;
  width: 100%;
  height: 100%;
  display: block;
}
#feed-next {
  position:absolute;
  transform:translate(-50%,-50%);
  width:48px;height:48px;padding:0;
  background:#f9df8699;color:#125568;
  border:2px solid #fff1ba;border-radius:12px;
  font-size:25px;z-index:3;touch-action:manipulation;
}
#feed-next:disabled {opacity:.35;}
#feed-next:active {background:#ffcd46;}
#slots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#robots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
/* Not a control any more: taps are resolved against the courier in the scene.
   This stays only to carry the charge readout and to keep the crew reachable
   by keyboard, so it must never swallow a pointer. */
.robot-hit {
  position: absolute;
  width: 44px;
  height: 60px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: transparent;
  border: 0;
  padding: 0;
  touch-action: none;
}
.robot-hit:focus-visible {
  outline: 3px solid #fff6ac;
  border-radius: 14px;
}
.robot-hit span {
  position: absolute;
  top: -3px;
  right: -6px;
  border-radius: 5px;
  background: #effff2ed;
  color: #186239;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 4px;
  box-shadow: 0 1px 3px #16352433;
}
.robot-hit.low span {
  background: #ffe0c0;
  color: #972b16;
}
.robot-hit[hidden],
.slot[hidden] {
  display: none;
}
.slot {
  position: absolute;
  width: 48px;
  height: 48px;
  padding: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  background: #faf3d990;
  border: 2px solid #fff4d8;
  border-radius: 50%;
  font-weight: 700;
  font-size: 19px;
  touch-action: none;
  box-shadow: 0 2px 3px #694d2820;
}
.slot.occupied {
  background: transparent;
  border-color: #47786b70;
  color: transparent;
}
.slot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1px;
  width: var(--anchor-length, 0px);
  background: #47786b;
  transform-origin: left center;
  transform: rotate(var(--anchor-angle, 0rad)) translateX(22px);
  pointer-events: none;
}
.slot.available {
  border-color: #518f79;
  background: #cde4b87a;
}
#notice {
  position: absolute;
  top: 10px;
  left: 8%;
  right: 8%;
  text-align: center;
  background: #fff8e9ee;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  pointer-events: none;
}
#notice:empty {
  display: none;
}
#reserve {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  gap: 5px;
  padding: 12px 9px 5px;
  min-height: 96px;
  border-top: 1px solid #dedfcd;
  touch-action: pan-x;
}
#reserve button {
  flex: 0 0 78px;
  scroll-snap-align: start;
  min-width: 0;
  padding: 3px 1px 6px;
  position: relative;
  background: #e7f2f7;
  border: 2px solid transparent;
  touch-action: pan-x;
}
.campaign-picker {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  font-size: 12px;
}
.campaign-picker select {
  min-height: 40px;
  flex: 1;
  min-width: 0;
  border: 1px solid #9ab5c3;
  border-radius: 8px;
  background: #f4fbff;
  color: #233b57;
  font: inherit;
}
body.native .campaign-picker {
  display: none;
}
#reserve button.selected {
  border-color: #0785ab;
  background: #cef2fa;
  color: #233b57;
}
#reserve img {
  height: 43px;
  width: 100%;
  object-fit: contain;
  pointer-events: none;
}
#reserve b {
  display: block;
  margin: 2px 3px;
  white-space: nowrap;
  background: #fff9e9;
  border-radius: 10px;
  min-width: 18px;
  font-size: 10px;
}
.workshop-help {
  padding: 8px 14px 14px;
  font-size: 12px;
  line-height: 1.5;
}
.workshop-help summary {
  cursor: pointer;
  min-height: 32px;
}
body.native .workshop-help {
  display: none;
}
#reserve span {
  display: block;
  font-size: 11px;
}
#reserve button.empty {
  opacity: 0.5;
}
.hint {
  font-size: 11px;
  line-height: 1.5;
  margin: 5px 15px 12px;
  color: #63756b;
}
footer {
  font-size: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 12px;
}
footer button {
  font-size: 12px;
  background: #d7e3d7;
}
footer p {
  line-height: 1.5;
  margin: 0;
  color: #64766a;
}
.camera {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.camera input {
  flex: 1;
  accent-color: #34786d;
}
#comparison {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #edf0e4;
}
@media (max-width: 370px) {
  main {
    padding: 12px 8px;
  }
  h1 {
    font-size: 19px;
  }
  .pill {
    font-size: 9px;
  }
  .slot {
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
}
.shift {
  display: flex;
  gap: 5px 12px;
  flex-wrap: wrap;
  padding: 0 15px 9px;
  font-size: 11px;
  color: #677568;
}
#shift-progress {
  display: block;
  width: calc(100% - 28px);
  height: 6px;
  margin: 0 14px 10px;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  appearance: none;
  background: #d9e8ed;
  accent-color: #0785ab;
}
#shift-progress::-webkit-progress-bar {
  background: #d9e8ed;
}
#shift-progress::-webkit-progress-value {
  background: #0785ab;
}
#shift-progress::-moz-progress-bar {
  background: #0785ab;
}
#selection-hint {
  min-height: 42px;
  color: #233b57;
  font-weight: 700;
}
#result {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(320px, calc(100% - 32px));
  padding: 22px;
  border: 1px solid #b6dce5;
  border-radius: 22px;
  background: #f4fcff;
  box-shadow: 0 12px 40px #233b5733;
  text-align: center;
}
#result[hidden] {
  display: none;
}
#result h2 {
  margin: 0 0 10px;
  font-size: 22px;
}
#result p {
  font-size: 14px;
  line-height: 1.5;
}
#retry {
  background: #087f9e;
  color: white;
  width: 100%;
}
#next-lesson {
  margin-top: 8px;
  background: #ffdb86;
  width: 100%;
}
#next-lesson[hidden] {
  display: none;
}
.shift strong {
  color: #345c50;
}
.shift .danger {
  color: #b33b31;
  font-weight: bold;
}
/* Reads as plain status until the belt is full, when it explains why further
   taps stop sending couriers out. */
.shift #stationed.full {
  color: #1d6b4e;
  font-weight: bold;
}
.shift #stationed[hidden] {
  display: none;
}
.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  font-size: 11px;
  color: #6b7567;
}
.actions button {
  background: #e6d6a3;
  color: #554821;
  font-size: 12px;
}
.actions button:disabled {
  opacity: 0.5;
}
.slot.travelling {
  color: #456c62;
  background: #e9edd38a;
  border-style: dashed;
  font-size: 15px;
}
/* Hit targets remain accessible, but the station itself is a 3D floor marker. */
.slot,
.slot.occupied,
.slot.available,
.slot.travelling {
  background: transparent;
  border-color: transparent;
  color: transparent;
  box-shadow: none;
}
.slot::before {
  display: none;
}
.slot:focus-visible {
  outline: 2px dashed #598f83;
  outline-offset: 2px;
}
body.native header,
body.native #maps,
body.native #compare {
  display: none;
}
body.native #lessons {
  display: none;
}
body.native #polygons {
  display: none;
}
.slot.low-energy {
  color: #713500;
  background: #ffdf95e6;
  font-size: 12px;
  border: 2px solid #fff3cc;
}
body.native main {
  padding: 6px;
  max-width: 650px;
}
body.native #board {
  height: max(320px, calc(100dvh - 270px));
  aspect-ratio: auto;
  max-height: none;
}
body.native footer {
  padding: 8px;
  font-size: 11px;
}

/* v4: all crew interaction lives on the yard. */
#reserve, .actions, #selection-hint, #feed-next {display:none !important;}
#notice:empty {display:none;}
.slot {pointer-events:none;}
#board {max-height:none;height:max(560px,calc(100dvh - 170px));aspect-ratio:auto;}
body.native main {padding:2px;max-width:none;}
body.native .game {border-radius:12px;}
body.native #board {height:max(420px,calc(100dvh - 110px));}
body.native footer {display:none;}
body.native main {height:100dvh;display:flex;flex-direction:column;box-sizing:border-box;}
body.native .game {display:flex;flex-direction:column;flex:1;min-height:0;}
body.native #board {flex:1;min-height:0;height:auto;}

.robot-hit span:empty { display: none; }

.slot.assignable {pointer-events:auto;border:3px solid #fff6ac;background:#00b99799;box-shadow:0 0 0 3px #153f51,0 0 18px #64ffd9;color:white;opacity:1;}
/* Selection is shown by a ring around the courier's feet in the scene. */

.slot.assignable {border-radius:12px;}

#cables {position:absolute;inset:0;pointer-events:none;}
/* The reel is drawn in 3D and tapped there; this is a keyboard affordance
   only, so it is transparent and never intercepts a pointer. */
.cable-hit {position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;pointer-events:none;touch-action:none;background:transparent;border:2px solid transparent;border-radius:14px;color:transparent;font-size:22px;padding:0;}
.cable-hit:focus-visible{outline:3px solid #fff6ac;}
.robot-hit.charged span {
  background: #daf8bd;
  color: #21572f;
  box-shadow: 0 0 0 2px #fff5d6;
}
/* Settings remain available in the native layout without covering the yard. */
#game-settings { border: 0; border-radius: 24px; padding: 24px; width: min(340px, 80vw); color: #193d53; background: #faf7e9; box-shadow: 0 16px 80px #183a5266; }
#game-settings::backdrop { background: #15344877; }
#game-settings label { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 58px; font-weight: 600; }
#game-settings input { width: 24px; height: 24px; accent-color: #078e9b; }
#settings-menu { width: 100%; margin-top: 18px; }
#game-settings-button { flex: 0 0 42px; padding: 8px; }

/* The native game occupies the display; controls float over the scene. */
body.native { overflow: hidden; overscroll-behavior: none; }
body.native main { padding: 0; height: 100dvh; }
body.native .game { position: relative; border: 0; border-radius: 0; box-shadow: none; }
body.native #board { position: absolute; inset: 0; width: 100%; height: 100%; }
body.native .hud { position: absolute; z-index: 6; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); padding: 0; gap: 8px; }
body.native .hud button { flex: 0 0 44px; min-width: 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 22px; background: #faf7e9dd; box-shadow: 0 2px 8px #254b4226; }
body.native #score, body.native #shift-progress, body.native .shift, body.native .workshop-help { display: none; }
body.native #notice { top: max(68px, calc(env(safe-area-inset-top) + 56px)); }
#game-settings > button { margin-top: 8px; }

/* A short viewport uses a side toolbar and a two-column settings sheet. */
#game-settings { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
#result { max-height: calc(100% - 24px); overflow-y: auto; }
@media (orientation: landscape) {
  body.native .hud { flex-direction: column; }
  body.native #notice { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(76px, calc(env(safe-area-inset-right) + 64px)); margin: 0 auto; max-width: 420px; }
  #game-settings[open] { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; width: min(640px, calc(100vw - 48px)); padding: 16px 20px; }
  #game-settings h2 { grid-column: 1 / -1; margin: 0 0 4px; }
  #game-settings label { min-height: 44px; }
  #game-settings p { font-size: 13px; margin: 8px 0; }
  #game-settings #settings-menu { margin-top: 8px; }
}

/* Flutter forwards native cutout insets that WebView may not expose via env(). */
body.native .hud {
  top: max(12px, env(safe-area-inset-top), var(--host-safe-top, 0px));
  right: max(12px, env(safe-area-inset-right), var(--host-safe-right, 0px));
}

/* Batch mode keeps its goal and decisions visible in the native full-screen yard. */
body.native .batch-picker { display:none; }
#batch-hud { position:absolute; z-index:5; top:max(12px,var(--host-safe-top,0px)); left:max(12px,var(--host-safe-left,0px)); right:120px; display:flex; flex-direction:column; gap:3px; color:#173e50; background:#fff9e9ed; border-radius:14px; padding:8px 10px; font-size:12px; pointer-events:none; }
#batch-hud[hidden] { display:none; }
#batch-hud strong { font-size:14px; }
#batch-progress { width:100%; height:6px; accent-color:#0785ab; }
#batch-tip { font-size:11px; }
.batch-mode .robot-hit span { display:block; opacity:1; font-weight:800; font-size:13px; white-space:nowrap; color:#173e50; background:#fff8dd; border:1px solid #487b8a; padding:3px 5px; border-radius:8px; }
.batch-mode #notice { top:150px; }
@media (orientation:landscape) { #batch-hud { right:80px; display:grid; grid-template-columns:1fr 1fr; max-width:600px; } #batch-progress { grid-column:1/-1; } #batch-tip { grid-column:1/-1; } }
.batch-mode .workshop-help, .batch-mode .actions { display: none; }
.batch-mode .robot-hit.batch-ready span { background:#d3f6e4; border-color:#158660; }
.batch-mode .robot-hit.batch-urgent span { background:#ffe0bd; border-color:#b75218; }
#batch-target { font-size:11px; font-weight:700; color:#725421; }
/* Production game surface. Workshop controls only appear with ?workshop=1. */
body.native .camera, body.native #reserve, body.native #selection-hint, body.native .actions { display:none; }
.batch-mode #camera-reset { display:none; }
#play-dock { position:absolute; z-index:6; left:max(16px,var(--host-safe-left,0px)); right:max(16px,var(--host-safe-right,0px)); bottom:max(16px,var(--host-safe-bottom,0px)); display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid #ffffffb0; border-radius:20px; background:#fffdf2ed; box-shadow:0 5px 24px #16364720; }
#play-dock[hidden], #shift-start[hidden] { display:none; }
#play-dock #batch-tip { flex:1; font-size:12px; line-height:1.4; color:#294657; }
#belt-stop { flex:none; min-height:48px; border:0; border-radius:14px; padding:10px 14px; color:#fff; background:#1c7181; font-weight:700; box-shadow:0 3px 0 #145363; }
#belt-stop:disabled { opacity:.55; box-shadow:none; }
#belt-stop { max-width:52%; }
#shift-start { position:absolute; z-index:12; top:50%; left:50%; transform:translate(-50%,-50%); width:min(340px,calc(100% - 40px)); padding:26px; border-radius:26px; text-align:center; color:#234050; background:#fffdf5f7; border:1px solid #fff; box-shadow:0 16px 60px #183f4b40; }
#shift-start h2 { margin:10px 0; font-size:25px; letter-spacing:-.6px; }
#shift-start p { font-size:14px; line-height:1.6; margin:14px 0 22px; }
#start-shift { width:100%; min-height:50px; border:0; background:#137c83; color:white; font-size:16px; font-weight:700; border-radius:15px; box-shadow:0 4px 0 #0e5964; }
#batch-hud { border:1px solid #ffffffa6; box-shadow:0 4px 20px #16364718; border-radius:18px; padding:12px; gap:5px; }
.batch-mode .robot-hit { pointer-events:auto; width:48px; }
.batch-mode .robot-hit span { box-shadow:0 3px 10px #193e4225; padding:5px 8px; border-radius:12px; }
.batch-mode #result { border-radius:26px; border:1px solid white; background:#fffdf5f7; box-shadow:0 16px 60px #183f4b40; }
@media (orientation:landscape) { #shift-start { padding:16px 22px; } #shift-start h2 { font-size:21px; } #shift-start p { margin:8px 0 14px; font-size:12px; } #play-dock { left:25%; right:16px; } }

/* The yard remains the home screen backdrop; selectable shifts are real buttons. */
#shift-start { top:auto; bottom:max(18px,var(--host-safe-bottom,0px)); transform:translateX(-50%); max-height:72%; overflow-y:auto; padding:20px; }
#shift-start small { font-size:10px; font-weight:800; letter-spacing:2px; color:#607d82; }
#shift-start p { margin:10px 0 16px; }
#shift-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 18px; }
#shift-cards[hidden], #crew-guide[hidden] { display:none; }
#shift-cards button { min-height:64px; padding:10px 5px; border:2px solid #d9e4df; border-radius:14px; background:#edf2e9; color:#35555c; font-size:12px; line-height:1.4; font-weight:800; box-shadow:0 3px 0 #d0dcd5; }
#shift-cards button[aria-pressed="true"] { background:#d8f5ea; border-color:#168c80; color:#116057; box-shadow:0 3px 0 #168c80; }
#start-shift { background:linear-gradient(#2ba987,#17826c); box-shadow:0 4px 0 #10604f, inset 0 1px 0 #ffffff70; font-size:20px; min-height:56px; }
#crew-guide { margin-top:18px; text-align:left; color:#456168; font-size:12px; }
#crew-guide summary { cursor:pointer; min-height:32px; text-align:center; font-weight:800; }
.crew-member { display:grid; grid-template-columns:66px 1fr; gap:8px; padding:10px 0; border-top:1px solid #e3e9df; line-height:1.5; }
.crew-member:first-of-type b { color:#b84f47; }
.crew-member:nth-of-type(2) b { color:#296fba; }
.crew-member:nth-of-type(3) b { color:#7754a2; }
#shift-cards button:focus-visible, #start-shift:focus-visible, .robot-hit:focus-visible { outline:3px solid #f5ba3c; outline-offset:3px; }
@media (orientation:landscape) { #shift-start { left:16px; transform:none; max-height:calc(100% - 32px); width:min(360px,48%); } #shift-cards button { min-height:48px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; } }

/* ===== Game skin v4: chunky casual UI over the live yard =====
   Reference: casual hits (Tower War, Supercell titles). Display type in Rubik
   Black, raised buttons with a solid bottom edge, dark translucent pills over
   the scene, one big green call to action. Only batch mode is reskinned;
   workshop tooling keeps its plain look. Loaded after style.css. */
@font-face { font-family: Rubik; src: url(assets/Rubik-var.ttf); font-weight: 300 900; }
:root {
  --ink: #1d2940; --pill: #1b2740c9; --pill-line: #ffffff26;
  --go: #45c93b; --go-dark: #2a9a26; --go-edge: #1d6f1b;
  --sky: #2d8cf0; --sky-edge: #1c5fb0; --gold: #ffc531; --gold-edge: #c98a0c;
  --red: #f24458; --blue: #238aee;
  /* UX pass tokens (docs/design/ux-pass-v1.md). New UI uses these instead of
     one-off values; existing rules migrate as their owners touch them. */
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --stroke: 2px; --stroke-strong: 3px; --line: #ffffffb0;
  --panel: #1b2740c9; --panel-solid: #1b2740; --panel-soft: #1b274099; --scrim: #0b142680;
  --edge-depth: 4px; --btn-h: 48px; --btn-h-lg: 64px; --hit-min: 48px;
  --focus-ring: 0 0 0 3px #fff, 0 0 0 6px var(--sky);
  --t-press: 140ms; --t-quick: 180ms; --t-move: 260ms; --t-reveal: 420ms;
  --ease-out: cubic-bezier(.2,.8,.2,1); --ease-pop: cubic-bezier(.3,1.5,.5,1);
  --fs-xs: 11px; --fs-s: 13px; --fs-m: 16px; --fs-l: 22px; --fs-xl: 34px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-press: 0ms; --t-quick: 0ms; --t-move: 0ms; --t-reveal: 0ms; }
}
body.reduce-motion { --t-press: 0ms; --t-quick: 0ms; --t-move: 0ms; --t-reveal: 0ms; }

/* P0.1: no native tap flash, no text selection or callout on the game surface.
   Android WebView paints a translucent blue box over any element with pointer
   listeners (the canvas) unless this is transparent. Keyboard focus rings stay. */
html { -webkit-tap-highlight-color: transparent; }
body.batch-mode, body.batch-mode canvas, body.batch-mode button {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
body.batch-mode canvas { touch-action: none; outline: none; }
body.batch-mode input, body.batch-mode textarea, body.batch-mode [contenteditable] {
  -webkit-user-select: text; user-select: text;
}
body.batch-mode, body.batch-mode button { font-family: Rubik, Roboto, sans-serif; }
body.batch-mode .hud button {
  width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; font-size: 20px; color: #fff;
  background: linear-gradient(#45a4ff, var(--sky)); border: 2px solid #ffffffb0;
  box-shadow: 0 4px 0 var(--sky-edge), 0 6px 14px #0b2b5540; font-weight: 900;
}
body.batch-mode .hud button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sky-edge); }
body.home .hud #pause { display: none; }

/* In-play HUD: a level bar like the references, then compact pills. */
body.batch-mode #batch-hud {
  right: max(130px, calc(var(--host-safe-right, 0px) + 126px)); background: none; border: 0; box-shadow: none;
  padding: 0; gap: 6px; color: #fff; top: max(14px, var(--host-safe-top, 0px)); backdrop-filter: none;
}
body.home #batch-hud, body.pause-card #batch-hud { display: none; }
.hud-bar {
  position: relative; height: 34px; border-radius: 18px; overflow: hidden; background: #c8384b;
  border: 3px solid #fff; box-shadow: 0 3px 0 #0000002e, 0 6px 16px #0b2b5530;
}
#batch-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(#5fb8ff, #2a7fe0); transition: width .35s ease; }
.hud-bar strong {
  position: relative; display: block; text-align: center; line-height: 28px; font-size: 16px !important;
  font-weight: 900; letter-spacing: .5px; color: #fff; text-shadow: 0 2px 0 #00000045;
}
body.batch-mode #batch-progress { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hud-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hud-pill, #batch-next, #batch-target {
  background: var(--pill); border: 1px solid var(--pill-line); border-radius: 12px; padding: 4px 10px;
  font-size: 12px; font-weight: 700; line-height: 18px;
}
.hud-pill.score { font-size: 16px; font-weight: 900; color: var(--gold); padding: 3px 12px; }
.hud-pill.score::before { content: "★ "; }
.hud-pill.urgent { background: #e8542bdd; animation: cl-pulse .8s ease-in-out infinite alternate; }
.hud-row.small { font-size: 11px; }
#batch-next { display: inline-flex; align-items: center; gap: 4px; }
#batch-next .label { opacity: .8; margin-right: 2px; font-weight: 700; }
.chip { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; border: 2px solid #fff; font-size: 9px; font-style: normal; }
.chip.c1 { background: var(--red); } .chip.c2 { background: var(--blue); }
.chip.urgent { box-shadow: 0 0 0 2px var(--gold); }
#batch-target { color: #ffe9a6; }

/* Robot tags: tiny tokens over each courier, green when a batch can go. */
body.batch-mode .robot-hit span {
  background: #fff; color: var(--ink); border: 0; border-radius: 10px; padding: 4px 8px;
  font-size: 13px; font-weight: 900; box-shadow: 0 3px 0 #00000030;
}
body.batch-mode .robot-hit.batch-ready span { background: var(--go); color: #fff; box-shadow: 0 3px 0 var(--go-edge); animation: cl-bob .9s ease-in-out infinite alternate; }
body.batch-mode .robot-hit.batch-urgent span { background: #ff8a2b; color: #fff; box-shadow: 0 3px 0 #b75218; }

/* Bottom dock: a short toast and one chunky action button. */
body.batch-mode #play-dock { background: none; border: 0; box-shadow: none; padding: 0; justify-content: space-between; align-items: flex-end; }
body.batch-mode #play-dock #batch-tip {
  flex: 0 1 auto; max-width: 60%; background: var(--pill); color: #fff; border-radius: 14px; padding: 8px 12px;
  font-size: 13px; font-weight: 700; line-height: 1.3;
}
body.batch-mode #batch-tip:empty { visibility: hidden; }
body.batch-mode #belt-stop {
  max-width: none; min-width: 132px; min-height: 58px; border-radius: 18px; padding: 8px 14px; border: 2px solid #ffffffb0;
  background: linear-gradient(#ffd75a, var(--gold)); color: #5a3a00; font-size: 16px; font-weight: 900;
  box-shadow: 0 5px 0 var(--gold-edge), 0 8px 18px #0000002e;
}
body.batch-mode #belt-stop:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold-edge); }
body.batch-mode #belt-stop:disabled { filter: grayscale(.6); opacity: .7; box-shadow: 0 3px 0 #9a8a6a; }

/* Home: the live yard is the menu backdrop. */
body.batch-mode #shift-start {
  inset: 0; top: 0; left: 0; bottom: 0; width: auto; max-height: none; transform: none; padding: 0; border: 0;
  border-radius: 0; background: none; box-shadow: none; overflow: visible; pointer-events: none; color: #fff; text-align: center;
}
body.batch-mode #shift-start[hidden] { display: none; }
body.batch-mode #shift-start > * { pointer-events: auto; }
.home-top {
  position: absolute; top: max(14px, var(--host-safe-top, 0px)); left: max(12px, var(--host-safe-left, 0px));
  right: max(76px, calc(var(--host-safe-right, 0px) + 72px)); display: flex; align-items: center; gap: 8px; text-align: left;
}
.avatar { width: 46px; height: 46px; border-radius: 14px; border: 3px solid #fff; background: linear-gradient(#8fd0ff, #3d95e8); overflow: hidden; box-shadow: 0 3px 0 #00000030; flex: none; }
.avatar img { width: 120%; margin: -2px -10%; }
.crew-name { flex: 1; min-width: 0; background: var(--pill); border-radius: 12px; padding: 7px 10px; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-pill { display: flex; align-items: center; gap: 4px; background: var(--pill); border-radius: 12px; padding: 4px 10px 4px 6px; font-weight: 900; font-size: 16px; }
.stat-pill i { font-style: normal; color: var(--gold); font-size: 20px; text-shadow: 0 2px 0 var(--gold-edge); }
body.batch-mode .home-banner {
  position: absolute; top: max(76px, calc(var(--host-safe-top, 0px) + 70px)); left: 0; right: 0; pointer-events: none;
}
.home-banner small { display: inline-block; font-size: 11px !important; font-weight: 900 !important; letter-spacing: 2px; color: #fff !important; background: var(--pill); padding: 4px 12px; border-radius: 10px; }
body.batch-mode #shift-start h2 {
  margin: 6px 0 2px; font-size: 46px; font-weight: 900; letter-spacing: 0; line-height: 1.05; color: #fff;
  text-transform: uppercase; -webkit-text-stroke: 2px #1b4fa0; paint-order: stroke fill;
  text-shadow: 0 4px 0 #1b4fa0, 0 8px 18px #00000040;
}
.ribbon {
  display: inline-block; margin-top: 4px; padding: 6px 22px; font-weight: 900; font-size: 15px; color: #fff;
  background: linear-gradient(#ff6a6a, #e23d52); border-radius: 10px; box-shadow: 0 3px 0 #a3243a; transform: rotate(-2deg);
}
.home-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px max(16px, var(--host-safe-left, 0px)) max(18px, var(--host-safe-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: linear-gradient(transparent, #0f1d3a66 40%, #0f1d3ab0);
}
body.batch-mode #shift-cards { display: flex; gap: 28px; margin: 0 0 10px; position: relative; justify-content: center; }
body.batch-mode #shift-cards[hidden] { display: none; }
body.batch-mode #shift-cards::before { content: ""; position: absolute; left: 30px; right: 30px; top: 27px; border-top: 4px dashed #ffffffa0; z-index: 0; }
body.batch-mode #shift-cards button {
  position: relative; z-index: 1; width: 58px; min-height: 0; height: 58px; padding: 0; border-radius: 50%; border: 3px solid #fff;
  background: linear-gradient(#9fb1c9, #6f83a2); color: #fff; box-shadow: 0 4px 0 #46566f; display: grid; place-items: center;
}
body.batch-mode #shift-cards button.done { background: linear-gradient(#ffd75a, var(--gold)); box-shadow: 0 4px 0 var(--gold-edge); color: #5a3a00; }
body.batch-mode #shift-cards button[aria-pressed="true"] { background: linear-gradient(#5fb8ff, var(--sky)); box-shadow: 0 4px 0 var(--sky-edge), 0 0 0 5px #ffffff55; color: #fff; transform: scale(1.12); }
#shift-cards b { font-size: 24px; font-weight: 900; line-height: 1; text-shadow: 0 2px 0 #00000035; }
#shift-cards em { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 13px; color: #ffffff70; text-shadow: 0 1px 0 #000a; white-space: nowrap; letter-spacing: -1px; }
body.batch-mode #shift-start p#shift-description {
  margin: 12px 0 0; font-size: 14px; line-height: 1.3; font-weight: 800; background: var(--pill); border-radius: 14px; padding: 8px 16px;
}
body.batch-mode #start-shift {
  width: min(320px, 84%); min-height: 72px; border-radius: 22px; border: 3px solid #ffffffc0; font-size: 34px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 1px; color: #fff; text-shadow: 0 3px 0 var(--go-edge);
  background: linear-gradient(#6fe061, var(--go) 55%, var(--go-dark)); box-shadow: 0 7px 0 var(--go-edge), 0 12px 24px #00000040;
  animation: cl-breathe 1.6s ease-in-out infinite;
}
body.batch-mode #start-shift:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--go-edge); animation: none; }
body.batch-mode #crew-guide { margin: 0; width: min(360px, 100%); color: #fff; font-size: 13px; text-align: left; }
body.batch-mode #crew-guide[hidden] { display: none; }
body.batch-mode #crew-guide summary { list-style: none; text-align: center; font-weight: 800; opacity: .9; text-decoration: underline; text-underline-offset: 3px; min-height: 28px; }
body.batch-mode #crew-guide[open] { background: #fffaf0f5; color: var(--ink); border-radius: 18px; padding: 8px 14px; box-shadow: 0 6px 20px #0004; }
body.batch-mode #crew-guide[open] summary { color: var(--ink); text-decoration: none; }
.crew-member b.red { color: #d9364a !important; } .crew-member b.blue { color: #1f74cc !important; } .crew-member b.gold { color: #b07800 !important; }
/* Pause reuses the home layout without level choice. */
body.pause-card .home-top { display: none; }
body.pause-card #shift-start { background: #0f1d3a70; }
body.pause-card .home-banner { top: 28%; }

/* Result: stars first, then the number, then the next step. */
body.batch-mode #result {
  width: min(340px, calc(100% - 32px)); border: 4px solid #fff; border-radius: 28px; padding: 26px 20px 20px; overflow: visible;
  background: linear-gradient(#3f9cf5, #2470d0); color: #fff; box-shadow: 0 8px 0 #184e95, 0 20px 50px #0006;
}
#result-stars { display: none; }
body.batch-mode.result-won #result-stars { display: flex; justify-content: center; gap: 4px; margin: -62px 0 6px; }
#result-stars i { width: 64px; height: 64px; font-style: normal; display: grid; place-items: center; font-size: 60px; line-height: 1; color: #6b86a8; text-shadow: 0 4px 0 #2a3f5c; }
#result-stars i::before { content: "★"; }
#result-stars i:nth-child(2) { transform: translateY(-14px) scale(1.2); }
#result-stars i.on { color: var(--gold); text-shadow: 0 4px 0 var(--gold-edge), 0 0 18px #ffd75a90; animation: cl-pop .45s cubic-bezier(.3,1.6,.5,1) both; }
#result-stars i.on:nth-child(2) { animation-delay: .15s; } #result-stars i.on:nth-child(3) { animation-delay: .3s; }
body.batch-mode #result h2 { font-size: 28px; font-weight: 900; text-transform: uppercase; text-shadow: 0 3px 0 #184e95; margin: 6px 0; }
#result-score { display: block; font-size: 34px; font-weight: 900; color: var(--gold); text-shadow: 0 3px 0 #8a5a00; }
#result-score:empty { display: none; }
body.batch-mode #result p { font-size: 13px; line-height: 1.45; opacity: .95; }
body.batch-mode #result button {
  display: block; width: 100%; min-height: 56px; margin-top: 10px; border-radius: 18px; border: 3px solid #ffffffc0;
  font-size: 20px; font-weight: 900; text-transform: uppercase; color: #fff;
}
body.batch-mode #result #next-lesson { background: linear-gradient(#6fe061, var(--go) 55%, var(--go-dark)); box-shadow: 0 5px 0 var(--go-edge); text-shadow: 0 2px 0 var(--go-edge); }
body.batch-mode #result #next-lesson[hidden] { display: none; }
body.batch-mode #result #retry { background: linear-gradient(#ffd75a, var(--gold)); color: #5a3a00; box-shadow: 0 5px 0 var(--gold-edge); }

@keyframes cl-breathe { 50% { transform: scale(1.035); } }
@keyframes cl-bob { to { transform: translateY(-3px); } }
@keyframes cl-pulse { to { filter: brightness(1.18); } }
@keyframes cl-pop { from { transform: scale(0); } }
@media (orientation: landscape) {
  body.batch-mode .home-banner { top: max(14px, var(--host-safe-top, 0px)); }
  body.batch-mode #shift-start h2 { font-size: 32px; }
  .home-top { right: auto; width: 300px; top: auto; bottom: max(14px, var(--host-safe-bottom, 0px)); }
  .home-bottom { left: auto; width: min(420px, 50%); background: linear-gradient(90deg, transparent, #0f1d3a99 30%); padding-top: 18px; }
  body.batch-mode #start-shift { min-height: 60px; font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  body.batch-mode #start-shift, .robot-hit.batch-ready span, .hud-pill.urgent, #result-stars i.on { animation: none !important; }
}
#shift-cards em span { color: var(--gold); }
body.home .robot-hit span, body.pause-card .robot-hit span { visibility: hidden; }
@media (orientation: landscape) { body.batch-mode #batch-hud { right: max(80px, calc(var(--host-safe-right, 0px) + 76px)); max-width: 520px; } }
body.result .hud #pause { display: none; }
.batch-mode .camera-help { display: none; }
#haptics-row[hidden] { display: none; }

/* Twelve shifts: a scrolling strip of level nodes grouped by chapter. */
body.batch-mode #shift-cards {
  max-width: 100%; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; justify-content: flex-start;
  gap: 22px; padding: 26px 30px 24px; margin: -26px 0 -6px; scrollbar-width: none;
}
body.batch-mode #shift-cards::-webkit-scrollbar { display: none; }
body.batch-mode #shift-cards::before { display: none; }
body.batch-mode #shift-cards button { flex: none; scroll-snap-align: center; }
body.batch-mode #shift-cards button:not(:first-child)::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 22px; border-top: 4px dashed #ffffffa0; margin-right: 3px;
}
body.batch-mode #shift-cards button[data-chapter-start]:not(:first-child) { margin-left: 18px; }
body.batch-mode #shift-cards button[data-chapter-start]::after {
  content: attr(data-chapter-name); position: absolute; top: -24px; left: -6px; white-space: nowrap; font-size: 11px;
  font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: var(--pill); padding: 2px 8px; border-radius: 8px;
}
body.batch-mode #shift-cards button.locked { background: linear-gradient(#7c8597, #586173); box-shadow: 0 4px 0 #3b4250; opacity: .85; }
body.batch-mode #shift-cards button.locked b { font-size: 20px; }
.chip.c3 { background: #22BA80; }
body.batch-mode #shift-cards { flex-wrap: nowrap; }
body.pause-card .hud #pause { display: none; }

/* Landscape v2: the HUD lives in side columns so the yard keeps the full
   screen height (a 390 px tall phone used to show it in a 166 px strip).
   yard_camera.js reserves the same space: hudColumn() on the left, the
   button column on the right, and the shift panel on the home screen. */
@media (orientation: landscape) {
  body.batch-mode { --hud-col: clamp(190px, 24vw, 260px); }
  body.batch-mode #batch-hud {
    right: auto; width: var(--hud-col); max-width: none; display: flex; flex-direction: column; gap: 6px;
    left: max(12px, var(--host-safe-left, 0px)); top: max(12px, var(--host-safe-top, 0px));
  }
  body.batch-mode .hud-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.batch-mode .hud-bar { height: 32px; }
  body.batch-mode .hud-bar strong { line-height: 26px; font-size: 15px !important; }
  body.batch-mode #play-dock {
    left: max(12px, var(--host-safe-left, 0px)); right: auto; width: var(--hud-col);
    bottom: max(12px, var(--host-safe-bottom, 0px)); flex-direction: column; align-items: stretch; gap: 8px;
  }
  body.batch-mode #play-dock #batch-tip { max-width: none; font-size: 12px; }
  body.batch-mode #belt-stop { min-width: 0; min-height: 52px; font-size: 15px; }
  /* Home: chapter, title and the shift list share one right-hand panel. */
  body.batch-mode .home-banner {
    left: auto; right: max(0px, var(--host-safe-right, 0px)); width: min(420px, 50%);
    top: max(10px, var(--host-safe-top, 0px));
  }
  body.batch-mode #shift-start h2 { font-size: 30px; margin: 4px 0 0; }
  .ribbon { font-size: 13px; padding: 4px 16px; }
  .home-bottom {
    right: max(0px, var(--host-safe-right, 0px)); padding: 12px 12px max(12px, var(--host-safe-bottom, 0px));
    gap: 8px; background: linear-gradient(90deg, transparent, #0f1d3a8c 22%, #0f1d3aa8);
  }
  body.batch-mode #shift-cards { gap: 16px; padding: 24px 22px 20px; margin: -18px 0 -8px; }
  body.batch-mode #shift-cards button { width: 50px; height: 50px; }
  body.batch-mode #shift-cards button:not(:first-child)::before { width: 16px; }
  #shift-cards b { font-size: 21px; }
  body.batch-mode #shift-start p#shift-description { margin: 4px 0 0; font-size: 13px; padding: 6px 12px; }
  body.batch-mode #start-shift { min-height: 54px; font-size: 26px; width: min(300px, 90%); }
  body.batch-mode #crew-guide summary { min-height: 22px; }
  body.batch-mode .home-top { width: min(300px, calc(50% - 24px)); }
  body.pause-card .home-banner { top: 18%; }
  body.home #batch-hud, body.pause-card #batch-hud { display: none; }
}
/* Short landscape phones: no room for the panel gradient's top padding. */
@media (orientation: landscape) and (max-height: 430px) {
  body.batch-mode .home-banner small { font-size: 10px !important; padding: 3px 10px; }
  body.batch-mode #shift-start h2 { font-size: 26px; }
  .home-bottom { gap: 6px; }
  body.batch-mode #start-shift { min-height: 48px; font-size: 22px; }
  body.batch-mode .hud-pill, body.batch-mode #batch-next, body.batch-mode #batch-target { font-size: 11px; padding: 3px 8px; }
  body.batch-mode .hud-pill.score { font-size: 14px; }
  body.batch-mode #belt-stop { min-height: 46px; font-size: 14px; }
}

/* Settings v2: the dialog matches the chunky game skin instead of a web form. */
body.batch-mode #game-settings {
  width: min(380px, calc(100vw - 32px)); padding: 20px 20px 18px; border: 4px solid #fff; border-radius: 28px;
  color: #fff; background: linear-gradient(#3f9cf5, #2470d0); box-shadow: 0 8px 0 #184e95, 0 20px 50px #0006;
  font-family: Rubik, Roboto, sans-serif;
}
body.batch-mode #game-settings::backdrop { background: #0f1d3a99; }
body.batch-mode #game-settings h2 {
  margin: 0 0 6px; text-align: center; font-size: 26px; font-weight: 900; text-transform: uppercase; text-shadow: 0 3px 0 #184e95;
}
body.batch-mode #game-settings label {
  min-height: 52px; padding: 0 4px; font-size: 17px; font-weight: 800; border-bottom: 2px solid #ffffff26;
}
body.batch-mode #game-settings input[role="switch"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 58px; height: 32px; margin: 0;
  border-radius: 16px; background: #173a6e; border: 2px solid #ffffff90; box-shadow: inset 0 3px 0 #0003; cursor: pointer;
  transition: background .18s;
}
body.batch-mode #game-settings input[role="switch"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 0 #0004; transition: transform .18s;
}
body.batch-mode #game-settings input[role="switch"]:checked { background: linear-gradient(#6fe061, var(--go-dark)); }
body.batch-mode #game-settings input[role="switch"]:checked::after { transform: translateX(26px); }
body.batch-mode #game-settings input[role="switch"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.setting-group { padding: 10px 4px 12px; border-bottom: 2px solid #ffffff26; font-weight: 800; font-size: 17px; }
.setting-group > span { display: block; margin-bottom: 8px; }
.segmented { display: flex; gap: 6px; padding: 4px; border-radius: 16px; background: #173a6e; box-shadow: inset 0 3px 0 #0003; }
.segmented button {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 4px; border: 0; border-radius: 12px; background: none;
  color: #cfe2ff; font: inherit; font-size: 14px; font-weight: 800; line-height: 1.15; cursor: pointer;
}
.segmented button[aria-checked="true"] {
  color: #5a3a00; background: linear-gradient(#ffd75a, var(--gold)); box-shadow: 0 3px 0 var(--gold-edge);
}
.segmented button:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }
.setting-note { margin: 8px 0 0; font-size: 12px !important; font-weight: 600; line-height: 1.35; opacity: .85; }
body.batch-mode #game-settings > button {
  display: block; width: 100%; min-height: 50px; margin-top: 10px; border-radius: 16px; border: 3px solid #ffffffc0;
  font: inherit; font-size: 17px; font-weight: 900; text-transform: uppercase; color: #fff; cursor: pointer;
  background: #ffffff1f; box-shadow: 0 4px 0 #184e95;
}
body.batch-mode #game-settings > button[hidden] { display: none; }
body.batch-mode #game-settings button:active { transform: translateY(3px); }
@media (orientation: landscape) {
  body.batch-mode #game-settings[open] { width: min(660px, calc(100vw - 32px)); padding: 14px 18px; }
  body.batch-mode #game-settings h2 { font-size: 22px; }
  body.batch-mode #game-settings label { min-height: 44px; }
  .setting-group { grid-column: 1 / -1; padding: 6px 4px 8px; }
  .setting-group .segmented button { min-height: 40px; }
  body.batch-mode #game-settings > button { min-height: 44px; margin-top: 8px; }
}
body.batch-mode #game-settings > #camera-reset { display: none; }
@media (orientation: landscape) {
  .setting-group { grid-column: auto; }
  .setting-group .segmented button { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  .setting-note { display: none; }
  body.batch-mode #game-settings[open] { padding: 10px 16px 12px; }
  body.batch-mode #game-settings h2 { font-size: 19px; margin-bottom: 0; }
}

/* ===== Meta v1: stamps, daily shift, missions, boosts, album =====
   Same chunky skin: Rubik Black, raised buttons with a solid bottom edge,
   dark translucent pills, blue gradient cards with a white border. */
.stamp-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; white-space: nowrap; }
.stamp-tag svg { width: 1.15em; height: 1.3em; flex: none; filter: drop-shadow(0 1.5px 0 #0004); }
body.batch-mode .home-top { gap: 6px; }
body.batch-mode .crew-name { display: none; }
@media (min-width: 700px) and (min-height: 700px) { body.batch-mode .crew-name { display: block; } }
.stat-pill.stamps { border: 0; color: #fff; font: inherit; font-weight: 900; font-size: 16px; padding: 4px 6px 4px 8px; cursor: pointer; gap: 6px; }
.stat-pill.stamps .stamp-tag svg { width: 20px; height: 23px; }
.stat-pill.stamps .plus {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; font-style: normal; font-size: 16px; line-height: 1;
  color: #fff; background: linear-gradient(#6fe061, var(--go-dark)); box-shadow: 0 2px 0 var(--go-edge);
}
.stat-pill.stamps.bump { animation: meta-bump .45s cubic-bezier(.3,1.6,.5,1); }
.top-button {
  position: relative; flex: none; width: 46px; height: 46px; padding: 6px; border-radius: 14px; border: 3px solid #fff; cursor: pointer;
  background: linear-gradient(#ffdf7a, var(--gold)); box-shadow: 0 3px 0 var(--gold-edge), 0 5px 12px #0003;
}
.top-button svg { width: 100%; height: 100%; display: block; }
.top-button:active, .side-button:active { transform: translateY(3px); }
.side-badge {
  position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center;
  font-style: normal; font-size: 13px; font-weight: 900; color: #fff; background: #f24458; border: 2px solid #fff; box-shadow: 0 2px 0 #a3243a;
}
.side-badge.dot { min-width: 16px; width: 16px; height: 16px; padding: 0; top: -5px; right: -5px; animation: cl-pulse .8s ease-in-out infinite alternate; }

/* PLAY sits between the daily shift and missions. */
.play-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(420px, 100%); }
body.batch-mode .play-row #start-shift { flex: 1 1 auto; width: auto; min-width: 0; }
.side-button {
  position: relative; flex: none; width: 66px; height: 66px; padding: 4px 0 0; border-radius: 20px; border: 3px solid #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff; font: inherit;
  box-shadow: 0 5px 0 var(--edge, #1c5fb0), 0 8px 16px #0004;
}
.side-button.daily { --edge: #b0361a; background: linear-gradient(#ff9b52, #f2622b); }
.side-button.missions { --edge: #5b2fa8; background: linear-gradient(#a983ff, #7a4ff0); }
.side-button.locked { --edge: #3b4250; background: linear-gradient(#8a93a6, #5d6578); }
.side-icon { position: relative; width: 34px; height: 36px; display: grid; place-items: center; }
.side-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 0 #0003); }
.side-button.locked .side-icon svg { width: 26px; height: 26px; }
.side-icon .streak {
  position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); font-size: 15px; font-weight: 900; color: #fff; line-height: 1;
  -webkit-text-stroke: 3px #b0361a; paint-order: stroke fill;
}
.side-label { font-size: 9.5px; font-weight: 900; letter-spacing: 0; text-transform: uppercase; line-height: 1; text-shadow: 0 1px 0 #0005; white-space: nowrap; }
.side-button.ready:not(.daily) { animation: cl-bob .9s ease-in-out infinite alternate; }
body.pause-card .side-button, body.pause-card #boost-chips, body.pause-card #shift-difficulty, body.pause-card .top-button, body.pause-card .stat-pill.stamps { display: none; }

/* Difficulty and the rush call-out under the description. */
#shift-difficulty {
  display: flex; align-items: center; gap: 8px; margin-top: -4px; padding: 4px 12px; border-radius: 12px; background: var(--pill);
  font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
}
#shift-difficulty[hidden] { display: none; }
#shift-difficulty .pips { display: flex; gap: 3px; }
#shift-difficulty .pips i { width: 14px; height: 8px; border-radius: 3px; background: #ffffff30; }
#shift-difficulty .pips i.on { background: linear-gradient(#ffe27a, var(--gold)); box-shadow: 0 1px 0 var(--gold-edge); }
#shift-difficulty.rush .pips i.on { background: linear-gradient(#ff8a6a, #f24458); box-shadow: 0 1px 0 #a3243a; }
.rush-tag { display: inline-flex; align-items: center; gap: 3px; color: #ffd23f; letter-spacing: .3px; }
.rush-tag svg { width: 14px; height: 14px; }
body.rush-shift .ribbon { background: linear-gradient(#ff8a2b, #e8342f); box-shadow: 0 3px 0 #9c1d1d, 0 0 22px #ff6a2b90; animation: cl-pulse .9s ease-in-out infinite alternate; }
body.rush-shift .home-banner small { background: linear-gradient(#e8342f, #a8201f); }
body.daily-shift .ribbon { background: linear-gradient(#ffb04a, #f2622b); box-shadow: 0 3px 0 #a8401a; }
body.daily-shift .home-banner small { background: linear-gradient(#f2622b, #b0361a); }

/* Boost chips under PLAY. */
#boost-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(420px, 100%); position: relative; }
#boost-chips[hidden] { display: none; }
.boost-chip {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px 4px 4px; border-radius: 15px; cursor: pointer;
  border: 2px solid #ffffff60; background: var(--pill); color: #fff; font: inherit; text-align: left; box-shadow: 0 3px 0 #0004;
}
.boost-chip .boost-icon { width: 34px; height: 34px; }
.boost-text { display: flex; flex-direction: column; line-height: 1.05; }
.boost-text b { font-size: 12px; font-weight: 900; white-space: nowrap; }
.boost-text small { font-size: 11px; font-weight: 800; opacity: .85; }
.boost-text small.gift { color: #ffd23f; opacity: 1; text-transform: uppercase; }
.boost-text small.price .stamp-tag svg { width: 11px; height: 13px; }
.boost-chip.empty { opacity: .78; }
.boost-chip.on { border-color: #fff; background: linear-gradient(#ffdf7a, var(--gold)); color: #5a3a00; box-shadow: 0 3px 0 var(--gold-edge), 0 0 0 3px #ffffff40; }
.boost-chip .tick { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--go); color: #fff; border: 2px solid #fff; display: grid; place-items: center; }
.boost-chip .tick svg { width: 13px; height: 13px; }
.boost-icon { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 2px 0 #0003; }
.boost-icon svg { width: 76%; height: 76%; }
.b-turbo .boost-icon, .boost-icon.b-turbo { background: linear-gradient(#ff9b52, #f2622b); }
.b-stops .boost-icon, .boost-icon.b-stops { background: linear-gradient(#ffe4e6, #ffb9c0); }
.b-calm .boost-icon, .boost-icon.b-calm { background: linear-gradient(#5fd0e8, #1f95b8); }
.coach {
  flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto 2px; padding: 5px 12px;
  border-radius: 12px; font-size: 12.5px; font-weight: 900; color: #5a3a00; background: linear-gradient(#fff3b0, #ffd75a);
  box-shadow: 0 3px 0 var(--gold-edge); width: fit-content; animation: cl-bob .9s ease-in-out infinite alternate;
}
.coach svg { width: 18px; height: 18px; flex: none; }
.coach.muted { color: #fff; background: var(--pill); box-shadow: none; animation: none; font-weight: 800; }

/* Endless shifts on the strip. */
#shift-cards .lock { width: 24px; height: 24px; filter: drop-shadow(0 2px 0 #0003); }
body.batch-mode #shift-cards button.rush:not(.locked) { background: linear-gradient(#ff8a6a, #e8342f); box-shadow: 0 4px 0 #9c1d1d; }
body.batch-mode #shift-cards button.rush.done { background: linear-gradient(#ffd75a, #ff8a2b); box-shadow: 0 4px 0 #b0561a; color: #5a2400; }
body.batch-mode #shift-cards button.wide b { font-size: 18px; }
.rush-badge {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #e8342f; border: 2px solid #fff; box-shadow: 0 2px 0 #9c1d1d; z-index: 2;
}
.rush-badge svg { width: 15px; height: 15px; }
.strip-gap { flex: none; align-self: center; font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #0006; letter-spacing: -2px; margin-left: 8px; }

/* In-play HUD: missed parcels and active boosts. */
.hud-pill.hearts { display: inline-flex; gap: 2px; align-items: center; padding: 3px 7px; }
.hud-pill.hearts[hidden], .hud-pill.boosts[hidden] { display: none; }
.hearts i { display: inline-grid; width: 18px; height: 18px; color: #ffffff30; }
.hearts i.on { color: #ffc531; }
.hearts i svg { width: 100%; height: 100%; }
.hearts i.on svg path:first-child { stroke: #8a5a00; }
.hearts i.lost { animation: meta-lost .6s ease-out; }
.hearts.low { background: #e8542bdd; animation: cl-pulse .8s ease-in-out infinite alternate; }
.hud-pill.boosts { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; color: #ffe9a6; }
.hud-pill.boosts .boost-icon { width: 20px; height: 20px; border-radius: 7px; border-width: 1.5px; }

/* Toast: a chunky pill below the HUD. */
#meta-toast {
  position: absolute; z-index: 30; left: 50%; top: max(118px, calc(var(--host-safe-top, 0px) + 112px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); width: max-content; padding: 6px 12px 6px 8px;
  border-radius: 16px; border: 3px solid #fff; color: #fff; font-weight: 900; font-size: 13px; line-height: 1.2;
  background: linear-gradient(#3f9cf5, #2470d0); box-shadow: 0 4px 0 #184e95, 0 10px 24px #0005; pointer-events: none;
  animation: meta-toast 2.6s ease both; font-family: Rubik, Roboto, sans-serif;
}
#meta-toast[hidden] { display: none; }
#meta-toast.mission { background: linear-gradient(#6fe061, var(--go-dark)); box-shadow: 0 4px 0 var(--go-edge), 0 10px 24px #0005; }
#meta-toast.boost { background: linear-gradient(#ffb04a, #f2622b); box-shadow: 0 4px 0 #a8401a, 0 10px 24px #0005; }
#meta-toast small { display: block; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; opacity: .9; }
#meta-toast > svg, #meta-toast .toast-icon svg, #meta-toast .lock { width: 26px; height: 26px; flex: none; }
#meta-toast .toast-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #ffffff30; flex: none; }
#meta-toast .stamp-tag { font-size: 15px; background: #0003; padding: 3px 8px; border-radius: 10px; }
body.home #meta-toast { top: auto; bottom: max(230px, 34%); }

/* Preparing a generated shift: parcels riding a little belt. */
#meta-preparing { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: #0f1d3a66; animation: meta-fade .25s ease both; }
#meta-preparing[hidden] { display: none; }
.prep-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 26px 18px; border-radius: 26px; border: 4px solid #fff;
  color: #fff; text-align: center; background: linear-gradient(#3f9cf5, #2470d0); box-shadow: 0 8px 0 #184e95, 0 20px 50px #0006;
  font-family: Rubik, Roboto, sans-serif;
}
.prep-card b { font-size: 22px; font-weight: 900; text-transform: uppercase; text-shadow: 0 3px 0 #184e95; }
.prep-card small { font-size: 13px; font-weight: 700; opacity: .9; }
.prep-belt { position: relative; width: 170px; height: 44px; margin-bottom: 6px; border-radius: 12px; overflow: hidden;
  background: repeating-linear-gradient(90deg, #3a4152 0 14px, #262b36 14px 18px); border: 3px solid #ffc23a; animation: meta-belt .5s linear infinite; }
.prep-belt i { position: absolute; top: 9px; width: 22px; height: 20px; border-radius: 4px; border: 2px solid #fff; animation: meta-ride 1.8s linear infinite; }
.prep-belt .c1 { background: var(--red); } .prep-belt .c2 { background: var(--blue); animation-delay: -.6s; } .prep-belt .c3 { background: #22BA80; animation-delay: -1.2s; }

/* Streak milestone: a stamp drops into the album. */
#meta-celebrate { position: absolute; inset: 0; z-index: 45; display: grid; place-items: center; background: #0f1d3aa8; animation: meta-fade .25s ease both; }
#meta-celebrate[hidden] { display: none; }
.celebrate-card { position: relative; display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center; font-family: Rubik, Roboto, sans-serif; }
.celebrate-card .album-stamp { width: 150px; transform: rotate(-6deg); animation: meta-stamp .7s cubic-bezier(.3,1.6,.5,1) both; filter: drop-shadow(0 10px 18px #0007); }
.celebrate-card h2 { margin: 18px 0 4px; font-size: 32px; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 2px #b0361a; paint-order: stroke fill; text-shadow: 0 4px 0 #b0361a; }
.celebrate-card p { margin: 0 0 16px; font-weight: 800; }
.celebrate-card button, .sheet-go, .sheet-done {
  min-width: 200px; min-height: 54px; border-radius: 18px; border: 3px solid #ffffffc0; font: inherit; font-size: 20px; font-weight: 900; text-transform: uppercase; color: #fff;
  background: linear-gradient(#6fe061, var(--go) 55%, var(--go-dark)); box-shadow: 0 5px 0 var(--go-edge); text-shadow: 0 2px 0 var(--go-edge); cursor: pointer;
}
.confetti { position: absolute; inset: -40px; pointer-events: none; }
.confetti i { position: absolute; left: 50%; top: 30%; width: 10px; height: 14px; border-radius: 2px; background: hsl(calc(var(--i) * 40), 90%, 60%);
  animation: meta-confetti 1.4s cubic-bezier(.2,.7,.4,1) both; animation-delay: calc(var(--i) * 18ms); --a: calc(var(--i) * 20deg); }

/* Result: stamps earned and mission progress. */
#result-stamps { margin: 8px 0 2px; }
#result-stamps[hidden], #result-missions[hidden], #share-result[hidden] { display: none !important; }
.stamp-total { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 10px; border-radius: 16px; background: #0f2f6a59; box-shadow: inset 0 2px 0 #0002; }
.stamp-total svg { width: 34px; height: 38px; filter: drop-shadow(0 2px 0 #0005); }
.stamp-total b { font-size: 30px; font-weight: 900; color: #fff; text-shadow: 0 3px 0 #184e95; min-width: 2.2ch; text-align: left; }
.stamp-total small { font-size: 14px; font-weight: 800; opacity: .9; }
.stamp-total.landed { animation: meta-bump .45s cubic-bezier(.3,1.6,.5,1); }
#result-stamps.none .stamp-total { opacity: .8; }
.stamp-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 6px; }
.stamp-lines span { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 9px; background: #ffffff22; }
.stamp-lines b { color: #ffe27a; }
.stamp-note { margin: 6px 0 0 !important; font-size: 12px !important; opacity: .85; }
#result-missions { list-style: none; margin: 10px 0 0; padding: 8px 10px; border-radius: 16px; background: #0f2f6a40; display: grid; gap: 6px; cursor: pointer; text-align: left; }
#result-missions li { display: grid; grid-template-columns: 24px 1fr 54px auto; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; }
#result-missions .m-icon { width: 24px; height: 24px; }
#result-missions .m-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#result-missions .m-bar { height: 8px; }
#result-missions b { font-size: 11.5px; min-width: 30px; text-align: right; }
#result-missions b svg { width: 16px; height: 16px; color: #8ff07f; }
#result-missions li.done .m-text { color: #c9ffbf; }
body.batch-mode #result #share-result { display: flex; align-items: center; justify-content: center; gap: 8px; background: #ffffff26; box-shadow: 0 5px 0 #184e95; }
#share-result svg { width: 20px; height: 20px; }

/* Mission icons and bars, shared by the sheet and the result. */
.m-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #ffffff26; }
.m-icon svg { width: 78%; height: 78%; }
.m-icon.k-relocate { background: #1f95b8; } .m-icon.k-daily { background: #ffe1c7; } .m-icon.k-boost { background: #f2622b; }
.m-bar { position: relative; height: 18px; border-radius: 9px; background: #173a6e; box-shadow: inset 0 2px 0 #0003; overflow: hidden; }
.m-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 9px; background: linear-gradient(#ffe27a, var(--gold)); }
.mission.done .m-bar i, #result-missions li.done .m-bar i { background: linear-gradient(#8ff07f, var(--go-dark)); }
.m-bar span { position: relative; display: block; text-align: center; font-size: 11px; font-weight: 900; line-height: 18px; text-shadow: 0 1px 0 #0006; }

/* One dialog for missions, the daily shift, the boost shop and the album. */
body.batch-mode #meta-sheet, #meta-sheet {
  width: min(400px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px 16px; border: 4px solid #fff; border-radius: 28px; color: #fff; background: linear-gradient(#3f9cf5, #2470d0);
  box-shadow: 0 8px 0 #184e95, 0 20px 50px #0006; font-family: Rubik, Roboto, sans-serif; text-align: center;
}
#meta-sheet::backdrop { background: #0f1d3a99; }
#meta-sheet h2 { margin: 0; font-size: 26px; font-weight: 900; text-transform: uppercase; text-shadow: 0 3px 0 #184e95; }
.sheet-sub { margin: 2px 0 10px; font-size: 12.5px; font-weight: 700; opacity: .9; }
.sheet-sub.small { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 10px 0 0; font-size: 11.5px; opacity: .8; }
.sheet-sub.small svg { width: 14px; height: 14px; }
.sheet-done { display: block; width: 100%; margin-top: 14px; min-height: 52px; font-size: 18px; }
.sheet-go { display: block; width: 100%; margin-top: 12px; font-size: 22px; min-height: 58px; }
.sheet-wallet { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 6px 0 10px; }
.sheet-wallet > .stamp-tag { font-size: 18px; padding: 4px 12px; border-radius: 12px; background: var(--pill); }
.album-count { font-size: 14px; font-weight: 900; padding: 5px 12px; border-radius: 12px; background: var(--pill); }
.mission-list, .shop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.mission, .shop-list li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 18px; background: #ffffff1f; border: 2px solid #ffffff2a;
}
.mission.claimed { opacity: .65; }
.mission.done:not(.claimed) { background: #ffffff33; border-color: #ffe27a; }
.m-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.m-body b { font-size: 14px; font-weight: 900; line-height: 1.15; }
.m-body small { font-size: 11.5px; font-weight: 700; opacity: .85; line-height: 1.2; }
.m-tier { font-size: 10px !important; font-weight: 900 !important; letter-spacing: 1px; text-transform: uppercase; opacity: 1 !important; color: #bfe0ff; }
.t-medium .m-tier { color: #ffe27a; } .t-hard .m-tier { color: #ffb0a0; }
.m-state { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; font-size: 14px; }
.m-state.claimed { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--go); border: 2px solid #fff; }
.m-state.claimed svg { width: 20px; height: 20px; color: #fff; }
.m-claim {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 76px; min-height: 48px; padding: 4px 8px; border-radius: 14px;
  border: 2px solid #fff; font: inherit; font-size: 13px; font-weight: 900; text-transform: uppercase; color: #5a3a00; cursor: pointer;
  background: linear-gradient(#ffdf7a, var(--gold)); box-shadow: 0 4px 0 var(--gold-edge); animation: cl-breathe 1.2s ease-in-out infinite;
}
.m-claim:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-edge); }
.m-reroll { width: 30px; height: 30px; padding: 5px; border-radius: 10px; border: 2px solid #ffffffa0; background: #ffffff26; color: #fff; cursor: pointer; }
.m-reroll svg { width: 100%; height: 100%; }
.sheet-bonus { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border-radius: 14px; background: #0f2f6a59; font-size: 13px; font-weight: 800; text-align: left; }
.sheet-bonus svg { width: 26px; height: 26px; flex: none; }
.sheet-bonus span { flex: 1; }
.sheet-bonus b { font-size: 15px; }
.sheet-bonus.got svg { color: #8ff07f; }
.streak-hero { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 10px; text-align: left; }
.flame-big { position: relative; width: 74px; height: 82px; flex: none; }
.flame-big svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 0 #0003); animation: meta-flicker 1.6s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.flame-big b { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 26px; font-weight: 900; -webkit-text-stroke: 4px #b0361a; paint-order: stroke fill; }
.streak-hero > div { display: grid; gap: 2px; }
.streak-hero > div b { font-size: 19px; font-weight: 900; }
.streak-hero > div small { font-size: 12.5px; font-weight: 700; opacity: .85; }
.freeze-row { display: flex; gap: 4px; margin-top: 3px; }
.freeze-row i { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: #0f2f6a80; opacity: .45; }
.freeze-row i.on { opacity: 1; background: linear-gradient(#6fc6ff, #2a74d6); border: 2px solid #fff; }
.freeze-row svg { width: 16px; height: 16px; }
.week { list-style: none; display: flex; justify-content: space-between; gap: 4px; margin: 0 0 10px; padding: 8px; border-radius: 16px; background: #0f2f6a59; }
.week li { display: grid; justify-items: center; gap: 3px; flex: 1; font-size: 10.5px; font-weight: 900; opacity: .8; }
.week li i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #ffffff1f; border: 2px solid #ffffff40; color: #fff; }
.week li i svg { width: 18px; height: 18px; }
.week li.done { opacity: 1; } .week li.done i { background: linear-gradient(#ff9b52, #f2622b); border-color: #fff; }
.week li.today { opacity: 1; } .week li.today i { border: 3px solid var(--gold); box-shadow: 0 0 0 3px #ffc53140; }
.week li.future { opacity: .45; }
.sheet-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0; font-size: 13px; font-weight: 800; line-height: 1.3; }
.sheet-note.reward { padding: 8px 12px; border-radius: 14px; background: #ffffff26; }
.sheet-note.reward .stamp-tag { font-size: 18px; color: #ffe27a; }
.sheet-note.freeze { font-size: 12px; font-weight: 700; opacity: .9; text-align: left; }
.sheet-note.freeze svg { width: 22px; height: 22px; flex: none; }
.shop-list .owned { font-size: 15px; font-weight: 900; padding: 4px 8px; border-radius: 10px; background: #0f2f6a59; }
.shop-list .boost-icon { width: 44px; height: 44px; border-radius: 14px; border-width: 3px; }
.buy, .paste {
  flex: none; min-width: 74px; min-height: 44px; padding: 4px 10px; border-radius: 14px; border: 2px solid #fff; font: inherit; font-size: 16px; font-weight: 900; color: #fff; cursor: pointer;
  background: linear-gradient(#6fe061, var(--go-dark)); box-shadow: 0 4px 0 var(--go-edge); text-shadow: 0 1px 0 var(--go-edge);
}
.buy:disabled, .paste:disabled { filter: grayscale(.8); opacity: .6; box-shadow: 0 2px 0 #0004; }
.buy:active:not(:disabled), .paste:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--go-edge); }
.album-grid { list-style: none; margin: 0; padding: 12px 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; border-radius: 18px;
  background: #fff6dc; box-shadow: inset 0 3px 0 #0001; color: #5a3a00; }
.album-grid li { position: relative; display: grid; justify-items: center; gap: 4px; align-content: start; }
.album-grid li:nth-child(3n+1) .album-stamp { transform: rotate(-3deg); } .album-grid li:nth-child(3n) .album-stamp { transform: rotate(2.5deg); }
.album-stamp { width: 100%; max-width: 100px; filter: drop-shadow(0 3px 2px #0003); }
.album-stamp.open { filter: drop-shadow(0 3px 2px #0003) saturate(.55) brightness(1.05); }
.album-stamp.locked { filter: grayscale(1) brightness(1.15) opacity(.4); }
.album-lock { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: #5d6578; box-shadow: 0 2px 0 #3b4250; }
.album-lock svg { width: 100%; height: 100%; }
.album-grid small { font-size: 10.5px; font-weight: 800; line-height: 1.15; text-align: center; color: #7a5a2a; }
.album-grid .pasted { display: inline-flex; align-items: center; gap: 3px; color: #2a9a26; }
.album-grid .pasted svg { width: 13px; height: 13px; }
.album-grid .paste { min-width: 0; min-height: 34px; padding: 2px 8px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; }
.album-grid .paste .stamp-tag svg { width: 12px; height: 14px; }

@keyframes meta-bump { 40% { transform: scale(1.18); } }
@keyframes meta-lost { 0% { transform: scale(1.6); color: #f24458; } }
@keyframes meta-toast { 0% { opacity: 0; transform: translate(-50%, -14px) scale(.9); } 8%, 88% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -8px); } }
@keyframes meta-fade { from { opacity: 0; } }
@keyframes meta-belt { to { background-position: 18px 0; } }
@keyframes meta-ride { from { left: -26px; } to { left: 176px; } }
@keyframes meta-stamp { from { transform: rotate(-30deg) scale(2.4); opacity: 0; } }
@keyframes meta-flicker { to { transform: scale(1.05, .96) rotate(1.5deg); } }
@keyframes meta-confetti { from { transform: translate(-50%, 0) rotate(0); opacity: 1; } to { transform: translate(calc(-50% + cos(var(--a)) * 170px), calc(sin(var(--a)) * 150px + 120px)) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .coach, .m-claim, .side-badge.dot, .side-button.ready, body.rush-shift .ribbon, .flame-big svg, .prep-belt, .prep-belt i, .confetti i,
  .hearts.low, #meta-toast, .celebrate-card .album-stamp { animation: none !important; }
}
@media (max-width: 370px) {
  .side-button { width: 58px; height: 60px; border-radius: 18px; }
  .side-icon { width: 30px; height: 32px; }
  .side-label { font-size: 9.5px; }
  .play-row { gap: 8px; }
  .boost-chip { padding-right: 7px; gap: 4px; }
  .boost-chip .boost-icon { width: 30px; height: 30px; }
  .boost-text b { font-size: 11px; }
  .stat-pill.stamps { font-size: 15px; }
}
@media (orientation: landscape) {
  body.batch-mode .home-top { width: auto; max-width: calc(50% - 24px); }
  .side-button { width: 56px; height: 56px; border-radius: 17px; }
  .side-icon { width: 28px; height: 30px; }
  .side-label { font-size: 9.5px; }
  #boost-chips { gap: 6px; }
  .boost-chip { min-height: 38px; padding: 2px 8px 2px 3px; }
  .boost-chip .boost-icon { width: 28px; height: 28px; }
  #meta-toast { top: auto; left: max(12px, var(--host-safe-left, 0px)); transform: none; bottom: max(150px, calc(var(--host-safe-bottom, 0px) + 140px)); max-width: var(--hud-col, 240px); width: auto; animation-name: meta-toast-side; }
  body.home #meta-toast { left: auto; right: max(16px, var(--host-safe-right, 0px)); bottom: auto; top: max(14px, var(--host-safe-top, 0px)); max-width: min(380px, 46%); }
  body.batch-mode #meta-sheet[open] { width: min(640px, calc(100vw - 24px)); padding: 10px 16px 10px; }
  .mission, .shop-list li { padding: 5px 10px; }
  .mission-list, .shop-list { gap: 6px; }
  .m-icon { width: 34px; height: 34px; }
  .m-bar { height: 15px; } .m-bar span { line-height: 15px; }
  .m-claim { min-height: 42px; }
  .sheet-sub { margin-bottom: 6px; }
  .sheet-bonus { margin-top: 6px; padding: 5px 12px; }
  .sheet-daily[open] { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: start; }
  .sheet-daily h2, .sheet-daily .sheet-sub:first-of-type { grid-column: 1 / -1; }
  .sheet-daily .streak-hero, .sheet-daily .week { grid-column: 1; }
  .sheet-daily .sheet-note, .sheet-daily .sheet-sub.small, .sheet-daily .sheet-go { grid-column: 2; }
  .sheet-daily .sheet-done { grid-column: 1 / -1; min-height: 44px; margin-top: 10px; }
  .sheet-daily .streak-hero { grid-row: 3 / span 2; }
  .sheet-missions .mission-list { grid-template-columns: 1fr; }
  .sheet-album .album-grid { grid-template-columns: repeat(6, 1fr); }
  .sheet-done { min-height: 44px; margin-top: 10px; }
  #meta-sheet h2 { font-size: 22px; }
}
@keyframes meta-toast-side { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
#meta-sheet small, #result small, .boost-chip small { letter-spacing: normal; }
.sheet-daily .sheet-done { background: #ffffff1f; box-shadow: 0 4px 0 #184e95; text-shadow: none; }
#meta-sheet button:focus { outline: none; }
#meta-sheet button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.album-grid .paste { flex-direction: column; gap: 0; min-height: 40px; padding: 2px 10px 3px; font-size: 10.5px; line-height: 1.1; }
.album-grid .paste .stamp-tag { font-size: 13px; }
/* Review fixes: two-line mission names, compact large miss counts, labels
   that stay inside their buttons and the strip. */
#result-missions .m-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.hud-pill.hearts { max-width: 100%; white-space: nowrap; }
.hearts b { margin-left: 4px; font-size: 12px; font-weight: 900; color: #ffe27a; }
.side-label { max-width: calc(100% - 6px); overflow: hidden; text-overflow: clip; }
@media (orientation: landscape) { .side-label { font-size: 8.5px; letter-spacing: -.2px; } }
body.batch-mode #shift-cards { padding-inline-end: 130px; }
#meta-sheet h2:focus { outline: none; }
.sheet-note.freeze.broken { color: #ffd0c4; }
/* Portrait keeps the HUD at its old height: hearts sit beside the score,
   boost icons beside the upcoming parcels. */
@media (orientation: portrait) {
  .hearts i { width: 14px; height: 14px; }
  .hud-pill.hearts { padding: 5px 7px; }
  .hud-pill.boosts > span:not(.boost-icon) { display: none; }
  .hud-pill.boosts { padding: 3px 4px; }
  body:not(.home):not(.result) #meta-toast { top: auto; bottom: max(96px, calc(var(--host-safe-bottom, 0px) + 90px)); }
  body.result #meta-toast { top: auto; bottom: max(14px, var(--host-safe-bottom, 0px)); }
}
@media (orientation: landscape) {
  #meta-toast { width: var(--hud-col, 240px); }
  body.home #meta-toast { width: auto; }
}
/* Landscape result: score and rewards on the left, missions and the way on
   at the right, so nothing scrolls on a 375 px tall phone. */
@media (orientation: landscape) and (max-height: 600px) {
  body.batch-mode #result:not([hidden]) {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: center;
    width: min(760px, calc(100% - 150px)); padding: 14px 18px; max-height: calc(100% - 20px);
  }
  body.batch-mode.result-won #result-stars { margin: -4px 0 0; }
  #result-stars i { width: 46px; height: 46px; font-size: 44px; }
  #result-stars i:nth-child(2) { transform: translateY(-8px) scale(1.15); }
  body.batch-mode #result h2 { font-size: 22px; margin: 2px 0; }
  #result-score { font-size: 28px; }
  body.batch-mode #result p { margin: 6px 0 0; font-size: 12px; }
  #result-missions { margin-top: 0; }
  body.batch-mode #result button { min-height: 48px; font-size: 18px; margin-top: 8px; }
  .stamp-total b { font-size: 26px; }
  #result-missions li { grid-template-columns: 22px 1fr auto; }
  #result-missions .m-bar { display: none; }
}
@media (orientation: landscape) and (max-height: 430px) {
  body.batch-mode #result button { font-size: 16px; min-height: 46px; }
  body.batch-mode #result h2 { font-size: 20px; }
}
/* Rules list: short labels ("Помощник", "Express") need a wider first column. */
.crew-member { grid-template-columns: 86px 1fr; }

/* ===== Coach v1: first-run coach marks (yard_coach.js) =====
   A dimmed screen with a soft spotlight, a blue card with the game's white
   border and raised button, a cartoon glove that taps or drags, and a dotted
   arrow. Only the spotlight passes taps through; dialogs stay above it. */
#coach { position: fixed; inset: 0; z-index: 60; pointer-events: none; font-family: Rubik, Roboto, sans-serif; }
#coach[hidden] { display: none; }
#coach.leaving { animation: coach-out .26s ease both; }
.coach-safe { position: absolute; visibility: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.coach-spot {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; will-change: transform;
  box-shadow: 0 0 0 3px #ffffffa6, 0 0 22px 300vmax #0a1430a0;
  transition: width .45s cubic-bezier(.2,.9,.3,1.15), height .45s cubic-bezier(.2,.9,.3,1.15), border-radius .45s ease, opacity .3s ease;
}
.coach-spot::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 3px solid #fff;
  animation: coach-ring 1.5s ease-out infinite;
}
#coach.no-hole .coach-spot { box-shadow: 0 0 0 300vmax #0a1430a0; }
#coach.no-hole .coach-spot::after { display: none; }
#coach.entering .coach-spot { opacity: 0; }
.coach-block, .coach-catch { position: absolute; pointer-events: auto; touch-action: none; }
.coach-catch { inset: 0; display: none; }
#coach.info .coach-catch { display: block; }
.coach-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.coach-arrow, .coach-arrow-under, .coach-head, .coach-goal { display: none; }
#coach.arrowed .coach-arrow, #coach.arrowed .coach-arrow-under, #coach.arrowed .coach-head { display: inline; }
.coach-arrow-under { fill: none; stroke: #1d2940; stroke-width: 11; stroke-linecap: round; stroke-dasharray: .1 16; opacity: .55; animation: coach-march .8s linear infinite; }
.coach-arrow { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-dasharray: .1 16; animation: coach-march .8s linear infinite; }
.coach-head { fill: #fff; stroke: #1d2940; stroke-width: 3; stroke-linejoin: round; }
#coach.goaled .coach-goal { display: inline; fill: #ffffff40; stroke: #fff; stroke-width: 3; stroke-dasharray: 7 6; transform-box: fill-box; transform-origin: center; animation: coach-goal 1.2s ease-in-out infinite alternate; }

/* The card. */
.coach-card {
  position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 15px 16px 10px 62px; border: 4px solid #fff; border-radius: 24px;
  color: #fff; background: linear-gradient(#45a4ff, #2470d0); box-shadow: 0 6px 0 #184e95, 0 16px 34px #0007; pointer-events: auto;
  will-change: transform; text-align: left;
}
.coach-card.pop .coach-text, .coach-card.pop .coach-foot { animation: coach-pop .38s cubic-bezier(.3,1.5,.5,1) both; }
.coach-card::before {
  content: ""; position: absolute; width: 18px; height: 18px; background: #45a4ff; border: 4px solid #fff; border-width: 4px 0 0 4px;
  display: none; border-radius: 4px 0 0 0;
}
.coach-card[data-tail="below"]::before { display: block; top: -13px; left: calc(var(--tail) - 13px); transform: rotate(45deg); }
.coach-card[data-tail="above"]::before { display: block; bottom: -13px; left: calc(var(--tail) - 13px); transform: rotate(225deg); background: #2470d0; }
.coach-card[data-tail="right"]::before { display: block; left: -13px; top: calc(var(--tail) - 13px); transform: rotate(-45deg); }
.coach-card[data-tail="left"]::before { display: block; right: -13px; top: calc(var(--tail) - 13px); transform: rotate(135deg); }
.coach-avatar {
  position: absolute; left: -10px; top: -14px; width: 60px; height: 60px; border-radius: 19px; border: 4px solid #fff; overflow: hidden;
  background: linear-gradient(#ffdf7a, #ffc531); box-shadow: 0 4px 0 #c98a0c, 0 6px 14px #0004; transform: rotate(-6deg);
}
.coach-avatar img { width: 124%; margin: 0 -12%; display: block; }
.coach-text { margin: 0; font-size: 17.5px; line-height: 1.25; font-weight: 800; text-shadow: 0 2px 0 #184e95; text-wrap: balance; }
.coach-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 10px; }
.coach-dots { display: flex; gap: 5px; flex: 1; }
.coach-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ffffff45; }
.coach-dots i.on { background: #fff; }
.coach-dots i.now { background: var(--gold, #ffc531); box-shadow: 0 0 0 3px #ffc53150; width: 20px; border-radius: 6px; }
.coach-turn { display: none; font-size: 12.5px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: #5a3a00; background: linear-gradient(#fff3b0, #ffd75a);
  padding: 5px 10px; border-radius: 10px; box-shadow: 0 3px 0 #c98a0c; }
#coach.action .coach-turn:not(:empty) { display: inline-block; animation: cl-bob .9s ease-in-out infinite alternate; }
.coach-next {
  display: none; min-width: 112px; min-height: 46px; padding: 0 18px; border-radius: 16px; border: 3px solid #ffffffc0; font: inherit;
  font-size: 18px; font-weight: 900; text-transform: uppercase; color: #fff; cursor: pointer; text-shadow: 0 2px 0 #1d6f1b;
  background: linear-gradient(#6fe061, #45c93b 55%, #2a9a26); box-shadow: 0 5px 0 #1d6f1b;
}
#coach.info .coach-next { display: block; }
.coach-next:active { transform: translateY(4px); box-shadow: 0 1px 0 #1d6f1b; }
.coach-next:focus { outline: none; }
.coach-next:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.coach-skip {
  display: block; margin: 6px 0 0 -2px; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700;
  color: #ffffffb8; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 30px;
}
.coach-skip[hidden] { display: none; }

/* The glove and its tap ripple. */
.coach-hand { position: absolute; left: 0; top: 0; width: 64px; height: 80px; will-change: transform; transform-origin: 25px 5px; filter: drop-shadow(0 6px 6px #0006); }
.coach-hand[hidden] { display: none; }
.coach-glove { width: 100%; height: 100%; transform-origin: 25px 5px; transform: rotate(-14deg); transition: transform .12s ease; }
.coach-glove svg { width: 100%; height: 100%; display: block; }
#coach.tapping .coach-glove { animation: coach-tap 1.4s ease-in-out infinite; transition: none; }
.coach-ripple { position: absolute; left: 0; top: 0; width: 0; height: 0; display: none; }
#coach.tapping .coach-ripple { display: block; }
.coach-ripple i { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; border: 4px solid #fff; opacity: 0; animation: coach-ripple 1.4s ease-out infinite; }
.coach-ripple i + i { animation-delay: .18s; }
#coach.nudge .coach-hand, #coach.nudge .coach-turn { animation: coach-nudge .4s ease; }

@keyframes coach-out { to { opacity: 0; } }
@keyframes coach-pop { from { opacity: 0; transform: translateY(6px) scale(.94); } }
@keyframes coach-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.18); opacity: 0; } }
@keyframes coach-march { to { stroke-dashoffset: -16.1; } }
@keyframes coach-goal { to { transform: scale(1.14); } }
@keyframes coach-tap {
  0%, 18% { transform: translate(14px, 18px) rotate(-14deg) scale(1); }
  42% { transform: translate(0, 0) rotate(-14deg) scale(1); }
  52% { transform: translate(0, 2px) rotate(-14deg) scale(.86); }
  64% { transform: translate(0, 0) rotate(-14deg) scale(1); }
  100% { transform: translate(14px, 18px) rotate(-14deg) scale(1); }
}
@keyframes coach-ripple { 0%, 48% { transform: scale(.3); opacity: 0; } 52% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes coach-nudge { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
@media (orientation: landscape) and (max-height: 430px) {
  .coach-card { padding: 12px 14px 8px 60px; }
  .coach-text { font-size: 16px; }
  .coach-avatar { width: 56px; height: 56px; }
  .coach-next { min-height: 40px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .coach-spot { transition: none; }
  .coach-spot::after, .coach-arrow, .coach-arrow-under, #coach.goaled .coach-goal, #coach.tapping .coach-glove,
  .coach-ripple i, .coach-card.pop .coach-text, .coach-card.pop .coach-foot, #coach.action .coach-turn:not(:empty), #coach.leaving { animation: none !important; }
  #coach.tapping .coach-ripple { display: none; }
}

/* Rules sheet button on home (replaces the old expander). */
body.batch-mode #rules-button {
  margin: 0; padding: 4px 10px; min-height: 30px; border: 0; background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 800;
  opacity: .92; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
body.batch-mode #rules-button[hidden] { display: none; }
@media (orientation: landscape) { body.batch-mode #rules-button { min-height: 22px; padding: 2px 8px; } }
.rules-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; text-align: left; }
.rules-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 16px; background: #ffffff1f; border: 2px solid #ffffff2a; }
.rules-list .m-icon { width: 38px; height: 38px; }
.rules-list .m-icon.k-helper { background: linear-gradient(#ffdf7a, #ffc531); }
.rules-list .m-icon.k-stops { background: #ffe4e6; }
.rules-list .m-icon.k-bridge { background: #8fd0ff; }
.rules-list .m-icon.k-urgent, .rules-list .m-icon.k-parcels { background: #fff3d6; }
.sheet-replay {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin-top: 12px; border-radius: 16px;
  border: 3px solid #ffffffc0; font: inherit; font-size: 16px; font-weight: 900; text-transform: uppercase; color: #5a3a00; cursor: pointer;
  background: linear-gradient(#ffdf7a, var(--gold)); box-shadow: 0 4px 0 var(--gold-edge);
}
.sheet-replay svg { width: 22px; height: 22px; }
.sheet-replay:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-edge); }
@media (orientation: landscape) {
  .sheet-rules .rules-list { grid-template-columns: 1fr 1fr; gap: 6px; }
  .rules-list li { padding: 5px 8px; }
  .rules-list .m-icon { width: 32px; height: 32px; }
  .sheet-replay { min-height: 42px; margin-top: 8px; }
}

/* ===================== UX pass v1 — workstream sections =====================
   docs/design/ux-pass-v1.md. Each workstream writes new rules only inside its
   own section so parallel branches merge cleanly. */

/* --- A: hands & marks (robot badges, press/drag feedback, cause-effect) --- */
/* Robot hit area: covers the courier's body, sized in JS to at least 52 px. */
body.batch-mode .robot-hit { width: 52px; height: 52px; border-radius: 50%; -webkit-tap-highlight-color: transparent; outline: none; }
body.batch-mode .robot-hit:focus-visible { outline: 3px solid #fff6ac; outline-offset: 2px; }
body.batch-mode .robot-hit > span { display: none; }
body.home .robot-hit .rtag, body.pause-card .robot-hit .rtag { visibility: hidden; }

/* Tag: [colour token][three load cells], deadline ring apart at the corner. */
.rtag {
  /* Placement is `translate` (slot + neighbour nudge); `transform` is left
     free for the press/shake/bob animations so they never undo centring. */
  position: absolute; left: 50%; bottom: calc(100% - 6px); translate: calc(-50% + var(--shift, 0px)) var(--lift, 0px);
  display: flex; flex-wrap: nowrap; width: max-content; align-items: center; gap: 4px; padding: 3px 7px 3px 3px;
  background: var(--panel); border: 2px solid #ffffffd9; border-radius: var(--r-pill);
  box-shadow: 0 3px 0 #00000038; transition: transform var(--t-quick) var(--ease-out), opacity var(--t-quick);
  pointer-events: auto;
}
.rtag > i { font-style: normal; }
.rt-token { display: block; position: relative; width: 24px; height: 24px; border-radius: 50%; padding: 2px; background: #fff; flex: none; }
.rt-token b {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--tok, #888); box-shadow: inset 0 -2px 0 #00000030;
}
.rt-token .glyph { width: 14px; height: 14px; fill: #fff; stroke: #00000040; stroke-width: 1.2px; paint-order: stroke; }
/* Helper: the current colour inside a ring of every colour, plus ⇄. */
.rt-token.helper { padding: 3px; background: conic-gradient(#f24458 0 120deg, #238aee 0 240deg, #3fbf4a 0); }
.rt-swap {
  display: none; position: absolute; right: -6px; bottom: -5px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; color: var(--ink); font: 900 10px/14px Rubik, sans-serif; text-align: center; font-style: normal;
  box-shadow: 0 1px 0 #0004;
}
.rt-token.helper .rt-swap { display: block; }
.rt-token.swap b { animation: rt-swap var(--t-quick) var(--ease-out); }
@keyframes rt-swap { 0% { transform: scale(1); } 45% { transform: scale(.35) rotate(-90deg); } 100% { transform: scale(1); } }
.rt-load { display: flex; gap: 2px; }
.rt-load u { display: block; width: 7px; height: 13px; border-radius: 2px; background: #ffffff33; box-shadow: inset 0 0 0 1px #ffffff40; }
.rt-load u.on { background: #fff; box-shadow: 0 1px 0 #00000040; }
.rt-load u.fill { animation: rt-fill .4s var(--ease-pop); }
@keyframes rt-fill { 0% { transform: scale(1.9, 1.5); } 100% { transform: none; } }
.rtag.full { background: var(--go); border-color: #fff; box-shadow: 0 3px 0 var(--go-edge); animation: cl-bob .9s ease-in-out infinite alternate; }
.rtag.loaded { border-color: #fff; }
.rtag.away { opacity: .6; transform: scale(.86); }
/* Deadline: a small ring that empties, not text in the same row. */
.rt-clock { position: absolute; top: -13px; right: -15px; width: 24px; height: 24px; border-radius: 50%; background: var(--panel-solid); box-shadow: 0 2px 0 #0004; }
.rt-clock[hidden] { display: none; }
.rt-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rt-clock circle { fill: none; stroke-width: 3.2; }
.rt-clock .bg { stroke: #ffffff30; }
.rt-clock .fg { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.rt-clock s { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; color: #fff; font: 900 10px/1 Rubik, sans-serif; font-variant-numeric: tabular-nums; }
.rt-clock.hot .fg { stroke: #ff8a2b; }
.rt-clock.hot { animation: cl-pulse .5s ease-in-out infinite alternate; }
.rt-clock.late .fg { stroke: #f24458; }
.rt-clock.late { background: #f24458; }
/* Short flag over a tag: "FULL", or ✕ / … for a tap that cannot act. */
.rt-flag {
  position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%) scale(0); opacity: 0;
  padding: 2px 7px; border-radius: var(--r-pill); border: 2px solid #fff; white-space: nowrap;
  font: 900 11px/16px Rubik, sans-serif; letter-spacing: .4px; color: #fff; background: var(--panel-solid);
  box-shadow: 0 2px 0 #0005; pointer-events: none;
}
.rt-flag.show { opacity: 1; transform: translateX(-50%) scale(1); transition: transform var(--t-quick) var(--ease-pop), opacity var(--t-quick); }
.rt-flag.full { background: var(--go-dark); }
.rt-flag.no { min-width: 24px; text-align: center; background: #5b6474; }

/* Press (P0.1): 120–180 ms squeeze plus a ring, the same on every robot. */
.rt-press { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #fff; opacity: 0; pointer-events: none; }
.robot-hit.pressed .rt-press { animation: rt-ring calc(var(--t-press) * 1.25) ease-out both; }
.robot-hit.pressed .rtag { animation: rt-press var(--t-press) ease-out; }
@keyframes rt-ring { from { opacity: .95; transform: scale(.55); } to { opacity: 0; transform: scale(1.08); } }
@keyframes rt-press { 50% { transform: scale(.84); } }
body.reduce-motion .robot-hit.pressed .rt-press { animation: none; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .robot-hit.pressed .rt-press { animation: none; opacity: .9; } }
/* Dragging: lifted tag with a gold edge; the steady ring is in the scene. */
.robot-hit.dragging .rtag { transform: translateY(-6px) scale(1.08); border-color: var(--gold); }
/* Soft refusal: a short shake. */
.robot-hit.nope .rtag { animation: rt-nope .36s ease-in-out; }
@keyframes rt-nope { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* Callouts pinned to the yard: drop refusals, confirmations, returns, +1. */
#marks { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.callout {
  position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 900 13px/1 Rubik, sans-serif; color: #fff; animation: rt-life var(--life) ease-out both;
}
@keyframes rt-life { 0% { opacity: 0; } 8%, 75% { opacity: 1; } 100% { opacity: 0; } }
.callout.reject { padding: 5px 10px 5px 5px; border-radius: var(--r-pill); background: var(--panel-solid); border: 2px solid #fff; box-shadow: 0 3px 0 #0005; }
.callout.reject b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f24458; font-size: 13px; }
.callout.reject { animation: rt-life var(--life) ease-out both, rt-shake .4s ease-in-out; }
@keyframes rt-shake { 20% { margin-left: -6px; } 40% { margin-left: 6px; } 60% { margin-left: -4px; } 80% { margin-left: 2px; } }
.callout.confirm b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--go); border: 2px solid #fff; box-shadow: 0 3px 0 var(--go-edge); font-size: 15px; animation: cl-pop var(--t-quick) var(--ease-pop); }
.callout.pick { margin-left: 34px; font-size: 15px; color: var(--gold); text-shadow: 0 2px 0 #1b2740, 0 0 3px #1b2740; animation: rt-rise var(--life) ease-out both; }
@keyframes rt-rise { 0% { opacity: 0; margin-top: 4px; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; margin-top: -22px; } }
.callout.return { padding: 4px 10px 4px 6px; border-radius: var(--r-pill); background: var(--panel-solid); border: 2px solid #fff; box-shadow: 0 3px 0 #0005; }
.callout.return b { font-size: 16px; }
.callout.return .glyph { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.4px; paint-order: stroke; }
.callout.return.c1 .glyph { fill: #f24458; } .callout.return.c2 .glyph { fill: #238aee; } .callout.return.c3 .glyph { fill: #3fbf4a; }
.callout.return.c4 .glyph { fill: #ffc531; } .callout.return.c5 .glyph { fill: #9b5de5; } .callout.return.c6 .glyph { fill: #ff8a2b; }
body.home #marks, body.pause-card #marks { display: none; }
/* Tag slots, picked in main.js positionSlots by how much belt each covers. */
body.batch-mode .robot-hit.tag-below .rtag { bottom: auto; top: calc(100% - 6px); }
body.batch-mode .robot-hit.tag-right .rtag { bottom: auto; top: calc(50% - 17px); left: calc(100% - 2px); translate: var(--shift, 0px) var(--lift, 0px); }
body.batch-mode .robot-hit.tag-left .rtag { bottom: auto; top: calc(50% - 17px); left: auto; right: calc(100% - 2px); translate: var(--shift, 0px) var(--lift, 0px); }
/* Belt wraps the courier on every side: parcels show through the tag. */
body.batch-mode .robot-hit.tag-dim .rtag { opacity: .62; }
body.batch-mode .robot-hit.tag-dim.dragging .rtag, body.batch-mode .robot-hit.tag-dim .rtag.full { opacity: 1; }
/* --- end A --- */

/* --- B: frame & HUD (camera variants, in-play HUD, settings additions) --- */
/* In-play HUD (P1.2). Portrait: the shift bar beside pause/settings, then
   score + star track, then the next three parcels. yard_camera.js hudTop()
   mirrors the height (bar 40 + 2 rows of 34 + gaps). Fixed slots and
   tabular figures: nothing moves when numbers change. */
body.batch-mode #batch-hud {
  right: max(12px, var(--host-safe-right, 0px)); gap: var(--sp-2); font-variant-numeric: tabular-nums;
}
body.batch-mode #batch-hud .hud-bar { margin-right: 116px; height: 40px; }
body.batch-mode #batch-hud .hud-bar strong { line-height: 34px; }
body.batch-mode #batch-hud .hud-row { flex-wrap: nowrap; gap: var(--sp-2); min-height: 34px; align-items: stretch; }
body.batch-mode #batch-hud .hud-pill { display: inline-flex; align-items: center; white-space: nowrap; }
body.batch-mode #batch-hud .hud-pill[hidden] { display: none; }
body.batch-mode #batch-score.hud-pill.score { min-width: 80px; flex: none; font-size: 18px; padding: 0 10px; border-radius: var(--r-m); }
.star-track {
  position: relative; flex: 1 1 auto; min-width: 84px; max-width: 220px; border-radius: var(--r-m);
  background: var(--panel); border: 1px solid var(--pill-line);
}
.star-track::before, .star-track .track-fill {
  content: ""; position: absolute; left: 10px; bottom: 7px; height: 8px; border-radius: var(--r-pill);
}
.star-track::before { right: 10px; background: #ffffff2e; }
.star-track .track-fill {
  width: calc((100% - 20px) * var(--fill, 0)); background: linear-gradient(#ffe27a, var(--gold));
  transition: width var(--t-move) var(--ease-out);
}
.star-track .tick {
  position: absolute; left: calc(10px + (100% - 20px) * var(--at)); bottom: 4px; width: 3px; height: 14px; margin-left: -1.5px;
  border-radius: 2px; background: #ffffffb0;
}
.star-track .tick span {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 11px; line-height: 1;
  letter-spacing: -1px; color: #ffffff9a; white-space: nowrap;
}
.star-track .tick.on { background: var(--gold); }
.star-track .tick.on span { color: var(--gold); text-shadow: 0 1px 0 #0006; }
body.batch-mode #batch-hud .hearts { margin-left: auto; }
/* Next parcels: colour token + shape glyph (yard_palette colorGlyphs), the
   next one a little larger. Express parcels carry a gold ring and a clock. */
body.batch-mode #batch-next { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: var(--r-m); flex: none; }
body.batch-mode #batch-next .label { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; opacity: .85; margin-right: 1px; }
#batch-next .token {
  position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--c); border: 2px solid #fff; color: #fff; font-size: 15px; font-style: normal; line-height: 1;
  font-family: system-ui, sans-serif;
  text-shadow: 0 1px 0 #0007; box-shadow: 0 2px 0 #0004;
}
#batch-next .label + .token { width: 31px; height: 31px; font-size: 18px; }
#batch-next .token.urgent { box-shadow: 0 0 0 2px var(--gold), 0 2px 0 #0004; }
#batch-next .token b {
  position: absolute; top: -7px; right: -8px; font-size: 10px; line-height: 14px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--gold); color: #5a3a00; text-shadow: none; text-align: center;
}
#batch-next .token .glyph { width: 62%; height: 62%; fill: #fff; filter: drop-shadow(0 1px 0 #0006); }
#batch-next .token.empty { background: #ffffff14; border: 2px dashed #ffffff55; box-shadow: none; }
body.batch-mode #batch-hud .hud-pill.express { font-size: var(--fs-s); padding: 0 10px; border-radius: var(--r-m); }
/* Event pop: what a delivery earned, for 1.7 s, over the yard under the HUD. */
#batch-event {
  position: absolute; top: calc(100% + var(--sp-2)); left: 50%; transform: translateX(-50%); display: flex; gap: 6px;
  align-items: center; padding: 5px 12px; border-radius: var(--r-pill); background: var(--panel-solid); border: 2px solid #ffffffb0;
  color: #fff; font-weight: 900; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity var(--t-quick);
}
#batch-event.on { opacity: 1; visibility: visible; animation: b-pop var(--t-reveal) var(--ease-pop); }
#batch-event b { font-size: 20px; color: var(--gold); }
#batch-event span { font-size: var(--fs-s); padding: 2px 8px; border-radius: var(--r-pill); background: #ffffff1f; }
#batch-event span.ex { color: #ffc08a; }
@keyframes b-pop { from { transform: translateX(-50%) scale(.6); } }
/* Bottom: a subdued feedback line and the one contextual button. */
body.batch-mode #play-dock #batch-tip {
  max-width: calc(100% - 190px); background: var(--panel-soft); font-size: var(--fs-s); font-weight: 700; padding: 6px 10px;
  color: #ffffffe6;
}
body.batch-mode #belt-stop {
  position: relative; overflow: hidden; width: 176px; min-width: 0; display: grid; grid-template-columns: 32px 1fr;
  grid-template-areas: "icon main" "icon pips"; align-items: center; column-gap: 8px; text-align: left;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
#belt-stop .bs-icon {
  grid-area: icon; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #ffffff70; font-size: 16px; font-weight: 900;
}
#belt-stop .bs-main { grid-area: main; white-space: nowrap; }
#belt-stop .bs-pips { grid-area: pips; display: flex; gap: 5px; margin-top: 3px; }
#belt-stop .bs-pips i { width: 9px; height: 9px; border-radius: 50%; background: #5a3a0033; }
#belt-stop .bs-pips i.on { background: #5a3a00; }
body.batch-mode #belt-stop:not(.bs-ready) { grid-template-areas: "icon main"; }
/* Holding: blue, a countdown in the badge and a draining line. */
body.batch-mode #belt-stop.bs-active, body.batch-mode #belt-stop.bs-active:disabled {
  background: linear-gradient(#5fb8ff, var(--sky)); color: #fff; box-shadow: 0 5px 0 var(--sky-edge), 0 8px 18px #0000002e;
  filter: none; opacity: 1;
}
#belt-stop.bs-active .bs-icon { background: #fff; color: var(--sky-edge); font-size: 18px; }
#belt-stop .bs-drain {
  position: absolute; left: 0; bottom: 0; height: 5px; width: calc(100% * var(--left, 1)); background: #fff;
  transition: width 120ms linear;
}
/* Out of holds: flat grey, clearly not pressable. */
body.batch-mode #belt-stop.bs-empty, body.batch-mode #belt-stop.bs-empty:disabled {
  background: #59627a; color: #ffffffc8; border-color: #ffffff55; box-shadow: 0 3px 0 #3b4250; filter: none; opacity: 1;
  font-size: var(--fs-s);
}
#belt-stop.bs-empty .bs-icon { background: #ffffff26; }
@media (max-width: 370px) {
  body.batch-mode #belt-stop { width: 164px; font-size: 15px; }
  body.batch-mode #play-dock #batch-tip { max-width: calc(100% - 176px); font-size: 12px; }
}
/* Landscape: the same blocks stacked in the left column (--hud-col);
   yard_camera.js reserves hudColumn() for it. */
@media (orientation: landscape) {
  body.batch-mode #batch-hud { right: auto; }
  body.batch-mode #batch-hud .hud-bar { margin-right: 0; height: 34px; }
  body.batch-mode #batch-hud .hud-bar strong { line-height: 28px; }
  body.batch-mode #batch-hud .hud-row { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 6px; }
  body.batch-mode #batch-hud .hearts { margin-left: 0; min-height: 28px; }
  body.batch-mode #batch-hud .hud-pill.express { min-height: 34px; }
  .star-track { max-width: none; min-height: 34px; }
  #batch-event { left: 0; transform: none; flex-wrap: wrap; white-space: normal; max-width: var(--hud-col); }
  @keyframes b-pop { from { transform: scale(.6); } }
  body.batch-mode #play-dock #batch-tip { max-width: none; }
  body.batch-mode #belt-stop { width: 100%; }
}
/* Reduced motion (Settings or the system): no loops, no glides; end states
   are kept, so anything that animates in still appears. */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
}
/* The player chose full motion although the system asks for less. */
@media (prefers-reduced-motion: reduce) {
  body.full-motion { --t-press: 140ms; --t-quick: 180ms; --t-move: 260ms; --t-reveal: 420ms; }
}
#motion-row[hidden], #large-row[hidden] { display: none; }
/* Integration: the result card owns the screen; in-play HUD, dock and help hide. */
body.result #batch-hud, body.result #play-dock, body.result #coach-help { display: none !important; }
/* --- end B --- */

/* --- C: coach & meta pacing (anchored hints, help button, home gating) --- */
/* Hint mode: no dimming, nothing catches input; a soft ring marks the target. */
#coach.mode-hint .coach-block, #coach.mode-hint .coach-catch, #coach.mode-hint .coach-card { display: none; }
#coach.mode-card .coach-hint { display: none; }
#coach.mode-hint .coach-spot { box-shadow: 0 0 0 3px #ffffffd0, 0 0 0 7px #2470d055; }
#coach.mode-hint.no-hole .coach-spot { display: none; }
.coach-hint {
  position: absolute; left: 0; top: 0; box-sizing: border-box; display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px 6px 7px 7px; border: 3px solid #fff; border-radius: var(--r-l); color: #fff; pointer-events: none;
  background: linear-gradient(#45a4ffee, #2470d0ee); box-shadow: 0 4px 0 #184e95, 0 10px 22px #0006; will-change: transform;
}
.coach-hint.pop { animation: coach-pop var(--t-reveal, .3s) cubic-bezier(.3,1.5,.5,1) both; }
.coach-hint::before {
  content: ""; position: absolute; width: 14px; height: 14px; background: #3a92f0; border: 3px solid #fff; border-width: 3px 0 0 3px; border-radius: 3px 0 0 0;
}
.coach-hint[data-tail="above"]::before { bottom: -10px; left: calc(var(--tail) - 10px); transform: rotate(225deg); background: #2672d2; }
.coach-hint[data-tail="below"]::before { top: -10px; left: calc(var(--tail) - 10px); transform: rotate(45deg); background: #43a1fd; }
.coach-hint[data-tail="right"]::before { left: -10px; top: calc(var(--tail) - 10px); transform: rotate(-45deg); }
.coach-hint[data-tail="left"]::before { right: -10px; top: calc(var(--tail) - 10px); transform: rotate(135deg); }
.coach-hint-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 12px; border: 2px solid #fff; overflow: hidden;
  background: linear-gradient(#ffdf7a, #ffc531); box-shadow: 0 2px 0 #c98a0c;
}
.coach-hint-avatar img { width: 124%; margin: 0 -12%; display: block; }
.coach-hint-text { flex: 1; margin: 0; font-size: 15px; line-height: 1.2; font-weight: 800; text-shadow: 0 2px 0 #184e95; text-wrap: balance; }
.coach-hint { padding-right: 12px; }
@media (orientation: landscape) and (max-height: 430px) { .coach-hint-text { font-size: 14px; } .coach-hint-avatar { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .coach-hint.pop { animation: none; } }
body.reduce-motion .coach-hint.pop, body.reduce-motion .coach-spot::after, body.reduce-motion #coach.tapping .coach-glove,
body.reduce-motion .coach-ripple i, body.reduce-motion .coach-arrow, body.reduce-motion .coach-arrow-under { animation: none !important; }

/* "?" under the settings button: replays this shift's hints. */
#coach-help {
  position: fixed; left: 0; top: 0; z-index: 55; width: var(--hit-min); height: var(--hit-min); padding: 0; border: 0; background: none;
  color: #fff; font: 900 20px/1 Rubik, Roboto, sans-serif; cursor: pointer; will-change: transform; text-shadow: 0 2px 0 #184e95;
}
#coach-help[hidden] { display: none; }
#coach-help::before {
  content: ""; position: absolute; inset: 6px; z-index: -1; border-radius: 50%; border: 2px solid #ffffffb0;
  background: linear-gradient(#45a4ff, #2470d0); box-shadow: 0 3px 0 #184e95, 0 5px 12px #0b2b5540;
}
#coach-help:active::before { transform: translateY(2px); box-shadow: 0 1px 0 #184e95; }
#coach-help:focus { outline: none; }
#coach-help:focus-visible::before { outline: 3px solid #fff; outline-offset: 2px; }

/* P1.5: meta entries on home appear when revealed, never as locks. */
body.batch-mode #home-stamps[hidden], body.batch-mode #album-button[hidden], body.batch-mode .side-button[hidden] { display: none; }
/* Closed album stamps read as progress ("1/3"), not as a wall of locks. */
.album-progress { position: relative; display: block; width: 78%; height: 14px; border-radius: 999px; background: #7a5a2a33; overflow: hidden; }
.album-progress i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(#ffd75a, #f0a81c); }
.album-progress b { position: relative; display: block; font-size: 10px; line-height: 14px; font-weight: 900; color: #5a3a00; text-align: center; font-variant-numeric: tabular-nums; }
/* --- end C --- */

/* --- D: screens (home shift plate, result summary, shared components) --- */
/* Shared components (§3). Built only from the :root tokens so every screen
   reads as one family. Usage: <button class="g-btn g-btn--primary">,
   <div class="g-plate">, <span class="g-pill">, <span class="g-chip">.
   Older id rules with higher specificity are re-pointed below. */
.g-btn {
  --edge: #0b1426; position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: var(--btn-h); padding: 0 var(--sp-4); border-radius: var(--r-m); border: var(--stroke-strong) solid #ffffffc0;
  font: inherit; font-weight: 900; text-transform: uppercase; color: #fff; cursor: pointer;
  box-shadow: 0 var(--edge-depth) 0 var(--edge), 0 8px 18px #00000030;
  transition: transform var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out);
}
.g-btn:active { transform: translateY(calc(var(--edge-depth) - 1px)); box-shadow: 0 1px 0 var(--edge); }
.g-btn:focus-visible { outline: none; box-shadow: 0 var(--edge-depth) 0 var(--edge), var(--focus-ring); }
.g-btn svg { width: 1.2em; height: 1.2em; flex: none; }
.g-btn--primary { --edge: var(--go-edge); background: linear-gradient(#6fe061, var(--go) 55%, var(--go-dark)); text-shadow: 0 2px 0 var(--go-edge); }
.g-btn--secondary { --edge: #8fa6cc; color: var(--sky-edge); border-color: #fff; background: linear-gradient(#fff, #e1eaf8); }
.g-btn--ghost { --edge: transparent; background: #ffffff1c; border: var(--stroke) solid #ffffff4d; box-shadow: none; text-transform: none; font-weight: 800; }
.g-btn--hero { --edge-depth: 7px; min-height: var(--btn-h-lg); border-radius: var(--r-l); font-size: var(--fs-xl); }
.g-plate {
  background: var(--panel); border: var(--stroke) solid var(--pill-line); border-radius: var(--r-l); color: #fff;
  box-shadow: 0 var(--edge-depth) 0 #0b142673, 0 10px 26px #0000002e;
}
.g-pill {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; border-radius: var(--r-pill); background: #ffffff1f;
  font-size: var(--fs-s); font-weight: 900; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.g-pill--star i { font-style: normal; color: var(--gold); letter-spacing: -2px; margin-right: 3px; text-shadow: 0 1px 0 var(--gold-edge); }
.g-chip {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-s); background: var(--panel-solid); color: #fff;
  font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
}

/* P1.1 Home. Hierarchy: chapter chip → СМЕНА N → shift name ribbon → one
   plate (shift track + goal) → ИГРАТЬ. Secondary actions sit on dark panel
   tiles so only PLAY is saturated. */
body.batch-mode .home-banner small { border-radius: var(--r-s); }
body.batch-mode .ribbon { border-radius: var(--r-m); box-shadow: 0 var(--edge-depth) 0 #a3243a; transform: rotate(-1.5deg); }
body.batch-mode .home-bottom { gap: var(--sp-3); }
body.batch-mode #shift-plate {
  width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: 0 0 var(--sp-3); overflow: hidden;
}
body.pause-card #shift-plate { padding: var(--sp-3) var(--sp-4); }
/* The track: numbered stops joined by a rail; one chapter chip per chapter. */
body.batch-mode #shift-plate #shift-cards {
  width: 100%; margin: 0; padding: 32px 28px 18px; padding-inline-end: 130px; gap: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
body.batch-mode #shift-plate #shift-cards button {
  width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; color: var(--sky-edge);
  background: linear-gradient(#fff, #d9e5f6); box-shadow: 0 var(--edge-depth) 0 #8fa6cc; transform: none;
  transition: transform var(--t-quick) var(--ease-pop);
}
body.batch-mode #shift-plate #shift-cards b { font-size: 22px; text-shadow: none; }
/* Completed: gold face, earned stars on a small tab under the stop. */
body.batch-mode #shift-plate #shift-cards button.done { background: linear-gradient(#ffe27a, var(--gold)); box-shadow: 0 var(--edge-depth) 0 var(--gold-edge); color: #6a4300; }
/* Selected: the only blue stop, lifted and ringed. */
body.batch-mode #shift-plate #shift-cards button[aria-pressed="true"] {
  background: linear-gradient(#5fb8ff, var(--sky)); color: #fff; transform: scale(1.16);
  box-shadow: 0 var(--edge-depth) 0 var(--sky-edge), 0 0 0 4px #ffffff4d;
}
body.batch-mode #shift-plate #shift-cards button[aria-pressed="true"] b { text-shadow: 0 2px 0 var(--sky-edge); }
/* Locked: flat, hollow, no edge; the same circle so it reads as "later". */
body.batch-mode #shift-plate #shift-cards button.locked { background: #ffffff12; border-color: #ffffff47; box-shadow: none; opacity: 1; }
body.batch-mode #shift-plate #shift-cards button.locked .lock { width: 20px; height: 20px; opacity: .6; filter: none; }
body.batch-mode #shift-plate #shift-cards button.rush:not(.locked):not([aria-pressed="true"]) { background: linear-gradient(#ff8a6a, #e8342f); box-shadow: 0 var(--edge-depth) 0 #9c1d1d; color: #fff; }
body.batch-mode #shift-plate #shift-cards button.rush.done:not([aria-pressed="true"]) { background: linear-gradient(#ffd75a, #ff8a2b); box-shadow: 0 var(--edge-depth) 0 #b0561a; color: #5a2400; }
#shift-plate #shift-cards em {
  bottom: -12px; padding: 0 5px; border-radius: var(--r-pill); background: var(--panel-solid); border: 1.5px solid #ffffff40;
  font-size: 10px; line-height: 14px; letter-spacing: -1px; color: #ffffff3a; text-shadow: none;
}
#shift-plate #shift-cards button:not(.done) em { display: none; }
#shift-plate #shift-cards button[aria-pressed="true"] em { transform: translateX(-50%) scale(.87); }
/* Rail between stops; gold behind a completed one. */
body.batch-mode #shift-plate #shift-cards button:not(:first-child)::before {
  width: 12px; height: 5px; margin: -2.5px 3px 0 0; border: 0; border-radius: 3px; background: #ffffff38;
}
body.batch-mode #shift-plate #shift-cards button.done + button::before { background: var(--gold); }
body.batch-mode #shift-plate #shift-cards button[data-chapter-start]:not(:first-child) { margin-left: 22px; }
body.batch-mode #shift-plate #shift-cards button[data-chapter-start]:not(:first-child)::before { width: 30px; background: repeating-linear-gradient(90deg, #ffffff38 0 6px, transparent 6px 10px); }
body.batch-mode #shift-plate #shift-cards button[data-chapter-start]::after {
  top: -27px; left: -4px; padding: 2px 8px; border-radius: var(--r-s); background: #ffffff24; font-size: 10px; letter-spacing: 1px;
}
body.batch-mode #shift-plate #shift-cards button[aria-pressed="true"][data-chapter-start]::after { transform: scale(.86); transform-origin: left bottom; }
body.batch-mode #shift-plate .strip-gap { color: #ffffff80; text-shadow: none; }
#shift-plate #shift-cards button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Goal line: the objective in words, star thresholds as pills. */
body.batch-mode #shift-plate p#shift-description {
  margin: 0; padding: 0 var(--sp-3); background: none; border-radius: 0; font-size: 15px; line-height: 1.3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
}
body.batch-mode #shift-plate #shift-cards:not([hidden]) + p#shift-description { width: calc(100% - 24px); padding: var(--sp-3) 0 0; border-top: 2px solid #ffffff1a; }
.goal-main { font-weight: 900; margin-right: 2px; }
/* The two thresholds wrap together, never one pill alone. */
.goal-stars { display: inline-flex; gap: 6px; white-space: nowrap; }
body.batch-mode #shift-plate #shift-difficulty { margin: 0; background: #ffffff14; }
/* PLAY stays the one saturated, breathing control. */
body.batch-mode #start-shift { border-radius: var(--r-l); }
/* Daily / Missions: quieter dark tiles with coloured icons, still 60 px. */
body.batch-mode .side-button {
  --edge: #0b1426b3; width: 60px; height: 60px; border-radius: 18px; border: var(--stroke) solid #ffffff59; background: var(--panel);
  box-shadow: 0 var(--edge-depth) 0 var(--edge), 0 6px 14px #0003;
}
body.batch-mode .side-button.locked { background: var(--panel-soft); }
body.batch-mode .side-button.locked .side-icon svg { opacity: .6; }
body.batch-mode .side-button.ready { border-color: #ffd23f; }
body.batch-mode .side-label { opacity: .9; letter-spacing: -.2px; }
body.batch-mode .boost-chip { min-height: var(--hit-min); border-radius: var(--r-m); border: var(--stroke) solid var(--pill-line); box-shadow: 0 3px 0 #0b142673; }
body.batch-mode .boost-chip.on { border-color: #fff; box-shadow: 0 3px 0 var(--gold-edge), 0 0 0 3px #ffffff40; }
body.batch-mode #rules-button { min-height: 36px; opacity: .85; }
/* Pause card: the plate holds the hint, the button says Continue. */
body.pause-card .home-bottom { background: none; }

/* P1.4 Result: title → score → stars → stamps → one reason → actions;
   missions and numbers fold away. Nothing animates over the buttons. */
body.batch-mode #result { width: min(360px, calc(100% - 32px)); padding: 20px 18px 14px; }
body.batch-mode #result h2 { margin: 0; font-size: 26px; line-height: 1.1; }
body.batch-mode #result #result-score { margin-top: 4px; font-size: 42px; line-height: 1.1; font-variant-numeric: tabular-nums; }
body.batch-mode.result-won #result-stars { margin: 4px 0 2px; gap: 2px; }
#result-stars i { width: 56px; height: 56px; font-size: 52px; }
#result-stars i:nth-child(2) { transform: translateY(-8px) scale(1.15); }
#result-stars i.on { animation-delay: .5s; }
#result-stars i.on:nth-child(2) { animation-delay: .62s; } #result-stars i.on:nth-child(3) { animation-delay: .74s; }
#result.revealed #result-stars i.on, #result.revealed .stamp-total { animation: none !important; }
body.batch-mode #result #result-stamps { margin: 4px 0 0; }
body.batch-mode #result .stamp-total { padding: 4px 14px 4px 8px; }
body.batch-mode #result .stamp-total b { font-size: 26px; }
body.batch-mode #result p.result-why {
  display: grid; gap: 3px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-m); background: #0f2f6a66; text-align: left; opacity: 1;
}
body.batch-mode #result p.result-why:empty { display: none; }
.why-reason { font-size: 14px; font-weight: 800; line-height: 1.3; }
.why-tip { font-size: 13px; font-weight: 600; line-height: 1.3; opacity: .92; }
.why-target { margin-top: 3px; font-size: 14px; font-weight: 900; color: #ffe27a; font-variant-numeric: tabular-nums; }
body.batch-mode #result #result-stats { text-wrap: balance; }
body.batch-mode #result p.result-why.tone-top { background: none; padding: 2px 0 0; text-align: center; }
.result-why.tone-top .why-reason { color: #ffe27a; font-size: 16px; font-weight: 900; }
.result-why.tone-fail .why-target { color: #fff; font-weight: 700; }
body.batch-mode #result.failed { background: linear-gradient(#5b8fd6, #2f5fae); }
body.batch-mode #result.failed h2 { font-size: 24px; }
body.batch-mode #result.failed p.result-why { margin-top: 14px; background: #0b1f4a73; }
body.batch-mode #result .result-side { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
body.batch-mode #result .result-side > .g-btn { margin: 0; text-transform: uppercase; }
body.batch-mode #result #next-lesson { min-height: 60px; font-size: 21px; border-radius: var(--r-l); }
body.batch-mode #result #retry {
  --edge: #8fa6cc; min-height: 50px; font-size: 17px; color: var(--sky-edge); border-color: #fff;
  background: linear-gradient(#fff, #e1eaf8); box-shadow: 0 var(--edge-depth) 0 var(--edge);
}
/* After a loss Retry is the way on: it takes the primary look. */
body.batch-mode #result.failed #retry {
  --edge: var(--go-edge); min-height: 60px; font-size: 21px; border-radius: var(--r-l); border-color: #ffffffc0; color: #fff;
  background: linear-gradient(#6fe061, var(--go) 55%, var(--go-dark)); text-shadow: 0 2px 0 var(--go-edge); box-shadow: 0 var(--edge-depth) 0 var(--edge);
}
body.batch-mode #result #share-result { min-height: 44px; font-size: 15px; text-transform: none; background: #ffffff1c; box-shadow: none; border: var(--stroke) solid #ffffff4d; }
#result-more { text-align: left; }
#result-more summary {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; list-style: none; cursor: pointer;
  font-size: 13px; font-weight: 800; opacity: .9;
}
#result-more summary::-webkit-details-marker { display: none; }
#result-more summary::after { content: ""; width: 7px; height: 7px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-quick); }
#result-more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
#result-more summary b:empty { display: none; }
#result-more summary b { padding: 1px 8px; border-radius: var(--r-pill); background: #ffffff26; font-size: 12px; font-variant-numeric: tabular-nums; }
#result-more summary:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: var(--r-s); }
body.batch-mode #result #result-more #result-missions { margin: 2px 0 0; }
body.batch-mode #result #result-stats { margin: 8px 2px 2px; font-size: 12px; line-height: 1.4; opacity: .85; text-align: center; }

/* Narrow phones: goal and boosts stay on one line each. */
@media (orientation: portrait) and (max-width: 400px) {
  body.batch-mode #shift-plate p#shift-description { font-size: 14px; gap: 5px; }
  body.batch-mode #shift-plate .g-pill { padding: 2px 8px; font-size: 12px; }
  .goal-stars { gap: 5px; }
  body.batch-mode #boost-chips { gap: 6px; }
  body.batch-mode .boost-chip { min-width: 0; padding: 3px 7px 3px 3px; gap: 4px; }
  body.batch-mode .boost-chip .boost-icon { width: 30px; height: 30px; }
  body.batch-mode .boost-text b { font-size: 11px; }
  body.batch-mode #result h2 { font-size: 23px; }
  body.batch-mode #result .result-side > .g-btn { padding: 0 var(--sp-2); white-space: nowrap; }
  body.batch-mode #result #next-lesson, body.batch-mode #result.failed #retry { font-size: 19px; }
}
@media (max-width: 370px) {
  body.batch-mode #shift-plate #shift-cards { gap: 16px; padding-inline: 22px 120px; }
  body.batch-mode #shift-plate #shift-cards button { width: 48px; height: 48px; }
  body.batch-mode .side-button { width: 60px; height: 58px; }
  body.batch-mode .side-label { font-size: 9px; }
  body.batch-mode #result { padding-inline: 14px; }
  body.batch-mode #result #next-lesson, body.batch-mode #result.failed #retry { font-size: 17px; }
}
/* Short portrait phones (375×667): tighter plate and result. */
@media (orientation: portrait) and (max-height: 700px) {
  body.batch-mode #shift-plate #shift-cards { padding-top: 30px; padding-bottom: 16px; }
  body.batch-mode .home-bottom { gap: var(--sp-2); padding-top: 24px; }
  body.batch-mode #result { padding-top: 16px; }
  body.batch-mode #result #result-score { font-size: 36px; }
  #result-stars i { width: 48px; height: 48px; font-size: 44px; }
}
@media (orientation: landscape) {
  body.batch-mode .home-bottom { gap: var(--sp-2); }
  body.batch-mode #shift-plate { padding-bottom: var(--sp-2); gap: 6px; }
  body.batch-mode #shift-plate #shift-cards { padding: 28px 22px 14px; padding-inline-end: 120px; gap: 14px; }
  body.batch-mode #shift-plate #shift-cards button { width: 46px; height: 46px; }
  body.batch-mode #shift-plate #shift-cards b { font-size: 20px; }
  body.batch-mode #shift-plate #shift-cards button:not(:first-child)::before { width: 8px; }
  body.batch-mode #shift-plate #shift-cards button[data-chapter-start]:not(:first-child)::before { width: 26px; }
  body.batch-mode #shift-plate p#shift-description { font-size: 13px; padding-top: var(--sp-2); }
  body.batch-mode .side-button { width: 58px; height: 54px; border-radius: 16px; }
  body.batch-mode .boost-chip { min-height: 40px; }
  body.batch-mode #rules-button { min-height: 28px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  body.batch-mode #result:not([hidden]) { align-items: start; padding: 14px 18px 12px; }
  body.batch-mode.result-won #result-stars { margin: 2px 0 0; }
  body.batch-mode #result #result-score { font-size: 32px; }
  #result-stars i { width: 44px; height: 44px; font-size: 40px; }
  body.batch-mode #result p.result-why { margin-top: 8px; padding: 8px 10px; }
  .why-reason, .why-target { font-size: 13px; }
  body.batch-mode #result .result-side { margin-top: 0; gap: 8px; align-self: center; }
  body.batch-mode #result #next-lesson, body.batch-mode #result.failed #retry { min-height: 52px; font-size: 18px; }
  body.batch-mode #result #retry { min-height: 46px; font-size: 15px; }
  #result-more summary { min-height: 34px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  body.batch-mode #shift-plate { gap: 4px; padding-bottom: 6px; }
  body.batch-mode #shift-plate #shift-cards { padding-top: 24px; padding-bottom: 8px; }
  body.batch-mode #shift-plate #shift-cards:not([hidden]) + p#shift-description { padding-top: 6px; }
  body.batch-mode #shift-plate #shift-difficulty { padding: 2px 10px; font-size: 10px; }
  body.batch-mode .home-bottom { gap: 6px; }
  body.batch-mode #shift-plate #shift-cards button { width: 42px; height: 42px; }
  body.batch-mode #shift-plate #shift-cards b { font-size: 18px; }
  body.batch-mode .side-button { width: 56px; height: 50px; }
  body.batch-mode .boost-chip { min-height: 38px; }
  body.batch-mode #result h2 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body.batch-mode #shift-plate #shift-cards button, #result-more summary::after { transition: none; }
}
body.reduce-motion #result-stars i.on, body.reduce-motion #start-shift { animation: none !important; }
/* --- end D --- */

/* ---- Review pass 2026-10-21: the hold button follows the belt ---- */
body.batch-mode #belt-stop.bs-ready { transition: filter var(--t-quick, .18s) ease, opacity var(--t-quick, .18s) ease; }
body.batch-mode #belt-stop.bs-ready.bs-calm { filter: saturate(.35) brightness(.96); opacity: .8; }
body.batch-mode #belt-stop.bs-ready.bs-busy { animation: bs-nudge 1.1s ease-in-out infinite; }
@keyframes bs-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) scale(1.03); } }
body.reduce-motion #belt-stop.bs-busy { animation: none; }
@media (prefers-reduced-motion: reduce) { body.batch-mode #belt-stop.bs-ready.bs-busy { animation: none; } }
body.batch-mode.wave-on #batch-tip { color: #ffe27a; font-weight: 900; }

/* ---- Depth v1 (docs/design/depth-v1.md): chain, gold, van, record ---- */
body.batch-mode #batch-hud .hud-pill.chain {
  gap: 4px; padding: 0 9px; border-radius: var(--r-m); font-size: var(--fs-s); font-weight: 900; color: #ffe27a;
  background: linear-gradient(180deg, #ff8a2bd9, #e8542bd9); border: 2px solid #ffffffb0;
  animation: cl-pop var(--t-quick) var(--ease-pop);
}
#batch-chain i { font-style: normal; font-size: 13px; }
#batch-chain b { font-size: 15px; color: #fff; }
#batch-chain span { font-size: 11px; color: #fff3c4; }
#batch-chain.hot { box-shadow: 0 0 0 2px var(--gold), 0 0 12px #ffb02e99; }
#batch-chain.broken { background: #3b4a66e6; color: #ffd0d6; border-color: #ff8a9a; animation: rt-shake .4s ease-in-out; }
#batch-next .token.gold { box-shadow: 0 0 0 3px #ffd84a, 0 0 10px #ffd84aaa, 0 2px 0 #0004; }
#batch-next .token b.g { left: -8px; right: auto; background: #ffd84a; color: #6a4600; }
#batch-event { flex-wrap: wrap; justify-content: center; max-width: min(92vw, 380px); row-gap: 4px; }
#batch-event span.ch { color: #ffd08a; background: #ff8a2b33; }
#batch-event span.gd { color: #ffe27a; background: #ffd84a33; }
#batch-event span.vn { color: #bfe6ff; background: #238aee33; }
.callout.van {
  padding: 5px 10px; border-radius: var(--r-pill); background: var(--panel-solid); border: 2px solid #fff;
  box-shadow: 0 3px 0 #0005; font-size: 12px; animation: none; opacity: 1;
}
.callout.van b { font-size: 16px; color: var(--gold); }
.callout.van.open { background: linear-gradient(180deg, #ffd84a, #f0a81e); color: #4a3100; border-color: #fff; }
.callout.van.open b { color: #4a3100; font-size: 18px; }
.callout.van:empty { display: none; }
body.batch-mode.van-on #batch-tip { color: #bfe6ff; font-weight: 900; }
.result-why .why-record { display: block; color: #ffe27a; font-weight: 900; margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { body.batch-mode #batch-hud .hud-pill.chain, #batch-chain.broken { animation: none; } }
body.reduce-motion #batch-chain, body.reduce-motion #batch-chain.broken { animation: none; }

/* ---- Meaning v1 (docs/design/meaning-v1.md): postal rank and wardrobe ---- */
.rank-avatar { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; display: grid; justify-items: center; gap: 3px; }
.rank-avatar:focus-visible { outline: var(--focus-ring, 3px solid #fff); outline-offset: 2px; border-radius: 14px; }
.rank-avatar #rank-num {
  position: absolute; right: -8px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center;
  background: var(--gold, #ffcb38); color: #4a3100; font: 900 13px/1 Rubik, sans-serif; border: 2px solid #fff; box-shadow: 0 2px 0 #0004;
}
.rank-avatar .rank-bar { display: block; width: 46px; height: 6px; border-radius: 3px; background: #00000040; overflow: hidden; }
.rank-avatar .rank-bar i { display: block; height: 100%; width: var(--fill, 0%); background: var(--gold, #ffcb38); border-radius: 3px; transition: width .6s ease-out; }
.rank-avatar.up #rank-num { animation: cl-pop .5s var(--ease-pop, ease-out); }
.rank-hero { display: flex; gap: 12px; align-items: center; margin: 4px 0 12px; }
.rank-hero .rank-big { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(#ffe27a, #f0a81e); color: #4a3100; font: 900 30px/1 Rubik, sans-serif; border: 3px solid #fff; box-shadow: 0 3px 0 #0004; flex: none; }
.rank-hero .m-bar { margin-top: 6px; }
.rank-hero small { display: block; opacity: .85; }
.wardrobe-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.wardrobe-grid li button { width: 100%; min-height: 96px; border-radius: 14px; border: 2px solid #ffffff40; background: #ffffff14; color: #fff; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 8px 4px; font: 800 12px/1.15 Rubik, sans-serif; cursor: pointer; }
.wardrobe-grid li button .w-icon { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 0 #0005); }
.wardrobe-grid li button.worn { border-color: var(--gold, #ffcb38); background: #ffcb3830; box-shadow: 0 0 0 2px #ffcb3866; }
.wardrobe-grid li button:disabled { opacity: .55; cursor: default; }
.wardrobe-grid li button small { font-weight: 700; opacity: .85; }
.result-rank { display: grid; gap: 4px; margin: 6px 0 2px; font: 800 13px/1.2 Rubik, sans-serif; color: #fff; }
.result-rank .m-bar { height: 8px; }
.result-rank b { color: var(--gold, #ffcb38); }
.celebrate-card.rank-card { padding: 22px 22px 18px; border-radius: 26px; background: linear-gradient(180deg, #3d95e8, #1f5fb8); border: 4px solid #fff; box-shadow: 0 10px 0 #0b2f6e, 0 18px 40px #0008; max-width: min(88vw, 340px); }
.celebrate-card.rank-card .rank-big { width: 84px; height: 84px; font-size: 42px; border-radius: 24px; animation: cl-pop .6s var(--ease-pop, ease-out); }
.celebrate-card.rank-card h2 { margin-top: 8px; }
.celebrate-card.rank-card button + button { margin-top: 8px; }

/* ---- Retention v1 (docs/design/retention-v1.md): goal chip, chests ---- */
.home-goal {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin-top: 8px; padding: 6px 12px;
  border-radius: var(--r-m, 12px); border: 2px solid #ffffff40; background: #ffffff14; color: #fff; cursor: pointer;
  font: 800 13px/1.2 Rubik, sans-serif; text-align: left;
}
.home-goal[hidden] { display: none; }
.home-goal .goal-icon { font-size: 18px; line-height: 1; display: inline-grid; place-items: center; width: 22px; height: 22px; }
.home-goal .goal-icon svg { width: 20px; height: 20px; }
.home-goal .goal-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-goal .goal-go { font-style: normal; font-size: 20px; opacity: .7; }
.home-goal.hot { border-color: var(--gold, #ffcb38); background: #ffcb3833; animation: goal-glow 1.6s ease-in-out infinite; }
@keyframes goal-glow { 50% { box-shadow: 0 0 0 3px #ffcb3855; } }
body.reduce-motion .home-goal.hot { animation: none; }
@media (prefers-reduced-motion: reduce) { .home-goal.hot { animation: none; } }
.chest-hero { margin: 4px 0 12px; }
.chest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chest-list li { display: grid; grid-template-columns: 34px 44px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #ffffff14; border: 2px solid #ffffff26; }
.chest-list li.ready { border-color: var(--gold, #ffcb38); background: #ffcb3826; }
.chest-list li.claimed { opacity: .65; }
.chest-list .chest-icon { font-size: 26px; line-height: 1; }
.chest-list .chest-need { font: 900 15px/1 Rubik, sans-serif; color: var(--gold, #ffcb38); }
.chest-list .chest-reward { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; }
.chest-list .boost-icon { width: 24px; height: 24px; }
/* Narrow phones (≤ 374 px): the top bar keeps every button clear of the gear. */
@media (max-width: 374px) {
  body.batch-mode .home-top { gap: 5px; }
  body.batch-mode .stat-pill { padding: 3px 7px 3px 5px; font-size: 14px; }
  body.batch-mode .stat-pill.stamps { font-size: 14px; padding: 3px 5px 3px 6px; gap: 4px; }
  body.batch-mode .stat-pill i { font-size: 17px; }
  body.batch-mode .rank-avatar .avatar { width: 40px; height: 40px; border-radius: 12px; }
  body.batch-mode .rank-avatar .rank-bar { width: 40px; }
  body.batch-mode #album-button { width: 40px; height: 40px; }
}
/* Short landscape: the goal line stays slim so the shift title ribbon shows. */
@media (max-height: 500px) and (orientation: landscape) {
  .home-goal.side {
    position: absolute; left: max(12px, var(--host-safe-left, 0px)); bottom: calc(max(14px, var(--host-safe-bottom, 0px)) + 60px);
    width: min(300px, calc(50% - 24px)); margin: 0; min-height: 34px; padding: 4px 10px; font-size: 12px;
    background: var(--panel-solid, #1b2740e6); z-index: 2;
  }
  .home-goal .goal-icon { font-size: 15px; }
}

/* Settings close: a cross in the top-right corner, where a phone player
   looks for it; tapping beside the sheet closes it too. */
/* One round cross for every sheet; it stays in the corner while the
   sheet scrolls, and takes no height of its own. */
#game-settings > .dialog-x, body.batch-mode #game-settings > .dialog-x, #meta-sheet > .dialog-x {
  position: sticky; top: 0; float: right; z-index: 3; display: grid; place-items: center;
  width: 44px; min-height: 0; height: 44px; margin: -6px -6px -38px 8px; padding: 0; text-transform: none;
  border: 3px solid #fff; border-radius: 50%; font: 900 20px/1 Rubik, Roboto, sans-serif; color: #fff; cursor: pointer;
  background: linear-gradient(#ff6b7d, #e63950); box-shadow: 0 4px 0 #a5203a;
}
#game-settings > .dialog-x:active, #meta-sheet > .dialog-x:active { transform: translateY(3px); box-shadow: 0 1px 0 #a5203a; }
body.batch-mode #result #to-menu { min-height: 44px; font-size: 15px; }

/* Wardrobe fitting room (yard_fitting.js): the robot on a turntable above
   the robot picker and the accessory grid. */
.fitting { position: relative; height: clamp(190px, 34vh, 280px); margin: 4px 0 8px; border-radius: 20px;
  background: radial-gradient(circle at 50% 70%, #ffffff40, #ffffff0d 70%); border: 2px solid #ffffff33; overflow: hidden; }
.fit-stage { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.fit-stage:active { cursor: grabbing; }
.fit-hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 700 12px/1 Rubik, sans-serif; opacity: .8; pointer-events: none; }
.fit-status { margin: 0 0 8px; text-align: center; font: 800 15px/1.25 Rubik, sans-serif; }
.fit-status.trying { color: #ffe27a; }
.fit-robots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0 0 12px; }
.fit-robot { width: 40px; height: 40px; padding: 3px; border-radius: 50%; border: 3px solid #ffffff66; background: var(--chip, #ffffff22); cursor: pointer; }
.fit-robot img { width: 100%; height: 100%; object-fit: contain; }
.fit-robot[aria-checked="true"] { border-color: #ffcb38; box-shadow: 0 0 0 3px #ffcb3866; transform: scale(1.08); }
.fit-robot.k-red { --chip: #f24458; } .fit-robot.k-blue { --chip: #238aee; } .fit-robot.k-green { --chip: #3fbf4a; }
.fit-robot.k-yellow { --chip: #ffc531; } .fit-robot.k-purple { --chip: #9b5de5; } .fit-robot.k-orange { --chip: #ff8a2b; }
.fit-robot.k-universal { --chip: linear-gradient(#ffe27a, #f0a81e); }
.wardrobe-grid li button.locked { opacity: .7; }
.wardrobe-grid li button.locked.worn { opacity: 1; border-style: dashed; }
.w-icon { position: relative; }
.w-lock { position: absolute; right: -10px; bottom: -6px; font-size: 14px; font-style: normal; }
.fit-all { display: block; width: 100%; min-height: 44px; margin: 10px 0 14px; border-radius: 14px; border: 2px solid #ffffff66;
  background: #ffffff1c; color: #fff; font: 800 14px/1 Rubik, sans-serif; cursor: pointer; }

/* ---- Crew v1 (docs/design/crew-v1.md): the Crew sheet and the result line ---- */
.crew-cards { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; margin: 0 -4px; scroll-snap-type: x proximity; scrollbar-width: none; }
.crew-cards::-webkit-scrollbar { display: none; }
.crew-card { flex: none; width: 74px; display: grid; justify-items: center; gap: 2px; padding: 5px 4px 6px; border-radius: 14px; border: 2px solid #ffffff40;
  background: #ffffff14; color: #fff; font: 800 12px/1.1 Rubik, sans-serif; cursor: pointer; scroll-snap-align: center; }
.crew-card[aria-checked="true"] { border-color: var(--gold, #ffcb38); background: #ffcb3830; box-shadow: 0 0 0 2px #ffcb3866; }
.crew-card .cc-face { width: 38px; height: 38px; padding: 3px; border-radius: 50%; border: 2px solid #fff; background: var(--chip, #ffffff22); display: grid; place-items: center; }
.crew-card .cc-face img { width: 100%; height: 100%; object-fit: contain; }
.crew-card b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.crew-card small { font-weight: 800; opacity: .85; font-size: 11px; }
.crew-card .cc-bar { width: 100%; height: 6px; border-radius: 3px; background: #173a6e; overflow: hidden; }
.crew-card .cc-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(#ffe27a, var(--gold, #ffcb38)); }
.k-red { --chip: #f24458; } .k-blue { --chip: #238aee; } .k-green { --chip: #3fbf4a; }
.k-yellow { --chip: #ffc531; } .k-purple { --chip: #9b5de5; } .k-orange { --chip: #ff8a2b; }
.k-universal { --chip: linear-gradient(#ffe27a, #f0a81e); }
.crew-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 8px; margin: 2px 0 8px; }
.crew-head b { font-size: 20px; font-weight: 900; text-shadow: 0 2px 0 #184e95; }
.crew-head .crew-lvl { padding: 2px 8px; border-radius: 9px; background: var(--gold, #ffcb38); color: #4a3100; font-weight: 900; font-size: 12px; }
.crew-head small { flex-basis: 100%; font-weight: 700; font-size: 12px; opacity: .9; }
.crew-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin: 0 0 10px; border-radius: 14px; background: #0f2f6a59; }
.crew-tabs button { min-height: 38px; padding: 4px 2px; border: 0; border-radius: 10px; background: none; color: #fff; font: 900 12.5px/1.1 Rubik, sans-serif; cursor: pointer; opacity: .85; }
.crew-tabs button[aria-selected="true"] { background: linear-gradient(#ffdf7a, var(--gold, #ffcb38)); color: #5a3a00; opacity: 1; box-shadow: 0 3px 0 var(--gold-edge, #c48a00); }
.crew-body .fit-status .lock { width: 16px; height: 16px; vertical-align: -2px; margin-right: 4px; }
.c-lock { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 11px; opacity: .9; }
.c-lock .lock { width: 12px; height: 12px; }
.slot-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 0 0 8px; }
.st-slot { min-height: 80px; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 6px 2px; border-radius: 14px; border: 2px solid #ffffff40;
  background: #ffffff14; color: #fff; font: 800 11px/1.1 Rubik, sans-serif; cursor: pointer; }
.st-slot .slot-pic { width: 38px; height: 38px; border-radius: 50%; border: 2px dashed #ffffff99; display: grid; place-items: center; }
.st-slot .slot-pic img { width: 40px; height: 40px; }
.st-slot .slot-name { overflow-wrap: anywhere; }
.st-slot.on { border-color: var(--gold, #ffcb38); background: #ffcb3830; box-shadow: 0 0 0 2px #ffcb3866; }
.st-slot.on .slot-pic { border-color: var(--gold, #ffcb38); }
.st-slot.locked { opacity: .6; cursor: default; }
.sticker-tray { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.sticker-tray button { width: 100%; min-height: 86px; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 5px 2px; border-radius: 14px;
  border: 2px solid #ffffff40; background: #ffffff14; color: #fff; font: 800 11px/1.1 Rubik, sans-serif; cursor: pointer; }
.sticker-tray button > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticker-tray .st-pic { width: 42px; height: 42px; display: grid; place-items: center; font-size: 22px; }
.sticker-tray button:not(.owned):not(.st-off) .st-pic { filter: saturate(.55) brightness(.92); }
.sticker-tray button.on { border-color: var(--gold, #ffcb38); background: #ffcb3830; }
.sticker-tray button.tried { border-color: #ffe27a; border-style: dashed; background: #ffe27a22; }
.sticker-tray button.t-rare:not(.on):not(.tried) { border-color: #9ad4ff80; }
.sticker-tray button.t-special:not(.on):not(.tried) { border-color: #ffcb3899; }
.sticker-tray .stamp-tag { font-size: 12px; }
.sticker-tray .stamp-tag svg, .buy-bar .stamp-tag svg { width: 14px; height: 16px; }
.buy-bar { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 10px; border-radius: 14px;
  background: #ffe27a26; border: 2px dashed #ffe27a; text-align: left; }
.buy-bar img { width: 40px; height: 40px; }
.buy-bar b { font-size: 14px; font-weight: 900; }
.buy-bar .m-claim { min-height: 42px; animation: none; }
.buy-bar .m-claim:disabled { filter: grayscale(.7); opacity: .7; cursor: default; }
.buy-bar .buy-short { grid-column: 1 / -1; font-weight: 800; font-size: 12px; color: #ffe27a; text-align: center; }
.gait-list, .perk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gait-list { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.gait-list button { width: 100%; min-height: 54px; display: grid; justify-items: center; align-content: center; gap: 3px; padding: 6px 8px; border-radius: 14px;
  border: 2px solid #ffffff40; background: #ffffff14; color: #fff; font: 900 13px/1.15 Rubik, sans-serif; cursor: pointer; text-align: center; }
.gait-list button small { font-weight: 800; font-size: 11px; opacity: .9; }
.gait-list button.on { border-color: var(--gold, #ffcb38); background: #ffcb3830; }
.gait-list button.locked { opacity: .7; }
.gait-list button.tried { opacity: 1; border-style: dashed; border-color: #ffe27a; }
/* Crew v2 gait cards (yard_gaits_ui.js) */
.gait-group { margin: 10px 2px 6px; font: 900 13px/1.2 Rubik, sans-serif; color: #fff; opacity: .85; text-align: left; }
.gait-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; }
.gait-card { width: 100%; min-height: 108px; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 6px 3px 5px; border-radius: 14px;
  border: 2px solid #ffffff40; background: #ffffff14; color: #fff; font: 900 12px/1.15 Rubik, sans-serif; cursor: pointer; text-align: center; }
.gait-card .g-pic { width: 56px; height: 56px; display: grid; place-items: end center; overflow: visible; }
.gait-card .g-pic img { width: 48px; height: 48px; object-fit: contain; transform-origin: 50% 100%; }
.gait-card .g-name { max-width: 100%; font-size: 11px; overflow-wrap: break-word; }
.gait-card small { font-weight: 800; font-size: 11px; opacity: .9; }
.gait-card .stamp-tag { font-size: 12px; }
.gait-card .stamp-tag svg { width: 14px; height: 16px; }
.gait-card.on { border-color: var(--gold, #ffcb38); background: #ffcb3830; }
.gait-card.locked .g-pic img { filter: saturate(.5) brightness(.9); }
.gait-card.tried { border-style: dashed; border-color: #ffe27a; background: #ffe27a22; }
/* Pinned to the bottom of the sheet so a card tapped far down still shows its price. */
.gait-buy { grid-template-columns: 44px 1fr auto; position: sticky; bottom: 8px; z-index: 2; margin: 8px 0 0; background: #2d6fcf; box-shadow: 0 6px 18px #0b2a5c80; }
.gait-buy .g-pic { width: 40px; height: 44px; display: grid; place-items: end center; }
.gait-buy .g-pic img { width: 36px; height: 36px; transform-origin: 50% 100%; }
.perk-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 18px; background: #ffffff1f; border: 2px solid #ffffff2a; text-align: left; }
.perk-list li.on { border-color: var(--gold, #ffcb38); background: #ffcb3826; }
.perk-list li.locked { opacity: .7; }
.perk-list .boost-icon { width: 40px; height: 40px; background: #0f2f6a80; }
.perk-list .p-next { opacity: .7; }
.perk-list .p-act { flex: none; min-width: 84px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 10px; border-radius: 14px;
  border: 2px solid #fff; background: linear-gradient(#ffdf7a, var(--gold, #ffcb38)); box-shadow: 0 4px 0 var(--gold-edge, #c48a00); color: #5a3a00; font: 900 13px/1 Rubik, sans-serif; cursor: pointer; }
.perk-list .p-act.on { background: var(--go, #45c93b); color: #fff; box-shadow: 0 4px 0 var(--go-edge, #1f7a1a); }
.perk-list .p-act svg { width: 16px; height: 16px; }
.result-crew { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; margin: 6px 0 2px; font: 800 13px/1.2 Rubik, sans-serif; color: #fff; }
.result-crew[hidden] { display: none; }
.result-crew .crew-gain { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.result-crew .crew-gain i { width: 10px; height: 10px; border-radius: 50%; background: var(--chip, #fff); border: 2px solid #fff; }
.result-crew b { color: var(--gold, #ffcb38); }
.result-crew small { opacity: .85; }
#meta-toast .toast-icon.crew { background: var(--chip, #ffffff30); border: 2px solid #fff; border-radius: 50%; }
#meta-toast .toast-icon.crew img { width: 26px; height: 26px; object-fit: contain; }
/* Short landscape: the fitting room stays on the left, the panel scrolls on the right. */
@media (orientation: landscape) and (max-height: 500px) {
  .sheet-wardrobe[open] { display: grid; grid-template-columns: minmax(200px, 38%) 1fr; column-gap: 14px; align-items: start; }
  .sheet-wardrobe h2 { grid-column: 1 / -1; }
  .sheet-wardrobe .fitting { grid-column: 1; position: sticky; top: 0; height: calc(100dvh - 120px); max-height: 300px; }
  .sheet-wardrobe .fit-panel { grid-column: 2; min-width: 0; }
  .sheet-wardrobe .sheet-done { grid-column: 1 / -1; }
  .st-slot { min-height: 70px; }
}

/* Settings live on the home screen; in a shift the pause card has Restart
   and Menu instead. */
body.batch-mode:not(.home) .hud #game-settings-button { display: none; }
#pause-actions { display: none; }
body.pause-card #pause-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
body.pause-card #pause-actions .g-btn { flex: 0 1 170px; min-height: 48px; font-size: 16px; text-transform: uppercase; white-space: nowrap; }
body.pause-card #pause-actions { margin-bottom: max(8px, var(--host-safe-bottom, 0px)); }
/* The landscape settings sheet is a grid: the cross sits in its corner. */
@media (orientation: landscape) {
  #game-settings > .dialog-x, body.batch-mode #game-settings > .dialog-x { position: absolute; top: 10px; right: 10px; margin: 0; }
}
/* The robot's own sticker, slapped on the corner of its tag (crew v1): the
   one bit of its look that reads at play size. */
.rt-sticker { position: absolute; top: -13px; right: -13px; width: 26px; height: 26px; rotate: 12deg; pointer-events: none; filter: drop-shadow(0 2px 0 #0004); }
.rt-sticker[hidden] { display: none; }
.rt-sticker img { display: block; width: 100%; height: 100%; }

/* Crew v2 boots tab (yard_boots_ui.js): five tabs share the row; pair pictures are 3D renders. */
.crew-tabs { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.crew-tabs::-webkit-scrollbar { display: none; }
.crew-tabs button { flex: 1 0 auto; padding: 4px 6px; font-size: 11.5px; white-space: nowrap; }
.boots-grid .b-pic img { width: 54px; height: 54px; display: block; }
.boots-grid .b-pic > span { font-size: 30px; }
.boots-grid li button { min-height: 104px; }
.boots-grid li button.tried { border-style: dashed; border-color: #ffe27a; opacity: 1; }
.boots-grid li button .c-lock, .boots-grid li button .stamp-tag { font-size: 12px; }
.boots-grid .stamp-tag svg { width: 14px; height: 16px; }
.buy-bar .bb-pic { width: 40px; height: 40px; display: grid; place-items: center; font-size: 26px; }
.buy-bar .bb-pic img { width: 40px; height: 40px; }
/* ---- Crew v2 decals (yard_decals_ui.js): stickers anywhere ---- */
.dc-count { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; margin: 0 0 6px; font: 800 14px/1.2 Rubik, sans-serif; }
.dc-count small { font-weight: 700; font-size: 12px; opacity: .85; }
.dc-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin: 0 0 8px; }
.dc-row .st-slot { min-height: 70px; }
.dc-row .slot-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-row .dc-free .slot-pic { font: 900 20px/1 Rubik, sans-serif; opacity: .9; }
.dc-row .dc-free.on .slot-pic { border-style: solid; animation: dc-pulse 1s ease-in-out infinite; }
.dc-row .locked .slot-pic { border-style: dotted; opacity: .6; }
@keyframes dc-pulse { 50% { transform: scale(1.12); } }
.dc-status { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; }
.dc-armed { width: 32px; height: 32px; flex: none; }
.dc-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 10px; }
.dc-tools button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 6px; border-radius: 14px;
  border: 2px solid #ffffff66; background: #ffffff1c; color: #fff; font: 900 13px/1 Rubik, sans-serif; cursor: pointer; }
.dc-tools button svg { width: 22px; height: 22px; flex: none; }
.dc-tools button:disabled { opacity: .4; cursor: default; }
.dc-tools .dc-wide { grid-column: span 2; }
.dc-tools .dc-wide svg { width: 18px; height: 18px; }
.dc-tools .dc-wide.on { border-color: #ffe27a; background: #ffe27a33; }
.dc-tools .dc-peel { border-color: #ffb3bd; }
.dc-tools .dc-done { grid-column: 1 / -1; min-height: 40px; background: linear-gradient(#ffdf7a, var(--gold, #ffcb38)); color: #5a3a00; border-color: #fff; }
.fitting.decal-edit .fit-stage { cursor: crosshair; }
.fit-hint.cue { font-size: 14px; color: #ffe27a; opacity: 1; text-shadow: 0 2px 0 #184e95, 0 0 6px #184e95; }
.crew-body .buy-bar { scroll-margin-top: 300px; scroll-margin-bottom: 16px; }
/* Portrait: while sticking, the robot stays in view above the tray. */
@media not ((orientation: landscape) and (max-height: 500px)) {
  .fitting.decal-edit { position: sticky; top: -18px; z-index: 2; background: radial-gradient(circle at 50% 70%, #5aa9f6, #3486e0 70%); }
}