/* ============================================================
   VybeCiv — Design System
   Theme: Dark Empire / Civilization
   ============================================================ */

/* Fonts are self-hosted in lib/fonts.css (linked from index.html before this
   file). A render-blocking third-party @import at the top of the stylesheet
   meant the game lost its typography offline or on a CDN failure. */

:root {
    /* --- Core Palette --- */
    --bg-base:        #0a0c10;
    --bg-panel:       #0f1318;
    --bg-card:        #151b22;
    --bg-card-hover:  #1c2430;
    --bg-raised:      #1e2733;

    /* --- Gold/Accent --- */
    --gold:           #c9a84c;
    --gold-light:     #e2c06b;
    --gold-dark:      #9a7b2e;
    --gold-glow:      rgba(201, 168, 76, 0.25);

    /* --- Status --- */
    --green:          #4caf50;
    --green-dark:     #388e3c;
    --green-glow:     rgba(76, 175, 80, 0.2);
    --red:            #e53935;
    --red-dark:       #b71c1c;
    --red-glow:       rgba(229, 57, 53, 0.2);
    --orange:         #ff8f00;
    --orange-dark:    #e65100;
    --blue:           #2196f3;
    --blue-dark:      #0d47a1;
    --purple:         #9c27b0;

    /* --- Text --- */
    --text-bright:    #f0e6d2;
    --text-main:      #c8bfad;
    --text-dim:       #7a7060;
    --text-gold:      var(--gold-light);

    /* --- Borders --- */
    --border-subtle:  rgba(201, 168, 76, 0.12);
    --border-gold:    rgba(201, 168, 76, 0.4);
    --border-bright:  rgba(201, 168, 76, 0.7);

    /* --- Resource colours --- */
    --col-food:       #66bb6a;
    --col-prod:       #ffa726;
    --col-science:    #42a5f5;
    --col-gold-res:   var(--gold);
    --col-stone:      #b0bec5;
    --col-wood:       #a5d6a7;
    --col-iron:       #90a4ae;
    --col-horses:     #ce93d8;

    /* --- Sizing --- */
    --sidebar-w:      310px;
    --radius-sm:      4px;
    --radius-md:      7px;
    --radius-lg:      12px;
    --gap-xs:         4px;
    --gap-sm:         8px;
    --gap-md:         14px;
    --gap-lg:         22px;

    /* --- Fonts ---
       Every stack ends in the platform's emoji font. The UI uses emoji as its
       icon set, and several of them — ⚔ ⚙ ⚗ ⛰ ⚓ — are TEXT-presentation
       characters by default: without an emoji font in the chain they resolve
       to a monochrome glyph from Cinzel, so the first thing a player saw was
       "× Begin Empire" where the sword should be. */
    --emoji:          'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
    --font-title:     'Cinzel', var(--emoji), serif;
    --font-body:      'Source Sans 3', 'Segoe UI', var(--emoji), sans-serif;
    --font-flavor:    'Crimson Text', Georgia, var(--emoji), serif;

    /* --- Transitions --- */
    --tx-fast:        0.15s ease;
    --tx-med:         0.25s ease;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    background: var(--bg-base);
    color: var(--text-main);
    display: flex;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Game Canvas Area
   ============================================================ */
#gameCanvas {
    flex: 1;
    background: #050709;
    overflow: hidden;
    position: relative;
}

/* ============================================================
   Sidebar
   ============================================================ */
#sidebar {
    width: var(--sidebar-w);
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    height: 100vh;
    border-left: 1px solid var(--border-gold);
    box-shadow: -4px 0 24px rgba(0,0,0,0.6);
    flex-shrink: 0;
}

/* Header */
.sidebar-header {
    padding: 14px 16px 12px;
    background: linear-gradient(160deg, #1a1209 0%, #0f0d08 100%);
    border-bottom: 1px solid var(--border-gold);
    text-align: center;
    position: relative;
}

.sidebar-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.sidebar-header h1 {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 2px;
    /* Cinzel's lowercase ARE small caps: "VybeCiv" reads V·ybe C·iv. */
    text-transform: none;
    text-shadow: 0 0 20px var(--gold-glow);
}

.sidebar-header .subtitle {
    font-family: var(--font-flavor);
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    margin-top: 2px;
}

/* Scrollable content */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;

    /* A fade at the bottom edge whenever there is more below. The column
       scrolled with a 4px scrollbar and no other cue, so 218px of content —
       including the only way to found a city — read as simply absent. */
    background:
        linear-gradient(var(--bg-panel) 30%, transparent) top / 100% 24px no-repeat,
        linear-gradient(transparent, var(--bg-panel) 70%) bottom / 100% 28px no-repeat,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.5), transparent) top / 100% 12px no-repeat,
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.5), transparent) bottom / 100% 14px no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.sidebar-content::-webkit-scrollbar { width: 4px; }
.sidebar-content::-webkit-scrollbar-track { background: transparent; }
.sidebar-content::-webkit-scrollbar-thumb {
    background: var(--border-gold);
    border-radius: 2px;
}

