/* Cubiri narrow-mobile containment pass
   Keeps the application inside the visual viewport without changing the
   canonical game-module layouts. */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.app-shell {
    width: 100%;
    max-width: min(var(--page-max), 100vw);
    min-width: 0;
    overflow-x: hidden;
}

.app-header,
.landing,
.discovery,
.discovery.is-game-view,
.game-tabs-bar,
.game-tabs-scroll,
.game-tab-content,
.roll-zone {
    min-width: 0;
    max-width: 100%;
}

.game-tab-content > * {
    max-width: 100%;
}

/* Multi-dice layouts must be allowed to shrink below their old clamp minimum
   when the usable viewport is narrower than expected. */
.die-button:has(.die-stage[data-count="2"]),
.die-button:has(.die-stage[data-count="5"]),
.die-button:has(.die-stage[data-count="6"]) {
    max-width: 100%;
}

@media (max-width: 430px) {
    .app-header {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        gap: 4px;
        padding-inline: 6px;
    }

    .icon-button {
        width: 42px;
        height: 42px;
    }

    .discovery.is-game-view {
        padding-inline: 6px;
    }

    .game-tab {
        padding-inline: 12px;
    }

    .game-tab-content {
        padding-inline: 6px;
    }

    .roll-zone {
        padding-inline: 12px;
    }

    .roll-zone:has(.die-stage[data-count="6"]) .die-button {
        max-width: calc(100vw - 24px);
    }

    /* Yahtzee + Jamb use a dense scorecard above a 5/6-dice stage. The compact
       dice now leave enough room to give Content Area 30px more vertical space
       than the original mobile scoring split. */
    .landing:has(.game-tab-content[data-game-component="autoscoring"]),
    .landing:has(.jamb-score-wrap) {
        grid-template-rows: minmax(265px, calc(48% + 30px)) minmax(0, calc(52% - 30px));
    }

    .game-tab-content[data-game-component="autoscoring"] {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        scrollbar-width: none;
    }

    .game-tab-content[data-game-component="autoscoring"]::-webkit-scrollbar {
        display: none;
    }

    .discovery.is-game-view:has(.jamb-score-wrap) .game-tab-content {
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding-bottom: 8px;
    }

    .jamb-score-wrap {
        flex: 1 1 auto;
        min-height: 0;
        max-height: min(31dvh, 300px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .jamb-score-wrap::-webkit-scrollbar {
        display: none;
    }

    .jamb-head {
        position: sticky;
        top: 0;
        z-index: 4;
        background: var(--panel);
        box-shadow: 0 1px 0 var(--line);
    }

    /* Dense mobile scoring screens benefit more from smaller physical dice than
       from compressing the scorecard. Reduce the entire 5/6-dice stage by ~30%
       while preserving the canonical 3+2 / 3+3 layouts. */
    .landing:has(.game-tab-content[data-game-component="autoscoring"])
        .roll-zone .die-button:has(.die-stage[data-count="5"]) {
        width: min(calc(100vw - 28px), 245px);
        height: clamp(132px, 17dvh, 158px);
        translate: 0 0;
    }

    .landing:has(.jamb-score-wrap)
        .roll-zone .die-button:has(.die-stage[data-count="6"]) {
        width: min(calc(100vw - 28px), 245px);
        height: clamp(136px, 17.5dvh, 162px);
        translate: 0 0;
    }

    /* Lift the compact scoring dice by layout, not by transform. Increasing the
       space before Tap to Roll keeps the roll button anchored while moving the
       5/6-dice block visually upward by roughly 12px. */
    .landing:has(.game-tab-content[data-game-component="autoscoring"]) .roll-zone,
    .landing:has(.jamb-score-wrap) .roll-zone {
        gap: 20px;
        padding-bottom: 10px;
    }
}

@media (max-width: 360px) {
    .game-tab {
        padding-inline: 10px;
        font-size: 13px;
    }

    .jamb-score-wrap {
        max-height: 28dvh;
    }
}