/* system-map-styles.css — 3D Interactive Mogan System */

.system-map-container {
    position: relative;
    width: 100%;
    /* Layout math:
       - margin-top: 100px → ~20px of breathing room between the fixed site
         header (~80px tall) and the start of the map UI.
       - height: calc(100dvh - 100px - 60px) → container fits below the
         header with 60px of empty space reserved AT THE BOTTOM of the
         viewport. That bottom buffer means the footer never visually
         crowds the right-sidebar content when the user scrolls.
       - margin-bottom: 60px → guarantees the footer renders below the
         container with that buffer preserved in document flow. */
    margin-top: 100px;
    margin-bottom: 60px;
    height: calc(100dvh - 100px - 60px);
    min-height: 480px;
    padding: 0;
    overflow: hidden;
}

/* The Three.js canvas host fills the page behind the HUD */
#sm-canvas-host {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#sm-canvas-host canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    cursor: grab;
}

#sm-canvas-host canvas:active {
    cursor: grabbing;
}

/* --- Page header (system-view title above the canvas) ---
   Container now sits below the fixed site header (margin-top: 80px), so
   the page header just needs a small offset from the container's top. */
.sm-page-header {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    text-align: center;
    pointer-events: none;
    max-width: 680px;
    width: 90%;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.sm-page-header.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
    pointer-events: none;
}

.sm-page-header h1 {
    font-size: 2.4rem;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 0 0 24px rgba(74, 144, 226, 0.35);
}

.sm-page-header p {
    margin: 0;
    font-size: 0.92rem;
    color: #a9b3c1;
    font-style: italic;
    letter-spacing: 0.3px;
}

/* --- Breadcrumb nav (top-left, always visible above all overlays) ---
   Positioned relative to .system-map-container (which now sits below the
   fixed site header at margin-top: 80px). The breadcrumb sits at the very
   top-left of the map container, integrating with the continent view's
   top bar. */
#sm-breadcrumb {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 60; /* above continent overlay (25), back button (50), everything */
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}

.sm-crumb {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    padding: 5px 10px;
    background: rgba(20, 22, 35, 0.78);
    border: 1px solid rgba(74, 144, 226, 0.22);
    border-radius: 5px;
    color: #a9b3c1;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, transform 0.15s ease;
}

.sm-crumb:hover:not(.is-current) {
    background: rgba(74, 144, 226, 0.18);
    border-color: rgba(74, 144, 226, 0.55);
    color: #fff;
    transform: translateY(-1px);
}

.sm-crumb.is-current {
    background: rgba(74, 144, 226, 0.22);
    border-color: rgba(74, 144, 226, 0.55);
    color: #fff;
    cursor: default;
}

.sm-crumb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4a90e2;
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.7);
}

.sm-crumb-sep {
    color: rgba(74, 144, 226, 0.55);
    font-size: 1.1rem;
    line-height: 1;
    margin: 0 1px;
}

.sm-crumb[hidden],
.sm-crumb-sep[hidden] {
    display: none;
}

/* --- Back button (visible only in planet detail / continent view) ---
   Positioned at top-right of the system-map-container to balance with
   the breadcrumb on the left. Smaller and more discreet now that the
   breadcrumb provides the primary navigation path. */
#sm-back-button {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 55; /* above continent overlay (25), below breadcrumb (60) */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(20, 22, 35, 0.85);
    border: 1px solid rgba(74, 144, 226, 0.35);
    border-radius: 6px;
    color: #f1f1f1;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    font-family: inherit;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

/* Hide the back button when the continent view is active — the breadcrumb
   already provides the way back. Keep it for the system→eterna detail level
   where there is no continent breadcrumb context. */
.system-map-container:has(#sm-continent-view.is-visible) #sm-back-button {
    display: none;
}

#sm-back-button:hover {
    background: rgba(74, 144, 226, 0.18);
    border-color: rgba(74, 144, 226, 0.8);
    transform: translateY(-1px);
}

#sm-back-button > span:first-child {
    font-size: 1.05rem;
    line-height: 1;
}

/* --- Continent view (full-screen map overlay for Evel) ---
   Two-column grid: map on the left (1fr), country card on the right
   (300px) spanning both the toolbar row and the stage row. The card sits
   in its own grid track, so the map cannot bleed behind it. */
