* {
            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;
        }
        body.map-board-open {
            overflow: hidden;
            touch-action: none;
        }

        #map-modal,
        #board-container,
        #game-map,
        #game-map image {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        .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: 0;
            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;
        }

        .hero-icon-img,
        .hero-icon-fallback {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            border-radius: 50%;
            vertical-align: middle;
        }

        .hero-icon-img {
            object-fit: contain;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65));
        }

        .hero-name-with-token {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            line-height: 1;
            vertical-align: middle;
        }

        .hero-name-with-token--fill {
            align-self: stretch;
            height: 100%;
        }

        .hero-icon--fill {
            align-self: stretch;
            flex: 0 0 auto;
            max-height: none;
            min-height: 0;
            aspect-ratio: 1 / 1;
            object-fit: contain;
        }

        .hero-icon-fallback {
            color: currentColor;
            line-height: 1;
            font-weight: 900;
        }

        .end-turn-skill-line {
            margin-top: 3px;
            color: #3d2b1f;
            font-size: 0.75em;
            line-height: 1.5;
            display: flex !important;
            align-items: flex-start;
            gap: 6px;
            padding-left: 0 !important;
            text-indent: 0 !important;
        }

        .end-turn-skill-icon {
            height: 22px;
            width: 22px;
            flex: 0 0 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: -2px;
            min-width: 22px;
            overflow: hidden;
        }

        .end-turn-skill-icon .hero-icon-img,
        .end-turn-skill-icon .hero-icon-fallback {
            width: 100% !important;
            height: 100% !important;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .end-turn-skill-copy {
            flex: 1 1 auto;
            min-width: 0;
        }

        .hero-life-token-row {
            background: rgba(139,115,85,0.1);
            border: 1px solid rgba(139,115,85,0.3);
            border-radius: 5px;
            padding: 0 10px 0 0;
            min-height: 34px;
            color: #2c1810;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            font-size: 0.9em;
            overflow: hidden;
        }

        .hero-life-token-name {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }

        .hero-life-token-health {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }

        .game-token-icon {
            display: inline-block;
            width: 1.35em;
            height: 1.35em;
            object-fit: contain;
            vertical-align: -0.25em;
            flex: 0 0 auto;
        }

        .game-token-icon--small {
            width: 1.2em;
            height: 1.2em;
        }

        .game-token-icon--tiny {
            width: 14px;
            height: 14px;
            vertical-align: -2px;
        }

        .game-token-icon--tracker {
            width: 11px;
            height: 11px;
            vertical-align: -1px;
        }

        .game-token-icon--drawer {
            width: 38px;
            height: 38px;
            align-self: stretch;
            object-fit: contain;
            vertical-align: 0;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65));
        }

        .game-token-icon--deck-label {
            width: 1.45em;
            height: 1.45em;
            vertical-align: -0.34em;
        }

        .game-token-icon--stat,
        .deck-token-label--stat .game-token-icon {
            width: 32px;
            height: 32px;
            vertical-align: 0;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
        }

        .game-token-icon--banner {
            width: 42px;
            height: 42px;
            align-self: stretch;
            object-fit: contain;
            vertical-align: 0;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65));
        }

        .game-token-icon--deck-banner,
        .deck-token-label--banner .game-token-icon {
            width: 42px;
            height: 42px;
            align-self: stretch;
            object-fit: contain;
            vertical-align: 0;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65));
        }

        .deck-token-label {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            line-height: 1;
        }

        .deck-token-label--stat {
            gap: 6px;
            min-height: 32px;
        }

        .deck-token-label--banner {
            gap: 8px;
            min-height: 42px;
            height: 100%;
            align-self: stretch;
        }

        .deck-token-label--banner > span:last-child,
        .general-banner-name .deck-token-label--banner > span:last-child {
            min-width: 0;
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            line-height: 1.05;
        }

        .token-banner-row {
            min-height: 42px;
            padding: 0 14px 0 0 !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px;
            overflow: hidden;
        }

        .token-banner-row--left {
            justify-content: flex-start !important;
        }

        .token-banner-row--between {
            justify-content: space-between !important;
        }

        .token-banner-title,
        .token-banner-side {
            display: inline-flex;
            align-items: center;
            min-height: 42px;
            line-height: 1;
            min-width: 0;
        }

        .token-banner-title {
            gap: 8px;
        }

        .deck-placard-grid .token-banner-title {
            font-size: 0.95em;
        }

        .token-banner-side {
            flex: 0 1 auto;
            justify-content: flex-end;
        }

        .game-token-inline {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }

        .hero-card-token-icon {
            display: inline-block;
            width: 1.45em;
            height: 1.45em;
            object-fit: contain;
            vertical-align: -0.3em;
            flex: 0 0 auto;
            filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45));
        }

        .hero-card-token-icon--small {
            width: 1.15em;
            height: 1.15em;
            vertical-align: -0.22em;
        }

        .hero-card-token-icon--large {
            width: 2.1em;
            height: 2.1em;
            vertical-align: -0.45em;
        }

        .hero-card-token-icon--banner {
            width: 42px;
            height: 42px;
            align-self: stretch;
            object-fit: contain;
            vertical-align: 0;
        }

        .card-detail-banner {
            min-height: 42px;
            padding: 0 14px 0 0;
            border-bottom: 2px solid #8b7355;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .card-detail-banner-name {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 42px;
            line-height: 1;
        }

        .action-btn-icon .hero-card-token-icon,
        .action-btn-icon .game-token-icon {
            width: 1.25em;
            height: 1.25em;
            vertical-align: -0.25em;
        }

        .hero-banner-health-badge {
            position: relative;
            display: inline-grid;
            place-items: center;
            width: var(--hero-banner-token-size, 40px);
            height: var(--hero-banner-token-size, 40px);
            flex: 0 0 var(--hero-banner-token-size, 40px);
            margin-left: auto;
            filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45));
        }

        .hero-banner-health-badge .game-token-icon {
            width: 100%;
            height: 100%;
            display: block;
        }

        .hero-banner-health-value {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            color: #fff4cf;
            font-family: 'Cinzel', Georgia, serif;
            font-size: calc(var(--hero-banner-token-size, 40px) * 0.33);
            font-weight: 900;
            line-height: 1;
            text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 5px rgba(0,0,0,0.75);
            transform: translateY(1px);
        }

        .game-token-icon.ic-off,
        .ic-off .game-token-icon {
            opacity: 0.25;
            filter: grayscale(100%);
        }

        .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: #16a34a;
            box-shadow: 0 0 16px rgba(22,163,74,0.55), 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%); }

        /* Backlog: revisit Sapphire sprite animation integration after the board UI port stabilizes.
        .enemy-sprite-panel {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin: 6px auto 8px;
            padding: 8px 10px;
            max-width: 240px;
            border: 2px solid #2563eb;
            border-radius: 6px;
            background: radial-gradient(circle at 50% 42%, rgba(37,99,235,0.16), rgba(12,18,28,0.08) 58%, rgba(0,0,0,0.04));
            box-shadow: inset 0 0 18px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.25);
        }

        .enemy-sprite {
            flex: 0 0 auto;
            background-repeat: no-repeat;
            background-size: 500% 500%;
            image-rendering: auto;
            filter: drop-shadow(0 4px 5px rgba(0,0,0,0.45));
        }

        .enemy-sprite-caption {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            font-size: 0.78em;
            letter-spacing: 0.5px;
            text-align: center;
            text-shadow: 0 1px 2px rgba(255,255,255,0.45);
        }

        .enemy-sprite-subtitle {
            font-family: 'Comic Sans MS', cursive;
            font-size: 0.72em;
            line-height: 1.35;
            color: #3d2b1f;
            text-align: center;
        }

        .enemy-sprite-advance {
            animation: sapphire-advance-bob 1.15s ease-in-out infinite;
        }

        @keyframes sapphire-advance-bob {
            0%, 100% { transform: translateX(-3px) translateY(0); }
            50% { transform: translateX(4px) translateY(-3px); }
        }

        @keyframes sapphire-breath-25 {
            0% { background-position: 0% 0%; } 4% { background-position: 25% 0%; }
            8% { background-position: 50% 0%; } 12% { background-position: 75% 0%; }
            16% { background-position: 100% 0%; } 20% { background-position: 0% 25%; }
            24% { background-position: 25% 25%; } 28% { background-position: 50% 25%; }
            32% { background-position: 75% 25%; } 36% { background-position: 100% 25%; }
            40% { background-position: 0% 50%; } 44% { background-position: 25% 50%; }
            48% { background-position: 50% 50%; } 52% { background-position: 75% 50%; }
            56% { background-position: 100% 50%; } 60% { background-position: 0% 75%; }
            64% { background-position: 25% 75%; } 68% { background-position: 50% 75%; }
            72% { background-position: 75% 75%; } 76% { background-position: 100% 75%; }
            80% { background-position: 0% 100%; } 84% { background-position: 25% 100%; }
            88% { background-position: 50% 100%; } 92% { background-position: 75% 100%; }
            96%, 100% { background-position: 100% 100%; }
        }

        @keyframes sapphire-defeat-25 {
            0% { background-position: 0% 0%; } 4% { background-position: 25% 0%; }
            8% { background-position: 50% 0%; } 12% { background-position: 75% 0%; }
            16% { background-position: 100% 0%; } 20% { background-position: 0% 25%; }
            24% { background-position: 25% 25%; } 28% { background-position: 50% 25%; }
            32% { background-position: 75% 25%; } 36% { background-position: 100% 25%; }
            40% { background-position: 0% 50%; } 44% { background-position: 25% 50%; }
            48% { background-position: 50% 50%; } 52% { background-position: 75% 50%; }
            56% { background-position: 100% 50%; } 60% { background-position: 0% 75%; }
            64% { background-position: 25% 75%; } 68% { background-position: 50% 75%; }
            72% { background-position: 75% 75%; } 76% { background-position: 100% 75%; }
            80% { background-position: 0% 100%; } 84% { background-position: 25% 100%; }
            88% { background-position: 50% 100%; } 92% { background-position: 75% 100%; }
            96%, 100% { background-position: 100% 100%; }
        }
        */

        .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.4;
        }

        .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;
        }

        body.map-board-open .modal.active:not(#map-modal) {
            background: rgba(0, 0, 0, 0.28) !important;
            z-index: 60000 !important;
        }
        body.map-board-fullscreen-lost.map-board-open .modal.active:not(#map-modal)::before {
            content: "Tap to restore fullscreen";
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
            padding: 4px 10px;
            border: 1px solid rgba(212,175,55,0.45);
            border-radius: 999px;
            background: rgba(26,15,10,0.82);
            color: #f8e6b0;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.58rem;
            font-weight: 900;
            letter-spacing: 0.4px;
            pointer-events: none;
        }

        .modal--reference-ui {
            align-items: flex-start;
            padding: 12vh 20px 20px;
        }

        .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);
        }

        /* v2: Parchment-style modal — no blue background or gold border,
           used for all multiplayer modals that render parchment-box content.
           v3: overflow:hidden + border-radius:8px applied directly so rounded
           corners match the .parchment-box inside AND the outer container
           doesn't inherit .modal-content's overflow-y:auto (prevents double
           scrollbar stacked on top of .parchment-body). */
        .modal-content-parchment {
            background: transparent;
            border: none;
            border-radius: 8px;
            padding: 0;
            box-shadow: none;
            overflow: hidden;
        }
        /* 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,#2563eb,#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(37,99,235,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,#1f2937,#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(31,41,55,0.25); }
        .die-fade-miss { opacity: 0.28; }
        .die-reroll-held { animation: none !important; }
        .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; gap:8px; font-size:0.9em; }
        .faction-pill-left { display:flex; align-items:center; gap:6px; min-width:0; 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; }

        #combat-modal > .modal-content-parchment,
        #combat-results-modal > .modal-content-parchment {
            width: fit-content;
            min-width: min(360px, calc(100vw - 32px));
            max-width: 560px;
        }

        #general-card-selection-modal > .modal-content-parchment,
        #group-penalty-modal > .modal-content-parchment {
            width: fit-content;
            min-width: min(360px, calc(100vw - 32px));
            max-width: 520px;
        }

        #general-card-selection-modal .parchment-box,
        #group-penalty-modal .parchment-box {
            box-sizing: border-box;
            width: 100%;
        }

        #group-penalty-content {
            padding: 0 10px 10px;
        }

        #general-card-selection-buttons {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(139,115,85,0.35);
        }

        #general-card-selection-buttons > button,
        #group-penalty-modal .parchment-box > button {
            flex: 0 1 168px;
            width: auto;
            min-width: 118px;
            max-width: 208px;
            min-height: 36px;
            margin-top: 0;
            padding: 7px 12px;
            white-space: nowrap;
        }

        #group-penalty-modal .parchment-box > button {
            margin: 0 auto 10px;
        }

        #combat-results-modal > .modal-content-parchment {
            width: fit-content;
            min-width: min(360px, calc(100vw - 32px));
            max-width: 560px;
        }

        #combat-modal > .modal-content-parchment > .parchment-box,
        #combat-results-modal > .modal-content-parchment > .parchment-box {
            box-sizing: border-box;
            width: 100%;
        }

        .combat-modal-footer {
            margin: 14px 10px 10px;
            padding-top: 12px;
            border-top: 1px solid rgba(139,115,85,0.28);
        }

        .combat-minion-pill,
        .combat-defeated-pill {
            --combat-faction-color: #5c3d2e;
            border: 2px solid rgba(82,49,30,0.42);
            border-radius: 999px;
            color: #fff;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.14), transparent 42%),
                linear-gradient(135deg, var(--combat-faction-color), var(--combat-faction-color));
            box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
            text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5);
        }

        .combat-minion-pill {
            display: inline-flex;
            width: 150px;
            padding: 0 10px 0 0;
            margin: 0;
            min-height: 38px;
            overflow: hidden;
            box-sizing: border-box;
        }

        .combat-minion-list,
        .combat-defeated-list {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
            margin: 6px 0;
        }

        .combat-minion-group {
            margin: 7px 0;
        }

        .combat-location-heading {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            font-size: 0.82em;
            color: #5c3d2e;
            letter-spacing: 0.5px;
            margin: 4px 0 5px;
        }

        .combat-minion-pill .faction-pill-left,
        .combat-defeated-pill .faction-pill-left {
            color: #fff !important;
            flex: 1 1 auto;
        }

        .combat-minion-pill .faction-pill-row {
            width: 100%;
        }

        .combat-minion-pill .faction-pill-right,
        .combat-defeated-pill .faction-pill-right {
            color: rgba(255,255,255,0.92);
            text-shadow: 0 2px 4px rgba(0,0,0,0.9);
            white-space: nowrap;
        }

        .combat-minion-token,
        .combat-defeated-token {
            align-self: stretch;
            flex: 0 0 auto;
            height: 38px;
            aspect-ratio: 1 / 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
        }

        .combat-minion-token > *,
        .combat-defeated-token > * {
            height: 100% !important;
            max-height: 100% !important;
            width: auto !important;
            max-width: none !important;
            margin-left: 0 !important;
        }

        .command-allocation-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin: 10px 0;
        }

        .command-allocation-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            padding: 7px 10px;
            border-top: 1px solid rgba(139,115,85,0.22);
        }

        .command-allocation-row:first-child {
            border-top: 0;
        }

        .command-hero-name {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            color: #2c1810;
            text-shadow: 0 1px 0 rgba(255,255,255,0.45);
        }

        .command-hero-name .hero-name-with-token {
            min-width: 0;
        }

        .command-counter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .command-counter-btn {
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg,#5c3d2e,#4a2f20);
            border: 1px solid #8b7355;
            border-radius: 4px;
            color: #fff;
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            line-height: 1;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.35);
        }

        .command-counter-btn:disabled {
            opacity: 0.35;
            cursor: default;
        }

        .command-counter-value {
            min-width: 18px;
            text-align: center;
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            color: #3d2b1f;
        }

        .command-summary {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            font-size: 0.78em;
            color: #5c3d2e;
            text-align: center;
            margin: 8px 0 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: #16a34a;
            box-shadow: 0 0 16px rgba(22,163,74,0.55), 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 > .map-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 rgba(0,0,0,0.62);
            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;
        }

        /* v2: when the tooltip is in location-popup mode (data-stationary="location"),
           the wrapper drops its own dark gradient + frame border + padding because
           the parchment shell rendered by showLocationTooltip already provides the
           chrome. Avoids the "parchment inside a parchment" double frame.
           Hero / general / minion hover tooltips don't set data-stationary="location",
           so they keep the default styling above.
           v3: the location popup is now sized 20% smaller than the legacy 320px
           hover tooltip — narrower, with the inline-styled banner / body / button
           text scaled down proportionately in showLocationTooltip. */
        .hover-tooltip[data-stationary="location"] {
            background: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;
            padding: 0;
            width: 256px;
        }
        
        /* 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 rgba(0,0,0,0.5);
            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: grid;
            grid-template-columns: minmax(96px, 1fr) auto minmax(160px, 1fr);
            gap: 12px;
            align-items: center;
            min-height: 54px;
            padding: 6px 10px;
            border-bottom: 1px solid rgba(212,175,55,0.25);
            flex-shrink: 0;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.07), transparent),
                linear-gradient(180deg, #6b4327, #2b1a10);
        }
        .map-title strong {
            display: block;
            color: #ffe4a4;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 1rem;
            line-height: 1.05;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .map-title span {
            display: block;
            color: #e3cda4;
            font-size: 0.8rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .map-top-player {
            justify-self: center;
            min-width: 250px;
        }
        .map-player-plaque {
            display: inline-grid;
            grid-template-columns: 36px auto auto auto;
            align-items: center;
            gap: 8px;
            min-height: 36px;
            padding: 0;
            color: #ffe7ad;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
                linear-gradient(180deg, #4b2e1d, #21140d);
            border: 1px solid rgba(241,204,112,0.46);
            border-radius: 999px;
            box-shadow: inset 0 1px rgba(255,244,188,0.22), inset 0 -2px rgba(0,0,0,0.32), 0 4px 11px rgba(0,0,0,0.42);
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            letter-spacing: 0;
            white-space: nowrap;
        }
        .map-player-avatar {
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            border-radius: 0;
            border: 0;
            color: #fff4c7;
            background: none !important;
            box-shadow: none;
            font-size: 1.18rem;
            line-height: 1;
        }
        .map-player-name {
            min-width: 72px;
            color: #fff0ba;
            font-size: 0.72rem;
            text-shadow: 0 1px #120906;
        }
        .map-player-name-wrap {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            white-space: nowrap;
        }
        .map-player-status-effects {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex: 0 0 auto;
            line-height: 1;
            max-height: var(--map-player-plaque-h, 36px);
            overflow: hidden;
        }
        .map-player-counter {
            display: inline-grid;
            grid-template-columns: 36px auto;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-width: 62px;
            min-height: 36px;
            padding: 0 12px 0 0;
            border: 1px solid rgba(241,204,112,0.28);
            border-radius: 999px;
            background: #24150d;
            box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.72rem;
            font-weight: 900;
            line-height: 1;
            overflow: hidden;
        }
        .map-plaque-icon {
            display: inline-block;
            width: 36px;
            height: 36px;
            background: transparent center / contain no-repeat;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
        }
        .map-player-counter.life {
            border-top-right-radius: 999px;
            border-bottom-right-radius: 999px;
            margin-right: -1px;
        }
        .map-player-counter.life .map-plaque-icon {
            background-image: url('../images/game_tokens/Health.png');
        }
        .map-player-counter.actions .map-plaque-icon {
            background-image: url('../images/game_tokens/Actions.png');
        }
        .map-menu-btn {
            min-width: 88px;
            min-height: 40px;
            padding: 0 14px;
            justify-self: end;
            color: #ffe3a1;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
                linear-gradient(180deg, #5b3924, #342015);
            border-color: rgba(255,226,158,0.32);
            box-shadow: inset 0 1px rgba(255,255,255,0.12), inset 0 -1px rgba(0,0,0,0.28), 0 2px 0 #1d110a;
        }
        .map-top-actions {
            justify-self: end;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .map-board-notifications {
            justify-self: start;
            position: relative;
            pointer-events: auto;
        }
        .map-icon-top-btn {
            width: 42px;
            height: 42px;
            min-width: 42px;
            min-height: 42px;
            padding: 4px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffe3a1;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
                linear-gradient(180deg, #4b2e1d, #21140d);
            border: 1px solid rgba(241,204,112,0.46);
            box-shadow: inset 0 1px rgba(255,244,188,0.22), inset 0 -2px rgba(0,0,0,0.32), 0 4px 11px rgba(0,0,0,0.42);
        }
        .map-icon-top-btn img {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            object-fit: cover;
            display: block;
            border: 1px solid rgba(255,226,142,0.78);
            box-shadow: inset 0 1px rgba(255,255,255,0.12), 0 2px 0 rgba(69,44,15,0.7);
            pointer-events: none;
        }
        .map-icon-top-btn.active,
        .map-icon-top-btn:hover:not(:disabled) {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.12), transparent 42%),
                linear-gradient(180deg, #5a3824, #28170f);
            border-color: rgba(241,204,112,0.68);
            box-shadow: inset 0 1px rgba(255,244,188,0.25), inset 0 -2px rgba(0,0,0,0.34), 0 4px 11px rgba(0,0,0,0.44);
        }
        .map-log-top-btn {
            color: #ffe3a1;
        }
        .hdr-btn-text { }
        .hdr-btn-icon { display: none; }

        .action-tray {
            order: 3;
            position: relative;
            z-index: 22;
            padding: 7px 10px;
            border-top: 1px solid rgba(0,0,0,0.48);
            border-bottom: 0;
            flex-shrink: 0;
            display: block;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.07), transparent),
                linear-gradient(180deg, #6b4327, #2b1a10);
        }
        .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 {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
            flex: 1;
        }
        .action-category-dock {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 6px;
        }
        .action-category-dock::before {
            content: "";
        }
        .mobile-action-menu {
            display: none;
        }
        /* v4: Spectator lockout for multiplayer — disables every action button
           (movement, actions, end turn) when it's not the local user's turn.
           Applied by game._mpApplySpectatorLockout() to the .action-btns
           container after every turn-tracker render. pointer-events none
           swallows clicks; opacity dims the UI so it's visually clear the
           buttons are inert. filter:grayscale softens the individual button
           highlights so green/yellow/red ones don't look inviting. */
        .action-btns.mp-spectator {
            pointer-events: none;
            opacity: 0.45;
            filter: grayscale(0.6);
        }
        .action-row {
            position: absolute;
            left: 56px;
            right: 12px;
            bottom: 0;
            z-index: 23;
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 6px;
            padding: 6px;
            border: 1px solid rgba(0,0,0,0.55);
            border-radius: 8px 8px 0 0;
            background: rgba(39, 23, 13, 0.94);
            box-shadow: 0 -4px 14px rgba(0,0,0,0.4);
            pointer-events: none;
        }
        .action-row:not(:has(> .phase-btn:not(.action-group-hidden):not([style*="display: none"]))) {
            display: none;
        }
        .action-row-bottom { padding-top: 0; border-top: 0; }
        .action-group-hidden { display: none !important; }
        .action-row .action-btn-icon { display: none; }
        .action-row > .phase-btn {
            pointer-events: auto;
            width: auto;
            min-width: 0;
            margin-top: 0;
            min-height: 42px;
            padding: 4px 6px;
            font-size: 0.57em;
            white-space: normal;
            line-height: 1.05;
            overflow-wrap: anywhere;
            text-overflow: clip;
            text-align: center;
            color: #ffe3a1;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
                linear-gradient(180deg, #5b3924, #342015);
            border-color: rgba(255,226,158,0.32);
            box-shadow: inset 0 1px rgba(255,255,255,0.12), inset 0 -1px rgba(0,0,0,0.28), 0 2px 0 #1d110a;
        }
        .action-btns .phase-btn {
            width: auto; min-width: 0; min-height: 38px; margin-top: 0; padding: 4px 7px;
            font-size: 0.62em; text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
                linear-gradient(180deg, #5b3924, #342015);
            border-color: rgba(255,226,158,0.32);
            color: #ffe3a1;
            box-shadow: inset 0 1px rgba(255,255,255,0.12), inset 0 -1px rgba(0,0,0,0.28), 0 2px 0 #1d110a;
        }
        .action-row > .phase-btn {
            font-size: 0.57em;
            letter-spacing: 0;
            line-height: 1.05;
            white-space: normal;
            overflow-wrap: normal;
            word-break: normal;
            text-overflow: clip;
        }
        .action-btns .phase-btn.active,
        .action-btns .phase-btn:hover:not(:disabled),
        .action-row > .phase-btn:hover:not(:disabled) {
            color: #1d1108;
            background: linear-gradient(180deg, #f1cc70, #d4af37);
            border-color: rgba(48,27,11,0.62);
            box-shadow: inset 0 1px rgba(255,255,255,0.28), 0 2px 0 #7d551d;
        }
        .action-btns .phase-btn.danger {
            color: #fff;
            background: linear-gradient(180deg, #b64235, #7f241d);
            border-color: #d3685d;
            box-shadow: inset 0 1px rgba(255,255,255,0.1), 0 2px 0 #45130f;
        }
        .action-btns .phase-btn.danger:hover:not(:disabled),
        .action-btns .phase-btn.danger.active {
            color: #fff2c4;
            background: linear-gradient(180deg, #9c392e, #641e17);
            border-color: rgba(255,187,148,0.55);
            box-shadow: inset 0 1px rgba(255,255,255,0.12), 0 2px 0 #45130f;
        }
        .map-top-bar .phase-btn {
            width: auto; margin-top: 0; padding: 5px 10px;
            font-size: 0.75em;
        }
        .map-top-bar .map-menu-btn {
            min-width: 88px;
            min-height: 40px;
            padding: 0 14px;
            color: #ffe3a1;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
                linear-gradient(180deg, #5b3924, #342015);
            border-color: rgba(255,226,158,0.32);
            box-shadow: inset 0 1px rgba(255,255,255,0.12), inset 0 -1px rgba(0,0,0,0.28), 0 2px 0 #1d110a;
        }
        .map-top-bar .map-menu-btn:hover:not(:disabled) {
            color: #1d1108;
            background: linear-gradient(180deg, #f1cc70, #d4af37);
            border-color: rgba(48,27,11,0.62);
            box-shadow: inset 0 1px rgba(255,255,255,0.28), 0 2px 0 #7d551d;
        }
        #map-modal .board-container {
            order: 2;
        }
        #map-modal.active {
            inset: 0;
            width: 100vw;
            height: var(--map-board-vh, 100dvh);
            padding: 0;
            align-items: stretch;
            justify-content: stretch;
            background:
                radial-gradient(circle at 50% 18%, rgba(102,62,30,0.28), transparent 42%),
                #070503;
        }
        #map-modal.active .map-modal-content {
            width: 100vw;
            height: var(--map-board-vh, 100dvh);
            max-width: none;
            max-height: none;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: linear-gradient(180deg, #10172e 0%, #0c1328 100%);
            overflow: hidden;
        }
        #map-modal.active .board-container {
            flex: 1 1 auto;
            width: 100%;
            height: auto !important;
            max-height: none;
            aspect-ratio: auto;
            min-height: 0;
            padding-bottom: 0 !important;
            border: 0;
            border-radius: 0;
        }
        .map-bottom-hint {
            order: 4;
            display: none;
        }
        #map-modal.active .map-bottom-hint {
            display: none !important;
        }
        .map-context-card {
            display: none !important;
            position: absolute;
            right: 12px;
            bottom: 12px;
            z-index: 12;
            min-width: 210px;
            max-width: 300px;
            padding: 8px 10px;
            border: 1px solid rgba(0,0,0,0.55);
            border-radius: 6px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.06), transparent),
                rgba(38,23,14,0.9);
            box-shadow: 0 5px 14px rgba(0,0,0,0.38), inset 0 1px rgba(255,255,255,0.08);
            pointer-events: none;
        }
        .map-context-card strong,
        .map-context-card span {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .map-context-card strong {
            color: #f3d06f;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.7em;
            font-weight: 900;
        }
        .map-context-card span {
            margin-top: 2px;
            color: rgba(244,228,193,0.82);
            font-size: 0.64em;
        }
        .board-container:has(> .action-row > .phase-btn:not(.action-group-hidden):not([style*="display: none"])) .map-context-card {
            bottom: 62px;
        }

        /* ═══════════════════════════════════════
           MAP OVERLAY PANELS — DESKTOP DEFAULT
           ═══════════════════════════════════════ */
        .overlay-stack {
            position: absolute; top: 0; left: 0; bottom: 0; z-index: 10;
            display: flex; flex-direction: row;
            pointer-events: none;
        }
        .map-tracker-tabs {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 10px;
            padding: 10px 0 10px 5px;
            width: 46px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.07), transparent),
                linear-gradient(180deg, #2b1a10, #6b4327);
            border-right: 1px solid rgba(0,0,0,0.55);
            box-shadow: 5px 0 16px rgba(0,0,0,0.42);
            pointer-events: auto;
        }
        .map-tracker-tab {
            width: 40px;
            min-height: 112px;
            padding: 0;
            border: 1px solid rgba(0,0,0,0.42);
            border-right: 0;
            border-radius: 8px 0 0 8px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
                linear-gradient(180deg, #5b3924, #342015);
            color: #f4e4c1;
            box-shadow: inset 0 1px rgba(255,255,255,0.1), 0 2px 0 #1d110a;
            cursor: pointer;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.56em;
            font-weight: 900;
            line-height: 1.05;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            text-transform: uppercase;
        }
        .map-tracker-tab:hover,
        .map-tracker-tab.active {
            color: #2a180d;
            background: linear-gradient(180deg, #f1cc70, #d4af37);
            border-color: rgba(48,27,11,0.62);
            box-shadow: inset 0 1px rgba(255,255,255,0.3), 0 2px 0 #7d551d;
        }
        .map-tracker-tab-log {
            margin-top: auto;
        }
        .map-tracker-panes {
            height: 100%;
            pointer-events: auto;
        }
        .map-tracker-pane {
            display: none;
        }
        .map-tracker-pane.active {
            display: block;
        }
        .map-tracker-pane[data-tracker-pane="heroes"],
        .map-tracker-pane[data-tracker-pane="threats"],
        .map-tracker-pane[data-tracker-pane="generals"],
        .map-tracker-pane[data-tracker-pane="war-status"],
        .map-tracker-pane[data-tracker-pane="card-decks"] {
            width: max-content;
            max-width: 304px;
        }
        .map-tracker-pane[data-tracker-pane="heroes"].active {
            margin-top: 10px;
        }
        .map-tracker-pane[data-tracker-pane="threats"].active {
            margin-top: 254px;
        }
        .map-tracker-pane[data-tracker-pane="generals"].active {
            margin-top: 132px;
        }
        .map-tracker-pane[data-tracker-pane="war-status"].active {
            margin-top: 376px;
        }
        .map-tracker-pane[data-tracker-pane="card-decks"].active {
            margin-top: 498px;
            max-height: calc(100% - 508px);
            overflow-y: auto;
        }
        .map-tracker-pane[data-tracker-pane="game-log"].active {
            position: fixed;
            top: 68px;
            right: 12px;
            bottom: 62px;
            height: auto;
            z-index: 30;
        }
        .map-tracker-panes,
        .map-tracker-pane,
        .overlay-bar,
        .map-log-pane {
            overscroll-behavior: contain;
        }
        .overlay-bar {
            background: rgba(8, 8, 16, 0.88);
            border-right: 1px solid rgba(0,0,0,0.5);
            border-bottom: 1px solid rgba(0,0,0,0.5);
            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;
        }
        .map-tracker-pane .overlay-bar {
            border-radius: 0 0 6px 0;
        }
        .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: 5px; }
        .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-tracker-row {
            display: grid;
            grid-template-columns: 38px minmax(0, 1fr) auto;
            align-items: center;
            gap: 7px;
            min-width: 232px;
            min-height: 38px;
            padding: 0 7px 0 0;
            border: 1px solid rgba(0,0,0,0.4);
            background: linear-gradient(180deg, rgba(101,64,40,0.95), rgba(39,24,16,0.92));
            box-shadow: inset 0 1px rgba(255,255,255,0.09), 0 2px 5px rgba(0,0,0,0.28);
        }
        .hero-tracker-row.active {
            border-color: rgba(216,107,42,0.85);
            background: linear-gradient(180deg, #c05b12, #8d2c11);
        }
        .hero-tracker-avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 100%;
            align-self: stretch;
            border-radius: 0;
            border: 0;
            color: #fff;
            background: none !important;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 1.18rem;
            font-weight: 900;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        }
        .hero-tracker-main {
            display: flex;
            flex-direction: column;
            min-width: 0;
            line-height: 1.05;
        }
        .hero-tracker-name-row {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            white-space: nowrap;
        }
        .hero-tracker-name {
            flex: 0 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #fff4cf;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.9em;
            font-weight: 900;
        }
        .hero-tracker-owner {
            margin-top: 1px;
            overflow: hidden;
            text-overflow: ellipsis;
            color: rgba(244,228,193,0.72);
            font-size: 0.78em;
            font-weight: 800;
        }
        .hero-tracker-effects {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex: 0 0 auto;
            line-height: 1;
        }
        .hero-tracker-effects:empty {
            display: none;
        }
        .hero-tracker-stats {
            display: flex;
            gap: 4px;
            align-items: center;
        }
        .hero-tracker-count {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 56px;
            min-height: 28px;
            justify-content: center;
            padding: 0 9px 0 0;
            border-radius: 999px;
            background: rgba(16,9,5,0.55);
            border: 1px solid rgba(0,0,0,0.42);
            color: #f8e6b0;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.9em;
            font-weight: 900;
            line-height: 1;
            overflow: hidden;
        }
        .hero-tracker-icon {
            display: inline-block;
            width: 28px;
            height: 28px;
            background: transparent center / contain no-repeat;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
        }
        .hero-tracker-count.life .hero-tracker-icon {
            background-image: url('../images/game_tokens/Health.png');
        }
        .hero-tracker-count.actions .hero-tracker-icon {
            background-image: url('../images/game_tokens/Actions.png');
        }

        /* Hero Overlay */
        .hero-bar { display: none; }
        .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; align-items: center; gap: 3px; 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; }

        .t-faction-pill .modal-token--fill {
            margin-left: 0;
        }

        .t-faction-pill > span:last-child {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 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: 3px; flex-wrap: wrap; margin-top: 5px; justify-content: flex-end; }
        /* Spacer extends the right border line to bottom of map pane */
        .overlay-spacer { display: none; }
        .map-log-bar {
            width: 282px;
            height: calc(100% - 14px);
            margin: 7px 0;
            max-height: none;
            min-height: 0;
            overflow: hidden;
        }
        .map-log-pane {
            display: grid;
            gap: 6px;
            max-height: calc(100% - 20px);
            overflow-y: auto;
            padding-right: 3px;
            scrollbar-width: thin;
            scrollbar-color: rgba(212,175,55,0.72) rgba(61,43,31,0.34);
            pointer-events: auto;
            touch-action: pan-y;
        }
        .map-log-pane::-webkit-scrollbar { width: 7px; }
        .map-log-pane::-webkit-scrollbar-track {
            background: rgba(61,43,31,0.25);
            border-radius: 999px;
        }
        .map-log-pane::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(212,175,55,0.74), rgba(116,74,34,0.92));
            border-radius: 999px;
        }
        .map-log-entry {
            display: grid;
            gap: 2px;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(0,0,0,0.38);
            color: #f4e4c1;
            font-size: 0.68em;
            line-height: 1.25;
        }
        .map-log-entry strong {
            color: #d4af37;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.9em;
        }
        .map-log-entry span {
            font-size: 0.72em;
            line-height: 1.22;
        }
        .map-log-empty {
            color: rgba(244,228,193,0.62);
            font-size: 0.68em;
            line-height: 1.3;
        }
        .map-war-bar,
        .map-decks-bar {
            cursor: pointer;
            width: 264px;
        }
        .map-war-progress {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 4px;
            margin-top: 5px;
        }
        .map-war-step {
            min-height: 28px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(139,115,85,0.7);
            border-radius: 4px;
            background: rgba(139,115,85,0.18);
            color: rgba(244,228,193,0.82);
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.58em;
            font-weight: 900;
            text-transform: uppercase;
            line-height: 1;
        }
        .map-war-step.active {
            color: #241407;
            background: linear-gradient(180deg, #f1cc70, #d4af37);
            border-color: rgba(48,27,11,0.62);
            box-shadow: 0 0 8px rgba(212,175,55,0.38);
        }
        .map-war-summary,
        .map-decks-summary {
            margin-top: 6px;
            color: rgba(244,228,193,0.74);
            font-family: 'Comic Sans MS', cursive;
            font-size: 0.66em;
            line-height: 1.25;
        }
        .map-deck-mini-list {
            display: grid;
            gap: 4px;
            margin-top: 6px;
        }
        .map-deck-mini {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            align-items: center;
            min-height: 38px;
            padding: 0 8px 0 0;
            border: 1px solid rgba(139,115,85,0.42);
            border-radius: 4px;
            background: rgba(92,61,46,0.22);
            color: rgba(244,228,193,0.86);
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.72em;
            font-weight: 900;
            overflow: hidden;
        }
        .map-deck-mini > span:first-child {
            min-width: 0;
            overflow: hidden;
        }
        .map-deck-mini .deck-token-label {
            gap: 7px;
            min-height: 38px;
        }
        .map-deck-mini-counts {
            color: #f3d06f;
            white-space: nowrap;
            min-height: 38px;
            min-width: 62px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 6px;
            border: 1px solid rgba(212,175,55,0.36);
            border-radius: 4px;
            background: rgba(212,175,55,0.12);
        }
        .map-war-placard-modal,
        .map-decks-placard-modal {
            width: min(760px, calc(100vw - 28px));
            max-height: calc(100dvh - 44px);
        }
        .map-war-placard-modal .war-status-modal-body,
        .map-decks-placard-modal .deck-placards-modal-body {
            display: grid;
            gap: 10px;
        }
        .map-war-placard-content {
            display: flex;
            gap: 12px;
        }
        .map-war-descriptions {
            flex: 1;
            min-width: 0;
        }
        .g-lt-box {
            display: inline-flex; align-items: center; justify-content: center;
            width: 22px; height: 22px; border-radius: 3px;
            background: rgba(212,175,55,0.15); border: 1px solid rgba(0,0,0,0.42);
            font-size: 0.68em; 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: rgba(216,107,42,0.85); 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: 0 !important;
            }
            #map-modal > .map-modal-content,
            #map-modal .map-modal-content {
                max-width: 100% !important; width: 100% !important;
                max-height: none; height: var(--map-board-vh, 100dvh);
                border-radius: 0 !important;
                border: 0 !important;
                padding: 0 !important; padding-top: 0 !important;
                box-shadow: none !important;
                overflow: hidden !important;
            }
            .map-top-bar { padding: 4px 8px; }
            .action-tray { padding: 5px 6px; gap: 3px; }
            .action-tray-title { font-size: 0.7em; }

            .action-btn-icon { display: none; }
            .action-btns { grid-template-columns: 1fr; gap: 3px; }
            .action-category-dock { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
            .action-category-dock::before { display: none; }
            .action-row {
                bottom: 0;
                grid-template-columns: repeat(6, minmax(0, 1fr));
                gap: 3px;
                padding: 4px;
            }
            .action-row > .phase-btn {
                min-height: 34px;
                padding: 2px 3px;
            }
            .action-btns .phase-btn {
                min-height: 30px;
                font-size: 0.5em; padding: 2px 3px;
            }

            /* Board fills remaining space */
            #map-modal .board-container {
                flex: 1; height: 100% !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(0,0,0,0.5);
                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(0,0,0,0.5) !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: none; 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-flex; }
            .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: column;
                justify-content: flex-start;
                gap: 3px;
            }
            .t-row {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 5px;
                padding: 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; }

            .t-faction-pill { min-width: 96px !important; padding: 1px 6px !important; font-size: 0.62em !important; }
            .t-count-pill { width: 42px !important; padding: 1px 0 !important; font-size: 0.62em !important; }

            /* 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-flex; font-size: 0.62em; }

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

        @media (orientation: portrait) and (max-width: 900px) {
            #map-modal.active {
                --map-mobile-top-rail-h: clamp(34px, 8.5dvh, 44px);
                --map-mobile-left-rail-w: 46px;
                --map-mobile-right-rail-w: clamp(58px, 13dvh, 72px);
                --map-mobile-pane-gutter: 8px;
                --map-mobile-pane-max: min(360px, calc(100vw - var(--map-mobile-left-rail-w) - var(--map-mobile-right-rail-w) - 18px));
                --map-rail-token-size: clamp(22px, 5.2dvh, 26px);
                --map-hero-token-size: clamp(24px, 5.8dvh, 28px);
                --map-notification-pill-h: clamp(28px, 6.8dvh, 34px);
                --map-top-icon-size: var(--map-rail-token-size);
                --map-top-icon-image-size: var(--map-rail-token-size);
                --map-player-plaque-h: var(--map-hero-token-size);
            }

            #map-modal.active {
                overflow: hidden;
            }

            #map-modal.active .map-modal-content {
                position: fixed;
                top: 50%;
                left: 50%;
                width: var(--map-board-vh, 100dvh) !important;
                height: 100vw !important;
                max-width: none !important;
                max-height: none !important;
                transform: translate(-50%, -50%) rotate(90deg);
                transform-origin: center center;
            }

            #map-modal.active .map-top-bar {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                z-index: 26;
                min-height: 0;
                height: var(--map-mobile-top-rail-h);
                padding: 6px 10px;
                border-bottom: 1px solid rgba(241, 204, 112, 0.32);
                background:
                    linear-gradient(180deg, rgba(255,255,255,0.07), transparent),
                    linear-gradient(180deg, #6b4327, #2b1a10);
                pointer-events: none;
            }

            #map-modal.active .map-menu-btn {
                display: none;
            }

            #map-modal.active .map-board-notifications {
                position: absolute;
                top: calc(((var(--map-mobile-top-rail-h) - var(--map-notification-pill-h)) / 2) - 6px);
                left: calc(var(--map-mobile-left-rail-w) - 10px);
                z-index: 33;
                pointer-events: auto;
            }

            #map-modal.active .map-top-actions {
                position: absolute;
                top: calc((var(--map-mobile-top-rail-h) - var(--map-top-icon-size)) / 2);
                right: calc(var(--map-mobile-right-rail-w) + 8px);
                left: auto;
                z-index: 33;
                pointer-events: auto;
            }

            #map-modal.active .map-top-player {
                position: absolute;
                top: calc((var(--map-mobile-top-rail-h) - var(--map-player-plaque-h)) / 2);
                left: 50%;
                transform: translateX(-50%);
                pointer-events: auto;
            }

            #map-modal.active .map-player-plaque {
                grid-template-columns: var(--map-player-plaque-h) auto auto auto;
                gap: 5px;
                min-height: var(--map-player-plaque-h);
                transform: none;
                transform-origin: top center;
            }

            #map-modal.active .map-player-avatar {
                width: var(--map-player-plaque-h);
                height: var(--map-player-plaque-h);
            }

            #map-modal.active .map-player-avatar .hero-icon-img,
            #map-modal.active .map-player-avatar .hero-icon-fallback {
                height: var(--map-player-plaque-h) !important;
                max-height: var(--map-player-plaque-h);
                width: auto !important;
            }

            #map-modal.active .map-plaque-icon {
                width: var(--map-rail-token-size);
                height: var(--map-rail-token-size);
                margin-left: -1px;
            }

            #map-modal.active .map-player-name {
                min-width: 58px;
                font-size: 0.62rem;
            }

            #map-modal.active .map-player-counter {
                grid-template-columns: var(--map-rail-token-size) auto;
                min-width: 50px;
                min-height: var(--map-rail-token-size);
                padding-right: 8px;
                font-size: 0.62rem;
                overflow: visible;
            }

            #map-modal.active .board-container {
                flex: 1 1 auto;
                min-height: 0;
                height: calc(100% - var(--map-mobile-top-rail-h)) !important;
                max-height: none;
                margin-top: var(--map-mobile-top-rail-h) !important;
                aspect-ratio: auto;
                border-radius: 0;
                border-left: 0;
                border-right: 0;
            }

            #map-modal.active .overlay-stack {
                top: 0;
                left: 0;
                right: auto;
                bottom: 0;
                height: auto;
            }

            #map-modal.active .map-tracker-tabs {
                width: var(--map-mobile-left-rail-w);
                padding: 6px 0 6px 5px;
                gap: 4px;
                overflow: hidden;
            }

            #map-modal.active .map-tracker-tab {
                width: 40px;
                min-height: clamp(50px, 14.6dvh, 62px);
                font-size: 0.52em;
                padding: 0;
                border-right: 0;
                border-radius: 8px 0 0 8px;
            }

            #map-modal.active .map-tracker-tab-log {
                min-height: clamp(50px, 14.6dvh, 62px);
                margin-top: auto;
            }

            #map-modal.active .map-tracker-panes {
                position: relative;
                height: 100%;
            }

            #map-modal.active .map-tracker-pane.active {
                height: auto !important;
            }

            #map-modal.active .map-tracker-pane[data-tracker-pane="heroes"],
            #map-modal.active .map-tracker-pane[data-tracker-pane="threats"],
            #map-modal.active .map-tracker-pane[data-tracker-pane="generals"],
            #map-modal.active .map-tracker-pane[data-tracker-pane="war-status"],
            #map-modal.active .map-tracker-pane[data-tracker-pane="card-decks"] {
                position: absolute !important;
                left: 0 !important;
                width: max-content;
                max-width: var(--map-mobile-pane-max);
                margin-top: 0 !important;
                overflow: visible;
            }

            #map-modal.active .map-tracker-pane[data-tracker-pane="heroes"].active {
                top: var(--map-mobile-pane-gutter) !important;
                max-height: calc(100% - var(--map-mobile-pane-gutter) - 6px);
            }

            #map-modal.active .map-tracker-pane[data-tracker-pane="generals"].active {
                top: var(--map-mobile-pane-gutter) !important;
                max-height: none;
            }

            #map-modal.active .map-tracker-pane[data-tracker-pane="threats"].active {
                top: auto !important;
                bottom: var(--map-mobile-pane-gutter) !important;
                max-height: none;
            }

            #map-modal.active .map-tracker-pane[data-tracker-pane="war-status"].active {
                top: calc(6px + (clamp(50px, 14.6dvh, 62px) + 4px) * 3) !important;
                max-height: none;
            }

            #map-modal.active .map-tracker-pane[data-tracker-pane="card-decks"].active {
                top: auto !important;
                bottom: var(--map-mobile-pane-gutter) !important;
                max-height: none;
            }

            #map-modal.active .map-decks-bar {
                max-height: 100%;
            }

            #map-modal.active .map-war-summary,
            #map-modal.active .map-decks-summary {
                font-family: Georgia, 'Times New Roman', serif !important;
                font-size: 0.68em !important;
                line-height: 1.32 !important;
                font-style: normal !important;
                letter-spacing: 0 !important;
            }

            #map-modal.active .map-board-notifications {
                height: var(--map-top-icon-size);
                min-height: 0;
                min-width: clamp(70px, 14vw, 92px);
                padding: 0 calc(var(--map-rail-token-size) + 4px) 0 2px;
                grid-template-columns: var(--map-top-icon-image-size) auto;
                transform: none;
                overflow: hidden;
            }

            #map-modal.active .map-board-notifications .main-pill-token,
            #map-modal.active .map-board-notifications .main-pill-badge {
                width: var(--map-top-icon-image-size);
                height: var(--map-top-icon-image-size);
                min-width: var(--map-top-icon-image-size);
                box-sizing: border-box;
            }

            #map-modal.active .map-context-card {
                right: calc(var(--map-mobile-right-rail-w) + 10px);
                bottom: 8px;
                min-width: 170px;
                max-width: 220px;
                padding: 6px 8px;
            }

            #map-modal.active .action-tray {
                position: absolute;
                top: var(--map-mobile-top-rail-h);
                right: 0;
                bottom: 0;
                z-index: 24;
                width: var(--map-mobile-right-rail-w);
                padding: 4px;
                border-top: 0;
                border-left: 1px solid rgba(0,0,0,0.55);
                box-shadow: -5px 0 16px rgba(0,0,0,0.42);
            }

            #map-modal.active .action-btns {
                display: flex;
                flex-direction: column;
                height: 100%;
                gap: 0;
            }

            #map-modal.active .mobile-action-menu {
                display: block;
            }

            #map-modal.active .action-category-dock {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: repeat(6, minmax(0, 1fr));
                gap: 4px;
                height: 100%;
            }
            #map-modal.active .action-category-dock::before {
                display: none;
            }

            #map-modal.active .action-category-dock .phase-btn,
            #map-modal.active .action-btns .phase-btn {
                width: 100% !important;
                height: 100% !important;
                min-height: 0 !important;
                margin: 0 !important;
                font-size: clamp(8px, 1.75dvh, 10px) !important;
                padding: 2px !important;
                white-space: normal;
                line-height: 1.05 !important;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
            }

            #map-modal.active .action-category-dock .action-category-btn[data-action-category="movement"] {
                font-size: 0 !important;
            }

            #map-modal.active .action-category-dock .action-category-btn[data-action-category="movement"]::after {
                content: "Move";
                font-size: clamp(8px, 1.75dvh, 10px) !important;
                line-height: 1.05 !important;
            }

            #map-modal.active .action-row {
                position: absolute;
                left: 54px;
                right: calc(var(--map-mobile-right-rail-w) + 8px);
                bottom: 0;
                width: auto;
                display: grid;
                grid-template-columns: repeat(6, minmax(0, 1fr));
                gap: 4px;
                padding: 0;
                pointer-events: none;
                z-index: 23;
            }

            #map-modal.active .action-row > .phase-btn {
                pointer-events: auto;
                min-height: 34px;
                padding: 3px 5px;
            }

            #map-modal.active .action-row:has(> .phase-btn:not(.action-group-hidden):not([style*="display: none"])) {
                padding: 6px;
                border: 1px solid rgba(0,0,0,0.55);
                border-radius: 8px 8px 0 0;
                background: rgba(39, 23, 13, 0.94);
                box-shadow: 0 -4px 14px rgba(0,0,0,0.4);
            }

            #map-modal.active .board-container:has(> .action-row > .phase-btn:not(.action-group-hidden):not([style*="display: none"])) .map-context-card {
                bottom: 56px;
            }

            body.map-board-open .modal.active:not(#map-modal) {
                top: 50%;
                left: 50%;
                width: var(--map-board-vh, 100dvh);
                height: 100vw;
                padding: 6px 98px 18px 54px;
                overflow: hidden;
                transform: translate(-50%, -50%) rotate(90deg);
                transform-origin: center center;
            }

            body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment {
                width: min(74%, 720px) !important;
                max-width: calc(var(--map-board-vh, 100dvh) - 180px) !important;
                height: calc((100vw - 24px) * 1.25) !important;
                max-height: calc((100vw - 24px) * 1.25) !important;
                min-height: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;
                box-sizing: border-box;
            }

            body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment > .parchment-box {
                display: flex;
                flex-direction: column;
                height: 100% !important;
                max-height: 100% !important;
                min-height: 0;
                margin-top: 0;
                overflow: hidden;
                font-size: 0.82em;
            }

            body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment > .parchment-box > .parchment-banner {
                flex-shrink: 0;
                margin: -10px -10px 0;
                padding: 6px 10px;
                min-height: 28px;
                font-size: 0.82em;
                line-height: 1.2;
                overflow: visible;
                border-bottom: 2px solid #8b7355;
            }

            body.map-board-open .modal.active:not(#map-modal) #combat-content,
            body.map-board-open .modal.active:not(#map-modal) #location-actions-content,
            body.map-board-open .modal.active:not(#map-modal) #hero-death-content,
            body.map-board-open .modal.active:not(#map-modal) #retreat-content,
            body.map-board-open .modal.active:not(#map-modal) #card-display,
            body.map-board-open .modal.active:not(#map-modal) #group-penalty-content,
            body.map-board-open .modal.active:not(#map-modal) #darkness-content,
            body.map-board-open .modal.active:not(#map-modal) #card-discard-content,
            body.map-board-open .modal.active:not(#map-modal) #rumors-content,
            body.map-board-open .modal.active:not(#map-modal) #hand-limit-content,
            body.map-board-open .modal.active:not(#map-modal) #card-detail-content,
            body.map-board-open .modal.active:not(#map-modal) #info-modal-content,
            body.map-board-open .modal.active:not(#map-modal) #end-of-turn-content,
            body.map-board-open .modal.active:not(#map-modal) #general-card-selection-content,
            body.map-board-open .modal.active:not(#map-modal) #general-card-selection-buttons {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                padding: 8px 12px;
            }

            body.map-board-open .modal.active:not(#map-modal) #info-modal-content:has(> [class~="parchment-zoned"]) {
                display: flex;
                flex-direction: column;
                overflow: hidden;
                padding: 0;
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] {
                display: flex;
                flex-direction: column;
                height: 100% !important;
                max-height: 100% !important;
                min-height: 0;
                overflow: hidden;
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-body {
                flex: 1 1 auto;
                min-height: 0;
                max-height: none !important;
                overflow-y: auto;
                padding: 8px 12px;
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-banner {
                margin: 0;
                padding: 6px 10px;
                min-height: 28px;
                font-size: 0.82em;
                line-height: 1.2;
                overflow: visible;
                border-bottom: 2px solid #8b7355;
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-footer {
                flex-shrink: 0;
                display: flex;
                align-items: stretch;
                gap: 6px;
                padding: 7px 10px 9px;
                border-top: 1px solid rgba(139,115,85,0.45);
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-footer > [class~="modal-parchment-button"],
            body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-footer > button {
                flex: 1 1 0;
                min-width: 0;
                margin-top: 0 !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .hero-ability-text,
            body.map-board-open .modal.active:not(#map-modal) .modal-desc-text,
            body.map-board-open .modal.active:not(#map-modal) .mobile-modal-description,
            body.map-board-open .modal.active:not(#map-modal) .parchment-body [style*="Comic Sans"],
            body.map-board-open .modal.active:not(#map-modal) .modal-content-parchment [style*="Comic Sans"] {
                font-size: 0.66em !important;
                line-height: 1.35 !important;
            }

            body.map-board-open #map-war-status-modal > .map-war-placard-modal {
                width: min(74vw, 720px) !important;
                max-width: calc(100vw - 180px) !important;
                max-height: calc(100dvh - 18px) !important;
            }

            body.map-board-open #map-war-status-modal .war-status-modal-body {
                padding: 7px 10px !important;
            }

            body.map-board-open #map-war-status-modal .map-war-placard {
                max-height: none;
                overflow: hidden;
                border-radius: 8px;
            }

            body.map-board-open #map-war-status-modal .map-war-placard .general-banner {
                min-height: 40px;
                padding: 8px 12px;
            }

            body.map-board-open #map-war-status-modal .map-war-placard .general-body {
                padding: 8px 10px;
            }

            body.map-board-open #map-war-status-modal .map-war-placard-content {
                gap: 10px;
                align-items: flex-start;
            }

            body.map-board-open #map-war-status-modal .war-tracker-col {
                width: 22%;
                max-width: 126px;
                gap: 3px;
            }

            body.map-board-open #map-war-status-modal .war-box {
                min-height: 32px;
                padding: 4px 6px;
                border-width: 2px;
            }

            body.map-board-open #map-war-status-modal .war-arrow {
                font-size: 0.7em;
                line-height: 1;
            }

            body.map-board-open #map-war-status-modal .war-advance-text,
            body.map-board-open #map-war-status-modal .g-section-text {
                font-family: Georgia, 'Times New Roman', serif !important;
                letter-spacing: 0 !important;
                font-style: normal !important;
                font-weight: 400 !important;
            }

            body.map-board-open #map-war-status-modal .war-advance-text {
                margin-bottom: 6px;
                font-size: 0.72em !important;
                line-height: 1.2 !important;
            }

            body.map-board-open #map-war-status-modal .g-section-label {
                margin-bottom: 1px;
                font-size: 0.68em !important;
            }

            body.map-board-open #map-war-status-modal .g-section-text {
                font-size: 0.62em !important;
                line-height: 1.28 !important;
            }

            body.map-board-open #map-war-status-modal .map-war-descriptions {
                display: grid;
                gap: 5px;
            }

            body.map-board-open .modal.active:not(#map-modal) .card-wrap {
                border-width: 2px !important;
                border-radius: 8px !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .card-body,
            body.map-board-open .modal.active:not(#map-modal) [id^="quest-card-option-"] > div:last-child {
                padding: 8px 10px !important;
            }

            body.map-board-open .modal.active:not(#map-modal) [id^="quest-card-option-"] {
                border-width: 2px !important;
                border-radius: 8px !important;
            }

            body.map-board-open .modal.active:not(#map-modal) #general-card-selection-buttons {
                flex: 0 0 auto;
                gap: 6px !important;
                margin-top: 0 !important;
            }

            body.map-board-open .modal.active:not(#map-modal) #general-reward-content {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                min-height: 0;
                overflow: hidden;
            }

            body.map-board-open .modal.active:not(#map-modal) .board-modal-scroll {
                padding: 8px 12px;
            }

            body.map-board-open .modal.active:not(#map-modal) .board-modal-footer {
                display: flex;
                align-items: stretch;
                gap: 6px;
                padding: 8px 10px 10px;
                border-top: 1px solid rgba(139,115,85,0.45);
            }

            body.map-board-open .modal.active:not(#map-modal) .board-modal-footer > [class~="modal-parchment-button"],
            body.map-board-open .modal.active:not(#map-modal) .board-modal-footer > button {
                flex: 1 1 0;
                min-width: 0;
                margin-top: 0 !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .general-reward-intro {
                margin: 3px 0 7px !important;
                font-size: 0.72em !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .general-reward-cards {
                gap: 5px !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .general-reward-cards > div {
                flex: 0 1 74px !important;
                min-width: 58px !important;
                max-width: 86px !important;
                padding: 5px 4px !important;
                border-width: 2px !important;
                border-radius: 6px !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .general-reward-total {
                margin-top: 5px !important;
            }

            body.map-board-open .modal.active:not(#map-modal) #combat-results-content {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                min-height: 0;
                overflow: hidden;
            }

            body.map-board-open .modal.active:not(#map-modal) .combat-results-scroll {
                padding: 8px 12px;
            }

            body.map-board-open .modal.active:not(#map-modal) .combat-results-footer {
                flex-shrink: 0;
                display: flex;
                align-items: stretch;
                gap: 6px;
                padding: 8px 10px 10px;
                border-top: 1px solid rgba(139,115,85,0.45);
            }

            body.map-board-open .modal.active:not(#map-modal) .combat-results-footer > [class~="modal-parchment-button"],
            body.map-board-open .modal.active:not(#map-modal) .combat-results-footer > button {
                flex: 1 1 0;
                min-width: 0;
                margin-top: 0 !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .dice-roll {
                flex-shrink: 0;
                gap: 7px;
                margin: 8px 0;
                max-height: 96px;
                overflow-y: auto;
            }

            body.map-board-open .modal.active:not(#map-modal) .die {
                width: 38px;
                height: 38px;
                font-size: 1.05em;
                border-radius: 7px;
            }

            body.map-board-open .modal.active:not(#map-modal) button,
            body.map-board-open .modal.active:not(#map-modal) [class~="modal-parchment-button"] {
                flex-shrink: 0;
                min-height: 34px !important;
                padding: 6px 9px !important;
                font-size: 0.76em !important;
                line-height: 1.05 !important;
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="modal-parchment-button-stack"] {
                flex-direction: row;
                gap: 6px;
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="modal-parchment-button-stack"] > [class~="modal-parchment-button"],
            body.map-board-open .modal.active:not(#map-modal) [class~="modal-parchment-button-row"] > [class~="modal-parchment-button"] {
                flex: 1 1 0;
                min-width: 0;
                margin-top: 0 !important;
            }

            body.map-board-open #shapeshift-modal.active {
                inset: 0 !important;
                top: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                width: 100dvw !important;
                height: 100vh !important;
                height: 100dvh !important;
                padding: 12px !important;
                transform: none !important;
                align-items: center !important;
                justify-content: center !important;
                overflow: hidden !important;
            }

            body.map-board-open #shapeshift-modal.active > .modal-content-parchment {
                width: min(312px, calc(100dvw - 24px)) !important;
                max-width: calc(100dvw - 24px) !important;
                height: calc((100dvh - 24px) * 1.25) !important;
                max-height: calc((100dvh - 24px) * 1.25) !important;
            }

            body.map-board-open #shapeshift-modal.active [class~="parchment-zoned"] {
                height: 100% !important;
                max-height: 100% !important;
            }

            body.map-board-open #shapeshift-modal.active .shapeshift-option-row {
                width: min(100%, calc(var(--shapeshift-pill-w) + 28px));
            }

            body.map-board-open #shapeshift-modal.active #ss-confirm-btn {
                flex: 0 1 168px !important;
                min-width: 118px !important;
            }
        }

        @media (max-height: 520px) and (orientation: landscape) {
            #map-modal {
                --map-mobile-top-rail-h: clamp(34px, 8.5dvh, 44px);
                --map-mobile-left-rail-w: 46px;
                --map-mobile-right-rail-w: clamp(58px, 13dvh, 72px);
                --map-mobile-pane-gutter: 8px;
                --map-mobile-pane-max: min(360px, calc(100vw - var(--map-mobile-left-rail-w) - var(--map-mobile-right-rail-w) - 18px));
                --map-rail-token-size: clamp(22px, 5.2dvh, 26px);
                --map-hero-token-size: clamp(24px, 5.8dvh, 28px);
                --map-notification-pill-h: clamp(28px, 6.8dvh, 34px);
                --map-top-icon-size: var(--map-rail-token-size);
                --map-top-icon-image-size: var(--map-rail-token-size);
                --map-player-plaque-h: var(--map-hero-token-size);
            }

            #map-modal {
                padding: 0 !important;
            }

            #map-modal > .map-modal-content,
            #map-modal .map-modal-content {
                width: 100% !important;
                max-width: 100% !important;
                height: var(--map-board-vh, 100dvh);
                max-height: none;
                padding: 0 !important;
                overflow: hidden !important;
                position: relative;
            }

            .map-top-bar {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                z-index: 26;
                min-height: 0;
                height: var(--map-mobile-top-rail-h);
                padding: 6px 10px;
                border-bottom: 1px solid rgba(241, 204, 112, 0.32);
                background:
                    linear-gradient(180deg, rgba(255,255,255,0.07), transparent),
                    linear-gradient(180deg, #6b4327, #2b1a10);
                pointer-events: none;
            }

            .map-menu-btn {
                display: none;
            }

            .map-board-notifications {
                position: absolute;
                top: calc(((var(--map-mobile-top-rail-h) - var(--map-notification-pill-h)) / 2) - 6px);
                left: calc(var(--map-mobile-left-rail-w) - 10px);
                z-index: 33;
                pointer-events: auto;
            }

            .map-top-actions {
                position: absolute;
                top: calc((var(--map-mobile-top-rail-h) - var(--map-top-icon-size)) / 2);
                left: auto;
                right: calc(var(--map-mobile-right-rail-w) + 8px);
                z-index: 33;
                pointer-events: auto;
            }

            .map-top-player {
                position: absolute;
                top: calc((var(--map-mobile-top-rail-h) - var(--map-player-plaque-h)) / 2);
                left: 50%;
                transform: translateX(-50%);
                pointer-events: auto;
            }

            .map-player-plaque {
                grid-template-columns: var(--map-player-plaque-h) auto auto auto;
                gap: 5px;
                min-height: var(--map-player-plaque-h);
                transform: none;
                transform-origin: top center;
            }

            .map-player-avatar {
                width: var(--map-player-plaque-h);
                height: var(--map-player-plaque-h);
            }

            .map-player-avatar .hero-icon-img,
            .map-player-avatar .hero-icon-fallback {
                height: var(--map-player-plaque-h) !important;
                max-height: var(--map-player-plaque-h);
                width: auto !important;
            }

            .map-plaque-icon {
                width: var(--map-rail-token-size);
                height: var(--map-rail-token-size);
                margin-left: -1px;
            }

            .map-player-name {
                min-width: 58px;
                font-size: 0.62rem;
            }

            .map-player-counter {
                grid-template-columns: var(--map-rail-token-size) auto;
                min-width: 50px;
                min-height: var(--map-rail-token-size);
                padding-right: 8px;
                font-size: 0.62rem;
                overflow: visible;
            }

            #map-modal.active .board-container,
            #map-modal .board-container {
                flex: 1 1 auto;
                min-height: 0;
                height: calc(100% - var(--map-mobile-top-rail-h)) !important;
                max-height: none;
                margin-top: var(--map-mobile-top-rail-h) !important;
                aspect-ratio: auto;
                border-radius: 0;
                border-left: 0;
                border-right: 0;
            }

            .overlay-stack {
                top: 0;
                left: 0;
                right: auto;
                bottom: 0;
                height: auto;
                display: flex;
                flex-direction: row;
            }

            .map-tracker-tabs {
                width: var(--map-mobile-left-rail-w);
                padding: 6px 0 6px 5px;
                gap: 4px;
                overflow: hidden;
            }

            .map-tracker-tab {
                width: 40px;
                min-height: clamp(50px, 14.6dvh, 62px);
                font-size: 0.52em;
                padding: 0;
                border-right: 0;
                border-radius: 8px 0 0 8px;
            }

            .map-tracker-tab-log {
                min-height: clamp(50px, 14.6dvh, 62px);
                margin-top: auto;
            }

            .map-tracker-panes,
            .map-tracker-pane.active {
                height: 100%;
            }

            .map-tracker-panes {
                position: relative;
            }

            .map-tracker-pane.active {
                height: auto !important;
            }

            .map-tracker-pane[data-tracker-pane="heroes"],
            .map-tracker-pane[data-tracker-pane="threats"],
            .map-tracker-pane[data-tracker-pane="generals"],
            .map-tracker-pane[data-tracker-pane="war-status"],
            .map-tracker-pane[data-tracker-pane="card-decks"] {
                position: absolute !important;
                left: 0 !important;
                width: max-content;
                max-width: var(--map-mobile-pane-max);
                margin-top: 0 !important;
                overflow: visible;
            }
            .map-tracker-pane[data-tracker-pane="heroes"].active {
                top: var(--map-mobile-pane-gutter) !important;
                max-height: calc(100% - var(--map-mobile-pane-gutter) - 6px);
            }
            .map-tracker-pane[data-tracker-pane="threats"].active {
                top: auto !important;
                bottom: var(--map-mobile-pane-gutter) !important;
                max-height: none;
            }
            .map-tracker-pane[data-tracker-pane="generals"].active {
                top: var(--map-mobile-pane-gutter) !important;
                max-height: none;
            }
            .map-tracker-pane[data-tracker-pane="war-status"].active {
                top: calc(6px + (clamp(50px, 14.6dvh, 62px) + 4px) * 3) !important;
                max-height: none;
            }
            .map-tracker-pane[data-tracker-pane="card-decks"].active {
                top: auto !important;
                bottom: var(--map-mobile-pane-gutter) !important;
                height: auto;
                max-height: none;
            }
            .map-tracker-pane[data-tracker-pane="game-log"].active {
                top: calc(var(--map-mobile-top-rail-h) + 6px);
                right: calc(var(--map-mobile-right-rail-w) + 8px);
                bottom: 8px;
                left: auto;
            }

            .map-tracker-pane[data-tracker-pane="threats"] {
                max-width: 230px;
            }

            .map-war-bar,
            .map-decks-bar {
                width: 224px;
            }

            .map-decks-bar {
                max-height: 100%;
            }

            .map-war-summary,
            .map-decks-summary {
                font-family: Georgia, 'Times New Roman', serif !important;
                font-size: 0.68em !important;
                line-height: 1.32 !important;
                font-style: normal !important;
                letter-spacing: 0 !important;
            }

            .map-board-notifications {
                height: var(--map-top-icon-size);
                min-height: 0;
                min-width: clamp(70px, 14vw, 92px);
                padding: 0 calc(var(--map-rail-token-size) + 4px) 0 2px;
                grid-template-columns: var(--map-top-icon-image-size) auto;
                transform: none;
                overflow: hidden;
            }

            .map-board-notifications .main-pill-token,
            .map-board-notifications .main-pill-badge {
                width: var(--map-top-icon-image-size);
                height: var(--map-top-icon-image-size);
                min-width: var(--map-top-icon-image-size);
                box-sizing: border-box;
            }

            .map-tracker-pane[data-tracker-pane="threats"] {
                max-width: 224px;
            }

            .map-tracker-pane[data-tracker-pane="card-decks"] {
                max-width: 226px;
            }

            .map-tracker-pane[data-tracker-pane="heroes"] .overlay-bar,
            .map-tracker-pane[data-tracker-pane="generals"] .overlay-bar,
            .map-tracker-pane[data-tracker-pane="threats"] .overlay-bar,
            .map-tracker-pane[data-tracker-pane="war-status"] .overlay-bar,
            .map-tracker-pane[data-tracker-pane="card-decks"] .overlay-bar {
                padding: 4px 6px;
                overflow: visible;
            }

            .map-tracker-pane[data-tracker-pane="heroes"] .overlay-title,
            .map-tracker-pane[data-tracker-pane="generals"] .overlay-title,
            .map-tracker-pane[data-tracker-pane="threats"] .overlay-title,
            .map-tracker-pane[data-tracker-pane="war-status"] .overlay-title,
            .map-tracker-pane[data-tracker-pane="card-decks"] .overlay-title {
                min-height: 25px;
                padding: 4px 7px;
                font-size: 0.62em;
                margin-bottom: 4px;
            }

            .threat-items {
                gap: 2px;
            }

            .t-row {
                margin-bottom: 2px !important;
                gap: 5px !important;
            }

            .t-faction-pill {
                min-width: 134px !important;
                min-height: 31px !important;
                padding-right: 6px !important;
                gap: 5px !important;
                font-size: 0.58em !important;
            }

            .t-count-pill {
                width: 50px !important;
                min-height: 31px !important;
                font-size: 0.62em !important;
            }

            .t-faction-pill .modal-token--fill,
            .t-faction-pill .enemy-icon-img--fill {
                height: 31px !important;
                max-height: 31px !important;
            }

            .g-row {
                margin-bottom: 3px;
            }

            .map-general-tracker-badge {
                min-height: 30px !important;
                gap: 5px !important;
                padding-right: 6px !important;
                font-size: 0.58em !important;
            }

            .map-general-tracker-badge .modal-token--fill,
            .map-general-tracker-badge .enemy-icon-img--fill {
                height: 30px !important;
                max-height: 30px !important;
            }

            .g-lt-row {
                margin-top: 2px;
                gap: 2px;
            }

            .g-lt-box {
                width: 13px;
                height: 13px;
                font-size: 0.42em;
            }

            .map-deck-mini-list {
                gap: 2px;
                margin-top: 2px;
            }

            .map-decks-summary {
                margin-top: 2px;
                font-size: 0.5em !important;
                line-height: 1.1 !important;
            }

            .map-deck-mini {
                min-height: 26px;
                gap: 4px;
                padding-right: 5px;
                font-size: 0.52em;
            }

            .map-deck-mini .deck-token-label,
            .map-deck-mini-counts {
                min-height: 26px;
            }

            .map-deck-mini .game-token-icon,
            .map-deck-mini .game-token-icon--stat {
                width: 26px;
                height: 26px;
            }

            .map-deck-mini-counts {
                min-width: 46px;
                font-size: 0.98em;
                padding: 0 3px;
            }

            .map-tracker-pane[data-tracker-pane="card-decks"] .overlay-title {
                min-height: 22px;
                padding: 3px 7px;
                margin-bottom: 3px;
            }

            .turn-hero-row {
                display: block;
                padding: 0;
                border-bottom: 0;
                background: transparent;
                backdrop-filter: none;
            }

            .turn-hero-row > .overlay-bar,
            .overlay-bar {
                min-width: 0;
                padding: 6px;
                border-right: 1px solid rgba(0,0,0,0.5);
                border-bottom: 1px solid rgba(0,0,0,0.5);
                border-radius: 0 0 6px 0 !important;
                background: rgba(8, 8, 16, 0.88);
                backdrop-filter: blur(6px);
            }

            .turn-bar,
            .hero-bar {
                display: block;
                margin-right: 0;
                padding-right: 6px !important;
                border-right: 1px solid rgba(0,0,0,0.5) !important;
            }

            .turn-inner {
                flex-direction: column;
                gap: 2px;
            }

            .turn-hero {
                font-size: 0.56em;
                min-height: 30px;
                padding: 2px 6px;
            }
            .hero-bar {
                display: none;
            }

            .turn-bar .hero-label-name {
                display: none;
            }

            .hero-inner,
            .hero-stats {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch;
                gap: 0 !important;
            }

            .hero-name {
                font-size: 0.62em;
                margin-bottom: 3px;
            }

            .stat-icons {
                display: none;
            }

            .stat-compact {
                display: inline-flex;
                font-size: 0.62em;
            }

            .threat-bar {
                display: block;
                max-width: 230px;
            }

            .threat-items {
                flex-direction: column;
                justify-content: flex-start;
                gap: 3px;
            }

            .t-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 5px;
                padding: 0;
            }
            .t-faction-pill { min-width: 106px !important; padding: 2px 6px !important; font-size: 0.66em !important; }
            .t-count-pill { width: 46px !important; font-size: 0.66em !important; }

            .generals-bar {
                display: block;
            }

            .g-row {
                margin-bottom: 4px;
            }

            .g-lt-box {
                width: 14px;
                height: 14px;
                font-size: 0.45em;
            }

            .map-log-bar {
                width: 260px;
                height: calc(100% - 12px);
                margin: 6px 0;
            }

            .map-log-entry {
                display: grid;
                gap: 2px;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
            }
            .map-log-entry strong {
                display: block;
                font-size: 0.66em;
                line-height: 1.08;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .map-log-entry span {
                display: block;
                font-size: 0.5em;
                line-height: 1.18;
                color: rgba(244,228,193,0.78);
                white-space: normal;
            }

            .map-context-card {
                right: calc(var(--map-mobile-right-rail-w) + 10px);
                bottom: 8px;
                min-width: 170px;
                max-width: 220px;
                padding: 6px 8px;
            }

            .action-tray {
                position: absolute;
                top: var(--map-mobile-top-rail-h);
                right: 0;
                bottom: 0;
                z-index: 24;
                width: var(--map-mobile-right-rail-w);
                padding: 4px;
                border-top: 0;
                border-left: 1px solid rgba(0,0,0,0.55);
                background:
                    linear-gradient(90deg, rgba(255,255,255,0.06), transparent 32%),
                    linear-gradient(180deg, #6b4327, #2b1a10);
                box-shadow: -5px 0 16px rgba(0,0,0,0.42);
            }

            .action-btns {
                position: relative;
                display: flex;
                flex-direction: column;
                height: 100%;
                gap: 0;
            }

            .mobile-action-menu {
                display: block;
            }

            .action-category-dock {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: repeat(6, minmax(0, 1fr));
                gap: 4px;
                height: 100%;
            }
            .action-category-dock::before {
                display: none;
            }

            .action-category-dock .phase-btn,
            .action-btns .phase-btn {
                width: 100% !important;
                height: 100% !important;
                min-height: 0 !important;
                margin: 0 !important;
                font-size: clamp(8px, 1.75dvh, 10px) !important;
                padding: 2px !important;
                white-space: normal;
                line-height: 1.05 !important;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
            }

            .action-category-dock .action-category-btn[data-action-category="movement"] {
                font-size: 0 !important;
            }

            .action-category-dock .action-category-btn[data-action-category="movement"]::after {
                content: "Move";
                font-size: clamp(8px, 1.75dvh, 10px) !important;
                line-height: 1.05 !important;
            }

            .action-row {
                position: absolute;
                left: 54px;
                right: calc(var(--map-mobile-right-rail-w) + 8px);
                bottom: 0;
                width: auto;
                display: grid;
                grid-template-columns: repeat(6, minmax(0, 1fr));
                gap: 4px;
                padding: 0;
                pointer-events: none;
                z-index: 23;
            }

            .action-row > .phase-btn {
                pointer-events: auto;
                min-height: 34px;
                padding: 3px 5px;
            }

            .action-row:has(> .phase-btn:not(.action-group-hidden):not([style*="display: none"])) {
                padding: 6px;
                border: 1px solid rgba(0,0,0,0.55);
                border-radius: 8px 8px 0 0;
                background: rgba(39, 23, 13, 0.94);
                box-shadow: 0 -4px 14px rgba(0,0,0,0.4);
            }

            .map-bottom-hint {
                display: none;
            }
        }

        /* 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 {
          /* v2: solid gradient (was cc opacity — semi-transparent reads as
             "no shadow / faded label" against the parchment underneath). */
          background: linear-gradient(135deg, #5c3d2e 0%, #4a2f20 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;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          min-height: 34px;
          line-height: 1.2;
          overflow: visible;
          text-align: center;
        }
        /* v2: banner-scoped text-shadow override — the global .hero-banner-name
           double-shadow (0 2px 4px / 0 0 10px) blurs into the dark banner
           gradient and reads as no shadow at all. A single clean
           "0 1px 2px rgba(0,0,0,0.5)" gives the label crisp lift, matching the
           location-popup banner and the broader parchment design standard. */
        .parchment-banner .hero-banner-name {
            display: inline-flex;
            align-items: center;
            min-height: 1.2em;
            font-size: 0.9em;
            line-height: 1.2;
            letter-spacing: 1px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        /* ── SECTION BODY LAST-CHILD ──
           In lobby/progress collapsible bodies (#lobby-settings-body, #lobby-exp-body,
           #prog-settings-body, #prog-exp-body), the last ROW_S/ROW_SUB has a
           border-bottom that stacks with the next section heading's border-top,
           producing 2 lines between sections. Suppress it so only the heading's
           border-top is visible — enforces the "1 line between sections" rule.
           !important is required because ROW_S/ROW_SUB apply border-bottom inline,
           and inline styles beat CSS rules without it. */
        [id$="-body"] > div:last-child,
        [id$="-body"] > div:last-child > div:last-child {
            border-bottom: none !important;
        }
        /* When a sub-options container is collapsed via JS (display:none) and it is
           the DOM last-child of the settings body, the rule above targets the hidden
           container (no-op) while the preceding VISIBLE row keeps its border-bottom.
           That border then stacks with the next section heading's border-top
           separated only by an 8px margin, producing a visible "double line" with a
           tiny gap. This rule picks the preceding row specifically in that state and
           suppresses its border-bottom. Intermediate rows (whose trailing -opts
           sibling is not last-child) are unaffected — they still need the separator
           because another visible section follows. */
        [id$="-body"] > div:has(+ [id][style*="display: none"]:last-child) {
            border-bottom: none !important;
        }

        /* ── ZONED PARCHMENT ──
           When _mpParchment is called with a 3rd footerHTML arg, it emits
           .parchment-zoned with three children: banner, .parchment-body, .parchment-footer.
           Banner and footer stay pinned; body scrolls so action buttons never fall off.
           Inner (nested) parchments and 2-arg callers are unaffected — they keep normal flow. */
        .parchment-zoned {
            display: flex;
            flex-direction: column;
            max-height: 90vh;
            min-height: 0;
            box-sizing: border-box;
            overflow: hidden;
            padding: 0;
        }
        .modal--reference-ui .parchment-zoned {
            max-height: calc(100vh - 12vh - 20px);
        }
        .reference-ui-section {
            color: var(--reference-section-color, #2c1810);
            font-size: 0.82em;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin: 8px 0 6px;
            border-bottom: 1px solid rgba(139,115,85,0.35);
            padding-bottom: 4px;
        }
        .modal--reference-ui .parchment-body > .reference-ui-section:first-child {
            margin-top: 0;
        }
        .mp-section-label {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            font-size: 0.7em;
            color: #8b7355;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin: 10px 0 5px;
            padding-top: 4px;
            border-top: 1px solid rgba(139,115,85,0.2);
        }
        .mp-section-label--topless {
            margin: 0 0 5px;
            padding-top: 0;
            border-top: 0;
        }
        .setup-subsection-label {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            font-size: 0.7em;
            color: #8b7355;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 6px;
        }
        .setup-subsection-label--inline {
            margin-bottom: 0;
        }
        .mp-button-divider {
            border-top: 1px solid rgba(139,115,85,0.3);
            margin: 12px 0 8px;
        }
        .mp-loading-placeholder {
            text-align: center;
            padding: 20px;
            font-family: 'Comic Sans MS', cursive;
            color: #8b7355;
        }
        .mp-confirm-message {
            padding: 12px;
            font-family: 'Comic Sans MS', 'Comic Sans', cursive;
            font-size: 0.85em;
            color: #3d2b1f;
            text-align: center;
            line-height: 1.6;
        }
        .mp-confirm-message--warning {
            padding: 4px 14px;
            font-size: 0.82em;
            color: #b91c1c;
        }
        /* Banner's default -10px negative margins (designed to bleed into the
           non-zoned parchment-box's 10px padding) would extend OUTSIDE the zoned
           parent's padding:0 and get clipped by overflow:hidden. Zero out margins
           and reduce corner radius from 8px→6px to match the inner space inside
           the parchment-box's 2px border. */
        .parchment-zoned > .parchment-banner {
            flex-shrink: 0;
            margin: 0;
            border-radius: 6px 6px 0 0;
        }
        .parchment-zoned > .parchment-body {
            flex: 1 1 auto;
            min-height: 0;
            box-sizing: border-box;
            overflow-y: auto;
            padding: 10px;
        }
        .parchment-zoned > .parchment-footer {
            flex-shrink: 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            /* Keep a clear inset around pinned footer controls so buttons do
               not read as clipped against the parchment edge. */
            padding: 10px;
            border-top: 1px solid rgba(139,115,85,0.45);
            border-radius: 0 0 6px 6px;
        }

        .parchment-zoned > .parchment-footer > :is(.modal-parchment-button, button) {
            flex: 0 1 168px;
            width: auto;
            min-width: 118px;
            max-width: 208px;
            min-height: 36px;
            margin-top: 0;
            padding: 7px 12px;
            white-space: nowrap;
        }

        .parchment-zoned > .parchment-footer > .modal-parchment-button:first-child {
            margin-top: 0;
        }

        .parchment-zoned > .parchment-footer > .modal-parchment-button:first-child,
        .parchment-zoned > .parchment-footer > button:first-child {
            margin-top: 0;
        }

        .parchment-zoned > .parchment-footer > .modal-parchment-button:first-child {
            margin-top: 0;
        }

        #card-detail-modal .parchment-footer {
            border-top: 0;
            padding-top: 0;
        }

        .combat-results-scroll {
            flex: 1 1 auto;
            min-height: 0;
            box-sizing: border-box;
            overflow-y: auto;
            padding: 10px;
        }

        .combat-results-footer {
            flex-shrink: 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            padding: 10px;
            border-top: 1px solid rgba(139,115,85,0.45);
        }

        .combat-results-footer > .modal-parchment-button,
        .combat-results-footer > button {
            flex: 0 1 168px;
            width: auto;
            min-width: 118px;
            max-width: 208px;
            min-height: 36px;
            margin-top: 0;
            padding: 7px 12px;
            white-space: nowrap;
        }

        .combat-results-footer > .modal-parchment-button:first-child,
        .combat-results-footer > button:first-child {
            margin-top: 0;
        }

        .board-modal-scroll {
            flex: 1 1 auto;
            min-height: 0;
            box-sizing: border-box;
            overflow-y: auto;
            padding: 10px;
        }

        .board-modal-footer {
            flex-shrink: 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            padding: 10px;
            border-top: 1px solid rgba(139,115,85,0.45);
        }

        .board-modal-footer > .modal-parchment-button,
        .board-modal-footer > button {
            flex: 0 1 168px;
            width: auto;
            min-width: 118px;
            max-width: 208px;
            min-height: 36px;
            margin-top: 0;
            padding: 7px 12px;
            white-space: nowrap;
        }

        .board-modal-footer > .modal-parchment-button:first-child,
        .board-modal-footer > button:first-child {
            margin-top: 0;
        }

        .game-log-modal-content {
            width: min(720px, 94vw);
            max-height: 85vh;
            display: flex;
            flex-direction: column;
        }

        .game-log-parchment {
            flex: 1 1 auto;
            min-height: 0;
        }

        .game-log-body {
            display: grid;
            gap: 8px;
            scrollbar-width: thin;
            scrollbar-color: rgba(116,74,34,0.85) rgba(61,43,31,0.16);
        }

        .game-log-body::-webkit-scrollbar {
            width: 10px;
        }

        .game-log-body::-webkit-scrollbar-track {
            background: rgba(61,43,31,0.14);
            border-radius: 999px;
            box-shadow: inset 0 0 0 1px rgba(139,115,85,0.22);
        }

        .game-log-body::-webkit-scrollbar-thumb {
            background:
                linear-gradient(180deg, rgba(212,175,55,0.58), rgba(116,74,34,0.9));
            border: 2px solid rgba(245,224,174,0.82);
            border-radius: 999px;
        }

        .game-log-entry {
            display: grid;
            gap: 3px;
            padding: 8px 0;
            border-bottom: 1px solid rgba(139,115,85,0.22);
            font-family: 'Comic Sans MS', 'Comic Sans', cursive;
            font-size: 0.8em;
            line-height: 1.45;
            color: #3d2b1f;
        }

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

        .game-log-entry strong {
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.9em;
            color: #1a0f0a;
            letter-spacing: 0.5px;
        }

        .game-log-entry span {
            color: #3d2b1f;
        }

        .game-log-empty {
            padding: 12px 0;
            text-align: center;
            font-family: 'Comic Sans MS', 'Comic Sans', cursive;
            font-size: 0.82em;
            color: #8b7355;
        }

        .game-log-footer {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .game-log-footer > button {
            margin-top: 0;
        }

        .hero-cards-readiness-modal {
            width: min(620px, 95vw);
            max-height: 92vh;
            display: flex;
            flex-direction: column;
        }

        .hero-cards-readiness-modal .parchment-box {
            max-height: 92vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .hero-cards-readiness-body {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }

        .readiness-hero {
            flex: 0 0 auto;
            box-sizing: border-box;
            width: calc(5 * 104px + 4 * 8px + 16px + 4px);
            max-width: 100%;
            border: 2px solid rgba(139,115,85,0.72);
            border-radius: 8px;
            overflow: hidden;
            background: linear-gradient(135deg, #f0e6d3 0%, #ddd0b8 58%, #c8bb9f 100%);
            box-shadow: 0 2px 8px rgba(0,0,0,0.28);
        }

        .readiness-hero-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-height: 34px;
            padding: 0 10px 0 0;
            color: #fff;
            border-bottom: 2px solid rgba(139,115,85,0.78);
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            text-shadow: 0 2px 4px rgba(0,0,0,0.72);
        }

        .readiness-hero-banner em {
            font-size: 0.68em;
            font-style: normal;
            opacity: 0.86;
        }

        .readiness-hero-body {
            display: grid;
            gap: 8px;
            padding: 8px;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
        }

        .readiness-general-grid {
            display: grid;
            gap: 5px;
        }

        .readiness-general {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-height: 24px;
            padding: 3px 7px;
            border: 1px solid rgba(139,115,85,0.38);
            border-left: 5px solid var(--general-color);
            border-radius: 5px;
            background: rgba(255,255,255,0.26);
            color: #2c1810;
            font-size: 0.68em;
        }

        .readiness-general strong {
            color: #1a0f0a;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.86em;
            white-space: nowrap;
        }

        .readiness-general.not-ready {
            opacity: 0.62;
        }

        .readiness-card-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-start;
            max-width: calc(10 * 120px + 9 * 8px);
            margin: 0;
        }

        .hero-card-inventory-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(104px, 104px));
            justify-content: start;
            align-items: start;
            width: 100%;
            max-width: calc(5 * 104px + 4 * 8px);
        }

        .readiness-card {
            flex: 1 1 90px;
            max-width: 120px;
            min-width: 80px;
            display: block;
            padding: 8px 6px;
            border: 3px solid #8b7355;
            border-radius: 8px;
            background: linear-gradient(135deg,#f0e6d3 0%,#ddd0b8 50%,#c8bb9f 100%);
            color: #2c1810;
            text-align: center;
            min-width: 0;
        }

        .hero-card-inventory-card {
            width: 104px;
            box-sizing: border-box;
            height: 112px;
            min-height: 112px;
            min-width: 0;
            max-width: none;
            justify-self: start;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
        }

        #hero-detail-modal > .modal-content-parchment {
            width: min(720px, calc(100vw - 112px));
            max-width: 720px;
        }

        #hero-detail-modal.hero-detail-card-view > .modal-content-parchment {
            width: min(500px, calc(100vw - 112px));
            max-width: 500px;
        }

        .readiness-card-top {
            display: grid;
            gap: 2px;
        }

        .readiness-card-top strong {
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.68em;
            color: #1a0f0a;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            line-height: 1.05;
        }

        .hero-card-inventory-name {
            font-family: 'Cinzel', Georgia, serif;
            font-weight: 900;
            font-size: 0.62em;
            line-height: 1.2;
        }

        .hero-card-inventory-dice {
            display: flex;
            justify-content: center;
            gap: 2px;
            margin-top: 4px;
            min-height: 18px;
        }

        .hero-card-die-token {
            display: inline-block;
            width: 18px;
            height: 18px;
            object-fit: contain;
            flex: 0 0 18px;
            filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45));
        }

        .hero-card-die-token--detail {
            width: 22px;
            height: 22px;
            flex-basis: 22px;
        }

        .hero-card-inventory-die {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 3px;
            font-size: 0.65em;
            border: 1.5px solid rgba(0,0,0,0.3);
        }

        .card-detail-die,
        .card-detail-art > div:last-child > div:last-child > span {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 22px !important;
            height: 22px !important;
            border-radius: 4px !important;
            border: 1.5px solid rgba(0,0,0,0.3) !important;
            color: transparent !important;
            font-size: 0 !important;
            line-height: 1 !important;
            overflow: hidden;
            position: relative;
        }

        .card-detail-die::before,
        .card-detail-art > div:last-child > div:last-child > span::before {
            content: "\1F3B2";
            color: #fff;
            font-size: 14px;
            line-height: 1;
            text-shadow: 0 1px 2px rgba(0,0,0,0.55);
        }

        .readiness-card-top span,
        .readiness-card-meta {
            font-size: 0.64em;
            color: #3d2b1f;
        }

        .readiness-card-meta {
            display: flex;
            justify-content: space-between;
            gap: 6px;
            align-items: center;
        }

        .readiness-die {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 14px;
            height: 14px;
            border-radius: 3px;
            background: #5c3d2e;
            box-shadow: inset 0 0 0 1px rgba(244,228,193,0.2);
        }

        .readiness-die::after {
            content: "";
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #f4e4c1;
            box-shadow: 0 0 3px rgba(255,255,255,0.28);
        }

        .readiness-empty {
            grid-column: 1 / -1;
            padding: 8px;
            border: 1px dashed rgba(139,115,85,0.5);
            border-radius: 6px;
            color: #6b4a34;
            font-size: 0.72em;
            text-align: center;
        }

        @media (max-height: 520px) and (orientation: landscape) {
            body.map-board-open .modal.active:not(#map-modal) {
                align-items: stretch;
                justify-content: center;
                padding: 6px 98px 18px 54px;
                overflow: hidden;
            }

            body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment {
                width: min(68vw, 680px) !important;
                max-width: calc(100vw - 180px) !important;
                height: calc((100dvh - 24px) * 1.25) !important;
                max-height: calc((100dvh - 24px) * 1.25) !important;
                min-height: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;
                box-sizing: border-box;
            }

            body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment:has([class~="parchment-zoned"]),
            body.map-board-open .modal.active:not(#map-modal) > .hero-cards-readiness-modal {
                height: calc((100dvh - 24px) * 1.25) !important;
            }

            body.map-board-open #end-of-turn-modal > .modal-content-parchment:has(#end-of-turn-content) {
                height: calc((100dvh - 24px) * 1.25) !important;
            }

            body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment > .parchment-box {
                display: flex;
                flex-direction: column;
                height: 100% !important;
                max-height: 100% !important;
                min-height: 0;
                margin-top: 0;
                overflow: hidden;
                font-size: 0.82em;
            }

            body.map-board-open #combat-modal > .modal-content-parchment {
                width: fit-content !important;
                min-width: min(360px, calc(100vw - 220px)) !important;
                max-width: calc(100vw - 220px) !important;
            }

            body.map-board-open #combat-results-modal > .modal-content-parchment {
                width: fit-content !important;
                min-width: min(360px, calc(100vw - 220px)) !important;
                max-width: calc(100vw - 220px) !important;
            }

            body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment > .parchment-box > .parchment-banner {
                flex-shrink: 0;
                margin: -10px -10px 0;
                padding: 6px 10px;
                min-height: 28px;
                font-size: 0.82em;
                line-height: 1.2;
                overflow: visible;
                border-bottom: 2px solid #8b7355;
            }

            body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment > .parchment-box > button,
            body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment > .parchment-box > [class~="modal-parchment-button"],
            body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment > .parchment-box > .parchment-footer {
                flex-shrink: 0;
            }

            body.map-board-open .modal.active:not(#map-modal) #combat-content,
            body.map-board-open .modal.active:not(#map-modal) #location-actions-content,
            body.map-board-open .modal.active:not(#map-modal) #hero-death-content,
            body.map-board-open .modal.active:not(#map-modal) #retreat-content,
            body.map-board-open .modal.active:not(#map-modal) #card-display,
            body.map-board-open .modal.active:not(#map-modal) #group-penalty-content,
            body.map-board-open .modal.active:not(#map-modal) #darkness-content,
            body.map-board-open .modal.active:not(#map-modal) #card-discard-content,
            body.map-board-open .modal.active:not(#map-modal) #rumors-content,
            body.map-board-open .modal.active:not(#map-modal) #hand-limit-content,
            body.map-board-open .modal.active:not(#map-modal) #card-detail-content,
            body.map-board-open .modal.active:not(#map-modal) #info-modal-content,
            body.map-board-open .modal.active:not(#map-modal) #end-of-turn-content,
            body.map-board-open .modal.active:not(#map-modal) #general-card-selection-content,
            body.map-board-open .modal.active:not(#map-modal) #general-card-selection-buttons {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                padding: 8px 12px;
            }

            body.map-board-open .modal.active:not(#map-modal) #info-modal-content:has(> [class~="parchment-zoned"]) {
                display: flex;
                flex-direction: column;
                overflow: hidden;
                padding: 0;
            }

            body.map-board-open .modal.active:not(#map-modal) #end-of-turn-content:has(> [class~="parchment-zoned"]),
            body.map-board-open .modal.active:not(#map-modal) #info-modal-content:has(> [class~="parchment-zoned"]) {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                min-height: 0;
                overflow: hidden;
                padding: 0;
            }

            body.map-board-open .modal.active:not(#map-modal) #card-detail-content:has(> [class~="parchment-zoned"]) {
                display: block;
                overflow-y: auto;
                padding: 0;
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] {
                display: flex;
                flex-direction: column;
                height: 100% !important;
                max-height: 100% !important;
                min-height: 0;
                overflow: hidden;
            }

            body.map-board-open #end-of-turn-modal [class~="parchment-zoned"] {
                height: 100%;
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-body {
                flex: 1 1 auto;
                min-height: 0;
                max-height: none !important;
                overflow-y: auto;
                padding: 8px 12px;
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-banner {
                margin: 0;
                padding: 6px 10px;
                min-height: 28px;
                font-size: 0.82em;
                line-height: 1.2;
                overflow: visible;
                border-bottom: 2px solid #8b7355;
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-footer {
                flex-shrink: 0;
                display: flex;
                align-items: stretch;
                gap: 6px;
                padding: 7px 10px 9px;
                border-top: 1px solid rgba(139,115,85,0.45);
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-footer > [class~="modal-parchment-button"],
            body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-footer > button {
                flex: 1 1 0;
                min-width: 0;
                margin-top: 0 !important;
            }

            body.map-board-open #end-of-turn-modal .parchment-phases {
                padding: 6px 8px 0;
            }

            body.map-board-open #end-of-turn-modal .step-indicator-bar {
                margin-bottom: 6px;
                gap: 2px;
            }

            body.map-board-open #end-of-turn-modal .step-indicator-bar .step-badge {
                padding: 2px 6px;
                border-width: 1px;
            }

            body.map-board-open #end-of-turn-modal .step-indicator-bar .step-label {
                font-size: 0.58em;
            }

            body.map-board-open #end-of-turn-modal .darkness-card-frame {
                margin-bottom: 6px !important;
                border-width: 2px !important;
                border-radius: 7px !important;
            }

            body.map-board-open #end-of-turn-modal .darkness-card-frame-banner {
                padding: 5px 8px !important;
            }

            body.map-board-open #end-of-turn-modal .darkness-card-frame-body {
                padding: 6px 8px !important;
            }

            body.map-board-open #end-of-turn-modal .darkness-card-frame .modal-desc-text {
                margin-bottom: 4px !important;
            }

            body.map-board-open #end-of-turn-modal .hero-section-label {
                margin-bottom: 4px !important;
                font-size: 0.72em !important;
            }

            body.map-board-open #end-of-turn-modal .parchment-footer {
                padding: 10px !important;
            }

            body.map-board-open #end-of-turn-modal #end-of-turn-btn-container {
                padding: 0 !important;
                width: 100%;
                box-sizing: border-box;
            }

            body.map-board-open .modal.active:not(#map-modal) .hero-ability-text,
            body.map-board-open .modal.active:not(#map-modal) .modal-desc-text,
            body.map-board-open .modal.active:not(#map-modal) .mobile-modal-description,
            body.map-board-open .modal.active:not(#map-modal) .parchment-body [style*="Comic Sans"],
            body.map-board-open .modal.active:not(#map-modal) .modal-content-parchment [style*="Comic Sans"] {
                font-size: 0.66em !important;
                line-height: 1.35 !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .card-wrap {
                border-width: 2px !important;
                border-radius: 8px !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .card-body,
            body.map-board-open .modal.active:not(#map-modal) [id^="quest-card-option-"] > div:last-child {
                padding: 8px 10px !important;
            }

            body.map-board-open .modal.active:not(#map-modal) [id^="quest-card-option-"] {
                border-width: 2px !important;
                border-radius: 8px !important;
            }

            body.map-board-open .modal.active:not(#map-modal) #general-card-selection-buttons {
                flex: 0 0 auto;
                gap: 6px !important;
                margin-top: 0 !important;
            }

            body.map-board-open .modal.active:not(#map-modal) #general-reward-content {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                min-height: 0;
                overflow: hidden;
            }

            body.map-board-open .modal.active:not(#map-modal) .board-modal-scroll {
                padding: 8px 12px;
            }

            body.map-board-open .modal.active:not(#map-modal) .board-modal-footer {
                display: flex;
                align-items: stretch;
                gap: 6px;
                padding: 7px 10px 9px;
                border-top: 1px solid rgba(139,115,85,0.45);
            }

            body.map-board-open .modal.active:not(#map-modal) .board-modal-footer > [class~="modal-parchment-button"],
            body.map-board-open .modal.active:not(#map-modal) .board-modal-footer > button {
                flex: 1 1 0;
                min-width: 0;
                margin-top: 0 !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .general-reward-intro {
                margin: 3px 0 7px !important;
                font-size: 0.72em !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .general-reward-cards {
                gap: 5px !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .general-reward-cards > div {
                flex: 0 1 74px !important;
                min-width: 58px !important;
                max-width: 86px !important;
                padding: 5px 4px !important;
                border-width: 2px !important;
                border-radius: 6px !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .general-reward-total {
                margin-top: 5px !important;
            }

            body.map-board-open .modal.active:not(#map-modal) #combat-results-content {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                min-height: 0;
                overflow: hidden;
            }

            body.map-board-open .modal.active:not(#map-modal) .combat-results-scroll {
                padding: 8px 12px;
            }

            body.map-board-open .modal.active:not(#map-modal) .combat-results-footer {
                display: flex;
                align-items: stretch;
                gap: 6px;
                padding: 7px 10px 9px;
                border-top: 1px solid rgba(139,115,85,0.45);
            }

            body.map-board-open .modal.active:not(#map-modal) .combat-results-footer > [class~="modal-parchment-button"],
            body.map-board-open .modal.active:not(#map-modal) .combat-results-footer > button {
                flex: 1 1 0;
                min-width: 0;
                margin-top: 0 !important;
            }

            body.map-board-open .modal.active:not(#map-modal) .dice-roll {
                flex-shrink: 0;
                gap: 7px;
                margin: 8px 0;
                max-height: 96px;
                overflow-y: auto;
            }

            body.map-board-open .modal.active:not(#map-modal) .die {
                width: 38px;
                height: 38px;
                font-size: 1.05em;
                border-radius: 7px;
            }

            body.map-board-open .modal.active:not(#map-modal) button,
            body.map-board-open .modal.active:not(#map-modal) [class~="modal-parchment-button"] {
                min-height: 34px !important;
                padding: 6px 9px !important;
                font-size: 0.76em !important;
                line-height: 1.05 !important;
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="modal-parchment-button-stack"] {
                flex-direction: row;
                gap: 6px;
            }

            body.map-board-open .modal.active:not(#map-modal) [class~="modal-parchment-button-stack"] > [class~="modal-parchment-button"],
            body.map-board-open .modal.active:not(#map-modal) [class~="modal-parchment-button-row"] > [class~="modal-parchment-button"] {
                flex: 1 1 0;
                min-width: 0;
                margin-top: 0 !important;
            }

            #heroes-modal,
            #hero-detail-modal {
                padding: 6px 58px 6px 96px;
            }

            #heroes-modal .modal-content-parchment,
            #hero-detail-modal .modal-content-parchment {
                width: min(74vw, 720px) !important;
                max-width: calc(100vw - 180px) !important;
                max-height: calc(100dvh - 18px) !important;
            }

            #hero-detail-modal.hero-detail-card-view .modal-content-parchment {
                width: min(500px, calc(100vw - 180px)) !important;
                max-width: min(500px, calc(100vw - 180px)) !important;
            }

            #heroes-modal .parchment-box,
            #hero-detail-modal .parchment-box {
                max-height: calc(100dvh - 18px) !important;
                font-size: 0.82em;
            }

            #heroes-modal .parchment-banner,
            #hero-detail-modal .parchment-banner {
                padding: 6px 10px;
                min-height: 28px;
                font-size: 0.82em;
                line-height: 1.2;
                overflow: visible;
            }

            #heroes-modal .parchment-body,
            #hero-detail-modal .parchment-body {
                max-height: calc(100dvh - 126px);
                overflow-y: auto;
                padding: 8px 12px;
            }

            #heroes-modal .hero-card,
            #hero-detail-modal .hero-card,
            #heroes-modal .parchment-card,
            #hero-detail-modal .parchment-card {
                margin-bottom: 6px;
            }

            #heroes-modal .hero-ability-text,
            #hero-detail-modal .hero-ability-text,
            #heroes-modal .parchment-body [style*="Comic Sans"],
            #hero-detail-modal .parchment-body [style*="Comic Sans"] {
                font-size: 0.66em !important;
                line-height: 1.35 !important;
            }

            #heroes-modal .parchment-footer,
            #hero-detail-modal .parchment-footer {
                padding: 7px 10px;
            }

            #heroes-modal .parchment-footer button,
            #hero-detail-modal .parchment-footer button {
                padding: 8px 10px !important;
                font-size: 0.76em !important;
            }

            body.map-board-open #map-war-status-modal > .map-war-placard-modal {
                width: min(74vw, 720px) !important;
                max-width: calc(100vw - 180px) !important;
                max-height: calc(100dvh - 18px) !important;
            }

            body.map-board-open #map-war-status-modal .war-status-modal-body {
                padding: 7px 10px !important;
            }

            body.map-board-open #map-war-status-modal .map-war-placard {
                max-height: none;
                overflow: hidden;
                border-radius: 8px;
            }

            body.map-board-open #map-war-status-modal .map-war-placard .general-banner {
                min-height: 40px;
                padding: 8px 12px;
            }

            body.map-board-open #map-war-status-modal .map-war-placard .general-body {
                padding: 8px 10px;
            }

            body.map-board-open #map-war-status-modal .map-war-placard-content {
                gap: 10px;
                align-items: flex-start;
            }

            body.map-board-open #map-war-status-modal .war-tracker-col {
                width: 22%;
                max-width: 126px;
                gap: 3px;
            }

            body.map-board-open #map-war-status-modal .war-box {
                min-height: 32px;
                padding: 4px 6px;
                border-width: 2px;
            }

            body.map-board-open #map-war-status-modal .war-arrow {
                font-size: 0.7em;
                line-height: 1;
            }

            body.map-board-open #map-war-status-modal .war-advance-text,
            body.map-board-open #map-war-status-modal .g-section-text {
                font-family: Georgia, 'Times New Roman', serif !important;
                letter-spacing: 0 !important;
                font-style: normal !important;
                font-weight: 400 !important;
            }

            body.map-board-open #map-war-status-modal .war-advance-text {
                margin-bottom: 6px;
                font-size: 0.72em !important;
                line-height: 1.2 !important;
            }

            body.map-board-open #map-war-status-modal .g-section-label {
                margin-bottom: 1px;
                font-size: 0.68em !important;
            }

            body.map-board-open #map-war-status-modal .g-section-text {
                font-size: 0.62em !important;
                line-height: 1.28 !important;
            }

            body.map-board-open #map-war-status-modal .map-war-descriptions {
                display: grid;
                gap: 5px;
            }

            .hero-cards-readiness-modal {
                width: min(560px, calc(100vw - 112px));
                max-height: calc(100dvh - 44px);
            }

            body.map-board-open .modal.active:not(#map-modal) > .hero-cards-readiness-modal {
                width: min(560px, calc(100vw - 112px)) !important;
                max-width: calc(100vw - 112px) !important;
            }

            .hero-cards-readiness-modal .parchment-box {
                max-height: calc(100dvh - 44px);
            }

            .hero-cards-readiness-modal .parchment-banner {
                padding: 6px 10px;
            }

            .hero-cards-readiness-body {
                gap: 7px;
                overflow-y: auto;
                padding: 7px;
            }

            .readiness-hero {
                border-width: 1px;
                border-radius: 6px;
                width: calc(5 * 94px + 4 * 6px + 12px + 2px);
            }

            .readiness-hero-banner {
                padding: 0 7px 0 0;
                font-size: 0.68em;
            }

            .readiness-hero-body {
                gap: 6px;
                padding: 6px;
            }

            .readiness-general {
                min-height: 18px;
                padding: 2px 5px 2px 7px;
                font-size: 0.62em;
            }

            .readiness-general strong {
                font-size: 0.74em;
            }

            .readiness-card-grid {
                gap: 6px;
            }

            .hero-card-inventory-row {
                display: grid !important;
                grid-template-columns: repeat(auto-fit, minmax(94px, 94px));
                justify-content: start;
                align-items: start;
                width: 100%;
                max-width: calc(5 * 94px + 4 * 6px);
            }

            body.map-board-open .modal.active:not(#map-modal) .hero-card-inventory-row > .hero-card-inventory-card {
                width: 94px !important;
                box-sizing: border-box !important;
                height: 100px !important;
                min-height: 100px !important;
                min-width: 0 !important;
                max-width: none !important;
                padding: 5px 4px !important;
                justify-self: start;
            }

            .readiness-card {
                min-height: 0;
                padding: 5px;
            }

            .readiness-card-top strong {
                font-size: 0.62em;
            }

            .hero-cards-readiness-modal .parchment-footer {
                padding: 5px 9px 6px;
            }
        }

        @media (max-width: 700px), (max-height: 520px) and (orientation: landscape) {
            .game-log-entry {
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 6px 0;
                line-height: 1.25;
            }

            .game-log-entry strong,
            .game-log-entry span {
                display: inline;
            }

            .game-log-entry strong::after {
                content: ": ";
            }
        }

        #game-log-btn .hdr-btn-icon {
            display: none;
        }
        .modal--reference-ui .parchment-zoned > .parchment-body {
            padding: 8px 10px;
        }
        .modal--reference-ui .parchment-zoned > .parchment-footer {
            box-sizing: border-box;
            min-height: 56px;
            padding: 8px 10px;
        }
        /* v2: Phase strip lives as a flex-shrink:0 sibling between banner and body,
           OUTSIDE the scrolling .parchment-body. No sticky positioning, no opacity
           tricks — it's architecturally pinned because the only flex child that
           stretches is .parchment-body. The 10px 10px 0 padding matches body side
           padding; body's padding-top supplies the gap between strip and content. */
        .parchment-zoned > .parchment-phases {
            flex-shrink: 0;
            padding: 10px 10px 0;
        }

        /* Hero Selection (and any other modal that needs the full 95vh height
           bump) — let the inner parchment-zoned fill the taller modal-content
           shell instead of staying clamped at the global 90vh ceiling.
           Pair the scoped class on .modal-content with max-height:95vh inline.
           Using a concrete viewport unit instead of 100% avoids the flex
           circular-sizing trap when the parent's height is itself a max-height.
           Descendant combinator (space) — the rendered tree has a wrapper
           #hero-select-content between .setup-modal-content and the
           .parchment-zoned generated by _mpParchment, so the previous direct-
           child '>' selector failed silently. */
        .setup-modal-content .parchment-zoned {
            max-height: 95vh;
            height: 100%;
            min-height: 100%;
            flex: 1 1 auto;
        }

        #setup-modal > .setup-modal-content,
        #hero-death-modal > .setup-modal-content,
        #mp-hero-select-modal > .setup-modal-content {
            width: min(96vw, 1088px) !important;
            max-width: min(96vw, 1088px) !important;
            height: min(90vh, 590px) !important;
            min-height: min(90vh, 590px) !important;
        }

        #hero-select-content,
        #mp-hero-select-content {
            height: 100%;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        #setup-modal > .setup-modal-content:has(#hero-select-content),
        #hero-death-modal > .setup-modal-content:has(#hero-death-content),
        #mp-hero-select-modal > .setup-modal-content:has(#mp-hero-select-content) {
            height: auto !important;
            min-height: 0 !important;
        }

        #setup-modal > .setup-modal-content:has(#hero-select-content) #hero-select-content,
        #hero-death-modal > .setup-modal-content:has(#hero-death-content) #hero-death-content,
        #mp-hero-select-modal > .setup-modal-content:has(#mp-hero-select-content) #mp-hero-select-content,
        #setup-modal > .setup-modal-content:has(#hero-select-content) .parchment-zoned,
        #hero-death-modal > .setup-modal-content:has(#hero-death-content) .parchment-box,
        #mp-hero-select-modal > .setup-modal-content:has(#mp-hero-select-content) .parchment-zoned {
            height: auto;
            min-height: 0;
            flex: 0 0 auto;
        }

        /* Hero Selection — anchor the modal to the top of the viewport instead
           of the default vertical-center alignment. As the previewed hero's
           card grows or shrinks (Druid's one-line ability vs Captain of the
           Guard's three-paragraph block), centering caused the entire modal
           to bounce up and down. Anchoring the top edge keeps the heading
           steady while the body grows downward. The padding-top supplies the
           breathing room that align-items:center used to provide. */
        #setup-modal {
            align-items: flex-start;
            padding-top: max(2.5vh, 20px);
        }

        /* Info Modal — turn the parchment shell into a flex column so the
           content area can scroll and the Continue button stays pinned at
           the bottom. Without this, tall content (Hall of Chronicles stats
           with personal + guild + community sections) overflowed past the
           90vh ceiling and got CLIPPED — community sections + Continue
           button were silently invisible (user-reported: "no buttons,
           missing community stats section"). */
        #info-modal > .modal-content-parchment {
            display: flex;
            flex-direction: column;
            max-height: 90vh;
        }
        #info-modal-title { flex-shrink: 0; }
        #info-modal-content {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }
        /* When the caller renders a parchment-zoned card (banner + scrolling
           body + pinned footer), the inner .parchment-body owns the scroll.
           Disable the outer overflow so we don't double up — that produced
           the second scrollbar outside the parchment frame the user
           reported on the Hall of Chronicles modal. */
        #info-modal-content:has(> .parchment-zoned) {
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        #info-modal-content > .parchment-zoned {
            flex: 1 1 auto;
            min-height: 0;
        }
        #info-modal-default-btn {
            flex-shrink: 0;
            margin-top: 8px;
        }

        /* Hero Selection body — override the global .parchment-body's
           overflow-y:auto for this modal only. Without this override the
           outer body would absorb any overflow before the inner three-zone
           layout could constrain it, defeating the pinned Available Heroes
           top + pinned Selected Heroes bottom. With overflow:hidden +
           display:flex the body becomes a strict layout container; only
           the middle zone (the previewed-hero card) scrolls.
           Descendant combinator — see note above on the #hero-select-content
           wrapper sitting between .setup-modal-content and .parchment-zoned. */
        .setup-modal-content .parchment-zoned > .parchment-body {
            overflow: hidden !important;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .setup-modal-content .hero-select-side-rail {
            --hero-select-pill-w: 214px;
            --hero-select-pill-h: 42px;
            --hero-select-preview-h: 296px;
            --hero-select-selected-h: 136px;
            --hero-select-zone-gap: 8px;
            display: grid;
            grid-template-columns: minmax(452px, 42%) minmax(0, 1fr);
            gap: var(--hero-select-zone-gap);
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            align-content: start;
        }

        .setup-modal-content .hero-select-side-rail:has(.hero-select-slot:nth-child(n+5)) {
            --hero-select-selected-h: 183px;
        }

        .setup-modal-content .hero-select-frame {
            min-height: 0;
            overflow: hidden;
            background: rgba(239, 226, 197, 0.58);
            border: 2px solid rgba(139, 115, 85, 0.72);
            box-shadow: inset 0 0 12px rgba(75, 45, 24, 0.18);
        }

        .setup-modal-content .hero-select-available-frame,
        .setup-modal-content .hero-select-selected-frame {
            display: grid;
            grid-template-rows: 28px minmax(0, 1fr);
        }

        .setup-modal-content .hero-select-available-frame {
            align-self: start;
            grid-template-rows: 28px auto;
            height: calc(var(--hero-select-preview-h) + var(--hero-select-zone-gap) + var(--hero-select-selected-h));
            max-height: 100%;
        }

        .setup-modal-content .hero-select-available-frame:has(.hero-select-pill:nth-child(n+17)) {
            height: 100%;
            grid-template-rows: 28px minmax(0, 1fr);
        }

        .setup-modal-content .hero-select-frame-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-width: 0;
            padding: 4px 8px;
            border-bottom: 1px solid rgba(139, 115, 85, 0.4);
            color: #8b7355;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.72em;
            font-weight: 900;
            letter-spacing: 1px;
            line-height: 1;
            text-transform: uppercase;
        }

        .setup-modal-content .hero-select-header-action {
            flex: 0 0 auto;
            height: 20px;
            min-width: 70px;
            padding: 0 10px;
            border: 1px solid #8b7355;
            border-radius: 4px;
            background: linear-gradient(135deg, #6b3f28, #4a2f20);
            color: #f8f0dc;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.72rem;
            font-weight: 900;
            line-height: 18px;
            text-align: center;
            cursor: pointer;
            box-shadow: inset 0 0 0 1px rgba(255, 248, 220, 0.16), 0 1px 3px rgba(0,0,0,0.25);
        }

        .setup-modal-content .hero-select-header-action:disabled {
            opacity: 0.45;
            cursor: default;
        }

        .setup-modal-content .hero-select-available-grid,
        .setup-modal-content .hero-select-slot-grid {
            min-height: 0;
            padding: 5px;
            display: grid;
            grid-template-columns: repeat(2, var(--hero-select-pill-w));
            grid-auto-rows: var(--hero-select-pill-h);
            gap: 5px;
            justify-content: center;
            align-content: start;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .setup-modal-content .hero-select-available-frame .hero-select-available-grid {
            height: fit-content;
            max-height: none;
            overflow-y: hidden;
        }

        .setup-modal-content .hero-select-available-frame:has(.hero-select-pill:nth-child(n+17)) .hero-select-available-grid {
            height: auto;
            max-height: none;
            overflow-y: auto;
        }

        .setup-modal-content .hero-select-right {
            min-height: 0;
            display: grid;
            grid-template-rows: var(--hero-select-preview-h) var(--hero-select-selected-h);
            gap: var(--hero-select-zone-gap);
            align-content: start;
        }

        .setup-modal-content .hero-select-preview-frame {
            display: block;
            min-height: 0;
            align-self: start;
            height: var(--hero-select-preview-h);
        }

        .setup-modal-content .hero-select-preview-scroll {
            width: 100%;
            height: 100%;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: hidden;
        }

        .setup-modal-content .hero-select-card {
            height: auto;
            min-height: 100%;
            background: linear-gradient(135deg, #f0e6d3, #ddd0b8);
            border-radius: 0;
            overflow: visible;
        }

        .setup-modal-content .hero-select-card--empty {
            opacity: 0.55;
        }

        .setup-modal-content .hero-select-card-banner {
            min-height: 44px;
            padding: 0 12px 0 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            background: linear-gradient(135deg, var(--hero-color, #5c3d2e), var(--hero-color, #5c3d2e));
            border-bottom: 2px solid #8b7355;
        }

        .setup-modal-content .hero-select-card-name {
            min-width: 0;
            height: 40px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #fff;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.92em;
            font-weight: 900;
            line-height: 1;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
        }

        .setup-modal-content .hero-select-card-life {
            --hero-banner-token-size: 40px;
            flex: 0 0 auto;
        }

        .setup-modal-content .hero-select-card-body {
            position: relative;
            display: grid;
            align-items: start;
            padding: 10px 14px;
        }

        .setup-modal-content .hero-select-card-body > .hero-ability-text {
            grid-area: 1 / 1;
        }

        .setup-modal-content .hero-select-empty-prompt {
            position: absolute;
            top: 10px;
            left: 14px;
        }

        .setup-modal-content .hero-select-reserve-text {
            visibility: hidden;
            pointer-events: none;
        }

        .setup-modal-content .hero-select-card-body .hero-ability-text {
            color: #3d2b1f;
            font-family: 'Comic Sans MS', cursive;
            font-size: 0.8em;
            line-height: 1.45;
        }

        .hero-modal-pill-row {
            --hero-select-pill-w: 214px;
            --hero-select-pill-h: 42px;
            display: grid;
            grid-template-columns: repeat(auto-fit, var(--hero-select-pill-w));
            grid-auto-rows: var(--hero-select-pill-h);
            gap: 5px;
            justify-content: center;
            align-content: start;
            margin-top: 10px;
        }

        .setup-modal-content .hero-select-pill,
        .setup-modal-content .hero-select-slot,
        .hero-modal-pill-row .hero-select-pill {
            position: relative;
            height: var(--hero-select-pill-h);
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 10px 0 0;
            border: 2px solid rgba(82, 49, 30, 0.42);
            border-radius: 999px;
            overflow: hidden;
            background: linear-gradient(135deg, var(--hero-color, #5c3d2e), var(--hero-color, #5c3d2e));
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
            cursor: pointer;
        }

        .hero-modal-pill-row button.hero-select-pill {
            appearance: none;
            font: inherit;
            text-align: left;
        }

        .hero-modal-pill-row .quest-select-pill {
            --hero-color: #b91c1c;
        }

        .setup-modal-content .hero-select-pill.is-active,
        .setup-modal-content .hero-select-pill.is-selected,
        .hero-modal-pill-row .hero-select-pill.is-selected,
        .hero-modal-pill-row .hero-select-pill.is-active {
            border-color: #0f7a32;
            box-shadow:
                0 0 0 2px #16a34a,
                0 0 10px rgba(22, 163, 74, 0.72),
                0 2px 6px rgba(0, 0, 0, 0.4);
        }

        .setup-modal-content .hero-select-pill.is-disabled,
        .hero-modal-pill-row .hero-select-pill.is-disabled {
            opacity: 0.45;
            cursor: not-allowed;
            filter: saturate(0.8);
        }

        .hero-picker-pill-row {
            max-height: 280px;
            overflow-y: auto;
            padding-right: 3px;
            margin: 10px 0;
        }

        .dwarven-rum-hero-list {
            --hero-select-pill-w: 214px;
            --hero-select-pill-h: 42px;
            --dwarven-rum-check-gutter: 30px;
            grid-template-columns: minmax(0, calc(var(--hero-select-pill-w) + var(--dwarven-rum-check-gutter)));
            justify-content: center;
            gap: 7px;
        }

        .dwarven-rum-option-row {
            position: relative;
            width: calc(var(--hero-select-pill-w) + var(--dwarven-rum-check-gutter));
            max-width: 100%;
            display: grid;
            grid-template-columns: minmax(0, var(--hero-select-pill-w)) var(--dwarven-rum-check-gutter);
            align-items: center;
        }

        .dwarven-rum-option-row .hero-select-pill {
            width: var(--hero-select-pill-w);
            max-width: 100%;
            grid-column: 1;
        }

        .dwarven-rum-check {
            grid-column: 2;
            justify-self: end;
            width: 20px;
            height: 20px;
            display: inline-grid;
            place-content: center;
            border: 1.5px solid #8b7355;
            border-radius: 50%;
            background: #fffaf0;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.18);
            pointer-events: none;
        }

        .dwarven-rum-option-row:has(.hero-select-pill.is-selected) .dwarven-rum-check {
            background: #16a34a;
            border-color: #0f7a32;
        }

        .dwarven-rum-option-row:has(.hero-select-pill.is-selected) .dwarven-rum-check::after {
            content: "";
            width: 9px;
            height: 5px;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(-45deg) translateY(-1px);
        }

        .setup-modal-content .hero-select-pill-cap,
        .hero-modal-pill-row .hero-select-pill-cap {
            align-self: stretch;
            flex: 0 0 auto;
            height: 100%;
            aspect-ratio: 1 / 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
        }

        .setup-modal-content .hero-select-pill-cap > *,
        .hero-modal-pill-row .hero-select-pill-cap > * {
            height: 100% !important;
            max-height: 100% !important;
            width: auto !important;
            max-width: none !important;
            flex: 0 0 auto;
        }

        .setup-modal-content .hero-select-pill-label,
        .hero-modal-pill-row .hero-select-pill-label {
            min-width: 0;
            flex: 1 1 auto;
            color: #fff;
            font-family: 'Cinzel', Georgia, serif;
            font-size: clamp(0.72rem, 1.2vw, 0.88rem);
            font-weight: 900;
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
        }

        .hero-modal-pill-row .quest-select-pill-status {
            flex: 0 0 auto;
            padding: 2px 7px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.34);
            background: rgba(26,15,10,0.26);
            color: #f8e6b0;
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.56rem;
            font-weight: 900;
            line-height: 1;
            white-space: nowrap;
            text-shadow: 0 1px 3px rgba(0,0,0,0.8);
        }

        .quest-modal-pill-row {
            --hero-select-pill-w: 252px;
            justify-content: start;
            margin-top: 10px;
        }

        .quest-detail-modal-body {
            width: min(520px, calc(100vw - 40px));
            max-width: 100%;
            margin: 0 auto;
        }

        #info-modal:has(.quest-detail-modal-body) > .modal-content-parchment {
            width: min(560px, calc(100vw - 40px)) !important;
        }

        #hero-detail-modal:has(.quest-detail-modal-body) > .modal-content-parchment {
            width: min(560px, calc(100vw - 40px)) !important;
        }

        body.map-board-open #info-modal:has(.quest-detail-modal-body) > .modal-content-parchment {
            width: min(560px, calc(100vw - 180px)) !important;
        }

        body.map-board-open #hero-detail-modal:has(.quest-detail-modal-body) > .modal-content-parchment {
            width: min(560px, calc(100vw - 180px)) !important;
        }

        .setup-modal-content .hero-select-pill.name-long .hero-select-pill-label,
        .setup-modal-content .hero-select-slot.name-long .hero-select-pill-label,
        .hero-modal-pill-row .hero-select-pill.name-long .hero-select-pill-label {
            font-size: clamp(0.72rem, 1.2vw, 0.88rem);
        }

        .setup-modal-content .hero-select-pill.name-extra-long .hero-select-pill-label,
        .setup-modal-content .hero-select-slot.name-extra-long .hero-select-pill-label,
        .hero-modal-pill-row .hero-select-pill.name-extra-long .hero-select-pill-label {
            font-size: clamp(0.72rem, 1.2vw, 0.88rem);
            letter-spacing: 0;
        }

        .setup-modal-content .hero-select-pill.cap-overlap,
        .setup-modal-content .hero-select-slot.cap-overlap,
        .hero-modal-pill-row .hero-select-pill.cap-overlap {
            display: flex;
            gap: 8px;
            padding-left: 0;
            padding-right: 10px;
        }

        .setup-modal-content .hero-select-pill.cap-overlap .hero-select-pill-cap,
        .setup-modal-content .hero-select-slot.cap-overlap .hero-select-pill-cap,
        .hero-modal-pill-row .hero-select-pill.cap-overlap .hero-select-pill-cap {
            position: relative;
            inset: auto;
            margin-right: 0;
            z-index: 2;
        }

        .setup-modal-content .hero-select-pill.cap-overlap .hero-select-pill-label,
        .setup-modal-content .hero-select-slot.cap-overlap .hero-select-pill-label,
        .hero-modal-pill-row .hero-select-pill.cap-overlap .hero-select-pill-label {
            height: 100%;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 3;
            flex: 1 1 0;
            max-width: 100%;
            font-size: clamp(0.68rem, 1.08vw, 0.8rem);
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .setup-modal-content .hero-select-slot.is-empty,
        .setup-modal-content .hero-select-slot.can-add {
            justify-content: center;
            padding: 0 10px;
            background: linear-gradient(135deg, rgba(92, 61, 46, 0.55), rgba(74, 47, 32, 0.55));
            color: rgba(255, 255, 255, 0.82);
            font-family: 'Cinzel', Georgia, serif;
            font-size: 0.76em;
            font-weight: 900;
            font-style: italic;
            text-align: center;
        }

        .setup-modal-content .hero-select-slot.is-empty {
            opacity: 0.52;
            cursor: default;
        }

        .setup-modal-content .hero-select-slot-grid {
            grid-template-columns: repeat(2, var(--hero-select-pill-w));
            overflow-y: hidden;
            align-content: start;
        }

        .setup-modal-content .hero-select-selected-frame:has(.hero-select-slot:nth-child(n+5)) .hero-select-slot-grid {
            grid-template-columns: repeat(2, var(--hero-select-pill-w));
        }

        .setup-modal-content .hero-select-available-grid::-webkit-scrollbar,
        .setup-modal-content .hero-select-preview-scroll::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .setup-modal-content .hero-select-available-grid::-webkit-scrollbar-track,
        .setup-modal-content .hero-select-preview-scroll::-webkit-scrollbar-track {
            background: rgba(139, 115, 85, 0.12);
            border-radius: 999px;
        }

        .setup-modal-content .hero-select-available-grid::-webkit-scrollbar-thumb,
        .setup-modal-content .hero-select-preview-scroll::-webkit-scrollbar-thumb {
            background: #8b7355;
            border-radius: 999px;
            border: 1px solid rgba(60, 34, 20, 0.45);
        }

        .setup-modal-content .hero-select-available-grid,
        .setup-modal-content .hero-select-preview-scroll {
            scrollbar-width: thin;
            scrollbar-color: #8b7355 rgba(139, 115, 85, 0.12);
        }

        /* ── PARCHMENT SCROLLBAR ──
           Parchment-themed scrollbar for any scrollable surface in the modal system.
           Tan thumb on a faint parchment track, matches .parchment-box material.
           Targets the zoned body (primary scroll point) and modal-content fallback. */
        @media (max-width: 700px), (max-height: 520px) and (orientation: landscape) {
            /* NEVER TOUCH this mobile modal scale unless the user specifically
               asks to change the scale value. It intentionally shrinks the
               whole modal and its contents together. Frame sizing below uses
               a 1.25x pre-scale height budget so the scaled result fills the
               mobile viewport while preserving this 0.8 visual scale. */
            .modal.active:not(#map-modal) > :is(.modal-content, .modal-content-parchment) {
                transform: scale(0.8);
                transform-origin: center center;
            }

            #game-menu-modal,
            #game-setup-modal,
            #setup-modal,
            #mp-setup-modal,
            #mp-hero-select-modal,
            #mp-name-modal,
            #mp-invite-modal,
            #mp-lobby-modal,
            #mp-hero-wait-modal,
            #mp-alerts-modal,
            #mp-load-modal,
            #mp-progress-modal,
            #friends-modal,
            #guild-modal,
            #auth-modal,
            #forgot-modal,
            #verify-gate-modal,
            #info-modal,
            #victory-modal,
            #game-over-modal,
            #wizard-teleport-modal,
            #eagle-attack-style-modal,
            #shapeshift-modal,
            .modal--reference-ui {
                align-items: center;
                padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
            }

            #game-menu-modal > .modal-content-parchment,
            #game-setup-modal > .modal-content-parchment,
            #setup-modal > .setup-modal-content,
            #hero-death-modal > .setup-modal-content,
            #mp-setup-modal > .modal-content-parchment,
            #mp-hero-select-modal > .setup-modal-content,
            #mp-name-modal > .modal-content-parchment,
            #mp-invite-modal > .modal-content-parchment,
            #mp-lobby-modal > .modal-content-parchment,
            #mp-hero-wait-modal > .modal-content-parchment,
            #mp-alerts-modal > .modal-content-parchment,
            #mp-load-modal > .modal-content-parchment,
            #mp-progress-modal > .modal-content-parchment,
            #friends-modal > .modal-content-parchment,
            #guild-modal > .modal-content-parchment,
            #auth-modal > .modal-content-parchment,
            #forgot-modal > .modal-content-parchment,
            #verify-gate-modal > .modal-content,
            #info-modal > .modal-content-parchment,
            #victory-modal > .modal-content-parchment,
            #game-over-modal > .modal-content-parchment,
            #wizard-teleport-modal > .modal-content,
            #eagle-attack-style-modal > .modal-content-parchment,
            #shapeshift-modal > .modal-content-parchment,
            .modal--reference-ui > .modal-content-parchment {
                width: calc(100vw - 16px) !important;
                max-width: 600px !important;
                height: calc((100dvh - 16px) * 1.25) !important;
                max-height: calc((100dvh - 16px) * 1.25) !important;
                min-height: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;
            }

            #game-menu-content > .parchment-box {
                height: 100%;
                max-height: calc((100dvh - 16px) * 1.25);
                overflow-y: auto;
            }

            #game-setup-modal .parchment-zoned,
            #setup-modal .parchment-zoned,
            #mp-setup-modal .parchment-zoned,
            #mp-hero-select-modal .parchment-zoned,
            #mp-name-modal .parchment-zoned,
            #mp-invite-modal .parchment-zoned,
            #mp-lobby-modal .parchment-zoned,
            #mp-hero-wait-modal .parchment-zoned,
            #mp-alerts-modal .parchment-zoned,
            #mp-load-modal .parchment-zoned,
            #mp-progress-modal .parchment-zoned,
            #friends-modal .parchment-zoned,
            #guild-modal .parchment-zoned,
            #auth-modal .parchment-box,
            #forgot-modal .parchment-box,
            #verify-gate-modal .parchment-box,
            #info-modal .parchment-zoned,
            #victory-modal .parchment-zoned,
            #game-over-modal .parchment-zoned,
            #eagle-attack-style-modal .parchment-zoned,
            #shapeshift-modal .parchment-zoned,
            .modal--reference-ui .parchment-zoned {
                height: 100%;
                max-height: 100%;
                min-height: 0;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            #game-setup-modal .parchment-body,
            #setup-modal .parchment-body,
            #mp-setup-modal .parchment-body,
            #mp-hero-select-modal .parchment-body,
            #mp-name-modal .parchment-body,
            #mp-invite-modal .parchment-body,
            #mp-lobby-modal .parchment-body,
            #mp-hero-wait-modal .parchment-body,
            #mp-alerts-modal .parchment-body,
            #mp-load-modal .parchment-body,
            #mp-progress-modal .parchment-body,
            #friends-modal .parchment-body,
            #guild-modal .parchment-body,
            #info-modal .parchment-body,
            #victory-modal .parchment-body,
            #game-over-modal .parchment-body,
            #eagle-attack-style-modal .parchment-body,
            #shapeshift-modal .parchment-body,
            .modal--reference-ui .parchment-body {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
            }

            #game-setup-modal .parchment-banner,
            #setup-modal .parchment-banner,
            #mp-setup-modal .parchment-banner,
            #mp-hero-select-modal .parchment-banner,
            #game-menu-modal .parchment-banner,
            #mp-name-modal .parchment-banner,
            #mp-invite-modal .parchment-banner,
            #mp-lobby-modal .parchment-banner,
            #mp-hero-wait-modal .parchment-banner,
            #mp-alerts-modal .parchment-banner,
            #mp-load-modal .parchment-banner,
            #mp-progress-modal .parchment-banner,
            #friends-modal .parchment-banner,
            #guild-modal .parchment-banner,
            #auth-modal .parchment-banner,
            #forgot-modal .parchment-banner,
            #verify-gate-modal .parchment-banner,
            #info-modal .parchment-banner,
            #victory-modal .parchment-banner,
            #game-over-modal .parchment-banner,
            #eagle-attack-style-modal .parchment-banner,
            #shapeshift-modal .parchment-banner,
            .modal--reference-ui .parchment-banner {
                padding: 6px 10px;
                min-height: 28px;
                font-size: 0.82em;
                line-height: 1.2;
                overflow: visible;
            }

            #game-setup-modal .parchment-body,
            #mp-setup-modal .parchment-body {
                padding: 8px 12px;
            }

            #game-setup-modal .parchment-footer,
            #setup-modal .parchment-footer,
            #mp-setup-modal .parchment-footer,
            #mp-hero-select-modal .parchment-footer,
            #mp-name-modal .parchment-footer,
            #mp-invite-modal .parchment-footer,
            #mp-lobby-modal .parchment-footer,
            #mp-hero-wait-modal .parchment-footer,
            #mp-alerts-modal .parchment-footer,
            #mp-load-modal .parchment-footer,
            #mp-progress-modal .parchment-footer,
            #friends-modal .parchment-footer,
            #guild-modal .parchment-footer,
            #auth-modal .parchment-footer,
            #forgot-modal .parchment-footer,
            #verify-gate-modal .parchment-footer,
            #info-modal .parchment-footer,
            #victory-modal .parchment-footer,
            #game-over-modal .parchment-footer,
            #eagle-attack-style-modal .parchment-footer,
            #shapeshift-modal .parchment-footer,
            .modal--reference-ui .parchment-footer {
                padding: 8px 10px;
            }

            .modal--reference-ui .parchment-body {
                padding: 8px 10px;
            }

            .modal--reference-ui .modal-desc-text,
            .modal--reference-ui .parchment-body [style*="Comic Sans"],
            .modal--reference-ui .modal-content-parchment [style*="Comic Sans"] {
                font-size: 0.72em !important;
                line-height: 1.45 !important;
            }

            .modal--reference-ui :is(.reference-ui-section, .release-notes-section) {
                font-size: 0.72em !important;
                margin: 6px 0 4px !important;
                padding-bottom: 3px !important;
            }

            .modal--reference-ui :is(.parchment-footer, .modal-parchment-button-stack, .modal-parchment-button-row) {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 6px !important;
                flex-wrap: wrap !important;
            }

            .modal--reference-ui :is(.modal-parchment-button-stack) {
                flex: 0 0 auto !important;
                width: min(100%, 258px) !important;
            }

            :is(
                #game-setup-modal,
                #setup-modal,
                #mp-setup-modal,
                #mp-hero-select-modal,
                #mp-name-modal,
                #mp-invite-modal,
                #mp-lobby-modal,
                #mp-hero-wait-modal,
                #mp-alerts-modal,
                #mp-load-modal,
                #mp-progress-modal
            ) .parchment-footer {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 6px !important;
                flex-wrap: wrap !important;
            }

            :is(
                #game-setup-modal,
                #setup-modal,
                #mp-setup-modal,
                #mp-hero-select-modal,
                #mp-name-modal,
                #mp-invite-modal,
                #mp-lobby-modal,
                #mp-hero-wait-modal,
                #mp-alerts-modal,
                #mp-load-modal,
                #mp-progress-modal
            ) .parchment-footer > :is(.modal-parchment-button, button) {
                flex: 0 1 148px !important;
                width: auto !important;
                min-width: 112px !important;
                max-width: 184px !important;
                min-height: 34px !important;
                height: 34px !important;
                padding: 5px 9px !important;
                margin-top: 0 !important;
                line-height: 1.05 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            #game-setup-modal [class~="modal-parchment-button"],
            #setup-modal [class~="modal-parchment-button"],
            #mp-setup-modal [class~="modal-parchment-button"],
            #mp-hero-select-modal [class~="modal-parchment-button"],
            #game-menu-modal [class~="modal-parchment-button"],
            #mp-name-modal [class~="modal-parchment-button"],
            #mp-invite-modal [class~="modal-parchment-button"],
            #mp-lobby-modal [class~="modal-parchment-button"],
            #mp-hero-wait-modal [class~="modal-parchment-button"],
            #mp-alerts-modal [class~="modal-parchment-button"],
            #mp-load-modal [class~="modal-parchment-button"],
            #mp-progress-modal [class~="modal-parchment-button"],
            #friends-modal [class~="modal-parchment-button"],
            #guild-modal [class~="modal-parchment-button"],
            #auth-modal [class~="modal-parchment-button"],
            #forgot-modal [class~="modal-parchment-button"],
            #verify-gate-modal [class~="modal-parchment-button"],
            #auth-modal .phb,
            #forgot-modal .phb,
            #verify-gate-modal .phb,
            #info-modal [class~="modal-parchment-button"],
            #victory-modal [class~="modal-parchment-button"],
            #game-over-modal [class~="modal-parchment-button"],
            #eagle-attack-style-modal [class~="modal-parchment-button"],
            #shapeshift-modal [class~="modal-parchment-button"],
            .modal--reference-ui [class~="modal-parchment-button"] {
                padding: 8px 10px !important;
                font-size: 0.76em !important;
                letter-spacing: 0.5px !important;
            }

            .modal--reference-ui :is(.parchment-footer, .modal-parchment-button-stack, .modal-parchment-button-row) > :is(.modal-parchment-button, button) {
                flex: 0 1 126px !important;
                width: auto !important;
                min-width: 104px !important;
                max-width: 164px !important;
                min-height: 34px !important;
                height: 34px !important;
                padding: 5px 9px !important;
                margin-top: 0 !important;
                line-height: 1.05 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            #auth-modal > .modal-content-parchment,
            #forgot-modal > .modal-content-parchment,
            #verify-gate-modal > .modal-content {
                width: min(440px, calc(100vw - 112px)) !important;
                max-width: min(440px, calc(100vw - 112px)) !important;
                height: calc((100dvh - 16px) * 1.25) !important;
                max-height: calc((100dvh - 16px) * 1.25) !important;
                min-height: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden;
            }

            #auth-modal .parchment-box,
            #forgot-modal .parchment-box,
            #verify-gate-modal .parchment-box {
                height: 100%;
                max-height: 100%;
                min-height: 0;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            #auth-modal .parchment-box > div:not(.parchment-banner),
            #forgot-modal .parchment-box > div:not(.parchment-banner),
            #verify-gate-modal .parchment-box > div:not(.parchment-banner) {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                padding: 8px 10px 10px !important;
            }

            #auth-modal input,
            #forgot-modal input {
                padding: 7px 8px !important;
                font-size: 0.74em !important;
                margin-bottom: 6px !important;
            }

            .setup-modal-content .parchment-zoned > .parchment-body {
                display: block;
                overflow-y: auto !important;
                padding: 8px 12px;
            }

            .setup-modal-content .hero-select-preview {
                min-height: 0 !important;
                max-height: none;
                overflow: visible !important;
                padding-right: 0 !important;
            }

            .setup-modal-content .hero-pill-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 4px !important;
            }

            .setup-modal-content .hero-pill-grid > div > div {
                min-height: 34px;
                padding: 4px 6px !important;
                gap: 4px !important;
            }

            .setup-modal-content .hero-pill-grid span {
                font-size: 0.64em !important;
                line-height: 1.12 !important;
            }

            .setup-modal-content .hero-pill-grid span:first-child {
                font-size: 13px !important;
            }

            .setup-modal-content .hero-select-preview [style*="Comic Sans"],
            .setup-modal-content .hero-select-preview .hi-cont,
            .setup-modal-content .hero-select-preview .hi-title,
            .setup-modal-content .hero-select-preview .hi-sub {
                font-size: 0.66em !important;
                line-height: 1.35 !important;
            }

            .setup-modal-content .hero-select-preview strong {
                font-size: 0.92em !important;
            }

            .setup-modal-content .hero-select-selected > div[onclick],
            .setup-modal-content .hero-select-selected > div[onclick] > div {
                min-height: 32px;
            }

            .setup-modal-content .hero-select-selected span {
                font-size: 0.68em !important;
            }

            .setup-modal-content .mp-section-label,
            .setup-modal-content .setup-subsection-label {
                font-size: 0.62em;
                margin-bottom: 4px;
            }

            #setup-modal .setup-modal-content .parchment-zoned > .parchment-body,
            #mp-hero-select-modal .setup-modal-content .parchment-zoned > .parchment-body {
                display: flex;
                overflow: hidden !important;
                padding: 5px 3px;
            }

            #setup-modal > .setup-modal-content,
            #mp-hero-select-modal > .setup-modal-content {
                width: calc(100vw - 16px) !important;
                max-width: calc(100vw - 16px) !important;
                height: calc((100dvh - 16px) * 1.25) !important;
                min-height: 0 !important;
                max-height: calc((100dvh - 16px) * 1.25) !important;
            }

            #setup-modal > .setup-modal-content:has(#hero-select-content),
            #hero-death-modal > .setup-modal-content:has(#hero-death-content),
            #mp-hero-select-modal > .setup-modal-content:has(#mp-hero-select-content) {
                height: calc((100dvh - 16px) * 1.25) !important;
                min-height: 0 !important;
            }

            #setup-modal > .setup-modal-content:has(#hero-select-content) #hero-select-content,
            #hero-death-modal > .setup-modal-content:has(#hero-death-content) #hero-death-content,
            #mp-hero-select-modal > .setup-modal-content:has(#mp-hero-select-content) #mp-hero-select-content,
            #setup-modal > .setup-modal-content:has(#hero-select-content) .parchment-zoned,
            #hero-death-modal > .setup-modal-content:has(#hero-death-content) .parchment-box,
            #mp-hero-select-modal > .setup-modal-content:has(#mp-hero-select-content) .parchment-zoned {
                height: 100%;
                min-height: 0;
                flex: 1 1 auto;
            }

            #setup-modal .hero-select-side-rail,
            #mp-hero-select-modal .hero-select-side-rail {
                --hero-select-pill-w: 132px;
                --hero-select-pill-h: 29px;
                --hero-select-selected-h: 90px;
                grid-template-columns: minmax(272px, 39%) minmax(0, 1fr);
                gap: 5px;
                height: 100%;
            }

            .hero-modal-pill-row {
                --hero-select-pill-w: 132px;
                --hero-select-pill-h: 29px;
            }

            .dwarven-rum-hero-list {
                --hero-select-pill-w: 214px;
                --hero-select-pill-h: 42px;
                max-height: none;
                padding-right: 0;
            }

            #setup-modal .hero-select-side-rail:has(.hero-select-slot:nth-child(n+5)),
            #mp-hero-select-modal .hero-select-side-rail:has(.hero-select-slot:nth-child(n+5)) {
                --hero-select-selected-h: 90px;
            }

            #setup-modal .hero-select-right,
            #mp-hero-select-modal .hero-select-right {
                grid-template-rows: minmax(0, 1fr) var(--hero-select-selected-h);
                gap: 5px;
                height: 100%;
            }

            #setup-modal .parchment-zoned,
            #mp-hero-select-modal .parchment-zoned {
                height: 100%;
                max-height: 100%;
                min-height: 0;
            }

            #setup-modal .parchment-footer,
            #mp-hero-select-modal .parchment-footer {
                padding: 5px 8px !important;
            }

            #setup-modal .parchment-footer > :is(.modal-parchment-button, button),
            #mp-hero-select-modal .parchment-footer > :is(.modal-parchment-button, button) {
                min-height: 30px !important;
                height: 30px !important;
                padding: 4px 9px !important;
            }

            #setup-modal .hero-select-frame-title,
            #mp-hero-select-modal .hero-select-frame-title {
                min-height: 22px;
                padding: 3px 6px;
                font-size: 0.52em;
                letter-spacing: 0.7px;
            }

            #setup-modal .hero-select-preview-frame,
            #mp-hero-select-modal .hero-select-preview-frame {
                height: 100%;
                min-height: 0;
                align-self: stretch;
            }

            #setup-modal .hero-select-available-frame,
            #setup-modal .hero-select-selected-frame,
            #mp-hero-select-modal .hero-select-available-frame,
            #mp-hero-select-modal .hero-select-selected-frame {
                grid-template-rows: 22px minmax(0, 1fr);
            }

            #setup-modal .hero-select-available-frame,
            #mp-hero-select-modal .hero-select-available-frame {
                height: 100%;
            }

            #setup-modal .hero-select-preview-scroll,
            #mp-hero-select-modal .hero-select-preview-scroll {
                overflow-y: auto;
            }

            #setup-modal .hero-select-available-grid,
            #setup-modal .hero-select-slot-grid,
            #mp-hero-select-modal .hero-select-available-grid,
            #mp-hero-select-modal .hero-select-slot-grid {
                padding: 2px;
                gap: 3px;
            }

            #setup-modal .hero-select-available-grid,
            #mp-hero-select-modal .hero-select-available-grid {
                height: 100%;
                max-height: 100%;
                overflow-y: scroll;
                scrollbar-gutter: stable;
            }

            #setup-modal .hero-select-selected-frame:has(.hero-select-slot:nth-child(n+5)) .hero-select-slot-grid,
            #mp-hero-select-modal .hero-select-selected-frame:has(.hero-select-slot:nth-child(n+5)) .hero-select-slot-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            #setup-modal .hero-select-card-banner,
            #mp-hero-select-modal .hero-select-card-banner {
                min-height: 34px;
                padding-right: 8px;
            }

            #setup-modal .hero-select-card-name,
            #mp-hero-select-modal .hero-select-card-name {
                height: 34px;
                font-size: 0.82em;
            }

            #setup-modal .hero-select-card-life,
            #mp-hero-select-modal .hero-select-card-life {
                --hero-banner-token-size: 34px;
            }

            #setup-modal .hero-select-card-body,
            #mp-hero-select-modal .hero-select-card-body {
                padding: 5px 8px;
            }

            #setup-modal .hero-select-card-body .hero-ability-text,
            #setup-modal .hero-select-card-body .hi-cont,
            #setup-modal .hero-select-card-body .hi-title,
            #setup-modal .hero-select-card-body .hi-sub,
            #mp-hero-select-modal .hero-select-card-body .hero-ability-text,
            #mp-hero-select-modal .hero-select-card-body .hi-cont,
            #mp-hero-select-modal .hero-select-card-body .hi-title,
            #mp-hero-select-modal .hero-select-card-body .hi-sub {
                font-size: 0.8em !important;
                line-height: 1.45 !important;
            }

            #setup-modal .hero-select-pill,
            #setup-modal .hero-select-slot,
            #mp-hero-select-modal .hero-select-pill,
            #mp-hero-select-modal .hero-select-slot,
            .hero-modal-pill-row .hero-select-pill {
                gap: 6px;
                padding-right: 7px;
            }

            #setup-modal .hero-select-pill-label,
            #mp-hero-select-modal .hero-select-pill-label,
            .hero-modal-pill-row .hero-select-pill-label {
                font-size: 0.68rem !important;
            }

            #setup-modal .hero-select-pill.name-long .hero-select-pill-label,
            #setup-modal .hero-select-slot.name-long .hero-select-pill-label,
            #mp-hero-select-modal .hero-select-pill.name-long .hero-select-pill-label,
            #mp-hero-select-modal .hero-select-slot.name-long .hero-select-pill-label,
            .hero-modal-pill-row .hero-select-pill.name-long .hero-select-pill-label {
                font-size: 0.6rem !important;
            }

            #setup-modal .hero-select-pill.name-extra-long .hero-select-pill-label,
            #setup-modal .hero-select-slot.name-extra-long .hero-select-pill-label,
            #mp-hero-select-modal .hero-select-pill.name-extra-long .hero-select-pill-label,
            #mp-hero-select-modal .hero-select-slot.name-extra-long .hero-select-pill-label,
            .hero-modal-pill-row .hero-select-pill.name-extra-long .hero-select-pill-label {
                font-size: 0.55rem !important;
                letter-spacing: 0;
            }

            #setup-modal .hero-select-pill.cap-overlap,
            #setup-modal .hero-select-slot.cap-overlap,
            #mp-hero-select-modal .hero-select-pill.cap-overlap,
            #mp-hero-select-modal .hero-select-slot.cap-overlap,
            .hero-modal-pill-row .hero-select-pill.cap-overlap {
                padding-left: 0;
            }

            #setup-modal .hero-select-pill.cap-overlap .hero-select-pill-cap,
            #setup-modal .hero-select-slot.cap-overlap .hero-select-pill-cap,
            #mp-hero-select-modal .hero-select-pill.cap-overlap .hero-select-pill-cap,
            #mp-hero-select-modal .hero-select-slot.cap-overlap .hero-select-pill-cap,
            .hero-modal-pill-row .hero-select-pill.cap-overlap .hero-select-pill-cap {
                margin-right: 0;
            }

            #setup-modal .hero-select-pill.cap-overlap .hero-select-pill-label,
            #setup-modal .hero-select-slot.cap-overlap .hero-select-pill-label,
            #mp-hero-select-modal .hero-select-pill.cap-overlap .hero-select-pill-label,
            #mp-hero-select-modal .hero-select-slot.cap-overlap .hero-select-pill-label,
            .hero-modal-pill-row .hero-select-pill.cap-overlap .hero-select-pill-label {
                font-size: 0.44rem !important;
                line-height: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            #setup-modal .hero-select-slot.is-empty,
            #setup-modal .hero-select-slot.can-add,
            #mp-hero-select-modal .hero-select-slot.is-empty,
            #mp-hero-select-modal .hero-select-slot.can-add {
                font-size: 0.54em;
            }
        }

        .parchment-body::-webkit-scrollbar,
        .modal-content::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .parchment-body::-webkit-scrollbar-track,
        .modal-content::-webkit-scrollbar-track {
            background: rgba(139,115,85,0.12);
            border-radius: 3px;
        }
        .parchment-body::-webkit-scrollbar-thumb,
        .modal-content::-webkit-scrollbar-thumb {
            background: #8b7355;
            border-radius: 3px;
        }
        .parchment-body::-webkit-scrollbar-thumb:hover,
        .modal-content::-webkit-scrollbar-thumb:hover {
            background: #5c3d2e;
        }
        .parchment-body,
        .modal-content {
            scrollbar-width: thin;
            scrollbar-color: #8b7355 rgba(139,115,85,0.12);
        }

        /* ── 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: #16a34a;
          background: rgba(22,163,74,0.16);
          box-shadow: 0 0 8px rgba(22,163,74,0.45);
        }

        /* 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; }
        .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 {
          opacity: 0.4;
        }
        .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;
          flex: 0 0 auto;
        }
        .modal-minion-dot {
          display: inline-flex; align-items: center; justify-content: center;
          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);
          flex: 0 0 auto;
        }
        .modal-token--fill {
          align-self: stretch;
          height: 100%;
          width: auto;
          max-height: none;
          min-height: 0;
          aspect-ratio: 1 / 1;
          border: 0;
          box-shadow: none;
          background: transparent;
          overflow: visible;
        }
        .enemy-icon-img {
          object-fit: contain;
          display: inline-block;
          vertical-align: middle;
          filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
        }
        .enemy-icon-img--fill {
          align-self: stretch;
          flex: 0 0 auto;
          max-height: none;
          min-height: 0;
          aspect-ratio: 1 / 1;
          object-fit: contain;
        }

        .general-card-banner {
          min-height: 40px;
          padding: 0 14px 0 0;
          border-bottom: 2px solid #8b7355;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          overflow: hidden;
        }

        .general-banner-name {
          display: flex;
          align-items: center;
          gap: 6px;
          height: 40px;
          min-width: 0;
          font-size: 0.9em;
        }

        .general-banner-name > span:last-child,
        .map-general-tracker-badge > span:last-child {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .general-selector-row {
          display: flex;
          gap: 6px;
          flex-wrap: wrap;
          justify-content: center;
          margin-top: 10px;
        }

        .general-selector-btn {
          padding: 0 10px 0 0;
          min-height: 34px;
          border-radius: 6px;
          font-size: 0.75em;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          overflow: hidden;
          flex: 0 1 auto;
        }

        .general-pill-row {
          --general-select-pill-h: 42px;
          display: grid;
          grid-auto-rows: var(--general-select-pill-h);
          gap: 8px;
          justify-content: center;
          align-content: start;
          margin-top: 12px;
        }

        .general-select-pill {
          position: relative;
          height: var(--general-select-pill-h);
          min-width: 0;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 0 12px 0 0;
          border: 2px solid rgba(82, 49, 30, 0.42);
          border-radius: 999px;
          overflow: hidden;
          color: #fff;
          background:
            linear-gradient(180deg, rgba(255,255,255,0.14), transparent 42%),
            linear-gradient(135deg, var(--general-color, #5c3d2e), var(--general-color, #5c3d2e));
          box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
          cursor: pointer;
          font-family: 'Cinzel', Georgia, serif;
          font-weight: 900;
          font-size: 0.8em;
          line-height: 1;
          text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5);
          white-space: nowrap;
        }

        .general-select-pill.is-active {
          border-color: #2c1810;
          box-shadow:
            0 0 0 2px #d64a3a,
            0 0 10px rgba(214, 74, 58, 0.72),
            0 2px 6px rgba(0,0,0,0.4);
        }

        .general-select-pill.is-defeated {
          opacity: 0.5;
          filter: saturate(0.85);
        }

        .general-select-pill-cap {
          align-self: stretch;
          flex: 0 0 auto;
          height: 100%;
          aspect-ratio: 1 / 1;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          overflow: visible;
        }

        .general-select-pill-cap > * {
          height: 100% !important;
          max-height: 100% !important;
          width: auto !important;
          max-width: none !important;
          flex: 0 0 auto;
          margin-left: 0 !important;
        }

        .general-select-pill-label {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .minion-select-pill-list {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 7px;
          max-height: 240px;
          overflow-y: auto;
          padding-right: 3px;
        }

        .minion-location-header {
          margin: 8px 0 6px;
          font-family: 'Cinzel', Georgia, serif;
          font-weight: 900;
          font-size: 0.82em;
          color: #3d2b1f;
          text-align: left;
        }

        .minion-select-pill-wrap {
          display: grid;
          grid-template-columns: 148px 20px;
          align-items: center;
          gap: 8px;
          width: 176px;
          max-width: 100%;
          min-height: 38px;
          cursor: pointer;
          transition: opacity 0.15s ease;
        }

        .minion-select-pill-wrap.is-disabled {
          cursor: default;
          opacity: 0.4;
        }

        .minion-select-pill {
          position: relative;
          flex: 1 1 100%;
          min-width: 0;
          height: 38px;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 0 10px 0 0;
          border: 2px solid rgba(82, 49, 30, 0.42);
          border-radius: 999px;
          overflow: hidden;
          color: #fff;
          background:
            linear-gradient(180deg, rgba(255,255,255,0.14), transparent 42%),
            linear-gradient(135deg, var(--minion-color, #5c3d2e), var(--minion-color, #5c3d2e));
          box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
          font-family: 'Cinzel', Georgia, serif;
          font-weight: 900;
          font-size: 0.82em;
          line-height: 1;
          text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5);
          white-space: nowrap;
          transition: box-shadow 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
        }

        .minion-select-pill.is-active,
        .minion-select-pill-wrap.is-active .minion-select-pill {
          border-color: #0f7a32;
          box-shadow:
            0 0 0 2px #16a34a,
            0 0 10px rgba(22,163,74,0.7),
            0 2px 6px rgba(0,0,0,0.4);
        }

        .minion-select-pill-cap {
          align-self: stretch;
          flex: 0 0 auto;
          height: 100%;
          aspect-ratio: 1 / 1;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          overflow: visible;
        }

        .minion-select-pill-cap > * {
          height: 100% !important;
          max-height: 100% !important;
          width: auto !important;
          max-width: none !important;
          flex: 0 0 auto;
          margin-left: 0 !important;
          margin-right: 0 !important;
        }

        .minion-select-pill-label {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .minion-select-check {
          width: 20px;
          height: 20px;
          display: inline-grid;
          place-content: center;
          border: 1.5px solid #8b7355;
          border-radius: 50%;
          background: #fffaf0 !important;
          color: transparent;
          font-size: 0;
          line-height: 1;
          box-shadow: inset 0 1px 2px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.18);
          pointer-events: none;
        }

        .minion-select-pill-wrap.is-active .minion-select-check,
        .minion-select-pill.is-active + .minion-select-check {
          background: var(--minion-check-bg, #16a34a) !important;
          border-color: #0f7a32 !important;
        }

        .minion-select-pill-wrap.is-active .minion-select-check::after,
        .minion-select-pill.is-active + .minion-select-check::after {
          content: "";
          width: 9px;
          height: 5px;
          border-left: 2px solid #fff;
          border-bottom: 2px solid #fff;
          transform: rotate(-45deg) translateY(-1px);
        }

        .shapeshift-option-list {
          --shapeshift-pill-w: var(--hero-select-pill-w, 214px);
          display: flex;
          flex-direction: column;
          gap: 7px;
          align-items: center;
        }

        .shapeshift-option-row {
          position: relative;
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          align-items: center;
          gap: 0;
          width: calc(var(--shapeshift-pill-w) + 28px);
          max-width: 100%;
          padding-right: 28px;
          box-sizing: border-box;
          cursor: pointer;
          border-radius: 8px;
        }

        .shapeshift-option-row:focus-visible {
          outline: 2px solid #16a34a;
          outline-offset: 2px;
        }

        .shapeshift-option-row .shapeshift-option-pill,
        .shapeshift-option-row .minion-select-pill-wrap {
          width: 100%;
          min-width: 0;
          flex: 1 1 auto;
        }

        .shapeshift-option-row .minion-select-pill,
        .shapeshift-option-row .hero-select-pill {
          width: 100%;
          min-width: 0;
        }

        .shapeshift-option-row .minion-select-pill.is-active,
        .shapeshift-option-row .minion-select-pill-wrap.is-active .minion-select-pill {
          border-color: #0f7a32;
          box-shadow:
            0 0 0 2px #16a34a,
            0 0 10px rgba(22,163,74,0.7),
            0 2px 6px rgba(0,0,0,0.4);
        }

        .shapeshift-option-row .hero-select-pill {
          position: relative;
          height: var(--hero-select-pill-h);
          min-width: 0;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 0 10px 0 0;
          border: 2px solid rgba(82, 49, 30, 0.42);
          border-radius: 999px;
          overflow: hidden;
          background: linear-gradient(135deg, var(--hero-color, #5c3d2e), var(--hero-color, #5c3d2e));
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
          cursor: pointer;
          --hero-select-pill-h: 38px;
        }

        .shapeshift-option-row .hero-select-pill.is-active,
        .shapeshift-option-row .hero-select-pill.is-selected {
          border-color: #0f7a32;
          box-shadow:
            0 0 0 2px #16a34a,
            0 0 10px rgba(22,163,74,0.7),
            0 2px 6px rgba(0,0,0,0.4);
        }

        .shapeshift-option-row .hero-select-pill-cap {
          align-self: stretch;
          flex: 0 0 auto;
          height: 100%;
          aspect-ratio: 1 / 1;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          overflow: visible;
        }

        .shapeshift-option-row .hero-select-pill-cap > * {
          height: 100% !important;
          max-height: 100% !important;
          width: auto !important;
          max-width: none !important;
          flex: 0 0 auto;
        }

        .shapeshift-option-row .hero-select-pill-label {
          min-width: 0;
          flex: 1 1 auto;
          color: #fff;
          font-family: 'Cinzel', Georgia, serif;
          font-size: 0.82em;
          font-weight: 900;
          line-height: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
        }

        .shapeshift-option-check {
          position: absolute;
          right: 0;
          top: 50%;
          width: 20px;
          height: 20px;
          margin: 0;
          appearance: none;
          display: inline-grid;
          place-content: center;
          border: 1.5px solid #8b7355;
          border-radius: 50%;
          background: #fffaf0;
          box-shadow: inset 0 1px 2px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.18);
          cursor: pointer;
          pointer-events: none;
          transform: translateY(-50%);
        }

        .shapeshift-option-check:checked {
          background: #16a34a;
          border-color: #0f7a32;
        }

        .shapeshift-option-check:checked::after {
          content: "";
          width: 9px;
          height: 5px;
          border-left: 2px solid #fff;
          border-bottom: 2px solid #fff;
          transform: rotate(-45deg) translateY(-1px);
        }

        .rumors-modal-body,
        .crafty-modal-body {
          padding: 12px 12px 0;
        }

        .rumors-color-option-list {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 7px;
          margin: 10px 0 4px;
        }

        .rumors-color-option-row {
          position: relative;
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          align-items: center;
          gap: 0;
          width: 242px;
          max-width: 100%;
          padding-right: 28px;
          box-sizing: border-box;
          cursor: pointer;
          border-radius: 8px;
        }

        .rumors-color-option-row:focus-visible {
          outline: 2px solid #16a34a;
          outline-offset: 2px;
        }

        .rumors-color-pill {
          height: 38px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 18px;
          border: 2px solid rgba(82,49,30,0.42);
          border-radius: 999px;
          color: #fff;
          background:
            linear-gradient(180deg, rgba(255,255,255,0.14), transparent 42%),
            linear-gradient(135deg, var(--rumors-color, #5c3d2e), var(--rumors-color, #5c3d2e));
          box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
          transition: box-shadow 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
        }

        .rumors-color-option-row:hover .rumors-color-pill {
          filter: brightness(1.08);
        }

        .rumors-color-pill.is-active,
        .rumors-color-option-row.is-active .rumors-color-pill {
          border-color: #0f7a32;
          box-shadow:
            0 0 0 2px #16a34a,
            0 0 10px rgba(22,163,74,0.7),
            0 2px 6px rgba(0,0,0,0.4);
        }

        .rumors-color-pill-label {
          font-family: 'Cinzel', Georgia, serif;
          font-weight: 900;
          font-size: 0.82em;
          line-height: 1;
          text-transform: uppercase;
          text-shadow: 0 2px 4px rgba(0,0,0,0.9);
          white-space: nowrap;
        }

        .rumors-color-check {
          position: absolute;
          right: 0;
          top: 50%;
          width: 20px;
          height: 20px;
          margin: 0;
          appearance: none;
          display: inline-grid;
          place-content: center;
          border: 1.5px solid #8b7355;
          border-radius: 50%;
          background: #fffaf0;
          box-shadow: inset 0 1px 2px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.18);
          pointer-events: none;
          transform: translateY(-50%);
        }

        .rumors-color-check:checked {
          background: #16a34a;
          border-color: #0f7a32;
        }

        .rumors-color-check:checked::after {
          content: "";
          width: 9px;
          height: 5px;
          border-left: 2px solid #fff;
          border-bottom: 2px solid #fff;
          transform: rotate(-45deg) translateY(-1px);
        }

        .rumors-modal-footer,
        .crafty-modal-footer {
          justify-content: center;
          flex-wrap: nowrap;
          padding: 12px 0 0;
          border-top: 1px solid rgba(139,115,85,0.35);
          margin: 12px 0 0;
        }

        .rumors-modal-footer > button,
        .crafty-modal-footer > button {
          flex: 0 0 140px;
          min-width: 0;
        }

        .shapeshift-status-token {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          line-height: 1;
          vertical-align: middle;
          flex: 0 0 auto;
        }

        .shapeshift-status-token .modal-minion-dot,
        .shapeshift-status-token .enemy-icon-img--fill {
          display: block;
        }

        .map-player-status-effects .shapeshift-status-token {
          width: var(--map-player-plaque-h, 36px);
          height: var(--map-player-plaque-h, 36px);
          max-width: var(--map-player-plaque-h, 36px);
          max-height: var(--map-player-plaque-h, 36px);
          overflow: hidden;
        }

        .map-player-status-effects .shapeshift-status-token .modal-minion-dot,
        .map-player-status-effects .shapeshift-status-token .enemy-icon-img--fill {
          width: auto !important;
          max-width: 100% !important;
          height: 100% !important;
          max-height: 100% !important;
        }

        #info-modal:has(.view-generals-modal) {
          padding: 6px 58px 6px 96px;
        }

        #info-modal:has(.view-generals-modal) > .modal-content-parchment {
          width: min(74vw, 720px);
          max-width: calc(100vw - 180px);
        }

        .view-generals-modal .parchment-body {
          padding: 10px 12px;
        }

        .view-generals-card {
          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.18);
        }

        .view-generals-card .general-card-banner {
          min-height: 48px;
          padding-right: 16px;
        }

        .view-generals-card .general-banner-name {
          height: 48px;
          font-size: 1.05em;
        }

        .view-generals-card-body {
          padding: 14px 18px 16px;
        }

        .view-generals-life-tracker {
          margin-top: 10px;
          padding-top: 10px;
        }

        .view-generals-life-tracker .lt-hit-req {
          font-size: 0.82em;
          margin-bottom: 7px;
        }

        .view-generals-life-tracker .life-tracker {
          justify-content: center;
          gap: 6px;
        }

        .view-generals-life-tracker .lt-box {
          width: 40px;
          height: 40px;
          border-radius: 5px;
          font-size: 1.18em;
        }

        .view-generals-life-tracker .lt-marker {
          width: 36px;
          height: 36px;
        }

        .view-generals-selector-row {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          justify-content: stretch;
        }

        .view-generals-selector-pill {
          width: 100%;
        }

        .map-general-tracker-badge .modal-token--fill,
        .general-selector-btn .modal-token--fill,
        .general-banner-name .modal-token--fill {
          margin-left: 0;
        }

        /* ── 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(37,99,235,0.06); border: 1px solid rgba(37,99,235,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: #2563eb; }
        .sl .left.cr { color: #dc2626; } .sl .left.ck { color: #1f2937; }
        .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 #16a34a; outline-offset: 1px;
          box-shadow: 0 0 12px rgba(22,163,74,0.65), 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; }

        .parchment-yellow-text-outline {
          text-shadow:
            -1px -1px 0 #1a0f0a,
             1px -1px 0 #1a0f0a,
            -1px  1px 0 #1a0f0a,
             1px  1px 0 #1a0f0a,
             0 2px 3px rgba(0,0,0,0.65);
        }

        /* ── 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 ── */
        #splash-screen {
            position: fixed; inset: 0; z-index: 99999;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            background: #000;
            width: 100vw; width: 100dvw;
            height: 100vh; height: 100dvh;
            overflow: hidden;
            transition: opacity 1.2s ease, visibility 1.2s ease;
        }
        #splash-screen.fade-out { opacity: 0; visibility: hidden; }

        #splash-screen::before {
            content: '';
            position: absolute; inset: 0;
            background: #000;
            z-index: 0;
        }

        #splash-screen .publisher-splash-stage,
        #splash-screen .realm-splash-stage {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            overflow: hidden;
        }

        #splash-screen .publisher-splash-stage {
            z-index: 2;
            display: flex; align-items: center; justify-content: center;
            background: #000;
            opacity: 1;
            transition: opacity 1.35s ease, filter 1.35s ease, visibility 1.35s ease;
        }

        #splash-screen .publisher-splash-stage::after {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse at 50% 47%, rgba(154, 206, 232, 0.11) 0%, rgba(74, 122, 152, 0.06) 31%, transparent 56%),
                linear-gradient(110deg, transparent 0 36%, rgba(212, 238, 252, 0.04) 47%, transparent 62%);
            mix-blend-mode: screen;
            opacity: 0.52;
            pointer-events: none;
            z-index: 6;
        }

        #splash-screen.realm-active .publisher-splash-stage {
            opacity: 0;
            filter: blur(10px) brightness(0.45);
            visibility: hidden;
        }

        #splash-screen .publisher-frost-haze {
            position: absolute; inset: -16%;
            background:
                linear-gradient(110deg, transparent 0 34%, rgba(180, 220, 245, 0.1) 42%, transparent 54%),
                linear-gradient(68deg, transparent 0 45%, rgba(220, 245, 255, 0.08) 52%, transparent 64%);
            opacity: 0.9;
            filter: blur(10px);
            mix-blend-mode: screen;
            pointer-events: none;
            z-index: 5;
            animation: publisherBlizzardSweep 3.2s ease-in-out infinite;
        }

        @keyframes publisherBlizzardSweep {
            0%   { transform: translate3d(-7%, 3%, 0) rotate(-4deg); opacity: 0.52; }
            50%  { transform: translate3d(7%, -2%, 0) rotate(-2deg); opacity: 0.95; }
            100% { transform: translate3d(15%, -4%, 0) rotate(-4deg); opacity: 0.58; }
        }

        #splash-screen .publisher-logo {
            position: relative; z-index: 3;
            width: min(72vw, 620px);
            max-height: min(76dvh, 620px);
            object-fit: contain;
            opacity: 0;
            filter: drop-shadow(0 0 22px rgba(172, 216, 242, 0.14)) brightness(0.86);
            animation: publisherLogoReveal 3.55s ease forwards;
        }

        @keyframes publisherLogoReveal {
            0%   { opacity: 0; transform: scale(0.88); filter: blur(8px) brightness(0.35); }
            22%  { opacity: 1; transform: scale(0.98); filter: blur(0) brightness(0.95); }
            72%  { opacity: 1; transform: scale(1); filter: blur(0) brightness(1.08); }
            100% { opacity: 0; transform: scale(1.035); filter: blur(6px) brightness(0.55); }
        }

        #splash-screen .realm-splash-stage {
            z-index: 1;
            display: none; flex-direction: column; align-items: center; justify-content: center;
        }

        #splash-screen.realm-active .realm-splash-stage {
            display: flex;
        }

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

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

        #splash-screen .splash-image-wrapper {
            position: relative; z-index: 3;
            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: 'Cinzel', Georgia, serif; font-size: 11px; font-weight: 700;
            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: 3;
            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: 'Cinzel', Georgia, serif; font-size: 13px; font-weight: 700;
            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', Georgia, serif; font-size: 18px; font-weight: 900;
            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 MODAL DESCRIPTION TEXT
           One reusable treatment for descriptive modal copy. This mirrors the
           readable quest-card body tone and catches older inline Comic Sans
           description fragments without changing desktop typography. */
        @media (orientation: portrait) and (max-width: 900px) {
            #splash-screen {
                inset: 0;
                width: 100vw; width: 100dvw;
                height: 100vh; height: 100dvh;
                transform: none;
                overflow: hidden;
            }

            #splash-screen .splash-image-wrapper {
                width: min(96vw, calc(100dvw - 20px), 760px);
                max-height: calc(100dvh - 132px);
            }

            #splash-screen .splash-bottom {
                margin-top: 12px;
            }

            #splash-screen .start-btn {
                padding: 8px 22px;
                font-size: 12px;
                min-height: 34px;
            }
        }

        @media (max-width: 768px) {
            :root {
                --mobile-modal-description-font: Georgia, 'Times New Roman', serif;
                --mobile-modal-description-size: 0.82rem;
                --mobile-modal-description-line: 1.48;
            }

            .modal-desc-text,
            .mobile-modal-description,
            .deck-stat-label,
            .g-hi-title,
            .war-advance-text,
            .g-section-text,
            .intervene-btn .iv-desc,
            .flavor-text,
            .modal.active .mp-loading-placeholder,
            .modal.active .mp-confirm-message,
            .modal.active .game-log-entry,
            .modal.active .game-log-empty,
            .modal.active .parchment-body [style*="Comic Sans"],
            .modal.active .parchment-footer [style*="Comic Sans"],
            .modal.active .modal-content-parchment [style*="Comic Sans"] {
                font-family: var(--mobile-modal-description-font) !important;
                font-size: var(--mobile-modal-description-size) !important;
                line-height: var(--mobile-modal-description-line) !important;
                letter-spacing: 0 !important;
                font-style: normal !important;
                font-weight: 400 !important;
            }

            .modal.active .modal-desc-text strong,
            .modal.active .mobile-modal-description strong,
            .modal.active .parchment-body [style*="Comic Sans"] strong,
            .modal.active .modal-content-parchment [style*="Comic Sans"] strong {
                font-family: 'Cinzel', Georgia, serif !important;
                font-weight: 900 !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;
            }
        }

