/* BazarBlot game table polish. Kept separate so gameplay layout and logic remain stable. */
.blot-table-wrap {
    isolation: isolate;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.blot-table {
    background:
        radial-gradient(ellipse at 50% 42%, rgba(101, 205, 128, .16) 0%, transparent 52%),
        radial-gradient(circle at 82% 12%, rgba(126, 73, 145, .09), transparent 30%),
        repeating-linear-gradient(112deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px),
        linear-gradient(145deg, #176347 0%, #0b4e39 46%, #073328 100%);
    border-color: #503223;
    box-shadow:
        0 0 0 2px #906a30,
        0 0 0 4px #3c2519,
        0 0 0 7px #573521,
        inset 0 0 0 2px rgba(211, 167, 90, .2),
        inset 0 0 72px rgba(0, 0, 0, .42),
        0 24px 58px rgba(0, 0, 0, .46);
}

.blot-table::before {
    inset: 14px;
    border: 2px solid rgba(214, 166, 70, .3);
    box-shadow: inset 0 0 0 1px rgba(69, 39, 17, .52), 0 0 10px rgba(218, 165, 62, .08);
}

.blot-table::after {
    color: #f3d881;
    opacity: .08;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}

/* Keep the deck anchor for dealing coordinates, but do not render its stack. */
.main.game-page-active .deck {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Compact, high-contrast table HUD. */
.blot-scoreboard,
.blot-last-trick,
.blot-taken-score {
    background:
        linear-gradient(145deg, rgba(20, 55, 68, .96), rgba(6, 27, 37, .98));
    border: 1px solid rgba(112, 202, 224, .18);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(212, 243, 250, .06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.blot-scoreboard { padding: 7px 11px; border-radius: 13px; }
.blot-score-divider { height: 34px; background: rgba(123, 205, 225, .16); }
.blot-score-label { margin-bottom: 1px; color: rgba(210, 237, 244, .62); font-size: .61rem; font-weight: 800; }
.blot-score-value { color: #eafaff; font-size: 1.25rem; line-height: 1; text-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
.blot-last-trick { border-radius: 13px; }
.blot-last-trick-title { color: rgba(210, 237, 244, .62); }
.blot-last-trick-score {
    color: #eafaff;
    background: rgba(70, 184, 214, .16);
    border-color: rgba(107, 211, 237, .28);
}
.blot-taken-score { background-color: #0b2631; border-color: rgba(112, 202, 224, .18); }
.blot-taken-score > div:first-child { color: #71efa2; }
.blot-taken-score > div:last-child { color: #ff9b8e; }

/* Warm game HUD: matches the oak rail and the new graphite-gold interface. */
.blot-scoreboard,
.blot-last-trick,
.blot-taken-score {
    background: linear-gradient(145deg, rgba(68, 55, 43, .97), rgba(32, 29, 31, .985));
    border-color: rgba(218, 173, 86, .2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 239, 202, .055);
}
.blot-score-divider { background: rgba(218, 173, 86, .16); }
.blot-score-label,
.blot-last-trick-title { color: rgba(235, 218, 184, .68); }
.blot-score-value { color: #fff2ce; }
.blot-last-trick-score {
    color: #fff0bd;
    background: rgba(196, 143, 50, .17);
    border-color: rgba(225, 180, 82, .3);
}
.blot-taken-score > div:first-child { color: #9ee0aa; }
.blot-taken-score > div:last-child { color: #f0a28f; }

.blot-chat-toggle {
    color: #fff3ca;
    background: radial-gradient(circle at 50% 10%, rgba(246, 191, 61, .2), transparent 52%), linear-gradient(155deg, #59432e, #2a2526 78%);
    border-color: rgba(227, 181, 90, .28);
    box-shadow: 0 5px 0 #3b281b, 0 12px 26px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 240, 203, .08);
}
.blot-chat-toggle:hover {
    border-color: rgba(242, 198, 106, .48);
    box-shadow: 0 6px 0 #3b281b, 0 15px 30px rgba(0, 0, 0, .38), 0 0 18px rgba(225, 168, 53, .1);
}
.blot-chat-menu {
    background: radial-gradient(circle at 12% 0, rgba(219, 161, 55, .12), transparent 36%), linear-gradient(155deg, rgba(67, 55, 44, .99), rgba(31, 28, 32, .995));
    border-color: rgba(223, 178, 88, .24);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 239, 202, .055);
}
.blot-chat-title { color: rgba(241, 222, 184, .74); }
.blot-chat-section:not(:last-child) { border-bottom-color: rgba(218, 173, 86, .12); }
.blot-chat-emoji,
.blot-chat-message {
    color: #fff5dd;
    background: rgba(37, 31, 31, .86);
    border-color: rgba(218, 173, 86, .14);
}
.blot-chat-emoji:hover,
.blot-chat-message:hover {
    background: rgba(91, 65, 40, .94);
    border-color: rgba(238, 191, 94, .34);
}

/* Players feel anchored to the table; the current turn reads immediately. */
.blot-avatar,
.blot-player-name {
    background: linear-gradient(180deg, rgba(50, 52, 53, .98), rgba(25, 27, 28, .98));
    border-color: rgba(225, 188, 104, .38);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.blot-avatar {
    background: linear-gradient(145deg, #684a35 0%, #493426 48%, #2f2824 100%);
    border-color: rgba(218, 174, 96, .48);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 226, 169, .12);
}
.blot-player-name {
    box-shadow: 0 5px 12px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .055);
}

.blot-player-active .blot-avatar {
    border-color: #f8d35f;
    box-shadow: 0 0 0 4px rgba(255, 211, 85, .23), 0 0 24px rgba(255, 207, 71, .5), 0 9px 22px rgba(0, 0, 0, .38);
}

.blot-player-active .blot-player-name {
    border-color: rgba(255, 220, 108, .72);
    box-shadow: 0 0 0 2px rgba(255, 207, 71, .13), 0 7px 18px rgba(0, 0, 0, .38);
}

.blot-player-timer {
    background: linear-gradient(90deg, #eaa62b, #ffe36b);
    box-shadow: none;
}

.blot-player-active .blot-player-text {
    color: #fff7df;
    text-shadow: 0 1px 2px rgba(24, 14, 8, .95), 0 0 5px rgba(20, 11, 7, .7);
}

/* Contract must remain readable over avatars and green felt. */
.blot-trump-badge {
    color: #171c13;
    background: linear-gradient(180deg, #fff3ba 0%, #e5b94e 100%);
    border: 2px solid #fff0a7;
    box-shadow: 0 7px 15px rgba(0, 0, 0, .38), 0 0 0 2px rgba(91, 55, 9, .45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.blot-trump-bid { color: #3b2b08; font-weight: 950; }
.blot-trump-contra { background: linear-gradient(180deg, #f34c4c, #a91324); }

.blot-alert {
    color: #251b08;
    background: #fff0b8;
    border: 2px solid #e3ae35;
    box-shadow: 0 9px 20px rgba(0, 0, 0, .32);
}
.blot-alert::before { background: #fff0b8; }

/* Cards get separation without GPU-heavy filters. */
.blot-card {
    box-shadow: 0 4px 7px rgba(0, 0, 0, .25);
}
.blot-card.played,
.blot-card.blot-flying-card {
    box-shadow: none;
    image-rendering: auto;
}
.blot-card.played {
    will-change: transform;
    transform-style: flat;
}
.player-hand:not(.blot-hand-locked) .blot-card.card-valid.hand-card:hover:not(.played) {
    box-shadow: 0 8px 12px rgba(0, 0, 0, .3);
}
.blot-card.card-invalid:not(.played) { filter: brightness(.61) saturate(.68); }

/* Juicy actions, with restrained motion. */
.blot-game-action,
.blot-trump-modal.blot-trump-mode-contra .blot-trump-action-btn,
.blot-trump-modal.blot-trump-mode-recontra .blot-trump-action-btn {
    color: #fff8df;
    background: linear-gradient(180deg, #38574c 0%, #1a342c 100%);
    border-color: rgba(255, 226, 145, .42);
    box-shadow: 0 8px 0 #0b1d17, 0 12px 22px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .16);
    text-shadow: 0 2px 3px rgba(0, 0, 0, .42);
}
.blot-game-action-primary,
.blot-game-actions-combination .blot-game-action-confirm {
    color: #17300c;
    background: linear-gradient(180deg, #eaff71 0%, #75d632 55%, #43a721 100%);
    border-color: #efff9a;
    box-shadow: 0 8px 0 #286b16, 0 12px 24px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .52);
    text-shadow: 0 1px rgba(255, 255, 255, .42);
}
.blot-game-action.blot-game-action-contra,
.blot-trump-modal.blot-trump-mode-contra .blot-trump-contra-action,
.blot-trump-modal.blot-trump-mode-recontra .blot-trump-contra-action {
    background: linear-gradient(180deg, #ff665e 0%, #d52a39 58%, #9e172a 100%);
    border-color: #ffaaa0;
    box-shadow: 0 8px 0 #721020, 0 12px 24px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .28);
}
.blot-game-action:active { transform: translateY(5px) scale(.98); box-shadow: 0 3px 0 #0b1d17, 0 6px 12px rgba(0, 0, 0, .3); }

/* The rest of the game surface follows the arcade shell. */
.blot-waiting-room,
.blot-friend-invite,
.blot-socket-notice,
.blot-mobile-menu-panel,
.blot-trump-modal,
.blot-score,
.blot-result {
    color: #eafaff;
    background:
        radial-gradient(circle at 82% 0%, rgba(111, 82, 190, .13), transparent 34%),
        linear-gradient(150deg, rgba(20, 57, 70, .98), rgba(5, 25, 34, .99));
    border: 1px solid rgba(112, 202, 224, .2);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(220, 247, 252, .055);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.blot-waiting-room::before,
.blot-trump-modal::after,
.blot-score::after,
.blot-result::after {
    opacity: .35;
}

.blot-waiting-tip-icon,
.blot-mobile-menu-toggle {
    color: #7ce6fb;
    background: linear-gradient(145deg, rgba(31, 104, 125, .74), rgba(10, 45, 59, .9));
    border-color: rgba(112, 217, 240, .27);
    box-shadow: 0 7px 17px rgba(0, 0, 0, .27);
    backdrop-filter: none;
}

.blot-waiting-title,
.blot-friend-invite-code { color: #fff1b5; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.blot-waiting-dots i { background: #55d9f5; }
.blot-friend-invite-code { letter-spacing: .14em; }
.blot-socket-notice-dot { box-shadow: 0 0 0 4px rgba(85, 217, 245, .1); }

.blot-mobile-menu-item:hover,
.blot-mobile-menu-item:focus {
    color: #effcff;
    background: rgba(85, 196, 222, .11);
}

.blot-trump-card,
.blot-trump-bid-btn,
.blot-trump-bid-kp,
.blot-trump-bid-value {
    color: #eafaff;
    background: linear-gradient(160deg, rgba(35, 78, 91, .94), rgba(12, 40, 50, .98));
    border-color: rgba(123, 211, 231, .2);
    box-shadow: 0 6px 13px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .05);
}

.blot-trump-heart,
.blot-trump-diamond { color: #ff6f79; }
.blot-trump-card.blot-trump-active {
    color: #183008;
    background: linear-gradient(180deg, #eaff72, #72d432);
    border-color: #f1ff9e;
    box-shadow: 0 0 0 3px rgba(127, 223, 62, .16), 0 8px 18px rgba(0, 0, 0, .3);
}
.blot-trump-card.blot-trump-active.blot-trump-heart,
.blot-trump-card.blot-trump-active.blot-trump-diamond { color: #b51629; }
.blot-trump-action-primary,
.blot-result-button-play,
.blot-guest-register-button {
    color: #17300c;
    background: linear-gradient(180deg, #eaff71 0%, #75d632 58%, #43a721 100%);
    border-color: #efff9a;
    box-shadow: 0 6px 0 #286b16, 0 10px 18px rgba(0, 0, 0, .3);
}

.blot-score-header,
.blot-score-footer {
    color: #dff8ff;
    background: rgba(66, 170, 199, .09);
    border-color: rgba(112, 202, 224, .14);
}
.blot-score-column {
    background: rgba(4, 20, 28, .34);
    border: 1px solid rgba(112, 202, 224, .1);
}
.blot-score-detail-points,
.blot-score-total span { color: #8be7ff; }

.blot-result-ribbon {
    background: linear-gradient(90deg, #168a69, #42c983 50%, #168a69);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.blot-result-star,
.blot-result-chips,
.blot-result-chips i { color: #ffd86a; }
.blot-result-points { color: #a9eafa; }
.blot-result-button-exit {
    color: #dff5fa;
    background: linear-gradient(160deg, rgba(38, 78, 91, .94), rgba(13, 39, 49, .98));
    border-color: rgba(123, 211, 231, .2);
}

/* Round score and final result in the graphite-oak storefront palette. */
.blot-score,
.blot-result {
    color:#fff5dc;
    background:radial-gradient(circle at 82% 0,rgba(128,73,143,.14),transparent 34%),linear-gradient(150deg,rgba(70,55,42,.985),rgba(30,27,30,.995));
    border-color:rgba(222,177,88,.24);
    box-shadow:0 22px 52px rgba(0,0,0,.44),inset 0 1px rgba(255,240,205,.06);
}
.blot-score-header,
.blot-score-footer {
    color:#fff0c5;
    background:rgba(166,112,43,.13);
    border-color:rgba(218,173,86,.18);
}
.blot-score-column {
    background:rgba(31,26,27,.48);
    border-color:rgba(218,173,86,.12);
}
.blot-score-detail-points,
.blot-score-total span { color:#f5c85f; }
.blot-result-ribbon { background:linear-gradient(90deg,#9b6928,#e1af42 50%,#9b6928); }
.blot-result-points { color:#f0d6a0; }
.blot-result-button-exit {
    color:#f5e9d2;
    background:linear-gradient(160deg,rgba(83,65,49,.96),rgba(39,32,34,.99));
    border-color:rgba(218,173,86,.22);
}

/* Bidding panel matches the charcoal-and-gold header rather than the blue HUD. */
.blot-trump-modal {
    background:
        radial-gradient(circle at 86% -8%, rgba(132, 76, 151, .16), transparent 38%),
        linear-gradient(155deg, rgba(43, 43, 41, .99), rgba(16, 20, 21, .995));
    border-color: rgba(236, 194, 97, .2);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 235, 178, .055);
}

.blot-trump-card,
.blot-trump-bid-btn,
.blot-trump-bid-kp,
.blot-trump-bid-value {
    color: #f2f1ea;
    background: linear-gradient(160deg, rgba(83, 65, 43, .96), rgba(43, 34, 27, .99));
    border-color: rgba(229, 192, 108, .17);
}

.blot-trump-bid-value {
    color: #ffe28b;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .42);
}

.blot-trump-bid-btn:hover,
.blot-trump-bid-kp:not(.blot-trump-kp-active):hover,
.blot-trump-card:not(.blot-trump-active):hover {
    border-color: rgba(245, 205, 109, .4);
    background: linear-gradient(160deg, rgba(103, 79, 48, .98), rgba(52, 40, 29, .99));
}

/* Waiting state echoes the felt while remaining a distinct overlay. */
.blot-waiting-room {
    background: linear-gradient(150deg, rgba(22, 92, 67, .985), rgba(7, 54, 42, .995));
    border-color: rgba(211, 167, 90, .23);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(193, 239, 206, .07);
}
.blot-waiting-recommendation {
    background: rgba(3, 39, 29, .42);
    border-color: rgba(226, 190, 105, .14);
}
.blot-waiting-tip-icon {
    color: #f3cb68;
    background: rgba(213, 164, 55, .12);
    border-color: rgba(238, 195, 96, .24);
}
.blot-waiting-dots i { background: #e8bd56; }

/* Friend-table entry and its invitation state share the waiting-room palette. */
.friend-table-modal .modal-content,
.blot-friend-invite {
    background: linear-gradient(150deg, rgba(22, 92, 67, .985), rgba(7, 54, 42, .995));
    border-color: rgba(211, 167, 90, .23);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(193, 239, 206, .07);
}

.friend-table-icon {
    color: #f3cb68;
    background: rgba(213, 164, 55, .12);
    border-color: rgba(238, 195, 96, .24);
}

.friend-table-action,
.friend-table-code-wrap,
.friend-table-join {
    background: rgba(3, 39, 29, .42);
    border-color: rgba(226, 190, 105, .14);
}

.friend-table-action:hover {
    background: rgba(35, 109, 79, .72);
    border-color: rgba(238, 195, 96, .32);
}

@media (max-width: 932px), (hover: none) and (pointer: coarse) {
    .blot-table-wrap {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }
    .blot-table {
        border-color: #503223;
        box-shadow: 0 0 0 1px #906a30, 0 0 0 3px #3c2519, 0 0 0 5px #573521, inset 0 0 42px rgba(0, 0, 0, .4), 0 14px 30px rgba(0, 0, 0, .4);
    }
    .blot-table::before { inset: 9px; box-shadow: none; }
    .blot-player-active .blot-avatar {
        animation: none;
        box-shadow: 0 0 0 3px rgba(255, 211, 85, .3), 0 0 13px rgba(255, 207, 71, .38);
    }
    .blot-card { box-shadow: 0 3px 5px rgba(0, 0, 0, .24); }
    .blot-game-action { transition: transform .1s ease; }
    .blot-game-action::before { display: none; }
    .blot-scoreboard { padding: 6px 8px; border-radius: 11px; }
    .blot-score-value { font-size: 1.08rem; }
    .blot-waiting-room,
    .blot-friend-invite,
    .blot-socket-notice,
    .blot-mobile-menu-panel,
    .blot-trump-modal,
    .blot-score,
    .blot-result { box-shadow: 0 12px 26px rgba(0, 0, 0, .34); }
}

@media (prefers-reduced-motion: reduce) {
    .blot-player-active .blot-avatar,
    .blot-game-actions.blot-game-actions-show { animation: none !important; }
    .blot-game-action { transition: none; }
}

/* Final game-result skin: intentionally last to beat legacy result themes. */
.blot-score,
.blot-result,
.blot-levelup {
    color:#fff5dc !important;
    background:radial-gradient(circle at 82% 0,rgba(128,73,143,.14),transparent 34%),linear-gradient(150deg,rgba(70,55,42,.99),rgba(30,27,30,.998)) !important;
    border-color:rgba(222,177,88,.24) !important;
    box-shadow:0 22px 52px rgba(0,0,0,.44),inset 0 1px rgba(255,240,205,.06) !important;
}
.blot-result::before,
.blot-score::before,
.blot-levelup::before {
    background:radial-gradient(circle at center,rgba(226,177,82,.075),transparent 70%) !important;
}
.blot-result.blot-result-loss {
    background:radial-gradient(circle at 82% 0,rgba(164,65,78,.13),transparent 36%),linear-gradient(150deg,rgba(67,45,40,.99),rgba(30,26,29,.998)) !important;
}
.blot-levelup-reward { background:rgba(159,108,43,.13) !important;border-color:rgba(218,173,86,.18) !important; }

/* Decline, contra and recontra labels remain readable in every interaction state. */
.blot-game-action-decline,
.blot-game-action.blot-game-action-contra,
.blot-trump-pass,
.blot-trump-contra-action,
.blot-trump-modal.blot-trump-mode-contra .blot-trump-contra-action,
.blot-trump-modal.blot-trump-mode-recontra .blot-trump-contra-action {
    color:#fff !important;
}

/* Round score uses one outer surface instead of stacked inner panels. */
.blot-score .blot-score-header,
.blot-score .blot-score-footer {
    background:transparent !important;
    border:0 !important;
}
.blot-score .blot-score-header > div {
    background:transparent !important;
    border:0 !important;
    color:#fff0c5;
}
.blot-score .blot-score-column {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}
.blot-score .blot-score-detail + .blot-score-detail {
    border-top-color:rgba(222,177,88,.08);
}
.blot-score .blot-score-total {
    color:rgba(244,231,205,.8);
    background:rgba(203,153,63,.09) !important;
    border:1px solid rgba(227,184,95,.16) !important;
    box-shadow:none !important;
}

/* Exit mirrors the primary result action without competing with it. */
.blot-result .blot-result-button-exit {
    color:#fff !important;
    background:linear-gradient(180deg,#6b6258 0%,#4b443e 58%,#37322f 100%) !important;
    border-color:rgba(232,215,188,.3) !important;
    box-shadow:0 6px 0 #24211f,0 10px 18px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.16) !important;
    text-shadow:0 2px 3px rgba(0,0,0,.42);
}
.blot-result .blot-result-button-exit:hover,
.blot-result .blot-result-button-exit:focus-visible {
    color:#fff !important;
    background:linear-gradient(180deg,#776e63 0%,#554d46 58%,#3d3834 100%) !important;
    box-shadow:0 6px 0 #24211f,0 12px 21px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.18) !important;
}

/* Shared static felt on bidding controls, independent of state colors. */
.blot-trump-modal :is(.blot-trump-card, .blot-trump-bid-btn, .blot-trump-bid-kp, .blot-trump-action-btn) {
    position: relative;
}
.blot-trump-modal :is(.blot-trump-card, .blot-trump-bid-btn, .blot-trump-bid-kp, .blot-trump-action-btn)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: url('/images/profile-felt.svg') 0 0 / 180px 180px repeat;
    opacity: .45;
    pointer-events: none;
}

/* Move the complete upper player group into the free landscape space. */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
    #gameArea .blot-player-top { top: 10px; }
}


/* Static gold VIP treatment, shared by desktop and both mobile orientations. */
#gameArea .blot-player-vip .blot-vip-badge { background:linear-gradient(145deg,#ffe8a0,#d6a544); border-color:#f4d47e; color:#38270d; box-shadow:0 2px 6px #0005; }
#gameArea .blot-player-vip .blot-avatar { border-color:#e2bc65; box-shadow:0 0 0 2px #d7aa5077,0 0 14px #edbc5266,0 0 26px #daa23733,0 5px 12px #0005; }
#gameArea .blot-player-vip .blot-avatar::before { display:none; animation:none; }
#gameArea .blot-player-vip .blot-avatar-wrap::after { content:""; position:absolute; inset:-10px; background:url('/images/game-vip-laurel.svg') center/contain no-repeat; pointer-events:none; z-index:3; }
#gameArea .blot-player-vip .blot-player-name { background:linear-gradient(160deg,#57432a,#30271d); border-color:#bf9654; box-shadow:inset 0 1px #ffe9af22,0 3px 8px #0004; }
#gameArea .blot-player-vip .blot-player-name::before { display:none; }
#gameArea .blot-player-vip .blot-player-text { color:inherit; text-shadow:0 1px 3px rgba(0,0,0,.4); }
#gameArea .blot-player-vip.blot-player-active .blot-player-text { color:#fff7df; text-shadow:0 1px 2px rgba(24,14,8,.95),0 0 5px rgba(20,11,7,.7); }
#gameArea .blot-player-vip .blot-player-timer { box-shadow:none; }
#gameArea .blot-player-vip.blot-player-active .blot-avatar { border-color:#fff0aa; box-shadow:0 0 0 4px #ffd35566,0 0 18px #ffcf4788,0 0 30px #edb74044; }
/* Animate the VIP avatar, laurel and badge as a single group. */
@media (min-width: 933px) and (prefers-reduced-motion: no-preference) {
    #gameArea .blot-player-vip.blot-player-active .blot-avatar { animation: none; }
    #gameArea .blot-player-vip.blot-player-active .blot-avatar-wrap { animation: blotgamePulse 1.6s ease-in-out infinite; }
}
#gameArea.blot-card-animation-active .blot-player-vip .blot-avatar-wrap { animation: none !important; }
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
    #gameArea .blot-player-vip .blot-avatar-wrap { animation: none; }
}
/* Keep avatar badges above the adjacent name, including during pulse transforms. */
#gameArea .blot-player-vip .blot-avatar-wrap { z-index: 2; }
#gameArea .blot-player-vip .blot-player-info { z-index: 1; }
#gameArea .blot-player-name { background: linear-gradient(160deg,#57432a,#30271d); }
/* Shared crown icon sits on the avatar rim and follows the VIP pulse. */
#gameArea .blot-player-vip .blot-avatar-wrap::before {
    content:"\f521"; font-family:"Font Awesome 6 Free"; font-weight:900;
    position:absolute; top:-18px; left:50%; transform:translateX(-50%) rotate(-8deg);
    font-size:30px; line-height:1; color:#ffe397; text-shadow:0 1px 1px #6d471e,0 2px 4px #0009;
    z-index:4; pointer-events:none;
}
@media(max-width:932px), (orientation:landscape) and (max-height:600px) {
    #gameArea .blot-player-vip .blot-avatar-wrap::before { top:-16px; font-size:24px; }
}
/* Bid pass and both declaration choices share the Play button palette. */
#gameArea .blot-trump-pass,
#gameArea .blot-game-actions-combination .blot-game-action-confirm,
#gameArea .blot-game-actions-combination .blot-game-action-decline {
    color:#17300c !important;
    background:linear-gradient(180deg,#eaff71 0%,#75d632 58%,#43a721 100%);
    border-color:#efff9a;
    box-shadow:0 6px 0 #286b16,0 10px 18px rgba(0,0,0,.3);
    text-shadow:0 1px rgba(255,255,255,.42);
}
/* Pass keeps the raised action style with a neutral graphite palette. */
#gameArea .blot-trump-pass {
    color:#fff3dc !important;
    background:linear-gradient(180deg,#625b51 0%,#49443d 58%,#35312d 100%);
    border-color:#b5a58a;
    box-shadow:0 6px 0 #24211e,0 10px 18px rgba(0,0,0,.3);
    text-shadow:0 1px 2px #0006;
}
/* Round score unfolds from the total scoreboard as its attached lower section. */

#gameArea .blot-scoreboard > .blot-taken-score {
    top:calc(100% + 1px); left:8px; right:8px; width:auto; margin:0;
    border-top:0; border-radius:0 0 12px 12px;
    transform:none; transform-origin:top center;
    background:linear-gradient(180deg,#302920,#242123);
    box-shadow:0 6px 10px #0003;
}

@keyframes roundScoreUnfold { from { opacity:0; clip-path:inset(0 0 100% 0); } to { opacity:1; clip-path:inset(0); } }
@media(prefers-reduced-motion:reduce) { #gameArea.blot-game-started .blot-scoreboard > .blot-taken-score { animation:none; } }

/* Declining a combination is a neutral secondary action. */
#gameArea .blot-game-actions-combination .blot-game-action-decline {
    color:#fff3dc !important;
    background:linear-gradient(180deg,#625b51 0%,#49443d 58%,#35312d 100%);
    border-color:#b5a58a;
    box-shadow:0 6px 0 #24211e,0 10px 18px rgba(0,0,0,.3);
    text-shadow:0 1px 2px #0006;
}
#gameArea .blot-scoreboard > .blot-taken-score > div { padding:5px 0; }
/* Keep the panel mounted so both opening and closing can transition. */
#gameArea .blot-scoreboard > .blot-taken-score {
    display:flex; opacity:0; visibility:hidden; clip-path:inset(0 0 100% 0);
    pointer-events:none; animation:none;
    transition:clip-path .28s ease,opacity .28s ease,visibility 0s linear .28s;
}
#gameArea.blot-round-score-visible .blot-scoreboard > .blot-taken-score {
    opacity:1; visibility:visible; clip-path:inset(0);
    transition-delay:0s;
}
@media(prefers-reduced-motion:reduce) { #gameArea .blot-scoreboard > .blot-taken-score { transition:none; } }/* Readable team labels without increasing the scoreboard footprint. */
#gameArea .blot-score-label { font-size:12px; line-height:1.2; color:#efdfc0; }
/* Give the mobile hand more usable width while keeping edge clearance. */
@media(orientation:portrait) and (max-width:519px) {
    #gameArea .player-hand { width:calc(100% - 12px); max-width:440px; }
}
@media(orientation:landscape) and (max-height:520px) and (max-width:1024px) {
    #gameArea .player-hand { width:min(680px,92%); }
}
/* Portrait fan uses the side space; edge cards retain a substantial visible target. */
@media(orientation:portrait) and (max-width:519px) {
    #gameArea .player-hand { bottom:-46px; width:100%; max-width:none; }
}
/* Preserve the calculated fan spacing: flex shrinking must not compress cards. */
@media(orientation:portrait) and (max-width:519px) {
    #gameArea .player-hand .blot-card.hand-card { flex:0 0 176px; }
}
/* Portrait player dock: a curved felt rail below the hand. */
@media (orientation:portrait) and (max-width:519px) {
    #gameArea .blot-player-bottom {
        left:0; right:0; bottom:0; width:100%; height:112px;
        transform:none; flex-direction:row; justify-content:center;
        gap:14px; padding:20px 18px 10px; isolation:isolate;
    }
    #gameArea .blot-player-bottom::before {
        content:""; position:absolute; inset:0 -8% -25px;
        border-radius:50% 50% 0 0 / 38px 38px 0 0;
        border:1px solid #c49a5366;
        background:url('/images/profile-felt.svg') 0 0/180px 180px repeat,linear-gradient(180deg,#50402d,#292522);
        background-blend-mode:soft-light,normal;
        box-shadow:0 -4px 16px #0004,inset 0 2px #f1ce821c;
        z-index:-1; pointer-events:none;
    }
    #gameArea .blot-player-bottom .blot-player-info { max-width:calc(100% - 116px); }
    #gameArea .blot-player-bottom .blot-player-name { min-width:100px; max-width:100%; }
    #gameArea .blot-player-bottom .blot-player-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    #gameArea .player-hand { bottom:106px; width:calc(100% - 12px); max-width:none; height:174px; z-index:6; }
    #gameArea .blot-player-bottom .blot-trump-badge { top:36px; left:calc(100% + 8px); right:auto; transform:none; z-index:5; }
    #gameArea .blot-player-bottom .blot-combination-slot-bottom { bottom:calc(100% + 6px); }
}
/* A rounder rail covers card bases; player accessories have dedicated positions. */
@media (orientation:portrait) and (max-width:519px) {
    #gameArea .blot-player-bottom { height:126px; padding:30px 28px 20px; z-index:7; }
    #gameArea .blot-player-bottom::before { inset:0 -5% -32px; border-radius:50% 50% 0 0 / 74px 74px 0 0; }
    #gameArea .player-hand { bottom:74px; z-index:6; }
    #gameArea .blot-player-bottom .blot-player-info { align-self:center; margin-top:-16px; }
    #gameArea .blot-player-bottom .blot-trump-badge { top:56px; left:calc(100% + 14px); right:auto; min-width:58px; padding:3px 7px; white-space:nowrap; transform:none; }
    #gameArea .blot-player-bottom .blot-first-turn { top:24px; bottom:auto; left:-30px; right:auto; width:22px; height:22px; animation:none; }
    #gameArea .blot-player-bottom .blot-combination-slot-bottom { top:auto; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); pointer-events:none; }
}
@media (orientation:portrait) and (max-width:519px) {
    #gameArea .blot-chat { right:12px; bottom:18px; }
    #gameArea .blot-chat-toggle { width:40px; height:40px; border-radius:13px; font-size:23px; }
    #gameArea .blot-chat-menu { right:0; bottom:50px; width:min(360px,calc(100vw - 24px)); max-height:calc(100dvh - 170px); overflow-y:auto; }
    #gameArea .blot-player-bottom { padding-right:64px; padding-left:34px; }
}
/* Anchor the local player's speech bubble inside the portrait dock. */
@media (orientation:portrait) and (max-width:519px) {
    #gameArea .blot-player-bottom .blot-alert {
        top:6px; bottom:auto; left:calc(50% - 12px); right:12px;
        min-width:0; max-width:none; min-height:38px;
        padding:6px 10px; border-radius:14px; white-space:normal;
        transform-origin:left bottom;
    }
    #gameArea .blot-player-bottom .blot-alert::before {
        left:10px; right:auto; top:auto; bottom:-7px; width:14px; height:14px;
    }
    #gameArea .blot-player-bottom .blot-alert-content { font-size:13px; line-height:1.2; overflow-wrap:anywhere; }
    #gameArea .blot-player-bottom .blot-alert-icon { font-size:25px; margin:0 5px 0 0; }
}
/* Compact portrait dock, aligned identity and content-sized speech bubble. */
@media (orientation:portrait) and (max-width:519px) {
    #gameArea .blot-player-bottom { height:104px; padding-top:16px; padding-bottom:10px; align-items:center; }
    #gameArea .blot-player-bottom::before { border-radius:50% 50% 0 0 / 88px 88px 0 0; }
    #gameArea .blot-player-bottom .blot-player-info { margin-top:0; align-self:center; }
    #gameArea .blot-chat-toggle { display:grid; place-items:center; padding:0; line-height:1; }
    #gameArea .blot-chat-toggle > * { margin:0; line-height:1; }
    #gameArea .blot-player-bottom .blot-alert { left:calc(50% - 18px); right:auto; top:-6px; width:max-content; max-width:calc(50% + 6px); min-height:34px; }
    #gameArea .player-hand { bottom:54px; }
}
@media (orientation:portrait) and (max-width:519px) {
    #gameArea .blot-player-bottom .blot-alert { top:-48px; left:max(12px,calc(50% - 110px)); right:auto; width:max-content; min-width:84px; max-width:calc(100% - 36px); min-height:56px; padding:6px 15px; border-radius:20px; }
    #gameArea .blot-player-bottom .blot-alert-content { font-size:16px; line-height:1.1; }
    #gameArea .blot-player-bottom .blot-alert-icon { font-size:38px; margin:-4px 7px 0 0; }
    #gameArea .blot-player-bottom .blot-alert::before { left:14px; bottom:-10px; width:22px; height:22px; }
}
/* The hand stays above table cards; the portrait rail still covers card bases. */
#gameArea .player-hand { z-index:330; }
@media (orientation:portrait) and (max-width:519px) {
    #gameArea .blot-player-bottom { z-index:340; }
    #gameArea .blot-player-bottom.blot-player-alert-active { z-index:920; }
}
/* A shallow lower rail on landscape and desktop, behind the hand. */
@media (orientation:landscape), (min-width:768px) {
    #gameArea::after {
        content:""; position:absolute; left:50%; bottom:-28px;
        width:min(780px,94%); height:54px; transform:translateX(-50%);
        border-radius:50% 50% 0 0 / 30px 30px 0 0;
        border:1px solid #c49a5355;
        background:url('/images/profile-felt.svg') 0 0/180px 180px repeat,linear-gradient(180deg,#4b3d2d,#292522);
        background-blend-mode:soft-light,normal;
        box-shadow:inset 0 1px #f1ce821c; z-index:340; pointer-events:none;
    }
}
@media (orientation:landscape) and (max-height:600px) and (max-width:1024px) {
    #gameArea::after { height:38px; bottom:-22px; border-radius:50% 50% 0 0 / 22px 22px 0 0; }
}
/* The lower rail masks dealing flights as well as cards already in hand. */
@media (orientation:landscape), (min-width:768px) {
    #gameArea::after { z-index:890; }
}
@media (orientation:portrait) and (max-width:519px) {
    #gameArea .blot-player-bottom { z-index:890; }
    #gameArea .blot-player-bottom.blot-player-alert-active { z-index:920; }
}
/* In portrait, decisions sit above the hand instead of on the player rail. */
@media (orientation:portrait) and (max-width:519px) {
    #gameArea .blot-game-actions,
    #gameArea .blot-trump-modal.blot-trump-mode-contra,
    #gameArea .blot-trump-modal.blot-trump-mode-recontra {
        top:auto!important; bottom:var(--hand-actions-bottom,234px)!important;
        left:50%!important; right:auto!important; z-index:950;
        max-width:calc(100% - 24px)!important;
    }
}
/* Keep the landscape rail anchored to the viewport during decision overlays. */
@media (orientation:landscape) and (max-width:1024px) and (max-height:600px) {
    #gameArea::after {
        position:fixed!important; top:auto!important; bottom:-22px!important;
        left:50%!important; height:38px!important;
        transform:translateX(-50%)!important; translate:none!important;
        animation:none!important; transition:none!important;
    }
}
/* Place the landscape contra decision over the middle of the visible hand. */
@media (orientation:landscape) and (max-width:1024px) and (max-height:600px) {
    #gameArea .blot-trump-modal.blot-trump-mode-contra,
    #gameArea .blot-game-actions.blot-game-actions-contra {
        top:auto!important; bottom:clamp(44px,15dvh,72px)!important;
        left:50%!important; right:auto!important; z-index:950;
    }
}
/* Upper-player speech stays beside the avatar, clear of the bidding panel. */
@media (orientation:landscape) and (max-width:1024px) and (max-height:600px) {
    #gameArea .blot-player-top .blot-alert {
        top:4px; left:calc(100% + 12px); right:auto; bottom:auto;
        width:max-content; min-width:78px; max-width:clamp(110px,21vw,190px);
        min-height:46px; padding:6px 12px; white-space:normal;
        transform-origin:left center;
    }
    #gameArea .blot-player-top .blot-alert::before {
        top:16px; bottom:auto; left:-8px; right:auto;
        width:14px; height:16px; transform:none;
        clip-path:polygon(100% 0,100% 100%,0 50%);
    }
    #gameArea .blot-player-top .blot-alert-content { white-space:normal; overflow-wrap:anywhere; }
}
/* Contract summary follows both score sections on every viewport. */
#gameArea .blot-score-contract { position:absolute; top:calc(100% + 5px); left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 4px; border:1px solid #bd98534d; border-radius:9px; color:#f7e8c8; background:linear-gradient(145deg,#443727,#282426); pointer-events:none; }
#gameArea.blot-round-score-visible .blot-score-contract { top:calc(100% + 34px); }
#gameArea .blot-score-contract-team { font-size:11px; font-weight:700; line-height:1; color:#e8c991; }
#gameArea .blot-score-contract .blot-trump-kp-badge { position:static; transform:none; }
/* Reuse the actual player contract badge, without a second enclosing card. */
#gameArea .blot-score-contract { padding:0; gap:3px; background:none; border:0; box-shadow:none; }
#gameArea .blot-score-contract .blot-trump-badge { position:relative; inset:auto; transform:none; margin:0; width:max-content; max-width:none; display:inline-flex; }
#gameArea .blot-score-contract-team { font-size:10px; color:#d5c4a4; }
/* Quiet inline contract summary with the choosing team on the left. */
#gameArea .blot-score-contract { flex-direction:row; justify-content:center; align-items:center; gap:6px; }
#gameArea .blot-score-contract-team { font-size:12px; line-height:1.2; color:#e6d7bb; flex:0 0 auto; }
#gameArea .blot-score-contract .blot-trump-badge { min-width:0; padding:4px 7px; gap:4px; border:1px solid #ad915347; border-radius:8px; background:#302b25; color:#e8d6af; box-shadow:none; text-shadow:none; font-size:13px; }
/* Team and contract share one muted gold surface. */
#gameArea .blot-score-contract { width:max-content; min-width:100%; max-width:160px; box-sizing:border-box; left:50%; right:auto; transform:translateX(-50%); padding:5px 8px; gap:6px; border:1px solid #c8ab6b80; border-radius:9px; background:linear-gradient(145deg,#806943,#615135); box-shadow:inset 0 1px #ffe8ac12; }
#gameArea .blot-score-contract-team { color:#fff0c9; }
#gameArea .blot-score-contract .blot-trump-badge { padding:0; background:transparent; border:0; box-shadow:none; color:#fff0c9; }
/* Compact, softly lit gold contract badge. */
#gameArea .blot-score-contract { width:max-content; min-width:0; max-width:160px; padding:4px 8px; border-color:#d6ba79; border-radius:8px; background:linear-gradient(145deg,#e5d3a3,#d2b77b); box-shadow:none; }
#gameArea .blot-score-contract-team,
#gameArea .blot-score-contract .blot-trump-badge { color:#49391f; text-shadow:none; }
#gameArea .blot-score-contract-team { font-size:14px; font-weight:800; }
#gameArea .blot-score-contract .blot-trump-badge,
#gameArea .blot-score-contract .blot-trump-bid { font-size:15px; font-weight:800; }
/* First lead: a small embossed gold token, without the legacy blue pulse. */
#gameArea .blot-first-turn {
    border-radius:8px;
    background:linear-gradient(145deg,#f8e3a1,#d6ad57);
    border:1px solid #ffe7a5;
    box-shadow:0 2px 0 #775727,0 3px 6px #0004,inset 0 1px #fff4cb;
    animation:none;
}
#gameArea .blot-first-turn-icon {
    color:#4b3214; font-size:14px; font-weight:900; line-height:1;
    text-shadow:0 1px #fff0bd80;
}
/* Keep revealed combinations away from the central trick in mobile portrait only. */
@media (orientation:portrait) and (max-width:767px) {
    #gameArea .blot-combination-slot-bottom { translate:0 -24px; }
    #gameArea .blot-combination-slot-left { top:auto; bottom:calc(100% + 12px); left:-46px; right:auto; }
    #gameArea .blot-combination-slot-right { top:auto; bottom:calc(100% + 12px); right:-46px; left:auto; }
}@media (orientation:portrait) and (max-width:767px) {
    #gameArea > .blot-combination-slot-bottom {
        top:auto; bottom:190px; left:50%; right:auto;
        transform:translateX(-50%); translate:none; z-index:320;
    }
}

/* Readable waiting tips; reserve the tallest message so rotation stays stable. */
.main.game-page-active .blot-waiting-tips { display:grid; min-height:66px; }
.main.game-page-active .blot-waiting-tips .rotating-tip { position:relative; inset:auto; grid-area:1 / 1; font-size:16px; line-height:1.45; color:#f1e7d5; overflow-wrap:break-word; }
.main.game-page-active .blot-waiting-tips .rotating-tip[hidden] { display:none!important; }
@media (max-width:932px), (orientation:landscape) and (max-width:1024px) and (max-height:600px) {
 .main.game-page-active .blot-waiting-tips .rotating-tip { font-size:15px; line-height:1.45; }
}

.main.game-page-active .blot-waiting-title { font-size:18px; line-height:1.3; gap:6px; text-align:center; white-space:nowrap; }
.main.game-page-active .blot-waiting-title > span:first-child { min-width:0; white-space:nowrap; }
.main.game-page-active .blot-waiting-dots { flex-shrink:0; }
@media (max-width:932px), (orientation:landscape) and (max-width:1024px) and (max-height:600px) {
 .main.game-page-active .blot-waiting-title { font-size:16px; }
}

/* Round points take visual priority over the contract summary. */
#gameArea .blot-scoreboard>.blot-taken-score{background:linear-gradient(145deg,#e5d3a3,#d2b77b);border-color:#d6ba79;color:#392c18;font-size:17px;font-weight:800;line-height:1.2;text-shadow:none}
#gameArea .blot-scoreboard>.blot-taken-score>div{color:#392c18;font-size:17px;line-height:1.2;padding:5px 0;text-shadow:none}
#gameArea .blot-score-contract{padding:3px 6px;gap:4px;border-color:#a98b5766;background:linear-gradient(145deg,#514431,#393129);border-radius:7px;min-width:0;width:max-content}
#gameArea .blot-score-contract-team,#gameArea .blot-score-contract .blot-trump-badge,#gameArea .blot-score-contract .blot-trump-bid{color:#f7e7c4;font-size:13px;line-height:1.2;text-shadow:none}
#gameArea .blot-score-contract .blot-trump-suit{font-size:19px;line-height:1;margin:0;color:#f7e7c4;text-shadow:none}
#gameArea .blot-score-contract .blot-trump-badge-red .blot-trump-suit{color:#ffb3a7}
#gameArea .blot-score-contract .blot-trump-contra{font-size:11px}
#gameArea.blot-round-score-visible .blot-score-contract{top:calc(100% + 35px)}

/* Connection and player presence notices. */
#gameArea .blot-socket-notice{color:#f8e9ce;background:url('/images/profile-felt.svg') 0 0/180px 180px,linear-gradient(145deg,#4c4033,#2e292c);background-blend-mode:soft-light,normal;border:1px solid #b4935d80;border-radius:14px;padding:12px 16px;gap:12px;box-shadow:0 8px 22px #0004,inset 0 1px #ffe3ae1c;backdrop-filter:none}
#gameArea .blot-socket-notice-title{color:#f8e9ce;font-size:15px;line-height:1.3}
#gameArea .blot-socket-notice-text{color:#ded0b8;font-size:13px;line-height:1.4;margin-top:4px}
#gameArea .blot-socket-notice-dot{background:#dfb765;box-shadow:0 0 0 4px #dfb76520}
#gameArea .blot-socket-notice-success .blot-socket-notice-dot{background:#87cc9f;box-shadow:0 0 0 4px #87cc9f20}
#gameArea .blot-socket-notice-error .blot-socket-notice-dot{background:#e59a88;box-shadow:0 0 0 4px #e59a8820}
#gameArea .blot-socket-notice-action{color:#f6d995;background:#b18b4930;border:1px solid #c9a26966;border-radius:8px}
@media(orientation:landscape) and (max-height:520px){#gameArea .blot-socket-notice{padding:9px 13px}#gameArea .blot-socket-notice-title{font-size:14px}}