/* Starbreaker Co-Pilot: isolated communication layer. Does not alter the HUD. */
#copilot-comm {
    position: absolute;
    left: clamp(178px, 19vw, 220px);
    top: max(8px, env(safe-area-inset-top));
    width: min(390px, 64vw);
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    z-index: 34;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-18px, 0, 0) scale(.985);
    transition: opacity .28s ease, transform .32s cubic-bezier(.2,.8,.2,1);
    visibility: hidden;
}
#copilot-comm.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    visibility: visible;
}
/* Upgrade Bay mode: Nova is intentionally persistent and above the
   stage overlay while the Upgrade UI is open. */ 
#copilot-comm.is-upgrade-mode {
    z-index: 60 !important;
    visibility: visible !important;
}
#copilot-comm.is-hiding {
    opacity: 0;
}
#copilot-portrait-frame {
    width: 72px;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(56,189,248,.75);
    border-radius: 18px;
    overflow: hidden;
    background: #06101d;
    box-shadow: 0 0 18px rgba(56,189,248,.18), inset 0 0 0 1px rgba(127,230,255,.08);
}
#copilot-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}
#copilot-message {
    min-width: 0;
    padding: 9px 11px 10px;
    border: 1px solid rgba(56,189,248,.42);
    border-radius: 5px 13px 13px 13px;
    background: rgba(5,12,24,.52);
    box-shadow: 0 0 16px rgba(37,169,255,.09), inset 0 0 0 1px rgba(56,189,248,.06);
}
#copilot-label {
    margin-bottom: 5px;
    color: #7fe6ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
#copilot-text {
    color: #e6f6ff;
    font-size: clamp(13px, 1.7vw, 17px);
    line-height: 1.28;
    font-weight: 600;
    letter-spacing: .01em;
}
#copilot-timer {
    margin-top: 7px;
    color: #7fe6ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    min-height: 12px;
}
#copilot-timer:empty { display: none; }
/* Original first-run touch briefing restored for Nova.
   Presentation preserved from the earlier validated Starbreaker hint. */
