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

:root {
  /* Bronze Age Aegean · Moomin warmth · NES discipline
     These are the ONLY colours used anywhere in the UI.
     Canvas renderer is exempt — it has its own palette. */
  --bg:        #1C1C1C;   /* CHARCOAL   — page background, deep shadow */
  --bg-panel:  #F2EAD3;   /* PLASTER    — papyrus panel face */
  --bg-raised: #FAD7A0;   /* LINEN      — raised / highlight face */
  --warm-white:#FDFEFE;   /* WARM_WHITE — input field background */
  --border:    #E67E22;   /* TERRACOTTA — panel border, dividers */
  --border-in: #6E2C00;   /* ASH_BROWN  — inner shadow, recessed edge */
  --text:      #1C1C1C;   /* CHARCOAL   — body text on light surfaces */
  --text-light:#F2EAD3;   /* PLASTER    — body text on dark surfaces */
  --text-dim:  #615D56;   /* WARM_GREY  — muted / secondary text */
  --accent:    #C0392B;   /* FIRED_CLAY — primary action, headings */
  --sandstone: #F0B27A;   /* SANDSTONE  — button face (sun-lit clay) */
  --gold:      #F9E79F;   /* ORACLE_GOLD— divine glow, global headings */
  --safe:      #D4AC0D;   /* DRY_GRASS  — positive values, support */
  --danger:    #922B21;   /* BLOOD_RED  — collapse, danger states */
  --blood:     #922B21;   /* BLOOD_RED  — combat banners */
  --sea:       #2E86C1;   /* AEGEAN     — sea, join-button */
  --deep-sea:  #1B4F72;   /* DEEP_SEA   — sea text, deep water */
  --moonlight: #D0D8F0;   /* MOONLIGHT  — night celestial body */

  /* Domain accent colours — semantic game UI */
  --accent-war:        #A23A32;
  --accent-city:       #3E6BAA;
  --accent-trade:      #C89A2B;
  --accent-diplomacy:  #7A4AA5;
  --accent-oikos:      #4E7A52;
  --accent-system:     #6C6A68;

  /* Text on papyrus: >= 4.5:1 against --bg-panel.
     Keep the original semantic colours for surfaces, borders and icons. */
  --safe-text:          #786200;
  --accent-trade-text:  #7C5F1B;
  --accent-city-text:   #356095;
  --accent-oikos-text:  #436B47;
  --accent-system-text: #646260;

  /* Notification chip tokens */
  --chip-bg:              rgba(20,18,16,0.88);
  --chip-border:          rgba(28,28,28,0.14);
  --chip-text:            #1C1C1C;   /* CHARCOAL — chips ride the beige (PLASTER) topbar, dark text for contrast */
  --chip-shadow-war:       0 0 14px rgba(162,58,50,0.18);
  --chip-shadow-city:      0 0 14px rgba(62,107,170,0.18);
  --chip-shadow-trade:     0 0 14px rgba(200,154,43,0.18);
  --chip-shadow-diplomacy: 0 0 14px rgba(122,74,165,0.18);
  --chip-shadow-oikos:     0 0 14px rgba(78,122,82,0.18);
  --chip-shadow-system:    0 0 14px rgba(108,106,104,0.18);

  --font: 'Georgia', 'Times New Roman', serif;
  --mono: 'Courier New', monospace;

  /* ── Typographic scale (2026-07-25 — was 164 ad-hoc font-size declarations, no shared
     scale, base 15px; Timothy flagged "text too small" three times in one review pass).
     Each token lists the effective px range it replaces, measured against the OLD 15px
     base. Small steps are lifted proportionally more than large ones; --fs-xs sits at the
     13px floor (no UI text may go smaller). ── */
  --fs-xs:   13px;  /* was 8–9.9px      (~0.55–0.66rem @15px) — smallest badges/counters */
  --fs-sm:   14px;  /* was 10–12.75px   (~0.67–0.85rem @15px) — chips, drawer metadata, help text */
  --fs-base: 17px;  /* was 13–15px      (~0.87–1rem @15px)    — body text; new html/body base (was 15px) */
  --fs-md:   18px;  /* was 15.75–16.5px (~1.05–1.1rem @15px) */
  --fs-lg:   22px;  /* was 21px         (1.4rem @15px) */
  --fs-xl:   28px;  /* was 27px         (1.8rem @15px) */
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  min-height: 100vh;
}

/* Payroll must remain legible inside the arrival forecast's muted container. */
.march-sold { color: var(--text); font-size: var(--fs-xs); }

/* Subtle hex-grid background texture via SVG data URI */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpolygon points='28,2 54,17 54,47 28,62 2,47 2,17' fill='none' stroke='%23d8a840' stroke-width='1'/%3E%3Cpolygon points='28,52 54,67 54,97 28,112 2,97 2,67' fill='none' stroke='%23d8a840' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 100px;
}

main, .topbar, footer { position: relative; z-index: 1; }

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-weight: normal;
  letter-spacing: 0.05em;
  color: var(--gold);
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.5rem;
  border-bottom: 2px solid var(--border);
  background: var(--bg-panel);
  box-shadow: 0 2px 0 var(--border-in);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-size: var(--fs-lg);
  letter-spacing: 0.25em;
  color: var(--accent);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--mono);
}

.nav-links { display: flex; gap: 1.4rem; }
.nav-links a { color: var(--text-dim); font-size: var(--fs-sm); font-family: var(--mono); letter-spacing: 0.1em; }
.nav-links a:hover { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }

/* ── Main layout ────────────────────────────────────────────── */
main { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
footer {
  text-align: center;
  padding: 1rem;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--border);
  margin-top: 3rem;
}

/* ── Auth page — hide chrome, full-bleed hero ─────────────── */
body:has(.auth-page) .topbar,
body:has(.auth-page) footer { display: none; }

body:has(.auth-page) main {
  max-width: none;
  padding: 0;
  margin: 0;
}

.auth-page {
  width: 100%;
  min-height: 100vh;
}

/* ── Hero artwork ─────────────────────────────────────────── */
.auth-artwork {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.auth-artwork-img {
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center 20%;
  image-rendering: pixelated;
  animation: herobreath 8s ease-in-out infinite alternate;
}
@keyframes herobreath {
  from { transform: scale(1.00); }
  to   { transform: scale(1.03); }
}

/* Opening-theme toggle — top-right overlay on the hero artwork, same
   semantics + localStorage key as the in-game ♫ (misc.js toggleMusic /
   map.html's .mzo-btn), styled to match its small square icon-button look. */
.auth-music-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 5;
  width: 30px; height: 30px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.auth-music-btn:hover { background: var(--bg-raised); color: var(--accent); border-color: var(--accent); }

/* gradient fades: subtle side vignette + bottom darkening behind login */
.auth-artwork-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 40%,
      rgba(15,14,13,0.55) 100%),
    linear-gradient(to right, rgba(15,14,13,0.35) 0%, transparent 10%, transparent 90%, rgba(15,14,13,0.35) 100%);
  pointer-events: none;
}

/* tagline — subtle, sits just above the login overlay */
.auth-hero {
  position: absolute;
  bottom: 13rem;
  left: 0; right: 0;
  text-align: center;
  pointer-events: none;
}
.tagline {
  color: var(--text-light);
  font-style: italic;
  font-size: var(--fs-base);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 4px rgba(15,14,13,0.9), 0 0 20px rgba(15,14,13,0.7);
}

/* ── Auth form panel — overlay at bottom-center of artwork ── */
.auth-forms {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 380px;
  background: color-mix(in srgb, var(--bg-panel) 93%, transparent);
  border: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--bg-raised), inset -1px -1px 0 var(--border-in),
              0 8px 32px rgba(15,14,13,0.6);
  padding: 1.5rem;
}

.tabs { display: flex; margin-bottom: 1.5rem; border-bottom: 2px solid var(--border); }
.tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 0.5rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tab.active { color: var(--accent); border-bottom: 3px solid var(--accent); }

/* ── Forms ──────────────────────────────────────────────────── */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.1em; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--warm-white);
  border: 2px solid var(--border);
  border-radius: 0;
  color: var(--text);
  padding: 0.5rem 0.7rem;
  font-family: var(--mono);
  font-size: var(--fs-base);
}
.field input:focus, .field select:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

.inline-fields { display: flex; gap: 0.5rem; align-items: center; }
.inline-fields label { white-space: nowrap; }

.unit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.unit-row label {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.unit-row input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-light);
  padding: 0.3rem 0.5rem;
  font-family: var(--mono);
}

