/* Reactor Control Room 2026 · © 2026 Coen Vink · oddgamez.com · All rights reserved. Copying, redistributing or hosting this game elsewhere is not permitted. */
/* Control board front end.
   Layout: a fixed 1920×1080 enamel board scaled to fit the screen. Three columns —
   recorder + event log | annunciator, instruments, operator controls | generator/grid + trip.
   Single physical look, no theme switch. */
:root {
  --room: #1f2422;
  --enamel: #a3b6a5;
  --enamel-lo: #8a9d8c;
  --steel-a: #d0d4d3;
  --steel-b: #8d9393;
  --engrave: #ededE6;
  --ink: #1c1f1d;
  --tape: #e7dfc3;
  --lamp-amber: #ffb000;
  --phosphor: #74ff8f;
  --led-red: #ff4a3a;
  --font-plate: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-dial: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-crt: "Share Tech Mono", ui-monospace, Consolas, monospace;
  --font-hand: "Caveat", "Segoe Print", cursive;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.4 .9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  --grime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .22 0 0 0 0 .18 0 0 0 -1.6 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.28'/%3E%3C/svg%3E");
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 0%, #2d3431, var(--room) 70%);
  background-color: var(--room);
  color: var(--engrave); font-family: var(--font-plate);
  overflow: hidden;
}
[hidden] { display: none !important; }
.stage { position: fixed; inset: 0; overflow: hidden; }
.board {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0;
  border: 10px solid #2a302d; border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px #000;
  background: #3b4540;
  display: grid; gap: 3px;
  grid-template-columns: 520px minmax(0, 1fr) 470px;
  grid-template-rows: 230px 444px minmax(0, 1fr);
  grid-template-areas:
    "rec  ann    grid"
    "rec  gauges grid"
    "crt  ctrls  trip";
}
.section {
  position: relative; min-width: 0; min-height: 0;
  background-color: var(--enamel);
  background-image: var(--noise), var(--grime), linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.06) 60%, rgba(0,0,0,.12));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.18), inset 0 0 40px rgba(40,50,40,.25);
  padding: 24px 28px;
}
.a-rec { grid-area: rec; display: flex; flex-direction: column; }
.a-crt { grid-area: crt; display: flex; flex-direction: column; }
.a-ann { grid-area: ann; display: flex; flex-direction: column; gap: 12px; }
.a-gauges { grid-area: gauges; }
.a-ctrls { grid-area: ctrls; }
.a-grid { grid-area: grid; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.a-grid .unit-label { align-self: flex-start; margin-bottom: 0; }
.a-trip { grid-area: trip; }

.fs-btn {
  position: fixed; z-index: 5;
  right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-plate); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--engrave); background: rgba(16,18,17,.75); border: 1px solid #555; border-radius: 3px; padding: 6px 10px; cursor: pointer;
  opacity: .55; transition: opacity .2s;
}
.fs-btn:hover, .fs-btn:focus-visible { opacity: 1; }
/* Back to the OddGamez arcade (mirrors the Full screen button, bottom-left) */
.home-btn {
  position: fixed; z-index: 5;
  left: calc(10px + env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-plate); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--engrave); background: rgba(16,18,17,.75); border: 1px solid #555; border-radius: 3px; padding: 6px 10px;
  text-decoration: none; opacity: .55; transition: opacity .2s;
}
.home-btn:hover, .home-btn:focus-visible { opacity: 1; }
.home-btn:focus-visible { outline: 3px solid var(--lamp-amber); outline-offset: 4px; }

