/* ============================================================
   JOKER CARD GAME — CASINO TABLE AESTHETIC
   Premium felt table, gold accents, Playfair Display + EB Garamond
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    /* ── Backgrounds ──────────────── */
    --bg-main:           #0D1B12;
    --bg-surface:        #1A2B1F;
    --table-green:       #1a3a2a;
    --table-dark:        #0d1f17;
    --panel-bg:          rgba(13,27,18,0.88);
    --panel-border:      1px solid rgba(201,168,76,0.38);

    /* ── Golds ────────────────────── */
    --gold:              #C9A84C;
    --gold-dim:          rgba(201,168,76,0.38);
    --gold-bright:       #e2c068;

    /* ── Text — warm parchment scale ─ */
    --parchment:         #F0DFA8;          /* primary body text */
    --parchment-dim:     rgba(240,223,168,0.72);   /* secondary */
    --ivory:             #F0DFA8;          /* alias */
    --ivory-dim:         rgba(240,223,168,0.72);
    --text-light:        #F0DFA8;
    --text-muted:        rgba(240,223,168,0.48);

    /* ── Action / danger ─────────── */
    --crimson:           #8B1A1A;
    --burgundy:          #8B1A1A;
    --burgundy-hover:    #a82222;

    /* ── Shadows ─────────────────── */
    --shadow-warm:       0 4px 24px rgba(0,0,0,0.6);
    --shadow-card:       0 6px 18px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);

    /* ── Typography ──────────────── */
    --font-display:      'Playfair Display', 'PT Serif', Georgia, serif;
    --font-body:         'PT Serif', Georgia, serif;
    --font-ui:           'PT Sans', Arial, sans-serif;

    /* ── Layout ──────────────────── */
    --card-width:        70px;
    --card-height:       105px;
    --card-radius:       8px;
    --border-radius:     10px;
    --animation-speed:   0.2s;

    /* ── Legacy aliases (JS-generated classes) ─ */
    --primary-color:     #C9A84C;
    --primary-color-rgb: 201,168,76;
    --secondary-color:   #C9A84C;
    --secondary-color-rgb: 201,168,76;
    --accent-color:      #C9A84C;
    --trump-color:       #C9A84C;
    --warning-color:     #c0392b;
    --highlight-color:   rgba(201,168,76,0.15);
    --selected-color:    rgba(201,168,76,0.25);
    --shadow-color:      rgba(0,0,0,0.5);
    --bg-color:          #1A2B1F;
    --card-color:        #F0DFA8;
    --text-color:        #F0DFA8;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
}

/* ── Typography helpers ─────────────────────────────────────── */
.font-display  { font-family: var(--font-display); }
.font-body     { font-family: var(--font-body); }
.font-ui       { font-family: var(--font-ui); }

/* ── Body / Table ───────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    background-color: var(--bg-main);
    /* felt radial: bright centre, dark vignette */
    background-image:
        /* the felt colours come from the table chosen in the shop (cosmetics.js); default: green */
        radial-gradient(ellipse at 50% 45%, var(--felt-1, #1a3a2a) 0%, var(--felt-2, #122b1e) 55%, var(--felt-3, var(--table-dark)) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
    background-blend-mode: normal, overlay;
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Game Container ─────────────────────────────────────────── */
#game-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ══════════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════════ */
#game-header {
    background: var(--panel-bg);
    border-bottom: 1px solid var(--gold-dim);
    padding: 6px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 20px rgba(0,0,0,0.6);
    z-index: 10;
    backdrop-filter: blur(6px);
    flex-shrink: 0;
    min-height: 0;
}

.header-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-section h1 {
    font-family: var(--font-display);
    color: var(--gold);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 8px rgba(201,168,76,0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}
/* "Joker" with a small joker card of the game (as on the first page) */
.header-section h1.game-logo { gap: 10px; }
.logo-card {
    width: 24px; height: 33px; border-radius: 4px; flex: 0 0 auto;
    background: linear-gradient(160deg, #fffdf8 35%, #fbeceb 100%);
    border: 1px solid rgba(198,40,40,0.5); box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    display: inline-flex; align-items: center; justify-content: center;
}
.logo-card svg { width: 80%; height: auto; overflow: visible; }

.game-info {
    display: flex;
    gap: 8px;
    margin-top: 0;
}

.game-info span {
    font-family: var(--font-display);
    font-size: 12px;
    font-variant: small-caps;
    letter-spacing: 0.12em;
    color: var(--gold);
    background: rgba(201,168,76,0.08);
    border: 1px solid var(--gold-dim);
    box-shadow: 0 0 8px rgba(201,168,76,0.12), inset 0 1px 0 rgba(201,168,76,0.1);
    padding: 3px 10px;
    border-radius: 20px;
}
/* The trump is shown only by its card on the table, not in the header
   (the span stays in the DOM: the game code writes the trump text into it) */
#game-header #trump-info { display: none; }

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

/* header buttons reuse .control-btn & .rules-btn */
.control-btn, .rules-btn {
    background: rgba(13,27,18,0.75);
    color: var(--parchment);
    border: 1px solid var(--gold-dim);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    text-decoration: none;
}

.control-btn:hover, .rules-btn:hover {
    background: rgba(201,168,76,0.14);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 12px rgba(201,168,76,0.22);
    transform: translateY(-1px);
}
/* Header buttons moved up from the controls row: "Нова гра" stands out, the icon-only ones
   (home next to the logo, the tournament table) are square */
.control-btn, .rules-btn, #game-header .game-info span { white-space: nowrap; }
.control-btn.new-game-btn { background: var(--gold); color: #1a1205; border-color: var(--gold); }
.control-btn.new-game-btn:hover { background: var(--gold-bright); color: #1a1205; }
.control-btn.icon-btn { padding: 6px 10px; justify-content: center; }
.header-section > #home-btn { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════
   GAME BOARD — 4-PLAYER GRID
══════════════════════════════════════════════════════════════ */
#game-board {
    flex: 1;
    min-height: 0;
    position: relative;
    display: grid;
    grid-template-areas:
        ". player1 ."
        "player4 center player2"
        ". player3 .";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 300px 1fr 300px;
    gap: 10px;
    padding: 10px;
    overflow: auto;
}

/* ── Player Areas ───────────────────────────────────────────── */
.player-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 12px;
    padding: 8px;
    transition: all var(--animation-speed) ease;
}

.player-top    { grid-area: player1; }
.player-right  { grid-area: player2; }
.player-bottom { grid-area: player3; }
.player-left   { grid-area: player4; }

/* Active player — gold glow pulse ring */
.player-area.active-player {
    box-shadow: 0 0 0 3px var(--gold-bright), 0 0 24px rgba(226,192,104,0.55);
    background: rgba(201,168,76,0.14);
    border-radius: 12px;
    animation: activePlayerRing 1.6s ease-in-out infinite;
}

.player-area.active-player.player-bottom {
    animation: yourTurnPulse 1.6s ease-in-out infinite;
}

/* The name bar of the player whose turn it is: gold, with "▶" */
.player-area.active-player .player-info {
    background: linear-gradient(90deg, rgba(226,192,104,0.45), rgba(201,168,76,0.18));
    border-color: var(--gold-bright);
}
.player-area.active-player .player-name { color: #fff6d8; }
.player-area.active-player .player-name::before { content: '▶ '; color: var(--gold-bright); }

@keyframes activePlayerRing {
    0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(201,168,76,0.4); }
    50%       { box-shadow: 0 0 0 3px var(--gold-bright), 0 0 34px rgba(226,192,104,0.75); }
}

@keyframes yourTurnPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 0 20px rgba(201,168,76,0.5); }
    50%       { box-shadow: 0 0 0 4px var(--gold-bright), 0 0 40px rgba(226,192,104,0.85); }
}

/* Player Info Bar */
.player-info {
    background: var(--panel-bg);
    border: var(--panel-border);
    padding: 8px 14px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-warm);
    position: relative;
}

.player-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--parchment);
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(201,168,76,0.25);
    padding-bottom: 2px;
}

.player-score, .card-count {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--gold);
    font-style: italic;
}

