/* ===== WIN BINGO Responsive ===== */

@media (max-width: 1024px) {
    .game-layout { grid-template-columns: 55fr 45fr; gap: 0; }
    .chat-panel { height: 300px; }
    .wallet-grid, .profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .navbar { flex-wrap: wrap; gap: 0.6rem; padding: 0.55rem 0.9rem; margin: 0.5rem 0.6rem; }
    /* Home & other non-game pages: Balance | Virtual | Refresh stay on ONE line (no wrap) */
    body:not([data-page="game"]) .navbar { flex-wrap: nowrap; gap: 0.45rem; padding: 0.5rem 0.65rem; }
    body:not([data-page="game"]) .navbar .coin-balance { flex: 1 1 auto; min-width: 0; gap: 0.3rem; padding: 0.35rem 0.6rem; font-size: 0.78rem; }
    body:not([data-page="game"]) .navbar .coin-balance strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body:not([data-page="game"]) .navbar .nav-right { margin-left: auto; flex: none; gap: 0.4rem; }
    body:not([data-page="game"]) .navbar .nav-virtual {
        display: inline-flex; align-items: center; gap: 0.3rem;
        padding: 0.35rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
        color: var(--gold); background: rgba(255, 210, 74, 0.1);
        border: 1px solid rgba(255, 210, 74, 0.3); white-space: nowrap;
    }
    body:not([data-page="game"]) .navbar .nav-refresh { padding: 0.35rem 0.55rem; font-size: 0.75rem; gap: 0.3rem; }
    .nav-stats { flex: 1 1 100%; justify-content: space-between; gap: 0.5rem; overflow-x: auto; }
    .bottom-nav .nav-link { font-size: 0.72rem; padding: 0.45rem 0.35rem; }
    .bottom-nav .nav-play { width: 60px; height: 60px; margin-top: 0; padding: 0; font-size: 0.68rem; }
    /* Mobile lobby: reserve space for bottom nav */
    #lobby-panel { height: calc(100vh - 320px - var(--bottom-nav-h, 100px)); min-height: 520px; }
    .game-wrap { padding-left: 0; padding-right: 0; padding-top: 0.25rem; }
    .game-layout.lobby-full { padding-left: 0; padding-right: 0; padding-top: 0.25rem; }
    #lobby-panel { padding-left: 0.35rem; padding-right: 0.35rem; }
    .card-lobby {
        grid-template-columns: repeat(10, 1fr);
        justify-content: stretch;
        gap: 0.22rem;
        padding: 0.15rem;
    }
    .card-lobby .lobby-card { width: 100%; height: 32px; }
    .card-lobby .lobby-card .lc-num { font-size: 0.72rem; font-weight: 600; }
    .lobby-split .selected-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lobby-head-right { gap: 0.35rem; }
    .room-picker { padding: 0.4rem 0.6rem; margin-bottom: 0.6rem; gap: 0.5rem; }
    .room-picker-label { font-size: 0.78rem; }
    .room-picker-options { gap: 0.35rem; }
    .room-pill { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
    .bingo-title { font-size: 2.2rem; }
    .board-grid { grid-template-columns: repeat(5, 1fr); gap: 0.3rem; }
    .board-cell { font-size: 0.74rem; }
    .board-colhead { height: 28px; font-size: 0.9rem; }
    .mycards { grid-template-columns: 1fr; gap: 0.25rem; }
    .game-side .panel { padding: 0.55rem; }
    .game-side { top: 60px; }
    .game-side .panel-head h2 { font-size: 0.9rem; }
    .game-side .panel-hint { font-size: 0.66rem; }
    .card-lobby { max-height: 340px; }
    .game-wrap, .game-layout { padding-left: 0; padding-right: 0; }
    .side-top-row { gap: 0.35rem; margin-bottom: 0.45rem; }
    .side-top-row .side-balance { font-size: 0.82rem; padding: 0.3rem 0.55rem; }
    .side-top-row .icon-btn { width: 34px; height: 34px; font-size: 0.92rem; flex: none; }

    /* ===== Live draw view (mobile): everything fits on screen,
       only the right side (My Cards) scrolls if there are many cards ===== */
    body.drawing-view {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        /* The bottom menu is position:fixed (see below), so it no longer takes a
           row in this column. Reserve its band here instead, which is what
           --bottom-nav-h is measured for. */
        padding-bottom: var(--bottom-nav-h);
    }
    /* Drawing view: Game#/stats navbar on TOP, board below, menu pinned last. */
    body.drawing-view .navbar { order: 1; flex: none; padding-top: 0.25rem; padding-bottom: 0.25rem; }
    body.drawing-view .game-wrap { order: 2; }
    body.drawing-view .game-wrap {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        height: auto;
        overflow: hidden;
        padding-bottom: 0;
        padding-top: 0.15rem;
    }
    /* Kept position:fixed on purpose -- this is the fix for the menu leaving the
       screen. `fixed` + `bottom:0` resolves against the real viewport, so the
       menu is always fully visible. As a static flex row it sat at the bottom of
       `100dvh`, which is BELOW the visible area whenever dvh is unsupported (the
       100vh fallback counts the browser chrome) or the webview toolbar overlaps
       it -- and because body is overflow:hidden there was then no way to scroll
       up to it. Its space now comes from the body padding above. */
    body.drawing-view .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        z-index: 100;
    }
    /* Trimmed menu while drawing, so its band costs the board less. At the full
       size it is ~77px, plus the ~34px safe-area inset on a gesture-bar phone =
       ~112px, and that is what was squeezing the Live board's last number row
       and the bottom of the card list against the menu. Now ~58px. Scoped to
       drawing-view on purpose: every other page has room to spare and keeps
       the full-size tap targets. */
    body.drawing-view .bottom-nav { padding: 0.35rem 0.5rem calc(0.3rem + env(safe-area-inset-bottom)); }
    body.drawing-view .bottom-nav .nav-play { width: 48px; height: 48px; }
    body.drawing-view .bottom-nav .nav-play .nav-ico { font-size: 1.45rem; }
    body.drawing-view .bottom-nav .nav-ico { font-size: 1.05rem; }
    body.drawing-view .bottom-nav .nav-link { font-size: 0.66rem; padding: 0.3rem 0.25rem; gap: 0.08rem; }
    /* Both panels end flush with the top of the menu -- no dead strip under it.
       #board-panel was still carrying the full .panel 1.2rem padding on mobile
       (only the sidebar's panel was trimmed, to 0.55rem), so the board grid
       stopped 19.2px short and the card list 8.8px short. */
    body.drawing-view #board-panel,
    body.drawing-view #mycards-panel { padding-bottom: 0; }
    /* One explicit row sized to exactly the column height. Left as the implicit
       `auto` row it grew to fit the card list, which pushed the sidebar ~190px
       past the bottom edge on a 360px-wide phone. `margin-top:0` also pulls both
       columns up to the header's bottom edge -- game.css adds 1.1rem above the
       grid, which is dead space in this fixed-height layout. */
    body.drawing-view .game-layout {
        flex: 1;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
        margin-top: 0;
    }
    body.drawing-view .game-side {
        position: static;
        display: flex;
        flex-direction: column;
        align-self: stretch;
        min-height: 0;
        /* Resets game.css, which sets align-self:start and a viewport-derived
           max-height. Content-sizing is what stopped the flex chain below from
           bounding the card list; the definite row above now does that instead. */
        max-height: none;
        height: 100%;
    }
    body.drawing-view #mycards-panel {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin-bottom: 0;
    }
    body.drawing-view #mycards-panel .board-top { flex: none; }
    /* Bounded by flexbox rather than by arithmetic. The panel now has a real
       height to divide, so a max-height can only fight it -- and the old
       calc(100dvh - 165px) guessed the chrome too low, which is what hid the
       last card's 5th row behind the bottom-nav. */
    body.drawing-view .mycards-scroll { flex: 1; min-height: 0; max-height: none; }

    /* Live ጥሪ board: shrink cells so the whole board fits without scrolling */
    body.drawing-view #board-panel {
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-bottom: 0;
        overflow: hidden;
    }
    body.drawing-view #board-panel .panel-head { flex: none; margin-bottom: 0.4rem; }
    body.drawing-view #board-panel .board-bottom {
        flex: 1;
        min-height: 0;
        max-width: none;
        width: 100%;
        margin: 0;
        display: flex;
        align-items: stretch;
        overflow: hidden;
    }
    /* Portrait: fill the whole column - 5 equal columns, a distinct BINGO header
       row, then 15 equal number rows -> no blank space, numbers use every pixel.
       Slightly reduced row height (minmax(0, 0.95fr)) so the last row sits
       exactly at the bottom nav edge without any gap. */
    body.drawing-view .game-layout { grid-template-columns: 58fr 42fr; }
    body.drawing-view .board-grid {
        width: 100%;
        height: 100%;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: auto repeat(15, minmax(0, 0.95fr));
        gap: 0.25rem;
    }
    body.drawing-view .board-colhead { height: auto; font-size: clamp(0.9rem, 3.2vw, 1.5rem); }
    body.drawing-view .board-cell { aspect-ratio: auto; font-size: clamp(0.65rem, 3vw, 1.3rem); border-radius: 6px; }

    /* Portrait sidebar: more room for the cards - compact current ball + last 3 */
    body.drawing-view #mycards-panel .board-top { gap: 0.15rem; margin-bottom: 0.2rem; }
    body.drawing-view .board-top .current-ball { width: 48px; height: 48px; }
    body.drawing-view .board-top .current-ball .ball-number { font-size: 1.15rem; }
    body.drawing-view .last-ten .ball { width: 24px; height: 24px; }
    body.drawing-view .last-ten .ball .ball-number { font-size: 0.6rem; }
    body.drawing-view .section-label { margin-bottom: 0.2rem; font-size: 0.66rem; }

    /* My Cards grid: slightly smaller gap and cells so the last card row
       aligns perfectly with the bottom nav edge. */
    body.drawing-view .mycards { gap: 0.25rem; }
    body.drawing-view .bc-grid { gap: 2px; }
    body.drawing-view .bc-cell { aspect-ratio: 1.3; font-size: clamp(0.55rem, 2.5vw, 0.75rem); }
    .content-wrap { padding: 0.8rem 0.8rem calc(5.5rem + env(safe-area-inset-bottom)); }
    .site-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
    .admin-topbar { margin: 0.6rem 0.6rem; }
    .admin-content { padding: 0.2rem 0.6rem 1.5rem; }
}

