/* 黑客终端主题：全绿 monochrome */
:root{
  --mono:'Consolas','Courier New',monospace;
  --disp:'Segoe UI','Microsoft YaHei',system-ui,sans-serif;
  --cyan:#00ff66;      /* 主色：终端绿 */
  --green:#00ff41;
  --magenta:#55ff00;   /* 亮绿 */
  --amber:#bfff00;     /* 黄绿 */
  --red:#33ff77;       /* 警报绿 */
  --purple:#00ff88;
  --pink:#40ff99;
}
html,body{width:100%;height:100%;overflow:hidden;background:#040b06;color:#c8ffd0;font-family:var(--mono);user-select:none}
*{margin:0;padding:0;box-sizing:border-box}
canvas{position:fixed;top:0;left:0;width:100%;height:100%}
#bgCanvas{z-index:0}
#gameCanvas{z-index:1}
#fxCanvas{z-index:2;pointer-events:none}

.vignette{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:89;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}

#hud{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}

.hud-left{position:absolute;top:16px;left:16px;width:200px}
.stat-block{margin-bottom:8px;padding:8px 12px;background:rgba(3,14,8,.7);border:1px solid rgba(0,255,102,.2);border-radius:3px}
.stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.stat-label{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:rgba(140,255,170,.7);text-transform:uppercase}
.stat-value{font-family:var(--disp);font-size:12px;color:var(--cyan);text-shadow:0 0 6px var(--cyan)}
.hp-label{color:var(--green)}
.sh-label{color:var(--cyan)}
.spd-label{color:var(--amber)}
.bar-wrap{width:100%;height:4px;background:rgba(140,255,170,.06);border-radius:2px;overflow:hidden}
.bar{height:100%;border-radius:2px;transition:width .3s}
.bar-hp{background:linear-gradient(90deg,#00ff88,#00cc66);box-shadow:0 0 8px rgba(0,255,136,.4);width:100%}
.bar-sh{background:linear-gradient(90deg,#00ff66,#00cc55);box-shadow:0 0 8px rgba(0,255,102,.4);width:100%}
.bar-spd{background:linear-gradient(90deg,#bfff00,#88ff00);box-shadow:0 0 8px rgba(191,255,0,.4);width:100%}

.hud-right{position:absolute;top:16px;right:16px;width:160px}
.readout-panel{padding:10px 14px;background:rgba(3,14,8,.7);border:1px solid rgba(0,255,102,.2);border-radius:3px;margin-bottom:8px}
.readout-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid rgba(0,255,102,.06)}
.readout-row:last-child{border-bottom:none}
.ro-key{font-family:var(--mono);font-size:10px;color:rgba(140,255,170,.6);letter-spacing:1px}
.ro-val{font-family:var(--disp);font-size:12px;color:var(--cyan);text-shadow:0 0 4px var(--cyan)}
.weapon-slot{padding:8px 14px;background:rgba(3,14,8,.7);border:1px solid rgba(85,255,0,.25);border-radius:3px}
.wpn-name{font-family:var(--disp);font-size:11px;color:var(--magenta);text-shadow:0 0 6px var(--magenta);letter-spacing:2px}
.wpn-info{font-family:var(--mono);font-size:10px;color:rgba(85,255,0,.6);margin-top:2px}

.boss-frame{position:absolute;top:70px;left:50%;transform:translateX(-50%);width:340px;
  padding:10px 16px;background:rgba(20,0,10,.8);border:1px solid rgba(34,255,136,.4);border-radius:4px;
  text-align:center;display:none;animation:bossPulse 2s ease-in-out infinite}
@keyframes bossPulse{0%,100%{box-shadow:0 0 20px rgba(34,255,136,.2)}50%{box-shadow:0 0 40px rgba(34,255,136,.5)}}
.boss-alert-line{font-family:var(--mono);font-size:10px;color:var(--red);letter-spacing:3px;margin-bottom:4px}
.alert-blink{animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.boss-name{font-family:var(--disp);font-size:14px;color:var(--red);text-shadow:0 0 10px var(--red);letter-spacing:4px;margin-bottom:6px}
.boss-bar-wrap{width:100%}
.bar-outer{width:100%;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.bar-boss-hp{background:linear-gradient(90deg,#00ff66,#66ff99);box-shadow:0 0 10px rgba(34,255,136,.5);width:100%;height:100%}

.damage-flash{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:88;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(0,255,102,.3) 100%);opacity:0;transition:opacity .1s}

.overlay{position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(2,10,4,.94);display:flex;align-items:center;justify-content:center;
  z-index:100;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hidden{display:none!important}

.menu-main{text-align:center;max-width:560px;width:90%}
.title-block{margin-bottom:24px}
.title-jp{font-family:var(--mono);font-size:12px;color:var(--magenta);letter-spacing:8px;margin-bottom:4px;opacity:.7}
.title-main{font-family:var(--disp);font-size:38px;font-weight:900;color:var(--cyan);
  text-shadow:0 0 15px var(--cyan),0 0 30px var(--cyan),0 0 60px rgba(0,100,255,.4);
  letter-spacing:6px;margin-bottom:6px}
.title-sub{font-family:var(--mono);font-size:11px;color:rgba(140,255,170,.6);letter-spacing:3px}
.title-line{width:60%;height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}

.briefing-panel{padding:16px 24px;background:rgba(3,14,8,.6);border:1px solid rgba(0,255,102,.15);border-radius:4px;margin-bottom:20px}
.brief-header{font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:2px;margin-bottom:12px;text-align:left}
.brief-cols{display:flex;gap:20px;justify-content:center}
.brief-col{flex:1;text-align:left}
.brief-h{font-family:var(--disp);font-size:9px;color:var(--cyan);letter-spacing:3px;margin-bottom:6px;text-transform:uppercase}
.ctrl-row{display:flex;align-items:center;gap:6px;padding:3px 0;flex-wrap:wrap}
.k{display:inline-block;padding:2px 8px;background:rgba(191,255,0,.1);border:1px solid rgba(191,255,0,.25);border-radius:2px;
  font-family:var(--mono);font-size:10px;color:var(--amber);letter-spacing:1px;min-width:24px;text-align:center}
.d{font-size:12px;color:rgba(140,255,170,.7);letter-spacing:1px}

.cyber-btn{display:block;width:100%;padding:12px 24px;margin:8px auto;
  background:linear-gradient(135deg,rgba(0,255,102,.08),rgba(85,255,0,.08));
  border:1px solid var(--cyan);color:var(--cyan);font-family:var(--disp);
  font-size:13px;font-weight:700;letter-spacing:4px;cursor:pointer;border-radius:3px;
  text-shadow:0 0 8px var(--cyan);box-shadow:0 0 15px rgba(0,255,102,.1);
  transition:all .25s;pointer-events:auto;text-transform:uppercase;position:relative;overflow:hidden}
.cyber-btn:hover{background:linear-gradient(135deg,rgba(0,255,102,.2),rgba(85,255,0,.2));
  box-shadow:0 0 30px rgba(0,255,102,.3);color:#fff;transform:scale(1.02)}
.cyber-btn .btn-scan{position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,255,102,.08),transparent);transition:left .4s}
.cyber-btn:hover .btn-scan{left:100%}
.cyber-btn.danger{border-color:var(--red);color:var(--red);text-shadow:0 0 8px var(--red);box-shadow:0 0 15px rgba(34,255,136,.15)}
.cyber-btn.danger:hover{background:linear-gradient(135deg,rgba(34,255,136,.15),rgba(255,100,100,.15));box-shadow:0 0 30px rgba(34,255,136,.3)}

.mini-panel{text-align:center;padding:30px 40px;background:rgba(3,14,8,.85);border:1px solid rgba(0,255,102,.2);border-radius:6px;max-width:400px}
.panel-title{font-family:var(--disp);font-size:28px;font-weight:900;color:var(--cyan);
  text-shadow:0 0 15px var(--cyan),0 0 30px rgba(0,255,102,.4);letter-spacing:6px;margin-bottom:8px}
.panel-sub{font-family:var(--mono);font-size:11px;color:rgba(140,255,170,.6);letter-spacing:3px;margin-bottom:16px}
.death-panel{border-color:rgba(34,255,136,.3)}
.death-title{color:var(--red)!important;text-shadow:0 0 15px var(--red),0 0 30px rgba(34,255,136,.4)!important}
.victory-title{color:var(--magenta)!important;text-shadow:0 0 15px var(--magenta),0 0 30px rgba(139,0,255,.4)!important}
.death-stats,.victory-stats{margin:12px 0}
.ds-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.ds-row:last-child{border-bottom:none}
.ds-row span:first-child{font-family:var(--mono);font-size:11px;color:rgba(140,255,170,.6);letter-spacing:1px}
.ds-val{font-family:var(--disp);font-size:13px;color:var(--cyan)}

.wave-announce{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:50;
  pointer-events:none;opacity:0;transition:opacity .5s}
.wave-announce.show{opacity:1}
.wa-label{font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:4px}
.wa-num{font-family:var(--disp);font-size:48px;font-weight:900;color:var(--cyan);
  text-shadow:0 0 20px var(--cyan),0 0 40px rgba(0,255,102,.4);letter-spacing:4px}
.wa-tag{font-family:var(--disp);font-size:14px;color:rgba(140,255,170,.7);letter-spacing:3px}

.intro-fade{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:200;pointer-events:none;
  opacity:0;display:none;transition:opacity 1.5s}
.intro-fade.done{opacity:0}
.intro-fade.gone{display:none}

/* 突破防火墙层 过场动画 */
.break-overlay{background:rgba(0,6,2,.92);z-index:150}
.break-panel{width:min(520px,86vw);background:rgba(3,14,8,.5);border:1px solid rgba(0,255,102,.5);
  box-shadow:0 0 30px rgba(0,255,102,.18),inset 0 0 40px rgba(0,255,102,.05);
  padding:30px 34px;text-align:left}
.break-title{font-family:var(--mono);font-size:20px;color:var(--amber);letter-spacing:6px;
  text-shadow:0 0 18px var(--amber);margin-bottom:18px;animation:brkshake .6s infinite}
@keyframes brkshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.break-lines{font-family:var(--mono);font-size:13px;color:var(--cyan);line-height:2;margin-bottom:20px}
.break-line{opacity:0;animation:brkmode .4s steps(1) forwards}
.break-line:nth-child(1){animation-delay:.3s}
.break-line:nth-child(2){animation-delay:.8s}
.break-line:nth-child(3){animation-delay:1.4s}
.break-line:nth-child(4){animation-delay:2s}
@keyframes brkmode{to{opacity:1}}
.blink{animation:torick .5s steps(1) infinite}
@keyframes torick{50%{opacity:0}}
.break-bar{height:4px;background:rgba(140,255,170,.1);border-radius:2px;overflow:hidden}
.break-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#00ff66,#b8ff00);
  box-shadow:0 0 10px rgba(0,255,102,.6);transition:width 2.4s ease}