/* Final mobile fit pass loaded after the main stylesheet. */
.music-drawer-toggle {
    position: absolute;
    top: 12px;
    left: 10px;
    z-index: 55;
    min-height: 38px;
    padding: 0 14px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: var(--ink);
    background: var(--gold);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    pointer-events: auto;
}

@media (max-width: 1164px) and (min-width: 676px) {
    #game-shell[data-state="customize"] .customize-panel {
        align-items: center;
        justify-items: start;
        padding: 64px clamp(14px, 4vw, 48px) 30px;
        background:
            radial-gradient(circle at 68% 48%, rgba(255, 244, 205, 0.16), transparent 30%),
            linear-gradient(90deg, rgba(6, 18, 29, 0.72), rgba(6, 18, 29, 0.2) 42%, rgba(6, 18, 29, 0.03));
    }

    #game-shell[data-state="customize"] .customize-card {
        width: clamp(260px, 32vw, 360px);
        max-height: calc(100vh - 96px);
        padding: 14px;
        border-radius: 12px;
    }

    #game-shell[data-state="customize"] .customize-card h2 {
        margin-top: 8px;
        font-size: clamp(1.16rem, 2.4vw, 1.55rem);
        line-height: 1.03;
    }

    #game-shell[data-state="customize"] .customize-row {
        grid-template-columns: 38px 1fr 38px;
        gap: 7px;
        margin-top: 7px;
        padding: 7px;
    }

    #game-shell[data-state="customize"] .customize-row .selector-btn {
        width: 38px;
        min-height: 38px;
    }

    #game-shell[data-state="customize"] .customize-row span {
        font-size: 0.6rem;
    }

    #game-shell[data-state="customize"] .customize-row strong {
        font-size: 0.82rem;
    }

    #game-shell[data-state="customize"] .customize-card > .primary-btn {
        margin-top: 9px;
        min-height: 48px;
        font-size: 0.9rem;
    }
}

@media (max-width: 988px) and (min-width: 676px) {
    #game-shell[data-state="customize"] .customize-card {
        width: 260px;
        padding: 10px;
    }

    #game-shell[data-state="customize"] .customize-card h2 {
        font-size: 1.06rem;
    }

    #game-shell[data-state="customize"] .customize-row {
        grid-template-columns: 31px 1fr 31px;
        gap: 5px;
        margin-top: 5px;
        padding: 5px;
    }

    #game-shell[data-state="customize"] .customize-row .selector-btn {
        width: 31px;
        min-height: 31px;
    }

    #game-shell[data-state="customize"] .customize-row span {
        font-size: 0.5rem;
    }

    #game-shell[data-state="customize"] .customize-row strong {
        font-size: 0.68rem;
    }

    #game-shell[data-state="customize"] .customize-card > .primary-btn {
        min-height: 44px;
        font-size: 0.82rem;
    }
}

@media (max-width: 738px) {
    #game-shell[data-state="gameover"] .ranking-drawer-toggle {
        display: inline-flex;
        top: 12px;
        right: 12px;
        z-index: 55;
    }

    #game-shell[data-state="gameover"] .ranking-panel[data-mode="full"] {
        top: 62px;
        right: 10px;
        left: auto;
        bottom: auto;
        width: min(318px, calc(100vw - 20px));
        max-height: calc(100vh - 76px);
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateX(calc(100% + 18px));
        transition: opacity 160ms ease, transform 160ms ease;
        z-index: 50;
    }

    #game-shell[data-state="gameover"][data-ranking-open="true"] .ranking-panel[data-mode="full"] {
        opacity: 1;
        overflow: auto;
        pointer-events: auto;
        transform: translateX(0);
    }

    #game-over {
        justify-items: center;
        align-content: center;
        padding: 24px 12px;
    }

    #game-over .result-panel {
        width: min(500px, calc(100vw - 24px));
        max-width: none;
    }
}

