/*
 * STARWAKE PROTOCOL — PRESENTATION LAYER
 *
 * Stacking contract:
 * - Canvas/gameplay is the base layer.
 * - HUD overlays sit above gameplay but should not intercept pointer input unnecessarily.
 * - Pause, start, upgrade, and game-over menus must sit above every HUD element.
 * - The decorative custom cursor is pointer-events:none and should never block controls.
 *
 * Responsive contract:
 * - Avoid transform:scale() on interactive menu containers; transformed visuals can create
 *   confusing hitboxes. Prefer responsive grid changes and natural scrolling instead.
 */
* { box-sizing: border-box; }

    body {
        margin: 0;
        overflow: hidden;
        background: #090c14;
        color: white;
        font-family: Arial, sans-serif;
        user-select: none;
        cursor: none;
        --cursor-color: #7cffd4;
    }

    button, input, label { cursor: none; }

    #customCursor {
        position: fixed;
        left: 0;
        top: 0;
        width: 34px;
        height: 34px;
        pointer-events: none;
        z-index: 9999;
        transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%);
        will-change: transform;
        contain: layout style paint;
        border: 2px solid var(--cursor-color);
        border-radius: 50%;
        box-shadow:
            0 0 12px var(--cursor-color),
            inset 0 0 10px color-mix(in srgb, var(--cursor-color) 45%, transparent);
        opacity: 0.94;
        mix-blend-mode: screen;
    }

    #customCursor::before,
    #customCursor::after {
        content: "";
        position: absolute;
        background: var(--cursor-color);
        box-shadow: 0 0 10px var(--cursor-color);
    }

    #customCursor::before {
        left: 50%;
        top: -8px;
        width: 2px;
        height: 48px;
        transform: translateX(-50%);
    }

    #customCursor::after {
        top: 50%;
        left: -8px;
        width: 48px;
        height: 2px;
        transform: translateY(-50%);
    }

    #customCursor .cursor-dot {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 6px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: white;
        box-shadow: 0 0 12px var(--cursor-color);
    }

    .cursor-settings {
        margin: 14px auto 4px;
        padding: 12px;
        width: min(520px, 100%);
        border: 1px solid rgba(120,190,255,0.25);
        border-radius: 14px;
        background: rgba(5, 10, 20, 0.48);
        box-shadow: inset 0 0 18px rgba(255,255,255,0.035);
    }

    .cursor-settings-title {
        margin-bottom: 8px;
        color: #d7ecff;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .cursor-settings-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .cursor-color-picker {
        width: 54px;
        height: 38px;
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 10px;
        background: rgba(0,0,0,0.35);
        padding: 3px;
    }

    .cursor-preset {
        width: 32px;
        height: 32px;
        min-width: 32px;
        padding: 0;
        border: 2px solid rgba(255,255,255,0.26);
        border-radius: 50%;
        background: var(--preset-color);
        box-shadow: 0 0 14px color-mix(in srgb, var(--preset-color) 55%, transparent);
    }

    .cursor-preset.selected {
        border-color: white;
        transform: scale(1.08);
    }

    html, body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        background: #090c14;
    }

    canvas {
        display: block;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        background: #090c14;
    }

    #ui { display: none !important; }

    #topLeftStats {
        position: absolute;
        top: 12px;
        left: 12px;
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 9px 12px;
        background: rgba(0,0,0,0.50);
        border: 1px solid rgba(120,190,255,0.26);
        border-radius: 999px;
        box-shadow: 0 0 18px rgba(60, 140, 255, 0.12);
        font-size: 16px;
        font-weight: bold;
        line-height: 1;
        z-index: 4;
    }

    #topLeftStats span {
        color: #ffe066;
        text-shadow: 0 0 8px rgba(255, 224, 102, 0.35);
    }

    #topLeftStats .divider {
        width: 1px;
        height: 18px;
        background: rgba(255,255,255,0.22);
    }


    #topWaveCounter {
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        padding: 9px 18px;
        background: rgba(0,0,0,0.50);
        border: 1px solid rgba(120,190,255,0.34);
        border-radius: 999px;
        box-shadow: 0 0 20px rgba(60, 140, 255, 0.16);
        color: #d7ecff;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 0.5px;
        text-shadow: 0 0 10px rgba(120,190,255,0.35);
        z-index: 4;
    }

    #topWaveCounter span { color: #ffffff; }


    #debugPanel {
        position: absolute;
        top: 58px;
        left: 12px;
        display: flex;
        gap: 8px;
        padding: 8px;
        background: rgba(0,0,0,0.46);
        border: 1px solid rgba(255, 224, 102, 0.26);
        border-radius: 12px;
        box-shadow: 0 0 16px rgba(255, 224, 102, 0.10);
        z-index: 4;
    }

    #debugPanel button {
        width: auto;
        padding: 7px 10px;
        font-size: 12px;
        border-radius: 8px;
        background: #ffe066;
        color: #211900;
    }


    #debugPanel .debug-wave-jump {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 6px;
        color: #ffeeb0;
        font-size: 11px;
        font-weight: 800;
    }

    #debugPanel .debug-wave-jump input {
        width: 64px;
        padding: 6px 7px;
        border: 1px solid rgba(255, 224, 102, 0.45);
        border-radius: 7px;
        background: rgba(10, 14, 24, 0.92);
        color: #ffffff;
        font: inherit;
        text-align: center;
        cursor: text;
    }

    #speedBoostOverlay,
    #slowStatusOverlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s linear;
        z-index: 4;
    }

    #speedBoostOverlay {
        border: 14px solid rgba(65, 210, 255, 0.92);
        box-shadow:
            inset 0 0 92px rgba(65, 210, 255, 0.78),
            inset 0 0 26px rgba(255,255,255,0.28);
        animation: speedBoostPulse 0.48s ease-in-out infinite alternate;
    }

    @keyframes speedBoostPulse {
        from { filter: brightness(1); }
        to { filter: brightness(1.45); }
    }

    #regenHealthTick {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 20px;
        left: 0%;
        opacity: 0;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(190,255,190,0.95), transparent);
        box-shadow: 0 0 18px rgba(70,255,120,0.95);
        transform: translateX(-50%);
    }

    #playerHealthBarWrap.regen-active {
        box-shadow:
            0 0 20px rgba(0,0,0,0.35),
            0 0 22px rgba(54,255,122,0.35);
    }

    #playerHealthBarWrap.regen-active #regenHealthTick {
        opacity: 1;
        animation: regenTickGlow 0.85s ease-out;
    }

    @keyframes regenTickGlow {
        from { opacity: 1; width: 34px; }
        to { opacity: 0; width: 14px; }
    }

    #slowStatusOverlay {
        border: 10px solid rgba(178, 95, 255, 0.72);
        box-shadow: inset 0 0 70px rgba(178, 95, 255, 0.60);
    }

    #splashScreen, #upgradeMenu, #startMenu, #gameOverMenu {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.84);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 20px;
    }

    #splashScreen {
        overflow: hidden;
        background:
            radial-gradient(circle at 20% 20%, rgba(95, 205, 255, 0.25), transparent 28%),
            radial-gradient(circle at 82% 70%, rgba(180, 90, 255, 0.20), transparent 32%),
            linear-gradient(135deg, #070a12 0%, #0d1730 48%, #05060b 100%);
        z-index: 20;
    }

    #splashScreen::before {
        content: "";
        position: absolute;
        inset: -40%;
        background:
            repeating-linear-gradient(90deg, transparent 0 38px, rgba(90, 210, 255, 0.08) 39px 40px),
            repeating-linear-gradient(0deg, transparent 0 38px, rgba(90, 210, 255, 0.055) 39px 40px);
        transform: perspective(600px) rotateX(58deg) translateY(8%);
        animation: splashGridMove 5.5s linear infinite;
        opacity: 0.68;
    }

    #splashScreen::after {
        content: "";
        position: absolute;
        width: min(720px, 82vw);
        height: min(720px, 82vw);
        border-radius: 50%;
        border: 2px solid rgba(100, 220, 255, 0.18);
        box-shadow:
            0 0 60px rgba(70, 210, 255, 0.25),
            inset 0 0 60px rgba(178, 95, 255, 0.14);
        animation: splashRingSpin 9s linear infinite;
    }

    @keyframes splashGridMove {
        from { background-position: 0 0, 0 0; }
        to { background-position: 80px 0, 0 80px; }
    }

    @keyframes splashRingSpin {
        from { transform: rotate(0deg) scale(0.98); }
        to { transform: rotate(360deg) scale(1.02); }
    }

    .splash-card, .menu-card {
        position: relative;
        z-index: 1;
        width: min(860px, calc(100vw - 28px));
        background: rgba(9, 15, 30, 0.82);
        border: 1px solid rgba(110, 210, 255, 0.32);
        border-radius: 22px;
        padding: clamp(20px, 4vw, 38px);
        box-shadow:
            0 0 42px rgba(70, 180, 255, 0.20),
            inset 0 0 26px rgba(255,255,255,0.045);
        backdrop-filter: blur(8px);
    }

    .splash-kicker {
        color: #7cffd4;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 3px;
        text-transform: uppercase;
        text-shadow: 0 0 14px rgba(124,255,212,0.48);
    }

    .splash-title, .menu-title {
        margin: 8px 0 4px;
        font-size: clamp(42px, 8vw, 96px);
        line-height: 0.95;
        letter-spacing: 2px;
        color: #eefbff;
        text-shadow:
            0 0 16px rgba(70, 210, 255, 0.85),
            0 0 36px rgba(178, 95, 255, 0.35),
            0 4px 10px black;
    }

    .splash-tagline {
        margin: 8px auto 4px;
        color: #ffffff;
        font-size: clamp(16px, 2.8vw, 24px);
        font-weight: 800;
        letter-spacing: 0.7px;
        text-shadow:
            0 0 14px rgba(124,255,212,0.55),
            0 0 28px rgba(106,169,255,0.28);
    }

    .splash-credit {
        margin: 12px auto 20px;
        color: #d7ecff;
        font-size: 16px;
    }

    .splash-credit strong { color: #ffffff; }

    .menu-title { font-size: clamp(34px, 6vw, 72px); }

    .menu-tagline {
        max-width: 780px;
        margin: 0 auto 12px;
        color: #ffffff;
        font-size: clamp(15px, 2.2vw, 21px);
        font-weight: 800;
        text-shadow: 0 0 16px rgba(124,255,212,0.42);
    }

    .menu-subtitle {
        max-width: 760px;
        margin: 4px auto 16px;
        color: #d7ecff;
        line-height: 1.45;
    }

    .difficulty-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(130px, 1fr));
        gap: 10px;
        margin: 18px 0 14px;
    }

    .difficulty-card {
        border: 1px solid rgba(120,190,255,0.28);
        background: rgba(16, 28, 52, 0.86);
        color: #d7ecff;
        border-radius: 14px;
        padding: 13px 10px;
        cursor: pointer;
        transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
    }

    .difficulty-card:hover {
        transform: translateY(-2px);
        border-color: rgba(150, 230, 255, 0.72);
        background: rgba(25, 48, 84, 0.92);
    }

    .difficulty-card.selected {
        border-color: rgba(124,255,212,0.95);
        box-shadow: 0 0 22px rgba(124,255,212,0.24), inset 0 0 18px rgba(124,255,212,0.08);
        background: rgba(22, 62, 76, 0.92);
    }

    .difficulty-card h3 { margin: 0 0 6px; color: white; }
    .difficulty-card p { margin: 0; font-size: 12px; line-height: 1.35; color: #c9d7e8; }

    .menu-controls {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 12px;
    }

    .menu-controls button { width: auto; min-width: 190px; }

    #startMenu {
        display: none;
        background:
            radial-gradient(circle at center, rgba(65, 210, 255, 0.10), transparent 48%),
            rgba(0,0,0,0.86);
        z-index: 19;
    }

    #upgradeMenu, #gameOverMenu { display: none; }

    #playerVitalBars {
        position: absolute;
        left: 50%;
        bottom: 22px;
        transform: translateX(-50%);
        width: min(520px, calc(100vw - 32px));
        display: flex;
        flex-direction: column;
        gap: 4px;
        z-index: 8;
        pointer-events: none;
    }

    #playerHealthBarWrap {
        position: relative;
        width: 100%;
        height: 24px;
        background: rgba(0,0,0,0.55);
        border: 2px solid rgba(255,255,255,0.35);
        border-radius: 999px;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(0,0,0,0.35);
    }


    #playerShieldBarWrap {
        position: relative;
        width: 100%;
        height: 13px;
        background: rgba(0, 8, 22, 0.72);
        border: 1px solid rgba(117, 213, 255, 0.68);
        border-radius: 999px;
        overflow: hidden;
        box-shadow: 0 0 13px rgba(54, 174, 255, 0.34);
        animation: shieldBarOnline 320ms ease-out both;
    }

    #playerShieldBarWrap[hidden] { display: none !important; }

    #playerShieldBar {
        width: 0%;
        height: 100%;
        background: linear-gradient(90deg, #1779ff, #5ed8ff 58%, #c9f7ff);
        box-shadow: inset 0 0 7px rgba(255,255,255,.5), 0 0 12px rgba(45,183,255,.55);
        transition: width 0.12s linear;
    }

    #playerShieldText {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #e8fbff;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .08em;
        text-shadow: 0 1px 3px #00152d;
    }

    #playerShieldBarWrap.shield-hit { animation: shieldHitFlash 180ms ease-out; }

    @keyframes shieldBarOnline {
        from { opacity: 0; transform: translateY(5px) scaleX(.92); }
        to { opacity: 1; transform: translateY(0) scaleX(1); }
    }

    @keyframes shieldHitFlash {
        0%,100% { filter: brightness(1); }
        45% { filter: brightness(2.1); }
    }

    #playerHealthBar {
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #2dff70, #d7ff4f);
        transition: width 0.12s linear;
    }

    #playerHealthText {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: bold;
        color: white;
        text-shadow: 0 1px 3px black;
    }

    #pauseOverlay {
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(circle at center, rgba(65, 210, 255, 0.10), transparent 48%),
            rgba(0,0,0,0.54);
        color: white;
        z-index: 18;
        padding: 20px;
    }

    .pause-card {
        width: min(520px, calc(100vw - 32px));
        padding: 24px;
        border: 1px solid rgba(120,190,255,0.36);
        border-radius: 20px;
        background: rgba(9, 15, 30, 0.90);
        box-shadow: 0 0 34px rgba(70, 180, 255, 0.18), inset 0 0 24px rgba(255,255,255,0.04);
        text-align: center;
        backdrop-filter: blur(8px);
    }

    .pause-title {
        margin: 0 0 8px;
        color: #eefbff;
        font-size: clamp(38px, 7vw, 72px);
        font-weight: 900;
        letter-spacing: 4px;
        text-shadow: 0 0 20px rgba(70, 210, 255, 0.85), 0 0 36px rgba(178, 95, 255, 0.35);
    }

    .pause-subtitle {
        margin: 0 0 12px;
        color: #d7ecff;
        font-size: 14px;
    }

    #minimapWrap {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 220px;
        background: rgba(0,0,0,0.48);
        border: 1px solid rgba(120,190,255,0.35);
        border-radius: 12px;
        padding: 8px;
        box-shadow: 0 0 18px rgba(60, 140, 255, 0.12);
    }

    #minimapTitle {
        font-size: 13px;
        color: #d7ecff;
        margin-bottom: 5px;
        text-align: center;
    }

    #minimap {
        display: block;
        width: 204px;
        height: 136px;
        background: rgba(8, 12, 22, 0.95);
        border: 1px solid rgba(255,255,255,0.16);
        border-radius: 8px;
    }

    #damageOverlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        border: 12px solid rgba(255, 40, 40, 0.92);
        background:
            radial-gradient(circle at center,
                rgba(255, 0, 0, 0.00) 35%,
                rgba(255, 0, 0, 0.20) 75%,
                rgba(255, 0, 0, 0.42) 100%);
        box-shadow: inset 0 0 85px rgba(255, 0, 0, 0.9);
        transition: opacity 0.12s linear;
        z-index: 5;
    }



    #waveClearOverlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        border: 14px solid rgba(70, 210, 255, 0.76);
        background:
            radial-gradient(circle at center,
                rgba(65, 210, 255, 0.00) 34%,
                rgba(65, 210, 255, 0.10) 72%,
                rgba(65, 210, 255, 0.28) 100%);
        box-shadow:
            inset 0 0 95px rgba(55, 210, 255, 0.72),
            inset 0 0 28px rgba(150, 240, 255, 0.58);
        transition: opacity 0.18s linear;
        z-index: 4;
    }

    #waveClearMessage {
        position: absolute;
        inset: 0;
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        opacity: 0;
        transform: scale(0.94);
        transition: opacity 0.18s linear, transform 0.18s ease-out;
        z-index: 7;
        text-align: center;
        text-shadow: 0 0 18px rgba(40, 210, 255, 0.95), 0 3px 10px black;
    }

    #waveClearMessage.active {
        opacity: 1;
        transform: scale(1);
    }

    #waveClearTitle {
        font-size: clamp(42px, 7vw, 104px);
        font-weight: 900;
        letter-spacing: 5px;
        color: #eaffff;
    }

    #waveClearSubtext {
        margin-top: 8px;
        font-size: clamp(18px, 2.8vw, 34px);
        color: #a8f2ff;
        font-weight: bold;
    }


    #upgradeMenu {
        justify-content: flex-start;
        overflow-y: auto;
        padding: 24px 12px;
        z-index: 100;
        pointer-events: auto;
        isolation: isolate;
        overscroll-behavior: contain;
    }

    /* Keep all Upgrade Protocol controls above gameplay/HUD layers and ensure
       the complete visible button surface receives pointer input. */
    #upgradeCard,
    #upgradeGrid,
    .upgrade-button,
    #undoUpgradeButton,
    #skipUpgradeButton {
        position: relative;
        pointer-events: auto;
    }

    #upgradeCard { z-index: 1; }
    .upgrade-button, #undoUpgradeButton, #skipUpgradeButton { touch-action: manipulation; }

    /* The icon/text inside each card is visual content only. Making every
       descendant mouse-transparent guarantees the full card surface targets
       the parent purchase button in all browsers. */
    .upgrade-button *,
    #undoUpgradeButton *,
    #skipUpgradeButton * {
        pointer-events: none !important;
    }

    body.upgrade-menu-open #topLeftStats,
    body.upgrade-menu-open #topWaveCounter,
    body.upgrade-menu-open #debugPanel,
    body.upgrade-menu-open #playerVitalBars,
    body.upgrade-menu-open #playerHealthBarWrap,
    body.upgrade-menu-open #minimapWrap {
        pointer-events: none;
    }

    #upgradeCard {
        width: min(1040px, calc(100vw - 24px));
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        background:
            radial-gradient(circle at 50% 0%, rgba(70, 150, 255, 0.13), transparent 36%),
            rgba(10, 16, 30, 0.97);
        border: 1px solid rgba(120,190,255,0.28);
        border-radius: 18px;
        padding: 20px;
        box-shadow: 0 0 36px rgba(60, 140, 255, 0.20), inset 0 0 28px rgba(80, 170, 255, 0.04);
    }

    .upgrade-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
        border-bottom: 1px solid rgba(255,255,255,0.12);
        padding-bottom: 14px;
    }

    .upgrade-header h1 { margin: 0; }

    .upgrade-points-panel {
        min-width: 150px;
        padding: 10px 14px;
        border-radius: 12px;
        background: rgba(106,169,255,0.12);
        border: 1px solid rgba(126,198,255,0.26);
        color: #dff3ff;
        text-align: center;
        font-weight: 800;
        box-shadow: 0 0 18px rgba(70,160,255,0.10);
    }

    .upgrade-points-panel strong {
        display: block;
        margin-top: 2px;
        font-size: 24px;
        color: #ffffff;
        text-shadow: 0 0 10px rgba(100,190,255,0.75);
    }

    #upgradeGrid {
        display: grid;
        grid-template-columns: repeat(3, minmax(240px, 1fr));
        gap: 12px;
        margin-top: 12px;
    }

    .upgrade-button {
        --upgrade-accent: #6aa9ff;
        position: relative;
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 11px;
        min-height: 132px;
        padding: 13px;
        text-align: left;
        color: #edf7ff;
        background: linear-gradient(145deg, rgba(24,34,56,0.98), rgba(10,16,29,0.98));
        border: 1px solid color-mix(in srgb, var(--upgrade-accent) 45%, transparent);
        border-left: 4px solid var(--upgrade-accent);
        box-shadow: inset 0 0 18px rgba(255,255,255,0.025), 0 6px 18px rgba(0,0,0,0.24);
        overflow: hidden;
    }

    .upgrade-button::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--upgrade-accent) 16%, transparent), transparent 36%);
        opacity: 0.75;
    }

    .upgrade-button:hover:not(:disabled) {
        background: linear-gradient(145deg, rgba(31,45,73,0.99), rgba(12,20,36,0.99));
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--upgrade-accent) 70%, transparent);
        box-shadow: 0 0 22px color-mix(in srgb, var(--upgrade-accent) 22%, transparent), 0 10px 22px rgba(0,0,0,0.30);
    }

    .upgrade-button:disabled {
        opacity: 0.54;
        filter: saturate(0.65);
        background: linear-gradient(145deg, rgba(28,31,40,0.96), rgba(16,18,25,0.96));
    }

    .upgrade-icon {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 12px;
        font-size: 25px;
        color: #fff;
        background: color-mix(in srgb, var(--upgrade-accent) 19%, rgba(5,10,18,0.95));
        border: 1px solid color-mix(in srgb, var(--upgrade-accent) 62%, transparent);
        box-shadow: inset 0 0 12px color-mix(in srgb, var(--upgrade-accent) 20%, transparent), 0 0 14px color-mix(in srgb, var(--upgrade-accent) 16%, transparent);
        transition: transform 0.12s ease, box-shadow 0.12s ease;
    }

    .upgrade-button:hover:not(:disabled) .upgrade-icon {
        transform: scale(1.08) rotate(-2deg);
        box-shadow: inset 0 0 14px color-mix(in srgb, var(--upgrade-accent) 27%, transparent), 0 0 18px color-mix(in srgb, var(--upgrade-accent) 36%, transparent);
    }

    .upgrade-copy { position: relative; z-index: 1; min-width: 0; }
    .upgrade-title { display: block; font-size: 15px; font-weight: 900; letter-spacing: 0.7px; color: #fff; }
    .upgrade-description { display: block; margin-top: 4px; min-height: 32px; font-size: 12px; line-height: 1.3; color: #afc2d8; font-weight: 500; }
    .upgrade-stats { display: block; margin-top: 7px; font-size: 12px; color: #dceaff; line-height: 1.35; }
    .upgrade-next { color: var(--upgrade-accent); font-weight: 800; }
    .upgrade-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; font-weight: 900; }
    .upgrade-level { color: #c9d8e8; }
    .upgrade-cost { color: #fff3a6; }
    .upgrade-button:disabled .upgrade-cost { color: #ff9797; }



    #undoUpgradeButton {
        grid-column: 1 / -1;
        min-height: 48px;
        background: rgba(255, 202, 92, 0.14);
        color: #fff2c2;
        border: 1px solid rgba(255, 214, 120, 0.38);
    }

    #undoUpgradeButton:not(:disabled):hover {
        background: rgba(255, 202, 92, 0.24);
        border-color: rgba(255, 230, 160, 0.72);
    }

    #undoUpgradeButton:disabled {
        opacity: 0.42;
        background: rgba(80, 74, 58, 0.32);
        color: #aaa18d;
        border-color: rgba(255,255,255,0.10);
    }

    #skipUpgradeButton {
        grid-column: 1 / -1;
        min-height: 48px;
        background: rgba(106,169,255,0.14);
        color: #dcecff;
        border: 1px solid rgba(120,190,255,0.28);
    }

    button {
        border: none;
        border-radius: 10px;
        padding: 12px 18px;
        font-size: 16px;
        cursor: pointer;
        background: #6aa9ff;
        color: #111827;
        font-weight: bold;
        min-width: 0;
        width: 100%;
        transition: transform 0.08s, background 0.12s;
    }

    button:hover {
        background: #9cc9ff;
        transform: translateY(-1px);
    }

    button:disabled {
        background: #555;
        color: #aaa;
        cursor: not-allowed;
        transform: none;
    }


    #audioControls {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,0.16);
        font-size: 13px;
    }

    #audioControls button {
        width: auto;
        min-width: 88px;
        padding: 6px 10px;
        margin-right: 8px;
        font-size: 13px;
    }

    #audioControls input {
        width: 92px;
        vertical-align: middle;
    }

    #audioStatus {
        color: #d7ecff;
        margin-left: 6px;
    }

    .small {
        font-size: 15px;
        color: #ddd;
        max-width: 740px;
    }

    .enemy-key {
        font-size: 14px;
        color: #ddd;
        margin-top: 8px;
    }

    .enemy-key span {
        margin-right: 12px;
        white-space: nowrap;
    }

    @media (max-width: 950px) and (min-width: 721px) {
        #upgradeGrid { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
    }

    @media (max-width: 760px), (max-height: 620px) {
        #minimapWrap {
            width: 160px;
            padding: 6px;
        }

        #minimap {
            width: 148px;
            height: 99px;
        }

        #minimapTitle { font-size: 11px; }
    }

    @media (max-width: 720px), (max-height: 760px) {
        #topLeftStats {
            top: 8px;
            left: 8px;
            gap: 7px;
            padding: 8px 10px;
            font-size: 13px;
        }


        #topWaveCounter {
            top: 8px;
            padding: 8px 12px;
            font-size: 14px;
        }

        #debugPanel {
            top: 48px;
            left: 8px;
            padding: 6px;
        }

        #debugPanel button {
            padding: 6px 8px;
            font-size: 11px;
        }

        .difficulty-grid { grid-template-columns: 1fr 1fr; }
        .menu-controls button { width: 100%; }
        #upgradeCard { padding: 12px; }
        #upgradeCard h1 { font-size: 24px; margin: 4px 0; }
        #upgradeCard p { margin: 6px 0; }
        #upgradeGrid { grid-template-columns: 1fr; gap: 8px; }
        .upgrade-header { align-items: stretch; flex-direction: column; }
        .upgrade-points-panel { min-width: 0; }
        button { font-size: 14px; padding: 10px 12px; }
        .small { font-size: 13px; }
    }


    /* Final performance polish: static menus and lighter custom cursor. */
    #customCursor {
        width: 28px;
        height: 28px;
        box-shadow: 0 0 8px var(--cursor-color);
        mix-blend-mode: normal;
        opacity: 0.9;
    }

    #customCursor::before {
        top: -6px;
        height: 40px;
        box-shadow: none;
    }

    #customCursor::after {
        left: -6px;
        width: 40px;
        box-shadow: none;
    }

    #customCursor .cursor-dot {
        width: 5px;
        height: 5px;
        box-shadow: 0 0 8px var(--cursor-color);
    }

    #splashScreen::before {
        animation: none !important;
        opacity: 0.34;
        background-position: 0 0, 0 0;
    }

    #splashScreen::after {
        animation: splashCorePulse 4.2s ease-in-out infinite alternate !important;
    }

    .splash-title {
        animation: splashTitleBreath 3.6s ease-in-out infinite alternate;
    }

    @keyframes splashCorePulse {
        from { transform: scale(0.985); opacity: 0.70; }
        to { transform: scale(1.015); opacity: 0.92; }
    }

    @keyframes splashTitleBreath {
        from { filter: brightness(0.95); }
        to { filter: brightness(1.16); }
    }