/* Footer */
.sidebar-footer {
    padding: 10px 10px;
    border-top: 1px solid var(--border-gold);
    background: var(--bg-panel);
}

/* ============================================================
   Section Cards
   ============================================================ */
.section-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    transition: border-color var(--tx-fast);
}

.section-card:hover {
    border-color: var(--border-gold);
}

/* ---- Projects ------------------------------------------------------------
   Ascension is built now, so it needs a control and a clock. */
.project-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.project-row:last-child { border-bottom: none; }
.project-row.available { cursor: pointer; }
.project-row.available:hover .project-name { color: var(--gold); }

.project-head { display: flex; align-items: baseline; gap: 8px; }
.project-name { font-weight: 600; font-size: 12px; color: var(--text-bright); }
.project-turns { margin-left: auto; font-size: 11px; color: var(--gold); }
.project-sub { font-size: 10px; color: var(--text-dim); margin-top: 3px; line-height: 1.35; }

.project-bar {
    height: 4px; border-radius: 2px; background: var(--bg-raised);
    overflow: hidden; margin: 5px 0 3px;
}
.project-bar-fill { height: 100%; background: var(--gold); }

/* A rival's Project is the pressure — colour it as a threat. */
.project-row.rival .project-turns { color: #ef4444; }
.project-row.rival .project-bar-fill { background: #ef4444; }

/* A Project you cannot start yet, and why. Dimmed, because it is a signpost
   rather than a button — but present, because a victory condition nobody can
   see is one nobody plays towards. */
.project-row.locked { opacity: 0.6; cursor: default; }
.project-row.locked .project-name { color: var(--text-dim); }
.project-row.locked .project-sub { font-style: italic; }

/* ---- Tier node panel -----------------------------------------------------
   What each tier below is sending you, and what would raise it. */
.node-row {
    padding: 7px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.node-row:last-child { border-bottom: none; }

.node-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}
.node-name { font-weight: 600; font-size: 12px; color: var(--text-bright); }
.node-sub { font-size: 10px; color: var(--text-dim); }

.node-share {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
}
.node-share.blockaded { color: #ef4444; }

.node-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-raised);
    overflow: hidden;
    margin-bottom: 4px;
}
.node-bar-fill { height: 100%; background: var(--gold); }
.node-bar-fill.blockaded { background: #ef4444; }

.node-flow { font-size: 10px; color: var(--text-main); }
.node-hint { font-size: 10px; color: var(--text-dim); font-style: italic; margin-top: 2px; }

/* City food and production totals — the yields that no longer pool. */
.city-totals {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 7px 4px 2px;
    font-size: 11px;
    color: var(--text-main);
}

.city-yields {
    margin-left: 6px;
    font-size: 10px;
    color: var(--text-dim);
}

/* ---- Next-action hint ----------------------------------------------------
   One line, top of the column, saying what the game is waiting for. */
.next-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.05));
    border: 1px solid var(--border-gold);
    color: var(--text-bright);
    font-size: 12px;
    line-height: 1.35;
}

.next-action .na-icon { font-size: 15px; flex: 0 0 auto; }
.next-action.hidden { display: none; }

/* ---- Collapsible reference panels ----------------------------------------
   Map Navigation and Current Age are reference, not action. Open they cost
   230px of a 553px column, which is what pushed the unit actions and the
   research control off the bottom of the screen. Collapsed they keep their
   single most useful line visible and give the space back. */
.section-card.collapsible {
    padding: 0;
}

.section-card.collapsible > summary {
    list-style: none;
    cursor: pointer;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.section-card.collapsible > summary::-webkit-details-marker { display: none; }

/* A caret that rotates, so "there is more here" is visible without a click. */
.section-card.collapsible > summary::after {
    content: '';
    margin-left: auto;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--text-dim);
    border-bottom: 1.5px solid var(--text-dim);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--tx-fast);
}