#touch-hint {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%) scale(0.96);
    width: min(340px, 86vw);
    padding: 20px 22px 18px;
    border-radius: 16px;
    background: rgba(8, 14, 26, 0.82);
    border: 1px solid rgba(56, 189, 248, 0.45);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12) inset,
                0 0 30px rgba(37, 169, 255, 0.22),
                0 18px 40px rgba(0,0,0,0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 40;
}
#touch-hint.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
#touch-hint::before {
    content: "";
    position: absolute;
    left: 10%; right: 10%; top: 0; height: 2px;
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8;
    opacity: 0.8;
}
#touch-hint .th-row {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 9px 2px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .45s ease;
}
#touch-hint .th-row.is-briefing-row {
    opacity: 1;
    transform: translateY(0);
}
#touch-hint .th-row + .th-row { border-top: 1px solid rgba(56, 189, 248, 0.14); }
#touch-hint .th-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#touch-hint .th-icon svg { width: 100%; height: 100%; }
#touch-hint .th-text { font-size: 13px; line-height: 1.4; color: #cbe4f5; }
#touch-hint .th-text b { color: #7fe6ff; font-weight: 700; }
#touch-hint .th-hairline {
    margin: 4px 0 2px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,0.4), transparent);
}
@media (max-width: 700px) {
    #touch-hint { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Gameplay HUD + Nova layout: vertical HUD low-left, wide Nova above it. */
@media (max-width: 700px) {
    /* Keep the four requested gameplay values together, vertically, below Nova. */
    #ui .hud-primary > .hud-stat.score,
    #ui .hud-primary > .hud-stat.stage,
    #ui .hud-primary > .hud-stat.coins,
    #ui .hud-primary > .hud-stat.hp-status,
    #ui .hud-primary > .hud-stat.shield-status {
        display: flex !important;
        position: absolute !important;
        left: max(7px, env(safe-area-inset-left)) !important;
        top: 76px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        flex: none !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        z-index: 13 !important;
        pointer-events: none !important;
        flex-direction: row !important;
    }
    #ui .hud-primary > .hud-stat.score { top: calc(76px + env(safe-area-inset-top)) !important; }
    #ui .hud-primary > .hud-stat.stage { top: calc(96px + env(safe-area-inset-top)) !important; }
    #ui .hud-primary > .hud-stat.coins { top: calc(116px + env(safe-area-inset-top)) !important; }
    #ui .hud-primary > .hud-stat.hp-status { top: calc(136px + env(safe-area-inset-top)) !important; }
    #ui .hud-primary > .hud-stat.shield-status { top: calc(156px + env(safe-area-inset-top)) !important; }

    #ui .hud-primary > .hud-stat .hud-label {
        display: inline !important;
        font-size: 7px !important;
        line-height: 1 !important;
        margin: 0 !important;
        color: #94a3b8 !important;
        text-shadow: 0 0 6px rgba(2,6,23,.95) !important;
    }
    #ui .hud-primary > .hud-stat .hud-value,
    #ui .hud-primary > .hud-stat .hud-value.coin-display {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 11px !important;
        line-height: 1 !important;
        text-shadow: 0 0 7px rgba(56,189,248,.55) !important;
    }
    #ui .hud-primary > .hud-stat.stage .hud-value { color: #c4b5fd !important; }
    #ui .hud-primary > .hud-stat.coins .hud-value { color: #fbbf24 !important; }
    #ui .hud-primary > .hud-stat.hp-status .hud-value { color: #86efac !important; }
    #ui .hud-primary > .hud-stat.shield-status .hud-value { color: #7dd3fc !important; }
    #ui .hud-primary > .hud-stat.coins .coin-icon {
        width: 10px !important;
        height: 12px !important;
        min-width: 10px !important;
        min-height: 12px !important;
    }

    /* TEST: let Nova span the full top width, including visually over the Pause button. */
    #copilot-comm {
        left: 0 !important;
        right: 0 !important;
        top: max(5px, env(safe-area-inset-top)) !important;
        width: 100% !important;
        max-width: none !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 6px !important;
        z-index: 34 !important;
    }
    #copilot-portrait-frame { width: 58px !important; border-radius: 11px !important; }
    #copilot-message {
        min-width: 0 !important;
        padding: 8px 10px 9px !important;
        border-radius: 5px 12px 12px 12px !important;
    }
    #copilot-label { font-size: 7px !important; margin-bottom: 3px !important; }
    #copilot-text { font-size: clamp(10px, 2.9vw, 14px) !important; line-height: 1.24 !important; }
    #copilot-timer { font-size: 7px !important; margin-top: 4px !important; min-height: 8px !important; }

    /* Extra-small phones: keep the full-width Nova lane and readable portrait. */
    @media (max-width: 360px) {
        #copilot-comm {
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            grid-template-columns: 52px minmax(0, 1fr) !important;
            gap: 5px !important;
        }
        #copilot-portrait-frame { width: 52px !important; }
        #copilot-text { font-size: clamp(9.5px, 3vw, 12px) !important; }
    }
}


/* Nova Upgrade Advisor — intentionally quiet: one recommendation, no controls. */
#copilot-comm.is-upgrade-mode {
    left: 50%;
    top: max(8px, env(safe-area-inset-top));
    width: min(420px, calc(100vw - 24px));
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 7px;
    transform: translate3d(-50%, 0, 0) scale(1);
}
#copilot-comm.is-upgrade-mode #copilot-portrait-frame {
    width: 46px;
    border-radius: 12px;
    border-color: rgba(103,232,249,.55);
    box-shadow: 0 0 14px rgba(56,189,248,.12);
}
#copilot-comm.is-upgrade-mode #copilot-message {
    padding: 7px 10px 8px;
    border-color: rgba(103,232,249,.28);
    border-radius: 8px 12px 12px 12px;
    background: rgba(3,10,24,.72);
    box-shadow: 0 6px 18px rgba(0,0,0,.16), inset 0 0 0 1px rgba(103,232,249,.035);
}
#copilot-comm.is-upgrade-mode #copilot-label {
    margin-bottom: 3px;
    font-size: 7px;
    letter-spacing: .16em;
}
#copilot-comm.is-upgrade-mode #copilot-text {
    font-size: clamp(11px, 1.45vw, 14px);
    line-height: 1.22;
    font-weight: 600;
}
#copilot-comm.is-upgrade-mode #copilot-timer { display: none; }

