*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--gold:#e8d5a3;--gold-dim:rgba(180,140,60,0.5);--gold-border:rgba(180,140,60,0.25);--gold-glow:rgba(180,140,60,0.1);--wood-dark:#2a1f0e;--wood-mid:#3d2e16;--cyan:#00e5ff;--magenta:#ff00ff;--green:#39ff14;--red:#ff1744;--yellow:#ffea00;--orange:#ff6e00;--bg:#0a0a0a}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:'JetBrains Mono','Courier New',monospace;color:#fff;-webkit-font-smoothing:antialiased}

/* 3D Canvas */
#courtroom-3d{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}

/* CRT */
#crt-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}
#crt-overlay::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(to bottom,rgba(180,140,60,0.02) 0px,rgba(180,140,60,0.02) 2px,transparent 2px,transparent 4px)}
#crt-overlay::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,0.35) 80%,rgba(0,0,0,0.7) 100%)}

/* HUD */
#game-hud{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
#game-hud>*{pointer-events:auto}
#game-screen{display:none}

/* Integrity — improved visibility */
#integrity-bar{width:100%;height:auto;background:rgba(42,31,14,0.7);position:relative;pointer-events:none;display:flex;align-items:center;gap:6px;padding:4px 12px}
#integrity-icon{font-size:14px;line-height:1;flex-shrink:0}
#integrity-track{flex:1;height:10px;background:rgba(42,31,14,0.5);border-radius:5px;overflow:hidden;border:1px solid rgba(180,140,60,0.15)}
#integrity-fill{width:100%;height:100%;background:linear-gradient(90deg,#8a6a2a,var(--gold));transition:width 0.4s ease;border-radius:4px}
#integrity-text{font-size:12px;font-weight:700;color:#fff;text-shadow:0 0 4px rgba(0,0,0,0.9);min-width:36px;text-align:right;flex-shrink:0}

/* Top HUD */
#hud-top{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 16px 0;pointer-events:none}
#hud-left{display:flex;flex-direction:column;gap:2px}
#score-label{font-size:8px;color:var(--gold-dim);letter-spacing:3px;text-transform:uppercase;font-family:'Orbitron',monospace}
#score{font-size:28px;font-weight:900;color:var(--gold);letter-spacing:2px;line-height:1;text-shadow:0 0 10px var(--gold-glow)}
#round{font-size:12px;color:#c4a35a;font-weight:700}
#hud-center{position:absolute;left:50%;transform:translateX(-50%);top:14px}
#phase-badge{background:rgba(180,140,60,0.2);color:var(--gold);font-size:10px;font-weight:900;font-family:'Orbitron',monospace;padding:3px 10px;border-radius:2px;letter-spacing:2px;text-transform:uppercase;border:1px solid var(--gold-border);box-shadow:0 0 12px var(--gold-glow)}

/* Timer */
#timer-container{width:50px;height:50px;position:relative;flex-shrink:0}
#timer-svg{width:50px;height:50px;transform:rotate(-90deg);filter:drop-shadow(0 0 6px var(--gold-glow))}
#timer-bg{fill:none;stroke:rgba(180,140,60,0.1);stroke-width:3}
#timer-progress{fill:none;stroke:#b48c3c;stroke-width:3;stroke-linecap:round;stroke-dasharray:138.23;stroke-dashoffset:0;transition:stroke 0.3s}
#timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;font-weight:700;color:var(--gold);text-shadow:0 0 6px var(--gold-glow)}
#timer-container.timer-critical{animation:timerPulse 0.5s ease-in-out infinite}
@keyframes timerPulse{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}

/* Pause Button (Mobile) */
#mobile-pause-btn{display:none;width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,rgba(18,14,10,0.85),rgba(10,8,6,0.92));border:1px solid rgba(180,140,60,0.35);color:var(--gold);font-size:18px;cursor:pointer;align-items:center;justify-content:center;backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,0.5),inset 0 1px 0 rgba(180,140,60,0.15);transition:all 0.2s;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;flex-shrink:0;position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:20;}
#mobile-pause-btn:active{transform:scale(0.88);background:rgba(180,140,60,0.25)}
.pause-icon{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:100%}
.pause-icon::before,.pause-icon::after{content:'';display:block;width:4px;height:16px;background:var(--gold);border-radius:2px;box-shadow:0 0 6px rgba(180,140,60,0.4)}

/* Case Docket — Premium glassmorphism panel */
#case-docket{position:fixed;bottom:16px;right:16px;width:340px;z-index:10;pointer-events:auto}
#docket-frame{background:linear-gradient(145deg,rgba(18,14,10,0.92),rgba(10,8,6,0.96));border:1px solid rgba(180,140,60,0.25);box-shadow:0 8px 32px rgba(0,0,0,0.6),0 0 20px rgba(180,140,60,0.08),inset 0 1px 0 rgba(180,140,60,0.1);border-radius:12px;padding:14px 16px;position:relative;backdrop-filter:blur(12px);overflow:hidden}
#docket-frame::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(180,140,60,0.3),rgba(255,200,80,0.15),rgba(180,140,60,0.3),transparent)}
#docket-frame::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(180,140,60,0.12),transparent)}
#docket-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(180,140,60,0.08)}
#docket-title{font-family:'Orbitron',monospace;font-size:8px;color:#b48c3c;letter-spacing:3px;text-transform:uppercase;opacity:0.7}
#docket-case-no{font-family:'Orbitron',monospace;font-size:8px;color:#c4a35a;letter-spacing:2px;opacity:0.6}
#case-category{font-size:7px;padding:3px 8px;background:linear-gradient(135deg,var(--magenta),#c0115a);color:white;border-radius:8px;text-transform:uppercase;letter-spacing:0.1em;margin-left:8px;box-shadow:0 2px 8px rgba(255,23,68,0.25)}
#case-names{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.entity-name{font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
#name-p1{color:var(--orange);text-shadow:0 0 12px rgba(255,110,0,0.35)}
#name-vs{font-size:12px;color:#b48c3c;font-weight:700;opacity:0.5}
#name-p2{color:var(--cyan);text-shadow:0 0 12px rgba(0,229,255,0.35)}
#case-separator{width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(180,140,60,0.2),transparent);margin:6px auto 8px}
#case-accusation{font-size:12px;color:rgba(255,255,255,0.75);margin-bottom:10px;line-height:1.45;font-style:italic;text-align:center}
#evidence-label{font-family:'Orbitron',monospace;font-size:7px;color:#b48c3c;letter-spacing:3px;text-transform:uppercase;margin-bottom:4px;opacity:0.6}
#case-evidence{background:linear-gradient(135deg,rgba(42,31,14,0.5),rgba(30,22,10,0.6));border-left:3px solid rgba(180,140,60,0.5);border-radius:8px;padding:10px 12px;font-size:11px;color:rgba(255,255,255,0.6);text-align:left;line-height:1.5;margin-bottom:12px}

