/* ── Session Bingo Styles ──────────────────────────────────────────────────── */

:root {
    --bingo-bg:       #0c0a18;
    --bingo-surface:  #13112a;
    --bingo-border:   #1e2040;
    --bingo-accent:   #2563eb;
    --bingo-gold:     #f59e0b;
    --bingo-silver:   #94a3b8;
    --bingo-green:    #10b981;
    --bingo-red:      #ef4444;
    --bingo-purple:   #8b5cf6;
    /* Bingo column colors */
    --col-b: #1d4ed8;
    --col-i: #dc2626;
    --col-n: #475569;
    --col-g: #15803d;
    --col-o: #c2410c;
    --ball-size:      52px;
    --ball-sm:        32px;
    --card-cell:      50px;
    --card-cell-sm:   36px;
    --card-cell-game: 44px;   /* slightly smaller on game screen to fit more cards */
}

/* Bingo has its own header (credits + lobby link) — hide the floating auth badge */
.user-badge { display: none !important; }

/* ── Override style.css body — it was designed for the fishing pulltab theme ──*/
/* style.css sets body { background:#1a5276; display:flex; align-items:center;
   padding:20px 20px 80px; } which creates the blue sides and narrow centered band */
body {
    background: var(--bingo-bg) !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}
/* Hide the fishing-game animated bubbles overlay from style.css */
body::before { display: none !important; }

/* ── Base layout: full-screen, no page scroll ────────────────────────────────*/

#bingoApp {
    display: flex;
    flex-direction: column;
    height: 100vh;           /* fixed to viewport — no page scroll */
    width: 100%;
    overflow: hidden;
    background: var(--bingo-bg);
    color: #e2e8f0;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────────────*/

#bingoHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--bingo-surface);
    border-bottom: 1px solid var(--bingo-border);
    flex-shrink: 0;
    z-index: 100;
}

#bingoHeader h1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bingo-gold);
    margin: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
}

#bingoCredits {
    color: var(--bingo-green);
    font-weight: 700;
    font-size: 1rem;
}

.home-btn {
    padding: 6px 14px;
    background: var(--bingo-surface);
    border: 1px solid var(--bingo-border);
    border-radius: 6px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: none;
}

/* ── Screens ─────────────────────────────────────────────────────────────────*/

.bingo-screen          { display: none; }
/* Lobby flex-child props — display is set per breakpoint below */
#bingoLobby.active     { flex: 1; overflow-y: auto; }
#bingoGame.active      { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

/* ── Lobby: scrollable, full-width ───────────────────────────────────────────*/

#bingoLobby {
    padding: 20px 20px 60px;
    width: 100%;
    box-sizing: border-box;
}

/* Timer */
#sessionTimerBox {
    text-align: center;
    padding: 20px;
    background: var(--bingo-surface);
    border: 1px solid var(--bingo-border);
    border-radius: 12px;
    margin-bottom: 20px;
}

#sessionTimerLabel {
    font-size: 0.85rem;
    color: var(--bingo-silver);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

#sessionTimer {
    font-size: 3.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bingo-gold);
    letter-spacing: 2px;
}

#sessionTimer.urgent   { color: var(--bingo-red); animation: pulse 1s ease-in-out infinite; }
#sessionTimer.drawing  { color: var(--bingo-silver); font-size: 1.4rem; letter-spacing: 1px; }
#sessionTimerLabel.drawing { color: var(--bingo-gold); font-weight: 700; animation: pulse 1s ease-in-out infinite; }

#totalCardsLabel {
    font-size: 0.8rem;
    color: var(--bingo-silver);
    margin-top: 6px;
}

/* Prize pools */
#poolDisplay {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    margin-bottom: 20px;
    align-items: start;
}

#pool-grand {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    text-align: left;
}

#pool-grand .pool-label  { margin-bottom: 0; font-size: 0.9rem; }
#pool-grand .pool-balls  { margin-top: 0; font-size: 0.75rem; }
#pool-grand .pool-amount { font-size: 2.4rem; }
#pool-grand .pool-info   { display: flex; flex-direction: column; gap: 2px; }

.pool-card {
    background: var(--bingo-surface);
    border: 1px solid var(--bingo-border);
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
}

