/*
  Sneakers (1992): the team's bench. The monitor on the left is the CRT,
  blue on black, framed the way the film's probe monitor program frames it;
  the bench on the right is the room, so the scanlines stay on the glass.
*/

:root {
  --screen: #020308;
  --phosphor: #5aaaf8;
  --phosphor-bright: #b4dcff;
  --frame: #3aa6ff;
  --glow: rgb(90 170 248 / 0.5);
  --bloom: rgb(90 170 248 / 0.18);
  --font: "VT323", ui-monospace, Menlo, monospace;
  --advance: 0.4;           /* VT323's character width, in em */
  --cols: 78;               /* the Fed's screen is 74 characters wide */
  --leading: 1.15;
  --top: 0.5em;
  --scanlines: 0.28;

  --table: #07080c;
  --lamp: rgb(255 168 92 / 0.13);
  --wall: rgb(52 84 210 / 0.16);
  --caption: #ece6d8;
  --caption-dim: #9a968c;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
}

/* ---------- The room: monitor and bench side by side ---------- */

body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background:
    radial-gradient(ellipse 60% 70% at 92% 8%, var(--lamp), transparent 70%),
    radial-gradient(ellipse 70% 60% at 70% 100%, var(--wall), transparent 70%),
    var(--table);
}

/* the scanlines belong to the glass, not the room */
body::after { content: none; }

#room {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
  gap: clamp(12px, 2vw, 28px);
  min-height: 0;
  padding: clamp(10px, 1.6vw, 24px);
}

#monitor-col {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

/* ---------- The monitor ---------- */

#monitor {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  /* --cols across, counting the padding and the frame (3em in all) */
  font-size: clamp(12px, calc(100cqi / (var(--cols) * var(--advance) + 3)), 32px);
  line-height: var(--leading);
  background: var(--screen);
  border-radius: 10px;
  box-shadow: 0 0 0 1px #1a1d26, 0 0 40px rgb(58 166 255 / 0.12);
  text-shadow: 0 0 0.12em var(--glow), 0 0 0.7em var(--bloom);
}

#monitor::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 60%, rgb(0 0 0 / var(--vignette)) 100%),
    repeating-linear-gradient(to bottom, rgb(0 0 0 / var(--scanlines)) 0 1px, transparent 1px 3px);
}

/* the program's frame: heavy bars top and bottom, rules down the sides */
#titlebar,
#keys,
#screen {
  border-inline: 0.3em solid var(--frame);
  box-shadow: none;
}

#titlebar {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 0 0.6em;
  border-block: 0.3em solid var(--frame);
  color: var(--phosphor);
  white-space: pre;
}

#status { color: var(--phosphor-bright); }

#screen {
  padding: var(--top) 1.2em 0.25em;
  max-width: none;
  text-shadow: none;
  animation: none;
}

#keys {
  border-bottom: 0.4em solid var(--frame);
  font-size: 0.82em;
}

.keyrow {
  display: flex;
  border-top: 0.12em solid var(--frame);
}

.keyrow > * {
  flex: 1 1 auto;
  padding: 0.05em 0.6em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

#keys .keyrow:first-child > * + * { border-left: 0.12em solid var(--frame); }

#keys button {
  all: unset;
  flex: 1 1 auto;
  padding: 0.05em 0.6em;
  white-space: nowrap;
  cursor: pointer;
  color: var(--phosphor-bright);
}

#keys button:hover,
#keys button:focus-visible {
  background: var(--phosphor);
  color: var(--screen);
  text-shadow: none;
}


@media (prefers-reduced-motion: no-preference) {
  #monitor { animation: power-on 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}

/* shut off: the picture goes, and a dot of afterglow fades from the glass */
#monitor.off { text-shadow: none; }
#monitor.off #screen { border-color: transparent; }
#monitor.off > :not(#screen),
#monitor.off #screen > * { visibility: hidden; }

#monitor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, #e6f4ff 0, var(--phosphor-bright) 0.25em, transparent 1.1em);
}

