/*
 * desktop.css — Landscape adaptation (desktop AND landscape phones).
 *
 * Model ("full stream, edge-anchored UI"):
 *   - The live dealer stream shows the ENTIRE UE frame. object-fit is set
 *     inline by main.js (_frameStreamDesktop, STREAM_FIT_DESKTOP const:
 *     'contain' = whole frame + letterbox bars on aspect mismatch,
 *     'cover' = full-bleed + edge crop).
 *   - The SAME mobile UI elements are MOVED around the screen edges — no new
 *     components, no renderer/DOM changes:
 *       top-centre  : #bj-top-hud, phase pill, dealer row
 *       bottom-mid  : active hand column directly above the action panels
 *       bottom-left : seat rail
 *   - The centre of the stream stays clear of static UI.
 *
 * Mechanic: #bj-ui-stack STAYS the flex column from base.css, but shrinks to
 * a content-sized bottom-centre strip that now only lays out the hand +
 * actions slots (so the active hand hugs whichever action panel is showing,
 * and split hands just grow the column). The phase / dealer / rail slots
 * escape the flex flow via position:fixed and anchor to the viewport.
 *
 * CRITICAL: the stack is centred with left/right + margin-inline, NOT with a
 * transform — a transformed ancestor becomes the containing block for
 * position:fixed descendants and would re-anchor the escaped slots to the
 * 480px strip instead of the viewport.
 *
 * BREAKPOINT (changed 2026-07-27): was `(min-width:900px) and
 * (orientation:landscape)`, which excluded every phone held sideways — an
 * 844x390 handset fell through to the portrait model, kept a 55dvh video
 * band, and rendered the seat rail and the Hit/Stand panel entirely BELOW
 * the viewport. Landscape phones now take this path; the
 * `(max-height: 520px)` block at the bottom retunes it for short viewports.
 * main.js `_desktopMQ` MUST be kept in sync with this query.
 *
 * Loaded LAST in player.html so its #id rules win by source order.
 */