/* Shared audio controls for the main and pause menus. */
.volume-settings {
    margin: 12px auto 4px;
    padding: 12px;
    width: min(520px, 100%);
    border: 1px solid rgba(120,190,255,0.25);
    border-radius: 14px;
    background: rgba(5, 10, 20, 0.48);
    box-shadow: inset 0 0 18px rgba(255,255,255,0.035);
}

.volume-settings-title {
    margin-bottom: 8px;
    color: #d7ecff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.volume-settings-row {
    display: grid;
    grid-template-columns: 62px minmax(140px, 1fr) 48px;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.volume-settings-row-master {
    grid-template-columns: auto 62px minmax(120px, 1fr) 48px;
}

.volume-label {
    color: #cfe4f7;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-align: left;
}

.volume-mute-button {
    width: auto;
    min-width: 104px;
    padding: 9px 12px;
    font-size: 13px;
}

.volume-slider {
    width: 100%;
    accent-color: #7cffd4;
}

.volume-value {
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    text-align: right;
}

@media (max-width: 520px) {
    .volume-settings-row,
    .volume-settings-row-master {
        grid-template-columns: 58px minmax(0, 1fr) 46px;
    }
    .volume-settings-row-master .volume-mute-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* Robust custom cursor layer: initialized independently from the game/audio engine. */
#customCursor {
    position: fixed !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
    opacity: 0;
}

#customCursor.cursor-ready.cursor-visible {
    opacity: 0.96;
}

