/* Bridge Training Application - Bridge Club Theme */

/* ===== COLOR PALETTE ===== */
:root {
    --bridge-green: #0B5D2F;
    --bridge-green-light: #1a7a45;
    --bridge-green-dark: #084422;
    --wood-brown: #4A2C2A;
    --wood-brown-light: #6B4742;
    --cream: #FFF8DC;
    --gold: #D4AF37;
    --card-red: #DC143C;  /* Crimson red for Hearts and Diamonds */
    --card-black: #000000;
}

/* ===== GLOBAL STYLES ===== */
body {
    background: linear-gradient(135deg, var(--bridge-green-dark) 0%, var(--bridge-green) 100%);
    background-attachment: fixed;
    font-family: 'Quicksand', sans-serif;
    color: #212529; /* Default to dark text for readability */
    min-height: 100vh;
}

/* Only apply cream color to elements on dark backgrounds */
.felt-table,
.wood-border,
.wood-panel,
.training-container,
.leaderboard-container,
.home-container {
    color: var(--cream);
}

.felt-table h1,
.felt-table h2,
.felt-table h3,
.felt-table h4,
.felt-table h5,
.felt-table h6,
.wood-border h1,
.wood-border h2,
.wood-border h3,
.wood-border h4,
.wood-border h5,
.wood-border h6,
.wood-panel h1,
.wood-panel h2,
.wood-panel h3,
.wood-panel h4,
.wood-panel h5,
.wood-panel h6,
.training-container h1,
.training-container h2,
.training-container h3,
.leaderboard-container h1,
.leaderboard-container h2,
.leaderboard-container h3,
.home-container h1,
.home-container h2,
.home-container h3 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    color: var(--cream);
}

/* Default heading colors for light backgrounds */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    color: var(--bridge-green);
}

/* ===== GREEN FELT TABLE BACKGROUND ===== */
.felt-table {
    background: radial-gradient(ellipse at center, var(--bridge-green-light) 0%, var(--bridge-green) 100%);
    background-image: 
        radial-gradient(ellipse at center, var(--bridge-green-light) 0%, var(--bridge-green) 100%),
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,.05) 2px, rgba(0,0,0,.05) 4px);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.3),
        0 4px 6px rgba(0,0,0,0.5);
}

/* ===== WOOD BORDERS & ACCENTS ===== */
.wood-border {
    border: 6px solid var(--wood-brown);
    border-radius: 12px;
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
    background: linear-gradient(to bottom, var(--wood-brown-light) 0%, var(--wood-brown) 100%);
}

.wood-panel {
    background: linear-gradient(90deg, var(--wood-brown) 0%, var(--wood-brown-light) 50%, var(--wood-brown) 100%);
    padding: 1rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* ===== PLAYING CARD STYLES ===== */
.playing-card {
    width: 80px;
    height: 112px;
    background: white;
    border-radius: 8px;
    border: 2px solid #333;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin: 0.25rem;
    display: inline-block;
}

.playing-card:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 4px 6px 12px rgba(0,0,0,0.4);
}

.playing-card .card-rank {
    font-size: 18px;
    font-weight: bold;
    position: absolute;
}

.playing-card .card-suit {
    font-size: 16px;
    position: absolute;
}

.playing-card .top-left.card-rank {
    top: 4px;
    left: 6px;
}

.playing-card .top-left.card-suit {
    top: 20px;
    left: 6px;
}

.playing-card .bottom-right.card-rank {
    bottom: 4px;
    right: 6px;
    transform: rotate(180deg);
}

.playing-card .bottom-right.card-suit {
    bottom: 20px;
    right: 6px;
    transform: rotate(180deg);
}

.playing-card .card-center-suit {
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
}

.playing-card.card-red .card-rank,
.playing-card.card-red .card-suit,
.playing-card.card-red .card-center-suit {
    color: var(--card-red) !important;
}

.playing-card.card-black .card-rank,
.playing-card.card-black .card-suit,
.playing-card.card-black .card-center-suit {
    color: var(--card-black) !important;
}

/* ===== HAND DISPLAY ===== */
.card-hand {
    background: rgba(11, 93, 47, 0.4);
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid var(--wood-brown);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    overflow: visible;
    max-width: 100%;
}

.card-table {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0.5rem 0;
}

.training-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
}

.training-session {
    width: 100%;
}

/* Training page text colors */
.training-header,
.training-description,
.session-info,
.loading-container {
    color: var(--cream);
}

.answer-input-section {
    margin-top: 2rem;
}

.answer-input-section label {
    color: var(--cream);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.answer-input-section .form-control {
    background-color: rgba(255, 248, 220, 0.95);
    color: #212529;
    border: 2px solid var(--wood-brown);
}

.answer-input-section .form-control:focus {
    background-color: #fff;
    border-color: var(--gold);
}

/* Explanation container styling */
.explanation-container {
    background: rgba(255, 248, 220, 0.95);
    color: #212529;
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid var(--wood-brown);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.explanation-container * {
    color: #212529 !important;
}

/* Breakdown table styles */
.breakdown-table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
}

.breakdown-table th,
.breakdown-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}

