/* ========================================
   Spite & Malice - Mobile-First Styles
   ======================================== */

@font-face {
    font-family: 'BoldPixels';
    src: url('/fonts/BoldPixels.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Color Palette - Teal & Gold (slightly less green, more blue-teal) */
    --felt-dark: #0d3840;
    --felt-light: #1a5562;
    --felt-glow: #2a7080;
    --gold: #d4af37;
    --gold-light: #f0d875;
    --gold-dark: #a08629;
    --cream: #faf8f0;
    /* Titles/labels: cream (or the theme's --cream), never bright yellow */
    --text-accent: var(--cream);
    --card-white: #ffffff;
    --card-shadow: rgba(0, 0, 0, 0.35);
    --red-suit: #c41e3a;
    --black-suit: #1a1a1a;
    --accent-purple: #6b4c9a;
    --danger: #dc3545;
    --success: #1e9e52;

    /* Surface colors - used for UI panels, modals, nav drawer */
    --surface-dark: #061616;
    --surface-mid: #0d2222;
    --surface-light: #1a3232;

    /* Button text - dark on light buttons by default */
    --btn-text: #0d3840;

    /* Typography — BoldPixels for titles/body; Geist Pixel for buttons; Jersey 25 for cards */
    --font-primary: 'BoldPixels', sans-serif;
    --font-display: 'BoldPixels', sans-serif;
    --font-button: 'Geist Pixel', sans-serif;
    --font-card: 'Jersey 25', sans-serif;
    --card-type-scale: 1.1;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    
    /* Card Dimensions (10% larger) */
    --card-width: 53px;
    --card-height: 75px;
    --card-radius: 7px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
}

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

html, body {
    height: 100%;
    overflow: hidden;
    touch-action: manipulation;
}

body {
    font-family: var(--font-primary);
    font-synthesis: none;
    background: linear-gradient(145deg, var(--felt-dark) 0%, var(--felt-light) 50%, var(--felt-dark) 100%);
    background-attachment: fixed;
    color: var(--cream);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Felt Pattern Overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Game Container */
#game-container {
    position: relative;
    height: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: var(--space-sm);
    padding-bottom: env(safe-area-inset-bottom, var(--space-sm));
    z-index: 1;
}

/* Header: leave room for left menu tab so title is never covered */
#game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    padding-left: 52px;
    margin-bottom: var(--space-xs);
}

#game-header h1 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-accent);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    letter-spacing: 0.02em;
}

#turn-indicator {
    background: var(--gold);
    color: var(--felt-dark);
    padding: 6px 17px 6px 6px;
    border-radius: 999px 30px 30px 999px;
    font-weight: 600;
    font-size: 1.3rem;
    white-space: nowrap;
    min-width: 12rem;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
    transition: background var(--transition-normal), color var(--transition-normal);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

#turn-indicator-text {
    flex: 1;
    text-align: left;
    padding-left: 4px;
}

/* No avatar: symmetric rounded rect */
#turn-indicator:not(:has(.turn-indicator-avatar-wrap:not(.hidden))) {
    padding: 7px 22px;
    border-radius: 30px;
    justify-content: center;
}

#turn-indicator.computer-turn {
    background: var(--accent-purple);
    color: white;
}

.turn-indicator-avatar-wrap {
    width: 41px;
    height: 41px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
    display: inline-block;
    position: relative;
}

.turn-indicator-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transform: scale(1.85);
    transform-origin: center 30%;
    display: block;
}

/* Menu tab (slim tab on upper-left; tap to open nav drawer) */
.nav-hamburger {
    position: fixed;
    top: var(--space-md);
    left: 0;
    z-index: 3300;
    width: 28px;
    height: 44px;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.1) 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-left: none;
    border-radius: 0 10px 10px 0;
    color: var(--cream);
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
}
.nav-hamburger:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.35) 0%, rgba(212, 175, 55, 0.15) 100%);
}
.nav-hamburger span {
    display: block;
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 3200;
    background: rgba(0,0,0,0.5);
    opacity: 1;
    transition: opacity var(--transition-normal);
}
.nav-overlay.hidden {
    pointer-events: none;
    opacity: 0;
}
.nav-drawer {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    max-width: 85vw;
    height: 100%;
    background: linear-gradient(180deg, var(--surface-mid) 0%, var(--surface-dark) 100%);
    border-right: 1px solid rgba(212, 175, 55, 0.2);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
}
.nav-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    color: var(--cream);
    font-size: 1.8rem;
    cursor: pointer;
    opacity: 0.8;
    padding: 4px;
    line-height: 1;
}
.nav-close:hover {
    opacity: 1;
}
.nav-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 44px; /* clear the close button */
    margin-bottom: 8px;
    padding: 20px 12px 16px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    cursor: default;
    text-align: center;
}

.nav-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid rgba(212, 175, 55, 0.6);
    background: var(--surface-dark, #1a1a2e);
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.nav-profile-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}

.nav-profile-name {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-profile-username {
    font-size: 0.8rem;
    color: rgba(212, 175, 55, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: var(--space-md);
}
.nav-item {
    display: block;
    width: 100%;
    padding: var(--space-md) var(--space-sm);
    text-align: left;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--cream);
    font-size: 1.1rem;
    font-family: var(--font-button);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    -webkit-font-smoothing: none;
    cursor: pointer;
    transition: var(--transition-fast);
}
.nav-item:hover {
    background: rgba(212, 175, 55, 0.15);
    color: var(--text-accent);
}

.nav-music-volume {
    padding: 0 var(--space-sm) var(--space-md);
}
.nav-music-volume-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.nav-music-volume label,
.nav-music-volume-row span {
    font-family: var(--font-button);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cream);
    opacity: 0.75;
}
.nav-music-volume-row span {
    opacity: 0.55;
}
.nav-music-volume input[type="range"] {
    width: 100%;
    height: 22px;
    margin: 0;
    accent-color: var(--text-accent, #d4af37);
    cursor: pointer;
}
.nav-now-playing {
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-now-playing.hidden {
    display: none;
}
.nav-now-playing-artist,
.nav-now-playing-title {
    font-family: var(--font-button);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cream);
}
.nav-now-playing-artist {
    font-size: 0.7rem;
    opacity: 0.5;
}
.nav-now-playing-title {
    font-size: 0.82rem;
    opacity: 0.85;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-now-playing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.nav-now-playing-skip {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0 2px;
    margin: 0;
    color: var(--cream);
    font-size: 0.78rem;
    line-height: 1;
    opacity: 0.85;
    cursor: pointer;
}
.nav-now-playing-skip:hover {
    opacity: 1;
}

/* Stats screen (above lobby so accessible from game creation screen) */
.stats-screen {
    position: fixed;
    inset: 0;
    z-index: 3150;
    background: linear-gradient(145deg, var(--felt-dark) 0%, var(--surface-dark) 100%);
    overflow-y: auto;
    padding: var(--space-lg);
    font-family: var(--font-button);
    letter-spacing: 0;
    text-transform: none;
}
.stats-screen.hidden {
    display: none !important;
}
.stats-content {
    max-width: 480px;
    margin: 0 auto;
}
.stats-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: var(--space-xl);
    padding-top: var(--space-sm);
}
.stats-header h1 {
    font-family: var(--font-primary);
    color: var(--text-accent);
    font-size: 1.8rem;
    text-align: center;
}
.screen-back-btn {
    position: absolute;
    left: 0;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--cream, #f5f0dc);
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}
.screen-back-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.1);
}
.stats-summary {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    text-align: center;
}
.stats-summary .stat-box {
    padding: var(--space-sm);
}
.stats-summary .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-accent);
}
.stats-summary .stat-label {
    font-size: 0.85rem;
    color: var(--cream);
    opacity: 0.8;
}
/* Today's Games section */
.stats-today {
    margin-bottom: var(--space-lg);
}
.stats-today h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-accent);
    margin-bottom: var(--space-md);
}
.stats-today-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-sm);
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
    padding: var(--space-md);
    text-align: center;
    margin-bottom: var(--space-md);
}
.stats-today-summary .stat-box {
    padding: var(--space-xs, 4px);
}
.stats-today-summary .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-accent);
}
.stats-today-summary .stat-label {
    font-size: 0.78rem;
    color: var(--cream);
    opacity: 0.8;
    margin-top: 2px;
}
.stats-today-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: var(--space-md);
}
.stats-today-table th,
.stats-today-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    color: var(--cream);
}
.stats-today-table th {
    background: rgba(212, 175, 55, 0.2);
    color: var(--text-accent);
    font-size: 0.85rem;
}
.stats-today-table tr:not(:last-child) td {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.stats-today-feed {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.today-game-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px var(--space-md);
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
    font-size: 0.9rem;
}
.today-game-result {
    font-weight: 700;
    font-size: 0.85rem;
    width: 22px;
    text-align: center;
    border-radius: 4px;
    padding: 1px 0;
}
.today-game-result.today-win {
    color: #5ddb6a;
}
.today-game-result.today-loss {
    color: #e07070;
}
.today-game-opponent {
    flex: 1;
    color: var(--cream);
}
.today-game-time {
    color: var(--cream);
    opacity: 0.55;
    font-size: 0.8rem;
}

.stats-opponents {
    margin-bottom: var(--space-lg);
}
.stats-opponents h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-accent);
    margin-bottom: var(--space-md);
}
.stats-opponents table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
}
.stats-opponents th,
.stats-opponents td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    color: var(--cream);
}
.stats-opponents th {
    background: rgba(212, 175, 55, 0.2);
    color: var(--text-accent);
    font-size: 0.85rem;
}
.stats-opponents tr:not(:last-child) td {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.stats-ai {
    margin-bottom: var(--space-lg);
}
.stats-ai h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-accent);
    margin-bottom: var(--space-md);
}
.stats-ai-record {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: var(--space-md);
    text-align: center;
}
.stats-ai-box .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-accent);
}
.stats-ai-box .stat-value.ai-loss {
    color: #e07070;
}
.stats-ai-box .stat-value.ai-pct {
    color: var(--text-accent);
}
.stats-ai-box .stat-label {
    font-size: 0.8rem;
    color: var(--cream);
    opacity: 0.8;
    margin-top: 2px;
}
.stats-ai-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
    margin-top: var(--space-md);
}
.stats-ai-table th,
.stats-ai-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    color: var(--cream);
}
.stats-ai-table th {
    background: rgba(212, 175, 55, 0.2);
    color: var(--text-accent);
    font-size: 0.85rem;
}
.stats-ai-table tr:not(:last-child) td {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.stats-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0 1.5rem;
    gap: 0.75rem;
}
.stats-loading.hidden {
    display: none !important;
}
.stats-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: stats-spin 0.75s linear infinite;
}
@keyframes stats-spin {
    to { transform: rotate(360deg); }
}
.stats-loading-text {
    color: var(--text-accent);
    font-size: 0.9rem;
    margin: 0;
}
.stats-empty {
    color: var(--cream);
    opacity: 0.8;
    font-size: 0.95rem;
}
.stats-leaderboard table th:first-child,
.stats-leaderboard table td:first-child {
    width: 2.4em;
}
.stats-leaderboard table th.leaderboard-num,
.stats-leaderboard table td.leaderboard-num {
    text-align: right;
    width: 4.2em;
    white-space: nowrap;
}
.leaderboard-sort-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    font-weight: 400;
    opacity: 0.85;
}
.leaderboard-sort-btn:hover {
    opacity: 1;
    text-decoration: underline;
}
.leaderboard-sort-btn.is-sorted {
    font-weight: 700;
    opacity: 1;
}
.leaderboard-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
}
.leaderboard-nav-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--cream, #f5f0dc);
    opacity: 0.8;
    transition: opacity 0.15s, background 0.15s;
}
.leaderboard-nav-btn:hover:not(:disabled) {
    opacity: 1;
    background: rgba(255,255,255,0.1);
}
.leaderboard-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.leaderboard-nav-range {
    color: var(--cream);
    font-size: 0.85rem;
    min-width: 7.5em;
    text-align: center;
}

.stats-pending {
    color: var(--cream);
    opacity: 0.65;
    font-size: 0.8rem;
    font-style: italic;
    margin-top: 0.5rem;
}

/* Player Labels */
.player-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-accent);
    opacity: 0.8;
    margin-bottom: var(--space-xs);
}

html[data-theme] .player-label {
    font-size: 0.9rem;
}

.pile-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.5);
    margin-bottom: var(--space-xs);
    text-align: center;
}

/* Player Zones */
.player-zone {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    justify-content: center;
    min-height: calc(var(--card-height) + 45px);
}

.goal-pile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.discard-piles-container {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    min-height: calc(var(--card-height) + 45px);
    padding-top: calc(0.65rem * 1.2 + var(--space-xs));
}

.discard-piles {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    align-items: flex-start;
}

/* Card Piles */
.card-pile {
    width: var(--card-width);
    height: var(--card-height);
    border-radius: var(--card-radius);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Extended hit area for better drag and drop - doesn't affect layout */
.card-pile::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    z-index: -1;
}

.card-pile.empty {
    border: 2px dashed rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.15);
}

/* Goal Pile */
.goal-pile {
    box-shadow: 
        0 0 0 3px var(--gold-dark),
        0 4px 12px var(--card-shadow);
}

.pile-count {
    font-size: 0.7rem;
    color: var(--text-accent);
    margin-top: var(--space-xs);
    text-align: center;
    font-weight: 600;
}

#player-goal-count,
#opponent-goal-count {
    font-size: 1.05rem;
}

/* Center Area – background fits around the cards, cards centered */
#center-area {
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    padding: var(--space-xs) var(--space-md);
    margin: var(--space-xl) auto var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: fit-content;
    max-width: 100%;
}

.center-piles {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    align-items: center;
}

.center-pile {
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.15);
    transition: var(--transition-fast);
}

/* Extended drop zone for center piles */
.center-pile::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    z-index: -1;
}

.center-pile.valid-target {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
    animation: pulse 1s infinite;
}

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

#draw-pile-area {
    display: none; /* Hidden – draw pile not shown in center area */
}

#draw-pile {
    background: linear-gradient(135deg, #2d1b4e 0%, #1a0f2e 100%);
    border: 2px solid #4a3070;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Opponent Area */
#opponent-area {
    padding: var(--space-sm) var(--space-sm);
}

.opponent-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
    padding-left: 0;
}

#opponent-area .player-label {
    margin-bottom: 0;
}

.opponent-hand-count {
    font-size: 0.85rem;
    color: var(--cream);
    opacity: 0.85;
}

.opponent-hand-reveal {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding: var(--space-xs) 0;
    min-height: 0;
}

.opponent-hand-reveal .opponent-reveal-card {
    width: 36px;
    min-width: 36px;
    height: 50px;
    font-size: 0.65rem;
}

.opponent-hand-reveal .opponent-reveal-card .corner,
.opponent-hand-reveal .opponent-reveal-card .rank,
.opponent-hand-reveal .opponent-reveal-card .suit {
    font-size: inherit;
}

#opponent-area .player-zone {
    flex-direction: row-reverse;
}

/* Player Area */
#player-area {
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
}

#player-area .player-label {
    order: 1;
    margin-bottom: 0;
    margin-top: var(--space-xs);
}

/* Hand Area */
#hand-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xs);
}

.hand-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-accent);
    text-align: left;
    padding-left: 0;
    margin-bottom: var(--space-sm);
}

.hand {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Cards – Jersey 25 for rank/suit on card faces */
.card {
    width: var(--card-width);
    height: var(--card-height);
    border-radius: var(--card-radius);
    background: var(--card-white);
    border: 1px solid #000;
    box-shadow: 0 2px 4px var(--card-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-card);
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    transform-origin: center bottom;
    touch-action: manipulation;
}

.card.face-down {
    background: linear-gradient(135deg, #2d1b4e 0%, #1a0f2e 100%);
    border: 2px solid #4a3070;
}

.card.face-down::after {
    content: '✦';
    color: #6b4c9a;
    font-size: calc(1.2rem * var(--card-type-scale));
}

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

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

.card.joker {
    background: linear-gradient(135deg, #ffd700 0%, #ff6b6b 50%, #4ecdc4 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.card.joker.played-wild {
    background: linear-gradient(135deg, #ffd700 0%, #ff9f43 50%, #ee5a24 100%);
    color: #1a1a1a;
    text-shadow: none;
    position: relative;
}

.card.joker.played-wild .wild-indicator {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: calc(0.4rem * var(--card-type-scale));
    font-weight: 700;
    color: white;
    background: rgba(0,0,0,0.4);
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

/* King Wild Card Styles */
.card.king-wild {
    position: relative;
    background: linear-gradient(135deg, var(--card-white) 0%, #f0e6ff 100%);
    border: 1px solid #000;
}

.card.king-wild .wild-badge {
    position: absolute;
    top: auto;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) rotate(-12deg);
    font-size: calc(0.35rem * var(--card-type-scale));
    font-weight: 700;
    color: white;
    background: var(--accent-purple);
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 1px;
    z-index: 1;
}

.card.king-wild.played-wild {
    background: linear-gradient(135deg, #e8d5ff 0%, #c9a8ff 50%, #a066ff 100%);
}

.card.king-wild.played-wild .wild-indicator {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: calc(0.35rem * var(--card-type-scale));
    font-weight: 700;
    color: white;
    background: var(--accent-purple);
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

/* Large center rank; suit lives only in the corners */
.card .rank {
    font-size: calc(1.8rem * var(--card-type-scale));
    line-height: 1;
    font-weight: 800;
}

.card .suit {
    display: none;
}

.card .corner {
    position: absolute;
    font-size: calc(0.5rem * var(--card-type-scale));
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card .corner > span:first-child {
    font-size: 1.2em;
}

.card .corner > span:last-child {
    font-size: 0.8em;
}

.card .corner-top {
    top: 2px;
    left: 3px;
}

.card .corner-bottom {
    bottom: 2px;
    right: 3px;
    transform: rotate(180deg);
}

/* Card Interactions */
/* No hover/active movement on hand cards - was buggy */

.card.selected {
    transform: translateY(-12px);
    box-shadow: 
        0 0 0 3px var(--gold),
        0 12px 24px var(--card-shadow);
}

#game-container.turn-locked .card.in-hand,
#game-container.turn-locked #player-goal .card,
#game-container.turn-locked #player-area .discard-pile .card.top-card {
    pointer-events: none;
}

.card.playable {
    cursor: pointer;
}

.card.playable::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--card-radius) + 2px);
    border: 2px solid var(--gold);
    opacity: 0;
    transition: var(--transition-fast);
}

.card.playable:hover::before {
    opacity: 1;
}

.card:not(.playable):not(.in-hand) {
    cursor: default;
}

/* Discard Pile Cards */
.discard-pile {
    min-height: var(--card-height);
    height: auto;
    overflow: visible;
}

/* Extended drop zone for discard piles */
.discard-pile::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: -1;
}

.discard-pile .card {
    position: absolute;
    left: 0;
    transition: top 0.15s ease;
    box-shadow: 0 1px 2px var(--card-shadow);
}

.discard-pile .card.top-card {
    box-shadow: 0 2px 6px var(--card-shadow);
}

.discard-pile.valid-target {
    border: 2px solid var(--gold);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

/* Action Buttons */
#action-buttons {
    display: flex;
    justify-content: center;
    padding: var(--space-xs);
    gap: var(--space-md);
}

#end-turn-btn {
    display: none;
}

.action-btn {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--btn-text);
    border: none;
    padding: var(--space-sm) var(--space-xl);
    border-radius: 25px;
    font-family: var(--font-button);
    font-size: 0.85rem;
    font-weight: 400;
    cursor: pointer;
    box-shadow: none;
    transition: var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: none;
}

.action-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: none;
}

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

.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Rules Button */
#rules-btn {
    position: fixed;
    top: var(--space-md);
    right: var(--space-md);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--cream);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    z-index: 100;
}

#rules-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* Modals */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    z-index: 3250;
    backdrop-filter: blur(4px);
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: linear-gradient(145deg, var(--surface-light) 0%, var(--surface-mid) 100%);
    border-radius: 16px;
    padding: var(--space-xl);
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.modal-content h2 {
    font-family: var(--font-display);
    color: var(--text-accent);
    margin-bottom: var(--space-lg);
    text-align: center;
    font-size: 2rem;
}

.rules-done-btn {
    display: block;
    width: 100%;
    margin-top: var(--space-lg);
    text-align: center;
}

.close-btn {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    color: var(--cream);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: var(--transition-fast);
}

.close-btn:hover {
    opacity: 1;
}

.rules-text {
    font-family: var(--font-button);
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
}

.rules-text h3 {
    font-family: var(--font-display);
    color: var(--text-accent);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
}

.rules-text ul, .rules-text ol {
    margin-left: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.rules-text li {
    margin-bottom: var(--space-xs);
    font-weight: 400;
}

.rules-text p {
    font-weight: 400;
}

.rules-text strong {
    font-weight: 700;
    color: var(--text-accent);
}

/* Message Overlay */
#message-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--space-lg);
}

#message-overlay.hidden {
    display: none;
}

#message-box {
    background: linear-gradient(145deg, var(--surface-light) 0%, var(--surface-mid) 100%);
    border-radius: 16px;
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    text-align: center;
    border: 2px solid var(--gold);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
    animation: popIn 0.3s ease;
}

@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

#message-title {
    font-family: var(--font-primary);
    color: var(--text-accent);
    font-size: 1.8rem;
    margin-bottom: var(--space-md);
}

#message-text {
    color: var(--cream);
    margin-bottom: var(--space-lg);
    font-size: 1rem;
}

#message-btn {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--felt-dark);
    border: none;
    padding: var(--space-md) var(--space-xl);
    border-radius: 25px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

#message-btn:hover {
    transform: scale(1.05);
}

/* Tutorial coach */
#tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    pointer-events: none;
}
#tutorial-overlay.hidden {
    display: none;
}
#tutorial-scrim {
    display: none;
}
.nav-hamburger.tutorial-highlight {
    z-index: 3310 !important;
}
.tutorial-highlight {
    position: relative;
    z-index: 2110 !important;
    outline: 4px solid #FF3B00;
    box-shadow: 0 0 0 6px rgba(255, 59, 0, 0.45), 0 0 24px rgba(255, 59, 0, 0.85);
    border-radius: 10px;
    animation: tutorial-blink 1s ease-in-out infinite;
}
@keyframes tutorial-blink {
    0%, 100% {
        outline-color: #FF3B00;
        box-shadow: 0 0 0 6px rgba(255, 59, 0, 0.5), 0 0 26px rgba(255, 59, 0, 0.95);
    }
    50% {
        outline-color: transparent;
        box-shadow: none;
    }
}
.tutorial-bubble {
    pointer-events: auto;
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: min(360px, calc(100vw - 32px));
    background: #F7F1E3;
    border: 4px solid var(--gold);
    border-radius: 16px;
    padding: var(--space-lg);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    text-align: left;
}
.tutorial-bubble.tutorial-bubble-raised {
    bottom: auto;
    top: 22%;
}
.tutorial-bubble.tutorial-bubble-above-hand {
    bottom: 150px;
    top: auto;
}
.tutorial-bubble.tutorial-bubble-above-discard {
    bottom: 240px;
    top: auto;
}
.tutorial-bubble.tutorial-bubble-above-center {
    bottom: auto;
    top: 28%;
}
.tutorial-bubble.tutorial-bubble-below-menu {
    bottom: auto;
    top: 72px;
}
.tutorial-bubble.tutorial-bubble-top {
    bottom: auto;
    top: 64px;
}
.tutorial-bubble.tutorial-bubble-below-center {
    bottom: auto;
    top: 42%;
}
.tutorial-bubble.tutorial-bubble-center {
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
}
.tutorial-bubble h2 {
    font-family: var(--font-primary);
    color: #1A1510;
    font-size: 1.35rem;
    margin: 0 0 var(--space-sm);
}
.tutorial-bubble h2.hidden {
    display: none;
}
.tutorial-bubble p {
    color: #2C2418;
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0 0 var(--space-md);
}
.tutorial-bubble p strong {
    font-weight: 700;
    color: #1A1510;
}
.tutorial-wilds {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 0 0 var(--space-md);
}
.tutorial-wilds.hidden {
    display: none;
}
.tutorial-wilds .card {
    pointer-events: none;
}
.tutorial-bubble-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    align-items: center;
}
.tutorial-bubble-actions .action-btn {
    min-width: 72px;
}
.tutorial-header-exit {
    margin-left: auto;
    margin-right: var(--space-sm);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 700;
}
.tutorial-header-exit.hidden {
    display: none;
}

/* Play Again overlay (after game end) */
#play-again-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2001;
    padding: var(--space-lg);
}

#play-again-overlay.hidden {
    display: none;
}

#play-again-box.message-box-style {
    background: linear-gradient(145deg, var(--surface-light) 0%, var(--surface-mid) 100%);
    border-radius: 16px;
    padding: var(--space-xl);
    text-align: center;
    border: 2px solid var(--gold);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
    animation: popIn 0.3s ease;
}

#play-again-title {
    font-family: var(--font-primary);
    color: var(--text-accent);
    font-size: 1.8rem;
    margin-bottom: var(--space-sm);
}

.play-again-prompt {
    color: var(--cream);
    margin-bottom: var(--space-lg);
    font-size: 1.1rem;
}

.play-again-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.play-again-buttons .action-btn {
    min-width: 100px;
}

/* Waiting for other player (after Yes on Play Again) */
#waiting-other-player-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2002;
    padding: var(--space-lg);
}

#waiting-other-player-overlay.hidden {
    display: none;
}

#waiting-other-player-box.message-box-style {
    background: linear-gradient(145deg, var(--surface-light) 0%, var(--surface-mid) 100%);
    border-radius: 16px;
    padding: var(--space-xl);
    text-align: center;
    border: 2px solid var(--gold);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
    animation: popIn 0.3s ease;
}

#waiting-other-player-box h2 {
    font-family: var(--font-primary);
    color: var(--text-accent);
    font-size: 1.8rem;
    margin-bottom: var(--space-sm);
}

#waiting-other-player-box .play-again-prompt {
    margin-bottom: 0;
}

