body {
    margin: 0;
    padding: 0;
    background: #222;
    font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 100svh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #333;
}

canvas {
    display: block;
    width: min(calc(100vw - 24px), 1000px);
    height: auto;
    border: 4px solid #000;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    background: #f8f6f0;
    touch-action: none;
}

.panel-overlay {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 180;
    background: rgba(20, 20, 20, 0.68);
    touch-action: pan-y;
}

.menu-card {
    width: min(520px, calc(100vw - 32px));
    box-sizing: border-box;
    background: #f8f6f0;
    border: 6px solid #000;
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.45);
    padding: 28px;
    text-align: center;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    touch-action: pan-y;
}

#main-menu .menu-card {
    width: min(780px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
}

.menu-kicker {
    display: inline-block;
    padding: 4px 10px;
    background: #000;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
}

.menu-card h1 {
    margin: 12px 0 8px;
    font-size: clamp(38px, 7vw, 62px);
    line-height: 0.95;
}

.menu-card p {
    margin: 0 auto 22px;
    max-width: 390px;
    font-size: 16px;
    font-weight: bold;
}

.menu-intro {
    max-width: 560px !important;
    margin-bottom: 14px !important;
    line-height: 1.3;
}

.menu-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 10px;
    justify-content: center;
}

.menu-actions button,
.audio-preview-actions button,
#game-over button {
    padding: 12px 30px;
    font-size: 20px;
    font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
    font-weight: bold;
    cursor: pointer;
    background: #fff;
    border: 3px solid #000;
}

.menu-actions button {
    width: 100%;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible,
canvas:focus-visible,
.github-link:focus-visible,
.btn:focus-visible {
    outline: 3px solid #111;
    box-shadow: 0 0 0 6px #ffcc00;
    outline-offset: 3px;
}

.dialog-focus-target:focus-visible {
    outline: 3px solid #111;
    box-shadow: 0 0 0 6px #ffcc00;
    outline-offset: 4px;
}

#btn-special[data-state="charging"] {
    background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.14) 0 5px, transparent 5px 10px);
}

#btn-special[data-state="special-ready"] {
    background-color: #ffd447;
}

#btn-special[data-state="cancel-ready"] {
    color: #111;
    background-color: #7ee7ee;
    background-image: repeating-linear-gradient(45deg, #8b005f 0 3px, transparent 3px 9px);
    border: 4px double #111;
}

#btn-special[data-state="cancel-used"] {
    color: #111;
    background-color: #e5e7eb;
    background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.22) 0 3px, transparent 3px 8px);
}

.touch-state {
    display: block;
    font-size: 0.72em;
    line-height: 1;
}

@media (forced-colors: active) {
    button:focus-visible,
    select:focus-visible,
    input:focus-visible,
    summary:focus-visible,
    canvas:focus-visible,
    .github-link:focus-visible,
    .btn:focus-visible,
    .dialog-focus-target:focus-visible {
        outline: 2px solid Highlight;
        box-shadow: 0 0 0 4px Canvas;
        forced-color-adjust: auto;
    }

    #btn-special[data-state="charging"],
    #btn-special[data-state="cancel-ready"],
    #btn-special[data-state="cancel-used"],
    #btn-special[data-state="special-ready"] {
        border: 3px solid ButtonText;
        forced-color-adjust: auto;
    }
}

.github-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 7px 12px;
    border: 3px solid #000;
    background: #fff;
    color: #000;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.github-link:hover {
    background: #000;
    color: #fff;
}

.github-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

#help-screen {
    display: none;
}

#onboarding-screen {
    display: none;
    z-index: 190;
}

#pause-screen {
    display: none;
}

#pause-button {
    display: none;
    position: absolute;
    top: 54px;
    right: 16px;
    z-index: 120;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid #000;
    font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

#pause-button:hover {
    background: #000;
    color: #fff;
}

.difficulty-picker {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    margin-top: 0;
    padding: 8px 12px;
    border: 3px solid #000;
    background: #fff;
    font-size: 16px;
    font-weight: bold;
    min-width: 0;
    text-align: left;
}

.menu-settings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px auto 0;
    max-width: 660px;
}

.difficulty-picker select {
    width: 100%;
    min-width: 0;
    border: 2px solid #000;
    background: #f8f6f0;
    font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
    font-size: 15px;
    font-weight: bold;
}

.motion-picker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    grid-column: 1 / -1;
    margin-top: 0;
    padding: 7px 10px;
    border: 3px solid #000;
    background: #fff;
    font-size: 14px;
    font-weight: bold;
}

.motion-picker input {
    width: 18px;
    height: 18px;
    accent-color: #111;
}

#music-selection-summary {
    min-height: 1.2em;
    color: #4b4b4b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.audio-settings {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(100px, 2fr);
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    padding: 12px;
    border: 2px solid #111;
    background: #fffdf5;
    text-align: left;
    font-size: 14px;
}
.audio-settings legend, .audio-settings label { font-weight: bold; }
.audio-settings output { display: inline-block; min-width: 4ch; }
.audio-settings input { width: 100%; min-width: 0; accent-color: #111; }
.audio-settings p, .audio-preview-actions { grid-column: 1 / -1; margin: 0; }
.audio-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#main-menu .audio-preview-actions button { padding: 8px 12px; font-size: 12px; min-height: 36px; }

.arena-preview {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 12px;
    align-items: center;
    margin: 12px auto 0;
    padding: 10px;
    max-width: 660px;
    border: 3px solid #000;
    background: #fff;
    text-align: left;
}

.arena-preview-stage {
    position: relative;
    height: 82px;
    overflow: hidden;
    border: 3px solid #000;
    background: #f8f6f0;
}

.arena-preview-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
    background-size: 24px 18px;
}

.arena-preview-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    height: 5px;
    background: #222;
}

.arena-preview-prop {
    position: absolute;
    z-index: 1;
    border: 2px solid #000;
    background: rgba(255, 255, 255, 0.78);
}

