:root{
    --bg:#070912;
    --bg2:#0c1024;
    --cyan:#3ff0ff;
    --cyan-dim:#1a6b78;
    --magenta:#ff3fb0;
    --gold:#ffd23f;
    --red:#ff4757;
    --green:#3fff9e;
    --panel:#0e1330;
    --panel-line:#2a3570;
    --text:#dfe6ff;
    --text-dim:#7d88b8;
    /* ---- In-gameplay HUD only (topBar, weapon/ability tray, boss bars, mode badge) ----
       A distinct palette from the cyan/magenta "ship computer" look the menus/overlays use —
       cold gunmetal panels with a warm amber glow, angular cut-corner shapes, and thin scanline
       texture, closer to Dead Space's RIG display than this game's usual neon menu chrome. */
    --ds-amber:#ff9142;
    --ds-amber-dim:#b8621f;
    --ds-panel:rgba(11,9,7,0.82);
    --ds-panel-line:rgba(255,145,66,0.4);
    --ds-glow:rgba(255,145,66,0.35);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{
    margin:0; padding:0; width:100%; height:100%; overflow:hidden;
    background:var(--bg);
    font-family:'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
    color:var(--text);
    user-select:none;
    touch-action:none;
    overscroll-behavior:none;
  }
  #gameContainer{
    position:relative; width:100vw; height:100vh;
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(63,240,255,0.06), transparent 55%),
      radial-gradient(ellipse at 80% 80%, rgba(255,63,176,0.05), transparent 55%),
      var(--bg);
  }
  canvas{display:block; background:transparent; touch-action:none;}
  /* Colorblind assist: not clinical correction (that needs real per-pixel processing), just a
     deliberate hue-separation + contrast/saturation boost so commonly-confused hues in this
     game's palette (reds/purples/pinks, cyans/whites) sit further apart perceptually. */
  #game.cvd-protanopia{filter:hue-rotate(18deg) saturate(1.45) contrast(1.12);}
  #game.cvd-deuteranopia{filter:hue-rotate(-16deg) saturate(1.45) contrast(1.12);}
  #game.cvd-tritanopia{filter:hue-rotate(48deg) saturate(1.3) contrast(1.1);}

  .hud{
    position:absolute; top:0; left:0; width:100%; height:100%;
    pointer-events:none; z-index:10;
  }
  .hud > *{pointer-events:auto;}

  /* Top bar — right inset leaves room for #pauseBtn, which is no longer part of this flex row
     (see .hud markup): it used to be the row's last flex child and could get squeezed off-screen
     entirely on narrow phones once the row ran out of space (see the old comment in the mobile
     media query below), which was silently making it untappable there. Positioning it independently
     means it's always exactly where a player expects a pause button to be and can never be pushed
     out of reach by however much other HUD content is in this row. */
  #topBar{
    position:absolute; top:14px; left:14px; right:68px;
    display:flex; align-items:center; gap:16px;
    pointer-events:none;
  }
  /* Dead-Space-style RIG panel: angular cut corners instead of rounded ones, a dark gunmetal
     body, amber edge glow, and a faint scanline texture — the look every gameplay HUD element
     below shares, standing apart from the cyan "ship computer" look of the menus/overlays. */
  .barWrap{
    flex:1; height:20px; background:var(--ds-panel);
    border:1px solid var(--ds-panel-line); overflow:hidden;
    position:relative; box-shadow:0 0 10px var(--ds-glow) inset;
    clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 4px);
  }
  .barFill{height:100%; width:50%; transition:width 0.15s ease-out; position:relative;}
  #hpFill{background:linear-gradient(90deg, #b8250f, var(--ds-amber)); box-shadow:0 0 10px #c9491f;}
  #xpFill{background:linear-gradient(90deg, var(--ds-amber-dim), var(--ds-amber)); box-shadow:0 0 10px var(--ds-amber);}
  /* Segmented tick marks over the fill — the RIG bar reads as discrete armor segments depleting,
     not a smooth gradient wipe. A repeating dark stripe every few px sells that with zero markup. */
  .barFill::after{
    content:''; position:absolute; inset:0;
    background-image:repeating-linear-gradient(90deg, transparent 0px, transparent 9px, rgba(0,0,0,0.55) 9px, rgba(0,0,0,0.55) 11px);
  }
  .barLabel{
    position:absolute; top:50%; left:8px; transform:translateY(-50%);
    font-size:11px; font-weight:700; letter-spacing:1px; color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,0.8); z-index:2;
  }
  .statCluster{display:flex; flex-direction:column; gap:6px; min-width:150px;}
  #levelBadge{
    display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
    color:var(--ds-amber); text-shadow:0 0 8px var(--ds-glow);
  }
  #timerDisplay{font-size:20px; font-weight:800; letter-spacing:2px; text-align:right; color:#fff; text-shadow:0 0 10px var(--ds-glow);}
  #killCount{font-size:12px; color:var(--text-dim); text-align:right;}

  #pauseBtn{
    position:absolute; top:14px; right:14px; z-index:12; pointer-events:auto;
    width:44px; height:44px; border:1px solid var(--ds-panel-line);
    background:var(--ds-panel); color:var(--ds-amber); font-size:17px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    clip-path:polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
    box-shadow:0 0 8px var(--ds-glow) inset;
  }

  /* Persistent music player overlay — sits above every screen (menu, gameplay, pause, game over) */
  #musicPlayer{
    position:absolute; top:64px; right:14px; z-index:200;
    display:flex; align-items:center; gap:6px;
    background:rgba(10,14,30,0.85); border:1px solid var(--panel-line); border-radius:10px;
    padding:6px 8px; box-shadow:0 0 12px rgba(63,240,255,0.12);
    max-width:min(64vw, 260px); pointer-events:auto;
    cursor:grab; touch-action:none;
  }
  #musicPlayer.dragging{ cursor:grabbing; opacity:0.85; box-shadow:0 0 18px rgba(63,240,255,0.3); }
  #musicPlayerTrack{
    font-size:10px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:112px; margin-right:2px;
  }
  .musicBtn{
    width:26px; height:26px; border-radius:7px; border:1px solid var(--panel-line);
    background:rgba(14,19,48,0.85); color:var(--text); font-size:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0;
    transition:all 0.15s ease;
  }
  .musicBtn.on{border-color:var(--cyan); color:#fff; background:rgba(63,240,255,0.18); box-shadow:0 0 8px rgba(63,240,255,0.25);}
  @media (max-width:520px){ #musicPlayerTrack{display:none;} }

  /* Weapon tray */
  #weaponTray{
    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px;
  }
  .weaponIcon{
    width:42px; height:42px; border:1px solid var(--ds-panel-line);
    background:var(--ds-panel); display:flex; align-items:center; justify-content:center;
    font-size:20px; position:relative; box-shadow:0 0 10px var(--ds-glow);
    clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  }
  .weaponIcon .lvl{
    position:absolute; bottom:-4px; right:-4px; background:var(--ds-amber); color:#1a0d00;
    font-size:9px; font-weight:800; padding:1px 4px; border-radius:6px;
  }


  /* Mobile joystick */
  #joyZone{
    position:absolute; bottom:0; left:0; width:45%; height:45%;
    display:none;
  }
  #joyBase{
    position:absolute; width:100px; height:100px; border-radius:50%;
    border:2px solid rgba(63,240,255,0.35); background:rgba(63,240,255,0.05);
    display:none;
  }
  #joyStick{
    position:absolute; width:44px; height:44px; border-radius:50%;
    background:rgba(63,240,255,0.5); border:1px solid var(--cyan);
    box-shadow:0 0 14px rgba(63,240,255,0.7);
  }

  /* Overlays */
  .overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(4,6,16,0.88); z-index:20; flex-direction:column; text-align:center;
    padding:20px;
    overflow-y:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch;
  }
  .hidden{display:none !important;}

  /* Uppercase, letter-spaced code entry field — used by the redeem-code input in Settings. */
  .codeInput{
    background:rgba(8,11,26,0.85); border:1px solid var(--panel-line); border-radius:8px;
    color:#fff; font-size:22px; letter-spacing:8px; text-align:center; text-transform:uppercase;
    padding:12px; width:100%; box-sizing:border-box;
  }
  .codeInput:focus{ outline:none; border-color:var(--cyan); }

  /* Comm log character portrait — shown to the right of the dialogue panel, and behind it
     (lower z-index + a slight horizontal overlap into the panel's edge), the way a lot of RPGs
     peek a character sprite out from beside/behind the text box instead of floating it separately.
     Only used for STORY_BEATS entries that carry a `portrait` path (the handful of levels where
     Vesper identifies which crew member a boss/mini-boss used to be — see showCommLog). */
  #commLogPortrait{
    position:absolute; z-index:1; bottom:8%;
    left:min(calc(50% + 190px), calc(100vw - 34vw - 16px));
    max-height:76vh; max-width:34vw; object-fit:contain; object-position:bottom;
    filter:drop-shadow(0 14px 26px rgba(0,0,0,0.65));
    pointer-events:none;
  }

  /* Vesper's dialogue-box avatar — a frame noticeably larger than the portrait it holds, so her
     face reads clearly at a glance instead of filling a tiny circle edge-to-edge. The image sits
     centered and padded inside the ring rather than being cropped/cover-fit to the frame's edge. */
  .vesperAvatarFrame{
    width:76px; height:76px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 35% 32%, rgba(63,240,255,0.35), rgba(10,20,40,0.9) 70%);
    border:2px solid var(--cyan); box-shadow:0 0 18px rgba(63,240,255,0.55), inset 0 0 10px rgba(63,240,255,0.25);
  }
  /* Frame enlarged (64px -> 76px) and the vertical crop window shifted down (42% -> 50%) so the
     bottom of the cover-fit image includes her chin instead of clipping it — the source image
     itself is untouched, only how much of it this circular window reveals. */
  .vesperAvatarImg{
    width:60px; height:60px; border-radius:50%; object-fit:cover; object-position:center 50%;
  }
  @media (max-width:520px){
    .vesperAvatarFrame{width:60px; height:60px;}
    .vesperAvatarImg{width:47px; height:47px;}
  }
  @media (max-width:820px){
    /* Not enough width beside the panel on smaller/narrower screens without crowding or clipping
       off-screen — the dialogue text itself is the priority, so the portrait just sits this one out. */
    #commLogPortrait{ display:none !important; }
  }

  #mainMenu{
    background: linear-gradient(180deg, rgba(4,6,16,0.05) 0%, rgba(4,6,16,0.4) 55%, rgba(4,6,16,0.8) 100%),
                url('../scene images/main_menu_bg.jpg') center/cover no-repeat;
    backdrop-filter:none;
    padding-bottom:0;
  }
  #mainMenuVideo{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    z-index:0; pointer-events:none;
  }
  #mainMenu > *:not(#mainMenuVideo){ position:relative; z-index:1; }
  /* Centered and sized to sit in the gap between the title and the ship in the background video,
     rather than the wider left-aligned panel this used to be. */
  #mainMenu{align-items:center; justify-content:center;}
  /* A single angular "console panel" holding every menu button, instead of six separate floating
     pills — reads as one control console rather than a stack of generic web buttons. */
  #mainMenuPanel{
    width:220px; max-width:calc(100vw - 32px); box-sizing:border-box; padding:18px 16px 14px;
    background:linear-gradient(160deg, rgba(8,12,28,0.84), rgba(8,12,28,0.6));
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(63,240,255,0.4);
    border-radius:14px;
    box-shadow:0 0 40px rgba(0,0,0,0.45);
  }
  #mainMenuPanel .btn{
    width:100%; min-width:0; box-sizing:border-box; margin:0 0 8px 0; padding:11px 16px; font-size:11.5px;
    background:linear-gradient(135deg, rgba(10,14,34,0.7), rgba(10,14,34,0.42));
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(63,240,255,0.3);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 18px rgba(0,0,0,0.35);
  }
  #mainMenuPanel .btn:hover{
    border-color:var(--cyan);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 0 22px rgba(63,240,255,0.35);
  }
  /* Launch, Terminal and Ship Systems are all equal-weight console buttons — same size, same
     footing — so the menu reads as three peer options rather than one dominant action. */
  #mainMenuPanel #btnPlay{
    font-size:12px; padding:12px 16px; margin-bottom:12px;
    border-color:var(--cyan);
    background:linear-gradient(135deg, rgba(63,240,255,0.3), rgba(10,14,34,0.6));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 0 26px rgba(63,240,255,0.4);
  }
  /* Only two secondary buttons now (Terminal, Ship Systems), so they read as normal console
     buttons — same footing as Launch — rather than a cramped list of small links. */
  #mainMenuSecondary{
    display:flex; flex-direction:column; gap:8px;
    padding-top:12px; border-top:1px solid rgba(63,240,255,0.2);
  }
  #mainMenuSecondary .btn{
    width:100%; padding:12px 16px; font-size:12px; text-align:left;
    background:linear-gradient(135deg, rgba(10,14,34,0.65), rgba(10,14,34,0.4));
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(63,240,255,0.28);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
    margin-bottom:0;
  }
  #mainMenuSecondary .btn:hover{ border-color:var(--cyan); box-shadow:0 0 16px rgba(63,240,255,0.3); }
  #mainMenuSecondary .btn small{ font-size:10px; margin-top:3px; }

  /* Terminal / Ship Systems hub screens — same console-panel language as the main menu so they
     feel like sub-panels of one system rather than a different UI. */
  .hubMenuList{ display:flex; flex-direction:column; gap:10px; margin:18px 0; }
  .hubMenuList .btn{ width:100%; text-align:left; padding:13px 18px; font-size:12.5px; }
  .hubMenuList .btn small{ font-size:10px; margin-top:3px; }

  .titleLogo{
    font-size:min(11vw, 64px); font-weight:900; letter-spacing:6px;
    background:linear-gradient(90deg, var(--cyan), var(--magenta));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:none; margin:0; line-height:1;
    filter:drop-shadow(0 0 20px rgba(63,240,255,0.35));
  }
  .subtitle{color:var(--text-dim); letter-spacing:4px; font-size:12px; margin-top:6px; margin-bottom:34px; text-transform:uppercase;}

  .btn{
    font-family:inherit; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    padding:14px 34px; margin:7px; border-radius:10px; border:1px solid var(--panel-line);
    background:linear-gradient(180deg, rgba(63,240,255,0.14), rgba(14,19,48,0.6));
    color:var(--text); font-size:14px; cursor:pointer; min-width:220px;
    transition:transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    box-shadow:0 0 0 rgba(63,240,255,0);
  }
  .btn:hover{border-color:var(--cyan); box-shadow:0 0 18px rgba(63,240,255,0.35); transform:translateY(-1px);}
  .btn:active{transform:translateY(1px) scale(0.98);}
  .btn.primary{background:linear-gradient(180deg, rgba(63,240,255,0.3), rgba(14,19,48,0.7)); border-color:var(--cyan);}
  .btn.danger{border-color:var(--red);}
  .btn.danger:hover{box-shadow:0 0 18px rgba(255,71,87,0.4);}
  .btn small{display:block; font-size:10px; font-weight:400; color:var(--text-dim); letter-spacing:0.5px; margin-top:3px; text-transform:none;}

  .panel{
    background:var(--panel); border:1px solid var(--panel-line); border-radius:16px;
    padding:28px; max-width:520px; width:92%;
    box-shadow:0 0 40px rgba(0,0,0,0.5);
    touch-action:pan-y;
  }

  .modeColumns{display:flex; gap:28px; align-items:flex-start; justify-content:center; flex-wrap:wrap; margin-top:12px;}
  .modeColumn{display:flex; flex-direction:column; align-items:center;}
  .modeColumnLabel{
    font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim);
    margin-bottom:10px; text-align:center;
  }
  .modeGrid{display:flex; flex-direction:column; gap:7px; width:100%; max-width:400px;}
  .modeRow{display:flex; align-items:flex-start; gap:18px;}
  .modeGridMain{max-width:400px;}
  .modeGridChallenge{max-width:220px; padding-top:26px;}
  .modeSectionGap{height:14px; border-top:1px solid rgba(63,240,255,0.18); margin:2px 0 3px;}
  .modeColumnDivider{width:1px; align-self:stretch; background:linear-gradient(180deg, transparent, rgba(63,240,255,0.25), transparent); margin-top:26px;}
  .modeChallengeLabel{font-size:9.5px; margin-bottom:2px;}
  @media (max-width:760px){
    .modeRow{flex-direction:column; align-items:center;}
    .modeColumnDivider{display:none;}
    .modeGridChallenge{max-width:400px; padding-top:10px; border-top:1px solid rgba(63,240,255,0.18); margin-top:8px;}
  }
  .modeCard{
    display:flex; flex-direction:column; align-items:flex-start; text-align:left;
    padding:11px 16px; border-radius:12px; border:1px solid var(--panel-line);
    background:rgba(14,19,48,0.6); cursor:pointer; transition:all 0.15s ease;
  }
  .modeCard:hover{border-color:var(--cyan); box-shadow:0 0 16px rgba(63,240,255,0.25); transform:translateY(-1px);}
  .modeCard h3{margin:0 0 3px 0; font-size:14px; color:#fff; display:flex; align-items:center; gap:8px;}
  .modeCard h3 small{ font-size:10px; font-weight:600; color:var(--text-dim); letter-spacing:0.3px; }
  .modeCard p{margin:0; font-size:11px; color:var(--text-dim); line-height:1.4;}

  /* Level up choices */
  #levelUpOverlay .panel{max-width:640px;}
  #upgradeChoices{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:18px;}
  .upgradeCard{
    width:170px; padding:16px 12px; border-radius:12px; border:1px solid var(--panel-line);
    background:rgba(10,14,34,0.9); cursor:pointer; transition:all 0.15s ease;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  }
  .upgradeCard:hover{border-color:var(--gold); box-shadow:0 0 20px rgba(255,210,63,0.35); transform:translateY(-3px);}
  .upgradeCard .icon{font-size:30px;}
  .upgradeCard .name{font-weight:700; font-size:13px; color:#fff;}
  .upgradeCard .desc{font-size:11px; color:var(--text-dim); line-height:1.4;}
  .upgradeCard .tag{font-size:9px; letter-spacing:1px; color:var(--cyan); text-transform:uppercase;}
  .upgradeCard.new .tag{color:var(--magenta);}

  #statsList{width:100%; text-align:left; margin:18px 0; font-size:13px; color:var(--text-dim); display:flex; flex-direction:column; gap:6px;}
  #statsList span{color:#fff; font-weight:700;}

  /* How To Play */
  .htpScroll{width:100%; max-height:58vh; overflow-y:auto; touch-action:pan-y; padding-right:4px; margin:14px 0;}
  .htpSection{margin-bottom:16px;}
  .htpSection:last-child{margin-bottom:0;}
  .htpSectionTitle{
    font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--cyan);
    font-weight:700; margin-bottom:8px; text-align:left;
  }
  .htpGrid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  @media (max-width:520px){ .htpGrid{grid-template-columns:1fr;} }
  .htpRow{
    display:flex; align-items:center; gap:10px; text-align:left;
    padding:10px 12px; border-radius:10px; border:1px solid var(--panel-line); background:rgba(14,19,48,0.5);
  }
  .htpRow .htpIcon{font-size:20px; flex-shrink:0;}
  .htpRow b{display:block; font-size:12.5px; color:#fff;}
  .htpRow small{display:block; font-size:10.5px; color:var(--text-dim); line-height:1.4; margin-top:2px;}

  /* Level-complete score breakdown */
  .scoreBreakdownPanel{ max-width:760px; }
  .scoreBreakdownColumns{
    display:flex; gap:16px; align-items:flex-start; width:100%; margin-top:6px;
  }
  .scoreBreakdownColumn{ flex:1; min-width:0; }
  .scoreBreakdownColumnLabel{
    font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:1px;
    text-align:left; margin:0 0 6px;
  }
  @media (max-width:720px){
    .scoreBreakdownColumns{ flex-direction:column; }
  }
  #scoreBreakdownList, #collectibleBreakdownList{
    width:100%; max-height:34vh; overflow-y:auto; touch-action:pan-y;
    display:flex; flex-direction:column; gap:6px;
  }
  .scoreRow{
    display:flex; align-items:center; gap:8px; text-align:left;
    padding:6px 8px; border-radius:10px; background:rgba(14,19,48,0.55); border:1px solid var(--panel-line);
  }
  .scoreIcon{width:24px; height:24px; flex-shrink:0; filter:drop-shadow(0 0 4px rgba(63,240,255,0.35));}
  .scoreIconEmoji{display:flex; align-items:center; justify-content:center; font-size:16px; filter:none;}
  .scoreName{flex:1; min-width:0; font-size:12px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .scoreKills{font-size:11px; color:var(--text-dim); min-width:28px;}
  .scoreEach{font-size:10px; color:var(--text-dim); min-width:52px; text-align:right;}
  .scoreSubtotal{font-size:12px; font-weight:800; color:var(--cyan); min-width:56px; text-align:right;}

  #scoreBreakdownTotals{
    width:100%; margin-top:14px; padding-top:12px; border-top:1px solid var(--panel-line);
    display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-dim);
  }
  #scoreBreakdownTotals div{display:flex; justify-content:space-between;}
  #scoreBreakdownTotals span{color:#fff; font-weight:800; font-size:15px;}
  #totalScoreDisplay{color:var(--gold);}
  #speedBonusDisplay{color:var(--cyan);}
  #bestLevelScoreDisplay, #bestScore{color:var(--cyan);}

  .newBestBadge{
    margin-top:10px; padding:6px 14px; border-radius:20px; display:inline-block;
    background:rgba(255,210,63,0.15); border:1px solid var(--gold); color:var(--gold);
    font-weight:800; font-size:12.5px; letter-spacing:0.5px;
    animation:newBestPulse 1.4s ease-in-out infinite;
  }
  @keyframes newBestPulse{
    0%,100%{ box-shadow:0 0 6px rgba(255,210,63,0.35); }
    50%{ box-shadow:0 0 18px rgba(255,210,63,0.75); }
  }

  #starRow{display:flex; justify-content:center; gap:14px; margin:18px 0 6px;}
  .starSlot{position:relative; font-size:42px; line-height:1; width:46px; height:46px; text-align:center;}
  .starSlot.filled{animation:starPop 0.4s ease;}
  .starOutline{position:absolute; inset:0; color:rgba(125,136,184,0.35); -webkit-text-stroke:1px rgba(125,136,184,0.5);}
  .starFillWrap{position:absolute; inset:0; width:0%; overflow:hidden; white-space:nowrap;}
  .starFill{color:var(--gold); text-shadow:0 0 16px rgba(255,210,63,0.9);}
  .sparkleLayer{position:absolute; inset:0; pointer-events:none;}
  .sparkle{
    position:absolute; top:50%; left:50%; width:4px; height:4px; margin:-2px;
    background:#ffd23f; border-radius:50%; box-shadow:0 0 6px 2px rgba(255,210,63,0.8);
    animation:sparklePop 0.65s ease-out forwards;
  }
  @keyframes sparklePop{
    0%{ transform:translate(0,0) scale(1); opacity:1; }
    100%{ transform:translate(var(--dx),var(--dy)) scale(0); opacity:0; }
  }
  @keyframes starPop{
    0%{ transform:scale(1); } 45%{ transform:scale(1.4); } 100%{ transform:scale(1); }
  }

  /* Achievement toast — slides in from off-screen right to a resting spot at mid-height, then
     slides back out the same way once it's done showing, instead of dropping from the top. */
  #achievementToast{
    position:fixed; top:50%; right:-400px; transform:translateY(-50%);
    z-index:300; display:flex; align-items:center; gap:12px;
    background:rgba(10,14,30,0.95); border:1px solid var(--panel-line); border-radius:14px;
    padding:12px 20px; box-shadow:0 8px 28px rgba(0,0,0,0.5);
    pointer-events:none; transition:right 0.45s cubic-bezier(0.2,0.9,0.3,1.3);
    max-width:min(86vw,360px);
  }
  #achievementToast.show{ right:20px; }
  #achievementToast .achToastIcon{font-size:30px; flex-shrink:0;}
  #achievementToast .achToastLabel{font-size:9.5px; letter-spacing:1.5px; color:var(--text-dim); text-transform:uppercase;}
  #achievementToast .achToastName{font-size:14px; font-weight:800; color:#fff;}
  #achievementToast .achToastDesc{font-size:11px; color:var(--text-dim);}
  #achievementToast.tier-bronze{border-color:#cd7f32; box-shadow:0 8px 28px rgba(205,127,50,0.35);}
  #achievementToast.tier-silver{border-color:#c8ced8; box-shadow:0 8px 28px rgba(200,206,216,0.35);}
  #achievementToast.tier-gold{border-color:var(--gold); box-shadow:0 8px 28px rgba(255,210,63,0.4);}
  #achievementToast.tier-platinum{border-color:#3ff0ff; box-shadow:0 8px 28px rgba(63,240,255,0.5);}

  /* First-level interactive tutorial — a short wide bar hugging the bottom edge so it reads
     without blocking the arena/background behind it. */
  #tutorialCallout{
    position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
    z-index:250; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:8px 16px;
    background:rgba(10,14,30,0.95); border:1px solid var(--cyan); border-radius:12px;
    padding:10px 22px; box-shadow:0 8px 32px rgba(63,240,255,0.3);
    width:max-content; max-width:min(94vw,680px); text-align:center;
  }
  #tutorialCallout.hidden{display:none;}
  #tutorialCallout .tutorialStepDots{display:flex; gap:5px; flex:0 0 auto;}
  #tutorialCallout .tutorialStepDots span{width:6px; height:6px; border-radius:50%; background:var(--panel-line);}
  #tutorialCallout .tutorialStepDots span.on{background:var(--cyan); box-shadow:0 0 6px var(--cyan);}
  #tutorialCallout .tutorialText{font-size:13.5px; color:#fff; font-weight:600; line-height:1.35; flex:1 1 260px; text-align:left;}
  #tutorialCallout .tutorialGlyph{
    font-size:14px; font-weight:800; color:#1a1408; letter-spacing:0.3px; flex:0 0 auto;
    padding:6px 14px; border-radius:8px; background:var(--gold);
    box-shadow:0 0 0 1px rgba(255,210,63,0.5), 0 0 14px rgba(255,210,63,0.55);
    animation:tutorialGlyphPulse 1.6s ease-in-out infinite;
  }
  #tutorialCallout .tutorialGlyph::before{
    content:'Press'; font-weight:600; text-transform:uppercase; font-size:9.5px;
    letter-spacing:1px; opacity:0.65; margin-right:7px;
  }
  #tutorialCallout .tutorialGlyph:empty{display:none;}
  @keyframes tutorialGlyphPulse{
    0%,100%{ box-shadow:0 0 0 1px rgba(255,210,63,0.5), 0 0 10px rgba(255,210,63,0.45); }
    50%{ box-shadow:0 0 0 1px rgba(255,210,63,0.7), 0 0 20px rgba(255,210,63,0.85); }
  }
  #tutorialCallout .tutorialHint{flex:0 0 100%; font-size:10.5px; color:var(--text-dim); letter-spacing:0.3px;}
  #tutorialCallout .tutorialHint:empty{display:none;}

  /* Achievements screen */
  #achievementsProgress{font-size:12.5px; color:var(--gold); font-weight:700; margin-bottom:12px; text-align:center;}
  #achievementsList{
    width:100%; max-height:56vh; overflow-y:auto; touch-action:pan-y;
    display:flex; flex-direction:column; gap:8px;
  }
  .achCard{
    display:flex; align-items:center; gap:12px; text-align:left;
    padding:10px 14px; border-radius:12px; border:1px solid var(--panel-line);
    background:rgba(14,19,48,0.5); opacity:0.5; filter:grayscale(0.6);
  }
  .achCard.unlocked{opacity:1; filter:none;}
  .achCard .achIcon{font-size:24px; flex-shrink:0;}
  .achCard .achName{font-size:13px; font-weight:700; color:#fff;}
  .achCard .achDesc{font-size:11px; color:var(--text-dim); margin-top:2px;}
  .achCard .achCheck{color:var(--green); font-size:16px; margin-left:auto; flex-shrink:0;}
  .achCard.tier-bronze.unlocked{border-color:#cd7f32;}
  .achCard.tier-silver.unlocked{border-color:#c8ced8;}
  .achCard.tier-gold.unlocked{border-color:var(--gold);}
  .achCard.tier-platinum.unlocked{border-color:#3ff0ff; box-shadow:0 0 12px rgba(63,240,255,0.25);}

  .codexCard{
    display:flex; align-items:flex-start; gap:14px; text-align:left;
    padding:13px 16px; border-radius:10px; border:1px solid var(--panel-line);
    border-left:3px solid rgba(63,240,255,0.4);
    background:linear-gradient(135deg, rgba(14,19,48,0.65), rgba(14,19,48,0.4));
    box-shadow:0 2px 10px rgba(0,0,0,0.25);
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .codexCard:hover{ border-left-color:var(--cyan); box-shadow:0 2px 14px rgba(63,240,255,0.15); }
  .codexCard .codexIcon{
    width:56px; height:56px; flex-shrink:0; border-radius:8px; margin-top:1px;
    background:rgba(0,0,0,0.4); border:1px solid rgba(63,240,255,0.2);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .codexCard .codexIcon canvas, .codexCard .codexIcon img{ width:100%; height:100%; }
  /* Extraction Ship's Codex card (see renderCodex's Ships tab) — noticeably larger than the
     regular player-ship thumbnails since it's meant to read as a genuinely large capital ship. */
  .codexCard .codexIcon.codexIconLarge{ width:92px; height:92px; }
  .codexCard .codexText{ min-width:0; flex:1; }
  .codexCard .codexName{font-size:13.5px; font-weight:700; color:#fff; letter-spacing:0.3px;}
  .codexCard .codexDesc{font-size:11.5px; color:var(--text-dim); margin-top:4px; line-height:1.45;}
  .codexCard .codexAttack{
    font-size:11px; color:#dfe6ff; margin-top:8px; padding-top:8px; line-height:1.45;
    border-top:1px solid rgba(63,240,255,0.15);
  }
  .codexCard .codexAttackLabel{
    display:inline-block; font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
    color:var(--gold); background:rgba(255,210,63,0.12); border:1px solid rgba(255,210,63,0.3);
    border-radius:4px; padding:1px 6px; margin-right:7px; vertical-align:1px;
  }

  /* Hall of Fame */
  #hallOfFameList{
    width:100%; max-height:52vh; overflow-y:auto; touch-action:pan-y;
    display:flex; flex-direction:column; gap:6px;
  }
  #hallOfFameList .hofEmpty{color:var(--text-dim); font-size:12.5px; padding:20px 0; text-align:center;}
  .hofRow{
    display:flex; align-items:center; gap:14px; text-align:left;
    padding:10px 14px; border-radius:10px; border:1px solid var(--panel-line);
    background:linear-gradient(135deg, rgba(14,19,48,0.65), rgba(14,19,48,0.4));
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
  }
  .hofRow.rank-1{border-color:var(--gold); box-shadow:0 0 14px rgba(255,210,63,0.3);}
  .hofRow.rank-2{border-color:#c8ced8; box-shadow:0 0 10px rgba(200,206,216,0.15);}
  .hofRow.rank-3{border-color:#cd7f32; box-shadow:0 0 10px rgba(205,127,50,0.15);}
  .hofRow .hofRankBadge{
    width:32px; height:32px; border-radius:50%; flex-shrink:0; font-size:14px;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; color:var(--text-dim); background:rgba(0,0,0,0.3); border:1px solid var(--panel-line);
  }
  .hofRow.rank-1 .hofRankBadge{ background:linear-gradient(135deg,#ffe27a,#c9962b); color:#3a2a00; border-color:var(--gold); }
  .hofRow.rank-2 .hofRankBadge{ background:linear-gradient(135deg,#e8ecf2,#a7afbb); color:#1a1e26; border-color:#c8ced8; }
  .hofRow.rank-3 .hofRankBadge{ background:linear-gradient(135deg,#e0a86a,#8a5321); color:#2a1500; border-color:#cd7f32; }
  .hofRow .hofInfo{ flex:1; min-width:0; }
  .hofRow .hofScore{font-size:16px; font-weight:800; color:#fff;}
  .hofRow .hofMeta{font-size:10.5px; color:var(--text-dim); margin-top:2px;}

  .flashText{
    position:absolute; top:38%; left:50%; transform:translate(-50%,-50%);
    font-size:min(9vw,46px); font-weight:900; letter-spacing:3px; color:var(--gold);
    text-shadow:0 0 24px rgba(255,210,63,0.8); pointer-events:none; z-index:30;
    opacity:0; text-transform:uppercase;
  }

  #comboIndicator{
    position:absolute; top:70px; left:14px; font-size:12px; color:var(--ds-amber);
    opacity:0; font-weight:700; letter-spacing:1px; text-shadow:0 0 8px var(--ds-glow);
  }

  /* Low-HP warning: a soft red vignette at the screen edges (center stays clear so it never
     obscures the ship or nearby threats), pulsing gently rather than a hard strobe. */
  #lowHpVignette{
    position:absolute; inset:0; z-index:14; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(255,20,20,0) 42%, rgba(255,20,20,0.55) 100%);
    opacity:0; transition:opacity 0.5s ease;
  }
  #lowHpVignette.active{ animation:lowHpPulse 1.7s ease-in-out infinite; }
  @keyframes lowHpPulse{
    0%,100%{ opacity:0.16; }
    50%{ opacity:0.42; }
  }

  .crtVignette{
    position:absolute; inset:0; pointer-events:none; z-index:5;
    box-shadow:inset 0 0 140px rgba(0,0,0,0.75);
  }

  #modeBadge{
    position:absolute; bottom:76px; right:16px;
    font-size:10px; letter-spacing:2px; color:var(--text-dim); text-transform:uppercase;
    background:var(--ds-panel); padding:2px 12px; border:1px solid var(--ds-panel-line);
    clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  }

  /* Salvage Run only — shown/enabled from updateHUD once world.salvageExtractReady flips true.
     Sits just above the mode badge so it reads as belonging to the same HUD cluster. */
  #btnExtract{
    position:absolute; bottom:104px; right:16px;
    font-family:inherit; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
    font-size:11px; padding:8px 16px; border-radius:8px; cursor:pointer;
    color:#0a0f06; background:linear-gradient(180deg, var(--gold), #d9a900);
    border:1px solid rgba(255,255,255,0.4);
    box-shadow:0 0 16px rgba(255,210,63,0.55);
    animation:extractPulse 1.6s ease-in-out infinite;
  }
  #btnExtract small{ display:block; font-size:8.5px; font-weight:600; letter-spacing:0.3px; text-transform:none; color:#4a3b00; margin-top:1px; }
  @keyframes extractPulse{
    0%,100%{ box-shadow:0 0 16px rgba(255,210,63,0.55); transform:scale(1); }
    50%{ box-shadow:0 0 26px rgba(255,210,63,0.85); transform:scale(1.03); }
  }

  #recordingIndicator{
    position:absolute; top:40px; left:14px;
    display:flex; align-items:center; gap:6px;
    font-size:10px; font-weight:800; letter-spacing:1.5px; color:#fff;
    background:rgba(10,14,30,0.6); padding:3px 10px 3px 8px; border-radius:20px; border:1px solid rgba(255,59,59,0.5);
  }
  #recordingIndicator .recDot{
    width:8px; height:8px; border-radius:50%; background:#ff3b3b;
    box-shadow:0 0 6px #ff3b3b; animation:recPulse 1.2s ease-in-out infinite;
  }
  @keyframes recPulse{
    0%,100%{ opacity:1; }
    50%{ opacity:0.35; }
  }

  ::-webkit-scrollbar{width:6px;}
  ::-webkit-scrollbar-thumb{background:var(--panel-line); border-radius:3px;}

  @media (max-width:720px), (max-height:520px) and (orientation:landscape){
    #joyZone{display:block;}
    /* #topBar's two #statCluster blocks have a hard min-width:150px floor (see the desktop rule
       above) that, combined with its gap, can add up to more than a narrow phone's available width
       (topBar's own right inset already reserves room for the independently-positioned #pauseBtn,
       see above) — flexbox lets the row overflow rather than shrink those below their floor.
       Shrinking the floor and gap here keeps the whole bar readable and on-screen. */
    #topBar{ gap:8px; }
    .statCluster{ min-width:78px; }
    #timerDisplay{ font-size:15px; letter-spacing:1px; }
    #killCount{ font-size:10px; }
    .titleLogo{letter-spacing:3px;}
    .upgradeCard{width:140px; padding:12px 8px;}
    .upgradeCard .icon{font-size:24px;}
    .upgradeCard .name{font-size:12px;}
    .upgradeCard .desc{font-size:10px;}
    /* Keep the touch control set simple: Dash, Shield, and Ultimate cover what mobile needs */
    #rewindIndicator{display:none !important;}

    /* Shrink every menu/overlay to fit a phone screen instead of a scaled-down desktop layout */
    /* .overlay is flex-direction:column, so it's justify-content (not align-items) that centers
       children vertically — and justify-content:center (the desktop default, set on .overlay above)
       combined with overflow-y:auto is a well-known flexbox trap: when centered content is taller
       than the container, the browser centers it by overflowing equally above AND below the visible
       area, but scrollTop can never go negative — so the portion that overflowed off the TOP (here,
       the title and whatever's first in the list, e.g. the Campaign card on Mode Select) becomes
       permanently unreachable by scrolling, while content nearer the bottom stays visible/scrollable.
       Top-aligning on small/short screens instead means the full content is always reachable by
       scrolling straight down from the start. */
    .overlay{padding:10px; justify-content:flex-start;}
    .panel{padding:16px 18px; border-radius:12px;}
    .btn{padding:10px 20px; margin:5px; font-size:12.5px; min-width:160px;}
    .subtitle{font-size:11px; margin-bottom:20px;}
    .modeCard{padding:12px 14px;}
    .modeCard h3{font-size:14px;}
    .modeCard p{font-size:11px;}
  }

  #joyHint{
    position:absolute; left:60px; bottom:60px; width:100px; height:100px;
    border-radius:50%; border:2px solid rgba(63,240,255,0.25);
    background:rgba(63,240,255,0.06); pointer-events:none; display:none;
  }
  @media (max-width:720px), (max-height:520px) and (orientation:landscape){
    #joyHint{display:block;}
  }

  /* ---- Controller / Settings ---- */
  .focusable:focus-visible, .focusable.gp-focused{
    outline:none;
    box-shadow:0 0 0 3px var(--gold), 0 0 20px rgba(255,210,63,0.5) !important;
    border-color:var(--gold) !important;
  }
  #controllerStatus{
    display:flex; align-items:center; gap:8px; justify-content:center;
    font-size:12px; color:var(--text-dim); margin-bottom:16px; padding:8px 14px;
    border:1px solid var(--panel-line); border-radius:20px; background:rgba(14,19,48,0.5);
  }
  #controllerStatus .dot{width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red);}
  #controllerStatus.connected .dot{background:var(--green); box-shadow:0 0 8px var(--green);}
  #controllerStatus.connected{color:var(--text);}

  #gamepadDiagramWrap{display:flex; flex-direction:column; align-items:center; gap:10px;}

  #settingsHint{font-size:11.5px; color:var(--text-dim); text-align:center; margin-top:10px; line-height:1.6;}

  /* ---- Settings: category tabs (Graphics / Audio / Controls / Gameplay) ---- */
  .settingsTabs{
    display:flex; gap:6px; justify-content:center; margin-bottom:16px; flex-wrap:wrap;
    border-bottom:1px solid rgba(42,53,112,0.4); padding-bottom:12px;
  }
  .settingsTab{
    font-family:inherit; font-weight:700; font-size:11.5px; letter-spacing:0.6px; text-transform:uppercase;
    padding:8px 16px; border-radius:20px; border:1px solid var(--panel-line);
    background:rgba(14,19,48,0.6); color:var(--text-dim); cursor:pointer; transition:all 0.15s ease;
  }
  .settingsTab:hover{ border-color:var(--cyan); color:var(--text); }
  .settingsTab.on{
    border-color:var(--cyan); color:#fff; background:rgba(63,240,255,0.18);
    box-shadow:0 0 10px rgba(63,240,255,0.25);
  }
  .settingsTabPanel.hidden{ display:none; }

  /* ---- Settings: Graphics tab hardware-acceleration callout ---- */
  .hwAccelCallout{
    border:1px solid var(--panel-line); border-radius:10px; background:rgba(63,240,255,0.06);
    padding:12px 14px; margin-bottom:14px;
  }
  .hwAccelStatus{
    font-size:12px; font-weight:700; letter-spacing:0.3px; margin-bottom:6px;
    display:flex; align-items:center; gap:6px;
  }
  .hwAccelStatus.ok{ color:var(--green); }
  .hwAccelStatus.warn{ color:var(--gold); }
  .hwAccelCallout p{ margin:0; font-size:11.5px; color:var(--text-dim); line-height:1.55; }

  /* ---- Settings: Controls tab key-binding rows ---- */
  .keyBindSectionLabel{
    font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim);
    margin:18px 0 4px; padding-top:12px; border-top:1px solid rgba(42,53,112,0.4);
  }
  .keyBindSectionLabel small{
    display:block; font-size:10.5px; text-transform:none; letter-spacing:0.2px; margin-top:3px; font-weight:400;
  }
  .keyBindBtn, .gpBindBtn{
    font-family:inherit; font-weight:700; font-size:11px; letter-spacing:0.5px;
    padding:8px 16px; border-radius:8px; border:1px solid var(--panel-line);
    background:rgba(14,19,48,0.7); color:#fff; cursor:pointer; min-width:76px; text-align:center;
    transition:all 0.15s ease;
  }
  .keyBindBtn:hover, .gpBindBtn:hover{ border-color:var(--cyan); }
  .keyBindBtn.listening, .gpBindBtn.listening{
    border-color:var(--gold); color:var(--gold); background:rgba(255,210,63,0.14);
    box-shadow:0 0 10px rgba(255,210,63,0.3); animation:keyBindPulse 1s ease-in-out infinite;
  }
  @keyframes keyBindPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.55; } }
  #keyBindStatus, #gpBindStatus{
    text-align:center; font-size:11px; color:var(--text-dim); min-height:16px; margin-top:8px;
  }

  .settingRow{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:12px 4px; border-bottom:1px solid rgba(42,53,112,0.4);
  }
  .settingRow:last-child{border-bottom:none;}
  .settingLabel{font-size:13px; color:var(--text); font-weight:600;}
  .settingLabel small{display:block; font-size:10.5px; color:var(--text-dim); font-weight:400; margin-top:2px;}

  /* ---- Bug Report Form ---- */
  .bugFormRow{ margin-bottom:14px; }
  .bugFormLabel{
    display:block; font-size:11.5px; font-weight:700; letter-spacing:0.3px;
    color:var(--text); margin-bottom:6px;
  }
  .bugFormSelect, .bugFormInput, .bugFormTextarea{
    width:100%; box-sizing:border-box; font-family:inherit; font-size:13px;
    background:rgba(8,11,26,0.85); border:1px solid var(--panel-line); border-radius:8px;
    color:#fff; padding:9px 10px; outline:none; transition:border-color 0.15s ease;
  }
  .bugFormSelect:focus, .bugFormInput:focus, .bugFormTextarea:focus{ border-color:var(--cyan); }
  .bugFormInput[readonly]{ color:var(--text-dim); background:rgba(8,11,26,0.55); }
  .bugFormTextarea{ resize:vertical; min-height:80px; line-height:1.5; }
  .bugFormSelect{ appearance:none; -webkit-appearance:none;
    background-image:linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
    background-position:calc(100% - 16px) center, calc(100% - 11px) center; background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
    padding-right:28px;
  }

  .toggleBtn{
    font-family:inherit; font-weight:700; font-size:11px; letter-spacing:0.5px;
    padding:8px 18px; border-radius:20px; border:1px solid var(--panel-line);
    background:rgba(14,19,48,0.7); color:var(--text-dim); cursor:pointer; min-width:70px;
    transition:all 0.15s ease;
  }
  .toggleBtn.on{border-color:var(--cyan); color:#fff; background:rgba(63,240,255,0.18); box-shadow:0 0 10px rgba(63,240,255,0.25);}

  .segToggle{display:flex; flex-wrap:wrap; gap:8px;}
  .segToggle button{
    font-family:inherit; font-weight:700; font-size:11px; letter-spacing:0.5px;
    padding:8px 16px; border-radius:20px; border:1px solid var(--panel-line);
    background:rgba(14,19,48,0.7); color:var(--text-dim); cursor:pointer;
    transition:all 0.15s ease;
  }
  .segToggle button:hover{ border-color:var(--cyan); color:var(--text); }
  .segToggle button.on{border-color:var(--cyan); color:#fff; background:rgba(63,240,255,0.18); box-shadow:0 0 10px rgba(63,240,255,0.25);}
  #colorblindToggle button{padding:7px 11px; font-size:9.5px; min-width:52px;}

  #volumeSlider{
    -webkit-appearance:none; width:130px; height:6px; border-radius:3px;
    background:rgba(255,255,255,0.12); outline:none;
  }
  #volumeSlider::-webkit-slider-thumb{
    -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
    background:var(--cyan); box-shadow:0 0 8px rgba(63,240,255,0.7); cursor:pointer;
  }
  #volumeSlider::-moz-range-thumb{
    width:16px; height:16px; border-radius:50%; border:none;
    background:var(--cyan); box-shadow:0 0 8px rgba(63,240,255,0.7); cursor:pointer;
  }
  #volumeValue{font-size:11px; color:var(--cyan); min-width:32px; text-align:right;}

  #abilityBar{
    position:absolute; bottom:16px; right:16px; display:none; gap:10px; z-index:11;
  }
  /* Fixed-position callout for boss/attack status text, so it can't get buried in on-screen
     chaos the way world-space floating text can. Sits centered above the ability icon row. */
  #statusBanner{
    position:absolute; left:50%; bottom:82px; z-index:15; pointer-events:none;
    transform:translate(-50%, 8px); opacity:0; transition:opacity 0.25s ease, transform 0.25s ease;
    max-width:min(92vw,560px); text-align:center; white-space:normal;
    font-weight:800; letter-spacing:0.5px; text-transform:uppercase; font-size:15px;
    padding:9px 22px; border-radius:10px; border:1px solid var(--panel-line);
    background:rgba(8,11,26,0.85); box-shadow:0 4px 20px rgba(0,0,0,0.4);
  }
  #statusBanner.show{ opacity:1; transform:translate(-50%, 0); }

  #bossWarningFlash{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    z-index:500; pointer-events:none; opacity:0; display:none;
    transition:opacity 0.35s ease;
    background-color:#3a0000; /* fallback tint if the image itself somehow still fails to load — the flash is never fully invisible */
  }
  .abilityIcon{
    position:relative; width:46px; height:46px;
    border:2px solid var(--ds-panel-line); background:var(--ds-panel);
    display:flex; align-items:center; justify-content:center; font-size:18px;
    cursor:pointer; clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }
  .abilityIcon.ready{border-color:var(--ds-amber); box-shadow:0 0 14px var(--ds-glow);}
  /* Fires exactly once, right as an ability comes off cooldown (see updateAbilityIndicator) — a
     quick bright pulse the player catches out of the corner of their eye, distinct from the
     steady .ready glow it settles into a moment later. Respects Reduce Flashing with a softer,
     slower version instead of skipping it outright, since "ability is ready" is useful gameplay
     information, not a purely decorative flourish. */
  .abilityIcon.justReady{ animation:abilityReadyFlash 0.45s ease-out; }
  .abilityIcon.justReadySoft{ animation:abilityReadyFlashSoft 0.7s ease-out; }
  @keyframes abilityReadyFlash{
    0%{ box-shadow:0 0 4px var(--ds-glow); transform:scale(1); }
    35%{ box-shadow:0 0 28px 6px rgba(255,145,66,0.9); transform:scale(1.14); border-color:#fff; }
    100%{ box-shadow:0 0 14px var(--ds-glow); transform:scale(1); }
  }
  @keyframes abilityReadyFlashSoft{
    0%{ box-shadow:0 0 4px var(--ds-glow); }
    50%{ box-shadow:0 0 18px rgba(255,145,66,0.7); }
    100%{ box-shadow:0 0 14px var(--ds-glow); }
  }
  .abilityCooldownRing{
    position:absolute; inset:0;
    background:conic-gradient(rgba(0,0,0,0.7) var(--pct,0%), transparent 0%);
    clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }
  .abilityIcon .abilityGlyph{ position:relative; z-index:1; transition:opacity 0.15s ease; }
  .abilityIcon:not(.ready) .abilityGlyph{ opacity:0.3; }
  .abilityIcon .cooldownNum{
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; font-weight:800; color:#fff; font-family:'Segoe UI', Arial, sans-serif;
    text-shadow:0 0 6px rgba(0,0,0,0.9), 0 0 10px rgba(255,145,66,0.6);
    pointer-events:none;
  }
  .abilityIcon .cooldownNum:empty{ display:none; }
  /* While a number is showing, the emoji glyph behind it fades back so the countdown reads clearly
     instead of the two overlapping. */
  .abilityIcon .cooldownNum:not(:empty) ~ .hint{ opacity:0.85; }
  .abilityIcon .hint{
    position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
    font-size:8.5px; color:var(--text-dim); white-space:nowrap;
  }

  /* ---- Controls Info Overlay (Triangle/△ toggle) ---- */
  #controlsInfoOverlay{
    position:absolute; top:70px; right:16px; width:230px; max-height:70vh; overflow-y:auto;
    background:rgba(8,11,26,0.72); border:1px solid var(--panel-line); border-radius:12px;
    padding:14px; z-index:60; display:none; backdrop-filter:blur(3px);
  }
  #controlsInfoOverlay h3{
    margin:0 0 10px 0; font-size:12px; letter-spacing:1px; color:var(--gold); text-transform:uppercase;
  }
  #controlsInfoOverlay .row{
    display:flex; justify-content:space-between; gap:8px; font-size:11.5px; padding:5px 0;
    border-bottom:1px solid rgba(42,53,112,0.35); color:var(--text);
  }
  #controlsInfoOverlay .row:last-child{border-bottom:none;}
  #controlsInfoOverlay .row .btn-tag{
    color:var(--cyan); font-weight:700; flex-shrink:0;
  }

  /* ---- Campaign Map ---- */
  .tierTab.active{border-color:var(--gold); background:rgba(255,210,63,0.14); color:#fff;}
  .hangarTab.active{border-color:var(--cyan); background:rgba(63,240,255,0.14); color:#fff;}
  .shipStyleRow{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:11px 14px; border:1px solid var(--panel-line); border-radius:10px;
    background:linear-gradient(135deg, rgba(14,19,48,0.68), rgba(14,19,48,0.42));
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .shipStyleRow:hover{ border-color:rgba(63,240,255,0.5); }
  .shipStyleRow.equipped{border-color:var(--green); box-shadow:0 0 12px rgba(63,255,158,0.25);}
  .shipStyleRow .styleInfo{font-size:12.5px; color:#fff; font-weight:600; text-align:left; flex:1;}
  .shipStyleRow .styleInfo small{display:block; font-size:10px; color:var(--text-dim); font-weight:400; margin-top:2px;}
  .shipStyleRow .styleThumbWrap{
    position:relative; width:56px; height:40px; flex-shrink:0; border-radius:8px;
    background:rgba(0,0,0,0.4); border:1px solid rgba(63,240,255,0.15);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .shipStyleRow .styleThumbWrap canvas{width:100%; height:100%;}
  .shipStyleRow.locked .styleThumbWrap canvas{opacity:0.4; filter:grayscale(0.5);}
  .shipStyleRow .styleThumbWrap .lockIcon{position:absolute; font-size:14px; text-shadow:0 1px 3px #000;}
  .hangarUnlockHint{
    font-size:11px; color:var(--text-dim); text-align:center; line-height:1.6; margin-bottom:14px;
    padding:8px 14px; border-radius:8px; background:rgba(255,210,63,0.06); border:1px solid rgba(255,210,63,0.2);
  }
  .hangarUnlockHint b{color:var(--gold);}
  .colorSwatch{
    width:44px; height:44px; border-radius:50%; border:2px solid var(--panel-line);
    cursor:pointer; position:relative; display:flex; align-items:center; justify-content:center;
    font-size:9px; color:#fff; font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,0.3);
    transition:transform 0.12s ease, border-color 0.15s ease;
  }
  .colorSwatch:hover{ transform:translateY(-1px); }
  .colorSwatch.equipped{border-color:var(--green); box-shadow:0 0 12px rgba(63,255,158,0.5);}
  .colorSwatch.locked{opacity:0.35;}
  .colorSwatch .lockIcon{position:absolute; font-size:14px;}
  .campNode{
    display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px;
    border:1px solid var(--panel-line); background:rgba(14,19,48,0.55); cursor:pointer;
    transition:all 0.15s ease;
  }
  .campNode:hover:not(.locked){border-color:var(--cyan); box-shadow:0 0 12px rgba(63,240,255,0.25);}
  .campNode.locked{opacity:0.4; cursor:not-allowed;}
  .campNode.completed{border-color:rgba(63,255,158,0.5);}
  .campNode.current{border-color:var(--gold); box-shadow:0 0 14px rgba(255,210,63,0.3);}
  .campNode .nodeIcon{font-size:20px; width:30px; text-align:center; flex-shrink:0;}
  .campNode .nodeInfo{flex:1;}
  .campNode .nodeTitle{font-size:13px; font-weight:700; color:#fff;}
  .campNode .nodeSub{font-size:10.5px; color:var(--text-dim);}
  .campNode .nodeStars{font-size:11px; color:var(--gold); letter-spacing:2px; margin-top:2px;}
  .campNode .nodeCheck{color:var(--green); font-size:16px;}

  .perkRow{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px; border:1px solid var(--panel-line); border-radius:10px; background:rgba(14,19,48,0.5);
  }
  .perkRow .perkInfo{font-size:13px; color:#fff; font-weight:600;}
  .perkRow .perkInfo small{display:block; font-size:10.5px; color:var(--text-dim); font-weight:400; margin-top:2px;}
  .perkBtn{
    font-family:inherit; font-weight:700; font-size:11px; padding:8px 16px; border-radius:16px;
    border:1px solid var(--panel-line); background:rgba(63,240,255,0.15); color:var(--cyan); cursor:pointer; min-width:80px;
  }
  .perkBtn.owned{background:rgba(63,255,158,0.15); color:var(--green); border-color:rgba(63,255,158,0.4); cursor:default;}
  .perkBtn:disabled{opacity:0.4; cursor:not-allowed;}

  /* ---- Splash Screen ---- */
  #splashOverlay{
    position:absolute; inset:0; z-index:100;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:#000000; cursor:pointer;
  }
  #splashLogo{
    max-width:min(60vw, 320px); max-height:40vh; width:auto; height:auto;
    opacity:0; transform:scale(0.96); transition:opacity 0.8s ease, transform 0.8s ease;
  }
  #splashOverlay.show #splashLogo{ opacity:1; transform:scale(1); }
  #splashSkipHint{
    position:absolute; bottom:26px; font-size:10.5px; color:var(--text-dim);
    letter-spacing:1px; opacity:0; transition:opacity 1s ease 0.8s;
  }
  #splashOverlay.show #splashSkipHint{ opacity:0.6; }

  body.hide-cursor, body.hide-cursor canvas, body.hide-cursor #gameContainer{ cursor:none !important; }