*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Courier New',monospace;color:#c0c0c0}
#game-container{position:relative;width:100vw;height:100vh;overflow:hidden}
canvas{display:block;position:absolute;top:0;left:0}
#scanlines{position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);pointer-events:none;z-index:5}

#hud{position:absolute;top:0;left:0;right:0;height:52px;background:rgba(8,0,0,.94);display:flex;align-items:center;padding:0 12px;gap:8px;z-index:10;pointer-events:none;border-bottom:2px solid #3a1a1a}
#hud>*{pointer-events:auto}
.hud-portrait{width:36px;height:36px;border:2px solid #c02020;border-radius:3px;object-fit:cover;background:#200}
.hud-stats{display:flex;gap:6px;flex:1;flex-wrap:wrap;align-items:center}
.stat{display:flex;align-items:center;gap:2px;font-size:13px;white-space:nowrap;pointer-events:auto}
.stat-icon{font-size:14px;cursor:default;position:relative;z-index:2;pointer-events:auto}
.stat-bar{width:48px;height:6px;background:#0a0a0a;border:1px solid #3a1a1a;border-radius:2px;overflow:hidden}
.stat-fill{height:100%;transition:width .3s;border-radius:1px}
.stat-val{font-size:11px;color:#666;min-width:22px;text-align:right}
.stat-credits .stat-fill{background:#c0a000}
.stat-approval .stat-fill{background:#c02020}
.stat-fear .stat-fill{background:#ff4040}
.stat-loyalty .stat-fill{background:#4040c0}
.stat-military .stat-fill{background:#20c020}
.stat-institutions .stat-fill{background:#c06020}
.stat-population .stat-fill{background:#c0c020}
.stat-media .stat-fill{background:#2080c0}
.stat-credits .stat-val.debt{color:#c02020;font-weight:bold}

.stat.phase-critical{animation:phasePulse 1.5s infinite}
.stat.phase-critical .stat-icon{color:#d4a017;text-shadow:0 0 6px rgba(212,160,23,.6)}
.stat.phase-critical .stat-fill{box-shadow:0 0 4px rgba(212,160,23,.4)}
.stat.danger{animation:dangerPulse .8s infinite}
.stat.danger .stat-icon{color:#ff4040;text-shadow:0 0 8px rgba(255,64,64,.8)}
.stat.danger .stat-bar{border-color:#ff4040}
.stat.danger .stat-fill{background:#ff4040!important;box-shadow:0 0 6px rgba(255,64,64,.6)}
.stat.danger .stat-val{color:#ff4040;font-weight:bold}
@keyframes phasePulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes dangerPulse{0%,100%{opacity:1}50%{opacity:.5}}

#ap-display{position:absolute;top:56px;left:12px;z-index:10;background:rgba(8,0,0,.9);border:1px solid #3a1a1a;border-radius:4px;padding:6px 10px;font-size:13px}
#ap-display .ap-label{color:#c02020;font-family:'Press Start 2P',monospace;font-size:9px;margin-bottom:2px}
#ap-display .ap-pips{display:flex;gap:4px;margin-top:3px}
.ap-pip{width:16px;height:16px;border:1px solid #5a2a2a;border-radius:2px;background:#0a0a0a}
.ap-pip.filled{background:#c02020;border-color:#c02020}
.ap-pip.spent{background:#1a0a0a;border-color:#3a1a1a}

#clock{color:#888;font-size:12px;font-family:'VT323',monospace;white-space:nowrap;pointer-events:auto}

#phase-banner{position:absolute;top:56px;left:50%;transform:translateX(-50%);z-index:10;text-align:center;pointer-events:none}
#phase-name{font-family:'Press Start 2P',monospace;font-size:11px;color:#c02020;text-shadow:0 0 10px rgba(200,30,30,.3)}
#phase-goal{font-size:12px;color:#555;margin-top:2px}

#legal-ticker{position:absolute;top:56px;right:12px;width:200px;max-height:200px;overflow-y:auto;z-index:10;background:rgba(8,0,0,.9);border:1px solid #5a1a1a;border-radius:4px;padding:6px;font-size:11px;scrollbar-width:thin;scrollbar-color:#333 transparent}
#legal-ticker h4{color:#c02020;font-family:'Press Start 2P',monospace;font-size:7px;margin-bottom:4px}
.legal-item{display:flex;justify-content:space-between;margin-bottom:2px;color:#666}
.legal-item .sev{font-weight:bold}
.legal-item .sev.low{color:#555}
.legal-item .sev.med{color:#c08020}
.legal-item .sev.high{color:#c02020}

#action-log{position:absolute;bottom:12px;left:12px;width:240px;max-height:180px;overflow-y:auto;z-index:10;background:rgba(8,0,0,.9);border:1px solid #3a1a1a;border-radius:4px;padding:6px;font-size:11px;scrollbar-width:thin;scrollbar-color:#333 transparent}
#action-log::-webkit-scrollbar{width:3px}
#action-log::-webkit-scrollbar-thumb{background:#333}
#action-log h4{color:#c02020;font-family:'Press Start 2P',monospace;font-size:7px;margin-bottom:4px}
.log-entry{color:#444;margin-bottom:1px;padding-left:6px;border-left:2px solid #222;font-size:11px;line-height:1.3}
.log-entry.good{border-color:#2a8a2a;color:#3a6a3a}
.log-entry.bad{border-color:#8a2a2a;color:#6a3a3a}
.log-entry.event{border-color:#c08020;color:#8a6a2a}
.log-time{color:#333;margin-right:3px}

#interact-prompt{position:absolute;bottom:200px;left:50%;transform:translateX(-50%);background:rgba(8,0,0,.92);border:1px solid #c02020;border-radius:4px;padding:6px 14px;font-size:13px;text-align:center;z-index:15;display:none;white-space:nowrap}
#interact-prompt .key{display:inline-block;background:#c02020;color:#000;padding:0 4px;border-radius:2px;font-weight:bold}

#panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(8,0,0,.97);border:2px solid #c02020;border-radius:6px;padding:20px;min-width:340px;max-width:480px;z-index:30;display:none}
#panel h3{color:#c02020;font-family:'Press Start 2P',monospace;font-size:10px;margin-bottom:6px}
#panel .desc{font-size:12px;color:#777;margin-bottom:12px;line-height:1.4}
#panel-close{position:absolute;top:6px;right:8px;background:none;border:none;color:#444;font-size:16px;cursor:pointer}
#panel-close:hover{color:#c02020}
.panel-opts{display:flex;flex-direction:column;gap:5px}
.pbtn{background:#0a0a0a;border:1px solid #5a2a2a;color:#aaa;padding:7px 10px;border-radius:3px;cursor:pointer;text-align:left;font-family:'VT323',monospace;font-size:13px;transition:all .12s}
.pbtn:hover{border-color:#c02020;background:#1a0a0a;color:#ccc}
.pbtn .cost{color:#c08020;font-size:11px;display:block}
.pbtn .eff{color:#2080c0;font-size:11px}
.pbtn:disabled{opacity:.3;cursor:not-allowed}
.pbtn .flavor{color:#666;font-size:11px;font-style:italic;margin-top:2px}
.panel-esc{text-align:center;margin-top:10px;padding-top:8px;border-top:1px solid #2a1a1a;color:#444;font-size:11px}
.panel-esc .key{display:inline-block;background:#c02020;color:#000;padding:0 4px;border-radius:2px;font-weight:bold;font-size:11px}

#minimap-wrap{position:absolute;top:270px;right:12px;z-index:10;display:none}
#minimap{background:rgba(8,0,0,.92);border:1px solid #c02020;border-radius:4px;display:block}
.minimap-legend{font-size:10px;color:#666;text-align:center;padding:3px 0;white-space:nowrap}
.mm-player{color:#ff4040}
.mm-building{color:#d4a017}
.mm-door{color:#40c040}
.minimap-hint{text-align:center;font-size:10px;color:#444;padding-top:2px}

#event-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(16,0,0,.97);border:2px solid #c02020;border-radius:6px;padding:20px;min-width:360px;max-width:500px;z-index:35;display:none}
#event-popup h3{color:#c02020;font-family:'Press Start 2P',monospace;font-size:10px;margin-bottom:6px}
#event-popup .edesc{font-size:12px;color:#999;margin-bottom:12px;line-height:1.5}

#phase-transition{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);z-index:45;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#phase-transition h1{font-family:'Press Start 2P',monospace;font-size:22px;color:#c02020;margin-bottom:12px;text-shadow:0 0 20px rgba(200,30,30,.5)}
#phase-transition p{font-size:14px;color:#888;margin-bottom:8px;max-width:460px;line-height:1.6}
#phase-transition .goal-text{font-family:'Press Start 2P',monospace;font-size:9px;color:#d4a017;margin:8px 0;padding:8px 12px;border:1px solid #d4a017;background:rgba(212,160,23,.08)}
#phase-transition button{margin-top:16px;background:#0a0a0a;border:2px solid #c02020;color:#c02020;padding:10px 24px;border-radius:4px;cursor:pointer;font-family:'Press Start 2P',monospace;font-size:10px}
#phase-transition button:hover{background:#1a0a0a}

#overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);z-index:50;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#overlay h1{font-family:'Press Start 2P',monospace;font-size:20px;margin-bottom:10px}
#overlay p{font-size:13px;color:#777;margin-bottom:18px;max-width:420px;line-height:1.6}
#overlay .stats-summary{font-size:12px;color:#555;margin-bottom:14px;line-height:1.8}
#overlay button{background:#0a0a0a;border:2px solid #c02020;color:#c02020;padding:10px 24px;border-radius:4px;cursor:pointer;font-family:'Press Start 2P',monospace;font-size:10px}

#title-screen{position:absolute;top:0;left:0;right:0;bottom:0;background:#000;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
#title-screen h1{font-family:'Press Start 2P',monospace;font-size:20px;color:#c02020;margin-bottom:6px;line-height:1.6;text-shadow:0 0 30px rgba(200,30,30,.3)}
#title-screen h2{font-size:16px;color:#d4a017;margin-bottom:18px}
#title-screen .lore{max-width:560px;margin:6px auto;line-height:1.5;color:#999;font-size:14px}
#title-screen .lore em{color:#d4a017;font-style:normal}
#title-screen .phases{max-width:560px;margin:12px auto;text-align:left;font-size:12px;color:#666;border-left:2px solid #c02020;padding-left:12px;line-height:2}
#title-screen .phases strong{color:#d4a017}
#title-screen .inst{font-size:13px;color:#555;margin:16px 0;line-height:2}
#title-screen .inst b{color:#c02020}
#title-screen button{background:#0a0a0a;border:2px solid #c02020;color:#c02020;padding:12px 32px;border-radius:4px;cursor:pointer;font-family:'Press Start 2P',monospace;font-size:11px;transition:all .2s;margin-top:12px}
#title-screen button:hover{background:#1a0a0a;box-shadow:0 0 20px rgba(200,30,30,.2)}
#title-screen .disclaimer{font-size:11px;color:#333;margin-top:18px;max-width:480px;line-height:1.4}

#help-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(8,0,0,.97);border:2px solid #c02020;border-radius:6px;width:480px;max-height:70vh;z-index:65;display:none;flex-direction:column;text-align:center;padding:20px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#555 transparent}
#help-overlay::-webkit-scrollbar{width:6px}
#help-overlay::-webkit-scrollbar-thumb{background:#555;border-radius:3px}
#help-close{position:sticky;top:0;float:right;background:none;border:none;color:#666;font-size:20px;cursor:pointer;z-index:2;line-height:1;padding:0 4px}
#help-close:hover{color:#c02020}
#help-overlay h2{font-family:'Press Start 2P',monospace;font-size:14px;color:#d4a017;margin-bottom:12px}
#help-overlay .help-content{text-align:left;font-size:13px;color:#888;line-height:1.8}
#help-overlay .help-content h3{color:#c02020;font-family:'Press Start 2P',monospace;font-size:9px;margin:14px 0 6px}
#help-overlay .help-content b{color:#d4a017}
#help-overlay .help-content .key{display:inline-block;background:#c02020;color:#000;padding:0 4px;border-radius:2px;font-weight:bold;font-size:12px}
#help-overlay button{margin-top:16px;background:#0a0a0a;border:2px solid #c02020;color:#c02020;padding:8px 20px;border-radius:4px;cursor:pointer;font-family:'Press Start 2P',monospace;font-size:9px}
#help-overlay button:hover{background:#1a0a0a}
#help-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:64;display:none}

#gargoyle-gauge{position:absolute;top:56px;right:224px;width:200px;z-index:10;background:rgba(8,0,0,.9);border:1px solid #5a1a5a;border-radius:4px;padding:6px;font-size:11px;transition:border-color .3s}
#gargoyle-gauge.warn{border-color:#c02020;animation:gargoylePulse 1s infinite}
.gargoyle-label{color:#a040a0;font-family:'Press Start 2P',monospace;font-size:7px;margin-bottom:4px}
.gargoyle-bar{width:100%;height:8px;background:#0a0a0a;border:1px solid #3a1a3a;border-radius:2px;overflow:hidden;margin:4px 0}
.gargoyle-fill{height:100%;background:#a040a0;transition:width .5s;border-radius:1px}
.gargoyle-fill.danger{background:#c02020}
.gargoyle-val{color:#c060c0;font-size:11px}
#gargoyle-threat{color:#ff40ff;font-size:10px;margin-top:4px;font-weight:bold}
@keyframes gargoylePulse{0%,100%{border-color:#c02020}50%{border-color:#ff4040}}

#help-btn-hud{position:absolute;top:56px;right:436px;z-index:10;background:rgba(8,0,0,.9);border:1px solid #3a3a1a;border-radius:3px;padding:3px 8px;font-size:11px;color:#d4a017;cursor:pointer;font-family:'Press Start 2P',monospace}
#help-btn-hud:hover{border-color:#d4a017}

#help-btn-title{background:none;border:1px solid #555;color:#555;padding:6px 14px;border-radius:4px;cursor:pointer;font-family:'Press Start 2P',monospace;font-size:9px;margin-top:12px}
#help-btn-title:hover{border-color:#d4a017;color:#d4a017}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

#debug-btn{position:fixed;bottom:8px;right:8px;z-index:100;background:#2a0a0a;border:1px solid #633;color:#c04040;padding:4px 10px;border-radius:3px;cursor:pointer;font-family:monospace;font-size:10px}
#debug-btn:hover{background:#3a1a1a;border-color:#c04040}
#debug-panel{position:fixed;top:8px;right:8px;width:340px;max-height:calc(100vh - 16px);overflow-y:auto;z-index:99;background:rgba(0,0,0,.94);border:1px solid #c04040;border-radius:4px;padding:10px;font-family:'Courier New',monospace;font-size:11px;color:#c04040;display:none;scrollbar-width:thin;scrollbar-color:#633 transparent}
#debug-panel h4{color:#ff6060;margin-bottom:6px;font-size:12px;border-bottom:1px solid #331a1a;padding-bottom:4px}
.dbg-row{display:flex;justify-content:space-between;margin-bottom:2px}
.dbg-row .k{color:#888}
.dbg-row .v{color:#c04040}
.dbg-row .v.ok{color:#40c040}
.dbg-row .v.warn{color:#c0c040}
.dbg-row .v.err{color:#ff4040}
.dbg-section{margin-top:8px;padding-top:6px;border-top:1px solid #2a1a1a;color:#888}
#debug-log{max-height:120px;overflow-y:auto;margin-top:6px;font-size:10px;color:#666;scrollbar-width:thin}