.arena-preview-prop-a {
    left: 18px;
    top: 18px;
    width: 44px;
    height: 30px;
}

.arena-preview-prop-b {
    right: 22px;
    top: 28px;
    width: 52px;
    height: 22px;
}

.arena-preview-copy strong {
    display: block;
    font-size: 18px;
}

.arena-preview-copy span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.25;
}

.arena-preview--cafeteria .arena-preview-stage { background: #f2dfc2; }
.arena-preview--cafeteria .arena-preview-stage::after { background: #7c4f2c; }
.arena-preview--cafeteria .arena-preview-prop-a { border-radius: 0 0 12px 12px; background: #fff; }
.arena-preview--cafeteria .arena-preview-prop-b { background: #7c4f2c; }

.arena-preview--lab .arena-preview-stage { background: #e8f4ff; }
.arena-preview--lab .arena-preview-stage::after { background: #24537a; }
.arena-preview--lab .arena-preview-prop-a { transform: skew(-12deg); background: rgba(42, 157, 143, 0.45); }
.arena-preview--lab .arena-preview-prop-b { border-radius: 50%; background: rgba(36, 83, 122, 0.25); }

.arena-preview--meeting .arena-preview-stage { background: #f4efe6; }
.arena-preview--meeting .arena-preview-stage::after { background: #5b4636; }
.arena-preview--meeting .arena-preview-prop-a,
.arena-preview--meeting .arena-preview-prop-b { background: #fff3a3; }

.arena-preview--remoteMeeting .arena-preview-stage { background: #dbeafe; }
.arena-preview--remoteMeeting .arena-preview-stage::after { background: #1d4ed8; }
.arena-preview--remoteMeeting .arena-preview-prop-a,
.arena-preview--remoteMeeting .arena-preview-prop-b { background: #fff; }

.arena-preview--mathClass .arena-preview-stage { background: #eef7e5; }
.arena-preview--mathClass .arena-preview-stage::after { background: #365314; }
.arena-preview--mathClass .arena-preview-prop-a,
.arena-preview--mathClass .arena-preview-prop-b { background: rgba(255, 255, 255, 0.8); }

.arena-preview--serverDown .arena-preview-stage { background: #1f2937; }
.arena-preview--serverDown .arena-preview-stage::after { background: #ef4444; }
.arena-preview--serverDown .arena-preview-prop-a,
.arena-preview--serverDown .arena-preview-prop-b { border-color: #ef4444; background: rgba(239, 68, 68, 0.35); }

.arena-preview--geekConvention .arena-preview-stage { background: #fff7ed; }
.arena-preview--geekConvention .arena-preview-stage::after { background: #9a3412; }
.arena-preview--geekConvention .arena-preview-prop-a,
.arena-preview--geekConvention .arena-preview-prop-b { background: rgba(154, 52, 18, 0.22); }

.arena-preview--terminal .arena-preview-stage { background: #edf6ee; }
.arena-preview--terminal .arena-preview-stage::after { background: #245746; }
.arena-preview--terminal .arena-preview-prop { border-color: #245746; background: repeating-linear-gradient(#dcebdd 0 5px, #245746 5px 7px); }
.arena-preview--rooftop .arena-preview-stage { background: #eee8f5; }
.arena-preview--rooftop .arena-preview-stage::after { background: #584273; }
.arena-preview--rooftop .arena-preview-prop { height: 42px; background: repeating-linear-gradient(90deg, #ddd4e9 0 9px, #fff7e2 9px 14px); border-color: #584273; }

.stats-summary {
    margin: 10px auto 0;
    padding: 8px 10px;
    max-width: 660px;
    border: 2px solid #000;
    background: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: bold;
}

.help-card {
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 22px;
}

.controls-card {
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100dvh - 24px);
    overflow: auto;
}

.bindings-list {
    display: grid;
    gap: 7px;
    margin: 14px auto;
    text-align: left;
}

.binding-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border: 2px solid var(--ink-900, #111);
    background: var(--paper-0, #fffdf5);
}

.binding-action {
    font-size: 13px;
}

.binding-values {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.binding-button {
    min-width: 52px;
    min-height: 34px;
    padding: 5px 8px;
    border: 2px solid #000;
    background: #fff;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.binding-button--add {
    min-width: 34px;
    background: var(--arcade-yellow, #ffd447);
}

.binding-status {
    min-height: 22px;
    color: var(--graphite-600, #62605a);
    font-size: 12px;
    font-weight: bold;
}

.controls-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-card h1 {
    margin: 10px 0 6px;
    font-size: clamp(34px, 7vw, 54px);
}

.help-section {
    margin-top: 12px;
    text-align: left;
}

.help-section h2 {
    margin: 0 0 6px;
    font-size: 18px;
    text-align: center;
}

.help-section p {
    margin: 0;
    max-width: none;
    font-size: 14px;
    line-height: 1.25;
}

.help-section ul {
    margin: 0;
    padding-left: 22px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.25;
}

.help-section li + li {
    margin-top: 3px;
}

.help-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

.guidance-picker {
    margin-top: 12px;
    padding: 10px;
    border: 2px solid #000;
    background: #fff;
    text-align: left;
}

.guidance-picker label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: bold;
}

.guidance-picker select {
    min-width: 150px;
    border: 2px solid #000;
    background: #f8f6f0;
    font-family: inherit;
    font-weight: bold;
}

.guidance-status {
    margin: 7px 0 0 !important;
    color: #62605a;
    font-size: 12px !important;
}

.input-guides {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    text-align: left;
}

.input-guide {
    padding: 8px 10px;
    border: 2px solid #000;
    background: rgba(255, 255, 255, 0.72);
}

.input-guide h2 {
    display: inline;
    margin: 0 8px 0 0;
    font-size: 14px;
}

.input-guide p {
    display: inline;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.3;
}

.guide-marker {
    display: block;
    min-height: 16px;
    margin-top: 4px;
    color: #8a4b00;
    font-size: 11px;
    font-weight: bold;
}

.help-card .control-grid {
    gap: 4px 12px;
    font-size: 14px;
}

.combo-note {
    margin-bottom: 6px !important;
}

.pause-summary {
    margin: 14px auto 18px;
    padding: 12px;
    max-width: 390px;
    border: 3px solid #000;
    background: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.35;
    text-align: left;
}

.menu-actions button:hover,
.audio-preview-actions button:hover,
#game-over button:hover {
    background: #000;
    color: #fff;
}

.menu-controls {
    margin-top: 12px;
    padding: 12px 14px 0;
    border-top: 3px solid #000;
    text-align: left;
}

.menu-controls h2 {
    margin: 0 0 10px;
    font-size: 20px;
    text-align: center;
}

.control-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    font-size: 15px;
    font-weight: bold;
}

#main-menu .control-grid {
    grid-template-columns: minmax(92px, auto) minmax(120px, 1fr) minmax(74px, auto) minmax(120px, 1fr);
    gap: 6px 14px;
}

.control-grid span:nth-child(odd) {
    text-align: right;
}

#instructions {
    position: absolute;
    top: 10px;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 12px;
    border: 2px solid #000;
    font-size: 14px;
    font-weight: bold;
    z-index: 10;
    border-radius: 4px;
}

#orientation-warning {
    display: none;
    position: absolute;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 190;
    max-width: calc(100vw - 32px);
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 3px solid #000;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

#controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30vh;
    display: none;
    z-index: 100;
    touch-action: none;
}

#training-panel {
    display: none;
    position: absolute;
    left: 12px;
    top: 52px;
    z-index: 110;
    box-sizing: border-box;
    width: min(440px, calc(100vw - 24px));
    max-width: min(440px, calc(100vw - 24px));
    max-height: min(38vh, 300px);
    overflow: auto;
    padding: 6px;
    border: 3px solid #000;
    background: rgba(255, 253, 242, 0.96);
}

#training-panel select,
#training-panel button {
    margin: 2px;
    padding: 4px 6px;
    border: 2px solid #000;
    background: #fff;
    font: bold 11px "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

#training-panel legend,
#training-panel label,
.training-trial-brief,
.training-trial-progress {
    font-size: 11px;
    font-weight: bold;
}

#training-panel label {
    display: grid;
    gap: 3px;
    margin: 2px;
}

.training-trial-picker {
    width: 100%;
}

.training-trial-picker select {
    width: 100%;
}

#training-panel fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
    margin: 4px 0 0;
    padding: 4px;
    border: 2px solid #000;
}

#training-panel fieldset:disabled {
    opacity: 0.72;
}

.training-trial-brief,
.training-trial-progress {
    max-width: 420px;
    margin: 5px 2px;
    padding: 5px 6px;
    border-left: 4px solid var(--glitch-cyan);
    background: var(--paper-0);
    overflow-wrap: anywhere;
}

.training-trial-progress {
    border-left-color: var(--glitch-magenta);
    white-space: pre-wrap;
}

.training-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.training-panel--complete .training-trial-progress {
    border: 3px solid #111;
    background: #ffd447;
}

.control-zone {
    position: absolute;
    bottom: max(15px, env(safe-area-inset-bottom));
    height: clamp(150px, 24vh, 190px);
    width: clamp(190px, 24vw, 240px);
}

#left-side {
    left: 15px;
}

#right-side {
    right: 15px;
}

.btn {
    position: absolute;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    border: 3px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    touch-action: none;
    padding: 0;
    appearance: none;
    font-family: inherit;
    line-height: 1.1;
    cursor: pointer;
}

.btn:active {
    background: #fff;
    color: #000;
}

#btn-left {
    width: 65px;
    height: 65px;
    left: 0;
    top: 45px;
}

#btn-right {
    width: 65px;
    height: 65px;
    left: 130px;
    top: 45px;
}

#btn-jump {
    width: 65px;
    height: 65px;
    left: 65px;
    top: -15px;
    border-radius: 14px;
}

#btn-block {
    width: 75px;
    height: 50px;
    left: 60px;
    top: 85px;
    border-radius: 8px;
    font-size: 11px;
}

#btn-crouch {
    width: 75px;
    height: 50px;
    left: 60px;
    top: 145px;
    border-radius: 8px;
    font-size: 10px;
}

#btn-punch {
    width: 85px;
    height: 85px;
    right: 110px;
    top: 25px;
    background: rgba(180, 0, 0, 0.75);
}

#btn-kick {
    width: 85px;
    height: 85px;
    right: 5px;
    top: 25px;
    background: rgba(0, 0, 150, 0.75);
}

#btn-special {
    width: 92px;
    height: 48px;
    right: 52px;
    top: 116px;
    border-radius: 12px;
    background: rgba(0, 120, 255, 0.78);
    font-size: 11px;
}

#game-over {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fffdf5;
    padding: 24px clamp(18px, 4vw, 50px);
    border: 6px solid #000;
    text-align: center;
    z-index: 200;
    box-shadow: 8px 8px 0 #111, 0 0 0 100vmax rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    touch-action: pan-y;
}

#game-over-title {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 3px double #111;
    font-size: clamp(20px, 4vw, 30px);
    letter-spacing: 0.12em;
}

#winner-text {
    font-size: clamp(24px, 5vw, 38px);
    font-weight: bold;
    margin-bottom: 15px;
}

.post-match-medal {
    margin: 18px auto 4px;
    padding: 10px 14px;
    max-width: 360px;
    border: 4px solid #000;
    background: #fff7c2;
    box-shadow: 6px 6px 0 #000;
    font-size: 16px;
    line-height: 1.25;
}

.post-match-medal span {
    display: block;
    font-size: 22px;
    color: #111;
}

.post-match-medal small {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}

.post-match-summary {
    margin: 14px auto 18px;
    padding: 10px 14px;
    max-width: 380px;
    border: 3px solid #000;
    background: #fff;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
}

.post-match-summary div {
    font-weight: bold;
}

.post-match-summary p {
    margin: 8px 0 0;
    max-width: none;
    font-size: 13px;
}

#game-over button + button {
    margin-left: 8px;
}

.challenge-notice { border: 2px solid #111; padding: 8px; background: #fff7c2; }
#result-card-details { margin: 12px 0; border: 2px solid #111; padding: 8px; }
#result-card-details summary { cursor: pointer; font-weight: bold; }
#result-card { display: block; width: 100%; height: auto; max-width: 480px; margin: 10px auto 0; border: 0; box-shadow: none; }
.result-share-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
#game-over .result-share-actions button { font-size: 12px; padding: 9px; margin: 0; min-height: 40px; }
#game-over .result-share-hint, #share-status { font-size: 12px; max-width: 440px; }
#challenge-link { box-sizing: border-box; width: 100%; min-height: 70px; margin: 8px 0; }

@media (max-width: 760px) {
    .help-card {
        padding: 18px;
    }

    .help-columns {
        grid-template-columns: 1fr;
    }

    .menu-settings {
        grid-template-columns: 1fr;
        max-width: 460px;
    }

    #main-menu .control-grid {
        grid-template-columns: auto 1fr;
    }

    #main-menu .menu-card {
        padding: 20px;
    }

    .menu-actions {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto;
    }

    .arena-preview {
        grid-template-columns: 1fr;
        max-width: 460px;
        text-align: center;
    }

    .arena-preview-stage {
        height: 70px;
    }

    #instructions {
        top: 6px;
        font-size: 12px;
        padding: 4px 8px;
    }

    #pause-button {
        top: 42px;
        right: 8px;
        padding: 6px 10px;
        font-size: 12px;
    }

    #controls {
        height: 38vh;
    }

    .control-zone {
        bottom: max(8px, env(safe-area-inset-bottom));
        width: clamp(150px, 43vw, 220px);
        height: clamp(170px, 42vw, 210px);
    }

    #left-side {
        left: 8px;
    }

    #right-side {
        right: 8px;
    }

    #btn-left,
    #btn-right,
    #btn-jump {
        width: clamp(48px, 13vw, 65px);
        height: clamp(48px, 13vw, 65px);
        font-size: 12px;
    }

    #btn-left { left: 0; top: 46px; }
    #btn-right { left: clamp(92px, 25vw, 130px); top: 46px; }
    #btn-jump { left: clamp(46px, 12.5vw, 65px); top: 0; }

    #btn-block {
        width: clamp(62px, 17vw, 75px);
        height: clamp(42px, 11vw, 50px);
        left: clamp(42px, 12vw, 60px);
        top: clamp(78px, 20vw, 85px);
    }

    #btn-crouch {
        width: clamp(62px, 17vw, 75px);
        height: clamp(42px, 11vw, 50px);
        left: clamp(42px, 12vw, 60px);
        top: clamp(130px, 33vw, 150px);
    }

    #btn-punch,
    #btn-kick {
        width: clamp(62px, 17vw, 85px);
        height: clamp(62px, 17vw, 85px);
        top: 28px;
        font-size: 12px;
    }

    #btn-punch { right: clamp(78px, 21vw, 110px); }
    #btn-kick { right: 0; }

    #btn-special {
        width: clamp(74px, 22vw, 92px);
        height: clamp(38px, 11vw, 48px);
        right: clamp(36px, 11vw, 52px);
        top: clamp(104px, 27vw, 124px);
        font-size: 10px;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    #instructions {
        top: max(6px, env(safe-area-inset-top));
        font-size: 11px;
        padding: 4px 7px;
    }

    #pause-button {
        top: max(6px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
        padding: 6px 9px;
        font-size: 11px;
    }

    #controls {
        height: 30vh;
    }

    .control-zone {
        bottom: max(6px, env(safe-area-inset-bottom));
        width: clamp(145px, 34vw, 205px);
        height: clamp(128px, 35vw, 170px);
    }

    #left-side {
        left: max(6px, env(safe-area-inset-left));
    }

    #right-side {
        right: max(6px, env(safe-area-inset-right));
    }

    #btn-left,
    #btn-right,
    #btn-jump {
        width: clamp(46px, 10vw, 58px);
        height: clamp(46px, 10vw, 58px);
        font-size: 11px;
    }

    #btn-left { left: 0; top: 42px; }
    #btn-right { left: clamp(86px, 20vw, 116px); top: 42px; }
    #btn-jump { left: clamp(43px, 10vw, 58px); top: 0; }

    #btn-block,
    #btn-crouch {
        width: clamp(58px, 14vw, 70px);
        height: clamp(36px, 9vw, 46px);
        left: clamp(40px, 10vw, 55px);
        font-size: 9px;
    }

    #btn-block { top: clamp(74px, 17vw, 82px); }
    #btn-crouch { top: clamp(116px, 27vw, 132px); }

    #btn-punch,
    #btn-kick {
        width: clamp(58px, 14vw, 76px);
        height: clamp(58px, 14vw, 76px);
        top: 24px;
        font-size: 11px;
    }

    #btn-punch { right: clamp(70px, 17vw, 98px); }
    #btn-kick { right: 0; }

    #btn-special {
        width: clamp(70px, 18vw, 86px);
        height: clamp(34px, 8vw, 44px);
        right: clamp(32px, 9vw, 48px);
        top: clamp(94px, 22vw, 110px);
        font-size: 9px;
    }
}