#sm-continent-view {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas:
        "toolbar card"
        "stage   card";
    gap: 8px;
    padding: 56px 16px 14px;
    background: radial-gradient(ellipse at center, #0e1228 0%, #050610 75%);
    opacity: 0;
    pointer-events: none; /* invisible should be inert too */
    transition: opacity 0.6s ease;
}

/* When no country is selected, collapse the right column so the map gets
   the full width. The :has() selector reacts to the card's hidden attribute. */
#sm-continent-view:not(:has(#sm-country-card:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "toolbar"
        "stage";
}

#sm-continent-view[hidden] {
    display: none;
}

#sm-continent-view.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Continent header (the EVEL title block) is hidden — the breadcrumb at
   the top-left already says "Mogan ▸ Eterna ▸ Evel" and the country card
   on the right shows the selected nation, so repeating "EVEL · 52 nations
   - The heart of Eterna" in a centered banner is redundant noise. Hiding
   it gives the map ~70px more vertical space. */
#sm-continent-header { display: none; }

#sm-atlas-toolbar {
    grid-area: toolbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.sm-atlas-search {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The "Search nations" label is redundant — the input placeholder already
   says "Search nations or capitals". Hide visually but keep for screen
   readers. */
.sm-atlas-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#sm-country-search {
    width: 100%;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(116, 211, 255, 0.28);
    border-radius: 8px;
    background: rgba(7, 11, 22, 0.70);
    color: #f1f6ff;
    font: inherit;
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28) inset;
}

#sm-country-search:focus {
    border-color: rgba(255, 217, 128, 0.70);
    box-shadow: 0 0 0 2px rgba(255, 217, 128, 0.12);
}

.sm-layer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: rgba(7, 11, 22, 0.68);
    border: 1px solid rgba(116, 211, 255, 0.22);
    border-radius: 8px;
}

.sm-layer-btn {
    min-height: 30px;
    padding: 0 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #9eabba;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
}

.sm-layer-btn:hover,
.sm-layer-btn.is-active {
    background: rgba(116, 211, 255, 0.16);
    color: #fff;
}

#sm-continent-stage {
    grid-area: stage;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 0; /* allow flex shrink inside grid row */
    overflow: hidden;
}

#sm-continent-canvas {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    cursor: pointer;
    border-radius: 8px;
    image-rendering: auto; /* let the browser bilinear-downsample the 2× raster */
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.72),
                0 0 0 1px rgba(74, 144, 226, 0.28),
                0 0 60px rgba(116, 211, 255, 0.10) inset;
}

/* --- Country info card (right side, GRID-PLACED) ---
   The card is its own grid track (right column, spans both rows). Grid
   stretch + min-height: 0 gives a definite height that overflow-y: auto
   can latch onto, so the card scrolls internally without escaping its
   column. An earlier attempt failed because of `height: 100%`, which
   collided with grid sizing — we rely on `align-self: stretch` (default)
   here instead. */
#sm-country-card {
    grid-area: card;
    min-height: 0;  /* allow the grid item to shrink so overflow-y engages */
    min-width: 0;   /* keep long content from blowing out the 300px track */
    z-index: 30;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 16px 18px;
    background: linear-gradient(180deg, rgba(20, 22, 35, 0.94) 0%, rgba(14, 18, 30, 0.92) 100%);
    border: 1px solid rgba(74, 144, 226, 0.32);
    border-radius: 12px;
    color: #f1f1f1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    animation: sm-card-in 0.35s ease;
    /* Firefox scrollbar styling. */
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 144, 226, 0.7) rgba(255, 255, 255, 0.06);
}

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

@keyframes sm-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Per-field swap animation — used when the card is ALREADY visible and the
   user switches between countries or landmarks. JS (setCardContent) adds
   .sm-text-swap ONLY to the individual fields whose text genuinely changed,
   so static chrome — the NATION eyebrow, colour swatch, action buttons,
   and any stat row that didn't change — stays perfectly still. */
.sm-text-swap {
    animation: sm-content-swap 0.22s ease both;
}

@keyframes sm-content-swap {
    from { opacity: 0.25; }
    to   { opacity: 1; }
}

