/* ============================================================================
   game-table.css — shared "recipe book" for PGD game-page sample-hand tables.

   ONE stylesheet for every game's interactive felt. A page picks its recipe
   with two attributes on .felt-table:

     data-layout = the board template:
                   single-board | multi-board | path-grid | stud | draw
     data-cards  = the card-size tier (by hole cards per player):
                   lg (<=4) | md (5) | sm (6+)

   Card sizing is uniform — hero, opponents, board and deck all render at one
   size — ported from the PokerATG web app. It decomposes into three knobs:
     card width = max(--card-min, --card-base * --card-scale)
   --card-base   the VIEWPORT's say (50px desktop; fluid on mobile)
   --card-scale  the GAME's say, from data-cards
   --card-min    the absolute floor
   Height is the real 5:7 playing-card ratio.

   The one exception ("oddball") is path-grid (chowaha's 12-card board), whose
   board cards must be smaller than the holes — expressed as --board-card-scale,
   NOT a per-page hack. Any future oddball is a new named recipe here, reachable
   by any game, never custom to the page.
   ========================================================================== */

/* ── Tutorial section shell ─────────────────────────────────────────────── */
.tutorial-section {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 30px;
}
.tutorial-section h2 { margin-top: 0; }
.table-wrap { position: relative; width: 100%; max-width: 760px; margin: 24px auto 0; }

/* ── The felt + the card-size knobs ─────────────────────────────────────── */
.felt-table {
    background: radial-gradient(ellipse at center, #1a7a4a 60%, #0f5530 100%);
    border: 6px solid #7a4f1e;
    border-radius: 50%;
    width: 100%;
    aspect-ratio: 16 / 10;
    position: relative;
    box-shadow: 0 0 40px rgba(0,0,0,0.6), inset 0 0 60px rgba(0,0,0,0.3);

    --card-base: 50px;
    --card-min: 28px;
    --card-scale: 1;                /* lg — overridden by data-cards below */
    --card-w: max(var(--card-min), calc(var(--card-base) * var(--card-scale)));
    --card-h: calc(var(--card-w) * 7 / 5);
    --board-card-scale: 1;          /* board cards match holes (uniform) by default */
}
/* Tier: the game's say. */
.felt-table[data-cards='md'] { --card-scale: 0.88; }
.felt-table[data-cards='sm'] { --card-scale: 0.76; }
/* No opponent-row overlap: seats sit in the corners with the board centered, so
   even 7-card hands (stud hybrids) fit spread out. Overlapping only ever stacked
   the empty "card-to-come" placeholders (ugly). Cards always lay out in full. */

/* ── Seats ──────────────────────────────────────────────────────────────── */
.seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: opacity 0.5s; }
.seat.folded { opacity: 0.35; }
.seat-label {
    font-family: 'Oswald', sans-serif; font-size: 0.75rem; letter-spacing: 1px;
    color: rgba(255,255,255,0.85); text-shadow: 1px 1px 3px rgba(0,0,0,0.8); white-space: nowrap;
}
.seat-hero  { bottom: 3%; left: 50%; transform: translateX(-50%); }
.seat-left  { top: 18%; left: 2%;  transform: translateY(-50%); }
.seat-right { top: 18%; right: 2%; transform: translateY(-50%); }

/* Card-group wrappers inside a seat (pick whichever fits the hand). */
.hole-cards { display: flex; gap: 4px; }
.hand-row   { display: flex; gap: 4px; }
.hand-grid  { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 5px; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card-slot { width: var(--card-w); height: var(--card-h); border-radius: 4px; position: relative; perspective: 600px; }
.card-slot img {
    width: 100%; height: 100%; border-radius: 4px; position: absolute; top: 0; left: 0;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.5); backface-visibility: hidden;
}
.card-slot .card-back  { transform: rotateY(0deg);   transition: transform 0.5s ease; }
.card-slot .card-front { transform: rotateY(180deg); transition: transform 0.5s ease; }
.card-slot.flipped .card-back  { transform: rotateY(-180deg); }
.card-slot.flipped .card-front { transform: rotateY(0deg); }
@keyframes dealIn {
    from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(0.6); }
    to   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