@media (orientation: portrait) and (max-width: 760px) {
    .panel-overlay {
        align-items: flex-start;
    }

    .menu-card,
    #main-menu .menu-card {
        max-height: calc(100dvh - 24px);
        overflow: auto;
    }

    #orientation-warning {
        top: max(48px, calc(env(safe-area-inset-top) + 44px));
    }

    canvas {
        margin-top: 0;
    }
}

:root {
    --paper-0: #fffdf5;
    --paper-1: #f6f1e5;
    --ink-900: #111;
    --graphite-600: #62605a;
    --glitch-cyan: #00c7e6;
    --glitch-magenta: #e94370;
    --arcade-yellow: #ffd447;
    --line-strong: 3px;
    --hard-shadow: 6px 6px 0 rgba(0, 0, 0, 0.28);
}

button,
select,
input,
summary {
    font: inherit;
}

button:active,
.github-link:active,
summary:active {
    transform: translate(2px, 2px);
}

#arena-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(calc(100vw - 24px), 1000px);
    max-width: calc(100vw - 16px);
    flex: 0 0 auto;
}

#game-toolbar {
    display: none;
    box-sizing: border-box;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    background: var(--paper-0);
    border: 4px solid var(--ink-900);
    border-bottom: 0;
    box-shadow: var(--hard-shadow);
    z-index: 120;
}

