/* Realism kit for CHAIN REACTION modules: metal, physical buttons, glass screens, LEDs.
   Every new module uses these instead of flat web styling. */
:root {
  /* procedural brushed-metal grain (SVG turbulence), tiled */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9 0.04' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.35'/></svg>");
  --speck: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 -.35'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
}

.k-metal {
  background: var(--grain), var(--speck), linear-gradient(165deg, #6b7178 0%, #4c5258 40%, #353a40 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 6px rgba(0,0,0,.5);
}

/* a physical push button: rounded top, bevel light from above, travel when pressed */
.k-btn {
  position: relative; border: none; border-radius: 10px; cursor: pointer;
  font: 800 18px var(--sans); color: #1b1d20; letter-spacing: 1px;
  background: linear-gradient(180deg, #f2f3f4 0%, #c9cdd2 55%, #a9aeb4 100%);
  box-shadow: 0 6px 0 #5d6268, 0 8px 12px rgba(0,0,0,.55), inset 0 2px 1px rgba(255,255,255,.9), inset 0 -3px 4px rgba(0,0,0,.25);
  transition: transform 50ms, box-shadow 50ms;
}
.k-btn:active, .k-btn.down { transform: translateY(5px); box-shadow: 0 1px 0 #5d6268, 0 2px 4px rgba(0,0,0,.5), inset 0 2px 3px rgba(0,0,0,.25); }
.k-btn.red { color: #fff; background: linear-gradient(180deg, #ff6b5e, #d6342a 55%, #a52119); box-shadow: 0 6px 0 #5e120d, 0 8px 12px rgba(0,0,0,.55), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -3px 4px rgba(0,0,0,.3); }
.k-btn.dark { color: #e8eaec; background: linear-gradient(180deg, #4d535a, #2e3237 60%, #24272b); box-shadow: 0 6px 0 #101214, 0 8px 12px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.25); }
.k-btn.amber { background: linear-gradient(180deg, #ffd66b, #f0a92a 55%, #c27c0e); box-shadow: 0 6px 0 #6b4306, 0 8px 12px rgba(0,0,0,.55), inset 0 2px 1px rgba(255,255,255,.6); }

/* glass screen: dark, slightly green, with a sheen and scanlines */
.k-lcd {
  position: relative; border-radius: 6px; padding: 8px 12px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px), linear-gradient(180deg, #0d1a12, #06100a);
  color: #6dfb9a; font: 700 28px var(--mono); letter-spacing: 3px; text-shadow: 0 0 8px rgba(109,251,154,.7);
  box-shadow: inset 0 0 0 2px #1a1d20, inset 0 0 0 4px #3b4046, inset 0 6px 16px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.15);
}
.k-lcd::after { content: ''; position: absolute; inset: 4px; border-radius: 4px; background: linear-gradient(160deg, rgba(255,255,255,.14), transparent 40%); pointer-events: none; }
.k-lcd.amber { color: #ffb347; text-shadow: 0 0 8px rgba(255,179,71,.7); background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px), linear-gradient(180deg, #1c1206, #0e0903); }
.k-lcd.red { color: #ff5a4e; text-shadow: 0 0 8px rgba(255,90,78,.8); background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px), linear-gradient(180deg, #1c0806, #0e0403); }

.k-led { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6a6f74, #2a2d30 70%); box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 0 0 3px #1c1f22, 0 1px 0 4px rgba(255,255,255,.08); }
.k-led.red { background: radial-gradient(circle at 35% 30%, #ffd2cc, #ff3b30 45%, #7a1410); box-shadow: 0 0 12px #ff3b30, 0 0 0 3px #1c1f22; }
.k-led.green { background: radial-gradient(circle at 35% 30%, #d4ffe6, #22c55e 45%, #0f6b33); box-shadow: 0 0 12px #22c55e, 0 0 0 3px #1c1f22; }
.k-led.yellow { background: radial-gradient(circle at 35% 30%, #fff6c9, #facc15 45%, #8a6d00); box-shadow: 0 0 12px #facc15, 0 0 0 3px #1c1f22; }
.k-led.blue { background: radial-gradient(circle at 35% 30%, #d6e6ff, #3b82f6 45%, #173d7a); box-shadow: 0 0 12px #3b82f6, 0 0 0 3px #1c1f22; }
.k-led.white { background: radial-gradient(circle at 35% 30%, #fff, #e8eef5 45%, #9aa3ad); box-shadow: 0 0 12px #fff, 0 0 0 3px #1c1f22; }

/* engraved plate / label */
.k-plate { display: inline-block; padding: 3px 10px; border-radius: 3px; font: 800 12px var(--mono); letter-spacing: 2px; color: #24272b;
  background: var(--grain), linear-gradient(180deg, #d9dde2, #9ea5ad); box-shadow: inset 0 -1px 0 rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.6); }
.k-screw { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e3e6ea, #7d848b 55%, #3a3f45); box-shadow: 0 1px 2px rgba(0,0,0,.7); position: relative; }
.k-screw::after { content: ''; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; background: #2a2e33; transform: rotate(40deg); }
.k-recess { border-radius: 8px; background: #1b1e22; box-shadow: inset 0 3px 10px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.12); }

/* ---------- CHAIN REACTION: the case and the desk ---------- */
#bomb.chain .face-metal { background: var(--grain), var(--speck), linear-gradient(170deg, #4f5a52 0%, #3b443e 45%, #2a302c 100%);
  box-shadow: inset 0 0 0 4px #1d221f, inset 0 0 0 7px #5d6a61, inset 0 0 60px rgba(0,0,0,.6); }
#bomb.chain .face.side { border-radius: 18px; }
#bomb.chain .face.top .face-metal, #bomb.chain .face.bottom .face-metal { background: var(--grain), var(--speck), linear-gradient(180deg, #4a544d, #303732); }
#bomb.chain .slot .plate { display: none; }
#bomb.chain .mod-well { background: var(--grain), linear-gradient(170deg, #5c6168 0%, #3f444a 50%, #2d3136 100%); box-shadow: inset 0 0 0 3px #1a1c1f, inset 0 0 0 5px #6b7178, 0 6px 14px rgba(0,0,0,.6); border-radius: 12px; }
#bomb.chain .mod-well::before, #bomb.chain .mod-well::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e3e6ea, #7d848b 55%, #3a3f45); top: 6px; left: 6px; box-shadow: 404px 0 0 0 #8a9198, 0 404px 0 0 #8a9198, 404px 404px 0 0 #8a9198; }
#bomb.chain .mod-well::after { display: none; }
#bomb.chain .slot .led { top: 58px; right: 34px; width: 16px; height: 16px; z-index: 3; }
#bomb.chain .slot.empty .mod-well { background: var(--grain), linear-gradient(170deg, #4b5052, #33373a); }
#bomb.chain .slot.empty .mod-well::after { display: block; content: 'BLANK'; position: absolute; inset: 0; width: auto; height: auto; background: none; box-shadow: none; display: grid; place-items: center; font: 800 18px var(--mono); letter-spacing: 6px; color: rgba(255,255,255,.08); }
#bomb.chain .slot { transition: opacity 300ms; }
#bomb.chain.zoomed .slot:not(.focus) { opacity: .35; }
#bomb.chain .stamp { font-size: 30px; }
.desk { position: absolute; left: -1800px; top: -1100px; width: 3600px; height: 2200px; transform-style: preserve-3d;
  background: radial-gradient(ellipse 34% 30% at 50% 50%, rgba(0,0,0,.65), transparent 70%), repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 3px, transparent 3px 41px), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 17px), linear-gradient(180deg, #4a3222, #3a2618 60%, #2b1c12); pointer-events: none; }

/* link plates above a slot */
.linkbar { position: absolute; left: 20px; right: 20px; top: 10px; height: 34px; display: flex; gap: 8px; justify-content: space-between; align-items: center; z-index: 4; pointer-events: none; }
.lk-port, .lk-in { display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 4px; font: 800 16px var(--mono); letter-spacing: 1px; color: #1f2226; background: var(--grain), linear-gradient(180deg, #f2d27a, #c9a136); box-shadow: inset 0 -1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.6); }
.lk-port small { font-size: 10px; opacity: .7; }
.lk-out { margin-left: 6px; padding: 1px 6px; border-radius: 3px; background: #07100a; color: #3b5a45; font-size: 15px; }
.lk-out.on { color: #6dfb9a; text-shadow: 0 0 6px rgba(109,251,154,.8); }
.lk-in { background: var(--grain), linear-gradient(180deg, #9fd0ff, #5c97d6); }
.lk-in span { font-size: 11px; opacity: .75; }
.lk-in.on { box-shadow: 0 0 10px #6dfb9a, inset 0 -1px 0 rgba(0,0,0,.3); }

/* edgework on the narrow edges */
.edgework { position: absolute; inset: 40px 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 14px; }
.ew-serial { background: #f3f0e6; color: #111; padding: 8px 18px; border-radius: 3px; font: 800 44px var(--mono); letter-spacing: 4px; transform: rotate(-2deg); box-shadow: 0 3px 6px rgba(0,0,0,.6); text-align: center; }
.ew-serial small { display: block; font-size: 12px; letter-spacing: 3px; }
.ew-bat { display: flex; gap: 6px; padding: 8px; border-radius: 6px; background: #1d1f22; box-shadow: inset 0 2px 6px #000; }
.ew-bat span { display: grid; place-items: center; width: 160px; height: 46px; border-radius: 6px; font: 900 18px var(--sans); color: #fff; background: linear-gradient(180deg, #e8a92a 0 30%, #2b2b2b 30% 100%); box-shadow: inset 0 2px 2px rgba(255,255,255,.3); }
.ew-bat.D span { width: 220px; height: 70px; background: linear-gradient(180deg, #c0392b 0 30%, #2b2b2b 30% 100%); }
.ew-bat.AA { flex-direction: column; }
.ew-ind { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 6px; background: #ece7da; color: #111; font: 900 34px var(--mono); letter-spacing: 4px; box-shadow: 0 3px 6px rgba(0,0,0,.6); }
.ew-ind i { width: 22px; height: 22px; border-radius: 50%; background: #3a3a3a; box-shadow: inset 0 1px 3px #000; }
.ew-ind.lit i { background: radial-gradient(circle at 35% 30%, #fff6c9, #facc15 45%, #8a6d00); box-shadow: 0 0 14px #facc15; }
.ew-port { display: flex; align-items: center; gap: 12px; font: 800 22px var(--mono); color: #d8dde2; }
.ew-port i { display: block; width: 90px; height: 34px; border-radius: 4px; background: #111; box-shadow: inset 0 0 0 4px #777, inset 0 3px 6px #000; }
.ew-port i.p-USB { width: 60px; height: 22px; border-radius: 3px; }
.ew-port i.p-AUX { width: 34px; height: 34px; border-radius: 50%; }
.ew-port i.p-ETH { width: 56px; height: 46px; }

/* the clock module */
.clock-mod { position: absolute; inset: 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.clock-glass { padding: 18px 22px; border-radius: 10px; background: #050505; box-shadow: inset 0 0 0 4px #2a2a2a, inset 0 0 0 7px #555, inset 0 8px 20px #000; }
.clock-lcd { width: 300px; }
.clock-strikes { display: flex; gap: 18px; }
.clock-strikes .k-led { width: 26px; height: 26px; }
.clock-brand { font: 800 13px var(--mono); letter-spacing: 4px; color: rgba(255,255,255,.35); }

#hud.zoomed .turn-btn { display: none; }

/* ---------- mechanical controls (the Echo console rules) ----------
   1. Controls are physical: a key has a body under it and real travel (4px), and the body
      shadow collapses when it goes down. 2. Milled faces, light from above, no glow on chrome.
   3. Every control reports: a sound, plus a visible change of state. 4. Hue only for status:
   green done, amber accent/pointer, red strike. 5. Motion: the camera is the one authored
   moment; controls move fast (60-120 ms) and then hold still. Nothing idles or blinks for show. */
:root { --k-amber: #f0c14b; --k-live: #7fd48a; --k-alarm: #ff6b5e; }
.mod { font-variant-numeric: tabular-nums; }
.mod button:focus-visible { outline: 2px solid var(--k-amber); outline-offset: 3px; }
.k-btn { box-shadow: 0 4px 0 #4b5056, 0 6px 10px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(255,255,255,.75), inset 0 -3px 4px rgba(0,0,0,.25); transition: transform 60ms, box-shadow 60ms; }
.k-btn:active, .k-btn.down { transform: translateY(4px); box-shadow: 0 0 0 #4b5056, 0 1px 3px rgba(0,0,0,.5), inset 0 2px 3px rgba(0,0,0,.25); }

/* keycap: square, milled concentric face, engraved legend */
.k-key { position: relative; width: 72px; height: 72px; border: none; border-radius: 9px; cursor: pointer; display: grid; place-items: center;
  font: 800 28px var(--sans); color: #1c1f23;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), linear-gradient(180deg, #eceef0 0%, #c8ccd1 60%, #b0b5bb 100%);
  box-shadow: 0 4px 0 #0b0b0b, 0 6px 10px rgba(0,0,0,.6), inset 0 1.5px 0 rgba(255,255,255,.33), inset 0 -2px 3px rgba(0,0,0,.2);
  transition: transform 60ms, box-shadow 60ms; }
.k-key:active, .k-key.down { transform: translateY(4px); box-shadow: 0 0 0 #0b0b0b, 0 1px 3px rgba(0,0,0,.6), inset 0 2px 4px rgba(0,0,0,.3); }
.k-key.dark { color: #e9ebee; background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.04) 0 1px, transparent 1px 3px), linear-gradient(180deg, #4a5056, #2c3035 70%, #23262a); }
.k-key.done { color: #1d5c32; box-shadow: 0 0 0 #0b0b0b, inset 0 2px 4px rgba(0,0,0,.3), inset 0 0 0 2px var(--k-live); transform: translateY(4px); }

/* toggle switch: hex nut and a metal bat that snaps up or down */
.k-toggle { position: relative; width: 56px; height: 104px; border: none; padding: 0; background: none; cursor: pointer; }
.k-toggle::before { content: ''; position: absolute; left: 6px; top: 30px; width: 44px; height: 44px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #8d949b 0 30deg, #6c737a 30deg 60deg); box-shadow: 0 2px 3px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.4); }
.k-toggle::after { content: ''; position: absolute; left: 18px; top: 42px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3f45, #121417); }
.k-toggle i { position: absolute; left: 21px; top: 6px; width: 14px; height: 48px; border-radius: 7px; z-index: 1;
  background: linear-gradient(90deg, #8e959c, #f1f3f5 40%, #a7adb3 70%, #6b7178); box-shadow: 0 3px 4px rgba(0,0,0,.6);
  transform-origin: 50% 46px; transform: rotate(0deg); transition: transform 90ms cubic-bezier(.5,1.8,.6,1); }
.k-toggle.down i { transform: rotate(180deg); }
.k-toggle i::after { content: ''; position: absolute; left: -2px; top: -2px; width: 18px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #b9bfc5 60%, #7c838a); }

/* rotary knob: knurled skirt, machined cap, amber pointer; set --deg */
.k-knob { position: relative; width: 132px; height: 132px; border-radius: 50%; border: none; padding: 0; cursor: grab;
  background: repeating-conic-gradient(from 0deg, #2a2e33 0 3deg, #4c535a 3deg 6deg);
  box-shadow: 0 6px 0 #0b0b0b, 0 8px 14px rgba(0,0,0,.6), inset 0 1.5px 0 rgba(255,255,255,.3); }
.k-knob .cap { position: absolute; inset: 14px; border-radius: 50%; transform: rotate(var(--deg, 0deg)); transition: transform 120ms cubic-bezier(.3,1.4,.5,1);
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), radial-gradient(circle at 40% 30%, #8a9198, #4a5057 60%, #2f3338);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.5); }
.k-knob .cap::after { content: ''; position: absolute; left: calc(50% - 3px); top: 6px; width: 6px; height: 34px; border-radius: 3px; background: var(--k-amber); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }

/* thumbwheel: a drum in a window; click the top half for up, the bottom half for down */
.k-wheel { position: relative; width: 62px; height: 104px; border-radius: 8px; overflow: hidden; cursor: pointer; border: none; padding: 0;
  background: linear-gradient(180deg, #111 0%, #e9e6dc 22%, #fffdf6 50%, #e9e6dc 78%, #111 100%);
  box-shadow: inset 0 0 0 3px #15171a, inset 0 0 0 5px #5c6168, 0 1px 0 rgba(255,255,255,.15);
  font: 800 46px var(--mono); color: #16181b; display: grid; place-items: center; }
.k-wheel::before, .k-wheel::after { content: '▲'; position: absolute; left: 0; right: 0; font-size: 11px; color: #a0a6ad; text-align: center; }
.k-wheel::before { top: 4px; } .k-wheel::after { content: '▼'; bottom: 4px; }
.k-wheel span { display: block; transition: transform 90ms; }
.k-wheel.tick span { transform: translateY(-4px); }

/* stamped KEY tag, brass */
.k-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 3px; font: 800 16px var(--mono); letter-spacing: 1px; color: #2a2108;
  background: var(--grain), linear-gradient(180deg, #f2d27a, #c9a136); box-shadow: inset 0 -1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.6); }