.pool-card.grand {
    border-color: var(--bingo-gold);
    border-width: 2px;
    background: linear-gradient(160deg, #13112a 60%, #1c1a0a);
    padding: 20px 12px;
}

.pool-card.medium { border-color: var(--bingo-purple); }
.pool-card.small  { border-color: var(--bingo-green); }
.pool-card.mustgo { border-color: #64748b; }

.pool-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    color: var(--bingo-silver);
}

.pool-card.grand  .pool-label { color: var(--bingo-gold); font-size: 0.8rem; font-weight: 700; }
.pool-card.medium .pool-label { color: var(--bingo-purple); }
.pool-card.small  .pool-label { color: var(--bingo-green); }

.pool-amount {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

.pool-card.grand .pool-amount {
    font-size: 1.9rem;
    color: var(--bingo-gold);
    text-shadow: 0 0 16px rgba(245,158,11,0.4);
}

.pool-balls {
    font-size: 0.65rem;
    color: var(--bingo-silver);
    margin-top: 4px;
}

/* Purchase area */
#purchaseArea {
    background: var(--bingo-surface);
    border: 1px solid var(--bingo-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.purchase-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

.purchase-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #fff;
}

.price-tag {
    font-size: 0.8rem;
    color: var(--bingo-silver);
    font-weight: 400;
    margin-left: 8px;
}

#costPreview {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bingo-gold);
    letter-spacing: 0.5px;
}

.purchase-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.card-count-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.card-count-btn {
    padding: 8px 14px;
    background: var(--bingo-bg);
    border: 1px solid var(--bingo-border);
    border-radius: 8px;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.card-count-btn:hover    { border-color: var(--bingo-accent); color: #fff; }
.card-count-btn.selected { background: var(--bingo-accent); border-color: var(--bingo-accent); color: #fff; font-weight: 700; }

.custom-count-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.custom-count-label {
    font-size: 0.75rem;
    color: var(--bingo-silver);
    white-space: nowrap;
}

#customCardCount {
    width: 64px;
    padding: 8px 10px;
    background: var(--bingo-bg);
    border: 1px solid var(--bingo-border);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
}

.purchase-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

#buyCardsBtn {
    padding: 11px 28px;
    background: var(--bingo-green);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
#buyCardsBtn:hover    { background: #059669; }
#buyCardsBtn:disabled { background: #1e3a2a; color: #4b7a62; cursor: not-allowed; }

#repeatBetBtn {
    padding: 11px 20px;
    background: transparent;
    border: 1px solid var(--bingo-accent);
    border-radius: 8px;
    color: var(--bingo-accent);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: none;
    transition: all 0.15s;
    white-space: nowrap;
}
#repeatBetBtn:hover { background: var(--bingo-accent); color: #fff; }

.purchase-info {
    font-size: 0.8rem;
    color: var(--bingo-silver);
}

#purchaseStatus {
    margin-top: 10px;
    font-size: 0.85rem;
    min-height: 20px;
}
#purchaseStatus.ok  { color: var(--bingo-green); }
#purchaseStatus.err { color: var(--bingo-red); }

/* My cards (lobby) */
#myCardsLobby {
    background: var(--bingo-surface);
    border: 1px solid var(--bingo-green);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: none;
    text-align: center;
}

#myCardsLobby h3       { margin: 0 0 4px; font-size: 0.85rem; color: var(--bingo-silver); text-transform: uppercase; letter-spacing: 1px; }
#myCardsLobbyCount     { font-size: 2rem; font-weight: 700; color: var(--bingo-green); }

/* Last result */
#lastResult {
    background: var(--bingo-surface);
    border: 1px solid var(--bingo-border);
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 0.85rem;
    color: var(--bingo-silver);
    display: none;
    margin-bottom: 20px;
}
#lastResult.visible { display: block; }
#lastResultText     { color: #cbd5e1; }

/* In-progress overlay */
#inProgressMsg {
    text-align: center;
    padding: 60px 20px;
    display: none;
}
#inProgressMsg.show { display: block; }
#inProgressMsg h2   { color: var(--bingo-gold); margin-bottom: 8px; }
#inProgressMsg p    { color: var(--bingo-silver); }

/* ── Lobby Zara panel — backdrop of the purchase area ───────────────────────*/

