#fileProtocolHint{
  position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:left;font:14px/1.55 system-ui,sans-serif;color:#ffd0dc;
  background:rgba(8,2,6,.97);border:2px solid rgba(255,60,100,.5);box-shadow:0 0 80px rgba(255,0,40,.25);
  max-width:100%;box-sizing:border-box;
}
#fileProtocolHint code{color:#9ef0ff;font-family:'Consolas','Monaco',monospace}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#02020f;color:#c8f0ff;font-family:'Share Tech Mono',monospace}

/* Cursor: default on all UI screens; hidden only during active gameplay */
body.game-active,
body.game-active *{cursor:none}
button:not(:disabled),.info-icon,a,[role="button"],select{cursor:pointer}
input[type="text"],input[type="email"],textarea{cursor:text}
input[type="checkbox"],input[type="radio"]{cursor:pointer}

/* THREE.js canvas behind everything */
canvas.three-canvas{display:block;position:fixed;inset:0;z-index:0;background:#02020f}

/* ═══════════════════════════════════════════════════════
   MENU — 2D canvases (env + ship) + UI. Game WebGL separate.
═══════════════════════════════════════════════════════ */
#menu{
  position:fixed;inset:0;z-index:50;overflow:hidden;
}
#menu.hidden{display:none!important}
.menu-home {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-color: #020408;
}

/* L0 — Parallax background image (slightly oversized for movement room) */
#menu-parallax-bg {
  position: absolute;
  inset: 0;
  background: url('assets/images/menu-bg.png') center / cover no-repeat;
  z-index: 0;
}

/* L1 — Cinematic overlays: darken + radial focus behind menu + subtle scanlines */
.menu-cinematic-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 65% at 50% 52%,
      rgba(0,60,120,0.08) 0%,
      rgba(80,0,160,0.06) 40%,
      rgba(0,0,0,0.22) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.12) 60%, rgba(0,0,0,0.35) 100%);
}
/* Scanline grain — very subtle, purely decorative */
.menu-cinematic-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.018) 3px,
    rgba(0,0,0,0.018) 4px
  );
  pointer-events: none;
}

.menu-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.menu-layer--env canvas,
.menu-layer--ship canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Canvas layers moved to z-index 2,3 to sit above overlays */
.menu-layer--env {
  z-index: 2;
}

.menu-layer--ship {
  z-index: 3;
}

/* L3 — Soft light bloom radiating behind the UI panel */
.menu-bloom {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 55% at 50% 52%,
      rgba(0,120,255,0.07) 0%,
      rgba(100,0,220,0.05) 40%,
      transparent 70%);
}

/* L3b — Edge vignette to frame the scene */
.menu-edge-vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 85% at 50% 50%,
    transparent 38%,
    rgba(0,0,6,0.55) 75%,
    rgba(0,0,6,0.82) 100%);
}

/* L4 — UI panel */
.menu-layer--ui {
  z-index: 6;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.menu-ui-panel {
  pointer-events: all;
  width: clamp(300px, min(92vw, 100vw - 32px), 400px);
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 18vh;
}

@media (max-width: 767px) {
  .menu-layer--ui {
    justify-content: center;
    align-items: center;
    padding: 0 clamp(1rem, 4vw, 1.5rem);
  }
  .menu-ui-panel {
    width: 88vw;
    margin-top: 14vh;
  }
}

.menu-ui-panel .menu-btns button{pointer-events:auto}
.menu-header{
  text-align:center;margin-bottom:clamp(20px,3.5vh,38px);width:100%;
}
.menu-title-neon,.menu-title.menu-title-neon{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;
  font-size:clamp(2.6rem,7vw,5.8rem);line-height:1;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
  color:#f4feff;
  text-shadow:
    0 0 4px #fff,
    0 0 10px rgba(255,255,255,.8),
    0 0 20px #00eaff,
    0 0 40px #00eaff,
    0 0 70px rgba(0,220,255,.6),
    0 0 130px rgba(0,180,255,.35),
    0 0 200px rgba(0,140,255,.15);
  animation: menuNeonFlicker 9s ease-in-out infinite;
  position: relative;
}
/* Secondary glow layer — blurred duplicate via filter on the element */
.menu-title-neon::after, .menu-title.menu-title-neon::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  text-shadow: 0 0 40px rgba(0,200,255,.45), 0 0 80px rgba(0,160,255,.2);
  filter: blur(3px);
  pointer-events: none;
  animation: menuNeonFlicker 9s ease-in-out infinite;
}
@keyframes menuNeonFlicker{
  0%,89%,93%,100%{ opacity:1; filter:brightness(1); }
  90%{ opacity:.82; filter:brightness(0.88); }
  91%{ opacity:1;   filter:brightness(1.06); }
  92%{ opacity:.90; filter:brightness(0.92); }
}
.menu-tag{
  margin-top:clamp(8px,1.5vh,14px);
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:.75rem;
  letter-spacing:.38em;color:#7ae8ff;opacity:.88;
  text-shadow:0 0 18px rgba(0,220,255,.45);
}
.menu-btns{
  display:flex;flex-direction:column;gap:14px;width:100%;max-width:400px;
  /* drop-shadow unifies glow blur across all buttons into one composited layer */
  filter:drop-shadow(0 0 32px rgba(0,0,0,.65));
}
.mbtn{
  display:flex;align-items:center;justify-content:center;gap:14px;
  width:100%;position:relative;overflow:hidden;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  height:68px;padding:0 26px;border:none;border-radius:14px;cursor:pointer;
  transition:transform .2s cubic-bezier(.34,1.28,.64,1), box-shadow .22s ease, filter .18s ease;
}
.mbtn:hover{ transform:scale(1.05); }
.mbtn:active{ transform:scale(.96); transition-duration:.08s; }
.mbtn:focus-visible{ outline:2px solid rgba(0,230,255,.85);outline-offset:3px; }

