:root{--bg-dark:#04080d;--bg-panel:#09111ae0;--bg-viewport:#070d14;--border-tactical:#388ab83d;--border-tactical-bright:#00f2fea6;--cyan-primary:#00f2fe;--cyan-secondary:#38bdf8;--cyan-glow:#00f2fe47;--text-main:#eaf6ff;--text-muted:#5e84a2;--success:#00e676;--danger:#ff2a6d;--font-hud:"Chakra Petch", sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{background:radial-gradient(circle at 50% 35%, #0c1b29 0%, var(--bg-dark) 75%);color:var(--text-main);font-family:var(--font-hud);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow-x:hidden}.scanlines{pointer-events:none;z-index:99;background:repeating-linear-gradient(0deg,#00000024 0 1px,#0000 1px 3px);position:fixed;inset:0}.crt-overlay{pointer-events:none;z-index:98;background:radial-gradient(circle,#0000 72%,#000308d9 100%);position:fixed;inset:0}#game-app{z-index:10;flex-direction:column;gap:10px;width:100%;max-width:780px;padding:12px 16px;display:flex;position:relative}.tactical-header-hud{background:var(--bg-panel);border:1px solid var(--border-tactical);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:space-between;align-items:center;padding:8px 14px;display:flex}.hud-title-zone{align-items:center;gap:10px;display:flex}.hud-sys-tag{letter-spacing:2px;color:var(--text-main);text-shadow:0 0 12px var(--cyan-glow);font-size:.95rem;font-weight:700}.live-dot{background:var(--cyan-primary);width:7px;height:7px;box-shadow:0 0 8px var(--cyan-primary);border-radius:50%;animation:2s ease-in-out infinite pulse-live}@keyframes pulse-live{0%,to{opacity:1}50%{opacity:.35}}.hud-telemetry-zone{align-items:center;gap:10px;display:flex}.telemetry-pill{border:1px solid var(--border-tactical);color:var(--text-muted);letter-spacing:1px;background:#04090fbf;align-items:center;gap:6px;padding:4px 10px;font-size:.75rem;display:flex}.telemetry-pill strong{font-family:var(--font-mono);color:var(--text-main);font-size:.82rem}.mini-hud-controls{gap:6px;display:flex}.mini-btn{border:1px solid var(--border-tactical);color:var(--cyan-secondary);cursor:pointer;background:#04090fbf;justify-content:center;align-items:center;width:28px;height:28px;font-size:.9rem;transition:all .18s;display:flex}.mini-btn:hover{color:#fff;border-color:var(--cyan-primary);box-shadow:0 0 10px var(--cyan-glow);background:#00f2fe24}.tactical-board{grid-template-columns:396px 1fr;align-items:stretch;gap:12px;display:grid}@media (width<=800px){.tactical-board{grid-template-columns:1fr}}.hud-frame-corners{pointer-events:none;position:absolute;inset:0}.corner{width:10px;height:10px;position:absolute}.corner-tl{border-top:2px solid var(--border-tactical-bright);border-left:2px solid var(--border-tactical-bright);top:-1px;left:-1px}.corner-tr{border-top:2px solid var(--border-tactical-bright);border-right:2px solid var(--border-tactical-bright);top:-1px;right:-1px}.corner-bl{border-bottom:2px solid var(--border-tactical-bright);border-left:2px solid var(--border-tactical-bright);bottom:-1px;left:-1px}.corner-br{border-bottom:2px solid var(--border-tactical-bright);border-right:2px solid var(--border-tactical-bright);bottom:-1px;right:-1px}.panel-scanner{background:var(--bg-panel);border:1px solid var(--border-tactical);flex-direction:column;align-items:center;padding:10px;display:flex;position:relative;box-shadow:inset 0 0 30px #0009}.hud-top-ticks,.hud-bottom-ticks{justify-content:center;align-items:center;gap:12px;width:94%;height:14px;display:flex}.tick-line{background:var(--border-tactical);flex:1;height:1px}.tick-gap-notch{background:var(--cyan-secondary);opacity:.6;width:24px;height:2px}.tick-coord{font-family:var(--font-mono);color:var(--text-muted);letter-spacing:1px;font-size:.65rem}.scanner-viewport{background:var(--bg-viewport);border:1px solid #00f2fe1f;justify-content:center;align-items:center;width:374px;height:374px;margin:4px 0;display:flex;position:relative;overflow:hidden}#main-canvas{width:374px;height:374px;display:block}.target-slots-layer{position:absolute;inset:0}.target-slot{cursor:pointer;justify-content:center;align-items:center;transition:all .18s;display:flex;position:absolute}.target-slot.inactive{background:#070f18ad;border:1px solid #38bdf852}.target-slot.inactive:hover{background:#0e2030a6;border-color:#00f2feb3}.slot-number{font-family:var(--font-mono);font-size:var(--slot-font-size,1.15rem);color:#d8ecffc7;pointer-events:none;z-index:2;font-weight:700}.target-slot.active{border:1px solid var(--cyan-primary);background:#00f2fe24;box-shadow:0 0 16px #00f2fe40,inset 0 0 12px #00f2fe2e}.target-slot.active .slot-number{color:#fff;text-shadow:0 0 8px var(--cyan-primary)}.slot-corner{pointer-events:none;z-index:3;width:10px;height:10px;position:absolute}.slot-corner-tl{border-top:2px solid var(--cyan-primary);border-left:2px solid var(--cyan-primary);top:-4px;left:-4px}.slot-corner-tr{border-top:2px solid var(--cyan-primary);border-right:2px solid var(--cyan-primary);top:-4px;right:-4px}.slot-corner-bl{border-bottom:2px solid var(--cyan-primary);border-left:2px solid var(--cyan-primary);bottom:-4px;left:-4px}.slot-corner-br{border-bottom:2px solid var(--cyan-primary);border-right:2px solid var(--cyan-primary);bottom:-4px;right:-4px}.target-slot.solved{border:1px solid #00e676a6;box-shadow:0 0 10px #00e67633}.target-slot.solved canvas{z-index:1;width:100%;height:100%;display:block;position:absolute;inset:0}.target-slot.solved .slot-number{display:none}.slot-badge-check{color:var(--success);z-index:3;text-shadow:0 0 4px #000;font-size:.65rem;font-weight:700;position:absolute;bottom:2px;right:3px}.panel-selection{background:var(--bg-panel);border:1px solid var(--border-tactical);flex-direction:column;justify-content:space-between;padding:14px 18px;display:flex;position:relative;box-shadow:inset 0 0 30px #0009}.selection-header-frame{border-bottom:1px solid var(--border-tactical);justify-content:space-between;align-items:center;padding-bottom:10px;display:flex}.selection-body{flex:1;justify-content:center;align-items:center;padding:10px 0;display:flex}.pieces-grid{grid-template-columns:repeat(3,86px);place-content:center;gap:12px;display:grid}.piece-card{background:var(--bg-viewport);cursor:pointer;border:1px solid #38bdf847;width:86px;height:86px;transition:all .16s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.piece-card:hover{border-color:var(--cyan-primary);box-shadow:0 0 14px var(--cyan-glow);z-index:2;transform:scale(1.04)}.piece-card:active{transform:scale(.98)}.piece-card canvas{width:100%;height:100%;display:block}.piece-card.solved{opacity:.14;pointer-events:none;filter:grayscale();border-color:#0000}.piece-card.shake{animation:.36s ease-in-out card-shake;border-color:var(--danger)!important;box-shadow:0 0 18px #ff2a6da6!important}@keyframes card-shake{0%,to{transform:translate(0)}25%,75%{transform:translate(-6px)}50%{transform:translate(6px)}}.piece-card.flash-success{animation:.38s ease-out card-success;border-color:var(--success)!important;box-shadow:0 0 20px #00e676bf!important}@keyframes card-success{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.alert-banner{border:1px solid var(--border-tactical);height:28px;font-family:var(--font-mono);letter-spacing:1px;background:#04090fcc;justify-content:center;align-items:center;font-size:.74rem;font-weight:700;transition:opacity .2s;display:flex}.alert-banner.hidden{opacity:0;pointer-events:none}.tactical-footer{background:var(--bg-panel);border:1px solid var(--border-tactical);padding:6px 10px}.progress-track{background:#04080e;width:100%;height:6px;position:relative;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, #0284c7, var(--cyan-primary));height:100%;box-shadow:0 0 12px var(--cyan-primary);transition:width .35s cubic-bezier(.4,0,.2,1)}.progress-glow-point{background:#fff;width:4px;transition:left .35s cubic-bezier(.4,0,.2,1);position:absolute;top:0;bottom:0;transform:translate(-50%);box-shadow:0 0 8px #fff}.meta-val{font-family:var(--font-mono);letter-spacing:1px;color:var(--text-main);font-size:.8rem;font-weight:700}.meta-val.highlight{color:var(--cyan-primary)}.text-danger{color:var(--danger)!important}.text-success{color:var(--success)!important}.canvas-loader{z-index:20;background:#04080de0;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.canvas-loader.hidden{opacity:0;pointer-events:none}.spinner{border:2.5px solid #00f2fe2e;border-top-color:var(--cyan-primary);border-radius:50%;width:34px;height:34px;animation:.75s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#02060bd9;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:fixed;inset:0}.modal-backdrop.hidden{opacity:0;pointer-events:none}.victory-card{border:1px solid var(--cyan-primary);text-align:center;background:#071019;flex-direction:column;gap:18px;width:360px;padding:26px 24px;display:flex;box-shadow:0 0 35px #00f2fe40}.victory-icon{border:2px solid var(--success);width:44px;height:44px;color:var(--success);border-radius:50%;justify-content:center;align-items:center;margin:0 auto;font-size:1.4rem;display:flex;box-shadow:0 0 16px #00e67659}.victory-card h2{letter-spacing:2px;color:var(--text-main);font-size:1.15rem}.victory-stats{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.stat-box{border:1px solid var(--border-tactical);background:#04080ecc;flex-direction:column;gap:4px;padding:10px 6px;display:flex}.stat-box span{color:var(--text-muted);letter-spacing:1px;font-size:.68rem}.stat-box strong{font-family:var(--font-mono);font-size:1rem}.btn-tactical-primary{border:1px solid var(--cyan-primary);color:var(--cyan-primary);font-family:var(--font-hud);letter-spacing:2px;cursor:pointer;background:#00f2fe29;padding:11px 18px;font-size:.88rem;font-weight:700;transition:all .2s}.btn-tactical-primary:hover{background:var(--cyan-primary);color:#04080d;box-shadow:0 0 18px var(--cyan-glow)}.config-drawer{border-left:1px solid var(--border-tactical);z-index:500;background:#060d15;flex-direction:column;width:310px;transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-10px 0 30px #000c}.config-drawer.open{transform:translate(0)}.drawer-header{border-bottom:1px solid var(--border-tactical);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.drawer-header h3{color:var(--cyan-primary);letter-spacing:1.5px;font-size:.88rem}.btn-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.3rem}.btn-close:hover{color:#fff}.drawer-content{flex-direction:column;gap:14px;padding:16px 18px;display:flex;overflow-y:auto}.form-group label{color:var(--text-muted);margin-bottom:5px;font-size:.74rem;display:block}.label-row{justify-content:space-between;display:flex}.mono-val{font-family:var(--font-mono);color:var(--cyan-primary);font-size:.74rem}.input-row{gap:6px;display:flex}input[type=number],.select-input{border:1px solid var(--border-tactical);width:100%;color:var(--text-main);font-family:var(--font-mono);background:#04080d;outline:none;padding:6px 8px;font-size:.8rem}input[type=number]:focus,.select-input:focus{border-color:var(--cyan-primary)}.btn-sub{border:1px solid var(--border-tactical);color:#fff;cursor:pointer;background:#09131e;padding:0 10px}.segmented-control{border:1px solid var(--border-tactical);background:#04080d;gap:2px;padding:2px;display:flex}.seg-btn{color:var(--text-muted);font-family:var(--font-hud);cursor:pointer;background:0 0;border:none;flex:1;padding:5px;font-size:.75rem}.seg-btn.active{color:var(--cyan-primary);background:#00f2fe29}input[type=range]{width:100%;accent-color:var(--cyan-primary)}.checkbox-grid{flex-direction:column;gap:6px;display:flex}.checkbox-item{color:var(--text-main);cursor:pointer;align-items:center;gap:8px;font-size:.75rem;display:flex}.checkbox-item input{accent-color:var(--cyan-primary)}