/* Visible scrollbar so the user knows the card is scrollable. */
#sm-country-card::-webkit-scrollbar {
    width: 8px;
}
#sm-country-card::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    margin: 4px 0;
}
#sm-country-card::-webkit-scrollbar-thumb {
    background: rgba(74, 144, 226, 0.55);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
#sm-country-card::-webkit-scrollbar-thumb:hover {
    background: rgba(116, 211, 255, 0.75);
}

.sm-country-card-header {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Card actions row ---
   Holds the "Open/Close Map" button and the Nation/Landmark toggle on a
   single horizontal line to save vertical space. When the detail map is
   closed the toggle is [hidden], so the button flexes to the full width
   on its own. When the map is open they split the row 50/50. */
.sm-card-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: -4px 0 14px;
}

/* --- "Open Map" button (country card) ---
   Shown for any selected country. Active blue style when the country has a
   detail map available, disabled grey style when no map exists yet. Toggles
   to "Close Map" while the detail view is open. */
.sm-card-open-map {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Fills the whole row when it's the only control (detail map closed).
       When the toggle is also visible, the :has() rule below shrinks it to
       content width so the toggle gets the remaining space. */
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.22), rgba(74, 144, 226, 0.10));
    border: 1px solid rgba(74, 144, 226, 0.50);
    border-radius: 8px;
    color: #f1f6ff;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
                transform 0.18s ease, box-shadow 0.18s ease;
}

.sm-card-open-map-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* When the Nation/Landmark toggle is on the row too, shrink the Map button
   to its content width and let the toggle grow — gives "NATION" /
   "LANDMARK" enough room to render in full. */
.sm-card-actions:has(.sm-card-view-toggle:not([hidden])) .sm-card-open-map {
    flex: 0 0 auto;
}

.sm-card-open-map[hidden] { display: none; }

.sm-card-open-map:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.36), rgba(74, 144, 226, 0.18));
    border-color: rgba(116, 211, 255, 0.85);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(74, 144, 226, 0.25);
}

.sm-card-open-map:active:not(:disabled) {
    transform: translateY(0);
}

.sm-card-open-map:disabled {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #7c8696;
    cursor: not-allowed;
    opacity: 0.85;
}

.sm-card-open-map.is-open {
    background: linear-gradient(135deg, rgba(255, 217, 128, 0.20), rgba(255, 217, 128, 0.08));
    border-color: rgba(255, 217, 128, 0.55);
    color: #ffe9a8;
}

.sm-card-open-map.is-open:hover {
    background: linear-gradient(135deg, rgba(255, 217, 128, 0.32), rgba(255, 217, 128, 0.14));
    border-color: rgba(255, 217, 128, 0.85);
    box-shadow: 0 4px 16px rgba(255, 217, 128, 0.25);
}

.sm-card-open-map-icon {
    font-size: 0.95rem;
    line-height: 1;
    flex: 0 0 auto;
}

/* --- Card view toggle (Nation / Landmark) ---
   Sits on the card-actions row next to the Open/Close Map button. Only
   shown when a country with landmark data is selected and its detail map
   is open — otherwise the toggle is hidden so the button takes the full
   row width. */
.sm-card-view-toggle {
    display: flex;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px;
    background: rgba(7, 11, 22, 0.55);
    border: 1px solid rgba(74, 144, 226, 0.22);
    border-radius: 8px;
}

.sm-card-view-toggle[hidden] {
    display: none;
}

.sm-card-view-btn {
    flex: 1;
    min-width: 0;
    min-height: 30px;
    padding: 5px 8px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #9eabba;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.sm-card-view-btn:hover {
    color: #fff;
    background: rgba(116, 211, 255, 0.10);
}

.sm-card-view-btn[aria-selected="true"] {
    background: rgba(116, 211, 255, 0.20);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(116, 211, 255, 0.30) inset;
}

/* When the card is in "landmark" view, hide the nation-only sections so the
   panel shows only the landmark dossier (which is rendered into the footer).
   The header stays visible so the user knows which country they're inside. */
#sm-country-card.is-landmark-view .sm-country-rank-tile,
#sm-country-card.is-landmark-view .sm-country-stats {
    display: none;
}

/* In landmark view, the footer carries the dossier — remove the top margin
   that normally separates it from the (now-hidden) rank tile. */