/* ── Parchment modal buttons — hover / active states ── */
/* Shared parchment modal button backing classes. These mirror the current
   inline dark-brown modal button style so renderers can migrate one family at a
   time without visual changes. */
.modal-parchment-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 6px;
    background: linear-gradient(135deg,#5c3d2e,#4a2f20);
    border: 2px solid #8b7355;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 900;
    font-size: 0.88em;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5);
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    line-height: 1.1;
}

.modal-parchment-button--no-margin {
    margin-top: 0;
}

.modal-parchment-button--top-gap {
    margin-top: 12px;
}

.modal-parchment-button--compact {
    margin-top: 0;
}

.modal-parchment-button--inline {
    display: inline-block;
    width: auto;
    padding: 9px 16px;
}

.modal-parchment-button--single-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
}

.modal-parchment-button-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.05;
}

.modal-parchment-button-primary {
    display: block;
}

.modal-parchment-button-detail {
    display: block;
    font-size: 0.72em;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.modal-parchment-button-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-parchment-button-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.modal-parchment-action-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 12px;
}

.modal-parchment-action-row > :is(.modal-parchment-button, button) {
    flex: 0 1 168px;
    width: auto;
    min-width: 118px;
    max-width: 208px;
    min-height: 36px;
    margin-top: 0;
    padding: 7px 12px;
    white-space: nowrap;
}