/* Score badge — casino chip */
.score-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(10,25,16,0.9);
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 11px;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* AI thinking badge */
.ai-thinking {
    display: none;
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--burgundy);
    color: var(--ivory);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: 'PT Serif', Georgia, serif;
    font-size: 10px;
    letter-spacing: 0.08em;
    animation: aiPulse 1s ease-in-out infinite;
}

.player-area.ai-turn .ai-thinking {
    display: block;
}

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

/* Player hand area */
.player-hand {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: var(--card-height);
    padding: 8px;
    background: transparent;
    border: 1px solid rgba(201,168,76,0.1);
    border-radius: 10px;
    transition: all var(--animation-speed) ease;
}

/* Manual mode: spread cards fully visible in a scrollable row */
.player-hand.manual-spread {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(201,168,76,0.4) transparent;
    border-color: rgba(201,168,76,0.5);
    background: rgba(201,168,76,0.05);
}
.player-hand.manual-spread::-webkit-scrollbar { height: 5px; }
.player-hand.manual-spread::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.4); border-radius: 3px; }
.player-hand.manual-spread .card { flex-shrink: 0; }

.player-hand.can-drop {
    border-color: var(--gold);
    background: rgba(201,168,76,0.08);
    box-shadow: inset 0 0 12px rgba(201,168,76,0.15);
}

/* ══════════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════════ */
.card {
    width: var(--card-width);
    height: var(--card-height);
    background: linear-gradient(160deg, #faf6ee 0%, #f0eada 100%);
    border: 1.5px solid #d4c9a8;
    border-radius: var(--card-radius);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
    font-family: 'PT Serif', Georgia, serif;
    font-weight: 600;
    transition: transform var(--animation-speed) ease,
                box-shadow var(--animation-speed) ease,
                border-color var(--animation-speed) ease;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    user-select: none;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,168,76,0.5);
    border-color: var(--gold);
    z-index: 10;
}

.card[draggable="true"]:hover { cursor: grab; }
.card[draggable="true"]:active { cursor: grabbing; }