#instructions {
    position: static;
    min-width: 0;
    padding: 5px 10px;
    overflow: hidden;
    background: transparent;
    border: 0;
    font-size: 13px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

.music-now-playing {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(230px, 30vw);
    overflow: hidden;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pause-button {
    position: static;
    flex: 0 0 auto;
    padding: 7px 12px;
    background: var(--paper-0);
    border: var(--line-strong) solid var(--ink-900);
    font-size: 13px;
}

#combat-status {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(420px, 42vw);
    background: var(--paper-0);
    border: 3px solid var(--ink-900);
    font-size: 11px;
    z-index: 121;
}

#combat-status summary {
    max-width: 100%;
    padding: 5px 8px;
    overflow: hidden;
    cursor: pointer;
    font-weight: bold;
    list-style-position: inside;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#combat-status-details {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    display: grid;
    grid-template-columns: max-content minmax(92px, 1fr);
    gap: 3px 8px;
    width: min(360px, calc(100vw - 32px));
    max-height: min(52vh, 280px);
    overflow: auto;
    margin: 0;
    padding: 10px;
    background: var(--paper-0);
    border: 3px solid var(--ink-900);
    box-shadow: var(--hard-shadow);
}

#combat-status-details dt {
    font-weight: bold;
}

#combat-status-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 760px), (max-height: 500px) {
    .music-now-playing { max-width: 24vw; font-size: 9px; }

    #combat-status {
        max-width: 32vw;
    }

    #combat-status summary {
        padding: 5px;
        font-size: 10px;
    }

    #combat-status-details {
        right: auto;
        left: 0;
        max-height: 38vh;
    }
}