.modal-parchment-button-row > button {
    flex: 1 1 0;
    width: auto;
    margin-top: 0;
}

.modal-parchment-button-row > .modal-parchment-button {
    flex: 1 1 0;
    width: auto;
    margin-top: 0;
}

.build-gate-modal-footer {
    justify-content: center;
    flex-wrap: nowrap;
    padding: 12px 0 0;
    border-top: 1px solid rgba(139,115,85,0.35);
    margin: 12px 0 0;
}

.build-gate-modal-footer > button {
    flex: 0 0 140px;
    min-width: 0;
}

#support-modal .support-modal-button-row {
    width: 100%;
    flex: 1 1 100%;
    flex-wrap: nowrap;
}

#support-modal .support-modal-button-row > .modal-parchment-button {
    flex: 0 1 168px;
    min-width: 132px;
    max-width: 184px;
}

.modal--reference-ui .parchment-footer,
.modal--reference-ui .modal-parchment-button-stack,
.modal--reference-ui .modal-parchment-button-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.modal--reference-ui .modal-parchment-button-stack {
    flex: 0 0 auto;
    width: min(100%, 296px);
}

.modal--reference-ui .parchment-footer > .modal-parchment-button,
.modal--reference-ui .parchment-footer > button,
.modal--reference-ui .modal-parchment-button-stack > .modal-parchment-button,
.modal--reference-ui .modal-parchment-button-stack > button,
.modal--reference-ui .modal-parchment-button-row > .modal-parchment-button,
.modal--reference-ui .modal-parchment-button-row > button {
    flex: 0 1 144px;
    width: auto;
    min-width: 118px;
    max-width: 190px;
    min-height: 36px;
    margin-top: 0;
    padding: 7px 12px;
    white-space: nowrap;
}

