/**
 * Whist Românesc 1-8-1 — Casino-Grade Professional Table (PRO v3)
 *
 * Design philosophy:
 *   - Premium green felt cu spotlight green glow + leather/wood frame multi-layer
 *   - Casino chip aesthetic cu conic-gradient pattern pe bid buttons
 *   - Cinzel serif typography (autentic casino) + Oswald/Inter for stats
 *   - Avatar cu border gradient gold animat (rotating hue când e turn)
 *   - Active turn chevron ▲ indicator + active-pulse glow
 *   - Card backs cu gilt brown design + suit watermark
 *   - Score chips ca cazinou real cu dotted inner border + glow rim
 *   - 3D tilted played cards în trick
 *   - Felt emblem cu suit symbols decoration ♠♥♦♣
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;700;900&family=Cinzel:wght@600;800&family=Inter:wght@400;600;700;800&display=swap');

/* ═══ Font imports & vars ═══ */
/* FIX CRITIC TEME (2026-06-10): era `:root` → fiind încărcat DUPĂ whist-pro.css, SUPRASCRIA
   variabilele TUTUROR temelor pe orice pagină (de-aia „temele nu schimbă nimic" / light spart).
   Acum token-urile identității dark a MESEI sunt scopate la subtree-ul jocului: masa rămâne
   premium dark pe ORICE temă (inclusiv light — standard la jocurile de cărți), iar temele
   controlează chrome-ul (lobby/panouri/modale/dock). #whistScoreboardOverlay e montat pe body. */
#whistRoot, #whistScoreboardOverlay, .whist-bid-area, .whist-opp-tooltip {
    --whist-felt-1: #1e6a3a;
    --whist-felt-2: #14502b;
    --whist-felt-3: #0a2d1a;
    --whist-leather-1: #4a2c14;
    --whist-leather-2: #6b3d1d;
    --whist-leather-3: #8b5a2b;
    --whist-gold: #ffd700;
    --whist-gold-deep: #d97706;
    --whist-gold-soft: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
    --whist-blue: #5b8def;
    --whist-blue-deep: #1e3a8a;
    --whist-green: #4ade80;
    --whist-red: #dc2626;
    --whist-bg: #0a0e1a;
    --whist-surface: #1a2333;
    --whist-surface-2: #242d3f;
    --whist-text: #f1f5f9;
    --whist-text-dim: #94a3b8;
    --whist-gold-light: #ffeaa8;
    --whist-gold-rgb: 255, 215, 0;
    --whist-gold-deep-rgb: 217, 119, 6;
    --whist-panel-rgb: 28, 35, 53;
    --whist-deep-rgb: 12, 18, 32;
    --whist-text-mid: #cbd5e1;
    --whist-text-strong: #fff;
    color: var(--whist-text);
}
/* ── MASA sub tema LIGHT (cerere user: „masa să respecte light") — skin luminos:
   panouri albe, text închis, auriu royal închis (lizibil pe alb). Feltul rămâne colorat
   (ca mesele reale în cameră luminoasă). Dark/celelalte teme = identice (fallback-uri). ── */
[data-theme="light"] #whistRoot,
[data-theme="light"] #whistScoreboardOverlay,
[data-theme="light"] .whist-bid-area,
[data-theme="light"] .whist-opp-tooltip {
    --whist-gold: #a07408;
    --whist-gold-light: #c29010;
    --whist-gold-deep: #7c5a06;
    --whist-gold-soft: rgba(160, 116, 8, 0.35);
    --whist-gold-rgb: 160, 116, 8;
    --whist-gold-deep-rgb: 124, 90, 6;
    --whist-panel-rgb: 255, 255, 255;
    --whist-deep-rgb: 238, 241, 247;
    --whist-bg: #eef1f6;
    --whist-surface: #ffffff;
    --whist-surface-2: #f3f5fa;
    --whist-text: #1a2335;
    --whist-text-mid: #33415e;
    --whist-text-dim: #5a6a8a;
    --whist-text-strong: #1a2335;
    --whist-blue: #2f5fc4;
    color: var(--whist-text);
}
/* Cerneala CĂRȚILOR — NICIODATĂ tematizată (carte albă + cerneală roșie/neagră, obiect fizic).
   `--card-color` vine inline din JS per culoare; !important blochează orice override de temă. */
.whist-card { color: var(--card-color, #0f172a) !important; }

/* ═══ HIDE LOBBY ADS + Remi residue când suntem în joc ═══ */
body.whist-game-active #lobbyAdLeft,
body.whist-game-active #lobbyAdRight,
body.whist-game-active .lobby-ad,
body.whist-game-active #scoreLabelPlayer,
body.whist-game-active #scoreLabelPlayerShort,
body.whist-game-active #scoreLabelOpponent,
body.whist-game-active #scoreLabelOpponentShort {
    display: none !important;
}

/* GamePlayView — absolute în .game-area (sub header, deasupra footer) */
.game-area {
    position: relative !important;
}

#gamePlayView.whist-active {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    /* height 100% (NU auto) — altfel root grid content (554px) depășește
       gameArea (498px) și player-area iese sub viewport (cărți tăiate la reconnect) */
    height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    background: var(--whist-bg) !important;
    overflow: hidden !important;
    z-index: 5;
}

/* ═══ Root grid layout (compact — felt mare, bottom mic ca Macao) ═══ */
.whist-root {
    position: absolute;
    inset: 0;
    height: 100%;
    max-height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 132px;
    grid-template-columns: 1fr 240px;
    grid-template-areas:
        "felt   sidebar"
        "bottom sidebar";
    background:
        radial-gradient(ellipse at top left, rgba(91, 141, 239, 0.06), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.05), transparent 50%),
        var(--whist-bg);
    color: var(--whist-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    overflow: hidden;
    user-select: none;
}

/* ═══════════════════════════════════════════════
   STATUS BAR (top)
   ═══════════════════════════════════════════════ */
.whist-statusbar {
    /* FIX BUG #1 CSS (audit): grid-area:topbar inexistent (grid root are doar `felt` + `bottom`).
       Plasa elementul în slot fantomă → overlap în streamer mode. Eliminat — statusbar e
       oricum display:none normal, doar streamer mode îl arată via override explicit. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
    background:
        linear-gradient(180deg, rgba(28, 22, 8, 0.98) 0%, rgba(20, 28, 48, 0.96) 100%);
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, transparent, var(--whist-gold), transparent) 1;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.6),
        inset 0 -1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    z-index: 10;
}

.whist-status-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.whist-status-center {
    justify-content: center;
}

/* ── ATU pill ── */
.whist-atu-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    background:
        linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.32) 0%, rgba(184, 134, 11, 0.25) 100%),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    border: 2px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.7);
    border-radius: 24px;
    box-shadow:
        0 0 28px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    position: relative;
}

.whist-atu-pill::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.8), rgba(var(--whist-gold-deep-rgb, 217, 119, 6), 0.4), rgba(var(--whist-gold-rgb, 255, 215, 0), 0.8));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.whist-atu-pill.no-atu {
    background: rgba(100, 100, 100, 0.18);
    border-color: rgba(150, 150, 150, 0.3);
    box-shadow: none;
}

.whist-atu-pill.no-atu::before {
    display: none;
}

.whist-atu-text {
    font-size: 10px;
    color: #ffec80;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 900;
    font-family: 'Cinzel', 'Oswald', serif;
    text-shadow: 0 0 8px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.6);
}

.whist-atu-symbol {
    font-size: 20px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    font-weight: 700;
}

.whist-atu-card {
    padding: 3px 9px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-size: 13px;
    color: var(--whist-text-strong, #fff);
    font-weight: 800;
    font-family: 'Cinzel', 'Bebas Neue', serif;
    letter-spacing: 0.5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ── Round pill ── */
.whist-round-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background:
        linear-gradient(135deg, rgba(91, 141, 239, 0.18), rgba(91, 141, 239, 0.08));
    border: 1.5px solid rgba(91, 141, 239, 0.45);
    border-radius: 24px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.whist-round-icon {
    font-size: 14px;
    filter: drop-shadow(0 0 4px rgba(91, 141, 239, 0.6));
}

.whist-round-text {
    font-size: 13px;
    color: var(--whist-text-mid, #cbd5e1);
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ── Timer pill ── */
.whist-timer-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    min-width: 88px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.whist-timer-pill.warning {
    background: rgba(180, 120, 0, 0.32);
    border-color: rgba(255, 190, 60, 0.55);
}
.whist-timer-pill.warning .whist-timer-text { color: #ffd27a; }
.whist-timer-pill.danger {
    background: rgba(190, 30, 30, 0.38);
    border-color: rgba(255, 80, 80, 0.7);
    box-shadow: 0 0 14px rgba(255, 60, 60, 0.45);
    animation: whist-timer-pulse 0.9s ease-in-out infinite;
}
.whist-timer-pill.danger .whist-timer-text { color: #ff8a8a; }
@keyframes whist-timer-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

.whist-timer-icon { font-size: 14px; }
.whist-timer-text {
    font-size: 13px;
    color: var(--whist-text-mid, #cbd5e1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* ── Turn indicator ── */
.whist-turn-mine {
    color: var(--whist-green);
    font-weight: 800;
    font-size: 15px;
    padding: 9px 22px;
    background:
        linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(34, 197, 94, 0.1));
    border: 1.5px solid rgba(74, 222, 128, 0.5);
    border-radius: 22px;
    text-shadow: 0 0 16px rgba(74, 222, 128, 0.8);
    box-shadow:
        0 0 30px rgba(74, 222, 128, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: whist-pulse-mine 1.5s ease-in-out infinite;
    letter-spacing: 0.3px;
}

.whist-turn-other {
    color: var(--whist-text-mid, #cbd5e1);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
}

.whist-turn-info {
    color: var(--whist-gold);
    font-size: 14px;
    font-weight: 800;
    padding: 9px 22px;
    background:
        linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(var(--whist-gold-deep-rgb, 217, 119, 6), 0.08));
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 22px;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

@keyframes whist-pulse-mine {
    0%, 100% {
        box-shadow: 0 0 24px rgba(74, 222, 128, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 44px rgba(74, 222, 128, 0.95);
        transform: scale(1.02);
    }
}

/* ═══════════════════════════════════════════════
   TABLE AREA = FELT (background, NOT a separate div)
   ═══════════════════════════════════════════════ */
.whist-table-area {
    grid-area: felt;
    position: relative;
    perspective: 1100px;            /* 3D pt. panoul de licitare care "iese din masă" */
    perspective-origin: 50% 55%;
    margin: 6px 0 0 6px;
    border-radius: 14px;
    background:
        radial-gradient(ellipse 65% 50% at 50% 50%, rgba(74, 222, 128, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 85% 80% at 50% 50%, #1e7e3a 0%, #155728 50%, #0a3017 100%),
        repeating-linear-gradient(0deg, transparent 0 1px, rgba(0, 0, 0, 0.02) 1px 2px),
        repeating-linear-gradient(90deg, transparent 0 1px, rgba(255, 255, 255, 0.01) 1px 2px);
    overflow: hidden;
    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.7),
        inset 0 0 0 2px #2a1810,
        inset 0 0 0 4px #5a3520,
        inset 0 0 0 8px #3a2010,
        inset 0 0 0 10px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4),
        inset 0 0 0 11px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.15),
        0 0 32px rgba(0, 0, 0, 0.7),
        0 8px 24px rgba(0, 0, 0, 0.5);
}

/* TODO #4 — FELT COMPACT + CENTRAT pe ecrane MARI și ÎNALTE.
   Feltul umple celula grid (1fr), deci pe ecrane f. late (≥1700) devenea ~1438px lat
   (scaune împrăștiate + gol verde mare), iar pe portret înalt (ex. iPad Pro 1024×1366)
   ~1040px înalt (scaune + cărți jucate împrăștiate vertical). Plafonat la 1180×820 +
   `margin:auto` → masă compactă, încadrată, centrată în celulă pe ORICE ecran. Sub plafon
   (≲1200 lat / ≲820 înalt) umple normal → 1024×768 și 1366×768 rămân NESCHIMBATE.
   Scopat 901+ (mobilul ≤900 are layout-ul lui). Verificat: 1024×768/1366×768 neschimbat,
   1920/2560/3440 compact, 1024×1366 portret înălțime 1040→820. */
@media (min-width: 901px) {
    .whist-table-area {
        width: 100%;
        height: 100%;
        max-width: 1180px;
        max-height: 820px;
        margin: auto;
    }
}

.whist-table-area::after {
    content: '';
    position: absolute;
    inset: 12px;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.02) 0%, transparent 8%),
        radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.02) 0%, transparent 8%),
        radial-gradient(circle at 50% 80%, rgba(0, 0, 0, 0.04) 0%, transparent 10%);
    pointer-events: none;
    z-index: 0;
}

/* Wooden/leather frame border (faux 3D inset) */
.whist-table-area::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 8px;
    background:
        linear-gradient(135deg,
            transparent 0%,
            rgba(var(--whist-gold-rgb, 255, 215, 0), 0.05) 50%,
            transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO „WHIST ROMÂNESC" în mijlocul mesei (cerere user — testat + confirmat)
   Suit symbols ♥♠ deasupra + ♣♦ jos, text cu gradient metalic auriu,
   opacity 0.14 — subtil ca să NU distragă de la cărți (z-index 1).
   ═══════════════════════════════════════════════════════════════════════════ */
.whist-felt-watermark {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    user-select: none;
    width: auto;
    height: auto;
    opacity: 0.14;
    text-align: center;
}
.whist-felt-watermark .logo-title {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 84px;
    font-weight: 900;
    letter-spacing: 14px;
    line-height: 0.9;
    margin: 0;
    padding-left: 14px;
    /* Gradient aur metalic — alb la top, aur, bronz întunecat la bottom */
    background: linear-gradient(180deg, #ffe98a 0%, var(--whist-gold, #ffd700) 35%, #b8860b 75%, #8b6914 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--whist-gold, #ffd700);   /* fallback */
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.45),
        0 4px 12px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
}
.whist-felt-watermark .logo-subtitle {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 10px;
    color: var(--whist-gold, #ffd700);
    padding-left: 10px;
    margin: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.whist-felt-watermark .logo-suit-row {
    display: flex;
    gap: 28px;
}
.whist-felt-watermark .logo-suit {
    font-size: 22px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.whist-felt-watermark .logo-suit.red   { color: #ef4444; }
.whist-felt-watermark .logo-suit.black { color: #1e293b; }

/* Auto-play INLINE în scaunul sudic (cerere user — era badge flotant aiurea pe felt).
   Apare lângă „Făcute X" cât timp ești AFK, cu punct auriu pulsator subtil. */
.whist-my-auto {
    display: none;
    font-size: 9px;
    font-weight: 700;
    color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.85);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-top: 2px;
    line-height: 1;
    white-space: nowrap;
}
.whist-my-auto.visible { display: inline-block; }
.whist-my-auto::before {
    content: '●';
    margin-right: 4px;
    color: var(--whist-gold, #ffd700);
    text-shadow: 0 0 6px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.6);
}
/* Vechiul badge flotant — ascuns mereu (înlocuit de inline) */
.whist-auto-badge { display: none !important; }

/* DELAY animații — în timpul deal-ului, cărțile sunt ascunse ca să nu se vadă în paralel
   cu zborul "fly" din talon. Apar prin fresh-deal după ce zborul s-a terminat. */
.whist-root.whist-dealing #whistMyHand .whist-card,
.whist-root.whist-dealing .whist-card-back {
    opacity: 0;
    pointer-events: none;
    transition: none;
}

/* ═══════════════════════════════════════════════
   OPPONENT SEATS — position:absolute peste felt
   ═══════════════════════════════════════════════ */
.whist-opponent {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Seat positions — relative to .whist-table-area */
.whist-opp-north {
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
}
.whist-opp-east {
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
}
.whist-opp-west {
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
}
.whist-opp-ne {
    top: 14px;
    right: 22%;
}
.whist-opp-nw {
    top: 14px;
    left: 22%;
}

/* Opponent CARD (premium pro design) */
.whist-opp-card {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    background:
        linear-gradient(135deg, rgba(var(--whist-panel-rgb, 28, 35, 53), 0.97) 0%, rgba(var(--whist-deep-rgb, 12, 18, 32), 0.97) 100%);
    border: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.35);
    border-radius: 12px;
    backdrop-filter: blur(24px);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    width: 168px;
    position: relative;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* FIX BUG #2 CSS (audit): primul ::before (linie aurie decorativă sus) era OVERRIDE-uit silent
   de al doilea ::before (gradient mask border). Mutat în ::after dedicat ca linia aurie să apară. */
.whist-opp-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 11px;
    right: 11px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.5), transparent);
    pointer-events: none;
}

.whist-opp-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.15), transparent 30%, transparent 70%, rgba(91, 141, 239, 0.15));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
}

/* Active turn — STATIC glow (era pulse care făcea pucks să "vibreze" vizual) */
.whist-opponent.current-turn .whist-opp-card {
    border-color: rgba(74, 222, 128, 0.85);
    box-shadow:
        0 0 22px rgba(74, 222, 128, 0.45),
        0 8px 22px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(74, 222, 128, 0.2);
    /* fără animation — bordura verde + glow static = clar cine joacă, fără mișcare */
}

/* Active turn chevron — subtle elegant */
.whist-opponent.current-turn::after {
    content: '\25B2';  /* ▲ */
    position: absolute;
    color: #4ade80;
    font-size: 12px;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
    animation: whist-chevron-bounce 1s ease-in-out infinite;
    pointer-events: none;
}

.whist-opp-north.current-turn::after { bottom: -22px; left: 50%; transform: translateX(-50%); }
.whist-opp-east.current-turn::after { left: -22px; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.whist-opp-west.current-turn::after { right: -22px; top: 50%; transform: translateY(-50%) rotate(90deg); }
.whist-opp-ne.current-turn::after { bottom: -22px; left: 50%; transform: translateX(-50%); }
.whist-opp-nw.current-turn::after { bottom: -22px; left: 50%; transform: translateX(-50%); }

@keyframes whist-chevron-bounce {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Avatar */
.whist-opp-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2.5px solid transparent;
    background:
        linear-gradient(135deg, var(--whist-blue), var(--whist-blue-deep)) padding-box,
        linear-gradient(135deg, var(--whist-gold), #b8860b, var(--whist-gold)) border-box;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.8),
        inset 0 1px 4px rgba(255, 255, 255, 0.2);
}

.whist-opponent.current-turn .whist-opp-avatar {
    background:
        linear-gradient(135deg, var(--whist-blue), var(--whist-blue-deep)) padding-box,
        linear-gradient(135deg, #4ade80, #22c55e) border-box;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.8),
        0 0 16px rgba(74, 222, 128, 0.5),
        inset 0 1px 4px rgba(255, 255, 255, 0.2);
}

.whist-opp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.whist-opp-avatar .avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--whist-text-strong, #fff);
    font-size: 18px;
    font-weight: 800;
    font-family: 'Cinzel', 'Oswald', serif;
    background: linear-gradient(180deg, #5b8def 0%, #1e3a8a 100%);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.whist-dealer-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    background:
        radial-gradient(circle at 35% 35%, #fff8dc 0%, var(--whist-gold) 40%, var(--whist-gold-deep) 100%);
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--whist-bg);
    box-shadow:
        0 2px 8px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.8),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
    font-family: 'Oswald', 'Bebas Neue', sans-serif;
}

.whist-opp-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.whist-opp-name {
    font-family: 'Cinzel', 'Oswald', serif;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--whist-text-strong, #fff);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.15px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    line-height: 1;
}

.whist-opp-stats {
    display: flex;
    gap: 3px;
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.95);
    flex-wrap: nowrap;
}

.whist-opp-stats span {
    padding: 2px 5px;
    background:
        linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.12) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.4) 100%);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.18);
    border-radius: 4px;
    white-space: nowrap;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.whist-opp-stats b {
    color: var(--whist-gold);
    font-weight: 900;
    margin-left: 1px;
    font-family: 'Cinzel', 'Oswald', serif;
    font-size: 10.5px;
    text-shadow: 0 0 6px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.5);
}

/* Score chip (casino-style cu rim glow — compact 34px) */
.whist-opp-score {
    padding: 0;
    background:
        radial-gradient(circle at 30% 30%, #a7f3d0 0%, #4ade80 35%, #15803d 100%);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: #052e13;
    font-weight: 900;
    font-size: 13px;
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 16px rgba(74, 222, 128, 0.6),
        0 3px 8px rgba(0, 0, 0, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Cinzel', 'Oswald', serif;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
}

.whist-opp-score::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1.5px dotted rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

/* Face-down cards (LIPITE de panel — sub avatar) */
.whist-opp-back-hand {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    display: flex;
    gap: 0;
    height: 22px;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.whist-card-back {
    width: 18px;
    height: 26px;
    background:
        repeating-linear-gradient(45deg, #4a2c14 0, #4a2c14 2px, #6b3d1d 2px, #6b3d1d 4px),
        radial-gradient(circle at 50% 50%, #8b5a2b 0%, #3a2010 100%);
    background-blend-mode: multiply;
    border: 1px solid #2a1810;
    border-radius: 3px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.3);
    margin-left: -9px;
    transform: none;          /* DREPTE — rând curat de spate-uri, fără înclinare strâmbă */
    flex-shrink: 0;
    position: relative;
}

.whist-card-back::after {
    content: '\2663';  /* ♣ */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
    font-size: 8px;
    pointer-events: none;
}

.whist-card-back:first-child {
    margin-left: 0;
}

/* ═══════════════════════════════════════════════
   TALON / DECK — pachet vizibil la împărțire + ATU
   ═══════════════════════════════════════════════ */
.whist-deck {
    position: absolute;
    /* Colțul JOS-dreapta al feltului (cerere user): sus se suprapunea cu scaunele nord/nw,
       mai ales pe mobil. Jos-dreapta e liber: south e centru-jos, east e mijloc-dreapta,
       iar butonul immersive (⛶) e pe stânga-jos → jos-dreapta evită orice suprapunere. */
    top: auto;
    bottom: 16px;
    right: 18px;
    left: auto;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.whist-deck.visible {
    opacity: 1;
    transform: scale(1);
}
.whist-deck-stack {
    position: relative;
    width: 44px;
    height: 62px;
    flex-shrink: 0;
}
.whist-deck-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 62px;
    border-radius: 6px;
    background:
        repeating-linear-gradient(45deg, #4a2c14 0, #4a2c14 3px, #6b3d1d 3px, #6b3d1d 6px),
        radial-gradient(circle at 50% 40%, #8b5a2b 0%, #3a2010 100%);
    background-blend-mode: multiply;
    border: 1px solid #2a1810;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.3);
}
.whist-deck-card::after {
    content: '\2663';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.45);
    font-size: 16px;
}
/* Teanc DREPT — doar offset 3D, fără rotație strâmbă (pachet profesional, aliniat) */
.whist-deck-card:nth-child(1) { transform: translate(0, 0); }
.whist-deck-card:nth-child(2) { transform: translate(1.5px, 1.5px); }
.whist-deck-card:nth-child(3) { transform: translate(3px, 3px); }
.whist-deck-card:nth-child(4) { transform: translate(4.5px, 4.5px); }
.whist-deck-card:nth-child(5) { transform: translate(6px, 6px); }
/* ATU — cartea de bază, face-up, lângă talon */
.whist-deck-atu {
    width: 34px;
    height: 48px;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #eef1f5 100%);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.65);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 14px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    position: relative;
    flex-shrink: 0;
}
.whist-deck-atu:empty { display: none; }

/* Badge auriu cu nr cărți rămase în pachet (cerere user — „cartile in pachet nu sunt numerotate") */
.whist-deck-count {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 4;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--whist-gold, #ffd700) 0%, #b8860b 100%);
    color: #1a1a1a;
    font: 800 11px/1 'Cinzel', 'Bebas Neue', system-ui, sans-serif;
    letter-spacing: 0.3px;
    border: 1.5px solid rgba(0, 0, 0, 0.4);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    pointer-events: none;
}
.whist-deck-count:empty { display: none; }

/* ═══════════════════════════════════════════════════════════
   WhistReconnect — overlay de reconectare + buton refresh în dock
   ═══════════════════════════════════════════════════════════ */
.whist-reconnect-overlay {
    position: fixed; inset: 0;
    background: rgba(8, 6, 18, 0.78);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    z-index: 99000;
    display: none;
    align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.whist-reconnect-overlay.active { display: flex; opacity: 1; }

.whist-reconnect-card {
    background:
        linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.05) 0%, transparent 50%),
        linear-gradient(135deg, rgba(36, 21, 66, 0.96) 0%, rgba(20, 12, 38, 0.97) 100%);
    border: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.45);
    border-radius: 18px;
    padding: 28px 36px;
    min-width: 240px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.18),
        0 0 40px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.12);
    color: #fff7e0;
    font-family: 'Inter', 'Cinzel', system-ui, sans-serif;
}
@keyframes whist-reconnect-spin {
    to { transform: rotate(360deg); }
}
.whist-reconnect-spinner {
    width: 48px; height: 48px;
    border: 3.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.15);
    border-top-color: var(--whist-gold, var(--whist-gold, #ffd700));
    border-right-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.45);
    border-radius: 50%;
    animation: whist-reconnect-spin 0.9s linear infinite;
    box-shadow: 0 0 24px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.35);
}
.whist-reconnect-title {
    font: 800 16px/1.2 'Cinzel', serif;
    color: var(--whist-gold, var(--whist-gold, #ffd700));
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.whist-reconnect-sub {
    font-size: 12px;
    opacity: 0.78;
    letter-spacing: 0.3px;
}

/* Buton 🔄 refresh — anim subtil pe hover/click */
.whist-dock-btn.whist-dock-refresh {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
}
.whist-dock-btn.whist-dock-refresh:hover {
    transform: rotate(180deg);
    background: linear-gradient(135deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.25), rgba(var(--whist-gold-rgb, 255, 215, 0), 0.08));
}
.whist-dock-btn.whist-dock-refresh:active {
    transform: rotate(360deg) scale(0.92);
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (max-width: 700px) {
    .whist-reconnect-card { padding: 22px 28px; min-width: 200px; }
    .whist-reconnect-spinner { width: 40px; height: 40px; }
    .whist-reconnect-title { font-size: 14px; }
    .whist-reconnect-sub { font-size: 11px; }
}

/* Animație puls când scad cărțile din pachet (cerere user — „animație când scad cărțile") */
@keyframes whist-deck-count-tick {
    0%   { transform: scale(1);   filter: brightness(1); box-shadow: 0 2px 6px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.5); }
    35%  { transform: scale(1.4); filter: brightness(1.6); box-shadow: 0 4px 14px rgba(255,215,0,0.85), inset 0 1px 0 rgba(255,255,255,0.7), 0 0 18px rgba(255,215,0,0.9); }
    100% { transform: scale(1);   filter: brightness(1); box-shadow: 0 2px 6px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.5); }
}
.whist-deck-count.tick-down {
    animation: whist-deck-count-tick 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* La 0 cărți: badge fade-out elegant — scade + dispare */
@keyframes whist-deck-count-empty {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.3); opacity: 0.85; filter: brightness(1.4); }
    100% { transform: scale(0);   opacity: 0; }
}
.whist-deck-count.empty-out {
    animation: whist-deck-count-empty 0.45s ease-in forwards;
    pointer-events: none;
}

/* Puls verde-auriu „re-amestecat" — apare la începutul fiecărei runde când deck-ul
   se reumple (toate cărțile strânse + re-amestecate). Indică user-ului „cărți noi disponibile". */
@keyframes whist-deck-count-shuffle {
    0%   { transform: scale(0.6); opacity: 0.4; background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%); filter: brightness(1.2); }
    40%  { transform: scale(1.5); opacity: 1;   background: linear-gradient(135deg, var(--whist-gold, #ffd700) 0%, #4ade80 100%); filter: brightness(1.6); box-shadow: 0 0 24px rgba(74, 222, 128, 0.85), 0 0 12px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.7); }
    100% { transform: scale(1);   opacity: 1;   background: linear-gradient(135deg, var(--whist-gold, #ffd700) 0%, #b8860b 100%); filter: brightness(1); }
}
.whist-deck-count.shuffle-up {
    animation: whist-deck-count-shuffle 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 700px) {
    .whist-deck-count { min-width: 18px; height: 18px; font-size: 9.5px; padding: 0 4px; top: -6px; right: -6px; }
}
.whist-deck-atu::after {
    content: 'ATU';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7.5px;
    letter-spacing: 1.5px;
    color: var(--whist-gold, #ffd700);
    font-weight: 800;
    font-family: 'Cinzel', serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Carte-back care zboară din talon spre jucător la împărțire */
.whist-deal-fly {
    position: fixed;
    width: 42px;
    height: 60px;
    border-radius: 6px;
    background:
        repeating-linear-gradient(45deg, #4a2c14 0, #4a2c14 3px, #6b3d1d 3px, #6b3d1d 6px),
        radial-gradient(circle at 50% 40%, #8b5a2b 0%, #3a2010 100%);
    background-blend-mode: multiply;
    border: 1px solid #2a1810;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.3);
    z-index: 220;
    pointer-events: none;
    transform: translate(0, 0) scale(0.7) rotate(0deg);
    opacity: 0;
    animation: whist-deal-fly-anim 0.42s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}
/* Zbor elegant: cartea pleacă din talon, ține mărimea constant, apoi se TOPEȘTE
   în mâna jucătorului (fade-out la sosire) — fără rotații strâmbe, curat. */
@keyframes whist-deal-fly-anim {
    0%   { transform: translate(0, 0) scale(0.7) rotate(0deg); opacity: 0; }
    14%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.86) rotate(var(--dr, 0deg)); opacity: 0; }
}

/* Highlight pe jucătorul care PRIMEȘTE cartea (vezi cine ia cărțile) */
.whist-receiving {
    animation: whist-receive-pulse 0.42s ease;
}
/* DOAR glow auriu — fără scale/transform → scaunul NU se mai mișcă la împărțire */
@keyframes whist-receive-pulse {
    0%, 100% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
    50%      { box-shadow: 0 0 28px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.9), 0 8px 20px rgba(0, 0, 0, 0.5); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEAL ANIMATION — SIMPLĂ & ELEGANTĂ
   (cerere user: „animație simplă, fără bule, glow, ploaie — eleganță clasică")
   O singură carte (card back simplu) zboară în LINIE DREAPTĂ de la pachet la
   jucător. Ease-out smooth. Fade-out discret la sosire. FĂRĂ:
     - sparkle particles
     - glow trail
     - arc parabolic
     - impact ring
     - deck pulse
     - rotation/scale combos
   ═══════════════════════════════════════════════════════════════════════════ */

.whist-deal-fly-simple {
    position: fixed;
    width: 38px;
    height: 52px;
    pointer-events: none;
    z-index: 220;
    border-radius: 5px;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* card back simplu — gradient discret, fără sclipici */
    background: linear-gradient(135deg, #5a3a1f 0%, #3a2410 100%);
    border: 1px solid rgba(212, 175, 100, 0.45);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    animation: whist-deal-fly-simple 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes whist-deal-fly-simple {
    0%   { transform: translate(-50%, -50%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, 0))); opacity: 0; }
}

/* Legacy class-uri păstrate ca NO-OP pentru compat (dacă rămâne vreo referință în JS) */
.whist-deck.whist-deck-dealing,
.whist-deal-sparkle,
.whist-deal-fly-pro,
.whist-deal-fly-card,
.whist-deal-fly-glow,
.whist-deal-impact-ring,
.whist-receiving-pro {
    animation: none !important;
    display: none !important;
}

/* ═══════════════════════════════════════════════
   TRICK CENTER
   ═══════════════════════════════════════════════ */
.whist-trick {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44%;
    height: 44%;
    max-width: 380px;
    max-height: 240px;
    z-index: 2;
    pointer-events: none;
}

.whist-trick-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.22);
    text-align: center;
}

.whist-trick-placeholder-icon {
    font-size: 56px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.whist-trick-placeholder-text {
    font-family: 'Oswald', 'Bebas Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.whist-trick-slot {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* OLD trick-from-* + keyframes whist-fly-* REMOVED — folosim per-seat slots */

.whist-trick-player-tag {
    padding: 3px 11px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.82), rgba(var(--whist-deep-rgb, 12, 18, 32), 0.85));
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.45);
    border-radius: 12px;
    font-size: 10px;
    color: var(--whist-gold);
    font-weight: 800;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════
   SIDEBAR (right column)
   ═══════════════════════════════════════════════ */
.whist-sidebar {
    grid-area: sidebar;
    padding: 16px;
    background:
        linear-gradient(180deg, rgba(var(--whist-deep-rgb, 12, 18, 32), 0.95) 0%, rgba(28, 35, 51, 0.88) 100%);
    border-left: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.18);
    backdrop-filter: blur(20px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 5;
    box-shadow: inset 4px 0 12px rgba(0, 0, 0, 0.3);
}

.whist-sidebar::-webkit-scrollbar { width: 6px; }
.whist-sidebar::-webkit-scrollbar-track { background: transparent; }
.whist-sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--whist-gold), var(--whist-gold-deep));
    border-radius: 6px;
}

.whist-sb-section {
    background:
        linear-gradient(135deg, rgba(36, 45, 63, 0.7) 0%, rgba(28, 35, 51, 0.5) 100%);
    border: 1px solid rgba(91, 141, 239, 0.18);
    border-radius: 14px;
    padding: 14px;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
}

.whist-sb-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4), transparent);
}

/* Sidebar acum se întinde pe ambele rânduri (până jos). Secțiunea ISTORIC (ultima)
   crește să umple restul → fără spațiu gol aiurea. Scoreboard rămâne la conținut. */
.whist-sb-section:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.whist-sb-section:last-child .whist-sb-history {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.whist-sb-title {
    font-family: 'Oswald', 'Bebas Neue', sans-serif;
    font-size: 12px;
    color: var(--whist-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.22);
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 0 12px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
}

.whist-sb-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.whist-sb-row {
    display: grid;
    grid-template-columns: 1fr auto 48px;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 12.5px;
    transition: all 0.22s;
}

.whist-sb-row.current {
    background:
        linear-gradient(135deg, rgba(74, 222, 128, 0.18), rgba(34, 197, 94, 0.08));
    border-color: rgba(74, 222, 128, 0.45);
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.25);
}

.whist-sb-row.me {
    background:
        linear-gradient(135deg, rgba(91, 141, 239, 0.2), rgba(91, 141, 239, 0.08));
    border-color: rgba(91, 141, 239, 0.45);
}

.whist-sb-row.me.current {
    background:
        linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(91, 141, 239, 0.1));
    border-color: rgba(74, 222, 128, 0.5);
}

.whist-sb-name {
    color: var(--whist-text-strong, #fff);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
}

.whist-sb-bt {
    color: var(--whist-gold);
    font-weight: 800;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11.5px;
    padding: 2px 7px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}

.whist-sb-total {
    text-align: center;
    color: var(--whist-green);
    font-weight: 900;
    font-size: 16px;
    font-family: 'Oswald', 'Bebas Neue', sans-serif;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

.whist-sb-history-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.32);
    font-style: italic;
    padding: 14px;
    font-size: 12px;
}

.whist-sb-history-row {
    display: grid;
    grid-template-columns: 40px 36px 1fr;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 7px;
    margin-bottom: 5px;
    font-size: 11px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.whist-sb-history-r {
    color: var(--whist-gold);
    font-weight: 900;
    font-family: 'Oswald', sans-serif;
    text-align: center;
}

.whist-sb-history-cards { color: var(--whist-text-dim, #94a3b8); text-align: center; }

.whist-sb-history-scores {
    color: var(--whist-green);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════
   PLAYER AREA (south — me) — INCADRAT cu border auriu
   ═══════════════════════════════════════════════ */
/* Player area = info bar jos cu 3 zone: dock | mâna | my-info */
/* Bară de jos UNIFICATĂ: nu mai e grid full-width cu 3 insule rupte și goluri moarte.
   Acum e o bară CENTRATĂ care strânge conținutul (info + mână + dock una lângă alta) =
   totul "într-o bucată", compact și profesional. Felt-ul se vede în stânga/dreapta barei. */
.whist-player-area {
    grid-area: bottom;
    margin: 6px 10px 7px 8px;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background:
        linear-gradient(180deg, rgba(20, 28, 48, 0.98) 0%, rgba(var(--whist-deep-rgb, 12, 18, 32), 0.95) 100%);
    border: 2px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.32);
    border-radius: 14px;
    backdrop-filter: blur(20px);
    z-index: 5;
    overflow: visible;
    box-shadow:
        0 -8px 24px rgba(0, 0, 0, 0.5),
        0 8px 28px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════
   PLAYER KEYSTONE (2026-06-09d) — scaunul de jos (sud) redesenat ca o „cheie":
   avatarul = capul cheii (medalion), iar din el „iese" lama gold-framed cu 3 crestături:
   LIC (licitare) · MÂINI (făcute) · PUNCTE (scorul = giuvaerul auriu). Totul = un obiect
   cohesiv, încadrat perfect. Folosește #whistMyInfo (ID) ca să SUPERSEDE curat vechile
   reguli .whist-my-* de pe toate breakpoint-urile (avatar/scorewrap/meta/pill-uri vechi).
   Verificat live în harness: portrait (390/360/320) + landscape (844/812). ═══════════ */
#whistMyInfo.whist-my-info {
    display: flex !important; align-items: center !important; gap: 0 !important;
    background: none !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; overflow: visible !important; min-height: 0 !important;
}
/* capul cheii — MEDALIONUL: bezel auriu lustruit (dublu inel) + adâncime */
#whistMyInfo .whist-my-avatar {
    width: 60px !important; height: 60px !important; min-width: 60px !important;
    position: relative; z-index: 3; flex: 0 0 auto; margin: 0 !important;
    border-radius: 50%;
    box-shadow:
        0 0 0 2.5px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.95),
        0 0 0 5px rgba(92, 66, 16, 0.95),
        0 0 16px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.30),
        0 7px 18px rgba(0, 0, 0, 0.62) !important;
}
/* inelul de timer apare DOAR la tura activă (idle = medalion curat, fără verde înșelător) */
#whistMyInfo .whist-timer-ring .ring-fg { opacity: 0; transition: opacity 0.2s ease; }
#whistMyInfo.current-turn .whist-timer-ring .ring-fg { opacity: 1; }
/* lama cheii — plăcuța se MULEAZĂ pe conținut (flex:0 1 auto → FĂRĂ spațiu gol pe dreapta),
   colțul stânga rotunjit (28px) ÎMBRĂȚIȘEAZĂ avatarul + suprapunere adâncă (margin -30 / pad-left 37)
   → conținutul pare că IESE din avatar, ca o cheie reală. */
#whistMyInfo .whist-my-crest {
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    margin-left: -32px; padding: 6px 16px 6px 41px; box-sizing: border-box;
    background:
        linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.07), transparent 42%),
        linear-gradient(135deg, rgba(var(--whist-panel-rgb, 28, 35, 53), 0.98), rgba(var(--whist-deep-rgb, 12, 18, 32), 0.99));
    border: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.42); border-radius: 32px 16px 16px 32px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
    position: relative; z-index: 1; flex: 0 1 auto; min-width: 0;
}
#whistMyInfo .whist-my-crest::after {
    content: ''; position: absolute; top: 0; left: 43px; right: 15px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.75), transparent); pointer-events: none;
}
#whistMyInfo .whist-my-name {
    font-family: 'Cinzel', 'Oswald', serif; font-size: 12.5px !important; font-weight: 700;
    letter-spacing: 1.4px; line-height: 1 !important; text-transform: uppercase;
    padding-left: 2px; margin: 0 !important;
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    /* aur metalic (gradient pe text) + adâncime */
    background: linear-gradient(180deg, var(--whist-gold-light, #ffeaa8) 0%, var(--whist-gold, #ffd700) 48%, var(--whist-gold-deep, var(--whist-gold-deep, #d97706)) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    color: var(--whist-gold) !important; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.6));
}
#whistMyInfo .whist-my-stats {
    display: flex !important; align-items: stretch !important; gap: 5px !important; margin: 0 !important; flex-wrap: nowrap !important;
}
/* crestăturile = GIUVAIERE individuale (chip-uri lustruite) */
#whistMyInfo .whist-keyseg {
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center;
    padding: 3px 9px !important; gap: 1px !important; position: relative; min-width: 0;
    min-height: 0 !important; width: auto !important; height: auto !important; flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.045) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 9px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