/* Top-edge inner highlight — adds "lit glass" feel */
.mbtn::before{
  content:'';position:absolute;
  top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  pointer-events:none;z-index:1;
}

/* Shimmer sweep on hover */
.mbtn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .65s ease;
  pointer-events:none;z-index:2;
}
.mbtn:hover::after{ transform:translateX(120%); }

/* ── Icon + text layout helpers ── */
.mbtn-icon{
  flex-shrink:0;
  display:block;
  width:24px;height:24px; /* CSS overrides inline SVG attrs for consistency */
}
.mbtn-text-block{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
}
.mbtn-label{ font-size:21px;font-weight:700;letter-spacing:.15em;line-height:1; }
.mbtn-sub{
  font-size:9px;font-weight:500;letter-spacing:2px;
  color:rgba(255,255,255,.62);font-family:'Orbitron',sans-serif;line-height:1;
}

/* ═══════════════════════════════
   BUTTON IDLE PULSE ANIMATIONS
════════════════════════════════ */
@keyframes btnIdleBlue {
  0%,100%{ filter:brightness(1); }
  50%    { filter:brightness(1.1); }
}
@keyframes btnIdlePink {
  0%,100%{ filter:brightness(1); }
  50%    { filter:brightness(1.1); }
}

/* Primary buttons: left-anchor content so E/S labels always share the same x-offset */
.mbtn-endless,
.mbtn-survival {
  justify-content: flex-start;
  padding-left: 32px;
}

/* ── ENDLESS (holographic blue glass) ── */
.mbtn-endless{
  background:linear-gradient(135deg,
    rgba(30,115,255,0.80) 0%,
    rgba(0,48,200,0.90) 100%);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;
  border:1px solid rgba(70,150,255,.5);
  text-shadow:0 0 16px rgba(0,180,255,.6),0 1px 4px rgba(0,0,0,.6);
  box-shadow:
    0 0 18px rgba(0,90,255,.45),
    0 6px 28px rgba(0,0,0,.35),
    inset 0 0 20px rgba(0,80,255,.08);
  animation:btnIdleBlue 3s ease-in-out infinite;
}
.mbtn-endless:hover{
  animation:none;
  filter:brightness(1.18);
  box-shadow:
    0 0 32px rgba(0,120,255,.75),
    0 0 68px rgba(0,90,255,.28),
    0 8px 32px rgba(0,0,0,.4),
    inset 0 0 24px rgba(0,100,255,.14);
  border-color:rgba(100,180,255,.75);
}
.mbtn-endless .mbtn-icon{
  filter:drop-shadow(0 0 5px rgba(100,180,255,.85));
  opacity:.95;
}

/* ── SURVIVAL (holographic pink/purple glass) ── */
.mbtn-survival{
  background:linear-gradient(135deg,
    rgba(210,0,180,0.80) 0%,
    rgba(110,0,200,0.90) 100%);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;
  border:1px solid rgba(220,0,200,.5);
  text-shadow:0 0 16px rgba(255,80,255,.65),0 1px 4px rgba(0,0,0,.6);
  box-shadow:
    0 0 18px rgba(180,0,200,.45),
    0 6px 28px rgba(0,0,0,.35),
    inset 0 0 20px rgba(160,0,200,.08);
  animation:btnIdlePink 3s ease-in-out infinite 0.9s;
}
.mbtn-survival:hover{
  animation:none;
  filter:brightness(1.18);
  box-shadow:
    0 0 32px rgba(210,0,230,.8),
    0 0 68px rgba(160,0,200,.3),
    0 8px 32px rgba(0,0,0,.4),
    inset 0 0 24px rgba(180,0,220,.14);
  border-color:rgba(240,80,255,.75);
}
.mbtn-survival .mbtn-icon{
  filter:drop-shadow(0 0 5px rgba(255,80,255,.85));
  opacity:.95;
}