.play-again-star {
    display: block;
    width: 180px;
    height: 180px;
    margin: 4px auto 12px;
    object-fit: contain;
}
.play-again-star.hidden {
    display: none;
}

#play-again-star-lose {
    width: 180px;
    height: 180px;
    margin-bottom: 8px;
}

.play-again-subtitle {
    color: var(--cream);
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0 auto var(--space-sm);
    max-width: 22em;
}

.play-again-subtitle.hidden {
    display: none;
}

/* Are you still playing? (turn timeout) */
#still-playing-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2003;
    padding: var(--space-lg);
}

#still-playing-overlay.hidden {
    display: none;
}

#still-playing-box.message-box-style {
    background: linear-gradient(145deg, var(--surface-light) 0%, var(--surface-mid) 100%);
    border-radius: 16px;
    padding: var(--space-xl);
    text-align: center;
    border: 2px solid var(--gold);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
    animation: popIn 0.3s ease;
}

#still-playing-box h2 {
    font-family: var(--font-primary);
    color: var(--text-accent);
    font-size: 1.8rem;
    margin-bottom: var(--space-sm);
}

#still-playing-box .play-again-prompt {
    margin-bottom: var(--space-lg);
}

#still-playing-box .action-btn {
    min-width: 120px;
}

/* Lobby Screen */
#lobby-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(145deg, var(--felt-dark) 0%, var(--surface-dark) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    overflow-y: auto;
    padding: 32px 0 48px;
}

#lobby-screen.hidden {
    display: none;
}

#game-container.hidden {
    display: none !important;
}

/* Auth screens (Login / Register, Choose username) */
#auth-screen,
#choose-username-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(145deg, var(--felt-dark) 0%, var(--surface-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    overflow-y: auto;
}

#auth-screen.hidden,
#choose-username-screen.hidden {
    display: none;
}

.auth-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    min-height: 100%;
}

.auth-loading.hidden {
    display: none !important;
}

.auth-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: auth-spin 0.9s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

.auth-loading-text {
    color: var(--cream);
    opacity: 0.9;
    font-size: 1rem;
    margin: 0;
}

.auth-content {
    text-align: center;
    padding: var(--space-xl);
    max-width: 420px;
    width: 100%;
}

.auth-content h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-accent);
    text-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    margin-bottom: var(--space-sm);
    letter-spacing: 0.02em;
}

.auth-content .subtitle {
    color: var(--cream);
    opacity: 0.7;
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: var(--space-lg);
}

/* Decorative in-game hand on the sign-in screen (same card faces as play) */
.auth-hand {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 118px;
    margin: 0 auto var(--space-xl);
    pointer-events: none;
    user-select: none;
}

.auth-hand .card {
    cursor: default;
    flex-shrink: 0;
    margin-left: -22px;
}

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

.auth-hand .card:nth-child(1) { transform: rotate(-14deg) translateY(12px); z-index: 1; }
.auth-hand .card:nth-child(2) { transform: rotate(-7deg) translateY(4px); z-index: 2; }
.auth-hand .card:nth-child(3) { transform: rotate(0deg) translateY(0); z-index: 3; }
.auth-hand .card:nth-child(4) { transform: rotate(7deg) translateY(4px); z-index: 4; }
.auth-hand .card:nth-child(5) { transform: rotate(14deg) translateY(12px); z-index: 5; }

.auth-hint {
    color: var(--cream);
    opacity: 0.85;
    font-size: 0.95rem;
    margin-bottom: var(--space-xl);
    line-height: 1.5;
}

.auth-terms-modal {
    position: fixed;
    inset: 0;
    z-index: 4100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.65);
}

.auth-terms-modal.hidden {
    display: none;
}

.auth-terms-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: min(88vh, 720px);
    background: #0d2222;
    color: #faf8f0;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.auth-terms-card h2 {
    margin: 0;
    padding: 20px 20px 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: #d4af37;
}

.auth-terms-lead {
    margin: 8px 20px 12px;
    color: #c9c4b4;
    font-size: 0.95rem;
}

.auth-terms-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 16px;
    text-align: left;
    color: #c9c4b4;
    font-size: 0.95rem;
    line-height: 1.55;
}

.auth-terms-body h1,
.auth-terms-body h2 {
    color: #d4af37;
    font-size: 1.05rem;
    margin: 20px 0 8px;
}

.auth-terms-body h1:first-child {
    display: none;
}

.auth-terms-body .updated {
    margin-top: 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

.auth-terms-body a {
    color: #d4af37;
}

.auth-terms-actions {
    display: flex;
    gap: 12px;
    padding: 12px 20px 20px;
}

.auth-terms-actions .action-btn,
.auth-terms-actions .secondary-btn {
    flex: 1;
    margin: 0;
}

.auth-content .action-btn {
    display: block;
    width: 100%;
    margin-bottom: var(--space-md);
}

.google-signin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.auth-content input[type="text"] {
    display: block;
    width: 100%;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    border: 2px solid rgba(212, 175, 55, 0.3);
    background: rgba(0,0,0,0.3);
    color: var(--cream);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
}

.auth-content input:focus {
    outline: none;
    border-color: var(--gold);
}

.auth-error {
    color: var(--danger);
    font-size: 0.9rem;
    margin-top: var(--space-md);
}

#choose-username-screen .signup-content {
    max-width: 560px;
}

.signup-section-label {
    display: block;
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--cream);
    opacity: 0.7;
    margin: var(--space-md) 0 var(--space-sm);
}

.signup-avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 2px 8px;
    margin-bottom: var(--space-sm);
}

.signup-theme-swatches {
    justify-content: flex-start;
}

.signup-theme-name {
    text-align: left;
    color: var(--cream);
    font-size: 0.9rem;
    margin: 0 0 var(--space-lg);
}

#choose-username-screen .signup-content .action-btn {
    margin-top: var(--space-sm);
}

.auth-error.hidden {
    display: none !important;
}

.lobby-content {
    text-align: center;
    padding: var(--space-md);
    max-width: 520px;
    width: 100%;
}

.lobby-content h1 {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--text-accent);
    text-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    margin-top: 0;
    margin-bottom: var(--space-xs);
    letter-spacing: 0.02em;
    animation: fadeInDown 0.6s ease;
}

.lobby-content .subtitle {
    color: var(--cream);
    opacity: 0.7;
    font-size: 1.02rem;
    letter-spacing: 0.06em;
    text-transform: none;
    margin-bottom: var(--space-md);
    animation: fadeInUp 0.6s ease 0.2s both;
}

.lobby-credit {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    color: var(--text-accent);
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

.lobby-credit p {
    margin: 0;
}

.lobby-version:empty {
    display: none;
}

.lobby-animation-container {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    animation: fadeInDown 0.6s ease both;
}

.lobby-animation-frame {
    border-radius: 8px;
    border: 3px solid #000;
    overflow: hidden;
    line-height: 0;
    max-width: 342px;
    width: 100%;
}

.lobby-animation {
    width: 100%;
    display: block;
}

.lobby-options {
    display: none; /* replaced by individual sections */
}

.lobby-divider {
    display: none;
}

/* Multiplayer section: stacked buttons for mobile */
.lobby-multiplayer .mp-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.lobby-multiplayer .mp-buttons .action-btn {
    width: 100%;
    margin-top: 0;
}

/* Quick Match is the headline online option; Create/Join sit below a divider.
   Deliberately inherits the theme's .action-btn gradient so every theme works. */
.lobby-single-player .action-btn {
    width: 100%;
}
.lobby-multiplayer .mp-buttons .quick-match-btn {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    font-size: 1rem;
}
.lobby-multiplayer .mp-buttons .quick-match-btn:not(:disabled) {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 4px 14px rgba(0,0,0,0.3);
}
.lobby-multiplayer .mp-buttons #open-create-modal-btn {
    margin-top: var(--space-sm);
}

/* Quick Match searching modal */
.quick-match-modal-content {
    text-align: center;
}
.lobby-modal-content.quick-match-modal-content {
    text-align: center;
}
.quick-match-modal-content h2 {
    margin-bottom: var(--space-md);
}
.loading-ellipsis {
    display: inline-block;
    width: 1.2em;
    text-align: left;
}
.loading-ellipsis::after {
    content: '';
    animation: loading-ellipsis 1.2s steps(4, end) infinite;
}
@keyframes loading-ellipsis {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}
@media (prefers-reduced-motion: reduce) {
    .loading-ellipsis::after {
        animation: none;
        content: '...';
    }
}
#quick-match-modal.hidden .loading-ellipsis::after {
    animation: none;
}
.quick-match-kitten {
    display: block;
    width: min(256px, 100%);
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto var(--space-md);
    object-fit: contain;
}
.quick-match-modal-content .waiting-message {
    margin-bottom: var(--space-lg);
}
.quick-match-modal-content .action-btn {
    width: 100%;
}

#how-to-play-btn {
    margin-top: var(--space-lg);
}

/* Lobby modals — positioned inside #lobby-screen (fixed) so they hide with it */
.lobby-modal {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    z-index: 10;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.18s ease;
}
.lobby-modal.hidden {
    display: none;
}
.lobby-modal-content {
    background: linear-gradient(145deg, var(--surface-light) 0%, var(--surface-mid) 100%);
    border-radius: 14px;
    padding: var(--space-xl);
    width: 100%;
    max-width: 340px;
    position: relative;
    border: 1px solid rgba(212,175,55,0.28);
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    text-align: left;
}
.lobby-modal-content h2 {
    font-family: var(--font-display);
    color: var(--text-accent);
    font-size: 1.3rem;
    margin-bottom: var(--space-lg);
}
.lobby-modal-content input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 2px solid rgba(212,175,55,0.3);
    background: rgba(0,0,0,0.3);
    color: var(--cream);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
}
.lobby-modal-content input:focus {
    outline: none;
    border-color: var(--gold);
}
.lobby-modal-content input::placeholder {
    color: rgba(250,248,240,0.4);
}
.lobby-modal-content .action-btn {
    width: 100%;
    margin-top: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
}
.lobby-modal-content .room-info {
    margin-top: var(--space-md);
}
.lobby-modal-content .secondary-btn {
    margin-top: var(--space-sm);
}

.lobby-section {
    background: rgba(0,0,0,0.4);
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    text-align: left;
}

.lobby-single-player {
    margin-bottom: var(--space-sm);
    text-align: left;
}

.sp-difficulty-buttons {
    display: flex;
    gap: var(--space-sm);
}

.sp-difficulty-btn {
    flex: 1;
    padding: 7px var(--space-xs);
    font-size: 0.82rem;
}

.sp-spite-btn {
    background: linear-gradient(135deg, #8b0000, #c0392b);
    color: #fff;
    border-color: #a93226;
}
.sp-spite-btn:hover {
    background: linear-gradient(135deg, #a93226, #e74c3c);
}

.lobby-section h2 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-accent);
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.lobby-section input {
    display: block;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    background: rgba(0,0,0,0.3);
    color: var(--cream);
    border-radius: 8px;
    /* 1rem = 16px minimum prevents iOS auto-zoom on focus */
    font-size: 1rem;
    font-family: inherit;
}

.lobby-section input:focus {
    outline: none;
    border-color: var(--gold);
}

.lobby-section .action-btn {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    width: 100%;
    margin-top: 4px;
}

.lobby-section input::placeholder {
    color: rgba(250, 248, 240, 0.4);
}

.lobby-divider {
    display: none;
}

.room-info {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(26, 107, 66, 0.3);
    border: 2px solid var(--success);
    border-radius: 8px;
    animation: fadeIn 0.3s ease;
}

.room-info h3 {
    color: var(--success);
    font-size: 1.1rem;
    margin-bottom: var(--space-sm);
}

.room-details {
    background: rgba(0,0,0,0.3);
    padding: var(--space-sm) var(--space-md);
    border-radius: 6px;
    margin-bottom: var(--space-sm);
}

.room-details p {
    margin: var(--space-sm) 0;
    color: var(--cream);
}

.room-details strong {
    color: var(--text-accent);
}

.room-copy-field {
    background: transparent;
    border: none;
    color: var(--cream);
    font: inherit;
    padding: 0;
    margin: 0;
    min-width: 6ch;
    width: auto;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}
#display-room-id { min-width: 12ch; width: 12ch; }
#display-passcode { min-width: 14ch; width: auto; }
.room-copy-field:focus {
    outline: 1px solid var(--gold);
    outline-offset: 2px;
}

.room-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.room-action-buttons .copy-room-btn {
    margin-top: 0;
}

.copy-room-btn {
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid var(--gold);
    color: var(--text-accent);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-fast);
}
.copy-room-btn:hover {
    background: rgba(212, 175, 55, 0.35);
}

.cancel-room-btn {
    margin-top: var(--space-sm);
}

.room-hint {
    font-size: 0.85rem;
    opacity: 0.7;
}

.waiting-message {
    color: var(--text-accent);
    font-style: italic;
    animation: pulse 2s infinite;
}

.secondary-btn {
    background: transparent;
    color: var(--text-accent);
    border: 2px solid var(--gold-light);
    padding: var(--space-sm) var(--space-lg);
    border-radius: 30px;
    font-family: var(--font-button);
    font-size: 0.85rem;
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: none;
}

.secondary-btn:hover {
    background: rgba(212, 175, 55, 0.1);
}


@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Card Move Animation */
.card.moving {
    transition: transform 0.261s ease, left 0.261s ease, top 0.261s ease;
}

/* Opponent card fly-in animation */
.card.flying-card {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    margin: 0;
    box-shadow: 0 8px 24px var(--card-shadow);
}

/* Responsive Adjustments */
@media (min-width: 400px) {
    :root {
        --card-width: 59px;
        --card-height: 84px;
    }
    .card .rank { font-size: calc(1.96rem * var(--card-type-scale)); }
}

@media (min-width: 480px) {
    :root {
        --card-width: 66px;
        --card-height: 92px;
    }
    .card .rank { font-size: calc(2.16rem * var(--card-type-scale)); }
    #game-header h1 {
        font-size: 1.6rem;
    }
}

@media (min-height: 700px) {
    #hand-area {
        padding: var(--space-sm);
    }
    
    .card.in-hand {
        --card-width: 62px;
        --card-height: 86px;
    }
}

/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --card-width: 44px;
        --card-height: 62px;
    }
    .card .rank { font-size: calc(1.52rem * var(--card-type-scale)); }
    #game-header {
        padding: var(--space-xs) var(--space-md);
        padding-left: 52px;
    }
    #center-area {
        padding: var(--space-sm);
    }
}

/* Drag and Drop Styles */
.card.dragging {
    opacity: 0.5;
    cursor: grabbing !important;
    transform: rotate(5deg) scale(1.05);
    z-index: 1000;
}

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

.valid-drop-target {
    border: 3px solid var(--gold) !important;
    background: rgba(212, 175, 55, 0.2) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.7) !important;
    animation: pulseGlow 1s infinite;
    /* Ensure drop zone is easily targetable */
    z-index: 10;
}

@keyframes pulseGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.7);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 28px rgba(212, 175, 55, 0.9);
        transform: scale(1.05);
    }
}

.drag-over {
    background: rgba(212, 175, 55, 0.4) !important;
    border-color: var(--gold-light) !important;
    box-shadow: 0 0 32px rgba(212, 175, 55, 1) !important;
    transform: scale(1.08);
    z-index: 20;
}

.card-pile.drag-over {
    animation: none;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   THEMES
   ======================================== */

/* --- Japan Fish ---
   Palette: #C41830 burnt orange · #FCC560 warm gold · #A0CBAD sage
            #8FB1BE slate blue · #000D2A navy
   Light-blue background, navy text; orange/gold/sage/navy as accents
*/
[data-theme="japan-fish"] {
    --felt-dark: #000D2A;
    --felt-light: #0A1A38;
    --felt-glow: #000D2A;
    --gold: #FCC560;
    --gold-light: #FDDA8A;
    --gold-dark: #D8A030;
    --cream: #000D2A;
    --card-shadow: rgba(0,13,42,0.14);
    --red-suit: #C41830;
    --black-suit: #000D2A;
    --accent-purple: #A0CBAD;
    --surface-dark: #000D2A;
    --surface-mid: #C4DCE8;
    --surface-light: #E4F0F6;
    --btn-text: #FAFAFA;
    --font-primary: 'BoldPixels', sans-serif;
    --font-card: 'Jersey 25', sans-serif;
}

[data-theme="japan-fish"] body {
    background: #D6E9F0;
    color: #000D2A;
    font-weight: 500;
    letter-spacing: 0.01em;
}
[data-theme="japan-fish"] body::before {
    background-image:
        radial-gradient(ellipse at 20% 80%, rgba(196,24,48,0.07) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 10%, rgba(252,197,96,0.08) 0%, transparent 45%);
    opacity: 1;
}
[data-theme="japan-fish"] button,
[data-theme="japan-fish"] input { font-weight: 500; letter-spacing: 0.01em; }

/* Headings */
[data-theme="japan-fish"] h1 { text-shadow: none; color: #000D2A; }
[data-theme="japan-fish"] .lobby-content h1,
[data-theme="japan-fish"] #auth-content h1,
[data-theme="japan-fish"] #game-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}
[data-theme="japan-fish"] #game-header h1 {
    color: #000D2A;
    -webkit-text-stroke: 0;
    text-shadow: none;
}
[data-theme="japan-fish"] #choose-username-screen h1,
[data-theme="japan-fish"] .stats-screen h1 {
    font-family: var(--font-primary);
    font-weight: 700;
}
[data-theme="japan-fish"] h2 { font-weight: 700; color: #000D2A; }

/* Labels */
[data-theme="japan-fish"] .player-label,
[data-theme="japan-fish"] .hand-label,
[data-theme="japan-fish"] .pile-label,
[data-theme="japan-fish"] .pile-count {
    font-weight: 600;
    color: #000D2A;
    font-size: 0.72rem;
    white-space: nowrap;
    padding: 4px 10px;
}
[data-theme="japan-fish"] #turn-indicator {
    background: #C41830;
    color: #FAFAFA;
    font-weight: 600;
    border-radius: 4px;
}
[data-theme="japan-fish"] #turn-indicator.computer-turn {
    background: #000D2A;
    color: #FAFAFA;
}

