/*
 * base.css — Overlay root + Pixel Streaming video framing.
 *
 * The Pixel Streaming framework appends its own DOM to <body> (player.js
 * mounts a <video> inside #playerUI / #streamingVideo at window.onload time).
 *
 * We do NOT wrap the PS video. Instead we style it in place so the existing
 * connection / reconnect / signalling flow stays untouched. The overlay
 * (#blackjack-root) sits at z-index 9999 *above* it. The bottom 45% gets a
 * darkening scrim so the live-dealer feed stays visually dominant in the
 * top 55% and the gameplay UI is readable below.
 *
 *   ┌──────────────────────────────────┐
 *   │  ░░░ Top HUD ░░░                 │
 *   │                                  │
 *   │   Unreal MetaHuman dealer        │   --stream-height (default 55dvh)
 *   │   (Pixel Streaming <video>)      │
 *   │                                  │
 *   ├──────────────────────────────────┤   ← scrim gradient starts
 *   │  Player strip                    │
 *   │  Hand display                    │
 *   │  Betting / Decision / Result     │   bottom 45%
 *   │  Safe area                       │
 *   └──────────────────────────────────┘
 */

/* ── Body / html ─────────────────────────────────────────────────────────── */
html {
    background: var(--bg-page);
}

body {
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-ui);
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ── PS framework targeting ──────────────────────────────────────────────── */
/*
 * The PS framework injects #playerUI (full-viewport <div>) containing
 * #streamingVideo (<video>). We size the video to the top 55% and apply
 * object-fit:cover so the landscape stream fills the area cleanly.
 *
 * The container fills the viewport (PS framework expects this) but the
 * <video> itself is letterboxed/cropped to the framing target.
 */
#playerUI {
    /* Black mat under the stream for the bottom 45% area */
    background: var(--bg-page);
}

#streamingVideo,
video#streamingVideo,
#playerUI video {
    object-fit: cover;
    object-position: var(--stream-object-x) var(--stream-object-y);
    /* The <video> tag itself fills its parent; we size via the wrapper below. */
}

/*
 * Scrim layer sits between PS video and the overlay UI. It pulls the bottom
 * half of the stream into the dark background so the player-strip / cards /
 * panels read clearly without covering the dealer.
 */
#blackjack-stream-scrim {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--stream-height);
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 13, 0.85) 0%,
        var(--bg-page) 14%,
        var(--bg-page) 100%
    );
    pointer-events: none;
    z-index: var(--z-stream-scrim);
}

/*
 * Top edge scrim — subtle vignette above the top HUD so dark glyphs read
 * cleanly even when the streamed frame is bright.
 */
#blackjack-stream-scrim-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--safe-top) + 96px);
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 13, 0.55) 0%,
        rgba(10, 10, 13, 0.0) 100%
    );
    pointer-events: none;
    z-index: var(--z-stream-scrim);
}

/* ── Overlay root ─────────────────────────────────────────────────────────── */
#blackjack-root {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    pointer-events: none;       /* children opt in via .interactive */
    z-index: 9999;
    overflow: hidden;
    box-sizing: border-box;
    font-family: var(--font-ui);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#blackjack-root * {
    box-sizing: border-box;
}

/* Click-through default; opt-in helper. */
.interactive { pointer-events: auto; }

/* Reusable visibility helper used by all renderers. */
.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden;
    transition: opacity var(--t-fast) var(--ease-in-quad);
}

/* ── Bottom UI stack ─────────────────────────────────────────────────────── */
/*
 * #bj-ui-stack is a single vertical flex column that lives in the dark area
 * below the Pixel Streaming video. Every gameplay panel is a slot inside it.
 * This guarantees no overlap — each panel has its own reserved vertical row.
 *
 *     ───────── (stream-bottom) ─────────
 *      #bj-slot-phase     status strip
 *      #bj-slot-dealer    dealer row (reserved)
 *      #bj-slot-hand      active hand panel (reserved)
 *      #bj-slot-rail      players rail
 *      #bj-slot-actions   action zone (lobby | betting | decision | result)
 *     ─────────  safe-bottom area  ─────────
 *
 * Slots are flex items; they don't overlap. Within #bj-slot-actions the four
 * mutually-exclusive panels overlap on top of each other (only one is shown
 * at a time via .is-hidden → display: none).
 */
