/* OldGames solo emulator — Command Center (2026-08).
   This is the authoritative presentation layer for the standalone player.
   EmulatorJS structure and controls remain untouched. */

:root {
    --ecc-bg: #050710;
    --ecc-panel: rgba(10, 14, 27, .94);
    --ecc-panel-2: rgba(16, 22, 39, .9);
    --ecc-line: rgba(128, 151, 205, .22);
    --ecc-line-hot: rgba(68, 226, 255, .48);
    --ecc-text: #f5f8ff;
    --ecc-muted: #8e9ab7;
    --ecc-cyan: #43e6ff;
    --ecc-blue: #70a2ff;
    --ecc-lime: #9af7b9;
    --ecc-pink: #ff5c91;
    --ecc-radius: 18px;
    --ecc-header: 76px;
    --ecc-left-rail: 288px;
    --ecc-right-rail: 174px;
}

body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) {
    --nexus-player-top: var(--ecc-header) !important;
    color: var(--ecc-text) !important;
    background: var(--ecc-bg) !important;
}

#og-bg-fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 540px at 9% -10%, rgba(67, 230, 255, .12), transparent 62%),
        radial-gradient(880px 580px at 96% 6%, rgba(112, 106, 255, .12), transparent 64%),
        linear-gradient(180deg, #080b15 0%, #050710 55%, #04050b 100%);
}