@media (pointer: coarse) {
    body, button, input, label { cursor: auto; }
    #customCursor { display: none !important; }
}

/* Guaranteed cursor fallback.
   Never hide the OS cursor: some Linux/browser combinations can suppress the
   custom overlay after pointer-capability detection or a script interruption. */
html, body {
    cursor: crosshair !important;
}
button,
[role="button"],
.difficulty-card,
.cursor-preset,
input[type="button"],
input[type="submit"] {
    cursor: pointer !important;
}
input[type="range"] {
    cursor: ew-resize !important;
}
input[type="color"] {
    cursor: pointer !important;
}
button:disabled {
    cursor: not-allowed !important;
}

/* Keep the decorative neon cursor, but the native cursor remains available
   underneath as a fail-safe. */
#customCursor {
    opacity: 0.96 !important;
}

/* Splash input reliability: decorative layers must never intercept clicks. */
#splashScreen::before,
#splashScreen::after {
    pointer-events: none !important;
}
#splashScreen .splash-card,
#continueFromSplashButton {
    position: relative;
    z-index: 3;
    pointer-events: auto !important;
}


/* Developer-only live audio diagnostics. It intentionally sits below modal menus
   but above the gameplay HUD. Keep pointer events enabled only on this panel. */
.audio-debug-console {
    position: fixed;
    top: 112px;
    left: 12px;
    z-index: 16;
    width: min(390px, calc(100vw - 24px));
    max-height: calc(100vh - 136px);
    overflow: auto;
    padding: 12px;
    border: 1px solid rgba(124,255,212,0.45);
    border-radius: 12px;
    background: rgba(4, 9, 18, 0.96);
    box-shadow: 0 0 28px rgba(60, 220, 190, 0.18);
    color: #dffdf5;
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    user-select: text;
    cursor: default;
}
.audio-debug-console[hidden] { display: none !important; }
.audio-debug-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.audio-debug-header strong { color:#7cffd4; letter-spacing:1px; }
.audio-debug-header button { width:30px; min-width:30px; padding:3px; background:#243647; color:white; }
.audio-debug-readout { white-space:pre-wrap; padding:9px; border-radius:8px; background:rgba(0,0,0,.35); }
.audio-debug-readout .diag-good { color:#7cffd4; }
.audio-debug-readout .diag-warn { color:#ffe066; }
.audio-debug-readout .diag-bad { color:#ff7777; }
.audio-debug-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:9px; }
.audio-debug-actions button { width:auto; min-width:0; padding:7px 5px; font-size:11px; }




/* Touch-menu scrolling contract:
   Menus must own vertical gestures. Virtual sticks only capture gestures that begin
   inside their explicit stick zones while the gameplay overlay is active. */
#startMenu,
#upgradeMenu,
#pauseOverlay,
#gameOverMenu,
#splashScreen {
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

.menu-card,
#upgradeCard,
.pause-card,
.splash-card {
    touch-action: pan-y;
}

/* -------------------------------------------------------------------------
   Touch + gamepad controls
   -------------------------------------------------------------------------
   Left virtual stick controls movement; right virtual stick controls aim.
   The weapon remains automatic, matching keyboard/mouse gameplay.
*/
.touch-controls {
    position: fixed;
    inset: 0;
    z-index: 15;
    display: none;
    pointer-events: none;
    touch-action: none;
    user-select: none;
}
.touch-controls.active { display: block; }
.touch-stick-zone {
    position: absolute;
    bottom: max(20px, env(safe-area-inset-bottom));
    width: 156px;
    height: 156px;
    pointer-events: auto;
    touch-action: none;
}
.touch-stick-left { left: max(18px, env(safe-area-inset-left)); }
.touch-stick-right { right: max(18px, env(safe-area-inset-right)); }
.touch-stick-base {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2px solid rgba(124,255,212,.42);
    background: radial-gradient(circle, rgba(30,70,88,.34), rgba(5,12,22,.58));
    box-shadow: inset 0 0 24px rgba(124,255,212,.12), 0 0 22px rgba(60,180,255,.12);
    backdrop-filter: blur(3px);
}
.touch-stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 58px;
    height: 58px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.72);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.52), rgba(80,180,255,.42) 38%, rgba(20,55,82,.88));
    box-shadow: 0 0 20px rgba(90,210,255,.42);
    will-change: transform;
}
.touch-stick-label {
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    color: rgba(220,245,255,.78);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-shadow: 0 1px 3px #000;
}
.touch-pause-button {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    pointer-events: auto;
    border-radius: 50%;
    color: white;
    background: rgba(8,18,32,.76);
    border: 1px solid rgba(124,255,212,.45);
    box-shadow: 0 0 18px rgba(70,190,255,.18);
    touch-action: manipulation;
}
.input-status {
    position: fixed;
    right: 14px;
    bottom: 8px;
    z-index: 5;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(0,0,0,.42);
    color: rgba(215,236,255,.76);
    font-size: 11px;
    pointer-events: none;
}
@media (pointer: coarse), (max-width: 900px) {
    /* Only show the full-screen touch overlay while gameplay is actively accepting stick input.
       Showing `.available` by itself leaves an invisible touch-action:none layer over menus. */
    .touch-controls.available.active { display: block; }
    .input-status { bottom: 4px; left: 50%; right: auto; transform: translateX(-50%); }
}
@media (max-width: 520px), (max-height: 520px) {
    .touch-stick-zone { width: 128px; height: 128px; bottom: max(10px, env(safe-area-inset-bottom)); }
    .touch-stick-base { inset: 10px; }
    .touch-stick-knob { width: 50px; height: 50px; }
}