/* ── LEADERBOARDS (deep glass, no pulse) ── */
.mbtn-board{
  height:56px;font-size:15px;letter-spacing:.18em;
  background:rgba(0,6,22,.70);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:rgba(220,245,255,.92);
  border:1px solid rgba(0,200,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 4px 16px rgba(0,0,0,.28);
}
.mbtn-board:hover{
  filter:brightness(1.14);
  background:rgba(0,180,255,.08);
  border-color:rgba(0,200,255,.68);
  box-shadow:
    0 0 22px rgba(0,200,255,.22),
    inset 0 1px 0 rgba(255,255,255,.1);
  transform:scale(1.04);
}
.mbtn-board .mbtn-icon{
  filter:drop-shadow(0 0 4px rgba(0,220,255,.75));
  opacity:.9;
}

/* ── DEV / TEST buttons ── */
.mbtn-test-dev{
  margin-top:2px;
  height:auto;min-height:42px;padding:10px 16px;
  font-size:12px;letter-spacing:.14em;line-height:1.2;
  background:transparent;color:rgba(255,102,0,.9);
  border:1px dashed rgba(255,102,0,.5);border-radius:10px;
  text-shadow:none;box-shadow:none;
  opacity:.78;
}
.mbtn-test-dev:hover{
  background:rgba(255,102,0,.1);border-color:rgba(255,102,0,.9);
  transform:scale(1.02);filter:none;opacity:1;
}
.mbtn-test-dev::before{ display:none; }
.mbtn-test-dev::after{ display:none; }
.mbtn-test-dev__tag{
  display:inline-block;margin-right:6px;font-size:10px;letter-spacing:.1em;vertical-align:middle;opacity:.9;
}
.mbtn-test-pred{
  margin-top:0;color:rgba(204,0,255,.85);border-color:rgba(204,0,255,.45);
}
.mbtn-test-pred:hover{ background:rgba(180,0,255,.12);border-color:rgba(204,0,255,.9); }
.menu-foot{
  margin-top:clamp(28px,5vh,44px);text-align:center;max-width:100%;
  font-family:'Orbitron',sans-serif;font-size:clamp(8px,2.6vw,13px);font-weight:800;
  letter-spacing:.12em;color:rgba(220,240,255,.9);
  text-shadow:0 0 14px rgba(0,220,255,.35);
  pointer-events:none;
  white-space:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ═══════════════════════════════════════════════════════
   GAME OVERLAYS (HUD, Death screen, etc.)
═══════════════════════════════════════════════════════ */
#flash{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:0;transition:opacity .1s}
#panicOverlay{
  position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;transition:opacity .35s ease;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%,rgba(180,0,40,.22) 0%,transparent 55%),
    linear-gradient(180deg,rgba(90,0,20,.12) 0%,transparent 40%);
  mix-blend-mode:multiply;
}
body.panic-mode #panicOverlay{opacity:1}
body.panic-mode #hud .time-display{
  animation:panicTimePulse .55s ease-in-out infinite;
  color:#ff5566!important;
  text-shadow:0 0 28px rgba(255,40,60,.85),0 0 60px rgba(255,0,0,.35)!important;
}
body.panic-mode .hud-score-arcade{
  box-shadow:0 0 48px rgba(255,40,80,.35),0 0 90px rgba(255,0,40,.12),inset 0 1px 0 rgba(255,255,255,.08);
  border-color:rgba(255,100,140,.45);
}
@keyframes panicTimePulse{
  0%,100%{filter:brightness(1);transform:scale(1)}
  50%{filter:brightness(1.12);transform:scale(1.03)}
}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75) 100%);opacity:.4;transition:opacity .5s}

.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
.overlay.hidden{display:none!important}
#gameover{background:rgba(10,0,2,.92);transition:opacity .3s ease-out}