/* Verdict — premium pill buttons */
#verdict-section{border-top:1px solid rgba(180,140,60,0.08);padding-top:12px}
#verdict-label{font-family:'Orbitron',monospace;font-size:8px;color:var(--gold-dim);letter-spacing:4px;text-transform:uppercase;text-align:center;margin-bottom:10px}
#buttons{display:flex;justify-content:center;gap:10px}
.judge-btn{flex:1;height:48px;background:transparent;border:1.5px solid;border-radius:10px;font-family:'Orbitron',monospace;font-size:12px;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all 0.15s ease;text-transform:uppercase;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:6px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.judge-btn::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:9px;opacity:0;transition:opacity 0.2s}
.judge-btn:active{transform:scale(0.93) !important;filter:brightness(1.4) !important}
#btn-innocent{color:var(--green);border-color:rgba(57,255,20,0.35)}
#btn-innocent::before{background:linear-gradient(135deg,rgba(57,255,20,0.08),rgba(57,255,20,0.02))}
#btn-innocent:hover{background:rgba(57,255,20,0.1);border-color:var(--green);box-shadow:0 0 20px rgba(57,255,20,0.15),inset 0 0 20px rgba(57,255,20,0.05)}
#btn-innocent:hover::before{opacity:1}
#btn-innocent:active{box-shadow:0 0 30px rgba(57,255,20,0.4),inset 0 0 15px rgba(57,255,20,0.15) !important}
#btn-guilty{color:var(--red);border-color:rgba(255,23,68,0.35)}
#btn-guilty::before{background:linear-gradient(135deg,rgba(255,23,68,0.08),rgba(255,23,68,0.02))}
#btn-guilty:hover{background:rgba(255,23,68,0.1);border-color:var(--red);box-shadow:0 0 20px rgba(255,23,68,0.15),inset 0 0 20px rgba(255,23,68,0.05)}
#btn-guilty:hover::before{opacity:1}
#btn-guilty:active{box-shadow:0 0 30px rgba(255,23,68,0.4),inset 0 0 15px rgba(255,23,68,0.15) !important}
.btn-key{font-size:9px;opacity:0.35;border:1px solid currentColor;border-radius:4px;padding:1px 5px;line-height:1}
#docket-footer{font-size:7px;color:rgba(180,140,60,0.15);letter-spacing:2px;text-transform:uppercase;margin-top:10px;text-align:center;font-family:'Orbitron',monospace}

/* Title Screen */
#title-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#08080c;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 0.4s ease}
#title-screen::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 50% 30%,rgba(180,140,60,0.06) 0%,transparent 60%);pointer-events:none}
#title-screen.fade-out{opacity:0;pointer-events:none}
#title-rule-top,#title-rule-bottom{width:200px;height:1px;background:linear-gradient(90deg,transparent,rgba(180,140,60,0.4),transparent)}
#title-rule-top{margin-bottom:16px}
#title-rule-bottom{margin-bottom:28px}
#title-name{font-family:'Orbitron',monospace;font-size:42px;font-weight:900;letter-spacing:6px;text-transform:uppercase;margin-bottom:4px;text-align:center;display:flex;gap:0;user-select:none;position:relative}
#title-name .glitch-letter{display:inline-block;color:var(--gold);text-shadow:0 2px 20px rgba(180,140,60,0.2);transition:color 0.15s,text-shadow 0.15s,transform 0.1s}
#title-sub{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold-dim);letter-spacing:8px;text-transform:uppercase;margin-bottom:6px}
#title-tagline{font-size:12px;color:rgba(255,255,255,0.35);font-style:italic;height:18px;margin-bottom:36px;transition:opacity 0.4s ease;text-align:center;padding:0 20px}
#title-tagline.fading{opacity:0}
#btn-start{font-family:'Orbitron',monospace;font-size:13px;font-weight:700;color:var(--gold);background:linear-gradient(135deg,rgba(180,140,60,0.08),transparent);border:1.5px solid rgba(180,140,60,0.35);border-radius:12px;padding:16px 48px;letter-spacing:4px;text-transform:uppercase;cursor:pointer;transition:all 0.25s ease;position:relative;overflow:hidden}
#btn-start::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,200,80,0.1),transparent);transition:left 0.5s}
#btn-start:hover{background:linear-gradient(135deg,rgba(180,140,60,0.15),rgba(180,140,60,0.05));border-color:rgba(180,140,60,0.6);box-shadow:0 4px 30px rgba(180,140,60,0.2),0 0 60px rgba(180,140,60,0.08);color:#f0e4bf}
#btn-start:hover::before{left:100%}
#btn-start:active{transform:scale(0.96)}
#title-highscore{font-size:0.7rem;color:rgba(255,255,255,0.2);margin-top:24px;max-width:320px;text-align:center;line-height:1.4}
#title-footer{position:absolute;bottom:20px;font-family:'JetBrains Mono',monospace;font-size:8px;color:rgba(180,140,60,0.2);letter-spacing:4px;text-transform:uppercase}