/* Single Nova recommendation: the existing purchase control remains the only action. */
.upgrade-card.nova-recommended {
    position: relative;
    border-color: rgba(103,232,249,.58) !important;
    box-shadow: 0 0 18px rgba(34,211,238,.11), inset 0 0 12px rgba(34,211,238,.035) !important;
}
.upgrade-card.nova-recommended::after {
    content: "NOVA RECOMMENDS";
    position: absolute;
    top: 6px;
    right: 7px;
    padding: 2px 5px;
    border: 1px solid rgba(103,232,249,.28);
    border-radius: 999px;
    color: rgba(165,243,252,.9);
    background: rgba(8,47,73,.58);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .10em;
    line-height: 1.2;
    pointer-events: none;
}
.upgrade-card .nova-recommended-button {
    border-color: rgba(103,232,249,.95) !important;
    color: #ecfeff !important;
    background: rgba(8,47,73,.9) !important;
    box-shadow: 0 0 10px rgba(34,211,238,.20), inset 0 0 8px rgba(34,211,238,.08);
    animation: nova-upgrade-pulse 1.8s ease-in-out infinite;
}
.upgrade-card .nova-recommended-button:disabled {
    animation: none;
}
@keyframes nova-upgrade-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(34,211,238,.16), inset 0 0 6px rgba(34,211,238,.05); }
    50% { box-shadow: 0 0 16px rgba(34,211,238,.32), inset 0 0 10px rgba(34,211,238,.10); }
}
@media (max-width: 699px) {
    #copilot-comm.is-upgrade-mode {
        width: min(360px, calc(100vw - 16px));
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 6px;
    }
    #copilot-comm.is-upgrade-mode #copilot-portrait-frame { width: 40px; border-radius: 10px; }
    #copilot-comm.is-upgrade-mode #copilot-message { padding: 6px 8px 7px; }
    #copilot-comm.is-upgrade-mode #copilot-text { font-size: clamp(10px, 3vw, 12px); }
    .upgrade-card.nova-recommended::after { top: 5px; right: 5px; font-size: 5.5px; }
}


/* ================================================================
   NOVA 2.0 VISUAL PASS
   One Nova, one fixed communication dock, every game context.
   ================================================================ */
#copilot-comm {
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    width: min(350px, calc(100vw - 20px)) !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 8px !important;
    z-index: 3100 !important;
    transform: translate3d(-10px, 0, 0) scale(.985);
}
#copilot-comm.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
}
#copilot-comm.is-upgrade-mode,
#copilot-comm.is-commander-mode {
    left: max(10px, env(safe-area-inset-left)) !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    width: min(350px, calc(100vw - 20px)) !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 8px !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    z-index: 3100 !important;
}
#copilot-portrait-frame {
    width: 58px !important;
    border-radius: 17px 17px 17px 6px !important;
    border-color: rgba(103,232,249,.62) !important;
    background: linear-gradient(145deg, rgba(8,22,39,.96), rgba(2,10,21,.92)) !important;
    box-shadow: 0 0 0 1px rgba(103,232,249,.07),
                0 0 20px rgba(34,211,238,.16),
                inset 0 0 16px rgba(34,211,238,.06) !important;
}
#copilot-message {
    position: relative;
    padding: 8px 12px 9px !important;
    border-radius: 6px 14px 14px 14px !important;
    border-color: rgba(103,232,249,.38) !important;
    background: linear-gradient(135deg, rgba(5,14,28,.93), rgba(5,18,32,.80)) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.22),
                inset 0 0 0 1px rgba(103,232,249,.045),
                0 0 18px rgba(34,211,238,.07) !important;
}
#copilot-message::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 99px;
    background: #67e8f9;
    box-shadow: 0 0 8px rgba(103,232,249,.65);
}
#copilot-label {
    margin-bottom: 4px !important;
    font-size: 8px !important;
    letter-spacing: .18em !important;
    color: #8beaff !important;
}
#copilot-text {
    font-size: clamp(12px, 1.6vw, 15px) !important;
    line-height: 1.28 !important;
    font-weight: 650 !important;
}