:is(
    #game-setup-modal,
    #setup-modal,
    #mp-setup-modal,
    #mp-hero-select-modal,
    #mp-name-modal,
    #mp-invite-modal,
    #mp-lobby-modal,
    #mp-hero-wait-modal,
    #mp-alerts-modal,
    #mp-load-modal,
    #mp-progress-modal
) .parchment-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

:is(
    #game-setup-modal,
    #setup-modal,
    #mp-setup-modal,
    #mp-hero-select-modal,
    #mp-name-modal,
    #mp-invite-modal,
    #mp-lobby-modal,
    #mp-hero-wait-modal,
    #mp-alerts-modal,
    #mp-load-modal,
    #mp-progress-modal
) .parchment-footer > :is(.modal-parchment-button, button) {
    flex: 0 1 208px;
    width: auto;
    min-width: 170px;
    max-width: 232px;
    min-height: 38px;
    margin-top: 0;
    padding: 7px 12px;
    white-space: nowrap;
}

:is(
    #friends-modal,
    #guild-modal,
    #auth-modal,
    #forgot-modal,
    #verify-gate-modal,
    #info-modal,
    #victory-modal,
    #game-over-modal,
    #eagle-attack-style-modal,
    #shapeshift-modal
) .parchment-footer,
:is(
    #friends-modal,
    #guild-modal,
    #auth-modal,
    #forgot-modal,
    #verify-gate-modal,
    #info-modal,
    #victory-modal,
    #game-over-modal,
    #eagle-attack-style-modal,
    #shapeshift-modal
) .parchment-footer > :is(.modal-parchment-button-stack, .modal-parchment-button-row, div) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