.card.selected {
    transform: translateY(-10px) scale(1.05);
    border: 2px solid var(--gold) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 16px rgba(201,168,76,0.5);
    background: linear-gradient(160deg, #fff9ec 0%, #f5ecce 100%);
    z-index: 100;
}

.card.red  { color: #c0392b; }
.card.black { color: #1a1a1a; }

.card.red .card-main-symbol  { color: #c0392b; }
.card.black .card-main-symbol { color: #1a1a1a; }

/* Trump card */
.card.trump {
    background: linear-gradient(145deg, #fff9de 0%, #f5e8a0 100%);
    border-color: var(--gold);
    box-shadow: var(--shadow-card), 0 0 12px rgba(201,168,76,0.4);
}

/* Card corners */
.card-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    line-height: 1;
}
.card-corner-top    { align-self: flex-start; }
.card-corner-bottom { align-self: flex-end; transform: rotate(180deg); }

.card-rank { font-size: 12px; font-weight: 700; }
.card-suit { font-size: 10px; margin-top: 1px; }

.card-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card-main-symbol { font-size: 28px; opacity: 0.85; }

/* Classic deck picture (Card.faceArt in cards.js): pips / court portrait under the corners */
.card-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.card-corner { position: relative; z-index: 1; }
.card:has(> .card-art) > .card-center { display: none; }   /* the picture replaces the single big suit sign */
/* Poker-style cards: white card, cream panel, big corner indexes. The indexes scale with the card
   itself (cqw = 1% of the card's width), whatever size the card has in the hand or on the table;
   browsers without container units keep the sizes set elsewhere. */
.card:has(> .card-art) { container-type: size; }
.card:has(> .card-art):not(.selected):not(.trump) { background: linear-gradient(160deg, #ffffff 0%, #f6f4ee 100%); }
.card:has(> .card-art) .card-rank {
    font-family: Georgia, 'PT Serif', serif !important; font-weight: 700;
    font-size: 34cqw !important; line-height: 0.92; letter-spacing: -0.04em;   /* cqw: of the card's inner width */
}
.card:has(> .card-art)[data-card^="10"] .card-rank { letter-spacing: -0.14em; margin-left: -0.1em; }
.card:has(> .card-art) .card-suit { font-size: 27cqw !important; margin-top: 1cqw; }
.card:has(> .card-art) .card-corner { line-height: 1; }

/* Card pictures from static/cards/ (classic English-pattern deck, cards.js): the picture is the
   whole face, with its own indexes; our corners and drawing stay hidden unless it fails to load */
/* (the picture has its own thin outline; the gold frame of a selected card still shows) */
.card.has-img { padding: 0; background: #fff !important; border-color: transparent; }
.card-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    pointer-events: none; user-select: none; -webkit-user-drag: none; z-index: 0; }
.card.has-img > .card-corner, .card.has-img > .card-art, .card.has-img > .card-center { display: none !important; }

/* ══ JOKER: two jokers, one red and one black (Card.jokerFace in cards.js) ══ */
.joker-card {
    --joker: #c62828;           /* red joker */
    --joker-deep: #8e1b1b;
    --joker-tint: #fbeceb;
    background: linear-gradient(160deg, #fffdf8 35%, var(--joker-tint) 100%);
    border: 1px solid color-mix(in srgb, var(--joker) 45%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--joker) 12%, transparent), var(--card-shadow, 0 2px 6px rgba(0,0,0,0.35));
    color: var(--joker);
}
.joker-card.joker-black {
    --joker: #1f2329;
    --joker-deep: #000;
    --joker-tint: #eceef1;
}
.joker-card .card-corner { color: var(--joker); }
.joker-card.sub-red .card-corner { color: #c0392b; }      /* the card a joker stands for */
.joker-card.sub-black .card-corner { color: #1a1a1a; }
.joker-rank {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
}
.joker-star { font-size: 0.8em; }
.joker-face { flex-direction: column; gap: 1px; width: 100%; }   /* .card-center is absolutely centred: give it the card's width */
.joker-hat { width: 60%; height: auto; display: block; overflow: visible;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); }
.joker-hat .hat-side { fill: var(--joker); }
.joker-hat .hat-mid  { fill: var(--joker-deep); }
.joker-hat .hat-band { fill: #c9a84c; }
.joker-hat .hat-bell { fill: #e2bd55; stroke: #9c7a26; stroke-width: 1; }
.joker-text {
    font: 700 7px/1 'PT Sans', Arial, sans-serif;
    letter-spacing: 0.18em;
    color: var(--joker);
    margin-right: -0.18em;      /* letter-spacing leaves room on the right only */
}
/* small cards on the table: the hat alone (the word does not fit) */
.laid-combo .joker-text, .laid-card .joker-text { display: none; }
.laid-combo .joker-hat, .laid-card .joker-hat { width: 66%; }

/* Face cards */
.card[data-card*="J"] .card-main-symbol,
.card[data-card*="Q"] .card-main-symbol,
.card[data-card*="K"] .card-main-symbol,
.card[data-card*="A"] .card-main-symbol { font-size: 32px; }

.card[data-card*="A"] .card-main-symbol { font-size: 36px; }

/* Card back — classic red lattice with a white border (as on poker cards) */
.card-back {
    position: absolute;
    width: var(--card-width);
    height: var(--card-height);
    color: transparent;   /* hide JS-injected 🂠 unicode */
    font-size: 0;
    background-color: var(--back-color, #b3202a);   /* the deck chosen in the shop (cosmetics.js) */
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.55) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.55) 0 1px, transparent 1px 6px),
        /* a two-colour back: split diagonally (--back-color-2 = the same colour for one-colour decks) */
        linear-gradient(135deg, var(--back-color, #b3202a) 50%, var(--back-color-2, var(--back-color, #b3202a)) 50%);
    background-clip: padding-box;
    border: 4px solid #fbfaf6;
    outline: 1px solid #d8d2c2;
    outline-offset: -1px;
    border-radius: var(--card-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(120,10,20,0.6), 0 4px 10px rgba(0,0,0,0.4);
}

.card-back::before { content: none; }

/* A deck with its own back picture (shop: "backImage", cosmetics.js puts .back-image on <html>):
   the picture (with its own white border) replaces the coloured lattice on every card back */
html.back-image .card-back,
html.back-image .mp-back,
html.back-image .ca-back {
    background: #fff var(--back-image) center / 100% 100% no-repeat !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;   /* (no red inner line of the lattice back) */
}

/* A table with a picture (shop: "image", cosmetics.js puts .table-image on <html>): the picture
   covers the whole page behind the game (the felt colours stay as the fallback underneath) */
html.table-image body {
    background: var(--felt-3, #0d1f17) var(--table-image) center / cover no-repeat !important;
}

/* A deck with black cards (shop: "dark", cosmetics.js puts .dark-deck on <html>): no white edge
   around the pictures, a grey outline so the cards stand apart in a fan, and dark jokers to match
   (red jester hat on the red joker, white on the black one) */
html.dark-deck .card.has-img { background: #111 !important; border-color: #5a5a5a !important; }
html.dark-deck .joker-card {
    --joker: #ff4552; --joker-deep: #b3202a; --joker-tint: #2a1215;
    background: linear-gradient(160deg, #141414 40%, var(--joker-tint) 100%);
    border-color: #5a5a5a;
}
html.dark-deck .joker-card.joker-black { --joker: #ffffff; --joker-deep: #a8a8a8; --joker-tint: #262626; }
html.dark-deck .joker-card .joker-text { color: var(--joker); }
html.dark-deck .card.selected { border-color: var(--gold) !important; }

.card-back-stack {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
}

.card-back-1 { z-index: 3; transform: rotate(0deg); }
.card-back-2 { z-index: 2; transform: rotate(-2deg) translate(-2px,-2px); }
.card-back-3 { z-index: 1; transform: rotate(2deg) translate(2px,2px); }

/* Drag / combo states */
.card.dragging { opacity: 0.65; transform: rotate(4deg); }

.card.combo-highlight {
    border-color: var(--gold) !important;
    box-shadow: 0 0 18px rgba(201,168,76,0.55) !important;
    animation: comboHighlightPulse 0.8s ease-in-out 3;
}
@keyframes comboHighlightPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.04); }
}

.card.mandatory-discard {
    border: 2px solid var(--burgundy) !important;
    box-shadow: 0 0 14px rgba(107,26,26,0.7) !important;
    animation: mandatoryDiscardPulse 1.5s ease-in-out infinite;
}
@keyframes mandatoryDiscardPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(107,26,26,0.6); }
    50%       { box-shadow: 0 0 24px rgba(107,26,26,1); }
}

.card.extendable-card {
    border: 2px solid var(--gold) !important;
    box-shadow: 0 0 14px rgba(201,168,76,0.7) !important;
    animation: extendableGlow 1.5s ease-in-out infinite;
    cursor: pointer !important;
}
@keyframes extendableGlow {
    0%, 100% { box-shadow: 0 0 14px rgba(201,168,76,0.7); }
    50%       { box-shadow: 0 0 24px rgba(201,168,76,1); }
}

/* ── Substituted / joker styles ─────────────────────────────── */
/* the look comes from .joker-card (red or black joker); the corners show the card it stands for */
.substituted-joker {
    position: relative;
    transition: transform var(--animation-speed) ease, box-shadow var(--animation-speed) ease;
}

.has-joker { position: relative; }
.has-joker::after {
    content: "🔄";
    position: absolute;
    top: 4px; right: 4px;
    font-size: 11px;
    background: rgba(201,168,76,0.85);
    border-radius: 50%;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

.selected-for-joker {
    border: 3px solid var(--gold) !important;
    box-shadow: 0 0 16px rgba(201,168,76,0.8) !important;
    animation: jokerPulse 1s ease-in-out infinite;
}
@keyframes jokerPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.03); }
}


/* ══════════════════════════════════════════════════════════════
   CENTER AREA
══════════════════════════════════════════════════════════════ */
.center-area {
    grid-area: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.game-table {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 36px;
    padding: 20px 30px;
    background: rgba(10,25,16,0.55);
    border: var(--panel-border);
    border-radius: 16px;
    box-shadow: var(--shadow-warm), inset 0 0 30px rgba(0,0,0,0.2);
}

.deck-container, .trump-container, .discard-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Deck */
.deck {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    cursor: pointer;
    transition: transform var(--animation-speed) ease;
}
.deck:hover { transform: scale(1.06); }
.deck.empty { opacity: 0.3; pointer-events: none; }

@keyframes deck-refilled {
    0%   { opacity: 0.3; transform: scale(0.9); }
    50%  { opacity: 0.75; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
.deck:not(.empty) { animation: deck-refilled 0.5s ease-in-out; }

.deck-label {
    position: absolute;
    bottom: -26px; left: 50%;
    transform: translateX(-50%);
    background: rgba(10,25,16,0.88);
    border: 1px solid var(--gold-dim);
    padding: 3px 8px;
    border-radius: 14px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 11px;
    color: var(--gold);
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.deck-description, .discard-description {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 12px;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    color: var(--gold);
    background: rgba(10,25,16,0.7);
    border: 1px solid var(--gold-dim);
    padding: 3px 10px;
    border-radius: 10px;
    text-align: center;
    margin-top: 18px;
}

/* Trump card — gold-framed slot */
.trump-card {
    width: var(--card-width);
    height: var(--card-height);
    position: relative;
    transform: rotate(90deg);
    border-radius: var(--card-radius);
    border: 2px solid var(--gold);
    box-shadow: 0 4px 16px rgba(201,168,76,0.45);
    transition: all var(--animation-speed) ease;
}
.trump-card:hover {
    transform: rotate(90deg) scale(1.06);
    box-shadow: 0 6px 24px rgba(201,168,76,0.65);
}

.trump-placeholder {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) rotate(-90deg);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--gold);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 11px;
    font-variant: small-caps;
}

.trump-info {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    color: var(--gold);
}
.trump-suit { font-size: 22px; color: var(--gold); }
.trump-name { font-size: 11px; color: var(--gold); font-variant: small-caps; }
.trump-display { width: 100%; height: 100%; transform: none !important; }
.trump-card .trump-display { transform: none !important; }

/* Discard pile */
.discard-pile {
    width: var(--card-width);
    height: var(--card-height);
    border: 2px dashed rgba(201,168,76,0.3);
    border-radius: var(--card-radius);
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,25,16,0.5);
    transition: all var(--animation-speed) ease;
    position: relative;
    cursor: pointer;
}
.discard-pile:hover { transform: scale(1.04); }

.discard-pile.can-take-from-discard {
    border: 2px solid var(--gold);
    background: rgba(201,168,76,0.08);
    box-shadow: 0 0 16px rgba(201,168,76,0.45);
    animation: discardAvailable 2s ease-in-out infinite;
}
@keyframes discardAvailable {
    0%, 100% { box-shadow: 0 0 12px rgba(201,168,76,0.4); }
    50%       { box-shadow: 0 0 24px rgba(201,168,76,0.7); }
}

.discard-pile.can-drop {
    border-color: var(--gold-bright);
    background: rgba(201,168,76,0.12);
    transform: scale(1.05);
}

.discard-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    color: rgba(201,168,76,0.5);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 11px;
    font-variant: small-caps;
}
.discard-placeholder i { font-size: 18px; }
.discard-pile:not(:empty) .discard-placeholder { display: none; }

.discard-card {
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    border-radius: var(--card-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 1;
}

.card-count-badge {
    position: absolute;
    top: -8px; right: -8px;
    background: var(--gold);
    color: #1a1a1a;
    border-radius: 50%;
    width: 20px; height: 20px;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Current turn indicator — elegant pulse instead of flat button */
.current-turn {
    background: rgba(10,25,16,0.8);
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 8px 22px;
    border-radius: 30px;
    display: flex; align-items: center; gap: 8px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 13px;
    font-variant: small-caps;
    letter-spacing: 0.12em;
    animation: turnIndicatorPulse 2s ease-in-out infinite;
    box-shadow: 0 0 18px rgba(201,168,76,0.25);
}
@keyframes turnIndicatorPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(201,168,76,0.25); }
    50%       { box-shadow: 0 0 28px rgba(201,168,76,0.55); }
}

/* ══════════════════════════════════════════════════════════════
   COMBINATIONS
══════════════════════════════════════════════════════════════ */
.player-laid-combinations {
    margin-top: 4px;
    padding: 8px;
    background: rgba(10,25,16,0.75);
    border-radius: 8px;
    border: 1px solid var(--gold-dim);
    min-height: 30px;
    display: block;
    box-shadow: var(--shadow-warm);
}

.player-laid-combinations h4 {
    margin: 0 0 3px 0;
    font-family: 'PT Serif', Georgia, serif;
    font-size: 11px;
    font-style: italic;
    color: var(--gold);
    display: flex; align-items: center; gap: 4px;
    text-transform: none;
}

.player-laid-combinations.visible {
    animation: slideDown 0.3s ease-out;
}

.combo-display {
    display: flex;
    flex-direction: row;
    gap: 8px;
    min-height: auto;
    flex-wrap: wrap;
    align-items: flex-start;
}

.laid-combo {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 10px 8px 6px 8px;
    background: rgba(201,168,76,0.08);
    border-radius: 8px;
    border: 1px solid rgba(201,168,76,0.5);
    position: relative;
    animation: comboGlow 0.5s ease-out, comboPulse 3s ease-in-out infinite;
    box-shadow: 0 0 14px rgba(201,168,76,0.3);
}

.laid-combo::before {
    content: attr(data-combo-type);
    position: absolute;
    top: -10px; left: 6px;
    background: rgba(10,25,16,0.92);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    font-family: 'PT Serif', Georgia, serif;
    font-size: 10px;
    font-style: italic;
    padding: 2px 7px;
    border-radius: 4px;
}

.laid-combo.extendable {
    border-color: var(--gold);
    background: rgba(201,168,76,0.12);
}
.laid-combo.extendable:hover {
    background: rgba(201,168,76,0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(201,168,76,0.35);
}

.laid-combo.extendable[data-player-id="0"],
.laid-combo.extendable[data-player-id="1"],
.laid-combo.extendable[data-player-id="3"] {
    border-color: rgba(201,168,76,0.6);
    background: rgba(201,168,76,0.07);
}

.laid-combo.extendable[data-player-id="2"] {
    border-color: var(--gold);
    background: rgba(201,168,76,0.12);
}

.laid-combo.complete-set {
    border-color: rgba(201,168,76,0.8) !important;
    background: rgba(201,168,76,0.15) !important;
}

.laid-combo .card {
    width: 65px; height: 98px;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--animation-speed) ease;
    flex-shrink: 0;
}
.laid-combo .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 8px rgba(201,168,76,0.3);
}
.laid-combo .card .card-rank { font-size: 11px; }
.laid-combo .card .card-suit { font-size: 14px; }

.combo-label {
    position: absolute;
    top: -8px; left: 5px;
    background: rgba(10,25,16,0.88);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    font-family: 'PT Serif', Georgia, serif;
    font-size: 10px;
    font-style: italic;
    padding: 2px 7px;
    border-radius: 4px;
}

/* Mini cards in combo preview */
.mini-card {
    width: 20px; height: 28px;
    background: linear-gradient(135deg, #faf6ee 0%, #f0eada 100%);
    border-radius: 4px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-size: 0.5em; font-weight: 700;
    border: 1px solid #d4c9a8;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transition: transform 0.15s, box-shadow 0.15s;
}
.mini-card:hover { transform: scale(1.15) translateY(-2px); z-index: 10; }
.mini-card.red   { color: #c0392b; border-color: #c0392b; }
.mini-card.black { color: #1a1a1a; border-color: #333; }
.mini-card.joker {
    background: linear-gradient(135deg, #c9a84c 0%, #f5e8a0 100%);
    color: #1a1a1a; border-color: var(--gold);
}
.mini-card .rank { font-size: 0.7em; line-height: 1; }
.mini-card .suit { font-size: 0.8em; line-height: 1; }

.combo-cards { display: flex; gap: 1px; flex-wrap: wrap; }

.combo-card {
    width: 20px; height: 30px;
    background: linear-gradient(135deg, #faf6ee 0%, #f0eada 100%);
    border: 1px solid #d4c9a8;
    border-radius: 4px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-size: 6px; font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.15s, box-shadow 0.15s;
}
.combo-card:hover { transform: scale(1.1) translateY(-1px); }
.combo-card.red   { color: #c0392b; }
.combo-card.black { color: #1a1a1a; }
.combo-info {
    margin-top: 2px; font-size: 8px;
    color: var(--gold); text-align: center;
    font-family: 'PT Serif', Georgia, serif;
}

/* Return combo button */
/* (sits on the top edge of the combination, over the cards, like the СЕТ / ТЕРЦ label) */
.return-combo-btn {
    position: absolute; top: -9px; right: 4px;
    padding: 2px 7px; font-size: 10px; line-height: 1.3;
    background: #8e1b1b;
    color: #fff;
    border: 1px solid #ffb3a7; border-radius: 10px;
    cursor: pointer; font-weight: 700;
    z-index: 30;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    transition: all var(--animation-speed) ease;
    touch-action: manipulation;
}
.return-combo-btn:hover {
    background: var(--burgundy-hover);
    transform: scale(1.05);
}
.return-combo-btn:active { transform: scale(0.95); }
.return-combo-btn i { margin-right: 3px; }

@keyframes comboGlow {
    from { box-shadow: 0 0 4px rgba(201,168,76,0.1); }
    to   { box-shadow: 0 0 10px rgba(201,168,76,0.3); }
}
@keyframes comboPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(201,168,76,0.2); }
    50%       { box-shadow: 0 0 18px rgba(201,168,76,0.45); }
}

/* ══════════════════════════════════════════════════════════════
   GAME CONTROLS — bottom action bar
══════════════════════════════════════════════════════════════ */
#game-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px 16px;
    background: rgba(8,20,13,0.92);
    border-top: 1px solid var(--gold-dim);
    backdrop-filter: blur(6px);
    flex-shrink: 0;
}

.game-btn {
    padding: 0 12px;
    height: 34px;
    border: 1px solid var(--gold-dim);
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.2s ease;
    display: flex; align-items: center; gap: 5px;
    min-width: 0;
    white-space: nowrap;
    justify-content: center;
    background: rgba(13,27,18,0.85);
    color: var(--parchment);
}

.game-btn:hover:not(:disabled) {
    background: rgba(201,168,76,0.12);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 14px rgba(201,168,76,0.22), 0 2px 6px rgba(0,0,0,0.3);
    transform: translateY(-1px);
}

.game-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: rgba(201,168,76,0.15);
}

/* Primary: new game */
.game-btn.primary {
    border-color: var(--gold-dim);
    color: var(--gold);
}
.game-btn.primary:hover:not(:disabled) {
    background: rgba(201,168,76,0.18);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}

/* Secondary */
.game-btn.secondary {
    color: var(--ivory-dim);
    border-color: rgba(201,168,76,0.25);
}

/* Info buttons */
.game-btn.info {
    border-color: rgba(201,168,76,0.3);
    color: rgba(245,240,232,0.7);
}
.game-btn.info:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201,168,76,0.1);
}

/* Finish game — prominent crimson */
.game-btn.finish-game {
    background: rgba(139,26,26,0.88);
    border-color: rgba(180,50,50,0.65);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.09em;
}
.game-btn.finish-game:hover:not(:disabled) {
    background: var(--burgundy-hover);
    border-color: rgba(200,70,70,0.8);
    box-shadow: 0 0 18px rgba(139,26,26,0.6), 0 2px 8px rgba(0,0,0,0.4);
    transform: translateY(-1px);
}

/* Active (manual combo mode on) */
.game-btn.active {
    background: rgba(107,26,26,0.8) !important;
    border-color: rgba(160,40,40,0.7) !important;
    color: var(--ivory) !important;
    box-shadow: 0 0 12px rgba(107,26,26,0.4);
}

/* Finish game pulsing when available */
.finish-game-highlight {
    animation: finishGamePulse 1.5s ease-in-out infinite;
}
@keyframes finishGamePulse {
    0%, 100% { box-shadow: 0 0 12px rgba(107,26,26,0.5); }
    50%       { box-shadow: 0 0 24px rgba(107,26,26,0.9); transform: scale(1.02); }
}

/* Manual combo panel */
.manual-combo-panel {
    background: rgba(10,25,16,0.75);
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    padding: 12px;
    margin: 6px 0;
    backdrop-filter: blur(4px);
}
.manual-combos {
    margin-top: 8px;
    max-height: 150px;
    overflow-y: auto;
}
.manual-combo-item {
    display: flex; align-items: center;
    justify-content: space-between;
    background: rgba(201,168,76,0.07);
    padding: 6px 10px; margin: 4px 0;
    border-radius: 5px;
    border: 1px solid var(--gold-dim);
}
.manual-combo-item .combo-type {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 12px;
    color: var(--gold);
}
.manual-combo-item .combo-cards {
    color: var(--ivory-dim); font-size: 12px;
}
.remove-combo {
    background: var(--burgundy);
    border: none; color: var(--ivory);
    width: 22px; height: 22px;
    border-radius: 50%; cursor: pointer;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.remove-combo:hover { background: var(--burgundy-hover); transform: scale(1.1); }

.no-combos {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    font-family: 'PT Serif', Georgia, serif;
    padding: 16px;
}

/* ══════════════════════════════════════════════════════════════
   GAME MESSAGES WINDOW (log panel — top right)
══════════════════════════════════════════════════════════════ */
.game-messages {
    position: fixed;
    top: 10px; right: 10px;
    width: 248px;
    max-height: 300px;
    background: rgba(10,22,14,0.92);
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 10px;
    box-shadow: 0 6px 28px rgba(0,0,0,0.65), 0 0 0 1px rgba(201,168,76,0.08);
    backdrop-filter: blur(10px);
    cursor: move;
    user-select: none;
    z-index: 1000;
    font-size: 12px;
}

.messages-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px;
    background: rgba(201,168,76,0.12);
    border-bottom: 1px solid var(--gold-dim);
    border-radius: 7px 7px 0 0;
    cursor: move; user-select: none;
}
.messages-header h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 13px;
    font-variant: small-caps;
    letter-spacing: 0.12em;
    color: var(--gold);
}

.clear-btn {
    background: rgba(201,168,76,0.1);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    padding: 2px 6px; border-radius: 3px;
    font-size: 9px; cursor: pointer;
    transition: all var(--animation-speed) ease;
}
.clear-btn:hover { background: rgba(201,168,76,0.2); }

.messages-content {
    max-height: 230px;
    overflow-y: auto;
    padding: 6px;
    display: flex; flex-direction: column; gap: 3px;
}
.messages-content::-webkit-scrollbar { width: 3px; }
.messages-content::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.messages-content::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }

.message {
    padding: 5px 8px;
    background: rgba(240,223,168,0.04);
    border-left: 2px solid rgba(201,168,76,0.4);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--parchment-dim);
    animation: messageAppear 0.3s ease;
}
.message.ai-action {
    background: rgba(201,168,76,0.08);
    border-left-color: var(--gold);
    color: var(--parchment);
    font-style: italic;
}
.message.penalty {
    background: rgba(107,26,26,0.2);
    border-left-color: var(--burgundy);
    color: rgba(245,200,190,0.9);
    font-style: normal; font-weight: 600;
}
.message.win {
    background: rgba(201,168,76,0.15);
    border-left-color: var(--gold);
    color: var(--gold);
    font-style: normal; font-weight: 600;
}
.message.warning {
    background: rgba(107,26,26,0.15);
    border-left-color: rgba(160,80,40,0.7);
    color: rgba(245,200,180,0.9);
}

@keyframes messageAppear {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════════════
   MODALS — Rules, Tournament, Settings
══════════════════════════════════════════════════════════════ */
.modal-overlay, .settings-modal {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.78);
    z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.settings-modal { display: none; justify-content: center; align-items: center; }

.modal-content {
    background: #0e2418;
    border: 1px solid var(--gold-dim);
    border-radius: 14px;
    max-width: 820px;
    max-height: 90vh;
    width: 95%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    display: flex; flex-direction: column; overflow: hidden;
}

.settings-content {
    background: #0e2418;
    border: 1px solid var(--gold-dim);
    border-radius: 14px;
    max-width: 620px;
    max-height: 82vh;
    width: 95%;
    overflow-y: auto;
    padding: 28px;
    color: var(--ivory);
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.settings-content.large { max-width: 820px; }

.modal-header, .settings-header {
    background: rgba(201,168,76,0.1);
    border-bottom: 1px solid var(--gold-dim);
    padding: 18px 24px;
    display: flex; justify-content: space-between; align-items: center;
}
.modal-header h2, .settings-header h2 {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--gold);
    text-shadow: 0 1px 8px rgba(201,168,76,0.2);
    margin: 0;
}

.close-btn {
    background: none; border: none;
    color: var(--gold); font-size: 22px;
    cursor: pointer; padding: 4px;
    border-radius: 50%; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--animation-speed);
}
.close-btn:hover { background: rgba(201,168,76,0.15); }

.close-settings {
    background: none; border: none;
    font-size: 22px; cursor: pointer;
    color: var(--gold); padding: 4px;
    transition: color var(--animation-speed);
}
.close-settings:hover { color: var(--gold-bright); }

.modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.settings-section {
    background: rgba(201,168,76,0.05);
    padding: 16px;
    border-radius: 8px;
    border-left: 3px solid var(--gold-dim);
    margin-bottom: 20px;
    color: var(--ivory-dim);
}
.settings-section h3 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--gold);
    font-size: 15px;
    margin: 0 0 14px 0;
    border-left: none; padding-left: 0;
    display: flex; align-items: center; gap: 7px;
}
.settings-section p, .settings-section li {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--parchment);
}
.settings-section strong { color: var(--ivory); }

.setting-item {
    display: flex;
    justify-content: space-between; align-items: center;
    margin-bottom: 12px; padding: 10px 14px;
    background: rgba(13,27,18,0.55);
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--parchment);
}
.setting-item label {
    font-weight: 500; flex: 1;
    margin-right: 12px; margin-bottom: 0;
    color: var(--ivory-dim);
    display: block;
}
.setting-item label:has(input[type="checkbox"]) {
    display: flex; align-items: center; cursor: pointer;
}
.setting-item input[type="checkbox"] {
    margin-right: 8px; transform: scale(1.2); accent-color: var(--gold);
}
.setting-item select {
    padding: 7px 10px;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 6px;
    font-size: 13px;
    background: rgba(10,25,16,0.9);
    color: var(--ivory);
    min-width: 120px;
    font-family: 'PT Serif', Georgia, serif;
}
.setting-item select:focus { outline: none; border-color: var(--gold); }
.setting-item input:not([type="checkbox"]) {
    padding: 7px 10px;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 6px;
    min-width: 120px;
    font-size: 13px;
    background: rgba(10,25,16,0.9);
    color: var(--ivory);
}

.variant-description {
    background: rgba(201,168,76,0.07);
    border: 1px solid var(--gold-dim);
    padding: 10px 12px;
    border-radius: 6px;
    font-family: 'PT Serif', Georgia, serif;
    font-style: italic;
    color: var(--gold);
    margin-top: 8px;
    font-size: 13px;
}

.modal-footer, .settings-actions {
    background: rgba(8,20,13,0.8);
    border-top: 1px solid var(--gold-dim);
    padding: 12px 20px;
    display: flex; justify-content: space-between;
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--gold-dim);
}

