@import url("./board-header-first-paint.css?v=1");
@import url("./quiz-editor-first-paint.css?v=1");
@import url("./game-content-viewport-fit.css?v=6");
@import url("./theme-scrollbars.css?v=1");
@import url("./host-lobby.css?v=1");
@import url("./host-lobby-browser-fixes.css?v=1");
@import url("./host-running-game.css?v=6");
@import url("./game-intro-stage.css?v=9");
@import url("./game-intro-stage-refinements.css?v=4");
@import url("./final-question-host-stage.css?v=4");
@import url("./final-question-host-answer-space.css?v=2");
@import url("./round-summary-podium.css?v=2");
@import url("./board-click-feedback.css?v=1");
@import url("./portal-cosmetic-tweaks.css?v=1");
@import url("./portal-visual-polish.css?v=1");

/*
 * Keep gameplay touch-friendly on phones without disabling pinch zoom.
 * `manipulation` preserves pan/pinch gestures but removes the browser's
 * double-tap-to-zoom gesture that can accidentally magnify the game UI.
 */
body.gameplay-layout {
    touch-action: manipulation;
}

/*
 * Completing the Final Question updates the host shell's data-game-status to
 * `completed` before the soft-navigation response replaces the old Final Answer
 * markup. The completed-podium stylesheet otherwise turns that still-mounted
 * answer panel into the narrow results grid for one paint. Hold the answer
 * geometry until the answer markup is actually replaced.
 */
body.gameplay-layout
    .final-question-host[data-game-status="completed"]
    .final-question-panel:has(> .answer-presentation) {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0 clamp(8px, 1vw, 16px) clamp(8px, 1vw, 16px);
    display: flex;
    align-content: normal;
    align-items: stretch;
    justify-items: normal;
    gap: 0;
    overflow: hidden;
}

body.gameplay-layout
    .final-question-host[data-game-status="completed"]
    .final-question-panel:has(> .answer-presentation)::before {
    content: none;
}

body[aria-busy="true"] {
    overflow: hidden;
    touch-action: none;
}

.app-busy-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    overflow: hidden;
}

.app-busy-overlay[open] {
    display: grid;
    place-items: center;
}

.app-busy-overlay::backdrop {
    background: rgba(7, 7, 9, 0.72);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter: blur(7px) saturate(0.82);
    backdrop-filter: blur(7px) saturate(0.82);
    animation: app-busy-backdrop-in 140ms ease-out both;
}

.app-busy-visual {
    position: relative;
    width: clamp(92px, 14vw, 132px);
    aspect-ratio: 1;
    animation: app-busy-visual-in 160ms ease-out both;
    filter: drop-shadow(0 0 24px color-mix(in srgb, var(--red-bright) 34%, transparent));
}

.app-busy-orbit {
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
}

.app-busy-orbit-outer {
    inset: 0;
    border: 4px solid color-mix(in srgb, var(--text) 16%, transparent);
    border-top-color: var(--red-bright);
    border-right-color: color-mix(in srgb, var(--red-bright) 70%, transparent);
    border-bottom-color: transparent;
    animation: app-busy-spin 1.05s cubic-bezier(0.55, 0.16, 0.38, 0.82) infinite;
}

.app-busy-orbit-inner {
    inset: 18%;
    border: 3px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-top-color: transparent;
    border-left-color: var(--red);
    border-bottom-color: color-mix(in srgb, var(--red-bright) 72%, transparent);
    animation: app-busy-spin-reverse 1.45s cubic-bezier(0.55, 0.16, 0.38, 0.82) infinite;
}

.app-busy-core {
    position: absolute;
    inset: 37%;
    background: linear-gradient(135deg, var(--red-bright), var(--red));
    clip-path: polygon(50% 0, 100% 38%, 78% 100%, 22% 100%, 0 38%);
    box-shadow: 0 0 20px color-mix(in srgb, var(--red-bright) 72%, transparent);
    animation: app-busy-core-pulse 1.15s ease-in-out infinite;
}

