/* ============================================================================
   Brass: Birmingham - Styles
   Aged parchment & brass theme — matched to the original day-side board
   ============================================================================ */

:root {
    /* Primary palette — warm walnut leather around a parchment board */
    --bg-dark: #1c140d;
    --bg-medium: #2b2015;
    --bg-light: #3a2c1c;
    --bg-card: #efe4c6;
    --parchment: #e9dcba;
    --parchment-dark: #cdb489;
    --text-primary: #ecdcbc;
    --text-secondary: #c2ab8e;
    --text-muted: #93805f;
    --accent-gold: #c9a84c;
    --accent-copper: #b87333;
    --accent-brass: #d4a843;
    --ink: #33261a;
    --border-dark: #4a3826;
    --border-light: #6a543a;

    /* Player colors */
    --player-orange: #c25a35;
    --player-yellow: #d4ac3f;
    --player-purple: #9268b8;
    --player-teal: #9fb3c8;

    /* Resource colors */
    --coal-color: #2c2c2c;
    --iron-color: #d4760a;
    --beer-color: #c9a84c;

    /* Industry colors */
    --cotton-color: #e8d5b7;
    --coal-mine-color: #555;
    --iron-works-color: #d4760a;
    --manufacturer-color: #8b6914;
    --pottery-color: #b03a2e;
    --brewery-color: #d4a843;

    /* Region colors */
    --region-derbyshire: #537c80;
    --region-staffordshire: #1e5aa0;
    --region-midlands: #8c4e51;
    --region-blackcountry: #986627;
    --region-birmingham: #564a5e;

    /* Sizing */
    --panel-gap: 8px;
    --border-radius: 6px;
    --card-width: 90px;
    --card-height: 140px;
}

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

body {
    font-family: 'Source Sans Pro', 'Segoe UI', sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

h1, h2, h3 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ============================================================================
   Setup Screen
   ============================================================================ */

.screen {
    display: none;
    width: 100%;
    height: 100%;
}
.screen.active {
    display: flex;
}

#setup-screen,
#lobby-screen {
    justify-content: center;
    align-items: center;
    /* CSS-only textile/linen background pattern */
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(201,168,76,0.02) 2px,
            rgba(201,168,76,0.02) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(201,168,76,0.02) 2px,
            rgba(201,168,76,0.02) 4px
        ),
        radial-gradient(ellipse at 30% 40%, #332616 0%, #221a10 60%, #171008 100%);
}

.setup-container {
    text-align: center;
    max-width: 500px;
    padding: 60px 40px;
    background: var(--bg-medium);
    border: 2px solid var(--accent-gold);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(201,168,76,0.1);
    animation: setup-fade-in 0.8s ease-out;
}

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

.game-title {
    font-size: 72px;
    color: var(--accent-gold);
    letter-spacing: 12px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 20px rgba(201,168,76,0.15);
    margin-bottom: 0;
    line-height: 1;
    animation: title-entrance 1s ease-out;
}

@keyframes title-entrance {
    from { letter-spacing: 30px; opacity: 0; }
    to { letter-spacing: 12px; opacity: 1; }
}

.game-subtitle {
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 8px;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Decorative ornament under title */
.game-subtitle::after {
    content: '— ✦ —';
    display: block;
    font-size: 14px;
    color: var(--accent-copper);
    letter-spacing: 6px;
    margin-top: 8px;
    margin-bottom: 4px;
    opacity: 0.7;
}

.game-tagline {
    color: var(--text-muted);
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 16px;
    margin-bottom: 40px;
}

.setup-form {
    text-align: left;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.player-count-selector {
    display: flex;
    gap: 12px;
}

.count-btn {
    flex: 1;
    padding: 14px;
    font-family: 'Cinzel', serif;
    font-size: 24px;
    background: var(--bg-light);
    color: var(--text-secondary);
    border: 2px solid var(--border-dark);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.count-btn:hover {
    border-color: var(--accent-copper);
    color: var(--text-primary);
}

.count-btn.active {
    background: var(--accent-gold);
    color: var(--bg-dark);
    border-color: var(--accent-gold);
    font-weight: 700;
}

/* Which printed side of the board to play on */
.board-side-selector {
    display: flex;
    gap: 12px;
}

.side-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    font-family: 'Cinzel', serif;
    font-size: 17px;
    background: var(--bg-light);
    color: var(--text-secondary);
    border: 2px solid var(--border-dark);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.side-btn:hover {
    border-color: var(--accent-copper);
    color: var(--text-primary);
}

.side-btn.active {
    background: var(--accent-gold);
    color: var(--bg-dark);
    border-color: var(--accent-gold);
    font-weight: 700;
}

/* Local or online: styled like the board side buttons */
.mode-btn {
    flex: 1;
    padding: 11px 14px;
    font-family: 'Cinzel', serif;
    font-size: 15px;
    background: var(--bg-light);
    color: var(--text-secondary);
    border: 2px solid var(--border-dark);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.mode-btn:hover {
    border-color: var(--accent-copper);
    color: var(--text-primary);
}

.mode-btn.active {
    background: var(--accent-gold);
    color: var(--bg-dark);
    border-color: var(--accent-gold);
    font-weight: 700;
}

.setup-note {
    margin-top: 12px;
    font-family: 'Crimson Text', serif;
    font-size: 15px;
    color: var(--text-muted);
    text-align: center;
}

.setup-note a {
    color: var(--accent-gold);
}

/* Same width whichever way the game is played */
#setup-screen .setup-container {
    width: min(500px, calc(100vw - 32px));
}

/* Online waiting room */
#lobby-screen .setup-container {
    width: min(520px, calc(100vw - 32px));
    padding: 40px 32px;
}

.lobby-form [hidden] {
    display: none !important;
}

#lobby-rejoin-group {
    margin-top: 28px;
}

.lobby-code {
    margin-left: 8px;
    font-family: 'Source Sans Pro', monospace;
    letter-spacing: 3px;
    color: var(--accent-gold);
}

.lobby-form #lobby-status {
    margin-top: 0;
    text-align: left;
}

.lobby-link {
    display: flex;
    gap: 8px;
}

.lobby-link input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    background: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    outline: none;
}

.lobby-link input:focus {
    border-color: var(--accent-gold);
}

.lobby-link .btn-primary {
    width: auto;
    padding: 10px 16px;
    font-size: 13px;
    letter-spacing: 1px;
}

.btn-secondary {
    flex-shrink: 0;
    padding: 10px 14px;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    background: var(--bg-light);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
}

.btn-secondary:hover {
    color: var(--text-primary);
    border-color: var(--accent-copper);
}

.btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.lobby-seats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lobby-seat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    color: var(--text-primary);
}

.lobby-seat .color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    flex-shrink: 0;
}

.lobby-seat .seat-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lobby-seat .seat-state {
    font-size: 13px;
    color: var(--text-muted);
}

.lobby-seat.open .seat-name {
    color: var(--text-muted);
    font-style: italic;
}