/* ── Buttons ────────────────────────────────────────────────── */
/* NES-discipline: no rounded corners, no gradients, no drop shadows */
.btn-primary, .btn-secondary, .btn-danger, .btn-small {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  border: 2px solid;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  width: 100%;
  margin-top: 0.5rem;
  border-radius: 0;
}
.btn-primary         { background: var(--sandstone); border-color: var(--border);   color: var(--text); }
.btn-primary:hover   { background: var(--bg-raised); border-color: var(--accent);   color: var(--text); }
.btn-primary:active  { background: var(--accent);    border-color: var(--border-in); color: var(--bg-raised); }
.btn-secondary       { background: var(--bg-panel);  border-color: var(--text-dim); color: var(--border-in); }
.btn-secondary:hover { background: var(--bg-raised); border-color: var(--border);   color: var(--text); }
.btn-danger          { background: var(--bg-panel);  border-color: var(--danger);   color: var(--danger); }
.btn-danger:hover    { background: var(--danger);    border-color: var(--text);     color: var(--bg-panel); }
.btn-small { padding: 0.25rem 0.8rem; font-size: var(--fs-sm); width: auto; margin-top: 0; }
.btn-join        { background: var(--bg-panel); border-color: var(--sea);      color: var(--deep-sea); }
.btn-join:hover  { background: var(--sea);      border-color: var(--deep-sea); color: var(--bg-panel); }

.form-error { color: var(--danger); font-size: var(--fs-sm); min-height: 1.2em; margin-bottom: 0.5rem; }

.worlds-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.worlds-header h2 { margin-bottom: 0; }

.create-panel { max-width: 500px; margin-bottom: 1.5rem; }

.world-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.join-result { font-size: var(--fs-sm); margin-top: 0.4rem; color: var(--text-dim); }

/* ── Pills / tags ───────────────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  font-size: var(--fs-sm);
  border: 1px solid;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.state-forming    { border-color: var(--text-dim); color: var(--text-dim); }
.state-active     { border-color: var(--safe);     color: var(--safe-text); }
.state-collapsing { border-color: var(--danger);   color: var(--danger); }
.state-ended      { border-color: var(--border-in);color: var(--border-in); }

.culture-tag, .kingdom-tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  border: 1px solid var(--border);
  margin-left: 0.5rem;
}

/* ── Panels — papyrus scroll on fired-clay tablet ─────────────── */
.panel {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--bg-raised), inset -1px -1px 0 var(--border-in);
  padding: 1.2rem;
  color: var(--text);
}
.panel h3 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}
.empty-state { color: var(--text-dim); font-style: italic; font-size: var(--fs-base); }
/* Unit card selected from the map (render/map.js click → warFocusUnit) */
.ucard-focus { outline: 2px solid var(--accent-war); outline-offset: -2px; background: var(--bg-raised); }

/* ── Worlds page ────────────────────────────────────────────── */
.page-worlds h2 { margin-bottom: 1.5rem; }
.world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.world-card {
  display: block;
  background: var(--bg-panel);
  border: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--bg-raised), inset -1px -1px 0 var(--border-in);
  padding: 1.2rem;
  color: var(--text);
  transition: border-color 0.15s;
}
.world-card:hover { border-color: var(--accent); text-decoration: none; }
.world-name { font-size: var(--fs-md); color: var(--accent); margin-bottom: 0.6rem; }
.world-meta { display: flex; gap: 0.8rem; font-size: var(--fs-sm); color: var(--text-dim); flex-wrap: wrap; margin-bottom: 0.4rem; }
.world-date { font-size: var(--fs-sm); color: var(--text-dim); }

/* ── Province page ──────────────────────────────────────────── */
.province-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.province-stats { display: flex; gap: 1rem; font-size: var(--fs-base); }

.province-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 700px) { .province-grid { grid-template-columns: 1fr; } }

/* Resource bar — Settlers 2 style */
.resource-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-panel);
  border-bottom: 2px solid var(--border);
  height: 40px; /* was 34px — .res-info stacks --fs-xs + --fs-base at line-height:1.1;
                   the bigger typography scale left ~1px of headroom at 34px, bumped for safety */
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: 1rem;
}
.res {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border-right: 1px solid var(--border);
  height: 100%;
  white-space: nowrap;
  flex-shrink: 0;
}
.res-icon { width: 18px; height: 18px; image-rendering: pixelated; flex-shrink: 0; }
.res-info  { display: flex; flex-direction: column; line-height: 1.1; }
.res-name  { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; font-family: var(--mono); }
.res-val   { font-size: var(--fs-base); font-weight: bold; color: var(--accent); font-family: var(--mono); }
.res-rate  { font-size: var(--fs-xs); color: var(--border-in); font-family: var(--mono); }
.res-mood  { font-size: var(--fs-sm); color: var(--gold); }

/* Army table */
.army-table { width: 100%; border-collapse: collapse; }
.army-table td { padding: 0.25rem 0; font-size: var(--fs-base); }
.army-table td.num { text-align: right; font-family: var(--mono); color: var(--gold); }