/* purchaseArea becomes a layered container with Zara as backdrop */
#purchaseArea {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#zaraLobbyPanel {
    /* Absolute backdrop: fills the entire purchase panel */
    position: absolute;
    inset: 0;
    z-index: 0;
}
#zaraLobbyPanel::after {
    /* Gradient: Zara visible at top, fades to near-opaque dark at bottom (form area) */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(12,10,24,0.15) 0%,
        rgba(12,10,24,0.45) 45%,
        rgba(12,10,24,0.94) 70%,
        rgba(12,10,24,0.98) 100%
    );
    z-index: 1;
}
#zaraLobbyPanel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;   /* show face/upper body, not empty space above */
    display: block;
}

/* Purchase content sits above the Zara backdrop, anchored to the bottom */
.purchase-inner {
    position: relative;
    z-index: 2;
    flex: 1;               /* fills all available height inside #purchaseArea */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;  /* form stays at the bottom, Zara shows above */
    padding: 24px;
}

/* ── Game screen ─────────────────────────────────────────────────────────────*/

#drawingOverlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(12, 10, 24, 0.95);
    z-index: 50;
    flex-direction: column;      /* mobile: stacked */
    align-items: stretch;
    overflow: hidden;
}
#drawingOverlay.show { display: flex; }

/* Zara portrait side — hidden on mobile, shown tablet+ */
#zaraDrawingSide {
    display: none;
    flex: 0 0 45%;
    max-width: 420px;
    overflow: hidden;
    flex-shrink: 0;
}
#zaraDrawingSide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.drawing-overlay-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}

.drawing-icon {
    font-size: 5rem;
    display: block;
    margin-bottom: 20px;
    animation: floatGlow 2s ease-in-out infinite;
}

@keyframes floatGlow {
    0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 12px rgba(245,158,11,0.5)); }
    50%       { transform: translateY(-12px) scale(1.05); filter: drop-shadow(0 0 28px rgba(245,158,11,0.9)); }
}

.drawing-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bingo-gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.drawing-sub {
    color: var(--bingo-silver);
    font-size: 0.95rem;
    font-style: italic;
    margin-bottom: 20px;
}

.drawing-dots {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.drawing-dots span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--bingo-accent);
    animation: dotBounce 1.2s ease-in-out infinite;
}
.drawing-dots span:nth-child(2) { animation-delay: 0.2s; }
.drawing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40%            { transform: scale(1.4); opacity: 1; }
}

/* ── Game inner layout ───────────────────────────────────────────────────────*/

#bingoGame {
    position: relative;
}

#gameInner {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* gameMain is a 2-col grid: narrow ball board | wider cards area */
#gameMain {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

/* Zara sidebar always hidden — space goes to cards */
#zaraSidebar { display: none !important; }

/* Suspense banner — spans full width above game inner */
#suspenseBanner {
    display: none;
    text-align: center;
    padding: 10px;
    background: linear-gradient(90deg, #7c3aed, #c026d3);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: pulse 0.8s ease-in-out infinite;
    flex-shrink: 0;
}
#suspenseBanner.show { display: block; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* ── Game top bar ─────────────────────────────────────────────────────────── */

#gameTopBar {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bingo-surface);
    border-bottom: 1px solid var(--bingo-border);
    gap: 12px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

#currentBallDisplay {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.current-ball-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

#currentBallLetter {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    min-width: 24px;
    transition: color 0.2s;
}

#zaraCrystalWrap {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.crystal-vid {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.crystal-vid.active { display: block; }

#currentBall {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,1);
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
}
#currentBall.pop { animation: ballPop 0.3s ease-out; }

@keyframes ballPop {
    0%   { transform: scale(1.4); }
    100% { transform: scale(1); }
}

#ballCounter {
    font-size: 0.75rem;
    color: var(--bingo-silver);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

#gamePoolMini {
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    flex: 1;
    justify-content: center;
}
.pool-mini              { text-align: center; }
.pool-mini-label        { color: var(--bingo-silver); display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; }
.pool-mini-val          { font-weight: 700; font-size: 0.95rem; }
.pool-mini.grand  .pool-mini-val { color: var(--bingo-gold); }
.pool-mini.medium .pool-mini-val { color: var(--bingo-purple); }
.pool-mini.small  .pool-mini-val { color: var(--bingo-green); }

#gameNextTimer { font-size: 0.8rem; color: var(--bingo-silver); flex-shrink: 0; white-space: nowrap; }

/* ── Ball board — left column, fills height, scrolls if needed ───────────────*/