.lobby-seat .online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-light);
    flex-shrink: 0;
}

.lobby-seat .online-dot.on {
    background: #6fcf7a;
    box-shadow: 0 0 6px rgba(111, 207, 122, 0.6);
}

.player-name-input .seat-kind-select {
    flex-shrink: 0;
    padding: 8px 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 13px;
    background: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    outline: none;
}

.player-name-inputs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.player-name-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-name-input .color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    flex-shrink: 0;
}

.player-name-input input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    background: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s;
}

.player-name-input input[type="text"]:focus {
    border-color: var(--accent-gold);
}

.player-name-input .ai-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
}

.player-name-input .ai-toggle-checkbox {
    width: 15px;
    height: 15px;
    accent-color: var(--accent-gold);
    cursor: pointer;
}

.player-name-input .ai-difficulty-select {
    flex-shrink: 0;
    padding: 8px 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 13px;
    background: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    outline: none;
    transition: opacity 0.2s;
}

.player-name-input .ai-difficulty-select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-primary {
    display: block;
    width: 100%;
    padding: 16px;
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-copper));
    color: var(--bg-dark);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(201,168,76,0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201,168,76,0.4);
}

/* ============================================================================
   Game Screen Layout
   ============================================================================ */

#game-screen {
    flex-direction: column;
    height: 100vh;
}

/* Top Bar */
#top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    background: linear-gradient(180deg, #2e2618 0%, #242018 100%);
    border-bottom: 1px solid var(--accent-copper);
    height: 44px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.era-indicator {
    display: flex;
    align-items: center;
    gap: 16px;
}

#era-label {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: var(--accent-gold);
    letter-spacing: 2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

#round-label {
    font-size: 13px;
    color: var(--text-muted);
}

.turn-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

#current-player-label {
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 4px;
}

#actions-remaining-label {
    color: var(--text-secondary);
    font-size: 13px;
}

.market-summary {
    display: flex;
    gap: 16px;
    font-size: 13px;
}

.market-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.market-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.coal-icon { background: var(--coal-color); border: 1px solid #555; }
.iron-icon { background: var(--iron-color); }

/* ============================================================================
   Action Phase Indicator Bar
   ============================================================================ */

#action-phase-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 6px 16px;
    background: linear-gradient(180deg, #2a2218 0%, #221c14 100%);
    border-bottom: 1px solid var(--border-dark);
    height: 38px;
    flex-shrink: 0;
}

#action-phase-bar.hidden {
    display: none;
}

.phase-steps {
    display: flex;
    align-items: center;
    gap: 8px;
}

.phase-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    transition: all 0.3s;
}

.phase-step.active {
    color: var(--bg-dark);
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    font-weight: 600;
    box-shadow: 0 0 10px rgba(201,168,76,0.3);
}

.phase-step.completed {
    color: #5a9a5a;
    border-color: #4a7a4a;
    background: rgba(90,154,90,0.15);
}

.phase-step-num {
    font-weight: 700;
    font-size: 11px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
}

.phase-step.active .phase-step-num {
    background: rgba(0,0,0,0.2);
}

.phase-step.completed .phase-step-num::after {
    content: '✓';
    font-size: 10px;
}

.phase-step.completed .phase-step-num {
    font-size: 0;
}

.phase-step-label {
    font-family: 'Source Sans Pro', sans-serif;
    letter-spacing: 0.5px;
}

.phase-step-arrow {
    color: var(--text-muted);
    font-size: 8px;
    opacity: 0.5;
}

.phase-instruction {
    font-size: 12px;
    color: var(--accent-copper);
    font-style: italic;
    min-width: 200px;
    text-align: center;
}

.phase-cancel-btn {
    padding: 3px 12px;
    font-size: 11px;
    font-family: 'Source Sans Pro', sans-serif;
    background: none;
    border: 1px solid var(--border-dark);
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

.phase-cancel-btn:hover {
    border-color: #c0392b;
    color: #e74c3c;
}

.phase-option-btn {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

.phase-option-btn:hover {
    border-color: var(--accent-gold);
    color: var(--bg-dark);
    background: var(--accent-gold);
}

/* A decision outside an action (covering income, a free develop on the
   compact mat): only its prompt, which can't be cancelled. */
#action-phase-bar.deciding .phase-steps,
#action-phase-bar.deciding #phase-cancel-btn { display: none; }

#action-phase-bar.deciding .phase-instruction {
    color: var(--accent-gold);
    font-weight: 600;
}

.phase-option-btn.hidden {
    display: none;
}

/* Main Game Area */
#game-area {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0;
}

/* Board Container */
#board-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-width: 0;
    /* Warm walnut leather table around the parchment map */
    background:
        radial-gradient(ellipse at 50% 42%, rgba(120,86,44,0.22) 0%, rgba(28,20,12,0.65) 100%),
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.05) 0px,
            rgba(0,0,0,0.05) 2px,
            transparent 2px,
            transparent 7px
        ),
        linear-gradient(160deg, #332415 0%, #241a10 100%),
        var(--bg-dark);
    position: relative;
}

/* Vignette edge effect for board area */
#board-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 1;
}

#game-board {
    position: relative;
    z-index: 2;
}

#game-board {
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 300px);
    position: relative;
    z-index: 2;
    /* The board handles its own drag and pinch (boardRenderer.js). */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Zoom buttons and the day / night switch over the board's top-right corner */
.board-tools {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.board-zoom {
    display: flex;
    flex-direction: column;
    background: rgba(28, 20, 13, 0.85);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.board-zoom-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-primary);
    font: 600 19px/1 'Source Sans Pro', sans-serif;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.board-zoom-btn + .board-zoom-btn {
    border-top: 1px solid var(--border-dark);
}

.board-zoom-btn:hover:not(:disabled) {
    background: rgba(201, 168, 76, 0.18);
    color: var(--accent-brass);
}

.board-zoom-btn:disabled {
    color: var(--text-muted);
    opacity: 0.45;
    cursor: default;
}

/* The day / night switch: a zoom button standing on its own, showing the
   side it turns the board to. */
.board-side-btn {
    width: 34px;
    height: 34px;
    background: rgba(28, 20, 13, 0.85);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.board-side-btn[hidden] { display: none; }
.board-tools > .board-side-btn { border-top: 1px solid var(--border-light); }
.board-straight-btn[aria-pressed="true"] {
    color: var(--bg-dark);
    background: var(--accent-gold);
}
.board-straight-btn[aria-pressed="true"]:hover {
    color: var(--bg-dark);
    background: var(--accent-brass);
}
.board-side-btn[data-next="day"] .side-icon-night,
.board-side-btn[data-next="night"] .side-icon-day { display: none; }

.board-zoom-btn:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: -2px;
}

/* Right Panel */
#right-panel {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: var(--bg-medium);
    border-left: 1px solid var(--border-dark);
    overflow-y: auto;
}

#right-panel h3 {
    font-size: 10px;
    color: var(--accent-copper);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-dark);
    padding-bottom: 4px;
}