.breakdown-table thead th {
    background-color: var(--bridge-green);
    color: var(--cream) !important;
    font-weight: 600;
}

.breakdown-table .card-cell {
    font-weight: 500;
}

.breakdown-table .points-cell {
    text-align: center;
    font-weight: 500;
    width: 100px;
}

.breakdown-table .running-total-cell {
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--bridge-green) !important;
    width: 100px;
}

.breakdown-table .total-row {
    background-color: rgba(11, 93, 47, 0.1);
    font-weight: bold;
}

.breakdown-table .total-row td {
    padding: 1rem 0.75rem;
    border-top: 2px solid var(--bridge-green);
}

.suit-red {
    color: var(--card-red) !important;
}

.suit-black {
    color: var(--card-black) !important;
}

.action-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.suit-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}

.suit-symbol {
    font-size: 24px;
    font-weight: bold;
    min-width: 40px;
    text-align: center;
}

.suit-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.all-cards-row {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 140px;
    padding: 1rem 0;
    min-width: 650px;
}

.all-cards-row .playing-card {
    position: absolute;
    margin: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
    cursor: pointer;
}

/* Straight line with slight overlap - adjusted for nav menu - cards are 80px wide, spacing is 50px */
.all-cards-row .playing-card:nth-child(1) { 
    left: calc(50% - 300px);
    z-index: 1;
}
.all-cards-row .playing-card:nth-child(2) { 
    left: calc(50% - 250px);
    z-index: 2;
}
.all-cards-row .playing-card:nth-child(3) { 
    left: calc(50% - 200px);
    z-index: 3;
}
.all-cards-row .playing-card:nth-child(4) { 
    left: calc(50% - 150px);
    z-index: 4;
}
.all-cards-row .playing-card:nth-child(5) { 
    left: calc(50% - 100px);
    z-index: 5;
}
.all-cards-row .playing-card:nth-child(6) { 
    left: calc(50% - 50px);
    z-index: 6;
}
.all-cards-row .playing-card:nth-child(7) { 
    left: calc(50% + 0px);
    z-index: 7;
}
.all-cards-row .playing-card:nth-child(8) { 
    left: calc(50% + 50px);
    z-index: 8;
}
.all-cards-row .playing-card:nth-child(9) { 
    left: calc(50% + 100px);
    z-index: 9;
}
.all-cards-row .playing-card:nth-child(10) { 
    left: calc(50% + 150px);
    z-index: 10;
}
.all-cards-row .playing-card:nth-child(11) { 
    left: calc(50% + 200px);
    z-index: 11;
}
.all-cards-row .playing-card:nth-child(12) { 
    left: calc(50% + 250px);
    z-index: 12;
}
.all-cards-row .playing-card:nth-child(13) { 
    left: calc(50% + 300px);
    z-index: 13;
}

/* Hover effect - lift up */
.all-cards-row .playing-card:hover {
    transform: translateY(-15px) scale(1.05);
    z-index: 100;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}

/* ===== RESPONSIVE CARD LAYOUT FOR SMALLER SCREENS ===== */
/* Tablets and smaller desktops (600px - 870px) */
@media (max-width: 870px) and (min-width: 600px) {
    .all-cards-row {
        min-width: 500px;
        height: 100px;
    }

    .all-cards-row .playing-card {
        width: 55px;
        height: 77px;
    }

    .all-cards-row .playing-card .card-rank {
        font-size: 13px;
    }

    .all-cards-row .playing-card .card-suit {
        font-size: 11px;
    }

    .all-cards-row .playing-card .card-center-suit {
        font-size: 32px;
    }

    .all-cards-row .playing-card .top-left.card-rank {
        top: 2px;
        left: 4px;
    }

    .all-cards-row .playing-card .top-left.card-suit {
        top: 14px;
        left: 4px;
    }

    .all-cards-row .playing-card .bottom-right.card-rank {
        bottom: 2px;
        right: 4px;
    }

    .all-cards-row .playing-card .bottom-right.card-suit {
        bottom: 14px;
        right: 4px;
    }

    /* Adjusted positions for smaller cards - spacing is 35px */
    .all-cards-row .playing-card:nth-child(1) { left: calc(50% - 210px); }
    .all-cards-row .playing-card:nth-child(2) { left: calc(50% - 175px); }
    .all-cards-row .playing-card:nth-child(3) { left: calc(50% - 140px); }
    .all-cards-row .playing-card:nth-child(4) { left: calc(50% - 105px); }
    .all-cards-row .playing-card:nth-child(5) { left: calc(50% - 70px); }
    .all-cards-row .playing-card:nth-child(6) { left: calc(50% - 35px); }
    .all-cards-row .playing-card:nth-child(7) { left: calc(50% + 0px); }
    .all-cards-row .playing-card:nth-child(8) { left: calc(50% + 35px); }
    .all-cards-row .playing-card:nth-child(9) { left: calc(50% + 70px); }
    .all-cards-row .playing-card:nth-child(10) { left: calc(50% + 105px); }
    .all-cards-row .playing-card:nth-child(11) { left: calc(50% + 140px); }
    .all-cards-row .playing-card:nth-child(12) { left: calc(50% + 175px); }
    .all-cards-row .playing-card:nth-child(13) { left: calc(50% + 210px); }
}

