body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #000;
}

#map {
    width: 100%;
    height: 100%;
    background: #0a0a0c;
}

.ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 16px;
    box-sizing: border-box;
}

.settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;   /* dvh keeps the Apply button clear of the mobile browser bar */
    /* slightly less heavy overlay so underlying map shows through */
    background: rgba(5, 5, 8, 0.85);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.settings-content {
    background: rgba(0, 0, 0, 0.4);
    padding: 30px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: 90%;
    max-width: 500px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow-y: auto;
    backdrop-filter: blur(10px);
    -webkit-overflow-scrolling: touch;
}

.settings-content::-webkit-scrollbar {
    width: 6px;
}

.settings-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.settings-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.main-menu-v2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;   /* dvh excludes mobile browser chrome so the bottom CTA stays visible */
    background: url('/assets/img/menu/2022.webp') no-repeat center center;
    background-size: cover;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-image 0.5s ease;
}

.menu-v2-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    /* softer dark panel so menu feels lighter */
    background: rgba(0, 0, 0, 0.58);
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
    backdrop-filter: blur(3px);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.menu-v2-container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.menu-v2-header {
    margin-bottom: auto;
    text-align: left;
    max-width: 600px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.8);
    position: relative;
    z-index: 2;
}

.menu-v2-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 92px;
    color: #fff;
    margin: 0;
    letter-spacing: -3px;
    line-height: 0.9;
}

.menu-v2-author {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 28px;
    color: rgba(255,255,255,0.6);
    margin-top: 15px;
    letter-spacing: 1px;
}

.menu-v2-nav {
    position: absolute;
    right: 0;
    top: 0;
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 40px;
    box-sizing: border-box;
    z-index: 2;
}

.nav-links-fade {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.nav-links-fade.hidden {
    opacity: 0;
    transform: translateX(50px);
    pointer-events: none;
}

.menu-v2-link {
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
    padding: 2px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    opacity: 0.7;
    letter-spacing: 1px;
}

.menu-v2-link:hover {
    opacity: 1;
    transform: translateX(-10px);
    color: #ff4757;
}

.menu-v2-link.primary {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 1;
    letter-spacing: -1px;
    color: #ff4757;
}

.menu-v2-link.primary:hover {
    transform: translateX(-20px);
}

.nav-separator {
    width: 200px;
    height: 1px;
    background: linear-gradient(to left, rgba(255,255,255,0.3), transparent);
    margin-bottom: 20px;
}

.menu-v2-link svg {
    width: 54px;
    height: 54px;
}

.menu-v2-footer {
    position: absolute;
    bottom: 40px;
    right: 40px;
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ATTRACT MODE: a live demo war plays on the real map behind the main menu so a
   drive-by sees the sim MOVING instead of static art. While it runs we drop the
   menu's background image (revealing the map), force the menu to stay visible even
   as the scenario loader tries to hide it, and suppress the in-game HUD + loading
   screen (which otherwise sit between the map and the now-transparent menu). The
   class is removed the moment a real game loads, restoring everything. */
body.menu-demo-live #main-menu {
    display: flex !important;
    background: transparent !important;
}
body.menu-demo-live #main-ui,
body.menu-demo-live #loading-overlay {
    display: none !important;
}
/* The menu's dark side-panel normally blurs+dims whatever's behind it. During the
   attract demo that panel was smearing the live war into a blur, so kill the blur
   and swap the flat dim for a gradient that only darkens behind the menu text (far
   right) and fades to clear over the war — moving fronts stay crisp, text stays legible. */
body.menu-demo-live .menu-v2-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: linear-gradient(to left, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%) !important;
}

@media (max-width: 1024px) {
    .menu-v2-title { font-size: 60px; }
    .menu-v2-author { font-size: 24px; }
    .menu-v2-link.primary { font-size: 40px; }
    .menu-v2-nav { right: 5%; width: 260px; }
}

@media (max-width: 600px) {
    .menu-v2-container { padding: 30px; }
    .menu-v2-title { font-size: 42px; }
    .menu-v2-author { font-size: 18px; }
    .menu-v2-nav { position: relative; right: auto; top: auto; transform: none; margin-top: 16px; width: 100%; }
    .menu-v2-link.primary { font-size: 32px; }
    .menu-v2-link { font-size: 18px; }

    /* The era selector is 80vh tall, but on a phone it sits below the menu title
       inside a 100vh container, so its bottom — and the ENTER THEATER button that
       lives there — falls off the bottom of the screen with no way to scroll to
       it (the card list scrolls internally, the button is outside that scroller).
       Shrink the panel to fit the viewport so ENTER THEATER stays reachable. */
    .scenario-selection-container { height: auto; max-height: calc(100vh - 200px); padding: 16px; }
}

@media (max-width: 600px) {
    .menu-layout {
        grid-template-columns: 1fr;
    }
    .game-logo-img {
        max-height: 100px;
    }
    .settings-content {
        padding: 20px;
    }
    .menu-content {
        padding: 30px 20px;
    }
}

.settings-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 28px;
    margin: 0 0 25px 0;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.setting-group {
    margin-bottom: 20px;
}

.setting-group label {
    display: block;
    color: #888;
    font-size: 12px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.setting-group select {
    width: 100%;
    padding: 12px;
    background: #2a2a30;
    border: 1px solid #444;
    color: white;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}

.setting-group small {
    display: block;
    margin-top: 6px;
    color: #555;
    font-size: 11px;
}

.status-panel {
    pointer-events: auto;
    /* reduce opacity so the panel is less dense */
    background: rgba(10, 10, 12, 0.80);
    backdrop-filter: blur(6px);
    color: #f5f5f5;
    padding: 12px 16px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 10px;
    position: relative;
    z-index: 1020;
}

.status-panel.minimized {
    padding-bottom: 4px;
}

.status-panel.minimized .status-right {
    display: flex;
}

/* When minimized, hide everything in the right side except the minimize button */
.status-panel.minimized .status-right > *:not(#minimize-status-btn) {
    display: none;
}

.status-panel.minimized #unit-counts {
    display: none !important;
}

.status-left {
    display: flex;
    flex-direction: column;
}

#status-text {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.setup-panel {
    position: absolute;
    top: 95px;
    left: 16px;
    pointer-events: auto;
    /* soften panel backdrop to be less intrusive */
    background: rgba(8, 8, 10, 0.78);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    padding: 20px;
    color: #f5f5f5;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
    max-width: 360px;
    margin: 0;
    width: auto;
    transition: all 0.18s ease;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1010;
}

.setup-panel::-webkit-scrollbar {
    width: 4px;
}

.setup-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.setup-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.setup-title {
    margin: 0 0 15px 0;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    text-align: left;
}