.settings-btn, .modal-footer .game-btn {
    padding: 11px 24px;
    border: 1.5px solid var(--gold-dim);
    border-radius: 28px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    color: var(--parchment);
}
.settings-btn:hover, .modal-footer .game-btn:hover {
    background: rgba(201,168,76,0.12);
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-1px);
}
.settings-btn.primary {
    background: transparent;
    border: 1.5px solid var(--gold);
    color: var(--parchment);
}
.settings-btn.primary:hover {
    background: var(--gold);
    color: #0D1B12;
    box-shadow: 0 4px 16px rgba(201,168,76,0.3);
}
.settings-btn.secondary {
    color: var(--ivory-dim);
}

/* Score / tournament table */
.score-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: 14.5px;
    color: var(--parchment);
}
.score-table th {
    background: rgba(201,168,76,0.15);
    color: var(--gold);
    padding: 8px 12px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 13px;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--gold-dim);
    text-align: left;
}
.score-table td {
    padding: 7px 12px;
    border-bottom: 1px solid rgba(201,168,76,0.1);
    color: var(--ivory-dim);
}
.score-table tr:hover td { background: rgba(201,168,76,0.05); }
.score-table .total-row td { color: var(--gold); font-weight: 600; }
/* A line after every 4 rounds (one circle of dealers), as on the paper score sheet */
.score-table tr.circle-end td { border-bottom: 2px solid rgba(201,168,76,0.55); }
/* End of the game: totals rounded to tens, then the settlement (each player against each) */
.score-table .settle-row td { color: #fff3cf; border-top: 1px solid rgba(201,168,76,0.35); }
.score-table .settle-final td { font-size: 1.08em; background: rgba(201,168,76,0.10); }
.score-table .settle-final td.settle-best { color: #4ade80; }

/* Doubled / tripled / x4+ rounds (tournament table and round results) */
tr.mult-round td { color: #fff4e0; font-weight: 600; }
tr.mult-x2 td { background: rgba(230, 150, 30, 0.20); }
tr.mult-x3 td { background: rgba(225, 85, 35, 0.26); }
tr.mult-x4 td { background: rgba(190, 40, 80, 0.32); }
tr.mult-round td:first-child { box-shadow: inset 4px 0 0 var(--mult-edge, #e6961e); }
tr.mult-x3 { --mult-edge: #e15523; }
tr.mult-x4 { --mult-edge: #be2850; }
tr.mult-round:hover td { filter: brightness(1.12); }
tr.mult-now td { color: var(--ivory-dim); font-weight: 400; }
tr.mult-now td:first-child { color: #fff4e0; font-weight: 600; }
.mult-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--mult-edge, #e6961e);
    color: #1a1205;
    font: 700 11px/1.5 'PT Sans', Arial, sans-serif;
    white-space: nowrap;
    vertical-align: 1px;
}
tr.mult-x3 .mult-badge, tr.mult-x4 .mult-badge { color: #fff; }

.table-info {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 14px;
    color: var(--ivory-dim);
    margin-bottom: 14px;
    display: flex; gap: 24px;
}
.tournament-rules {
    margin-top: 18px;
    padding: 14px;
    background: rgba(201,168,76,0.06);
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    font-family: 'PT Serif', Georgia, serif;
    font-size: 13px;
}
.tournament-rules h4 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--gold); margin-bottom: 8px;
}
.tournament-rules ul { margin: 0; padding-left: 20px; list-style-position: outside; }   /* the dots inside the box, by the text */
.tournament-rules li { color: var(--ivory-dim); line-height: 1.8; }
.tournament-container { overflow-x: auto; }
.current-round-display, .current-dealer-display { color: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   COMBINATION AREA (inline)
══════════════════════════════════════════════════════════════ */
#combination-area {
    background: rgba(10,25,16,0.75);
    border: var(--panel-border);
    margin: 0 16px 8px;
    padding: 8px;
    border-radius: 10px;
    box-shadow: var(--shadow-warm);
}
#combination-area h3 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--gold); margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
}
.combination-item {
    background: rgba(201,168,76,0.06);
    border: 1px solid var(--gold-dim);
    border-radius: 7px;
    margin-bottom: 8px; padding: 9px;
}
.combo-header {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 7px;
}
.combo-type {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600; color: var(--gold);
}
.combo-score { color: var(--gold); font-weight: 600; }
.combo-highlight-btn {
    background: rgba(201,168,76,0.15);
    color: var(--gold); border: 1px solid var(--gold-dim);
    padding: 3px 8px; border-radius: 4px;
    cursor: pointer; font-size: 11px;
    transition: background var(--animation-speed);
}
.combo-highlight-btn:hover { background: rgba(201,168,76,0.28); }
.combo-cards-text { font-size: 13px; color: var(--ivory-dim); margin-top: 4px; }
.no-combinations {
    text-align: center; color: var(--text-muted);
    font-style: italic; padding: 16px;
    font-family: 'PT Serif', Georgia, serif;
}
#combination-list { display: flex; flex-wrap: wrap; gap: 12px; }
.combination {
    background: rgba(201,168,76,0.08);
    padding: 8px 14px; border-radius: 8px;
    border: 1px solid var(--gold-dim);
    display: flex; align-items: center; gap: 8px;
    font-family: 'PT Serif', Georgia, serif;
}
.combination-type {
    background: rgba(201,168,76,0.2);
    color: var(--gold); padding: 2px 8px;
    border-radius: 10px; font-size: 11px;
    font-family: 'Playfair Display', Georgia, serif;
    font-variant: small-caps;
}

/* ══════════════════════════════════════════════════════════════
   RULES MODAL (JS-created: .rules-modal class)
══════════════════════════════════════════════════════════════ */
.rules-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10000;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.rules-modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.rules-modal.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.rules-modal-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.rules-modal-content {
    background: #0e2418;
    border: 1px solid var(--gold-dim);
    border-radius: 14px;
    max-width: 820px;
    max-height: 90vh;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rules-header {
    background: rgba(201,168,76,0.1);
    border-bottom: 1px solid var(--gold-dim);
    padding: 16px 24px;
    border-radius: 13px 13px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rules-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 1px 10px rgba(201,168,76,0.25);
    display: flex;
    align-items: center;
    gap: 10px;
}
.close-rules-btn {
    background: rgba(201,168,76,0.1);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.close-rules-btn:hover {
    background: rgba(201,168,76,0.2);
    transform: rotate(90deg);
}
.rules-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    color: var(--ivory-dim);
    scrollbar-width: thin;
    scrollbar-color: var(--gold-dim) transparent;
}
.rules-content::-webkit-scrollbar { width: 4px; }
.rules-content::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }
.rules-section {
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(201,168,76,0.05);
    border-radius: 8px;
    border-left: 3px solid var(--gold-dim);
}
.rules-section h3 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--gold);
    margin-bottom: 12px;
    font-size: 16px;
    display: flex; align-items: center; gap: 7px;
}
.rules-section p, .rules-section li {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.68;
    color: var(--parchment);
    margin-bottom: 8px;
}
.rules-section ul, .rules-section ol {
    padding-left: 18px; margin-bottom: 12px;
}
.highlight {
    background: rgba(201,168,76,0.1);
    border: 1px solid var(--gold-dim);
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid var(--gold);
    font-family: 'PT Serif', Georgia, serif;
    font-size: 14px;
    color: var(--ivory-dim);
    margin-bottom: 14px;
}
.combination-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
.combo-type {
    background: rgba(201,168,76,0.06);
    padding: 12px;
    border-radius: 7px;
    border: 1px solid var(--gold-dim);
}
.combo-type h4 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--gold);
    margin-bottom: 8px;
    font-size: 14px;
}
.combo-type p { font-size: 13px; margin-bottom: 4px; }
.combo-rule {
    font-style: italic;
    color: var(--text-muted);
    font-size: 12px !important;
}
.scoring-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px; margin: 12px 0;
}
.score-item {
    display: flex;
    justify-content: space-between;
    padding: 9px 13px;
    background: rgba(201,168,76,0.06);
    border-radius: 6px;
    border-left: 2px solid var(--gold-dim);
    font-family: var(--font-ui);
    font-size: 14px;
}
.score-type { color: var(--parchment); }
.score-value { font-weight: 700; color: var(--gold); }
.score-note {
    font-size: 12px; color: var(--text-muted);
    font-style: italic; margin-top: 8px;
    font-family: 'PT Serif', Georgia, serif;
}
.quick-tips {
    background: rgba(201,168,76,0.08) !important;
    border-left-color: var(--gold) !important;
}
.quick-tips h3 { color: var(--gold-bright) !important; }
.rules-footer {
    background: rgba(8,20,13,0.85);
    padding: 16px 24px;
    border-radius: 0 0 13px 13px;
    border-top: 1px solid var(--gold-dim);
    display: flex;
    justify-content: center;
}
.btn-primary {
    background: transparent;
    color: var(--parchment);
    border: 1.5px solid var(--gold);
    padding: 11px 32px;
    border-radius: 28px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex; align-items: center; gap: 8px;
}
.btn-primary:hover {
    background: var(--gold);
    color: #0D1B12;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(201,168,76,0.35);
}

