/* Arcade cabinet stage: layout, controls, lifecycle projection, and motion. */
html.has-arcade-game-stage {
    overflow: hidden;
    overscroll-behavior: none;
}
body.has-arcade-game-stage {
    position: fixed;
    top: var(--arcade-stage-scroll-top, 0);
    right: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body.has-arcade-game-stage .arcade-container *,
body.has-arcade-game-stage > .sparkle {
    animation-play-state: paused;
}

body.has-arcade-game-stage > .ctl-p {
    display: none;
}

body.has-arcade-game-stage::before,
body.has-arcade-game-stage::after {
    visibility: hidden;
}
.game-card.card-available.is-stage-source {
    visibility: visible;
    transition: none;
    transform: none;
}
.game-card.is-stage-source .live-game-screen,
.game-card.is-stage-source .cabinet-screen {
    visibility: hidden;
}

.game-card.is-stage-source.is-stage-returning .live-game-screen,
.game-card.is-stage-source.is-stage-returning .cabinet-screen {
    visibility: visible;
}

.arcade-game-stage {
    --stage-active-ratio: 1.6667;
    --stage-safe-top: env(safe-area-inset-top, 0px);
    --stage-safe-right: env(safe-area-inset-right, 0px);
    --stage-safe-bottom: env(safe-area-inset-bottom, 0px);
    --stage-safe-left: env(safe-area-inset-left, 0px);
    --stage-header-budget: 4.25rem;
    position: fixed;
    inset: 50% auto auto 50%;
    width: min(
        calc(100vw - var(--stage-safe-left) - var(--stage-safe-right) - 1rem),
        calc((100vh - var(--stage-safe-top) - var(--stage-safe-bottom) - var(--stage-header-budget) - 1rem) * var(--stage-active-ratio))
    );
    width: min(
        calc(100dvw - var(--stage-safe-left) - var(--stage-safe-right) - 1rem),
        calc((100dvh - var(--stage-safe-top) - var(--stage-safe-bottom) - var(--stage-header-budget) - 1rem) * var(--stage-active-ratio))
    );
    max-width: none;
    max-height: calc(100dvh - var(--stage-safe-top) - var(--stage-safe-bottom) - 1rem);
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
    color: #fff;
    transform: translate(-50%, -50%);
}

.arcade-game-stage[open] {
    display: block;
}

.arcade-game-stage::backdrop {
    background: rgba(0, 0, 18, .78);
    backdrop-filter: none;
}

.arcade-game-stage.is-cabinet-launch::backdrop {
    animation: arcade-stage-backdrop-in 280ms linear both;
}

.arcade-game-stage.is-closing {
    pointer-events: none;
}

.arcade-game-stage.is-closing::backdrop {
    animation: arcade-stage-backdrop-out 360ms linear both;
}

.arcade-game-stage-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    border: clamp(5px, .7vw, 9px) ridge #8ca6ff;
    background: linear-gradient(145deg, #4d58a5, #10164f 10%, #060923 88%, #48518e);
    box-shadow: 0 0 0 4px #08091e, 0 24px 80px rgba(0, 0, 0, .72), 0 0 34px rgba(0, 255, 255, .24);
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center;
    will-change: transform, opacity;
}

.arcade-game-stage.is-cabinet-launch .arcade-game-stage-shell {
    animation: arcade-stage-from-source 430ms cubic-bezier(.2, .76, .24, 1) both;
}

.arcade-game-stage.is-closing .arcade-game-stage-shell {
    animation: arcade-stage-return-to-source 380ms cubic-bezier(.55, .02, .32, 1) both;
}

.arcade-game-stage-header {
    position: relative;
    z-index: 4;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .6rem;
    min-height: 3rem;
    padding: .52rem .65rem;
    border-bottom: 5px ridge #8ca6ff;
    background: linear-gradient(180deg, #303aa0, #141856);
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(.62rem, 1.4vw, .9rem);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    text-shadow: 2px 2px 0 #000;
    will-change: transform, opacity;
}

.arcade-game-stage-header strong {
    min-width: 0;
    overflow: hidden;
    color: #dff7ff;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .08em;
    text-shadow: 2px 2px 0 #030713;
}

.arcade-game-stage.is-cabinet-launch .arcade-game-stage-header {
    animation: arcade-stage-header-in 240ms steps(6, end) 180ms both;
}

.arcade-game-stage.is-closing .arcade-game-stage-header {
    animation: arcade-stage-header-out 160ms steps(4, end) both;
}

.arcade-game-stage-audio {
    position: relative;
    margin-left: auto;
    clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
    cursor: pointer;
}

.arcade-game-stage-audio[hidden] {
    display: block;
    visibility: hidden;
    pointer-events: none;
}

.arcade-game-stage-audio:active {
    box-shadow: inset 3px 3px 0 #061126;
    transform: translate(4px, 4px);
}

.arcade-game-stage-audio:focus-visible,
.arcade-game-stage-close:focus-visible {
    outline: 3px dashed #ffff00;
    outline-offset: 3px;
}

.arcade-game-stage-close {
    height: 38px;
    margin-left: 0;
    padding: .42rem .55rem;
    border: 3px solid #83dff1;
    background: linear-gradient(180deg, #173b68, #091b3b);
    box-shadow: inset -3px -3px 0 #07152e, inset 3px 3px 0 #356e89;
    color: #bff9ff;
    clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
    font: inherit;
    font-size: clamp(.48rem, 1vw, .68rem);
    cursor: pointer;
}

.arcade-game-stage-close:disabled {
    cursor: wait;
    filter: grayscale(.65);
    opacity: .7;
}

.arcade-game-stage-viewport {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    aspect-ratio: var(--stage-active-ratio);
    background: #02040f;
}

.arcade-game-stage-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    opacity: 0;
    transition: opacity 140ms linear;
    will-change: opacity;
}

.arcade-game-stage.is-frame-ready .arcade-game-stage-frame {
    opacity: 1;
}

.arcade-game-stage-status {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(93, 202, 255, .07) 3px 4px), #02040f;
    color: #fff06a;
    font: clamp(.58rem, 1.6vw, .82rem)/1.5 'Press Start 2P', monospace;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    opacity: 1;
    visibility: visible;
    transition: opacity 140ms linear, visibility 0s linear;
}

.arcade-game-stage.is-frame-ready .arcade-game-stage-status {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 140ms linear, visibility 0s linear 140ms;
}

.arcade-game-stage-status[hidden],
.arcade-game-stage-error[hidden],
.arcade-exit-confirm[hidden] {
    display: none;
}

.arcade-game-stage-loading {
    animation: arcade-stage-loading 840ms steps(4, end) infinite;
}

.arcade-game-stage-error {
    display: grid;
    justify-items: center;
    gap: 1rem;
    color: #ff7a91;
}

.arcade-game-stage-retry {
    min-height: 2.55rem;
    padding: .55rem .75rem;
    border: 3px outset #fff06a;
    background: #15235d;
    color: #fff06a;
    font: .58rem/1.35 'Press Start 2P', monospace;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .arcade-game-stage-audio:hover {
        background: #190d2c;
        color: #ffd36a;
    }

    .arcade-game-stage-close:hover {
        border-color: #fff06a;
        background: #183255;
        color: #fff06a;
    }

    .arcade-game-stage-retry:hover {
        background: #263781;
    }
}

.arcade-exit-confirm {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: grid;
    place-content: center;
    gap: 1.1rem;
    padding: 1.2rem;
    background: rgba(1, 3, 15, .9);
    color: #fff06a;
    font: clamp(.72rem, 2vw, 1rem)/1.5 'Press Start 2P', monospace;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
}

.arcade-exit-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem;
}