.setup-sides {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    align-items: flex-start;
    min-height: 120px;
}

.side-col {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.side-header {
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    color: #666;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255,255,255,0.05);
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.side-header:hover {
    background: rgba(255,255,255,0.08);
    color: #aaa;
}

.side-header[data-side="0"], .side-header[data-side="2"], .side-header[data-side="4"], .side-header[data-side="6"] { color: rgba(255, 71, 87, 0.6); }
.side-header[data-side="1"], .side-header[data-side="3"], .side-header[data-side="5"], .side-header[data-side="7"] { color: rgba(46, 134, 222, 0.6); }

.side-header.active {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    color: #fff !important;
}

.side-header.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 3px;
    background: currentColor;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 10px currentColor;
}

.side-country-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 40px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
}

.side-country-list::-webkit-scrollbar {
    width: 6px;
}

.side-country-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.side-country-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
}

.side-country-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.setup-slot {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    background: #141418;
    border: 1px solid #333;
    text-align: center;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
    position: relative;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

.setup-slot:hover {
    background: #1a1a20;
    transform: translateY(-1px);
}

.setup-slot:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.setup-slot.active-a {
    border-left: 4px solid #ff4757;
    background: #181416;
}

.setup-slot.active-b {
    border-left: 4px solid #2e86de;
    background: #151720;
}

.slot-label {
    font-size: 10px;
    color: #aaa;
    margin-bottom: 4px;
}

.slot-name {
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.slot-controls {
    display: flex;
    gap: 4px;
    align-items: center;
}

.mini-select {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    color: #ccc;
    font-size: 9px;
    padding: 2px 4px;
    border-radius: 3px;
    outline: none;
    text-transform: uppercase;
}

.clear-slot-btn {
    background: rgba(255,255,255,0.05);
    color: #666;
    border: none;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clear-slot-btn:hover {
    background: rgba(255,71,87,0.2);
    color: #ff4757;
}

.vs-divider {
    font-weight: 900;
    color: #444;
    font-style: italic;
}

/* Advanced-settings peek button is a mobile-only affordance; on desktop the full
   setup panel is always visible so it would be redundant. */
.setup-adv-btn { display: none; }
.setup-scenario-btn { display: none; }

.setup-options {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.option-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.option-row label {
    font-size: 12px;
    color: #ccc;
}

.option-row input[type="range"] {
    width: 60%;
}

.start-btn {
    width: 100%;
    padding: 10px 12px;
    background: #b33939;
    color: #fdfdfd;
    border: 1px solid #e55039;
    border-radius: 3px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    transition: background 0.12s ease, transform 0.06s ease, border-color 0.12s ease;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.75);
}

.start-btn:hover {
    background: #d64541;
    border-color: #ff6b6b;
    transform: translateY(-1px);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.9);
}

.start-btn:active {
    transform: scale(0.98);
}

.start-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.setup-panel.minimized .setup-sides,
.setup-panel.minimized #setup-prompt,
.setup-panel.minimized #setup-options {
    display: none !important;
}

.setup-panel.minimized {
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.stats-panel.minimized .stats-grid,
.stats-panel.minimized .tug-of-war {
    display: none !important;
}

.stats-panel.minimized {
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.stats-panel {
    pointer-events: auto;
    /* slightly lighter stats panel */
    background: rgba(14, 14, 16, 0.82);
    backdrop-filter: blur(6px);
    padding: 16px 18px;
    border-radius: 6px;
    margin-top: auto;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.7);
    width: 95%;
    max-width: 540px;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-header {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 1px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
}

.stats-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.side-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-a-block { text-align: left; }
.team-b-block { text-align: right; }

.stat-name {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.stat-metrics {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric {
    display: flex;
    flex-direction: column;
}

.team-b-block .metric { align-items: flex-end; }

.metric-label {
    font-size: 8px;
    color: #444;
    font-weight: 900;
    letter-spacing: 1px;
}

.metric-value {
    font-size: 12px;
    font-weight: 900;
    font-family: monospace;
    color: #eee;
}

.stats-vs {
    align-self: center;
    font-style: italic;
    font-weight: 900;
    color: #222;
    font-size: 16px;
}

.tug-of-war {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 5px;
}

.control-pct {
    font-size: 11px;
    font-weight: 900;
    font-family: monospace;
    color: #888;
    min-width: 35px;
}

.team-a { text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease; }
.team-b { text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease; }

.stat-progress {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    overflow: hidden;
    flex: 1;
}

.progress-inner {
    height: 100%;
    background: #ff4757;
    width: 50%;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.4);
}

.progress-marker {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255,255,255,0.5);
}

.mini-btn {
    background: #2a2d31;
    color: #f0f0f0;
    border: 1px solid #3a4046;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

.mini-btn.active {
    background: #3d593c;
}

.status-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

.control-group {
    display: flex;
    gap: 3px;
    align-items: center;
    border-right: 1px solid rgba(255,255,255,0.1);
    padding-right: 6px;
}

.control-group:last-child {
    border-right: none;
    padding-right: 0;
}

.mini-btn {
    background: rgba(255, 255, 255, 0.03);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 9px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.mini-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: translateY(-1px);
}

.mini-btn.active {
    background: #264f39;
    color: #a6f4c5;
    border-color: #3fa96a;
    box-shadow: none;
}

@media (max-width: 768px) {
    .status-panel {
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }
    .status-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        row-gap: 8px;
    }
    /* The control groups must wrap too — otherwise a single group (e.g. the
       view toggles) is wider than a phone screen and its buttons get clipped
       off both edges and become untappable. */
    .control-group {
        border-right: none;
        padding-right: 0;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        row-gap: 6px;
    }
    /* Touch-friendly tap targets: the default mini buttons are ~22px tall,
       below the comfortable touch minimum. Bump them on phones. */
    .status-right .mini-btn,
    .setup-panel .mini-btn {
        min-height: 42px;
        padding: 9px 13px;
        font-size: 11px;
        letter-spacing: 0.5px;
    }
    /* Icon / speed buttons carry tiny inline min-width/padding (pause ⏸, mute 🔊,
       the ‹ › speed steppers) that keep them fiddly on a touchscreen. Force them
       to a proper square touch target — inline styles win on specificity, so
       these need !important to actually take effect on phones. */
    .status-right .mini-btn,
    #speed-controls .mini-btn {
        min-width: 42px !important;
        min-height: 42px !important;
    }
    #speed-controls { gap: 8px !important; }
    #pause-btn { font-size: 16px; }
    /* Keep the title from eating the whole row */
    #status-text { font-size: 15px; }

    /* Conflict setup: share the width between the two side columns so SIDE A
       and SIDE B are BOTH on-screen and tappable. The default .side-col is a
       fixed 160px each; two of them plus the gap are wider than a phone, so the
       sides-container scrolls horizontally and SIDE B (the tab you tap to switch
       to it) sits off the right edge — you literally can't reach it to switch. */
    .setup-sides { gap: 8px; }
    .side-col { flex: 1 1 0; min-width: 0; }
    /* The in-game control bar (#game-status, z 1020) wraps to ~290px tall on a
       phone and overlaps the setup panel (z 1010) — its buttons sit ON TOP of
       the SIDE A / SIDE B tabs and swallow the taps, so switching sides does
       nothing. Lift the setup panel above the toolbar while you're setting up;
       it closes once the war starts, revealing the toolbar again. */
    #setup-panel { z-index: 1030; }
}

.bottom-controls {
    display: flex;
    justify-content: center;
}

.coordinates-display {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    color: #9ea7b3;
    padding: 3px 10px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 10px;
    font-family: "JetBrains Mono", Consolas, monospace;
}

/* Map Overrides */
.leaflet-container {
    /* Pitch black base to ensure the canvas gradient is the primary visual */
    background: #000 !important;
}

.leaflet-control-attribution {
    display: none !important;
}

/* Custom Marker Styles */
.unit-icon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
}

.treaty-alert {
    margin-top: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% { border-color: rgba(255, 215, 0, 0.2); box-shadow: 0 0 0px rgba(255, 215, 0, 0); }
    50% { border-color: rgba(255, 215, 0, 0.6); box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
    100% { border-color: rgba(255, 215, 0, 0.2); box-shadow: 0 0 0px rgba(255, 215, 0, 0); }
}

.treaty-content {
    text-align: center;
}

#treaty-msg {
    font-size: 12px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.treaty-buttons {
    display: flex;
    gap: 10px;
}

.treaty-btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
}

.treaty-btn.accept {
    background: #27ae60;
    color: white;
}

.treaty-btn.reject {
    background: #c0392b;
    color: white;
}

.city-marker {
    background: white;
    border: 1.5px solid #000;
    border-radius: 50%;
    pointer-events: none;
}

.city-marker.occupied-a {
    background: #ff4757;
}

.city-marker.occupied-b {
    background: #2e86de;
}

.buff-btn {
    pointer-events: auto;
    margin-top: 8px;
    padding: 4px 10px;
    font-size: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #666;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 900;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    align-self: center;
}

.buff-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #aaa;
}