/* Small tablets and large phones (400px - 599px) */
@media (max-width: 599px) and (min-width: 400px) {
    .all-cards-row {
        min-width: 380px;
        height: 80px;
    }

    .all-cards-row .playing-card {
        width: 45px;
        height: 63px;
    }

    .all-cards-row .playing-card .card-rank {
        font-size: 11px;
    }

    .all-cards-row .playing-card .card-suit {
        font-size: 9px;
    }

    .all-cards-row .playing-card .card-center-suit {
        font-size: 24px;
    }

    .all-cards-row .playing-card .top-left.card-rank {
        top: 1px;
        left: 3px;
    }

    .all-cards-row .playing-card .top-left.card-suit {
        top: 11px;
        left: 3px;
    }

    .all-cards-row .playing-card .bottom-right.card-rank {
        bottom: 1px;
        right: 3px;
    }

    .all-cards-row .playing-card .bottom-right.card-suit {
        bottom: 11px;
        right: 3px;
    }

    /* Tighter spacing - 28px */
    .all-cards-row .playing-card:nth-child(1) { left: calc(50% - 168px); }
    .all-cards-row .playing-card:nth-child(2) { left: calc(50% - 140px); }
    .all-cards-row .playing-card:nth-child(3) { left: calc(50% - 112px); }
    .all-cards-row .playing-card:nth-child(4) { left: calc(50% - 84px); }
    .all-cards-row .playing-card:nth-child(5) { left: calc(50% - 56px); }
    .all-cards-row .playing-card:nth-child(6) { left: calc(50% - 28px); }
    .all-cards-row .playing-card:nth-child(7) { left: calc(50% + 0px); }
    .all-cards-row .playing-card:nth-child(8) { left: calc(50% + 28px); }
    .all-cards-row .playing-card:nth-child(9) { left: calc(50% + 56px); }
    .all-cards-row .playing-card:nth-child(10) { left: calc(50% + 84px); }
    .all-cards-row .playing-card:nth-child(11) { left: calc(50% + 112px); }
    .all-cards-row .playing-card:nth-child(12) { left: calc(50% + 140px); }
    .all-cards-row .playing-card:nth-child(13) { left: calc(50% + 168px); }
}

/* Small phones (< 400px) */
@media (max-width: 399px) {
    .all-cards-row {
        min-width: 320px;
        height: 70px;
    }

    .all-cards-row .playing-card {
        width: 38px;
        height: 53px;
    }

    .all-cards-row .playing-card .card-rank {
        font-size: 10px;
    }

    .all-cards-row .playing-card .card-suit {
        font-size: 8px;
    }

    .all-cards-row .playing-card .card-center-suit {
        font-size: 20px;
    }

    .all-cards-row .playing-card .top-left.card-rank {
        top: 1px;
        left: 2px;
    }

    .all-cards-row .playing-card .top-left.card-suit {
        top: 10px;
        left: 2px;
    }

    .all-cards-row .playing-card .bottom-right.card-rank {
        bottom: 1px;
        right: 2px;
    }

    .all-cards-row .playing-card .bottom-right.card-suit {
        bottom: 10px;
        right: 2px;
    }

    /* Very tight spacing - 24px */
    .all-cards-row .playing-card:nth-child(1) { left: calc(50% - 144px); }
    .all-cards-row .playing-card:nth-child(2) { left: calc(50% - 120px); }
    .all-cards-row .playing-card:nth-child(3) { left: calc(50% - 96px); }
    .all-cards-row .playing-card:nth-child(4) { left: calc(50% - 72px); }
    .all-cards-row .playing-card:nth-child(5) { left: calc(50% - 48px); }
    .all-cards-row .playing-card:nth-child(6) { left: calc(50% - 24px); }
    .all-cards-row .playing-card:nth-child(7) { left: calc(50% + 0px); }
    .all-cards-row .playing-card:nth-child(8) { left: calc(50% + 24px); }
    .all-cards-row .playing-card:nth-child(9) { left: calc(50% + 48px); }
    .all-cards-row .playing-card:nth-child(10) { left: calc(50% + 72px); }
    .all-cards-row .playing-card:nth-child(11) { left: calc(50% + 96px); }
    .all-cards-row .playing-card:nth-child(12) { left: calc(50% + 120px); }
    .all-cards-row .playing-card:nth-child(13) { left: calc(50% + 144px); }

    .all-cards-row .playing-card:hover {
        transform: translateY(-10px) scale(1.05);
    }
}

