/* Static: a neutral floorplan with a blue, yellow and red crew.
 * Rooms are squares, lines join them, crew occupy three fixed quadrants,
 * planned moves use small link arrows, heat sits beside the turn decision. */

@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/IBMPlexMono-500.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/IBMPlexSans-400.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #ffffff; --ink: #000000; --text: #111111; --sub: #5e5e5e; --line: #d4d4d4;
  --guide: #8f8f8f; --frame: #1c1c1c; --band: rgba(0,0,0,.05); --scrim: rgba(255,255,255,.84);
  --blue: #2463eb; --yellow: #ffd600; --red: #e52a2a;
  --ui: 1;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000; --ink: #ffffff; --text: #ededed; --sub: #a6a6a6; --line: #2f2f2f;
    --guide: #8f8f8f; --frame: #ededed; --band: rgba(255,255,255,.06); --scrim: rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --ink: #ffffff; --text: #ededed; --sub: #a6a6a6; --line: #2f2f2f;
  --guide: #8f8f8f; --frame: #ededed; --band: rgba(255,255,255,.06); --scrim: rgba(0,0,0,.8);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
button { font: inherit; color: inherit; }
#app { height: 100dvh; min-height: 32rem; display: grid; grid-template-rows: auto minmax(0, var(--board-ceiling, 1fr)) auto; align-content: center; gap: 12px; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
#app > .sr-only { position: absolute; }

/* ---------- readout and heat ---------- */
.hud { grid-row: 1; justify-self: center; min-height: 24px; display: flex; align-items: center; font: 500 .8125rem/1.4 var(--mono); color: var(--sub); font-variant-numeric: tabular-nums; }
.heat-panel { grid-row: 3; }
#heat-label { margin: 0 0 6px; font: 500 .8125rem/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.heat { position: relative; height: 6px; background: var(--line); }
.heat > div { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width .7s cubic-bezier(.3,.7,.2,1); }
.heat-fill { background: var(--ink); }
.heat-sure { background: var(--guide); }
.heat-maybe { background: repeating-linear-gradient(90deg, var(--guide) 0 3px, transparent 3px 6px); }
.heat.full .heat-fill { animation: heat-pulse 1.2s ease-in-out 3; }
.hud.goal { color: var(--text); }