.section-card.collapsible[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.section-card.collapsible > summary:hover { color: var(--text-bright); }

.section-card.collapsible > *:not(summary) {
    margin-left: 12px;
    margin-right: 12px;
}

.section-card.collapsible > *:last-child { margin-bottom: 12px; }

/* The summary line carries the information the open panel would have shown,
   so collapsing costs the player nothing at a glance. */
.section-card.collapsible > summary > span:not(.icon) {
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: none;
    color: var(--text-bright);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-card h3 {
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-card h3 .icon { font-size: 13px; }

.section-card h4 {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-bright);
    margin: 8px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ============================================================
   Turn / Age Row (top resource bar inside sidebar)
   ============================================================ */
#turn-age-row {
    display: flex;
    gap: 6px;
    justify-content: space-between;
}

.turn-age-pill {
    flex: 1;
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    text-align: center;
    font-size: 11px;
}

.turn-age-pill .label {
    color: var(--text-dim);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.turn-age-pill .value {
    color: var(--text-bright);
    font-weight: 600;
    font-size: 12px;
}

/* ============================================================
   Resources Grid
   ============================================================ */
.resources-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.res-item {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-raised);
    border-radius: var(--radius-sm);
    padding: 4px 7px;
    border: 1px solid var(--border-subtle);
    font-size: 11px;
    transition: border-color var(--tx-fast);
}

.res-item:hover { border-color: var(--border-gold); }

.res-icon { font-size: 12px; line-height: 1; }

.res-body { flex: 1; min-width: 0; }
.res-name {
    color: var(--text-dim);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.res-val {
    color: var(--text-bright);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
}
.res-rate {
    font-size: 9px;
    line-height: 1.2;
}
.res-rate.pos { color: var(--green); }
.res-rate.neg { color: var(--red); }
.res-rate.zero { color: var(--text-dim); }

/* ============================================================
   Research Bar
   ============================================================ */
.research-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 6px 9px;
}

.research-icon { font-size: 14px; }

.research-info { flex: 1; min-width: 0; }
.research-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.research-progress { font-size: 10px; color: var(--text-dim); }

.research-bar {
    height: 3px;
    background: rgba(33,150,243,0.15);
    border-radius: 2px;
    margin-top: 3px;
    overflow: hidden;
}
.research-bar-fill {
    height: 100%;
    background: var(--blue);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ============================================================
   Age Display
   ============================================================ */
#ageDisplay {
    background: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, rgba(201,168,76,0.03) 100%);
    border: 1px solid var(--border-gold);
}

#ageDisplay h2 {
    font-family: var(--font-title);
    font-size: 13px;
    color: var(--gold-light);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.age-description {
    font-family: var(--font-flavor);
    font-size: 11px;
    font-style: italic;
    color: var(--text-dim);
    margin-bottom: 6px;
}

#ageProgress {
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
    margin: 4px 0;
}

#ageProgressBar {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    border-radius: 3px;
    transition: width 0.5s ease;
}

#ageProgressText {
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 6px;
}

#advanceAgeBtn {
    display: none;
    width: 100%;
    margin-top: 6px;
}

/* ============================================================
   Unit Panel
   ============================================================ */
#unitMenu {
    border-color: rgba(229,57,53,0.3);
    background: linear-gradient(135deg, rgba(229,57,53,0.05) 0%, var(--bg-card) 100%);
}

#unitMenu h3 { color: #ef9a9a; }