/* Desktop drawing view: the Game#/stats header stays at the TOP of the page */
@media (min-width: 769px) {
    body.drawing-view > .navbar { justify-content: center; }
    body.drawing-view > .navbar .nav-stats { margin: 0 auto; }
    body.drawing-view > .navbar .coin-balance { display: none; }
    /* Same dead gap the mobile block removes: game.css adds 1.1rem above the
       grid, which on the drawing page is pure empty space under the header. */
    body.drawing-view .game-layout { margin-top: 0; }
}

@media (max-width: 480px) {
    /* Small phones: single-line header gets extra compact (drop the redundant coin icon) */
    body:not([data-page="game"]) .navbar { gap: 0.35rem; padding: 0.45rem 0.55rem; }
    body:not([data-page="game"]) .navbar .coin-icon { display: none; }
    body:not([data-page="game"]) .navbar .coin-balance { padding: 0.3rem 0.5rem; font-size: 0.74rem; }
    body:not([data-page="game"]) .navbar .nav-virtual,
    body:not([data-page="game"]) .navbar .nav-refresh { padding: 0.3rem 0.5rem; font-size: 0.72rem; }
    .coin-balance, .nav-refresh { padding: 0.3rem 0.5rem; }
    .nav-stats .stat-label { font-size: 0.55rem; }
    .nav-stats .stat strong { font-size: 0.8rem; }
    .board-top .current-ball { width: 50px; height: 50px; border-radius: 12px; }
    .board-top .current-ball .ball-number { font-size: 1.1rem; }
    .last-ten .ball { width: 26px; height: 26px; }
    .last-ten .ball .ball-number { font-size: 0.58rem; }
    .board-top .ball-sub, .last-ten .section-label { display: none; }
    .auth-card { padding: 1.4rem; }
}