@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{--green:#00ff41;--red:#ff0040;--amber:#ffbf00;--cyan:#00ffff;--magenta:#ff00ff;--dark:#0a0a0a;--panel:#111;--panel-border:#222}
body{background:var(--dark);color:var(--green);font-family:'Share Tech Mono',monospace;overflow:hidden;height:100vh;user-select:none;cursor:crosshair}
body.custom-cursor{cursor:crosshair}
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px);pointer-events:none;z-index:9999}
body.no-crt::after{display:none}
body.reduced-motion,body.reduced-motion *{animation:none!important;transition:none!important}
@keyframes flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.8}94%{opacity:1}96%{opacity:.9}97%{opacity:1}}
body:not(.no-crt){animation:flicker 4s infinite}
@keyframes warning-flash{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes shake{0%,100%{transform:translate(0)}10%{transform:translate(-5px,-3px)}20%{transform:translate(5px,3px)}30%{transform:translate(-3px,5px)}40%{transform:translate(3px,-5px)}50%{transform:translate(-5px,3px)}60%{transform:translate(5px,-3px)}70%{transform:translate(-3px,-5px)}80%{transform:translate(3px,5px)}90%{transform:translate(-5px,-3px)}}
.shake{animation:shake .4s ease-in-out}
@keyframes radar-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes typewriter{from{width:0}to{width:100%}}
@keyframes mushroom-rise{0%{transform:scaleY(0);opacity:1}50%{transform:scaleY(1);opacity:.8}100%{transform:scaleY(1.5) scaleX(1.3);opacity:0}}
@keyframes missile-reverse{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-100px) rotate(10deg)}100%{transform:translateY(-300px) rotate(20deg);opacity:0}}

.screen{display:none;width:100%;height:100vh;position:relative}
.screen.active{display:flex;flex-direction:column;align-items:center}
.flash-overlay{position:fixed;inset:0;background:rgba(255,0,64,.3);pointer-events:none;z-index:9998;opacity:0;transition:opacity .1s}
.flash-overlay.active{opacity:1}
.sabotage-overlay{position:fixed;inset:0;pointer-events:none;z-index:9997;opacity:0;transition:opacity .3s}
.sabotage-overlay.blackout{background:rgba(0,0,0,.85);opacity:1}
.sabotage-overlay.static{background:repeating-conic-gradient(#222 0% 25%,#111 25% 50%);background-size:4px 4px;opacity:.6}
.sabotage-overlay.invert{backdrop-filter:invert(1);opacity:1}
.sabotage-overlay .sabotage-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--red);font-size:1.5rem;text-shadow:0 0 20px var(--red);animation:warning-flash .5s infinite}
#particle-canvas{position:fixed;inset:0;pointer-events:none;z-index:9996}

/* Pause overlay */
.pause-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9990;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.pause-overlay.active{display:flex}
.pause-overlay h2{color:var(--amber);font-size:2rem}
.pause-overlay .pause-menu{display:flex;flex-direction:column;gap:10px}