.buff-btn.active {
    background: #f1c40f;
    color: #000;
    border-color: #f1c40f;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.4);
}

.buff-btn.super-active, .start-btn.super-active {
    background: #e67e22;
    color: #fff;
    border-color: #d35400;
    box-shadow: 0 0 20px rgba(230, 126, 34, 0.6);
    animation: pulse-orange 2s infinite;
}

.buff-btn.godly-active, .start-btn.godly-active {
    background: #ffffff;
    color: #000;
    border: 2px solid #000;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 60px rgba(255, 255, 255, 0.4);
    animation: pulse-godly 1.5s infinite;
    font-weight: 900;
}

@keyframes pulse-godly {
    0% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
    50% { transform: scale(1.08); box-shadow: 0 0 40px rgba(255, 255, 255, 1.0); }
    100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
}

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

#editor-toolbox .mini-btn {
    font-size: 10px;
    padding: 6px 10px;
}

.hub-item {
    background: #141418;
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.hub-item:hover {
    background: #1a1a20;
    transform: translateY(-2px);
    border-color: #555;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7);
}

.hub-preview-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: #000;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.hub-content {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hub-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.hub-name {
    font-weight: bold;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-description {
    font-size: 11px;
    color: #aaa;
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em;
}

.hub-comment-count {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hub-description.expanded {
    -webkit-line-clamp: unset;
    height: auto;
    display: block;
}

.show-more-btn {
    margin-top: 2px;
    font-size: 9px;
    padding: 3px 8px;
}

.hub-meta {
    font-size: 11px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hub-author-img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.hub-actions {
    display: flex;
    gap: 8px;
}

#hub-list::-webkit-scrollbar {
    width: 6px;
}

#hub-list::-webkit-scrollbar-track {
    background: transparent;
}

#hub-list::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}

#editor-toolbox .mini-btn.active, .hub-tabs .mini-btn {
    background: transparent;
    color: #666;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    border: none;
    padding: 10px 20px;
}

.hub-tabs .mini-btn.active {
    background: rgba(255, 255, 255, 0.05);
    color: #2e86de;
    box-shadow: inset 0 0 0 1px rgba(46, 134, 222, 0.3);
}

.hub-tabs .mini-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

/* ERA PICKER REMAKE */
.era-modal {
    max-width: 720px;
    padding: 24px 24px 18px;
}

.era-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.era-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.era-subtitle {
    font-size: 11px;
    color: #777;
    letter-spacing: 0.4px;
}

.settings-tab-container, .era-tabs, .hub-tabs {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.03);
    padding: 3px;
    border-radius: 2px;
    margin-bottom: 20px;
    justify-content: flex-end;
    border: 1px solid rgba(255,255,255,0.08);
    width: fit-content;
    align-self: flex-end;
}

.settings-tab-btn, .era-tabs .mini-btn, .hub-tabs .mini-btn {
    background: transparent;
    border: none !important;
    color: rgba(255,255,255,0.4);
    padding: 8px 16px;
    border-radius: 1px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
}

.settings-tab-btn:hover, .era-tabs .mini-btn:hover, .hub-tabs .mini-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

.settings-tab-btn.active, .era-tabs .mini-btn.active, .hub-tabs .mini-btn.active {
    background: #ff4757 !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3) !important;
}

.era-page {
    display: none;
    margin-top: 4px;
}

.era-page.era-page-active {
    display: block;
}

.era-timeline-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #555;
    margin: 14px 0 6px;
}

.era-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.era-card {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #333;
    background: #141418;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.era-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.75);
    border-color: #555;
    background: #1a1a20;
}

.era-card-primary {
    border-color: #ff4757;
    background: #181416;
}

.era-card-primary:hover {
    border-color: #ff6b81;
    background: #20181a;
}

.era-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.era-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.era-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.era-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.era-name {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fff;
}

.era-desc {
    font-size: 11px;
    color: #ccc;
}

.era-meta {
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-top: 2px;
}

.era-chip {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #ddd;
    background: rgba(0,0,0,0.5);
}

.era-chip-hot {
    border-color: rgba(255,71,87,0.8);
    color: #ffb0ba;
    background: rgba(255,71,87,0.15);
}

.era-hint {
    margin-top: 10px;
    font-size: 10px;
    color: #777;
    text-align: center;
}

.era-back-btn {
    margin-top: 16px;
}

