:root{
  --bg:#05070f; --panel:#0b1226; --panel2:#101a33; --line:#26345f;
  --ink:#dfe8ff; --dim:#7f8cb8; --cyan:#41e6ff; --mag:#ff4d9d;
  --gold:#ffcf5c; --red:#ff5566; --green:#5cff9d; --purp:#b98cff;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Press Start 2P","Microsoft YaHei","PingFang SC",monospace;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  user-select:none;
}
#wrap{
  position:relative; width:min(96vw,calc(96vh * 0.75)); aspect-ratio:3/4;
  border:4px solid var(--line); background:#000;
  box-shadow:0 0 0 2px #000, 0 0 42px rgba(65,230,255,.12), 0 24px 80px rgba(0,0,0,.7);
}
canvas#game{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#05070f;touch-action:none}
#scan{position:absolute;inset:0;pointer-events:none;z-index:40;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply}
#vig{position:absolute;inset:0;pointer-events:none;z-index:41;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5) 100%)}
/* ---------- overlays ---------- */
.ovl{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(4,7,16,.88); text-align:center; padding:4%; gap:10px; overflow-y:auto}
.ovl.hide{display:none}
#o-title{background:rgba(4,7,16,.5)} /* 半透明：露出背后实战模拟 */
h1.logo{font-size:clamp(20px,5.4vw,44px);color:#fff;letter-spacing:4px;line-height:1.35;
  text-shadow:3px 3px 0 var(--mag), -3px -3px 0 var(--cyan), 0 0 24px rgba(65,230,255,.6)}
