/*
 * Stylesheet map:
 * - Base page chrome, total-score/status bars, and compass game board.
 * - Card rendering, Safari/mobile touch fixes, and trick/animation layers.
 * - Phase 1/Phase 2 bidding panels, hint/rules/name/last-trick modals.
 * - Responsive sections at the end cover tablet landscape and phone layouts.
 * - Extended scorecard styles close the file with the notebook-paper theme.
 */

* {
    margin: 0;
    padding: 0;
    /* Fallback for older browsers */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #1a1a3a; /* Fallback for older browsers */
    background: -webkit-linear-gradient(135deg, #0f0f23 0%, #1a1a3a 25%, #2d1b69 50%, #1a1a3a 75%, #0f0f23 100%);
    background: -moz-linear-gradient(135deg, #0f0f23 0%, #1a1a3a 25%, #2d1b69 50%, #1a1a3a 75%, #0f0f23 100%);
    background: -o-linear-gradient(135deg, #0f0f23 0%, #1a1a3a 25%, #2d1b69 50%, #1a1a3a 75%, #0f0f23 100%);
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a3a 25%, #2d1b69 50%, #1a1a3a 75%, #0f0f23 100%);
    min-height: 100vh;
    color: #ffffff;
    overflow: hidden;
}

.game-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    text-align: center;
    font-size: 2.2em;
    margin-top: 5px;
    margin-bottom: 15px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.8);
    color: #FFD700;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1;
    -webkit-animation: titleGlow 3s ease-in-out infinite alternate;
    -moz-animation: titleGlow 3s ease-in-out infinite alternate;
    -o-animation: titleGlow 3s ease-in-out infinite alternate;
    animation: titleGlow 3s ease-in-out infinite alternate;
}

@-webkit-keyframes titleGlow {
    0% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.8); }
    100% { text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 25px rgba(255, 215, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.8); }
}

@-moz-keyframes titleGlow {
    0% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.8); }
    100% { text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 25px rgba(255, 215, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.8); }
}

@-o-keyframes titleGlow {
    0% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.8); }
    100% { text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 25px rgba(255, 215, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.8); }
}

@keyframes titleGlow {
    0% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.8); }
    100% { text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 25px rgba(255, 215, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.8); }
}



/* Total Score Box */
.total-score-box {
    position: absolute;
    top: 165px;
    left: 10px;
    background: black;
    padding: 6px 10px;
    border-radius: 12px;
    border: 2px solid rgba(255, 215, 0, 0.6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    z-index: 1000;
    width: 180px;
    min-width: 180px;
}

/* When extended scorecard is shown, make the box wider */
.total-score-box.expanded {
    width: 650px;
    min-width: 650px;
    padding: 12px 16px;
}

.total-score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 6px;
}