.painting-cursor {
    cursor: crosshair !important;
}

/* Loading Overlay Styles */
.loading-content {
    text-align: center;
    align-items: center;
    gap: 20px;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 71, 87, 0.1);
    border-top: 3px solid #ff4757;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

#loading-status {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.loading-bar-container {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    overflow: hidden;
}

.loading-bar-fill {
    height: 100%;
    width: 0%;
    background: #ff4757;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
}

.loading-tip {
    font-size: 11px;
    color: #666;
    font-style: italic;
    max-width: 320px;
    line-height: 1.4;
}

.thematic-overlay {
    background: url('assets/img/Screenshot 2026-03-02 212802.webp') no-repeat center center;
    background-size: cover;
    backdrop-filter: none;
}

#loading-overlay.thematic-overlay #loading-standard-content {
    display: none !important;
}

#loading-overlay:not(.thematic-overlay) #loading-thematic-content {
    display: none !important;
}

#loading-overlay.thematic-overlay #loading-thematic-content {
    display: flex !important;
}

.thematic-overlay .menu-v2-container {
    padding: 60px;
    pointer-events: none;
}

.thematic-overlay .menu-v2-nav {
    pointer-events: auto;
}

.thematic-loading-body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 15px;
    padding-top: 40px;
}

.thematic-loading-body .loading-status-text {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.thematic-loading-body .loading-bar-container {
    height: 2px;
    width: 300px;
}

.hub-tabs .mini-btn {
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    font-size: 9px;
    padding: 6px 12px;
}

.hub-tabs .mini-btn.active {
    background: #ff4757 !important;
    color: #fff !important;
    border-color: #ff4757 !important;
}

.tutorial-popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 20px;
    padding-left: 5%;
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
}

.tutorial-content {
    pointer-events: auto;
    max-width: 380px;
    padding: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
}

.tutorial-step {
    animation: fadeIn 0.3s ease-out;
}

.tutorial-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.tutorial-icon {
    font-size: 32px;
}

.tutorial-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
}

.tutorial-body {
    font-size: 13px;
    line-height: 1.5;
    color: #ccc;
    margin-bottom: 20px;
}

.tutorial-body b {
    color: #ff4757;
}

.tutorial-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
}

#tutorial-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: background 0.3s;
}

.dot.active {
    background: #ff4757;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
}



.game-date-display {
    position: static;
    margin: 8px auto 0;
    text-align: center;
    z-index: 1002;
    pointer-events: none;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         0   -2px 0 #000,
         0    2px 0 #000,
        -2px  0   0 #000,
         2px  0   0 #000;
}

.conflict-name-banner {
    position: static;
    margin: 6px auto 0;
    max-width: 90%;
    text-align: center;
    z-index: 1002;
    pointer-events: none;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         0   -2px 0 #000,
         0    2px 0 #000,
        -2px  0   0 #000,
         2px  0   0 #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casualty-panel {
    position: absolute;
    top: 15%;
    left: 10%;
    /* make casualty panel more solid and framed */
    background: rgba(12,12,14,0.9);
    backdrop-filter: blur(8px);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 160px;
    z-index: 1001;
    box-shadow: 0 28px 60px rgba(0,0,0,0.75);
}

.casualty-title {
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 2px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 5px;
}

.casualty-side-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.casualty-item {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.casualty-item.secondary {
    margin-left: 12px;
    opacity: 0.85;
    transform: scale(0.8);
    transform-origin: left;
    margin-top: -2px;
}

.cas-flag {
    width: 30px;
    height: 18px;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: #222;
    flex-shrink: 0;
}

.cas-flag.small {
    width: 22px;
    height: 13px;
}

.cas-value {
    font-size: 18px;
    font-weight: 900;
    font-family: monospace;
    color: #fff;
}

.secondary .cas-value {
    font-size: 14px;
}

.cas-value.team-a { color: #ff4757; }
.cas-value.team-b { color: #2e86de; }

/* Leaderboard */
.leaderboard-content {
    max-width: 520px;
}

.leaderboard-header {
    display: flex;
    align-items: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 6px;
    margin-bottom: 8px;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    font-size: 11px;
}

.leaderboard-row:nth-child(odd) {
    background: rgba(255,255,255,0.015);
}

.leaderboard-flag {
    width: 26px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.4);
    background:#000;
    flex-shrink: 0;
}

.leaderboard-name {
    flex: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.leaderboard-name span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-tiles,
.leaderboard-units {
    flex: 1;
    text-align: right;
    font-family: monospace;
    color: #ccc;
}

.leaderboard-rank {
    width: 40px;
    text-align: right;
    font-weight: 900;
    color: #f1c40f;
    font-family: monospace;
}

@media (max-width: 540px) {
    .leaderboard-header span:nth-child(2),
    .leaderboard-row .leaderboard-tiles {
        display:none;
    }
}

/* Global chat scroll area */
#global-chat-list {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: 320px; /* ensure a scrollable window inside the modal */
}

.ref-handle {
    cursor: nwse-resize;
    z-index: 1000;
}

.ref-handle-center {
    cursor: move;
    z-index: 1001;
}

/* Import-from-scenario country cards */
.import-country-card-list {
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    padding-right: 4px;
}

.import-country-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    font-size: 11px;
}

.import-country-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-1px);
}

.import-country-card.selected {
    border-color: #ff4757;
    box-shadow: 0 0 0 1px rgba(255,71,87,0.5);
}

.import-country-flag {
    width: 28px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.4);
    background:#000;
    flex-shrink: 0;
}

.import-country-name {
    font-weight: 600;
    color:#fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-country-tiles {
    font-size:9px;
    color:#888;
}

#no-nations-modal .start-btn {
    padding: 12px;
    font-size: 11px;
}

/* Editor Choice Modal & Menu Card Styles */
.editor-choice-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.menu-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    color: white;
    text-align: left;
}

.menu-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    border-color: #ff4757;
}

.menu-card.primary {
    border-color: rgba(255, 71, 87, 0.3);
}

.card-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 71, 87, 0.12);
    border-radius: 8px;
    color: #ff4757;
    flex-shrink: 0;
}

.card-icon svg {
    width: 20px;
    height: 20px;
}