@keyframes app-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes app-busy-spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes app-busy-core-pulse {
    0%, 100% {
        transform: scale(0.86);
        opacity: 0.66;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes app-busy-backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes app-busy-visual-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-busy-overlay::backdrop,
    .app-busy-visual,
    .app-busy-orbit,
    .app-busy-core {
        animation: none;
    }

    .app-busy-orbit-outer {
        transform: rotate(38deg);
    }

    .app-busy-orbit-inner {
        transform: rotate(-28deg);
    }

    .app-busy-core {
        opacity: 0.86;
    }
}

/* Keep media captions at 70% of the text size used by the matching content view. */
.game-content-caption {
    font-size: clamp(1.26rem, 3.15vw, 2.8rem);
}

.question-review-content .game-content-caption {
    font-size: clamp(0.98rem, 2.1vw, 1.82rem);
}

.final-player-answer-presentation .game-content-caption {
    font-size: clamp(1.4rem, 4.2vw, 3.5rem);
}

.four-clue-grid .game-content-caption {
    font-size: clamp(0.7rem, 1.54vw, 1.575rem);
}

.question-preview-modal .question-preview-caption {
    font-size: clamp(1.26rem, 2.94vw, 3.22rem);
}

.question-preview-modal .question-preview-content.four-clue-grid .question-preview-caption {
    font-size: clamp(0.7rem, 1.54vw, 1.575rem);
}

.game-intro-page .game-intro-caption {
    font-size: clamp(0.84rem, 1.54vw, 1.4rem);
}

/* Keep the final five-second host timer warning visible and synchronized with the 500 ms warning cadence. */
.host-game-timer.timer-warning.timer-warning-pulse {
    animation: game-timer-warning-pulse 500ms ease-out 1;
}

@keyframes game-timer-warning-pulse {
    0%, 100% {
        transform: scale(1);
        filter: none;
    }
    45% {
        transform: scale(1.09);
        filter:
            brightness(1.45)
            drop-shadow(0 0 18px color-mix(in srgb, var(--red-bright) 86%, transparent));
    }
}

@media (prefers-reduced-motion: reduce) {
    .host-game-timer.timer-warning.timer-warning-pulse {
        animation: none;
        filter: brightness(1.3);
    }
}

/* Let small image blocks grow into the available content area while preserving the existing bounds. */
.game-content-presentation .game-content-blocks:not(.four-clue-grid) > .game-content-block {
    width: 100%;
}

.game-content-presentation .game-content-blocks:not(.four-clue-grid) > .game-content-block > .game-content-image {
    width: 100%;
    height: auto;
}

.question-preview-modal .question-preview-content:not(.four-clue-grid) .question-preview-image {
    width: 100%;
    height: auto;
}

.game-intro-page .game-intro-image-block {
    width: 100%;
}

.game-intro-page .game-intro-image {
    width: min(900px, 100%);
    height: auto;
}

/* Keep category and intro titles visually consistent while preserving stored casing. */
body.gameplay-layout:has(.host-game-board[data-game-status="running"]) .host-board-column > h3,
body[data-quiz-editor-workspace="board"] .category-title,
body.gameplay-layout .game-intro-page .game-intro-heading,
body[data-quiz-editor-workspace="description"] .description-preview-modal .question-preview-screen .question-preview-title {
    text-transform: uppercase;
}

/* Scale round/category description titles down consistently in gameplay and editor preview. */
body.gameplay-layout .game-intro-page .game-intro-heading {
    font-size: clamp(2.2rem, 5.3vw, 5.4rem);
}

body[data-quiz-editor-workspace="description"]
    .description-preview-modal
    .question-preview-screen
    .question-preview-title {
    font-size: clamp(1.9rem, 4.8vw, 5.2rem);
}

@media (max-width: 820px) {
    body.gameplay-layout .game-intro-page .game-intro-heading {
        font-size: clamp(1.9rem, 8.8vw, 3.7rem);
    }
}

@media (max-height: 760px) {
    body.gameplay-layout .game-intro-page .game-intro-heading {
        font-size: clamp(1.8rem, 5vh, 3.5rem);
    }
}

@media (max-height: 620px) {
    body.gameplay-layout .game-intro-page .game-intro-heading {
        font-size: clamp(1.5rem, 6.4vh, 2.8rem);
    }
}

/* Keep the add-block popup above the description cards in round/category editors. */
body[data-quiz-editor-workspace="description"] .content-block-section {
    overflow: visible;
}

body[data-quiz-editor-workspace="description"] .content-block-section-header {
    position: relative;
    z-index: 50;
    overflow: visible;
}

body[data-quiz-editor-workspace="description"] .content-block-add-menu {
    z-index: 51;
}

body[data-quiz-editor-workspace="description"] .content-block-type-menu {
    z-index: 52;
}

body[data-quiz-editor-workspace="description"] .content-block-list {
    position: relative;
    z-index: 1;
}

/* Hide the player-side achievement reset action on pointer desktops until the card is hovered. */
@media (hover: hover) and (pointer: fine) {
    .player-achievements-dialog .player-achievement-card.is-unlocked .player-achievement-reset-button {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-4px);
    }

    .player-achievements-dialog .player-achievement-card.is-unlocked:hover .player-achievement-reset-button,
    .player-achievements-dialog .player-achievement-card.is-unlocked:focus-within .player-achievement-reset-button,
    .player-achievements-dialog .player-achievement-reset-button:focus-visible {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

/* Touch/mobile layouts keep the reset action visible because there is no reliable hover state. */
@media (hover: none), (pointer: coarse), (max-width: 600px) {
    .player-achievements-dialog .player-achievement-card.is-unlocked .player-achievement-reset-button {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}