/* UNDERLYING - the instrument panel.
   Paper and ink, one signal red per screen, hairline rules, registration
   marks. Condensed grotesque for labels, mechanical monospace for numbers.
   No blur, no shadow, no gradient that moves, no rounded floating card. */

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-var.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('../fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('../fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('../fonts/plexmono-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --paper: #EFEAE1;
  --paper-deep: #DCD5C8;
  --ink: #141210;
  --ink-soft: #3A3733;
  --signal: #D4441F;
  --confirm: #1F6F5C;
  --rule: rgba(20, 18, 16, 0.22);
  --rule-strong: rgba(20, 18, 16, 0.55);
  --label: 'Oswald', 'Arial Narrow', 'Helvetica Neue', Impact, sans-serif;
  --mono: 'PlexMono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --tick: 120ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --pad: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none;
}

#view {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #DCD5C8;
  touch-action: none;
}

/* The touch surface covers the world but sits below every control. It takes no
   gestures of its own: the page reads touches from the document, so a drag
   that starts on the world must not scroll the page out from under it. */
#touch {
  position: fixed;
  inset: 0;
  z-index: 2;
  touch-action: none;
}
html, body { touch-action: none; overscroll-behavior: none; }

#ui {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
#ui .btn, #ui .option, #ui .stick, #ui .prompt.tappable { pointer-events: auto; }

.noscript { padding: 2rem; font-family: var(--mono); }
.fatal {
  position: fixed; left: 0; right: 0; top: 40%; text-align: center;
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 13px; color: var(--signal);
}

.hidden { display: none !important; }
/* Everything except the panel layer, which is what the ending needs. */
#ui.plate-only > :not(.layer) { display: none !important; }

/* ------------------------------------------------------------ marks ----- */

.marks { position: absolute; inset: 0; pointer-events: none; }
.mark { position: absolute; width: 26px; height: 26px; }
.mark i { position: absolute; background: var(--ink); display: block; }
.mark i:first-child { width: 26px; height: 2px; }
.mark i:last-child  { width: 2px; height: 26px; }
.mark-tl { top: 10px; left: 10px; }
.mark-tr { top: 10px; right: 10px; transform: scaleX(-1); }
.mark-bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.mark-br { bottom: 10px; right: 10px; transform: scale(-1, -1); }

/* ------------------------------------------------------------ strips ---- */

.strip {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px var(--pad);
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  line-height: 1;
  color: var(--ink);
  background: rgba(239, 234, 225, 0.92);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.strip-top { top: 0; }
.strip-bottom { bottom: 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.strip .grow { flex: 1 1 auto; }
.strip .hair { width: 1px; height: 14px; background: var(--rule-strong); }

.cell { white-space: nowrap; }
.cell-surface { font-weight: 600; }
.cell-name { color: var(--ink-soft); }
.cell-integrity {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  font-size: 11px;
  text-transform: none;
}
.cell-integrity.low { color: var(--signal); }
.cell-integrity.critical { color: var(--signal); font-weight: 600; }
.cell-turn {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}

/* ------------------------------------------------------------- scan ----- */

.scan {
  position: absolute;
  left: var(--pad);
  top: 40px;
  max-width: min(46vw, 320px);
  background: rgba(239, 234, 225, 0.88);
  border: 1px solid var(--rule);
  padding: 8px 10px 9px;
  opacity: 0.96;
}
.scan-title {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.scan-body { font-size: 10px; line-height: 1.55; color: var(--ink); }
.scan-line { text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--label); }

/* ----------------------------------------------------------- prompt ----- */

.prompt {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}
.prompt.on { display: flex; }
.prompt.tappable { cursor: pointer; }
.key {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 4px;
  letter-spacing: 0;
}

.buttons { display: flex; gap: 6px; }

.btn {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-strong);
  padding: 6px 10px;
  cursor: pointer;
  transition: background var(--tick) var(--ease), color var(--tick) var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); }