.menu-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-card .btn-text {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.menu-card .btn-sub {
    font-size: 11px;
    color: #888;
}

/* Integrated Scroller Styles */
.scenario-selection-container {
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    box-sizing: border-box;
    border-radius: 2px;
    animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

@keyframes slideInRight {
    from { transform: translateX(40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.selection-back-btn {
    background: transparent;
    border: none;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: color 0.2s;
}

.selection-back-btn:hover {
    color: #ff4757;
}

.selection-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: #fff;
    margin: 0;
    letter-spacing: 1px;
}

.scenario-scroller-v2 {
    flex: 1;
    overflow-y: auto;
    padding-right: 15px;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.scenario-scroller-v2::-webkit-scrollbar {
    width: 4px;
}

.scenario-scroller-v2::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}

.scroller-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scroller-label {
    font-size: 10px;
    color: #555;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 900;
}

.scroller-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scroller-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 20px;
    border-radius: 1px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}

.scroller-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    transform: translateX(-10px);
}

.scroller-card.primary {
    border-color: #ff4757;
    background: rgba(255, 71, 87, 0.05);
}

.scroller-card.selected {
    border-color: #ff4757;
    background: rgba(255, 71, 87, 0.15);
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.2);
    transform: translateX(-15px);
}

.scroller-card-name {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.scroller-card-desc {
    font-size: 11px;
    color: #888;
    line-height: 1.4;
    margin-bottom: 6px;
}

.scroller-card-credits {
    font-size: 9px;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 900;
}

/* Ensure Hub Nav and Expanded Viewer stay within the clipped area and have enough room */
#scenario-hub-modal .menu-v2-nav, .item-details-nav {
    width: 45%;
    right: 0;
}

.item-details-nav {
    position: absolute;
    right: 0;
    top: 0;
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 40px;
    box-sizing: border-box;
    z-index: 2;
}

.item-comments-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}

.item-comments-v2::-webkit-scrollbar {
    width: 4px;
}

.item-comments-v2::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}

.comment-composer-v2 {
    margin-top: 15px;
    background: rgba(255,255,255,0.02);
    padding: 15px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.05);
}

#scenario-hub-modal .scenario-selection-container {
    padding-bottom: 20px;
}

@media (max-width: 1024px) {
    #scenario-hub-modal .menu-v2-nav, .item-details-nav { width: 380px; right: 1%; }
}

@media (max-width: 600px) {
    #scenario-hub-modal .menu-v2-nav, .item-details-nav { 
        width: 100%; 
        position: relative; 
        right: auto; 
        top: auto; 
        transform: none;
        height: auto;
        padding-top: 20px;
    }
    .item-details-nav {
        align-items: stretch;
    }
}

/* ============================================================================
   HOME MENU REDESIGN (2026-06) — mobile-first, sharp military aesthetic.
   Scoped to #main-menu so the shared .menu-v2-* classes that the SETTINGS and
   editor overlays also reuse are left untouched (that leak was the "settings
   window is weird" regression). Layout: DEMO eyebrow -> prominent title ->
   PLAY hero -> LOAD FILE -> three pills (EDITOR/TUTORIAL/SETTINGS) -> footer
   icons (Discord, itch) + tiny text links. Sharp corners, no letter-spacing.
   ========================================================================= */

/* Background: desktop keeps the original `cover` crop (unchanged per request).
   On mobile the landscape map is rotated 90° to fill the portrait screen — see
   the rotation rules in the max-width:600px block below. */

/* DEMO eyebrow ABOVE the title so MODERN WARS reads as the headline. */
#main-menu .menu-v2-eyebrow {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 4px;          /* the one label where wide tracking belongs */
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* Sharp corners + no kerning on every menu button. */
#main-menu .menu-v2-link { border-radius: 0; letter-spacing: 0; }

/* LOAD FILE — outlined secondary CTA, sits right under PLAY. */
#main-menu .secondary-cta { border: 1px solid rgba(255,255,255,0.25); opacity: 0.92; font-size: 17px; }

/* Footer cluster (small icons + tiny text links). */
#main-menu .menu-v2-foot { display: flex; flex-direction: column; gap: 12px; width: 100%; align-items: flex-end; }
/* Action wrapper: transparent on desktop (display:contents keeps the old right-rail
   layout), but a centered flex column on mobile (see the mobile block below). */
.menu-actions { display: contents; }
#main-menu .menu-foot-icons { display: flex; gap: 12px; align-items: center; }
#main-menu .foot-icon {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 0;
    color: #fff;
    opacity: 0.8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, background 0.2s ease;
}
#main-menu .foot-icon:hover { opacity: 1; background: rgba(255,71,87,0.25); }
#main-menu .foot-icon svg { width: 22px; height: 22px; }
#main-menu .foot-icon.foot-itch { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 13px; letter-spacing: 0; }
#main-menu .menu-foot-links { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: flex-end; }
#main-menu .foot-link {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    letter-spacing: 0;
    cursor: pointer;
    padding: 2px 0;
    transition: color 0.2s ease;
}
#main-menu .foot-link:hover { color: #ff4757; }

/* ---- MOBILE: clean top-down stack, PLAY high, all inside one viewport ---- */
@media (max-width: 600px) {
    /* Rotate the landscape map 90° to fill the portrait phone. The rotated layer
       inherits background-image from #main-menu, so the per-era bg the game swaps
       in (inline style) still shows — just rotated. Desktop is left untouched. */
    #main-menu.main-menu-v2 { overflow: hidden; background-color: #0a0b0e; }
    #main-menu.main-menu-v2::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vh;
        height: 100vw;
        background-image: inherit;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        transform: translate(-50%, -50%) rotate(90deg);
        z-index: 0;
    }

    #main-menu .menu-v2-overlay {
        width: 100%;
        clip-path: none;
        backdrop-filter: blur(2px);
        background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.82) 100%);
    }

    #main-menu .menu-v2-container { padding: 3vh 22px max(46px, calc(env(safe-area-inset-bottom) + 30px)); justify-content: flex-start; align-items: center; }

    /* Tight title block at the top so PLAY rides high. */
    #main-menu .menu-v2-header { margin: 0; max-width: 100%; text-align: center; flex-shrink: 0; }
    #main-menu .menu-v2-eyebrow { font-size: 13px; letter-spacing: 5px; margin-bottom: 4px; }
    #main-menu .menu-v2-title { font-size: 40px; letter-spacing: -1px; line-height: 0.95; }
    #main-menu .menu-v2-author { font-size: 13px; margin-top: 6px; }

    /* Stack sits directly under the title — no vertical centering, so PLAY is high. */
    /* 3-zone home: header pinned top, this nav fills the middle, footer pinned bottom. */
    #main-menu .menu-v2-nav { position: relative; flex: 1; min-height: 0; padding: 0; margin: 0; }
    #main-menu .nav-links-fade { flex: 1; width: 100%; align-items: stretch; }
    /* Centers PLAY / LOAD FILE / pills in the space between the header and the footer. */
    #main-menu .menu-actions { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; flex: 1; width: 100%; }

    /* PLAY hero: full-width, filled, sharp, big tap target. */
    #main-menu .menu-v2-link.primary {
        width: 100%;
        justify-content: center;
        gap: 12px;
        background: #ff4757;
        color: #fff;
        padding: 18px;
        margin: 0;
        font-size: 30px;
        box-shadow: 0 12px 34px rgba(255,71,87,0.4);
    }
    #main-menu .menu-v2-link.primary:hover { transform: none; }
    #main-menu .menu-v2-link.primary svg { width: 28px; height: 28px; }

    /* LOAD FILE: full-width outlined button directly below PLAY. */
    #main-menu .secondary-cta {
        width: 100%;
        justify-content: center;
        padding: 14px;
        font-size: 16px;
        background: rgba(255,255,255,0.04);
    }
    #main-menu .secondary-cta:hover { transform: none; background: rgba(255,255,255,0.1); }

    /* Three equal pills. */
    #main-menu .menu-v2-tools { display: flex; justify-content: center; gap: 10px; width: 100%; margin-top: 6px; }
    #main-menu .menu-v2-tools .pill {
        flex: 1;
        min-width: 0;
        justify-content: center;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.14);
        padding: 14px 6px;
        font-size: 13px;
        opacity: 0.95;
    }
    #main-menu .menu-v2-tools .pill:hover { transform: none; opacity: 1; background: rgba(255,71,87,0.2); }

    /* Footer centered toward the bottom, with more breathing room. */
    #main-menu .menu-v2-foot { align-items: center; margin-top: 0; gap: 20px; flex-shrink: 0; }
    #main-menu .menu-foot-icons { justify-content: center; gap: 16px; }
    #main-menu .foot-icon { width: 46px; height: 46px; }
    #main-menu .foot-icon.foot-itch { width: auto; padding: 0 16px; height: 46px; }
    #main-menu .menu-foot-links { justify-content: center; gap: 12px 22px; }
    #main-menu .foot-link { font-size: 12px; }
}

