:root {
  --bg: #0f1115;
  --panel: #161923;
  --card: #1c2030;
  --border: #2a2f42;
  --text: #e4e6ec;
  --muted: #8890a4;
  --accent: #4f8cff;
  --accent-glow: rgba(79,140,255,0.35);
  --danger: #e5484d;
  --warn: #e8a13c;
  --good: #3fb27f;
  --water: #3fc4e0;
  --purple: #a385ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.topbar h1 {
  font-size: 20px; margin: 0; letter-spacing: 0.5px; font-weight: 800;
  background: linear-gradient(120deg, #fff, var(--accent) 60%, var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.topbar-controls input { width: 200px; max-width: 100%; }

/* Mobile: the topbar's New Game/Retry/Seed/Save/Load row was a real,
   pre-existing overflow bug — flex-wrap above already stops it from
   forcing the whole page to scroll sideways, but on a genuinely narrow
   phone screen the row still reads better full-width and a touch of
   shrinking than wrapped mid-row. */
@media (max-width: 480px) {
  .topbar { justify-content: center; text-align: center; }
  .topbar-controls { width: 100%; justify-content: center; }
  .topbar-controls input { width: 100%; flex: 1 1 140px; }
}

/* Three visually-distinct zones, left to right: Character (who you are),
   Decisions (what you can do — lives next to Character since available
   actions depend on the character's own state), World (where you are,
   incl. Town when one exists). Each zone gets its own accent color,
   reused from the map legend's existing color language (explorer=good,
   town=warn) so the whole UI's color meanings stay consistent. */
.layout {
  display: grid;
  grid-template-columns: 300px 360px 1fr;
  gap: 14px;
  padding: 14px;
  align-items: start;
}
@media (max-width: 1500px) {
  .layout { grid-template-columns: 280px 320px 1fr; }
}
@media (max-width: 1150px) {
  .layout { grid-template-columns: 1fr 1fr; }
  .panel--world { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  .panel--world { grid-column: auto; }
}

.panel--character, .panel--decisions, .panel--world {
  border-top: 3px solid transparent;
  padding-top: 2px;
}
.panel--character { border-top-color: var(--good); }
.panel--decisions { border-top-color: var(--accent); }
.panel--world { border-top-color: var(--purple); }

.zone-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  padding: 5px 10px; border-radius: 6px; margin-bottom: 12px; display: inline-block;
}
.zone-label--character { background: rgba(63,178,127,0.15); color: var(--good); border: 1px solid rgba(63,178,127,0.35); }
.zone-label--decisions  { background: rgba(79,140,255,0.15); color: var(--accent); border: 1px solid rgba(79,140,255,0.35); }
.zone-label--world      { background: rgba(163,133,255,0.15); color: var(--purple); border: 1px solid rgba(163,133,255,0.35); }
.zone-label--town {
  font-size: 12px !important; text-transform: none !important; letter-spacing: normal !important;
  padding: 0 !important; border-radius: 0 !important; background: none !important; border: none !important;
  display: block !important; margin: 20px 0 7px !important; border-left: 3px solid var(--warn) !important;
  padding-left: 8px !important; font-weight: 700 !important; color: var(--text) !important;
}

/* ---- Suggested next action — a small advisory callout, never forces a
   choice, just points at whichever available action best answers the
   explorer's most urgent current need. ---------------------------------- */
.suggestion-card {
  background: linear-gradient(135deg, rgba(79,140,255,0.14), rgba(163,133,255,0.05));
  border: 1px solid rgba(79,140,255,0.4);
}
.suggestion-card__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--accent); font-weight: 800; margin-bottom: 4px;
}
.suggestion-card__action { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.suggestion-card__reason { font-size: 11.5px; color: var(--muted); margin-bottom: 9px; line-height: 1.4; }
.suggestion-card__empty { color: var(--muted); font-size: 12px; }
.suggestion-card button { font-size: 11px; padding: 5px 12px; }

/* ---- Event Log banner — front-and-center, full width, right under the
   topbar. Collapsible specifically so a long game session (the log can
   grow to hundreds of entries) never forces the whole page to scroll far
   just to reach the map/decision columns below it. -------------------- */
.log-banner {
  margin: 14px 14px 0;
  background: linear-gradient(180deg, rgba(79,140,255,0.10), rgba(79,140,255,0.02));
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.log-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
}
.log-banner-head h2 {
  margin: 0;
  padding-left: 0;
  border-left: none;
  font-size: 15px;
  letter-spacing: 0.4px;
}
.log-banner .card.log-card {
  border: none;
  border-radius: 0;
  max-height: 300px;
  background: transparent;
  box-shadow: none;
}

.panel h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text);
  margin: 18px 0 7px;
  padding-left: 8px;
  border-left: 3px solid var(--accent);
}
.panel h2:first-child { margin-top: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 6px 16px rgba(0,0,0,0.18);
}