/* ===== RESPONSIVE TRAINING CONTAINER ===== */
@media (max-width: 870px) {
    .training-container {
        padding: 0.5rem 0.25rem;
        width: 100%;
        max-width: 100%;
    }

    .card-table {
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        padding: 0;
    }

    .card-hand {
        padding: 0.5rem 0.25rem;
        width: 100%;
    }

    .answer-input-section {
        margin-top: 1.5rem;
        padding: 0 0.5rem;
    }

    .answer-input-section label {
        font-size: 1rem;
    }

    .action-buttons {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0 0.5rem;
    }

    .action-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 599px) {
    .training-container {
        padding: 0.25rem 0;
    }

    .card-hand {
        padding: 0.25rem 0;
    }

    .training-header {
        padding: 0 0.5rem;
    }
}

@media (max-width: 399px) {
    .training-container {
        padding: 0.25rem 0;
    }

    .training-header h1 {
        font-size: 1.5rem;
        padding: 0 0.25rem;
    }

    .card-hand {
        padding: 0.25rem 0;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    .answer-input-section {
        padding: 0 0.25rem;
    }

    .action-buttons {
        padding: 0 0.25rem;
    }
}

/* ===== BUTTONS (Bridge Club Style) ===== */
.btn-bridge {
    background: linear-gradient(to bottom, var(--gold) 0%, #b8941f 100%);
    color: var(--wood-brown);
    border: 2px solid var(--wood-brown);
    border-radius: 24px;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}

.btn-bridge:hover {
    background: linear-gradient(to bottom, #e6c655 0%, var(--gold) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.btn-bridge:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ===== PANELS & CARDS ===== */
.panel-bridge {
    background: rgba(255, 248, 220, 0.95);
    color: #333;
    border: 4px solid var(--wood-brown);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* Ensure light backgrounds have dark text */
.panel-bridge,
.topic-card,
.table-bridge,
.answer-input-section,
.explanation-container,
.score-card {
    color: #212529 !important;
}

.panel-bridge *:not(.btn):not(.badge),
.topic-card *:not(.btn):not(.badge),
.table-bridge *:not(thead *),
.answer-input-section *,
.explanation-container *,
.score-card * {
    color: inherit;
}

/* ===== NAVIGATION BAR ===== */
.navbar-bridge {
    background: linear-gradient(to bottom, var(--wood-brown-light) 0%, var(--wood-brown) 100%);
    border-bottom: 4px solid var(--bridge-green);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.navbar-bridge .navbar-inner {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    width: 100%;
    height: 60px;
    box-sizing: border-box;
}

.navbar-bridge .navbar-brand {
    color: var(--gold) !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    margin: 0 !important;
    margin-right: auto !important;
    padding: 0 !important;
    flex-shrink: 0;
}

.navbar-bridge .navbar-brand:hover {
    color: var(--cream) !important;
}

.navbar-bridge .navbar-toggler {
    display: none;
    background: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.5rem;
}

.navbar-bridge .navbar-toggler:hover {
    background: rgba(212, 175, 55, 0.1);
}

.navbar-bridge .navbar-collapse {
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
    flex-direction: row !important;
    flex-shrink: 0;
    margin-left: auto;
}

.navbar-bridge .navbar-collapse.collapse {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.navbar-bridge .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.5rem !important;
    align-items: center !important;
    height: 60px !important;
    margin-left: 0 !important;
}

.navbar-bridge .nav-item {
    margin: 0 !important;
    padding: 0 !important;
    height: 60px;
    display: flex;
    align-items: center;
}

.navbar-bridge .nav-link,
.navbar-bridge .btn-logout {
    all: unset;
    box-sizing: border-box;
    color: var(--cream) !important;
    padding: 0 1.25rem !important;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 1rem !important;
    white-space: nowrap !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
    border-radius: 4px !important;
}

.navbar-bridge .nav-link:hover,
.navbar-bridge .btn-logout:hover {
    background: rgba(212, 175, 55, 0.2) !important;
    color: var(--gold) !important;
}

.navbar-bridge .nav-link.active {
    background: var(--gold) !important;
    color: var(--wood-brown) !important;
}

.navbar-bridge .nav-form {
    margin: 0 !important;
    padding: 0 !important;
    height: 60px;
    display: flex;
    align-items: center;
}

.navbar-bridge .btn-logout {
    width: auto !important;
}

/* Desktop Navigation - Ensure menu is on the right */
@media (min-width: 769px) {
    .navbar-bridge .navbar-collapse,
    .navbar-bridge .navbar-collapse.collapse,
    .navbar-bridge .navbar-collapse.collapsing,
    .navbar-bridge div.navbar-collapse {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        margin-left: auto !important;
        overflow: visible !important;
        max-height: none !important;
        height: 60px !important;
        visibility: visible !important;
    }

    .navbar-bridge .navbar-nav,
    .navbar-bridge ul.navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        margin-left: 0 !important;
    }

    .navbar-bridge .navbar-toggler {
        display: none !important;
    }
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .navbar-bridge .navbar-inner {
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap !important;
    }

    .navbar-bridge .navbar-toggler {
        display: block !important;
        margin-left: auto !important;
    }

    /* Base properties for mobile menu */
    .navbar-bridge .navbar-collapse {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        order: 3 !important;
        height: auto !important;
        flex-direction: column !important;
        display: block !important;
        background: linear-gradient(to bottom, var(--wood-brown-light) 0%, var(--wood-brown) 100%);
        border-top: 2px solid var(--bridge-green);
        transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
        overflow: hidden !important;
    }

    /* COLLAPSED state - menu is HIDDEN (collapseNavMenu = true) */
    .navbar-bridge .navbar-collapse.collapse {
        max-height: 0 !important;
        padding: 0 !important;
        border: none !important;
        opacity: 0;
    }

    /* EXPANDED state - menu is VISIBLE (collapseNavMenu = false) */
    .navbar-bridge .navbar-collapse:not(.collapse) {
        max-height: 1000px !important;
        padding: 0.5rem 0 !important;
        opacity: 1;
    }

    .navbar-bridge .navbar-nav {
        flex-direction: column !important;
        padding: 1rem 0 !important;
        gap: 0.25rem !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .navbar-bridge .nav-item {
        width: 100% !important;
        height: auto !important;
    }

    .navbar-bridge .nav-link,
    .navbar-bridge .btn-logout {
        width: 100% !important;
        height: auto !important;
        justify-content: flex-start !important;
        padding: 0.75rem 1rem !important;
    }

    .navbar-bridge .nav-form {
        width: 100% !important;
        height: auto !important;
    }
}

/* ===== TOPIC CARDS (Bridge Hand Records Style) ===== */
.topic-card {
    background: rgba(255, 248, 220, 0.95);
    border: 3px solid var(--wood-brown);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.topic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.4);
}

.topic-card h3 {
    color: var(--wood-brown);
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.topic-card p {
    color: #555;
}

.topic-icon {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 1rem;
}

.topic-title {
    text-align: center;
}

.topic-description {
    text-align: center;
    margin-bottom: 1rem;
}

.topic-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ===== FORM STYLES ===== */
.form-control {
    border: 2px solid var(--bridge-green);
    border-radius: 4px;
}

.form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}

/* ===== TABLES ===== */
.table-bridge {
    background: rgba(255, 248, 220, 0.95);
    color: #333;
}

.table-bridge thead {
    background: var(--wood-brown);
    color: var(--cream);
}

.table-bridge tbody tr:hover {
    background: rgba(212, 175, 55, 0.2);
}

/* ===== BADGE/ACHIEVEMENT STYLES ===== */
.badge-gold {
    background: linear-gradient(to bottom, var(--gold), #b8941f);
    color: var(--wood-brown);
    font-weight: bold;
}

.badge-silver {
    background: linear-gradient(to bottom, #C0C0C0, #A8A8A8);
    color: #333;
}

.badge-bronze {
    background: linear-gradient(to bottom, #CD7F32, #B87333);
    color: #fff;
}

/* ===== LEADERBOARD / RANKING LIST ===== */
.leaderboard-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.leaderboard-header {
    text-align: center;
    margin-bottom: 2rem;
}

.current-user-score {
    margin-bottom: 2rem;
}

.current-user-score h3 {
    color: var(--cream);
    margin-bottom: 1rem;
}

.score-card {
    background: rgba(255, 248, 220, 0.95);
    border: 3px solid var(--gold);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.user-score {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.user-score .rank-badge {
    font-size: 2rem;
    font-weight: bold;
    color: var(--bridge-green);
}

.score-details {
    flex: 1;
}

.score-name {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--wood-brown);
    margin-bottom: 0.5rem;
}

.score-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.score-stats span {
    color: #555;
    font-size: 0.95rem;
}

.top-scores h3 {
    color: var(--cream);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

/* Ranking List Styles */
.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ranking-item {
    background: rgba(255, 248, 220, 0.95);
    border: 2px solid var(--wood-brown);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.ranking-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Rank Position */
.rank-position {
    flex-shrink: 0;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.medal-icon {
    font-size: 2.5rem;
    animation: shine 2s ease-in-out infinite;
}

@keyframes shine {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.rank-badge {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bridge-green-light), var(--bridge-green));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Gold, Silver, Bronze Styles */
.rank-gold {
    border-color: #FFD700;
    background: linear-gradient(to right, rgba(255, 215, 0, 0.1), rgba(255, 248, 220, 0.95));
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.4);
}

.rank-silver {
    border-color: #C0C0C0;
    background: linear-gradient(to right, rgba(192, 192, 192, 0.1), rgba(255, 248, 220, 0.95));
    box-shadow: 0 2px 6px rgba(192, 192, 192, 0.4);
}

.rank-bronze {
    border-color: #CD7F32;
    background: linear-gradient(to right, rgba(205, 127, 50, 0.1), rgba(255, 248, 220, 0.95));
    box-shadow: 0 2px 6px rgba(205, 127, 50, 0.4);
}

/* Player Info */
.player-info {
    flex: 1;
    min-width: 0;
}

.player-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--wood-brown);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.you-badge {
    background: var(--gold);
    color: var(--wood-brown);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.player-stats-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #555;
    font-size: 0.9rem;
}

.stat-compact strong {
    color: var(--bridge-green);
}

.stat-separator {
    color: #ccc;
}

/* Performance Metrics */
.performance-metrics {
    display: flex;
    gap: 1.5rem;
    flex-shrink: 0;
}

.metric-item {
    text-align: center;
    min-width: 80px;
}

.metric-value {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--bridge-green);
    line-height: 1.2;
}

.metric-label {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

/* Current User Highlight */
.current-user-highlight {
    border: 3px solid var(--gold);
    background: linear-gradient(to right, rgba(212, 175, 55, 0.15), rgba(255, 248, 220, 0.95));
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    background: rgba(255, 248, 220, 0.95);
    border: 2px solid var(--wood-brown);
    border-radius: 12px;
}

.no-scores {
    color: #666;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.no-scores-subtitle {
    color: #999;
    font-size: 0.9rem;
}

/* Responsive Leaderboard */
@media (max-width: 768px) {
    .leaderboard-container {
        padding: 1rem;
    }

    .ranking-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        gap: 1rem;
    }

    .rank-position {
        align-self: flex-start;
    }

    .performance-metrics {
        width: 100%;
        justify-content: space-around;
        padding-top: 0.75rem;
        border-top: 1px solid #ddd;
    }

    .player-stats-compact {
        flex-wrap: wrap;
    }
}

/* ===== BOOTSTRAP REPLACEMENT UTILITIES ===== */
/* Basic grid and utility classes to replace Bootstrap */

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-fluid {
    width: 100%;
    padding: 0 1rem;
}

/* Row and Column */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5rem;
}

.col,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    padding: 0.5rem;
}

.col {
    flex: 1;
}

.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }

/* Spacing utilities */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.ms-1 { margin-left: 0.25rem; }
.ms-2 { margin-left: 0.5rem; }
.ms-3 { margin-left: 1rem; }

.me-1 { margin-right: 0.25rem; }
.me-2 { margin-right: 0.5rem; }
.me-3 { margin-right: 1rem; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

/* Text utilities */
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-end { text-align: right; }

.text-muted { color: #6c757d; }
.text-danger { color: #dc3545; }
.text-success { color: #28a745; }
.text-warning { color: #ffc107; }

/* Display utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* Flex utilities */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }

/* Form controls */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    outline: 0;
    border-color: var(--gold);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}

/* Buttons */
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    background-color: var(--bridge-green);
    border-color: var(--bridge-green);
}

.btn-primary:hover {
    background-color: var(--bridge-green-light);
    border-color: var(--bridge-green-light);
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
}

/* Table */
.table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

/* Alert */
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

/* Card */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}

.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}

.card-title {
    margin-bottom: 0.75rem;
}

/* Badge */
.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

/* List group */
.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
}

.list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.list-group-item:last-child {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .d-md-none { display: none; }
    .d-md-block { display: block; }
}
    }
}

/* ===== RESPONSIVE ===== */

/* Tablets and smaller desktops (768px - 1024px) */
@media (max-width: 1024px) {
    .all-cards-row {
        min-width: 550px;
    }

    .all-cards-row .playing-card {
        width: 65px;
        height: 91px;
    }

    .all-cards-row .playing-card .card-rank {
        font-size: 15px;
    }

    .all-cards-row .playing-card .card-suit {
        font-size: 13px;
    }

    .all-cards-row .playing-card .card-center-suit {
        font-size: 38px;
    }

    /* Tighter spacing for tablets - 40px spacing */
    .all-cards-row .playing-card:nth-child(1) { left: calc(50% - 240px); }
    .all-cards-row .playing-card:nth-child(2) { left: calc(50% - 200px); }
    .all-cards-row .playing-card:nth-child(3) { left: calc(50% - 160px); }
    .all-cards-row .playing-card:nth-child(4) { left: calc(50% - 120px); }
    .all-cards-row .playing-card:nth-child(5) { left: calc(50% - 80px); }
    .all-cards-row .playing-card:nth-child(6) { left: calc(50% - 40px); }
    .all-cards-row .playing-card:nth-child(7) { left: calc(50% + 0px); }
    .all-cards-row .playing-card:nth-child(8) { left: calc(50% + 40px); }
    .all-cards-row .playing-card:nth-child(9) { left: calc(50% + 80px); }
    .all-cards-row .playing-card:nth-child(10) { left: calc(50% + 120px); }
    .all-cards-row .playing-card:nth-child(11) { left: calc(50% + 160px); }
    .all-cards-row .playing-card:nth-child(12) { left: calc(50% + 200px); }
    .all-cards-row .playing-card:nth-child(13) { left: calc(50% + 240px); }
}

/* Mobile and small tablets (max-width: 768px) */
@media (max-width: 768px) {
    .all-cards-row {
        min-width: 440px;
        height: 100px;
    }

    .playing-card {
        width: 52px;
        height: 73px;
    }

    .playing-card .card-rank {
        font-size: 12px;
    }

    .playing-card .card-suit {
        font-size: 10px;
    }

    .playing-card .card-center-suit {
        font-size: 30px;
    }

    .felt-table {
        padding: 1rem;
    }
}

/* ===== ACCOUNT PAGES STYLING ===== */
/* Ensure account pages (Register, Login, etc.) have good readability */

/* Create a light card/panel for account forms */
article.content {
    background-color: rgba(255, 248, 220, 0.98);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem auto;
    max-width: 800px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Override default text colors for account pages */
article.content h1,
article.content h2,
article.content h3,
article.content h4,
article.content h5,
article.content h6,
article.content p,
article.content label,
article.content span,
article.content div {
    color: #212529 !important;
}

/* Ensure form inputs have proper styling */
article.content .form-control {
    background-color: #fff;
    color: #212529;
    border: 2px solid var(--bridge-green);
}

article.content .form-control:focus {
    background-color: #fff;
    color: #212529;
    border-color: var(--gold);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}

/* Form labels */
article.content .form-floating label {
    color: #6c757d !important;
}

article.content .form-floating > .form-control:focus ~ label,
article.content .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--bridge-green) !important;
}

/* Links in account pages */
article.content a {
    color: var(--bridge-green);
    font-weight: 600;
}

article.content a:hover {
    color: var(--bridge-green-light);
    text-decoration: underline;
}

/* Alert boxes */
article.content .alert {
    color: #212529 !important;
    border-radius: 8px;
}

article.content .alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460 !important;
}

article.content .alert-info h4,
article.content .alert-info p,
article.content .alert-info small,
article.content .alert-info strong {
    color: #0c5460 !important;
}

article.content .alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24 !important;
}