/* Player Panels */
.player-panel {
    padding: 8px 10px 8px 14px;
    border-radius: var(--border-radius);
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    border-left: 4px solid var(--border-dark);
    font-size: 12px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

/* Dynamic left border color set by JS via style attribute */
.player-panel[style*="border-left-color"] {
    /* JS sets border-left-color inline */
}

.player-panel .player-panel-header {
    position: relative;
    z-index: 1;
}

.player-panel.active {
    border-color: var(--accent-gold);
    border-left-color: inherit;
    box-shadow: 0 0 12px rgba(201,168,76,0.2);
    animation: active-player-pulse 2s ease-in-out infinite;
}

@keyframes active-player-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(201,168,76,0.15); }
    50% { box-shadow: 0 0 20px rgba(201,168,76,0.35); }
}

.player-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.player-panel-name {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.ai-chip {
    display: inline-block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--bg-dark);
    background: var(--accent-gold);
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 5px;
    vertical-align: middle;
}

/* Dim and disable interaction while an AI player is taking its turn (Undo
   still takes back the move before it). */
.ai-turn-active #action-buttons .action-btn[data-action],
.ai-turn-active #player-hand,
.ai-turn-active #game-board {
    pointer-events: none;
    opacity: 0.65;
    filter: grayscale(0.15);
    transition: opacity 0.3s, filter 0.3s;
}

.player-panel-vp {
    font-weight: 700;
    font-size: 14px;
    color: var(--accent-gold);
    text-shadow: 0 0 8px rgba(201,168,76,0.4);
}

.player-panel-discard {
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.you-chip {
    background: var(--accent-copper);
}

.player-panel-stats {
    display: flex;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 11px;
    flex-wrap: wrap;
}

.player-panel-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(255,255,255,0.04);
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Markets Panel */
#markets-panel {
    padding: 8px 10px;
    border-radius: var(--border-radius);
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
}

.market {
    margin-bottom: 8px;
}

.market:last-child {
    margin-bottom: 0;
}

.market-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.market-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.market-current-price {
    font-size: 10px;
    color: var(--accent-copper);
    font-weight: 600;
}

.market-track {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.market-space {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--text-muted);
    position: relative;
    transition: all 0.2s;
    background: rgba(255,255,255,0.03);
}

.market-space.filled {
    border-color: transparent;
}

.market-space.filled.coal {
    background:
        linear-gradient(135deg, #4a4a4a 0%, #1a1a1a 60%, #111 100%);
    border: 1px solid #5a5a5a;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        0 2px 4px rgba(0,0,0,0.5);
}

.market-space.filled.iron {
    background:
        linear-gradient(135deg, #f09830 0%, #d07010 40%, #a04800 100%);
    border: 1px solid #e08020;
    box-shadow:
        inset 0 1px 0 rgba(255,220,100,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.4);
}

.market-space .price-label {
    position: absolute;
    bottom: -10px;
    font-size: 7px;
    color: var(--text-muted);
}

/* ============================================================================
   Game Log Panel
   ============================================================================ */

#game-log-panel {
    padding: 8px 10px;
    border-radius: var(--border-radius);
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#game-log {
    overflow-y: auto;
    max-height: 200px;
    flex: 1;
    font-size: 11px;
    line-height: 1.5;
}

.log-entry {
    padding: 3px 6px;
    border-bottom: 1px solid rgba(74,60,46,0.3);
    color: var(--text-secondary);
}

.log-entry:last-child {
    border-bottom: none;
}

.log-entry .log-player {
    font-weight: 600;
}

.log-entry.log-system {
    color: var(--text-muted);
    font-style: italic;
    font-size: 10px;
}

.log-entry.log-era {
    color: var(--accent-gold);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    text-align: center;
    padding: 6px;
    border-bottom: 1px solid var(--border-dark);
    border-top: 1px solid var(--border-dark);
}

/* ============================================================================
   Turn Transition Overlay
   ============================================================================ */

#turn-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* A banner across the top, dark only behind the name: the board stays
       in view, so what the last player did can be seen flashing on it. */
    background: radial-gradient(ellipse 300px 90px at 50% 96px, rgba(8,6,4,0.85), rgba(8,6,4,0.55) 55%, rgba(8,6,4,0) 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 52px;
    box-sizing: border-box;
    z-index: 1200;
    animation: turn-fade-in 0.3s ease-out;
    pointer-events: none;
}

#turn-transition.hidden {
    display: none;
}

#turn-transition.fade-out {
    animation: turn-fade-out 0.5s ease-in forwards;
}

@keyframes turn-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes turn-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.turn-transition-content {
    text-align: center;
    animation: turn-slide-in 0.3s ease-out;
}

@keyframes turn-slide-in {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.turn-transition-name {
    font-family: 'Cinzel', serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 5px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

.turn-transition-subtitle {
    font-family: 'Crimson Text', serif;
    font-size: 16px;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* ============================================================================
   Bottom Panel - Hand & Actions
   ============================================================================ */

#bottom-panel {
    display: flex;
    align-items: stretch;
    height: 175px;
    flex-shrink: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 4px,
            rgba(0,0,0,0.06) 4px,
            rgba(0,0,0,0.06) 8px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 12px,
            rgba(201,168,76,0.015) 12px,
            rgba(201,168,76,0.015) 13px
        ),
        linear-gradient(180deg, #2a2218 0%, #1e1a12 100%);
    border-top: 2px solid var(--accent-copper);
    box-shadow: inset 0 1px 0 rgba(201,168,76,0.15), 0 -2px 8px rgba(0,0,0,0.4);
    gap: 0;
}

/* Card selection mode: dim action buttons and player mat */
#bottom-panel.card-select-mode #action-panel {
    opacity: 0.3;
    pointer-events: none;
}

#bottom-panel.card-select-mode #player-mat-container {
    opacity: 0.3;
    pointer-events: none;
}

#hand-container {
    flex: 1;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    container-type: inline-size;
}

.hand-label, .action-label, .mat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
    font-family: 'Cinzel', serif;
}

#player-hand {
    display: flex;
    gap: 6px;
    overflow-x: hidden;
    flex: 1;
    align-items: flex-start;
}

/* Card Styles - cream card stock with dark ink, like the physical deck */
.card {
    width: var(--card-width);
    min-width: var(--card-width);
    height: var(--card-height);
    border-radius: 7px;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 3px,
            rgba(140,110,60,0.03) 3px,
            rgba(140,110,60,0.03) 6px
        ),
        linear-gradient(165deg, #f2e8cd 0%, #e9dcba 55%, #ddcda6 100%);
    border: 1px solid #a89468;
    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,0.35),
        inset 0 0 12px rgba(160,130,80,0.18),
        0 3px 6px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
    font-size: 10px;
    text-align: center;
    position: relative;
    user-select: none;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-radius: 6px 6px 0 0;
}

.card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-gold);
    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,0.35),
        0 10px 22px rgba(0,0,0,0.55),
        0 0 12px rgba(201,168,76,0.35);
}

