/* ---------- WIRES ---------- */
.wires-svg .post { fill: #1f2328; stroke: #555c64; stroke-width: 2; }
.wires-svg .screw { fill: #8d949c; }
.wire-num-bg { fill: #f3f0e6; }
.wire-num { font: 800 17px var(--sans); text-anchor: middle; fill: #111; }
.wire path { fill: none; stroke-linecap: round; }
.wire-shadow { stroke: rgba(0,0,0,.45); stroke-width: 18; transform: translate(0, 4px); }
.wire-body { stroke-width: 15; }
.wire-shine { stroke: rgba(255,255,255,.28); stroke-width: 3; transform: translate(0, -3px); }
.wire-hit { stroke: transparent; stroke-width: 34; cursor: pointer; pointer-events: stroke; }
.wire:hover .wire-body { filter: brightness(1.25); }
.wire-red { stroke: #e53935; } .wire-blue { stroke: #2563eb; } .wire-yellow { stroke: #facc15; }
.wire-white { stroke: #f1f1f1; } .wire-black { stroke: #141414; }
.wire-black + .wire-shine { stroke: rgba(255,255,255,.35); }
.wire.cut .wire-body, .wire.cut .wire-shadow, .wire.cut .wire-shine { stroke-dasharray: 118 28 1000; }
.wire.cut .wire-hit { pointer-events: none; }

/* ---------- BIG BUTTON ---------- */
.btn-mod { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 38px; }
.btn-well { width: 236px; height: 236px; border-radius: 50%; background: #1a1d21; display: grid; place-items: center; box-shadow: inset 0 6px 14px #000; }
.bigbtn { width: 206px; height: 206px; border-radius: 50%; border: none; background: radial-gradient(circle at 38% 32%, #ff8a80, #e53935 45%, #8e1b17); box-shadow: 0 10px 0 #5d0f0c, 0 14px 18px rgba(0,0,0,.6); color: #fff; touch-action: none; transition: transform 60ms, box-shadow 60ms; }
.bigbtn span { font-family: 'Future'; font-size: 40px; letter-spacing: 2px; text-shadow: 0 2px 2px rgba(0,0,0,.5); pointer-events: none; }
.bigbtn.down { transform: translateY(8px); box-shadow: 0 2px 0 #5d0f0c, 0 4px 8px rgba(0,0,0,.6); }
.btn-strip-well { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.btn-strip { width: 46px; height: 230px; border-radius: 10px; background: #15171a; box-shadow: inset 0 0 0 3px #3a3f45, inset 0 4px 10px #000; transition: background 150ms; }
.btn-strip-label { font: 700 11px var(--sans); letter-spacing: 2px; color: #b8bec5; }
.btn-strip.on.strip-blue { background: #3b82f6; box-shadow: 0 0 26px #3b82f6, inset 0 0 0 3px #93c5fd; }
.btn-strip.on.strip-red { background: #ef4444; box-shadow: 0 0 26px #ef4444, inset 0 0 0 3px #fca5a5; }
.btn-strip.on.strip-yellow { background: #facc15; box-shadow: 0 0 26px #facc15, inset 0 0 0 3px #fef08a; }
.btn-strip.on.strip-white { background: #f8fafc; box-shadow: 0 0 26px #f8fafc, inset 0 0 0 3px #fff; }

/* ---------- SYMBOLS (keypad) ---------- */
.keypad { position: absolute; inset: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.key { position: relative; border: none; border-radius: 14px; background: linear-gradient(#f4f1e8, #d6d1c3); box-shadow: 0 8px 0 #8d887b, 0 12px 14px rgba(0,0,0,.5); color: #15171a; display: grid; place-items: center; transition: transform 60ms; }
.key:active { transform: translateY(5px); box-shadow: 0 3px 0 #8d887b; }
.key .glyph { margin-top: 12px; }
.key-led { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 46px; height: 9px; border-radius: 5px; background: #333; box-shadow: inset 0 1px 2px #000; }
.key.ok .key-led { background: var(--green); box-shadow: 0 0 10px var(--green); }
.key.bad { animation: keybad 500ms; }
@keyframes keybad { 0%, 100% { background: linear-gradient(#f4f1e8, #d6d1c3); } 20%, 60% { background: #ff8a80; } }

/* ---------- MAZE ---------- */
/* a dark sensor screen in a bezel, four mechanical keys around it, the symbol names in the corners */
.maze-mod { position: absolute; inset: 0; display: grid; grid-template-columns: 64px 1fr 64px; grid-template-rows: 64px 1fr 64px; align-items: center; justify-items: center; }
.maze-board { grid-column: 2; grid-row: 2; padding: 8px; border-radius: 12px; line-height: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), radial-gradient(circle at 50% 45%, #0e1620, #05080c 75%);
  box-shadow: inset 0 0 0 2px #0b0d10, inset 0 6px 18px rgba(0,0,0,.9), 0 0 0 4px #1a1d21, 0 0 0 6px #4a5058, 0 1px 0 7px rgba(255,255,255,.08); }
.maze-board.bump { animation: mazebump 300ms; }
@keyframes mazebump { 0%, 100% { box-shadow: inset 0 0 0 2px #0b0d10, inset 0 6px 18px rgba(0,0,0,.9), 0 0 0 4px #1a1d21, 0 0 0 6px #4a5058; } 15%, 50% { box-shadow: inset 0 0 0 2px #ff3b30, inset 0 0 26px rgba(255,59,48,.45), 0 0 0 4px #1a1d21, 0 0 0 6px #4a5058; } }
.maze-label { font: 800 18px var(--sans); fill: #7f8d9c; text-anchor: middle; }
.maze-label.here { fill: #f0c14b; }
.maze-tile { fill: #121b26; stroke: #1d2a38; stroke-width: 1; }
.maze-step { fill: #b9d4ee; }
.maze-marker { fill: none; stroke: #22c55e; stroke-width: 4.5; filter: drop-shadow(0 0 4px rgba(34,197,94,.75)); }
.maze-goal { fill: #ef4444; filter: drop-shadow(0 0 4px rgba(239,68,68,.75)); }
.maze-me { fill: #ffffff; filter: drop-shadow(0 0 4px rgba(255,255,255,.7)); transition: x 100ms, y 100ms; }
.maze-hit { stroke: #ff3b30; stroke-width: 7; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 5px #ff3b30); }
.maze-hit.show { animation: mazehit 1.2s; }
@keyframes mazehit { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.maze-me-g.bump-up { animation: mz-up 260ms; } .maze-me-g.bump-down { animation: mz-down 260ms; }
.maze-me-g.bump-left { animation: mz-left 260ms; } .maze-me-g.bump-right { animation: mz-right 260ms; }
@keyframes mz-up { 35% { transform: translate(0, -11px); } } @keyframes mz-down { 35% { transform: translate(0, 11px); } }
@keyframes mz-left { 35% { transform: translate(-11px, 0); } } @keyframes mz-right { 35% { transform: translate(11px, 0); } }
.maze-mod .maze-arrow { width: 56px; height: 56px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.maze-arrow-sym { font: 400 19px var(--sans); line-height: 1; }
.maze-arrow-word { font: 800 10px var(--mono); letter-spacing: 1px; color: #b4bac1; }
.maze-up { grid-column: 2; grid-row: 1; } .maze-down { grid-column: 2; grid-row: 3; }
.maze-left { grid-column: 1; grid-row: 2; } .maze-right { grid-column: 3; grid-row: 2; }
.maze-legend { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 800 10px var(--mono); letter-spacing: .5px; line-height: 1.15; color: #c9ced4; text-align: center; }
.maze-legend.tl { grid-column: 1; grid-row: 1; } .maze-legend.tr { grid-column: 3; grid-row: 1; }
.maze-legend.bl { grid-column: 1; grid-row: 3; } .maze-legend.br { grid-column: 3; grid-row: 3; }
.maze-icon { display: block; }
.maze-icon .maze-marker, .maze-icon .maze-goal, .maze-icon .maze-me { filter: none; }
.maze-at-cap { font: 800 9px var(--mono); letter-spacing: .5px; color: #9aa1a9; }
.maze-at { min-width: 44px; padding: 3px 4px; border-radius: 4px; font: 800 19px var(--mono); letter-spacing: 1px; color: #f0c14b; background: #0b0d10; box-shadow: inset 0 0 0 2px #2a2e33, inset 0 3px 6px rgba(0,0,0,.8); }
.maze-wall { stroke: #111; stroke-width: 5; stroke-linecap: round; fill: none; }

/* ---------- CHESS ---------- */
.chess-mod { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.chess-svg { width: 330px; height: 330px; }
.chess-sq.light { fill: #e9dcc0; } .chess-sq.dark { fill: #a7845c; }
.chess-sq.sel { fill: #f5c518; }
.chess-label { font: 800 13px var(--sans); fill: #f5c518; text-anchor: middle; }
.chess-piece { font-size: 32px; text-anchor: middle; font-family: 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', 'Noto Sans Symbols 2', sans-serif; paint-order: stroke; stroke-width: 1.6px; pointer-events: none; }
.chess-piece.w { fill: #ffffff; stroke: #111; }
.chess-piece.b { fill: #111; stroke: #d6d6d6; }
.chess-hit { fill: transparent; cursor: pointer; }
.chess-hit:hover { fill: rgba(245,197,24,.25); }
.qc-sticker { font: 800 13px var(--sans); letter-spacing: 1px; color: #7a1410; background: #fff1c2; padding: 4px 10px; border-radius: 3px; transform: rotate(-1.5deg); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.chess-hint { font-size: 12px; color: #c9ced4; }
.chess-arrow { stroke-width: 8; stroke-linecap: round; }
.chess-arrow.best, .chess-head.best { stroke: #6b7280; fill: #6b7280; opacity: .75; }
.chess-arrow.second, .chess-head.second { stroke: #ff8a1f; fill: #ff8a1f; }
.chess-arrow.best { stroke-dasharray: 10 8; }

/* ---------- REGISTER / PASSWORD / SIGNAL / WATCHDOG ---------- */
.reg-mod, .pw-mod, .sig-mod, .wd-mod { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.screen-box { background: #0b0d0f; border-radius: 10px; padding: 12px 22px; box-shadow: inset 0 0 0 3px #2c3138; font: 800 56px var(--mono); color: #4ade80; text-shadow: 0 0 10px rgba(74,222,128,.6); }
.reg-top { display: flex; align-items: center; gap: 22px; }
.reg-light { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(0,0,0,.4); }
.reg-light.green { background: #22c55e; box-shadow: 0 0 20px #22c55e; } .reg-light.yellow { background: #facc15; box-shadow: 0 0 20px #facc15; } .reg-light.red { background: #ef4444; box-shadow: 0 0 20px #ef4444; }
.switches { display: flex; gap: 16px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 14px var(--sans); color: #c9ced4; }
.sw button { width: 44px; height: 92px; border-radius: 10px; border: none; background: #15171a; box-shadow: inset 0 0 0 3px #3a3f45; position: relative; }
.sw button::after { content: ''; position: absolute; left: 6px; right: 6px; height: 40px; border-radius: 6px; background: linear-gradient(#e7e9ec, #9aa1a9); bottom: 6px; transition: bottom 120ms; }
.sw button.up::after { bottom: 46px; background: linear-gradient(#bbf7d0, #22c55e); }
.run-btn, .pw-submit { font-family: 'Future'; font-size: 24px; padding: 10px 34px; border: none; border-radius: 10px; background: var(--hazard); color: #111; box-shadow: 0 5px 0 #8a6d00; }
.run-btn:active, .pw-submit:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a6d00; }
.pw-cols { display: flex; gap: 10px; }
.pw-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pw-col button { width: 58px; height: 38px; border: none; border-radius: 8px; background: linear-gradient(#e7e9ec, #aeb4bb); box-shadow: 0 4px 0 #6b7179; font-size: 18px; }
.pw-letter { width: 58px; height: 72px; display: grid; place-items: center; background: #0b0d0f; border-radius: 8px; box-shadow: inset 0 0 0 3px #2c3138; font: 800 46px var(--mono); color: #4ade80; }
.sig-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sig-pad { width: 140px; height: 140px; border: none; border-radius: 22px; opacity: .35; transition: opacity 80ms, transform 80ms; box-shadow: 0 6px 0 rgba(0,0,0,.5); }
.sig-pad.lit { opacity: 1; transform: scale(1.04); }
.sig-pad.red { background: #ef4444; } .sig-pad.blue { background: #3b82f6; } .sig-pad.green { background: #22c55e; } .sig-pad.yellow { background: #facc15; }
.sig-pad.red.lit { box-shadow: 0 0 40px #ef4444; } .sig-pad.blue.lit { box-shadow: 0 0 40px #3b82f6; } .sig-pad.green.lit { box-shadow: 0 0 40px #22c55e; } .sig-pad.yellow.lit { box-shadow: 0 0 40px #facc15; }
.wd-btns { display: flex; gap: 14px; }
.wd-btns button { font-family: 'FutureNarrow'; font-size: 20px; padding: 18px 16px; border: none; border-radius: 10px; background: linear-gradient(#e7e9ec, #aeb4bb); box-shadow: 0 5px 0 #6b7179; }
.wd-bar { width: 300px; height: 14px; border-radius: 7px; background: #15171a; overflow: hidden; box-shadow: inset 0 0 0 2px #3a3f45; }
.wd-bar > div { height: 100%; background: var(--red); }