:is(
    #friends-modal,
    #guild-modal,
    #auth-modal,
    #forgot-modal,
    #verify-gate-modal,
    #info-modal
) .parchment-footer > .modal-parchment-button-row {
    flex: 1 1 100% !important;
    width: 100% !important;
}

:is(
    #friends-modal,
    #guild-modal,
    #auth-modal,
    #forgot-modal,
    #verify-gate-modal,
    #info-modal,
    #victory-modal,
    #game-over-modal,
    #eagle-attack-style-modal,
    #shapeshift-modal
) .parchment-footer :is(.modal-parchment-button, button) {
    flex: 0 1 168px !important;
    width: auto !important;
    min-width: 118px !important;
    max-width: 208px !important;
    min-height: 36px !important;
    margin-top: 0 !important;
    padding: 7px 12px !important;
    white-space: nowrap !important;
}

:is(
    #info-modal,
    #victory-modal,
    #game-over-modal,
    #location-actions-modal,
    #hero-death-modal,
    #retreat-modal,
    #card-modal,
    #group-penalty-modal,
    #darkness-modal,
    #card-discard-modal,
    #rumors-modal,
    #movement-card-modal,
    #destination-modal
) .parchment-box > :is(.modal-parchment-button, button):not(.modal-interrupt-button) {
    display: block !important;
    width: auto !important;
    min-width: 118px !important;
    max-width: 208px !important;
    min-height: 36px !important;
    margin: 12px auto 0 !important;
    padding: 7px 12px !important;
    white-space: nowrap !important;
}

