/* =====================================================================
   American Trail — css/style.css
   Colorful modern-retro: chunky beveled panels, warm desert / teal /
   sunset palette, monospace pixel-ish type, big friendly buttons.
   ===================================================================== */

:root {
  --ink: #0f0f1b;
  --bg: #1a1c2c;
  --panel: #20233c;
  --panel2: #29366f;
  --line: #566c86;
  --text: #f4f4f4;
  --muted: #94b0c2;
  --gold: #ffcd75;
  --gold-lite: #fff0ba;
  --teal: #73eff7;
  --green: #38b764;
  --lime: #a7f070;
  --red: #b13e53;
  --pink: #ff7a94;
  --sunset: #e07a5f;
  --sand: #e9c46a;
  --orange: #f4a261;
  --sea: #2a9d8f;
  --font: "Courier New", Courier, "Lucida Console", monospace;
  --bevel: inset 0 3px 0 rgba(255, 255, 255, 0.10), inset 0 -4px 0 rgba(0, 0, 0, 0.35);
  --drop: 4px 4px 0 var(--ink);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(1100px 500px at 75% -10%, rgba(224, 122, 95, 0.22), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(42, 157, 143, 0.20), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  image-rendering: pixelated;
}

/* faint scanlines for CRT flavor */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(0, 0, 0, 0.10) 0px, rgba(0, 0, 0, 0.10) 1px,
    transparent 1px, transparent 4px);
  z-index: 999;
}

.hidden { display: none !important; }

#app {
  max-width: 1024px;
  margin: 0 auto;
  padding: 10px 12px 40px;
}

/* ------------------------------------------------------------------
   Buttons
------------------------------------------------------------------ */
button, .btn {
  font-family: var(--font);
  cursor: pointer;
}

.btn {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  background: var(--panel2);
  border: 4px solid var(--line);
  box-shadow: var(--drop), var(--bevel);
  padding: 9px 16px;
  margin: 3px;
}

.btn:hover:not(:disabled) { background: #334387; border-color: var(--muted); }
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: 0.45; cursor: default; }

.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold-lite); }
.btn-gold:hover:not(:disabled) { background: var(--gold-lite); border-color: #fff; }
.btn-big { font-size: 17px; padding: 13px 26px; }
.btn-sm { font-size: 12px; padding: 6px 10px; }
.btn-wide { display: block; width: 100%; margin: 8px 0 0; }
.btn-dim { opacity: 0.85; }
.btn-top { font-size: 12px; padding: 6px 9px; margin: 2px; }
/* Always-available forage actions (HUNT / WATER) — subtle green accent so
   they read as supply actions, distinct from the utility top buttons. */
.btn-forage { border-color: var(--green); color: var(--green); letter-spacing: 1px; }
.btn-forage:hover:not(:disabled) { background: var(--green); color: var(--ink); border-color: var(--gold-lite); }

button:focus-visible, .card:focus-visible, .choice-btn:focus-visible, .hub-btn:focus-visible {
  outline: 3px dashed var(--teal);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Topbar
------------------------------------------------------------------ */
#topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  background: var(--panel);
  border: 4px solid var(--line);
  box-shadow: var(--drop), var(--bevel);
  padding: 8px 12px;
  margin-bottom: 14px;
}

/* American flag behind the title — pixel stripes + starred canton.
   Hard-edged gradients (no smoothing) for a retro pixel feel. */
#brandline {
  position: relative;
  font-weight: bold;
  letter-spacing: 3px;
  color: var(--gold-lite);
  font-size: 15px;
  padding: 5px 12px;
  border: 3px solid var(--ink);
  overflow: hidden;
  image-rendering: pixelated;
  /* red/white stripes */
  background:
    repeating-linear-gradient(
      0deg,
      #b22234 0, #b22234 5px,
      #f4f4f4 5px, #f4f4f4 10px);
  /* legible text on top */
  text-shadow: 2px 2px 0 var(--ink), 0 0 4px var(--ink);
}
/* blue canton with a pixel star grid */
#brandline::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 46%;
  height: 55%;
  background:
    radial-gradient(circle at 3px 3px, #f4f4f4 1.3px, transparent 1.6px) 0 0 / 12px 10px,
    radial-gradient(circle at 9px 8px, #f4f4f4 1.3px, transparent 1.6px) 0 0 / 12px 10px,
    #3c3b6e;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  image-rendering: pixelated;
  z-index: 0;
}
/* the title glyphs, kept crisply above the flag */
#brandline .brand-text {
  position: relative;
  z-index: 1;
  color: var(--gold-lite);
  -webkit-text-stroke: 1px var(--ink);
  text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink),
    1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
}

#daybox { display: flex; align-items: center; gap: 8px; }
.day-num {
  background: var(--ink);
  color: var(--teal);
  border: 3px solid var(--teal);
  font-weight: bold;
  padding: 2px 8px;
  font-size: 13px;
}
.day-where { color: var(--sand); font-weight: bold; font-size: 13px; letter-spacing: 1px; }

#statbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  flex: 1 1 340px;
}

.stat-res {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ink);
  border: 3px solid var(--line);
  padding: 2px 7px;
  font-size: 13px;
  font-weight: bold;
}
.stat-res.stat-low { border-color: var(--pink); color: var(--pink); animation: blink 1s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: 0.45; } }