/* ── Hidden buttons ─────────────────────────────────────────── */
#take-card, #discard-card { display: none !important; }

/* ── Misc helpers ───────────────────────────────────────────── */
#notifications { display: none; }
.notification { display: none; }

.turn-timer {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background: rgba(10,25,16,0.95);
    color: var(--gold);
    padding: 14px 26px; border-radius: 28px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px; font-weight: 700;
    border: 2px solid var(--gold);
    z-index: 1000; display: none;
    animation: timerPulse 1s ease-in-out infinite;
}
.turn-timer.timer-caution { border-color: #e6a817; color: #e6a817; }
.turn-timer.timer-warning { border-color: #c0392b; color: #c0392b; animation: urgentPulse 0.5s ease-in-out infinite; }

@keyframes timerPulse {
    0%, 100% { transform: translate(-50%,-50%) scale(1); }
    50%       { transform: translate(-50%,-50%) scale(1.04); }
}
@keyframes urgentPulse {
    0%, 100% { transform: translate(-50%,-50%) scale(1); }
    50%       { transform: translate(-50%,-50%) scale(1.08); }
}

/* ── Animation utilities ────────────────────────────────────── */
.fade-in   { animation: fadeIn 0.5s ease-in; }
.slide-up  { animation: slideUp 0.3s ease-out; }
.bounce-in { animation: bounceIn 0.6s ease-out; }

@keyframes fadeIn  { from { opacity: 0; }                                  to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; }     to { transform: translateY(0); opacity: 1; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); }   to { opacity: 1; transform: translateY(0); } }