.movement-destination-option-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
}

.movement-destination-option-grid > .movement-destination-option {
    flex: 0 1 220px;
    width: auto;
    min-width: 160px;
    max-width: 260px;
    margin-top: 0;
    white-space: normal;
}

#wizard-teleport-modal .modal-content > div:last-child {
    justify-content: center !important;
    flex-wrap: wrap !important;
}

#wizard-teleport-modal .modal-content > div:last-child > button {
    flex: 0 1 168px !important;
    width: auto !important;
    min-width: 118px !important;
    max-width: 208px !important;
    min-height: 36px !important;
    margin-top: 0 !important;
    padding: 7px 12px !important;
    white-space: nowrap !important;
}

.modal-parchment-action-button {
    padding: 5px 11px;
    border-radius: 5px;
    background: linear-gradient(135deg,#5c3d2ecc,#4a2f20cc);
    border: 1.5px solid #8b7355;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 0.68em;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    cursor: pointer;
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1.1;
}

.location-action-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 6px;
    background: linear-gradient(135deg,#5c3d2e,#4a2f20);
    border: 2px solid #8b7355;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 900;
    font-size: 0.85em;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
}

.location-popup-action-button {
    display: block;
    width: 100%;
    padding: 7px 10px;
    margin-bottom: 6px;
    background: linear-gradient(135deg,#5c3d2e,#4a2f20);
    border: 2px solid #8b7355;
    border-radius: 6px;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 1.1px;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    cursor: pointer;
}

.location-popup-action-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.location-popup-close-button {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg,#5c3d2e,#4a2f20);
    border: 2px solid #8b7355;
    border-radius: 4px;
    color: #ffffff;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 900;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.hall-chronicles-section {
    color: #2c1810;
    font-size: 0.82em;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 8px 0 6px;
}

[data-stats-tab] > .hall-chronicles-section:first-child {
    margin-top: 0;
}

.modal-parchment-button--release-nav {
    margin-top: 0;
}

.release-notes-shell > .parchment-body {
    flex: 0 1 auto;
    padding: 8px 12px;
}

.release-notes-shell > .parchment-footer {
    box-sizing: border-box;
    min-height: 56px;
    padding: 8px 12px;
}

.release-notes-section {
    color: #2c1810;
    font-size: 0.82em;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 8px 0 6px;
    border-bottom: 1px solid rgba(139,115,85,0.35);
    padding-bottom: 4px;
}

.release-notes-tab-row + .release-notes-section {
    margin-top: 0;
}

.release-notes-shell > .parchment-body > .release-notes-section:first-child {
    margin-top: 0;
}

.release-notes-tab-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
    margin: 0 0 8px;
}

.release-notes-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.release-notes-footer-actions > .modal-parchment-button {
    margin-top: 0;
}

#hero-death-modal .parchment-box {
    display: flex;
    flex-direction: column;
    max-height: min(86vh, 760px);
    min-height: 0;
}