#whistMyInfo .whist-keyseg + .whist-keyseg::before { display: none !important; }
/* CRITIC: valoarea crestăturii e RESETATĂ complet din vechiul badge .whist-my-score
   (avea width/height/bg/border de badge circular → înălțime-fantomă de 48px care umfla
   plăcuța = cauza spațiului gol). Acum e DOAR text → plăcuța se mulează pe conținut. */
#whistMyInfo .whist-keyseg .kseg-val {
    font-family: 'Oswald', 'Bebas Neue', sans-serif; font-size: 17px !important; font-weight: 800 !important;
    color: var(--whist-text-strong, #fff) !important; line-height: 1 !important;
    width: auto !important; height: auto !important; min-width: 0 !important;
    background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
    display: inline-block !important; padding: 0 !important; margin: 0 !important;
}
#whistMyInfo .whist-keyseg .kseg-lbl {
    font-size: 7px !important; font-weight: 700; letter-spacing: 0.4px; color: var(--whist-text-dim);
    text-transform: uppercase; line-height: 1 !important; font-style: normal; margin-top: 2px !important;
}
/* PUNCTE = GIUVAERUL-EROU al cheii — accent auriu + reflex (sheen) animat care „strălucește" */
#whistMyInfo .whist-keyseg-score {
    background: linear-gradient(135deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.30), rgba(var(--whist-gold-deep-rgb, 217, 119, 6), 0.16)) !important;
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55) !important; border-radius: 10px !important; padding: 3px 11px !important; margin-left: 1px !important;
    box-shadow: inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.45), 0 0 13px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.18) !important;
    overflow: hidden !important;
}
#whistMyInfo .whist-keyseg-score::before { display: none !important; }
#whistMyInfo .whist-keyseg-score::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg); animation: whist-gem-sheen 4.5s ease-in-out infinite; pointer-events: none;
}
@keyframes whist-gem-sheen { 0%, 72% { left: -60%; } 86% { left: 130%; } 100% { left: 130%; } }
#whistMyInfo .whist-keyseg-score .kseg-val {
    color: var(--whist-gold) !important; font-size: 19px !important; text-shadow: 0 1px 7px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55);
}
#whistMyInfo .whist-keyseg-score .kseg-lbl { color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.85); }
#whistMyInfo.current-turn .whist-my-crest {
    border-color: rgba(74, 222, 128, 0.7); animation: whist-my-turn-aura 1.8s ease-in-out infinite;
}
@keyframes whist-my-turn-aura {
    0%, 100% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.30), 0 0 14px rgba(74, 222, 128, 0.32); }
    50% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.30), 0 0 28px rgba(74, 222, 128, 0.60); }
}
#whistMyInfo.current-turn .whist-my-avatar {
    box-shadow:
        0 0 0 2.5px rgba(124, 242, 164, 0.95),
        0 0 0 5px rgba(22, 82, 42, 0.90),
        0 0 18px rgba(74, 222, 128, 0.50),
        0 7px 18px rgba(0, 0, 0, 0.62) !important;
}
#whistMyInfo.premiere-likely .whist-my-bid .kseg-val,
#whistMyInfo.premiere-likely .whist-my-tricks .kseg-val { color: var(--whist-gold) !important; text-shadow: 0 1px 6px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.5); }
@media (max-width: 360px) and (orientation: portrait) {
    #whistMyInfo .whist-my-avatar { width: 52px !important; height: 52px !important; min-width: 52px !important; }
    #whistMyInfo .whist-my-crest { padding: 4px 10px 4px 34px; margin-left: -28px; border-radius: 27px 14px 14px 27px; }
    #whistMyInfo .whist-my-name { font-size: 10.5px !important; letter-spacing: 0.9px; }
    #whistMyInfo .whist-keyseg { padding: 2px 6px !important; }
    #whistMyInfo .whist-keyseg .kseg-val { font-size: 15px !important; }
    #whistMyInfo .whist-keyseg-score .kseg-val { font-size: 16px !important; }
    #whistMyInfo .whist-keyseg .kseg-lbl { font-size: 6.5px !important; }
}
/* TELEFOANE (361-600px): crest compact ca cele 3 giuvaiere să încapă (fără tăiere „PUNCTE") */
@media (min-width: 361px) and (max-width: 600px) {
    #whistMyInfo .whist-my-avatar { width: 54px !important; height: 54px !important; min-width: 54px !important; }
    #whistMyInfo .whist-my-crest { padding: 5px 11px 5px 36px !important; margin-left: -29px !important; gap: 2px; border-radius: 28px 15px 15px 28px; }
    #whistMyInfo .whist-my-name { font-size: 11px !important; letter-spacing: 1px; }
    #whistMyInfo .whist-my-stats { gap: 4px !important; }
    #whistMyInfo .whist-keyseg { padding: 2px 6px !important; }
    #whistMyInfo .whist-keyseg .kseg-val { font-size: 15px !important; }
    #whistMyInfo .whist-keyseg .kseg-lbl { font-size: 6.5px !important; }
    #whistMyInfo .whist-keyseg-score { padding: 2px 7px !important; margin-left: 0 !important; }
    #whistMyInfo .whist-keyseg-score .kseg-val { font-size: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOVER PLAYER INFO (2026-06-09e) — cartonaș detaliat pe hover peste scaunul unui adversar.
   Arată: avatar + nume, badges (👑 admin / 🤖 bot / dealer / la rând / ⚠ deconectat),
   stats (Nivel / Câștig% / Jocuri / Puncte — din server `state.playerMeta[seat]`) și runda
   curentă (licitare/mâini/cărți/scor). Feltul are overflow:hidden → poziționăm spre CENTRU. */
.whist-opp-tooltip {
    position: absolute; top: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(-6px) scale(0.96); transform-origin: top center;
    width: 190px; max-width: 190px;
    background: linear-gradient(160deg, rgba(var(--whist-panel-rgb, 28, 35, 53), 0.98), rgba(var(--whist-deep-rgb, 12, 18, 32), 0.99));
    border: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.42); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.2);
    padding: 10px 11px; z-index: 90; color: var(--whist-text, #f1f5f9);
    opacity: 0; pointer-events: none;
    transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.whist-opponent:hover .whist-opp-tooltip,
.whist-opponent:focus-within .whist-opp-tooltip {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}
.whist-opp-tooltip::before {
    content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: rgba(var(--whist-panel-rgb, 28, 35, 53), 0.99);
    border-left: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.42); border-top: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.42);
}
/* est/vest = scaune la MIJLOC-înălțime → cartonașul se deschide LATERAL spre centru, CENTRAT
   pe verticală (NU în jos). FIX BUG (cerere user: „userii stânga/dreapta sunt tăiați"): înainte
   se deschidea în jos din mijloc (top:calc(100%+10px)) și depășea marginea de jos a feltului
   (overflow:hidden) cu ~119px. Acum, centrat vertical (top:50% + translateY(-50%)), rămâne mereu
   în felt; săgeata indică spre scaun. */
.whist-opp-east .whist-opp-tooltip {
    top: 50%; bottom: auto; left: auto; right: calc(100% + 14px);
    transform: translateY(-50%) translateX(8px) scale(0.96); transform-origin: center right;
}
.whist-opp-east:hover .whist-opp-tooltip, .whist-opp-east:focus-within .whist-opp-tooltip {
    transform: translateY(-50%) translateX(0) scale(1);
}
.whist-opp-east .whist-opp-tooltip::before {
    top: 50%; bottom: auto; left: auto; right: -7px;
    transform: translateY(-50%) rotate(45deg);
    border-left: none; border-bottom: none;
    border-top: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.42); border-right: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.42);
}
.whist-opp-west .whist-opp-tooltip {
    top: 50%; bottom: auto; right: auto; left: calc(100% + 14px);
    transform: translateY(-50%) translateX(-8px) scale(0.96); transform-origin: center left;
}
.whist-opp-west:hover .whist-opp-tooltip, .whist-opp-west:focus-within .whist-opp-tooltip {
    transform: translateY(-50%) translateX(0) scale(1);
}
.whist-opp-west .whist-opp-tooltip::before {
    top: 50%; bottom: auto; right: auto; left: -7px;
    transform: translateY(-50%) rotate(45deg);
    border-top: none; border-right: none;
    border-left: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.42); border-bottom: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.42);
}
/* ne/nw — ușor spre centru ca să nu se taie pe lateral */
.whist-opp-ne .whist-opp-tooltip { left: auto; right: -2px; transform: translateX(0) translateY(-6px) scale(0.96); transform-origin: top right; }
.whist-opp-ne:hover .whist-opp-tooltip, .whist-opp-ne:focus-within .whist-opp-tooltip { transform: translateX(0) translateY(0) scale(1); }
.whist-opp-ne .whist-opp-tooltip::before { left: auto; right: 26px; }
.whist-opp-nw .whist-opp-tooltip { left: -2px; right: auto; transform: translateX(0) translateY(-6px) scale(0.96); transform-origin: top left; }
.whist-opp-nw:hover .whist-opp-tooltip, .whist-opp-nw:focus-within .whist-opp-tooltip { transform: translateX(0) translateY(0) scale(1); }
.whist-opp-nw .whist-opp-tooltip::before { left: 26px; }

.woi-head { display: flex; align-items: center; gap: 9px; padding-bottom: 8px; border-bottom: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.15); margin-bottom: 8px; }
.woi-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--whist-gold); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.woi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.woi-avatar .avatar-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(180deg, var(--whist-blue), var(--whist-blue-deep)); color: var(--whist-text-strong, #fff); font-weight: 800; font-size: 17px; }
.woi-id { min-width: 0; flex: 1; }
.woi-name { font-family: 'Cinzel', 'Oswald', serif; font-weight: 700; font-size: 13px; color: var(--whist-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.3px; }
.woi-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.woi-badge { font-size: 7.5px; font-weight: 800; letter-spacing: 0.3px; padding: 2px 5px; border-radius: 5px; line-height: 1.25; }
.woi-b-admin { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.5); }
.woi-b-bot { background: rgba(91, 141, 239, 0.2); color: #93c5fd; border: 1px solid rgba(91, 141, 239, 0.5); }
.woi-b-dealer { background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.18); color: var(--whist-gold); border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.45); }
.woi-b-turn { background: rgba(74, 222, 128, 0.2); color: #86efac; border: 1px solid rgba(74, 222, 128, 0.5); }
.woi-b-off { background: rgba(148, 163, 184, 0.2); color: var(--whist-text-mid, #cbd5e1); border: 1px solid rgba(148, 163, 184, 0.5); }
.woi-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.woi-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.12); border-radius: 8px; }
.woi-stat .woi-v { font-family: 'Oswald', sans-serif; font-weight: 800; font-size: 14px; color: var(--whist-text-strong, #fff); line-height: 1; }
.woi-stat .woi-k { font-size: 7.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--whist-text-dim); }
.woi-round { display: flex; justify-content: space-between; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.15); }
.woi-round span { font-size: 8px; color: var(--whist-text-dim); text-align: center; line-height: 1.35; }
.woi-round b { display: block; font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 800; color: var(--whist-gold); }
.woi-status { margin-top: 7px; font-size: 8.5px; text-align: center; color: var(--whist-text-mid, #cbd5e1); font-style: italic; }
/* Conexiune / fair-play — bară care „scade de la 100%" cu deconectările */
.woi-conn { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.15); }
.woi-conn-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.woi-conn-lbl { font-size: 8px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--whist-text-dim); }
.woi-conn-val { font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 800; }
.woi-conn-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.woi-conn-bar i { display: block; height: 100%; border-radius: 3px; transition: width 0.35s ease; }
.woi-conn-dc { display: block; font-size: 7.5px; color: var(--whist-text-dim); margin-top: 3px; text-align: right; }
.woi-conn.conn-good .woi-conn-val { color: #4ade80; } .woi-conn.conn-good .woi-conn-bar i { background: linear-gradient(90deg, #22c55e, #4ade80); }
.woi-conn.conn-mid .woi-conn-val { color: var(--whist-gold, #ffd700); } .woi-conn.conn-mid .woi-conn-bar i { background: linear-gradient(90deg, var(--whist-gold-deep, #d97706), var(--whist-gold, #ffd700)); }
.woi-conn.conn-bad .woi-conn-val { color: #f87171; } .woi-conn.conn-bad .woi-conn-bar i { background: linear-gradient(90deg, #dc2626, #f87171); }

/* ── Cartonaș pe SCAUNUL MEU (sud) — se deschide în SUS (scaunul e la baza ecranului) ── */
.whist-my-tooltip {
    top: auto; bottom: calc(100% + 12px); left: 0; right: auto;
    transform: translateX(0) translateY(6px) scale(0.96); transform-origin: bottom left;
}
.whist-my-info:hover .whist-my-tooltip,
.whist-my-info:focus-within .whist-my-tooltip {
    opacity: 1; pointer-events: auto; transform: translateX(0) translateY(0) scale(1);
}
.whist-my-tooltip::before {
    top: auto; bottom: -7px; left: 34px; right: auto;
    border-left: none; border-top: none;
    border-right: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.42); border-bottom: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.42);
}
/* tap-focus (mobil): scaunele focusabile → cartonașul apare prin :focus-within. Fără outline urât. */
.whist-opponent, .whist-my-info { outline: none; }
.whist-opponent:focus-visible .whist-opp-card,
.whist-my-info:focus-visible .whist-my-crest { box-shadow: 0 0 0 2px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.6), 0 8px 22px rgba(0, 0, 0, 0.6); }
/* RESPONSIVE: pe ecrane mici cartonașul mai îngust ca să nu iasă din ecran */
@media (max-width: 600px) {
    .whist-opp-tooltip { width: min(188px, 72vw); max-width: 72vw; padding: 8px 9px; }
    .woi-avatar { width: 34px; height: 34px; }
    .woi-name { font-size: 12px; }
    .woi-stat { padding: 4px 3px; }
    .woi-stat .woi-v { font-size: 13px; }
    .woi-round b { font-size: 12px; }
}

/* ═══════════════════════════════════════════════
   BID PANEL — Casino chip aesthetic
   ═══════════════════════════════════════════════ */
/* Bid panel — COMPACT, încadrat frumos în centru felt */
.whist-bid-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    /* CASINO PREMIUM REFINAT — panoul adoptă AUTOMAT culoarea feltului (cerere user).
       Background folosește var(--whist-panel-felt-1/2/3) care e actualizat LIVE din JS
       (WhistThemeSync — citește culorile reale din .whist-table-area și le aplică aici).
       Funcționează cu ambele sisteme tematice Whist:
         - body[data-whist-theme="green/blue/red/purple"] (selector butonul Schimbă tema masă)
         - html[data-theme="default/midnight/ruby/.../light"] (16 teme globale)
       color-mix() face panoul 15% mai întunecat decât feltul → contrast subtle. */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 30%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--whist-panel-felt-1, #1e6a3a) 85%, #000 15%) 0%,
            color-mix(in srgb, var(--whist-panel-felt-2, #14502b) 88%, #000 12%) 50%,
            color-mix(in srgb, var(--whist-panel-felt-3, #0a2d1a) 90%, #000 10%) 100%
        );
    /* Ramă aurie FINĂ — gradient gold→bronze (catching light) */
    border: 1.5px solid transparent;
    border-image: linear-gradient(180deg, var(--whist-gold, #ffd700) 0%, #b8860b 50%, #8b6914 100%) 1;
    border-radius: 10px;
    /* Multi-layer shadows — placă elegantă pe felt */
    box-shadow:
        inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55),
        inset 0 2px 2px rgba(255, 255, 255, 0.10),
        inset 0 -1px 2px rgba(0, 0, 0, 0.45),
        0 6px 16px rgba(0, 0, 0, 0.45),
        0 12px 32px rgba(0, 0, 0, 0.35),
        0 20px 48px rgba(0, 0, 0, 0.50),
        0 0 16px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.10);
    backdrop-filter: blur(2px) saturate(120%);
    -webkit-backdrop-filter: blur(2px) saturate(120%);
    max-width: 380px;
}

/* Pseudo-elementul ::before nu mai e nevoie — design clean fără halo agresiv */
.whist-bid-area::before { content: none; }

/* ═══ LICITARE — emergență subtilă (slide+fade), fără glow concurent care distrage ═══
   Designer pro: o singură animație elegantă de intrare, apoi STATIC. */
.whist-bid-area.whist-bid-emerge {
    animation: whist-bid-emerge 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes whist-bid-emerge {
    0%   { transform: translate(-50%, -50%) translateY(34px) rotateX(80deg) scale(0.7);  opacity: 0; filter: brightness(0.5); }
    55%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) translateY(0)    rotateX(0deg)  scale(1);    opacity: 1; filter: brightness(1); }
}
/* Spotlight static (era pulse infinit 2.6s — animație concurentă inutilă cu emerge) */
.whist-bid-area::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -34px;
    width: 280px;
    height: 70px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.22) 0%, rgba(255, 180, 0, 0.08) 40%, transparent 72%);
    filter: blur(10px);
    z-index: -2;
    pointer-events: none;
    opacity: 0.55;
}

