.game-page {
    display: grid;
    gap: 24px;
}

.game-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.game-heading h1 {
    margin-bottom: 8px;
    font-size: clamp(2rem, 6vw, 4.4rem);
}

.arcade-player {
    width: min(100%, var(--game-width, 100%));
    max-width: var(--game-width, 100%);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #05070c;
    box-shadow: var(--shadow);
}

.arcade-player__stage {
    position: relative;
    width: 100%;
    aspect-ratio: var(--game-ratio, 4 / 3);
    min-height: 0;
    background: #020307;
}

.game-view .site-header {
    position: relative;
    top: auto;
}

.arcade-player:fullscreen {
    width: 100%;
    max-width: none;
    height: 100vh;
    border: 0;
    border-radius: 0;
}

.arcade-player:fullscreen .arcade-player__stage {
    height: calc(100vh - 66px);
    aspect-ratio: auto;
}

.arcade-player__frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

.arcade-player__start {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(5, 7, 12, .76);
}

.arcade-player__start[hidden] {
    display: none;
}

.arcade-player__start-button {
    min-width: 180px;
    font-size: 1.02rem;
}

.arcade-player__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    background: rgba(17, 23, 38, .96);
}

.arcade-player__meta,
.arcade-player__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.arcade-player__score {
    padding: 8px 11px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
}

.arcade-player__status {
    color: var(--muted);
    font-size: .9rem;
}

.arcade-player__status[data-state="running"],
.form-message[data-state="success"] {
    color: var(--accent-2);
}

.arcade-player__status[data-state="error"],
.form-message[data-state="error"] {
    color: #ff91a7;
}

.button--small {
    padding: 9px 12px;
    border-radius: 11px;
    font-size: .9rem;
}

.button--secondary {
    background: rgba(255,255,255,.07);
    box-shadow: none;
    border: 1px solid var(--line);
}

.button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.score-result {
    padding: 24px;
    border-top: 1px solid var(--line);
    background: rgba(124,92,255,.06);
}

.score-result[hidden] {
    display: none;
}

.score-result__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.score-result__value {
    font-size: clamp(2rem, 6vw, 3.6rem);
    font-weight: 900;
    letter-spacing: -.05em;
}

.score-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.score-form label span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: .9rem;
}

.score-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 12px 13px;
    background: rgba(255,255,255,.045);
    color: var(--text);
    outline: none;
}

.score-form__honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-message {
    grid-column: 1 / -1;
    min-height: 1.4em;
    margin: 0;
    font-size: .9rem;
}

.ranking-card {
    overflow: hidden;
}

.ranking-list {
    width: 100%;
    border-collapse: collapse;
}

.ranking-list th,
.ranking-list td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.ranking-list td:last-child,
.ranking-list th:last-child {
    text-align: right;
}

.legacy-notice {
    padding: 38px;
    text-align: center;
}

@media (max-width: 780px) {
    .game-heading,
    .arcade-player__bar,
    .score-result__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .arcade-player__stage {
        min-height: 0;
    }

    .score-form {
        grid-template-columns: 1fr;
    }
}

.port-notice{margin-bottom:12px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(41,211,162,.08);color:var(--muted)}


/*
 * Sobald ein Spiel läuft, darf das Start-Overlay weder sichtbar sein
 * noch Maus-/Touch-Eingaben abfangen.
 */
.arcade-player.is-running .arcade-player__start,
.arcade-player__start[hidden] {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Mobile arcade console */
.arcade-player__start-card {
    display: grid;
    justify-items: center;
    width: min(420px, calc(100% - 32px));
    padding: 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(21,27,43,.96), rgba(10,14,24,.96));
    box-shadow: 0 24px 70px rgba(0,0,0,.38);
    text-align: center;
}