.btn.off { color: var(--signal); border-color: var(--signal); }
.btn-primary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  padding: 9px 16px; font-size: 12px; margin-top: 4px;
}
.btn-primary:hover { background: var(--signal); border-color: var(--signal); }
.btn-pause {
  position: absolute;
  right: var(--pad);
  top: 34px;
  width: 30px; height: 26px;
  padding: 0; line-height: 1;
}

/* -------------------------------------------------------------- stick --- */

.stick {
  position: absolute;
  left: 22px;
  bottom: 78px;
  width: 120px; height: 120px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  opacity: 0.55;
  display: none;
  align-items: center;
  justify-content: center;
}
.stick-knob {
  width: 52px; height: 52px;
  background: rgba(20, 18, 16, 0.35);
  border-radius: 50%;
}
.touch .stick { display: flex; }
@media (hover: none) and (pointer: coarse) { .stick { display: flex; } }

/* -------------------------------------------------------------- subs ---- */

.subs {
  position: absolute;
  left: 50%;
  bottom: 62px;
  transform: translateX(-50%);
  width: min(78vw, 720px);
  text-align: center;
  pointer-events: none;
}
.sub {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(239, 234, 225, 0.9);
  border-left: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  padding: 5px 10px;
  margin-top: 4px;
  text-align: left;
}

/* --------------------------------------------------------- announce ----- */

.announce {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateY(6px);
  width: min(86vw, 620px);
  padding: 18px 22px 20px;
  background: var(--paper);
  border: 2px solid var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tick) var(--ease), transform var(--tick) var(--ease);
  text-align: left;
}
.announce.on { opacity: 1; visibility: visible; transform: translate(-50%, -50%) translateY(0); }
.announce-head {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 17px;
  color: var(--signal);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.announce-body {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  line-height: 1.5;
}

/* -------------------------------------------------------------- layer --- */

.layer {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(220, 213, 200, 0.86);
  overflow: auto;
  pointer-events: auto;
}
.layer.on { display: flex; }

.plate {
  width: min(92vw, 560px);
  max-height: 92vh;
  overflow: auto;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 0 0 4px;
  position: relative;
}
.plate-wide { width: min(94vw, 760px); }
.plate::before, .plate::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--ink);
  border-style: solid;
}
.plate::before { top: 6px; left: 6px; border-width: 3px 0 0 3px; }
.plate::after { bottom: 6px; right: 6px; border-width: 0 3px 3px 0; }