.unit-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.unit-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-raised);
    border: 1px solid var(--border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.unit-name-block { flex: 1; min-width: 0; }
.unit-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.unit-owner {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 1px;
}

/* Stat bars */
.unit-stats { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }

.stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

.stat-label {
    width: 22px;
    text-align: right;
    color: var(--text-dim);
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.stat-bar-wrap {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.stat-bar-fill.hp  { background: linear-gradient(90deg, var(--red-dark), var(--green)); }
.stat-bar-fill.hp.low { background: var(--red); }
.stat-bar-fill.hp.mid { background: var(--orange); }
.stat-bar-fill.hp.full { background: var(--green); }
.stat-bar-fill.mp  { background: linear-gradient(90deg, var(--blue-dark), var(--blue)); }

.stat-val {
    width: 32px;
    text-align: right;
    color: var(--text-bright);
    font-weight: 600;
    font-size: 10px;
    flex-shrink: 0;
}

/* Unit action buttons */
.unit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.unit-action-btn {
    flex: 1;
    min-width: 70px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all var(--tx-fast);
    background: var(--bg-raised);
    color: var(--text-main);
    text-align: center;
}
.unit-action-btn:hover {
    border-color: var(--border-gold);
    color: var(--text-bright);
    background: var(--bg-card-hover);
    transform: translateY(-1px);
}
.unit-action-btn.primary {
    background: rgba(33,150,243,0.15);
    border-color: rgba(33,150,243,0.4);
    color: #90caf9;
}
.unit-action-btn.primary:hover { background: rgba(33,150,243,0.25); }
.unit-action-btn.danger {
    background: rgba(229,57,53,0.12);
    border-color: rgba(229,57,53,0.35);
    color: #ef9a9a;
}
.unit-action-btn.danger:hover { background: rgba(229,57,53,0.22); }
.unit-action-btn.success {
    background: rgba(76,175,80,0.12);
    border-color: rgba(76,175,80,0.35);
    color: #a5d6a7;
}
.unit-action-btn.success:hover { background: rgba(76,175,80,0.22); }

/* ============================================================
   City List
   ============================================================ */
.city-row {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 7px 9px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all var(--tx-fast);
    display: flex;
    align-items: center;
    gap: 8px;
}

.city-row:hover {
    border-color: var(--border-gold);
    background: var(--bg-card-hover);
}

.city-icon { font-size: 16px; flex-shrink: 0; }

.city-info { flex: 1; min-width: 0; }
.city-name-text {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.city-details {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 1px;
}

.city-pop {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
    flex-shrink: 0;
}

/* One header per tier, and only when there is more than one tier to head. */
.city-group-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 4px 2px 3px;
    margin-top: 4px;
    border-bottom: 1px solid var(--border-subtle);
}
.city-group-head:first-child { margin-top: 0; }
.city-group-head--here {
    color: var(--gold);
    border-bottom-color: var(--border-gold);
}

/* ============================================================
   Tech Menu
   ============================================================ */
.tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(76,175,80,0.15);
    border: 1px solid rgba(76,175,80,0.3);
    color: #a5d6a7;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 2px;
}

/* ============================================================
   Hex Info
   ============================================================ */
#hexInfo {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    background: var(--bg-card);
}

#hexInfo h4 {
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: 1.2px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.hex-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding: 2px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.hex-info-row:last-child { border-bottom: none; }
.hex-info-key { color: var(--text-dim); }
.hex-info-val { color: var(--text-bright); font-weight: 500; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--bg-raised);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tx-fast);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.btn:hover {
    border-color: var(--border-gold);
    color: var(--text-bright);
    background: var(--bg-card-hover);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

.btn:active { transform: translateY(0); box-shadow: none; }

.btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-success {
    background: rgba(76,175,80,0.15);
    border-color: rgba(76,175,80,0.4);
    color: #a5d6a7;
}
.btn-success:hover {
    background: rgba(76,175,80,0.28);
    border-color: var(--green);
    color: #e8f5e9;
}

.btn-warning {
    background: rgba(255,143,0,0.12);
    border-color: rgba(255,143,0,0.4);
    color: #ffcc80;
}
.btn-warning:hover {
    background: rgba(255,143,0,0.22);
    border-color: var(--orange);
    color: #fff3e0;
}

.btn-error, .btn-danger {
    background: rgba(229,57,53,0.12);
    border-color: rgba(229,57,53,0.4);
    color: #ef9a9a;
}
.btn-error:hover, .btn-danger:hover {
    background: rgba(229,57,53,0.22);
    border-color: var(--red);
    color: #ffcdd2;
}

.btn-gold {
    background: rgba(201,168,76,0.12);
    border-color: var(--border-gold);
    color: var(--gold-light);
}
.btn-gold:hover {
    background: rgba(201,168,76,0.22);
    border-color: var(--border-bright);
    color: #fff;
}

.btn-sm {
    padding: 4px 9px;
    font-size: 11px;
}

.btn-lg {
    padding: 10px 22px;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.btn-full { width: 100%; }

/* End Turn button */
.end-turn-btn {
    width: 100%;
    padding: 11px;
    font-family: var(--font-title);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #1a1209, #1e1a0e);
    border: 1px solid var(--border-gold);
    color: var(--gold-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--tx-med);
    position: relative;
    overflow: hidden;
}

.end-turn-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--gold-glow), transparent);
    opacity: 0;
    transition: opacity var(--tx-med);
}