/* ═══════════════════════════════════════════════════════════
   DEZVOLTARE MASĂ — efecte pro pentru tot jocul Whist
   ═══════════════════════════════════════════════════════════ */

/* (A) Spotlight pe felt sub jucătorul ACTIV — se mută cu tura */
.whist-felt-spotlight {
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.20) 0%, rgba(74, 222, 128, 0.07) 42%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    filter: blur(5px);
    transition: left 0.5s cubic-bezier(0.34, 1.2, 0.4, 1), top 0.5s cubic-bezier(0.34, 1.2, 0.4, 1), opacity 0.4s;
}
/* Spotlight static (era pulse infinit 2.3s — încă o animație concurentă pe felt) */
.whist-felt-spotlight.visible { opacity: 1; }

/* (B) ATU flip reveal — cartea de bază se întoarce când apare */
.whist-deck-atu.whist-atu-flip { animation: whist-atu-flip 0.62s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes whist-atu-flip {
    0%   { transform: rotateY(92deg) scale(0.8); opacity: 0; }
    50%  { transform: rotateY(-14deg) scale(1.12); opacity: 1; }
    100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

/* (C) Câștigătorul mâinii pulsează auriu când ia mâna */
.whist-trick-won { animation: whist-trick-won 0.95s ease !important; }
@keyframes whist-trick-won {
    0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6); }
    28%      { box-shadow: 0 0 40px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.95), 0 0 14px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.7), 0 8px 22px rgba(0, 0, 0, 0.6); }
}

/* (F) Banner de rundă — anunț elegant la împărțire */
.whist-round-banner {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 70;
    pointer-events: none;
    padding: 11px 30px;
    background: linear-gradient(135deg, rgba(45, 25, 8, 0.97), rgba(26, 15, 4, 0.97));
    border: 2px solid var(--whist-gold);
    border-radius: 16px;
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 17px;
    color: #ffe9a8;
    letter-spacing: 1.5px;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 44px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    opacity: 0;
}
.whist-round-banner.show { animation: whist-round-banner 2.1s ease forwards; }
@keyframes whist-round-banner {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.65) translateY(24px); }
    16%  { opacity: 1; transform: translate(-50%, -50%) scale(1.04) translateY(0); }
    26%  { transform: translate(-50%, -50%) scale(1) translateY(0); }
    80%  { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95) translateY(-18px); }
}
.whist-round-banner-sub {
    display: block;
    font-size: 11px;
    color: var(--whist-text-mid, #cbd5e1);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: 0.8px;
}

/* (E) Butoanele de bid intră în CASCADĂ (una după alta) la emergența panoului */
.whist-bid-area.whist-bid-emerge .whist-bid-btns .whist-bid-btn {
    animation: whist-bid-btn-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes whist-bid-btn-in {
    0%   { opacity: 0; transform: translateY(16px) scale(0.5); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.whist-bid-area.whist-bid-emerge .whist-bid-btns .whist-bid-btn:nth-child(1) { animation-delay: 0.5s; }
.whist-bid-area.whist-bid-emerge .whist-bid-btns .whist-bid-btn:nth-child(2) { animation-delay: 0.57s; }
.whist-bid-area.whist-bid-emerge .whist-bid-btns .whist-bid-btn:nth-child(3) { animation-delay: 0.64s; }
.whist-bid-area.whist-bid-emerge .whist-bid-btns .whist-bid-btn:nth-child(4) { animation-delay: 0.71s; }
.whist-bid-area.whist-bid-emerge .whist-bid-btns .whist-bid-btn:nth-child(5) { animation-delay: 0.78s; }
.whist-bid-area.whist-bid-emerge .whist-bid-btns .whist-bid-btn:nth-child(6) { animation-delay: 0.85s; }
.whist-bid-area.whist-bid-emerge .whist-bid-btns .whist-bid-btn:nth-child(7) { animation-delay: 0.92s; }
.whist-bid-area.whist-bid-emerge .whist-bid-btns .whist-bid-btn:nth-child(8) { animation-delay: 0.99s; }
.whist-bid-area.whist-bid-emerge .whist-bid-btns .whist-bid-btn:nth-child(9) { animation-delay: 1.06s; }

/* (PREMIERE) Sărbătoare când îți NIMEREȘTI licitarea exactă — flash pe scaun + popup BRAVO */
.whist-premiere { animation: whist-premiere-flash 1.5s ease !important; }
@keyframes whist-premiere-flash {
    0%, 100% { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 24px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.16); transform: scale(1); }
    20%      { box-shadow: 0 0 52px rgba(var(--whist-gold-rgb, 255, 215, 0), 1), 0 0 22px rgba(74, 222, 128, 0.85), 0 10px 24px rgba(0, 0, 0, 0.55); transform: scale(1.05); }
    50%      { box-shadow: 0 0 40px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.8), 0 10px 24px rgba(0, 0, 0, 0.55); transform: scale(1); }
}
/* Premiere popup SUBTIL — pill mic, scurt (era enorm cu shadow uriaș + font 19/25px) */
.whist-premiere-popup {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 80;
    pointer-events: none;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(34, 80, 40, 0.92), rgba(18, 48, 22, 0.92));
    border: 1px solid rgba(74, 222, 128, 0.6);
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #d9ffe4;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 18px rgba(74, 222, 128, 0.25);
    animation: whist-premiere-popup 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.whist-premiere-popup span { font-size: 10px; color: #a7f3d0; font-weight: 500; margin-left: 6px; opacity: 0.85; }
@keyframes whist-premiere-popup {
    0%   { opacity: 0; transform: translate(-50%, -50%) translateY(8px); }
    18%  { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
    80%  { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateY(-10px); }
}

/* ───────────────────────────────────────────────────────────────────
 * STREAK BADGE — 5× corecte / 5× greșite consecutive (regulă oficială Whist)
 * Floating badge cu +10 / -10 ce apare deasupra scaunului jucătorului.
 * ─────────────────────────────────────────────────────────────────── */
.whist-streak-badge {
    position: fixed;
    transform: translate(-50%, -50%) scale(0.3);
    z-index: 9000;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 32px;
    font-weight: 900;
    padding: 14px 26px;
    border-radius: 16px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    animation: whist-streak-pop 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.7),
        0 0 60px currentColor,
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.8),
        0 0 16px currentColor;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    line-height: 1;
}
.whist-streak-badge.streak-bonus {
    color: var(--whist-gold, #ffd700);
    background: linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.22), rgba(255, 165, 0, 0.18));
    border: 2px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.85);
}
.whist-streak-badge.streak-penalty {
    color: #ff5555;
    background: linear-gradient(180deg, rgba(255, 85, 85, 0.22), rgba(180, 0, 0, 0.18));
    border: 2px solid rgba(255, 85, 85, 0.85);
}
.whist-streak-badge .whist-streak-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.92;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
@keyframes whist-streak-pop {
    0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.3) rotate(-8deg); }
    18%  { opacity: 1; transform: translate(-50%, -55%) scale(1.25) rotate(2deg); }
    32%  { transform: translate(-50%, -55%) scale(1.0) rotate(0deg); }
    65%  { opacity: 1; transform: translate(-50%, -65%) scale(1.05); }
    100% { opacity: 0; transform: translate(-50%, -120%) scale(0.85); }
}

/* Numărătoare scor — puls auriu la schimbarea valorii (se aplică pe badge-urile de scor) */
.whist-score-bump { animation: whist-score-bump 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes whist-score-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.32); filter: brightness(1.45) drop-shadow(0 0 12px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.85)); }
    100% { transform: scale(1); filter: none; }
}

/* (1) Bid jeton — „se lipește" pe avatar la licitare (pop-in) */
.whist-chip-pop { animation: whist-chip-pop 0.5s cubic-bezier(0.34, 1.7, 0.5, 1); }
/* Chip pop SUBTIL (era scale 0→1.35→1 + rotate -100deg→10deg → "scaunul se mișca" la licitare) */
@keyframes whist-chip-pop {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* (2) Cartea CÂȘTIGĂTOARE a mâinii — glow auriu (fără animation, ca să nu strice strângerea) */
.whist-card.whist-winning-card {
    box-shadow:
        0 0 30px rgba(var(--whist-gold-rgb, 255, 215, 0), 1),
        0 0 12px rgba(255, 235, 150, 0.9),
        0 6px 14px rgba(0, 0, 0, 0.55) !important;
    filter: drop-shadow(0 0 8px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.9)) brightness(1.08);
}

/* (3) ULTIMA carte jucată (cerere user — „nu se vede ultimul jucător") — fade-in scurt
 * + ring discret alb-translucent ca să fie EVIDENT care e ultima carte pusă. */
.whist-card.whist-last-played {
    animation: whist-last-played-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes whist-last-played-in {
    0%   { opacity: 0;   transform: scale(0.85); }
    60%  { opacity: 1;   transform: scale(1.06); box-shadow: 0 0 18px rgba(255, 255, 255, 0.5); }
    100% { opacity: 1;   transform: scale(1); }
}

/* (3) Shuffle pachet la joc nou — talonul se „amestecă" scurt */
.whist-deck.whist-deck-shuffling .whist-deck-stack {
    animation: whist-deck-shuffle 0.85s ease-in-out;
}
@keyframes whist-deck-shuffle {
    0%   { transform: rotate(0) scale(1); }
    20%  { transform: rotate(-7deg) scale(1.06) translateX(-5px); }
    40%  { transform: rotate(6deg) scale(1.06) translateX(5px); }
    60%  { transform: rotate(-4deg) scale(1.03) translateX(-3px); }
    80%  { transform: rotate(3deg) scale(1.02); }
    100% { transform: rotate(0) scale(1); }
}

/* (4) Emoji reactions — picker + emoji plutitor */
.whist-emoji-picker {
    position: fixed;
    transform: translate(-50%, -100%);
    z-index: 5000;
    display: flex;
    gap: 3px;
    padding: 7px 9px;
    background: rgba(18, 22, 31, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.3);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    animation: whist-emoji-picker-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes whist-emoji-picker-in {
    0%   { opacity: 0; transform: translate(-50%, -88%) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
.whist-emoji-opt {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 4px;
    border-radius: 8px;
    transition: transform 0.15s, background 0.15s;
}
.whist-emoji-opt:hover { transform: scale(1.4); background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.15); }
.whist-reaction-float {
    position: fixed;
    transform: translate(-50%, -50%);
    z-index: 9999;
    font-size: 56px;
    pointer-events: none;
    /* Cerc de fundal cu border auriu + glow ca emoji-ul să iasă clar peste felt/cărți */
    background: radial-gradient(circle, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
    border-radius: 50%;
    padding: 12px 16px;
    filter:
        drop-shadow(0 0 12px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55))
        drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7));
    /* Animatie 3 secunde — mai lent, mai vizibil. Peak visibility 20%-50% = 0.6s-1.5s */
    animation: whist-reaction-float 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes whist-reaction-float {
    0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.5) rotate(-12deg); }
    15%  { opacity: 1; transform: translate(-50%, -70%) scale(1.5) rotate(8deg); }
    25%  { transform: translate(-50%, -90%) scale(1.25) rotate(-4deg); }
    50%  { opacity: 1; transform: translate(-50%, -130%) scale(1.1) rotate(0deg); }
    80%  { opacity: 0.8; transform: translate(-50%, -180%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -230%) scale(0.85) rotate(-3deg); }
}

.whist-bid-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.whist-bid-icon {
    font-size: 13px;
    filter: drop-shadow(0 0 10px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.7));
}

.whist-bid-title {
    font-size: 10.5px;
    color: var(--whist-gold);
    font-weight: 800;
    letter-spacing: 0.3px;
    font-family: 'Cinzel', 'Oswald', serif;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
}

.whist-bid-note {
    padding: 3px 8px;
    background:
        linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(127, 29, 29, 0.12));
    border: 1.5px solid rgba(248, 113, 113, 0.5);
    border-radius: 6px;
    color: #fca5a5;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

.whist-bid-note b {
    color: var(--whist-text-strong, #fff);
    background: var(--whist-red);
    padding: 0 3px;
    border-radius: 4px;
    margin: 0 2px;
    font-weight: 900;
    font-size: 9px;
}

/* Progres licitare — rămâne vizibil până termină toți de licitat */
.whist-bid-progress {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 2px 0 4px;
}
.whist-bid-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 600;
    color: var(--whist-text-mid, #cbd5e1);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.whist-bid-chip b { color: var(--whist-text-dim, #94a3b8); font-weight: 800; }
.whist-bid-chip.done {
    color: #e8eefc;
    background: rgba(74, 222, 128, 0.16);
    border-color: rgba(74, 222, 128, 0.4);
}
.whist-bid-chip.done b { color: #4ade80; }
.whist-bid-chip.current {
    color: var(--whist-text-strong, #fff);
    background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.2);
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.6);
    box-shadow: 0 0 12px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
    /* Eliminat pulse-ul infinit — pe panou care deja are animație emerge la apariție,
       un al doilea pulse pe chip = animații suprapuse. Glow gold static e suficient. */
}
.whist-bid-chip.current b { color: var(--whist-gold, #ffd700); }

.whist-bid-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

/* BUTOANE BID — design flat modern (designer pro), nu casino-chip vintage:
   pătrate cu colțuri rotunjite, font Inter, hover subtil, focus accesibil. */
.whist-bid-btn {
    position: relative;
    min-width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 100%);
    color: #fff7e0;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* fără ::after rim chip — era vintage */
.whist-bid-btn::after { content: none; }
.whist-bid-btn b { line-height: 1; font-weight: 700; }

/* Hover flat: micro lift + accent auriu subtil (fără rotație, fără mare scale) */
.whist-bid-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.20) 0%, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.06) 100%);
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.85);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.whist-bid-btn:active:not(:disabled) { transform: translateY(0); }

/* Disabled flat: gri stins, fără 3D */
.whist-bid-btn.disabled,
.whist-bid-btn:disabled {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.08);
    cursor: not-allowed;
    box-shadow: none;
}

/* Forbidden (numărul care ar suma=cardsThisRound) — outline roșu discret, fără radial */
.whist-bid-btn.forbidden {
    background: rgba(220, 38, 38, 0.10);
    color: rgba(252, 165, 165, 0.85);
    border-color: rgba(248, 113, 113, 0.55);
    cursor: not-allowed;
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.25);
}
.whist-bid-btn.forbidden span {
    position: absolute;
    bottom: -6px;
    right: -6px;
    font-size: 12px;
    background: rgba(15, 10, 30, 0.95);
    border: 1px solid rgba(248, 113, 113, 0.6);
    border-radius: 50%;
    padding: 1px 4px;
}

/* ═══════════════════════════════════════════════
   HAND + MY INFO row
   ═══════════════════════════════════════════════ */
/* hand-wrap legacy (nu mai e folosit — mâna direct în player-area grid) */
.whist-hand-wrap {
    display: contents;
}

/* ═══ DOCK dreapta: turn + timer + ATU + Runda + tools (tot din fosta bară de sus) ═══ */
.whist-player-dock {
    flex: 0 0 auto;
    width: 226px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 7px 10px;
    /* Cadru ALINIAT cu crest-ul „Player Keystone" (aceeași plăcuță gold-framed glassmorphic) */
    background: linear-gradient(135deg, rgba(var(--whist-panel-rgb, 28, 35, 53), 0.97), rgba(var(--whist-deep-rgb, 12, 18, 32), 0.97));
    border: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.34);
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.18);
    justify-content: center;
    position: relative;
}
/* linia aurie decorativă sus — identică cu crest-ul */
.whist-player-dock::after {
    content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.5), transparent); pointer-events: none;
}
/* glow verde pe dock când e tura mea (consecvent cu crest-ul „Keystone") */
.whist-player-dock:has(.whist-turn-mine) {
    border-color: rgba(74, 222, 128, 0.55);
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.25), 0 8px 22px rgba(0, 0, 0, 0.6);
}
/* Turn indicator mutat în dock (din fosta bară de sus) */
.whist-dock-turn {
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.2;
    letter-spacing: 0.3px;
}
.whist-dock-turn:empty { display: none; }
/* Turn badge compact în dock (override-uri peste stilul mare din fosta bară de sus) */
.whist-dock-turn .whist-turn-mine,
.whist-dock-turn .whist-turn-other,
.whist-dock-turn .whist-turn-info {
    display: block;
    font-size: 11.5px;
    padding: 5px 10px;
    border-radius: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
/* Dock game info: ATU + Runda + Timer pe un rând */
.whist-dock-gameinfo {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.whist-dock-gameinfo .whist-timer-pill {
    min-width: 0;
    padding: 3px 9px;
    gap: 4px;
}
.whist-dock-atu {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.2), rgba(var(--whist-gold-deep-rgb, 217, 119, 6), 0.12));
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
    border-radius: 10px;
}
.whist-dock-atu-label {
    font-size: 8px;
    color: var(--whist-gold, #ffd700);
    font-weight: 800;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
}
.whist-dock-atu-sym {
    font-size: 14px;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.whist-dock-round {
    font-size: 10px;
    color: var(--whist-text-mid, #cbd5e1);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    padding: 2px 8px;
    background: rgba(91, 141, 239, 0.15);
    border: 1px solid rgba(91, 141, 239, 0.3);
    border-radius: 10px;
}

.whist-dock-stats {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.whist-dock-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.whist-dock-stat-label {
    font-size: 8px;
    color: var(--whist-text-dim, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}
.whist-dock-stat-val {
    font-size: 16px;
    color: var(--whist-gold, #ffd700);
    font-family: 'Cinzel', serif;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
}
.whist-dock-tools {
    display: flex;
    gap: 5px;
    justify-content: center;
}
.whist-dock-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.3);
    background: linear-gradient(180deg, rgba(91, 141, 239, 0.18), rgba(30, 58, 138, 0.08));
    color: var(--whist-gold, #ffd700);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Cinzel', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}
.whist-dock-btn:hover {
    background: linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.25), rgba(var(--whist-gold-deep-rgb, 217, 119, 6), 0.12));
    transform: translateY(-2px);
}
.whist-dock-btn.active {
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.32), rgba(34, 197, 94, 0.16));
    border-color: rgba(74, 222, 128, 0.7);
    color: #4ade80;
}

.whist-my-hand {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 86px;
    padding: 2px 6px;
    perspective: 1000px;
    /* FIX (cerere user — „la 8 cărți se lungește masa"): min-width 0 + overflow hidden orizontal
       împiedică min-content-ul cărților să forțeze grid-ul `1fr` să se extindă peste limita coloanei. */
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}

/* Mâna mea — cărți spread cu overlap progresiv funcție de nr cărți (NU lungesc masa).
   Default (1-6 cărți): overlap -14px (cărți largi, vizibile bine).
   7-8 cărți (`.cards-dense` set din JS): overlap -28px (compact, încape în 1fr fără overflow). */
.whist-my-hand .whist-card {
    margin-left: -14px;
}
.whist-my-hand .whist-card:first-child {
    margin-left: 0;
}
.whist-my-hand.cards-dense .whist-card { margin-left: -28px; }
.whist-my-hand.cards-dense .whist-card:first-child { margin-left: 0; }
.whist-my-hand.cards-xdense .whist-card { margin-left: -34px; }
.whist-my-hand.cards-xdense .whist-card:first-child { margin-left: 0; }

/* My info card (compact + animat current-turn) */
/* Scaunul TĂU — premium evidențiat: ramă aurie + glow cald, distinct de adversari (VIP seat). */
.whist-my-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background:
        linear-gradient(135deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.13), rgba(184, 134, 11, 0.04)),
        linear-gradient(135deg, rgba(38, 46, 64, 0.97), rgba(20, 26, 40, 0.96));
    border: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.5);
    border-radius: 15px;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    flex: 0 0 auto;
    width: 256px;
    position: relative;
    transition: all 0.3s;
}

.whist-my-info.current-turn {
    border-color: rgba(74, 222, 128, 0.75);
    background:
        linear-gradient(135deg, rgba(74, 222, 128, 0.32) 0%, rgba(34, 197, 94, 0.12) 100%),
        linear-gradient(180deg, rgba(var(--whist-panel-rgb, 28, 35, 53), 0.97) 0%, rgba(var(--whist-deep-rgb, 12, 18, 32), 0.97) 100%);
    box-shadow:
        0 0 28px rgba(74, 222, 128, 0.55),
        0 10px 22px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(74, 222, 128, 0.25);
    /* fără animation — scaunul meu rămâne static (era pulse care făcea senzație de mișcare) */
}

/* My-info chevron ▲ "RÂNDUL TĂU" deasupra avatarului — ELIMINAT (cerere user — era duplicat
   cu pill-ul „🎴 Rândul tău!" din dock-ul de jos, vizibil prin .whist-turn-mine din JS). */

/* ─── Game-end overlay: premierea (balance before → after) ────────────────────
   Pattern Septica/Macao: la sfârșitul jocului, server-ul trimite perSeatBalances +
   perSeatRewards. Afișăm fiecare jucător cu medalie, scor, balanță înainte → după,
   plus stats personal (Acest joc / Balanță cu indicator DB ✅). */