/* ---------- people and their current or planned room ---------- */
:is(.crew-btn, .token)[data-stat="muscle"] { --person-color: var(--blue); --person-ink: #ffffff; }
:is(.crew-btn, .token)[data-stat="face"] { --person-color: var(--yellow); --person-ink: #000000; }
:is(.crew-btn, .token)[data-stat="deck"] { --person-color: var(--red); --person-ink: #000000; }
:is(.cl, .token) .crew-tile { fill: var(--person-color); stroke: var(--bg); stroke-width: 1; stroke-linejoin: miter; }
:is(.cl, .token) .crew-symbol { fill: none; stroke: var(--person-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.crew { position: relative; z-index: 5; width: 100%; display: flex; gap: 4px; }
.crew-btn { appearance: none; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; column-gap: 4px; flex: 1; min-width: 44px; min-height: 56px; padding: 4px; border: 1px solid transparent; border-radius: 0; background: none; color: var(--text); cursor: pointer; touch-action: manipulation; text-align: left; }
.crew-btn .cl { width: 26px; height: 26px; }
.crew-btn .cl svg { width: 100%; height: 100%; }
.crew-btn .cn { display: grid; gap: 4px; min-width: 0; }
.crew-btn .nm { display: flex; align-items: center; gap: 4px; font: 500 13px/1 var(--mono); }
.crew-btn .sk, .crew-btn .where { font: 500 11px/1.2 var(--mono); color: var(--sub); }
.crew-btn .where { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-btn .hp { display: inline-flex; gap: 2px; }
.crew-btn .hp i { width: 3px; height: 4px; border: 1px solid var(--sub); }
.crew-btn .hp i.on { background: var(--person-color); border-color: var(--person-color); }
.crew-btn[aria-pressed="true"] .nm { text-decoration: underline; text-decoration-color: var(--person-color); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.crew-btn.down { opacity: .45; }
.crew-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .crew-btn:hover:not(:disabled) { background: var(--band); border-color: var(--guide); } }
@keyframes heat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* ---------- board ---------- */
.board { grid-row: 2; position: relative; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-x pan-y; }
.scene { position: relative; width: 100%; transform-origin: var(--settle-x, 50%) var(--settle-y, 50%); transition: transform .7s cubic-bezier(.3,.7,.2,1); }
.complete > .scene { transform: translateY(-10px) scale(.94); }
.instant :is(.scene, .token, .room) { transition: none; }
.p-board.complete > .scene { transform: translateY(-4px) scale(.96); }
/* A single bounded interference burst. Hitboxes, focus and controls stay still. */
.board::after, .p-board::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; background: url("./noise.svg"), repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 4px); }
.signal::after { opacity: var(--grain); animation: signal-fade var(--signal-time) ease-out both; }
.signal .lines, .signal .token, .signal .room > span { animation: signal-shake var(--signal-time) linear; }
.signal .room .name, .signal .room .mark { animation: none; }
.signal .room::before { content: ""; position: absolute; inset: -2px; border: 1px solid var(--guide); pointer-events: none; animation: signal-shake var(--signal-time) linear; }
@keyframes signal-shake { 0%, 100% { translate: 0; } 18% { translate: calc(var(--shake) * -1) 1px; } 37% { translate: var(--shake) -1px; } 61% { translate: calc(var(--shake) * -.5) 0; } 82% { translate: calc(var(--shake) * .25) 0; } }
@keyframes signal-fade { 0%, 65% { opacity: var(--grain); } 100% { opacity: 0; } }
.lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lines .edge { stroke: var(--guide); stroke-width: 1.5; }
.lines .move { fill: none; stroke: var(--ink); stroke-width: 2; }
.lines .move[data-stat="muscle"] { stroke: var(--blue); }
.lines .move[data-stat="face"] { stroke: var(--yellow); }
.lines .move[data-stat="deck"] { stroke: var(--red); }
.rooms, .tokens { position: absolute; inset: 0; }
.tokens { pointer-events: none; }

.room {
  position: absolute; appearance: none; margin: 0; padding: 0; border: 1px solid var(--frame); border-radius: 0; background: var(--bg);
  color: var(--text); cursor: pointer; touch-action: manipulation; transform: translate(-50%, -50%);
  transition: border-color .3s, background .18s;
}
.room.cleared { border-color: var(--guide); }
.room.exit { outline: 1.5px solid var(--frame); outline-offset: 3px; }
.room.exit.cleared { outline-color: var(--guide); }
/* paydata in hand: the exit's double frame turns to ink and pulses three times */
.room.exit.goal { border-color: var(--ink); border-width: 2.5px; outline: 2.5px solid var(--ink); outline-offset: 4px; animation: exit-pulse 1.2s ease-in-out 3; }
@keyframes exit-pulse { 0%, 100% { outline-offset: 4px; } 50% { outline-offset: 10px; } }
.room.can { background: color-mix(in srgb, var(--ink) 6%, var(--bg)); }
.room.from { border-color: var(--frame); }
.room:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.room .mark { position: absolute; left: 75%; top: 75%; transform: translate(-50%, -50%); font: 500 20px/1 var(--mono); color: var(--text); }
.room .mark.lead { font-size: 10px; }
.room .mark.receipt { font-size: 17px; }
.room.collected { border-color: var(--ink); }
.room.retrieved { animation: retrieved .65s ease-out; }
@keyframes retrieved { 0% { outline: 1.5px solid var(--blue); outline-offset: 0; } 60% { outline: 1.5px solid var(--blue); outline-offset: 8px; } 100% { outline: 1.5px solid transparent; outline-offset: 12px; } }
/* watch (street) or ice (matrix): one short bar per level along the bottom edge */
.room .level { position: absolute; left: auto; right: 6px; width: 28px; bottom: 5px; display: flex; gap: 3px; height: 3px; }
.room .level i { flex: 1; background: var(--ink); opacity: 0; }
.room .level i.on { opacity: 1; }
.room.cleared .level { display: none; }
.matrix .room .level i.on { background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px); }
/* a tell: a dot in the top right corner; settled true stays solid, settled false goes hollow */
.room .tell { position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); display: none; }
.room.tell .tell { display: block; }
.room.tell-false .tell { background: none; border: 1.5px solid var(--guide); }
.room.tell-true .tell { animation: tell-pulse 1.2s ease-in-out 2; }
@keyframes tell-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }
.room .name { position: absolute; left: 0; top: -17px; padding-right: 3px; background: var(--bg); font: 500 11px/1.2 var(--mono); color: var(--sub); text-align: left; white-space: nowrap; pointer-events: none; }
.room.flash { animation: room-flash .65s ease-in-out 2; }
@keyframes room-flash { 0%, 100% { background: var(--bg); } 50% { background: color-mix(in srgb, var(--ink) 6%, var(--bg)); } }

.token { appearance: none; position: absolute; display: grid; place-items: center; width: var(--person-hit); height: var(--person-hit); padding: 0; margin: 0; border: 0; background: none; transform: translate(-50%, -50%); color: var(--ink); cursor: pointer; pointer-events: auto; touch-action: manipulation; transition: left .7s cubic-bezier(.3,.7,.2,1), top .7s cubic-bezier(.3,.7,.2,1), opacity .3s; }
.token svg { width: var(--person-size); height: var(--person-size); overflow: visible; }
.token.picked svg { outline: 2px solid var(--ink); outline-offset: 3px; }
.token.picked .crew-tile { stroke: var(--bg); stroke-width: 1; }
.token:focus-visible { outline: none; }
.token:focus-visible svg { outline: 2px solid var(--ink); outline-offset: 3px; }
.token:disabled { cursor: default; }
.token.down { opacity: .4; }
.token.down::after { content: ""; position: absolute; top: 50%; left: calc((100% - var(--person-size)) / 2); width: var(--person-size); height: 2px; background: var(--ink); transform: rotate(-45deg); }
.token.bounce { animation: token-bounce .65s ease-in-out 2; }
@keyframes token-bounce { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* The turn lives immediately beneath the floorplan. Utilities stay quiet. */
.dock { grid-row: 3; justify-self: center; align-self: end; width: min(100%, 40rem); min-width: 0; position: relative; display: grid; grid-template-rows: auto auto auto auto; gap: 10px; }
#crew { grid-row: 1; grid-column: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr)); }
.turn-feedback { grid-row: 2; grid-column: 1; height: 5.6rem; overflow: auto; scrollbar-width: thin; }
.strip, .plan-strip { margin: 0; text-align: center; white-space: pre-line; font: 400 1rem/1.4 var(--sans); color: var(--text); }
.strip:empty, body.planning .strip, body.has-report:not(.planning) .plan-strip { display: none; }
.bar { grid-row: 4; position: relative; display: flex; justify-content: center; align-items: center; gap: 4px; pointer-events: none; }
.group { display: flex; align-items: center; gap: 6px; pointer-events: auto; }
.utilities { position: relative; z-index: 5; }
.utilities .group { gap: 4px; }
.seg { display: flex; outline: 1px solid var(--line); outline-offset: -1px; }
.seg button { appearance: none; min-width: 44px; height: 48px; padding: 0 2px; border: 0; border-radius: 0; background: none; color: var(--text); font: 500 13px/1 var(--mono); cursor: pointer; touch-action: manipulation; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; position: relative; z-index: 1; }
.ib { appearance: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); cursor: pointer; touch-action: manipulation; }
.ib svg { width: 24px; height: 24px; }
.ib[aria-disabled="true"] { opacity: .32; cursor: default; }
.ib[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.ib:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#go-btn { width: 52px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.go-label { font: 500 13px/1 var(--mono); }
@media (hover: hover) { .seg button:hover:not([aria-checked="true"]), .ib:hover:not([aria-disabled="true"]):not([aria-pressed="true"]) { background: var(--band); } }
/* The completed floorplan and its continuation stay in the same place. */
.completion { grid-column: 1; grid-row: 1 / 3; align-self: center; position: relative; z-index: 4; width: 100%; text-align: center; pointer-events: none; }
.completion[hidden] { display: none; }
.completion h2 { margin: 0 0 8px; font: 500 20px/1.2 var(--mono); }
.completion p { margin: 3px 0 0; font: 500 12px/1.4 var(--mono); color: var(--sub); }
.completion p:empty { display: none; }
.next-label { display: none; }
body.complete :is(#crew, .turn-feedback) { visibility: hidden; }
body.complete #approach { display: none; }
body.complete #go-btn .go-label { display: none; }
body.complete #go-btn { width: auto; min-width: 120px; }
body.complete #go-btn .next-label { display: block; white-space: nowrap; font: 500 12px/1.2 var(--mono); }
body.complete #go-btn svg { width: 30px; height: 30px; }
body.complete .room:disabled, body.complete .crew-btn:disabled { cursor: default; }
body.arriving .completion { animation: completion-in .5s .25s both; }
body.arriving #go-btn { animation: next-in .5s .35s both; }
@keyframes completion-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes next-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* One room module in the main map and the Help lesson. */
.room .mark.lead { font-size: 11px; }
.room .mark.receipt { font-size: 18px; }
.room[data-benefit="muscle"] .mark:not(.receipt) { color: var(--blue); }
.room[data-benefit="face"] .mark:not(.receipt) { color: var(--yellow); -webkit-text-stroke: .5px var(--ink); }
.room[data-benefit="deck"] .mark:not(.receipt) { color: var(--red); }
.room .tell { width: 7px; height: 7px; }
/* Color links crew to room benefits, security and confirmed outcomes. */
.room[data-security="high"] .level i.on { background: var(--red); }
.matrix .room[data-security="high"] .level i.on { background: repeating-linear-gradient(90deg, var(--red) 0 2px, transparent 2px 4px); }
.room.tell:not(.tell-false) .tell { background: var(--yellow); }
.room.tell-true:not(.cleared) { border-color: var(--red); }
.room.tell.tell-true .tell { background: var(--red); }
.room.collected { border-color: var(--blue); }
.room.collected .mark, .room.exit.goal .mark { color: var(--blue); }
.room.exit.goal { border-color: var(--blue); outline-color: var(--blue); }
.practice:not(.matrix) .room[data-security="high"] .level i.on { background: var(--red); }

/* Room annotation stays in the fourth quadrant, away from crew hit areas. */
.room .odds { position: absolute; left: 50%; width: 50%; bottom: 12%; font: 500 clamp(.75rem, 1.4vw, 1.125rem)/1.1 var(--mono); text-align: center; }
.room.comparing .mark { top: 62%; }
.room .benefit-name { display: none; }
#board .room .name { top: -1.25rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .8125rem; }
#board .room .mark { font-size: clamp(1.25rem, 2.5vw, 2rem); }
#board .room .mark.lead { font-size: clamp(.625rem, .9vw, .875rem); }
#board .room .level { right: 7%; width: 30%; bottom: 5%; }
#crew .crew-btn { min-height: 64px; grid-template-columns: 36px minmax(0, 1fr); column-gap: 6px; }
#crew .cl { width: 36px; height: 36px; }
#crew .nm { overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.25; flex-wrap: wrap; }
#crew :is(.sk, .where) { font-size: .75rem; line-height: 1.25; }
#dock .bar { justify-content: center; flex-wrap: wrap; }
#dock .seg button { min-width: 44px; height: 48px; padding-inline: 8px; font-size: .9375rem; }
#dock #go-btn { width: auto; min-width: 64px; padding-inline: 6px; }
#dock .go-label { font-size: .9375rem; }
.ib:disabled { opacity: .35; cursor: default; }
@media (max-width: 359px) {
  #crew .crew-btn { grid-template-columns: 28px minmax(0,1fr); column-gap: 3px; }
  #crew .cl { width: 28px; height: 28px; }
  #crew .nm { font-size: .8125rem; }
  #dock .seg button { padding-inline: 3px; font-size: .8125rem; }
  #dock #go-btn { min-width: 52px; }
  .utilities .ib { width: 44px; }
  #app { gap: 8px; }
}
@media (max-height: 500px) and (min-width: 700px), (min-width: 1000px) and (min-aspect-ratio: 7/5) {
  #app { min-height: 23rem; grid-template-columns: minmax(0,1fr) minmax(280px, 22rem); grid-template-rows: auto minmax(0,1fr); column-gap: 16px; }
  .hud { grid-column: 1 / -1; }
  .board { grid-column: 1; grid-row: 2; }
  .dock { grid-column: 2; grid-row: 2; align-self: center; gap: 8px; }
  #crew .crew-btn { grid-template-columns: 28px minmax(0,1fr); column-gap: 3px; }
  #crew .cl { width: 28px; height: 28px; }
  #crew .nm { font-size: .8125rem; }
  #dock .seg button { padding-inline: 3px; }
}

/* ---------- sheets ----------
 * The minimal family sheet (docs/design/minimal-brief.md, Notan's sheet).
 * This block is byte-identical in every game that uses it; game-specific
 * help content goes below it. */
dialog.sheet { width: min(32rem, calc(100vw - 16px)); max-width: none; max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: fit-content; padding: 0; margin: auto; border: 1px solid var(--frame); border-radius: 0; background: var(--bg); color: var(--text); overflow: hidden; }
dialog.sheet[open] { display: block; }
dialog.sheet::backdrop { background: var(--scrim); }
.sheet-in { max-height: calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display: flex; flex-direction: column; min-height: 0; width: 100%; font: 400 16px/1.45 var(--sans); }
.sheet-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.sheet-head form { margin: 0; }
.sheet h2 { margin: 0; font: 500 16px/1.3 var(--mono); }
.sheet-x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); cursor: pointer; }
.sheet-x svg { width: 24px; height: 24px; }
.sheet-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 20px 24px; scroll-padding: 12px; }
.sheet p { margin: 0 0 16px; max-width: 60ch; }
.sheet h3 { margin: 0 0 8px; font: 500 1em/1.4 var(--sans); }
.sheet section + section { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }
.text-action { appearance: none; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 0; background: none; color: var(--text); font: 500 16px/1.3 var(--mono); cursor: pointer; touch-action: manipulation; }
.text-action:disabled { opacity: .45; cursor: default; }
@media (hover: hover) { .text-action:hover:not(:disabled) { background: var(--band); } }
.sheet :is(button, a):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Settings: plain rows, a label on the left and a value or an action on the right. */
.setting-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: 44px; }
.setting-row + .setting-row { margin-top: 8px; }
.setting-row > :last-child { margin-left: auto; }
.row-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.setting-value { padding: 0 13px; font: 500 16px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--sub); }
/* Help: controls at a glance, one per line. */
.controls { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
/* A line reads as one sentence and wraps as one, never splitting the key from what it does. */
.controls dt, .controls dd { display: inline; }
.controls dt { color: var(--text); }
.controls dt::after { content: " \2014"; margin-right: .3em; color: var(--sub); }
.controls dd { margin: 0; color: var(--sub); }
.controls dt > :is(svg, span) { vertical-align: -3px; }
/* Lessons: a heading with a count, a task, the practice, feedback, Back and Next. */
.lesson { padding-top: 4px; }
.lesson-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lesson-count { color: var(--sub); white-space: nowrap; }
.lesson-task { margin: 0 0 16px; }
.lesson-feedback { margin: 8px 0 10px; color: var(--sub); text-align: center; }
.lesson-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
/* A sheet never changes height while it is open: every text that can change
 * sits in one grid cell with all of its alternatives, the others hidden. */
.stack { display: grid; }
.sheet .stack > * { grid-area: 1 / 1; margin: 0; }
.stack > .alt { visibility: hidden; }
.sheet-foot { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 20px; }
.foot-btn { display: inline-flex; align-items: center; min-height: 44px; font: 400 16px/1.4 var(--sans); color: var(--sub); text-underline-offset: 3px; }
@media (max-width: 480px) { .sheet-body { padding: 16px; } .sheet-head { padding: 8px 12px; } }
/* ---------- end sheets ---------- */
/* Static's help: the ? in the goal line reads as the board's mark. */
.sheet .k { font-family: var(--mono); }
/* Static's lesson: a five-room run drawn with the game's own parts, its
 * crew row, heat bar, board and bar stacked as on the page. The board is
 * one fixed height at every width and in every step. */
.practice { display: grid; gap: 8px; }
.p-crew { display: flex; justify-content: center; gap: 4px; }
.p-heat { position: relative; height: 6px; background: var(--line); }
.p-heat > div { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width .7s cubic-bezier(.3,.7,.2,1); }
.p-board { position: relative; height: 208px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.p-bar { display: flex; justify-content: center; align-items: center; gap: 8px; }
.practice .seg { flex-direction: row; margin: 0; }
.practice .seg button { width: auto; }
.sheet .p-readout { margin: 0; text-align: center; white-space: nowrap; font: 500 13px/1.3 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--sub); }
/* the lesson's bars follow the lesson's approach, not the game's behind it */
.practice:not(.matrix) .room .level i.on { background: var(--ink); }
.practice .room:disabled, .practice .crew-btn:disabled { cursor: default; }
.practice .seg button:disabled, .practice .ib:disabled { opacity: .32; cursor: default; }
@media (hover: hover) { .practice :is(.seg button, .ib, .crew-btn):disabled:hover { background: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { :root { --blue: CanvasText; --yellow: CanvasText; --red: CanvasText; --ink: CanvasText; --text: CanvasText; --bg: Canvas; --line: GrayText; --guide: GrayText; --frame: CanvasText; } .room, .token, .heat, .p-heat, .seg, .crew-btn { forced-color-adjust: none; } :is(.crew-btn, .token)[data-stat] { --person-color: CanvasText; --person-ink: Canvas; } }

@media (forced-colors: active) {
  .room .benefit-name { display: block; position: absolute; left: 50%; top: 49%; width: 50%; text-align: center; font: 500 .625rem/1.1 var(--mono); }
  .room.comparing .mark { top: 67%; font-size: 1rem !important; }
  .room[data-benefit="face"] .mark { -webkit-text-stroke: 0; }
  .room .tell { border: 2px solid CanvasText; }
  .room.tell-true .tell { border-radius: 0; }
  .room.tell-false .tell { background: Canvas; }
}

.turn-feedback:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

#dock .bar > .group { max-width: 100%; flex-wrap: wrap; justify-content: center; }

/* Double-tap zoom: touch-action is intersected across every ancestor, so
   manipulation on the root stops double-tap zoom page-wide (readouts, gaps
   between controls, sheet backdrops) while pinch zoom still works. */
html, body { touch-action: manipulation; }