.end-turn-btn:hover {
    border-color: var(--gold-light);
    color: #fff;
    box-shadow: 0 0 18px var(--gold-glow);
}

.end-turn-btn:hover::before { opacity: 1; }

/* ============================================================
   Map Navigation
   ============================================================ */
#mapNavigation {
    background: rgba(33,150,243,0.05);
    border-color: rgba(33,150,243,0.2);
}

#mapNavigation h3 { color: #90caf9; }

.nav-breadcrumb {
    font-size: 10px;
    color: var(--text-dim);
    background: var(--bg-raised);
    padding: 3px 7px;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-family: var(--font-flavor);
    font-style: italic;
}

.nav-buttons { display: flex; gap: 5px; }

.nav-button {
    flex: 1;
    padding: 5px 0;
    font-size: 11px;
    background: var(--bg-raised);
    border: 1px solid rgba(33,150,243,0.2);
    color: #90caf9;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--tx-fast);
}

.nav-button:hover {
    background: rgba(33,150,243,0.12);
    border-color: rgba(33,150,243,0.5);
}

.nav-button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ============================================================
   Admin Controls
   ============================================================ */
#adminControls {
    background: rgba(229,57,53,0.05);
    border-color: rgba(229,57,53,0.2);
}
#adminControls h3 { color: #ef9a9a; }

#toggleAdminBtn {
    position: fixed;
    top: 8px;
    right: calc(var(--sidebar-w) + 8px);
    background: rgba(229,57,53,0.15);
    border: 1px solid rgba(229,57,53,0.3);
    color: #ef9a9a;
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
    z-index: 500;
    transition: all var(--tx-fast);
    font-family: var(--font-body);
}

#toggleAdminBtn:hover {
    background: rgba(229,57,53,0.25);
    border-color: var(--red);
    color: #ffcdd2;
}

/* ============================================================
   Start Screen
   ============================================================ */
#startScreen {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, #0d1a1a 0%, #050709 70%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.start-container {
    background: linear-gradient(160deg, #0f1318 0%, #0a0c10 100%);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-lg);
    padding: 40px 36px 32px;
    width: 440px;
    max-width: 92vw;
    box-shadow: 0 0 60px rgba(201,168,76,0.12), 0 20px 60px rgba(0,0,0,0.8);
    position: relative;
    overflow: hidden;
}

.start-container::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.start-logo {
    text-align: center;
    margin-bottom: 28px;
}

.start-logo h1 {
    font-family: var(--font-title);
    font-size: 32px;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 4px;
    /* Cinzel's lowercase ARE small caps: "VybeCiv" reads V·ybe C·iv. */
    text-transform: none;
    text-shadow: 0 0 40px var(--gold-glow);
}

.start-logo .tagline {
    font-family: var(--font-flavor);
    font-style: italic;
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 6px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-bright);
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color var(--tx-fast);
}

.form-note {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 6px;
    line-height: 1.4;
}

.form-group select {
    /* Native selects ignore the theme entirely — a white bar on a black card. */
    appearance: none;
    cursor: pointer;
    padding-right: 30px;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                      linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.form-group select option {
    background: var(--bg-raised);
    color: var(--text-bright);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--border-gold);
    box-shadow: 0 0 0 2px var(--gold-glow);
}

.form-group input::placeholder { color: var(--text-dim); }

#startGameBtn {
    width: 100%;
    padding: 13px;
    margin-top: 8px;
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #1a1209, #1e1a0e);
    border: 1px solid var(--border-gold);
    color: var(--gold-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--tx-med);
    position: relative;
    overflow: hidden;
}

#startGameBtn:hover {
    border-color: var(--gold-light);
    color: #fff;
    box-shadow: 0 0 30px var(--gold-glow);
}

/* ============================================================
   Popups
   ============================================================ */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(4px);
}

.popup-overlay.show { display: flex; }

.popup {
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-lg);
    width: 560px;
    max-width: 94vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 50px rgba(0,0,0,0.8), 0 0 30px var(--gold-glow);
    overflow: hidden;
}

.popup-header {
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border-gold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #1a1209, #0f0d08);
    flex-shrink: 0;
}

.popup-title {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.popup-close {
    width: 26px;
    height: 26px;
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tx-fast);
}