/* Build queue */
.build-queue { list-style: none; }
.build-queue li { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.building-type { text-transform: capitalize; }
.complete-at { color: var(--text-dim); font-family: var(--mono); font-size: var(--fs-sm); }

/* March list */
.march-list { list-style: none; }
.march-list li { padding: 0.3rem 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.intent-tag {
  display: inline-block;
  padding: 0 0.4rem;
  font-size: var(--fs-sm);
  border: 1px solid;
  text-transform: uppercase;
  margin-right: 0.3rem;
}
.march-attack   .intent-tag, .intent-tag.attack    { border-color: var(--danger); color: var(--danger); }
.march-support  .intent-tag, .intent-tag.support   { border-color: var(--safe);   color: var(--safe-text); }
.march-reinforce .intent-tag, .intent-tag.reinforce { border-color: var(--gold);   color: var(--gold); }
.arrives { color: var(--text-dim); font-size: var(--fs-sm); margin-left: 0.5rem; }

/* ── Map page ───────────────────────────────────────────────── */
.map-page { display: flex; flex-direction: column; gap: 0.8rem; }
.map-toolbar { display: flex; align-items: center; gap: 1rem; }
.map-container {
  overflow: auto;
  border: 1px solid var(--border);
  background: #0a0e18;
  max-height: 70vh;
}
#hex-map { display: block; }

.map-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: var(--fs-sm); }
.legend-item { display: flex; align-items: center; gap: 0.3rem; }
.legend-item::before { content: '■'; font-size: var(--fs-base); }
.terrain-plains::before   { color: #c8b97a; }
.terrain-forest::before   { color: #4a7c59; }
.terrain-hills::before    { color: #a08050; }
.terrain-mountain::before { color: #7a7a7a; }
.terrain-coast::before    { color: #d4b483; }
.terrain-sea::before      { color: #2e5f8a; }
.terrain-fog::before      { color: #1a1a2e; }

.tile-tooltip {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 0.2rem 0.5rem;
  font-size: var(--fs-sm);
  font-family: var(--mono);
  pointer-events: none;
  z-index: 200;
}

/* ── Province page panels ───────────────────────────────────── */
.province-page { display:flex; flex-direction:column; gap:.8rem; }
.province-header { display:flex; justify-content:space-between; align-items:center; }
.ph-left { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ph-name { color:var(--accent); margin:0; font-size:var(--fs-lg); }
.ph-right { display:flex; gap:.5rem; }
.stat-chip { background:var(--bg-panel); border:1px solid var(--border); padding:.15rem .5rem; font-size:var(--fs-sm); color:var(--text); font-family:var(--mono); }
.stat-chip strong { color:var(--accent); }
.deposit-chip { color:var(--safe-text); border-color:var(--safe); }
.msg-chip { color:var(--gold); border-color:var(--gold); text-decoration:none; cursor:pointer; }

/* Settlement switcher (shown when player owns multiple settlements) */
.sett-switcher { display:flex; gap:.3rem; flex-wrap:wrap; }
.sett-switch-link { background:var(--bg-panel); border:1px solid var(--border); padding:.2rem .7rem; font-size:var(--fs-sm); font-family:var(--mono); color:var(--text-dim); text-decoration:none; }
.sett-switch-link.active { background:var(--accent); color:var(--text-light); border-color:var(--border-in); }
.sett-switch-link:hover:not(.active) { background:var(--bg-raised); color:var(--text); }

/* Incoming attack banner */
.attack-warn { background:var(--blood); color:var(--bg-raised); padding:.6rem .9rem; border:2px solid var(--border-in); }
.aw-title  { font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.15em; color:var(--gold); font-family:var(--mono); margin-bottom:.2rem; }
.aw-name   { font-size:var(--fs-base); font-weight:bold; }
.aw-detail { font-size:var(--fs-sm); color:var(--bg-raised); margin-top:.2rem; }
.aw-detail strong { color:var(--warm-white); }

.province-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:.8rem;
}
@media(max-width:900px) { .province-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .province-grid { grid-template-columns:1fr; } }

/* Army */
.army-table { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
.army-table td { padding:.2rem 0; vertical-align:middle; }
.army-table td.num { text-align:right; color:var(--accent); font-family:var(--mono); font-weight:bold; }
.unit-icon { image-rendering:pixelated; vertical-align:middle; margin-right:4px; }
.army-dp-row { display:flex; justify-content:space-between; margin-top:.4rem; padding-top:.3rem; border-top:1px solid var(--bg-raised); font-size:var(--fs-sm); }
.army-dp-label { color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.army-dp-val { color:var(--safe-text); font-family:var(--mono); font-weight:bold; }

/* Recruit */
.recruit-grid { display:flex; flex-direction:column; gap:.4rem; }
.recruit-row { display:flex; align-items:center; gap:.4rem; cursor:default; }
.recruit-label { width:60px; font-size:var(--fs-sm); color:var(--text); }
.recruit-cost  { flex:1; font-size:var(--fs-sm); color:var(--text-dim); font-family:var(--mono); }
.recruit-count { width:48px; background:var(--warm-white); border:1px solid var(--border); padding:.2rem; font-size:var(--fs-sm); text-align:center; }
.unit-unavailable { opacity:.35; pointer-events:none; }
.unit-unavailable .recruit-cost { color:var(--text-dim); font-style:italic; }
/* Affordability — can build but lacks resources */
.unit-unaffordable { opacity:.55; }
.unit-unaffordable .recruit-cost { color:var(--danger); font-style:italic; }

/* Build queue */
.bq-list { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.6rem; }
.bq-row  { display:flex; justify-content:space-between; font-size:var(--fs-sm); margin-bottom:2px; }
.bq-name { font-family:var(--mono); color:var(--accent); text-transform:uppercase; letter-spacing:.08em; font-weight:bold; }
.bq-time { color:var(--border-in); font-family:var(--mono); }
.bq-bar-wrap { background:var(--bg-raised); border:1px solid var(--border); height:6px; }
.bq-bar { height:100%; background:var(--accent); transition:width 1s linear; }

/* Buildings */
.bldg-section { margin:.6rem 0; }
.lp-title { font-size:var(--fs-sm); color:var(--text-dim); text-transform:uppercase; letter-spacing:.15em; margin-bottom:.3rem; font-family:var(--mono); }
.bldg-wrap { display:flex; flex-wrap:wrap; gap:3px; }
.bldg-tag    { background:var(--accent);    color:var(--bg-raised); padding:2px 6px; font-size:var(--fs-sm); letter-spacing:.05em; font-family:var(--mono); }
.bldg-tag.l2 { background:var(--text-dim); }
.bldg-tag.l3 { background:var(--border-in); }

/* Build form */
.build-form-wrap { margin-top:.8rem; border-top:1px solid var(--border); padding-top:.8rem; }
.build-select { width:100%; background:var(--warm-white); border:2px solid var(--border); color:var(--text); padding:.4rem; font-size:var(--fs-sm); margin-bottom:0; font-family:var(--mono); }

/* March */
.march-list { list-style:none; display:flex; flex-direction:column; gap:.3rem; }
.march-item { display:flex; align-items:center; gap:.4rem; font-size:var(--fs-sm); }
.intent-badge { font-family:var(--mono); font-size:var(--fs-sm); padding:.1rem .3rem; text-transform:uppercase; letter-spacing:.05em; }
.intent-attack    { background:var(--blood);   color:var(--bg-raised); }
.intent-support   { background:var(--safe);    color:var(--text); }
.intent-reinforce { background:var(--sea);     color:var(--bg-panel); }
.march-target { color:var(--border-in); font-size:var(--fs-sm); font-family:var(--mono); flex:1; overflow:hidden; text-overflow:ellipsis; }
.march-time   { color:var(--text-dim); font-size:var(--fs-sm); white-space:nowrap; }
.march-recall { margin-left:auto; padding:.1rem .35rem; font-size:var(--fs-sm); opacity:.6; }
.march-recall:hover { opacity:1; }
.march-units  { color:var(--border-in); font-size:var(--fs-sm); }
.incoming-header { color:var(--accent); font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.1em; margin:.6rem 0 .3rem; }
.incoming-list { border-top:1px solid var(--border); padding-top:.3rem; }

/* Goods */
.goods-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.goods-table th { text-align:left; font-size:var(--fs-sm); color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; font-family:var(--mono); border-bottom:1px solid var(--border); padding:.15rem 0; }
.goods-table td { padding:.2rem 0; border-bottom:1px solid var(--bg-raised); vertical-align:middle; }
.goods-table tr:last-child td { border-bottom:none; }
.g-name { color:var(--text); }
.g-num  { text-align:right; font-family:var(--mono); color:var(--accent); padding-left:.4rem; }
.g-cat  { font-size:var(--fs-sm); color:var(--text-dim); font-family:var(--mono); }

/* Temple / cult level */
.cult-mood-chip { display:inline-block; padding:.2rem .7rem; font-family:var(--mono); font-size:var(--fs-sm); letter-spacing:.07em; background:var(--gold); color:var(--text); border:1px solid var(--safe); margin-bottom:.3rem; }
.lp-label { font-size:var(--fs-sm); color:var(--text-dim); font-family:var(--mono); }

/* Trade quantity input — small inline number field */
.trade-qty-input { width:100%; background:var(--warm-white); border:1px solid var(--border); color:var(--text); padding:.3rem; font-size:var(--fs-sm); margin:.2rem 0; font-family:var(--mono); }

/* Battle log */
.battle-entry { margin-bottom:.6rem; border-bottom:1px solid var(--bg-raised); padding-bottom:.5rem; }
.battle-entry:last-child { border-bottom:none; }
.battle-meta { display:flex; gap:.5rem; align-items:center; margin-bottom:.25rem; }
.be-intent { font-family:var(--mono); font-size:var(--fs-sm); letter-spacing:.08em; text-transform:uppercase;
  padding:.1rem .35rem; border:1px solid; }
.be-intent-attack    { color:var(--blood); border-color:var(--blood); }
.be-intent-reinforce { color:var(--sea); border-color:var(--sea); }
.be-intent-support   { color:var(--safe-text); border-color:var(--safe); }
.be-when { font-size:var(--fs-sm); color:var(--text-dim); font-family:var(--mono); }
.be-dir     { font-family:var(--mono); font-size:var(--fs-sm); letter-spacing:.06em; padding:.1rem .3rem; }
.be-dir-out { color:var(--safe-text); }
.be-dir-in  { color:var(--danger); }
.battle-report { font-family:var(--mono); font-size:var(--fs-sm); white-space:pre-wrap; line-height:1.5;
  background:var(--bg); color:var(--text-light); padding:.4rem .5rem; margin:0; border:1px solid var(--border-in); }

/* Trade routes en-route list */
.trade-routes-list { margin-top:.3rem; display:flex; flex-direction:column; gap:.25rem; }
.trade-route-row { display:flex; align-items:center; gap:.3rem; font-size:var(--fs-sm); font-family:var(--mono); padding:.15rem 0; border-bottom:1px solid var(--bg-raised); }
.trade-route-row:last-child { border-bottom:none; }
.tr-good { color:var(--text-dim); text-transform:uppercase; font-size:var(--fs-sm); letter-spacing:.06em; flex:1.2; }
.tr-qty  { color:var(--text); }
.tr-bonus { color:var(--safe-text); font-size:var(--fs-sm); }
.tr-arrow { color:var(--text-dim); }
.tr-dest { color:var(--text); flex:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tr-eta  { color:var(--safe-text); font-size:var(--fs-sm); margin-left:auto; }

/* Foundry / craft panel */
.recipe-line { font-size:var(--fs-sm); font-family:var(--mono); color:var(--text-dim); margin:.2rem 0; }

/* Gossip / rumours list */
.gossip-list { margin-top:.3rem; display:flex; flex-direction:column; gap:.4rem; }
.gossip-entry { font-size:var(--fs-sm); border-bottom:1px solid var(--bg-raised); padding-bottom:.4rem; }
.gossip-entry:last-child { border-bottom:none; }
.ge-region { display:block; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim); }
.ge-text { display:block; color:var(--text); margin:.1rem 0; font-style:italic; }
.ge-time { display:block; font-size:var(--fs-sm); color:var(--text-dim); }
.ge-cat-divine_favour .ge-text { color:var(--gold); }
.ge-cat-divine_favour .ge-region { color:var(--gold); }
.ge-cat-divine_wrath .ge-text { color:var(--danger); }
.ge-cat-divine_wrath .ge-region { color:var(--danger); }
.ge-cat-battle .ge-text { color:var(--blood); }
.ge-cat-battle .ge-region { color:var(--blood); }

/* Shared action result line */
.action-result { margin-top:.4rem; font-size:var(--fs-sm); min-height:1em; color:var(--accent); font-family:var(--mono); }

/* ── Kingdom page ───────────────────────────────────────────── */
.kingdom-header { margin-bottom: 1.5rem; }
.kingdom-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.no-kingdom { max-width: 400px; }
.no-kingdom h2 { margin-bottom: 0.5rem; }
.no-kingdom p { color: var(--text-dim); margin-bottom: 1.5rem; }

/* ── Dispossessed page ──────────────────────────────────────── */
.dispossessed-page { text-align: center; padding: 4rem 2rem; }
.dispossessed-page h2 { margin-bottom: 1rem; }
.dispossessed-page p { color: var(--text-dim); margin-bottom: 2rem; }

/* ── Loading state ──────────────────────────────────────────── */
.loading { color: var(--text-dim); font-style: italic; font-size: var(--fs-sm); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }

/* ── Wanaxes (standings) page ──────────────────────────────────── */
.wanaxes-page { padding: 1rem 0; }
.wanaxes-page h2 { margin-bottom: 1rem; }
.wanax-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.wanax-table th { text-align: left; padding: .4rem .6rem; background: var(--bg-panel); border-bottom: 2px solid var(--border); color: var(--text-dim); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; }
.wanax-table td { padding: .35rem .6rem; border-bottom: 1px solid var(--bg-raised); color: var(--text); }
.wanax-table .num-col { text-align: right; font-family: var(--mono); }
.wanax-table .walls-col { font-family: var(--mono); }
.wanax-table .settle-name { font-weight: bold; color: var(--accent); }
.wanax-table .own-row td { background: color-mix(in srgb, var(--bg-raised) 30%, transparent); }
.wanax-table .dim { color: var(--text-dim); }
.culture-tag.small { font-size: var(--fs-sm); padding: .05rem .3rem; }

/* ── Kingdom page extras ────────────────────────────────────── */
.treasury-balance { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.3rem; }
.tr-bal-label { font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim); font-family:var(--mono); }
.tr-bal-val   { font-size:var(--fs-md); font-family:var(--mono); color:var(--gold); }
.tr-tribute   { font-size:var(--fs-sm); color:var(--text-dim); font-family:var(--mono); }
.tr-tribute-val { color:var(--safe-text); }

.borrowed-panel { grid-column: 2 / -1; }
.borrow-form-panel { grid-column: 1 / 2; }
.unit-row input { background:var(--warm-white); border:1px solid var(--border); padding:.25rem .4rem; font-family:var(--mono); font-size:var(--fs-sm); width:100%; }

/* ── Megaron (hub page) ─────────────────────────────────────── */
.megaron-page { display: flex; flex-direction: column; gap: 1.5rem; }

.megaron-hero {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--bg-raised), inset -1px -1px 0 var(--border-in);
  padding: 1.2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
.mh-title { display: flex; flex-direction: column; gap: .2rem; }
.mh-name  { font-size: var(--fs-xl); letter-spacing: .08em; color: var(--accent); margin: 0; }
.mh-world { font-size: var(--fs-sm); font-family: var(--mono); color: var(--text-dim); letter-spacing: .1em; }

.mh-stats { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-end; }
.mh-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}
.mh-stat:first-child { border-left: none; padding-left: 0; }
.mhs-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); font-family: var(--mono); }
.mhs-val   { font-size: var(--fs-md); font-family: var(--mono); color: var(--accent); line-height: 1.2; }
.mhs-rate  { font-size: var(--fs-sm); font-family: var(--mono); color: var(--safe-text); }

.mood-Favorable  { color: var(--safe-text) !important; }
.mood-Indifferent{ color: var(--gold) !important; }
.mood-Suspicious { color: var(--border) !important; }
.mood-Wrathful   { color: var(--danger) !important; }

/* Room grid — 3 columns on wide, 2 on medium, 1 on narrow */
.room-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .room-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .room-grid { grid-template-columns: 1fr; } }

.room-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  background: var(--bg-panel);
  border: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--bg-raised), inset -1px -1px 0 var(--border-in);
  padding: 1.1rem 1.2rem 1rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color .12s, background .12s;
  cursor: pointer;
  min-height: 130px;
}
.room-card:hover { border-color: var(--accent); background: var(--bg-raised); text-decoration: none; }
.room-card--alert { border-color: var(--gold); }
.room-card--alert:hover { border-color: var(--accent); }

.room-lintel {
  display: flex;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .6rem;
}
.room-glyph {
  font-size: var(--fs-lg);
  color: var(--text-dim);
  line-height: 1;
  width: 1.8rem;
  text-align: center;
}
.room-name {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--accent);
  font-family: var(--mono);
}

.room-status {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  font-family: var(--mono);
  flex: 1;
}
.rs-alert { color: var(--gold); }
.rs-dim   { color: var(--text-dim); font-style: italic; }

.room-enter {
  font-size: var(--fs-sm);
  font-family: var(--mono);
  letter-spacing: .1em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: auto;
}
.room-card:hover .room-enter { color: var(--accent); }

/* Nav badge for unread count */
.nav-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--bg-raised);
  font-size: var(--fs-xs);
  font-family: var(--mono);
  padding: .05rem .3rem;
  line-height: 1.4;
  vertical-align: middle;
}