/* The Upgrade Bay now reserves a real Nova lane instead of moving Nova. */
#stage-screen .overlay-fit {
    padding-top: 72px;
    box-sizing: border-box;
}
#stage-screen .upgrade-ship-layout {
    min-height: 220px;
}
#stage-screen .upgrade-ship-art {
    width: 118px;
    height: 174px;
}
#stage-screen .upgrade-ship-glow {
    width: 132px;
    height: 132px;
}

/* Nova recommendation gets a dedicated row, never painted over card text. */
.upgrade-card.nova-recommended {
    padding-top: 8px !important;
    border-color: rgba(103,232,249,.76) !important;
    box-shadow: 0 0 22px rgba(34,211,238,.16), inset 0 0 14px rgba(34,211,238,.045) !important;
}
.upgrade-card.nova-recommended::after {
    display: none !important;
}
.nova-recommendation-badge {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    min-height: 18px;
    margin: 0 0 6px 0;
    padding: 2px 7px 2px 3px;
    border: 1px solid rgba(196,181,253,.42);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(46,26,74,.94), rgba(36,20,58,.82));
    box-shadow: 0 0 10px rgba(167,139,250,.14);
    color: #ddd6fe;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .105em;
    line-height: 1;
    pointer-events: none;
    text-transform: uppercase;
}
.nova-recommendation-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    overflow: hidden;
    border: 1px solid rgba(196,181,253,.68);
    border-radius: 50%;
    background: #061522;
    box-shadow: 0 0 7px rgba(167,139,250,.24);
}
.nova-recommendation-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}
.nova-recommendation-label {
    white-space: nowrap;
}
.upgrade-card.nova-recommended > strong {
    position: relative;
    z-index: 1;
}
.upgrade-card .nova-recommended-button {
    position: relative;
    z-index: 2;
    animation: nova-upgrade-pulse 2.2s ease-in-out infinite !important;
}

/* Nova tab flag: tells the player a recommendation is waiting in a
 * category they aren't currently viewing. Cleared the instant that tab
 * becomes active (see setUpgradeTab() calling novaSyncTabRecommendationBadge()
 * in starbreaker-core-state-base.js) — a pure "go look" signal, not a
 * persistent "until purchased" marker. */
.nova-tab-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 2px 5px;
    border: 1px solid rgba(196,181,253,.5);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(46,26,74,.96), rgba(36,20,58,.9));
    box-shadow: 0 0 8px rgba(167,139,250,.22);
    color: #ddd6fe;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 4;
}
@media (max-width: 699px) {
    .nova-tab-badge { top: -5px; right: -5px; font-size: 5.5px; padding: 1.5px 4px; }
}

/* Commander Deck uses the same Nova dock, so the screen makes room for her. */
#commander-screen .commander-shell {
    padding-top: 84px;
}

@media (max-width: 699px) {
    #copilot-comm,
    #copilot-comm.is-upgrade-mode,
    #copilot-comm.is-commander-mode {
        left: max(8px, env(safe-area-inset-left)) !important;
        top: max(8px, env(safe-area-inset-top)) !important;
        width: min(350px, calc(100vw - 16px)) !important;
        grid-template-columns: 60px minmax(0, 1fr) !important;
        gap: 8px !important;
    }
    #copilot-portrait-frame { width: 60px !important; border-radius: 17px 17px 17px 6px !important; }
    #copilot-message { padding: 8px 11px 9px !important; }
    #copilot-text { font-size: clamp(11px, 3vw, 14px) !important; }
    #copilot-label { font-size: 7px !important; }

    #stage-screen .overlay-fit { padding-top: 66px; }
    #stage-screen .upgrade-ship-layout {
        min-height: 205px;
        margin-top: 8px;
        margin-bottom: 10px;
    }
    #stage-screen .upgrade-ship-art { width: 102px; height: 150px; }
    #stage-screen .upgrade-ship-glow { width: 116px; height: 116px; }

    #commander-screen .commander-shell { padding-top: 76px; }
    .nova-recommendation-badge { min-height: 19px; margin-bottom: 6px; padding-right: 8px; font-size: 6.2px; }
    .nova-recommendation-icon { width: 15px; height: 15px; flex-basis: 15px; }
}