/* ── DEATH SCREEN ANIMATIONS ─────────────────────────────────────────────── */
@keyframes deathCardEnter{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
@keyframes pbScoreGlow{0%,100%{text-shadow:0 0 30px rgba(255,34,68,.7),0 0 60px rgba(255,34,68,.35)}50%{text-shadow:0 0 40px rgba(255,215,0,.8),0 0 80px rgba(255,215,0,.4),0 0 120px rgba(255,215,0,.2)}}

.death-title{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(28px,7vw,44px);letter-spacing:4px;
  color:#FF2244;
  text-shadow:0 0 20px rgba(255,34,68,.8),0 0 40px rgba(255,34,68,.4);
  margin:0 0 4px;text-align:center;line-height:1.1;
}

.panel-death-anim{animation:deathCardEnter .4s ease-out}

/* Death-screen button trio */
.ds-btn-retry{
  width:100%;background:linear-gradient(135deg,#CC44FF 0%,#9933DD 100%);
  color:#fff;border:none;border-radius:8px;padding:16px;
  font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:3px;cursor:pointer;transition:all .18s ease;
  box-shadow:0 4px 12px rgba(204,68,255,.3);display:block;box-sizing:border-box;
}
.ds-btn-retry:hover{background:linear-gradient(135deg,#DD66FF 0%,#AA44EE 100%);transform:translateY(-1px);box-shadow:0 0 0 4px rgba(204,68,255,.15),0 6px 20px rgba(204,68,255,.5)}
.ds-btn-retry:active{transform:translateY(0)}
.ds-btn-menu{
  width:100%;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.25);
  border-radius:8px;padding:16px;
  font-family:'Orbitron',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:3px;cursor:pointer;transition:all .18s ease;box-sizing:border-box;
}
.ds-btn-menu:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);transform:translateY(-1px)}
.ds-btn-menu:active{transform:translateY(0)}
.ds-btn-share{
  width:100%;background:rgba(0,0,0,.3);color:rgba(200,240,255,.85);
  border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:13px;
  font-family:'Orbitron',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:3px;cursor:pointer;transition:all .18s ease;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;
}
.ds-btn-share:hover{background:rgba(0,0,0,.5);border-color:rgba(0,255,255,.4);color:#00FFFF}
.ds-btn-share:active{transform:translateY(0)}

/* SUBMIT TO LEADERBOARD button on death screens */
.death-submit-btn{
  width:100%;background:linear-gradient(135deg,#00DDFF 0%,#00AACC 100%);
  border:none;border-radius:8px;padding:13px;
  color:#001020;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:4px;cursor:pointer;transition:all .18s ease;
  box-shadow:0 4px 12px rgba(0,221,255,.25);box-sizing:border-box;display:block;
}
.death-submit-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,221,255,.45)}
.death-submit-btn:active{transform:translateY(0)}

@keyframes submitConfirmFlash{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(0.7)}
  20% {opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  80% {opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1)}
}


/* ── Global Leaderboard ──────────────────────────────────────────────── */
.lb-tab{
  padding:10px 28px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:8px;
  color:rgba(255,255,255,0.6);
  font-family:'Orbitron',sans-serif;
  font-size:11px;font-weight:500;letter-spacing:4px;
  cursor:pointer;transition:all 0.18s;
}
.lb-tab:hover{background:rgba(255,255,255,0.09);color:rgba(255,255,255,0.9)}
.lb-tab-active-endless{
  background:linear-gradient(135deg,#0055ee 0%,#0088ff 100%) !important;
  border-color:rgba(80,180,255,0.45) !important;
  color:#fff !important;
  box-shadow:0 4px 16px rgba(0,100,255,0.3);
}
.lb-tab-active-survival{
  background:linear-gradient(135deg,#aa00ee 0%,#ee00aa 100%) !important;
  border-color:rgba(220,80,255,0.45) !important;
  color:#fff !important;
  box-shadow:0 4px 16px rgba(180,0,255,0.3);
}
.lb-headers{
  display:grid;gap:10px;
  padding:7px 14px;
  font-size:9px;letter-spacing:2px;
  color:rgba(255,255,255,0.4);font-weight:600;
  border-bottom:1px solid rgba(0,255,255,0.1);
  margin-bottom:6px;
}
.lb-headers-endless  {grid-template-columns:52px 1fr 120px 90px 90px}
.lb-headers-survival {grid-template-columns:52px 1fr 80px  110px 80px}
.lb-row{
  display:grid;gap:10px;
  padding:11px 14px;
  align-items:center;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:6px;margin-bottom:3px;
  transition:background 0.15s,border-color 0.15s;
}
.lb-row-endless  {grid-template-columns:52px 1fr 120px 90px 90px}
.lb-row-survival {grid-template-columns:52px 1fr 80px  110px 80px}
.lb-row:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12)}
.lb-row.gold{
  padding:13px 14px;margin-bottom:5px;
  background:linear-gradient(90deg,rgba(255,215,0,0.09) 0%,rgba(255,215,0,0.02) 100%);
  border:1px solid rgba(255,215,0,0.32);
}
.lb-row.silver{
  padding:13px 14px;margin-bottom:5px;
  background:linear-gradient(90deg,rgba(192,192,192,0.07) 0%,rgba(192,192,192,0.02) 100%);
  border:1px solid rgba(192,192,192,0.26);
}
.lb-row.bronze{
  padding:13px 14px;margin-bottom:10px;
  background:linear-gradient(90deg,rgba(205,127,50,0.07) 0%,rgba(205,127,50,0.02) 100%);
  border:1px solid rgba(205,127,50,0.26);
}
.lb-row.you{
  padding:13px 14px;
  background:rgba(0,255,255,0.08);
  border:1.5px solid rgba(0,255,255,0.5);
  box-shadow:0 0 18px rgba(0,255,255,0.14);
}
@keyframes lb-shimmer{0%{opacity:0.25}50%{opacity:0.5}100%{opacity:0.25}}
.lb-skeleton{
  height:46px;background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:6px;margin-bottom:3px;
  animation:lb-shimmer 1.4s ease-in-out infinite;
}
.lb-empty{text-align:center;padding:64px 20px}
.lb-empty-title{
  font-size:22px;font-weight:500;color:#00FFFF;
  letter-spacing:7px;text-shadow:0 0 16px rgba(0,255,255,0.4);
  margin-bottom:10px;
}
.lb-empty-sub{font-size:11px;letter-spacing:3px;color:rgba(255,255,255,0.4)}
.lb-error{text-align:center;padding:48px 20px;color:rgba(255,80,80,0.8);font-size:12px;letter-spacing:2px}