.total-score-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.extended-view-btn {
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid rgba(255, 215, 0, 0.5);
    color: #FFD700;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 16px;
    font-weight: bold;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1;
    /* WCAG 2.5.5 minimum touch target */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.extended-view-btn:hover {
    background: rgba(255, 215, 0, 0.4);
    border-color: #FFD700;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.total-score-content {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 0;
}

.player-label {
    font-family: 'Kalam', cursive;
    font-weight: 400;
    font-size: 1.0em;
    color: #FFD700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

.score-value {
    font-family: 'Kalam', cursive;
    font-weight: 700;
    font-size: 1.2em;
    /* color removed - using player-specific colors */
    /* text-shadow removed - using player-specific shadows */
    padding: 4px 8px;
    min-width: 40px;
    text-align: center;
}

/* Player-specific colors */
.score-item[data-player="north"] .player-label {
    color: #4FC3F7;
    text-shadow: 0 0 8px rgba(79, 195, 247, 0.8);
}

.score-item[data-player="north"] .score-value {
    color: #29B6F6;
    text-shadow: 0 0 10px rgba(41, 182, 246, 0.8);
}

.score-item[data-player="east"] .player-label {
    color: #FFB74D;
    text-shadow: 0 0 8px rgba(255, 183, 77, 0.8);
}

.score-item[data-player="east"] .score-value {
    color: #FFA726;
    text-shadow: 0 0 10px rgba(255, 167, 38, 0.8);
}

.score-item[data-player="south"] .player-label {
    color: #81C784;
    text-shadow: 0 0 8px rgba(129, 199, 132, 0.8);
}

.score-item[data-player="south"] .score-value {
    color: #66BB6A;
    text-shadow: 0 0 10px rgba(102, 187, 106, 0.8);
}

.score-item[data-player="west"] .player-label {
    color: #F06292;
    text-shadow: 0 0 8px rgba(240, 98, 146, 0.8);
}

.score-item[data-player="west"] .score-value {
    color: #EC407A;
    text-shadow: 0 0 10px rgba(236, 64, 122, 0.8);
}

/* Ranking indicators removed - using player colors instead */

/* Persistent North Notification */
.north-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #2196f3, #1976d2);
    color: white;
    padding: 12px 20px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    min-width: 280px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: notificationSlideIn 0.5s ease-out;
}

.north-notification .notification-icon {
    font-size: 16px;
    margin-right: 8px;
}

@keyframes notificationSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Game Status */
.game-status {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 60, 0.9) 100%);
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid rgba(255, 215, 0, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 50px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Bid-Trump Container - groups trump and bid together */
.bid-trump-container {
    display: flex;
    align-items: center;
    gap: 12px;
    order: 2; /* Position in the middle */
}

/* Round counter positioned on the right */
.round-counter {
    order: 3; /* Position on the right */
    margin-left: auto;
    margin-right: 0; /* Push gamlet more to the right */
}

/* Tricks counter on the left */
.tricks-counter {
    order: 1; /* Position on the left */
    position: relative;
    left: 25px;
}

/* Standardize ALL text elements in the game status bar */
.game-status > div,
.game-status *,
.round-counter, 
.tricks-counter, 
.trump-suit, 
.current-turn, 
.total-bids,
.bid-trump-container,
#round-indicator,
#tricks-indicator,
#turn-indicator,
#trump-indicator {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 1.1em;
    color: white;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    white-space: nowrap;
    margin: 0 8px;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

/* Ensure all spans within game status elements have consistent styling */
.game-status span,
.round-counter span,
.tricks-counter span,
.trump-suit span,
.current-turn span,
.total-bids span {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 1.1em;
    color: white;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    letter-spacing: 0.5px;
}

/* Make trump suit symbols bigger in the game status */
.trump-suit span {
    font-size: 1.8em;
}

/* Make trump symbols much bigger in player bid areas during Phase 1 */
.player-bid span {
    font-size: 2.5em !important;
    font-weight: bold !important;
    text-shadow: 0 0 15px currentColor !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* Game Board */
.game-board {
    position: relative;
    width: 1000px;
    height: 650px;
    margin: -15px auto 0 auto;
    background: 
        radial-gradient(ellipse at center, #0d4a0d 0%, #0a3a0a 70%, #052005 100%),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 15px,
            rgba(255, 255, 255, 0.05) 15px,
            rgba(255, 255, 255, 0.05) 30px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 20px,
            rgba(255, 255, 255, 0.03) 20px,
            rgba(255, 255, 255, 0.03) 40px
        );
    border-radius: 50px;
    border: 6px solid #2d5a2d;
    box-shadow: 
        0 0 40px rgba(0, 0, 0, 0.8),
        inset 0 0 80px rgba(45, 90, 45, 0.4),
        0 15px 30px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.game-board::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        );
    pointer-events: none;
}

/* Player Positions */
.player {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.north-player {
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    justify-content: center;
    text-align: center;
}

/* The face-down stacks hang off their nameplate instead of sharing its flex
   line, so the plate is what sits on the seat's axis. Sharing the line makes
   the ROW the centred thing, which pushed the north plate ~54px left of the
   board's centre — visibly off against the south plate directly below it.
   Centred with auto margins rather than a transform: the theme scales these
   stacks with `transform: scale(.72) !important` on small screens, which
   would otherwise cancel the centring. */
.north-player .bot-cards {
    position: absolute;
    left: calc(100% + 15px);
    /* Top-aligned, not centred: the seat sits flush with the top of the board
       and the stack is taller than the plate, so centring it pushed the stack
       over the board's edge, where overflow:hidden cropped it. */
    top: 0;
}

.west-player .bot-cards,
.east-player .bot-cards {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    margin: 0 auto;
}

.south-player {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

/* Same vertical axis as the trick square (.center-area sits at 50% - 70px, the
   hand below it taking the difference), so the two side plates line up with the
   middle of the table — and with the Deal button centred inside it — instead of
   with the board's geometric centre. The plate's bottom margin is dropped here
   because it used to space the stack below it; the stack is positioned now, so
   the margin only pushed the plate off that line. */
.west-player .player-info,
.east-player .player-info {
    margin-bottom: 0;
}

.west-player {
    left: 15px;
    top: calc(50% - 80px);
    transform: translateY(-50%);
}

.east-player {
    right: 15px;
    top: calc(50% - 80px);
    transform: translateY(-50%);
}

/* Player Info */
.player-info {
    background: black;
    padding: 8px 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 0.85em;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* North player info - no bottom margin for horizontal layout */
.north-player .player-info {
    margin-bottom: 0;
}

/* Current Player Highlight - REMOVED - turn indicator is now only in top panel */

.player.current-turn .player-name {
    font-weight: bold;
    /* Don't override player-specific colors - let them show through */
    filter: brightness(1.2) saturate(1.3);
}

/* Player name styling - no current turn highlighting */
.player-name {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #FFD700; /* Default fallback color */
}

/* Player-specific colors for names (matching Total Score UI) */
.north-player .player-name,
#north-player .player-name,
.player-name[data-player="north"] {
    color: #4FC3F7 !important;
    text-shadow: 0 0 8px rgba(79, 195, 247, 0.8) !important;
}

.east-player .player-name,
#east-player .player-name,
.player-name[data-player="east"] {
    color: #FFB74D !important;
    text-shadow: 0 0 8px rgba(255, 183, 77, 0.8) !important;
}

.south-player .player-name,
#south-player .player-name,
.player-name[data-player="south"] {
    color: #81C784 !important;
    text-shadow: 0 0 8px rgba(129, 199, 132, 0.8) !important;
}

.west-player .player-name,
#west-player .player-name,
.player-name[data-player="west"] {
    color: #F06292 !important;
    text-shadow: 0 0 8px rgba(240, 98, 146, 0.8) !important;
}

/* Container for bid and takes on second line */
.player-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.player-bid, .player-tricks {
    margin: 0;
    font-size: 1.1em;
    font-weight: bold;
}

/* Card Styles */
.card {
    /* One knob per breakpoint: the corner index sizes both the rank and the
       suit beneath it, so they always stay in proportion. */
    --card-rank-size: 26px;
    width: 78px;
    height: 110px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 50%, #e8e8e8 100%);
    border: 2px solid #333;
    border-radius: 10px;
    display: inline-block;
    margin: 2px;
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2);
    transform-origin: center bottom;
    overflow: hidden;
    /* Safari-specific fixes */
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
    border-radius: 10px;
    pointer-events: none;
}

.card:hover {
    /* Safari-specific transform with vendor prefixes */
    -webkit-transform: translateY(-15px) rotateY(5deg);
    -moz-transform: translateY(-15px) rotateY(5deg);
    -ms-transform: translateY(-15px) rotateY(5deg);
    transform: translateY(-15px) rotateY(5deg);
    
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 100;
    
    /* Force Safari to enable hardware acceleration */
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card.selected {
    transform: none;
    border-color: #FFD700;
    box-shadow: 
        0 0 25px rgba(255, 215, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.3);
    animation: none;
}

@keyframes cardSelect {
    0% { transform: translateY(-15px) rotateY(5deg) scale(1); }
    50% { transform: translateY(-25px) rotateY(15deg) scale(1.05); }
    100% { transform: translateY(-20px) rotateY(10deg) scale(1); }
}

.card-face {
    width: 100%;
    height: 100%;
    position: relative;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    pointer-events: none;
}

.card-top-section {
    position: absolute;
    /* Inset scales with the index so the pair stays inside the visible sliver
       of an overlapped card at every breakpoint. */
    top: calc(var(--card-rank-size) * 0.3);
    left: calc(var(--card-rank-size) * 0.28);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.card-rank {
    font-size: var(--card-rank-size);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    pointer-events: none;
}

/* Suit of the corner index — sits directly under the rank, the way a bridge
   deck prints it, so a card fanned behind its neighbour still shows both
   marks in the visible sliver. */
.card-suit {
    font-size: calc(var(--card-rank-size) * 0.9);
    text-align: left;
    line-height: 1;
    margin-top: 1px;
    font-weight: 700;
    pointer-events: none;
}

/* The centre glyph is not drawn — the corner index carries the card. The
   element stays in the DOM because it is how the code reads a card's suit
   back off its element (getCardFromElement, suggestBestCard, the Safari
   click path all query .card-center-suit's textContent). */
.card-center-suit {
    display: none;
}

/* Card Colors */
.card.red {
    color: #dc143c;
}

.card.black {
    color: #000000;
}

/* Card Back */
.card-back {
    background: 
        linear-gradient(45deg, #1a0f3a 25%, #2d1b69 25%, #2d1b69 50%, #1a0f3a 50%, #1a0f3a 75%, #2d1b69 75%),
        radial-gradient(circle at center, #4a2b8a 0%, #2d1b69 50%, #1a0f3a 100%);
    background-size: 20px 20px, 100% 100%;
    border: 2px solid #4a2b8a;
    border-radius: 10px;
    width: 78px;
    height: 110px;
    margin: 2px;
    display: inline-block;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.card-back::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    border-radius: 50%;
}

/* Player Cards */
.player-cards {
    display: flex;
    justify-content: center;
    align-items: center;
}

.human-cards {
    flex-wrap: nowrap;
    max-width: 1400px;
    overflow-x: visible;
    /* Tighter vertical padding keeps the taller cards from pushing the south
       nameplate up under the bidding tray. */
    padding: 8px 30px;
    perspective: 1200px;
    margin-bottom: 30px;
    margin-top: -30px;
    position: relative;
    z-index: 5;
    min-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.human-cards .card {
    margin: 0 1px;
    
    /* Simplified transition for Safari compatibility */
    -webkit-transition: -webkit-transform 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    -moz-transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Safari-specific transform origin */
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    transform-origin: center bottom;
    
    position: relative;
    width: 91px;
    height: 127px;
    cursor: pointer;
    
    /* Force Safari 3D context */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    
    /* Critical Safari performance fixes */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Safari touch and interaction */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
    
    /* Force Safari GPU acceleration with simple transform */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
    /* Additional Safari fixes */
    will-change: transform;
    contain: layout style paint;
}

/* NUCLEAR SAFARI FIX - Complete override for Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* This targets Safari and WebKit browsers */
    
    .human-cards .card {
        /* Reset all transforms for Safari */
        -webkit-transform: none !important;
        transform: none !important;
        
        /* Force simple positioning */
        position: relative !important;
        display: inline-block !important;
        vertical-align: top !important;
        
        /* Make absolutely sure Safari can interact with it */
        pointer-events: auto !important;
        cursor: pointer !important;
        
        /* Remove all Safari touch interference */
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.5) !important;
        touch-action: manipulation !important;
        
        /* Force simple transitions */
        -webkit-transition: all 0.2s ease !important;
        transition: all 0.2s ease !important;
    }
    
    /* Safari: Disable fan layout completely */
    .human-cards .card:nth-child(1),
    .human-cards .card:nth-child(2),
    .human-cards .card:nth-child(3),
    .human-cards .card:nth-child(4),
    .human-cards .card:nth-child(5),
    .human-cards .card:nth-child(6),
    .human-cards .card:nth-child(7),
    .human-cards .card:nth-child(8),
    .human-cards .card:nth-child(9),
    .human-cards .card:nth-child(10),
    .human-cards .card:nth-child(11),
    .human-cards .card:nth-child(12),
    .human-cards .card:nth-child(13) {
        -webkit-transform: none !important;
        transform: none !important;
        position: relative !important;
        z-index: auto !important;
    }
    
    /* Safari: Simple hover - just move up */
    .human-cards.player-turn .card:hover {
        -webkit-transform: translateY(-10px) !important;
        transform: translateY(-10px) !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
        z-index: 10 !important;
        margin-top: -10px !important;
    }
    
    /* Safari: Simple selection - just highlight */
    .human-cards .card.selected {
        -webkit-transform: translateY(-15px) !important;
        transform: translateY(-15px) !important;
        background: #fffacd !important;
        border: 3px solid #FFD700 !important;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
        z-index: 20 !important;
        margin-top: -15px !important;
    }
    
    /* Safari: Force the cards container to be simple */
    .human-cards {
        -webkit-perspective: none !important;
        perspective: none !important;
        -webkit-transform-style: flat !important;
        transform-style: flat !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: flex-end !important;
        gap: 2px !important;
    }
}

/* Safari-optimized fan layout with translate3d */
.human-cards .card:nth-child(1) { 
    z-index: 1;
    -webkit-transform: translate3d(0, 0, 0) rotate(-8deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(-8deg) rotateX(15deg);
}
.human-cards .card:nth-child(2) { 
    z-index: 2;
    -webkit-transform: translate3d(0, 0, 0) rotate(-4deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(-4deg) rotateX(15deg);
}
.human-cards .card:nth-child(3) { 
    z-index: 3;
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(0deg) rotateX(15deg);
}
.human-cards .card:nth-child(4) { 
    z-index: 4;
    -webkit-transform: translate3d(0, 0, 0) rotate(4deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(4deg) rotateX(15deg);
}
.human-cards .card:nth-child(5) { 
    z-index: 5;
    -webkit-transform: translate3d(0, 0, 0) rotate(8deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(8deg) rotateX(15deg);
}
.human-cards .card:nth-child(6) { 
    z-index: 6;
    -webkit-transform: translate3d(0, 0, 0) rotate(12deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(12deg) rotateX(15deg);
}
.human-cards .card:nth-child(7) { 
    z-index: 7;
    -webkit-transform: translate3d(0, 0, 0) rotate(16deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(16deg) rotateX(15deg);
}
.human-cards .card:nth-child(8) { 
    z-index: 8;
    -webkit-transform: translate3d(0, 0, 0) rotate(20deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(20deg) rotateX(15deg);
}
.human-cards .card:nth-child(9) { 
    z-index: 9;
    -webkit-transform: translate3d(0, 0, 0) rotate(24deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(24deg) rotateX(15deg);
}
.human-cards .card:nth-child(10) { 
    z-index: 10;
    -webkit-transform: translate3d(0, 0, 0) rotate(28deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(28deg) rotateX(15deg);
}
.human-cards .card:nth-child(11) { 
    z-index: 11;
    -webkit-transform: translate3d(0, 0, 0) rotate(32deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(32deg) rotateX(15deg);
}
.human-cards .card:nth-child(12) { 
    z-index: 12;
    -webkit-transform: translate3d(0, 0, 0) rotate(36deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(36deg) rotateX(15deg);
}
.human-cards .card:nth-child(13) { 
    z-index: 13;
    -webkit-transform: translate3d(0, 0, 0) rotate(40deg) rotateX(15deg);
    transform: translate3d(0, 0, 0) rotate(40deg) rotateX(15deg);
}

/* REMOVED - Conflicting with later definition */

/* Simplified Phase 3 hover effects for Safari */
.human-cards.phase3.player-turn .card:hover {
    margin: 0 -10px;
    
    /* Simplified Safari-compatible transform */
    -webkit-transform: translate3d(0, -10px, 1px) scale(1.05) !important;
    -moz-transform: translate3d(0, -10px, 1px) scale(1.05) !important;
    transform: translate3d(0, -10px, 1px) scale(1.05) !important;
    
    z-index: 100 !important;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2) !important;
        
    /* Safari performance optimizations */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.human-cards .card:first-child {
    margin-left: 0;
    z-index: 1;
}

.human-cards .card:last-child {
    margin-right: 0;
    z-index: 1;
}

.bot-cards {
    position: relative;
    width: 78px;
    height: 110px;
    perspective: 800px;
}

.bot-cards .card-back {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    transition: all 0.3s ease;
}

.bot-cards .card-back:nth-child(n+2) {
    transform: translateX(3px) translateY(3px) rotateZ(2deg);
}

.bot-cards .card-back:nth-child(n+3) {
    transform: translateX(6px) translateY(6px) rotateZ(4deg);
}

.bot-cards .card-back:nth-child(n+4) {
    transform: translateX(9px) translateY(9px) rotateZ(6deg);
}

/* Center Area */
/* The trick square's centre is the table's axis: the two side nameplates and
   the Deal button all line up on it. -80 rather than -70 because .trick-area's
   20px bottom margin moved to this offset — with the margin, .center-area was
   20px taller than the square it holds, so the square sat 10px above this
   element's centre and anything aligned to the element missed the square. */
.center-area {
    position: absolute;
    top: calc(50% - 80px);
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Won Tricks Display */
.won-tricks-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    pointer-events: none;
    z-index: 20;
}

.won-tricks {
    position: absolute;
    width: 78px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.north-won {
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
}

.south-won {
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
}

.west-won {
    left: -200px;
    top: 50%;
    transform: translateY(-50%);
}

.east-won {
    right: -200px;
    top: 50%;
    transform: translateY(-50%);
}

.won-tricks .card-back {
    position: absolute;
    width: 65px;
    height: 91px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #ffd700;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.won-tricks .card-back:nth-child(n+2) {
    transform: translateY(2px) rotateZ(1deg);
}

.won-tricks .card-back:nth-child(n+3) {
    transform: translateY(4px) rotateZ(2deg);
}

.won-tricks .card-back:nth-child(n+4) {
    transform: translateY(6px) rotateZ(3deg);
}

.trick-area {
    position: relative;
    width: 280px;
    height: 280px;
    /* No bottom margin: it is folded into .center-area's offset above so this
       element's box IS the square, and one number positions both. */
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 
        radial-gradient(ellipse at center, 
            rgba(139, 69, 19, 0.8) 0%, 
            rgba(160, 82, 45, 0.6) 40%, 
            rgba(101, 67, 33, 0.4) 70%, 
            rgba(139, 69, 19, 0.2) 100%),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 15px,
            rgba(255, 215, 0, 0.1) 15px,
            rgba(255, 215, 0, 0.1) 30px
        );
    background-size: 100% 100%, 30px 30px;
    border: 3px solid #8B4513;
    border-radius: 15px;
    box-shadow: 
        inset 0 0 20px rgba(0, 0, 0, 0.4),
        0 6px 20px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(139, 69, 19, 0.3);
}

.played-card {
    position: absolute;
    width: 78px;
    height: 110px;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    /* Empty played-card placeholders must not intercept taps on underlying
       buttons (notably #deal-btn on mobile landscape, where the trick
       area overlaps the action-button row). */
    pointer-events: none;
}

/* Position played cards around the trick area */
.north-played {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
}

.west-played {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
}

.south-played {
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
}

.east-played {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
}

.played-card .card {
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.3);
    transform: rotate(var(--card-rotation, 0deg));
    animation: cardPlayed 0.4s ease-out;
    z-index: 150;
    position: relative;
}

/* Ensure played cards are always visible */
.played-card {
    min-width: 78px;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* REMOVED - Duplicate definition causing Safari conflicts */

.human-cards.player-turn .card:hover {
    /* Simplified Safari-compatible transform */
    -webkit-transform: translate3d(0, -20px, 1px) rotateY(15deg) scale(1.05) !important;
    -moz-transform: translate3d(0, -20px, 1px) rotateY(15deg) scale(1.05) !important;
    transform: translate3d(0, -20px, 1px) rotateY(15deg) scale(1.05) !important;
    
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.5),
        0 8px 16px rgba(0, 0, 0, 0.3) !important;
    z-index: 200 !important;
    
    /* Safari performance optimizations */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.human-cards .card.selected {
    /* Simplified Safari-compatible selected transform */
    -webkit-transform: translate3d(0, -30px, 2px) rotateY(25deg) scale(1.1) !important;
    -moz-transform: translate3d(0, -30px, 2px) rotateY(25deg) scale(1.1) !important;
    transform: translate3d(0, -30px, 2px) rotateY(25deg) scale(1.1) !important;
    
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.8),
        0 0 60px rgba(255, 215, 0, 0.4) !important;
    z-index: 300 !important;
    
    /* Safari performance optimizations */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.human-cards .card.played {
    pointer-events: none;
    opacity: 0.5;
}

/* ═══ Two-stage card selection: lift, then drag or tap ═══════════════════
   A press lifts the card clear of the fan; only a drag onto the trick area
   or a second tap commits it. See "Card selection" in script.js. */
.human-cards .card.card-armed {
    transform: translateY(-24px) scale(1.16);
    box-shadow:
        0 16px 28px rgba(0, 0, 0, 0.55),
        0 0 0 2px #FFD700,
        0 0 22px -2px rgba(255, 215, 0, 0.85);
    z-index: 200;
}

/* A card that would break follow-suit can't be lifted at all. */
.human-cards .card.card-illegal {
    filter: grayscale(0.7) brightness(0.62);
    cursor: not-allowed;
}

.human-cards .card.card-refused {
    animation: cardRefuse 0.28s ease-in-out;
}

@keyframes cardRefuse {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-3px); }
    70% { transform: translateX(3px); }
}

/* Drop target for the drag half of the gesture. */
.trick-area.drop-active {
    border-color: rgba(255, 215, 0, 0.9);
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.5),
        inset 0 0 34px -6px rgba(255, 215, 0, 0.75);
}

/* The played card turns over on its way to the table (flyCardIntoSlot), so
   it needs depth, and its mid-flight backface must stay visible. */
.played-card {
    perspective: 800px;
}

.played-card .card {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

@keyframes cardPlayed {
    0% {
        transform: scale(0.5) rotate(var(--card-rotation, 0deg));
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(var(--card-rotation, 0deg));
    }
    100% {
        transform: scale(1) rotate(var(--card-rotation, 0deg));
        opacity: 1;
    }
}

@keyframes cardThrown {
    0% {
        transform: scale(1) rotate(0deg) translateX(0);
        opacity: 1;
    }
    20% {
        transform: scale(1.1) rotate(8deg) translateY(-25px) translateX(10px);
        opacity: 0.95;
    }
    40% {
        transform: scale(1.05) rotate(-5deg) translateY(-45px) translateX(-5px);
        opacity: 0.9;
    }
    60% {
        transform: scale(1.02) rotate(3deg) translateY(-65px) translateX(8px);
        opacity: 0.85;
    }
    80% {
        transform: scale(1.01) rotate(-2deg) translateY(-75px) translateX(-3px);
        opacity: 0.9;
    }
    100% {
        transform: scale(1) rotate(0deg) translateY(0) translateX(0);
        opacity: 1;
    }
}

@keyframes cardThrownToTable {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: scale(1.1) rotate(5deg) translateY(-30px);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.05) rotate(-3deg) translateY(-60px);
        opacity: 0.8;
    }
    75% {
        transform: scale(1.02) rotate(2deg) translateY(-90px);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.8) rotate(0deg) translateY(-120px);
        opacity: 0.5;
    }
}

.card-throwing-to-table {
    animation: cardThrownToTable 0.2s ease-out forwards;
    z-index: 1000;
    pointer-events: none;
}

.card-throwing {
    animation: cardThrown 0.3s ease-out forwards;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.card-moving-to-winner {
    pointer-events: none;
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    animation: cardCollected 1.5s ease-out forwards;
}

@keyframes cardCollected {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: scale(0.8) rotate(15deg);
        opacity: 0.9;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    }
    100% {
        transform: scale(0.6) rotate(20deg);
        opacity: 0.7;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
}

/* Animation for cards moving to center when all players pass */
.card-to-center {
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1000;
    pointer-events: none;
}

@keyframes cardToCenter {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.9) rotate(15deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(0.8) rotate(30deg);
        opacity: 0.7;
    }
}

/* Hint Modal Styles */
.hint-modal {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 520px;
    min-width: 420px;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 2000;
    pointer-events: none;
}

.hint-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 16px;
    padding: 0;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
    pointer-events: all;
}

.hint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 12px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.hint-header h3 {
    margin: 0;
    color: #FFD700;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hint-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    /* WCAG 2.5.5 minimum touch target */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.hint-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFD700;
}

.hint-body {
    padding: 20px 24px;
    color: #fff;
    line-height: 1.6;
    font-size: 16px;
}

.hint-body h4 {
    color: #4CAF50;
    margin: 12px 0 10px 0;
    font-size: 18px;
    font-weight: bold;
}

.hint-body ul {
    margin: 6px 0;
    padding-left: 16px;
}

.hint-body li {
    margin: 4px 0;
    color: #e0e0e0;
}

.hint-body .card-suggestion {
    background: rgba(76, 175, 80, 0.15);
    border: 2px solid #4CAF50;
    border-radius: 10px;
    padding: 16px;
    margin: 12px 0;
}

.hint-body .card-suggestion strong {
    color: #4CAF50;
    font-size: 18px;
    font-weight: bold;
}

.hint-footer {
    padding: 12px 20px 18px;
    display: flex;
    justify-content: center;
}

.hint-btn-close {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.hint-btn-close:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Hint Content Styling Classes */
.hint-recommendation {
    margin: 8px 0;
    padding: 12px;
    border: 2px solid #4CAF50;
    border-radius: 8px;
    background: rgba(76, 175, 80, 0.15);
    font-size: 16px;
}

.hint-recommendation strong {
    font-size: 18px;
    color: #4CAF50;
}

.hint-pass-recommendation {
    margin: 8px 0;
    padding: 12px;
    border: 2px solid #FF9800;
    border-radius: 8px;
    background: rgba(255, 152, 0, 0.15);
    font-size: 16px;
}

.hint-pass-recommendation strong {
    font-size: 18px;
    color: #FF9800;
}

.hint-competitive {
    margin: 10px 0;
    padding: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 15px;
}

.hint-alternatives {
    margin: 8px 0;
    font-size: 16px;
}

.hint-reasoning {
    margin-top: 6px;
    font-size: 14px;
    opacity: 0.9;
}





.north-played {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    --card-rotation: -5deg;
}

.south-played {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    --card-rotation: 3deg;
}

.west-played {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    --card-rotation: 8deg;
}

.east-played {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    --card-rotation: -3deg;
}

/* Game Controls */
.game-controls {
    position: absolute;
    /* Dead centre of the trick square: the side nameplates align to the same
       line, and pre-deal the Deal button is the only thing on the felt, so any
       offset here reads as the plates being crooked. */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.action-btn {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: 3px 8px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 9px;
    font-weight: bold;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    margin: 0px;
}

/* Special styling for the Deal Cards button */
#deal-btn.action-btn {
    padding: 16px 32px;
    border-radius: 30px;
    font-size: 20px;
    letter-spacing: 1px;
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Fast Mode Toggle */
.fast-mode-container {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
}

.fast-mode-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(135deg, #2196F3, #1976D2);
    border: 2px solid #1976D2;
    border-radius: 25px;
    padding: 10px 16px;
    /* WCAG 2.5.5 minimum touch target — the <label> is the actual click
       target (clicking anywhere in it toggles the nested checkbox). */
    min-height: 44px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.fast-mode-label:hover {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.fast-mode-checkbox {
    margin-right: 8px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: #FF6F00;
}

.fast-mode-text {
    color: #000;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fast-mode-label.active {
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    border-color: #0D47A1;
    animation: fastModeGlow 1s ease-in-out infinite alternate;
}

@keyframes fastModeGlow {
    0% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(33, 150, 243, 0.5);
    }
    100% {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 30px rgba(33, 150, 243, 0.8);
    }
}

/* Game control buttons container */
.game-control-buttons {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1000;
}

/* New Game button styling */
.new-game-btn {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.5 minimum touch target */
    min-height: 44px;
}

.new-game-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    background: linear-gradient(135deg, #1976D2, #1565C0);
}

.new-game-btn:active {
    transform: translateY(0);
}

/* Score animation styling */
@keyframes scoreFloat {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0px) scale(1);
    }
    20% {
        opacity: 1;
        transform: translateX(-50%) translateY(-20px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-80px) scale(0.8);
    }
}

.score-animation {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Card highlighting styles removed */

/* Rules button styling */
.rules-btn {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.5 minimum touch target */
    min-height: 44px;
}

.rules-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    background: linear-gradient(135deg, #1976D2, #1565C0);
}

.rules-btn:active {
    transform: translateY(0);
}

/* Hint button positioning - moved to right side */
.hint-btn {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.5 minimum touch target */
    min-height: 44px;
}

.hint-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    background: linear-gradient(135deg, #1976D2, #1565C0);
}

.hint-btn:active {
    transform: translateY(0);
}

/* Hint toggle — ON state */
.hint-btn.active {
    background: linear-gradient(135deg, #FFB300, #FB8C00);
    box-shadow: 0 0 0 2px #FFD700, 0 4px 8px rgba(0,0,0,0.25);
}

.hint-btn.active:hover {
    background: linear-gradient(135deg, #FB8C00, #EF6C00);
}

/* Last Trick button — matches hint-btn shape */
.last-trick-btn {
    background: linear-gradient(135deg, #7E57C2, #5E35B1);
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.5 minimum touch target */
    min-height: 44px;
}

.last-trick-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    background: linear-gradient(135deg, #5E35B1, #4527A0);
}

.last-trick-btn:active:not(:disabled) {
    transform: translateY(0);
}

.last-trick-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(50%);
}

/* Last Trick modal */
.last-trick-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.last-trick-content {
    background: #fff;
    color: #222;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    max-width: 360px;
    width: 92%;
    padding: 16px 18px 18px;
}

.last-trick-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.last-trick-header h3 {
    margin: 0;
    font-size: 1.15em;
}

.last-trick-close {
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #555;
    /* WCAG 2.5.5 minimum touch target */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
}

.last-trick-close:hover {
    color: #000;
}

.last-trick-body {
    text-align: center;
}

.last-trick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px;
    width: 260px;
    margin: 0 auto 12px;
}

.ltc-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ltc-north { grid-column: 2; grid-row: 1; }
.ltc-east  { grid-column: 3; grid-row: 2; }
.ltc-south { grid-column: 2; grid-row: 3; }
.ltc-west  { grid-column: 1; grid-row: 2; }

.ltc-player {
    font-size: 0.8em;
    color: #555;
    font-weight: bold;
}

.ltc-card {
    width: 56px;
    height: 78px;
    border-radius: 6px;
    background: #fff;
    border: 1.5px solid #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.ltc-card .ltc-rank { font-size: 1.4em; line-height: 1; }
.ltc-card .ltc-suit { font-size: 1.4em; line-height: 1; margin-top: 2px; }

.ltc-card.suit-red { color: #d32f2f; }
.ltc-card.suit-black { color: #222; }

.ltc-card.winner {
    border: 2.5px solid #FFD700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.7), 0 2px 4px rgba(0,0,0,0.15);
}

.last-trick-winner {
    font-size: 1em;
    margin-top: 6px;
}



/* Special styling for Phase 1 bidding buttons */
.bidding-interface .action-btn {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    letter-spacing: 0.5px;
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.4),
        0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Specific styling for pass button to ensure it's never inadvertently grayed */
#pass-btn {
    background: linear-gradient(135deg, #666, #555) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    opacity: 1 !important;
    filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-weight: bold !important;
    flex: 1 !important;
    max-width: 120px !important;
    padding: 8px 16px !important;
}

#pass-btn:hover {
    background: linear-gradient(135deg, #555, #444) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}

#pass-btn:disabled {
    background: linear-gradient(135deg, #888, #777) !important;
    color: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Special styling for Phase 2 submit button */
#predict-btn.action-btn {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 16px;
    letter-spacing: 0.5px;
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1001;
    display: inline-block;
    margin-left: 8px;
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.action-btn:hover::before {
    left: 100%;
}

.action-btn:hover {
    background: linear-gradient(135deg, #45a049, #4CAF50);
    transform: translateY(-3px);
    box-shadow: 
        0 10px 20px rgba(0, 0, 0, 0.5),
        0 6px 12px rgba(0, 0, 0, 0.4);
}

.action-btn:active {
    transform: translateY(-1px);
}

.action-btn:disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    border-color: #999;
    transform: none;
    box-shadow: none;
}

.action-btn:disabled:hover {
    background: #ccc;
    transform: none;
    box-shadow: none;
}

/* Clear button specific styling */
#clear-btn.action-btn {
    background: linear-gradient(135deg, #FF9800, #F57C00);
}

#clear-btn.action-btn:hover {
    background: linear-gradient(135deg, #F57C00, #E65100);
}

/* Bid button specific styling - default and active states */
#bid-btn.action-btn {
    background: linear-gradient(135deg, #666, #555);
    transition: all 0.3s ease;
    flex: 1;
    max-width: 120px;
}

#bid-btn.action-btn:hover {
    background: linear-gradient(135deg, #555, #444);
}

#bid-btn.action-btn.ready {
    background: linear-gradient(135deg, #4CAF50, #45a049) !important;
    color: white !important;
    box-shadow: 
        0 6px 12px rgba(76, 175, 80, 0.4),
        0 3px 6px rgba(76, 175, 80, 0.3) !important;
    border: 2px solid rgba(76, 175, 80, 0.6) !important;
}

#bid-btn.action-btn.ready:hover {
    background: linear-gradient(135deg, #45a049, #388e3c) !important;
    transform: translateY(-3px);
    box-shadow: 
        0 8px 16px rgba(76, 175, 80, 0.5),
        0 4px 8px rgba(76, 175, 80, 0.4) !important;
}

/* Skip button styling removed — the button was a dead UI element
   (no JS handler) and has been removed from the markup. */



/* Bidding Interface */
.bidding-interface {
    position: absolute;
    top: 325px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 60, 0.95) 100%);
    padding: 6px 12px 6px 12px;
    border-radius: 8px;
    border: 2px solid rgba(255, 215, 0, 0.4);
    text-align: center;
    min-width: 200px;
    z-index: 1000;
    max-width: 260px;
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.8),
        0 5px 15px rgba(0, 0, 0, 0.6);
    font-size: 0.8em;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    animation: interfaceSlideUp 0.4s ease-out;
    height: fit-content;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.second-phase-bidding, .trump-announcement {
    position: absolute;
    top: 325px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 60, 0.95) 100%);
    padding: 4px 6px;
    border-radius: 6px;
    border: 2px solid rgba(255, 215, 0, 0.4);
    text-align: center;
    min-width: 200px;
    max-width: 240px;
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.8),
        0 5px 15px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    font-size: 0.75em;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    animation: interfaceSlideUp 0.4s ease-out;
    height: auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

@keyframes interfaceSlideUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 30px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Trump Announcement */
.trump-announcement {
    min-width: 600px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 60, 0.95) 100%);
    border: 4px solid #FFD700;
    animation: trumpReveal 1s ease-out;
}

@keyframes trumpReveal {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.trump-announcement-content h2 {
    color: #FFD700;
    margin-bottom: 25px;
    font-size: 2em;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

.trump-display {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 15px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: 2px solid rgba(255, 215, 0, 0.3);
}

#trump-suit-large {
    font-size: 6em;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    animation: trumpGlow 2s ease-in-out infinite alternate;
}

@keyframes trumpGlow {
    0% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
    100% { text-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 40px rgba(255, 215, 0, 0.6); }
}

#trump-name {
    font-size: 1.8em;
    font-weight: bold;
    color: #FFD700;
}

.declarer-info {
    margin: 20px 0;
    font-size: 1.2em;
}

.declarer-info p {
    margin: 8px 0;
}

#declarer-name, #contract-bid {
    color: #FFD700;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

/* Second Phase Bidding Enhanced */
.second-phase-bidding {
    min-width: 260px;
    max-width: 300px;
    z-index: 1000;
}

.phase2-header {
    display: none;
}

.trump-reminder {
    background: rgba(255, 215, 0, 0.2);
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-block;
    color: #FFD700;
    font-weight: bold;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
    font-size: 0.8em;
    margin-left: 10px;
}

.predictions-status {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 4px;
    border-radius: 4px;
    margin-bottom: 2px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.predictions-status h4 {
    color: #FFD700;
    margin-bottom: 2px;
    font-size: 1.2em;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.prediction-list {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    justify-content: center;
    align-items: center;
    gap: 8px 12px;
    margin: 0 auto 2px auto;
}

/* Seat tile: the predicted number is the headline, the name is its label.
   --pred-value-size is the single knob each breakpoint overrides. */
.prediction-item {
    --pred-value-size: 27px;
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 82px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.42);
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* The seat currently choosing gets the same brass ring the board uses. */
.prediction-item.is-turn {
    border-color: rgba(255, 215, 0, 0.75);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.75), 0 0 18px -4px rgba(255, 215, 0, 0.6);
}

.prediction-item:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
}

/* Compass layout positioning */
.prediction-item:nth-child(1) { /* North */
    grid-column: 2;
    grid-row: 1;
}

.prediction-item:nth-child(2) { /* East */
    grid-column: 3;
    grid-row: 2;
}

.prediction-item:nth-child(3) { /* South */
    grid-column: 2;
    grid-row: 3;
}

.prediction-item:nth-child(4) { /* West */
    grid-column: 1;
    grid-row: 2;
}

.prediction-trump { /* Trump indicator centered in the compass */
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed box + centred in its cell: the seat tiles make the middle row
       taller than the badge, and a stretched badge renders as an ellipse. */
    width: 46px;
    height: 46px;
    place-self: center;
    padding: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.35) 0%, rgba(255, 215, 0, 0.15) 70%, rgba(255, 215, 0, 0.05) 100%);
    border: 2px solid rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    font-size: 1.9em;
    font-weight: bold;
    line-height: 1;
    color: #FFD700;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.prediction-trump.suit-red {
    color: #ff5566;
}

.prediction-trump.suit-black {
    color: #ffffff;
}

.prediction-trump.suit-nt {
    font-size: 1.1em;
    color: #FFD700;
}

.player-name {
    font-weight: bold;
}

.prediction-item .player-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.75;
}

.prediction-value {
    color: #FFD700;
    font-weight: 800;
    min-width: 30px;
    text-align: center;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    font-size: var(--pred-value-size);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

/* A seat that hasn't committed yet reads as absent, not as a value. */
.prediction-item.is-pending .prediction-value {
    opacity: 0.45;
    text-shadow: none;
}

/* Running total — the number the over/under rule turns on. */
.prediction-total {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 14px;
}

.prediction-total-label,
.prediction-total-of {
    opacity: 0.7;
    font-weight: 600;
}

#prediction-total {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

#prediction-status {
    color: #FF6B6B;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.6);
    font-size: 1.1em;
}

.your-prediction {
    background: rgba(76, 175, 80, 0.2);
    padding: 3px 4px;
    border-radius: 4px;
    border: 2px solid #4CAF50;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
    margin-top: 2px;
}

.your-prediction h4 {
    color: #4CAF50;
    margin-bottom: 1px;
    font-size: 1.0em;
    text-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

.waiting-message {
    color: #FFD700;
    font-style: italic;
    padding: 25px;
    font-size: 1.1em;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.bidding-interface h3 {
    margin-bottom: 4px;
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    font-size: 0.95em;
    line-height: 1.2;
}

.second-phase-bidding h3 {
    margin-bottom: 1px;
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    font-size: 0.6em;
}

.bid-controls, .tricks-prediction {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
}

.tricks-prediction {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
    flex-wrap: nowrap;
}

.bid-controls .input-row {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.bid-controls .button-row {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 8px;
    position: relative;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.current-bid-display {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 8px;
    text-align: center;
    font-size: 0.9em;
    color: #FFD700;
}

.bid-controls label {
    font-weight: bold;
    margin-right: 10px;
    color: #FFD700;
    font-size: 0.9em;
}

.bid-controls select, .tricks-prediction select {
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    font-size: 18px;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.bid-controls select:focus, .tricks-prediction select:focus {
    outline: none;
    border-color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* Style for disabled options in Phase 1 bidding */
.bid-controls select option:disabled {
    background-color: #666;
    color: #999;
    font-style: italic;
}

.bid-controls select option:disabled::after {
    content: " (not valid)";
    color: #ff6b6b;
}

/* Button Grids for Phase 1 Bidding */
.tricks-buttons, .suit-buttons {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.tricks-buttons {
    grid-template-columns: repeat(5, 1fr);
}

.suit-buttons {
    grid-template-columns: repeat(5, 1fr);
    max-width: 400px;
}

.trick-button, .suit-button {
    padding: 10px 6px;
    border: 2px solid #4CAF50;
    border-radius: 8px;
    background: #f0f0f0;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.suit-button {
    font-size: 36px;
    min-height: 50px;
    padding: 10px 6px;
}

/* Make NT button smaller */
.suit-button[data-value="notrump"] {
    font-size: 24px;
    padding: 8px 4px;
}

/* Original unscoped :hover removed — the real hover styles live in the
   @media (hover: hover) block farther down. The unscoped version caused
   suit/trick buttons to look "stuck" as selected after a tap on iOS,
   because mobile browsers leave the :hover state applied until the user
   taps somewhere else. */
.trick-button:hover, .suit-button:hover {
    /* intentionally empty */
}

.trick-button.selected, .suit-button.selected {
    background: #4CAF50;
    color: white;
    border-color: #45a049;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.trick-button.same-tricks {
    background: #FFA500;
    color: white;
    border-color: #FF8C00;
}

.trick-button.same-tricks:hover {
    background: #FF8C00;
}

.suit-button.disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    border-color: #999;
}

.suit-button.disabled:hover {
    background: #ccc;
    transform: none;
    box-shadow: none;
}



/* Suit Symbols */
.suit-clubs::before { content: "♣"; color: #000; }
.suit-diamonds::before { content: "♦"; color: #dc143c; }
.suit-hearts::before { content: "♥"; color: #dc143c; }
.suit-spades::before { content: "♠"; color: #000; }

/* Suit Button Colors */
.suit-button[data-value="clubs"] {
    color: #000000 !important; /* Black for clubs */
}

.suit-button[data-value="spades"] {
    color: #000000 !important; /* Black for spades */
}

.suit-button[data-value="diamonds"] {
    color: #dc143c !important; /* Red for diamonds */
}

.suit-button[data-value="hearts"] {
    color: #dc143c !important; /* Red for hearts */
}

.suit-button[data-value="notrump"] {
    color: #000000 !important; /* Black for No Trump */
}

/* Green background when trump suit is selected - matches number button style */
.suit-button.selected[data-value="clubs"] {
    background: #4CAF50 !important;
    color: #000000 !important;
    border-color: #45a049 !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5) !important;
    font-weight: bold !important;
}

.suit-button.selected[data-value="spades"] {
    background: #4CAF50 !important;
    color: #000000 !important;
    border-color: #45a049 !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5) !important;
    font-weight: bold !important;
}

.suit-button.selected[data-value="diamonds"] {
    background: #4CAF50 !important;
    color: #dc143c !important;
    border-color: #45a049 !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5) !important;
    font-weight: bold !important;
}

.suit-button.selected[data-value="hearts"] {
    background: #4CAF50 !important;
    color: #dc143c !important;
    border-color: #45a049 !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5) !important;
    font-weight: bold !important;
}

.suit-button.selected[data-value="notrump"] {
    background: #4CAF50 !important;
    color: #000000 !important;
    border-color: #45a049 !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5) !important;
    font-weight: bold !important;
}

/* Green hover state for all trump suit buttons */
.suit-button[data-value="clubs"]:hover {
    background: #4CAF50 !important;
    color: #000000 !important;
}

.suit-button[data-value="spades"]:hover {
    background: #4CAF50 !important;
    color: #000000 !important;
}

.suit-button[data-value="diamonds"]:hover {
    background: #4CAF50 !important;
    color: #dc143c !important;
}

.suit-button[data-value="hearts"]:hover {
    background: #4CAF50 !important;
    color: #dc143c !important;
}

.suit-button[data-value="notrump"]:hover {
    background: #4CAF50 !important;
    color: #000000 !important;
}

/* Responsive Design */
@media (max-width: 1050px) {
    .game-board {
        width: 95vw;
        height: 70vh;
        min-height: 600px;
    }
    
    .bidding-interface {
        top: calc(50% - 20px);
        transform: translate(-50%, -50%);
    }
    
    .second-phase-bidding, .trump-announcement {
        top: calc(50% - 20px);
        transform: translate(-50%, -50%);
    }
    
    .game-container {
        padding: 15px;
    }
    
    h1 {
        font-size: 2.5em;
    }
}

/* Responsive trick buttons - now using unified grid */
@media (max-width: 768px) {
    .tricks-prediction.expanded {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .tricks-prediction.expanded {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   MOBILE / TABLET RESPONSIVE LAYOUT
   ============================================================ */

/* Landscape overlay - shown only in portrait on small phones.
   `inset: 0` (top/right/bottom/left = 0) makes this fixed overlay cover
   the entire viewport regardless of how the page calculates 100vw/vh.
   The designer audit showed that an explicit `width: 100vw` left a strip
   uncovered on Puppeteer's iPhone-emulated 375x812 viewport because
   100vw resolved smaller than window.innerWidth there. Leaving the box
   to inset:0 sidesteps that. */
#rotate-device-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #FFD700;
    font-size: 1.5em;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

#rotate-device-overlay .rotate-icon {
    font-size: 4em;
    margin-bottom: 20px;
    animation: rotatePhone 2s ease-in-out infinite;
}

@keyframes rotatePhone {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}

/* Show overlay in portrait only on phones (not tablets) */
@media (orientation: portrait) and (max-width: 500px) {
    #rotate-device-overlay {
        display: flex !important;
    }
}

/* === Z-INDEX HIERARCHY: cards always above player names === */
.player-info {
    position: relative;
    z-index: 1;
}

.player-cards,
.bot-cards,
.human-cards {
    position: relative;
    z-index: 2;
}

.bot-cards .card-back,
.human-cards .card {
    z-index: 3;
}

/* Played cards in the trick area must always render above the player-info
   name boxes. .player elements have z-index:10, so center-area (which
   contains .played-card) needs to be higher. */
.center-area {
    z-index: 50;
}

.played-card,
.played-card .card {
    z-index: 60 !important;
}

/* === Suggested-card hint (best card according to bot AI) === */
@keyframes suggestedCardPulse {
    0%, 100% {
        box-shadow:
            0 0 14px 4px rgba(255, 215, 0, 0.95),
            0 0 28px 8px rgba(255, 215, 0, 0.55),
            0 6px 18px rgba(0, 0, 0, 0.35);
    }
    50% {
        box-shadow:
            0 0 22px 6px rgba(255, 215, 0, 1),
            0 0 40px 14px rgba(255, 215, 0, 0.7),
            0 6px 18px rgba(0, 0, 0, 0.35);
    }
}

.human-cards .card.suggested-card {
    outline: 2px solid #FFD700;
    outline-offset: -2px;
    animation: suggestedCardPulse 1.6s ease-in-out infinite;
    z-index: 4;
}

/* === Fix: suit/trick button :hover persists after tap on touch screens,
   making it look like multiple suits are selected. Only apply :hover
   styles on devices that actually support hover (mouse pointer). === */
@media (hover: hover) and (pointer: fine) {
    .trick-button:hover, .suit-button:hover {
        background: #4CAF50;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }
}
@media (hover: none), (pointer: coarse) {
    .trick-button:hover, .suit-button:hover {
        background: inherit;
        color: inherit;
        transform: none;
        box-shadow: none;
    }
}

/* ============================================================
   COMPACT TABLET LANDSCAPE
   Targets: iPad Mini/Air/Pro 11 in landscape with Safari URL bar
   Height range: ~668-760px in landscape, width >= 1000px
   ============================================================ */
@media (orientation: landscape) and (max-height: 760px) and (min-width: 1000px) {
    /* Compress top UI to make room for the 650px game-board */
    h1 {
        font-size: 1.4em !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }

    .game-container {
        padding: 6px 20px !important;
    }

    .game-status {
        padding: 4px 15px !important;
        margin: 4px auto !important;
        font-size: 0.85em !important;
    }

    .fast-mode-container {
        transform: scale(0.85);
        transform-origin: top left;
    }

    .game-control-buttons {
        transform: scale(0.85);
        transform-origin: top right;
    }

    .total-score-box {
        font-size: 0.85em !important;
    }

    /* Scale the board down slightly so it fits with chrome.
       transform: scale() doesn't shrink the layout box, so reclaim the
       lost (650 * 0.12 = 78px) with negative margin-bottom. */
    .game-board {
        transform: scale(0.88);
        transform-origin: top center;
        margin-top: -10px !important;
        margin-bottom: -80px !important;
    }

    /* Move bidding higher so it doesn't cover the south cards.
       With scale(0.88), south cards top is around y=535. Position
       bidding at top:90 (~below the compressed status bar) so its
       bottom (~355) leaves a healthy gap above the cards. */
    .bidding-interface,
    .second-phase-bidding {
        position: fixed !important;
        top: 90px !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        max-width: 90vw !important;
        z-index: 1000 !important;
    }

    /* Main strip (0-7) — only force grid layout when JS has it visible.
       After "More" is clicked JS sets style="display: none" inline; we
       must not override that or both strips would be visible at once. */
    .second-phase-bidding .tricks-buttons-main:not([style*="display: none"]) {
        display: grid !important;
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 6px !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Force the expanded tricks strip (0-13) onto a single row when JS has
       made it visible. We must NOT override the initial display:none from
       the inline style or the extra would always be visible. The selector
       below matches only when the inline style does not set display:none
       (i.e., JS has switched it to grid). */
    .second-phase-bidding .tricks-buttons-extra:not([style*="display: none"]) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        justify-content: center !important;
    }

    .second-phase-bidding .tricks-row,
    .second-phase-bidding .tricks-row-final {
        display: contents !important;
    }

    .second-phase-bidding .tricks-prediction {
        min-height: 0 !important;
        gap: 6px !important;
    }

    /* Shrink trick buttons so 14 fit on one line within the modal width */
    .second-phase-bidding .trick-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 16px !important;
        padding: 2px 4px !important;
    }
}

/* ============================================================
   TABLET LANDSCAPE / TOUCHSCREEN (iPad-class)
   Targets touchscreen devices ~700px–1400px wide where the desktop
   layout puts the score box left-anchored and risks covering the
   compass-west (Chati) nameplate. Restricted via `(hover: none)`
   so it does not catch laptop displays that happen to fit the size.
   ============================================================ */
@media (min-width: 700px) and (max-width: 1400px) and (hover: none) {
    .total-score-box {
        /* Default layout placed the score box at top:165px with no height
           cap; on iPad landscape its 233px height ran from y=165 to y=398,
           and the compass-west (Chati) nameplate at y≈380 was partially
           hidden behind its bottom edge. Capping height + adding scroll
           keeps the score box clear of the west player slot. */
        max-height: 200px !important;
        overflow-y: auto !important;
    }

    .total-score-box.expanded {
        /* The expanded scorecard previously ballooned to 650px wide and
           grew tall enough to float across the trick area. Constrain both
           dimensions to the viewport and let it scroll internally. */
        max-height: calc(100vh - 200px) !important;
        max-width: calc(100vw - 40px) !important;
        overflow-y: auto !important;
    }

    h1 {
        /* The game-control-buttons cluster on iPad-class viewports occupies
           more than half the available width, leaving no room for a
           centered title without overlap. The h1 ("Israeli Whist") is
           branding, not functional — the score box and status bar already
           convey context — so we hide it but preserve the vertical spacer
           it provides (otherwise `.game-status` slides up and overlaps the
           fixed top-corner buttons). */
        visibility: hidden !important;
    }
}

/* ============================================================
   PHONE LANDSCAPE
   Targets: any phone in landscape (height < 500px)
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
    /* Hide won-tricks face-down stacks on tiny phones — redundant with .player-stats counts */
    .won-tricks-display {
        display: none !important;
    }

    /* Position trick area in the upper-middle of the board so it doesn't
       overlap the south player name above the cards. */
    .center-area {
        top: 90px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .trick-area {
        width: 160px !important;
        height: 150px !important;
        margin-bottom: 0 !important;
    }

    /* Tight south-player name so it doesn't push into the trick area */
    .south-player .player-info {
        margin-bottom: 0 !important;
    }

    .played-card {
        width: 48px !important;
        height: 68px !important;
        min-width: 48px !important;
        min-height: 68px !important;
    }

    .played-card .card {
        width: 48px !important;
        height: 68px !important;
        --card-rank-size: 18px !important;
    }

    .played-card .card .card-rank {
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .played-card .card .card-center-suit {
        font-size: 20px !important;
    }

    .north-played {
        top: 2px !important;
    }

    .south-played {
        bottom: 2px !important;
    }

    .west-played {
        left: 2px !important;
    }

    .east-played {
        right: 2px !important;
    }

    /* Hide non-essential UI on tiny screens */
    h1 {
        display: none !important;
    }

    /* Turbo is still essential on iPhone landscape — the previous
       `display: none` made it unreachable. Mirror the game-control-buttons
       treatment: scaled to 0.6 and pinned to the top-left corner. The
       status bar's max-width is tightened below so the three regions
       (Turbo / status / controls) coexist on the same row without
       overlap on viewports as small as 667x375. */
    .fast-mode-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        transform: scale(0.6) !important;
        transform-origin: top left !important;
        z-index: 100 !important;
    }

    /* Total-score box stays hidden on iPhone landscape — too tall for the
       available vertical space. South/east/west bid+takes counters still
       carry the per-player score updates. */
    .total-score-box {
        display: none !important;
    }

    /* Game container fills viewport */
    .game-container {
        padding: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Status bar fixed at top - compact pill */
    .game-status {
        position: fixed !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 1px 8px !important;
        margin: 0 !important;
        font-size: 0.6em !important;
        z-index: 100 !important;
        /* Tightened from 60vw so the centered pill clears the scaled-0.6
           Turbo (left, ~80px wide) and game-control-buttons (right, ~282px
           wide) on viewports as small as 667x375. */
        max-width: 38vw !important;
        min-height: 0 !important;
        border-radius: 0 0 8px 8px !important;
        border-width: 1px !important;
        gap: 6px !important;
    }

    .game-status > * {
        font-size: inherit !important;
    }

    /* Game controls fixed in top-right corner — pushed below the status
       bar (which spans the top center) so the New Game button doesn't get
       partially hidden under the status pill on viewports as narrow as
       667×375 (iPhone SE landscape). */
    .game-control-buttons {
        position: fixed !important;
        top: 45px !important;
        right: 0 !important;
        transform: scale(0.6) !important;
        transform-origin: top right !important;
        z-index: 100 !important;
        gap: 4px !important;
    }

    /* Game-board uses fixed positioning to fill the viewport exactly */
    .game-board {
        position: fixed !important;
        top: 22px !important;
        left: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 22px) !important;
        height: calc(100dvh - 22px) !important;
        min-height: unset !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border-width: 1px !important;
        transform: none !important;
    }

    /* Shrink player labels */
    .player-info {
        padding: 2px 5px !important;
        font-size: 0.6em !important;
        gap: 2px !important;
    }

    .player-name {
        font-size: 0.95em !important;
    }

    .player-stats {
        gap: 5px !important;
        font-size: 0.85em !important;
    }

    /* North player: push below the fixed status bar */
    .north-player {
        top: 20px !important;
        gap: 4px !important;
    }

    /* East/West: closer to edges. This layout pins .center-area by top edge
       rather than the shared -80 offset, so the seats keep the line they were
       tuned to here instead of following the desktop/portrait anchor. */
    .east-player {
        right: 4px !important;
        top: calc(50% - 70px) !important;
    }

    .west-player {
        left: 4px !important;
        top: calc(50% - 70px) !important;
    }

    .south-player {
        bottom: 0 !important;
    }

    /* Smaller face-down bot card stacks */
    .bot-cards {
        width: 32px !important;
        height: 44px !important;
    }

    .bot-cards .card-back {
        width: 32px !important;
        height: 44px !important;
    }

    /* Human cards: small but readable */
    .human-cards {
        padding: 4px 6px !important;
        max-width: 100vw !important;
        overflow-x: visible !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: flex-end !important;
        gap: 0 !important;
        margin-bottom: 2px !important;
        margin-top: -2px !important;
        min-height: 60px !important;
        -webkit-perspective: none !important;
        perspective: none !important;
        -webkit-transform-style: flat !important;
        transform-style: flat !important;
        display: flex !important;
        flex-direction: row !important;
    }

    .human-cards .card {
        width: 48px !important;
        height: 68px !important;
        margin: 0 -3px !important;
        flex-shrink: 0 !important;
        -webkit-transform: none !important;
        transform: none !important;
        position: relative !important;
        --card-rank-size: 18px !important;
    }

    .human-cards .card .card-rank {
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .human-cards .card .card-center-suit {
        font-size: 22px !important;
    }

    .human-cards .card .card-top-section {
        top: 2px !important;
        left: 3px !important;
    }

    .human-cards .card:nth-child(1),
    .human-cards .card:nth-child(2),
    .human-cards .card:nth-child(3),
    .human-cards .card:nth-child(4),
    .human-cards .card:nth-child(5),
    .human-cards .card:nth-child(6),
    .human-cards .card:nth-child(7),
    .human-cards .card:nth-child(8),
    .human-cards .card:nth-child(9),
    .human-cards .card:nth-child(10),
    .human-cards .card:nth-child(11),
    .human-cards .card:nth-child(12),
    .human-cards .card:nth-child(13) {
        -webkit-transform: none !important;
        transform: none !important;
    }

    .human-cards.player-turn .card:hover,
    .human-cards .card.selected {
        -webkit-transform: translateY(-8px) !important;
        transform: translateY(-8px) !important;
        z-index: 100 !important;
    }

    /* Bidding interface: positioned in upper area below north player, so it
       NEVER overlaps the south cards (player needs to see card ranks while
       choosing bids). max-height ensures it stops above the cards. */
    .bidding-interface,
    .second-phase-bidding {
        position: fixed !important;
        left: 50% !important;
        top: 55px !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        max-width: 95vw !important;
        min-width: 0 !important;
        width: auto !important;
        max-height: calc(100vh - 130px) !important;
        max-height: calc(100dvh - 130px) !important;
        font-size: 0.7em !important;
        padding: 4px 8px !important;
        z-index: 1000 !important;
        background: rgba(0, 0, 0, 0.92) !important;
        border: 2px solid rgba(255, 215, 0, 0.6) !important;
        border-radius: 8px !important;
        overflow: auto !important;
    }

    .trump-announcement {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) scale(0.5) !important;
        z-index: 1000 !important;
    }

    /* Compact bidding controls. The first-phase bidding renders buttons
       with class .trick-button / .suit-button (created by script.js).
       The second-phase uses .trick-btn (in HTML directly). Cover both. */
    .bidding-interface .tricks-buttons,
    .bidding-interface .suit-buttons {
        gap: 3px !important;
        margin-top: 2px !important;
    }

    /* Force all 9 trick buttons (5-13) onto a single row */
    .bidding-interface .tricks-buttons {
        grid-template-columns: repeat(9, 1fr) !important;
    }

    /* Lay tricks + suits side by side so the layout is wider rather than taller */
    .bidding-interface .input-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .bidding-interface .trick-button,
    .bidding-interface .suit-button,
    .bidding-interface .trick-btn,
    .bidding-interface .suit-btn,
    .second-phase-bidding .trick-btn {
        font-size: 13px !important;
        padding: 2px 4px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        width: 26px !important;
        height: 26px !important;
    }

    .bidding-interface .suit-button {
        font-size: 18px !important;
    }

    .bidding-interface .suit-button[data-value="notrump"] {
        font-size: 11px !important;
    }

    .bidding-interface h3,
    .second-phase-bidding h3,
    .second-phase-bidding h4 {
        font-size: 0.9em !important;
        margin: 2px 0 !important;
    }

    .bidding-interface .input-row {
        gap: 4px !important;
    }

    .bidding-interface .button-row {
        gap: 4px !important;
    }

    .bidding-interface .action-btn {
        padding: 4px 8px !important;
        font-size: 0.85em !important;
    }

    /* === Second-phase bidding: keep all numbers on a single line === */
    /* Main strip (0-7). Only override when JS has it visible. */
    .second-phase-bidding .tricks-buttons-main:not([style*="display: none"]) {
        display: grid !important;
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 3px !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Expanded strip (0-13). Only override when JS makes it visible. */
    .second-phase-bidding .tricks-buttons-extra:not([style*="display: none"]) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        justify-content: center !important;
    }

    .second-phase-bidding .tricks-row,
    .second-phase-bidding .tricks-row-final {
        display: contents !important;
    }

    /* Tighter trick buttons in the takes phase + smaller more/less */
    .second-phase-bidding .trick-btn {
        font-size: 13px !important;
        padding: 2px 4px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        width: 26px !important;
        height: 26px !important;
    }

    .second-phase-bidding .more-btn,
    .second-phase-bidding .less-btn {
        padding: 2px 8px !important;
        font-size: 11px !important;
        min-height: 0 !important;
        margin: 4px auto 0 auto !important;
        width: auto !important;
    }

    .second-phase-bidding .tricks-prediction {
        min-height: 0 !important;
        gap: 4px !important;
    }
}

/* Trump indicator styling - make it stand out with proper suit colors */
#trump-indicator {
    font-weight: bold;
    font-size: 2.5em;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    line-height: 1;
    margin-top: 0;
    margin-left: 8px;
    margin-right: 8px;
    animation: trumpGlow 2s ease-in-out infinite alternate;
}

/* Trump indicator colors based on suit - INVERTED when selected */
#trump-indicator.trump-clubs,
#trump-indicator.trump-spades {
    color: #ffffff !important;
    background: #000000 !important;
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    border: 2px solid #ffffff;
    transform: scale(1.2);
}

#trump-indicator.trump-diamonds,
#trump-indicator.trump-hearts {
    color: #ffffff !important;
    background: #dc143c !important;
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(220, 20, 60, 0.7);
    border: 2px solid #ffffff;
    transform: scale(1.2);
}

#trump-indicator.trump-notrump {
    color: #ffffff !important;
    background: #000000 !important;
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    border: 2px solid #ffffff;
    transform: scale(1.2);
}

#trump-indicator.trump-none {
    color: white;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 25px rgba(255, 255, 255, 0.4);
}

@keyframes trumpGlow {
    0% { 
        transform: scale(1);
    }
    100% { 
        transform: scale(1.05);
    }
}

@keyframes trumpPulse {
    0% {
        box-shadow: 
            0 0 20px rgba(255, 255, 255, 0.8),
            0 4px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
        transform: scale(1.1);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(255, 255, 255, 1.0),
            0 6px 12px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
        transform: scale(1.15);
    }
    100% {
        box-shadow: 
            0 0 20px rgba(255, 255, 255, 0.8),
            0 4px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
        transform: scale(1.1);
    }
}

/* Turn indicator styling - standardized */
#turn-indicator {
    color: white;
    font-weight: bold;
    font-size: 1em;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* Over/Under indicator */
.game-type {
    color: #FF6B6B;
    font-weight: bold;
}

/* Trick Counters */
.trick-counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* North's counter used to sit `static` in the seat's flex row, which is fine
   when it has content and a 10px shove off-centre when it doesn't — and it
   never does: the visible count is "Takes: N" inside the plate, and the only
   code that touches this element clears it. Out of flow like every other
   seat's, so an empty element can't move the nameplate. */
.north-player .trick-counter {
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    color: #FFD700;
    font-weight: bold;
    font-size: 1.0em;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.trick-token {
    display: none;
}

.trick-token::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
    border-radius: 50%;
    pointer-events: none;
}

.trick-token:hover {
    transform: scale(1.2);
    box-shadow: 
        0 5px 10px rgba(0, 0, 0, 0.5),
        0 2px 5px rgba(0, 0, 0, 0.4);
}

.trick-token.new {
    animation: trickWon 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes trickWon {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    25% {
        transform: scale(1.5) rotate(90deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
    }
    75% {
        transform: scale(1.1) rotate(270deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

/* Card dealing animations */
.card-dealing {
    animation: dealCard 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes dealCard {
    0% {
        transform: scale(0.5) rotate(180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(90deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Card shake animation for invalid plays */
@keyframes cardShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Card shuffling effect */
.card-shuffling {
    animation: shuffleCard 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes shuffleCard {
    0%, 100% {
        transform: translateX(0) rotateY(0deg);
    }
    25% {
        transform: translateX(10px) rotateY(15deg);
    }
    50% {
        transform: translateX(-5px) rotateY(-10deg);
    }
    75% {
        transform: translateX(5px) rotateY(5deg);
    }
}

/* Particle effects for card wins */
@keyframes particleFloat {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(0);
        opacity: 0;
    }
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFD700;
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat 1s ease-out forwards;
}

/* +1 Trick Win Animation */
.plus-one-animation {
    position: absolute;
    font-size: 48px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        2px 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 2000;
    animation: plusOneFloat 2s ease-out forwards;
}

@keyframes plusOneFloat {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }
    20% {
        transform: translateY(-10px) scale(1.2);
        opacity: 1;
    }
    40% {
        transform: translateY(-25px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-60px) scale(0.8);
        opacity: 0;
    }
}

/* Fireworks Animation */
.fireworks-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.firework {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: fireworkExplode 2s ease-out forwards;
}

@keyframes fireworkExplode {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    10% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(20);
        opacity: 0;
    }
}

.firework-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: fireworkParticle 3s ease-out forwards;
}

@keyframes fireworkParticle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0);
        opacity: 0;
    }
}

.firework-trail {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    animation: fireworkTrail 1.5s ease-out forwards;
}

@keyframes fireworkTrail {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translateY(80vh) scale(1);
    }
    100% {
        transform: translateY(var(--target-y)) scale(1);
        opacity: 0;
    }
}



/* Winner announcement animation */
@keyframes winnerAnnouncement {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Enhanced card shadows and depth */
.card {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.card:hover {
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

/* Smooth scrolling for human cards */
.human-cards {
    scroll-behavior: smooth;
    -webkit-scrollbar-width: thin;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.5) transparent;
}

.human-cards::-webkit-scrollbar {
    height: 8px;
}

.human-cards::-webkit-scrollbar-track {
    background: transparent;
}

.human-cards::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.5);
    border-radius: 4px;
}

.human-cards::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.7);
}

/* Ensure the predict button is visible and properly positioned */
#predict-btn {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    position: relative;
    z-index: 1001;
}

/* Duplicate .tricks-prediction definition removed - using the one above */

/* Visual indicator for clickable cards */
#north-cards .card {
    transition: all 0.3s ease;
    cursor: pointer;
}

#north-cards .card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
    z-index: 200;
}

#north-cards .card.played {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Name Modal Styling */
.name-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.name-content {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 60, 0.95) 100%);
    padding: 30px;
    border-radius: 15px;
    border: 2px solid rgba(255, 215, 0, 0.6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    max-width: 500px;
    width: 90%;
    text-align: center;
}

.name-header h2 {
    color: #FFD700;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.name-body p {
    margin-bottom: 15px;
    font-size: 1.1em;
}

.name-body input {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 2px solid rgba(255, 215, 0, 0.6);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.1em;
    text-align: center;
}

.name-body input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.name-body input:focus {
    outline: none;
    border-color: #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Start Game Button - Make it bigger and more prominent */
#start-game-btn.action-btn {
    padding: 16px 40px;
    font-size: 18px;
    border-radius: 25px;
    letter-spacing: 1.5px;
    margin-top: 10px;
    background: linear-gradient(135deg, #4CAF50, #45a049, #3d8b40);
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(76, 175, 80, 0.3);
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#start-game-btn.action-btn:hover {
    transform: scale(1.05);
    box-shadow: 
        0 12px 24px rgba(0, 0, 0, 0.5),
        0 6px 12px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(76, 175, 80, 0.5);
}

/* Rules Modal Styling */
.rules-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.rules-content {
    background: linear-gradient(135deg, rgba(20, 20, 60, 0.95) 0%, rgba(40, 40, 80, 0.95) 100%);
    border: 3px solid rgba(255, 215, 0, 0.6);
    border-radius: 20px;
    padding: 0;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    position: relative;
}

.rules-header {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 20px;
    border-radius: 17px 17px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
}

.rules-header h2 {
    margin: 0;
    font-size: 1.8em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.close-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #000;
    border: none;
    font-size: 2em;
    cursor: pointer;
    padding: 0;
    /* WCAG 2.5.5 minimum touch target (was 40x40) */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-weight: bold;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.rules-body {
    padding: 30px;
    color: #ffffff;
}

.rules-section {
    margin-bottom: 25px;
}

.rules-section h3 {
    color: #FFD700;
    font-size: 1.3em;
    margin-bottom: 12px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 8px;
}

.rules-section p {
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 1.1em;
}

.rules-section ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.rules-section li {
    margin-bottom: 8px;
    line-height: 1.5;
    font-size: 1.1em;
}

.rules-section strong {
    color: #FFD700;
    font-weight: bold;
}

/* Scrollbar styling for rules modal */
.rules-content::-webkit-scrollbar {
    width: 8px;
}

.rules-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.rules-content::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.6);
    border-radius: 4px;
}

.rules-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.8);
}

/* Phase 2 Bidding Buttons */
.tricks-buttons-main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 0px;
    min-height: 96px; /* Reserve space for 2 rows of buttons + gaps */
}

.tricks-buttons-extra {
    display: none;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 0px;
    min-height: 192px; /* Reserve space for 4 rows of buttons + gaps */
}

/* Row layout for expanded view */
.tricks-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    justify-content: center;
}

/* Final row with only 2 buttons - center them */
.tricks-row-final {
    grid-template-columns: repeat(2, 1fr);
    max-width: 50%;
    margin: 0 auto;
}

/* Container for both views to ensure consistent positioning */
.tricks-prediction {
    position: relative;
    min-height: 140px; /* Ensure consistent container height */
}



.trick-btn {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    font-size: 20px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    min-width: 45px;
    min-height: 40px;
    width: 45px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.trick-btn:hover {
    background: rgba(255, 215, 0, 0.8);
    border-color: #FFD700;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.trick-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.trick-btn:disabled {
    background: rgba(128, 128, 128, 0.5);
    color: #666;
    cursor: not-allowed;
    border-color: rgba(128, 128, 128, 0.3);
}

.trick-btn:disabled:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.more-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: 2px solid rgba(255, 215, 0, 0.5);
    font-size: 14px;
    font-weight: bold;
    background: rgba(255, 215, 0, 0.2);
    color: #FFD700;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin: 12px auto 0 auto;
    display: block;
    width: 80px;
    text-align: center;
}

.more-btn:hover {
    background: rgba(255, 215, 0, 0.4);
    border-color: #FFD700;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.more-btn:active {
    transform: translateY(0);
}

.less-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: 2px solid rgba(255, 128, 0, 0.5);
    font-size: 14px;
    font-weight: bold;
    background: rgba(255, 128, 0, 0.2);
    color: #FF8000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin: 12px auto 0 auto;
    display: block;
    width: 80px;
    text-align: center;
}

.less-btn:hover {
    background: rgba(255, 128, 0, 0.4);
    border-color: #FF8000;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 128, 0, 0.3);
}

.less-btn:active {
    transform: translateY(0);
}

/* Extended Score View - Spiral notebook paper */
.extended-score-content {
    font-size: 16px;
    font-family: 'Kalam', cursive;
    padding: 30px 30px 30px 60px; /* Extra left padding for holes */
    min-width: 600px; /* Ensure minimum width for all columns */
    background: 
        /* Spiral holes on the left */
        radial-gradient(circle at 40px 40px, rgba(0,0,0,0.1) 6px, rgba(0,0,0,0.05) 7px, transparent 8px),
        radial-gradient(circle at 40px 90px, rgba(0,0,0,0.1) 6px, rgba(0,0,0,0.05) 7px, transparent 8px),
        radial-gradient(circle at 40px 140px, rgba(0,0,0,0.1) 6px, rgba(0,0,0,0.05) 7px, transparent 8px),
        radial-gradient(circle at 40px 190px, rgba(0,0,0,0.1) 6px, rgba(0,0,0,0.05) 7px, transparent 8px),
        radial-gradient(circle at 40px 240px, rgba(0,0,0,0.1) 6px, rgba(0,0,0,0.05) 7px, transparent 8px),
        radial-gradient(circle at 40px 290px, rgba(0,0,0,0.1) 6px, rgba(0,0,0,0.05) 7px, transparent 8px),
        radial-gradient(circle at 40px 340px, rgba(0,0,0,0.1) 6px, rgba(0,0,0,0.05) 7px, transparent 8px),
        radial-gradient(circle at 40px 390px, rgba(0,0,0,0.1) 6px, rgba(0,0,0,0.05) 7px, transparent 8px),
        radial-gradient(circle at 40px 440px, rgba(0,0,0,0.1) 6px, rgba(0,0,0,0.05) 7px, transparent 8px),
        /* Perforated edge */
        linear-gradient(
            90deg,
            transparent 0px,
            transparent 70px,
            rgba(200,200,200,0.3) 70px,
            rgba(200,200,200,0.3) 72px,
            transparent 72px
        ),
        /* Paper grain texture across full width */
        radial-gradient(circle at 20% 15%, rgba(0,0,0,0.015) 1px, transparent 1px),
        radial-gradient(circle at 50% 35%, rgba(0,0,0,0.012) 1px, transparent 1px),
        radial-gradient(circle at 80% 55%, rgba(0,0,0,0.01) 1px, transparent 1px),
        radial-gradient(circle at 30% 75%, rgba(0,0,0,0.008) 1px, transparent 1px),
        radial-gradient(circle at 70% 85%, rgba(0,0,0,0.012) 1px, transparent 1px),
        /* Subtle scratches and wear across width */
        linear-gradient(35deg, transparent 25%, rgba(0,0,0,0.006) 25.1%, transparent 25.2%),
        linear-gradient(-25deg, transparent 60%, rgba(0,0,0,0.004) 60.05%, transparent 60.1%),
        linear-gradient(15deg, transparent 80%, rgba(0,0,0,0.003) 80.02%, transparent 80.04%),
        /* Slightly crooked notebook lines extending full width */
        repeating-linear-gradient(
            90.2deg,
            transparent 0px,
            transparent 29px,
            rgba(150, 180, 220, 0.12) 29px,
            rgba(150, 180, 220, 0.12) 30px
        ),
        /* Red margin line (slightly crooked) */
        linear-gradient(
            89.7deg,
            transparent 0px,
            transparent 109px,
            rgba(220, 100, 100, 0.25) 109px,
            rgba(220, 100, 100, 0.25) 110px,
            transparent 110px
        ),
        /* Hand-drawn vertical lines after each player's score */
        /* Line 1 - after first player's score */
        linear-gradient(
            89.2deg,
            transparent 0px,
            transparent 220px,
            rgba(90, 90, 90, 0.2) 220px,
            rgba(90, 90, 90, 0.2) 221px,
            transparent 221px
        ),
        /* Line 2 - after second player's score (wobbly) */
        linear-gradient(
            89.8deg,
            transparent 0px,
            transparent 320px,
            rgba(90, 90, 90, 0.15) 320px,
            rgba(90, 90, 90, 0.15) 321px,
            transparent 321px
        ),
        /* Line 3 - after third player's score (slightly curved) */
        linear-gradient(
            89.3deg,
            transparent 0px,
            transparent 420px,
            rgba(90, 90, 90, 0.18) 420px,
            rgba(90, 90, 90, 0.18) 421px,
            transparent 421px
        ),
        /* Line 4 - after fourth player's score */
        linear-gradient(
            89.6deg,
            transparent 0px,
            transparent 520px,
            rgba(90, 90, 90, 0.16) 520px,
            rgba(90, 90, 90, 0.16) 521px,
            transparent 521px
        ),
        /* Base paper color with aging */
        linear-gradient(135deg, #fefefe 0%, #faf9f7 20%, #fcfbf9 50%, #f8f7f5 80%, #faf8f6 100%);
    border: none;
    border-radius: 0;
    border-left: 3px solid #e0e0e0; /* Spiral binding edge */
    box-shadow: 
        /* Paper shadow */
        0 4px 12px rgba(0,0,0,0.08),
        /* Left edge shadow for spiral binding */
        inset 3px 0 6px rgba(0,0,0,0.05),
        /* Slight paper curl */
        inset -1px -1px 2px rgba(0,0,0,0.01);
    transform: rotate(-0.2deg);
    position: relative;
    margin: 15px;
    max-height: none;
    overflow-y: visible;
}

/* Remove old paper shadow - using new realistic effects */

/* Spiral notebook wear and aging effects for wider paper */
.extended-score-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Small ink blot */
        radial-gradient(circle at 20% 25%, rgba(50, 100, 180, 0.06) 4px, transparent 8px),
        /* Eraser crumbs spread across width */
        radial-gradient(circle at 60% 45%, rgba(255, 200, 200, 0.08) 3px, transparent 6px),
        radial-gradient(circle at 65% 48%, rgba(255, 200, 200, 0.06) 2px, transparent 4px),
        radial-gradient(circle at 80% 65%, rgba(255, 200, 200, 0.05) 2px, transparent 5px),
        /* Pencil smudges across the paper */
        radial-gradient(ellipse at 40% 70%, rgba(0,0,0,0.015) 12px, transparent 18px),
        radial-gradient(ellipse at 75% 30%, rgba(0,0,0,0.01) 8px, transparent 15px),
        /* Corner fold */
        radial-gradient(ellipse at 95% 5%, rgba(0,0,0,0.02) 15px, transparent 20px),
        /* Finger prints */
        radial-gradient(ellipse at 15% 80%, rgba(0,0,0,0.008) 18px, transparent 25px),
        radial-gradient(ellipse at 85% 75%, rgba(0,0,0,0.006) 15px, transparent 22px);
    pointer-events: none;
    z-index: 1;
}

/* Hand-drawn line details and imperfections */
.extended-score-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Hand-drawn line wobbles and breaks - repositioned after scores */
        /* Line 1 wobbles - after first player score */
        radial-gradient(ellipse at 222px 25%, rgba(90,90,90,0.1) 1px, transparent 2px),
        radial-gradient(ellipse at 219px 60%, rgba(90,90,90,0.08) 1px, transparent 2px),
        radial-gradient(ellipse at 221px 85%, rgba(90,90,90,0.06) 1px, transparent 2px),
        /* Line 2 wobbles - after second player score */
        radial-gradient(ellipse at 318px 30%, rgba(90,90,90,0.1) 1px, transparent 2px),
        radial-gradient(ellipse at 322px 55%, rgba(90,90,90,0.08) 1px, transparent 2px),
        radial-gradient(ellipse at 319px 90%, rgba(90,90,90,0.07) 1px, transparent 2px),
        /* Line 3 wobbles - after third player score */
        radial-gradient(ellipse at 421px 20%, rgba(90,90,90,0.09) 1px, transparent 2px),
        radial-gradient(ellipse at 418px 65%, rgba(90,90,90,0.08) 1px, transparent 2px),
        radial-gradient(ellipse at 422px 80%, rgba(90,90,90,0.06) 1px, transparent 2px),
        /* Line 4 wobbles - after fourth player score */
        radial-gradient(ellipse at 519px 35%, rgba(90,90,90,0.08) 1px, transparent 2px),
        radial-gradient(ellipse at 521px 70%, rgba(90,90,90,0.07) 1px, transparent 2px),
        /* Torn edge detail near holes */
        radial-gradient(ellipse at 72px 40%, rgba(0,0,0,0.02) 1px, transparent 3px),
        radial-gradient(ellipse at 72px 60%, rgba(0,0,0,0.015) 1px, transparent 2px),
        /* Small crease lines */
        linear-gradient(25deg, transparent 30%, rgba(0,0,0,0.008) 30.02%, transparent 30.04%),
        linear-gradient(-15deg, transparent 80%, rgba(0,0,0,0.006) 80.01%, transparent 80.02%),
        /* Edge wear */
        linear-gradient(0deg, transparent 95%, rgba(0,0,0,0.01) 95%, rgba(0,0,0,0.02) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Pencil decoration removed */

.scorecard-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    font-family: 'Kalam', cursive;
    font-size: 15px;
    color: #4a4a4a;
    margin: 0;
}

.scorecard-table th,
.scorecard-table td {
    border: none;
    border-style: none;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    font-family: 'Kalam', cursive;
    font-weight: 400;
    background: transparent;
    position: relative;
    color: #5a5a5a;
}

.scorecard-table .score-col,
.scorecard-table td.score-col {
    padding: 12px 4px; /* Reduced padding for score columns */
}

.scorecard-table th {
    background: transparent;
    color: #4a4a4a;
    font-weight: 700;
    font-size: 18px;
    font-family: 'Kalam', cursive;
    text-shadow: none;
}

.scorecard-table .player-header {
    background: transparent;
    color: #4a4a4a;
    font-weight: 700;
    font-family: 'Kalam', cursive;
    font-size: 20px;
    text-shadow: none;
}

/* Player-specific header colors - removed for pencil effect */
.scorecard-table .player-header.player-north {
    color: #5a5a5a;
    text-shadow: none;
}

.scorecard-table .player-header.player-east {
    color: #5a5a5a;
    text-shadow: none;
}

.scorecard-table .player-header.player-south {
    color: #5a5a5a;
    text-shadow: none;
}

.scorecard-table .player-header.player-west {
    color: #5a5a5a;
    text-shadow: none;
}

.scorecard-table .game-number {
    background: transparent;
    color: #4a4a4a;
    font-weight: 600;
}

.scorecard-table .total-row {
    background: transparent;
    color: #4a4a4a;
    font-weight: 700;
}

/* Total row merged cells styling */
.scorecard-table tr.total-row-tr .total-score-cell {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    background: transparent;
    color: #4a4a4a;
}

/* Player-specific total row colors - removed for pencil effect */
.scorecard-table tr.total-row-tr .player-total-north {
    background: transparent;
    color: #4a4a4a;
    text-shadow: none;
}

.scorecard-table tr.total-row-tr .player-total-east {
    background: transparent;
    color: #4a4a4a;
    text-shadow: none;
}

.scorecard-table tr.total-row-tr .player-total-south {
    background: transparent;
    color: #4a4a4a;
    text-shadow: none;
}

.scorecard-table tr.total-row-tr .player-total-west {
    background: transparent;
    color: #4a4a4a;
    text-shadow: none;
}

/* Total row label styling */
.scorecard-table tr.total-row-tr .total-label {
    background: transparent;
    color: #4a4a4a;
    font-weight: 700;
}



.scorecard-table td {
    color: #5a5a5a;
    background: transparent;
}

/* Player-specific column separations - removed as they create inconsistent borders */

.scorecard-table .bid-col {
    background: transparent;
    color: #5a5a5a;
    font-weight: 500;
}

.scorecard-table .score-col {
    background: transparent;
    color: #5a5a5a;
    font-weight: 600;
}

/* Player-specific bid column colors - removed for pencil effect */
.scorecard-table .bid-col.player-north {
    background: transparent;
    color: #5a5a5a;
    font-weight: 600;
}

.scorecard-table .bid-col.player-east {
    background: transparent;
    color: #5a5a5a;
    font-weight: 600;
}

.scorecard-table .bid-col.player-south {
    background: transparent;
    color: #5a5a5a;
    font-weight: 600;
}

.scorecard-table .bid-col.player-west {
    background: transparent;
    color: #5a5a5a;
    font-weight: 600;
}

/* Player-specific score column colors - removed for pencil effect */
.scorecard-table .score-col.player-north {
    background: transparent;
    color: #5a5a5a;
    font-weight: 700;
}

.scorecard-table .score-col.player-east {
    background: transparent;
    color: #5a5a5a;
    font-weight: 700;
}

.scorecard-table .score-col.player-south {
    background: transparent;
    color: #5a5a5a;
    font-weight: 700;
}

.scorecard-table .score-col.player-west {
    background: transparent;
    color: #5a5a5a;
    font-weight: 700;
}

/* Current gamlet row styling - looks like fresh pencil marks */
.scorecard-table .current-gamlet {
    background: transparent;
}

.scorecard-table .current-gamlet td {
    font-style: italic;
    position: relative;
    font-weight: 500;
    color: #3a3a3a;
}

.scorecard-table .current-gamlet .game-number.current {
    background: transparent;
    color: #3a3a3a;
    font-weight: 700;
    border-right: none;
}

.scorecard-table .current-gamlet .current {
    background: transparent;
    border-top: none;
    border-bottom: none;
}

.scorecard-table .current-gamlet .bid-col.current {
    background: transparent;
    color: #3a3a3a;
}

.scorecard-table .current-gamlet .score-col.current {
    background: transparent;
    color: #3a3a3a;
}

/* Current gamlet player-specific colors - removed for pencil effect */
.scorecard-table .current-gamlet .bid-col.player-north.current {
    background: transparent;
    color: #3a3a3a;
}

.scorecard-table .current-gamlet .score-col.player-north.current {
    background: transparent;
    color: #3a3a3a;
}

.scorecard-table .current-gamlet .bid-col.player-east.current {
    background: transparent;
    color: #3a3a3a;
}

.scorecard-table .current-gamlet .score-col.player-east.current {
    background: transparent;
    color: #3a3a3a;
}

.scorecard-table .current-gamlet .bid-col.player-south.current {
    background: transparent;
    color: #3a3a3a;
}

.scorecard-table .current-gamlet .score-col.player-south.current {
    background: transparent;
    color: #3a3a3a;
}

.scorecard-table .current-gamlet .bid-col.player-west.current {
    background: transparent;
    color: #3a3a3a;
}

.scorecard-table .current-gamlet .score-col.player-west.current {
    background: transparent;
    color: #3a3a3a;
}

.scorecard-table .current-gamlet .trump-col.current {
    background: transparent;
    color: #3a3a3a;
}

/* Add some handwritten-like imperfections */
.scorecard-table td:nth-child(odd) {
    transform: rotate(0.2deg);
}

.scorecard-table td:nth-child(even) {
    transform: rotate(-0.1deg);
}

.scorecard-table tr:nth-child(odd) td {
    transform: rotate(-0.05deg);
}

/* Paper stain effects */
.scorecard-table::before {
    content: '';
    position: absolute;
    top: 60px;
    right: 30px;
    width: 15px;
    height: 15px;
    background: radial-gradient(circle, rgba(139, 115, 85, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

.scorecard-table::after {
    content: '';
    position: absolute;
    bottom: 40px;
    left: 80px;
    width: 12px;
    height: 8px;
    background: radial-gradient(ellipse, rgba(139, 115, 85, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

/* Old pencil styles removed - these were conflicting with the aging effects */



/* Custom scrollbar for paper theme */
.extended-score-content::-webkit-scrollbar {
    width: 12px;
}

.extended-score-content::-webkit-scrollbar-track {
    background: rgba(139, 115, 85, 0.1);
    border-radius: 6px;
}

.extended-score-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #d4af37, #b8941f);
    border-radius: 6px;
    border: 2px solid #f9f7e8;
}

.extended-score-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #b8941f, #9d7f1a);
}

/* ═══ Bid summary banner ══════════════════════════════════════════════════
   Said once, on the felt, the moment the fourth prediction lands: the total
   and what it means for the hand. The status bar keeps the number afterwards
   (see #turn-indicator), but the meaning of "over" deserves one plain
   sentence at the moment it becomes true. */
.bid-summary {
    position: absolute;
    left: 50%;
    top: calc(50% - 80px);
    transform: translate(-50%, -50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    max-width: min(88%, 420px);
    padding: 14px 20px;
    border-radius: 14px;
    border: 1px solid #FFD700;
    background: linear-gradient(180deg, rgba(30, 55, 38, .97), rgba(16, 32, 22, .98));
    box-shadow: 0 22px 50px -24px rgba(0, 0, 0, .9);
    animation: bidSummaryIn .34s cubic-bezier(.22, .9, .3, 1);
    pointer-events: none;
}

.bid-summary.is-leaving { animation: bidSummaryOut .4s ease forwards; }

.bid-summary-total { font-size: 19px; font-weight: 700; color: #FFD700; }
.bid-summary-verdict { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.bid-summary.is-over { border-color: #e0907f; }
.bid-summary.is-over .bid-summary-total { color: #f0a898; }

@keyframes bidSummaryIn {
    from { opacity: 0; transform: translate(-50%, -58%) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes bidSummaryOut {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -46%) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
    .bid-summary, .bid-summary.is-leaving { animation: none; }
}