@media (max-width: 360px) {
    #copilot-comm,
    #copilot-comm.is-upgrade-mode,
    #copilot-comm.is-commander-mode {
        width: min(314px, calc(100vw - 12px)) !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 7px !important;
        left: 6px !important;
    }
    #copilot-portrait-frame { width: 52px !important; }
    #copilot-text { font-size: 10.5px !important; }
    #stage-screen .overlay-fit { padding-top: 60px; }
}


/* NOVA HEAT STATUS — restrained, mobile-first warning language. */
#copilot-comm.nova-heat-warning #copilot-portrait-frame {
    border-color: rgba(251,191,36,.58) !important;
    box-shadow: 0 0 0 1px rgba(251,191,36,.05), 0 0 20px rgba(245,158,11,.16), inset 0 0 16px rgba(245,158,11,.05) !important;
}
#copilot-comm.nova-heat-warning #copilot-message::before {
    background: #fbbf24 !important;
    box-shadow: 0 0 8px rgba(251,191,36,.55) !important;
}
#copilot-comm.nova-heat-critical #copilot-portrait-frame {
    border-color: rgba(249,115,22,.72) !important;
    box-shadow: 0 0 0 1px rgba(249,115,22,.06), 0 0 22px rgba(249,115,22,.20), inset 0 0 16px rgba(249,115,22,.06) !important;
}
#copilot-comm.nova-heat-critical #copilot-message::before,
#copilot-comm.nova-overheated #copilot-message::before {
    background: #fb923c !important;
    box-shadow: 0 0 9px rgba(251,146,60,.62) !important;
}
#copilot-comm.nova-overheated #copilot-portrait-frame {
    border-color: rgba(249,115,22,.82) !important;
    box-shadow: 0 0 0 1px rgba(249,115,22,.08), 0 0 26px rgba(249,115,22,.24), inset 0 0 18px rgba(249,115,22,.07) !important;
}
#copilot-comm.nova-overheated #copilot-label { color: #fdba74 !important; }

/* Nova recommendation slot: every upgrade card reserves the same top row.
 * This keeps all upgrade titles aligned whether Nova recommends the card or not.
 */
.upgrade-card {
    position: relative;
    padding-top: 26px !important;
}
.upgrade-card.nova-recommended {
    padding-top: 26px !important;
}
.nova-recommendation-badge {
    position: absolute !important;
    top: 6px;
    left: 8px;
    margin: 0 !important;
    z-index: 3;
}

@media (max-width: 699px) {
    .upgrade-card,
    .upgrade-card.nova-recommended {
        padding-top: 26px !important;
    }
    .nova-recommendation-badge {
        top: 5px;
        left: 6px;
    }
}


/* ================================================================
   NOVA / QM PERFORMANCE BRIDGE
   Nova remains readable at every quality level, but her decorative
   CSS work follows the same graphics quality manager as the canvas.
   This is intentionally CSS-only: no change to Nova's narration,
   timing, portrait, or gameplay behaviour.
   ================================================================ */

/* Low: remove blur/large shadows and non-essential motion. */
html[data-graphics-quality="low"] #copilot-comm,
html[data-graphics-quality="low"] #copilot-comm.is-visible {
    transition: opacity .12s ease !important;
    transform: none !important;
}

html[data-graphics-quality="low"] #copilot-portrait-frame,
html[data-graphics-quality="low"] #copilot-message {
    box-shadow: none !important;
}