#boardPanel{z-index:55;background:rgba(2,8,16,.78)}

#pauseOverlay{z-index:60;background:rgba(2,4,12,.9)}
#pauseOverlay .pause-card{
  width:min(92vw,400px);padding:28px 24px 24px;border-radius:14px;text-align:center;
  background:rgba(4,12,28,.95);border:1px solid rgba(0,220,255,.28);
  box-shadow:0 0 48px rgba(0,120,220,.15),inset 0 1px 0 rgba(255,255,255,.05);
}
.pause-title{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(22px,5vw,32px);
  letter-spacing:.35em;color:#c8f8ff;text-shadow:0 0 24px rgba(0,200,255,.5);
}
.pause-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.pause-actions .btn{min-width:140px}
.board-card{
  width:min(92vw,470px);border-radius:14px;padding:24px 24px 20px;
  background:rgba(3,14,28,.95);border:1px solid rgba(0,220,255,.24);
  box-shadow:0 0 60px rgba(0,140,255,.16),inset 0 1px 0 rgba(255,255,255,.06);
}
.board-title{font-family:'Orbitron',sans-serif;font-weight:800;font-size:21px;letter-spacing:2px;color:#9de9ff;text-shadow:0 0 18px rgba(0,180,255,.55)}
.board-copy{margin-top:9px;font-size:12px;line-height:1.55;color:rgba(188,232,255,.78)}
.board-local{margin:14px 0 16px;padding:11px 12px;border:1px solid rgba(150,210,255,.22);border-radius:9px;background:rgba(8,22,44,.5);font-size:12px;line-height:1.55}
.board-local strong{color:#d8f8ff}

.panel-death{
  position:relative;
  width:min(94vw,460px);max-height:min(92vh,780px);overflow-y:auto;
  background:linear-gradient(135deg,#0d0020 0%,#120028 50%,#0a0018 100%);
  border:1px solid rgba(255,30,60,.28);
  box-shadow:0 0 0 1px rgba(255,30,60,.06),0 0 70px rgba(255,0,30,.2),inset 0 1px 0 rgba(255,255,255,.03);
  border-radius:16px;padding:36px 20px 32px;text-align:center;
  box-sizing:border-box;
}
.panel-death-scanline{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 4px);
}
.panel-death > :not(.panel-death-scanline){position:relative;z-index:1}
.death-actions{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:0;
}
.death-actions .btn{min-width:0;box-sizing:border-box;font-size:11px;letter-spacing:1.5px;padding:0 12px}
.death-actions--grid-2x2{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:100%;margin-top:0}
.death-actions--grid-2x2 .btn{min-width:0;width:100%;max-width:none;height:48px;line-height:1.2;display:inline-flex;align-items:center;justify-content:center}
.btn-retry{background:#CC44FF!important;color:#fff!important;border:none!important;box-shadow:0 4px 24px rgba(180,0,255,.4)}
.death-actions--grid-2x2 .btn-ghost{background:rgba(0,0,0,.25);color:#fff;border:1px solid rgba(255,255,255,.35)}
.death-actions--grid-2x2 .btn-share{background:rgba(0,0,0,.2);color:#7eefff;border:1px solid rgba(0,200,255,.5)}
.death-actions--grid-2x2 .btn-follow{background:rgba(0,0,0,.2);color:rgba(200,220,240,.8);border:1px solid rgba(200,200,200,.25)}
.share-block{margin-top:14px;text-align:left}
.share-block-title{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:3px;color:rgba(255,160,170,.5);margin-bottom:8px;text-align:center}
#shareCardCanvas{display:block;width:100%;max-width:100%;height:auto;border-radius:10px;border:1px solid rgba(0,220,255,.25);
  box-shadow:0 0 24px rgba(0,140,255,.15);background:#050810}
.share-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.btn-share{min-width:0;flex:1 1 120px;background:linear-gradient(135deg,#0a1628,#061018);color:#c8f0ff;border:1px solid rgba(0,200,255,.35)}
.btn-share:hover{background:linear-gradient(135deg,#102238,#081420);color:#fff}
.btn-follow{min-width:0;flex:1 1 120px;background:rgba(255,255,255,.08);color:#e8f4ff;border:1px solid rgba(255,255,255,.2);text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn-follow:hover{background:rgba(255,255,255,.12)}
.death-title{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(28px,7vw,44px);letter-spacing:4px;color:#FF2244!important;text-shadow:0 0 20px rgba(255,34,68,.8),0 0 40px rgba(255,34,68,.4)!important;margin-bottom:4px}
.subtitle-death{font-size:11px;color:rgba(255,255,255,.5)!important;letter-spacing:3px;margin-bottom:16px}
.divider-red{height:1px;background:linear-gradient(90deg,transparent,rgba(255,40,60,.4),transparent);margin:0}
.btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;padding:13px 20px;min-width:148px;border:none;border-radius:8px;cursor:pointer;transition:all .15s}
.btn-danger{background:linear-gradient(135deg,#cc0022,#880015);color:#fff;box-shadow:0 4px 20px rgba(200,0,30,.35)}
.btn-danger:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(200,0,30,.5)}
.btn-ghost{background:rgba(255,255,255,.06);color:rgba(200,240,255,.7);border:1px solid rgba(200,240,255,.15)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:9px 4px;border-bottom:1px solid rgba(255,40,60,.08);font-size:13px;opacity:0;transition:opacity .4s}
.stat-row:last-of-type{border-bottom:none}
.stat-label{color:rgba(255,150,160,.45);letter-spacing:1px;font-size:11px}
.stat-val{color:#ffb0b8;font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px}
.new-best{background:linear-gradient(135deg,rgba(255,180,0,.14),rgba(255,100,0,.08));border:1px solid rgba(255,180,0,.3);border-radius:8px;padding:10px 16px;margin:0 0 12px;font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;color:#ffcc44;letter-spacing:2px;text-shadow:0 0 12px rgba(255,180,0,.5);opacity:0;transition:opacity .5s}
.new-best--show{animation:newBestCardPulse .5s ease-out}
@keyframes newBestCardPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.new-best--shimmer .new-best__star{animation:newBestShimmer 0.25s ease-in-out 2}
@keyframes newBestShimmer{0%,100%{opacity:1}50%{opacity:.4}}
.death-stats-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;
  max-width:100%;margin:0 0 20px;padding:0;box-sizing:border-box;
  border-radius:0;background:transparent;border:none;
}
.death-stat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;
  padding:12px 8px;box-sizing:border-box;text-align:center;
  background:rgba(0,40,80,.12);border:1px solid rgba(0,200,255,.15);border-radius:10px;
}
.death-stat-lbl{
  display:block;font-size:11px;letter-spacing:2px;color:rgba(150,200,220,.5);text-align:center;
}
.death-stat-val{
  display:block;font-family:'Orbitron',sans-serif;font-weight:800;font-size:28px;line-height:1.1;
  text-align:center;text-shadow:0 0 18px rgba(0,220,255,.45);
}
.death-stat--time .death-stat-val{color:#8ef0ff}
.death-stat--kills .death-stat-val{color:#00ffcc;text-shadow:0 0 18px rgba(0,255,200,.4)}
.death-stat--chain .death-stat-val,
.death-stat-val--chain{color:#FFD700!important;text-shadow:0 0 14px rgba(255,200,0,.5)!important}
.death-stats-row--survival{
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.death-stat--survival-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:12px 8px;
  text-align:center;
}
.death-stat--survival-card .death-stat-lbl{
  font-size:11px;
  letter-spacing:2px;
  color:rgba(160,175,195,.72);
}
.death-stat-val--cyan{
  color:#00ffff!important;
  text-shadow:0 0 16px rgba(0,255,255,.4);
}
.final-score-wrap{margin:0 0 20px;max-width:100%}
.final-score-num{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(26px,6vw,40px);color:#ff4466;text-shadow:0 0 24px rgba(255,40,80,.55),0 0 60px rgba(255,0,40,.25);margin:4px 0 2px;line-height:1}
.final-score-lbl{font-size:9px;letter-spacing:3px;color:rgba(255,100,120,.38);margin-bottom:0}

/* ── HUD — reference layout (centre timer / top-right box / bottom-left chain) ── */
#hud{
  position:fixed;inset:0;pointer-events:none;z-index:10;
}
#hud.hidden{display:none!important}
.timer-container{
  position:fixed;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  z-index:100;
  pointer-events:none;
  width:fit-content;
  max-width:min(96vw,900px);
}
#timer-display{
  font-size:72px;
  font-weight:bold;
  font-family:'Share Tech Mono','Consolas',monospace;
  color:#00FFFF;
  letter-spacing:2px;
  line-height:1;
  display:block;
  text-shadow:0 0 30px rgba(0,200,255,.5);
  transition:color .2s,text-shadow .2s,transform .15s;
}
#timer-label{
  font-size:10px;
  color:rgba(0,255,255,0.5);
  letter-spacing:4px;
  text-align:center;
  margin-top:2px;
  display:block;
  font-family:'Orbitron',sans-serif;
}
.hud-timer-aux{
  margin-top:3px;
  text-align:center;
  width:100%;
}
.hud-timer-auxline{
  font-size:12px;
  font-weight:700;
  font-family:'Orbitron',sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
  text-align:center;
  display:block;
  line-height:1.35;
  margin-top:2px;
}
#powerupLabel.hud-timer-auxline{ color:#FFD700; }
#weaponLabel.hud-timer-auxline{ color:#8FF7FF; }
.hud-timer-bwrap{
  width:120px;
  height:3px;
  background:rgba(255,255,255,0.12);
  border-radius:2px;
  margin:5px auto 0;
  display:none;
  overflow:hidden;
}
.hud-topleft{
  position:fixed;
  top:10px;
  left:14px;
  z-index:100;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:0;
  width:fit-content;
  max-width:min(200px,44vw);
  align-items:flex-start;
}
.hud-topleft > .hud-mini-label:nth-child(1){ color:rgba(255,255,255,0.35); }
.hud-topleft > .hud-mini-label:nth-child(3){ color:rgba(0,255,255,0.35); }
.hud-mini-label{
  font-size:9px;
  line-height:1.4;
  letter-spacing:2px;
  text-transform:uppercase;
  font-family:'Orbitron',sans-serif;
}
#hud-name{
  font-size:16px;
  font-weight:bold;
  line-height:1.2;
  color:#ffffff;
  letter-spacing:2px;
  font-family:'Orbitron',sans-serif;
  margin-bottom:6px;
  width:fit-content;
  text-shadow:0 0 10px rgba(0,200,255,.2);
}
#hud-mode{
  font-size:13px;
  line-height:1.2;
  color:#00FFFF;
  letter-spacing:3px;
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  margin-bottom:4px;
  width:fit-content;
  text-shadow:0 0 8px rgba(0,200,255,.2);
}
#round-hud,
.round-hud{
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  width:fit-content;
  margin-top:4px;
}
#round-hud .hud-mini-label{
  font-size:9px;
  color:rgba(0,255,255,0.35);
  line-height:1.4;
  letter-spacing:2px;
  margin:0;
}
.hud-round-value,
.hud-round-value#round-value,
#round-value{
  font-size:13px;
  line-height:1.2;
  color:#FFFFFF;
  letter-spacing:1px;
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  width:fit-content;
}
#score-container{
  position:fixed;
  top:12px;
  right:16px;
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:10px;
  white-space:nowrap;
  z-index:100;
  pointer-events:none;
  background:rgba(0,255,255,0.05);
  border:1px solid rgba(0,255,255,0.2);
  border-radius:6px;
  padding:10px 16px;
  box-sizing:border-box;
}
#time-elapsed-container{
  flex-direction:row;
  box-sizing:border-box;
}
#score-label{
  font-size:11px;
  color:rgba(0,255,255,0.6);
  letter-spacing:3px;
  font-family:monospace;
  white-space:nowrap;
}
#score-display{
  font-size:28px;
  font-weight:bold;
  color:#00FFFF;
  letter-spacing:1px;
  line-height:1;
  font-family:monospace;
  text-shadow:0 0 20px rgba(0,200,255,.4);
  white-space:nowrap;
}
#godmode-badge.hud-godmode-badge,
.hud-godmode-badge#godmode-badge{
  font-size:11px;
  font-weight:bold;
  background:#FF8800;
  color:#000000;
  padding:2px 8px;
  border-radius:3px;
  letter-spacing:2px;
  margin-bottom:2px;
  font-family:'Orbitron',sans-serif;
  border:none;
}
.time-display.danger{color:#ff3355 !important;text-shadow:0 0 30px rgba(255,40,70,.7),0 0 60px rgba(255,0,30,.4) !important}
.time-display.time-add-flash{color:#00ff88 !important;text-shadow:0 0 30px rgba(0,255,136,.8),0 0 60px rgba(0,255,136,.4) !important;transform:scale(1.28)}
.time-display{transition:color .2s,text-shadow .2s,transform .15s}
#laserVignette{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .3s;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(255,0,170,0.5) 100%);}

/* CHAIN — bottom-left stack (GODMODE + tier + bar + mult) */
#chain-container {
  position: fixed;
  bottom: 16px;
  left: 14px;
  z-index: 100;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: fit-content;
  max-width: 45vw;
}
#chain-container.hidden { display: none; }
#chainLabel {
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  margin-top: 2px;
}
.chain-bar-track,
#chain-bar{
  width:120px;
  height:3px;
  background:rgba(255,255,255,0.12);
  border-radius:2px;
  margin-bottom:2px;
  overflow:hidden;
}
#chainDecay{
  width:100%;
  height:100%;
  margin:0;
  border:none;
  box-shadow:none;
  background:transparent;
  border-radius:0;
}
#chain-display {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -1px;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(255,60,255,.3);
  transform-origin: left center;
  transition: color .3s, text-shadow .3s;
}
#tierBadge {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 2px 8px;
  border-radius: 4px;
  opacity: 1;
  transition: opacity .3s, background .3s;
  margin-bottom: 0;
  max-width: 100%;
  width: auto;
  box-sizing: border-box;
}
#chainDecayFill{height:100%;width:0%;background:linear-gradient(90deg,#4ce8ff,#ff66ff 55%,#ffb84a);box-shadow:0 0 14px rgba(120,220,255,.6);transition:width .08s linear}