/* Leaderboard */
#leaderboard{margin-top:16px;text-align:center}
.lb-title{font-family:'Orbitron',monospace;font-size:8px;color:var(--cyan);letter-spacing:3px;margin-bottom:6px}
.lb-entry{font-size:10px;color:rgba(255,255,255,0.4);line-height:1.8}
.lb-gold{color:var(--yellow)}

/* Tutorial Overlay */
#tutorial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500;background:rgba(0,0,0,0.8);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;animation:fadeIn 0.3s ease}
#tutorial-box{background:linear-gradient(145deg,rgba(18,14,10,0.96),rgba(10,8,6,0.98));border:1px solid rgba(180,140,60,0.2);border-radius:16px;padding:30px 32px;max-width:400px;width:90%;text-align:center;box-shadow:0 12px 48px rgba(0,0,0,0.6),0 0 30px rgba(180,140,60,0.1),inset 0 1px 0 rgba(180,140,60,0.12);animation:tutorialPop 0.4s cubic-bezier(0.34,1.56,0.64,1);position:relative;overflow:hidden}
#tutorial-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(180,140,60,0.3),transparent)}
#tutorial-icon{font-size:2.5rem;margin-bottom:12px}
#tutorial-steps{text-align:left;margin-bottom:20px}
.tutorial-step{font-size:13px;color:rgba(255,255,255,0.8);padding:10px 0;border-bottom:1px solid rgba(180,140,60,0.06);line-height:1.4}
.tutorial-step:last-child{border-bottom:none}
#tutorial-dismiss{font-family:'Orbitron',monospace;font-size:12px;font-weight:700;color:var(--gold);background:linear-gradient(135deg,rgba(180,140,60,0.1),transparent);border:1.5px solid rgba(180,140,60,0.3);border-radius:10px;padding:12px 36px;letter-spacing:3px;cursor:pointer;transition:all 0.2s}
#tutorial-dismiss:hover{background:linear-gradient(135deg,rgba(180,140,60,0.2),rgba(180,140,60,0.05));border-color:var(--gold);box-shadow:0 4px 20px rgba(180,140,60,0.15)}
#tutorial-dismiss:active{transform:scale(0.95)}
@keyframes tutorialPop{0%{transform:scale(0.8);opacity:0}100%{transform:scale(1);opacity:1}}