.popup-close:hover {
    background: rgba(229,57,53,0.15);
    border-color: rgba(229,57,53,0.4);
    color: var(--red);
}

.popup-content {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
}

.popup-content::-webkit-scrollbar { width: 4px; }
.popup-content::-webkit-scrollbar-thumb { background: var(--border-gold); border-radius: 2px; }

.popup-actions {
    padding: 12px 18px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
    background: var(--bg-panel);
}

/* Production items inside city popup */
.production-item {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
    transition: all var(--tx-fast);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.production-item:hover {
    border-color: var(--border-gold);
    background: var(--bg-card-hover);
}

.production-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-bright);
}

.production-cost {
    font-size: 10px;
    color: var(--text-dim);
    background: var(--bg-card);
    padding: 2px 6px;
    border-radius: 10px;
}

/* ============================================================
   Progress bar (generic)
   ============================================================ */
.progress-bar {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
    margin: 4px 0;
}

.progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* ============================================================
   Notifications
   ============================================================ */
/* Toasts stack in a column. They were each `position: fixed; top: 16px`, so
   two in one turn printed on top of each other. */
#toastStack {
    position: fixed;
    top: 16px;
    right: calc(var(--sidebar-w) + 14px);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
    max-width: 340px;
}

.notification {
    padding: 10px 16px 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    z-index: 10000;
    max-width: 320px;
    word-break: break-word;
    border-left: 3px solid;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    transform: translateX(calc(100% + var(--sidebar-w) + 20px));
    transition: transform var(--tx-med);
    pointer-events: none;
}

.notification.show { transform: translateX(0); }

.notification.success {
    background: rgba(76,175,80,0.15);
    border-color: var(--green);
    color: #c8e6c9;
    backdrop-filter: blur(6px);
}

.notification.error {
    background: rgba(229,57,53,0.15);
    border-color: var(--red);
    color: #ffcdd2;
    backdrop-filter: blur(6px);
}

.notification.warning {
    background: rgba(255,143,0,0.15);
    border-color: var(--orange);
    color: #ffe0b2;
    backdrop-filter: blur(6px);
}

.notification.info {
    background: rgba(33,150,243,0.15);
    border-color: var(--blue);
    color: #bbdefb;
    backdrop-filter: blur(6px);
}

/* ============================================================
   Info row (generic key: value)
   ============================================================ */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 11px;
    border-bottom: 1px solid var(--border-subtle);
}
.info-row:last-child { border-bottom: none; }
.info-key { color: var(--text-dim); }
.info-val { color: var(--text-bright); font-weight: 600; }

/* ============================================================
   Utility classes
   ============================================================ */
.hidden { display: none !important; }
.text-gold  { color: var(--gold-light); }
.text-green { color: var(--green); }
.text-red   { color: var(--red); }
.text-blue  { color: var(--blue); }
.text-dim   { color: var(--text-dim); }
.text-bright { color: var(--text-bright); }
.bold { font-weight: 700; }
.italic { font-style: italic; }
.mt-sm { margin-top: 6px; }
.mt-md { margin-top: 12px; }
.mb-sm { margin-bottom: 6px; }
.mb-md { margin-bottom: 12px; }
.divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 8px 0;
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

/* ============================================================
   Help Modal
   ============================================================ */
.popup-wide {
    width: 680px;
    max-width: 96vw;
}

.help-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding: 18px 20px;
}

.help-section h3 {
    font-family: var(--font-title);
    font-size: 12px;
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.help-section p,
.help-section ul {
    color: var(--text-main);
    line-height: 1.6;
    font-size: 13px;
}

.help-section ul {
    padding-left: 18px;
}

.help-section ul li {
    margin-bottom: 3px;
}

/* Secondary / neutral button */
.btn-secondary {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    color: var(--text-main);
}
.btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
}

/* Rush production — gold button variant */
.btn-gold:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
    :root { --sidebar-w: 270px; }
}

/* The button that opens the sliding panel. Hidden on anything wider. */
#panelToggle {
    display: none;
    position: fixed;
    top: 8px; right: 8px;
    z-index: 901;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    font-size: 20px;
    background: var(--bg-card);
    color: var(--text-bright);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 12px rgba(0,0,0,0.6);
    transition: right 0.22s ease;
}

/* Phones. The sidebar is a fixed 310px column, so on a 375px screen the MAP —
   the game — got 65 pixels. Touch events alone do not make that playable. Below
   620px the map takes the whole screen and the panel slides over it, toggled by
   a button that sits above the canvas. */