/* Buttons on account pages */
article.content .btn-primary {
    background-color: var(--bridge-green);
    border-color: var(--bridge-green-dark);
    color: var(--cream);
}

article.content .btn-primary:hover {
    background-color: var(--bridge-green-light);
    border-color: var(--bridge-green);
}

article.content .btn-secondary {
    background-color: var(--wood-brown);
    border-color: var(--wood-brown);
    color: var(--cream);
}

article.content .btn-secondary:hover {
    background-color: var(--wood-brown-light);
    border-color: var(--wood-brown-light);
}

/* ===== GLOBAL BUTTON STYLES ===== */
/* Ensure buttons have readable text in training and competition pages */

.btn-primary,
.training-container .btn-primary,
.leaderboard-container .btn-primary,
.home-container .btn-primary {
    background-color: var(--bridge-green) !important;
    border-color: var(--bridge-green-dark) !important;
    color: var(--cream) !important;
    font-weight: 600;
}

.btn-primary:hover,
.training-container .btn-primary:hover,
.leaderboard-container .btn-primary:hover,
.home-container .btn-primary:hover {
    background-color: var(--bridge-green-light) !important;
    border-color: var(--bridge-green) !important;
    color: var(--cream) !important;
}

.btn-secondary,
.training-container .btn-secondary,
.leaderboard-container .btn-secondary,
.home-container .btn-secondary {
    background-color: var(--wood-brown) !important;
    border-color: var(--wood-brown) !important;
    color: var(--cream) !important;
    font-weight: 600;
}