.ranking-item.me {
    border: 2px solid #5b8def !important;
    background: rgba(91, 141, 239, 0.08);
}
.we-rank-main {
    display: flex; align-items: center; gap: 10px;
}
.we-balance-line {
    margin-top: 4px;
    padding: 4px 10px;
    background: rgba(var(--whist-deep-rgb, 12, 18, 32), 0.6);
    border-radius: 6px;
    font-size: 11px;
    display: flex; align-items: center; gap: 6px;
    color: var(--whist-text-mid, #cbd5e1);
}
.we-bal-label { opacity: 0.7; }
.we-bal-before {
    opacity: 0.55;
    text-decoration: line-through;
}
.we-bal-arrow {
    opacity: 0.6;
    font-size: 10px;
}
.we-bal-after { font-weight: 700; }
.we-bal-delta {
    font-weight: 700;
    margin-left: 2px;
}
.reward-positive { color: #4ade80; }
.reward-negative { color: #f87171; }
.reward-neutral  { color: var(--whist-text-mid, #cbd5e1); }

.we-stats-section {
    margin-top: 14px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(var(--whist-deep-rgb, 12, 18, 32), 0.85), rgba(2, 6, 23, 0.75));
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.35);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.we-stat {
    display: flex; flex-direction: column; gap: 4px;
}
.we-stat-label {
    font-size: 10px;
    color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.we-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--whist-text, #f1f5f9);
}
.we-bal-flow {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px;
}
.we-db-status {
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.8;
}

/* ─── Banner "AI FOST PROMOVAT" — apare deasupra rankings dacă user-ul a fost
   promovat de la spectator la jucător în timpul jocului (când alt player a plecat).
   Pattern: data.promoted === myUsername setează window._mpJustPromoted = true. */
.we-promoted-banner {
    margin: 10px auto 12px;
    padding: 10px 16px;
    max-width: 90%;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.92), rgba(34, 197, 94, 0.85));
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    color: #062c14;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: we-promoted-pop 0.45s cubic-bezier(0.22, 1.4, 0.36, 1);
}
@keyframes we-promoted-pop {
    0%   { transform: scale(0.7); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

/* ─── Panel "Un loc s-a eliberat" — pentru spectatorii cu ofertă activă la game-end.
   Apare în #gameEndOverlay cu countdown 30s + buton "INTRĂ ÎN JOC".
   Pattern Macao (#mpOfferInModal) adaptat pentru overlay-ul Whist. */
.we-spec-offer {
    margin: 12px auto;
    padding: 12px 16px;
    max-width: 90%;
    background: linear-gradient(180deg, rgba(91, 141, 239, 0.18), rgba(91, 141, 239, 0.08));
    border: 1.5px solid rgba(91, 141, 239, 0.55);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(91, 141, 239, 0.3);
}
.we-spec-badge {
    font-size: 13px;
    font-weight: 700;
    color: var(--whist-text-mid, #cbd5e1);
    margin-bottom: 6px;
}
.we-spec-badge span { color: var(--whist-gold, #ffd700); }
.we-spec-bet {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
}
.we-spec-bet strong { color: var(--whist-gold, #ffd700); }
.we-spec-bar {
    height: 5px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 99px;
    overflow: hidden;
    margin: 8px 0 6px;
}
.we-spec-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #4ade80, #5b8def);
    border-radius: 99px;
    transition: width 1s linear;
}
.we-spec-fill.urgent {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}
.we-spec-countdown {
    font-size: 11px;
    color: var(--whist-text-mid, #cbd5e1);
    margin-bottom: 10px;
}
.we-spec-countdown strong {
    color: #4ade80;
    font-size: 14px;
}
.we-spec-btn {
    display: inline-block;
    padding: 8px 22px;
    background: linear-gradient(180deg, #4ade80, #16a34a);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    color: #062c14;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.5);
    transition: transform 0.15s, box-shadow 0.2s;
}
.we-spec-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.7);
}
.we-spec-btn:active {
    transform: translateY(0);
}

/* ─── Toast-uri în sidebar (sub Scoreboard) ─────────────────────────────────
   Cerere user: alertele „test → bid 4" / „✅ Toți au bidit!" etc. nu mai apar
   în dreapta sus în afara mesei, ci AICI sub Scoreboard.
   Global .toast-container este ascuns pe pagina Whist. */
.toast-container { display: none !important; }

.whist-sb-toasts-section {
    margin-top: 6px;
}
.whist-sidebar-toasts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 2px;
}
.whist-sidebar-toasts::-webkit-scrollbar { width: 3px; }
.whist-sidebar-toasts::-webkit-scrollbar-thumb { background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.3); border-radius: 2px; }

.whist-sidebar-toast {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--whist-text, #f1f5f9);
    background: linear-gradient(180deg, rgba(var(--whist-deep-rgb, 12, 18, 32), 0.92), rgba(2, 6, 23, 0.88));
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-left: 3px solid #5b8def;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    animation: whist-sb-toast-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.5s, transform 0.5s;
}
.whist-sidebar-toast-info    { border-left-color: #5b8def; }
.whist-sidebar-toast-success { border-left-color: #4ade80; color: #d1fae5; }
.whist-sidebar-toast-error,
.whist-sidebar-toast-warning { border-left-color: #f59e0b; color: #fef3c7; }
.whist-sidebar-toast.fade-out {
    opacity: 0;
    transform: translateX(20px);
}
@keyframes whist-sb-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.whist-my-avatar {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid transparent;
    background:
        linear-gradient(180deg, #1e293b 0%, #0f172a 100%) padding-box,
        linear-gradient(135deg, #ffe98a 0%, var(--whist-gold) 35%, #b8860b 65%, var(--whist-gold) 100%) border-box;
    box-shadow:
        0 0 18px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.5),
        0 4px 12px rgba(0, 0, 0, 0.7),
        inset 0 2px 5px rgba(255, 255, 255, 0.18);
}

.whist-my-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.whist-my-avatar .avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--whist-text-strong, #fff);
    font-size: 16px;
    font-weight: 800;
    font-family: 'Cinzel', 'Oswald', serif;
}

.whist-my-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.whist-my-name {
    font-size: 14px;
    font-weight: 800;
    color: #fff7e0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.4px;
    font-family: 'Cinzel', 'Inter', serif;
    white-space: nowrap;
}

.whist-my-stats {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 5px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 3px;
}

.whist-my-stats span {
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* separator "·" elegant între Licitare și Mâini */
.whist-my-stats span + span::before {
    content: '·';
    margin-right: 5px;
    color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55);
    font-weight: 900;
}

.whist-my-stats b {
    color: var(--whist-gold);
    font-weight: 900;
    margin-left: 3px;
    font-family: 'Cinzel', 'Oswald', serif;
    font-size: 12px;
    text-shadow: 0 0 7px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.5);
}

/* My score chip — casino style (compact) */
/* Scor — monedă aurită (gilt), proeminentă, cu label SCOR dedesubt */
.whist-my-scorewrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.whist-my-score {
    padding: 0;
    width: 44px;
    height: 44px;
    background:
        radial-gradient(circle at 32% 28%, #fff3c4 0%, var(--whist-gold, #ffd700) 32%, #d4920a 72%, #9a6a08 100%);
    border: 2px solid rgba(255, 248, 220, 0.6);
    border-radius: 50%;
    color: #3a2606;
    font-weight: 900;
    font-size: 17px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 20px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55),
        0 4px 12px rgba(0, 0, 0, 0.6),
        inset 0 2px 5px rgba(255, 255, 255, 0.6),
        inset 0 -2px 5px rgba(120, 80, 0, 0.4);
    font-family: 'Cinzel', 'Oswald', serif;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    position: relative;
}

.whist-my-score::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1.5px dotted rgba(120, 80, 0, 0.4);
}
.whist-my-score-label {
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.75);
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
   CARD DESIGN — Premium playing card
   ═══════════════════════════════════════════════ */
.whist-card {
    position: relative;
    width: 60px;
    height: 86px;
    background:
        radial-gradient(circle at 30% 30%, #ffffff 0%, #f8fafc 50%, var(--whist-text, #f1f5f9) 100%);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 9px;
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.65),
        inset 0 -2px 6px rgba(0, 0, 0, 0.08);
    color: var(--card-color, #000);
    user-select: none;
    cursor: default;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    overflow: hidden;
    transform: translateY(var(--fan-y, 0)) rotate(var(--fan-rotate, 0deg));
    margin-left: -22px;
}

.whist-card:first-child {
    margin-left: 0;
}

/* Cărți VALIDE — POP subtil (designer pro: o linie verde discretă, nu neon agresiv) */
.whist-card.playable {
    cursor: pointer;
    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        0 0 0 1.5px rgba(74, 222, 128, 0.55);
}

.whist-card.playable:hover {
    transform: translateY(calc(var(--fan-y, 0px) - 12px)) rotate(0deg) scale(1.03);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.65),
        0 0 0 1.5px var(--whist-green),
        0 0 14px rgba(74, 222, 128, 0.4);
    z-index: 100;
}

/* Cărți NEvalide — designer pro: rămân CITIBILE (păstrează culori + claritate),
   sunt doar discrete (nu mutilate cu grayscale). Subtilitatea atrage atenția
   pe cele VALIDE (verzi) fără să facă urâte celelalte. */
.whist-card.disabled {
    opacity: 0.82;
    filter: saturate(0.7);          /* doar puțin mai pale, NU grayscale */
    cursor: not-allowed;
    /* dezactivează hover lift / tilt pe cele blocate */
    transform: none !important;
}
.whist-card.disabled:hover {
    transform: none !important;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.whist-card.is-atu {
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1.5px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.85),
        0 0 0 2px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55),
        0 0 16px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.3);
}

.whist-card.is-atu.playable {
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1.5px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.85),
        0 0 0 2px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.85),
        0 0 22px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55);
}

.whist-card.is-atu.playable:hover {
    box-shadow:
        0 22px 42px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.65),
        inset 0 0 0 1.5px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.95),
        0 0 0 3px var(--whist-gold),
        0 0 36px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.75);
}

.whist-card-corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.95;
    font-weight: 700;
}

.whist-card-corner-tl {
    top: 5px;
    left: 6px;
}

.whist-card-corner-br {
    bottom: 5px;
    right: 6px;
    transform: rotate(180deg);
}

.whist-card-rank {
    font-size: 14px;
    font-weight: 800;
    font-family: 'Cinzel', 'Bebas Neue', serif;
    letter-spacing: -0.5px;
}

.whist-card-suit-small {
    font-size: 11px;
    margin-top: 0;
}

.whist-card-pip {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    opacity: 0.94;
    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.7),
        0 -1px 1px rgba(0, 0, 0, 0.1),
        2px 4px 8px rgba(0, 0, 0, 0.15);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
}

/* Played cards (in trick area) — smaller */
.whist-card-played {
    width: 56px;
    height: 80px;
    margin-left: 0;
    cursor: default;
    transform: none;
}

.whist-card-played .whist-card-rank { font-size: 12px; }
.whist-card-played .whist-card-suit-small { font-size: 10px; }
.whist-card-played .whist-card-pip { font-size: 28px; }

/* ═══════════════════════════════════════════════
   GAME END MODAL — Macao exact replica (cu DOM existent din index.php)
   ═══════════════════════════════════════════════ */
.game-end-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    background: rgba(0, 0, 0, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    align-items: center !important;
    justify-content: center !important;
}
.game-end-overlay.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.game-end-card {
    background: linear-gradient(180deg, rgba(28, 22, 8, 0.98), rgba(20, 28, 48, 0.98)) !important;
    border: 3px solid var(--whist-gold, #ffd700) !important;
    border-radius: 20px !important;
    padding: 28px !important;
    min-width: 380px !important;
    max-width: 460px !important;
    text-align: center !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 60px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4) !important;
    color: var(--whist-text-strong, #fff) !important;
    font-family: 'Cinzel', serif !important;
}
.game-end-header h2 {
    font-family: 'Cinzel', serif !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    color: var(--whist-gold, #ffd700) !important;
    text-shadow: 0 0 20px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.6) !important;
    margin: 0 0 14px !important;
}
.game-end-icon {
    font-size: 56px !important;
    color: var(--whist-gold, #ffd700) !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) !important;
}
.result-ranking {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 14px 0 16px !important;
}
.ranking-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 14px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: var(--whist-text-mid, #cbd5e1) !important;
}
.ranking-item.winner {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.22), rgba(34, 197, 94, 0.1)) !important;
    border-color: rgba(74, 222, 128, 0.5) !important;
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.25) !important;
}
.ranking-position {
    font-family: 'Cinzel', serif !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    min-width: 24px !important;
    color: var(--whist-text-dim, #94a3b8) !important;
}
.ranking-item.winner .ranking-position { color: var(--whist-gold, #ffd700) !important; }
.ranking-name {
    flex: 1 !important;
    font-weight: 700 !important;
    text-align: left !important;
    color: var(--whist-text-strong, #fff) !important;
}
.ranking-score {
    font-family: 'Cinzel', serif !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    color: #4ade80 !important;
}
.auto-rematch-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 0 !important;
    font-size: 12px !important;
    color: var(--whist-text-mid, #cbd5e1) !important;
    font-family: 'Inter', sans-serif !important;
}
.auto-rematch-toggle label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}
.rematch-switch {
    width: 36px !important;
    height: 20px !important;
    background: #475569 !important;
    border-radius: 10px !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
    display: inline-block !important;
}
.rematch-switch::after {
    content: '' !important;
    width: 16px !important;
    height: 16px !important;
    background: white !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    transition: transform 0.3s !important;
}
.rematch-switch.active { background: #4ade80 !important; }
.rematch-switch.active::after { transform: translateX(16px) !important; }
.auto-rematch-countdown {
    margin: 10px 0 !important;
    padding: 8px 14px !important;
    background: rgba(74, 222, 128, 0.16) !important;
    border: 1px solid rgba(74, 222, 128, 0.5) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: #4ade80 !important;
    font-family: 'Inter', sans-serif !important;
}
.auto-rematch-countdown b {
    font-family: 'Cinzel', serif !important;
    font-size: 20px !important;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.6) !important;
}
.game-end-actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 8px !important;
}
.game-end-btn {
    flex: 1 !important;
    padding: 12px !important;
    border: 2px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    font-family: 'Cinzel', serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.2s !important;
}
.btn-play-again {
    background: linear-gradient(135deg, #4ade80, #16a34a) !important;
    color: #052e13 !important;
    border-color: var(--whist-text-strong, #fff) !important;
}
.btn-play-again:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(74, 222, 128, 0.5) !important;
}
.btn-back-menu {
    background: rgba(0, 0, 0, 0.4) !important;
    color: var(--whist-text-mid, #cbd5e1) !important;
}
.btn-back-menu:hover {
    background: rgba(220, 38, 38, 0.7) !important;
    color: var(--whist-text-strong, #fff) !important;
    border-color: var(--whist-text-strong, #fff) !important;
}

/* ═══════════════════════════════════════════════
   ASCUNDE widget-urile flotante vechi (acum INTEGRATE în dock-ul jos)
   ═══════════════════════════════════════════════ */
#whistStatsPanel,
#whistThemePicker,
#whistHeatmap,
.whist-voice-btn,
.whist-streamer-toggle,
.whist-hand-toolbar {
    display: none !important;
}

/* ATU + Round pills mutate în dock — ascunse din statusbar */
.whist-statusbar .whist-atu-pill,
.whist-statusbar .whist-round-pill {
    display: none !important;
}

/* ═══════════════════════════════════════════════
   REVOLUȚIONARE: voice commands, achievements, streamer mode, heatmap
   ═══════════════════════════════════════════════ */

/* === VOICE BUTTON === */
.whist-voice-btn {
    position: fixed; bottom: 16px; right: 80px; z-index: 100;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec4899, #be185d);
    border: 2px solid #fff;
    color: var(--whist-text-strong, #fff);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.5);
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.whist-voice-btn:hover { transform: scale(1.1); }
.whist-voice-btn.listening {
    animation: whist-voice-pulse 1s ease-in-out infinite;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}
@keyframes whist-voice-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5), 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { box-shadow: 0 4px 14px rgba(239, 68, 68, 0.8), 0 0 0 20px rgba(239, 68, 68, 0); }
}

/* === ACHIEVEMENT POPUP === */
.whist-achievement {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    z-index: 8000;
    padding: 24px 32px;
    background:
        linear-gradient(135deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.95), rgba(var(--whist-gold-deep-rgb, 217, 119, 6), 0.95)),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent 50%);
    border: 3px solid #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 60px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.7);
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    min-width: 300px;
}
.whist-achievement.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.whist-achievement-icon {
    font-size: 60px; line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
.whist-achievement-title {
    font-family: 'Cinzel', serif;
    font-size: 22px; color: #2a1810;
    font-weight: 900; margin: 10px 0 4px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
.whist-achievement-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13px; color: rgba(42, 24, 16, 0.8);
}

/* === STREAMER MODE TOGGLE === */
.whist-streamer-toggle {
    position: fixed; bottom: 16px; right: 16px; z-index: 100;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(91, 141, 239, 0.95), rgba(30, 58, 138, 0.95));
    border: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.5);
    border-radius: 20px;
    color: var(--whist-text-strong, #fff);
    font-family: 'Cinzel', serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.whist-streamer-toggle:hover { transform: translateY(-2px); }
.whist-streamer-toggle.active {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.95), rgba(34, 197, 94, 0.95));
}
body.whist-streamer-mode .whist-sidebar,
body.whist-streamer-mode #whistStatsPanel,
body.whist-streamer-mode #whistThemePicker,
body.whist-streamer-mode #whistHeatmap {
    display: none !important;
}
body.whist-streamer-mode .whist-root {
    grid-template-columns: 1fr !important;
    grid-template-areas: 'topbar' 'felt' 'bottom' !important;
}

/* === HEATMAP cards played per suit === */
.whist-heatmap {
    position: fixed;
    bottom: 16px; left: 56px;
    z-index: 50;
    padding: 8px 10px;
    background: rgba(var(--whist-deep-rgb, 12, 18, 32), 0.85);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.3);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    display: flex; gap: 6px; align-items: center;
    font-family: 'Inter', sans-serif; font-size: 11px;
}
.whist-heatmap-suit {
    display: flex; flex-direction: column; align-items: center;
    min-width: 24px;
}
.whist-heatmap-icon { font-size: 16px; line-height: 1; }
.whist-heatmap-bar {
    width: 24px; height: 28px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    position: relative; overflow: hidden;
    margin-top: 2px;
}
.whist-heatmap-fill {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(180deg, currentColor 0%, transparent 100%);
    opacity: 0.8;
    transition: height 0.5s;
}
.whist-heatmap-count {
    font-size: 9px; color: var(--whist-gold, #ffd700);
    font-family: 'Cinzel', serif; font-weight: 800;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════
   PRO FEATURES: sort buttons, card preview, modals, themes, chip stack, stats
   ═══════════════════════════════════════════════ */

/* === HAND SORT BUTTONS === */
.whist-hand-toolbar {
    position: absolute;
    bottom: 156px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 30;
    background: linear-gradient(180deg, rgba(var(--whist-panel-rgb, 28, 35, 53), 0.95), rgba(var(--whist-deep-rgb, 12, 18, 32), 0.95));
    border: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.45);
    border-radius: 10px;
    padding: 5px 7px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}
.whist-hand-tool {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.3);
    background: linear-gradient(180deg, rgba(91, 141, 239, 0.18), rgba(30, 58, 138, 0.08));
    color: var(--whist-gold, #ffd700);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Cinzel', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}
.whist-hand-tool:hover {
    background: linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.25), rgba(var(--whist-gold-deep-rgb, 217, 119, 6), 0.12));
    transform: translateY(-2px);
}
.whist-hand-tool.active {
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.32), rgba(34, 197, 94, 0.16));
    border-color: rgba(74, 222, 128, 0.7);
    color: #4ade80;
}

/* === CARD HOVER PREVIEW === */
.whist-card-preview {
    position: fixed;
    pointer-events: none;
    z-index: 9000;
    width: 180px;
    height: 252px;
    background: radial-gradient(circle at 30% 30%, #fff 0%, var(--whist-text, #f1f5f9) 60%, var(--whist-text, #f1f5f9) 100%);
    border: 2px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.8);
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--prev-color, #000);
    overflow: hidden;
}
.whist-card-preview.visible { opacity: 1; transform: scale(1); }
.whist-card-preview-rank {
    position: absolute; top: 14px; left: 18px;
    font-size: 42px; font-weight: 900;
    font-family: 'Cinzel', 'Bebas Neue', serif; line-height: 1;
}
.whist-card-preview-suit-small {
    position: absolute; top: 56px; left: 22px;
    font-size: 30px; line-height: 1;
}
.whist-card-preview-pip {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 120px;
    text-shadow: 0 4px 0 rgba(255, 255, 255, 0.6);
}
.whist-card-preview-rank-br {
    position: absolute; bottom: 14px; right: 18px;
    font-size: 42px; font-weight: 900;
    font-family: 'Cinzel', 'Bebas Neue', serif; line-height: 1;
    transform: rotate(180deg);
}
.whist-card-preview-suit-small-br {
    position: absolute; bottom: 56px; right: 22px;
    font-size: 30px; line-height: 1;
    transform: rotate(180deg);
}

/* === ROUND PREVIEW MODAL === ELIMINAT (cerere user — modal "Runda X" cu blur uriaș
   între runde distrăgea grav). Apelul JS deja comentat la roundStarted, plus display:none
   ca safety net dacă alt cod ar mai chema showRoundPreview(). */
.whist-round-preview,
.whist-round-preview.visible { display: none !important; }
.whist-round-preview-card {
    background: linear-gradient(180deg, rgba(28, 22, 8, 0.96) 0%, rgba(20, 28, 48, 0.96) 100%);
    border: 3px solid var(--whist-gold);
    border-radius: 24px;
    padding: 32px 48px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 80px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
    transform: scale(0.7) rotate(-3deg);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 420px;
}
.whist-round-preview.visible .whist-round-preview-card {
    transform: scale(1) rotate(0);
}
.whist-round-preview-title {
    font-family: 'Cinzel', serif; font-size: 14px; color: var(--whist-gold, #ffd700);
    letter-spacing: 4px; text-transform: uppercase; font-weight: 800;
    margin-bottom: 8px;
    text-shadow: 0 0 16px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.6);
}
.whist-round-preview-num {
    font-family: 'Cinzel', serif; font-size: 72px; color: var(--whist-text-strong, #fff);
    font-weight: 900; line-height: 1;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.5);
}
.whist-round-preview-info {
    display: flex; justify-content: center; gap: 24px;
    margin-top: 18px; color: var(--whist-text-mid, #cbd5e1);
}
.whist-round-preview-info-cell {
    display: flex; flex-direction: column; gap: 4px;
}
.whist-round-preview-label {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--whist-text-dim, #94a3b8);
}
.whist-round-preview-value {
    font-size: 20px; font-weight: 900; color: var(--whist-gold, #ffd700);
    font-family: 'Cinzel', serif;
}

/* === BID SUMMARY BANNER === */
/* Banner "LICITĂRI" — afișat după ce toți au bidit, EXACT ÎN MIJLOCUL FELTULUI (cerere user).
   Centrat vertical + orizontal pe .whist-table-area (position:absolute), încadrare elegantă cu
   border auriu + glow subtil, ușor mărit ca să fie focal point la final de licitare. */
.whist-bid-summary {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    z-index: 4000;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    background: linear-gradient(180deg, rgba(28, 22, 8, 0.97), rgba(20, 28, 48, 0.96));
    border: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.65);
    border-radius: 999px;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.65),
        0 0 24px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s;
    opacity: 0; font-size: 12px;
    pointer-events: none;
}
.whist-bid-summary.visible {
    transform: translate(-50%, -50%) scale(1); opacity: 1;
}
/* Banner LICITĂRI — child elements compactate (era font 12/18px) */
.whist-bid-summary-label {
    font-family: 'Inter', system-ui, sans-serif; font-size: 10px; color: var(--whist-gold, #ffd700);
    letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
}
.whist-bid-summary-bid {
    display: flex; flex-direction: row; align-items: center; gap: 4px;
    padding: 2px 7px;
    background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.14);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
    border-radius: 999px;
}
.whist-bid-summary-name { font-size: 9px; color: var(--whist-text-mid, #cbd5e1); font-weight: 500; }
.whist-bid-summary-num {
    font-size: 13px; font-weight: 800; color: var(--whist-gold, #ffd700);
    font-family: 'Inter', system-ui, sans-serif;
}
.whist-bid-summary-total {
    padding: 3px 9px;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.92), rgba(22, 163, 74, 0.92));
    border-radius: 999px;
    color: #052e13; font-weight: 800;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
}

/* === AI BID HINT (compact) === */
.whist-bid-hint {
    margin-top: 3px;
    padding: 3px 8px;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.18), rgba(74, 222, 128, 0.05));
    border: 1.5px solid rgba(74, 222, 128, 0.5);
    border-radius: 6px;
    color: #4ade80; font-size: 9px;
    text-align: center;
    font-family: 'Inter', sans-serif; font-weight: 600;
}
.whist-bid-hint b {
    font-family: 'Cinzel', serif; font-size: 11px; margin-left: 4px;
}