#combat-status {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(420px, 42vw);
    background: var(--paper-0);
    border: 3px solid var(--ink-900);
    font-size: 11px;
    z-index: 121;
}

#combat-status summary {
    max-width: 100%;
    padding: 5px 8px;
    overflow: hidden;
    cursor: pointer;
    font-weight: bold;
    list-style-position: inside;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#combat-status-details {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    display: grid;
    grid-template-columns: max-content minmax(92px, 1fr);
    gap: 3px 8px;
    width: min(360px, calc(100vw - 32px));
    max-height: min(52vh, 280px);
    overflow: auto;
    margin: 0;
    padding: 10px;
    background: var(--paper-0);
    border: 3px solid var(--ink-900);
    box-shadow: var(--hard-shadow);
}

#combat-status-details dt {
    font-weight: bold;
}

#combat-status-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 760px), (max-height: 500px) {
    #combat-status {
        max-width: 32vw;
    }

    #combat-status summary {
        padding: 5px;
        font-size: 10px;
    }

    #combat-status-details {
        right: auto;
        left: 0;
        max-height: 38vh;
    }
}

.arcade-run-summary {
    max-width: 520px;
}

.arcade-run-results {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.25;
}

.arcade-run-results div {
    padding: 5px 7px;
    border: 2px solid #000;
    background: #fffdf5;
}

.arcade-next-fight {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 2px solid #000;
    font-size: 12px;
}

#game-toolbar + canvas {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

#main-menu .main-menu-card {
    width: min(820px, calc(100vw - 32px));
    max-height: calc(100dvh - 24px);
    padding: 16px 22px;
    background: var(--paper-1);
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.36);
}

.menu-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-language,
#main-menu .motion-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    min-height: 44px;
    padding: 6px 10px;
    background: var(--paper-0);
    border: var(--line-strong) solid var(--ink-900);
    font-size: 13px;
    font-weight: bold;
    text-align: left;
}

.menu-language select {
    min-width: 112px;
    min-height: 44px;
    border: 2px solid var(--ink-900);
    background: var(--paper-0);
    font-size: 13px;
    font-weight: bold;
}

#main-menu .menu-card h1 {
    margin: 10px 0 6px;
    font-size: clamp(38px, 6vw, 52px);
}

#main-menu .menu-intro {
    margin-bottom: 12px !important;
    font-size: 14px;
    line-height: 1.2;
}

.match-configuration-summary {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 16px;
    background: var(--paper-0);
    border: var(--line-strong) solid var(--ink-900);
    box-shadow: inset 5px 0 0 var(--glitch-cyan), inset -5px 0 0 var(--glitch-magenta);
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-align: center;
}

.menu-duel-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px auto 0;
    padding: 8px 12px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--paper-0);
    border: 3px solid var(--ink-900);
}

.menu-layout {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(290px, 0.95fr);
    gap: 12px;
    align-items: start;
    text-align: left;
}

.menu-column {
    min-width: 0;
}

#main-menu .menu-disclosure {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.42);
    border: var(--line-strong) solid var(--ink-900);
    text-align: left;
}