.stat-meter { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.stat-ico { font-size: 13px; }
/* word labels instead of emojis on the top stat bar */
.stat-word {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.stat-res .stat-word { color: var(--gold); }
.stat-res.stat-low .stat-word { color: inherit; }
.stat-res .stat-val { font-size: 13px; }

.meter {
  display: inline-block;
  width: 44px;
  height: 10px;
  background: var(--ink);
  border: 2px solid var(--line);
  overflow: hidden;
  vertical-align: middle;
}
.meter-lg { width: 110px; height: 13px; }
.meter-fill { display: block; height: 100%; }
.f-good { background: var(--green); }
.f-warn { background: var(--sand); }
.f-bad { background: var(--red); }

#topbtns { display: flex; flex-wrap: wrap; gap: 2px; }

/* ------------------------------------------------------------------
   Panels & shared bits
------------------------------------------------------------------ */
.panel {
  background: var(--panel);
  border: 4px solid var(--line);
  box-shadow: var(--drop), var(--bevel);
  padding: 12px 14px;
  margin: 0 0 14px;
}

.panel-title {
  margin: -12px -14px 12px;
  padding: 7px 14px;
  background: var(--panel2);
  border-bottom: 4px solid var(--line);
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 2px;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.chip-row-big .chip { font-size: 13px; }
.chip {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 8px;
  background: var(--ink);
  border: 2px solid var(--line);
  color: var(--text);
}
.chip-warn { border-color: var(--pink); color: var(--pink); }
.chip-good { border-color: var(--lime); color: var(--lime); }
.chip-skill { border-color: var(--gold); color: var(--gold); }
.chip-cat { border-color: var(--teal); color: var(--teal); }
.chip-risk-low { border-color: var(--lime); color: var(--lime); }
.chip-risk-medium { border-color: var(--sand); color: var(--sand); }
.chip-risk-high { border-color: var(--pink); color: var(--pink); }

.fx-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.fx-chip {
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border: 3px solid;
}
.fx-good { border-color: var(--green); background: #14351f; color: var(--lime); }
.fx-bad { border-color: var(--red); background: #3a1622; color: var(--pink); }

.sprite { image-rendering: pixelated; display: block; margin: 0 auto 6px; }

/* ------------------------------------------------------------------
   Title screen
------------------------------------------------------------------ */
.screen-title { text-align: center; padding: 24px 8px 40px; }

.title-art {
  position: relative;
  height: 150px;
  max-width: 560px;
  margin: 0 auto 10px;
  border: 4px solid var(--line);
  box-shadow: var(--drop), var(--bevel);
  overflow: hidden;
  background: linear-gradient(180deg, #22344f 0%, var(--sea) 45%, var(--orange) 78%, var(--sand) 100%);
}
.title-sun {
  position: absolute;
  top: 18px; left: 12%;
  width: 52px; height: 52px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(255, 205, 117, 0.25);
}
.title-mtn {
  position: absolute;
  bottom: 34px;
  width: 0; height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
}
.title-mtn-1 { left: 30%; border-bottom: 74px solid rgba(26, 28, 44, 0.55); }
.title-mtn-2 { left: 55%; border-bottom: 96px solid rgba(26, 28, 44, 0.75); }
.title-road {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 36px;
  background: repeating-linear-gradient(90deg,
    #4b3b47 0 40px, #5d4a55 40px 80px);
  border-top: 4px dashed var(--gold);
}

.title-logo {
  font-size: clamp(30px, 6vw, 54px);
  letter-spacing: 6px;
  margin: 12px 0 4px;
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--ink), 6px 6px 0 var(--sunset);
}
.title-tag { color: var(--muted); margin: 0 0 22px; }
.title-menu { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.title-menu .btn { min-width: 300px; }
.title-error { color: var(--pink); font-weight: bold; }
.title-foot { color: var(--line); font-size: 11px; letter-spacing: 2px; margin-top: 34px; }

.howto-line { margin: 8px 0; }
.howto-dot { color: var(--gold); font-weight: bold; }

/* ------------------------------------------------------------------
   Setup screens
------------------------------------------------------------------ */
.setup-head { text-align: center; margin-bottom: 14px; }
.setup-step { color: var(--teal); font-size: 12px; letter-spacing: 3px; font-weight: bold; }
.setup-title { color: var(--gold); letter-spacing: 3px; margin: 4px 0 0; font-size: 24px; text-shadow: 3px 3px 0 var(--ink); }
.setup-hint { text-align: center; color: var(--muted); margin: 0 0 12px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.card {
  text-align: left;
  font-family: var(--font);
  color: var(--text);
  background: var(--panel);
  border: 4px solid var(--line);
  box-shadow: var(--drop), var(--bevel);
  padding: 12px;
}
button.card { cursor: pointer; }
button.card:hover { border-color: var(--muted); background: #262a4a; }
.card.selected {
  border-color: var(--gold);
  background: #2c2a3f;
  box-shadow: 0 0 0 3px rgba(255, 205, 117, 0.35), var(--drop);
}
.card.selected::after { content: "✔ IN THE GROUP"; display: block; margin-top: 8px; color: var(--gold); font-weight: bold; font-size: 12px; letter-spacing: 1px; }
.pet-card.selected::after { content: "✔ COMING ALONG"; }

.card-name { margin: 2px 0 2px; color: var(--gold); font-size: 17px; letter-spacing: 1px; }
.card-sub { color: var(--teal); font-size: 12px; font-weight: bold; margin-bottom: 4px; text-transform: uppercase; }
.card-theme { color: var(--sand); font-size: 13px; font-style: italic; margin: 4px 0; }
.card-desc { font-size: 13px; color: var(--text); margin: 6px 0; }
.card-mini { font-size: 12px; color: var(--lime); margin: 3px 0; }
.card-weak { color: var(--pink); }
.card-items { font-size: 12px; color: var(--muted); margin: 6px 0; }

/* ------------------------------------------------------------------
   Party-pick character profile strip (age/skill, stat bars, trait, brings)
------------------------------------------------------------------ */
.char-profile {
  margin: 6px 0 4px;
  padding: 6px 7px;
  background: var(--ink);
  border: 2px solid var(--line);
}
.char-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.chip-age { border-color: var(--teal); color: var(--teal); text-transform: uppercase; letter-spacing: 1px; }

.char-bars { display: flex; flex-direction: column; gap: 3px; }
.char-bar { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.char-bar-lbl {
  width: 30px; color: var(--muted); font-weight: bold;
  text-transform: uppercase; letter-spacing: 1px;
}
.char-meter { flex: 1; width: auto; height: 10px; }
.char-bar-num { width: 22px; text-align: right; color: var(--text); font-weight: bold; }

.char-trait {
  margin-top: 5px; font-size: 11px; font-weight: bold;
  letter-spacing: 1px; text-transform: uppercase;
}
.trait-tire { color: var(--pink); }
.trait-hardy { color: var(--lime); }
.trait-norm { color: var(--muted); }

.char-brings {
  margin-top: 5px; font-size: 12px; color: var(--sand);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
}
.char-brings-lbl { color: var(--muted); font-weight: bold; text-transform: uppercase; font-size: 11px; }
.char-bring { color: var(--gold-lite); font-weight: bold; }
.char-bring-ico { font-style: normal; }
.char-brings-none { color: var(--muted); font-style: italic; }

/* Running group summary below the character grid. */
.party-summary {
  border: 3px solid var(--line);
  background: var(--panel);
  box-shadow: var(--drop);
  padding: 8px 12px;
  margin: 4px 0 14px;
}
.party-summary:empty { display: none; }
.party-summary-head {
  color: var(--gold); font-weight: bold; font-size: 12px;
  letter-spacing: 2px; margin-bottom: 6px;
}
.party-supplies { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.supply-chip {
  display: inline-block; font-size: 12px; font-weight: bold;
  padding: 2px 8px; background: var(--ink); border: 2px solid var(--line);
  color: var(--gold-lite);
}
.supply-ico { font-style: normal; }
.party-frag { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.party-frag-num { font-weight: bold; font-size: 15px; }
.party-frag-word { font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }

/* animated scene at the top of each background ("Choose Your Story") card */
.card-scene {
  width: 100%;
  height: 128px;
  margin: 0 0 8px;
  border: 3px solid var(--ink);
  box-shadow: var(--bevel);
  overflow: hidden;
  background: var(--sea);
  image-rendering: pixelated;
}
.card-scene canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* per-item starting-inventory list on each background card */
.card-items-head {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal);
  margin: 8px 0 4px;
}
.card-items-list { display: flex; flex-direction: column; gap: 5px; margin: 0 0 4px; }
.card-item-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  background: var(--ink);
  border: 2px solid var(--line);
  padding: 4px 7px;
}
.card-item-ess { border-color: var(--gold); }
.card-item-ico { font-size: 18px; flex: 0 0 auto; line-height: 1.2; }
.card-item-mid { flex: 1 1 auto; min-width: 0; }
.card-item-name { font-size: 12px; font-weight: bold; color: var(--text); }
.card-item-qty { color: var(--gold); }
.card-item-star { color: var(--gold); }
.card-item-desc { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 1px; }

.char-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pet-icon { font-size: 44px; text-align: center; margin-bottom: 4px; }

.setup-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 30px;
}
.party-counter {
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--pink);
  background: var(--ink);
  border: 3px solid currentColor;
  padding: 6px 12px;
}
.party-counter.ok { color: var(--lime); }

/* ------------------------------------------------------------------
   Map screen
------------------------------------------------------------------ */
.map-canvas {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
  border: 4px solid var(--ink);
  box-shadow: var(--bevel);
  image-rendering: pixelated;
  cursor: crosshair;
  background: var(--sea);
}
.map-canvas-small { max-width: 520px; cursor: default; }

.route-card {
  background: var(--panel2);
  border: 4px solid var(--line);
  box-shadow: var(--bevel);
  padding: 10px 12px;
  margin: 10px 0;
}
.route-head { display: flex; align-items: center; gap: 10px; }
.route-ico { font-size: 28px; }
.route-ico-big { font-size: 44px; text-align: center; }
.route-label { font-weight: bold; color: var(--gold); font-size: 16px; letter-spacing: 1px; }
.route-to { color: var(--teal); font-size: 13px; font-weight: bold; }
.route-note { color: var(--muted); font-size: 13px; font-style: italic; margin: 6px 0 2px; }
.route-warning { color: var(--pink); font-weight: bold; font-size: 13px; }
.route-none { color: var(--muted); font-style: italic; }
.map-actions { text-align: center; margin: 4px 0 30px; }

/* A shut road: dimmed, red-edged, with a hazard-stripe wash so a closed
   route reads as closed at a glance (shown only once the party knows). */
.route-card-closed {
  border-color: var(--pink);
  opacity: 0.72;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 14px,
      rgba(0, 0, 0, 0.16) 14px 28px),
    var(--panel2);
}
.route-card-closed .route-label { color: var(--pink); }
.route-card-closed .route-ico { filter: grayscale(0.6); }

/* ------------------------------------------------------------------
   Travel screen
------------------------------------------------------------------ */
.travel-sub { color: var(--sand); font-weight: bold; letter-spacing: 1px; margin: 2px 0 10px; }

.travel-progress { margin-top: 10px; }
.travel-progress-bar {
  height: 22px;
  background: var(--ink);
  border: 3px solid var(--line);
  overflow: hidden;
}
.travel-progress-fill {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(45deg, var(--gold) 0 12px, var(--orange) 12px 24px);
  transition: width 0.3s;
}
.travel-progress-text { text-align: center; color: var(--teal); font-weight: bold; font-size: 13px; margin-top: 4px; }

.travel-log {
  max-height: 300px;
  overflow-y: auto;
  background: var(--ink);
  border: 3px solid var(--line);
  padding: 10px 12px;
}
.log-day { border-top: 2px dashed var(--line); padding-top: 6px; margin-top: 8px; }
.log-day:first-child { border-top: none; margin-top: 0; }
.log-day-head { color: var(--gold); font-weight: bold; letter-spacing: 2px; font-size: 12px; }
.log-weather { color: var(--teal); margin: 4px 0; font-size: 14px; }
.log-banter { border-left: 4px solid var(--sunset); padding-left: 10px; margin: 6px 0; }
.log-banter-line { color: var(--sand); font-style: italic; margin: 2px 0; font-size: 13px; }

.travel-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 30px;
}
.travel-hint { color: var(--muted); font-size: 12px; }

/* ------------------------------------------------------------------
   Hub screen
------------------------------------------------------------------ */
.hub-head { background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.hub-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hub-name { margin: 0; color: var(--gold); letter-spacing: 2px; font-size: 24px; text-shadow: 3px 3px 0 var(--ink); }
.hub-desc { color: var(--text); font-size: 14px; margin: 10px 0 2px; }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}

.hub-btn {
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  color: var(--text);
  background: var(--panel);
  border: 4px solid var(--line);
  box-shadow: var(--drop), var(--bevel);
  padding: 14px 10px;
  cursor: pointer;
}
.hub-btn:hover:not(:disabled) { border-color: var(--gold); background: #262a4a; }
.hub-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.hub-btn:disabled { opacity: 0.5; cursor: default; }
.hub-btn-ico { font-size: 30px; }
.hub-btn-label { font-weight: bold; letter-spacing: 1px; color: var(--gold); font-size: 14px; }
.hub-btn-sub { font-size: 11px; color: var(--muted); }

/* ------------------------------------------------------------------
   Market / jobs / bag lists
------------------------------------------------------------------ */
.market-money { font-size: 16px; font-weight: bold; color: var(--gold); margin-bottom: 8px; }
.tab-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.tab-btn { font-size: 13px; padding: 6px 14px; }
.tab-btn.active { background: var(--gold); color: var(--ink); border-color: var(--gold-lite); }

.item-list { display: flex; flex-direction: column; gap: 8px; }
.item-row, .job-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel2);
  border: 3px solid var(--line);
  box-shadow: var(--bevel);
  padding: 8px 10px;
}
.item-ico { font-size: 24px; flex: 0 0 auto; }
.item-mid { flex: 1 1 auto; min-width: 0; }
.item-name { font-weight: bold; color: var(--text); font-size: 14px; }
.item-desc { color: var(--muted); font-size: 12px; }
.item-price { font-weight: bold; color: var(--gold); white-space: nowrap; }

.job-list { display: flex; flex-direction: column; gap: 8px; }

/* Honest job pay listing — numbers straight from engine.jobPayInfo so the
   board matches exactly what completeJob() pays. */
.job-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 2px;
}
.job-pay-main { color: var(--gold); font-weight: bold; font-size: 13px; }
.job-pay-skill { color: var(--sand); font-weight: bold; font-size: 11px; }
.job-pay-note { color: var(--muted); font-size: 11px; }
.job-pay-range {
  color: var(--teal);
  font-size: 11px;
  flex-basis: 100%;
}
.job-pay-days { color: var(--muted); font-size: 11px; }

/* ------------------------------------------------------------------
   Modals
------------------------------------------------------------------ */
#modal-root { position: fixed; inset: 0; z-index: 100; pointer-events: none; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 20, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: auto;
}

.modal-box {
  background: var(--panel);
  border: 4px solid var(--gold);
  box-shadow: 8px 8px 0 var(--ink), var(--bevel);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  animation: modal-pop 0.15s steps(3, end);
}
@keyframes modal-pop { from { transform: scale(0.92); } to { transform: scale(1); } }
.modal-wide { max-width: 760px; }

.modal-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, var(--sunset), var(--panel2));
  border-bottom: 4px solid var(--gold);
  padding: 7px 12px;
}
.modal-title { font-weight: bold; letter-spacing: 2px; color: var(--text); text-shadow: 2px 2px 0 var(--ink); font-size: 14px; }
.modal-x {
  font-family: var(--font);
  background: var(--red);
  color: var(--text);
  border: 3px solid var(--pink);
  font-weight: bold;
  cursor: pointer;
  padding: 1px 8px;
}
.modal-x:hover { background: var(--pink); color: var(--ink); }

.modal-body { padding: 14px; overflow-y: auto; }
.modal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-top: 3px solid var(--line);
  background: var(--panel2);
}