#og-bg-fx::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .34;
    background-image:
        linear-gradient(rgba(128, 151, 205, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128, 151, 205, .1) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 25%, #000, transparent 82%);
            mask-image: radial-gradient(ellipse at 50% 25%, #000, transparent 82%);
}

@media (min-width: 980px) {
    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #arcade-player-header {
        display: grid !important;
        grid-template-columns: auto minmax(240px, 1fr) auto !important;
        grid-template-rows: var(--ecc-header) !important;
        grid-template-areas: "nav hero tools" !important;
        align-items: center !important;
        gap: 18px !important;
        width: 100% !important;
        height: var(--ecc-header) !important;
        min-height: var(--ecc-header) !important;
        max-height: var(--ecc-header) !important;
        padding: 0 20px !important;
        overflow: visible !important;
        border: 0 !important;
        border-bottom: 1px solid var(--ecc-line) !important;
        border-radius: 0 !important;
        background: rgba(6, 9, 18, .94) !important;
        box-shadow: 0 12px 34px rgba(0, 0, 0, .36) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-nav-group {
        grid-area: nav !important;
        align-self: center !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-nav-btn {
        width: 48px !important;
        height: 48px !important;
        border-radius: 13px !important;
        border-color: var(--ecc-line) !important;
        background: rgba(255, 255, 255, .025) !important;
        box-shadow: none !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexus-player-hero {
        grid-area: hero !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        width: auto !important;
        height: var(--ecc-header) !important;
        padding: 0 !important;
        gap: 12px !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexus-player-hero .nexus-brandline {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        margin: 0 !important;
        gap: 12px !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexus-player-hero .nexus-live-code {
        position: static !important;
        order: 5 !important;
        transform: none !important;
        margin-left: 8px !important;
        white-space: nowrap !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexus-player-hero > .nexus-cover-holo,
    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexus-player-hero > .nexus-identity {
        display: none !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-header-tools {
        grid-area: tools !important;
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: var(--ecc-header) !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexusControllerChip {
        width: 218px !important;
        min-width: 190px !important;
        min-height: 52px !important;
        border-radius: 14px !important;
        background: var(--ecc-panel-2) !important;
        box-shadow: none !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-volume-control {
        width: auto !important;
        min-width: 222px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 1px solid var(--ecc-line) !important;
        border-radius: 13px !important;
        background: rgba(255, 255, 255, .025) !important;
    }

    /* Main frame: reserve a true rail on each side instead of floating panels
       over the game and centering against the full viewport. */
    html.nexus-player-active body.nexus-exact-player.game-active:not(:has(.mp-arena-v6)) #game-container#game-container,
    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #game-container {
        position: fixed !important;
        top: var(--ecc-header) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: calc(100dvh - var(--ecc-header)) !important;
        max-height: calc(100dvh - var(--ecc-header)) !important;
        padding: 18px calc(var(--ecc-right-rail) + 22px) 22px calc(var(--ecc-left-rail) + 24px) !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        overflow: hidden !important;
        contain: layout paint !important;
    }

    html.nexus-player-active body.nexus-exact-player.game-active:not(:has(.mp-arena-v6)) #game-display-area#game-display-area,
    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #game-display-area {
        width: min(100%, 1540px) !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-rows: 50px minmax(0, 1fr) !important;
        align-content: stretch !important;
        justify-items: stretch !important;
        overflow: hidden !important;
        border: 1px solid var(--ecc-line) !important;
        border-radius: 22px !important;
        background: rgba(5, 7, 15, .92) !important;
        box-shadow: 0 24px 64px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexus-live-hud {
        width: 100% !important;
        min-height: 50px !important;
        padding: 0 16px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--ecc-line) !important;
        border-radius: 0 !important;
        background: rgba(13, 18, 32, .92) !important;
        box-shadow: none !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexus-live-hud .mid {
        color: #cfd7ea !important;
        font-size: .68rem !important;
        letter-spacing: .08em !important;
    }

    html.nexus-player-active body.nexus-exact-player.game-active:not(:has(.mp-arena-v6)) #game#game {
        max-width: calc(100% - 30px) !important;
        max-height: calc(100% - 18px) !important;
        align-self: center !important;
        justify-self: center !important;
        border: 1px solid rgba(67, 230, 255, .36) !important;
        border-radius: 15px 15px 0 0 !important;
        overflow: hidden !important;
        background: #000 !important;
        box-shadow: 0 18px 48px rgba(0, 0, 0, .55), 0 0 24px rgba(67, 230, 255, .08) !important;
    }

    /* Now-playing rail */
    #og-nowplaying {
        position: fixed !important;
        top: calc(var(--ecc-header) + 18px) !important;
        left: 18px !important;
        z-index: 60 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: var(--ecc-left-rail) !important;
        min-height: 392px !important;
        max-height: 466px !important;
        padding: 15px !important;
        overflow: hidden !important;
        border: 1px solid var(--ecc-line) !important;
        border-radius: 20px !important;
        background: linear-gradient(160deg, rgba(16, 22, 39, .97), rgba(7, 10, 20, .97)) !important;
        box-shadow: 0 22px 58px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    #og-nowplaying::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 96px;
        pointer-events: none;
        background: radial-gradient(240px 100px at 15% 0%, rgba(67, 230, 255, .13), transparent 75%);
    }

    #og-nowplaying .og-np-head {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 22px;
    }

    #og-nowplaying .og-np-label {
        color: var(--ecc-cyan) !important;
        font: 800 .61rem/1 "Orbitron", system-ui, sans-serif !important;
        letter-spacing: .18em !important;
    }

    #og-nowplaying .og-np-live {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--ecc-muted);
        font: 800 .48rem/1 "Orbitron", system-ui, sans-serif;
        letter-spacing: .08em;
    }

    #og-nowplaying .og-np-live i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ecc-lime);
        box-shadow: 0 0 10px rgba(154, 247, 185, .62);
    }

    #og-nowplaying .og-np-cover-stage {
        position: relative;
        display: grid;
        place-items: center;
        width: 100%;
        min-height: 196px;
        padding: 16px 12px 12px;
        overflow: hidden;
        border: 1px solid var(--ecc-line);
        border-radius: 16px;
        background:
            radial-gradient(220px 120px at 50% 20%, rgba(67, 230, 255, .09), transparent 72%),
            rgba(3, 6, 14, .76);
    }

    #og-nowplaying .og-np-cover-stage::before {
        content: attr(data-label);
        position: absolute;
        top: 8px;
        left: 10px;
        color: #65728f;
        font: 800 .45rem/1 "Orbitron", system-ui, sans-serif;
        letter-spacing: .16em;
    }

    #og-nowplaying .nexus-cover-holo,
    #og-nowplaying .nexus-cover-holo .holo-card {
        width: 166px !important;
        height: 218px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    #og-nowplaying[data-cover-shape="wide"] .nexus-cover-holo,
    #og-nowplaying[data-cover-shape="wide"] .nexus-cover-holo .holo-card {
        width: 238px !important;
        height: 154px !important;
    }

    #og-nowplaying[data-cover-shape="square"] .nexus-cover-holo,
    #og-nowplaying[data-cover-shape="square"] .nexus-cover-holo .holo-card {
        width: 194px !important;
        height: 194px !important;
    }

    #og-nowplaying #nexusHeroCover {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        padding: 0 !important;
        object-fit: contain !important;
        object-position: center !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .44) !important;
        filter: none !important;
    }

    #og-nowplaying .nexus-cover-holo .glare,
    #og-nowplaying .nexus-cover-holo .scan,
    #og-nowplaying .nexus-cover-holo .seal,
    #og-nowplaying .nexus-cover-holo .ticket {
        display: none !important;
    }

    #og-nowplaying .nexus-identity {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 2px !important;
        gap: 7px !important;
        text-align: left !important;
        transform: none !important;
    }

    #og-nowplaying .nexus-identity .sys {
        display: flex !important;
        order: 1 !important;
        width: auto !important;
        margin: 0 !important;
        color: var(--ecc-cyan) !important;
        font: 800 .56rem/1 "Orbitron", system-ui, sans-serif !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
    }

    #og-nowplaying #nexusHeroTitle {
        display: flex !important;
        flex-wrap: wrap !important;
        order: 2 !important;
        gap: 0 6px !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: var(--ecc-text) !important;
        -webkit-text-fill-color: currentColor !important;
        font: 800 1rem/1.22 "Orbitron", system-ui, sans-serif !important;
        letter-spacing: .015em !important;
    }

    #og-nowplaying #nexusHeroTitle .w,
    #og-nowplaying #nexusHeroTitle .w b {
        display: inline !important;
        color: inherit !important;
        -webkit-text-fill-color: currentColor !important;
        font: inherit !important;
        text-shadow: none !important;
    }

    #og-nowplaying .nexus-identity .tag,
    #og-nowplaying .nexus-mini-stats {
        display: none !important;
    }

    #og-nowplaying .nexus-identity .chips {
        display: flex !important;
        order: 3 !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    #og-nowplaying .nexus-identity .chip {
        display: inline-flex !important;
        min-height: 24px !important;
        padding: 0 8px !important;
        border: 1px solid rgba(67, 230, 255, .23) !important;
        border-radius: 7px !important;
        color: #bfebf7 !important;
        background: rgba(67, 230, 255, .06) !important;
        font-size: .52rem !important;
    }

    #og-nowplaying .nexus-identity .chip.hot { display: none !important; }

    #og-nowplaying .og-np-facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding-top: 10px;
        border-top: 1px solid var(--ecc-line);
    }

    #og-nowplaying .og-np-facts span {
        display: grid;
        place-items: center;
        min-height: 38px;
        padding: 5px;
        border-radius: 9px;
        background: rgba(255, 255, 255, .025);
        text-align: center;
    }

    #og-nowplaying .og-np-facts b {
        color: var(--ecc-text);
        font: 800 .56rem/1 "Orbitron", system-ui, sans-serif;
    }

    #og-nowplaying .og-np-facts small {
        margin-top: 4px;
        color: var(--ecc-muted);
        font-size: .48rem;
        font-weight: 800;
        letter-spacing: .08em;
    }

    /* Related games become a compact library below the cover card. */
    html.nexus-player-active body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexus-related-mini {
        position: fixed !important;
        top: calc(var(--ecc-header) + 438px) !important;
        bottom: auto !important;
        left: 18px !important;
        z-index: 55 !important;
        width: var(--ecc-left-rail) !important;
        height: max(112px, calc(100dvh - var(--ecc-header) - 456px)) !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 13px !important;
        overflow: hidden !important;
        border: 1px solid var(--ecc-line) !important;
        border-radius: 18px !important;
        background: rgba(9, 13, 25, .95) !important;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .38) !important;
    }

    #nexus-related-mini .nexus-related-head {
        min-height: 28px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid var(--ecc-line) !important;
    }

    #nexus-related-mini .nexus-related-list {
        max-height: calc(100% - 36px) !important;
        overflow-y: auto !important;
        padding-right: 3px !important;
    }

    #nexus-related-mini .nexus-related-card {
        min-height: 56px !important;
        border-radius: 11px !important;
        border-color: transparent !important;
        background: rgba(255, 255, 255, .025) !important;
    }

    #nexus-related-mini .nexus-related-card:hover {
        border-color: var(--ecc-line-hot) !important;
        background: rgba(67, 230, 255, .06) !important;
        transform: none !important;
    }

    /* Action rail */
    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-action-dock {
        position: fixed !important;
        top: calc(var(--ecc-header) + 18px) !important;
        right: 18px !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 70 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: var(--ecc-right-rail) !important;
        padding: 48px 12px 12px !important;
        overflow: hidden !important;
        border: 1px solid var(--ecc-line) !important;
        border-radius: 20px !important;
        background: linear-gradient(180deg, rgba(15, 20, 36, .97), rgba(7, 10, 19, .97)) !important;
        box-shadow: 0 22px 54px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-action-dock::before {
        content: "GAME TOOLS" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: 38px !important;
        padding: 0 13px !important;
        border-bottom: 1px solid var(--ecc-line) !important;
        color: var(--ecc-cyan) !important;
        background: rgba(67, 230, 255, .035) !important;
        font: 800 .54rem/1 "Orbitron", system-ui, sans-serif !important;
        letter-spacing: .15em !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-action-dock .arcade-header-btn {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 9px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 54px !important;
        padding: 7px 10px !important;
        overflow: hidden !important;
        border: 1px solid var(--ecc-line) !important;
        border-radius: 12px !important;
        color: #cfd7e9 !important;
        background: rgba(255, 255, 255, .025) !important;
        box-shadow: none !important;
        font-size: .58rem !important;
        letter-spacing: .08em !important;
        text-align: left !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-action-dock .arcade-header-btn:hover {
        color: #fff !important;
        border-color: var(--ecc-line-hot) !important;
        background: rgba(67, 230, 255, .07) !important;
        box-shadow: none !important;
        transform: translateY(-1px) !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-action-dock .arcade-header-btn::after {
        display: none !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-action-dock .arcade-btn-icon {
        display: grid !important;
        place-items: center !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
        background: rgba(67, 230, 255, .08) !important;
        filter: none !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-action-dock .arcade-header-btn.primary {
        color: #041117 !important;
        border-color: transparent !important;
        background: linear-gradient(135deg, var(--ecc-cyan), var(--ecc-blue)) !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-action-dock .arcade-header-btn.primary .arcade-btn-icon {
        background: rgba(4, 17, 23, .1) !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-action-dock .arcade-header-btn.close {
        color: #fff !important;
        border-color: rgba(255, 92, 145, .32) !important;
        background: rgba(255, 92, 145, .09) !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-action-dock .arcade-header-btn.close:hover {
        border-color: rgba(255, 92, 145, .62) !important;
        background: rgba(255, 92, 145, .15) !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #chatToggleBtn.chat-toggle-btn {
        left: auto !important;
        right: 32px !important;
        bottom: 20px !important;
        transform: none !important;
    }
}

@media (min-width: 980px) and (max-width: 1360px) {
    :root {
        --ecc-left-rail: 248px;
        --ecc-right-rail: 156px;
    }

    #og-nowplaying {
        min-height: 352px !important;
        max-height: 412px !important;
    }

    #og-nowplaying .og-np-cover-stage { min-height: 164px; }
    #og-nowplaying[data-cover-shape="wide"] .nexus-cover-holo,
    #og-nowplaying[data-cover-shape="wide"] .nexus-cover-holo .holo-card { width: 206px !important; height: 134px !important; }
    #og-nowplaying .nexus-cover-holo,
    #og-nowplaying .nexus-cover-holo .holo-card { width: 142px !important; height: 184px !important; }

    html.nexus-player-active body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexus-related-mini {
        top: calc(var(--ecc-header) + 406px) !important;
        height: max(112px, calc(100dvh - var(--ecc-header) - 424px)) !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-action-dock .arcade-header-btn {
        min-height: 48px !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexusControllerChip {
        width: 190px !important;
        min-width: 170px !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-volume-control {
        min-width: 178px !important;
    }
}

/* Mobile keeps the established full-screen/touch behavior, while presenting
   the game identity as a compact, readable top card. */
@media (max-width: 979px) {
    /* The desktop rail can briefly exist after a live viewport change. Never let
       it become an unstyled block above the mobile game surface. */
    #og-nowplaying,
    html.nexus-player-active body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexus-related-mini {
        display: none !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #arcade-player-header {
        border-radius: 0 0 16px 16px !important;
        background: rgba(7, 10, 19, .95) !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .38) !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexus-player-hero {
        gap: 10px !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .nexus-cover-holo .holo-card,
    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) #nexusHeroCover {
        border-radius: 10px !important;
        object-fit: contain !important;
        background: rgba(3, 6, 14, .76) !important;
    }

    body.nexus-exact-player.arcade-player-ui:not(:has(.mp-arena-v6)) .arcade-action-dock {
        border-color: var(--ecc-line) !important;
        background: rgba(8, 11, 21, .94) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #og-nowplaying *,
    #nexus-related-mini *,
    .arcade-action-dock * {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* Namco System 12 keeps the standard Nexus player shell. Only the modern MAME
   canvas is isolated in a same-origin iframe inside the regular game surface. */
body.system12-nexus-runtime #game-display-area,
body.system12-nexus-runtime #game {
    min-width: 0 !important;
    min-height: 0 !important;
}

body.nexus-exact-player.arcade-player-ui.system12-nexus-runtime #game#game {
    position: absolute !important;
    top: 50px !important;
    right: 15px !important;
    bottom: 18px !important;
    left: 15px !important;
    z-index: 1 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #000 !important;
}

body.system12-nexus-runtime #system12-runtime-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
    background: #000;
}

body.system12-nexus-runtime.arcade-game-ready #loading {
    display: none !important;
}

/* Namco System 256 uses the same Nexus shell around a dedicated Play! 2x6
   iframe. Keep this separate from System 12 so the cores never conflict. */
body.system256-nexus-runtime #game-display-area,
body.system256-nexus-runtime #game { min-width:0 !important; min-height:0 !important; }
body.nexus-exact-player.arcade-player-ui.system256-nexus-runtime #game#game {
    position:absolute !important; top:50px !important; right:15px !important; bottom:18px !important; left:15px !important;
    z-index:1 !important; width:auto !important; height:auto !important; max-width:none !important; max-height:none !important;
    overflow:hidden !important; padding:0 !important; background:#000 !important;
}
body.system256-nexus-runtime #system256-runtime-frame { display:block; width:100%; height:100%; min-width:0; min-height:0; border:0; background:#000; }
body.system256-nexus-runtime.arcade-game-ready #loading { display:none !important; }

.system12-nexus-notice {
    position: fixed;
    z-index: 10020;
    right: calc(var(--ecc-right-rail, 184px) + 24px);
    bottom: 22px;
    max-width: min(430px, calc(100vw - 32px));
    padding: 12px 16px;
    border: 1px solid rgba(74, 220, 255, .42);
    border-radius: 12px;
    background: rgba(7, 12, 25, .96);
    box-shadow: 0 16px 46px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .05);
    color: #effcff;
    font: 700 11px "Barlow Condensed", sans-serif;
    letter-spacing: .07em;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
}

.system12-nexus-notice.is-visible { opacity: 1; transform: translateY(0); }
.system12-nexus-notice[data-kind="success"] { border-color: rgba(151, 255, 79, .48); color: #cfffab; }

.system12-performance-modal {
    position: fixed;
    z-index: 10030;
    inset: 0;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(2, 5, 14, .78);
    backdrop-filter: blur(12px);
}

.system12-performance-modal.is-open { display: grid; }

.system12-performance-card {
    width: min(680px, 100%);
    overflow: hidden;
    border: 1px solid rgba(67, 230, 255, .32);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(14, 20, 38, .99), rgba(8, 11, 23, .99));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .66), inset 0 1px rgba(255, 255, 255, .05);
    color: #f4fbff;
}

.system12-performance-card > header,
.system12-performance-card > footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-color: rgba(67, 230, 255, .16);
}

.system12-performance-card > header { justify-content: space-between; border-bottom: 1px solid rgba(67, 230, 255, .16); }
.system12-performance-card > footer { justify-content: flex-end; border-top: 1px solid rgba(67, 230, 255, .16); }
.system12-performance-card small { color: #43e6ff; font: 800 9px "Orbitron", sans-serif; letter-spacing: .16em; }
.system12-performance-card h2 { margin: 5px 0 0; font: 800 20px "Orbitron", sans-serif; }
.system12-performance-card button { min-height: 40px; cursor: pointer; padding: 0 15px; border: 1px solid rgba(67, 230, 255, .26); border-radius: 10px; color: #eafdff; background: rgba(67, 230, 255, .08); font: 800 10px "Orbitron", sans-serif; }
.system12-performance-card button:hover { border-color: rgba(67, 230, 255, .6); background: rgba(67, 230, 255, .14); }
.system12-performance-card button.danger { border-color: rgba(255, 92, 145, .34); color: #ffd8e4; background: rgba(255, 92, 145, .09); }
.system12-performance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; }
.system12-performance-grid article { display: grid; gap: 7px; min-height: 104px; align-content: center; padding: 15px; border: 1px solid rgba(67, 230, 255, .14); border-radius: 14px; background: rgba(255, 255, 255, .025); }
.system12-performance-grid strong { font: 800 14px "Orbitron", sans-serif; }
.system12-performance-grid span { color: #8895ae; font: 600 11px/1.45 "Barlow Condensed", sans-serif; letter-spacing: .04em; }

#system12FullscreenExit {
    position: fixed;
    z-index: 100040;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    display: none;
    width: 46px;
    height: 46px;
    cursor: pointer;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    color: #fff;
    background: rgba(4, 7, 16, .82);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .46);
    font: 400 28px/1 sans-serif;
}

body.app-fullscreen-emu.system12-nexus-runtime #system12FullscreenExit { display: grid; }

@media (max-width: 979px) {
    .system12-nexus-notice { right: 16px; bottom: 82px; left: 16px; }
    .system12-performance-grid { grid-template-columns: 1fr; }
    .system12-performance-card > footer { flex-wrap: wrap; }
}