@media (max-width: 677px) and (min-width: 509px) {
    #game-shell[data-state="customize"] .customize-panel {
        align-items: center;
        justify-items: start;
        padding: 44px 12px 20px;
        background: linear-gradient(90deg, rgba(10, 22, 32, 0.28), rgba(10, 22, 32, 0.04) 56%, rgba(10, 22, 32, 0));
    }

    #game-shell[data-state="customize"] .customize-card {
        width: 258px;
        max-height: calc(100vh - 76px);
        padding: 10px;
    }

    #game-shell[data-state="customize"] .customize-card h2 {
        margin-top: 7px;
        font-size: 1.05rem;
    }

    #game-shell[data-state="customize"] .customize-row {
        grid-template-columns: 31px 1fr 31px;
        gap: 5px;
        margin-top: 5px;
        padding: 5px;
    }

    #game-shell[data-state="customize"] .customize-row .selector-btn {
        width: 31px;
        min-height: 31px;
    }

    #game-shell[data-state="customize"] .customize-row span {
        font-size: 0.5rem;
    }

    #game-shell[data-state="customize"] .customize-row strong {
        font-size: 0.68rem;
    }

    #game-shell[data-state="customize"] .customize-card > .primary-btn {
        margin-top: 8px;
        min-height: 44px;
        font-size: 0.82rem;
    }
}

@media (max-width: 642px) {
    #start-screen.screen {
        padding: 132px 14px 26px;
    }

    .start-copy {
        max-width: min(100%, 430px);
    }

    h1 {
        font-size: clamp(2.4rem, 14vw, 4rem);
        line-height: 0.9;
    }

    .start-copy p {
        max-width: min(100%, 430px);
        font-size: 0.92rem;
        line-height: 1.22;
    }

    .runner-card {
        width: min(100%, calc(100vw - 28px));
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .runner-card .ghost-btn {
        width: 100%;
    }

    #game-shell[data-state="menu"] .ranking-drawer-toggle,
    #game-shell[data-state="gameover"] .ranking-drawer-toggle {
        display: inline-flex;
        z-index: 55;
    }

    #game-shell[data-state="menu"] .ranking-panel[data-mode="full"],
    #game-shell[data-state="gameover"] .ranking-panel[data-mode="full"] {
        right: 10px;
        left: auto;
        bottom: auto;
        width: min(318px, calc(100vw - 20px));
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateX(calc(100% + 18px));
        transition: opacity 160ms ease, transform 160ms ease;
        z-index: 50;
    }

    #game-shell[data-state="menu"] .ranking-panel[data-mode="full"] {
        top: 64px;
        max-height: calc(100vh - 74px);
    }

    #game-shell[data-state="gameover"] .ranking-panel[data-mode="full"] {
        top: 62px;
        max-height: calc(100vh - 76px);
    }

    #game-shell[data-ranking-open="true"] .ranking-drawer-toggle {
        color: var(--ink);
        background: var(--paper);
    }

    #game-shell[data-ranking-open="true"] .ranking-panel[data-mode="full"] {
        opacity: 1;
        overflow: auto;
        pointer-events: auto;
        transform: translateX(0);
    }

    .ranking-panel[data-mode="live"] {
        width: 166px;
    }
}

@media (max-width: 553px) {
    #game-shell[data-state="menu"] .music-drawer-toggle,
    #game-shell[data-state="paused"] .music-drawer-toggle {
        display: inline-flex;
    }

    #game-shell[data-music-open="true"] .music-drawer-toggle {
        color: var(--ink);
        background: var(--paper);
    }

    #game-shell[data-state="menu"] .music-player,
    #game-shell[data-state="paused"] .music-player {
        top: 62px;
        left: 10px;
        right: auto;
        bottom: auto;
        width: min(318px, calc(100vw - 20px));
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 160ms ease, transform 160ms ease;
        z-index: 50;
    }

    #game-shell[data-music-open="true"] .music-player {
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    #game-shell[data-state="menu"] .ranking-panel[data-mode="full"] {
        top: 64px;
        max-height: calc(100vh - 74px);
    }
}

