/* CountryGov - Political Strategy Game Styles */

/* Layout geometry — shared reference for map controls and body offsets */
:root {
    --stats-bar-h:   5rem;     /* collapsed stats bar height (= 80px, matches game-content pb) */
    --game-header-h: 4rem;     /* sticky game header                     */
    --tab-bar-h:     3.25rem;  /* nav tab row (game-subheader + padding) */
    --map-ui-top: calc(var(--game-header-h) + var(--tab-bar-h));
}

/* Root Variables */
:root {
      /* Core Four Colors */
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --orange-color: #fd7e14;
    --green-color: #28a745;

    
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --purple-color: #6f42c1;



    --bg-primary: #1a1d23;
    --bg-secondary: #2d3436;
    --bg-tertiary: #34495e;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted: rgba(255, 255, 255, 0.5);

    --border-color: rgba(255, 255, 255, 0.125);
    --hover-overlay: rgba(255, 255, 255, 0.1);

    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);

    --transition-fast: all 0.15s ease-in-out;
    --transition-normal: all 0.3s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;

    /* Card component tokens */
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-bg-elevated: rgba(255, 255, 255, 0.06);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-radius: 10px;
    --card-padding: 0.8rem 1rem;

    /* Section label tokens */
    --label-size: 0.68rem;
    --label-color: rgba(255, 255, 255, 0.4);
    --label-spacing: 0.08em;
}

/* === DESIGN TOKENS ===
 * Single source of truth for semantic colors, radii, and shadows.
 * See docs/DESIGN_GUIDE.md for full usage rules.
 * When adding a new state or surface, add a token here first.
 */
:root {
    /* ── State: Positive (green) ─────────────────────────────────────────── */
    --color-positive:        #7CFFB0;
    --color-positive-bg:     rgba(0, 168, 107, 0.15);
    --color-positive-border: rgba(0, 168, 107, 0.45);

    /* ── State: Mid / Warning (amber) ────────────────────────────────────── */
    --color-mid:        #fde68a;
    --color-mid-bg:     rgba(251, 191, 36, 0.13);
    --color-mid-border: rgba(251, 191, 36, 0.40);

    /* ── State: Negative (red) ───────────────────────────────────────────── */
    --color-negative:        #ff9d8a;
    --color-negative-bg:     rgba(255, 74, 74, 0.13);
    --color-negative-border: rgba(255, 74, 74, 0.45);

    /* ── State: Neutral (no change) ──────────────────────────────────────── */
    --color-neutral:        rgba(255, 255, 255, 0.50);
    --color-neutral-bg:     rgba(255, 255, 255, 0.07);
    --color-neutral-border: rgba(255, 255, 255, 0.125);

    /* ── Named data-stat text colors (sidebar [data-stat] only) ─────────── */
    --color-sv-good: #4ade80;
    --color-sv-mid:  #facc15;
    --color-sv-bad:  #f87171;

    /* ── Border radii ────────────────────────────────────────────────────── */
    --radius-pill:  999px;   /* stat-value pills, ip-pills, vote bars     */
    --radius-card:  10px;    /* dashboard cards, sidebar panels           */
    --radius-modal: 12px;    /* modals, chip clusters, large tooltips     */
    --radius-btn:   8px;     /* .btn buttons                              */
    --radius-tag:   4px;     /* micro inline tags, table cells            */
}
/* === END DESIGN TOKENS === */

/* ── Icon Size Utilities ──────────────────────────────────────────────────── */
.icon-sm  { width: 14px !important; height: 14px !important; }
.icon-md  { width: 16px !important; height: 16px !important; }
.icon-lg  { width: 18px !important; height: 18px !important; }
.icon-xl  { width: 24px !important; height: 24px !important; }
.icon-32  { width: 32px !important; height: 32px !important; }
.icon-hero { width: 48px !important; height: 48px !important; }

/* ── Unified Badge Pill System ────────────────────────────────────────────── */
.game-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.gb-success {
    background: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
    border-color: color-mix(in srgb, var(--success-color) 35%, transparent);
}

.gb-warning {
    background: color-mix(in srgb, var(--warning-color) 12%, transparent);
    color: var(--warning-color);
    border-color: color-mix(in srgb, var(--warning-color) 30%, transparent);
}

.gb-danger {
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-color);
    border-color: color-mix(in srgb, var(--danger-color) 30%, transparent);
}

.gb-info {
    background: color-mix(in srgb, var(--info-color) 12%, transparent);
    color: var(--info-color);
    border-color: color-mix(in srgb, var(--info-color) 30%, transparent);
}

.gb-neutral {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
    border-color: var(--border-color);
}

.gb-purple {
    background: color-mix(in srgb, var(--purple-color) 14%, transparent);
    color: color-mix(in srgb, var(--purple-color) 80%, #fff);
    border-color: color-mix(in srgb, var(--purple-color) 35%, transparent);
}

/* ── Global Styles ─────────────────────────────────────────────────────────── */
* {
    box-sizing: border-box;
}

html {
    background: #0d0f14;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
}

.text-white-75 {
    color: var(--text-secondary) !important;
}

.text-white-50 {
    color: var(--text-muted) !important;
}

/* Custom Button Styles */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: var(--transition-fast);
    border-width: 2px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #0056b3);
    border-color: var(--primary-color);
}

.btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.action-btn {
    padding: 12px 24px;
    font-size: 1.1rem;
    min-width: 200px;
    transition: all 0.2s ease;
}

.action-btn.active {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    transform: scale(1.05);
}

/* Loading Animations */
.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0d0f14;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
    animation: loadingFadeIn 0.45s ease both;
}

@keyframes loadingFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Loading screen slideshow */
.loading-slideshow-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.loading-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    animation: cinematicDrift 20s ease-in-out infinite alternate;
}
.loading-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.72) 0%,
            rgba(0,0,0,0.45) 35%,
            rgba(0,0,0,0.45) 65%,
            rgba(0,0,0,0.88) 100%),
        radial-gradient(ellipse at center,
            transparent 30%,
            rgba(0,0,0,0.65) 100%);
    pointer-events: none;
}

.loading-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
    max-width: 600px;
}

/* Enhanced Flag Animation Container */
.flag-animation-container {
    position: relative;
    width: 240px;
    height: 160px;
    margin: 0 auto 2rem;
    perspective: 1000px;
}

.flag-assembly {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 123, 255, 0.3);
    background: transparent;
    opacity: 0;
    transform: scale(0.8) rotateY(15deg);
    animation: flagAppear 1.5s ease-out forwards;
}

.flag-image-single {
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    object-fit: cover;
    border-radius: 12px;
    opacity: 1;
    margin: -3px;
}

@keyframes flagAppear {
    0% {
        opacity: 0;
        transform: scale(0.8) rotateY(15deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05) rotateY(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

/* Flag completion effect */
.flag-assembly.complete {
    opacity: 1 !important;
}

.flag-assembly.complete::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    animation: flagGlow 2s ease-in-out infinite alternate;
}

@keyframes flagGlow {
    from {
        box-shadow: 0 0 20px rgba(0, 123, 255, 0.5);
        border-color: rgba(0, 123, 255, 0.8);
    }
    to {
        box-shadow: 0 0 40px rgba(0, 123, 255, 0.8);
        border-color: rgba(0, 123, 255, 1);
    }
}

/* Flag waving animation after assembly */
.flag-assembly.waving {
    animation: flagWave 3s ease-in-out infinite;
    transform-origin: left center;
    opacity: 1 !important;
}

@keyframes flagWave {
    0%, 100% { 
        transform: rotateY(0deg) rotateX(0deg);
        opacity: 1;
    }
    25% { 
        transform: rotateY(-3deg) rotateX(1deg);
        opacity: 1;
    }
    50% { 
        transform: rotateY(0deg) rotateX(-1deg);
        opacity: 1;
    }
    75% { 
        transform: rotateY(3deg) rotateX(1deg);
        opacity: 1;
    }
}

/* Progress text animation */
.loading-progress {
    margin-top: 2rem;
}

.loading-progress h4 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.progress-text {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: textFadeIn 0.5s ease-out forwards;
}

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

/* Progress bar */
.progress-bar-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.progress-bar-fill {
    height: 8px;
    background: linear-gradient(90deg, var(--primary-color), #00d4ff);
    border-radius: 20px;
    width: 0%;
    transition: width 0.3s ease-out;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* Building icons animation */
.building-icons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    opacity: 0;
    animation: iconsSlideIn 1s ease-out 2s forwards;
}

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

.building-icon {
    color: var(--text-muted);
    font-size: 2rem;
    animation: iconBounce 2s ease-in-out infinite;
}

.building-icon:nth-child(1) { animation-delay: 0s; }
.building-icon:nth-child(2) { animation-delay: 0.3s; }
.building-icon:nth-child(3) { animation-delay: 0.6s; }
.building-icon:nth-child(4) { animation-delay: 0.9s; }

@keyframes iconBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
        color: var(--text-muted);
    }
    40% {
        transform: translateY(-10px);
        color: var(--primary-color);
    }
    60% {
        transform: translateY(-5px);
        color: var(--primary-color);
    }
}

/* Subtitle styling */
.loading-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 1rem;
    font-style: italic;
}

/* ── Main Menu – Cinematic Slideshow ─────────────────────────────────────── */
.main-menu-body {
    background: #0d0f14;
    min-height: 100vh;
    overflow: hidden;
}

/* Slideshow layer */
#slideshowLayer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.slide-panel {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    /* Slow cinematic zoom-pan */
    animation: cinematicDrift 14s ease-in-out infinite alternate;
}

@keyframes cinematicDrift {
    from { transform: scale(1.00) translate(0%,   0%); }
    to   { transform: scale(1.06) translate(-1%, -1%); }
}

/* Vignette overlay */
.slideshow-vignette {
    position: fixed;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.55) 0%,
            rgba(0,0,0,0.15) 35%,
            rgba(0,0,0,0.15) 65%,
            rgba(0,0,0,0.75) 100%),
        radial-gradient(ellipse at center,
            transparent 30%,
            rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

/* Menu content container */
.main-menu-container {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    /* The original cinematic entrance intentionally animates the whole menu. */
    animation: menuFadeIn 1.2s ease-out backwards;
}

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

/* Logo */
.menu-logo-wrap {
    margin-bottom: 1.5rem;
}

.menu-logo {
    max-width: 380px;
    width: 90vw;
    height: auto;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.7));
}

/* Tagline */
.menu-tagline {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 2.5rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

/* Action buttons */
.menu-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    max-width: 320px;
}

.menu-btn {
    width: 100%;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 8px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.menu-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}

.menu-btn-ghost {
    border-color: rgba(255,255,255,0.55);
    color: rgba(255,255,255,0.9);
    background: rgba(7, 11, 18, 0.36) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%) brightness(0.82) !important;
    backdrop-filter: blur(24px) saturate(135%) brightness(0.82) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 24px rgba(0,0,0,0.24);
}

.menu-btn-ghost:hover {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.85);
    color: #fff;
}

/* Hollow white controls retain their frosted idle state, but pressing one
   restores the original decisive white-fill interaction. */
.menu-btn-ghost:active,
.auth-corner-btn:active,
.new-game-flow-back:active,
.refresh-inherited-btn:active,
.new-game-mode-card:not(:first-child):active,
.inherited-carousel-arrow:active,
.discord-corner-btn:active {
    color: #0a0e14 !important;
    background: #fff !important;
    border-color: #fff !important;
    box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0,0,0,0.3) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    transform: translateY(0) scale(0.99) !important;
}

.inherited-carousel-arrow:active {
    transform: translateY(-50%) scale(0.97) !important;
}

.menu-creator-credit {
    margin: 1rem 0 0;
    color: rgba(255,255,255,.3);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.4;
}
.menu-creator-credit a {
    color: rgba(255,255,255,.48);
    text-decoration: none;
    transition: color 160ms ease;
}
.menu-creator-credit a:hover { color: rgba(255,255,255,.82); }

.leader-title-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.leader-title-option {
    min-height: 42px;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    color: rgba(255,255,255,0.65);
    background: rgba(6,12,22,0.48);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.leader-title-option:hover {
    color: #fff;
    border-color: rgba(75,145,255,0.55);
    transform: translateY(-1px);
}

.leader-title-option.is-selected {
    color: #fff;
    border-color: #3b82f6;
    background: rgba(37,99,235,0.26);
    box-shadow: inset 0 0 0 1px rgba(96,165,250,0.2);
}

/* Start New Game is a second composition inside the menu, not an overlay. */
.new-game-flow {
    position: absolute;
    z-index: 2;
    width: min(100%, 1180px);
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: none;
    padding: 1.25rem;
    color: #f7f9fc;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(18px);
    transition: opacity 340ms ease, transform 340ms ease, visibility 0s linear 340ms;
}
.new-game-flow::-webkit-scrollbar { display: none; }

.new-game-flow[hidden],
.new-game-mode-stage[hidden],
.inherited-country-stage[hidden] { display: none !important; }

body.new-game-flow-open .new-game-flow {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 100ms, 100ms, 0s;
}

/* Returning to the main menu should feel a little more immediate than entering setup. */
body.new-game-flow-closing .new-game-flow {
    transition-duration: 240ms, 240ms, 0s;
    transition-delay: 0s, 0s, 240ms;
}

.new-game-flow-shell { width: min(440px, 100%); margin: 0 auto; text-align: center; }

.new-game-mode-stage,
.inherited-country-stage {
    transition: opacity 180ms ease, transform 180ms ease;
}
.new-game-mode-stage.is-leaving,
.inherited-country-stage.is-leaving { opacity: 0; transform: translateX(-14px); }
.new-game-mode-stage.is-entering,
.inherited-country-stage.is-entering { opacity: 0; transform: translateX(14px); }

.new-game-flow-back,
.refresh-inherited-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 2px solid rgba(255,255,255,.55);
    border-radius: 8px;
    background: rgba(7,11,18,.24);
    color: rgba(255,255,255,.9);
    padding: .72rem 1rem;
    font-weight: 700;
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.18);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.new-game-flow-back { width: min(320px, 100%); margin: 1rem auto 0; }
.new-game-flow-back:hover,
.refresh-inherited-btn:hover { border-color: rgba(255,255,255,.88); background: rgba(255,255,255,.12); transform: translateY(-2px); }
.new-game-flow-back svg,
.refresh-inherited-btn svg { width: 18px; height: 18px; }

.new-game-mode-stage { margin: 0 auto; }
.new-game-page-title {
    margin: 0 0 .35rem;
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.05;
    text-shadow: 0 2px 16px rgba(0,0,0,.75);
}
.new-game-mode-stage h1 { margin: 0; color: rgba(255,255,255,.78); font-size: 1rem; font-weight: 700; }
.new-game-eyebrow { margin: 0 0 .45rem; color: #65a9ff; letter-spacing: .2em; font-size: .76rem; font-weight: 900; }
.inherited-country-heading h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 900; letter-spacing: -.035em; }
.new-game-lede { margin: .65rem auto 0; max-width: 390px; color: rgba(255,255,255,.6); font-size: .86rem; line-height: 1.45; }
.inherited-country-heading p:last-child { margin: .55rem 0 0; color: rgba(255,255,255,.65); font-size: .95rem; }
.new-game-mode-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; margin-top: 1.5rem; }
.new-game-mode-card {
    display: grid;
    grid-template-columns: 34px 1fr 22px;
    align-items: center;
    gap: .85rem;
    min-height: 88px;
    padding: .9rem 1rem;
    text-align: left;
    color: #fff;
    border: 2px solid rgba(255,255,255,.55);
    border-radius: 8px;
    background: rgba(7,11,18,.24);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.18);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.new-game-mode-card:first-child { border-color: #1683ff; background: rgba(10,112,231,.92); }
.new-game-mode-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.88); background: rgba(255,255,255,.14); box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.new-game-mode-card:first-child:hover { border-color: #43a0ff; background: rgba(17,126,247,.96); }
.new-game-mode-icon { display: grid; place-items: center; color: currentColor; }
.new-game-mode-icon svg { width: 25px; height: 25px; }
.new-game-mode-copy { display: flex; flex-direction: column; gap: .2rem; }
.new-game-mode-copy strong { font-size: 1rem; font-weight: 800; }
.new-game-mode-copy small { color: rgba(255,255,255,.64); font-size: .75rem; line-height: 1.35; }
.new-game-mode-card:first-child small { color: rgba(255,255,255,.8); }
.new-game-mode-arrow { width: 20px; color: rgba(255,255,255,.72); }

.inherited-country-stage { margin-top: 0; text-align: center; }
.inherited-country-heading { margin-bottom: .7rem; }
.inherited-country-heading .new-game-page-title { margin-bottom: .3rem; }
.inherited-country-heading h1 { color: rgba(255,255,255,.8); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.inherited-country-heading p:last-child { margin: .45rem auto 0; max-width: 390px; font-size: .8rem; line-height: 1.4; }
.inherited-country-position {
    margin: .55rem 0 .2rem;
    color: rgba(255,255,255,.72);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.inherited-country-carousel {
    position: relative;
    width: 100%;
    margin-top: .25rem;
}
.inherited-country-grid {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: visible;
    perspective: 1000px;
}
.inherited-country-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 1rem;
    text-align: left;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 10px;
    background: rgba(5,10,18,.48);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
    opacity: 0;
    pointer-events: none;
    transform: translateX(0) scale(.82);
    filter: saturate(.72) brightness(.78);
    transition: opacity 280ms ease, transform 280ms cubic-bezier(.2,.8,.2,1), filter 280ms ease;
    will-change: opacity, transform;
}
.inherited-country-card.is-active {
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
    filter: none;
}
.inherited-country-card.is-prev {
    z-index: 1;
    opacity: .46;
    transform: translateX(-69%) scale(.82) rotateY(5deg);
}
.inherited-country-card.is-next {
    z-index: 1;
    opacity: .46;
    transform: translateX(69%) scale(.82) rotateY(-5deg);
}
.inherited-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 42px;
    height: 58px;
    padding: 0;
    border: 2px solid rgba(255,255,255,.55);
    border-radius: 9px;
    color: #fff;
    background: rgba(7,11,18,.3);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.28);
    transform: translateY(-50%);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.inherited-carousel-arrow:hover {
    border-color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.14);
    transform: translateY(-50%) scale(1.05);
}
.inherited-carousel-arrow svg { width: 22px; height: 22px; }
.inherited-carousel-arrow-prev { left: -58px; }
.inherited-carousel-arrow-next { right: -58px; }
.inherited-card-edit { position: absolute; top: .85rem; right: .85rem; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.38); border-radius: 8px; color: #d6e1f0; background: rgba(7,11,18,.28); -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.inherited-card-edit:hover { color: #fff; border-color: #4a94f6; background: #175dbb; }
.inherited-card-edit svg { width: 17px; height: 17px; }
.inherited-card-flag { width: 64px; height: 43px; object-fit: cover; border-radius: 6px; border: 2px solid rgba(255,255,255,.72); box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.inherited-country-card h2 { margin: .65rem 2.5rem .05rem 0; font-size: 1.3rem; font-weight: 900; }
.inherited-capital { margin: 0 0 .7rem; color: #a5b1c2; font-size: .82rem; }
.inherited-fact { display: grid; grid-template-columns: 58px 1fr; gap: .45rem; padding: .4rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.inherited-fact span { color: #78869a; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.inherited-fact strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e6ebf3; font-size: .9rem; }
.inherited-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .65rem 0; }
.inherited-meta span { padding: .35rem .6rem; border: 1px solid rgba(66, 142, 242, .28); border-radius: 999px; color: #a9cfff; background: rgba(24, 79, 153, .18); font-size: .72rem; font-weight: 800; }
.inherited-meta .inherited-ideology { border-color: rgba(167, 112, 255, .38); color: #d1b5ff; background: rgba(100, 52, 166, .22); }
.inherited-foundation { margin: 0 0 .7rem; color: #9ca9ba; font-size: .72rem; line-height: 1.35; }
.take-office-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; padding: .7rem; border: 1px solid #388af6; border-radius: 8px; background: #1478e9; color: #fff; font-weight: 900; }
.take-office-btn:hover { background: #2788f4; }
.inherited-cards-loading { display: grid; place-items: center; align-content: center; height: 100%; padding: 3rem 1rem; text-align: center; color: #aebbd0; }
.inherited-cards-loading svg { animation: spin 1s linear infinite; }
.refresh-inherited-btn { width: min(320px, 100%); margin: .8rem auto 0; }

.discord-corner {
    position: fixed;
    top: 1.1rem;
    left: 1.25rem;
    z-index: 10;
}
.discord-corner-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 42px;
    padding: .55rem 1rem;
    border: 2px solid rgba(255,255,255,.4);
    border-radius: 8px;
    color: rgba(255,255,255,.88);
    background: rgba(7,11,18,.34);
    -webkit-backdrop-filter: blur(24px) saturate(125%) brightness(.86);
    backdrop-filter: blur(24px) saturate(125%) brightness(.86);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 24px rgba(0,0,0,.2);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.discord-corner-btn:hover {
    color: #fff;
    background: rgba(88,101,242,.24);
    border-color: rgba(139,149,255,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 28px rgba(0,0,0,.32);
    transform: translateY(-2px);
}
.discord-corner-btn img {
    width: 24px;
    height: 21px;
    object-fit: contain;
    flex: 0 0 auto;
}

.menu-center, .auth-corner, .discord-corner, .menu-version { transition: opacity 300ms ease, transform 300ms ease; }
body.new-game-flow-closing .menu-center,
body.new-game-flow-closing .auth-corner,
body.new-game-flow-closing .discord-corner,
body.new-game-flow-closing .menu-version { transition-duration: 240ms; }
body.new-game-flow-closing .menu-center { animation: none; }
body.main-menu-intro-complete .menu-center { animation: none; }
body.new-game-flow-open .menu-center { animation: none; opacity: 0; transform: translateY(-18px); pointer-events: none; }
body.new-game-flow-open .auth-corner,
body.new-game-flow-open .discord-corner,
body.new-game-flow-open .menu-version { opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
    .new-game-flow { max-height: 100vh; padding: 1rem; }
}
@media (max-width: 700px) {
    .new-game-mode-card { min-height: 82px; }
    .inherited-country-carousel {
        display: grid;
        grid-template-areas:
            "cards cards"
            "previous next";
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: .65rem .75rem;
    }
    .inherited-country-grid {
        grid-area: cards;
        height: auto;
    }
    .inherited-country-card {
        height: auto;
    }
    .inherited-country-card.is-active {
        position: relative;
        inset: auto;
    }
    .inherited-country-card.is-prev,
    .inherited-country-card.is-next {
        opacity: 0;
        transform: scale(.94);
    }
    .inherited-carousel-arrow {
        position: static;
        width: 100%;
        height: 44px;
        transform: none;
    }
    .inherited-carousel-arrow:hover { transform: translateY(-2px); }
    .inherited-carousel-arrow:active { transform: scale(.97) !important; }
    .inherited-carousel-arrow-prev { grid-area: previous; }
    .inherited-carousel-arrow-next { grid-area: next; }
    .take-office-btn { margin-top: .85rem; }
}

@media (max-width: 720px) {
    .leader-title-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Shared notifications ────────────────────────────────────────────────── */
.cg-toast-stack {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    width: min(340px, calc(100vw - 2rem));
    pointer-events: none;
}

.cg-toast {
    --cg-toast-accent: #69a9ff;
    position: relative;
    display: grid;
    grid-template-columns: 32px auto 28px;
    align-items: center;
    gap: .65rem;
    width: fit-content;
    min-width: 190px;
    max-width: 100%;
    min-height: 58px;
    padding: .62rem .62rem .62rem .7rem;
    overflow: hidden;
    color: #f6f8fc;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: rgba(9,15,25,.92);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 28px rgba(0,0,0,.32);
    opacity: 0;
    pointer-events: auto;
    transform: translateX(calc(100% + 2rem));
    transform-origin: right center;
    transition: opacity 220ms ease, transform 300ms cubic-bezier(.22,.78,.28,1);
}
.cg-toast.is-visible { opacity: 1; transform: translateX(0); }
.cg-toast.is-leaving {
    opacity: 0;
    transform: translateX(calc(100% + 2rem));
}
.cg-toast--success { --cg-toast-accent: #44e389; }
.cg-toast--warning { --cg-toast-accent: #f0b943; }
.cg-toast--error { --cg-toast-accent: #ff7084; }
.cg-toast-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--cg-toast-accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--cg-toast-accent) 11%, transparent);
}
.cg-toast-icon-svg { width: 18px; height: 18px; }
.cg-toast-message { min-width: 0; max-width: 230px; color: rgba(244,247,252,.9); font-size: .88rem; font-weight: 700; line-height: 1.3; }
.cg-toast-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: rgba(224,232,244,.55);
    border: 0;
    border-radius: 8px;
    background: transparent;
    transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}
.cg-toast-close:hover { color: #fff; background: rgba(255,255,255,.09); transform: scale(1.05); }
.cg-toast-close-svg { width: 18px; height: 18px; }
.cg-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--cg-toast-accent);
    opacity: .65;
    transform-origin: left center;
    animation: cgToastProgress var(--cg-toast-duration) linear forwards;
}
@keyframes cgToastProgress { to { transform: scaleX(0); } }

@media (max-width: 600px) {
    .cg-toast-stack {
        top: max(.7rem, env(safe-area-inset-top));
        right: .7rem;
        left: .7rem;
        width: auto;
    }
    .cg-toast { grid-template-columns: 32px auto 28px; min-height: 56px; padding: .58rem .58rem .58rem .65rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cg-toast { transition-duration: 1ms; }
    .cg-toast-progress { animation: none; }
}

/* Version badge */
.menu-version {
    position: fixed;
    bottom: 1rem;
    right: 1.25rem;
    z-index: 3;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.3);
    user-select: none;
}

/* ── Shared page enter / exit transitions ──────────────────────────────────── */
@keyframes pageEnter {
    from { opacity: 0; transform: scale(1.012); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes pageExit {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.988); }
}
/* .page-enter: apply on page load to fade/scale in */
body.page-enter:not(.main-menu-body) {
    animation: pageEnter 0.45s ease-out both;
}
/* Full-screen menu/setup bodies use opacity-only so transform never becomes
   their fixed overlays' containing block. */
.main-menu-body,
.setup-body {
    animation: setupPageEnter 0.45s ease-out both;
}
@keyframes setupPageEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* .page-exit: applied by navigateTo() before redirect */
body.page-exit {
    animation: pageExit 0.37s ease-in both !important;
    pointer-events: none;
}

/* Kept for other pages that may still reference these */
.crown-icon-small {
    display: inline-block;
    margin-right: 0.5rem;
    filter: drop-shadow(0 0 5px rgba(0, 123, 255, 0.5));
}

.country-flag-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
}

.country-flag-small img {
    width: 48px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    object-fit: cover;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: var(--transition-fast);
}

.country-flag-small:hover img {
    transform: scale(1.1);
    filter: brightness(1.1);
}

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

/* Setup Page Styles */
.setup-body {
    background: #0d0f14;
    min-height: 100vh;
}

.setup-container {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.setup-header {
    position: sticky;
    top: 0;
    z-index: 200;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    background: rgba(26, 29, 35, 0.97);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.setup-progress-bar {
    height: 6px;
    background: var(--bg-secondary);
}

.setup-content {
    flex: 1;
    padding: 2rem 0 5.5rem;
}

.setup-card {
    background: rgba(12, 14, 20, 0.55);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.09);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.setup-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding: 0.85rem 0;
    background: rgba(26, 29, 35, 0.97);
    border-top: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
}

.setup-footer .footer-hint {
    font-size: 0.85rem;
    text-align: center;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .setup-footer .footer-hint {
        display: none;
    }

    .setup-footer .d-flex {
        gap: 0.5rem;
    }
}

/* Setup ghost button — matches main menu hollow style */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 400;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.45);
    color: rgba(255,255,255,0.85);
    background: transparent;
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    text-decoration: none;
}
.btn-ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.85);
    color: #fff;
}
.btn-ghost:disabled {
    opacity: 0.35;
    pointer-events: none;
    border-color: rgba(255,255,255,0.25);
}
.btn-ghost svg { flex-shrink: 0; }

/* Setup nav row: Previous left, Next right, same line */
.setup-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

/* Setup title block: bold title + muted step label, same visual height as the button */
.setup-title-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
}
.setup-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.setup-step-label {
    font-size: 0.78rem;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
    line-height: 1.2;
}

/* Styled Input Groups */
.input-group-styled {
    position: relative;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 12px;
    z-index: 5;
    color: var(--primary-color);
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.styled-input {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    padding: 12px 16px 12px 45px !important;
    font-size: 1rem;
    transition: var(--transition-fast);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.styled-input:focus {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px);
}

.styled-input::placeholder {
    color: var(--text-muted) !important;
}

/* Dice-roll input row */
.dice-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dice-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 0;
}

.dice-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    pointer-events: none;
}

.dice-btn:hover {
    background: rgba(0, 123, 255, 0.2);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}

.dice-btn:active {
    transform: scale(0.92);
}

@keyframes diceSpin {
    0%   { transform: rotate(0deg) scale(1); }
    40%  { transform: rotate(180deg) scale(1.15); }
    100% { transform: rotate(360deg) scale(1); }
}

.dice-btn.dice-spin {
    animation: diceSpin 0.4s ease-out forwards;
}

.flag-section-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 !important;
    display: flex;
    align-items: center;
}

.flag-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.flag-section-header .dice-btn {
    flex: 0 0 auto;
}

/* Vertical Grid Flag Selector */
.flag-selector-grid {
    background: rgba(0, 0, 0, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
    padding: 1rem;
}

.flag-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 80px;
    gap: 0.75rem;
    height: 400px;
    overflow-y: auto;
    padding-right: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) rgba(0,0,0,0.3);
}

.flag-grid-container::-webkit-scrollbar {
    width: 6px;
}

.flag-grid-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.flag-grid-container::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

.flag-grid-container::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}

/* Enhanced Flag Selector (keeping for backward compatibility) */
.flag-selector-new {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255,255,255,0.11);
}

.flag-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 8px;
    scrollbar-width: thin;
}

.flag-item {
    position: relative;
    cursor: pointer;
    transition: var(--transition-normal);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.flag-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid transparent;
    transition: var(--transition-normal);
    background: rgba(255, 255, 255, 0.07);
}

.flag-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-normal);
}

.flag-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 123, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-fast);
    pointer-events: none;
}

.check-icon {
    color: white;
    width: 24px;
    height: 24px;
    stroke-width: 3;
}

.flag-item:hover .flag-container {
    border-color: var(--primary-color);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.flag-item:hover .flag-image {
    transform: scale(1.05);
}

.flag-item:hover .flag-overlay {
    opacity: 0.3;
}

.flag-item.active .flag-container {
    border-color: var(--success-color);
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px var(--success-color), 0 8px 25px rgba(40, 167, 69, 0.4);
}

.flag-item.active .flag-overlay {
    opacity: 0;
}

.flag-item.active .flag-image {
    transform: scale(1.0);
}

.selected-flag-preview {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 1.5rem;
    border: 2px solid var(--primary-color);
    position: relative;
    overflow: hidden;
}

.selected-flag-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);
    pointer-events: none;
}

.selected-flag-preview.is-empty {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.035);
}

.flag-preview-placeholder {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.68);
}

.flag-preview-placeholder svg {
    width: 42px;
    height: 42px;
    margin-bottom: 0.35rem;
    color: var(--primary-color);
}

.flag-preview-placeholder strong {
    color: var(--text-primary);
    font-size: 1.1rem;
}

.flag-preview-placeholder span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.48);
}

.preview-container {
    position: relative;
    z-index: 1;
    text-align: center;
}

.preview-container img {
    width: 200px;
    max-width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
    transition: var(--transition-normal);
}

.preview-container:hover img {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.preview-label {
    color: var(--text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.preview-label i {
    color: var(--primary-color);
}

/* Flag Selector Animations */
@keyframes flagGlow {
    0%, 100% { box-shadow: 0 0 0 2px var(--success-color), 0 4px 12px rgba(40, 167, 69, 0.4); }
    50% { box-shadow: 0 0 0 2px var(--success-color), 0 8px 25px rgba(40, 167, 69, 0.7); }
}

.flag-item.active .flag-container {
    animation: flagGlow 2s ease-in-out infinite;
}

/* Legacy CSS removed - using simplified flag system */

/* Option Cards */
.option-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.option-card:hover:not(.disabled) {
    border-color: var(--primary-color);
    background: rgba(0, 123, 255, 0.1);
    transform: translateY(-2px);
}

.option-card.active {
    border-color: var(--primary-color);
    background: rgba(0, 123, 255, 0.2);
}

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

.option-card-icon {
    margin-bottom: 0.6rem;
}

.option-card-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--primary-color);
    opacity: 0.85;
}

.option-card.disabled .option-card-icon svg {
    stroke: rgba(255, 255, 255, 0.35);
}

.option-coming-soon {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px 7px;
    display: inline-block;
}

.option-card h6 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.option-card p {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* ── Party Type Cards (Step 4 — Big Tent vs Ideological) ───────────────── */
.party-type-card {
    background: rgba(12, 14, 20, 0.75);
    border: 2px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    padding: 1.1rem;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.18s;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.party-type-card:hover {
    border-color: var(--primary-color);
    background: rgba(0, 123, 255, 0.08);
    transform: translateY(-2px);
}

.party-type-card.selected {
    border-color: var(--primary-color);
    background: rgba(0, 123, 255, 0.18);
    box-shadow: 0 0 0 1px var(--primary-color)44;
}

.party-type-icon {
    color: var(--primary-color);
    opacity: 0.85;
}

.party-type-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.party-type-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.party-type-stats {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.party-type-stat {
    font-size: 0.72rem;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    font-weight: 500;
}

.party-type-stat.good {
    color: var(--success-color);
    background: color-mix(in srgb, var(--success-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--success-color) 28%, transparent);
}

.party-type-stat.bad {
    color: var(--warning-color);
    background: color-mix(in srgb, var(--warning-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning-color) 25%, transparent);
}

/* ── Parliamentary Standing (Step 2) ──────────────────────────────────── */
.parl-standing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.parl-standing-card {
    background: rgba(12, 14, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    padding: 0.85rem 0.6rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.parl-standing-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: rgba(255,255,255,0.1);
    transition: background 0.2s;
}

.parl-standing-card:hover {
    border-color: rgba(0, 123, 255, 0.55);
    background: rgba(12, 14, 20, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 123, 255, 0.12);
}

.parl-standing-card:hover::before {
    background: rgba(0, 123, 255, 0.45);
}

.parl-standing-card.selected {
    border-color: var(--primary-color);
    background: rgba(0, 123, 255, 0.18);
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.27), 0 6px 20px rgba(0, 123, 255, 0.18);
}

.parl-standing-card.selected::before {
    background: var(--primary-color);
}

.parl-standing-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.2rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.parl-standing-card:hover .parl-standing-icon {
    background: rgba(0, 123, 255, 0.15);
    border-color: rgba(0, 123, 255, 0.4);
    color: var(--primary-color);
}

.parl-standing-card.selected .parl-standing-icon {
    background: rgba(0, 123, 255, 0.22);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.parl-standing-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.parl-standing-pts {
    font-size: 0.72rem;
    color: var(--primary-color);
    font-weight: 700;
    background: rgba(0, 123, 255, 0.14);
    border: 1px solid rgba(0, 123, 255, 0.25);
    border-radius: 6px;
    padding: 0.12rem 0.5rem;
    letter-spacing: 0.02em;
}

.parl-standing-card.selected .parl-standing-pts {
    background: rgba(0, 123, 255, 0.25);
    border-color: rgba(0, 123, 255, 0.45);
}

.parl-standing-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.4;
    font-weight: 400;
}

/* ── Pillar Cards (Step 3) ──────────────────────────────────────────────── */
.pillar-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--card-radius);
    padding: 1.1rem 1.1rem 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 100%;
}

.pillar-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color)22;
}

.pillar-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.pillar-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--pillar-clr) 18%, transparent);
}

.pillar-icon-wrapper svg {
    width: 18px;
    height: 18px;
    stroke: var(--pillar-clr);
}

.pillar-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    line-height: 1.2;
}

.pillar-rating-label {
    font-size: 0.72rem;
    color: var(--pillar-clr);
    font-weight: 500;
    margin-top: 1px;
}

.pillar-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-bottom: 0.9rem;
}

.pillar-btn {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    padding: 0.3rem 0.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1;
}

.pillar-btn .btn-pts {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.pillar-btn .btn-lbl {
    font-size: 0.58rem;
    font-weight: 500;
    opacity: 0.7;
    line-height: 1;
}

.pillar-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--pillar-clr);
    color: var(--text-primary);
}

.pillar-btn.active {
    background: color-mix(in srgb, var(--pillar-clr) 22%, transparent);
    border-color: var(--pillar-clr);
    color: var(--pillar-clr);
    font-weight: 600;
}

.pillar-btn.rating-0.active { background: rgba(220,53,69,0.18); border-color:#dc3545; color:#dc3545; }
.pillar-btn.rating-1.active { background: rgba(214,176,0,0.18); border-color:#d6b000; color:#d6b000; }
.pillar-btn.rating-2.active { background: rgba(40,167,69,0.18); border-color:#28a745; color:#28a745; }
.pillar-btn.rating-3.active { background: rgba(255,193,7,0.22); border-color:#ffc107; color:#ffc107; }

.pillar-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 0.75rem;
    min-height: 2.9em;
}

.pillar-effects-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pillar-effects-list li {
    font-size: 0.68rem;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 500;
}

.effect-good { background: rgba(40,167,69,0.15); color: #28a745; }
.effect-bad  { background: rgba(220,53,69,0.15);  color: #dc3545; }
.effect-side { background: rgba(255,193,7,0.15);  color: #ffc107; }
.effect-neutral { background: rgba(108,117,125,0.15); color: #6c757d; }

.pillar-issues-risk {
    font-size: 0.71rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

.pillar-issues-risk .risk-label {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* ── Point Budget Bar ────────────────────────────────────────────────────── */
.point-budget-bar {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.budget-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
}

.budget-title {
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.budget-nums {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.budget-nums strong {
    font-size: 1rem;
    color: var(--primary-color);
}

.budget-nums strong.budget-zero {
    color: #dc3545;
}

.budget-track {
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
}

.budget-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
    transition: width 0.25s ease, background 0.25s ease;
}

.budget-fill.budget-full {
    background: #dc3545;
}

.budget-cap-note {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: #dc3545;
    opacity: 0.85;
}

.pillar-btn.budget-locked {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── National Profile Panel ─────────────────────────────────────────────── */
.national-profile {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.profile-description {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.profile-section {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 0.8rem 0.9rem;
    height: 100%;
}

.profile-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.strengths-section      .profile-section-title { color: #28a745; }
.vulnerabilities-section .profile-section-title { color: #dc3545; }
.issues-section         .profile-section-title { color: #ffc107; }

.profile-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-list li {
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 2px 0;
    line-height: 1.4;
}

.profile-list li::before {
    content: '• ';
    opacity: 0.5;
}

.profile-empty {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.5;
    font-style: italic;
}

/* Ideology Slider */
.ideology-slider-container {
    position: relative;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.11);
    box-shadow: var(--shadow);
}

.ideology-slider-wrapper {
    position: relative;
    margin: 1rem 0;
}

.ideology-range {
    position: relative;
    z-index: 2;
    background: transparent;
    -webkit-appearance: none;
    width: 100%;
    height: 40px;
}

.ideology-range::-webkit-slider-track {
    background: transparent;
    height: 8px;
    border-radius: 4px;
}

.ideology-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: white;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: var(--transition-fast);
}

.ideology-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: var(--shadow-lg);
}

.ideology-gradient {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 8px;
    transform: translateY(-50%);
    background: linear-gradient(to right, 
        #dc3545 0%,     /* Far Left - Red */
        #fd7e14 14%,    /* Left - Orange */
        #17a2b8 28%,    /* Centre-Left - Info Blue */
        #28a745 42%,    /* Centrist - Green */
        #28a745 58%,    /* Centrist - Green */
        #007bff 72%,    /* Centre-Right - Primary Blue */
        #6f42c1 86%,    /* Right - Purple */
        #343a40 100%    /* Far Right - Dark */
    );
    border-radius: 4px;
    z-index: 1;
}

.ideology-markers {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding: 0 12px;
}

.marker {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    text-align: center;
    transition: var(--transition-fast);
}

.marker.left { color: #fd7e14; }
.marker.centre-left { color: #17a2b8; }
.marker.centrist { color: #28a745; }
.marker.centre-right { color: #007bff; }
.marker.right { color: #6f42c1; }

/* Platform Promises */
.platform-promises {
    margin-top: 2rem;
}

.promise-card {
    background: var(--card-bg-elevated);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
}

.promise-card:hover {
    border-color: var(--primary-color);
    background: rgba(0, 123, 255, 0.1);
}

.promise-card.selected {
    border-color: var(--success-color);
    background: rgba(40, 167, 69, 0.2);
}

.promise-card .risk-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.promise-card h6 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.promise-card p {
    color: var(--text-secondary);
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* ── Phase 3A: setup promise picker ──────────────────────────────── */
.promise-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.promise-filter-pill {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255,255,255,0.11);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.promise-filter-pill:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.promise-filter-pill.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.promise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.85rem;
}

#promisesContainer {
    max-height: calc(100vh - 430px);
    min-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

#promisesContainer::-webkit-scrollbar {
    width: 5px;
}

#promisesContainer::-webkit-scrollbar-track {
    background: transparent;
}

#promisesContainer::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
}

#promisesContainer::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

.promise-grid .promise-card {
    margin-bottom: 0;
}

.promise-card-badges {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.promise-card-badges .promise-check {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: var(--transition-fast);
}

.promise-card-badges .promise-check svg {
    width: 14px;
    height: 14px;
}

.promise-card.selected .promise-check {
    background: var(--success-color);
    border-color: var(--success-color);
    color: #fff;
}

.promise-card .promise-category {
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.promise-card .promise-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0;
}

.mandate-preview {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255,255,255,0.11);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
}

.mandate-preview-title {
    color: var(--text-primary);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
}

.mandate-preview-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.6rem;
}

.mandate-preview-list li {
    color: var(--text-primary);
    font-size: 0.9rem;
    padding: 0.2rem 0;
}

/* ── Phase 3A: Issues / Promises floating pills ──────────────────── */
/* ── Sub-header row: [empty left] [pills centre] [view-toggle right] ── */
.game-subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.game-subheader-left {
    flex: 1;
}
.game-subheader-center {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}
.game-subheader-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.ip-bar {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0;
}

.ip-pill-wrap {
    position: relative;
    display: inline-block;
}

.ip-inline-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: rgba(255,255,255,0.28);
    border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    max-width: 40px;
    overflow: hidden;
    opacity: 1;
    transition: max-width 0.22s ease, opacity 0.18s ease;
}
.ip-inline-count.d-none { display: none !important; }

.ip-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 1.2rem;
    border: none;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
    color: #fff;
    white-space: nowrap;
}

.ip-pill:hover { filter: brightness(1.12); transform: translateY(-1px); }
.ip-pill:active { transform: translateY(0); filter: brightness(0.95); }

/* Pill text label — collapses smoothly as viewport narrows */
.ip-pill-label {
    display: inline-block;
    max-width: 80px;
    overflow: hidden;
    vertical-align: middle;
    transition: max-width 0.28s ease, opacity 0.22s ease;
    opacity: 1;
}

.ip-pill-strengths {
    background: linear-gradient(135deg, #5a32a8, #7c3aed);
    box-shadow: 0 3px 12px rgba(111,66,193,0.45);
}
.ip-pill-strengths:hover { filter: brightness(1.14); transform: translateY(-1px); }

.ip-pill-issues {
    background: linear-gradient(135deg, #c62828, #e53935);
    box-shadow: 0 3px 12px rgba(198,40,40,0.45);
}

.ip-pill-promises {
    background: linear-gradient(135deg, #e65100, #f57c00);
    box-shadow: 0 3px 12px rgba(230,81,0,0.45);
}


/* ── Phase 3A: Issues / Promises card internals ──────────────────── */
.ip-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ip-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
}

.ip-card:last-child {
    margin-bottom: 0;
}

.ip-card-hd {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

/* Badges (tier + status/difficulty) always share the first line;
   title wraps to its own line below them. */
.ip-card-hd .ip-sev        { order: 1; }
.ip-card-hd .ip-status-pill { order: 2; margin-left: 0; }
.ip-card-hd .ip-diff        { order: 2; margin-left: 0; }
.ip-card-hd .ip-title       { order: 3; flex-basis: 100%; }

.ip-sev {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Issue tier badges — 5-tier taxonomy (high severity = bad) */
.sev-crisis   { background: #b02a37; }
.sev-systemic { background: #dc3545; }
.sev-acute    { background: #fd7e14; }
.sev-pressing { background: #d47800; }
.sev-limited  { background: #6c757d; }
/* Legacy promise-importance colours — still used by politicalImportance (Major/Moderate/Minor) */
.sev-major    { background: #dc3545; }
.sev-moderate { background: #fd7e14; }
.sev-minor    { background: #6c757d; }
.sev-active   { background: rgba(34,197,94,0.28);  color: #86efac; }
.sev-lost     { background: rgba(100,116,139,0.22); color: #94a3b8; }

/* Strength vitality tiers — 5-tier taxonomy (high vitality = good) */
.sev-str-nascent     { background: rgba(100,116,139,0.30); color: #94a3b8; }
.sev-str-notable     { background: rgba(59,130,246,0.28);  color: #93c5fd; }
.sev-str-prominent   { background: rgba(20,184,166,0.28);  color: #5eead4; }
.sev-str-exceptional { background: rgba(34,197,94,0.28);   color: #86efac; }
.sev-str-defining    { background: rgba(234,179,8,0.28);   color: #fde047; }

.ip-title {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 1rem;
    line-height: 1.25;
}

.ip-sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.38);
    font-weight: 500;
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
}

.ip-desc {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.ip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.ip-tag {
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color, #3a3f47);
    color: var(--text-secondary, #adb5bd);
    border-radius: 999px;
    padding: 0.08rem 0.5rem;
}

.ip-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.4rem;
}

.ip-progress-bar {
    height: 100%;
    background: var(--success-color, #28a745);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* ── IP card enrichments: status, urgency, stat chips, links ─────── */
.ip-status-pill {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    margin-left: auto;
    flex-shrink: 0;
}
.ip-status-active        { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
.ip-status-resolved      { background: rgba(100,116,139,0.15); color: #94a3b8; border: 1px solid rgba(100,116,139,0.2); }
.ip-status-critical      { background: rgba(239,68,68,0.2); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.ip-status-stagnant      { background: rgba(148,163,184,0.12); color: #94a3b8; border: 1px solid rgba(148,163,184,0.2); }
.ip-status-deteriorating { background: rgba(220,38,38,0.3); color: #fca5a5; border: 1px solid rgba(220,38,38,0.45); }
.ip-status-resolving     { background: rgba(34,197,94,0.25); color: #86efac; border: 1px solid rgba(34,197,94,0.4); }
.ip-status-text     { color: var(--text-secondary, #adb5bd); }

.ip-urgency-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.45rem;
}
.ip-urgency-label {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.ip-urgency-track {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.07);
    border-radius: 999px;
    overflow: hidden;
}
.ip-urgency-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.ip-urgency-val {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
    min-width: 2.5rem;
    text-align: right;
}

.ip-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.4rem;
}
.ip-stat-chip {
    font-size: 0.62rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.45);
    border-radius: 4px;
    padding: 0.07rem 0.4rem;
    text-transform: capitalize;
}

/* ── Issue archetype badge ─────────────────────────────────────────────── */
.ip-archetype-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ip-archetype-sa {
    background: rgba(20,184,166,0.18);
    border: 1px solid rgba(20,184,166,0.35);
    color: rgba(94,234,212,0.9);
}
.ip-archetype-sd {
    background: rgba(99,102,241,0.18);
    border: 1px solid rgba(99,102,241,0.35);
    color: rgba(165,180,252,0.9);
}
.ip-archetype-hy {
    background: rgba(245,158,11,0.18);
    border: 1px solid rgba(245,158,11,0.35);
    color: rgba(252,211,77,0.9);
}

/* ── Anchor stats row ─────────────────────────────────────────────────── */
.ip-anchor-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
}
.ip-anchor-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.1rem;
}
.ip-anchor-stat-item {
    font-size: 0.62rem;
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 4px;
    padding: 0.07rem 0.4rem;
    color: rgba(165,180,252,0.8);
    text-transform: capitalize;
}
.ip-anchor-val {
    font-weight: 700;
    color: rgba(224,231,255,0.9);
    margin-left: 0.15rem;
}

/* ── Stat / effect rows directly on cards (no section label above) ───────── */
.ip-card-stat-row {
    margin-top: 0.45rem;
    margin-bottom: 0.1rem;
}

/* ── Continuing effects row ─────────────────────────────────────────────── */
.ip-cont-effects {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
}
.ip-cont-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.1rem;
}
/* .ip-cont-chip — retired; continuing-effect chips now use .narrative-chip via buildStatDeltaChip */

/* ── Resolution needs note ─────────────────────────────────────────────── */
.ip-resolution-note {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.45);
    background: rgba(245,158,11,0.07);
    border-left: 2px solid rgba(245,158,11,0.35);
    padding: 0.35rem 0.55rem;
    border-radius: 0 4px 4px 0;
    margin-top: 0.4rem;
    line-height: 1.4;
}
.ip-res-label {
    font-weight: 700;
    color: rgba(252,211,77,0.75);
    margin-right: 0.2rem;
}

.ip-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.45rem;
}
.ip-linked {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.45);
    font-style: normal;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    padding: 0.18rem 0.5rem;
    display: inline-block;
    width: fit-content;
}
.ip-linked-issue {
    color: rgba(252,196,25,0.65);
    background: rgba(252,196,25,0.06);
    border-color: rgba(252,196,25,0.15);
}

.ip-diff {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    flex-shrink: 0;
    margin-left: auto;
}
.diff-hard { background: rgba(239,68,68,0.18); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.diff-mod  { background: rgba(251,146,60,0.18); color: #fb923c; border: 1px solid rgba(251,146,60,0.25); }
.diff-easy { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }

.ip-resolve-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.ip-progress-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.ip-progress-row .ip-progress {
    flex: 1;
    margin-top: 0;
}
.ip-prog-val {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
    min-width: 2.2rem;
    text-align: right;
}

/* ── Promise progress bar tier colours ─────────────────────────────── */
.ip-progress-bar.pbar-none        { background: rgba(255,255,255,0.18); }
.ip-progress-bar.pbar-early       { background: #f59e0b; }
.ip-progress-bar.pbar-partial     { background: #f97316; }
.ip-progress-bar.pbar-substantial { background: #3b82f6; }
.ip-progress-bar.pbar-fulfilled   { background: #22c55e; }
.ip-progress-bar.pbar-exceeded    { background: #a78bfa; }
.ip-progress-bar.pbar-lapsed      { background: #ef4444; }

/* ── Promise history entries ─────────────────────────────────────────── */
.ip-promise-history {
    margin-top: 0.4rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 0.35rem;
}
.ip-history-entry {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.38);
    line-height: 1.4;
    margin-top: 0.15rem;
}
.ip-hdelta {
    font-weight: 700;
    font-size: 0.65rem;
}
.ip-hdelta.pos { color: #4ade80; }
.ip-hdelta.neg { color: #f87171; }

/* ── Terminal promise cards (lapsed/fulfilled) ─────────────────────── */
.ip-card-terminal { opacity: 0.7; }

/* ── Relationship-label colours on linked items ─────────────────────── */
.ip-rel-direct   { color: rgba(74,222,128,0.85); }
.ip-rel-partial  { color: rgba(99,179,237,0.8); }
.ip-rel-indirect { color: rgba(203,213,225,0.55); }

/* ── Fulfillment quality tag ─────────────────────────────────────────── */
.ip-quality-tag {
    font-size: 0.6rem;
    background: rgba(167,139,250,0.15);
    border: 1px solid rgba(167,139,250,0.25);
    color: #c4b5fd;
    border-radius: 4px;
    padding: 0.06rem 0.38rem;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Pressure row inside issue cards ────────────────────────────────── */
.ip-pressure-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.45rem;
    flex-wrap: wrap;
}
.ip-pressure-row .ip-urgency-track { flex: 1; min-width: 40px; }

/* ── Mandate & National Pressure overlay ────────────────────────────── */
.mandate-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    background: rgba(3, 6, 12, 0.58);
    backdrop-filter: blur(20px) saturate(0.72);
    -webkit-backdrop-filter: blur(20px) saturate(0.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}
.mandate-overlay.d-none { display: none !important; }
.mandate-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.mandate-overlay.over-major-event {
    z-index: 11000;
}

.mandate-overlay-backdrop {
    position: absolute;
    inset: 0;
}

.mandate-overlay-panel {
    --mandate-accent: #ef4444;
    --mandate-accent-rgb: 239, 68, 68;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    background: linear-gradient(135deg, rgba(8,11,17,0.54), rgba(8,11,17,0.3));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;
    opacity: 0.88;
    transform: translateY(10px) scale(0.992);
    transform-origin: 50% 48%;
    transition: transform 240ms cubic-bezier(.2,.78,.24,1), opacity 180ms ease;
    will-change: transform, opacity;
}
.mandate-overlay.is-open .mandate-overlay-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mandate-category-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.mandate-overlay-panel[data-category="strengths"] {
    --mandate-accent: #a855f7;
    --mandate-accent-rgb: 168, 85, 247;
}
.mandate-overlay-panel[data-category="issues"] {
    --mandate-accent: #ef4444;
    --mandate-accent-rgb: 239, 68, 68;
}
.mandate-overlay-panel[data-category="promises"] {
    --mandate-accent: #f59e0b;
    --mandate-accent-rgb: 245, 158, 11;
}

.mandate-overlay-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0.8rem 1.25rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.mandate-overlay-kicker {
    font-size: 0.66rem;
    font-weight: 800;
    color: rgba(255,255,255,0.34);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.mandate-overlay-close {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    color: rgba(255,255,255,0.56);
    font-size: 1.65rem;
    line-height: 1;
    padding: 0 0 0.14rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, transform 0.15s;
}
.mandate-overlay-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
    transform: scale(1.04);
}

.mandate-overlay-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.mandate-index-pane {
    width: clamp(350px, 36vw, 520px);
    flex: 0 0 clamp(350px, 36vw, 520px);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.mandate-overlay-divider {
    width: 1px;
    margin: 0.35rem 0 1.1rem;
    background: linear-gradient(to bottom, transparent, rgba(var(--mandate-accent-rgb),0.24) 14%, rgba(255,255,255,0.07) 55%, transparent);
    flex-shrink: 0;
}

.mandate-category-nav {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.35rem 1.15rem 0.2rem;
}
.mandate-category-arrow {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,0.38);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.16s, background 0.16s, transform 0.16s;
}
.mandate-category-arrow:hover {
    color: #fff;
    background: rgba(var(--mandate-accent-rgb),0.12);
    transform: scale(1.08);
}
.mandate-category-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: var(--mandate-accent);
}
.mandate-category-icon {
    font-size: 1.1rem;
}
.mandate-category-name {
    color: #f8fafc;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 850;
    letter-spacing: -0.035em;
}
.mandate-category-count {
    min-width: 28px;
    height: 28px;
    padding: 0 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--mandate-accent-rgb),0.38);
    border-radius: 999px;
    background: rgba(var(--mandate-accent-rgb),0.1);
    color: rgba(255,255,255,0.72);
    font-size: 0.72rem;
    font-weight: 800;
}
.mandate-view-toggle {
    display: flex;
    align-self: center;
    gap: 0.18rem;
    padding: 0.2rem;
    margin: 0.15rem 0 0.55rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.045);
}
.mandate-view-btn {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,0.38);
    font-size: 0.68rem;
    font-weight: 750;
    padding: 0.38rem 0.75rem;
    cursor: pointer;
}
.mandate-view-btn.active {
    background: rgba(var(--mandate-accent-rgb),0.15);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(var(--mandate-accent-rgb),0.22) inset;
}
.mandate-list-stage {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.mandate-col-body {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 0.7rem clamp(1rem, 2.2vw, 1.65rem) 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
    opacity: 0;
    transform: translateX(18px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.mandate-col-body.is-active {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}
.mandate-col-body::-webkit-scrollbar { width: 5px; }
.mandate-col-body::-webkit-scrollbar-track { background: transparent; }
.mandate-col-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }

.mandate-overlay-ft {
    display: none;
}
.mandate-ft-label {
    display: none;
}

/* Cards in the overlay get a dossier card cursor */
.mo-issue-card, .mo-promise-card, .mo-strength-card {
    margin-bottom: 1rem;
}
.mo-issue-card:last-child, .mo-promise-card:last-child, .mo-strength-card:last-child {
    margin-bottom: 0;
}
.mo-issue-card.mo-card-focused {
    border-color: rgba(220,38,38,0.5) !important;
    box-shadow: 0 0 0 1px rgba(220,38,38,0.25), 0 4px 20px rgba(220,38,38,0.12);
}
.mo-promise-card.mo-card-focused {
    border-color: rgba(202,138,4,0.5) !important;
    box-shadow: 0 0 0 1px rgba(202,138,4,0.25), 0 4px 20px rgba(202,138,4,0.1);
}
.mo-strength-card.mo-card-focused {
    border-color: rgba(34,197,94,0.5) !important;
    box-shadow: 0 0 0 1px rgba(34,197,94,0.2), 0 4px 20px rgba(34,197,94,0.1);
}

/* ── Pill warning accent ────────────────────────────────────────────── */
.ip-pill-wrap button.ip-pill-warn {
    border-color: rgba(249,115,22,0.6) !important;
}

/* ── Cross-link card highlight ──────────────────────────────────────── */
@keyframes card-highlight-anim {
    0%   { box-shadow: 0 0 0 2px rgba(99,179,237,0.6), 0 0 12px rgba(99,179,237,0.3); background: rgba(99,179,237,0.08); }
    70%  { box-shadow: 0 0 0 2px rgba(99,179,237,0.2); }
    100% { box-shadow: none; background: transparent; }
}
.card-highlight {
    animation: card-highlight-anim 1.5s ease-out forwards;
}

/* ── Actor / group chips (shown only in focus panel, hidden in list) ─── */
.ip-actor-chip {
    font-size: 0.62rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.45);
    border-radius: 4px;
    padding: 0.06rem 0.38rem;
    white-space: nowrap;
}
.ip-group-chip {
    font-size: 0.62rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.4);
    border-radius: 4px;
    padding: 0.06rem 0.38rem;
    white-space: nowrap;
}

/* ── Latest history note on issue cards ─────────────────────────────── */
.ip-history-note {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.4);
    font-style: italic;
    margin-top: 0.3rem;
}

/* ── Separate Mandate relationship colour ───────────────────────────── */
.ip-rel-separate { color: rgba(250,204,21,0.65); }

/* ── Clickable linked chips ─────────────────────────────────────────── */
.ip-link-chip {
    cursor: pointer;
    text-decoration: none;
    opacity: 0.9;
}
.ip-link-chip:hover { opacity: 1; filter: brightness(1.2); }

/* ── Mandate Credibility bar ─────────────────────────────────────────── */
.mandate-cred-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.mandate-cred-label {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    flex-shrink: 0;
}
.mandate-cred-bar-wrap {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
}
.mandate-cred-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}
.mandate-cred-bar.mc-high { background: #22c55e; }
.mandate-cred-bar.mc-mid  { background: #f59e0b; }
.mandate-cred-bar.mc-low  { background: #ef4444; }
.mandate-cred-val {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    min-width: 1.6rem;
    text-align: right;
    flex-shrink: 0;
}

/* ── Atmospheric background image splash ────────────────────────────── */
.mandate-bg-splash {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 500ms ease, background-image 300ms ease;
    pointer-events: none;
    filter: blur(22px) brightness(0.12) saturate(0.7);
    transform: scale(1.06);
}
.mandate-bg-splash.splash-active {
    opacity: 0.72;
}
/* ensure all overlay content sits above the splash */
.mandate-overlay-body,
.mandate-overlay-hd {
    position: relative;
    z-index: 1;
}

/* ── Selected dossier detail ── */
.mandate-detail-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.mandate-mobile-back {
    display: none;
}
.mandate-detail-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
}
.mandate-detail-ph-icon {
    font-size: 2rem;
    color: rgba(255,255,255,0.12);
}
.mandate-detail-ph-text {
    font-size: 0.8rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.2);
}
.mandate-focus-inner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.mandate-focus-inner.detail-visible {
    opacity: 1;
}
.mandate-focus-overlay {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.97) 0%,
        rgba(0,0,0,0.82) 30%,
        rgba(0,0,0,0.45) 60%,
        transparent 100%
    );
    padding: clamp(3rem, 8vh, 7rem) clamp(1.5rem, 4vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
    overflow-y: auto;
    max-height: 88%;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.mandate-focus-overlay::-webkit-scrollbar { width: 4px; }
.mandate-focus-overlay::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }
.mandate-focus-sev {
    display: inline-block;
    margin-bottom: 0.2rem;
    align-self: flex-start;
}
.mandate-focus-title {
    font-size: clamp(1.45rem, 2.6vw, 2.5rem);
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
.mandate-focus-sub {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.48);
    letter-spacing: 0.03em;
}
.mandate-focus-desc {
    font-size: clamp(0.85rem, 1.15vw, 1rem);
    color: rgba(255,255,255,0.65);
    line-height: 1.62;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 0.6rem;
    margin-top: 0.2rem;
}
.mandate-focus-stats {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 0.6rem;
    margin-top: 0.1rem;
}
.mandate-focus-section-lbl {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.28);
    margin-top: 0.5rem;
}
.mandate-focus-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.mandate-focus-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
}
.mandate-renounce-wrap {
    display: flex;
    align-items: center;
}
.mandate-renounce-btn {
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.35);
    color: #f87171;
    border-radius: 5px;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0.3rem 0.7rem;
    transition: background 0.15s, border-color 0.15s;
}
.mandate-renounce-btn:hover {
    background: rgba(239,68,68,0.22);
    border-color: rgba(239,68,68,0.6);
}

@media (max-width: 840px) {
    .mandate-overlay {
        padding: 0;
        background: rgba(3,6,12,0.68);
        backdrop-filter: blur(16px) saturate(0.7);
        -webkit-backdrop-filter: blur(16px) saturate(0.7);
    }
    .mandate-overlay-panel {
        width: 100%;
        height: 100dvh;
        box-shadow: none;
    }
    .mandate-overlay-hd {
        min-height: 52px;
        padding: 0.55rem 0.8rem;
    }
    .mandate-overlay.mandate-detail-open .mandate-overlay-hd {
        position: absolute;
        inset: 0 0 auto;
        z-index: 8;
        background: linear-gradient(to bottom, rgba(4,7,12,0.88), rgba(4,7,12,0));
        pointer-events: none;
    }
    .mandate-overlay.mandate-detail-open .mandate-overlay-kicker,
    .mandate-overlay.mandate-detail-open .mandate-overlay-close {
        pointer-events: auto;
    }
    .mandate-overlay-close {
        width: 38px;
        height: 38px;
    }
    .mandate-overlay-body {
        position: relative;
    }
    .mandate-index-pane {
        width: 100%;
        flex-basis: 100%;
        transition: transform 0.24s ease, opacity 0.2s ease;
    }
    .mandate-overlay-divider {
        display: none;
    }
    .mandate-detail-col {
        position: absolute;
        inset: 0;
        z-index: 4;
        background: #090c12;
        transform: translateX(100%);
        transition: transform 0.26s cubic-bezier(.2,.75,.25,1);
        pointer-events: none;
    }
    .mandate-overlay.mandate-detail-open .mandate-index-pane {
        transform: translateX(-18%);
        opacity: 0;
        pointer-events: none;
    }
    .mandate-overlay.mandate-detail-open .mandate-detail-col {
        transform: translateX(0);
        pointer-events: auto;
    }
    .mandate-mobile-back {
        display: flex;
        align-items: center;
        align-self: flex-start;
        min-height: 46px;
        margin: 0;
        padding: 0.48rem 0.7rem;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 999px;
        background: rgba(6,9,15,0.52);
        color: rgba(255,255,255,0.82);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        font-size: 0.78rem;
        font-weight: 750;
        cursor: pointer;
        position: absolute;
        top: 4.1rem;
        left: 0.85rem;
        z-index: 7;
    }
    .mandate-focus-inner {
        flex: 1;
        height: auto;
    }
    .mandate-focus-overlay {
        max-height: 82%;
        padding: 4rem 1.2rem 1.5rem;
    }
    .mandate-category-nav {
        min-height: 70px;
        padding-inline: 0.55rem;
    }
    .mandate-category-arrow {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
    .mandate-col-body {
        padding: 0.65rem 0.85rem 1.5rem;
    }
}

@media (max-width: 430px) {
    .mandate-overlay-kicker { font-size: 0.58rem; }
    .mandate-category-name { font-size: 1.25rem; }
    .mandate-category-heading { gap: 0.4rem; }
    .mandate-category-count { min-width: 25px; height: 25px; }
    .mandate-view-toggle { margin-bottom: 0.35rem; }
    .mandate-col-body .ip-card { padding: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mandate-overlay,
    .mandate-overlay-panel {
        transition-duration: 0.01ms !important;
    }
}

/* ── Phase 3A: Mandate sidebar panel ─────────────────────────────── */

/* Game Page Styles */
.game-body {
    background: transparent;
    height: 100vh;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ── Map as persistent background — stops at stats bar top edge ───── */
#mapBackground {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--stats-bar-h);   /* never overlaps the stats bar */
    z-index: 0;
    overflow: hidden;
}

#mapBackground #mapCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
}

#mapBackground #mapCanvas:active {
    cursor: grabbing;
}

/* Layers wrap is now fixed (outside #mapBackground) — no override needed */

#mapBackground .map-float-controls {
    top: calc(var(--map-ui-top) + 10px);
    right: 14px;
}

#mapBackground .map-detail-panel.open ~ .map-float-controls {
    right: calc(clamp(360px, 28vw, 540px) + 14px);
}

/* Detail panel: full right edge below the fixed header (stats bar excluded). */
#mapBackground .map-detail-panel {
    top: var(--game-header-h);
    height: calc(100% - var(--game-header-h));
}

/* ── Panel views: smooth fade-in when becoming visible ────────────── */
#dashboardView, #parliamentView {
    opacity: 0;
    transition: opacity 0.2s ease;
}
#dashboardView.panel-visible, #parliamentView.panel-visible {
    opacity: 1;
}

/* ── Map view: pass mouse events through the transparent overlay ──── */
.game-content.map-view-active {
    pointer-events: none;
}
.game-content.map-view-active .game-subheader {
    pointer-events: auto;
}

/* ── Map scrim: blur + darken when panel view is active ────────────── */
#mapScrim {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

#mapScrim.map-scrim--active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Turn background image layer ──────────────────────────────────── */
#gameBgSlide {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: cinematicDrift 25s ease-in-out infinite alternate;
    filter: brightness(0.28) saturate(0.65);
    pointer-events: none;
}
.game-bg-vignette {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.55) 0%,
            rgba(0,0,0,0.2) 30%,
            rgba(0,0,0,0.2) 70%,
            rgba(0,0,0,0.75) 100%),
        radial-gradient(ellipse at center,
            transparent 40%,
            rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}

.game-header {
    background: linear-gradient(135deg, rgba(45, 52, 54, 0.98), rgba(26, 29, 35, 0.95));
    border-bottom: 2px solid var(--primary-color);
    padding: 0.75rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(15px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    min-height: 60px;
}

.country-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
}

.country-info .country-flag-small {
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.country-info .country-flag-small img {
    transition: var(--transition-fast);
}

.country-info .country-flag-small:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.country-info h4 {
    font-size: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

/* Government-type subtitle — fades out smoothly before it gets clipped */
.country-info small {
    display: block;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 1;
    transition: max-width 0.28s ease, opacity 0.25s ease;
}

/* Country name + gov-type text block — collapses at mobile widths */
.country-text-block {
    overflow: hidden;
    max-width: 150px;
    opacity: 1;
    transition: max-width 0.3s ease, opacity 0.25s ease;
    white-space: nowrap;
}

.calendar-display {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.6rem 0.85rem 0.85rem 0.75rem;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    transition: var(--transition-fast), min-width 0.3s ease;
    min-width: 200px;
    max-width: 340px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Calendar icon */
.cal-icon {
    flex-shrink: 0;
}

/* Calendar body: contains date + turn + time display in a flex row */
.cal-body {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    min-width: 0;
    flex: 1;
}

.cal-date-full {
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
}

.cal-date-short {
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    display: none; /* hidden on desktop, shown at narrow widths */
}

.cal-turn {
    white-space: nowrap;
    font-size: 0.82rem;
}

.calendar-display:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transform: translateY(-1px);
}

.calendar-display i,
.calendar-display svg {
    flex-shrink: 0 !important;
    min-width: 18px !important;
    min-height: 18px !important;
}

.game-header .btn {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    min-width: 120px;
    border-width: 2px;
    text-transform: none;
    letter-spacing: 0.25px;
}

.game-header .btn i {
    width: 18px;
    height: 18px;
}

.game-header .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.settings-btn {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important;
    min-width: 48px !important;
    min-height: 48px !important;
}

.settings-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Settings Dropdown */
.dropdown-menu.bg-dark {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}

.dropdown-item.text-white {
    color: var(--text-primary) !important;
    padding: 0.75rem 1rem;
    transition: var(--transition-fast);
}

.dropdown-item.text-white:hover {
    background: rgba(0, 123, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

.dropdown-item.text-danger:hover {
    background: rgba(220, 53, 69, 0.1) !important;
    color: var(--danger-color) !important;
}

.dropdown-divider.border-secondary {
    border-color: var(--border-color) !important;
}

.game-content {
    padding: 0.75rem 0 0;
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.bg-purple {
    background: var(--purple-color) !important;
}

/* Parliament View Placeholder */
.parliament-view-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    gap: 0.75rem;
}

.parliament-view-placeholder .placeholder-icon {
    width: 48px !important;
    height: 48px !important;
    stroke: var(--text-muted) !important;
    opacity: 0.5;
    margin-bottom: 0.5rem;
}

.parliament-view-placeholder h4 {
    color: var(--text-primary);
    margin: 0;
}

/* Sidebar group labels — tab section dividers (MEMORY / QUICK VIEWS) */
.sidebar-group-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.1rem 0 0.45rem 0.55rem;
    border-left: 2px solid rgba(120, 160, 255, 0.45);
    margin-bottom: 0.15rem;
}

/* Sidebar stub panels */
.sidebar-stub-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 2rem 1rem;
    text-align: center;
    gap: 0.5rem;
    opacity: 0.6;
}

.sidebar-stub-panel .stub-icon {
    width: 32px !important;
    height: 32px !important;
    stroke: var(--text-muted) !important;
    margin-bottom: 0.25rem;
}

.sidebar-stub-panel .stub-label {
    color: var(--text-secondary);
    font-weight: 600;
    margin: 0;
    font-size: 0.9rem;
}

.sidebar-stub-panel .stub-hint {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

/* Stats Overview */
.stats-overview {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}

.stat-card {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.stat-card h5 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.stat-card small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Recent Events */
.recent-events {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}

.event-item {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--primary-color);
}

.event-item.positive {
    border-left-color: var(--success-color);
}

.event-item.negative {
    border-left-color: var(--danger-color);
}

.event-item h6 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.event-item p {
    color: var(--text-secondary);
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Bottom Stats Bar */
.stats-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(45, 52, 54, 0.95);
    border-top: 2px solid var(--border-color);
    z-index: 100;
    backdrop-filter: blur(10px);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    height: var(--stats-bar-h, 80px);
    max-height: none;
    transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.28s ease;
    overflow: hidden;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 2rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transition: max-width 0.28s ease, opacity 0.22s ease;
}

/* End Turn button text — collapses at ≤768px */
.end-turn-label {
    display: inline-block;
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transition: max-width 0.28s ease, opacity 0.22s ease;
}

.stat-value {
    color: rgba(255,255,255,0.80);
    font-weight: 600;
    font-size: 0.85rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    padding: 0.1em 0.55em;
    display: inline-block;
}

/* Parliament Styles */
.parliament-body {
    background: linear-gradient(135deg, #1a1d23 0%, #2d3436 50%, #34495e 100%);
    min-height: 100vh;
}

.parliament-compact-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}

.parliament-chamber-compact {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.chamber-visualization-compact {
    position: relative;
    min-height: 350px;
}

.parliament-actions-compact {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.parliament-story-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}

#parliamentStoryMessages {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    min-height: 200px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Prime Minister/President Seat Animation */
@keyframes pmGlow {
    from { 
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
        border-color: rgba(255, 255, 255, 0.8);
    }
    to { 
        box-shadow: 0 0 25px rgba(255, 255, 255, 1);
        border-color: rgba(255, 255, 255, 1);
    }
}

/* Leader Seat Styling */
.parliament-seat[data-is-leader="true"]:not([data-is-pm="true"]) {
    animation: leaderPulse 4s ease-in-out infinite alternate;
}

@keyframes leaderPulse {
    0% { 
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        border-color: rgba(255, 255, 255, 0.8);
    }
    100% { 
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
        border-color: rgba(255, 255, 255, 1);
    }
}

.parliament-header {
    background: rgba(45, 52, 54, 0.95);
    border-bottom: 3px solid var(--primary-color);
    padding: 1rem 0;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.parliament-content {
    padding: 2rem 0;
    min-height: calc(100vh - 120px);
}

/* Parliament Chamber */
.parliament-chamber {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    height: 100%;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}

.chamber-visualization {
    position: relative;
    min-height: 450px;
    margin-bottom: 2rem;
}

.seats-container {
    position: relative;
    min-height: 400px;
}

.parliament-seat {
    position: relative;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.parliament-seat:hover {
    z-index: 10 !important;
}

/* Westminster Chamber Styling */
.parliament-side {
    position: relative;
}

.government-side {
    border-right: 2px dashed var(--border-color);
    padding-right: 15px;
}

.opposition-side {
    border-left: 2px dashed var(--border-color);
    padding-left: 15px;
}

/* Chamber Floor Effect - Removed */

.parliament-row {
    display: flex;
    justify-content: center;
    margin-bottom: 2px;
}

.party-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    max-width: 100%;
}

.legend-item {
    flex: 0 1 auto;
    min-width: 0;
}

.legend-party-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 200px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 2px;
}

.legend-party-info {
    flex: 1;
    min-width: 0;
}

.legend-party-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    line-height: 1.2;
}

.legend-seats {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

.legend-you-badge {
    background: var(--primary-color);
    color: white;
    padding: 0.1rem 0.3rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
}

.legend-ideology {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    font-style: italic;
}

.parliament-info-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Parliament Actions */
.parliament-actions {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    height: fit-content;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}

.action-panel .btn {
    font-size: 0.9rem;
    padding: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.major-action-btn {
    font-size: 1.1rem !important;
    padding: 1rem !important;
    font-weight: 600;
}

.action-panel .btn i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.major-action-btn i {
    width: 20px !important;
    height: 20px !important;
}

.highlighted-action {
    position: relative;
    background: linear-gradient(135deg, var(--danger-color), #c82333) !important;
    border-color: var(--danger-color) !important;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.info-panel {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--info-color);
}

.info-content h6 {
    color: var(--text-primary);
    margin-bottom: 0;
}

.current-activity, .debate-status {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.status-card h6 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.current-bill {
    background: var(--bg-primary);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--primary-color);
}

.bill-name {
    color: var(--primary-color);
    font-weight: 600;
}

/* Bills Section */
.bills-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}

.bill-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: var(--transition-fast);
}

.bill-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.bill-header {
    display: flex;
    justify-content: between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.bill-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.bill-status {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.bill-status.proposed {
    background: var(--info-color);
    color: white;
}

.bill-status.passed {
    background: var(--success-color);
    color: white;
}

.bill-status.failed {
    background: var(--danger-color);
    color: white;
}

.bill-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.bill-meta {
    display: flex;
    justify-content: between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Character Avatars */
.character-avatar {
    flex-shrink: 0;
}

.character-avatar {
    position: relative;
    flex-shrink: 0;
}

.character-avatar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 4px solid var(--primary-color);
    background: rgba(0, 123, 255, 0.15);
    box-shadow: 0 3px 12px rgba(0, 123, 255, 0.4);
    z-index: 0;
    transition: var(--transition-fast);
}

.avatar-img {
    width: 48px;
    height: 52px;
    object-fit: cover;
    object-position: center bottom;
    position: relative;
    z-index: 1;
    transition: var(--transition-fast);
    border-radius: 0;
    border: none;
}

.character-avatar:hover::before {
    box-shadow: 0 5px 16px rgba(0, 123, 255, 0.6);
    border-color: var(--primary-color);
    background: rgba(0, 123, 255, 0.25);
}

.character-avatar:hover .avatar-img {
    transform: scale(1.05);
}

/* Integrated Chat Panel */
.integrated-chat-panel {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 2px solid var(--border-color);
    margin-bottom: 1rem;
    transition: var(--transition-normal);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.integrated-chat-panel.expanded {
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
}

.chat-header-integrated {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition-fast);
}

.character-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.chat-header-integrated:hover {
    background: rgba(0, 123, 255, 0.1);
}

.chat-content-integrated {
    background: var(--bg-secondary);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.chat-content-integrated.expanded {
    max-height: 400px;
    padding: 1rem;
}

.chat-messages-integrated {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 1rem;
    padding-right: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-primary);
}

.chat-messages-integrated::-webkit-scrollbar {
    width: 6px;
}

.chat-messages-integrated::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 3px;
}

.chat-messages-integrated::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

.chat-input-integrated {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

/* Chat Interface (legacy - keeping for modals) */
.chat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 29, 35, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-panel {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 2px solid var(--border-color);
    width: 90%;
    max-width: 800px;
    height: 80%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.chat-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: between;
    align-items: center;
}

.chat-messages {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    max-height: 400px;
}

.chat-input {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Environment Interface (kept for reference, modal removed) */
.environment-interface {
    height: 70vh;
    display: flex;
    flex-direction: column;
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ai-message, .user-message {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
}

.ai-message {
    justify-content: flex-start;
}

.user-message {
    justify-content: flex-end;
}

.message-content {
    background: var(--bg-tertiary);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    max-width: 70%;
    border: 1px solid var(--border-color);
}

.ai-message .message-content {
    background: var(--bg-tertiary);
    border-left: 3px solid var(--primary-color);
}

.user-message .message-content {
    background: var(--primary-color);
    color: white;
}

/* Intent Chips */
.intent-chips {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.intent-chip {
    display: inline-block;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.5rem 1rem;
    margin: 0.25rem;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.9rem;
}

.intent-chip:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

/* Modal Customizations */
.modal-content {
    border-radius: 12px;
    border: 2px solid var(--border-color);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
}

/* Form Controls */
.form-control, .form-select {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.form-control:focus, .form-select:focus {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* Progress Bar */
.progress {
    background: var(--bg-tertiary);
    border-radius: 8px;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.6s ease;
}

/* Save Modal Styles — glassmorphism, matching gc-dialog */
.save-modal-content {
    background: rgba(12, 17, 24, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    overflow: hidden;
}

/* ── Override Bootstrap modal to match gc-dialog exactly ── */
#loadGameModal.fade,
#deleteConfirmModal.fade {
    transition: opacity 0.18s ease;
}

#loadGameModal.fade .modal-dialog,
#deleteConfirmModal.fade .modal-dialog {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
    transform: scale(0.92) translateY(10px);
    opacity: 0;
}

#loadGameModal.show .modal-dialog,
#deleteConfirmModal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Backdrop must fade at the SAME speed as the dialog or it lingers.
   blur & tint go on the BASE element so they stay active during the fade-out.
   Otherwise removing .show kills the blur in one frame while opacity lingers → black flash. */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.52) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    transition: opacity 0.18s ease;
    opacity: 0;
}
.modal-backdrop.show {
    opacity: 1 !important;
}

.save-modal-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 16px 16px 0 0;
    padding: 1.2rem 1.5rem;
}

.save-modal-body {
    background: transparent;
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-primary);
}

.save-modal-body::-webkit-scrollbar {
    width: 8px;
}

.save-modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.save-modal-body::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.save-modal-footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 0 0 16px 16px;
    padding: 1rem 1.5rem;
}

.loading-placeholder {
    padding: 3rem 1rem;
}

/* Enhanced Saved Games List */
.saved-game-item {
    background: rgba(12, 14, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
}

.saved-game-item:hover {
    border-color: rgba(0, 123, 255, 0.35);
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 123, 255, 0.15) inset;
}

.saved-game-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.saved-game-flag {
    flex-shrink: 0;
}

.saved-game-flag-img {
    width: 48px;
    height: 32px;
    object-fit: cover;
    background: #ffffff;
    border-radius: 4px;
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: var(--transition-normal);
}

.saved-game-item:hover .saved-game-flag-img {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.saved-game-info {
    flex: 1;
}

.saved-game-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.saved-game-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.saved-game-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.sg-btn-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.approval-badge {
    padding: 0.35rem 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.8rem;
    border: 1px solid;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.approval-excellent {
    background: rgba(40, 167, 69, 0.2);
    border-color: var(--success-color);
    color: var(--success-color);
}

.approval-good {
    background: rgba(255, 193, 7, 0.2);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.approval-fair {
    background: rgba(23, 162, 184, 0.2);
    border-color: var(--info-color);
    color: var(--info-color);
}

.approval-poor {
    background: rgba(220, 53, 69, 0.2);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.saved-game-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 520px) {
    .saved-game-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .saved-game-info {
        min-width: 0;
    }

    .saved-game-actions {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .approval-badge {
        margin-bottom: 0;
    }
}

.saved-game-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.game-action-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    color: var(--text-secondary);
    transition: var(--transition-fast);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.game-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.game-action-btn.delete-btn:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.delete-game-info {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--danger-color);
    margin-top: 1rem;
}

.last-saved-info {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Game Header Layout - Simple and Clean */
.game-header {
    background: linear-gradient(135deg, rgba(45, 52, 54, 0.98), rgba(26, 29, 35, 0.95));
    border-bottom: 2px solid var(--primary-color);
    padding: 0.75rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(15px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    min-height: 60px;
}

.game-header .container-fluid {
    max-width: none;
}

.game-header-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.game-header-left {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
}

.game-header-center {
    grid-column: 2;
    justify-self: center;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    min-width: 0;
}

/* Left pill group: Strengths + Issues — right-aligned so they sit flush against the calendar */
.gh-pills-left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Right pill group: Promises — left-aligned so it sits flush against the calendar */
.gh-pills-right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.game-header-right {
    grid-column: 3;
    justify-self: end;
    min-width: 0;
}

/* ── Header fluid shrink: 900px → 620px ─────────────────────────── */
@media (max-width: 900px) {
    .game-header {
        padding: 0.5rem 0;
    }

    .game-header-row {
        gap: 0.5rem;
        grid-template-columns: auto 1fr auto;
    }

    .game-header-center {
        min-width: 0;
        overflow: hidden;
    }

    /* Country text block: start compressing at 900px */
    .country-text-block {
        max-width: 110px;
    }

    .country-info h5 {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .country-info small {
        font-size: 0.75rem;
    }

    .country-flag-small img {
        width: 36px;
        height: 24px;
        flex-shrink: 0;
    }

    .ip-pill {
        padding: 0.38rem 0.8rem;
        font-size: 0.82rem;
    }

    .calendar-display {
        min-width: 0;
        max-width: none;
        flex-shrink: 1;
    }

    .settings-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .settings-btn i {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ── Pill label collapse + calendar stack: ≤ 660px ──────────────── */
/* Smooth: labels squeeze to zero-width as viewport narrows below 660px */
@media (max-width: 660px) {
    .ip-pill-label {
        max-width: 0;
        opacity: 0;
    }

    /* Country name + gov-type block collapses — flag stays */
    .country-text-block {
        max-width: 0;
        opacity: 0;
    }

    .ip-pill {
        padding: 0.38rem 0.65rem;
    }

    /* Calendar: switch to stacked layout — date on top row, turn below */
    .calendar-display {
        min-width: 0;
        padding: 0.5rem 0.6rem 0.75rem 0.6rem;
    }

    .cal-body {
        flex-wrap: wrap;
        align-items: center;
        gap: 0 0.35rem;
    }

    /* Hide full month name, show abbreviated */
    .cal-date-full { display: none; }
    .cal-date-short { display: inline; }

    /* Turn label wraps to its own second row */
    .cal-turn {
        flex-basis: 100%;
        font-size: 0.78rem;
    }
}

/* ── Icon-only pills at very narrow (≤ 400px): count badge fully disappears */
@media (max-width: 400px) {
    /* min-width:18px in base would override max-width:0, so hard-hide instead */
    .ip-inline-count {
        display: none !important;
    }

    .ip-pill {
        padding: 0.3rem 0.55rem;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .parliament-content {
        padding: 1rem 0;
    }

    .chat-panel {
        width: 95%;
        height: 90%;
    }

    /* ── Bottom stats bar: always single row, no wrapping ── */
    .stats-quick-row {
        padding: 0.5rem 0;
        min-height: unset;
    }

    /* Outer row: never wrap — enforce single row */
    .stats-quick-row .row {
        flex-wrap: nowrap !important;
        gap: 0;
        align-items: center;
    }

    /* End Turn: pin to right edge so it's always accessible */
    .stats-quick-row .col-auto.order-3 {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Stats section: flex-1, add right padding so content doesn't slide under pinned button */
    .stats-quick-row .col-auto.order-2 {
        flex: 1 1 0;
        min-width: 0;
        padding-right: 50px;
    }

    /* Expand btn: left-anchored, no shrink */
    .stats-quick-row .col-auto.order-1 {
        flex-shrink: 0;
    }

    /* Make the stats-quick-row relatively positioned for absolute End Turn */
    .stats-quick-row {
        position: relative;
    }

    /* Expand btn: compact */
    .stats-expand-btn {
        padding: 6px 8px;
        font-size: 0.8rem;
        min-width: unset;
    }

    /* Stats inner flex: never wrap, let labels absorb the squeeze */
    .stats-quick-row .col-auto .d-flex {
        flex-wrap: nowrap;
        gap: 0;
    }

    /* Collapse all stat labels (including "Details") smoothly */
    .stat-label {
        max-width: 0;
        opacity: 0;
    }

    /* End Turn text also collapses at this width */
    #endTurnBtn .end-turn-label {
        max-width: 0;
        opacity: 0;
    }

    #endTurnBtn {
        padding: 8px 10px;
    }

    .stat-item {
        margin-right: 0.35rem;
        flex-direction: row;
        align-items: center;
        gap: 0.2rem;
        min-width: 0;
        flex-shrink: 1;
    }

    .stat-item .stat-value {
        white-space: nowrap;
        flex-shrink: 1;
        min-width: 0;
    }

    .action-panel .btn {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    .party-legend {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ── Very narrow (≤ 480px) extra compression ───────────────────── */
@media (max-width: 480px) {
    .ip-pill {
        padding: 0.3rem 0.5rem;
    }
}

/* ── Ultra-narrow phone (≤ 400px): tighten everything in header ── */
@media (max-width: 400px) {
    /* Shrink icon-only buttons to 36px to reclaim header space */
    .log-nav-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .settings-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .settings-btn i,
    .log-nav-btn i {
        width: 15px !important;
        height: 15px !important;
    }

    /* Hide calendar icon — saves ~24px in the pill */
    .cal-icon {
        display: none;
    }

    /* Tighter calendar pill */
    .calendar-display {
        padding: 0.35rem 0.45rem 0.65rem !important;
        gap: 0.3rem;
    }

    /* Smaller time badge */
    .turn-time-display {
        font-size: 0.62rem;
        padding: 0.1rem 0.35rem;
    }

    /* Tighter pills */
    .ip-pill {
        padding: 0.28rem 0.45rem;
    }

    /* Right side: tighten gap */
    .game-header-right {
        gap: 0.3rem !important;
    }
}

@media (max-width: 576px) {
    .setup-card {
        padding: 1rem;
    }

    .stats-bar {
        padding: 0.5rem 0;
    }

    .game-content {
        padding: 1rem 0;
    }

    .parliament-chamber {
        padding: 1rem;
    }

    .chamber-visualization {
        min-height: 250px;
    }

    .seats-container {
        padding: 1rem;
        min-height: 200px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Glass form controls for setup page */
.setup-card .form-control,
.setup-card .form-select {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.setup-card .form-control:focus,
.setup-card .form-select:focus {
    background-color: rgba(255, 255, 255, 0.11) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}
.setup-card .form-control::placeholder {
    color: rgba(255,255,255,0.35) !important;
}
.setup-card .form-select option {
    background: #1a1d23;
    color: var(--text-primary);
}

/* Color Palette Selection */
.color-palette {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.11);
    align-items: center;
    height: 46px;
    overflow-x: auto;
}

.color-palette-button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition-normal);
    position: relative;
    box-shadow: var(--shadow);
    flex-shrink: 0;
}

.color-palette-button:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.color-palette-button.selected {
    border-color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), var(--shadow-lg);
}

.color-palette-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(50%);
}

.color-palette-button.color-used-by-npc {
    position: relative;
}

.color-palette-button.color-used-by-npc::after {
    content: '×';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.color-option {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: var(--transition-normal);
    position: relative;
    box-shadow: var(--shadow);
}

.color-option:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.color-option.selected {
    border-color: white;
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), var(--shadow-lg);
}

.color-option.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Stats Expand Button (in bottom bar) */
.stats-expand-btn {
    background: rgba(0, 123, 255, 0.15);
    border: 1px solid rgba(0, 123, 255, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    gap: 6px;
}

.stats-expand-btn:hover {
    background: rgba(0, 123, 255, 0.25);
    border-color: rgba(0, 123, 255, 0.5);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.stats-expand-btn.expanded {
    background: rgba(0, 123, 255, 0.3);
    border-color: var(--primary-color);
}

.stats-expand-btn .chevron-icon {
    width: 14px;
    height: 14px;
    transition: var(--transition-fast);
}

.stats-expand-btn.expanded .chevron-icon {
    transform: rotate(180deg);
}

.stats-bar.expanded {
    height: min(85dvh, 900px);
    max-height: none;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* Quick Stats Row (always visible at top) */
.stats-quick-row {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    background: rgba(45, 52, 54, 0.95);
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 80px;
    display: flex;
    align-items: center;
}

/* Stats inner Bootstrap row: never wrap at any viewport width */
.stats-quick-row .row {
    flex-wrap: nowrap !important;
    align-items: center;
}

.stats-quick-row .col-auto {
    flex: 0 0 auto;
    min-width: 0;
}

/* Detailed Stats Content (hidden by default) */
.stats-detailed-content {
    height: calc(100% - var(--stats-bar-h, 80px));
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(18px);
    transition: opacity 0.24s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.32s;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.stats-bar.expanded .stats-detailed-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0.08s, 0.08s, 0s;
}

/* Enhanced Stat Cards for expanded view */
.stats-detailed-content .stat-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    transition: var(--transition-normal);
    height: 100%;
}

.stats-detailed-content .stat-card h5 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 600;
}

.stats-detailed-content .stat-card .stat-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    display: block;
    margin-top: 0.25rem;
}

.stats-detailed-content .stat-card:hover {
    background: var(--bg-primary);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.stats-detailed-content .stat-card.enhanced {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-primary));
    border: 2px solid var(--border-color);
    min-height: 100px;
}

.stats-detailed-content .stat-card.enhanced:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-lg);
}

.stats-detailed-content .stat-card.enhanced h5 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

/* Stat range coloring — sidebar [data-stat] keeps colored text; top-bar .stat-value uses colored chip background */
[data-stat].sv-good { color: var(--color-sv-good) !important; }
[data-stat].sv-mid  { color: var(--color-sv-mid)  !important; }
[data-stat].sv-bad  { color: var(--color-sv-bad)  !important; }

.stat-value.sv-good { background: var(--color-positive-bg) !important; border: 1px solid var(--color-positive-border) !important; color: var(--color-positive) !important; }
.stat-value.sv-mid  { background: var(--color-mid-bg)      !important; border: 1px solid var(--color-mid-border)      !important; color: var(--color-mid)      !important; }
.stat-value.sv-bad  { background: var(--color-negative-bg)  !important; border: 1px solid var(--color-negative-border)  !important; color: var(--color-negative)  !important; }

.stats-detailed-content .stat-card.enhanced small {
    color: var(--text-secondary);
    font-size: 0.8rem;
    display: block;
    margin-top: 0.25rem;
    line-height: 1.2;
}

.stats-detailed-content .stat-card h5 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.stats-detailed-content .stat-card small {
    color: var(--text-secondary);
    font-size: 0.85rem;
    display: block;
    margin-top: 0.25rem;
}

.stats-detailed-content .stat-trend {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.stats-detailed-content .stat-trend span {
    font-weight: 600;
    font-size: 0.9rem;
}

.stats-detailed-content .stat-trend small {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Category Sections in expanded view */
.stats-detailed-content .stat-category-section h5 {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stats-detailed-content .stat-category-section h5 i {
    width: 20px;
    height: 20px;
}

/* National Statistics drawer. Stat accents deliberately reuse the canonical
   Story-chip palette; section surfaces remain neutral so the colour carries
   the same meaning everywhere in the game. */
.sd-dashboard {
    width: min(1500px, 100%);
    margin: 0 auto;
    padding: 1.1rem clamp(0.8rem, 2vw, 1.8rem) 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sd-drawer-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.15rem 0.15rem 0;
}

.sd-drawer-eyebrow {
    color: #7f91a8;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.sd-drawer-header h2 {
    margin: 0.1rem 0 0;
    color: var(--text-primary);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 800;
}

.sd-drawer-header p {
    max-width: 560px;
    margin: 0 0 0.12rem;
    color: var(--text-secondary);
    font-size: 0.84rem;
    text-align: right;
}

.sd-category-nav {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    gap: 0.35rem;
    padding: 0.45rem;
    overflow-x: auto;
    scrollbar-width: none;
    background: #101925;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.sd-category-nav::-webkit-scrollbar { display: none; }

.sd-category-nav a {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.38rem 0.62rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #aebaca;
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.sd-category-nav a:hover,
.sd-category-nav a:focus-visible {
    color: #fff;
    background: color-mix(in srgb, var(--sd-family-tone, #60a5fa) 12%, transparent);
    border-color: color-mix(in srgb, var(--sd-family-tone, #60a5fa) 32%, transparent);
}

.sd-category-nav a.is-active {
    color: #fff;
    background: color-mix(in srgb, var(--sd-family-tone, #60a5fa) 18%, transparent);
    border-color: color-mix(in srgb, var(--sd-family-tone, #60a5fa) 48%, transparent);
    box-shadow: inset 0 -2px 0 var(--sd-family-tone, #60a5fa);
}

.sd-nav-icon {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    color: var(--sd-family-tone, #60a5fa);
    background: color-mix(in srgb, var(--sd-family-tone, #60a5fa) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--sd-family-tone, #60a5fa) 34%, transparent);
    border-radius: 7px;
}

.sd-section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
}

.sd-section {
    scroll-margin-top: 62px;
    min-width: 0;
    background: rgba(8, 14, 22, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    border-top-color: color-mix(in srgb, var(--sd-family-tone, #94a3b8) 45%, transparent);
    padding: 0.75rem;
}

.sd-section-overview {
    background: rgba(15, 25, 38, 0.84);
    border-color: rgba(96, 165, 250, 0.24);
}

.sd-domain-stack,
.sd-subgroup-stack {
    display: grid;
    gap: 1rem;
}

.sd-domain-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.sd-subgroup {
    min-width: 0;
}

.sd-resource-intro {
    margin: -0.1rem 0 0.7rem;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.sd-resource-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.65rem;
}

.sd-resource-summary span {
    padding: 0.35rem 0.55rem;
    color: #b9c6d6;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(148,163,184,0.14);
    border-radius: 8px;
    font-size: 0.68rem;
}

.sd-resource-summary strong { color: #fff; }

.sd-resource-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
}

.sd-resource-row {
    display: grid;
    grid-template-columns: 9px minmax(130px, 1fr) minmax(118px, auto) auto;
    gap: 0.55rem;
    align-items: center;
    width: 100%;
    padding: 0.58rem 0.65rem;
    color: var(--text-primary);
    text-align: left;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(148,163,184,0.12);
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sd-resource-row:hover,
.sd-resource-row:focus-visible {
    background: rgba(255,255,255,0.055);
    border-color: rgba(110,231,183,0.34);
}

.sd-resource-swatch {
    width: 9px;
    height: 28px;
    background: var(--resource-color, #94a3b8);
    border-radius: 6px;
}

.sd-resource-copy,
.sd-resource-access {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.12rem;
}

.sd-resource-copy strong,
.sd-resource-access strong { font-size: 0.73rem; }
.sd-resource-copy small,
.sd-resource-access small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.61rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-resource-access { text-align: right; }

.sd-resource-balance {
    padding: 0.24rem 0.42rem;
    color: #d6deea;
    background: rgba(148,163,184,0.1);
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    white-space: nowrap;
}

.sd-resource-balance.is-critical-shortfall,
.sd-resource-balance.is-shortfall { color:#fecaca; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); }
.sd-resource-balance.is-strained { color:#fde68a; background:rgba(245,158,11,.11); border-color:rgba(245,158,11,.27); }
.sd-resource-balance.is-surplus,
.sd-resource-balance.is-major-surplus { color:#bbf7d0; background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.25); }

.sd-resource-potentials { margin-top: 0.8rem; }
.sd-potential-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.45rem; }
.sd-potential-card { padding:0.65rem; background:rgba(111,99,190,.08); border:1px solid rgba(167,139,250,.2); border-radius:10px; }
.sd-potential-card strong { color:#ddd6fe; font-size:0.72rem; }
.sd-potential-card p { margin:0.25rem 0 0.45rem; color:#aebaca; font-size:0.65rem; line-height:1.4; }
.sd-potential-card div { display:flex; flex-wrap:wrap; gap:0.3rem; }
.sd-potential-card span { padding:0.18rem 0.38rem; color:#c4b5fd; background:rgba(139,92,246,.1); border-radius:999px; font-size:0.58rem; }

@media (max-width: 800px) {
    .sd-resource-list,
    .sd-potential-grid { grid-template-columns: 1fr; }
    .sd-resource-row { grid-template-columns: 8px minmax(105px,1fr) auto; }
    .sd-resource-access { display: none; }
}

.map-resource-legend-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    background: var(--resource-color, #6ee7b7);
    border: 2px solid rgba(5,12,18,0.8);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(5,12,18,0.65);
}

.map-resource-filter-label {
    display: block;
    margin: 0.4rem 0 0.25rem;
    color: rgba(255,255,255,0.45);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.map-resource-filter {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 36px;
    padding: 0.48rem 2rem 0.48rem 0.68rem;
    color: #eaf2ff;
    background-color: rgba(17, 28, 44, 0.9);
    background-image:
        linear-gradient(145deg, rgba(45, 66, 96, 0.28), rgba(7, 14, 25, 0.12)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='%2393c5fd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: 0 0, right 0.62rem center;
    background-repeat: no-repeat;
    background-size: auto, 15px 15px;
    border: 1px solid rgba(125, 159, 204, 0.3);
    border-radius: 10px;
    box-shadow: inset 0 1px rgba(255,255,255,0.045), 0 4px 12px rgba(0,0,0,0.16);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 620;
    outline: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.map-resource-filter:hover {
    background-color: rgba(23, 38, 59, 0.96);
    border-color: rgba(96, 165, 250, 0.52);
}
.map-resource-filter:focus-visible {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18), inset 0 1px rgba(255,255,255,0.06);
}
.map-resource-filter option {
    color: #eaf2ff;
    background: #111c2c;
}

.map-resource-hero {
    display: flex;
    min-height: 132px;
    margin: -14px -14px 14px;
    padding: 18px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--resource-color) 32%, transparent), transparent 35%),
        linear-gradient(145deg, color-mix(in srgb, var(--resource-color) 17%, #08111b), #07101a 70%);
    border-bottom: 1px solid color-mix(in srgb, var(--resource-color) 35%, transparent);
    text-align: center;
}

.map-resource-hero-symbol {
    display:grid;
    width:48px;
    height:48px;
    margin-bottom:9px;
    place-items:center;
    background:var(--resource-color);
    border:2px solid rgba(255,255,255,.5);
    border-radius:50%;
    box-shadow:0 0 28px color-mix(in srgb,var(--resource-color) 40%,transparent);
}
.map-resource-hero-symbol span { width:15px;height:15px;background:#08111b;border-radius:50%; }
.map-resource-hero small { color:rgba(255,255,255,.38);font-size:.54rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }
.map-resource-hero strong { margin-top:2px;color:#fff;font-size:.78rem; }
.map-resource-metrics { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:12px 0; }
.map-resource-metrics div { display:flex;padding:8px;flex-direction:column;background:rgba(255,255,255,.035);border:1px solid rgba(148,163,184,.12);border-radius:8px; }
.map-resource-metrics span { color:rgba(255,255,255,.4);font-size:.56rem;text-transform:uppercase; }
.map-resource-metrics strong { color:#e8eef7;font-size:.72rem; }
.map-resource-national,.map-resource-links { margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07); }
.map-panel-section-title { margin:0 0 7px;color:rgba(255,255,255,.38);font-size:.58rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase; }
.map-resource-balance-line { display:flex;align-items:center;justify-content:space-between;color:#dce6f2;font-size:.72rem; }
.map-resource-balance-line span { color:#8e9daf;font-size:.64rem; }
.map-resource-source-line { display:flex;gap:5px;margin:7px 0;flex-wrap:wrap; }
.map-resource-source-line span,.map-resource-links button { padding:3px 7px;color:#b9c8d9;background:rgba(255,255,255,.045);border:1px solid rgba(148,163,184,.14);border-radius:999px;font-size:.6rem; }
.map-resource-national p,.map-resource-links article p { margin:6px 0 0;color:#91a0b2;font-size:.65rem;line-height:1.4; }
.map-resource-links button { margin:0 5px 5px 0;cursor:pointer; }
.map-resource-links article { margin:0 0 6px;padding:7px;background:rgba(111,99,190,.08);border-radius:8px; }
.map-resource-links article strong { color:#ddd6fe;font-size:.68rem; }

.strength-resource-inputs { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px; }
.strength-resource-chip { display:flex;gap:5px;align-items:center;padding:4px 7px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.22);border-radius:7px; }
.strength-resource-chip b { color:#bbf7d0;font-size:.64rem; }
.strength-resource-chip small { color:#8da39a;font-size:.56rem; }
.strength-resource-chip.is-strained { background:rgba(245,158,11,.09);border-color:rgba(245,158,11,.26); }
.strength-resource-chip.is-strained b { color:#fde68a; }
.strength-resource-chip.is-short { background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.28); }
.strength-resource-chip.is-short b { color:#fecaca; }

#sd-economy .sd-domain-stack > .sd-subgroup:first-child .sd-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sd-fiscal-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
    gap: 0.85rem;
    align-items: stretch;
}

.sd-fiscal-stats {
    align-content: start;
}

.sd-allocation-panel {
    min-width: 0;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 11px;
}

.sd-subsection-head {
    margin-bottom: 0.65rem;
    color: #aab6c5;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.sd-allocation-content {
    display: grid;
    grid-template-columns: minmax(150px, 0.72fr) minmax(230px, 1.28fr);
    gap: 1rem;
    align-items: center;
}

.sd-spending-chart {
    position: relative;
    width: min(100%, 220px);
    aspect-ratio: 1;
    justify-self: center;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.24);
}

.sd-spending-chart-hole {
    position: absolute;
    inset: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    background: #101923;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    text-align: center;
}

.sd-spending-chart-hole span {
    color: var(--text-muted);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.15;
    text-transform: uppercase;
}

.sd-spending-chart-hole strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-primary);
    font-size: clamp(0.72rem, 1.1vw, 0.95rem);
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-spending-legend {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.sd-spending-legend-row {
    display: grid;
    grid-template-columns: 9px minmax(72px, 1fr) auto 42px;
    gap: 0.45rem;
    align-items: center;
    min-width: 0;
    padding: 0.18rem 0;
    color: #bdc7d4;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.sd-spending-swatch {
    width: 9px;
    height: 9px;
    background: var(--allocation-color, #64748b);
    border-radius: 3px;
}

.sd-spending-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-spending-amount {
    color: var(--text-muted);
}

.sd-spending-legend-row strong {
    color: var(--text-primary);
    text-align: right;
}

.sd-empty-state {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.sd-section-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 36px;
    margin-bottom: 0.65rem;
    color: var(--text-primary);
    font-size: 0.94rem;
    font-weight: 800;
}

.sd-family-icon,
.sd-stat-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.sd-family-icon {
    color: var(--sd-family-tone, #cbd5e1);
    background: color-mix(in srgb, var(--sd-family-tone, #cbd5e1) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--sd-family-tone, #cbd5e1) 34%, transparent);
}

.sd-stat-icon {
    color: var(--sd-tone, #cbd5e1);
    background: color-mix(in srgb, var(--sd-tone, #cbd5e1) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--sd-tone, #cbd5e1) 30%, transparent);
}

.sd-family-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.sd-stat-icon {
    grid-area: icon;
    align-self: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

[data-stat-tone="green"]  { --sd-tone: #4ade80; }
[data-stat-tone="blue"]   { --sd-tone: #60a5fa; }
[data-stat-tone="amber"]  { --sd-tone: #fbbf24; }
[data-stat-tone="cyan"]   { --sd-tone: #22d3ee; }
[data-stat-tone="orange"] { --sd-tone: #fb923c; }
[data-stat-tone="violet"] { --sd-tone: #a78bfa; }
[data-stat-tone="red"]    { --sd-tone: #f87171; }
[data-stat-tone="neutral"]{ --sd-tone: #cbd5e1; }

[data-family-tone="cobalt"]  { --sd-family-tone: #60a5fa; }
[data-family-tone="violet"]  { --sd-family-tone: #a78bfa; }
[data-family-tone="emerald"] { --sd-family-tone: #34d399; }
[data-family-tone="cyan"]    { --sd-family-tone: #22d3ee; }
[data-family-tone="rose"]    { --sd-family-tone: #fb7185; }
[data-family-tone="orange"]  { --sd-family-tone: #fb923c; }
[data-family-tone="red"]     { --sd-family-tone: #f87171; }
[data-family-tone="gold"]    { --sd-family-tone: #fbbf24; }

.sd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.sd-grid-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sd-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas:
        "icon label badge"
        "icon value trend";
    align-items: center;
    gap: 0.12rem 0.6rem;
    min-width: 0;
    min-height: 72px;
    padding: 0.58rem 0.65rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 10px;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.sd-row:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: color-mix(in srgb, var(--sd-tone, #cbd5e1) 28%, transparent);
    transform: translateY(-1px);
}

.sd-label {
    grid-area: label;
    min-width: 0;
    overflow: hidden;
    color: #aab6c5;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.sd-val {
    grid-area: value;
    min-width: 0;
    color: var(--text-primary) !important;
    font-size: 1.02rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    text-align: left;
}

.sd-trend-el {
    grid-area: trend;
    min-width: 14px;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    text-align: right;
}

.sd-badge-el {
    grid-area: badge;
    justify-self: end;
    min-width: 0;
    max-width: 130px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge colour classes */
.sd-b-crit { background: rgba(239, 68,  68,  0.2); color: #f87171; }
.sd-b-low  { background: rgba(251, 191, 36,  0.15); color: #fbbf24; }
.sd-b-stab { background: rgba(96,  165, 250, 0.15); color: #93c5fd; }
.sd-b-good { background: rgba(74,  222, 128, 0.15); color: #4ade80; }
.sd-b-neutral { background: rgba(96, 165, 250, 0.12); color: #a8c7f0; }

/* Trend arrow colour classes */
.sd-up-good { color: #4ade80; }
.sd-up-bad  { color: #f87171; }
.sd-flat    { color: var(--text-muted); }

@media (max-width: 1100px) {
    #sd-economy .sd-domain-stack > .sd-subgroup:first-child .sd-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sd-domain-columns {
        grid-template-columns: 1fr;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .stats-bar.expanded {
        height: min(90dvh, 900px);
        max-height: none;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .stats-detailed-content {
        height: calc(100% - var(--stats-bar-h, 80px));
        max-height: none;
    }

    .sd-section-grid {
        grid-template-columns: 1fr;
    }

    .sd-fiscal-main {
        grid-template-columns: 1fr;
    }

    .sd-allocation-content {
        grid-template-columns: minmax(130px, 0.72fr) minmax(190px, 1.28fr);
    }

    .sd-grid-overview,
    .sd-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sd-dashboard {
        padding: 0.75rem 0.6rem 1.5rem;
        gap: 0.7rem;
    }

    .sd-drawer-header {
        display: block;
        padding: 0 0.15rem;
    }

    .sd-drawer-header p {
        margin-top: 0.15rem;
        text-align: left;
    }

    .sd-category-nav {
        margin-inline: -0.1rem;
    }

    .sd-category-nav a {
        flex: 0 0 auto;
    }

    .sd-section {
        padding: 0.62rem;
    }

    .sd-row {
        min-height: 70px;
        padding: 0.52rem;
    }
}

@media (max-width: 480px) {
    .sd-grid-overview,
    .sd-grid { grid-template-columns: 1fr; }

    #sd-economy .sd-domain-stack > .sd-subgroup:first-child .sd-grid {
        grid-template-columns: 1fr;
    }

    .sd-row {
        min-height: 68px;
    }

    .sd-allocation-content {
        grid-template-columns: 1fr;
    }

    .sd-spending-chart {
        width: min(68vw, 220px);
    }

    .sd-spending-legend-row {
        grid-template-columns: 9px minmax(72px, 1fr) auto 42px;
    }

}

/* ===============================
   MAP VIEW COMPONENTS
   =============================== */

/* View Toggle */
.view-toggle {
    position: relative;
    width: 100%;
    margin-top: -3px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.view-toggle::before {
    content: none;
}

.view-toggle .btn-group {
    display: flex;
    width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    transform: none;
    filter:
        drop-shadow(0 1px 0 rgba(64, 143, 235, 0.48))
        drop-shadow(0 7px 12px rgba(0, 0, 0, 0.32));
}

.view-toggle .btn-group .btn {
    flex: 1 1 0;
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(8, 13, 22, 0.97);
    color: var(--text-secondary);
    min-height: 40px;
    padding: 0.42rem 0.65rem;
    font-size: 0.84rem;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
    transition: background 160ms ease, color 160ms ease, filter 160ms ease, transform 160ms ease;
}

.view-toggle .btn-group .btn:first-child {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H100V50H20Q14 50 12 43Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H100V50H20Q14 50 12 43Z'/%3E%3C/svg%3E");
}

.view-toggle .btn-group .btn:last-child {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H100L88 43Q86 50 80 50H0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H100L88 43Q86 50 80 50H0Z'/%3E%3C/svg%3E");
}

.view-toggle .btn-group .btn:first-child,
.view-toggle .btn-group .btn:last-child {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.view-toggle .btn-group > .btn + .btn {
    margin-left: 0 !important;
    box-shadow: inset 2px 0 rgba(64, 143, 235, 0.52);
}

.view-toggle .btn-group .btn.active {
    background: var(--primary-color) !important;
    color: white;
}

.view-toggle .btn-group .btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.16);
}

.view-toggle .btn-group .btn:hover:not(.active) {
    background: rgb(15, 35, 59);
    color: var(--text-primary);
}

.view-toggle .btn-group .btn:active {
    transform: none;
}

/* Map Container */
.map-container {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    padding: 1rem 1.25rem;
    border: 1px solid var(--card-border);
    margin-bottom: 1rem;
}

.map-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.map-controls .btn {
    margin-left: 0.5rem;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.map-controls .btn:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
}

/* Map Canvas Container */
.map-canvas-container {
    position: relative;
    width: 100%;
    height: 600px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border-color);
}

#mapCanvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

#mapCanvas:active {
    cursor: grabbing;
}

/* Map Loading State */
.map-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(45, 52, 54, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.map-loading.hidden {
    display: none;
}

/* Spinning animation for loader */
.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Map Info Panel / Tooltip */
.map-info-panel {
    position: absolute;
    top: 1rem;
    right: 1rem;
    max-width: 300px;
    z-index: 100;
    pointer-events: none;
}

.map-tooltip {
    background: rgba(45, 52, 54, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}

.map-tooltip h6 {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.map-tooltip p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.map-tooltip strong {
    color: var(--text-primary);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .view-toggle .btn {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    .view-toggle .btn i {
        width: 16px;
        height: 16px;
    }

    .map-container {
        padding: 1rem;
    }

    .map-canvas-container {
        height: 400px;
    }

    .map-controls .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }

    .map-info-panel {
        position: fixed;
        bottom: 100px;
        left: 1rem;
        right: 1rem;
        top: auto;
        max-width: none;
    }

    .map-tooltip {
        padding: 0.75rem;
    }
}

@media (max-width: 576px) {
    .view-toggle {
        margin-top: 1rem;
    }

    .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .map-canvas-container {
        height: 350px;
    }
}

/* Unified Story Component Styles */
.unified-story-component {
    background: rgba(12,14,20,0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,0.11);
}

.story-interface {
    background: rgba(12,14,20,0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,0.11);
}

/* Story input disabled at capacity */
.story-input-container textarea:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* End Turn button glow when capacity reached */
#endTurnBtn.turn-capacity-glow {
    animation: endTurnPulse 1.8s ease-in-out infinite;
}

@keyframes endTurnPulse {
    0%   { box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(253, 126, 20, 0); }
    100% { box-shadow: 0 0 0 0 rgba(253, 126, 20, 0); }
}

/* ── Calendar Time Bar ────────────────────────────────────────────── */
.calendar-display {
    position: relative;
    padding-bottom: 0.85rem; /* room for the 3px bar */
    appearance: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.calendar-history-wrap {
    position: relative;
}

.calendar-display:focus-visible {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.24), var(--shadow);
    outline: none;
}

.calendar-time-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border-radius: 0 0 10px 10px;
}

.calendar-time-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--primary-color);
    border-radius: 0 0 10px 10px;
    transition: width 0.4s ease;
}

.calendar-time-bar--full .calendar-time-bar-fill {
    background: var(--primary-color);
}
/* ── End Calendar Time Bar ──────────────────────────────────────── */

.story-header h4 {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.story-messages {
    background: rgba(8,10,16,0.97);
    border-radius: 12px;
    padding: 1.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.story-messages::-webkit-scrollbar {
    width: 8px;
}

.story-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.story-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.story-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.story-message {
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    line-height: 1.8;
    white-space: pre-line; /* Preserve line breaks and paragraphs */
}

.story-message strong {
    font-weight: 700;
    color: #ffffff;
}

.story-message em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}

.story-message:last-child {
    margin-bottom: 0;
}

.story-message.story-event {
    background: rgba(0, 123, 255, 0.08);
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.15);
    color: white;
    font-weight: 500;
    margin-bottom: 1.5rem;
    white-space: pre-wrap;
}

.story-message.story-narrative {
    color: white;
}

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

.story-message.story-player-action {
    font-style: normal;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.5rem;
    background: rgba(15, 18, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid rgba(99, 179, 237, 0.7);
    border-radius: 10px;
    padding: 0.75rem 1rem 0.75rem 1.2rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(99,179,237,0.06);
    animation: playerActionIn 0.2s ease-out both;
}

/* Event-decision response messages — same bubble, amber context strip on top */
.story-response-context {
    font-size: 0.72rem;
    font-style: italic;
    color: #f59e0b;
    border-left: 2px solid #f59e0b;
    padding-left: 0.5rem;
    margin-bottom: 0.55rem;
    line-height: 1.4;
}
.story-response-context strong {
    font-weight: 700;
    font-style: normal;
}

.story-message.story-transition {
    text-align: center;
    font-weight: 600;
    color: white;
}

.story-input-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.story-input-container textarea {
    flex: 1;
    resize: none;
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 0.65rem 1rem;
    overflow-y: auto;
    max-height: 6.5rem;
    min-height: 2.75rem;
    background: rgba(10, 13, 22, 0.92) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, height 0.12s ease;
    box-shadow: none !important;
    outline: none;
}

.story-input-container textarea::placeholder {
    color: rgba(255, 255, 255, 0.28);
    font-style: normal;
}

.story-input-container textarea:focus {
    background: rgba(10, 13, 22, 0.97) !important;
    border-color: rgba(99, 179, 237, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15) !important;
}

.story-input-container textarea:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Send button */
.story-send-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 14px rgba(59, 130, 246, 0.45);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.story-send-btn:hover:not(:disabled) {
    transform: scale(1.07);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.6);
}

.story-send-btn:active:not(:disabled) {
    transform: scale(0.93);
    box-shadow: 0 1px 8px rgba(59, 130, 246, 0.3);
}

.story-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.story-actions .action-btn {
    min-width: 120px;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 12px;
    transition: var(--transition-fast);
}

.environment-tag {
    transition: var(--transition-fast);
}

.environment-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.story-stat-change {
    background: rgba(0, 168, 255, 0.1);
    border-left: 3px solid #00a8ff;
    padding: 0.75rem;
    margin: 0.5rem 0;
    font-style: italic;
    color: #a0a0a0;
}

.legislative-btn {
    display: block;
    width: 100%;
    padding: 1.25rem 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 12px;
    transition: var(--transition-fast);
}

.legislative-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.parliament-actions {
    width: 100%;
}

.parliament-actions .action-btn {
    min-width: 100px;
    margin-right: 0.5rem;
}

/* Unified Story Action Buttons */
.story-actions .action-btn {
    transition: var(--transition-fast);
}

.story-actions .action-btn.active {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

.story-actions .action-btn[data-action="do"].active {
    background: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    color: #000 !important;
}

.story-actions .action-btn[data-action="do"]:not(.active) {
    background: transparent;
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.story-actions .action-btn:not(.active) {
    background: transparent;
}

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

.spin {
    animation: spin 2s linear infinite;
}

/* Print Styles */
@media print {
    .loading-overlay,
    .stats-bar,
    .stats-drawer,
    .stats-drawer-overlay,
    .chat-overlay,
    .floating-icon,
    .map-container,
    .story-interface {
        display: none !important;
    }
}
/* Skeleton placeholder pills shown before payload arrives */
.skeleton-pill {
    opacity: 0.4;
    color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    pointer-events: none;
    animation: skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.2; }
}

.created-objects {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.created-objects-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.55);
}

.created-object-chip {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    color: #ffe7b8;
    background: rgba(255, 184, 77, 0.12);
    border: 1px solid rgba(255, 184, 77, 0.38);
}

.effect-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

/* .effect-chip — retired; chips now use .narrative-chip from game-utils.js::buildStatDeltaChip */

/* ── Issue progress section (DM messages) ─────────────────────────────── */
.issue-progress-section {
    margin-top: 0.55rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}
/* Inside the outcome card the section already has its own label + spacing */
.outcome-card .issue-progress-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.issue-progress-label {
    font-size: 0.66rem;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}
.issue-progress-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.issue-progress-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.67rem;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.28);
    border-radius: 5px;
    padding: 0.15rem 0.55rem;
    color: rgba(134,239,172,0.85);
    cursor: default;
}
.issue-progress-chip .ip-prog-delta {
    font-weight: 700;
    color: #4ade80;
    font-size: 0.7rem;
}
.issue-worsening-label {
    color: rgba(255, 120, 100, 0.55);
    margin-top: 0.35rem;
}
.issue-worsening-chip {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: rgba(252, 165, 165, 0.85);
}
.ip-worsen-delta {
    font-weight: 700;
    color: #f87171;
    font-size: 0.7rem;
}
.ip-status-tag {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    margin-left: 0.3rem;
    text-transform: uppercase;
}
.ip-status-bad {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}
.ip-status-good {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}
.ip-status-neutral {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
}
.issue-status-neutral-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
}

/* Suggested next moves */
.suggested-moves {
    margin-top: 0.5rem;
}

.suggested-moves-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.suggested-moves-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.suggested-move-btn {
    text-align: left;
    font-size: 0.85rem;
    color: #e6f3ff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.35);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.suggested-move-btn:hover {
    background: rgba(0, 168, 255, 0.15);
    border-color: rgba(0, 168, 255, 0.7);
}

/* ===== World Memory panel ===== */
.dossier-panel {
    background: rgba(12,14,20,0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 12px;
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dossier-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

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

.dossier-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.dossier-item {
    background: rgba(12, 14, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
}

.dossier-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.dossier-category {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0, 168, 255, 0.9);
}

.dossier-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    color: #ddd;
    background: rgba(255, 255, 255, 0.1);
}

.dossier-status-active { color: #7CFFB0; background: rgba(0, 168, 107, 0.18); }
.dossier-status-proposed { color: #cfe8ff; background: rgba(0, 168, 255, 0.18); }
.dossier-status-completed { color: #b6ffcd; background: rgba(0, 168, 107, 0.25); }
.dossier-status-resolved { color: #b6ffcd; background: rgba(0, 168, 107, 0.25); }
.dossier-status-failed { color: #ff9d8a; background: rgba(255, 74, 74, 0.18); }
.dossier-status-escalating { color: #ffd27c; background: rgba(243, 156, 18, 0.2); }
.dossier-status-dormant { color: #c9c9c9; background: rgba(255, 255, 255, 0.08); }

.dossier-title {
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.dossier-description {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin-bottom: 0.4rem;
}

.dossier-targeting-hint {
    font-size: 0.8rem;
    color: rgba(139, 214, 255, 0.88);
    line-height: 1.4;
}
.dossier-latest-dev {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.25rem;
    line-height: 1.4;
}
.dossier-issue-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.2rem;
}
.dossier-issue-chip {
    font-size: 0.72rem;
    border-radius: 8px;
    padding: 0.15rem 0.5rem;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
}
.dossier-issue-chip em {
    font-style: normal;
    opacity: 0.75;
    margin-left: 0.15rem;
    font-size: 0.68rem;
}
.dossier-issue-chip.lev-critical { background: rgba(220,50,50,0.18); color: #f87171; }
.dossier-issue-chip.lev-high     { background: rgba(220,130,50,0.18); color: #fb923c; }
.dossier-issue-chip.lev-med      { background: rgba(200,180,50,0.18); color: #fbbf24; }
.dossier-issue-chip.lev-low      { background: rgba(100,180,100,0.18); color: #86efac; }

.dossier-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ===== DM response structured sections (Political Reaction / Lasting Consequences) ===== */
.response-sections {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.response-section {
    border-left: 3px solid rgba(0, 168, 255, 0.4);
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 8px 8px 0;
}

.response-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0, 168, 255, 0.85);
    margin-bottom: 0.2rem;
}

.response-section-body {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.55;
}

/* ===== Phase 1.5: Turn datachip, title block & dynamic response cards ===== */
/* Time display in the turn/date header bar — pill badge */
.turn-time-display {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.15rem 0.55rem;
    vertical-align: middle;
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.turn-time-display--full {
    color: rgba(253, 126, 20, 0.9);
    background: rgba(253, 126, 20, 0.12);
    border-color: rgba(253, 126, 20, 0.3);
}

/* Time chip on each completed DM narrative message — same box height as .turn-datachip,
   but visually distinct: dark background + subtle border (calendar time-chip look). */
.msg-time-chip {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin-left: 0.4rem;
    margin-bottom: 0.65rem;
    padding: 0.2rem 0.65rem !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.turn-datachip {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    margin-bottom: 0.65rem;
    padding: 0.2rem 0.65rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.response-title-block {
    margin-bottom: 0.7rem;
}

/* Story-DM illustrations share one stable cinematic frame. The server sends
   the visual before prose, so the fixed ratio doubles as the loading skeleton
   without allowing the streamed text to jump when the local asset resolves. */
.story-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1;
    max-height: 360px;
    min-height: 150px;
    margin: 0;
    overflow: hidden;
    background: #111827;
    isolation: isolate;
}

.story-visual--establishing {
    margin: -15px -15px 0.9rem;
    width: calc(100% + 30px);
    border-radius: 14px 14px 5px 5px;
}

.story-visual--editorial {
    margin: 0.85rem 0 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* On wider screens the Story column is broad enough that an aspect ratio alone
   makes illustrations dominate the viewport. Give each treatment a restrained
   cinematic height while leaving the roomier mobile presentation untouched. */
@media (min-width: 701px) {
    .story-visual {
        aspect-ratio: auto;
        min-height: 0;
        max-height: none;
    }

    .story-visual--establishing {
        height: clamp(175px, 24vh, 240px);
    }

    .story-visual--editorial {
        height: clamp(150px, 20vh, 210px);
    }
}

.story-visual-image,
.story-visual-skeleton {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.story-visual-image {
    display: block;
    object-fit: cover;
    opacity: 1;
    transform: scale(1);
    transition: opacity 320ms ease, transform 700ms cubic-bezier(.2,.75,.25,1);
}

.story-visual--loading .story-visual-image {
    opacity: 0;
    transform: scale(1.015);
}

.story-visual-skeleton {
    opacity: 0;
    background:
        linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.09) 46%, transparent 62%),
        #172131;
    background-size: 220% 100%, 100% 100%;
    transition: opacity 220ms ease;
}

.story-visual--loading .story-visual-skeleton {
    opacity: 1;
    animation: storyVisualShimmer 1.25s linear infinite;
}

@keyframes storyVisualShimmer {
    from { background-position: 140% 0, 0 0; }
    to { background-position: -80% 0, 0 0; }
}

@media (max-width: 700px) {
    .story-visual {
        aspect-ratio: 16 / 7;
        min-height: 128px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-visual-image { transition: opacity 120ms linear; }
    .story-visual--loading .story-visual-skeleton { animation: none; }
}

.response-title {
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.response-subtitle {
    margin-top: 0.25rem;
    font-size: 0.98rem;
    font-style: italic;
    line-height: 1.45;
    color: rgba(0, 168, 255, 0.9);
}


/* Narrative rich-text formatting */
.narrative-subheading {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 1.1rem 0 0.1rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
}
.narrative-subheading + p {
    margin-top: 0.25rem;
}

.narrative-bill {
    color: #38bdf8;
    font-weight: 600;
    border-bottom: 1px dotted rgba(56, 189, 248, 0.5);
}

.narrative-person {
    color: #4ade80;
    font-weight: 600;
    border-bottom: 1px dotted rgba(74, 222, 128, 0.5);
}

.narrative-highlight {
    background-color: rgba(245, 196, 80, 0.28);
    font-style: normal;
    font-weight: 500;
    padding: 0 3px;
    border-radius: 3px;
}

/* Inline data chip — {{value}} */
.narrative-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e8eaf0;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.5;
}

.narrative-chip .nc-icon {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Stat label inside a delta chip (e.g. "Stability" before "−3") */
.narrative-chip .nc-label {
    font-weight: 500;
    opacity: 0.72;
    letter-spacing: 0;
    font-size: 0.9em;
}

/* Chip color variants — keyed to stat dashboard categories */
.narrative-chip.chip-green  { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.28); color: #86efac; }
.narrative-chip.chip-blue   { background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.28); color: #93c5fd; }
.narrative-chip.chip-amber  { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.28); color: #fcd34d; }
.narrative-chip.chip-red    { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.28); color: #fca5a5; }
.narrative-chip.chip-cyan   { background: rgba(34,211,238,0.12); border-color: rgba(34,211,238,0.28); color: #67e8f9; }
.narrative-chip.chip-orange { background: rgba(251,146,60,0.12); border-color: rgba(251,146,60,0.28); color: #fdba74; }

/* Duration suffix inside a narrative-chip (e.g. "· 3 turns") */
.chip-duration {
    font-size: 0.72em;
    font-weight: 400;
    opacity: 0.58;
    margin-left: 0.12rem;
    letter-spacing: 0;
}

/* Compact summary line on dossier card tiles */
.dossier-card-summary {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.45;
    margin-top: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Connected items row (event cards) ─────────────────────────────────── */
.ev-conn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ev-conn-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.64rem;
    font-weight: 500;
    border-radius: 20px;
    padding: 0.1rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.ev-conn-chip:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.85);
}

.ev-conn-new {
    border-color: rgba(74, 222, 128, 0.28);
    background: rgba(74, 222, 128, 0.07);
    color: rgba(134, 239, 172, 0.88);
}

.ev-conn-new:hover {
    border-color: rgba(74, 222, 128, 0.48);
    background: rgba(74, 222, 128, 0.12);
    color: #86efac;
}

.ev-conn-new-actor {
    border-color: rgba(99, 102, 241, 0.28);
    background: rgba(99, 102, 241, 0.07);
    color: rgba(165, 180, 252, 0.88);
}

.ev-conn-new-actor:hover {
    border-color: rgba(99, 102, 241, 0.48);
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
}

/* Entity reference markers — [ISSUE:], [PROMISE:], [WM:], [EVENT:], [REGION:] */
.narrative-issue {
    color: #ff7b7b;
    font-weight: 600;
    border-bottom: 1px dotted rgba(255, 123, 123, 0.5);
}

.narrative-promise {
    color: #f5b942;
    font-weight: 600;
    border-bottom: 1px dotted rgba(245, 185, 66, 0.5);
}

.narrative-wm {
    color: #38bdf8;
    font-weight: 600;
    border-bottom: 1px dotted rgba(56, 189, 248, 0.4);
}
.narrative-organization {
    color: #7dd3fc;
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: rgba(56, 189, 248, 0.34);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.narrative-organization.narrative-clickable:hover {
    color: #bae6fd;
    text-decoration-color: currentColor;
}

.narrative-clickable {
    cursor: pointer;
    transition: opacity 0.15s, border-bottom-color 0.15s;
}

.narrative-clickable:hover {
    opacity: 0.82;
}

.narrative-issue.narrative-clickable:hover {
    border-bottom-color: rgba(255, 123, 123, 0.9);
}

.narrative-promise.narrative-clickable:hover {
    border-bottom-color: rgba(245, 185, 66, 0.9);
}

.narrative-wm.narrative-clickable:hover {
    border-bottom-color: rgba(56, 189, 248, 0.85);
}

.narrative-bill.narrative-clickable:hover {
    border-bottom-color: rgba(56, 189, 248, 0.85);
}

.narrative-person.narrative-clickable:hover {
    border-bottom-color: rgba(74, 222, 128, 0.9);
}

.narrative-strength {
    color: #c084fc;
    font-weight: 600;
    border-bottom: 1px dotted rgba(192, 132, 252, 0.5);
}

.narrative-strength.narrative-clickable:hover {
    border-bottom-color: rgba(192, 132, 252, 0.9);
}

.narrative-lore {
    color: #e8b86d;
    font-weight: 600;
    border-bottom: 1px dotted rgba(232, 184, 109, 0.45);
}

.narrative-lore.narrative-clickable:hover {
    border-bottom-color: rgba(232, 184, 109, 0.9);
}

.narrative-nation {
    color: #22d3ee;
    font-weight: 600;
    border-bottom: 1px dotted rgba(34, 211, 238, 0.5);
}

.narrative-nation.narrative-clickable:hover {
    background: rgba(34, 211, 238, 0.12);
    border-bottom-color: #22d3ee;
    border-radius: 3px;
}

.narrative-event {
    color: #fbbf24;
    font-weight: 600;
}

.narrative-region {
    color: #e8b86d;
    font-weight: 600;
}

/* Blockquote — >>"text" — attribution<< */
blockquote.narrative-quote {
    margin: 0.9rem 0;
    padding: 0.7rem 1.1rem 0.65rem 1.2rem;
    border-left: 3px solid #c8a04a;
    background: rgba(200, 160, 74, 0.07);
    border-radius: 0 6px 6px 0;
}

.nq-text {
    display: block;
    font-style: italic;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.55;
    margin-bottom: 0.35rem;
}

.nq-attr {
    display: block;
    font-size: 0.78rem;
    color: #c8a04a;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

/* Inline quote within a paragraph — >>...<<  mid-sentence */
.narrative-inline-q {
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}
.nq-inline-attr {
    font-size: 0.82em;
    color: #c8a04a;
    font-style: normal;
}

/* ── Log nav button ──────────────────────────────────────────────── */
.log-nav-btn {
    position: relative;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.88);
    flex-shrink: 0 !important;
    min-width: 48px !important;
    min-height: 48px !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.log-nav-btn:hover,
.log-nav-btn:focus-visible {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #fff;
    outline: none;
}

/* ── Log dropdown panel ──────────────────────────────────────────── */
.log-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 370px;
    max-height: 70vh;
    background: #1b2030;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.6);
    z-index: 900;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.calendar-history-wrap .log-dropdown {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(370px, calc(100vw - 1rem));
}

.calendar-history-wrap .calendar-planner {
    width: min(700px, calc(100vw - 1rem));
    height: min(410px, calc(100vh - 150px));
    min-height: 330px;
    max-height: 450px;
    background:
        radial-gradient(circle at 72% -15%, rgba(65, 143, 204, .08), transparent 42%),
        rgba(11, 20, 32, .985);
    border: 1px solid rgba(121, 164, 202, .16);
    border-radius: 13px;
    box-shadow: 0 18px 54px rgba(0, 0, 0, .5), 0 1px 0 rgba(255,255,255,.025) inset;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -9px) scale(.975);
    transform-origin: 50% 0;
    transition: opacity 170ms ease, transform 210ms cubic-bezier(.22,.8,.28,1), box-shadow 210ms ease;
}

.calendar-history-wrap .calendar-planner.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

.calendar-history-wrap .calendar-planner.is-closing {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -6px) scale(.985);
}

.calendar-planner-close {
    position:absolute;
    top:9px;
    right:10px;
    z-index:3;
    width:26px;
    height:26px;
}

.calendar-rail-controls {
    display:flex;
    min-height:38px;
    margin:0 5px 7px 3px;
    align-items:center;
    justify-content:space-between;
    gap:3px;
    flex:0 0 auto;
}

.calendar-year-nav {
    display: flex;
    align-items: center;
    min-width:0;
    gap: 3px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.calendar-year-arrow,
.calendar-year-label,
.calendar-current-year {
    color: rgba(225,235,245,.78);
    background: transparent;
    border: 0;
    border-radius: 7px;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.calendar-year-arrow {
    width: 24px;
    height: 28px;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.calendar-year-label {
    display: inline-flex;
    min-width: 48px;
    height: 28px;
    align-items: center;
    justify-content: center;
    font-size:.72rem;
    font-weight: 800;
}

.calendar-current-year {
    margin-left:0;
    padding:.3rem .4rem;
    font-size:.5rem;
    font-weight: 700;
    border: 0;
}

.calendar-year-arrow:hover,
.calendar-current-year:hover {
    color: #fff;
    background: rgba(91,156,211,.12);
    border-color: rgba(112,175,228,.28);
}

.calendar-planner .log-dropdown-body {
    padding: 0;
}

.calendar-planner-body {
    display: grid;
    min-height: 0;
    flex: 1;
    grid-template-columns: 230px minmax(0, 1fr);
    overflow: hidden;
}

.calendar-month-rail {
    position: relative;
    min-height: 0;
    display:flex;
    padding:8px 13px 12px 11px;
    flex-direction:column;
    background: transparent;
    border: 0;
    overflow: hidden;
}

.calendar-month-rail::after {
    position: absolute;
    top: 10px;
    right: 0;
    bottom: 10px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(57,140,220,.55) 16%, rgba(57,140,220,.24) 78%, transparent);
    box-shadow: 1px 0 8px rgba(47,130,211,.08);
    content: '';
}

.calendar-month-grid {
    display: flex;
    min-height:0;
    height:auto;
    padding-right: 3px;
    flex-direction: column;
    gap: 1px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(131,164,196,.26) transparent;
    scrollbar-width: thin;
    flex:1;
}

.calendar-month-card {
    position: relative;
    display: grid;
    min-height: 59px;
    padding: 9px 10px;
    color: #d8e3ee;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 7px;
    grid-template-columns:26px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}

.calendar-month-card:hover,
.calendar-month-card:focus-visible {
    background: linear-gradient(90deg, rgba(69,143,202,.1), transparent);
    outline: none;
    transform: translateX(2px);
}

.calendar-month-card.is-current {
    color: #f2f8fd;
}

.calendar-month-card.is-selected {
    color: #fff;
    background: linear-gradient(90deg, rgba(54,132,196,.16), rgba(54,132,196,.035) 72%, transparent);
    box-shadow: none;
}

.calendar-month-card.is-selected::before {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 1px;
    background: #62b6f2;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(98,182,242,.5);
    content: '';
}

.calendar-month-index {
    color: rgba(154,177,199,.38);
    font-size: .55rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: .04em;
}

.calendar-month-card.is-current .calendar-month-index { color:#72c4fc; }
.calendar-month-card.has-review .calendar-month-card-copy strong::after { margin-left:5px; color:rgba(111,190,242,.68); font-size:.58rem; content:'↗'; }

.calendar-month-card-copy { min-width:0; }
.calendar-month-card-copy strong { display:block; color:inherit; font-size:.74rem; line-height:1.2; }
.calendar-month-card-copy small {
    display:block;
    margin-top:3px;
    overflow:hidden;
    color:rgba(181,199,215,.42);
    font-size:.51rem;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.calendar-month-card.is-selected .calendar-month-card-copy small { color:rgba(208,226,240,.58); }

.calendar-counts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    font-size: .52rem;
    font-weight: 800;
}

.calendar-counts span:not(.is-empty) { display:grid; width:17px; height:17px; place-items:center; border-radius:999px; }
.calendar-counts .is-major { color:#ffb0b8; background:rgba(235,83,99,.13); }
.calendar-counts .is-moderate { color:#f8d98b; background:rgba(230,175,60,.12); }
.calendar-counts .is-minor { color:#a9bfd2; background:rgba(143,170,194,.1); }
.calendar-counts .is-empty { color:rgba(164,186,205,.22); font-size:.65rem; }

.calendar-month-detail {
    min-width:0;
    min-height:0;
    padding:20px 36px 24px 28px;
    overflow-y:auto;
    scrollbar-color:rgba(131,164,196,.26) transparent;
    scrollbar-width:thin;
}
.calendar-month-detail.is-switching { animation:calendar-detail-in .2s ease both; }

.calendar-detail-header {
    display: flex;
    position: relative;
    margin-bottom: 18px;
    align-items: end;
    justify-content: space-between;
    gap:20px;
    padding-bottom: 15px;
    border: 0;
}

.calendar-detail-header::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(66,143,207,.38), rgba(66,143,207,.1) 64%, transparent);
    content: '';
}

.calendar-detail-kicker {
    display:block;
    color:#71b9e9;
    font-size:.52rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.calendar-month-detail h3 { margin:4px 0 0; color:#f7fbff; font-size:1.22rem; letter-spacing:-.025em; }
.calendar-detail-counts { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; color:rgba(196,211,225,.48); font-size:.56rem; }
.calendar-detail-counts span { display:flex; align-items:center; gap:4px; }
.calendar-detail-counts b { color:#dbe8f3; font-size:.69rem; }
.calendar-detail-counts .is-major b { color:#ff9ca7; }
.calendar-detail-counts .is-moderate b { color:#f4cf72; }
.calendar-detail-counts .is-cancelled { opacity:.55; }
.calendar-detail-quiet { color:rgba(183,202,219,.32); font-size:.59rem; }
.calendar-detail-actions { display:flex; align-items:flex-end; justify-content:flex-end; flex-direction:column; gap:7px; }
.calendar-open-review {
    padding:0;
    color:rgba(123,191,239,.72);
    background:transparent;
    border:0;
    font-size:.55rem;
    font-weight:700;
    letter-spacing:.02em;
    transition:color .16s ease, transform .16s ease;
}
.calendar-open-review:hover,.calendar-open-review:focus-visible { color:#a7d9fa; outline:0; transform:translateX(2px); }
.calendar-event-list { display:flex; position:relative; flex-direction:column; gap:10px; }

.calendar-review-event-card.ev-card {
    position:relative;
    margin:0;
    padding:.72rem .8rem .75rem .9rem;
    background:linear-gradient(90deg, rgba(30,48,65,.56), rgba(20,33,46,.28));
    border:0;
    border-radius:8px;
    box-shadow:none;
    overflow:hidden;
    transition:background-color .17s ease, transform .17s ease;
}
.calendar-review-event-card.ev-card::before {
    position:absolute;
    top:10px;
    bottom:10px;
    left:0;
    width:1px;
    background:#65b8ed;
    box-shadow:0 0 8px rgba(101,184,237,.28);
    content:'';
}
.calendar-review-event-card.ev-card:hover { background:linear-gradient(90deg, rgba(37,60,80,.7), rgba(23,39,53,.4)); transform:translateX(2px); box-shadow:none; }
.calendar-review-event-card .dossier-item-header { margin-bottom:.2rem; }
.calendar-review-event-card .ev-card-title { color:#edf5fb; font-size:.72rem; }
.calendar-review-event-card .ev-card-summary { margin-top:.2rem; color:rgba(204,220,232,.55); font-size:.58rem; line-height:1.4; -webkit-line-clamp:2; }
.calendar-review-event-card .ev-consequence-block { display:none; }
.calendar-review-event-card .game-badge { font-size:.46rem; }

.calendar-event-row {
    position:relative;
    display:grid;
    padding: 11px 4px 14px 1px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(112,159,199,.1);
    border-radius: 0;
    grid-template-columns:8px minmax(0,1fr);
    gap:12px;
    box-shadow: none;
    animation:calendar-event-in .24s ease both;
    transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.calendar-event-row:nth-child(2) { animation-delay:.035s; }
.calendar-event-row:nth-child(3) { animation-delay:.07s; }
.calendar-event-row:hover { transform:translateX(2px); border-color:rgba(110,178,228,.2); }
.calendar-event-marker { width:6px; height:6px; margin-top:5px; background:#6bb8ec; border-radius:999px; box-shadow:0 0 9px rgba(107,184,236,.45); }
.calendar-event-content { min-width:0; }

.calendar-event-row.is-cancelled { opacity:.5; }
.calendar-event-row.is-cancelled h4 { text-decoration:line-through; }
.calendar-event-topline { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.calendar-event-topline span { padding:3px 6px; border-radius:999px; font-size:.49rem; font-weight:800; letter-spacing:.025em; }
.calendar-event-importance { background:rgba(148,163,184,.1); color:#a9b6c7; }
.calendar-event-importance.is-major { color:#fda4af; background:rgba(244,63,94,.1); }
.calendar-event-importance.is-moderate { color:#fde68a; background:rgba(245,158,11,.1); }
.calendar-event-type,.calendar-event-certainty { color:rgba(255,255,255,.48); background:rgba(255,255,255,.04); }
.calendar-cancelled-label { color:#fecaca; background:rgba(239,68,68,.1); }
.calendar-event-row h4 { margin:9px 0 5px; color:#f0f6fb; font-size:.79rem; }
.calendar-event-description { min-width:0; color:rgba(207,221,233,.57); font-size:.63rem; line-height:1.55; overflow-wrap:anywhere; }
.calendar-event-description * { max-width:100%; white-space:normal; }
.calendar-event-description p { margin:0 0 .35rem; }
.calendar-event-description p:last-child { margin-bottom:0; }
.calendar-event-links { display:flex; margin-top:7px; flex-wrap:wrap; gap:4px; }
.calendar-link-chip { padding:3px 6px; color:#bfdbfe; background:rgba(59,130,246,.08); border:1px solid rgba(96,165,250,.18); border-radius:999px; font-size:.53rem; }

.calendar-empty-state { display:grid; min-height:230px; padding:24px; place-content:center; text-align:center; }
.calendar-empty-state > span { color:rgba(112,185,234,.32); font-size:2rem; line-height:1; }
.calendar-empty-state h4 { margin:12px 0 5px; color:rgba(227,238,247,.7); font-size:.78rem; }
.calendar-empty-state p { margin:0; color:rgba(187,205,220,.36); font-size:.6rem; }

@keyframes calendar-detail-in { from { opacity:0; transform:translateX(7px); } to { opacity:1; transform:none; } }
@keyframes calendar-event-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

@media (max-width: 760px) {
    .calendar-history-wrap .calendar-planner {
        position:absolute;
        top:calc(100% + 8px);
        right:auto;
        bottom:auto;
        left:50%;
        width:min(700px, calc(100vw - 1rem));
        height:min(410px, calc(100vh - 150px));
        min-height:300px;
        max-height:450px;
    }
    .calendar-history-wrap .calendar-planner.is-open { transform:translate(-50%,0) scale(1); }
    .calendar-history-wrap .calendar-planner.is-closing { transform:translate(-50%,-5px) scale(.99); }
    .calendar-planner-body { grid-template-columns:205px minmax(0,1fr); }
    .calendar-month-rail { padding:7px 9px 9px 8px; }
    .calendar-month-card { min-height:56px; padding:8px; grid-template-columns:24px minmax(0,1fr) auto; gap:6px; }
    .calendar-month-card-copy strong { font-size:.69rem; }
    .calendar-counts { gap:2px; }
    .calendar-counts span:not(.is-empty) { width:14px; height:14px; font-size:.46rem; }
    .calendar-month-detail { padding:20px 34px 24px 20px; }
    .calendar-detail-header { align-items:flex-start; flex-direction:column; gap:9px; margin-bottom:16px; padding-bottom:14px; }
    .calendar-month-detail h3 { font-size:1.12rem; }
}

@media (max-width: 500px) {
    .calendar-planner-body { grid-template-columns:140px minmax(0,1fr); }
    .calendar-month-card { grid-template-columns:minmax(0,1fr) auto; }
    .calendar-month-index,.calendar-month-card-copy small { display:none; }
    .calendar-rail-controls { align-items:stretch; flex-direction:column; gap:0; }
    .calendar-current-year { align-self:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-history-wrap .calendar-planner,.calendar-month-card,.calendar-event-row { transition:none; }
    .calendar-month-detail.is-switching,.calendar-event-row { animation:none; }
}
.log-dropdown-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}
.log-dropdown-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.log-dropdown-x {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 3px;
    cursor: pointer;
    transition: color 0.15s;
}
.log-dropdown-x:hover { color: rgba(255, 255, 255, 0.75); }
.log-dropdown-body {
    overflow-y: auto;
    flex: 1;
    padding: 6px 0 8px;
}
.log-dropdown-body::-webkit-scrollbar { width: 4px; }
.log-dropdown-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
.log-empty-msg {
    text-align: center;
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.78rem;
    padding: 28px 16px;
    margin: 0;
}

/* ── Notification badges ─────────────────────────────────────────── */
.notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    background: #3b82f6;
    color: #fff;
    border-radius: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0 4px;
    line-height: 1;
    vertical-align: middle;
    letter-spacing: 0;
}
/* Sidebar tab badges — inline after the label text */
.sidebar-tab-btn .notif-badge {
    margin-left: 3px;
    margin-bottom: 1px;
}
/* Month-history badge — floating on the calendar trigger */
.calendar-display .notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    margin: 0;
    box-shadow: 0 0 0 2px #0f1623;
}
/* Top-level view-toggle badges — tucked into each panel's lower-right corner. */
#mapViewBtn .notif-badge,
#dashboardViewBtn .notif-badge,
#parliamentViewBtn .notif-badge {
    position: absolute;
    top: auto;
    right: 3px;
    bottom: 2px;
    margin: 0;
    box-shadow: 0 0 0 2px rgba(8, 13, 22, 0.92);
    z-index: 1;
}

/* The final panel's visual corner is inset by its trapezoid mask. */
#parliamentViewBtn .notif-badge {
    right: 13%;
}


/* ===== World Memory grouping + expandable cards ===== */
.dossier-group {
    margin-bottom: 0.75rem;
}

.dossier-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.38);
    padding: 0.2rem 0.1rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0.5rem;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.dossier-group-header:hover {
    color: rgba(255, 255, 255, 0.6);
}

.dossier-group-header-left {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dossier-group-count {
    background: rgba(0, 168, 255, 0.18);
    color: #cfe8ff;
    border-radius: 10px;
    padding: 0.05rem 0.5rem;
    font-size: 0.7rem;
}

/* Collapsible group body */
.dossier-group-body.dossier-group-collapsed {
    display: none;
}

/* Collapse chevron */
.collapse-chevron {
    font-size: 0.65rem;
    line-height: 1;
    transition: transform 0.18s ease;
    display: inline-block;
    color: rgba(255, 255, 255, 0.35);
}
.group-header-collapsed .collapse-chevron {
    transform: rotate(-90deg);
}

.dossier-item {
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    margin-bottom: 0.6rem;
}

.dossier-item:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(20, 22, 30, 0.92);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.dossier-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.dossier-subtype {
    font-size: 0.68rem;
    font-weight: 600;
    color: #cfe8ff;
    background: rgba(0, 168, 255, 0.15);
    border-radius: 8px;
    padding: 0.05rem 0.4rem;
}

.dossier-details {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dossier-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.dossier-tag {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 0.05rem 0.45rem;
}

.dossier-notes {
    margin-top: 0.4rem;
}

.dossier-note {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* ===== WM expanded detail helpers ===== */
.dossier-detail-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.45);
    margin-right: 0.3rem;
}

.dossier-effects-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

/* .dossier-effect-chip — retired; stat-effect chips in world memory now use .narrative-chip via buildStatDeltaChip */

/* Enacted status badge */
.dossier-status-enacted {
    background: rgba(0, 168, 107, 0.18);
    color: #4eca8b;
    font-size: 0.72rem;
    border-radius: 10px;
    padding: 0.05rem 0.5rem;
    font-weight: 600;
}

/* DM thinking / loading indicator */
.story-message.dm-thinking {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
}

.dm-thinking-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

.dm-thinking-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d6efd;
    flex-shrink: 0;
    animation: dmPulse 1.4s ease-in-out infinite;
}

@keyframes dmPulse {
    0%, 100% { opacity: 0.25; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1.3); }
}

.dm-thinking-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dm-thinking-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.35);
}

.dm-thinking-sub {
    font-size: 0.88rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
}

/* Narrative paragraph spacing */
.story-message.story-narrative p {
    margin-bottom: 0.65rem;
    line-height: 1.65;
}

.story-message.story-narrative p:last-child {
    margin-bottom: 0;
}

/* Compounding Effects section in World Memory cards */
.dossier-compounding-effects {
    margin-top: 0.5rem;
}

.dossier-compounding-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.dossier-comp-chip {
    font-size: 0.68rem;
}

/* Completion effects section in World Memory cards (On Completion / Applied on Completion) */
.dossier-completion-effects {
    margin-top: 0.5rem;
}

.dossier-completion-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.dossier-completion-marker {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    min-width: 4.5rem;
}

.dossier-completion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Long-running project progress bars on World Memory cards */
.dossier-project-progress {
    padding: 0.45rem 0.75rem 0.3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dossier-progress-track {
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.dossier-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3a7bd5, #6ab0ff);
    border-radius: 4px;
    transition: width 0.4s ease;
    box-shadow: 0 0 6px rgba(106, 176, 255, 0.35);
}

.dossier-progress-bar-fill.dossier-progress-complete {
    background: linear-gradient(90deg, #00a86b, #5deba0);
    box-shadow: 0 0 6px rgba(93, 235, 160, 0.35);
}

.dossier-progress-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
}

.dossier-progress-turns {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Policy sections in World Memory cards */
.dossier-policy-sections {
    margin-top: 0.5rem;
}

.dossier-policy-section {
    margin-top: 0.3rem;
    padding-left: 0.5rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.dossier-policy-heading {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.dossier-policy-body {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

.dossier-section-tradeoffs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.dossier-tradeoff-chip {
    font-size: 0.65rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.15);
    color: rgba(239, 68, 68, 0.85);
    border: 1px solid rgba(239, 68, 68, 0.25);
    line-height: 1.5;
}

.dossier-section-benefits .dossier-benefit-chip {
    background: rgba(52, 211, 153, 0.12);
    color: rgba(52, 211, 153, 0.85);
    border: 1px solid rgba(52, 211, 153, 0.25);
}

/* Fiscal effects in World Memory cards */
.dossier-fiscal {
    margin-top: 0.5rem;
}

.dossier-fiscal-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    padding: 0.1rem 0;
}

.dossier-fiscal-key {
    color: rgba(255, 255, 255, 0.5);
    text-transform: capitalize;
}

.dossier-fiscal-val {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

/* =====================================================
   SIDEBAR TAB BAR (World Memory / Characters)
   ===================================================== */
.sidebar-tabs {
    gap: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.6rem;
    flex-wrap: wrap;
}

/* Per-tab accent colors */
.sidebar-tab-btn[data-tab="dossier"]          { --tc: #22d3ee; --tb: rgba(34, 211, 238, 0.12); --tb-h: rgba(34, 211, 238, 0.18); }
.sidebar-tab-btn[data-tab="worldMemory"]      { --tc: #38bdf8; --tb: rgba(56, 189, 248, 0.12); --tb-h: rgba(56, 189, 248, 0.18); }
.sidebar-tab-btn[data-tab="characters"]       { --tc: #4ade80; --tb: rgba(74, 222, 128, 0.12); --tb-h: rgba(74, 222, 128, 0.18); }
.sidebar-tab-btn[data-tab="events"]           { --tc: #fbbf24; --tb: rgba(251, 191, 36, 0.12); --tb-h: rgba(251, 191, 36, 0.18); }
.sidebar-tab-btn[data-tab="lore"]             { --tc: #e8b86d; --tb: rgba(232, 184, 109, 0.12); --tb-h: rgba(232, 184, 109, 0.18); }
.sidebar-tab-btn.sidebar-action-btn           { --tc: #94a3b8; --tb: rgba(148, 163, 184, 0.10); --tb-h: rgba(148, 163, 184, 0.18); }
.sidebar-tab-btn[data-tab="govParliament"]    { --tc: #c084fc; --tb: rgba(192, 132, 252, 0.12); --tb-h: rgba(192, 132, 252, 0.18); }

/* ── Lore tab sub-sections ──────────────────────────────────────────── */
.lore-section { margin-bottom: 1rem; }
.lore-section-header {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e8b86d;
    padding: 0.25rem 0.5rem 0.2rem;
    border-bottom: 1px solid rgba(232, 184, 109, 0.2);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lore-section-count {
    font-size: 0.6rem;
    background: rgba(232, 184, 109, 0.15);
    color: #e8b86d;
    border-radius: 8px;
    padding: 1px 6px;
    font-weight: 600;
}
.lore-card {
    background: rgba(12, 14, 20, 0.88);
    border: 1px solid rgba(232, 184, 109, 0.15);
    border-radius: 12px;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.35rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lore-card:hover {
    border-color: rgba(232, 184, 109, 0.32);
    background: rgba(20, 22, 30, 0.92);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.lore-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #f1e4c8;
    margin-bottom: 0.15rem;
}
.lore-card-summary {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.45;
}
.sidebar-tab-btn[data-tab="govEconomy"]       { --tc: #34d399; --tb: rgba(52, 211, 153, 0.12); --tb-h: rgba(52, 211, 153, 0.18); }
.sidebar-tab-btn[data-tab="govResearch"]      { --tc: #fb923c; --tb: rgba(251, 146, 60, 0.12); --tb-h: rgba(251, 146, 60, 0.18); }
.sidebar-tab-btn[data-tab="govInfrastructure"]{ --tc: #94a3b8; --tb: rgba(148, 163, 184, 0.12); --tb-h: rgba(148, 163, 184, 0.18); }

.sidebar-tab-btn {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--tc, #fff) 30%, transparent);
    border-radius: 6px;
    color: color-mix(in srgb, var(--tc, #fff) 52%, transparent);
    font-size: 0.73rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sidebar-tab-btn:hover {
    background: color-mix(in srgb, var(--tb, rgba(255,255,255,0.08)) 80%, transparent);
    border-color: color-mix(in srgb, var(--tc, #fff) 55%, transparent);
    color: color-mix(in srgb, var(--tc, #fff) 85%, transparent);
}

.sidebar-tab-btn.active {
    background: var(--tb, rgba(120, 160, 255, 0.18));
    border-color: color-mix(in srgb, var(--tc, #8fb4ff) 75%, transparent);
    color: var(--tc, #8fb4ff);
    font-weight: 700;
    box-shadow: 0 0 8px color-mix(in srgb, var(--tc, #8fb4ff) 22%, transparent);
}

.sidebar-tab-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.sidebar-tab-content::-webkit-scrollbar {
    width: 5px;
}

.sidebar-tab-content::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-tab-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
}

.sidebar-tab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* =====================================================
   CHARACTER REGISTRY ITEMS
   ===================================================== */
.char-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.5rem;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.char-item-person {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.actor-supporting-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 58px;
    padding: 0.65rem 0.8rem;
}

.actor-supporting-card .char-type-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #8fb4ff;
    background: rgba(91, 142, 224, 0.1);
    border: 1px solid rgba(111, 166, 255, 0.2);
    border-radius: 8px;
}

.actor-supporting-card .char-role {
    margin: 0.12rem 0 0;
    line-height: 1.3;
}

.actor-seat-count {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.68rem;
    font-weight: 650;
}

.char-portrait-wrap {
    flex-shrink: 0;
    width: 88px;
    height: 112px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(20, 22, 28, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.char-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.char-body {
    flex: 1;
    min-width: 0;
}

.char-item:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(20, 22, 30, 0.92);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.char-item-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.char-type-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.char-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

.char-affiliation {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: normal;
    word-break: break-word;
    max-width: 160px;
    text-align: right;
    line-height: 1.3;
}

.char-role {
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.15rem;
}

.char-ideology {
    font-size: 0.68rem;
    color: rgba(160, 180, 255, 0.7);
    margin-bottom: 0.35rem;
    font-style: italic;
}

.char-bars {
    margin: 0.35rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.char-bar-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.char-bar-label {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.38);
    width: 46px;
    flex-shrink: 0;
}

.char-bar-track {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.char-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.char-bar-fill.loyalty {
    background: linear-gradient(90deg, #4eca8b, #2fa36e);
}

.char-bar-fill.influence {
    background: linear-gradient(90deg, #7ab3ff, #4d8fe0);
}

.char-bar-val {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.38);
    width: 72px;
    text-align: right;
    flex-shrink: 0;
}

.char-stance {
    font-size: 0.71rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    margin-top: 0.3rem;
    font-style: italic;
}

.char-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.char-trait {
    font-size: 0.64rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.05rem 0.45rem;
    color: rgba(255, 255, 255, 0.45);
}

/* Actor / entity link chips on event cards and major event screen */
.ev-actor-link {
    background: rgba(100, 160, 255, 0.1);
    color: rgba(160, 200, 255, 0.85);
    border: 1px solid rgba(100, 160, 255, 0.25);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ev-actor-link:hover {
    background: rgba(100, 160, 255, 0.2);
    color: rgba(200, 225, 255, 1);
}
.ev-actor-link.ev-actor-org {
    background: rgba(140, 100, 255, 0.1);
    color: rgba(200, 175, 255, 0.85);
    border-color: rgba(140, 100, 255, 0.25);
}
.ev-actor-link.ev-actor-org:hover {
    background: rgba(140, 100, 255, 0.2);
    color: rgba(220, 205, 255, 1);
}

/* Major event screen linked row */
.me-linked-row {
    margin-top: 0.5rem;
    min-height: 0;
}

/* Actor group headings (People / Organizations / Nations separator) */
.actor-group-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.38);
    padding: 0.2rem 0.1rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0.5rem;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}
.actor-group-heading:hover {
    color: rgba(255, 255, 255, 0.6);
}
.actor-group {
    margin-bottom: 0.75rem;
}
.nation-item {
    border-color: rgba(0, 200, 140, 0.1);
}
.nation-item:hover {
    border-color: rgba(0, 200, 140, 0.22);
}

/* Org-type actor cards — slightly different accent */
.org-item {
    border-color: rgba(120, 160, 255, 0.09);
}
.org-item:hover {
    border-color: rgba(120, 160, 255, 0.18);
}

.org-type-label {
    font-size: 0.68rem;
    color: rgba(160, 190, 255, 0.5);
    font-style: italic;
    margin-bottom: 0.15rem;
}

/* Relationship-with-player pill on org cards */
.org-rel-pill {
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 0.05rem 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.org-rel-pill.rel-friendly {
    background: rgba(40, 167, 69, 0.15);
    color: #4eca8b;
    border: 1px solid rgba(40, 167, 69, 0.25);
}
.org-rel-pill.rel-hostile {
    background: rgba(220, 53, 69, 0.15);
    color: #f07070;
    border: 1px solid rgba(220, 53, 69, 0.25);
}
.org-rel-pill.rel-neutral {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Org type pill (in card header, replaces old org-rel-pill for type display) */
/* .org-type-pill kept as backward-compatible alias for .game-badge.gb-purple */
.org-type-pill {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
    flex-shrink: 0;
    vertical-align: middle;
    letter-spacing: 0.02em;
    line-height: 1.5;
    background: rgba(130, 110, 255, 0.12);
    color: rgba(190, 175, 255, 0.9);
    border: 1px solid rgba(130, 110, 255, 0.2);
}

/* Bipolar relationship bar (-100 to +100) */
.char-bar-track-bipolar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.char-bar-fill-bipolar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background 0.3s ease;
}

/* Micro-label used for AGENDA, RECENT ACTIONS, etc. */
.char-section-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    border-left: 2px solid rgba(100, 160, 255, 0.3);
    padding-left: 0.4rem;
    margin-bottom: 0.25rem;
    letter-spacing: 0.01em;
}

/* Agenda section wrapper */
.char-agenda-wrap {
    margin-bottom: 0.35rem;
}

/* Agenda text beneath the AGENDA label */
.char-agenda-text {
    font-size: 0.71rem;
    color: rgba(200, 220, 255, 0.6);
    line-height: 1.4;
    font-style: italic;
}

/* Recent actions section wrapper */
.char-recent-wrap {
    margin-top: 0.3rem;
}

/* Scrollable log list for recent actions */
.char-action-log {
    list-style: disc;
    margin: 0;
    padding: 0.3rem 0.5rem 0.3rem 1.1rem;
    max-height: 4.5rem;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Individual action entry */
.char-action-entry {
    font-size: 0.67rem;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.4;
    padding: 0.05rem 0;
}

/* Power base / key constituency for org cards */
.char-powerbase {
    font-size: 0.68rem;
    color: rgba(160, 190, 255, 0.5);
    margin-bottom: 0.15rem;
}

/* =====================================================
   STRATEGIC DECISION CARDS (Suggested Next Moves)
   ===================================================== */
.suggested-moves-wrapper {
    margin-top: 1rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.move-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.55rem;
    margin-top: 0.4rem;
}

.move-card {
    background: rgba(12,14,20,0.82);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 10px;
    padding: 0.7rem 0.75rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
    cursor: default;
}

.move-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(120, 160, 255, 0.35);
    transform: translateY(-1px);
}

/* Top row: type pill + risk badge */
.move-card-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* Risk badge */
.move-risk-badge {
    white-space: nowrap;
}

.move-risk-badge.risk-low {
    background: rgba(0, 168, 107, 0.15);
    color: #4eca8b;
    border: 1px solid rgba(0, 168, 107, 0.3);
}

.move-risk-badge.risk-medium {
    background: rgba(255, 185, 30, 0.12);
    color: #f0c040;
    border: 1px solid rgba(255, 185, 30, 0.25);
}

.move-risk-badge.risk-high {
    background: rgba(255, 80, 80, 0.12);
    color: #ff7070;
    border: 1px solid rgba(255, 80, 80, 0.25);
}

/* Card title */
.move-card-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.35;
}

/* Description (2-line clamp) */
.move-card-desc {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* Pros/cons inline chips */
.move-card-pnc {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.move-pnc-item {
    font-size: 0.66rem;
    line-height: 1.3;
}

.move-pnc-pro { color: rgba(78, 202, 139, 0.85); }
.move-pnc-con { color: rgba(255, 140, 100, 0.8); }

/* Action button — always visible at the bottom */
.move-card-action-btn {
    margin-top: auto;
    padding-top: 0.35rem;
    width: 100%;
    background: rgba(120, 160, 255, 0.1);
    border: 1px solid rgba(120, 160, 255, 0.25);
    border-radius: 7px;
    color: #8fb4ff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.move-card-action-btn:hover {
    background: rgba(120, 160, 255, 0.22);
    border-color: rgba(120, 160, 255, 0.5);
    color: #b8d0ff;
}

/* =====================================================
   WORLD MEMORY — Bill Text button + header actions
   ===================================================== */
.dossier-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.dossier-bill-text-btn {
    background: rgba(80, 140, 255, 0.22);
    border: 1px solid rgba(100, 160, 255, 0.55);
    border-radius: 6px;
    color: rgba(180, 215, 255, 1);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.dossier-bill-text-btn:hover {
    background: rgba(80, 140, 255, 0.42);
    border-color: rgba(140, 190, 255, 0.9);
    color: #fff;
    box-shadow: 0 0 8px rgba(100, 160, 255, 0.35);
}

/* Bill Text modal body styling */
#billTextModalBody .dossier-policy-sections {
    padding: 0;
}

#billTextModalBody .dossier-policy-section {
    margin-bottom: 1.2rem;
}

#billTextModalBody .dossier-policy-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.35rem;
}

#billTextModalBody .dossier-policy-body {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

#billTextModalBody .dossier-detail-label {
    display: none;
}

#billTextModalBody .dossier-section-tradeoffs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

#billTextModalBody .dossier-tradeoff-chip {
    font-size: 0.72rem;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    background: rgba(255, 80, 80, 0.12);
    color: rgba(255, 140, 100, 0.9);
    border: 1px solid rgba(255, 80, 80, 0.2);
}

#billTextModalBody .dossier-benefit-chip {
    background: rgba(0, 168, 107, 0.12);
    color: rgba(78, 202, 139, 0.9);
    border: 1px solid rgba(0, 168, 107, 0.2);
}

/* ===== Current Events — source badges ===== */
.ev-source-badge {
    white-space: nowrap;
}
.ev-source-memory   { background: rgba(0, 120, 255, 0.18); color: #7bbeff; }
.ev-source-world    { background: rgba(140, 80, 220, 0.18); color: #c9a0ff; }
.ev-source-external { background: rgba(0, 190, 180, 0.18); color: #5de8e0; }
.ev-source-calendar { background: rgba(96, 165, 250, 0.16); color: #bfdbfe; }
.ev-source-election { background: rgba(255, 200, 0, 0.15); color: #ffd966; }

/* ===== Current Events — severity badges ===== */
.ev-sev-badge {
    white-space: nowrap;
}
.ev-sev-opportunity { background: rgba(0, 168, 107, 0.18); color: #4eca8b; }
.ev-sev-minor       { background: rgba(255, 255, 255, 0.07); color: rgba(255,255,255,0.55); }
.ev-sev-moderate    { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.ev-sev-major       { background: rgba(253, 126, 20, 0.18); color: #fd9a4a; }
.ev-decision-badge  { background: rgba(120, 80, 255, 0.18); color: #b59fff; }

/* ===== Event card compact summary ===== */
.ev-card-summary {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
    margin-top: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ev-card.expanded .ev-card-summary {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* ===== Event card structured consequence blocks ===== */
.ev-card-title { display: flex; align-items: center; gap: 0.35rem; }

.ev-major-flag {
    color: #ffd700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.ev-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.ev-pressure-source {
    font-size: 0.67rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

/* .ev-actor-chip — retired; pressureSource field removed from event cards */
/* .ev-threatened-power — retired; threatenedPower field removed from event cards */

.ev-consequence-block {
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ev-consequence-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 0.3rem;
}

/* World Update list */
.ev-world-update-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ev-world-update-list li {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.75rem;
    flex-wrap: wrap;
}

.ev-update-chip {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 0.08rem 0.35rem;
    flex-shrink: 0;
}

.ev-update-created { background: rgba(60, 200, 120, 0.15); color: #5cdb95; }
.ev-update-updated { background: rgba(100, 160, 255, 0.15); color: #7eb8ff; }
.ev-update-actor   { background: rgba(200, 130, 255, 0.15); color: #d4a0ff; }

.ev-update-name {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
}

.ev-update-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-underline-offset: 2px;
}
.ev-update-link:hover { color: #fff; text-decoration-color: rgba(255,255,255,0.6); }

.ev-update-detail {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.7rem;
    font-style: italic;
    flex-basis: 100%;
    padding-left: calc(0.35rem * 2 + 2.5rem); /* indent under chip */
}

.ev-expand-hint {
    margin-top: 0.45rem;
    font-size: 0.67rem;
    color: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    user-select: none;
}
.ev-expand-hint:hover { color: rgba(255,255,255,0.5); }

/* ===== Suggested response chips inside card ===== */
.ev-response-chip {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.2rem 0.55rem;
    margin-top: 0.25rem;
    display: block;
}

/* ===== Major Event Cinematic Full-Screen Overlay (Frostpunk-style) ===== */

.me-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: meOverlayIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes meOverlayIn {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}

/* Cinematic window — leaves ~7vh of blurred game visible at top + bottom */
.me-container {
    display: flex;
    width: 100%;
    height: 86vh;
    max-height: 86vh;
    overflow: hidden;
}

/* ---- LEFT PANEL ---- */
.me-left {
    flex: 0 0 52%;
    max-width: 52%;
    background: linear-gradient(160deg, #0d1117 0%, #111827 60%, #0f1c2e 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow: 4px 0 40px rgba(0, 0, 0, 0.6);
    min-height: 0;
}

.me-scroll-region {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2.5rem 2.75rem 1.5rem;
    scrollbar-color: rgba(255,255,255,0.16) transparent;
    scrollbar-width: thin;
}

.me-action-dock {
    background: linear-gradient(180deg, rgba(15,28,46,0.94), #0f1c2e 24%);
    border-top: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 -18px 34px rgba(4,8,15,0.28);
    flex: 0 0 auto;
    padding: 1rem 2.75rem 1.25rem;
    position: relative;
    z-index: 4;
}

/* subtle left-edge accent line */
.me-left::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, rgba(0, 168, 255, 0.5), transparent);
}

.me-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.me-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.me-counter {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

.me-source-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 168, 255, 0.7);
    margin-bottom: 0.75rem;
    min-height: 1rem;
}

.me-title {
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.me-description {
    font-size: 0.93rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.72;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.me-effects-row {
    margin-bottom: 0.75rem;
}

/* Spacing between payload blocks inside the major-event effects container */
.me-payload-block {
    margin-bottom: 0.75rem;
}
.me-payload-block:last-child {
    margin-bottom: 0;
}

.me-wm-row {
    margin-bottom: 1.1rem;
}

/* ---- CHOICES ---- */
.me-choices {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.me-choice-btn {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    position: relative;
}

.me-choice-btn:hover {
    background: rgba(0, 168, 255, 0.07);
    border-color: rgba(0, 168, 255, 0.35);
    transform: translateX(3px);
}

.me-choice-btn:active {
    transform: translateX(1px);
}

.me-choice-btn.requires-decision {
    border-left: 3px solid rgba(0, 168, 255, 0.5);
    padding-left: 0.9rem;
}

.me-choice-btn.requires-decision:hover {
    border-left-color: rgba(0, 168, 255, 0.9);
}

.me-choice-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.2rem;
}

.me-choice-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin-bottom: 0.35rem;
}

.me-choice-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.me-choice-action {
    font-size: 0.75rem;
    color: rgba(0, 168, 255, 0.85);
    font-style: italic;
}

/* ---- CUSTOM INPUT ---- */
.me-custom-input {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0;
    align-items: center;
}

.me-custom-text {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
}

.me-custom-text:focus {
    border-color: rgba(0, 168, 255, 0.45);
    background: rgba(0, 168, 255, 0.04);
}

.me-custom-text::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.me-custom-send-btn {
    background: rgba(0, 168, 255, 0.15);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: 8px;
    color: rgba(0, 168, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.me-custom-send-btn:hover {
    background: rgba(0, 168, 255, 0.25);
    border-color: rgba(0, 168, 255, 0.55);
}

/* ---- RICH DESCRIPTION ELEMENTS ---- */
.me-description p {
    margin: 0 0 0.9rem;
    color: rgba(255,255,255,0.82);
    font-size: 0.93rem;
    line-height: 1.75;
}
.me-description p:last-child { margin-bottom: 0; }

.me-hl {
    color: #ffd966;
    font-weight: 700;
}

.me-quote {
    margin: 1rem 0;
    padding: 0.75rem 1.1rem;
    border-left: 3px solid rgba(255,200,0,0.6);
    background: rgba(255,200,0,0.06);
    border-radius: 0 6px 6px 0;
    color: rgba(255,255,255,0.9);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.65;
}

.me-subtext {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.85rem !important;
}

.me-stat-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.6rem 0 1rem;
}

.me-stat-chip {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #e8eaf0;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.5;
}

.me-chip-green {
    background: rgba(78,203,113,0.15);
    border-color: rgba(78,203,113,0.35);
    color: #4ecb71;
}

/* ---- FOOTER ---- */
.me-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
    flex-shrink: 0;
}

.me-continue-btn {
    background: linear-gradient(135deg, rgba(255,200,0,0.15) 0%, rgba(255,160,0,0.1) 100%);
    border: 1px solid rgba(255,200,0,0.45);
    border-radius: 8px;
    color: #ffd966;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.1s;
    box-shadow: 0 0 18px rgba(255,200,0,0.1);
}

.me-continue-btn:hover {
    background: linear-gradient(135deg, rgba(255,200,0,0.28) 0%, rgba(255,160,0,0.2) 100%);
    border-color: rgba(255,200,0,0.75);
    box-shadow: 0 0 28px rgba(255,200,0,0.22);
    color: #ffe680;
    transform: translateY(-1px);
}

.me-continue-btn:active {
    transform: translateY(0);
}

/* ---- RIGHT PANEL ---- */
.me-right {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #0a0f1a;
}

.me-right-art {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    transition: background 0.4s ease;
}

.me-right-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 17, 23, 0.88) 0%, rgba(13,17,23,0.34) 12%, transparent 34%),
                linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 1;
}

.me-art-icon {
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: 1;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.7));
    margin-bottom: 1.2rem;
    z-index: 2;
    position: relative;
}

.me-art-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    z-index: 2;
    position: relative;
}

/* ---- Category-specific right-panel themes ---- */
.me-right-art.cat-election       { background: linear-gradient(135deg, #0f1b4c 0%, #1a237e 40%, #283593 70%, #0d1b3e 100%); }
.me-right-art.cat-parliament     { background: linear-gradient(135deg, #1a1000 0%, #2d1f00 40%, #3e2c00 70%, #1a1500 100%); }
.me-right-art.cat-cabinet        { background: linear-gradient(135deg, #001a1a 0%, #00332b 40%, #004d40 70%, #001a14 100%); }
.me-right-art.cat-protest        { background: linear-gradient(135deg, #1a0000 0%, #3d0700 40%, #6b1010 70%, #2a0000 100%); }
.me-right-art.cat-strike         { background: linear-gradient(135deg, #1a0d00 0%, #3d1f00 40%, #6b3800 70%, #2a1200 100%); }
.me-right-art.cat-economy        { background: linear-gradient(135deg, #001a0d 0%, #003d1a 40%, #005722 70%, #001a0a 100%); }
.me-right-art.cat-budget         { background: linear-gradient(135deg, #0f1a00 0%, #1e3300 40%, #2e4d00 70%, #121a00 100%); }
.me-right-art.cat-healthcare     { background: linear-gradient(135deg, #001433 0%, #002b55 40%, #003f7a 70%, #000f26 100%); }
.me-right-art.cat-infrastructure { background: linear-gradient(135deg, #111111 0%, #1f2937 40%, #374151 70%, #0d0d0d 100%); }
.me-right-art.cat-disaster       { background: linear-gradient(135deg, #1a0000 0%, #3b0000 40%, #5c1515 70%, #200000 100%); }
.me-right-art.cat-court          { background: linear-gradient(135deg, #0f001a 0%, #1e0033 40%, #2d004d 70%, #120020 100%); }
.me-right-art.cat-diplomacy      { background: linear-gradient(135deg, #00101a 0%, #002233 40%, #003d5c 70%, #000d14 100%); }
.me-right-art.cat-scandal        { background: linear-gradient(135deg, #120006 0%, #2b000f 40%, #450018 70%, #190009 100%); }
.me-right-art.cat-energy         { background: linear-gradient(135deg, #1a1000 0%, #332000 40%, #5c3d00 70%, #261600 100%); }
.me-right-art.cat-technology     { background: linear-gradient(135deg, #001a1a 0%, #003333 40%, #004d4d 70%, #001414 100%); }
.me-right-art.cat-security       { background: linear-gradient(135deg, #0d1a00 0%, #1a330a 40%, #274d12 70%, #0a1400 100%); }
.me-right-art.cat-default        { background: linear-gradient(135deg, #0d1117 0%, #1a2332 40%, #243448 70%, #0a0f1a 100%); }

/* Subtle inner glow per category */
.me-right-art.cat-election::after,
.me-right-art.cat-parliament::after,
.me-right-art.cat-cabinet::after,
.me-right-art.cat-protest::after,
.me-right-art.cat-strike::after,
.me-right-art.cat-economy::after,
.me-right-art.cat-budget::after,
.me-right-art.cat-healthcare::after,
.me-right-art.cat-infrastructure::after,
.me-right-art.cat-disaster::after,
.me-right-art.cat-court::after,
.me-right-art.cat-diplomacy::after,
.me-right-art.cat-scandal::after,
.me-right-art.cat-energy::after,
.me-right-art.cat-technology::after,
.me-right-art.cat-security::after,
.me-right-art.cat-default::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* ---- Real image support ---- */
.me-right-art.has-image {
    background-size: cover !important;
    background-position: center !important;
}

.me-right-art.has-image .me-art-icon,
.me-right-art.has-image .me-art-label {
    display: none;
}

/* ---- Responsive: stack below ~768px ---- */
@media (max-width: 768px) {
    .me-overlay {
        align-items: stretch;
    }
    .me-container {
        flex-direction: column;
        height: 100dvh;
        max-height: 100dvh;
    }
    .me-left {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
        max-height: none;
        min-height: 0;
        order: 2;
        box-shadow: 0 -8px 30px rgba(0,0,0,0.48);
    }
    .me-right {
        flex: 0 0 clamp(220px, 35dvh, 340px);
        min-height: 220px;
        order: 1;
    }
    .me-right-vignette {
        background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 44%, rgba(13,17,23,0.5) 76%, #0d1117 100%);
    }
    .me-scroll-region {
        padding: 1.2rem 1.25rem 1rem;
    }
    .me-action-dock {
        padding: 0.8rem 1.25rem max(0.9rem, env(safe-area-inset-bottom));
    }
    .me-continue-btn,
    .me-custom-input {
        width: 100%;
    }
    .me-title {
        font-size: 1.3rem;
    }
}

/* ===== EVENT PANEL: TURN DIVIDER & CURRENT BADGE ===== */
.ev-older-divider {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.6rem 0.2rem 0.3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0.5rem;
}

.ev-current-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #00a8ff;
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.25);
    border-radius: 20px;
    padding: 0.05rem 0.45rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* WM-link chips in event cards (clickable) */
.ev-wm-link {
    cursor: pointer;
    text-decoration: underline dotted rgba(255, 255, 255, 0.35);
}
.ev-wm-link:hover {
    background: rgba(0, 168, 255, 0.12);
    border-color: rgba(0, 168, 255, 0.3);
    text-decoration: none;
}

/* =============================================
   CINEMATIC MONTH TRANSITION
   ============================================= */
#turnLoadingOverlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    overflow: hidden;
    background: #080d15;
    color: #fff;
    opacity: 0;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.35s ease;
}

#turnLoadingOverlay.is-visible {
    opacity: 1;
}

.tl-art,
.tl-art-slide,
.tl-art-scrim {
    position: absolute;
    inset: 0;
}

.tl-art {
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 28%, rgba(45, 92, 145, 0.26), transparent 42%),
        linear-gradient(135deg, #142334, #080d15 72%);
}

.tl-art-slide {
    background-position: center;
    background-size: cover;
    opacity: 0;
    transform: scale(1.045);
    transition: opacity 1.8s ease, transform 8s ease-out;
    filter: saturate(0.8) contrast(1.05);
}

.tl-art-slide.is-visible {
    opacity: 1;
    transform: scale(1);
}

.tl-art-scrim {
    background:
        linear-gradient(90deg, rgba(5, 10, 18, 0.97) 0%, rgba(5, 10, 18, 0.86) 37%, rgba(5, 10, 18, 0.30) 74%, rgba(5, 10, 18, 0.48) 100%),
        linear-gradient(0deg, rgba(5, 9, 16, 0.93) 0%, transparent 42%, rgba(5, 9, 16, 0.4) 100%);
}

.tl-masthead {
    position: absolute;
    z-index: 2;
    top: clamp(28px, 5vh, 58px);
    left: clamp(28px, 6vw, 92px);
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.55s ease 0.15s, transform 0.55s ease 0.15s;
}

#turnLoadingOverlay.is-visible .tl-masthead {
    opacity: 1;
    transform: translateY(0);
}

.tl-flag {
    width: 54px;
    height: 36px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 5px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

.tl-masthead-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tl-country {
    font-size: 0.88rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.tl-office {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tl-content {
    position: relative;
    z-index: 2;
    width: min(650px, calc(100vw - 56px));
    margin-left: clamp(28px, 8vw, 124px);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s ease 0.22s, transform 0.65s cubic-bezier(.2, .8, .2, 1) 0.22s;
}

#turnLoadingOverlay.is-visible .tl-content {
    opacity: 1;
    transform: translateY(0);
}

.tl-label {
    color: #65a9ff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.tl-date-sequence {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tl-date-from {
    color: rgba(255, 255, 255, 0.48);
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.tl-date-rule {
    width: 1px;
    height: 28px;
    margin: 10px 0 9px 11px;
    background: linear-gradient(#65a9ff, rgba(101, 169, 255, 0.12));
}

.tl-date {
    margin: 0;
    color: #fff;
    font-size: clamp(3rem, 6.4vw, 6.7rem);
    font-weight: 780;
    line-height: 0.95;
    letter-spacing: -0.055em;
    text-wrap: balance;
    text-shadow: 0 8px 35px rgba(0, 0, 0, 0.45);
}

.tl-status {
    min-height: 1.5em;
    margin: 28px 0 14px;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(0.84rem, 1.3vw, 1rem);
    letter-spacing: 0.01em;
    transition: opacity 0.25s ease;
}

.tl-progress {
    width: min(530px, 100%);
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.13);
}

.tl-progress span {
    display: block;
    width: 14%;
    height: 100%;
    background: linear-gradient(90deg, #1677ee, #72b6ff);
    box-shadow: 0 0 18px rgba(74, 158, 255, 0.7);
    transition: width 0.8s cubic-bezier(.2, .8, .2, 1);
}

.tl-phases {
    width: min(530px, 100%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 13px;
}

.tl-phase {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.45s ease, opacity 0.45s ease;
    position: relative;
}

.tl-phase.active {
    color: rgba(255, 255, 255, 0.92);
}

.tl-phase.done {
    color: rgba(101, 169, 255, 0.76);
}

.tl-footer-note {
    position: absolute;
    z-index: 2;
    left: clamp(28px, 6vw, 92px);
    bottom: clamp(22px, 4vh, 48px);
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.67rem;
    font-style: italic;
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity 0.55s ease 0.5s;
}

#turnLoadingOverlay.is-visible .tl-footer-note {
    opacity: 1;
}

.tl-location {
    position: absolute;
    z-index: 2;
    right: clamp(28px, 6vw, 92px);
    bottom: clamp(22px, 4vh, 48px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    max-width: min(44vw, 620px);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-align: right;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(7px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tl-location.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tl-location.is-changing {
    opacity: 0;
    transform: translateY(5px);
}

.tl-location svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #65a9ff;
    stroke-width: 2;
}

@media (max-width: 700px) {
    .tl-art-scrim {
        background:
            linear-gradient(0deg, rgba(5, 10, 18, 0.98) 0%, rgba(5, 10, 18, 0.87) 47%, rgba(5, 10, 18, 0.32) 100%),
            linear-gradient(90deg, rgba(5, 10, 18, 0.58), rgba(5, 10, 18, 0.25));
    }
    .tl-art-slide { background-position: 58% center; }
    .tl-masthead {
        top: 28px;
        left: 24px;
    }
    .tl-flag {
        width: 45px;
        height: 30px;
    }
    .tl-content {
        width: calc(100vw - 48px);
        margin: auto 24px 17vh;
        align-self: flex-end;
    }
    .tl-label { margin-bottom: 14px; }
    .tl-date-rule {
        height: 20px;
        margin: 7px 0 7px 9px;
    }
    .tl-status { margin-top: 22px; }
    .tl-phases {
        gap: 8px;
    }
    .tl-phase {
        font-size: 0.56rem;
        letter-spacing: 0.045em;
    }
    .tl-footer-note {
        left: 24px;
        bottom: 22px;
    }
    .tl-location {
        right: 24px;
        bottom: 55px;
        max-width: calc(100vw - 48px);
        font-size: 0.62rem;
        letter-spacing: 0.075em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tl-art-slide,
    #turnLoadingOverlay,
    .tl-masthead,
    .tl-content,
    .tl-progress span,
    .tl-location,
    .tl-footer-note {
        transition-duration: 0.01ms !important;
    }
}

/* =============================================
   TURN LOG SIDEBAR ENTRIES
   ============================================= */
#turnLogList {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

.tlog-entry {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    overflow: hidden;
}

.tlog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background: rgba(74,158,255,0.07);
    cursor: pointer;
    user-select: none;
}

.tlog-header:hover { background: rgba(74,158,255,0.11); }

.tlog-turn {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4a9eff;
}

.tlog-date {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e8eaf0;
}


.tlog-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.76rem;
    color: rgba(255,255,255,0.6);
    padding: 0.2rem 0;
    line-height: 1.35;
}

.tlog-row-name { flex: 1; min-width: 0; }

.tlog-delta {
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.tlog-up   { color: #4ecb71; background: rgba(78,203,113,0.12); }
.tlog-down { color: #e05252; background: rgba(224,82,82,0.12); }
.tlog-neutral { color: rgba(255,255,255,0.25); }


/* =============================================
   TURN REPORT OVERLAY (REMOVED — kept as tombstone to avoid dead CSS)
   ============================================= */
#turnReportOverlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 16, 0.92);
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(6px);
}

.tr-panel {
    background: linear-gradient(160deg, #141720 0%, #1a1f2e 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7);
    animation: tr-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tr-in {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tr-header {
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    text-align: center;
    background: linear-gradient(180deg, rgba(74,158,255,0.06) 0%, transparent 100%);
}

.tr-turn-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4a9eff;
    background: rgba(74,158,255,0.12);
    border: 1px solid rgba(74,158,255,0.25);
    border-radius: 20px;
    padding: 0.25rem 0.85rem;
    margin-bottom: 0.75rem;
}

.tr-date {
    font-size: 1.8rem;
    font-weight: 700;
    color: #e8eaf0;
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}

.tr-subtitle {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.4);
    margin: 0;
    letter-spacing: 0.04em;
}

.tr-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tr-body::-webkit-scrollbar { width: 4px; }
.tr-body::-webkit-scrollbar-track { background: transparent; }
.tr-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.tr-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 0.85rem;
}

.tr-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

.tr-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    gap: 0.5rem;
    min-width: 0;
}

.tr-stat-name {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.tr-stat-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.tr-stat-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: #e8eaf0;
    white-space: nowrap;
}

.tr-stat-delta {
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.tr-delta-up   { color: #4ecb71; background: rgba(78,203,113,0.12); }
.tr-delta-down { color: #e05252; background: rgba(224,82,82,0.12); }
.tr-delta-none { color: rgba(255,255,255,0.25); }

.tr-ongoing-list,
.tr-projects-list,
.tr-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.tr-item {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.65);
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.03);
    border-left: 2px solid rgba(74,158,255,0.35);
    border-radius: 0 6px 6px 0;
    line-height: 1.4;
}

.tr-item.tr-item-good { border-left-color: rgba(78,203,113,0.45); }
.tr-item.tr-item-bad  { border-left-color: rgba(224,82,82,0.45); }
.tr-item.tr-item-project { border-left-color: rgba(255,196,0,0.45); }

.tr-footer {
    padding: 1.25rem 2rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    justify-content: flex-end;
}

.tr-continue-btn {
    background: #4a9eff;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 2rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.2s, transform 0.1s;
}

.tr-continue-btn:hover { background: #3a8ef0; }
.tr-continue-btn:active { transform: scale(0.98); }

@media (max-width: 540px) {
    .tr-stats-grid { grid-template-columns: 1fr; }
    .tr-panel { border-radius: 12px; }
    .tr-header { padding: 1.5rem 1.25rem 1rem; }
    .tr-body { padding: 1.25rem; }
    .tr-footer { padding: 1rem 1.25rem; }
}

/* ── Loading screen milestone steps ─────────────────────────────────────── */
.milestones-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 20px;
    text-align: left;
}
.milestone-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    transition: opacity 0.3s, color 0.3s;
}
.milestone-icon {
    width: 22px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.milestone-done   { color: #5ae65a; opacity: 1; }
.milestone-active { color: #ffe066; opacity: 1; font-weight: 600; }
.milestone-pending{ color: #666;    opacity: 0.55; }
.milestone-done .milestone-icon   { color: #5ae65a; }
.milestone-active .milestone-icon { color: #ffe066; animation: milestoneSpinner 1.2s linear infinite; }
@keyframes milestoneSpinner {
    0%  { opacity: 1; }
    50% { opacity: 0.4; }
    100%{ opacity: 1; }
}

/* ── Milestone sub-text and text-wrap ────────────────────────────────────── */
.milestone-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.milestone-sub {
    font-size: 0.78rem;
    opacity: 0.7;
    font-style: italic;
    animation: subTextFade 0.4s ease-in;
}
@keyframes subTextFade {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 0.7; transform: translateY(0); }
}

/* ── Parliament View ─────────────────────────────────────────────────────── */

.parl-view-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 0.5rem 1rem;
}

.parl-view-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.parl-view-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.parl-view-status {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.parl-view-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .parl-view-body { grid-template-columns: 1fr; }
}

.parl-left-col,
.parl-right-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Cards */
.parl-card {
    background: rgba(12, 14, 20, 0.88) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 12px !important;
    padding: 0.85rem 1rem;
    box-shadow: var(--shadow-lg);
}

.parl-card-label {
    font-size: var(--label-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--label-spacing);
    color: var(--label-color);
    margin-bottom: 0.6rem;
}

/* Seat Map */
.parl-seatmap-card { overflow: visible; }

.parl-seat-map {
    display: block;
    position: relative;
    background: rgba(0, 0, 0, 0.48);
    border-radius: 8px;
    padding: 0.5rem;
    overflow: visible;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

.parl-seat-map circle[data-party-idx]:hover {
    filter: url(#seat-glow);
}

/* Seat Tooltip */
.parl-seat-tooltip {
    position: fixed;
    background: rgba(15, 18, 26, 0.96);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-primary);
    pointer-events: none;
    z-index: 9999;
    min-width: 150px;
    box-shadow: var(--shadow);
    opacity: 0;
    transition: opacity 0.1s;
}

/* Party Legend */
.parl-legend-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 200px;
    overflow-y: auto;
}

.parl-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
}

.parl-legend-dot {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    flex-shrink: 0;
}

.parl-legend-name {
    font-size: 0.83rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parl-legend-you {
    font-size: 0.6rem;
    background: var(--primary-color);
    color: #fff;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 3px;
}

.parl-legend-ideol {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.parl-legend-seats {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 26px;
    text-align: right;
}

/* Bills */
.parl-bills-card { flex: 1; }

.parl-bills-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 320px;
    overflow-y: auto;
}

.parl-bill-row {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border-color);
}

.parl-bill-row:last-child { border-bottom: none; }

.parl-bill-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.parl-bill-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 0.15rem;
}

/* Bill Badges */
.parl-badge {
    white-space: nowrap;
    flex-shrink: 0;
}

.parl-badge-gray   { background: #6c757d; color: #fff; }
.parl-badge-blue   { background: #1971c2; color: #fff; }
.parl-badge-amber  { background: #e67700; color: #fff; }
.parl-badge-orange { background: #c45a00; color: #fff; }
.parl-badge-green  { background: #2f9e44; color: #fff; }
.parl-badge-red    { background: #c92a2a; color: #fff; }

/* Actions */
.parl-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.parl-action-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    justify-content: flex-start;
    padding: 0.45rem 0.7rem;
    white-space: nowrap;
}

.parl-action-btn i[data-feather] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Compact Parliament Sidebar Tab ──────────────────────────────────────── */

.parl-tab-body {
    padding: 0.25rem 0.25rem 0.5rem;
}

.parl-tab-hd {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.parl-tab-coalition {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parl-tab-bar-wrap { margin-bottom: 0.3rem; }

.parl-tab-bar {
    position: relative;
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: visible;
    background: rgba(255,255,255,0.08);
}

.parl-tab-bar-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: rgba(255,255,255,0.65);
    border-radius: 2px;
}

.parl-tab-seat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.parl-stat-chip {
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.1em 0.6em;
    display: inline-block;
}
.parl-stat-chip-majority {
    color: #4ade80;
    background: rgba(74,222,128,0.12);
    border: 1px solid rgba(74,222,128,0.2);
}
.parl-stat-chip-minority {
    color: #fbbf24;
    background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.2);
}

.parl-tab-bill-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8rem;
}

.parl-tab-bill-row:last-child { border-bottom: none; }

.parl-tab-bill-name {
    flex: 1;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
}

.parl-tab-open-btn {
    display: block;
    width: 100%;
    font-size: 0.8rem;
}

.parl-tab-bill-focus {
    background: rgba(25, 113, 194, 0.12);
    border-radius: 5px;
}

/* ── Active Focus Card (Parliament sidebar tab) ──────────────────────────── */

.parl-tab-focus-card {
    background: linear-gradient(135deg, rgba(25, 113, 194, 0.18) 0%, rgba(17, 17, 40, 0.75) 100%);
    border: 1px solid rgba(25, 113, 194, 0.4);
    border-radius: 8px;
    padding: 0.7rem 0.85rem 0.6rem;
    margin-bottom: 0.5rem;
}

.parl-tab-focus-hd {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #74c0fc;
    margin-bottom: 0.4rem;
}

.parl-tab-focus-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 0.4rem;
}

/* ── Bill Focus Highlight (Parliament View bill list) ────────────────────── */

.parl-bill-focus {
    background: rgba(25, 113, 194, 0.12);
    border: 1px solid rgba(25, 113, 194, 0.35);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    position: relative;
}

.parl-bill-focus-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #74c0fc;
    margin-bottom: 0.25rem;
}


.icon-sm {
    width: 13px;
    height: 13px;
}

/* ── Parliament View — grid column ratio ─────────────────────────────────── */

.parl-view-body {
    grid-template-columns: 3fr 2fr;
}

@media (max-width: 900px) {
    .parl-view-body { grid-template-columns: 1fr; }
}

/* ── Vote Bar (full) ─────────────────────────────────────────────────────── */

.parl-vote-bar-wrap {
    margin-top: 0.5rem;
}

.parl-vote-bar {
    position: relative;
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: visible;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0.45rem;
}

.parl-vote-seg {
    height: 100%;
    flex-shrink: 0;
    transition: width 0.4s ease;
}

.parl-vote-yes { background: #2f9e44; }
.parl-vote-wav { background: #e67700; }
.parl-vote-no  { background: #c92a2a; }

.parl-vote-yes:first-child { border-radius: 5px 0 0 5px; }
.parl-vote-no:last-child   { border-radius: 0 5px 5px 0; }

.parl-vote-needed-marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: rgba(255,255,255,0.85);
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(255,255,255,0.5);
    pointer-events: none;
}

.parl-vote-labels {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.parl-vlabel {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.parl-vlabel-yes { color: #69db7c; }
.parl-vlabel-wav { color: #ffa94d; }
.parl-vlabel-no  { color: #ff6b6b; }
.parl-vlabel-needed { color: var(--text-muted); margin-left: auto; font-size: 0.72rem; }

.parl-vdot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.parl-vdot-yes { background: #2f9e44; }
.parl-vdot-wav { background: #e67700; }
.parl-vdot-no  { background: #c92a2a; }

/* ── Vote Bar (mini — dashboard panel) ───────────────────────────────────── */

.parl-focus-vote-mini-wrap {
    margin-bottom: 0.35rem;
}

.parl-vote-bar-mini {
    position: relative;
    display: flex;
    height: 7px;
    border-radius: 4px;
    overflow: visible;
    background: rgba(255,255,255,0.07);
    margin-bottom: 0.28rem;
}

.parl-vote-labels-mini {
    display: flex;
    gap: 0.5rem;
    font-size: 0.7rem;
}

.parl-vlm-yes { color: #69db7c; }
.parl-vlm-wav { color: #ffa94d; }
.parl-vlm-no  { color: #ff6b6b; }

/* ── Outlook Badge ───────────────────────────────────────────────────────── */

.parl-outlook-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.12rem 0.5rem;
    border-radius: 10px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.parl-outlook-pass      { background: rgba(47,158,68,0.2);  color: #69db7c; border-color: rgba(47,158,68,0.4);   }
.parl-outlook-lean-pass { background: rgba(47,158,68,0.12); color: #8ce99a; border-color: rgba(47,158,68,0.28);  }
.parl-outlook-tossup    { background: rgba(230,119,0,0.18); color: #ffa94d; border-color: rgba(230,119,0,0.38);  }
.parl-outlook-lean-fail { background: rgba(201,42,42,0.12); color: #ff8787; border-color: rgba(201,42,42,0.28);  }
.parl-outlook-fail      { background: rgba(201,42,42,0.2);  color: #ff6b6b; border-color: rgba(201,42,42,0.4);   }
.parl-outlook-grid      { background: rgba(108,117,125,0.2);color: #adb5bd; border-color: rgba(108,117,125,0.4); }

/* ── Bill Type + Momentum Overlay Badges ────────────────────────────────── */

.parl-type-badge {
    display: inline-block;
    font-size: 0.63rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.parl-type-gov  { background: rgba(25,113,194,0.22); color: #74c0fc; }
.parl-type-opp  { background: rgba(230,119,0,0.2);   color: #ffa94d; }
.parl-type-conf { background: rgba(201,42,42,0.22);  color: #ff8787; }
.parl-policy-area-badge { background: rgba(100,70,180,0.2); color: #b197fc; }

/* Momentum overlay badge — same ghost-chip family as .parl-type-badge */
.parl-seat-map { position: relative; }

.parl-mom-overlay {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    font-size: 0.63rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

.parl-mom-adv { background: var(--color-positive-bg); color: var(--color-positive); border: 1px solid var(--color-positive-border); }
.parl-mom-grd { background: var(--color-mid-bg);      color: var(--color-mid);      border: 1px solid var(--color-mid-border);      }
.parl-mom-col { background: var(--color-negative-bg); color: var(--color-negative); border: 1px solid var(--color-negative-border); }


/* ── Focus Details Card (Left Column) ────────────────────────────────────── */

.parl-focus-details-card {
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.parl-focus-details-hd {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.parl-focus-details-badges {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.parl-focus-details-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}

.parl-focus-details-summary {
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.parl-focus-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Section within focus card */
.parl-focus-section {
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}

.parl-focus-section-votes { }

.parl-focus-vote-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.1rem;
}

.parl-section-label {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--label-color);
    margin-bottom: 0.45rem;
    display: block;
}

/* ── Articles List ───────────────────────────────────────────────────────── */

.parl-articles-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.parl-article-row {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
}

.parl-article-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.parl-article-detail {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.35;
    margin-bottom: 0.35rem;
}

.parl-article-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

/* ── Effect Chip ─────────────────────────────────────────────────────────── */

/* .parl-eff-chip — retired; parliament bill effects now use .narrative-chip via buildStatDeltaChip */

/* ── Linked Chips ────────────────────────────────────────────────────────── */

.parl-linked-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

.parl-linked-chip {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    white-space: nowrap;
}

.parl-linked-issue   { background: rgba(23,162,184,0.15); color: #4dc8db; border: 1px solid rgba(23,162,184,0.3); }
.parl-linked-promise { background: rgba(111,66,193,0.15); color: #b49af0; border: 1px solid rgba(111,66,193,0.3); }

/* ── Chamber Vote Section (below seat map in right panel) ────────────────── */

.parl-chamber-vote-wrap {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.parl-vote-now-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(47,158,68,0.45);
    background: rgba(47,158,68,0.15);
    color: #69db7c;
    transition: var(--transition-fast);
}

.parl-vote-now-btn:hover {
    background: rgba(47,158,68,0.28);
    border-color: rgba(47,158,68,0.7);
    color: #8ce99a;
}

/* ── Vote Stance Labels in Party Legend ──────────────────────────────────── */

.parl-legend-stance {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.08rem 0.35rem;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.parl-stance-yes { background: rgba(47,158,68,0.18);  color: #69db7c; }
.parl-stance-wav { background: rgba(230,119,0,0.18); color: #ffa94d; }
.parl-stance-no  { background: rgba(201,42,42,0.18);  color: #ff6b6b; }

/* ── Action Buttons Row (inside left focus panel) ────────────────────────── */

.parl-focus-actions-row .parl-actions-grid {
    grid-template-columns: repeat(3, 1fr);
}

.parl-focus-actions-row .parl-actions-grid-primary {
    grid-template-columns: minmax(8rem, 0.7fr) minmax(12rem, 1.3fr);
}

.parl-action-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-secondary);
    font-size: 0.79rem;
    font-weight: 600;
    border-radius: 7px;
    padding: 0.4rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.parl-action-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.22);
    color: var(--text-primary);
}

.parl-action-btn i[data-feather] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Active tab — matches .story-actions .action-btn.active */
.parl-action-btn.active {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

.parl-action-btn.active:hover {
    background: var(--primary-color) !important;
    opacity: 0.9;
}

.parl-action-btn-danger:hover {
    color: #ff9b9b;
    border-color: rgba(239,68,68,.42);
    background: rgba(127,29,29,.2);
}

.parl-measure-kind {
    color: rgba(203,213,225,.68);
    font-size: .64rem;
    font-weight: 760;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.parl-schedule-state {
    color: rgba(148,163,184,.7);
    font-size: .64rem;
    font-weight: 760;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.parl-schedule-state.is-live { color: #7dd3fc; }

/* ── Focus body (swappable bill content / well) ──────────────────────────── */

.parl-focus-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Separator above action tabs */
.parl-focus-actions-row {
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}

/* ── Panel Well (Debate / Deals / Amend) ─────────────────────────────────── */

.parl-focus-well {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: rgba(0, 0, 0, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 0.85rem 0.9rem;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

.parl-well-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s;
    flex-shrink: 0;
}

.parl-well-back:hover {
    color: var(--text-primary);
}

.parl-well-back i[data-feather] {
    width: 13px;
    height: 13px;
}

.parl-well-inner {
    overflow-y: auto;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 2px;
}

/* First section inside a well has no top border — it's already at the top of the dark container */
.parl-well-inner .parl-focus-section:first-child {
    border-top: none;
    padding-top: 0;
}

/* ── Agenda Card (clickable bill row in legislative agenda) ──────────────── */

.parl-agenda-card {
    padding: 0.65rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.parl-agenda-card:hover {
    background: rgba(255,255,255,0.04);
}

.parl-agenda-card + .parl-agenda-card {
    border-top: 1px solid rgba(255,255,255,0.05);
}

.parl-agenda-card-hd {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.parl-agenda-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.parl-agenda-card-summary {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-bottom: 0.3rem;
}

.parl-agenda-mom {
    position: static;
    transform: none;
    margin-left: auto;
    font-size: 0.6rem;
    padding: 0.1rem 0.45rem;
}

/* ── Agenda Queue Row (upcoming / NPC-proposed bills) ────────────────────── */

.parl-agenda-queue-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.78rem;
    color: var(--text-muted);
}

.parl-agenda-queue-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

/* ── Projected Effects section ───────────────────────────────────────────── */

.parl-proj-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

/* ── What's At Stake ─────────────────────────────────────────────────────── */

.parl-stakes-section {
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}

.parl-stakes-toggle {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.parl-stakes-toggle::-webkit-details-marker { display: none; }

details[open] .parl-stakes-toggle svg { transform: rotate(180deg); }
details .parl-stakes-toggle svg { transition: transform 0.2s ease; }

.parl-stakes-body {
    display: flex;
    gap: 1rem;
    margin-top: 0.55rem;
    flex-wrap: wrap;
}

.parl-stakes-col {
    flex: 1;
    min-width: 120px;
}

.parl-stakes-col-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.parl-stakes-col ul {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.parl-stakes-col li { margin-bottom: 0.2rem; }

/* ── Recent History ──────────────────────────────────────────────────────── */

.parl-history-item {
    font-size: 0.77rem;
    color: var(--text-secondary);
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.35;
}

.parl-history-item:last-child { border-bottom: none; }

/* ── Empty State ─────────────────────────────────────────────────────────── */

.parl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    gap: 0.6rem;
}

.parl-well-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    gap: 0.6rem;
    max-height: none;
}

.parl-empty-icon svg {
    width: 32px; height: 32px;
    color: var(--text-muted);
    opacity: 0.5;
}

.parl-empty-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.parl-empty-body {
    font-size: 0.8rem;
    color: var(--text-muted);
    max-width: 280px;
    line-height: 1.45;
}

/* ── Action Row ──────────────────────────────────────────────────────────── */

.parl-action-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.25rem 0.25rem;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.parl-act-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    border-width: 1px;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.parl-act-btn:hover { transform: translateY(-1px); }

.parl-act-debate {
    background: rgba(25,113,194,0.18);
    border-color: rgba(25,113,194,0.45);
    color: #74c0fc;
}
.parl-act-debate:hover {
    background: rgba(25,113,194,0.32);
    border-color: rgba(25,113,194,0.7);
    color: #a5d8ff;
}

.parl-act-deals {
    background: rgba(111,66,193,0.15);
    border-color: rgba(111,66,193,0.38);
    color: #b49af0;
}
.parl-act-deals:hover {
    background: rgba(111,66,193,0.28);
    border-color: rgba(111,66,193,0.6);
    color: #d0bfff;
}

.parl-act-amend {
    background: rgba(230,119,0,0.15);
    border-color: rgba(230,119,0,0.38);
    color: #ffa94d;
}
.parl-act-amend:hover {
    background: rgba(230,119,0,0.28);
    border-color: rgba(230,119,0,0.6);
    color: #ffd28f;
}

.parl-act-vote {
    background: rgba(47,158,68,0.18);
    border-color: rgba(47,158,68,0.45);
    color: #69db7c;
    margin-left: auto;
    font-size: 0.85rem;
}
.parl-act-vote:hover {
    background: rgba(47,158,68,0.32);
    border-color: rgba(47,158,68,0.7);
    color: #8ce99a;
}

@media (max-width: 600px) {
    .parl-action-row { gap: 0.4rem; }
    .parl-act-vote  { margin-left: 0; }
    .parl-act-btn   { flex: 1; justify-content: center; }
}

/* ── Action Stub Panel ───────────────────────────────────────────────────── */

.parl-stub-panel {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-top: 0.75rem;
}

.parl-stub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.parl-stub-title {
    display: flex;
    align-items: center;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.parl-stub-close {
    background: none;
    border: none;
    padding: 0.2rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.parl-stub-close:hover { color: var(--text-primary); }

.parl-stub-body {
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0.85rem;
}

.parl-stub-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.parl-stub-cta {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(25,113,194,0.5);
    background: rgba(25,113,194,0.2);
    color: #74c0fc;
    display: flex;
    align-items: center;
    transition: var(--transition-fast);
}

.parl-stub-cta:hover {
    background: rgba(25,113,194,0.35);
    color: #a5d8ff;
}

.parl-stub-cta-danger {
    border-color: rgba(201,42,42,0.5);
    background: rgba(201,42,42,0.2);
    color: #ff8787;
}

.parl-stub-cta-danger:hover {
    background: rgba(201,42,42,0.35);
    color: #ffa8a8;
}

.parl-stub-dismiss {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    transition: var(--transition-fast);
}

.parl-stub-dismiss:hover {
    color: var(--text-secondary);
    border-color: rgba(255,255,255,0.25);
}

/* ── Economy Tab ─────────────────────────────────────────────────────────── */

.econ-tab-body {
    padding: 0.5rem 0.25rem;
    font-size: 0.82rem;
}

.econ-section-hd {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.2rem;
}

.econ-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.econ-stat-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    min-width: 0;
}

.econ-stat-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.econ-stat-value {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 0.1em 0.55em;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.15rem;
}
.econ-stat-value.econ-val-positive {
    color: #4ade80;
    background: rgba(74,222,128,0.12);
    border: 1px solid rgba(74,222,128,0.2);
}
.econ-stat-value.econ-val-negative {
    color: #f87171;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.2);
}
.econ-stat-value.econ-val-warn {
    color: #fbbf24;
    background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.2);
}

.econ-budget-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.econ-budget-item {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    min-width: 0;
}

.econ-budget-label {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.econ-budget-amount {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 0.1em 0.5em;
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.econ-budget-amount.econ-val-positive {
    color: #4ade80;
    background: rgba(74,222,128,0.12);
    border: 1px solid rgba(74,222,128,0.2);
}
.econ-budget-amount.econ-val-warn {
    color: #fbbf24;
    background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.2);
}

.econ-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.4rem;
}

.econ-balance-amt {
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 0.1em 0.55em;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.econ-balance-amt.text-success {
    color: #4ade80;
    background: rgba(74,222,128,0.12);
    border: 1px solid rgba(74,222,128,0.2);
}
.econ-balance-amt.text-danger {
    color: #f87171;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.2);
}

.econ-bars-wrap {
    margin-bottom: 0.3rem;
}

.econ-bar-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.28rem;
}

.econ-bar-label {
    width: 90px;
    flex-shrink: 0;
    font-size: 0.73rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.econ-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.econ-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.econ-bar-pct {
    width: 36px;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: right;
}

.econ-policies-list {
    margin-bottom: 0.3rem;
}

.econ-policy-row {
    padding: 0.28rem 0;
    border-bottom: 1px solid var(--border-color);
}

.econ-policy-row:last-child {
    border-bottom: none;
}

.econ-policy-title {
    font-size: 0.78rem;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.econ-policy-effect {
    font-size: 0.7rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.econ-warn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.econ-warn-chip {
    font-size: 0.7rem;
    padding: 0.18rem 0.5rem;
    border-radius: 12px;
    border: 1px solid;
    background: rgba(0,0,0,0.2);
    font-weight: 500;
    white-space: nowrap;
}

.econ-briefing-btn {
    display: block;
    width: 100%;
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* ── Map Room ─────────────────────────────────────────────────────────── */

/* ── Map overlay elements ────────────────────────────────────────────── */

/* Hover tooltip that follows the cursor */
.map-hover-tip {
    position: absolute;
    pointer-events: none;
    z-index: 20;
    background: rgba(12, 14, 20, 0.92);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 0.75rem;
    color: #e2e8f0;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
}

/* Right-side detail panel */
.map-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: clamp(360px, 28vw, 540px);
    max-width: 100%;
    z-index: 15;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    background: rgba(12, 14, 20, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-left: 1px solid rgba(255,255,255,0.11);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.map-detail-panel.open {
    transform: translateX(0);
}

.map-detail-topbar {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 8px;
    padding: calc(var(--tab-bar-h) + 30px) 14px 14px 16px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.09);
}

/* On visual focus panels the selector floats over the artwork instead of
   reserving a separate opaque band above it. */
.map-detail-panel--hero .map-detail-topbar {
    background: transparent;
    border-bottom: 0;
    left: 0;
    padding-bottom: 24px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
    pointer-events: none;
}

.map-detail-panel--hero .map-detail-tabs:not(:empty),
.map-detail-panel--hero .map-detail-close {
    pointer-events: auto;
}

.map-detail-selection {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.map-detail-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow: hidden;
    padding: 0;
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    scrollbar-width: none;
    width: 100%;
}
.map-detail-tabs::-webkit-scrollbar { display: none; }
.map-detail-tabs:empty { display: none; }

.map-detail-tabs.is-multiline {
    align-content: flex-start;
    flex-wrap: wrap;
    max-height: 88px;
}

.map-detail-tabs.is-multiline .map-tab-pill:not(.tab-player):not(.tab-city) {
    flex: 1 1 64px;
    min-width: 30px;
}

.map-detail-panel--no-tabs .map-detail-selection {
    align-self: center;
    gap: 0;
}

.map-tab-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    flex: 0 1 auto;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: #94a3b8;
    -webkit-backdrop-filter: blur(5px) brightness(0.68);
    backdrop-filter: blur(5px) brightness(0.68);
    box-shadow: inset 0 0 0 100px rgba(7,10,16,0.26), inset 0 1px 0 rgba(255,255,255,0.055);
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    transition: background 0.14s, color 0.14s, border-color 0.14s;
    white-space: nowrap;
    letter-spacing: 0.02em;
    max-width: 180px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.map-tab-pill:hover { background: rgba(255,255,255,0.11); color: #e2e8f0; }
.map-tab-pill.active { color: #fff; }
.map-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-tab-pill.tab-city   { border-color: rgba(251,191,36,0.5);  }
.map-tab-pill.tab-city.active   { background: rgba(251,191,36,0.18); border-color: #fbbf24; color: #fde68a; }
.map-tab-pill.tab-player { border-color: rgba(59,130,246,0.5); }
.map-tab-pill.tab-player.active { background: rgba(59,130,246,0.18); border-color: #3b82f6; color: #93c5fd; }
.map-tab-pill.tab-issue  { border-color: rgba(239,68,68,0.5);  }
.map-tab-pill.tab-issue.active  { background: rgba(239,68,68,0.18);  border-color: #ef4444; color: #fca5a5; }
.map-tab-pill.tab-strength { border-color: rgba(168,85,247,0.55); }
.map-tab-pill.tab-strength.active { background: rgba(168,85,247,0.2); border-color: #a855f7; color: #d8b4fe; }
.map-tab-pill.tab-event  { border-color: rgba(234,179,8,0.5);  }
.map-tab-pill.tab-event.active  { background: rgba(234,179,8,0.18);  border-color: #eab308; color: #fef08a; }
.map-tab-pill.tab-dossier{ border-color: rgba(34,211,238,0.5); }
.map-tab-pill.tab-dossier.active{ background: rgba(34,211,238,0.18); border-color: #22d3ee; color: #a5f3fc; }
.map-tab-pill.tab-country{ border-color: rgba(148,163,184,0.4);}
.map-tab-pill.tab-country.active{ background: rgba(148,163,184,0.15);border-color: #94a3b8; color: #e2e8f0; }
.map-tab-pill.tab-place  { border-color: rgba(148,163,184,0.4);}
.map-tab-pill.tab-place.active  { background: rgba(148,163,184,0.15);border-color: #94a3b8; color: #e2e8f0; }

.map-detail-close {
    align-items: center;
    background: transparent;
    border: 0;
    display: inline-flex;
    flex: 0 0 28px;
    justify-content: center;
    color: rgba(248, 250, 252, 0.94);
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: none;
    text-shadow: 0 2px 12px rgba(0,0,0,0.95);
    transition: color 0.15s, transform 0.15s, opacity 0.15s;
}
.map-detail-close:hover {
    background: transparent;
    color: #f8fafc;
    opacity: 1;
    transform: scale(1.08);
}

.map-detail-panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.map-panel-focus-shell {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.map-panel-focus-shell .mandate-focus-inner {
    height: 100%;
}

/* Map issue/strength details share the player's content horizon. Their
   canonical Overview panels may grow upward in a full column, but here the
   selector needs a stable, unobstructed artwork band above the scroll area. */
.map-panel-focus-shell .mandate-focus-overlay {
    box-sizing: border-box;
    flex: 0 0 calc(100% - 190px);
    max-height: calc(100% - 190px);
    padding: 2rem 16px 18px;
}
.map-panel-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
    min-height: 0;
}
.map-panel-footer {
    flex-shrink: 0;
    padding: 10px 12px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* The responsive shell—not a raw width query—decides when this stops being a
   side panel. A narrow desktop app window uses the compact shell and should
   retain the denser desktop treatment; only the true mobile shell takes over
   the viewport. */
body.game-body[data-shell-mode="mobile"] #mapBackground .map-detail-panel {
    border-left: 0;
    max-width: none;
    width: 100vw;
}

body.game-body[data-shell-mode="mobile"] .map-panel-footer {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
}

/* The canonical National Overview focus view is deliberately cinematic when
   it owns a full detail column. Inside a desktop map side panel it needs a
   smaller type scale and tighter gutters so the map remains the primary
   surface. */
body.game-body:not([data-shell-mode="mobile"]) .map-panel-focus-shell .mandate-focus-title {
    font-size: 1.15rem;
    line-height: 1.22;
}

body.game-body:not([data-shell-mode="mobile"]) .map-panel-focus-shell .mandate-focus-desc {
    font-size: 0.78rem;
    line-height: 1.55;
}

/* Panel content styles */
.map-panel-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 2px;
}
.map-panel-value {
    font-size: 0.82rem;
    color: #cbd5e1;
    margin-bottom: 10px;
}
.map-panel-row {
    margin-bottom: 10px;
}
.map-panel-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 4px;
    line-height: 1.25;
}
.map-panel-subtitle {
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 12px;
    line-height: 1.4;
}
.map-panel-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.55;
    margin-bottom: 14px;
}
.map-panel-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.13);
    color: #94a3b8;
    margin-bottom: 4px;
    margin-right: 4px;
}
.map-panel-badge.sev-crisis, .map-panel-badge.sev-Critical, .map-panel-badge.sev-Catastrophic { border-color: #ef4444; color: #ef4444; }
.map-panel-badge.sev-major, .map-panel-badge.sev-High, .map-panel-badge.sev-Major { border-color: #f97316; color: #f97316; }
.map-panel-badge.sev-moderate, .map-panel-badge.sev-Moderate { border-color: #facc15; color: #facc15; }
.map-panel-badge.sev-minor, .map-panel-badge.sev-Low, .map-panel-badge.sev-Minor { border-color: #4ade80; color: #4ade80; }
.map-panel-badge.badge-source { border-color: rgba(148,163,184,0.35); color: #94a3b8; background: rgba(148,163,184,0.08); }
.map-panel-badge.badge-cat    { border-color: rgba(34,211,238,0.35);  color: #67e8f9; background: rgba(34,211,238,0.07); }
.map-panel-badge.badge-status { border-color: rgba(167,139,250,0.35); color: #c4b5fd; background: rgba(167,139,250,0.07); }
.map-city-issue-card {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.82);
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    line-height: 1.3;
}
.map-city-issue-card:last-child { border-bottom: none; }

/* Activity section header */
.map-panel-activity-hd {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.35);
    margin: 14px 0 7px;
}
.map-panel-activity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(255,255,255,0.1);
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
}

/* Story card (player panel) */
.map-story-card {
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.22);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.map-story-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #bfdbfe;
    margin-bottom: 3px;
    line-height: 1.3;
}
.map-story-card-sub {
    font-size: 0.74rem;
    color: #60a5fa;
    font-style: italic;
    line-height: 1.4;
}

/* Hover tooltip two-line */
.map-tip-name {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 0.78rem;
    display: block;
}
.map-tip-ctx {
    font-size: 0.7rem;
    color: rgba(148,163,184,0.8);
    display: block;
    margin-top: 2px;
}
.map-panel-action-btn {
    display: block;
    width: 100%;
    padding: 7px 12px;
    margin-bottom: 6px;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, color 0.15s;
    border: 1px solid rgba(255,255,255,0.13);
    background: rgba(255,255,255,0.05);
    color: #cbd5e1;
}
.map-panel-action-btn:hover {
    background: rgba(255,255,255,0.11);
    color: #f1f5f9;
}
.map-panel-action-btn.primary {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.4);
    color: #93c5fd;
}
.map-panel-action-btn.primary:hover {
    background: rgba(59,130,246,0.28);
    color: #bfdbfe;
}
.map-panel-rel-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.08);
    margin: 6px 0 14px;
    position: relative;
    overflow: visible;
}
.map-panel-rel-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

/* Foreign country panel — uses the same relationship vocabulary as Actors. */
.map-country-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}
.map-country-flag,
.map-country-flag-placeholder {
    width: 48px;
    height: 32px;
    flex: 0 0 48px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.05);
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.map-country-identity-text { min-width: 0; }
.map-country-name {
    margin: 0;
    white-space: normal;
    line-height: 1.18;
}
.map-country-government { margin: 3px 0 0; }
.map-country-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 0 12px;
    border-top: 1px solid rgba(255,255,255,0.065);
    border-bottom: 1px solid rgba(255,255,255,0.065);
}
.map-country-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.map-country-meta-label {
    color: rgba(148,163,184,0.42);
    font-size: 0.57rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.map-country-meta-value {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #cbd5e1;
    font-size: 0.69rem;
    font-weight: 650;
    min-width: 0;
}
.map-country-meta-value svg {
    width: 11px;
    height: 11px;
    color: #7c9ac2;
    flex-shrink: 0;
}
.map-country-bars {
    margin: 12px 0 11px;
    gap: 6px;
}
.map-country-bars .char-bar-label { width: 54px; }
.map-country-description {
    margin-top: 0;
    padding-top: 11px;
    border-top: 1px solid rgba(255,255,255,0.065);
}
.map-country-assessments {
    margin-top: 12px;
    padding-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.065);
}
.map-country-assessment-row {
    display: grid;
    align-items: center;
    gap: 8px;
    grid-template-columns: 14px minmax(0, 1fr);
    min-height: 29px;
    padding: 7px 9px;
    margin: 4px 0;
    border-radius: 7px;
    background: rgba(15,23,42,0.48);
    color: #dbeafe;
    font-size: 0.72rem;
}
.map-country-assessment-row .map-entity-icon {
    height: 13px;
    width: 13px;
}
.map-country-assessment-row.unknown {
    color: #64748b;
    border: 1px dashed rgba(100,116,139,0.22);
    background: rgba(15,23,42,0.24);
}
.map-country-assessment-icon--unknown {
    align-items: center;
    border: 1px solid rgba(100,116,139,0.46);
    border-radius: 50%;
    color: #8290a4;
    display: inline-flex;
    font-size: 0.62rem;
    font-weight: 800;
    height: 13px;
    justify-content: center;
    width: 13px;
}
.map-country-assessment-heading {
    align-items: center;
    display: flex;
    gap: 6px;
}
.map-country-assessment-heading .map-entity-icon {
    height: 12px;
    width: 12px;
}
.map-country-organizations {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid rgba(255,255,255,0.065);
}
.map-country-organizations-heading {
    align-items: center;
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.map-country-organization-category + .map-country-organization-category {
    margin-top: 9px;
}
.map-country-organization-category-heading {
    align-items: center;
    color: rgba(148,163,184,0.62);
    display: flex;
    font-size: 0.58rem;
    font-weight: 800;
    justify-content: space-between;
    letter-spacing: 0.09em;
    padding: 0 3px 4px;
    text-transform: uppercase;
}
.map-country-organization-category-heading small {
    color: rgba(148,163,184,0.4);
    font-size: 0.56rem;
}
.map-country-organization-row {
    align-items: center;
    background: rgba(15,23,42,0.44);
    border: 0;
    border-radius: 7px;
    color: #dbeafe;
    cursor: pointer;
    display: grid;
    gap: 8px;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    margin: 4px 0;
    min-height: 43px;
    padding: 7px 9px 7px 7px;
    text-align: left;
    transition: background 140ms ease, transform 140ms ease;
    width: 100%;
}
.map-country-organization-row:hover,
.map-country-organization-row:focus-visible {
    background: rgba(30,64,105,0.5);
    outline: none;
    transform: translateX(2px);
}
.map-country-organization-swatch {
    align-self: stretch;
    background: var(--organization-color);
    border-radius: 99px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--organization-color) 35%, transparent);
}
.map-country-organization-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.map-country-organization-copy strong {
    color: #dbeafe;
    font-size: 0.69rem;
    font-weight: 720;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-country-organization-copy small {
    color: #718198;
    font-size: 0.58rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-country-organization-arrow {
    color: rgba(125,181,255,0.56);
    font-size: 1rem;
}
.map-country-organization-empty {
    color: rgba(100,116,139,0.62);
    font-size: 0.62rem;
    padding: 4px 8px 6px;
}
.map-country-activity > div:empty { display: none; }

/* Tab pill truncation — long issue/event titles don't overflow the strip */
.map-tab-pill {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Location identity is never expendable. Crowded stacks may collapse issue,
   strength, event, and dossier labels, but the player and city pills keep
   their complete labels while the remaining flex items absorb the squeeze. */
.map-tab-pill.tab-player,
.map-tab-pill.tab-city {
    flex: 0 0 auto;
    max-width: none;
}

.map-tab-pill.tab-player .map-tab-label,
.map-tab-pill.tab-city .map-tab-label {
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
}

/* Hero image block — sits at top of panel body, edge-to-edge */
.map-panel-hero {
    height: 160px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.map-carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
    will-change: transform;
}
.map-carousel-slide {
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.map-carousel-city-label {
    bottom: 27px;
    color: rgba(255,255,255,0.78);
    font-size: 0.68rem;
    font-weight: 700;
    left: 12%;
    letter-spacing: 0.06em;
    position: absolute;
    right: 12%;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    text-transform: uppercase;
    z-index: 2;
}
.map-carousel-dots {
    align-items: center;
    bottom: 10px;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 7;
}
.map-city-art-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.map-panel-hero-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(10,12,18,0.97), transparent);
    pointer-events: none;
}

/* City focus — full-bleed counterpart to the National Overview detail view. */
.map-city-focus-inner {
    display: flex;
    flex-direction: column;
    height: calc(100% + 28px);
    isolation: isolate;
    justify-content: flex-end;
    margin: -14px;
    overflow: hidden;
    position: relative;
    width: calc(100% + 28px);
}
.map-city-focus-image,
.map-city-focus-fallback {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
    z-index: -2;
}
.map-city-focus-image {
    object-fit: cover;
    object-position: center;
}
.map-city-focus-fallback {
    background: linear-gradient(175deg,#0d1520 0%,#162030 28%,#1e3545 55%,#152840 80%,#0c1825 100%);
}
.map-city-focus-fallback svg {
    height: 100%;
    width: 100%;
}
.map-city-focus-scrim {
    background: linear-gradient(
        to bottom,
        rgba(6, 9, 15, 0.02) 0%,
        rgba(6, 9, 15, 0.10) 24%,
        rgba(6, 9, 15, 0.58) 48%,
        rgba(7, 10, 16, 0.94) 66%,
        #090c12 82%
    );
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}
.map-city-focus-content {
    box-sizing: border-box;
    flex: 0 0 calc(100% - 260px);
    max-height: calc(100% - 260px);
    min-height: 0;
    overflow-y: auto;
    padding: 2rem 14px 18px;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
    scrollbar-width: thin;
    width: 100%;
}
.map-city-focus-content::-webkit-scrollbar { width: 4px; }
.map-city-focus-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
}
.map-city-focus-title {
    font-size: 1.3rem;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0,0,0,0.75);
}
.map-city-focus-subtitle {
    color: #94a3b8;
    margin-bottom: 12px;
}
.map-city-focus-desc {
    color: #b2bfd2;
    font-size: 0.82rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* The country carousel also absorbs the old selector-band height. Its artwork
   still reaches the panel top, while the country information begins where it
   did before the selector became an overlay. */
.map-detail-panel[data-active-type="country"] .map-panel-scroll-area > .map-panel-hero {
    height: 260px;
}

/* Activity envelope — wraps payload chip strip + card body */
.map-activity-envelope {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    margin-bottom: 9px;
    overflow: hidden;
    cursor: pointer;
}
.map-activity-strip {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.025);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.map-activity-body {
    padding: 9px 11px 10px;
}

/* Player panel — shared Story metadata/payload chips + canonical live cards. */
.map-you-location-title::before {
    content: '\2022';
    color: #3b82f6;
    margin-right: 7px;
    text-shadow: 0 0 8px rgba(59,130,246,0.75);
}
.map-you-focus-content {
    flex-basis: calc(100% - 190px);
    max-height: calc(100% - 190px);
}
.map-you-section-hd {
    margin-top: 18px;
}
.map-current-story-card {
    position: relative;
    padding: 14px 15px 15px;
    border: 1px solid rgba(96,165,250,0.36);
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0, rgba(59,130,246,0.14), transparent 42%),
        linear-gradient(145deg, rgba(30,58,108,0.3), rgba(15,23,42,0.5));
    box-shadow: inset 3px 0 0 rgba(96,165,250,0.55), 0 8px 24px rgba(0,0,0,0.16);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.map-current-story-card:hover,
.map-current-story-card:focus-visible {
    border-color: rgba(96,165,250,0.7);
    background:
        radial-gradient(circle at 100% 0, rgba(59,130,246,0.2), transparent 44%),
        linear-gradient(145deg, rgba(30,64,175,0.32), rgba(15,23,42,0.58));
    transform: translateY(-1px);
    outline: none;
}
.map-current-story-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.map-current-story-card .turn-datachip,
.map-current-story-card .msg-time-chip,
.map-payload-activity .turn-datachip {
    margin-bottom: 7px;
}
.map-current-story-card.is-streaming {
    cursor: progress;
}
.map-current-story-loading-title,
.map-current-story-loading-subtitle {
    line-height: 1;
}
.map-current-story-loading-title .skeleton-bar {
    width: min(86%, 270px);
    height: 18px;
    border-radius: 7px;
}
.map-current-story-loading-subtitle {
    margin-top: 9px;
}
.map-current-story-loading-subtitle .skeleton-bar {
    width: min(72%, 225px);
    height: 11px;
    border-radius: 6px;
}
.map-current-story-title {
    color: #e8f2ff;
    font-size: 1.06rem;
    font-weight: 780;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.map-current-story-subtitle {
    color: #7db8ff;
    font-size: 0.79rem;
    font-style: italic;
    line-height: 1.5;
    margin-top: 7px;
}
.map-payload-activity .map-activity-strip {
    align-items: center;
    padding-top: 8px;
    padding-bottom: 1px;
}
.map-payload-activity .map-activity-strip > .issue-progress-section,
.map-payload-activity .map-activity-strip > .strength-progress-section {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 7px;
}
.map-payload-activity .map-activity-strip > .promise-progress-chips,
.map-payload-activity .map-activity-strip > .world-update-chips {
    margin-bottom: 7px;
}
.map-activity-date-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 13px 1px 7px;
    color: rgba(148,163,184,0.72);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}
.map-activity-date-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(to right, rgba(148,163,184,0.22), transparent);
}
.map-activity-date-beat {
    color: rgba(203,213,225,0.82);
}
.map-activity-date-label {
    color: rgba(100,116,139,0.88);
}
.map-activity-canonical-card {
    padding: 9px;
}
.map-activity-canonical-card > .ip-card,
.map-activity-canonical-card > .char-item,
.map-activity-canonical-card > .dossier-item,
.map-activity-canonical-card > .lore-card {
    margin: 0;
}
.map-activity-live-card--missing {
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 650;
    padding: 3px 2px;
}

/* Tinted action button variants */
.map-panel-action-btn.btn-red {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.38);
    color: #fca5a5;
}
.map-panel-action-btn.btn-red:hover {
    background: rgba(239,68,68,0.22);
}
.map-panel-action-btn.btn-green {
    background: rgba(16,185,129,0.14);
    border-color: rgba(16,185,129,0.4);
    color: #6ee7b7;
}
.map-panel-action-btn.btn-green:hover {
    background: rgba(16,185,129,0.24);
}

/* Carousel dot button */
.map-carousel-dot {
    height: 6px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.72;
    transform: scale(1);
    transition:
        width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.42s ease,
        opacity 0.42s ease,
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    background: rgba(255,255,255,0.25);
    width: 6px;
}
.map-carousel-dot.active {
    background: rgba(255,255,255,0.82);
    opacity: 1;
    transform: scaleY(1.08);
    width: 16px;
}
.map-cluster-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.map-cluster-item:hover { background: rgba(255,255,255,0.09); }
.map-cluster-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Floating zoom controls */
.map-float-controls {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 14;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: right 0.26s cubic-bezier(.2,.8,.2,1), opacity 0.18s ease, visibility 0.18s ease;
}
.map-float-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(7, 12, 22, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #d8e2f0;
    font-size: 1.2rem;
    font-weight: 650;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s, color 0.15s, border-color 0.15s;
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    box-shadow: 0 8px 24px rgba(0,0,0,0.24), inset 0 1px rgba(255,255,255,0.04);
    line-height: 1;
}
.map-float-btn:hover {
    background: rgba(28, 43, 67, 0.94);
    border-color: rgba(96, 165, 250, 0.42);
    color: #fff;
    transform: translateY(-1px);
}

.map-detail-panel.open ~ .map-float-controls {
    right: calc(clamp(360px, 28vw, 540px) + 14px);
}

/* Layers dropdown wrapper */
/* <details> wrapper */
/* Outer control group: fixed anchor for the layer tabs + icons dropdown */
.map-controls-group {
    position: fixed;
    top: calc(var(--map-ui-top) + 14px);
    left: 16px;
    z-index: 15;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.2s ease;
}

.map-mobile-controls-toggle,
.map-mobile-controls-backdrop,
.map-mobile-sheet-header {
    display: none;
}

/* Layer mode tab-bar — pill containing Political / Geography buttons */
.map-layer-tabs {
    display: flex;
    flex-direction: column;
    width: 230px;
    background: rgba(7, 12, 22, 0.60);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 13px;
    padding: 4px;
    backdrop-filter: blur(16px) saturate(135%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.28), inset 0 1px rgba(255,255,255,0.04);
    gap: 2px;
    flex-shrink: 0;
}

.map-layer-tab {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: flex-start;
    min-height: 34px;
    width: 100%;
    padding: 7px 12px;
    border-radius: 9px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    user-select: none;
    line-height: 1.4;
}

.map-layer-tab.active {
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 5px 16px rgba(37,99,235,0.34), inset 0 1px rgba(255,255,255,0.18);
}

.map-layer-tab:not(.active):hover {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
}
.map-layer-tab:focus,
.map-layers-btn:focus { outline: none; }
.map-layer-tab:focus-visible,
.map-layers-btn:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

.map-layer-tab-icon {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 16px;
}

/* Icons <details> — positioned relative inside the flex row */
.map-layers-wrap {
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    display: block; /* override default list-item on <details> */
    width: 230px;
}
.map-layers-wrap.is-open {
    /* The menu overlaps the following layer-specific card on desktop. Give
       the open control its own higher stacking level so those later siblings
       cannot paint over its dropdown contents. */
    z-index: 2;
}

.map-layers-btn {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: flex-start;
    min-height: 42px;
    width: 100%;
    padding: 8px 11px 8px 13px;
    border-radius: 13px;
    background: rgba(7, 12, 22, 0.60);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.28), inset 0 1px rgba(255,255,255,0.04);
    letter-spacing: 0.03em;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    user-select: none;
}
.map-layers-btn:hover,
.map-layers-wrap.is-open .map-layers-btn {
    background: rgba(18, 29, 48, 0.94);
    border-color: rgba(96, 165, 250, 0.38);
    color: #fff;
}

.map-layers-btn-icon,
.map-layers-chevron {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.map-layers-btn-icon { height: 16px; width: 16px; }
.map-layers-chevron {
    height: 14px;
    margin-left: auto;
    transition: transform 0.2s ease;
    width: 14px;
}
.map-layers-wrap.is-open .map-layers-chevron { transform: rotate(180deg); }

/* dropdown panel — shown when <details> is open */
.map-layers-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 230px;
    background: rgba(7, 12, 22, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    padding: 8px;
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    box-shadow: 0 20px 48px rgba(0,0,0,0.48), inset 0 1px rgba(255,255,255,0.04);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-7px) scale(0.98);
    transform-origin: top left;
    transition: opacity 0.16s ease, transform 0.2s cubic-bezier(.2,.8,.2,1), visibility 0.2s;
    visibility: hidden;
    z-index: 1;
}

.map-layers-wrap.is-open .map-layers-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    visibility: visible;
}

.map-layer-settings {
    width: 230px;
    padding: 8px;
    background: rgba(7, 12, 22, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 13px;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.28), inset 0 1px rgba(255,255,255,0.04);
}
.map-layer-settings[hidden] { display: none !important; }
.map-layer-settings-title {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    padding: 3px 7px 5px;
}
.map-layer-settings-title span {
    color: #f1f5f9;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.map-layer-settings-title small {
    color: #64748b;
    font-size: 0.52rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.map-layer-settings .map-resource-filter-label { margin-left: 7px; }
.map-layer-settings .map-resource-filter {
    margin: 0 3px 6px;
    width: calc(100% - 6px);
}
.map-setting-symbol {
    align-items: center;
    color: #7dd3fc;
    display: inline-flex;
    flex: 0 0 16px;
    font-size: 0.58rem;
    font-weight: 800;
    height: 16px;
    justify-content: center;
    position: relative;
    width: 16px;
}
.map-setting-symbol--border {
    border: 0;
}
.map-setting-symbol--border::before,
.map-setting-symbol--border::after {
    background: #7dd3fc;
    border-radius: 999px;
    content: '';
    position: absolute;
}
.map-setting-symbol--border::before {
    height: 2px;
    transform: rotate(-18deg);
    width: 15px;
}
.map-setting-symbol--border::after {
    height: 13px;
    transform: rotate(24deg);
    width: 2px;
}
.map-setting-symbol--fill {
    background: linear-gradient(135deg, #22c55e 0 48%, #8b5cf6 52% 100%);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 4px;
}
.map-setting-symbol--label { font-family: Georgia, serif; }
.map-fill-key {
    align-items: center;
    color: #94a3b8;
    display: flex;
    font-size: 0.55rem;
    gap: 6px;
    min-height: 19px;
    padding: 1px 7px 2px;
}
.map-fill-key i {
    border-radius: 999px;
    display: block;
    flex: 1;
    height: 5px;
}
.map-fill-key .is-relationship { background: linear-gradient(90deg, #ef4444, #94a3b8, #22c55e); }
.map-fill-key .is-power { background: linear-gradient(90deg, #60a5fa, #f59e0b); }
.map-fill-key .is-hostile { color: #fca5a5; }
.map-fill-key .is-friendly { color: #86efac; }
.map-fill-key.is-disabled { opacity: 0.32; }
.map-layer-settings .map-resource-filter:disabled { cursor: not-allowed; opacity: 0.4; }

.map-organization-settings {
    max-height: min(58vh, 580px);
    overflow: hidden;
    padding-bottom: 7px;
}
.map-organization-categories {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 2px 3px 7px;
}
.map-organization-category {
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid transparent;
    border-radius: 7px;
    color: #64748b;
    cursor: pointer;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    min-width: 0;
    padding: 6px 3px;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.map-organization-category:hover { color: #cbd5e1; }
.map-organization-category.is-active {
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(96, 165, 250, 0.34);
    color: #bfdbfe;
}
.map-organization-toolbar {
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    color: #64748b;
    display: flex;
    font-size: 0.55rem;
    justify-content: space-between;
    margin: 0 5px;
    padding: 0 2px 6px;
}
.map-organization-toolbar button,
.map-organization-solo {
    background: transparent;
    border: 0;
    color: #7dd3fc;
    cursor: pointer;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 3px;
}
.map-organization-list {
    max-height: min(31vh, 310px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px 2px 2px;
    scrollbar-color: rgba(96, 165, 250, 0.38) transparent;
    scrollbar-width: thin;
}
.map-organization-row {
    align-items: center;
    border-left: 2px solid transparent;
    border-radius: 8px;
    display: grid;
    gap: 7px;
    grid-template-columns: 20px minmax(0, 1fr) 28px;
    min-height: 42px;
    padding: 5px 4px 5px 5px;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.map-organization-row:hover { background: rgba(96, 165, 250, 0.07); }
.map-organization-row.is-selected {
    background: rgba(96, 165, 250, 0.1);
    border-left-color: #60a5fa;
}
.map-organization-row.is-dissolved { opacity: 0.58; }
.map-organization-row.is-dissolved .map-organization-solo { display: none; }
.map-organization-toggle,
.map-organization-info {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    min-width: 0;
    padding: 0;
    text-align: left;
}
.map-organization-toggle {
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: center;
    width: 20px;
}
.map-organization-swatch {
    background: var(--organization-color);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    box-shadow: 0 0 9px color-mix(in srgb, var(--organization-color) 55%, transparent);
    height: 11px;
    transition: opacity 0.14s ease, transform 0.14s ease;
    width: 11px;
}
.map-organization-toggle[aria-pressed="false"] .map-organization-swatch {
    background: transparent;
    box-shadow: none;
    opacity: 0.35;
}
.map-organization-toggle:hover .map-organization-swatch { transform: scale(1.14); }
.map-organization-info { display: flex; flex-direction: column; gap: 1px; }
.map-organization-info strong {
    color: #e2e8f0;
    font-size: 0.65rem;
    font-weight: 760;
    line-height: 1.22;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-organization-info span {
    color: #64748b;
    font-size: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-organization-solo { opacity: 0; transition: opacity 0.14s ease; }
.map-organization-row:hover .map-organization-solo,
.map-organization-row.is-selected .map-organization-solo { opacity: 1; }
.map-organization-empty { color: #64748b; font-size: 0.58rem; line-height: 1.45; margin: 8px; }
.map-legend-group--organizations .map-legend-items { flex-wrap: wrap; }

.map-organization-tab-icon {
    background: var(--organization-color, #60a5fa);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 3px;
    box-shadow: 0 0 8px color-mix(in srgb, var(--organization-color, #60a5fa) 48%, transparent);
    display: inline-block;
    flex: 0 0 auto;
    height: 10px;
    width: 10px;
}
.map-organization-panel-accent {
    background: linear-gradient(90deg, var(--organization-color, #60a5fa), transparent);
    border-radius: 999px;
    height: 3px;
    margin: 0 0 14px;
    width: 100%;
}
.map-organization-panel-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 16px 0;
}
.map-organization-panel-grid > div {
    background: rgba(148,163,184,0.065);
    border: 1px solid rgba(148,163,184,0.12);
    border-radius: 8px;
    min-width: 0;
    padding: 9px 10px;
}
.map-organization-panel-grid span,
.map-organization-panel-section > span,
.map-organization-panel-history > span {
    color: #64748b;
    display: block;
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.map-organization-panel-grid strong {
    color: #e2e8f0;
    display: block;
    font-size: 0.72rem;
    line-height: 1.35;
}
.map-organization-panel-section,
.map-organization-panel-history {
    border-top: 1px solid rgba(148,163,184,0.12);
    margin-top: 13px;
    padding-top: 12px;
}
.map-organization-panel-section p,
.map-organization-panel-history p {
    color: #a7b2c3;
    font-size: 0.72rem;
    line-height: 1.55;
    margin: 0;
}
.map-organization-panel-business {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}
.map-organization-panel-business span {
    background: rgba(96,165,250,0.09);
    border: 1px solid rgba(96,165,250,0.18);
    border-radius: 999px;
    color: #93c5fd;
    font-size: 0.62rem;
    padding: 4px 8px;
}
.map-organization-panel-history article {
    border-left: 2px solid rgba(96,165,250,0.28);
    margin-top: 8px;
    padding-left: 9px;
}
.map-organization-panel-history small {
    color: #64748b;
    font-size: 0.58rem;
}

.map-layer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 0.76rem;
    color: #cbd5e1;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}
.map-layer-row:hover { background: rgba(96,165,250,0.09); color: #f8fafc; }
.map-layer-row input[type="checkbox"] {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.map-layer-check {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(148,163,184,0.42);
    border-radius: 5px;
    height: 17px;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
    width: 17px;
}
.map-layer-row input:checked + .map-layer-check {
    background: #3b82f6;
    border-color: #60a5fa;
}
.map-layer-row input:checked + .map-layer-check::after {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    content: '';
    height: 8px;
    left: 5px;
    position: absolute;
    top: 2px;
    transform: rotate(45deg);
    width: 4px;
}
.map-layer-row input:focus-visible + .map-layer-check { outline: 2px solid #93c5fd; outline-offset: 2px; }
.map-layer-row-label { flex: 1; }

.map-layer-menu-heading {
    color: #64748b;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    padding: 6px 9px 3px;
    text-transform: uppercase;
}

.map-layer-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* Canonical Map entity symbols — shared by tabs, legend, and layer menu. */
.map-entity-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
}
.map-entity-icon--issue,
.map-entity-icon--strength {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 11px;
    width: 11px;
}
.map-entity-icon--issue {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1 11 10H1Z' fill='%23ef4444'/%3E%3C/svg%3E");
}
.map-entity-icon--strength {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1h6l3 5-3 5H3L0 6Z' fill='%23a855f7'/%3E%3C/svg%3E");
}
.map-entity-icon--issue.map-entity-icon--foreign {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1 11 10H1Z' fill='none' stroke='%23ef4444' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.map-entity-icon--strength.map-entity-icon--foreign {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1h6l3 5-3 5H3L0 6Z' fill='none' stroke='%23a855f7' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.map-entity-icon--event,
.map-entity-icon--development {
    border: 2px solid #facc15;
    background: #facc15;
    border-radius: 1px;
    height: 8px;
    margin: 0 1px;
    transform: rotate(45deg);
    width: 8px;
    box-sizing: border-box;
}
.map-entity-icon--event {
    background: transparent;
}
.map-entity-icon--dossier {
    background: #22d3ee;
    border-radius: 1px;
    height: 9px;
    width: 9px;
}

.map-layer-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 6px 8px;
}

/* Legend strip */
.map-legend-strip {
    position: absolute;
    bottom: 10px;
    left: 12px;
    z-index: 14;
    display: flex;
    align-items: center;
    align-items: flex-start;
    background: rgba(7,12,22,0.62);
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 12px;
    flex-direction: column;
    gap: 4px;
    max-width: min(390px, calc(100% - 28px));
    padding: 8px 11px;
    font-size: 0.7rem;
    color: #94a3b8;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 8px 28px rgba(0,0,0,0.26), inset 0 1px rgba(255,255,255,0.035);
    flex-wrap: wrap;
    transition: max-width 0.26s cubic-bezier(.2,.8,.2,1), opacity 0.18s ease, visibility 0.18s ease;
}
.map-detail-panel.open ~ .map-legend-strip {
    max-width: min(390px, calc(100% - clamp(360px, 28vw, 540px) - 28px));
}
.map-legend-group {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    gap: 7px;
    max-width: 100%;
    min-height: 20px;
    width: 100%;
}
.map-legend-group + .map-legend-group {
    border-left: 0;
    padding-left: 0;
}
.map-legend-group-title {
    color: #64748b;
    flex: 0 0 auto;
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.map-legend-items {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
}
.map-legend-items--terrain {
    display: grid;
    grid-template-columns: repeat(4, max-content);
}
@media (max-width: 420px) {
    .map-legend-items--terrain {
        grid-template-columns: repeat(2, max-content);
    }
}
.map-legend-item {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    white-space: nowrap;
}
.map-player-symbol {
    background: #3b82f6;
    border: 1.5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px #3b82f6;
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 auto;
    height: 11px;
    width: 11px;
}
.map-legend-city {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.65);
    border-radius: 50%;
    height: 9px;
    width: 9px;
}
.map-legend-capital {
    color: #fff;
    display: inline-block;
    font-size: 13px;
    line-height: 9px;
    text-shadow: 0 1px 2px #000;
}
.map-legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
/* Biome swatch — square shape to distinguish from circular marker dots */
.map-legend-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
}

body.game-body:not(.map-mode-active) .map-controls-group,
body.game-body:not(.map-mode-active) .map-mobile-controls-toggle,
body.game-body:not(.map-mode-active) .map-mobile-controls-backdrop,
body.game-body:not(.map-mode-active) .map-float-controls,
body.game-body:not(.map-mode-active) .map-legend-strip {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
body.game-body:not(.map-mode-active) .map-controls-group { transform: translateY(-6px); }
body.game-body[data-shell-mode="compact"].map-detail-open .map-mobile-controls-toggle,
body.game-body[data-shell-mode="compact"].map-detail-open .map-controls-group,
body.game-body[data-shell-mode="compact"].map-detail-open .map-mobile-controls-backdrop,
body.game-body[data-shell-mode="mobile"].map-detail-open .map-mobile-controls-toggle,
body.game-body[data-shell-mode="mobile"].map-detail-open .map-controls-group,
body.game-body[data-shell-mode="mobile"].map-detail-open .map-mobile-controls-backdrop {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
/* ── Infrastructure / Research tab action row ────────────────────────── */

.gi-action-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.gi-action-btn {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.3rem 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
}

.gi-issues-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 20px;
}

.gi-issues-chip--warn {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.45);
    color: #ff6b7a;
}

.gi-issues-chip--ok {
    background: rgba(40, 167, 69, 0.12);
    border: 1px solid rgba(40, 167, 69, 0.35);
    color: #5dbb6e;
}

/* ── Projected Effects Chips ────────────────────────────────────────────── */
.ev-projected-chip {
    background: rgba(251, 191, 36, 0.12) !important;
    border: 1px solid rgba(251, 191, 36, 0.45) !important;
    color: #fcd34d !important;
}
.ev-projected-block {
    margin-top: 0.75rem;
    padding: 0.55rem 0.7rem;
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 8px;
}
.ev-projected-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fcd34d;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

/* .ev-view-btn — retired; event cards are now fully clickable, no separate button */

/* ── Monthly Developments Overlay ──────────────────────────────────────── */
#monthlyDevOverlay {
    position: fixed;
    inset: 0;
    z-index: 3100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
#monthlyDevOverlay.md-visible {
    opacity: 1;
}
.md-panel {
    width: min(980px, 96vw);
    max-height: 90vh;
    background: rgba(12, 14, 20, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(18px) scale(0.985);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.25s ease;
}
#monthlyDevOverlay.md-visible .md-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.md-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.35rem 1.75rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.md-header-left {}
.md-eyebrow {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 123, 255, 0.85);
    margin-bottom: 0.38rem;
}
.md-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.32rem;
    line-height: 1.2;
}
.md-subtitle {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
}
.md-subtitle-divider {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.24);
}
.md-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    transition: all 0.15s ease;
    line-height: 1;
    flex-shrink: 0;
}
.md-close-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.md-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.md-section {
    margin-bottom: 1.5rem;
}
.md-section:last-child { margin-bottom: 0; }
.md-section-header {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.65rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.md-section-attention .md-section-header { color: #ffc107; }
.md-section-major    .md-section-header  { color: #fd9a4a; }
.md-section-copy {
    margin: -0.15rem 0 0.75rem;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Monthly events intentionally reuse the canonical Events-card renderer. */
.md-event-cards {
    display: grid;
    gap: 0.65rem;
}
.md-event-card.ev-card {
    margin: 0;
    padding: 0.9rem 1rem;
    background: rgba(22, 26, 37, 0.78);
    border-color: rgba(255, 255, 255, 0.11);
    border-radius: 12px;
}
.md-event-card.ev-card:hover {
    transform: translateY(-1px);
    border-color: rgba(64, 146, 255, 0.45);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.md-event-card .ev-card-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.1rem;
}
.md-event-card .ev-consequence-block {
    margin-top: 0.7rem;
}

/* Issue and strength movement uses the same chip families as event outcomes. */
.md-trend-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}
.md-trend-chips .issue-progress-chip,
.md-trend-chips .strength-progress-chip {
    min-height: 30px;
    border-radius: 7px;
    padding: 0.28rem 0.62rem !important;
}
.md-trend-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px auto;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
}
.md-trend-object {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    min-width: 0;
    width: 100%;
    padding: 0.25rem 0.5rem !important;
    text-align: left !important;
}
.md-trend-object-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.73rem;
    font-weight: 600;
}
.md-trend-object .ip-status-tag,
.md-trend-object .sp-trend-tag {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}
.md-trend-arrow {
    position: relative;
    display: block;
    width: 17px;
    height: 1px;
    margin-inline: auto;
    background: currentColor;
    opacity: 0.78;
}
.md-trend-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1px;
    width: 5px;
    height: 5px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.md-trend-delta {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.md-trend-positive .md-trend-arrow,
.md-trend-positive .md-trend-delta { color: #64dc9b; }
.md-trend-negative .md-trend-arrow,
.md-trend-negative .md-trend-delta { color: #ff8c73; }
.md-trend-neutral .md-trend-arrow,
.md-trend-neutral .md-trend-delta { color: rgba(255, 255, 255, 0.4); }

/* Applied effects: net stat result first, factual contributors immediately below. */
.md-effect-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}
.md-effect-card {
    min-width: 0;
    padding: 0.72rem 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(30, 36, 50, 0.72), rgba(16, 19, 28, 0.72));
}
.md-effect-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}
.md-effect-stat > div:first-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.md-effect-name {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.86rem;
    font-weight: 700;
}
.md-effect-values {
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}
.md-effect-causes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.md-effect-causes-label {
    color: rgba(255, 255, 255, 0.32);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 0.1rem;
}
.md-cause-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.18rem 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.66rem;
    font-weight: 600;
}
.md-cause-chip > span { opacity: 0.7; white-space: nowrap; }
.md-cause-event { border-color: rgba(56, 189, 248, 0.28); background: rgba(56, 189, 248, 0.09); color: #9bdcff; }
.md-cause-dossier { border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.09); color: #fde68a; }
.md-cause-issue { border-color: rgba(249, 115, 22, 0.3); background: rgba(249, 115, 22, 0.09); color: #fdba74; }
.md-cause-strength { border-color: rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.09); color: #d8b4fe; }
.md-cause-system { color: rgba(190, 200, 218, 0.72); }
/* ── Compact event rows ─────────────────────────────────────────────────── */
.md-section-rows {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}
.md-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    min-height: 38px;
}
.md-event-row:hover {
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(255, 255, 255, 0.16);
}
.md-row-major {
    border-color: rgba(253, 126, 20, 0.28);
    background: rgba(253, 126, 20, 0.06);
}
.md-row-major:hover {
    border-color: rgba(253, 126, 20, 0.5);
    background: rgba(253, 126, 20, 0.1);
}
.md-section-attention .md-event-row {
    border-color: rgba(255, 193, 7, 0.22);
    background: rgba(255, 193, 7, 0.05);
}
.md-section-attention .md-event-row:hover {
    border-color: rgba(255, 193, 7, 0.45);
    background: rgba(255, 193, 7, 0.09);
}
.md-row-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}
.md-row-star {
    color: #fd9a4a;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.md-row-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.md-row-right {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
}
.md-row-badge {
    font-size: 0.6rem !important;
    padding: 0.06rem 0.45rem !important;
    white-space: nowrap;
}
/* .md-fx-chip — retired; monthly-developments effect chips now use .narrative-chip via buildStatDeltaChip */
.md-row-chevron {
    color: rgba(255, 255, 255, 0.25);
    font-size: 1.1rem;
    font-weight: 300;
    margin-left: 0.1rem;
}

/* Action badges */
.md-action-badge {
    display: inline-block;
    font-size: 0.59rem;
    font-weight: 700;
    padding: 0.07rem 0.4rem;
    border-radius: 10px;
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.md-badge-decision {
    background: rgba(0, 123, 255, 0.18);
    border-color: rgba(0, 123, 255, 0.4);
    color: #7bb8ff;
}
.md-badge-response {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffc107;
}
.md-badge-opportunity {
    background: rgba(0, 168, 107, 0.15);
    border-color: rgba(0, 168, 107, 0.4);
    color: #4eca8b;
}

/* ── Turn Summary (stat chips + issue drift) ────────────────────────────── */
.md-summary-stat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.55rem;
}
.md-section-summary .md-section-header { color: rgba(255,255,255,0.55); }
.md-drift-list { display: flex; flex-direction: column; gap: 0.35rem; }
.md-drift-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8rem;
}
.md-drift-icon { font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.md-drift-worse { color: #ff7070; }
.md-drift-better { color: #4eca8b; }
.md-drift-quiet { opacity: 0.45; }
.md-drift-label { font-weight: 600; color: rgba(255,255,255,0.7); }
.md-drift-reason { color: rgba(255,255,255,0.4); font-size: 0.75rem; }

/* Already-responded note inside major event popup */
.me-responded-note {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.md-footer {
    padding: 0.9rem 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}
.md-continue-btn {
    padding: 0.55rem 1.8rem;
    font-size: 0.9rem;
    font-weight: 700;
    background: linear-gradient(135deg, #0062cc, #0040a0);
    border: 1px solid rgba(0, 123, 255, 0.5);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}
.md-continue-btn:hover {
    background: linear-gradient(135deg, #0075e0, #0055c0);
    box-shadow: 0 4px 16px rgba(0, 100, 220, 0.4);
    transform: translateY(-1px);
}

@media (max-width: 700px) {
    .md-panel {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 14px;
    }
    .md-header { padding: 1.1rem 1rem 0.85rem; }
    .md-title { font-size: 1.28rem; }
    .md-body { padding: 1rem; }
    .md-section { margin-bottom: 1.2rem; }
    .md-effect-grid { grid-template-columns: 1fr; }
    .md-trend-chips { grid-template-columns: 1fr; }
    .md-event-card.ev-card { padding: 0.78rem; }
    .md-event-card .dossier-item-header {
        align-items: flex-start;
        gap: 0.5rem;
    }
    .md-event-card .dossier-header-actions { flex-wrap: wrap; justify-content: flex-end; }
    .md-trend-flow {
        grid-template-columns: minmax(0, 1fr) 20px auto;
        gap: 0.35rem;
    }
    .md-trend-object { gap: 0.35rem !important; }
    .md-trend-object-name { white-space: nowrap; }
    .md-trend-object .ip-status-tag,
    .md-trend-object .sp-trend-tag { margin-left: auto; }
    .md-trend-delta { font-size: 0.72rem; }
    .md-footer { padding: 0.75rem 1rem; }
    .md-continue-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    #monthlyDevOverlay,
    .md-panel { transition: none; }
}

/* ── Event Detail Overlay ───────────────────────────────────────────────── */
#eventDetailOverlay {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
#eventDetailOverlay.ed-visible {
    opacity: 1;
}
.ed-container {
    width: min(1180px, 96vw);
    height: min(86vh, 780px);
    max-height: 90vh;
    display: flex;
    background: rgba(10, 12, 18, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}
.ed-major {
    border-color: rgba(253, 126, 20, 0.35);
}
.ed-left {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.ed-scroll-region {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.75rem 1.75rem 1.25rem;
}
.ed-action-dock {
    background: rgba(15,28,46,0.97);
    border-top: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 -16px 30px rgba(4,8,15,0.25);
    flex: 0 0 auto;
    padding: 0.9rem 1.75rem 1.1rem;
    position: relative;
    z-index: 3;
}
.ed-right {
    width: 46%;
    min-width: 320px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
@media (max-width: 640px) {
    #eventDetailOverlay {
        align-items: stretch;
    }
    .ed-container {
        border: 0;
        border-radius: 0;
        flex-direction: column;
        height: 100dvh;
        max-height: 100dvh;
        width: 100%;
    }
    .ed-left {
        flex: 1 1 auto;
        min-height: 0;
        order: 2;
    }
    .ed-right {
        display: block;
        flex: 0 0 clamp(220px, 35dvh, 340px);
        min-height: 220px;
        min-width: 0;
        order: 1;
        width: 100%;
    }
    .ed-right .me-right-vignette {
        background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 44%, rgba(10,12,18,0.52) 76%, #0a0c12 100%);
    }
    .ed-scroll-region {
        padding: 1.15rem 1.2rem 1rem;
    }
    .ed-action-dock {
        padding: 0.8rem 1.2rem max(0.9rem, env(safe-area-inset-bottom));
    }
    .ed-continue-btn,
    .ed-action-dock .me-custom-input {
        width: 100%;
    }
}
.ed-art {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    background-size: cover;
    background-position: center;
}
.ed-art.has-image .me-art-icon,
.ed-art.has-image .me-art-label { display: none; }
.ed-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.ed-badges { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.ed-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.75rem;
    line-height: 1.25;
}
.ed-description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}
.ed-section {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ed-choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ed-footer {
    margin-top: 0;
    padding-top: 0;
    display: flex;
    justify-content: flex-start;
}
.ed-continue-btn {
    padding: 0.45rem 1.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ed-continue-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}


/* ── Story / Cabinet tab bar ────────────────────────────────────────── */
/* ── Story / Cabinet mode tabs (inside StoryComponent header) ───────── */
.story-mode-tabs {
    display: flex;
    gap: 6px;
}
.story-mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: rgba(255,255,255,0.5);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    letter-spacing: 0.2px;
}
.story-mode-tab svg { opacity: 0.6; transition: opacity 0.18s; }
.story-mode-tab:hover {
    background: rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.8);
}
.story-mode-tab:hover svg { opacity: 0.9; }
.story-mode-tab--active {
    background: rgba(100,160,255,0.16);
    border-color: rgba(100,160,255,0.4);
    color: #b8d8ff;
}
.story-mode-tab--active svg { opacity: 1; }
.story-mode-tab-hint {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.5;
    margin-left: 1px;
}

/* ── Story well: relative container so the Ask toggle can float over it ── */
.story-well {
    position: relative;
}

/* ── Ask toggle: floats over top-right corner of the chat well ── */
.story-ask-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(15,17,25,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    color: rgba(255,255,255,0.45);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.2px;
    transition: all 0.18s ease;
}
.story-ask-toggle svg { opacity: 0.55; transition: opacity 0.18s; }
.story-ask-toggle:hover {
    background: rgba(30,34,50,0.88);
    color: rgba(255,255,255,0.8);
    border-color: rgba(255,255,255,0.25);
}
.story-ask-toggle:hover svg { opacity: 0.9; }
.story-ask-toggle--active {
    background: rgba(60,100,200,0.25);
    border-color: rgba(100,160,255,0.5);
    color: #b8d8ff;
}
.story-ask-toggle--active svg { opacity: 1; }

/* ── Cabinet briefing label (used inside .story-message.story-narrative) */
.cabinet-briefing-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.cabinet-briefing-icon { display: inline-flex; align-items: center; vertical-align: middle; }
.cabinet-briefing-icon svg { width: 0.85rem; height: 0.85rem; stroke: currentColor; }

/* ── Cabinet messages container (hidden, uses .story-messages styles) ── */
.cabinet-mode-messages {
    /* no extra styles needed — inherits everything from .story-messages */
}

/* ── Welcome state ──────────────────────────────────────────────────── */
.cabinet-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: rgba(255,255,255,0.45);
    gap: 10px;
}
.cabinet-welcome-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; }
.cabinet-welcome-icon svg { width: 2.4rem; height: 2.4rem; stroke: rgba(255,255,255,0.5); stroke-width: 1.5; }
.cabinet-welcome-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}
.cabinet-welcome-body {
    font-size: 0.83rem;
    max-width: 320px;
    line-height: 1.5;
}
.cabinet-suggestion-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 6px;
}
.cabinet-suggestion-chip {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem;
    padding: 5px 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.cabinet-suggestion-chip:hover {
    background: rgba(100,160,255,0.14);
    border-color: rgba(100,160,255,0.35);
    color: #99c3ff;
}

/* ── [[draftAction]] spans ──────────────────────────────────────────── */
.draft-action {
    display: inline;
    color: #93c5fd;
    border-bottom: 1px dashed rgba(96,165,250,0.55);
    cursor: pointer;
    padding: 0 2px;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
}
.draft-action:hover {
    background: rgba(96,165,250,0.12);
    color: #bfdbfe;
    border-bottom-style: solid;
}
.draft-action::before {
    content: '↳ ';
    opacity: 0.5;
    font-size: 0.85em;
}

/* ── Glass Confirm Dialog (gc-*) ──────────────────────────────────────── */
.gc-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.gc-overlay--in  { opacity: 1; }
.gc-overlay--out { opacity: 0; }

.gc-dialog {
    background: rgba(12, 17, 24, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: 16px;
    padding: 2rem 2.2rem 1.6rem;
    max-width: 380px;
    width: calc(100% - 2rem);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
    text-align: center;
    transform: scale(0.92) translateY(10px);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    opacity: 0;
}
.gc-overlay--in  .gc-dialog { transform: scale(1) translateY(0); opacity: 1; }
.gc-overlay--out .gc-dialog { transform: scale(0.94) translateY(6px); opacity: 0; }

.gc-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
}
.gc-dialog-icon svg { width: 2rem; height: 2rem; stroke: currentColor; stroke-width: 1.75; }
.gc-dialog-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 0.55rem;
    letter-spacing: -0.01em;
}
.gc-dialog-body {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 1.5rem;
    line-height: 1.55;
}
.gc-dialog-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}
.gc-btn {
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.55rem 1.3rem;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    min-width: 90px;
}
.gc-btn:hover  { transform: translateY(-1px); }
.gc-btn:active { transform: translateY(0); }

.gc-btn-cancel {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.gc-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}
.gc-btn-danger {
    background: #d8324b;
    color: #fff;
    box-shadow: 0 2px 10px rgba(220, 53, 69, 0.35);
}
.gc-btn-danger:hover {
    background: #e23b54;
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.5);
}
.gc-btn-confirm {
    background: #0d7df0;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 123, 255, 0.35);
}
.gc-btn-confirm:hover {
    background: #1989f7;
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.5);
}

/* ── Actor dossier dialog variant ────────────────────── */
/* Standalone popup — avoids specificity fights with .gc-dialog base rules */
.actor-detail-popup {
    position: relative;
    background: rgba(12, 14, 20, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 16px;
    width: 540px;
    max-width: 90vw;
    min-width: 280px;
    min-height: 240px;
    box-shadow: var(--shadow-lg);
    padding: 0;
    overflow: visible;
    text-align: left;
}

.ad-close-btn {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.55);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
}
.ad-close-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

.ad-header {
    display: flex;
    gap: 1rem;
    padding: 1.2rem 1.3rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ad-portrait {
    width: 80px;
    height: 104px;
    object-fit: cover;
    object-position: top center;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.ad-header-info {
    flex: 1;
    min-width: 0;
    padding-right: 1.8rem;
}

.ad-name-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.ad-icon { font-size: 0.9rem; }

.ad-name {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.2;
}

.ad-role {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.15rem;
}

.ad-affiliation {
    font-size: 0.68rem;
    color: rgba(160, 180, 255, 0.55);
    margin-bottom: 0.1rem;
}

.ad-ideology {
    font-size: 0.68rem;
    color: rgba(160, 180, 255, 0.7);
    font-style: italic;
    margin-bottom: 0.1rem;
}

.ad-body {
    padding: 0.9rem 1.3rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ad-section { display: flex; flex-direction: column; gap: 0.25rem; }

.ad-section-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    border-left: 2px solid rgba(100, 160, 255, 0.35);
    padding-left: 0.4rem;
}

.ad-text-block {
    font-size: 0.75rem;
    color: rgba(200, 220, 255, 0.65);
    line-height: 1.5;
    font-style: italic;
}

/* ── Vote popup dialog variant ───────────────────────── */
.gc-dialog--vote {
    max-width: 480px;
    text-align: left;
    padding: 1.4rem 1.6rem 1.5rem;
}

.gv-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.gv-icon { color: var(--primary-color); }
.gv-icon svg { width: 1.15rem; height: 1.15rem; }

.gv-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}

.gv-body {
    max-height: 62vh;
    overflow-y: auto;
}

.gv-intro {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 0.85rem;
    line-height: 1.5;
}

.gv-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 1rem;
}

.gv-btn-call {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 123, 255, 0.35);
}
.gv-btn-call:hover {
    background: linear-gradient(135deg, #1a8aff, #0060cc);
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.5);
}

/* =====================================================
   FIXED VIEWPORT LAYOUT — no full-page scroll
   All scrolling happens inside each panel.
   ===================================================== */

html {
    height: 100%;
}

/* header takes its natural height; never grows */
body.game-body > .game-header {
    flex-shrink: 0;
}

/* game-content fills the rest.
   padding-bottom = stats bar height so panels never go under it. */
body.game-body > .game-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 0 var(--stats-bar-h);
    margin-bottom: 0;
}

/* The single outer row in game-content fills its parent */
.game-content > .row {
    flex: 1;
    min-height: 0;
    margin-bottom: 0 !important;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* The col-12 inside that row is a flex column */
.game-content > .row > .col-12 {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    overflow: hidden;
}

/* The primary view switch hangs directly from the game header. The full-width
   row remains transparent; only the compact, tapered navigation body is drawn. */
.game-subheader {
    flex-shrink: 0;
    position: relative;
    isolation: isolate;
    min-height: 2.5rem;
    margin: 0 0 -3px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    pointer-events: none;
    align-items: flex-start;
}

.game-subheader-center {
    flex: 0 1 25rem;
    width: min(92vw, 25rem);
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

/* Story and Parliament sit below the header-mounted switcher. Match the space
   above and below their framed surfaces so neither edge crowds fixed chrome. */
@media (min-width: 701px) {
    .game-content:not(.map-view-active) .game-subheader {
        min-height: 2.3125rem;
        margin-bottom: 0;
    }

    #dashboardView,
    #parliamentView {
        padding-block: 0.75rem;
    }

    body.game-body #dashboardView > .row > [class*="col-"] {
        padding-bottom: 0;
    }

    #parliamentView .parl-view-wrap {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* All three views fill remaining space in the col-12 */
#dashboardView,
#parliamentView,
#mapView {
    flex: 1;
    min-height: 0;
}

/* dashboardView is a flex column so its inner row can use flex: 1 */
#dashboardView {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Parliament & Map scroll internally */
#parliamentView {
    overflow-y: auto;
}
#mapView {
    overflow-y: auto;
}

/* Dashboard inner row fills available height */
#dashboardView > .row {
    flex: 1;
    min-height: 0;
    margin-top: 0 !important;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Both columns are flex columns */
#dashboardView > .row > [class*="col-"] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
    padding-bottom: 0.5rem;
    overflow: hidden;
}

/* dashboardStory container fills its column */
#dashboardStory {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Story component is a flex column filling its container */
#dashboardStory .unified-story-component {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Story well (wraps messages + floating ask toggle) — must carry the flex chain */
#dashboardStory .story-well {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Story messages grow to fill, scroll inside — horizontal locked */
#dashboardStory .story-messages,
#dashboardStory .cabinet-mode-messages {
    flex: 1;
    min-height: 0;
    max-height: none !important;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Input area pinned at bottom */
#dashboardStory .story-input-container {
    flex-shrink: 0;
}

/* Sidebar panel fills its column */
.dossier-panel {
    flex: 1;
    min-height: 0;
}

/* Show only the active sidebar tab content — all flex children
   must be restrained so the panel height stays fixed */
.dossier-panel .sidebar-group-label,
.dossier-panel .sidebar-tabs {
    flex-shrink: 0;
}

/* World memory list inside the dossier tab also flexes */
#worldMemoryTab {
    display: flex;
    flex-direction: column;
}
#worldMemoryTab .dossier-list {
    flex: 1;
    min-height: 0;
}

/* All visible tab content fills remaining sidebar space */
.sidebar-tab-content:not(.d-none) {
    flex: 1;
    min-height: 0;
}

/* ── Responsive stacking: below lg breakpoint ─────────────── */
@media (max-width: 991.98px) {
    body.game-body {
        height: auto;
        min-height: 100vh;
        overflow: visible;
        overflow-x: hidden;
    }

    /* Undo desktop overflow clipping so the page can scroll normally */
    body.game-body > .game-content,
    .game-content > .row,
    .game-content > .row > .col-12 {
        overflow: visible;
    }

    /* Tab bar sticks below the game header while the rest of the page scrolls */
    .game-subheader {
        position: sticky;
        top: var(--game-header-h);
        z-index: 60;
    }

    /* Let columns stack — re-enable wrapping and remove height ceiling */
    #dashboardView {
        overflow: visible;
    }

    #dashboardView > .row {
        flex-wrap: wrap;
        overflow: visible;
    }

    #dashboardView > .row > [class*="col-"] {
        overflow: visible;
    }

    /* Give each stacked column a bounded, scrollable height */
    #dashboardView > .row > .col-lg-8 {
        height: 70vh;
        overflow: hidden;
        overflow-y: auto;
    }

    #dashboardView > .row > .col-lg-4 {
        height: 60vh;
        overflow: hidden;
        overflow-y: auto;
    }
}

/* ── Sidebar nav header (tab picker zone) ─────────────────── */
.sidebar-nav {
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 0 0 0.6rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sidebar-nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 0.55rem 0;
}

/* Remove the bottom border from individual tab rows (the nav box handles separation) */
.sidebar-nav .sidebar-tabs {
    border-bottom: none;
    padding-bottom: 0;
    gap: 0.3rem;
}

/* Group label inside nav gets a more visible color accent */
.sidebar-nav .sidebar-group-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: 0 0 0.15rem 0.1rem;
    border-left: none;
    margin-bottom: 0;
}

/* Refresh button — minimal icon button */
.sidebar-refresh-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.4);
    padding: 0.3rem 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.sidebar-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ── Content well (darker inset box holding the tab panels) ── */
.sidebar-content-well {
    flex: 1;
    min-height: 0;
    background: rgba(0, 0, 0, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Tab content panels sit directly inside the well */
.sidebar-content-well .sidebar-tab-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* World memory list inside the well */
.sidebar-content-well #worldMemoryTab {
    display: flex;
    flex-direction: column;
}
.sidebar-content-well #worldMemoryTab .dossier-list {
    flex: 1;
    min-height: 0;
}

/* ── Parliament Action Panels ──────────────────────────────────────────────── */

#parlActionPanelWrap {
    margin-top: 0.75rem;
}

.parl-ap-panel {
    background: rgba(20, 24, 35, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: parlApSlideIn 0.22s ease both;
}

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

.parl-ap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.parl-ap-title {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.parl-ap-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}
.parl-ap-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.08); }

.parl-ap-body {
    padding: 1rem;
    max-height: 480px;
    overflow-y: auto;
}

.parl-ap-intro {
    font-size: 0.83rem;
    color: var(--text-secondary);
    margin-bottom: 0.85rem;
}

/* Loading */
.parl-ap-loading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.83rem;
}

.parl-ap-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* Notices */
.parl-ap-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
    border-radius: 8px;
    font-size: 0.83rem;
    margin-bottom: 0.5rem;
}
.parl-ap-notice-warn {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: var(--warning-color);
}
.parl-ap-notice-err {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: var(--danger-color);
}

/* Meta row */
.parl-ap-meta-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.parl-ap-meta-label { color: var(--text-muted); }
.parl-ap-meta-sep   { color: rgba(255,255,255,0.2); }

/* ── Debate panel specific ── */
.parl-debate-roundbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 2rem;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.parl-debate-roundbar strong {
    color: var(--text-primary);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parl-ap-challenge-box {
    display: flex;
    gap: 0.6rem;
    background: rgba(255, 193, 7, 0.07);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-left: 3px solid var(--warning-color);
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.6rem;
}

.parl-debate-cue {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem;
    align-items: baseline;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.45;
}

.parl-debate-cue > span {
    color: var(--warning-color);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.parl-debate-composer {
    padding: 0.65rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    background: rgba(0,0,0,0.18);
}

.parl-debate-composer .parl-ap-textarea {
    min-height: 7rem;
    padding: 0.2rem 0.25rem 0.6rem;
    border: 0;
    background: transparent;
    resize: vertical;
}

.parl-debate-composer .parl-ap-textarea:focus {
    box-shadow: none;
}

.parl-debate-composer .parl-ap-footer {
    margin-top: 0;
}
.parl-ap-challenge-icon { color: var(--warning-color); flex-shrink: 0; margin-top: 2px; }
.parl-ap-challenge-text { font-size: 0.86rem; color: var(--text-primary); margin: 0; line-height: 1.55; }

.parl-ap-vuln {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding: 0 0.1rem;
}
.parl-ap-vuln-label { color: rgba(255,255,255,0.35); margin-right: 0.25rem; }

.parl-ap-input-section { margin-bottom: 0.1rem; }
.parl-ap-input-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.parl-ap-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.86rem;
    padding: 0.6rem 0.75rem;
    resize: vertical;
    min-height: 70px;
    transition: border-color 0.15s;
    line-height: 1.5;
}
.parl-ap-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.07);
}

/* Result display */
.parl-ap-result-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}
.parl-ap-shift-row {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
}
.parl-ap-shift {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
}
.parl-ap-shift-yes     { background: rgba(40,167,69,0.18); color: var(--success-color); }
.parl-ap-shift-wav     { background: rgba(255,193,7,0.15);  color: var(--warning-color); }
.parl-ap-shift-no      { background: rgba(220,53,69,0.15);  color: var(--danger-color); }
.parl-ap-shift-neutral { background: rgba(255,255,255,0.06); color: var(--text-muted); }

.parl-ap-narrative {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.5rem;
    font-style: italic;
}
.parl-ap-momentum-update {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

/* ── Deals panel specific ── */
.parl-deals-list { display: flex; flex-direction: column; gap: 0.65rem; }

.parl-deal-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    transition: border-color 0.15s;
}
.parl-deal-card:hover { border-color: rgba(255,255,255,0.18); }

.parl-deal-card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.parl-deal-party {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}
.parl-deal-meta  { display: flex; align-items: center; gap: 0.4rem; }
.parl-deal-votes {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--success-color);
    background: rgba(40,167,69,0.12);
    border: 1px solid rgba(40,167,69,0.25);
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
}
.parl-deal-demand {
    font-size: 0.81rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}
.parl-deal-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    line-height: 1.5;
}
.parl-deal-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.parl-deal-counter { margin-top: 0.5rem; }

/* Difficulty badges */
.parl-diff-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
    letter-spacing: 0.04em;
}
.parl-diff-easy { background: rgba(40,167,69,0.15); color: var(--success-color); border: 1px solid rgba(40,167,69,0.3); }
.parl-diff-mod  { background: rgba(255,193,7,0.12); color: var(--warning-color); border: 1px solid rgba(255,193,7,0.3); }
.parl-diff-hard { background: rgba(220,53,69,0.12); color: var(--danger-color);  border: 1px solid rgba(220,53,69,0.3); }

/* Result badges */
.parl-res-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
    letter-spacing: 0.03em;
}
.parl-res-yes     { background: rgba(40,167,69,0.2);  color: var(--success-color); }
.parl-res-partial { background: rgba(23,162,184,0.15); color: var(--info-color); }
.parl-res-no      { background: rgba(220,53,69,0.15);  color: var(--danger-color); }
.parl-res-ctr     { background: rgba(255,193,7,0.15);  color: var(--warning-color); }

.parl-ap-cost-note {
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    gap: 0.2rem;
}

/* ── Amendments panel specific ── */
.parl-amends-list { display: flex; flex-direction: column; gap: 0.65rem; }

.parl-amend-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    transition: border-color 0.15s;
}
.parl-amend-card:hover { border-color: rgba(255,255,255,0.18); }
.parl-amend-card-applied {
    border-color: rgba(40, 167, 69, 0.4) !important;
    background: rgba(40, 167, 69, 0.06) !important;
}

.parl-amend-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.parl-amend-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}
.parl-amend-gain {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--success-color);
    background: rgba(40,167,69,0.12);
    border: 1px solid rgba(40,167,69,0.25);
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
}
.parl-amend-target {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.parl-amend-body {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 0.55rem;
}
.parl-amend-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.parl-amend-tradeoff {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: rgba(255, 193, 7, 0.75);
    gap: 0.2rem;
    flex: 1;
}
.parl-amend-change-note {
    font-size: 0.78rem;
    color: rgba(40,167,69,0.9);
    margin-top: 0.4rem;
    font-style: italic;
}

/* ── Shared action panel footer & buttons ── */
.parl-ap-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.parl-ap-btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
    font-size: 0.83rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 7px;
    transition: background 0.15s, transform 0.1s;
    display: flex;
    align-items: center;
}
.parl-ap-btn-primary:hover { background: #0056b3; color: white; transform: translateY(-1px); }

.parl-ap-btn-secondary {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.15);
    font-size: 0.83rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 7px;
    transition: background 0.15s;
    display: flex;
    align-items: center;
}
.parl-ap-btn-secondary:hover { background: rgba(255,255,255,0.13); color: var(--text-primary); }

.parl-ap-btn-cancel {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.83rem;
    font-weight: 500;
    padding: 0.4rem 0.9rem;
    border-radius: 7px;
    transition: color 0.15s, border-color 0.15s;
}
.parl-ap-btn-cancel:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.25); }

.parl-ap-btn-danger {
    background: rgba(220, 53, 69, 0.85);
    color: white;
    border: none;
    font-size: 0.83rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 7px;
    transition: background 0.15s;
    display: flex;
    align-items: center;
}
.parl-ap-btn-danger:hover { background: var(--danger-color); color: white; }

/* ── Parliament Action Panel — History Sections ─────────────────────────────── */
.parl-ap-hist-section {
    margin-top: 1.1rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 0.8rem;
}
.parl-ap-hist-label {
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.45rem;
}
.parl-ap-hist-list {
    max-height: 140px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.parl-ap-hist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.3rem 0.5rem;
    background: rgba(255,255,255,0.04);
    border-radius: 5px;
    font-size: 0.8rem;
}
.parl-ap-hist-text {
    color: var(--text-secondary);
    line-height: 1.4;
    flex: 1;
}
.parl-ap-hist-tag {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    text-transform: capitalize;
    white-space: nowrap;
    flex-shrink: 0;
}
.parl-ap-hist-tag-strong   { background: rgba(34,197,94,0.2);  color: #4ade80; }
.parl-ap-hist-tag-moderate { background: rgba(234,179,8,0.2);  color: #facc15; }
.parl-ap-hist-tag-weak     { background: rgba(249,115,22,0.2); color: #fb923c; }
.parl-ap-hist-tag-backfired{ background: rgba(239,68,68,0.2);  color: #f87171; }
.parl-ap-hist-tag-neutral  { background: rgba(148,163,184,0.15); color: var(--text-muted); }
.parl-ap-hist-tag-accepted { background: rgba(34,197,94,0.2);  color: #4ade80; }
.parl-ap-hist-tag-rejected { background: rgba(148,163,184,0.15); color: var(--text-muted); }
.parl-ap-hist-tag-countered{ background: rgba(99,102,241,0.2); color: #a5b4fc; }
.parl-ap-hist-tag-applied  { background: rgba(99,102,241,0.2); color: #a5b4fc; }

/* ── Parliament Action Panel — Custom Amendment Section ─────────────────────── */
.parl-amend-custom-section {
    margin-top: 1.1rem;
    padding: 0.9rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 9px;
}
.parl-amend-custom-section .parl-ap-input-label {
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

/* ── Parliament Action Panel — Article Select ────────────────────────────────── */
.parl-ap-select {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 7px;
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.parl-ap-select:focus {
    outline: none;
    border-color: var(--accent-blue);
}
.parl-ap-select option {
    background: #1e2332;
    color: var(--text-primary);
}

/* ── Vote Result Card ─────────────────────────────────────────────────────── */
.parl-vote-result-card {
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 0.5rem;
    border: 1px solid;
}
.vote-result-passed {
    background: color-mix(in srgb, var(--success-color) 9%, transparent);
    border-color: color-mix(in srgb, var(--success-color) 30%, transparent);
}
.vote-result-failed {
    background: color-mix(in srgb, var(--danger-color) 9%, transparent);
    border-color: color-mix(in srgb, var(--danger-color) 30%, transparent);
}
.vote-result-banner {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 0.65rem;
}
.vote-result-passed .vote-result-banner { color: var(--success-color); }
.vote-result-failed .vote-result-banner { color: var(--danger-color); }
.vote-result-tally {
    display: flex;
    gap: 1.2rem;
    margin-bottom: 0.6rem;
    font-size: 0.92rem;
    font-weight: 600;
}
.vote-res-for     { color: var(--success-color); }
.vote-res-against { color: var(--danger-color); }
.vote-res-breakdown {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    font-style: italic;
}
.vote-res-narrative {
    font-size: 0.87rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ── Vote Consequence List ────────────────────────────────────────────────── */
.parl-conseq-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.parl-conseq-list span {
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.15rem 0.55rem;
    border: 1px solid;
}
.parl-conseq-pos {
    color: var(--success-color);
    background: color-mix(in srgb, var(--success-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--success-color) 28%, transparent) !important;
}
.parl-conseq-neg {
    color: var(--danger-color);
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger-color) 28%, transparent) !important;
}
.parl-conseq-issue {
    color: var(--warning-color);
    background: color-mix(in srgb, var(--warning-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--warning-color) 25%, transparent) !important;
}
.parl-conseq-promise {
    color: var(--info-color);
    background: color-mix(in srgb, var(--info-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--info-color) 25%, transparent) !important;
}

/* ── Narrow-screen layout (below Bootstrap lg breakpoint = 992 px) ──────────
   At this width the two-column layout stacks. Normal document scroll handles
   everything — no overflow locks needed.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    /* Story panel: give it a sensible min/max so it doesn't dominate */
    #dashboardStory .story-messages,
    #dashboardStory .cabinet-mode-messages {
        min-height: 320px;
        max-height: 60vh;
    }

    /* End-turn button: prevent it overflowing on very small screens */
    #endTurnBtn {
        white-space: nowrap;
        min-width: 0;
    }
}

/* ── Turn Opening Sequence ──────────────────────────────────────────── */

.story-chapter-break {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.8rem 0 0.6rem;
    padding: 0 0.25rem;
    pointer-events: none;
    user-select: none;
}

.story-chapter-break::before,
.story-chapter-break::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.story-chapter-break-label {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.story-message.story-turn-opening {
    border-left: 2px solid rgba(0, 168, 255, 0.2);
    padding-left: 0.75rem;
}

.story-message.story-parliament-resolution {
    border: 1px solid rgba(174, 126, 255, 0.35);
    border-left: 4px solid rgba(174, 126, 255, 0.9);
    background: linear-gradient(135deg, rgba(91, 48, 148, 0.24), rgba(28, 24, 44, 0.78));
    box-shadow: 0 12px 30px rgba(54, 25, 92, 0.18);
}

/* Inaugural opening beat — no blue border accent */
.story-message.story-opening-inaugural {
    border-left: none;
}

/* Shared style for payload-extraction thinking indicators */
.extract-thinking-label {
    font-style: italic;
    font-size: 0.85rem;
    color: rgba(200, 200, 200, 0.65);
    margin-top: 0.5rem;
}

/* Dim stale suggested moves once a new turn opening arrives */
.suggested-moves-wrapper.suggested-moves-stale {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.4);
    transition: opacity 0.4s ease;
}

/* ── Monthly Developments: Resolved This Month section ──────────────────── */
.md-section-resolution .md-section-header { color: #a3e4b0; }
.md-resolution-list { display: flex; flex-direction: column; gap: 0.4rem; }
.md-res-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.06);
}
.md-res-positive { border-left: 3px solid #4ade80; }
.md-res-negative { border-left: 3px solid #f87171; }
.md-res-icon {
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;
}
.md-res-positive .md-res-icon { color: #4ade80; }
.md-res-negative .md-res-icon { color: #f87171; }
.md-res-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.md-res-title {
    font-weight: 600;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.md-res-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
}
.md-res-rewards { display: flex; gap: 0.3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* ── Archive modal ───────────────────────────────────────────────────────── */
.archive-modal-wrap {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.archive-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
}
.archive-modal-panel {
    position: relative;
    width: min(560px, 94vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: rgba(12, 14, 20, 0.96);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 14px;
    box-shadow: 0 12px 60px rgba(0,0,0,0.7);
    overflow: hidden;
}
.archive-modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.archive-modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}
.archive-modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    transition: color 0.15s;
}
.archive-modal-close:hover { color: rgba(255,255,255,0.85); }
.archive-modal-body {
    overflow-y: auto;
    padding: 0.75rem 1.25rem 1.25rem;
    flex: 1;
}
.archive-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.5rem;
}
.archive-tab-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.archive-tab-btn:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.06); }
.archive-tab-btn.active { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.1); }
.archive-tab-body { display: flex; flex-direction: column; gap: 0.4rem; }
.archive-row {
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: rgba(0,0,0,0.32);
    border: 1px solid rgba(255,255,255,0.06);
}
.archive-row-hd {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.archive-row-title {
    flex: 1;
    font-weight: 600;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.archive-row-turn {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}
.archive-row-status {
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 0.2rem;
}
.archive-status-resolved { color: #4ade80; }
.archive-status-broken   { color: #f87171; }
.archive-row-note {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.38);
    margin-top: 0.15rem;
    font-style: italic;
}

/* ── Parliament nav card (inline [NAV:parliament|bill:...] marker) ── */
.nav-parliament-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(79, 42, 140, 0.35) 0%, rgba(55, 30, 100, 0.45) 100%);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    box-sizing: border-box;
}
.nav-parliament-card:hover {
    background: linear-gradient(135deg, rgba(109, 60, 180, 0.45) 0%, rgba(79, 42, 140, 0.55) 100%);
    border-color: rgba(167, 139, 250, 0.55);
    transform: translateY(-1px);
}
.nav-parliament-card:active {
    transform: translateY(0);
}
.nav-parliament-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(167, 139, 250, 0.9);
}
.nav-parliament-icon svg,
.nav-parliament-icon i {
    width: 20px;
    height: 20px;
    stroke: rgba(167, 139, 250, 0.9);
}
.nav-parliament-text {
    flex: 1;
    min-width: 0;
}
.nav-parliament-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(220, 200, 255, 0.95);
    line-height: 1.3;
}
.nav-parliament-subtitle {
    font-size: 0.78rem;
    color: rgba(200, 180, 255, 0.6);
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-parliament-arrow {
    flex-shrink: 0;
    font-size: 1rem;
    color: rgba(167, 139, 250, 0.7);
    padding-left: 0.25rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STORY PANEL OVERHAUL — shimmer, overlapping fan cards, world update chips
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shimmer skeleton animation ─────────────────────────────────────────── */
@keyframes shimmer-sweep {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
.skeleton-bar {
    display: inline-block;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.06) 25%,
        rgba(255,255,255,0.14) 50%,
        rgba(255,255,255,0.06) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-sweep 2s ease-in-out infinite;
    border-radius: 6px;
    vertical-align: middle;
    flex-shrink: 0;
    pointer-events: none;
}
/* Time chip placeholder — matches .msg-time-chip content box so the shimmer
   sits naturally inside the padded pill without overflowing or dwarfing it. */
.skeleton-bar--time {
    width: 48px;
    height: 16px;
    border-radius: 8px;
}
/* Small/wide chip placeholders for outcome rows */
.skeleton-bar--chip     { width: 88px;  height: 22px; }
.skeleton-bar--chip-sm  { width: 64px;  height: 22px; }
.skeleton-bar--chip-md  { width: 112px; height: 22px; }
/* Suggested-action card placeholder */
.skeleton-bar--move {
    display: block;
    width: 100%;
    height: 72px;
    border-radius: 10px;
    margin-bottom: 0.5rem;
}
/* Section-label placeholder */
.skeleton-section-label {
    display: block;
    width: 76px;
    height: 9px;
    border-radius: 4px;
    margin-bottom: 0.38rem;
    background: rgba(255,255,255,0.08);
    background-size: 200% 100%;
    animation: shimmer-sweep 2s ease-in-out infinite;
}
.skeleton-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

/* ── Overlapping fan-card stack ─────────────────────────────────────────── */
/* Group prose + outcome + actions so they overlap cleanly */
.dm-response-stack {
    margin-bottom: 1rem;
    position: relative;
}
.dm-response-stack > .story-message {
    margin-bottom: 0;
    position: relative;
    z-index: 3;
    border-radius: 12px;
}
/* Outcome card: sits just behind the prose card */
.outcome-card {
    position: relative;
    z-index: 2;
    margin-top: -12px;
    background: rgba(12, 15, 24, 0.97);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 12px;
    padding: 1.1rem 1rem 0.8rem;
    overflow: hidden;
    max-height: 700px;
    transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1),
                opacity 0.4s ease,
                padding 0.4s ease,
                border-width 0.4s ease,
                margin-top 0.5s cubic-bezier(0.4,0,0.2,1);
}
/* Pre-reveal: fully collapsed under the prose card; animates open via class removal */
.outcome-card.card--pre-reveal,
.suggested-actions-card.card--pre-reveal {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    margin-top: 0 !important;
}
.outcome-card.outcome-card--collapsing {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    margin-top: 0;
}
/* Also apply collapse animation to suggested-actions-card */
.suggested-actions-card.outcome-card--collapsing {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    margin-top: 0;
}
/* Suggested actions card: sits just behind the outcome card */
.suggested-actions-card {
    position: relative;
    z-index: 1;
    margin-top: -12px;
    background: rgba(9, 11, 20, 0.98);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 12px;
    padding: 1.1rem 1rem 0.85rem;
    overflow: hidden;
    max-height: 700px;
    transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1),
                opacity 0.4s ease,
                padding 0.4s ease,
                border-width 0.4s ease,
                margin-top 0.5s cubic-bezier(0.4,0,0.2,1);
}
/* Prose card inside a stack gets a solid background so stacked cards look distinct */
.dm-response-stack > .story-message {
    background: #15161d !important;
}
/* Strip wrapper-added borders/pads from inner suggested-moves */
.suggested-actions-card .suggested-moves-wrapper {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.suggested-actions-card .suggested-moves-label {
    margin-bottom: 0.5rem;
}

/* Card section headers inside outcome / actions cards */
.outcome-card-header,
.actions-card-header {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.32);
    margin-bottom: 0.6rem;
    display: block;
}
.outcome-section {
    margin-bottom: 0.55rem;
}
.outcome-section:last-child { margin-bottom: 0; }
.outcome-section-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.28);
    margin-bottom: 0.3rem;
    display: block;
}

/* ── Story payload location transition ─────────────────────────────────── */
.outcome-section--location {
    margin-bottom: 0.7rem;
}
.outcome-section--location .outcome-section-label {
    margin-bottom: 0.45rem;
}
.location-update-card {
    position: relative;
    isolation: isolate;
    min-height: clamp(168px, 14vw, 188px);
    overflow: hidden;
    border: 1px solid rgba(0, 123, 255, 0.58);
    border-radius: 16px;
    background: linear-gradient(145deg, #172033, #090c13);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.26),
        inset 0 0 0 1px rgba(96, 165, 250, 0.08);
    cursor: pointer;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.location-update-card:hover,
.location-update-card:focus-visible {
    border-color: rgba(96, 165, 250, 0.96);
    transform: translateY(-1px);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(59, 130, 246, 0.24),
        0 0 22px rgba(0, 123, 255, 0.16),
        inset 0 0 0 1px rgba(147, 197, 253, 0.12);
    outline: none;
}
.location-update-card:active {
    transform: translateY(0);
}
.location-update-image,
.location-update-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.location-update-image {
    z-index: -2;
    object-fit: cover;
    object-position: center;
    transition: transform 0.22s ease, filter 0.22s ease;
}
.location-update-card:hover .location-update-image,
.location-update-card:focus-visible .location-update-image {
    transform: scale(1.012);
    filter: brightness(1.04);
}
.location-update-shade {
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(5, 8, 15, 0.05) 8%, rgba(5, 8, 15, 0.18) 42%, rgba(5, 8, 15, 0.9) 100%),
        linear-gradient(90deg, rgba(5, 8, 15, 0.48), transparent 62%);
}
.location-update-content {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: clamp(0.9rem, 1.6vw, 1.2rem);
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78);
}
.location-update-route {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.76rem, 0.9vw, 0.88rem);
}
.location-update-route em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.location-update-player-marker {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #4285f4;
    box-shadow: 0 0 10px rgba(66, 133, 244, 0.72);
}
.location-update-title {
    font-size: clamp(1.35rem, 1.75vw, 1.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.location-update-meta {
    margin-top: 0.12rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.82rem, 1vw, 0.95rem);
}

@media (max-width: 720px) {
    .location-update-card {
        min-height: 168px;
        border-radius: 14px;
    }
    .location-update-title {
        font-size: 1.35rem;
    }
    .location-update-route {
        font-size: 0.78rem;
    }
    .location-update-meta {
        font-size: 0.84rem;
    }
}

/* ── Unify chip heights: issue chips now match effect-chip ──────────────── */
.issue-progress-chip {
    font-size: 0.78rem !important;
    padding: 0.2rem 0.55rem !important;
}
.issue-progress-chip .ip-prog-delta {
    font-size: 0.78rem !important;
}
.issue-worsening-chip {
    font-size: 0.78rem !important;
    padding: 0.2rem 0.55rem !important;
}
.issue-worsening-chip .ip-worsen-delta {
    font-size: 0.78rem !important;
}

/* ── Promise progress chips ─────────────────────────────────────────────── */
.promise-progress-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.promise-progress-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.28);
    border-radius: 5px;
    padding: 0.2rem 0.55rem;
    color: rgba(253,230,138,0.9);
    cursor: default;
}
.promise-progress-chip.promise-chip--negative {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.28);
    color: rgba(252,165,165,0.9);
}
.promise-progress-chip .pp-delta {
    font-weight: 700;
    color: #fde68a;
}
.promise-progress-chip.promise-chip--negative .pp-delta {
    color: #f87171;
}

/* ── Strength progress chips ─────────────────────────────────────────────── */
.strength-progress-section {
    margin-top: 0.55rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.outcome-card .strength-progress-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.strength-progress-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.strength-progress-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(168,85,247,0.1);
    border: 1px solid rgba(168,85,247,0.28);
    border-radius: 5px;
    padding: 0.2rem 0.55rem;
    color: rgba(216,180,254,0.9);
    cursor: default;
}
.strength-eroding-chip {
    background: rgba(249,115,22,0.1);
    border-color: rgba(249,115,22,0.28);
    color: rgba(253,186,116,0.9);
}
.sp-delta {
    font-weight: 700;
    color: #c084fc;
    font-size: 0.78rem;
}
.sp-erode-delta {
    color: #fb923c;
}
.sp-trend-tag {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    margin-left: 0.3rem;
    text-transform: uppercase;
}
.sp-trend-bad {
    background: rgba(249,115,22,0.18);
    color: #fdba74;
}
.sp-trend-good {
    background: rgba(168,85,247,0.18);
    color: #d8b4fe;
}
.sp-trend-neutral {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.55);
}

/* ── Lifecycle event chips (created / resolved / removed) ───────────────── */
.lc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.55rem;
    cursor: default;
}
.lc-sym {
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
}
/* New promise created — teal/blue */
.lc-chip--new-promise {
    background: rgba(56,189,248,0.1);
    border: 1px solid rgba(56,189,248,0.3);
    color: rgba(125,211,252,0.9);
}
.lc-chip--new-promise .lc-sym { color: #38bdf8; }
/* New issue emerged — amber (issues = problems) */
.lc-chip--new-issue {
    background: rgba(251,146,60,0.1);
    border: 1px solid rgba(251,146,60,0.28);
    color: rgba(253,186,116,0.9);
}
.lc-chip--new-issue .lc-sym { color: #fb923c; }
/* New national strength established — purple */
.lc-chip--new-strength {
    background: rgba(168,85,247,0.12);
    border: 1px solid rgba(168,85,247,0.3);
    color: rgba(216,180,254,0.9);
}
.lc-chip--new-strength .lc-sym { color: #c084fc; }
/* National strength dissolved — muted grey */
.lc-chip--lost-strength {
    background: rgba(107,114,128,0.1);
    border: 1px solid rgba(107,114,128,0.28);
    color: rgba(209,213,219,0.85);
}
.lc-chip--lost-strength .lc-sym { color: #9ca3af; }
/* Promise fulfilled — green */
.lc-chip--fulfilled-promise {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.3);
    color: rgba(134,239,172,0.9);
}
.lc-chip--fulfilled-promise .lc-sym { color: #4ade80; }
/* Issue resolved — green */
.lc-chip--check {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.3);
    color: rgba(134,239,172,0.9);
}
.lc-chip--check .lc-sym { color: #4ade80; }
/* Promise removed / renounced — muted red */
.lc-chip--removed {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.22);
    color: rgba(252,165,165,0.85);
}
.lc-chip--removed .lc-sym { color: #f87171; }
.lc-status-tag {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin-left: 0.2rem;
}

/* ── World Update chips (squarer, category-coloured border) ─────────────── */
.world-update-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.world-update-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
    cursor: default;
}
.world-update-chip .wu-cat-icon {
    flex-shrink: 0;
    stroke: currentColor;
}
.world-update-chip .wu-prefix {
    font-style: normal;
    font-size: 0.7rem;
    opacity: 0.75;
    letter-spacing: 0;
}
/* Category colour tokens */
.wu-lore {
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.38);
    color: #fde68a;
}
.wu-dossier {
    background: rgba(34,211,238,0.09);
    border-color: rgba(34,211,238,0.35);
    color: #a5f3fc;
}
.wu-character {
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.32);
    color: #86efac;
}
.wu-wm {
    background: rgba(167,139,250,0.1);
    border-color: rgba(167,139,250,0.32);
    color: #ddd6fe;
}
.wu-place {
    background: rgba(251,146,60,0.1);
    border-color: rgba(251,146,60,0.32);
    color: #fed7aa;
}
.wu-other {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.65);
}

/* ── Settings Modal ───────────────────────────────────────────────────────── */
.settings-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.settings-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.settings-modal-panel {
    background: rgba(12, 17, 24, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
    padding: 1.4rem 1.6rem 1.6rem;
    width: 280px;
    max-width: calc(100vw - 2rem);
    transform: scale(0.92) translateY(10px);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
    opacity: 0;
}
.settings-modal-overlay.open .settings-modal-panel {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.settings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}
.settings-modal-title {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}
.settings-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color 0.15s ease, background 0.15s ease;
    line-height: 1;
}
.settings-modal-close:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.08);
}
.settings-modal-close:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.9);
    outline-offset: 2px;
}
.settings-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Story response feedback ─────────────────────────────────────────────── */
.story-feedback-controls {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 1.15rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    color: rgba(203, 213, 225, 0.48);
    font-size: 0.68rem;
    line-height: 1;
    white-space: normal;
}
.story-feedback-prompt {
    margin-right: 0.25rem;
    transition: color 150ms ease;
}
.story-feedback-controls:hover .story-feedback-prompt,
.story-feedback-controls:focus-within .story-feedback-prompt {
    color: rgba(203, 213, 225, 0.7);
}
.story-feedback-control {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 30px;
    height: 30px;
    padding: 0 0.4rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(203, 213, 225, 0.46);
    font: inherit;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}
.story-feedback-control svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.story-feedback-control:hover,
.story-feedback-control:focus-visible {
    color: rgba(241, 245, 249, 0.9);
    background: rgba(255, 255, 255, 0.065);
}
.story-feedback-control:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.78);
    outline-offset: 1px;
}
.story-feedback-control:active { transform: scale(0.94); }
.story-feedback-control[aria-pressed="true"][data-feedback-rating="up"] {
    color: #6ee7a8;
    background: rgba(34, 197, 94, 0.12);
}
.story-feedback-control[aria-pressed="true"][data-feedback-rating="down"] {
    color: #fb8b92;
    background: rgba(239, 68, 68, 0.12);
}
.story-feedback-report[aria-pressed="true"] {
    color: #fbbf76;
    background: rgba(245, 158, 11, 0.1);
}
.story-feedback-divider {
    width: 1px;
    height: 14px;
    margin: 0 0.15rem;
    background: rgba(255, 255, 255, 0.09);
}
.story-feedback-status {
    min-width: 3rem;
    margin-left: 0.2rem;
    color: rgba(148, 163, 184, 0.72);
}
.story-narration-replay {
    margin-left: auto;
}
.story-narration-replay[aria-pressed="true"] {
    color: #7dd3fc;
    background: rgba(14, 165, 233, 0.11);
}
.story-narration-replay.is-loading svg {
    animation: storyNarrationPulse 850ms ease-in-out infinite alternate;
}
@keyframes storyNarrationPulse {
    from { opacity: 0.38; }
    to { opacity: 1; }
}

.story-feedback-overlay {
    z-index: 2210;
    background: rgba(3, 7, 13, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.story-feedback-panel {
    width: 540px;
    padding: 1.4rem;
    background: rgba(10, 14, 20, 0.99);
}
.story-feedback-panel .settings-modal-header {
    align-items: flex-start;
    margin-bottom: 1rem;
}
.story-feedback-eyebrow {
    display: block;
    margin-bottom: 0.22rem;
    color: #60a5fa;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.story-feedback-title {
    margin: 0;
    color: #f8fafc;
    font-size: 1.35rem;
    font-weight: 780;
    letter-spacing: -0.025em;
}
.story-feedback-form { display: flex; flex-direction: column; gap: 0.85rem; }
.story-feedback-reasons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    border: 0;
}
.story-feedback-reasons legend,
.story-feedback-note-label {
    grid-column: 1 / -1;
    margin-bottom: 0.18rem;
    color: rgba(226, 232, 240, 0.68);
    font-size: 0.72rem;
    font-weight: 700;
}
.story-feedback-reasons label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 42px;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.105);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(241, 245, 249, 0.82);
    font-size: 0.76rem;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}
.story-feedback-reasons label:hover { background: rgba(255, 255, 255, 0.05); }
.story-feedback-reasons label:has(input:checked) {
    border-color: rgba(96, 165, 250, 0.65);
    background: rgba(37, 99, 235, 0.13);
    color: #eff6ff;
}
.story-feedback-reasons input { accent-color: #3b82f6; }
.story-feedback-note-label { margin-bottom: -0.48rem; }
#storyFeedbackNote {
    width: 100%;
    min-height: 104px;
    resize: vertical;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    color: #f8fafc;
    padding: 0.75rem 0.8rem;
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.45;
}
#storyFeedbackNote::placeholder { color: rgba(148, 163, 184, 0.52); }
#storyFeedbackNote:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.78);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.story-feedback-attachment {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: -0.15rem 0 0;
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.67rem;
    line-height: 1.45;
}
.story-feedback-attachment svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 1px; }
.story-feedback-error {
    color: #fca5a5;
    font-size: 0.74rem;
}
.story-feedback-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-top: 0.15rem;
}
.story-feedback-actions .btn { min-width: 108px; }

@media (max-width: 600px) {
    .story-feedback-prompt { display: none; }
    .story-feedback-controls { margin-top: 0.9rem; }
    .story-feedback-control { min-width: 36px; height: 36px; }
    .story-feedback-report { margin-left: 0.05rem; }
    .story-feedback-panel {
        width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        overflow-y: auto;
        padding: 1.05rem;
        border-radius: 14px;
    }
    .story-feedback-reasons { grid-template-columns: 1fr; }
    .story-feedback-actions { position: sticky; bottom: -1.05rem; margin: 0 -1.05rem -1.05rem; padding: 0.8rem 1.05rem 1rem; background: #0a0e14; }
}

/* The in-game menu deliberately reuses the landing screen's button classes. */
#settingsModal {
    background: rgba(3,7,13,0.58);
    backdrop-filter: blur(14px) saturate(0.74);
    -webkit-backdrop-filter: blur(14px) saturate(0.74);
    transition: opacity 220ms ease;
}
#settingsModal .settings-modal-panel {
    width: 360px;
    padding: 1.35rem;
    border-radius: 16px;
    background: rgba(12,17,24,0.98);
    border-color: rgba(255,255,255,0.12);
    transform: scale(0.97) translateY(12px);
    transition: transform 230ms cubic-bezier(.2,.78,.24,1), opacity 180ms ease;
}
#settingsModal.open .settings-modal-panel {
    transform: scale(1) translateY(0);
}
#settingsModal .settings-modal-header {
    margin-bottom: 0.85rem;
    padding: 0.05rem 0.1rem;
    border-bottom: 0;
}
#settingsModal .settings-modal-title {
    gap: 0.55rem;
    font-size: 1.08rem;
    letter-spacing: -0.025em;
}
#settingsModal .settings-modal-title .me-2 { margin-right: 0 !important; }
#settingsModal .settings-modal-close {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
}
#settingsModal .settings-modal-close:hover {
    background: rgba(51,72,96,0.52);
    border-color: rgba(148,187,228,0.36);
}
#settingsModal .settings-modal-body { gap: 0.65rem; }
#settingsModal .menu-actions {
    max-width: none;
}

@media (max-width: 430px) {
    #settingsModal .settings-modal-panel {
        width: min(360px, calc(100vw - 1.25rem));
        padding: 1.05rem;
    }
}

/* ── Player Settings Modal (wider variant) ─────────────────────────────────── */
.player-settings-panel {
    width: 560px;
    max-height: min(88vh, 780px);
}

.main-menu-settings-panel {
    max-height: min(88vh, 760px);
}

.player-settings-panel .settings-modal-body {
    min-height: 330px;
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

.player-settings-panel .settings-modal-header {
    margin-bottom: 0.8rem;
}

.settings-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0 -0.15rem 1.15rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.settings-tab {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.65rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.68);
    background: rgba(7, 11, 18, 0.36);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.015em;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.settings-tab svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.settings-tab:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
}

.settings-tab.is-active {
    color: #fff;
    border-color: rgba(147, 197, 253, 0.8);
    background: rgba(59, 130, 246, 0.14);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.settings-tab:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.9);
    outline-offset: 2px;
}

.settings-tab-panel {
    display: none;
    animation: settings-page-enter 180ms ease both;
}

.settings-tab-panel.is-active {
    display: block;
}

.settings-page-intro {
    margin-bottom: 0.9rem;
}

.settings-page-intro h3 {
    margin: 0 0 0.3rem;
    color: #f1f5f9;
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.settings-page-intro p {
    margin: 0;
    color: rgba(148, 163, 184, 0.58);
    font-size: 0.73rem;
    line-height: 1.5;
}

@keyframes settings-page-enter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 620px) {
    .player-settings-panel {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        padding: 1rem;
    }
    .player-settings-panel .settings-modal-body {
        min-height: 300px;
        max-height: calc(100dvh - 190px);
    }
    .settings-tab {
        gap: 5px;
        padding: 0.6rem 0.25rem;
        font-size: 0.68rem;
    }
    .settings-tab svg {
        width: 14px;
        height: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-tab-panel { animation: none; }
}

.pref-row--action {
    align-items: center;
}

.pref-row--action .btn {
    flex: 0 0 auto;
    min-width: 104px;
}

/* ── In-game Load Game panel ──────────────────────────────────────────────── */
.in-game-load-panel {
    width: min(600px, calc(100vw - 2rem));
}
.in-game-load-panel .settings-modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.ai-context-inspector-panel {
    width: min(920px, calc(100vw - 32px));
    max-width: 920px;
    max-height: min(86vh, 900px);
}

.ai-context-inspector-panel .settings-modal-body {
    overflow: auto;
}

.ai-context-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ai-context-mode {
    color: #8fb9ff;
    font: 700 0.75rem/1.2 var(--font-family, system-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ai-context-trace-list {
    display: grid;
    gap: 10px;
}

.ai-context-trace {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    background: rgba(8, 15, 28, 0.72);
    overflow: hidden;
}

.ai-context-trace summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: #e6edf8;
    cursor: pointer;
}

.ai-context-trace summary span {
    color: #8290a8;
    font-size: 0.8rem;
}

.ai-context-trace pre {
    max-height: 480px;
    margin: 0;
    padding: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    color: #b7c7df;
    background: rgba(2, 6, 15, 0.55);
    white-space: pre-wrap;
    overflow: auto;
    font-size: 0.75rem;
}

.ai-context-subtrace {
    margin: 0 12px 10px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.46);
    overflow: hidden;
}

.ai-context-subtrace > summary {
    padding: 9px 11px;
    font-size: 0.82rem;
}

.ai-context-model-call > summary strong {
    color: #9fc4ff;
}

.ai-context-call-title,
.ai-context-message-label {
    color: #71819b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ai-context-call-title {
    padding: 4px 14px 10px;
}

.ai-context-message-label {
    padding: 10px 12px 7px;
    border-top: 1px solid rgba(148, 163, 184, 0.13);
}

.ai-context-capture-disabled {
    margin: 10px 12px;
    padding: 10px 12px;
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 7px;
    color: #dfb768;
    background: rgba(120, 53, 15, 0.13);
    font-size: 0.78rem;
    line-height: 1.45;
}
.current-save-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.5);
    color: #60a5fa;
    letter-spacing: 0.04em;
    vertical-align: middle;
    margin-left: 0.4rem;
}

#settingsModal .settings-modal-panel {
    padding-top: 1.6rem;
}

.pref-section {
    padding-top: 0.1rem;
}

.pref-section + .pref-section {
    margin-top: 1.35rem;
}

.pref-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 0.85rem;
}

.sound-now-playing {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.38);
}

.sound-now-playing-art {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: rgba(147, 197, 253, 0.9);
}

.sound-now-playing-art svg {
    width: 19px;
    height: 19px;
}

.sound-now-playing-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.sound-now-playing-copy span {
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sound-now-playing-copy strong {
    overflow: hidden;
    color: #f1f5f9;
    font-size: 0.84rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sound-now-playing-actions {
    display: flex;
    gap: 0.35rem;
}

.sound-player-button {
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 7px;
    color: rgba(226, 232, 240, 0.82);
    background: transparent;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.sound-player-button:hover:not(:disabled) {
    border-color: rgba(147, 197, 253, 0.72);
    color: #fff;
    background: rgba(59, 130, 246, 0.12);
}

.sound-player-button:disabled {
    cursor: default;
    opacity: 0.3;
}

.sound-player-button svg {
    width: 15px;
    height: 15px;
}

.narration-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.narration-channel-option {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.3);
    cursor: pointer;
}

.narration-channel-option > span:first-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.narration-channel-option strong {
    color: #e2e8f0;
    font-size: 0.8rem;
    font-weight: 650;
}

.narration-channel-option small {
    overflow: hidden;
    color: rgba(148, 163, 184, 0.58);
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pref-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pref-row:last-child { border-bottom: none; }

.pref-row--stacked {
    align-items: stretch;
    flex-direction: column;
    gap: 0.8rem;
}

.pref-row--volume {
    align-items: stretch;
    flex-direction: column;
    gap: 0.7rem;
}

.pref-volume-control {
    display: grid;
    width: 100%;
    grid-template-columns: 18px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 0.65rem;
    color: rgba(191, 219, 254, 0.78);
}

.pref-volume-control svg {
    width: 17px;
    height: 17px;
}

.pref-volume-control input[type="range"] {
    width: 100%;
    accent-color: #3b82f6;
    cursor: pointer;
}

.pref-volume-control input[type="range"]:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

.pref-volume-control output {
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.pref-row-text { flex: 1; min-width: 0; }

.pref-row-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 0.3rem;
}

.pref-row-desc {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.55;
}

.pref-segmented {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.pref-segmented-option {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.55rem 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(7, 11, 18, 0.36);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.pref-segmented-option span {
    font-size: 0.78rem;
    font-weight: 700;
}

.pref-segmented-option small {
    overflow: hidden;
    max-width: 100%;
    color: rgba(148, 163, 184, 0.55);
    font-size: 0.62rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pref-segmented-option:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.1);
}

.pref-segmented-option.is-selected {
    color: #fff;
    border-color: rgba(147, 197, 253, 0.78);
    background: rgba(59, 130, 246, 0.14);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.pref-segmented-option.is-selected small {
    color: rgba(191, 219, 254, 0.7);
}

.pref-segmented-option:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.9);
    outline-offset: 2px;
}

.pref-segmented--voices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 620px);
    margin-inline: auto;
}

.pref-segmented--voices .pref-segmented-option {
    align-items: flex-start;
    min-height: 74px;
    padding: 0.8rem 1rem;
    text-align: left;
}

.pref-segmented--voices .pref-segmented-option span {
    font-size: 0.88rem;
    line-height: 1.2;
    white-space: nowrap;
}

.pref-segmented--voices .pref-segmented-option small {
    color: rgba(147, 197, 253, 0.72);
    font-size: 0.68rem;
}

.pref-segmented--voices .pref-segmented-option.is-selected small {
    color: rgba(191, 219, 254, 0.9);
}

/* Phrase-level Story streaming: a soft optical settle, never a typewriter cursor. */
.stream-reveal-phrase {
    animation: story-stream-phrase-in 240ms cubic-bezier(0.2, 0.72, 0.25, 1) both;
}

.stream-reveal-block {
    animation: story-stream-block-in 320ms cubic-bezier(0.16, 0.8, 0.3, 1) both;
}

@keyframes story-stream-phrase-in {
    from {
        opacity: 0.08;
        filter: blur(1.8px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes story-stream-block-in {
    from {
        opacity: 0;
        filter: blur(2px);
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .stream-reveal-phrase,
    .stream-reveal-block {
        animation: none;
    }
}

/* Toggle switch */
.pref-toggle {
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    display: block;
}
.pref-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.pref-toggle-track {
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease, border-color 0.2s ease;
    position: relative;
}
.pref-toggle input:checked + .pref-toggle-track {
    background: #3b82f6;
    border-color: #3b82f6;
}
.pref-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.pref-toggle input:checked + .pref-toggle-track .pref-toggle-thumb {
    transform: translateX(20px);
}

/* ================================================================
   RESPONSIVE GAME SHELL

   One mode contract owns the top menu, primary navigation, and
   bottom action bar. Panel internals deliberately remain independent.
   ================================================================ */

/* Each mode owns its complete header contract so legacy breakpoint rules
   cannot partially transform a mode before collision measurement. */
body[data-shell-mode="desktop"] .game-header {
    padding: 0.75rem 0;
}

body[data-shell-mode="desktop"] .game-header-row,
body[data-shell-mode="inline"] .game-header-row {
    gap: 1rem;
    grid-template-columns: 1fr auto 1fr;
}

body[data-shell-mode="desktop"] .game-header-center,
body[data-shell-mode="inline"] .game-header-center {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    overflow: visible;
}

body[data-shell-mode="desktop"] .calendar-history-wrap {
    width: 340px;
}

body[data-shell-mode="desktop"] .calendar-display {
    min-width: 340px;
    max-width: 340px;
}

/* Normal laptop/desktop widths keep the mandate titles. Only the less
   important country subtitle is disclosed before icon-only mode is needed. */
body[data-shell-mode="desktop"][data-shell-detail="reduced"] .country-text-block {
    display: none;
}

body[data-shell-mode="desktop"][data-shell-detail="reduced"] .game-header-row {
    gap: 0.5rem;
}

body[data-shell-mode="desktop"][data-shell-detail="reduced"] .calendar-history-wrap {
    width: 300px;
}

body[data-shell-mode="desktop"][data-shell-detail="reduced"] .calendar-display {
    min-width: 300px;
    max-width: 300px;
}

body[data-shell-mode="desktop"][data-shell-detail="reduced"] .ip-pill {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

body[data-shell-mode="desktop"] .country-text-block {
    display: block;
    max-width: 150px;
    opacity: 1;
}

body[data-shell-mode="desktop"] .ip-pill-label {
    display: inline-block;
    max-width: 80px;
    opacity: 1;
}

body[data-shell-mode="desktop"] .ip-pill {
    min-height: 0;
    padding: 0.48rem 1.2rem;
    font-size: 0.88rem;
}

/* Inline compact: preserve the canonical single row, but disclose secondary
   labels before allowing any control to collide. */
body[data-shell-mode="inline"] .country-text-block,
body[data-shell-mode="inline"] .ip-pill-label {
    display: none;
}

body[data-shell-mode="inline"] .calendar-history-wrap {
    width: 300px;
}

body[data-shell-mode="inline"] .game-header {
    padding: 0.5rem 0;
}

body[data-shell-mode="inline"] .calendar-display {
    min-width: 300px;
    max-width: 300px;
    width: 100%;
}

body[data-shell-mode="desktop"] .cal-body,
body[data-shell-mode="inline"] .cal-body,
body[data-shell-mode="compact"] .cal-body {
    flex: 0 0 auto;
}

/* Calendar composition is shared across every shell mode. The whole
   icon/date/time group, not merely its outer box, is centred. */
body.game-body .calendar-display {
    justify-content: center;
    text-align: center;
}

body.game-body .cal-body {
    flex: 0 0 auto;
}

body[data-shell-mode="inline"] .ip-pill {
    min-height: 40px;
    padding: 0.45rem 0.7rem;
}

body[data-shell-mode="inline"] .ip-pill > svg {
    flex: 0 0 18px;
    height: 18px;
    width: 18px;
}

/* Compact desktop / tablet: preserve control sizes and reflow the header. */
body.game-body[data-shell-mode="compact"] {
    --game-header-h: 7.25rem;
    --tab-bar-h: 4rem;
    --stats-bar-h: 4.5rem;
    --map-ui-top: calc(var(--game-header-h) + var(--tab-bar-h));
}

body[data-shell-mode="compact"] .game-header {
    padding: 0.5rem 0;
    min-height: var(--game-header-h);
}

body[data-shell-mode="compact"] .game-header .container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

body[data-shell-mode="compact"] .game-header-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-areas:
        "country calendar calendar calendar actions"
        ". strength issue promise .";
    column-gap: 0.65rem;
    row-gap: 0.5rem;
}

body[data-shell-mode="compact"] .game-header-left {
    grid-area: country;
    justify-self: start;
}

body[data-shell-mode="compact"] .game-header-center {
    display: contents;
}

body[data-shell-mode="compact"] #strengthsBtnWrap { grid-area: strength; }
body[data-shell-mode="compact"] #issuesBtnWrap { grid-area: issue; }
body[data-shell-mode="compact"] #promisesBtnWrap { grid-area: promise; }

body[data-shell-mode="compact"] .gh-pills-left,
body[data-shell-mode="compact"] .gh-pills-right {
    display: contents;
}

body[data-shell-mode="compact"] .ip-pill-label {
    display: inline-block;
    max-width: 80px;
    opacity: 1;
}

body[data-shell-mode="compact"] .calendar-history-wrap {
    grid-area: calendar;
    justify-self: center;
}

body[data-shell-mode="compact"] .calendar-display {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    padding: 0.55rem 0.8rem 0.75rem;
}

body[data-shell-mode="compact"] .game-header-right {
    grid-area: actions;
    justify-self: end;
}

/* Keep the primary navigation attached to the header throughout compact mode.
   This intentionally wins over the legacy max-width: 576px view-toggle margin. */
body[data-shell-mode="compact"] .view-toggle {
    margin-top: -3px;
}

body[data-shell-mode="inline"] .game-content > .row,
body[data-shell-mode="compact"] .game-content > .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

body[data-shell-mode="inline"] .game-content > .row > .col-12,
body[data-shell-mode="compact"] .game-content > .row > .col-12 {
    padding-left: 0;
    padding-right: 0;
}

/* Fixed-size identity and action controls: horizontal space is reclaimed
   through reflow and disclosure, never by shrinking the artwork. */
body[data-shell-mode="desktop"] .country-flag-small img,
body[data-shell-mode="inline"] .country-flag-small img,
body[data-shell-mode="compact"] .country-flag-small img,
body[data-shell-mode="mobile"] .country-flag-small img {
    width: 48px !important;
    height: 32px !important;
}

body[data-shell-mode="desktop"] .settings-btn,
body[data-shell-mode="inline"] .settings-btn,
body[data-shell-mode="compact"] .settings-btn,
body[data-shell-mode="mobile"] .settings-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
}

body[data-shell-mode="desktop"] .settings-btn svg,
body[data-shell-mode="inline"] .settings-btn svg,
body[data-shell-mode="compact"] .settings-btn svg,
body[data-shell-mode="mobile"] .settings-btn svg {
    width: 18px !important;
    height: 18px !important;
}

body[data-shell-mode="compact"] .ip-pill,
body[data-shell-mode="mobile"] .ip-pill {
    min-height: 40px;
    padding: 0.45rem 0.9rem;
    font-size: 0.84rem;
}

body[data-shell-mode="compact"] .ip-pill > svg,
body[data-shell-mode="mobile"] .ip-pill > svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

body[data-shell-mode="compact"] .country-text-block {
    max-width: min(15vw, 180px);
    opacity: 1;
}

/* At the mobile/compact boundary the 260px calendar and fixed settings button
   leave room for the flag, but not the country name. Keep the same flag-only
   disclosure used by mobile until the first compact row can contain all three. */
@media (max-width: 560px) {
    body[data-shell-mode="compact"] .country-text-block {
        display: none;
    }

    body[data-shell-mode="compact"] .country-info,
    body[data-shell-mode="compact"] .country-flag-small {
        gap: 0;
        margin-right: 0;
    }
}

/* Desktop and compact bottom bars share a real three-zone grid. Text remains
   present until measured content proves that it cannot fit. */
body[data-shell-mode="desktop"] .stats-quick-row,
body[data-shell-mode="inline"] .stats-quick-row,
body[data-shell-mode="compact"] .stats-quick-row {
    min-height: var(--stats-bar-h);
    padding: 0.65rem 0;
}

body[data-shell-mode="compact"] .stats-bar,
body[data-shell-mode="mobile"] .stats-bar {
    height: var(--stats-bar-h);
    max-height: none;
}

body[data-shell-mode="compact"] .stats-bar.expanded,
body[data-shell-mode="mobile"] .stats-bar.expanded {
    height: min(88dvh, 900px);
    max-height: none;
}

body[data-shell-mode="desktop"] .stats-quick-row .row,
body[data-shell-mode="inline"] .stats-quick-row .row,
body[data-shell-mode="compact"] .stats-quick-row .row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
}

body[data-shell-mode="desktop"] .stats-quick-row .order-1,
body[data-shell-mode="desktop"] .stats-quick-row .order-2,
body[data-shell-mode="desktop"] .stats-quick-row .order-3,
body[data-shell-mode="inline"] .stats-quick-row .order-1,
body[data-shell-mode="inline"] .stats-quick-row .order-2,
body[data-shell-mode="inline"] .stats-quick-row .order-3,
body[data-shell-mode="compact"] .stats-quick-row .order-1,
body[data-shell-mode="compact"] .stats-quick-row .order-2,
body[data-shell-mode="compact"] .stats-quick-row .order-3 {
    position: static;
    width: auto;
    padding: 0;
    transform: none;
}

body[data-shell-mode="desktop"] .stats-quick-row .order-2 > .d-flex,
body[data-shell-mode="inline"] .stats-quick-row .order-2 > .d-flex,
body[data-shell-mode="compact"] .stats-quick-row .order-2 > .d-flex {
    display: flex !important;
    gap: clamp(0.5rem, 1.25vw, 1.5rem);
    justify-content: space-between;
}

body[data-shell-mode="desktop"] .stat-item,
body[data-shell-mode="inline"] .stat-item,
body[data-shell-mode="compact"] .stat-item {
    flex: 0 0 auto;
    gap: 0.3rem;
    margin: 0;
    min-width: 0;
}

body[data-stats-density="condensed"] .stat-item .stat-label {
    display: none;
}

body:not([data-stats-density="condensed"])[data-shell-mode="desktop"] .stat-item .stat-label,
body:not([data-stats-density="condensed"])[data-shell-mode="inline"] .stat-item .stat-label,
body:not([data-stats-density="condensed"])[data-shell-mode="compact"] .stat-item .stat-label {
    flex: 0 0 auto;
    max-width: none;
    opacity: 1;
}

body[data-shell-mode="desktop"] .stat-item > svg,
body[data-shell-mode="inline"] .stat-item > svg,
body[data-shell-mode="compact"] .stat-item > svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

body[data-shell-mode="desktop"] .stat-value,
body[data-shell-mode="inline"] .stat-value,
body[data-shell-mode="compact"] .stat-value {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 960px) {
    body[data-shell-mode="compact"] .stats-expand-btn .stat-label,
    body[data-shell-mode="inline"] .stats-expand-btn .stat-label,
    body[data-shell-mode="inline"] #endTurnBtn .end-turn-label,
    body[data-shell-mode="compact"] #endTurnBtn .end-turn-label {
        display: none;
    }

    body[data-shell-mode="compact"] .stats-expand-btn,
    body[data-shell-mode="inline"] .stats-expand-btn,
    body[data-shell-mode="inline"] #endTurnBtn,
    body[data-shell-mode="compact"] #endTurnBtn {
        min-width: 48px;
        min-height: 44px;
        padding: 0.55rem;
        justify-content: center;
    }
}

/* Mobile: purpose-built two-tier menu and full-width primary navigation. */
body.game-body[data-shell-mode="mobile"] {
    --game-header-h: 7.25rem;
    --tab-bar-h: 3.75rem;
    --stats-bar-h: 4rem;
    --map-ui-top: calc(var(--game-header-h) + var(--tab-bar-h));
}

/* Narrow map workspace: the layer sidebar becomes a bottom sheet. Both the
   sheet trigger and zoom stack share the corrected map UI anchor. */
body[data-shell-mode="compact"] .map-mobile-controls-toggle,
body[data-shell-mode="mobile"] .map-mobile-controls-toggle {
    align-items: center;
    background: rgba(7, 12, 22, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.28), inset 0 1px rgba(255,255,255,0.05);
    color: #dbeafe;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 7px;
    left: 12px;
    min-height: 38px;
    padding: 0.5rem 0.7rem;
    position: fixed;
    top: calc(var(--map-ui-top) + 10px);
    z-index: 15;
}

body[data-shell-mode="compact"] .map-mobile-controls-toggle svg,
body[data-shell-mode="mobile"] .map-mobile-controls-toggle svg {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 16px;
}

body[data-shell-mode="compact"] .map-controls-group,
body[data-shell-mode="mobile"] .map-controls-group {
    align-items: stretch;
    background: rgba(8, 13, 23, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    bottom: var(--stats-bar-h);
    box-shadow: 0 -18px 56px rgba(0,0,0,0.55);
    display: flex;
    gap: 10px;
    left: 0;
    max-height: min(62vh, 430px);
    opacity: 0;
    overflow-y: auto;
    padding: 0 14px 16px;
    right: 0;
    top: auto;
    transform: translateY(calc(100% + 18px));
    transition: transform 0.24s cubic-bezier(.2,.8,.2,1), opacity 0.18s ease, visibility 0.24s;
    visibility: hidden;
    width: 100%;
    z-index: 92;
}

body[data-shell-mode="compact"] .map-controls-group.is-mobile-open,
body[data-shell-mode="mobile"] .map-controls-group.is-mobile-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

body[data-shell-mode="compact"] .map-mobile-sheet-header,
body[data-shell-mode="mobile"] .map-mobile-sheet-header {
    align-items: center;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 32px 1fr 32px;
    min-height: 52px;
    position: relative;
}

body[data-shell-mode="compact"] .map-mobile-sheet-handle,
body[data-shell-mode="mobile"] .map-mobile-sheet-handle {
    background: rgba(148,163,184,0.38);
    border-radius: 999px;
    height: 4px;
    left: 50%;
    position: absolute;
    top: 8px;
    transform: translateX(-50%);
    width: 42px;
}

body[data-shell-mode="compact"] .map-mobile-sheet-title,
body[data-shell-mode="mobile"] .map-mobile-sheet-title {
    color: #f8fafc;
    font-size: 0.9rem;
    font-weight: 750;
    grid-column: 2;
    justify-self: center;
    padding-top: 7px;
}

body[data-shell-mode="compact"] .map-mobile-sheet-close,
body[data-shell-mode="mobile"] .map-mobile-sheet-close {
    background: transparent;
    border: 0;
    color: #94a3b8;
    font-size: 1.45rem;
    grid-column: 3;
    height: 32px;
    line-height: 1;
    padding: 0;
    width: 32px;
}

body[data-shell-mode="compact"] .map-layer-tabs,
body[data-shell-mode="mobile"] .map-layer-tabs {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
}

body[data-shell-mode="compact"] .map-layer-tab,
body[data-shell-mode="mobile"] .map-layer-tab {
    justify-content: center;
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
}

body[data-shell-mode="compact"] .map-layers-wrap,
body[data-shell-mode="mobile"] .map-layers-wrap,
body[data-shell-mode="compact"] .map-layer-settings,
body[data-shell-mode="mobile"] .map-layer-settings {
    width: 100%;
}

body[data-shell-mode="compact"] .map-layers-menu,
body[data-shell-mode="mobile"] .map-layers-menu {
    background: rgba(18, 29, 48, 0.72);
    box-shadow: none;
    display: none;
    left: auto;
    margin-top: 8px;
    min-width: 0;
    position: static;
    top: auto;
    transform-origin: top center;
    width: 100%;
}

body[data-shell-mode="compact"] .map-layers-wrap.is-open .map-layers-menu,
body[data-shell-mode="mobile"] .map-layers-wrap.is-open .map-layers-menu {
    display: block;
}

body[data-shell-mode="compact"] .map-mobile-controls-backdrop,
body[data-shell-mode="mobile"] .map-mobile-controls-backdrop {
    background: rgba(1,5,12,0.44);
    border: 0;
    bottom: var(--stats-bar-h);
    display: block;
    inset-inline: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: var(--game-header-h);
    transition: opacity 0.18s ease;
    visibility: hidden;
    z-index: 91;
}

body.map-controls-sheet-open[data-shell-mode="compact"] .map-mobile-controls-backdrop,
body.map-controls-sheet-open[data-shell-mode="mobile"] .map-mobile-controls-backdrop {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

body[data-shell-mode="mobile"] .game-header {
    padding: 0.45rem 0;
    min-height: var(--game-header-h);
}

body[data-shell-mode="mobile"] .game-header .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

body[data-shell-mode="mobile"] .game-header-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "country calendar actions";
    gap: 0.45rem;
    padding-bottom: 47px;
    position: relative;
}

body[data-shell-mode="mobile"] .game-header-left {
    grid-area: country;
    justify-self: start;
}

body[data-shell-mode="mobile"] .game-header-center {
    display: contents;
}

body[data-shell-mode="mobile"] .gh-pills-left,
body[data-shell-mode="mobile"] .gh-pills-right {
    bottom: 0;
    display: grid;
    gap: 0.45rem;
    position: absolute;
}

body[data-shell-mode="mobile"] .gh-pills-left {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    left: 0;
    width: calc(66.666% - 0.15rem);
}

body[data-shell-mode="mobile"] .gh-pills-right {
    grid-template-columns: minmax(0, 1fr);
    right: 0;
    width: calc(33.333% - 0.3rem);
}

body[data-shell-mode="mobile"] .ip-pill-wrap,
body[data-shell-mode="mobile"] .ip-pill {
    width: 100%;
}

body[data-shell-mode="mobile"] .ip-pill {
    justify-content: center;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}

body[data-shell-mode="mobile"] .ip-pill-label {
    max-width: 80px;
    opacity: 1;
}

body[data-shell-mode="mobile"] .calendar-history-wrap {
    grid-area: calendar;
    justify-self: stretch;
    width: 100%;
}

body[data-shell-mode="mobile"] .calendar-display {
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 48px;
    padding: 0.45rem 0.55rem 0.7rem;
}

body[data-shell-mode="mobile"] .calendar-display .cal-icon {
    display: block;
}

body.game-body .cal-date-full { display: inline; }
body.game-body .cal-date-short { display: none; }
body[data-shell-mode="mobile"] .cal-body {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    min-width: 0;
}
body[data-shell-mode="mobile"] .cal-date-full { font-size: 0.95rem; }
body[data-shell-mode="mobile"] .turn-time-display {
    flex: 0 0 auto;
    font-size: 0.68rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

body[data-shell-mode="mobile"] .game-header-right {
    grid-area: actions;
    justify-self: end;
    gap: 0.35rem !important;
}

body[data-shell-mode="mobile"] .country-text-block {
    display: none;
}

body[data-shell-mode="mobile"] .country-info,
body[data-shell-mode="mobile"] .country-flag-small {
    gap: 0;
    margin-right: 0;
}

body[data-shell-mode="mobile"] .game-subheader {
    width: 100%;
    min-height: 3rem;
    margin: 0;
    padding: 0;
    justify-content: center;
}

body[data-shell-mode="mobile"] .game-content {
    z-index: 20;
}

body[data-shell-mode="mobile"] .game-content > .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

body[data-shell-mode="mobile"] .game-content > .row > .col-12 {
    padding-left: 0;
    padding-right: 0;
}

body[data-shell-mode="mobile"] .game-subheader-left,
body[data-shell-mode="mobile"] .game-subheader-right {
    display: none;
}

body[data-shell-mode="mobile"] .game-subheader-center {
    flex: 0 1 23rem;
    width: min(calc(100% - 1rem), 23rem);
}

body[data-shell-mode="mobile"] .view-toggle {
    width: 100%;
    margin-top: -3px;
    padding: 0;
    border-radius: 0;
    transform: none;
}

body[data-shell-mode="mobile"] .view-toggle .btn-group {
    width: 100%;
}

body[data-shell-mode="mobile"] .view-toggle .btn {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    padding: 0.48rem 0.3rem;
    font-size: 0.76rem;
    white-space: nowrap;
}

body[data-shell-mode="mobile"] .view-toggle .btn svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-right: 0.28rem !important;
}

/* Mobile bottom bar: fixed edge actions and a bounded status lane. */
body[data-shell-mode="mobile"] .stats-bar {
    height: var(--stats-bar-h);
    max-height: none;
}

body[data-shell-mode="mobile"] .stats-bar.expanded {
    height: min(88dvh, 900px);
    max-height: none;
}

body[data-shell-mode="mobile"] .stats-quick-row {
    min-height: var(--stats-bar-h);
    padding: 0.45rem 0;
}

body[data-shell-mode="mobile"] .stats-quick-row .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

body[data-shell-mode="mobile"] .stats-quick-row .row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 48px;
    gap: 0.4rem;
    width: 100%;
    margin: 0;
}

body[data-shell-mode="mobile"] .stats-quick-row .order-1,
body[data-shell-mode="mobile"] .stats-quick-row .order-2,
body[data-shell-mode="mobile"] .stats-quick-row .order-3 {
    position: static;
    width: auto;
    padding: 0;
    transform: none;
}

body[data-shell-mode="mobile"] .stats-expand-btn,
body[data-shell-mode="mobile"] #endTurnBtn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem;
    justify-content: center;
}

body[data-shell-mode="mobile"] .stats-expand-btn .stat-label,
body[data-shell-mode="mobile"] .stats-expand-btn .chevron-icon,
body[data-shell-mode="mobile"] #endTurnBtn .end-turn-label {
    display: none;
}

body[data-shell-mode="mobile"] .stats-quick-row .order-2 > .d-flex {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.2rem;
}

body[data-shell-mode="mobile"] .stat-item {
    justify-content: center;
    gap: 0.2rem;
    margin: 0;
    min-width: 0;
}

body[data-shell-mode="mobile"] .stat-item .stat-label {
    display: none;
}

body[data-shell-mode="mobile"] .stat-item > svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
}

body[data-shell-mode="mobile"] .stat-value {
    overflow: hidden;
    padding: 0.1em 0.35em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 430px) {
    body[data-shell-mode="mobile"] .stats-quick-row .order-2 > .d-flex {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-shell-mode="mobile"] .stat-item:nth-child(1),
    body[data-shell-mode="mobile"] .stat-item:nth-child(2) {
        display: none;
    }
}

@media (max-width: 360px) {
    body[data-shell-mode="mobile"] .ip-pill-label {
        display: none;
    }

    body[data-shell-mode="mobile"] .ip-pill {
        gap: 0.3rem;
    }

    body[data-shell-mode="mobile"] .turn-time-display {
        display: none;
    }
}

/* ================================================================
   MODERN GAME CHROME
   Dark glass framing shared by the map controls and National Overview.
   ================================================================ */
.game-header {
    background: #1d2937;
    border-bottom: 1px solid rgba(82,145,216,0.52);
    box-shadow: 0 12px 32px rgba(0,0,0,0.32), inset 0 1px rgba(255,255,255,0.035), inset 0 -1px rgba(255,255,255,0.025);
    backdrop-filter: blur(22px) saturate(0.85);
    -webkit-backdrop-filter: blur(22px) saturate(0.85);
}

.game-header .calendar-display {
    background: #35495c;
    border: 1px solid rgba(126,161,197,0.36);
    border-radius: 13px;
    box-shadow: inset 0 1px rgba(255,255,255,0.075), 0 9px 24px rgba(0,0,0,0.24);
    color: #f4f7fb;
}
.game-header .calendar-display:hover {
    background: #3d5469;
    border-color: rgba(96,165,250,0.66);
    box-shadow: inset 0 1px rgba(255,255,255,0.09), 0 11px 28px rgba(0,0,0,0.28);
}
.game-header .turn-time-display {
    background: rgba(8,14,22,0.48);
    border: 1px solid rgba(148,163,184,0.16);
    color: rgba(238,243,250,0.8);
}
.game-header .calendar-time-bar {
    background: rgba(5,10,17,0.38);
}

.country-info { gap: 0.65rem; }
.country-info .country-flag-small {
    filter: drop-shadow(0 5px 12px rgba(0,0,0,0.38));
}
.country-info .country-flag-small img {
    border-color: rgba(255,255,255,0.72) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.country-info h5 {
    color: #f3f6fb !important;
    letter-spacing: -0.025em;
    text-shadow: none;
}
.country-info small { color: rgba(213,222,235,0.66) !important; }

.game-header .ip-pill {
    box-shadow: inset 0 1px rgba(255,255,255,0.055), 0 7px 20px rgba(0,0,0,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: none;
}
.game-header .ip-pill-strengths {
    background: rgba(126,58,242,0.16);
    border-color: rgba(168,85,247,0.42);
    color: #dfc8ff;
}
.game-header .ip-pill-issues {
    background: rgba(220,38,38,0.15);
    border-color: rgba(248,113,113,0.4);
    color: #ffc1c1;
}
.game-header .ip-pill-promises {
    background: rgba(217,119,6,0.15);
    border-color: rgba(251,191,36,0.4);
    color: #ffe092;
}
.game-header .ip-pill:hover {
    transform: translateY(-1px);
    filter: brightness(1.16);
    box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.24);
}
.game-header .ip-inline-count {
    background: rgba(4,8,15,0.4);
    border-color: currentColor;
    color: inherit;
}

.settings-btn {
    appearance: none;
    background: rgba(10,17,27,0.5) !important;
    border: 1px solid rgba(148,163,184,0.24) !important;
    border-radius: 13px !important;
    box-shadow: inset 0 1px rgba(255,255,255,0.045), 0 8px 20px rgba(0,0,0,0.2);
    color: rgba(226,232,240,0.78) !important;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
}
.game-header .settings-btn:hover {
    background: rgba(30,58,96,0.62) !important;
    border-color: rgba(96,165,250,0.55) !important;
    color: #f8fbff !important;
    transform: translateY(-1px) !important;
    box-shadow: inset 0 1px rgba(255,255,255,0.07), 0 10px 26px rgba(0,0,0,0.26) !important;
}
.game-header .settings-btn:focus-visible {
    outline: 2px solid rgba(96,165,250,0.85);
    outline-offset: 3px;
}

.stats-bar {
    background: #1a2532;
    border-top: 1px solid rgba(82,145,216,0.48);
    box-shadow: 0 -14px 36px rgba(0,0,0,0.36), inset 0 1px rgba(255,255,255,0.035);
    backdrop-filter: blur(22px) saturate(0.82);
    -webkit-backdrop-filter: blur(22px) saturate(0.82);
}
.stats-quick-row {
    background: transparent;
    border-bottom-color: rgba(148,163,184,0.1);
}
body[data-shell-mode="desktop"] .stats-quick-row .row,
body[data-shell-mode="inline"] .stats-quick-row .row,
body[data-shell-mode="compact"] .stats-quick-row .row {
    grid-template-columns: auto minmax(0, auto) auto;
    justify-content: space-between;
    column-gap: clamp(0.75rem, 2vw, 2rem);
}
body[data-shell-mode="desktop"] .stats-quick-row .order-2,
body[data-shell-mode="inline"] .stats-quick-row .order-2,
body[data-shell-mode="compact"] .stats-quick-row .order-2 {
    justify-self: center;
}
body[data-shell-mode="desktop"] .stats-quick-row .order-2 > .d-flex,
body[data-shell-mode="inline"] .stats-quick-row .order-2 > .d-flex,
body[data-shell-mode="compact"] .stats-quick-row .order-2 > .d-flex {
    justify-content: center;
    gap: clamp(0.65rem, 1.4vw, 1.25rem);
}
.stats-expand-btn {
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    background: rgba(15,23,36,0.72);
    border: 1px solid rgba(96,165,250,0.28);
    border-radius: 12px;
    color: rgba(219,231,247,0.82);
    box-shadow: inset 0 1px rgba(255,255,255,0.04);
}
.stats-expand-btn:hover,
.stats-expand-btn.expanded {
    background: rgba(30,58,96,0.56);
    border-color: rgba(96,165,250,0.5);
    color: #f4f8ff;
    transform: translateY(-1px);
}
.stat-item { gap: 0.38rem; }
.stat-item .stat-label {
    color: rgba(184,197,216,0.58);
    font-size: 0.76rem;
    letter-spacing: 0.015em;
}
.stat-item > svg { opacity: 0.82; }
.stat-value {
    background: rgba(15,23,36,0.72);
    border-color: rgba(148,163,184,0.19);
    box-shadow: inset 0 1px rgba(255,255,255,0.035);
    padding: 0.18em 0.58em;
}

#endTurnBtn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.62rem 0.95rem;
    appearance: none;
    background: rgba(22,43,72,0.7);
    border: 1px solid rgba(96,165,250,0.48);
    border-radius: 12px;
    color: #cfe4ff;
    box-shadow: inset 0 1px rgba(255,255,255,0.055), 0 8px 22px rgba(0,0,0,0.22);
    font-weight: 750;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
#endTurnBtn:hover {
    background: rgba(29,67,116,0.82);
    border-color: rgba(125,186,255,0.72);
    color: #fff;
    transform: translateY(-1px);
}
#endTurnBtn.turn-capacity-ready,
#endTurnBtn.turn-capacity-glow {
    animation: none;
    background: #126fdf;
    border-color: rgba(147,197,253,0.88);
    color: #fff;
    box-shadow: inset 0 1px rgba(255,255,255,0.2), 0 0 0 1px rgba(37,99,235,0.22), 0 10px 28px rgba(15,93,210,0.35);
}
#endTurnBtn.turn-capacity-ready:hover,
#endTurnBtn.turn-capacity-glow:hover {
    background: #1b7deb;
    box-shadow: inset 0 1px rgba(255,255,255,0.22), 0 0 0 1px rgba(96,165,250,0.34), 0 12px 30px rgba(15,93,210,0.42);
}

/* Records browser — uses the Statistics rail and map-pill navigation language. */
.dossier-panel {
    padding: 1rem;
    background: rgba(9,15,23,.92);
    border-color: rgba(148,163,184,.18);
    border-radius: 16px;
}
.sidebar-nav { gap:0; margin-bottom:.65rem; padding:0; }
.sidebar-nav .sidebar-tabs {
    display:grid !important;
    grid-template-columns:1fr 1.42fr .92fr .78fr;
    gap:.3rem;
    padding:.35rem;
    background:#101925;
    border:1px solid rgba(148,163,184,.18);
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.sidebar-tab-btn[data-tab="dossier"]      { --tc:#22d3ee; --tb:rgba(34,211,238,.15); }
.sidebar-tab-btn[data-tab="developments"] { --tc:#fbbf24; --tb:rgba(251,191,36,.15); }
.sidebar-tab-btn[data-tab="characters"]   { --tc:#4ade80; --tb:rgba(74,222,128,.15); }
.sidebar-tab-btn[data-tab="lore"]         { --tc:#e8b86d; --tb:rgba(232,184,109,.15); }
.sidebar-tab-btn {
    position:relative;
    display:grid;
    grid-template-columns:24px minmax(0,max-content);
    place-content:center;
    align-items:center;
    width:100%;
    max-width:100%;
    min-width:0;
    gap:.32rem;
    padding:.42rem .3rem;
    overflow:hidden;
    box-sizing:border-box;
    background:transparent;
    border-color:transparent;
    border-radius:8px;
    color:#aebaca;
    font-size:.68rem;
    font-weight:750;
}
.sidebar-tab-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
.sidebar-tab-btn:hover { color:#fff; background:color-mix(in srgb,var(--tc) 10%,transparent); border-color:color-mix(in srgb,var(--tc) 28%,transparent); }
.sidebar-tab-btn.active { color:#fff; background:var(--tb); border-color:color-mix(in srgb,var(--tc) 45%,transparent); box-shadow:inset 0 -2px 0 var(--tc); }
.sidebar-tab-btn .notif-badge {
    position:absolute;
    top:3px;
    right:3px;
    z-index:2;
    min-width:15px;
    height:15px;
    margin:0;
    padding:0 3px;
    color:#071018;
    background:var(--tc);
    box-shadow:0 0 0 2px #101925,0 3px 8px rgba(0,0,0,.32);
    font-size:.56rem;
}
.sidebar-tab-icon { display:inline-grid; place-items:center; width:24px; height:24px; flex:0 0 24px; color:var(--tc); background:color-mix(in srgb,var(--tc) 11%,transparent); border:1px solid color-mix(in srgb,var(--tc) 28%,transparent); border-radius:7px; }
.sidebar-tab-icon svg { width:14px; height:14px; }
.sidebar-content-well { padding:0; background:rgba(4,9,15,.42); border-color:rgba(148,163,184,.12); border-radius:12px; box-shadow:none; }
.sidebar-tab-content { --record-accent:#22d3ee; padding:.7rem; }
#developmentsTab { --record-accent:#fbbf24; }
#charactersTab { --record-accent:#4ade80; }
#loreTab { --record-accent:#e8b86d; }
.sidebar-filter-nav { position:sticky; top:-.7rem; z-index:2; display:flex; gap:.3rem; margin:-.15rem -.1rem .7rem; padding:.4rem .1rem; overflow-x:auto; scrollbar-width:none; background:linear-gradient(#0b121b 75%,transparent); }
.sidebar-filter-nav::-webkit-scrollbar { display:none; }
.sidebar-filter-pill { display:inline-flex; align-items:center; gap:.35rem; flex:0 0 auto; padding:.3rem .55rem; color:#8f9cad; background:rgba(255,255,255,.035); border:1px solid rgba(148,163,184,.14); border-radius:999px; font-size:.65rem; font-weight:700; white-space:nowrap; transition:color .15s ease,background .15s ease,border-color .15s ease; }
.sidebar-filter-pill:hover,.sidebar-filter-pill:focus-visible { color:#fff; border-color:color-mix(in srgb,var(--record-accent) 36%,transparent); }
.sidebar-filter-pill.is-active { color:color-mix(in srgb,var(--record-accent) 78%,white); background:color-mix(in srgb,var(--record-accent) 14%,transparent); border-color:color-mix(in srgb,var(--record-accent) 48%,transparent); }
.sidebar-filter-count { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 .28rem; color:inherit; background:rgba(255,255,255,.08); border-radius:999px; font-size:.58rem; }
.sidebar-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:250px; padding:2rem 1rem; color:var(--text-muted); text-align:center; }
.sidebar-empty-icon { display:inline-grid; place-items:center; width:44px; height:44px; margin-bottom:.8rem; color:var(--record-accent); background:color-mix(in srgb,var(--record-accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--record-accent) 26%,transparent); border-radius:12px; }
.sidebar-empty-icon svg { width:21px; height:21px; }
.sidebar-empty-state strong { color:var(--text-primary); font-size:.9rem; }
.sidebar-empty-state p { max-width:300px; margin:.35rem 0 0; font-size:.72rem; line-height:1.5; }
.sidebar-tab-content .dossier-list,#charactersList,#loreList { gap:.45rem; }
#dossierTab .dossier-item,#developmentsTab .dossier-item,#charactersTab .char-item,#loreTab .lore-card { position:relative; margin:0 0 .45rem; padding:.7rem .75rem .7rem .9rem; background:rgba(16,25,37,.72); border:1px solid rgba(148,163,184,.13); border-radius:10px; box-shadow:none; }
#dossierTab .dossier-item::before,#developmentsTab .dossier-item::before,#charactersTab .char-item::before,#loreTab .lore-card::before { content:''; position:absolute; inset:10px auto 10px 0; width:2px; background:var(--record-accent); border-radius:2px; opacity:.72; }
#developmentsTab .dossier-item { border-color:rgba(251,191,36,.18); }
.development-popup-overlay .dossier-subtype { color:#fde68a; background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.28); }
#dossierTab .dossier-item:hover,#developmentsTab .dossier-item:hover,#charactersTab .char-item:hover,#loreTab .lore-card:hover { background:rgba(22,33,47,.9); border-color:color-mix(in srgb,var(--record-accent) 35%,transparent); transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.24); }
#charactersTab .actor-group-heading { display:none; }
#charactersTab .actor-group { margin:0; }
#charactersTab .char-portrait-wrap { width:68px; height:86px; border-radius:7px; }
#charactersTab .char-item-person { gap:.65rem; }
#charactersTab .char-name { font-size:.82rem; }
#charactersTab .char-affiliation { max-width:none; margin:-.05rem 0 .25rem; text-align:left; }
#charactersTab .char-type-icon { display:inline-grid; place-items:center; width:24px; height:24px; color:#86efac; background:rgba(74,222,128,.1); border-radius:7px; }
#charactersTab .char-type-icon svg { width:13px; height:13px; }
@media (max-width:1200px) { .sidebar-nav .sidebar-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Story workspace — one chrome system for the narrative and records panes. */
#dashboardView {
    --workspace-shell-bg:rgba(9,15,23,.94);
    --workspace-well-bg:rgba(4,9,15,.72);
    --workspace-border:rgba(148,163,184,.18);
    --workspace-inner-border:rgba(148,163,184,.12);
    --workspace-radius:16px;
    --workspace-gap:.75rem;
}

@media (min-width:992px) {
    #dashboardView > .row {
        display:grid;
        grid-template-columns:minmax(0,2fr) minmax(330px,1fr);
        gap:var(--workspace-gap);
        margin-inline:0;
    }
    #dashboardView > .row > .col-lg-8,
    #dashboardView > .row > .col-lg-4 {
        width:auto;
        max-width:none;
        padding-inline:0;
    }
}

#dashboardStory .unified-story-component,
#dashboardView .dossier-panel {
    padding:.85rem;
    background:var(--workspace-shell-bg);
    border:1px solid var(--workspace-border);
    border-radius:var(--workspace-radius);
    box-shadow:0 12px 30px rgba(0,0,0,.24);
}

#dashboardStory .story-messages,
#dashboardView .sidebar-content-well {
    background:var(--workspace-well-bg);
    border:1px solid var(--workspace-inner-border);
    border-radius:12px;
    box-shadow:none;
}

#dashboardStory .story-messages { margin-bottom:0; }

/* The player's freeform move is the primary control in the Story workspace. */
#dashboardStory .story-input-container {
    position:relative;
    margin:.7rem 0 0 !important;
    padding:0;
    overflow:visible;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
}

#dashboardStory .story-input-container:focus-within {
    box-shadow:none;
}

.story-composer-meta {
    display:flex;
    align-items:center;
    gap:.5rem;
    max-height:2rem;
    margin:0 .2rem .38rem;
    opacity:1;
    transition:max-height .18s ease,margin .18s ease,opacity .14s ease;
}

.story-composer-title {
    display:inline-flex;
    align-items:center;
    gap:.42rem;
    color:#eaf4ff;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.015em;
}

.story-composer-title svg { width:14px; height:14px; color:#60a5fa; }
.story-composer-action-icon--ask { display:none; }
#dashboardStory[data-narrative-mode="cabinet"] .story-composer-action-icon--story { display:none; }
#dashboardStory[data-narrative-mode="cabinet"] .story-composer-action-icon--ask { display:block; }

#dashboardStory .story-input-row {
    isolation:isolate;
    position:relative;
    align-items:stretch;
    gap:.35rem;
    min-height:54px;
    padding:.35rem;
    overflow:hidden;
    background:linear-gradient(145deg,rgba(9,20,35,.98),rgba(4,10,19,.98));
    border:1px solid rgba(96,165,250,.48);
    border-radius:13px;
    box-shadow:0 7px 22px rgba(0,0,0,.25),0 0 18px rgba(37,99,235,.08);
    transition:min-height .24s cubic-bezier(.2,.75,.25,1),border-color .2s ease,box-shadow .24s ease,background .24s ease;
}
#dashboardStory .story-input-row::before {
    content:'';
    position:absolute;
    inset:-220%;
    z-index:0;
    opacity:0;
    background:conic-gradient(from 0deg,transparent 0 68%,rgba(96,165,250,.08) 74%,rgba(125,211,252,.86) 82%,rgba(99,102,241,.4) 88%,transparent 96%);
    pointer-events:none;
    transition:opacity .22s ease;
}
#dashboardStory .story-input-row::after {
    content:'';
    position:absolute;
    inset:1px;
    z-index:1;
    background:linear-gradient(145deg,rgba(7,16,29,.98),rgba(3,9,18,.99));
    border-radius:11px;
    pointer-events:none;
    transition:background .3s ease;
}
#dashboardStory .story-input-container textarea {
    position:relative;
    z-index:2;
    min-height:2.8rem;
    padding:.66rem .8rem;
    background:transparent !important;
    border:0 !important;
    border-radius:9px !important;
    box-shadow:none !important;
    transition:opacity .16s ease,transform .22s ease;
}
#dashboardStory .story-input-container textarea::placeholder { color:rgba(197,216,239,.42); }
#dashboardStory .story-input-container textarea:focus {
    border:0 !important;
    box-shadow:none !important;
}
#dashboardStory .story-send-btn {
    position:relative;
    z-index:2;
    width:45px;
    height:auto;
    min-height:45px;
    border:1px solid rgba(147,197,253,.68);
    border-radius:11px;
    box-shadow:inset 0 1px rgba(255,255,255,.2),0 6px 18px rgba(37,99,235,.36);
    transition:width .22s ease,min-height .22s ease,padding .22s ease,border-width .18s ease,opacity .14s ease,transform .22s ease,box-shadow .15s ease;
}
.story-composer-response-status {
    position:absolute;
    inset:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    color:#c9ddf6;
    font-size:.76rem;
    font-weight:750;
    letter-spacing:.015em;
    pointer-events:none;
    transform:translateY(5px);
    transition:opacity .2s ease .06s,transform .24s cubic-bezier(.2,.75,.25,1);
}

/* Ask is a secondary mode switch, not a hidden utility nub. */
.story-ask-toggle {
    top:.75rem;
    right:.75rem;
    gap:.4rem;
    min-width:76px;
    min-height:36px;
    padding:.38rem .62rem;
    background:rgba(8,15,26,.88);
    border:1px solid rgba(148,163,184,.3);
    border-radius:9px;
    color:#dbeafe;
    box-shadow:0 5px 16px rgba(0,0,0,.3);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}
.story-ask-toggle-icon {
    display:inline-flex;
    width:auto;
    height:auto;
    flex:0 0 auto;
    color:#7dd3fc;
}
.story-ask-toggle-icon svg { width:15px; height:15px; opacity:1; }
.story-ask-toggle-icon--story { display:none; }
.story-ask-toggle--active .story-ask-toggle-icon--ask { display:none; }
.story-ask-toggle--active .story-ask-toggle-icon--story { display:inline-flex; }
.story-ask-toggle-label { color:#eef6ff; font-size:.72rem; font-weight:800; }
.story-ask-toggle:hover {
    color:#fff;
    background:rgba(14,27,46,.96);
    border-color:rgba(125,190,255,.6);
    box-shadow:0 7px 18px rgba(0,0,0,.36);
    transform:translateY(-1px);
}
.story-ask-toggle:focus-visible {
    outline:2px solid #93c5fd;
    outline-offset:2px;
}
.story-ask-toggle--active {
    background:rgba(20,40,69,.96);
    border-color:rgba(125,190,255,.68);
    color:#fff;
    box-shadow:0 7px 18px rgba(0,0,0,.36),inset 0 -2px #60a5fa;
}

#dashboardStory[data-narrative-mode="cabinet"] .story-input-row { border-color:rgba(129,140,248,.5); }
#dashboardStory[data-narrative-mode="cabinet"] .story-input-row::after { background:linear-gradient(145deg,rgba(18,23,48,.98),rgba(5,10,22,.99)); }
#dashboardStory[data-narrative-mode="cabinet"] .story-composer-title svg { color:#a5b4fc; }

#dashboardStory .story-composer--responding {
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
}
#dashboardStory .story-composer--responding .story-composer-meta {
    max-height:0;
    margin:0;
    overflow:hidden;
    opacity:0;
}
#dashboardStory .story-composer--responding .story-input-row {
    min-height:62px;
    border-color:transparent;
    background:linear-gradient(145deg,rgba(20,36,61,.98),rgba(6,14,27,.99));
    box-shadow:0 8px 26px rgba(0,0,0,.28),0 0 25px rgba(59,130,246,.12);
}
#dashboardStory .story-composer--responding .story-input-row::before {
    opacity:1;
    animation:storyComposerBorderTravel 3.2s linear infinite;
}
#dashboardStory .story-composer--responding .story-input-row::after {
    background:linear-gradient(145deg,rgba(15,31,54,.98),rgba(5,13,26,.99) 72%,rgba(14,24,48,.99));
}
#dashboardStory .story-composer--responding textarea {
    opacity:0 !important;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(5px);
}
#dashboardStory .story-composer--responding textarea::placeholder {
    color:transparent !important;
    opacity:0;
}
#dashboardStory .story-composer--responding .story-send-btn {
    width:0;
    min-width:0;
    min-height:45px;
    padding:0;
    overflow:hidden;
    border-width:0;
    opacity:0 !important;
    transform:scale(.68);
    box-shadow:none;
}
#dashboardStory .story-composer--responding .story-composer-response-status {
    opacity:1;
    transform:translateY(0);
}

@keyframes storyComposerBorderTravel {
    to { transform:rotate(360deg); }
}
@keyframes storyComposerTurnReady {
    0% { border-color:rgba(96,165,250,.28); box-shadow:0 7px 22px rgba(0,0,0,.25); }
    42% { border-color:rgba(125,211,252,.88); box-shadow:0 0 0 3px rgba(56,189,248,.11),0 0 25px rgba(59,130,246,.2); }
    100% { border-color:rgba(96,165,250,.48); box-shadow:0 7px 22px rgba(0,0,0,.25),0 0 18px rgba(37,99,235,.08); }
}
.story-composer--turn-ready .story-input-row { animation:storyComposerTurnReady .75s ease-out both; }

@keyframes storyModeEnter {
    from { opacity:0; transform:translateX(8px) scale(.997); }
    to { opacity:1; transform:translateX(0) scale(1); }
}
.story-mode-enter { animation:storyModeEnter .22s cubic-bezier(.2,.75,.25,1) both; }

@media (max-width:600px) {
    .story-ask-toggle { min-width:72px; }
}

@media (prefers-reduced-motion:reduce) {
    .story-mode-enter,
    .story-composer--turn-ready .story-input-row,
    #dashboardStory .story-composer--responding .story-input-row::before { animation:none; }
}

/* Mobile Story workspace: Records becomes an on-demand drawer instead of a
   second stacked page section. Desktop retains the simultaneous two-pane view. */
.mobile-records-launcher,
.mobile-records-backdrop,
.mobile-records-header {
    display:none;
}

@media (max-width:991.98px) {
    body.game-body {
        height:100dvh;
        min-height:0;
        overflow:hidden;
    }

    /* The legacy stacked layout made this row sticky beneath a scrolling
       header. The mobile Story workspace is now a fixed-height flex layout,
       so that sticky top offset is applied relative to the content pane and
       pushes the navigation down into the story. Keep it in normal flow so it
       remains physically attached to the header. */
    .game-subheader {
        position:relative;
        top:auto;
    }

    body.game-body > .game-content,
    body.game-body .game-content > .row,
    body.game-body .game-content > .row > .col-12,
    #dashboardView,
    #dashboardView > .row {
        min-height:0;
        overflow:hidden;
    }

    #dashboardView > .row {
        flex-wrap:nowrap;
    }

    #dashboardView {
        position:relative;
    }

    #dashboardView > .row > .col-lg-8 {
        width:100%;
        height:100%;
        min-height:0;
        overflow:hidden;
    }

    .mobile-records-launcher {
        position:absolute;
        top:.75rem;
        left:50%;
        z-index:88;
        display:inline-flex;
        align-items:center;
        gap:.38rem;
        min-height:35px;
        padding:.38rem .58rem .42rem;
        color:#d9f4ff;
        background:linear-gradient(180deg,rgba(13,37,54,.98),rgba(8,24,38,.98));
        border:1px solid rgba(76,184,226,.45);
        border-top:0;
        border-radius:0 0 10px 10px;
        box-shadow:0 8px 18px rgba(0,0,0,.28),inset 0 -1px 0 rgba(103,211,255,.12);
        font-size:.72rem;
        font-weight:800;
        transform:translateX(-50%);
        transition:background .18s ease,border-color .18s ease,transform .18s ease,opacity .18s ease;
    }

    .mobile-records-launcher svg {
        width:15px;
        height:15px;
        color:#67d3ff;
    }

    .mobile-records-launcher small {
        max-width:88px;
        overflow:hidden;
        color:#8ca7ba;
        font-size:.6rem;
        font-weight:700;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .mobile-records-launcher .mobile-records-direction {
        width:13px;
        height:13px;
        margin-left:.08rem;
        color:#9fb9ca;
    }

    .mobile-records-launcher .mobile-records-notif {
        position:absolute;
        top:-7px;
        right:-8px;
        min-width:17px;
        height:17px;
        margin:0;
        padding:0 4px;
        color:#fff;
        background:#3b82f6;
        box-shadow:0 0 0 3px rgba(7,13,22,.96),0 4px 10px rgba(0,0,0,.4);
        font-size:.58rem;
    }

    .mobile-records-launcher:hover,
    .mobile-records-launcher:focus-visible {
        background:linear-gradient(180deg,rgba(18,50,70,.99),rgba(10,31,48,.99));
        border-color:rgba(103,211,255,.72);
        transform:translateX(-50%) translateY(1px);
    }

    body.mobile-records-open .mobile-records-launcher {
        opacity:0;
        pointer-events:none;
    }

    .mobile-records-backdrop {
        position:fixed;
        inset:var(--game-header-h) 0 var(--stats-bar-h);
        z-index:124;
        display:block;
        padding:0;
        visibility:hidden;
        opacity:0;
        pointer-events:none;
        background:rgba(1,5,12,.62);
        border:0;
        backdrop-filter:blur(3px);
        -webkit-backdrop-filter:blur(3px);
        transition:opacity .2s ease,visibility .24s;
    }

    body.mobile-records-open .mobile-records-backdrop {
        visibility:visible;
        opacity:1;
        pointer-events:auto;
    }

    #dashboardView > .row > .col-lg-4 {
        position:fixed;
        right:0;
        bottom:var(--stats-bar-h);
        left:0;
        z-index:125;
        display:block;
        width:100%;
        height:min(76dvh,720px);
        max-height:calc(100dvh - var(--game-header-h) - var(--stats-bar-h) - .5rem);
        margin:0 !important;
        padding:0 !important;
        visibility:hidden;
        opacity:0;
        overflow:hidden;
        pointer-events:none;
        transform:translateY(calc(100% + 20px));
        transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility .28s;
    }

    body.mobile-records-open #dashboardView > .row > .col-lg-4 {
        visibility:visible;
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }

    #dashboardView .dossier-panel {
        height:100%;
        padding:.55rem .7rem .75rem;
        overflow:hidden;
        background:rgba(7,13,22,.985);
        border:1px solid rgba(148,183,226,.24);
        border-bottom:0;
        border-radius:20px 20px 0 0;
        box-shadow:0 -22px 60px rgba(0,0,0,.58);
    }

    .mobile-records-header {
        position:relative;
        display:grid;
        grid-template-columns:36px 1fr 36px;
        align-items:center;
        flex:0 0 auto;
        min-height:46px;
        margin:0 -.1rem .35rem;
    }

    .mobile-records-handle {
        position:absolute;
        top:1px;
        left:50%;
        width:42px;
        height:4px;
        background:rgba(148,163,184,.42);
        border-radius:999px;
        transform:translateX(-50%);
    }

    .mobile-records-title {
        grid-column:2;
        display:inline-flex;
        align-items:center;
        justify-self:center;
        gap:.45rem;
        padding-top:.35rem;
        color:#f1f7ff;
        font-size:.86rem;
        font-weight:800;
        letter-spacing:.015em;
    }

    .mobile-records-title svg {
        width:15px;
        height:15px;
        color:#7dd3fc;
    }

    .mobile-records-close {
        grid-column:3;
        display:grid;
        place-items:center;
        width:34px;
        height:34px;
        padding:0;
        color:#aebdce;
        background:rgba(255,255,255,.045);
        border:1px solid rgba(148,163,184,.16);
        border-radius:9px;
    }

    .mobile-records-close svg { width:16px; height:16px; }

    #dashboardView .sidebar-nav {
        margin-bottom:.45rem;
    }

    #dashboardView .sidebar-nav .sidebar-tabs {
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:.22rem;
    }

    #dashboardView .sidebar-tab-btn {
        grid-template-columns:1fr;
        gap:.2rem;
        padding:.4rem .2rem;
        font-size:.62rem;
    }

    #dashboardView .sidebar-tab-icon {
        justify-self:center;
    }

    #dashboardView .sidebar-content-well {
        flex:1;
        min-height:0;
    }

    #dashboardView .sidebar-tab-content {
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }
}

@media (max-width:430px) {
    .mobile-records-launcher small { display:none; }
    #dashboardView > .row > .col-lg-4 { height:min(82dvh,720px); }
}

@media (prefers-reduced-motion:reduce) {
    .mobile-records-launcher,
    .mobile-records-backdrop,
    #dashboardView > .row > .col-lg-4 { transition:none !important; }
}

/* Touch input is imprecise compared with a mouse. Preserve the compact visual
   language while giving primary controls a dependable 44px activation area.
   Inline narrative links are intentionally excluded so prose does not reflow. */
@media (any-pointer:coarse) {
    body.game-body button,
    body.game-body select,
    body.game-body input,
    body.game-body label,
    body.game-body [role="button"],
    body.game-body [role="tab"] {
        touch-action:manipulation;
    }

    .view-toggle .btn,
    .ip-pill,
    .calendar-display,
    .map-mobile-controls-toggle,
    .map-layer-tab,
    .map-layers-btn,
    .map-layer-row,
    .map-resource-filter,
    .sidebar-tab-btn,
    .sidebar-filter-pill,
    .mobile-records-launcher,
    .settings-tab,
    .sound-player-button,
    .mandate-view-btn,
    .story-ask-toggle,
    .story-feedback-reasons label,
    .story-feedback-actions .btn,
    .gc-btn,
    .menu-btn {
        min-height:44px;
    }

    .map-float-btn,
    .map-detail-close,
    .map-mobile-sheet-close,
    .mobile-records-close,
    .settings-modal-close,
    .archive-modal-close,
    .mandate-overlay-close,
    .calendar-planner-close,
    .story-feedback-control,
    .sound-player-button {
        min-width:44px;
        width:44px;
        min-height:44px;
        height:44px;
    }

    .map-detail-topbar {
        grid-template-columns:minmax(0,1fr) 44px;
    }

    .map-tab-pill {
        min-height:40px;
        padding-block:7px;
    }

    input[type="range"],
    .pref-toggle,
    .pref-option {
        min-height:44px;
    }

    .narrative-clickable {
        touch-action:manipulation;
        text-underline-offset:.2em;
    }
}

/* Hover elevation can remain latched on some touch browsers after a tap.
   Active/selected states still supply feedback without shifting the target. */
@media (hover:none) {
    .view-toggle .btn:hover,
    .ip-pill:hover,
    .settings-btn:hover,
    .stats-expand-btn:hover,
    #endTurnBtn:hover,
    .sidebar-tab-btn:hover,
    .map-tab-pill:hover,
    .map-detail-close:hover,
    .story-feedback-control:hover {
        transform:none;
        filter:none;
    }

    .mobile-records-launcher:hover {
        transform:translateX(-50%);
        filter:none;
    }
}

/* ── Parliament polish: catalogue, statute book, navigation and chamber ──── */
#parliamentView .parl-view-wrap {
    gap: .8rem;
    padding: .2rem .65rem 1.5rem;
}

.parl-mobile-pane-nav { display: none; }

.parl-breadcrumbs {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    min-height: 32px;
    gap: .3rem;
    padding: 0;
    overflow: hidden;
    color: rgba(203,213,225,.56);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.parl-crumb-separator {
    flex: 0 0 auto;
    color: rgba(148,163,184,.32);
    font-size: .72rem;
    font-weight: 700;
}

.parl-crumb {
    min-width: 0;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .28rem .65rem;
    overflow: hidden;
    color: rgba(203,213,225,.68);
    border: 0;
    border-radius: 999px;
    background: rgba(148,163,184,.08);
    font-size: .69rem;
    font-weight: 720;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: none;
    transition: color 150ms ease, background 150ms ease;
}
.parl-crumb > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.parl-crumb-root { flex: 0 0 auto; }
.parl-crumb-bill { max-width: min(255px, 28vw); }
.parl-crumb-action { flex: 0 0 auto; }

button.parl-crumb:hover { color: #f8fafc; background: rgba(148,163,184,.15); }
.parl-crumb.is-current { color: #f8fbff; background: rgba(59,130,246,.68); }

#parliamentView .parl-view-body {
    grid-template-columns: minmax(0, 1.46fr) minmax(320px, .9fr);
    gap: 1rem;
}

#parliamentView .parl-right-col {
    position: sticky;
    top: 78px;
    gap: .75rem;
}

#parliamentView .parl-card {
    border-color: rgba(160,184,216,.13) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, rgba(13,19,29,.94), rgba(8,13,22,.9)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 40px rgba(0,0,0,.24);
}

.parl-catalogue-card { padding: 1rem !important; }

.parl-catalogue-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .15rem .1rem .72rem;
}

.parl-catalogue-head .parl-card-label { margin-bottom: .3rem; }

.parl-introduce-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    flex: 0 0 auto;
    min-height: 38px;
    padding: .45rem .72rem;
    color: #dbeafe;
    border: 1px solid rgba(96,165,250,.28);
    border-radius: 9px;
    background: rgba(59,130,246,.1);
    font-size: .76rem;
    font-weight: 720;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.parl-introduce-btn svg { width: 14px; height: 14px; }
.parl-introduce-btn:hover { color: #fff; background: rgba(59,130,246,.2); border-color: rgba(96,165,250,.5); transform: translateY(-1px); }

.parl-record-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem;
    padding: .35rem;
    margin-bottom: .75rem;
    background: #101925;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.parl-record-tab {
    --tc: #60a5fa;
    --tb: rgba(96,165,250,.15);
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0,max-content) 20px;
    place-content: center;
    align-items: center;
    min-width: 0;
    gap: .35rem;
    padding: .42rem .35rem;
    overflow: hidden;
    color: #aebaca;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 750;
    transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.parl-record-tab-laws { --tc: #4ade80; --tb: rgba(74,222,128,.15); }
.parl-record-tab-history { --tc: #fbbf24; --tb: rgba(251,191,36,.15); }
.parl-record-tab:hover { color: #fff; background: color-mix(in srgb,var(--tc) 10%,transparent); border-color: color-mix(in srgb,var(--tc) 28%,transparent); }
.parl-record-tab.active { color: #fff; background: var(--tb); border-color: color-mix(in srgb,var(--tc) 45%,transparent); box-shadow: inset 0 -2px 0 var(--tc), 0 5px 14px color-mix(in srgb,var(--tc) 9%,transparent); animation: parl-record-tab-select .22s cubic-bezier(.2,.8,.2,1) both; }
.parl-record-tab-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--tc); background: color-mix(in srgb,var(--tc) 11%,transparent); border: 1px solid color-mix(in srgb,var(--tc) 28%,transparent); border-radius: 7px; }
.parl-record-tab.active .parl-record-tab-icon { transform: scale(1.06); box-shadow: 0 0 14px color-mix(in srgb,var(--tc) 15%,transparent); }
.parl-record-tab-icon svg { width: 14px; height: 14px; }
.parl-record-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parl-record-tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 .28rem; color: inherit; background: rgba(255,255,255,.08); border-radius: 999px; font-size: .58rem; }

.parl-legislation-list { display: grid; gap: .48rem; animation: parl-record-content-enter .24s cubic-bezier(.2,.75,.25,1) both; }
.parl-legislation-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .9rem;
    width: 100%;
    padding: .82rem .88rem;
    text-align: left;
    color: inherit;
    border: 1px solid rgba(148,163,184,.11);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.parl-legislation-card:hover {
    border-color: rgba(125,173,235,.3);
    background: rgba(91,137,196,.075);
    box-shadow: 0 8px 24px rgba(0,0,0,.17);
    transform: translateY(-1px);
}
.parl-legislation-card-main { display: flex; flex-direction: column; min-width: 0; }
.parl-legislation-card-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; min-height: 20px; margin-bottom: .35rem; color: rgba(203,213,225,.45); font-size: .66rem; }
.parl-legislation-card-title { color: #edf3fb; font-size: .91rem; font-weight: 720; line-height: 1.3; }
.parl-legislation-card-summary { margin-top: .24rem; color: rgba(203,213,225,.58); font-size: .75rem; line-height: 1.4; }
.parl-legislation-card-vote { display: block; max-width: 520px; margin-top: .55rem; }
.parl-legislation-card-side { display: flex; align-items: center; gap: .35rem; align-self: center; color: rgba(203,213,225,.36); font-size: .67rem; white-space: nowrap; }
.parl-legislation-card-side svg { width: 15px; height: 15px; transition: transform 160ms ease, color 160ms ease; }
.parl-legislation-card:hover .parl-legislation-card-side svg { color: #93c5fd; transform: translateX(2px); }

.parl-catalogue-empty {
    --empty-accent: #60a5fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 210px;
    padding: 2rem;
    text-align: center;
    color: rgba(203,213,225,.5);
    border: 0;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(8,17,29,.18), rgba(2,6,15,.05));
}
.parl-catalogue-empty-laws { --empty-accent: #4ade80; }
.parl-catalogue-empty-history { --empty-accent: #fbbf24; }
.parl-catalogue-empty-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: .85rem; color: var(--empty-accent); background: color-mix(in srgb,var(--empty-accent) 10%,transparent); border: 1px solid color-mix(in srgb,var(--empty-accent) 34%,transparent); border-radius: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.parl-catalogue-empty-icon svg { width: 23px; height: 23px; }
.parl-catalogue-empty strong { color: #f1f5f9; font-size: .96rem; font-weight: 780; }
.parl-catalogue-empty > span:last-child { max-width: 330px; margin-top: .38rem; color: rgba(203,213,225,.5); font-size: .74rem; line-height: 1.48; }

@keyframes parl-record-tab-select {
    from { opacity: .78; transform: translateY(2px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes parl-record-content-enter {
    from { opacity: 0; transform: translateY(7px) scale(.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.parl-upcoming-block { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid rgba(148,163,184,.11); }
.parl-agenda-queue-row { padding: .48rem .35rem; border-top-color: rgba(148,163,184,.075); }
.parl-agenda-queue-sponsor { color: rgba(203,213,225,.38); font-size: .68rem; }

.parl-focus-details-card { gap: .85rem; padding: 1rem 1.05rem !important; }
.parl-focus-details-title { font-size: 1.28rem; letter-spacing: -.018em; }
.parl-focus-details-summary { max-width: 720px; font-size: .8rem; line-height: 1.52; }
.parl-focus-meta { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .12rem; }
.parl-focus-meta span { opacity: .35; }
.parl-focus-well { border-color: rgba(148,163,184,.1); background: rgba(2,6,15,.38); box-shadow: inset 0 1px 10px rgba(0,0,0,.28); }
.parl-well-inner { max-height: min(56vh, 620px); gap: .9rem; }
.parl-article-row { padding: .7rem .78rem; border-color: rgba(148,163,184,.1); border-radius: 9px; background: rgba(255,255,255,.025); }
.parl-article-label { color: #e7edf7; font-size: .77rem; }
.parl-article-detail { margin-bottom: 0; color: rgba(203,213,225,.62); font-size: .76rem; line-height: 1.48; }

.parl-effects-list { display: grid; gap: .38rem; }
.parl-effect-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .18rem .75rem;
    padding: .58rem .68rem;
    border: 1px solid rgba(148,163,184,.1);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
}
.parl-effect-target { color: rgba(226,232,240,.8); font-size: .75rem; font-weight: 620; }
.parl-effect-value { font-size: .74rem; font-variant-numeric: tabular-nums; }
.parl-effect-value.is-positive { color: #78e59b; }
.parl-effect-value.is-negative { color: #ff8992; }
.parl-effect-timing { grid-column: 1 / -1; color: rgba(203,213,225,.43); font-size: .66rem; }
.parl-text-missing, .parl-record-note { display: flex; align-items: center; gap: .55rem; color: rgba(203,213,225,.5); font-size: .73rem; line-height: 1.4; }
.parl-text-missing svg, .parl-record-note svg { width: 15px; height: 15px; flex: 0 0 auto; }
.parl-record-note { padding: .7rem .78rem; border: 1px solid rgba(148,163,184,.1); border-radius: 9px; background: rgba(255,255,255,.025); }

.parl-chamber-context { padding: 0 0 .6rem; }
.parl-chamber-eyebrow { color: #82b6f4; font-size: .64rem; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; }
.parl-chamber-title { color: #f4f7fb; font-size: .8rem; font-weight: 760; line-height: 1.28; }
.parl-chamber-subtitle { margin-top: .22rem; color: rgba(203,213,225,.48); font-size: .69rem; line-height: 1.4; }
.parl-chamber-summary { display: flex; align-items: center; gap: .55rem; min-height: 32px; padding: .3rem .35rem; overflow: hidden; }
.parl-chamber-summary strong { display: inline-flex; align-items: baseline; gap: .28rem; margin-right: auto; color: #f8fafc; font-size: 1.02rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.parl-chamber-summary strong span { color: rgba(203,213,225,.58); font-size: .64rem; font-weight: 720; letter-spacing: .025em; }
.parl-chamber-threshold { min-width: 0; margin-right: auto; overflow: hidden; color: rgba(203,213,225,.45); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.parl-chamber-government { flex: 0 0 auto; padding: .24rem .45rem; border: 1px solid; border-radius: 999px; font-size: .61rem; font-weight: 760; white-space: nowrap; }
.parl-chamber-government.is-majority { color: #86efac; background: rgba(34,197,94,.1); border-color: rgba(74,222,128,.28); }
.parl-chamber-government.is-minority { color: #fde68a; background: rgba(245,158,11,.09); border-color: rgba(251,191,36,.25); }
#parliamentView .parl-seat-map { padding: .65rem .55rem .25rem; border: 1px solid rgba(148,163,184,.09); border-radius: 10px; background: radial-gradient(circle at 50% 78%, rgba(66,91,126,.12), rgba(2,6,15,.52) 62%); box-shadow: inset 0 1px 16px rgba(0,0,0,.32); }
#parliamentView .parl-seat-map svg { min-height: 220px; }
#parliamentView .parl-seat-map circle[data-seat-index] { vector-effect: non-scaling-stroke; }

.parl-seat-key {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .28rem;
    padding: .45rem .5rem .6rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid rgba(148,163,184,.1);
}
.parl-seat-key span { display: flex; align-items: center; gap: .32rem; color: rgba(203,213,225,.5); font-size: .61rem; white-space: nowrap; }
.parl-seat-key-dot { width: 9px; height: 9px; flex: 0 0 auto; border: 1.5px solid #8292a8; border-radius: 50%; background: #8292a8; }
.parl-seat-key-yes { opacity: .95; }
.parl-seat-key-wav { background: transparent; opacity: .95; }
.parl-seat-key-no { opacity: .25; }
.parl-legend-position { display: flex; align-items: flex-end; flex-direction: column; gap: .1rem; }
.parl-legend-breakdown { color: rgba(203,213,225,.38); font-size: .59rem; font-variant-numeric: tabular-nums; }
#parliamentView .parl-legend-item { min-height: 31px; padding: .26rem .2rem; border-bottom: 1px solid rgba(148,163,184,.065); }
#parliamentView .parl-legend-item:last-child { border-bottom: 0; }
#parliamentView .parl-legend-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
#parliamentView .parl-legend-list { max-height: 260px; }

@media (max-width: 1000px) {
    #parliamentView .parl-view-body { grid-template-columns: 1fr; }
    #parliamentView .parl-right-col { position: static; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr); }
}

@media (max-width: 680px) {
    #parliamentView .parl-view-wrap { padding-inline: .2rem; }
    #parliamentView .parl-right-col { display: flex; }
    .parl-catalogue-head { flex-direction: column; }
    .parl-introduce-btn { width: 100%; }
    .parl-record-nav { grid-template-columns: 1fr; }
    .parl-record-tab { grid-template-columns: 24px minmax(0,1fr) 20px; place-content: stretch; }
    .parl-legislation-card { grid-template-columns: minmax(0, 1fr); }
    .parl-legislation-card-side { justify-content: flex-end; }
    .parl-seat-key { grid-template-columns: 1fr; }
    .parl-crumb { max-width: 62vw; }
}

@media (prefers-reduced-motion: reduce) {
    #parliamentView .parl-seat-map circle,
    .parl-legislation-card,
    .parl-legislation-card-side svg { transition-duration: 1ms !important; }
    .parl-record-tab.active,
    .parl-legislation-list { animation: none !important; }
}

/* Parliament workspace uses the same shell/well hierarchy as Story. The
   workspace itself stays fixed between the game bars; only its wells scroll. */
#parliamentView {
    --workspace-shell-bg: rgba(9,15,23,.94);
    --workspace-well-bg: rgba(4,9,15,.72);
    --workspace-border: rgba(148,163,184,.18);
    --workspace-inner-border: rgba(148,163,184,.12);
    --workspace-radius: 16px;
    --workspace-gap: .75rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#parliamentView .parl-view-wrap {
    flex: 1;
    min-height: 0;
    gap: var(--workspace-gap);
    padding: 0 .65rem;
    overflow: hidden;
}

#parliamentView .parl-breadcrumbs { flex: 0 0 auto; min-height: 32px; }

#parliamentView .parl-view-body {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    gap: var(--workspace-gap);
    overflow: hidden;
}

#parliamentView .parl-left-col,
#parliamentView .parl-right-col,
#parliamentView #parlAgendaView,
#parliamentView #parlDetailView,
#parliamentView #parlAgendaView > .parl-card,
#parliamentView #parlDetailView > div,
#parliamentView #parlDetailView > div > .parl-card {
    min-height: 0;
}

#parliamentView .parl-left-col,
#parliamentView #parlAgendaView,
#parliamentView #parlDetailView,
#parliamentView #parlDetailView > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#parliamentView .parl-card {
    background: var(--workspace-shell-bg) !important;
    border: 1px solid var(--workspace-border) !important;
    border-radius: var(--workspace-radius) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.24);
}

#parliamentView .parl-catalogue-card,
#parliamentView .parl-focus-details-card,
#parliamentView .parl-chamber-card {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#parliamentView .parl-catalogue-card,
#parliamentView .parl-focus-details-card {
    display: flex;
    flex-direction: column;
}

#parliamentView .parl-catalogue-head,
#parliamentView .parl-record-nav,
#parliamentView .parl-focus-details-hd,
#parliamentView .parl-focus-actions-row {
    flex: 0 0 auto;
}

#parliamentView .parl-legislation-list {
    flex: 1;
    min-height: 0;
    padding: .45rem;
    overflow-y: auto;
    background: var(--workspace-well-bg);
    border: 1px solid var(--workspace-inner-border);
    border-radius: 12px;
}

#parliamentView .parl-upcoming-block {
    flex: 0 1 auto;
    max-height: 23%;
    overflow-y: auto;
}

#parliamentView .parl-focus-body {
    flex: 1;
    min-height: 0;
    display: flex;
}

#parliamentView .parl-focus-well {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    background: var(--workspace-well-bg);
    border: 1px solid var(--workspace-inner-border);
    border-radius: 12px;
    box-shadow: none;
}

#parliamentView .parl-well-inner {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

#parliamentView .parl-right-col {
    position: static;
    overflow: hidden;
}

#parliamentView .parl-chamber-card {
    display: flex;
    flex-direction: column;
    padding: .85rem;
}

#parliamentView .parl-seat-map {
    flex: 0 0 auto;
    min-height: 0;
    background: var(--workspace-well-bg);
    border-color: var(--workspace-inner-border);
    box-shadow: none;
}

#parliamentView .parl-seat-map svg {
    display: block;
    width: 100%;
    height: clamp(210px, 25vh, 260px);
    min-height: 0;
    max-height: none;
}

#parliamentView .parl-chamber-parties {
    flex: 1;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    margin-top: .65rem;
}

.parl-chamber-section-heading {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 .15rem .48rem;
}

.parl-chamber-section-heading h2 {
    margin: 0;
    color: #eef4fb;
    font-size: .8rem;
    font-weight: 760;
    letter-spacing: .01em;
}

.parl-chamber-section-heading span {
    color: rgba(203,213,225,.42);
    font-size: .63rem;
}

#parliamentView .parl-legend-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    padding: .12rem .35rem;
    overflow-y: auto;
    background: var(--workspace-well-bg);
    border: 1px solid var(--workspace-inner-border);
    border-radius: 10px;
}

@media (max-width: 1000px) {
    #parliamentView .parl-view-body {
        grid-template-columns: minmax(0, 1.35fr) minmax(290px, .8fr);
    }

    #parliamentView .parl-right-col { display: flex; }
}

@media (max-width: 760px) {
    #parliamentView { overflow: hidden; }
    #parliamentView .parl-view-wrap { overflow: hidden; }
    #parliamentView .parl-mobile-pane-nav {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .25rem;
        padding: .25rem;
        background: rgba(9,15,23,.94);
        border: 1px solid rgba(148,163,184,.16);
        border-radius: 10px;
    }
    #parliamentView .parl-mobile-pane-nav button {
        min-height: 32px;
        padding: .35rem .55rem;
        color: rgba(203,213,225,.58);
        background: transparent;
        border: 0;
        border-radius: 7px;
        font-size: .68rem;
        font-weight: 760;
    }
    #parliamentView .parl-mobile-pane-nav button.active {
        color: #f8fbff;
        background: rgba(59,130,246,.16);
        box-shadow: inset 0 -2px #60a5fa;
    }
    #parliamentView .parl-view-body {
        flex: 1;
        min-height: 0;
        display: block;
        overflow: hidden;
    }
    #parliamentView .parl-left-col,
    #parliamentView .parl-right-col {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    #parliamentView[data-mobile-pane="legislation"] .parl-right-col,
    #parliamentView[data-mobile-pane="chamber"] .parl-left-col { display: none; }
    #parliamentView[data-mobile-pane="chamber"] .parl-right-col { display: flex; }
    #parliamentView .parl-catalogue-card,
    #parliamentView .parl-focus-details-card,
    #parliamentView .parl-chamber-card { height: 100%; overflow: hidden; }
    #parliamentView .parl-catalogue-head { flex-direction: row; align-items: center; }
    #parliamentView .parl-introduce-btn { width: auto; }
    #parliamentView .parl-record-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
    #parliamentView .parl-record-tab { grid-template-columns: 24px minmax(0,1fr); gap: .25rem; }
    #parliamentView .parl-record-tab-count { position: absolute; top: 3px; right: 3px; }
    #parliamentView .parl-legislation-list,
    #parliamentView .parl-well-inner,
    #parliamentView .parl-legend-list { max-height: none; }
    #parliamentView .parl-chamber-parties { min-height: 0; }
}

@media (max-width: 430px) {
    #parliamentView .parl-record-tab { grid-template-columns: 1fr; justify-items: center; }
    #parliamentView .parl-record-tab-icon { width: 22px; height: 22px; }
    #parliamentView .parl-record-tab-label { font-size: .6rem; }
    #parliamentView .parl-introduce-btn { padding-inline: .55rem; font-size: .68rem; }
    #parliamentView .parl-actions-grid-primary { grid-template-columns: 1fr; }
    #parliamentView .parl-debate-roundbar { grid-template-columns: auto 1fr; }
    #parliamentView .parl-debate-roundbar > :last-child { display: none; }
}
.game-outcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(3, 8, 15, .78);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

.game-outcome-overlay.open {
    opacity: 1;
    visibility: visible;
}

.game-outcome-card {
    width: min(620px, 100%);
    padding: 42px;
    border: 1px solid rgba(126, 161, 202, .3);
    border-radius: 28px;
    background: linear-gradient(155deg, rgba(21, 34, 50, .98), rgba(7, 14, 24, .99));
    box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
    text-align: center;
}

.game-outcome-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border: 1px solid rgba(106, 165, 235, .45);
    border-radius: 50%;
    color: #86bfff;
    background: rgba(33, 104, 184, .15);
}

.game-outcome-mark svg { width: 25px; height: 25px; }
.game-outcome-kicker {
    margin: 0 0 8px;
    color: #86bfff;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.game-outcome-card h1 { margin: 0; color: #f5f8fc; font-size: clamp(1.75rem, 4vw, 2.55rem); }
.game-outcome-summary { max-width: 500px; margin: 18px auto 22px; color: #b7c1cf; line-height: 1.55; }
.game-outcome-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.game-outcome-facts span {
    padding: 7px 12px;
    border: 1px solid rgba(142, 164, 191, .22);
    border-radius: 999px;
    color: #d5deea;
    background: rgba(255, 255, 255, .035);
    font-size: .84rem;
}
.game-outcome-checkpoint { min-height: 22px; margin: 18px 0 0; color: #8593a5; font-size: .84rem; }
.game-outcome-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.saved-game-archive-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 3px 8px;
    border: 1px solid rgba(126, 161, 202, .3);
    border-radius: 999px;
    color: #9eb7d5;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: middle;
}

body.game-archived .end-turn-btn,
body.game-archived .parl-introduce-btn,
body.game-archived .parl-focus-actions,
body.game-archived .parl-vote-now-btn,
body.game-archived [id^="storySend-"] {
    pointer-events: none;
    opacity: .42;
    filter: grayscale(.35);
}

@media (max-width: 600px) {
    .game-outcome-overlay { padding: 14px; }
    .game-outcome-card { padding: 30px 20px 22px; border-radius: 22px; }
    .game-outcome-actions { flex-direction: column; }
    .game-outcome-actions .gc-btn { width: 100%; }
}