/* WAVE + COMBO */
#waveBanner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Orbitron',sans-serif;font-size:clamp(28px,6vw,52px);font-weight:900;letter-spacing:6px;color:#fff;text-shadow:0 0 40px rgba(0,200,255,.8);pointer-events:none;z-index:30;opacity:0;transition:opacity .25s}
#readyBanner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.86);font-family:'Orbitron',sans-serif;font-size:42px;font-weight:900;letter-spacing:5px;color:#e7f9ff;text-shadow:0 0 30px rgba(0,220,255,.7),0 0 80px rgba(180,60,255,.35);pointer-events:none;z-index:35;opacity:0;transition:opacity .2s,transform .2s}
#readyBanner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.combo-pop{position:fixed;font-family:'Orbitron',sans-serif;font-weight:900;pointer-events:none;z-index:20;text-shadow:0 0 18px rgba(0,0,0,.6),0 0 28px currentColor}
@keyframes comboPop{0%{opacity:1;transform:translateY(0) scale(1.35)}100%{opacity:0;transform:translateY(-56px) scale(.62)}}

/* Time reward (+0.3s) — bright yellow, no glow, bold */
.combo-pop--reward{
  color:#fff159;
  font-size:clamp(22px,4vw,30px);
  font-weight:900;
  -webkit-text-stroke:0.5px rgba(180,160,0,0.6);
  text-shadow:none;
  transform:translate(-50%,-50%);
  margin-left:0;margin-top:0;
}
@keyframes rewardPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}
  10%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  22%{transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 52px)) scale(.94)}
}