@keyframes bounceIn {
    0%   { transform: scale(0.3); opacity: 0; }
    50%  { transform: scale(1.05); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    #game-board { grid-template-columns: 250px 1fr 250px; }
    :root { --card-width: 60px; --card-height: 90px; }
}

@media (max-width: 768px) {
    #game-header { flex-direction: column; gap: 10px; padding: 12px; }
    .header-controls { flex-wrap: wrap; justify-content: center; }
    #game-board {
        grid-template-areas:
            "player1"
            "center"
            "player3";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        padding: 8px;
    }
    .player-right, .player-left { display: none; }
    #game-controls { flex-wrap: wrap; padding: 10px; }
    .game-btn { min-width: 90px; }
    .modal-body { grid-template-columns: 1fr; gap: 14px; }
    .modal-content { max-height: 95vh; margin: 8px; }
    .game-messages { width: 200px; top: 5px; right: 5px; max-height: 250px; }
    .messages-content { max-height: 190px; }
    .game-table { gap: 18px; flex-wrap: wrap; justify-content: center; }
    .deck-container, .trump-container, .discard-container { min-width: 80px; }
}

@media (max-width: 480px) {
    .settings-content { margin: 12px; padding: 16px; max-height: 92vh; }
    .setting-item { flex-direction: column; align-items: stretch; gap: 8px; }
    .setting-item input, .setting-item select { min-width: auto; width: 100%; }
}

