/* Mobile foundation shared by every page. Keep new sections inside a .container. */
:root {
    --page-gutter: clamp(.75rem, 3vw, 1.5rem);
    --touch-target: 2.75rem;
}

html {
    min-width: 0;
}

body,
main,
main > section,
.game-shell,
.safe-shell,
.roulette-shell,
.airport-shell,
.airport-flight-page {
    min-width: 0;
}

main .container {
    min-width: 0;
}

main :where(.row, .col, [class*="col-"], .game-panel, .dashboard-card, .account-panel,
    .section-heading, .dashboard-hero, .auth-panel, .airport-booking, .airport-owner-dashboard,
    .garage-card, .roulette-owner-panel, .roulette-game, .safe-locker-card) {
    min-width: 0;
}

main :where(h1, h2, h3, p, dt, dd, strong, small, label, .badge) {
    overflow-wrap: anywhere;
}

main :where(img, svg, canvas, video) {
    max-width: 100%;
}

main :where(.btn, button, input, select, textarea) {
    max-width: 100%;
}

main :where(.btn, button) {
    min-height: var(--touch-target);
}

.roulette-table button {
    min-height: var(--touch-target);
}

/* Reusable pieces for new sections. */
.mobile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
}

.mobile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.mobile-actions > * {
    min-width: 0;
}

.mobile-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.mobile-scroll:focus-visible {
    outline-offset: -3px;
}

.mobile-scroll-hint {
    display: none;
    margin: 0 0 .6rem;
    color: var(--mg-muted);
    font-size: .85rem;
}

@media (max-width: 767.98px) {
    main .container {
        padding-right: var(--page-gutter);
        padding-left: var(--page-gutter);
    }

    .mobile-scroll-hint {
        display: block;
    }

    .game-page {
        background-attachment: scroll;
    }

    .section-heading,
    .dashboard-hero,
    .combat-hero,
    .gym-hero,
    .activity-hero,
    .gta-hero,
    .bank-hero,
    .airport-hero,
    .garage-hero,
    .roulette-hero,
    .safe-hero {
        margin-bottom: 1rem;
    }

    .section-heading h1,
    .combat-hero h1,
    .gym-hero h1,
    .activity-hero h1,
    .gta-hero h1,
    .bank-hero h1,
    .airport-hero h1,
    .garage-hero h1,
    .roulette-hero h1,
    .safe-hero h1 {
        font-size: clamp(1.65rem, 7vw, 2.4rem);
        line-height: 1.15;
    }

    .game-panel,
    .account-panel,
    .section-heading {
        padding: clamp(1rem, 4vw, 1.5rem);
    }

    .character-stage,
    .roulette-bets-summary,
    .garage-selection-bar {
        flex-wrap: wrap;
    }

    .garage-selection-bar {
        position: static;
    }

    .roulette-hero,
    .roulette-unowned,
    .roulette-owner-panel,
    .roulette-game {
        padding: clamp(1rem, 4vw, 1.5rem);
    }

    .roulette-game-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .roulette-wheel-panel {
        width: 100%;
    }

    .roulette-owner-metrics,
    .roulette-owner-actions {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    }

    .roulette-owner-metrics strong,
    .roulette-cash strong,
    .bank-balance strong,
    .bank-summary strong,
    .garage-overview strong,
    .garage-overview b {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 575.98px) {
    .mobile-actions,
    .mobile-actions > :where(.btn, button, form),
    .mobile-actions form > .btn {
        width: 100%;
    }

    .mobile-actions > :where(.btn, button),
    .mobile-actions form > .btn {
        white-space: normal;
    }

    .dashboard-hero > .badge {
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }

    .character-stage {
        flex-direction: column;
    }

    .character-stage-preview {
        align-self: center;
    }

    .attack-target-avatar {
        width: clamp(3.5rem, 17vw, 5rem);
        height: clamp(3.5rem, 17vw, 5rem);
    }

    .gta-option {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .gta-option-scene {
        min-height: 6rem;
    }

    .activity-action-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .activity-action-card > * {
        grid-column: 1;
        grid-row: auto;
    }

    .activity-hand-stage {
        display: none;
    }

    .airport-owner-grid,
    .airport-destination-grid,
    .airport-stat-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .gym-option,
    .airport-control-card {
        min-height: 0;
    }

    .airport-destination-grid label strong {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .airport-inline-field {
        flex-wrap: wrap;
    }

    .airport-inline-field .form-control,
    .airport-inline-field .btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .airport-flight-ticket {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: .4rem;
        padding: .8rem;
    }

    .airport-flight-status {
        bottom: auto;
        top: 1rem;
    }

    .garage-hero .btn,
    .garage-actions .btn,
    .garage-selection-bar .btn,
    .roulette-buy-form .btn {
        width: 100%;
        white-space: normal;
    }

    .roulette-door-status {
        width: 100%;
        min-width: 0;
    }

    .roulette-phase {
        flex-wrap: wrap;
        width: 100%;
    }

    .roulette-table-panel {
        overflow: visible;
    }

    .roulette-outside {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .roulette-bet-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .roulette-bet-bar span {
        grid-column: 1;
    }

    .roulette-chip-picker > div {
        flex-wrap: wrap;
    }

    .roulette-money-form > div {
        flex-wrap: wrap;
    }

    .roulette-money-form > div > * {
        flex: 1 1 9rem;
    }
}

/* The full twelve-column felt makes number buttons too narrow in a split desktop layout. */
@media (max-width: 1199.98px) {
    .roulette-table {
        grid-template-columns: minmax(0, 1fr);
        gap: .4rem;
    }

    .roulette-bet-zero {
        grid-row: auto;
        min-height: var(--touch-target);
        border-radius: .55rem;
    }

    .roulette-number-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: .2rem;
        border-top: 0;
    }

    .roulette-number-row {
        display: contents;
    }

    .roulette-table .roulette-number,
    .roulette-table .roulette-bet-zero,
    .roulette-dozens button,
    .roulette-outside button {
        min-height: var(--touch-target);
        padding: .3rem;
        border: 1px solid rgba(255, 246, 213, .56) !important;
        border-radius: .45rem;
        font-size: .9rem;
    }

    .roulette-dozens,
    .roulette-outside {
        grid-column: 1;
        gap: .2rem;
    }
}

@media (max-width: 375.98px) {
    .roulette-number-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .roulette-dozens,
    .roulette-outside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .roulette-dozens button:last-child {
        grid-column: 1 / -1;
    }

    .roulette-wheel-panel {
        padding: .75rem;
    }
}