.plate-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--rule);
}
.plate-tick { width: 10px; height: 10px; background: var(--ink); flex: 0 0 auto; }
.plate-title {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 20px;
  font-weight: 600;
}
.plate-sub {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: none;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.plate-body { padding: 16px 20px 20px; }

.blurb {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  margin-bottom: 12px;
  color: var(--ink);
}
.prose p + p { margin-top: 8px; }
.note {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.prompt-text-lg {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 14px;
}

/* -------------------------------------------------------------- rules --- */

.rules { border-top: 1px solid var(--rule); margin: 12px 0; }
.rule {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.rule-k {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: var(--ink-soft);
  min-width: 130px;
}
.rule-v {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------ options --- */

.options { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.options-row { flex-direction: row; flex-wrap: wrap; }

.option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  text-align: left;
  background: transparent;
  border: 1px solid var(--rule-strong);
  padding: 10px 12px;
  cursor: pointer;
  font-family: var(--label);
  transition: background var(--tick) var(--ease), color var(--tick) var(--ease),
              border-color var(--tick) var(--ease);
}
.option:hover, .option:focus-visible { background: var(--ink); border-color: var(--ink); }
.option:hover .option-label, .option:focus-visible .option-label,
.option:hover .option-idx, .option:focus-visible .option-idx,
.option:hover .option-tier, .option:focus-visible .option-tier { color: var(--paper); }

.option-top { display: flex; align-items: baseline; gap: 10px; }
.option-idx {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.option-label {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--ink);
}
.option-tier {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.option-flat { flex-direction: row; align-items: center; }
.option-flat .option-label { font-size: 12px; }
/* A switch that is on says so in the one signal colour, the same way the
   HUD's own sound button does. */
.option-flat.on { border-color: var(--signal); }
.option-flat.on .option-label { color: var(--signal); }
.option-reclaim .option-tier { color: var(--signal); }

.plate-reclaim .plate-sub { color: var(--signal); }
.plate-reclaim { border-color: var(--signal); }
.plate-reclaim .plate-tick { background: var(--signal); }
.plate-decision .plate-tick { background: var(--confirm); }

/* ------------------------------------------------------------- ledger --- */

.ledger-row {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.ledger-row.pending { opacity: 0.7; }
.ledger-row.reclaimed { display: block; border-bottom-color: var(--signal); }
.ledger-left { flex: 0 0 42%; }
.ledger-right { flex: 1 1 auto; }
.ledger-head {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}
.ledger-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.ledger-text { font-family: var(--mono); font-size: 11px; line-height: 1.55; margin-top: 4px; }
.ledger-eff { display: flex; flex-wrap: wrap; gap: 6px; margin: 3px 0; }
.eff {
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--rule);
  padding: 1px 5px;
}
.ledger-sep {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  color: var(--signal);
  margin: 16px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--signal);
}

.tier {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  border: 1px solid var(--rule);
  padding: 1px 5px;
  display: inline-block;
}
.tier-delayed { border-color: var(--confirm); color: var(--confirm); }
.tier-deep { border-color: var(--signal); color: var(--signal); }

/* --------------------------------------------------------------- dev ---- */

.dev {
  position: absolute;
  right: var(--pad);
  top: 70px;
  width: min(52vw, 460px);
  max-height: 66vh;
  overflow: auto;
  display: none;
  background: rgba(20, 18, 16, 0.94);
  color: var(--paper);
  border: 1px solid var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  pointer-events: auto;
}
.dev.on { display: block; }
.dev-head { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid rgba(239,234,225,0.3); }
.dev-tab {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(239,234,225,0.3);
  color: var(--paper);
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 9px;
  padding: 4px;
  cursor: pointer;
}
.dev-tab.on { background: var(--paper); color: var(--ink); }
.dev-body { padding: 8px; white-space: pre; line-height: 1.5; }
.dev-act {
  background: transparent;
  border: 1px solid rgba(239,234,225,0.45);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 6px;
  margin: 1px 0;
  cursor: pointer;
}
.dev-act:hover { background: var(--paper); color: var(--ink); }

/* ------------------------------------------------------------- shapes --- */

/* Narrow, held upright. The panel tightens, the scan collapses to two lines,
   the strip loses its least important cell. Nothing is hidden that the player
   needs, and nothing asks them to turn the phone. */
@media (max-width: 620px) {
  :root { --pad: 10px; }
  .scan { max-width: 68vw; font-size: 9px; padding: 6px 8px; }
  .scan-body { font-size: 9px; }
  .strip { font-size: 10px; gap: 7px; }
  .cell-name { display: none; }
  .buttons { gap: 4px; }
  .btn { padding: 5px 7px; font-size: 10px; }
  .subs { bottom: 74px; width: 92vw; }
  .sub { font-size: 12px; }
  .plate-title { font-size: 17px; }
  .rule-k { min-width: 96px; }
  .stick { width: 104px; height: 104px; left: 16px; bottom: 82px; }
  .stick-knob { width: 44px; height: 44px; }
}

@media (max-height: 460px) {
  .scan { top: 34px; max-height: 32vh; overflow: hidden; }
  .stick { bottom: 60px; width: 96px; height: 96px; }
  .subs { bottom: 52px; }
}

/* A very wide screen: the panel keeps its measure and the scan gets room. */
@media (min-aspect-ratio: 2/1) {
  .scan { max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}

/* ---------------------------------------------------------------- cinema --
   A cutscene is the same instrument panel, with the panel turned down. Two
   bars close to a film ratio, the chrome goes quiet, and the only control left
   on screen is SKIP. Nothing here is a film: the town behind it is the game. */

.cinema { position: fixed; inset: 0; pointer-events: none; z-index: 40; }

.cine-bar {
  position: absolute; left: 0; right: 0; height: 0;
  background: var(--ink);
  transition: height 520ms var(--ease);
}
.cine-bar-top { top: 0; }
.cine-bar-bottom { bottom: 0; }

/* The bars close only while a scene is actually running. `.cinema` lives in
   the page for the whole session, so the bars must be gated on the active
   class or the letterbox never lifts: the town would sit cropped between two
   black bands from the first frame to the last, scene or no scene. */
.cinema.on .cine-bar { height: 7vh; }
@media (max-height: 460px) { .cinema.on .cine-bar { height: 5vh; } }

/* Nothing a scene owns is on screen when no scene is running. */
.cinema:not(.on) .cine-cap,
.cinema:not(.on) .cine-title,
.cinema:not(.on) .cine-skip { display: none; }

/* The chrome stays where it is and the town keeps its strip: the Surface is
   still the Surface during a scene, and the player should be able to read
   where they are. Only the bars and the caption are added. */

.cine-cap {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(7vh + 16px); width: min(760px, 88vw);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.cine-line {
  background: rgba(239, 234, 225, 0.94);
  border-left: 2px solid var(--ink);
  padding: 5px 10px;
  color: var(--ink);
  font-family: var(--mono, monospace);
  font-size: 13px; line-height: 1.45;
  animation: cine-in 180ms var(--ease) both;
}
.cine-speaker {
  font-family: var(--label, sans-serif);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 11px; margin-right: 8px; color: var(--signal);
}
.cine-text { color: var(--ink); }

@keyframes cine-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.cine-title {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--label, sans-serif);
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: clamp(20px, 5vw, 46px);
  color: var(--paper);
  text-shadow: 0 1px 0 rgba(20, 18, 16, 0.5);
  opacity: 0; transition: opacity 420ms var(--ease);
  white-space: nowrap;
}
.cine-title.on { opacity: 0.92; }

.cine-skip {
  position: absolute; right: var(--pad, 14px); bottom: calc(7vh + 14px);
  pointer-events: auto;
  font-family: var(--label, sans-serif);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 11px; padding: 6px 10px;
  color: var(--paper); background: transparent;
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  transition: border-color var(--tick, 120ms) var(--ease);
}
.cine-skip:hover { border-color: var(--paper); }
.cinema:not(.can-skip) .cine-skip { opacity: 0.35; }

@media (max-width: 620px) {
  .cine-cap { bottom: calc(7vh + 10px); width: 94vw; }
  .cine-line { font-size: 12px; padding: 4px 8px; }
  .cine-skip { font-size: 10px; padding: 5px 8px; }
}

/* The scan. One hard-edged band of pale light crossing the screen downwards,
   once: on first load, and again when a history is rewritten under the
   player. It is not decoration; it is the page admitting that the picture it
   is showing has just been replaced. Signal is spent on the leading edge
   only, so the band reads as an instrument rather than as weather. */
#rewrite-scan {
  position: fixed; left: 0; right: 0; top: 0; height: 15vh;
  pointer-events: none; z-index: 39;
  border-top: 2px solid var(--signal);
  background: rgba(239, 234, 225, 0.13);
  opacity: 0;
  transform: translateY(-100%);
  will-change: transform, opacity;
}

/* Two controls the keyboard has and one thumb does not: a jump and a crouch.
   They sit where the right thumb already rests, clear of the stick and of
   the action button, and they exist only on a touch screen: on a keyboard
   the keys are named in CONTROLS and there is nothing here to press. */
.touchkey {
  position: absolute;
  display: none;
  align-items: center; justify-content: center;
  font-family: var(--label);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 10px; color: var(--ink);
  border: 1px solid var(--rule-strong);
  background: rgba(239, 234, 225, 0.55);
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#ui.touchcontrols .touchkey { display: flex; }
.touchkey.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#tk-jump { right: 18px; bottom: 88px; width: 68px; height: 68px; font-size: 11px; }
#tk-crouch { right: 30px; bottom: 166px; width: 52px; height: 52px; }
@media (max-width: 620px) {
  #tk-jump { right: 14px; bottom: 70px; width: 60px; height: 60px; }
  #tk-crouch { right: 24px; bottom: 138px; width: 46px; height: 46px; }
}