*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#cfe9f2;
  font-family:"Rajdhani","DIN Alternate","Bahnschrift","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;cursor:default}
#stage{position:fixed;inset:0;overflow:hidden}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#gl{z-index:1}
#fx{z-index:2;pointer-events:none}

/* 头盔面罩：暗角 + 内反光 */
#visor{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
   radial-gradient(120% 95% at 50% 46%,transparent 42%,rgba(0,0,0,.32) 72%,rgba(0,0,0,.78) 100%),
   radial-gradient(60% 26% at 50% 4%,rgba(160,220,255,.055),transparent 70%),
   linear-gradient(180deg,rgba(0,0,0,.30),transparent 18%,transparent 84%,rgba(0,0,0,.42));
  mix-blend-mode:normal}
#visor:after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(120,200,230,.030) 0 1px,transparent 1px 3px);opacity:.5}

/* ===================== HUD ===================== */
#hud{position:absolute;inset:0;z-index:4;pointer-events:none;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
  text-shadow:0 0 6px rgba(90,220,255,.55),0 0 22px rgba(60,180,230,.25)}
#hud.hidden{display:none}
#hud .hud-corner{position:absolute;width:34px;height:34px;border:1px solid rgba(120,235,255,.30)}
.hud-corner.tl{left:16px;top:16px;border-right:0;border-bottom:0}
.hud-corner.tr{right:16px;top:16px;border-left:0;border-bottom:0}
.hud-corner.bl{left:16px;bottom:16px;border-right:0;border-top:0}
.hud-corner.br{right:16px;bottom:16px;border-left:0;border-top:0}

#hud-top{position:absolute;top:20px;left:0;right:0;display:flex;justify-content:center;gap:12px;align-items:baseline}
/* 顶部标签：统一半透明玻璃底板，保证在亮云层前也能看清 */
#planetTag,#phaseTag,#warpTag{
  background:linear-gradient(180deg,rgba(6,22,32,.72),rgba(3,12,20,.44));
  border:1px solid rgba(140,230,255,.18);
  border-radius:3px;padding:4px 13px;
  box-shadow:0 2px 14px rgba(0,0,0,.38),inset 0 0 16px rgba(120,220,255,.05);
  text-shadow:0 0 6px rgba(90,220,255,.55),0 0 22px rgba(60,180,230,.25)}
#planetTag{font-size:17px;font-weight:600;color:#a9ecff}
#planetTag i{font-style:normal;opacity:.55;margin-left:9px;font-size:12px;letter-spacing:.16em}
#phaseTag{font-size:12px;letter-spacing:.28em;color:#8fe6ff;opacity:.85}
#warpTag{font-size:11px;letter-spacing:.2em;color:#ffd479;opacity:1;transition:opacity .2s}
#warpTag.off{opacity:.22;color:#7fd8f0}

.gauge{position:absolute;bottom:96px;width:214px;font-size:12px;
  padding:12px 15px 10px;border-radius:4px;
  background:linear-gradient(180deg,rgba(6,22,32,.72),rgba(3,12,20,.48));
  border:1px solid rgba(140,230,255,.18);
  box-shadow:0 2px 16px rgba(0,0,0,.38),inset 0 0 20px rgba(120,220,255,.05)}
.gauge.left{left:34px}
.gauge.right{right:34px;text-align:right}
.gauge-label{font-size:10px;letter-spacing:.24em;opacity:.62;margin-bottom:1px}
.gauge-big{font-size:47px;line-height:.98;font-weight:600;color:#e6fbff;
  text-shadow:0 0 12px rgba(80,215,255,.6),0 0 40px rgba(40,160,220,.35)}