/* Mobile Performance Mode: preserve gameplay while reducing GPU compositing. */
html.mobile-performance .splash-card,
html.mobile-performance .menu-card,
html.mobile-performance .pause-card,
html.mobile-performance #upgradeCard,
html.mobile-performance .touch-stick-base {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 0 14px rgba(60, 140, 255, 0.12) !important;
}
html.mobile-performance #splashScreen::before,
html.mobile-performance #splashScreen::after,
html.mobile-performance .splash-title { animation: none !important; }
html.mobile-performance #minimapWrap {
    display: block !important;
    /* Mobile top-right stack: pause button first, minimap directly below it. */
    top: calc(max(14px, env(safe-area-inset-top)) + 58px);
    right: max(14px, env(safe-area-inset-right));
    width: 132px;
    padding: 5px;
    border-radius: 9px;
    background: rgba(0,0,0,0.42);
    box-shadow: none !important;
    pointer-events: none;
}
html.mobile-performance #minimapTitle {
    display: none;
}
html.mobile-performance #minimap {
    width: 120px;
    height: 80px;
    border-radius: 6px;
    image-rendering: auto;
}
html.mobile-performance #playerHealthBarWrap {
    display: none !important;
}
html.mobile-performance #damageOverlay,
html.mobile-performance #waveClearOverlay,
html.mobile-performance #speedBoostOverlay,
html.mobile-performance #slowStatusOverlay {
    box-shadow: none !important;
    filter: none !important;
}
html.mobile-performance .upgrade-button,
html.mobile-performance button,
html.mobile-performance .difficulty-card { transition: none !important; }
.platform-status { margin: 6px auto 0; color: #9edcff; }
html.mobile-performance .platform-status { color: #7cffd4; font-weight: 800; }


/* -------------------------------------------------------------------------
   Reliable mobile menu viewport + fullscreen controls
   -------------------------------------------------------------------------
   Menu overlays are their own scrolling viewports. Use dynamic viewport units
   where supported so browser address bars do not hide the bottom controls.
*/
#splashScreen,
#startMenu,
#upgradeMenu,
#pauseOverlay,
#gameOverMenu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    justify-content: flex-start;
    align-items: center;
    padding:
        max(16px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

/* Cards use margin:auto so short menus remain centered, while tall menus begin
   at the top and remain fully reachable by scrolling. */
#splashScreen > .splash-card,
#startMenu > .menu-card,
#pauseOverlay > .pause-card,
#gameOverMenu > *,
#upgradeMenu > #upgradeCard {
    flex: 0 0 auto;
    margin-top: auto;
    margin-bottom: auto;
    max-width: 100%;
}

#startMenu .menu-card {
    max-height: none;
    overflow: visible;
}

.splash-actions,
.pause-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pause-actions > button,
.splash-actions > button {
    width: auto;
    min-width: 170px;
}

.upgrade-header-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.fullscreen-button {
    background: rgba(124, 255, 212, 0.13);
    color: #eaffff;
    border: 1px solid rgba(124, 255, 212, 0.45);
    box-shadow: 0 0 14px rgba(124, 255, 212, 0.10);
    touch-action: manipulation;
}
.fullscreen-button:hover { background: rgba(124, 255, 212, 0.24); }
.fullscreen-button.compact {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
}

@media (max-width: 720px), (max-height: 760px) {
    #splashScreen,
    #startMenu,
    #upgradeMenu,
    #pauseOverlay,
    #gameOverMenu {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    #startMenu > .menu-card,
    #splashScreen > .splash-card,
    #pauseOverlay > .pause-card,
    #upgradeMenu > #upgradeCard {
        margin-top: 0;
        margin-bottom: 0;
    }

    #startMenu .menu-card {
        width: min(100%, calc(100vw - 16px));
        padding: 14px;
    }

    #startMenu .menu-title { font-size: clamp(30px, 10vw, 48px); }
    #startMenu .menu-tagline { font-size: 14px; }
    #startMenu .menu-subtitle { font-size: 12px; margin-bottom: 10px; }
    #startMenu .difficulty-grid { margin-top: 10px; }

    .splash-actions,
    .pause-actions,
    .menu-controls {
        width: 100%;
    }

    .splash-actions > button,
    .pause-actions > button,
    .menu-controls > button {
        width: 100%;
        min-width: 0;
    }

    .upgrade-header-actions { width: 100%; }
}


/* -------------------------------------------------------------------------
   Developer mode
   Debug tools are hidden in normal player-facing sessions. The body class is
   the single authoritative switch so future debug UI can follow one contract.
   ------------------------------------------------------------------------- */
#debugPanel { display: none !important; }
body.developer-mode #debugPanel { display: flex !important; }
body:not(.developer-mode) #audioDebugConsole { display: none !important; }

.developer-mode-toggle {
    width: min(520px, 100%);
    margin: 12px auto 2px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(120,190,255,0.24);
    border-radius: 12px;
    background: rgba(5,10,20,0.42);
    color: #d7ecff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.4px;
    cursor: pointer;
}
.developer-mode-toggle input {
    width: 20px;
    height: 20px;
    accent-color: #7cffd4;
}
.menu-version-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    color: #8fa7c2;
    font-size: 11px;
    letter-spacing: 0.5px;
}
.menu-version-footer strong { color: #7cffd4; }

/* -------------------------------------------------------------------------
   Mobile pause-layout correction
   -------------------------------------------------------------------------
   Keep the pause card horizontally centered and fully reachable. Do not rely
   on auto margins for tall mobile cards; they can cause top clipping and an
   apparent left-edge lock when the dynamic viewport changes.
*/
@media (pointer: coarse), (max-width: 900px), (max-height: 760px) {
    #pauseOverlay {
        display: none;
        flex-direction: column;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100vw;
        min-height: 100dvh;
        padding:
            max(12px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(20px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
        overflow-x: hidden;
        overflow-y: auto;
    }

    #pauseOverlay[style*="display: flex"] {
        display: flex !important;
    }

    #pauseOverlay > .pause-card {
        position: relative;
        flex: 0 0 auto;
        align-self: center;
        width: min(100%, 520px);
        max-width: 520px;
        max-height: none;
        margin: 0 auto;
        padding: 16px;
        overflow: visible;
        transform: none;
    }

    #pauseOverlay .pause-title {
        font-size: clamp(32px, 10vw, 54px);
        line-height: 1;
        letter-spacing: 2px;
    }

    #pauseOverlay .cursor-settings,
    #pauseOverlay .audio-mixer,
    #pauseOverlay .pause-actions {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* -------------------------------------------------------------------------
   Mobile splash containment + lightweight top-left HUD
   -------------------------------------------------------------------------
   The splash is a presentation surface, not a settings page. On mobile it
   must fit within the dynamic viewport and must never become a scroll region.
   The score/points HUD also drops its desktop glass panel because that panel
   can read as an unexplained light rectangle over the zoomed world.
*/
@media (pointer: coarse), (max-width: 900px), (max-height: 760px) {
    #splashScreen {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none;
        justify-content: center !important;
        align-items: center !important;
        padding:
            max(10px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }

    #splashScreen > .splash-card {
        width: min(94vw, 620px);
        max-width: 100%;
        max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
        margin: 0 auto !important;
        padding: clamp(14px, 3.4vh, 24px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(6px, 1.4vh, 12px);
    }

    #splashScreen .splash-title {
        margin: 2px 0;
        font-size: clamp(34px, min(12vw, 10vh), 66px);
        line-height: 0.9;
    }

    #splashScreen .splash-kicker {
        font-size: clamp(9px, 2.4vw, 12px);
        letter-spacing: 2px;
    }

    #splashScreen .splash-tagline {
        margin: 2px auto;
        font-size: clamp(12px, 3.4vw, 18px);
        line-height: 1.2;
    }

    #splashScreen .splash-credit {
        margin: 2px auto 6px;
        font-size: clamp(11px, 3vw, 14px);
    }

    #splashScreen .splash-actions {
        width: min(100%, 420px);
        flex: 0 0 auto;
        gap: 7px;
    }

    #splashScreen .splash-actions > button {
        min-height: 40px;
        padding: 9px 12px;
        font-size: 13px;
    }

    /* Keep the original score/points pill on mobile, but anchor it to the
       visual screen edges and safe-area insets. Do not convert it to a
       transparent block: that can make viewport-rendering artifacts harder to
       distinguish from actual HUD elements. */
    #topLeftStats {
        position: fixed;
        top: max(8px, env(safe-area-inset-top));
        left: max(8px, env(safe-area-inset-left));
        padding: 7px 9px;
        gap: 7px;
        font-size: 12px;
        pointer-events: none;
    }

    #topLeftStats .divider {
        height: 14px;
    }
}

/* Extremely short landscape phones need one final density reduction so every
   splash control remains visible without scrolling. */
@media (pointer: coarse) and (max-height: 430px) {
    #splashScreen > .splash-card {
        padding: 10px 14px;
        gap: 4px;
    }
    #splashScreen .splash-title { font-size: clamp(30px, 15vh, 48px); }
    #splashScreen .splash-tagline { font-size: 11px; }
    #splashScreen .splash-credit { font-size: 10px; margin-bottom: 3px; }
    #splashScreen .splash-actions { flex-wrap: nowrap; }
    #splashScreen .splash-actions > button { min-height: 34px; padding: 6px 9px; }
}


/* Mobile HUD stack contract: pause button occupies the top-right slot; the
   minimap is anchored beneath it. Keep both aligned to the same safe-area edge. */
html.mobile-performance .touch-pause-button {
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    z-index: 2;
}
html.mobile-performance #minimapWrap {
    z-index: 14;
}

/* Mobile top-right row contract:
   Pause sits immediately left of the minimap. Both share the same top inset and
   keep a deliberate margin from the screen edge. This replaces the older
   vertical stack used in previous mobile builds. */
html.mobile-performance #minimapWrap {
    top: max(16px, env(safe-area-inset-top)) !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    width: 132px;
    margin: 0;
}
html.mobile-performance .touch-pause-button {
    top: max(16px, env(safe-area-inset-top)) !important;
    right: calc(max(16px, env(safe-area-inset-right)) + 132px + 10px) !important;
    margin: 0;
}

/* Compact phones keep the same left-to-right order with a slightly smaller gap. */
@media (pointer: coarse) and (max-width: 520px) {
    html.mobile-performance #minimapWrap {
        right: max(12px, env(safe-area-inset-right)) !important;
    }
    html.mobile-performance .touch-pause-button {
        right: calc(max(12px, env(safe-area-inset-right)) + 132px + 8px) !important;
    }
}

/* -------------------------------------------------------------------------
   Mobile HUD hard anchoring fix
   -------------------------------------------------------------------------
   Mobile zoom/camera transforms must never affect DOM HUD placement. Explicitly
   reset every opposing inset and transform so stale rules cannot pull the
   minimap to the left or leave the desktop health bar visible.
*/
html.mobile-performance #playerHealthBarWrap {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html.mobile-performance .touch-pause-button {
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    right: calc(max(14px, env(safe-area-inset-right)) + 132px + 10px) !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 60 !important;
}

html.mobile-performance #minimapWrap {
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 132px !important;
    height: auto !important;
    z-index: 59 !important;
    pointer-events: none !important;
}

html.mobile-performance #minimap {
    display: block !important;
    width: 120px !important;
    height: 80px !important;
    max-width: none !important;
    margin: 0 !important;
}

@media (pointer: coarse) and (max-width: 520px) {
    html.mobile-performance .touch-pause-button {
        right: calc(max(10px, env(safe-area-inset-right)) + 120px + 8px) !important;
    }
    html.mobile-performance #minimapWrap {
        right: max(10px, env(safe-area-inset-right)) !important;
        width: 120px !important;
        padding: 4px !important;
    }
    html.mobile-performance #minimap {
        width: 110px !important;
        height: 73px !important;
    }
}

/* -------------------------------------------------------------------------
   Mobile gameplay HUD visibility contract
   -------------------------------------------------------------------------
   Mobile HUD pieces are hidden by default and only become visible while
   `body.mobile-gameplay-hud` is present. Never make these elements globally
   visible through a mobile media query; doing so leaks them onto splash/menu
   screens before game state has initialized.
*/
html.mobile-performance #minimapWrap,
html.mobile-performance .touch-pause-button,
html.mobile-performance #playerHealthBarWrap {
    display: none !important;
}