#sm-country-card.is-landmark-view .sm-country-footer {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.sm-country-swatch {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #5a8a4a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 16px rgba(74, 144, 226, 0.18) inset;
    position: relative;
}

.sm-country-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 60%);
}

.sm-country-card-titles {
    min-width: 0;
    flex: 1;
}

.sm-country-eyebrow {
    font-size: 0.66rem;
    letter-spacing: 2.5px;
    color: #ffd980;
    font-weight: 700;
    margin-bottom: 3px;
}

.sm-country-name {
    margin: 0 0 4px 0;
    font-size: 1.45rem;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.1;
}

.sm-country-tag {
    font-size: 0.76rem;
    color: #a9b3c1;
    font-style: italic;
}

/* Rank tile — big number, hero element of the card */
.sm-country-rank-tile {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.12), rgba(74, 144, 226, 0.04));
    border: 1px solid rgba(74, 144, 226, 0.22);
    border-radius: 8px;
}

.sm-country-rank-num {
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(74, 144, 226, 0.4);
}

.sm-country-rank-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #a9b3c1;
    font-weight: 500;
}

.sm-country-stats {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sm-country-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sm-country-row:last-child { border-bottom: none; }

.sm-country-row-stack {
    display: block;
}

.sm-country-row-stack dt {
    margin-bottom: 6px;
    display: block;
}

.sm-country-row dt {
    margin: 0;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6e7c92;
    font-weight: 700;
}

.sm-country-row dd {
    margin: 0;
    font-size: 0.88rem;
    color: #e9ecf3;
    line-height: 1.4;
}

.sm-country-neighbours {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sm-country-chip {
    display: inline-block;
    padding: 3px 9px;
    background: rgba(74, 144, 226, 0.12);
    border: 1px solid rgba(74, 144, 226, 0.25);
    border-radius: 999px;
    font-size: 0.76rem;
    color: #cbd6e6;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.sm-country-chip:hover {
    background: rgba(255, 217, 128, 0.16);
    border-color: rgba(255, 217, 128, 0.45);
    color: #fff;
}

.sm-country-footer {
    font-size: 0.78rem;
    color: #c4cbd9;
    line-height: 1.5;
    margin-top: 14px;
    margin-bottom: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sm-country-footer:empty {
    display: none;
}

.sm-location-dossier {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-style: normal;
}

.sm-location-eyebrow {
    font-size: 0.66rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #ffd980;
    font-weight: 800;
}

.sm-location-dossier h4 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #ffffff;
}

.sm-location-summary,
.sm-location-ai p {
    margin: 0;
    color: #d7deeb;
}

.sm-location-facts {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(116, 211, 255, 0.14);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(7, 11, 22, 0.28);
}

.sm-location-row {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sm-location-row:last-child {
    border-bottom: 0;
}

.sm-location-row dt {
    margin: 0;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #7f8da4;
    font-weight: 800;
}

.sm-location-row dd {
    margin: 0;
    color: #edf3ff;
}

.sm-location-traits,
.sm-location-ai {
    padding: 10px 11px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 8px;
}

.sm-location-traits strong,
.sm-location-ai strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.66rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #9fd9ff;
}

.sm-location-traits ul {
    margin: 0;
    padding-left: 17px;
    color: #d7deeb;
}

.sm-location-traits li + li {
    margin-top: 5px;
}

/* Country hover tooltip */
#sm-country-tooltip {
    position: absolute;
    z-index: 30;
    padding: 9px 13px;
    background: rgba(20, 22, 35, 0.95);
    border: 1px solid rgba(74, 144, 226, 0.5);
    border-radius: 8px;
    color: #f1f1f1;
    font-size: 0.88rem;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    max-width: 240px;
}

.sm-country-tooltip-title {
    font-weight: 700;
    color: #fff;
}

.sm-country-tooltip-subtitle {
    font-size: 0.78rem;
    color: #a9b3c1;
    margin-top: 3px;
}

/* --- Eterna stats panel (left-side fact sheet, detail view only) ---
   Positioned below the breadcrumb (top: 16) with enough offset to clear it. */
#sm-stats-panel {
    position: absolute;
    top: 70px;
    left: 16px;
    z-index: 10;
    width: 320px;
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
    padding: 22px 22px 18px;
    background: linear-gradient(180deg, rgba(20, 22, 35, 0.92) 0%, rgba(14, 18, 30, 0.88) 100%);
    border: 1px solid rgba(74, 144, 226, 0.32);
    border-radius: 10px;
    color: #f1f1f1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 24px rgba(74, 144, 226, 0.1) inset;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

#sm-stats-panel.is-visible {
    opacity: 1;
    transform: translateX(0);
}