/* === THEME SWITCHER === */
.whist-theme-picker {
    position: fixed; bottom: 16px; left: 16px; z-index: 100;
    display: flex; gap: 6px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.35);
    border-radius: 24px;
    backdrop-filter: blur(10px);
}
.whist-theme-dot {
    width: 22px; height: 22px; border-radius: 50%;
    cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.4);
    transition: all 0.2s;
}
.whist-theme-dot:hover { transform: scale(1.2); }
.whist-theme-dot.active { border-color: var(--whist-gold, #ffd700); box-shadow: 0 0 12px var(--whist-gold, #ffd700); }
.whist-theme-dot[data-theme="green"] { background: radial-gradient(circle, #1e7e3a, #0a3017); }
.whist-theme-dot[data-theme="blue"] { background: radial-gradient(circle, #1e3a8a, #0a1a3a); }
.whist-theme-dot[data-theme="red"] { background: radial-gradient(circle, #7f1d1d, #2a0a0a); }
.whist-theme-dot[data-theme="purple"] { background: radial-gradient(circle, #581c87, #1a0a3a); }

.whist-theme-dot[data-theme="light"] { background: radial-gradient(circle, #f4f7fb, #c9d4e4); border-color: rgba(0, 0, 0, 0.25); }

body[data-whist-theme="blue"] .whist-table-area {
    background:
        radial-gradient(ellipse 65% 50% at 50% 50%, rgba(74, 144, 226, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 85% 80% at 50% 50%, #1e3a8a 0%, #1e3370 50%, #0a1a3a 100%) !important;
}
body[data-whist-theme="red"] .whist-table-area {
    background:
        radial-gradient(ellipse 65% 50% at 50% 50%, rgba(220, 38, 38, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 85% 80% at 50% 50%, #7f1d1d 0%, #5a1010 50%, #2a0a0a 100%) !important;
}
body[data-whist-theme="purple"] .whist-table-area {
    background:
        radial-gradient(ellipse 65% 50% at 50% 50%, rgba(168, 85, 247, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 85% 80% at 50% 50%, #581c87 0%, #3b0d6e 50%, #1a0a3a 100%) !important;
}

/* === CHIP STACK ON AVATAR === */
.whist-avatar-chip-stack {
    position: absolute; bottom: -6px; right: -6px;
    width: 18px; height: 18px;
    background: radial-gradient(circle at 35% 35%, #fff8dc, var(--whist-gold, #ffd700), #c9941a);
    border: 2px solid #fff; border-radius: 50%;
    color: #2a1810; font-size: 10px; font-weight: 900;
    font-family: 'Cinzel', serif;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.5);
    z-index: 11;
}

/* === TURN ANNOUNCEMENT === */
.whist-turn-announce {
    position: fixed; top: 110px; left: 50%; transform: translateX(-50%);
    z-index: 3000;
    padding: 10px 24px;
    background: linear-gradient(180deg, rgba(var(--whist-deep-rgb, 12, 18, 32), 0.95), rgba(28, 35, 51, 0.9));
    border: 1.5px solid rgba(74, 222, 128, 0.5);
    border-radius: 22px;
    color: #4ade80;
    font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
    letter-spacing: 0.8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 24px rgba(74, 222, 128, 0.35);
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s, transform 0.4s;
    backdrop-filter: blur(8px);
}
.whist-turn-announce.visible {
    opacity: 1; transform: translateX(-50%) translateY(4px);
}

/* === STATS PANEL === */
.whist-stats-panel {
    position: fixed; top: 70px; right: 16px; z-index: 50;
    padding: 10px 14px;
    background: rgba(var(--whist-deep-rgb, 12, 18, 32), 0.85);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.3);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    color: var(--whist-text-mid, #cbd5e1); font-size: 11px;
    font-family: 'Inter', sans-serif;
    display: none;
}
.whist-stats-panel.visible { display: block; }
.whist-stats-row {
    display: flex; justify-content: space-between; gap: 16px;
}
.whist-stats-row b {
    color: var(--whist-gold, #ffd700); font-family: 'Cinzel', serif; font-size: 13px;
}

/* ═══════════════════════════════════════════════
   PER-SEAT PLAYED CARD SLOT (cărți jucate lângă fiecare jucător)
   ═══════════════════════════════════════════════ */

/* Hide main trick area — folosim slots per jucător */
.whist-trick { display: none !important; }

.whist-seat-played-card {
    position: absolute;
    width: 56px;
    height: 80px;
    pointer-events: none;
    z-index: 6;
    transition: opacity 0.3s;
    opacity: 1;
}

/* North + NE/NW: cartea apare SUB avatar (în interior felt-ului) */
.whist-opp-north .whist-seat-played-card,
.whist-opp-ne .whist-seat-played-card,
.whist-opp-nw .whist-seat-played-card {
    bottom: -94px;
    left: 50%;
    transform: translateX(-50%);
}

/* East: cartea la STÂNGA panel-ului (spre centrul mesei), DREAPTĂ */
.whist-opp-east .whist-seat-played-card {
    left: -74px;
    top: 50%;
    transform: translateY(-50%);
}

/* West: cartea la DREAPTA panel-ului (spre centrul mesei), DREAPTĂ */
.whist-opp-west .whist-seat-played-card {
    right: -74px;
    top: 50%;
    transform: translateY(-50%);
}

/* My played card — în interior felt-ului la marginea de jos centru
   (cu celelalte 3 cărți, ca în Macao - patrat central) */
.whist-my-played-card {
    position: absolute;
    bottom: 14px;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    width: 60px;
    height: 85px;
    z-index: 6;
}

/* La 901+ cartea mea jucată se ancorează la CENTRUL feltului (nu la marginea de jos).
   Pe felturi ÎNALTE (ex. iPad Pro 1024×1366 portrait) `bottom:14px` o lăsa izolată la baza
   feltului, la ~460px sub cărțile adverse → trick „spart" cu centru gol. Ancorată la
   centru+64px se grupează cu celelalte cărți pe ORICE înălțime de felt.
   Scopat 901+ ca să NU schimbe poziția mobilă (≤900) deja optimizată. Verificat 1024×768 + 1024×1366. */
@media (min-width: 901px) {
    .whist-my-played-card {
        top: 50%;
        bottom: auto;
        transform: translate(-50%, calc(-50% + 64px));
    }
}

/* NOTE: regula veche `whist-slide-from-bottom-felt` (cu translateX(-50%) în keyframe +
   animation backwards) a fost ȘTEARSĂ — cauza bug-ului "cartea sare după ce e pusă":
   keyframe-ul avea translateX(-50%), dar animația fiind `backwards` (nu forwards), la
   FINAL cartea revenea la starea naturală (fără translateX) → SALT de ~28px la dreapta.
   Acum se aplică `.whist-my-played-card .whist-card` din blocul de mai jos (slide-from-bottom,
   FĂRĂ translateX) → cartea alunecă de jos și RĂMÂNE fix unde trebuie. */

/* === Cards in slots (Macao style — slide din direcția jucătorului) === */
.whist-seat-played-card .whist-card {
    width: 56px !important;
    height: 80px !important;
    margin: 0 !important;
    border-radius: 7px !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.7) !important;
}

.whist-seat-played-card .whist-card-rank { font-size: 13px !important; }
.whist-seat-played-card .whist-card-suit-small { font-size: 10px !important; }
.whist-seat-played-card .whist-card-pip { font-size: 30px !important; }

/* ── STRÂNGEREA MÂINII ── când mâna se termină, toate cărțile (inclusiv ultima)
   se țin ~420ms vizibile, apoi alunecă spre centrul mesei, se micșorează și dispar. */
@keyframes whist-trick-gather {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
    10%  { transform: translate(0, -7px) scale(1.05) rotate(0deg); opacity: 1; }  /* ridicare — acknowledge */
    22%  { transform: translate(0, -7px) scale(1.05) rotate(0deg); opacity: 1; }  /* ținere — se văd toate cărțile */
    /* FAZA 1: toate cărțile se adună în CENTRU → PACHET (teanc aliniat, mică rotație de teanc) */
    48%  { transform: translate(var(--cx, 0), var(--cy, 0)) scale(0.9) rotate(var(--sr, 0deg)); opacity: 1; }
    60%  { transform: translate(var(--cx, 0), var(--cy, 0)) scale(0.9) rotate(var(--sr, 0deg)); opacity: 1; }  /* ține pachetul scurt */
    /* FAZA 2: pachetul se DUCE în dreptul câștigătorului + se micșorează și dispare (cules) */
    100% { transform: translate(calc(var(--cx, 0) + var(--wx, 0)), calc(var(--cy, 0) + var(--wy, 0))) scale(0.42) rotate(var(--sr, 0deg)); opacity: 0; }
}
.whist-seat-played-card .whist-card.whist-gathering {
    animation: whist-trick-gather 1.5s cubic-bezier(0.45, 0, 0.55, 1) forwards !important;
    z-index: 60 !important;
    pointer-events: none;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55) !important;
}

/* STRÂNGERE SECVENȚIALĂ (una după alta) — 2 clase, controlate din JS:
   FAZA 1: fiecare carte zboară în CENTRU pe rând (whist-gather-c, cu animation-delay) și RĂMÂNE (pachet).
   FAZA 2: după ce toate-s în centru, pachetul se duce la câștigător împreună (whist-gather-w). */
.whist-seat-played-card .whist-card.whist-gather-c {
    animation: whist-gather-to-center 0.32s cubic-bezier(0.4, 0, 0.3, 1) forwards !important;
    z-index: 60 !important;
    pointer-events: none;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55) !important;
}
@keyframes whist-gather-to-center {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    35%  { transform: translate(0, -7px) scale(1.04) rotate(0deg); }   /* mică ridicare — acknowledge */
    100% { transform: translate(var(--cx, 0), var(--cy, 0)) scale(0.92) rotate(var(--sr, 0deg)); }
}
.whist-seat-played-card .whist-card.whist-gather-w {
    animation: whist-pack-to-winner 0.55s cubic-bezier(0.5, 0, 0.7, 1) forwards !important;
    z-index: 60 !important;
    pointer-events: none;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55) !important;
}
@keyframes whist-pack-to-winner {
    0%   { transform: translate(var(--cx, 0), var(--cy, 0)) scale(0.92) rotate(var(--sr, 0deg)); opacity: 1; }
    100% { transform: translate(calc(var(--cx, 0) + var(--wx, 0)), calc(var(--cy, 0) + var(--wy, 0))) scale(0.4) rotate(var(--sr, 0deg)); opacity: 0; }
}

/* Cartea alunecă din direcția jucătorului — Macao pattern, cubic-bezier spring */
.whist-opp-north .whist-seat-played-card .whist-card,
.whist-opp-ne .whist-seat-played-card .whist-card,
.whist-opp-nw .whist-seat-played-card .whist-card {
    animation: whist-slide-from-top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.whist-opp-east .whist-seat-played-card .whist-card {
    animation: whist-slide-from-right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.whist-opp-west .whist-seat-played-card .whist-card {
    animation: whist-slide-from-left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.whist-my-played-card .whist-card {
    animation: whist-slide-from-bottom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    /* FIX BUG #7 CSS (audit): margin-left:-22px moștenit din `.whist-card` baseline deplasa
       cartea jucată stânga. Reset la 0 ca pip-ul să fie centrat în slot. */
    margin: 0 !important;
}

@keyframes whist-slide-from-top {
    0% { opacity: 0; transform: translateY(-70px) scale(0.8); }
    70% { opacity: 1; transform: translateY(4px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes whist-slide-from-bottom {
    0% { opacity: 0; transform: translateY(70px) scale(0.8); }
    70% { opacity: 1; transform: translateY(-4px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes whist-slide-from-left {
    0% { opacity: 0; transform: translateX(-70px) scale(0.8); }
    70% { opacity: 1; transform: translateX(4px) scale(1.04); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes whist-slide-from-right {
    0% { opacity: 0; transform: translateX(70px) scale(0.8); }
    70% { opacity: 1; transform: translateX(-4px) scale(1.04); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* === Cartea iese din mână când o joc (Macao discard pattern) === */
.whist-my-hand .whist-card.playing-out {
    animation: whist-card-leave-hand 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none;
}

@keyframes whist-card-leave-hand {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    50% { opacity: 0.8; transform: translateY(-50px) scale(1.1); }
    100% { opacity: 0; transform: translateY(-120px) scale(0.7); }
}

/* === Card backs sub avatar — Macao deal stagger (90ms style) ===
   FIX BUG #6 CSS (audit): selector RESTRÂNS la `.fresh-deal-back` (era pe TOATE .whist-card-back).
   Anterior: keyframe-ul final-stage seta `transform: rotate(...)` care PERSISTA — cardback-urile
   din deck/oponenți rămâneau înclinate strâmb după prima rundă, override-ind `transform:none`. */
.whist-card-back.fresh-deal-back {
    animation: whist-back-deal 0.4s cubic-bezier(0.22, 1.2, 0.36, 1) backwards;
    animation-delay: calc(var(--idx, 0) * 60ms);
}

@keyframes whist-back-deal {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: rotate(calc(var(--idx, 0) * 1.5deg - 4deg)); }
}

/* ═══════════════════════════════════════════════
   TIMER RING SVG (countdown circular pe avatar activ)
   ═══════════════════════════════════════════════ */

.whist-timer-ring {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s;
}

.whist-opponent.current-turn .whist-timer-ring,
.whist-my-info.current-turn .whist-timer-ring {
    opacity: 1;
}

.whist-timer-ring .ring-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.45);
    stroke-width: 5;
}

.whist-timer-ring .ring-fg {
    fill: none;
    stroke: #4ade80;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke 0.5s;
    filter: drop-shadow(0 0 6px #4ade80);
}

.whist-timer-ring .ring-fg.warning {
    stroke: #fbbf24;
    filter: drop-shadow(0 0 6px #fbbf24);
}

.whist-timer-ring .ring-fg.danger {
    stroke: #ef4444;
    filter: drop-shadow(0 0 8px #ef4444);
    animation: whist-timer-danger 0.5s ease-in-out infinite;
}

@keyframes whist-timer-danger {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Allow overflow ca să se vadă timer ring */
.whist-opp-avatar,
.whist-my-avatar {
    overflow: visible !important;
}

.whist-opp-avatar img,
.whist-my-avatar img,
.whist-opp-avatar .avatar-initial,
.whist-my-avatar .avatar-initial {
    border-radius: 50%;
}

/* ═══════════════════════════════════════════════
   PRO ANIMATIONS (Card fly, confetti, fireworks, score pulse)
   ═══════════════════════════════════════════════ */

/* Cards fly TO winner pe trickComplete */
@keyframes whist-trick-collect {
    0% { opacity: 1; transform: translate(var(--cur-x, 0), var(--cur-y, 0)) scale(1) rotate(0); }
    60% { opacity: 0.9; transform: translate(calc(var(--winner-x, 0) * 0.7), calc(var(--winner-y, 0) * 0.7)) scale(0.8) rotate(180deg); }
    100% { opacity: 0; transform: translate(var(--winner-x, 0), var(--winner-y, 0)) scale(0.3) rotate(360deg); }
}

.whist-trick-slot.collecting {
    animation: whist-trick-collect 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
    z-index: 999 !important;
}

/* Confetti particle */
.whist-confetti-particle {
    position: fixed;
    width: 8px;
    height: 12px;
    pointer-events: none;
    z-index: 9999;
    border-radius: 2px;
    animation: whist-confetti-fall 1.6s cubic-bezier(0.5, 0.05, 0.95, 0.5) forwards;
}

@keyframes whist-confetti-fall {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(var(--end-x, 0), var(--end-y, 400px)) rotate(var(--end-rot, 720deg)) scale(0.5); }
}

/* Score chip pulse soft pe schimbare (no rotate, no aggressive) */
@keyframes whist-score-pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); box-shadow: 0 0 28px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.7); }
    100% { transform: scale(1); }
}

.whist-score-pulse {
    animation: whist-score-pulse 0.7s ease-out;
}

/* Bid chip flies in */
/* Chip fly-in pe oponent la bidPlaced — SUBTIL doar fade (era translateY -100→+20→0 + rotate -180→20→0 + scale 0→1.3→1, agresiv) */
@keyframes whist-chip-fly-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.whist-bid-placed-anim {
    animation: whist-chip-fly-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Trick win golden burst */
@keyframes whist-win-burst {
    0% { box-shadow: 0 0 0 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.8); }
    50% { box-shadow: 0 0 0 30px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4), 0 0 60px 30px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.3); }
    100% { box-shadow: 0 0 0 60px rgba(var(--whist-gold-rgb, 255, 215, 0), 0); }
}

.whist-winner-burst {
    animation: whist-win-burst 1s ease-out !important;
}

/* Round end fireworks particle */
@keyframes whist-firework {
    0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
    50% { opacity: 1; transform: translate(var(--fx, 60px), var(--fy, -60px)) scale(1.5); }
    100% { opacity: 0; transform: translate(var(--fx, 80px), var(--fy, -80px)) scale(0.3); }
}

.whist-firework-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: whist-firework 1.5s ease-out forwards;
    box-shadow: 0 0 12px currentColor;
}

/* Deal animation — cărțile zboară din centru-sus (dealer) la mână cu stagger */
@keyframes whist-deal-from-center {
    0% {
        opacity: 0;
        transform: translateY(-160px) scale(0.4) rotate(180deg);
    }
    60% {
        opacity: 1;
        transform: translateY(8px) scale(1.06) rotate(8deg);
    }
    100% {
        opacity: 1;
        transform: translateY(var(--fan-y, 0)) rotate(var(--fan-rotate, 0deg)) scale(1);
    }
}

.whist-my-hand .whist-card.fresh-deal {
    animation: whist-deal-from-center 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--idx, 0) * 90ms);
}

/* Deal animation card backs oponenți (zboară de sus) */
@keyframes whist-deal-back {
    0% { opacity: 0; transform: translateY(-100px) scale(0.3); }
    100% { opacity: 1; transform: rotate(calc(var(--idx, 0) * 1.5deg - 4deg)) scale(1); }
}

.whist-card-back.fresh-deal-back {
    animation: whist-deal-back 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--idx, 0) * 70ms);
}

/* whist-card-flip REMOVED — folosim whist-card-place (elegant fade+scale) */

/* Conic ring DISABLED — replaced cu elegant pulse */
.whist-opponent.current-turn .whist-opp-card::after {
    display: none;
}

/* Felt glow când e turn-ul meu */
body.whist-my-turn-active .whist-table-area {
    box-shadow:
        inset 0 0 100px rgba(74, 222, 128, 0.18),
        inset 0 0 0 2px #2a1810,
        inset 0 0 0 4px #5a3520,
        inset 0 0 0 8px #3a2010,
        inset 0 0 0 10px rgba(74, 222, 128, 0.5),
        inset 0 0 0 11px rgba(74, 222, 128, 0.2),
        0 0 32px rgba(0, 0, 0, 0.7),
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(74, 222, 128, 0.3) !important;
}

/* Hover card — subtle, no aggressive shift on neighbors */
.whist-card.playable:hover {
    z-index: 999 !important;
}

/* === Auto-play toast (Macao style) === */
/* Indicator AFK discret + profesional — apare O DATĂ când pleci AFK (joc automat),
   rămâne subtil sus-centru, dispare lin când revii și joci manual.
   Glass întunecat + accent auriu (temă cazino), punct care pulsează blând. NU roșu alarmant. */
.whist-auto-badge {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: rgba(18, 22, 31, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.32);
    border-radius: 999px;
    color: #f3e6c4;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.whist-auto-badge.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.whist-auto-badge .whist-auto-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffd54a;
    box-shadow: 0 0 8px rgba(255, 213, 74, 0.9);
    animation: whist-auto-pulse 1.4s ease-in-out infinite;
}
@keyframes whist-auto-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.65); }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .whist-root {
        grid-template-columns: 1fr 200px;
    }
}

/* ECRANE LATE (laptop / desktop / ultrawide) — cerere user „fără spații moarte, folosește spațiul".
   `#app` e plafonat GLOBAL la 1200px → masa lăsa ~160px+ gol pe laturi pe 1366/1920+. DOAR când jocul
   whist e activ ȘI doar peste 1200px, las masa să umple până la min(97vw, 1700px): laptop/desktop se
   umplu, ultrawide se centrează rezonabil (standard pro — o masă de cărți pe 3440px full-width ar fi
   absurdă). Scaunele sunt poziționate procentual → scalează proporțional cu feltul lărgit.
   Scopat la `body.whist-game-active` → NU afectează lobby-ul sau alte jocuri. (Verificat live 1366/1920/2560.) */
@media (min-width: 1201px) {
    body.whist-game-active #app { max-width: min(97vw, 1700px) !important; width: 100% !important; }
}

/* ≤900px (tabletă/landscape mic): layout CURENT — fără topbar, sidebar ascuns, o coloană */
@media (max-width: 900px) {
    .whist-root {
        /* dock 200px: mâna 88px + scaun/acțiuni 88px + gap+padding. Felt = restul (~430px) */
        grid-template-rows: minmax(0, 1fr) 200px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "felt"
            "bottom";
    }
    .whist-sidebar { display: none; }
    .whist-table-area { margin: 4px; }
    .whist-felt-watermark .logo-title { font-size: 56px; letter-spacing: 8px; }
    .whist-felt-watermark .logo-subtitle { font-size: 10px; letter-spacing: 6px; }
    .whist-felt-watermark .logo-suit { font-size: 16px; }
    .whist-opp-card { min-width: 124px; padding: 6px 10px; }
    .whist-opp-avatar { width: 38px; height: 38px; }
    .whist-opp-name { font-size: 11px; max-width: 74px; }
    .whist-opp-stats { font-size: 9px; }
    .whist-opp-score { width: 30px; height: 30px; font-size: 12px; }
}

/* ≤700px (telefon): dock jos pe 2 rânduri — MÂNA full-width sus, info + dock compacte dedesubt.
   Așa cărțile au tot rândul (ușor de atins), iar scaunul + dock-ul stau strâns pe rândul de jos. */
@media (max-width: 900px) {
    /* CRITIC (cerere user — „cartile sunt taiate jos"): pe ORICE viewport mobile/tabletă
       (sub 900px), ASCUND corner-br din cărțile din mâna mea. Hand-ul are margin-left
       negativ (cărți suprapuse) → rank-ul bottom-right rotit 180° era acoperit de cartea
       următoare → se vedea „01" în loc de „10", „O" în loc de „Q". Pe mobile pip-ul
       central + corner-tl sunt suficient pentru identificarea cărții. */
    .whist-my-hand .whist-card-corner-br { display: none !important; }
}
@media (max-width: 700px) {
    .whist-player-area {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 2px 10px;           /* gap VERTICAL 2px (era 6px) — TEST + RÂNDUL TĂU se lipesc DE cărți (cerere user) */
        margin: 0 4px 4px;
        padding: 4px 8px 6px;    /* padding-top 4px (era 6px) — cărțile mai sus în panou */
        border-radius: 12px;
    }
    /* ── DOCK calculat: rând1 = mâna (60% înălțime dock); rând2 = scaun + acțiuni (50/50) ── */
    .whist-my-hand {
        order: 1;
        flex: 0 0 100%;
        width: 100%;
        min-height: 88px;
        padding: 0;
        margin-bottom: 0 !important;   /* zero space între cărți și rândul de jos */
    }
    .whist-my-hand .whist-card { width: 56px; height: 80px; margin-left: -17px; }
    .whist-my-hand .whist-card:first-child { margin-left: 0; }

    .whist-my-info {
        order: 2;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: none;
        align-self: stretch;          /* aceeași înălțime cu dock-ul de acțiuni */
        padding: 5px 8px;
        gap: 6px;
    }
    .whist-my-meta { min-width: 0; flex: 1; }
    .whist-my-name { font-size: 11px; }
    /* FIX overlap: stats STIVUITE pe 2 linii (nu mai e rândul lung nowrap care ieșea sub scor) */
    .whist-my-stats { flex-direction: column; align-items: flex-start; gap: 0; font-size: 8.5px; margin-top: 2px; white-space: nowrap; }
    .whist-my-stats span + span::before { content: none; }   /* fără separatorul · când e stivuit */
    .whist-my-stats b { font-size: 9.5px; margin-left: 3px; }
    .whist-my-avatar { width: 36px; height: 36px; }
    .whist-my-scorewrap { gap: 0; flex-shrink: 0; }
    .whist-my-score { width: 28px; height: 28px; font-size: 12px; }
    .whist-my-score-label { font-size: 6px; }

    .whist-player-dock {
        order: 3;
        flex: 1 1 0;                  /* împarte rândul 2 egal cu scaunul */
        min-width: 0;
        width: auto;
        align-self: stretch;
        padding: 5px 7px;
        gap: 4px;
    }
    .whist-dock-turn { line-height: 1.1; }
    .whist-dock-turn .whist-turn-mine,
    .whist-dock-turn .whist-turn-other,
    .whist-dock-turn .whist-turn-info { font-size: 10px; padding: 2px 7px; max-width: 100%; }
    /* gameinfo COMPACT pe UN singur rând NOWRAP (ATU + rundă + timer inline) — era 52px pe 2 linii */
    .whist-dock-gameinfo { flex-direction: row; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 5px; }
    .whist-dock-atu { flex-direction: row; align-items: center; gap: 3px; }
    .whist-dock-atu-label { font-size: 7.5px; }
    .whist-dock-atu-sym { font-size: 12px; }
    .whist-dock-round { font-size: 8px; padding: 1px 4px; white-space: nowrap; }
    /* timer-pill inline mic (nu badge mare care strica rândul) */
    .whist-timer-pill { padding: 1px 6px; gap: 2px; }
    .whist-timer-text { font-size: 11px; }
    .whist-timer-icon { font-size: 10px; }
    .whist-dock-tools { gap: 4px; flex-wrap: nowrap; }
    .whist-dock-btn { width: 25px; height: 25px; font-size: 11px; }

    /* ═══════════════════════════════════════════════════════════════
       REDESIGN MOBIL 2026 — ADVERSARI ca PUCKS VERTICALE COMPACTE pe margini.
       Pe telefon portret panourile late aglomerau masa și se suprapuneau cu
       licitarea/cărțile. Acum: avatar + scor-badge pe el + nume/stats mici
       dedesubt; VEST & EST lipite de margini (verticale), NORD sus-centru
       (orizontal). Centrul rămâne complet liber → mâna = ROMB central lizibil. */

    /* puck compact vertical (vest & est) */
    .whist-opponent .whist-opp-card {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 7px 7px 5px;
        min-width: 0;
        width: auto;
        background: linear-gradient(160deg, rgba(28, 18, 42, 0.82), rgba(16, 10, 26, 0.82));
        border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.28);
        border-radius: 14px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
        position: relative;
    }
    .whist-opp-avatar { width: 36px; height: 36px; margin: 0; flex: 0 0 auto; }
    .whist-opp-meta { align-items: center; min-width: 0; gap: 2px; }
    .whist-opp-name { font-size: 9.5px; max-width: 86px; text-align: center; line-height: 1.1; opacity: 0.92; }
    /* SCOR ca badge PILL pe avatar (colț dreapta-sus) — pill (nu cerc fix) ca să încapă și scoruri
       de 3 cifre (100+) fără să depășească chenarul (cerere user — scorurile la whist pot fi mari). */
    .whist-opp-score {
        position: absolute; top: -5px; right: -5px; left: auto;
        min-width: 22px; width: auto; height: 22px; padding: 0 5px; font-size: 11px;
        border: 2px solid var(--whist-gold, var(--whist-gold, #ffd700)); border-radius: 11px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); z-index: 3;
    }
    /* stats compacte: doar licitare + mâini; ascund 'cărți rămase' + chip-stack vechi */
    .whist-opp-stats { font-size: 8.5px; gap: 4px; justify-content: center; flex-wrap: nowrap; }
    .whist-opp-stats b { font-size: 9.5px; }
    .whist-opp-cards { display: none; }
    .whist-avatar-chip-stack { display: none; }
    .whist-opp-back-hand { transform: translateX(-50%) translateY(-2px) scale(0.78); opacity: 0.85; }
    /* Centrare strictă față de puck — pe mobile, oponenții sunt verticale, back-hand-ul rămâne sub puck */
    .whist-opp-north .whist-opp-back-hand { transform: translateX(-50%) translateY(-2px) scale(0.78); }
    .whist-opp-west .whist-opp-back-hand,
    .whist-opp-east .whist-opp-back-hand { transform: translateX(-50%) translateY(-2px) scale(0.72); top: 100%; }

    /* POZIȚII: nord sus-centru (orizontal), vest/est lipite de margini la mijloc vertical */
    .whist-opp-north { top: 8px; left: 50%; right: auto; transform: translateX(-50%); }
    .whist-opp-west { top: 50%; left: 1px; right: auto; transform: translateY(-50%); }
    .whist-opp-east { top: 50%; right: 1px; left: auto; transform: translateY(-50%); }
    /* FIX (verificat iframe 390×844): la 5-6 jucători, nw/ne rămâneau pe pozițiile de bază
       (left/right 22%), prea aproape de „north" (center) → cele 3 scaune de sus se suprapuneau.
       Acum nw/ne în colțurile de sus + chip cap 104px → 0 suprapuneri, 0 ieșit din ecran. */
    .whist-opp-nw { top: 8px; left: 2px; right: auto; transform: none; }
    .whist-opp-ne { top: 8px; right: 2px; left: auto; transform: none; }
    .whist-opponent .whist-opp-card { min-width: 0; max-width: 92px; }
    .whist-opp-name { max-width: 86px; }
    /* nord VERTICAL ca toate celelalte (cerere user — „totul la linie") — consecvent + scor badge în colț */
    .whist-opp-north .whist-opp-card { flex-direction: column; align-items: center; gap: 2px; padding: 7px 7px 5px; }
    .whist-opp-north .whist-opp-meta { align-items: center; }
    .whist-opp-north .whist-opp-name { text-align: center; max-width: 86px; }
    .whist-opp-north .whist-opp-score { position: absolute; top: -5px; right: -5px; left: auto; width: 22px; height: 22px; font-size: 11px; }

    /* CĂRȚI JUCATE — romb central */
    .whist-opp-north .whist-seat-played-card { bottom: -78px; left: 50%; top: auto; transform: translateX(-50%); }
    .whist-opp-west .whist-seat-played-card { left: 64px; right: auto; top: 50%; transform: translateY(-50%); }
    .whist-opp-east .whist-seat-played-card { right: 64px; left: auto; top: 50%; transform: translateY(-50%); }

    /* cărți pe masă MARI ca să umple felt-ul */
    .whist-seat-played-card .whist-card { width: 68px !important; height: 96px !important; }
    /* ROMB clar: cărțile vest/est cu GAP 20px de pucks (clarează badge-ul scor 22px care iese -5 spre exterior) */
    .whist-opp-north .whist-seat-played-card { bottom: -110px !important; }
    .whist-opp-west .whist-seat-played-card { left: 100% !important; right: auto !important; margin-left: 20px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; }
    .whist-opp-east .whist-seat-played-card { right: 100% !important; left: auto !important; margin-right: 20px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; }
    /* față curată + lizibilă: rank mare sus-stânga, suit clar, pip central vizibil, fără colț br */
    .whist-seat-played-card .whist-card-corner-br { display: none !important; }
    .whist-seat-played-card .whist-card-corner-tl { top: 3px !important; left: 5px !important; }
    .whist-seat-played-card .whist-card-rank { font-size: 17px !important; font-weight: 800 !important; line-height: 0.9 !important; }
    .whist-seat-played-card .whist-card-suit-small { font-size: 13px !important; line-height: 0.9 !important; }
    .whist-seat-played-card .whist-card-pip { font-size: 30px !important; opacity: 0.9 !important; }
    /* cărți în MÂNĂ — semne mai lizibile */
    .whist-my-hand .whist-card-rank { font-size: 15px; font-weight: 800; }
    .whist-my-hand .whist-card-suit-small { font-size: 12px; }
    .whist-my-hand .whist-card-pip { font-size: 26px; }
    .whist-bid-area { max-width: 92vw; padding: 7px 11px; }
    .whist-bid-btn { min-width: 40px; height: 40px; font-size: 16px; }
    .whist-bid-title { font-size: 9.5px; }
    .whist-bid-chip { font-size: 9px; padding: 2px 6px; }
    /* Deck/ATU în colțul JOS-dreapta (cerere user: „ne încurcă sus la mobil"). Sus se suprapunea
       cu scaunele nord/nw la 5-6 jucători; jos-STÂNGA se ciocnea cu butonul immersive (⛶).
       Jos-dreapta e liber: east e la mijloc-dreapta (top:50%), cartea mea jucată e jos-CENTRU. */
    .whist-deck { top: auto; bottom: 8px; right: 6px; left: auto; gap: 4px; transform: none; }
    .whist-deck.visible { transform: none; }
    .whist-deck-stack { width: 30px; height: 42px; }
    .whist-deck-card { width: 30px; height: 42px; }
    .whist-deck-card::after { font-size: 12px; }
    .whist-deck-atu { width: 22px; height: 31px; font-size: 14px; }
    .whist-felt-watermark .logo-title { font-size: 42px; letter-spacing: 6px; }
    .whist-felt-watermark .logo-subtitle { font-size: 9px; letter-spacing: 4px; }
    .whist-felt-watermark .logo-suit { font-size: 14px; }
    .whist-felt-watermark .logo-suit-row { gap: 18px; }

    .whist-round-banner { font-size: 14px; padding: 8px 18px; }
    .whist-round-banner-sub { font-size: 9.5px; }
    .whist-premiere-popup { font-size: 15px; padding: 9px 18px; }
    .whist-premiere-popup b { font-size: 19px; }
    .whist-premiere-popup span { font-size: 10px; }
    .whist-felt-spotlight { width: 150px; height: 150px; }
    .whist-emoji-opt { font-size: 19px; }
    .whist-reaction-float { font-size: 34px; }
    /* badge "Joc automat" — ascuns pe mobil (dock-ul de jos spune deja când joci automat, evită aglomerația) */
    .whist-auto-badge { display: none !important; }
    /* CARTEA MEA jucată — 68×96 (consistent cu vest/est/nord), JOS centrată */
    .whist-my-played-card { width: 68px !important; height: 96px !important; bottom: 16px !important; }
    .whist-my-played-card .whist-card { width: 68px !important; height: 96px !important; }
    .whist-my-played-card .whist-card-rank { font-size: 18px !important; font-weight: 800 !important; }
    .whist-my-played-card .whist-card-suit-small { font-size: 14px !important; }
    .whist-my-played-card .whist-card-pip { font-size: 34px !important; }
    .whist-my-played-card .whist-card-corner-br { display: none !important; }
    /* Logo mai mic pe mobile mic — păstrează centrarea, doar reducem font-uri */
    .whist-felt-watermark .logo-title { font-size: 32px !important; letter-spacing: 4px !important; }
    .whist-felt-watermark .logo-subtitle { font-size: 8px !important; letter-spacing: 3px !important; }
    .whist-felt-watermark .logo-suit { font-size: 12px !important; }
    .whist-felt-watermark .logo-suit-row { gap: 14px !important; }
}

/* ≤430px (telefoane mici): și mai compact, ca să încapă totul */
@media (max-width: 430px) {
    /* Cărți în mână la ≤430px: 52×74 (era 42×60 — prea mic, ilizibil pe iPhone 12/13/14) */
    .whist-my-hand .whist-card { width: 52px; height: 74px; margin-left: -16px; }
    .whist-my-info { max-width: 56%; padding: 4px 6px; gap: 5px; }
    .whist-my-avatar { width: 36px; height: 36px; }
    .whist-my-name { font-size: 11px; }
    .whist-my-stats { font-size: 8.5px; }
    .whist-my-score { width: 32px; height: 32px; font-size: 13px; }
    /* puck-uri rămân verticale (din ≤700px), doar ușor mai mici — dar lizibile */
    .whist-opp-avatar { width: 40px; height: 40px; }
    .whist-opp-name { font-size: 8.5px; max-width: 54px; }
    .whist-opp-score { width: 20px; height: 20px; font-size: 10px; }
    .whist-opp-north .whist-opp-score { width: 26px; height: 26px; font-size: 12px; }
    .whist-player-dock { padding: 4px 6px; }
    .whist-dock-btn { width: 24px; height: 24px; font-size: 10px; }
    .whist-bid-btn { min-width: 36px; height: 36px; font-size: 15px; }
    /* cărți jucate rămân lizibile pe telefoane mici (48px, nu 42px) */
    .whist-seat-played-card .whist-card { width: 48px !important; height: 68px !important; }
    .whist-opp-west .whist-seat-played-card { left: 56px; }
    .whist-opp-east .whist-seat-played-card { right: 56px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLETĂ PORTRAIT (701–900px) — cerere user „refacere profesională, fără elemente rupte".
   Cauza bug-ului: grila + sidebar-ascuns sunt ≤900px, dar bottom-bar-ul (mâna full-width) + scaunul
   de jos (avatar 44) erau ≤700px → în 701–900 mâna colapsa la 12px și my-info se umfla la 702px
   (avatar rămas 68px → conținut overflow + clip). Aici aplic bottom-bar-ul corect + scaunul de jos
   (avatar 48 + scor pill) + nume late + scor pill la adversari. Scaunele rămân ORIZONTALE (≤900),
   potrivite pentru lățimea de tabletă. (Verificat live 768×1024 + 820×1180.)
   2026-06-09c FIX: scopat `(orientation: portrait)`. Fără asta blocul se aplica și pe
   TELEFOANELE LANDSCAPE de 701–900px lățime (844×390, 896×414, 800×360, 812×375), unde
   `display:flex !important; flex-wrap:wrap !important` bătea grid-ul landscape (4018, fără
   !important) → mâna pe rândul 1, iar scaunul de jos (my-info) + dock se rupeau pe rândul 2,
   SUB ecran (tăiate). Acum landscape-ul folosește grid-ul lui pe UN rând (my-info|mână|dock). */
@media (min-width: 701px) and (max-width: 900px) and (orientation: portrait) {
    .whist-player-area {
        display: flex !important; flex-wrap: wrap !important;
        align-items: stretch !important; justify-content: center !important; gap: 6px 10px !important;
    }
    .whist-my-hand { order: 1 !important; flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; }
    .whist-my-info { order: 2 !important; flex: 1 1 0 !important; min-width: 0 !important; max-width: 50% !important; width: auto !important; }
    .whist-player-dock { order: 3 !important; flex: 1 1 0 !important; min-width: 0 !important; max-width: 50% !important; width: auto !important; }
    .whist-my-info .whist-my-avatar { width: 48px !important; height: 48px !important; }
    .whist-my-info .whist-my-scorewrap {
        left: 30px !important; right: auto !important; bottom: 2px !important; top: auto !important;
        min-width: 22px !important; width: auto !important; height: 22px !important; padding: 0 5px !important; border-radius: 11px !important;
    }
    .whist-opp-name { max-width: 110px !important; }
    .whist-opp-score { min-width: 21px !important; width: auto !important; padding: 0 5px !important; border-radius: 11px !important; }
}

/* TELEFON LANDSCAPE (înălțime mică, lat) — dock pe UN rând compact, cărți mici,
   ca să încapă felt + dock pe verticala scurtă. Mâna în centru, scaun + dock pe laturi. */
@media (max-height: 500px) and (orientation: landscape) {
    .whist-root {
        grid-template-rows: minmax(0, 1fr) 104px;
        grid-template-columns: 1fr;
        grid-template-areas: "felt" "bottom";
    }
    .whist-sidebar { display: none; }
    /* FIX (verificat live în iframe 844×390): pe flex-row, info+dock se umflau la ~792px fiecare
       (meta + copiii dock-ului fără min-width:0) → mâna colapsa la 12px și ieșea din ecran. Acum
       GRID cu coloane fr + min-width:0 peste tot → info | mână | dock primesc spațiu corect. */
    .whist-player-area {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2.4fr); /* my-info 1.5fr→2fr: loc pt. crest „Keystone" */
        align-items: center;
        padding: 4px 10px;
        gap: 8px;
        margin: 0 4px 4px;
    }
    .whist-my-hand { order: 0; min-width: 0; width: 100%; justify-content: center; min-height: 56px; }
    /* FIX specificitate (verificat live iframe 844×390): .cards-xdense/.cards-dense (3 clase, -34px/-28px)
       băteau `.whist-my-hand .whist-card` (2 clase) → cele 8 cărți se stivuiau pe 42px (pas 6px) în loc de
       evantai. Țintesc explicit clasele de densitate ca -15px (pas 25px → evantai 215px) să câștige. */
    .whist-my-hand .whist-card,
    .whist-my-hand.cards-dense .whist-card,
    .whist-my-hand.cards-xdense .whist-card { width: 40px; height: 56px; margin-left: -15px; }
    .whist-my-hand .whist-card:first-child { margin-left: 0; }
    .whist-my-info { order: 0; min-width: 0; max-width: 100%; overflow: hidden; padding: 4px 8px; gap: 6px; }
    .whist-my-meta { min-width: 0; flex: 0 1 auto; }
    .whist-my-stats { min-width: 0; }
    .whist-my-avatar { width: 34px; height: 34px; }
    .whist-my-name { font-size: 11px; }
    .whist-my-score { width: 30px; height: 30px; font-size: 12px; }
    .whist-player-dock { order: 0; min-width: 0; max-width: 100%; overflow: hidden; padding: 4px 7px; gap: 2px; }
    .whist-dock-turn, .whist-dock-gameinfo, .whist-dock-tools { min-width: 0; max-width: 100%; overflow: hidden; }
    /* dock panel compact pe UN rând scurt (turn + gameinfo inline + tools) ca să încapă în rândul de 92px */
    .whist-dock-turn { font-size: 10px; line-height: 1.1; }
    .whist-dock-turn .whist-turn-mine,
    .whist-dock-turn .whist-turn-other,
    .whist-dock-turn .whist-turn-info { font-size: 9.5px; padding: 1px 6px; max-width: 100%; }
    .whist-dock-gameinfo { flex-direction: row; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 5px; }
    .whist-dock-atu { flex-direction: row; align-items: center; gap: 3px; }
    .whist-dock-atu-label { font-size: 7.5px; }
    .whist-dock-atu-sym { font-size: 12px; }
    .whist-dock-round { font-size: 8px; padding: 1px 4px; white-space: nowrap; }
    .whist-timer-pill { padding: 1px 6px; gap: 2px; }
    .whist-timer-text { font-size: 11px; }
    .whist-timer-icon { font-size: 10px; }
    .whist-dock-tools { gap: 4px; flex-wrap: nowrap; }
    .whist-dock-btn { width: 24px; height: 24px; font-size: 10px; }
    /* FIX (verificat iframe 844×390): chip-uri prea late (168px) → cele 3 de sus se suprapuneau.
       Cap 136px → 0 suprapuneri. */
    /* SCAUNE landscape — chip ORIZONTAL profesional (folosește lățimea): avatar + nume pe toată
       lățimea meta + bid/făcute, scor ca badge-overlay în colț, 🂠 ascuns (redundant cu strip-ul).
       (Verificat live iframe 844×390: 0 suprapuneri, 0 offscreen, doar numele f. lung trunchiat.) */
    .whist-opp-card { min-width: 0; max-width: 140px; padding: 5px 8px; gap: 6px; }
    .whist-opp-avatar { width: 32px; height: 32px; }
    .whist-opp-meta { align-items: flex-start; text-align: left; flex: 1; min-width: 0; gap: 2px; }
    .whist-opp-name { font-size: 9.5px; max-width: 90px; }
    .whist-opp-stats { justify-content: flex-start; gap: 3px; font-size: 8.5px; flex-wrap: nowrap; }
    .whist-opp-cards { display: none; }
    .whist-opp-score {
        position: absolute; top: -6px; right: -6px; left: auto;
        min-width: 21px; width: auto; height: 21px; padding: 0 5px; font-size: 10.5px;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid rgba(var(--whist-deep-rgb, 12, 18, 32), 0.92); border-radius: 11px; z-index: 3;
    }
    .whist-deck { top: auto; bottom: 4px; right: 6px; left: auto; }
    .whist-deck-card { width: 30px; height: 42px; }
    .whist-deck-atu { width: 24px; height: 34px; font-size: 15px; }
    /* Landscape mic: logo discret dar vizibil */
    .whist-felt-watermark { opacity: 0.10; }
    .whist-felt-watermark .logo-title { font-size: 28px; letter-spacing: 3px; }
    .whist-felt-watermark .logo-subtitle, .whist-felt-watermark .logo-suit-row { display: none; }
    /* ── LANDSCAPE FIX-uri suplimentare ── */
    /* badge "Joc automat" ascuns și în landscape (dock-ul deja arată starea) */
    .whist-auto-badge { display: none !important; }
    /* cărți jucate pe felt — mai mici ca să NU cadă peste pucks-urile late orizontal */
    .whist-seat-played-card .whist-card { width: 40px !important; height: 56px !important; }
    .whist-seat-played-card .whist-card-corner-br { display: none !important; }
    .whist-seat-played-card .whist-card-rank { font-size: 13px !important; }
    .whist-seat-played-card .whist-card-suit-small { font-size: 10px !important; }
    .whist-seat-played-card .whist-card-pip { font-size: 22px !important; }
    .whist-my-played-card { width: 42px !important; height: 58px !important; bottom: 4px !important; }
    .whist-my-played-card .whist-card { width: 42px !important; height: 58px !important; }
    .whist-my-played-card .whist-card-rank { font-size: 13px !important; }
    .whist-my-played-card .whist-card-pip { font-size: 22px !important; }
    /* poziții cărți jucate: distanță mai mare de panou ca să nu cadă peste el */
    .whist-opp-north .whist-seat-played-card { bottom: -62px !important; }
    .whist-opp-east .whist-seat-played-card { left: -50px !important; top: 50% !important; transform: translateY(-50%) !important; }
    .whist-opp-west .whist-seat-played-card { right: -50px !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; }
}

/* Garduri anti-overflow — pe NICIUN ecran masa nu trebuie să facă scroll orizontal */
.whist-root { max-width: 100vw; }
.whist-player-area { box-sizing: border-box; max-width: 100%; }
.whist-my-hand { max-width: 100%; }
.whist-bid-area { max-width: min(380px, 94vw); }

/* ═══════════════════════════════════════════════════════════
   SCOREBOARD — istoric runde + ranking live + ATU history
   ═══════════════════════════════════════════════════════════ */
.whist-sb-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(8, 4, 18, 0.78);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: none; align-items: center; justify-content: center;
    padding: 16px; opacity: 0; transition: opacity 0.22s ease;
}
.whist-sb-overlay.active { display: flex; opacity: 1; }
.whist-sb-card {
    width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto;
    background: linear-gradient(135deg, rgba(38, 25, 64, 0.96) 0%, rgba(20, 12, 38, 0.97) 100%);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #fff7e0;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    padding: 18px 18px 14px;
}
.whist-sb-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.whist-sb-title { font-size: 17px; font-weight: 800; color: var(--whist-gold, var(--whist-gold, #ffd700)); flex: 1; }
.whist-sb-meta { font-size: 12px; opacity: 0.8; }
.whist-sb-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06); color: var(--whist-text-strong, #fff); font-size: 18px; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.whist-sb-close:hover { background: rgba(255, 255, 255, 0.12); }

/* ═══════════════════════════════════════════════════════════════
   HEADER PREMIUM TABELA SCOR (cerere user — „fă modal profesional, redenumește")
   Design casino royale: emblema aurie + titlu Cinzel + meta grid + linie despărțitoare aurie
   ═══════════════════════════════════════════════════════════════ */
.whist-sb-header-pro {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 14px;
    margin: -2px -2px 16px;
    padding: 14px 16px;
    background:
        radial-gradient(ellipse at top, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.10) 0%, transparent 60%),
        linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.06) 0%, rgba(0, 0, 0, 0.25) 100%);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.32);
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 4px 14px rgba(0, 0, 0, 0.4);
    position: relative;
}
.whist-sb-header-pro::after {
    /* linie aurie subtire la baza header-ului */
    content: '';
    position: absolute;
    left: 12%; right: 12%; bottom: -6px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.6) 50%, transparent 100%);
    pointer-events: none;
}
.whist-sb-emblem {
    width: 42px; height: 42px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #ffeb70 0%, var(--whist-gold, #ffd700) 40%, #b8860b 100%);
    border: 1.5px solid rgba(0, 0, 0, 0.5);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.55),
        inset 0 -2px 4px rgba(0, 0, 0, 0.35),
        0 3px 10px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.whist-sb-emblem-icon {
    font-size: 22px;
    color: #1a1a1a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    line-height: 1;
}
.whist-sb-titlewrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.whist-sb-title-pro {
    font-family: 'Cinzel', 'Bebas Neue', serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 2.5px;
    color: var(--whist-gold, var(--whist-gold, #ffd700));
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.7),
        0 0 14px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.35);
    background: linear-gradient(180deg, #fff2a8 0%, var(--whist-gold, #ffd700) 50%, #b8860b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}
.whist-sb-subtitle {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 247, 224, 0.62);
    font-weight: 600;
}
.whist-sb-meta-pro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.25);
    border-radius: 8px;
    text-align: right;
    min-width: 72px;
}
.whist-sb-meta-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-family: 'Inter', system-ui, sans-serif;
}
.whist-sb-meta-label {
    font-size: 9px;
    letter-spacing: 1.2px;
    color: rgba(255, 247, 224, 0.55);
    font-weight: 700;
}
.whist-sb-meta-value {
    font-family: 'Cinzel', 'Bebas Neue', serif;
    font-size: 14px;
    font-weight: 800;
    color: var(--whist-gold, var(--whist-gold, #ffd700));
    line-height: 1;
}
.whist-sb-meta-tot {
    font-size: 11px;
    opacity: 0.55;
    color: rgba(255, 247, 224, 0.7);
    margin-left: 2px;
}
@media (max-width: 480px) {
    .whist-sb-header-pro { grid-template-columns: auto 1fr auto; padding: 10px 12px; gap: 10px; }
    .whist-sb-meta-pro { display: none; }   /* meta ascunsă pe mobil mic — runda apare în statusbar oricum */
    .whist-sb-emblem { width: 36px; height: 36px; }
    .whist-sb-emblem-icon { font-size: 18px; }
    .whist-sb-title-pro { font-size: 15px; letter-spacing: 1.8px; }
    .whist-sb-subtitle { font-size: 9.5px; letter-spacing: 1px; }
}

/* Podium ranking */
.whist-sb-podium { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px;
    padding: 10px 12px; background: rgba(0, 0, 0, 0.25); border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06); }
.whist-sb-rank { display: flex; align-items: center; gap: 10px; padding: 4px 6px; font-size: 13px; border-radius: 6px; }
.whist-sb-rank.me { background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.12); border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.3); }
.whist-sb-rank-pos { width: 24px; text-align: center; font-size: 15px; font-weight: 800; flex-shrink: 0; }
.whist-sb-rank-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Avatar pill: img sau initial circle */
.whist-sb-av {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background-size: cover; background-position: center;
    flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--whist-text-strong, #fff);
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    border: 1.5px solid rgba(255,255,255,.18);
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.whist-sb-av-fallback { letter-spacing: 0.5px; }
.whist-sb-rank-name em { color: var(--whist-gold, var(--whist-gold, #ffd700)); font-style: normal; font-size: 11px; }
.whist-sb-rank-score { font-weight: 800; color: var(--whist-gold, var(--whist-gold, #ffd700)); font-variant-numeric: tabular-nums; }

/* Table */
.whist-sb-table { background: rgba(0, 0, 0, 0.20); border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 12px; }
/* Scop la .whist-sb-table (modal) + coloane DINAMICE = nr. jucători (era hardcodat 4 → spart la 3/5/6P).
   Selector mai specific decât `.whist-sb-row` de la sidebar (5182) → câștigă pt. rândurile modalului. */
.whist-sb-table .whist-sb-row { display: grid; grid-template-columns: 28px 24px repeat(var(--whist-sb-cols, 4), 1fr); gap: 2px;
    padding: 5px 4px; font-size: 11px; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.whist-sb-row:last-child { border-bottom: none; }
.whist-sb-row.whist-sb-head { background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.08); font-weight: 700;
    color: var(--whist-gold, var(--whist-gold, #ffd700)); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
.whist-sb-row-live { background: rgba(74, 222, 128, 0.06); border-top: 1px solid rgba(74, 222, 128, 0.25); }
.whist-sb-c-rd { text-align: center; font-weight: 700; opacity: 0.7; }
.whist-sb-c-atu { text-align: center; font-size: 14px; font-weight: 800; line-height: 1; }
.whist-sb-c-player { text-align: center; font-weight: 600; opacity: 0.85; padding: 0 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whist-sb-c-player.me { color: var(--whist-gold, var(--whist-gold, #ffd700)); }
.whist-sb-c-cell { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 2px 0;
    border-radius: 5px; line-height: 1.1; position: relative; }
/* FĂCUT licitarea (bid == mâini) — VERDE clar + bordură + bifă ✓ (cerere user: „să se vadă
   distinctiv când și-a făcut ce a licitat"). RATAT — ROȘU clar + ✕. */
.whist-sb-c-cell.hit {
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.30), rgba(74, 222, 128, 0.12));
    box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.55); color: #dcfce7;
}
.whist-sb-c-cell.hit .whist-sb-pt { color: #4ade80; font-weight: 800; opacity: 1; }
.whist-sb-c-cell.hit::after {
    content: '✓'; position: absolute; top: -1px; right: 2px; font-size: 8px; line-height: 1;
    color: #4ade80; font-weight: 900; text-shadow: 0 0 4px rgba(74, 222, 128, 0.6);
}
.whist-sb-c-cell.miss {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.26), rgba(248, 113, 113, 0.09));
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.45); color: #fee2e2;
}
.whist-sb-c-cell.miss .whist-sb-pt { color: #f87171; font-weight: 800; opacity: 1; }
.whist-sb-c-cell.miss::after {
    content: '✕'; position: absolute; top: -1px; right: 2px; font-size: 7px; line-height: 1;
    color: #f87171; font-weight: 900; opacity: 0.85;
}
.whist-sb-c-cell.live { background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.10); color: #fde68a; }
.whist-sb-bw { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.whist-sb-pt { font-size: 9px; opacity: 0.8; font-variant-numeric: tabular-nums; }

/* ATU strip */
.whist-sb-atu-strip { display: flex; align-items: center; gap: 6px; padding: 8px 10px;
    background: rgba(0, 0, 0, 0.20); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap; }
.whist-sb-atu-label { font-size: 10px; opacity: 0.7; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; margin-right: 4px; }
.whist-sb-atu-mini { font-size: 14px; font-weight: 800; min-width: 16px; text-align: center; }

/* Mobile compact */
@media (max-width: 480px) {
    .whist-sb-card { padding: 14px 14px 12px; }
    .whist-sb-table .whist-sb-row { grid-template-columns: 24px 22px repeat(var(--whist-sb-cols, 4), 1fr); padding: 4px 3px; font-size: 10px; }
    .whist-sb-bw { font-size: 10px; } .whist-sb-pt { font-size: 8px; }
    .whist-sb-title { font-size: 16px; } .whist-sb-meta { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL LICITARE PROFESIONAL UNIFICAT (cerere user)
   Totul într-un singur panou. NU mai apar chip-uri pe avatari / banner Σ
   centrat / hint separat / toast — totul în interiorul `.whist-bid-area`.
   Structură: Header + Live Table + Action + Footer.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   PANEL LICITARE — poziționat SUB avatarul de sus (top: 80px), încap NATURAL
   în safe-zone de 280px (verificat live). Width 420px, height auto cap la 280.
   Cu BUTOANE 0-7 și toate secțiunile vizibile: ~280px (testat 8 butoane).
   ═══════════════════════════════════════════════════════════════════════════ */
.whist-bid-area {
    position: absolute !important;
    top: 80px !important;            /* SUB avatarul de sus (avatar ends y=74) */
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    /* FIX BUG #3 CSS (audit): `!important` pe transform BLOCA animația `whist-bid-emerge`
       (rotateX/scale) → panoul nu mai avea efect 3D emerge. Eliminat — left:50% + animation
       inițială setează transform corect, anim poate sub-suprascrie pentru emerge. */
    transform: translateX(-50%);
    margin: 0 !important;

    width: 420px !important;
    min-width: 420px !important;
    max-width: 420px !important;
    height: auto !important;
    /* FIX ROBUST (butoanele se tăiau jos pe ecrane scurte): max-height RELATIV la felt → panoul
       se încadrează MEREU în felt; tabelul jucătorilor scrollează intern → header + butoane + footer vizibile. */
    max-height: calc(100% - 92px) !important;
    /* FIX (cerere user — „licitarea iese din chenar cu mai mulți jucători"): era `visible` →
       conținutul (tabel jucători + butoanele 0-8 + nota ultim-licitator) depășea 280px și se
       revărsa sub felt. Acum `hidden` + tabelul jucătorilor scrollează intern (vezi .whist-bidp-table)
       → header-ul, butoanele de bid și footer-ul rămân MEREU vizibile, indiferent de câți jucători. */
    overflow: hidden !important;
    gap: 5px !important;
    padding: 8px 12px !important;

    /* ADAPTIV LA FELT (cerere user: „licitarea nu ține cont de tema masă 🎨") — panoul preia
       culoarea LIVE a feltului (WhistThemeSync setează --whist-panel-felt-1/2/3 din .whist-table-area)
       → verde/albastru/roșu/mov/light, panoul se potrivește mereu. Accentul auriu rămâne premium. */
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.10), transparent 55%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--whist-panel-felt-1, #1e6a3a) 78%, #000 22%) 0%,
            color-mix(in srgb, var(--whist-panel-felt-2, #14502b) 82%, #000 18%) 45%,
            color-mix(in srgb, var(--whist-panel-felt-3, #0a2d1a) 86%, #000 14%) 100%) !important;
    border: 1.5px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.45) !important;
    border-radius: 16px !important;
    box-shadow:
        0 26px 64px rgba(0, 0, 0, 0.70),
        0 6px 18px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.20),
        0 0 30px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.12) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    z-index: 100 !important;
}
/* linie de lumină aurie sus (ca dock-ul cockpit) */
.whist-bid-area::before {
    content: '' !important; position: absolute; top: 0; left: 16%; right: 16%; height: 1px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.85), rgba(var(--whist-gold-rgb, 255, 215, 0), 0.95), rgba(var(--whist-gold-rgb, 255, 215, 0), 0.85), transparent);
    box-shadow: 0 0 8px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.5); pointer-events: none; z-index: 2;
}
/* TITLU metalic auriu (ca numele din crest) */
.whist-bidp-title-txt {
    background: linear-gradient(180deg, var(--whist-gold-light, #ffeaa8) 0%, var(--whist-gold, #ffd700) 48%, var(--whist-gold-deep, var(--whist-gold-deep, #d97706)) 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.6)); letter-spacing: 1.5px !important;
}
/* rândul curentului-licitator — glow auriu mai clar */
.whist-bidp-row.current {
    background: linear-gradient(90deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.16), rgba(var(--whist-gold-rgb, 255, 215, 0), 0.04)) !important;
    box-shadow: inset 3px 0 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.9), 0 0 14px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.12) !important;
}
/* BUTOANE bid = giuvaiere (cohesiv cu scorul din crest); sugestia AI = giuvaer auriu */
.whist-bid-btn {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--whist-text-strong, #fff) !important;
}
.whist-bid-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.22), rgba(var(--whist-gold-rgb, 255, 215, 0), 0.08)) !important;
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.6) !important; box-shadow: 0 0 16px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.30) !important; transform: translateY(-2px) !important;
}
.whist-bid-btn.suggested {
    background: linear-gradient(135deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.30), rgba(var(--whist-gold-deep-rgb, 217, 119, 6), 0.16)) !important;
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.70) !important;
    box-shadow: inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.40), 0 0 16px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.22) !important; color: var(--whist-gold, #ffd700) !important;
}
/* Mobile fallback */
@media (max-width: 460px) {
    .whist-bid-area { width: 94vw !important; min-width: 0 !important; max-width: 94vw !important; padding: 8px 10px !important; }
}

/* TELEFON LANDSCAPE — bid panel: regula globală de mai sus (top:80px, max-height:280px) e prea
   joasă pentru felt-ul scurt din landscape → header + listă + butoanele 0-8 + footer depășeau 246px
   și cădeau SUB / în spatele dock-ului (nu puteai licita în landscape). Ancorez panoul sus (top:4px),
   las înălțimea naturală, plafonez DOAR lista de jucători (scrollabilă) → tot panoul încape DEASUPRA
   dock-ului, butoane mereu vizibile. NU ating `transform` (păstrez translateX global → animația emerge
   rămâne intactă). Trebuie după regula globală (source-order) + !important ca să câștige. (Verificat live iframe 844×390.) */
@media (max-height: 500px) and (orientation: landscape) {
    .whist-bid-area {
        top: 4px !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 5px 16px !important;
        gap: 2px !important;
    }
    .whist-bidp-table { max-height: 40px !important; overflow-y: auto !important; }
    .whist-bidp-header { gap: 2px !important; }
}

/* HEADER COMPACT — title + meta inline + status pe rând separat */
.whist-bidp-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.22);
}
.whist-bidp-title {
    display: flex; align-items: center; gap: 6px;
}
.whist-bidp-title-txt {
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.8px;
    color: var(--whist-gold, #ffd700);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 8px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.25);
    text-transform: uppercase;
}
.whist-bidp-title-icon { font-size: 13px; }
.whist-bidp-meta {
    display: flex; flex-wrap: wrap; gap: 3px; margin-left: auto;
}
.whist-bidp-meta-pill {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px;
    font-size: 9px; font-weight: 700;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 99px;
    color: var(--whist-text-mid, #cbd5e1);
}
.whist-bidp-meta-pill b { color: var(--whist-text-strong, #fff); font-size: 10px; }
.whist-bidp-meta-pill.atu {
    background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.14);
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55);
    font-weight: 800;
}
.whist-bidp-meta-pill.no-atu { opacity: 0.6; }

.whist-bidp-status {
    align-self: flex-start;
    padding: 1px 8px;
    font-size: 9px; font-weight: 800;
    border-radius: 99px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.whist-bidp-status.mine {
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.95), rgba(34, 197, 94, 0.85));
    color: #062c14;
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.4);
    animation: whist-bidp-mine-pulse 1.4s ease-in-out infinite;
}
@keyframes whist-bidp-mine-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(74, 222, 128, 0.4); }
    50% { box-shadow: 0 2px 16px rgba(74, 222, 128, 0.8); }
}
.whist-bidp-status.wait {
    background: rgba(91, 141, 239, 0.18);
    border: 1px solid rgba(91, 141, 239, 0.4);
    color: #93c5fd;
}
.whist-bidp-status.done {
    background: linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.95), rgba(218, 165, 32, 0.85));
    color: #4a3608;
    box-shadow: 0 2px 8px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.35);
}

/* LIVE TABLE — rânduri compacte */
.whist-bidp-table {
    width: 100%;
    display: flex; flex-direction: column;
    gap: 2px;
    /* Partea care crește cu numărul de jucători → o facem scrollabilă intern, ca secțiunile
       fixe (header, butoane bid, footer) să rămână vizibile indiferent de câți jucători sunt.
       min-height:0 e necesar ca flex item-ul să poată scădea sub înălțimea conținutului. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.45) transparent;
}
.whist-bidp-table::-webkit-scrollbar { width: 5px; }
.whist-bidp-table::-webkit-scrollbar-thumb { background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4); border-radius: 3px; }
.whist-bidp-table::-webkit-scrollbar-track { background: transparent; }
/* Secțiunile fixe ale panoului NU se micșorează — doar tabelul jucătorilor scrollează */
.whist-bidp-header, .whist-bidp-action, .whist-bidp-footer { flex-shrink: 0; }
.whist-bidp-row {
    display: grid;
    grid-template-columns: 16px 1fr 32px;
    align-items: center;
    gap: 8px;
    padding: 2px 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 11px;
    transition: background 0.22s, border-color 0.22s, transform 0.22s;
}
.whist-bidp-row.waiting {
    opacity: 0.55;
}
.whist-bidp-row.current {
    background: rgba(91, 141, 239, 0.16);
    border-color: rgba(91, 141, 239, 0.55);
    box-shadow: 0 0 12px rgba(91, 141, 239, 0.25);
    animation: whist-bidp-row-current 1.4s ease-in-out infinite;
}
@keyframes whist-bidp-row-current {
    0%, 100% { box-shadow: 0 0 12px rgba(91, 141, 239, 0.25); }
    50% { box-shadow: 0 0 18px rgba(91, 141, 239, 0.55); }
}
.whist-bidp-row.done {
    background: rgba(74, 222, 128, 0.10);
    border-color: rgba(74, 222, 128, 0.35);
}
.whist-bidp-row.me {
    border-left: 3px solid var(--whist-gold, #ffd700);
}
.whist-bidp-row-status {
    font-size: 12px; text-align: center;
    color: rgba(255, 255, 255, 0.7);
}
.whist-bidp-row.done .whist-bidp-row-status { color: #4ade80; font-weight: 800; }
.whist-bidp-row.current .whist-bidp-row-status { color: #93c5fd; font-weight: 800; }
.whist-bidp-row-name {
    font-weight: 600;
    color: var(--whist-text, #f1f5f9);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.whist-bidp-row-name em {
    font-style: normal; color: var(--whist-gold, #ffd700); font-weight: 800; font-size: 10px;
    background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.15);
    padding: 1px 5px; border-radius: 99px; margin-left: 4px;
}
.whist-bidp-row-bid {
    font-family: 'Cinzel', serif;
    font-size: 14px; font-weight: 800;
    text-align: center;
    color: var(--whist-text-strong, #fff);
    line-height: 1;
}
.whist-bidp-row.waiting .whist-bidp-row-bid { color: rgba(255, 255, 255, 0.3); }
.whist-bidp-row.done .whist-bidp-row-bid { color: #4ade80; }

/* ACTION COMPACT — buton + hint */
.whist-bidp-action {
    width: 100%;
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 4px 0 0;
    border-top: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.22);
}
.whist-bidp-action-label {
    font-size: 11px;
    color: var(--whist-text, #f1f5f9);
    font-weight: 700;
    display: flex; align-items: center; justify-content: space-between;
    letter-spacing: 0.3px;
}
.whist-bidp-hint {
    font-size: 9px;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.14);
    padding: 2px 7px;
    border-radius: 99px;
    border: 1px solid rgba(251, 191, 36, 0.45);
    font-weight: 700;
}
.whist-bidp-hint b { color: var(--whist-text-strong, #fff); }
/* Stare „se împart cărțile" — afișată în loc de butoanele de bid cât timp mâna nu e încă
   vizibilă (cărțile se împart). Butoanele apar automat după ce împărțirea se termină. */
.whist-bidp-action-label.whist-bidp-dealing {
    justify-content: center;
    gap: 8px;
    color: #fcd34d;
    padding: 6px 0;
    animation: whist-bidp-dealing-pulse 1.1s ease-in-out infinite;
}
.whist-bidp-action-label.whist-bidp-dealing span {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0;
}
@keyframes whist-bidp-dealing-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Buton suggestion — steluță pe butonul recomandat */
.whist-bid-btn.suggested {
    border-color: rgba(251, 191, 36, 0.85) !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5) !important;
    position: relative;
}
.whist-bidp-hint-star {
    position: absolute;
    top: -8px; right: -8px;
    font-size: 12px;
    background: #fbbf24;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    animation: whist-bidp-star-pulse 1.2s ease-in-out infinite;
}
@keyframes whist-bidp-star-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* FOOTER COMPACT — Σ Total */
.whist-bidp-footer {
    width: 100%;
    display: flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.32);
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    transition: background 0.35s, border-color 0.35s;
}
.whist-bidp-sum-icon {
    font-size: 14px;
    font-weight: 800;
    color: var(--whist-text-mid, #cbd5e1);
    min-width: 14px;
}
.whist-bidp-sum-val {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
}
.whist-bidp-sum-val b {
    color: var(--whist-text-strong, #fff);
    font-size: 14px;
    margin-right: 2px;
}
.whist-bidp-sum-label {
    flex: 1;
    color: rgba(255, 255, 255, 0.70);
    font-size: 9px;
    text-align: right;
    font-style: italic;
    font-weight: 600;
}
.whist-bidp-footer.exact {
    background: linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.20), rgba(218, 165, 32, 0.12));
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55);
}
.whist-bidp-footer.exact .whist-bidp-sum-icon,
.whist-bidp-footer.exact .whist-bidp-sum-val b { color: var(--whist-gold, #ffd700); }
.whist-bidp-footer.exact .whist-bidp-sum-label { color: #fde68a; font-style: normal; font-weight: 700; }
.whist-bidp-footer.over {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.35);
}
.whist-bidp-footer.over .whist-bidp-sum-icon { color: #f87171; }
.whist-bidp-footer.under {
    background: rgba(74, 222, 128, 0.10);
    border-color: rgba(74, 222, 128, 0.35);
}
.whist-bidp-footer.under .whist-bidp-sum-icon { color: #4ade80; }

/* Note "ești ultimul" — compact */
.whist-bid-note {
    font-size: 9px;
    color: #fef3c7;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 5px;
    padding: 3px 8px;
    text-align: center;
}
.whist-bid-note b { color: #fbbf24; }

/* OVERRIDE BUTOANE pentru noul panou — fix dimensiune compactă + dezactivez cascada anim
   care făcea buton 15px (50% scale stuck în delay backwards) */
.whist-bid-area.whist-bid-emerge .whist-bid-btns .whist-bid-btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
.whist-bid-area .whist-bid-btn {
    min-width: 36px;
    height: 30px;
    font-size: 13px;
    padding: 0 6px;
    border-radius: 7px;
}
.whist-bid-area .whist-bid-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

/* Banner Σ centrat ELIMINAT (info acum în footer-ul panoului) */
.whist-bid-summary,
#whistBidSummary { display: none !important; }

/* Chip-uri jeton pe avatari ELIMINATE (info acum în LIVE TABLE) */
.whist-avatar-chip-stack { display: none !important; }

/* DEAD: vechiul `whist-bid-progress` (rândul cu chip-uri din panel vechi) */
.whist-bid-progress { display: none !important; }
.whist-bid-progress + .whist-bid-progress { display: none !important; }

/* Mobile compact */
@media (max-width: 480px) {
    .whist-bid-area { min-width: 280px; padding: 10px 12px !important; }
    .whist-bidp-row { font-size: 11px; padding: 4px 6px; }
    .whist-bidp-row-bid { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZONA SUD — CASINO ROYALE PROFESIONAL (cerere user — testat live + confirmat)
   Grid 3 col: avatar zone | hand | dock, toate înălțime uniformă 96px,
   ambele card-uri stretched la full grid column (fără spațiu rămas).
   Avatar cu ring conic auriu (timer ring), score badge auriu casino-grade
   pe avatar (în loc de coloană separată), chip-uri Bid/Făcute colorate inline.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE FINAL — sistem unic, ordonat de la desktop la mobile mic
   PRINCIPIU: regulile cu !important sunt prinse în media query-ul lor
   ca să NU se bată cu cele de viewport mai mic. Nu mai există duplicate.
   ═══════════════════════════════════════════════════════════════ */

/* DESKTOP MARE (≥1024px) — bottom-row pe 3 coloane fixe 290px | 1fr | 290px */
@media (min-width: 1024px) {
    .whist-bottom-row, .whist-player-area {
        display: grid !important;
        grid-template-columns: 290px minmax(0, 1fr) 290px !important;
        gap: 12px !important;
        padding: 10px 14px !important;
        align-items: stretch !important;
    }
}

/* TABLETĂ LANDSCAPE (901–1023px) — bottom-row pe 3 coloane mai compacte 240px | 1fr | 240px */
@media (min-width: 901px) and (max-width: 1023px) {
    .whist-bottom-row, .whist-player-area {
        display: grid !important;
        grid-template-columns: 240px minmax(0, 1fr) 240px !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        align-items: stretch !important;
    }
    .whist-my-info, .whist-player-dock { min-height: 80px !important; padding: 8px 10px !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   6 JUCĂTORI · rândul de sus (north/nw/ne) — 901–1200px
   La 6J rândul de sus are 3 chip-uri orizontale (168px) care se SUPRAPUNEAU
   când feltul scădea sub ~970px (6px@1100, 27px@1024, 51px@940) + numele lungi
   ('Cristian') se tăiau. FIX: chip VERTICAL (avatar sus, nume pe toată lățimea,
   scor în colț) — exact pattern-ul folosit la ≤480 (≈linia 3859). 3 chip-uri
   verticale (~118px) încap fără suprapunere pe tot range-ul, iar numele primesc
   lățimea completă. Scopat 901–1200 (≤900 are layout-ul mobil propriu).
   Verificat în harness 900–1200px / 6J: 0 suprapuneri, 0 trunchieri.
   Limita 900 (nu 901) închide „zona moartă" de 1px de la granița 900/901 unde,
   pe ecrane cu DPR fracționar (ex. 1.25), lățimea reală 900.x rata AMBELE
   `min-width:901` și `max-width:900` → chip-urile reveneau la orizontal suprapus. */
@media (min-width: 900px) and (max-width: 1200px) {
    .whist-root-6p .whist-opp-north .whist-opp-card,
    .whist-root-6p .whist-opp-ne .whist-opp-card,
    .whist-root-6p .whist-opp-nw .whist-opp-card {
        flex-direction: column;
        align-items: center;
        gap: 3px;
        width: auto;
        min-width: 102px;
        max-width: 124px;
        padding: 8px 11px 7px;
    }
    .whist-root-6p .whist-opp-north .whist-opp-meta,
    .whist-root-6p .whist-opp-ne .whist-opp-meta,
    .whist-root-6p .whist-opp-nw .whist-opp-meta { align-items: center; width: 100%; }
    .whist-root-6p .whist-opp-north .whist-opp-name,
    .whist-root-6p .whist-opp-ne .whist-opp-name,
    .whist-root-6p .whist-opp-nw .whist-opp-name { max-width: 110px; text-align: center; font-size: 11.5px; }
    .whist-root-6p .whist-opp-north .whist-opp-stats,
    .whist-root-6p .whist-opp-ne .whist-opp-stats,
    .whist-root-6p .whist-opp-nw .whist-opp-stats { justify-content: center; flex-wrap: nowrap; }
    .whist-root-6p .whist-opp-north .whist-opp-score,
    .whist-root-6p .whist-opp-ne .whist-opp-score,
    .whist-root-6p .whist-opp-nw .whist-opp-score { position: absolute; top: -9px; right: -9px; margin: 0; }
}

/* Mobile mic ≤480px — compactare TOTAL, fără spații goale, fără ascunderi.
   Hand 46×64 → ranks 12px/suit 10px/pip 22px proporționate. */
@media (max-width: 480px) {
    /* rând jos 222px (era 200): mâna (96) + scaun/dock (106) depășeau 200 → scaunul de jos ieșea sub
       player-area. 222 folosește spațiul gol de sub masă (până la status bar) + încadrează tot. (cerere user) */
    .whist-root { grid-template-rows: minmax(0, 1fr) 222px !important; }
    .whist-bottom-row, .whist-player-area { padding: 4px 6px !important; gap: 5px !important; margin: 2px 3px 3px !important; }
    .whist-my-info { padding: 5px 8px !important; gap: 8px !important; min-height: 76px !important; }
    .whist-my-info .whist-my-avatar { width: 50px !important; height: 50px !important; }
    .whist-my-info .whist-my-scorewrap { width: 30px !important; height: 30px !important; bottom: -6px !important; right: -6px !important; }
    .whist-my-info .whist-my-score { font-size: 13px !important; }
    .whist-my-info .whist-my-name { font-size: 12px !important; }
    .whist-my-info .whist-my-bid, .whist-my-info .whist-my-tricks { font-size: 9px !important; padding: 1px 6px !important; }
    /* CĂRȚI MÂNĂ MĂRITE 58×82 (era 46×64): rândul de jos e acum 222px → zona mâinii are loc, iar cărțile mici
       lăsau spațiu gol. Mai mari = folosesc tot spațiul + lizibile. Step 43px (margin -15) → 8 cărți încap în lățime. (cerere user) */
    .whist-my-hand .whist-card { width: 58px !important; height: 82px !important; margin-left: -15px !important; }
    .whist-my-hand .whist-card:first-child { margin-left: 0 !important; }
    /* Card icons proporționate cu 46×64 — rank 12px / suit 9px / pip 22px.
       ASCUND corner-br pe mobil (cerere user — „cartile sunt taiate jos") pentru că
       suprapunerea negativă a hand-ului (margin-left -13px) lăsa rank-ul bottom-right
       tăiat la "01" în loc de "10". Pe mobile e suficient corner-tl + pip-ul central. */
    .whist-my-hand .whist-card-rank { font-size: 15px !important; }
    .whist-my-hand .whist-card-suit-small { font-size: 12px !important; }
    .whist-my-hand .whist-card-pip { font-size: 30px !important; }
    .whist-my-hand .whist-card-corner-tl { top: 3px !important; left: 4px !important; }
    .whist-my-hand .whist-card-corner-br { display: none !important; }
    .whist-my-hand { min-height: 84px !important; max-height: 92px !important; }
    .whist-player-dock { padding: 5px 8px !important; min-height: 76px !important; }
    .whist-dock-btn { width: 24px !important; height: 24px !important; font-size: 11px !important; }
    .whist-turn-mine, .whist-turn-other { font-size: 10px !important; }
    .whist-dock-atu, .whist-dock-round, .whist-timer-pill { padding: 1px 5px !important; font-size: 9px !important; }
    /* Cărți jucate pe felt — proporționate cu cărți mici 46×64 */
    .whist-seat-played-card .whist-card { width: 44px !important; height: 62px !important; }
    .whist-seat-played-card .whist-card-rank { font-size: 13px !important; }
    .whist-seat-played-card .whist-card-suit-small { font-size: 10px !important; }
    .whist-seat-played-card .whist-card-pip { font-size: 22px !important; }
    .whist-my-played-card { width: 44px !important; height: 62px !important; }
    .whist-my-played-card .whist-card { width: 44px !important; height: 62px !important; }
    .whist-my-played-card .whist-card-rank { font-size: 14px !important; }
    .whist-my-played-card .whist-card-suit-small { font-size: 10px !important; }
    .whist-my-played-card .whist-card-pip { font-size: 24px !important; }
}
/* Mobile mini ≤360px — cele mai mici telefoane (iPhone SE 1st gen, Galaxy Fold închis).
   Hand 40×56 → ranks 11px/suit 8px/pip 20px ca să rămână lizibile la dimensiunea mică. */
@media (max-width: 360px) {
    .whist-root { grid-template-rows: minmax(0, 1fr) 210px !important; }
    .whist-bottom-row, .whist-player-area { padding: 3px 4px !important; gap: 4px !important; margin: 2px !important; }
    .whist-my-info .whist-my-avatar { width: 44px !important; height: 44px !important; }
    .whist-my-info .whist-my-name { font-size: 11px !important; letter-spacing: 0.5px !important; }
    .whist-my-hand .whist-card { width: 40px !important; height: 56px !important; margin-left: -11px !important; }
    .whist-my-hand { min-height: 62px !important; max-height: 70px !important; }
    /* Card icons mini — rank 11px / suit 8px / pip 20px. Corner-br ascuns ca pe ≤480. */
    .whist-my-hand .whist-card-rank { font-size: 11px !important; letter-spacing: -0.5px !important; }
    .whist-my-hand .whist-card-suit-small { font-size: 8px !important; }
    .whist-my-hand .whist-card-pip { font-size: 20px !important; }
    .whist-my-hand .whist-card-corner-tl { top: 1px !important; left: 2px !important; }
    .whist-my-hand .whist-card-corner-br { display: none !important; }
    .whist-dock-btn { width: 22px !important; height: 22px !important; font-size: 10px !important; }
    /* Cărți jucate mini */
    .whist-seat-played-card .whist-card { width: 38px !important; height: 54px !important; }
    .whist-seat-played-card .whist-card-rank { font-size: 11px !important; }
    .whist-seat-played-card .whist-card-suit-small { font-size: 8px !important; }
    .whist-seat-played-card .whist-card-pip { font-size: 18px !important; }
    .whist-my-played-card { width: 38px !important; height: 54px !important; bottom: 6px !important; }
    .whist-my-played-card .whist-card { width: 38px !important; height: 54px !important; }
    .whist-my-played-card .whist-card-rank { font-size: 12px !important; }
    .whist-my-played-card .whist-card-pip { font-size: 20px !important; }
}

/* ── My-info card: avatar + meta (NO score column — score = badge pe avatar) ── */
.whist-my-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    min-height: 96px !important;
    width: 100% !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    background:
        radial-gradient(ellipse at top, rgba(255,215,0,0.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(35,22,60,0.92) 0%, rgba(20,12,38,0.95) 100%) !important;
    border: 1.5px solid rgba(255,215,0,0.40) !important;
    border-radius: 16px !important;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 0 20px rgba(255,215,0,0.08) !important;
}

/* Avatar cu conic-gradient timer ring + glow + score badge poziționat */
.whist-my-info .whist-my-avatar {
    width: 68px !important;
    height: 68px !important;
    border: 3px solid transparent !important;
    background:
        linear-gradient(180deg, #1e293b 0%, #0f172a 100%) padding-box,
        conic-gradient(from -90deg,
            var(--whist-gold, #ffd700) 0deg,
            var(--whist-gold, #ffd700) var(--timer-deg, 360deg),
            rgba(255,215,0,0.15) var(--timer-deg, 360deg)
        ) border-box !important;
    box-shadow:
        0 0 22px rgba(255,215,0,0.40),
        0 4px 14px rgba(0,0,0,0.70),
        inset 0 2px 6px rgba(255,255,255,0.20) !important;
    position: relative !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    transition: box-shadow 0.3s !important;
}
.whist-my-info.current-turn .whist-my-avatar {
    box-shadow:
        0 0 32px rgba(74,222,128,0.70),
        0 0 14px rgba(255,215,0,0.50),
        0 4px 14px rgba(0,0,0,0.70),
        inset 0 2px 6px rgba(255,255,255,0.30) !important;
    /* FIX BUG #4 (audit): animation whist-my-pulse scale 1.04 ELIMINATĂ — contrazicea
       intenția „scaunul rămâne static". User raporta că scaunul se mișcă la turn. Glow static. */
}

/* SCORE BADGE — monedă aurie casino-grade, poziționată în colț dreapta-jos avatar */
.whist-my-info .whist-my-scorewrap {
    position: absolute !important;
    bottom: -8px !important;
    right: -8px !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: radial-gradient(circle at 30% 30%, #fef3c7 0%, var(--whist-gold, #ffd700) 35%, #b8860b 100%) !important;
    border: 2.5px solid #1e293b !important;
    border-radius: 50% !important;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.65),
        0 0 12px rgba(255,215,0,0.55),
        inset 0 1px 2px rgba(255,255,255,0.5) !important;
    gap: 0 !important;
    min-width: 0 !important;
}
.whist-my-info .whist-my-score {
    font-family: 'Cinzel', serif !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #4a3608 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3) !important;
    line-height: 1 !important;
    margin: 0 !important;
    transition: transform 0.3s, color 0.3s !important;
}
.whist-my-info .whist-my-score.delta-up   { animation: whist-score-up 0.7s cubic-bezier(0.22, 1.4, 0.36, 1); }
.whist-my-info .whist-my-score.delta-down { animation: whist-score-down 0.7s cubic-bezier(0.22, 1.4, 0.36, 1); }
@keyframes whist-score-up {
    0%   { transform: scale(1); color: #4a3608; }
    40%  { transform: scale(1.4); color: #16a34a; text-shadow: 0 0 24px rgba(74,222,128,0.9); }
    100% { transform: scale(1); color: #4a3608; }
}
@keyframes whist-score-down {
    0%   { transform: scale(1); color: #4a3608; }
    40%  { transform: scale(1.2); color: #b91c1c; text-shadow: 0 0 20px rgba(248,113,113,0.8); }
    100% { transform: scale(1); color: #4a3608; }
}
.whist-my-info .whist-my-score-label { display: none !important; }   /* label SCOR redundant la badge */

/* FIX source-order (cerere user — „scaunul de jos foarte important, încadrat perfect"): regula de bază
   `.whist-my-info .whist-my-avatar { 68px }` de mai sus venea DUPĂ media-query-urile mobile (≤480: 50px) →
   le bătea → avatarul rămânea 68px pe telefon și SPĂRGEA scaunul (ieșea 18px sub player-area, scorul cădea
   peste stats + ieșea din chenar). Re-declar AICI (după bază) pentru mobil: avatar 44 + scor ca PILL pe avatar,
   în chenar, încape și 3 cifre (scoruri mari). Verificat live iframe 390×680. */
@media (max-width: 700px) {
    .whist-my-info .whist-my-avatar { width: 44px !important; height: 44px !important; }
    .whist-my-info .whist-my-scorewrap {
        left: 26px !important; right: auto !important; bottom: 2px !important; top: auto !important;
        min-width: 22px !important; width: auto !important; height: 22px !important;
        padding: 0 5px !important; border-radius: 11px !important;
    }
    .whist-my-info .whist-my-score { font-size: 11px !important; }
}
/* Idem pentru TELEFON LANDSCAPE (rândul de jos e doar ~104px): avatar 40 + meta COMPACTĂ (stats pe UN rând,
   badge auto ascuns — dock-ul arată starea) + scor pill, ca scaunul de jos să încapă în rândul scurt. */
@media (max-height: 500px) and (orientation: landscape) {
    .whist-my-info { gap: 5px !important; padding: 4px 7px !important; align-items: center !important; }
    .whist-my-info .whist-my-avatar { width: 40px !important; height: 40px !important; }
    .whist-my-info .whist-my-meta { gap: 3px !important; }
    .whist-my-info .whist-my-stats { flex-direction: row !important; gap: 5px !important; flex-wrap: nowrap !important; }
    .whist-my-info .whist-my-auto { display: none !important; }
    .whist-my-info .whist-my-scorewrap {
        left: 22px !important; right: auto !important; bottom: 1px !important; top: auto !important;
        min-width: 20px !important; width: auto !important; height: 20px !important; padding: 0 4px !important; border-radius: 10px !important;
    }
    .whist-my-info .whist-my-score { font-size: 10px !important; }
}

/* META: name + chips inline + JOC AUTOMAT pill */
.whist-my-info .whist-my-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.whist-my-info .whist-my-name {
    font-family: 'Cinzel', serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--whist-gold, #ffd700) !important;
    letter-spacing: 1px !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 0 8px rgba(255,215,0,0.3) !important;
    text-transform: uppercase !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* CHIPS Licitare/Făcute — colorate inline */
.whist-my-info .whist-my-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
}
.whist-my-info .whist-my-stats span + span::before {
    content: none !important;   /* override separator "·" din baseline */
    margin: 0 !important;
}
.whist-my-info .whist-my-bid,
.whist-my-info .whist-my-tricks {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 99px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}
.whist-my-info .whist-my-bid {
    background: rgba(91,141,239,0.15) !important;
    border: 1px solid rgba(91,141,239,0.55) !important;
    color: #93c5fd !important;
}
.whist-my-info .whist-my-tricks {
    background: rgba(74,222,128,0.15) !important;
    border: 1px solid rgba(74,222,128,0.55) !important;
    color: #4ade80 !important;
}
.whist-my-info .whist-my-bid b,
.whist-my-info .whist-my-tricks b {
    color: var(--whist-text-strong, #fff) !important;
    font-size: 11px !important;
    margin-left: 2px !important;
}
/* PREMIERE (Bid == Făcute): chips devin aurii pulsante */
.whist-my-info.premiere-likely .whist-my-bid,
.whist-my-info.premiere-likely .whist-my-tricks {
    background: rgba(255,215,0,0.18) !important;
    border-color: rgba(255,215,0,0.70) !important;
    color: var(--whist-gold, #ffd700) !important;
    animation: whist-premiere-glow 1.5s ease-in-out infinite !important;
}
@keyframes whist-premiere-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
    50%      { box-shadow: 0 0 12px rgba(255,215,0,0.6); }
}

/* JOC AUTOMAT pill — compact amber */
.whist-my-info .whist-my-auto {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    padding: 1px 7px !important;
    font-size: 9px !important;
    background: rgba(245,158,11,0.18) !important;
    border: 1px solid rgba(245,158,11,0.45) !important;
    border-radius: 99px !important;
    color: #fbbf24 !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
.whist-my-info .whist-my-auto[hidden] { display: none !important; }

/* ── Dock (right) — stretched la full coloana grid, înălțime uniformă ── */
.whist-player-dock {
    width: 100% !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    min-height: 96px !important;
    padding: 6px 10px !important;
    gap: 3px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background:
        radial-gradient(ellipse at top, rgba(74,222,128,0.06) 0%, transparent 60%),
        linear-gradient(180deg, rgba(35,22,60,0.92) 0%, rgba(20,12,38,0.95) 100%) !important;
    border: 1.5px solid rgba(74,222,128,0.35) !important;
    border-radius: 16px !important;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* Turn pill — status mare */
.whist-dock-turn {
    background: rgba(0,0,0,0.3) !important;
    border-radius: 99px !important;
    padding: 2px 8px !important;
    text-align: center !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
.whist-turn-mine {
    color: #4ade80 !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 0 8px rgba(74,222,128,0.5) !important;
    text-transform: uppercase !important;
}
.whist-turn-other {
    color: #93c5fd !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Game info row — ATU + Round + Timer pe un rând centrat */
.whist-dock-gameinfo {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: center !important;
}
.whist-dock-atu {
    background: rgba(255,215,0,0.10) !important;
    border: 1px solid rgba(255,215,0,0.4) !important;
    border-radius: 8px !important;
    padding: 2px 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.whist-dock-atu-label {
    color: #fbbf24 !important;
    font-size: 8px !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
}
.whist-dock-atu-sym {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}
.whist-dock-round {
    background: rgba(91,141,239,0.15) !important;
    border: 1px solid rgba(91,141,239,0.4) !important;
    border-radius: 8px !important;
    padding: 2px 7px !important;
    color: #93c5fd !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}
.whist-timer-pill {
    background: rgba(239,68,68,0.12) !important;
    border: 1px solid rgba(239,68,68,0.4) !important;
    border-radius: 99px !important;
    padding: 2px 7px !important;
    color: #fca5a5 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

/* Tools row — butoane uniforme cu hover lift */
.whist-dock-tools {
    gap: 3px !important;
    display: flex !important;
    justify-content: center !important;
}
.whist-dock-btn {
    width: 28px !important;
    height: 26px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,215,0,0.3) !important;
    border-radius: 8px !important;
    color: var(--whist-gold, #ffd700) !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.whist-dock-btn:hover {
    background: rgba(255,215,0,0.2) !important;
    border-color: rgba(255,215,0,0.7) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255,215,0,0.3) !important;
}
.whist-dock-btn.active {
    background: linear-gradient(180deg, rgba(74,222,128,0.3), rgba(34,197,94,0.2)) !important;
    border-color: rgba(74,222,128,0.6) !important;
    color: #4ade80 !important;
    box-shadow: 0 2px 8px rgba(74,222,128,0.3) !important;
}

/* Hand container — vertical center, înălțime uniformă */
.whist-my-hand, #whistMyHand {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 96px !important;
}

/* Custom property pentru timer ring (animat din JS prin --timer-deg) */
@property --timer-deg {
    syntax: '<angle>';
    inherits: false;
    initial-value: 360deg;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL LICITARE — stiluri interne adaptate la fundal verde/roșu/albastru/violet
   (orice culoare a feltului). Tot textul aurit pe negru semitransparent pentru
   contrast maxim indiferent de culoarea feltului dedesubt.
   ═══════════════════════════════════════════════════════════════════════════ */
.whist-bidp-header { border-bottom: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.32); }
.whist-bidp-title-txt {
    color: var(--whist-gold, var(--whist-gold, #ffd700));
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 0 10px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.35);
}
.whist-bidp-meta-pill {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.30);
    color: #fef3c7;
}
.whist-bidp-meta-pill b { color: var(--whist-text-strong, #fff); }
.whist-bidp-meta-pill.atu {
    background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.20);
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.65);
}

/* Status pills */
.whist-bidp-status.mine {
    background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
    color: #052e16;
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.whist-bidp-status.wait {
    background: rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.45);
    color: #fef3c7;
}
.whist-bidp-status.done {
    background: linear-gradient(180deg, var(--whist-gold, var(--whist-gold, #ffd700)), #b8860b);
    color: #4a3608;
    box-shadow: 0 2px 8px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Live table rows — dark pe orice culoare felt */
.whist-bidp-row {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.14);
}
.whist-bidp-row.current {
    background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.16);
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.60);
    box-shadow: 0 0 12px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.30);
}
.whist-bidp-row.done {
    background: rgba(74, 222, 128, 0.13);
    border-color: rgba(74, 222, 128, 0.48);
}
.whist-bidp-row.me { border-left: 3px solid var(--whist-gold, var(--whist-gold, #ffd700)); }
.whist-bidp-row-name { color: #fef3c7; }
.whist-bidp-row-bid { color: var(--whist-text-strong, #fff); }

/* Action section */
.whist-bidp-action { border-top: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.32); }
.whist-bidp-action-label { color: #fef3c7; }
.whist-bid-area .whist-bid-btn {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.18));
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.45);
    color: #fff7e0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.whist-bid-area .whist-bid-btn:hover:not(.disabled):not(.forbidden) {
    background: linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.28), rgba(218, 165, 32, 0.16));
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.85);
    transform: translateY(-1px);
}
.whist-bid-area .whist-bid-btn.suggested {
    background: linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.55), rgba(var(--whist-gold-rgb, 255, 215, 0), 0.28));
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.95);
    color: #4a3608;
    box-shadow: 0 0 14px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.7);
}

/* Footer Σ */
.whist-bidp-footer {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.20);
}
.whist-bidp-sum-val { color: #fef3c7; }
.whist-bidp-sum-val b { color: var(--whist-text-strong, #fff); }
.whist-bidp-sum-label { color: rgba(254, 243, 199, 0.7); }
.whist-bidp-footer.exact {
    background: linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.30), rgba(218, 165, 32, 0.18));
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.70);
}
.whist-bidp-footer.over {
    background: rgba(239, 68, 68, 0.20);
    border-color: rgba(239, 68, 68, 0.50);
}
.whist-bidp-footer.under {
    background: rgba(74, 222, 128, 0.18);
    border-color: rgba(74, 222, 128, 0.50);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR PREMIUM — Scoreboard + Istoric Runde (cerere user — testat + confirmat)
   Stabil 1-linie per row, rank dot mic, leader pulse, delta chips colorate.
   ═══════════════════════════════════════════════════════════════════════════ */
.whist-sidebar {
    padding: 12px 10px;
    background:
        radial-gradient(ellipse at top, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.05) 0%, transparent 60%),
        linear-gradient(180deg, rgba(28, 18, 52, 0.92) 0%, rgba(15, 10, 32, 0.95) 100%);
    border-left: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.20);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.whist-sb-section {
    margin-bottom: 12px;
    background:
        radial-gradient(ellipse at top, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.04) 0%, transparent 70%),
        linear-gradient(180deg, rgba(35, 22, 60, 0.85), rgba(20, 12, 38, 0.90));
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.30);
    border-radius: 10px;
    padding: 10px 8px;
    box-shadow:
        inset 0 1px 0 rgba(var(--whist-gold-rgb, 255, 215, 0), 0.15),
        0 3px 12px rgba(0, 0, 0, 0.35);
}
.whist-sb-title {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--whist-gold, #ffd700);
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    margin: 0 0 8px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.whist-sb-title::after {
    content: attr(data-count);
    background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.15);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.40);
    border-radius: 99px;
    padding: 0 6px;
    font-size: 8px;
    font-weight: 800;
    color: var(--whist-gold, #ffd700);
    letter-spacing: 0.5px;
    line-height: 1.5;
}
.whist-sb-title:not([data-count])::after,
.whist-sb-title[data-count=""]::after { content: none; }

/* SCOREBOARD rows (SIDEBAR) — STABIL 1 LINIE. Scop la .whist-sb-rows ca grila lui (4 col) să NU
   se aplice peste tabela modalului (.whist-sb-table .whist-sb-row are propria grilă dinamică). */
.whist-sb-rows { display: flex; flex-direction: column; gap: 3px; }
.whist-sb-rows .whist-sb-row {
    display: grid;
    grid-template-columns: 18px 1fr auto 26px;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-size: 10px;
    transition: background 0.18s, border-color 0.18s;
    min-height: 26px;
    position: relative;
}
.whist-sb-row:hover { background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.08); }
.whist-sb-row.me {
    background: linear-gradient(90deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.16), rgba(var(--whist-gold-rgb, 255, 215, 0), 0.04));
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.50);
}
.whist-sb-rank-icon {
    width: 16px;
    height: 16px;
    background: linear-gradient(180deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.20), rgba(0, 0, 0, 0.30));
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #fbbf24;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.whist-sb-row.me .whist-sb-rank-icon {
    background: linear-gradient(180deg, var(--whist-gold, #ffd700), #b8860b);
    color: #4a3608;
    border-color: var(--whist-text-strong, #fff);
    box-shadow: 0 0 8px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.6);
}
.whist-sb-row.leader .whist-sb-rank-icon {
    animation: whist-sb-leader-pulse 2s ease-in-out infinite;
}
@keyframes whist-sb-leader-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.4); }
    50%      { box-shadow: 0 0 14px rgba(var(--whist-gold-rgb, 255, 215, 0), 0.85); }
}
.whist-sb-row.leader::before {
    content: '👑';
    position: absolute;
    left: -3px;
    top: -7px;
    font-size: 11px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.whist-sb-name {
    color: #fef3c7;
    font-weight: 600;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.whist-sb-row.me .whist-sb-name { color: var(--whist-gold, #ffd700); font-weight: 800; }
.whist-sb-trend {
    font-size: 9px;
    font-weight: 800;
    margin-right: 2px;
}
.whist-sb-trend.up   { color: #4ade80; }
.whist-sb-trend.down { color: #f87171; }
.whist-sb-trend.flat { color: var(--whist-text-dim, #94a3b8); opacity: 0.5; }
.whist-sb-bt {
    background: rgba(91, 141, 239, 0.18);
    border: 1px solid rgba(91, 141, 239, 0.40);
    padding: 0 5px;
    border-radius: 99px;
    font-size: 8px;
    font-weight: 700;
    color: #93c5fd;
    line-height: 1.5;
    white-space: nowrap;
}
.whist-sb-row.exact-bid .whist-sb-bt {
    background: rgba(74, 222, 128, 0.20);
    border-color: rgba(74, 222, 128, 0.55);
    color: #4ade80;
}
.whist-sb-total {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 900;
    color: var(--whist-gold, #ffd700);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    line-height: 1;
    text-align: right;
    transition: transform 0.3s, color 0.3s;
}
.whist-sb-total.delta-up   { animation: whist-sb-total-up 0.7s cubic-bezier(0.22, 1.4, 0.36, 1); }
.whist-sb-total.delta-down { animation: whist-sb-total-down 0.7s cubic-bezier(0.22, 1.4, 0.36, 1); }
@keyframes whist-sb-total-up {
    0%   { transform: scale(1); color: var(--whist-gold, #ffd700); }
    40%  { transform: scale(1.4); color: #4ade80; text-shadow: 0 0 12px rgba(74, 222, 128, 0.9); }
    100% { transform: scale(1); color: var(--whist-gold, #ffd700); }
}
@keyframes whist-sb-total-down {
    0%   { transform: scale(1); color: var(--whist-gold, #ffd700); }
    40%  { transform: scale(1.2); color: #f87171; text-shadow: 0 0 10px rgba(248, 113, 113, 0.9); }
    100% { transform: scale(1); color: var(--whist-gold, #ffd700); }
}

/* HISTORY rows compact */
.whist-sb-history {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 2px;
}
.whist-sb-history::-webkit-scrollbar { width: 3px; }
.whist-sb-history::-webkit-scrollbar-thumb { background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.35); border-radius: 3px; }
.whist-sb-history-row {
    display: grid;
    grid-template-columns: 24px 22px 1fr;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    transition: background 0.18s;
    min-height: 22px;
}
.whist-sb-history-row:hover { background: rgba(91, 141, 239, 0.10); }
.whist-sb-history-r {
    background: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.10);
    border: 1px solid rgba(var(--whist-gold-rgb, 255, 215, 0), 0.25);
    border-radius: 4px;
    padding: 1px 3px;
    text-align: center;
    color: #fbbf24;
    font-weight: 800;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    line-height: 1.3;
}
.whist-sb-history-cards {
    background: rgba(91, 141, 239, 0.15);
    border: 1px solid rgba(91, 141, 239, 0.35);
    color: #93c5fd;
    padding: 0 4px;
    border-radius: 99px;
    font-size: 8px;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}
.whist-sb-history-scores {
    display: flex;
    gap: 2px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.whist-sb-history-delta {
    display: inline-flex;
    align-items: center;
    padding: 0 3px;
    border-radius: 99px;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.5;
    border: 1px solid;
    min-width: 18px;
    justify-content: center;
}
.whist-sb-history-delta.pos  { background: rgba(74, 222, 128, 0.16); border-color: rgba(74, 222, 128, 0.40); color: #4ade80; }
.whist-sb-history-delta.neg  { background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.40); color: #f87171; }
.whist-sb-history-delta.zero { background: rgba(148, 163, 184, 0.15); border-color: rgba(148, 163, 184, 0.30); color: var(--whist-text-dim, #94a3b8); }
.whist-sb-history-delta.me   { box-shadow: inset 0 0 0 1px var(--whist-gold, #ffd700); }
.whist-sb-history-row.best-round {
    background: linear-gradient(90deg, rgba(var(--whist-gold-rgb, 255, 215, 0), 0.14), rgba(var(--whist-gold-rgb, 255, 215, 0), 0.03));
    border-color: rgba(var(--whist-gold-rgb, 255, 215, 0), 0.40);
}
.whist-sb-history-empty {
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 12px;
    font-style: italic;
    font-size: 10px;
}

/* === LIGHT TOTAL — masa completa sub tema light (felt deschis + toate panourile + contraste; cerere user) === */
/* FELT deschis — postav albastru-gri pal, elegant (rim mai inchis pentru adancime) */
html[data-theme="light"] body .whist-table-area,
html[data-theme="light"] body[data-whist-theme="blue"] .whist-table-area,
html[data-theme="light"] body[data-whist-theme="red"] .whist-table-area,
html[data-theme="light"] body[data-whist-theme="purple"] .whist-table-area {
    /* FELT LIGHT UNIC — gri-albastru neutru, in familia fundalului (consistent cu header/footer) */
    background:
        radial-gradient(65% 50% at 50% 38%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 65%),
        radial-gradient(85% 80% at 50% 45%, #e2e7f0 0%, #cdd6e4 50%, #b6c3d6 100%) !important;
    border-color: rgba(140, 155, 180, 0.9) !important;
    box-shadow: inset 0 2px 18px rgba(26, 35, 53, 0.12), 0 10px 30px rgba(26, 35, 53, 0.10) !important;
}
[data-theme="light"] .whist-felt-watermark { opacity: 0.05 !important; color: #1a2335 !important; }
[data-theme="light"] .whist-felt-watermark .logo-title,
[data-theme="light"] .whist-felt-watermark .logo-subtitle,
[data-theme="light"] .whist-felt-watermark .logo-suit { color: rgba(22, 32, 58, 0.5) !important; text-shadow: none !important; }
/* DOCK actiuni (Tudor joaca / ATU / R / timer / emoji) — panou alb, text inchis, pills deschise */
[data-theme="light"] .whist-player-dock {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 246, 251, 0.99)) !important;
    border-color: rgba(160, 116, 8, 0.40) !important;
    color: #1a2335 !important;
    box-shadow: 0 8px 22px rgba(22, 32, 58, 0.12) !important;
}
[data-theme="light"] .whist-player-dock [class*="pill"],
[data-theme="light"] .whist-player-dock [class*="stat"],
[data-theme="light"] .whist-player-dock [class*="atu"],
[data-theme="light"] .whist-player-dock [class*="timer"] {
    background: rgba(22, 32, 58, 0.06) !important;
    border-color: rgba(22, 32, 58, 0.14) !important;
    color: #1a2335 !important;
    text-shadow: none !important;
}
[data-theme="light"] .whist-player-dock .whist-turn-mine,
[data-theme="light"] .whist-player-dock [class*="turn"] { color: #166534 !important; }
[data-theme="light"] .whist-dock-btn { background: rgba(22, 32, 58, 0.05) !important; border-color: rgba(22, 32, 58, 0.12) !important; color: #33415e !important; }
/* SIDEBAR (TABELA SCOR + ISTORIC RUNDE + toasts) — panouri albe, text inchis */
[data-theme="light"] .whist-sidebar,
[data-theme="light"] .whist-sidebar > *,
[data-theme="light"] .whist-sb-panel {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(160, 116, 8, 0.28) !important;
    color: #1a2335 !important;
}
[data-theme="light"] .whist-sb-title, [data-theme="light"] .whist-sb-title-pro { color: #a07408 !important; text-shadow: none !important; }
[data-theme="light"] .whist-sb-row { color: #1a2335 !important; background: transparent !important; }
[data-theme="light"] .whist-sb-row.me { background: rgba(160, 116, 8, 0.10) !important; }
[data-theme="light"] .whist-sb-name { color: #1a2335 !important; }
[data-theme="light"] .whist-sb-row.me .whist-sb-name { color: #a07408 !important; }
[data-theme="light"] .whist-sb-bt, [data-theme="light"] .whist-sb-row [data-bt] { background: rgba(22, 32, 58, 0.08) !important; color: #33415e !important; }
[data-theme="light"] .whist-sb-total { color: #a07408 !important; }
[data-theme="light"] .whist-sb-history-row { background: rgba(22, 32, 58, 0.04) !important; color: #1a2335 !important; }
[data-theme="light"] .whist-sb-history-r { background: rgba(160, 116, 8, 0.15) !important; color: #7c5a06 !important; }
[data-theme="light"] .whist-sb-history-cards { color: #33415e !important; }
[data-theme="light"] #whistSidebarToasts > div, [data-theme="light"] .whist-sb-history-empty {
    background: rgba(255, 255, 255, 0.97) !important; color: #1a2335 !important; border-color: rgba(160, 116, 8, 0.35) !important;
}
/* SCAUNE — chips interne (licitat/maini) lizibile pe alb */
[data-theme="light"] .whist-opp-card { color: #1a2335 !important; }
[data-theme="light"] .whist-opp-stats > span, [data-theme="light"] .whist-opp-stats > div {
    background: rgba(22, 32, 58, 0.07) !important; border-color: rgba(22, 32, 58, 0.12) !important; color: #33415e !important; text-shadow: none !important;
}
/* slotul cartii jucate — fara voal */
[data-theme="light"] .whist-seat-played-card { background: transparent !important; }
/* timer ring track vizibil pe alb */
[data-theme="light"] .whist-timer-ring .ring-bg { stroke: rgba(22, 32, 58, 0.25) !important; }

/* === LIGHT waiting room — panouri albe, text inchis (cerere user) === */
[data-theme="light"] .mw-lx-root, [data-theme="light"] [class^="mw-lx-card"], [data-theme="light"] .mw-lx-item,
[data-theme="light"] .mw-title-bar, [data-theme="light"] .mw-lx-st, [data-theme="light"] .mw-lx-kv,
[data-theme="light"] .mw-lx-side, [data-theme="light"] .mw-lx-main {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(160, 116, 8, 0.30) !important;
    color: #1a2335 !important;
}
[data-theme="light"] .mw-lx-root *:not(button):not(.mw-lx-tag):not([class*="status"]) { text-shadow: none !important; }
[data-theme="light"] .mw-lx-st-label, [data-theme="light"] .mw-lx-kv .k { color: #5a6a8a !important; }
[data-theme="light"] .mw-lx-kv .v, [data-theme="light"] .mw-lx-st-value { color: #1a2335 !important; }
[data-theme="light"] .mw-title-bar, [data-theme="light"] .mw-lx-title { color: #a07408 !important; }
[data-theme="light"] .mp-game-bar { background: rgba(30, 27, 75, 0.07) !important; color: #1e1b4b !important; border-color: rgba(30, 27, 75, 0.15) !important; }

/* light: banda de jos (player-area) — luminata, consecvent cu restul mesei */
[data-theme="light"] .whist-player-area {
    background: linear-gradient(180deg, rgba(243, 246, 251, 0.97), rgba(232, 237, 246, 0.98)) !important;
    border-color: rgba(160, 116, 8, 0.30) !important;
}
[data-theme="light"] .whist-my-hand .whist-card { box-shadow: 0 4px 14px rgba(22, 32, 58, 0.18) !important; }

/* light: spatele cartilor + talon — model indigo pal pe alb (lemnul maro nu se potrivea pe light) */
[data-theme="light"] .whist-card-back,
[data-theme="light"] .whist-deck-card {
    background:
        repeating-linear-gradient(45deg, rgba(26, 35, 53, 0.09) 0px, rgba(26, 35, 53, 0.09) 3px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0) 7px),
        linear-gradient(160deg, #f7f8fb 0%, #eceff5 100%) !important;
    border: 1px solid rgba(26, 35, 53, 0.25) !important;
    box-shadow: 0 3px 10px rgba(22, 32, 58, 0.16), inset 0 0 0 2px rgba(255, 255, 255, 0.65) !important;
}
[data-theme="light"] .whist-card-back::after,
[data-theme="light"] .whist-deck-card::after { color: rgba(26, 35, 53, 0.40) !important; text-shadow: none !important; }
[data-theme="light"] .mp-game-bar, [data-theme="light"] .mp-game-bar.active {
    background: rgba(30, 27, 75, 0.07) !important;
    color: #1e1b4b !important;
    border-color: rgba(30, 27, 75, 0.16) !important;
    text-shadow: none !important;
}
[data-theme="light"] .mp-game-bar *, [data-theme="light"] .mp-game-bar.active * { color: #1e1b4b !important; }
[data-theme="light"] .mp-game-bar-leave { background: rgba(30, 27, 75, 0.10) !important; color: #1e1b4b !important; border-color: rgba(30, 27, 75, 0.18) !important; }

/* felt skin LIGHT (🎨) — selectabil pe ORICE temă globală (cerere user) */
body[data-whist-theme="light"] .whist-table-area {
    background:
        radial-gradient(65% 50% at 50% 38%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 65%),
        radial-gradient(85% 80% at 50% 45%, #e2e7f0 0%, #cdd6e4 50%, #b6c3d6 100%) !important;
    border-color: rgba(140, 155, 180, 0.9) !important;
    box-shadow: inset 0 2px 18px rgba(26, 35, 53, 0.12), 0 10px 30px rgba(26, 35, 53, 0.10) !important;
}
/* pe feltul light, watermark-ul si umbrele se estompeaza inchis (lizibil) */
body[data-whist-theme="light"] .whist-felt-watermark { opacity: 0.06; }
body[data-whist-theme="light"] .whist-felt-watermark .logo-title,
body[data-whist-theme="light"] .whist-felt-watermark .logo-subtitle,
body[data-whist-theme="light"] .whist-felt-watermark .logo-suit { color: rgba(26, 35, 53, 0.5); text-shadow: none; }

/* === WATERMARK RELIEF (cerere user: „WHIST mult mai iesit in relief") — gravat in postav === */
.whist-felt-watermark { opacity: 0.26 !important; }
.whist-felt-watermark .logo-title {
    color: rgba(8, 12, 18, 0.32) !important;
    text-shadow:
        0 2px 1px rgba(255, 255, 255, 0.16),
        0 -2px 2px rgba(0, 0, 0, 0.55),
        0 6px 14px rgba(0, 0, 0, 0.22) !important;
}
.whist-felt-watermark .logo-subtitle {
    color: rgba(8, 12, 18, 0.30) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14), 0 -1px 1px rgba(0, 0, 0, 0.5) !important;
}
.whist-felt-watermark .logo-suit {
    color: rgba(8, 12, 18, 0.32) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.45) !important;
}

/* light: bid panel adaptiv la felt — mix spre ALB (pe light feltul e deschis) */
[data-theme="light"] .whist-bid-area {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(var(--whist-gold-rgb, 160, 116, 8), 0.08), transparent 55%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--whist-panel-felt-1, #e2e7f0) 55%, #fff 45%) 0%,
            color-mix(in srgb, var(--whist-panel-felt-2, #cdd6e4) 60%, #fff 40%) 45%,
            color-mix(in srgb, var(--whist-panel-felt-3, #b6c3d6) 65%, #fff 35%) 100%) !important;
}

/* === SIDEBAR anti-flash (cerere user: refresh-ul schimba stilul urat) — tranzitii line pe schimbarile de stare === */
.whist-sb-row,
.whist-sb-row .whist-sb-total,
.whist-sb-row .whist-sb-rank-icon,
.whist-sb-row .whist-sb-bt {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.whist-sb-history-row { transition: background-color 0.25s ease; }