.btn-secondary:hover,
.training-container .btn-secondary:hover,
.leaderboard-container .btn-secondary:hover,
.home-container .btn-secondary:hover {
    background-color: var(--wood-brown-light) !important;
    border-color: var(--wood-brown-light) !important;
    color: var(--cream) !important;
}

.btn-success {
    background-color: var(--bridge-green-light) !important;
    border-color: var(--bridge-green) !important;
    color: var(--cream) !important;
    font-weight: 600;
}

.btn-success:hover {
    background-color: var(--bridge-green) !important;
    border-color: var(--bridge-green-dark) !important;
    color: var(--cream) !important;
}

.btn-danger {
    background-color: var(--card-red) !important;
    border-color: #a31029 !important;
    color: white !important;
    font-weight: 600;
}

.btn-danger:hover {
    background-color: #b01030 !important;
    border-color: #8a0c22 !important;
    color: white !important;
}

/* Ensure button text is always readable */
.btn,
.training-container .btn,
.leaderboard-container .btn,
.competition-complete .btn {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Validation messages */
article.content .text-danger,
article.content .validation-message {
    color: #dc3545 !important;
}

/* Status message */
article.content .status-message {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background-color: #f8f9fa;
    color: #212529 !important;
}

/* Horizontal rule */
article.content hr {
    border-top-color: var(--bridge-green);
    opacity: 0.3;
}    .topic-card {
        padding: 1rem;
    }

    /* Mobile: 33px spacing for tighter fit */
    .all-cards-row .playing-card:nth-child(1) { left: calc(50% - 198px); }
    .all-cards-row .playing-card:nth-child(2) { left: calc(50% - 165px); }
    .all-cards-row .playing-card:nth-child(3) { left: calc(50% - 132px); }
    .all-cards-row .playing-card:nth-child(4) { left: calc(50% - 99px); }
    .all-cards-row .playing-card:nth-child(5) { left: calc(50% - 66px); }
    .all-cards-row .playing-card:nth-child(6) { left: calc(50% - 33px); }
    .all-cards-row .playing-card:nth-child(7) { left: calc(50% + 0px); }
    .all-cards-row .playing-card:nth-child(8) { left: calc(50% + 33px); }
    .all-cards-row .playing-card:nth-child(9) { left: calc(50% + 66px); }
    .all-cards-row .playing-card:nth-child(10) { left: calc(50% + 99px); }
    .all-cards-row .playing-card:nth-child(11) { left: calc(50% + 132px); }
    .all-cards-row .playing-card:nth-child(12) { left: calc(50% + 165px); }
    .all-cards-row .playing-card:nth-child(13) { left: calc(50% + 198px); }

    .all-cards-row .playing-card:hover {
        transform: translateY(-10px) scale(1.05);
    }
}