#sm-stats-panel::-webkit-scrollbar { width: 4px; }
#sm-stats-panel::-webkit-scrollbar-thumb {
    background: rgba(74, 144, 226, 0.3);
    border-radius: 2px;
}

.sm-stats-header {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 217, 128, 0.18);
}

.sm-stats-eyebrow {
    font-size: 0.7rem;
    color: #ffd980;
    letter-spacing: 2.5px;
    margin-bottom: 4px;
    font-weight: 600;
}

.sm-stats-title {
    font-size: 1.9rem;
    margin: 0 0 4px 0;
    letter-spacing: 1.5px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(255, 217, 128, 0.25);
}

.sm-stats-subtitle {
    font-size: 0.85rem;
    color: #a9b3c1;
    font-style: italic;
}

.sm-stats-grid {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sm-stats-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sm-stats-row:last-child { border-bottom: none; }

.sm-stats-row dt {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6e7c92;
    font-weight: 600;
}

.sm-stats-row dd {
    margin: 0;
    font-size: 0.88rem;
    color: #e9ecf3;
    line-height: 1.4;
}

.sm-stats-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    line-height: 1.5;
    color: #c4cbd9;
    font-style: italic;
}

.sm-stats-footer strong {
    color: #ffd980;
    font-style: normal;
    font-weight: 600;
}

/* --- Info panel (top-right, body details) ---
   Sits below the back button at the top-right corner. */
#sm-info-panel {
    position: absolute;
    top: 60px;
    right: 16px;
    z-index: 10;
    min-width: 240px;
    max-width: 320px;
    padding: 16px 18px;
    background: rgba(20, 22, 35, 0.85);
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 8px;
    color: #f1f1f1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

#sm-info-panel .sm-info-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 4px;
    color: #fff;
    letter-spacing: 0.5px;
}

#sm-info-panel .sm-info-subtitle {
    font-size: 0.85rem;
    color: #a9b3c1;
    line-height: 1.5;
}

/* --- Hover tooltip (follows cursor) --- */
#sm-tooltip {
    position: absolute;
    z-index: 20;
    padding: 8px 12px;
    background: rgba(20, 22, 35, 0.92);
    border: 1px solid rgba(74, 144, 226, 0.5);
    border-radius: 6px;
    color: #f1f1f1;
    font-size: 0.9rem;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: opacity 0.15s ease;
    max-width: 260px;
}

#sm-tooltip .sm-tooltip-title {
    font-weight: bold;
    color: #fff;
    margin-bottom: 2px;
}

#sm-tooltip .sm-tooltip-subtitle {
    font-size: 0.8rem;
    color: #a9b3c1;
    line-height: 1.3;
}

/* --- Toast for "Not yet ready" --- */
#sm-toast {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 30;
    padding: 12px 22px;
    background: rgba(20, 22, 35, 0.95);
    border: 1px solid rgba(245, 108, 108, 0.5);
    border-radius: 8px;
    color: #f1f1f1;
    font-size: 0.95rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#sm-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- Loading splash --- */
#sm-loading {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(9, 10, 15, 0.85);
    color: #f1f1f1;
    transition: opacity 0.5s ease;
}

#sm-loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.sm-loading-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(74, 144, 226, 0.2);
    border-top-color: #4a90e2;
    border-radius: 50%;
    animation: sm-spin 0.9s linear infinite;
    margin-bottom: 14px;
}

.sm-loading-text {
    font-size: 0.95rem;
    color: #a9b3c1;
    letter-spacing: 1px;
}