/* Goal pile ring + in-game gold references: use navy */
[data-theme="japan-fish"] .goal-pile {
    box-shadow: 0 0 0 3px #000D2A, 0 4px 12px var(--card-shadow);
}
[data-theme="japan-fish"] .pile-count { color: #000D2A; }
[data-theme="japan-fish"] .hand-label { color: #000D2A; }
[data-theme="japan-fish"] #game-header h1 { color: #000D2A; }
[data-theme="japan-fish"] .waiting-message { color: #C41830; }

/* Modal/box headings */
[data-theme="japan-fish"] .lobby-section h2,
[data-theme="japan-fish"] .lobby-modal-content h2,
[data-theme="japan-fish"] .modal-content h2,
[data-theme="japan-fish"] #message-title,
[data-theme="japan-fish"] #play-again-title,
[data-theme="japan-fish"] #waiting-other-player-box h2,
[data-theme="japan-fish"] #still-playing-box h2 { color: #000D2A; }

/* Screens */
[data-theme="japan-fish"] #lobby-screen { background: #8FB1BE; }
[data-theme="japan-fish"] #auth-screen,
[data-theme="japan-fish"] #choose-username-screen { background: #D6E9F0; }
[data-theme="japan-fish"] .lobby-content .subtitle,
[data-theme="japan-fish"] .auth-content .subtitle { color: #000D2A; opacity: 0.5; }
[data-theme="japan-fish"] .auth-hint { color: #000D2A; opacity: 0.65; }

/* Buttons: burnt orange */
[data-theme="japan-fish"] .action-btn {
    background: #C41830;
    color: #FAFAFA;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
[data-theme="japan-fish"] .action-btn:hover:not(:disabled) { background: #A01228; }
[data-theme="japan-fish"] .action-btn:disabled { background: #C41830; opacity: 0.35; }
[data-theme="japan-fish"] .secondary-btn {
    color: #C41830;
    border-color: #C41830;
    background: transparent;
    border-radius: 4px;
}
[data-theme="japan-fish"] .secondary-btn:hover { background: rgba(196,24,48,0.08); }

/* Card backs: navy with gold star */
[data-theme="japan-fish"] .card.face-down {
    background: linear-gradient(145deg, #000D2A 0%, #0A1A38 100%);
    border: 2px solid rgba(252,197,96,0.3);
    box-shadow: inset 0 0 0 1px rgba(252,197,96,0.12), 0 2px 8px rgba(0,13,42,0.2);
}
[data-theme="japan-fish"] .card.face-down::after {
    content: '✦';
    color: rgba(252,197,96,0.85);
    font-size: 1.3rem;
}
[data-theme="japan-fish"] #draw-pile {
    background: linear-gradient(145deg, #000D2A 0%, #0A1A38 100%);
    border: 2px solid rgba(252,197,96,0.3);
}

/* Joker and king-wild */
[data-theme="japan-fish"] .card.joker {
    background: linear-gradient(135deg, #FCC560 0%, #A0CBAD 100%);
    color: #000D2A;
    text-shadow: none;
}
[data-theme="japan-fish"] .card.king-wild {
    background: linear-gradient(135deg, #FCC560 0%, #8FB1BE 100%);
    border: 1px solid #000;
}

/* Center area: slightly deeper blue panel */
[data-theme="japan-fish"] #center-area {
    background: #C4DCE8;
    border: 1px solid rgba(0,13,42,0.1);
    box-shadow: 0 2px 12px rgba(0,13,42,0.07);
}
[data-theme="japan-fish"] .center-pile {
    background: #E4F0F6;
    border: 2px solid rgba(0,13,42,0.12);
}
[data-theme="japan-fish"] .card-pile.empty {
    border: 2px dashed rgba(0,13,42,0.2);
    background: rgba(0,13,42,0.03);
}

/* Lobby / input panels: sage tint */
[data-theme="japan-fish"] .lobby-section {
    background: #C4DCE8;
    border: 1px solid rgba(0,13,42,0.1);
    border-radius: 4px;
}
[data-theme="japan-fish"] .lobby-section input,
[data-theme="japan-fish"] .auth-content input[type="text"] {
    background: #E4F0F6;
    color: #000D2A;
    border: 2px solid rgba(0,13,42,0.15);
    border-radius: 3px;
}
[data-theme="japan-fish"] .lobby-section input::placeholder,
[data-theme="japan-fish"] .auth-content input::placeholder { color: rgba(0,13,42,0.35); }
[data-theme="japan-fish"] .lobby-section input:focus,
[data-theme="japan-fish"] .auth-content input:focus { border-color: #C41830; }

/* Room info: sage */
[data-theme="japan-fish"] .room-info { background: rgba(160,203,173,0.3); border-color: #A0CBAD; }
[data-theme="japan-fish"] .room-details { background: rgba(0,13,42,0.05); }
[data-theme="japan-fish"] .copy-room-btn {
    background: rgba(160,203,173,0.2);
    border-color: #A0CBAD;
    color: #000D2A;
    border-radius: 3px;
}
[data-theme="japan-fish"] .copy-room-btn:hover { background: rgba(160,203,173,0.38); }

/* Nav drawer: navy */
[data-theme="japan-fish"] .nav-drawer {
    background: linear-gradient(180deg, #000D2A 0%, #00071A 100%);
    border-right: 1px solid rgba(252,197,96,0.2);
}
[data-theme="japan-fish"] .nav-close,
[data-theme="japan-fish"] .nav-item,
[data-theme="japan-fish"] .nav-theme-name { color: #D6E9F0; }
[data-theme="japan-fish"] .nav-item:hover { background: rgba(252,197,96,0.12); color: #D6E9F0; }
[data-theme="japan-fish"] .nav-hamburger {
    background: linear-gradient(135deg, rgba(0,13,42,0.18) 0%, rgba(0,13,42,0.08) 100%);
    border-color: rgba(0,13,42,0.25);
    border-radius: 0 4px 4px 0;
}
[data-theme="japan-fish"] .nav-hamburger:hover {
    background: linear-gradient(135deg, rgba(0,13,42,0.28) 0%, rgba(0,13,42,0.14) 100%);
}
[data-theme="japan-fish"] .nav-theme-section { border-top-color: rgba(252,197,96,0.18); }

/* Stats screen */
[data-theme="japan-fish"] .stats-screen,
[data-theme="japan-fish"] .profile-screen { background: #D6E9F0; color: #000D2A; }
[data-theme="japan-fish"] .stats-screen h1,
[data-theme="japan-fish"] .stats-screen h2,
[data-theme="japan-fish"] .stats-screen p,
[data-theme="japan-fish"] .stats-empty,
[data-theme="japan-fish"] .stats-pending,
[data-theme="japan-fish"] .stat-label,
[data-theme="japan-fish"] .profile-header h1,
[data-theme="japan-fish"] .profile-info-label,
[data-theme="japan-fish"] .profile-info-value,
[data-theme="japan-fish"] .profile-picker-title { color: #000D2A; }
[data-theme="japan-fish"] .stats-summary,
[data-theme="japan-fish"] .stats-ai-record,
[data-theme="japan-fish"] .stats-ai-table { background: #C4DCE8; }
[data-theme="japan-fish"] .stats-ai-table th,
[data-theme="japan-fish"] .stats-opponents th {
    background: rgba(0,13,42,0.1);
    color: #000D2A;
}
[data-theme="japan-fish"] .stats-ai-table td,
[data-theme="japan-fish"] .stats-opponents td { color: #000D2A; }
[data-theme="japan-fish"] .stats-ai-table tr:not(:last-child) td,
[data-theme="japan-fish"] .stats-opponents tr:not(:last-child) td { border-bottom-color: rgba(0,13,42,0.08); }
[data-theme="japan-fish"] .stats-opponents table { background: #C4DCE8; }

/* Modals */
[data-theme="japan-fish"] .modal-content,
[data-theme="japan-fish"] #message-box,
[data-theme="japan-fish"] #play-again-box.message-box-style,
[data-theme="japan-fish"] #waiting-other-player-box.message-box-style,
[data-theme="japan-fish"] #still-playing-box.message-box-style {
    background: #E4F0F6;
    border: 1px solid rgba(0,13,42,0.12);
    box-shadow: 0 8px 40px rgba(0,13,42,0.14);
    border-radius: 6px;
}
[data-theme="japan-fish"] .lobby-modal-content {
    background: #E4F0F6;
    border: 1px solid rgba(0,13,42,0.12);
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,13,42,0.14);
}
[data-theme="japan-fish"] .lobby-modal-content h2 { color: #000D2A; }
[data-theme="japan-fish"] .lobby-modal-content input {
    background: #D6E9F0;
    color: #000D2A;
    border: 2px solid rgba(0,13,42,0.15);
    border-radius: 3px;
}
[data-theme="japan-fish"] .lobby-modal-content input::placeholder { color: rgba(0,13,42,0.35); }
[data-theme="japan-fish"] .lobby-modal-content input:focus { border-color: #C41830; }
[data-theme="japan-fish"] .lobby-modal-content .close-btn,
[data-theme="japan-fish"] .modal-content .close-btn { color: #000D2A; opacity: 0.6; }
[data-theme="japan-fish"] .lobby-modal-content .close-btn:hover,
[data-theme="japan-fish"] .modal-content .close-btn:hover { opacity: 1; }

/* Drop targets: gold */
[data-theme="japan-fish"] .valid-drop-target {
    border: 3px solid #FCC560 !important;
    background: rgba(252,197,96,0.12) !important;
    box-shadow: 0 0 14px rgba(252,197,96,0.5) !important;
}
[data-theme="japan-fish"] .drag-over {
    background: rgba(252,197,96,0.2) !important;
    border-color: #FDDA8A !important;
    box-shadow: 0 0 22px rgba(252,197,96,0.7) !important;
}
[data-theme="japan-fish"] .center-pile.valid-target {
    border-color: #FCC560;
    box-shadow: 0 0 12px rgba(252,197,96,0.45);
}
[data-theme="japan-fish"] .discard-pile.valid-target {
    border: 2px solid #FCC560;
    box-shadow: 0 0 10px rgba(252,197,96,0.4);
}

/* Selected card: gold ring */
[data-theme="japan-fish"] .card.selected {
    box-shadow: 0 0 0 3px #FCC560, 0 8px 20px rgba(0,13,42,0.14);
}

/* Spinners */
[data-theme="japan-fish"] .auth-spinner,
[data-theme="japan-fish"] .stats-spinner {
    border-color: rgba(252,197,96,0.2);
    border-top-color: #FCC560;
}

/* Corner rounding */
[data-theme="japan-fish"] .secondary-btn      { border-radius: 4px; }
[data-theme="japan-fish"] .lobby-section,
[data-theme="japan-fish"] .lobby-multiplayer  { border-radius: 4px; }
[data-theme="japan-fish"] .lobby-section input,
[data-theme="japan-fish"] .auth-content input[type="text"] { border-radius: 3px; }
[data-theme="japan-fish"] .room-info          { border-radius: 4px; }
[data-theme="japan-fish"] .room-details       { border-radius: 3px; }
[data-theme="japan-fish"] .stats-summary,
[data-theme="japan-fish"] .stats-ai-record,
[data-theme="japan-fish"] .stats-ai-table,
[data-theme="japan-fish"] .stats-opponents table { border-radius: 4px; }
[data-theme="japan-fish"] .card               { border-radius: 4px; }

/* ========================================
   THEME SWITCHER (nav drawer)
   ======================================== */

.nav-theme-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-theme-label {
    color: #faf8f0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-md);
    opacity: 0.8;
}

.nav-theme-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--space-sm);
}

.theme-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    padding: 0;
    outline: none;
    position: relative;
}

.theme-swatch:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

.theme-swatch.active {
    border-color: var(--cream);
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25), 0 4px 10px rgba(0, 0, 0, 0.45);
}

/* Swatch face colors */
.theme-swatch[data-theme="japan-fish"]   { background: linear-gradient(135deg, #D53302 0%, #000D2A 100%); }

.nav-theme-name {
    color: var(--cream);
    font-size: 0.8rem;
    opacity: 0.65;
    margin: 0;
}

/* --- Kawaii ---
   Palette: spring
   #FAFAFA white bg · #F5E0DC blush panels · #D95555 coral buttons
   #B8C8B0 sage accent · #E8ECA8 pale yellow highlights
*/
[data-theme="kawaii"] {
    --felt-dark: #2A2C28;
    --felt-light: #3A3E36;
    --felt-glow: #2A2C28;
    --gold: #B8C8B0;
    --gold-light: #CCD8C4;
    --gold-dark: #96A888;
    --cream: #2C2C2C;
    --card-shadow: rgba(42, 44, 40, 0.14);
    --red-suit: #D95555;
    --black-suit: #2C2C2C;
    --accent-purple: #C898B0;
    --surface-dark: #2A2C28;
    --surface-mid: #F5E0DC;
    --surface-light: #FAFAFA;
    --btn-text: #FAFAFA;
    --font-primary: 'BoldPixels', sans-serif;
    --font-card: 'Jersey 25', sans-serif;
}

/* Typography */
[data-theme="kawaii"] body {
    color: #2C2C2C;
    font-weight: 500;
    letter-spacing: 0.01em;
}
[data-theme="kawaii"] button,
[data-theme="kawaii"] input {
    font-weight: 500;
    letter-spacing: 0.01em;
}
/* All kawaii h1s: shared color/shadow */
[data-theme="kawaii"] h1 {
    text-shadow: none;
    color: #2C2C2C;
}

/* "Spite & Malice" title: BoldPixels */
[data-theme="kawaii"] .lobby-content h1,
[data-theme="kawaii"] #auth-content h1,
[data-theme="kawaii"] #game-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Game header title: black stroke so sage green pops */
[data-theme="kawaii"] #game-header h1 {
    color: var(--gold);
    -webkit-text-stroke: 1.5px #1A1A1A;
    paint-order: stroke fill;
    text-shadow: none;
}

/* Other h1s ("Choose a username", "Game Stats"): use --font-primary (BoldPixels) */
[data-theme="kawaii"] #choose-username-screen h1,
[data-theme="kawaii"] .stats-screen h1 {
    font-family: var(--font-primary);
    font-weight: 700;
    letter-spacing: 0.01em;
}
[data-theme="kawaii"] h2 {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #2C2C2C;
}
[data-theme="kawaii"] .action-btn,
[data-theme="kawaii"] .secondary-btn {
    font-weight: 600;
    letter-spacing: 0.03em;
}
[data-theme="kawaii"] .player-label,
[data-theme="kawaii"] .hand-label,
[data-theme="kawaii"] .pile-label,
[data-theme="kawaii"] .pile-count,
[data-theme="kawaii"] #turn-indicator {
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #2C2C2C;
}

/* Section/box headings */
[data-theme="kawaii"] .lobby-section h2,
[data-theme="kawaii"] .lobby-modal-content h2,
[data-theme="kawaii"] .modal-content h2,
[data-theme="kawaii"] #message-title,
[data-theme="kawaii"] #play-again-title,
[data-theme="kawaii"] #waiting-other-player-box h2,
[data-theme="kawaii"] #still-playing-box h2 {
    color: #2C2C2C;
}

/* Light backgrounds for body and all fixed screens */
[data-theme="kawaii"] body {
    background: #FAFAFA;
    color: #2C2C2C;
}
[data-theme="kawaii"] body::before {
    background-image:
        radial-gradient(ellipse at 70% 15%, rgba(217,85,85,0.06) 0%, transparent 50%);
    background-size: 100% 100%;
    opacity: 1;
}
[data-theme="kawaii"] #lobby-screen {
    background: #B8C8B0;
}
[data-theme="kawaii"] #auth-screen,
[data-theme="kawaii"] #choose-username-screen {
    background: #FAFAFA;
}

/* Subtitle and hint text: visible on light background */
[data-theme="kawaii"] .lobby-content .subtitle,
[data-theme="kawaii"] .auth-content .subtitle {
    color: #2C2C2C;
    opacity: 0.5;
}
[data-theme="kawaii"] .auth-hint {
    color: #2C2C2C;
    opacity: 0.65;
}

/* Primary buttons: coral */
[data-theme="kawaii"] .action-btn {
    background: #D95555;
    color: #FAFAFA;
    box-shadow: none;
    border: 1px solid transparent;
}
[data-theme="kawaii"] .action-btn:hover:not(:disabled) {
    background: #C84444;
    box-shadow: none;
}
[data-theme="kawaii"] .action-btn:disabled {
    background: #D95555;
    opacity: 0.35;
}
[data-theme="kawaii"] .secondary-btn {
    color: #D95555;
    border-color: #D95555;
    background: transparent;
}
[data-theme="kawaii"] .secondary-btn:hover {
    background: rgba(217,85,85,0.08);
}

/* Card backs: coral with blush border */
[data-theme="kawaii"] .card.face-down {
    background: linear-gradient(145deg, #D95555 0%, #C84444 100%);
    border: 2px solid #F5E0DC;
    box-shadow: inset 0 0 0 1px rgba(245,224,220,0.3), 0 2px 8px rgba(42,44,40,0.14);
}
[data-theme="kawaii"] .card.face-down::after {
    content: '✦';
    color: rgba(245,224,220,0.9);
    font-size: 1.3rem;
}

/* Draw pile: matches card backs */
[data-theme="kawaii"] #draw-pile {
    background: linear-gradient(145deg, #D95555 0%, #C84444 100%);
    border: 2px solid #F5E0DC;
    box-shadow: inset 0 0 0 1px rgba(245,224,220,0.25), 0 4px 14px rgba(42,44,40,0.14);
}

/* Joker: pale yellow to sage */
[data-theme="kawaii"] .card.joker {
    background: linear-gradient(135deg, #E8ECA8 0%, #B8C8B0 100%);
    color: #2C2C2C;
    text-shadow: none;
}

/* Center area: blush panel */
[data-theme="kawaii"] #center-area {
    background: #F5E0DC;
    border: 1px solid rgba(217,85,85,0.12);
    box-shadow: 0 2px 12px rgba(42,44,40,0.07);
}
[data-theme="kawaii"] .center-pile {
    background: #FAFAFA;
    border: 2px solid rgba(217,85,85,0.15);
}

/* Empty pile slots */
[data-theme="kawaii"] .card-pile.empty {
    border: 2px dashed rgba(217,85,85,0.3);
    background: rgba(217,85,85,0.03);
}

/* King wild: pale yellow to blush */
[data-theme="kawaii"] .card.king-wild {
    background: linear-gradient(135deg, #E8ECA8 0%, #F5E0DC 100%);
    border: 1px solid #000;
}

/* Lobby / auth panels */
[data-theme="kawaii"] .lobby-section {
    background: #F5E0DC;
    border: 1px solid rgba(217,85,85,0.12);
    border-radius: 4px;
}
[data-theme="kawaii"] .lobby-section input,
[data-theme="kawaii"] .auth-content input[type="text"] {
    background: #FAFAFA;
    color: #2C2C2C;
    border: 2px solid rgba(217,85,85,0.25);
}
[data-theme="kawaii"] .lobby-section input::placeholder,
[data-theme="kawaii"] .auth-content input::placeholder {
    color: rgba(44,44,44,0.38);
}
[data-theme="kawaii"] .lobby-section input:focus,
[data-theme="kawaii"] .auth-content input:focus {
    border-color: #D95555;
}

/* Room created info */
[data-theme="kawaii"] .room-info {
    background: rgba(184,200,176,0.28);
    border-color: #B8C8B0;
}
[data-theme="kawaii"] .room-details {
    background: rgba(217,85,85,0.05);
}
[data-theme="kawaii"] .copy-room-btn {
    background: rgba(184,200,176,0.2);
    border-color: #B8C8B0;
    color: #2C2C2C;
}
[data-theme="kawaii"] .copy-room-btn:hover {
    background: rgba(184,200,176,0.38);
}

/* Nav drawer: dark sage-neutral — needs explicit light text since --cream is now dark */
[data-theme="kawaii"] .nav-drawer {
    background: linear-gradient(180deg, #2A2C28 0%, #1E201C 100%);
    border-right: 1px solid rgba(217,85,85,0.2);
    box-shadow: 4px 0 28px rgba(42,44,40,0.25);
}
[data-theme="kawaii"] .nav-close,
[data-theme="kawaii"] .nav-item,
[data-theme="kawaii"] .nav-theme-name {
    color: #F7F3F0;
}
[data-theme="kawaii"] .nav-item:hover {
    background: rgba(217,85,85,0.16);
    color: #F5E0DC;
}
[data-theme="kawaii"] .nav-hamburger {
    background: linear-gradient(135deg, rgba(217,85,85,0.16) 0%, rgba(217,85,85,0.06) 100%);
    border-color: rgba(217,85,85,0.28);
}
[data-theme="kawaii"] .nav-hamburger:hover {
    background: linear-gradient(135deg, rgba(217,85,85,0.26) 0%, rgba(217,85,85,0.12) 100%);
}
[data-theme="kawaii"] .nav-theme-section {
    border-top-color: rgba(217,85,85,0.2);
}

/* Stats screen: light background so --cream text stays readable */
[data-theme="kawaii"] .stats-screen,
[data-theme="kawaii"] .profile-screen {
    background: #FAFAFA;
    color: #2C2C2C;
}
[data-theme="kawaii"] .stats-screen h1,
[data-theme="kawaii"] .stats-screen h2,
[data-theme="kawaii"] .stats-screen p,
[data-theme="kawaii"] .stats-empty,
[data-theme="kawaii"] .stats-pending,
[data-theme="kawaii"] .stat-label,
[data-theme="kawaii"] .profile-header h1,
[data-theme="kawaii"] .profile-info-label,
[data-theme="kawaii"] .profile-info-value,
[data-theme="kawaii"] .profile-picker-title {
    color: #2C2C2C;
}
[data-theme="kawaii"] .stats-summary {
    background: #F5E0DC;
}
[data-theme="kawaii"] .stats-ai-record {
    background: #F5E0DC;
}
[data-theme="kawaii"] .stats-ai-table {
    background: #F5E0DC;
}
[data-theme="kawaii"] .stats-ai-table th {
    background: rgba(217,85,85,0.14);
    color: #2C2C2C;
}
[data-theme="kawaii"] .stats-ai-table td {
    color: #2C2C2C;
}
[data-theme="kawaii"] .stats-ai-table tr:not(:last-child) td {
    border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="kawaii"] .stats-opponents table {
    background: #F5E0DC;
}
[data-theme="kawaii"] .stats-opponents th {
    background: rgba(217,85,85,0.14);
    color: #2C2C2C;
}
[data-theme="kawaii"] .stats-opponents td {
    color: #2C2C2C;
}
[data-theme="kawaii"] .stats-opponents tr:not(:last-child) td {
    border-bottom: 1px solid rgba(217,85,85,0.1);
}

/* Modals and pop-up boxes */
[data-theme="kawaii"] .modal-content {
    background: #FAFAFA;
    border: 1px solid rgba(217,85,85,0.14);
    box-shadow: 0 8px 40px rgba(42,44,40,0.14);
}
[data-theme="kawaii"] #message-box,
[data-theme="kawaii"] #play-again-box.message-box-style,
[data-theme="kawaii"] #waiting-other-player-box.message-box-style,
[data-theme="kawaii"] #still-playing-box.message-box-style {
    background: #FAFAFA;
    border: 1px solid rgba(217,85,85,0.14);
    box-shadow: 0 8px 40px rgba(42,44,40,0.14);
}

/* Drop-target highlight: coral */
[data-theme="kawaii"] .valid-drop-target {
    border: 3px solid #D95555 !important;
    background: rgba(217,85,85,0.1) !important;
    box-shadow: 0 0 14px rgba(217,85,85,0.4) !important;
}
[data-theme="kawaii"] .drag-over {
    background: rgba(217,85,85,0.18) !important;
    border-color: #E07070 !important;
    box-shadow: 0 0 22px rgba(217,85,85,0.6) !important;
}
[data-theme="kawaii"] .center-pile.valid-target {
    border-color: #D95555;
    box-shadow: 0 0 12px rgba(217,85,85,0.38);
}
[data-theme="kawaii"] .discard-pile.valid-target {
    border: 2px solid #D95555;
    box-shadow: 0 0 10px rgba(217,85,85,0.35);
}

/* Selected card: coral ring */
[data-theme="kawaii"] .card.selected {
    box-shadow:
        0 0 0 3px #D95555,
        0 8px 20px rgba(42,44,40,0.14);
}

/* Spinners */
[data-theme="kawaii"] .auth-spinner,
[data-theme="kawaii"] .stats-spinner {
    border-color: rgba(217,85,85,0.18);
    border-top-color: #D95555;
}

/* Lobby modal */
[data-theme="kawaii"] .lobby-modal-content {
    background: #FAFAFA;
    border: 1px solid rgba(217,85,85,0.14);
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(42,44,40,0.16);
}
[data-theme="kawaii"] .lobby-modal-content h2 {
    font-weight: 700;
    color: #2C2C2C;
}
[data-theme="kawaii"] .lobby-modal-content input {
    background: #FAFAFA;
    color: #2C2C2C;
    border: 2px solid rgba(217,85,85,0.25);
    border-radius: 3px;
}
[data-theme="kawaii"] .lobby-modal-content input::placeholder {
    color: rgba(44,44,44,0.38);
}
[data-theme="kawaii"] .lobby-modal-content input:focus {
    border-color: #D95555;
}
[data-theme="kawaii"] .lobby-modal-content .action-btn {
    border-radius: 4px;
}
[data-theme="kawaii"] .lobby-modal-content .secondary-btn {
    border-radius: 4px;
}

/* Corner rounding: subtly rounded */
[data-theme="kawaii"] .action-btn          { border-radius: 4px; }
[data-theme="kawaii"] .secondary-btn       { border-radius: 4px; }
[data-theme="kawaii"] .modal-content,
[data-theme="kawaii"] #message-box,
[data-theme="kawaii"] #play-again-box.message-box-style,
[data-theme="kawaii"] #waiting-other-player-box.message-box-style,
[data-theme="kawaii"] #still-playing-box.message-box-style { border-radius: 6px; }
[data-theme="kawaii"] .lobby-section,
[data-theme="kawaii"] .lobby-multiplayer   { border-radius: 4px; }
[data-theme="kawaii"] .lobby-section input,
[data-theme="kawaii"] .auth-content input[type="text"] { border-radius: 3px; }
[data-theme="kawaii"] .room-info           { border-radius: 4px; }
[data-theme="kawaii"] .room-details        { border-radius: 3px; }
[data-theme="kawaii"] .copy-room-btn       { border-radius: 3px; }
[data-theme="kawaii"] .stats-summary,
[data-theme="kawaii"] .stats-ai-record,
[data-theme="kawaii"] .stats-ai-table,
[data-theme="kawaii"] .stats-opponents table { border-radius: 4px; }
[data-theme="kawaii"] .nav-hamburger       { border-radius: 0 4px 4px 0; }
[data-theme="kawaii"] .card                { border-radius: 4px; }

/* Modal close buttons: visible on light background */
[data-theme="kawaii"] .lobby-modal-content .close-btn,
[data-theme="kawaii"] .modal-content .close-btn {
    color: #2C2C2C;
    opacity: 0.6;
}
[data-theme="kawaii"] .lobby-modal-content .close-btn:hover,
[data-theme="kawaii"] .modal-content .close-btn:hover {
    opacity: 1;
}


/* Swatch: coral to sage */
.theme-swatch[data-theme="kawaii"] { background: linear-gradient(135deg, #D95555 0%, #B8C8B0 100%); }

/* ========================================
   SAND & SEA THEME
   Palette: #E9A27C sand · #E7BBA6 blush · #8CB6BC mist
            #0E8992 teal · #0D313A deep teal
   Light, warm, lofi — sand background, teal accents
   ======================================== */
[data-theme="sand-sea"] {
    --felt-dark: #0D313A;
    --felt-light: #164450;
    --felt-glow: #0D313A;
    --gold: #0E8992;
    --gold-light: #3AABB5;
    --gold-dark: #0A6B73;
    --cream: #0D313A;
    --card-shadow: rgba(13,49,58,0.13);
    --red-suit: #C04A28;
    --black-suit: #0D313A;
    --accent-purple: #E9A27C;
    --surface-dark: #0D313A;
    --surface-mid: #E7BBA6;
    --surface-light: #F7F0EB;
    --btn-text: #F7F0EB;
    --font-primary: 'BoldPixels', sans-serif;
    --font-card: 'Jersey 25', sans-serif;
}

[data-theme="sand-sea"] body {
    background: #F2EAE4;
    color: #0D313A;
    font-weight: 500;
    letter-spacing: 0.01em;
}
[data-theme="sand-sea"] body::before {
    background-image:
        radial-gradient(ellipse at 75% 10%, rgba(14,137,146,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 15% 85%, rgba(233,162,124,0.07) 0%, transparent 50%);
    opacity: 1;
}
[data-theme="sand-sea"] button,
[data-theme="sand-sea"] input { font-weight: 500; letter-spacing: 0.01em; }

/* Headings */
[data-theme="sand-sea"] h1 { text-shadow: none; color: #0D313A; }
[data-theme="sand-sea"] .lobby-content h1,
[data-theme="sand-sea"] #auth-content h1,
[data-theme="sand-sea"] #game-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}
[data-theme="sand-sea"] #game-header h1 {
    color: #0E8992;
    -webkit-text-stroke: 0;
    text-shadow: none;
}
[data-theme="sand-sea"] #choose-username-screen h1,
[data-theme="sand-sea"] .stats-screen h1 {
    font-family: var(--font-primary);
    font-weight: 700;
}
[data-theme="sand-sea"] h2 { font-weight: 700; color: #0D313A; }

/* Labels */
[data-theme="sand-sea"] .player-label,
[data-theme="sand-sea"] .hand-label,
[data-theme="sand-sea"] .pile-label,
[data-theme="sand-sea"] .pile-count,
[data-theme="sand-sea"] #turn-indicator {
    font-weight: 600;
    color: #0D313A;
}

/* Modal/box headings */
[data-theme="sand-sea"] .lobby-section h2,
[data-theme="sand-sea"] .lobby-modal-content h2,
[data-theme="sand-sea"] .modal-content h2,
[data-theme="sand-sea"] #message-title,
[data-theme="sand-sea"] #play-again-title,
[data-theme="sand-sea"] #waiting-other-player-box h2,
[data-theme="sand-sea"] #still-playing-box h2 { color: #0D313A; }

/* Screens */
[data-theme="sand-sea"] #lobby-screen { background: #8CB6BC; }
[data-theme="sand-sea"] #auth-screen,
[data-theme="sand-sea"] #choose-username-screen { background: #F2EAE4; }
[data-theme="sand-sea"] .lobby-content .subtitle,
[data-theme="sand-sea"] .auth-content .subtitle { color: #0D313A; opacity: 0.5; }
[data-theme="sand-sea"] .auth-hint { color: #0D313A; opacity: 0.65; }

/* Buttons: teal */
[data-theme="sand-sea"] .action-btn {
    background: #0E8992;
    color: #F7F0EB;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
[data-theme="sand-sea"] .action-btn:hover:not(:disabled) { background: #0A6B73; }
[data-theme="sand-sea"] .action-btn:disabled { background: #0E8992; opacity: 0.35; }
[data-theme="sand-sea"] .secondary-btn {
    color: #0E8992;
    border-color: #0E8992;
    background: transparent;
    border-radius: 4px;
}
[data-theme="sand-sea"] .secondary-btn:hover { background: rgba(14,137,146,0.08); }

/* Card backs: deep teal with sandy star */
[data-theme="sand-sea"] .card.face-down {
    background: linear-gradient(145deg, #0D313A 0%, #0A2530 100%);
    border: 2px solid rgba(233,162,124,0.3);
    box-shadow: inset 0 0 0 1px rgba(233,162,124,0.1), 0 2px 8px rgba(13,49,58,0.18);
}
[data-theme="sand-sea"] .card.face-down::after {
    content: '✦';
    color: rgba(233,162,124,0.85);
    font-size: 1.3rem;
}
[data-theme="sand-sea"] #draw-pile {
    background: linear-gradient(145deg, #0D313A 0%, #0A2530 100%);
    border: 2px solid rgba(233,162,124,0.3);
}

/* Joker & king-wild */
[data-theme="sand-sea"] .card.joker {
    background: linear-gradient(135deg, #E9A27C 0%, #8CB6BC 100%);
    color: #0D313A;
    text-shadow: none;
}
[data-theme="sand-sea"] .card.king-wild {
    background: linear-gradient(135deg, #E9A27C 0%, #E7BBA6 100%);
    border: 1px solid #000;
}

/* Center area: blush panel */
[data-theme="sand-sea"] #center-area {
    background: #EDD8CC;
    border: 1px solid rgba(13,49,58,0.08);
    box-shadow: 0 2px 12px rgba(13,49,58,0.06);
}
[data-theme="sand-sea"] .center-pile {
    background: #F7F0EB;
    border: 2px solid rgba(13,49,58,0.1);
}
[data-theme="sand-sea"] .card-pile.empty {
    border: 2px dashed rgba(14,137,146,0.3);
    background: rgba(14,137,146,0.03);
}

/* Input panels: blush */
[data-theme="sand-sea"] .lobby-section {
    background: #EDD8CC;
    border: 1px solid rgba(13,49,58,0.08);
    border-radius: 4px;
}
[data-theme="sand-sea"] .lobby-section input,
[data-theme="sand-sea"] .auth-content input[type="text"] {
    background: #F7F0EB;
    color: #0D313A;
    border: 2px solid rgba(14,137,146,0.2);
    border-radius: 3px;
}
[data-theme="sand-sea"] .lobby-section input::placeholder,
[data-theme="sand-sea"] .auth-content input::placeholder { color: rgba(13,49,58,0.35); }
[data-theme="sand-sea"] .lobby-section input:focus,
[data-theme="sand-sea"] .auth-content input:focus { border-color: #0E8992; }

/* Room info */
[data-theme="sand-sea"] .room-info { background: rgba(140,182,188,0.25); border-color: #8CB6BC; }
[data-theme="sand-sea"] .room-details { background: rgba(14,137,146,0.04); }
[data-theme="sand-sea"] .copy-room-btn {
    background: rgba(140,182,188,0.2);
    border-color: #8CB6BC;
    color: #0D313A;
    border-radius: 3px;
}
[data-theme="sand-sea"] .copy-room-btn:hover { background: rgba(140,182,188,0.38); }

/* Nav drawer: deep teal */
[data-theme="sand-sea"] .nav-drawer {
    background: linear-gradient(180deg, #0D313A 0%, #081E25 100%);
    border-right: 1px solid rgba(233,162,124,0.2);
}
[data-theme="sand-sea"] .nav-close,
[data-theme="sand-sea"] .nav-item,
[data-theme="sand-sea"] .nav-theme-name { color: #EDD8CC; }
[data-theme="sand-sea"] .nav-item:hover { background: rgba(14,137,146,0.18); color: #3AABB5; }
[data-theme="sand-sea"] .nav-hamburger {
    background: linear-gradient(135deg, rgba(14,137,146,0.14) 0%, rgba(14,137,146,0.05) 100%);
    border-color: rgba(14,137,146,0.28);
    border-radius: 0 4px 4px 0;
}
[data-theme="sand-sea"] .nav-hamburger:hover {
    background: linear-gradient(135deg, rgba(14,137,146,0.24) 0%, rgba(14,137,146,0.1) 100%);
}
[data-theme="sand-sea"] .nav-theme-section { border-top-color: rgba(233,162,124,0.18); }

/* Stats screen */
[data-theme="sand-sea"] .stats-screen,
[data-theme="sand-sea"] .profile-screen { background: #F2EAE4; color: #0D313A; }
[data-theme="sand-sea"] .stats-screen h1,
[data-theme="sand-sea"] .stats-screen h2,
[data-theme="sand-sea"] .stats-screen p,
[data-theme="sand-sea"] .stats-empty,
[data-theme="sand-sea"] .stats-pending,
[data-theme="sand-sea"] .stat-label { color: #0D313A; }
[data-theme="sand-sea"] .stats-summary,
[data-theme="sand-sea"] .stats-ai-record,
[data-theme="sand-sea"] .stats-ai-table { background: #EDD8CC; }
[data-theme="sand-sea"] .stats-ai-table th,
[data-theme="sand-sea"] .stats-opponents th {
    background: rgba(14,137,146,0.12);
    color: #0D313A;
}
[data-theme="sand-sea"] .stats-ai-table td,
[data-theme="sand-sea"] .stats-opponents td { color: #0D313A; }
[data-theme="sand-sea"] .stats-ai-table tr:not(:last-child) td,
[data-theme="sand-sea"] .stats-opponents tr:not(:last-child) td { border-bottom-color: rgba(13,49,58,0.08); }
[data-theme="sand-sea"] .stats-opponents table { background: #EDD8CC; }

/* Modals */
[data-theme="sand-sea"] .modal-content,
[data-theme="sand-sea"] #message-box,
[data-theme="sand-sea"] #play-again-box.message-box-style,
[data-theme="sand-sea"] #waiting-other-player-box.message-box-style,
[data-theme="sand-sea"] #still-playing-box.message-box-style {
    background: #F7F0EB;
    border: 1px solid rgba(13,49,58,0.1);
    box-shadow: 0 8px 40px rgba(13,49,58,0.12);
    border-radius: 6px;
}
[data-theme="sand-sea"] .lobby-modal-content {
    background: #F7F0EB;
    border: 1px solid rgba(13,49,58,0.1);
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(13,49,58,0.12);
}
[data-theme="sand-sea"] .lobby-modal-content h2 { color: #0D313A; }
[data-theme="sand-sea"] .lobby-modal-content input {
    background: #F2EAE4;
    color: #0D313A;
    border: 2px solid rgba(14,137,146,0.2);
    border-radius: 3px;
}
[data-theme="sand-sea"] .lobby-modal-content input::placeholder { color: rgba(13,49,58,0.35); }
[data-theme="sand-sea"] .lobby-modal-content input:focus { border-color: #0E8992; }
[data-theme="sand-sea"] .lobby-modal-content .close-btn,
[data-theme="sand-sea"] .modal-content .close-btn { color: #0D313A; opacity: 0.6; }
[data-theme="sand-sea"] .lobby-modal-content .close-btn:hover,
[data-theme="sand-sea"] .modal-content .close-btn:hover { opacity: 1; }

/* Drop targets: teal */
[data-theme="sand-sea"] .valid-drop-target {
    border: 3px solid #0E8992 !important;
    background: rgba(14,137,146,0.1) !important;
    box-shadow: 0 0 14px rgba(14,137,146,0.4) !important;
}
[data-theme="sand-sea"] .drag-over {
    background: rgba(14,137,146,0.18) !important;
    border-color: #3AABB5 !important;
    box-shadow: 0 0 22px rgba(14,137,146,0.6) !important;
}
[data-theme="sand-sea"] .center-pile.valid-target {
    border-color: #0E8992;
    box-shadow: 0 0 12px rgba(14,137,146,0.38);
}
[data-theme="sand-sea"] .discard-pile.valid-target {
    border: 2px solid #0E8992;
    box-shadow: 0 0 10px rgba(14,137,146,0.32);
}

/* Selected card: teal ring */
[data-theme="sand-sea"] .card.selected {
    box-shadow: 0 0 0 3px #0E8992, 0 8px 20px rgba(13,49,58,0.14);
}

/* Spinners */
[data-theme="sand-sea"] .auth-spinner,
[data-theme="sand-sea"] .stats-spinner {
    border-color: rgba(14,137,146,0.18);
    border-top-color: #0E8992;
}

/* Corner rounding */
[data-theme="sand-sea"] .action-btn          { border-radius: 4px; }
[data-theme="sand-sea"] .secondary-btn       { border-radius: 4px; }
[data-theme="sand-sea"] .modal-content,
[data-theme="sand-sea"] #message-box,
[data-theme="sand-sea"] #play-again-box.message-box-style,
[data-theme="sand-sea"] #waiting-other-player-box.message-box-style,
[data-theme="sand-sea"] #still-playing-box.message-box-style { border-radius: 6px; }
[data-theme="sand-sea"] .lobby-section,
[data-theme="sand-sea"] .lobby-multiplayer   { border-radius: 4px; }
[data-theme="sand-sea"] .lobby-section input,
[data-theme="sand-sea"] .auth-content input[type="text"] { border-radius: 3px; }
[data-theme="sand-sea"] .room-info           { border-radius: 4px; }
[data-theme="sand-sea"] .room-details        { border-radius: 3px; }
[data-theme="sand-sea"] .stats-summary,
[data-theme="sand-sea"] .stats-ai-record,
[data-theme="sand-sea"] .stats-ai-table,
[data-theme="sand-sea"] .stats-opponents table { border-radius: 4px; }
[data-theme="sand-sea"] .card                { border-radius: 4px; }

/* Swatch */
.theme-swatch[data-theme="sand-sea"] { background: linear-gradient(135deg, #E9A27C 0%, #0D313A 100%); }

/* ========================================
   CLASSIC LEMON THEME
   Palette: #ECF2E4 mint cream · #C0DCC3 sage · #F8E9A6 pale lemon
            #86887B olive grey · #8DB9AA muted teal
   Very soft, muted, botanical lofi feel
   ======================================== */
[data-theme="classic-lemon"] {
    --felt-dark: #3A3C34;
    --felt-light: #4A4C42;
    --felt-glow: #3A3C34;
    --gold: #8DB9AA;
    --gold-light: #AECFC2;
    --gold-dark: #6A9A8C;
    --cream: #3A3C34;
    --card-shadow: rgba(58,60,52,0.12);
    --red-suit: #A0504A;
    --black-suit: #3A3C34;
    --accent-purple: #F8E9A6;
    --surface-dark: #3A3C34;
    --surface-mid: #C0DCC3;
    --surface-light: #ECF2E4;
    --btn-text: #ECF2E4;
    --font-primary: 'BoldPixels', sans-serif;
    --font-card: 'Jersey 25', sans-serif;
}

[data-theme="classic-lemon"] body {
    background: #ECF2E4;
    color: #3A3C34;
    font-weight: 500;
    letter-spacing: 0.01em;
}
[data-theme="classic-lemon"] body::before {
    background-image:
        radial-gradient(ellipse at 80% 10%, rgba(248,233,166,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 90%, rgba(141,185,170,0.1) 0%, transparent 50%);
    opacity: 1;
}
[data-theme="classic-lemon"] button,
[data-theme="classic-lemon"] input { font-weight: 500; letter-spacing: 0.01em; }

/* Headings */
[data-theme="classic-lemon"] h1 { text-shadow: none; color: #3A3C34; }
[data-theme="classic-lemon"] .lobby-content h1,
[data-theme="classic-lemon"] #auth-content h1,
[data-theme="classic-lemon"] #game-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}
[data-theme="classic-lemon"] #game-header h1 {
    color: #86887B;
    -webkit-text-stroke: 0;
    text-shadow: none;
}
[data-theme="classic-lemon"] #choose-username-screen h1,
[data-theme="classic-lemon"] .stats-screen h1 {
    font-family: var(--font-primary);
    font-weight: 700;
}
[data-theme="classic-lemon"] h2 { font-weight: 700; color: #3A3C34; }

/* Labels */
[data-theme="classic-lemon"] .player-label,
[data-theme="classic-lemon"] .hand-label,
[data-theme="classic-lemon"] .pile-label,
[data-theme="classic-lemon"] .pile-count {
    font-weight: 600;
    color: #3A3C34;
    font-size: 0.72rem;
    white-space: nowrap;
    padding: 4px 10px;
}
[data-theme="classic-lemon"] #turn-indicator {
    background: #86887B;
    color: #ECF2E4;
    font-weight: 600;
    border-radius: 4px;
}
[data-theme="classic-lemon"] #turn-indicator.computer-turn {
    background: #8DB9AA;
    color: #3A3C34;
}

/* Goal pile ring: olive */
[data-theme="classic-lemon"] .goal-pile {
    box-shadow: 0 0 0 3px #86887B, 0 4px 12px var(--card-shadow);
}

/* Modal/box headings */
[data-theme="classic-lemon"] .lobby-section h2,
[data-theme="classic-lemon"] .lobby-modal-content h2,
[data-theme="classic-lemon"] .modal-content h2,
[data-theme="classic-lemon"] #message-title,
[data-theme="classic-lemon"] #play-again-title,
[data-theme="classic-lemon"] #waiting-other-player-box h2,
[data-theme="classic-lemon"] #still-playing-box h2 { color: #3A3C34; }

/* Screens */
[data-theme="classic-lemon"] #lobby-screen { background: #C0DCC3; }
[data-theme="classic-lemon"] #auth-screen,
[data-theme="classic-lemon"] #choose-username-screen { background: #ECF2E4; }
[data-theme="classic-lemon"] .lobby-content .subtitle,
[data-theme="classic-lemon"] .auth-content .subtitle { color: #3A3C34; opacity: 0.5; }
[data-theme="classic-lemon"] .auth-hint { color: #3A3C34; opacity: 0.65; }

/* Buttons: olive grey */
[data-theme="classic-lemon"] .action-btn {
    background: #86887B;
    color: #ECF2E4;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
[data-theme="classic-lemon"] .action-btn:hover:not(:disabled) { background: #6A6C62; }
[data-theme="classic-lemon"] .action-btn:disabled { background: #86887B; opacity: 0.35; }
[data-theme="classic-lemon"] .secondary-btn {
    color: #86887B;
    border-color: #86887B;
    background: transparent;
    border-radius: 4px;
}
[data-theme="classic-lemon"] .secondary-btn:hover { background: rgba(134,136,123,0.1); }

/* Card backs: olive with lemon star */
[data-theme="classic-lemon"] .card.face-down {
    background: linear-gradient(145deg, #86887B 0%, #6A6C62 100%);
    border: 2px solid rgba(248,233,166,0.35);
    box-shadow: inset 0 0 0 1px rgba(248,233,166,0.12), 0 2px 8px rgba(58,60,52,0.14);
}
[data-theme="classic-lemon"] .card.face-down::after {
    content: '✦';
    color: rgba(248,233,166,0.9);
    font-size: 1.3rem;
}
[data-theme="classic-lemon"] #draw-pile {
    background: linear-gradient(145deg, #86887B 0%, #6A6C62 100%);
    border: 2px solid rgba(248,233,166,0.35);
}

/* Joker & king-wild */
[data-theme="classic-lemon"] .card.joker {
    background: linear-gradient(135deg, #F8E9A6 0%, #C0DCC3 100%);
    color: #3A3C34;
    text-shadow: none;
}
[data-theme="classic-lemon"] .card.king-wild {
    background: linear-gradient(135deg, #F8E9A6 0%, #8DB9AA 100%);
    border: 1px solid #000;
}

/* Center area: sage panel */
[data-theme="classic-lemon"] #center-area {
    background: #D4E8D6;
    border: 1px solid rgba(58,60,52,0.07);
    box-shadow: 0 2px 12px rgba(58,60,52,0.05);
}
[data-theme="classic-lemon"] .center-pile {
    background: #ECF2E4;
    border: 2px solid rgba(58,60,52,0.1);
}
[data-theme="classic-lemon"] .card-pile.empty {
    border: 2px dashed rgba(134,136,123,0.3);
    background: rgba(134,136,123,0.04);
}

/* Input panels */
[data-theme="classic-lemon"] .lobby-section {
    background: #D4E8D6;
    border: 1px solid rgba(58,60,52,0.07);
    border-radius: 4px;
}
[data-theme="classic-lemon"] .lobby-section input,
[data-theme="classic-lemon"] .auth-content input[type="text"] {
    background: #ECF2E4;
    color: #3A3C34;
    border: 2px solid rgba(134,136,123,0.25);
    border-radius: 3px;
}
[data-theme="classic-lemon"] .lobby-section input::placeholder,
[data-theme="classic-lemon"] .auth-content input::placeholder { color: rgba(58,60,52,0.35); }
[data-theme="classic-lemon"] .lobby-section input:focus,
[data-theme="classic-lemon"] .auth-content input:focus { border-color: #86887B; }

/* Room info */
[data-theme="classic-lemon"] .room-info { background: rgba(141,185,170,0.22); border-color: #8DB9AA; }
[data-theme="classic-lemon"] .room-details { background: rgba(248,233,166,0.15); }
[data-theme="classic-lemon"] .copy-room-btn {
    background: rgba(192,220,195,0.3);
    border-color: #C0DCC3;
    color: #3A3C34;
    border-radius: 3px;
}
[data-theme="classic-lemon"] .copy-room-btn:hover { background: rgba(192,220,195,0.5); }

/* Nav drawer: deep olive */
[data-theme="classic-lemon"] .nav-drawer {
    background: linear-gradient(180deg, #3A3C34 0%, #282A22 100%);
    border-right: 1px solid rgba(248,233,166,0.15);
}
[data-theme="classic-lemon"] .nav-close,
[data-theme="classic-lemon"] .nav-item,
[data-theme="classic-lemon"] .nav-theme-name { color: #D4E8D6; }
[data-theme="classic-lemon"] .nav-item:hover { background: rgba(248,233,166,0.1); color: #ECF2E4; }
[data-theme="classic-lemon"] .nav-hamburger {
    background: linear-gradient(135deg, rgba(134,136,123,0.18) 0%, rgba(134,136,123,0.07) 100%);
    border-color: rgba(134,136,123,0.3);
    border-radius: 0 4px 4px 0;
}
[data-theme="classic-lemon"] .nav-hamburger:hover {
    background: linear-gradient(135deg, rgba(134,136,123,0.28) 0%, rgba(134,136,123,0.12) 100%);
}
[data-theme="classic-lemon"] .nav-theme-section { border-top-color: rgba(248,233,166,0.15); }

/* Stats screen */
[data-theme="classic-lemon"] .stats-screen,
[data-theme="classic-lemon"] .profile-screen { background: #ECF2E4; color: #3A3C34; }
[data-theme="classic-lemon"] .stats-screen h1,
[data-theme="classic-lemon"] .stats-screen h2,
[data-theme="classic-lemon"] .stats-screen p,
[data-theme="classic-lemon"] .stats-empty,
[data-theme="classic-lemon"] .stats-pending,
[data-theme="classic-lemon"] .stat-label { color: #3A3C34; }
[data-theme="classic-lemon"] .stats-summary,
[data-theme="classic-lemon"] .stats-ai-record,
[data-theme="classic-lemon"] .stats-ai-table { background: #D4E8D6; }
[data-theme="classic-lemon"] .stats-ai-table th,
[data-theme="classic-lemon"] .stats-opponents th {
    background: rgba(134,136,123,0.12);
    color: #3A3C34;
}
[data-theme="classic-lemon"] .stats-ai-table td,
[data-theme="classic-lemon"] .stats-opponents td { color: #3A3C34; }
[data-theme="classic-lemon"] .stats-ai-table tr:not(:last-child) td,
[data-theme="classic-lemon"] .stats-opponents tr:not(:last-child) td { border-bottom-color: rgba(58,60,52,0.08); }
[data-theme="classic-lemon"] .stats-opponents table { background: #D4E8D6; }

/* Modals */
[data-theme="classic-lemon"] .modal-content,
[data-theme="classic-lemon"] #message-box,
[data-theme="classic-lemon"] #play-again-box.message-box-style,
[data-theme="classic-lemon"] #waiting-other-player-box.message-box-style,
[data-theme="classic-lemon"] #still-playing-box.message-box-style {
    background: #ECF2E4;
    border: 1px solid rgba(58,60,52,0.1);
    box-shadow: 0 8px 40px rgba(58,60,52,0.1);
    border-radius: 6px;
}
[data-theme="classic-lemon"] .lobby-modal-content {
    background: #ECF2E4;
    border: 1px solid rgba(58,60,52,0.1);
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(58,60,52,0.1);
}
[data-theme="classic-lemon"] .lobby-modal-content h2 { color: #3A3C34; }
[data-theme="classic-lemon"] .lobby-modal-content input {
    background: #ECF2E4;
    color: #3A3C34;
    border: 2px solid rgba(134,136,123,0.25);
    border-radius: 3px;
}
[data-theme="classic-lemon"] .lobby-modal-content input::placeholder { color: rgba(58,60,52,0.35); }
[data-theme="classic-lemon"] .lobby-modal-content input:focus { border-color: #86887B; }
[data-theme="classic-lemon"] .lobby-modal-content .close-btn,
[data-theme="classic-lemon"] .modal-content .close-btn { color: #3A3C34; opacity: 0.6; }
[data-theme="classic-lemon"] .lobby-modal-content .close-btn:hover,
[data-theme="classic-lemon"] .modal-content .close-btn:hover { opacity: 1; }

/* Drop targets: teal */
[data-theme="classic-lemon"] .valid-drop-target {
    border: 3px solid #8DB9AA !important;
    background: rgba(141,185,170,0.12) !important;
    box-shadow: 0 0 14px rgba(141,185,170,0.45) !important;
}
[data-theme="classic-lemon"] .drag-over {
    background: rgba(141,185,170,0.2) !important;
    border-color: #AECFC2 !important;
    box-shadow: 0 0 22px rgba(141,185,170,0.65) !important;
}
[data-theme="classic-lemon"] .center-pile.valid-target {
    border-color: #8DB9AA;
    box-shadow: 0 0 12px rgba(141,185,170,0.4);
}
[data-theme="classic-lemon"] .discard-pile.valid-target {
    border: 2px solid #8DB9AA;
    box-shadow: 0 0 10px rgba(141,185,170,0.35);
}

/* Selected card: teal ring */
[data-theme="classic-lemon"] .card.selected {
    box-shadow: 0 0 0 3px #8DB9AA, 0 8px 20px rgba(58,60,52,0.12);
}

/* Spinners */
[data-theme="classic-lemon"] .auth-spinner,
[data-theme="classic-lemon"] .stats-spinner {
    border-color: rgba(141,185,170,0.2);
    border-top-color: #8DB9AA;
}

/* Corner rounding */
[data-theme="classic-lemon"] .action-btn          { border-radius: 4px; }
[data-theme="classic-lemon"] .secondary-btn       { border-radius: 4px; }
[data-theme="classic-lemon"] .modal-content,
[data-theme="classic-lemon"] #message-box,
[data-theme="classic-lemon"] #play-again-box.message-box-style,
[data-theme="classic-lemon"] #waiting-other-player-box.message-box-style,
[data-theme="classic-lemon"] #still-playing-box.message-box-style { border-radius: 6px; }
[data-theme="classic-lemon"] .lobby-section,
[data-theme="classic-lemon"] .lobby-multiplayer   { border-radius: 4px; }
[data-theme="classic-lemon"] .lobby-section input,
[data-theme="classic-lemon"] .auth-content input[type="text"] { border-radius: 3px; }
[data-theme="classic-lemon"] .room-info           { border-radius: 4px; }
[data-theme="classic-lemon"] .room-details        { border-radius: 3px; }
[data-theme="classic-lemon"] .stats-summary,
[data-theme="classic-lemon"] .stats-ai-record,
[data-theme="classic-lemon"] .stats-ai-table,
[data-theme="classic-lemon"] .stats-opponents table { border-radius: 4px; }
[data-theme="classic-lemon"] .card                { border-radius: 4px; }

/* Swatch: lemon to olive */
.theme-swatch[data-theme="classic-lemon"] { background: linear-gradient(135deg, #F8E9A6 0%, #86887B 100%); }

/* ========================================
   NEFETIBATA THEME
   Palette: #5D3F57 deep plum · #85868A cool grey · #A8CABA sage mint
            #C9D7B3 light sage · #E8E9AA pale cream
   Dreamy, vintage, soft-moody aesthetic
   ======================================== */
[data-theme="nefetibata"] {
    --felt-dark: #3D2540;
    --felt-light: #5D3F57;
    --felt-glow: #3D2540;
    --gold: #A8CABA;
    --gold-light: #C0D9CC;
    --gold-dark: #7FAAA0;
    --cream: #3D2540;
    --card-shadow: rgba(61,37,64,0.12);
    --red-suit: #8B3A5C;
    --black-suit: #3D2540;
    --accent-purple: #E8E9AA;
    --surface-dark: #3D2540;
    --surface-mid: #C9D7B3;
    --surface-light: #EEF0E8;
    --btn-text: #F5F2F8;
    --font-primary: 'BoldPixels', sans-serif;
    --font-card: 'Jersey 25', sans-serif;
}

[data-theme="nefetibata"] body {
    background: #EEF0E8;
    color: #3D2540;
    font-weight: 500;
    letter-spacing: 0.01em;
}
[data-theme="nefetibata"] body::before {
    background-image:
        radial-gradient(ellipse at 75% 10%, rgba(93,63,87,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 85%, rgba(168,202,186,0.12) 0%, transparent 50%);
    opacity: 1;
}
[data-theme="nefetibata"] button,
[data-theme="nefetibata"] input { font-weight: 500; letter-spacing: 0.01em; }

/* Headings */
[data-theme="nefetibata"] h1 { text-shadow: none; color: #3D2540; }
[data-theme="nefetibata"] .lobby-content h1,
[data-theme="nefetibata"] #auth-content h1,
[data-theme="nefetibata"] #game-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}
[data-theme="nefetibata"] #game-header h1 {
    color: #5D3F57;
    -webkit-text-stroke: 0;
    text-shadow: none;
}
[data-theme="nefetibata"] #choose-username-screen h1,
[data-theme="nefetibata"] .stats-screen h1 {
    font-family: var(--font-primary);
    font-weight: 700;
}
[data-theme="nefetibata"] h2 { font-weight: 700; color: #3D2540; }

/* Labels */
[data-theme="nefetibata"] .player-label,
[data-theme="nefetibata"] .hand-label,
[data-theme="nefetibata"] .pile-label,
[data-theme="nefetibata"] .pile-count {
    font-weight: 600;
    color: #3D2540;
    font-size: 0.72rem;
    white-space: nowrap;
    padding: 4px 10px;
}
[data-theme="nefetibata"] #turn-indicator {
    background: #5D3F57;
    color: #F5F2F8;
    font-weight: 600;
    border-radius: 4px;
}
[data-theme="nefetibata"] #turn-indicator.computer-turn {
    background: #85868A;
    color: #F5F2F8;
}

/* Goal pile ring: plum */
[data-theme="nefetibata"] .goal-pile {
    box-shadow: 0 0 0 3px #5D3F57, 0 4px 12px var(--card-shadow);
}

/* Modal/box headings */
[data-theme="nefetibata"] .lobby-section h2,
[data-theme="nefetibata"] .lobby-modal-content h2,
[data-theme="nefetibata"] .modal-content h2,
[data-theme="nefetibata"] #message-title,
[data-theme="nefetibata"] #play-again-title,
[data-theme="nefetibata"] #waiting-other-player-box h2,
[data-theme="nefetibata"] #still-playing-box h2 { color: #3D2540; }

/* Screens */
[data-theme="nefetibata"] #lobby-screen { background: #A8CABA; }
[data-theme="nefetibata"] #auth-screen,
[data-theme="nefetibata"] #choose-username-screen { background: #EEF0E8; }
[data-theme="nefetibata"] .lobby-content .subtitle,
[data-theme="nefetibata"] .auth-content .subtitle { color: #3D2540; opacity: 0.5; }
[data-theme="nefetibata"] .auth-hint { color: #3D2540; opacity: 0.65; }

/* Buttons: deep plum */
[data-theme="nefetibata"] .action-btn {
    background: #5D3F57;
    color: #F5F2F8;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
[data-theme="nefetibata"] .action-btn:hover:not(:disabled) { background: #3D2540; }
[data-theme="nefetibata"] .action-btn:disabled { background: #5D3F57; opacity: 0.35; }
[data-theme="nefetibata"] .secondary-btn {
    color: #5D3F57;
    border-color: #5D3F57;
    background: transparent;
    border-radius: 4px;
}
[data-theme="nefetibata"] .secondary-btn:hover { background: rgba(93,63,87,0.08); }

/* Card backs: plum with pale cream star */
[data-theme="nefetibata"] .card.face-down {
    background: linear-gradient(145deg, #5D3F57 0%, #3D2540 100%);
    border: 2px solid rgba(232,233,170,0.3);
    box-shadow: inset 0 0 0 1px rgba(232,233,170,0.1), 0 2px 8px rgba(61,37,64,0.18);
}
[data-theme="nefetibata"] .card.face-down::after {
    content: '✦';
    color: rgba(232,233,170,0.85);
    font-size: 1.3rem;
}
[data-theme="nefetibata"] #draw-pile {
    background: linear-gradient(145deg, #5D3F57 0%, #3D2540 100%);
    border: 2px solid rgba(232,233,170,0.3);
}

/* Joker & king-wild */
[data-theme="nefetibata"] .card.joker {
    background: linear-gradient(135deg, #E8E9AA 0%, #A8CABA 100%);
    color: #3D2540;
    text-shadow: none;
}
[data-theme="nefetibata"] .card.king-wild {
    background: linear-gradient(135deg, #E8E9AA 0%, #C9D7B3 100%);
    border: 1px solid #000;
}

/* Center area: light sage panel */
[data-theme="nefetibata"] #center-area {
    background: #D8E3CC;
    border: 1px solid rgba(61,37,64,0.07);
    box-shadow: 0 2px 12px rgba(61,37,64,0.05);
}
[data-theme="nefetibata"] .center-pile {
    background: #EEF0E8;
    border: 2px solid rgba(61,37,64,0.1);
}
[data-theme="nefetibata"] .card-pile.empty {
    border: 2px dashed rgba(93,63,87,0.25);
    background: rgba(93,63,87,0.03);
}

/* Input panels */
[data-theme="nefetibata"] .lobby-section {
    background: #D8E3CC;
    border: 1px solid rgba(61,37,64,0.07);
    border-radius: 4px;
}
[data-theme="nefetibata"] .lobby-section input,
[data-theme="nefetibata"] .auth-content input[type="text"] {
    background: #EEF0E8;
    color: #3D2540;
    border: 2px solid rgba(93,63,87,0.2);
    border-radius: 3px;
}
[data-theme="nefetibata"] .lobby-section input::placeholder,
[data-theme="nefetibata"] .auth-content input::placeholder { color: rgba(61,37,64,0.35); }
[data-theme="nefetibata"] .lobby-section input:focus,
[data-theme="nefetibata"] .auth-content input:focus { border-color: #5D3F57; }

/* Room info */
[data-theme="nefetibata"] .room-info { background: rgba(168,202,186,0.25); border-color: #A8CABA; }
[data-theme="nefetibata"] .room-details { background: rgba(232,233,170,0.18); }
[data-theme="nefetibata"] .copy-room-btn {
    background: rgba(201,215,179,0.35);
    border-color: #C9D7B3;
    color: #3D2540;
    border-radius: 3px;
}
[data-theme="nefetibata"] .copy-room-btn:hover { background: rgba(201,215,179,0.55); }

/* Nav drawer: deep plum */
[data-theme="nefetibata"] .nav-drawer {
    background: linear-gradient(180deg, #3D2540 0%, #281830 100%);
    border-right: 1px solid rgba(232,233,170,0.12);
}
[data-theme="nefetibata"] .nav-close,
[data-theme="nefetibata"] .nav-item,
[data-theme="nefetibata"] .nav-theme-name { color: #C9D7B3; }
[data-theme="nefetibata"] .nav-item:hover { background: rgba(232,233,170,0.1); color: #C9D7B3; }
[data-theme="nefetibata"] .nav-hamburger {
    background: linear-gradient(135deg, rgba(93,63,87,0.18) 0%, rgba(93,63,87,0.07) 100%);
    border-color: rgba(93,63,87,0.3);
    border-radius: 0 4px 4px 0;
}
[data-theme="nefetibata"] .nav-hamburger:hover {
    background: linear-gradient(135deg, rgba(93,63,87,0.3) 0%, rgba(93,63,87,0.14) 100%);
}
[data-theme="nefetibata"] .nav-theme-section { border-top-color: rgba(232,233,170,0.12); }

/* Stats screen */
[data-theme="nefetibata"] .stats-screen,
[data-theme="nefetibata"] .profile-screen { background: #EEF0E8; color: #3D2540; }
[data-theme="nefetibata"] .stats-screen h1,
[data-theme="nefetibata"] .stats-screen h2,
[data-theme="nefetibata"] .stats-screen p,
[data-theme="nefetibata"] .stats-empty,
[data-theme="nefetibata"] .stats-pending,
[data-theme="nefetibata"] .stat-label { color: #3D2540; }
[data-theme="nefetibata"] .stats-summary,
[data-theme="nefetibata"] .stats-ai-record,
[data-theme="nefetibata"] .stats-ai-table { background: #D8E3CC; }
[data-theme="nefetibata"] .stats-ai-table th,
[data-theme="nefetibata"] .stats-opponents th {
    background: rgba(93,63,87,0.1);
    color: #3D2540;
}
[data-theme="nefetibata"] .stats-ai-table td,
[data-theme="nefetibata"] .stats-opponents td { color: #3D2540; }
[data-theme="nefetibata"] .stats-ai-table tr:not(:last-child) td,
[data-theme="nefetibata"] .stats-opponents tr:not(:last-child) td { border-bottom-color: rgba(61,37,64,0.08); }
[data-theme="nefetibata"] .stats-opponents table { background: #D8E3CC; }

/* Modals */
[data-theme="nefetibata"] .modal-content,
[data-theme="nefetibata"] #message-box,
[data-theme="nefetibata"] #play-again-box.message-box-style,
[data-theme="nefetibata"] #waiting-other-player-box.message-box-style,
[data-theme="nefetibata"] #still-playing-box.message-box-style {
    background: #EEF0E8;
    border: 1px solid rgba(61,37,64,0.1);
    box-shadow: 0 8px 40px rgba(61,37,64,0.1);
    border-radius: 6px;
}
[data-theme="nefetibata"] .lobby-modal-content {
    background: #EEF0E8;
    border: 1px solid rgba(61,37,64,0.1);
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(61,37,64,0.1);
}
[data-theme="nefetibata"] .lobby-modal-content h2 { color: #3D2540; }
[data-theme="nefetibata"] .lobby-modal-content input {
    background: #EEF0E8;
    color: #3D2540;
    border: 2px solid rgba(93,63,87,0.2);
    border-radius: 3px;
}
[data-theme="nefetibata"] .lobby-modal-content input::placeholder { color: rgba(61,37,64,0.35); }
[data-theme="nefetibata"] .lobby-modal-content input:focus { border-color: #5D3F57; }
[data-theme="nefetibata"] .lobby-modal-content .close-btn,
[data-theme="nefetibata"] .modal-content .close-btn { color: #3D2540; opacity: 0.6; }
[data-theme="nefetibata"] .lobby-modal-content .close-btn:hover,
[data-theme="nefetibata"] .modal-content .close-btn:hover { opacity: 1; }

/* Drop targets: sage mint */
[data-theme="nefetibata"] .valid-drop-target {
    border: 3px solid #A8CABA !important;
    background: rgba(168,202,186,0.12) !important;
    box-shadow: 0 0 14px rgba(168,202,186,0.45) !important;
}
[data-theme="nefetibata"] .drag-over {
    background: rgba(168,202,186,0.2) !important;
    border-color: #C0D9CC !important;
    box-shadow: 0 0 22px rgba(168,202,186,0.6) !important;
}
[data-theme="nefetibata"] .center-pile.valid-target {
    border-color: #A8CABA;
    box-shadow: 0 0 12px rgba(168,202,186,0.4);
}
[data-theme="nefetibata"] .discard-pile.valid-target {
    border: 2px solid #A8CABA;
    box-shadow: 0 0 10px rgba(168,202,186,0.35);
}

/* Selected card: plum ring */
[data-theme="nefetibata"] .card.selected {
    box-shadow: 0 0 0 3px #5D3F57, 0 8px 20px rgba(61,37,64,0.14);
}

/* Spinners */
[data-theme="nefetibata"] .auth-spinner,
[data-theme="nefetibata"] .stats-spinner {
    border-color: rgba(168,202,186,0.2);
    border-top-color: #A8CABA;
}

/* Corner rounding */
[data-theme="nefetibata"] .action-btn          { border-radius: 4px; }
[data-theme="nefetibata"] .secondary-btn       { border-radius: 4px; }
[data-theme="nefetibata"] .modal-content,
[data-theme="nefetibata"] #message-box,
[data-theme="nefetibata"] #play-again-box.message-box-style,
[data-theme="nefetibata"] #waiting-other-player-box.message-box-style,
[data-theme="nefetibata"] #still-playing-box.message-box-style { border-radius: 6px; }
[data-theme="nefetibata"] .lobby-section,
[data-theme="nefetibata"] .lobby-multiplayer   { border-radius: 4px; }
[data-theme="nefetibata"] .lobby-section input,
[data-theme="nefetibata"] .auth-content input[type="text"] { border-radius: 3px; }
[data-theme="nefetibata"] .room-info           { border-radius: 4px; }
[data-theme="nefetibata"] .room-details        { border-radius: 3px; }
[data-theme="nefetibata"] .stats-summary,
[data-theme="nefetibata"] .stats-ai-record,
[data-theme="nefetibata"] .stats-ai-table,
[data-theme="nefetibata"] .stats-opponents table { border-radius: 4px; }
[data-theme="nefetibata"] .card                { border-radius: 4px; }

/* Swatch: plum to sage */
.theme-swatch[data-theme="nefetibata"] { background: linear-gradient(135deg, #5D3F57 0%, #A8CABA 100%); }

/* ========================================
   DARLINGTON THEME
   Palette: #ACCAB2 mint sage (Darlington) · #E9A752 beeswax amber
            #D44720 grenadine red-orange · #78814D café latte olive
   Retro mid-century resort — warm, bold, sun-bleached
   ======================================== */
[data-theme="darlington"] {
    --felt-dark: #3D3F25;
    --felt-light: #78814D;
    --felt-glow: #3D3F25;
    --gold: #E9A752;
    --gold-light: #F0BB78;
    --gold-dark: #C88530;
    --cream: #3D3F25;
    --card-shadow: rgba(61,63,37,0.14);
    --red-suit: #B03518;
    --black-suit: #3D3F25;
    --accent-purple: #ACCAB2;
    --surface-dark: #3D3F25;
    --surface-mid: #ACCAB2;
    --surface-light: #FAF2E4;
    --btn-text: #FAF2E4;
    --font-primary: 'BoldPixels', sans-serif;
    --font-card: 'Jersey 25', sans-serif;
}

[data-theme="darlington"] body {
    background: #FAF2E4;
    color: #3D3F25;
    font-weight: 500;
    letter-spacing: 0.01em;
}
[data-theme="darlington"] body::before {
    background-image:
        radial-gradient(ellipse at 80% 8%, rgba(233,167,82,0.14) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 90%, rgba(172,202,178,0.12) 0%, transparent 50%);
    opacity: 1;
}
[data-theme="darlington"] button,
[data-theme="darlington"] input { font-weight: 500; letter-spacing: 0.01em; }

/* Headings */
[data-theme="darlington"] h1 { text-shadow: none; color: #3D3F25; }
[data-theme="darlington"] .lobby-content h1,
[data-theme="darlington"] #auth-content h1,
[data-theme="darlington"] #game-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}
[data-theme="darlington"] #game-header h1 {
    color: #D44720;
    -webkit-text-stroke: 0;
    text-shadow: none;
}
[data-theme="darlington"] #choose-username-screen h1,
[data-theme="darlington"] .stats-screen h1 {
    font-family: var(--font-primary);
    font-weight: 700;
}
[data-theme="darlington"] h2 { font-weight: 700; color: #3D3F25; }

/* Labels */
[data-theme="darlington"] .player-label,
[data-theme="darlington"] .hand-label,
[data-theme="darlington"] .pile-label,
[data-theme="darlington"] .pile-count {
    font-weight: 600;
    color: #3D3F25;
    font-size: 0.72rem;
    white-space: nowrap;
    padding: 4px 10px;
}
[data-theme="darlington"] #turn-indicator {
    background: #D44720;
    color: #FAF2E4;
    font-weight: 600;
    border-radius: 4px;
}
[data-theme="darlington"] #turn-indicator.computer-turn {
    background: #78814D;
    color: #FAF2E4;
}

/* Goal pile ring: grenadine */
[data-theme="darlington"] .goal-pile {
    box-shadow: 0 0 0 3px #D44720, 0 4px 12px var(--card-shadow);
}

/* Modal/box headings */
[data-theme="darlington"] .lobby-section h2,
[data-theme="darlington"] .lobby-modal-content h2,
[data-theme="darlington"] .modal-content h2,
[data-theme="darlington"] #message-title,
[data-theme="darlington"] #play-again-title,
[data-theme="darlington"] #waiting-other-player-box h2,
[data-theme="darlington"] #still-playing-box h2 { color: #3D3F25; }

/* Screens */
[data-theme="darlington"] #lobby-screen { background: #ACCAB2; }
[data-theme="darlington"] #auth-screen,
[data-theme="darlington"] #choose-username-screen { background: #FAF2E4; }
[data-theme="darlington"] .lobby-content .subtitle,
[data-theme="darlington"] .auth-content .subtitle { color: #3D3F25; opacity: 0.5; }
[data-theme="darlington"] .auth-hint { color: #3D3F25; opacity: 0.65; }

/* Buttons: grenadine */
[data-theme="darlington"] .action-btn {
    background: #D44720;
    color: #FAF2E4;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
[data-theme="darlington"] .action-btn:hover:not(:disabled) { background: #B03518; }
[data-theme="darlington"] .action-btn:disabled { background: #D44720; opacity: 0.35; }
[data-theme="darlington"] .secondary-btn {
    color: #D44720;
    border-color: #D44720;
    background: transparent;
    border-radius: 4px;
}
[data-theme="darlington"] .secondary-btn:hover { background: rgba(212,71,32,0.08); }

/* Card backs: grenadine with beeswax star */
[data-theme="darlington"] .card.face-down {
    background: linear-gradient(145deg, #D44720 0%, #B03518 100%);
    border: 2px solid rgba(233,167,82,0.4);
    box-shadow: inset 0 0 0 1px rgba(233,167,82,0.15), 0 2px 8px rgba(61,63,37,0.18);
}
[data-theme="darlington"] .card.face-down::after {
    content: '✦';
    color: rgba(233,167,82,0.9);
    font-size: 1.3rem;
}
[data-theme="darlington"] #draw-pile {
    background: linear-gradient(145deg, #D44720 0%, #B03518 100%);
    border: 2px solid rgba(233,167,82,0.4);
}

/* Joker & king-wild */
[data-theme="darlington"] .card.joker {
    background: linear-gradient(135deg, #E9A752 0%, #ACCAB2 100%);
    color: #3D3F25;
    text-shadow: none;
}
[data-theme="darlington"] .card.king-wild {
    background: linear-gradient(135deg, #E9A752 0%, #D44720 100%);
    border: 1px solid #000;
    color: #FAF2E4;
}

/* Center area: mint sage panel */
[data-theme="darlington"] #center-area {
    background: #C8DDD0;
    border: 1px solid rgba(61,63,37,0.07);
    box-shadow: 0 2px 12px rgba(61,63,37,0.05);
}
[data-theme="darlington"] .center-pile {
    background: #FAF2E4;
    border: 2px solid rgba(61,63,37,0.1);
}
[data-theme="darlington"] .card-pile.empty {
    border: 2px dashed rgba(120,129,77,0.3);
    background: rgba(120,129,77,0.04);
}

/* Input panels */
[data-theme="darlington"] .lobby-section {
    background: #C8DDD0;
    border: 1px solid rgba(61,63,37,0.07);
    border-radius: 4px;
}
[data-theme="darlington"] .lobby-section input,
[data-theme="darlington"] .auth-content input[type="text"] {
    background: #FAF2E4;
    color: #3D3F25;
    border: 2px solid rgba(120,129,77,0.25);
    border-radius: 3px;
}
[data-theme="darlington"] .lobby-section input::placeholder,
[data-theme="darlington"] .auth-content input::placeholder { color: rgba(61,63,37,0.35); }
[data-theme="darlington"] .lobby-section input:focus,
[data-theme="darlington"] .auth-content input:focus { border-color: #D44720; }

/* Room info */
[data-theme="darlington"] .room-info { background: rgba(233,167,82,0.2); border-color: #E9A752; }
[data-theme="darlington"] .room-details { background: rgba(233,167,82,0.12); }
[data-theme="darlington"] .copy-room-btn {
    background: rgba(172,202,178,0.3);
    border-color: #ACCAB2;
    color: #3D3F25;
    border-radius: 3px;
}
[data-theme="darlington"] .copy-room-btn:hover { background: rgba(172,202,178,0.5); }

/* Nav drawer: dark olive */
[data-theme="darlington"] .nav-drawer {
    background: linear-gradient(180deg, #3D3F25 0%, #282A16 100%);
    border-right: 1px solid rgba(233,167,82,0.18);
}
[data-theme="darlington"] .nav-close,
[data-theme="darlington"] .nav-item,
[data-theme="darlington"] .nav-theme-name { color: #C8DDD0; }
[data-theme="darlington"] .nav-item:hover { background: rgba(233,167,82,0.12); color: #E9A752; }
[data-theme="darlington"] .nav-hamburger {
    background: linear-gradient(135deg, rgba(120,129,77,0.18) 0%, rgba(120,129,77,0.07) 100%);
    border-color: rgba(120,129,77,0.3);
    border-radius: 0 4px 4px 0;
}
[data-theme="darlington"] .nav-hamburger:hover {
    background: linear-gradient(135deg, rgba(120,129,77,0.3) 0%, rgba(120,129,77,0.12) 100%);
}
[data-theme="darlington"] .nav-theme-section { border-top-color: rgba(233,167,82,0.18); }

/* Stats screen */
[data-theme="darlington"] .stats-screen,
[data-theme="darlington"] .profile-screen { background: #FAF2E4; color: #3D3F25; }
[data-theme="darlington"] .stats-screen h1,
[data-theme="darlington"] .stats-screen h2,
[data-theme="darlington"] .stats-screen p,
[data-theme="darlington"] .stats-empty,
[data-theme="darlington"] .stats-pending,
[data-theme="darlington"] .stat-label { color: #3D3F25; }
[data-theme="darlington"] .stats-summary,
[data-theme="darlington"] .stats-ai-record,
[data-theme="darlington"] .stats-ai-table { background: #C8DDD0; }
[data-theme="darlington"] .stats-ai-table th,
[data-theme="darlington"] .stats-opponents th {
    background: rgba(120,129,77,0.12);
    color: #3D3F25;
}
[data-theme="darlington"] .stats-ai-table td,
[data-theme="darlington"] .stats-opponents td { color: #3D3F25; }
[data-theme="darlington"] .stats-ai-table tr:not(:last-child) td,
[data-theme="darlington"] .stats-opponents tr:not(:last-child) td { border-bottom-color: rgba(61,63,37,0.08); }
[data-theme="darlington"] .stats-opponents table { background: #C8DDD0; }

/* Modals */
[data-theme="darlington"] .modal-content,
[data-theme="darlington"] #message-box,
[data-theme="darlington"] #play-again-box.message-box-style,
[data-theme="darlington"] #waiting-other-player-box.message-box-style,
[data-theme="darlington"] #still-playing-box.message-box-style {
    background: #FAF2E4;
    border: 1px solid rgba(61,63,37,0.1);
    box-shadow: 0 8px 40px rgba(61,63,37,0.1);
    border-radius: 6px;
}
[data-theme="darlington"] .lobby-modal-content {
    background: #FAF2E4;
    border: 1px solid rgba(61,63,37,0.1);
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(61,63,37,0.1);
}
[data-theme="darlington"] .lobby-modal-content h2 { color: #3D3F25; }
[data-theme="darlington"] .lobby-modal-content input {
    background: #FAF2E4;
    color: #3D3F25;
    border: 2px solid rgba(120,129,77,0.25);
    border-radius: 3px;
}
[data-theme="darlington"] .lobby-modal-content input::placeholder { color: rgba(61,63,37,0.35); }
[data-theme="darlington"] .lobby-modal-content input:focus { border-color: #D44720; }
[data-theme="darlington"] .lobby-modal-content .close-btn,
[data-theme="darlington"] .modal-content .close-btn { color: #3D3F25; opacity: 0.6; }
[data-theme="darlington"] .lobby-modal-content .close-btn:hover,
[data-theme="darlington"] .modal-content .close-btn:hover { opacity: 1; }

/* Drop targets: beeswax amber glow */
[data-theme="darlington"] .valid-drop-target {
    border: 3px solid #E9A752 !important;
    background: rgba(233,167,82,0.1) !important;
    box-shadow: 0 0 14px rgba(233,167,82,0.5) !important;
}
[data-theme="darlington"] .drag-over {
    background: rgba(233,167,82,0.18) !important;
    border-color: #F0BB78 !important;
    box-shadow: 0 0 22px rgba(233,167,82,0.65) !important;
}
[data-theme="darlington"] .center-pile.valid-target {
    border-color: #E9A752;
    box-shadow: 0 0 12px rgba(233,167,82,0.45);
}
[data-theme="darlington"] .discard-pile.valid-target {
    border: 2px solid #E9A752;
    box-shadow: 0 0 10px rgba(233,167,82,0.4);
}

/* Selected card: grenadine ring */
[data-theme="darlington"] .card.selected {
    box-shadow: 0 0 0 3px #D44720, 0 8px 20px rgba(61,63,37,0.14);
}

/* Spinners */
[data-theme="darlington"] .auth-spinner,
[data-theme="darlington"] .stats-spinner {
    border-color: rgba(233,167,82,0.2);
    border-top-color: #E9A752;
}

/* Corner rounding */
[data-theme="darlington"] .action-btn          { border-radius: 4px; }
[data-theme="darlington"] .secondary-btn       { border-radius: 4px; }
[data-theme="darlington"] .modal-content,
[data-theme="darlington"] #message-box,
[data-theme="darlington"] #play-again-box.message-box-style,
[data-theme="darlington"] #waiting-other-player-box.message-box-style,
[data-theme="darlington"] #still-playing-box.message-box-style { border-radius: 6px; }
[data-theme="darlington"] .lobby-section,
[data-theme="darlington"] .lobby-multiplayer   { border-radius: 4px; }
[data-theme="darlington"] .lobby-section input,
[data-theme="darlington"] .auth-content input[type="text"] { border-radius: 3px; }
[data-theme="darlington"] .room-info           { border-radius: 4px; }
[data-theme="darlington"] .room-details        { border-radius: 3px; }
[data-theme="darlington"] .stats-summary,
[data-theme="darlington"] .stats-ai-record,
[data-theme="darlington"] .stats-ai-table,
[data-theme="darlington"] .stats-opponents table { border-radius: 4px; }
[data-theme="darlington"] .card                { border-radius: 4px; }

/* Swatch: grenadine to mint */
.theme-swatch[data-theme="darlington"] { background: linear-gradient(135deg, #D44720 0%, #ACCAB2 100%); }

/* ========================================
   SUNDANCE THEME
   Palette: #9D9A55 barley corn olive · #C6BD56 sundance yellow-green
            #FDAE4F texas rose amber · #F58232 jaffa orange
   White background, sun-drenched and crisp
   ======================================== */
[data-theme="sundance"] {
    --felt-dark: #3A3820;
    --felt-light: #9D9A55;
    --felt-glow: #3A3820;
    --gold: #FDAE4F;
    --gold-light: #FEC476;
    --gold-dark: #E08A20;
    --cream: #3A3820;
    --card-shadow: rgba(58,56,32,0.12);
    --red-suit: #C05A10;
    --black-suit: #3A3820;
    --accent-purple: #C6BD56;
    --surface-dark: #3A3820;
    --surface-mid: #D9D480;
    --surface-light: #FFFFFF;
    --btn-text: #FFFFFF;
    --font-primary: 'BoldPixels', sans-serif;
    --font-card: 'Jersey 25', sans-serif;
}

[data-theme="sundance"] body {
    background: #FFFFFF;
    color: #3A3820;
    font-weight: 500;
    letter-spacing: 0.01em;
}
[data-theme="sundance"] body::before {
    background-image:
        radial-gradient(ellipse at 85% 5%, rgba(245,130,50,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 5% 92%, rgba(198,189,86,0.1) 0%, transparent 50%);
    opacity: 1;
}
[data-theme="sundance"] button,
[data-theme="sundance"] input { font-weight: 500; letter-spacing: 0.01em; }

/* Headings */
[data-theme="sundance"] h1 { text-shadow: none; color: #3A3820; }
[data-theme="sundance"] .lobby-content h1,
[data-theme="sundance"] #auth-content h1,
[data-theme="sundance"] #game-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}
[data-theme="sundance"] #game-header h1 {
    color: #F58232;
    -webkit-text-stroke: 0;
    text-shadow: none;
}
[data-theme="sundance"] #choose-username-screen h1,
[data-theme="sundance"] .stats-screen h1 {
    font-family: var(--font-primary);
    font-weight: 700;
}
[data-theme="sundance"] h2 { font-weight: 700; color: #3A3820; }

/* Labels */
[data-theme="sundance"] .player-label,
[data-theme="sundance"] .hand-label,
[data-theme="sundance"] .pile-label,
[data-theme="sundance"] .pile-count {
    font-weight: 600;
    color: #3A3820;
    font-size: 0.72rem;
    white-space: nowrap;
    padding: 4px 10px;
}
[data-theme="sundance"] #turn-indicator {
    background: #F58232;
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 4px;
}
[data-theme="sundance"] #turn-indicator.computer-turn {
    background: #9D9A55;
    color: #FFFFFF;
}

/* Goal pile ring: jaffa */
[data-theme="sundance"] .goal-pile {
    box-shadow: 0 0 0 3px #F58232, 0 4px 12px var(--card-shadow);
}

/* Modal/box headings */
[data-theme="sundance"] .lobby-section h2,
[data-theme="sundance"] .lobby-modal-content h2,
[data-theme="sundance"] .modal-content h2,
[data-theme="sundance"] #message-title,
[data-theme="sundance"] #play-again-title,
[data-theme="sundance"] #waiting-other-player-box h2,
[data-theme="sundance"] #still-playing-box h2 { color: #3A3820; }

/* Screens */
[data-theme="sundance"] #lobby-screen { background: #C6BD56; }
[data-theme="sundance"] #auth-screen,
[data-theme="sundance"] #choose-username-screen { background: #FFFFFF; }
[data-theme="sundance"] .lobby-content .subtitle,
[data-theme="sundance"] .auth-content .subtitle { color: #3A3820; opacity: 0.55; }
[data-theme="sundance"] .auth-hint { color: #3A3820; opacity: 0.65; }

/* Buttons: jaffa orange */
[data-theme="sundance"] .action-btn {
    background: #F58232;
    color: #FFFFFF;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
[data-theme="sundance"] .action-btn:hover:not(:disabled) { background: #D06A1C; }
[data-theme="sundance"] .action-btn:disabled { background: #F58232; opacity: 0.35; }
[data-theme="sundance"] .secondary-btn {
    color: #F58232;
    border-color: #F58232;
    background: transparent;
    border-radius: 4px;
}
[data-theme="sundance"] .secondary-btn:hover { background: rgba(245,130,50,0.08); }

/* Card backs: barley corn olive with texas rose star */
[data-theme="sundance"] .card.face-down {
    background: linear-gradient(145deg, #9D9A55 0%, #7A7835 100%);
    border: 2px solid rgba(253,174,79,0.4);
    box-shadow: inset 0 0 0 1px rgba(253,174,79,0.15), 0 2px 8px rgba(58,56,32,0.18);
}
[data-theme="sundance"] .card.face-down::after {
    content: '✦';
    color: rgba(253,174,79,0.9);
    font-size: 1.3rem;
}
[data-theme="sundance"] #draw-pile {
    background: linear-gradient(145deg, #9D9A55 0%, #7A7835 100%);
    border: 2px solid rgba(253,174,79,0.4);
}

/* Joker & king-wild */
[data-theme="sundance"] .card.joker {
    background: linear-gradient(135deg, #FDAE4F 0%, #C6BD56 100%);
    color: #3A3820;
    text-shadow: none;
}
[data-theme="sundance"] .card.king-wild {
    background: linear-gradient(135deg, #FDAE4F 0%, #F58232 100%);
    border: 1px solid #000;
    color: #FFFFFF;
}

/* Center area: light sundance panel */
[data-theme="sundance"] #center-area {
    background: #EEEB9A;
    border: 1px solid rgba(58,56,32,0.08);
    box-shadow: 0 2px 12px rgba(58,56,32,0.05);
}
[data-theme="sundance"] .center-pile {
    background: #FFFFFF;
    border: 2px solid rgba(58,56,32,0.1);
}
[data-theme="sundance"] .card-pile.empty {
    border: 2px dashed rgba(157,154,85,0.3);
    background: rgba(157,154,85,0.04);
}

/* Input panels */
[data-theme="sundance"] .lobby-section {
    background: #EEEB9A;
    border: 1px solid rgba(58,56,32,0.08);
    border-radius: 4px;
}
[data-theme="sundance"] .lobby-section input,
[data-theme="sundance"] .auth-content input[type="text"] {
    background: #FFFFFF;
    color: #3A3820;
    border: 2px solid rgba(157,154,85,0.3);
    border-radius: 3px;
}
[data-theme="sundance"] .lobby-section input::placeholder,
[data-theme="sundance"] .auth-content input::placeholder { color: rgba(58,56,32,0.35); }
[data-theme="sundance"] .lobby-section input:focus,
[data-theme="sundance"] .auth-content input:focus { border-color: #F58232; }

/* Room info */
[data-theme="sundance"] .room-info { background: rgba(253,174,79,0.2); border-color: #FDAE4F; }
[data-theme="sundance"] .room-details { background: rgba(253,174,79,0.1); }
[data-theme="sundance"] .copy-room-btn {
    background: rgba(198,189,86,0.25);
    border-color: #C6BD56;
    color: #3A3820;
    border-radius: 3px;
}
[data-theme="sundance"] .copy-room-btn:hover { background: rgba(198,189,86,0.45); }

/* Nav drawer: dark olive */
[data-theme="sundance"] .nav-drawer {
    background: linear-gradient(180deg, #3A3820 0%, #262510 100%);
    border-right: 1px solid rgba(253,174,79,0.2);
}
[data-theme="sundance"] .nav-close,
[data-theme="sundance"] .nav-item,
[data-theme="sundance"] .nav-theme-name { color: #F0EADC; }
[data-theme="sundance"] .nav-item:hover { background: rgba(253,174,79,0.12); color: #F0EADC; }
[data-theme="sundance"] .nav-hamburger {
    background: linear-gradient(135deg, rgba(157,154,85,0.18) 0%, rgba(157,154,85,0.07) 100%);
    border-color: rgba(157,154,85,0.3);
    border-radius: 0 4px 4px 0;
}
[data-theme="sundance"] .nav-hamburger:hover {
    background: linear-gradient(135deg, rgba(157,154,85,0.3) 0%, rgba(157,154,85,0.14) 100%);
}
[data-theme="sundance"] .nav-theme-section { border-top-color: rgba(253,174,79,0.18); }

/* Stats screen */
[data-theme="sundance"] .stats-screen,
[data-theme="sundance"] .profile-screen { background: #FFFFFF; color: #3A3820; }
[data-theme="sundance"] .stats-screen h1,
[data-theme="sundance"] .stats-screen h2,
[data-theme="sundance"] .stats-screen p,
[data-theme="sundance"] .stats-empty,
[data-theme="sundance"] .stats-pending,
[data-theme="sundance"] .stat-label { color: #3A3820; }
[data-theme="sundance"] .stats-summary,
[data-theme="sundance"] .stats-ai-record,
[data-theme="sundance"] .stats-ai-table { background: #EEEB9A; }
[data-theme="sundance"] .stats-ai-table th,
[data-theme="sundance"] .stats-opponents th {
    background: rgba(157,154,85,0.15);
    color: #3A3820;
}
[data-theme="sundance"] .stats-ai-table td,
[data-theme="sundance"] .stats-opponents td { color: #3A3820; }
[data-theme="sundance"] .stats-ai-table tr:not(:last-child) td,
[data-theme="sundance"] .stats-opponents tr:not(:last-child) td { border-bottom-color: rgba(58,56,32,0.08); }
[data-theme="sundance"] .stats-opponents table { background: #EEEB9A; }

/* Modals */
[data-theme="sundance"] .modal-content,
[data-theme="sundance"] #message-box,
[data-theme="sundance"] #play-again-box.message-box-style,
[data-theme="sundance"] #waiting-other-player-box.message-box-style,
[data-theme="sundance"] #still-playing-box.message-box-style {
    background: #FFFFFF;
    border: 1px solid rgba(58,56,32,0.1);
    box-shadow: 0 8px 40px rgba(58,56,32,0.1);
    border-radius: 6px;
}
[data-theme="sundance"] .lobby-modal-content {
    background: #FFFFFF;
    border: 1px solid rgba(58,56,32,0.1);
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(58,56,32,0.1);
}
[data-theme="sundance"] .lobby-modal-content h2 { color: #3A3820; }
[data-theme="sundance"] .lobby-modal-content input {
    background: #FFFFFF;
    color: #3A3820;
    border: 2px solid rgba(157,154,85,0.3);
    border-radius: 3px;
}
[data-theme="sundance"] .lobby-modal-content input::placeholder { color: rgba(58,56,32,0.35); }
[data-theme="sundance"] .lobby-modal-content input:focus { border-color: #F58232; }
[data-theme="sundance"] .lobby-modal-content .close-btn,
[data-theme="sundance"] .modal-content .close-btn { color: #3A3820; opacity: 0.6; }
[data-theme="sundance"] .lobby-modal-content .close-btn:hover,
[data-theme="sundance"] .modal-content .close-btn:hover { opacity: 1; }

/* Drop targets: texas rose amber glow */
[data-theme="sundance"] .valid-drop-target {
    border: 3px solid #FDAE4F !important;
    background: rgba(253,174,79,0.1) !important;
    box-shadow: 0 0 14px rgba(253,174,79,0.55) !important;
}
[data-theme="sundance"] .drag-over {
    background: rgba(253,174,79,0.18) !important;
    border-color: #FEC476 !important;
    box-shadow: 0 0 22px rgba(253,174,79,0.7) !important;
}
[data-theme="sundance"] .center-pile.valid-target {
    border-color: #FDAE4F;
    box-shadow: 0 0 12px rgba(253,174,79,0.5);
}
[data-theme="sundance"] .discard-pile.valid-target {
    border: 2px solid #FDAE4F;
    box-shadow: 0 0 10px rgba(253,174,79,0.45);
}

/* Selected card: jaffa ring */
[data-theme="sundance"] .card.selected {
    box-shadow: 0 0 0 3px #F58232, 0 8px 20px rgba(58,56,32,0.14);
}

/* Spinners */
[data-theme="sundance"] .auth-spinner,
[data-theme="sundance"] .stats-spinner {
    border-color: rgba(253,174,79,0.2);
    border-top-color: #FDAE4F;
}

/* Corner rounding */
[data-theme="sundance"] .action-btn          { border-radius: 4px; }
[data-theme="sundance"] .secondary-btn       { border-radius: 4px; }
[data-theme="sundance"] .modal-content,
[data-theme="sundance"] #message-box,
[data-theme="sundance"] #play-again-box.message-box-style,
[data-theme="sundance"] #waiting-other-player-box.message-box-style,
[data-theme="sundance"] #still-playing-box.message-box-style { border-radius: 6px; }
[data-theme="sundance"] .lobby-section,
[data-theme="sundance"] .lobby-multiplayer   { border-radius: 4px; }
[data-theme="sundance"] .lobby-section input,
[data-theme="sundance"] .auth-content input[type="text"] { border-radius: 3px; }
[data-theme="sundance"] .room-info           { border-radius: 4px; }
[data-theme="sundance"] .room-details        { border-radius: 3px; }
[data-theme="sundance"] .stats-summary,
[data-theme="sundance"] .stats-ai-record,
[data-theme="sundance"] .stats-ai-table,
[data-theme="sundance"] .stats-opponents table { border-radius: 4px; }
[data-theme="sundance"] .card                { border-radius: 4px; }

/* Swatch: jaffa to sundance */
.theme-swatch[data-theme="sundance"] { background: linear-gradient(135deg, #F58232 0%, #C6BD56 100%); }

/* ========================================
   VERDIGRIS THEME
   Palette: #576238 verdigris forest green · #8D844D shadow olive
            #FFD95E dandelion yellow · #F0EADC ecru white
   Dark brownish-grey backdrop — moody forest bistro
   ======================================== */
[data-theme="verdigris"] {
    --felt-dark: #3C3830;
    --felt-light: #4E4840;
    --felt-glow: #3C3830;
    --gold: #FFD95E;
    --gold-light: #FFE480;
    --gold-dark: #D4A800;
    --cream: #F0EADC;
    --card-shadow: rgba(20,18,14,0.35);
    --red-suit: #C04830;
    --black-suit: #3A3820;
    --accent-purple: #576238;
    --surface-dark: #282420;
    --surface-mid: #576238;
    --surface-light: #3C3830;
    --btn-text: #3C3830;
    --font-primary: 'BoldPixels', sans-serif;
    --font-card: 'Jersey 25', sans-serif;
}

[data-theme="verdigris"] body {
    background: #3C3830;
    color: #F0EADC;
    font-weight: 500;
    letter-spacing: 0.01em;
}
[data-theme="verdigris"] body::before {
    background-image:
        radial-gradient(ellipse at 80% 8%, rgba(255,217,94,0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(87,98,56,0.2) 0%, transparent 50%);
    opacity: 1;
}
[data-theme="verdigris"] button,
[data-theme="verdigris"] input { font-weight: 500; letter-spacing: 0.01em; }

/* Headings */
[data-theme="verdigris"] h1 { text-shadow: none; color: #F0EADC; }
[data-theme="verdigris"] .lobby-content h1,
[data-theme="verdigris"] #auth-content h1,
[data-theme="verdigris"] #game-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}
[data-theme="verdigris"] #game-header h1 {
    color: #F0EADC;
    -webkit-text-stroke: 0;
    text-shadow: none;
}
[data-theme="verdigris"] #choose-username-screen h1,
[data-theme="verdigris"] .stats-screen h1 {
    font-family: var(--font-primary);
    font-weight: 700;
}
[data-theme="verdigris"] h2 { font-weight: 700; color: #F0EADC; }

/* Labels */
[data-theme="verdigris"] .player-label,
[data-theme="verdigris"] .hand-label,
[data-theme="verdigris"] .pile-label,
[data-theme="verdigris"] .pile-count {
    font-weight: 600;
    color: #F0EADC;
    font-size: 0.72rem;
    white-space: nowrap;
    padding: 4px 10px;
}
[data-theme="verdigris"] #turn-indicator {
    background: #FFD95E;
    color: #3C3830;
    font-weight: 600;
    border-radius: 4px;
}
[data-theme="verdigris"] #turn-indicator.computer-turn {
    background: #8D844D;
    color: #F0EADC;
}

/* Goal pile ring: dandelion */
[data-theme="verdigris"] .goal-pile {
    box-shadow: 0 0 0 3px #FFD95E, 0 4px 12px var(--card-shadow);
}

/* Modal/box headings */
[data-theme="verdigris"] .lobby-section h2,
[data-theme="verdigris"] .lobby-modal-content h2,
[data-theme="verdigris"] .modal-content h2,
[data-theme="verdigris"] #message-title,
[data-theme="verdigris"] #play-again-title,
[data-theme="verdigris"] #waiting-other-player-box h2,
[data-theme="verdigris"] #still-playing-box h2 { color: #F0EADC; }

/* Screens */
[data-theme="verdigris"] #lobby-screen { background: #576238; }
[data-theme="verdigris"] #auth-screen,
[data-theme="verdigris"] #choose-username-screen { background: #3C3830; }
[data-theme="verdigris"] .lobby-content .subtitle,
[data-theme="verdigris"] .auth-content .subtitle { color: #F0EADC; opacity: 0.55; }
[data-theme="verdigris"] .auth-hint { color: #F0EADC; opacity: 0.65; }

/* Buttons: dandelion yellow — dark text for contrast */
[data-theme="verdigris"] .action-btn {
    background: #FFD95E;
    color: #3C3830;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
[data-theme="verdigris"] .action-btn:hover:not(:disabled) { background: #E8C030; }
[data-theme="verdigris"] .action-btn:disabled { background: #FFD95E; opacity: 0.3; }
[data-theme="verdigris"] .secondary-btn {
    color: #F0EADC;
    border-color: #FFD95E;
    background: transparent;
    border-radius: 4px;
}
[data-theme="verdigris"] .secondary-btn:hover { background: rgba(255,217,94,0.1); }

/* Card backs: verdigris with dandelion star */
[data-theme="verdigris"] .card.face-down {
    background: linear-gradient(145deg, #576238 0%, #3F4828 100%);
    border: 2px solid rgba(255,217,94,0.35);
    box-shadow: inset 0 0 0 1px rgba(255,217,94,0.1), 0 2px 8px rgba(20,18,14,0.4);
}
[data-theme="verdigris"] .card.face-down::after {
    content: '✦';
    color: rgba(255,217,94,0.88);
    font-size: 1.3rem;
}
[data-theme="verdigris"] #draw-pile {
    background: linear-gradient(145deg, #576238 0%, #3F4828 100%);
    border: 2px solid rgba(255,217,94,0.35);
}

/* Joker & king-wild */
[data-theme="verdigris"] .card.joker {
    background: linear-gradient(135deg, #FFD95E 0%, #8D844D 100%);
    color: #3C3830;
    text-shadow: none;
}
[data-theme="verdigris"] .card.king-wild {
    background: linear-gradient(135deg, #FFD95E 0%, #576238 100%);
    border: 1px solid #000;
    color: #F0EADC;
}

/* Face-up cards: ecru background, dark text for readability */
[data-theme="verdigris"] .card:not(.face-down) {
    background: #F8F4EC;
    border: 1px solid rgba(58,56,32,0.12);
    color: #3A3820;
}

/* Center area: dark olive panel */
[data-theme="verdigris"] #center-area {
    background: #4A4838;
    border: 1px solid rgba(255,217,94,0.1);
    box-shadow: 0 2px 12px rgba(20,18,14,0.25);
}
[data-theme="verdigris"] .center-pile {
    background: #3C3830;
    border: 2px solid rgba(255,255,255,0.08);
}
[data-theme="verdigris"] .card-pile.empty {
    border: 2px dashed rgba(255,217,94,0.2);
    background: rgba(255,217,94,0.03);
}

/* Input panels */
[data-theme="verdigris"] .lobby-section {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,217,94,0.12);
    border-radius: 4px;
}
[data-theme="verdigris"] .lobby-section input,
[data-theme="verdigris"] .auth-content input[type="text"] {
    background: rgba(255,255,255,0.08);
    color: #F0EADC;
    border: 2px solid rgba(240,234,220,0.2);
    border-radius: 3px;
}
[data-theme="verdigris"] .lobby-section input::placeholder,
[data-theme="verdigris"] .auth-content input::placeholder { color: rgba(240,234,220,0.35); }
[data-theme="verdigris"] .lobby-section input:focus,
[data-theme="verdigris"] .auth-content input:focus { border-color: #FFD95E; }

/* Room info */
[data-theme="verdigris"] .room-info { background: rgba(255,217,94,0.1); border-color: rgba(255,217,94,0.35); }
[data-theme="verdigris"] .room-details { background: rgba(255,255,255,0.05); }
[data-theme="verdigris"] .copy-room-btn {
    background: rgba(87,98,56,0.4);
    border-color: rgba(87,98,56,0.6);
    color: #F0EADC;
    border-radius: 3px;
}
[data-theme="verdigris"] .copy-room-btn:hover { background: rgba(87,98,56,0.6); }

/* Nav drawer: deepest brownish-grey */
[data-theme="verdigris"] .nav-drawer {
    background: linear-gradient(180deg, #282420 0%, #1A1714 100%);
    border-right: 1px solid rgba(255,217,94,0.12);
}
[data-theme="verdigris"] .nav-close,
[data-theme="verdigris"] .nav-item,
[data-theme="verdigris"] .nav-theme-name { color: #C8C0A8; }
[data-theme="verdigris"] .nav-item:hover { background: rgba(255,217,94,0.1); color: #F0EADC; }
[data-theme="verdigris"] .nav-hamburger {
    background: linear-gradient(135deg, rgba(87,98,56,0.25) 0%, rgba(87,98,56,0.1) 100%);
    border-color: rgba(87,98,56,0.35);
    border-radius: 0 4px 4px 0;
}
[data-theme="verdigris"] .nav-hamburger:hover {
    background: linear-gradient(135deg, rgba(87,98,56,0.4) 0%, rgba(87,98,56,0.18) 100%);
}
[data-theme="verdigris"] .nav-theme-section { border-top-color: rgba(255,217,94,0.12); }

/* Stats screen */
[data-theme="verdigris"] .stats-screen { background: #3C3830; color: #F0EADC; }
[data-theme="verdigris"] .stats-screen h1,
[data-theme="verdigris"] .stats-screen h2,
[data-theme="verdigris"] .stats-screen p,
[data-theme="verdigris"] .stats-empty,
[data-theme="verdigris"] .stats-pending,
[data-theme="verdigris"] .stat-label { color: #F0EADC; }
[data-theme="verdigris"] .stats-summary,
[data-theme="verdigris"] .stats-ai-record,
[data-theme="verdigris"] .stats-ai-table { background: #4A4838; }
[data-theme="verdigris"] .stats-ai-table th,
[data-theme="verdigris"] .stats-opponents th {
    background: rgba(255,217,94,0.1);
    color: #F0EADC;
}
[data-theme="verdigris"] .stats-ai-table td,
[data-theme="verdigris"] .stats-opponents td { color: #F0EADC; }
[data-theme="verdigris"] .stats-ai-table tr:not(:last-child) td,
[data-theme="verdigris"] .stats-opponents tr:not(:last-child) td { border-bottom-color: rgba(240,234,220,0.08); }
[data-theme="verdigris"] .stats-opponents table { background: #4A4838; }

/* Modals */
[data-theme="verdigris"] .modal-content,
[data-theme="verdigris"] #message-box,
[data-theme="verdigris"] #play-again-box.message-box-style,
[data-theme="verdigris"] #waiting-other-player-box.message-box-style,
[data-theme="verdigris"] #still-playing-box.message-box-style {
    background: #4A4838;
    border: 1px solid rgba(255,217,94,0.14);
    box-shadow: 0 8px 40px rgba(20,18,14,0.5);
    border-radius: 6px;
    color: #F0EADC;
}
[data-theme="verdigris"] #message-box p,
[data-theme="verdigris"] #play-again-box p,
[data-theme="verdigris"] #waiting-other-player-box p,
[data-theme="verdigris"] #still-playing-box p { color: #F0EADC; }
[data-theme="verdigris"] .lobby-modal-content {
    background: #4A4838;
    border: 1px solid rgba(255,217,94,0.14);
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(20,18,14,0.5);
}
[data-theme="verdigris"] .lobby-modal-content h2 { color: #F0EADC; }
[data-theme="verdigris"] .lobby-modal-content input {
    background: rgba(255,255,255,0.08);
    color: #F0EADC;
    border: 2px solid rgba(240,234,220,0.2);
    border-radius: 3px;
}
[data-theme="verdigris"] .lobby-modal-content input::placeholder { color: rgba(240,234,220,0.35); }
[data-theme="verdigris"] .lobby-modal-content input:focus { border-color: #FFD95E; }
[data-theme="verdigris"] .lobby-modal-content .close-btn,
[data-theme="verdigris"] .modal-content .close-btn { color: #F0EADC; opacity: 0.6; }
[data-theme="verdigris"] .lobby-modal-content .close-btn:hover,
[data-theme="verdigris"] .modal-content .close-btn:hover { opacity: 1; }

/* Drop targets: dandelion glow */
[data-theme="verdigris"] .valid-drop-target {
    border: 3px solid #FFD95E !important;
    background: rgba(255,217,94,0.08) !important;
    box-shadow: 0 0 16px rgba(255,217,94,0.55) !important;
}
[data-theme="verdigris"] .drag-over {
    background: rgba(255,217,94,0.14) !important;
    border-color: #FFE480 !important;
    box-shadow: 0 0 24px rgba(255,217,94,0.7) !important;
}
[data-theme="verdigris"] .center-pile.valid-target {
    border-color: #FFD95E;
    box-shadow: 0 0 14px rgba(255,217,94,0.5);
}
[data-theme="verdigris"] .discard-pile.valid-target {
    border: 2px solid #FFD95E;
    box-shadow: 0 0 12px rgba(255,217,94,0.45);
}

/* Selected card: dandelion ring */
[data-theme="verdigris"] .card.selected {
    box-shadow: 0 0 0 3px #FFD95E, 0 8px 20px rgba(20,18,14,0.35);
}

/* Spinners */
[data-theme="verdigris"] .auth-spinner,
[data-theme="verdigris"] .stats-spinner {
    border-color: rgba(255,217,94,0.15);
    border-top-color: #FFD95E;
}

/* Corner rounding */
[data-theme="verdigris"] .action-btn          { border-radius: 4px; }
[data-theme="verdigris"] .secondary-btn       { border-radius: 4px; }
[data-theme="verdigris"] .modal-content,
[data-theme="verdigris"] #message-box,
[data-theme="verdigris"] #play-again-box.message-box-style,
[data-theme="verdigris"] #waiting-other-player-box.message-box-style,
[data-theme="verdigris"] #still-playing-box.message-box-style { border-radius: 6px; }
[data-theme="verdigris"] .lobby-section,
[data-theme="verdigris"] .lobby-multiplayer   { border-radius: 4px; }
[data-theme="verdigris"] .lobby-section input,
[data-theme="verdigris"] .auth-content input[type="text"] { border-radius: 3px; }
[data-theme="verdigris"] .room-info           { border-radius: 4px; }
[data-theme="verdigris"] .room-details        { border-radius: 3px; }
[data-theme="verdigris"] .stats-summary,
[data-theme="verdigris"] .stats-ai-record,
[data-theme="verdigris"] .stats-ai-table,
[data-theme="verdigris"] .stats-opponents table { border-radius: 4px; }
[data-theme="verdigris"] .card                { border-radius: 4px; }

/* Swatch: verdigris to dandelion */
.theme-swatch[data-theme="verdigris"] { background: linear-gradient(135deg, #576238 0%, #FFD95E 100%); }

/* ========================================
   TERRACOTTA THEME
   Palette: #5A3A33 dark terracotta · #796E54 earthy olive
            #D99985 desert coral · #E8C6B5 light peachy pink
            #F4F6F5 pale pink
   Warm blush background — Moroccan resort luxe
   ======================================== */
[data-theme="terracotta"] {
    --felt-dark: #3A2420;
    --felt-light: #5A3A33;
    --felt-glow: #3A2420;
    --gold: #D99985;
    --gold-light: #E8B8A5;
    --gold-dark: #B87560;
    --cream: #3A2420;
    --card-shadow: rgba(58,36,32,0.14);
    --red-suit: #A03020;
    --black-suit: #3A2420;
    --accent-purple: #796E54;
    --surface-dark: #3A2420;
    --surface-mid: #E8C6B5;
    --surface-light: #F0D5C8;
    --btn-text: #F4F0EC;
    --font-primary: 'BoldPixels', sans-serif;
    --font-card: 'Jersey 25', sans-serif;
}

[data-theme="terracotta"] body {
    background: #F0D5C8;
    color: #3A2420;
    font-weight: 500;
    letter-spacing: 0.01em;
}
[data-theme="terracotta"] body::before {
    background-image:
        radial-gradient(ellipse at 80% 8%, rgba(90,58,51,0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 92%, rgba(217,153,133,0.12) 0%, transparent 50%);
    opacity: 1;
}
[data-theme="terracotta"] button,
[data-theme="terracotta"] input { font-weight: 500; letter-spacing: 0.01em; }

/* Headings */
[data-theme="terracotta"] h1 { text-shadow: none; color: #3A2420; }
[data-theme="terracotta"] .lobby-content h1,
[data-theme="terracotta"] #auth-content h1,
[data-theme="terracotta"] #game-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}
[data-theme="terracotta"] #game-header h1 {
    color: #5A3A33;
    -webkit-text-stroke: 0;
    text-shadow: none;
}
[data-theme="terracotta"] #choose-username-screen h1,
[data-theme="terracotta"] .stats-screen h1 {
    font-family: var(--font-primary);
    font-weight: 700;
}
[data-theme="terracotta"] h2 { font-weight: 700; color: #3A2420; }

/* Labels */
[data-theme="terracotta"] .player-label,
[data-theme="terracotta"] .hand-label,
[data-theme="terracotta"] .pile-label,
[data-theme="terracotta"] .pile-count {
    font-weight: 600;
    color: #3A2420;
    font-size: 0.72rem;
    white-space: nowrap;
    padding: 4px 10px;
}
[data-theme="terracotta"] #turn-indicator {
    background: #5A3A33;
    color: #F4F0EC;
    font-weight: 600;
    border-radius: 4px;
}
[data-theme="terracotta"] #turn-indicator.computer-turn {
    background: #796E54;
    color: #F4F0EC;
}

/* Goal pile ring: dark terracotta */
[data-theme="terracotta"] .goal-pile {
    box-shadow: 0 0 0 3px #5A3A33, 0 4px 12px var(--card-shadow);
}

/* Modal/box headings */
[data-theme="terracotta"] .lobby-section h2,
[data-theme="terracotta"] .lobby-modal-content h2,
[data-theme="terracotta"] .modal-content h2,
[data-theme="terracotta"] #message-title,
[data-theme="terracotta"] #play-again-title,
[data-theme="terracotta"] #waiting-other-player-box h2,
[data-theme="terracotta"] #still-playing-box h2 { color: #3A2420; }

/* Screens */
[data-theme="terracotta"] #lobby-screen { background: #D99985; }
[data-theme="terracotta"] #auth-screen,
[data-theme="terracotta"] #choose-username-screen { background: #F0D5C8; }
[data-theme="terracotta"] .lobby-content .subtitle,
[data-theme="terracotta"] .auth-content .subtitle { color: #3A2420; opacity: 0.55; }
[data-theme="terracotta"] .auth-hint { color: #3A2420; opacity: 0.65; }

/* Buttons: dark terracotta */
[data-theme="terracotta"] .action-btn {
    background: #5A3A33;
    color: #F4F0EC;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
[data-theme="terracotta"] .action-btn:hover:not(:disabled) { background: #3A2420; }
[data-theme="terracotta"] .action-btn:disabled { background: #5A3A33; opacity: 0.35; }
[data-theme="terracotta"] .secondary-btn {
    color: #5A3A33;
    border-color: #5A3A33;
    background: transparent;
    border-radius: 4px;
}
[data-theme="terracotta"] .secondary-btn:hover { background: rgba(90,58,51,0.08); }

/* Card backs: dark terracotta with peachy star */
[data-theme="terracotta"] .card.face-down {
    background: linear-gradient(145deg, #5A3A33 0%, #3A2420 100%);
    border: 2px solid rgba(232,198,181,0.35);
    box-shadow: inset 0 0 0 1px rgba(232,198,181,0.12), 0 2px 8px rgba(58,36,32,0.2);
}
[data-theme="terracotta"] .card.face-down::after {
    content: '✦';
    color: rgba(232,198,181,0.88);
    font-size: 1.3rem;
}
[data-theme="terracotta"] #draw-pile {
    background: linear-gradient(145deg, #5A3A33 0%, #3A2420 100%);
    border: 2px solid rgba(232,198,181,0.35);
}

/* Joker & king-wild */
[data-theme="terracotta"] .card.joker {
    background: linear-gradient(135deg, #E8C6B5 0%, #D99985 100%);
    color: #3A2420;
    text-shadow: none;
}
[data-theme="terracotta"] .card.king-wild {
    background: linear-gradient(135deg, #E8C6B5 0%, #796E54 100%);
    border: 1px solid #000;
    color: #F4F0EC;
}

/* Center area: light peachy panel */
[data-theme="terracotta"] #center-area {
    background: #EDD0C0;
    border: 1px solid rgba(58,36,32,0.07);
    box-shadow: 0 2px 12px rgba(58,36,32,0.06);
}
[data-theme="terracotta"] .center-pile {
    background: #F8EDE8;
    border: 2px solid rgba(58,36,32,0.09);
}
[data-theme="terracotta"] .card-pile.empty {
    border: 2px dashed rgba(90,58,51,0.25);
    background: rgba(90,58,51,0.03);
}

/* Input panels */
[data-theme="terracotta"] .lobby-section {
    background: #EDD0C0;
    border: 1px solid rgba(58,36,32,0.07);
    border-radius: 4px;
}
[data-theme="terracotta"] .lobby-section input,
[data-theme="terracotta"] .auth-content input[type="text"] {
    background: #F8EDE8;
    color: #3A2420;
    border: 2px solid rgba(90,58,51,0.2);
    border-radius: 3px;
}
[data-theme="terracotta"] .lobby-section input::placeholder,
[data-theme="terracotta"] .auth-content input::placeholder { color: rgba(58,36,32,0.35); }
[data-theme="terracotta"] .lobby-section input:focus,
[data-theme="terracotta"] .auth-content input:focus { border-color: #5A3A33; }

/* Room info */
[data-theme="terracotta"] .room-info { background: rgba(217,153,133,0.2); border-color: #D99985; }
[data-theme="terracotta"] .room-details { background: rgba(232,198,181,0.2); }
[data-theme="terracotta"] .copy-room-btn {
    background: rgba(121,110,84,0.2);
    border-color: #796E54;
    color: #3A2420;
    border-radius: 3px;
}
[data-theme="terracotta"] .copy-room-btn:hover { background: rgba(121,110,84,0.35); }

/* Nav drawer: deep dark terracotta */
[data-theme="terracotta"] .nav-drawer {
    background: linear-gradient(180deg, #3A2420 0%, #261814 100%);
    border-right: 1px solid rgba(232,198,181,0.15);
}
[data-theme="terracotta"] .nav-close,
[data-theme="terracotta"] .nav-item,
[data-theme="terracotta"] .nav-theme-name { color: #E8C6B5; }
[data-theme="terracotta"] .nav-item:hover { background: rgba(217,153,133,0.15); color: #F0D5C8; }
[data-theme="terracotta"] .nav-hamburger {
    background: linear-gradient(135deg, rgba(90,58,51,0.18) 0%, rgba(90,58,51,0.07) 100%);
    border-color: rgba(90,58,51,0.3);
    border-radius: 0 4px 4px 0;
}
[data-theme="terracotta"] .nav-hamburger:hover {
    background: linear-gradient(135deg, rgba(90,58,51,0.3) 0%, rgba(90,58,51,0.12) 100%);
}
[data-theme="terracotta"] .nav-theme-section { border-top-color: rgba(232,198,181,0.15); }

/* Stats screen */
[data-theme="terracotta"] .stats-screen,
[data-theme="terracotta"] .profile-screen { background: #F0D5C8; color: #3A2420; }
[data-theme="terracotta"] .stats-screen h1,
[data-theme="terracotta"] .stats-screen h2,
[data-theme="terracotta"] .stats-screen p,
[data-theme="terracotta"] .stats-empty,
[data-theme="terracotta"] .stats-pending,
[data-theme="terracotta"] .stat-label { color: #3A2420; }
[data-theme="terracotta"] .stats-summary,
[data-theme="terracotta"] .stats-ai-record,
[data-theme="terracotta"] .stats-ai-table { background: #EDD0C0; }
[data-theme="terracotta"] .stats-ai-table th,
[data-theme="terracotta"] .stats-opponents th {
    background: rgba(90,58,51,0.1);
    color: #3A2420;
}
[data-theme="terracotta"] .stats-ai-table td,
[data-theme="terracotta"] .stats-opponents td { color: #3A2420; }
[data-theme="terracotta"] .stats-ai-table tr:not(:last-child) td,
[data-theme="terracotta"] .stats-opponents tr:not(:last-child) td { border-bottom-color: rgba(58,36,32,0.08); }
[data-theme="terracotta"] .stats-opponents table { background: #EDD0C0; }

/* Modals */
[data-theme="terracotta"] .modal-content,
[data-theme="terracotta"] #message-box,
[data-theme="terracotta"] #play-again-box.message-box-style,
[data-theme="terracotta"] #waiting-other-player-box.message-box-style,
[data-theme="terracotta"] #still-playing-box.message-box-style {
    background: #F8EDE8;
    border: 1px solid rgba(58,36,32,0.1);
    box-shadow: 0 8px 40px rgba(58,36,32,0.1);
    border-radius: 6px;
}
[data-theme="terracotta"] .lobby-modal-content {
    background: #F8EDE8;
    border: 1px solid rgba(58,36,32,0.1);
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(58,36,32,0.1);
}
[data-theme="terracotta"] .lobby-modal-content h2 { color: #3A2420; }
[data-theme="terracotta"] .lobby-modal-content input {
    background: #F8EDE8;
    color: #3A2420;
    border: 2px solid rgba(90,58,51,0.2);
    border-radius: 3px;
}
[data-theme="terracotta"] .lobby-modal-content input::placeholder { color: rgba(58,36,32,0.35); }
[data-theme="terracotta"] .lobby-modal-content input:focus { border-color: #5A3A33; }
[data-theme="terracotta"] .lobby-modal-content .close-btn,
[data-theme="terracotta"] .modal-content .close-btn { color: #3A2420; opacity: 0.6; }
[data-theme="terracotta"] .lobby-modal-content .close-btn:hover,
[data-theme="terracotta"] .modal-content .close-btn:hover { opacity: 1; }

/* Drop targets: desert coral glow */
[data-theme="terracotta"] .valid-drop-target {
    border: 3px solid #D99985 !important;
    background: rgba(217,153,133,0.12) !important;
    box-shadow: 0 0 14px rgba(217,153,133,0.5) !important;
}
[data-theme="terracotta"] .drag-over {
    background: rgba(217,153,133,0.2) !important;
    border-color: #E8B8A5 !important;
    box-shadow: 0 0 22px rgba(217,153,133,0.65) !important;
}
[data-theme="terracotta"] .center-pile.valid-target {
    border-color: #D99985;
    box-shadow: 0 0 12px rgba(217,153,133,0.45);
}
[data-theme="terracotta"] .discard-pile.valid-target {
    border: 2px solid #D99985;
    box-shadow: 0 0 10px rgba(217,153,133,0.4);
}

/* Selected card: terracotta ring */
[data-theme="terracotta"] .card.selected {
    box-shadow: 0 0 0 3px #5A3A33, 0 8px 20px rgba(58,36,32,0.14);
}

/* Spinners */
[data-theme="terracotta"] .auth-spinner,
[data-theme="terracotta"] .stats-spinner {
    border-color: rgba(217,153,133,0.2);
    border-top-color: #D99985;
}

/* Corner rounding */
[data-theme="terracotta"] .action-btn          { border-radius: 4px; }
[data-theme="terracotta"] .secondary-btn       { border-radius: 4px; }
[data-theme="terracotta"] .modal-content,
[data-theme="terracotta"] #message-box,
[data-theme="terracotta"] #play-again-box.message-box-style,
[data-theme="terracotta"] #waiting-other-player-box.message-box-style,
[data-theme="terracotta"] #still-playing-box.message-box-style { border-radius: 6px; }
[data-theme="terracotta"] .lobby-section,
[data-theme="terracotta"] .lobby-multiplayer   { border-radius: 4px; }
[data-theme="terracotta"] .lobby-section input,
[data-theme="terracotta"] .auth-content input[type="text"] { border-radius: 3px; }
[data-theme="terracotta"] .room-info           { border-radius: 4px; }
[data-theme="terracotta"] .room-details        { border-radius: 3px; }
[data-theme="terracotta"] .stats-summary,
[data-theme="terracotta"] .stats-ai-record,
[data-theme="terracotta"] .stats-ai-table,
[data-theme="terracotta"] .stats-opponents table { border-radius: 4px; }
[data-theme="terracotta"] .card                { border-radius: 4px; }

/* Swatch: dark terracotta to desert coral */
.theme-swatch[data-theme="terracotta"] { background: linear-gradient(135deg, #5A3A33 0%, #D99985 100%); }

/* ============================================================
   PLAYER AVATAR CHIPS (in-game, next to name labels)
   ============================================================ */
.player-avatar-chip {
    width: 38.4px;
    height: 38.4px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-border, rgba(255,255,255,0.25));
    background: var(--bg-secondary, #222);
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.player-name-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px;
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #aaa);
}

/* ============================================================
   PROFILE SCREEN
   ============================================================ */
.profile-screen {
    position: fixed;
    inset: 0;
    z-index: 3150;
    background: linear-gradient(145deg, var(--felt-dark) 0%, var(--surface-dark) 100%);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    color: var(--cream);
}
.profile-screen.hidden {
    display: none !important;
}

.profile-content {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px 40px;
    box-sizing: border-box;
}

.profile-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px 0 16px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1));
    margin-bottom: 28px;
}

.profile-header h1 {
    margin: 0;
    font-size: 1.6rem;
    color: var(--cream);
    text-align: center;
}


/* Profile card */
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Avatar section */
.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.profile-avatar-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
}

.profile-avatar-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-color, #7c6af7);
    background: var(--bg-secondary, #222);
    display: block;
}

.profile-edit-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-color, #7c6af7);
    border: 2px solid var(--bg-primary, #1a1a2e);
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s;
    line-height: 1;
}
.profile-edit-badge:hover {
    transform: scale(1.1);
    background: var(--accent-hover, #6355d4);
}

/* Info rows */
.profile-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 12px;
    overflow: hidden;
}

.profile-info-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.07));
}
.profile-info-row:last-child {
    border-bottom: none;
}

.profile-info-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cream);
    opacity: 0.65;
    min-width: 80px;
    flex-shrink: 0;
}

.profile-info-value {
    font-size: 1rem;
    color: var(--cream);
    word-break: break-all;
}

/* Avatar Picker */
.profile-avatar-picker {
    margin-top: 28px;
    width: 100%;
}

.profile-picker-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cream);
    margin: 0 0 16px;
}

.profile-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
}

.avatar-pick-btn {
    background: none;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    padding: 4px;
    transition: border-color 0.15s, transform 0.15s;
    aspect-ratio: 1;
    overflow: hidden;
}
.avatar-pick-btn:hover {
    border-color: var(--accent-color, #7c6af7);
    transform: scale(1.05);
}
.avatar-pick-btn.selected {
    border-color: var(--accent-color, #7c6af7);
    box-shadow: 0 0 0 2px var(--accent-color, #7c6af7);
}

.avatar-pick-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    pointer-events: none;
}

.profile-delete-wrap {
    margin-top: var(--space-lg);
    text-align: center;
}

.profile-delete-link {
    display: inline-block;
    margin: 0;
    background: none;
    border: none;
    padding: 0;
    color: var(--cream, #f5f0dc);
    opacity: 0.7;
    font-family: var(--font-button);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    -webkit-font-smoothing: auto;
}

.profile-delete-link:hover {
    opacity: 0.7;
}

.profile-delete-link:disabled {
    opacity: 0.25;
    cursor: default;
}

.profile-delete-btn {
    display: block;
    width: 100%;
    margin-top: var(--space-xl);
    background: #c0392b;
    color: #fff;
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 25px;
    font-family: var(--font-button);
    font-size: 0.85rem;
    font-weight: 400;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: none;
}

.profile-delete-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.profile-delete-confirm {
    margin-top: var(--space-md);
    padding: var(--space-md);
    text-align: center;
}

.profile-delete-confirm p {
    font-family: var(--font-button);
    font-size: 0.9rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cream, #f5f0dc);
    margin: 0 0 var(--space-md);
}

.profile-delete-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-delete-actions .profile-delete-btn,
.profile-delete-actions .secondary-btn {
    margin-top: 0;
    width: 100%;
}

/* ========================================
   PALETTE THEMES
   ======================================== */
/* --- Twilight Thistle ---
   Palette: lavender blush · thistle · lilac ash · dusty mauve · space indigo
*/
[data-theme="twilight-thistle"] {
    --felt-dark: #192A51;
    --felt-light: #967AA1;
    --felt-glow: #192A51;
    --gold: #967AA1;
    --gold-light: #AAA1C8;
    --gold-dark: #192A51;
    --cream: #192A51;
    --card-shadow: rgba(0, 0, 0, 0.28);
    --red-suit: #967AA1;
    --black-suit: #192A51;
    --accent-purple: #967AA1;
    --surface-dark: #192A51;
    --surface-mid: #D5C6E0;
    --surface-light: #F5E6E8;
    --btn-text: #F5E6E8;
    --pack-auth: #F5E6E8;
    --pack-lobby: #D5C6E0;
    --pack-heading: #192A51;
    --pack-text: #192A51;
    --pack-btn: #192A51;
    --pack-btn-hover: #967AA1;
    --pack-center: #D5C6E0;
    --pack-card-a: #192A51;
    --pack-card-b: #967AA1;
    --pack-nav: #192A51;
    --pack-nav-text: #F5E6E8;
    --pack-turn: #192A51;
    --pack-turn-text: #F5E6E8;
    --pack-computer: #967AA1;
    --pack-computer-text: #F5E6E8;
    --pack-header: #192A51;
    --pack-extras: #AAA1C8;
}
.theme-swatch[data-theme="twilight-thistle"] { background: linear-gradient(135deg, #D5C6E0 0%, #192A51 100%); }
/* --- Deep Current ---
   Palette: ink black · dark teal · tropical teal · electric aqua · sky blue
*/
[data-theme="deep-current"] {
    --felt-dark: #001011;
    --felt-light: #093A3E;
    --felt-glow: #001011;
    --gold: #3AAFB9;
    --gold-light: #64E9EE;
    --gold-dark: #3AAFB9;
    --cream: #97C8EB;
    --card-shadow: rgba(0, 0, 0, 0.28);
    --red-suit: #3AAFB9;
    --black-suit: #001011;
    --accent-purple: #093A3E;
    --surface-dark: #062A2D;
    --surface-mid: #062A2D;
    --surface-light: #093A3E;
    --btn-text: #001011;
    --pack-auth: #001011;
    --pack-lobby: #093A3E;
    --pack-heading: #64E9EE;
    --pack-text: #97C8EB;
    --pack-btn: #3AAFB9;
    --pack-btn-hover: #64E9EE;
    --pack-center: #062A2D;
    --pack-card-a: #001011;
    --pack-card-b: #093A3E;
    --pack-nav: #062A2D;
    --pack-nav-text: #97C8EB;
    --pack-turn: #64E9EE;
    --pack-turn-text: #001011;
    --pack-computer: #093A3E;
    --pack-computer-text: #97C8EB;
    --pack-header: #64E9EE;
    --pack-extras: none;
}
.theme-swatch[data-theme="deep-current"] { background: linear-gradient(135deg, #64E9EE 0%, #001011 100%); }

/* Shared chrome for palette themes */
html[data-theme-pack="palette"] {
    --text-primary: var(--pack-text);
    --text-secondary: color-mix(in srgb, var(--pack-text) 70%, transparent);
}

html[data-theme-pack="palette"] body {
    background: var(--pack-auth);
    color: var(--pack-text);
    font-weight: 500;
    letter-spacing: 0.01em;
}

html[data-theme-pack="palette"] body::before {
    background-image:
        radial-gradient(circle at 75% 10%, color-mix(in srgb, var(--gold) 8%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 15% 85%, color-mix(in srgb, var(--pack-btn) 7%, transparent) 0%, transparent 50%);
}

html[data-theme-pack="palette"] button,
html[data-theme-pack="palette"] input {
    font-weight: 500; letter-spacing: 0.01em;
}

html[data-theme-pack="palette"] h1 {
    text-shadow: none; color: var(--pack-heading);
}

html[data-theme-pack="palette"] .lobby-content h1,
html[data-theme-pack="palette"] #auth-content h1,
html[data-theme-pack="palette"] #game-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}

html[data-theme-pack="palette"] #game-header h1 {
    color: var(--pack-header);
}

html[data-theme-pack="palette"] #choose-username-screen h1,
html[data-theme-pack="palette"] .stats-screen h1 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--pack-heading);
}

html[data-theme-pack="palette"] h2 {
    font-weight: 700; color: var(--pack-heading);
}

html[data-theme-pack="palette"] .player-label,
html[data-theme-pack="palette"] .hand-label,
html[data-theme-pack="palette"] .pile-label,
html[data-theme-pack="palette"] .pile-count {
    color: var(--pack-text);
}

html[data-theme-pack="palette"] #turn-indicator {
    background: var(--pack-turn);
    color: var(--pack-turn-text);
}

html[data-theme-pack="palette"] #turn-indicator.computer-turn {
    background: var(--pack-computer);
    color: var(--pack-computer-text);
}

html[data-theme-pack="palette"] .goal-pile {
    box-shadow: 0 0 0 3px var(--gold-dark);
}

html[data-theme-pack="palette"] .waiting-message {
    color: var(--pack-btn);
}

html[data-theme-pack="palette"] .lobby-section h2,
html[data-theme-pack="palette"] .lobby-modal-content h2,
html[data-theme-pack="palette"] .modal-content h2,
html[data-theme-pack="palette"] #message-title,
html[data-theme-pack="palette"] #play-again-title,
html[data-theme-pack="palette"] #waiting-other-player-box h2,
html[data-theme-pack="palette"] #still-playing-box h2 {
    color: var(--pack-heading);
}

html[data-theme-pack="palette"] #lobby-screen {
    background: var(--pack-lobby);
}

html[data-theme-pack="palette"] #auth-screen,
html[data-theme-pack="palette"] #choose-username-screen {
    background: var(--pack-auth);
}

html[data-theme-pack="palette"] .lobby-content .subtitle,
html[data-theme-pack="palette"] .auth-content .subtitle {
    color: var(--pack-text); opacity: 0.82;
}

html[data-theme-pack="palette"] .auth-hint {
    color: var(--pack-text); opacity: 0.88;
}

html[data-theme-pack="palette"] .action-btn {
    background: var(--pack-btn);
    color: var(--btn-text);
    border-radius: 4px;
}

html[data-theme-pack="palette"] .action-btn:hover:not(:disabled) {
    background: var(--pack-btn-hover);
}

html[data-theme-pack="palette"] .action-btn:disabled {
    background: var(--pack-btn); opacity: 0.35;
}

html[data-theme-pack="palette"] .secondary-btn {
    background: transparent;
    color: var(--pack-text);
    border: 2px solid color-mix(in srgb, var(--pack-text) 22%, transparent);
    border-radius: 4px;
}

html[data-theme-pack="palette"] .secondary-btn:hover {
    background: color-mix(in srgb, var(--pack-btn) 10%, transparent);
}

html[data-theme-pack="palette"] .card.face-down {
    background: linear-gradient(145deg, var(--pack-card-a) 0%, var(--pack-card-b) 100%);
}

html[data-theme-pack="palette"] .card.face-down::after {
    color: var(--gold-light);
    opacity: 0.55;
}

html[data-theme-pack="palette"] #draw-pile {
    background: linear-gradient(145deg, var(--pack-card-a) 0%, var(--pack-card-b) 100%);
}

html[data-theme-pack="palette"] .card.joker {
    background: var(--pack-center);
    color: var(--pack-heading);
}

html[data-theme-pack="palette"] .card.king-wild {
    background: var(--pack-center);
    color: var(--pack-heading);
}

html[data-theme-pack="palette"] #center-area {
    background: var(--pack-center);
}

html[data-theme-pack="palette"] .center-pile {
    background: color-mix(in srgb, var(--pack-text) 6%, transparent);
}

html[data-theme-pack="palette"] .card-pile.empty {
    border-color: color-mix(in srgb, var(--gold) 30%, transparent);
    background: color-mix(in srgb, var(--gold) 4%, transparent);
}

html[data-theme-pack="palette"] .lobby-section {
    background: var(--surface-mid);
    border-color: color-mix(in srgb, var(--pack-text) 12%, transparent);
    border-radius: 4px;
}

html[data-theme-pack="palette"] .lobby-section input,
html[data-theme-pack="palette"] .auth-content input[type="text"] {
    background: var(--pack-auth);
    color: var(--pack-text);
    border: 2px solid color-mix(in srgb, var(--pack-text) 22%, transparent);
    border-radius: 3px;
}

html[data-theme-pack="palette"] .lobby-section input::placeholder,
html[data-theme-pack="palette"] .auth-content input::placeholder {
    color: color-mix(in srgb, var(--pack-text) 35%, transparent);
}

html[data-theme-pack="palette"] .lobby-section input:focus,
html[data-theme-pack="palette"] .auth-content input:focus {
    border-color: var(--pack-btn);
}

html[data-theme-pack="palette"] .room-info {
    background: color-mix(in srgb, var(--pack-btn) 18%, transparent);
    border-color: var(--pack-btn);
    border-radius: 4px;
}

html[data-theme-pack="palette"] .room-details {
    background: color-mix(in srgb, var(--pack-text) 6%, transparent); border-radius: 3px;
}

html[data-theme-pack="palette"] .copy-room-btn {
    background: color-mix(in srgb, var(--pack-btn) 16%, transparent);
    color: var(--pack-text);
}

html[data-theme-pack="palette"] .copy-room-btn:hover {
    background: color-mix(in srgb, var(--pack-btn) 28%, transparent);
}

html[data-theme-pack="palette"] .nav-drawer {
    background: linear-gradient(180deg, var(--pack-nav) 0%, var(--surface-dark) 100%);
    border-right-color: color-mix(in srgb, var(--gold) 22%, transparent);
}

html[data-theme-pack="palette"] .nav-close,
html[data-theme-pack="palette"] .nav-item,
html[data-theme-pack="palette"] .nav-theme-name,
html[data-theme-pack="palette"] .nav-profile-name,
html[data-theme-pack="palette"] .nav-now-playing-skip {
    color: var(--pack-nav-text);
}

html[data-theme-pack="palette"] .nav-item:hover {
    background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--pack-nav-text);
}

html[data-theme-pack="palette"] .nav-hamburger {
    color: var(--pack-header);
    background: color-mix(in srgb, var(--gold) 22%, transparent);
}

html[data-theme-pack="palette"] .nav-hamburger:hover {
    background: color-mix(in srgb, var(--gold) 32%, transparent);
}

html[data-theme-pack="palette"] .nav-theme-section {
    border-top-color: color-mix(in srgb, var(--gold) 18%, transparent);
}

html[data-theme-pack="palette"] .stats-screen,
html[data-theme-pack="palette"] .profile-screen {
    background: var(--pack-auth); color: var(--pack-text);
}

html[data-theme-pack="palette"] .stats-screen h1,
html[data-theme-pack="palette"] .stats-screen h2,
html[data-theme-pack="palette"] .stats-screen p,
html[data-theme-pack="palette"] .stats-empty,
html[data-theme-pack="palette"] .stats-pending,
html[data-theme-pack="palette"] .stat-label,
html[data-theme-pack="palette"] .profile-header h1,
html[data-theme-pack="palette"] .profile-info-label,
html[data-theme-pack="palette"] .profile-info-value,
html[data-theme-pack="palette"] .profile-picker-title,
html[data-theme-pack="palette"] .profile-delete-link {
    color: var(--pack-text);
}

html[data-theme-pack="palette"] .stats-summary,
html[data-theme-pack="palette"] .stats-ai-record,
html[data-theme-pack="palette"] .stats-ai-table,
html[data-theme-pack="palette"] .stats-opponents table {
    background: var(--surface-mid);
    border-radius: 4px;
}

html[data-theme-pack="palette"] .stats-ai-table th,
html[data-theme-pack="palette"] .stats-opponents th {
    color: var(--pack-heading);
}

html[data-theme-pack="palette"] .stats-ai-table td,
html[data-theme-pack="palette"] .stats-opponents td {
    color: var(--pack-text);
}

html[data-theme-pack="palette"] .stats-ai-table tr:not(:last-child) td,
html[data-theme-pack="palette"] .stats-opponents tr:not(:last-child) td {
    border-bottom-color: color-mix(in srgb, var(--pack-text) 10%, transparent);
}

html[data-theme-pack="palette"] .modal-content,
html[data-theme-pack="palette"] #message-box,
html[data-theme-pack="palette"] #play-again-box.message-box-style,
html[data-theme-pack="palette"] #waiting-other-player-box.message-box-style,
html[data-theme-pack="palette"] #still-playing-box.message-box-style {
    background: var(--surface-mid);
    color: var(--pack-text);
    border-radius: 6px;
}

html[data-theme-pack="palette"] .lobby-modal-content {
    background: var(--surface-mid);
    color: var(--pack-text);
    border-radius: 6px;
}

html[data-theme-pack="palette"] .lobby-modal-content h2 {
    color: var(--pack-heading);
}

html[data-theme-pack="palette"] .lobby-modal-content input {
    background: var(--pack-auth);
    color: var(--pack-text);
    border: 2px solid color-mix(in srgb, var(--pack-text) 22%, transparent);
    border-radius: 3px;
}

html[data-theme-pack="palette"] .lobby-modal-content input::placeholder {
    color: color-mix(in srgb, var(--pack-text) 35%, transparent);
}

html[data-theme-pack="palette"] .lobby-modal-content input:focus {
    border-color: var(--pack-btn);
}

html[data-theme-pack="palette"] .lobby-modal-content .close-btn,
html[data-theme-pack="palette"] .modal-content .close-btn {
    color: var(--pack-text); opacity: 0.6;
}

html[data-theme-pack="palette"] .lobby-modal-content .close-btn:hover,
html[data-theme-pack="palette"] .modal-content .close-btn:hover {
    opacity: 1;
}

html[data-theme-pack="palette"] .valid-drop-target {
    border: 3px solid var(--gold) !important;
    background: color-mix(in srgb, var(--gold) 12%, transparent) !important;
    box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 45%, transparent) !important;
}

html[data-theme-pack="palette"] .drag-over {
    background: color-mix(in srgb, var(--gold) 20%, transparent) !important;
    border-color: var(--gold-light) !important;
}

html[data-theme-pack="palette"] .center-pile.valid-target {
    border-color: var(--gold);
    box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 40%, transparent);
}

html[data-theme-pack="palette"] .discard-pile.valid-target {
    border: 2px solid var(--gold);
    box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 35%, transparent);
}

html[data-theme-pack="palette"] .card.selected {
    box-shadow: 0 0 0 3px var(--gold), 0 8px 20px rgba(0,0,0,0.18);
}

html[data-theme-pack="palette"] .auth-spinner,
html[data-theme-pack="palette"] .stats-spinner {
    border-color: color-mix(in srgb, var(--gold) 20%, transparent);
    border-top-color: var(--gold);
}

html[data-theme-pack="palette"] .card {
    border-radius: 4px;
}

html[data-theme-pack="palette"] .lobby-multiplayer {
    border-radius: 4px;
}

/* --- Ink Wisteria --- */
[data-theme="ink-wisteria"] {
    --felt-dark: #061826;
    --felt-light: #0471A6;
    --felt-glow: #061826;
    --gold: #AC80A0;
    --gold-light: #89AAE6;
    --gold-dark: #3685B5;
    --cream: #89AAE6;
    --card-shadow: rgba(0, 0, 0, 0.28);
    --red-suit: #AC80A0;
    --black-suit: #061826;
    --accent-purple: #3685B5;
    --surface-dark: #061826;
    --surface-mid: #061826;
    --surface-light: #0471A6;
    --btn-text: #FAF8F0;
    --pack-auth: #061826;
    --pack-lobby: #0471A6;
    --pack-heading: #89AAE6;
    --pack-text: #89AAE6;
    --pack-btn: #AC80A0;
    --pack-btn-hover: #3685B5;
    --pack-center: #061826;
    --pack-card-a: #061826;
    --pack-card-b: #0471A6;
    --pack-nav: #061826;
    --pack-nav-text: #89AAE6;
    --pack-turn: #AC80A0;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #3685B5;
    --pack-computer-text: #89AAE6;
    --pack-header: #89AAE6;
    --pack-extras: none;
}
.theme-swatch[data-theme="ink-wisteria"] { background: linear-gradient(135deg, #AC80A0 0%, #061826 100%); }

/* --- Mint Coffee --- */
[data-theme="mint-coffee"] {
    --felt-dark: #18020C;
    --felt-light: #634B66;
    --felt-glow: #18020C;
    --gold: #9590A8;
    --gold-light: #E5FFDE;
    --gold-dark: #634B66;
    --cream: #E5FFDE;
    --card-shadow: rgba(0, 0, 0, 0.28);
    --red-suit: #9590A8;
    --black-suit: #18020C;
    --accent-purple: #634B66;
    --surface-dark: #18020C;
    --surface-mid: #18020C;
    --surface-light: #634B66;
    --btn-text: #FAF8F0;
    --pack-auth: #18020C;
    --pack-lobby: #634B66;
    --pack-heading: #E5FFDE;
    --pack-text: #E5FFDE;
    --pack-btn: #9590A8;
    --pack-btn-hover: #634B66;
    --pack-center: #18020C;
    --pack-card-a: #18020C;
    --pack-card-b: #634B66;
    --pack-nav: #18020C;
    --pack-nav-text: #E5FFDE;
    --pack-turn: #9590A8;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #634B66;
    --pack-computer-text: #E5FFDE;
    --pack-header: #E5FFDE;
    --pack-extras: none;
}
.theme-swatch[data-theme="mint-coffee"] { background: linear-gradient(135deg, #9590A8 0%, #18020C 100%); }

/* --- Lime Cream --- */
[data-theme="lime-cream"] {
    --felt-dark: #F7FFDD;
    --felt-light: #FCFDAF;
    --felt-glow: #F7FFDD;
    --gold: #DBA159;
    --gold-light: #F7FFDD;
    --gold-dark: #DBA159;
    --cream: #7A5416;
    --card-shadow: rgba(0, 0, 0, 0.12);
    --red-suit: #DBA159;
    --black-suit: #F7FFDD;
    --accent-purple: #DBA159;
    --surface-dark: #F7FFDD;
    --surface-mid: #F7FFDD;
    --surface-light: #FCFDAF;
    --btn-text: #FAF8F0;
    --pack-auth: #F7FFDD;
    --pack-lobby: #FCFDAF;
    --pack-heading: #7A5416;
    --pack-text: #7A5416;
    --pack-btn: #DBA159;
    --pack-btn-hover: #DBA159;
    --pack-center: #F7FFDD;
    --pack-card-a: #F7FFDD;
    --pack-card-b: #FCFDAF;
    --pack-nav: #F7FFDD;
    --pack-nav-text: #DBA159;
    --pack-turn: #DBA159;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #DBA159;
    --pack-computer-text: #F7FFDD;
    --pack-header: #DBA159;
    --pack-extras: none;
}
.theme-swatch[data-theme="lime-cream"] { background: linear-gradient(135deg, #DBA159 0%, #F7FFDD 100%); }

/* --- Cerulean Ice --- */
[data-theme="cerulean-ice"] {
    --felt-dark: #003249;
    --felt-light: #007EA7;
    --felt-glow: #003249;
    --gold: #80CED7;
    --gold-light: #CCDBDC;
    --gold-dark: #007EA7;
    --cream: #CCDBDC;
    --card-shadow: rgba(0, 0, 0, 0.28);
    --red-suit: #80CED7;
    --black-suit: #003249;
    --accent-purple: #007EA7;
    --surface-dark: #003249;
    --surface-mid: #003249;
    --surface-light: #007EA7;
    --btn-text: #1A1814;
    --pack-auth: #003249;
    --pack-lobby: #007EA7;
    --pack-heading: #CCDBDC;
    --pack-text: #CCDBDC;
    --pack-btn: #80CED7;
    --pack-btn-hover: #007EA7;
    --pack-center: #003249;
    --pack-card-a: #003249;
    --pack-card-b: #007EA7;
    --pack-nav: #003249;
    --pack-nav-text: #CCDBDC;
    --pack-turn: #80CED7;
    --pack-turn-text: #1A1814;
    --pack-computer: #007EA7;
    --pack-computer-text: #CCDBDC;
    --pack-header: #CCDBDC;
    --pack-extras: none;
}
.theme-swatch[data-theme="cerulean-ice"] { background: linear-gradient(135deg, #80CED7 0%, #003249 100%); }

/* --- Jet Coral --- */
[data-theme="jet-coral"] {
    --felt-dark: #292F36;
    --felt-light: #292F36;
    --felt-glow: #292F36;
    --gold: #FF6B6B;
    --gold-light: #FFFFFF;
    --gold-dark: #4ECDC4;
    --cream: #FFFFFF;
    --card-shadow: rgba(0, 0, 0, 0.28);
    --red-suit: #FF6B6B;
    --black-suit: #292F36;
    --accent-purple: #4ECDC4;
    --surface-dark: #292F36;
    --surface-mid: #292F36;
    --surface-light: #292F36;
    --btn-text: #FAF8F0;
    --pack-auth: #292F36;
    --pack-lobby: #292F36;
    --pack-heading: #FFFFFF;
    --pack-text: #FFFFFF;
    --pack-btn: #FF6B6B;
    --pack-btn-hover: #4ECDC4;
    --pack-center: #292F36;
    --pack-card-a: #292F36;
    --pack-card-b: #292F36;
    --pack-nav: #292F36;
    --pack-nav-text: #FFFFFF;
    --pack-turn: #FF6B6B;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #4ECDC4;
    --pack-computer-text: #FFFFFF;
    --pack-header: #FFFFFF;
    --pack-extras: #4ECDC4;
}
.theme-swatch[data-theme="jet-coral"] { background: linear-gradient(135deg, #FF6B6B 0%, #292F36 100%); }

/* --- Icy Steel --- */
[data-theme="icy-steel"] {
    --felt-dark: #F2F4FF;
    --felt-light: #A9D3FF;
    --felt-glow: #F2F4FF;
    --gold: #96C5F7;
    --gold-light: #F2F4FF;
    --gold-dark: #6C756B;
    --cream: #3D4540;
    --card-shadow: rgba(0, 0, 0, 0.12);
    --red-suit: #96C5F7;
    --black-suit: #F2F4FF;
    --accent-purple: #6C756B;
    --surface-dark: #F2F4FF;
    --surface-mid: #F2F4FF;
    --surface-light: #A9D3FF;
    --btn-text: #FAF8F0;
    --pack-auth: #F2F4FF;
    --pack-lobby: #A9D3FF;
    --pack-heading: #3D4540;
    --pack-text: #3D4540;
    --pack-btn: #6C756B;
    --pack-btn-hover: #6C756B;
    --pack-center: #F2F4FF;
    --pack-card-a: #F2F4FF;
    --pack-card-b: #A9D3FF;
    --pack-nav: #F2F4FF;
    --pack-nav-text: #6C756B;
    --pack-turn: #96C5F7;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #6C756B;
    --pack-computer-text: #F2F4FF;
    --pack-header: #6C756B;
    --pack-extras: none;
}
.theme-swatch[data-theme="icy-steel"] { background: linear-gradient(135deg, #6C756B 0%, #F2F4FF 100%); }

/* --- Peach Teal --- */
[data-theme="peach-teal"] {
    --felt-dark: #FEE9E1;
    --felt-light: #FAD4C0;
    --felt-glow: #FEE9E1;
    --gold: #64B6AC;
    --gold-light: #FEE9E1;
    --gold-dark: #B09E99;
    --cream: #6E534C;
    --card-shadow: rgba(0, 0, 0, 0.12);
    --red-suit: #64B6AC;
    --black-suit: #FEE9E1;
    --accent-purple: #B09E99;
    --surface-dark: #FEE9E1;
    --surface-mid: #FEE9E1;
    --surface-light: #FAD4C0;
    --btn-text: #FAF8F0;
    --pack-auth: #FEE9E1;
    --pack-lobby: #FAD4C0;
    --pack-heading: #6E534C;
    --pack-text: #6E534C;
    --pack-btn: #64B6AC;
    --pack-btn-hover: #B09E99;
    --pack-center: #FEE9E1;
    --pack-card-a: #FEE9E1;
    --pack-card-b: #FAD4C0;
    --pack-nav: #FEE9E1;
    --pack-nav-text: #B09E99;
    --pack-turn: #64B6AC;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #B09E99;
    --pack-computer-text: #FEE9E1;
    --pack-header: #B09E99;
    --pack-extras: none;
}
.theme-swatch[data-theme="peach-teal"] { background: linear-gradient(135deg, #64B6AC 0%, #FEE9E1 100%); }

/* --- Grape Sage --- */
[data-theme="grape-sage"] {
    --felt-dark: #544E61;
    --felt-light: #67597A;
    --felt-glow: #544E61;
    --gold: #85BAA1;
    --gold-light: #CEEDDB;
    --gold-dark: #6E8894;
    --cream: #CEEDDB;
    --card-shadow: rgba(0, 0, 0, 0.28);
    --red-suit: #85BAA1;
    --black-suit: #544E61;
    --accent-purple: #6E8894;
    --surface-dark: #544E61;
    --surface-mid: #544E61;
    --surface-light: #67597A;
    --btn-text: #1A1814;
    --pack-auth: #544E61;
    --pack-lobby: #67597A;
    --pack-heading: #CEEDDB;
    --pack-text: #CEEDDB;
    --pack-btn: #85BAA1;
    --pack-btn-hover: #6E8894;
    --pack-center: #544E61;
    --pack-card-a: #544E61;
    --pack-card-b: #67597A;
    --pack-nav: #544E61;
    --pack-nav-text: #CEEDDB;
    --pack-turn: #85BAA1;
    --pack-turn-text: #1A1814;
    --pack-computer: #6E8894;
    --pack-computer-text: #CEEDDB;
    --pack-header: #CEEDDB;
    --pack-extras: none;
}
.theme-swatch[data-theme="grape-sage"] { background: linear-gradient(135deg, #85BAA1 0%, #544E61 100%); }

/* --- Celadon Stone --- */
[data-theme="celadon-stone"] {
    --felt-dark: #8FD694;
    --felt-light: #7DBA84;
    --felt-glow: #8FD694;
    --gold: #6F8F72;
    --gold-light: #8FD694;
    --gold-dark: #504B43;
    --cream: #504B43;
    --card-shadow: rgba(0, 0, 0, 0.12);
    --red-suit: #6F8F72;
    --black-suit: #8FD694;
    --accent-purple: #504B43;
    --surface-dark: #8FD694;
    --surface-mid: #8FD694;
    --surface-light: #7DBA84;
    --btn-text: #FAF8F0;
    --pack-auth: #8FD694;
    --pack-lobby: #7DBA84;
    --pack-heading: #504B43;
    --pack-text: #504B43;
    --pack-btn: #504B43;
    --pack-btn-hover: #504B43;
    --pack-center: #8FD694;
    --pack-card-a: #8FD694;
    --pack-card-b: #7DBA84;
    --pack-nav: #8FD694;
    --pack-nav-text: #504B43;
    --pack-turn: #6F8F72;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #504B43;
    --pack-computer-text: #8FD694;
    --pack-header: #504B43;
    --pack-extras: none;
}
.theme-swatch[data-theme="celadon-stone"] { background: linear-gradient(135deg, #504B43 0%, #8FD694 100%); }

/* --- Graphite Rose --- */
[data-theme="graphite-rose"] {
    --felt-dark: #2F2F2F;
    --felt-light: #2F2F2F;
    --felt-glow: #2F2F2F;
    --gold: #DC7F9B;
    --gold-light: #F7A1C4;
    --gold-dark: #DC7F9B;
    --cream: #F7A1C4;
    --card-shadow: rgba(0, 0, 0, 0.28);
    --red-suit: #DC7F9B;
    --black-suit: #2F2F2F;
    --accent-purple: #DC7F9B;
    --surface-dark: #2F2F2F;
    --surface-mid: #2F2F2F;
    --surface-light: #2F2F2F;
    --btn-text: #FAF8F0;
    --pack-auth: #2F2F2F;
    --pack-lobby: #2F2F2F;
    --pack-heading: #F7A1C4;
    --pack-text: #F7A1C4;
    --pack-btn: #DC7F9B;
    --pack-btn-hover: #DC7F9B;
    --pack-center: #2F2F2F;
    --pack-card-a: #2F2F2F;
    --pack-card-b: #2F2F2F;
    --pack-nav: #2F2F2F;
    --pack-nav-text: #F7A1C4;
    --pack-turn: #DC7F9B;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #DC7F9B;
    --pack-computer-text: #F7A1C4;
    --pack-header: #F7A1C4;
    --pack-extras: #94BFA7;
}
.theme-swatch[data-theme="graphite-rose"] { background: linear-gradient(135deg, #DC7F9B 0%, #2F2F2F 100%); }

/* --- Amethyst Rose --- */
[data-theme="amethyst-rose"] {
    --felt-dark: #531CB3;
    --felt-light: #944BBB;
    --felt-glow: #531CB3;
    --gold: #CC92C2;
    --gold-light: #DBA8AC;
    --gold-dark: #944BBB;
    --cream: #DBA8AC;
    --card-shadow: rgba(0, 0, 0, 0.28);
    --red-suit: #CC92C2;
    --black-suit: #531CB3;
    --accent-purple: #944BBB;
    --surface-dark: #531CB3;
    --surface-mid: #531CB3;
    --surface-light: #944BBB;
    --btn-text: #FAF8F0;
    --pack-auth: #531CB3;
    --pack-lobby: #944BBB;
    --pack-heading: #DBA8AC;
    --pack-text: #DBA8AC;
    --pack-btn: #CC92C2;
    --pack-btn-hover: #944BBB;
    --pack-center: #531CB3;
    --pack-card-a: #531CB3;
    --pack-card-b: #944BBB;
    --pack-nav: #531CB3;
    --pack-nav-text: #DBA8AC;
    --pack-turn: #CC92C2;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #944BBB;
    --pack-computer-text: #DBA8AC;
    --pack-header: #DBA8AC;
    --pack-extras: none;
}
.theme-swatch[data-theme="amethyst-rose"] { background: linear-gradient(135deg, #CC92C2 0%, #531CB3 100%); }

/* --- Lavender Almond --- */
[data-theme="lavender-almond"] {
    --felt-dark: #E1DEE9;
    --felt-light: #D5CFE1;
    --felt-glow: #E1DEE9;
    --gold: #B6A6CA;
    --gold-light: #E1DEE9;
    --gold-dark: #A09ABC;
    --cream: #4F4A6A;
    --card-shadow: rgba(0, 0, 0, 0.12);
    --red-suit: #B6A6CA;
    --black-suit: #E1DEE9;
    --accent-purple: #A09ABC;
    --surface-dark: #E1DEE9;
    --surface-mid: #E1DEE9;
    --surface-light: #D5CFE1;
    --btn-text: #FAF8F0;
    --pack-auth: #E1DEE9;
    --pack-lobby: #D5CFE1;
    --pack-heading: #4F4A6A;
    --pack-text: #4F4A6A;
    --pack-btn: #A09ABC;
    --pack-btn-hover: #A09ABC;
    --pack-center: #E1DEE9;
    --pack-card-a: #E1DEE9;
    --pack-card-b: #D5CFE1;
    --pack-nav: #E1DEE9;
    --pack-nav-text: #A09ABC;
    --pack-turn: #B6A6CA;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #A09ABC;
    --pack-computer-text: #E1DEE9;
    --pack-header: #A09ABC;
    --pack-extras: none;
}
.theme-swatch[data-theme="lavender-almond"] { background: linear-gradient(135deg, #A09ABC 0%, #E1DEE9 100%); }

/* --- Forest Slate --- */
[data-theme="forest-slate"] {
    --felt-dark: #2F3E46;
    --felt-light: #354F52;
    --felt-glow: #2F3E46;
    --gold: #84A98C;
    --gold-light: #CAD2C5;
    --gold-dark: #52796F;
    --cream: #CAD2C5;
    --card-shadow: rgba(0, 0, 0, 0.28);
    --red-suit: #84A98C;
    --black-suit: #2F3E46;
    --accent-purple: #52796F;
    --surface-dark: #2F3E46;
    --surface-mid: #2F3E46;
    --surface-light: #354F52;
    --btn-text: #FAF8F0;
    --pack-auth: #2F3E46;
    --pack-lobby: #354F52;
    --pack-heading: #CAD2C5;
    --pack-text: #CAD2C5;
    --pack-btn: #84A98C;
    --pack-btn-hover: #52796F;
    --pack-center: #2F3E46;
    --pack-card-a: #2F3E46;
    --pack-card-b: #354F52;
    --pack-nav: #2F3E46;
    --pack-nav-text: #CAD2C5;
    --pack-turn: #84A98C;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #52796F;
    --pack-computer-text: #CAD2C5;
    --pack-header: #CAD2C5;
    --pack-extras: none;
}
.theme-swatch[data-theme="forest-slate"] { background: linear-gradient(135deg, #84A98C 0%, #2F3E46 100%); }

/* --- Mauve Mocha --- */
[data-theme="mauve-mocha"] {
    --felt-dark: #241715;
    --felt-light: #402A2C;
    --felt-glow: #241715;
    --gold: #957186;
    --gold-light: #D9B8C4;
    --gold-dark: #703D57;
    --cream: #D9B8C4;
    --card-shadow: rgba(0, 0, 0, 0.28);
    --red-suit: #957186;
    --black-suit: #241715;
    --accent-purple: #703D57;
    --surface-dark: #241715;
    --surface-mid: #241715;
    --surface-light: #402A2C;
    --btn-text: #FAF8F0;
    --pack-auth: #241715;
    --pack-lobby: #402A2C;
    --pack-heading: #D9B8C4;
    --pack-text: #D9B8C4;
    --pack-btn: #957186;
    --pack-btn-hover: #703D57;
    --pack-center: #241715;
    --pack-card-a: #241715;
    --pack-card-b: #402A2C;
    --pack-nav: #241715;
    --pack-nav-text: #D9B8C4;
    --pack-turn: #957186;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #703D57;
    --pack-computer-text: #D9B8C4;
    --pack-header: #D9B8C4;
    --pack-extras: none;
}
.theme-swatch[data-theme="mauve-mocha"] { background: linear-gradient(135deg, #957186 0%, #241715 100%); }

/* --- Mint Lavender --- */
[data-theme="mint-lavender"] {
    --felt-dark: #D8DDEF;
    --felt-light: #A0A4B8;
    --felt-glow: #D8DDEF;
    --gold: #21D19F;
    --gold-light: #D8DDEF;
    --gold-dark: #45B69C;
    --cream: #3A5360;
    --card-shadow: rgba(0, 0, 0, 0.12);
    --red-suit: #21D19F;
    --black-suit: #D8DDEF;
    --accent-purple: #45B69C;
    --surface-dark: #D8DDEF;
    --surface-mid: #D8DDEF;
    --surface-light: #A0A4B8;
    --btn-text: #FAF8F0;
    --pack-auth: #D8DDEF;
    --pack-lobby: #A0A4B8;
    --pack-heading: #3A5360;
    --pack-text: #3A5360;
    --pack-btn: #45B69C;
    --pack-btn-hover: #45B69C;
    --pack-center: #D8DDEF;
    --pack-card-a: #D8DDEF;
    --pack-card-b: #A0A4B8;
    --pack-nav: #D8DDEF;
    --pack-nav-text: #7293A0;
    --pack-turn: #21D19F;
    --pack-turn-text: #FAF8F0;
    --pack-computer: #45B69C;
    --pack-computer-text: #D8DDEF;
    --pack-header: #7293A0;
    --pack-extras: none;
}
.theme-swatch[data-theme="mint-lavender"] { background: linear-gradient(135deg, #45B69C 0%, #D8DDEF 100%); }