#ballBoard {
    grid-column: 1;
    grid-row: 2;
    padding: 10px 10px;
    background: var(--bingo-bg);
    border-right: 1px solid var(--bingo-border);
    overflow-y: auto;
    align-self: stretch;
}

#ballBoardInner {
    display: flex;
    gap: 3px;
}

.ball-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.ball-col-header {
    width: var(--ball-sm);
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
    border-radius: 4px;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 1px;
}

.ball-col-header.col-b { background: var(--col-b); }
.ball-col-header.col-i { background: var(--col-i); }
.ball-col-header.col-n { background: var(--col-n); }
.ball-col-header.col-g { background: var(--col-g); }
.ball-col-header.col-o { background: var(--col-o); }

.ball-circle {
    width: var(--ball-sm);
    height: var(--ball-sm);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    background: #1a2540;
    color: #334155;
    transition: all 0.2s;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.ball-circle.called.col-b { background: var(--col-b); color: #fff; border-color: #3b82f6; box-shadow: 0 0 6px rgba(29,78,216,0.5); }
.ball-circle.called.col-i { background: var(--col-i); color: #fff; border-color: #f87171; box-shadow: 0 0 6px rgba(220,38,38,0.5); }
.ball-circle.called.col-n { background: var(--col-n); color: #fff; border-color: #94a3b8; }
.ball-circle.called.col-g { background: var(--col-g); color: #fff; border-color: #4ade80; box-shadow: 0 0 6px rgba(21,128,61,0.5); }
.ball-circle.called.col-o { background: var(--col-o); color: #fff; border-color: #fb923c; box-shadow: 0 0 6px rgba(194,65,12,0.5); }

.ball-circle.current {
    background: #fff !important;
    color: #000 !important;
    transform: scale(1.3);
    box-shadow: 0 0 14px rgba(255,255,255,0.7) !important;
    border-color: #fff !important;
    z-index: 1;
}

/* ── Player cards — right column, fills height, scrolls if many cards ────────*/

#gameCardsArea {
    grid-column: 2;
    grid-row: 2;
    padding: 12px 16px 16px;
    overflow-y: auto;
    align-self: stretch;
    min-height: 0;
}

#gameCardsArea > h3 {
    font-size: 0.75rem;
    color: var(--bingo-silver);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#gameCards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.bingo-card-label {
    text-align: center;
    font-size: 0.6rem;
    color: var(--bingo-silver);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 0 2px;
    background: var(--bingo-bg);
    border-radius: 8px 8px 0 0;
}

.bingo-card {
    background: var(--bingo-surface);
    border: 2px solid var(--bingo-border);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.bingo-card.one-away {
    border-color: var(--bingo-purple);
    box-shadow: 0 0 16px rgba(139,92,246,0.4);
    animation: oneAwayPulse 0.9s ease-in-out infinite;
}
.bingo-card.winner   { border-color: var(--bingo-gold); box-shadow: 0 0 24px rgba(245,158,11,0.6); }
.bingo-card.promoted { animation: cardPromoted 0.5s ease-out; }

@keyframes oneAwayPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(139,92,246,0.3); border-color: var(--bingo-purple); }
    50%       { box-shadow: 0 0 30px rgba(139,92,246,0.8); border-color: #c084fc; }
}

@keyframes cardPromoted {
    0%   { transform: translateY(-12px) scale(1.03); box-shadow: 0 8px 32px rgba(37,99,235,0.5); }
    60%  { transform: translateY(2px) scale(1.01); }
    100% { transform: translateY(0) scale(1); }
}

.bingo-card-header {
    display: grid;
    grid-template-columns: repeat(5, var(--card-cell));
}

.bingo-col-label {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #fff;
}

.bingo-col-label:nth-child(1) { background: var(--col-b); }
.bingo-col-label:nth-child(2) { background: var(--col-i); }
.bingo-col-label:nth-child(3) { background: var(--col-n); }
.bingo-col-label:nth-child(4) { background: var(--col-g); }
.bingo-col-label:nth-child(5) { background: var(--col-o); }

.bingo-card-grid {
    display: grid;
    grid-template-columns: repeat(5, var(--card-cell));
    gap: 0;
}

.bingo-cell {
    width: var(--card-cell);
    height: var(--card-cell);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #0d1525;
    position: relative;
    transition: all 0.2s;
    color: #94a3b8;
    background: var(--bingo-surface);
}

.bingo-cell.free {
    background: #1e293b;
    color: var(--bingo-gold);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.bingo-cell.daubed {
    background: #1e3a5f;
    color: #fff;
}

.bingo-cell.daubed::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var(--bingo-accent);
    opacity: 0.85;
}

.bingo-cell.last-called {
    background: var(--bingo-gold) !important;
    color: #000 !important;
    animation: daubPop 0.4s ease-out;
}
.bingo-cell.last-called::after {
    background: rgba(0,0,0,0.2);
}

@keyframes daubPop {
    0%   { transform: scale(1.25); }
    100% { transform: scale(1); }
}

#noCardsMsg {
    text-align: center;
    padding: 20px;
    color: var(--bingo-silver);
    font-size: 0.9rem;
    display: none;
}
#noCardsMsg.show { display: block; }

/* ── Winner banner ────────────────────────────────────────────────────────── */

#winnerBanner {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 200;
    flex-direction: column;      /* mobile: Zara on top, box below */
    align-items: stretch;
    overflow: hidden;
    animation: fadeIn 0.5s ease-out;
}
#winnerBanner.show { display: flex; }

/* Zara celebration panel */
#zaraWinPanel {
    flex: 0 0 38vh;
    overflow: hidden;
    min-height: 0;
}
#zaraWinBg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

#winnerBox {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    text-align: center;
    overflow-y: auto;
    min-height: 0;
    background: var(--bingo-surface);
    border-top: 2px solid var(--bingo-gold);
    animation: slideUp 0.4s ease-out;
}

