/* ============================================
   Color Theme
   Based on Flat UI palette with guaranteed contrast
   ============================================ */
:root {
    /* Base Palette */
    --color-midnight: #1a252f;      /* Darkest */
    --color-wet-asphalt: #2c3e50;   /* Dark blue-gray */
    --color-asbestos: #34495e;      /* Medium blue-gray */
    --color-concrete: #7f8c8d;      /* Gray */
    --color-silver: #bdc3c7;        /* Light gray */
    --color-clouds: #ecf0f1;        /* Very light gray */
    --color-snow: #f8f9fa;          /* Off-white */

    /* Primary Accent */
    --color-peter-river: #3498db;   /* Blue */
    --color-belize-hole: #2980b9;   /* Dark blue */
    --color-midnight-blue: #1a5276; /* Darker blue */

    /* Semantic Colors */
    --color-emerald: #2ecc71;       /* Success green */
    --color-nephritis: #27ae60;     /* Dark success green */
    --color-alizarin: #e74c3c;      /* Error red */
    --color-pomegranate: #c0392b;   /* Dark error red */
    --color-orange: #f39c12;        /* Warning orange */
    --color-sunflower: #f1c40f;     /* Highlight yellow */
    --color-amethyst: #9b59b6;      /* Purple accent */
    --color-wisteria: #bb8fce;      /* Light purple */

    /* ----------------------------------------
       Light Surface Theme (default)
       For main UI, cards, forms
       ---------------------------------------- */
    --surface-page: #f5f5f5;           /* Page background */
    --surface-card: #ffffff;           /* Card/section background */
    --surface-elevated: #f8f9fa;       /* Elevated elements */
    --surface-muted: #ecf0f1;          /* Muted backgrounds, dividers */

    /* Text on light surfaces (all 4.5:1+ contrast) */
    --text-primary: #2c3e50;           /* Primary text - 10.5:1 on white */
    --text-secondary: #555555;         /* Secondary text - 7.5:1 on white */
    --text-muted: #7f8c8d;             /* Muted text - 4.5:1 on white */
    --text-placeholder: #95a5a6;       /* Placeholder - 3.5:1 (large text only) */

    /* ----------------------------------------
       Dark Surface Theme
       For thinking metrics, code blocks, overlays
       ---------------------------------------- */
    --surface-dark: #1a252f;           /* Dark panel background */
    --surface-dark-elevated: #2c3e50;  /* Elevated dark elements */
    --surface-dark-hover: #34495e;     /* Hover state on dark */
    --surface-dark-active: #1a5276;    /* Active/selected on dark */
    --surface-dark-border: #34495e;    /* Borders on dark surfaces */

    /* Text on dark surfaces (all 4.5:1+ contrast) */
    --text-on-dark: #ecf0f1;           /* Primary text - 11:1 on midnight */
    --text-on-dark-secondary: #bdc3c7; /* Secondary text - 7.5:1 on midnight */
    --text-on-dark-muted: #95a5a6;     /* Muted text - 5:1 on midnight */

    /* Accent text on dark surfaces */
    --text-on-dark-success: #58d68d;   /* Green - 6:1 on midnight */
    --text-on-dark-accent: #5dade2;    /* Blue - 6:1 on midnight */
    --text-on-dark-purple: #bb8fce;    /* Purple - 5.5:1 on midnight */
    --text-on-dark-warning: #f5b041;   /* Orange - 7:1 on midnight */

    /* ----------------------------------------
       Interactive Elements
       ---------------------------------------- */
    --interactive-primary: #3498db;
    --interactive-primary-hover: #2980b9;
    --interactive-primary-text: #ffffff;

    --interactive-secondary: #ecf0f1;
    --interactive-secondary-hover: #d5dbdb;
    --interactive-secondary-text: #2c3e50;

    /* ----------------------------------------
       Semantic States
       ---------------------------------------- */
    --state-success: #27ae60;
    --state-success-light: #d4edda;
    --state-success-text: #155724;

    --state-error: #e74c3c;
    --state-error-light: #f8d7da;
    --state-error-text: #721c24;

    --state-warning: #f39c12;
    --state-warning-light: #fff3cd;
    --state-warning-text: #856404;

    --state-info: #3498db;
    --state-info-light: #e8f4fd;
    --state-info-text: #1a5276;

    /* ----------------------------------------
       Game-specific
       ---------------------------------------- */
    --game-score: #e74c3c;             /* Score/cattle heads */
    --game-selected: #f39c12;          /* Selected cards/actions */
    --game-winner: #ffd700;            /* Winner highlight */
    --game-player-area: #34495e;       /* Hand background */

    /* ----------------------------------------
       Cascadero Town/Track Colors
       Each has a background and contrasting foreground
       ---------------------------------------- */
    --town-yellow-bg: #F5D033;
    --town-yellow-fg: #2c3e50;         /* Dark text - 7:1 contrast */

    --town-orange-bg: #E07020;
    --town-orange-fg: #ffffff;         /* White text - 4.5:1 contrast */

    --town-blue-bg: #4080C0;
    --town-blue-fg: #ffffff;           /* White text - 4.6:1 contrast */

    --town-pink-bg: #E080A0;
    --town-pink-fg: #2c3e50;           /* Dark text - 5.2:1 contrast */

    --town-white-bg: #F0F0E0;
    --town-white-fg: #2c3e50;          /* Dark text - 9.5:1 contrast */

    /* ----------------------------------------
       Player Colors (match town colors)
       ---------------------------------------- */
    --player-0-bg: #F5D033;            /* Yellow */
    --player-0-fg: #2c3e50;
    --player-1-bg: #E07020;            /* Orange */
    --player-1-fg: #ffffff;
    --player-2-bg: #4080C0;            /* Blue */
    --player-2-fg: #ffffff;
    --player-3-bg: #E080A0;            /* Pink */
    --player-3-fg: #2c3e50;

    /* ----------------------------------------
       Board/Game Area
       ---------------------------------------- */
    --board-bg: #2c3e50;               /* Board background */
    --board-fg: #ecf0f1;               /* Text on board */
    --board-grid: #34495e;             /* Grid lines */
    --board-highlight: #3498db;        /* Highlighted cells */
}

