/**
 * Responsive game viewport, portrait layout and compact mobile shell.
 */

@media (max-width: 900px) {
    .bgf-character-select__copy {
        padding-right: 120px;
    }

    .bgf-profile-grid {
        grid-template-columns: 1fr;
    }

    .bgf-profile-card {
        min-height: 0;
    }
}

@media (max-width: 720px) and (max-aspect-ratio: 1 / 1) {
    .bgf-canvas-frame:not(:fullscreen):not([data-bgf-fullscreen="fallback"]) {
        height: clamp(480px, calc(100vh - 24px), 820px);
        min-height: 0;
        aspect-ratio: auto;
    }
}

@supports (height: 100svh) {
    @media (max-width: 720px) and (max-aspect-ratio: 1 / 1) {
        .bgf-canvas-frame:not(:fullscreen):not([data-bgf-fullscreen="fallback"]) {
            height: clamp(480px, calc(100svh - 24px), 820px);
        }
    }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
    .bgf-canvas-frame:not(:fullscreen):not([data-bgf-fullscreen="fallback"]) {
        height: max(300px, calc(100vh - 12px));
        min-height: 0;
        aspect-ratio: auto;
    }
}

@supports (height: 100svh) {
    @media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
        .bgf-canvas-frame:not(:fullscreen):not([data-bgf-fullscreen="fallback"]) {
            height: max(300px, calc(100svh - 12px));
        }
    }
}