/* Very small phones (max-width: 576px) */
@media (max-width: 576px) {
    .all-cards-row {
        min-width: 360px;
        height: 85px;
    }

    .playing-card {
        width: 42px;
        height: 59px;
    }

    .playing-card .card-rank {
        font-size: 10px;
        top: 2px;
        left: 3px;
    }

    .playing-card .card-suit {
        font-size: 8px;
        top: 12px;
        left: 3px;
    }

    .playing-card .bottom-right.card-rank {
        bottom: 2px;
        right: 3px;
    }

    .playing-card .bottom-right.card-suit {
        bottom: 12px;
        right: 3px;
    }

    .playing-card .card-center-suit {
        font-size: 22px;
    }

    /* Very small screens: 27px spacing */
    .all-cards-row .playing-card:nth-child(1) { left: calc(50% - 162px); }
    .all-cards-row .playing-card:nth-child(2) { left: calc(50% - 135px); }
    .all-cards-row .playing-card:nth-child(3) { left: calc(50% - 108px); }
    .all-cards-row .playing-card:nth-child(4) { left: calc(50% - 81px); }
    .all-cards-row .playing-card:nth-child(5) { left: calc(50% - 54px); }
    .all-cards-row .playing-card:nth-child(6) { left: calc(50% - 27px); }
    .all-cards-row .playing-card:nth-child(7) { left: calc(50% + 0px); }
    .all-cards-row .playing-card:nth-child(8) { left: calc(50% + 27px); }
    .all-cards-row .playing-card:nth-child(9) { left: calc(50% + 54px); }
    .all-cards-row .playing-card:nth-child(10) { left: calc(50% + 81px); }
    .all-cards-row .playing-card:nth-child(11) { left: calc(50% + 108px); }
    .all-cards-row .playing-card:nth-child(12) { left: calc(50% + 135px); }
    .all-cards-row .playing-card:nth-child(13) { left: calc(50% + 162px); }

    .all-cards-row .playing-card:hover {
        transform: translateY(-8px) scale(1.05);
    }

    .card-hand {
        padding: 1rem;
    }

    .training-container {
        padding: 0.5rem;
    }
}