@media (prefers-reduced-motion: no-preference) {
  #monitor.off > :not(#screen),
  #monitor.off #screen > * { animation: power-off 220ms ease-in; }
  #monitor.off::before { animation: afterglow 1600ms ease-out; }

  @keyframes power-off {
    0%   { visibility: visible; filter: none; }
    40%  { visibility: visible; filter: brightness(2.2); }
    100% { visibility: visible; filter: brightness(0); opacity: 0; }
  }

  @keyframes afterglow {
    0%   { opacity: 0; transform: scale(3, 1); }
    15%  { opacity: 1; transform: scale(1.4, 0.6); }
    100% { opacity: 0; transform: scale(0.4); }
  }
}

/* ---------- Under the monitor: the probe's buttons and the modem ---------- */
/* Two panels off the glass, side by side where there's room. */

#panels {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#panels > * { flex: 1 1 auto; }

/* The probe's panel steps it from pin to pin and quadrant to quadrant, on a
   call too (when the probe has to find the pin). */

#steps {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 14px;
  border-radius: 6px;
  background: linear-gradient(#1c1e25, #121318);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 6px 14px rgb(0 0 0 / 0.5);
  font: 600 11px / 1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8f9c;
}

#steps .model { margin-right: 4px; }

#steps button {
  all: unset;
  flex: 1 1 0;
  display: grid;
  place-items: center;
  padding: 7px 9px;
  border-radius: 4px;
  background: linear-gradient(#3a3d47, #262830);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 2px 0 #0a0b0e;
  white-space: nowrap;
  cursor: pointer;
  color: #e6e8ee;
  -webkit-tap-highlight-color: transparent;
}

#steps .decrypt { display: none; background: linear-gradient(#2f6fb0, #1f4c80); }
:root:has(#board.live) #steps .decrypt { display: grid; }
#steps button:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); }
#steps button:focus-visible { outline: 2px solid var(--frame); outline-offset: 2px; }

/* On a phone or a touch screen, the probe is small to drag: the panels
   stack, the buttons grow to a finger's size, and the keyboard's hints give
   the monitor's footer the room back. Once the pin's found, stepping is
   done with: one button puts the probe on it, one lifts it off. */
@media (max-width: 760px), (pointer: coarse) {
  #panels { flex-direction: column; }
  #steps button { min-height: 44px; padding: 0; }
  #keys .keyrow:first-child { display: none; }

  :root:has(#board.live) #steps button:not(.decrypt, .lift) { display: none; }
}

/* With a mouse, the panels share a row under the monitor; as the monitor
   narrows, they give up their names to keep it, then stack (and have the
   room for their names again). */
@media (min-width: 761px) and (pointer: fine) {
  @container (max-width: 800px) {
    #steps .model { display: none; }
  }

  @container (max-width: 710px) {
    #modem .model { display: none; }
    #modem .led:first-of-type { margin-left: auto; }
  }

  /* stacked, a row each, there's room for their names again */
  @container (max-width: 650px) {
    #steps .model,
    #modem .model { display: inline; }
    #modem .led:first-of-type { margin-left: 0; }
  }
}

/* phones: the probe's buttons need its name's room */
@media (max-width: 480px) {
  #steps .model { display: none; }
}

/* the narrowest phones: the panels' names give their buttons the room */
@media (max-width: 360px) {
  #modem .model { display: none; }

  #modem .led:first-of-type { margin-left: auto; }
}

/* the console has no probe */
:root[data-mode="console"] #steps { display: none; }

/* ---------- The modem: off the glass, under the monitor ---------- */

#modem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 14px;
  border-radius: 6px;
  background: linear-gradient(#1c1e25, #121318);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 6px 14px rgb(0 0 0 / 0.5);
  font: 600 11px / 1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8f9c;
}

#modem .model { margin-right: auto; }
#modem > *,
#steps > * { white-space: nowrap; }

#modem .led { display: inline-flex; align-items: center; gap: 6px; }

#modem .led::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3a1d16;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.5);
}

#modem:not([data-line="idle"]) [data-led="oh"]::before,
#modem[data-line="connected"] [data-led="cd"]::before {
  background: #ff5a3c;
  box-shadow: 0 0 6px #ff5a3c;
}

#modem button {
  all: unset;
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 4px;
  background: linear-gradient(#3a3d47, #262830);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 2px 0 #0a0b0e;
  color: #e6e8ee;
}