@media (orientation: landscape) and (min-width: 600px) {

    html,
    body {
        background: #000;
    }

    /* Dealer stream is display-only on desktop (gameplay is DOM + socket). */
    #streamingVideo,
    video#streamingVideo,
    #playerUI video {
        pointer-events: none;
    }

    /* The mobile framing scrims assume a top-55% video band; with a
     * full-screen dealer they would darken the feed. Hide them. */
    #blackjack-stream-scrim,
    #blackjack-stream-scrim-top {
        display: none !important;
    }

    /* Overlay root stays full-viewport (base rules); children are
     * repositioned below. Explicit reset in case any earlier build left a
     * transform on it (also keeps position:fixed descendants
     * viewport-anchored). */
    #blackjack-root {
        left: 0;
        top: 0;
        transform: none;
        max-width: none;
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }

    /* ── Top HUD — centred, width-capped so it doesn't span an ultrawide ── */
    #bj-top-hud {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(94vw, 720px);
        top: calc(var(--safe-top) + 16px);
    }

    /* ── UI stack → content-sized bottom-centre column ──────────────────────
     * After the phase/dealer/rail slots go position:fixed below, the flex
     * flow contains only: hand slot + actions slot. No background panel —
     * each inner component carries its own glass surface.
     *
     * base.css now gives the stack `min-height: calc(100dvh - --stream-height)`
     * to hold the portrait video band open; that must be released here or the
     * column would span the whole viewport. */
    #bj-ui-stack {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin-inline: auto;      /* centres without a transform */
        transform: none;
        width: min(92vw, 480px);
        height: auto;
        min-height: 0;
        gap: 8px;
        padding: 0 0 calc(var(--safe-bottom) + 18px);
        background: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* Slots size to their content (no min-height floors, no grow-to-fill).
     * The collapse rule for hidden action panels
     * (`.bj-slot--actions > .is-hidden { display:none !important }`) used to
     * live here, landscape-scoped. It is now global in base.css — which is
     * what actually fixed the portrait overlap — so it is not repeated. */
    .bj-slot--phase,
    .bj-slot--dealer,
    .bj-slot--hand,
    .bj-slot--rail {
        min-height: 0;
    }

    .bj-slot--actions {
        flex: 0 0 auto;
        min-height: 0;
    }

    /* ── Escaped slots — leave the flex flow, anchor to the viewport ──────
     * (base.css `.bj-slot.is-empty { display:none }` still applies, so an
     * empty phase/dealer slot vanishes cleanly.) A slot's own transform is
     * fine — only ancestor transforms break fixed positioning. */

    /* Phase pill — top-centre, directly under the HUD bar. */
    .bj-slot--phase {
        position: fixed;
        top: calc(var(--safe-top) + 68px);
        left: 50%;
        transform: translateX(-50%);
        width: min(40vw, 360px);
    }

    /* Dealer row — compact, top-centre under the phase pill. */
    .bj-slot--dealer {
        position: fixed;
        top: calc(var(--safe-top) + 118px);
        left: 50%;
        transform: translateX(-50%);
        width: min(46vw, 420px);
    }

    /* Seat rail — bottom-left corner.
     * max-width keeps it clear of the centred action column: the column is
     * min(92vw,480px) wide, so the free gutter on each side is
     * (100vw - that) / 2. At 1024x768 the old `min(30vw,520px)` ran to x=331
     * while the column started at x=272 — the seat badges sat under the
     * Stand / Double buttons. */
    .bj-slot--rail {
        position: fixed;
        left: 24px;
        bottom: calc(var(--safe-bottom) + 18px);
        width: min(30vw, 520px);
        max-width: calc((100vw - min(92vw, 480px)) / 2 - 40px);
    }

    /* Landscape shows split hands side by side too, but there is width to
     * spare — keep the bet/state chips that portrait drops. */
    #bj-hand-display.bj-hand-display--split .bj-hand__meta-bet,
    #bj-hand-display.bj-hand-display--split .bj-hand__meta-state {
        display: initial;
    }

    /* ── Bottom sheets (History / Rules) — centred + width-capped ──────────
     * Uses left+margin (not transform) so the slide-up transform is
     * preserved. */
    .bj-sheet {
        width: min(96vw, 640px);
        left: 50%;
        right: auto;
        margin-left: calc(min(96vw, 640px) / -2);
        border-radius: 22px 22px 0 0;
    }

    /* 3-2-1 turn countdown floats above the bottom-centre action cluster. */
    #bj-turn-countdown {
        bottom: calc(var(--safe-bottom) + 230px);
    }

    /* ── Desktop cursor affordances ──────────────────────────────────────── */
    .interactive,
    .bj-chip,
    .bj-chip__plus,
    .bj-bet-action,
    .bj-confirm-bet,
    .bj-hud-icon-btn,
    .bj-seat-open,
    .bj-sheet__close,
    .bj-sheet__grabber {
        cursor: pointer;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * SHORT LANDSCAPE — phones held sideways (844x390, 740x360, …).
 *
 * The placement above assumes ~700px of height: top cluster down to ~175px,
 * bottom cluster up from ~250px. At 390px tall those two bands meet in the
 * middle, and the bottom-left seat rail runs into the centred action column.
 *
 * Two changes solve both: (1) the action column moves to the RIGHT half and
 * the rail keeps the LEFT half, so they can never collide horizontally;
 * (2) the top cluster and the action buttons drop their secondary text and
 * vertical padding so the two bands clear each other vertically.
 * ───────────────────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 520px) {

    /* Top HUD — 38px instead of 46px, so the phase pill can move up under it
     * without colliding. */
    .bj-hud-row--main { padding: 4px 6px; }
    .bj-hud-icon-btn  { width: 28px; height: 28px; }
    .bj-hud-icon-btn svg { width: 16px; height: 16px; }

    /* Top cluster — tighter, and the phase pill drops to a single line. */
    .bj-slot--phase {
        top: calc(var(--safe-top) + 58px);
        width: min(38vw, 320px);
    }

    .bj-phase-pill { padding: 4px 10px; }
    .bj-phase-pill__sub  { display: none; }
    .bj-phase-pill__icon { width: 18px; height: 18px; font-size: 10px; }

    /* Dealer row moves top-LEFT and the action column stays bottom-RIGHT, so
     * the two are horizontally disjoint. Centred, they collided vertically as
     * soon as the column grew — four split hands make it 230px tall on a
     * 360px screen. */
    .bj-slot--dealer {
        top: calc(var(--safe-top) + 92px);
        left: 16px;
        transform: none;
        width: min(42vw, 340px);
    }

    #bj-dealer-well { padding: 3px 8px; }
    .bj-dealer-well__cards { min-height: 38px; }
    .bj-dealer-well__cards .bj-card { width: 27px; height: 38px; }

    /* Bottom-RIGHT action column. left:auto + a right pin override the
     * margin-inline centring from the block above. */
    #bj-ui-stack {
        left: auto;
        right: 16px;
        margin-inline: 0;
        width: min(46vw, 400px);
        gap: 6px;
        padding: 0 0 calc(var(--safe-bottom) + 12px);
    }

    /* Bottom-LEFT seat rail — cannot reach the column above, which is pinned
     * to the right, so the desktop `max-width` gutter clamp must be released:
     * at 844x390 it squeezed 7 seat columns into 142px and the names, bets
     * and status labels ran into each other. */
    .bj-slot--rail {
        left: 16px;
        bottom: calc(var(--safe-bottom) + 12px);
        width: min(40vw, 360px);
        max-width: none;
    }

    /* A short-landscape action column is only ~340px wide; with four split
     * hands each cell is ~166px. The bet/SPLIT chips re-enabled for wide
     * landscape starve the card row (flex-shrink:0 on .bj-hand__meta means
     * the cards lose), so drop them again here. */
    #bj-hand-display.bj-hand-display--split .bj-hand__meta-bet,
    #bj-hand-display.bj-hand-display--split .bj-hand__meta-state {
        display: none;
    }

    /* Active hand row — one line of cards, no vertical slack. */
    .bj-hand { padding: 3px 8px; }
    .bj-hand__cards { min-height: 46px; }
    .bj-hand__cards .bj-card { width: 34px; height: 46px; }

    /* Action buttons — titles only. The sub-labels ("Take a card · bet $75",
     * "Hold this total") are the first thing to go when height is scarce. */
    #bj-decision-panel { gap: 4px; }
    .bj-decision-btn { padding: 7px 10px; font-size: 13px; }
    .bj-decision-btn__sub { display: none; }
    .bj-decision-row { gap: 4px; }
    .bj-decision-row .bj-decision-btn { padding: 7px 10px; font-size: 12px; }

    #bj-betting-panel { gap: 4px; }
    .bj-chip-rail { padding: 4px; gap: 3px; }
    .bj-chip { width: 32px; height: 32px; font-size: 11px; }
    .bj-chip__plus { width: 28px; height: 28px; font-size: 15px; }
    .bj-bet-actions { padding: 3px 4px; }
    .bj-bet-action { font-size: 10px; padding: 3px; }
    .bj-confirm-bet { padding: 7px 12px; font-size: 14px; }
    .bj-confirm-bet__sub { display: none; }

    .bj-result-card { padding: 8px 12px; gap: 6px; }
    .bj-result-title { font-size: 18px; }
    .bj-result-amount { font-size: 17px; }
    .bj-result-next { padding: 7px 10px; font-size: 13px; }
    .bj-result-next__sub { display: none; }

    /* Countdown chip drops into the empty left-of-centre gap so it never
     * lands on the action column. */
    #bj-turn-countdown {
        left: 30%;
        bottom: calc(var(--safe-bottom) + 96px);
        width: 62px;
        height: 62px;
    }

    /* Between-rounds "Take a Seat" card — 266px tall at full size, which
     * reaches the HUD on a 360px screen. */
    .bj-lobby-card  { padding: 10px 12px; }
    .bj-lobby-title { font-size: 19px; margin-top: 3px; }
    .bj-lobby-sub   { margin-top: 3px; }
    .bj-lobby-info  { margin-top: 8px; gap: 6px; }
    .bj-lobby-info__cell { padding: 5px 8px; }
    .bj-lobby-seat  { margin-top: 9px; padding: 9px 12px; font-size: 14px; }
    .bj-lobby-seat__sub { display: none; }
    .bj-lobby-foot  { display: none; }

    /* Lobby gate / spectator prompt / goodbye card — the full-size card is
     * ~360px tall, which is the whole viewport here. */
    #bj-lobby-gate,
    #bj-spectator-prompt,
    #bj-goodbye { padding: 10px; }

    .bj-gate__card   { padding: 14px 16px 12px; max-width: 340px; }
    .bj-gate__title  { font-size: 19px; margin-top: 3px; }
    .bj-gate__sub    { font-size: 12px; margin-top: 5px; }
    .bj-gate__input  { margin-top: 9px; padding: 9px 12px; }
    .bj-gate__btns   { margin-top: 10px; gap: 7px; }
    .bj-gate__btn    { padding: 9px 14px; font-size: 14px; }
    .bj-gate__err    { margin-top: 5px; font-size: 11px; }
    .bj-gate__link   { margin-top: 6px; }

    /* Sheets keep 70dvh of a 390px screen; the grabber + header eat most of
     * it, so trim the header. */
    .bj-sheet__title { font-size: 18px; }
    .bj-sheet__grabber { margin: 5px auto 2px; }
}