/* event modal */
.event-modal .modal-box { border-color: var(--teal); }
.event-text { font-size: 15px; margin: 8px 0; }
.event-skill { color: var(--gold); font-weight: bold; }
.event-journal { color: var(--sand); font-style: italic; font-size: 13px; }

.choice-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.choice-btn {
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  width: 100%;
  font-size: 14px;
  color: var(--text);
  background: var(--panel2);
  border: 4px solid var(--line);
  box-shadow: var(--bevel);
  padding: 10px 12px;
  cursor: pointer;
}
.choice-btn:hover:not(:disabled) { border-color: var(--gold); background: #334387; }
.choice-btn:disabled { opacity: 0.55; cursor: default; }
.choice-label { font-weight: bold; }
.choice-skill { font-size: 12px; color: var(--gold); }
.choice-req { font-size: 12px; color: var(--pink); }
/* a choice that launches a hands-on mini-game (ford / hunt / fence) */
.choice-mg { border-left: 4px solid var(--gold); }
.choice-mg:hover:not(:disabled) { border-color: var(--gold); }
.choice-mg-tag {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: var(--green);
}

/* mini-game shell */
.mg-modal .modal-box { max-width: 700px; border-color: var(--teal); }
.mg-shell { display: flex; justify-content: center; }
.mg-stage {
  width: 640px;
  max-width: 100%;
  height: 420px;
  background: var(--ink);
  border: 4px solid var(--line);
  box-shadow: var(--bevel);
}

/* NPC / kiosk / edu */
.npc-list { display: flex; flex-direction: column; gap: 4px; }
.npc-line { font-size: 14px; margin: 8px 0; }
.edu-box { background: var(--ink); border: 3px solid var(--teal); padding: 10px 12px; margin-top: 10px; }
.edu-title { color: var(--teal); font-weight: bold; font-size: 12px; letter-spacing: 2px; margin-bottom: 4px; }
.edu-text { margin: 0; font-size: 13px; }
.edu-added { color: var(--lime); font-size: 12px; font-weight: bold; margin: 8px 0 0; }
.kiosk-box { background: var(--ink); border: 3px dashed var(--gold); padding: 14px; }
.kiosk-text { color: var(--lime); font-size: 14px; margin: 0; }
.kiosk-flair {
  color: var(--teal);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 0 0 8px;
  animation: blink 1.3s steps(2, end) infinite;
}

/* ---------- kiosk gamble ("insert 1 credit") ---------- */
.kiosk-gamble {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 3px dashed var(--gold);
}
.kiosk-credits {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--gold);
  margin: 0 0 6px;
}
.kiosk-note { font-size: 12px; color: var(--muted); margin: 6px 0 0; min-height: 1em; }
.kiosk-note-bad { color: var(--pink); font-weight: bold; }
.kiosk-result { margin-top: 8px; }
.kiosk-result-title {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 6px 0 6px;
}
.kiosk-result-title.kiosk-good { color: var(--lime); }
.kiosk-result-title.kiosk-bad { color: var(--pink); }
.kiosk-result-scene {
  width: 100%;
  height: 140px;
  margin: 0 0 8px;
  border: 3px solid var(--gold);
  box-shadow: var(--bevel);
  overflow: hidden;
  background: var(--sea);
  image-rendering: pixelated;
}
.kiosk-result-scene canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* ---------- animated pop-up scenes (AT_SCENES) ---------- */
.scene-box {
  width: 100%;
  height: 160px;
  margin: 0 0 12px;
  border: 4px solid var(--ink);
  box-shadow: var(--bevel);
  overflow: hidden;
  background: var(--sea);
  image-rendering: pixelated;
}
.scene-box canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.event-modal .scene-box { border-color: var(--teal); }
.farewell-modal .modal-box { border-color: var(--sand); }
.farewell-modal .scene-box { border-color: var(--sand); background: #22344f; }
.farewell-body .event-text { font-size: 15px; }

/* journal */
.journal-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; margin-top: 8px; }
.journal-entry { background: var(--panel2); border-left: 6px solid var(--line); border-top: 2px solid var(--line); padding: 8px 12px; }
.journal-event { border-left-color: var(--gold); }
.journal-edu { border-left-color: var(--teal); }
.journal-banter { border-left-color: var(--sunset); }
.journal-quest { border-left-color: var(--lime); }
.journal-head { display: flex; align-items: center; gap: 8px; }
.journal-title { font-weight: bold; color: var(--gold); flex: 1 1 auto; }
.journal-day { color: var(--muted); font-size: 11px; }
.journal-text { margin: 4px 0 0; font-size: 13px; }