@media (max-width: 508px) {
    #game-shell[data-state="customize"] .customize-panel {
        align-items: end;
        justify-items: center;
        padding: 6px 8px 8px;
        background: linear-gradient(180deg, rgba(10, 22, 32, 0.04), rgba(10, 22, 32, 0.42));
    }

    #game-shell[data-state="customize"] .customize-card {
        display: flex;
        flex-direction: column;
        width: calc(100vw - 16px);
        max-height: 46vh;
        padding: 7px;
        overflow: hidden;
    }

    #game-shell[data-state="customize"] .customize-card > .eyebrow {
        display: none;
    }

    #game-shell[data-state="customize"] .customize-card h2 {
        margin-top: 0;
        margin-bottom: 4px;
        font-size: 0.92rem;
        line-height: 1;
        flex: 0 0 auto;
    }

    #game-shell[data-state="customize"] .customize-row {
        grid-template-columns: 28px 1fr 28px;
        gap: 4px;
        height: 30px;
        min-height: 30px;
        flex: 0 0 30px;
        margin-top: 3px;
        padding: 3px;
        border-radius: 7px;
    }

    #game-shell[data-state="customize"] .customize-row div {
        min-width: 0;
    }

    #game-shell[data-state="customize"] .customize-row .selector-btn {
        width: 28px;
        height: 24px;
        min-height: 28px;
        border-radius: 7px;
        padding: 0;
        font-size: 0.72rem;
    }

    #game-shell[data-state="customize"] .customize-row span {
        font-size: 0.38rem;
        line-height: 1;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #game-shell[data-state="customize"] .customize-row strong {
        margin-top: 1px;
        font-size: 0.56rem;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #game-shell[data-state="customize"] .customize-card > .primary-btn {
        flex: 0 0 auto;
        margin-top: 4px;
        min-height: 32px;
        padding: 0 10px;
        font-size: 0.7rem;
    }
}

@media (max-width: 426px) {
    .quiz-panel {
        padding: 8px;
    }

    .quiz-window {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        padding: 12px;
        overflow-y: auto;
    }

    .quiz-window h2 {
        font-size: 1.34rem;
        line-height: 1.04;
    }

    .quiz-badge {
        padding: 8px 12px;
        font-size: 0.62rem;
    }

    #quiz-difficulty {
        margin-top: 10px;
        font-size: 0.68rem;
    }

    #quiz-question {
        margin-top: 10px;
        padding: 10px 10px 13px;
        font-size: 0.84rem;
        line-height: 1.18;
    }

    #quiz-question::after {
        width: 82%;
        height: 3px;
    }

    .quiz-options {
        padding: 0 6px 8px;
    }

    .quiz-option {
        min-height: 44px;
        gap: 8px;
        padding: 8px 10px;
        font-size: 0.78rem;
        line-height: 1.18;
    }
}

@media (max-width: 330px) {
    #game-over {
        align-content: start;
        padding: 6px;
        overflow-y: auto;
    }

    #game-over .result-panel {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
        padding: 10px;
        overflow-y: auto;
    }

    #game-over .result-panel h2 {
        font-size: 1.5rem;
        line-height: 1.05;
    }

    .result-stats {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .score-form div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .score-form input,
    .score-form .primary-btn {
        min-height: 42px;
    }

    .result-actions {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

@media (max-width: 320px) {
    .music-drawer-toggle {
        left: 10px;
        padding: 0 12px;
    }

    #game-shell[data-state="menu"] .ranking-drawer-toggle {
        top: 12px;
        right: 10px;
        padding: 0 12px;
    }

    #game-shell[data-state="menu"] .ranking-panel[data-mode="full"] {
        top: 64px;
        max-height: calc(100vh - 74px);
    }
}

/* Final game-over fit pass. */
#game-over .end-actions .ghost-btn {
    color: #0f2d1f;
    background: linear-gradient(135deg, #e7f8ed, #b9edca);
    box-shadow: inset 0 0 0 2px rgba(31, 138, 69, 0.16), 0 12px 24px rgba(31, 138, 69, 0.14);
}

#game-over .end-actions .ghost-btn:hover,
#game-over .end-actions .ghost-btn:focus-visible {
    color: #082215;
    background: linear-gradient(135deg, #d6f5e0, #9fe5bb);
}