@media (max-width: 620px) {
    #sidebar {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(88vw, 340px);
        z-index: 900;
        transform: translateX(100%);
        transition: transform 0.22s ease;
        overscroll-behavior: contain;
    }
    body.panel-open #sidebar { transform: translateX(0); }

    #gameCanvas { width: 100vw; }

    #panelToggle { display: flex; }
    body.panel-open #panelToggle { right: calc(min(88vw, 340px) + 8px); }

    /* Touch targets. 24px buttons are a miss on a finger. */
    .btn, .nav-button, .unit-action-btn, .tier-row, .production-item {
        min-height: 40px;
    }
    .popup { width: 96vw; max-height: 88vh; }
    .popup--wide { width: 96vw; }
    .tt-col { flex-basis: 78vw; }

    /* The admin toggle and the panel button would otherwise overlap. */
    #toggleAdminBtn { top: auto; bottom: 8px; left: 8px; }
}


/* ---------------------------------------------------------------------------
   Tier ladder
   ---------------------------------------------------------------------------
   The three tiers are three PLACES, not three zoom levels. The ladder shows
   which one you are standing in, which you have earned, and which is shut.
   --------------------------------------------------------------------------- */
.tier-ladder { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }

.tier-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: 5px;
    border: 1px solid transparent;
    font-size: 0.82em; color: #9fb0c4;
    cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease;
}
.tier-row:hover { background: rgba(255, 255, 255, 0.05); }

.tier-row--here {
    background: rgba(201, 162, 39, 0.13);
    border-color: rgba(201, 162, 39, 0.5);
    color: #f5e6c8; font-weight: 600; cursor: default;
}
.tier-row--here:hover { background: rgba(201, 162, 39, 0.13); }

.tier-row--locked { opacity: 0.4; cursor: not-allowed; }
.tier-row--locked:hover { background: transparent; }

.tier-mark { width: 1em; text-align: center; }
.tier-name { flex: 1; }
.tier-meta { font-size: 0.85em; color: #6f7d8d; }

.nav-buttons .nav-button:disabled { opacity: 0.45; cursor: not-allowed; }

/* Minimap ------------------------------------------------------------------ */
#minimap {
    width: 100%; height: auto; display: block;
    border-radius: 6px; cursor: crosshair;
    background: #0a0d12;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tech tree ---------------------------------------------------------------- */
/* Five era columns rather than a flat list. The board scrolls sideways; each
   column scrolls on its own so a long age never stretches the others. */

.popup--wide { width: 1180px; }

.popup-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-panel);
    font-size: 12px;
    color: var(--text-main);
    flex-shrink: 0;
}

.tt-legend {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    font-size: 11px; color: var(--text-dim);
    padding-bottom: 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}