/* Base styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--surface-page);
    min-height: 100vh;
}

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

/* Header */
header {
    text-align: center;
    padding: 40px 0;
}

header h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

header .subtitle {
    color: #7f8c8d;
    font-size: 1.1rem;
}

/* Main content */
main {
    display: grid;
    gap: 30px;
}

section {
    background: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section h2 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ecf0f1;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}

.form-group select,
.form-group input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.form-group input[type="checkbox"] {
    margin-right: 8px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.btn.primary {
    background: #3498db;
    color: white;
}

.btn.primary:hover {
    background: #2980b9;
}

.btn:not(.primary) {
    background: #ecf0f1;
    color: #2c3e50;
}

.btn:not(.primary):hover {
    background: #d5dbdb;
}

/* Games list */
.game-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid #ecf0f1;
    border-radius: 4px;
    margin-bottom: 10px;
}

.game-card:last-child {
    margin-bottom: 0;
}

.game-info {
    display: flex;
    gap: 15px;
}

.game-type {
    font-weight: 600;
    color: #2c3e50;
}

.player-count {
    color: #7f8c8d;
}

.loading, .empty, .error {
    text-align: center;
    padding: 20px;
    color: #7f8c8d;
}

.error {
    color: #e74c3c;
}

/* Footer */
footer {
    text-align: center;
    padding: 30px 0;
    color: #95a5a6;
    font-size: 0.9rem;
}

/* Lobby styles */
.lobby {
    max-width: 600px;
    margin: 0 auto;
}

.lobby-header {
    text-align: center;
    margin-bottom: 30px;
}

.lobby-header h1 {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.lobby-header .status {
    color: #7f8c8d;
}

.seats {
    margin-bottom: 30px;
}

.seat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: white;
    border: 1px solid #ecf0f1;
    border-radius: 4px;
    margin-bottom: 10px;
}