html.mobile-performance body.mobile-gameplay-hud #minimapWrap {
    display: block !important;
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 132px !important;
    margin: 0 !important;
    z-index: 59 !important;
    pointer-events: none !important;
}

html.mobile-performance body.mobile-gameplay-hud .touch-pause-button {
    display: grid !important;
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    right: calc(max(14px, env(safe-area-inset-right)) + 132px + 10px) !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 60 !important;
}

/* The desktop bottom health bar never appears on mobile. Health is drawn above
   the ship by the renderer instead. */
html.mobile-performance body.mobile-gameplay-hud #playerHealthBarWrap {
    display: none !important;
}

@media (pointer: coarse) and (max-width: 520px) {
    html.mobile-performance body.mobile-gameplay-hud #minimapWrap {
        right: max(10px, env(safe-area-inset-right)) !important;
        width: 120px !important;
        padding: 4px !important;
    }

    html.mobile-performance body.mobile-gameplay-hud #minimap {
        width: 110px !important;
        height: 73px !important;
    }

    html.mobile-performance body.mobile-gameplay-hud .touch-pause-button {
        right: calc(max(10px, env(safe-area-inset-right)) + 120px + 8px) !important;
    }
}


/* -------------------------------------------------------------------------
   Unified top-right gameplay HUD
   -------------------------------------------------------------------------
   One DOM container owns both the pause button and the single minimap. This
   supersedes all historical mobile minimap/pause positioning rules above.
*/
#topRightHud {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 14;
    display: block;
    pointer-events: none;
}

#topRightHud > #minimapWrap {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
}

#topRightHud > .touch-pause-button {
    display: none;
}

html.mobile-performance #topRightHud {
    display: none !important;
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    pointer-events: none;
    z-index: 70 !important;
}

html.mobile-performance body.mobile-gameplay-hud #topRightHud {
    display: flex !important;
}

html.mobile-performance #topRightHud > .touch-pause-button,
html.mobile-performance body.mobile-gameplay-hud #topRightHud > .touch-pause-button {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
    display: grid !important;
    pointer-events: auto;
    z-index: auto !important;
}

html.mobile-performance #topRightHud > #minimapWrap,
html.mobile-performance body.mobile-gameplay-hud #topRightHud > #minimapWrap {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 132px !important;
    height: auto !important;
    display: block !important;
    flex: 0 0 auto;
    pointer-events: none;
    z-index: auto !important;
}

html.mobile-performance #topRightHud > #minimapWrap #minimap {
    display: block !important;
    width: 120px !important;
    height: 80px !important;
    margin: 0 !important;
}

/* The old direct-element visibility selectors must not override the unified
   container. Visibility is controlled only by #topRightHud above. */
html.mobile-performance body:not(.mobile-gameplay-hud) #topRightHud,
html.mobile-performance body:not(.mobile-gameplay-hud) #topRightHud > #minimapWrap,
html.mobile-performance body:not(.mobile-gameplay-hud) #topRightHud > .touch-pause-button {
    display: none !important;
}

@media (pointer: coarse) and (max-width: 520px) {
    html.mobile-performance #topRightHud {
        top: max(10px, env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        gap: 8px;
    }
    html.mobile-performance #topRightHud > #minimapWrap {
        width: 120px !important;
        padding: 4px !important;
    }
    html.mobile-performance #topRightHud > #minimapWrap #minimap {
        width: 110px !important;
        height: 73px !important;
    }
}

/* =========================================================================
   FINAL MOBILE HUD CANONICAL RULES
   =========================================================================
   These rules intentionally sit last in the stylesheet and supersede every
   historical minimap/pause/health-bar rule above.

   Structural contract:
   - #topRightHud owns BOTH #touchPauseButton and #minimapWrap.
   - Mobile HUD is hidden unless body.mobile-gameplay-hud is present.
   - The desktop bottom health bar is never rendered on touch/mobile layouts.
   - No child may use fixed/absolute positioning inside the shared HUD row.
*/
@media (pointer: coarse), (max-width: 900px) {
    #topRightHud {
        display: none !important;
        position: fixed !important;
        top: max(12px, env(safe-area-inset-top)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        flex-direction: row !important;
        gap: 10px !important;
        pointer-events: none !important;
        z-index: 80 !important;
    }

    body.mobile-gameplay-hud #topRightHud {
        display: flex !important;
    }

    #topRightHud > #touchPauseButton {
        display: grid !important;
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        flex: 0 0 48px !important;
        pointer-events: auto !important;
        z-index: auto !important;
    }

    #topRightHud > #minimapWrap {
        display: block !important;
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 132px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 5px !important;
        transform: none !important;
        flex: 0 0 132px !important;
        pointer-events: none !important;
        z-index: auto !important;
    }

    #topRightHud > #minimapWrap #minimap {
        display: block !important;
        width: 120px !important;
        height: 80px !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* The long top-right line reported on mobile was the desktop health bar. */
    #playerHealthBarWrap {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Defensive: no gameplay HUD is allowed on splash or modal menus. */
    body:not(.mobile-gameplay-hud) #topRightHud,
    body:not(.mobile-gameplay-hud) #topRightHud > #touchPauseButton,
    body:not(.mobile-gameplay-hud) #topRightHud > #minimapWrap {
        display: none !important;
    }
}

@media (pointer: coarse) and (max-width: 520px) {
    #topRightHud {
        top: max(10px, env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        gap: 8px !important;
    }

    #topRightHud > #minimapWrap {
        width: 120px !important;
        flex-basis: 120px !important;
        padding: 4px !important;
    }

    #topRightHud > #minimapWrap #minimap {
        width: 110px !important;
        height: 73px !important;
    }
}

/* Runtime HUD state in game.js is authoritative on mobile. This small final
   block only supplies dimensions and appearance; it does not position children. */
html.mobile-performance #topRightHud > #minimapWrap {
    max-width: 132px !important;
    box-sizing: border-box !important;
}
html.mobile-performance #topRightHud > #minimapWrap #minimap {
    width: 120px !important;
    height: 80px !important;
}
html.mobile-performance #playerHealthBarWrap[hidden] {
    display: none !important;
}

/* =========================================================================
   CACHE-BUSTED MOBILE HUD — SINGLE AUTHORITATIVE FINAL LAYOUT
   =========================================================================
   This block is intentionally last. The pause button and minimap are direct
   siblings inside #topRightHud. The desktop health bar is never rendered in
   the mobile profile. Older mobile HUD rules above cannot override these.
*/
html.mobile-performance #playerHealthBarWrap,
html.mobile-performance #playerHealthBarWrap[hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

html.mobile-performance #topRightHud {
    display: none !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    pointer-events: none !important;
    z-index: 100 !important;
}

html.mobile-performance body.mobile-gameplay-hud #topRightHud {
    display: flex !important;
}

html.mobile-performance #topRightHud > #touchPauseButton {
    display: grid !important;
    position: relative !important;
    inset: auto !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    flex: 0 0 48px !important;
    pointer-events: auto !important;
}

html.mobile-performance #topRightHud > #minimapWrap {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 132px !important;
    height: 92px !important;
    margin: 0 !important;
    padding: 5px !important;
    transform: none !important;
    flex: 0 0 132px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

html.mobile-performance #topRightHud > #minimapWrap #minimapTitle {
    display: none !important;
}

html.mobile-performance #topRightHud > #minimapWrap #minimap {
    display: block !important;
    position: static !important;
    width: 120px !important;
    height: 80px !important;
    margin: 0 !important;
    transform: none !important;
}

html.mobile-performance body:not(.mobile-gameplay-hud) #topRightHud,
html.mobile-performance body:not(.mobile-gameplay-hud) #topRightHud > #touchPauseButton,
html.mobile-performance body:not(.mobile-gameplay-hud) #topRightHud > #minimapWrap {
    display: none !important;
}

@media (pointer: coarse) and (max-width: 520px) {
    html.mobile-performance #topRightHud {
        top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
        right: calc(env(safe-area-inset-right, 0px) + 10px) !important;
        gap: 8px !important;
    }
    html.mobile-performance #topRightHud > #minimapWrap {
        width: 120px !important;
        height: 85px !important;
        flex-basis: 120px !important;
        padding: 4px !important;
    }
    html.mobile-performance #topRightHud > #minimapWrap #minimap {
        width: 110px !important;
        height: 73px !important;
    }
}


/* =========================================================================
   DESKTOP HUD CANONICAL CONTRACT — CACHE-BUSTED B BUILD
   =========================================================================
   The desktop minimap is one complete card. Mobile rules must never collapse
   the wrapper into a title-only strip or move the canvas outside the card.
*/
html:not(.mobile-performance) #topRightHud {
    display: none !important;
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: 220px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 14 !important;
}

html:not(.mobile-performance) body.gameplay-hud-active #topRightHud {
    display: block !important;
}

html:not(.mobile-performance) #topRightHud > #touchPauseButton {
    display: none !important;
}

html:not(.mobile-performance) #topRightHud > #minimapWrap {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 220px !important;
    height: 174px !important;
    margin: 0 !important;
    padding: 8px !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: rgba(0,0,0,0.48) !important;
    border: 1px solid rgba(120,190,255,0.35) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 18px rgba(60,140,255,0.12) !important;
}

html:not(.mobile-performance) #topRightHud > #minimapWrap > #minimapTitle {
    display: block !important;
    height: 16px !important;
    margin: 0 0 5px !important;
    color: #d7ecff !important;
    font-size: 13px !important;
    line-height: 16px !important;
    text-align: center !important;
}

html:not(.mobile-performance) #topRightHud > #minimapWrap > #minimap {
    display: block !important;
    position: static !important;
    width: 204px !important;
    height: 136px !important;
    margin: 0 !important;
    transform: none !important;
    max-width: none !important;
}

html:not(.mobile-performance) body:not(.gameplay-hud-active) #topRightHud,
html:not(.mobile-performance) body:not(.gameplay-hud-active) #minimapWrap {
    display: none !important;
}


/* --------------------------------------------------------------------------
   Ship Reconstruction progression
   -------------------------------------------------------------------------- */