/* party */
.party-wrap { display: flex; flex-direction: column; gap: 10px; }
.party-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--panel2);
  border: 3px solid var(--line);
  box-shadow: var(--bevel);
  padding: 10px 12px;
}
.party-card .sprite { margin: 0; flex: 0 0 auto; }
.party-mid { flex: 1 1 auto; }
.party-stat { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 12px; }
.party-stat-label { width: 62px; color: var(--muted); text-transform: uppercase; font-size: 11px; }
.party-stat-num { color: var(--text); font-weight: bold; width: 28px; text-align: right; }
.pet-row .pet-icon { font-size: 36px; margin: 0; }

/* ------------------------------------------------------------------
   Ending
------------------------------------------------------------------ */
.screen-ending { text-align: center; padding: 20px 6px 50px; }
.ending-icon { font-size: 56px; }
.ending-title {
  color: var(--gold);
  letter-spacing: 3px;
  font-size: clamp(24px, 5vw, 40px);
  text-shadow: 4px 4px 0 var(--ink);
  margin: 6px 0;
}
.ending-lose .ending-title { color: var(--teal); }
.ending-days {
  display: inline-block;
  background: var(--ink);
  border: 3px solid var(--sand);
  color: var(--sand);
  font-weight: bold;
  letter-spacing: 2px;
  padding: 5px 14px;
  margin-bottom: 16px;
}
.screen-ending .panel { text-align: left; }
.ending-para { font-size: 15px; margin: 8px 0; }
.ending-fate { color: var(--lime); font-size: 14px; margin: 6px 0; }
.ending-quote { color: var(--sand); font-style: italic; font-size: 13px; margin: 6px 0; }