#modem #hangup:not(:disabled) { background: linear-gradient(#b8432c, #8a2c1b); }
#modem #decrypt:not(:disabled) { background: linear-gradient(#2f6fb0, #1f4c80); }
#modem button:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); }
#modem button:disabled { cursor: default; background: #1d1f25; box-shadow: none; color: #565a65; }
#modem button:focus-visible { outline: 2px solid var(--frame); outline-offset: 2px; }
#modem kbd { margin-left: 6px; font: inherit; font-weight: 400; opacity: 0.7; }

/* the decryption pin is a button only where there's no probe, and only
   the console goes fullscreen */
:root:not([data-mode="console"]) #decrypt,
:root:not([data-mode="console"]) #fullscreen { display: none; }

/* ---------- The bench ---------- */

#bench {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 16px);
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  font-family: var(--sans);
  text-shadow: none;
}

#board {
  display: block;
  width: 100%;
  height: auto;
  /* gives up height (and letterboxes) when the book needs the room */
  flex: 0 1 auto;
  min-height: 160px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.tray { fill: #14161c; stroke: #2a2e38; stroke-width: 2; }
.pcb { fill: #0e1b24; stroke: #1b2d38; stroke-width: 2; }
.traces path { fill: none; stroke: #1d3644; stroke-width: 3; stroke-linejoin: round; }
.holes circle { fill: #07080b; stroke: #6d6a5f; stroke-width: 2; }
.silk text { fill: #c6cbd2; opacity: 0.55; font: 600 11px var(--sans); letter-spacing: 0.05em; }
.dip .legs { fill: url(#legs); }
.dip .top { fill: url(#pink); stroke: #5e2335; }
.lightboard { fill: #0a0c10; stroke: #2d3240; stroke-width: 2; }
.lightboard ~ #lights circle { fill: #3d1a12; }
.connector { fill: #1c1e24; stroke: #3b3f4a; }
.chip { fill: #1b1d22; stroke: #34373f; stroke-width: 2; }
.lid { fill: #23262c; stroke: #3a3e47; }
.dot { fill: #0d0e11; }
.wires path { fill: none; stroke: #d9d6cc; stroke-width: 2.2; opacity: 0.75; }

/* the pins: the legs you see, and a bigger target around each */
.pin { cursor: pointer; outline: none; }
.pin .leg { fill: #a9b0bb; }
.pin .hit { fill: transparent; }
.pin:hover .leg { fill: #e6ebf2; }
.pin:focus-visible .leg { fill: #ffffff; stroke: var(--frame); stroke-width: 2; }
.pin.touched .leg { fill: #ffd36b; }

/* the lights on the daughterboard */
#lights circle.on { fill: #ff5b3a; }

@media (prefers-reduced-motion: no-preference) {
  #lights circle.on { animation: blink var(--rate, 1.6s) steps(1) infinite; animation-delay: var(--delay, 0s); }
  #board.live #lights circle.on { --rate: 0.35s; }

  @keyframes blink { 50% { fill: #3d1a12; } }
}

/* the probe */
#probe { cursor: grab; }
#board.dragging #probe { cursor: grabbing; }
#probe .grip { fill: transparent; }
#probe .needle { stroke: #d8dce3; stroke-width: 2.4; stroke-linecap: round; }
#probe .collar { fill: #8b919b; }
#probe .body { stroke: #050608; stroke-width: 1; }
#probe .led { fill: #2a2c31; }
#probe .led.hi.on { fill: #ff4b3e; }
#probe .led.lo.on { fill: #48e06a; }
#probe .led.pulse.on { fill: #ffbe3b; }
#probe .probe-label { fill: #c9cdd4; opacity: 0.7; font: 600 9px var(--sans); letter-spacing: 0.12em; }
#cable { fill: none; stroke: #101114; stroke-width: 7; stroke-linecap: round; }

@media (prefers-reduced-motion: no-preference) {
  #probe .led.pulse.on { animation: pulse 0.24s steps(1) infinite; }
  #probe.wild .led.on { animation: pulse 0.11s steps(1) infinite; }
  #probe.wild .led.lo.on { animation-delay: 0.05s; }

  @keyframes pulse { 50% { fill: #2a2c31; } }
}

/* ---------- Letter tiles: Bishop's anagrams ---------- */

#tiles {
  position: relative;
  flex: none;
  height: calc(var(--tile, 32px) * 2.6);
}

.tile {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tile, 32px);
  height: var(--tile, 32px);
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: linear-gradient(160deg, #e9be82, #c99256);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.18), 0 2px 4px rgb(0 0 0 / 0.5);
  color: #23170c;
  font: 600 calc(var(--tile, 32px) * 0.56) / 1 var(--sans);
}

.tile sub {
  position: absolute;
  right: 0.22em;
  bottom: 0.2em;
  font-size: 0.36em;
  line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .tile { transition: transform 900ms cubic-bezier(0.3, 0.7, 0.2, 1); }
}

/* ---------- The team: captions ---------- */

#captions {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35em;
  min-height: 6.5em;
  color: var(--caption);
  font: 400 clamp(14px, 1.15vw, 18px) / 1.35 var(--sans);
}

#captions p {
  display: grid;
  grid-template-columns: 6.6em minmax(0, 1fr);
  align-items: baseline;
  margin: 0;
}
#captions p.old { color: var(--caption-dim); }

#captions .who {
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #e7b46c;
}

#captions p.old .who { color: var(--caption-dim); }

@media (prefers-reduced-motion: no-preference) {
  #captions p { animation: caption-in 300ms ease-out both; }

  @keyframes caption-in { from { opacity: 0; transform: translateY(0.4em); } }

  #captions.fading p { opacity: 0; transition: opacity 1.4s ease-in; }
}

#credit { color: var(--caption-dim); }

/* the decryption pin, once found: a dab of paint off its end */
.pin .dab { fill: #e2405a; stroke: #7a1626; stroke-width: 1; }

/* ---------- On a call: the far end's screen fills the monitor ---------- */

#monitor[data-remote] { --cols: 80; }

#monitor[data-remote] #titlebar,
#monitor[data-remote] #keys { display: none; }

#monitor[data-remote] #screen {
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0.7em 1.5em 0.2em;
}

#monitor[data-remote] #display { display: flex; flex-direction: column; flex: none; }
#monitor[data-remote] #display p { white-space: pre; overflow-wrap: normal; }
#monitor[data-remote] #inputline { flex: none; margin-bottom: 0.4em; }

/* the Fed's ciphertext, pale green, as the film shows it */
#display p.cipher { color: #a8eab4; text-shadow: 0 0 0.12em rgb(140 230 160 / 0.5), 0 0 0.7em rgb(140 230 160 / 0.16); }

/* the churn: one fixed cell a character, so wide fallback glyphs keep
   their place; gray until it locks */
#display .cell {
  display: inline-block;
  width: calc(var(--advance) * 1em);
  height: calc(var(--leading) * 1em);
  overflow: hidden;
  vertical-align: top;
  text-align: center;
  white-space: pre;
  color: #bcd2dc;
  text-shadow: 0 0 0.12em rgb(188 210 220 / 0.4);
}

#display .cell.locked { color: inherit; text-shadow: inherit; }

/* [ ] Select Option: the command line inside the brackets */
.prompt-tail { white-space: pre; }
#monitor[data-bracket] .field { flex: none; width: calc(var(--advance) * 1em); min-width: 0; }

/* the drawn screens fill the glass, the ciphertext over them */
#monitor[data-remote="grid"] #display,
#monitor[data-remote="atc"] #display { flex: 1 1 0; min-height: 0; }

.remote-screen { position: relative; flex: 1 1 0; min-height: 0; }

.remote-screen .junk,
.remote-screen .art { position: absolute; inset: 0; width: 100%; height: 100%; }

.remote-screen .junk { overflow: hidden; }
.remote-screen .junk .cell.locked { color: inherit; }

/* a no from the far end */
@media (prefers-reduced-motion: no-preference) {
  #monitor.beep #screen { animation: beep 180ms steps(2) 1; }

  @keyframes beep { 50% { filter: brightness(1.7); } }
}

/* ---------- The power grid ---------- */

.art { text-shadow: none; overflow: visible; }
.art text { font-family: var(--font); }

.grid .frame { fill: none; stroke: #63b4ff; stroke-width: 3; }
.grid .frame.thin { stroke-width: 1.5; }
.grid .title { fill: #e4edff; font: 600 31px var(--sans); text-anchor: middle; }
.grid .subtitle { fill: #7aaeff; font: 600 19px var(--sans); text-anchor: middle; }
.grid .alarm { fill: #ff4b24; font: 600 26px var(--sans); text-anchor: middle; letter-spacing: 0.04em; }
.grid .sea { stroke: #3b2c9e; stroke-width: 1.4; }
.grid .land { fill: var(--screen); }
.grid .maze { fill: none; stroke: #2f66d8; stroke-width: 1.2; }
.grid .coast { fill: none; stroke: #7fd8ff; stroke-width: 2.6; stroke-linejoin: round; }
.grid .border { fill: none; stroke: #4f9cff; stroke-width: 1.6; stroke-linejoin: round; }
.grid .feeder { fill: none; stroke: #e2842e; stroke-width: 2.6; }
.grid .node { fill: #e2842e; stroke: #2a1406; }
.grid .node.picked { fill: #ffe46b; }
.grid .label { fill: #e8de6c; font-size: 19px; }
.grid .row { fill: transparent; }
.grid .box { fill: #2ea2e2; stroke: #c9eeff; stroke-width: 1; }
.grid .tick { fill: none; stroke: #0a1830; stroke-width: 2.5; visibility: hidden; }
.grid [aria-checked="true"] .tick { visibility: visible; }
.grid [aria-checked="true"] .box { fill: #ffe46b; }
.grid .buttons rect { fill: #1d8fc4; stroke: #9fe6ff; stroke-width: 2; }
.grid .button-label { fill: #d9f5ff; font-size: 19px; text-anchor: middle; }

.art .hot { cursor: pointer; outline: none; }
.grid .hot:hover .row,
.grid .hot:focus-visible .row { fill: rgb(99 180 255 / 0.22); }
.grid .buttons .hot:hover rect,
.grid .buttons .hot:focus-visible rect { fill: #46b6ec; stroke: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .grid .node.picked { animation: pulse-node 0.6s steps(1) infinite; }

  @keyframes pulse-node { 50% { fill: #e2842e; } }
}

/* ---------- Air traffic control ---------- */

.atc .ring { fill: none; stroke: #1f6a2c; stroke-width: 1.2; }
.atc .boundary { fill: none; stroke: #c6ceff; stroke-width: 2.4; stroke-dasharray: 1 7; stroke-linecap: round; }
.atc .airway { fill: none; stroke: #5b3fd0; stroke-width: 1.4; }
.atc .coast { fill: none; stroke: #45c4ff; stroke-width: 2.8; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgb(69 196 255 / 0.8)); }
.atc .fix { fill: none; stroke: #a57dff; stroke-width: 1.4; }
.atc .fix-name { fill: #b48fff; font-size: 19px; }
.atc .victor { fill: #b9d84a; font-size: 18px; }
.atc .plane text { font-size: 21px; }
.atc .plane path,
.atc .plane line { stroke-width: 1.6; }
.atc .plane.green text { fill: #5fe070; }
.atc .plane.green path,
.atc .plane.green line { stroke: #5fe070; }
.atc .plane.white text { fill: #f2f4ff; }
.atc .plane.white path,
.atc .plane.white line { stroke: #f2f4ff; }
.atc .column { fill: none; stroke: #c8341f; stroke-width: 3; }
.atc .strip { fill: #5050ee; stroke: #e5402a; stroke-width: 3; }
.atc .split { stroke: #e5402a; stroke-width: 2; }
.atc .strips text { fill: #ffb46c; font-size: 26px; }

@media (prefers-reduced-motion: no-preference) {
  .atc .plane { transition: transform 600ms steps(3); }
}

/* ---------- Carl's little black book ---------- */
/* red, open to two pages, numbers in his hand in blue ballpoint */

#book {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 4% 0 2%;
  padding: 7px 8px;
  border-radius: 7px;
  background: linear-gradient(170deg, #9a2326, #6c1418 60%, #4f0e12);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.4), 0 8px 18px rgb(0 0 0 / 0.6), 0 0 40px var(--lamp);
  transform: rotate(-1.2deg);
  font: 500 clamp(15px, 1.25vw, 19px) / 1.5 "Caveat", "Bradley Hand", cursive;
}

#book[hidden] { display: none; }

#book .page {
  display: flex;
  flex-direction: column;
  padding: 0.25em 0.6em 0.4em;
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(1.5em - 1px), rgb(110 140 200 / 0.45) calc(1.5em - 1px) 1.5em),
    #efe5cb;
  background-position: 0 0.25em;
  color: #1f2f86;
}

#book .page:first-child { border-radius: 3px 0 0 3px; box-shadow: inset -10px 0 12px -10px rgb(0 0 0 / 0.45); }
#book .page:last-child { border-radius: 0 3px 3px 0; box-shadow: inset 10px 0 12px -10px rgb(0 0 0 / 0.45); }

#book .entry {
  all: unset;
  display: block;
  cursor: pointer;
  border-radius: 40% 30% 45% 35%;
}

#book .entry > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#book .name { font-weight: 700; }
#book .note { margin-left: 0.6em; font-size: 0.85em; color: #4a5590; }

#book .entry:hover .number,
#book .entry:focus-visible .number { text-decoration: underline 1.5px; text-underline-offset: 0.15em; }
#book .entry:focus-visible { outline: 2px solid #3aa6ff; outline-offset: 1px; }


@media (prefers-reduced-motion: no-preference) {
  #book:not([hidden]) { animation: book-open 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  @keyframes book-open { from { opacity: 0; transform: translateY(1.5em) rotate(3deg) scale(0.92); } }
}

/* with the book out, the tiles (spelled, not scattered) and the captions
   give the box some room back on shorter screens */
#bench:has(#book:not([hidden])) #tiles { height: calc(var(--tile, 32px) * 1.5); }

@media (max-height: 860px) {
  #bench:has(#book:not([hidden])) #captions { min-height: 4.2em; }
  #bench:has(#book:not([hidden])) #captions p.old:nth-last-child(n+3) { display: none; }
}

/* ---------- The modes ---------- */

/* the story: the book is Carl's, to look at */
:root[data-mode="story"] #book .entry { cursor: default; }
:root[data-mode="story"] #book .entry:hover .number { text-decoration: none; }

/* on a phone, the book would crowd out the team's lines, and in the story
   it's Carl's anyway */
@media (max-width: 760px) {
  :root[data-mode="story"] #book { display: none; }
}

/* the bench: no team */
:root[data-mode="bench"] #captions { display: none; }

/* the console: the monitor is the whole window, its text centered on the
   glass and sized to fit across and down (the Fed's screen is ~27 lines) */
:root[data-mode="console"] #room { grid-template-columns: minmax(0, 1fr); }
:root[data-mode="console"] #bench,
:root[data-mode="console"] #keys .probe-keys { display: none; }

:root[data-mode="console"] #monitor {
  --cols: 80;
  --text: calc(var(--cols) * var(--advance) * 1em);
  font-size: clamp(12px, min(100cqi / (var(--cols) * var(--advance) + 3), (100dvh - var(--chrome, 150px)) / 27), 30px);
}

/* an encrypted screen decrypts at a tap */
:root[data-mode="console"] #monitor[data-encrypted] #screen { cursor: pointer; }

/* fullscreen: the monitor alone, edge to edge (the keyboard still decrypts
   and hangs up) */
:root.bare #panels,
:root.bare #credit { display: none; }
:root.bare #room { padding: 0; }
:root.bare #monitor { --chrome: 24px; border-radius: 0; box-shadow: none; }

:root[data-mode="console"] #screen,
:root[data-mode="console"] #monitor[data-remote] #screen {
  padding-inline: max(1.2em, (100% - var(--text)) / 2);
}

/* the console's directory, and the story's last screen: lines to pick */
#display .directory,
#display .menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#display .dial,
#display .choice {
  all: unset;
  margin-left: 2ch;
  padding: 0 0.5ch;
  white-space: pre;
  cursor: pointer;
  color: var(--phosphor-bright);
}

#display .dial:hover,
#display .dial:focus,
#display .choice:hover,
#display .choice:focus {
  background: var(--phosphor);
  color: var(--screen);
  text-shadow: none;
}

#display .choice .about { opacity: 0.75; }

/* ---------- Narrow screens: the bench above, the monitor below ---------- */

@media (max-width: 760px) {
  #room {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    padding: 8px;
    gap: 8px;
  }

  #bench { order: -1; max-height: 52dvh; gap: 4px; }
  #board { max-height: 26dvh; }
  #tiles { height: calc(var(--tile, 22px) * 2); }
  #captions { flex: none; min-height: 0; font-size: 13px; }
  #captions p.old { display: none; }
  #captions p.old:nth-last-child(2) { display: grid; }
  #monitor { --cols: 46; }
  #keys { font-size: 0.75em; }
}