/* Leech aura — instant entry flash ("LEECHED") */
@keyframes leechInstantFlash{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(0.5)}
  20% {opacity:1;transform:translate(-50%,-50%) scale(1.18)}
  45% {opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 48px)) scale(1)}
}

/* ── ANCHOR ELITE — keyframes ───────────────────────────────────────────────── */
@keyframes anchorWarningFlash{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(0.7)}
  20% {opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  80% {opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1)}
}
@keyframes tetherFlash{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(0.5)}
  20% {opacity:1;transform:translate(-50%,-50%) scale(1.2)}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 52px)) scale(1)}
}
@keyframes tetherPulse{
  from{box-shadow:0 0 10px rgba(68,221,255,0.35)}
  to  {box-shadow:0 0 22px rgba(68,221,255,0.85)}
}
@keyframes anchorRewardBurst{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(0.5)}
  20% {opacity:1;transform:translate(-50%,-50%) scale(1.3)}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 64px)) scale(1)}
}

/* CROSSHAIR */
#crosshair{position:fixed;width:24px;height:24px;margin-left:-12px;margin-top:-12px;pointer-events:none;z-index:100}
#crosshair::before,#crosshair::after{content:'';position:absolute;background:rgba(143,247,255,.9)}
#crosshair::before{width:2px;height:100%;left:50%;margin-left:-1px;top:0}
#crosshair::after{width:100%;height:2px;top:50%;margin-top:-1px;left:0}
#crosshair .ring{position:absolute;inset:3px;border:1.5px solid rgba(143,247,255,.5);border-radius:50%;box-shadow:0 0 10px rgba(0,230,255,.4)}