@keyframes fadeIn  { from { opacity: 0; }           to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

#winnerBox .trophy      { font-size: 3rem; margin-bottom: 12px; }
#winnerBox h2           { font-size: 1.6rem; color: var(--bingo-gold); margin: 0 0 8px; }
#winnerBox .winner-name { font-size: 1.2rem; color: #fff; font-weight: 700; margin-bottom: 4px; }
#winnerBox .prize-line  { font-size: 1rem; color: var(--bingo-green); margin-bottom: 4px; }
#winnerBox .balls-line  { font-size: 0.85rem; color: var(--bingo-silver); margin-bottom: 20px; }
#winnerBox .your-win    { font-size: 1.1rem; color: var(--bingo-gold); font-weight: 700; margin-bottom: 20px; }

#dismissWinner {
    padding: 12px 32px;
    background: var(--bingo-accent);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}

/* ── Responsive: mobile ──────────────────────────────────────────────────────*/

@media (max-width: 600px) {
    :root {
        --card-cell:  var(--card-cell-sm);
        --ball-sm:    26px;
    }

    #bingoHeader h1 { font-size: 1rem; letter-spacing: 1px; }
    #bingoCredits   { font-size: 0.85rem; }
    .home-btn       { padding: 5px 10px; font-size: 0.75rem; }

    /* Grand prize: stack on mobile */
    #pool-grand {
        flex-direction: column;
        text-align: center;
        gap: 6px;
        padding: 14px 12px;
    }
    #pool-grand .pool-amount { font-size: 2rem; }

    /* Mobile prize grid */
    #poolDisplay     { grid-template-columns: repeat(2, 1fr); }
    #pool-grand      { grid-column: 1 / -1; }
    #pool-mustgo     { grid-column: 1 / -1; }
    .pool-card.mustgo { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; }
    .pool-card.mustgo .pool-label { margin-bottom: 0; }
    .pool-card.mustgo .pool-balls { margin-top: 0; }

    #sessionTimer { font-size: 2.5rem; }

    .bingo-card-header { grid-template-columns: repeat(5, var(--card-cell-sm)); }
    .bingo-card-grid   { grid-template-columns: repeat(5, var(--card-cell-sm)); }
    .bingo-cell        { width: var(--card-cell-sm); height: var(--card-cell-sm); font-size: 0.72rem; }
    .bingo-col-label   { font-size: 0.7rem; height: 22px; }

    #currentBallLetter { font-size: 1.5rem; }
    #currentBall       { font-size: 1.2rem; }
    #zaraCrystalWrap   { width: 52px; height: 52px; }
    #gamePoolMini      { display: none; }
    .ball-col-header   { font-size: 0.6rem; }

    /* Purchase: stack */
    .purchase-row     { flex-direction: column; align-items: flex-start; gap: 8px; }
    .purchase-actions { flex-direction: column; }
    #buyCardsBtn      { width: 100%; }
    #repeatBetBtn     { width: 100%; }

    /* Chat widget */
    .game-chat {
        left: 0; right: 0; bottom: 0;
        width: 100%;
        border-radius: 12px 12px 0 0;
        max-height: 44px;
    }
    .game-chat.minimized   { border-radius: 12px 12px 0 0; }
    .game-chat:not(.minimized) { max-height: 280px; }

    #bingoLobby { padding-bottom: 60px; }

    /* On mobile game screen, stack ball board above cards */
    #gameMain {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
    }
    #gameTopBar   { grid-column: 1; grid-row: 1; }
    #ballBoard    {
        grid-column: 1; grid-row: 2;
        border-right: none;
        border-bottom: 1px solid var(--bingo-border);
        overflow-x: auto;
        overflow-y: hidden;
    }
    #ballBoardInner { flex-direction: row; }
    #gameCardsArea  { grid-column: 1; grid-row: 3; }
}