/* modal body single-col for 6th section */
.modal-body .settings-section:nth-child(6) { grid-column: 1 / -1; }

/* ── Bigger, easier-to-read text (phones get their own sizes in mobile.css) ── */
.card-rank { font-size: 15px; }
.card-suit { font-size: 12px; }
.game-btn { font-size: 12.5px; }
.control-btn, .rules-btn { font-size: 13px; }
.player-name { font-size: 17px; }
.player-score, .card-count { font-size: 15px; }
.game-info span { font-size: 13px; }
.deck-description, .discard-description { font-size: 13px; }
.trump-placeholder, .discard-placeholder, .trump-name { font-size: 13px; }
.current-turn { font-size: 15px; }
.message { font-size: 14px; }
.messages-header h4 { font-size: 14px; }
.no-combos { font-size: 14px; }
.card-count-badge { width: 22px; height: 22px; font-size: 12px; }

/* My hand is centred in its box (auto margins, not justify-content: an overflowing hand
   must still scroll to its first card) */
#hand-3 > .card:not(.card ~ .card) { margin-left: auto; }   /* the first card (the «1» marker may come before it) */
#hand-3 > .card:not(:has(~ .card)) { margin-right: auto; }   /* the last card: not :last-child, the «1» marker of the last card comes after it */

/* ════════════════ Computer screens ════════════════
   Nothing overlaps: the left seat runs down the whole left side, the right seat down the right
   side above the messages window; the middle column holds the top seat (name, cards and
   combinations in one row), the table, and my seat. Cards scale with the window height and my
   hand spreads over its whole width. */
