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

        body {
            font-family: 'Georgia', serif;
            background: linear-gradient(135deg, #2c1810 0%, #1a0f0a 100%);
            color: #f4e4c1;
            min-height: 100vh;
            overflow-x: hidden;
            touch-action: pan-y;
        }

        .game-container {
            max-width: 100%;
            margin: 0 auto;
            padding: 10px;
        }

        .game-header {
            text-align: center;
            padding: 15px;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border: 3px solid #d4af37;
            border-radius: 10px;
            margin-bottom: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.5);
        }

        .game-header h1 {
            font-family: 'Cinzel', Georgia, serif;
            font-size: 1.5em;
            color: #d4af37;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
            margin-bottom: 8px;
        }
        .game-header-btns {
            display: flex; gap: 8px; justify-content: center;
            margin-top: 10px; flex-wrap: wrap;
        }
        @media (max-width: 700px) {
            .game-header-btns {
                gap: 4px; flex-wrap: nowrap;
            }
            .game-header-btns .phase-btn-inline {
                padding: 4px 5px !important; font-size: 0.55em !important;
            }
        }

        .game-status {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
            font-size: 0.85em;
        }

        .status-item {
            background: rgba(0,0,0,0.3);
            padding: 5px 10px;
            border-radius: 5px;
            border: 1px solid #d4af37;
        }

        .board-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 70%; /* 700/1000 = 0.7 = 70% maintains map aspect ratio */
            margin: 0 auto;
            background: #000;
            border: 3px solid #d4af37;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 8px 16px rgba(0,0,0,0.6);
        }

        /* Desktop and tablet: fit entire map visible within viewport height */
        @media (min-width: 768px) {
            .board-container {
                width: 100%;
                height: calc(100vh - 180px);
                min-height: 400px;
                padding-bottom: 0;
            }
        }

        .board-image {
            width: 100%;
            height: auto;
            display: block;
            user-select: none;
            -webkit-user-select: none;
        }

        .token-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .hero-token {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid #ffd700;
            cursor: move;
            pointer-events: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.9em;
            box-shadow: 0 4px 8px rgba(0,0,0,0.6), 0 0 15px rgba(255,215,0,0.4);
            transition: transform 0.1s, box-shadow 0.1s;
            z-index: 10;
            touch-action: none;
        }

        .hero-token:active {
            transform: scale(1.1);
            box-shadow: 0 6px 12px rgba(0,0,0,0.8), 0 0 25px rgba(255,215,0,0.6);
            z-index: 100;
        }

        .hero-token.dragging {
            opacity: 0.8;
            z-index: 1000;
        }

        .minion-token {
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border: 2px solid #000;
            pointer-events: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        .general-token {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 4px solid #000;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8em;
            box-shadow: 0 4px 8px rgba(0,0,0,0.7);
            animation: pulse 2s ease-in-out infinite;
        }

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

        .controls-panel {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border: 2px solid #d4af37;
            border-radius: 10px;
            padding: 15px;
            margin-top: 15px;
        }

        .hero-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            margin-bottom: 15px;
        }

        .hero-card {
            background: linear-gradient(135deg, #f0e6d3 0%, #ddd0b8 50%, #c8bb9f 100%);
            border: 3px solid #8b7355;
            border-radius: 10px;
            overflow: hidden;
            padding: 0;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(139,115,85,0.3);
            margin-bottom: 10px;
        }

        .hero-card.active {
            border-color: #d4af37;
            box-shadow: 0 0 16px rgba(212,175,55,0.5), inset 0 0 0 1px rgba(139,115,85,0.3);
        }

        .hero-name {
            font-size: 1em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .hero-stats {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            font-size: 0.8em;
        }

        .stat {
            background: rgba(139,115,85,0.15);
            border: 1px solid rgba(139,115,85,0.3);
            padding: 2px 7px;
            border-radius: 4px;
            color: #3d2b1f;
        }

        /* ══════════════════════════════════════════
           SECTION TRAYS — matches game board action tray
           ══════════════════════════════════════════ */
        .section-tray {
            background: rgba(0,0,0,0.3);
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            border: 1px solid rgba(212,175,55,0.25);
        }
        .tray-title {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 700;
            color: #d4af37;
            font-size: 1.1em;
            margin-bottom: 8px;
        }

        /* ══════════════════════════════════════════
           DECK PLACARDS — Parchment card style
           ══════════════════════════════════════════ */
        .deck-placard-grid {
            display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
        }
        @media (max-width: 600px) { .deck-placard-grid { grid-template-columns: 1fr; } }

        .deck-body { padding: 8px 10px; }
        .deck-stat-row {
            display: flex; align-items: center; justify-content: center; gap: 0;
        }
        .deck-stat {
            flex: 1; text-align: center;
        }
        .deck-stat-number {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900; font-size: 1.6em;
            color: #3d2b1f;
            line-height: 1.2;
        }
        .deck-stat-number.muted { opacity: 0.4; }
        .deck-stat-label {
            font-family: 'Comic Sans MS', cursive;
            font-size: 0.68em; color: #3d2b1f;
            opacity: 0.7;
        }
        .deck-stat-divider {
            width: 1px; height: 32px;
            background: rgba(139,115,85,0.3);
            flex-shrink: 0;
            margin: 0 8px;
        }

        /* ══════════════════════════════════════════
           GENERAL PLACARDS — Parchment card style
           (matches .hero-select structure)
           ══════════════════════════════════════════ */
        .generals-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 15px;
        }
        @media (max-width: 600px) { .generals-panel { grid-template-columns: 1fr; } }

        .general-placard {
            background: linear-gradient(135deg, #f0e6d3 0%, #ddd0b8 50%, #c8bb9f 100%);
            border: 3px solid #8b7355;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(139,115,85,0.3);
            transition: all 0.2s;
        }
        .general-placard:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(139,115,85,0.3);
        }
        .general-placard.defeated { opacity: 0.45; filter: grayscale(70%); }

        .general-banner {
            padding: 6px 14px;
            border-bottom: 2px solid #8b7355;
            display: flex; align-items: center; justify-content: space-between;
        }
        .general-banner-name {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900; font-size: 1.05em;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5);
        }

        .general-body { padding: 10px 14px; }

        .g-hi-block { margin-bottom: 4px; }
        .g-hi-block:last-child { margin-bottom: 0; }
        .g-hi-title {
            font-family: 'Comic Sans MS', 'Comic Sans', cursive;
            font-size: 0.75em; color: #3d2b1f;
            font-weight: normal; line-height: 1.5;
            padding-left: 1.5em; text-indent: -1.5em;
        }
        .g-hi-title strong {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900; font-size: 0.95em;
        }
        .g-defeated-badge {
            text-align: center; font-family: 'Cinzel', Georgia, serif;
            font-weight: 900; font-size: 1em; color: #16a34a;
            padding: 6px;
        }

        /* General Life Token Tracker */
        .life-tracker-wrap {
            position: relative;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(139,115,85,0.25);
        }
        .lt-hit-req {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900; font-size: 0.7em;
            color: #3d2b1f;
            margin-bottom: 4px;
        }
        .life-tracker {
            display: flex; gap: 4px;
            justify-content: center;
        }
        .lt-box {
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 4px;
            border: 2px solid #8b7355;
            background: rgba(139,115,85,0.1);
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900; font-size: 1.05em;
            color: #3d2b1f;
            position: relative;
        }
        .lt-box.lost { opacity: 0.35; }
        .lt-box.major {
            background: rgba(220,38,38,0.2);
            border-color: #b91c1c;
        }
        .lt-box.major.lost { opacity: 0.35; }
        .lt-box.skull {
            background: rgba(88,28,135,0.35);
            border-color: #7c3aed;
        }
        .lt-box .lt-marker {
            position: absolute;
            left: 50%; top: 50%; transform: translate(-50%, -50%);
            width: 30px; height: 30px;
            border-radius: 50%;
            border: 2px solid #FFD700;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.05em; line-height: 1;
            box-shadow: 0 1px 3px rgba(0,0,0,0.4);
        }

        /* ══════════════════════════════════════════
           WAR STATUS PLACARD
           ══════════════════════════════════════════ */
        .war-tracker-col {
            width: 20%; flex-shrink: 0;
            display: flex; flex-direction: column;
            align-items: center; gap: 4px;
        }
        .war-advance-text {
            font-family: 'Comic Sans MS', cursive;
            font-size: 0.68em; color: #dc2626;
            font-weight: bold;
            text-align: center; line-height: 1.3;
            margin-bottom: 6px;
        }
        .war-box {
            width: 100%; text-align: center;
            padding: 6px 4px; border-radius: 4px;
            border: 2px solid #8b7355;
            background: rgba(139,115,85,0.1);
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900; font-size: 0.72em;
            color: #3d2b1f;
            position: relative;
            transition: background 0.4s ease;
        }
        .war-icon {
            position: absolute;
            left: 3px; top: 50%; transform: translateY(-50%);
            font-size: 1.1em; line-height: 1;
            filter: drop-shadow(0 0 2px rgba(212,175,55,0.6));
            animation: warIconPulse 2s ease-in-out infinite;
        }
        @keyframes warIconPulse {
            0%, 100% { transform: translateY(-50%) scale(1); }
            50% { transform: translateY(-50%) scale(1.15); }
        }
        .war-arrow {
            color: #dc2626; font-size: 0.9em; line-height: 1;
        }
        .g-section { margin-bottom: 6px; }
        .g-section:last-child { margin-bottom: 0; }
        .g-section-label {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900; font-size: 0.8em;
            color: #3d2b1f;
            margin-bottom: 2px;
        }
        .g-section-text {
            font-family: 'Comic Sans MS', 'Comic Sans', cursive;
            font-size: 0.75em; color: #3d2b1f;
            line-height: 1.5;
        }

        .action-buttons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 10px;
            margin-bottom: 15px;
        }

        .btn {
            padding: 10px 15px;
            border: 2px solid #d4af37;
            border-radius: 8px;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #ffd700;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 0.9em;
        }

        .btn:hover:not(:disabled) {
            background: linear-gradient(135deg, #252547 0%, #1a1a2e 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }

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

        .btn-primary {
            background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        }

        .btn-danger {
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border: 2px solid #d4af37;
            border-radius: 12px;
            padding: 20px;
            padding-top: 20px;
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 8px 32px rgba(0,0,0,0.6);
        }
        /* Modals with absolute-positioned close button need extra top space */
        .modal-content:has(.modal-close-btn) {
            padding-top: 50px;
        }
        
        .modal-close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            background: rgba(220,38,38,0.9);
            border: 2px solid #d4af37;
            border-radius: 50%;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(0,0,0,0.5);
            transition: background 0.2s;
        }
        
        .modal-close-btn:hover {
            background: rgba(220,38,38,1);
        }

        .modal-title {
            font-size: 1.5em;
            color: #ffd700;
            margin-bottom: 15px;
            text-align: center;
        }

        .modal-title-bar {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            text-align: center;
            font-size: 1.15em;
            color: #d4af37;
            margin-bottom: 14px;
            letter-spacing: 1px;
        }

        .dice-roll {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin: 15px 0;
            flex-wrap: wrap;
        }

        .die {
            width: 50px;
            height: 50px;
            background: white;
            border: 2px solid #000;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
            font-weight: bold;
            color: #000;
            animation: roll 0.5s ease-out;
            position: relative;
        }
        /* Faction-colored combat dice */
        .die-green { background:linear-gradient(145deg,#16a34a,#15803d) !important; color:#fff !important; border-color:rgba(0,0,0,0.3) !important; box-shadow:0 3px 6px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.4),0 0 8px rgba(22,163,74,0.25); }
        .die-blue  { background:linear-gradient(145deg,#3b82f6,#1d4ed8) !important; color:#fff !important; border-color:rgba(0,0,0,0.3) !important; box-shadow:0 3px 6px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.4),0 0 8px rgba(59,130,246,0.25); }
        .die-red   { background:linear-gradient(145deg,#dc2626,#991b1b) !important; color:#fff !important; border-color:rgba(0,0,0,0.3) !important; box-shadow:0 3px 6px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.4),0 0 8px rgba(220,38,38,0.25); }
        .die-black { background:linear-gradient(145deg,#374151,#1f2937) !important; color:#fff !important; border-color:rgba(0,0,0,0.3) !important; box-shadow:0 3px 6px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.4),0 0 8px rgba(55,65,81,0.25); }
        .die-fade-miss { opacity: 0.28; }
        .die-bonus { border-color: #d4af37 !important; }
        /* Parry-cancelled hit */
        .die-parry-cancel { opacity: 0.35; }
        .die-parry-cancel::after { content:'✕'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:1.6em; color:#b91c1c; font-weight:900; text-shadow:0 1px 3px rgba(0,0,0,0.6); pointer-events:none; }
        /* Minion defeat result pips */
        .faction-pill { border-radius:5px; padding:5px 10px; margin:4px 0; }
        .faction-pill-row { display:flex; justify-content:space-between; align-items:center; font-size:0.9em; }
        .faction-pill-left { display:flex; align-items:center; gap:6px; font-family:'Cinzel',Georgia,serif; font-weight:900; }
        .faction-pill-right { font-family:'Cinzel',Georgia,serif; font-weight:900; font-size:0.85em; color:#2c1810; }
        .dot { width:16px; height:16px; border-radius:50%; display:inline-block; border:1.5px solid rgba(0,0,0,0.3); box-shadow:0 1px 2px rgba(0,0,0,0.3); flex-shrink:0; }
        .combat-results-label { font-family:'Cinzel',Georgia,serif; font-weight:900; font-size:0.85em; color:#2c1810; margin:8px 0 4px 0; }

        @keyframes roll {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .log-panel {
            background: rgba(0,0,0,0.4);
            border: 2px solid #8b4513;
            border-radius: 8px;
            padding: 12px;
            margin-top: 15px;
            max-height: 200px;
            overflow-y: auto;
        }

        .log-entry {
            padding: 4px 0;
            border-bottom: 1px solid rgba(139, 69, 19, 0.3);
            font-size: 0.85em;
        }

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

        .hero-select {
            background: linear-gradient(135deg, #f0e6d3 0%, #ddd0b8 50%, #c8bb9f 100%);
            border: 3px solid #8b7355;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(139,115,85,0.3);
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
            padding: 0;
        }

        .hero-select:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(139,115,85,0.3);
        }

        .hero-select.selected {
            border-color: #d4af37;
            box-shadow: 0 0 16px rgba(212,175,55,0.5), inset 0 0 0 1px rgba(139,115,85,0.3);
        }

        .hero-detail-card {
            background: linear-gradient(135deg, #f0e6d3 0%, #ddd0b8 50%, #c8bb9f 100%);
            border: 3px solid #8b7355;
            border-radius: 10px;
            overflow: hidden;
            padding: 0;
        }

        .hero-detail-card .hero-name {
            font-size: 1.8em;
            text-align: center;
            margin-bottom: 15px;
        }

        .hero-detail-card .hero-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin: 15px 0;
        }

        .hero-detail-card .stat {
            background: rgba(0,0,0,0.4);
            padding: 10px;
            border-radius: 5px;
            text-align: center;
            font-size: 1em;
        }

        .hero-detail-card .ability-section {
            background: transparent;
            border: none;
            border-radius: 8px;
            padding: 12px;
            margin-top: 15px;
        }

        .hero-detail-card .cards-section {
            margin-top: 15px;
        }

        .card-item {
            background: rgba(0,0,0,0.3);
            border: 1px solid #8b4513;
            border-radius: 5px;
            padding: 8px;
            margin: 5px 0;
            font-size: 0.9em;
        }

        .current-hero-summary {
            background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
            border: 2px solid #ffd700;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
        }

        #map-modal .modal-content,
        .map-modal-content {
            max-width: 95vw; max-height: 95vh;
            padding: 10px;
            display: flex; flex-direction: column;
            padding-top: 10px;
        }

        #heroes-modal .hero-card {
            margin-bottom: 10px;
        }

        .hover-tooltip {
            position: fixed;
            background: linear-gradient(135deg, #1a0f0a 0%, #2c1810 100%);
            border: 2px solid #d4af37;
            border-radius: 8px;
            padding: 10px;
            padding-top: 50px; /* Space for close button */
            pointer-events: auto;
            z-index: 20000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.8);
            width: 320px;
            max-width: 90vw;
            max-height: 80vh;
            overflow-y: auto;
            display: none;
        }
        
        #tooltip-content {
            pointer-events: auto;
        }

        .hover-tooltip.active {
            display: block;
        }
        
        /* Shapeshift form display - desktop shows name, mobile shows icon */
        .shapeshift-mobile { display: none; }
        .shapeshift-desktop { display: inline; }
        @media (max-width: 768px) {
            .shapeshift-mobile { display: inline; }
            .shapeshift-desktop { display: none; }
        }
        
        /* Mobile-specific tooltip adjustments */
        @media (max-width: 768px) {
            .hover-tooltip {
                max-width: 95vw;
                max-height: 70vh;
                font-size: 0.95em;
            }
            
            .hover-tooltip .phase-btn {
                padding: 12px !important;
                font-size: 1em !important;
                margin-bottom: 8px !important;
            }
        }

        .tooltip-title {
            font-weight: bold;
            color: #ffd700;
            font-size: 1em;
            margin-bottom: 5px;
            border-bottom: 1px solid #d4af37;
            padding-bottom: 3px;
        }

        .tooltip-stat {
            font-size: 0.85em;
            margin: 3px 0;
            color: #f4e4c1;
        }

        .location-marker:hover circle {
            stroke-width: 5 !important;
            filter: brightness(1.2);
        }

        .card-visual {
            background: linear-gradient(135deg, #2c1810 0%, #1a0f0a 100%);
            border: 3px solid;
            border-radius: 12px;
            padding: 20px;
            margin: 15px auto;
            max-width: 300px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.6);
        }

        .card-title {
            font-size: 1.3em;
            font-weight: bold;
            color: #ffd700;
            text-align: center;
            margin-bottom: 10px;
        }

        .card-dice {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 15px 0;
        }

        .card-die {
            width: 40px;
            height: 40px;
            background: white;
            border: 2px solid #000;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3em;
            font-weight: bold;
        }

        .card-effect {
            background: rgba(0,0,0,0.3);
            padding: 12px;
            border-radius: 8px;
            margin-top: 10px;
            font-size: 0.95em;
            line-height: 1.4;
        }

        .combat-log-entry {
            padding: 8px 12px;
            margin: 8px 0;
            background: rgba(0,0,0,0.3);
            border-left: 4px solid;
            border-radius: 4px;
        }

        .combat-log-entry.success {
            border-color: #4ade80;
            background: rgba(74,222,128,0.1);
        }

        .combat-log-entry.miss {
            border-color: #ef4444;
            background: rgba(239,68,68,0.1);
        }

        .dice-result-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin: 15px 0;
        }

        .die-result {
            width: 45px;
            height: 45px;
            border: 2px solid #000;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4em;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .die-result.hit {
            background: #4ade80;
            color: #000;
        }

        .die-result.miss {
            background: #ef4444;
            color: #fff;
        }

        @media (max-width: 768px) {
            .hero-token {
                width: 40px;
                height: 40px;
                font-size: 0.8em;
            }
            
            .general-token {
                width: 50px;
                height: 50px;
                font-size: 1.5em;
            }
            
            .minion-token {
                width: 20px;
                height: 20px;
            }
        }
        
        @keyframes pulse-ring {
            0% {
                r: 15;
                opacity: 0.9;
                stroke-width: 4;
            }
            50% {
                r: 35;
                opacity: 0.5;
                stroke-width: 6;
            }
            100% {
                r: 50;
                opacity: 0;
                stroke-width: 2;
            }
        }
        /* ═══════════════════════════════════════
           MAP TOP BAR & ACTION TRAY
           ═══════════════════════════════════════ */
        .map-top-bar {
            display: flex; align-items: center; justify-content: space-between;
            padding: 6px 10px; border-bottom: 1px solid rgba(212,175,55,0.25);
            flex-shrink: 0;
        }
        .close-circle {
            width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 18px; color: #fff;
            background: rgba(100,100,100,0.9); border: 2px solid #666; border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.5);
        }
        .hdr-btn-text { }
        .hdr-btn-icon { display: none; }

        .action-tray {
            padding: 6px 10px; border-bottom: 1px solid rgba(212,175,55,0.15);
            flex-shrink: 0; display: flex; gap: 4px; flex-wrap: wrap;
            align-items: flex-start;
        }
        .action-tray-title {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 700; color: #d4af37;
            font-size: 0.85em; white-space: nowrap; flex-shrink: 0; margin-right: 2px;
            padding-top: 2px;
        }
        .action-btns { display: flex; flex-direction: column; gap: 4px; flex: 1; }
        .action-row { display: flex; gap: 4px; flex-wrap: wrap; }
        .action-row-bottom { padding-top: 4px; border-top: 1px solid rgba(212,175,55,0.15); }
        .action-btns .phase-btn {
            width: auto; margin-top: 0; padding: 4px 8px;
            font-size: 0.7em; text-align: center;
            white-space: nowrap;
            flex: 1 1 10%;
        }
        .map-top-bar .phase-btn {
            width: auto; margin-top: 0; padding: 5px 10px;
            font-size: 0.75em;
        }

        /* ═══════════════════════════════════════
           MAP OVERLAY PANELS — DESKTOP DEFAULT
           ═══════════════════════════════════════ */
        .overlay-stack {
            position: absolute; top: 0; left: 0; bottom: 0; z-index: 10;
            display: flex; flex-direction: column;
            pointer-events: none;
        }
        .overlay-bar {
            background: rgba(8, 8, 16, 0.88);
            border-right: 1px solid rgba(212,175,55,0.35);
            border-bottom: 1px solid rgba(212,175,55,0.35);
            backdrop-filter: blur(6px);
            padding: 6px 12px 6px 10px;
            /* v2: min-width ensures taint crystals label + count don't crowd */
            min-width: 148px;
            pointer-events: auto;
        }
        .overlay-stack > .overlay-bar:last-child { border-radius: 0 0 6px 0; }
        .overlay-title {
            font-family: 'Cinzel', Georgia, serif;
            /* v2: unified to 0.7em (was 0.58em — inconsistent with row content) */
            font-size: 0.7em; color: #d4af37; font-weight: 700; margin-bottom: 3px;
        }

        /* Turn Tracker */
        .turn-inner { display: flex; flex-direction: column; gap: 2px; }
        .turn-hero {
            padding: 2px 8px; border-radius: 4px;
            font-weight: 700;
            /* v2: unified to 0.72em (was 0.63em) */
            font-size: 0.72em;
            color: rgba(244,228,193,0.9); border: 1px solid transparent;
            white-space: nowrap; cursor: pointer;
            transition: color 0.15s, background 0.15s, border-color 0.15s;
        }
        .turn-hero:hover { filter: brightness(1.15); }
        .turn-hero.active { color: #fff; }

        /* Hero Overlay */
        .hero-inner { }
        .hero-name {
            font-weight: 900; font-size: 0.75em; color: #f4e4c1;
            margin-bottom: 3px; white-space: nowrap; cursor: pointer;
        }
        .hero-label-name { }
        .overlay-bar .hero-stats,
        .overlay-stack .hero-stats {
            display: flex !important; flex-direction: column !important;
            gap: 0 !important; flex-wrap: nowrap !important;
        }
        .stat-row { display: flex; align-items: center; gap: 2px; margin-bottom: 1px; white-space: nowrap; }
        .stat-icons { display: flex; gap: 1px; font-size: 0.75em; }
        /* v2: unified to 0.72em (was 0.62em) */
        .stat-compact { display: none; font-weight: 900; font-size: 0.72em; color: #f4e4c1; }
        .ic-off { opacity: 0.2; filter: grayscale(100%); }

        /* Threat Overlay — v2: min-width on overlay-bar keeps taint crystals on one row */
        .threat-inner { }
        .threat-items { display: flex; flex-direction: column; }
        .t-row { display: flex; align-items: center; padding: 2px 0; }
        /* v2: unified to 0.72em (was 0.62em) */
        .t-faction { font-weight: 900; font-size: 0.72em; white-space: nowrap; flex: 1; }
        .t-faction.taint-label { white-space: nowrap; }
        .t-faction-icon { display: none; }
        .t-count { font-weight: 900; font-size: 0.72em; color: #f4e4c1; white-space: nowrap; text-align: right; margin-left: 10px; }

        /* Desktop: turn-hero-row is pass-through */
        .turn-hero-row { display: contents; }

        /* Generals overlay bar — desktop only */
        .generals-bar { }
        .generals-inner { }
        .generals-items { display: flex; flex-direction: column; }
        .g-row { display: flex; flex-direction: column; margin-bottom: 5px; }
        /* Mini wound tracker — right-aligned */
        .g-lt-row { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 3px; justify-content: flex-end; }
        /* Spacer extends the right border line to bottom of map pane */
        .overlay-spacer { flex: 1; border-right: 1px solid rgba(212,175,55,0.35); pointer-events: none; }
        .g-lt-box {
            display: inline-flex; align-items: center; justify-content: center;
            width: 16px; height: 16px; border-radius: 2px;
            background: rgba(212,175,55,0.15); border: 1px solid rgba(212,175,55,0.4);
            font-size: 0.55em; font-weight: 900; color: #d4af37;
            font-family: 'Cinzel', Georgia, serif;
        }
        .g-lt-box.lost { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.08); color: rgba(244,228,193,0.15); }
        .g-lt-box.current { border-width: 2px; border-color: #d4af37; color: #f4e4c1; }
        .g-lt-box.major { background: rgba(220,38,38,0.2); border-color: rgba(220,38,38,0.6); color: #ef4444; }
        .g-lt-box.skull { border-color: rgba(255,255,255,0.15); }
        .g-lt-box.defeated-skull { background: rgba(220,38,38,0.2); border-color: #dc2626; }

        /* Map bottom hint */
        .map-bottom-hint {
            display: flex; justify-content: center; align-items: center;
            gap: 10px; padding: 4px 0;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.7em; color: rgba(212,175,55,0.4);
        }

        @media (max-width: 700px) {
            /* Map modal fullscreen on mobile — safe for browser chrome */
            #map-modal {
                padding: 4px !important;
            }
            #map-modal .modal-content,
            #map-modal .map-modal-content {
                max-width: 100% !important; width: 100% !important;
                max-height: none; height: auto;
                border-radius: 8px !important;
                border: 2px solid #d4af37 !important;
                padding: 0 !important; padding-top: 0 !important;
                box-shadow: none !important;
                overflow: hidden !important;
            }
            .map-top-bar { padding: 4px 8px; }
            .action-tray { padding: 3px 6px; gap: 3px; }
            .action-tray-title { font-size: 0.7em; }

            .action-btn-icon { display: none; }
            .action-btns { gap: 3px; }
            .action-row { gap: 3px; }
            .action-btns .phase-btn {
                font-size: 0.58em; padding: 2px 4px;
                flex: 1 1 20%;
            }

            /* Board fills remaining space */
            #map-modal .board-container {
                flex: 1; height: auto !important;
                padding-bottom: 0 !important;
                border-radius: 0; border-left: none; border-right: none;
            }
            .map-bottom-hint {
                padding: 2px 0; font-size: 0.55em;
            }

            /* Header buttons: icon only on mobile */
            .hdr-btn-text { display: none; }
            .hdr-btn-icon { display: inline; }

            /* Overlay: full-width horizontal bars */
            .overlay-stack { left: 0; right: 0; }
            .overlay-bar {
                border-right: none; border-radius: 0 !important;
                padding: 3px 10px;
                background: rgba(8, 8, 16, 0.88);
                backdrop-filter: blur(6px);
            }
            .overlay-title {
                margin-bottom: 0; font-size: 0.5em;
                white-space: nowrap; flex-shrink: 0;
            }

            /* ROW 1: Turn | Hero combined */
            .turn-hero-row {
                display: flex;
                background: rgba(8, 8, 16, 0.88);
                border-bottom: 1px solid rgba(212,175,55,0.35);
                backdrop-filter: blur(6px);
                padding: 3px 10px;
                align-items: center;
                pointer-events: auto;
            }
            .turn-hero-row > .overlay-bar {
                background: none; backdrop-filter: none;
                border: none; border-radius: 0 !important; padding: 0;
            }

            /* Turn: fixed left, icons only */
            .turn-bar {
                display: flex; align-items: center; gap: 4px;
                padding-right: 8px !important;
                margin-right: 8px;
                border-right: 1px solid rgba(212,175,55,0.25) !important;
                flex-shrink: 0;
            }
            .turn-inner { flex-direction: row; gap: 2px; }
            .turn-hero { font-size: 0.56em; padding: 2px 4px; }
            .turn-bar .hero-label-name { display: none; }

            /* Hero: fills remaining space, justified layout */
            .hero-bar {
                display: flex; align-items: center; gap: 4px;
                flex: 1; min-width: 0;
            }
            .hero-inner {
                display: flex; align-items: center;
                flex: 1; min-width: 0;
            }
            .hero-name {
                font-size: 0.62em; margin-bottom: 0;
                flex-shrink: 0;
            }
            .hero-bar .hero-label-name { display: inline; }
            .overlay-bar .hero-stats,
            .overlay-stack .hero-stats,
            .hero-stats {
                display: flex !important; flex-direction: row !important;
                align-items: center;
                flex: 1; min-width: 0; gap: 0 !important;
                flex-wrap: nowrap !important;
            }
            .stat-row { margin-bottom: 0; }
            .stat-icons { display: none; }
            .stat-compact { display: inline; }
            .health-row { flex: 1; justify-content: center; }
            .actions-row { flex-shrink: 0; }

            /* ROW 2: Threat — title inline, items spread */
            .threat-bar {
                display: flex; align-items: center; gap: 6px;
            }
            .threat-inner { flex: 1; }
            .threat-items {
                flex-direction: row; justify-content: space-between;
            }
            .t-row {
                flex-direction: row; align-items: center;
                gap: 2px; padding: 0;
            }
            .t-faction { display: none; }
            .t-faction-icon {
                display: inline; font-weight: 900; font-size: 0.62em;
            }
            .t-count { font-size: 0.62em; margin-left: 0; }

            /* v2: override desktop-only additions — generals, spacer, badges, full-height stack */
            .generals-bar { display: none; }
            .overlay-spacer { display: none; }
            .overlay-stack { bottom: auto; height: auto; }
            .overlay-bar { min-width: 0; }

            /* v2: revert threat rows to icon+count only (desktop badge styles override otherwise) */
            .t-row { display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 0; }
            .t-faction-icon { display: inline !important; font-weight: 900; font-size: 0.62em; }
            .t-count { display: inline !important; font-size: 0.62em; color: #f4e4c1; margin-left: 0; }

            /* v2: revert hero section to compact mobile layout (desktop badge overrides otherwise) */
            .hero-inner { display: flex; align-items: center; flex: 1; min-width: 0; }
            .hero-name { font-size: 0.62em; margin-bottom: 0; flex-shrink: 0;
                background: none !important; border: none !important; border-radius: 0 !important;
                padding: 0 !important; box-shadow: none !important; text-shadow: none !important;
                color: #f4e4c1 !important; cursor: pointer; display: block; width: auto !important; }
            .hero-stats { display: flex !important; flex-direction: row !important;
                align-items: center; flex: 1; min-width: 0; gap: 0 !important; flex-wrap: nowrap !important; }
            .stat-compact { display: inline; font-size: 0.62em; }

        } /* end @media (max-width: 700px) */

        /* Parchment modal typography */
        .hero-banner-name {
          font-family: 'Cinzel', Georgia, serif;
          font-weight: 900;
          font-size: 1.05em;
          color: #fff;
          text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5);
        }

        .hero-ability-text strong {
          font-family: 'Cinzel', Georgia, serif;
          font-size: 1em;
          color: #1a0f0a;
          display: inline;
          font-weight: 900;
        }

        .hero-ability-text-select strong {
          font-family: 'Cinzel', Georgia, serif;
          font-size: 1em;
          color: #1a0f0a;
          display: inline;
          font-weight: 900;
        }

        .hero-section-label {
          font-family: 'Cinzel', Georgia, serif;
          font-weight: 900;
        }

        .modal-heading {
          font-family: 'Cinzel', Georgia, serif;
          font-weight: 700;
          color: #d4af37;
        }

        /* ── STEP INDICATOR (Daytime / Evening / Night) ── */
        .step-indicator-bar {
          display: flex; justify-content: center; gap: 4px; margin-bottom: 14px;
        }
        .step-indicator-bar .step-item {
          display: flex; align-items: center; gap: 4px;
        }
        .step-indicator-bar .step-badge {
          display: flex; align-items: center; gap: 5px;
          padding: 4px 10px; border-radius: 6;
        }
        .step-indicator-bar .step-badge.active {
          background: rgba(212,175,55,0.25); border: 2px solid #d4af37;
        }
        .step-indicator-bar .step-badge.past {
          background: rgba(74,222,128,0.1); border: 1.5px solid rgba(74,222,128,0.3);
        }
        .step-indicator-bar .step-badge.future {
          background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1);
        }
        .step-indicator-bar .step-label {
          font-family: 'Cinzel', Georgia, serif; font-weight: 700;
          font-size: 0.7em; letter-spacing: 0.5px;
        }
        .step-indicator-bar .step-label.active { color: #d4af37; }
        .step-indicator-bar .step-label.past { color: #4ade80; }
        .step-indicator-bar .step-label.future { color: #555; }
        .step-indicator-bar .step-arrow { font-size: 0.8em; }
        .step-indicator-bar .step-arrow.past { color: #4ade80; }
        .step-indicator-bar .step-arrow.future { color: #333; }

        /* ── PARCHMENT BOX ── */
        .parchment-box {
          padding: 10px; margin-top: 10px; border-radius: 8px;
          background: linear-gradient(135deg, #f0e6d3 0%, #ddd0b8 50%, #c8bb9f 100%);
          border: 2px solid #8b7355;
        }
        .parchment-banner {
          background: linear-gradient(135deg, #5c3d2ecc 0%, #4a2f20cc 100%);
          padding: 6px 14px; margin-bottom: 10px;
          margin-left: -10px; margin-right: -10px; margin-top: -10px;
          border-radius: 8px 8px 0 0; border-bottom: 2px solid #8b7355;
          text-align: center;
        }
        .parchment-banner .hero-banner-name { font-size: 0.9em; letter-spacing: 1px; }

        /* ── SPECIAL CARD WRAP ── */
        .card-wrap {
          background: linear-gradient(135deg, #f0e6d3 0%, #ddd0b8 50%, #c8bb9f 100%);
          border: 3px solid #6d28a8; border-radius: 10px; overflow: hidden;
          box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(139,115,85,0.3);
        }
        .card-body { padding: 14px; }
        .card-banner-inner {
          background: linear-gradient(135deg, #6d28a8cc 0%, #6d28a899 100%);
          padding: 6px 14px; border-bottom: 2px solid #8b7355;
          display: flex; align-items: center; justify-content: space-between;
        }
        /* v2: Dark Visions card row classes — only used by Dark Visions special card */
        .dv-kept {
          display: flex; align-items: stretch; margin: 4px 0;
          border: 2px solid #8b7355; border-radius: 6px;
          background: rgba(92,61,46,0.08); overflow: hidden;
        }
        .dv-disc {
          display: flex; align-items: center; margin: 4px 0;
          border: 2px solid #8b7355; border-radius: 6px;
          background: rgba(92,61,46,0.05);
        }
        .dv-ctrl {
          display: flex; flex-direction: column; gap: 3px;
          padding: 6px 4px; background: rgba(92,61,46,0.1);
          border-right: 1px solid rgba(139,115,85,0.3);
        }
        .dv-btn {
          width: 24px; height: 24px; border: none; border-radius: 4px;
          cursor: pointer; font-size: 0.85em;
          display: flex; align-items: center; justify-content: center;
        }

        /* v2: .hero-row — special card hero picker rows (Hammer of Valor / L-section only) */
        .hero-row {
          border-radius: 8px; padding: 8px 12px;
          display: flex; align-items: center; gap: 10px;
          cursor: pointer; border: 2px solid #8b7355;
          background: rgba(92,61,46,0.08); transition: all 0.2s;
        }
        .hero-row.selected {
          border-color: #d4af37;
          background: rgba(212,175,55,0.2);
          box-shadow: 0 0 8px rgba(212,175,55,0.35);
        }

        /* v2: .card-banner added globally — was missing, causing purple banner to not render */
        .card-banner {
          background: linear-gradient(135deg, #6d28a8cc 0%, #6d28a899 100%);
          padding: 6px 14px; border-bottom: 2px solid #8b7355;
          display: flex; align-items: center; justify-content: space-between;
        }

        /* ── DIE VARIANTS ── */
        .die-g {
          width: 50px; height: 50px; font-size: 1.5em; font-weight: 900;
          border-radius: 8px; color: #fff;
          background: linear-gradient(145deg, #16a34a 0%, #15803d 100%);
          border: 2px solid rgba(0,0,0,0.3);
          box-shadow: 0 3px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
          display: inline-flex; align-items: center; justify-content: center;
        }
        /* v2: die-purple — used by special card pickers (King's Guard / Cavalry Sweep remaining counter) */
        .die-purple {
          width: 50px; height: 50px; font-size: 1.5em; font-weight: 900;
          border-radius: 8px; color: #fff;
          background: linear-gradient(145deg, #7c3aed, #5b21b6);
          border: 2px solid rgba(0,0,0,0.3);
          box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4), 0 0 8px rgba(124,58,237,0.25);
          display: inline-flex; align-items: center; justify-content: center;
        }

        /* ── PARCHMENT HERO BUTTON ── */
        .phb {
          display: block; width: 100%; margin-top: 14px; padding: 11px;
          border-radius: 8px; font-weight: bold; font-size: 0.95em; cursor: pointer;
          font-family: 'Cinzel', Georgia, serif; letter-spacing: 0.5px;
          background: linear-gradient(135deg, #d4af37, #b8960c);
          color: #1a0f0a; border: 2px solid #d4af37;
          font-variant: small-caps; text-align: center;
        }
        .phb:hover:not(:disabled) { filter: brightness(1.1); }
        .phb:disabled { opacity: 0.4; cursor: not-allowed; }
        .phb-cancel {
          background: linear-gradient(135deg, #d4af37, #b8960c);
          color: #1a0f0a; border-color: #d4af37; margin-top: 6px;
        }

        /* ── PHASE BUTTON ── */
        .phase-btn {
          width: 100%; margin-top: 14px; padding: 11px; border-radius: 8px;
          cursor: pointer; font-weight: bold; font-size: 0.95em;
          letter-spacing: 0.5px; font-family: 'Cinzel', Georgia, serif;
          background: linear-gradient(135deg, #d4af37, #b8960c);
          color: #1a0f0a; border: 2px solid #d4af37;
          transition: opacity 0.2s;
        }
        .phase-btn:disabled {
          background: #444; color: #888; border-color: #666;
          opacity: 0.5; cursor: not-allowed;
        }
        .phase-btn.danger {
          background: linear-gradient(135deg, #dc2626, #991b1b);
          border-color: #dc2626; color: #fff;
        }
        .phase-btn-inline {
          width: auto !important; margin-top: 0 !important;
          padding: 5px 10px !important; font-size: 0.75em !important;
        }
        @media (max-width: 700px) {
            .phase-btn-inline {
              padding: 4px 6px !important; font-size: 0.6em !important;
            }
        }

        /* Play Area buttons — fill row equally */
        .play-area-btns {
          display: flex; gap: 8px; flex-wrap: nowrap;
        }
        .play-area-btns .phase-btn {
          flex: 1; width: auto !important; margin-top: 0 !important;
          padding: 8px 14px !important; font-size: 0.85em !important;
          text-align: center;
        }

        /* ── LOCATION RING ── */
        .location-ring {
          display: inline-flex; align-items: center; justify-content: center;
          border-radius: 50%; border: 3px solid rgba(0,0,0,0.4);
          padding: 6px; flex-shrink: 0;
          box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 0 8px rgba(255,255,255,0.15);
        }
        .location-ring.highlight {
          outline: 3px solid #7c3aed; outline-offset: 2px;
          box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 0 8px rgba(255,255,255,0.15), 0 0 12px rgba(124,58,237,0.6);
        }
        .location-ring-name {
          font-family: 'Cinzel', Georgia, serif; font-weight: 900;
          color: #fff; line-height: 1.1; text-align: center;
          overflow-wrap: normal; word-break: normal; hyphens: none;
          text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }

        /* ── GENERAL/MINION TOKENS IN MODALS ── */
        .modal-general-token {
          display: inline-flex; align-items: center; justify-content: center;
          width: 36px; height: 36px; border-radius: 50%;
          border: 3px solid rgba(0,0,0,0.4);
          box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 8px rgba(255,255,255,0.15);
          font-size: 1.1em;
        }
        .modal-minion-dot {
          display: inline-block; width: 16px; height: 16px;
          border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.3);
          box-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }

        /* ── DARKNESS LOCATION CARD ── */
        .darkness-loc-card { padding: 10px 12px; }
        .darkness-loc-general { padding: 12px 12px 18px 12px; }

        /* ── INLINE DOTS ── */
        .mdot {
          display: inline-block; border-radius: 50%;
          border: 1.5px solid rgba(0,0,0,0.3); box-shadow: 0 1px 2px rgba(0,0,0,0.3); vertical-align: middle;
        }

        /* ── SPAWN LINES ── */
        .sl {
          display: flex; justify-content: space-between; align-items: center;
          padding: 3px 8px; margin: 2px 0; border-radius: 3px;
        }
        .sl.green { background: rgba(22,163,74,0.06); border: 1px solid rgba(22,163,74,0.2); }
        .sl.blue { background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.2); }
        .sl.purple { background: rgba(124,58,237,0.06); border: 1px solid rgba(124,58,237,0.2); }
        .sl.red { background: rgba(220,38,38,0.04); border: 1px solid rgba(220,38,38,0.2); }
        .sl.gray { background: rgba(107,114,128,0.06); border: 1px solid rgba(107,114,128,0.2); }
        .sl .left { font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: 0.85em; }
        .sl .right { font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: 0.8em; color: #2c1810; }
        .sl .left.cg { color: #16a34a; } .sl .left.cb { color: #3b82f6; }
        .sl .left.cr { color: #ef4444; } .sl .left.ck { color: #6b7280; }
        .not-placed { opacity: 0.7; }
        .not-placed-label { font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: 0.75em; color: #b91c1c; margin-left: 6px; }

        /* ── INTERVENTION BUTTONS (Draw Phase) ── */
        .intervene-area { display: flex; flex-direction: column; gap: 6px; padding: 0 8px; margin-top: 8px; }
        .intervene-btn {
          display: flex; align-items: center; gap: 10px;
          padding: 10px 14px; border-radius: 8px;
          cursor: pointer; border: none; width: 100%;
          font-family: 'Cinzel', Georgia, serif;
          transition: filter 0.15s, transform 0.1s;
          text-align: left;
        }
        .intervene-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
        .intervene-btn:active { transform: translateY(0); }
        .intervene-btn.selected {
          outline: 3px solid #d4af37; outline-offset: 1px;
          box-shadow: 0 0 12px rgba(212,175,55,0.6), 0 2px 6px rgba(0,0,0,0.3);
        }
        .intervene-btn .iv-icon { font-size: 1.2em; flex-shrink: 0; }
        .intervene-btn .iv-text { display: flex; flex-direction: column; }
        .intervene-btn .iv-name { font-weight: 900; font-size: 0.85em; }
        .intervene-btn .iv-desc { font-size: 0.65em; opacity: 0.85; font-family: 'Comic Sans MS', cursive; margin-top: 2px; }
        .intervene-btn.hero-skill {
          background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%); color: white;
          box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }
        .intervene-btn.hero-skill .iv-name, .intervene-btn.hero-skill .iv-desc { color: white; }
        .intervene-btn.special-card {
          background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%); color: white;
          box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }
        .intervene-btn.special-card .iv-name, .intervene-btn.special-card .iv-desc { color: white; }
        .intervene-btn.quest {
          background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%); color: white;
          box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }
        .intervene-btn.quest .iv-name, .intervene-btn.quest .iv-desc { color: white; }

        /* ── INTERVENTION EFFECTS (Resolve Phase) ── */
        .iv-effect { display: none; }
        .iv-effect.active { display: block; }

        /* ── OVERRUN / TAINT / WARNINGS ── */
        .overrun-box { background: rgba(239,68,68,0.08); border: 1px solid #ef4444; border-radius: 5px; padding: 5px 10px; margin: 4px 0; }
        .overrun-title { font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: 0.85em; color: #dc2626; margin-bottom: 4px; }
        .overrun-sub { font-size: 0.75em; color: #3d2b1f; margin-bottom: 4px; }
        .taint-box { background: rgba(147,51,234,0.08); border: 1px solid #9333ea; border-radius: 5px; padding: 5px 10px; margin: 4px 0; }
        .taint-title { font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: 0.85em; color: #7e22ce; }
        .warn-badge { padding: 3px 8px; border-radius: 3px; font-size: 0.72em; font-weight: bold; margin-bottom: 3px; }
        .warn-overrun { border: 1px solid #ef4444; background: rgba(239,68,68,0.08); color: #b91c1c; }
        .warn-taint { border: 1px solid #9333ea; background: rgba(147,51,234,0.08); color: #7e22ce; }

        .no-minion-note {
          text-align: center; padding: 12px; font-family: 'Cinzel', Georgia, serif;
          font-weight: 900; font-size: 0.85em; color: #15803d; font-style: italic;
        }

        /* ── EFFECT NOTIFICATIONS (Draw Phase) ── */
        .fx-note {
          display: flex; justify-content: space-between; align-items: center;
          padding: 5px 10px; margin: 3px 0; border-radius: 5px;
          font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: 0.78em;
        }
        .fx-note.advance { background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.3); }
        .fx-note.overrun { background: rgba(239,68,68,0.08); border: 1px solid #ef4444; }
        .fx-note.taint { background: rgba(147,51,234,0.08); border: 1px solid #9333ea; }
        .fx-note.blocked { background: rgba(139,115,85,0.1); border: 1px solid rgba(139,115,85,0.3); }
        .fx-note .fx-label { display: flex; align-items: center; }

        /* ── SECTION SEPARATOR ── */
        .sep { border-top: 1px solid rgba(139,115,85,0.3); margin: 10px 0; }

        /* ── TOGGLE SECTIONS ── */
        .toggle-section { display: none; }
        .toggle-section.visible { display: block; }

        /* ── CORNER TOKENS (Monarch City) ── */
        .corner-wrap { position: relative; display: inline-block; }
        .ct {
          position: absolute; width: 22px; height: 22px; border-radius: 50%;
          border: 1.5px solid rgba(0,0,0,0.3); box-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
        .ct.tl { top: -6px; left: -6px; }
        .ct.tr { top: -6px; right: -6px; }
        .ct.bl { bottom: -6px; left: -6px; }
        .ct.br { bottom: -6px; right: -6px; }

        /* ── RESULTS DIVIDER ── */
        .results-divider {
          margin-top: 2px; padding-top: 4px;
          border-top: 2px solid rgba(139,115,85,0.4);
        }

        /* ── CARD VIEW SWITCHING ── */
        .card-view { display: none; }
        .card-view.active { display: block; }

        /* ── CARD REVEAL ANIMATION ── */
        @keyframes cardReveal {
          from { opacity: 0; transform: translateY(10px) scale(0.95); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .card-reveal-anim {
          animation: cardReveal 0.4s ease-out forwards; opacity: 0;
        }

        /* ── HI-BLOCK (Hierarchical indentation for ability text) ── */
        .hi-block > div { margin-bottom: 4px; }
        .hi-block > div:last-child { margin-bottom: 0; }
        .hi-block .hi-title, .hi-title { padding-left: 1.5em; text-indent: -1.5em; }
        .hi-block .hi-cont, .hi-cont { padding-left: 1.5em; }
        .hi-block .hi-sub, .hi-sub { padding-left: 3em; text-indent: -2.5em; }

        /* ── FLAVOR / COMIC SANS TEXT ── */
        .modal-desc-text {
          font-family: 'Comic Sans MS', 'Comic Sans', cursive;
        }
        .flavor-text {
          font-family: 'Comic Sans MS', 'Comic Sans', cursive;
          font-size: 0.75em; color: #3d2b1f; line-height: 1.5;
        }

        /* ── SPLASH SCREEN ── */
        @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=MedievalSharp&display=swap');

        #splash-screen {
            position: fixed; inset: 0; z-index: 99999;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            background: #000;
            transition: opacity 1.2s ease, visibility 1.2s ease;
        }
        #splash-screen.fade-out { opacity: 0; visibility: hidden; }

        #splash-screen .ambient-bg {
            position: absolute; inset: 0;
            background: radial-gradient(ellipse at 50% 40%, #1a0a2e 0%, #0a0412 40%, #000 70%);
            z-index: 0;
        }

        #splash-particles {
            position: absolute; inset: 0; z-index: 1; pointer-events: none;
        }

        #splash-screen .splash-image-wrapper {
            position: relative; z-index: 2;
            width: 90vw; max-width: 860px;
            opacity: 0; transform: scale(0.92);
            animation: splashImgReveal 2s ease-out 0.5s forwards;
        }
        @keyframes splashImgReveal {
            0%   { opacity: 0; transform: scale(0.92); filter: brightness(0); }
            40%  { opacity: 1; filter: brightness(0.6); }
            100% { opacity: 1; transform: scale(1); filter: brightness(1); }
        }

        #splash-screen .splash-image-wrapper::before {
            content: ''; position: absolute; inset: -3px;
            background: linear-gradient(135deg, #d4a017, #8b6914, #d4a017, #f5d442, #d4a017, #8b6914, #d4a017);
            background-size: 300% 300%; border-radius: 8px; z-index: -1;
            animation: splashBorderShimmer 4s ease infinite;
        }
        @keyframes splashBorderShimmer {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }

        #splash-screen .splash-image-wrapper::after {
            content: ''; position: absolute; inset: -12px; border-radius: 12px;
            box-shadow: 0 0 40px rgba(212,160,23,0.25), 0 0 80px rgba(212,160,23,0.1);
            z-index: -2;
            animation: splashGlowPulse 3s ease-in-out infinite;
        }
        @keyframes splashGlowPulse {
            0%, 100% { opacity: 0.6; }
            50%      { opacity: 1; }
        }

        #splash-screen .splash-image {
            width: 100%; height: auto; display: block; border-radius: 6px;
        }

        #splash-screen .image-vignette {
            position: absolute; inset: 0; border-radius: 6px;
            background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4) 100%);
            pointer-events: none;
        }

        #splash-screen .version-badge {
            position: absolute; top: 12px; right: 14px;
            font-family: 'MedievalSharp', cursive; font-size: 11px;
            color: rgba(212,160,23,0.7); letter-spacing: 1px; z-index: 3;
            text-shadow: 0 0 6px rgba(0,0,0,0.8);
        }

        #splash-screen .splash-bottom {
            position: relative; z-index: 2;
            display: flex; flex-direction: column; align-items: center;
            margin-top: 28px; opacity: 0;
            animation: splashFadeUp 1.2s ease-out 2s forwards;
        }
        @keyframes splashFadeUp {
            0%   { opacity: 0; transform: translateY(16px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        #splash-screen .loading-container {
            width: 280px; height: 6px;
            background: rgba(212,160,23,0.15); border-radius: 3px; overflow: hidden;
            border: 1px solid rgba(212,160,23,0.2); margin-bottom: 22px;
        }

        #splash-screen .loading-bar {
            height: 100%; width: 0%;
            background: linear-gradient(90deg, #8b6914, #d4a017, #f5d442, #d4a017, #8b6914);
            background-size: 200% 100%; border-radius: 3px;
            animation: splashLoadProgress 2.8s ease-in-out 1.5s forwards, splashBarShimmer 1.5s ease infinite;
        }
        @keyframes splashLoadProgress {
            0%   { width: 0%; }  20%  { width: 25%; }
            50%  { width: 60%; } 80%  { width: 85%; }
            100% { width: 100%; }
        }
        @keyframes splashBarShimmer {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }

        #splash-screen .splash-loading-text {
            font-family: 'MedievalSharp', cursive; font-size: 13px;
            color: rgba(212,160,23,0.6); letter-spacing: 2px;
            margin-bottom: 20px; text-transform: uppercase;
        }

        #splash-screen .start-btn {
            display: none; align-items: center; justify-content: center; gap: 8px;
            padding: 14px 48px;
            font-family: 'Cinzel Decorative', cursive; font-size: 18px; font-weight: 700;
            letter-spacing: 3px; text-transform: uppercase; color: #f5d442;
            background: linear-gradient(180deg, rgba(139,105,20,0.4) 0%, rgba(90,65,10,0.6) 100%);
            border: 2px solid rgba(212,160,23,0.6); border-radius: 4px;
            cursor: pointer; position: relative; overflow: hidden;
            transition: all 0.3s ease;
            text-shadow: 0 0 10px rgba(245,212,66,0.5);
            animation: splashBtnAppear 0.8s ease forwards;
        }
        @keyframes splashBtnAppear {
            0%   { opacity: 0; transform: scale(0.9); }
            100% { opacity: 1; transform: scale(1); }
        }
        #splash-screen .start-btn::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(90deg, transparent, rgba(245,212,66,0.1), transparent);
            transform: translateX(-100%); transition: transform 0.6s ease;
        }
        #splash-screen .start-btn:hover {
            border-color: #f5d442;
            background: linear-gradient(180deg, rgba(139,105,20,0.6) 0%, rgba(90,65,10,0.8) 100%);
            box-shadow: 0 0 30px rgba(212,160,23,0.3), inset 0 0 20px rgba(212,160,23,0.1);
            transform: scale(1.03);
        }
        #splash-screen .start-btn:hover::before { transform: translateX(100%); }
        #splash-screen .start-btn:active { transform: scale(0.98); }

        #splash-screen .ornament {
            position: absolute; z-index: 2;
            color: rgba(212,160,23,0.3); font-size: 30px; line-height: 1;
            opacity: 0; animation: splashOrnamentFade 1.5s ease-out 1.8s forwards;
        }
        @keyframes splashOrnamentFade { 0% { opacity: 0; } 100% { opacity: 1; } }
        #splash-screen .ornament.tl { top: 16px; left: 20px; }
        #splash-screen .ornament.tr { top: 16px; right: 20px; transform: scaleX(-1); }
        #splash-screen .ornament.bl { bottom: 16px; left: 20px; transform: scaleY(-1); }
        #splash-screen .ornament.br { bottom: 16px; right: 20px; transform: scale(-1); }

        @media (max-width: 600px) {
            #splash-screen .splash-image-wrapper { width: 96vw; }
            #splash-screen .start-btn { padding: 12px 36px; font-size: 15px; letter-spacing: 2px; }
            #splash-screen .loading-container { width: 220px; }
            #splash-screen .ornament { font-size: 22px; }
            #splash-screen .version-badge { font-size: 9px; }
        }

        /* ── MOBILE: Override Comic Sans body/description text to Crimson Text ── */
        @media (max-width: 768px) {
            .modal-desc-text,
            .deck-stat-label,
            .g-hi-title,
            .war-advance-text,
            .g-section-text,
            .intervene-btn .iv-desc,
            .flavor-text {
                font-family: 'Crimson Text', Georgia, serif !important;
                font-size: 0.7em !important;
            }
            .parchment-box {
                overflow: hidden;
            }
            /* Shrink all location rings on darkness spreads cards */
            .darkness-loc-general .location-ring,
            .darkness-loc-card .location-ring {
                width: 52px !important;
                height: 52px !important;
            }
            .darkness-loc-general .location-ring-name,
            .darkness-loc-card .location-ring-name {
                font-size: 0.42em !important;
            }
            /* Allow general row to wrap — only triggers for Next Location (too wide) */
            .darkness-loc-general > div:first-child {
                flex-wrap: wrap !important;
                justify-content: center !important;
            }
            .next-loc-path {
                flex-basis: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                margin-top: 12px;
            }
            .next-loc-path > div > div + div {
                margin-left: -10px !important;
            }
            /* Keep both minion cards on same line */
            .darkness-minion-row {
                flex-wrap: nowrap !important;
            }
            .darkness-loc-card {
                flex: 1 1 auto !important;
                min-width: 0 !important;
                max-width: 160px !important;
            }
        }