.card-slot.dealing { animation: dealIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
.card-slot.empty   { background: rgba(0,0,0,0.25); border: 1px dashed rgba(255,255,255,0.2); }
.card-slot.discarded { opacity: 0.4; transition: opacity 0.4s ease; }
.card-slot.discarded::after {
    content: '✕'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #ff4444; font-size: 1.4rem; font-weight: bold; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
/* Multi-hand games: when a labelled hand-pair is discarded, dim its A/B/C label to
   match the ghosted cards (mirrors how the hero's .folded hand dims label + cards). */
.hand-pair:has(.card-slot.discarded) .hand-label { opacity: 0.4; }
/* Highlight showdown cards (split-pot games use both). */
.card-slot.used-card { box-shadow: 0 0 8px 3px gold, 2px 3px 8px rgba(0,0,0,0.5); }
.card-slot.used-high { box-shadow: 0 0 10px 3px gold, 2px 3px 8px rgba(0,0,0,0.5); }
.card-slot.used-low  { box-shadow: 0 0 10px 3px #22cc44, 2px 3px 8px rgba(0,0,0,0.5); }
.card-slot.used-high.used-low { box-shadow: 0 0 10px 3px gold, 0 0 18px 6px #22cc44, 2px 3px 8px rgba(0,0,0,0.5); }

/* Board cards inherit the uniform size, scaled by --board-card-scale (1 = uniform). */
.community-area .card-slot,
.boards-area    .card-slot,
.community-layout .card-slot {
    width: calc(var(--card-w) * var(--board-card-scale));
    height: calc(var(--card-h) * var(--board-card-scale));
}

/* ── Board template: SINGLE-BOARD (community-area, 5 cards) ──────────────── */
.community-area {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; gap: 6px; align-items: center;
}

/* Optional "COMMUNITY" caption above the board (some games label it). */
.community-label {
    position: absolute; top: 37%; left: 50%; transform: translateX(-50%);
    font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 1px;
    background: rgba(0,0,0,0.5); padding: 2px 8px; border-radius: 10px;
    color: rgba(255,255,255,0.7); white-space: nowrap;
}

/* ── Board template: MULTI-BOARD (2-3 stacked rows) ─────────────────────── */
.boards-area {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; gap: 8px;
}
.boards-area .board-row {
    display: flex; align-items: center; justify-content: center; gap: 5px; position: relative;
}
.board-label {
    font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 1px;
    color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.5); padding: 2px 4px; border-radius: 4px;
    /* pulled left of the row so the cards stay centered on the table */
    position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 8px;
    text-align: center; white-space: nowrap;   /* auto width — fits "TOP" or "BOARD 1" */
}
.board-label.top-label { color: #ffe566; }
.board-label.bot-label { color: #ff9999; }
.board-winner {
    position: absolute; right: -72px; top: 50%; transform: translateY(-50%);
    font-family: 'Oswald', sans-serif; font-size: 0.65rem; padding: 2px 7px; border-radius: 20px;
    white-space: nowrap; opacity: 0; transition: opacity 0.5s; color: #000;
}

/* ── Board template: PATH-GRID (chowaha 12-card) — the oddball recipe ────── */
.felt-table[data-layout='path-grid'] { --board-card-scale: 0.72; }
.community-layout {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; gap: 8px; align-items: flex-start;
}
.flop-grid {
    display: grid;
    grid-template-columns: repeat(3, calc(var(--card-w) * var(--board-card-scale)));
    grid-template-rows: repeat(3, calc(var(--card-h) * var(--board-card-scale)));
    gap: 4px;
}
.turn-col  { display: flex; flex-direction: column; gap: 4px; padding-top: calc(var(--card-h) * var(--board-card-scale) * 0.5); }
/* River centers vertically against the full 3-row flop height (3 cards + 2 gaps). */
.river-col { display: flex; align-items: center; height: calc(var(--card-h) * var(--board-card-scale) * 3 + 8px); }

/* ── Deck ───────────────────────────────────────────────────────────────── */
.deck-spot {
    position: absolute; right: 9%; top: 62%; transform: translateY(-50%);
    width: var(--card-w); height: var(--card-h); border-radius: 4px; box-shadow: 2px 3px 8px rgba(0,0,0,0.5);
}
.deck-spot img { width: 100%; height: 100%; border-radius: 4px; }

/* ── Overlays: pot, winner + role badges ────────────────────────────────── */
.pot-label {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5;
    font-family: 'Oswald', sans-serif; font-size: 0.8rem; letter-spacing: 1px;
    background: rgba(0,0,0,0.7); padding: 3px 10px; border-radius: 20px; color: rgba(255,255,255,0.9);
    white-space: nowrap; opacity: 0; transition: opacity 0.4s;
}
/* Board games: lift the pot above the centered board. */
.felt-table[data-layout='single-board'] .pot-label,
.felt-table[data-layout='multi-board']  .pot-label,
.felt-table[data-layout='path-grid']    .pot-label { top: 26%; }

.winner-badge {
    position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
    font-family: 'Oswald', sans-serif; font-size: 0.7rem; padding: 2px 8px; border-radius: 20px;
    white-space: nowrap; opacity: 0; transition: opacity 0.5s; background: gold; color: #000;
}
.winner-badge.low-badge  { background: #7fffb0; }
.winner-badge.high-badge { background: gold; }
.bring-in-badge {
    position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
    background: #cc2200; color: #fff; font-family: 'Oswald', sans-serif; font-size: 0.72rem;
    padding: 2px 10px; border-radius: 20px; white-space: nowrap; opacity: 0; transition: opacity 0.5s;
}
.folded-badge {
    font-family: 'Oswald', sans-serif; font-size: 0.7rem; padding: 2px 8px; border-radius: 20px;
    white-space: nowrap; opacity: 0; transition: opacity 0.5s; background: rgba(200,0,0,0.7); color: #fff;
}

/* ── Step box + controls (controls ABOVE the step text — no button-chase) ── */
.tutorial-controls { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.tut-btn { padding: 10px 24px; font-family: 'Oswald', sans-serif; font-size: 1rem; letter-spacing: 1px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.5); cursor: pointer; transition: all 0.25s ease; }
#btnDeal { background: rgba(255,255,255,0.9); color: #000; }
#btnDeal:hover { background: #ffffff; transform: translateY(-2px); }
#btnDeal:disabled { opacity: 0.4; cursor: default; transform: none; }
#btnReset { background: transparent; color: #ffffff; }
#btnReset:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); }
.step-counter { margin-left: auto; font-family: 'Oswald', sans-serif; font-size: 0.95rem; color: rgba(255,255,255,0.6); align-self: center; }
.step-box { margin-top: 20px; background: rgba(0,0,0,0.35); border-left: 4px solid #ffffff; border-radius: 6px; padding: 14px 18px; min-height: 70px; }
.step-title { font-family: 'Oswald', sans-serif; font-size: 1.2rem; letter-spacing: 1px; margin-bottom: 6px; }
.step-desc  { font-size: 0.95rem; color: rgba(255,255,255,0.85); line-height: 1.5; }

/* ── Mobile (<=767px): re-layout the felt vertically ────────────────────────
   Desktop keeps the circular table. Phones get a rounded panel laid out with
   CSS grid. The deal animation needs NO JS changes — getDeckOffset() reads live
   geometry, so the fly-in adapts. One knob changes: a smaller, fluid --card-base
   (the tier scale, 5:7 ratio and floor all carry over automatically).
   Grid shape is chosen by data-layout. */
@media (max-width: 767px) {
    .tutorial-section { padding: 18px 12px; }

    .felt-table {
        --card-base: clamp(34px, 10.5vw, 40px);
        aspect-ratio: auto; border-radius: 18px; border-width: 4px;
        display: grid; grid-template-columns: 1fr 1fr;
        grid-template-areas: "p2 p3" "boards boards" "hero hero";
        gap: 16px 8px; padding: 16px 8px 26px; align-items: start; justify-items: center;
    }
    /* draw + stud = single column: their 5–7 card hands are too wide for a
       half-width phone column, so each seat gets the full width, stacked. */
    .felt-table[data-layout='draw'],
    .felt-table[data-layout='stud'] {
        grid-template-columns: 1fr; grid-template-areas: "p2" "p3" "hero";
    }
    /* Multi-hand single-board games (hero holds grouped .hand-pair hands; each
       opponent shows 6 cards) are too wide for a half-width phone column. Stack
       every seat full-width like stud/draw, but KEEP the board row (they have a
       community board). :has(.hand-pair) uniquely tags the multi-hand layout. */
    .felt-table[data-layout='single-board']:has(.hand-pair) {
        grid-template-columns: 1fr; grid-template-areas: "p2" "p3" "boards" "hero";
    }
    /* Board games stay 2-column (P2/P3 side by side, boards centered, hero bottom);
       opponents fan (below) so wide hands fit. Only stud/draw stack (above). */
    /* Stud's BRING-IN badge hangs below a MIDDLE seat — add room ONLY below the
       seat that carries it, so the other rows stay tight (no uniform wide gap). */
    .felt-table[data-layout='stud'] .seat:has(.bring-in-badge) { margin-bottom: 16px; }

    .seat { position: relative; top: auto; left: auto; right: auto; bottom: auto; transform: none; }
    .seat-left { grid-area: p2; } .seat-right { grid-area: p3; } .seat-hero { grid-area: hero; }

    /* Board-game opponents in a flex-ROW (.hole-cards/.hand-row) FAN so wide hands fit
       the half-width column, with empty-slot outlines hidden so the overlap reads clean.
       GRID hands (.hand-grid, e.g. scarney's 3×2) already fit, so leave them as a grid
       like the hero. (stud/draw stack; their 7/5-card rows get full width.) */
    .felt-table:not([data-layout='stud']):not([data-layout='draw']):not(:has(.hand-pair)) .seat-left  .hole-cards .card-slot:not(:first-child),
    .felt-table:not([data-layout='stud']):not([data-layout='draw']):not(:has(.hand-pair)) .seat-left  .hand-row   .card-slot:not(:first-child),
    .felt-table:not([data-layout='stud']):not([data-layout='draw']):not(:has(.hand-pair)) .seat-right .hole-cards .card-slot:not(:first-child),
    .felt-table:not([data-layout='stud']):not([data-layout='draw']):not(:has(.hand-pair)) .seat-right .hand-row   .card-slot:not(:first-child) {
        margin-left: calc(var(--card-w) * -0.42);
    }
    .felt-table:not([data-layout='stud']):not([data-layout='draw']):not(:has(.hand-pair)) .seat-left  .hole-cards .card-slot.empty,
    .felt-table:not([data-layout='stud']):not([data-layout='draw']):not(:has(.hand-pair)) .seat-left  .hand-row   .card-slot.empty,
    .felt-table:not([data-layout='stud']):not([data-layout='draw']):not(:has(.hand-pair)) .seat-right .hole-cards .card-slot.empty,
    .felt-table:not([data-layout='stud']):not([data-layout='draw']):not(:has(.hand-pair)) .seat-right .hand-row   .card-slot.empty {
        border-color: transparent; background: transparent;
    }

    .community-area, .boards-area, .community-layout {
        grid-area: boards; position: relative; top: auto; left: auto; transform: none;
        align-items: center; justify-content: center;
    }
    .boards-area .board-row { justify-content: center; }

    .deck-spot       { display: none; }
    .board-winner    { display: none; }
    .community-label { display: none; }   /* board row is self-evident stacked */
    .pot-label,
    .felt-table[data-layout] .pot-label { top: 6px; left: 50%; transform: translate(-50%, -50%); }

    /* ── Desktop-only animation fallback ─────────────────────────────────
       Some games are too dense to render legibly on a phone (e.g. banco's
       stacked 3×3 board, where cards collide no matter how they're scaled).
       Such a game sets data-mobile-anim="off" on its .felt-table: on mobile the
       animated content is hidden and the felt becomes a slim placeholder with a
       notice. The step-box + controls below are siblings (not children), so the
       written step-by-step walkthrough keeps working — you just read it here. */
    .felt-table[data-mobile-anim='off'] {
        display: flex; align-items: center; justify-content: center;
        aspect-ratio: auto; min-height: 120px; padding: 26px 18px;
    }
    .felt-table[data-mobile-anim='off'] > * { display: none !important; }
    .felt-table[data-mobile-anim='off']::after {
        content: '🖥️  Animation only available on desktop';
        display: inline-block; max-width: 260px; text-align: center;
        color: rgba(255, 255, 255, 0.95); font-weight: 600;
        font-size: 14px; line-height: 1.5; letter-spacing: 0.2px;
        padding: 12px 18px; border-radius: 12px;
        background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.18);
    }
}