html[data-graphics-quality="low"] #touch-hint {
    box-shadow: 0 0 0 1px rgba(56,189,248,.12) inset !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: opacity .12s ease !important;
}

html[data-graphics-quality="low"] #touch-hint::before {
    box-shadow: none !important;
}

html[data-graphics-quality="low"] .upgrade-card.nova-recommended,
html[data-graphics-quality="low"] .upgrade-card .nova-recommended-button {
    animation: none !important;
}

/* Medium: retain the Nova look, but drop the costly blur and pulses. */
html[data-graphics-quality="medium"] #touch-hint {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-graphics-quality="medium"] .upgrade-card.nova-recommended,
html[data-graphics-quality="medium"] .upgrade-card .nova-recommended-button {
    animation: none !important;
}

/* ================================================================
   NOVA BADGE FIX — V16.2.5
   Keep the recommendation badge inside its card and reserve a real
   top lane so it can never cover the upgrade title or neighbour cards.
   ================================================================ */
#stage-screen .upgrade-card {
    overflow: hidden !important;
}
#stage-screen .upgrade-card.nova-recommended {
    padding-top: 25px !important;
}
#stage-screen .upgrade-card .nova-recommendation-badge {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    right: 4px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 16px !important;
    min-height: 16px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 1px 4px 1px 2px !important;
    gap: 3px !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    font-size: 5px !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
}
#stage-screen .upgrade-card .nova-recommendation-icon {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
}
#stage-screen .upgrade-card .nova-recommendation-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 700px) {
    #stage-screen .upgrade-card.nova-recommended {
        padding-top: 24px !important;
    }
    #stage-screen .upgrade-card .nova-recommendation-badge {
        top: 3px !important;
        left: 3px !important;
        right: 3px !important;
        height: 15px !important;
        min-height: 15px !important;
        padding: 1px 3px 1px 2px !important;
        gap: 2px !important;
        border-radius: 6px !important;
        font-size: 4.5px !important;
        letter-spacing: .045em !important;
    }
    #stage-screen .upgrade-card .nova-recommendation-icon {
        width: 10px !important;
        height: 10px !important;
        flex-basis: 10px !important;
    }
}

/* ================================================================
   UPGRADE BAY — V16.2.6 readability / vertical balance pass
   Two upgrade cards per row so names and Nova badges have real room.
   The bay starts closer to Nova; return button gets more breathing room.
   ================================================================ */
#stage-screen .overlay-fit {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 118px !important;
    padding-bottom: 12px !important;
    box-sizing: border-box !important;
}

#stage-screen .upgrade-category {
    grid-template-columns: 150px minmax(0, 1fr) !important;
}

#stage-screen .upgrade-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#stage-screen .upgrade-card {
    min-height: 72px !important;
    padding: 27px 8px 7px !important;
}

#stage-screen .upgrade-card strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
}

#stage-screen .upgrade-card button {
    min-height: 24px !important;
}

#stage-screen .upgrade-return-btn {
    margin-top: 34px !important;
    margin-bottom: 12px !important;
}

@media (max-width: 700px) {
    #stage-screen .overlay-fit {
        padding-top: 112px !important;
        padding-bottom: 10px !important;
    }

    #stage-screen .upgrade-category {
        grid-template-columns: 86px minmax(0, 1fr) !important;
    }

    #stage-screen .upgrade-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    #stage-screen .upgrade-card {
        min-height: 66px !important;
        padding: 24px 5px 5px !important;
    }

    #stage-screen .upgrade-card strong {
        font-size: 7.5px !important;
        line-height: 1.12 !important;
        white-space: normal !important;
    }

    #stage-screen .upgrade-card button {
        min-height: 19px !important;
        font-size: 6.2px !important;
    }

    #stage-screen .upgrade-return-btn {
        margin-top: 30px !important;
        margin-bottom: 14px !important;
    }
}

