/* Copyright © 2026 David Simmons. All rights reserved. */

        :root {
            --bg-color: #1a1a24;
            --panel-color: #252538;
            --text-color: #f0f0f5;
            --accent: #ffd700;
        }
        * { box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        h1 { margin: 0 0 10px 0; font-size: 1.6rem; color: var(--accent); }
        .game-container {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            justify-content: center;
        }

        .panel {
            background-color: var(--panel-color);
            border-radius: 8px;
            padding: 7px 9px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        /* --- LEFT: finances, game log, and turn/end-game actions --- */
        /* Version 13 layout mockup: widened from 210px to 280px so all 14
           finance-chain abbreviations remain readable without overlap. */
        .left-panel {
            flex: 0 0 280px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            overflow: hidden; /* height is synced to the board-column by JS; this is a safety net */
        }
        .left-panel h3 { margin-top: 0; font-size: 0.85rem; margin-bottom: 3px; }

        /* Finances gets first claim on any spare vertical space (it's the
           section whose size actually grows with player count), and
           scrolls internally rather than pushing the panel taller if it
           ever doesn't fit (e.g. many players). */
        #finances-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
        #player-finances { font-size: 0.76rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
        .finance-card { margin-bottom: 4px; border-bottom: 1px dashed #445; padding-bottom: 3px; }
        .finance-card:last-child { border-bottom: none; margin-bottom: 0; }
        .finance-header { margin-bottom: 1px; }
        .finance-stocks { width: 100%; border-collapse: collapse; table-layout: fixed; }
        .finance-stocks th, .finance-stocks td {
            text-align: center;
            padding: 0;
            font-size: 0.64rem;
            border: none;
        }
        .finance-stocks th { color: #fff !important; font-weight: bold; }
        .finance-stocks td { font-weight: bold; }

        /* Version 13: all selected hotel chains are rendered directly by the game. */
        .finance-stocks { width: 100%; }

        .game-log {
            max-height: 80px;
            overflow-y: auto;
            background: #111;
            border-radius: 6px;
            padding: 5px 6px;
            font-size: 0.7rem;
            line-height: 1.3;
            color: #cfcfe0;
        }
        .game-log div { padding: 1px 0; border-bottom: 1px dashed #2a2a3a; }
        .game-log div:last-child { border-bottom: none; }

        .action-btn {
            width: 100%;
            padding: 10px;
            background-color: var(--accent);
            color: #000;
            border: none;
            font-size: 1rem;
            font-weight: bold;
            border-radius: 6px;
            cursor: pointer;
            margin-bottom: 8px;
        }
        .action-btn:disabled { background-color: #555; color: #888; cursor: not-allowed; }
        /* Version 14: selected menu choices use a slightly darker shade. */
        button.decision-selected:not(:disabled) { filter: brightness(0.78); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.28); }
        .end-game-btn { background-color: #ef4444; color: white; }
        .end-game-btn:disabled { background-color: #555; color: #888; }
        .undo-btn { background-color: #64748b; color: white; }
        .undo-btn:disabled { background-color: #555; color: #888; }

        .action-btn-row { display: flex; gap: 6px; }
        .action-btn-row .action-btn {
            flex: 1;
            width: auto;
            padding: 7px 3px;
            font-size: 0.7rem;
            line-height: 1.15;
            white-space: normal;
            margin-bottom: 0;
        }

        #game-timer-panel { line-height: 1.3; font-size: 0.8rem; }
        .status-bar {
            display: flex;
            flex-direction: column;
            gap: 2px;
            font-size: 0.86rem;
            font-weight: bold;
        }

        /* --- CENTER: status bar + board --- */
        .board-column { display: flex; flex-direction: column; gap: 10px; }

        /* Fixed two-row Dead Tiles tray. The lower row fills first; once it is
           full, additional dead tiles appear in the row directly above it.
           The tray and its containing panel never grow vertically, so adding
           dead tiles cannot change the height of the board column or side panels. */
        .dead-tiles-panel {
            height: 97px;
            min-height: 97px;
            max-height: 97px;
            overflow: hidden;
        }
        .dead-tiles-list {
            display: flex;
            flex-wrap: wrap-reverse;
            align-content: flex-start;
            gap: 5px;
            height: 58px;
            min-height: 58px;
            max-height: 58px;
            overflow: hidden;
        }
        .dead-tile {
            flex: 0 0 auto;
            height: 26px;
            background-color: #334;
            color: #fff;
            border: 2px solid #ff3b3b;
            border-radius: 4px;
            padding: 4px 7px;
            font-size: 0.7rem;
            line-height: 14px;
            font-weight: bold;
        }
        .dead-tiles-list:empty::after {
            content: 'None yet';
            color: #667;
            font-size: 0.75rem;
            font-style: italic;
        }

        /* Fixed, larger cell size so the board reads clearly at a glance.
           Cells are smaller than the original (38px vs 46px) since the
           board is now 18 columns wide instead of 12. */
        .board {
            display: grid;
            grid-template-columns: repeat(18, 38px);
            grid-auto-rows: 38px;
            gap: 3px;
            background-color: #111;
            padding: 8px;
            border-radius: 6px;
            width: max-content;
        }
        .cell {
            width: 38px;
            height: 38px;
            position: relative;
            background-color: #334;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.68rem;
            font-weight: bold;
            color: #889;
            border-radius: 4px;
            user-select: none;
        }
        .cell.placed { background-color: #778; color: #fff; }
        /* Shades the cells matching tiles currently in the player's hand,
           so they can see at a glance where each tile would land. */
        .cell.in-hand {
            background-color: #4b4b78;
            outline: 3px solid var(--accent);
            outline-offset: -3px;
            color: #fff;
        }
        /* Briefly flashes the tile that was just played 3 times in the
           color of the chain it belongs to (or the accent gold if it
           isn't chained yet), so any placement — human or CPU — is easy
           to spot at a glance. Uses a glow + slight scale pulse rather
           than just an outline, since an outline in the same hue as an
           already-chain-colored cell would be nearly invisible. Color is
           set per-use via the --flash-color custom property. */
        .cell.play-flash {
            animation: play-flash-pulse 0.5s ease-in-out 3 !important;
            position: relative;
            z-index: 20;
        }
        @keyframes play-flash-pulse {
            0%, 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
            50% { box-shadow: 0 0 0 4px #fff, 0 0 16px 6px var(--flash-color, var(--accent)); transform: scale(1.15); }
        }
        /* Special tiles (Beachfront, Convention Center, Airport, etc.):
           rendered with real artwork rather than a plain color, both
           on the board and in-hand. The actual image is set per-tile
           via inline style (background-image) from SPECIAL_TILES[name].img
           in JS, since there are 10 different pieces of art — these
           classes just provide the shared sizing/positioning. Each
           chain's price modifier is computed live in getStockPrice(). */
        .cell.special-tile, .tile-btn.special-tile {
            background-size: cover;
            background-position: center;
        }
        .cell.special-tile { font-size: 0; }
        .tile-btn.special-tile { color: transparent; border: 2px solid #ffd700; }
        .cell.airport-grounds { font-size: 0; }
        .cell.airport-footprint { background-repeat:no-repeat; }
        .cell.airport-preview { outline:3px solid #63d5ff !important; outline-offset:-3px; box-shadow:inset 0 0 0 3px rgba(99,213,255,.32),0 0 10px rgba(99,213,255,.7); z-index:3; }
        .end-game-reason { margin-bottom:14px; padding:12px 14px; border:2px solid #ffd700; border-radius:8px; background:rgba(255,215,0,.10); }
        .end-game-reason p { margin:7px 0 0; }

        /* Version 14: Hammer targeting and seven-flash animation. */
        .cell.hammer-target { cursor:pointer; outline:3px solid #ff3b30 !important; outline-offset:-3px; box-shadow:0 0 12px 4px rgba(255,59,48,.75); }
        .hammer-overlay { position:absolute; inset:0; z-index:8; border-radius:4px; background-size:cover; background-position:center; pointer-events:none; animation:hammer-seven-flashes .28s ease-in-out 7; }
        @keyframes hammer-seven-flashes { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.14;transform:scale(1.10)} }

        /* Version 12: one 4x1 Block Bar exists in the game. In hand it is a
           compact BB tile; on the board each occupied cell is deliberately
           dark with a visible border so the four-cell obstruction reads as
           one special structure. */
        .tile-btn.block-bar-tile {
            background: #101116;
            color: #f8fafc;
            border: 2px solid #9ca3af;
            letter-spacing: 0.05em;
        }
        .cell.block-bar-cell {
            background: #0d0f14 !important;
            color: #e5e7eb !important;
            border: 2px solid #6b7280;
            font-size: 0.54rem;
            line-height: 1;
            text-align: center;
        }

        /* Empty board cells the player can click while placing a
           Beachfront tile — pulses gold to invite a click. */
        .cell.pickable {
            cursor: pointer;
            animation: pickable-pulse 1s ease-in-out infinite;
        }
        @keyframes pickable-pulse {
            0%, 100% { outline: 2px solid #ffd700; outline-offset: -2px; box-shadow: 0 0 4px 1px rgba(255,215,0,0.4); }
            50%      { outline: 3px solid #ffd700; outline-offset: -3px; box-shadow: 0 0 10px 4px rgba(255,215,0,0.7); }
        }
        /* Small banner shown above the hand while picking a Beachfront square */
        .special-picker-banner {
            background: #3a3010;
            border: 1px solid #ffd700;
            border-radius: 6px;
            padding: 6px 8px;
            font-size: 0.75rem;
            color: #ffd700;
            text-align: center;
            margin-bottom: 6px;
        }
        .special-picker-banner button {
            margin-left: 8px;
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 4px;
            border: 1px solid #ffd700;
            background: #1a1a24;
            color: #ffd700;
            cursor: pointer;
        }
        /* Marks a chain-market row as currently boosted by an adjacent Beachfront tile */
        .boosted-badge {
            font-size: 0.68rem;
            margin-left: 3px;
            white-space: nowrap;
        }
        .boosted-badge.plus { color: #4ade80; }
        .boosted-badge.minus { color: #f87171; }
        /* Briefly flashes a red border around a hand tile that's about to
           be discarded as "dead" (would merge two safe chains), 3 times
           over about 2 seconds, matching the board's CPU-move flash. */
        .tile-btn.dead-flash {
            animation: dead-tile-flash-pulse 0.65s ease-in-out 3;
        }
        @keyframes dead-tile-flash-pulse {
            0%, 100% { border-color: #667; box-shadow: none; }
            50%      { border-color: #ff3b3b; box-shadow: 0 0 0 2px #ff3b3b; }
        }

        /* Chain colors, matched to the physical stock certificates */
        /* Chain colors, matched to the physical stock certificates.
           Class names are the CSS-safe versions of each chain's name
           (spaces stripped) — see chainClass() in the script below. */
        /* Version 13 color selections. Summit, Meridian and Sovereign retain
           their Version 12 colors; the other seven established chains use
           the newly selected palette colors. */
        .Landmark    { background-color: #7C3F16 !important; color: #fff; } /* Chocolate */
        .HarborHouse { background-color: #166534 !important; color: #fff; } /* Pine */
        .MetroStay   { background-color: #E11D48 !important; color: #fff; } /* Cherry */
        .TheGrand    { background-color: #FACC15 !important; color: #000; } /* Gold */
        .SunCoast    { background-color: #1D4ED8 !important; color: #fff; } /* Cobalt */
        .Horizon     { background-color: #5EEAD4 !important; color: #000; } /* Seafoam */
        .Summit      { background-color: #d94f86 !important; color: #fff; } /* Existing */
        .Regal       { background-color: #9333EA !important; color: #fff; } /* Amethyst */
        .Meridian    { background-color: #f97316 !important; color: #000; } /* Existing */
        .Sovereign   { background-color: #0d9488 !important; color: #fff; } /* Existing */

        /* Visual-only Version 13 chain colors. These classes are not wired
           into CHAINS yet and therefore do not alter game logic. */
        .Northstar   { background-color: #A21CAF !important; color: #fff; } /* Magenta — distinct from neutral tiles */
        .Crestwood   { background-color: #7A8B2E !important; color: #fff; } /* Olive */
        .Parkview    { background-color: #FDBA74 !important; color: #000; } /* Apricot */
        .Tradewinds  { background-color: #06B6D4 !important; color: #000; } /* Turquoise */

        /* Ensure light-background abbreviations remain readable in Finances. */
        .finance-stocks th.TheGrand,
        .finance-stocks th.Horizon,
        .finance-stocks th.Parkview,
        .finance-stocks th.Tradewinds { color: #000 !important; }

        /* --- RIGHT: stock market on top, hand of tiles below it --- */
        .right-panel { flex: 0 0 330px; display: flex; flex-direction: column; gap: 8px; }
        .right-panel h3 { margin-top: 0; font-size: 0.95rem; }
        /* The market panel takes first claim on any spare height (its
           table is the only right-panel content that could conceivably
           not fit); everything below it (hand, buttons, copyright) stays
           a fixed size so it's never pushed off-screen. */
        #market-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
        .market-table-wrap { overflow-y: auto; flex: 1 1 auto; min-height: 0; }

        table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.8rem; }
        th, td { padding: 4px 8px; border-bottom: 1px solid #445; }
        .buy-btn {
            background-color: #22c55e;
            color: white;
            border: none;
            padding: 3px 7px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.78rem;
        }
        .buy-btn:disabled { background-color: #475569; cursor: not-allowed; }


        .chart-btn {
            background-color: #334;
            color: #fff;
            border: 1px solid #667;
            padding: 5px 9px;
            font-size: 0.75rem;
            border-radius: 6px;
            cursor: pointer;
            white-space: nowrap;
        }
        .chart-btn:hover { background-color: var(--accent); color: #000; border-color: #fff; }

        /* Simple on/off toggle switch, used for "Bots vs. Bots mode" on the Game Settings screen */
        .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .switch-slider {
            position: absolute; cursor: pointer; inset: 0;
            background-color: #445; border-radius: 26px;
            transition: background-color 0.15s ease;
        }
        .switch-slider::before {
            content: ""; position: absolute; height: 20px; width: 20px;
            left: 3px; bottom: 3px; background-color: #fff; border-radius: 50%;
            transition: transform 0.15s ease;
        }
        .switch input:checked + .switch-slider { background-color: var(--accent); }
        .switch input:checked + .switch-slider::before { transform: translateX(20px); }

        .hand { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; min-height: 36px; }
        .hand .tile-btn {
            min-width: 0;
            padding: 6px 2px;
            font-size: 0.76rem;
        }
        .tile-btn {
            background-color: #445;
            color: #fff;
            border: 2px solid #667;
            padding: 10px 14px;
            font-weight: bold;
            font-size: 0.9rem;
            border-radius: 6px;
            cursor: pointer;
            transition: 0.2s;
        }
        .tile-btn:hover:not(:disabled) {
            background-color: var(--accent);
            color: #000;
            border-color: #fff;
        }
        .tile-btn:disabled { opacity: 0.4; cursor: not-allowed; }

        .overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
            visibility: hidden;
        }
        .overlay.active { visibility: visible; }

        /* Draggable merger announcement — deliberately a higher z-index than
           .overlay (100) so it stays visible and movable even while a merger
           decision modal is open underneath it. */
        .draggable-panel {
            position: fixed;
            top: 90px;
            right: 24px;
            width: 300px;
            background: var(--panel-color);
            border: 2px solid var(--accent);
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.6);
            z-index: 200;
        }
        .draggable-panel.hidden { display: none; }
        .draggable-header {
            background: #334;
            padding: 8px 12px;
            border-radius: 6px 6px 0 0;
            cursor: move;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            font-size: 0.9rem;
            user-select: none;
        }
        .drag-close-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 1.2rem;
            line-height: 1;
            cursor: pointer;
            padding: 0 2px;
        }
        .draggable-body { padding: 12px; font-size: 0.85rem; line-height: 1.6; max-height: 75vh; overflow-y: auto; }

        .modal {
            background: var(--panel-color);
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            max-width: 500px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        }
        /* Wider variant for the price chart, which needs room for 7 table
           columns. Two classes + comes after .modal so it wins on both
           specificity and source order. */
        .modal.price-chart-modal { max-width: 900px; text-align: left; }
        .price-chart-modal table { font-size: 0.82rem; }
        .price-chart-modal th, .price-chart-modal td { text-align: center; padding: 6px 8px; white-space: nowrap; }
        .price-chart-modal th { background: #1a1a24; }
        .price-chart-modal td:first-child, .price-chart-modal th:first-child { text-align: left; }
        .modal-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 15px; flex-wrap: wrap; }
        .modal select {
            padding: 8px;
            border-radius: 6px;
            font-size: 1rem;
            border: 1px solid #667;
            background: #1a1a24;
            color: #fff;
        }
        .modal label, .draggable-body label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            font-weight: bold;
        }
        .modal input[type="number"], .draggable-body input[type="number"] {
            width: 70px;
            padding: 6px;
            border-radius: 6px;
            border: 1px solid #667;
            background: #1a1a24;
            color: #fff;
            font-size: 1rem;
        }
        .modal input[type="number"]:disabled, .draggable-body input[type="number"]:disabled { opacity: 0.4; }

        #merger-stats table { width: 100%; font-size: 0.82rem; margin: 10px 0; }
        #merger-stats th, #merger-stats td { text-align: center; padding: 5px 6px; border-bottom: 1px solid #445; }
        #merger-stats th:first-child, #merger-stats td:first-child { text-align: left; }
        #merger-stats th { font-weight: bold; }
        #merger-stats tfoot td { font-weight: bold; border-top: 2px solid #667; border-bottom: none; }

        .game-over-ledger {
            text-align: left;
            background: #111;
            padding: 15px;
            border-radius: 6px;
            margin: 15px 0;
            font-family: monospace;
            line-height: 1.5;
            font-size: 0.9rem;
            max-height: 50vh;
            overflow-y: auto;
        }
    

/* ACQUISITIONS Online Version 6 additions. */
body.online-shell { min-width: 1180px; }
.online-topbar {
    width: 100%; max-width: 1395px; display: grid;
    grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 12px; margin-bottom: 10px; position: relative;
}
.online-brand { display:flex; align-items:baseline; gap:10px; justify-self:center; }
.online-brand h1 { margin:0; }
.online-badge { font-size:.72rem; padding:3px 7px; border-radius:999px; background:#34344a; color:#cbd5e1; }
.online-game-meta { justify-self:start; display:flex; gap:12px; font-size:.72rem; color:#cbd5e1; white-space:nowrap; }
.connection-pill { justify-self:end; font-size:.75rem; font-weight:700; padding:5px 9px; border-radius:999px; background:#5b2020; color:#fff; }
.connection-pill.connected { background:#166534; }
.online-screen { width:100%; }
.hidden { display:none !important; }
.lobby-shell { max-width:980px; margin:20px auto; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lobby-shell .panel { padding:16px; }
.lobby-shell h2,.lobby-shell h3 { margin-top:0; color:var(--accent); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.form-field { display:flex; flex-direction:column; gap:4px; }
.form-field.full { grid-column:1/-1; }
.form-field label { color:#cbd5e1; font-size:.78rem; font-weight:700; }
.form-field input,.form-field select { width:100%; padding:8px; border-radius:6px; border:1px solid #596174; background:#11131b; color:#fff; }
.lobby-actions { display:flex; gap:8px; margin-top:12px; }
.lobby-actions .action-btn { margin:0; }
.room-code { font-family:Consolas,monospace; font-size:1.35rem; letter-spacing:.12em; color:var(--accent); }
.seat-list { display:flex; flex-direction:column; gap:6px; }
.seat-row { background:#191927; border:1px solid #3b3b50; border-radius:6px; padding:7px 9px; display:flex; justify-content:space-between; align-items:center; }
.seat-row.me { border-color:var(--accent); }
.muted { color:#94a3b8; }
.small { font-size:.75rem; }
.online-message { min-height:20px; margin-top:8px; color:#f8d477; font-size:.8rem; }
.online-error { color:#ff7b7b; }
.online-game { max-width:1395px; margin:0 auto; }
.market-header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.market-footer { font-size:.66rem; color:#aaa; margin:3px 0 0 0; line-height:1.2; }
.market-chain-name { font-weight:bold; }
.market-buy-btn { border:0; border-radius:4px; padding:3px 7px; font-weight:700; cursor:pointer; }
.buy-btn.market-buy-btn { background-color:#22c55e; color:#fff; }
.buy-btn.market-buy-btn:disabled { background-color:#475569; color:#cbd5e1; opacity:1; cursor:not-allowed; }
.schedule13d-btn { background:#334; color:#fff; border:1px solid #667; }
.tile-btn.online-hand-tile { min-width:0; min-height:0; padding:6px 2px; font-size:.76rem; }
.tile-btn.online-hand-tile.selected { filter:brightness(.72); box-shadow:inset 0 0 0 2px #fff; }
.special-short { font-size:.62rem; line-height:1.05; text-align:center; padding:2px; }
#hand-help:empty { display:none; }
.pending-panel {
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
    z-index:220; width:min(440px,calc(100vw - 40px)); margin:0;
    border:2px solid var(--accent); background:#29250e; padding:14px;
    border-radius:8px; font-size:.82rem; box-shadow:0 10px 35px rgba(0,0,0,.65);
}
.pending-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.pending-actions button { width:auto; margin:0; padding:6px 9px; font-size:.76rem; }
.cell.clickable { cursor:pointer; }
.cell.clickable:hover { outline:2px solid var(--accent); outline-offset:-2px; }
#phase-display { color:var(--accent); }
.copyright-note { color:#667; text-align:center; font-size:.7rem; margin:6px 0 0 0; }
#online-game-over { border:1px solid #ef4444; margin-bottom:8px; padding:8px; border-radius:6px; background:#351a20; }
@media (max-width: 1250px) {
    body.online-shell { min-width:0; align-items:flex-start; }
    .online-topbar { min-width:1120px; }
}

/* Version 3 parity: special influence badges and merger workflow. */
.boosted-badge { display:inline-block; margin-left:4px; padding:1px 4px; border-radius:4px; font-size:.62rem; font-weight:800; line-height:1.15; vertical-align:middle; }
.boosted-badge.plus { background:#14532d; color:#86efac; border:1px solid #22c55e; }
.boosted-badge.minus { background:#7f1d1d; color:#fecaca; border:1px solid #ef4444; }
#merger-modal-overlay { z-index: 1400; }
.merger-modal { width:min(535px,94vw); max-height:90vh; overflow-y:auto; text-align:left; padding:0; border:2px solid var(--accent); }
.merger-modal-header { padding:12px 14px; background:#343448; font-size:1.08rem; font-weight:800; border-radius:6px 6px 0 0; }
.merger-modal-body { padding:14px; }
.merger-announcement-copy { font-size:1rem; line-height:1.55; }
.chain-tag { display:inline-block; padding:2px 7px; border-radius:5px; font-weight:800; }
.merger-choice-row,.merger-quick-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.merger-choice { min-width:110px; font-weight:800; }
.merger-continue,.merger-confirm { margin-top:16px; margin-bottom:0; }
.merger-stats { width:100%; border-collapse:collapse; font-size:.82rem; margin:12px 0; }
.merger-stats th,.merger-stats td { text-align:center; padding:6px; border-bottom:1px solid #445; }
.merger-stats th:first-child,.merger-stats td:first-child { text-align:left; }
.merger-stats tfoot td { font-weight:800; border-top:2px solid #667; }
.merger-input-row { margin:12px 0; font-weight:700; line-height:1.5; }
.merger-input-row label { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.merger-input-row input { width:88px; padding:6px; border-radius:6px; border:1px solid #667; background:#1a1a24; color:#fff; font-size:1rem; }
.merger-ack ul { margin:8px 0 16px 20px; padding:0; line-height:1.45; }

/* Version 5: founding choices use the established hotel-chain colors. */
.founding-chain-choice { min-width: 120px; border: 2px solid rgba(255,255,255,.35); font-weight: 800; }

/* Version 6: prominent connection/disconnection notice. */
.connection-alert-overlay{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.58);align-items:center;justify-content:center;padding:20px}
.connection-alert-overlay.active{display:flex}
.connection-alert-card{width:min(460px,92vw);background:#172033;color:#f8fafc;border:2px solid #ef4444;border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.55);padding:22px 24px;text-align:center}
.connection-alert-card h2{margin:0 0 12px}
.connection-alert-card p{font-size:16px;line-height:1.45;margin:0 0 18px}
.connection-alert-card .action-btn{min-width:90px}

/* Version 9: public waiting-game lobby */
.open-games-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.open-games-heading h2{margin-bottom:4px}
.open-room-list{display:grid;gap:8px}
.open-room-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid #c8d0d8;border-radius:8px;background:rgba(255,255,255,.55)}
.open-room-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.open-room-info span{font-size:.9rem;color:#5d6670}
.empty-room-list{padding:12px;border:1px dashed #b9c2cb;border-radius:8px;color:#626c76;text-align:center}

/* Version 9 correction: explicit host game termination */
.danger-btn{border:1px solid #9b2c2c;border-radius:8px;background:#7f1d1d;color:#fff;font-weight:700;padding:10px 16px;cursor:pointer}
.danger-btn:hover{filter:brightness(.92)}
.danger-btn.compact{padding:5px 9px;margin-left:8px;font-size:.82rem}

/* Version 9 refinement: consistent header controls and simpler lobby hierarchy */
.online-status-controls{justify-self:end;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:150px}
.online-status-controls .danger-btn.compact{margin-left:0}
.secondary-label{font-size:.68rem;font-weight:400;color:#94a3b8;margin-left:6px;white-space:nowrap}
.manual-join-help{margin:-4px 0 12px;font-size:.82rem}
.open-games-panel{border:1px solid rgba(255,215,0,.18)}
.open-room-card .action-btn{width:auto;min-width:110px;margin:0}

/* VERSION 10 — one-screen, state-driven opening workflow */
.v10-lobby{width:min(920px,calc(100vw - 28px));margin:8px auto}
.v10-main-card{padding:12px 14px}
.v10-intro,.v10-room-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.v10-intro h2{margin:0 0 2px;color:var(--accent);font-size:1.15rem}
.v10-section{margin-top:10px;padding-top:10px;border-top:1px solid #414158}
.v10-section-title{font-weight:800;color:var(--accent);font-size:.9rem}
.v10-create-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:7px 9px;align-items:end;margin-top:7px}
.v10-create-grid .form-field,.v10-join-line .form-field,.v10-bot-line .form-field{gap:2px}
.v10-create-grid .form-field label,.v10-join-line label,.v10-bot-line label{font-size:.68rem}
.v10-create-grid input,.v10-create-grid select,.v10-join-line input,.v10-bot-line select{padding:6px}
.v10-check{font-size:.75rem;display:flex;gap:6px;align-items:center;padding:7px 0}
.v10-primary{align-self:end;margin:0}
.v10-join-line,.v10-bot-line{display:flex;align-items:end;gap:9px;margin-top:7px}
.v10-join-line .form-field{flex:1}
.v10-room-card{padding:8px 10px}
.v10-room-code{font-size:.9rem;letter-spacing:.06em}
.v10-seat-list{margin-top:7px;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.v10-seat-list .seat-row{margin:0;padding:6px 8px}
.v10-host-controls{margin-top:7px}
.v10-ready-note{display:block;margin-top:7px;color:#b7e4c7;font-weight:700;font-size:.78rem}
.v10-small-btn{padding:5px 8px;font-size:.72rem}
.v10-advanced{margin-top:10px;padding-top:9px;border-top:1px dashed #55566d}
.v10-main-card .online-message{min-height:0;margin-top:5px}
#refresh-rooms-btn{margin:0}
@media(max-height:760px){
  body.online-shell{padding-top:7px;padding-bottom:7px}
  .online-topbar{margin-bottom:5px}
  .v10-lobby{margin:3px auto}
  .v10-main-card{padding:9px 12px}
  .v10-section{margin-top:7px;padding-top:7px}
}

/* VERSION 10 CORRECTION — bot clarity and authoritative settings confirmation */
.v10-bot-difficulty{min-width:155px}
.v10-bot-difficulty select{width:100%;min-width:145px}
.v10-settings-summary{
  margin-top:7px;padding:6px 8px;border-radius:6px;
  background:#1d1d2b;color:#d9d9e5;font-size:.74rem;font-weight:700;
  text-align:center;white-space:normal
}

/* VERSION 10 CORRECTION 2 — explicit first-round tile rule */
.tile-rule-display{display:block;margin-top:4px;padding-top:4px;border-top:1px solid #44455b;color:#ffd86b;font-weight:800;font-size:.76rem}

/* Version 11 Corrected 1: authoritative legality and placement previews. */
.tile-btn.online-hand-tile.rule-unplayable {
    filter: grayscale(.85) brightness(.55);
    opacity:.58;
    cursor:not-allowed;
}
.cell.legal-special-placement {
    outline:3px solid #ffd700;
    outline-offset:-3px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.38);
    cursor:pointer;
}
.cell.block-preview {
    outline:3px solid #ffb000 !important;
    outline-offset:-3px;
    box-shadow:inset 0 0 0 3px rgba(255,176,0,.35),0 0 10px rgba(255,176,0,.7);
    z-index:3;
}

/* Version 11 Corrected 2 */
.cell.legal-special-placement {
    color:#fff !important;
    text-shadow:0 1px 2px #000,0 0 4px #000;
}
.merger-notice {
    position:fixed; left:50%; top:18%; transform:translate(-50%,-12px);
    z-index:500; min-width:320px; max-width:min(620px,calc(100vw - 40px));
    padding:14px 22px; border:3px solid #ffd700; border-radius:10px;
    background:rgba(18,18,22,.96); color:#fff; text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.7); opacity:0; transition:.22s ease;
    pointer-events:none;
}
.merger-notice.visible { opacity:1; transform:translate(-50%,0); }
.merger-notice strong { display:block; font-size:1.35rem; letter-spacing:.12em; color:#ffd700; }
.merger-notice span { display:block; margin-top:4px; font-size:1rem; }


/* Version 14 Development 5 — Clerk sign-in and ACQUISITIONS account setup. */
.auth-shell{width:min(520px,calc(100vw - 28px));margin:24px auto}
.auth-card{padding:20px}
.auth-card h2{margin:0 0 8px;color:var(--accent)}
.auth-card .form-field{margin:10px 0}
#clerk-sign-in{display:flex;justify-content:center}
#auth-loading{text-align:center;color:#cbd5e1;padding:18px}
.account-identity{font-size:.72rem;color:#cbd5e1}

/* V14 Development 8: authenticated lobby account actions. */
.v14-account-actions{display:flex;gap:8px;align-items:center;}

/* V15 Development 1 */
.game-time-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.round-display{font-weight:800;color:var(--accent)}
.board-wrap{position:relative;width:max-content}.turn-banner{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);z-index:1300;background:rgba(20,38,61,.94);border:2px solid var(--accent);border-radius:9px;padding:10px 22px;font-size:1.25rem;font-weight:800;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none;opacity:1}.turn-banner.fade{transition:opacity .8s ease;opacity:0}
.draggable-persistent .merger-modal-header{cursor:move;user-select:none}.draggable-persistent{position:fixed;margin:0}
.merger-quick-row .decision-selected{filter:brightness(.72);box-shadow:inset 0 0 0 3px rgba(255,255,255,.5)}

/* V15 Development 2: founding-price grid and Players' Wealth display. */
.market-header-actions{display:flex;gap:6px;align-items:center}
.founding-instruction{text-align:center;margin:0 0 12px}.founding-chain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 10px}.founding-chain-choice{min-width:0;width:100%;white-space:nowrap}.founding-chain-choice span{font-weight:800}.founding-chain-choice.founding-unavailable{opacity:.28;filter:saturate(.35);cursor:not-allowed}
#wealth-modal-overlay{z-index:1450}.wealth-modal{width:min(2655px,96vw);max-height:90vh;overflow-y:auto;text-align:left;padding:0}.wealth-modal-header{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;background:#343448;border-radius:6px 6px 0 0}.wealth-modal-header h3{margin:0}.wealth-close-btn{border:1px solid #667;border-radius:6px;background:#252536;color:#fff;padding:6px 11px;cursor:pointer}.wealth-modal-body{padding:14px}.wealth-explainer{margin:0 0 10px;color:#cbd5e1}.wealth-summary-table{border-collapse:collapse;width:330px;max-width:100%;margin:0 0 22px}.wealth-summary-table th,.wealth-summary-table td{border:1px solid #667;padding:4px 7px;text-align:left}.wealth-summary-table td{font-weight:800}.wealth-player-card{border:1px solid #667;padding:12px;margin:0 0 16px}.wealth-player-cash{display:grid;grid-template-columns:155px 175px;width:max-content;max-width:100%;margin:0 0 12px}.wealth-player-cash>*{border:1px solid #667;padding:4px 7px}.wealth-table-wrap{overflow-x:hidden}.wealth-detail-table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:.78rem}.wealth-detail-table th,.wealth-detail-table td{border:1px solid #667;padding:4px 5px;text-align:center;white-space:nowrap}.wealth-detail-table thead th{font-weight:800}.wealth-detail-table thead th:first-child,.wealth-detail-table tbody th{width:112px}.wealth-detail-table tbody th{text-align:left}.wealth-detail-table tbody tr:last-child{font-weight:800}
.market-header-actions .chart-btn{min-width:104px}

/* V15 Development 3: founding popup fit correction. */
.merger-modal.founding-mode{width:min(780px,94vw);overflow-x:hidden}
.founding-mode .merger-modal-body{overflow-x:hidden}
.founding-mode .founding-chain-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 10px}
.founding-mode .founding-chain-choice{min-width:0;width:100%;padding:9px 6px;font-size:.88rem;display:flex;align-items:center;justify-content:center;gap:4px;overflow:hidden}
.founding-mode .founding-chain-choice span{flex:0 0 auto}
@media(max-width:650px){.founding-mode .founding-chain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* V15 Development 5: desktop fit corrections for founding choices and Players' Wealth. */
@media (min-width: 900px){
  .merger-modal.founding-mode{width:min(1100px,96vw)}
  .founding-mode .founding-chain-grid{grid-template-columns:repeat(4,minmax(210px,1fr));gap:10px 12px}
  .founding-mode .founding-chain-choice{padding:10px 10px;font-size:.88rem;justify-content:space-between;gap:8px;overflow:visible}
  .wealth-modal{width:96vw;max-width:none}
  .wealth-modal-body,.wealth-player-card,.wealth-table-wrap{width:100%;box-sizing:border-box}
  .wealth-detail-table{width:100%;table-layout:fixed;font-size:.76rem}
  .wealth-detail-table thead th:first-child,.wealth-detail-table tbody th{width:142px}
  .wealth-detail-table th,.wealth-detail-table td{padding:4px 3px}
}

/* V15 Development 6: 15-03 founding popup container-width correction.
   The generic .modal rule has max-width:500px; explicitly override that cap
   for the four-column founding chooser so the width requested in V15 D5 can
   actually be used. */
@media (min-width: 900px){
  .modal.merger-modal.founding-mode{
    width:min(1100px,96vw);
    max-width:96vw;
    box-sizing:border-box;
  }
  .founding-mode .merger-modal-body{box-sizing:border-box;width:100%}
  .founding-mode .founding-chain-grid{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;box-sizing:border-box}
  .founding-mode .founding-chain-choice{min-width:0;width:100%;box-sizing:border-box}
}


/* V15 Development 8: 15-03 final price-tier row and proportion refinement.
   Copyright © 2026 David Simmons. All rights reserved.
   Keep all four $200/$300 rows aligned; the $400 and $500 rows intentionally
   contain three choices, with Meridian starting the $500 row. */
@media (min-width: 900px){
  .modal.merger-modal.founding-mode{
    width:min(960px,94vw);
    max-width:94vw;
  }
  .founding-mode .founding-tier-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
  }
  .founding-mode .founding-tier-row{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0 12px;
    width:100%;
  }
  .founding-mode .founding-chain-choice{
    padding:9px 10px;
  }
}

/* V15 Development 9 — 15-17 Bot Setup Panel Width Correction.
   Split the available bot-control area between the two selectors so the
   Number of bots label is not clipped, while keeping Apply Bots compact. */
.v10-bot-line .form-field{
  flex:1 1 0;
  min-width:0;
}
.v10-bot-line .v10-bot-difficulty{
  min-width:0;
}
.v10-bot-line .v10-bot-difficulty select{
  width:100%;
  min-width:0;
}
.v10-bot-line #apply-room-btn{
  flex:0 0 auto;
}


/* V15 Development 10 — Groups 1-3 implementation.
   Copyright © 2026 David Simmons. All rights reserved. */
#merger-modal-overlay.merger-board-visible{
  background:transparent;
  pointer-events:none;
}
#merger-modal-overlay.merger-board-visible #merger-modal{pointer-events:auto;}
.v10-bot-line{
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(175px,1fr) max-content max-content;
  align-items:end;
  gap:9px;
}
.v10-bot-line .form-field{min-width:0;width:auto;}
.v10-bot-line .form-field label{white-space:nowrap;}
.v10-bot-line .form-field select{width:100%;min-width:0;box-sizing:border-box;}
.v10-bot-line #apply-room-btn,.v10-bot-line #start-game-btn{white-space:nowrap;}
@media(max-width:720px){
  .v10-bot-line{grid-template-columns:1fr 1fr;}
  .v10-bot-line #apply-room-btn,.v10-bot-line #start-game-btn{width:100%;}
}


/* V15 Development 14 — 15-10 Save / Save & Quit / Resume. */
.saved-games-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.saved-game-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid #445;border-radius:8px;background:rgba(255,255,255,.04)}
.saved-game-card .action-btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:720px){.saved-game-card{align-items:stretch;flex-direction:column}.saved-game-card .action-btn{width:100%}}


/* V15 Development 14 — 15-17 final bot setup layout guard.
   Keep bot quantity, skill, Apply Bots, and Start Game on one row on normal desktop widths. */
.v10-bot-line #bot-count{min-width:0;width:100%;}
.v10-bot-line #bot-difficulty{min-width:0;width:100%;}
@media(min-width:721px){
  .v10-bot-line{grid-template-columns:minmax(165px,1fr) minmax(190px,1fr) max-content max-content;}
}

/* V15 Development 15 */
.save-header-btn{background:#4b5563;border-color:#6b7280}
.save-header-btn:hover{filter:brightness(.92)}