/* Screws */
.screw {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2f2f2, #9da3a2 45%, #555b5a 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,.55), inset 0 -1px 1px rgba(0,0,0,.35);
}
.screw::after {
  content: ""; position: absolute; left: 1px; right: 1px; top: 4.5px; height: 2px;
  background: #3a3f3e; border-radius: 1px; transform: rotate(var(--slot, 20deg));
  box-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Labels */
.plate {
  display: inline-block; text-align: center;
  background: linear-gradient(180deg, #2d2f2e, #101211); color: var(--engrave);
  font-weight: 600; font-size: 15px; line-height: 1.05; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px 4px; border-radius: 2px;
  text-shadow: 0 -1px 0 #000, 0 1px 0 rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.35), 0 2px 4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
}
.plate.blue { background: linear-gradient(180deg, #31506b, #1d3347); }
.plate.yellow { background: linear-gradient(180deg, #e9d35a, #c9ad2b); color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.title-plate { margin: 0; font-size: 20px; padding: 6px 16px; }
.dymo {
  display: inline-block; background: #121212; color: #f3f3f3; font-weight: 700; font-size: 12px; letter-spacing: .22em;
  padding: 3px 9px; border-radius: 2px; transform: rotate(-1deg);
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 -1px 0 #000;
  box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}
.dymo.blue { background: #1f4fa8; }
.tape {
  display: inline-block; background: var(--tape); color: #2b2a26; font-family: var(--font-hand); font-size: 18px; line-height: 1;
  padding: 4px 10px 5px; transform: rotate(1.5deg); box-shadow: 0 1px 2px rgba(0,0,0,.3);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);
          mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);
}
.unit-label { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.seg {
  font-family: var(--font-crt); color: var(--led-red); background: #0b0505; padding: 3px 9px; border-radius: 2px;
  font-size: 20px; letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: pre; text-align: center;
  text-shadow: 0 0 6px rgba(255,74,58,.75);
  box-shadow: inset 0 2px 6px #000, 0 1px 0 rgba(255,255,255,.3);
  border: 0;
}
.seg.amber { color: #ffb43a; text-shadow: 0 0 6px rgba(255,180,58,.7); }
.seg.green { color: #6dff86; text-shadow: 0 0 6px rgba(109,255,134,.6); }
.seg-pair { display: flex; gap: 6px; }
.seg-pair .seg { font-size: 16px; padding: 3px 6px; }

/* ---------- Annunciator ---------- */
.ann-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.head-readouts { display: flex; gap: 8px; align-items: center; }
.head-readouts .seg { min-width: 84px; }
.ann-housing {
  flex: 1; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1a1c1b, #0b0c0c); border-radius: 4px; padding: 9px 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 2px #000;
}
.annunciator { flex: 1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 6px; }
.tile {
  position: relative; display: grid; place-items: center; text-align: center; padding: 4px 3px;
  font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .02em; text-transform: uppercase;
  color: rgba(28, 24, 10, .78);
  background: linear-gradient(180deg, #7b7452, #625c40);
  border: 2px solid #000; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -6px 10px rgba(0,0,0,.25);
  transition: background .08s, box-shadow .08s;
}
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(170deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%); }
.tile.blank { color: transparent; background: linear-gradient(180deg, #3d3c34, #2c2b25); }
.tile.lit-amber { background: radial-gradient(ellipse at 50% 45%, #fff0b5, #ffc23a 55%, #d98a00); color: #3a2200; box-shadow: 0 0 18px rgba(255,176,0,.55), inset 0 0 8px rgba(255,255,255,.4); }
.tile.lit-red   { background: radial-gradient(ellipse at 50% 45%, #ffc1b5, #ff4a30 55%, #b8170b); color: #3b0500; box-shadow: 0 0 18px rgba(255,59,37,.6), inset 0 0 8px rgba(255,255,255,.35); }
.tile.lit-green { background: radial-gradient(ellipse at 50% 45%, #d7ffd9, #52e86e 55%, #1e9a3a); color: #06300f; box-shadow: 0 0 18px rgba(63,224,96,.5), inset 0 0 8px rgba(255,255,255,.4); }
.tile.lit-white { background: radial-gradient(ellipse at 50% 45%, #ffffff, #f4f1dc 60%, #cfc8a6); color: #2a2615; box-shadow: 0 0 16px rgba(255,250,220,.5); }
.blink-off .tile.flash { background: linear-gradient(180deg, #7b7452, #625c40); color: rgba(28,24,10,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -6px 10px rgba(0,0,0,.25); }

/* ---------- Recorder ---------- */
.recorder {
  flex: 1; display: flex; flex-direction: column; position: relative; border-radius: 5px; padding: 16px;
  background-image: var(--noise), linear-gradient(180deg, #8f9897, #687170);
  box-shadow: 0 10px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px #3d4443;
}
.recorder-window { flex: 1; position: relative; border-radius: 3px; overflow: hidden; background: #f4f1e6; box-shadow: inset 0 3px 8px rgba(0,0,0,.55), 0 0 0 3px #2b302f; }
.recorder-window canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.recorder-window::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.35), rgba(255,255,255,0) 35%, rgba(255,255,255,0) 70%, rgba(255,255,255,.12));
}
.recorder-scale { display: flex; justify-content: space-between; font-family: var(--font-crt); font-size: 12px; color: #eef0ea; margin-top: 8px; }
.pen-pwr { color: #ff9c90; } .pen-tf { color: #9cc6ff; } .pen-out { color: #f4f4f4; } .pen-dm { color: #8dff9e; }
.recorder { margin-bottom: 26px; }
.recorder .dymo { position: absolute; right: 16px; bottom: -10px; }

/* Scoreboard */
.scoreboard {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px;
  background: linear-gradient(180deg, #1a1c1b, #0b0c0c); border-radius: 4px; padding: 10px 12px 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 2px #000;
}
.sb-title { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.sb-title .dymo { font-size: 10px; letter-spacing: .14em; }
.sb-cell { display: grid; gap: 3px; }
.sb-cell > span { font-weight: 700; font-size: 11px; letter-spacing: .12em; color: #c9cfc8; text-align: center; }
.sb-cell .seg { font-size: 19px; }
.blink-off .seg.flash { color: #3a1410; text-shadow: none; }
.seg.bump { color: #fff3c4; text-shadow: 0 0 12px rgba(255,220,120,.95); }
.recorder .tape { position: absolute; left: 20px; bottom: -14px; }

/* ---------- CRT ---------- */
.crt-bezel {
  flex: 1; display: flex; position: relative; min-height: 0;
  background: linear-gradient(180deg, #2a2c2b, #121313); border-radius: 8px; padding: 18px 18px 28px;
  box-shadow: 0 10px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15), inset 0 0 0 2px #000;
}
.crt {
  flex: 1; position: relative; overflow: hidden; border-radius: 14px / 20px; display: flex; flex-direction: column; min-height: 0;
  background: radial-gradient(ellipse at 50% 45%, #0f2a15, #04100a 75%, #010503);
  box-shadow: inset 0 0 30px rgba(0,0,0,.9), inset 0 0 4px rgba(116,255,143,.25);
  padding: 12px 16px;
  font-family: var(--font-crt); font-size: 14px; line-height: 1.45; color: var(--phosphor);
  text-shadow: 0 0 5px rgba(116,255,143,.7); text-transform: uppercase;
}
.crt::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at 30% 15%, rgba(255,255,255,.12), transparent 45%); }
.crt-head { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(116,255,143,.4); padding-bottom: 3px; margin-bottom: 4px; }
.crt-log { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.crt-log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.crt-log li.e { background: var(--phosphor); color: #031007; text-shadow: none; }
.crt-log li.w { color: #d9ffe0; text-shadow: 0 0 8px rgba(190,255,200,.9); }
.crt-log li.cursor::after { content: "█"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.crt-knobs { position: absolute; right: 18px; bottom: 8px; display: flex; gap: 8px; }
.crt-knobs i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #666, #111); box-shadow: 0 1px 1px #000; }
.crt-knobs i.pwr { background: radial-gradient(circle at 40% 35%, #b6ffbf, #2fb54a); box-shadow: 0 0 6px rgba(63,224,96,.7); }

/* ---------- Gauges ---------- */
.gauges { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 14px 22px; align-items: center; }
.gauge { display: grid; justify-items: center; gap: 8px; }
.gauge svg { width: 156px; max-width: 100%; aspect-ratio: 1; display: block; filter: drop-shadow(0 8px 8px rgba(0,0,0,.45)); }
.gauge .plate { font-size: 14px; }
.needle { transition: transform .3s cubic-bezier(.3,.7,.4,1.2); }

/* ---------- Generator & grid ---------- */
.out-gauge svg { width: 292px; aspect-ratio: 1; display: block; filter: drop-shadow(0 10px 10px rgba(0,0,0,.45)); }
.out-legend { display: flex; gap: 16px; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.out-legend span { display: flex; align-items: center; gap: 6px; }
.out-legend i { width: 16px; height: 4px; border-radius: 2px; }
.out-legend i.t { width: 0; height: 0; border-radius: 0; border: 6px solid transparent; border-top: 9px solid #ffb000; border-bottom: 0; }
.out-legend i.k { background: #111; } .out-legend i.r { background: #d42a1c; } .out-legend i.g { background: #3daa4f; height: 7px; }
.grid-readouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.readout { display: grid; gap: 3px; }
.readout > span { font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--ink); text-align: center; }
.grid-actions { display: flex; gap: 22px; align-items: center; }
.grid-actions .tape { font-size: 19px; rotate: -3deg; }
.trip-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin-top: auto; }
.trip-status .seg { font-size: 15px; min-width: 150px; }
.trip-status .lamps { gap: 18px; }

/* ---------- Controls ---------- */
.controls { height: 100%; display: flex; gap: 18px; justify-content: space-between; align-items: center; }
.ctl { display: grid; justify-items: center; gap: 10px; position: relative; }
.ctl.row { grid-template-columns: 90px auto; justify-items: start; align-items: center; gap: 14px; }
.ctl.row .plate { width: 90px; }
.ctl > .seg { min-width: 120px; font-size: 18px; }
.escutcheon {
  position: relative; width: 140px; height: 160px; border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 2px, transparent 2px 3px),
    linear-gradient(155deg, var(--steel-a), var(--steel-b) 55%, #b9bebd);
  box-shadow: 0 3px 5px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(0,0,0,.25);
  display: grid; place-items: center;
}
.escutcheon.small { width: 116px; height: 140px; }
.escutcheon.cont { height: 150px; }
.escutcheon.big { width: 176px; height: 180px; }
.pos { position: absolute; font-weight: 700; font-size: 15px; color: #1c1d1d; letter-spacing: .04em; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.knob {
  --rot: 0deg;
  position: relative; width: 74px; height: 74px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.05) 0 6deg, rgba(0,0,0,.2) 6deg 12deg),
    radial-gradient(circle at 40% 32%, #4b4b4b, #1a1a1a 58%, #050505);
  box-shadow: 0 7px 9px rgba(0,0,0,.5), 0 2px 2px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.2);
  transform: rotate(var(--rot)); transition: transform .14s ease-out;
  touch-action: none; -webkit-tap-highlight-color: transparent; margin-top: 20px;
}
.escutcheon.small .knob { width: 60px; height: 60px; margin-top: 18px; }
.knob-bar {
  position: absolute; left: 50%; top: 50%; width: 27px; height: 92px; translate: -50% -50%; border-radius: 13px 13px 10px 10px;
  background: linear-gradient(90deg, #0b0b0b, #3d3d3d 38%, #1b1b1b 70%, #080808);
  box-shadow: 0 4px 6px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.18);
}
.escutcheon.small .knob-bar { width: 22px; height: 74px; }
.knob-bar::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 24px; translate: -50% 0; background: #f2f0e6; border-radius: 2px; }
.knob:disabled { cursor: not-allowed; }

/* Continuous rotary knob with printed scale */
.dialwrap { position: relative; width: 124px; height: 124px; }
.dialwrap.big { width: 158px; height: 158px; }
.dialwrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.knob.round {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; cursor: ns-resize;
  box-shadow: 0 0 0 5px #222, 0 0 0 6px #000, 0 8px 10px 4px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.2);
  transition: transform .06s linear;
}
.dialwrap.big .knob.round { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
.knob.round::before { /* aluminium centre cap */
  content: ""; position: absolute; inset: 28%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f4f4f4, #a8adac 55%, #6d7372);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.knob.round::after { content: ""; position: absolute; left: 50%; top: 4px; width: 4px; height: 15px; translate: -50% 0; background: #f2f0e6; border-radius: 2px; }
.dialwrap.big .knob.round::after { height: 19px; background: #ff5a3c; }

.knob:focus-visible, .pb:focus-visible, .scram-btn:focus-visible, .scram-cover:focus-visible, .fs-btn:focus-visible { outline: 3px solid var(--lamp-amber); outline-offset: 4px; }
.ctl .tape { position: absolute; bottom: -34px; font-size: 17px; white-space: nowrap; }

/* Lamps */
.lamps { display: flex; gap: 10px; }
.lamp {
  width: 24px; height: 24px; border-radius: 50%; position: relative; display: inline-block;
  background: radial-gradient(circle at 40% 35%, var(--lens-hi), var(--lens) 60%, var(--lens-lo));
  box-shadow: 0 0 0 3px #c4c9c8, 0 0 0 4px #555, 0 3px 4px 3px rgba(0,0,0,.35);
  filter: brightness(.42) saturate(.7);
}
.lamp::after { content: ""; position: absolute; left: 22%; top: 18%; width: 33%; height: 22%; border-radius: 50%; background: rgba(255,255,255,.55); }
.lamp.big { width: 36px; height: 36px; }
.lamp.red { --lens-hi: #ffb4a8; --lens: #e3261a; --lens-lo: #7c0c05; }
.lamp.green { --lens-hi: #c6ffcd; --lens: #2fbf4f; --lens-lo: #0d5a1e; }
.lamp.on { filter: none; }
.lamp.red.on { box-shadow: 0 0 0 3px #c4c9c8, 0 0 0 4px #555, 0 0 18px 4px rgba(255,59,37,.6); }
.lamp.green.on { box-shadow: 0 0 0 3px #c4c9c8, 0 0 0 4px #555, 0 0 18px 4px rgba(63,224,96,.55); }

/* Illuminated pushbuttons */
.pb {
  width: 68px; height: 68px; border: 0; padding: 0; cursor: pointer; border-radius: 4px;
  background: linear-gradient(180deg, #d5d9d8, #8b9191);
  box-shadow: 0 4px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7);
  display: grid; place-items: center; touch-action: none; font-family: var(--font-plate);
}
.pb .lens {
  width: 50px; height: 50px; border-radius: 3px; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; letter-spacing: .05em; line-height: 1;
  background: radial-gradient(circle at 40% 35%, var(--lens-hi), var(--lens) 60%, var(--lens-lo));
  color: rgba(0,0,0,.65);
  box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.4);
  filter: brightness(.55) saturate(.8); transition: transform .06s;
}
.pb.mini { width: 54px; height: 40px; }
.pb.mini .lens { width: 44px; height: 30px; font-size: 11px; }
.pb.on .lens { filter: none; box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 16px 3px var(--glow); }
.blink-off .pb.flash .lens { filter: brightness(.55) saturate(.8); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.pb:active .lens, .pb.held .lens { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.pb.amber { --lens-hi: #fff2b8; --lens: #ffbf2e; --lens-lo: #a06a00; --glow: rgba(255,176,0,.6); }
.pb.blue { --lens-hi: #d9e9ff; --lens: #5b95e0; --lens-lo: #1d4a8a; --glow: rgba(90,150,240,.6); }
.pb.blue .lens { font-size: 11px; }
.pb.white { --lens-hi: #ffffff; --lens: #ece8d0; --lens-lo: #9d9781; --glow: rgba(255,250,220,.6); }
.pb.black .lens { --lens-hi: #555; --lens: #222; --lens-lo: #000; color: #ddd; filter: none; }

/* ---------- Trip ---------- */
.trip { height: 100%; display: flex; justify-content: space-evenly; align-items: center; gap: 16px; }
.trip-buttons { display: grid; gap: 14px; }
.scram-unit { display: grid; justify-items: center; gap: 14px; }
.scram-guard-container {
  position: relative; display: inline-block; perspective: 420px;
  padding: 18px; border-radius: 6px;
  background: linear-gradient(180deg, #1d1f1e, #0a0b0b);
  box-shadow: 0 8px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15);
}
.scram-guard-container::before {
  content: ""; position: absolute; inset: 5px; border-radius: 4px; pointer-events: none;
  border: 7px solid transparent;
  background: repeating-linear-gradient(45deg, #e8c21d 0 9px, #111 9px 18px) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9;
}
.scram-well { width: 172px; height: 172px; border-radius: 6px; display: grid; place-items: center; background: radial-gradient(circle, #2a2a2a, #121212 70%); box-shadow: inset 0 4px 10px #000; }
.scram-btn {
  width: 130px; height: 130px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 8px solid #2b2b2b;
  background: radial-gradient(circle at 38% 30%, #ff9a8c, #e3261a 42%, #8e1209 85%);
  box-shadow: 0 0 0 3px #555, 0 9px 0 #5a0c06, 0 14px 16px rgba(0,0,0,.6), inset 0 -6px 10px rgba(0,0,0,.35);
  transition: transform .06s, box-shadow .06s;
}
.scram-btn:active { transform: translateY(6px); box-shadow: 0 0 0 3px #555, 0 3px 0 #5a0c06, 0 5px 8px rgba(0,0,0,.6), inset 0 -6px 10px rgba(0,0,0,.35); }
.scram-cover {
  position: absolute; inset: 12px; z-index: 2; cursor: pointer; border-radius: 12px 12px 8px 8px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.45), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(232,38,24,.86), rgba(150,14,6,.92));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), inset 0 -10px 18px rgba(0,0,0,.35), 0 8px 12px rgba(0,0,0,.45);
  transition: transform .35s cubic-bezier(.3,.8,.4,1); transform-origin: top;
  display: grid; place-items: end center; padding-bottom: 12px;
  font-weight: 700; font-size: 13px; letter-spacing: .18em; color: rgba(255,255,255,.75);
}
.scram-cover::before { content: ""; position: absolute; top: -6px; left: 18%; right: 18%; height: 9px; border-radius: 3px; background: linear-gradient(180deg, #d0d4d3, #6f7575); box-shadow: 0 1px 2px #000; }
.scram-cover.open { transform: rotateX(110deg); }
.scram-plate { font-size: 24px; letter-spacing: .14em; padding: 6px 24px; }

/* ---------- Operator pause ---------- */
.paused { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; cursor: pointer; background: rgba(12,14,13,.42); }
.paused-card {
  padding: 26px 40px; display: grid; gap: 14px; justify-items: center;
  background: linear-gradient(180deg, #2d2f2e, #101211); border-radius: 6px;
  box-shadow: 0 30px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 3px #000;
}
.paused-card .plate { font-size: 28px; letter-spacing: .14em; padding: 8px 24px; }
.paused-card p { margin: 0; font-family: var(--font-dial); font-size: 18px; color: #e2e6e3; }
.paused-card b { border: 1px solid #888; border-radius: 3px; padding: 0 6px; }

/* World top 20 */
.lb { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, rgba(20,30,25,.75), rgba(0,0,0,.9)); }
.lb[hidden] { display: none; }
.lb-card {
  width: 720px; padding: 26px 40px; display: grid; gap: 14px; justify-items: center;
  background: linear-gradient(180deg, #2d2f2e, #101211); border-radius: 6px; box-shadow: 0 0 0 2px #555, 0 20px 60px rgba(0,0,0,.6);
}
.lb-card h2 { margin: 0; font-family: var(--font-plate); font-size: 40px; letter-spacing: .1em; text-transform: uppercase; color: var(--lamp-amber); text-shadow: 0 0 18px rgba(255,176,0,.55); }
.lb-sub, .lb-msg { margin: 0; font-family: var(--font-crt); font-size: 14px; color: #9fb3a6; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.lb-msg { color: var(--phosphor); }
.lb-crt { width: 100%; background: #031008; border-radius: 10px; padding: 14px 18px; box-shadow: inset 0 0 30px rgba(0,0,0,.9), 0 0 0 4px #111; }
.lb-list { list-style: none; margin: 0; padding: 0; height: 430px; overflow-y: auto; font-family: var(--font-crt); font-size: 19px; line-height: 1.6; color: var(--phosphor); text-shadow: 0 0 6px rgba(116,255,143,.55); }
.lb-list li { display: grid; grid-template-columns: 44px 1fr 40px 110px; gap: 12px; text-align: left; }
.lb-list li .r { opacity: .6; }
.lb-list li .g { text-align: center; color: var(--lamp-amber); }
.lb-list li .s { text-align: right; }
.lb-list li.note { display: block; text-align: center; opacity: .8; padding-top: 150px; }
.lb-actions { display: flex; align-items: center; gap: 48px; }
.lb-link { font-family: var(--font-plate); font-weight: 600; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--engrave); text-decoration: none; }
.lb-link:hover, .lb-link:focus-visible { color: var(--lamp-amber); }

@media (prefers-reduced-motion: reduce) {
  .knob, .scram-cover, .needle, .tile { transition: none; }
  .crt-log li.cursor::after { animation: none; }
}