@media (max-width: 360px) {
    #stage-screen .overlay-fit {
        padding-top: 108px !important;
    }

    #stage-screen .upgrade-card {
        min-height: 64px !important;
        padding-top: 23px !important;
    }
}

/* Upgrade Bay: Nova is part of the screen, not an optional transient popup. */
#copilot-comm.is-upgrade-mode {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}
@media (max-width: 699px) {
    #copilot-comm.is-upgrade-mode {
        width: min(360px, calc(100vw - 20px)) !important;
        grid-template-columns: 54px minmax(0, 1fr) !important;
        gap: 7px !important;
    }
}

/* ================================================================
   UPGRADE BAY — close button moved into the header (top-right corner)
   instead of a bottom "Return to Game" pill. Freed vertical space
   goes back to the upgrade grid. Ship + shield bubble also shrunk
   down to a sane, proportional size.
   ================================================================ */
#stage-screen .upgrade-header {
    position: relative;
    gap: 8px;
}
#stage-screen .upgrade-close-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex-shrink: 0;
    padding: 0;
    margin: 0 !important;
    border-radius: 50%;
    border: 1px solid rgba(248, 113, 113, 0.55);
    background: rgba(30, 10, 14, 0.65);
    color: #fecaca;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}
#stage-screen .upgrade-close-btn:hover {
    background: rgba(127, 29, 29, 0.55);
}
#stage-screen .upgrade-close-btn:active {
    transform: scale(0.92);
}

#stage-screen .upgrade-ship-layout {
    min-height: 150px !important;
    margin: 4px 0 6px !important;
}
#stage-screen .upgrade-ship-art {
    width: 84px !important;
    height: 124px !important;
}
#stage-screen .upgrade-ship-glow {
    width: 96px !important;
    height: 96px !important;
}
#stage-screen .upgrade-ship-layout .upgrade-ship-condition,
#stage-screen .upgrade-ship-layout .upgrade-ship-repair-fx {
    width: 84px !important;
    height: 124px !important;
}
#stage-screen .upgrade-ship-layout .upgrade-ship-shield {
    width: 128px !important;
    height: 190px !important;
}

@media (max-width: 700px) {
    #stage-screen .upgrade-ship-layout {
        min-height: 118px !important;
    }
    #stage-screen .upgrade-ship-art {
        width: 64px !important;
        height: 94px !important;
    }
    #stage-screen .upgrade-ship-glow {
        width: 74px !important;
        height: 74px !important;
    }
    #stage-screen .upgrade-ship-layout .upgrade-ship-condition,
    #stage-screen .upgrade-ship-layout .upgrade-ship-repair-fx {
        width: 64px !important;
        height: 94px !important;
    }
    #stage-screen .upgrade-ship-layout .upgrade-ship-shield {
        width: 98px !important;
        height: 146px !important;
    }
}


/* ===== Nova-foto: klein rond portret in kaarthoek (fix) ===== */

/* Uitleg zichtbaar op het upgrade-scherm */
#stage-screen .upgrade-card small {
    display: block !important;
    font-size: 8px !important;
    line-height: 1.3 !important;
    color: #cbd5e1 !important;
    min-height: 0 !important;
}
#stage-screen .upgrade-card,
#stage-screen .repair-card { position: relative; overflow: visible !important; }

/* Badge = alleen een klein rond foto'tje, rechtsboven in de kaarthoek */
#stage-screen .upgrade-card .nova-recommendation-badge,
#stage-screen .repair-card .nova-recommendation-badge,
.nova-recommendation-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    bottom: auto !important;
    left: auto !important;
    width: 26px !important;
    height: 26px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: block !important;
    z-index: 6 !important;
    pointer-events: none;
}
#stage-screen .upgrade-card .nova-recommendation-badge .nova-recommendation-icon,
#stage-screen .repair-card .nova-recommendation-badge .nova-recommendation-icon,
.nova-recommendation-badge .nova-recommendation-icon {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 2px solid rgba(196,181,253,.9) !important;
    border-radius: 50% !important;
    background: #061522 !important;
    box-shadow: 0 0 10px rgba(167,139,250,.5) !important;
}
#stage-screen .upgrade-card .nova-recommendation-badge .nova-recommendation-icon img,
#stage-screen .repair-card .nova-recommendation-badge .nova-recommendation-icon img,
.nova-recommendation-badge .nova-recommendation-icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center 42% !important;
}
.nova-recommendation-label { display: none !important; }