/* ----------------------------------------------------------------------------
   Sub-screen polish: match the home's sharp, low-kerning buttons across the
   settings tabs, era-select tabs, back buttons and dialog actions (corners +
   tracking only — no layout change). Tiny 9px tab labels keep a hair of
   tracking so the uppercase stays legible.
   ------------------------------------------------------------------------- */
.selection-back-btn,
.start-btn { border-radius: 0; letter-spacing: 0; }
.settings-tab-btn,
.era-tabs .mini-btn,
.hub-tabs .mini-btn { border-radius: 0; letter-spacing: 1px; }

/* ============================================================================
   REUSABLE MOBILE "SCREEN SHELL" (2026-06) — shared by every secondary screen.
   ----------------------------------------------------------------------------
   One pattern for era-select, settings, hub, … so we stop hand-rolling each:

       host overlay (#main-menu.scenario-active | #settings-overlay | …)
         └─ .scenario-selection-container   ← shell: flex column, full screen
              ├─ .selection-header           ← FIXED top: BACK + title/tabs
              ├─ .scenario-scroller-v2       ← the ONLY scrolling region
              └─ .screen-cta (.start-btn)    ← action button PINNED at the bottom

   New screen = reuse these classes + a small host adapter (full-screen, hide
   the big title, opaque scrim) + tag the footer button `.screen-cta`.
   Mobile-only; desktop keeps each screen's existing layout.
   ========================================================================= */

/* Footer CTA (all viewports): a flex footer that never scrolls away. */
.screen-cta { flex-shrink: 0; width: 100%; margin-top: 14px; }
.screen-cta:disabled {
    background: #23262d;
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.45);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 600px) {
    /* ---- The shell itself (shared by all hosts) ---- */
    .scenario-selection-container {
        height: 100%;
        max-height: none;
        width: 100%;
        /* safe-area bottom keeps the CTA clear of the iOS home indicator / browser bar */
        padding: 14px 14px max(16px, env(safe-area-inset-bottom));
        border: none;
        border-radius: 0;
        background: rgba(12,13,16,0.9);   /* opaque enough that the map can't bleed through */
        animation: none;
    }
    .selection-header { flex-shrink: 0; margin-bottom: 12px; padding-bottom: 12px; }
    .selection-back-btn { color: #fff; font-size: 13px; }
    .selection-title { font-size: 19px; }
    .scenario-scroller-v2 { flex: 1; min-height: 0; padding-right: 6px; }
    .screen-cta { margin-top: 12px; padding: 16px; font-size: 16px; }

    /* ---- Host adapter: HOME → era select ---- */
    #main-menu.scenario-active .menu-v2-header { display: none; }
    #main-menu.scenario-active .menu-v2-container { padding: 0; }
    #main-menu.scenario-active .menu-v2-nav { height: 100%; padding: 0; margin: 0; }
    #main-menu .scroller-card { padding: 16px; }
    #main-menu .scroller-card:hover,
    #main-menu .scroller-card.selected,
    #main-menu .scroller-card.primary { transform: none; }

    /* ---- Host adapter: SETTINGS (was a broken narrow column with map bleed) ---- */
    #settings-overlay .menu-v2-overlay {
        width: 100%;
        clip-path: none;
        background: rgba(8,9,12,0.97);
        backdrop-filter: blur(3px);
    }
    #settings-overlay .menu-v2-container { padding: 0; }
    #settings-overlay .menu-v2-header { display: none; }   /* big SETTINGS title eats space; tabs are the nav */
    #settings-overlay .menu-v2-nav { position: static; width: 100%; height: 100%; padding: 0; margin: 0; }
    /* BACK on its own row; the four tabs go full-width and scroll if cramped. */
    #settings-overlay .selection-header { flex-wrap: wrap; gap: 10px 14px; }
    #settings-overlay .settings-tab-container {
        display: flex;
        width: 100%;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #settings-overlay .settings-tab-container::-webkit-scrollbar { display: none; }
    #settings-overlay .settings-tab-btn { flex: 1 0 auto; white-space: nowrap; padding: 10px 14px; font-size: 11px; }
    #settings-overlay .setting-group { width: 100%; box-sizing: border-box; }

    /* ---- Host adapter: scenario INITIALIZING / loading screen ----
       Same shell classes as settings → same broken mobile layout. Here we want a
       full-screen, opaque, CENTERED loading display (no narrow column, no map/
       screenshot bleed, no right-aligned text). */
    #loading-overlay .menu-v2-overlay {
        width: 100%;
        clip-path: none;
        background: rgba(8,9,12,0.97);   /* kills the .thematic-overlay screenshot bleed */
        backdrop-filter: blur(3px);
    }
    #loading-overlay .menu-v2-container { padding: 0; }
    #loading-overlay .menu-v2-header { display: none; }
    #loading-overlay .menu-v2-nav { position: static; width: 100%; height: 100%; padding: 0; margin: 0; }
    #loading-overlay .scenario-selection-container {
        justify-content: center;
        align-items: center;
        text-align: center;
        background: transparent;   /* the overlay scrim already darkens the whole screen */
    }
    #loading-overlay .selection-header {
        justify-content: center;
        border-bottom: none;
        margin-bottom: 6px;
        padding-bottom: 0;
    }
    #loading-overlay .selection-title { font-size: 13px; letter-spacing: 4px; color: rgba(255,255,255,0.5); }
    #loading-overlay .thematic-loading-body {
        align-items: center;
        text-align: center;
        gap: 22px;
        padding-top: 0;
        width: 100%;
    }
    #loading-overlay .thematic-loading-body .loading-status-text { font-size: 24px; letter-spacing: 1px; }
    #loading-overlay .thematic-loading-body .loading-bar-container { width: 78%; max-width: 300px; height: 3px; }
    #loading-overlay .loader-spinner { width: 48px; height: 48px; }
    #loading-overlay .loading-tip { max-width: 82%; }

    /* ---- Host adapter: LEADERBOARD (same shell as settings → same broken narrow
       column + map bleed on phones). Make it full-screen and opaque so the rankings
       get the whole width instead of a cramped ~150px column with the map showing
       through (see owner report 2026-07). */
    #leaderboard-overlay .menu-v2-overlay {
        width: 100%;
        clip-path: none;
        background: rgba(8,9,12,0.97);
        backdrop-filter: blur(3px);
    }
    #leaderboard-overlay .menu-v2-container { padding: 0; }
    #leaderboard-overlay .menu-v2-header { display: none; }
    #leaderboard-overlay .menu-v2-nav { position: static; width: 100%; height: 100%; padding: 0; margin: 0; }
    #leaderboard-overlay .leaderboard-list { max-height: none; }
}