.tt-legend .tt-rate { margin-left: auto; color: var(--blue); font-weight: 600; }
.tt-swatch {
    display: inline-block; width: 9px; height: 9px; border-radius: 2px;
    vertical-align: -1px; margin-right: 3px; border: 1px solid var(--border-subtle);
}
.tt-swatch--now       { background: var(--blue); }
.tt-swatch--available { background: var(--gold); }
.tt-swatch--locked    { background: #3a4450; }
.tt-swatch--done      { background: var(--green); }

.tt-board {
    display: flex; gap: 10px; align-items: stretch;
    overflow-x: auto; padding: 10px 2px 4px;
}

.tt-col {
    flex: 0 0 210px;
    display: flex; flex-direction: column;
    background: rgba(255,255,255,0.015);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.tt-col--current  { border-color: var(--border-gold); background: rgba(201,168,76,0.05); }
.tt-col--complete { opacity: 0.82; }

.tt-col-head {
    padding: 8px 10px; border-bottom: 1px solid var(--border-subtle);
    position: sticky; top: 0; background: var(--bg-card); z-index: 1;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tt-col-tier { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.tt-col-name { font-size: 13px; font-weight: 700; color: var(--text-bright); margin-top: 1px; }
.tt-col-meta { font-size: 10px; color: var(--gold); margin-top: 2px; }
.tt-col--complete .tt-col-meta { color: var(--green); }

.tt-col-body {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px; overflow-y: auto; max-height: 52vh;
}
.tt-col-body::-webkit-scrollbar { width: 4px; }
.tt-col-body::-webkit-scrollbar-thumb { background: var(--border-gold); border-radius: 2px; }

.tt-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid #3a4450;
    border-radius: var(--radius-sm);
    padding: 7px 8px;
    cursor: pointer;
    transition: all var(--tx-fast);
}
.tt-card:hover { background: var(--bg-card-hover); transform: translateY(-1px); }

.tt-card--available   { border-left-color: var(--gold); }
.tt-card--researching { border-left-color: var(--blue); background: rgba(33,150,243,0.10); }
.tt-card--done        { border-left-color: var(--green); background: rgba(76,175,80,0.05); opacity: 0.6; }
.tt-card--locked      { opacity: 0.62; }
.tt-card--selected    { border-color: var(--blue) !important; box-shadow: 0 0 10px rgba(33,150,243,0.35); }
.tt-card--path        { border-color: rgba(33,150,243,0.5); background: rgba(33,150,243,0.07); }

.tt-head { display: flex; align-items: center; gap: 6px; }
.tt-icon { font-size: 15px; line-height: 1; }
.tt-name { font-size: 11.5px; font-weight: 600; color: var(--text-bright); }
.tt-goal { color: var(--gold); }

.tt-status { display: block; font-size: 10px; color: var(--text-dim); margin-top: 3px; }
.tt-status--done { color: var(--green); }
.tt-status--now  { color: var(--blue); }

.tt-bar { background: #101820; border-radius: 3px; height: 4px; margin-top: 4px; }
.tt-bar-fill { background: var(--blue); height: 4px; border-radius: 3px; }

.tt-unlocks {
    display: flex; flex-direction: column; gap: 1px;
    font-size: 9.5px; line-height: 1.35; margin-top: 4px;
}
.tt-unlock--unit     { color: #e8a33d; }
.tt-unlock--building { color: #7dcea0; }
.tt-unlock--project  { color: #c9a227; }
.tt-unlock--ability  { color: #5fd3e8; }
.tt-unlock--bonus    { color: #9aa7b8; }

.tt-needs { font-size: 9.5px; color: #e07a6a; margin-top: 4px; }

.tt-foot-now   { color: var(--blue); }
.tt-foot-ready { color: var(--green); }
.tt-foot-hint  { color: var(--text-dim); }
.tt-foot-path  { color: var(--text-main); }

.tt-path {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    margin-top: 5px; font-size: 10.5px;
}
.tt-step {
    background: var(--bg-raised); border: 1px solid var(--border-subtle);
    border-radius: 3px; padding: 1px 5px; color: var(--text-main);
}
.tt-step--first { border-color: var(--gold); color: var(--gold-light); }
.tt-arrow { color: var(--text-dim); }

/* A material store at its ceiling. Surplus above it is wasted, so this is a
   prompt to spend rather than a warning. */
.res-item--full { border-color: rgba(255, 143, 0, 0.45); }
.res-cap { font-size: 0.72em; color: var(--text-dim); margin-left: 1px; }

/* What is being researched, in the sidebar's Research card. The card used to
   go blank the moment research started — an empty heading for most of a game. */
.research-current { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.research-current-icon { font-size: 18px; line-height: 1; }
.research-current-body { flex: 1; min-width: 0; }
.research-current-name { font-size: 12px; font-weight: 600; color: var(--text-bright); }
.research-current-meta { font-size: 10px; color: var(--text-dim); margin: 1px 0 3px; }

/* The one line on the start screen that says where the player is. Most arrive
   at the game directly, not through the portfolio. */
.start-footer { margin-top: 18px; text-align: center; }
.start-footer a {
    font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-dim); text-decoration: none;
    border-bottom: 1px solid transparent; padding-bottom: 2px;
    transition: color var(--tx-fast), border-color var(--tx-fast);
}
.start-footer a:hover { color: var(--gold); border-bottom-color: var(--gold-dark); }

/* The credit beside the way back to the portfolio: a player who liked it can
   find — and tag — whoever made it. */
.start-footer-sep { margin: 0 8px; color: var(--text-dim); }

/* Happiness in the Empire panel — the multiplier on every city's output. */
.mood-line {
    display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    margin-top: 6px; padding: 5px 8px; border-radius: var(--radius-sm);
    font-size: 11px; background: var(--bg-raised);
}
.mood-line--bad { color: var(--orange); }

/* Music toggle: the note stays a note, struck through when off. */
#musicToggleBtn.is-off { opacity: .5; text-decoration: line-through; }