/* ── Labor allocation panel ─────────────────────────────────────────── */
.labor-hint {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin: .2rem 0 .5rem;
  line-height: 1.4;
}
.labor-pool-line {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--accent);
  margin-bottom: .6rem;
}
.labor-pool-line span { font-weight: bold; }
.labor-row {
  margin-bottom: .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.labor-row:last-of-type { border-bottom: none; }
.labor-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .2rem;
}
.labor-good { font-size: var(--fs-sm); color: var(--text); }
.labor-pct {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: bold;
}
.labor-slider {
  width: 100%;
  accent-color: var(--accent);
}
.labor-yield {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  font-family: var(--mono);
  margin-top: .15rem;
}

/* ── Sprint 2: Map-first game shell ─────────────────────────────────────── */

/* Map mode: no topbar/footer chrome, no max-width */
.map-mode { overflow: hidden; height: 100%; }
.map-mode main { max-width: none; padding: 0; margin: 0; height: 100dvh; overflow: hidden; }

/* Game shell: fixed full-screen column layout */
.map-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  position: fixed;
  inset: 0;
}

/* ── Game top bar ──────────────────────────────────────────────────────────── */
.game-topbar {
  display: flex;
  align-items: stretch;
  height: 44px;
  background: var(--bg-panel);
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
  z-index: 50;
  overflow: hidden;
}

/* Wanax name (megaron_plan_wanaxnamn_tilltal.md): identity anchor at the left
   of the topbar, filled in by main.js bootstrap() from /auth/me's wanax_name.
   Always shown (unlike gt-netstatus, which toggles on state). Clickable — opens
   the Account window (ui/account_window.js): the one identity anchor in the
   topbar is also the one door into account settings. */
.gt-wanax {
  padding: 0 0.7rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
}
.gt-wanax:hover { color: var(--accent); }

/* Net-status pill — shown by api.js while a GET is retrying after a network
   error / 5xx, cleared on the first reachable response. Discreet, non-blocking. */
.gt-netstatus {
  display: none;
  padding: 0 0.7rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--gold);
  border-right: 1px solid var(--border);
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.gt-netstatus.visible { display: flex; }

/* Dispatch strip — chips slide in from right */
.gt-dispatch-strip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  overflow: hidden;
  min-width: 0;
}

/* Dismiss-all for the transient chip stream — shown only when the strip is
   crowded enough for one-by-one dismissal to be a chore (see chips.js). */
.dc-dismiss-all {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--chip-border);
  color: var(--text-dim);
  cursor: pointer;
  height: 30px;
  padding: 0 0.4rem;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
}
.dc-dismiss-all:hover { color: var(--accent); border-color: var(--accent); }

.dispatch-chip {
  display: flex;
  align-items: center;
  height: 30px;
  max-width: 200px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--chip-border);
  border-left-width: 3px;
  color: var(--chip-text);
  font-size: var(--fs-sm);
  font-family: var(--mono);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  animation: chipSlideIn 0.38s cubic-bezier(.18,.85,.42,1) both;
  transition: max-width 0.3s ease, opacity 0.25s ease, box-shadow 0.2s ease, background 0.15s ease;
}

.dc-war       { border-left-color: var(--accent-war);       background: rgba(162,58,50,0.13);  box-shadow: var(--chip-shadow-war); }
.dc-city      { border-left-color: var(--accent-city);      background: rgba(62,107,170,0.13); box-shadow: var(--chip-shadow-city); }
.dc-trade     { border-left-color: var(--accent-trade);     background: rgba(200,154,43,0.13); box-shadow: var(--chip-shadow-trade); }
.dc-diplomacy { border-left-color: var(--accent-diplomacy); background: rgba(122,74,165,0.13); box-shadow: var(--chip-shadow-diplomacy); }
.dc-kult     { border-left-color: var(--accent-oikos);     background: rgba(78,122,82,0.13);  box-shadow: var(--chip-shadow-oikos); }
.dc-system    { border-left-color: var(--accent-system);    background: rgba(108,106,104,0.13);box-shadow: var(--chip-shadow-system); }

.dc-war:hover       { background: rgba(162,58,50,0.32); }
.dc-city:hover      { background: rgba(62,107,170,0.32); }
.dc-trade:hover     { background: rgba(200,154,43,0.32); }
.dc-diplomacy:hover { background: rgba(122,74,165,0.32); }
.dc-kult:hover     { background: rgba(78,122,82,0.32); }
.dc-system:hover    { background: rgba(108,106,104,0.32); }

.dc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-width: 26px;
  gap: 3px;
  flex-shrink: 0;
}
.dc-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.dc-war .dc-dot       { background: var(--accent-war); }
.dc-city .dc-dot      { background: var(--accent-city); }
.dc-trade .dc-dot     { background: var(--accent-trade); }
.dc-diplomacy .dc-dot { background: var(--accent-diplomacy); }
.dc-kult .dc-dot     { background: var(--accent-oikos); }
.dc-system .dc-dot    { background: var(--accent-system); }

