/* CountryGov - Political Strategy Game Styles */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins/poppins-400-latin.woff2') format('woff2');
}

/* ── Autocracy: Power workspace ─────────────────────────────────────────── */
.power-agenda,
.power-detail { padding: 1.15rem; min-height: 100%; }
.power-agenda-heading,
.power-field-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.power-agenda-heading h3,
.power-field-heading h3,
.power-detail-heading h2,
.power-bloc-detail h2 { margin:.2rem 0 0; color:var(--text-primary, #f8fafc); }
.power-collection-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin:1rem 0; }
.power-collection-tabs button { border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:.65rem .75rem; color:rgba(255,255,255,.65); background:rgba(255,255,255,.025); display:flex; justify-content:space-between; }
.power-collection-tabs button.active { color:#fff; border-color:rgba(105,164,255,.48); background:rgba(59,130,246,.14); }
.power-collection-tabs button span { opacity:.65; }
.power-measure-list { display:grid; gap:.55rem; }
.power-measure-card { width:100%; text-align:left; border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:.8rem .9rem; color:#f8fafc; background:rgba(7,12,22,.42); display:grid; gap:.35rem; }
.power-measure-card:hover,
.power-measure-card.is-selected { border-color:rgba(105,164,255,.5); background:rgba(59,130,246,.1); }
.power-measure-card-top { display:flex; align-items:center; justify-content:space-between; }
.power-measure-card > span:last-child,
.power-measure-card small { color:rgba(255,255,255,.55); font-size:.78rem; }
.power-empty { min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.45rem; color:rgba(255,255,255,.48); }
.power-empty strong { color:rgba(255,255,255,.8); }
.power-empty-copy { color:rgba(255,255,255,.48); }
.power-detail-heading { padding:1rem 0 1.15rem; }
.power-detail-heading p,
.power-bloc-detail > p { color:rgba(255,255,255,.62); }
.power-detail section,
.power-bloc-detail section { border-top:1px solid rgba(255,255,255,.08); padding:1rem 0; }
.power-article { border-left:2px solid rgba(105,164,255,.45); padding:.55rem 0 .55rem .8rem; margin:.6rem 0; }
.power-article span { display:block; color:rgba(255,255,255,.45); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.power-article p { margin:.25rem 0 0; color:rgba(255,255,255,.65); }
.power-effects { white-space:pre-wrap; max-height:220px; overflow:auto; color:rgba(255,255,255,.68); background:rgba(0,0,0,.2); border-radius:9px; padding:.75rem; font-size:.74rem; }
.power-detail-actions { display:flex; flex-wrap:wrap; gap:.5rem; padding-top:.75rem; }
.power-stance-strip { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.7rem; }
.power-stance { padding:.25rem .5rem; border-radius:999px; background:rgba(255,255,255,.07); font-size:.7rem; }
.power-stance--supports { color:#86efac; }
.power-stance--accepts { color:#bfdbfe; }
.power-stance--uneasy { color:#fde68a; }
.power-stance--opposes { color:#fca5a5; }
.parl-chamber-summary.power-field-heading { overflow:visible; align-items:center; }
.autocracy-mode #parliamentView .parl-seat-map .power-bubble-map { height:clamp(220px, 32vh, 360px); min-height:0; padding:.15rem .4rem; }
.autocracy-mode #parliamentView .parl-legend-item { flex:0 0 auto; }
.power-bubble-map { display:block; width:100%; min-height:270px; max-height:360px; overflow:visible; }
.power-bubble { cursor:pointer; outline:none; }
.power-bubble .power-bubble-glow {
    pointer-events:none;
    stroke:none;
    opacity:0;
    filter:
        drop-shadow(0 0 3px color-mix(in srgb, var(--bloc-color) 92%, transparent))
        drop-shadow(0 0 7px color-mix(in srgb, var(--bloc-color) 64%, transparent));
    transition:opacity 260ms cubic-bezier(.2,.7,.2,1);
    will-change:opacity;
}
.power-bubble .power-bubble-identity-glow {
    pointer-events:none;
    stroke:none;
    opacity:.38;
    filter:
        drop-shadow(0 0 3px color-mix(in srgb, var(--primary-color) 92%, transparent))
        drop-shadow(0 0 7px color-mix(in srgb, var(--primary-color) 64%, transparent));
}
 .power-bubble .power-bubble-fill { stroke:none; }
.power-bubble[data-stance] { --stance-fill:1; }
.power-bubble[data-stance="Supports"] { --stance-fill:1; }
.power-bubble[data-stance="Accepts"] { --stance-fill:.65; }
.power-bubble[data-stance="Uneasy"] { --stance-fill:.25; }
.power-bubble[data-stance="Opposes"] { --stance-fill:0; }
.power-bubble[data-stance="unknown"] { --stance-fill:.12; }
.power-bubble[data-stance]:not([data-stance="overview"]) .power-bubble-fill {
    fill-opacity:var(--stance-fill);
    stroke:var(--bloc-color);
    stroke-width:2;
    transition:fill-opacity 180ms ease;
}
.power-bubble[data-stance="unknown"] .power-bubble-fill { stroke-dasharray:4 4; }
/* Selection and player identity glow around the outline, never fill an opposed bloc. */
.power-bubble[data-stance]:not([data-stance="overview"]) .power-bubble-glow,
.power-bubble[data-stance]:not([data-stance="overview"]) .power-bubble-identity-glow {
    fill:none;
    stroke:var(--bloc-color);
    stroke-width:2;
}

.power-bubble text { fill:#fff; font-size:12px; font-weight:700; pointer-events:none; paint-order:stroke; stroke:rgba(0,0,0,.48); stroke-width:3px; }
.power-bubble .power-bubble-value { font-size:11px; font-weight:500; }
.power-bubble .power-bubble-share { font-size:20px; font-weight:700; }
.power-bubble .power-bubble-name { font-size:10px; font-weight:500; }
.power-ring-positive { --power-ring:var(--color-positive); }
.power-ring-mid { --power-ring:var(--color-mid); }
.power-ring-negative { --power-ring:var(--color-negative); }
.power-ring-accepts { --power-ring:var(--primary-color); }
.power-ring-neutral { --power-ring:var(--text-muted); }
.power-bubble .power-bubble-selection { stroke:var(--text-primary); stroke-width:1.5; opacity:0; }
.power-bubble:focus-visible .power-bubble-selection { stroke:var(--text-primary); stroke-dasharray:3 3; opacity:1; }
.power-bubble:hover .power-bubble-glow,
.power-bubble:focus-visible .power-bubble-glow,
.power-bubble.is-selected .power-bubble-glow { opacity:1; }
#parliamentView .power-relationship-positive { color:var(--color-positive); }
#parliamentView .power-relationship-mid { color:var(--text-muted); }
#parliamentView .power-relationship-negative { color:var(--color-negative); }
.autocracy-mode #parliamentView .parl-seat-map svg.power-bubble-emblem { height:revert; width:revert; min-height:0; color:var(--text-primary); fill:currentColor; pointer-events:none; }
.power-ring-key { display:flex; justify-content:center; gap:1rem; color:var(--text-muted); font-size:.65rem; }
.power-ring-key > span::before { content:''; display:inline-block; width:.45rem; height:.45rem; margin-right:.3rem; border:1px solid var(--power-ring); border-radius:50%; }
.power-attitude { display:inline-flex; flex:0 0 auto; align-items:center; }
.power-attitude-face { width:20px; height:20px; background:var(--bg-primary); border-radius:50%; }
.power-attitude-backing { fill:var(--bg-primary); stroke:none; }
.power-attitude-hostile,
#parliamentView .parl-legend-ideol.power-attitude-hostile { color:var(--color-negative); }
.power-attitude-unfriendly,
#parliamentView .parl-legend-ideol.power-attitude-unfriendly { color:color-mix(in srgb, var(--color-negative), var(--color-mid) 45%); }
.power-attitude-wary,
#parliamentView .parl-legend-ideol.power-attitude-wary { color:var(--color-mid); }
.power-attitude-cooperative,
#parliamentView .parl-legend-ideol.power-attitude-cooperative { color:color-mix(in srgb, var(--color-positive), var(--text-secondary) 45%); }
.power-attitude-loyal,
#parliamentView .parl-legend-ideol.power-attitude-loyal { color:var(--color-positive); }
.autocracy-mode #parliamentView .parl-seat-map svg.power-attitude-face { width:revert; height:revert; min-height:0; overflow:visible; }
.autocracy-mode #parliamentView .power-bloc-panel .parl-overview-party-promises-empty { border:0; padding:0; text-align:left; font-size:.78rem; color:var(--text-secondary); }
.autocracy-mode #parliamentView .power-bloc-panel { align-content:start; }
.autocracy-mode #parliamentView .power-bloc-panel .map-country-bars { margin:.1rem 0 .25rem; gap:.45rem; }
.autocracy-mode #parliamentView .power-bloc-panel .power-bloc-description { margin-top:.08rem; line-height:1.45; }
.autocracy-mode #parliamentView .power-bloc-panel .parl-vote-party-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.autocracy-mode #parliamentView .power-bloc-panel .parl-vote-party-actions.has-leader-action { grid-template-columns:repeat(3,minmax(0,1fr)); }
.power-bloc-row { width:100%; display:grid; grid-template-columns:12px 1fr; gap:.65rem; align-items:center; text-align:left; border:0; border-radius:9px; padding:.55rem; color:#fff; background:transparent; }
.power-bloc-row:hover,
.power-bloc-row.is-selected { background:rgba(255,255,255,.06); }
.power-bloc-row span:last-child { display:grid; gap:.1rem; }
.power-bloc-row small { color:rgba(255,255,255,.52); }
.power-bloc-swatch { width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.15); }
.power-bloc-swatch.is-large { display:block; width:30px; height:30px; margin-bottom:.8rem; }
.power-bloc-detail { padding:1rem; }
.power-exact-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin:1rem 0; }
.power-exact-grid > div { border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:.75rem; }
.power-exact-grid span { display:block; color:rgba(255,255,255,.48); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; }
.power-exact-grid strong { font-size:1.2rem; }
@media (max-width: 767px) {
    .power-agenda-heading { align-items:stretch; flex-direction:column; }
    .power-collection-tabs { grid-template-columns:1fr; }
    .power-bubble-map { min-height:235px; }
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins/poppins-500-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins/poppins-600-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins/poppins-700-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/poppins/poppins-700-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/poppins/poppins-700-latin.woff2') format('woff2');
}

/* 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));
    --stats-drawer-gap: 0.75rem;
}

/* 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: 'Poppins', '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: #07111d;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
    animation: loadingFadeIn 0.45s ease both;
    opacity: 1;
    transition: opacity .28s ease;
}

.loading-overlay.is-ready {
    opacity: 0;
    pointer-events: none;
}

.has-game-loading-handoff .loading-overlay {
    animation: none;
    background-color: #07111d;
    background-image:
        linear-gradient(rgba(7, 17, 29, .34), rgba(7, 17, 29, .34)),
        var(--game-loading-handoff-image, linear-gradient(#07111d, #07111d));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* The destination document initially carries Bootstrap's d-none class. Make
   the handed-off loader visible from its first paint; the inline resume script
   fills it synchronously before the rest of the game document is parsed. */
.has-game-loading-handoff .loading-overlay.d-none {
    display: flex !important;
}

.has-game-loading-handoff .game-boot-cover {
    display: none;
}

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

/* Covers the unhydrated dashboard between navigation and the first real state. */
.game-boot-cover {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(31, 86, 145, .22), transparent 38%),
        #07111d;
    color: #f8fbff;
    opacity: 1;
    transition: opacity .28s ease;
}
.game-boot-cover.is-ready {
    opacity: 0;
    pointer-events: none;
}
.game-boot-cover-content {
    display: grid;
    justify-items: center;
    gap: .42rem;
    padding: 1.5rem;
    text-align: center;
}
.game-boot-cover-content strong {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: -.015em;
}
.game-boot-cover-content > span:last-child {
    color: rgba(211, 225, 241, .62);
    font-size: .72rem;
}
.game-boot-cover-mark {
    width: 24px;
    height: 24px;
    margin-bottom: .32rem;
    border: 2px solid rgba(96, 165, 250, .24);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}


/* 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;
    filter: saturate(1.06) contrast(1.02) brightness(0.94);
    animation: cinematicDrift 24s ease-in-out infinite alternate;
}
.loading-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at center, rgba(4, 11, 20, 0.38) 0%, rgba(4, 11, 20, 0.08) 46%, rgba(4, 11, 20, 0.18) 72%),
        linear-gradient(180deg, rgba(4, 11, 20, 0.1) 0%, rgba(4, 11, 20, 0.02) 48%, rgba(4, 11, 20, 0.42) 100%);
    pointer-events: none;
}

.loading-content {
    position: relative;
    z-index: 2;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(360px, calc(100% - 2rem));
    max-width: 360px;
    padding: 1.5rem 1.45rem 2.15rem;
    text-align: center;
    background: linear-gradient(155deg, rgba(15, 29, 44, 0.88), rgba(7, 18, 30, 0.82));
    border: 1px solid rgba(142, 181, 218, 0.24);
    border-radius: 21px;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(18px) saturate(1.12);
    animation: loadingContentReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.loading-content::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -3rem -4rem;
    background: radial-gradient(ellipse at center, rgba(3, 10, 19, 0.34) 0%, rgba(3, 10, 19, 0.14) 48%, transparent 74%);
    filter: blur(16px);
    pointer-events: none;
}
@keyframes loadingContentReveal {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.loading-brand-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.loading-flag {
    width: 168px;
    height: 112px;
    margin: 0;
    flex: 0 0 auto;
    animation: loadingFlagReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both;
}

.loading-flag-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 13px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(85, 170, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    opacity: 1;
    transform: none;
    animation: none;
}

.loading-flag-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 13px;
    opacity: 1;
    margin: 0;
}
@keyframes loadingFlagReveal {
    from { opacity: 0; transform: translateY(-10px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

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

.loading-progress h4 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.78rem;
    font-size: clamp(1.3rem, 2.2vw, 1.55rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.95), 0 1px 2px rgba(0, 0, 0, 0.9);
}

.loading-stage-status {
    width: 100%;
    min-width: 0;
    min-height: 1.7rem;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0 0 0.9rem;
    padding: 0 0 0.72rem;
    border-bottom: 1px solid rgba(150, 181, 211, 0.16);
    text-align: left;
}
.loading-stage-count {
    flex: 0 0 auto;
    color: #62b2ff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
}
.loading-stage-divider {
    width: 1px;
    height: 0.9rem;
    flex: 0 0 auto;
    background: rgba(151, 184, 217, 0.22);
    margin-top: 0.05rem;
}
.loading-live-work {
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible;
    color: rgba(218, 231, 244, 0.72);
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.loading-live-work.is-changing {
    opacity: 0;
    transform: translateY(4px);
}

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

/* 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-secondary-fill {
    color: #fff;
    background: linear-gradient(135deg, #475569, #273548);
    border-color: #64748b;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 24px rgba(0,0,0,0.24);
}

.menu-btn-secondary-fill:hover {
    color: #fff;
    background: linear-gradient(135deg, #52647a, #33445a);
    border-color: #8291a6;
}

.menu-btn-secondary-fill:focus-visible {
    color: #fff;
    outline: 3px solid rgba(148, 163, 184, 0.48);
    outline-offset: 2px;
}

.menu-btn-secondary-fill:active {
    color: #fff !important;
    background: linear-gradient(135deg, #334155, #1e293b) !important;
    border-color: #64748b !important;
}

.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%;
    min-height: 350px;
    height: auto;
    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 {
    position: relative;
    inset: auto;
    z-index: 3;
    height: auto;
    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-topline { display: flex; align-items: center; gap: .65rem; min-width: 0; padding-right: 2.9rem; }
.inherited-card-topline .inherited-government-system { order: 1; }
.inherited-card-topline .inherited-heritage-badge { order: 2; }
.inherited-card-flag { display: inline-block; position: relative; overflow: hidden; width: 64px; height: 43px; max-width: 86px; flex-shrink: 0; object-fit: contain; border: 1px solid color-mix(in srgb, var(--text-primary) 72%, transparent); border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 72%, transparent); filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.inherited-heritage-badge { display: inline-flex; align-items: center; gap: .42rem; min-width: 0; max-width: 230px; padding: .38rem .58rem; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; color: #f3f6fa; background: rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); font-size: .68rem; font-weight: 850; line-height: 1.1; }
.inherited-heritage-badge span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inherited-heritage-badge svg { flex: 0 0 auto; width: 16px; height: 16px; }
.inherited-country-card h2 { margin: .65rem 2.5rem .05rem 0; font-size: 1.3rem; font-weight: 900; }
.inherited-institution-line { display: flex; align-items: center; flex-wrap: wrap; gap: .48rem; margin: 0 0 .7rem; }
.inherited-government-type { min-width: 0; margin: 0; overflow: hidden; color: #a5b1c2; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.inherited-government-system { display: inline-flex; align-items: center; gap: .42rem; flex: 0 0 auto; padding: .38rem .58rem; border: 1px solid rgba(93,168,255,.34); border-radius: 999px; color: #b9d8ff; background: rgba(27,89,169,.18); font-size: .68rem; font-weight: 850; line-height: 1.1; }
.inherited-government-system.is-autocracy { border-color: rgba(167,112,255,.38); color: #d1b5ff; background: rgba(100,52,166,.22); }
.inherited-government-system svg { flex: 0 0 auto; width: 16px; height: 16px; }
.inherited-electoral-system { display: inline-flex; align-items: center; gap: .28rem; flex: 0 0 auto; padding: .22rem .44rem; border: 1px solid rgba(93, 168, 255, .3); border-radius: 6px; color: #b9d8ff; background: rgba(27, 89, 169, .16); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); font-size: .62rem; font-weight: 900; letter-spacing: .045em; line-height: 1; }
.inherited-electoral-system svg { width: 12px; height: 12px; color: #66adff; stroke-width: 2.35; }
.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.is-political-identity {
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
}
.inherited-fact.is-political-identity.is-autocracy {
    grid-template-columns: clamp(108px, 20%, 150px) minmax(0, 1fr);
}
.inherited-fact.is-political-identity > span:first-child { line-height: 1.35; overflow-wrap: anywhere; }
.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-fact .inherited-leader-value { display: flex; align-items: center; gap: .45rem; overflow: visible; }
.inherited-fact .inherited-leader-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e6ebf3; font-size: .9rem; font-weight: 900; letter-spacing: 0; text-transform: none; }
.inherited-fact .inherited-rise-to-power { display: inline-flex; align-items: center; gap: .25rem; flex: 0 0 auto; padding: .12rem .38rem; border-color: rgba(167,112,255,.26); border-radius: 6px; color: #c6a7f4; background: rgba(100,52,166,.12); font-size: .58rem; font-weight: 750; letter-spacing: 0; line-height: 1.35; text-transform: none; }
.inherited-fact .inherited-rise-to-power svg { width: 11px; height: 11px; }
.inherited-fact .inherited-party-value { display: flex; align-items: center; justify-self: stretch; gap: .45rem; overflow: visible; text-align: left; }
.inherited-fact .inherited-party-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e6ebf3; font-size: .9rem; font-weight: 900; letter-spacing: 0; text-transform: none; }
.inherited-fact .inherited-ideology { flex: 0 0 auto; padding: .22rem .48rem; border: 1px solid rgba(167, 112, 255, .38); border-radius: 999px; color: #d1b5ff; background: rgba(100, 52, 166, .22); font-size: .64rem; font-weight: 800; letter-spacing: 0; line-height: 1.1; text-transform: none; }
.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-promises { border-color: rgba(240, 184, 67, .34); color: #f4d27f; background: rgba(126, 82, 17, .2); }
.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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PEOPLE 2.0 — durable figures, readable relationship play
   ═══════════════════════════════════════════════════════════════════════════ */
#peopleTab .person-detail-item-person {
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(73, 187, 125, .25);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(19, 31, 43, .96), rgba(13, 22, 33, .98));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}
#peopleTab .person-detail-item-person::before { display: none; }
#peopleTab .person-detail-item-person:hover {
    border-color: rgba(73, 187, 125, .5);
    background: linear-gradient(145deg, rgba(23, 39, 51, .98), rgba(14, 25, 37, 1));
}
#peopleTab .person-detail-portrait-wrap {
    width: 92px;
    height: 122px;
    flex: 0 0 92px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    background: #0a111a;
}
#peopleTab .person-detail-portrait { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
#peopleTab .person-detail-body { min-width: 0; flex: 1; }
#peopleTab .person-detail-name { color: #f4f7fb; font-size: 1.03rem; font-weight: 780; line-height: 1.2; }
#peopleTab .person-detail-role { margin-top: 4px; color: #c1cad5; font-size: .82rem; line-height: 1.35; }
#peopleTab .person-detail-affiliation { margin-top: 2px; color: #7f91a6; font-size: .74rem; line-height: 1.35; }
.person-personal-bond {
    display: inline-flex;
    width: max-content;
    padding: 3px 8px;
    color: #f5b9d1;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .065em;
    text-transform: uppercase;
    border: 1px solid rgba(244, 114, 182, .3);
    border-radius: 999px;
    background: rgba(190, 54, 125, .12);
}
.person-detail-item-header .person-personal-bond { margin-left: auto; }
.person-detail-identity > .person-personal-bond,
.person-update-main > .person-personal-bond { margin-top: 9px; }
#peopleTab .person-detail-bars { margin-top: 10px; gap: 7px; }
#peopleTab .person-detail-bar-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 12px;
    align-items: center;
}
#peopleTab .person-detail-bar-label {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    color: #8795a5;
    font-size: .72rem;
}
#peopleTab .person-detail-bar-val {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    justify-self: end;
    text-align: right;
}
#peopleTab .person-detail-bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 7px;
    background: rgba(255, 255, 255, .09);
}
#peopleTab .person-detail-bar-fill.power,
.person-detail-track:not(.bipolar) i { background: linear-gradient(90deg, #4b91e8, #76b6ff); }
#peopleTab .person-detail-bar-val { width: auto; justify-self: end; color: #c9d3df; font-size: .68rem; font-weight: 650; }
#peopleTab .person-detail-priority {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #cbd4df;
    font-size: .74rem;
    line-height: 1.4;
}
#peopleTab .person-detail-priority span {
    display: block;
    margin-bottom: 2px;
    color: #75cb9e;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.person-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(2, 7, 13, .76);
    backdrop-filter: blur(9px);
    opacity: 0;
    transition: opacity .18s ease;
}
.person-detail-overlay.is-visible { opacity: 1; }
.person-detail-card {
    position: relative;
    box-sizing: border-box;
    width: min(760px, calc(100vw - 32px));
    max-width: calc(100vw - 48px);
    min-height: 0;
    max-height: calc(100dvh - 48px);
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    color: #eaf0f7;
    border: 1px solid rgba(144, 169, 197, .22);
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(18, 28, 41, .99), rgba(8, 14, 23, .995));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .66);
}
.person-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0 0 3px;
    color: #aab6c5;
    font-size: 1.45rem;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .055);
    cursor: pointer;
}
.person-detail-close:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* Dossier and Development records use the same substantial detail surface as people. */
.record-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(4px);
}
.record-detail-card {
    position: relative;
    box-sizing: border-box;
    flex: 0 1 auto;
    width: min(760px, calc(100vw - 32px));
    max-width: calc(100vw - 48px);
    min-height: 0;
    max-height: calc(100dvh - 48px);
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    color: #eaf0f7;
    text-align: left;
    border: 1px solid rgba(144, 169, 197, .22);
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(18, 28, 41, .99), rgba(8, 14, 23, .995));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .66);
}
.development-detail-card { border-color: rgba(245, 158, 11, .25); }
.record-detail-hero-image {
    position: relative;
    width: 100%;
    height: clamp(230px, 38vw, 340px);
    flex: 0 0 auto;
    background-color: #0b1119;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.record-detail-hero-image::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(to top, rgba(10, 16, 25, 1) 0%, rgba(10, 16, 25, .7) 28%, transparent 66%);
    pointer-events: none;
}
.record-detail-card--with-hero .record-detail-header {
    position: relative;
    z-index: 1;
    margin-top: -92px;
    padding-top: 38px;
    background: linear-gradient(to bottom, transparent, rgba(10, 16, 25, .96) 48%);
}
.record-detail-card--with-hero .record-detail-close {
    z-index: 4;
    color: #fff;
    background: rgba(5, 9, 14, .58);
    box-shadow: 0 3px 15px rgba(0,0,0,.35);
    backdrop-filter: blur(7px);
}
.record-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0 0 3px;
    color: #aab6c5;
    font-size: 1.45rem;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .055);
    cursor: pointer;
}
.record-detail-close:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.record-detail-header { padding: 26px 27px 22px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.record-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 44px 13px 0; }
.record-detail-title { margin: 0; padding-right: 36px; color: #f7f9fc; font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 780; line-height: 1.15; }
.record-detail-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; color: #8295ad; font-size: .78rem; }
.record-detail-content { display: grid; gap: 0; }
.record-detail-content > section { padding: 20px 27px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.record-detail-content > section:last-child { border-bottom: 0; }
.record-detail-content h3 { margin: 0 0 10px; color: #f1f5f9; font-size: .9rem; font-weight: 780; }
.record-detail-content p { margin: 0; color: #c7d0dc; font-size: .98rem; line-height: 1.58; }
.record-detail-content > .development-war-section {
    padding: 0;
    background: rgba(0, 0, 0, .22);
}
.war-situation {
    --war-intensity-color: var(--color-mid);
    display: grid;
    gap: 14px;
    padding: 22px 27px 25px;
}
.war-situation[data-intensity="low"] { --war-intensity-color: var(--info-color); }
.war-situation[data-intensity="moderate"] { --war-intensity-color: var(--color-mid); }
.war-situation[data-intensity="high"],
.war-situation[data-intensity="extreme"] { --war-intensity-color: var(--color-negative); }
.war-situation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.war-situation-title {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.war-situation-symbol {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--war-intensity-color);
    border: 1px solid color-mix(in srgb, var(--war-intensity-color) 38%, transparent);
    background: color-mix(in srgb, var(--war-intensity-color) 11%, transparent);
}
.war-situation-symbol { width: 38px; height: 38px; border-radius: var(--radius-btn); }
.war-situation-symbol svg { width: 18px; height: 18px; }
.war-situation-title > div { display: grid; gap: 2px; min-width: 0; }
.war-situation-title > div > span,
.war-dashboard-label,
.war-side-heading,
.war-front-identity > span {
    color: var(--text-muted);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.war-situation-title strong {
    color: var(--text-primary);
    font-size: .92rem;
    font-weight: 760;
}
.war-intensity-scale {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}
.war-intensity-scale > span { display: grid; gap: 5px; min-width: 0; }
.war-intensity-scale i {
    display: block;
    height: 7px;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-bg);
    border: 1px solid var(--color-neutral-border);
}
.war-intensity-scale b {
    overflow: hidden;
    color: var(--text-muted);
    font-size: .6rem;
    font-weight: 650;
    text-overflow: ellipsis;
}
.war-intensity-scale .is-active i {
    border-color: color-mix(in srgb, var(--war-intensity-color) 50%, transparent);
    background: color-mix(in srgb, var(--war-intensity-color) 68%, transparent);
}
.war-intensity-scale .is-current i {
    background: var(--war-intensity-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--war-intensity-color) 48%, transparent);
}
.war-intensity-scale .is-current b { color: var(--war-intensity-color); font-weight: 800; }
.war-dashboard-label { margin-top: 4px; }
.war-side-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    align-items: start;
}
.war-side-group { display: grid; gap: 7px; min-width: 0; }
.war-side-heading {
    overflow: hidden;
    padding: 0 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.war-side-group.is-primary-side .war-side-heading { color: color-mix(in srgb, var(--primary-color) 74%, var(--text-secondary)); }
.war-side-group.is-secondary-side .war-side-heading { color: color-mix(in srgb, var(--color-negative) 72%, var(--text-secondary)); }
.war-force-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
}
.war-force-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background: rgba(0, 0, 0, .48);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .4);
}
.war-force-card.is-primary-side { border-color: color-mix(in srgb, var(--primary-color) 38%, transparent); }
.war-force-card.is-secondary-side { border-color: var(--color-negative-border); }
.war-force-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.war-force-flag {
    display: block;
    width: 44px;
    height: 31px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: var(--shadow-sm);
}
.war-force-identity > .flag-artwork-frame { flex: 0 0 auto; box-shadow: var(--shadow-sm); }
.war-force-identity > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.war-force-identity strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: .86rem;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.war-force-you {
    flex: 0 0 auto;
    padding: 2px 5px;
    color: color-mix(in srgb, var(--primary-color) 72%, white);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--primary-color) 48%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}
.war-force-number { display: grid; gap: 0; }
.war-force-number strong {
    color: var(--text-primary);
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
    line-height: 1;
}
.war-force-number span,
.war-force-losses { color: var(--text-muted); font-size: .68rem; }
.war-force-comparison {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.war-force-comparison { color: var(--text-muted); font-size: .62rem; }
.war-force-comparison strong { color: var(--text-secondary); font-size: .65rem; font-variant-numeric: tabular-nums; }
.war-force-losses {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--border-color);
}
.war-force-losses strong { color: var(--text-secondary); font-size: .76rem; font-variant-numeric: tabular-nums; }
.war-front-list { display: grid; gap: 8px; }
.war-front-card {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid var(--color-mid-border);
    border-radius: var(--radius-card);
    background: var(--color-mid-bg);
}
.war-front-card.is-occupied { border-color: var(--color-negative-border); background: var(--color-negative-bg); }
.war-front-card .map-war-key { width: 16px; height: 16px; }
.war-front-identity { display: grid; gap: 2px; min-width: 0; }
.war-front-identity strong { color: var(--text-primary); font-size: .84rem; font-weight: 760; }
.war-front-identity small { color: var(--text-secondary); font-size: .68rem; line-height: 1.35; }
.war-front-map-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    color: var(--text-primary);
    font: inherit;
    font-size: .68rem;
    font-weight: 750;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    background: rgba(0, 0, 0, .28);
    cursor: pointer;
}
.war-front-map-button:hover { border-color: color-mix(in srgb, var(--primary-color) 55%, transparent); background: color-mix(in srgb, var(--primary-color) 12%, transparent); }
.war-front-map-button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.war-front-map-button svg { width: 14px; height: 14px; }
@media (max-width: 600px) {
    .war-situation { padding: 19px 18px 22px; }
    .war-situation-header { align-items: flex-start; flex-direction: column; }
    .war-side-groups { grid-template-columns: 1fr; }
    .war-front-card { grid-template-columns: 18px minmax(0, 1fr); }
    .war-front-map-button { grid-column: 2; justify-self: start; }
}
.record-detail-content .dossier-compounding-effects,
.record-detail-content .dossier-completion-effects,
.record-detail-content .dossier-policy-sections { margin-top: 0; }
.dossier-resource-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.dossier-resource-asset-grid > div {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid rgba(110, 231, 183, .15);
    border-radius: 9px;
    background: rgba(110, 231, 183, .045);
}
.dossier-resource-asset-grid span { color: #718399; font-size: .64rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.dossier-resource-asset-grid strong { color: #dce8e2; font-size: .82rem; font-weight: 760; text-transform: capitalize; }
.dossier-resource-outputs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.dossier-resource-output {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    color: #cfe5db;
    font-size: .72rem;
    border: 1px solid rgba(110, 231, 183, .17);
    border-radius: 7px;
    background: rgba(110, 231, 183, .06);
}
.dossier-resource-output i { width: 7px; height: 7px; border-radius: 50%; background: var(--resource-color); box-shadow: 0 0 6px color-mix(in srgb, var(--resource-color), transparent 35%); }
.dossier-resource-output strong { color: #f2faf6; }
.dossier-resource-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 8px 11px;
    color: #b9f1d4;
    font: inherit;
    font-size: .74rem;
    font-weight: 750;
    border: 1px solid rgba(110, 231, 183, .25);
    border-radius: 8px;
    background: rgba(110, 231, 183, .08);
    cursor: pointer;
}
.dossier-resource-map-btn:hover { background: rgba(110, 231, 183, .14); border-color: rgba(110, 231, 183, .42); }
.dossier-resource-map-btn svg { width: 14px; height: 14px; }
.record-detail-articles .dossier-policy-sections > .dossier-detail-label { display: none; }
.dossier-legislation-effects {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
.dossier-legislation-effect-group > span {
    display: block;
    margin-bottom: 9px;
    color: #8295ad;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.record-detail-content .dossier-legislation-effect-group .dossier-compounding-effects {
    gap: 7px;
}
.dossier-article-effect-list {
    display: grid;
    gap: 7px;
}
.dossier-article-effect-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}
.dossier-article-effect-row--national > * {
    flex: 1 1 100%;
    min-width: 0;
}
.record-detail-content .dossier-policy-effects {
    margin-top: 10px;
}
.record-detail-content .dossier-policy-effects .dossier-compounding-effects {
    gap: 7px;
}
.record-findings-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.record-findings-list li { position: relative; padding-left: 20px; color: #c4ceda; font-size: .9rem; line-height: 1.45; }
.record-findings-list li::before { content: ''; position: absolute; top: .55em; left: 2px; width: 7px; height: 7px; border: 2px solid #53d9f1; border-radius: 50%; }
.person-detail-hero { display: grid; grid-template-columns: 190px 1fr; gap: 25px; padding: 26px; }
.person-detail-portrait {
    width: 190px;
    height: 250px;
    object-fit: cover;
    object-position: top center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 13px;
    background: #090f17;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
}
.person-detail-identity { min-width: 0; padding: 6px 38px 0 0; }
.person-detail-kicker { color: #62c88f; font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.person-detail-identity h2 { margin: 6px 0 5px; color: #f7f9fc; font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.08; }
.person-detail-role { color: #d1d9e4; font-size: 1rem; line-height: 1.4; }
.person-detail-identity .person-detail-affiliation { margin-top: 3px; max-width: none; text-align: left; color: #8295ad; font-size: .86rem; line-height: 1.4; }
.person-detail-metrics { display: grid; gap: 17px; margin-top: 27px; }
.person-detail-metric > div:first-child { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 7px; }
.person-detail-metric span { color: #92a1b2; font-size: .76rem; font-weight: 700; }
.person-detail-metric strong { color: #dce5ef; font-size: .78rem; font-weight: 750; }
.person-detail-track { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .09); }
.person-detail-track i { display: block; height: 100%; border-radius: inherit; }
.person-detail-content { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.person-detail-content section { padding: 20px 27px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.person-detail-content section:last-child { border-bottom: 0; }
.person-detail-content h3 { margin: 0 0 8px; color: #f1f5f9; font-size: .9rem; font-weight: 780; }
.person-detail-content p { margin: 0; color: #c7d0dc; font-size: .98rem; line-height: 1.58; }
.person-priority-section { background: rgba(60, 161, 106, .055); }
.person-priority-section h3 { color: #75d19f; }
.person-relationship-history { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.person-relationship-history li { display: flex; gap: 12px; color: #c4ceda; font-size: .9rem; line-height: 1.45; }
.person-relationship-history strong { flex: 0 0 34px; font-size: .86rem; }
.person-relationship-history .is-positive { color: #71d59e; }
.person-relationship-history .is-negative { color: #f08080; }
.map-country-leader {
    width: 100%;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    margin: 11px 0 13px;
    padding: 9px;
    text-align: left;
    color: #e8eef6;
    border: 1px solid rgba(92, 154, 220, .2);
    border-radius: 10px;
    background: rgba(35, 73, 112, .09);
    cursor: pointer;
}
.map-country-leader:hover { border-color: rgba(92, 170, 237, .42); background: rgba(35, 93, 148, .14); }
.map-country-leader.is-player { cursor: default; }
.map-country-leader.is-player:hover { border-color: rgba(92, 154, 220, .2); background: rgba(35, 73, 112, .09); }
.map-country-leader img { width: 58px; height: 72px; object-fit: cover; object-position: top center; border-radius: 7px; }
.map-country-leader span { min-width: 0; }
.map-country-leader em { display: block; color: #71869e; font-size: .58rem; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.map-country-leader strong { display: block; margin-top: 2px; color: #edf3f9; font-size: .84rem; }
.map-country-leader small { display: block; margin-top: 1px; color: #8e9daf; font-size: .68rem; line-height: 1.35; }
.map-country-player-symbol {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.map-country-player-symbol .map-player-symbol { width: 28px; height: 28px; border-width: 3px; box-shadow: 0 0 12px rgba(59, 130, 246, .72); }
.map-country-player-symbol b { color: #7f91a7; font-size: .54rem; line-height: 1; letter-spacing: .11em; text-transform: uppercase; }

@media (max-width: 640px) {
    .person-detail-overlay { padding: 12px; }
    .person-detail-card { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
    .person-detail-hero { grid-template-columns: 112px 1fr; gap: 16px; padding: 18px; }
    .person-detail-portrait { width: 112px; height: 150px; }
    .person-detail-identity { padding-right: 22px; }
    .person-detail-metrics { grid-column: 1 / -1; margin-top: 18px; }
    .person-detail-identity h2 { font-size: 1.35rem; }
    .person-detail-content section { padding: 17px 19px; }
    .record-detail-overlay { padding: 12px; }
    .record-detail-card { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
    .record-detail-hero-image { height: 220px; }
    .record-detail-card--with-hero .record-detail-header { margin-top: -74px; padding-top: 30px; }
    .record-detail-header { padding: 20px 19px 17px; }
    .record-detail-content > section { padding: 17px 19px; }
    .record-detail-title { font-size: 1.35rem; }
}


/* Version badge */
.menu-version {
    position: fixed;
    bottom: 1rem;
    right: 1.25rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .68rem;
    min-height: 58px;
    padding: .6rem .82rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: rgba(7,11,18,.4);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.2);
    color: rgba(255,255,255,.72);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease,
                transform 180ms ease, opacity 300ms ease;
}
.menu-version:hover,
.menu-version:focus-visible {
    color: #fff;
    border-color: rgba(96,165,250,.62);
    background: rgba(20,54,92,.62);
    outline: none;
    transform: translateY(-2px);
}
.menu-version svg {
    width: 20px;
    height: 20px;
    color: #60a5fa;
}
.menu-version-copy {
    display: grid;
    gap: .08rem;
    line-height: 1.05;
}
.menu-version-label {
    color: rgba(191,219,254,.74);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.menu-version-release {
    color: rgba(255,255,255,.9);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
}
.megaming-word { color: #4d8df7; }
.menu-version-mobile { display: none; }

@media (max-width: 700px) {
    .menu-version {
        right: .75rem;
        bottom: .75rem;
        min-height: 42px;
        gap: .45rem;
        padding: .52rem .68rem;
        border-radius: 10px;
    }
    .menu-version svg { width: 17px; height: 17px; }
    .menu-version-copy { display: none; }
    .menu-version-mobile {
        display: inline;
        color: rgba(255,255,255,.84);
        font-size: .69rem;
        font-weight: 800;
        letter-spacing: .055em;
        text-transform: uppercase;
    }
}

/* ── 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;
}

/* A cinematic loader handed to /game is itself the page transition. Do not
   animate it away while audio finishes fading and navigation begins. */
body.page-loading-handoff {
    animation: none !important;
    opacity: 1 !important;
    transform: none !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: 54px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    object-fit: contain;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: none;
}

@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: contain;
    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 selector */
.ideology-selector-container {
    position: relative;
    padding: 1rem;
    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: var(--radius-modal);
    box-shadow: var(--shadow-lg);
}

.ideology-selector-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.setup-field-kicker {
    display: block;
    margin-bottom: .08rem;
    color: var(--text-muted);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ideology-selector-heading strong {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.ideology-spectrum {
    --ideology-thumb-radius: 13px;
    position: relative;
    min-width: 520px;
    padding: .35rem 14px 0;
}

.ideology-spectrum-track {
    position: absolute;
    top: 19px;
    right: calc(14px + var(--ideology-thumb-radius));
    left: calc(14px + var(--ideology-thumb-radius));
    height: 4px;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 20%, #22c55e 50%, #3b82f6 80%, #8b5cf6 100%);
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 1;
}

.ideology-slider-nodes {
    position: relative;
    height: 4px;
}

.ideology-slider-node {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    background: #171b23;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: var(--radius-pill);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .65);
}

.ideology-slider-node.is-selected {
    background: var(--primary-color);
    border-color: #fff;
}

#ideologySlider {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 36px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: grab;
}

#ideologySlider:active { cursor: grabbing; }

#ideologySlider::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
    border: 0;
}

#ideologySlider::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    margin-top: -11px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--primary-color);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--primary-color), 0 4px 14px rgba(0, 0, 0, .55);
}

#ideologySlider::-moz-range-track {
    height: 4px;
    background: transparent;
    border: 0;
}

#ideologySlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--primary-color), 0 4px 14px rgba(0, 0, 0, .55);
}

#ideologySlider:focus-visible { outline: none; }

#ideologySlider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--primary-color), 0 0 0 7px rgba(125, 185, 255, .45), 0 4px 14px rgba(0, 0, 0, .55);
}

.ideology-slider-labels {
    position: relative;
    height: 2rem;
    margin: .18rem var(--ideology-thumb-radius) 0;
}

.ideology-slider-label {
    position: absolute;
    width: 48px;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .68);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.15;
    text-align: center;
    transition: color 160ms ease;
}

.ideology-slider-label.is-selected { color: var(--text-primary); }

.ideology-extremes-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .85rem .15rem 0;
    padding-top: .78rem;
    border-top: 1px solid rgba(255, 255, 255, .09);
    cursor: pointer;
}

.ideology-extremes-control > span:first-child {
    display: grid;
    gap: .08rem;
}

.ideology-extremes-control strong {
    color: var(--text-secondary);
    font-size: .75rem;
}

.ideology-extremes-control small {
    color: var(--text-muted);
    font-size: .68rem;
    line-height: 1.35;
}

.ideology-selection-description {
    min-height: 1.25rem;
    margin: .72rem .15rem 0;
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .ideology-selector-container {
        min-width: 0;
        overflow-x: clip;
    }

    .ideology-spectrum {
        min-width: 0;
    }

    .ideology-extremes-control {
        align-items: flex-start;
    }
}

/* 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;
}

/* ── Setup platform builder ─────────────────────────────────────── */
.promise-platform-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin: .72rem 0 .88rem;
}
.promise-platform-slot {
    min-width: 0;
    min-height: 52px;
    padding: .48rem .62rem;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 9px;
    background: rgba(14, 26, 43, .88);
    color: rgba(203, 213, 225, .58);
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.promise-platform-slot.is-required { border-color: rgba(96, 165, 250, .38); }
.promise-platform-slot.is-filled {
    border-color: rgba(74, 153, 255, .8);
    background: rgba(31, 74, 128, .34);
    color: #f8fafc;
    box-shadow: inset 0 -2px 0 rgba(74, 153, 255, .72);
}
.promise-slot-kicker {
    display: block;
    margin-bottom: .1rem;
    color: #7db9ff;
    font-size: .56rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.promise-platform-slot strong {
    display: block;
    overflow: hidden;
    color: inherit;
    font-size: .75rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#promisesContainer { padding-right: .35rem; }
.promise-picker-section {
    padding: 1rem;
    border: 1px solid rgba(116, 155, 200, .22);
    border-radius: 14px;
    background: rgba(6, 15, 28, .72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.promise-picker-section + .promise-picker-section { margin-top: .9rem; }
.promise-picker-section.is-locked { border-style: dashed; }
.promise-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}
.promise-section-heading h5 { margin: .08rem 0 .18rem; color: #f8fafc; font-size: 1rem; }
.promise-section-heading p {
    max-width: 690px;
    margin: 0;
    color: rgba(203, 213, 225, .7);
    font-size: .8rem;
    line-height: 1.42;
}
.promise-section-kicker {
    color: #65b5ff;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.promise-stage-state {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 28px;
    padding: .3rem .58rem;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 999px;
    background: rgba(15, 23, 42, .74);
    color: rgba(203, 213, 225, .72);
    font-size: .7rem;
    font-weight: 750;
}
.promise-stage-state svg { width: 13px; height: 13px; }
.promise-stage-state.is-complete {
    border-color: rgba(74, 222, 128, .4);
    color: #86efac;
    background: rgba(20, 83, 45, .28);
}
.promise-picker-section .promise-filter-bar { justify-content: flex-start; margin: -.1rem 0 .75rem; }
.promise-picker-section .promise-filter-pill {
    min-height: 30px;
    padding: .25rem .72rem;
    border-color: rgba(148, 163, 184, .18);
    background: rgba(15, 23, 42, .7);
    color: rgba(203, 213, 225, .72);
    font-size: .72rem;
    font-weight: 700;
}
.promise-picker-section .promise-filter-pill.active {
    border-color: #60a5fa;
    background: rgba(30, 64, 175, .4);
    color: #dbeafe;
    box-shadow: inset 0 -2px 0 #60a5fa;
}
.promise-picker-section .promise-grid {
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: .72rem;
}
.promise-picker-section .promise-card {
    appearance: none;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(116, 155, 200, .24);
    border-radius: 12px;
    background: #0b1524;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.promise-picker-section .promise-card:hover,
.promise-picker-section .promise-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, .7);
    background: #0b1524;
    box-shadow: 0 12px 24px rgba(0,0,0,.28);
    outline: none;
}
.promise-picker-section .promise-card.selected {
    border-color: #4a99ff;
    background: #0d1d32;
    box-shadow: inset 0 0 0 1px rgba(74,153,255,.5), inset 0 -3px 0 #4a99ff;
}
.promise-card-art {
    position: relative;
    height: 116px;
    overflow: hidden;
    background: linear-gradient(135deg, #15233a, #0a1321);
}
.promise-card-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4,10,18,.08), rgba(4,10,18,.8));
}
.promise-card-art img { width: 100%; height: 100%; object-fit: cover; }
.promise-card-art.is-empty { display: grid; place-items: center; color: #60a5fa; }
.promise-card-art.is-empty > svg { width: 28px; height: 28px; }
.promise-picker-section .promise-card-badges {
    position: absolute;
    z-index: 2;
    left: .55rem;
    bottom: .48rem;
    margin: 0;
}
.promise-source-badge {
    padding: .2rem .45rem;
    border: 1px solid rgba(191,219,254,.3);
    border-radius: 999px;
    background: rgba(8,18,32,.82);
    color: #dbeafe;
    font-size: .62rem;
    font-weight: 750;
}
.promise-picker-section .promise-check {
    position: absolute;
    z-index: 3;
    top: .5rem;
    right: .5rem;
    width: 26px;
    height: 26px;
    margin: 0;
    border: 1px solid rgba(191, 219, 254, .5);
    border-radius: 8px;
    background: rgba(5, 12, 22, .78);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
}
.promise-picker-section .promise-check svg { width: 15px; height: 15px; }
.promise-picker-section .promise-card.selected .promise-check {
    border-color: #60a5fa;
    background: #1673d9;
    color: #fff;
}
.promise-card-body { padding: .78rem .82rem .82rem; }
.promise-picker-section .promise-card h6 {
    min-height: 2.35em;
    margin: 0 0 .38rem;
    color: #f8fafc;
    font-size: .94rem;
    line-height: 1.18;
}
.promise-picker-section .promise-card .promise-category {
    margin: 0 0 .2rem;
    color: #69b4ff;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.promise-picker-section .promise-card .promise-desc {
    min-height: 3.8em;
    margin: 0;
    color: rgba(203, 213, 225, .75);
    font-size: .76rem;
    line-height: 1.42;
}
.promise-card-action {
    display: inline-flex;
    margin-top: .62rem;
    color: rgba(147, 197, 253, .76);
    font-size: .68rem;
    font-weight: 800;
}
.promise-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
}
.promise-card.selected .promise-card-action { color: #93c5fd; }
.promise-optional-lock,
.promise-empty-state {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px dashed rgba(148, 163, 184, .2);
    border-radius: 10px;
    color: rgba(203, 213, 225, .55);
    font-size: .78rem;
}
.promise-optional-lock svg { width: 15px; height: 15px; }
.promise-empty-state { grid-column: 1 / -1; }

@media (max-width: 620px) {
    .promise-platform-status { grid-template-columns: 1fr; }
    .promise-section-heading { display: grid; }
    .promise-stage-state { justify-self: start; }
}
@media (max-width: 560px) {
    .promise-picker-section { padding: .72rem; }
    .promise-picker-section .promise-grid { grid-template-columns: 1fr; }
}

/* ── 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-momentum-chip { order: 2; }
.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: #15803d; color: #fff; }
.sev-lost     { background: #475569; color: #fff; }
.sev-foreign  {
    background: rgba(51,65,85,0.96);
    border: 1px solid rgba(203,213,225,0.58);
    box-shadow: 0 2px 10px rgba(0,0,0,0.42);
    color: #f8fafc;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* Strength vitality tiers — 5-tier taxonomy (high vitality = good) */
.sev-str-nascent     { background: #64748b; color: #fff; }
.sev-str-notable     { background: #2563eb; color: #fff; }
.sev-str-prominent   { background: #0f766e; color: #fff; }
.sev-str-exceptional { background: #16a34a; color: #fff; }
.sev-str-defining    { background: #b7791f; color: #fff; }

.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-momentum-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    min-height: 1.25rem;
    padding: 0.1rem 0.42rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}
.ip-momentum-chip b {
    font-size: 0.56rem;
    font-weight: 650;
    letter-spacing: 0;
    opacity: 0.78;
    text-transform: none;
}
.ip-momentum-chip.momentum-good {
    color: #86efac;
    background: rgba(34,197,94,0.13);
    border-color: rgba(74,222,128,0.27);
}
.ip-momentum-chip.momentum-bad {
    color: #fca5a5;
    background: rgba(239,68,68,0.13);
    border-color: rgba(248,113,113,0.28);
}
.ip-momentum-chip.momentum-neutral {
    color: rgba(203,213,225,0.78);
    background: rgba(148,163,184,0.09);
    border-color: rgba(148,163,184,0.2);
}

/* Momentum keeps its softer pill language on plain record cards. Over every
   photographic detail hero, give it a dense reading surface so its label and
   rate cannot disappear into the image. */
.mandate-focus-inner .ip-momentum-chip {
    box-shadow: 0 2px 10px rgba(0,0,0,0.48);
    text-shadow: 0 1px 2px rgba(0,0,0,0.76);
}
.mandate-focus-inner .ip-momentum-chip b { opacity: 0.94; }
.mandate-focus-inner .ip-momentum-chip.momentum-good {
    color: #f0fdf4;
    background: rgba(21,128,61,0.94);
    border-color: rgba(134,239,172,0.72);
}
.mandate-focus-inner .ip-momentum-chip.momentum-bad {
    color: #fff1f2;
    background: rgba(185,28,28,0.94);
    border-color: rgba(252,165,165,0.72);
}
.mandate-focus-inner .ip-momentum-chip.momentum-neutral {
    color: #f8fafc;
    background: rgba(51,65,85,0.96);
    border-color: rgba(203,213,225,0.62);
}
.mandate-focus-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.38rem;
    margin-bottom: 0.25rem;
}

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

/* Promise cards carry the same live indicators as their detail view, condensed. */
.ip-promise-indicators {
    margin-top: 0.58rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.055);
}
.ip-promise-indicators-label {
    color: rgba(255,255,255,0.3);
    font-size: 0.56rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.ip-promise-indicators .ip-anchor-row {
    gap: 0.26rem;
    margin-top: 0.3rem;
}
.ip-promise-indicators .effect-family-chip {
    min-height: 1.7rem;
    padding: 0.16rem 0.46rem;
    border-radius: 7px;
    font-size: 0.68rem;
}
.ip-promise-indicators .effect-family-chip .nc-icon {
    width: 11px;
    height: 11px;
}

/* ── 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; }

/* ── Terminal promise cards (lapsed/fulfilled) ─────────────────────── */

/* ── 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;
}

/* ── Person / group chips (shown only in focus panel, hidden in list) ─── */
.ip-person-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;
}

/* ── 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: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.mandate-story-action {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.68rem 1rem;
    border: 1px solid rgba(96,165,250,0.42);
    border-radius: 9px;
    background: rgba(59,130,246,0.18);
    color: #bfdbfe;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 780;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.mandate-story-action:first-child:last-child { grid-column: 1 / -1; }
.mandate-story-action svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mandate-story-action:hover {
    color: #fff;
    background: rgba(59,130,246,0.3);
    border-color: rgba(147,197,253,0.72);
    transform: translateY(-1px);
}
.mandate-story-action.is-danger {
    min-width: 156px;
    color: #fecaca;
    background: rgba(185,28,28,0.2);
    border-color: rgba(248,113,113,0.46);
}
.mandate-story-action.is-danger:hover {
    color: #fff1f2;
    background: rgba(185,28,28,0.34);
    border-color: rgba(252,165,165,0.72);
}
.mandate-story-action.is-success {
    color: #a7f3d0;
    background: rgba(16,185,129,0.14);
    border-color: rgba(52,211,153,0.42);
}
.mandate-story-action.is-success:hover {
    color: #ecfdf5;
    background: rgba(16,185,129,0.25);
    border-color: rgba(110,231,183,0.72);
}
.mandate-story-action.is-warning {
    color: #fde68a;
    background: rgba(217,119,6,0.15);
    border-color: rgba(251,191,36,0.42);
}
.mandate-story-action.is-warning:hover {
    color: #fffbeb;
    background: rgba(217,119,6,0.27);
    border-color: rgba(252,211,77,0.72);
}
.mandate-new-promise-card {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    border: 1px dashed rgba(245,158,11,0.46);
    border-radius: 10px;
    background: rgba(245,158,11,0.055);
    color: #fcd34d;
    font: inherit;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.mandate-new-promise-card > svg { width: 19px; height: 19px; flex: 0 0 auto; }
.mandate-new-promise-card > span { font-size: 0.78rem; font-weight: 820; }
.mandate-new-promise-card:hover {
    color: #fff;
    background: rgba(245,158,11,0.13);
    border-color: rgba(251,191,36,0.76);
    transform: translateY(-1px);
}

@media (max-width: 840px) {
    .mandate-focus-actions { grid-template-columns: 1fr; }
    .mandate-story-action.is-danger { min-width: 0; }
    .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; }
}


/* ── 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, #campaignView {
    opacity: 0;
    transition: opacity 0.2s ease;
}
#dashboardView.panel-visible, #parliamentView.panel-visible, #campaignView.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;
}

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

.stats-drawer-backdrop {
    background: rgba(2, 7, 14, 0.22);
    border: 0;
    inset: 0;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.2s ease, visibility 0.24s;
    visibility: hidden;
    z-index: 99;
}

body.stats-drawer-open .stats-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.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 Month button text — collapses at ≤768px */
.end-month-label {
    display: inline-block;
    /* Accommodate both "End Month" and "Next Month" at the current bold
       desktop weight. The old 80px cap clipped the final glyph. */
    max-width: 8rem;
    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-legislation {
    background: var(--bg-primary);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--primary-color);
}

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

/* Legislation Section */
.legislation-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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.person-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: contain;
    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-month {
        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 Month: 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 Month */
    .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 "Statistics") smoothly */
    .stat-label {
        max-width: 0;
        opacity: 0;
    }

    /* End Month text also collapses at this width */
    #endMonthBtn .end-month-label {
        max-width: 0;
        opacity: 0;
    }

    #endMonthBtn {
        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 */
    .month-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 */

/* 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: calc(100dvh - var(--map-ui-top) - var(--stats-drawer-gap));
    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 {
    background: var(--stats-drawer-bg);
    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: 0 clamp(0.8rem, 2vw, 1.8rem) 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}





.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: 0 0 12px 12px;
    border-top: 0;
    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-summary .is-domestic {
    color: #a7e8bf;
    background: rgba(34,197,94,.09);
    border-color: rgba(74,222,128,.25);
}
.sd-resource-summary .is-market-imports {
    color: #f6d28c;
    background: rgba(245,158,11,.09);
    border-color: rgba(251,191,36,.25);
}
.sd-resource-summary .is-contracted-imports {
    color: #a9cdfb;
    background: rgba(59,130,246,.1);
    border-color: rgba(96,165,250,.27);
}
.sd-resource-summary .is-mixed {
    color: #d7c9fa;
    background: rgba(139,92,246,.09);
    border-color: rgba(167,139,250,.24);
}

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

.sd-resource-row {
    --supply-origin-rgb: 148, 163, 184;
    display: grid;
    grid-template-columns: 34px 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: var(--supply-origin-bg, linear-gradient(105deg, rgba(var(--supply-origin-rgb),.095), rgba(var(--supply-origin-rgb),.035)));
    border: 1px solid rgba(var(--supply-origin-rgb),.25);
    border-radius: 10px;
    box-shadow: inset 3px 0 0 rgba(var(--supply-origin-rgb),.52);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow .15s ease;
}

.sd-resource-row.is-origin-domestic { --supply-origin-rgb: 52, 211, 153; }
.sd-resource-row.is-origin-market-imports { --supply-origin-rgb: 245, 158, 11; }
.sd-resource-row.is-origin-contracted-imports { --supply-origin-rgb: 59, 130, 246; }
.sd-resource-row.is-origin-mixed {
    --supply-origin-rgb: 139, 92, 246;
    --supply-origin-bg: linear-gradient(105deg, rgba(52,211,153,.12), rgba(245,158,11,.09) 52%, rgba(59,130,246,.1));
    --supply-origin-bg-hover: linear-gradient(105deg, rgba(52,211,153,.18), rgba(245,158,11,.14) 52%, rgba(59,130,246,.15));
}
.sd-resource-row.is-origin-unmet { --supply-origin-rgb: 239, 68, 68; }
.sd-resource-row.is-origin-inactive { --supply-origin-rgb: 100, 116, 139; }

.sd-resource-row:hover,
.sd-resource-row:focus-visible {
    background: var(--supply-origin-bg-hover, linear-gradient(105deg, rgba(var(--supply-origin-rgb),.15), rgba(var(--supply-origin-rgb),.055)));
    border-color: rgba(var(--supply-origin-rgb),.48);
    box-shadow: inset 3px 0 0 rgba(var(--supply-origin-rgb),.78), 0 7px 18px rgba(0,0,0,.14);
}

.sd-resource-symbol {
    display: grid;
    width: 32px;
    height: 32px;
    color: color-mix(in srgb, var(--resource-color, #94a3b8) 72%, white);
    background: color-mix(in srgb, var(--resource-color, #94a3b8) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--resource-color, #94a3b8) 34%, transparent);
    border-radius: 9px;
    place-items: center;
}
.sd-resource-icon { width: 18px; height: 18px; }
.resource-vector-icon { display: inline-block; flex: 0 0 auto; }
.map-resource-badge-icon { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.dossier-resource-icon { width: 15px; height: 15px; color: var(--resource-color, #6ee7b7); }
.dossier-resource-detail-icon { width: 17px; height: 17px; color: var(--resource-color, #6ee7b7); }

.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-copy .sd-resource-source-names { color: #8ec9b5; }
.sd-resource-access { text-align: right; }
.sd-resource-access-rule { display:inline-flex; align-items:center; gap:.25rem; padding:.12rem .32rem; color:#c4b5fd; font-size:.5rem; font-weight:750; line-height:1; letter-spacing:.02em; text-transform:uppercase; background:rgba(139,92,246,.1); border:1px solid rgba(167,139,250,.27); border-radius:var(--radius-pill); vertical-align:middle; }
.sd-resource-copy .sd-resource-access-rule { margin-left:.2rem; }
.sd-resource-access-rule svg { width:12px; height:12px; }

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

.resource-detail-overlay > .resource-detail-card {
    border-color:color-mix(in srgb, var(--resource-color) 42%, transparent);
}
.resource-detail-heading { display:flex; align-items:center; gap:.7rem; }
.resource-detail-heading .record-detail-title { min-width:0; padding-right:36px; }
.resource-detail-symbol { flex:0 0 32px; }
.resource-detail-title-icon { width:18px; height:18px; }
.resource-detail-description { max-width:650px; margin:.6rem 0 0; color:#bdc9d7; font-size:.86rem; line-height:1.5; }
.resource-detail-hero::after { background:linear-gradient(to top, rgba(8,14,23,1) 0%, rgba(8,14,23,.54) 35%, transparent 70%); }
.sd-resource-detail-layout { display:grid; gap:.65rem; margin:20px 27px 24px; }
.sd-resource-detail-layout section { padding:1rem; background:rgba(8,18,30,.55); border:1px solid rgba(148,163,184,.14); border-radius:11px; }
.sd-resource-detail-layout .sd-resource-balance-card { background:color-mix(in srgb,var(--resource-color,#94a3b8) 6%,rgba(8,18,30,.72)); border-color:color-mix(in srgb,var(--resource-color,#94a3b8) 24%,var(--color-neutral-border)); }
.sd-resource-detail-layout h4 { margin:0; color:#e9eef6; font-size:.82rem; }
.sd-resource-balance-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.sd-resource-balance-heading > strong { color:#fff; font-size:1.25rem; }
.sd-resource-coverage { height:7px; margin:.7rem 0 .9rem; overflow:hidden; background:var(--color-neutral-bg); border-radius:var(--radius-pill); }
.sd-resource-coverage span { display:block; height:100%; background:color-mix(in srgb,var(--resource-color,#94a3b8) 78%,white 8%); border-radius:inherit; }
.sd-resource-balance-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.sd-resource-balance-columns > div + div { padding-left:1.25rem; border-left:1px solid rgba(148,163,184,.12); }
.sd-resource-balance-columns h5 { display:flex; justify-content:space-between; gap:.75rem; margin:0 0 .35rem; color:#cbd5e1; font-size:.68rem; text-transform:uppercase; }
.sd-resource-balance-columns h5 span { color:#7f90a4; font-size:.6rem; font-weight:650; text-transform:none; }
.sd-resource-balance-columns ul { margin:.35rem 0 0; padding-left:1rem; }
.sd-resource-balance-columns li { color:#9eacbd; font-size:.73rem; line-height:1.45; }
.sd-resource-demand-list { display:grid; gap:.48rem; margin-top:.48rem; }
.sd-resource-demand-driver { display:grid; grid-template-columns:minmax(0,auto) minmax(90px,1fr); align-items:center; gap:.5rem; }
.sd-resource-demand-stat-chips { display:flex; min-width:0; flex-wrap:wrap; gap:.3rem; }
.sd-resource-demand-stat-chips .narrative-chip { min-height:1.75rem; padding:.18rem .48rem; font-size:.7rem; }
.sd-resource-demand-stat-chips .narrative-chip .nc-icon { width:12px; height:12px; }
.sd-resource-demand-copy { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:.45rem; color:#9eacbd; font-size:.66rem; line-height:1.35; }
.sd-resource-demand-copy b { color:#fff; font-size:.68rem; }
.sd-resource-export-note,.sd-resource-empty { margin:.45rem 0 0; color:#8090a3; font-size:.7rem; }
.sd-resource-price-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.sd-resource-detail-source { display:flex; gap:.6rem; align-items:center; justify-content:space-between; padding:.42rem 0; border-top:1px solid rgba(148,163,184,.1); }
.sd-resource-detail-source:first-of-type { border-top:0; }
.sd-resource-detail-source span { display:flex; min-width:0; flex-direction:column; }
.sd-resource-detail-source strong { color:#dce5ef; font-size:.64rem; }
.sd-resource-detail-source small { overflow:hidden; color:#8090a3; font-size:.56rem; text-overflow:ellipsis; white-space:nowrap; }
.sd-resource-detail-source b { color:#fff; font-size:.63rem; white-space:nowrap; }
.sd-resource-market-bands { display:flex; gap:.3rem; margin-top:.75rem; }
.sd-resource-market-basis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.25rem .65rem; margin-top:.65rem; padding-top:.58rem; border-top:1px solid rgba(148,163,184,.1); }
.sd-resource-market-basis span { display:flex; justify-content:space-between; gap:.35rem; color:#8090a3; font-size:.56rem; }
.sd-resource-market-basis strong { color:#cbd5e1; font-size:inherit; }
.sd-resource-detail-layout .sd-resource-market-lock { display:flex; align-items:center; gap:.8rem; background:color-mix(in srgb,var(--purple-color) 7%,rgba(8,18,30,.72)); border-color:color-mix(in srgb,var(--purple-color) 28%,var(--color-neutral-border)); }
.sd-resource-market-lock-icon { display:grid; flex:0 0 38px; width:38px; height:38px; color:color-mix(in srgb,var(--purple-color) 55%,white); background:color-mix(in srgb,var(--purple-color) 15%,transparent); border:1px solid color-mix(in srgb,var(--purple-color) 32%,transparent); border-radius:var(--radius-btn); place-items:center; }
.sd-resource-market-lock-icon svg { width:18px; height:18px; }
.sd-resource-market-lock p { margin:.28rem 0 0; color:#9eacbd; font-size:.7rem; line-height:1.45; }
.sd-market-band { flex:1; padding:.35rem .2rem; color:#718095; text-align:center; font-size:.55rem; font-weight:800; background:rgba(148,163,184,.06); border:1px solid rgba(148,163,184,.12); border-radius:7px; }
.sd-market-band.is-current { color:#fff; }
.sd-market-band.is-current.is-cheap { color:var(--color-positive); background:var(--color-positive-bg); border-color:var(--color-positive-border); }
.sd-market-band.is-current.is-normal { color:#dce5ef; background:var(--color-neutral-bg); border-color:var(--color-neutral-border); }
.sd-market-band.is-current.is-expensive { color:var(--color-mid); background:var(--color-mid-bg); border-color:var(--color-mid-border); }
.sd-market-band.is-current.is-crisis { color:var(--color-negative); background:var(--color-negative-bg); border-color:var(--color-negative-border); }
.sd-resource-contract-price { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.48rem 0; border-top:1px solid rgba(148,163,184,.1); }
.sd-resource-contract-price:first-of-type { margin-top:.3rem; border-top:0; }
.sd-resource-contract-price > span:first-child { display:flex; min-width:0; flex-direction:column; }
.sd-resource-contract-price strong { color:#dce5ef; font-size:.7rem; }
.sd-resource-contract-price small { overflow:hidden; color:#8090a3; font-size:.6rem; text-overflow:ellipsis; white-space:nowrap; }
.sd-resource-contract-price .game-badge { flex:0 0 auto; }
.resource-detail-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;padding:0 27px 24px; }
.resource-detail-actions .mandate-story-action { min-width:0; }

.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: 32px minmax(105px,1fr) auto; }
    .sd-resource-access { display: none; }
    .sd-resource-detail-layout { margin:17px 19px 20px; }
    .sd-resource-balance-columns,
    .sd-resource-price-grid { grid-template-columns:1fr; }
    .sd-resource-balance-columns > div + div { padding-top:.75rem; padding-left:0; border-top:1px solid rgba(148,163,184,.12); border-left:0; }
    .resource-detail-actions { grid-template-columns:1fr;padding:0 19px 20px; }
}

.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-native-select-proxy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.map-custom-select {
    position: relative;
    margin: 0 3px 6px;
    color: #7eb8ff;
    border: 1px solid rgba(103,168,249,.28);
    border-radius: 12px;
    background: rgba(4,12,23,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.14);
    transition: border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}
.map-custom-select:focus-within,
.map-custom-select.is-open {
    border-color: #4a9cff;
    box-shadow: 0 0 0 3px rgba(39,135,245,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.map-custom-select-toggle {
    display: grid;
    grid-template-columns: minmax(0,1fr) 14px;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 40px;
    padding: 0 .72rem;
    color: #f4f8fd;
    border: 0;
    border-radius: inherit;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: .7rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}
.map-custom-select-toggle:hover { background: rgba(47,118,207,.08); }
.map-custom-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-custom-select-chevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid #8fc3ff;
    border-bottom: 2px solid #8fc3ff;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms ease;
}
.map-custom-select.is-open .map-custom-select-chevron {
    transform: translateY(2px) rotate(225deg);
}
.map-custom-select-menu {
    position: absolute;
    top: calc(100% + .42rem);
    right: 0;
    left: 0;
    z-index: 110;
    display: grid;
    gap: .18rem;
    max-height: min(330px, 52vh);
    padding: .4rem;
    overflow-y: auto;
    border: 1px solid rgba(105,166,241,.3);
    border-radius: 13px;
    background: rgba(5,13,24,.98);
    box-shadow: 0 22px 55px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    backdrop-filter: blur(22px) saturate(125%);
}
.map-custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    width: 100%;
    min-height: 35px;
    padding: .5rem .62rem;
    color: rgba(211,225,242,.72);
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-family: inherit;
    font-size: .68rem;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}
.map-custom-select-option::after {
    content: '✓';
    color: #72b3ff;
    opacity: 0;
}
.map-custom-select-option:hover,
.map-custom-select-option:focus-visible {
    color: #fff;
    outline: 0;
    background: rgba(47,118,207,.2);
}
.map-custom-select-option.selected {
    color: #fff;
    background: linear-gradient(135deg, rgba(39,135,245,.34), rgba(25,77,143,.27));
}
.map-custom-select-option.selected::after { opacity: 1; }
.map-custom-select.is-disabled { opacity: .4; }
.map-custom-select.is-disabled .map-custom-select-toggle { cursor: not-allowed; }

.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.has-art {
    position: relative;
    display: block;
    min-height: 184px;
    padding: 0;
    overflow: hidden;
    background: #07101a;
    text-align: left;
}
.map-resource-hero.has-art::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, transparent 42%, rgba(3,8,14,.22) 60%, rgba(3,8,14,.94) 100%);
    pointer-events: none;
}
.map-resource-hero.has-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.map-resource-hero.has-art figcaption {
    position: absolute;
    z-index: 1;
    right: 14px;
    bottom: 12px;
    left: 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.map-resource-hero.has-art figcaption strong {
    margin: 0;
    color: #fff;
    font-size: .78rem;
    text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.map-resource-hero.has-art figcaption span {
    color: rgba(255,255,255,.68);
    font-size: .56rem;
    text-transform: capitalize;
    white-space: nowrap;
}

/* Resource deposits use the same full-panel image horizon and lower reading
   plane as canonical Issue and Strength focus views. */
.map-resource-focus-inner {
    background-color: #101722;
    background-image:
        radial-gradient(circle at 55% 20%, color-mix(in srgb, var(--resource-color) 24%, transparent), transparent 42%),
        linear-gradient(160deg, #17202b 0%, #0d141e 56%, #070a0f 100%);
}
.map-resource-focus-overlay {
    background: linear-gradient(
        to top,
        rgba(4, 7, 11, .99) 0%,
        rgba(5, 9, 15, .94) 34%,
        rgba(5, 9, 15, .72) 58%,
        rgba(5, 9, 15, .18) 84%,
        transparent 100%
    );
}
.map-resource-focus-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}
.map-resource-focus-badges .badge-resource-identity {
    order: -2;
    padding: 4px 10px;
    color: color-mix(in srgb, var(--resource-color, #6ee7b7) 62%, white);
    background: color-mix(in srgb, var(--resource-color, #6ee7b7) 18%, rgba(8,15,24,.96));
    border-color: color-mix(in srgb, var(--resource-color, #6ee7b7) 72%, white 8%);
    font-size: .74rem;
    font-weight: 850;
}
.map-resource-focus-badges .badge-resource-identity svg { width: 15px; height: 15px; }
.map-resource-focus-badges .badge-domestic,
.map-resource-focus-badges .badge-foreign { order: 2; }
.map-resource-focus-title {
    text-shadow: 0 2px 14px rgba(0,0,0,.92);
}
.map-resource-focus-meta {
    color: rgba(196, 210, 228, .66);
    font-size: .75rem;
    margin-bottom: 12px;
    text-transform: capitalize;
}
.map-resource-focus-desc {
    border-top: 1px solid rgba(255,255,255,.11);
    color: rgba(226, 232, 240, .78);
    margin: 0;
    padding-top: 11px;
}
.map-resource-focus-inner .map-resource-metrics div {
    background: rgba(8, 13, 20, .58);
    border-color: rgba(203, 213, 225, .16);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}
.map-resource-focus-inner .map-resource-national,
.map-resource-focus-inner .map-resource-links {
    border-top-color: rgba(255,255,255,.12);
}

.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-terrain-resource-list { display:grid;gap:7px;margin:10px 0 12px; }
.resource-family-row {
    display:grid;
    grid-template-columns:minmax(130px,1fr) minmax(92px,.7fr) minmax(130px,.9fr);
    gap:10px;
    align-items:center;
    padding:9px 10px;
    color:#dbe7f4;
    background:color-mix(in srgb,var(--resource-color,#6ee7b7) 8%,rgba(7,12,19,.8));
    border:1px solid color-mix(in srgb,var(--resource-color,#6ee7b7) 28%,transparent);
    border-radius:9px;
}
.resource-family-row > span { display:flex;min-width:0;flex-direction:column;gap:2px; }
.resource-family-row .resource-family-identity { align-items:center;flex-direction:row;gap:9px; }
.resource-family-icon { flex:0 0 auto;width:34px;height:34px; }
.resource-family-icon svg { width:18px;height:18px; }
.resource-family-row small { color:rgba(203,213,225,.48);font-size:.54rem;font-weight:750;letter-spacing:.045em;text-transform:uppercase; }
.resource-family-row strong { overflow:hidden;font-size:.68rem;text-overflow:ellipsis;white-space:nowrap; }
.resource-family-identity > strong { color:color-mix(in srgb,var(--resource-color,#6ee7b7) 60%,white);font-size:.72rem; }
.resource-site-output-list { display:grid;min-width:0;max-width:100%;gap:7px;margin:10px 0 12px;container-type:inline-size; }
.resource-site-output-row {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,.9fr);
}
.resource-site-output-row small { font-size:.6rem; }
.resource-site-capacity { min-width:0; }
.resource-site-capacity strong { color:var(--text-primary); }
.resource-site-output-row.is-projected .resource-site-capacity strong { color:var(--color-neutral); }
.resource-site-condition { display:flex;min-width:0;max-width:100%;box-sizing:border-box;align-items:flex-start;justify-self:stretch;padding-left:10px;border-left:1px solid var(--border-color); }
.resource-site-condition-state { display:inline-flex;align-items:center;gap:7px;color:var(--color-neutral); }
.resource-site-condition-state svg { flex:0 0 auto;width:16px;height:16px; }
.resource-site-condition-state strong { color:inherit;font-size:.72rem;letter-spacing:.01em; }
.resource-site-condition-state.is-positive { color:var(--color-positive); }
.resource-site-condition-state.is-mid { color:var(--color-mid); }
.resource-site-condition-state.is-negative { color:var(--color-negative); }
.resource-site-source-input { grid-column:1 / -1;display:flex!important;flex-direction:row!important;align-items:baseline;gap:9px!important;padding-top:8px;border-top:1px solid var(--border-color); }
.resource-site-source-input > span { color:var(--text-muted);font-size:.6rem;font-weight:750;letter-spacing:.045em;text-transform:uppercase; }
.resource-site-source-input > strong { color:var(--text-secondary);font-size:.68rem;font-weight:600;white-space:normal; }
.resource-site-facts { display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 10px;color:#9fb0c2;font-size:.7rem;text-transform:capitalize; }
.resource-site-facts > span { display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid rgba(148,163,184,.15);border-radius:999px;background:rgba(148,163,184,.055); }
.resource-site-facts svg { width:13px;height:13px; }
.resource-site-facts .resource-site-kind { color:#a5f3fc;border-color:rgba(34,211,238,.25);background:rgba(8,47,56,.38);font-weight:750; }
.dossier-resource-summaries { display:grid;gap:7px;margin-bottom:12px; }
.record-detail-resource-asset > p { margin-top:12px; }
.resource-conversion-flow { display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;margin:10px 0 12px;padding:9px;border:1px solid rgba(148,163,184,.14);border-radius:10px;background:rgba(4,9,15,.4); }
.resource-flow-side { display:flex;min-width:0;gap:5px;align-items:center;flex-wrap:wrap; }
.resource-flow-side > small { width:100%;color:#718399;font-size:.55rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase; }
.resource-flow-token { display:inline-flex;min-width:0;align-items:center;gap:5px;color:#dce8ef;font-size:.65rem; }
.resource-flow-token strong { color:#fff; }
.resource-flow-token.is-narrative { padding:5px 8px;color:var(--text-secondary);border:1px solid var(--color-neutral-border);border-radius:var(--radius-tag);background:var(--color-neutral-bg); }
.resource-flow-icon { width:25px;height:25px;border-radius:7px; }
.resource-flow-icon svg { width:14px;height:14px; }
.resource-flow-arrow { display:grid;width:25px;height:25px;color:#67d9e8;place-items:center;border-radius:50%;background:rgba(34,211,238,.09); }
.resource-flow-arrow svg { width:14px;height:14px; }
.resource-flow-empty { color:#718399;font-size:.64rem;font-style:italic; }
.resource-trade-list { display:grid;gap:8px;container-type:inline-size; }
.resource-trade-row { display:grid;width:100%;max-width:100%;box-sizing:border-box;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr) max-content;gap:16px;align-items:center;padding:11px 12px;background:color-mix(in srgb,var(--resource-color,#94a3b8) 7%,rgba(4,9,15,.72));border:1px solid color-mix(in srgb,var(--resource-color,#94a3b8) 28%,var(--border-color));border-radius:var(--radius-card);box-shadow:inset 3px 0 0 color-mix(in srgb,var(--resource-color,#94a3b8) 68%,white 4%); }
.resource-trade-row > span { display:flex;min-width:0; }
.resource-trade-route { flex-direction:column;gap:4px; }
.resource-trade-route > small { display:flex;align-items:center;gap:5px;color:var(--text-muted);font-size:.6rem;font-weight:800;letter-spacing:.065em;text-transform:uppercase; }
.resource-trade-route > small svg { width:13px;height:13px; }
.resource-trade-row.is-import .resource-trade-route > small { color:var(--info-color); }
.resource-trade-row.is-export .resource-trade-route > small { color:var(--color-mid); }
.resource-trade-route > strong { display:flex;min-width:0;align-items:center;gap:6px;color:var(--text-primary);font-size:.68rem; }
.resource-trade-route > strong span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.resource-trade-route > strong svg { flex:0 0 auto;width:13px;height:13px;color:var(--text-muted); }
.resource-trade-term { color:var(--text-muted);font-size:.57rem; }
.resource-trade-shortfall { color:var(--warning-color);font-size:.57rem;font-weight:750; }
.resource-trade-cargo { align-items:center;gap:9px; }
.resource-trade-cargo strong { color:color-mix(in srgb,var(--resource-color,#94a3b8) 62%,white);font-size:.72rem; }
.resource-trade-icon { flex:0 0 auto;width:34px;height:34px; }
.resource-trade-icon svg { width:18px;height:18px; }
.resource-trade-price { align-items:flex-end;flex-direction:column;gap:4px;text-align:right; }
.resource-trade-price > small { color:var(--text-muted);font-size:.55rem;font-weight:750;letter-spacing:.045em;text-transform:uppercase; }
.resource-trade-price-chip { min-width:72px;text-align:center; }
.resource-trade-list.is-compact { margin-top:8px; }
.resource-trade-list.is-compact .resource-trade-row { grid-template-columns:minmax(0,.9fr) minmax(0,1fr) max-content;gap:9px;padding:8px; }
.resource-trade-list.is-compact .resource-trade-price { align-items:flex-end; }
@container (max-width:520px) {
    .resource-trade-row,.resource-trade-list.is-compact .resource-trade-row { grid-template-columns:minmax(0,1fr) max-content;gap:10px; }
    .resource-trade-route { grid-column:1 / -1; }
}
.map-panel-badge.badge-cat svg { width:13px;height:13px;margin-right:5px;vertical-align:-2px; }
@media (max-width:560px) {
    .resource-family-row:not(.resource-site-output-row) { grid-template-columns:1fr 1fr; }
    .resource-family-row:not(.resource-site-output-row) .resource-family-identity { grid-column:1 / -1; }
    .resource-conversion-flow { grid-template-columns:1fr; }
    .resource-flow-arrow { transform:rotate(90deg);justify-self:center; }
    .resource-trade-row { grid-template-columns:minmax(0,1fr) max-content; }
    .resource-trade-route { grid-column:1 / -1; }
}
@container (max-width:340px) {
    .resource-site-output-row { grid-template-columns:minmax(0,1fr) minmax(90px,.55fr);gap:10px; }
    .resource-site-output-resource { grid-column:1 / -1; }
    .resource-site-capacity { justify-self:start; }
    .resource-site-condition { justify-self:stretch; }
}
.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-operation-btn { display:flex;width:100%;margin:6px 0 0;padding:7px 9px;align-items:center;justify-content:space-between;gap:8px;color:#dce8e4;text-align:left;background:rgba(110,231,183,.06);border:1px solid rgba(110,231,183,.18);border-radius:8px;cursor:pointer; }
.map-resource-operation-btn:hover,.map-resource-operation-btn:focus-visible { background:rgba(110,231,183,.12);border-color:rgba(110,231,183,.38); }
.map-resource-operation-btn strong { font-size:.66rem; }
.map-resource-operation-btn span { color:#8ec9b5;font-size:.58rem; }
.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-energy-profile {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

.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-row.is-stat-focus,
.sd-subgroup.is-stat-focus,
.sd-section.is-stat-focus {
    border-color: color-mix(in srgb, var(--sd-tone, var(--sd-family-tone, #60a5fa)) 74%, white 8%);
    background: color-mix(in srgb, var(--sd-tone, var(--sd-family-tone, #60a5fa)) 13%, rgba(17, 28, 42, .96));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sd-tone, var(--sd-family-tone, #60a5fa)) 28%, transparent), 0 0 28px color-mix(in srgb, var(--sd-tone, var(--sd-family-tone, #60a5fa)) 18%, transparent);
    animation: sd-stat-focus-pulse .72s ease-out;
}
@keyframes sd-stat-focus-pulse {
    0% { transform: scale(.985); filter: brightness(1.35); }
    100% { transform: scale(1); filter: brightness(1); }
}

.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 0.6rem 1.5rem;
        gap: 0.7rem;
    }



    .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;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    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 .view-toggle-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    line-height: 0;
}

.view-toggle .btn-group .btn .view-toggle-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0;
}

.view-toggle .btn-group .btn .view-toggle-label { line-height: 1; }

.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 Month button glow when capacity reached */
#endMonthBtn.month-capacity-glow {
    animation: endMonthPulse 1.8s ease-in-out infinite;
}

@keyframes endMonthPulse {
    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 */
    overflow: hidden;
    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 {
    overflow-anchor: none;
    scroll-behavior: auto;
    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 responses share the player-message material with an integrated header. */
.story-event-response .story-response-context {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.65rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.4;
}
.story-event-response-label {
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}
.story-event-response .story-response-context strong {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}
.story-event-response-body { white-space: pre-wrap; }

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

/* .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 calendar control. */
.month-time-display {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
    border: 0;
    border-radius: var(--radius-btn);
    padding: 0.15rem 0.55rem;
    vertical-align: middle;
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

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

/* Story dateline: a compact blue-glass action/date marker with a quiet time cell. */
.month-datachip,
.msg-time-chip {
    display: inline-flex !important;
    align-items: center;
    min-height: 1.8rem;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin-bottom: 0.8rem;
    border: 0 !important;
    border-radius: var(--radius-btn) !important;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--bg-tertiary) 62%, transparent),
        color-mix(in srgb, var(--bg-primary) 78%, transparent)
    ) !important;
    box-shadow:
        inset 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent),
        var(--shadow-sm);
}

.msg-time-chip {
    gap: 0.38rem;
    margin-left: 0.35rem;
    padding: 0.34rem 0.62rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
    color: color-mix(in srgb, var(--primary-color) 38%, var(--text-primary)) !important;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--primary-color) 18%, var(--bg-tertiary)),
        color-mix(in srgb, var(--primary-color) 7%, var(--bg-primary))
    ) !important;
    box-shadow:
        inset 0 1px color-mix(in srgb, var(--text-primary) 10%, transparent),
        0 0.2rem 0.65rem color-mix(in srgb, var(--primary-color) 9%, transparent) !important;
}

.msg-time-icon {
    color: color-mix(in srgb, var(--primary-color) 62%, var(--text-primary));
    flex: 0 0 auto;
}

.msg-time-chip--pending {
    min-width: 4rem;
}

.month-datachip {
    gap: 0.52rem;
    padding: 0.34rem 0.68rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.month-datachip-sequence {
    color: color-mix(in srgb, var(--primary-color) 58%, var(--text-primary));
    font-weight: 700;
}

.month-datachip-divider {
    width: 1px;
    height: 0.85rem;
    flex: 0 0 1px;
    background: color-mix(in srgb, var(--primary-color) 28%, transparent);
}

.month-datachip-date {
    color: var(--text-secondary);
}

.msg-time-icon {
    color: color-mix(in srgb, var(--primary-color) 62%, var(--text-primary));
    flex: 0 0 auto;
}

.msg-time-value {
    white-space: nowrap;
}

.response-title-block {
    margin-bottom: 0.7rem;
}
.response-title-block:not(:first-child) {
    margin-top: 1.4rem;
}

/* 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: 0.85rem 0 1rem;
    width: 100%;
    border-radius: var(--radius-modal);
    border: 1px solid var(--border-color);
}

.story-visual--editorial {
    margin: 0.85rem 0 1rem;
    border-radius: var(--radius-modal);
    border: 1px solid var(--border-color);
}

/* 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;
    }
}


.response-title {
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.01em;
}

/* 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-legislation {
    --narrative-link-color: #38bdf8;
    color: #38bdf8;
}

.narrative-person {
    --narrative-link-color: #4ade80;
    color: #4ade80;
}

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

.stat-chip-link { cursor: pointer; transition: transform .14s ease, filter .14s ease, border-color .14s ease; }
.stat-chip-link:hover { filter: brightness(1.14); transform: translateY(-1px); }
.stat-chip-link:focus-visible {
    outline: 2px solid color-mix(in srgb, currentColor 72%, white);
    outline-offset: 2px;
}

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

/* One visual grammar for immediate, finite-monthly, plateau, and live-value effects. */
.effect-family-chip {
    min-height: 2.05rem;
    gap: 0.38rem;
    padding: 0.26rem 0.62rem;
    border-radius: 8px;
}
.effect-family-chip .nc-icon { width: 14px; height: 14px; }
.effect-family-chip .effect-chip-value { font-size: 1.03em; font-weight: 850; color: inherit; }
.effect-family-chip--mention .effect-chip-value { margin-left: 0.06rem; }
.effect-family-chip--plateau .effect-chip-rate {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.78em;
    font-weight: 720;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
    white-space: nowrap;
}
.effect-family-chip--plateau .effect-chip-rate::before {
    content: '·';
    font-weight: 400;
    opacity: 0.62;
}
.plateau-speed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: -0.1rem;
    opacity: 0.52;
    flex: 0 0 auto;
}
.plateau-speed-icon svg { width: 14px; height: 14px; }

/* 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; }
.narrative-chip.chip-violet { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.28); color: #c4b5fd; }
.narrative-chip.effect-chip--projected,
.narrative-chip.effect-chip--inactive,
.national-progress-card.effect-chip--projected,
.national-progress-card.effect-chip--inactive {
    border-style: dashed;
    opacity: 0.82;
}
.effect-chip-source { color: rgba(255,255,255,0.48); font-size: 0.66rem; margin-right: 0.28rem; }
.monthly-effect-summary {
    min-width: min(100%, 310px);
    max-width: min(100%, 720px);
}
.monthly-effect-summary > summary {
    width: 100%;
    cursor: pointer;
    list-style: none;
}
.monthly-effect-summary > summary::-webkit-details-marker { display: none; }
.monthly-effect-summary > summary > svg:last-child {
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: transform .16s ease;
}
.monthly-effect-summary[open] > summary > svg:last-child { transform: rotate(180deg); }
.monthly-effect-summary--national {
    width: 100%;
    max-width: 100%;
}
.monthly-effect-summary--national > summary {
    display: block;
}
.monthly-effect-summary--national .national-progress-movement > svg:last-child {
    width: 14px;
    height: 14px;
    margin-left: 0;
    transition: transform .16s ease;
}
.monthly-effect-summary--national[open] .national-progress-movement > svg:last-child {
    transform: rotate(180deg);
}
.monthly-effect-count {
    color: rgba(255,255,255,.46);
    font-size: .62rem;
    font-weight: 720;
    white-space: nowrap;
}
.monthly-effect-source-list {
    display: grid;
    gap: .28rem;
    margin-top: .32rem;
    padding: .42rem .48rem;
    border: 1px solid rgba(148,163,184,.13);
    border-radius: 8px;
    background: rgba(2,6,15,.42);
}
.monthly-effect-source {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    gap: .55rem;
    color: rgba(203,213,225,.64);
    font-size: .66rem;
}
.monthly-effect-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monthly-effect-source em {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    color: rgba(148,163,184,.5);
    font-style: normal;
}
.monthly-effect-source strong { color: #e2e8f0; font-variant-numeric: tabular-nums; }

/* 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;
}
.dossier-resource-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: .45rem;
    color: rgba(196, 236, 217, .82);
    font-size: .66rem;
    font-weight: 680;
}
.dossier-resource-chip.is-projected { opacity: .72; }
.dossier-resource-chip-dot {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--resource-color);
    border-radius: 6px;
    background: color-mix(in srgb, var(--resource-color) 12%, transparent);
    place-items: center;
}
.dossier-resource-chip.is-projected .dossier-resource-chip-dot { background: transparent; border: 1px dashed var(--resource-color); }
.dossier-resource-chip-location { margin-left: auto; color: rgba(148, 163, 184, .7); font-weight: 580; }

/* ── 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-person {
    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-person:hover {
    border-color: rgba(99, 102, 241, 0.48);
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
}

/* Entity references share one interaction grammar; hue communicates type. */
:root { --color-political-link: #fb923c; }
.narrative-party, .narrative-power-bloc {
    --narrative-link-color: var(--color-political-link);
    color: var(--color-political-link);
}

.narrative-issue {
    --narrative-link-color: #ff7b7b;
    color: #ff7b7b;
}

.narrative-promise {
    --narrative-link-color: #f5b942;
    color: #f5b942;
}

.narrative-wm {
    --narrative-link-color: #38bdf8;
    color: #38bdf8;
}
.narrative-organization {
    --narrative-link-color: #7dd3fc;
    color: #7dd3fc;
}

.narrative-clickable {
    cursor: pointer;
    color: var(--narrative-link-color, currentColor);
    font-weight: 650;
    border-radius: 3px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: color-mix(in srgb, var(--narrative-link-color, currentColor) 42%, transparent);
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.16em;
    text-decoration-skip-ink: auto;
    transition: color 0.15s ease, background-color 0.15s ease,
        text-decoration-color 0.15s ease, box-shadow 0.15s ease;
}

.narrative-clickable:hover {
    color: color-mix(in srgb, var(--narrative-link-color, currentColor) 82%, white);
    background: color-mix(in srgb, var(--narrative-link-color, currentColor) 10%, transparent);
    text-decoration-color: currentColor;
}

.narrative-clickable:focus-visible {
    outline: none;
    color: color-mix(in srgb, var(--narrative-link-color, currentColor) 82%, white);
    background: color-mix(in srgb, var(--narrative-link-color, currentColor) 12%, transparent);
    text-decoration-color: currentColor;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--narrative-link-color, currentColor) 55%, transparent);
}

.narrative-strength {
    --narrative-link-color: #c084fc;
    color: #c084fc;
}

.narrative-lore {
    --narrative-link-color: #e8b86d;
    color: #e8b86d;
}

.narrative-nation {
    --narrative-link-color: #22d3ee;
    color: #22d3ee;
}

.narrative-event {
    --narrative-link-color: #fbbf24;
    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;
}

/* ── 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(820px, calc(100vw - 1rem));
    height: min(440px, calc(100vh - 110px));
    min-height: min(420px, calc(100vh - 110px));
    max-height: none;
    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: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .58), 0 1px 0 rgba(255,255,255,.035) 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-rail-controls {
    display:flex;
    min-height:42px;
    margin:0 4px 8px;
    align-items:center;
    justify-content:space-between;
    gap:3px;
    flex:0 0 auto;
}

.calendar-next-event {
    position:relative;
    isolation:isolate;
    display:block;
    overflow:hidden;
    min-width:0;
    margin:0 4px 9px;
    padding:8px 29px 8px 10px;
    color:var(--text-secondary);
    text-align:left;
    background:color-mix(in srgb,var(--primary-color) 9%,var(--bg-primary));
    border:1px solid color-mix(in srgb,var(--primary-color) 30%,transparent);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-sm);
    gap:2px;
    transition:color .16s ease,border-color .16s ease,background-color .16s ease,transform .16s ease;
}
.calendar-next-event[hidden] { display:none; }
.calendar-next-event-copy {
    position:relative;
    z-index:1;
    display:grid;
    min-width:0;
    gap:2px;
}
.calendar-next-event--with-image .calendar-next-event-copy { padding-right:38%; }
.calendar-next-event-image {
    width:min(72%,150px);
    pointer-events:none;
}
.calendar-next-event-image[hidden] { display:none; }
.calendar-next-event:hover,.calendar-next-event:focus-visible {
    color:var(--text-primary);
    background:color-mix(in srgb,var(--primary-color) 14%,var(--bg-primary));
    border-color:color-mix(in srgb,var(--primary-color) 52%,transparent);
    outline:0;
    transform:translateX(2px);
}
.calendar-next-event-kicker {
    color:color-mix(in srgb,var(--primary-color) 55%,white);
    font-size:.6rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.calendar-next-event-title {
    display:block;
    overflow:hidden;
    color:inherit;
    font-size:.68rem;
    font-weight:750;
    line-height:1.22;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.calendar-next-event-date { color:var(--text-muted); font-size:.6rem; }
.calendar-next-event-arrow {
    position:absolute;
    z-index:2;
    top:50%;
    right:9px;
    color:color-mix(in srgb,var(--primary-color) 50%,white);
    transform:translateY(-50%);
}

.calendar-year-nav {
    display: flex;
    align-items: center;
    min-width:0;
    gap: 5px;
    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: 28px;
    height: 30px;
    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:.76rem;
    font-weight: 800;
}

.calendar-current-year {
    margin-left:0;
    padding:.36rem .48rem;
    font-size:.54rem;
    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: 260px minmax(0, 1fr);
    overflow: hidden;
}

.calendar-month-rail {
    position: relative;
    min-height: 0;
    display:flex;
    padding:10px 14px 13px 12px;
    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-scroll {
    position:relative;
    min-height:0;
    flex:1;
    overflow:hidden;
}

.calendar-month-grid {
    display: flex;
    width:100%;
    height:100%;
    min-height:0;
    padding-right: 3px;
    flex-direction:column;
    gap: 1px;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-color:rgba(105,178,229,.42) rgba(255,255,255,.025);
    scrollbar-width:thin;
    overscroll-behavior:contain;
}

.calendar-month-grid::-webkit-scrollbar { width:5px; }
.calendar-month-grid::-webkit-scrollbar-track { background:rgba(255,255,255,.025); border-radius:99px; }
.calendar-month-grid::-webkit-scrollbar-thumb { background:rgba(105,178,229,.38); border-radius:99px; }
.calendar-month-scroll.has-more-down .calendar-month-grid {
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 38px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 38px),transparent 100%);
}
.calendar-month-scroll.has-more-up .calendar-month-grid {
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38px,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 38px,#000 100%);
}

.calendar-month-card {
    position: relative;
    display: grid;
    min-height: 0;
    padding: 5px 9px;
    color: #d8e3ee;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    grid-template-columns:25px minmax(0,1fr) auto auto;
    align-items: center;
    gap: 8px;
    flex:0 0 45px;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease, box-shadow .18s ease;
}

.calendar-rail-more {
    position:absolute;
    right:auto;
    bottom:7px;
    left:50%;
    z-index:3;
    display:flex;
    width:max-content;
    max-width:calc(100% - 18px);
    padding:5px 10px 5px 8px;
    color:rgba(216,231,243,.9);
    background:rgba(12,27,41,.96);
    border:1px solid rgba(103,174,229,.27);
    border-radius:999px;
    box-shadow:0 7px 18px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035);
    font-size:.59rem;
    font-weight:750;
    letter-spacing:.02em;
    line-height:1;
    text-align:center;
    opacity:0;
    pointer-events:none;
    align-items:center;
    justify-content:center;
    gap:4px;
    transform:translate(-50%,5px);
    transition:opacity .2s ease, transform .22s ease, color .16s ease, background-color .16s ease, border-color .16s ease;
}
.calendar-rail-more[data-direction="up"] { top:7px; bottom:auto; transform:translate(-50%,-5px); }
.calendar-rail-more.is-visible { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.calendar-rail-more-arrow {
    display:grid;
    place-items:center;
    width:15px;
    height:15px;
    color:#8fd3ff;
    background:rgba(91,166,220,.12);
    border-radius:50%;
    font-size:.72rem;
    font-weight:900;
    line-height:1;
}
.calendar-rail-more:hover,.calendar-rail-more:focus-visible {
    color:#fff;
    background:rgba(17,38,56,.99);
    border-color:rgba(112,188,241,.5);
    outline:0;
}

.calendar-month-card:hover,
.calendar-month-card:focus-visible {
    background: linear-gradient(90deg, rgba(69,143,202,.13), rgba(69,143,202,.025));
    border-color:rgba(103,174,229,.12);
    outline: none;
    transform: translateX(2px);
}

.calendar-month-card.is-current {
    color: #e9f5fd;
}

.calendar-month-card.is-selected {
    color: #fff;
    background: linear-gradient(100deg, rgba(43,121,185,.29), rgba(31,87,137,.13));
    border-color:rgba(105,184,239,.42);
    box-shadow:0 7px 22px rgba(0,73,132,.13), 0 1px 0 rgba(255,255,255,.035) inset;
}

.calendar-month-card.is-current.is-selected {
    background: linear-gradient(100deg, rgba(43,121,185,.29), rgba(31,87,137,.13));
    border-color:rgba(105,184,239,.42);
    box-shadow:0 7px 22px rgba(0,73,132,.13), 0 1px 0 rgba(255,255,255,.035) inset;
}

.calendar-month-card.is-selected::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    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:#bce6ff; }
.calendar-month-card.is-current:not(.is-selected) .calendar-month-card-copy strong { color:#bce7ff; }
.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-current-tag {
    padding:2px 5px;
    color:#9edcff;
    background:transparent;
    border:1px solid rgba(116,200,250,.34);
    border-radius:999px;
    font-size:.43rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.calendar-month-card-copy { min-width:0; }
.calendar-month-card-copy strong { display:block; color:inherit; font-size:.72rem; line-height:1.15; }
.calendar-month-card-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calendar-month-card-copy small {
    display:block;
    margin-top:2px;
    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-month-card.is-current .calendar-month-card-copy small { color:rgba(220,239,251,.67); }

.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 {
    container-name:calendar-detail;
    container-type:inline-size;
    min-width:0;
    min-height:0;
    padding:24px 30px 28px;
    overflow-x:hidden;
    overflow-y:auto;
    white-space:normal;
    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: 0;
    align-items: end;
    justify-content: space-between;
    gap:20px;
    padding:0 0 18px;
    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:5px 0 0; color:#f7fbff; font-size:1.38rem; letter-spacing:-.035em; }
.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 {
    display:flex;
    min-width:148px;
    padding:8px 10px;
    align-items:center;
    gap:7px;
    color:#e7f6ff;
    background:linear-gradient(110deg, rgba(38,139,220,.34), rgba(42,112,176,.2));
    border:1px solid rgba(105,190,247,.38);
    border-radius:8px;
    box-shadow:0 7px 18px rgba(0,79,145,.16);
    font-size:.57rem;
    font-weight:800;
    letter-spacing:.01em;
    transition:background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.calendar-review-icon { color:#8bd2ff; font-size:.7rem; }
.calendar-review-arrow { margin-left:auto; color:#a8ddff; font-size:.72rem; }
.calendar-open-review:hover,.calendar-open-review:focus-visible {
    color:#fff;
    background:linear-gradient(110deg, rgba(44,151,238,.46), rgba(43,120,188,.26));
    border-color:rgba(126,207,255,.56);
    box-shadow:0 9px 22px rgba(0,88,161,.23);
    outline:0;
    transform:translateY(-1px);
}
.calendar-event-list { display:flex; position:relative; min-width:0; flex-direction:column; gap:0; white-space:normal; }
.calendar-detail-header.has-event-cards::after { display:none; }
.calendar-event-list.has-event-cards { gap:1rem; }
.calendar-review-card-list { display:flex; flex-direction:column; gap:.75rem; min-width:0; }

.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-row.is-projected .calendar-event-marker {
    background:transparent;
    border:1px solid var(--color-neutral);
    box-shadow:none;
}
.calendar-event-topline { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.calendar-event-topline span {
    padding:3px 7px;
    color:#e2e8f0;
    background:rgba(30,41,59,.94);
    border:1px solid rgba(148,163,184,.52);
    border-radius:999px;
    box-shadow:0 2px 8px rgba(0,0,0,.34);
    font-size:.49rem;
    font-weight:800;
    letter-spacing:.025em;
    text-shadow:0 1px 2px rgba(0,0,0,.72);
}
.calendar-event-importance { background:rgba(30,41,59,.94); color:#e2e8f0; }
.calendar-event-importance.is-major { color:#fed7aa; background:rgba(67,20,7,.94); border-color:#f97316; }
.calendar-event-importance.is-moderate { color:#fef08a; background:rgba(66,48,4,.94); border-color:#facc15; }
.calendar-event-type,.calendar-event-certainty { color:#e2e8f0; background:rgba(30,41,59,.94); }
.calendar-event-recurrence {
    display:inline-flex;
    min-height:22px;
    align-items:center;
    gap:5px;
    color:var(--color-neutral) !important;
    background:var(--color-neutral-bg) !important;
    border:1px solid var(--color-neutral-border);
    border-radius:var(--radius-modal) !important;
    font-size:.6rem !important;
}
.calendar-event-recurrence svg { width:12px; height:12px; }
.calendar-cancelled-label { color:#fecaca; background:rgba(239,68,68,.1); }
.calendar-event-row h4 { margin:9px 0 5px; color:#f0f6fb; font-size:.79rem; overflow-wrap:anywhere; white-space:normal; }
.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; }

@container calendar-detail (max-width:440px) {
    .calendar-event-description { display:none; }
}

/* Rich Story markup must read as preview prose here, not as full-size Story UI. */
.calendar-review-event-card .ev-card-summary .narrative-chip,
.calendar-event-description .narrative-chip {
    min-height:0;
    padding:.04em .32em;
    gap:.2em;
    border-radius:4px;
    font-size:1em;
    line-height:1.25;
    letter-spacing:0;
    vertical-align:baseline;
}
.calendar-review-event-card .ev-card-summary .narrative-chip .nc-icon,
.calendar-event-description .narrative-chip .nc-icon {
    width:.82em;
    height:.82em;
}
.calendar-review-event-card .ev-card-summary blockquote.narrative-quote,
.calendar-event-description blockquote.narrative-quote {
    margin:.18em 0;
    padding:.08em .4em;
    border-left-width:1px;
    border-radius:0 3px 3px 0;
    font-size:1em;
    line-height:inherit;
}
.calendar-review-event-card .ev-card-summary .nq-text,
.calendar-event-description .nq-text {
    display:inline;
    margin:0;
    font-size:1em;
    line-height:inherit;
}
.calendar-review-event-card .ev-card-summary .nq-attr,
.calendar-event-description .nq-attr {
    display:inline;
    margin-left:.3em;
    font-size:.9em;
    line-height:inherit;
}
.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(820px, calc(100vw - 1rem));
        height:min(440px, calc(100vh - 105px));
        min-height:min(400px, calc(100vh - 105px));
        max-height:none;
    }
    .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:220px minmax(0,1fr); }
    .calendar-month-rail { padding:7px 9px 9px 8px; }
    .calendar-month-card { min-height:0; padding:4px 7px; grid-template-columns:22px minmax(0,1fr) auto auto; gap:5px; flex-basis:43px; }
    .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:0; 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 { padding-inline:6px; grid-template-columns:minmax(0,1fr) auto auto; gap:3px; }
    .calendar-current-tag {
        width:6px;
        height:6px;
        padding:0;
        overflow:hidden;
        color:transparent;
        background:#6dc8ff;
        border:0;
        border-radius:999px;
        box-shadow:0 0 8px rgba(109,200,255,.55);
        font-size:0;
    }
    .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 (max-height: 700px) {
    .calendar-rail-controls { min-height:32px; margin-bottom:3px; }
    .calendar-month-rail { padding-top:6px; padding-bottom:7px; }
    .calendar-month-card { padding-block:2px; }
    .calendar-month-card-copy small { margin-top:0; font-size:.47rem; }
}

.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: 4px;
    right: 4px;
    margin: 0;
    box-shadow: 0 0 0 2px #0f1623;
    z-index: 2;
}
/* 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%;
}

#mapViewBtn .notif-badge--dot,
#parliamentViewBtn .notif-badge--dot {
    width: 9px;
    min-width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(8, 13, 22, 0.92), 0 0 8px rgba(59, 130, 246, 0.72);
}


/* ===== 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 {
    position: relative;
    display: block;
    min-height: 112px;
    max-height: 140px;
    margin: 0.9rem 0 0.25rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: 16px;
    background:
        radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.14), transparent 42%),
        linear-gradient(145deg, rgba(27, 32, 45, 0.96), rgba(17, 20, 29, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 14px 34px rgba(0, 0, 0, 0.18);
    opacity: 1;
    transform: translateY(0);
    transition:
        max-height 280ms cubic-bezier(0.2, 0.78, 0.24, 1),
        min-height 280ms cubic-bezier(0.2, 0.78, 0.24, 1),
        margin 280ms cubic-bezier(0.2, 0.78, 0.24, 1),
        opacity 180ms ease,
        transform 240ms ease,
        border-color 180ms ease;
}

.story-message.dm-thinking.dm-thinking--leaving {
    min-height: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-color: transparent;
    opacity: 0;
    transform: translateY(-5px);
}

.dm-thinking-indicator {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 0.95rem;
    min-height: 112px;
    padding: 1rem 1.1rem 1.05rem;
}

.dm-thinking-orbit {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
}

.dm-thinking-orbit span {
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(96, 165, 250, 0.32);
    border-top-color: rgba(147, 197, 253, 0.92);
    border-radius: 50%;
    animation: dmThinkingOrbit 2.4s linear infinite;
}

.dm-thinking-orbit span:nth-child(2) {
    inset: 10px;
    border-color: rgba(255, 255, 255, 0.12);
    border-bottom-color: rgba(96, 165, 250, 0.72);
    animation-direction: reverse;
    animation-duration: 1.8s;
}

.dm-thinking-orbit i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #93c5fd;
    box-shadow: 0 0 14px rgba(96, 165, 250, 0.8);
    animation: dmThinkingCore 1.8s ease-in-out infinite;
}

.dm-thinking-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.18rem;
}

.dm-thinking-label {
    font-size: 0.68rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.115em;
    color: rgba(147, 197, 253, 0.76);
}

.dm-thinking-sub {
    font-size: 0.94rem;
    font-weight: 540;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.86);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 150ms ease, transform 150ms ease;
}

.dm-thinking-sub.dm-thinking-sub--changing {
    opacity: 0;
    transform: translateY(3px);
}

.dm-thinking-hint {
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.38);
}

.dm-thinking-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.035);
}

.dm-thinking-progress i {
    display: block;
    width: 34%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.92), transparent);
    animation: dmThinkingProgress 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes dmThinkingOrbit {
    to { transform: rotate(360deg); }
}

@keyframes dmThinkingCore {
    0%, 100% { opacity: 0.45; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.18); }
}

@keyframes dmThinkingProgress {
    from { transform: translateX(-110%); }
    to { transform: translateX(320%); }
}

@media (max-width: 560px) {
    .story-message.dm-thinking {
        min-height: 102px;
        max-height: 132px;
    }

    .dm-thinking-indicator {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 0.72rem;
        min-height: 102px;
        padding: 0.85rem 0.9rem 0.9rem;
    }

    .dm-thinking-orbit {
        width: 36px;
        height: 36px;
    }

    .dm-thinking-hint {
        display: none;
    }
}

/* 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 {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.dossier-compounding-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0;
}
.dossier-compounding-row.is-stat-effect { flex: 0 0 auto; }
.dossier-compounding-row.is-object-effect { flex: 1 0 100%; width: 100%; }

.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-months {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

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

.object-timeline-point {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    padding: 0 0 18px;
}

.object-timeline-point:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 13px;
    bottom: -1px;
    width: 2px;
    background: rgba(148, 163, 184, 0.2);
}

.object-timeline-dot {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border: 2px solid #64748b;
    border-radius: 50%;
    background: #101823;
}

.object-timeline-point--complete .object-timeline-dot {
    border-color: #61dca3;
    background: #61dca3;
}

.object-timeline-point--next .object-timeline-dot {
    border-color: #62c7f2;
    box-shadow: 0 0 0 4px rgba(98, 199, 242, 0.13);
}

.object-timeline-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.object-timeline-heading time {
    color: #62c7f2;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.object-timeline-heading strong {
    color: #eef5ff;
}

.object-timeline-copy p {
    margin: 5px 0 0;
    color: #aebdce;
    font-size: 0.9rem;
}

.object-timeline-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.timeline-effect-chip,
.timeline-stop-chip {
    padding: 4px 8px;
    border: 1px solid rgba(98, 199, 242, 0.25);
    border-radius: 999px;
    color: #bcecff;
    background: rgba(24, 102, 132, 0.16);
    font-size: 0.75rem;
    font-weight: 700;
}

.timeline-stop-chip {
    border-color: rgba(248, 113, 113, 0.25);
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.14);
}

/* Policy sections in World Memory cards */
.dossier-policy-sections {
    display: grid;
    gap: 1rem;
    margin-top: 0.5rem;
}

.dossier-policy-section {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    padding: 1rem;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(20, 31, 46, 0.78), rgba(8, 15, 25, 0.7));
    box-shadow: inset 3px 0 rgba(96, 165, 250, 0.62);
}

.dossier-policy-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-width: 0;
    padding-right: 0.8rem;
    box-sizing: border-box;
    color: #93c5fd;
    border-right: 1px solid rgba(96, 165, 250, 0.2);
}
.dossier-policy-number span {
    font-size: 0.52rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.62;
}
.dossier-policy-number strong {
    margin-top: 0.1rem;
    font-size: 2rem;
    font-weight: 820;
    line-height: 1;
    letter-spacing: -0.06em;
}
.dossier-policy-header {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}
.dossier-policy-header h4 {
    margin: 0;
    color: #f1f5f9;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.012em;
}

.dossier-policy-body {
    margin-top: 0.38rem;
    color: rgba(226, 232, 240, 0.76);
    font-size: 0.88rem;
    line-height: 1.62;
}
.dossier-policy-effects {
    margin-top: 0.8rem !important;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.dossier-policy-effects-label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgba(148, 163, 184, 0.62);
    font-size: 0.58rem;
    font-weight: 820;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.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="people"]       { --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
   ===================================================== */
.person-detail-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;
}

.person-detail-item-person {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.person-supporting-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 58px;
    padding: 0.65rem 0.8rem;
}

.person-supporting-card .person-detail-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;
}

.person-supporting-card .person-detail-role {
    margin: 0.12rem 0 0;
    line-height: 1.3;
}

.person-seat-count {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.68rem;
    font-weight: 650;
}

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

.person-detail-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.person-detail-body {
    flex: 1;
    min-width: 0;
}

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

.person-detail-item-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.person-detail-type-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.person-detail-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

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

.person-detail-role {
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.15rem;
}

.person-detail-ideology {
    font-size: 0.68rem;
    color: rgba(160, 180, 255, 0.7);
    margin-bottom: 0.35rem;
    font-style: italic;
}

.person-detail-bars {
    margin: 0.35rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.person-detail-bar-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.person-detail-bar-label {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.38);
    width: 46px;
    flex-shrink: 0;
}

.person-detail-bar-track {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.person-detail-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.person-detail-bar-fill.loyalty {
    background: linear-gradient(90deg, #4eca8b, #2fa36e);
}

.person-detail-bar-fill.influence {
    background: linear-gradient(90deg, #7ab3ff, #4d8fe0);
}

.person-detail-bar-val {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.38);
    width: 72px;
    text-align: right;
    flex-shrink: 0;
}

.person-detail-stance {
    font-size: 0.71rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    margin-top: 0.3rem;
    font-style: italic;
}

.person-detail-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

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

/* Person / entity link chips on event cards and major event screen */
.ev-person-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-person-link:hover {
    background: rgba(100, 160, 255, 0.2);
    color: rgba(200, 225, 255, 1);
}
.ev-person-link.ev-person-org {
    background: rgba(140, 100, 255, 0.1);
    color: rgba(200, 175, 255, 0.85);
    border-color: rgba(140, 100, 255, 0.25);
}
.ev-person-link.ev-person-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;
}

/* Person group headings (People / Organizations / Nations separator) */
.person-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;
}
.person-group-heading:hover {
    color: rgba(255, 255, 255, 0.6);
}
.person-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 person 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) */
.person-detail-bar-track-bipolar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.person-detail-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. */
.person-detail-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 */
.person-detail-agenda-wrap {
    margin-bottom: 0.35rem;
}

/* Agenda text beneath the AGENDA label */
.person-detail-agenda-text {
    font-size: 0.71rem;
    color: rgba(200, 220, 255, 0.6);
    line-height: 1.4;
    font-style: italic;
}

/* Recent actions section wrapper */
.person-detail-recent-wrap {
    margin-top: 0.3rem;
}

/* Scrollable log list for recent actions */
.person-detail-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 */
.person-detail-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 */
.person-detail-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 {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    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;
    color: inherit;
    font: inherit;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
    cursor: pointer;
}

.move-card:hover,
.move-card:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(120, 160, 255, 0.35);
    transform: translateY(-1px);
    outline: none;
}

/* 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;
}

/* Action summary — visually distinct, while the full card is the button. */
.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;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================
   WORLD MEMORY — Legislation Text button + header actions
   ===================================================== */
.dossier-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

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

/* Legislation 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-person-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-person   { 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;
    opacity: 0;
    transform: scale(0.98);
    transition:
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.me-overlay.me-visible {
    opacity: 1;
    transform: scale(1);
}

.me-overlay.me-closing {
    pointer-events: none;
    transition-duration: 180ms, 240ms;
    transition-timing-function:
        cubic-bezier(0.7, 0, 0.84, 0),
        cubic-bezier(0.7, 0, 0.84, 0);
}

/* 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-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-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;
}

/* Event artwork uses the same dark photographic shimmer as person payload art. */
.me-right-art.is-image-loading,
.ed-art.is-image-loading {
    background-color: #0a111a;
    background-image: linear-gradient(105deg, #0a111a 28%, #172432 42%, #223344 50%, #172432 58%, #0a111a 72%);
    background-size: 220% 100%;
    animation: event-art-shimmer 1.25s linear infinite;
}
.me-right-art.is-image-loading .me-art-icon,
.me-right-art.is-image-loading .me-art-label,
.ed-art.is-image-loading .me-art-icon,
.ed-art.is-image-loading .me-art-label {
    display: none;
}
@keyframes event-art-shimmer {
    from { background-position: 180% 0; }
    to { background-position: -180% 0; }
}

/* ---- 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;
}

/* =============================================
   CINEMATIC MONTH TRANSITION
   ============================================= */
#monthLoadingOverlay {
    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;
}

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

#monthLoadingOverlay.is-visible .tl-masthead {
    opacity: 1;
    transform: translateY(0);
}

.tl-flag {
    width: 54px;
    height: 36px;
    object-fit: contain;
    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;
}

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

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


/* =============================================
   TURN LOG SIDEBAR ENTRIES
   ============================================= */
#monthLogList {
    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-month {
    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)
   ============================================= */
#monthReportOverlay {
    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-month-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 {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
}
.milestone-track {
    display: flex;
    flex-direction: column;
}
.milestone-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
    min-height: 3.65rem;
    padding: 0 0 0.9rem;
    font-size: 0.79rem;
    transition: opacity 0.65s ease, color 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.milestone-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 21px;
    bottom: 0;
    left: 10px;
    width: 1px;
    height: auto;
    background: rgba(153, 181, 208, 0.22);
    transition: background-color 0.7s ease, box-shadow 0.7s ease;
}
.milestone-done:not(:last-child)::after { background: rgba(88, 214, 166, 0.65); }
.milestone-icon {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 800;
    flex-shrink: 0;
    border: 1px solid rgba(153, 181, 208, 0.32);
    border-radius: 999px;
    background: #101d2b;
    transition:
        color 0.55s ease,
        border-color 0.55s ease,
        background-color 0.55s ease,
        box-shadow 0.65s ease,
        transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.milestone-text-wrap { display: flex; flex-direction: column; gap: 0; min-width: 0; padding-top: 0.15rem; }
.milestone-text {
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
    transition: color 0.65s ease, opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.milestone-done { color: rgba(162, 223, 200, 0.9); opacity: 1; }
.milestone-active { color: #f4f8fc; opacity: 1; font-weight: 700; }
.milestone-pending { color: rgba(184, 204, 224, 0.46); opacity: 1; }
.milestone-done .milestone-icon { color: #071a14; border-color: #58d6a6; background: #58d6a6; }
.milestone-active .milestone-icon {
    color: #fff;
    border-color: #55aaff;
    background: #1688fa;
    box-shadow: 0 0 0 4px rgba(22, 136, 250, 0.18), 0 0 22px rgba(22, 136, 250, 0.38);
    transform: scale(1.08);
    animation: loadingNodeBreathe 2.2s ease-in-out infinite;
}
@keyframes loadingNodeBreathe {
    0%, 100% { box-shadow: 0 0 0 4px rgba(22, 136, 250, 0.14), 0 0 14px rgba(22, 136, 250, 0.22); }
    50% { box-shadow: 0 0 0 6px rgba(22, 136, 250, 0.08), 0 0 28px rgba(22, 136, 250, 0.48); }
}

/* ── Milestone sub-text and text-wrap ────────────────────────────────────── */
.milestone-sub {
    color: rgba(222, 235, 248, 0.68);
    font-size: 0.69rem;
    line-height: 1.35;
    opacity: 1;
    font-style: normal;
    margin-top: 0.22rem;
    transition: color 0.45s ease, opacity 0.45s ease;
}
.milestone-pending .milestone-sub { opacity: 0.5; }
.milestone-done .milestone-sub { opacity: 0.62; }
.milestone-active .milestone-sub { color: rgba(232, 242, 252, 0.86); opacity: 1; }

.loading-completion-track {
    position: absolute;
    right: 1.45rem;
    bottom: 0.9rem;
    left: 1.45rem;
    height: 7px;
    overflow: visible;
    border-radius: 999px;
    border: 1px solid rgba(141, 188, 230, 0.13);
    background: rgba(65, 91, 117, 0.32);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(76, 151, 216, 0.04),
        0 0 18px rgba(47, 157, 255, 0.18);
}
.loading-completion-fill {
    position: relative;
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #39ddb0 0%, #2db8ec 56%, #65adff 100%);
    box-shadow: 0 0 10px rgba(55, 206, 255, 0.88), 0 0 22px rgba(47, 157, 255, 0.48);
    transition: width 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.loading-completion-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), transparent 58%);
}

@media (max-width: 700px) {
    .loading-content {
        left: auto;
        right: auto;
        bottom: auto;
        width: calc(100% - 1.4rem);
        padding: 1.25rem 1.2rem 2rem;
    }
    .loading-progress h4 { margin-bottom: 0.85rem; }
    .loading-flag { width: 150px; height: 100px; }
    .milestone-item { min-height: 3.45rem; font-size: 0.76rem; }
    .loading-stage-status { gap: 0.5rem; }
    .loading-stage-count { font-size: 0.61rem; }
    .loading-live-work { font-size: 0.67rem; }
}


/* ── 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: 180px;
    max-width: min(300px, calc(100vw - 24px));
    box-shadow: var(--shadow);
    opacity: 0;
    transition: opacity 0.1s;
}

.parl-seat-tooltip-party {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.parl-seat-tooltip-party > div {
    display: grid;
    min-width: 0;
}

.parl-seat-tooltip-party strong {
    color: var(--text-primary);
    font-size: .8rem;
}

.parl-seat-tooltip-party span:not(.parl-party-emblem):not(.parl-legend-you) {
    color: var(--text-muted);
    font-size: .68rem;
}

.parl-seat-tooltip-vote {
    margin-top: .55rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(148, 163, 184, .2);
}

.parl-seat-tooltip-stance {
    display: inline-block;
    margin-bottom: .35rem;
    padding: .16rem .42rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 750;
}

.parl-seat-tooltip-split {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .55rem;
    font-size: .68rem;
    font-weight: 650;
}

.parl-seat-tooltip-split .is-for { color: #51cf66; }
.parl-seat-tooltip-split .is-wavering { color: #ff922b; }
.parl-seat-tooltip-split .is-against { color: #ff6b6b; }

/* 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-party-emblem {
    --emblem-size: 22px;
    box-sizing: border-box;
    display: inline-grid;
    flex: 0 0 auto;
    grid-auto-flow: column;
    place-items: center;
    width: var(--emblem-size);
    height: var(--emblem-size);
    min-width: var(--emblem-size);
    overflow: hidden;
    color: color-mix(in srgb, var(--party-color) 62%, white);
    background: color-mix(in srgb, var(--party-color) 23%, rgba(7, 13, 22, .82));
    border: 1px solid color-mix(in srgb, var(--party-color) 68%, rgba(255,255,255,.34));
    border-radius: calc(var(--emblem-size) * .22);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--party-color) 11%, transparent);
    line-height: 1;
}

.parl-party-emblem--tooltip { --emblem-size: 30px; }
.parl-party-emblem--detail { --emblem-size: 38px; }
.parl-party-emblem--hero { --emblem-size: 52px; }

.parl-party-emblem-symbol {
    display: block;
    width: 76%;
    height: 76%;
    overflow: visible;
    color: currentColor;
}

.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: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: color-mix(in srgb, var(--primary-color) 45%, #fff);
    border: 1px solid color-mix(in srgb, var(--primary-color) 38%, transparent);
    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 {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: .22rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 64px;
    text-align: right;
    white-space: nowrap;
}
.parl-legend-seats strong { font-size: 0.8rem; font-weight: 700; }
.parl-legend-seats small { color: var(--text-muted); font-size: 0.61rem; font-weight: 650; letter-spacing: .01em; }

/* Legislation */
.parl-legislation-card { flex: 1; }

.parl-legislation-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 320px;
    overflow-y: auto;
}

.parl-legislation-row {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border-color);
}

.parl-legislation-row:last-child { border-bottom: none; }

.parl-legislation-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.parl-legislation-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 0.15rem;
}

/* Legislation 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-legislation-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-legislation-row:last-child { border-bottom: none; }

.parl-tab-legislation-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-legislation-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;
}

/* ── Legislation Focus Highlight (Parliament View legislation list) ────────────────────── */

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

/* ── Legislation Type 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-type-constitutional { background: rgba(112,72,232,0.24); color: #c7adff; }
.parl-threshold-badge { background: rgba(112,72,232,0.12); color: #c7adff; border: 1px solid rgba(199,173,255,0.3); }
.parl-policy-area-badge { background: rgba(100,70,180,0.2); color: #b197fc; }

.parl-seat-map { position: relative; }


/* ── Focus Details Card (Left Column) ────────────────────────────────────── */

.parl-focus-details-card {
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.parl-focus-details-hd {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.parl-focus-details-card.has-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.parl-focus-panel-art,
.parl-focus-panel-art::after {
    position: absolute;
    inset: 0;
}
.parl-focus-panel-art {
    z-index: -1;
    height: 100%;
    pointer-events: none;
}
.parl-focus-panel-art img {
    width: 100%;
    height: clamp(250px, 34vh, 365px);
    object-fit: cover;
    object-position: center 46%;
    filter: saturate(.82) contrast(1.04) brightness(.68);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
}
.parl-focus-panel-art::after {
    content: '';
    background:
        linear-gradient(90deg, rgba(6,11,18,.78) 0%, rgba(6,11,18,.34) 56%, rgba(6,11,18,.12) 100%),
        linear-gradient(0deg, rgba(9,15,23,1) 0%, rgba(9,15,23,.96) 25%, rgba(9,15,23,.48) 58%, rgba(9,15,23,.12) 100%);
}
.parl-focus-details-card.has-hero > :not(.parl-focus-panel-art) { position: relative; z-index: 1; }
.parl-focus-details-copy { position: relative; }
.parl-focus-details-card.has-hero .parl-focus-details-title {
    max-width: 820px;
    color: #f8fbff;
    text-shadow: 0 2px 14px rgba(0,0,0,.72);
}

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

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

.parl-legislation-control-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.55rem;
}

.parl-legislation-control-actions .mandate-story-action {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0.55rem 0.7rem;
    white-space: nowrap;
}

/* ── 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);
}

#parliamentView .parl-actions-grid-story {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
}

#parliamentView .parl-actions-grid-story.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#parliamentView .parl-focus-actions-row .mandate-story-action {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
}

#parliamentView .parl-focus-actions-row .mandate-story-action svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.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; }
.parl-schedule-state.is-scheduled { color: #fbbf24; }
.parl-schedule-state.is-success { color: #6ee7a0; }
.parl-schedule-state.is-danger { color: #ff7c86; }
.parl-schedule-state.is-muted { color: rgba(203,213,225,.5); }

/* ── Focus body (swappable legislation 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;
}

/* ── Parliament content well ─────────────────────────────────────────────── */

.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-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 legislation 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 legislation) ────────────────────── */

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

/* ── 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;
}

.map-tip-organization + .map-tip-organization { margin-top: 8px; }

/* 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%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.18s ease, visibility 0s linear 0.22s;
    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);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.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-settlement) {
    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-settlement   { border-color: rgba(251,191,36,0.5);  }
.map-tab-pill.tab-settlement.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-resource { border-color: rgba(110,231,183,0.5); }
.map-tab-pill.tab-resource.active { background: rgba(16,185,129,0.18); border-color: #6ee7b7; color: #a7f3d0; }
.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;
}
.map-panel-action-row { display:flex;min-width:0;align-items:stretch;gap:8px; }
.map-panel-footer .map-panel-action-btn {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    min-width:0;
    width:auto;
    flex:1 1 0;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.map-panel-action-row .map-panel-action-btn.primary { flex-grow:1.3; }
.map-panel-action-btn.map-panel-compact-danger { display:grid;width:46px;flex:0 0 46px;padding:0;place-items:center; }
.map-panel-action-btn.map-panel-compact-danger svg { width:17px;height:17px; }

/* 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;
}

/* Events use the same image horizon and lower reading plane as Issue and
   Strength focus views, with their own neutral fallback when art is absent. */
.map-event-focus-inner {
    background-color: #111827;
    background-image:
        radial-gradient(circle at 70% 18%, rgba(234, 179, 8, 0.18), transparent 38%),
        linear-gradient(160deg, #1c2432 0%, #101722 54%, #080b11 100%);
}
.map-event-focus-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}
.map-event-focus-desc {
    color: rgba(226, 232, 240, 0.72);
}
.map-event-focus-desc p {
    color: inherit;
    margin: 0 0 0.75rem;
}
.map-event-focus-desc p:last-child {
    margin-bottom: 0;
}
.map-event-focus-desc .narrative-subheading {
    font-size: 0.86rem;
    margin-top: 0.8rem;
}
.map-event-focus-desc blockquote.narrative-quote {
    margin: 0.7rem 0;
}
.map-event-focus-desc .nq-text {
    font-size: 0.8rem;
}
.map-event-focus-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

/* Dossier markers use the same full-height visual treatment as issues,
   strengths, events, and resource deposits. */
.map-dossier-focus-inner {
    background-color: #111827;
    background-image:
        radial-gradient(circle at 62% 20%, rgba(96, 165, 250, .16), transparent 40%),
        linear-gradient(160deg, #1a2431 0%, #101722 56%, #080b11 100%);
}
.map-dossier-focus-overlay {
    background: linear-gradient(
        to top,
        rgba(5, 8, 13, .99) 0%,
        rgba(6, 10, 17, .94) 35%,
        rgba(7, 12, 20, .7) 61%,
        rgba(7, 12, 20, .16) 85%,
        transparent 100%
    );
}
.map-dossier-focus-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}
.map-dossier-focus-title { text-shadow: 0 2px 14px rgba(0,0,0,.92); }
.map-dossier-focus-desc {
    border-top: 1px solid rgba(255,255,255,.11);
    color: rgba(226,232,240,.78);
    padding-top: 11px;
}
.map-dossier-key-fact {
    color: rgba(180, 196, 216, .72);
    font-size: .74rem;
    line-height: 1.5;
}
.map-dossier-connected {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 7px;
    padding-top: 9px;
}
.map-dossier-connected > div:not(:first-child) {
    border-bottom: 1px solid rgba(255,255,255,.05);
    color: #a8b5c6;
    font-size: .74rem;
    padding: 3px 0;
}

/* Developments now use the same cinematic focus composition as Dossier,
   retaining the gold diamond's distinct map identity. */
.map-development-focus-inner {
    background-color: #17130a;
    background-image:
        radial-gradient(circle at 62% 18%, rgba(250, 204, 21, .19), transparent 40%),
        linear-gradient(160deg, #2a210d 0%, #15150f 54%, #080b11 100%);
}
.map-development-focus-overlay {
    background: linear-gradient(
        to top,
        rgba(7, 8, 10, .995) 0%,
        rgba(9, 10, 13, .95) 38%,
        rgba(14, 13, 9, .72) 64%,
        rgba(18, 15, 7, .16) 86%,
        transparent 100%
    );
}
.map-development-focus-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}
.map-panel-badge.badge-development {
    background: rgba(66, 48, 4, .94);
    border-color: rgba(250, 204, 21, .76);
    color: #fef08a;
}
.map-development-focus-title {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .94);
}
.map-development-location {
    align-items: center;
    color: rgba(226, 232, 240, .58);
    display: flex;
    font-size: .7rem;
    gap: 5px;
    margin: 2px 0 8px;
}
.map-development-focus-desc {
    border-top: 1px solid rgba(255, 255, 255, .11);
    color: rgba(226, 232, 240, .8);
    padding-top: 11px;
}
.map-development-progress,
.map-development-effects,
.map-development-latest {
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 9px;
    padding-top: 1px;
}
.map-development-progress .map-panel-activity-hd,
.map-development-effects .map-panel-activity-hd,
.map-development-latest .map-panel-activity-hd {
    margin-top: 8px;
}
.map-development-effect-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.map-development-latest p {
    color: rgba(180, 196, 216, .74);
    font-size: .74rem;
    line-height: 1.5;
    margin: 0;
}

/* 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;
    font-weight: 750;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(203,213,225,0.42);
    background: rgba(8,15,24,0.92);
    box-shadow: 0 2px 10px rgba(0,0,0,0.42);
    color: #e2e8f0;
    margin-bottom: 4px;
    margin-right: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.72);
}
.map-panel-badge.sev-crisis, .map-panel-badge.sev-Critical, .map-panel-badge.sev-Catastrophic { border-color: #ef4444; background: rgba(69,10,10,0.94); color: #fecaca; }
.map-panel-badge.sev-major, .map-panel-badge.sev-High, .map-panel-badge.sev-Major { border-color: #f97316; background: rgba(67,20,7,0.94); color: #fed7aa; }
.map-panel-badge.sev-moderate, .map-panel-badge.sev-Moderate { border-color: #facc15; background: rgba(66,48,4,0.94); color: #fef08a; }
.map-panel-badge.sev-minor, .map-panel-badge.sev-Low, .map-panel-badge.sev-Minor { border-color: #4ade80; background: rgba(5,46,22,0.94); color: #bbf7d0; }
.map-panel-badge.badge-source { border-color: rgba(148,163,184,0.68); color: #e2e8f0; background: rgba(30,41,59,0.94); }
.map-panel-badge.badge-cat    { border-color: rgba(34,211,238,0.72); color: #a5f3fc; background: rgba(8,47,56,0.94); }
.map-panel-badge.badge-status { border-color: rgba(167,139,250,0.72); color: #ede9fe; background: rgba(46,35,82,0.94); }
.map-panel-badge.badge-domestic { border-color:rgba(74,222,128,.62);color:#bbf7d0;background:rgba(20,83,45,.92); }
.map-panel-badge.badge-foreign { border-color:rgba(251,146,60,.68);color:#ffedd5;background:rgba(124,45,18,.92); }
.map-panel-badge.ev-source-memory   { border-color: rgba(96,165,250,.78); color: #dbeafe; background: rgba(30,58,138,.94); }
.map-panel-badge.ev-source-world    { border-color: rgba(192,132,252,.78); color: #f3e8ff; background: rgba(88,28,135,.94); }
.map-panel-badge.ev-source-external { border-color: rgba(45,212,191,.78); color: #ccfbf1; background: rgba(17,94,89,.94); }
.map-panel-badge.ev-source-calendar { border-color: rgba(96,165,250,.78); color: #dbeafe; background: rgba(30,64,175,.94); }
.map-panel-badge.ev-source-election { border-color: rgba(250,204,21,.78); color: #fef9c3; background: rgba(113,63,18,.94); }
.map-panel-focus-date { margin-bottom: .15rem; }
.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 People. */
.map-country-page {
    box-sizing: border-box;
    margin: -14px;
    min-height: calc(100% + 28px);
    width: calc(100% + 28px);
    background: #090c12;
}
.map-country-hero {
    overflow: hidden;
    position: relative;
    width: 100%;
}
.map-country-hero .map-panel-hero-fade {
    height: 92px;
    background: linear-gradient(to top, #090c12 0%, rgba(9,12,18,0.78) 36%, transparent 100%);
}
.map-country-content {
    box-sizing: border-box;
    min-height: calc(100% - 260px);
    padding: 14px 14px 18px;
    background: #090c12;
}
.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: contain;
    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: 9px;
}
.map-country-bars .person-detail-bar-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 12px;
    align-items: center;
}
.map-country-bars .person-detail-bar-label {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    color: #8795a5;
    font-size: .72rem;
}
.map-country-bars .person-detail-bar-val {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: auto;
    color: #c9d3df;
    font-size: .68rem;
    font-weight: 650;
}
.map-country-bars .person-detail-bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 7px;
    background: rgba(255,255,255,.09);
}
.map-country-bars .person-detail-bar-fill.power {
    background: linear-gradient(90deg, #4b91e8, #76b6ff);
}
.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: 30px 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-row .map-organization-tab-icon {
    align-self: center;
    height: 28px;
    justify-self: center;
    width: 28px;
}
.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-settlement {
    flex: 0 0 auto;
    max-width: none;
}

.map-tab-pill.tab-player .map-tab-label,
.map-tab-pill.tab-settlement .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: 8px;
}
.map-city-focus-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.map-city-focus-desc {
    color: #b2bfd2;
    font-size: 0.82rem;
    line-height: 1.6;
    margin-bottom: 16px;
}
.map-city-assessments {
    margin-top: 12px;
    padding-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.065);
}
.map-city-assessments .map-country-assessment-heading:not(:first-child) {
    margin-top: 18px;
}
.map-city-places-hd { margin-top: 2px; }
.map-city-places-list {
    display: grid;
    gap: 7px;
    margin: 7px 0 16px;
}
.map-city-place-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 7px;
    color: #dce9f7;
    text-align: left;
    font: inherit;
    border: 1px solid rgba(96, 165, 250, .27);
    border-radius: 9px;
    background: rgba(10, 19, 31, .76);
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.map-city-place-card:hover,
.map-city-place-card:focus-visible,
.map-city-place-card.is-highlighted {
    border-color: rgba(96, 165, 250, .82);
    background: rgba(20, 42, 68, .88);
    outline: none;
    transform: translateY(-1px);
}
.map-city-place-card img,
.map-city-place-icon {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 7px;
    background: rgba(59, 130, 246, .14);
}
.map-city-place-icon { display: grid; place-items: center; color: #78b8ff; font-size: 1.1rem; }
.map-city-place-card > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.map-city-place-card em { color: #78b8ff; font-size: .56rem; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.map-city-place-card strong { overflow: hidden; color: #f4f8fc; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.map-city-place-card small { margin-top: 2px; overflow: hidden; color: #9eafc2; font-size: .66rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
/* 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-country-page > .map-panel-hero {
    height: 260px;
}

/* Player panel — shared Story metadata and payload panels. */
.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 .month-datachip,
.map-current-story-card .msg-time-chip,
.map-payload-activity .month-datachip {
    margin-bottom: 7px;
}
.map-current-story-card.is-streaming {
    cursor: progress;
}
.map-current-story-loading-title {
    line-height: 1;
}
.map-current-story-loading-title .skeleton-bar {
    width: min(86%, 270px);
    height: 18px;
    border-radius: 7px;
}
.map-current-story-title {
    color: #e8f2ff;
    font-size: 1.06rem;
    font-weight: 780;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.map-current-story-preview {
    height: 4.5rem;
    line-height: 1.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.map-current-story-preview .map-current-story-title {
    line-height: inherit;
}
.map-current-story-excerpt {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: inherit;
}
.map-payload-activity {
    margin-bottom: 9px;
    cursor: pointer;
}
.map-payload-activity > .issue-progress-section,
.map-payload-activity > .strength-progress-section {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
}
.map-payload-activity > .promise-progress-chips,
.map-payload-activity > .world-update-chips {
    margin-bottom: 0;
}
/* A full person-introduction payload is designed for the wide Story feed. In
   the narrow You panel it should read like the compact relationship card and
   open the complete person profile on click, not reproduce that profile inline. */
.map-payload-activity .person-introduction-card {
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: 0;
}
.map-payload-activity .person-introduction-portrait {
    min-height: 0;
}
.map-payload-activity .person-introduction-card .person-update-main {
    padding: 13px 15px;
}
.map-payload-activity .person-introduction-card .person-update-main > strong {
    font-size: 1.08rem;
}
.map-payload-activity .person-introduction-card .person-update-role {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.map-payload-activity .person-introduction-card .person-update-main > p {
    display: -webkit-box;
    margin: 9px 0 0;
    overflow: hidden;
    font-size: 0.74rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.map-payload-activity .person-introduction-card .person-update-stats {
    gap: 4px 10px;
    margin-top: 9px;
}
.map-payload-activity .person-introduction-card .person-update-stats span {
    font-size: 0.66rem;
}
.map-payload-activity .person-introduction-card .person-update-priority {
    display: none;
}
.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);
}
/* 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;
    max-height: var(--map-menu-max-height, calc(100dvh - var(--game-header-h) - var(--stats-bar-h) - 24px));
    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;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(96, 165, 250, 0.4) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.map-layers-wrap.opens-upward .map-layers-menu {
    bottom: calc(100% + 8px);
    top: auto;
    transform-origin: bottom left;
}

.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-menu .map-layer-settings {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    width: 100%;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.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-resource-key-swatch { display:inline-block;width:12px;height:10px;flex:0 0 12px;box-sizing:border-box; }
.map-resource-key-swatch.is-terrain { background:transparent;border:1px dashed rgba(103,232,249,.78); }
.map-resource-key-swatch.is-region { background:repeating-linear-gradient(135deg,rgba(110,231,183,.78) 0 2px,rgba(110,231,183,.14) 2px 5px);border:1px solid rgba(110,231,183,.7); }
.map-resource-key-pin { position:relative;display:inline-block;width:11px;height:11px;flex:0 0 11px;box-sizing:border-box;background:#6ee7b7;border:1.3px solid rgba(5,12,18,.95);border-radius:50%;box-shadow:0 0 4px rgba(110,231,183,.6); }
.map-resource-key-pin::after { position:absolute;inset:3px;background:rgba(7,15,22,.84);border-radius:50%;content:''; }
.map-resource-key-pin.is-planned { background:transparent;border:1.5px dashed #6ee7b7;box-shadow:none; }
.map-resource-key-pin.is-planned::after { display:none; }
.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 { flex-wrap: wrap; }
.map-fill-key .is-relationship { background: linear-gradient(90deg, #f43f5e, #64748b, #10b981); }
.map-fill-key .is-power { background: linear-gradient(90deg, #2563eb, #f59e0b); }
.map-fill-key .is-hostile { color: #fca5a5; }
.map-fill-key .is-friendly { color: #86efac; }
.map-fill-key-note {
    flex: 0 0 100%;
    color: #64748b;
    font-size: .48rem;
    font-style: normal;
    letter-spacing: .01em;
}
.map-fill-key.is-disabled { opacity: 0.32; }

.map-organization-settings {
    max-height: none;
    overflow: visible;
    padding-bottom: 7px;
}
.map-organization-categories {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 2px 3px 7px;
}
.map-organization-quick-switch {
    background: rgba(7, 12, 22, 0.60);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0 0 13px 13px;
    border-top: 0;
    box-shadow: inset 0 -1px rgba(255,255,255,0.025);
    margin-top: 0;
    padding: 5px;
}
.map-layer-settings-wrap.has-layer-quick-switch .map-layers-btn,
.map-layer-settings-wrap.has-organization-quick-switch .map-layers-btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: inset 0 1px rgba(255,255,255,0.04);
}
.map-organization-quick-switch[hidden] { display: none !important; }
.map-political-scope-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.map-organization-quick-switch .map-organization-category {
    font-size: 0.56rem;
    padding-block: 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: max(80px, calc(var(--map-menu-max-height, 58vh) - 72px));
    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 {
    color: var(--organization-color, #60a5fa);
    display: inline-flex;
    flex: 0 0 auto;
    height: 26px;
    width: 26px;
}
.map-organization-tab-icon svg { width: 100%; height: 100%; }
.map-organization-emblem--large { width: 58px; height: 58px; }
.map-organization-heading { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.map-organization-heading .map-panel-title { margin: 0; }
.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 {
    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 {
    border-top: 1px solid rgba(148,163,184,0.12);
    margin-top: 13px;
    padding-top: 12px;
}
.map-organization-panel-section 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-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-event-history {
    margin: -2px 9px 7px 46px;
    transition: opacity 0.15s;
}
.map-event-history.is-disabled {
    opacity: 0.38;
    pointer-events: none;
}
.map-event-history-label {
    color: #64748b;
    display: block;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.map-event-history-options {
    background: rgba(2, 6, 23, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 7px;
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 2px;
}
.map-event-history-option {
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: #94a3b8;
    cursor: pointer;
    font: inherit;
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1;
    min-height: 26px;
    padding: 4px 2px;
    white-space: nowrap;
}
.map-event-history-option:hover { color: #e2e8f0; }
.map-event-history-option.active {
    background: rgba(59, 130, 246, 0.22);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45);
    color: #bfdbfe;
}
.map-event-history-option:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 1px;
}

.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='M1 2h10L6 11Z' 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='M6 1 11 10H1Z' 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='M1 2h10L6 11Z' 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='M6 1 11 10H1Z' 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);
}
.map-legend-group--infrastructure .map-legend-group-title {
    width: 104px;
}
@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-river {
    background: #38bdf8;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(7, 45, 72, 0.78);
    display: inline-block;
    height: 2px;
    width: 14px;
}
.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,
body.game-body:not(.map-mode-active) #mapBackground .map-detail-panel,
body.game-body:not(.map-mode-active) #mapBackground .map-hover-tip,
body.game-body:not(.map-mode-active) #mapBackground .map-loading,
body.game-body:not(.map-mode-active) .map-resource-mini-viewer {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
body.game-body:not(.map-mode-active) #mapBackground .map-detail-panel { transform: translateX(18px); transition-delay:0s,0s,.22s; }
body.game-body:not(.map-mode-active) .map-resource-mini-viewer { transform:translateY(8px); }
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 */

/* ── Month in Review 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.28s 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(28px) scale(0.972);
    opacity: 0;
    filter: blur(2px);
    transition:
        transform 0.38s cubic-bezier(.16, 1, .3, 1),
        opacity 0.24s ease,
        filter 0.3s ease;
}
#monthlyDevOverlay.md-visible .md-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
}
.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-section-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 58px;
    margin: 0.7rem 1.75rem 0;
    padding: 0.45rem;
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: #101925;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    scrollbar-width: none;
    flex-shrink: 0;
}
.md-section-nav:empty { display: none; }
.md-section-nav::-webkit-scrollbar { display: none; }
.md-section-nav-btn {
    --md-nav-tone: #60a5fa;
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 42px;
    padding: 0.38rem 0.62rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #aebaca;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.md-section-nav-btn:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--md-nav-tone) 32%, transparent);
    background: color-mix(in srgb, var(--md-nav-tone) 12%, transparent);
}
.md-section-nav-btn:focus-visible {
    outline: 2px solid rgba(78, 156, 255, 0.9);
    outline-offset: 2px;
}
.md-section-nav-btn.is-active {
    color: #fff;
    border-color: color-mix(in srgb, var(--md-nav-tone) 48%, transparent);
    background: color-mix(in srgb, var(--md-nav-tone) 18%, transparent);
    box-shadow: inset 0 -2px 0 var(--md-nav-tone);
}
.md-section-nav-btn[data-md-section-target="mdSectionMajorChanges"] { --md-nav-tone: #4ade80; }
.md-section-nav-btn[data-md-section-target="mdSectionEvents"] { --md-nav-tone: #60a5fa; }
.md-section-nav-btn[data-md-section-target="mdSectionCalendarOccurrences"] { --md-nav-tone: #38bdf8; }
.md-section-nav-btn[data-md-section-target="mdSectionTrends"] { --md-nav-tone: #fbbf24; }
.md-section-nav-btn[data-md-section-target="mdSectionEffects"] { --md-nav-tone: #a78bfa; }
.md-section-nav-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--md-nav-tone);
    border: 1px solid color-mix(in srgb, var(--md-nav-tone) 34%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--md-nav-tone) 12%, transparent);
}
.md-section-nav-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.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;
}

.md-section-calendar .md-section-header { color: #7dd3fc; }
.md-calendar-occurrence-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.md-calendar-occurrence-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.68rem 0.75rem;
    border: 1px solid rgba(125, 211, 252, 0.13);
    border-radius: 9px;
    background: rgba(14, 29, 43, 0.58);
}
.md-calendar-occurrence-marker {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 1.35rem;
    margin-top: 0.08rem;
    border: 1px solid rgba(125, 211, 252, 0.3);
    border-radius: 50%;
    color: #7dd3fc;
    font-size: 0.68rem;
    font-weight: 800;
}
.md-calendar-occurrence-copy { min-width: 0; }
.md-calendar-occurrence-meta {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.16rem;
    color: rgba(186, 230, 253, 0.58);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.md-calendar-occurrence-meta span + span::before {
    content: '\00b7';
    margin-right: 0.45rem;
}
.md-calendar-occurrence-copy h3 {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.86rem;
    font-weight: 650;
}
.md-calendar-occurrence-copy p {
    margin: 0.2rem 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.76rem;
    line-height: 1.45;
}

/* 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, .md-cause-measure { 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;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    flex-shrink: 0;
}
.md-auto-show-control {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    color: var(--text-primary);
    cursor: pointer;
}
.md-auto-show-copy {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    line-height: 1.25;
}
.md-auto-show-copy strong {
    font-size: 0.78rem;
    font-weight: 650;
}
.md-auto-show-copy small {
    color: var(--text-muted);
    font-size: 0.65rem;
}
.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-section-nav { min-height: 54px; margin: 0.55rem 1rem 0; padding: 0.35rem; }
    .md-section-nav-btn { min-height: 40px; padding: 0.32rem 0.55rem; font-size: 0.7rem; }
    .md-section-nav-icon { width: 26px; height: 26px; flex-basis: 26px; }
    .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 { align-items: stretch; flex-direction: column; padding: 0.75rem 1rem; }
    .md-continue-btn { width: 100%; }
}


/* ── 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;
}
#eventDetailOverlay:not(.ed-visible) {
    transition-duration: 180ms;
}
.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 {
    display: grid;
    min-height: 100%;
    box-sizing: border-box;
    place-items: center;
    padding: clamp(5rem, 12vh, 8rem) clamp(.5rem, 3vw, 2rem) clamp(1rem, 4vh, 3rem);
}
.cabinet-welcome-panel {
    width: min(100%, 760px);
    padding: 0;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    box-shadow: none;
}
.cabinet-welcome-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    text-align: center;
}
.cabinet-welcome-icon {
    display: inline-grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    margin: 0;
    color: #a5b4fc;
    background: rgba(99, 102, 241, .13);
    border: 1px solid rgba(129, 140, 248, .36);
    border-radius: 13px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .22);
}
.cabinet-welcome-icon svg { width: 25px; height: 25px; }
.cabinet-welcome-title {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 760;
    line-height: 1.15;
}
.cabinet-welcome-body {
    max-width: 430px;
    margin: 0 0 1.25rem;
    color: var(--text-secondary);
    font-size: .85rem;
    line-height: 1.55;
    text-align: center;
}
.cabinet-suggestion-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}
.cabinet-suggestion-chip {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    padding: .72rem .75rem;
    color: var(--text-primary);
    text-align: left;
    background: rgba(0, 0, 0, .34);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--radius-btn);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.cabinet-suggestion-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #93c5fd;
    background: rgba(59, 130, 246, .11);
    border: 1px solid rgba(96, 165, 250, .22);
    border-radius: var(--radius-btn);
}
.cabinet-suggestion-icon svg { width: 16px; height: 16px; }
.cabinet-suggestion-copy {
    min-width: 0;
}
.cabinet-suggestion-copy strong {
    overflow: hidden;
    color: #eaf2ff;
    font-size: .8rem;
    font-weight: 720;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cabinet-suggestion-draft {
    width: 15px;
    height: 15px;
    color: rgba(165, 180, 252, .45);
    transition: color 160ms ease, transform 160ms ease;
}
.cabinet-suggestion-chip:hover {
    background: rgba(30, 58, 96, .42);
    border-color: rgba(129, 140, 248, .38);
    box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 8px 20px rgba(0, 0, 0, .18);
    transform: translateY(-1px);
}
.cabinet-suggestion-chip:hover .cabinet-suggestion-draft {
    color: #a5b4fc;
    transform: translateY(2px);
}
.cabinet-suggestion-chip:focus-visible {
    outline: 2px solid #a5b4fc;
    outline-offset: 2px;
}
@media (max-width: 680px) {
    .cabinet-welcome {
        padding-top: clamp(4rem, 10vh, 6rem);
    }
    .cabinet-suggestion-row { grid-template-columns: minmax(0, 1fr); }
    .cabinet-welcome-body { font-size: .8rem; }
}

/* ── [[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-notice {
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    margin: -0.55rem 0 1.25rem;
    padding: 0.68rem 0.75rem;
    border: 1px solid var(--color-mid-border);
    border-radius: var(--radius-card);
    background: var(--color-mid-bg);
    color: var(--color-mid);
    text-align: left;
}
.gc-dialog-notice--danger {
    border-color: var(--color-negative-border);
    background: var(--color-negative-bg);
    color: var(--color-negative);
}
.gc-dialog-notice-icon {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-btn);
}
.gc-dialog-notice-icon svg { width: 1.05rem; height: 1.05rem; }
.gc-dialog-notice-copy { display: grid; min-width: 0; gap: 0.05rem; }
.gc-dialog-notice-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.82;
}
.gc-dialog-notice-copy strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gc-dialog-notice-copy > span:last-child {
    font-size: 0.72rem;
    line-height: 1.2;
    opacity: 0.82;
}
.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);
}

/* ── Person dossier dialog variant ────────────────────── */
/* Standalone popup — avoids specificity fights with .gc-dialog base rules */
.person-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;
}

/* =====================================================
   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;
    z-index: 3;
    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 34rem;
    width: min(96vw, 34rem);
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.view-selection {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.view-selection .view-toggle {
    flex: 0 0 min(25rem, 100%);
    width: min(25rem, 100%);
}

.campaign-view-switch {
    position: absolute;
    top: 1px;
    left: calc(50% + min(12.5rem, 50%) + .45rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    min-height: 36px;
    margin-top: 0;
    padding: .42rem .7rem;
    color: #f4d88f;
    background: linear-gradient(180deg, rgba(60,48,23,.97), rgba(31,27,17,.98));
    border: 1px solid rgba(230,183,75,.44);
    border-radius: var(--radius-pill);
    box-shadow: 0 7px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
    font-size: .75rem;
    font-weight: 750;
    white-space: nowrap;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

.campaign-view-switch[hidden] { display: none !important; }
.campaign-view-switch svg { width: 14px; height: 14px; }
.campaign-view-switch small {
    padding: .06rem .28rem;
    color: #ffe6a1;
    background: rgba(231,181,61,.13);
    border: 1px solid rgba(231,181,61,.22);
    border-radius: var(--radius-pill);
    font-size: .58rem;
    font-weight: 800;
}
.campaign-view-switch:hover {
    color: #fff1c7;
    background: linear-gradient(180deg, rgba(75,58,24,.99), rgba(40,33,17,.99));
    border-color: rgba(244,197,89,.7);
    transform: translateY(-1px);
}
.campaign-view-switch.active {
    color: #101820;
    background: linear-gradient(180deg, #f3c759, #dba536);
    border-color: #ffd978;
    box-shadow: 0 0 0 1px rgba(255,220,125,.18), 0 7px 16px rgba(0,0,0,.34);
}
.campaign-view-switch.active small {
    color: #38280a;
    background: rgba(255,255,255,.25);
    border-color: rgba(56,40,10,.18);
}

/* Story, Parliament, and Campaign 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,
    #campaignView {
        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 page views fill remaining space in the col-12 */
#dashboardView,
#parliamentView,
#campaignView,
#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,
#campaignView {
    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;
}

/* ── 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-month button: prevent it overflowing on very small screens */
    #endMonthBtn {
        white-space: nowrap;
        min-width: 0;
    }
}

/* ── Month 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;
}

.outcome-section--parliament { gap: .55rem; margin-bottom: .7rem; }
.outcome-section--parliament .outcome-section-label { margin-bottom: .45rem; }
.story-parliament-panel {
    position: relative;
    display: grid;
    gap: .78rem;
    min-height: 168px;
    padding: clamp(1rem, 1.65vw, 1.35rem);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-political-link) 62%, transparent);
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--color-political-link) 26%, transparent), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--color-political-link) 14%, rgba(12, 13, 22, .98)), rgba(12, 13, 22, .98));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 0 0 1px color-mix(in srgb, var(--color-political-link) 9%, transparent);
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.story-parliament-panel:hover,
.story-parliament-panel:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-political-link) 86%, white 14%);
    box-shadow: 0 13px 32px rgba(0, 0, 0, .34), 0 0 22px color-mix(in srgb, var(--color-political-link) 18%, transparent);
    outline: none;
}
.story-parliament-panel:active { transform: translateY(0); }
.story-parliament-panel--vote.story-parliament-panel--vote { border-color: color-mix(in srgb, var(--color-political-link) 58%, transparent); }
.story-parliament-motif {
    position: absolute;
    z-index: 0;
    top: clamp(-6.5rem, -7vw, -4.75rem);
    right: clamp(-5.75rem, -5vw, -3.5rem);
    width: clamp(320px, 30vw, 455px);
    aspect-ratio: 622 / 426;
    background: currentColor;
    color: var(--color-political-link);
    opacity: .06;
    -webkit-mask: url('../assets/parliament-hemicycle-watermark.png') center / contain no-repeat;
    mask: url('../assets/parliament-hemicycle-watermark.png') center / contain no-repeat;
    pointer-events: none;
}
.story-parliament-panel:not(.story-power-panel) > :not(.story-parliament-motif) { position: relative; z-index: 1; }
.story-parliament-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.story-parliament-identity { min-width: 0; }
.story-parliament-eyebrow {
    margin-bottom: .24rem;
    color: color-mix(in srgb, var(--color-political-link) 76%, white);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.story-parliament-panel--vote .story-parliament-eyebrow { color: color-mix(in srgb, var(--color-political-link) 76%, white); }
.story-parliament-title {
    color: #fff;
    font-size: clamp(1.2rem, 1.55vw, 1.55rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.story-parliament-sponsor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
    color: var(--text-secondary);
    font-size: .72rem;
}
.story-parliament-sponsor > strong { color: var(--text-primary); }
.story-parliament-open-arrow {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--color-political-link) 72%, white);
    font-size: 1.35rem;
    line-height: 1;
    transition: transform .16s ease;
}
.story-parliament-panel:hover .story-parliament-open-arrow,
.story-parliament-panel:focus-visible .story-parliament-open-arrow { transform: translateX(3px); }
.story-parliament-description {
    max-width: 78ch;
    color: rgba(255, 255, 255, .7);
    font-size: clamp(.82rem, .95vw, .92rem);
    line-height: 1.45;
}
.story-parliament-standing {
    display: grid;
    gap: .46rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.story-parliament-standing-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(255, 255, 255, .52);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.story-parliament-standing-head strong { color: rgba(255, 255, 255, .86); }
.story-parliament-panel--vote.story-parliament-panel--passed .story-parliament-standing-head strong { color: #56d68b; }
.story-parliament-bar {
    position: relative;
    display: flex;
    height: 11px;
    overflow: visible;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.story-parliament-bar > span { display: block; height: 100%; }
.story-parliament-bar-for { background: #34a853; border-radius: 999px 0 0 999px; }
.story-parliament-bar-wavering { background: #f57c00; }
.story-parliament-bar-against { background: #d93036; border-radius: 0 999px 999px 0; }
.story-parliament-bar i {
    position: absolute;
    z-index: 2;
    top: -4px;
    width: 2px;
    height: 19px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(7, 9, 14, .58), 0 0 8px rgba(255, 255, 255, .48);
}
.story-parliament-tally { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: .76rem; }
.story-parliament-tally span { display: inline-flex; align-items: center; gap: .32rem; font-weight: 650; }
.story-parliament-tally span i { width: 8px; height: 8px; border-radius: 50%; }
.story-parliament-tally-for { color: #63d77c; }
.story-parliament-tally-for i { background: #34a853; }
.story-parliament-tally-wavering { color: #ffad55; }
.story-parliament-tally-wavering i { background: #f57c00; }
.story-parliament-tally-against { color: #ff777b; }
.story-parliament-tally-against i { background: #d93036; }
.story-parliament-tally em { margin-left: auto; color: rgba(255, 255, 255, .5); font-style: normal; }
.story-parliament-change { display: grid; grid-template-columns: minmax(110px,1fr) auto; gap: .15rem .75rem; padding-top: .58rem; border-top: 1px solid rgba(255,255,255,.08); }
.story-parliament-change strong { font-size: .78rem; }
.story-parliament-change span, .story-parliament-change em, .story-parliament-change small { font-size: .72rem; color: rgba(255,255,255,.66); font-style: normal; }
.story-parliament-change em, .story-parliament-change small { grid-column: 1 / -1; }

.outcome-section--power { gap: .55rem; margin-bottom: .7rem; }
.outcome-section--power .outcome-section-label { margin-bottom: .45rem; }
.story-power-panel { isolation: isolate; }
/* The player's seal sits behind the decree, like a faint official watermark. */
.story-power-seal {
    position: absolute;
    z-index: -1;
    top: -55px;
    right: -25px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    border: 1px solid currentColor;
    color: var(--text-primary);
    opacity: .065;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.story-power-seal .parl-party-emblem {
    width: 52%;
    height: 52%;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: inherit;
}
.story-power-seal .parl-party-emblem-symbol { width: 100%; height: 100%; }
.story-power-panel.is-static { cursor: default; }
.story-power-panel .story-parliament-eyebrow { color: color-mix(in srgb, var(--color-political-link) 76%, white); }
.story-power-panel--issued .story-parliament-eyebrow,
.story-power-panel--enacted .story-parliament-eyebrow { color: color-mix(in srgb, var(--color-political-link) 58%, white); }
.story-power-reaction {
    display: grid;
    gap: .55rem;
    padding-top: .78rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.story-power-reaction-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(255, 255, 255, .52);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.story-power-reaction-head .game-badge { text-transform: none; letter-spacing: normal; }
.story-power-opinions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: .65rem 1rem;
}
.story-power-opinion {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    min-width: 0;
    color: rgba(255, 255, 255, .72);
}
.story-power-opinion-copy { display: grid; line-height: 1.18; }
.story-power-opinion strong { color: rgba(255, 255, 255, .84); font-size: .72rem; font-weight: 680; }
.story-power-opinion em { color: var(--color-neutral); font-size: .65rem; font-style: normal; }
.story-power-opinion--supports em { color: var(--color-positive); }
.story-power-opinion--accepts em { color: color-mix(in srgb, var(--primary-color) 58%, white); }
.story-power-opinion--uneasy em { color: var(--color-mid); }
.story-power-opinion--opposes em { color: var(--color-negative); }

@media (max-width: 720px) {
    .story-parliament-panel { min-height: 160px; border-radius: 14px; }
    .story-parliament-motif {
        top: -3.2rem;
        right: -4.2rem;
        width: 280px;
        opacity: .05;
    }
    .story-parliament-title { font-size: 1.2rem; }
    .story-parliament-tally { gap: .5rem .7rem; }
    .story-parliament-tally em { width: 100%; margin-left: 0; }
    .story-power-reaction-head { align-items: flex-start; flex-direction: column; gap: .18rem; }

}

/* 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 month opening arrives */
.suggested-moves-wrapper.suggested-moves-stale {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.4);
    transition: opacity 0.4s ease;
}

/* Month in Review: mechanically settled lifecycle changes. */
.md-section-lifecycle .md-section-header { color: #a3e4b0; }
.md-lifecycle-list { display: flex; flex-direction: column; gap: 0.4rem; }
.md-lifecycle-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-lifecycle-positive { border-left: 3px solid #4ade80; }
.md-lifecycle-negative { border-left: 3px solid #f87171; }
.md-lifecycle-icon {
    width: 1.1rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
}
.md-lifecycle-positive .md-lifecycle-icon { color: #4ade80; }
.md-lifecycle-negative .md-lifecycle-icon { color: #f87171; }
.md-lifecycle-info { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.md-lifecycle-title {
    overflow: hidden;
    color: rgba(255,255,255,0.85);
    font-size: 0.82rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-lifecycle-label { color: rgba(255,255,255,0.4); font-size: 0.72rem; }
.md-lifecycle-effects { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 0.3rem; 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-month {
    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;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORY STREAMING — shimmer, progressive reveal, and 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;
}
/* The clock is already known; only the unresolved Time value shimmers. */
.skeleton-bar--time {
    width: 1.35rem;
    height: 0.72rem;
    border-radius: var(--radius-tag);
}
/* 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: 62px;
    border: 1px solid rgba(125, 165, 230, 0.13);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
/* 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;
}
.skeleton-moves-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}
.story-card-skeleton {
    min-height: 0;
    padding-bottom: 0.72rem;
}
.story-card-skeleton .skeleton-section-label--payload { width: 92px; }
.story-card-skeleton .skeleton-section-label--actions { width: 118px; }
.story-card--adapting {
    overflow: hidden !important;
    transition:
        height 300ms cubic-bezier(0.2, 0.78, 0.24, 1),
        max-height 300ms cubic-bezier(0.2, 0.78, 0.24, 1),
        opacity 220ms ease,
        transform 300ms cubic-bezier(0.2, 0.78, 0.24, 1) !important;
}

/* ── Progressive Story sections ────────────────────────────────────────── */
.dm-response-stack {
    --story-stack-overlap: 0px;
    --story-stack-radius: 16px;
    margin-bottom: 1rem;
    position: relative;
}
.story-prose-stage {
    position: relative;
    overflow: clip;
    border-radius: 16px;
    transition: height 230ms cubic-bezier(0.2, 0.78, 0.24, 1);
    will-change: height;
}
.story-prose-stage.story-prose-stage--settled {
    height: auto !important;
    overflow: visible;
    will-change: auto;
}
.story-prose-stage > .story-message {
    margin-bottom: 0;
    position: relative;
    z-index: 3;
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 16px 36px rgba(0, 0, 0, 0.16);
}
/* Payload section reveal foundation. */
.outcome-card {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--story-stack-overlap));
    background:
        linear-gradient(145deg, rgba(18, 23, 35, 0.99), rgba(10, 13, 22, 0.99));
    border: 1px solid rgba(125, 165, 230, 0.14);
    border-radius: 16px;
    padding: 1.45rem 1.05rem 0.9rem;
    overflow: hidden;
    max-height: none;
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
    transition:
        max-height 560ms cubic-bezier(0.16, 0.82, 0.24, 1),
        opacity 320ms ease,
        transform 480ms cubic-bezier(0.16, 0.82, 0.24, 1),
        filter 320ms ease,
        padding 480ms cubic-bezier(0.16, 0.82, 0.24, 1),
        border-width 380ms ease,
        margin-top 520ms cubic-bezier(0.16, 0.82, 0.24, 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;
    transform: translateY(-10px) scale(0.992) !important;
    filter: blur(3px) !important;
}
.outcome-card.card--revealing,
.suggested-actions-card.card--revealing {
    max-height: var(--story-card-height, 900px);
}
.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 reveal foundation. */
.suggested-actions-card {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--story-stack-overlap));
    background:
        linear-gradient(150deg, rgba(14, 18, 30, 0.99), rgba(8, 10, 18, 0.99));
    border: 1px solid rgba(96, 165, 250, 0.16);
    border-radius: 16px;
    padding: 1.45rem 1.05rem 0.9rem;
    overflow: hidden;
    max-height: none;
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
    transition:
        max-height 600ms cubic-bezier(0.16, 0.82, 0.24, 1),
        opacity 340ms ease,
        transform 500ms cubic-bezier(0.16, 0.82, 0.24, 1),
        filter 340ms ease,
        padding 500ms cubic-bezier(0.16, 0.82, 0.24, 1),
        border-width 400ms ease,
        margin-top 560ms cubic-bezier(0.16, 0.82, 0.24, 1);
}
/* Base prose material; the current document-flow treatment below removes it. */
.story-prose-stage > .story-message {
    background:
        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.055), transparent 34%),
        #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;
}

@media (max-width: 720px) {
    .skeleton-moves-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
    .skeleton-moves-grid { grid-template-columns: minmax(0, 1fr); }
}
.suggested-actions-card .suggested-moves-label {
    margin-bottom: 0.5rem;
}

.outcome-card.card--revealing .outcome-section,
.suggested-actions-card.card--revealing .suggested-moves-label,
.suggested-actions-card.card--revealing .move-card {
    animation: story-payload-item-in 460ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
}
.outcome-card.card--revealing .outcome-section:nth-child(2),
.suggested-actions-card.card--revealing .move-card:nth-child(2) { animation-delay: 55ms; }
.outcome-card.card--revealing .outcome-section:nth-child(3),
.suggested-actions-card.card--revealing .move-card:nth-child(3) { animation-delay: 110ms; }
.outcome-card.card--revealing .outcome-section:nth-child(4),
.suggested-actions-card.card--revealing .move-card:nth-child(4) { animation-delay: 165ms; }
.outcome-card.card--revealing .outcome-section:nth-child(n+5) { animation-delay: 210ms; }

@keyframes story-payload-item-in {
    from {
        opacity: 0;
        transform: translateY(7px);
        filter: blur(1.5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 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,
.outcome-section--map {
    margin-bottom: 0.7rem;
}
.outcome-section--location .outcome-section-label,
.outcome-section--map .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;
}
.world-update-chip.resource-price-update-chip {
    gap: 0.42rem;
    min-height: 2.15rem;
    padding: 0.18rem 0.58rem 0.18rem 0.22rem;
    background: var(--color-neutral-bg);
    border-color: var(--color-neutral-border);
    color: var(--color-neutral);
}
.resource-price-update-chip .resource-price-update-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 7px;
}
.resource-price-update-chip .sd-resource-icon { width: 16px; height: 16px; }
.resource-price-update-label { color: rgba(255, 255, 255, 0.72); font-weight: 600; }
.resource-price-update-movement { color: inherit; font-weight: 800; }
.resource-price-update-chip.is-cheap {
    background: var(--color-positive-bg);
    border-color: var(--color-positive-border);
    color: var(--color-positive);
}
.resource-price-update-chip.is-expensive {
    background: var(--color-mid-bg);
    border-color: var(--color-mid-border);
    color: var(--color-mid);
}
.resource-price-update-chip.is-crisis {
    background: var(--color-negative-bg);
    border-color: var(--color-negative-border);
    color: var(--color-negative);
}
.world-update-section { display: grid; gap: 10px; }

/* National Issue / Strength / Promise movement cards. Their artwork behaves as
   an atmospheric backdrop rather than a person portrait, so these remain easy
   to distinguish from people updates even when both appear in one payload. */
.issue-progress-chips,
.strength-progress-chips,
.promise-progress-chips {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
.national-progress-card {
    --npc-accent: #72d99f;
    --npc-border: rgba(77, 190, 128, .38);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 104px;
    padding: 0;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    display: block;
    color: #eaf0f7;
    font: inherit;
    text-align: left;
    border: 1px solid var(--npc-border);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(20, 33, 44, .98), rgba(10, 18, 28, .99));
    box-shadow: 0 7px 18px rgba(0, 0, 0, .17);
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.national-progress-card:hover,
.national-progress-card:focus-visible {
    border-color: color-mix(in srgb, var(--npc-accent) 72%, transparent);
    background: linear-gradient(145deg, rgba(24, 40, 53, .99), rgba(10, 19, 29, .99));
    transform: translateY(-1px);
    outline: none;
}
.national-progress-card--issue { --npc-accent: #f08080; --npc-border: rgba(223, 91, 91, .38); }
.national-progress-card--strength { --npc-accent: #c68cff; --npc-border: rgba(168, 85, 247, .4); }
.national-progress-card--promise { --npc-accent: #f4d56f; --npc-border: rgba(224, 178, 70, .42); }
.national-progress-image {
    position: absolute;
    z-index: -1;
    inset: 0 0 0 auto;
    display: block;
    width: clamp(210px, 36%, 430px);
    min-height: 100%;
    overflow: hidden;
    background: #0a111a;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .4) 22%, rgba(0, 0, 0, .88) 44%, #000 62%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .4) 22%, rgba(0, 0, 0, .88) 44%, #000 62%, #000 100%);
}
.national-progress-image::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: -12px 24% -12px -1px;
    background: linear-gradient(90deg, rgba(10, 18, 28, .98) 0%, rgba(10, 18, 28, .72) 24%, rgba(10, 18, 28, .18) 64%, transparent 100%);
    filter: blur(5px);
    pointer-events: none;
}
.national-progress-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.national-progress-main {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 104px;
    padding: 12px clamp(134px, 16%, 196px) 13px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.national-progress-card.no-image .national-progress-main { padding-right: 18px; }
.national-progress-card--effect {
    min-height: 92px;
    border-radius: 10px;
}
.national-progress-card--effect .national-progress-main {
    min-height: 92px;
    padding-top: 11px;
    padding-bottom: 11px;
}
.national-progress-card--effect .national-progress-movement { margin-top: 6px; }
.national-progress-kicker {
    margin-bottom: 2px;
    color: var(--npc-accent);
    font-size: .59rem;
    font-weight: 850;
    letter-spacing: .09em;
    line-height: 1.15;
    text-transform: uppercase;
}
.national-progress-main > strong {
    overflow: hidden;
    color: #f5f8fc;
    font-size: .95rem;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.national-progress-movement {
    margin-top: 7px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.national-progress-movement b {
    color: var(--npc-accent);
    font-size: 1.05rem;
    line-height: 1;
}
.national-progress-card.is-positive .national-progress-movement b { color: #72d99f; }
.national-progress-card.is-negative .national-progress-movement b { color: #f08080; }
.national-progress-card.is-neutral .national-progress-movement b { color: #aeb9c7; }
.national-progress-movement span {
    color: #dce4ed;
    font-size: .8rem;
    font-weight: 750;
}
.national-progress-movement em {
    padding: 2px 7px;
    color: #e1e9e5;
    font-size: .64rem;
    font-style: normal;
    font-weight: 650;
    line-height: 1.25;
    border-radius: 999px;
    background: color-mix(in srgb, var(--npc-accent) 16%, transparent);
}
.national-progress-movement .plateau-speed-icon { align-self: center; }
@media (max-width: 560px) {
    .national-progress-image { width: min(72%, 270px); }
    .national-progress-main { padding-right: 104px; padding-left: 13px; }
    .national-progress-card.no-image .national-progress-main { padding-right: 13px; }
}

@keyframes person-portrait-shimmer {
    from { background-position: 180% 0; }
    to { background-position: -180% 0; }
}
.person-portrait-skeleton {
    background-color: #0a111a;
    background-image: linear-gradient(105deg, #0a111a 28%, #172432 42%, #223344 50%, #172432 58%, #0a111a 72%);
    background-size: 220% 100%;
    animation: person-portrait-shimmer 1.25s linear infinite;
}
.person-portrait-skeleton > img { z-index: 1; }
.person-update-card {
    width: 100%;
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(150px, 22%) minmax(0, 1fr);
    text-align: left;
    color: #eaf0f7;
    border: 1px solid rgba(77, 190, 128, .34);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(20, 33, 44, .98), rgba(10, 18, 28, .99));
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
    transition: transform .14s ease, border-color .14s ease;
}
.person-update-card.no-portrait { grid-template-columns: minmax(0, 1fr); }
.person-update-card:hover { border-color: rgba(83, 211, 143, .62); transform: translateY(-1px); }
.person-introduction-portrait {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 250px;
    align-self: stretch;
    overflow: hidden;
}
.person-introduction-portrait > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.person-update-main { min-width: 0; padding: 20px 22px; }
.person-update-kicker { display: block; margin-bottom: 4px; color: #68cf98; font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.person-update-main > strong { display: block; color: #f5f8fc; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.1; }
.person-update-role { display: block; margin-top: 6px; color: #a9b7c7; font-size: .86rem; line-height: 1.4; }
.person-update-main > p { max-width: 62ch; margin: 13px 0 0; color: #c8d1dc; font-size: .86rem; line-height: 1.52; }
.person-update-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.person-update-stats span { color: #8798ab; font-size: .74rem; }
.person-update-stats b { margin-left: 5px; color: #dbe4ee; }
.person-update-priority { margin-top: 13px; padding-top: 10px; color: #d0d9e3; font-size: .8rem; line-height: 1.45; border-top: 1px solid rgba(255,255,255,.08); }
.person-update-priority em { margin-right: 7px; color: #69cf99; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.person-relationship-card {
    grid-template-columns: 104px minmax(0, 1fr);
    min-height: 0;
    align-items: stretch;
}
.person-relationship-card.no-portrait { grid-template-columns: minmax(0, 1fr); }
.person-relationship-portrait {
    position: relative;
    width: 104px;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
    background: #0a111a;
}
.person-relationship-portrait > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.person-relationship-card .person-update-main { padding: 11px 14px; }
.person-relationship-card .person-update-main > strong { font-size: .95rem; }
.person-power-card { border-color: rgba(91, 164, 240, .42); }
.person-power-card .person-update-kicker { color: #71b5ff; }
.person-relationship-movement { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.person-relationship-movement b { font-size: 1.15rem; }
.person-update-card.is-positive .person-relationship-movement b { color: #72d99f; }
.person-update-card.is-negative .person-relationship-movement b { color: #f08080; }
.person-update-card.is-neutral .person-relationship-movement b { color: #aeb9c7; }
.person-relationship-movement span { color: #dce4ed; font-size: .85rem; font-weight: 700; }
.person-relationship-movement em { padding: 2px 8px; color: #d9e7df; font-size: .68rem; font-style: normal; border-radius: 999px; background: rgba(82, 180, 126, .16); }
.person-power-card .person-relationship-movement em { background: rgba(91, 164, 240, .16); }
.power-bloc-update-card {
    width: 100%;
    min-height: 94px;
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    text-align: left;
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--color-political-link) 58%, transparent);
    border-radius: 13px;
    background:
        radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--color-political-link) 20%, transparent), transparent 32%),
        linear-gradient(145deg, color-mix(in srgb, var(--color-political-link) 13%, rgba(12, 14, 20, .98)), rgba(12, 14, 20, .98));
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.power-bloc-update-card:hover,
.power-bloc-update-card:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-political-link) 86%, white 14%);
    box-shadow: 0 13px 30px rgba(0, 0, 0, .3), 0 0 20px color-mix(in srgb, var(--color-political-link) 14%, transparent);
    outline: none;
}
.power-bloc-update-emblem {
    display: grid;
    place-items: center;
    min-height: 94px;
    border-right: 1px solid color-mix(in srgb, var(--color-political-link) 22%, transparent);
    background: color-mix(in srgb, var(--color-political-link) 8%, transparent);
}
.power-bloc-update-emblem .parl-party-emblem { width: 54px; height: 54px; }
.power-bloc-update-main { min-width: 0; align-self: center; padding: 13px 16px; }
.power-bloc-update-kicker {
    display: block;
    margin-bottom: 4px;
    color: color-mix(in srgb, var(--color-political-link) 82%, white);
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.power-bloc-update-main > strong { display: block; font-size: 1rem; line-height: 1.15; }
.power-bloc-update-movement { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.power-bloc-update-movement b { font-size: 1.15rem; }
.power-bloc-update-card.is-positive .power-bloc-update-movement b { color: var(--color-positive); }
.power-bloc-update-card.is-negative .power-bloc-update-movement b { color: var(--color-negative); }
.power-bloc-update-movement span { color: #dce4ed; font-size: .85rem; font-weight: 700; }
.power-bloc-update-movement em {
    padding: 2px 8px;
    color: color-mix(in srgb, var(--color-political-link) 70%, white);
    font-size: .68rem;
    font-style: normal;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-political-link) 14%, transparent);
}
.person-supporting-introduction-card {
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 0;
    align-items: stretch;
    cursor: default;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .15);
}
.person-supporting-introduction-card:hover { transform: none; }
.person-supporting-introduction-portrait {
    position: relative;
    width: 96px;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
    background: #0a111a;
}
.person-supporting-introduction-portrait > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.person-supporting-introduction-card .person-update-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 14px;
}
.person-supporting-introduction-card .person-update-main > strong { font-size: 1rem; }
.person-supporting-introduction-card .person-update-role { margin-top: 3px; font-size: .76rem; }

/* Record types identify Dossier and Development objects across payloads,
   list cards, and detail surfaces without borrowing national-stat badges. */
.record-type-badge {
    --record-type-accent: #65dbea;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: color-mix(in srgb, var(--record-type-accent) 82%, white);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1;
    text-transform: none;
}
.record-type-badge--development { --record-type-accent: #ebc762; }
.record-type-symbol {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    color: var(--record-type-accent);
    border: 1px solid color-mix(in srgb, var(--record-type-accent) 42%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--record-type-accent) 13%, transparent);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.record-type-symbol svg { width: 14px; height: 14px; }
.record-type-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-card-type-row {
    min-width: 0;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Dossier / Development payloads use the same atmospheric right-hand artwork
   as national-object updates, keeping them distinct from People portraits. */
.world-object-reveal-card {
    width: 100%;
    min-height: 126px;
    padding: 0;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    display: block;
    text-align: left;
    color: #eaf4fa;
    font: inherit;
    border: 1px solid rgba(55, 205, 225, .4);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(14, 31, 42, .99), rgba(8, 18, 27, .99));
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .17);
    transition: transform .14s ease, border-color .14s ease;
}
.world-object-reveal-card--development {
    border-color: rgba(224, 178, 70, .42);
    background: linear-gradient(145deg, rgba(36, 31, 20, .99), rgba(18, 19, 22, .99));
}
.world-object-reveal-card--lore {
    border-color: rgba(245, 158, 11, .5);
    background: linear-gradient(145deg, rgba(48, 34, 14, .99), rgba(22, 19, 16, .99));
}
.story-map-update-family,
.map-update-cards { display: grid; gap: 9px; }
.calendar-update-cards,
.stored-update-cards { display: grid; gap: 9px; }
.map-update-card {
    border-color: rgba(59, 130, 246, .58);
    background: linear-gradient(145deg, rgba(18, 37, 64, .99), rgba(8, 17, 31, .99));
}
.map-update-card:hover,
.map-update-card:focus-visible { border-color: rgba(96, 165, 250, .96); outline: none; }
.map-update-card .world-object-reveal-kicker,
.map-update-meta { color: #79b7ff; }
.map-update-meta { margin-top: 2px; font-size: .66rem; font-weight: 700; text-transform: capitalize; }
.resource-map-update-card {
    border-color:color-mix(in srgb,var(--resource-color,#6ee7b7) 54%,transparent);
    background:linear-gradient(145deg,color-mix(in srgb,var(--resource-color,#6ee7b7) 13%,rgba(10,24,31,.99)),rgba(8,17,27,.99));
}
.resource-map-update-card:hover,
.resource-map-update-card:focus-visible { border-color:color-mix(in srgb,var(--resource-color,#6ee7b7) 78%,white 8%); }
.resource-map-update-card .world-object-reveal-kicker { display:flex;align-items:center;gap:7px;color:color-mix(in srgb,var(--resource-color,#6ee7b7) 64%,white); }
.resource-map-update-resource { width:31px;height:31px;flex:0 0 auto; }
.resource-map-update-resource svg { width:17px;height:17px; }
.resource-map-update-action { display:grid;width:21px;height:21px;flex:0 0 auto;place-items:center;color:#dbeafe;border:1px solid rgba(147,197,253,.24);border-radius:50%;background:rgba(59,130,246,.15); }
.resource-map-update-action svg { width:12px;height:12px; }
.persistent-update-card {
    min-height: 88px;
    cursor: default;
}
.persistent-update-card:hover { transform: none; }
.persistent-update-card .world-object-reveal-main {
    min-height: 88px;
    padding: 12px 15px;
}
.world-update-card {
    border-color: rgba(55, 205, 225, .48);
    background: linear-gradient(145deg, rgba(14, 36, 45, .99), rgba(8, 18, 27, .99));
}
.world-update-card .world-object-reveal-kicker { color: #65dbea; }
.calendar-update-card {
    border-color: rgba(167, 139, 250, .52);
    background: linear-gradient(145deg, rgba(39, 30, 67, .98), rgba(16, 14, 31, .99));
}
.calendar-update-card .world-object-reveal-kicker,
.persistent-update-meta { color: #b9a5ff; }
.calendar-update-card--with-image {
    min-height: 112px;
    background: linear-gradient(145deg, rgba(35, 27, 62, .99), rgba(13, 12, 26, .99));
}
.calendar-update-card--with-image .world-object-reveal-image {
    z-index: 0;
    width: clamp(280px, 48%, 560px);
    opacity: .82;
}
.calendar-update-card--with-image .world-object-reveal-image::after {
    inset: 0 18% 0 0;
    filter: blur(3px);
    background: linear-gradient(90deg, rgba(24, 18, 43, .98) 0%, rgba(24, 18, 43, .72) 34%, transparent 100%);
}
.calendar-update-card--with-image .world-object-reveal-main {
    min-height: 112px;
    padding: 16px clamp(100px, 32%, 390px) 16px 18px;
}
.calendar-update-date {
    margin-top: 6px;
    color: #c9bbff;
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.3;
}
.calendar-update-card .world-object-reveal-main > strong {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.persistent-update-meta {
    margin-top: 4px;
    font-size: .66rem;
    font-weight: 700;
}
.persistent-update-card.is-projected {
    border-style: dashed;
    background-color: rgba(10, 16, 27, .72);
}
.persistent-update-card.is-inactive {
    opacity: .52;
    filter: saturate(.55);
}
@media (max-width: 575.98px) {
    .calendar-update-card--with-image .world-object-reveal-image {
        width: 100%;
        opacity: .58;
        mask-image: none;
        -webkit-mask-image: none;
    }
    .calendar-update-card--with-image .world-object-reveal-image::after {
        inset: 0;
        filter: none;
        background: linear-gradient(90deg, rgba(24, 18, 43, .98) 0%, rgba(24, 18, 43, .82) 58%, rgba(24, 18, 43, .22) 100%);
    }
    .calendar-update-card--with-image .world-object-reveal-main { padding-right: 16px; }
}
.world-object-reveal-card:hover { transform: translateY(-1px); border-color: rgba(87, 223, 239, .72); }
.world-object-reveal-card--development:hover { border-color: rgba(240, 198, 92, .72); }
.world-object-reveal-card--lore:hover { border-color: rgba(251, 191, 36, .86); }
.world-object-reveal-image {
    width: clamp(260px, 42%, 520px);
    min-height: 100%;
}
.world-object-reveal-main {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 126px;
    padding: 12px clamp(150px, 20%, 260px) 12px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.world-object-reveal-card.no-image .world-object-reveal-main { padding-right: 15px; }
.world-object-reveal-kicker {
    margin-bottom: 3px;
    color: #65dbea;
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.world-object-reveal-card--development .world-object-reveal-kicker { color: #ebc762; }
.world-object-reveal-card--lore .world-object-reveal-kicker { color: #f6b94b; }
.record-payload-kicker {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
}
.record-payload-change {
    color: inherit;
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.world-object-reveal-main > strong {
    overflow: hidden;
    color: #f5f8fc;
    font-size: 1rem;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.world-object-reveal-description {
    margin-top: 5px;
    overflow: hidden;
    display: -webkit-box;
    color: #b8c5d2;
    font-size: .76rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.world-object-reveal-effects {
    position: relative;
    min-width: 0;
    max-height: 27px;
    margin-top: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.world-object-reveal-effects > em {
    flex: 0 0 auto;
    color: #74889a;
    font-size: .56rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.world-object-reveal-effects .narrative-chip { flex: 0 0 auto; }
.world-object-reveal-effects .effect-family-chip {
    min-height: 26px;
    padding: .12rem .5rem;
    line-height: 1.35;
}
.world-object-reveal-effects .national-object-effect-chip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}
.national-object-effect-chip .nc-label {
    min-width: 0;
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.national-object-effect-chip .effect-chip-value,
.national-object-effect-chip .effect-chip-rate,
.national-object-effect-chip .chip-duration,
.national-object-effect-chip .plateau-speed-icon {
    flex: 0 0 auto;
}
@media (max-width: 560px) {
    .person-update-card { grid-template-columns: 108px minmax(0, 1fr); }
    .person-update-card.no-portrait { grid-template-columns: minmax(0, 1fr); }
    .person-introduction-portrait { min-height: 210px; }
    .person-update-main { padding: 15px 16px; }
    .person-relationship-card { grid-template-columns: 82px minmax(0, 1fr); }
    .person-relationship-card.no-portrait { grid-template-columns: minmax(0, 1fr); }
    .person-relationship-portrait { width: 82px; }
    .person-supporting-introduction-card { grid-template-columns: 82px minmax(0, 1fr); }
    .person-supporting-introduction-portrait { width: 82px; }
    .power-bloc-update-card { grid-template-columns: 78px minmax(0, 1fr); }
    .power-bloc-update-emblem { min-height: 88px; }
    .power-bloc-update-emblem .parl-party-emblem { width: 46px; height: 46px; }
    .world-object-reveal-image { width: min(74%, 270px); }
    .world-object-reveal-main { padding-right: 104px; padding-left: 13px; }
    .world-object-reveal-card.no-image .world-object-reveal-main { padding-right: 13px; }
}
/* 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: 12050;
    background: rgba(3, 7, 13, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#meEventFeedback .story-feedback-controls {
    margin-top: 1.4rem;
    padding-bottom: 0.15rem;
}
.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 {
    justify-content: center;
    margin-bottom: 0.85rem;
    padding: 0.05rem 0.1rem;
    border-bottom: 0;
}
#settingsModal .settings-modal-logo {
    display: block;
    width: min(220px, 75%);
    height: auto;
}
#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-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.3rem;
    margin: 0 0 1.15rem;
    padding: 0.35rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: #101925;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.settings-tab[data-settings-tab="sound"] { --settings-tone: #38bdf8; }
.settings-tab[data-settings-tab="gameplay"] { --settings-tone: #4ade80; }
.settings-tab[data-settings-tab="developer"] { --settings-tone: #c084fc; }

.settings-tab {
    position: relative;
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.42rem 0.48rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #aebaca;
    background: transparent;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.settings-tab-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--settings-tone, #60a5fa);
    background: color-mix(in srgb, var(--settings-tone, #60a5fa) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--settings-tone, #60a5fa) 30%, transparent);
    border-radius: 7px;
    transition: background 160ms ease, border-color 160ms ease;
}
.settings-tab-icon svg { width: 15px; height: 15px; }

.settings-tab:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--settings-tone, #60a5fa) 28%, transparent);
    background: color-mix(in srgb, var(--settings-tone, #60a5fa) 10%, transparent);
}

.settings-tab.is-active {
    color: #fff;
    border-color: color-mix(in srgb, var(--settings-tone, #60a5fa) 48%, transparent);
    background: color-mix(in srgb, var(--settings-tone, #60a5fa) 16%, transparent);
    box-shadow: inset 0 -2px 0 var(--settings-tone, #60a5fa);
}
.settings-tab.is-active .settings-tab-icon {
    background: color-mix(in srgb, var(--settings-tone, #60a5fa) 18%, transparent);
    border-color: color-mix(in srgb, var(--settings-tone, #60a5fa) 46%, transparent);
}

.settings-tab:focus-visible {
    outline: 2px solid var(--settings-tone, #60a5fa);
    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: 0.25rem;
        padding: 0.38rem 0.2rem;
        font-size: 0.66rem;
    }
    .settings-tab-icon { width: 25px; height: 25px; flex-basis: 25px; }
    .settings-tab-icon svg { width: 13px; height: 13px; }
}


.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;
    padding: 0.72rem 1rem;
    text-align: left;
}

.pref-segmented--voices .pref-segmented-option span {
    font-size: 0.88rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* 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);
    }
}


/* 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: 54px !important;
    height: 36px !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: calc(100dvh - var(--map-ui-top) - var(--stats-drawer-gap));
    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"] #endMonthBtn .end-month-label,
    body[data-shell-mode="compact"] #endMonthBtn .end-month-label {
        display: none;
    }

    body[data-shell-mode="compact"] .stats-expand-btn,
    body[data-shell-mode="inline"] .stats-expand-btn,
    body[data-shell-mode="inline"] #endMonthBtn,
    body[data-shell-mode="compact"] #endMonthBtn {
        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: calc(100dvh - var(--game-header-h) - var(--stats-bar-h) - 8px);
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    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%;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    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: sticky;
    top: 0;
    z-index: 4;
    background: rgba(8, 13, 23, 0.98);
}

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(4, minmax(0, 1fr));
    width: 100%;
}

.map-infrastructure-key-pin {
    width: 14px;
    height: 14px;
    align-items: center;
    background: var(--infra-color, #94a3b8);
    border: 0;
    box-sizing: border-box;
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    flex: 0 0 auto;
    color: #f8fafc;
    display: inline-flex;
    font-size: 8px;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    position: relative;
    text-shadow: 0 1px 1px rgba(0,0,0,.55);
}
.map-infrastructure-key-pin::after {
    content: attr(data-glyph);
    position: relative;
    z-index: 1;
}

.map-foreign-owner-key {
    border: 1.5px dashed #c4b5fd;
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 auto;
    height: 14px;
    position: relative;
    width: 14px;
}

.map-war-key {
    border: 1px solid var(--color-mid-border);
    border-radius: var(--radius-tag);
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 auto;
    height: 14px;
    width: 14px;
}
.map-war-key.is-occupied {
    background: repeating-linear-gradient(
        135deg,
        rgba(190, 18, 60, .32) 0 4px,
        #fb7185 4px 6px
    );
    border-color: #fb7185;
}
.map-war-key.is-contested {
    background:
        linear-gradient(45deg, transparent 42%, #fde68a 44% 56%, transparent 58%),
        linear-gradient(-45deg, transparent 42%, #fde68a 44% 56%, transparent 58%),
        rgba(217, 119, 6, .32);
}

.map-agreement-key-line {
    width: 22px;
    height: 0;
    display: inline-block;
    border-top: 3px dashed #2684ff;
    flex: 0 0 auto;
}

.map-agreement-key-line.is-trade {
    border-top-style: solid;
    border-top-color: #22d3ee;
}

.map-layer-settings-note {
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1.45;
    margin: 8px 10px 4px;
}

.map-resource-mini-viewer {
    width: 230px;
    padding: 10px;
    color: #dce9e5;
    background: rgba(7, 20, 24, .88);
    border: 1px solid rgba(110, 231, 183, .24);
    border-radius: 13px;
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.24);
    backdrop-filter: blur(16px) saturate(130%);
}

/* On full-width map shells the national briefing is a right-side map tool,
   independent of the left layer stack. It follows the same drawer clearance
   as the zoom controls when selection details open. Compact/mobile keep it in
   the layer bottom sheet, where the surrounding controls remain usable. */
body[data-shell-mode="desktop"] .map-resource-mini-viewer,
body[data-shell-mode="inline"] .map-resource-mini-viewer {
    position: fixed;
    right: 14px;
    bottom: calc(var(--stats-bar-h) + 14px);
    z-index: 14;
    transform:translateY(0);
    transition:right 0.26s cubic-bezier(.2,.8,.2,1),opacity 0.18s ease,visibility 0s linear 0s,transform 0.2s ease;
}

body[data-shell-mode="desktop"].map-detail-open .map-resource-mini-viewer,
body[data-shell-mode="inline"].map-detail-open .map-resource-mini-viewer {
    right: calc(clamp(360px, 28vw, 540px) + 14px);
}

body[data-shell-mode="desktop"]:not(.map-mode-active) .map-resource-mini-viewer,
body[data-shell-mode="inline"]:not(.map-mode-active) .map-resource-mini-viewer {
    transition-delay:0s,0s,.18s,0s;
}

.map-resource-mini-viewer[hidden] { display: none !important; }
.map-resource-mini-heading { display:flex; align-items:baseline; margin:0 1px 8px; }
.map-resource-mini-heading span { font-size:.66rem; font-weight:850; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; }
.map-resource-mini-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.map-resource-mini-item {
    position:relative;
    display:flex;
    min-width:0;
    height:48px;
    padding:5px 4px 7px;
    align-items:center;
    flex-direction:column;
    justify-content:center;
    gap:1px;
    color:#dce7f2;
    background:rgba(15,23,35,.86);
    border:2px solid rgba(100,116,139,.58);
    border-radius:9px;
    cursor:pointer;
    overflow:hidden;
    transition:background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.map-resource-mini-item.is-healthy { border-color:rgba(52,211,153,.78); }
.map-resource-mini-item.is-strained { border-color:rgba(251,191,36,.88); }
.map-resource-mini-item.is-shortfall { border-color:rgba(248,113,113,.9); }
.map-resource-mini-item.is-inactive { border-color:rgba(100,116,139,.52); opacity:.72; }
.map-resource-mini-item:hover,
.map-resource-mini-item:focus-visible { z-index:1; background:rgba(30,41,57,.98); transform:translateY(-1px); box-shadow:0 5px 14px rgba(0,0,0,.3); }
.map-resource-mini-item:focus-visible { outline:2px solid rgba(103,232,249,.8); outline-offset:2px; }
.map-resource-mini-symbol { display:flex; width:20px; height:20px; align-items:center; justify-content:center; color:color-mix(in srgb,var(--resource-color,#94a3b8) 74%,white); }
.map-resource-mini-symbol svg { width:19px; height:19px; }
.map-resource-mini-item strong { font-size:.52rem; line-height:1; font-variant-numeric:tabular-nums; }
.map-resource-mini-sources { position:absolute; right:0; bottom:0; left:0; display:flex; height:4px; background:rgba(100,116,139,.24); }
.map-resource-mini-sources i { display:block; min-width:2px; }
.map-resource-mini-sources .is-domestic { background:#34d399; }
.map-resource-mini-sources .is-contracted { background:#60a5fa; }
.map-resource-mini-sources .is-market { background:#fbbf24; }
.map-resource-mini-sources .is-empty { width:100%; background:#64748b; opacity:.45; }

.map-resource-stats-btn {
    align-items: center;
    display: flex;
    width: 230px;
    min-height: 42px;
    padding: 9px 12px;
    gap: 9px;
    color: #bff8df;
    text-align: left;
    background: linear-gradient(135deg, #12332f, #09251f);
    border: 1px solid rgba(52,211,153,.38);
    border-radius: 13px;
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.22);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.map-resource-stats-btn[hidden] { display: none !important; }
.map-resource-stats-btn:hover,
.map-resource-stats-btn:focus-visible {
    color: #ecfdf5;
    background: linear-gradient(135deg, #17463d, #0b3027);
    border-color: rgba(110,231,183,.68);
    transform: translateY(-1px);
}
.map-resource-stats-btn:focus-visible { outline: 2px solid rgba(103,232,249,.72); outline-offset: 2px; }
.map-resource-stats-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.map-resource-stats-btn span { flex: 1; font-size: .76rem; font-weight: 800; }
.map-resource-stats-btn .map-resource-stats-arrow { width: 14px; height: 14px; color: rgba(167,243,208,.68); }
.map-resource-mini-viewer .map-resource-stats-btn {
    box-sizing:border-box;
    width:100%;
    min-height:38px;
    margin-top:10px;
    box-shadow:none;
    border-radius:9px;
}

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,
body[data-shell-mode="compact"] .map-resource-mini-viewer,
body[data-shell-mode="mobile"] .map-resource-mini-viewer,
body[data-shell-mode="compact"] .map-resource-stats-btn,
body[data-shell-mode="mobile"] .map-resource-stats-btn {
    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;
    max-height: none;
    overflow: visible;
    position: static;
    scrollbar-gutter: auto;
    top: auto;
    bottom: auto;
    transform-origin: top center;
    width: 100%;
}

/* The bottom sheet is the mobile scroll owner. Desktop dropdowns use their own
   viewport bounds, but nesting those scrollers here lets expanded controls run
   under the fixed stats bar. Keep only long option lists independently bounded. */
body[data-shell-mode="compact"] .map-organization-list,
body[data-shell-mode="mobile"] .map-organization-list {
    max-height: none;
    overflow: visible;
}

body[data-shell-mode="compact"] .map-custom-select-menu,
body[data-shell-mode="mobile"] .map-custom-select-menu {
    inset: auto;
    margin-top: 6px;
    max-height: min(220px, 30dvh);
    position: static;
    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"] .month-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: 1 1 auto;
    width: min(calc(100% - .5rem), 32rem);
}

body[data-shell-mode="mobile"] .view-selection {
    width: 100%;
}

body[data-shell-mode="mobile"] .view-toggle {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    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: 0 !important;
}

body[data-shell-mode="mobile"] .view-toggle .btn .view-toggle-icon {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
}

body[data-shell-mode="mobile"] .view-toggle .btn .view-toggle-icon svg {
    width: 16px;
    height: 16px;
}

body[data-shell-mode="mobile"] .campaign-view-switch {
    top: 0;
    min-height: 34px;
    margin-top: 0;
    padding: .4rem .55rem;
    font-size: .68rem;
}

body[data-shell-mode="mobile"] .campaign-view-switch small { display: none; }

body[data-shell-mode="mobile"] .view-selection:has(.campaign-view-switch:not([hidden])) .view-toggle {
    flex-basis: calc(100% - 5rem);
    width: calc(100% - 5rem);
}

body[data-shell-mode="mobile"] .view-selection:has(.campaign-view-switch:not([hidden])) .campaign-view-switch {
    left: calc(100% - 2.5rem + .28rem);
}

@media (max-width: 680px) {
    body[data-shell-mode="compact"] .campaign-view-switch span,
    body[data-shell-mode="compact"] .campaign-view-switch small,
    body[data-shell-mode="mobile"] .campaign-view-switch span {
        display: none;
    }
}

@media (max-width: 380px) {
    body[data-shell-mode="mobile"] .view-toggle .view-toggle-icon { display: none; }
}

/* 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: calc(100dvh - var(--map-ui-top) - var(--stats-drawer-gap));
    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"] #endMonthBtn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem;
    justify-content: center;
}

body[data-shell-mode="mobile"] .time-pass-control {
    width: 100%;
    grid-template-rows: 18px 44px;
}
body[data-shell-mode="mobile"] .time-pass-cap {
    min-height: 18px;
    padding: 0;
}
body[data-shell-mode="mobile"] .time-pass-cap-label { display: none; }
body[data-shell-mode="mobile"] .time-pass-chevron {
    width: 12px;
    height: 12px;
}
body[data-shell-mode="mobile"] .time-pass-menu {
    right: 0;
    width: min(390px, calc(100vw - 12px));
}

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"] #endMonthBtn .end-month-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(3, minmax(0, 1fr));
    }

    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"] .month-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 .calendar-display.is-active,
.game-header .calendar-display[aria-expanded="true"] {
    background:linear-gradient(145deg,#263d53,#1d3247);
    border-color:rgba(105,184,239,.82);
    box-shadow:inset 0 0 0 1px rgba(105,184,239,.2), inset 0 1px rgba(255,255,255,.1), 0 11px 30px rgba(0,0,0,.34), 0 0 22px rgba(35,122,193,.14);
    transform:translateY(1px);
}
.game-header .calendar-display.is-active .cal-icon,
.game-header .calendar-display[aria-expanded="true"] .cal-icon {
    color:#76c8ff !important;
    filter:drop-shadow(0 0 7px rgba(59,158,225,.35));
}
.game-header .calendar-display.is-active .month-time-display,
.game-header .calendar-display[aria-expanded="true"] .month-time-display {
    background:rgba(5,13,22,.62);
    border-color:rgba(105,184,239,.22);
}
.game-header .month-time-display {
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
    border: 0;
    color: var(--text-secondary);
}
.game-header .calendar-time-bar {
    background: rgba(5,10,17,0.38);
}

.country-info { gap: 0.65rem; }
.country-identity-trigger .country-flag-small { margin-right: 0; }

.government-type-icon {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.35em;
    vertical-align: -0.08em;
    color: inherit;
    flex-shrink: 0;
}
.country-identity-wrap {
    position: relative;
    min-width: 0;
}

.country-identity-trigger {
    min-width: 0;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-btn);
    cursor: pointer;
}

.country-identity-trigger .country-flag-small .flag-artwork-frame {
    border: 1px solid color-mix(in srgb, var(--text-primary) 38%, transparent) !important;
    box-shadow:
        inset 0 1px color-mix(in srgb, var(--text-primary) 10%, transparent),
        0 5px 13px color-mix(in srgb, var(--bg-primary) 45%, transparent);
    transform: translateY(0);
    transition:
        transform 180ms cubic-bezier(.22, .8, .28, 1),
        border-color 180ms ease,
        box-shadow 200ms ease,
        filter 180ms ease;
}

.country-identity-trigger:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--primary-color) 72%, transparent);
    outline-offset: 6px;
}

.country-identity-trigger:hover .country-flag-small .flag-artwork-frame {
    border-color: color-mix(in srgb, var(--text-primary) 58%, transparent) !important;
    box-shadow:
        inset 0 1px color-mix(in srgb, var(--text-primary) 14%, transparent),
        0 8px 18px color-mix(in srgb, var(--bg-primary) 52%, transparent),
        0 0 13px color-mix(in srgb, var(--primary-color) 18%, transparent);
    filter: brightness(1.05);
    transform: translateY(-2px);
}

.country-identity-wrap.is-open .country-flag-small .flag-artwork-frame {
    border-color: color-mix(in srgb, var(--primary-color) 74%, var(--text-primary)) !important;
    box-shadow:
        inset 0 1px color-mix(in srgb, var(--text-primary) 16%, transparent),
        0 7px 18px color-mix(in srgb, var(--bg-primary) 54%, transparent),
        0 0 15px color-mix(in srgb, var(--primary-color) 26%, transparent);
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.country-display-name {
    display: block;
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.15;
}

.country-identity-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    z-index: 950;
    width: min(368px, calc(100vw - 1rem));
    max-height: calc(100dvh - 150px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--text-primary);
    background:
        radial-gradient(circle at 10% -8%, color-mix(in srgb, var(--primary-color) 17%, transparent), transparent 42%),
        color-mix(in srgb, var(--bg-primary) 97%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, var(--border-color));
    border-radius: 16px;
    box-shadow:
        var(--shadow-lg),
        inset 0 1px color-mix(in srgb, var(--text-primary) 5%, transparent);
    backdrop-filter: blur(22px) saturate(0.9);
    -webkit-backdrop-filter: blur(22px) saturate(0.9);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-9px) scale(.975);
    transform-origin: 32px 0;
    transition:
        opacity 170ms ease,
        transform 210ms cubic-bezier(.22, .8, .28, 1),
        box-shadow 210ms ease;
}

.country-identity-panel[hidden] { display: none; }

.country-identity-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.country-identity-panel.is-closing {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(.985);
}

.country-identity-panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--primary-color) 48%, transparent);
}


.country-identity-fact dt {
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.country-identity-facts {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding: 1rem 0.65rem 0.7rem;
}

.country-electoral-details {
    margin-top: 0.38rem;
    color: var(--text-muted);
}

.country-electoral-details summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-muted);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .025em;
    cursor: pointer;
    list-style: none;
}

.country-electoral-details summary::-webkit-details-marker { display: none; }
.country-electoral-details summary svg { width: 11px; height: 11px; transition: transform 180ms ease; }
.country-electoral-details[open] summary svg { transform: rotate(180deg); }
.country-electoral-details summary:focus { outline: none; }
.country-electoral-details summary:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--primary-color) 65%, transparent);
    outline-offset: 3px;
    border-radius: 2px;
}
.country-electoral-details p {
    margin: .55rem 0 .5rem;
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 400;
    line-height: 1.42;
    max-width: 29rem;
}
.country-electoral-parties { display: grid; gap: .24rem; padding-bottom: .1rem; }
.country-electoral-party {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-primary);
    font-size: .74rem;
    font-weight: 500;
}
.country-electoral-party-status { color: var(--text-secondary); }
.country-electoral-party-status[data-advantage="positive"] { color: var(--success-color); }
.country-electoral-party-status[data-advantage="negative"] { color: var(--warning-color); }

.electoral-system-picker { margin-top: 1rem; }
.electoral-system-description {
    min-height: 1.25rem;
    margin: .65rem .1rem 0;
    color: rgba(226, 232, 240, .62);
    font-size: .78rem;
    line-height: 1.45;
}

.government-subtype-leading-icon {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.country-identity-fact {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    padding: 0.68rem 0.72rem;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
}

/* The expandable content gets its own grid column so opening it cannot change
   the icon's vertical position. */
.country-identity-fact.country-identity-fact-electoral {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: flex-start;
}

.country-identity-fact-electoral .country-identity-fact-icon {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0.18rem;
}

.country-identity-fact-electoral .country-identity-fact-copy {
    grid-column: 2;
    grid-row: 1;
}

.country-identity-fact + .country-identity-fact {
    border-top-color: var(--border-color);
    border-radius: 0;
}

.country-identity-fact-icon {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: color-mix(in srgb, var(--primary-color) 66%, var(--text-primary));
    background: color-mix(in srgb, var(--primary-color) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-radius: var(--radius-btn);
}

.country-identity-fact-icon svg {
    width: 16px;
    height: 16px;
}

.country-identity-fact-copy {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.country-identity-fact dt,
.country-identity-fact dd { margin: 0; }

.country-identity-fact dd {
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
}
.country-identity-electoral-value > span { display: block; }
.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.72);
}
.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 {
    --stats-drawer-bg: #13202e;
    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-bar:not(.expanded) {
    overflow: visible;
}
.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;
}

.time-pass-control {
    --time-pass-menu-lift: 118px;
    --time-pass-collapsed-width: 164px;
    --time-pass-armed-width: 178px;
    --time-pass-expanded-width: min(390px, calc(100vw - 12px));
    position: relative;
    display: grid;
    width: var(--time-pass-collapsed-width);
    margin-inline-end: 0.5rem;
    grid-template-rows: 21px 38px;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.22));
    transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.time-pass-control.is-armed { width: var(--time-pass-armed-width); }
.time-pass-cap,
#endMonthBtn {
    width: 100%;
    appearance: none;
    border: 1px solid rgba(96,165,250,0.48);
    color: #cfe4ff;
    cursor: pointer;
}
.time-pass-cap {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-height: 21px;
    padding: 0.2rem 0.65rem;
    background: rgba(29,67,116,0.86);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    z-index: 31;
    transform: translateY(0);
    transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms ease, border-color 180ms ease, color 180ms ease, border-radius 180ms ease;
}
.time-pass-cap-label-short { display: none; }
.time-pass-cap:hover,
.time-pass-control.is-open .time-pass-cap {
    background: rgba(38,82,137,0.96);
    border-color: rgba(125,186,255,0.72);
    color: #fff;
}
.time-pass-control.is-open .time-pass-cap {
    width: var(--time-pass-expanded-width);
    border-bottom-color: rgba(96,165,250,0.28);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.28);
    transform: translateY(calc(-1 * var(--time-pass-menu-lift)));
}
.time-pass-chevron {
    width: 14px;
    height: 14px;
    transition: transform 160ms ease;
}
.time-pass-control.is-open .time-pass-chevron { transform: rotate(180deg); }
.time-pass-menu {
    position: absolute;
    right: 0;
    bottom: 38px;
    z-index: 30;
    width: var(--time-pass-expanded-width);
    padding: 0.75rem;
    background: rgba(12, 14, 20, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-top: 0;
    border-radius: 0 0 var(--radius-modal) var(--radius-modal);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    pointer-events: none;
    transform-origin: 100% 100%;
    transition: clip-path 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}
.time-pass-menu[hidden] { display: none; }
.time-pass-control.is-open .time-pass-menu {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    pointer-events: auto;
}
.time-pass-timeline {
    position: relative;
    height: 58px;
    margin: 0.25rem 0 0.65rem;
    padding: 0 0.15rem;
}
.time-pass-range {
    position: absolute;
    z-index: 3;
    top: -8px;
    left: calc(10% - 11px);
    width: calc(80% + 22px);
    height: 42px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    opacity: 0;
    cursor: grab;
    touch-action: none;
}
.time-pass-range:active { cursor: grabbing; }
.time-pass-range::-webkit-slider-runnable-track { height: 22px; background: transparent; }
.time-pass-range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    appearance: none;
    -webkit-appearance: none;
}
.time-pass-range::-moz-range-track { height: 22px; background: transparent; }
.time-pass-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
}
.time-pass-timeline-track {
    position: absolute;
    top: 10px;
    right: 10%;
    left: 10%;
    height: 4px;
    background: rgba(255, 255, 255, 0.11);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}
.time-pass-timeline-track i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #7dd3fc);
    border-radius: inherit;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.5);
    transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.time-pass-timeline[data-selected-index="1"] .time-pass-timeline-track i { width: 25%; }
.time-pass-timeline[data-selected-index="2"] .time-pass-timeline-track i { width: 50%; }
.time-pass-timeline[data-selected-index="3"] .time-pass-timeline-track i { width: 75%; }
.time-pass-timeline[data-selected-index="4"] .time-pass-timeline-track i { width: 100%; }
.time-pass-node-labels {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    pointer-events: none;
}
.time-pass-node {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.42rem;
    min-width: 0;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.time-pass-node-dot {
    display: block;
    width: 22px;
    height: 22px;
    background: #171c25;
    border: 3px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-pill);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.42);
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.time-pass-node strong {
    color: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}
.time-pass-node:hover,
.time-pass-node:focus-visible {
    color: var(--text-primary);
    outline: none;
}
.time-pass-node:hover .time-pass-node-dot,
.time-pass-node:focus-visible .time-pass-node-dot {
    border-color: #93c5fd;
    transform: scale(1.1);
}
.time-pass-node.is-selected {
    color: var(--text-primary);
}
.time-pass-node.is-selected .time-pass-node-dot {
    background: #60a5fa;
    border-color: #dbeafe;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18), 0 0 16px rgba(96, 165, 250, 0.58);
    transform: scale(1.08);
}
.time-pass-range:focus-visible ~ .time-pass-node-labels .time-pass-node.is-selected .time-pass-node-dot {
    outline: 2px solid #dbeafe;
    outline-offset: 4px;
}
.time-pass-resume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-btn);
}
.time-pass-resume span {
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.time-pass-resume strong {
    color: #bfdbfe;
    font-size: 0.78rem;
    font-weight: 700;
}
#endMonthBtn {
    grid-row: 2;
    min-width: 0;
    max-width: 100%;
    min-height: 38px;
    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: 0 0 12px 12px;
    color: #cfe4ff;
    box-shadow: inset 0 1px rgba(255,255,255,0.055);
    font-weight: 750;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
#endMonthBtn:hover {
    background: rgba(29,67,116,0.82);
    border-color: rgba(125,186,255,0.72);
    color: #fff;
    transform: translateY(-1px);
}
#endMonthBtn.month-capacity-ready,
#endMonthBtn.month-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);
}
#endMonthBtn.month-capacity-ready:hover,
#endMonthBtn.month-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);
}
.time-pass-cap:focus-visible,
#endMonthBtn:focus-visible {
    outline: 2px solid rgba(147,197,253,0.92);
    outline-offset: 2px;
}
.time-pass-control.is-busy .time-pass-cap,
.time-pass-control.is-busy #endMonthBtn,
.time-pass-cap:disabled {
    cursor: wait;
    opacity: 0.62;
}

body[data-shell-mode="compact"] .stats-quick-row {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
body[data-shell-mode="compact"] .time-pass-control {
    grid-template-rows: 20px 40px;
}
body[data-shell-mode="compact"] .time-pass-menu,
body[data-shell-mode="inline"] .time-pass-menu { bottom: 40px; }
body[data-shell-mode="compact"] .time-pass-cap {
    min-height: 20px;
}
body[data-shell-mode="compact"] #endMonthBtn {
    min-height: 40px;
}
body[data-shell-mode="compact"] #endMonthBtn .end-month-label {
    display: inline;
}
body[data-shell-mode="inline"] .stats-quick-row {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
body[data-shell-mode="inline"] .time-pass-control {
    grid-template-rows: 20px 40px;
}
body[data-shell-mode="inline"] .time-pass-cap {
    min-height: 20px;
}
body[data-shell-mode="inline"] #endMonthBtn {
    min-height: 40px;
}
body[data-shell-mode="inline"] #endMonthBtn .end-month-label {
    display: inline;
}
body[data-shell-mode="mobile"] .stats-bar {
    padding: 0;
}
body[data-shell-mode="mobile"] .stats-quick-row {
    padding-top: 3px;
    padding-bottom: 3px;
}
body[data-shell-mode="mobile"] .time-pass-control {
    grid-template-rows: 16px 42px;
}
body[data-shell-mode="mobile"] .time-pass-menu { bottom: 42px; }
body[data-shell-mode="mobile"] .time-pass-cap {
    min-height: 16px;
}
body[data-shell-mode="mobile"] #endMonthBtn {
    min-height: 42px;
}

/* Inline, compact, and mobile shells share the same bounded bottom-bar
   structure. The center stats lane absorbs available width; neither edge
   action is allowed to push over it. */
body[data-shell-mode="inline"] .stats-quick-row .row,
body[data-shell-mode="compact"] .stats-quick-row .row,
body[data-shell-mode="mobile"] .stats-quick-row .row {
    grid-template-columns: 48px minmax(0, 1fr) 76px;
    column-gap: 0.5rem;
}

body[data-shell-mode="inline"] .stats-quick-row .order-2,
body[data-shell-mode="compact"] .stats-quick-row .order-2,
body[data-shell-mode="mobile"] .stats-quick-row .order-2 {
    justify-self: stretch;
    min-width: 0;
    overflow: hidden;
}

body[data-shell-mode="inline"] .stats-quick-row .order-2 > .d-flex,
body[data-shell-mode="compact"] .stats-quick-row .order-2 > .d-flex,
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.25rem;
    width: 100%;
}

body[data-shell-mode="inline"] .stat-item,
body[data-shell-mode="compact"] .stat-item,
body[data-shell-mode="mobile"] .stat-item {
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
}

body[data-shell-mode="inline"] .stat-item .stat-label,
body[data-shell-mode="compact"] .stat-item .stat-label,
body[data-shell-mode="mobile"] .stat-item .stat-label,
body[data-shell-mode="inline"] .stats-expand-btn .stat-label,
body[data-shell-mode="compact"] .stats-expand-btn .stat-label,
body[data-shell-mode="inline"] .stats-expand-btn .chevron-icon,
body[data-shell-mode="compact"] .stats-expand-btn .chevron-icon,
body[data-shell-mode="inline"] #endMonthBtn .end-month-label,
body[data-shell-mode="compact"] #endMonthBtn .end-month-label {
    display: none;
}

body[data-shell-mode="inline"] .stat-value,
body[data-shell-mode="compact"] .stat-value,
body[data-shell-mode="mobile"] .stat-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-shell-mode="inline"] .stats-expand-btn,
body[data-shell-mode="compact"] .stats-expand-btn,
body[data-shell-mode="inline"] #endMonthBtn,
body[data-shell-mode="compact"] #endMonthBtn {
    width: 100%;
    min-width: 0;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

body[data-shell-mode="inline"] .time-pass-control,
body[data-shell-mode="compact"] .time-pass-control,
body[data-shell-mode="mobile"] .time-pass-control,
body[data-shell-mode="inline"] .time-pass-control.is-armed,
body[data-shell-mode="compact"] .time-pass-control.is-armed,
body[data-shell-mode="mobile"] .time-pass-control.is-armed {
    width: 76px;
    margin-inline-end: 0;
}

body[data-shell-mode="inline"] .time-pass-cap-label-long,
body[data-shell-mode="compact"] .time-pass-cap-label-long,
body[data-shell-mode="mobile"] .time-pass-cap-label-long {
    display: none;
}

body[data-shell-mode="inline"] .time-pass-cap-label-short,
body[data-shell-mode="compact"] .time-pass-cap-label-short,
body[data-shell-mode="mobile"] .time-pass-cap-label-short {
    display: inline;
}

body[data-shell-mode="inline"] .time-pass-cap,
body[data-shell-mode="compact"] .time-pass-cap,
body[data-shell-mode="mobile"] .time-pass-cap {
    padding-right: 0.45rem;
    padding-left: 0.45rem;
}

@media (max-width: 430px) {
    body[data-shell-mode="mobile"] .stats-quick-row .order-2 > .d-flex {
        grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
    }

    body[data-shell-mode="mobile"] .stat-item:nth-child(2) {
        display: none;
    }

    body[data-shell-mode="mobile"] .stat-item > svg {
        flex-basis: 15px;
        width: 15px;
        height: 15px;
    }

    body[data-shell-mode="mobile"] .stat-value {
        padding-right: 0.2em;
        padding-left: 0.2em;
        font-size: 0.78rem;
    }
}

@media (max-width: 350px) {
    body[data-shell-mode="mobile"] .stat-item > svg {
        display: none;
    }
}

.event-arc-timeline {
    position: relative;
    display: grid;
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding: 0.75rem 0.8rem;
    background: rgba(0,0,0,0.32);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
}
.event-arc-stage {
    display: grid;
    grid-template-columns: 78px minmax(0,1fr);
    gap: 0.65rem;
    align-items: start;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}
.event-arc-stage time {
    color: #93c5fd;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.event-arc-stage + .event-arc-stage {
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.md-interruption-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding: 0.8rem 0.9rem;
    color: var(--color-mid);
    background: var(--color-mid-bg);
    border: 1px solid var(--color-mid-border);
    border-radius: var(--radius-card);
    line-height: 1.45;
}
.md-interruption-banner svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 0.1rem;
}

/* 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="people"]   { --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; }
#peopleTab { --record-accent:#4ade80; }
#loreTab { --record-accent:#e8b86d; }
.sidebar-filter-toolbar { position:relative; z-index:2; display:flex; align-items:center; gap:.42rem; min-width:0; margin:-.15rem -.1rem .7rem; padding:.4rem .1rem; background:transparent; }
.sidebar-filter-nav { position:relative; z-index:2; display:flex; gap:.3rem; margin:-.15rem -.1rem .7rem; padding:.4rem .1rem; overflow-x:auto; scrollbar-width:none; background:transparent; }
.sidebar-filter-toolbar .sidebar-filter-nav { position:static; flex:1 1 auto; min-width:0; margin:0; padding:0; background:none; }
.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-archive-toggle { display:inline-flex; align-items:center; gap:.32rem; flex:0 0 auto; padding:.3rem .5rem; color:#8f9cad; background:rgba(255,255,255,.035); border:1px solid rgba(148,163,184,.14); border-radius:8px; font-size:.62rem; font-weight:760; white-space:nowrap; transition:color .15s ease,background .15s ease,border-color .15s ease; }
.sidebar-archive-toggle svg { width:13px; height:13px; }
.sidebar-archive-toggle:hover,.sidebar-archive-toggle:focus-visible { color:#fff; border-color:color-mix(in srgb,var(--record-accent) 36%,transparent); }
.sidebar-archive-toggle.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-toolbar--people { margin-bottom:.7rem; }
.sidebar-major-toggle { align-self:center; }
#peopleTab .person-filter-empty { min-height:210px; }
.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,#peopleList,#loreList { gap:.45rem; }
#dossierTab .dossier-item,#developmentsTab .dossier-item,#peopleTab .person-detail-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,#peopleTab .person-detail-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); }
.record-list-card--with-image {
    min-height:112px;
    position:relative;
    isolation:isolate;
    display:block;
    padding:0 !important;
    overflow:hidden;
}
.record-list-card-image {
    width:clamp(210px,48%,420px);
    min-height:100%;
}
.record-list-card-body {
    position:relative;
    z-index:1;
    min-width:0;
    min-height:112px;
    padding:.8rem clamp(112px,20%,180px) .8rem .9rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.record-list-card--with-image .dossier-item-header { align-items:flex-start; gap:.5rem; }
.record-list-card--with-image .dossier-title { min-width:0; line-height:1.22; }
.record-list-card--with-image .dossier-status {
    position:absolute;
    z-index:3;
    top:.75rem;
    right:.75rem;
    margin:0;
    border:1px solid color-mix(in srgb,currentColor 26%,transparent);
    box-shadow:0 3px 12px rgba(0,0,0,.42);
    backdrop-filter:blur(8px) saturate(.82);
    -webkit-backdrop-filter:blur(8px) saturate(.82);
    text-shadow:0 1px 8px rgba(0,0,0,.82);
}
.record-list-card--with-image .dossier-item-header { padding-right:4.75rem; }
.record-list-card--with-image .record-card-type-row { padding-right:4.75rem; }
.record-list-card--with-image .dossier-card-summary {
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}
.calendar-event-row--with-image {
    min-height:108px;
    border:0;
    border-bottom:1px solid rgba(112,159,199,.14);
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
.calendar-review-event-card.ev-card.record-list-card--with-image {
    min-height:108px;
    border:1px solid rgba(148,163,184,.18);
    border-radius:var(--radius-card);
    background:rgba(12,18,27,.2);
    box-shadow:none;
}
.calendar-review-event-card.ev-card.record-list-card--with-image .dossier-item-header {
    padding-right:118px;
}
.calendar-review-event-card.ev-card.record-list-card--with-image .dossier-header-actions {
    position:absolute;
    z-index:4;
    top:.72rem;
    right:.72rem;
    justify-content:flex-end;
}
.calendar-review-event-card.ev-card.record-list-card--with-image .map-panel-badge {
    margin:0;
    padding:2px 8px;
    font-size:.54rem;
}
.calendar-review-event-card .map-panel-badge.ev-sev-opportunity { border-color:#4ade80; color:#bbf7d0; background:rgba(5,46,22,.94); }
.calendar-review-event-card .map-panel-badge.ev-sev-minor { border-color:rgba(148,163,184,.68); color:#e2e8f0; background:rgba(30,41,59,.94); }
.calendar-review-event-card .map-panel-badge.ev-sev-moderate { border-color:#facc15; color:#fef08a; background:rgba(66,48,4,.94); }
.calendar-review-event-card .map-panel-badge.ev-sev-major { border-color:#f97316; color:#fed7aa; background:rgba(67,20,7,.94); }
.calendar-review-event-card.ev-card.record-list-card--with-image::before {
    position:absolute;
    z-index:3;
    top:10px;
    bottom:10px;
    left:0;
    width:1px;
    background:rgba(148,163,184,.42);
    border-radius:2px;
    box-shadow:none;
    content:'';
}
.calendar-event-row--with-image .record-list-card-image,
.calendar-review-event-card.ev-card.record-list-card--with-image .record-list-card-image {
    width:clamp(190px,46%,310px);
}
.calendar-event-row--with-image .record-list-card-body,
.calendar-review-event-card.ev-card.record-list-card--with-image .record-list-card-body {
    min-height:108px;
    padding:.72rem clamp(108px,22%,154px) .72rem .9rem;
}
.calendar-event-row--with-image .calendar-event-marker {
    position:absolute;
    z-index:3;
    top:18px;
    left:2px;
}
.calendar-event-row--with-image .record-list-card-body { padding-left:1.55rem; }
.calendar-event-row--with-image:hover {
    border-bottom-color:rgba(112,159,199,.28);
    background:transparent;
    transform:none;
}
.calendar-review-event-card.ev-card.record-list-card--with-image:hover {
    border-color:rgba(148,163,184,.28);
    background:rgba(20,29,41,.3);
}
.calendar-review-event-card.ev-card.is-past-month {
    border-color:rgba(148,163,184,.18);
    background:rgba(12,18,27,.2);
    box-shadow:none;
}
.calendar-review-event-card.ev-card.is-past-month::before {
    width:1px;
    background:rgba(148,163,184,.42);
    box-shadow:none;
}
.calendar-review-event-card.ev-card.is-past-month:hover {
    border-color:rgba(148,163,184,.28);
    background:rgba(20,29,41,.3);
}
.calendar-review-event-card.ev-card.is-current-month {
    border-color:color-mix(in srgb,var(--primary-color) 52%,transparent);
    background:transparent;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary-color) 12%,transparent);
}
.calendar-review-event-card.ev-card.is-current-month::before {
    width:2px;
    background:var(--primary-color);
    box-shadow:0 0 9px color-mix(in srgb,var(--primary-color) 44%,transparent);
}
.calendar-review-event-card.ev-card.is-current-month:hover {
    border-color:color-mix(in srgb,var(--primary-color) 68%,transparent);
    background:color-mix(in srgb,var(--primary-color) 4%,transparent);
}
.calendar-event-row--with-image h4 { margin-top:7px; }
@media (max-width:560px) {
    .record-list-card-image { width:min(74%,250px); }
    .record-list-card-body { min-height:104px; padding:.7rem 96px .7rem .72rem; }
    .record-list-card--with-image .dossier-status { top:.65rem; right:.65rem; }
    .calendar-event-row--with-image .record-list-card-image,
    .calendar-review-event-card.ev-card.record-list-card--with-image .record-list-card-image { width:min(70%,230px); }
    .calendar-event-row--with-image .record-list-card-body,
    .calendar-review-event-card.ev-card.record-list-card--with-image .record-list-card-body { padding:.68rem 86px .68rem .72rem; }
    .calendar-event-row--with-image .record-list-card-body { padding-left:1.4rem; }
    .calendar-review-event-card.ev-card.record-list-card--with-image .dossier-item-header { padding-right:104px; }
    .calendar-review-event-card.ev-card.record-list-card--with-image .dossier-header-actions { top:.68rem; right:.68rem; }
}
.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,#peopleTab .person-detail-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); }
#peopleTab .person-group-heading { display:none; }
#peopleTab .person-group { margin:0; }
#peopleTab .person-detail-portrait-wrap {
    position:relative;
    width:clamp(132px,30%,210px);
    height:auto;
    min-height:0;
    align-self:stretch;
    flex:0 0 clamp(132px,30%,210px);
    border:0;
    border-radius:0;
    box-shadow:none;
}
#peopleTab .person-detail-portrait {
    position:absolute;
    inset:0;
}
#peopleTab .person-detail-item-person {
    align-items:stretch;
    gap:0;
    padding:0;
    overflow:hidden;
}
#peopleTab .person-detail-item-person .person-detail-body { padding:1rem 1.05rem; }
#peopleTab .person-supporting-person-card {
    align-items: stretch;
    gap: 0;
    min-height: 94px;
    padding: 0;
    overflow: hidden;
}
#peopleTab .person-supporting-person-card::before { display: none; }
#peopleTab .person-supporting-person-card .supporting-portrait-wrap {
    position: relative;
    width: clamp(96px, 24%, 138px);
    flex: 0 0 clamp(96px, 24%, 138px);
    align-self: stretch;
    background: #0a111a;
}
#peopleTab .person-supporting-person-card .supporting-portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
#peopleTab .person-supporting-person-card .person-detail-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .8rem .9rem;
}
#peopleTab .person-detail-name { font-size:1rem; }
#peopleTab .person-detail-affiliation { max-width:none; margin:-.05rem 0 .25rem; text-align:left; }
#peopleTab .person-detail-type-icon { display:inline-grid; place-items:center; width:24px; height:24px; color:#86efac; background:rgba(74,222,128,.1); border-radius:7px; }
#peopleTab .person-detail-type-icon svg { width:13px; height:13px; }
@media (max-width:991.98px) {
    #peopleTab .person-detail-portrait-wrap {
        width:clamp(118px,26%,160px);
        min-height:0;
        flex-basis:clamp(118px,26%,160px);
    }
    #peopleTab .person-detail-item-person .person-detail-body { padding:.85rem .9rem; }
}
@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; }

/* Quiet Story history ruler: present when useful, visually recessive until approached. */
#dashboardStory .story-well { position:relative; }

.story-beat-navigator {
    position:absolute;
    z-index:8;
    right:0;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:1px;
    padding:0;
    border:0;
    background:transparent;
}

.story-beat-navigator[hidden] { display:none !important; }

.story-beat-rail {
    --story-beat-step:18px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    width:28px;
    max-height:calc(var(--story-beat-step) * 10);
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
}

.story-beat-rail::-webkit-scrollbar { display:none; }

.story-beat-mark,
.story-beat-step {
    appearance:none;
    border:0;
    color:rgba(205,217,231,.4);
    background:transparent;
    cursor:pointer;
}

.story-beat-mark {
    flex:0 0 var(--story-beat-step);
    width:28px;
    height:var(--story-beat-step);
    display:grid;
    place-items:center end;
    padding:0;
}

.story-beat-mark > span {
    display:block;
    width:10px;
    height:1.5px;
    border-radius:99px;
    background:currentColor;
    transition:width .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.story-beat-mark:nth-child(3n + 2) > span { width:13px; }
.story-beat-mark:nth-child(4n) > span { width:8px; }
.story-beat-mark:hover,
.story-beat-mark:focus-visible { color:#dbe9f8; outline:none; }
.story-beat-mark:hover > span,
.story-beat-mark:focus-visible > span { width:18px; }
.story-beat-mark.is-active { color:#69b5ff; }
.story-beat-mark.is-active > span {
    width:23px;
    height:2px;
    box-shadow:0 0 7px rgba(75,161,255,.36);
}

.story-beat-step {
    width:27px;
    height:25px;
    display:grid;
    place-items:center;
    padding:0 0 2px;
    border-radius:50%;
    font-size:20px;
    font-weight:700;
    line-height:1;
    opacity:0;
    pointer-events:none;
    transform:scale(.88);
    transition:opacity .14s ease, transform .14s ease, color .14s ease;
}

.story-beat-navigator:hover .story-beat-step,
.story-beat-step:focus-visible {
    opacity:1;
    pointer-events:auto;
    transform:scale(1);
}

.story-beat-step:hover,
.story-beat-step:focus-visible {
    color:#fff;
    outline:none;
}

.story-beat-navigator:hover .story-beat-step:disabled { opacity:.22; cursor:default; }

.story-beat-tooltip {
    position:absolute;
    right:43px;
    top:50%;
    transform:translateY(-50%) translateX(4px);
    width:max-content;
    max-width:min(320px, 42vw);
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:8px;
    color:#eef6ff;
    background:rgba(43,46,51,.98);
    box-shadow:0 10px 25px rgba(0,0,0,.3);
    font-size:.78rem;
    font-weight:700;
    line-height:1.3;
    pointer-events:none;
    opacity:0;
    transition:opacity .12s ease, transform .12s ease;
}

.story-beat-tooltip[aria-hidden="false"] {
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

@media (max-width: 767.98px) {
    .story-beat-navigator {
        right:0;
        padding:0;
        background:transparent;
    }
    .story-beat-rail { width:24px; }
    .story-beat-mark { width:24px; }
    .story-beat-tooltip { display:none; }
}

/* 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:placeholder-shown { overflow-y:hidden; }
#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,
#dashboardStory .story-composer--blocked {
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
}
#dashboardStory .story-composer--responding .story-composer-meta,
#dashboardStory .story-composer--blocked .story-composer-meta {
    max-height:0;
    margin:0;
    overflow:hidden;
    opacity:0;
}
#dashboardStory .story-composer--responding .story-input-row,
#dashboardStory .story-composer--blocked .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--blocked .story-input-row {
    border-color:rgba(106,132,166,.3);
    background:linear-gradient(145deg,rgba(18,30,49,.98),rgba(6,13,24,.99));
    box-shadow:0 8px 24px rgba(0,0,0,.25);
}
#dashboardStory .story-composer--responding .story-input-row::before {
    opacity:1;
    animation:storyComposerBorderTravel 3.2s linear infinite;
}
#dashboardStory .story-composer--blocked .story-input-row::before {
    opacity:0;
    animation:none;
}
#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--blocked .story-input-row::after {
    background:linear-gradient(145deg,rgba(13,25,42,.99),rgba(5,12,23,.99));
}
#dashboardStory .story-composer--responding textarea,
#dashboardStory .story-composer--blocked textarea {
    opacity:0 !important;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(5px);
}
#dashboardStory .story-composer--responding textarea::placeholder,
#dashboardStory .story-composer--blocked textarea::placeholder {
    color:transparent !important;
    opacity:0;
}
#dashboardStory .story-composer--responding .story-send-btn,
#dashboardStory .story-composer--blocked .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,
#dashboardStory .story-composer--blocked .story-composer-response-status {
    opacity:1;
    transform:translateY(0);
}
#dashboardStory .story-composer--blocked .story-composer-response-status {
    color:rgba(201,221,246,.72);
}

@keyframes storyComposerBorderTravel {
    to { transform:rotate(360deg); }
}
@keyframes storyComposerMonthReady {
    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--month-ready .story-input-row { animation:storyComposerMonthReady .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; }
}


/* 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;
        margin-top:calc(-1 * var(--tab-bar-h));
        padding-top:0;
    }

    #dashboardView > .row > .col-lg-8 {
        width:100%;
        height:100%;
        min-height:0;
        overflow:hidden;
    }

    .mobile-records-launcher {
        position:absolute;
        top:var(--tab-bar-h);
        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); }
}


/* 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,
    .campaign-view-switch,
    .ip-pill,
    .calendar-display,
    .map-mobile-controls-toggle,
    .map-layer-tab,
    .map-layers-btn,
    .map-layer-row,
    .map-custom-select-toggle,
    .map-custom-select-option,
    .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,
    .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,
    .campaign-view-switch:hover,
    .ip-pill:hover,
    .settings-btn:hover,
    .stats-expand-btn:hover,
    #endMonthBtn: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;
}

/* ── Formal campaign workspace ─────────────────────────────────────────── */
#campaignWorkspace[hidden],
#parliamentView .parl-mobile-pane-nav[hidden] { display: none !important; }

#campaignView {
    --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;
}

.campaign-view-wrap {
    flex: 1;
    display: flex;
    min-height: 0;
    padding: 0 .65rem;
    overflow: hidden;
}

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

#campaignView .parl-catalogue-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#campaignView .parl-record-nav {
    flex: 0 0 auto;
    margin-bottom: .65rem;
}

#campaignView .parl-legislation-list {
    flex: 1;
    min-height: 0;
    align-content: start;
    grid-auto-rows: max-content;
    padding: .65rem;
    overflow-y: auto;
    background: var(--workspace-well-bg);
    border: 1px solid var(--workspace-inner-border);
    border-radius: 12px;
}

#campaignView .parl-legislation-card { min-height: 108px; }

.campaign-workspace {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    overflow: hidden;
}
.campaign-grid {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(320px, .9fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--workspace-gap);
    height: 100%;
    min-height: 0;
}
#campaignView .campaign-poll-card,
#campaignView .campaign-platform-card { padding: .75rem; }
.campaign-operations-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.campaign-poll-modal h2 { margin: .12rem 0 .22rem; color: var(--text-primary); font-size: 1.3rem; }
.campaign-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .7rem;
}
.campaign-section-heading > div > span { display: block; color: var(--text-primary); font-size: .86rem; font-weight: 700; }
.campaign-section-heading small { display: block; margin-top: .08rem; color: var(--text-muted); font-size: .65rem; }
#campaignView .parl-record-nav.campaign-record-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#campaignView .parl-legislation-card.campaign-operation-card:disabled { cursor: default; opacity: .78; transform: none; }
.campaign-operation-create { margin-top: .55rem; }
.campaign-operation-create .parl-new-legislation-card { margin-top: 0; }
.campaign-operation-routes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .42rem;
    margin-top: .42rem;
}
#campaignView .parl-introduce-btn.campaign-operation-route {
    justify-content: flex-start;
    min-width: 0;
    min-height: 45px;
    padding: .4rem .52rem;
    text-align: left;
}
#campaignView .parl-introduce-btn.campaign-operation-route:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.campaign-operation-route > span { min-width: 0; }
.campaign-operation-route strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-operation-route strong { color: inherit; font-size: .68rem; }

.campaign-side-column {
    display: grid;
    grid-template-rows: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: var(--workspace-gap);
    min-height: 0;
}
.campaign-poll-card { min-height: 0; overflow: auto; scrollbar-width: thin; }
.campaign-platform-card { min-height: 0; overflow: hidden; }
.campaign-detail-btn {
    padding: .3rem .55rem;
    color: var(--text-secondary);
    background: var(--color-neutral-bg);
    border: 1px solid var(--color-neutral-border);
    border-radius: var(--radius-btn);
    font-size: .68rem;
}
.campaign-poll-summary {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: .75rem;
    margin-bottom: .35rem;
    padding: .35rem .5rem;
    background: var(--color-mid-bg);
    border: 1px solid var(--color-mid-border);
    border-radius: var(--radius-card);
}
.campaign-poll-summary strong { color: var(--color-mid); font-size: .86rem; }
.campaign-poll-list { display: grid; gap: .22rem; }
.campaign-poll-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px auto auto;
    align-items: center;
    gap: .6rem;
    min-height: 27px;
    padding: .22rem .4rem;
    background: var(--workspace-well-bg);
    border: 1px solid var(--workspace-inner-border);
    border-radius: var(--radius-btn);
    font-size: .69rem;
}
.campaign-poll-row.is-player { border-color: color-mix(in srgb, var(--primary-color) 42%, transparent); }
.campaign-party-name { display: flex; align-items: center; gap: .42rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-party-name i { flex: 0 0 auto; width: 8px; height: 8px; background: var(--party-color); border-radius: var(--radius-tag); }
.campaign-party-movement { color: var(--text-muted); font-size: .63rem; font-weight: 700; text-align: right; }
.campaign-party-movement.is-up { color: var(--color-positive); }
.campaign-party-movement.is-down { color: var(--color-negative); }
.campaign-party-share { color: var(--text-primary); font-weight: 700; }
.campaign-party-share small { color: var(--text-muted); font-weight: 500; }
.campaign-party-seats { color: var(--text-secondary); }
.campaign-platform-card { display: flex; flex-direction: column; }
.campaign-platform-card .campaign-section-heading { flex: 0 0 auto; margin-bottom: .45rem; }
.campaign-platform-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 20px;
    padding: .08rem .38rem;
    color: var(--color-mid);
    background: var(--color-mid-bg);
    border: 1px solid var(--color-mid-border);
    border-radius: var(--radius-pill);
    font-size: .62rem;
    font-weight: 700;
}
.campaign-platform-list {
    flex: 1;
    min-height: 0;
    display: grid;
    align-content: start;
    gap: .4rem;
    overflow: auto;
    scrollbar-width: thin;
}
.campaign-platform-promise {
    grid-template-columns: 25px minmax(0, 1fr);
    padding: .52rem .58rem;
}
.campaign-platform-promise-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .55rem;
}
.campaign-platform-promise-heading strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.campaign-platform-promise-heading small {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: .6rem;
}
.campaign-platform-add {
    flex: 0 0 auto;
    min-height: 42px;
    margin-top: .45rem;
}
.campaign-mobile-pane-nav { display: none; }

.campaign-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(8px);
}
#campaignView .campaign-poll-modal,
.campaign-poll-modal {
    width: min(620px, 100%);
    max-height: min(720px, 90vh);
    overflow: auto;
    padding: 1rem;
    background: rgba(12, 14, 20, .96);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-lg);
}
.campaign-poll-modal header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.campaign-poll-modal header button { display: grid; place-items: center; width: 34px; height: 34px; color: var(--text-secondary); background: var(--color-neutral-bg); border: 1px solid var(--color-neutral-border); border-radius: var(--radius-btn); }
.campaign-poll-modal header button svg { width: 16px; height: 16px; }
.campaign-poll-modal > p,
.campaign-poll-modal footer { color: var(--text-secondary); font-size: .78rem; }
.campaign-poll-modal footer { margin-top: .8rem; padding-top: .7rem; color: var(--text-muted); border-top: 1px solid var(--border-color); }
.campaign-poll-list.is-detailed .campaign-poll-row { min-height: 42px; }

@media (max-width: 760px) {
    .campaign-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;
    }
    .campaign-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;
    }
    .campaign-mobile-pane-nav button.active {
        color: #f8fbff;
        background: rgba(59,130,246,.16);
        box-shadow: inset 0 -2px #60a5fa;
    }
    .campaign-grid { display: block; height: auto; flex: 1; min-height: 0; overflow: hidden; }
    .campaign-operations-card,
    .campaign-side-column { height: 100%; min-height: 0; }
    #campaignView .campaign-workspace[data-campaign-pane="operations"] .campaign-side-column,
    #campaignView .campaign-workspace[data-campaign-pane="tracking"] .campaign-operations-card { display: none; }
}

@media (max-width: 575.98px) {
    .campaign-operation-routes { grid-template-columns: 1fr; }
    .campaign-platform-promise-heading { align-items: flex-start; flex-direction: column; gap: .12rem; }
    .campaign-poll-row { grid-template-columns: minmax(0, 1fr) 24px auto; }
    .campaign-party-seats { display: none; }
}

.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-legislation { max-width: min(255px, 28vw); }
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 {
    position: relative;
    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);
    overflow: hidden;
    isolation: isolate;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.parl-legislation-card-main,
.parl-legislation-card-side { position: relative; z-index: 2; }
.parl-legislation-card-art {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    pointer-events: none;
}
.parl-legislation-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .94;
    filter: saturate(1.02) contrast(1.02) brightness(.98);
    transition: opacity 160ms ease, transform 220ms ease;
}
.parl-legislation-card-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8,14,22,.9) 0%, rgba(8,14,22,.86) 34%, rgba(8,14,22,.64) 58%, rgba(8,14,22,.08) 100%),
        linear-gradient(0deg, rgba(8,14,22,.24), transparent);
}
.parl-legislation-card:hover .parl-legislation-card-art img { opacity: 1; transform: scale(1.015); }
.parl-legislation-card.has-hero .parl-legislation-card-main { padding-right: clamp(80px, 13vw, 210px); }
.parl-legislation-card.has-hero .parl-legislation-card-side { text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.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; width: 100%; 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.is-actionable { border: 1px dashed rgba(148,163,184,.16); }
.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; }
#parliamentView .parl-seat-map .parl-party-glow {
    pointer-events: none;
    opacity: 0;
    filter:
        drop-shadow(0 0 3px color-mix(in srgb, var(--party-glow-color) 92%, transparent))
        drop-shadow(0 0 7px color-mix(in srgb, var(--party-glow-color) 64%, transparent));
    transition: opacity 260ms cubic-bezier(.2,.7,.2,1);
    will-change: opacity;
}
#parliamentView .parl-seat-map .parl-party-identity-glow {
    pointer-events: none;
    opacity: .38;
    filter:
        drop-shadow(0 0 3px color-mix(in srgb, var(--primary-color) 92%, transparent))
        drop-shadow(0 0 7px color-mix(in srgb, var(--primary-color) 64%, transparent));
}
#parliamentView .parl-seat-map .parl-party-glow.is-hovered { opacity: 1; }
#parliamentView .parl-seat-map .parl-party-glow.is-selected { opacity: 1; }
#parliamentView .parl-seat-map .parl-party-hit-region:focus { outline: none; }

.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-legislation-card.has-hero .parl-legislation-card-main { padding-right: 18%; }
    .parl-seat-key { grid-template-columns: 1fr; }
    .parl-crumb { max-width: 62vw; }
}

@media (max-width: 430px) {
    .parl-focus-panel-art { height: 100%; }
    .parl-legislation-card-art { opacity: .78; }
    .parl-legislation-card.has-hero .parl-legislation-card-main { padding-right: 0; }
    .parl-legislation-card-summary { max-width: 78%; }
}


/* 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: 28px;
}

#parliamentView .parl-back-btn {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 28px;
    padding: .28rem .12rem;
    color: rgba(203,213,225,.68);
    background: transparent;
    border: 0;
    font-size: .71rem;
    font-weight: 740;
    transition: color .15s ease, transform .15s ease;
}
#parliamentView .parl-back-btn:hover { color: #f8fafc; transform: translateX(-2px); }
#parliamentView .parl-back-btn svg { width: 14px; height: 14px; }

#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 #parlDetailView > div {
    animation: parlBillDetailIn 220ms cubic-bezier(.2,.75,.25,1) both;
}

#parliamentView .parl-left-col.is-legislation-leaving {
    pointer-events: none;
    animation: parlBillColumnOut 100ms ease-in both;
}

#parliamentView .parl-left-col.is-legislation-entering {
    animation: parlBillColumnIn 120ms ease-out both;
}

#parliamentView.is-returning-to-browser .parl-legislation-list {
    animation: none;
}

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

@keyframes parliament-chamber-chip-focus {
    0% { border-color:rgba(96,165,250,.9); box-shadow:0 0 0 2px rgba(96,165,250,.5), 0 0 28px rgba(59,130,246,.28); }
    55% { border-color:rgba(96,165,250,.58); box-shadow:0 0 0 1px rgba(96,165,250,.28), 0 0 20px rgba(59,130,246,.16); }
    100% { border-color:var(--workspace-border); box-shadow:0 12px 30px rgba(0,0,0,.24); }
}

#parliamentView .parl-chamber-card.is-seat-chip-focus {
    animation:parliament-chamber-chip-focus 2.4s ease-out both;
}

#parliamentView .parl-catalogue-card,
#parliamentView .parl-focus-details-card {
    display: flex;
    flex-direction: column;
}

#parliamentView .parl-record-nav,
#parliamentView .parl-focus-details-hd,
#parliamentView .parl-detail-mode-nav,
#parliamentView .parl-focus-actions-row {
    flex: 0 0 auto;
}

#parliamentView .parl-record-nav { margin-bottom: .65rem; }

#parliamentView .parl-legislation-list {
    flex: 1;
    min-height: 0;
    align-content: start;
    grid-auto-rows: max-content;
    padding: .45rem;
    overflow-y: auto;
    background: var(--workspace-well-bg);
    border: 1px solid var(--workspace-inner-border);
    border-radius: 12px;
}

#parliamentView .parl-legislation-list.is-agenda {
    display: block;
    padding: .65rem;
}

.parl-business-section + .parl-business-section { margin-top: 1rem; }
.parl-business-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 .12rem .48rem;
    color: rgba(203,213,225,.5);
    font-size: .64rem;
    font-weight: 820;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.parl-business-heading strong {
    padding: .16rem .42rem;
    color: #93c5fd;
    background: rgba(59,130,246,.1);
    border: 1px solid rgba(96,165,250,.2);
    border-radius: 999px;
    font-size: .6rem;
    letter-spacing: .02em;
}
.parl-business-cards { display: grid; gap: .5rem; }
.parl-business-empty {
    --empty-accent: #60a5fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 1rem;
    text-align: center;
    border: 0;
    border-radius: 10px;
    color: rgba(203,213,225,.56);
}
.parl-business-empty.is-actionable { border: 1px dashed rgba(148,163,184,.16); }
.parl-business-empty strong { color: #f1f5f9; font-size: .96rem; font-weight: 780; }
.parl-business-empty > span:last-child { max-width: 330px; margin-top: .38rem; color: rgba(203,213,225,.5); font-size: .74rem; line-height: 1.48; }

#parliamentView .parl-legislation-card { min-height: 108px; }
#parliamentView .parl-legislation-card.is-queued {
    background: rgba(255,255,255,.016);
    border-color: rgba(148,163,184,.085);
}
#parliamentView .parl-legislation-card.is-queued:not(:hover) { opacity: .76; }
.parl-sponsor-chip {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: .18rem .45rem;
    color: color-mix(in srgb, var(--sponsor-color) 62%, white);
    background: color-mix(in srgb, var(--sponsor-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--sponsor-color) 38%, transparent);
    border-radius: 999px;
    font-size: .59rem;
    font-weight: 840;
    letter-spacing: .055em;
}
.parl-sponsor-chip.is-player { color: #dbeafe; }
.parl-new-legislation-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    width: 100%;
    min-height: 52px;
    margin-top: 1rem;
    color: #bfdbfe;
    background: rgba(59,130,246,.055);
    border: 1px dashed rgba(96,165,250,.38);
    border-radius: 10px;
    font-size: .76rem;
    font-weight: 780;
    transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.parl-new-legislation-card:hover {
    color: #fff;
    background: rgba(59,130,246,.13);
    border-color: rgba(96,165,250,.7);
    transform: translateY(-1px);
}
.parl-new-legislation-card svg { width: 15px; height: 15px; }

#parliamentView .parl-focus-body {
    flex: 1;
    min-height: 0;
    display: flex;
}

.parl-detail-mode-nav {
    display: inline-flex;
    align-self: flex-start;
    padding: .22rem;
    background: rgba(2,6,15,.46);
    border: 1px solid var(--workspace-inner-border);
    border-radius: 10px;
}
.parl-detail-mode-tab {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 34px;
    padding: .38rem .68rem;
    color: rgba(203,213,225,.52);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: .69rem;
    font-weight: 760;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.parl-detail-mode-tab svg { width: 14px; height: 14px; }
.parl-detail-mode-tab strong {
    min-width: 18px;
    padding: .08rem .28rem;
    color: rgba(203,213,225,.5);
    background: rgba(148,163,184,.09);
    border-radius: 999px;
    font-size: .58rem;
    text-align: center;
}
.parl-detail-mode-tab:hover { color: #e2e8f0; }
.parl-detail-mode-tab.active {
    color: #dbeafe;
    background: rgba(59,130,246,.14);
    border-color: rgba(96,165,250,.24);
    box-shadow: inset 0 -2px #60a5fa;
}
.parl-detail-mode-tab.active strong { color: #bfdbfe; background: rgba(59,130,246,.17); }

#parliamentView .parl-detail-pane {
    flex: 1;
    min-width: 0;
    min-height: 0;
}
#parliamentView .parl-detail-pane:not(.active) { display: none; }
#parliamentView .parl-detail-pane.active { display: flex; }

.parl-overview-sheet {
    flex: 1;
    min-height: 0;
    padding: 1rem 1.05rem;
    overflow-y: auto;
    background: var(--workspace-well-bg);
    border: 1px solid var(--workspace-inner-border);
    border-radius: 12px;
}
.parl-overview-summary {
    max-width: 900px;
    margin-top: .85rem;
    color: rgba(226,232,240,.78);
    font-size: .84rem;
    line-height: 1.55;
}
.parl-overview-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .38rem;
    margin-top: .72rem;
}
.parl-overview-meta span { color: rgba(148,163,184,.3); }
.parl-overview-sheet .parl-focus-section { margin-top: 1rem; }

#parliamentView .parl-focus-well {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(170px, 195px) minmax(0, 1fr);
    background: var(--workspace-well-bg);
    border: 1px solid var(--workspace-inner-border);
    border-radius: 12px;
    box-shadow: none;
}

#parliamentView .parl-well-inner {
    min-height: 0;
    min-width: 0;
    max-height: none;
    padding: .8rem;
    overflow-y: auto;
    overflow-x: hidden;
}

#parliamentView .parl-focus-well:not(:has(.parl-article-index)) { grid-template-columns: 1fr; }
.parl-article-index {
    min-width: 0;
    padding: .55rem .45rem;
    overflow-y: auto;
    border-right: 1px solid var(--workspace-inner-border);
    background: rgba(2,6,15,.22);
}
.parl-article-index-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .52rem .58rem;
    text-align: left;
    color: rgba(203,213,225,.48);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.parl-article-index-item + .parl-article-index-item { margin-top: .2rem; }
.parl-article-index-item .parl-article-index-number {
    color: rgba(147, 197, 253, 0.72);
    font-size: 1.55rem;
    font-weight: 820;
    line-height: 1;
    letter-spacing: -0.07em;
    text-align: center;
}
.parl-article-index-item strong {
    overflow: hidden;
    display: -webkit-box;
    color: rgba(226, 232, 240, 0.72);
    font-size: .72rem;
    font-weight: 720;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.parl-article-index-item:hover { color: #e2e8f0; background: rgba(148,163,184,.06); }
.parl-article-index-item.active {
    color: #dbeafe;
    background: rgba(59,130,246,.12);
    border-color: rgba(96,165,250,.22);
    box-shadow: inset 2px 0 #60a5fa;
}
#parliamentView .parl-article-row { scroll-margin-top: .6rem; }
#parliamentView .parl-article-row {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 1rem;
    border-color: rgba(148, 163, 184, 0.14);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(20, 31, 46, 0.66), rgba(7, 13, 22, 0.72));
    box-shadow: inset 3px 0 rgba(96, 165, 250, 0.52);
}
.parl-article-header {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}
.parl-article-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 0.9rem;
    color: #93c5fd;
    border-right: 1px solid rgba(96, 165, 250, 0.2);
}
.parl-article-number span {
    font-size: 0.5rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.62;
}
.parl-article-number strong {
    margin-top: 0.08rem;
    font-size: 1.9rem;
    font-weight: 820;
    line-height: 1;
    letter-spacing: -0.06em;
}
.parl-article-header h3 {
    margin: 0;
    color: #f1f5f9;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.24;
    letter-spacing: -0.012em;
}
.parl-article-content {
    min-width: 0;
    margin-top: 0.7rem;
}
#parliamentView .parl-article-detail {
    color: rgba(226, 232, 240, 0.74);
    font-size: 0.84rem;
    line-height: 1.58;
}
.parl-article-mechanics {
    min-width: 0;
    margin-top: 0.8rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.parl-article-mechanics-label {
    display: block;
    margin-bottom: 0.46rem;
    color: rgba(148, 163, 184, 0.58);
    font-size: 0.56rem;
    font-weight: 820;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
#parliamentView .parl-article-effects {
    display: grid;
    min-width: 0;
    gap: .38rem;
    margin-top: .58rem;
}
#parliamentView .parl-article-effects .parl-effect-chip-row--national > .national-progress-card { flex: 1 1 230px; }

#parliamentView .parl-amendment-target {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    padding: .8rem 1rem;
    border: 1px solid rgba(96,165,250,.26);
    border-radius: 10px;
    background: rgba(30,64,175,.11);
}
#parliamentView .parl-amendment-target span,
#parliamentView .parl-amendment-change > header span {
    color: #7db7f4;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
#parliamentView .parl-amendment-target strong { color: #e6edf7; font-size: .96rem; }
#parliamentView .parl-amendment-changes { display: grid; gap: .85rem; min-width: 0; }
#parliamentView .parl-amendment-change {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.17);
    border-left: 4px solid #60a5fa;
    border-radius: 11px;
    background: rgba(8,15,27,.66);
}
#parliamentView .parl-amendment-change.is-added { border-left-color: #34d399; }
#parliamentView .parl-amendment-change.is-removed { border-left-color: #fb7185; }
#parliamentView .parl-amendment-change.is-substitute { border-left-color: #fbbf24; }
#parliamentView .parl-amendment-change > header {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    padding: .72rem .9rem;
    border-bottom: 1px solid rgba(148,163,184,.12);
}
#parliamentView .parl-amendment-change > header strong { color: #e2e8f0; font-size: .88rem; }
#parliamentView .parl-amendment-change-summary { margin: .8rem .9rem 0; color: #aab5c6; }
#parliamentView .parl-amendment-placement {
    margin: .65rem .9rem 0;
    color: rgba(148,163,184,.72);
    font-size: .72rem;
}
#parliamentView .parl-amendment-article { min-width: 0; padding: .85rem .9rem; }
#parliamentView .parl-amendment-article > strong { color: #f1f5f9; font-size: 1rem; }
#parliamentView .parl-amendment-article > p { margin: .35rem 0 0; color: #aeb8c8; line-height: 1.55; }
#parliamentView .parl-amendment-comparison {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#parliamentView .parl-amendment-comparison > section { min-width: 0; }
#parliamentView .parl-amendment-comparison > section + section { border-left: 1px solid rgba(148,163,184,.14); background: rgba(59,130,246,.05); }
#parliamentView .parl-amendment-comparison > section > span {
    display: block;
    padding: .65rem .9rem 0;
    color: #748197;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
#parliamentView .parl-amendment-switchable,
.dossier-amendment-switchable { min-width: 0; }
#parliamentView .parl-amendment-view-head,
.dossier-amendment-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .72rem;
}
.dossier-amendment-view-head > span {
    color: rgba(148,163,184,.7);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
#parliamentView .parl-amendment-view-toggle,
.dossier-amendment-view-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    padding: .16rem;
    background: rgba(2,6,15,.48);
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 8px;
}
#parliamentView .parl-amendment-view-toggle button,
.dossier-amendment-view-toggle button {
    min-height: 27px;
    padding: .27rem .58rem;
    color: rgba(203,213,225,.52);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: .64rem;
    font-weight: 760;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
#parliamentView .parl-amendment-view-toggle button:hover,
.dossier-amendment-view-toggle button:hover { color: #e2e8f0; }
#parliamentView .parl-amendment-view-toggle button.active,
.dossier-amendment-view-toggle button.active {
    color: #dbeafe;
    background: rgba(59,130,246,.15);
    border-color: rgba(96,165,250,.25);
}
#parliamentView .parl-amendment-view[hidden],
.dossier-amendment-view[hidden] { display: none !important; }
#parliamentView .parl-amendment-view-caption {
    margin: 0 0 .62rem;
    color: rgba(148,163,184,.7);
    font-size: .68rem;
    font-weight: 760;
}
#parliamentView .parl-amendment-effects-switchable {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#parliamentView .parl-amendment-effects-switchable > .parl-amendment-view {
    flex: 1;
    min-height: 0;
    display: flex;
}
#parliamentView .parl-amendment-resulting-effects .parl-projected-effects-head p,
.dossier-amendment-resulting-note {
    margin: -.18rem 0 .7rem;
    color: rgba(148,163,184,.7);
    font-size: .7rem;
    line-height: 1.45;
}
@media (max-width: 850px) {
    #parliamentView .parl-amendment-comparison { grid-template-columns: 1fr; }
    #parliamentView .parl-amendment-comparison > section + section { border-left: 0; border-top: 1px solid rgba(148,163,184,.14); }
}

.dossier-amendment-target {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    margin-bottom: .8rem;
    padding: .75rem .9rem;
    border: 1px solid rgba(96,165,250,.24);
    border-radius: 10px;
    background: rgba(30,64,175,.1);
}
.dossier-amendment-target span,
.dossier-amendment-change > header span {
    color: #7db7f4;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dossier-amendment-target strong { color: #e7eef8; }
.dossier-amendment-changes { display: grid; gap: .75rem; min-width: 0; }
.dossier-amendment-change {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.16);
    border-left: 4px solid #60a5fa;
    border-radius: 10px;
    background: rgba(8,15,27,.56);
}
.dossier-amendment-change.is-added { border-left-color: #34d399; }
.dossier-amendment-change.is-removed { border-left-color: #fb7185; }
.dossier-amendment-change.is-substitute { border-left-color: #fbbf24; }
.dossier-amendment-change > header { display: flex; gap: .65rem; align-items: baseline; padding: .65rem .8rem; border-bottom: 1px solid rgba(148,163,184,.12); }
.dossier-amendment-change > header strong { color: #e2e8f0; font-size: .86rem; }
.dossier-amendment-placement { margin: .6rem .8rem 0; color: rgba(148,163,184,.72); font-size: .7rem; }
.dossier-amendment-article { min-width: 0; padding: .75rem .8rem; }
.dossier-amendment-article > strong { color: #f1f5f9; }
.dossier-amendment-article > p { margin: .3rem 0 .65rem; color: #aeb8c8; line-height: 1.5; }
.dossier-amendment-comparison { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.dossier-amendment-comparison > section + section { border-left: 1px solid rgba(148,163,184,.14); background: rgba(59,130,246,.05); }
.dossier-amendment-comparison > section > span { display: block; padding: .55rem .8rem 0; color: #748197; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) {
    .dossier-amendment-comparison { grid-template-columns: 1fr; }
    .dossier-amendment-comparison > section + section { border-left: 0; border-top: 1px solid rgba(148,163,184,.14); }
}

.parl-projected-effects {
    flex: 1;
    min-height: 0;
    padding: .7rem .8rem .75rem;
    overflow-y: auto;
    border: 1px solid rgba(96,165,250,.16);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(30,64,175,.1), rgba(8,15,25,.58));
}
.parl-projected-effects-head .parl-section-label { margin-bottom: .52rem; color: #93c5fd; }
.parl-projected-effects-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: .85rem;
}
.parl-projected-effect-group > span {
    display: block;
    margin-bottom: .34rem;
    color: rgba(203,213,225,.52);
    font-size: .59rem;
    font-weight: 790;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.parl-amendment-effect-group,
.dossier-amendment-effect-group {
    padding-left: .72rem;
    border-left: 3px solid rgba(96,165,250,.65);
}
.parl-amendment-effect-group.is-starts,
.dossier-amendment-effect-group.is-starts { border-left-color: #34d399; }
.parl-amendment-effect-group.is-ends,
.dossier-amendment-effect-group.is-ends { border-left-color: #fb7185; }
.parl-amendment-effect-group.is-historical,
.dossier-amendment-effect-group.is-historical { border-left-color: #94a3b8; }
.parl-amendment-effect-group > p,
.dossier-amendment-effect-group > p {
    margin: 0 0 .55rem;
    color: rgba(148,163,184,.72);
    font-size: .7rem;
    line-height: 1.45;
}
.parl-amendment-effect-continuity,
.dossier-amendment-effect-continuity {
    margin: .85rem 0 0;
    color: rgba(148,163,184,.66);
    font-size: .7rem;
    line-height: 1.45;
}
.dossier-amendment-effects-empty {
    display: grid;
    gap: .3rem;
    color: #cbd5e1;
}
.dossier-amendment-effects-empty span { color: #8290a4; font-size: .78rem; }
.parl-projected-effects .parl-effects-list {
    display: grid;
    gap: .45rem;
}
.parl-persistent-updates {
    display: grid;
    gap: .85rem;
    margin-top: .85rem;
}
.parl-persistent-updates > section > .parl-section-label {
    display: block;
    margin-bottom: .4rem;
}
.object-timeline-updates {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}
.object-timeline-update-group > span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.object-timeline-updates .persistent-update-card,
.object-timeline-updates .persistent-update-card .world-object-reveal-main {
    min-height: 72px;
}
.parl-effect-chip-row {
    display: flex;
    min-width: 0;
    max-width: 100%;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .35rem;
}
.parl-projected-effects .parl-effect-chip-row--national > .national-progress-card {
    flex: 1 1 240px;
}
.parl-effects-empty {
    flex: 1;
    min-height: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .35rem;
    padding: 1.25rem;
    color: rgba(203,213,225,.46);
    text-align: center;
    background: var(--workspace-well-bg);
    border: 1px solid var(--workspace-inner-border);
    border-radius: 11px;
}
.parl-effects-empty svg { width: 22px; height: 22px; color: rgba(96,165,250,.55); }
.parl-effects-empty strong { color: #cbd5e1; font-size: .78rem; }
.parl-effects-empty span { max-width: 360px; font-size: .68rem; line-height: 1.45; }
}

#parliamentView .parl-right-col {
    position: static;
    overflow: hidden;
}

#parliamentView .parl-chamber-card {
    display: flex;
    flex-direction: column;
    padding: .7rem .85rem .85rem;
}

#parliamentView .parl-chamber-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#parliamentView .parl-seat-map {
    flex: 0 0 auto;
    min-height: 0;
    margin-top: -.45rem;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#parliamentView .parl-seat-map svg {
    display: block;
    width: 100%;
    height: clamp(190px, 22vh, 225px);
    min-height: 0;
    max-height: none;
}

#parliamentView .parl-chamber-card.has-live-vote .parl-chamber-vote-wrap {
    margin-top: 0;
    padding-top: .8rem;
}

#parliamentView .parl-chamber-lower-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    margin-top: .85rem;
}

#parliamentView .parl-chamber-lower-stage > #parlChamberVoteSection,
#parliamentView .parl-chamber-lower-stage > .parl-chamber-parties {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 0;
}

#parliamentView .parl-chamber-lower-stage > #parlChamberVoteSection {
    /* Party and bloc focus share this bounded scrollport below the map. */
    align-self: stretch;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    padding-bottom: .75rem;
    scroll-padding-block: .75rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(.45rem);
    transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

#parliamentView .parl-chamber-parties {
    /* Four ordinary parties only need about 150px including row gaps and the
       well border. Keeping the old 190px
       floor forced the well past the card's bottom edge whenever a final
       division was also visible. Larger parliaments still scroll below. */
    min-height: 154px;
    display: flex;
    flex-direction: column;
    margin-top: .2rem;
    padding-bottom: .15rem;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear;
}

#parliamentView .parl-chamber-card.has-lower-panel .parl-chamber-lower-stage > #parlChamberVoteSection {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

#parliamentView .parl-chamber-card.has-lower-panel .parl-chamber-lower-stage > .parl-chamber-parties {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-.35rem);
    transition: opacity 120ms ease, transform 160ms ease, visibility 0s linear 120ms;
}

#parliamentView .parl-vote-party-panel {
    position: relative;
    display: grid;
    gap: .55rem;
    padding: .8rem .12rem 0;
    animation: parlVotePartyIn 160ms ease both;
}

#parliamentView .parl-vote-party-panel.is-closing {
    pointer-events: none;
    animation: parlVotePartyOut 140ms ease-in both;
}

#parliamentView .parl-vote-party-panel.is-exit-overlay {
    z-index: 3;
    grid-area: 1 / 1;
    align-self: start;
    width: 100%;
}

#parliamentView .parl-party-panel-close {
    position: absolute;
    top: .65rem;
    right: .12rem;
    z-index: 1;
}

#parliamentView .parl-vote-party-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
    padding-right: 42px;
}

#parliamentView .parl-vote-party-head > .parl-party-emblem {
    grid-column: 1;
    grid-row: 1;
}

#parliamentView .parl-vote-party-head > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

#parliamentView .parl-vote-party-head > div > span,
.parl-seat-tooltip-party .parl-party-eyebrow {
    display: block;
    color: rgba(147,197,253,.68);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .085em;
    text-transform: uppercase;
}

#parliamentView .parl-vote-party-head h2 {
    margin: .08rem 0 0;
    overflow: hidden;
    color: #f5f8fc;
    font-size: 1rem;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#parliamentView .parl-vote-party-head h2 small {
    margin-left: .3rem;
    padding: .1rem .28rem;
    color: #93c5fd;
    border: 1px solid rgba(59,130,246,.48);
    border-radius: 4px;
    font-size: .5rem;
    vertical-align: .12rem;
}

#parliamentView .parl-vote-party-head p {
    display: flex;
    gap: .3rem;
    align-items: center;
    margin: .18rem 0 0;
    overflow: hidden;
    color: rgba(203,213,225,.58);
    font-size: .62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#parliamentView .parl-vote-party-head p i {
    color: rgba(148,163,184,.3);
    font-style: normal;
}

#parliamentView .parl-vote-party-position {
    display: flex;
    gap: .7rem;
    align-items: center;
    justify-content: space-between;
    padding: .48rem 0;
    border-top: 1px solid rgba(148,163,184,.1);
    border-bottom: 1px solid rgba(148,163,184,.1);
}

#parliamentView .parl-vote-party-split {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .65rem;
    justify-content: flex-end;
    font-size: .66rem;
    font-weight: 700;
}

#parliamentView .parl-vote-party-split .is-for { color: #51cf66; }
#parliamentView .parl-vote-party-split .is-wavering { color: #ff922b; }
#parliamentView .parl-vote-party-split .is-against { color: #ff6b6b; }

#parliamentView .parl-vote-party-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
}

#parliamentView .parl-vote-party-actions .mandate-story-action {
    min-width: 0;
    min-height: 38px;
    padding: .42rem .5rem;
    font-size: .66rem;
}

#parliamentView .parl-party-leader-widget {
    margin: 0;
    padding: .52rem;
    font: inherit;
}

#parliamentView .parl-overview-party-promises {
    min-height: 0;
}

#parliamentView .parl-overview-party-promises > header {
    display: flex;
    gap: .38rem;
    align-items: center;
    margin-bottom: .38rem;
    color: #f7d779;
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}

#parliamentView .parl-overview-party-promises > header svg {
    width: 14px;
    height: 14px;
}

#parliamentView .parl-overview-party-promises > header strong {
    margin-left: auto;
    min-width: 22px;
    padding: .12rem .3rem;
    text-align: center;
    color: #f7d779;
    background: rgba(245,158,11,.1);
    border-radius: 999px;
}

#parliamentView .parl-overview-party-promise-list {
    display: grid;
    gap: .3rem;
    max-height: clamp(58px, 10vh, 94px);
    overflow-y: auto;
}

#parliamentView .parl-overview-party-promise {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: .5rem;
    align-items: center;
    padding: .4rem .5rem;
    color: rgba(226,232,240,.78);
    background: rgba(245,158,11,.045);
    border: 1px solid rgba(245,158,11,.16);
    border-radius: 7px;
}

#parliamentView .parl-overview-party-promise > span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #f7d779;
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.2);
    border-radius: 6px;
    font-size: .62rem;
    font-weight: 800;
}

#parliamentView .parl-overview-party-promise p {
    margin: 0;
    font-size: .67rem;
    line-height: 1.3;
}

#parliamentView .parl-overview-party-promises-empty {
    padding: .6rem;
    color: rgba(148,163,184,.56);
    border: 1px dashed rgba(148,163,184,.14);
    border-radius: 7px;
    font-size: .65rem;
    text-align: center;
}

@media (min-width: 768px) and (max-height: 820px) {
    #parliamentView .parl-chamber-card.showing-overview-party .parl-vote-party-panel {
        gap: .38rem;
        padding-top: .5rem;
    }

    #parliamentView .parl-chamber-card.showing-overview-party .parl-overview-party-promises > header {
        margin-bottom: .24rem;
    }

    #parliamentView .parl-chamber-card.showing-overview-party .parl-overview-party-promise-list {
        max-height: 64px;
    }

    #parliamentView .parl-chamber-card.showing-overview-party .parl-overview-party-promise {
        grid-template-columns: 21px minmax(0, 1fr);
        gap: .42rem;
        padding: .28rem .45rem;
    }

    #parliamentView .parl-chamber-card.showing-overview-party .parl-overview-party-promise > span {
        width: 21px;
        height: 21px;
    }

    #parliamentView .parl-chamber-card.showing-overview-party .parl-vote-party-actions .mandate-story-action {
        min-height: 34px;
        padding-block: .32rem;
    }

}

@keyframes parlVotePartyIn {
    from { opacity: 0; transform: translateY(.35rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes parlVotePartyOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(.35rem); }
}

@keyframes parlBillDetailIn {
    from { opacity: 0; transform: translateY(7px) scale(.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes parlBillColumnOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: .58; transform: translateY(3px) scale(.998); }
}

@keyframes parlBillColumnIn {
    from { opacity: .58; transform: translateY(3px) scale(.998); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#parliamentView .parl-seat-key {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    /* Give the stance key a dedicated band below the lowest seat row. */
    padding: .55rem .25rem .45rem;
    margin: .05rem 0 0;
    border: 0;
}
#parliamentView .parl-seat-key span { font-size: .62rem; }

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

.parl-chamber-summary-division strong i {
    color: rgba(148,163,184,.38);
    font-size: .68rem;
    font-style: normal;
}
.parl-chamber-government.is-passed,
.parl-division-outcome.is-passed {
    color: #86efac;
    background: rgba(34,197,94,.1);
    border-color: rgba(74,222,128,.28);
}
.parl-chamber-government.is-defeated,
.parl-division-outcome.is-defeated {
    color: #fca5a5;
    background: rgba(239,68,68,.09);
    border-color: rgba(248,113,113,.25);
}
.parl-division-outcome {
    flex: 0 0 auto;
    padding: .22rem .44rem;
    border: 1px solid;
    border-radius: 999px;
    font-size: .59rem;
    font-weight: 790;
    letter-spacing: .035em;
    text-transform: uppercase;
}
.parl-chamber-vote-history { padding-bottom: .15rem; }
.parl-legend-division {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: .08rem;
    color: rgba(203,213,225,.52);
    font-size: .59rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}
.parl-legend-division span:first-child { color: #86efac; }
.parl-legend-division span:last-child { color: #fca5a5; }

#parliamentView .parl-legend-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    padding: .12rem .35rem .42rem;
    margin-bottom: .1rem;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    background: var(--workspace-well-bg);
    border: 1px solid var(--workspace-inner-border);
    border-radius: 10px;
}

#parliamentView .parl-legend-item {
    width: 100%;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(148,163,184,.065);
    border-radius: 6px;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
}
#parliamentView .parl-legend-item.is-player {
    background: color-mix(in srgb, var(--primary-color) 11%, transparent);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--primary-color) 74%, transparent);
}
#parliamentView .parl-legend-item:hover,
#parliamentView .parl-legend-item:focus-visible {
    color: #f8fbff;
    background: rgba(96,165,250,.075);
    outline: none;
}
#parliamentView .parl-legend-item:focus-visible { box-shadow: inset 0 0 0 1px rgba(96,165,250,.32); }
#parliamentView .parl-legend-item.is-noninteractive {
    cursor: default;
}
#parliamentView .parl-legend-item.is-noninteractive:hover {
    color: inherit;
    background: transparent;
}

#parliamentView .parl-chamber-card.showing-party-detail { padding: 0; }
#parliamentView .parl-party-detail-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow-y: auto;
}
#parliamentView .parl-party-detail-view[hidden] { display: none; }
.parl-party-detail-head {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .75rem .8rem;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(148,163,184,.13);
}
.parl-party-back {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 30px;
    padding: .3rem .42rem;
    color: rgba(203,213,225,.6);
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: .68rem;
    font-weight: 720;
    transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}
.parl-party-back svg { width: 14px; height: 14px; }
.parl-party-back:hover { color: #f8fafc; background: rgba(148,163,184,.08); transform: translateX(-2px); }
.parl-party-title { min-width: 0; }
.parl-party-title > span {
    display: block;
    margin-bottom: .16rem;
    color: rgba(147,197,253,.68);
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .085em;
    text-transform: uppercase;
}
.parl-party-title h2 {
    margin: 0;
    color: #f5f8fc;
    font-size: 1.32rem;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.parl-party-facts {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin: .95rem 0;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 10px;
    background: rgba(2,6,15,.3);
}
.parl-party-facts.has-region { grid-template-columns: repeat(3,minmax(0,1fr)); }
.parl-party-facts > div { min-width: 0; padding: .72rem .78rem; }
.parl-party-facts > div + div { border-left: 1px solid rgba(148,163,184,.12); }
.parl-party-facts span,
.parl-party-leader em {
    display: block;
    color: #71869e;
    font-size: .57rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.parl-party-facts strong { display: block; margin-top: .18rem; color: #e8eef7; font-size: .82rem; }
.parl-party-leader {
    width: 100%;
    display: grid;
    grid-template-columns: 58px minmax(0,1fr);
    gap: .7rem;
    align-items: center;
    margin: 0 0 1rem;
    padding: .62rem;
    text-align: left;
    color: #e8eef6;
    border: 1px solid rgba(92,154,220,.24);
    border-radius: 10px;
    background: rgba(35,73,112,.1);
}
button.parl-party-leader { cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
button.parl-party-leader:hover { border-color: rgba(92,170,237,.45); background: rgba(35,93,148,.16); }
.parl-party-leader img,
.parl-party-leader-monogram,
.parl-party-player-symbol {
    width: 58px;
    height: 72px;
    border-radius: 7px;
}
.parl-party-leader img { object-fit: cover; object-position: top center; }
.parl-party-leader-monogram {
    display: grid;
    place-items: center;
    color: #dbeafe;
    background: linear-gradient(145deg, rgba(59,130,246,.4), rgba(30,64,175,.2));
    border: 1px solid rgba(147,197,253,.26);
    font-size: 1rem;
    font-weight: 820;
}
.parl-party-player-symbol {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
}
.parl-party-player-symbol b { color: #94a3b8; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.parl-party-leader > span:last-child { min-width: 0; }
.parl-party-leader strong { display: block; margin-top: .16rem; color: #edf3f9; font-size: .86rem; }
.parl-party-leader small { display: block; margin-top: .12rem; color: #8e9daf; font-size: .68rem; line-height: 1.35; }
.parl-party-promises { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.parl-party-section-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .05rem .1rem .55rem;
    color: #f8d77b;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}
.parl-party-section-label svg { width: 14px; height: 14px; }
.parl-party-section-label strong {
    margin-left: auto;
    padding: .1rem .35rem;
    color: #fde68a;
    background: rgba(245,158,11,.1);
    border-radius: 999px;
    font-size: .59rem;
}
.parl-party-promise-list { display: grid; gap: .48rem; }
.parl-party-promise {
    display: grid;
    grid-template-columns: 25px minmax(0,1fr);
    gap: .58rem;
    align-items: start;
    padding: .68rem .7rem;
    border: 1px solid rgba(251,191,36,.14);
    border-radius: 9px;
    background: rgba(120,82,12,.065);
}
.parl-party-promise > span {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    color: #f8d77b;
    background: rgba(245,158,11,.11);
    border: 1px solid rgba(251,191,36,.18);
    border-radius: 7px;
    font-size: .64rem;
    font-weight: 800;
}
.parl-party-promise p { margin: .14rem 0 0; color: rgba(226,232,240,.78); font-size: .75rem; line-height: 1.42; }
.parl-party-promises-empty { padding: 1rem; color: rgba(203,213,225,.46); text-align: center; font-size: .72rem; }

@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-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; }
    #parliamentView .parl-focus-well {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0,1fr);
    }
    #parliamentView .parl-article-index {
        display: flex;
        gap: .25rem;
        padding: .38rem;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--workspace-inner-border);
    }
    #parliamentView .parl-article-index-item { flex: 0 0 132px; }
    #parliamentView .parl-article-index-item + .parl-article-index-item { margin-top: 0; }
    #parliamentView .parl-detail-mode-nav { align-self: stretch; }
    #parliamentView .parl-detail-mode-tab { flex: 1; justify-content: center; }
}

@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-actions-grid-primary,
    #parliamentView .parl-actions-grid-story,
    #parliamentView .parl-actions-grid-story.is-two,
    #parliamentView .parl-legislation-control-actions { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .dossier-policy-section {
        padding: 0.82rem;
    }
    .dossier-policy-header { grid-template-columns: 48px minmax(0, 1fr); gap: 0.66rem; }
    .dossier-policy-number { width: 48px; padding-right: 0.66rem; }
    .dossier-policy-number strong { font-size: 1.72rem; }
    .dossier-policy-header h4 { font-size: 0.94rem; }
    .dossier-policy-body { font-size: 0.82rem; }
    .parl-article-header { grid-template-columns: 54px minmax(0, 1fr); gap: 0.7rem; }
    .parl-article-number { padding-right: 0.7rem; }
    .parl-article-number strong { font-size: 1.65rem; }
    #parliamentView .parl-article-content { margin-left: 0; }
}
.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;
}

/* === NATIONAL ELECTION NIGHT === */
.election-night-overlay {
    position: fixed;
    inset: 0;
    z-index: 10070;
    display: grid;
    place-items: center;
    padding: 28px;
    background: var(--bg-primary);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, visibility 240ms ease;
}

.election-night-overlay[hidden] { display: none; }

.election-night-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.election-night-backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--bg-primary) 0%, transparent 60%),
        linear-gradient(0deg, var(--bg-primary) 0%, transparent 70%),
        url('/static/assets/EventImages/BallotCountingCentre.webp') center / cover no-repeat;
    filter: saturate(0.72) brightness(0.5);
    transform: scale(1.015);
}

.election-night-card {
    position: relative;
    width: min(1040px, 100%);
    max-height: min(820px, calc(100vh - 56px));
    overflow: auto;
    padding: clamp(24px, 4vw, 48px);
    background: rgba(12, 14, 20, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-lg);
}

.election-night-header,
.election-night-footer,
.election-night-summary,
.election-party-row {
    display: flex;
    align-items: center;
}

.election-night-header,
.election-night-footer {
    justify-content: space-between;
    gap: 24px;
}

.election-night-kicker {
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.election-night-header h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2rem, 5vw, 3.7rem);
    font-weight: 700;
    letter-spacing: -0.045em;
}

.election-night-status {
    margin: 8px 0 0;
    color: var(--text-secondary);
}

.election-night-reporting {
    min-width: 118px;
    text-align: right;
}

.election-night-reporting strong,
.election-night-reporting span { display: block; }
.election-night-reporting strong {
    color: var(--text-primary);
    font-size: 2.15rem;
    font-variant-numeric: tabular-nums;
}
.election-night-reporting span {
    color: var(--text-muted);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.election-night-progress {
    height: 5px;
    margin: 24px 0 14px;
    overflow: hidden;
    background: var(--color-neutral-bg);
    border-radius: var(--radius-pill);
}
.election-night-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--primary-color);
    border-radius: inherit;
    transition: width 500ms ease;
}

.election-night-summary {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.election-night-results {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-card);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

.election-party-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 1.25fr) minmax(180px, 0.8fr);
    gap: 8px 20px;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    transition: border-color 220ms ease, background 220ms ease;
}
.election-party-row.is-player {
    background: var(--color-neutral-bg);
    border-color: var(--color-neutral-border);
}
.election-party-row.is-leading { border-color: var(--party-color); }

.election-party-identity,
.election-party-numbers {
    display: flex;
    align-items: center;
    min-width: 0;
}
.election-party-identity { gap: 10px; }
.election-party-swatch {
    width: 9px;
    height: 28px;
    flex: 0 0 auto;
    background: var(--party-color);
    border-radius: var(--radius-tag);
}
.election-party-identity strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.election-party-identity > span:last-child {
    color: var(--text-muted);
    font-size: 0.68rem;
}
.election-party-numbers {
    justify-content: flex-end;
    gap: 13px;
    font-variant-numeric: tabular-nums;
}
.election-party-vote { color: var(--text-secondary); font-size: 0.85rem; }
.election-party-seats { min-width: 76px; color: var(--text-primary); text-align: right; }
.election-party-change { min-width: 30px; color: var(--text-muted); text-align: right; }
.election-party-change.is-gain { color: var(--color-positive); }
.election-party-change.is-loss { color: var(--color-negative); }
.election-party-track {
    grid-column: 1 / -1;
    height: 4px;
    overflow: hidden;
    background: var(--color-neutral-bg);
    border-radius: var(--radius-pill);
}
.election-party-fill {
    display: block;
    height: 100%;
    background: var(--party-color);
    border-radius: inherit;
    transition: width 500ms ease;
}

.election-night-footer {
    align-items: flex-end;
    margin-top: 24px;
    min-height: 76px;
}
.election-night-verdict {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.2rem, 2.6vw, 1.65rem);
    font-weight: 700;
}
.election-night-subverdict {
    margin: 6px 0 0;
    color: var(--text-secondary);
}
.election-night-overlay.is-victory .election-night-verdict { color: var(--color-positive); }
.election-night-overlay.is-defeat .election-night-verdict { color: var(--color-negative); }

.story-terminal-handoff {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 700px) {
    .election-night-overlay { padding: 12px; }
    .election-night-card { max-height: calc(100vh - 24px); padding: 22px 16px; }
    .election-night-header { align-items: flex-start; }
    .election-night-reporting { min-width: 84px; }
    .election-night-summary { flex-wrap: wrap; justify-content: flex-start; }
    .election-party-row { grid-template-columns: 1fr; }
    .election-party-numbers { justify-content: flex-start; padding-left: 19px; }
    .election-night-footer { align-items: stretch; flex-direction: column; }
    .election-night-footer .gc-btn { width: 100%; }
}


.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-month-btn,
body.game-archived .time-pass-cap,
body.game-archived .parl-introduce-btn,
body.game-archived .parl-new-legislation-card,
body.game-archived .parl-focus-actions,
body.game-archived .parl-vote-now-btn,
body.game-archived [id^="sendStoryBtn-"] {
    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%; }
}
/* Annual fiscal commitments use one visual language across Story, Records,
   Parliament, Events, and the Month in Review. */
.budget-effect-list {
    display: grid;
    gap: 0.55rem;
    width: 100%;
}

.budget-effect-card {
    appearance: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: min(100%, 28rem);
    padding: 0.72rem 0.82rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.58);
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.budget-effect-card:hover {
    border-color: color-mix(in srgb, var(--budget-color, #60a5fa) 48%, rgba(148, 163, 184, 0.22));
    background: rgba(30, 41, 59, 0.72);
    transform: translateY(-1px);
}

.budget-effect-card:focus-visible {
    border-color: #60a5fa;
    outline: 2px solid rgba(96, 165, 250, 0.72);
    outline-offset: 2px;
}

.budget-effect-list.is-projected .budget-effect-card,
.budget-effect-list.is-inactive .budget-effect-card {
    border-style: dashed;
    background: rgba(15, 23, 42, 0.38);
}

.budget-effect-icon {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    color: var(--budget-color);
    border: 1px solid color-mix(in srgb, var(--budget-color) 52%, transparent);
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--budget-color) 14%, transparent);
}

.budget-effect-copy { min-width: 0; display: grid; gap: 0.1rem; }
.budget-effect-copy small {
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.budget-effect-copy strong { color: #f8fafc; font-size: 0.88rem; line-height: 1.15; }
.budget-effect-copy em { color: #94a3b8; font-size: 0.72rem; font-style: normal; }
.budget-effect-card > b { color: #fbbf24; font-size: 0.88rem; white-space: nowrap; }
.budget-effect-card.is-reduction > b { color: #4ade80; }
.linked-budget-effects { width: 100%; margin-top: 0.3rem; }

@media (max-width: 620px) {
    .budget-effect-card { grid-template-columns: auto minmax(0, 1fr); }
    .budget-effect-card > b { grid-column: 2; }
}

/* Event decisions are a sibling of Story actions: the same compact card and
   composer language, laid out as full-width choices suited to a single event. */
.event-suggested-actions-label {
    margin: 0 0 0.55rem;
    color: rgba(203, 213, 225, 0.7);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-transform: uppercase;
}

.event-response-record {
    width: 100%;
    padding: 0.78rem 0.88rem;
    background: rgba(30, 64, 175, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-left: 3px solid #60a5fa;
    border-radius: 10px;
}

.event-response-record-label {
    margin-bottom: 0.25rem;
    color: #93c5fd;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.event-response-record-text {
    color: #edf6ff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.45;
}

.event-suggested-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    width: 100%;
}

.me-choices > .event-suggested-actions-label {
    margin-bottom: 0;
}

.event-action-card.me-choice-btn {
    width: 100%;
    padding: 0.78rem 0.88rem 0.72rem;
    gap: 0.34rem;
    background: rgba(12, 14, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-left: 3px solid rgba(56, 189, 248, 0.58);
    border-radius: 10px;
    transform: none;
}

.event-action-card.me-choice-btn:hover,
.event-action-card.me-choice-btn:focus-visible,
.event-action-card.me-choice-btn.requires-decision:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(96, 165, 250, 0.42);
    border-left-color: #38bdf8;
    outline: none;
    transform: translateY(-1px);
}

.event-action-card .me-choice-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 750;
}

.event-action-card .me-choice-action {
    margin: 0;
    color: #8fb4ff;
    font-size: 0.72rem;
    font-style: normal;
}

.me-custom-input.event-composer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.event-composer-meta {
    display: flex;
    align-items: center;
    margin: 0 0.2rem 0.38rem;
}

.event-composer-title {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: #eaf4ff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.015em;
}

.event-composer-title svg {
    width: 14px;
    height: 14px;
    color: #60a5fa;
}

.event-composer-row {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    min-height: 54px;
    padding: 0.35rem;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(9, 20, 35, 0.98), rgba(4, 10, 19, 0.98));
    border: 1px solid rgba(96, 165, 250, 0.48);
    border-radius: 13px;
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.25), 0 0 18px rgba(37, 99, 235, 0.08);
}

.event-composer-row::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: 1;
    background: linear-gradient(145deg, rgba(7, 16, 29, 0.98), rgba(3, 9, 18, 0.99));
    border-radius: 11px;
    pointer-events: none;
}

.event-composer .me-custom-text {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 2.8rem;
    max-height: 8rem;
    resize: vertical;
    padding: 0.66rem 0.8rem;
    background: transparent;
    border: 0;
    border-radius: 9px;
    box-shadow: none;
    font: inherit;
    line-height: 1.4;
}

.event-composer .me-custom-text:focus {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.event-composer .me-custom-text::placeholder {
    color: rgba(197, 216, 239, 0.42);
}

.event-composer .event-composer-send {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 45px;
    min-width: 45px;
    min-height: 45px;
    padding: 0;
    color: #eff6ff;
    background: linear-gradient(155deg, #3b82f6, #1d4ed8);
    border: 1px solid rgba(147, 197, 253, 0.68);
    border-radius: 11px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 6px 18px rgba(37, 99, 235, 0.36);
}

.event-composer .event-composer-send:hover,
.event-composer .event-composer-send:focus-visible {
    color: #fff;
    background: linear-gradient(155deg, #60a5fa, #2563eb);
    border-color: rgba(191, 219, 254, 0.9);
    outline: none;
    transform: translateY(-1px);
}

.event-composer .event-composer-send svg {
    width: 19px;
    height: 19px;
}

@media (max-width: 620px) {
    .event-composer-row { min-height: 52px; }
    .event-action-card .move-card-action-btn { white-space: normal; }
}

/* Full-screen event scene. Artwork stays fixed behind the scrolling briefing. */
#majorEventOverlay {
    --event-scene-bg: #0d1117;
    background: var(--event-scene-bg);
}
#majorEventOverlay .me-container {
    position: relative;
    isolation: isolate;
    height: 100dvh;
    max-height: 100dvh;
    background: var(--event-scene-bg);
}
#majorEventOverlay .me-left {
    flex: 0 0 57%;
    max-width: 57%;
    height: 100%;
    background: transparent;
    box-shadow: none;
}
#majorEventOverlay .me-left::before { display: none; }
#majorEventOverlay .me-scroll-region {
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 6vh, 4.5rem) clamp(1.5rem, 4vw, 5rem) 2rem;
    overscroll-behavior: contain;
    scrollbar-color: var(--border-color) transparent;
}
/* Auto margins center brief events and collapse to zero for scrolling ones. */
#majorEventOverlay .me-content {
    flex: 0 0 auto;
    width: 100%;
    margin-block: auto;
}
#majorEventOverlay .me-right {
    position: absolute;
    inset: 0 0 0 39%;
    min-height: 0;
    z-index: 0;
    background: var(--event-scene-bg);
    /* An elliptical opening gives the image a soft, rounded silhouette. */
    -webkit-mask-image: radial-gradient(ellipse 95% 82% at 100% 47%, black 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 95% 82% at 100% 47%, black 45%, transparent 100%);
}
#majorEventOverlay .me-right-vignette {
    background: linear-gradient(90deg, var(--event-scene-bg), transparent 38%),
        linear-gradient(180deg, color-mix(in srgb, var(--event-scene-bg) 35%, transparent), transparent 25%, transparent 70%, var(--event-scene-bg));
}
/* Float controls over the same receding shadow as the Story composer. */
#majorEventOverlay .me-scroll-region {
    padding-bottom: calc(var(--event-dock-height, 160px) + 2rem);
    scroll-padding-bottom: calc(var(--event-dock-height, 160px) + 1rem);
}
#majorEventOverlay .me-action-dock {
    display: block;
    position: absolute;
    inset: auto 0 0;
    isolation: isolate;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 1rem clamp(1.5rem, 4vw, 5rem) max(1.5rem, env(safe-area-inset-bottom));
    pointer-events: none;
}
#majorEventOverlay .me-action-dock::before {
    content: '';
    position: absolute;
    inset: -3rem 0 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent,
        color-mix(in srgb, var(--event-scene-bg) 20%, transparent) 12%,
        color-mix(in srgb, var(--event-scene-bg) 66%, transparent) 28%,
        color-mix(in srgb, var(--event-scene-bg) 94%, transparent) 40%,
        var(--event-scene-bg) 65%);
    pointer-events: none;
}
#majorEventOverlay .me-action-dock > * { pointer-events: auto; }
#majorEventOverlay .event-composer-title {
    position: relative;
    text-shadow: 0 2px 4px var(--event-scene-bg), 0 0 22px var(--event-scene-bg);
}
#majorEventOverlay .me-footer { margin: 0; padding: 0; border: 0; }
#majorEventOverlay .me-continue-btn {
    width: auto;
    background: var(--event-scene-bg);
    border-color: var(--border-color);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.9rem;
    padding: 0.85rem 1.5rem;
}
#majorEventOverlay .me-continue-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 15%, var(--event-scene-bg));
    border-color: var(--primary-color);
}
#majorEventOverlay[data-event-mode="active"] .me-continue-btn {
    color: var(--text-primary);
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--primary-color) 75%, white),
        color-mix(in srgb, var(--primary-color) 80%, navy));
    border-color: color-mix(in srgb, var(--primary-color) 45%, white);
    box-shadow: var(--shadow-lg), 0 6px 18px color-mix(in srgb, var(--primary-color) 30%, transparent);
}
#majorEventOverlay[data-event-mode="active"] .me-continue-btn:hover {
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--primary-color) 60%, white),
        var(--primary-color));
    border-color: color-mix(in srgb, var(--primary-color) 25%, white);
}
#majorEventOverlay .me-continue-btn:focus-visible,
#majorEventOverlay .event-action-card:focus-visible,
#majorEventOverlay .event-composer-send:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}
#majorEventOverlay .me-response-section { scroll-margin-top: 2rem; }
#majorEventOverlay .me-decision .me-response-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
#majorEventOverlay .event-action-card .me-choice-action {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
#majorEventOverlay .event-composer { margin: 0; }
#majorEventOverlay .event-composer-row {
    flex-direction: row;
    align-items: flex-end;
}
#majorEventOverlay .me-custom-text {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    min-height: 2.8rem;
    max-height: min(9rem, 24dvh);
    resize: none;
    overflow-y: auto;
}
#majorEventOverlay .event-composer-row:focus-within {
    border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
}
#majorEventOverlay .event-composer-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    gap: 0.5rem;
    width: 45px;
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
}
@media (max-width: 768px) {
    #majorEventOverlay .me-container { --event-mobile-art-height: min(28dvh, 17rem); }
    #majorEventOverlay .me-left {
        box-sizing: border-box;
        flex: 1;
        max-width: 100%;
        width: 100%;
        padding-top: var(--event-mobile-art-height);
    }
    #majorEventOverlay .me-right {
        inset: 0 0 auto;
        height: calc(var(--event-mobile-art-height) + 3rem);
        opacity: 1;
        -webkit-mask-image: linear-gradient(180deg, black 55%, transparent 100%);
        mask-image: linear-gradient(180deg, black 55%, transparent 100%);
    }
    #majorEventOverlay .me-right-vignette {
        background: linear-gradient(180deg, transparent 45%, var(--event-scene-bg));
    }
    #majorEventOverlay .me-scroll-region {
        padding: 2rem 1.25rem calc(var(--event-dock-height, 160px) + 2rem);
        -webkit-mask-image: linear-gradient(180deg, transparent, black 1.75rem);
        mask-image: linear-gradient(180deg, transparent, black 1.75rem);
    }
    #majorEventOverlay .me-action-dock { padding-inline: 1.25rem; }
    #majorEventOverlay .me-meta-row { align-items: flex-start; gap: 0.75rem; }
}

/* ── Unified Story workspace ───────────────────────────────────────────────
   Story is one continuous surface over the persistent world map. Structural
   hierarchy comes from spacing, edge fades, and one divider; cards remain
   only where the content itself is a discrete game object. */
body.game-body #mapBackground #mapCanvas {
    transition: filter .32s ease, opacity .32s ease, transform .32s ease;
}

body.game-body[data-active-view="dashboard"] #mapBackground #mapCanvas {
    filter: blur(8px) saturate(.52) brightness(.58);
    opacity: .48;
    transform: scale(1.018);
}

body.game-body[data-active-view="dashboard"] #mapScrim.map-scrim--active {
    background: rgba(1, 6, 14, .52);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#dashboardView {
    --story-divider: rgba(148, 163, 184, .28);
    --story-surface: rgba(3, 9, 17, .66);
    position: relative;
    isolation: isolate;
    padding-inline: clamp(.75rem, 1.25vw, 1.15rem);
}

#dashboardView::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 72% 35%, transparent 0, rgba(2, 7, 14, .1) 38%, rgba(2, 7, 14, .28) 100%),
        linear-gradient(180deg, rgba(3, 9, 17, .18), rgba(3, 9, 17, .36));
    pointer-events: none;
}

@media (min-width: 992px) {
    body.game-body[data-active-view="dashboard"] .game-subheader {
        z-index: 20;
    }

    #dashboardView {
        margin-top: -2.3125rem;
        padding-top: 0;
        padding-left: 0;
    }

    #dashboardView > .story-workspace {
        grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr);
        gap: 0;
    }

    #dashboardView > .story-workspace > .col-lg-8 {
        position: relative;
        padding-left: 0;
        padding-right: 0;
        border-right: 0;
    }

    #dashboardView > .story-workspace > .col-lg-8::after {
        content: '';
        position: absolute;
        top: .6rem;
        right: 0;
        bottom: .6rem;
        width: 1px;
        background: linear-gradient(180deg,
            transparent,
            rgba(58, 151, 232, .2) 10%,
            rgba(78, 171, 247, .58) 34%,
            rgba(78, 171, 247, .24) 78%,
            transparent);
        box-shadow: 1px 0 10px rgba(47, 130, 211, .12);
        pointer-events: none;
    }

    #dashboardView > .story-workspace > .col-lg-4 {
        padding-left: 1rem;
    }

    #dashboardView .dossier-panel {
        padding-top: calc(2.3125rem + 1.75rem);
    }

    #dashboardStory .story-messages,
    #dashboardStory .cabinet-mode-messages {
        padding-right: 0;
    }

    #dashboardStory .story-prose-stage > .story-message,
    #dashboardStory .outcome-card,
    #dashboardStory .suggested-actions-card {
        padding-right: 2.45rem;
    }
}

/* Remove the structural box around Story and its inner scroll well. */
#dashboardStory .unified-story-component {
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#dashboardStory .story-well {
    position: relative;
    overflow: visible;
}

#dashboardStory .story-well::before {
    display: none;
}

#dashboardStory .story-messages,
#dashboardStory .cabinet-mode-messages {
    margin: 0;
    padding: calc(2.3125rem + 1rem) 2rem 7.25rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: rgba(203, 213, 225, .27) transparent;
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0,
        #000 calc(100% - 112px),
        rgba(0, 0, 0, .98) calc(100% - 100px),
        rgba(0, 0, 0, .9) calc(100% - 84px),
        rgba(0, 0, 0, .72) calc(100% - 64px),
        rgba(0, 0, 0, .46) calc(100% - 45px),
        rgba(0, 0, 0, .2) calc(100% - 25px),
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        #000 0,
        #000 calc(100% - 112px),
        rgba(0, 0, 0, .98) calc(100% - 100px),
        rgba(0, 0, 0, .9) calc(100% - 84px),
        rgba(0, 0, 0, .72) calc(100% - 64px),
        rgba(0, 0, 0, .46) calc(100% - 45px),
        rgba(0, 0, 0, .2) calc(100% - 25px),
        transparent 100%);
}

#dashboardStory .story-messages::-webkit-scrollbar,
#dashboardStory .cabinet-mode-messages::-webkit-scrollbar {
    width: 6px;
}

#dashboardStory .story-messages::-webkit-scrollbar-track,
#dashboardStory .cabinet-mode-messages::-webkit-scrollbar-track {
    background: transparent;
}

#dashboardStory .story-messages::-webkit-scrollbar-thumb,
#dashboardStory .cabinet-mode-messages::-webkit-scrollbar-thumb {
    background: rgba(203, 213, 225, .25);
    border-radius: 999px;
}

/* Story responses read as one continuous document over the map workspace. */
#dashboardStory .story-prose-stage {
    border-radius: 0;
}

#dashboardStory .story-prose-stage > .story-message:not(.dm-thinking),
#dashboardStory .story-message.story-narrative:not(.dm-thinking) {
    padding: .3rem 1rem .75rem;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#dashboardStory .dm-response-stack {
    --story-stack-overlap: 0px;
    --story-stack-radius: var(--radius-card);
    padding-bottom: .75rem;
    margin-bottom: 1.35rem;
}

#dashboardStory .dm-response-stack:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

#dashboardStory .outcome-card,
#dashboardStory .suggested-actions-card {
    margin-top: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#dashboardStory .outcome-card {
    margin-inline: 1rem;
    padding: .9rem 1rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, .1), transparent 42%),
        linear-gradient(145deg, rgba(18, 23, 35, .99), rgba(10, 13, 22, .99));
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: none;
}

#dashboardStory .suggested-actions-card {
    padding: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    box-shadow: none;
}

/* Dock history ticks directly against the inter-pane rule. */
#dashboardStory .story-beat-navigator {
    right: .35rem;
    align-items: flex-end;
}

#dashboardStory .story-beat-mark,
#dashboardStory .story-beat-step {
    padding-right: 1px;
    background: transparent;
}

#dashboardStory .story-beat-step {
    border-radius: 0;
}

#dashboardStory .story-beat-tooltip {
    right: 1.9rem;
    padding: .28rem .55rem .32rem .8rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(8, 16, 27, .76) 34%, rgba(8, 16, 27, .58));
    box-shadow: none;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* The composer is the lower edge of the Story surface. Narrative visibly
   recedes beneath its shadow instead of stopping at a boxed well boundary. */
#dashboardStory .story-input-container {
    z-index: 10;
    isolation: isolate;
    margin: -5.75rem 0 0 !important;
    padding: 3.65rem .2rem .2rem;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#dashboardStory .story-input-container::before {
    content: '';
    position: absolute;
    right: .2rem;
    bottom: .2rem;
    left: .2rem;
    z-index: 0;
    height: 8rem;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background: linear-gradient(180deg,
        transparent 0,
        rgba(3, 9, 17, .2) 12%,
        rgba(3, 9, 17, .66) 28%,
        rgba(3, 9, 17, .94) 40%,
        #030911 52%,
        #030911 100%);
    pointer-events: none;
}

#dashboardStory .story-composer-title {
    isolation: isolate;
    position: relative;
    text-shadow:
        0 2px 4px #030911,
        0 0 10px #030911,
        0 0 22px rgba(3, 9, 17, .96);
}

#dashboardStory .story-composer-title::before {
    content: '';
    position: absolute;
    inset: -.28rem -.72rem;
    z-index: -1;
    border-radius: 999px;
    background: rgba(3, 9, 17, .98);
    filter: blur(7px);
    pointer-events: none;
}

#dashboardStory .story-composer-meta,
#dashboardStory .story-input-row {
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    #dashboardStory .story-ask-toggle {
        top: calc(2.3125rem + .75rem);
    }
}

/* Records share the workspace surface. Its navigation remains a set of real
   controls, followed by content with no parent panel or inset well. */
#dashboardView .dossier-panel {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#dashboardView .sidebar-nav {
    margin: 0 0 .55rem;
    padding: 0;
    border-bottom: 0;
}

#dashboardView .sidebar-nav .sidebar-tabs {
    gap: .4rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#dashboardView .sidebar-tab-btn {
    min-height: 42px;
    background: rgba(8, 16, 27, .72);
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: var(--radius-btn);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#dashboardView .sidebar-tab-btn.active {
    background: var(--tb);
}

#dashboardView .sidebar-content-well {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#dashboardView .sidebar-tab-content {
    padding: 0;
}

/* The collection and filter controls define the Records browser; only the
   records beneath them move. Keeping that scroll ownership at the list level
   prevents the controls from drifting out of view and removes the tiny nested
   horizontal scrollbar created by filter rows wider than the pane. */
#dashboardView .dossier-panel,
#dashboardView .sidebar-content-well,
#dashboardView .sidebar-tab-content:not(.d-none) {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

#dashboardView .sidebar-tab-content:not(.d-none) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

#dashboardView .sidebar-filter-toolbar,
#dashboardView .sidebar-tab-content > .sidebar-filter-nav {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

#dashboardView .sidebar-filter-toolbar {
    margin-top: 0;
    margin-bottom: .2rem;
    padding-block: .25rem;
}

#dashboardView .sidebar-filter-toolbar--people {
    margin-bottom: .2rem;
}

#dashboardView .sidebar-filter-toolbar .sidebar-filter-nav,
#dashboardView .sidebar-tab-content > .sidebar-filter-nav {
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: visible;
}

#dashboardView .dossier-list,
#dashboardView #peopleList,
#dashboardView #loreList {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    box-sizing: border-box;
    /* The empty leading strip begins beneath the subtractive fade. At rest the
       first record is fully visible; while scrolling, records pass through the
       fixed fade instead of clipping abruptly below the filters. */
    padding-top: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .2) transparent;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .34) 5px, #000 14px, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .34) 5px, #000 14px, #000 100%);
}

#dashboardView .dossier-list > *,
#dashboardView #peopleList > *,
#dashboardView #loreList > * {
    /* Records retain their authored dimensions. The list, rather than its
       children, owns overflow and scrolling. */
    flex: 0 0 auto;
    max-width: 100%;
}

#dashboardView .dossier-list::-webkit-scrollbar,
#dashboardView #peopleList::-webkit-scrollbar,
#dashboardView #loreList::-webkit-scrollbar {
    width: 5px;
}

#dashboardView .dossier-list::-webkit-scrollbar-track,
#dashboardView #peopleList::-webkit-scrollbar-track,
#dashboardView #loreList::-webkit-scrollbar-track {
    background: transparent;
}

#dashboardView .dossier-list::-webkit-scrollbar-thumb,
#dashboardView #peopleList::-webkit-scrollbar-thumb,
#dashboardView #loreList::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .2);
    border-radius: 999px;
}

@media (min-width: 992px) {
    /* Records begin below the floating primary navigator instead of appearing
       pinned to the application chrome. */
    #dashboardView .dossier-panel {
        padding-top: calc(2.3125rem + 1.25rem);
    }
}

@media (max-width: 991.98px) {
    body.game-body[data-active-view="dashboard"] #mapBackground #mapCanvas {
        filter: blur(9px) saturate(.46) brightness(.52);
        opacity: .4;
    }

    #dashboardStory .story-messages,
    #dashboardStory .cabinet-mode-messages {
        padding: calc(var(--tab-bar-h) + 1rem) 2.15rem 7rem;
    }

    #dashboardStory .story-beat-navigator {
        right: 0;
        border-right: 0;
    }

    #dashboardStory .story-ask-toggle {
        top:calc(var(--tab-bar-h) + .75rem);
    }

    #dashboardStory .story-input-container {
        padding-inline: .45rem;
    }

    /* The records drawer is a real modal surface on mobile and intentionally
       keeps its enclosing sheet. */
    #dashboardView .dossier-panel {
        padding: .55rem .7rem .75rem;
        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);
    }
}


/* ── Unified Parliament workspace ─────────────────────────────────────────
   Parliament shares Story's single-surface hierarchy. The legislation and
   chamber columns are regions of one workspace; only actual controls and
   authored game objects retain card treatment. */
body.game-body[data-active-view="parliament"] #mapBackground #mapCanvas {
    filter: blur(8px) saturate(.52) brightness(.58);
    opacity: .48;
    transform: scale(1.018);
}

body.game-body[data-active-view="parliament"] #mapScrim.map-scrim--active {
    background: rgba(1, 6, 14, .52);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#parliamentView {
    --parl-workspace-rule: linear-gradient(
        to bottom,
        transparent 0,
        rgba(61, 169, 255, .24) 10%,
        rgba(73, 177, 255, .82) 50%,
        rgba(61, 169, 255, .24) 90%,
        transparent 100%
    );
    position: relative;
    isolation: isolate;
    padding-inline: clamp(.7rem, 1.15vw, 1.05rem);
    background: transparent !important;
}

#parliamentView::before {
    content: none;
}

#parliamentView .parl-view-wrap {
    gap: .45rem;
    padding: 0;
}

#parliamentView .parl-view-body {
    gap: 0;
}

#parliamentView .parl-left-col {
    position: relative;
    padding-right: 1rem;
}

#parliamentView .parl-left-col::after {
    content: "";
    position: absolute;
    top: .45rem;
    right: 0;
    bottom: .45rem;
    width: 1px;
    pointer-events: none;
    background: var(--parl-workspace-rule);
    box-shadow: 0 0 16px rgba(58, 161, 255, .2);
}

#parliamentView .parl-right-col {
    padding-left: 1rem;
}

#parliamentView .parl-catalogue-card,
#parliamentView .parl-focus-details-card,
#parliamentView .parl-chamber-card {
    padding: .65rem .15rem .75rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* The three record modes remain tangible controls, but no longer sit inside
   another card. The luminous rule carries the visual hierarchy. */
#parliamentView .parl-record-nav,
#parliamentView .parl-detail-mode-nav {
    position: relative;
    gap: .48rem;
    margin: 0;
    padding: .2rem .1rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#parliamentView .parl-chamber-lower-stage::before {
    content: "";
    position: absolute;
    right: .1rem;
    bottom: 0;
    left: .1rem;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(57, 168, 255, .78), rgba(57, 168, 255, .2) 48%, transparent 94%);
    box-shadow: 0 0 12px rgba(57, 168, 255, .14);
}

#parliamentView .parl-record-tab,
#parliamentView .parl-detail-mode-tab {
    background: rgba(5, 12, 22, .68);
    border-color: rgba(135, 169, 210, .17);
    border-radius: 9px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#parliamentView .parl-record-tab.active,
#parliamentView .parl-detail-mode-tab.active {
    background: rgba(32, 76, 119, .34);
    border-color: rgba(93, 172, 247, .42);
}

#parliamentView .parl-legislation-list,
#parliamentView .parl-legislation-list.is-agenda {
    padding: 14px .15rem 1rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(110, 157, 207, .2) transparent;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .34) 5px, #000 14px, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .34) 5px, #000 14px, #000 100%);
}

#parliamentView .parl-legislation-list::-webkit-scrollbar { width: 5px; }
#parliamentView .parl-legislation-list::-webkit-scrollbar-track { background: transparent; }
#parliamentView .parl-legislation-list::-webkit-scrollbar-thumb {
    background: rgba(110, 157, 207, .2);
    border-radius: 999px;
}

#parliamentView .parl-business-heading {
    margin: .05rem .2rem .55rem;
}

#parliamentView .parl-business-empty {
    min-height: 118px;
    padding: 1.15rem;
    border: 0;
    border-radius: 10px;
    background: rgba(3, 9, 17, .12);
}

#parliamentView .parl-business-empty.is-actionable {
    border: 1px dashed rgba(148, 163, 184, .16);
}

#parliamentView .parl-business-empty-icon {
    margin-bottom: .55rem;
}

#parliamentView .parl-new-legislation-card {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    margin: .65rem 0 0;
    padding: .65rem 1rem;
    background: rgba(59, 130, 246, .045);
    border: 1px dashed rgba(96, 165, 250, .38);
    border-radius: 10px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#parliamentView .parl-focus-details-hd {
    padding: 0 .2rem;
}

#parliamentView .parl-detail-mode-nav {
    align-self: stretch;
}

#parliamentView .parl-detail-mode-tab {
    justify-content: center;
}

#parliamentView .parl-overview-sheet,
#parliamentView .parl-focus-well {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#parliamentView .parl-overview-sheet {
    padding: .85rem .25rem;
}

#parliamentView .parl-focus-well {
    overflow: hidden;
}

#parliamentView .parl-article-index {
    background: rgba(3, 10, 18, .2);
    border-right-color: rgba(80, 164, 238, .22);
}

#parliamentView .parl-well-inner {
    padding: .8rem .2rem .8rem .85rem;
}

#parliamentView .parl-focus-actions-row {
    position: relative;
    padding-top: .3rem;
    border-top: 0;
}

#parliamentView .parl-focus-actions-row::before {
    content: none;
}

/* Legislation focus follows the same anchored-controls / scrolling-records model as
   Records and the legislation browser. The empty leading strip means the first item
   is fully visible at rest; content only enters the subtractive fade as it
   scrolls beneath the detail navigation. */
#parliamentView .parl-detail-mode-nav::after {
    content: none;
}

/* Let the scrolling record occupy the quiet space around the anchored tabs
   and actions. Its edge fades below those controls instead of ending early. */
#parliamentView .parl-focus-details-card.has-hero .parl-focus-body {
    margin-top: -.6rem;
    margin-bottom: -1.1rem;
}

#parliamentView .parl-overview-sheet,
#parliamentView .parl-detail-pane-effects,
#parliamentView .parl-well-inner {
    padding-top: 12px;
    padding-bottom: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(110, 157, 207, .2) transparent;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .42) 4px, #000 12px, #000 calc(100% - 18px), rgba(0, 0, 0, .5) calc(100% - 7px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .42) 4px, #000 12px, #000 calc(100% - 18px), rgba(0, 0, 0, .5) calc(100% - 7px), transparent 100%);
}

#parliamentView .parl-overview-sheet::-webkit-scrollbar,
#parliamentView .parl-detail-pane-effects::-webkit-scrollbar,
#parliamentView .parl-well-inner::-webkit-scrollbar { width: 5px; }

#parliamentView .parl-overview-sheet::-webkit-scrollbar-track,
#parliamentView .parl-detail-pane-effects::-webkit-scrollbar-track,
#parliamentView .parl-well-inner::-webkit-scrollbar-track { background: transparent; }

#parliamentView .parl-overview-sheet::-webkit-scrollbar-thumb,
#parliamentView .parl-detail-pane-effects::-webkit-scrollbar-thumb,
#parliamentView .parl-well-inner::-webkit-scrollbar-thumb {
    background: rgba(110, 157, 207, .2);
    border-radius: 999px;
}

#parliamentView .parl-detail-pane-effects {
    flex-direction: column;
    min-height: 0;
    padding-right: .2rem;
    padding-left: .2rem;
}

#parliamentView .parl-detail-pane-effects .parl-projected-effects,
#parliamentView .parl-detail-pane-effects .parl-effects-empty {
    flex: 0 0 auto;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The focus hero is atmosphere on the shared workspace, not an opaque panel.
   It begins at the Parliament content edge and dissolves into the map-backed
   material instead of painting a dark rectangle through the whole column. */
@media (min-width: 701px) {
    #parliamentView.is-legislation-focus {
        overflow: visible;
    }

    #parliamentView.is-legislation-focus .parl-focus-details-card.has-hero {
        padding-left: .8rem !important;
    }

    #parliamentView.is-legislation-focus .parl-view-wrap,
    #parliamentView.is-legislation-focus .parl-view-body,
    #parliamentView.is-legislation-focus .parl-left-col,
    #parliamentView.is-legislation-focus #parlDetailView,
    #parliamentView.is-legislation-focus #parlDetailView > div,
    #parliamentView.is-legislation-focus .parl-focus-details-card.has-hero {
        overflow: visible;
    }
}

#parliamentView .parl-focus-details-card.has-hero {
    overflow: hidden;
}

#parliamentView .parl-focus-panel-art {
    inset: 0 0 auto;
    height: clamp(420px, 56vh, 640px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 56%, rgba(0, 0, 0, .92) 68%, rgba(0, 0, 0, .7) 82%, rgba(0, 0, 0, .28) 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 56%, rgba(0, 0, 0, .92) 68%, rgba(0, 0, 0, .7) 82%, rgba(0, 0, 0, .28) 94%, transparent 100%);
}

#parliamentView .parl-focus-panel-art img {
    display: block;
    height: 100%;
    object-position: center;
    filter: saturate(.96) contrast(1.03) brightness(.84);
    -webkit-mask-image: none;
    mask-image: none;
}

#parliamentView .parl-focus-panel-art::after {
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 7, 14, .68) 0%, rgba(2, 7, 14, .24) 58%, rgba(2, 7, 14, .03) 100%),
        linear-gradient(0deg, transparent 0%, rgba(2, 7, 14, .04) 30%, rgba(2, 7, 14, .12) 100%);
}

@media (min-width: 701px) {
    #parliamentView .parl-focus-panel-art {
        /* Continue the legislation atmosphere beneath the shared view tabs instead of
           clipping it at the Parliament content boundary. Bleed through the
           workspace and Bootstrap gutters so no bare strip remains at the
           viewport edge; the foreground content keeps its own inset. */
        top: -2.3125rem;
        right: -1rem;
        left: calc(-1 * (clamp(.7rem, 1.15vw, 1.05rem) + var(--bs-gutter-x, 1.5rem)));
        height: calc(clamp(420px, 56vh, 640px) + 2.3125rem);
    }
}

/* The chamber is a visualization region, not another enclosing card. Its
   party rows retain their useful interaction affordance on the open surface. */
#parliamentView .parl-chamber-card {
    padding-left: .05rem !important;
    padding-bottom: 0 !important;
}

#parliamentView .parl-chamber-parties {
    position: relative;
    padding-top: .8rem;
}

#parliamentView .parl-chamber-lower-stage::before {
    top: 0;
    bottom: auto;
    background: linear-gradient(90deg, transparent, rgba(57, 168, 255, .3) 20%, rgba(57, 168, 255, .3) 80%, transparent);
}

#parliamentView .parl-legend-list {
    padding: .1rem 0 .35rem;
    background: transparent;
    border: 0;
    border-radius: 0;
}

#parliamentView .parl-legend-item {
    border-radius: 5px;
}

#parliamentView .parl-chamber-card.showing-party-detail {
    padding: .65rem .1rem .75rem !important;
}

#parliamentView .parl-party-detail-view {
    padding: .35rem .2rem .75rem;
}

@media (max-width: 760px) {
    body.game-body[data-active-view="parliament"] #mapBackground #mapCanvas {
        filter: blur(9px) saturate(.46) brightness(.52);
        opacity: .4;
    }

    #parliamentView { padding-inline: .5rem; }

    #parliamentView.is-legislation-focus {
        padding-left: 0;
    }

    #parliamentView .parl-view-wrap { gap: .35rem; }

    #parliamentView.is-legislation-focus .parl-view-wrap {
        padding-left: 0;
    }

    #parliamentView.is-legislation-focus .parl-mobile-pane-nav {
        margin-left: .5rem;
    }

    #parliamentView .parl-left-col,
    #parliamentView .parl-right-col {
        padding-inline: 0;
    }

    #parliamentView .parl-left-col::after { display: none; }

    #parliamentView .parl-mobile-pane-nav {
        position: relative;
        gap: .4rem;
        padding: .1rem .05rem .7rem;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    #parliamentView .parl-mobile-pane-nav::after {
        content: none;
    }

    #parliamentView .parl-mobile-pane-nav button {
        min-height: 36px;
        background: rgba(5, 12, 22, .68);
        border: 1px solid rgba(135, 169, 210, .17);
        border-radius: 8px;
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
    }

    #parliamentView .parl-mobile-pane-nav button.active {
        background: rgba(32, 76, 119, .34);
        border-color: rgba(93, 172, 247, .4);
    }

    #parliamentView .parl-catalogue-card,
    #parliamentView .parl-focus-details-card,
    #parliamentView .parl-chamber-card {
        padding-top: .45rem !important;
    }

    #parliamentView .parl-focus-details-card {
        gap: .45rem;
        padding-right: .35rem !important;
        padding-left: .35rem !important;
    }

    #parliamentView.is-legislation-focus .parl-focus-details-card.has-hero {
        padding-left: .8rem !important;
    }

    #parliamentView .parl-focus-details-card.has-hero .parl-focus-body {
        margin: 0 -.05rem;
    }

    #parliamentView .parl-focus-panel-art {
        inset: 0 0 auto;
        height: clamp(285px, 42vh, 360px);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, .88) 70%, rgba(0, 0, 0, .52) 86%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, .88) 70%, rgba(0, 0, 0, .52) 86%, transparent 100%);
    }

    #parliamentView .parl-focus-panel-art img {
        object-position: center;
    }

    #parliamentView .parl-focus-details-hd {
        padding-inline: .05rem;
    }

    #parliamentView .parl-focus-details-title {
        font-size: clamp(1rem, 4.8vw, 1.22rem);
        line-height: 1.16;
    }

    #parliamentView .parl-detail-mode-nav {
        gap: .22rem;
        padding-block: .12rem;
    }

    #parliamentView .parl-detail-mode-tab {
        min-height: 48px;
        gap: .24rem;
        padding: .32rem .24rem;
        font-size: .64rem;
        line-height: 1.14;
    }

    #parliamentView .parl-detail-mode-tab svg {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
    }

    #parliamentView .parl-detail-mode-tab strong {
        min-width: 17px;
        padding-inline: .24rem;
    }

    #parliamentView .parl-article-index {
        gap: .2rem;
        max-height: 66px;
        padding: .25rem .12rem;
        background: transparent;
        border-bottom-color: rgba(80, 164, 238, .22);
    }

    #parliamentView .parl-article-index-item {
        flex: 1 0 116px;
        min-height: 54px;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: .35rem;
        padding: .34rem .38rem;
    }

    #parliamentView .parl-article-index-item .parl-article-index-number {
        font-size: 1.2rem;
    }

    #parliamentView .parl-article-index-item strong {
        font-size: .64rem;
        line-height: 1.2;
    }

    #parliamentView .parl-overview-sheet,
    #parliamentView .parl-detail-pane-effects,
    #parliamentView .parl-well-inner {
        padding-top: 8px;
        padding-bottom: 14px;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 12px), transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 12px), transparent 100%);
    }

    #parliamentView .parl-well-inner {
        padding-right: .08rem;
        padding-left: .12rem;
    }

    #parliamentView .parl-article-row {
        padding: .72rem;
    }

    #parliamentView .parl-article-header {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: .62rem;
    }

    #parliamentView .parl-article-number {
        padding-right: .55rem;
    }

    #parliamentView .parl-article-number strong {
        font-size: 1.5rem;
    }

    #parliamentView .parl-article-header h3 {
        font-size: .92rem;
    }

    #parliamentView .parl-article-content {
        margin-top: .52rem;
    }

    #parliamentView .parl-article-detail {
        font-size: .79rem;
        line-height: 1.48;
    }
}

/* ── Unified Campaign workspace ───────────────────────────────────────────
   Campaign follows the same map-backed, single-surface language as Story
   and Parliament. The two columns are regions of one workspace; controls
   and actual campaign records remain tangible without enclosing panel cards. */
body.game-body[data-active-view="campaign"] #mapBackground #mapCanvas {
    filter: blur(8px) saturate(.52) brightness(.58);
    opacity: .48;
    transform: scale(1.018);
}

body.game-body[data-active-view="campaign"] #mapScrim.map-scrim--active {
    background: rgba(1, 6, 14, .52);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#campaignView {
    --campaign-workspace-rule: linear-gradient(
        to bottom,
        transparent 0,
        rgba(61, 169, 255, .24) 10%,
        rgba(73, 177, 255, .82) 50%,
        rgba(61, 169, 255, .24) 90%,
        transparent 100%
    );
    position: relative;
    isolation: isolate;
    padding-inline: clamp(.7rem, 1.15vw, 1.05rem);
    background: transparent !important;
    overflow: hidden;
}

#campaignView .campaign-view-wrap {
    padding: 0 0 .65rem;
}

#campaignView .campaign-workspace {
    gap: .45rem;
}

#campaignView .campaign-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(320px, .9fr);
    gap: 0;
}

#campaignView .campaign-operations-card,
#campaignView .campaign-poll-card,
#campaignView .campaign-platform-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#campaignView .campaign-operations-card {
    position: relative;
    padding: .65rem 1rem .75rem .15rem !important;
}

#campaignView .campaign-operations-card::after {
    content: "";
    position: absolute;
    top: .45rem;
    right: 0;
    bottom: .45rem;
    width: 1px;
    pointer-events: none;
    background: var(--campaign-workspace-rule);
    box-shadow: 0 0 16px rgba(58, 161, 255, .2);
}

/* Active and Archived stay anchored as standalone controls. */
#campaignView .campaign-record-nav {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    gap: .48rem;
    margin: 0;
    padding: .2rem .1rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#campaignView .campaign-record-nav .parl-record-tab {
    background: rgba(5, 12, 22, .68);
    border-color: rgba(135, 169, 210, .17);
    border-radius: 9px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#campaignView .campaign-record-nav .parl-record-tab.active {
    background: rgba(32, 76, 119, .34);
    border-color: rgba(93, 172, 247, .42);
}

/* Campaign records own the scroll. The short subtractive mask lets records
   recede beneath the fixed collection controls without fading at rest. */
#campaignView .campaign-operation-list,
#campaignView .parl-legislation-list.campaign-operation-list {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 14px .15rem 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: transparent;
    border: 0;
    border-radius: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(110, 157, 207, .2) transparent;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .34) 5px, #000 14px, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .34) 5px, #000 14px, #000 100%);
}

#campaignView .campaign-operation-list::-webkit-scrollbar { width: 5px; }
#campaignView .campaign-operation-list::-webkit-scrollbar-track { background: transparent; }
#campaignView .campaign-operation-list::-webkit-scrollbar-thumb {
    background: rgba(110, 157, 207, .2);
    border-radius: 999px;
}

#campaignView .campaign-operation-list > *,
#campaignView .campaign-operation-list .parl-business-cards > * {
    flex: 0 0 auto;
    max-width: 100%;
}

#campaignView .parl-business-empty {
    min-height: 118px;
    padding: 1.15rem;
    border: 1px dashed rgba(148, 163, 184, .16);
    border-radius: 10px;
    background: rgba(3, 9, 17, .12);
}

#campaignView .campaign-story-launch,
#campaignView .campaign-platform-add {
    background: rgba(59, 130, 246, .045);
    border: 1px dashed rgba(96, 165, 250, .38);
    border-radius: 10px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Tracking is one vertically scrolling region. Polling and platform are
   separated by a luminous rule rather than two nested shells. */
#campaignView .campaign-side-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    min-height: 0;
    padding: .65rem .15rem .75rem 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(110, 157, 207, .2) transparent;
}

#campaignView .campaign-side-column::-webkit-scrollbar { width: 5px; }
#campaignView .campaign-side-column::-webkit-scrollbar-track { background: transparent; }
#campaignView .campaign-side-column::-webkit-scrollbar-thumb {
    background: rgba(110, 157, 207, .2);
    border-radius: 999px;
}

#campaignView .campaign-poll-card,
#campaignView .campaign-platform-card {
    flex: 0 0 auto;
    min-height: auto;
    padding: .15rem .1rem 1rem !important;
    overflow: visible;
}

#campaignView .campaign-platform-card {
    position: relative;
    padding-top: 1rem !important;
}

#campaignView .campaign-platform-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: .1rem;
    left: .1rem;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(57, 168, 255, .58), rgba(57, 168, 255, .12) 55%, transparent);
    box-shadow: 0 0 12px rgba(57, 168, 255, .12);
}

#campaignView .campaign-section-heading {
    margin-bottom: .5rem;
    padding-inline: .1rem;
}

#campaignView .campaign-poll-summary {
    width: fit-content;
    margin: 0 0 .35rem;
    padding: .2rem .55rem;
    background: rgba(59, 130, 246, .08);
    border-color: rgba(96, 165, 250, .18);
    border-radius: 999px;
}

#campaignView .campaign-poll-list {
    gap: 0;
}

#campaignView .campaign-poll-row {
    min-height: 31px;
    padding: .28rem .25rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
    border-radius: 0;
}

#campaignView .campaign-poll-row.is-player {
    background: linear-gradient(90deg, rgba(59, 130, 246, .15), rgba(59, 130, 246, .025) 72%, transparent);
    border-left: 2px solid rgba(96, 165, 250, .78);
}

#campaignView .campaign-platform-list {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}

@media (max-width: 760px) {
    body.game-body[data-active-view="campaign"] #mapBackground #mapCanvas {
        filter: blur(9px) saturate(.46) brightness(.52);
        opacity: .4;
    }

    #campaignView {
        padding-inline: .5rem;
    }

    #campaignView .campaign-view-wrap {
        padding-bottom: .5rem;
    }

    #campaignView .campaign-workspace {
        gap: .35rem;
    }

    #campaignView .campaign-mobile-pane-nav {
        position: relative;
        gap: .4rem;
        padding: .1rem .05rem .7rem;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    #campaignView .campaign-mobile-pane-nav::after {
        content: "";
        position: absolute;
        right: .05rem;
        bottom: 0;
        left: .05rem;
        height: 1px;
        background: linear-gradient(90deg, rgba(57, 168, 255, .7), rgba(57, 168, 255, .14) 58%, transparent);
    }

    #campaignView .campaign-mobile-pane-nav button {
        min-height: 36px;
        background: rgba(5, 12, 22, .68);
        border: 1px solid rgba(135, 169, 210, .17);
        border-radius: 8px;
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
    }

    #campaignView .campaign-mobile-pane-nav button.active {
        background: rgba(32, 76, 119, .34);
        border-color: rgba(93, 172, 247, .4);
        box-shadow: none;
    }

    #campaignView .campaign-operations-card,
    #campaignView .campaign-side-column {
        padding: .45rem .05rem .65rem !important;
    }

    #campaignView .campaign-operations-card::after {
        display: none;
    }
}


/* One close affordance across in-game overlays, modal cards, and detail panes. */
body.game-body .game-close-button,
#menuSettingsClose.game-close-button,
#loadGameModal .game-close-button {
    box-sizing: border-box;
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
    appearance: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

body.game-body .game-close-button svg,
#menuSettingsClose.game-close-button svg,
#loadGameModal .game-close-button svg {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
    pointer-events: none;
}

body.game-body .game-close-button:hover,
#menuSettingsClose.game-close-button:hover,
#loadGameModal .game-close-button:hover {
    color: var(--text-primary);
    background: transparent;
    border-color: var(--color-neutral-border);
    opacity: 1;
    transform: none;
}

body.game-body .game-close-button:focus-visible,
#menuSettingsClose.game-close-button:focus-visible,
#loadGameModal .game-close-button:focus-visible {
    outline: 2px solid rgba(96, 165, 250, .9);
    outline-offset: 2px;
}

@media (any-pointer: coarse) {
    body.game-body .game-close-button,
    #menuSettingsClose.game-close-button,
    #loadGameModal .game-close-button {
        flex-basis: 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORY DOCUMENT FLOW — prose, mechanics annotation, and full-width choices
   ═══════════════════════════════════════════════════════════════════════════ */
.dm-response-stack {
    --story-stack-overlap: 0px;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    margin-bottom: 1.35rem;
}

.story-prose-stage {
    overflow: visible;
    border-radius: 0;
}

.story-prose-stage > .story-message.story-narrative {
    padding: 0 0.45rem;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.story-prose-stage > .story-message.story-narrative .response-title {
    font-size: clamp(1.55rem, 2.1vw, 2rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.dm-response-stack > .outcome-card,
.dm-response-stack > .suggested-actions-card {
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
    filter: none;
    box-shadow: none;
}

.dm-response-stack > .outcome-card,
#majorEventOverlay .story-payload-box {
    z-index: auto;
    margin: 0 0.45rem;
    padding: 0.9rem 1rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, .1), transparent 42%),
        linear-gradient(145deg, rgba(18, 23, 35, .99), rgba(10, 13, 22, .99));
    border: 0;
    border-radius: var(--radius-card);
}

/* Events use the Story package and headers, with only column spacing adapted. */
#majorEventOverlay .story-payload-box {
    margin: 0 0 1rem;
    box-shadow: none;
}
#meEventPayload:not(:has(.me-payload-block, .me-wm-row > *, .me-linked-row > *)) {
    display: none;
}
#meEventPayload .me-effects-row,
#meEventPayload .me-wm-row,
#meEventPayload .me-linked-row { margin: 0; }
#meEventPayload .me-effects-row:not(:empty) + .me-wm-row:not(:empty) { margin-top: 0.55rem; }
#meEventPayload .me-payload-block { margin-bottom: 0.55rem; }
#meEventPayload .me-payload-block:last-child { margin-bottom: 0; }
#majorEventOverlay .story-beat-utilities { margin: 0 0.2rem 1rem; }
#majorEventOverlay .me-decision .me-response-section {
    margin-top: 0;
    padding-top: 0.9rem;
}

/* Every payload family uses the same confident section-header hierarchy. */
.story-payload-box .outcome-section-label,
#majorEventOverlay .event-suggested-actions-label {
    margin-bottom: 0.58rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.055em;
}

.story-immediate-effects-family {
    display: grid;
    gap: 0.68rem;
}

.dm-response-stack > .suggested-actions-card {
    z-index: auto;
    margin: 0 0.2rem;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
}

.suggested-actions-card .suggested-moves-wrapper {
    margin: 0;
    padding: 0;
}

.suggested-moves-header {
    display: flex;
    align-items: center;
    min-height: 2.2rem;
    gap: 0.55rem;
    padding: 0.72rem 0.6rem 0;
    border-bottom: 0;
}

.suggested-actions-card .suggested-moves-label {
    flex: 0 0 auto;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.story-beat-utilities {
    margin: -0.55rem 0.65rem;
}

.story-beat-utilities .story-feedback-controls {
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    border: 0;
}

.story-beat-utilities .story-feedback-status:empty {
    display: none;
}

.story-beat-utilities .story-narration-replay {
    margin-left: auto;
}

.suggested-actions-card .move-cards-grid,
.suggested-actions-card .skeleton-moves-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 0.72rem 0.6rem 0;
}

.suggested-actions-card .move-cards-grid--1 {
    grid-template-columns: minmax(0, 1fr);
}

.suggested-actions-card .move-cards-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.suggested-actions-card .move-cards-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

:is(.suggested-actions-card, .event-suggested-actions) .move-card {
    min-width: 0;
    min-height: 6rem;
    padding: 0.82rem 0.86rem 0.78rem;
    gap: 0.6rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.1), transparent 48%),
        linear-gradient(145deg, rgba(17, 23, 35, 0.96), rgba(10, 13, 22, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-card);
    transform: none;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.14);
}

:is(.suggested-actions-card, .event-suggested-actions) .move-card + .move-card {
    border-top-color: rgba(148, 163, 184, 0.2);
}

:is(.suggested-actions-card, .event-suggested-actions) .move-card:hover,
:is(.suggested-actions-card, .event-suggested-actions) .move-card:focus-visible {
    background:
        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.17), transparent 50%),
        linear-gradient(145deg, rgba(20, 29, 45, 0.99), rgba(11, 16, 27, 0.99));
    border-color: color-mix(in srgb, var(--primary-color) 42%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

:is(.suggested-actions-card, .event-suggested-actions) .move-card-title {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.25;
}

:is(.suggested-actions-card, .event-suggested-actions) .move-card-action-btn {
    box-sizing: border-box;
    margin: auto 0 0;
    padding: 0.38rem 0.62rem;
    color: color-mix(in srgb, var(--primary-color) 54%, white);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 72%, transparent);
    border-radius: var(--radius-btn);
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggested-actions-card.story-card-skeleton {
    padding-top: 0.15rem;
}

.suggested-actions-card.story-card-skeleton .skeleton-section-label--actions {
    margin: 0 0.6rem 0.45rem;
}

.suggested-actions-card .skeleton-bar--move {
    height: 6rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: var(--radius-card);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.1);
}

.suggested-actions-card .skeleton-bar--move + .skeleton-bar--move {
    border-top-color: rgba(148, 163, 184, 0.16);
}

.outcome-card.card--content-ready .outcome-section,
.outcome-card.card--content-ready .effect-chip,
.outcome-card.card--content-ready .story-parliament-panel {
    animation: story-payload-item-in 420ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
}

.outcome-card.card--content-ready .person-introduction-card,
.outcome-card.card--content-ready .person-update-card {
    /* Release the entrance transform so the card's hover transition can lift it. */
    animation: story-payload-item-in 420ms cubic-bezier(0.16, 0.82, 0.24, 1) backwards;
}

.outcome-card.card--content-ready .outcome-section:nth-child(2) { animation-delay: 55ms; }
.outcome-card.card--content-ready .outcome-section:nth-child(3) { animation-delay: 110ms; }
.outcome-card.card--content-ready .outcome-section:nth-child(n+4) { animation-delay: 165ms; }

@media (max-width: 700px) {
    .story-prose-stage > .story-message.story-narrative {
        padding-inline: 0.15rem;
    }

    .dm-response-stack > .outcome-card {
        margin-inline: 0.1rem;
    }

    .suggested-moves-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .suggested-actions-card .move-cards-grid,
    .suggested-actions-card .skeleton-moves-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: 0.15rem;
    }

    .story-beat-utilities {
        margin-inline: 0.15rem;
    }
}

@media (max-width: 430px) {
    .suggested-actions-card .move-cards-grid,
    .suggested-actions-card .skeleton-moves-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Keep the political field anchored while its contents crossfade into focus. */
#parliamentView .parl-left-col { view-transition-name: legislation-workspace; }
#parlSeatMap { view-transition-name: political-field; }
#parlChamberContext { view-transition-name: political-summary; min-height: 2.4rem; }
#parlPartyLegend { view-transition-name: political-roster; }
::view-transition-group(legislation-workspace),
::view-transition-group(political-field),
::view-transition-group(political-summary),
::view-transition-group(political-roster) { animation-duration: 220ms; animation-timing-function: ease; }
::view-transition-old(legislation-workspace), ::view-transition-new(legislation-workspace),
::view-transition-old(political-field), ::view-transition-new(political-field),
::view-transition-old(political-summary), ::view-transition-new(political-summary),
::view-transition-old(political-roster), ::view-transition-new(political-roster) { animation-duration: 220ms; }
::view-transition { pointer-events: none; }

::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* View-transition snapshots occupy a top layer above ordinary z-index.
   Capture the navigation separately so overflowing hero art stays behind it. */
.game-header { view-transition-name: game-navigation-header; }
.game-subheader { view-transition-name: game-navigation-tabs; }
::view-transition-group(game-navigation-header),
::view-transition-group(game-navigation-tabs) {
    z-index: 10;
    animation: none;
}
::view-transition-old(game-navigation-header),
::view-transition-old(game-navigation-tabs) { display: none; }
::view-transition-new(game-navigation-header),
::view-transition-new(game-navigation-tabs) {
    animation: none;
    mix-blend-mode: normal;
}

.map-detail-panel[data-active-type="organization"] { --organization-panel-bg: #090c12; background: var(--organization-panel-bg); }
.map-detail-panel[data-active-type="organization"] .map-panel-scroll-area,
.map-detail-panel[data-active-type="organization"] .map-detail-topbar { background: var(--organization-panel-bg); }
.map-detail-panel[data-active-type="organization"] .map-detail-topbar { border-bottom: 0; }
.map-organization-members { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .72rem; line-height: 1.55; }
.map-organization-members li { display: inline-flex; align-items: center; gap: 6px; color: #a7b2c3; }
.map-organization-members li:not(:last-child)::after { content: '·'; margin: 0 7px 0 1px; }
.map-organization-member-flag { width: 22px; height: 15px; object-fit: contain; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; flex: 0 0 auto; }

/* Developer screenshot switch: retain the map itself and the game chrome. */
body.dev-hide-map-overlays #mapControlsGroup,
body.dev-hide-map-overlays #mapMobileControlsToggle,
body.dev-hide-map-overlays #mapMobileControlsBackdrop,
body.dev-hide-map-overlays #mapBackground .map-float-controls,
body.dev-hide-map-overlays #mapLegendStrip,
body.dev-hide-map-overlays #mapHoverTip,
body.dev-hide-map-overlays .game-content.map-view-active .game-subheader {
    display: none !important;
}

/* Recovery shares the thinking panel's material, with room for its actions. */
.story-message.dm-thinking.story-failure-panel {
    max-height: none;
    padding: 1.25rem;
    border-color: var(--color-negative-border);
}
.story-failure-panel h4 { margin: 0 0 .65rem; font-size: 1rem; color: var(--text-primary); }
.story-failure-panel p { margin: 0; font-size: .95rem; }
.story-failure-panel .mandate-story-action { flex: 0 1 auto; min-width: 150px; }

button.persistent-update-card { width: 100%; text-align: left; font: inherit; cursor: pointer; }
button.persistent-update-card:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }

/* Spoken dialogue stays inline; entity links retain their own semantic colours. */
:root { --story-dialogue-color: #f1e4cc; }
.narrative-dialogue { color: var(--story-dialogue-color); font-weight: 500; }
a .narrative-dialogue, button .narrative-dialogue,
.narrative-clickable .narrative-dialogue, .narrative-chip .narrative-dialogue,
strong .narrative-dialogue, .narrative-highlight .narrative-dialogue { color: inherit; font-weight: inherit; }

/* National vitals: a quiet, labelled instrument strip within the existing HUD. */
#statsBar .national-vitals {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    width: 100%;
    max-width: 780px;
    margin-inline: auto;
}
#statsBar .national-vitals .stat-item {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .45rem;
    row-gap: .22rem;
    align-items: center;
    justify-content: start;
    margin: 0;
    padding: .15rem clamp(.65rem, 1.8vw, 1.8rem);
    min-width: 0;
}
#statsBar .national-vitals .stat-item + .stat-item {
    border-left: 1px solid var(--border-color);
}
#statsBar .national-vitals .stat-item > svg {
    grid-column: 1;
    grid-row: 1;
    width: 16px;
    height: 16px;
}
#statsBar .national-vitals .stat-label {
    grid-column: 2;
    grid-row: 1;
    display: block;
    max-width: none;
    opacity: 1;
    color: var(--text-secondary);
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
#statsBar .national-vitals .stat-value {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    box-shadow: none;
    font-size: 1.15rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
    line-height: 1.2;
    color: var(--text-primary);
    overflow: visible;
}
#statsBar .national-vitals .stat-value.sv-mid { color: var(--color-mid) !important; }
#statsBar .national-vitals-growth {
    display: inline-block;
    margin-left: .45rem;
    padding: .16em .5em;
    border: 1px solid var(--color-neutral-border);
    border-radius: var(--radius-pill);
    background: var(--color-neutral-bg);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    vertical-align: middle;
    white-space: nowrap;
}
#statsBar .sv-good .national-vitals-growth { background: var(--color-positive-bg); border-color: var(--color-positive-border); }
#statsBar .sv-mid .national-vitals-growth { background: var(--color-mid-bg); border-color: var(--color-mid-border); }
#statsBar .sv-bad .national-vitals-growth { background: var(--color-negative-bg); border-color: var(--color-negative-border); }
#statsBar #gdpDisplay { white-space: nowrap; }
@media (max-width: 960px) {
    #statsBar .national-vitals { grid-template-columns: 1.2fr 1.4fr 1fr 1fr; }
    #statsBar .national-vitals .stat-item { grid-template-columns: minmax(0, 1fr); padding: .15rem .4rem; justify-items: center; row-gap: .3rem; }
    #statsBar .national-vitals .stat-item > svg { display: block; grid-column: 1; grid-row: 1; }
    /* Keep names available to assistive technology when the visual label collapses. */
    #statsBar .national-vitals .stat-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    #statsBar .national-vitals .stat-value { font-size: .85rem; }
    #statsBar .national-vitals-growth { font-size: .6rem; margin-left: .2rem; }
}
@media (max-width: 430px) {
    #statsBar .national-vitals { grid-template-columns: 1fr 1.2fr; row-gap: .55rem; }
    #statsBar .national-vitals .stat-item { grid-template-columns: 14px minmax(0, 1fr); grid-template-rows: auto; gap: .25rem; padding: 0 .25rem; justify-items: start; }
    #statsBar .national-vitals .stat-item > svg { width: 14px; height: 14px; }
    #statsBar .national-vitals .stat-value { grid-column: 2; grid-row: 1; font-size: .75rem; letter-spacing: -.04em; }
    #statsBar .national-vitals .stat-item:nth-child(3) { border-left: 0; }
}

/* Keep every Statistics category within reach on narrow displays. */
@media (max-width: 960px) {
    .sd-category-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .2rem; }
    .sd-category-nav a { min-width: 0; min-height: 44px; padding: .35rem .1rem; gap: 0; }
    .sd-category-nav a > span:not(.sd-nav-icon) { display: none; }
}

/* Regime changes use the Dossier reveal's image treatment at milestone scale. */
.world-object-reveal-card.government-transition-card {
    min-height: 0;
    border-color: var(--color-mid-border);
    background: var(--bg-primary);
    cursor: default;
    box-shadow: var(--shadow);
}
.world-object-reveal-card.government-transition-card:hover {
    transform: none;
    border-color: var(--color-mid-border);
}
.government-transition-card .world-object-reveal-image {
    z-index: 0;
    width: 100%;
    opacity: .72;
    mask-image: none;
    -webkit-mask-image: none;
}
.government-transition-card .world-object-reveal-image::after {
    inset: 0;
    filter: none;
    background: linear-gradient(90deg, rgba(9,14,22,.98) 0%, rgba(9,14,22,.88) 32%, rgba(9,14,22,.18) 100%),
                linear-gradient(0deg, rgba(9,14,22,.75), transparent 65%);
}
.government-transition-card .world-object-reveal-main {
    min-height: 0;
    padding: 20px 24px;
    gap: 5px;
}
.government-transition-card .world-object-reveal-kicker {
    color: var(--color-mid);
    margin-bottom: 10px;
}
.government-transition-from {
    color: var(--text-secondary);
    font-size: .85rem;
}
.government-transition-from span { margin-left: 8px; color: var(--color-mid); }
.government-transition-card .world-object-reveal-main > strong {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -.025em;
}
.government-transition-card .world-object-reveal-description {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: .85rem;
}
@media (max-width: 575.98px) {
    .government-transition-card .world-object-reveal-main { padding: 18px 20px; }
}

.world-object-reveal-card.energy-transition-card,
.world-object-reveal-card.energy-transition-card:hover { border-color: rgba(55, 205, 225, .4); }
.energy-transition-card .world-object-reveal-kicker { color: #65dbea; margin-bottom: 5px; }
.energy-transition-card .world-object-reveal-main > strong { font-size: 1.5rem; line-height: 1.25; }
.energy-transition-card .world-object-reveal-main { padding-block: 24px; }

/* Organization facts: membership is a status; headquarters is a location. */
.map-organization-status.effect-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .48rem .7rem;
    margin-top: .2rem;
    font-size: .78rem;
    font-weight: 650;
}
.map-organization-location {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: .3rem;
}
.map-organization-location-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--radius-btn);
    color: var(--text-secondary);
    background: var(--color-neutral-bg);
    border: 1px solid var(--color-neutral-border);
}
.map-organization-location strong {
    color: var(--text-primary);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
}

.inherited-card-flag-image { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Artwork-sized shared frame; padded exports are positioned inside this crop. */
.flag-artwork-frame {
    display: inline-block;
    position: relative;
    overflow: hidden;
    box-sizing: content-box;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--text-primary) 72%, transparent);
    vertical-align: middle;
}
.flag-artwork-frame > img {
    position: absolute !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    object-fit: fill !important;
}
.country-info .country-flag-small .flag-artwork-frame > img,
.country-identity-trigger .country-flag-small .flag-artwork-frame > img { border: 0 !important; box-shadow: none; }

/* Sent Ask questions keep the shared message shape with their own purple accent. */
.story-message.story-player-action.ask-player-question {
    border-left-color: color-mix(in srgb, var(--purple-color) 70%, white);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3), inset 0 0 0 1px color-mix(in srgb, var(--purple-color) 12%, transparent);
}