.card.selected {
    transform: translateY(-12px);
    border-color: var(--accent-gold);
    box-shadow: 0 10px 24px rgba(201,168,76,0.45), 0 0 15px rgba(201,168,76,0.35);
}

/* Card selection mode: valid cards get pulse */
.card.valid-discard {
    animation: card-pulse 1.5s ease-in-out infinite;
    border-color: var(--accent-gold);
}

@keyframes card-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(201,168,76,0.3); }
    50% { box-shadow: 0 0 15px rgba(201,168,76,0.7); }
}

.card.invalid-discard {
    opacity: 0.3;
    pointer-events: none;
}

.card.scout-queued {
    border-color: #e74c3c;
    box-shadow: 0 0 10px rgba(231,76,60,0.5);
    opacity: 0.6;
    pointer-events: none;
}

.card-type {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #8a7452;
    margin-bottom: 2px;
    font-variant: small-caps;
}

.card-name {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.card-icon {
    font-size: 24px;
    margin: 6px 0;
}

/* Card type-specific colored top borders */
.card.location-card::before { background: linear-gradient(90deg, #6a9a6a, #4a7a4a); }
.card.industry-card::before { background: linear-gradient(90deg, #b05040, #8a3830); }
.card.wild-card::before { background: linear-gradient(90deg, var(--accent-gold), var(--accent-copper), var(--accent-gold)); }

.card.location-card {
    border-color: #9aa87e;
    background-image:
        radial-gradient(circle at 50% 30%, var(--region-tint, transparent) 0%, transparent 70%),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 3px,
            rgba(140,110,60,0.03) 3px,
            rgba(140,110,60,0.03) 6px
        ),
        linear-gradient(165deg, #f0e9cf 0%, #e6dcba 55%, #dccca4 100%);
}

.card.location-card:hover {
    border-color: #7a9a6a;
}

.card.industry-card {
    border-color: #c0a08a;
}

.card.industry-card:hover {
    border-color: #b07a5a;
}

.card.wild-card {
    border-color: var(--accent-gold);
    background:
        repeating-conic-gradient(from 0deg, rgba(201,168,76,0.14) 0deg 15deg, transparent 15deg 30deg),
        radial-gradient(circle at 50% 40%, #f5ead0 0%, #e2d1a8 100%);
}

/* Colored corner ribbon on industry cards, tinted per industry type via
   the --industry-ribbon-color custom property set inline by JS. */
.card.industry-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 16px 0;
    border-color: transparent var(--industry-ribbon-color, #8a5a5a) transparent transparent;
    opacity: 0.85;
}

/* SVG icons for cards */
.card-svg-icon {
    width: 30px;
    height: 30px;
    margin: 4px 0;
}

/* Action Panel */
#action-panel {
    width: 310px;
    padding: 8px 12px;
    border-left: 1px solid var(--border-dark);
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s;
    /* Wood-grain texture effect */
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(0,0,0,0.04) 3px,
            rgba(0,0,0,0.04) 6px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            rgba(201,168,76,0.02) 8px,
            rgba(201,168,76,0.02) 9px
        ),
        var(--bg-medium);
}

#action-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    flex: 1;
    align-items: stretch;
}

.action-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    min-height: 48px;
    height: auto;
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    border-left: 4px solid var(--border-dark);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
}

/* Action pip — left indicator strip */
.action-pip {
    display: block;
    width: 0;
    height: 100%;
    flex-shrink: 0;
}

.action-label-text {
    padding: 6px 4px;
    text-align: center;
    flex: 1;
    line-height: 1.2;
}

/* Per-action color coding via left border */
.action-build   { border-left-color: #2ecc71; }
.action-network { border-left-color: #3498db; }
.action-develop { border-left-color: #e67e22; }
.action-sell    { border-left-color: #f1c40f; }
.action-loan    { border-left-color: #e74c3c; }
.action-scout   { border-left-color: #9b59b6; }
.action-pass    { border-left-color: #7f8c8d; }

.action-build:hover:not(:disabled)   { background: #1a3d25; border-left-color: #27ae60; color: #2ecc71; }
.action-network:hover:not(:disabled) { background: #1a2d3d; border-left-color: #2980b9; color: #3498db; }
.action-develop:hover:not(:disabled) { background: #3d2a1a; border-left-color: #d35400; color: #e67e22; }
.action-sell:hover:not(:disabled)    { background: #3d370a; border-left-color: #d4ac0d; color: #f1c40f; }
.action-loan:hover:not(:disabled)    { background: #3d1a1a; border-left-color: #c0392b; color: #e74c3c; }
.action-scout:hover:not(:disabled)   { background: #2a1a3d; border-left-color: #8e44ad; color: #9b59b6; }
.action-pass:hover:not(:disabled)    { background: #2a2a2a; border-left-color: #636e72; color: #95a5a6; }

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

.action-btn.active {
    border-left-color: var(--accent-gold);
    background: var(--bg-light);
    color: var(--accent-gold);
    box-shadow: inset 0 0 8px rgba(201,168,76,0.1);
}

.action-build.active   { border-left-color: #2ecc71; background: #1a3d25; color: #2ecc71; }
.action-network.active { border-left-color: #3498db; background: #1a2d3d; color: #3498db; }
.action-develop.active { border-left-color: #e67e22; background: #3d2a1a; color: #e67e22; }
.action-sell.active    { border-left-color: #f1c40f; background: #3d370a; color: #f1c40f; }
.action-loan.active    { border-left-color: #e74c3c; background: #3d1a1a; color: #e74c3c; }
.action-scout.active   { border-left-color: #9b59b6; background: #2a1a3d; color: #9b59b6; }
.action-pass.active    { border-left-color: #7f8c8d; background: #2a2a2a; color: #95a5a6; }

.pass-btn {
    grid-column: span 1;
}

/* Player Mat */
#player-mat-container {
    width: 310px;
    min-width: 0;
    padding: 8px 12px;
    border-left: 1px solid var(--border-dark);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s;
}

#player-mat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 4px 6px;
    min-height: 0;
    overflow: hidden;
    flex: 1;
}

.mat-industry {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mat-industry-label {
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.mat-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}

.mat-tile {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 9px;
    font-weight: 600;
    border: 1px solid var(--border-dark);
    background: var(--bg-dark);
    color: var(--text-secondary);
    transition: all 0.2s;
}

.mat-tile-icon {
    width: 12px;
    height: 12px;
    display: flex;
    opacity: 0.75;
}

.mat-tile-icon .card-svg-icon {
    width: 12px;
    height: 12px;
}

.mat-tile.used .mat-tile-icon {
    opacity: 0.3;
}

.mat-tile.available {
    border-color: var(--accent-copper);
    color: var(--text-primary);
    box-shadow: 0 0 4px rgba(184,115,51,0.2);
}

.mat-tile.used {
    opacity: 0.25;
}

/* Industry-colored mat tiles */
.mat-tile[data-type="cottonMill"].available { border-color: var(--cotton-color); }
.mat-tile[data-type="coalMine"].available { border-color: var(--coal-mine-color); }
.mat-tile[data-type="ironWorks"].available { border-color: var(--iron-works-color); }
.mat-tile[data-type="manufacturer"].available { border-color: var(--manufacturer-color); }
.mat-tile[data-type="pottery"].available { border-color: var(--pottery-color); }
.mat-tile[data-type="brewery"].available { border-color: var(--brewery-color); }

/* ============================================================================
   Board SVG Styles
   ============================================================================ */

/* ===================== Board (painted relief map) ===================== */

/* Connections */
.connection-line {
    stroke-linecap: round;
    cursor: pointer;
    transition: stroke-width 0.2s;
}

.connection-line.highlight {
    stroke: var(--accent-gold) !important;
    stroke-width: 8 !important;
    stroke-opacity: 1 !important;
    stroke-dasharray: none !important;
    filter: drop-shadow(0 0 6px rgba(201,168,76,0.85));
}

/* On the board art the route is printed already: light it, don't cover it. */
.connection-line.route.highlight {
    stroke: #ffd36e !important;
    stroke-width: 7 !important;
    stroke-opacity: 0.7 !important;
    filter: drop-shadow(0 0 4px rgba(255,211,110,0.9));
    animation: route-pulse 1.6s ease-in-out infinite;
}

.connection-line.route.highlight:hover {
    stroke-width: 9 !important;
    stroke-opacity: 0.95 !important;
    animation: none;
}

.connection-line.route.chosen {
    stroke: #8fdc8f !important;
    stroke-width: 7 !important;
    stroke-opacity: 0.85 !important;
    filter: drop-shadow(0 0 4px rgba(143,220,143,0.9));
}

@keyframes route-pulse {
    50% { opacity: 0.55; }
}

/* Town plinths */
.city-group {
    cursor: pointer;
}

.city-group:hover .city-bg {
    stroke: var(--accent-gold);
    filter: drop-shadow(0 0 7px rgba(201,168,76,0.6));
}

.city-label {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.7px;
    fill: #fdf4e0;
    text-anchor: middle;
    paint-order: stroke;
    stroke: rgba(0,0,0,0.5);
    stroke-width: 1.6px;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Fill comes from the region colour set inline — do not override it here. */
.city-label-bg {
    stroke-linejoin: round;
}

/* Industry slots on board */
.industry-slot {
    cursor: pointer;
    transition: filter 0.2s;
}

.industry-slot:hover {
    filter: drop-shadow(0 0 5px rgba(201,168,76,0.7));
}

.slot-icon {
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.slot-level {
    font-size: 7px;
    fill: #e8dcbc;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    font-weight: 600;
}

/* Built industry tiles on board */
.built-tile.flipped {
    opacity: 1;
}

/* Merchant warehouses */
.merchant-group {
    cursor: pointer;
}

.merchant-group:hover .merchant-bg {
    stroke: var(--accent-gold);
    filter: drop-shadow(0 0 6px rgba(201,168,76,0.5));
}

/* Body fill is the merchantStone gradient, set inline. */
.merchant-bg {
    rx: 4;
    ry: 4;
}

.merchant-label {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.6px;
    fill: #e9dcbb;
    text-anchor: middle;
    pointer-events: none;
}

/* Empty beer spaces; filled barrels are drawn inline. */
.merchant-slot {
    fill: rgba(0,0,0,0.3);
}

/* Brewery farm */
.brewery-farm {
    cursor: pointer;
}

.brewery-farm:hover .brewery-farm-bg {
    stroke: var(--accent-gold);
    filter: drop-shadow(0 0 6px rgba(201,168,76,0.5));
}

.brewery-farm-bg {
    rx: 4;
    ry: 4;
}

/* Link tiles on board */
.link-tile {
    stroke-width: 0;
}

/* Highlight for valid placements */
.highlight-slot {
    animation: pulse-glow 1.4s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(224,186,92,0.65)); }
    50%      { filter: drop-shadow(0 0 11px rgba(255,208,110,1)); }
}

/* Over board artwork the space itself is almost transparent, so a glow
   alone barely shows: light its outline and wash it too. */
.industry-slot.highlight-slot > rect:first-child {
    fill: rgba(255, 211, 110, 0.22);
    stroke: #ffd36e;
    stroke-width: 2.2;
    stroke-opacity: 1;
}

/* Built tiles, farm breweries and merchant spaces to pick during a sale: a
   ring above the piece, gold while it can be picked, green once it is. */
.pick-ring {
    fill: rgba(255, 211, 110, 0.12);
    stroke: #ffd36e;
    stroke-width: 2.2;
}

.picked .pick-ring {
    fill: rgba(143, 220, 143, 0.18);
    stroke: #8fdc8f;
    filter: drop-shadow(0 0 4px rgba(143,220,143,0.9));
}

/* A tag over a lit piece, e.g. what selling it to cover income brings. */
.pick-badge { pointer-events: none; }

.pick-badge rect {
    fill: rgba(28, 20, 13, 0.95);
    stroke: #ffd36e;
    stroke-width: 1.2;
}

.pick-badge text {
    fill: #fff1c2;
    font: 700 12px 'Source Sans Pro', sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
}

.merchant-space {
    cursor: pointer;
}


/* VP/Income indicators on tiles */
.tile-vp {
    font-size: 8px;
    fill: var(--accent-gold);
    font-weight: 700;
    text-anchor: middle;
    pointer-events: none;
}

.tile-income {
    font-size: 7px;
    fill: #7ec87e;
    text-anchor: middle;
    pointer-events: none;
}

/* ============================================================================
   Toasts
   ============================================================================ */

#toast-container {
    position: fixed;
    top: 60px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toast {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-medium);
    border: 1px solid var(--border-dark);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    animation: toast-in 0.3s ease-out;
    max-width: 360px;
}

.toast.info { border-left: 3px solid #3498db; }
.toast.success { border-left: 3px solid #2ecc71; }
.toast.warning { border-left: 3px solid #f39c12; }
.toast.error { border-left: 3px solid #e74c3c; }

@keyframes toast-in {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ============================================================================
   Scoring Overlay
   ============================================================================ */

#scoring-overlay, #gameover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
}

#scoring-overlay.hidden, #gameover-overlay.hidden {
    display: none;
}

.scoring-content, .gameover-content {
    background: var(--bg-medium);
    border: 2px solid var(--accent-gold);
    border-radius: 12px;
    padding: 30px 40px;
    min-width: 500px;
    max-width: 700px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

.scoring-content h2, .gameover-content h1 {
    color: var(--accent-gold);
    margin-bottom: 20px;
}

.scoring-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.scoring-table th, .scoring-table td {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid var(--border-dark);
    font-size: 14px;
}

.scoring-table th {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.scoring-table .total-row {
    font-weight: 700;
    font-size: 16px;
    color: var(--accent-gold);
    border-top: 2px solid var(--accent-gold);
}

/* ============================================================================
   Responsive & Scrollbar
   ============================================================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* Tooltip */
.tooltip {
    position: absolute;
    background: var(--bg-dark);
    border: 1px solid var(--accent-copper);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-primary);
    z-index: 500;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    max-width: 250px;
}

.tooltip-title {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--accent-gold);
}

.tooltip-stat {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Selection highlight for build targets */
.selectable {
    cursor: pointer;
}

.selectable:hover {
    filter: brightness(1.2);
}

.selected-target {
    stroke: var(--accent-gold) !important;
    stroke-width: 3 !important;
    filter: drop-shadow(0 0 6px rgba(201,168,76,0.6));
}


/* ---- Printed card faces (assets/cards/) ---- */
/* The art is 500x702. Let aspect-ratio size the box and `contain` do the fit,
   so a card is never stretched or cropped whatever the hand row does. */
.card.card-art {
    padding: 0;
    overflow: hidden;
    background: #14110c;
    border-width: 1px;
    height: min(var(--card-height), calc((100cqi - 42px) / 8 * 1.404));
    width: auto;
    aspect-ratio: 500 / 702;
    min-width: 0;
    flex: 0 0 auto;
}

.card.card-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    -webkit-user-drag: none;
    user-select: none;
}

.card.card-art .card-art-label {
    position: absolute;
    z-index: 1;
    right: 3px;
    bottom: 4px;
    left: 3px;
    padding: 3px 2px;
    border: 1px solid rgba(232, 213, 183, 0.75);
    border-radius: 3px;
    background: rgba(24, 20, 14, 0.9);
    color: #f4e7c9;
    font-family: 'Cinzel', serif;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
}

/* Keep the selection and validity cues readable over artwork. */
.card.card-art.invalid-discard img { filter: grayscale(0.75) brightness(0.45); }
.card.card-art.valid-discard {
    border-color: var(--accent-gold);
    box-shadow: 0 0 10px rgba(201,168,76,0.75);
}
.card.card-art.selected {
    border-color: var(--accent-gold);
    box-shadow: 0 0 14px rgba(201,168,76,0.9);
}
.card.card-art.scout-queued img { filter: sepia(0.5) brightness(0.7); }

/* "Cotton Mill / Manufacturer" in two lines, not three. */
.card.card-art .card-art-label.dual {
    letter-spacing: -0.2px;
    font-size: 7px;
}

/* A hovered hand card, shown large above the hand (see bindCardHover). */
#card-preview {
    position: fixed;
    z-index: 900;
    margin: 0;
    pointer-events: none;
    transform: none;
    animation: card-preview-in 0.12s ease-out;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(201, 168, 76, 0.6);
}

#card-preview[hidden] { display: none; }

#card-preview.card {
    width: 150px;
    min-width: 0;
    height: 220px;
    font-size: 15px;
}

#card-preview.card.card-art {
    width: 210px;
    height: auto;
    border-radius: 11px;
}

#card-preview.card-art .card-art-label {
    right: 6px;
    bottom: 8px;
    left: 6px;
    padding: 5px 4px;
    font-size: 13px;
}

@keyframes card-preview-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ...and the places on the board it is for: cyan, apart from the gold of
   the action highlights. */
.card-hint-ring {
    fill: rgba(110, 215, 255, 0.16);
    stroke: #79dcff;
    stroke-width: 2.4;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(110, 215, 255, 0.95));
}

.card-hint-ring.town {
    fill: rgba(110, 215, 255, 0.1);
    stroke-width: 3;
}

/* What another player just did pulses three times in their colour, with a
   pale halo so dark colours still show on the night board; their panel in
   the sidebar pulses with it. */
.flash-ring,
.flash-route {
    fill: none;
    stroke: var(--flash);
    filter: drop-shadow(0 0 1.5px rgba(255, 246, 220, 0.95)) drop-shadow(0 0 6px var(--flash));
    animation: flash-pulse 0.8s ease-in-out 3 both;
}

.flash-ring {
    stroke-width: 3.5;
    fill: var(--flash);
    fill-opacity: 0.22;
}

.flash-route {
    stroke-width: 10;
    stroke-linecap: round;
    stroke-opacity: 0.8;
}

@keyframes flash-pulse {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

.player-panel.just-moved {
    animation: panel-pulse 0.8s ease-in-out 3;
}

@keyframes panel-pulse {
    50% { box-shadow: 0 0 0 2px var(--flash), 0 0 14px var(--flash); }
}


/* ---- Small screens ---- */
@media (max-width: 760px) {
    body {
        width: 100%;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .screen,
    #game-screen {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }

    #setup-screen {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 16px;
    }

    .setup-container {
        width: min(100%, 440px);
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        padding: 24px 18px;
    }

    #game-screen {
        flex-direction: column;
    }

    #top-bar {
        height: auto;
        min-height: 44px;
        padding: 6px 10px;
        gap: 6px 10px;
        flex-wrap: wrap;
    }

    .era-indicator { gap: 8px; }
    #era-label { font-size: 13px; letter-spacing: 1px; }
    #round-label, .turn-info, .market-summary { font-size: 11px; }
    .turn-info { gap: 6px; }
    #current-player-label { padding: 3px 7px; }
    .market-summary { gap: 8px; }

    #action-phase-bar {
        height: auto;
        min-height: 38px;
        padding: 6px 8px;
        gap: 6px;
        flex-wrap: wrap;
    }

    .phase-steps { gap: 3px; }
    .phase-step { padding: 3px 5px; gap: 3px; font-size: 10px; }
    .phase-step-arrow { display: none; }
    .phase-instruction { min-width: 0; flex: 1 1 100%; order: 2; }
    .phase-cancel-btn { margin-left: auto; }

    #game-area {
        display: contents;
    }

    #board-container {
        order: 1;
        width: 100%;
        height: min(84vw, 36dvh);
        min-height: 260px;
        max-height: 520px;
        flex: none;
        padding: 2px;
    }

    #game-board {
        width: 100%;
        height: 100%;
        max-height: none;
    }

    .board-tools { top: 6px; right: 6px; }
    .board-zoom-btn { width: 36px; height: 36px; }
    .board-side-btn { width: 38px; height: 38px; }

    #right-panel {
        order: 3;
        width: 100%;
        max-height: none;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 6px;
        padding: 6px;
        border-left: 0;
        border-top: 1px solid var(--border-dark);
    }

    #player-panels {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 5px;
    }

    .player-panel { padding: 6px 7px 6px 10px; }

    #markets-panel,
    #game-log-panel { min-width: 0; }

    #game-log-panel {
        min-height: 120px;
        max-height: 180px;
    }

    #game-log { max-height: 140px; }

    #bottom-panel {
        order: 2;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        height: auto;
        flex: none;
        gap: 0;
    }

    #hand-container {
        grid-column: 1;
        min-width: 0;
        padding: 8px;
        container-type: normal;
    }

    #player-hand {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
        gap: 6px;
        overflow: visible;
        flex: none;
    }

    .card {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 104px;
        padding: 4px;
    }

    .card.card-art {
        width: 100%;
        height: auto;
        aspect-ratio: 500 / 702;
    }

    .card.card-art .card-art-label {
        right: 2px;
        bottom: 3px;
        left: 2px;
        padding: 2px 1px;
        font-size: clamp(6px, 2.1vw, 8px);
    }

    #action-panel,
    #player-mat-container {
        grid-column: 1;
        width: auto;
        min-width: 0;
        padding: 8px;
    }

    #action-panel { border-left: 0; }
    #player-mat-container { border-left: 0; border-top: 1px solid var(--border-dark); }
    #action-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .action-btn { min-height: 44px; font-size: 10px; }

    #player-mat {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(28px, auto);
        overflow: visible;
    }

    #scoring-overlay {
        align-items: flex-start;
        overflow-y: auto;
        padding: 12px;
    }

    .scoring-content,
    .gameover-content {
        width: 100%;
        max-width: 560px;
        min-width: 0;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        margin: auto;
    }
}


/* ---- Mat tiles showing real chip art ---- */
.mat-tile.mat-tile-art {
    padding: 0;
    overflow: hidden;
    background: #14110c;
}

/* Chips are square (238x238), so keep mat tiles square too. */
.mat-tile.mat-tile-art {
    aspect-ratio: 1 / 1;
}

.mat-tile.mat-tile-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    -webkit-user-drag: none;
}

.mat-tile.mat-tile-art.used img { filter: grayscale(0.85) brightness(0.4); }

/* ---- Full player mat: the printed board with tiles on their spaces ---- */
#player-mat-container .mat-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

#mat-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: -5px 0;
    padding: 0;
    background: none;
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
}

#mat-expand-btn[hidden] { display: none; }

#mat-expand-btn:hover,
#mat-expand-btn:focus-visible {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

#mat-expand-btn svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#player-mat-container.expandable #player-mat { cursor: zoom-in; }

#player-mat-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    padding: 16px;
    background: rgba(0,0,0,0.75);
    overflow: auto;
    z-index: 1100;
}

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

#player-mat-sheet {
    /* As large as the viewport allows with the header on top; the mat
       artwork is 1920 x 1553. */
    width: min(1240px, 100%, calc((100vh - 32px - 48px) * 1920 / 1553));
    width: min(1240px, 100%, calc((100dvh - 32px - 48px) * 1920 / 1553));
    margin: auto;
    background: var(--bg-medium);
    border: 2px solid var(--accent-gold);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

#player-mat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 10px 6px 16px;
    border-bottom: 1px solid var(--border-dark);
}

#player-mat-swatch {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
}