@media (max-width: 1360px) and (min-width: 739px) {
    #game-shell[data-state="gameover"] #game-over {
        align-content: center;
        justify-items: start;
        padding: 36px 368px 36px clamp(24px, 4vw, 70px);
    }

    #game-shell[data-state="gameover"] #game-over .result-panel {
        width: min(560px, calc(100vw - 440px));
        max-width: none;
    }

    #game-shell[data-state="gameover"] .ranking-panel[data-mode="full"] {
        top: 24px;
        right: 18px;
        left: auto;
        bottom: auto;
        width: min(320px, calc(100vw - 690px));
        min-width: 286px;
        max-height: calc(100vh - 48px);
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: none;
    }
}

@media (max-width: 330px) {
    #game-over {
        align-content: center;
        justify-items: center;
        padding: 8px;
        overflow: hidden;
    }

    #game-over .result-panel {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        padding: 12px;
        overflow: hidden;
    }

    #game-over .result-panel h2 {
        font-size: 1.36rem;
        line-height: 1.04;
    }

    #game-over .result-stats {
        grid-template-columns: 1fr;
        gap: 6px;
        margin: 10px 0;
    }

    #game-over .result-stats div {
        min-height: 0;
        padding: 8px;
    }

    #game-over .score-form div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    #game-over .score-form input,
    #game-over .score-form .primary-btn,
    #game-over .end-actions .ghost-btn {
        min-height: 40px;
    }

    #game-over .end-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 8px;
    }
}

/* Mobile gameplay guard and compact live ranking. */
html,
body,
#game-shell {
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
}

#game-shell[data-state="running"],
#game-shell[data-state="running"] #game-canvas,
#game-shell[data-state="running"] #game-canvas canvas {
    touch-action: none;
}

@media (max-width: 600px) {
    #game-shell .ranking-panel[data-mode="live"] {
        top: 6px;
        right: 6px;
        left: auto;
        width: 144px;
        padding: 5px;
        border-radius: 8px;
        opacity: 0.9;
    }

    #game-shell .ranking-panel[data-mode="live"] .ranking-head {
        gap: 4px;
    }

    #game-shell .ranking-panel[data-mode="live"] .ranking-head h2 {
        font-size: 0.6rem;
    }

    #game-shell .ranking-panel[data-mode="live"] .ranking-head span {
        min-height: 17px;
        padding: 0 5px;
        font-size: 0.48rem;
    }

    #game-shell .ranking-panel[data-mode="live"] #ranking-list {
        gap: 3px;
        margin-top: 5px;
    }

    #game-shell .ranking-panel[data-mode="live"] #ranking-list li {
        grid-template-columns: 17px 1fr auto;
        gap: 3px;
        min-height: 22px;
        padding: 2px 4px;
        border-radius: 6px;
        font-size: 0.58rem;
    }

    #game-shell .ranking-panel[data-mode="live"] .rank-number {
        width: 15px;
        height: 15px;
        border-radius: 5px;
        font-size: 0.5rem;
    }

    #game-shell .ranking-panel[data-mode="live"] #ranking-list .score-time strong {
        font-size: 0.58rem;
    }

    #game-shell .ranking-panel[data-mode="live"] #ranking-list .time {
        display: none;
    }
}

@media (max-width: 420px) {
    #game-shell .ranking-panel[data-mode="live"] {
        width: 132px;
    }

    #game-shell .ranking-panel[data-mode="live"] .ranking-head h2 {
        font-size: 0.56rem;
    }

    #game-shell .ranking-panel[data-mode="live"] #ranking-list li {
        grid-template-columns: 16px 1fr auto;
        min-height: 21px;
        font-size: 0.54rem;
    }

    #game-shell .ranking-panel[data-mode="live"] .rank-number {
        width: 14px;
        height: 14px;
        font-size: 0.46rem;
    }

    #game-shell .ranking-panel[data-mode="live"] #ranking-list .score-time strong {
        font-size: 0.54rem;
    }
}