#bj-ui-stack {
    position: absolute;
    left: 0;
    right: 0;
    /*
     * CONTENT-SIZED, BOTTOM-ANCHORED.
     *
     * The previous model pinned the column between `top: var(--stream-height)`
     * and `bottom: 0`, giving it a FIXED height. Whenever the panels inside
     * needed more than that (always, on a phone), the flex algorithm shrank
     * every slot to its min-height and the panels — which have no min-height
     * of their own — spilled out of their boxes and painted over each other.
     *
     * Now the column is exactly as tall as its content and grows UPWARD from
     * the bottom edge. --stream-height became the PREFERRED video band, held
     * by min-height; a tall stack (split hands, 5-card hands) eats into the
     * bottom of the video instead of eating into itself. Every panel keeps
     * its own glass background, so it stays readable over the raw frame.
     */
    top: auto;
    bottom: 0;
    height: auto;
    min-height: calc(100dvh - var(--stream-height));
    z-index: 5;                        /* above scrim, below floating overlays */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;         /* pin the rows to the bottom edge */
    align-items: stretch;
    gap: 4px;
    padding: 4px 10px calc(var(--safe-bottom) + 6px);
    pointer-events: none;               /* children opt in via .interactive */
}

.bj-slot {
    position: relative;
    width: 100%;
    pointer-events: none;
    /* Each slot is a flex container so its inner panel can stretch */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /*
     * flex: 0 0 auto — a slot is ALWAYS its content height and never shrinks.
     * This is the invariant that makes overlap structurally impossible: a
     * squeezed slot used to leak its panel over its neighbours because
     * .bj-slot has visible overflow.
     */
    flex: 0 0 auto;
}

/* Floors only. With flex-shrink:0 these can no longer clip content — they
   just stop a slot collapsing between phases so the rows don't jitter.
   Values are the measured content heights on a 390x844 reference phone. */
.bj-slot--phase   { min-height: 42px; }
.bj-slot--dealer  { min-height: 58px; }
.bj-slot--hand    { min-height: 76px; }
.bj-slot--rail    { min-height: 74px; }

/* Action slot holds the four mutually-exclusive panels; only one is ever
   laid out (see the collapse rule below), so it is content-sized too. */
.bj-slot--actions {
    flex: 0 0 auto;
    min-height: 0;
    justify-content: flex-end;
}

/*
 * Children of the action slot collapse ENTIRELY when hidden.
 *
 * !important is load-bearing: betting.css `#bj-betting-panel { display:flex }`
 * and decision.css `#bj-decision-panel { display:flex }` are ID selectors
 * (1,0,0) and out-rank this class pair (0,2,0). Without it, whichever of the
 * two is currently invisible still reserved ~150px inside the action slot —
 * ~300px in LOBBY / INITIAL_DEAL / DEALER_TURN / SETTLE, where both are
 * hidden — which is what forced the whole stack into overflow.
 * (desktop.css used to carry a landscape-scoped copy of this rule; it is now
 * global and the duplicate has been removed.)
 */
.bj-slot--actions > .is-hidden { display: none !important; }

/* Collapse a slot entirely when it has nothing to show. Removed from flex
   flow so the gap between slots also disappears — keeps the layout tight in
   BETTING / LOBBY where there are no cards yet. The action slot is never
   empty (always has lobby/betting/decision/result inside). */
.bj-slot.is-empty {
    display: none;
}

/* ── Short-viewport compaction ────────────────────────────────────────────
 * On a short phone the natural stack height exceeds the viewport once cards
 * are on the table. Rather than let it clip, trim the vertical padding of
 * every row. Purely dimensional — no repositioning, no hidden content. */
@media (orientation: portrait) and (max-height: 800px) {
    #bj-ui-stack { gap: 3px; padding: 3px 8px calc(var(--safe-bottom) + 5px); }
    .bj-slot--phase   { min-height: 38px; }
    .bj-slot--dealer  { min-height: 54px; }
    .bj-slot--hand    { min-height: 70px; }
    .bj-slot--rail    { min-height: 70px; }
}

/* Reusable focus ring for touch + keyboard accessibility */
button:focus-visible,
.chip:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Generic glass panel surface. */
.bj-glass {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ── Pixel Streaming debug toolbar gate (preserved from prior build) ─────── */
/*
 * Ctrl+Shift+D toggles body.ps-debug (see main.js). The PS framework's
 * #uiFeatures toolbar is hidden by default so it cannot fight with the
 * overlay. When toggled on, it is lifted above #blackjack-root.
 */
#uiFeatures {
    display: none !important;
}

body.ps-debug #uiFeatures,
body.ps-debug #settingsBtn,
body.ps-debug #statsBtn,
body.ps-debug #fullscreen-btn,
body.ps-debug #xrBtn,
body.ps-debug #connection,
body.ps-debug #qualityText,
body.ps-debug #settings-panel,
body.ps-debug #stats-panel,
body.ps-debug #controls {
    display: revert !important;
    z-index: 2147483647 !important;
}

/* ── Desktop / landscape ─────────────────────────────────────────────────── */
/*
 * The desktop adaptation (centered aspect-locked "device frame", uniform
 * transform scale, blurred dealer-feed backdrop) lives entirely in
 * blackjack/css/desktop.css + the frame math in main.js (_layoutDesktopFrame).
 * It is loaded LAST in player.html so its rules win by source order. This keeps
 * base.css portrait-only and avoids two competing desktop implementations.
 */