:root {
        --bg: #05060f;
        --panel: rgba(9, 11, 26, 0.86);
        --panel-solid: #0a0d1e;
        --ink: #eaf5ff;
        --dim: #9db4d0;
        --cyan: #2ee6ff;
        --mag: #ff3d9a;
        --amber: #ffc857;
        --violet: #8b5cff;
        --danger: #ff4455;
        --line: rgba(46, 230, 255, 0.35);
        color-scheme: dark;
      }
      * { box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: "Rajdhani", system-ui, sans-serif;
        overflow: hidden;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
      }
      #wrap { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
      canvas#game {
        position: absolute; inset: 0; width: 100%; height: 100%; display: block;
        touch-action: none;
      }
      /* subtle CRT scanlines + vignette over the playfield */
      #fx {
        position: absolute; inset: 0; pointer-events: none; z-index: 3;
        background:
          radial-gradient(ellipse at center, transparent 55%, rgba(2, 3, 10, 0.55) 100%),
          repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 3px);
      }

      /* ---------- HUD (bottom status bar) ----------
         The status bar lives at the BOTTOM of the screen, underneath the
         pulsating music-beats visualizer strip, so the whole top of the
         playfield stays open for gameplay. */
      #hud {
        position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
        display: none; flex-direction: column;
        padding: 6px calc(10px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
        pointer-events: none;
      }
      body.playing #hud { display: flex; }
      .hud-row { display: flex; align-items: stretch; gap: 8px; }
      .hud-box {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 6px 12px 7px;
        backdrop-filter: blur(4px);
        min-width: 0;
      }
      .hud-label {
        font-family: "Orbitron", sans-serif; font-size: 9px; letter-spacing: 0.22em;
        color: var(--dim); text-transform: uppercase; line-height: 1;
      }
      .hud-value {
        font-family: "Orbitron", sans-serif; font-weight: 800; font-size: 20px;
        line-height: 1.15; color: var(--ink); white-space: nowrap;
        text-shadow: 0 0 12px rgba(46, 230, 255, 0.45);
      }
      .hud-value.small { font-size: 15px; padding-top: 3px; }
      #comboVal { color: var(--amber); text-shadow: 0 0 12px rgba(255, 200, 87, 0.55); }
      /* Score gets first claim on width so 6–7 digit scores never spill
         out of the box or crush the Combo box next to it. */
      #scoreBox { flex: 1 1 132px; max-width: 196px; }
      #scoreVal { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
      #comboBox { flex: 0 0 auto; }
      #stageBox { flex: 0 0 auto; }
      #hullBox { flex: 1 1 84px; max-width: 210px; display: flex; flex-direction: column; justify-content: center; }
      #hullBarOuter {
        margin-top: 5px; height: 9px; border-radius: 5px;
        background: rgba(255,255,255,0.10); overflow: hidden;
        border: 1px solid rgba(255,255,255,0.14);
      }
      #hullBar {
        height: 100%; width: 100%; border-radius: 5px;
        background: linear-gradient(90deg, #19d3ff, #3dffc8);
        box-shadow: 0 0 10px rgba(46, 230, 255, 0.7);
        transition: width 0.15s ease-out;
      }
      #hullBar.low { background: linear-gradient(90deg, #ff4455, #ff8a3d); box-shadow: 0 0 10px rgba(255, 68, 85, 0.8); }
      /* ---------- Side status rail: icons, not text chips ----------
         Shield / Weapon / Rapid / Missile live on the right edge as compact
         icon badges, so the top bar stays one slim row and the entry
         zone at the top of the playfield stays clear. */
      #sideRail {
        position: absolute; z-index: 5; display: none;
        right: calc(10px + env(safe-area-inset-right));
        top: calc(12px + env(safe-area-inset-top));
        flex-direction: column; gap: 10px; pointer-events: none;
      }
      body.playing #sideRail { display: flex; }
      .rail-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; }
      .rail-icon {
        width: 42px; height: 42px; border-radius: 50%;
        background: var(--panel); border: 1px solid var(--line);
        display: flex; align-items: center; justify-content: center;
        color: var(--dim); opacity: 0.42; backdrop-filter: blur(4px);
        transition: opacity 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
      }
      .rail-icon svg { width: 21px; height: 21px; fill: currentColor; }
      .rail-label {
        font-family: "Orbitron", sans-serif; font-size: 7.5px; letter-spacing: 0.2em;
        text-transform: uppercase; color: var(--dim); text-indent: 0.2em; line-height: 1;
      }
      .rail-badge {
        position: absolute; top: -5px; right: -3px; z-index: 1;
        min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
        background: var(--panel-solid); border: 1px solid var(--cyan);
        font-family: "Orbitron", sans-serif; font-size: 9px; font-weight: 800;
        line-height: 15px; text-align: center; color: var(--ink);
      }
      .rail-badge:empty { display: none; }
      #railShield.on .rail-icon { opacity: 1; color: #7dfcff; border-color: #7dfcff; box-shadow: 0 0 12px rgba(125,252,255,.45); }
      #railShield .rail-badge { border-color: #7dfcff; }
      #railRapid.on .rail-icon { opacity: 1; color: var(--amber); border-color: var(--amber); box-shadow: 0 0 12px rgba(255,200,87,.45); }
      #railRapid .rail-badge { border-color: var(--amber); }
      #railWeapon .rail-icon { opacity: 0.8; color: var(--cyan); position: relative; overflow: hidden; }
      #railWeapon .rail-icon svg { position: relative; }
      /* Timed levels (above Lv.2) drain this fill behind the icon —
         same "watch it drain" language as the missile charge hexagon. */
      #railWeaponFill {
        position: absolute; left: 0; right: 0; bottom: 0; height: 0;
        background: rgba(46, 230, 255, 0.38); pointer-events: none;
      }
      #railWeapon.expiring .rail-icon { border-color: var(--danger); color: #ff8f9d; }
      #railWeapon.up .rail-icon { opacity: 1; box-shadow: 0 0 10px rgba(46,230,255,.35); }
      #railWeapon.max .rail-icon { color: var(--amber); border-color: var(--amber); box-shadow: 0 0 14px rgba(255,200,87,.5); }
      #railWeapon.max .rail-badge { border-color: var(--amber); }
      #railMissile.ready .rail-icon { opacity: 1; color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(46,230,255,.45); }
      /* The missile lives in a hexagon that fills up as it charges —
         no numeric countdown. Full + glowing = ready to fire. */
      #railMissile .rail-icon {
        background: transparent; border: none; border-radius: 0;
        backdrop-filter: none; opacity: 1; width: 44px; height: 44px;
      }
      #railMissile .rail-icon svg { width: 34px; height: 34px; fill: none; overflow: visible; }
      #missileHexFrame { fill: rgba(9, 11, 26, 0.86); stroke: var(--dim); stroke-width: 1.6; transition: stroke 0.15s; }
      #missileHexFillRect { fill: rgba(46, 230, 255, 0.5); }
      #missileGlyph { fill: var(--dim); transition: fill 0.15s; }
      #railMissile.ready #missileHexFrame { stroke: var(--cyan); filter: drop-shadow(0 0 5px rgba(46,230,255,.8)); }
      #railMissile.ready #missileGlyph { fill: #eaf5ff; }
      .hud-spacer { flex: 1 1 auto; }
      .icon-btn {
        pointer-events: auto;
        width: 40px; height: 40px; border-radius: 8px; flex: 0 0 auto;
        background: var(--panel); border: 1px solid var(--line); color: var(--ink);
        display: flex; align-items: center; justify-content: center; cursor: pointer;
        backdrop-filter: blur(4px);
      }
      .icon-btn:hover { border-color: var(--cyan); box-shadow: 0 0 12px rgba(46,230,255,.35); }
      .icon-btn:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
      .icon-btn svg { width: 20px; height: 20px; fill: currentColor; }

      /* boss health — sits just above the status row inside the bottom bar */
      #bossWrap {
        display: none; order: -1; margin: 0 auto 8px; max-width: 520px; width: 72%;
      }
      body.bossfight #bossWrap { display: block; }
      #bossName {
        font-family: "Orbitron", sans-serif; font-size: 10px; letter-spacing: 0.3em;
        color: #ff8fb8; text-align: center; text-transform: uppercase; margin-bottom: 4px;
        text-shadow: 0 0 10px rgba(255, 61, 154, 0.6);
      }
      #bossBarOuter { height: 8px; border: 1px solid rgba(255,61,154,.55); border-radius: 5px; background: rgba(255,61,154,.12); overflow: hidden; }
      #bossBar { height: 100%; width: 100%; background: linear-gradient(90deg, #ff3d9a, #ff7847); transition: width 0.12s linear; }

      /* center banner */
      #banner {
        position: absolute; left: 0; right: 0; top: 26%; z-index: 6; text-align: center;
        pointer-events: none; opacity: 0; transform: scale(0.92);
      }
      #banner.show { animation: bannerIn 2.2s ease-out forwards; }
      #bannerTitle {
        font-family: "Orbitron", sans-serif; font-weight: 900; font-size: clamp(30px, 7vw, 58px);
        letter-spacing: 0.14em; color: #fff;
        text-shadow: 0 0 18px rgba(46,230,255,.85), 0 0 46px rgba(255,61,154,.5);
      }
      #bannerSub {
        font-family: "Orbitron", sans-serif; font-size: clamp(11px, 2.4vw, 15px);
        letter-spacing: 0.34em; color: var(--cyan); text-transform: uppercase; margin-top: 6px;
      }
      #banner.warn #bannerTitle { color: #ffd9de; text-shadow: 0 0 18px rgba(255,68,85,.95), 0 0 50px rgba(255,68,85,.6); }
      #banner.warn #bannerSub { color: #ff8f9d; }
      @keyframes bannerIn {
        0% { opacity: 0; transform: scale(0.9); }
        12% { opacity: 1; transform: scale(1); }
        78% { opacity: 1; }
        100% { opacity: 0; transform: scale(1.03); }
      }

      /* ---------- Screens ---------- */
      .screen {
        position: absolute; inset: 0; z-index: 10;
        display: flex; align-items: center; justify-content: center;
        background: rgba(3, 4, 12, 0.55);
        backdrop-filter: blur(3px);
        padding: 18px; overflow-y: auto;
      }
      .hidden { display: none !important; }
      .panel { width: 100%; max-width: 900px; margin: auto; text-align: center; padding: 10px 0 4px; }
      .game-title {
        font-family: "Orbitron", sans-serif; font-weight: 900;
        font-size: clamp(44px, 10vw, 92px); line-height: 0.98; letter-spacing: 0.06em;
        color: #f4fbff; margin: 0;
        text-shadow: 3px 3px 0 rgba(255,61,154,.75), -3px -3px 0 rgba(46,230,255,.75), 0 0 44px rgba(90,80,255,.55);
      }
      .game-sub {
        font-family: "Orbitron", sans-serif; font-size: clamp(11px, 2.6vw, 15px);
        letter-spacing: 0.5em; text-transform: uppercase; color: var(--cyan); margin: 12px 0 4px;
        text-indent: 0.5em;
      }
      .tagline { color: var(--dim); font-size: clamp(15px, 2.6vw, 18px); font-weight: 600; margin: 8px auto 22px; max-width: 560px; }
      .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
      .mode-card {
        font: inherit; color: var(--ink); text-align: left; cursor: pointer;
        background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
        padding: 18px 18px 14px; position: relative; overflow: hidden;
        transition: border-color .15s, box-shadow .15s, transform .15s;
      }
      .mode-card::before {
        content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
        background: linear-gradient(90deg, var(--cyan), transparent);
      }
      .mode-card.survival::before { background: linear-gradient(90deg, var(--mag), transparent); }
      .mode-card:hover, .mode-card:focus-visible {
        border-color: var(--cyan); transform: translateY(-2px);
        box-shadow: 0 8px 34px rgba(46,230,255,.22), inset 0 0 24px rgba(46,230,255,.05);
      }
      .mode-card.survival:hover, .mode-card.survival:focus-visible {
        border-color: var(--mag); box-shadow: 0 8px 34px rgba(255,61,154,.22), inset 0 0 24px rgba(255,61,154,.05);
      }
      .mode-name {
        font-family: "Orbitron", sans-serif; font-weight: 800; font-size: clamp(19px, 3.4vw, 25px);
        letter-spacing: 0.08em; margin: 0 0 2px;
      }
      .mode-card.arcade .mode-name { color: var(--cyan); }
      .mode-card.survival .mode-name { color: #ff6db1; }
      .mode-tag { font-family: "Orbitron", sans-serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); }
      .mode-card p { color: #c9d9ec; font-size: 15.5px; font-weight: 600; line-height: 1.45; margin: 10px 0 10px; }
      .mode-card ul { margin: 0 0 12px; padding-left: 18px; color: var(--dim); font-size: 14.5px; font-weight: 600; line-height: 1.5; }
      .mode-best { font-family: "Orbitron", sans-serif; font-size: 11px; letter-spacing: 0.12em; color: var(--amber); min-height: 14px; }
      .launch-hint {
        display: inline-block; margin-top: 8px; font-family: "Orbitron", sans-serif; font-size: 11px;
        letter-spacing: 0.24em; color: var(--ink); border: 1px solid currentColor; border-radius: 6px; padding: 6px 12px;
      }
      .controls {
        margin: 22px auto 4px; max-width: 760px;
        display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
        color: var(--dim); font-size: 14.5px; font-weight: 600;
      }
      .controls b { color: var(--ink); font-family: "Orbitron", sans-serif; font-size: 11.5px; letter-spacing: 0.08em; }
      .foot-note { color: #63769a; font-size: 13px; font-weight: 600; margin-top: 14px; }

      /* game over / pause panels */
      .narrow { max-width: 520px; }
      .over-title {
        font-family: "Orbitron", sans-serif; font-weight: 900; font-size: clamp(34px, 8vw, 56px);
        letter-spacing: 0.08em; margin: 0 0 4px; color: #fff;
        text-shadow: 0 0 22px rgba(255,68,85,.75), 0 0 50px rgba(255,61,154,.4);
      }
      .pause-title { text-shadow: 0 0 22px rgba(46,230,255,.75); }
      .over-mode { font-family: "Orbitron", sans-serif; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--cyan); }
      .stats {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0;
      }
      .stat {
        background: var(--panel); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 8px;
      }
      .stat .v { font-family: "Orbitron", sans-serif; font-weight: 800; font-size: clamp(20px, 5vw, 27px); }
      .stat .k { font-family: "Orbitron", sans-serif; font-size: 9.5px; letter-spacing: 0.22em; color: var(--dim); text-transform: uppercase; margin-top: 2px; }
      .stat.hero { grid-column: 1 / -1; border-color: var(--line); }
      .stat.hero .v { font-size: clamp(32px, 8vw, 44px); color: var(--amber); text-shadow: 0 0 18px rgba(255,200,87,.5); }
      .new-best {
        display: none; font-family: "Orbitron", sans-serif; font-size: 12px; letter-spacing: 0.3em;
        color: var(--amber); text-transform: uppercase; margin-top: 6px;
      }
      .new-best.on { display: block; animation: pulseGlow 1s ease-in-out infinite alternate; }
      @keyframes pulseGlow { from { opacity: .55; } to { opacity: 1; } }
      .btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
      .btn {
        font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.18em;
        text-transform: uppercase; cursor: pointer; color: #04121a;
        background: var(--cyan); border: 1px solid var(--cyan); border-radius: 8px; padding: 13px 22px;
        box-shadow: 0 0 20px rgba(46,230,255,.4);
      }
      .btn:hover { filter: brightness(1.1); }
      .btn.ghost { background: transparent; color: var(--ink); box-shadow: none; }
      .btn.ghost:hover { border-color: var(--cyan); color: var(--cyan); }
      .btn.mag { background: var(--mag); border-color: var(--mag); box-shadow: 0 0 20px rgba(255,61,154,.4); color: #1a0410; }

      /* touch missile button (dimmed while the missile is charging) */
      #missileBtn {
        position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(128px + env(safe-area-inset-bottom));
        z-index: 6; width: 74px; height: 74px; border-radius: 50%;
        background: rgba(9,11,26,.6); border: 2px solid var(--cyan); color: var(--cyan);
        font-family: "Orbitron", sans-serif; font-size: 10px; letter-spacing: 0.1em;
        display: none; align-items: center; justify-content: center; cursor: pointer;
        touch-action: none;
      }
      body.playing.touch #missileBtn { display: flex; }
      #missileBtn.cd { opacity: 0.35; border-color: var(--dim); color: var(--dim); }

      @media (max-width: 640px) {
        .modes { grid-template-columns: 1fr; }
        .hud-value { font-size: 17px; }
        .hud-row { gap: 6px; }
        .hud-box { padding: 5px 8px 6px; }
        #scoreBox { min-width: 104px; }
        #hullBox { max-width: none; }
        .icon-btn { width: 36px; height: 36px; }
        #bossWrap { width: 88%; }
      }
      @media (max-height: 520px) {
        #sideRail { top: calc(10px + env(safe-area-inset-top)); gap: 6px; }
        .rail-icon { width: 36px; height: 36px; }
        .rail-icon svg { width: 18px; height: 18px; }
      }
      @media (prefers-reduced-motion: reduce) {
        #banner.show { animation-duration: 0.6s; }
        .new-best.on { animation: none; }
      }