/* Urgency overrides the domain colour (Timothy 2026-09-25: colour = how
   urgent, the glyph = what about). Declared after the .dc-<domain> rules so
   the same specificity wins by order. Backgrounds mix the palette tokens —
   no new hex. */
.dispatch-chip.dc-urg-urgent    { border-left-color: var(--blood);         background: color-mix(in srgb, var(--blood) 30%, transparent); }
.dispatch-chip.dc-urg-important { border-left-color: var(--border);        background: color-mix(in srgb, var(--border) 22%, transparent); }
.dispatch-chip.dc-urg-info      { border-left-color: var(--safe);          background: color-mix(in srgb, var(--safe) 14%, transparent); }
.dispatch-chip.dc-urg-routine   { border-left-color: var(--accent-system); background: color-mix(in srgb, var(--accent-system) 10%, transparent); }
.dispatch-chip.dc-urg-urgent:hover    { background: color-mix(in srgb, var(--blood) 45%, transparent); }
.dispatch-chip.dc-urg-important:hover { background: color-mix(in srgb, var(--border) 36%, transparent); }
.dispatch-chip.dc-urg-info:hover      { background: color-mix(in srgb, var(--safe) 28%, transparent); }
.dispatch-chip.dc-urg-routine:hover   { background: color-mix(in srgb, var(--accent-system) 24%, transparent); }
.dispatch-chip.dc-urg-urgent .dc-dot    { background: var(--blood); }
.dispatch-chip.dc-urg-important .dc-dot { background: var(--border); }
.dispatch-chip.dc-urg-info .dc-dot      { background: var(--safe); }
.dispatch-chip.dc-urg-routine .dc-dot   { background: var(--accent-system); }

.dc-glyph { font-size: var(--fs-sm); line-height: 1; }
.dc-text  { flex: 1; overflow: hidden; text-overflow: ellipsis; color: var(--chip-text); padding-right: 4px; min-width: 0; }
.dc-time  { font-size: var(--fs-xs); color: rgba(28,28,28,0.55); margin-right: 4px; flex-shrink: 0; }
.dc-x {
  background: none; border: none; color: rgba(233,225,210,0.4);
  cursor: pointer; padding: 0 6px 0 2px; font-size: var(--fs-xs); flex-shrink: 0;
}
.dc-x:hover { color: var(--chip-text); }

@keyframes chipSlideIn {
  from { transform: translateX(240px); opacity: 0; max-width: 0; }
  60%  { opacity: 1; }
  to   { transform: translateX(0); opacity: 1; }
}
.dispatch-chip.dismissing { animation: chipDismiss 0.25s ease forwards; }
@keyframes chipDismiss {
  to { max-width: 0; opacity: 0; padding: 0; margin: 0; border-width: 0; }
}

/* Celestial clock */
.gt-celestial {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 8px;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}
.cel-arc-wrap { position: relative; width: 63px; height: 39px; flex-shrink: 0; }
.cel-arc-wrap #cel-svg { width: 63px; height: 39px; }
#cel-svg { position: absolute; top: 0; left: 0; }
.cel-info { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.cel-date  {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: var(--fs-xs); color: var(--text-dim);
  white-space: nowrap; letter-spacing: 0.05em;
}
.cel-date strong { color: var(--accent); font-weight: 600; }

.gt-search-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.15rem 0.5rem;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
  align-self: center;
}
.gt-search-btn:hover { border-color: var(--accent); color: var(--accent); }

.gt-notif-btn {
  position: relative;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.15rem 0.5rem;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
  align-self: center;
}
.gt-notif-btn:hover { border-color: var(--accent); color: var(--accent); }
.gt-notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--danger, #c0392b);
  color: #fff;
  font-size: var(--fs-xs);
  font-family: var(--mono);
  border-radius: 2px;
  padding: 0 2px;
  min-width: 16px; /* was 14px — see line-height below */
  text-align: center;
  line-height: 1.2; /* was a fixed 14px, sized for the old ~9px font; now that
                        --fs-xs is the 13px floor that box was too tight (relative
                        line-height per the plan's rule, not another px value) */
  pointer-events: none;
}

/* ── Game map area ──────────────────────────────────────────────────────── */
/* World-Rim step 1 (2026-08-05): the void behind the canvas was `#1B4F72` —
   a hardcoded hex that IS `--deep-sea`, so everything outside the map was
   painted in exactly deep water's colour and read as sea you could sail to.
   It is the page background now: outside the world, not water. The Outer Sea
   gets its own layer in step 2; this only stops the surface from lying. */
.game-map {
  flex: 1;
  position: relative;
  background: var(--bg);
  overflow: hidden;
  cursor: grab;
}
.game-map:active { cursor: grabbing; }
.game-map canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
#hex-canvas { touch-action: none; }

/* Map dim overlay (behind open drawer) */
.map-dim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.08);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
  z-index: 5;
}
.map-dim.visible { opacity: 1; }

/* No-province overlay card */
.no-province-card {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: var(--bg-panel);
  border: 2px solid var(--gold);
  padding: 0.8rem 1rem;
  max-width: 240px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  z-index: 10;
  display: none;
}
.no-province-card.visible { display: block; }
.npc-title { font-family: var(--mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); margin-bottom: 0.3rem; }
.npc-text  { font-size: var(--fs-sm); color: var(--text); margin-bottom: 0.6rem; line-height: 1.4; }

/* ── Bottom nav (window triggers) ───────────────────────────────────────── */
.game-nav {
  display: flex;
  align-items: stretch;
  height: 34px; /* was 30px — glyph+label stack (see .win-trigger) needs the extra room
                   at the bigger typography scale; matches .game-topbar/.drawer top offset */
  background: var(--bg-panel);
  border-top: 2px solid var(--border);
  flex-shrink: 0;
  z-index: 50;
}
.win-trigger {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  border-right: 1px solid var(--border);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.15; /* was inherited body line-height (1.6) — a single-line uppercase
                         label doesn't need that much leading, and 1.6 no longer fits
                         the nav bar's height once --fs-xs grew to the 13px floor */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  position: relative;
  user-select: none;
  transition: background 0.1s, color 0.1s;
}
.win-trigger:last-child { border-right: none; }
.win-trigger:hover { background: var(--bg-raised); color: var(--text); }
.win-trigger.active { color: var(--accent); background: var(--bg-raised); }
.win-trigger.active::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
}
.wt-glyph { font-size: var(--fs-sm); line-height: 1; }
.wt-badge {
  position: absolute;
  top: 5px; right: 12px;
  background: var(--accent);
  color: var(--bg-raised);
  font-size: var(--fs-xs);
  font-family: var(--mono);
  padding: 0.05rem 0.28rem;
  line-height: 1.3;
}

/* ── Drawers ─────────────────────────────────────────────────────────────── */
.drawer {
  position: fixed;
  top: 34px;
  right: 0;
  bottom: 34px; /* was 30px — matches .game-nav's new height, see there */
  width: 420px;
  background: var(--bg-panel);
  border-left: 2px solid var(--border);
  box-shadow: none;
  transform: translateX(100%);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
  z-index: 200;
}
.drawer.open {
  transform: translateX(0);
  box-shadow: -6px 0 30px rgba(0,0,0,0.6);
}