/* Memorial — honoring travelers lost or detained. Muted and respectful,
   set apart from the warm "stayed behind" / "where they are now" lists. */
.ending-memorial {
  border-color: var(--line);
  background: #171c2e;
}
.ending-memorial .panel-title { color: var(--muted); letter-spacing: 2px; }
.memorial-heading {
  color: var(--sand);
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 13px;
  margin: 12px 0 2px;
}
.memorial-heading:first-child { margin-top: 2px; }
.memorial-names {
  color: var(--text);
  font-size: 14px;
  margin: 2px 0;
}
.memorial-text {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  margin: 2px 0 8px;
}
.ending-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* ------------------------------------------------------------------
   Toasts — retro system dialogs
------------------------------------------------------------------ */
#toasts {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(340px, calc(100vw - 28px));
  pointer-events: none;
}

.toast {
  background: var(--panel);
  border: 3px solid var(--line);
  box-shadow: 5px 5px 0 var(--ink);
  animation: toast-in 0.18s steps(3, end);
}
@keyframes toast-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast-out { transition: opacity 0.4s; opacity: 0; }

.toast-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel2);
  border-bottom: 3px solid var(--line);
  padding: 2px 8px;
}
.toast-bar-title { font-size: 10px; font-weight: bold; letter-spacing: 2px; color: var(--teal); }
.toast-bar-x { font-size: 10px; color: var(--muted); }
.toast-text { padding: 8px 10px; font-size: 13px; }