.system-investment-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 8px;
    margin: 10px 0 12px;
}
.system-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--system-color) 55%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--system-color) 11%, rgba(5,10,18,.86));
    color: #eaf6ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .8px;
}
.system-chip strong { font-size: 21px; color: var(--system-color); }
.system-chip.green { --system-color:#55e889; }
.system-chip.red { --system-color:#ff6b5f; }
.system-chip.blue { --system-color:#59c8ff; }
.system-chip.purple { --system-color:#bd78ff; }

.wave-research-panel {
    margin: 10px 0 14px;
    padding: 12px;
    border: 1px solid rgba(255,225,120,.28);
    border-radius: 12px;
    background: rgba(70,52,12,.18);
}
.wave-research-panel > div:first-child { display:flex; justify-content:space-between; gap:12px; color:#ffe897; font-size:12px; }
.wave-research-panel > div:first-child span { color:#cbd7e6; font-weight:500; }
.wave-research-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.wave-research-choice { min-height:68px; background:rgba(35,30,15,.86); border:1px solid rgba(255,220,110,.3); color:#fff; text-align:left; }
.wave-research-choice strong,.wave-research-choice span { display:block; }
.wave-research-choice span { margin-top:4px; color:#cbd3df; font-size:11px; line-height:1.3; }
.wave-research-choice.selected { border-color:#fff0a0; box-shadow:0 0 18px rgba(255,220,100,.25); }
.wave-research-panel.claimed .wave-research-choice:not(.selected) { opacity:.38; }

.research-tier { display:block; margin-bottom:3px; color:var(--upgrade-accent); font-size:10px; font-weight:900; letter-spacing:1.15px; }
.research-lock { color:#ff9b9b; font-weight:800; }
.research-complete { color:#89ffba; font-weight:900; }
.tier-advanced { outline:1px solid color-mix(in srgb,var(--upgrade-accent) 25%,transparent); }
.tier-experimental { box-shadow:inset 0 0 24px color-mix(in srgb,var(--upgrade-accent) 8%,transparent),0 6px 18px rgba(0,0,0,.24); }
.tier-capstone { border-width:2px; background:linear-gradient(145deg,color-mix(in srgb,var(--upgrade-accent) 16%,#172237),rgba(8,12,22,.99)); }
.tier-hybrid { border-style:dashed; }

@media (max-width:720px), (max-height:760px) {
    .system-investment-bar { grid-template-columns:1fr 1fr; }
    .wave-research-panel > div:first-child { flex-direction:column; }
    .wave-research-choices { grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   Authoritative mobile Ship Reconstruction layout
   --------------------------------------------------------------------------
   This block intentionally comes last. Mobile must render the same progression
   system as desktop; only the layout changes. Do not hide or replace these
   elements in platform-specific styles.
*/
@media (pointer: coarse), (max-width: 900px), (max-height: 760px) {
    #upgradeMenu {
        display: none;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        touch-action: pan-y !important;
        padding: max(10px, env(safe-area-inset-top)) 8px max(22px, env(safe-area-inset-bottom)) !important;
    }

    #upgradeMenu[style*="display: flex"],
    body.upgrade-menu-open #upgradeMenu {
        display: flex !important;
    }

    #upgradeCard {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px !important;
        overflow: visible !important;
        border-radius: 14px !important;
    }

    .upgrade-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .upgrade-header h1 {
        font-size: clamp(25px, 8vw, 36px) !important;
        line-height: 1 !important;
    }

    .upgrade-header p {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .upgrade-header-actions,
    .upgrade-points-panel,
    .system-investment-bar,
    .wave-research-panel,
    #upgradeGrid,
    #skipUpgradeButton {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .upgrade-header-actions { grid-template-columns: 1fr !important; }

    .system-investment-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin: 9px 0 11px !important;
    }

    .system-chip {
        min-width: 0 !important;
        padding: 8px 9px !important;
        font-size: 9px !important;
        letter-spacing: .45px !important;
    }

    .system-chip strong { font-size: 18px !important; }

    .wave-research-panel {
        grid-template-columns: 1fr !important;
        margin: 8px 0 12px !important;
        padding: 10px !important;
    }

    .wave-research-panel > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }

    .wave-research-choices {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    #upgradeGrid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .upgrade-button {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        min-height: 116px !important;
        width: 100% !important;
        padding: 11px !important;
    }

    .upgrade-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 21px !important;
    }

    .upgrade-title { font-size: 14px !important; }
    .upgrade-description,
    .upgrade-stats,
    .upgrade-footer { font-size: 11px !important; }
    .research-tier { font-size: 9px !important; }
}


/* --------------------------------------------------------------------------
   Desktop Ship Reconstruction — grouped by system
   --------------------------------------------------------------------------
   The outer grid presents the four ship systems as two desktop columns. Each
   system owns its own vertical list, making branch identity obvious and
   reducing total scroll distance. Mobile intentionally collapses to one
   column with large touch targets.
*/
#upgradeGrid.upgrade-system-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
}

.upgrade-system-section {
    --system-panel-color: #6aa9ff;
    min-width: 0;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--system-panel-color) 34%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(155deg, color-mix(in srgb, var(--system-panel-color) 7%, rgba(12,18,31,.96)), rgba(7,11,21,.98));
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--system-panel-color) 5%, transparent), 0 7px 20px rgba(0,0,0,.22);
}
.system-panel-green { --system-panel-color:#55e889; }
.system-panel-red { --system-panel-color:#ff6b5f; }
.system-panel-blue { --system-panel-color:#59c8ff; }
.system-panel-purple { --system-panel-color:#bd78ff; }
.hybrid-system-section {
    --system-panel-color:#ffe68a;
    grid-column: 1 / -1;
}

.upgrade-system-header {
    margin-bottom: 10px;
    padding: 2px 3px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--system-panel-color) 25%, transparent);
}
.upgrade-system-header > div {
    display:flex;
    align-items:center;
    gap:8px;
}
.upgrade-system-header h2 {
    margin:0;
    color:#f5fbff;
    font-size:16px;
    letter-spacing:.55px;
}
.upgrade-system-header p {
    margin:5px 0 0 25px;
    color:#aebfd3;
    font-size:11px;
    line-height:1.35;
}
.system-symbol {
    color:var(--system-panel-color);
    text-shadow:0 0 10px color-mix(in srgb,var(--system-panel-color) 65%,transparent);
}
.upgrade-system-list {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}
.hybrid-upgrade-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.upgrade-system-section .upgrade-button {
    min-height:118px;
}
.upgrade-action-bar {
    grid-column:1 / -1;
    position:sticky;
    bottom:-1px;
    z-index:5;
    display:grid;
    grid-template-columns:minmax(180px,.55fr) minmax(240px,1fr);
    gap:10px;
    padding:11px;
    border:1px solid rgba(120,190,255,.25);
    border-radius:13px;
    background:rgba(8,13,24,.96);
    box-shadow:0 -8px 24px rgba(0,0,0,.38);
    backdrop-filter:blur(6px);
}
#undoUpgradeButton,
#skipUpgradeButton { grid-column:auto !important; }

@media (max-width: 900px), (pointer: coarse), (max-height: 760px) {
    #upgradeGrid.upgrade-system-grid {
        grid-template-columns:1fr !important;
        gap:10px !important;
    }
    .upgrade-system-section,
    .hybrid-system-section,
    .upgrade-action-bar {
        grid-column:1 !important;
    }
    .hybrid-upgrade-list { grid-template-columns:1fr !important; }
    .upgrade-system-section { padding:9px !important; }
    .upgrade-system-header h2 { font-size:15px !important; }
    .upgrade-system-header p { margin-left:0 !important; }
    .upgrade-action-bar {
        position:static !important;
        grid-template-columns:1fr !important;
        padding:8px !important;
        backdrop-filter:none !important;
    }
}


/* Relic Research cards: effects remain intentionally cryptic until awakened. */
.wave-research-choices { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.relic-research-choice { position:relative; overflow:hidden; min-height:118px; padding:12px; }
.relic-research-choice.system-green { --relic-color:#55e889; }
.relic-research-choice.system-red { --relic-color:#ff6b5f; }
.relic-research-choice.system-blue { --relic-color:#59c8ff; }
.relic-research-choice.system-purple { --relic-color:#bd78ff; }
.relic-research-choice { border-color:color-mix(in srgb,var(--relic-color) 52%,transparent); background:linear-gradient(145deg,rgba(22,28,42,.96),rgba(9,13,22,.98)); }
.relic-affinity { color:var(--relic-color)!important; font-weight:900; letter-spacing:.8px; font-size:10px!important; }
.relic-hint { min-height:30px; font-style:italic; }
.relic-progress { display:block; height:7px; margin-top:10px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.relic-progress i { display:block; height:100%; background:var(--relic-color); box-shadow:0 0 10px var(--relic-color); }
.relic-count { margin-top:5px!important; text-align:right; color:#fff!important; font-weight:900; }
@media (max-width: 900px) { .wave-research-choices { grid-template-columns:1fr 1fr; } }
@media (max-width: 620px) { .wave-research-choices { grid-template-columns:1fr; } }


/* -------------------------------------------------------------------------
   Relic awakening reveal
   Mystery is preserved while dormant. Once a stage completes, the interface
   must disclose the actual passive ability and the purpose of further research.
   ------------------------------------------------------------------------- */
.relic-research-choice.awakened {
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--relic-color) 10%, transparent), 0 0 14px color-mix(in srgb, var(--relic-color) 12%, transparent);
}
.relic-revealed-label {
    display:block;
    margin-top:7px;
    color:var(--relic-color)!important;
    font-size:10px!important;
    font-weight:900;
    letter-spacing:1.1px;
}
.relic-revealed-title {
    display:block;
    margin-top:3px;
    color:#fff!important;
    font-size:13px!important;
    font-weight:900;
}
.relic-revealed-description,
.relic-next-stage {
    display:block;
    margin-top:5px;
    color:#cfe0ef!important;
    font-size:11px!important;
    line-height:1.35;
}
.relic-next-stage {
    color:color-mix(in srgb, var(--relic-color) 72%, white)!important;
    font-weight:700;
}
#relicAwakeningOverlay {
    --relic-awaken-color:#ffffff;
    position:fixed;
    inset:0;
    z-index:2147483646;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:radial-gradient(circle at center, color-mix(in srgb,var(--relic-awaken-color) 18%, transparent), transparent 48%), rgba(0,0,0,.88);
    pointer-events:auto;
}
#relicAwakeningOverlay.active { display:flex; }
.relic-awakening-card {
    width:min(650px,calc(100vw - 28px));
    max-height:calc(100dvh - 28px);
    overflow-y:auto;
    padding:clamp(20px,4vw,36px);
    border:1px solid color-mix(in srgb,var(--relic-awaken-color) 66%, transparent);
    border-radius:22px;
    background:linear-gradient(150deg,rgba(16,24,42,.98),rgba(7,10,18,.99));
    box-shadow:0 0 44px color-mix(in srgb,var(--relic-awaken-color) 25%, transparent),inset 0 0 30px rgba(255,255,255,.04);
    text-align:center;
}
.relic-awakening-kicker {
    color:var(--relic-awaken-color);
    font-size:12px;
    font-weight:900;
    letter-spacing:2px;
}
.relic-awakening-name {
    margin-top:8px;
    color:#fff;
    font-size:clamp(30px,7vw,56px);
    font-weight:950;
    letter-spacing:2px;
    text-shadow:0 0 18px var(--relic-awaken-color);
}
.relic-awakening-title {
    margin-top:14px;
    color:var(--relic-awaken-color);
    font-size:clamp(17px,3.4vw,25px);
    font-weight:900;
}
.relic-awakening-description {
    margin:12px auto 0;
    max-width:540px;
    color:#eaf5ff;
    line-height:1.55;
}
.relic-awakening-next {
    margin:12px auto 18px;
    max-width:540px;
    color:#aebfd2;
    font-size:13px;
    line-height:1.45;
}
#relicAwakeningContinue { width:min(340px,100%); }
@media (max-width:720px) {
    #relicAwakeningOverlay { padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
    .relic-awakening-card { max-height:calc(100dvh - 24px); padding:20px 16px; }
}


/* ========================================================================== 
   Compact Reconstruction Tiles + Responsive Research Grid
   ========================================================================== 
   Desktop upgrade cards intentionally use square tiles. The interface contains
   concise information, so horizontal scanning is faster than a long vertical
   list. Mobile keeps larger touch targets and may collapse to one column on
   very narrow screens.
*/
@media (min-width: 901px) and (pointer: fine) and (min-height: 761px) {
    #upgradeCard {
        width: min(1320px, calc(100vw - 28px));
    }

    .upgrade-system-list {
        grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
        gap: 10px;
    }

    .hybrid-upgrade-list {
        grid-template-columns: repeat(4, minmax(148px, 1fr));
    }

    .upgrade-system-section .upgrade-button {
        aspect-ratio: 1 / 1;
        min-height: 0;
        height: auto;
        grid-template-columns: 42px minmax(0, 1fr);
        align-content: start;
        padding: 11px;
    }

    .upgrade-system-section .upgrade-icon {
        width: 40px;
        height: 40px;
        font-size: 21px;
    }

    .upgrade-system-section .upgrade-title {
        font-size: 13px;
        line-height: 1.12;
    }

    .upgrade-system-section .upgrade-description {
        min-height: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 10.5px;
        line-height: 1.24;
    }

    .upgrade-system-section .upgrade-stats {
        margin-top: 5px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 10.5px;
        line-height: 1.25;
    }

    .upgrade-system-section .upgrade-footer {
        margin-top: auto;
        padding-top: 5px;
        font-size: 10.5px;
    }
}

@media (max-width: 900px), (pointer: coarse), (max-height: 760px) {
    .upgrade-system-list,
    .hybrid-upgrade-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .upgrade-system-section .upgrade-button {
        min-height: 132px !important;
        height: auto !important;
        aspect-ratio: auto !important;
    }
}

@media (max-width: 470px) {
    .upgrade-system-list,
    .hybrid-upgrade-list {
        grid-template-columns: 1fr !important;
    }
}
\n\n/* Release-stage credits and Developer Seal */\n.credits-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 12000;\n    display: grid;\n    place-items: center;\n    padding: 20px;\n    background: rgba(2, 5, 12, 0.88);\n    backdrop-filter: blur(8px);\n}\n.credits-overlay[hidden] { display: none !important; }\n.credits-card {\n    position: relative;\n    width: min(520px, 92vw);\n    max-height: 86vh;\n    overflow: auto;\n    padding: 34px 30px 28px;\n    border: 1px solid rgba(89, 188, 255, 0.55);\n    border-radius: 18px;\n    background: linear-gradient(180deg, rgba(8, 20, 39, 0.98), rgba(3, 8, 19, 0.98));\n    box-shadow: 0 0 42px rgba(25, 145, 255, 0.22), inset 0 0 28px rgba(36, 123, 210, 0.08);\n    color: #dcecff;\n    text-align: center;\n}\n.developer-seal {\n    width: 32px;\n    height: 32px;\n    image-rendering: auto;\n    filter: drop-shadow(0 0 8px rgba(79, 190, 255, 0.8));\n}\n.credits-card h1 { margin: 12px 0 8px; letter-spacing: 0.08em; }\n.credits-card p { line-height: 1.55; }\n.credits-divider {\n    width: 72%;\n    height: 1px;\n    margin: 20px auto;\n    background: linear-gradient(90deg, transparent, rgba(105, 204, 255, 0.75), transparent);\n}\n.credits-stage { color: #75d6ff; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; margin-top: 22px; }\n.credits-note { color: #8fa5bb; font-size: 12px; }\n.credits-close {\n    position: absolute;\n    top: 10px;\n    right: 12px;\n    width: 34px;\n    height: 34px;\n    border-radius: 50%;\n    font-size: 22px;\n    line-height: 1;\n}\n/* ========================================================================== */
   Animated Starwake Seal — splash screen
   Pure CSS reconstruction of the Mk. I emblem. The geometry remains readable
   without the reference PNG and scales down for mobile presentation.
   ========================================================================== */
.splash-seal {
    --seal-size: clamp(116px, 19vw, 196px);
    --seal-cyan: #52d9ff;
    --seal-white: #f4fbff;
    position: relative;
    width: var(--seal-size);
    height: var(--seal-size);
    margin: -4px auto 10px;
    filter: drop-shadow(0 0 16px rgba(82, 217, 255, 0.5));
    isolation: isolate;
    pointer-events: none;
}

.splash-seal-ring,
.splash-seal-star,
.splash-seal-core,
.splash-seal-orb,
.splash-seal-wake {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.splash-seal-ring {
    border-radius: 50%;
    box-sizing: border-box;
}

.splash-seal-ring-outer {
    width: 82%;
    height: 82%;
    border: clamp(2px, 0.35vw, 4px) solid rgba(191, 232, 255, 0.76);
    border-left-color: rgba(82, 217, 255, 0.18);
    border-right-color: rgba(82, 217, 255, 0.34);
    box-shadow:
        0 0 0 clamp(5px, 0.8vw, 9px) rgba(41, 116, 170, 0.18),
        inset 0 0 20px rgba(82, 217, 255, 0.26),
        0 0 22px rgba(82, 217, 255, 0.2);
    animation: sealOuterOrbit 16s linear infinite;
}

.splash-seal-ring-outer::before,
.splash-seal-ring-outer::after {
    content: "";
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    border: 1px dashed rgba(82, 217, 255, 0.64);
}

.splash-seal-ring-outer::after {
    inset: -11%;
    border-style: dotted;
    border-width: 2px;
    opacity: 0.48;
}

.splash-seal-ring-inner {
    width: 62%;
    height: 62%;
    border: 2px solid rgba(91, 177, 230, 0.58);
    border-top-color: rgba(239, 251, 255, 0.9);
    border-bottom-color: rgba(82, 217, 255, 0.18);
    box-shadow: inset 0 0 16px rgba(82, 217, 255, 0.3);
    animation: sealInnerOrbit 10s linear infinite reverse;
}

.splash-seal-star {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #55748b 0%, var(--seal-white) 46%, #7393aa 58%, #244258 100%);
    clip-path: polygon(
        50% 0%, 56% 38%, 100% 50%, 56% 56%,
        50% 100%, 44% 56%, 0% 50%, 44% 44%
    );
    box-shadow: 0 0 18px rgba(82, 217, 255, 0.65);
    z-index: 2;
}

.splash-seal-star::after {
    content: "";
    position: absolute;
    inset: 5%;
    background: linear-gradient(90deg, #152a3b, #b8e5ff 48%, #36566e 54%, #0a1722);
    clip-path: inherit;
    opacity: 0.62;
}

.splash-seal-star-cardinal {
    transform: translate(-50%, -50%) scale(0.97);
}

.splash-seal-star-diagonal {
    transform: translate(-50%, -50%) rotate(45deg) scale(0.71);
    opacity: 0.92;
}

.splash-seal-core {
    width: 40%;
    height: 40%;
    border-radius: 50%;
    z-index: 5;
    background: radial-gradient(circle, rgba(6, 15, 28, 0.96) 0 38%, rgba(21, 91, 145, 0.9) 40% 55%, rgba(82, 217, 255, 0.8) 58% 62%, rgba(3, 10, 20, 0.98) 65%);
    box-shadow:
        0 0 8px rgba(255,255,255,0.9),
        0 0 25px rgba(82,217,255,0.9),
        0 0 48px rgba(19,117,255,0.48),
        inset 0 0 18px rgba(82,217,255,0.72);
    animation: sealCoreBreathe 2.35s ease-in-out infinite;
}

.splash-seal-orb {
    width: 36%;
    height: 36%;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #dffaff 0 8%, #52d9ff 18%, #1269bd 48%, #061329 72%, #01040a 100%);
    box-shadow:
        0 0 7px #e7fbff,
        0 0 17px rgba(82,217,255,0.95),
        0 0 35px rgba(36,113,255,0.65);
    z-index: 6;
    animation: sealOrbPulse 1.7s ease-in-out infinite;
}

.splash-seal-wake {
    width: 68%;
    height: 27%;
    border-radius: 50%;
    border-top: clamp(3px, 0.55vw, 6px) solid rgba(228, 250, 255, 0.98);
    border-right: clamp(3px, 0.55vw, 6px) solid rgba(82, 217, 255, 0.9);
    border-bottom: 0;
    border-left: 0;
    filter: drop-shadow(0 0 5px rgba(82, 217, 255, 0.98));
    z-index: 7;
    transform-origin: center;
}

.splash-seal-wake.wake-a {
    animation: sealWakeSpin 3.3s linear infinite;
}
.splash-seal-wake.wake-b {
    transform: translate(-50%, -50%) rotate(120deg);
    animation: sealWakeSpinB 3.3s linear infinite;
}
.splash-seal-wake.wake-c {
    transform: translate(-50%, -50%) rotate(240deg);
    animation: sealWakeSpinC 3.3s linear infinite;
}

@keyframes sealOuterOrbit {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes sealInnerOrbit {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes sealCoreBreathe {
    0%, 100% { transform: translate(-50%, -50%) scale(0.96); filter: brightness(0.88); }
    50% { transform: translate(-50%, -50%) scale(1.06); filter: brightness(1.22); }
}
@keyframes sealOrbPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.82); opacity: 0.84; }
    50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}
@keyframes sealWakeSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes sealWakeSpinB {
    to { transform: translate(-50%, -50%) rotate(480deg); }
}
@keyframes sealWakeSpinC {
    to { transform: translate(-50%, -50%) rotate(600deg); }
}

@media (max-height: 720px), (max-width: 560px) {
    .splash-seal {
        --seal-size: clamp(90px, 22vh, 132px);
        margin-bottom: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .splash-seal-ring,
    .splash-seal-core,
    .splash-seal-orb,
    .splash-seal-wake {
        animation: none !important;
    }
}

html.mobile-performance .splash-seal-ring,
html.mobile-performance .splash-seal-core,
html.mobile-performance .splash-seal-orb,
html.mobile-performance .splash-seal-wake {
    animation: none !important;
}

/* ========================================================================== 
   Animated splash seal — containment correction
   Keep the emblem in its own layout row and prevent rotating decoration from
   changing the splash viewport's scrollable overflow bounds.
   ========================================================================== */
#splashScreen {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    scrollbar-width: none;
}
#splashScreen::-webkit-scrollbar { display: none; }

#splashScreen > .splash-card {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#splashScreen .splash-seal {
    --seal-size: clamp(86px, 9vw, 118px);
    position: relative !important;
    flex: 0 0 var(--seal-size);
    width: var(--seal-size) !important;
    height: var(--seal-size) !important;
    margin: 0 auto 8px !important;
    z-index: 1;
    contain: layout paint;
    overflow: visible;
}

#splashScreen .splash-kicker,
#splashScreen .splash-title,
#splashScreen .splash-tagline,
#splashScreen .splash-credit,
#splashScreen .splash-actions {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

@media (max-height: 760px), (max-width: 900px), (pointer: coarse) {
    #splashScreen .splash-seal {
        --seal-size: clamp(68px, 13vh, 94px);
        margin-bottom: 3px !important;
    }
}


/* -------------------------------------------------------------------------
   Defensive persistence controls
   ------------------------------------------------------------------------- */
.save-data-panel {
    margin: 18px 0 4px; padding: 14px; border: 1px solid rgba(105, 205, 255, .28);
    border-radius: 12px; background: rgba(5, 16, 34, .72); box-shadow: inset 0 0 24px rgba(30, 140, 220, .07);
}
.save-data-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.save-data-heading strong { display:block; color:#dff7ff; letter-spacing:.08em; text-transform:uppercase; font-size:13px; }
.save-data-heading span:not(.save-integrity-badge) { display:block; margin-top:4px; color:#94aec4; font-size:12px; line-height:1.35; }
.save-integrity-badge { flex:0 0 auto; padding:4px 8px; border-radius:999px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(150,180,200,.3); color:#a9bdcc; }
.save-integrity-badge.good { color:#79f6bd; border-color:rgba(80,240,175,.45); background:rgba(30,145,105,.12); }
.save-integrity-badge.warn { color:#ffd27a; border-color:rgba(255,190,75,.45); background:rgba(160,100,20,.13); }
.save-integrity-badge.bad { color:#ff8d9e; border-color:rgba(255,95,120,.48); background:rgba(160,25,55,.13); }
.save-data-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px; }
.save-data-actions button { min-height:38px; font-size:11px; padding:7px 8px; }
.save-data-actions button:disabled { opacity:.42; cursor:not-allowed; }
.save-data-status { min-height:1.25em; margin:9px 0 0; color:#9fc5dc; font-size:11px; line-height:1.35; }
@media (max-width:700px) { .save-data-actions { grid-template-columns:repeat(2,minmax(0,1fr)); } }


/* Upgrade-menu manual save control */
.upgrade-action-bar {
    grid-template-columns: minmax(150px, 1fr) minmax(140px, .8fr) minmax(170px, 1fr);
}
.upgrade-save-button {
    border-color: rgba(88, 214, 255, .55);
    background: linear-gradient(180deg, rgba(24, 105, 145, .92), rgba(10, 47, 76, .96));
    box-shadow: inset 0 0 18px rgba(69, 202, 255, .12), 0 0 14px rgba(40, 174, 255, .12);
}
.upgrade-save-button:hover,
.upgrade-save-button:focus-visible {
    border-color: rgba(126, 232, 255, .95);
    box-shadow: inset 0 0 20px rgba(89, 218, 255, .22), 0 0 18px rgba(61, 190, 255, .28);
}
.upgrade-save-status {
    grid-column: 1 / -1;
    min-height: 1.1em;
    text-align: center;
    font-size: .76rem;
    letter-spacing: .08em;
    color: rgba(190, 218, 234, .82);
}
.upgrade-save-status[data-level="good"] { color: #8dffd0; }
.upgrade-save-status[data-level="bad"] { color: #ff9b9b; }
@media (max-width: 760px) {
    .upgrade-action-bar { grid-template-columns: 1fr !important; }
    .upgrade-save-status { grid-column: 1; }
}


/* Save Inspector — Phase 2 */
.save-inspector-panel { margin-top:10px; padding:12px; border:1px solid rgba(95,205,255,.22); border-radius:12px; background:linear-gradient(180deg,rgba(5,20,32,.88),rgba(3,12,21,.92)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.save-inspector-panel[hidden] { display:none !important; }
.save-inspector-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.save-inspector-header strong { display:block; color:#ddf8ff; letter-spacing:.05em; }
.save-inspector-header span:not(.save-integrity-meter span) { display:block; margin-top:3px; color:#91afc1; font-size:11px; }
.save-integrity-meter { --integrity:0%; position:relative; width:62px; height:62px; flex:0 0 62px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#66e8c0 var(--integrity),rgba(110,150,170,.16) 0); box-shadow:0 0 18px rgba(55,205,190,.12); }
.save-integrity-meter::before { content:""; position:absolute; inset:6px; border-radius:50%; background:#07131e; border:1px solid rgba(130,215,245,.16); }
.save-integrity-meter span { position:relative; z-index:1; margin:0; color:#d9fff5; font-size:13px; font-weight:800; }
.save-inspector-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 14px; margin:12px 0; }
.save-inspector-details div { min-width:0; padding:7px 8px; border-radius:8px; background:rgba(90,150,180,.07); }
.save-inspector-details dt { color:#7896aa; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.save-inspector-details dd { margin:2px 0 0; color:#d9edf7; font-size:12px; overflow-wrap:anywhere; }
.save-slot-list { display:grid; gap:6px; }
.save-slot-card { display:grid; grid-template-columns:minmax(72px,.8fr) minmax(0,1.7fr) auto; align-items:center; gap:8px; padding:8px 9px; border-radius:8px; border:1px solid rgba(120,170,195,.13); background:rgba(255,255,255,.018); }
.save-slot-card strong { color:#cfe9f6; font-size:11px; }
.save-slot-card span { color:#8fa9b9; font-size:10px; line-height:1.25; }
.save-slot-card em { font-style:normal; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.save-slot-card.good em { color:#6cf0b8; }
.save-slot-card.bad em { color:#ff8798; }
.save-slot-card.empty em { color:#8096a5; }
.save-inspector-advice { margin:10px 0 0; color:#9fb8c8; font-size:11px; line-height:1.4; }
@media (max-width:620px) { .save-inspector-details { grid-template-columns:1fr; } .save-slot-card { grid-template-columns:72px 1fr; } .save-slot-card em { grid-column:2; } }

/* Phase 4: persistent save activity log */
.save-activity-panel { margin-top:12px; padding-top:12px; border-top:1px solid rgba(95,205,255,.18); }
.save-activity-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.save-activity-heading strong { display:block; color:#ddf8ff; letter-spacing:.04em; }
.save-activity-heading span { display:block; margin-top:3px; color:#7896aa; font-size:10px; }
.save-activity-heading button { padding:6px 9px; font-size:10px; }
.save-activity-empty { margin:10px 0 0; color:#7896aa; font-size:11px; }
.save-activity-list { display:grid; gap:7px; max-height:260px; margin:10px 0 0; padding:0; overflow:auto; list-style:none; }
.save-activity-item { padding:8px 9px; border:1px solid rgba(120,170,195,.15); border-left:3px solid #668396; border-radius:8px; background:rgba(90,150,180,.055); }
.save-activity-item.success { border-left-color:#65e6b2; }
.save-activity-item.warning, .save-activity-item.cancelled { border-left-color:#f1c36b; }
.save-activity-item.failed { border-left-color:#ff7373; }
.save-activity-item > div { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.save-activity-item strong { color:#d9edf7; font-size:11px; }
.save-activity-item time { color:#7896aa; font-size:9px; white-space:nowrap; }
.save-activity-item p { margin:4px 0 0; color:#9fb8c8; font-size:10px; line-height:1.35; }
@media (max-width:620px) { .save-activity-heading { align-items:flex-start; } .save-activity-item > div { display:block; } .save-activity-item time { display:block; margin-top:2px; } }


/* ========================================================================== */
/* Phase 5 — Living Seal save-health indicator                                */
/* ========================================================================== */
.save-inspector-identity { display:flex; align-items:center; gap:14px; min-width:0; }
.save-health-seal {
    --health-color:#63d8ff;
    --health-soft:rgba(99,216,255,.32);
    position:relative; width:58px; height:58px; flex:0 0 58px;
    filter:drop-shadow(0 0 9px var(--health-soft));
    transition:filter .25s ease, transform .25s ease;
}
.save-health-ring,.save-health-star,.save-health-core,.save-health-core>* { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); box-sizing:border-box; }
.save-health-ring { border-radius:50%; }
.save-health-ring.ring-outer { width:92%; height:92%; border:2px solid color-mix(in srgb,var(--health-color) 78%,transparent); border-left-color:transparent; animation:saveSealOrbit 8s linear infinite; }
.save-health-ring.ring-inner { width:70%; height:70%; border:1px dashed color-mix(in srgb,var(--health-color) 75%,transparent); animation:saveSealOrbit 5s linear infinite reverse; }
.save-health-star { width:80%; height:8px; border-radius:50%; background:linear-gradient(90deg,transparent,var(--health-color),#f7fdff,var(--health-color),transparent); clip-path:polygon(0 50%,42% 35%,50% 0,58% 35%,100% 50%,58% 65%,50% 100%,42% 65%); }
.save-health-star.star-b { transform:translate(-50%,-50%) rotate(45deg); }
.save-health-core { width:42%; height:42%; border-radius:50%; background:radial-gradient(circle,#faffff 0 8%,var(--health-color) 22%,color-mix(in srgb,var(--health-color) 35%,#07101d) 60%,#02060c 72%); box-shadow:0 0 12px var(--health-color), inset 0 0 8px rgba(255,255,255,.6); animation:saveSealBreathe 2.1s ease-in-out infinite; }
.save-health-core i { width:76%; height:32%; border:2px solid var(--health-color); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; }
.save-health-core i:nth-child(2){ transform:translate(-50%,-50%) rotate(120deg); }
.save-health-core i:nth-child(3){ transform:translate(-50%,-50%) rotate(240deg); }
.save-health-core b { width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 7px 3px var(--health-color); }
.save-health-seal.state-healthy { --health-color:#59d8ff; --health-soft:rgba(70,190,255,.45); }
.save-health-seal.state-saved { --health-color:#67ffab; --health-soft:rgba(61,255,145,.58); }
.save-health-seal.state-warning,.save-health-seal.state-recovery { --health-color:#ffd45f; --health-soft:rgba(255,194,61,.58); }
.save-health-seal.state-invalid,.save-health-seal.state-failed { --health-color:#ff6475; --health-soft:rgba(255,70,91,.62); }
.save-health-seal.state-migration { --health-color:#ba82ff; --health-soft:rgba(165,97,255,.62); }
.save-health-seal.signal { animation:saveSealSignal .72s ease-out 1; }
@keyframes saveSealOrbit { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes saveSealBreathe { 50% { transform:translate(-50%,-50%) scale(1.09); filter:brightness(1.3); } }
@keyframes saveSealSignal { 0%{transform:scale(1)} 35%{transform:scale(1.22);filter:drop-shadow(0 0 20px var(--health-color))} 100%{transform:scale(1)} }
@media (max-width:520px){ .save-health-seal{width:48px;height:48px;flex-basis:48px}.save-inspector-identity{gap:10px} }
@media (prefers-reduced-motion:reduce){ .save-health-seal *,.save-health-seal{animation:none!important} }


/* Gameplay seal and pause-glyph correction */
#topWaveCounter { display:flex; align-items:center; gap:9px; }
#topWaveCounter .wave-label { color:#d7ecff; white-space:nowrap; }
#topWaveCounter .wave-label #wave { color:#fff; }
.gameplay-seal { --seal-size:30px; position:relative; flex:0 0 30px; width:30px!important; height:30px!important; margin:0; overflow:visible; }
.gameplay-seal .splash-seal-ring-outer { animation-duration:12s; }
.gameplay-seal .splash-seal-ring-inner { animation-duration:7s; }
.gameplay-seal .splash-seal-core { animation-duration:2.1s; }
.gameplay-seal .splash-seal-wake { animation-duration:2.8s; }
.touch-pause-button { display:grid; place-items:center; line-height:1; font-size:0; overflow:hidden; }
.touch-pause-button > span { display:block; width:100%; transform:translateY(-1px); text-align:center; font-size:24px; line-height:1; font-weight:900; letter-spacing:-4px; padding-right:4px; }
@media (max-width:900px), (pointer:coarse) { .gameplay-seal { display:none; } }
@media (prefers-reduced-motion:reduce) { .gameplay-seal * { animation:none!important; } }

/* Green/Blue platform pass: preserve descriptive upgrade text without clipping. */
@media (min-width: 901px) and (pointer: fine) and (min-height: 761px) {
    .upgrade-system-section .upgrade-button {
        aspect-ratio: auto !important;
        min-height: 176px !important;
        height: auto !important;
    }
    .upgrade-system-section .upgrade-description,
    .upgrade-system-section .upgrade-stats {
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        min-height: 0;
    }
}

/* Public information-page links rendered beside menu buttons. */
.menu-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    font: inherit;
    border: 1px solid rgba(120,190,255,0.28);
    border-radius: 10px;
    padding: 10px 16px;
    background: rgba(40,80,130,0.28);
}
.menu-link-button:hover { background: rgba(70,130,200,0.34); }

/* Consent-ready public controls. Google renders the actual certified message. */
.consent-settings-button {
    font: inherit;
    color: inherit;
    border: 1px solid rgba(120, 190, 255, .28);
    border-radius: 10px;
    padding: 9px 13px;
    background: rgba(70, 140, 255, .08);
    text-decoration: none;
}
.consent-settings-button:hover,
.consent-settings-button:focus-visible { background: rgba(70, 140, 255, .16); }
.consent-status-toast {
    position: fixed;
    z-index: 100000;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(620px, calc(100% - 28px));
    padding: 12px 14px;
    border: 1px solid rgba(120, 190, 255, .42);
    border-radius: 12px;
    background: rgba(5, 10, 20, .97);
    color: #eaf5ff;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .42);
    font: 14px/1.45 system-ui, sans-serif;
    cursor: auto;
}
.consent-status-toast[hidden] { display: none; }