#main-menu .menu-disclosure > summary {
    display: list-item;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 12px;
    cursor: pointer;
    background: var(--ink-900);
    color: var(--paper-0);
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    letter-spacing: 0.04em;
    list-style-position: inside;
}

#main-menu .menu-disclosure > summary::marker {
    color: var(--arcade-yellow);
}

#main-menu .menu-disclosure[open] > summary {
    background: var(--paper-0);
    color: var(--ink-900);
    border-bottom: var(--line-strong) solid var(--ink-900);
}

#main-menu .menu-disclosure[open] > summary::marker {
    color: var(--glitch-magenta);
}

#main-menu .duel-settings .menu-layout {
    padding: 8px;
}

#main-menu .menu-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-width: none;
    margin: 0;
    padding: 0;
}

#main-menu .difficulty-picker {
    padding: 6px 8px;
    font-size: 13px;
}

#main-menu .difficulty-picker select {
    min-height: 44px;
    font-size: 13px;
}

#main-menu .motion-picker {
    grid-column: auto;
    margin: 0;
}

#main-menu .arena-preview {
    grid-template-columns: 1fr;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 8px;
    background: var(--paper-0);
}

#main-menu .arena-preview-stage {
    height: 74px;
}

#main-menu .arena-preview-copy strong {
    font-size: 15px;
}

#main-menu .arena-preview-copy span {
    font-size: 12px;
    line-height: 1.2;
}

.selection-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 6px;
}

.selection-summary > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 6px;
    min-width: 0;
    padding: 6px 8px;
    background: var(--paper-0);
    border: 2px solid var(--ink-900);
}

.selection-summary-label {
    grid-row: 1 / span 2;
    align-self: start;
    padding: 3px 5px;
    background: var(--ink-900);
    color: var(--paper-0);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.04em;
}

.selection-summary strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.selection-summary span:last-child {
    color: var(--graphite-600);
    min-width: 0;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

#main-menu .stats-summary {
    max-width: none;
    margin: 8px 0 0;
    padding: 6px 8px;
    line-height: 1.2;
    background: var(--paper-0);
    border: var(--line-strong) solid var(--ink-900);
    font-size: 13px;
}

#main-menu .menu-actions {
    gap: 8px;
}

#main-menu .menu-actions--primary {
    display: block;
    max-width: none;
    margin-top: 8px;
}

#main-menu .menu-actions--primary button {
    min-height: 52px;
    background: var(--arcade-yellow);
    border-width: 4px;
    box-shadow: 5px 5px 0 var(--ink-900);
}

#main-menu .menu-actions--primary button:hover,
#main-menu .menu-actions--primary button:focus-visible {
    background: var(--arcade-yellow);
}

#main-menu .menu-actions--primary button:hover {
    background: #ffe890;
}

.menu-mode-section {
    margin-top: 10px;
}

.menu-mode-section h2 {
    width: fit-content;
    margin: 0 0 5px;
    padding: 3px 7px;
    background: var(--ink-900);
    color: var(--paper-0);
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

#main-menu .menu-actions--modes,
#main-menu .menu-actions--utilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    margin: 0;
}

#main-menu .menu-actions--modes button,
#main-menu .menu-actions--utilities button {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
}

.menu-utilities-content {
    padding: 8px;
}

.menu-global-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#main-menu .menu-actions--utilities {
    margin-top: 8px;
}

.menu-controls-compact {
    min-width: 0;
    margin-top: 0;
    padding: 0;
    border-top: 0;
    color: var(--graphite-600);
    font-size: 12px;
    font-weight: bold;
    line-height: 1.35;
    text-align: left;
}

#main-menu .menu-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 2px solid var(--ink-900);
}

#main-menu .github-link {
    min-height: 44px;
    box-sizing: border-box;
    margin-top: 0;
    padding: 5px 9px;
    border: 0;
    box-shadow: none;
    font-size: 12px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 760px) {
    #main-menu .main-menu-card {
        padding: 14px;
    }

    .menu-layout {
        grid-template-columns: 1fr;
    }

    #main-menu .menu-settings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #main-menu .arena-preview-stage {
        height: 72px;
    }

    #main-menu .menu-footer {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    #main-menu .github-link {
        justify-self: start;
    }

    .binding-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    #game-toolbar {
        min-height: 38px;
        padding: 4px 6px;
    }

    #instructions {
        padding: 4px 6px;
        font-size: 11px;
    }

    #pause-button {
        padding: 6px 9px;
        font-size: 11px;
    }
}

@media (max-width: 559px) {
    #main-menu .menu-settings,
    .selection-summary,
    .menu-global-settings,
    #main-menu .menu-actions--modes,
    #main-menu .menu-actions--utilities {
        grid-template-columns: 1fr;
    }

    #main-menu .menu-card h1 {
        font-size: clamp(34px, 12vw, 46px);
    }

    .match-configuration-summary {
        text-align: left;
    }

    #main-menu .menu-disclosure > summary {
        font-size: 12px;
        line-height: 1.3;
    }

    .menu-language {
        align-items: stretch;
        flex-direction: column;
        gap: 5px;
    }

    .menu-language select {
        width: 100%;
        min-height: 44px;
    }

    .menu-controls-compact {
        text-align: center;
    }
}