.toast-good { border-color: var(--green); }
.toast-good .toast-bar { background: #14351f; border-color: var(--green); }
.toast-good .toast-bar-title { color: var(--lime); }
.toast-bad { border-color: var(--red); }
.toast-bad .toast-bar { background: #3a1622; border-color: var(--red); }
.toast-bad .toast-bar-title { color: var(--pink); }
.toast-info { border-color: var(--sand); }
.toast-info .toast-bar-title { color: var(--sand); }

/* ==================================================================
   PHASE 2 — read-aloud, health sidebar, warnings, town mode,
   travel animation strip, ambient motion
================================================================== */

/* ---------- read-aloud (AT_TTS) buttons ---------- */
.tts-row { text-align: right; margin: 0 0 8px; }
.tts-btn { font-size: 12px; padding: 6px 10px; }
.tts-btn.tts-on { background: var(--teal); color: var(--ink); border-color: #b8f8fb; }
.tts-mini { font-size: 10px; padding: 2px 7px; margin: 0 6px; box-shadow: none; border-width: 2px; }
.modal-titlebar .tts-mini { flex: 0 0 auto; }

/* ---------- side panels (health right, bag left) ---------- */
/* Both asides sit FLUSH against the centered #app column (max-width 1024)
   with only a few px gap, anchored from the viewport centre so the main
   content stays centered between them. */
#health-side, #bag-side {
  position: fixed;
  top: 74px;
  z-index: 60;
  width: 176px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: var(--panel);
  border: 4px solid var(--line);
  box-shadow: var(--drop), var(--bevel);
  padding: 8px;
}
/* flush to the right edge of the 1024px content column */
#health-side { left: calc(50% + 512px + 6px); }
/* flush to the left edge of the content column */
#bag-side { right: calc(50% + 512px + 6px); }

.hs-title, .bs-title {
  color: var(--gold);
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.hs-group { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.hs-gbar { width: 100%; height: 16px; flex: 1 1 auto; }
.hs-gnum { color: var(--text); font-weight: bold; font-size: 13px; }
.hs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 2px dashed rgba(86, 108, 134, 0.5);
  padding: 5px 0 4px;
}
.hs-sprite { margin: 0; flex: 0 0 auto; }
.hs-mid { flex: 1 1 auto; min-width: 0; }
.hs-name-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 2px; }
.hs-name {
  font-size: 11px;
  font-weight: bold;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-status { font-size: 11px; flex: 0 0 auto; }
.hs-bar { width: 100%; height: 8px; }
/* per-member H / M / S mini-bars */
.hs-mrow { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.hs-mtag {
  font-size: 9px;
  font-weight: bold;
  color: var(--muted);
  width: 8px;
  flex: 0 0 auto;
  text-align: center;
}
.hs-pulse { animation: hs-pulse 0.7s steps(4, end) 1; }
@keyframes hs-pulse {
  0% { background: rgba(255, 205, 117, 0.35); }
  100% { background: transparent; }
}

/* ---------- packed-bag sidebar (left) ---------- */
.bs-empty { color: var(--muted); font-size: 11px; font-style: italic; margin: 4px 0 0; }
.bs-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 2px dashed rgba(86, 108, 134, 0.5);
  padding: 4px 0 3px;
}
.bs-chip:first-of-type { border-top: none; }
.bs-ico { font-size: 16px; flex: 0 0 auto; }
.bs-mid { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bs-name {
  font-size: 11px;
  font-weight: bold;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-qty { font-size: 10px; color: var(--gold); }
.bs-essential .bs-qty { color: var(--lime); }

/* keep the content column clear of whichever side(s) are on.
   Symmetric padding centers #screen between the two asides. */
@media (max-width: 1424px) {
  body.at-side-on #app { padding-right: 190px; }
  body.at-bagside-on #app { padding-left: 190px; }
  body.at-side-on #health-side { left: auto; right: 8px; }
  body.at-bagside-on #bag-side { right: auto; left: 8px; }
}
/* ~1100px and below: collapse both to slim strips with tooltips */
@media (max-width: 1100px) {
  body.at-side-on #app { padding-right: 68px; }
  body.at-bagside-on #app { padding-left: 68px; }
  #health-side, #bag-side { width: 56px; padding: 6px 4px; }
  #health-side .hs-title, #bag-side .bs-title { font-size: 9px; letter-spacing: 1px; text-align: center; }
  #health-side .hs-name, #bag-side .bs-name { display: none; }
  #health-side .hs-gnum { display: none; }
  #health-side .hs-row { flex-direction: column; gap: 2px; }
  #health-side .hs-mid { width: 100%; }
  #health-side .hs-name-row { justify-content: center; }
  #health-side .hs-mtag { display: none; }
  #bag-side .bs-chip { justify-content: center; }
  #bag-side .bs-mid { display: none; }
}

/* ---------- warning toasts + blinking retro cursor ---------- */
.toast-warn { border-color: var(--sand); }
.toast-warn .toast-bar { background: #3a2d16; border-color: var(--sand); }
.toast-warn .toast-bar-title { color: var(--sand); }
.toast-text::after {
  content: "▌";
  margin-left: 3px;
  color: var(--muted);
  animation: blink 1s steps(2, end) infinite;
}

/* ---------- screen transitions & ambient motion ---------- */
.screen-enter { animation: screen-in 0.22s steps(5, end); }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.btn, .hub-btn, .choice-btn, button.card { transition: transform 0.07s, border-color 0.07s; }
.btn:hover:not(:disabled), .hub-btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translate(3px, 3px); }

/* floating +N / −N stat changes */
.stat-res, .stat-meter { position: relative; }
.floaty {
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 2px 2px 0 var(--ink);
  animation: floaty-up 1.1s ease-out forwards;
  z-index: 70;
}
.floaty-good { color: var(--lime); }
.floaty-bad { color: var(--pink); }
@keyframes floaty-up {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -26px); }
}

/* pulsing danger bars */
.meter-fill.f-bad { animation: bar-pulse 1s steps(2, end) infinite; }
@keyframes bar-pulse { 50% { opacity: 0.55; } }

/* ---------- animated title scene ---------- */
.title-sun { animation: sun-drift 14s ease-in-out infinite alternate; }
@keyframes sun-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(26px, -8px); }
}
.title-road { animation: road-scroll 3s linear infinite; background-size: 80px 100%; }
@keyframes road-scroll {
  from { background-position: 0 0; }
  to { background-position: -80px 0; }
}
.title-walkers {
  position: absolute;
  bottom: 10px;
  left: -90px;
  display: flex;
  gap: 7px;
  animation: walkers-cross 16s linear infinite;
}
@keyframes walkers-cross {
  from { transform: translateX(0); }
  to { transform: translateX(760px); }
}
.walker {
  display: block;
  width: 9px;
  height: 15px;
  position: relative;
  background: var(--panel2);
  animation: walker-bob 0.45s steps(2, end) infinite alternate;
}
.walker::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 1px;
  width: 7px;
  height: 6px;
  background: #f2c29b;
}
.walker-0 { background: var(--sunset); }
.walker-1 { background: var(--sea); height: 13px; animation-delay: 0.12s; }
.walker-2 { background: var(--panel2); animation-delay: 0.22s; }
.walker-3 { background: var(--sand); height: 11px; animation-delay: 0.3s; }
@keyframes walker-bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }

.title-anim {
  max-width: 760px;
  margin: 0 auto 10px;
  border: 4px solid var(--line);
  box-shadow: var(--drop), var(--bevel);
  overflow: hidden;
  background: var(--sea);
}

/* ---------- travel side-view animation strip ---------- */
.travelanim-wrap {
  margin: 8px 0;
  border: 4px solid var(--ink);
  box-shadow: var(--bevel);
  overflow: hidden;
  background: var(--sea);
  image-rendering: pixelated;
}
.travelanim-wrap canvas { display: block; width: 100%; height: auto; }
.map-canvas-inset { max-width: 340px; margin: 8px auto 0; opacity: 0.95; }

/* ---------- walkable town mode ---------- */
.screen-town { padding-bottom: 30px; }
.town-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 4px solid var(--line);
  box-shadow: var(--drop), var(--bevel);
  padding: 8px 12px;
  margin-bottom: 10px;
}
.town-head .hub-name { font-size: 19px; margin: 0; flex: 1 1 auto; }
.town-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.town-wrap {
  border: 4px solid var(--ink);
  box-shadow: var(--drop), var(--bevel);
  background: var(--ink);
  overflow: hidden;
  image-rendering: pixelated;
  min-height: 200px;
}
.town-wrap canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.town-hint {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  margin: 8px 0 0;
}