@media (max-width: 480px) {
  /* Reserve the three map tools before allocating identity/chips/calendar text.
     Month text may elide; its full value and the exact date remain in Notifications. */
  .gt-celestial { flex: 0 0 60%; min-width: 0; gap: 4px; padding: 0 4px; }
  .gt-wanax { flex-shrink: 1; min-width: 0; max-width: 40%; padding: 0 0.4rem; overflow: hidden; }
  .gt-netstatus { flex-shrink: 1; min-width: 0; max-width: 20%; padding: 0 0.4rem; overflow: hidden; }
  .gt-dispatch-strip { padding: 0 3px; }
  .cel-arc-wrap { width: 40px; height: 25px; flex-shrink: 1; min-width: 0; }
  .cel-arc-wrap #cel-svg { width: 100%; height: 25px; }
  .cel-info { flex: 1; min-width: 0; overflow: hidden; }
  .cel-date { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Keep full labels and the 13px text floor: six tabs need two rows here. */
  .game-nav { height: 68px; flex-wrap: wrap; }
  .game-nav .win-trigger { flex: 0 0 33.333333%; min-width: 0; }
  /* Two rows of three: a rule between the rows, none at the row's right edge (Timothy 2026-10-09). */
  .game-nav .win-trigger:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
  .game-nav .win-trigger:nth-child(3n) { border-right: none; }
  .drawer { width: 100%; border-left: none; bottom: 68px; }
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
  border-bottom: 2px solid var(--border);
  background: var(--bg-raised);
  flex-shrink: 0;
}
.drawer-title {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.drawer-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0.15rem 0.45rem;
  font-family: var(--mono);
  font-size: var(--fs-sm);
}
.drawer-close:hover { color: var(--accent); border-color: var(--accent); }
/* The drawer is an ARCHIVE (Timothy 2026-08-22) — it carries a label, not a
   clear-all control. The dismiss-all lives on the transient chip strip instead
   (.dc-dismiss-all). */
.notif-archive-note {
  margin-left: auto;
  margin-right: 0.4rem;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.drawer-title-group { display: flex; align-items: center; gap: .3rem; }
.drawer-nav { background: none; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; padding: 0.05rem 0.4rem; font-family: var(--mono); font-size: var(--fs-sm); }
.drawer-nav:hover { color: var(--accent); border-color: var(--accent); }
.drawer-nav:disabled { opacity: .35; cursor: default; }

.drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dtab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 0.35rem;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.1s;
}
.dtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.dtab:hover:not(.active) { color: var(--text); }

/* The drawer's own scrollbar, always drawn (Timothy 2026-09-28). A browser scrollbar that
   appears only on tabs long enough to scroll narrowed the body there, and .city-scene (sized
   off 100%) jumped 403↔418 px between the city tabs. overflow-y: scroll keeps the track on
   every tab; the palette makes it part of the panel. Square, 1px charcoal outline on the thumb. */
.drawer-body { flex: 1; overflow-y: scroll; padding: 0.8rem; }
.drawer-body::-webkit-scrollbar       { width: 12px; }
.drawer-body::-webkit-scrollbar-track { background: var(--bg-raised); border-left: 1px solid var(--border); }
.drawer-body::-webkit-scrollbar-thumb { background: var(--sandstone); border: 1px solid var(--bg); border-radius: 0; }
.drawer-body::-webkit-scrollbar-thumb:hover { background: var(--border); }
/* Firefox has no ::-webkit-scrollbar; it takes the same two colours this way. */
@supports not selector(::-webkit-scrollbar) {
  .drawer-body { scrollbar-color: var(--sandstone) var(--bg-raised); }
}

.dsec { margin-bottom: 1.1rem; }

/* War → Army: realm-wide retreat setting + per-unit (this battle) override */
.retreat-row { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.retreat-select {
  font-size: var(--fs-sm);
  padding: 0.1rem 0.2rem;
  border: 1px solid var(--border);
  background: var(--warm-white);
  color: var(--text);
}
.retreat-select-sm { font-size: var(--fs-xs); }
.retreat-btn {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.retreat-btn:hover { border-color: var(--accent); }
.retreat-btn-sm { font-size: var(--fs-xs); padding: 0.15rem 0.35rem; }
.retreat-note { font-size: var(--fs-sm); color: var(--text-dim); margin: 0.3rem 0 0; }
.retreat-res { font-size: var(--fs-sm); color: var(--text-dim); min-height: 1rem; margin-top: 0.2rem; }
.retreat-res-err { color: var(--accent); }
.dsec-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  font-family: var(--mono);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.25rem;
  margin-bottom: 0.5rem;
}

/* ── Object card standard ────────────────────────────────────────────────── */
.obj-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  margin-bottom: 0.35rem;
  cursor: default;
  position: relative;
  transition: border-color 0.1s;
}
.obj-card.clickable { cursor: pointer; }
.obj-card.clickable:hover { border-color: var(--accent); }
.obj-icon  { font-size: var(--fs-base); flex-shrink: 0; width: 1.4rem; text-align: center; }
.obj-info  { flex: 1; min-width: 0; }
.obj-name  { font-size: var(--fs-sm); color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obj-sub   { font-size: var(--fs-sm); color: var(--text-dim); font-family: var(--mono); }
.obj-stats { font-size: var(--fs-sm); color: var(--text); font-family: var(--mono); margin-top: 0.1rem; }
.obj-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; flex-shrink: 0; }
.obj-rel {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.05rem 0.35rem;
  border: 1px solid;
}
.rel-own     { color: var(--gold);    border-color: var(--gold); }
.rel-ally    { color: var(--safe-text);    border-color: var(--safe); }
.rel-enemy   { color: var(--blood);   border-color: var(--blood); }
.rel-neutral { color: var(--text-dim); border-color: var(--text-dim); }
.obj-cta {
  font-size: var(--fs-xs);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--sandstone);
  border: 1px solid var(--border);
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
}
.obj-cta:hover { background: var(--accent); color: var(--bg-raised); border-color: var(--border-in); text-decoration: none; }

/* Stat rows inside drawers */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--bg-raised);
  font-size: var(--fs-sm);
}
.stat-row:last-child { border-bottom: none; }
.sr-label { color: var(--text-dim); font-family: var(--mono); font-size: var(--fs-sm); }
.sr-val   { color: var(--accent); font-family: var(--mono); font-weight: bold; }
.sr-rate  { color: var(--safe-text); font-family: var(--mono); font-size: var(--fs-sm); margin-left: 0.3rem; }

/* Goods mini-table */
.goods-mini { width: 100%; font-size: var(--fs-sm); border-collapse: collapse; }
.goods-mini td { padding: 0.18rem 0.3rem; border-bottom: 1px solid var(--bg-raised); color: var(--text); }
.goods-mini td:last-child { text-align: right; font-family: var(--mono); color: var(--accent); }
.goods-mini tr:last-child td { border-bottom: none; }

/* Good at its storage ceiling: production past the cap is discarded, so the
   labor-table rate cell reads "full · +0/day" instead of a positive number —
   dim it instead of --safe's green so a wasted allocation doesn't look like growth. */
.goods-mini td.goods-atcap { color: var(--text-dim); }

/* Gubbe placement grid (P5) — the 19-hex catchment raster in the city
   drawer. Every colour below is one of the tokens declared in :root above,
   no new hex codes (this widget is DOM/SVG, not the canvas renderer, so it
   is NOT exempt from that rule). */
.gubbe-svg { width: 100%; height: 15rem; display: block; }
.gubbe-hex-g { cursor: pointer; }
.gubbe-hex { fill: var(--bg-raised); stroke: var(--border); stroke-width: 1.5; }
.gubbe-hex.water { fill: var(--sea); }
.gubbe-hex.full { stroke: var(--safe); stroke-width: 2; }
.gubbe-hex.held { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 3 2; }
.gubbe-hex.takeable { stroke: var(--accent-war); stroke-width: 3; stroke-dasharray: 3 2; }
.gubbe-held-note { font-size: var(--fs-xs); color: var(--danger); margin: 0 0 0.3rem; }
.gubbe-take { color: var(--accent-war); text-align: left; white-space: normal; }
.gubbe-hex.selected { stroke: var(--accent); stroke-width: 3; }
.gubbe-city-hex { fill: var(--sandstone); stroke: var(--gold); stroke-width: 2; }
.gubbe-hex-label { font-family: var(--mono); font-size: 9px; fill: var(--text); text-anchor: middle; pointer-events: none; }
.gubbe-hex-sub { font-family: var(--mono); font-size: 7px; fill: var(--text-dim); text-anchor: middle; pointer-events: none; }
.gubbe-fow-list { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 0.3rem; }
.gubbe-fow-note { display: inline-block; margin-right: 0.6rem; }
.gubbe-detail-panel { margin-top: 0.5rem; padding: 0.5rem; background: var(--bg-panel); border: 1px solid var(--border); min-height: 3rem; }
.gubbe-good-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border-in); font-size: var(--fs-sm); }
.gubbe-good-row:last-child { border-bottom: none; }
.gubbe-pip { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--safe); margin: 0.15rem 0.1rem 0 0; }
.gubbe-pip.empty { background: var(--bg-raised); border: 1px solid var(--border-in); }
/* A refused placement, in the server's own words, under the buttons that were
   just pressed. --accent is the same refusal tone war.js uses for a rejected
   order. */
.gubbe-refusal { margin-top: 0.4rem; padding-top: 0.35rem; border-top: 1px solid var(--border-in); color: var(--accent); font-size: var(--fs-xs); }

/* Inbox items */
.inbox-item { border: 1px solid var(--border); padding: 0.5rem 0.6rem; margin-bottom: 0.4rem; background: var(--bg-raised); }
.inbox-item.unread { border-left: 3px solid var(--gold); }
.ii-from { font-size: var(--fs-sm); font-family: var(--mono); color: var(--text-dim); margin-bottom: 0.15rem; }
.ii-body { font-size: var(--fs-sm); color: var(--text); font-style: italic; margin-bottom: 0.3rem; }
.ii-actions { display: flex; gap: 0.3rem; }

/* Gossip drawer rows — reuse .inbox-item/.ii-from/.ii-body (rumour reads the
   same as a message: a from-line + body text); .gossip-major mirrors
   .inbox-item.unread's left-border treatment for keryx's "!" major marker
   (cmd_gossip.go). .gossip-hops is the small "(N hops away)" qualifier. */
.gossip-row.gossip-major { border-left: 3px solid var(--accent); }
.gossip-hops { color: var(--text-dim); font-style: normal; }

/* Kharis meter */
.kharis-bar  { height: 8px; background: var(--bg); border: 1px solid var(--border); margin: 0.3rem 0; }
.kharis-fill { height: 100%; background: var(--gold); }