#player-mat-title {
    font-size: 16px;
    color: var(--accent-gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#player-mat-legend {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
}

#player-mat-close {
    flex: none;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

#player-mat-close:hover,
#player-mat-close:focus-visible { color: var(--text-primary); }

#player-mat-board {
    position: relative;
    container-type: inline-size;
}

#player-mat-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 1553;
    user-select: none;
    -webkit-user-drag: none;
}

#player-mat-spaces {
    position: absolute;
    inset: 0;
}

.pm-space {
    position: absolute;
    border-radius: 0.4cqw;
    cursor: help;
}

/* Spent spaces show the printed art, a little darker. */
.pm-space.empty { background: rgba(12, 8, 4, 0.42); }

/* Chips sit just inside the silver frame, covering the printed motif. */
.pm-chip {
    position: absolute;
    inset: 6.3%;
    border-radius: 6%;
    overflow: hidden;
    box-shadow: 0 0.15cqw 0.5cqw rgba(0,0,0,0.65);
}

.pm-chip img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
}

/* Tiles further down the stack peek out below, clear of the cost ribbons. */
.pm-chip-under {
    transform: translate(calc(var(--depth) * 4%), calc(var(--depth) * 8%));
    filter: brightness(0.62) saturate(0.8);
    box-shadow: 0 0 0 max(1px, 0.08cqw) rgba(0,0,0,0.7),
                0 0.15cqw 0.5cqw rgba(0,0,0,0.65);
}

