/* ── Game stage ── */
.game-shell{max-width:1240px; margin:0 auto; padding:0 1.25rem 2.5rem}
.stage{
  position:relative; width:100%; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border-strong); background:#05070F; box-shadow:var(--shadow);
  aspect-ratio:12/7;
}
.stage canvas{display:block; width:100%; height:100%; image-rendering:auto}
.hud{position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between; padding:.85rem}
.hud-top{display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem}
.hud-bottom{display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem}
.pod{
  background:rgba(7,11,20,.66); border:1px solid var(--border); border-radius:var(--radius);
  backdrop-filter:blur(10px); padding:.6rem .75rem; max-width:min(42%,300px);
}
.pod-head{display:flex; align-items:center; gap:.4rem; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem}
.pod-head svg{width:14px; height:14px; color:var(--primary-lt)}
.hud-obj{list-style:none; display:grid; gap:.3rem; font-size:.78rem}
.hud-obj li{display:flex; align-items:center; gap:.4rem; color:#CDD5E3; line-height:1.35}
.hud-obj li.done{color:var(--primary-lt); text-decoration:line-through; text-decoration-color:rgba(34,197,94,.5)}
.hud-obj li .box{width:12px; height:12px; border-radius:3px; border:1px solid var(--border-strong); flex:0 0 auto}
.hud-obj li.done .box{background:var(--primary-lt); border-color:var(--primary-lt)}
.hud-center{display:flex; flex-direction:column; align-items:center; gap:.4rem; flex:1 1 auto}
.timer{font-family:var(--font-display); font-size:1.5rem; letter-spacing:.08em; color:var(--text); text-shadow:0 0 14px rgba(255,255,255,.18)}
.timer.low{color:var(--danger-lt); animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.45}}
.alert-strip{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; padding:.2rem .75rem; border-radius:999px;
  border:1px solid var(--border); background:rgba(7,11,20,.7); color:var(--muted); transition:all .25s ease;
}
.alert-strip.lv1{color:var(--gold); border-color:rgba(251,191,36,.45); background:var(--gold-dim)}
.alert-strip.lv2{color:#FFD9A0; border-color:rgba(217,119,6,.55); background:rgba(217,119,6,.2)}
.alert-strip.lv3{color:#FFE3E3; border-color:rgba(220,38,38,.6); background:rgba(220,38,38,.24); animation:pulse .9s infinite}
.status-chips{display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; font-size:.68rem; color:var(--muted)}
.status-chips .chiplet{border:1px solid var(--border); border-radius:999px; padding:.15rem .55rem; background:rgba(7,11,20,.66)}
.status-chips .chiplet.on{color:var(--gold); border-color:rgba(251,191,36,.4)}

/* ── Meters ── */
.pips{display:flex; gap:3px; align-items:center}
.pips .pip{width:16px; height:9px; border-radius:2px; background:rgba(255,255,255,.12)}
.pips .pip.on{background:linear-gradient(90deg,#22C55E,#15803D); box-shadow:0 0 8px rgba(34,197,94,.5)}
.pips .pip.warn{background:linear-gradient(90deg,#FBBF24,#D97706); box-shadow:0 0 8px rgba(251,191,36,.5)}
.pips .pip.hurt{background:linear-gradient(90deg,#F87171,#DC2626); box-shadow:0 0 8px rgba(248,113,113,.55)}
.hud-cluster{display:flex; align-items:center; gap:.75rem; background:rgba(7,11,20,.66); border:1px solid var(--border); border-radius:var(--radius); backdrop-filter:blur(10px); padding:.5rem .7rem}
.hud-stats{display:flex; gap:.8rem}
.hstat{display:inline-flex; align-items:center; gap:.32rem; font-size:.78rem; color:#D6DCE8}
.hstat svg{width:15px; height:15px; color:var(--gold)}
.detect-wrap{display:flex; flex-direction:column; gap:.25rem; min-width:132px}
.detect-label{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.detect-bar{height:8px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden}
.detect-bar span{display:block; height:100%; width:0%; background:linear-gradient(90deg,#FBBF24,#F87171); transition:width .1s linear}
.detect-bar.hot span{background:linear-gradient(90deg,#F87171,#DC2626)}
.prompt-pill{
  position:absolute; left:50%; bottom:16%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.5rem; font-size:.83rem; padding:.4rem .8rem; border-radius:999px;
  background:rgba(7,11,20,.82); border:1px solid var(--border-strong); color:var(--text); backdrop-filter:blur(8px);
}
.prompt-pill .hold{width:60px; height:4px; border-radius:99px; background:rgba(255,255,255,.16); overflow:hidden}
.prompt-pill .hold span{display:block; height:100%; width:0%; background:var(--primary-lt)}
.game-bar{display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin-top:.85rem}
.hint-row{display:flex; gap:.5rem; flex-wrap:wrap; font-size:.72rem; color:var(--muted)}
.hint-row span{display:inline-flex; align-items:center; gap:.3rem; border:1px solid var(--border); border-radius:999px; padding:.18rem .6rem; background:var(--card)}
.overlay{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:1.25rem; background:rgba(3,6,14,.72); backdrop-filter:blur(6px); animation:fadeUp .22s ease both}
.overlay .panel{max-width:560px; width:100%; background:rgba(13,21,36,.96)}
.overlay h3{font-family:var(--font-display); font-size:1.25rem; margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem}
.overlay .actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.25rem}
.reticle-note{font-size:.74rem; color:var(--muted); margin-top:.5rem}
@media (max-width:860px){
  .pod{max-width:52%}
  .detect-wrap{min-width:96px}
  .hud-obj{font-size:.72rem}
}
@media (max-width:640px){
  .stage{aspect-ratio:4/3}
  .timer{font-size:1.15rem}
  .pod{max-width:60%; padding:.45rem .55rem}
  .hud{padding:.5rem}
}