/* The drawer handle only exists for the mobile bottom sheet; hide it elsewhere. */
.drawer-handle { display: none; }
/* The MORE side-sheet + backdrop are mobile-only; hidden on desktop. */
.side-sheet, .sheet-backdrop { display: none; }

/* ============================================================================
   IN-GAME HUD — MOBILE (2026-06). Restructures the war HUD into three zones:
     • TOP NAV   (#game-status): slim, dense view/utility controls collapse
                  behind a ⋮ MORE toggle; speed controls stay visible.
     • BOTTOM DRAWER (#stats-panel): a draggable bottom sheet whose peek shows
                  the control-% bar; casualties are folded in. Decoupled from…
     • SIDE PANEL (#country-inspector / #city-inspector): slides in from the
                  right when a country/city is tapped (was overlapping stats).
   Desktop keeps its existing floating layout — this is all ≤600px, and every
   panel is still shown/hidden by the game's own .style.display toggles.
   ========================================================================= */
@media (max-width: 600px) {
    #main-ui { padding: 8px; }

    /* ---- TOP BAR: minimal. Status text removed; the secondary controls are
       MOVED (by JS) into the MORE right side-sheet. Only speed + MORE stay. ---- */
    #game-status.status-panel { box-sizing: border-box; max-width: 100%; padding: 8px 10px; gap: 8px; position: relative; z-index: 1030; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
    #game-status .status-left { display: none; }                    /* drop "PLAYING: Modern Day" / "Global Conflict Active" */
    #game-status #minimize-status-btn { display: none; }
    #game-status #hud-more-btn { display: inline-flex !important; align-items: center; gap: 6px; background: #34495e; border-radius: 0; }
    #game-status #hud-more-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
    #game-status #random-war-btn { display: inline-flex; border-radius: 0; }   /* sharp edges, sits left of Controls */
    #game-status .control-group { border-right: none; padding-right: 0; }
    #game-status .simulation-controls { border: none; padding: 0; }
    #game-status .mini-btn { padding: 9px 11px; font-size: 11px; border-radius: 999px; }

    /* ---- MORE right side-sheet (view toggles, god, diplomacy, utilities) ---- */
    .sheet-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1045; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
    .sheet-backdrop.open { opacity: 1; pointer-events: auto; }
    .side-sheet {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 1046;
        width: min(82%, 320px); height: 100dvh;
        background: rgba(12,13,16,0.98); border-left: 1px solid rgba(255,255,255,0.1);
        box-shadow: -22px 0 60px rgba(0,0,0,0.6);
        transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
        display: flex; flex-direction: column; pointer-events: auto;
    }
    .side-sheet.open { transform: translateX(0); }
    .side-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); flex: 0 0 auto; }
    .side-sheet-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 16px; color: #fff; letter-spacing: 0.5px; }
    .sheet-x { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #fff; width: 38px; height: 38px; border-radius: 999px; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
    .side-sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 12px max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
    #hud-more-body .control-group { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; border: none; padding: 0; margin: 0; }
    #hud-more-body .control-group + .control-group { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; margin-top: 4px; }
    #hud-more-body .mini-btn { width: 100%; box-sizing: border-box; margin: 0; padding: 13px 12px; font-size: 13px; border-radius: 8px; justify-content: center; min-width: 0; }
    #hud-more-body label { color: #ccc; font-size: 13px; padding: 6px 0; }

    /* ---- BOTTOM DRAWER (#stats-panel) ---- */
    /* Game sets display:block inline, so we DON'T use flex order here — the JS
       reorders the DOM (handle + control-% first) and children stack as blocks. */
    #stats-panel.stats-panel {
        position: fixed; left: 0; right: 0; bottom: 0;
        width: 100%; max-width: none; margin: 0; box-sizing: border-box;   /* include padding → truly full-width */
        border-radius: 16px 16px 0 0;
        padding: 0 14px max(14px, env(safe-area-inset-bottom));
        max-height: 80vh; max-height: 80dvh;
        z-index: 1025;
        transform: translateY(calc(100% - 92px));   /* peek = handle + control-% bar */
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
        overflow: hidden;
    }
    #stats-panel.drawer-open { transform: translateY(0); overflow-y: auto; -webkit-overflow-scrolling: touch; }
    #stats-panel.dragging { transition: none; }
    /* Big, easy-to-grab drag zone (44px-ish) with a small visible bar. */
    #stats-panel .drawer-handle, #setup-panel .drawer-handle { display: block; position: relative; height: 26px; width: 100%; margin: 0; padding: 0; background: none; cursor: grab; touch-action: none; }
    #stats-panel .drawer-handle::before, #setup-panel .drawer-handle::before { content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 46px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.4); }
    #stats-panel .tug-of-war { margin: 0 0 10px; }                   /* control-% lives in the peek */
    #stats-panel .casualty-panel {                                   /* folded in via JS */
        position: static; left: auto; top: auto; width: 100%; min-width: 0;
        pointer-events: auto; margin: 8px 0 0; box-shadow: none;
        background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06);
    }
    /* War report fits the full-width sheet — flex items shrink instead of spilling right. */
    #stats-panel.drawer-open { overflow-x: hidden; }
    #stats-panel .stats-grid { gap: 8px; }
    #stats-panel .side-stats { min-width: 0; }
    #stats-panel .stat-name { font-size: 15px; }
    #stats-panel .stats-header { font-size: 13px; }
    #stats-panel .casualty-side-list { min-width: 0; word-break: break-word; }

    /* ---- SIDE PANEL (country / city inspector) ---- */
    #country-inspector.setup-panel,
    #city-inspector.setup-panel {
        position: fixed; top: 0; right: 0; bottom: 0; left: auto;
        transform: none; width: min(86%, 340px); max-width: none; height: 100dvh;
        margin: 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom));
        border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
        z-index: 1040; box-shadow: -22px 0 60px rgba(0,0,0,0.6);
    }
    #country-inspector .start-btn, #country-inspector .mini-btn,
    #city-inspector .start-btn, #city-inspector .mini-btn { padding: 11px; }
    #country-inspector .panel-x, #city-inspector .panel-x { position: absolute; top: 12px; right: 12px; z-index: 2; }
    #country-inspector.setup-panel, #city-inspector.setup-panel { padding-top: 52px; }   /* room for the X */

    /* ---- SETUP PANEL: full-width usable sheet during setup ---- */
    #setup-panel.setup-panel {
        top: 60px; left: 8px; right: 8px;
        width: auto; max-width: none;
        max-height: calc(100dvh - 130px);
    }

    #game-date-display { font-size: 13px; }
    .bottom-controls { display: none; }                              /* coordinate readout is desktop-only noise */
}