.arcade-player__start-kicker {
    margin-bottom: 8px;
    color: var(--accent-2);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.arcade-player__start-title {
    font-size: clamp(1.45rem, 4vw, 2rem);
    letter-spacing: -.035em;
}

.arcade-player__start-copy {
    max-width: 34ch;
    margin: 9px 0 20px;
    font-size: .9rem;
    line-height: 1.55;
}

.arcade-player__touch-controls,
.arcade-player__orientation-hint,
.arcade-player__mobile-button,
.arcade-player__touch-toggle {
    display: none;
}

.arcade-player__touch-key {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    border: 1px solid rgba(255,255,255,.12);
    color: #f7f8fc;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.arcade-player__touch-key:active,
.arcade-player__touch-key.is-pressed {
    transform: translateY(2px) scale(.96);
    filter: brightness(1.18);
}

body.arcade-mobile-active {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

.arcade-player.is-mobile-play {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    width: 100%;
    max-width: none;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 50% -20%, rgba(124,92,255,.18), transparent 38%),
        #03050a;
    box-shadow: none;
}

.arcade-player.is-mobile-play .arcade-player__stage {
    align-self: center;
    justify-self: center;
    width: var(--mobile-stage-width, 100%);
    height: var(--mobile-stage-height, auto);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    border: 1px solid rgba(255,255,255,.08);
    background: #000;
    box-shadow: 0 18px 60px rgba(0,0,0,.38);
}

.arcade-player.is-mobile-play .arcade-player__bar {
    min-height: 58px;
    padding: 9px max(12px, env(safe-area-inset-right)) max(9px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-top-color: rgba(255,255,255,.08);
    background: rgba(8,11,18,.98);
}

.arcade-player.is-mobile-play .arcade-player__status {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arcade-player.is-mobile-play .score-result {
    display: none;
}

.arcade-player:fullscreen {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    height: 100dvh;
    background: #03050a;
}

.arcade-player:fullscreen .arcade-player__stage {
    align-self: center;
    justify-self: center;
    width: var(--mobile-stage-width, 100%);
    height: var(--mobile-stage-height, auto);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .game-page {
        gap: 18px;
    }

    .game-view .page-shell {
        width: min(100% - 20px, 1180px);
        padding-top: 28px;
    }

    .arcade-player {
        border-radius: 20px;
    }

    .arcade-player__start-card {
        width: min(360px, calc(100% - 22px));
        padding: 22px 18px;
        border-radius: 18px;
    }

    .arcade-player__start-button {
        width: 100%;
        min-height: 50px;
    }

    .arcade-player__mobile-button {
        display: inline-flex;
    }

    .arcade-player.is-mobile-play .arcade-player__touch-toggle,
    .arcade-player:fullscreen .arcade-player__touch-toggle {
        display: inline-flex;
    }

    .arcade-player.is-mobile-play.is-running:not(.is-touch-hidden) .arcade-player__touch-controls,
    .arcade-player:fullscreen.is-running:not(.is-touch-hidden) .arcade-player__touch-controls {
        display: grid;
    }

    .arcade-player__touch-controls {
        grid-template-columns: 126px minmax(70px, 1fr) 150px;
        align-items: center;
        gap: 14px;
        min-height: 148px;
        padding: 12px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
        border-top: 1px solid rgba(255,255,255,.08);
        background:
            linear-gradient(180deg, rgba(19,25,40,.98), rgba(8,11,18,.99));
    }

    .arcade-player__dpad {
        display: grid;
        grid-template-columns: repeat(3, 42px);
        grid-template-rows: repeat(3, 42px);
        width: 126px;
        height: 126px;
    }

    .arcade-player__touch-key:not(.arcade-player__touch-key--action) {
        display: grid;
        place-items: center;
        min-width: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 13px;
        background: linear-gradient(180deg, rgba(65,74,96,.95), rgba(32,39,55,.98));
        box-shadow: inset 0 1px rgba(255,255,255,.08), 0 5px 16px rgba(0,0,0,.22);
        font-size: 1.25rem;
    }

    .arcade-player__touch-key--up { grid-column: 2; grid-row: 1; }
    .arcade-player__touch-key--left { grid-column: 1; grid-row: 2; }
    .arcade-player__touch-key--right { grid-column: 3; grid-row: 2; }
    .arcade-player__touch-key--down { grid-column: 2; grid-row: 3; }

    .arcade-player__dpad-center {
        grid-column: 2;
        grid-row: 2;
        width: 28px;
        height: 28px;
        place-self: center;
        border-radius: 9px;
        background: rgba(255,255,255,.055);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }

    .arcade-player__touch-caption {
        display: grid;
        place-items: center;
        gap: 4px;
        color: var(--muted);
        text-align: center;
    }

    .arcade-player__touch-caption strong {
        color: #edf0f8;
        font-size: .8rem;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .arcade-player__touch-caption span {
        font-size: .67rem;
    }

    .arcade-player__action-pad {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        transform: rotate(-8deg);
    }

    .arcade-player__touch-key--action {
        display: grid;
        place-items: center;
        width: 66px;
        height: 66px;
        padding: 0;
        border-radius: 50%;
        background: linear-gradient(145deg, #7658f5, #4f37bf);
        box-shadow: inset 0 1px rgba(255,255,255,.16), 0 8px 22px rgba(42,25,108,.42);
    }

    .arcade-player__touch-key--action-b {
        margin-top: 24px;
        background: linear-gradient(145deg, #253047, #151c2b);
    }

    .arcade-player__touch-key--action strong,
    .arcade-player__touch-key--action small {
        display: block;
        line-height: 1;
    }

    .arcade-player__touch-key--action strong {
        font-size: 1.15rem;
    }

    .arcade-player__touch-key--action small {
        margin-top: 3px;
        color: rgba(255,255,255,.66);
        font-size: .52rem;
        font-weight: 800;
    }

    .arcade-player.is-mobile-play .arcade-player__bar,
    .arcade-player:fullscreen .arcade-player__bar {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .arcade-player.is-mobile-play .arcade-player__meta,
    .arcade-player:fullscreen .arcade-player__meta {
        min-width: 0;
        flex: 1;
        flex-wrap: nowrap;
    }

    .arcade-player.is-mobile-play .arcade-player__actions,
    .arcade-player:fullscreen .arcade-player__actions {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .arcade-player.is-mobile-play .button--small,
    .arcade-player:fullscreen .button--small {
        min-height: 40px;
        padding: 8px 10px;
        font-size: .78rem;
    }

    .arcade-player.is-mobile-play .arcade-player__mobile-button {
        border-color: rgba(255,92,124,.26);
        color: #ffd9e1;
    }
}

@media (max-width: 700px) and (orientation: portrait) {
    .arcade-player--landscape.is-mobile-play .arcade-player__orientation-hint,
    .arcade-player--landscape:fullscreen .arcade-player__orientation-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 38px;
        padding: 7px 14px;
        border-top: 1px solid rgba(255,255,255,.08);
        background: rgba(124,92,255,.11);
        color: #ece8ff;
        font-size: .78rem;
        text-align: center;
    }

    .arcade-player__orientation-hint span {
        font-size: 1.1rem;
    }

    .arcade-player__orientation-hint small {
        color: var(--muted);
    }

    .arcade-player__touch-controls {
        grid-template-columns: 116px 1fr 136px;
        min-height: 138px;
        gap: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .arcade-player__dpad {
        grid-template-columns: repeat(3, 38px);
        grid-template-rows: repeat(3, 38px);
        width: 114px;
        height: 114px;
    }

    .arcade-player__touch-key:not(.arcade-player__touch-key--action) {
        min-width: 38px;
        min-height: 38px;
    }

    .arcade-player__touch-key--action {
        width: 60px;
        height: 60px;
    }

    .arcade-player__touch-caption {
        display: none;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .arcade-player__touch-controls {
        grid-template-columns: 112px 1fr 136px;
        min-height: 118px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .arcade-player__dpad {
        grid-template-columns: repeat(3, 36px);
        grid-template-rows: repeat(3, 36px);
        width: 108px;
        height: 108px;
    }

    .arcade-player__touch-key:not(.arcade-player__touch-key--action) {
        min-width: 36px;
        min-height: 36px;
        border-radius: 11px;
    }

    .arcade-player__touch-key--action {
        width: 56px;
        height: 56px;
    }

    .arcade-player__touch-caption {
        display: none;
    }

    .arcade-player.is-mobile-play .arcade-player__bar,
    .arcade-player:fullscreen .arcade-player__bar {
        min-height: 50px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .arcade-player.is-mobile-play .arcade-player__status {
        display: none;
    }

    .arcade-player.is-mobile-play .arcade-player__score {
        padding: 7px 9px;
        font-size: .78rem;
        white-space: nowrap;
    }

    .arcade-player.is-mobile-play [data-arcade-fullscreen] {
        display: none;
    }

    .arcade-player:fullscreen .arcade-player__mobile-button {
        display: none;
    }
}

/* Immersive mobile player v2 */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    body.arcade-mobile-active {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #02040a;
    }

    .arcade-player.is-mobile-play,
    .arcade-player:fullscreen {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: block;
        width: 100%;
        max-width: none;
        height: 100dvh;
        min-height: 100svh;
        margin: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background:
            radial-gradient(circle at 50% 0%, rgba(124,92,255,.11), transparent 42%),
            #02040a;
        box-shadow: none;
    }

    .arcade-player.is-mobile-play .arcade-player__stage,
    .arcade-player:fullscreen .arcade-player__stage {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--mobile-stage-width, 100%);
        height: var(--mobile-stage-height, 100%);
        max-width: calc(100% - 8px);
        max-height: calc(100% - 8px);
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 18px;
        background: #000;
        box-shadow: 0 18px 70px rgba(0,0,0,.52);
        transform: translate(-50%, -50%);
        transition:
            width .18s ease,
            height .18s ease,
            opacity .18s ease,
            filter .18s ease,
            transform .18s ease;
    }

    .arcade-player.is-mobile-play .arcade-player__frame,
    .arcade-player:fullscreen .arcade-player__frame {
        width: 100%;
        height: 100%;
    }

    .arcade-player.is-mobile-play .arcade-player__bar,
    .arcade-player:fullscreen .arcade-player__bar {
        position: absolute;
        inset: 0;
        z-index: 30;
        display: block;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        pointer-events: none;
    }

    .arcade-player.is-mobile-play .arcade-player__meta,
    .arcade-player:fullscreen .arcade-player__meta {
        position: absolute;
        top: max(10px, env(safe-area-inset-top));
        left: max(10px, env(safe-area-inset-left));
        display: flex;
        width: auto;
        min-width: 0;
        pointer-events: auto;
    }

    .arcade-player.is-mobile-play .arcade-player__score,
    .arcade-player:fullscreen .arcade-player__score {
        padding: 8px 11px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 999px;
        background: rgba(7,10,17,.74);
        box-shadow: 0 8px 26px rgba(0,0,0,.22);
        color: #fff;
        font-size: .76rem;
        font-weight: 850;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .arcade-player.is-mobile-play .arcade-player__status,
    .arcade-player:fullscreen .arcade-player__status {
        display: none;
    }

    .arcade-player.is-mobile-play .arcade-player__actions,
    .arcade-player:fullscreen .arcade-player__actions {
        position: absolute;
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        display: flex;
        gap: 5px;
        padding: 5px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 15px;
        background: rgba(7,10,17,.72);
        box-shadow: 0 8px 30px rgba(0,0,0,.25);
        pointer-events: auto;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .arcade-player.is-mobile-play .arcade-player__actions .button,
    .arcade-player:fullscreen .arcade-player__actions .button {
        display: grid;
        place-items: center;
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        border: 0;
        border-radius: 11px;
        background: rgba(255,255,255,.075);
        box-shadow: none;
        color: #fff;
        font-size: 0;
    }

    .arcade-player.is-mobile-play .arcade-player__actions .button:hover,
    .arcade-player:fullscreen .arcade-player__actions .button:hover {
        transform: none;
    }

    .arcade-player.is-mobile-play [data-arcade-mobile]::before,
    .arcade-player:fullscreen [data-arcade-mobile]::before {
        content: "✕";
        font-size: 1rem;
        line-height: 1;
    }

    .arcade-player.is-mobile-play [data-arcade-touch-toggle]::before,
    .arcade-player:fullscreen [data-arcade-touch-toggle]::before {
        content: "⌁";
        font-size: 1.2rem;
        line-height: 1;
        transform: rotate(90deg);
    }

    .arcade-player.is-mobile-play [data-arcade-pause]::before,
    .arcade-player:fullscreen [data-arcade-pause]::before {
        content: "Ⅱ";
        font-size: .9rem;
        line-height: 1;
    }

    .arcade-player.is-mobile-play.is-paused [data-arcade-pause]::before,
    .arcade-player:fullscreen.is-paused [data-arcade-pause]::before {
        content: "▶";
        font-size: .82rem;
    }

    .arcade-player.is-mobile-play [data-arcade-fullscreen],
    .arcade-player:fullscreen [data-arcade-fullscreen] {
        display: none;
    }

    .arcade-player.is-mobile-play .arcade-player__touch-controls,
    .arcade-player:fullscreen .arcade-player__touch-controls {
        position: absolute;
        inset: 0;
        z-index: 18;
        display: block;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        pointer-events: none;
    }

    .arcade-player.is-mobile-play.is-touch-hidden .arcade-player__touch-controls,
    .arcade-player:fullscreen.is-touch-hidden .arcade-player__touch-controls {
        display: none !important;
    }

    .arcade-player.is-mobile-play .arcade-player__dpad,
    .arcade-player:fullscreen .arcade-player__dpad {
        position: absolute;
        bottom: max(14px, env(safe-area-inset-bottom));
        left: max(14px, env(safe-area-inset-left));
        display: grid;
        grid-template-columns: repeat(3, 44px);
        grid-template-rows: repeat(3, 44px);
        width: 132px;
        height: 132px;
        pointer-events: auto;
        filter: drop-shadow(0 10px 22px rgba(0,0,0,.28));
    }

    .arcade-player.is-mobile-play .arcade-player__touch-key:not(.arcade-player__touch-key--action),
    .arcade-player:fullscreen .arcade-player__touch-key:not(.arcade-player__touch-key--action) {
        min-width: 44px;
        min-height: 44px;
        border-color: rgba(255,255,255,.14);
        border-radius: 14px;
        background: rgba(17,23,38,.72);
        box-shadow:
            inset 0 1px rgba(255,255,255,.09),
            0 6px 18px rgba(0,0,0,.2);
        font-size: 1.25rem;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .arcade-player.is-mobile-play .arcade-player__dpad-center,
    .arcade-player:fullscreen .arcade-player__dpad-center {
        width: 30px;
        height: 30px;
        background: rgba(17,23,38,.54);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .arcade-player.is-mobile-play .arcade-player__touch-caption,
    .arcade-player:fullscreen .arcade-player__touch-caption {
        display: none;
    }

    .arcade-player.is-mobile-play .arcade-player__action-pad,
    .arcade-player:fullscreen .arcade-player__action-pad {
        position: absolute;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(18px, env(safe-area-inset-bottom));
        display: flex;
        align-items: flex-end;
        gap: 11px;
        transform: none;
        pointer-events: auto;
        filter: drop-shadow(0 10px 24px rgba(0,0,0,.28));
    }

    .arcade-player.is-mobile-play .arcade-player__touch-key--action,
    .arcade-player:fullscreen .arcade-player__touch-key--action {
        width: 62px;
        height: 62px;
        border-color: rgba(255,255,255,.16);
        background: rgba(89,64,213,.78);
        box-shadow:
            inset 0 1px rgba(255,255,255,.14),
            0 8px 22px rgba(42,25,108,.32);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .arcade-player.is-mobile-play .arcade-player__touch-key--action-b,
    .arcade-player:fullscreen .arcade-player__touch-key--action-b {
        margin-top: 0;
        transform: translateY(16px);
        background: rgba(17,23,38,.74);
    }

    .arcade-player.is-mobile-play .arcade-player__orientation-hint,
    .arcade-player:fullscreen .arcade-player__orientation-hint {
        display: none;
    }

    .arcade-player.is-mobile-play.needs-rotate .arcade-player__orientation-hint,
    .arcade-player:fullscreen.needs-rotate .arcade-player__orientation-hint {
        position: absolute;
        inset: 0;
        z-index: 22;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 0;
        padding:
            max(70px, env(safe-area-inset-top))
            24px
            max(36px, env(safe-area-inset-bottom));
        border: 0;
        background:
            radial-gradient(circle at 50% 44%, rgba(124,92,255,.18), transparent 34%),
            rgba(2,4,10,.91);
        color: #fff;
        text-align: center;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .arcade-player.is-mobile-play.needs-rotate .arcade-player__orientation-hint span,
    .arcade-player:fullscreen.needs-rotate .arcade-player__orientation-hint span {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        margin-bottom: 4px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 18px;
        background: rgba(255,255,255,.06);
        font-size: 1.85rem;
    }

    .arcade-player.is-mobile-play.needs-rotate .arcade-player__orientation-hint strong,
    .arcade-player:fullscreen.needs-rotate .arcade-player__orientation-hint strong {
        font-size: 1.1rem;
        letter-spacing: -.02em;
    }

    .arcade-player.is-mobile-play.needs-rotate .arcade-player__orientation-hint small,
    .arcade-player:fullscreen.needs-rotate .arcade-player__orientation-hint small {
        max-width: 30ch;
        color: rgba(238,240,248,.68);
        font-size: .78rem;
        line-height: 1.45;
    }

    .arcade-player.is-mobile-play.needs-rotate .arcade-player__stage,
    .arcade-player:fullscreen.needs-rotate .arcade-player__stage {
        opacity: .16;
        filter: blur(2px);
        transform: translate(-50%, -50%) scale(.96);
    }

    .arcade-player.is-mobile-play.needs-rotate .arcade-player__meta,
    .arcade-player:fullscreen.needs-rotate .arcade-player__meta,
    .arcade-player.is-mobile-play.needs-rotate [data-arcade-touch-toggle],
    .arcade-player:fullscreen.needs-rotate [data-arcade-touch-toggle],
    .arcade-player.is-mobile-play.needs-rotate [data-arcade-pause],
    .arcade-player:fullscreen.needs-rotate [data-arcade-pause],
    .arcade-player.is-mobile-play.needs-rotate .arcade-player__touch-controls,
    .arcade-player:fullscreen.needs-rotate .arcade-player__touch-controls {
        display: none !important;
    }
}

@media (max-height: 520px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .arcade-player.is-mobile-play .arcade-player__stage,
    .arcade-player:fullscreen .arcade-player__stage {
        border-radius: 13px;
    }

    .arcade-player.is-mobile-play .arcade-player__actions,
    .arcade-player:fullscreen .arcade-player__actions {
        top: max(7px, env(safe-area-inset-top));
        right: max(7px, env(safe-area-inset-right));
        padding: 4px;
        border-radius: 13px;
    }

    .arcade-player.is-mobile-play .arcade-player__actions .button,
    .arcade-player:fullscreen .arcade-player__actions .button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        border-radius: 10px;
    }

    .arcade-player.is-mobile-play .arcade-player__meta,
    .arcade-player:fullscreen .arcade-player__meta {
        top: max(7px, env(safe-area-inset-top));
        left: max(7px, env(safe-area-inset-left));
    }

    .arcade-player.is-mobile-play .arcade-player__dpad,
    .arcade-player:fullscreen .arcade-player__dpad {
        bottom: max(9px, env(safe-area-inset-bottom));
        left: max(10px, env(safe-area-inset-left));
        grid-template-columns: repeat(3, 40px);
        grid-template-rows: repeat(3, 40px);
        width: 120px;
        height: 120px;
    }

    .arcade-player.is-mobile-play .arcade-player__touch-key:not(.arcade-player__touch-key--action),
    .arcade-player:fullscreen .arcade-player__touch-key:not(.arcade-player__touch-key--action) {
        min-width: 40px;
        min-height: 40px;
        border-radius: 12px;
    }

    .arcade-player.is-mobile-play .arcade-player__action-pad,
    .arcade-player:fullscreen .arcade-player__action-pad {
        right: max(11px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    .arcade-player.is-mobile-play .arcade-player__touch-key--action,
    .arcade-player:fullscreen .arcade-player__touch-key--action {
        width: 56px;
        height: 56px;
    }
}

/* Mobile viewport auto-fit v3
   Der Game-Viewport folgt der tatsächlich sichtbaren Browserfläche statt einem
   statischen Seitenverhältnis aus der Spieleverwaltung. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .arcade-player.is-mobile-play,
    .arcade-player:fullscreen {
        inset: 0 auto auto 0;
        width: var(--mobile-viewport-width, 100vw);
        max-width: none;
        height: var(--mobile-viewport-height, 100dvh);
        min-height: 0;
    }

    .arcade-player.is-mobile-play .arcade-player__stage,
    .arcade-player:fullscreen .arcade-player__stage {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none;
        transition: opacity .18s ease, filter .18s ease;
    }

    .arcade-player.is-mobile-play .arcade-player__frame,
    .arcade-player:fullscreen .arcade-player__frame {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        border: 0;
        border-radius: 0;
    }

    .arcade-player.is-mobile-play.needs-rotate .arcade-player__stage,
    .arcade-player:fullscreen.needs-rotate .arcade-player__stage {
        transform: none;
    }
}


/* Flash touch controller v4
   Legacy-SWFs erhalten auf Touch-Geräten automatisch einen bedienbaren Controller. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-controls,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-controls {
        display: block;
    }

    .arcade-player.is-flash-game .arcade-player__touch-key {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    .arcade-player.is-flash-game .arcade-player__touch-key--start {
        display: grid;
        place-items: center;
        align-self: center;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        padding: 0;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 15px;
        background: rgba(17,23,38,.72);
        color: #fff;
        box-shadow: inset 0 1px rgba(255,255,255,.09), 0 6px 18px rgba(0,0,0,.2);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        touch-action: none;
    }

    .arcade-player.is-flash-game .arcade-player__touch-key--start strong,
    .arcade-player.is-flash-game .arcade-player__touch-key--start small {
        display: block;
        line-height: 1;
    }

    .arcade-player.is-flash-game .arcade-player__touch-key--start strong {
        font-size: 1rem;
    }

    .arcade-player.is-flash-game .arcade-player__touch-key--start small {
        margin-top: 3px;
        font-size: .52rem;
        color: rgba(255,255,255,.62);
    }

    .arcade-player.is-flash-game .arcade-player__touch-key--start:active,
    .arcade-player.is-flash-game .arcade-player__touch-key--start.is-pressed {
        transform: translateY(1px) scale(.96);
        background: rgba(61,72,99,.9);
    }
}

@media (max-height: 520px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .arcade-player.is-flash-game .arcade-player__touch-key--start {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        border-radius: 13px;
    }
}

/* Adaptive Flash Gamepad v7
   Portrait: HUD, Spielflaeche und Controller werden getrennt, damit keine
   Touch-Taste das eigentliche Spiel verdeckt. Landscape bleibt als kompaktes
   Daumen-Overlay erhalten. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden),
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) {
        --flash-hud-height: clamp(56px, 7.5dvh, 66px);
        --flash-dock-height: clamp(142px, 18dvh, 172px);
        --flash-pad-key: clamp(42px, 11vw, 48px);
        --flash-action-key: clamp(56px, 15vw, 66px);
    }

    .arcade-player.is-flash-game.is-mobile-play [data-arcade-fullscreen],
    .arcade-player.is-flash-game:fullscreen [data-arcade-fullscreen] {
        display: none !important;
    }

    .arcade-player.is-flash-game.is-mobile-play [data-arcade-touch-toggle]::before,
    .arcade-player.is-flash-game:fullscreen [data-arcade-touch-toggle]::before {
        content: "⌘";
        font-size: .92rem;
        transform: none;
    }
}

@media (max-width: 900px) and (orientation: portrait),
       (hover: none) and (pointer: coarse) and (orientation: portrait) {
    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__stage,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__stage {
        top: var(--flash-hud-height);
        left: 0;
        width: 100%;
        height: calc(100% - var(--flash-hud-height) - var(--flash-dock-height));
        max-width: none;
        max-height: none;
        border: 0;
        border-radius: 0;
        transform: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__bar,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__bar {
        position: absolute;
        inset: 0 0 auto 0;
        z-index: 32;
        display: block;
        width: 100%;
        height: var(--flash-hud-height);
        min-height: 0;
        padding: 0;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
        background: rgba(5,8,14,.93);
        box-shadow: 0 8px 28px rgba(0,0,0,.2);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        pointer-events: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__meta,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__meta {
        position: absolute;
        top: 50%;
        left: max(12px, env(safe-area-inset-left));
        transform: translateY(-50%);
        pointer-events: auto;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__score,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__score {
        padding: 7px 10px;
        border-color: rgba(255,255,255,.08);
        background: rgba(255,255,255,.055);
        box-shadow: none;
        font-size: .75rem;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__actions,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__actions {
        position: absolute;
        top: 50%;
        right: max(10px, env(safe-area-inset-right));
        transform: translateY(-50%);
        display: flex;
        gap: 5px;
        padding: 4px;
        border-radius: 13px;
        background: rgba(255,255,255,.045);
        box-shadow: none;
        pointer-events: auto;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__actions .button,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__actions .button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        border-radius: 10px;
        background: rgba(255,255,255,.07);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-controls,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-controls {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 24;
        display: block;
        width: 100%;
        height: var(--flash-dock-height);
        min-height: 0;
        padding: 0;
        border: 0;
        border-top: 1px solid rgba(255,255,255,.075);
        background:
            radial-gradient(circle at 18% 50%, rgba(124,92,255,.09), transparent 32%),
            radial-gradient(circle at 82% 50%, rgba(41,211,162,.055), transparent 28%),
            linear-gradient(180deg, rgba(10,14,24,.97), rgba(5,8,14,.99));
        box-shadow: 0 -14px 34px rgba(0,0,0,.22);
        pointer-events: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__dpad,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__dpad {
        position: absolute;
        top: 50%;
        bottom: auto;
        left: max(18px, env(safe-area-inset-left));
        display: grid;
        grid-template-columns: repeat(3, var(--flash-pad-key));
        grid-template-rows: repeat(3, var(--flash-pad-key));
        width: calc(var(--flash-pad-key) * 3);
        height: calc(var(--flash-pad-key) * 3);
        transform: translateY(-50%);
        filter: none;
        pointer-events: auto;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key:not(.arcade-player__touch-key--action):not(.arcade-player__touch-key--start),
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key:not(.arcade-player__touch-key--action):not(.arcade-player__touch-key--start) {
        min-width: var(--flash-pad-key);
        min-height: var(--flash-pad-key);
        border-radius: clamp(12px, 3.4vw, 15px);
        border-color: rgba(255,255,255,.105);
        background: linear-gradient(180deg, rgba(46,55,76,.92), rgba(25,32,47,.96));
        box-shadow: inset 0 1px rgba(255,255,255,.08), 0 5px 14px rgba(0,0,0,.18);
        font-size: clamp(1.05rem, 5vw, 1.35rem);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__dpad-center,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__dpad-center {
        width: calc(var(--flash-pad-key) * .64);
        height: calc(var(--flash-pad-key) * .64);
        border-radius: 10px;
        background: rgba(255,255,255,.045);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__action-pad,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__action-pad {
        position: absolute;
        top: 50%;
        right: max(18px, env(safe-area-inset-right));
        bottom: auto;
        display: block;
        width: clamp(148px, 38vw, 176px);
        height: calc(var(--flash-action-key) * 1.65);
        transform: translateY(-50%);
        filter: none;
        pointer-events: auto;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--action,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--action {
        position: absolute;
        width: var(--flash-action-key);
        height: var(--flash-action-key);
        border-color: rgba(255,255,255,.13);
        box-shadow: inset 0 1px rgba(255,255,255,.13), 0 7px 18px rgba(0,0,0,.2);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--action-a,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--action-a {
        top: 0;
        right: 0;
        background: linear-gradient(145deg, rgba(119,87,245,.98), rgba(78,54,190,.98));
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--action-b,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--action-b {
        left: 24%;
        bottom: 0;
        margin: 0;
        transform: none;
        background: linear-gradient(145deg, rgba(40,49,70,.98), rgba(20,27,41,.98));
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--start,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--start {
        position: absolute;
        top: 10px;
        left: 0;
        width: 54px;
        min-width: 54px;
        height: 36px;
        min-height: 36px;
        border-radius: 12px;
        border-color: rgba(255,255,255,.1);
        background: rgba(255,255,255,.055);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--start strong,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--start strong {
        font-size: .82rem;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--start small,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--start small,
    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--action small,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--action small {
        display: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--action strong,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--action strong {
        font-size: clamp(1.05rem, 5vw, 1.35rem);
    }
}

@media (max-height: 650px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden),
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) {
        --flash-pad-key: clamp(36px, 8.5vh, 42px);
        --flash-action-key: clamp(48px, 12vh, 56px);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__dpad,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__dpad {
        bottom: max(10px, env(safe-area-inset-bottom));
        left: max(12px, env(safe-area-inset-left));
        grid-template-columns: repeat(3, var(--flash-pad-key));
        grid-template-rows: repeat(3, var(--flash-pad-key));
        width: calc(var(--flash-pad-key) * 3);
        height: calc(var(--flash-pad-key) * 3);
        opacity: .88;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key:not(.arcade-player__touch-key--action):not(.arcade-player__touch-key--start),
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key:not(.arcade-player__touch-key--action):not(.arcade-player__touch-key--start) {
        min-width: var(--flash-pad-key);
        min-height: var(--flash-pad-key);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__action-pad,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__action-pad {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        width: 136px;
        height: 92px;
        opacity: .9;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--action,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--action {
        width: var(--flash-action-key);
        height: var(--flash-action-key);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--start,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--start {
        width: 46px;
        min-width: 46px;
        height: 32px;
        min-height: 32px;
    }
}

/* Compact Handheld Gamepad v8
   Portrait uses a shallow ergonomic dock: connected D-pad, centered Start,
   compact A/B cluster. This intentionally overrides the v7 portrait dock. */
@media (max-width: 900px) and (orientation: portrait),
       (hover: none) and (pointer: coarse) and (orientation: portrait) {
    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden),
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) {
        --flash-hud-height: clamp(50px, 6.2dvh, 58px);
        --flash-dock-height: clamp(112px, 14.5dvh, 132px);
        --flash-pad-key: clamp(34px, 9.6vw, 40px);
        --flash-action-key: clamp(50px, 13.5vw, 58px);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__stage,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__stage {
        top: var(--flash-hud-height);
        height: calc(100% - var(--flash-hud-height) - var(--flash-dock-height));
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-controls,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-controls {
        height: var(--flash-dock-height);
        display: grid;
        grid-template-columns: minmax(118px, 1fr) auto minmax(118px, 1fr);
        align-items: center;
        gap: clamp(8px, 2.5vw, 14px);
        padding:
            7px max(10px, env(safe-area-inset-right))
            max(7px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
        background:
            radial-gradient(circle at 14% 50%, rgba(124,92,255,.07), transparent 28%),
            radial-gradient(circle at 86% 50%, rgba(124,92,255,.055), transparent 26%),
            linear-gradient(180deg, rgba(8,11,19,.985), rgba(3,5,10,.995));
        box-shadow: 0 -10px 28px rgba(0,0,0,.18);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__dpad,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__dpad {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        justify-self: start;
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: repeat(3, var(--flash-pad-key));
        grid-template-rows: repeat(3, var(--flash-pad-key));
        width: calc(var(--flash-pad-key) * 3);
        height: calc(var(--flash-pad-key) * 3);
        transform: none;
        border-radius: 18px;
        filter: drop-shadow(0 7px 16px rgba(0,0,0,.18));
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key:not(.arcade-player__touch-key--action):not(.arcade-player__touch-key--start),
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key:not(.arcade-player__touch-key--action):not(.arcade-player__touch-key--start) {
        min-width: var(--flash-pad-key);
        min-height: var(--flash-pad-key);
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 5px;
        background: linear-gradient(180deg, rgba(47,56,77,.96), rgba(24,31,45,.99));
        box-shadow: inset 0 1px rgba(255,255,255,.075);
        font-size: clamp(.96rem, 4.6vw, 1.2rem);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--up,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--up {
        border-radius: 13px 13px 4px 4px;
        border-bottom-color: rgba(255,255,255,.035);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--left,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--left {
        border-radius: 13px 4px 4px 13px;
        border-right-color: rgba(255,255,255,.035);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--right,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--right {
        border-radius: 4px 13px 13px 4px;
        border-left-color: rgba(255,255,255,.035);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--down,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--down {
        border-radius: 4px 4px 13px 13px;
        border-top-color: rgba(255,255,255,.035);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__dpad-center,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__dpad-center {
        width: var(--flash-pad-key);
        height: var(--flash-pad-key);
        place-self: stretch;
        border-radius: 4px;
        background: linear-gradient(180deg, rgba(39,47,65,.96), rgba(22,28,41,.99));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-center,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-center {
        position: relative;
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 52px;
        height: 100%;
        color: inherit;
        pointer-events: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--start,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--start {
        position: relative;
        top: auto;
        left: auto;
        width: clamp(48px, 13vw, 58px);
        min-width: 48px;
        height: 34px;
        min-height: 34px;
        padding: 0 8px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 999px;
        background: rgba(255,255,255,.055);
        box-shadow: inset 0 1px rgba(255,255,255,.055);
        pointer-events: auto;
        transform: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--start strong,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--start strong {
        font-size: .76rem;
        line-height: 1;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--start small,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--start small {
        display: block;
        margin-top: 1px;
        color: rgba(255,255,255,.52);
        font-size: .45rem;
        font-weight: 800;
        line-height: 1;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__action-pad,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__action-pad {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        display: grid;
        grid-template-columns: repeat(2, var(--flash-action-key));
        align-items: center;
        gap: clamp(7px, 2vw, 10px);
        width: auto;
        height: auto;
        transform: none;
        filter: drop-shadow(0 7px 18px rgba(0,0,0,.2));
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--action,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--action {
        position: relative;
        inset: auto;
        width: var(--flash-action-key);
        min-width: var(--flash-action-key);
        height: var(--flash-action-key);
        min-height: var(--flash-action-key);
        margin: 0;
        transform: none;
        border-radius: 50%;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--action-b,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--action-b {
        grid-column: 1;
        transform: translateY(7px);
        background: linear-gradient(145deg, rgba(43,52,73,.99), rgba(20,27,41,.99));
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--action-a,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--action-a {
        grid-column: 2;
        transform: translateY(-7px);
        background: linear-gradient(145deg, rgba(119,87,245,.99), rgba(78,54,190,.99));
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--action strong,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--action strong {
        font-size: clamp(1rem, 4.7vw, 1.26rem);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--action small,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--action small {
        display: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__bar,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__bar {
        height: var(--flash-hud-height);
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__meta,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__meta {
        left: max(9px, env(safe-area-inset-left));
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__actions,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__actions {
        right: max(8px, env(safe-area-inset-right));
        padding: 3px;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__actions .button,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__actions .button {
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        border-radius: 9px;
    }
}

@media (max-width: 355px) and (orientation: portrait) {
    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden),
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) {
        --flash-pad-key: 33px;
        --flash-action-key: 48px;
        --flash-dock-height: 108px;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-controls,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-controls {
        grid-template-columns: minmax(99px, 1fr) 44px minmax(103px, 1fr);
        gap: 5px;
        padding-left: 7px;
        padding-right: 7px;
    }
}


/* Universal Mobile Fullscreen v10
   Every game gets the complete visible mobile viewport. System UI is made of
   independent pointer islands so the transparent HUD layer can never block
   iframe touch input. Flash controls float above the game instead of reducing
   the game stage. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    body.arcade-mobile-active {
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        overflow: hidden;
        overscroll-behavior: none;
        background: #000;
    }

    .arcade-player.is-mobile-play,
    .arcade-player:fullscreen {
        grid-template-rows: minmax(0, 1fr) !important;
        width: 100vw;
        width: 100dvw;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        min-height: 100svh;
        overflow: hidden;
        background: #000;
    }

    .arcade-player.is-mobile-play .arcade-player__stage,
    .arcade-player:fullscreen .arcade-player__stage,
    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__stage,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__stage,
    .arcade-player.is-native-html5.is-mobile-play.is-touch-hidden .arcade-player__stage,
    .arcade-player.is-native-html5:fullscreen.is-touch-hidden .arcade-player__stage {
        position: absolute;
        inset: 0;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: #000;
        box-shadow: none;
        transform: none;
    }

    .arcade-player.is-mobile-play .arcade-player__frame,
    .arcade-player:fullscreen .arcade-player__frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        touch-action: manipulation;
    }

    /* Full-screen transparent HUD. It never receives touches itself. */
    .arcade-player.is-mobile-play .arcade-player__bar,
    .arcade-player:fullscreen .arcade-player__bar,
    .arcade-player.is-native-html5.is-mobile-play.is-touch-hidden .arcade-player__bar,
    .arcade-player.is-native-html5:fullscreen.is-touch-hidden .arcade-player__bar,
    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__bar,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__bar {
        position: absolute;
        inset: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        display: block;
        width: 100%;
        height: 100% !important;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        pointer-events: none;
    }

    /* Only the two small HUD islands can capture input. */
    .arcade-player.is-mobile-play .arcade-player__meta,
    .arcade-player:fullscreen .arcade-player__meta,
    .arcade-player.is-mobile-play .arcade-player__actions,
    .arcade-player:fullscreen .arcade-player__actions {
        pointer-events: auto;
    }

    .arcade-player.is-mobile-play .arcade-player__meta,
    .arcade-player:fullscreen .arcade-player__meta {
        top: max(10px, env(safe-area-inset-top));
        left: max(10px, env(safe-area-inset-left));
    }

    .arcade-player.is-mobile-play .arcade-player__actions,
    .arcade-player:fullscreen .arcade-player__actions {
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
    }

    .arcade-player.is-mobile-play .arcade-player__status,
    .arcade-player:fullscreen .arcade-player__status {
        display: none;
    }

    /* Native HTML5 games already own their touch UI, so Acarde stays out. */
    .arcade-player.is-native-html5.is-mobile-play.is-touch-hidden .arcade-player__touch-controls,
    .arcade-player.is-native-html5:fullscreen.is-touch-hidden .arcade-player__touch-controls {
        display: none !important;
    }

    /* Flash still needs controls, but they float over the full-size game. */
    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-controls,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-controls {
        position: absolute;
        inset: 0;
        z-index: 18;
        display: block;
        width: 100%;
        height: 100% !important;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__dpad,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__dpad {
        position: absolute;
        top: auto;
        right: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: max(12px, env(safe-area-inset-left));
        grid-column: auto;
        grid-row: auto;
        pointer-events: auto;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-center,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-center {
        position: absolute;
        top: auto;
        right: auto;
        bottom: max(18px, calc(env(safe-area-inset-bottom) + 6px));
        left: 50%;
        width: auto;
        height: auto;
        min-width: 0;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__action-pad,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__action-pad {
        position: absolute;
        top: auto;
        right: max(12px, env(safe-area-inset-right));
        bottom: max(16px, calc(env(safe-area-inset-bottom) + 4px));
        left: auto;
        grid-column: auto;
        grid-row: auto;
        justify-self: auto;
        pointer-events: auto;
    }

    .arcade-player.is-flash-game.is-mobile-play:not(.is-touch-hidden) .arcade-player__touch-key--start,
    .arcade-player.is-flash-game:fullscreen:not(.is-touch-hidden) .arcade-player__touch-key--start {
        pointer-events: auto;
    }

    /* The close/mobile button is useful, but keep the HUD tiny. */
    .arcade-player.is-mobile-play .arcade-player__actions .button,
    .arcade-player:fullscreen .arcade-player__actions .button {
        width: clamp(34px, 8vw, 42px);
        min-width: clamp(34px, 8vw, 42px);
        height: clamp(34px, 8vw, 42px);
        min-height: clamp(34px, 8vw, 42px);
        border-radius: 12px;
    }

    .arcade-player.is-mobile-play .arcade-player__score,
    .arcade-player:fullscreen .arcade-player__score {
        padding: 7px 10px;
        font-size: clamp(.72rem, 2.2vw, .88rem);
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .arcade-player.is-mobile-play .arcade-player__meta,
    .arcade-player:fullscreen .arcade-player__meta {
        top: max(7px, env(safe-area-inset-top));
        left: max(7px, env(safe-area-inset-left));
    }

    .arcade-player.is-mobile-play .arcade-player__actions,
    .arcade-player:fullscreen .arcade-player__actions {
        top: max(7px, env(safe-area-inset-top));
        right: max(7px, env(safe-area-inset-right));
        gap: 4px;
        padding: 4px;
    }
}