.seat.empty {
    border-style: dashed;
}

.seat.ready .seat-status {
    color: #27ae60;
}

.seat.disconnected .seat-status {
    color: #e74c3c;
}

.seat-name {
    font-weight: 600;
}

.seat-status {
    color: #f39c12;
}

/* Join form */
.join-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.join-form input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

/* Share link */
.share-link {
    background: #ecf0f1;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
}

.share-link input {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    text-align: center;
    font-family: monospace;
    margin-bottom: 10px;
}

/* Game area */
.game-area {
    padding: 20px;
}

.game-area h2 {
    text-align: center;
    margin-bottom: 20px;
}

/* Cards (for 6 Nimmt) */
.card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 60px;
    height: 90px;
    background: white;
    border: 2px solid #333;
    border-radius: 8px;
    margin: 5px;
    padding: 8px 4px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    vertical-align: top;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.card.selected {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

.card-value {
    font-size: 1.5rem;
    margin-bottom: 4px;
    flex-shrink: 0;
    color: #2c3e50;
}

.card-heads {
    font-size: 0.8rem;
    line-height: 1;
    min-height: 28px;
    max-height: 28px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
}

/* Legacy classes (kept for compatibility) */
.card-number {
    font-size: 1.5rem;
}

.card-cattle {
    font-size: 0.8rem;
    color: #e74c3c;
}

/* Rows */
.rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}

.row {
    display: flex;
    gap: 5px;
    padding: 10px;
    background: #ecf0f1;
    border-radius: 4px;
    min-height: 100px;
    align-items: center;
}

.row-label {
    font-weight: 600;
    color: #7f8c8d;
    width: 60px;
}

.row-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
}

.empty-row,
.empty-hand {
    color: #7f8c8d;
    font-style: italic;
}

/* Hand */
.hand {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    background: #34495e;
    border-radius: 8px;
}

.hand-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.selected-card {
    margin-top: 10px;
    padding: 5px;
    background: rgba(243, 156, 18, 0.1);
    border-radius: 4px;
}

/* Actions */
.actions {
    text-align: center;
    margin-top: 20px;
}

/* Bot controls */
.bot-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.bot-type-select {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    background: white;
    cursor: pointer;
}

/* Scoreboard */
.scoreboard h3 {
    color: #2c3e50;
    font-size: 1.1rem;
    margin-bottom: 15px;
    text-align: center;
}

/* Score */
.scores {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.score {
    background: white;
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
}

.score-name {
    font-weight: 600;
    color: #2c3e50;
}

.score-value {
    font-size: 1.5rem;
    color: #e74c3c;
}

.cattle-count {
    color: #2c3e50;
}

/* Game over */
.game-over {
    text-align: center;
    padding: 40px 20px;
    max-width: 600px;
}

.game-over h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: #2c3e50;
}

.rankings-container {
    margin-bottom: 40px;
}