.pm-chip-plain {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    background: #3a2c4d;
    border: 2px solid var(--industry);
    color: var(--text-primary);
    font-size: max(10px, 1.4cqw);
}

/* A dark gap before the light ring keeps it distinct on every chip colour. */
.pm-space.next .pm-chip-top {
    box-shadow: 0 0 0 max(1px, 0.1cqw) rgba(0,0,0,0.85),
                0 0 0 max(3px, 0.34cqw) #fff1c2,
                0 0 max(10px, 1.4cqw) max(3px, 0.4cqw) rgba(255, 226, 140, 0.8);
    animation: pm-next-glow 1.8s ease-in-out infinite;
}

@keyframes pm-next-glow {
    50% {
        box-shadow: 0 0 0 max(1px, 0.1cqw) rgba(0,0,0,0.85),
                    0 0 0 max(3px, 0.34cqw) #fff1c2,
                    0 0 max(4px, 0.6cqw) 0 rgba(255, 226, 140, 0.4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm-space.next .pm-chip-top { animation: none; }
}

/* Stack size, tucked into the chip's empty top-right corner. */
.pm-count {
    position: absolute;
    top: 9%;
    right: 9%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: max(14px, 2.3cqw);
    height: max(14px, 2.3cqw);
    padding: 0 max(2px, 0.45cqw);
    border: max(1px, 0.12cqw) solid var(--accent-gold);
    border-radius: 999px;
    background: rgba(28, 20, 13, 0.92);
    color: var(--text-primary);
    font: 700 max(8px, 1.3cqw)/1 'Cinzel', serif;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ---- Choosing on the mat (Build, Develop) ---- */
#player-mat-actions {
    display: flex;
    gap: 6px;
}

#player-mat-actions:empty { display: none; }

.pm-action {
    padding: 5px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-primary);
    font: 600 12px/1.2 'Source Sans Pro', sans-serif;
    white-space: nowrap;
    cursor: pointer;
}

.pm-action:hover,
.pm-action:focus-visible {
    border-color: var(--accent-gold);
    color: var(--accent-brass);
}

/* Choosing on the compact mat, when the full mat's artwork is missing:
   the industries that can be chosen glow, with what choosing them costs. */
#player-mat.picking .mat-industry:not(.pickable) { opacity: 0.35; }

.mat-industry.pickable {
    margin: -1px;
    padding: 1px;
    border-radius: 3px;
    background: rgba(201, 168, 76, 0.1);
    box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.45);
    cursor: pointer;
}