/* Verdict Feedback Toast */
#verdict-feedback{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:1100;pointer-events:none;font-family:'Orbitron',monospace;font-size:14px;font-weight:700;letter-spacing:2px;padding:12px 28px;border-radius:12px;backdrop-filter:blur(10px);white-space:nowrap;animation:feedbackSlide 0.3s ease-out;box-shadow:0 8px 24px rgba(0,0,0,0.4)}
#verdict-feedback.correct{color:var(--green);background:linear-gradient(135deg,rgba(57,255,20,0.15),rgba(57,255,20,0.05));border:1.5px solid rgba(57,255,20,0.3);text-shadow:0 0 12px rgba(57,255,20,0.4)}
#verdict-feedback.incorrect{color:var(--red);background:linear-gradient(135deg,rgba(255,23,68,0.15),rgba(255,23,68,0.05));border:1.5px solid rgba(255,23,68,0.3);text-shadow:0 0 12px rgba(255,23,68,0.4)}
#verdict-feedback.timeout{color:var(--yellow);background:linear-gradient(135deg,rgba(255,234,0,0.12),rgba(255,234,0,0.04));border:1.5px solid rgba(255,234,0,0.3);text-shadow:0 0 10px rgba(255,234,0,0.3)}
@keyframes feedbackSlide{0%{transform:translateX(-50%) translateY(20px) scale(0.9);opacity:0}100%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

/* Game Over — premium glassmorphism panel */
#gameover-screen{position:fixed;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;align-items:center;justify-content:center;z-index:2000;background:rgba(6,5,4,0.9);backdrop-filter:blur(12px)}
#gameover-screen h1{font-family:'Orbitron',monospace;font-size:clamp(1.5rem,5vw,3rem);color:var(--red);text-shadow:0 0 40px rgba(255,23,68,0.4),0 0 80px rgba(255,23,68,0.15);animation:goGlitch 0.5s ease-in-out infinite alternate}
#gameover-stats{margin-top:24px;text-align:center;max-width:380px;width:90%;background:linear-gradient(145deg,rgba(18,14,10,0.8),rgba(10,8,6,0.9));border:1px solid rgba(180,140,60,0.12);border-radius:14px;padding:20px;box-shadow:0 8px 32px rgba(0,0,0,0.4),inset 0 1px 0 rgba(180,140,60,0.08)}
.go-stat-row{display:flex;justify-content:center;gap:24px;margin-bottom:14px}
.go-stat-row > div{flex:1;text-align:center}
.stat-label{color:rgba(255,255,255,0.45);font-size:0.65rem;letter-spacing:0.15em;margin-bottom:3px}
.stat-value{font-family:'Orbitron',monospace;font-size:1.2rem;color:var(--gold);text-shadow:0 0 10px rgba(180,140,60,0.2)}
.go-buttons{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.go-btn{padding:14px 32px;background:linear-gradient(135deg,rgba(180,140,60,0.06),transparent);border:1.5px solid;border-radius:12px;font-family:'Orbitron',monospace;font-size:0.8rem;cursor:pointer;letter-spacing:0.12em;transition:all 0.25s;touch-action:manipulation;min-height:48px;position:relative;overflow:hidden}
.go-btn:active{transform:scale(0.95) !important}
#restart-btn{border-color:rgba(180,140,60,0.4);color:var(--gold)}
#restart-btn:hover{background:linear-gradient(135deg,rgba(180,140,60,0.15),rgba(180,140,60,0.05));box-shadow:0 4px 24px rgba(180,140,60,0.2)}
#share-btn{border-color:rgba(0,229,255,0.3);color:var(--cyan)}
#share-btn:hover{background:linear-gradient(135deg,rgba(0,229,255,0.1),rgba(0,229,255,0.03));box-shadow:0 4px 24px rgba(0,229,255,0.15)}

/* Screen Flash */
#screen-flash{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;pointer-events:none;z-index:999;transition:opacity 0.08s}

/* Combo */
#combo-text{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Orbitron',monospace;font-size:2rem;color:var(--yellow);text-shadow:0 0 30px #ffea0066;z-index:900;opacity:0;transition:opacity 0.2s;pointer-events:none}

/* Glitch effects */
.glitch-shake{animation:gShake 0.1s linear 3}
@keyframes gShake{0%{transform:translate(0)}25%{transform:translate(-3px,2px)}50%{transform:translate(2px,-2px)}75%{transform:translate(-2px,1px)}100%{transform:translate(0)}}
.glitch-chromatic{filter:drop-shadow(2px 0 0 rgba(255,0,255,0.3)) drop-shadow(-2px 0 0 rgba(0,229,255,0.3))!important}
@keyframes goGlitch{0%{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,2px)}100%{transform:translate(2px,-1px)}}

#repair-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500;background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:repairGlitchBg 0.15s ease-out}
#repair-overlay::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,0,0,0.03) 2px,rgba(255,0,0,0.03) 4px);animation:repairScanlines 0.5s linear infinite;pointer-events:none}
@keyframes repairGlitchBg{0%{opacity:0;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes repairScanlines{0%{transform:translateY(0)}100%{transform:translateY(4px)}}
#repair-box{background:linear-gradient(145deg,rgba(18,12,10,0.96),rgba(8,5,4,0.98));border:1.5px solid rgba(255,23,68,0.25);border-radius:16px;padding:30px 36px;max-width:380px;width:90%;text-align:center;box-shadow:0 12px 48px rgba(0,0,0,0.6),0 0 40px rgba(255,23,68,0.1),inset 0 1px 0 rgba(255,100,100,0.08);animation:tutorialPop 0.3s cubic-bezier(0.34,1.56,0.64,1);position:relative;overflow:hidden}
#repair-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,23,68,0.3),transparent)}
#repair-icon{font-size:3rem;margin-bottom:8px;animation:repairPulse 0.6s ease-in-out infinite alternate}
@keyframes repairPulse{0%{transform:scale(1);filter:brightness(1)}100%{transform:scale(1.2);filter:brightness(1.5)}}
#repair-title{font-family:'Orbitron',monospace;font-size:14px;font-weight:900;color:var(--red);letter-spacing:3px;margin-bottom:4px;text-shadow:0 0 15px rgba(255,23,68,0.4);animation:goGlitch 0.3s ease-in-out infinite alternate}
#repair-subtitle{font-size:12px;color:rgba(255,255,255,0.55);margin-bottom:16px}
#repair-bar-track{width:100%;height:14px;background:rgba(42,31,14,0.4);border-radius:8px;overflow:hidden;border:1px solid rgba(255,23,68,0.15);margin-bottom:8px}
#repair-bar-fill{width:0%;height:100%;background:var(--red);border-radius:7px;transition:width 0.08s ease,background 0.3s}
#repair-count{font-family:'Orbitron',monospace;font-size:20px;font-weight:700;color:var(--gold);margin-bottom:14px;text-shadow:0 0 10px rgba(180,140,60,0.2)}
#repair-btn{font-family:'Orbitron',monospace;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,rgba(255,23,68,0.25),rgba(255,110,0,0.2));border:1.5px solid rgba(255,23,68,0.4);border-radius:12px;padding:16px 40px;letter-spacing:2px;cursor:pointer;transition:all 0.08s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:52px;width:100%;user-select:none}
#repair-btn:hover{background:linear-gradient(135deg,rgba(255,23,68,0.4),rgba(255,110,0,0.35));box-shadow:0 4px 24px rgba(255,23,68,0.25)}
#repair-btn:active{transform:scale(0.93)!important;filter:brightness(1.4)!important;box-shadow:0 0 40px rgba(255,23,68,0.5)!important}
#repair-timer{font-family:'Orbitron',monospace;font-size:11px;color:rgba(255,255,255,0.35);margin-top:10px;letter-spacing:2px}
/* Damage — Brutal videogame style */
.damage-mark{position:fixed;pointer-events:none;z-index:400}

/* CRACK — Glass shatter lines radiating from impact */
.crack{width:90px;height:90px;animation:crackIn 0.15s ease-out}
.crack::before{content:'';position:absolute;top:50%;left:50%;width:100%;height:100%;
  background:
    linear-gradient(17deg,transparent 42%,rgba(255,255,255,0.35) 42.5%,rgba(255,255,255,0.35) 43%,transparent 43.5%),
    linear-gradient(140deg,transparent 44%,rgba(255,255,255,0.25) 44.5%,rgba(255,255,255,0.25) 45%,transparent 45.5%),
    linear-gradient(-50deg,transparent 46%,rgba(255,255,255,0.3) 46.5%,rgba(255,255,255,0.3) 47%,transparent 47.5%),
    linear-gradient(85deg,transparent 40%,rgba(255,255,255,0.2) 40.5%,rgba(255,255,255,0.2) 41%,transparent 41.5%),
    linear-gradient(-25deg,transparent 48%,rgba(255,255,255,0.18) 48.5%,rgba(255,255,255,0.18) 49%,transparent 49.5%);
  transform:translate(-50%,-50%)}
.crack::after{content:'';position:absolute;top:50%;left:50%;width:12px;height:12px;transform:translate(-50%,-50%);
  background:rgba(255,255,255,0.2);border-radius:50%;box-shadow:0 0 15px 5px rgba(255,255,255,0.08)}

/* SPLAT — Liquid paint impact with drip */
.splat{width:60px;height:55px;animation:splatIn 0.2s cubic-bezier(0.2,0,0.3,1);filter:blur(0.5px)}
.splat::before{content:'';position:absolute;width:100%;height:100%;border-radius:45% 55% 60% 40%/50% 40% 60% 50%;
  background:var(--splat-color,rgba(0,229,255,0.25));box-shadow:
    8px 12px 0 -2px var(--splat-color,rgba(0,229,255,0.18)),
    -6px 8px 0 -4px var(--splat-color,rgba(0,229,255,0.15)),
    4px -5px 0 -3px var(--splat-color,rgba(0,229,255,0.12))}
.splat::after{content:'';position:absolute;bottom:-18px;left:45%;width:4px;height:20px;
  background:linear-gradient(to bottom,var(--splat-color,rgba(0,229,255,0.2)),transparent);
  border-radius:0 0 3px 3px;animation:drip 1.5s ease-in forwards 0.3s;opacity:0}
@keyframes drip{0%{opacity:0;height:0}30%{opacity:1}100%{opacity:0;height:35px;transform:translateY(15px)}}

/* BURN — Glowing ember with animated pulse */
.burn{width:55px;height:55px;animation:burnIn 0.2s ease-out}
.burn::before{content:'';position:absolute;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,100,0,0.4) 0%,rgba(255,23,68,0.2) 40%,transparent 70%);
  animation:emberPulse 1.5s ease-in-out infinite alternate}
.burn::after{content:'';position:absolute;top:30%;left:30%;width:40%;height:40%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,0,0.5) 0%,transparent 80%);
  animation:emberPulse 1s ease-in-out infinite alternate 0.2s}