/* ============================================================================
   CONFLICT SETUP — guided mobile bottom sheet (2026-06). The setup panel is a
   draggable sheet: the peek shows a step banner ("Choose your nation" → "Choose
   the enemy" → "Both sides ready"); the map stays free behind it; a DOM-observed
   JS layer auto-advances A→B and surfaces START when both sides are set.
   Expanded = the per-side country options. Plus a light top-bar pill refinement.
   ========================================================================= */
@media (max-width: 600px) {
    #setup-panel.setup-panel {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        width: 100%; max-width: none !important; margin: 0; box-sizing: border-box;   /* !important beats the inline max-width:320px → truly full-width */
        --peek: 148px;   /* resting peek shows the banner + the Scenarios/alt-history entry, not just the banner */
        border-radius: 16px 16px 0 0;
        padding: 0 14px max(14px, env(safe-area-inset-bottom));
        max-height: 84vh; max-height: 84dvh;
        z-index: 1024;
        transform: translateY(calc(100% - var(--peek)));
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
        overflow: hidden;
    }
    #setup-panel.has-picks { --peek: 152px; }              /* taller peek to expose Reset / START */
    #setup-panel.drawer-open { transform: translateY(0); overflow-y: auto; -webkit-overflow-scrolling: touch; }
    #setup-panel.dragging { transition: none; }

    #setup-panel .sheet-peek { display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    #setup-panel .setup-step-banner {
        text-align: center; font-family: 'Playfair Display', serif; font-weight: 700;
        font-size: 16px; letter-spacing: 0.3px; color: #fff; line-height: 1.25;
    }
    #setup-panel .setup-step-banner .sub {
        display: block; margin-top: 3px; font-family: -apple-system, sans-serif;
        font-size: 11px; font-weight: 400; letter-spacing: 0.2px; color: #9fb0c0;
    }
    /* START WAR + RESET share equal weight; both square (not styled differently). */
    #setup-panel .setup-peek-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    /* Explicit, obvious entry to the advanced options (force density, battle rules,
       manpower, time system, cinematic) — the drag-handle alone was getting missed. */
    #setup-panel .setup-adv-btn {
        display: block; flex: 1 0 100%; width: 100%; margin: 0;
        padding: 12px; border: 1px solid rgba(241,196,64,0.45); border-radius: 6px;
        background: rgba(241,196,64,0.12); color: #f1c440;
        font-family: -apple-system, sans-serif; font-size: 13px; font-weight: 700;
        letter-spacing: 0.4px; text-align: center; cursor: pointer;
    }
    #setup-panel.drawer-open .setup-adv-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #cfd8e0; }
    /* Sibling to the advanced button: a one-tap jump to the full scenario / era picker
       (incl. the alternate histories). Teal so it reads as a distinct action from the
       gold advanced-settings toggle. */
    #setup-panel .setup-scenario-btn {
        display: block; flex: 1 0 100%; width: 100%; margin: 0;
        padding: 12px; border: 1px solid rgba(74,170,200,0.5); border-radius: 6px;
        background: rgba(74,170,200,0.14); color: #7fcfe0;
        font-family: -apple-system, sans-serif; font-size: 13px; font-weight: 700;
        letter-spacing: 0.4px; text-align: center; cursor: pointer;
    }
    #setup-panel .setup-reset-btn {
        flex: 1; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.22);
        color: #e6e6e6; border-radius: 4px; padding: 14px; font-size: 13px; font-weight: 700;
        letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer;
    }
    #setup-panel #setup-peek-start { flex: 1; width: auto; margin: 0; border-radius: 4px; padding: 14px; }
    #setup-panel #setup-prompt { display: none; }          /* banner replaces it */
    #setup-panel .setup-title { display: none; }           /* redundant with the step banner */
    #setup-panel #minimize-setup-btn { display: none; }    /* drag handle replaces it */
    #setup-panel #sides-container { overflow-x: auto; }

    /* Collapsible chevron sections so options don't overwhelm. */
    #setup-panel .setup-section { border-top: 1px solid rgba(255,255,255,0.08); }
    #setup-panel #setup-options { border-top: none; }                 /* remove the extra line above Forces */
    #setup-panel .setup-section > summary {
        list-style: none; cursor: pointer; padding: 13px 2px; font-size: 12px; font-weight: 700;
        letter-spacing: 0.6px; color: #cdd6e0; text-transform: uppercase;
        display: flex; align-items: center; justify-content: space-between;
    }
    #setup-panel .setup-section > summary::-webkit-details-marker { display: none; }
    #setup-panel .setup-section > summary::after { content: "⌄"; font-size: 15px; color: #8a97a5; transition: transform 0.2s ease; }
    #setup-panel .setup-section[open] > summary::after { transform: rotate(180deg); }

    /* ---- TOP BAR: lighter, rounded contextual pills (less boxy) ---- */
    #game-status .mini-btn { border-radius: 999px; border-color: rgba(255,255,255,0.16); }
    #game-status .control-group:not(.simulation-controls) .mini-btn:not([style*="background"]) { background: rgba(255,255,255,0.06); }
}