.mat-industry.pickable:hover,
.mat-industry.pickable:focus-visible {
    background: rgba(201, 168, 76, 0.22);
    box-shadow: inset 0 0 0 1px var(--accent-gold);
    outline: none;
}

.mat-tile.next {
    border-color: var(--accent-gold);
    box-shadow: 0 0 6px rgba(255, 211, 110, 0.9);
}

.mat-tile.taken { opacity: 0.3; filter: grayscale(0.8); }

.mat-pick-badge {
    color: #fff1c2;
    font-weight: 700;
    text-transform: none;
}

#mat-pick-actions {
    display: flex;
    gap: 4px;
    margin: -4px 0 -4px auto;
}

.mat-pick-action {
    padding: 2px 8px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    color: var(--text-primary);
    font: 600 10px/1.2 'Source Sans Pro', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

.mat-pick-action:hover,
.mat-pick-action:focus-visible {
    border-color: var(--accent-gold);
    color: var(--accent-brass);
}

/* Everything but the choices steps back. */
#player-mat-board.picking #player-mat-image { filter: brightness(0.55) saturate(0.7); }
#player-mat-board.picking .pm-space:not(.pickable) { filter: brightness(0.6) saturate(0.6); }

.pm-space.pickable {
    cursor: pointer;
    z-index: 1;
    transition: transform 0.12s ease-out;
}

.pm-space.pickable:hover,
.pm-space.pickable:focus-visible {
    transform: translateY(-1.5%) scale(1.04);
    outline: none;
}

.pm-space.pickable:focus-visible .pm-chip-top {
    outline: max(2px, 0.25cqw) solid var(--accent-gold);
    outline-offset: max(2px, 0.3cqw);
}

/* What choosing this tile costs, on a tab under the chip. */
.pm-pick-badge {
    position: absolute;
    left: 50%;
    bottom: -4%;
    z-index: 2;
    transform: translateX(-50%);
    padding: max(1px, 0.2cqw) max(4px, 0.6cqw);
    border: max(1px, 0.12cqw) solid #fff1c2;
    border-radius: 999px;
    background: rgba(28, 20, 13, 0.95);
    color: #fff1c2;
    font: 700 max(9px, 1.15cqw)/1.1 'Source Sans Pro', sans-serif;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* A tile a pending Develop takes off: faded where nothing is left under it,
   and marked on its space either way. */
.pm-chip-ghost { opacity: 0.35; filter: grayscale(0.8); }

.pm-taken {
    position: absolute;
    top: 9%;
    left: 9%;
    z-index: 2;
    padding: 0 max(3px, 0.4cqw);
    border-radius: 999px;
    background: #a8322a;
    color: #fff;
    font: 700 max(9px, 1.2cqw)/1.4 'Source Sans Pro', sans-serif;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

#player-mat-sheet { container-type: inline-size; }

/* A narrow mat puts the legend on its own line under the title... */
@container (max-width: 560px) {
    #player-mat-header { flex-wrap: wrap; row-gap: 0; padding-left: 12px; }
    #player-mat-title { flex: 1; font-size: 14px; }
    #player-mat-legend { order: 3; flex-basis: 100%; margin: 0 0 4px; font-size: 10px; }
    #player-mat-actions { order: 4; flex-basis: 100%; margin-bottom: 6px; }
}

/* ...unless height is what limits it (phones held sideways). */
@media (max-height: 500px) {
    #player-mat-legend { display: none; }
}

@media (max-width: 760px) {
    #player-mat-overlay { padding: 12px; }
    #player-mat-sheet { width: min(100%, calc((100dvh - 24px - 70px) * 1920 / 1553)); min-width: min(100%, 320px); }
    #mat-expand-btn { width: 26px; height: 26px; margin: -8px 0; }
}

/* ---- Market cubes ---- */
.market-space .cube-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.market-space.filled {
    background: transparent !important;
    border-color: rgba(201,168,76,0.25);
    padding: 1px;
}


/* ---- Action buttons: brass plates, matching the board ---- */
.action-btn {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(0,0,0,0.12) 55%, rgba(0,0,0,0.3) 100%),
        linear-gradient(180deg, #3a3425 0%, #26221a 100%) !important;
    border: 1px solid #6a5a38 !important;
    border-left-width: 1px !important;
    border-radius: 3px !important;
    color: #e6d6ab !important;
    font-family: 'Cinzel', serif !important;
    font-size: 11px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase;
    justify-content: center !important;
    padding: 0 4px !important;
    white-space: nowrap;
    position: relative;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 4px rgba(0,0,0,0.45);
    transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}

/* The per-action colour survives as a thin rule, not a slab. */
.action-btn::before {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    top: 3px;
    height: 2px;
    border-radius: 1px;
    background: var(--action-accent, rgba(201,168,76,0.55));
    opacity: 0.85;
}

.action-btn:hover:not(:disabled) {
    border-color: var(--accent-gold) !important;
    color: #fff3d4 !important;
    box-shadow: 0 0 10px rgba(201,168,76,0.45), 0 1px 0 rgba(255,255,255,0.12) inset;
}

.action-btn:disabled,
.action-btn[disabled] {
    opacity: 0.4;
    filter: saturate(0.3);
    cursor: not-allowed;
}

.action-btn.selected,
.action-btn.active {
    border-color: var(--accent-gold) !important;
    background:
        linear-gradient(180deg, rgba(201,168,76,0.3) 0%, rgba(120,95,35,0.25) 100%),
        linear-gradient(180deg, #3a3425 0%, #26221a 100%) !important;
    color: #fff6dd !important;
}

.action-btn[data-action="build"]   { --action-accent: #7a94a8; }
.action-btn[data-action="network"] { --action-accent: #5f93b2; }
.action-btn[data-action="develop"] { --action-accent: #b06f38; }
.action-btn[data-action="sell"]    { --action-accent: #b5840c; }
.action-btn[data-action="loan"]    { --action-accent: #bd5742; }
.action-btn[data-action="scout"]   { --action-accent: #8e6f9c; }
.action-btn[data-action="pass"]    { --action-accent: #7d7b74; }
.action-btn[data-icon="undo"]      { --action-accent: #c9a84c; }


/* ---- Action icons ---- */
.action-btn {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 6px 4px !important;
}

.action-pip {
    width: auto !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-icon {
    width: 22px;
    height: 22px;
    display: block;
    color: var(--action-accent, #c9a84c);
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.5));
    transition: color 0.15s, transform 0.15s;
}

.action-btn:hover:not(:disabled) .action-icon {
    color: #f2dca6;
    transform: translateY(-1px);
}

.action-btn.selected .action-icon,
.action-btn.active .action-icon {
    color: #fff6dd;
}

.action-label-text {
    padding: 0 !important;
    flex: 0 0 auto !important;
}

@media (min-width: 761px) and (max-width: 1100px) {
    #bottom-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        height: auto;
    }

    #hand-container {
        grid-column: 1 / -1;
        container-type: normal;
    }

    #player-hand {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 4px;
        overflow: visible;
    }

    .card {
        width: min(100%, 90px);
        min-width: 0;
        height: 126px;
        justify-self: center;
    }

    .card.card-art {
        width: auto;
        height: min(126px, 11.5vw);
        aspect-ratio: 500 / 702;
    }

    #action-panel,
    #player-mat-container {
        width: auto;
        min-width: 0;
    }
}