@keyframes emberPulse{0%{transform:scale(1);opacity:0.7}100%{transform:scale(1.3);opacity:1}}

/* DEAD PIXEL — Glitching rectangle that flickers */
.dead-pixel{width:10px;height:10px;background:#000;animation:pixelGlitch 0.5s step-end infinite;
  box-shadow:2px 0 0 #000,0 2px 0 #000,2px 2px 0 #000,-2px 0 0 rgba(255,0,255,0.4),0 -2px 0 rgba(0,229,255,0.3)}
@keyframes pixelGlitch{
  0%{opacity:1;background:#000}
  20%{opacity:0.5;background:#ff00ff}
  40%{opacity:1;background:#000}
  60%{opacity:0.8;background:#00e5ff}
  80%{opacity:1;background:#000;transform:translate(1px,-1px)}
  100%{opacity:1;background:#000;transform:translate(0)}
}

@keyframes crackIn{from{transform:scale(0.3) rotate(-10deg);opacity:0;filter:brightness(3)}to{transform:scale(1) rotate(0);opacity:1;filter:brightness(1)}}
@keyframes splatIn{from{transform:scale(0.2) rotate(20deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes burnIn{from{transform:scale(0);opacity:0;filter:brightness(5)}to{transform:scale(1);opacity:1;filter:brightness(1)}}

/* IMPACT PARTICLES — scatter from hit point */
.impact-particle{position:fixed;pointer-events:none;z-index:610;width:6px;height:6px;border-radius:50%;
  animation:particleFly var(--p-dur,0.6s) ease-out forwards}
@keyframes particleFly{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--p-dx,30px),var(--p-dy,-40px)) scale(0);opacity:0}
}

/* DANGER BORDER — pulses red at low integrity */
#danger-border{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:395;opacity:0;transition:opacity 0.5s;
  box-shadow:inset 0 0 60px 15px rgba(255,23,68,0.4),inset 0 0 120px 30px rgba(255,23,68,0.1)}
#danger-border.active{opacity:1;animation:dangerPulse 1.2s ease-in-out infinite}
#danger-border.critical{opacity:1;animation:dangerPulse 0.6s ease-in-out infinite;
  box-shadow:inset 0 0 80px 25px rgba(255,23,68,0.6),inset 0 0 150px 40px rgba(255,23,68,0.2)}
@keyframes dangerPulse{0%{opacity:0.4}50%{opacity:1}100%{opacity:0.4}}

/* Flying objects — launched AT the player from entity position */
.flying-obj{position:fixed;z-index:600;pointer-events:none;font-size:1.2rem;transform-origin:center center}
.flying-obj.from-left{left:25%;bottom:40%;animation:flyAtPlayerL 0.7s cubic-bezier(0.2,0,0.4,1) forwards}
.flying-obj.from-right{left:65%;bottom:40%;animation:flyAtPlayerR 0.7s cubic-bezier(0.2,0,0.4,1) forwards}
.flying-obj.from-center{left:45%;bottom:35%;animation:flyAtPlayerC 0.6s cubic-bezier(0.2,0,0.4,1) forwards}
@keyframes flyAtPlayerL{
  0%{transform:scale(0.4) translate(0,0) rotate(0);opacity:0.6}
  40%{opacity:1}
  85%{transform:scale(3.5) translate(30vw,-20vh) rotate(540deg);opacity:1}
  100%{transform:scale(6) translate(35vw,-25vh) rotate(720deg);opacity:0}
}
@keyframes flyAtPlayerR{
  0%{transform:scale(0.4) translate(0,0) rotate(0);opacity:0.6}
  40%{opacity:1}
  85%{transform:scale(3.5) translate(-25vw,-20vh) rotate(-540deg);opacity:1}
  100%{transform:scale(6) translate(-30vw,-25vh) rotate(-720deg);opacity:0}
}
@keyframes flyAtPlayerC{
  0%{transform:scale(0.3) translate(0,0) rotate(0);opacity:0.5}
  50%{opacity:1}
  90%{transform:scale(5) translate(0,-30vh) rotate(360deg);opacity:1}
  100%{transform:scale(8) translate(0,-35vh) rotate(450deg);opacity:0}
}

/* Impact splatter — appears on "hit" */
.impact-splatter{position:fixed;z-index:601;pointer-events:none;width:100vw;height:100vh;top:0;left:0;
  background:radial-gradient(circle at var(--hit-x,50%) var(--hit-y,40%),rgba(255,23,68,0.25) 0%,transparent 40%);
  animation:splatHit 0.4s ease-out forwards}
@keyframes splatHit{0%{opacity:1;transform:scale(0.5)}100%{opacity:0;transform:scale(1.2)}}

/* Mini entities — swarm toward camera */
.mini-entity{position:fixed;z-index:350;pointer-events:none;width:16px;height:16px;border-radius:50%;box-shadow:0 0 8px currentColor}
.mini-entity.swarm-1{animation:swarmAt1 2.5s ease-in forwards}
.mini-entity.swarm-2{animation:swarmAt2 3s ease-in forwards}
.mini-entity.swarm-3{animation:swarmAt3 2s ease-in forwards}
@keyframes swarmAt1{
  0%{transform:translate(0,0) scale(0.3);opacity:0}
  20%{opacity:1}
  80%{transform:translate(calc(50vw - 100%),calc(50vh - 100%)) scale(2);opacity:0.8}
  100%{transform:translate(calc(50vw - 100%),calc(50vh - 100%)) scale(3);opacity:0}
}
@keyframes swarmAt2{
  0%{transform:translate(0,0) scale(0.4);opacity:0}
  15%{opacity:1}
  70%{transform:translate(calc(45vw - 100%),calc(40vh - 100%)) scale(1.8);opacity:0.7}
  100%{transform:translate(calc(45vw - 100%),calc(40vh - 100%)) scale(2.5);opacity:0}
}
@keyframes swarmAt3{
  0%{transform:translate(0,0) scale(0.5);opacity:0}
  25%{opacity:1}
  85%{transform:translate(calc(55vw - 100%),calc(45vh - 100%)) scale(2.2);opacity:0.9}
  100%{transform:translate(calc(55vw - 100%),calc(45vh - 100%)) scale(4);opacity:0}
}

/* Notifications */
.notification{position:fixed;top:20%;right:16px;padding:12px 18px 12px 14px;background:linear-gradient(135deg,rgba(18,14,10,0.95),rgba(10,8,6,0.97));border:1px solid rgba(180,140,60,0.2);border-left:3px solid var(--gold);border-radius:10px;color:var(--gold);font-size:0.72rem;z-index:700;animation:notifIn 0.35s cubic-bezier(0.34,1.56,0.64,1),notifOut 0.4s ease-in 2s forwards;pointer-events:none;max-width:300px;box-shadow:0 8px 24px rgba(0,0,0,0.5),0 0 15px rgba(180,140,60,0.06);backdrop-filter:blur(8px);line-height:1.4}
@keyframes notifIn{from{transform:translateX(120%) scale(0.8);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}
@keyframes notifOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:translateX(30%) scale(0.9)}}

/* Score popup */
.score-popup{position:fixed;pointer-events:none;z-index:800;font-family:'Orbitron',monospace;font-weight:700;animation:scorePop 1s ease-out forwards}
@keyframes scorePop{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-60px) scale(1.3);opacity:0}}

/* Phase transition */
.phase-transition-text{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);font-family:'Orbitron',monospace;font-size:1.5rem;font-weight:900;letter-spacing:4px;z-index:950;pointer-events:none;animation:phaseIn 1.5s ease-out forwards;text-shadow:0 0 30px currentColor}
@keyframes phaseIn{0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}40%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1) translateY(-30px)}}