/* ------------------------------------------------------------------
   Responsive
------------------------------------------------------------------ */
@media (max-width: 760px) {
  body { font-size: 14px; }
  #topbar { position: static; }
  .meter { width: 30px; }
  .card-grid, .char-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .hub-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .mg-stage { height: 420px; }
  .title-menu .btn { min-width: 240px; }
}

/* ==================================================================
   BATCH 4 — Set Out clarity, gain notifications, risk gauge,
   usable bag chips, destination display
================================================================== */

/* ---------- SET OUT needs-vs-have readout ---------- */
.setout-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 2px;
}
.setout-lead-tag {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--muted);
}
.setout-lead-to { color: var(--teal); font-weight: bold; font-size: 15px; letter-spacing: 1px; }
.setout-arrive { color: var(--lime); font-weight: bold; font-size: 13px; margin: 2px 0 6px; }
.setout-goal { color: var(--gold); font-size: 13px; margin: 2px 0 6px; }

.setout-need {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
  border: 3px solid var(--line);
  background: var(--ink);
  padding: 8px 10px;
}
.setout-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: bold;
  padding: 3px 4px;
  border-left: 4px solid transparent;
}
.setout-row.ok { border-left-color: var(--green); }
.setout-row.short { border-left-color: var(--red); }
.setout-mark { width: 16px; flex: 0 0 auto; text-align: center; font-size: 15px; }
.setout-row.ok .setout-mark { color: var(--lime); }
.setout-row.short .setout-mark { color: var(--pink); }
.setout-label { flex: 1 1 auto; color: var(--text); letter-spacing: 1px; text-transform: uppercase; font-size: 12px; }
.setout-need-v { color: var(--muted); font-size: 12px; white-space: nowrap; }
.setout-have-v { width: 92px; text-align: right; white-space: nowrap; font-size: 12px; }
.setout-row.ok .setout-have-v { color: var(--lime); }
.setout-row.short .setout-have-v { color: var(--pink); }
.setout-days { border-left-color: var(--teal); }
.setout-days .setout-mark { color: var(--teal); }
.setout-days .setout-need-v { color: var(--sand); }
.setout-days .setout-have-v { color: var(--muted); }

/* ---------- gain notifications (items + travellers) ---------- */
.toast-gain { border-color: var(--gold); box-shadow: 5px 5px 0 var(--ink); }
.toast-gain .toast-bar { background: #3a2d16; border-color: var(--gold); }
.toast-gain .toast-bar-title { color: var(--gold-lite); }
.toast-gain-traveller { border-color: var(--teal); }
.toast-gain-traveller .toast-bar { background: #123642; border-color: var(--teal); }
.toast-gain-traveller .toast-bar-title { color: var(--teal); }
.toast-gain-body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
}
.toast-gain-ico { font-size: 26px; flex: 0 0 auto; }
.toast-gain-text { font-size: 14px; font-weight: bold; color: var(--gold-lite); }
.toast-gain-traveller .toast-gain-text { color: var(--teal); }

/* ---------- speedometer gauge (Legal Risk) ---------- */
.gauge-box {
  border: 3px solid var(--line);
  background: var(--ink);
  box-shadow: var(--bevel);
  padding: 5px 4px 6px;
  margin: 0 0 8px;
  text-align: center;
}
.gauge-box.gauge-high { border-color: var(--red); animation: blink 1.1s steps(2, end) infinite; }
.gauge-box.gauge-med { border-color: var(--sand); }
.gauge-box.gauge-low { border-color: var(--green); }
.gauge-title {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 2px;
}
.gauge-canvas {
  display: block;
  margin: 0 auto;
  width: 120px;
  height: 66px;
  image-rendering: pixelated;
}
.gauge-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 2px;
}
.gauge-band-cur { font-size: 10px; }
.gauge-band-low { color: var(--lime); }
.gauge-band-med { color: var(--sand); }
.gauge-band-high { color: var(--pink); }

/* ---------- usable bag chips (left sidebar) ---------- */
button.bs-chip.bs-usable {
  font-family: var(--font);
  width: 100%;
  text-align: left;
  color: var(--text);
  background: var(--panel2);
  border: 2px solid var(--gold);
  border-top: 2px solid var(--gold);
  box-shadow: var(--bevel);
  cursor: pointer;
  padding: 4px 6px;
  margin: 3px 0;
}
button.bs-chip.bs-usable:hover { background: #334387; border-color: var(--gold-lite); }
button.bs-chip.bs-usable:active { transform: translate(2px, 2px); }
.bs-use {
  display: block;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--gold);
  margin-top: 1px;
}
button.bs-chip.bs-usable:hover .bs-use { color: var(--gold-lite); }

/* ---------- destination line on the map ---------- */
.map-dest {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.map-dest-tag {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--muted);
}
.map-dest-name { color: var(--lime); font-weight: bold; font-size: 15px; letter-spacing: 1px; }