/* Aanbevolen kaart krijgt Nova's badge-kleur (paars) + ruimte voor de foto */
#stage-screen .upgrade-card.nova-recommended,
#stage-screen .repair-card.nova-recommended {
    padding-right: 24px !important;
    border-color: rgba(196,181,253,.85) !important;
    box-shadow: 0 0 20px rgba(167,139,250,.25), inset 0 0 14px rgba(167,139,250,.07) !important;
}

/* ===== Upgrade Bay vult het scherm (mobiel compacter) ===== */
@media (max-width: 700px) {
    #stage-screen .overlay-fit { padding-top: 82px !important; }
    #stage-screen .upgrade-ship-layout {
        min-height: 84px !important;
        margin: 0 0 4px !important;
    }
    #stage-screen .upgrade-ship-art { width: 56px !important; height: 82px !important; }
    #stage-screen .upgrade-ship-glow { width: 62px !important; height: 62px !important; }
    #stage-screen .upgrade-grid { gap: 5px !important; }
    #stage-screen .upgrade-category-grid { gap: 5px !important; }
    #stage-screen .upgrade-category { padding: 4px !important; gap: 4px !important; }
    #stage-screen .upgrade-card { padding: 5px 6px !important; }
    #stage-screen .upgrade-card button { min-height: 19px !important; }
    #stage-screen .upgrade-repair-row { gap: 4px !important; }
    #stage-screen .upgrade-category-header { padding: 3px !important; }
}


/* Nova spoken-voice control: placed inline in the existing Settings audio card. */
.copilot-voice-toggle {
    position: static;
    z-index: auto;
    pointer-events: auto;
    border: 1px solid rgba(56,189,248,.65);
    border-radius: 8px;
    padding: 7px 10px;
    color: #e6f6ff;
    background: rgba(5,12,24,.88);
    box-shadow: 0 0 14px rgba(37,169,255,.15);
    font: 800 10px/1.1 system-ui, sans-serif;
    letter-spacing: .06em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.copilot-voice-toggle[aria-pressed="false"] {
    color: #b8c7d4;
    border-color: rgba(148,163,184,.45);
    box-shadow: none;
}
.copilot-voice-toggle:focus-visible { outline: 2px solid #7fe6ff; outline-offset: 3px; }

/* ================================================================
   Upgrade Bay op desktop: gebruik de beschikbare ruimte.
   - breder paneel en 3 upgradekaarten per rij (minder hoog)
   - alles vergroot via --ubz (afhankelijk van schermhoogte), zodat de
     kleine teksten leesbaar worden. Alleen vanaf 701 px breed; gsm blijft zoals hij was.
   ================================================================ */
@media (min-width: 701px) {
    #stage-screen { --ubz: 1; }
    #stage-screen .overlay-fit { max-width: none !important; width: 100% !important; }
    #stage-screen .upgrade-panel {
        zoom: var(--ubz);
        width: min(1100px, calc(96vw / var(--ubz))) !important;
    }
}
@media (min-width: 1500px) {
    #stage-screen .upgrade-panel { width: min(1500px, calc(94vw / var(--ubz))) !important; }
    #stage-screen .upgrade-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    #stage-screen .upgrade-category { grid-template-columns: 170px minmax(0, 1fr) !important; }
}
@media (min-width: 1500px) and (min-height: 1000px) { #stage-screen { --ubz: 1.1; } }
@media (min-width: 1500px) and (min-height: 1080px) { #stage-screen { --ubz: 1.2; } }
@media (min-width: 1500px) and (min-height: 1200px) { #stage-screen { --ubz: 1.35; } }
@media (min-width: 1500px) and (min-height: 1350px) { #stage-screen { --ubz: 1.6; } }