/* Gavel CSS */
#gavel-container{position:relative;width:210px;height:130px;margin-top:-10px;margin-bottom:-10px;flex-shrink:0;overflow:hidden}
.gavel{position:absolute;top:39px;left:92px;transform-origin:100px 40px;animation:gavelSwing 2s ease-in-out infinite}
.gavel-head{position:absolute;top:-5px;left:-3px;width:40px;height:65px;background:linear-gradient(180deg,#8B6B4A 0%,#6B4E35 40%,#5A3E28 100%);border-radius:5px;box-shadow:inset 0 3px 6px rgba(255,255,255,0.12),inset 0 -3px 6px rgba(0,0,0,0.3),1px 2px 6px rgba(0,0,0,0.4)}
.gavel-head::before{content:'';position:absolute;top:5px;left:0;right:0;height:5px;background:rgba(0,0,0,0.25);border-radius:2px}
.gavel-head::after{content:'';position:absolute;bottom:5px;left:0;right:0;height:5px;background:rgba(0,0,0,0.25);border-radius:2px}
.ring-left{position:absolute;top:-5px;left:31px;width:6px;height:65px;background:linear-gradient(180deg,#4A3828,#3D2E1F);border-radius:2px 0 0 2px}
.ring-right{position:absolute;top:-5px;left:37px;width:6px;height:65px;background:linear-gradient(180deg,#4A3828,#3D2E1F);border-radius:0 2px 2px 0}
.gavel-handle{position:absolute;top:20px;left:43px;width:90px;height:16px;background:linear-gradient(180deg,#7A5C40 0%,#5C4030 50%,#4A3325 100%);border-radius:7px 2px 2px 7px;box-shadow:inset 0 2px 4px rgba(255,255,255,0.1),inset 0 -2px 4px rgba(0,0,0,0.3),2px 2px 5px rgba(0,0,0,0.35)}
.gavel-block{position:absolute;bottom:20px;left:78px;width:65px;height:18px;transform-origin:center bottom;transition:transform 0.06s ease-out;background:linear-gradient(180deg,#7A5A3A 0%,#5C4030 60%,#4A3020 100%);border-radius:3px;box-shadow:inset 0 2px 4px rgba(255,255,255,0.1),inset 0 -2px 4px rgba(0,0,0,0.3),2px 3px 8px rgba(0,0,0,0.4)}
.gavel-shadow{position:absolute;bottom:16px;left:74px;width:70px;height:6px;background:radial-gradient(ellipse,rgba(0,0,0,0.3) 0%,transparent 70%);border-radius:50%}
.gavel-sparks{position:absolute;bottom:34px;left:74px;opacity:0;transform:scale(0.5);pointer-events:none}
.gavel-sparks.spark-active{animation:gavelSparkPulse 0.5s ease-out forwards}
.spark{position:absolute;width:0;height:0}
.spark-1{border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:13px solid #F5A623;transform:rotate(-45deg);top:0;left:0;filter:drop-shadow(0 0 3px rgba(245,166,35,0.7))}
.spark-2{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:10px solid #FF8C00;transform:rotate(-70deg);top:-5px;left:8px}
.spark-3{border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:8px solid #FFD700;transform:rotate(-20deg);top:4px;left:-4px}
@keyframes gavelSwing{0%{transform:rotate(23deg)}15%{transform:rotate(23deg)}40%{transform:rotate(7.5deg)}45%{transform:rotate(7.5deg)}75%{transform:rotate(7.5deg)}90%{transform:rotate(23deg)}100%{transform:rotate(23deg)}}
@keyframes gavelSparkPulse{0%{opacity:0;transform:scale(0.5)}20%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(0.8)}}
@keyframes gavelContainerShake{0%{transform:translate(0,0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-1px)}60%{transform:translate(-2px,1px)}100%{transform:translate(0,0)}}
@keyframes gavelContainerShakeMobile{0%{transform:scale(0.6) translate(0,0)}20%{transform:scale(0.6) translate(-2px,1px)}40%{transform:scale(0.6) translate(2px,-1px)}60%{transform:scale(0.6) translate(-1px,1px)}100%{transform:scale(0.6) translate(0,0)}}

#impact-wave{position:fixed;width:24px;height:24px;border:2px solid rgba(180,140,60,0.9);border-radius:50%;opacity:0;pointer-events:none;z-index:1001;transform:translate(-50%,-50%) scale(0);max-width:100vw;max-height:100vh}

/* Error Cascade (invasive game over) */
.error-cascade{position:fixed;z-index:1500;pointer-events:none;padding:8px 16px;background:rgba(255,23,68,0.15);border:1px solid rgba(255,23,68,0.5);border-left:3px solid var(--red);color:var(--red);font-family:'JetBrains Mono',monospace;font-size:0.7rem;font-weight:700;letter-spacing:0.1em;animation:errSlide 0.3s ease-out forwards,errFade 0.4s ease-in 1.2s forwards;backdrop-filter:blur(4px);max-width:260px;white-space:nowrap;box-shadow:0 0 20px rgba(255,23,68,0.2)}
@keyframes errSlide{from{transform:translateX(-40px) scale(0.8);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}
@keyframes errFade{from{opacity:1}to{opacity:0;transform:translateY(-10px)}}

/* SCRATCH / CLAW MARKS — attack damage */
.scratch-mark{position:fixed;pointer-events:none;z-index:450;width:var(--sw,120px);height:var(--sh,200px);opacity:0;animation:scratchSlash 0.2s ease-out forwards}
.scratch-mark::before,.scratch-mark::after,.scratch-mark span{content:'';position:absolute;width:3px;height:100%;border-radius:2px;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,0.4) 15%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0.4) 85%,transparent 100%)}
.scratch-mark::before{left:20%;transform:rotate(var(--sa,-8deg));box-shadow:0 0 6px rgba(255,100,0,0.4)}
.scratch-mark::after{left:50%;transform:rotate(var(--sa,-8deg));animation-delay:0.04s;box-shadow:0 0 6px rgba(255,100,0,0.3)}
.scratch-mark span{left:80%;transform:rotate(var(--sa,-8deg));animation-delay:0.08s;box-shadow:0 0 6px rgba(255,100,0,0.2)}
@keyframes scratchSlash{
  0%{opacity:0;clip-path:polygon(0 0,100% 0,100% 0%,0 0%)}
  15%{opacity:1}
  50%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:0.9}
  100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:0.3}
}
.scratch-mark.fade{animation:scratchFade 2s ease-in forwards}
@keyframes scratchFade{from{opacity:0.3}to{opacity:0}}

/* Portal button */
#portal-btn{border-color:var(--magenta);color:var(--magenta)}
#portal-btn:hover{background:rgba(255,0,255,0.12);box-shadow:0 0 20px rgba(255,0,255,0.2)}

/* ===== RESPONSIVE — Hyper-responsive mobile ===== */
@media(max-width:768px){
  #case-docket{bottom:0;right:0;left:0;width:100%;max-width:100vw}
  #docket-frame{border-radius:8px 8px 0 0;border-bottom:none;
    padding:8px 10px calc(10px + env(safe-area-inset-bottom));
    max-height:50vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .entity-name{font-size:15px}
  #case-accusation{font-size:11px;line-height:1.4}
  #case-evidence{font-size:10px;padding:5px 8px}
  /* Touch-friendly buttons (min 48px target per WCAG) */
  .judge-btn{height:48px;font-size:13px;min-width:48px;touch-action:manipulation}
  #verdict-buttons{gap:8px}
  #score{font-size:20px}
  #hud-top{padding:4px 8px 0}
  #timer-container{width:40px;height:40px}
  #timer-svg{width:40px;height:40px}
  #timer-text{font-size:11px}
  #mobile-pause-btn{display:flex}
  /* 3D canvas takes remaining space above docket */
  #courtroom-3d{height:50vh !important;min-height:200px}
  /* Title screen */
  #title-name{font-size:26px;letter-spacing:3px}
  #title-sub{font-size:8px;letter-spacing:4px}
  #gavel-container{transform:scale(0.6);transform-origin:top center;margin-bottom:-65px;overflow:hidden}
  #impact-wave{display:none}
  #start-btn{font-size:13px;padding:12px 32px;min-height:48px}
  /* Notifications smaller on mobile */
  .notification{font-size:0.6rem;padding:6px 10px;max-width:200px;right:8px}
  /* Particles smaller */
  .impact-particle{max-width:4px;max-height:4px}
  /* Damage marks smaller */
  .crack{width:60px;height:60px}
  .splat{width:40px;height:36px}
  .burn{width:38px;height:38px}
  /* Flying objects smaller */
  .flying-obj{font-size:0.9rem}
}

@media(max-width:480px){
  #docket-frame{padding:6px 8px calc(8px + env(safe-area-inset-bottom))}
  .entity-name{font-size:13px}
  #case-accusation{font-size:10px}
  .judge-btn{height:44px;font-size:11px;letter-spacing:1px}
  #courtroom-3d{height:45vh !important}
  #title-name{font-size:20px;letter-spacing:2px}
  .phase-transition-text{font-size:1rem !important}
}

@media(max-width:380px){
  .entity-name{font-size:12px}
  #title-name{font-size:18px;letter-spacing:2px}
  .judge-btn{font-size:10px;letter-spacing:0.5px;height:42px}
  #courtroom-3d{height:40vh !important}
}

/* Landscape mobile — side-by-side layout */
@media(max-height:450px) and (orientation:landscape){
  #case-docket{bottom:0;right:0;left:auto;width:45%;max-width:380px}
  #docket-frame{max-height:100vh;border-radius:8px 0 0 0}
  #courtroom-3d{width:55% !important;height:100vh !important}
  .judge-btn{height:40px;font-size:11px}
}

/* Safe area for notch phones */
@supports(padding: env(safe-area-inset-bottom)){
  #docket-frame{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  #game-hud{padding-top:env(safe-area-inset-top)}
}

/* COMBO TEXT POPUP */
#combo-text{
  display:none;
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:500;
  font-family:'Orbitron','JetBrains Mono',monospace;
  font-size:clamp(28px,5vw,48px);
  font-weight:900;
  letter-spacing:3px;
  text-shadow:0 0 20px currentColor, 0 0 40px currentColor;
  pointer-events:none;
  white-space:nowrap;
}
#combo-text.combo-warm{color:#e8d5a3}
#combo-text.combo-hot{color:#ff6e00;font-size:clamp(32px,6vw,56px)}
#combo-text.combo-mega{color:#ff1744;font-size:clamp(38px,7vw,64px);animation:comboPopIn 0.6s ease-out forwards, comboPulse 0.3s ease-in-out infinite alternate !important}

@keyframes comboPopIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.3)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
  100%{opacity:0.9;transform:translate(-50%,-60%) scale(1)}
}
@keyframes comboPulse{
  0%{text-shadow:0 0 20px currentColor, 0 0 40px currentColor}
  100%{text-shadow:0 0 30px currentColor, 0 0 60px currentColor, 0 0 80px currentColor}
}

/* CONTROLS OVERLAY */
#controls-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:800;display:flex;align-items:center;justify-content:center}
#controls-box{background:rgba(20,15,5,0.95);border:1px solid var(--gold-border);border-radius:12px;padding:30px 40px;max-width:420px;width:90%;text-align:center}
#controls-title{font-family:'Orbitron',monospace;font-size:22px;color:var(--gold);margin-bottom:20px;letter-spacing:3px}
.controls-section{margin:14px 0;text-align:left}
.controls-heading{font-size:13px;color:var(--gold);letter-spacing:2px;margin-bottom:6px;font-weight:700}
.controls-item{font-size:12px;color:#ccc;margin:4px 0;padding-left:10px}
.controls-item b{color:var(--gold);font-size:14px}
#controls-dismiss{margin-top:20px;padding:12px 40px;font-family:'Orbitron',monospace;font-size:14px;font-weight:700;color:#0a0a0a;background:var(--gold);border:none;border-radius:6px;cursor:pointer;letter-spacing:2px;transition:all 0.2s}
#controls-dismiss:hover{background:#fff;transform:scale(1.05)}

/* PAUSE OVERLAY */
#pause-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:900;display:flex;align-items:center;justify-content:center}
#pause-box{text-align:center}
#pause-title{font-family:'Orbitron',monospace;font-size:42px;color:var(--gold);letter-spacing:6px;margin-bottom:20px;text-shadow:0 0 30px var(--gold-glow)}
#pause-resume{padding:14px 50px;font-family:'Orbitron',monospace;font-size:16px;font-weight:700;color:#0a0a0a;background:var(--gold);border:none;border-radius:6px;cursor:pointer;letter-spacing:3px;transition:all 0.2s}
#pause-resume:hover{background:#fff;transform:scale(1.05)}