/* Kult drawer: unused temple devotion capacity — actionable, not alarming.
   Shared with .stat-warn (city drawer's inline stat-row warnings, e.g. a
   catchment that cannot feed its population — megaron_plan_p4_arvet_i_province.md). */
.kult-warn, .stat-warn { color: var(--accent); font-size: var(--fs-sm); font-style: italic; margin: 0.3rem 0; }
/* City drawer: why the population grows, holds or shrinks (economy.GrowthState). */
.growth-line { color: var(--text-dim); font-size: var(--fs-sm); margin: 0.3rem 0; }

/* Silver balance card */
.silver-balance {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0.6rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  margin-bottom: 0.6rem;
}
.sb-label { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); font-family: var(--mono); }
.sb-val   { font-size: var(--fs-md); font-family: var(--mono); color: var(--text); }
.sb-rate  { font-size: var(--fs-sm); color: var(--safe-text); font-family: var(--mono); }

/* ── Notification list items ─────────────────────────────────────────────── */
.notif-date-header {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.4rem;
}
/* World speed, second line under the date (Timothy 2026-09-07) — normal case
   and dimmer so it reads as a secondary meta fact, not another date. */
.notif-world-tempo {
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  opacity: 0.8;
  margin-top: 0.3rem;
}
/* The world has not started yet. Louder than the tempo line above it: this one
   explains why nothing is moving, and a player who misses it thinks the game
   is broken. */