#hero-death-content {
    --hero-select-pill-w: 214px;
    --hero-select-pill-h: 42px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 8px 12px 0;
}

#hero-death-content .hero-death-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    margin: 0 0 8px;
    padding: 6px 10px;
    border: 1px solid rgba(185, 28, 28, 0.32);
    border-radius: 7px;
    background: rgba(185, 28, 28, 0.08);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.76em;
    color: #3d2b1f;
    text-align: center;
}

#hero-death-content .hero-select-available,
#hero-death-content .hero-select-selected {
    flex-shrink: 0;
}

#hero-death-content .hero-death-available-grid {
    display: grid;
    grid-template-columns: repeat(2, var(--hero-select-pill-w));
    grid-auto-rows: var(--hero-select-pill-h);
    justify-content: center;
    gap: 5px;
    max-height: calc(var(--hero-select-pill-h) * 3 + 10px);
    margin-bottom: 6px;
    padding-right: 3px;
    overflow-y: auto;
}

#hero-death-content .hero-select-selected .hero-select-slot {
    width: var(--hero-select-pill-w);
    max-width: 100%;
    margin: 0 auto;
}

#hero-death-content .hero-select-preview {
    min-height: 120px;
    overflow-y: auto;
}

body.map-board-open .modal.active:not(#map-modal) .map-board-modal-button-row {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    overflow-x: visible;
}