/* CROSSHAIR — hidden by default, shown only during active gameplay via body.game-active */
#crosshair { visibility: hidden; }

/* LEECH AURA WARNING — opacity pulsed from scene.js while in aura */

/* UPGRADE CARDS */
.upgrade-card{
  background:#0d0020;
  border:1px solid rgba(0,200,255,0.3);
  border-radius:12px;
  padding:22px 18px 20px;
  width:160px;
  height:200px;
  cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.upgrade-card:hover{
  transform:scale(1.04);
  box-shadow:0 0 28px rgba(0,180,255,0.25);
}
.upgrade-card.selected{
  transform:scale(1.08);
  animation:upgradeSelectedFlash 0.4s ease-out;
}
@keyframes upgradeSelectedFlash{0%{opacity:1}50%{opacity:0.5}100%{opacity:1}}
.upgrade-card-icon{
  font-size:32px;
  margin-bottom:4px;
}
.upgrade-card-title{
  font-family:'Orbitron',sans-serif;
  font-size:14px;
  font-weight:900;
  letter-spacing:2px;
  margin-bottom:4px;
}
.upgrade-card-desc{
  font-size:12px;
  line-height:1.5;
  color:#CCCCCC;
}

/* Pulsar pulse telegraph (boss attack wind-up) */
@keyframes wardenTelegraph{0%,100%{opacity:0.35}50%{opacity:0.9}}
#wardenHud{animation:none}