@media (max-width: 720px) {
    .bgf-character-select {
        align-content: start;
        padding: 16px 14px 74px;
    }

    .bgf-character-select[data-bgf-player-step="intro"] {
        align-content: center;
        overflow: hidden;
    }

    .bgf-player-intro {
        gap: 10px;
        padding-block: 8px;
    }

    .bgf-player-intro h2 {
        font-size: clamp(1.9rem, 10vw, 2.7rem);
    }

    .bgf-character-select__copy {
        padding-right: 0;
    }

    .bgf-character-select__copy .bgf-game-funnel__lead {
        display: none;
    }

    .bgf-character-carousel:not([data-bgf-navigation="hidden"]) {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
    }

    .bgf-character-carousel__arrow {
        min-width: 40px;
        min-height: 58px;
    }

    .bgf-profile-card {
        padding: 10px;
    }

    .bgf-character-card {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .bgf-settings-panel {
        width: calc(100% - 20px);
        max-height: calc(100% - 20px);
        box-shadow: 0 18px 36px color-mix(in srgb, var(--boost-ui-secondary) 14%, transparent);
    }

    .bgf-settings-panel__body {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .bgf-settings-help {
        grid-column: auto;
    }

    .bgf-settings-panel__actions {
        max-height: 34vh;
        overflow: auto;
    }

    .bgf-settings-panel__actions .bgf-pixel-button {
        flex: 1 1 180px;
    }

    .bgf-shell-controls {
        gap: 6px;
    }

    .bgf-icon-button {
        width: 38px;
        height: 38px;
        padding: 7px;
    }

    .bgf-character-carousel {
        grid-template-columns: minmax(0, 1fr);
    }

    .bgf-character-carousel__arrow {
        display: none;
    }

    .bgf-pre-game {
        padding: 10px;
    }

    .bgf-pre-game__card {
        gap: 9px;
        padding: 18px 14px;
        box-shadow: 0 18px 36px color-mix(in srgb, var(--boost-ui-secondary) 14%, transparent);
    }

    .bgf-pre-game .bgf-pixel-button {
        flex: 1 1 100%;
    }
}

@container bgf-game (max-width: 480px) {
    .bgf-touch-hint {
        right: max(12px, var(--boost-game-safe-area-right));
        bottom: calc(max(16px, var(--boost-game-safe-area-bottom)) + var(--_shell-controls-height, 0px) + 12px);
        max-width: none;
    }
}

@container bgf-game (max-height: 640px) {
    .bgf-character-select {
        align-content: start;
        gap: 7px;
        padding: 12px 14px 64px;
    }

    .bgf-character-select[data-bgf-player-step="intro"] {
        align-content: center;
    }

    .bgf-player-intro {
        gap: 8px;
    }

    .bgf-player-intro .bgf-game-funnel__lead {
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .bgf-character-select__copy h2 {
        margin-bottom: 4px;
        font-size: clamp(1.45rem, 4vw, 2.15rem);
    }

    .bgf-character-select__copy .bgf-game-funnel__lead {
        display: none;
    }

    .bgf-setup-dimension {
        gap: 5px;
    }

    .bgf-profile-card {
        min-height: 52px;
        padding: 8px 10px;
    }

    .bgf-character-card {
        min-height: 66px;
    }

    .bgf-game-funnel__actions {
        margin-top: 2px;
    }
}

@container bgf-game (max-width: 900px) {
    .bgf-character-select {
        align-content: start;
        padding: 16px 14px 72px;
    }

    .bgf-character-select[data-bgf-player-step="intro"] {
        align-content: center;
    }

    .bgf-character-select__copy {
        padding-right: 0;
    }

    .bgf-profile-grid {
        grid-template-columns: 1fr;
    }

    .bgf-profile-card {
        min-height: 0;
    }
}

@container bgf-game (max-width: 640px) {
    .bgf-character-select__copy h2 {
        font-size: clamp(1.45rem, 8vw, 2rem);
    }

    .bgf-setup-dimension {
        gap: 6px;
    }

    .bgf-character-carousel:not([data-bgf-navigation="hidden"]) {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 7px;
    }

    .bgf-character-carousel__arrow {
        min-width: 36px;
        min-height: 52px;
        padding: 5px;
    }

    .bgf-game-funnel__actions .bgf-pixel-button {
        flex: 1 1 150px;
    }
}

@container bgf-game (max-aspect-ratio: 4 / 5) {
    .bgf-hud {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100% - 16px, 520px);
        gap: 5px 8px;
        padding: 6px 8px;
    }

    .bgf-hud__metrics {
        display: contents;
    }

    .bgf-hud__metric,
    .bgf-hud__resource {
        min-height: 30px;
        padding: 3px 5px;
        border: 1px solid var(--boost-ui-border);
        background: color-mix(in srgb, var(--boost-ui-surface) 86%, transparent);
    }

    .bgf-hud__meter {
        height: 4px;
    }

    .bgf-stage-indicator {
        padding: 4px 8px;
    }

    .bgf-shell-controls {
        right: max(8px, var(--boost-game-safe-area-right));
        bottom: max(8px, var(--boost-game-safe-area-bottom));
    }
}

@media (pointer: coarse) {
    @container bgf-game (max-width: 640px) {
        .bgf-character-carousel {
            grid-template-columns: minmax(0, 1fr);
        }

        .bgf-character-carousel__arrow {
            display: none;
        }

        .bgf-profile-grid {
            touch-action: pan-y pinch-zoom;
        }
    }
}

/* Keep compact landscape rules after generic mobile rules so the cascade cannot undo them. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
    .bgf-character-select {
        align-content: start;
        gap: 6px;
        padding: 10px 12px 58px;
    }

    .bgf-character-select[data-bgf-player-step="intro"] {
        align-content: center;
        overflow: hidden;
    }

    .bgf-player-intro {
        gap: 6px;
        padding-block: 4px;
    }

    .bgf-player-intro h2 {
        font-size: clamp(1.35rem, 7vh, 2rem);
    }

    .bgf-player-intro .bgf-game-funnel__lead {
        display: none;
    }
}

/* Mobile layout governance: safe-area, orientation hints and compact runtime controls. */
.bgf-game-funnel {
    --boost-game-mobile-touch-target: 44px;
    --boost-game-mobile-controls-gap: 10px;
}

.bgf-orientation-hint {
    position: absolute;
    z-index: 34;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(18px, var(--boost-game-safe-area-top)) max(18px, var(--boost-game-safe-area-right)) max(18px, var(--boost-game-safe-area-bottom)) max(18px, var(--boost-game-safe-area-left));
    background: color-mix(in srgb, var(--boost-ui-secondary) 58%, transparent);
    color: var(--boost-ui-text);
    text-align: center;
    backdrop-filter: blur(4px);
}

.bgf-orientation-hint[hidden] {
    display: none;
}

.bgf-orientation-hint__card {
    display: grid;
    justify-items: center;
    gap: 9px;
    width: min(92%, 360px);
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--boost-ui-primary) 30%, var(--boost-ui-border));
    border-radius: 20px;
    background: color-mix(in srgb, var(--boost-ui-surface) 94%, transparent);
    box-shadow: 0 24px 52px color-mix(in srgb, var(--boost-ui-secondary) 18%, transparent);
}