@media (min-width: 901px) and (min-height: 501px) {
    :root {
        --card-height: clamp(76px, 12.5vh, 120px);
        --card-width: calc(var(--card-height) * 0.68);
        --side-w: clamp(220px, 15.5vw, 290px);
        --opp-card-h: clamp(56px, 7.6vh, 72px);      /* opponents' laid cards */
        --opp-card-w: calc(var(--opp-card-h) * 0.68);
        --my-combo-h: clamp(60px, 9.2vh, 90px);      /* my laid cards */
        --my-combo-w: calc(var(--my-combo-h) * 0.68);
    }

    #game-board {
        grid-template-areas:
            "player4 player1 player2"
            "player4 center  player2"
            "player4 player3 player2";
        grid-template-columns: var(--side-w) minmax(0, 1fr) var(--side-w);
        grid-template-rows: auto minmax(calc(var(--card-height) + 56px), 1fr) minmax(0, auto);
        gap: 8px;
        padding: 8px 10px;
        overflow: hidden;
    }
    .player-area { gap: 6px; padding: 6px; min-height: 0; min-width: 0; }
    /* the top seat is never squeezed below its content (it would spill onto the table); in my
       seat only my own combinations give way on a low screen (they scroll inside) */
    .player-top { min-height: auto; }
    .player-bottom { overflow: hidden; }
    .player-bottom > .player-info, .player-bottom > #hand-3 { flex-shrink: 0; }
    .player-bottom > .player-laid-combinations { flex: 0 1 auto; min-height: 0; }
    .player-info { padding: 5px 14px; }

    /* Side seats: scroll inside only if a player has a huge number of combinations;
       the right one leaves the bottom corner to the messages window */
    .player-left, .player-right {
        overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
        scrollbar-color: rgba(201,168,76,0.35) transparent;
    }

    /* Top seat: name and cards on the left, combinations to the right of them */
    .player-top {
        display: grid;
        grid-template-columns: minmax(200px, auto) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        align-items: start;
        column-gap: 10px;
    }
    .player-top > .player-info { grid-column: 1; grid-row: 1; }
    .player-top > .player-hand { grid-column: 1; grid-row: 2; }
    .player-top > .player-laid-combinations { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: stretch; }

    /* Opponents' face-down cards: a compact fan with the number of cards next to it */
    .player-hand:has(> .card-back) {
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        overflow: hidden; min-height: 0; padding: 4px 6px; border: 0;
    }
    .player-hand > .card-back {
        position: relative; flex: 0 0 auto;
        width: 40px; height: 58px; border-radius: 5px; border-width: 1.5px;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.45);
    }
    .player-hand > .card-back::before { font-size: 16px; }
    .player-hand > .card-back + .card-back { margin-left: -32px !important; }
    .player-hand:has(> .card-back)::after {
        content: attr(data-count);
        order: -1;   /* before the fan, so a narrow seat cuts the fan, not the number */
        margin-right: 12px; min-width: 28px; padding: 1px 8px;
        border-radius: 12px; text-align: center;
        background: rgba(201,168,76,0.18); border: 1px solid rgba(201,168,76,0.5);
        color: var(--parchment); font: 700 14px/1.4 var(--font-ui);
    }
    .player-left .player-hand > .card-back + .card-back,
    .player-right .player-hand > .card-back + .card-back { margin-left: -34px !important; }
    .player-left .player-hand:has(> .card-back)::after,
    .player-right .player-hand:has(> .card-back)::after { margin-right: 8px; }
    .player-left .player-hand:has(> .card-back), .player-right .player-hand:has(> .card-back) { justify-content: flex-start; }

    /* My seat: slim name bar; the combination labels say enough, no extra title */
    .player-bottom > .player-info { padding: 2px 14px; }
    .player-bottom .player-laid-combinations h4 { display: none; }

    /* Combinations: smaller cards for opponents, medium for mine; empty boxes take no room */
    .player-laid-combinations { padding: 6px 8px; margin-top: 0; }
    .player-laid-combinations.combos-empty,
    .player-laid-combinations:not(:has(.laid-combo)) { display: none; }
    .combo-display { gap: 14px 8px; padding-top: 8px; }
    .laid-combo { padding: 9px 6px 5px; gap: 2px; }
    /* Opponents' combinations are fanned like a hand: the rank and suit of every card stay
       readable, and all of a player's combinations fit on screen without scrolling */
    .player-area:not(.player-bottom) .laid-combo .card {
        width: var(--opp-card-w); height: var(--opp-card-h); padding: 3px 4px;
        box-shadow: -2px 0 5px rgba(0,0,0,0.3);
    }
    .player-area:not(.player-bottom) .laid-combo .card + .card { margin-left: calc(var(--opp-card-w) * -0.5); }
    .player-area:not(.player-bottom) .laid-combo .card:hover { transform: translateY(-4px); z-index: 5; }
    .player-area:not(.player-bottom) .laid-combo .card .card-main-symbol { font-size: 18px; }
    .player-area:not(.player-bottom) .laid-combo .card .card-corner-bottom { display: none; }
    .player-area:not(.player-bottom) .laid-combo .card .card-rank { font-size: 15px; }
    .player-area:not(.player-bottom) .laid-combo .card .card-suit { font-size: 13px; }
    .player-bottom .laid-combo .card { width: var(--my-combo-w); height: var(--my-combo-h); padding: 4px; }
    .player-bottom .laid-combo .card .card-main-symbol { font-size: 24px; }
    .laid-combo .card .card-rank { font-size: 13px; }
    .laid-combo .card .card-suit { font-size: 11px; }
    /* the combination-type tag in the top-right corner overlaps the last card: the label on the frame says it */
    .laid-combo .combo-info { display: none; }
    .player-bottom .player-laid-combinations { max-height: calc(var(--my-combo-h) + 64px); overflow-y: auto; scrollbar-width: thin; }

    /* Table: deck, trump and discard pile in one panel, whose turn right under it */
    .center-area { min-height: 0; flex-direction: row; gap: 18px; justify-content: center; }
    .game-table { gap: 40px !important; padding: 8px 34px 10px !important; }
    .deck-container, .trump-container, .discard-container { gap: 2px; }
    .deck-description, .discard-description { margin-top: 10px; padding: 0 10px; line-height: 1.5; }
    .current-turn { padding: 6px 18px; }

    /* My hand: every card fully visible while it fits; overlapping only as much as needed */
    #hand-3 {
        container-type: inline-size;
        flex-wrap: nowrap; overflow: visible; gap: 0;
        padding: 12px 10px 4px; min-height: calc(var(--card-height) + 18px);
    }
    #hand-3 > .card {
        flex: 0 0 auto;
        margin-left: clamp(calc(var(--card-width) * -0.62),
                           calc((100cqw - 20px - var(--n, 14) * var(--card-width)) / max(var(--n, 14) - 1, 1)),
                           6px) !important;
    }
    #hand-3 > .card:not(.card ~ .card) { margin-left: auto !important; }
    #hand-3 .card-rank { font-size: 16px; }
    #hand-3 .card-suit { font-size: 13px; }

    /* Messages: a one-line strip in the middle of the header, moved there by ui.js
       (initializeMessagesWindow); a click opens the whole list below it */
    /* It takes only the free space between the title and the buttons */
    #game-header:has(> .game-messages.in-header) { position: relative; z-index: 30; gap: 16px; }
    .game-messages.in-header {
        position: relative !important; top: auto !important; right: auto !important;
        flex: 1 1 auto; min-width: 0;
        width: auto !important; max-width: 460px;
        height: 30px; max-height: none !important;
        cursor: pointer; z-index: 30;
        box-shadow: none; backdrop-filter: none;
    }
    .game-messages.in-header .messages-header { display: none; }
    .game-messages.in-header .messages-content {
        height: 100%; max-height: none !important; box-sizing: border-box;
        padding: 3px 6px; overflow: hidden;
    }
    /* flex-shrink: 0 — otherwise all messages are squeezed into the strip instead of scrolling */
    .game-messages.in-header .message { flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; }
    /* Opened: the whole list drops down over the table */
    .game-messages.in-header.expanded .messages-content {
        position: absolute; top: 0; left: 0; right: 0;
        height: auto; max-height: 60vh !important; overflow-y: auto;
        background: rgba(10,22,14,0.97);
        border: 1px solid rgba(201,168,76,0.5); border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.7);
    }
    .game-messages.in-header.expanded .message { white-space: normal; }

    /* Narrower computer screens and tablets (iPad landscape 1024px): slimmer side seats,
       a narrower table, short button labels so the buttons stay in one row */
    @media (max-width: 1365px) {
        .btn-long { display: none; }
        #show-rules, #show-tournament { font-size: 0 !important; padding: 0 11px; gap: 0; justify-content: center; }
        #show-rules i, #show-tournament i { font-size: 15px; }
    }
    @media (max-width: 1279px) {
        :root { --side-w: 180px; }
        .game-table { gap: 18px !important; padding: 8px 16px 10px !important; }
        .player-top { grid-template-columns: minmax(165px, auto) minmax(0, 1fr); }
        .current-turn { white-space: nowrap; padding: 6px 12px; }
        .player-info { padding: 5px 10px; }
    }

    /* The number of cards in the deck: a badge on its corner, clear of the "Колода" caption */
    .deck-label { bottom: auto; top: -9px; left: auto; right: -12px; transform: none; padding: 1px 7px !important; z-index: 5; }
}

/* ── Checking a computer player's win (single player; online: mp-table.js) ──
   A panel over the top of the table; the winner's combinations stay visible under it */
#win-check {
    position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 2500;
    width: min(560px, calc(100vw - 24px)); box-sizing: border-box;
    background: rgba(10,22,14,0.97); color: var(--parchment); border: 2px solid var(--gold); border-radius: 12px;
    padding: 12px 16px; box-shadow: 0 10px 36px rgba(0,0,0,0.7); text-align: center; line-height: 1.4;
}
#win-check h3 { margin: 0 0 4px; color: var(--gold-bright); font-family: var(--font-display); font-size: 18px; }
#win-check .wc-meta { font-size: 13px; opacity: 0.85; margin-top: 4px; }
#win-check .wc-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
#win-check .wc-actions button { border: 0; border-radius: 8px; padding: 9px 18px; font: 800 15px var(--font-ui); cursor: pointer; }
#win-check .wc-ok { background: #2e7d32; color: #fff; }
#win-check .wc-bad { background: #8e1b1b; color: #fff; border: 2px solid #ffb3a7 !important; }
.player-area.win-check-seat { box-shadow: 0 0 0 3px var(--gold-bright), 0 0 28px rgba(226,192,104,0.7) !important; }
@media (max-height: 500px) {
    #win-check { top: 40px; padding: 8px 12px; }
    #win-check h3 { font-size: 15px; }
    #win-check .wc-actions { margin-top: 6px; }
    #win-check .wc-actions button { padding: 6px 14px; font-size: 13px; }
}

/* No card counts on the table: not by the deck, not by the discard pile, not by the players
   (the owner's wish, 2026-10-29) */
.deck-label,
.discard-pile .card-count-badge,
.player-info .card-count,
.player-hand .mp-count { display: none !important; }
.player-hand::after { content: none !important; display: none !important; }