/* Settings panel */
.settings-panel{background:var(--panel);border:2px solid var(--panel-border);padding:20px;max-width:400px;width:90%;border-radius:8px}
.settings-panel h3{color:var(--amber);margin-bottom:15px;font-size:1rem}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:.8rem;color:#888}
.setting-row label{flex:1}
.setting-row input[type="range"]{width:120px;accent-color:var(--green)}
.setting-row input[type="checkbox"]{accent-color:var(--green);width:18px;height:18px}
.toggle-switch{width:40px;height:20px;background:#333;border-radius:10px;position:relative;cursor:pointer;transition:background .2s}
.toggle-switch.on{background:var(--green)}
.toggle-switch::after{content:'';position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:2px;left:2px;transition:left .2s}
.toggle-switch.on::after{left:22px}

/* Boot screen */
#boot-screen{justify-content:flex-start;padding:40px;overflow:hidden}
#boot-text{font-size:.8rem;color:var(--green);line-height:1.8;white-space:pre-wrap;max-width:700px;overflow-y:auto;flex:1}

/* Intro cutscene */
#cutscene-screen{justify-content:center;align-items:center;background:#000}
#cutscene-canvas{width:100%;height:100%}

/* Start screen */
#start-screen{justify-content:center;gap:15px;overflow-y:auto;padding:20px}
#start-screen h1{font-size:2.5rem;color:var(--red);text-shadow:0 0 20px var(--red),0 0 40px var(--red);text-align:center;animation:warning-flash 1s infinite}
#start-screen .subtitle{font-size:1rem;color:var(--amber);text-align:center;text-shadow:0 0 10px var(--amber)}
.menu-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.menu-section{text-align:center;font-size:.75rem;color:#555;margin-top:3px}
.diff-btn,.mode-btn{background:transparent;border:2px solid var(--green);color:var(--green);font-family:inherit;font-size:.8rem;padding:8px 20px;cursor:pointer;text-transform:uppercase;transition:all .2s}
.diff-btn:hover,.diff-btn.selected{background:var(--green);color:var(--dark);box-shadow:0 0 15px var(--green)}
.mode-btn{border-color:var(--cyan);color:var(--cyan)}
.mode-btn:hover,.mode-btn.selected{background:var(--cyan);color:var(--dark);box-shadow:0 0 15px var(--cyan)}
.start-btn{background:transparent;border:2px solid var(--red);color:var(--red);font-family:inherit;font-size:1.2rem;padding:12px 40px;cursor:pointer;text-transform:uppercase;letter-spacing:3px;transition:all .2s;text-shadow:0 0 10px var(--red)}
.start-btn:hover{background:var(--red);color:#fff;box-shadow:0 0 30px var(--red)}
.menu-btn{background:transparent;border:1px solid #444;color:#888;font-family:inherit;font-size:.7rem;padding:6px 14px;cursor:pointer;text-transform:uppercase;transition:all .2s}
.menu-btn:hover{border-color:var(--green);color:var(--green)}
.leaderboard{border:1px solid var(--panel-border);padding:8px 15px;max-width:320px;width:100%;font-size:.7rem;color:#666;line-height:1.6}
.leaderboard h3{color:var(--amber);font-size:.8rem;margin-bottom:4px}
.leaderboard .entry{display:flex;justify-content:space-between}
.leaderboard .entry span:first-child{color:var(--green)}
.rank-display{font-size:.75rem;color:var(--amber);text-align:center}

/* Game screen */
#game-screen{padding:5px 15px}
.top-bar{width:100%;display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:2px solid var(--panel-border);flex-shrink:0;gap:8px}
.timer{font-size:2.2rem;color:var(--red);text-shadow:0 0 15px var(--red);font-variant-numeric:tabular-nums;min-width:90px}
.timer.critical{animation:warning-flash .5s infinite}
.top-center{text-align:center;font-size:.7rem;color:#555;display:flex;flex-direction:column;gap:2px}
.lives{display:flex;gap:3px;justify-content:center}
.life{width:10px;height:10px;background:var(--red);border-radius:50%;box-shadow:0 0 5px var(--red);transition:opacity .3s}
.life.lost{opacity:.15}
.combo-display{color:var(--amber);font-size:.65rem}
.powerup-bar{display:flex;gap:4px;justify-content:center;margin-top:2px}
.powerup-item{width:22px;height:22px;border:1px solid #444;display:flex;align-items:center;justify-content:center;font-size:.6rem;cursor:pointer;transition:all .2s;color:var(--cyan)}
.powerup-item:hover{border-color:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.powerup-item.used{opacity:.3;cursor:default}
.abort-progress-container{text-align:right}
.abort-progress-label{font-size:.7rem;color:var(--amber);margin-bottom:2px}
.abort-progress-bar{width:180px;height:14px;background:#1a1a1a;border:1px solid var(--green);position:relative}
.abort-progress-fill{height:100%;background:var(--green);width:0%;transition:width .5s;box-shadow:0 0 10px var(--green)}
.ghost-fill{position:absolute;height:100%;background:rgba(255,191,0,.3);top:0;left:0;transition:width .5s}
.info-bar{width:100%;display:flex;justify-content:space-between;padding:2px 10px;flex-shrink:0;min-height:20px}
.alert-bar{flex:1;text-align:center;font-size:.75rem;color:var(--amber)}
.briefing-bar{font-size:.7rem;color:var(--cyan);text-align:right;min-width:180px}
.modifier-bar{width:100%;text-align:center;font-size:.65rem;color:var(--magenta);padding:0 10px;min-height:14px}
.minimap{display:flex;gap:3px;align-items:center;padding:0 10px 3px;flex-wrap:wrap;justify-content:center}
.minimap-node{width:20px;height:20px;border:1px solid #333;display:flex;align-items:center;justify-content:center;font-size:.5rem;color:#555}
.minimap-node.solved{border-color:var(--green);color:var(--green);background:rgba(0,255,65,.1)}
.minimap-node.current{border-color:var(--amber);color:var(--amber);box-shadow:0 0 8px var(--amber)}
.minimap-node.locked{border-color:#333;color:#333}
.minimap-line{width:10px;height:1px;background:#333}
.minimap-line.done{background:var(--green)}

.puzzle-area{flex:1;width:100%;display:flex;justify-content:center;align-items:center;padding:3px 8px;overflow:hidden}
.puzzle-container{background:var(--panel);border:2px solid var(--panel-border);border-radius:8px;padding:20px;max-width:600px;width:100%;position:relative;max-height:calc(100vh - 170px);overflow-y:auto}
.puzzle-container.mirrored{transform:scaleX(-1)}
.puzzle-container.mirrored *{transform:scaleX(-1)}
.puzzle-title{text-align:center;font-size:1rem;color:var(--amber);margin-bottom:12px;text-transform:uppercase;letter-spacing:2px}
.puzzle-instructions{text-align:center;font-size:.75rem;color:#888;margin-bottom:12px}
.puzzle-complete{position:absolute;inset:0;background:rgba(0,255,65,.1);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--green);text-shadow:0 0 20px var(--green);z-index:10;border-radius:8px;flex-direction:column;gap:5px}
.puzzle-complete .time-bonus{font-size:.85rem;color:var(--cyan)}
.puzzle-btn{display:block;margin:10px auto 0;background:transparent;border:2px solid var(--amber);color:var(--amber);font-family:inherit;font-size:.85rem;padding:8px 22px;cursor:pointer;text-transform:uppercase}
.puzzle-btn:hover{background:var(--amber);color:var(--dark)}
.puzzle-input{background:#1a1a1a;border:2px solid var(--green);color:var(--green);font-family:inherit;font-size:1.1rem;padding:8px 12px;text-align:center;text-transform:uppercase;width:100%;max-width:280px;outline:none;display:block;margin:0 auto}

/* Code Breaker */
.code-display{display:flex;justify-content:center;gap:8px;margin-bottom:12px}
.code-digit{width:50px;height:60px;background:#1a1a1a;border:2px solid var(--green);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--green);text-shadow:0 0 10px var(--green)}
.code-digit.correct{border-color:var(--green);background:rgba(0,255,65,.15)}
.code-digit.wrong-pos{border-color:var(--amber);background:rgba(255,191,0,.15);color:var(--amber)}
.code-digit.wrong{border-color:#444;color:#444}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;max-width:260px;margin:0 auto}
.keypad button{background:#1a1a1a;border:1px solid #333;color:var(--green);font-family:inherit;font-size:1.2rem;padding:10px;cursor:pointer;transition:all .15s}
.keypad button:hover{background:var(--green);color:var(--dark)}
.keypad button:active{transform:scale(.95)}
.code-hints{text-align:center;margin-top:8px;font-size:.75rem;color:#888;min-height:16px}

/* Wire Repair */
.wire-panel{display:flex;justify-content:space-between;align-items:stretch;gap:15px;position:relative;min-height:200px}
.wire-side{display:flex;flex-direction:column;gap:10px}
.wire-port{width:40px;height:40px;border-radius:50%;border:3px solid;display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;transition:all .2s}
.wire-port:hover{transform:scale(1.1);box-shadow:0 0 15px currentColor}
.wire-port.selected{box-shadow:0 0 20px currentColor;transform:scale(1.15)}
.wire-port.connected{opacity:.5;cursor:default}
.wire-canvas{flex:1;position:relative}
.wire-canvas svg{width:100%;height:100%;position:absolute;top:0;left:0}

/* Frequency Tuner */
.freq-display{text-align:center;margin-bottom:12px}
.freq-target{color:var(--amber);font-size:.85rem;margin-bottom:6px}
.freq-current{font-size:1.6rem;color:var(--green);text-shadow:0 0 15px var(--green)}
.freq-wave{height:70px;background:#1a1a1a;border:1px solid #333;margin:8px 0;position:relative;overflow:hidden}
.freq-wave canvas{width:100%;height:100%}
.freq-slider-container{text-align:center}
.freq-slider{-webkit-appearance:none;appearance:none;width:80%;height:8px;background:#1a1a1a;border:1px solid #333;outline:none;border-radius:4px}
.freq-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;background:var(--green);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--green)}

/* Memory */
.memory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:250px;margin:0 auto}
.memory-btn{aspect-ratio:1;border:2px solid #333;background:#1a1a1a;border-radius:8px;cursor:pointer;transition:all .2s}
.memory-btn.flash{box-shadow:0 0 25px currentColor;filter:brightness(2)}
.memory-btn.correct-flash{background:var(--green)!important;box-shadow:0 0 25px var(--green)}
.memory-btn.wrong-flash{background:var(--red)!important;box-shadow:0 0 25px var(--red)}
.memory-btn[data-color="red"]{border-color:#ff0040;background:#330010}
.memory-btn[data-color="blue"]{border-color:#0088ff;background:#001a33}
.memory-btn[data-color="green"]{border-color:#00ff41;background:#003310}
.memory-btn[data-color="amber"]{border-color:#ffbf00;background:#332600}
.memory-btn[data-color="cyan"]{border-color:#00ffff;background:#003333}
.memory-btn[data-color="magenta"]{border-color:#ff00ff;background:#330033}
.memory-btn[data-color="red"].flash{background:#ff0040}
.memory-btn[data-color="blue"].flash{background:#0088ff}
.memory-btn[data-color="green"].flash{background:#00ff41}
.memory-btn[data-color="amber"].flash{background:#ffbf00}
.memory-btn[data-color="cyan"].flash{background:#00ffff}
.memory-btn[data-color="magenta"].flash{background:#ff00ff}
.memory-status{text-align:center;margin-top:8px;font-size:.8rem;color:#888}

/* Cooling */
.reactor-bars{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
.reactor-bar{width:40px;height:160px;background:#1a1a1a;border:2px solid #333;position:relative;cursor:pointer;overflow:hidden}
.reactor-bar-fill{position:absolute;bottom:0;width:100%;background:var(--green);transition:height .1s,background .3s}
.reactor-bar-fill.hot{background:var(--amber)}
.reactor-bar-fill.critical{background:var(--red);animation:warning-flash .3s infinite}
.reactor-bar label{position:absolute;bottom:-18px;width:100%;text-align:center;font-size:.6rem;color:#888}
.reactor-target{position:absolute;width:100%;height:2px;background:var(--green);box-shadow:0 0 5px var(--green);left:0}
.cooling-status{text-align:center;font-size:.8rem;color:#888}

/* Decrypt */
.cipher-text{font-size:1.4rem;letter-spacing:4px;color:var(--amber);margin-bottom:8px;text-align:center}
.shift-display{font-size:.85rem;color:var(--cyan);margin:6px 0;text-align:center}
.decrypt-hint{font-size:.7rem;color:#666;margin-top:6px;text-align:center}

/* Radar */
.radar-container{width:240px;height:240px;border-radius:50%;border:2px solid var(--green);position:relative;margin:0 auto;background:radial-gradient(circle,rgba(0,255,65,.03) 0%,transparent 70%);overflow:hidden}
.radar-sweep{position:absolute;top:50%;left:50%;width:50%;height:2px;background:linear-gradient(90deg,var(--green),transparent);transform-origin:left center;animation:radar-spin 3s linear infinite;box-shadow:0 0 10px var(--green)}
.radar-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,255,65,.15)}
.radar-target{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);cursor:pointer;transform:translate(-50%,-50%);transition:opacity .2s;animation:warning-flash 1s infinite}
.radar-target.clicked{opacity:0;pointer-events:none}
.radar-crosshair{position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:var(--green);transform:translate(-50%,-50%)}
.radar-status{text-align:center;margin-top:12px;font-size:.8rem;color:#888}

/* Power Routing */
.power-grid{display:grid;gap:2px;margin:0 auto;max-width:250px}
.power-cell{width:100%;aspect-ratio:1;background:#1a1a1a;border:1px solid #333;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.power-cell.source{border-color:var(--green);background:rgba(0,255,65,.15)}
.power-cell.target{border-color:var(--red);background:rgba(255,0,64,.15)}
.power-cell.powered{background:rgba(0,255,65,.1);border-color:var(--green)}
.power-cell svg{width:80%;height:80%}
.power-status{text-align:center;margin-top:8px;font-size:.8rem;color:#888}

/* Morse */
.morse-code{font-size:1.8rem;letter-spacing:6px;color:var(--amber);margin-bottom:8px;text-align:center;min-height:35px}
.morse-ref{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;font-size:.5rem;color:#555;margin-top:8px;max-width:380px;margin-left:auto;margin-right:auto}
.morse-ref span{padding:1px;text-align:center}

/* Binary */
.binary-target{font-size:.9rem;color:var(--amber);margin-bottom:6px;text-align:center}
.binary-target .target-num{font-size:1.8rem}
.binary-switches{display:flex;gap:5px;justify-content:center;margin:12px 0}
.binary-switch{width:40px;height:58px;background:#1a1a1a;border:2px solid #333;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.4rem;color:#444;transition:all .2s}
.binary-switch.on{border-color:var(--green);color:var(--green);background:rgba(0,255,65,.1);text-shadow:0 0 10px var(--green)}
.binary-current{font-size:1.1rem;color:var(--green);margin-top:4px;text-align:center}
.binary-labels{display:flex;gap:5px;justify-content:center;font-size:.55rem;color:#555}
.binary-labels span{width:40px;text-align:center}

/* Sonar */
.sonar-container{width:240px;height:240px;border-radius:50%;border:2px solid var(--cyan);position:relative;margin:0 auto;background:radial-gradient(circle,rgba(0,255,255,.03) 0%,transparent 70%);overflow:hidden}
.sonar-quadrant{position:absolute;width:50%;height:50%;cursor:pointer;transition:background .2s;border:1px solid rgba(0,255,255,.1)}
.sonar-quadrant:hover{background:rgba(0,255,255,.1)}
.sonar-quadrant.correct{background:rgba(0,255,65,.2)!important}
.sonar-quadrant.wrong{background:rgba(255,0,64,.2)!important}
.sonar-quadrant[data-q="0"]{top:0;left:0}
.sonar-quadrant[data-q="1"]{top:0;right:0}
.sonar-quadrant[data-q="2"]{bottom:0;left:0}
.sonar-quadrant[data-q="3"]{bottom:0;right:0}
.sonar-pulse{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;border:2px solid var(--cyan);transform:translate(-50%,-50%);animation:sonar-expand 2s ease-out infinite}
@keyframes sonar-expand{0%{width:0;height:0;opacity:1}100%{width:200px;height:200px;opacity:0}}
.sonar-status{text-align:center;margin-top:12px;font-size:.8rem;color:#888}

/* Map Coordinates */
.coord-grid{display:grid;gap:1px;margin:0 auto;max-width:280px}
.coord-cell{aspect-ratio:1;background:#1a1a1a;border:1px solid #222;cursor:pointer;transition:all .15s;position:relative}
.coord-cell:hover{background:#222}
.coord-cell.marked{background:rgba(0,255,65,.2);border-color:var(--green)}
.coord-cell.target{background:rgba(255,0,64,.3);border-color:var(--red)}
.coord-labels-x,.coord-labels-y{display:flex;font-size:.55rem;color:#555}
.coord-labels-x{justify-content:space-around;max-width:280px;margin:0 auto}
.coord-labels-y{flex-direction:column;position:absolute;left:-15px;top:0;height:100%;justify-content:space-around}

/* Password Crack */
.password-scroll{height:60px;background:#1a1a1a;border:1px solid #333;overflow:hidden;position:relative;margin-bottom:12px}
.password-text{position:absolute;white-space:nowrap;font-size:1.8rem;color:var(--green);text-shadow:0 0 10px var(--green);top:50%;transform:translateY(-50%)}

/* Circuit Board */
.circuit-grid{display:grid;gap:3px;margin:0 auto;max-width:300px}
.circuit-slot{aspect-ratio:1.5;background:#1a1a1a;border:2px solid #333;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.6rem;color:#555;transition:all .2s}
.circuit-slot.filled{border-color:var(--green);color:var(--green)}
.circuit-slot.wrong{border-color:var(--red)}
.circuit-slot.highlight{border-color:var(--amber);box-shadow:0 0 8px var(--amber)}
.component-tray{display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.component-item{padding:6px 12px;border:1px solid var(--cyan);color:var(--cyan);font-size:.7rem;cursor:pointer;transition:all .2s}
.component-item:hover{background:var(--cyan);color:var(--dark)}
.component-item.selected{background:var(--cyan);color:var(--dark);box-shadow:0 0 10px var(--cyan)}
.component-item.placed{opacity:.3;cursor:default}

/* Firewall Maze */
.maze-grid{display:grid;gap:0;margin:0 auto}
.maze-cell{aspect-ratio:1;background:#1a1a1a;transition:background .15s}
.maze-cell.wall{background:#333}
.maze-cell.player{background:var(--green);box-shadow:0 0 8px var(--green)}
.maze-cell.exit{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.maze-cell.trace{background:var(--red);box-shadow:0 0 5px var(--red)}
.maze-cell.trail{background:rgba(0,255,65,.1)}
.maze-controls{display:flex;gap:5px;justify-content:center;margin-top:10px}
.maze-controls button{width:40px;height:40px;background:#1a1a1a;border:1px solid #333;color:var(--green);font-family:inherit;font-size:1rem;cursor:pointer}
.maze-controls button:hover{background:var(--green);color:var(--dark)}

/* DNA Sequence */
.dna-display{display:flex;justify-content:center;gap:4px;margin-bottom:12px}
.dna-slot{width:36px;height:36px;border:2px solid #333;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;transition:all .2s}
.dna-slot.locked{border-color:var(--green);background:rgba(0,255,65,.1)}
.dna-colors{display:flex;gap:8px;justify-content:center;margin-top:10px}
.dna-color-btn{width:36px;height:36px;border:2px solid;border-radius:50%;cursor:pointer;transition:transform .2s}
.dna-color-btn:hover{transform:scale(1.2)}
.dna-color-btn.selected{box-shadow:0 0 15px currentColor;transform:scale(1.2)}

/* Satellite */
.satellite-display{text-align:center}
.satellite-dish{width:200px;height:200px;border:2px solid var(--cyan);border-radius:50%;margin:0 auto 12px;position:relative;background:radial-gradient(circle,rgba(0,255,255,.05) 0%,transparent 70%)}
.satellite-signal{position:absolute;width:10px;height:10px;background:var(--amber);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px var(--amber)}
.satellite-crosshair{position:absolute;width:20px;height:20px;border:2px solid var(--green);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px var(--green)}
.satellite-sliders{display:flex;gap:20px;justify-content:center;align-items:center}
.satellite-sliders label{font-size:.7rem;color:#888}

/* Countdown Defuse - Wire Cut Order */
.defuse-wires{display:flex;flex-direction:column;gap:8px;max-width:350px;margin:0 auto}
.defuse-wire{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #333;cursor:pointer;transition:all .2s}
.defuse-wire:hover{border-color:var(--amber)}
.defuse-wire.cut{opacity:.3;text-decoration:line-through}
.defuse-wire .wire-color-dot{width:20px;height:20px;border-radius:50%;flex-shrink:0}
.defuse-wire .wire-label{font-size:.8rem;color:#888}
.defuse-rules{font-size:.65rem;color:#666;margin-bottom:10px;text-align:center;line-height:1.6}

/* End screen */
#end-screen{justify-content:center;gap:15px;padding:20px;overflow-y:auto}
.end-title{font-size:2.5rem;text-align:center;text-shadow:0 0 30px currentColor}
.end-title.win{color:var(--green)}
.end-title.lose{color:var(--red);animation:warning-flash 1s infinite}
.end-stats{font-size:.85rem;color:var(--amber);text-align:center;line-height:1.8}
.end-animation{width:200px;height:150px;margin:0 auto;position:relative;overflow:hidden}
.explosion-cloud{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:100px;background:radial-gradient(ellipse,#ff4400,#ff0040,transparent);border-radius:50% 50% 30% 30%;animation:mushroom-rise 2s ease-out forwards}
.missile-anim{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:12px;height:40px;background:linear-gradient(to top,var(--red),var(--amber));border-radius:4px 4px 0 0}
.missile-anim.reversing{animation:missile-reverse 1.5s ease-in forwards}
.share-card{background:#1a1a1a;border:1px solid var(--panel-border);padding:10px;font-size:.65rem;color:#666;max-width:300px;width:100%;text-align:center;font-family:monospace;white-space:pre;line-height:1.4}
.achievements-earned{font-size:.7rem;color:var(--cyan);text-align:center;line-height:1.6}
.end-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.restart-btn{background:transparent;border:2px solid var(--green);color:var(--green);font-family:inherit;font-size:.9rem;padding:8px 25px;cursor:pointer;text-transform:uppercase;letter-spacing:2px;transition:all .2s}
.restart-btn:hover{background:var(--green);color:var(--dark);box-shadow:0 0 20px var(--green)}

/* Campaign screen */
#campaign-screen{justify-content:center;gap:15px;padding:25px;overflow-y:auto}
#campaign-screen h2{color:var(--amber);font-size:1.3rem;text-shadow:0 0 10px var(--amber)}
.campaign-missions{display:flex;flex-direction:column;gap:6px;max-width:380px;width:100%}
.campaign-mission{display:flex;justify-content:space-between;align-items:center;border:1px solid #333;padding:8px 12px;cursor:pointer;transition:all .2s}
.campaign-mission:hover:not(.locked){border-color:var(--green);background:rgba(0,255,65,.05)}
.campaign-mission.locked{opacity:.4;cursor:default}
.campaign-mission.completed{border-color:var(--green);opacity:.7}
.campaign-mission .mission-name{color:var(--green);font-size:.85rem}
.campaign-mission .mission-info{font-size:.65rem;color:#666}
.campaign-mission .mission-status{font-size:.75rem}

/* Achievements */
#achievements-screen{justify-content:flex-start;gap:8px;padding:25px;overflow-y:auto}
#achievements-screen h2{color:var(--amber);font-size:1.2rem}
.achievement-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;max-width:600px;width:100%}
.achievement-item{border:1px solid #333;padding:6px 10px;font-size:.7rem;color:#555;line-height:1.4}
.achievement-item.unlocked{border-color:var(--green);color:var(--green)}
.achievement-item .ach-name{color:var(--amber);font-size:.8rem}
.achievement-item.unlocked .ach-name{color:var(--green)}

/* Stats screen */
#stats-screen{justify-content:flex-start;gap:10px;padding:25px;overflow-y:auto}
#stats-screen h2{color:var(--amber);font-size:1.2rem}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-width:500px;width:100%}
.stat-card{border:1px solid var(--panel-border);padding:10px;text-align:center}
.stat-card .stat-val{font-size:1.5rem;color:var(--green);text-shadow:0 0 10px var(--green)}
.stat-card .stat-label{font-size:.65rem;color:#888;margin-top:4px}

/* Tutorial */
#tutorial-screen{justify-content:flex-start;padding:25px;gap:10px;overflow-y:auto}
#tutorial-screen h2{color:var(--amber);font-size:1.2rem}
.tutorial-list{display:flex;flex-direction:column;gap:6px;max-width:450px;width:100%}
.tutorial-item{border:1px solid #333;padding:8px 12px;cursor:pointer;transition:all .2s;font-size:.8rem;color:#888}
.tutorial-item:hover{border-color:var(--green);color:var(--green)}
.tutorial-demo{background:var(--panel);border:1px solid var(--panel-border);padding:15px;max-width:450px;width:100%;margin-top:10px;font-size:.75rem;color:#aaa;line-height:1.6}

/* Mission Editor */
#editor-screen{justify-content:flex-start;padding:25px;gap:10px;overflow-y:auto}
#editor-screen h2{color:var(--amber);font-size:1.2rem}
.editor-panel{max-width:450px;width:100%}
.editor-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:.75rem;color:#888}
.editor-row select,.editor-row input{background:#1a1a1a;border:1px solid #333;color:var(--green);font-family:inherit;font-size:.75rem;padding:4px 8px}
.editor-puzzles{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0}
.editor-puzzle-btn{padding:4px 8px;border:1px solid #333;color:#666;font-size:.65rem;cursor:pointer;transition:all .2s}
.editor-puzzle-btn:hover,.editor-puzzle-btn.selected{border-color:var(--green);color:var(--green);background:rgba(0,255,65,.1)}
.editor-output{background:#1a1a1a;border:1px solid #333;padding:8px;font-size:.6rem;color:var(--green);word-break:break-all;margin-top:10px;max-height:60px;overflow:auto}

/* Mobile */
@media(max-width:600px){
  #start-screen h1{font-size:1.6rem}
  .timer{font-size:1.8rem}
  .puzzle-container{padding:12px}
  .keypad{max-width:220px}
  .keypad button{padding:8px;font-size:1rem}
  .code-digit{width:40px;height:50px;font-size:1.2rem}
  .radar-container,.sonar-container{width:200px;height:200px}
  .satellite-dish{width:160px;height:160px}
  .reactor-bar{width:30px;height:120px}
  .memory-grid{max-width:200px}
  .abort-progress-bar{width:120px}
  .maze-controls button{width:50px;height:50px;font-size:1.3rem}
}

/* Colorblind mode */
body.colorblind .code-digit.correct{border-style:double;border-width:4px}
body.colorblind .code-digit.wrong-pos{border-style:dashed}
body.colorblind .code-digit.wrong{border-style:dotted}
body.colorblind .reactor-bar-fill.hot{background:repeating-linear-gradient(45deg,var(--amber),var(--amber) 3px,#332600 3px,#332600 6px)}
body.colorblind .reactor-bar-fill.critical{background:repeating-linear-gradient(45deg,var(--red),var(--red) 3px,#330010 3px,#330010 6px)}

/* Large text mode */
body.large-text{font-size:1.1rem}
body.large-text .puzzle-instructions{font-size:.95rem}
body.large-text .puzzle-title{font-size:1.3rem}
body.large-text .keypad button{font-size:1.5rem;padding:14px}