.bgf-orientation-hint__card h3,
.bgf-orientation-hint__card p {
    margin: 0;
}

.bgf-orientation-hint__card h3 {
    font-size: clamp(1.1rem, 5vw, 1.55rem);
}

.bgf-orientation-hint__card p {
    color: var(--boost-ui-text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.bgf-orientation-hint__icon {
    display: block;
    width: 48px;
    height: 48px;
    border: 4px solid var(--boost-ui-primary);
    border-radius: 14px;
    transform: rotate(90deg);
}

.bgf-orientation-hint__icon::after {
    display: block;
    width: 12px;
    height: 4px;
    margin: 36px auto 0;
    border-radius: 999px;
    background: var(--boost-ui-primary);
    content: "";
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-icon-button,
.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-touch-control,
.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-pixel-button {
    min-width: var(--boost-game-mobile-touch-target);
    min-height: var(--boost-game-mobile-touch-target);
}

.bgf-game-funnel[data-bgf-mobile-layout="true"][data-bgf-compact-shell="true"] .bgf-shell-controls {
    gap: 6px;
    right: max(8px, var(--boost-game-safe-area-right));
    bottom: max(8px, var(--boost-game-safe-area-bottom));
}

.bgf-game-funnel[data-bgf-mobile-layout="true"][data-bgf-compact-shell="true"] .bgf-icon-button {
    width: var(--boost-game-mobile-touch-target);
    height: var(--boost-game-mobile-touch-target);
    padding: 8px;
}

.bgf-game-funnel[data-bgf-mobile-layout="true"][data-bgf-avoid-control-overlap="true"] .bgf-touch-controls {
    bottom: calc(max(12px, var(--boost-game-safe-area-bottom)) + var(--_shell-controls-height, 0px) + var(--boost-game-mobile-controls-gap));
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-touch-controls__dpad {
    grid-template-columns: repeat(3, var(--boost-game-mobile-touch-target));
    grid-template-rows: repeat(3, var(--boost-game-mobile-touch-target));
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-touch-control {
    width: var(--boost-game-mobile-touch-target);
    height: var(--boost-game-mobile-touch-target);
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-touch-control[data-bgf-touch-kind="button"] {
    width: max(54px, calc(var(--boost-game-mobile-touch-target) + 10px));
    height: max(54px, calc(var(--boost-game-mobile-touch-target) + 10px));
}

.bgf-game-funnel[data-bgf-mobile-layout="true"][data-bgf-compact-hud="true"] .bgf-hud {
    max-width: min(100% - 18px, 300px);
    padding: 5px 7px;
}

.bgf-game-funnel[data-bgf-mobile-layout="true"][data-bgf-orientation="portrait"] .bgf-hud[data-bgf-hud-position^="top"] {
    top: max(8px, var(--boost-game-safe-area-top));
}

.bgf-game-funnel[data-bgf-mobile-layout="true"][data-bgf-orientation="portrait"] .bgf-hud[data-bgf-hud-position^="bottom"] {
    bottom: calc(max(8px, var(--boost-game-safe-area-bottom)) + var(--_shell-controls-height, 0px) + 8px);
}

.bgf-game-funnel[data-bgf-mobile-layout="true"][data-bgf-orientation="landscape"] .bgf-settings-panel,
.bgf-game-funnel[data-bgf-mobile-layout="true"][data-bgf-orientation="landscape"] .bgf-result-card,
.bgf-game-funnel[data-bgf-mobile-layout="true"][data-bgf-orientation="landscape"] .bgf-pause-panel__card {
    max-height: calc(100% - max(18px, var(--boost-game-safe-area-top)) - max(18px, var(--boost-game-safe-area-bottom)));
}

@media (orientation: landscape) and (max-height: 430px) and (pointer: coarse) {
    .bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-touch-controls {
        gap: 10px;
    }

    .bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-touch-controls__buttons {
        grid-auto-columns: max(50px, var(--boost-game-mobile-touch-target));
    }

    .bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-touch-control[data-bgf-touch-kind="button"] {
        width: max(50px, var(--boost-game-mobile-touch-target));
        height: max(50px, var(--boost-game-mobile-touch-target));
    }
}

@media (prefers-reduced-motion: reduce) {
    .bgf-orientation-hint {
        backdrop-filter: none;
    }
}


/* Direct-touch shooter shell: keep mobile gameplay dominant and result overlays compact. */
.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-game-funnel__result {
    align-items: center;
    padding:
        max(8px, var(--boost-game-safe-area-top))
        max(8px, var(--boost-game-safe-area-right))
        max(8px, var(--boost-game-safe-area-bottom))
        max(8px, var(--boost-game-safe-area-left));
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-result-card {
    width: min(100%, 560px);
    max-height: calc(100% - max(8px, var(--boost-game-safe-area-top)) - max(8px, var(--boost-game-safe-area-bottom)));
    padding: clamp(14px, 4vw, 20px);
    border-radius: 18px;
    scrollbar-gutter: auto;
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-result-card__header {
    gap: 4px;
    margin-bottom: 10px;
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-result-card__header h2 {
    font-size: clamp(1.55rem, 7vw, 2.05rem);
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-result-summary {
    margin-bottom: 12px;
    font-size: clamp(0.88rem, 3.8vw, 1rem);
    line-height: 1.42;
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-result-scores[data-bgf-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-result-score {
    min-width: 0;
    padding: 9px 10px;
    font-size: clamp(0.78rem, 3.5vw, 0.92rem);
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-result-score strong {
    font-size: clamp(1.05rem, 5vw, 1.35rem);
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-result-run-stats {
    gap: 4px 10px;
    margin-top: 10px;
    padding-top: 9px;
    font-size: clamp(0.76rem, 3.5vw, 0.9rem);
}

.bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-result-actions {
    gap: 8px;
    margin-top: 12px;
}

.bgf-game-funnel[data-bgf-mobile-layout="true"][data-bgf-compact-shell="true"] .bgf-shell-controls {
    --boost-game-mobile-touch-target: 42px;
    padding: 4px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--boost-ui-surface) 82%, transparent);
    backdrop-filter: blur(8px);
}

.bgf-game-funnel[data-bgf-mobile-layout="true"][data-bgf-compact-shell="true"] .bgf-runtime-toast {
    right: max(8px, var(--boost-game-safe-area-right));
    bottom: calc(max(8px, var(--boost-game-safe-area-bottom)) + var(--_shell-controls-height, 0px) + 8px);
    left: max(8px, var(--boost-game-safe-area-left));
}

@container bgf-game (max-width: 420px) {
    .bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-result-card__header .bgf-game-funnel__eyebrow {
        font-size: 0.72rem;
    }

    .bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-result-score {
        display: grid;
        align-content: center;
        gap: 4px;
    }

    .bgf-game-funnel[data-bgf-mobile-layout="true"] .bgf-result-score strong {
        justify-self: end;
    }
}