/* Paper arcade cover. All artwork stays decorative and selection-driven. */
#game-container {
    background: radial-gradient(ellipse at 50% 38%, #494548, #232329 75%);
}
#main-menu { background: rgba(19, 18, 23, 0.84); }
#main-menu .main-menu-card {
    position: relative;
    padding: 18px 24px;
    border-width: 4px;
    background: radial-gradient(#bdb4a326 0.7px, transparent 0.8px) 0 0 / 7px 7px, var(--paper-1);
    box-shadow: 9px 9px 0 #111, 13px 13px 0 #00c7e640;
}
#main-menu .menu-card h1 {
    font-size: clamp(38px, 6vw, 60px);
    font-family: Impact, "Arial Black", sans-serif;
    letter-spacing: 0.045em;
    line-height: 1;
    text-shadow: -2px 1px 0 #00c7e680, 2px 2px 0 #e9437050;
}
.menu-kicker { letter-spacing: 0.16em; font-size: 11px; }
.menu-duel-hero {
    --hero-rival: #7c3aed;
    --hero-paper: #fffdf5;
    position: relative;
    display: block;
    width: 100%;
    margin: 12px 0 10px;
    padding: 0;
    overflow: hidden;
    border: 2px solid #111;
    background: linear-gradient(115deg, #00c7e615 0 46%, #fffdf580 46% 54%, #e9437014 54%), var(--hero-paper);
}
.hero-art { display: block; width: 100%; height: auto; }
.hero-art path { stroke-linecap: round; stroke-linejoin: round; }
.hero-body { fill: none; stroke: #111; stroke-width: 6; }
.hero-head { fill: #fffdf5; stroke: #111; stroke-width: 5; }
.hero-eye { fill: #111; }
.hero-player { color: #1f6feb; }
.hero-cpu { color: var(--hero-rival); }
.hero-glove, .hero-sash, .hero-cpu-outfit, .hero-heavy, .hero-technical { fill: currentColor; stroke: #111; stroke-width: 3; }
.hero-band, .hero-antenna { fill: none; stroke: currentColor; stroke-width: 5; }
.hero-visor { fill: currentColor; stroke: #111; stroke-width: 2; }
.hero-speed { fill: none; stroke: #62605a; stroke-width: 2; opacity: 0.18; }
.hero-ground { fill: none; stroke: #111; stroke-width: 3; opacity: 0.35; }
.hero-shadow { fill: #111; opacity: 0.1; }
.hero-divider { fill: none; stroke: #111; stroke-width: 2; opacity: 0.15; }
.hero-pointer, .hero-lag, .hero-merge, .hero-boss { display: none; fill: none; stroke: currentColor; stroke-width: 4; }
.hero-fast, .hero-heavy, .hero-technical { display: none; }
.hero-fast { fill: currentColor; }
.menu-duel-hero[data-rival="lagSpike"] { --hero-rival: #0891b2; }
.menu-duel-hero[data-rival="mergeConflict"] { --hero-rival: #d97706; }
.menu-duel-hero[data-rival="boss500"] { --hero-rival: #dc2626; }
.menu-duel-hero[data-rival="nullPointer"] .hero-pointer,
.menu-duel-hero[data-rival="lagSpike"] .hero-lag,
.menu-duel-hero[data-rival="mergeConflict"] .hero-merge,
.menu-duel-hero[data-rival="boss500"] .hero-boss,
.menu-duel-hero[data-style="fast"] .hero-fast,
.menu-duel-hero[data-style="heavy"] .hero-heavy,
.menu-duel-hero[data-style="technical"] .hero-technical { display: inline; }
.menu-duel-hero[data-arena="cafeteria"] { --hero-paper: #f2dfc2; }
.menu-duel-hero[data-arena="lab"], .menu-duel-hero[data-arena="remoteMeeting"] { --hero-paper: #dbeafa; }
.menu-duel-hero[data-arena="mathClass"], .menu-duel-hero[data-arena="terminal"] { --hero-paper: #e2eedc; }
.menu-duel-hero[data-arena="rooftop"] { --hero-paper: #e7def1; }
.menu-duel-hero[data-arena="serverDown"] { --hero-paper: #d6d9e1; }
.hero-caption { position: absolute; bottom: 9px; display: grid; gap: 3px; font-size: 10px; line-height: 1.2; max-width: 28%; }
.hero-caption b { color: #1f6feb; font-size: 14px; }
.hero-caption--p1 { left: 12px; text-align: left; }
.hero-caption--cpu { right: 12px; text-align: right; }
.hero-caption--cpu b { color: var(--hero-rival); }
.menu-duel-hero-vs {
    position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%) rotate(-7deg);
    background: var(--arcade-yellow); border: 3px solid #111; padding: 8px 10px;
    font: italic 32px Impact, "Arial Black", sans-serif; box-shadow: 4px 4px 0 #111;
}
.match-configuration-summary { font-weight: normal; border-width: 2px; }
#main-menu .menu-actions--primary button { letter-spacing: 0.08em; }
@media (max-width: 559px) {
    #main-menu .main-menu-card { padding: 12px; }
    .hero-caption { font-size: 8px; bottom: 5px; max-width: 30%; }
    .hero-caption b { font-size: 11px; }
    .menu-duel-hero-vs { font-size: 22px; padding: 5px 6px; border-width: 2px; }
}

/* Small scenic previews with a single bounded ambient loop. */
.arena-preview-stage::before { background-image: none; }
.arena-preview--notebook .arena-preview-stage::before { background: repeating-linear-gradient(transparent 0 16px, #787f9a22 16px 17px); border-left: 3px solid #e9437040; left: 15%; }
.arena-preview--cafeteria .arena-preview-stage::before { background: linear-gradient(105deg, transparent 25%, #fff4be80 45%, transparent 70%); }
.arena-preview--lab .arena-preview-stage::before { background: repeating-linear-gradient(90deg, transparent 0 40px, #24537a15 40px 42px); }
.arena-preview--meeting .arena-preview-prop-a { width: 38%; height: 38px; background: #fffdf5; }
.arena-preview--remoteMeeting .arena-preview-stage::before { background: repeating-linear-gradient(90deg, #fffdf540 0 40px, transparent 40px 45px); inset: 8px 12px 27px; }
.arena-preview--mathClass .arena-preview-prop-a { width: 64%; height: 36px; background: #365314; border-color: #77583b; }
.arena-preview--serverDown .arena-preview-stage::before { background: linear-gradient(100deg, transparent, #ef444425, transparent); }
.arena-preview--terminal .arena-preview-stage::before { background: repeating-linear-gradient(transparent 0 6px, #2457460d 6px 7px); }
.arena-preview--rooftop .arena-preview-stage { background: linear-gradient(#d9ccea, #f0d6d5); }
.arena-preview--rooftop .arena-preview-stage::before { inset: 9px 24px auto auto; width: 16px; height: 16px; border-radius: 50%; background: #fff7df; }
.arena-preview--geekConvention .arena-preview-stage::before { background: repeating-linear-gradient(110deg, #00c7e626 0 15px, #e9437020 15px 30px, transparent 30px 45px); inset: 9px 0 auto; height: 8px; }
.arena-preview-stage .arena-preview-prop-b { animation: preview-ambient 4s ease-in-out infinite; }
@keyframes preview-ambient { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

/* Training is a measured arena footer, never an absolute overlay. */
#training-panel {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: none;
    max-height: min(32dvh, 240px);
    box-sizing: border-box;
    padding: 10px;
    border: 4px solid var(--ink-900);
    border-top: 0;
    box-shadow: var(--hard-shadow);
    background: var(--paper-1);
    text-align: left;
}
.training-objective { display: grid; grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.2fr); gap: 8px; align-items: start; }
#training-panel .training-trial-picker { width: auto; margin: 0; }
#training-panel select { box-sizing: border-box; max-width: 100%; min-height: 32px; margin: 0; }
.training-trial-brief, .training-trial-progress { max-width: none; margin: 0 0 4px; line-height: 1.3; }
#training-panel #training-trial-next { grid-column: 1 / -1; }
#training-options { margin-top: 5px; border-top: 1px solid #b9b1a1; }
#training-options summary { padding: 8px 4px; min-height: 30px; box-sizing: border-box; font-size: 11px; font-weight: bold; cursor: pointer; }
.training-options-content { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#training-panel fieldset { flex: 1 1 auto; margin: 0; gap: 5px; }
#training-panel button { min-height: 32px; padding: 6px 10px; cursor: pointer; }
@media (max-width: 559px), (max-height: 500px) {
    #training-panel { padding: 6px; max-height: 28dvh; }
    .training-objective { grid-template-columns: 1fr; gap: 4px; }
    #training-panel .training-trial-picker { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
    #training-panel .training-trial-picker > span { max-width: 90px; font-size: 10px; }
    .training-feedback { display: grid; grid-template-columns: 1fr; }
    .training-trial-brief, .training-trial-progress { padding: 3px 6px; font-size: 10px; }
}

/* Short paper/ink interactions never delay focus or simulation. */
.menu-actions button, .audio-preview-actions button, #game-over button,
#pause-button, #training-panel button, .github-link, .menu-disclosure > summary {
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.menu-actions--modes button, .menu-actions--utilities button, #game-over button { box-shadow: 3px 3px 0 #111; }
.menu-actions button:active, #game-over button:active { box-shadow: 1px 1px 0 #111; }
#main-menu .menu-actions--primary button:hover { color: #111; transform: translate(-1px, -1px); }
.menu-card { animation: paper-enter 180ms ease-out; }
#game-over { animation: result-enter 180ms ease-out; width: min(650px, calc(100vw - 24px)); background: var(--paper-1); }
@keyframes paper-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes result-enter { from { opacity: 0; } to { opacity: 1; } }
.result-verdict { font: italic clamp(28px, 5vw, 42px) Impact, "Arial Black", sans-serif; letter-spacing: 0.04em; }
.result-score { margin: 8px 0 4px; font: 800 clamp(46px, 10vw, 68px) "Cascadia Mono", Consolas, monospace; line-height: 1; }
.post-match-medal { display: grid; grid-template-columns: 45px minmax(0, 1fr); align-items: center; column-gap: 12px; text-align: left; border-width: 2px; margin-top: 12px; }
.post-match-medal::before { content: "★"; grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid #111; border-radius: 50%; background: #ffd447; font-size: 26px; color: #111; box-shadow: 3px 3px 0 #111; }
.post-match-medal[data-medal="firewall"]::before { content: "▥"; border-radius: 4px 4px 18px 18px; }
.post-match-medal[data-medal="combo"]::before { content: "×2"; border-radius: 4px; font-size: 23px; }
.post-match-medal[data-medal="survivor"]::before { content: "!"; }
.post-match-medal[data-medal="machine"]::before { content: "⌘"; border-radius: 5px; background: #e9dff4; }
.post-match-medal span { font-size: 20px; }
.post-match-medal small { font-size: 12px; }
.post-match-summary { border-width: 1px; border-left: 4px solid #00a4bf; }
#result-card-details { background: #fffdf5; }
#result-card-details summary { min-height: 36px; line-height: 36px; }
.result-share-actions { padding-top: 5px; }
#game-over #restart-button { background: #ffd447; }
.btn { box-shadow: 3px 4px 0 #111; border-color: #111; }
#btn-punch { background: #fff0df; color: #111; }
#btn-kick { background: #e1f0ff; color: #111; }
#btn-special[data-state="special-ready"], #btn-special[data-state="cancel-used"] { color: #111; }
#btn-block, #btn-crouch, #btn-jump, #btn-left, #btn-right { background: #fffdf5; color: #111; }
#controls .btn:active { background: #111; color: #fffdf5; box-shadow: 1px 1px 0 #111; transform: translate(2px, 2px); }
.touch-glyph { font-size: 22px; }
.btn { flex-direction: column; gap: 2px; }
html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (max-height: 500px) {
    #main-menu .main-menu-card { padding: 10px 16px; }
    #main-menu .menu-card h1 { font-size: 38px; }
    .hero-art { max-height: 95px; }
    .menu-duel-hero { margin: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
    html:not([data-reduced-motion="false"]) *,
    html:not([data-reduced-motion="false"]) *::before,
    html:not([data-reduced-motion="false"]) *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}