/* ── Responsive: tablet (600–900px) ─────────────────────────────────────────*/

@media (min-width: 600px) and (max-width: 899px) {
    #bingoLobby {
        padding: 24px 32px 60px;
    }
}

/* ── Drawing overlay + winner banner: side-by-side on tablet+ ───────────── */

@media (min-width: 600px) {
    /* Drawing overlay: Zara on left, text on right */
    #drawingOverlay { flex-direction: row; }
    #zaraDrawingSide { display: flex; }

    /* Crystal ball: larger on non-mobile */
    #zaraCrystalWrap { width: 90px; height: 90px; }
    #currentBall { font-size: 1.8rem; }
}

@media (min-width: 700px) {
    /* Winner banner: Zara on left, win info on right */
    #winnerBanner {
        flex-direction: row;
        align-items: stretch;
    }
    #zaraWinPanel {
        flex: 0 0 42%;
        max-width: 520px;
        height: 100%;
    }
    #winnerBox {
        flex: 1;
        padding: 40px 48px;
        border-top: none;
        border-left: 2px solid var(--bingo-gold);
    }
}

/* ── Responsive: desktop (900px+) ───────────────────────────────────────────*/

@media (min-width: 900px) {

    /* Lobby: two-column grid, full width */
    #bingoLobby.active {
        display: grid;
        grid-template-columns: 1fr min(460px, 38%);
        gap: 24px 40px;
        align-items: start;
        padding: 28px 48px 60px;
    }

    #sessionTimerBox { grid-column: 1; }
    #poolDisplay     { grid-column: 1; }
    #myCardsLobby    { grid-column: 1; }
    #lastResult      { grid-column: 1; }
    #inProgressMsg   { grid-column: 1; }
    #purchaseArea    {
        grid-column: 2;
        grid-row: 1 / span 5;
        position: sticky;
        top: 20px;
        /* Tall enough that Zara dominates the top ~60% */
        min-height: calc(100vh - 100px);
        max-height: calc(100vh - 60px);
        border-radius: 12px;
    }

    #sessionTimer { font-size: 5rem; }

    #buyCardsBtn   { width: auto; min-width: 160px; }
    #repeatBetBtn  { width: auto; }
    .purchase-actions { flex-direction: row; }

    /* Game screen: use card-cell-game (smaller) for tighter fit */
    #gameCardsArea .bingo-card-header { grid-template-columns: repeat(5, var(--card-cell-game)); }
    #gameCardsArea .bingo-card-grid   { grid-template-columns: repeat(5, var(--card-cell-game)); }
    #gameCardsArea .bingo-cell        { width: var(--card-cell-game); height: var(--card-cell-game); font-size: 0.8rem; }
    #gameCardsArea .bingo-col-label   { height: 22px; font-size: 0.8rem; }

    /* Cards: 3 per row to maximize visible cards */
    #gameCards {
        display: grid;
        grid-template-columns: repeat(3, max-content);
        gap: 12px;
        align-items: start;
    }
}

/* ── Very wide screens (1400px+): 4 cards per row ───────────────────────────*/
@media (min-width: 1400px) {
    #gameCards {
        grid-template-columns: repeat(4, max-content);
    }
}