/* ---------- new-traveller welcome modal ---------- */
.recruit-modal .modal-box { border-color: var(--teal); }
.recruit-modal .scene-box { border-color: var(--teal); background: #123642; }

/* ---------- somber casualty modal (lost / detained) ---------- */
/* Muted and grave — deliberately NOT the warm farewell look. Dignified,
   calm, non-graphic, in the spirit of the original Oregon Trail. */
.casualty-modal .modal-box {
  border-color: var(--line);
  background: #1a2033;
}
.casualty-modal .modal-titlebar { background: #232a40; }
.casualty-modal .modal-title {
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.casualty-modal .scene-box {
  border-color: var(--line);
  background: #12162a;
}
.casualty-modal .modal-foot { justify-content: center; }
.casualty-modal .modal-foot .btn {
  background: var(--panel2);
  border-color: var(--line);
  color: var(--muted);
}
.casualty-modal .modal-foot .btn:hover:not(:disabled) {
  background: #334387;
  border-color: var(--muted);
  color: var(--text);
}
.casualty-body { text-align: center; }
.casualty-body .event-text {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
}

/* narrow sidebars: hide the "TAP TO USE" hint but keep chips clickable */
@media (max-width: 1100px) {
  #bag-side .bs-use { display: none; }
  #health-side .gauge-band { display: none; }
  #health-side .gauge-canvas { width: 48px; height: 28px; }
  #health-side .gauge-title { font-size: 7px; letter-spacing: 0; }
}

/* =====================================================================
   POLISH LAYER — refined-and-shiny pass (Phase 4).
   Keeps the chunky retro bones; adds glass, glow and gradient depth.
   Appended last so it wins ties without rewriting the rules above.
   ===================================================================== */

:root {
  --shine: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 42%, rgba(0, 0, 0, 0.12) 100%);
  --glow-gold: 0 0 14px rgba(255, 205, 117, 0.35);
  --glow-teal: 0 0 12px rgba(115, 239, 247, 0.30);
}

/* richer backdrop: a third glow + subtle vignette */
body {
  background:
    radial-gradient(1100px 500px at 75% -10%, rgba(224, 122, 95, 0.24), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(42, 157, 143, 0.22), transparent 60%),
    radial-gradient(700px 420px at 50% 45%, rgba(41, 54, 111, 0.35), transparent 70%),
    var(--bg);
}

/* ---------- buttons: glassy face + shine sweep on hover ---------- */
#app .btn, #modal-root .btn {
  position: relative;
  overflow: hidden;
  background-image: var(--shine);
  transition: box-shadow 0.12s ease, filter 0.12s ease;
}
#app .btn::after, #modal-root .btn::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -75%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-22deg);
  transition: left 0.3s ease;
  pointer-events: none;
}
#app .btn:hover:not(:disabled)::after,
#modal-root .btn:hover:not(:disabled)::after { left: 130%; }
#app .btn-gold:hover:not(:disabled),
#modal-root .btn-gold:hover:not(:disabled) { box-shadow: var(--drop), var(--glow-gold); }
#app .btn:focus-visible, #modal-root .btn:focus-visible {
  outline: 3px dashed var(--teal);
  outline-offset: 2px;
}

/* ---------- panels & cards: gradient depth + hover lift ---------- */
#app .panel, #modal-root .panel {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 34%);
}
#app .card {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#app .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--drop), 0 6px 18px rgba(0, 0, 0, 0.35);
}
#app .card.selected { box-shadow: var(--drop), var(--glow-gold); }

/* ---------- topbar: glassier band + glowing brand ---------- */
#topbar {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%);
  backdrop-filter: blur(2px);
}
#brandline .brand-text {
  text-shadow: 0 0 10px rgba(255, 205, 117, 0.55), 2px 2px 0 var(--ink);
}

/* ---------- meters: gradient fill + soft glass cap ---------- */
#app .meter, #health-side .meter, #modal-root .meter { position: relative; }
#app .meter::after, #health-side .meter::after, #modal-root .meter::after {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
#app .meter-fill, #health-side .meter-fill, #modal-root .meter-fill {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 60%);
}

/* ---------- modals: deeper shadow, glow ring, smoother pop ---------- */
.modal-overlay { backdrop-filter: blur(3px); }
.modal-box {
  box-shadow: 8px 8px 0 var(--ink), 0 12px 44px rgba(0, 0, 0, 0.55);
}
.event-modal .modal-box { box-shadow: 8px 8px 0 var(--ink), var(--glow-gold); }
.modal-titlebar {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 70%);
}

/* ---------- event choices: hover glow + slide cue ---------- */
.choice-btn {
  transition: transform 0.1s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 45%);
}
.choice-btn:hover:not(:disabled) {
  transform: translateX(3px);
  border-color: var(--gold);
  box-shadow: 3px 3px 0 var(--ink), var(--glow-gold);
}

/* ---------- toasts: glass sheen ---------- */
.toast {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 45%);
  box-shadow: 4px 4px 0 var(--ink), 0 8px 22px rgba(0, 0, 0, 0.4);
}

/* ---------- job cards: make the WORK button area pop ---------- */
#app .job-card, #modal-root .job-card {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 40%);
  transition: box-shadow 0.12s ease;
}
#app .job-card:hover, #modal-root .job-card:hover { box-shadow: var(--drop), var(--glow-teal); }

/* ---------- mini-games: same shine language inside the kiosk ---------- */
#modal-root .mg-wrap {
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
#modal-root .mg-header {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 70%);
}
#modal-root .mg-title { text-shadow: 0 0 8px rgba(255, 205, 117, 0.5); }
#modal-root .mg-btn {
  position: relative;
  overflow: hidden;
  background-image: var(--shine);
  transition: box-shadow 0.12s ease;
}
#modal-root .mg-btn:hover:not(:disabled) { box-shadow: 3px 3px 0 #0f0f1b, var(--glow-gold); }
#modal-root .mg-btn-go:hover:not(:disabled) { box-shadow: 3px 3px 0 #0f0f1b, 0 0 12px rgba(56, 183, 100, 0.45); }
#modal-root .mg-meter { position: relative; }
#modal-root .mg-meter::after {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  background: rgba(255, 255, 255, 0.13);
  pointer-events: none;
}
#modal-root .mg-meter-fill {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 60%);
}
#modal-root .mg2-canvas {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(115, 239, 247, 0.12);
}
#modal-root .mg-stars { text-shadow: 0 0 12px rgba(255, 205, 117, 0.6); }
#modal-root .mg-badge { box-shadow: 0 0 8px rgba(56, 183, 100, 0.25); }

/* ---------- economy mood banners (market day / shortage / wages) ---------- */
.market-mood-good {
  color: var(--lime);
  border-left: 4px solid var(--green);
  padding-left: 8px;
  font-weight: bold;
}
.market-mood-bad {
  color: var(--pink);
  border-left: 4px solid var(--red);
  padding-left: 8px;
  font-weight: bold;
}

/* ---------- meta / difficulty / perks ---------- */
.title-meta {
  text-align: center;
  color: var(--gold);
  font-size: 13px;
  margin: 4px 0 0;
  text-shadow: 0 0 8px rgba(255, 205, 117, 0.35);
}
.mode-row { justify-content: center; }
.mode-row .mode-btn { min-width: 150px; }
.party-perk {
  color: var(--gold);
  text-shadow: 0 0 6px rgba(255, 205, 117, 0.3);
}

/* respect reduced-motion for the new transitions */
@media (prefers-reduced-motion: reduce) {
  #app .btn::after, #modal-root .btn::after { display: none; }
  #app .card, #app .card:hover { transform: none; transition: none; }
  .choice-btn, .choice-btn:hover:not(:disabled) { transform: none; transition: none; }
}