.rankings {
    list-style: none;
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.ranking-tier {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: white;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid #95a5a6;
}

.ranking-tier.winner {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    font-weight: bold;
    border-left-color: #f39c12;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.ranking-position {
    min-width: 60px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-right: 20px;
}

.ranking-players {
    flex: 1;
}

.ranking-player {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.ranking-player + .ranking-player {
    border-top: 1px solid #ecf0f1;
    margin-top: 5px;
    padding-top: 10px;
}

.player-name {
    font-size: 1.1rem;
    color: #2c3e50;
}

.player-score {
    font-weight: 600;
    color: #e74c3c;
    font-size: 1rem;
}

.game-over-actions {
    margin-top: 30px;
}

/* Countdown */
.countdown {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.countdown-number {
    font-size: 10rem;
    color: white;
    font-weight: bold;
    animation: pulse 1s ease-in-out infinite;
}

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

/* ============================================
   Episode Replay Styles
   ============================================ */

/* Session and Episode List Pages */
.session-list,
.episode-list {
    background: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.session-list h2,
.episode-list h2 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ecf0f1;
}

.session-item,
.episode-item {
    display: block;
    padding: 15px;
    border: 1px solid #ecf0f1;
    border-radius: 4px;
    margin-bottom: 10px;
    text-decoration: none;
    color: #2c3e50;
    transition: background 0.2s, border-color 0.2s;
}

.session-item:hover,
.episode-item:hover {
    background: #f8f9fa;
    border-color: #3498db;
}

.session-item:last-child,
.episode-item:last-child {
    margin-bottom: 0;
}

.episode-item .episode-name {
    font-weight: 600;
    font-family: monospace;
}

.episode-item .episode-date {
    color: #7f8c8d;
    font-size: 0.85rem;
    margin-left: 15px;
}

.episode-item a {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Episode type badges */
.episode-type {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.episode-type-selfplay {
    background: var(--state-info-light, #e8f4fd);
    color: var(--state-info-text, #1a5276);
}

.episode-type-eval {
    background: var(--state-success-light, #d4edda);
    color: var(--state-success-text, #155724);
}

.episode-item .episode-name {
    flex: 1;
}

.episode-item .episode-date {
    flex-shrink: 0;
}

/* Replay Loading and Error States */
.replay-loading,
.replay-error {
    text-align: center;
    padding: 60px 20px;
}

.replay-loading .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #ecf0f1;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

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

.replay-error {
    color: #e74c3c;
}

.replay-error h2 {
    margin-bottom: 15px;
}

/* Replay Mode Header */
.replay-mode {
    background: #f5f5f5;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.replay-mode .game-header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
}

.replay-mode h2 {
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.replay-mode .step-info {
    font-size: 1rem;
    opacity: 0.9;
}

/* Replay Controls */
.replay-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #ecf0f1;
    border-radius: 8px;
    margin-bottom: 20px;
}

.replay-controls button {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 4px;
    background: white;
    color: #2c3e50;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.replay-controls button:hover {
    background: #3498db;
    color: white;
    transform: scale(1.05);
}

.replay-controls button:active {
    transform: scale(0.95);
}

.replay-controls button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.replay-controls button:disabled:hover {
    background: white;
    color: #2c3e50;
}

.replay-controls .step-counter {
    font-weight: 600;
    min-width: 100px;
    text-align: center;
    color: #2c3e50;
}

/* Two-Column Replay Layout */
.replay-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.replay-left {
    min-width: 0;
}

.replay-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Player Tiles */
.player-tile {
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.player-tile.has-action {
    border-left: 4px solid #f39c12;
}

.player-tile-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ecf0f1;
}

.player-tile-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-tile-header .player-name {
    font-weight: 600;
    font-size: 1rem;
    color: #2c3e50;
}

.player-tile-header .player-score {
    font-size: 0.95rem;
    color: #e74c3c;
}

.player-tile-hand {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 50px;
}

.player-tile-selected {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #f39c12;
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-tile-selected .selected-label {
    font-size: 0.85rem;
    color: #f39c12;
    font-weight: 500;
}

.player-tile-selected .card {
    border-color: #f39c12;
    box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.3);
}

/* Player value display */
.player-tile-header .player-value {
    font-size: 0.8rem;
    color: #7f8c8d;
    font-weight: 400;
}

/* Thinking Metrics in Replay */
.thinking-metrics {
    margin-top: 10px;
    padding: 12px;
    background: var(--surface-dark);
    border-radius: 6px;
    font-size: 0.85rem;
    border: 1px solid var(--surface-dark-border);
}

.thinking-header {
    font-weight: 600;
    color: var(--text-on-dark);
    margin-bottom: 10px;
    font-size: 0.85rem;
}

.move-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.move-item {
    padding: 8px 12px;
    background: var(--surface-dark-elevated);
    border-radius: 4px;
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.85rem;
    border: 1px solid var(--surface-dark-hover);
}

.move-item.chosen {
    background: var(--surface-dark-active);
    border-left: 3px solid var(--interactive-primary);
}

.move-action {
    color: #ffffff;
    min-width: 80px;
    font-weight: 600;
}

.move-prob,
.move-visits {
    color: #ffffff;
    font-weight: 500;
}

.move-prior {
    color: var(--text-on-dark-purple);
    font-weight: 600;
}

.move-q {
    color: var(--text-on-dark-success);
    margin-left: auto;
    font-weight: 600;
}

/* Expand/collapse for extra moves */
.move-list-extra {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.move-list-extra.collapsed {
    display: none;
}

.btn-expand-moves {
    background: var(--surface-dark-hover);
    border: 1px solid #4a6278;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 8px 14px;
    text-align: center;
    margin-top: 6px;
    transition: background 0.2s;
    font-weight: 500;
}

.btn-expand-moves:hover {
    background: #4a6278;
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
    .replay-layout {
        grid-template-columns: 1fr;
    }

    .replay-right {
        order: -1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .player-tile {
        flex: 1 1 200px;
    }
}

/* Step Actions Display */
.step-actions {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.step-actions h3 {
    font-size: 1rem;
    color: #856404;
    margin-bottom: 10px;
}

.step-actions .action-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.step-actions .action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.step-actions .player-label {
    font-weight: 600;
    color: #2c3e50;
}

/* All Hands Display (Spectator Mode) */
.all-hands {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.player-hand-section {
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.player-hand-section h3,
.player-hand-section h4 {
    font-size: 1rem;
    color: #2c3e50;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ecf0f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-hand-section .player-score {
    color: #e74c3c;
    font-size: 0.9rem;
}

.player-hand-section .hand {
    background: #34495e;
    padding: 15px;
    border-radius: 6px;
    min-height: 110px;
}

.player-hand-section .hand .card {
    margin: 3px;
}

/* Selected Card (action taken indicator) */
.card.selected-action {
    border-color: #f39c12;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.4);
    transform: translateY(-5px);
}

/* Played Cards Area */
.played-cards {
    background: #ecf0f1;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.played-cards h3 {
    font-size: 1rem;
    color: #7f8c8d;
    margin-bottom: 15px;
}

.played-cards .cards-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.played-cards .played-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.played-cards .player-label {
    font-size: 0.8rem;
    color: #7f8c8d;
    margin-top: 5px;
}

/* Spectator Scoreboard */
.spectator-scoreboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.spectator-scoreboard .score {
    background: white;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.spectator-scoreboard .score-name {
    font-size: 0.9rem;
    color: #7f8c8d;
}

.spectator-scoreboard .score-value {
    font-size: 1.4rem;
    font-weight: 600;
    color: #e74c3c;
}

/* Final State Indicator */
.final-state {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
}

.final-state h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

/* Row Selection Mode (6 Nimmt specific) */
.row.selectable {
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.row.selectable:hover {
    background: #d5dbdb;
    transform: scale(1.02);
}

.row.selected {
    background: #3498db;
    border: 2px solid #2980b9;
}

/* Breadcrumb Navigation */
.breadcrumb {
    margin-bottom: 20px;
    padding: 10px 0;
}

.breadcrumb a {
    color: #3498db;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .separator {
    color: #7f8c8d;
    margin: 0 8px;
}

/* Keyboard Shortcuts Help */
.keyboard-help {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.85rem;
    color: #7f8c8d;
    text-align: center;
    margin-top: 15px;
}

.keyboard-help kbd {
    background: white;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: monospace;
    margin: 0 3px;
}

/* Game Outcome Display */
.game-outcome {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px 20px;
    margin-top: 20px;
}

.game-outcome h3 {
    font-size: 1rem;
    color: #2c3e50;
    margin-bottom: 12px;
    font-weight: 600;
}

.outcome-tiers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.outcome-tier {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: white;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.outcome-tier.winner {
    background: #d4edda;
    border-color: #28a745;
}

.tier-position {
    font-weight: 600;
    min-width: 40px;
    color: #495057;
}

.outcome-tier.winner .tier-position {
    color: #155724;
}

.tier-players {
    flex: 1;
    color: #2c3e50;
}

.tier-score {
    color: #e74c3c;
    font-size: 0.9rem;
}