.arcade-exit-actions button {
    min-height: 2.7rem;
    padding: .58rem .72rem;
    border: 3px outset #8ca6ff;
    background: #15235d;
    color: #fff;
    font: clamp(.5rem, 1.2vw, .66rem)/1.35 'Press Start 2P', monospace;
    cursor: pointer;
}

.arcade-exit-actions .arcade-exit-leave {
    border-color: #ff8e9c;
    background: #861326;
}

@keyframes arcade-stage-from-source {
    from {
        opacity: .78;
        transform: translate(var(--stage-source-x, 0), var(--stage-source-y, 0)) scale(var(--stage-source-scale, .2));
    }
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes arcade-stage-return-to-source {
    from {
        opacity: var(--stage-close-from-opacity, 1);
        transform: var(--stage-close-from-transform, translate(0, 0) scale(1));
    }
    to {
        opacity: 0;
        transform: translate(var(--stage-return-x, 0), var(--stage-return-y, 0)) scale(var(--stage-return-scale, .2));
    }
}

@keyframes arcade-stage-backdrop-in {
    from { background: rgba(0, 0, 18, 0); }
    to { background: rgba(0, 0, 18, .78); }
}

@keyframes arcade-stage-backdrop-out {
    from { background: var(--stage-close-backdrop, rgba(0, 0, 18, .78)); }
    to { background: rgba(0, 0, 18, 0); }
}

@keyframes arcade-stage-header-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes arcade-stage-header-out {
    from {
        opacity: var(--stage-close-header-opacity, 1);
        transform: var(--stage-close-header-transform, translateY(0));
    }
    to { opacity: 0; transform: translateY(-8px); }
}

@keyframes arcade-stage-loading {
    50% { color: #6af5ff; }
}

/* Portrait gives game chrome room without changing either game's world bounds. */
@media (max-width: 600px) and (orientation: portrait) {
    .arcade-game-stage {
        width: calc(100dvw - var(--stage-safe-left) - var(--stage-safe-right) - 1rem);
        height: calc(100dvh - var(--stage-safe-top) - var(--stage-safe-bottom) - 1rem);
    }
    .arcade-game-stage-shell { height: 100%; }
    .arcade-game-stage-viewport { aspect-ratio: auto; }
}

@media (max-height: 560px) and (orientation: landscape) {
    .arcade-game-stage {
        --stage-header-budget: 3.65rem;
    }

    .arcade-game-stage-header {
        min-height: 2.35rem;
        padding: .28rem .42rem;
        border-bottom-width: 3px;
    }

}

@media (pointer: coarse) {
    .arcade-game-stage {
        --stage-header-budget: 4.25rem;
    }

    .arcade-game-stage-close,
    .arcade-game-stage-audio,
    .arcade-game-stage-retry,
    .arcade-exit-actions button {
        min-height: 44px;
        height: 44px;
    }

    .arcade-game-stage-audio {
        flex-basis: 44px;
        width: 44px;
    }

    .arcade-game-stage-audio:active,
    .arcade-game-stage-close:active,
    .arcade-game-stage-retry:active,
    .arcade-exit-actions button:active {
        border-style: inset;
        filter: brightness(1.12) saturate(1.06);
        transform: translate(2px, 2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .arcade-game-stage.is-cabinet-launch .arcade-game-stage-shell,
    .arcade-game-stage.is-closing .arcade-game-stage-shell,
    .arcade-game-stage.is-cabinet-launch .arcade-game-stage-header,
    .arcade-game-stage.is-closing .arcade-game-stage-header,
    .arcade-game-stage::backdrop,
    .arcade-game-stage-loading {
        animation: none;
    }

    .arcade-game-stage-status,
    .arcade-game-stage.is-frame-ready .arcade-game-stage-status {
        transition: none;
    }
}