.gauge-big i{font-size:14px;font-style:normal;opacity:.55;margin-left:5px;letter-spacing:.1em}
.gauge-row{display:flex;justify-content:space-between;gap:10px;opacity:.82;margin-top:3px;font-size:11.5px}
.gauge.right .gauge-row{flex-direction:row-reverse}
.gauge-row b{font-weight:600;color:#d9f7ff}
.bar{height:5px;margin:5px 0 2px;background:rgba(140,230,255,.11);border:1px solid rgba(140,230,255,.20);overflow:hidden}
.bar.thin{height:3px;margin:3px 0 1px}
.fill{height:100%;width:0%;transition:width .09s linear}
.fill.spd{background:linear-gradient(90deg,#3fd0ff,#a6f4ff)}
.fill.g{background:linear-gradient(90deg,#7ee6b0,#ffe066,#ff6a4d)}
.fill.temp{background:linear-gradient(90deg,#59c8ff,#ffcf4d,#ff5a2a)}
.fill.hp{background:linear-gradient(90deg,#ff4d4d,#ffd166,#6ef0a8)}

/* 高度带 */
.tape{position:relative;height:96px;margin:6px 0 4px;overflow:hidden;
  background:rgba(3,14,22,.42);
  border:1px solid rgba(140,230,255,.10);border-right:1px solid rgba(140,230,255,.28);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
#tapeInner{position:absolute;right:0;width:100%;font-size:9.5px;line-height:1;opacity:.75}
#tapeInner div{position:absolute;right:8px;white-space:nowrap}
#tapeInner div:before{content:"";position:absolute;right:-8px;top:50%;width:6px;height:1px;background:rgba(150,235,255,.6)}
.tape-mark{position:absolute;right:0;top:50%;width:100%;height:1px;background:rgba(255,220,120,.85);
  box-shadow:0 0 8px rgba(255,210,110,.8)}

#hud-bottom{position:absolute;bottom:26px;left:0;right:0;display:flex;justify-content:center;gap:14px;font-size:11px}
#hud-bottom>div{border:1px solid rgba(140,230,255,.22);
  background:linear-gradient(180deg,rgba(6,22,32,.72),rgba(3,12,20,.5));
  padding:7px 15px;min-width:150px;text-align:center;border-radius:4px;
  box-shadow:0 2px 14px rgba(0,0,0,.36)}
#hud-bottom b{display:block;font-size:13px;color:#dcf8ff;letter-spacing:.08em}
#hud-bottom span{opacity:.5;font-size:10px;letter-spacing:.06em}
#chuteBox.open{border-color:rgba(120,255,180,.6);background:rgba(10,50,35,.4)}
#chuteBox.open b{color:#9dffc8}
#chuteBox.torn{border-color:rgba(255,90,60,.7);background:rgba(60,14,8,.45)}
#chuteBox.torn b{color:#ff9b82}
#objBox b{color:#ffd479}

#crosshair{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);opacity:.7;
  border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(3,14,22,.42),rgba(3,14,22,0) 72%)}
#crosshair:before,#crosshair:after{content:"";position:absolute;background:rgba(170,240,255,.85)}
#crosshair:before{left:50%;top:0;width:1px;height:7px;transform:translateX(-50%);box-shadow:0 19px 0 rgba(170,240,255,.85)}
#crosshair:after{top:50%;left:0;height:1px;width:7px;transform:translateY(-50%);box-shadow:19px 0 0 rgba(170,240,255,.85)}

#warnStack{position:absolute;top:76px;left:0;right:0;text-align:center}
.warn{display:inline-block;margin:3px 5px;padding:4px 15px;font-size:13px;font-weight:600;letter-spacing:.16em;
  border:1px solid;animation:blink 1s steps(2,end) infinite}
.warn.red{color:#ff7a5c;border-color:rgba(255,90,60,.75);background:rgba(70,12,6,.42);
  text-shadow:0 0 10px rgba(255,110,70,.8)}
.warn.amber{color:#ffd06b;border-color:rgba(255,200,90,.7);background:rgba(64,44,4,.36);
  text-shadow:0 0 10px rgba(255,200,90,.75)}
.warn.cyan{color:#87e9ff;border-color:rgba(130,230,255,.6);background:rgba(6,38,52,.4);animation:none}
@keyframes blink{50%{opacity:.28}}

#subtitle{position:absolute;bottom:112px;left:50%;transform:translateX(-50%);
  max-width:min(760px,88vw);text-align:center;font-size:15px;color:#dff6ff;
  letter-spacing:.05em;opacity:0;transition:opacity .45s;
  padding:8px 24px;border-radius:4px;
  background:linear-gradient(180deg,rgba(6,22,32,.74),rgba(3,12,20,.52));
  border:1px solid rgba(140,230,255,.2);
  box-shadow:0 2px 16px rgba(0,0,0,.38)}
#subtitle.show{opacity:.96}
#subtitle b{color:#8ff0c0;font-weight:600}
#beaconCount{position:absolute;top:16px;right:56px;font-size:11px;letter-spacing:.16em;opacity:.85;color:#ffd479;
  padding:4px 12px;border-radius:3px;
  background:linear-gradient(180deg,rgba(6,22,32,.72),rgba(3,12,20,.44));
  border:1px solid rgba(140,230,255,.16);
  box-shadow:0 2px 12px rgba(0,0,0,.32)}

/* ===================== 菜单 ===================== */
#menu{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,rgba(6,20,30,.62) 0%,rgba(2,6,11,.86) 58%,rgba(0,0,0,.94) 100%);
  backdrop-filter:blur(2px);overflow:auto;transition:opacity .5s}
#menu.hidden{opacity:0;pointer-events:none}
#menuInner{max-width:1060px;padding:34px 26px;text-align:center}
#menu h1{font-size:60px;letter-spacing:.30em;font-weight:600;color:#dff6ff;
  text-shadow:0 0 26px rgba(80,210,255,.55),0 0 80px rgba(30,140,200,.4)}
#menu h1 small{display:block;font-size:12.5px;letter-spacing:.42em;opacity:.55;margin-top:12px;font-weight:400}
.tagline{margin:20px auto 26px;max-width:620px;font-size:14px;line-height:1.75;opacity:.62}
#planetGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.pcard{position:relative;border:1px solid rgba(130,225,255,.16);background:rgba(8,26,38,.5);
  padding:15px 16px 14px;text-align:left;cursor:pointer;overflow:hidden;transition:.22s;pointer-events:auto}
.pcard:hover{border-color:rgba(150,240,255,.6);background:rgba(14,44,62,.72);transform:translateY(-3px)}
.pcard .swatch{position:absolute;right:0;top:0;bottom:0;width:74px;opacity:.55;
  mask-image:linear-gradient(90deg,transparent,#000);-webkit-mask-image:linear-gradient(90deg,transparent,#000)}
.pcard h3{font-size:19px;font-weight:600;color:#e6fbff;letter-spacing:.06em}
.pcard .sub{font-size:10px;letter-spacing:.2em;opacity:.5;margin:2px 0 9px}
.pcard p{font-size:11.5px;line-height:1.6;opacity:.66;min-height:56px;position:relative}
.pcard .stats{display:flex;gap:11px;font-size:10px;opacity:.62;margin-top:8px;position:relative;flex-wrap:wrap}
.pcard .stats i{font-style:normal;color:#8fe6ff}
.pcard .diff{position:absolute;right:13px;bottom:12px;font-size:10px;letter-spacing:.14em;color:#ffd479}
.pcard .best{position:absolute;right:13px;top:12px;font-size:22px;font-weight:700;color:#9dffc8;opacity:.9}
#menuFoot{margin-top:26px}
.keys{display:flex;flex-wrap:wrap;gap:7px 16px;justify-content:center;font-size:11px;opacity:.5}
.keys b{color:#9deaff;font-weight:600}
.hint{margin-top:14px;font-size:10.5px;letter-spacing:.22em;opacity:.34}

/* ===================== 结果 ===================== */
#result{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;
  background:rgba(2,7,11,.80);backdrop-filter:blur(7px)}
#result.hidden{display:none}
#resultInner{width:min(560px,92vw);border:1px solid rgba(140,230,255,.24);background:rgba(6,20,30,.9);
  padding:30px 34px 26px;text-align:center;position:relative}
#resRank{position:absolute;right:26px;top:16px;font-size:64px;font-weight:700;color:#9dffc8;
  text-shadow:0 0 24px rgba(110,240,170,.6);line-height:1}
#result h2{font-size:29px;letter-spacing:.12em;color:#e9fbff}
#result p{margin:9px 0 18px;font-size:13px;line-height:1.7;opacity:.7}
#resTable{width:100%;font-size:12.5px;border-collapse:collapse}
#resTable tr{border-bottom:1px dashed rgba(140,230,255,.14)}
#resTable td{padding:7px 4px;text-align:left;opacity:.72}
#resTable td:last-child{text-align:right;font-weight:600;opacity:1;color:#d8f6ff}
.btns{margin-top:22px;display:flex;gap:11px;justify-content:center}
button{font-family:inherit;font-size:12.5px;letter-spacing:.14em;padding:10px 22px;cursor:pointer;
  color:#c9f2ff;background:rgba(10,40,56,.8);border:1px solid rgba(140,230,255,.35);transition:.18s}
button:hover{background:rgba(22,76,102,.9);border-color:rgba(160,245,255,.8);color:#fff}

#pause,#clickToStart{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;
  background:rgba(1,6,10,.62);font-size:15px;letter-spacing:.2em;text-align:center;line-height:2}
#pause.hidden,#clickToStart.hidden{display:none}
#pause h2{font-size:30px;letter-spacing:.3em;margin-bottom:8px}
#clickToStart{background:rgba(1,6,10,.32);pointer-events:none}
#diag{position:absolute;left:12px;top:12px;z-index:20;font-family:Consolas,monospace;font-size:13px;
  line-height:1.55;color:#9dffc8;background:rgba(0,0,0,.6);padding:10px 14px;white-space:pre;max-width:80vw}
#diag.hidden{display:none}
.hidden{display:none}
@media (max-width:820px){
  #planetGrid{grid-template-columns:repeat(2,1fr)}
  #menu h1{font-size:38px}
  .gauge{width:150px}.gauge-big{font-size:34px}
}