body.map-board-open .modal.active:not(#map-modal) .map-board-modal-button-row > .modal-parchment-button,
body.map-board-open .modal.active:not(#map-modal) .map-board-modal-button-row > button {
    flex: 0 0 var(--map-board-modal-button-width, 112px) !important;
    width: var(--map-board-modal-button-width, 112px) !important;
    max-width: 300px;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 4px 10px !important;
    font-size: 0.68em !important;
    line-height: 1.05 !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.map-board-open .modal.active:not(#map-modal) .map-board-modal-button-compact {
    display: block !important;
    flex: 0 0 var(--map-board-modal-button-width, 112px) !important;
    width: var(--map-board-modal-button-width, 112px) !important;
    max-width: 300px;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 4px 10px !important;
    margin: 6px auto 0 !important;
    font-size: 0.68em !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.map-board-open .modal.active:not(#map-modal) .map-board-modal-button-row > .modal-parchment-button > .modal-parchment-button-label,
body.map-board-open .modal.active:not(#map-modal) .map-board-modal-button-row > button > .modal-parchment-button-label,
body.map-board-open .modal.active:not(#map-modal) .map-board-modal-button-compact > .modal-parchment-button-label {
    min-height: 0;
    line-height: 1.05;
}

body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment > .parchment-box > .parchment-banner,
body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-banner {
    border-bottom: 2px solid #8b7355 !important;
    margin-bottom: 0 !important;
}

body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment > .parchment-box:not(.parchment-zoned) > .parchment-banner {
    margin: -10px -10px 0 !important;
}

body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-banner {
    margin: 0 !important;
}

body.map-board-open .modal.active:not(#map-modal) > .modal-content-parchment > .parchment-box > .parchment-banner + *,
body.map-board-open .modal.active:not(#map-modal) [class~="parchment-zoned"] > .parchment-banner + * {
    border-top: 0 !important;
    margin-top: 0 !important;
}

body.map-board-open .modal.active:not(#map-modal) .parchment-body > hr:first-child,
body.map-board-open .modal.active:not(#map-modal) .parchment-body > .sep:first-child {
    display: none !important;
}

body.map-board-open .modal.active:not(#map-modal) .parchment-body > :first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

body.map-board-open .modal.active:not(#map-modal) .parchment-phases {
    border-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.map-board-open .modal.active:not(#map-modal) .parchment-footer,
body.map-board-open .modal.active:not(#map-modal) .combat-results-footer,
body.map-board-open .modal.active:not(#map-modal) .board-modal-footer,
body.map-board-open .modal.active:not(#map-modal) .modal-parchment-button-stack,
body.map-board-open .modal.active:not(#map-modal) .modal-parchment-button-row,
body.map-board-open .modal.active:not(#map-modal) .map-board-modal-direct-button-row,
body.map-board-open .modal.active:not(#map-modal) #end-of-turn-btn-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
}

body.map-board-open .modal.active:not(#map-modal) .parchment-footer,
body.map-board-open .modal.active:not(#map-modal) .combat-results-footer,
body.map-board-open .modal.active:not(#map-modal) .board-modal-footer {
    border-top: 1px solid rgba(139,115,85,0.45) !important;
    padding: 7px 10px 9px !important;
}

body.map-board-open .modal.active:not(#map-modal) .map-board-modal-direct-button-row {
    border-top: 1px solid rgba(139,115,85,0.45) !important;
    margin: 10px -10px -10px !important;
    padding: 7px 10px 9px !important;
}

body.map-board-open .modal.active:not(#map-modal) .parchment-footer > .modal-parchment-button,
body.map-board-open .modal.active:not(#map-modal) .parchment-footer > button,
body.map-board-open .modal.active:not(#map-modal) .combat-results-footer > .modal-parchment-button,
body.map-board-open .modal.active:not(#map-modal) .combat-results-footer > button,
body.map-board-open .modal.active:not(#map-modal) .board-modal-footer > .modal-parchment-button,
body.map-board-open .modal.active:not(#map-modal) .board-modal-footer > button,
body.map-board-open .modal.active:not(#map-modal) .modal-parchment-button-stack > .modal-parchment-button,
body.map-board-open .modal.active:not(#map-modal) .modal-parchment-button-stack > button,
body.map-board-open .modal.active:not(#map-modal) .modal-parchment-button-row > .modal-parchment-button,
body.map-board-open .modal.active:not(#map-modal) .modal-parchment-button-row > button,
body.map-board-open .modal.active:not(#map-modal) .map-board-modal-direct-button-row > .modal-parchment-button,
body.map-board-open .modal.active:not(#map-modal) .map-board-modal-direct-button-row > button,
body.map-board-open .modal.active:not(#map-modal) #end-of-turn-btn-container > .modal-parchment-button,
body.map-board-open .modal.active:not(#map-modal) #end-of-turn-btn-container > button,
body.map-board-open .modal.active:not(#map-modal) .map-board-modal-button-compact {
    flex: 0 0 var(--map-board-modal-button-width, 112px) !important;
    width: var(--map-board-modal-button-width, 112px) !important;
    max-width: 300px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.map-board-open .modal.active:not(#map-modal) .map-board-modal-button-compact {
    margin: 6px auto 0 !important;
}

body.map-board-open #end-of-turn-modal .parchment-footer {
    padding: 10px !important;
}

body.map-board-open #end-of-turn-modal #end-of-turn-btn-container {
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

body.map-board-open .modal.active:not(#map-modal) .modal-parchment-button-label {
    display: block !important;
    min-height: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.map-board-open .modal.active:not(#map-modal) .modal-parchment-button-primary,
body.map-board-open .modal.active:not(#map-modal) .modal-parchment-button-detail {
    display: inline !important;
    white-space: nowrap !important;
}

body.map-board-open #map-modal.active .map-icon-top-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--map-top-icon-size, 42px) !important;
    height: var(--map-top-icon-size, 42px) !important;
    min-width: var(--map-top-icon-size, 42px) !important;
    min-height: var(--map-top-icon-size, 42px) !important;
    margin-top: 0 !important;
    padding: 0 !important;
    color: #ffe7ad !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 0 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
}

body.map-board-open #map-modal.active .map-icon-top-btn img {
    width: var(--map-top-icon-image-size, 34px) !important;
    height: var(--map-top-icon-image-size, 34px) !important;
}

body.map-board-open #map-modal.active .map-icon-top-btn.active,
body.map-board-open #map-modal.active .map-icon-top-btn:hover:not(:disabled) {
    color: #fff0ba !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    filter: brightness(1.12) drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}

@media (max-height: 520px) and (orientation: landscape) {
    body.map-board-open #hero-death-modal .parchment-box {
        max-height: calc(100dvh - 44px) !important;
        font-size: 0.82em;
    }

    body.map-board-open #hero-death-content {
        flex: 1 1 auto;
        padding: 6px 10px 0;
    }

    body.map-board-open #hero-death-content .hero-death-summary {
        margin-bottom: 5px;
        padding: 4px 8px;
        font-size: 0.66em;
    }

    body.map-board-open #hero-death-content .hero-select-preview {
        min-height: 0 !important;
        overflow-y: auto !important;
        padding-right: 0 !important;
    }

    body.map-board-open #hero-death-content .hero-select-preview [style*="Comic Sans"],
    body.map-board-open #hero-death-content .hero-select-preview .hi-cont,
    body.map-board-open #hero-death-content .hero-select-preview .hi-title,
    body.map-board-open #hero-death-content .hero-select-preview .hi-sub {
        font-size: 0.66em !important;
        line-height: 1.35 !important;
    }

    body.map-board-open #hero-death-content .setup-subsection-label {
        font-size: 0.62em;
        margin-bottom: 4px;
    }
}

.release-notes-nav-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.modal-parchment-button--release-tab {
    margin-top: 0;
    min-width: 0;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f0e6d3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.modal-parchment-button--release-tab-active {
    background: linear-gradient(135deg,#d4af37,#8b6914);
    color: #1a0f0a;
    border-color: #d4af37;
    text-shadow: none;
}

.modal-parchment-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.modal-parchment-button.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Main screen rails */
body.main-screen-open {
    overflow: hidden;
    touch-action: none;
}

#main-screen {
    --main-wood: #2d1a10;
    --main-wood-2: #4e2d19;
    --main-wood-3: #6a4124;
    --main-paper: #ead2a3;
    --main-gold: #d4af37;
    --main-gold-2: #f1cc70;
    --main-line: rgba(241, 204, 112, 0.32);
    --main-panel: rgba(27, 16, 10, 0.9);
    --main-radius: 8px;
    position: fixed;
    inset: 0;
    z-index: 50000;
    display: none;
    overflow: hidden;
    color: #f4e4c1;
    background: #070503;
}

#main-screen.active {
    display: block;
}

.main-screen-bg {
    position: absolute;
    inset: 54px 0 66px 46px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.08)),
        url("../images/main-screen/background-map.png") center / cover no-repeat;
    box-shadow: inset 0 0 82px rgba(0,0,0,0.62);
}

.main-screen-stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

@media (orientation: portrait) and (max-width: 900px) {
    body.main-screen-open #main-screen.active {
        overflow: hidden;
    }

    body.main-screen-open #main-screen.active .main-screen-stage {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100dvh;
        height: 100dvw;
        transform: translate(-50%, -50%) rotate(90deg);
        transform-origin: center center;
    }
}

.main-top-rail,
.main-left-rail,
.main-bottom-rail,
.main-right-rail {
    position: absolute;
    z-index: 3;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), transparent),
        linear-gradient(180deg, #6b4327, #2b1a10);
}

.main-top-rail {
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    border-bottom: 1px solid var(--main-line);
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
}

.main-left-rail {
    top: 54px;
    left: 0;
    bottom: 66px;
    width: 46px;
    border-right: 1px solid var(--main-line);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 0 10px 5px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), transparent),
        linear-gradient(180deg, #2b1a10, #6b4327);
}

.main-bottom-rail {
    left: 0;
    right: 0;
    bottom: 0;
    height: 66px;
    border-top: 1px solid var(--main-line);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}

.main-right-rail {
    display: none;
}

.main-pill,
.main-play-btn,
.main-rail-tab,
.main-drawer-btn {
    min-width: 0;
    border: 1px solid rgba(48, 27, 11, 0.62);
    border-radius: var(--main-radius);
    color: #f8dfad;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
        linear-gradient(180deg, #5b3924, #342015);
    box-shadow: inset 0 1px rgba(255,255,255,0.12), inset 0 -1px rgba(0,0,0,0.28), 0 2px 0 #1d110a;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
}

.main-pill:hover:not(:disabled),
.main-play-btn:hover:not(:disabled),
.main-rail-tab:hover:not(:disabled),
.main-rail-tab.is-active,
.main-drawer-btn:hover:not(:disabled) {
    color: #1d1108;
    background: linear-gradient(180deg, var(--main-gold-2), var(--main-gold));
    border-color: rgba(48,27,11,0.62);
    box-shadow: inset 0 1px rgba(255,255,255,0.28), 0 2px 0 #7d551d;
    text-shadow: none;
}

.main-pill {
    position: relative;
    justify-self: start;
    min-height: 38px;
    min-width: 96px;
    padding: 0 50px 0 2px;
    border-radius: 999px;
    display: inline-grid;
    grid-template-columns: 34px auto;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    overflow: visible;
    font-size: 0.7rem;
}

.main-pill-notifications,
.main-pill-notifications:hover:not(:disabled) {
    color: #ffe4a4;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
        linear-gradient(180deg, #4b2e1d, #21140d);
    border-color: rgba(241,204,112,0.46);
    box-shadow:
        inset 0 1px rgba(255,244,188,0.22),
        inset 0 -2px rgba(0,0,0,0.32),
        0 4px 11px rgba(0,0,0,0.42);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.main-pill-notifications {
    width: 74px;
    min-width: 74px;
    padding: 0 38px 0 2px;
    grid-template-columns: 34px;
    justify-content: start;
}

.main-pill-token {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255,226,142,0.78);
    box-shadow: inset 0 1px rgba(255,255,255,0.12), 0 2px 0 rgba(69,44,15,0.7);
}

.main-pill-account {
    justify-self: center;
    grid-template-columns: 34px auto;
    justify-content: start;
    justify-items: start;
    gap: 8px;
    min-height: 42px;
    min-width: 210px;
    padding: 4px 18px 4px 2px;
    text-align: left;
    color: #ffe7ad;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
        linear-gradient(180deg, #4b2e1d, #21140d);
    border-color: rgba(241,204,112,0.46);
    box-shadow:
        inset 0 1px rgba(255,244,188,0.22),
        inset 0 -2px rgba(0,0,0,0.32),
        0 4px 11px rgba(0,0,0,0.42);
}

.main-pill-account-signed-out {
    min-width: 210px;
    padding: 4px 18px 4px 2px;
}

.main-pill-account > span:not(.main-account-icon) {
    justify-self: start;
    text-align: left;
}

.main-account-icon-token {
    background: none;
}

.main-account-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,226,142,0.78);
    background: radial-gradient(circle at 35% 30%, #2bd1bb, #0f7468 72%);
    color: #fff4c7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    object-fit: cover;
    font-size: 0.58rem;
    line-height: 1;
}

.main-pill-badge {
    position: absolute;
    right: 2px;
    top: 50%;
    width: 34px;
    min-width: 34px;
    height: 34px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: linear-gradient(180deg, #b64235, #7f241d);
    border: 1px solid #d3685d;
    align-items: center;
    justify-content: center;
    color: #fff4c7;
    font-family: Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 1px rgba(255,255,255,0.12), 0 2px 0 rgba(69,19,15,0.7);
}

.main-play-btn {
    justify-self: end;
    min-height: 38px;
    min-width: 150px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.7rem;
}

.main-play-btn:disabled,
.main-rail-tab:disabled,
.main-drawer-btn:disabled {
    opacity: 0.46;
    cursor: not-allowed;
}

.main-rail-tab {
    width: 40px;
    min-height: 112px;
    padding: 0;
    display: grid;
    place-items: center;
    border-color: var(--main-line);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    text-align: center;
    font-size: 0.54rem;
    line-height: 1;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.main-bottom-rail .main-rail-tab {
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    border-right: 1px solid rgba(48, 27, 11, 0.62);
    border-radius: var(--main-radius);
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    writing-mode: horizontal-tb;
    text-transform: none;
}

.main-bottom-rail .main-rail-tab,
.main-right-rail .main-rail-tab {
    border: 1px solid rgba(241, 204, 112, 0.46);
    box-shadow:
        inset 0 0 0 1px rgba(48,27,11,0.64),
        inset 2px 0 rgba(255,244,188,0.14),
        inset -2px 0 rgba(255,244,188,0.14),
        inset 0 2px rgba(255,244,188,0.14),
        inset 0 -2px rgba(255,244,188,0.14),
        0 2px 0 #1d110a;
}

.main-bottom-rail .main-rail-tab:hover:not(:disabled),
.main-right-rail .main-rail-tab:hover:not(:disabled),
.main-bottom-rail .main-rail-tab.is-active,
.main-right-rail .main-rail-tab.is-active {
    border-color: rgba(241, 204, 112, 0.58);
    box-shadow:
        inset 0 0 0 1px rgba(48,27,11,0.54),
        inset 2px 0 rgba(255,244,188,0.22),
        inset -2px 0 rgba(255,244,188,0.22),
        inset 0 2px rgba(255,255,255,0.28),
        inset 0 -2px rgba(255,244,188,0.22),
        0 2px 0 #7d551d;
}

.main-rail-tab-danger {
    color: #fff;
    background: linear-gradient(180deg, #b64235, #7f241d);
    border-color: #d3685d;
    box-shadow: inset 0 1px rgba(255,255,255,0.1), 0 2px 0 #45130f;
}

.main-bottom-rail .main-rail-tab-danger,
.main-right-rail .main-rail-tab-danger {
    border-color: #d3685d;
    box-shadow:
        inset 0 0 0 1px rgba(69,19,15,0.66),
        inset 2px 0 rgba(255,214,190,0.16),
        inset -2px 0 rgba(255,214,190,0.16),
        inset 0 2px rgba(255,214,190,0.16),
        inset 0 -2px rgba(255,214,190,0.16),
        0 2px 0 #45130f;
}

.main-hero-area {
    position: absolute;
    inset: 54px 0 66px 46px;
    overflow: hidden;
    padding: 0;
    background:
        radial-gradient(circle at 52% 0%, rgba(241, 204, 112, 0.12), transparent 25rem),
        linear-gradient(135deg, #070503, #24150d 52%, #050403);
}

.main-hero-area::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 72px rgba(0,0,0,0.72);
    z-index: 2;
}

.main-menu-backdrop {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(30,18,8,0.1), rgba(7,4,2,0.2)),
        radial-gradient(circle at 50% 34%, rgba(255,226,142,0.18), transparent 20rem),
        linear-gradient(180deg, rgba(34,17,6,0.18), rgba(9,5,2,0.28)),
        url("../images/main-screen/background-map.png") center / cover no-repeat;
    box-shadow: inset 0 0 82px rgba(0,0,0,0.62);
}

.main-menu-backdrop::before,
.main-menu-backdrop::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(241,204,112,0.12);
    border-radius: 50%;
    opacity: 0.72;
}

.main-menu-backdrop::before {
    width: 420px;
    height: 420px;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 42px rgba(212,175,55,0.12);
}

.main-menu-backdrop::after {
    width: 620px;
    height: 620px;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
}

.main-menu-crest {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    text-align: center;
    padding: clamp(22px, 5vw, 70px);
}

.main-brand-title {
    width: min(780px, 86%);
    min-height: 220px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 18px;
    border: 1px solid transparent;
    border-radius: var(--main-radius);
}

.main-logo {
    width: min(532px, 86%);
    max-height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 16px 18px rgba(0,0,0,0.62));
}

.main-menu-status-strip {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border-top: 1px solid rgba(241,204,112,0.2);
    background: rgba(9,5,3,0.48);
}

.main-menu-status-card {
    min-height: 74px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 10px;
    border: 1px solid rgba(241,204,112,0.18);
    border-radius: var(--main-radius);
    background: rgba(24,14,8,0.68);
}

.main-menu-status-card strong {
    color: #ffe3a1;
    font-family: "Cinzel", Georgia, serif;
    font-size: 0.82rem;
}

.main-menu-status-card span {
    color: #e3cda4;
    font-size: 0.86rem;
    line-height: 1.18;
}

.main-drawer {
    position: absolute;
    z-index: 4;
    display: flex;
    gap: 10px;
    min-width: 0;
    max-width: min(860px, calc(100vw - 62px));
    padding: 12px;
    border: 1px solid var(--main-line);
    border-radius: var(--main-radius);
    background: var(--main-panel);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.32);
    overflow: hidden;
}

.main-drawer[hidden] {
    display: none;
}

.main-drawer-account,
.main-drawer-friends,
.main-drawer-guilds {
    left: 46px;
    width: min(444px, calc(100% - 62px));
    max-height: calc(100% - 76px);
    border-radius: 0 var(--main-radius) var(--main-radius) 0;
}

.main-drawer-account .main-drawer-section,
.main-drawer-friends .main-drawer-section,
.main-drawer-guilds .main-drawer-section {
    flex: 1 1 auto;
    width: auto;
}

.main-drawer-single-player,
.main-drawer-multiplayer,
.main-drawer-rules,
.main-drawer-about {
    left: 46px;
    right: 0;
    bottom: 66px;
    top: auto !important;
    width: auto;
    max-width: none;
    border-radius: var(--main-radius) var(--main-radius) 0 0;
}

.main-drawer-notifications {
    top: 54px;
    left: 0;
    width: min(380px, 42%);
    border-radius: 0 0 var(--main-radius) 0;
}

.main-drawer-section {
    flex: 0 0 420px;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 10px;
    border: 1px solid rgba(241,204,112,0.22);
    border-radius: var(--main-radius);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
        rgba(31, 18, 10, 0.84);
}

.main-drawer-section-head {
    box-sizing: border-box;
    height: 52px;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid rgba(241,204,112,0.2);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), transparent),
        linear-gradient(180deg, #6b4327, #2b1a10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 900;
    font-size: 0.86rem;
    color: #ffe3a1;
}

.main-drawer-section-head span:last-child {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(241,204,112,0.28);
    background: #24150d;
    color: #ffe3a1;
    padding: 2px 11px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: inherit;
    font-weight: inherit;
    white-space: nowrap;
}

.main-drawer-section-token {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8));
}

.main-drawer-section-token-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    overflow: visible;
}

body.main-screen-open .modal.active {
    z-index: 50010 !important;
}

.main-drawer-buttons {
    display: grid;
    gap: 8px;
    grid-auto-rows: 38px;
}

.main-drawer-btn {
    display: grid;
    place-items: center;
    width: 100%;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    line-height: 1.1;
}

@media (max-height: 560px) and (orientation: landscape), (orientation: landscape) and (pointer: coarse), (max-width: 767px) {
    #main-screen {
        --main-mobile-top: clamp(34px, 8.5dvh, 44px);
        --main-mobile-left: clamp(38px, 8.5dvh, 48px);
        --main-mobile-right: clamp(58px, 13dvh, 72px);
        --main-mobile-gap: clamp(4px, 1.2dvh, 8px);
        --main-mobile-right-gap: clamp(8px, 2dvh, 12px);
    }

    .main-screen-bg {
        inset: var(--main-mobile-top) var(--main-mobile-right) 0 var(--main-mobile-left);
    }

    .main-top-rail {
        height: var(--main-mobile-top);
        grid-template-columns: minmax(112px, 1fr) minmax(178px, 260px) minmax(112px, 1fr);
        padding: 0 8px;
        gap: 6px;
    }

    .main-left-rail {
        top: var(--main-mobile-top);
        bottom: 0;
        width: var(--main-mobile-left);
        gap: var(--main-mobile-gap);
        align-items: flex-end;
        padding: var(--main-mobile-gap) 0 var(--main-mobile-gap) 3px;
    }

    .main-bottom-rail {
        display: none;
    }

    .main-right-rail {
        top: var(--main-mobile-top);
        right: 0;
        bottom: 0;
        width: var(--main-mobile-right);
        border-left: 1px solid var(--main-line);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--main-mobile-right-gap);
        padding: var(--main-mobile-right-gap) 6px;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.05), transparent),
            linear-gradient(180deg, #5e3821, #26170e);
    }

    .main-hero-area {
        inset: var(--main-mobile-top) var(--main-mobile-right) 0 var(--main-mobile-left);
    }

    .main-logo {
        width: min(400px, 80%);
        max-height: 112px;
    }

    .main-menu-crest {
        padding: 14px;
    }

    .main-brand-title {
        min-height: 150px;
        padding: 8px;
    }

    .main-menu-status-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
    }

    .main-menu-status-card {
        min-height: 46px;
        gap: 2px;
        padding: 6px;
        border-radius: 6px;
    }

    .main-menu-status-card strong {
        font-size: 0.58rem;
    }

    .main-menu-status-card span {
        font-size: 0.65rem;
        line-height: 1.05;
    }

    .main-pill {
        height: clamp(28px, 6.8dvh, 34px);
        min-height: 0;
        min-width: clamp(70px, 14vw, 92px);
        grid-template-columns: clamp(22px, 5.2dvh, 26px) auto;
        padding: 0 clamp(28px, 5dvh, 34px) 0 2px;
        font-size: clamp(0.5rem, 1.75dvh, 0.62rem);
        line-height: 1;
    }

    .main-pill-account {
        min-width: 0;
        height: clamp(30px, 7.2dvh, 36px);
        min-height: 0;
        grid-template-columns: clamp(24px, 5.8dvh, 30px) auto;
        gap: 6px;
        padding: 2px 12px 2px 2px;
    }

    .main-account-icon {
        width: clamp(24px, 5.8dvh, 30px);
        height: clamp(24px, 5.8dvh, 30px);
        flex-basis: clamp(24px, 5.8dvh, 30px);
    }

    .main-pill-token {
        width: clamp(22px, 5.2dvh, 26px);
        height: clamp(22px, 5.2dvh, 26px);
    }

    .main-pill-badge {
        width: clamp(22px, 5.2dvh, 26px);
        min-width: clamp(22px, 5.2dvh, 26px);
        height: clamp(22px, 5.2dvh, 26px);
        font-size: clamp(0.54rem, 1.9dvh, 0.68rem);
    }

    .main-pill-notifications {
        width: calc((clamp(22px, 5.2dvh, 26px) * 2) + 8px);
        min-width: calc((clamp(22px, 5.2dvh, 26px) * 2) + 8px);
        margin-left: calc(var(--main-mobile-left) - 8px);
        padding: 0 calc(clamp(22px, 5.2dvh, 26px) + 6px) 0 2px;
        grid-template-columns: clamp(22px, 5.2dvh, 26px);
    }

    body.map-board-open #map-modal.active .map-board-notifications {
        top: calc(((var(--map-mobile-top-rail-h) - var(--map-notification-pill-h)) / 2) - 6px) !important;
        left: calc(var(--map-mobile-left-rail-w) - 10px) !important;
        height: var(--map-notification-pill-h) !important;
        min-height: 0 !important;
        width: calc((var(--map-rail-token-size) * 2) + 8px) !important;
        min-width: calc((var(--map-rail-token-size) * 2) + 8px) !important;
        grid-template-columns: var(--map-rail-token-size) auto !important;
        padding: 0 calc(var(--map-rail-token-size) + 6px) 0 2px !important;
        overflow: visible !important;
    }

    body.map-board-open #map-modal.active .map-board-notifications .main-pill-token,
    body.map-board-open #map-modal.active .map-board-notifications .main-pill-badge {
        width: var(--map-rail-token-size) !important;
        min-width: var(--map-rail-token-size) !important;
        height: var(--map-rail-token-size) !important;
    }

    .main-play-btn {
        display: none;
        height: clamp(28px, 6.8dvh, 34px);
        min-height: 0;
        min-width: clamp(94px, 19vw, 126px);
        padding: 0 8px;
        font-size: clamp(0.5rem, 1.75dvh, 0.62rem);
    }

    .main-rail-tab,
    .main-bottom-rail .main-rail-tab {
        width: 100%;
        min-height: 58px;
        border-right: 1px solid rgba(48, 27, 11, 0.62);
        border-radius: var(--main-radius);
        padding: 4px 2px;
        display: grid;
        place-items: center;
        font-size: 0.52rem;
        line-height: 1.05;
        writing-mode: horizontal-tb;
        text-transform: none;
        white-space: normal;
    }

    .main-right-rail .main-rail-tab {
        width: 100%;
        flex: 1 1 0;
        height: auto;
        min-height: 0;
        max-height: none;
        align-self: stretch;
    }

    .main-left-rail .main-rail-tab {
        width: calc(var(--main-mobile-left) - 5px);
        min-height: clamp(58px, 17dvh, 76px);
        border-right: 0;
        border-radius: 9px 0 0 9px;
        font-size: clamp(0.5rem, 1.9dvh, 0.6rem);
        text-transform: uppercase;
        writing-mode: vertical-rl;
        box-shadow: inset 0 1px rgba(255,255,255,0.14), inset 0 -1px rgba(0,0,0,0.36), -2px 2px 0 #1d110a;
    }

    .main-drawer {
        left: auto;
        right: var(--main-mobile-right);
        bottom: auto;
        width: min(640px, calc(100vw - 134px));
        max-width: min(640px, calc(100vw - 134px));
        min-width: 246px;
        flex-direction: column;
        gap: 10px;
        max-height: calc(100dvh - var(--main-mobile-top) - 10px);
        overflow: auto;
        padding: 10px;
    }

    .main-drawer-account,
    .main-drawer-friends,
    .main-drawer-guilds {
        left: var(--main-mobile-left);
        right: auto;
        width: min(344px, calc(100vw - 134px));
        max-width: min(344px, calc(100vw - 134px));
    }

    .main-drawer-single-player,
    .main-drawer-multiplayer,
    .main-drawer-rules,
    .main-drawer-about {
        left: auto;
        right: var(--main-mobile-right);
        width: min(344px, calc(100vw - 134px));
        max-width: min(344px, calc(100vw - 134px));
        border-radius: var(--main-radius) 0 0 var(--main-radius);
    }

    .main-drawer-notifications {
        top: var(--main-mobile-top);
        left: 0;
        right: auto;
        width: min(320px, calc(100vw - 18px));
    }

    .main-drawer-section {
        flex: 0 0 auto;
        width: auto;
    }

    .main-drawer-btn {
        height: 38px;
        min-height: 38px;
        max-height: 38px;
        padding: 0 12px;
        font-size: 0.7rem;
    }
}

@media (orientation: landscape) and (pointer: coarse) {
    .main-drawer {
        top: clamp(var(--main-mobile-top), var(--drawer-top, var(--main-mobile-top)), calc(100dvh - 92px)) !important;
        max-height: calc(100dvh - max(var(--main-mobile-top), min(var(--drawer-top, var(--main-mobile-top)), calc(100dvh - 92px))) - 8px);
    }

    .main-right-rail .main-rail-tab {
        min-height: 0;
        font-size: clamp(0.46rem, 1.9dvh, 0.58rem);
    }

    .main-drawer-section {
        gap: 7px;
        padding: 8px;
    }

    .main-drawer-buttons {
        gap: 6px;
        grid-auto-rows: clamp(32px, 8dvh, 38px);
    }

    .main-drawer-btn {
        height: clamp(32px, 8dvh, 38px);
        min-height: clamp(32px, 8dvh, 38px);
        max-height: clamp(32px, 8dvh, 38px);
        font-size: clamp(0.58rem, 2.2dvh, 0.7rem);
    }
}

/* Use filter: brightness() instead of repainting the background so colored
   faction / color-picker buttons (Rumors, Military Strategist, Battle Steed,
   rumors, crafty, etc.) stay in their own color family on hover instead of
   flashing parchment brown. Same pattern already used by .phb:hover,
   .turn-hero:hover, and .intervene-btn:hover. */
.modal-content-parchment button:not(:disabled):hover,
#game-menu-modal button:not(:disabled):hover {
    filter: brightness(1.15);
    cursor: pointer;
}
.modal-content-parchment button:not(:disabled):active,
#game-menu-modal button:not(:disabled):active {
    filter: brightness(0.85);
    transform: translateY(1px);
}

body.map-board-open .modal.active:not(#map-modal) .general-card-banner {
    min-height: 40px !important;
    padding: 0 12px 0 0 !important;
}

body.map-board-open .modal.active:not(#map-modal) .general-banner-name {
    height: 40px !important;
    gap: 6px !important;
}

body.map-board-open .modal.active:not(#map-modal) .general-selector-row {
    justify-content: center !important;
    gap: 6px !important;
}

body.map-board-open .modal.active:not(#map-modal) .general-selector-btn {
    min-height: 34px !important;
    padding: 0 10px 0 0 !important;
    font-size: 0.75em !important;
    line-height: 1 !important;
    gap: 6px !important;
    flex: 0 1 auto !important;
}

body.map-board-open .modal.active:not(#map-modal) .general-selector-btn .modal-token--fill,
body.map-board-open .modal.active:not(#map-modal) .general-banner-name .modal-token--fill {
    height: 100% !important;
    margin-left: 0 !important;
}

body.map-board-open .modal.active:not(#map-modal) .general-pill-row {
    gap: 8px !important;
    justify-content: center !important;
}

body.map-board-open .modal.active:not(#map-modal) .general-select-pill {
    min-height: 0 !important;
    height: var(--general-select-pill-h) !important;
    padding: 0 12px 0 0 !important;
    gap: 8px !important;
    line-height: 1 !important;
}

body.map-board-open #info-modal:has(.view-generals-modal) {
    padding: 6px 58px 6px 96px !important;
}

body.map-board-open #info-modal:has(.view-generals-modal) > .modal-content-parchment {
    width: min(74vw, 720px) !important;
    max-width: calc(100vw - 180px) !important;
}

body.map-board-open .modal.active:not(#map-modal) .view-generals-card .general-card-banner {
    min-height: 48px !important;
    padding: 0 16px 0 0 !important;
}

body.map-board-open .modal.active:not(#map-modal) .view-generals-card .general-banner-name {
    height: 48px !important;
    font-size: 1.05em !important;
}

body.map-board-open .modal.active:not(#map-modal) .view-generals-selector-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px !important;
    justify-content: stretch !important;
}

body.map-board-open .modal.active:not(#map-modal) .view-generals-selector-pill {
    width: 100% !important;
}

@media (max-width: 900px), (max-height: 520px) and (orientation: landscape) {
    .view-generals-selector-row,
    body.map-board-open .modal.active:not(#map-modal) .view-generals-selector-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Board rails mirror the main-screen rail/drawer visual language without
   changing the board controls, content, or click targets. */
#map-modal .map-tracker-tabs,
#map-modal .action-tray {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), transparent),
        linear-gradient(180deg, #6b4327, #2b1a10);
}

#map-modal .map-tracker-tabs {
    border-right: 1px solid rgba(241, 204, 112, 0.32);
}

#map-modal .action-tray {
    border-left: 1px solid rgba(241, 204, 112, 0.32);
}

#map-modal .map-tracker-tab,
#map-modal .action-category-dock .phase-btn,
#map-modal .action-btns .phase-btn {
    border: 1px solid rgba(241, 204, 112, 0.46);
    color: #f8dfad;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
        linear-gradient(180deg, #5b3924, #342015);
    box-shadow:
        inset 0 0 0 1px rgba(48,27,11,0.64),
        inset 2px 0 rgba(255,244,188,0.14),
        inset -2px 0 rgba(255,244,188,0.14),
        inset 0 2px rgba(255,244,188,0.14),
        inset 0 -2px rgba(255,244,188,0.14),
        0 2px 0 #1d110a;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

#map-modal .map-tracker-tab {
    border-right: 0;
}

#map-modal .map-tracker-tab:hover,
#map-modal .map-tracker-tab.active,
#map-modal .action-category-dock .phase-btn.active,
#map-modal .action-category-dock .phase-btn:hover:not(:disabled),
#map-modal .action-btns .phase-btn.active,
#map-modal .action-btns .phase-btn:hover:not(:disabled) {
    color: #1d1108;
    background: linear-gradient(180deg, #f1cc70, #d4af37);
    border-color: rgba(241, 204, 112, 0.58);
    box-shadow:
        inset 0 0 0 1px rgba(48,27,11,0.54),
        inset 2px 0 rgba(255,244,188,0.22),
        inset -2px 0 rgba(255,244,188,0.22),
        inset 0 2px rgba(255,255,255,0.28),
        inset 0 -2px rgba(255,244,188,0.22),
        0 2px 0 #7d551d;
    text-shadow: none;
}

#map-modal .action-btns .phase-btn.danger {
    color: #fff;
    background: linear-gradient(180deg, #b64235, #7f241d);
    border-color: #d3685d;
    box-shadow:
        inset 0 0 0 1px rgba(69,19,15,0.66),
        inset 2px 0 rgba(255,214,190,0.16),
        inset -2px 0 rgba(255,214,190,0.16),
        inset 0 2px rgba(255,214,190,0.16),
        inset 0 -2px rgba(255,214,190,0.16),
        0 2px 0 #45130f;
}

#map-modal .action-btns .phase-btn.danger:hover:not(:disabled),
#map-modal .action-btns .phase-btn.danger.active {
    color: #fff2c4;
    background: linear-gradient(180deg, #9c392e, #641e17);
    border-color: rgba(255,187,148,0.55);
    box-shadow:
        inset 0 0 0 1px rgba(69,19,15,0.66),
        inset 2px 0 rgba(255,214,190,0.22),
        inset -2px 0 rgba(255,214,190,0.22),
        inset 0 2px rgba(255,214,190,0.22),
        inset 0 -2px rgba(255,214,190,0.22),
        0 2px 0 #45130f;
}

#map-modal .map-tracker-panes {
    padding-right: 10px;
}

#map-modal .overlay-bar {
    border: 1px solid rgba(241, 204, 112, 0.32);
    border-radius: 0 8px 8px 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
        rgba(27, 16, 10, 0.9);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.32);
}

#map-modal .map-tracker-pane .overlay-bar,
#map-modal .overlay-stack > .overlay-bar:last-child {
    border-radius: 0 8px 8px 0;
}

#map-modal .overlay-title {
    min-height: 28px;
    padding: 6px 8px;
    border: 1px solid rgba(241,204,112,0.2);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), transparent),
        linear-gradient(180deg, #6b4327, #2b1a10);
    display: flex;
    align-items: center;
    color: #ffe3a1;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 900;
}

.darkness-preview-layer .darkness-preview-token {
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.75));
}

.darkness-preview-layer .darkness-preview-arrow {
    stroke-dasharray: 18 10;
    animation: darkness-preview-arrow-flow 1.2s linear infinite;
}

@keyframes darkness-preview-arrow-flow {
    to { stroke-dashoffset: -28; }
}

.darkness-preview-click-shield {
    position: absolute;
    inset: 0;
    z-index: 74999;
    background: transparent;
    pointer-events: auto;
}

.darkness-preview-mini-modal {
    position: absolute;
    right: 14px;
    bottom: 72px;
    z-index: 75000;
    width: min(220px, calc(100vw - 28px));
    padding: 10px;
    border: 1px solid rgba(241, 204, 112, 0.45);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), transparent 42%),
        rgba(8, 6, 5, 0.92);
    box-shadow: 0 8px 24px rgba(0,0,0,0.55), inset 0 1px rgba(255,255,255,0.1);
    color: #f0e6d3;
    pointer-events: auto;
}

.darkness-preview-mini-title {
    color: #f3d06f;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.15;
}

.darkness-preview-mini-copy {
    margin: 6px 0 9px;
    color: #d9c7aa;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.82rem;
    line-height: 1.25;
}

.darkness-preview-mini-button {
    width: 100%;
    min-height: 34px;
    border: 1px solid rgba(255,226,158,0.5);
    border-radius: 5px;
    background: linear-gradient(180deg, #6b4327, #342015);
    color: #ffe3a1;
    cursor: pointer;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.72rem;
    font-weight: 900;
}

.darkness-preview-mini-button:hover {
    background: linear-gradient(180deg, #f1cc70, #d4af37);
    color: #1d1108;
}

@media (max-width: 760px) {
    .darkness-preview-mini-modal {
        top: auto;
        right: 10px;
        bottom: 10px;
        width: min(210px, calc(100vw - 20px));
    }
}

.modal-action-button-group,
.combat-results-footer:has(.modal-interrupt-button) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.modal-action-button-group > .modal-parchment-button,
.combat-results-footer:has(.modal-interrupt-button) > .modal-parchment-button {
    flex: 0 1 184px;
    width: 184px;
    max-width: 100%;
    margin-top: 0;
}

.modal-interrupt-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding-right: 18px;
    white-space: nowrap;
}

.modal-interrupt-button-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-action-info-badge {
    position: absolute;
    top: 3px;
    right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(244, 228, 193, 0.85);
    border-radius: 999px;
    background: rgba(240, 230, 211, 0.16);
    color: #f4e4c1;
    font-family: Georgia, serif;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    text-transform: none;
    transform: none;
}

.modal-action-info-badge:hover,
.modal-action-info-badge:focus {
    background: #f4e4c1;
    color: #3d2410;
    outline: none;
}

.modal-action-info-popover {
    position: fixed;
    z-index: 120000;
    max-width: min(260px, calc(100vw - 24px));
    padding: 8px 10px;
    border: 1px solid rgba(139, 115, 85, 0.8);
    border-radius: 6px;
    background: rgba(45, 28, 18, 0.96);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    color: #f4e4c1;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.9rem;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.modal-action-info-popover.active {
    opacity: 1;
    transform: translateY(0);
}

body.map-board-open .modal.active:not(#map-modal) .modal-action-button-group > .modal-parchment-button,
body.map-board-open .modal.active:not(#map-modal) .combat-results-footer:has(.modal-interrupt-button) > .modal-parchment-button {
    flex: 0 1 168px !important;
    width: 168px !important;
    min-width: 136px !important;
    max-width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: none !important;
}

@media (max-width: 420px) {
    .modal-action-button-group > .modal-parchment-button,
    .combat-results-footer:has(.modal-interrupt-button) > .modal-parchment-button {
        flex-basis: min(100%, 164px);
        width: min(100%, 164px);
        font-size: 0.78em;
    }
}