@keyframes sm-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1100px) {
    #sm-stats-panel {
        width: 280px;
        padding: 18px 18px 14px;
    }

    .sm-stats-row {
        grid-template-columns: 92px 1fr;
    }

    #sm-continent-view {
        grid-template-columns: minmax(0, 1fr) 260px;
        grid-template-areas:
            "toolbar card"
            "stage   card";
        padding: 56px 12px 12px;
        gap: 8px;
    }

    #sm-continent-view:not(:has(#sm-country-card:not([hidden]))) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "toolbar"
            "stage";
    }

    #sm-continent-canvas {
        min-height: 0;
    }
}

@media (max-width: 768px) {
    .system-map-container {
        /* On mobile use 100dvh so the chrome appearing/disappearing doesn't
           cause overflow. Header is smaller on mobile too. Tighter bottom
           buffer (40px) to give more usable space on small screens. */
        margin-top: 80px;
        margin-bottom: 40px;
        height: calc(100dvh - 120px);
    }

    .sm-page-header {
        top: 80px;
    }

    .sm-page-header h1 {
        font-size: 1.6rem;
        letter-spacing: 2px;
    }

    .sm-page-header p {
        font-size: 0.85rem;
    }

    #sm-back-button {
        display: none;
    }

    #sm-info-panel {
        top: 80px;
        right: 16px;
        min-width: 180px;
        max-width: 220px;
        padding: 12px 14px;
    }

    #sm-stats-panel {
        display: none; /* On small screens it would cover the planet — drop it for now */
    }

    #sm-continent-view {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
        grid-template-areas: "header" "toolbar" "stage";
        padding: 50px 10px 10px;
    }

    /* On mobile the breadcrumb takes a top-left corner so push content
       down to clear it. */
    #sm-breadcrumb {
        top: 10px;
        left: 10px;
        max-width: calc(100% - 20px);
        overflow-x: auto;
    }

    .sm-continent-title {
        font-size: 1.1rem;
        letter-spacing: 2px;
    }

    #sm-atlas-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .sm-atlas-search {
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }

    .sm-layer-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .sm-layer-btn {
        flex: 1;
        padding: 0 6px;
        font-size: 0.66rem;
    }

    #sm-country-card {
        grid-area: auto;  /* reset desktop grid placement so absolute positioning takes over */
        position: absolute;
        top: auto;        /* drawer hangs from the bottom edge */
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 35;
        width: auto;
        max-height: 150px;
        padding: 14px;
        border-radius: 10px;
    }

    #sm-continent-canvas {
        min-height: 0;
    }

    .sm-country-card-header {
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .sm-country-swatch {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .sm-country-name {
        font-size: 1.08rem;
    }

    .sm-country-rank-tile {
        display: none;
    }

    .sm-country-row {
        grid-template-columns: 86px 1fr;
        padding: 5px 0;
    }

    .sm-country-row:nth-child(n+4) {
        display: none;
    }

    #sm-breadcrumb {
        top: 14px;
        left: 12px;
        max-width: calc(100vw - 24px);
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .sm-crumb {
        padding: 5px 10px;
        font-size: 0.66rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Atlas export control (emerald-only) — injected by atlas-export.js.
   Floating, unobtrusive; only present for emerald-tier admins.
   ───────────────────────────────────────────────────────────────────────────── */
.atlas-export-control {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: 320px;
    pointer-events: none;
}

.atlas-export-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(122, 200, 130, 0.45);
    background: rgba(16, 26, 20, 0.86);
    color: #d8ffe0;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.atlas-export-btn:hover {
    background: rgba(24, 40, 28, 0.95);
    border-color: rgba(122, 200, 130, 0.8);
    transform: translateY(-1px);
}

.atlas-export-btn:disabled,
.atlas-export-btn.is-busy {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

.atlas-export-icon {
    font-size: 1rem;
    line-height: 1;
}

.atlas-export-status {
    pointer-events: auto;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.74rem;
    line-height: 1.4;
    background: rgba(12, 18, 24, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
}

.atlas-export-status[data-kind="success"] {
    border-color: rgba(122, 200, 130, 0.5);
    color: #d8ffe0;
}

.atlas-export-status[data-kind="error"] {
    border-color: rgba(220, 120, 120, 0.55);
    color: #ffd8d8;
}

@media (max-width: 640px) {
    .atlas-export-control {
        right: 10px;
        bottom: 84px;
        max-width: calc(100vw - 20px);
    }
    .atlas-export-label {
        display: none;
    }
}