/* ---- Collapsible sections -------------------------------------------- */
.collapsible-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.collapse-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  padding: 2px 6px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.collapse-btn:hover { color: var(--text); background: none; }
.collapse-btn.collapsed { transform: rotate(-90deg); }
.collapsible-body.collapsed { display: none; }
.chip {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
  vertical-align: middle;
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
}
.muted { color: var(--muted); }

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #262b3d;
  font-size: 11px;
}
.pill.alert { background: rgba(229,72,77,0.18); color: var(--danger); }

.stat-bar-row {
  display: grid;
  grid-template-columns: 70px 1fr 40px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.stat-bar-row span:last-child { font-weight: 700; font-size: 12.5px; text-align: right; }
.bar {
  height: 8px;
  background: #262b3d;
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 4px; transition: width 0.2s ease; }
.bar-fill.health { background: var(--good); }
.bar-fill.fatigue { background: var(--warn); }
.bar-fill.food { background: var(--accent); }
.bar-fill.water { background: var(--water); }

button {
  background: #262b3d;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
button:hover { background: #2f3549; transform: translateY(-1px); }
button:active { transform: translateY(0); }
button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
button.primary {
  background: linear-gradient(180deg, #6c9fff, var(--accent));
  border-color: var(--accent);
  color: white;
  font-weight: 700;
  box-shadow: 0 3px 10px var(--accent-glow);
}
button.primary:hover { background: linear-gradient(180deg, #82adff, #6c9fff); box-shadow: 0 4px 14px var(--accent-glow); }
button.primary:disabled { box-shadow: none; }

input {
  background: #12141c;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 12px;
}

.button-row { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.button-row input { flex: 1; min-width: 90px; }

/* ---- Contextual action list — available vs. unavailable, clearly split
   so the player never has to hunt for what they can actually do among a
   long mixed list. ------------------------------------------------------ */
.actions-section-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  margin: 4px 0 6px;
}
.actions-section-label.available { color: var(--good); }
.actions-section-label.unavailable {
  color: var(--muted); margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border);
  cursor: pointer; user-select: none; justify-content: space-between;
}
.actions-section-label .count {
  font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 7px;
}
.actions-section-label.available .count { background: rgba(63,178,127,0.22); color: var(--good); }
.actions-section-label.unavailable .count { background: #262b3d; color: var(--muted); }

.action-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); margin: 10px 0 3px; padding-top: 6px; border-top: 1px solid var(--border);
}
.action-group-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.action-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 8px;
  margin: 2px 0;
  border-radius: 6px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.1s ease;
}
.action-item:last-child { border-bottom: none; }
.action-item:not(.disabled):hover { background: rgba(79,140,255,0.10); transform: translateX(2px); }
.action-item.disabled { opacity: 0.42; cursor: not-allowed; }
.action-item.selected { color: var(--accent); background: rgba(79,140,255,0.14); border-left: 3px solid var(--accent); }
.action-item .note { color: var(--muted); font-size: 11px; display: block; margin-top: 2px; }
.unavailable-list.collapsed { display: none; }

select {
  background: #12141c;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  width: 100%;
  margin-top: 6px;
}

.region-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.region-row:last-child { border-bottom: none; }
.region-row .id { color: var(--accent); font-weight: 600; margin-right: 6px; }

.log-card {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.history-card { max-height: 220px; }
.log-entry {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  border-left: 3px solid transparent;
  border-radius: 4px;
  transition: background 0.12s ease;
}
.log-entry:hover { background: rgba(255,255,255,0.03); }
.log-entry:last-child { border-bottom: none; }
.log-entry .log-time { color: var(--muted); margin-right: 6px; font-family: 'Consolas', monospace; font-size: 11px; }
.log-entry .log-action { color: var(--accent); font-weight: 700; }
.log-entry.cat-movement    { border-left-color: var(--accent); }
.log-entry.cat-exploration { border-left-color: #a385ff; }
.log-entry.cat-gathering   { border-left-color: var(--good); }
.log-entry.cat-survival    { border-left-color: var(--warn); }
.log-entry.cat-settlement  { border-left-color: #ff9f4f; }
.log-entry.cat-logistics   { border-left-color: var(--water); }
.log-entry.cat-danger      { border-left-color: var(--danger); background: rgba(229,72,77,0.06); }
.log-entry.cat-death       { border-left-color: var(--danger); background: rgba(229,72,77,0.14); font-weight: 600; }

.legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}
.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; }
.swatch-hidden { background: #12141c; border: 1px solid var(--border); }
.swatch-known { background: #3a3f57; }
.swatch-visible { background: #4f8cff; }
.swatch-explorer { background: var(--good); }
.swatch-town { background: var(--warn); }

canvas { display: block; width: 100%; height: auto; border-radius: 6px; cursor: pointer; }
/* Mini-Map is user-resizable (S/M/L/XL, main.js's applyMapSize()) — the
   World zone's column is a flexible 1fr track, so plain width:100% above
   would otherwise stretch this canvas to fill however much space that
   column happens to have, which is how a "fixed 225px" version of this
   still ended up feeling wrong for different people/screens. The chosen
   size is set as an inline max-width in px, always wrapped in min(...,100%)
   so it can never overflow a narrow (mobile) viewport regardless of which
   size is picked — the underlying width="450" height="450" drawing
   resolution (index.html) never changes, so the map stays crisp
   (effectively supersampled) at any chosen display size instead of being
   redrawn at lower detail. Default applied by main.js on boot; JS-off
   fallback below matches that same default. */
#mapCanvas { max-width: min(300px, 100%); margin: 0 auto; }

.overlay-toggles { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.overlay-toggles button { padding: 8px 10px; font-size: 11px; min-height: 32px; }
.overlay-toggles button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.map-size-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; }
.map-size-toggles__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-right: 2px; }
.map-size-toggles button { padding: 8px 12px; font-size: 11px; min-width: 38px; min-height: 32px; }
.map-size-toggles button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.preview-line { padding: 3px 0; }
.preview-line.effect { font-size: 13.5px; font-weight: 700; color: var(--text); padding: 4px 0 7px; }
.preview-blocked { color: var(--danger); font-weight: 700; font-size: 13px; }
.preview-warning { color: var(--warn); padding: 2px 0; font-size: 11.5px; font-weight: 600; }

/* ---- Inventory grid --------------------------------------------------- */
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.inv-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.inv-cap { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
.inv-items { margin-top: 6px; }
.inv-item-chip { display: inline-block; background: #262b3d; border-radius: 999px; padding: 2px 8px; font-size: 11px; margin: 2px 4px 0 0; }

/* ---- Region inspector -------------------------------------------------- */
.inspector-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.inspector-badge { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 7px; border-radius: 999px; margin-left: 6px; }
.badge-unknown { background: #2a2f42; color: var(--muted); }
.badge-glimpsed { background: #3a3f57; color: var(--text); }
.badge-scanned { background: rgba(232,161,60,0.2); color: var(--warn); }
.badge-explored { background: rgba(63,178,127,0.2); color: var(--good); }
.assessment-note { padding: 3px 0; font-size: 11.5px; }
.assessment-note.tone-good { color: var(--good); }
.assessment-note.tone-bad { color: var(--danger); }
.assessment-note.tone-warn { color: var(--warn); }
.assessment-note.tone-neutral { color: var(--muted); }

/* ---- Town / structures ------------------------------------------------- */
.structure-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.structure-row:last-child { border-bottom: none; }
.structure-row .cost { color: var(--muted); font-size: 11px; }

/* ---- Town economy (2026-10-05, Pass 2a) — condition badge + trend ------ */
.town-condition { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.town-condition--neutral { background: #262b3d; color: var(--muted); }
.town-condition--good    { background: rgba(63,178,127,0.2); color: var(--good); }
.town-condition--warn    { background: rgba(232,161,60,0.2); color: var(--warn); }
.town-condition--bad     { background: rgba(229,72,77,0.2); color: var(--danger); }
.trend-pos { color: var(--good); font-weight: 600; }
.trend-neg { color: var(--danger); font-weight: 600; }

/* ---- Death / run-summary overlay --------------------------------------- */
.death-overlay {
  position: fixed; inset: 0; background: rgba(5,6,10,0.88);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.death-overlay.hidden { display: none; }
.death-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 28px 32px; max-width: 420px; width: 90%;
}
.death-card h2 { margin-top: 0; font-size: 20px; }
.death-card .row { padding: 4px 0; }

/* ---- Save status + account/sync strip ---------------------------------- */
.save-status { font-size: 11px; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.save-status.saving { color: var(--warn); }
.save-status.saved { color: var(--good); }
.save-status.error { color: var(--danger); }

.account-strip {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 8px 18px; background: #12141c; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.account-strip__status { color: var(--muted); }
.account-strip__status a { color: var(--accent); }
.account-strip__controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.account-strip__slot-label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.account-strip__slot-label select { width: auto; margin-top: 0; padding: 4px 6px; font-size: 11.5px; }
.account-strip__controls button { font-size: 11px; padding: 5px 9px; }

/* ---- First-run tutorial coach ------------------------------------------- */
.tutorial-coach {
  margin: 14px 14px 0;
  background: linear-gradient(135deg, rgba(163,133,255,0.14), rgba(79,140,255,0.04));
  border: 1px solid rgba(163,133,255,0.4);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.tutorial-coach__step { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--purple); font-weight: 800; margin-bottom: 3px; }
.tutorial-coach__text { font-size: 13px; line-height: 1.4; max-width: 640px; }
.tutorial-coach__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tutorial-coach__skip { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 6px 4px; }
.tutorial-coach__skip:hover { color: var(--text); background: none; transform: none; }

/* ---- Run History modal (reuses .death-overlay/.death-card shell) ------- */
.history-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.history-table th, .history-table td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--border); }
.history-table th { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.4px; }
.history-empty { color: var(--muted); font-size: 12px; padding: 8px 0; }

/* ---- Map hover tooltip -------------------------------------------------- */
.tooltip {
  position: fixed; pointer-events: none; background: #05070c; border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px; font-size: 11px; max-width: 240px; z-index: 60;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.tooltip.hidden { display: none; }