/* ===== COMPETITION STYLES ===== */
.competition-header {
    margin-bottom: 2rem;
    text-align: center;
}

.progress-indicator {
    margin: 1.5rem 0;
}

.progress-bar-container {
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    height: 20px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar {
    background: linear-gradient(90deg, var(--gold), var(--bridge-green-light));
    height: 100%;
    transition: width 0.3s ease;
}

.progress-text {
    color: var(--cream);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.competition-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.stat-box {
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    min-width: 120px;
    text-align: center;
}

.stat-box .stat-label {
    display: block;
    font-size: 0.9rem;
    color: var(--gold);
    margin-bottom: 0.25rem;
}

.stat-box .stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cream);
}

.competition-complete {
    text-align: center;
    padding: 2rem;
}

.completion-header h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.personal-record-badge {
    background: linear-gradient(135deg, var(--gold), #FFD700);
    color: var(--wood-brown);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.5rem;
    font-weight: 700;
    display: inline-block;
    margin: 1rem 0;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.completion-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.stat-card {
    background: rgba(255, 248, 220, 0.95);
    border: 3px solid var(--wood-brown);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.stat-card .stat-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.stat-card .stat-content {
    color: #212529;
}

.stat-card .stat-label {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-card .stat-value-large {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--bridge-green);
    line-height: 1;
}

.stat-card .stat-previous,
.stat-card .stat-percentage,
.stat-card .stat-average,
.stat-card .stat-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
}