.logo-cn{font-size:clamp(12px,2.6vw,20px);color:var(--gold);letter-spacing:12px;text-shadow:2px 2px 0 #7a4b00}
.tag{font-size:clamp(7px,1.4vw,10px);color:var(--dim);letter-spacing:2px}
.btn{font:inherit;font-size:clamp(9px,1.8vw,13px);color:var(--ink);background:var(--panel2);
  border:3px solid var(--line);padding:12px 22px;cursor:pointer;letter-spacing:3px;
  transition:all .12s; min-width:min(64vw,240px)}
.btn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px);box-shadow:0 4px 0 rgba(65,230,255,.25)}
.btn:active{transform:translateY(1px)}
.btn.primary{border-color:var(--cyan);color:#031018;background:var(--cyan);font-weight:bold}
.btn.primary:hover{background:#8ff2ff;color:#000}
.btn.gold{border-color:var(--gold);color:var(--gold)}
.btn.gold:hover{background:var(--gold);color:#231600}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.col{display:flex;flex-direction:column;gap:10px;align-items:center}
.panel{background:var(--panel);border:3px solid var(--line);padding:14px;max-width:92%}
.h2{font-size:clamp(11px,2.2vw,16px);color:var(--cyan);letter-spacing:4px;text-shadow:2px 2px 0 rgba(65,230,255,.25)}
.h3{font-size:clamp(8px,1.6vw,11px);color:var(--dim);letter-spacing:2px;line-height:1.8}
.stat-grid{display:grid;grid-template-columns:auto auto;gap:6px 18px;font-size:clamp(8px,1.6vw,11px);
  color:var(--ink);text-align:left;letter-spacing:1px}
.stat-grid b{color:var(--gold);text-align:right}
/* ship / mode select cards */
.pick{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pcard{width:min(28vw,132px);background:var(--panel);border:3px solid var(--line);padding:10px 6px;cursor:pointer;transition:all .12s}
.pcard:hover{transform:translateY(-3px)}
.pcard.sel{border-color:var(--cyan);box-shadow:0 0 16px rgba(65,230,255,.35)}
.pcard.lock{opacity:.55}
.pcard canvas{width:52px;height:64px;image-rendering:pixelated}
.pcard .nm{font-size:clamp(8px,1.5vw,11px);color:var(--ink);letter-spacing:2px;margin:6px 0 4px}
.pcard .ds{font-size:clamp(6px,1.2vw,8px);color:var(--dim);line-height:1.7;letter-spacing:1px}
.pcard .cost{font-size:clamp(7px,1.3vw,9px);color:var(--gold);margin-top:5px}
/* rush 老虎机 */
.togrow{font-size:clamp(8px,1.5vw,11px);color:var(--dim);letter-spacing:2px;margin:4px 0 8px}
.togrow input{accent-color:var(--cyan);transform:translateY(1px)}
.slotrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.slotbox{width:min(20vw,86px);background:var(--panel);border:3px solid var(--line);padding:8px 4px}
.slotbox .sc{font-size:clamp(6px,1.2vw,8px);color:var(--cyan);letter-spacing:2px}
.slotbox .sn{font-size:clamp(7px,1.4vw,10px);color:var(--ink);margin-top:6px;min-height:2.6em;display:flex;align-items:center;justify-content:center;line-height:1.3}
.slotbox .sn.hit{color:var(--gold);text-shadow:0 0 8px rgba(255,207,92,.6)}
/* upgrade cards */
#cards{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.ucard{width:min(27vw,150px);background:var(--panel);border:3px solid var(--line);padding:12px 8px;cursor:pointer;
  transition:all .12s;position:relative}
.ucard:hover{transform:translateY(-4px) scale(1.03)}
.ucard canvas{width:40px;height:40px;image-rendering:pixelated}
.ucard .nm{font-size:clamp(8px,1.6vw,11px);margin:8px 0 4px;letter-spacing:1px}
.ucard .lv{font-size:clamp(6px,1.2vw,8px);color:var(--dim);letter-spacing:2px}
.ucard .ds{font-size:clamp(6px,1.25vw,9px);color:var(--ink);line-height:1.8;margin-top:6px;min-height:3.4em}
.ucard .key{position:absolute;top:4px;left:6px;font-size:8px;color:var(--dim)}
.ucard.r0{border-color:#5f7fb8}.ucard.r0 .nm{color:#9fd8ff}
.ucard.r1{border-color:var(--purp);box-shadow:0 0 12px rgba(185,140,255,.3)}.ucard.r1 .nm{color:var(--purp)}
.ucard.r2{border-color:var(--gold);box-shadow:0 0 16px rgba(255,207,92,.45)}.ucard.r2 .nm{color:var(--gold)}
.rtag{font-size:6px;letter-spacing:2px;color:var(--dim)}
/* hangar */
.shop{display:flex;flex-direction:column;gap:8px;width:min(92%,420px)}
.sitem{display:flex;align-items:center;gap:10px;background:var(--panel);border:3px solid var(--line);padding:8px 10px;text-align:left}
.sitem .ic{width:30px;height:30px;flex:none;image-rendering:pixelated}
.sitem .inf{flex:1}
.sitem .nm{font-size:clamp(8px,1.5vw,10px);letter-spacing:2px}
.sitem .ds{font-size:clamp(6px,1.2vw,8px);color:var(--dim);line-height:1.6;margin-top:3px}
.sitem .pips{font-size:7px;color:var(--cyan);letter-spacing:2px;margin-top:3px}
.sitem button{font:inherit;font-size:clamp(7px,1.3vw,9px);background:var(--panel2);color:var(--gold);
  border:2px solid var(--gold);padding:8px 10px;cursor:pointer;flex:none}
.sitem button:disabled{opacity:.35;border-color:var(--line);color:var(--dim)}
.wallet{font-size:clamp(9px,1.8vw,12px);color:var(--gold);letter-spacing:2px}
/* touch buttons */
#tbtns{position:absolute;inset:auto 0 10px 0;z-index:45;display:none;justify-content:space-between;padding:0 12px;pointer-events:none}
#tbtns button{pointer-events:auto;font:inherit;font-size:10px;width:64px;height:64px;border-radius:8px;
  background:rgba(16,26,51,.7);border:3px solid var(--line);color:var(--ink);letter-spacing:1px}
#tbtns button:active{background:var(--cyan);color:#000}
#tb-pause{position:absolute;top:6px;right:6px;z-index:46;font:inherit;font-size:11px;width:40px;height:40px;
  background:rgba(16,26,51,.7);border:3px solid var(--line);color:var(--ink);letter-spacing:1px}
#tb-pause:active{background:var(--cyan);color:#000}
.blink{animation:blk 1s steps(2) infinite}
@keyframes blk{50%{opacity:.25}}
.help-list{font-size:clamp(7px,1.5vw,10px);color:var(--ink);line-height:2.2;letter-spacing:2px;text-align:left}
.help-list b{color:var(--cyan)}
.small{font-size:clamp(6px,1.2vw,8px);color:var(--dim);letter-spacing:1px;line-height:1.8}
.litem{display:inline-block;background:var(--panel);border:2px solid var(--line);padding:5px 8px;margin:3px;font-size:clamp(7px,1.3vw,9px);cursor:pointer;letter-spacing:1px;color:var(--dim)}
.litem.on{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 8px rgba(65,230,255,.3)}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;width:min(92%,430px)}
.cx-item{background:var(--panel);border:2px solid var(--line);padding:6px 2px;text-align:center;cursor:pointer;transition:all .1s}
.cx-item:hover{transform:translateY(-2px);border-color:var(--cyan)}
.cx-item canvas{width:28px;height:28px;image-rendering:pixelated}
.cx-item .nm{font-size:clamp(6px,1.1vw,8px);margin-top:4px;letter-spacing:1px}
.cx-item.lock{opacity:.35;cursor:default}
.cx-item.lock:hover{transform:none;border-color:var(--line)}
.cx-sec{font-size:clamp(8px,1.5vw,10px);color:var(--cyan);margin:10px 0 4px;letter-spacing:3px}

/* ---------- 登陆/注册 ---------- */
.auth-f{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.auth-f.hide{display:none}
.auth-f input{font:inherit;font-size:clamp(8px,1.6vw,11px);background:var(--panel2);border:3px solid var(--line);
  color:var(--ink);padding:10px 12px;letter-spacing:1px;width:100%;outline:none}
.auth-f input:focus{border-color:var(--cyan)}
.auth-f input::placeholder{color:var(--dim)}
.auth-f .btn{width:100%;min-width:0;margin-top:2px}
/* ---------- 飞行员大厅 ---------- */
#o-home{background:rgba(4,7,16,.42);justify-content:flex-start;gap:8px;overflow-y:auto}
#o-home .lb{width:min(94%,430px);flex:1;min-height:0;display:flex;flex-direction:column;background:rgba(11,18,38,.55);border:3px solid var(--line);padding:10px 10px 8px}
#o-home .btn{background:rgba(16,26,51,.55)}
#o-home .btn.primary{background:rgba(65,230,255,.68)}
#o-home .lb-tabs button{background:rgba(16,26,51,.5)}
.lb-tabs{display:flex;gap:6px;justify-content:center;margin:6px 0 8px}
.lb-tabs button{font:inherit;font-size:clamp(7px,1.3vw,9px);background:var(--panel2);color:var(--dim);
  border:2px solid var(--line);padding:6px 10px;cursor:pointer;letter-spacing:1px}
.lb-tabs button.on{border-color:var(--cyan);color:var(--cyan)}
.lb-row{display:grid;grid-template-columns:30px 1fr 48px 58px 70px;gap:4px;align-items:center;
  font-size:clamp(7px,1.3vw,9px);padding:4px 4px;letter-spacing:1px;text-align:left}
.lb-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row span:first-child{color:var(--dim)}
.lb-row.lb-head{color:var(--dim);border-bottom:2px solid var(--line)}
.lb-row.me{background:rgba(65,230,255,.12);outline:1px solid rgba(65,230,255,.35)}
.lb-list{flex:1;min-height:100px;overflow-y:auto}
.lb-empty{color:var(--dim);font-size:clamp(7px,1.3vw,9px);padding:14px 0;letter-spacing:2px}