.notif-world-waiting {
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--bg-raised);
  border-left: 2px solid var(--gold);
  padding: 0.35rem 0.5rem;
  margin-top: 0.4rem;
  line-height: 1.4;
}
.notif-list-item {
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  gap: 0.3rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--bg-raised);
  font-size: var(--fs-sm);
  align-items: baseline;
  cursor: pointer;
}
.notif-list-item:hover { background: var(--bg-raised); }
.notif-list-item:last-child { border-bottom: none; }
.notif-list-item.nl-unread { background: rgba(255,255,255,0.03); border-left: 2px solid var(--gold); padding-left: 0.3rem; }
.notif-list-item.nl-urgent  { border-left: 2px solid var(--danger, #c0392b); }
.nli-kind { font-size: var(--fs-base); text-align: center; }
.nli-text { color: var(--text); }
.nli-time { color: var(--text-dim); font-family: var(--mono); font-size: var(--fs-sm); white-space: nowrap; }
.nli-grain { grid-column: 2 / -1; color: var(--text-dim); font-size: var(--fs-sm); }
/* SubsistenceWarning tiers (DEL D) — never collapsed; critical floats to the
   top of the feed. Placed after .nl-unread/.nl-urgent so the tier border wins. */
.notif-list-item.notif-tier-yellow   { border-left: 2px solid var(--safe);   padding-left: 0.3rem; }
.notif-list-item.notif-tier-red      { border-left: 2px solid var(--accent); padding-left: 0.3rem; }
.notif-list-item.notif-tier-critical { border-left: 3px solid var(--blood);  padding-left: 0.3rem; background: rgba(146, 43, 33, 0.12); }

/* ── Search overlay ──────────────────────────────────────────────────────── */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 500;
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: 8vh;
}
.search-overlay.open { display: flex; }
.search-box {
  width: 100%;
  max-width: 540px;
  background: var(--bg-panel);
  border: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--bg-raised), 0 12px 50px rgba(0,0,0,0.9);
}
.search-input-row { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.si-glyph  { padding: 0 0.8rem; color: var(--text-dim); font-size: var(--fs-base); flex-shrink: 0; }
.si-input  {
  flex: 1; background: none; border: none; outline: none;
  padding: 0.75rem 0.3rem; font-family: var(--mono); font-size: var(--fs-base); color: var(--text);
}
.si-esc {
  margin-right: 0.5rem; border: 1px solid var(--border);
  background: none; color: var(--text-dim);
  font-family: var(--mono); font-size: var(--fs-xs);
  padding: 0.15rem 0.4rem; cursor: pointer; flex-shrink: 0;
}
.search-hint {
  padding: 0.3rem 0.8rem; font-size: var(--fs-xs);
  color: var(--text-dim); font-family: var(--mono);
  border-bottom: 1px solid var(--border);
}
.search-results { max-height: 50vh; overflow-y: auto; }

/* ── Dispatch window — one window, two doors (megaron_plan_dispatches.md §1) ─
   Same overlay/box convention as .search-overlay/.search-box above. */
.dispatch-window-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 500;
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: 12vh;
}
.dispatch-window-overlay.open { display: flex; }
.dispatch-window {
  width: 100%;
  max-width: 420px;
  background: var(--bg-panel);
  border: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--bg-raised), 0 12px 50px rgba(0,0,0,0.9);
}
.dw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
  border-bottom: 2px solid var(--border);
  background: var(--bg-raised);
}
.dw-body { padding: 0.8rem; }
.dw-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.dw-icon { font-size: var(--fs-base); flex-shrink: 0; }
.dw-text { color: var(--text); font-size: var(--fs-sm); }
.dw-grain { margin-top: 0.4rem; color: var(--text-dim); font-size: var(--fs-sm); }
.dw-time { margin-top: 0.3rem; color: var(--text-dim); font-family: var(--mono); font-size: var(--fs-xs); }
.dw-goto-btn {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.4rem;
  text-align: center;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.dw-goto-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.dw-goto-btn:disabled { opacity: .4; cursor: default; }
/* Occupation choices (sack/burn/annex) offered inline in the dispatch window —
   megaron_plan_erovring.md S3/S6, web surface added 2026-09-25. */
.dw-occupation {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.dw-occ-label { color: var(--text-dim); font-size: var(--fs-xs); margin-bottom: 0.4rem; }
.dw-occ-choice { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.dw-occ-btn {
  padding: 0.3rem 0.6rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.dw-occ-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.dw-occ-btn:disabled { opacity: .4; cursor: default; }
.dw-occ-desc { color: var(--text-dim); font-size: var(--fs-xs); }
.dw-occ-confirm { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem 0; flex-wrap: wrap; }
.dw-occ-warn { color: var(--blood); font-size: var(--fs-xs); font-weight: bold; }
.dw-occ-result { margin-top: 0.4rem; color: var(--text-dim); font-size: var(--fs-xs); font-family: var(--mono); }
/* Bottom-corner mute checkbox — the reglage sits ON the event, never on a
   settings page (megaron_plan_dispatches.md §1). */
.dw-mute-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.sr-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.8rem; cursor: pointer;
  border-bottom: 1px solid var(--bg-raised);
}
.sr-item:hover, .sr-item.focused { background: var(--bg-raised); }
.sr-icon { font-size: var(--fs-base); flex-shrink: 0; width: 1.2rem; text-align: center; }
.sr-name { flex: 1; font-size: var(--fs-sm); color: var(--text); }
.sr-meta { font-size: var(--fs-sm); color: var(--text-dim); font-family: var(--mono); }
.sr-type { font-size: var(--fs-xs); padding: 0.03rem 0.3rem; border: 1px solid var(--border); color: var(--text-dim); flex-shrink: 0; }
/* ── Sprint 5 — City drawer ──────────────────────────────────────────────── */
.city-scene {
  display: block;
  /* 160×96 logical pixels at an exact integer ×2, also in the 390px panel. */
  width: 320px;
  height: 192px;
  margin: 0 auto .4rem;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.city-tab { /* padding comes from .drawer-body */ }
.stat-row-strong .sr-label { color: var(--text); font-weight: bold; }
.stat-row-strong .sr-val   { color: var(--accent); font-size: var(--fs-sm); }

/* Food stock direction and server-reported hunger in the settlement overview. */
.food-state-growing  { color: var(--safe-text); }
.food-state-stable, .food-state-unknown { color: var(--text-dim); }
.food-state-declining { color: var(--accent); }
.food-state-starving  { color: var(--danger); }

.sr-category {
  padding: 0.25rem 0.8rem; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dim); font-family: var(--mono); background: var(--bg);
}

/* ── Diplomacy threads ───────────────────────────────────────────────────── */
.dip-thread { border-bottom: 1px solid var(--border); }

.dip-thread-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  background: var(--bg-panel);
  user-select: none;
}
.dip-thread-header:hover { background: var(--bg-raised); }

.dip-thread-expand-hint {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-left: 0.3rem;
}

.dip-thread-preview {
  padding: 0 0.6rem 0.35rem;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.dip-thread-preview:hover { color: var(--text); }

.dip-thread-body {
  padding: 0.2rem 0.6rem 0.5rem;
  display: none;
}
.dip-thread[data-open] .dip-thread-body { display: block; }

/* Chat bubbles: received left, sent right */
.dip-msg-row {
  display: flex;
  margin: 0.3rem 0;
}
.dip-msg-row-in  { justify-content: flex-start; }
.dip-msg-row-out { justify-content: flex-end; }

.dip-bubble {
  max-width: 82%;
  padding: 0.3rem 0.5rem;
  border-radius: 0;
  font-size: var(--fs-sm);
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}
.dip-bubble-in {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
}
.dip-bubble-out {
  background: var(--sandstone);
  border: 1px solid var(--border-in);
  color: var(--text);
  text-align: right;
}

.dip-bubble-meta {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-bottom: 0.15rem;
}
.dip-bubble-meta-out { text-align: right; }

.dip-msg-text {
  font-size: var(--fs-sm);
  font-style: italic;
  margin: 0.1rem 0;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}

.dip-inline-compose {
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.dip-inline-compose textarea {
  resize: vertical;
  min-height: 3.5rem;
  background: var(--warm-white);
  border: 1px solid var(--border);
  padding: 0.3rem 0.4rem;
  font-size: var(--fs-sm);
  font-family: var(--font);
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}
.dip-inline-trade {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.3rem;
}
.dip-inline-trade input,
.dip-inline-trade select {
  width: 100%;
  background: var(--warm-white);
  border: 1px solid var(--border);
  padding: 0.2rem 0.3rem;
  font-size: var(--fs-sm);
  box-sizing: border-box;
}
.dip-inline-compose-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.dip-compose-status {
  font-size: var(--fs-sm);
  min-height: 1rem;
}

/* ── Codex — the player's wiki (ui/codex.js, megaron_plan_kodex.md) ────────
   Anchored LEFT, outside the drawer system: a drawer (right) can stay open
   beside it. Above drawers (200), below the dispatch window (500), which
   links into it. */
.gt-codex-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.15rem 0.5rem;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: bold;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
  align-self: center;
}
.gt-codex-btn:hover, .gt-codex-btn.active { border-color: var(--accent); color: var(--accent); }
.drawer-help {
  margin-left: auto;
  margin-right: 0.4rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0.15rem 0.45rem;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: bold;
}
.drawer-help:hover { color: var(--accent); border-color: var(--accent); }
.codex-panel {
  position: fixed;
  top: 34px;
  left: 0;
  bottom: 34px;
  width: 440px;
  background: var(--bg-panel);
  border-right: 2px solid var(--border);
  transform: translateX(-100%);
  transition: transform 0.18s ease;
  display: flex;
  flex-direction: column;
  z-index: 210;
}
.codex-panel.open { transform: translateX(0); box-shadow: 6px 0 30px rgba(0,0,0,0.6); }
@media (max-width: 480px) {
  .codex-panel { width: 100%; border-right: none; bottom: 68px; }
}
.codex-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 2px solid var(--border);
  background: var(--bg-raised);
  flex-shrink: 0;
}
.codex-header .drawer-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codex-back {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0.1rem 0.5rem;
  font-family: var(--mono);
  font-size: var(--fs-sm);
}
.codex-back:hover { color: var(--accent); border-color: var(--accent); }
.codex-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.8rem 1rem 1.5rem;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.cx-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem;
  background: var(--warm-white);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-sm);
}
.cx-results { margin: 0.4rem 0 0.6rem; }
.cx-result { display: block; padding: 0.2rem 0; }
.cx-cat { margin-top: 0.9rem; }
.cx-cat-title {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.15rem;
  margin-bottom: 0.3rem;
}
.cx-entry { display: block; padding: 0.15rem 0; }
.cx-link { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.cx-link:hover { border-bottom-style: solid; }
.cx-link-missing { color: var(--text-dim); }
.cx-crumb {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}
.cx-article p { margin: 0 0 0.7rem; }
.cx-h { color: var(--accent); font-family: var(--font); margin: 1rem 0 0.4rem; }
h3.cx-h { font-size: var(--fs-md); }
h4.cx-h { font-size: var(--fs-base); }
.cx-list { margin: 0 0 0.7rem; padding-left: 1.3rem; }
.cx-list li { margin-bottom: 0.25rem; }
.cx-quote {
  margin: 0 0 0.7rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--border);
  background: var(--bg-raised);
}
.cx-pre {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 0.5rem;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  white-space: pre-wrap;
  margin: 0 0 0.7rem;
}
.cx-article code { font-family: var(--mono); font-size: 0.9em; background: var(--bg-raised); padding: 0 0.2em; }
.cx-table { border-collapse: collapse; margin: 0 0 0.8rem; font-size: var(--fs-sm); width: 100%; }
.cx-table th, .cx-table td { border: 1px solid var(--border); padding: 0.25rem 0.4rem; text-align: left; vertical-align: top; }
.cx-table th { background: var(--bg-raised); }
.cx-foot {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.cx-foot-label {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-right: 0.3rem;
}
.dw-codex-btn { margin-top: 0.4rem; }
.notif-archive-note + .drawer-help { margin-left: 0; }
.codex-back.hidden { display: none; }

/* Public alpha-test page (/alfatestinfo). Scoped; light and plain like formatet.se. */
.alpha-info { background: var(--bg-panel); color: var(--text); font-family: var(--font); font-size: var(--fs-base); line-height: 1.65; }
.alpha-main { max-width: 680px; margin: 0 auto; padding: 4rem 1.5rem 3rem; }
.alpha-info h1, .alpha-info h2, .alpha-info h3, .alpha-label, .alpha-note, .alpha-info figcaption, .alpha-footer { font-family: "Helvetica Neue", Arial, sans-serif; }
.alpha-header { margin-bottom: 2.5rem; }
.alpha-label { margin: 0 0 .25rem; font-size: var(--fs-sm); color: var(--text-dim); letter-spacing: .04em; }
.alpha-info h1 { margin: 0; font-size: var(--fs-xl); font-weight: 500; color: var(--text); }
.alpha-info section { margin: 0 0 2.5rem; }
.alpha-info h2 { margin: 0 0 .75rem; font-size: var(--fs-md); font-weight: 500; color: var(--text); padding-top: 1rem; border-top: 1px solid var(--text-dim); }
.alpha-info h3 { margin: 1rem 0 .75rem; font-size: var(--fs-base); font-weight: 500; color: var(--text); }
.alpha-info p { margin: 0 0 1rem; }
.alpha-info ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.alpha-info li { margin: .3rem 0; }
.alpha-info a { color: var(--deep-sea); }
.alpha-info code { font-family: var(--mono); font-size: var(--fs-sm); }
.alpha-note { font-size: var(--fs-sm); color: var(--text-dim); }
.alpha-info figure { margin: 0 0 1.5rem; }
.alpha-info img { display: block; width: 100%; height: auto; border: 1px solid var(--text-dim); }
.alpha-info figcaption { margin-top: .4rem; font-size: var(--fs-sm); color: var(--text-dim); }
.alpha-footer { padding-top: 1rem; border-top: 1px solid var(--text-dim); }
@media (max-width: 480px) { .alpha-main { padding: 2.5rem 1rem 2rem; } }

/* Community account access, inside the existing account window. */
.account-chat { margin: 1.25rem 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.account-chat h3 { color: var(--accent); font-size: var(--fs-md); margin-bottom: .6rem; }
.account-chat p { margin: .6rem 0; }
.account-chat dt { font-size: var(--fs-sm); color: var(--text-dim); }
.account-chat dd { margin: 0 0 .5rem; overflow-wrap: anywhere; font-family: var(--mono); }
.account-chat a { color: var(--accent); }
.account-chat-secret { white-space: pre-wrap; overflow-wrap: anywhere; padding: .6rem; margin: .6rem 0; background: var(--warm-white); border: 1px solid var(--border); color: var(--text); user-select: all; }
.account-delete-note { margin: 1rem 0; font-size: var(--fs-sm); color: var(--text-dim); }
#acc-chat-status { font-size: var(--fs-sm); margin-top: .6rem; }

#account-window-overlay { padding-top: 12dvh; padding-inline: .5rem; }
#account-window-overlay .dispatch-window { display: flex; flex-direction: column; max-height: calc(88dvh - 1rem); }
#account-window-overlay .dw-header { flex-shrink: 0; }
#account-window-overlay .dw-body { min-height: 0; overflow-y: auto; }

/* A whole sealed letter/order fits the dispatch on narrow screens too. */
.dw-envelope { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; margin: .8rem 0; font: inherit; line-height: 1.5; }
#dispatch-window-overlay .dispatch-window { display: flex; flex-direction: column; max-height: calc(88dvh - 1rem); }
#dispatch-window-overlay .dw-body { min-height: 0; overflow-y: auto; }
#dispatch-window-overlay .dw-text { overflow-wrap: anywhere; }

.account-profile { margin-bottom: 1.25rem; }

/* Offer row under a prayer (Kult drawer) */
.offer-row { flex-basis:100%; margin-top:.4rem; }
.offer-row:not(:empty) { margin-bottom:.9rem; }
.offer-fields { display:flex; flex-wrap:wrap; gap:.4rem .8rem; margin-bottom:.3rem; font-size:var(--fs-sm); font-family:var(--mono); }
.offer-field { display:flex; align-items:center; gap:.25rem; color:var(--text); }
.offer-stock { color:var(--text-dim); }
.offer-input { width:3.6rem; background:var(--warm-white); border:1px solid var(--border); padding:.15rem .25rem; font-family:var(--mono); }
.offer-note { margin:.2rem 0 .4rem; font-size:var(--fs-sm); color:var(--text-dim); font-family:var(--mono); }