/* ============================================================
   拂柳镇 (FULIU TOWN)  —  style.css
   Mobile portrait, jianghu night / red-lacquer / gold-trim.
   Target ~390 x 844, scales responsively.
   ============================================================ */

:root {
  --wood-dark: #24100d;
  --wood: #6b1f1a;
  --wood-light: #8c2c22;
  --parch: #f6e7c4;
  --parch-deep: #ecd6a8;
  --parch-line: #d8bd88;
  --ink: #3a2c1c;
  --ink-soft: #6b5638;
  --gold: #e3a72c;
  --gold-deep: #b9801a;
  --green: #3fae7a;
  --green-deep: #2c7a54;
  --red: #c1503b;
  --red-deep: #99381f;
  --blue: #4d7ea8;
  --crit: #f0a91e;
  --shadow: 0 6px 0 rgba(0,0,0,0.22), 0 12px 24px rgba(0,0,0,0.28);
  --radius: 16px;
  --font-cjk: "PingFang SC", "Microsoft YaHei", "Heiti SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  font-family: var(--font-cjk);
  color: var(--ink);
  background: #120c14;
  background-image:
    radial-gradient(1200px 600px at 50% -10%, #2a1830, #120c14 70%);
  overscroll-behavior: none;
}

/* ---------- phone frame ---------- */
#phone {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100%;
  margin: 0 auto;
  background:
    repeating-linear-gradient(180deg, #efdcb2 0 3px, #ecd8ab 3px 6px),
    var(--parch);
  box-shadow: 0 0 60px rgba(0,0,0,0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 460px) {
  body { padding: 18px 0; }
  #phone { min-height: calc(100vh - 36px); border-radius: 30px; border: 6px solid #150b09; }
}

#screen { flex: 1; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- generic buttons ---------- */
.btn {
  font-family: inherit;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  color: #fff8e8;
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  box-shadow: 0 4px 0 var(--wood-dark), 0 8px 14px rgba(0,0,0,0.25);
  padding: 14px 16px;
  cursor: pointer;
  transition: transform .06s, box-shadow .06s, filter .15s;
  letter-spacing: 0;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-dark), 0 4px 8px rgba(0,0,0,0.25); }
.btn.disabled, .btn:disabled { filter: grayscale(0.7) brightness(0.8); opacity: 0.6; pointer-events: none; }
.btn-big { width: 100%; font-size: 1.15rem; padding: 16px; }
.btn-ghost {
  background: transparent; color: var(--wood);
  box-shadow: inset 0 0 0 2px var(--wood-light);
}
.mini-cost, .soon { display: block; font-size: 0.68rem; font-weight: 600; opacity: 0.85; letter-spacing: 0; }

/* ============================================================
   INTRO
   ============================================================ */
.intro-screen {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 26px; gap: 12px;
  background: radial-gradient(600px 400px at 50% 20%, #fff2d0, transparent 70%);
}
.intro-crest { font-size: 2.6rem; color: var(--gold-deep); animation: bob 3s ease-in-out infinite; }
.intro-title {
  font-size: 2.5rem; letter-spacing: 0; color: var(--wood-dark);
  text-shadow: 0 2px 0 var(--parch-line), 0 4px 0 rgba(0,0,0,0.12);
}
.intro-sub { font-style: italic; color: var(--ink-soft); margin-bottom: 8px; }
.intro-text { max-width: 320px; }
.intro-text p { margin: 8px 0; line-height: 1.5; }
.intro-screen .btn { margin-top: 18px; max-width: 260px; }

/* ============================================================
   TOWN
   ============================================================ */
.town { flex: 1; display: flex; flex-direction: column; gap: 11px; padding-bottom: 16px; }

.town-banner { position: relative; height: 128px; overflow: hidden; border-bottom: 4px solid var(--wood); }
.town-banner svg { width: 100%; height: 100%; display: block; }
.town-title {
  position: absolute; left: 0; right: 0; bottom: 22px; text-align: center;
  font-size: 1.75rem; letter-spacing: 0.01em; color: #fff6df;
  text-shadow: 0 2px 0 var(--wood-dark), 0 4px 10px rgba(0,0,0,0.4);
}
.town-sub {
  position: absolute; left: 0; right: 0; bottom: 6px; text-align: center;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.01em; text-transform: none;
  color: var(--gold); text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.hero-card, .narrator, .panel > *, .result, .event, .transition,
.active-effects, .loc-grid, .area-switch, .area-stage, .town-foot { margin-inline: 14px; }

.hero-card {
  background: linear-gradient(180deg, #fff6db, var(--parch-deep));
  border: 2px solid var(--parch-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
}
.hero-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.hero-name { font-size: 1.15rem; font-weight: 800; color: var(--wood-dark); }
.hero-lv {
  font-size: 0.8rem; font-weight: 800; background: var(--wood); color: #fff2d5;
  padding: 3px 10px; border-radius: 999px;
}
.stat-line { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; margin-bottom: 10px; }
.stat-k { font-weight: 800; color: var(--ink-soft); width: 24px; }
.stat-v { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bar {
  flex: 1; height: 12px; background: #d8c39a; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
}
.bar-fill { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.bar-fill.xp { background: linear-gradient(90deg, #7ab7e0, var(--blue)); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini {
  display: flex; justify-content: space-between; align-items: center;
  background: #fffaf0; border: 1px solid var(--parch-line); border-radius: 10px;
  padding: 7px 10px; font-size: 0.82rem;
}
.mini-k { color: var(--ink-soft); font-weight: 700; }
.mini-v { font-weight: 800; color: var(--wood-dark); }
.mini.warn { background: #f6dcd3; border-color: var(--red); }
.mini.warn .mini-v { color: var(--red-deep); }

.dbg-inline-row { display: flex; gap: 8px; margin-top: 10px; }
.dbg-inline {
  flex: 1; width: 100%; font: inherit; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.01em; padding: 6px; border-radius: 8px; cursor: pointer;
  border: 1px dashed var(--wood-light); background: #fff6db; color: var(--wood);
}

.btn-explore {
  margin-inline: 14px;
  background: linear-gradient(180deg, #4bbf87, var(--green-deep));
  box-shadow: 0 5px 0 #1f5c3e, 0 10px 20px rgba(0,0,0,0.3);
  border-radius: 18px;
  padding: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.btn-explore:active { transform: translateY(4px); box-shadow: 0 1px 0 #1f5c3e; }
.btn-explore.disabled { pointer-events: none; filter: grayscale(0.8) brightness(0.82); }
.explore-word { font-size: 1.5rem; letter-spacing: 0; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.explore-sub { font-size: 0.7rem; color: #eef6dd; letter-spacing: 0; }

.town-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-inline: 14px; }
.navbtn {
  font: inherit; font-weight: 800; cursor: pointer;
  background: linear-gradient(180deg, #fff6db, var(--parch-deep));
  border: 2px solid var(--parch-line);
  box-shadow: 0 4px 0 var(--parch-line);
  border-radius: 14px; padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--wood-dark); position: relative;
}
.navbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--parch-line); }
.navbtn.disabled { opacity: 0.55; }
.nav-ico { font-size: 1.3rem; }
.navbtn .soon {
  position: absolute; bottom: 4px; font-size: 0.6rem; color: var(--red-deep); font-weight: 800;
}

.narrator {
  margin-top: auto;
  background: #1c1210;
  color: #f3e2bd;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: inset 0 0 0 2px #3a1f1a;
  min-height: 74px;
}
.narrator-label {
  font-size: 0.62rem; letter-spacing: 0.01em; text-transform: none;
  color: var(--gold); margin-bottom: 4px;
}
.narrator p { font-size: 0.9rem; line-height: 1.45; transition: opacity .3s; font-style: italic; }

/* ============================================================
   TRANSITION
   ============================================================ */
.transition {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 40px 28px; cursor: pointer;
  background: radial-gradient(500px 400px at 50% 40%, #e7d3a6, transparent 75%);
}
.trans-orb {
  font-size: 3rem; width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #8adcb6, #3fae7a);
  box-shadow: 0 0 0 8px rgba(111,154,60,0.2), var(--shadow);
  animation: bob 2s ease-in-out infinite;
}
.trans-text { font-size: 1.05rem; line-height: 1.5; max-width: 320px; color: var(--wood-dark); font-weight: 600; }
.trans-text p { margin: 5px 0; }
.trans-hint { font-size: 0.72rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft); opacity: 0.7; }

/* ============================================================
   COMBAT
   ============================================================ */
.combat {
  flex: 1; display: flex; flex-direction: column; padding: 12px 14px 16px; gap: 10px;
  position: relative;
}
.combat > *:not(.combat-bg) { position: relative; z-index: 1; }

/* enemy-encounter scene background (assets/combat-bg.png, with fallback) */
.combat-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, #17233c 0%, #14203a 32%, #2b2517 68%, #1a140d 100%);
}
.combat-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.combat-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.5) 100%),
    linear-gradient(180deg, rgba(8,10,18,0.4) 0%, rgba(8,10,18,0.05) 28%, rgba(8,10,18,0.55) 100%);
}

.enemy-stage { text-align: center; }
.enemy-name {
  font-size: 1.15rem; font-weight: 800; color: #fff6df;
  text-shadow: 0 2px 4px rgba(0,0,0,0.85);
}
.rare-tag, .temp-tag {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0;
  background: var(--gold); color: #40280a; padding: 2px 6px; border-radius: 6px; vertical-align: middle;
}
.temp-tag { background: var(--green); color: #fff; }
.enemy-sprite { width: 168px; height: 168px; margin: 2px auto -6px; }
.enemy-sprite.small { width: 120px; height: 120px; }
.enemy-sprite svg { width: 100%; height: 100%; overflow: visible; }
/* Brigg's animated portrait used as the sparring "enemy" sprite */
.enemy-sprite .npc-portrait { width: 100%; height: 100%; }
.enemy-sprite .npc-portrait .npc-frame { filter: drop-shadow(0 6px 8px rgba(0,0,0,0.55)); }
.enemy-idle { animation: bob 2.4s ease-in-out infinite; }
.enemy-hit { animation: hitshake .34s ease; }
.enemy-crit { animation: critpop .4s ease; }
.enemy-attack { animation: lunge .4s ease; }
.dim { filter: grayscale(0.8) brightness(0.7) opacity(0.75); }

.hpbar {
  position: relative; height: 20px; border-radius: 999px; background: #cbb489;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.28); overflow: hidden; margin: 6px auto 0; max-width: 320px;
}
.hpbar-fill { position: absolute; inset: 0; right: auto; height: 100%; border-radius: 999px; transition: width .45s ease; }
.enemy-hp .hpbar-fill { background: linear-gradient(90deg, #e0674f, var(--red-deep)); }
.player-hp .hpbar-fill { background: linear-gradient(90deg, #5cc99a, var(--green-deep)); }
.hpbar-txt {
  position: relative; z-index: 1; font-size: 0.72rem; font-weight: 800; color: #fff;
  line-height: 20px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); display: block; text-align: center;
  font-variant-numeric: tabular-nums;
}
.enemy-desc {
  font-size: 0.76rem; font-style: italic; color: #e6dbc2; margin: 8px auto 0;
  max-width: 300px; line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

.combat-log {
  min-height: 40px; display: flex; align-items: center; justify-content: center; text-align: center;
  background: #1c1210; color: #f3e2bd; border-radius: 10px; padding: 8px 12px;
  font-size: 0.86rem; font-style: italic; box-shadow: inset 0 0 0 2px #3a1f1a;
  white-space: pre-line;
}
.combat-log.crit { color: var(--crit); font-weight: 700; }
.combat-log.hit { color: #bfe08a; }
.combat-log.miss { color: #e6b7ac; }
.combat-log.ehit { color: #f0a99c; }
.combat-log.emiss { color: #cfc19a; }

.turn-flag {
  text-align: center; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.01em;
  color: #d8cbac; text-transform: none; height: 18px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.turn-flag.on { color: #bfe08a; }

.board {
  display: grid; gap: 8px; justify-content: center; margin: 2px auto;
  grid-template-columns: repeat(5, 1fr); width: 100%; max-width: 320px;
}
.board-count-6, .board-count-7, .board-count-8, .board-count-9 { grid-template-columns: repeat(3, 1fr); max-width: 210px; }
.board-count-10, .board-count-11, .board-count-12 { grid-template-columns: repeat(4, 1fr); max-width: 264px; }

.tile {
  aspect-ratio: 1 / 1;
  border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #8a5a34, #6b1f1a);
  box-shadow: 0 4px 0 #24100d, inset 0 0 0 2px #a9702f;
  color: #f6e3bf; font-size: 1.3rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s;
}
.tile:active { transform: scale(0.94); }
.tile:disabled { cursor: default; }
.tile .tile-back { opacity: 0.5; }
.tile.revealed { animation: flip .3s ease; box-shadow: 0 3px 0 rgba(0,0,0,0.2); }
.tile.t-hit { background: linear-gradient(180deg, #5cc99a, var(--green-deep)); color: #fff; box-shadow: 0 3px 0 #1f5c3e; }
.tile.t-crit {
  background: linear-gradient(180deg, #ffd05a, var(--gold-deep)); color: #4a2f06;
  box-shadow: 0 3px 0 #7a5310, 0 0 16px rgba(240,169,30,0.8);
  animation: flip .3s ease;
}
.tile.t-miss { background: linear-gradient(180deg, #b9b1a0, #837a68); color: #fff; box-shadow: 0 3px 0 #5a5346; }

.tile.clue { position: relative; }
.tile.clue::after {
  content: ""; position: absolute; inset: -3px; border-radius: 14px;
  box-shadow: 0 0 0 3px var(--gold), 0 0 10px rgba(227,167,44,0.5);
}
/* the clue is a steady ring — no looping/blinking animation */
.clue-pulse, .clue-shake, .clue-glow { animation: none; }

.combat-foot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.combat-playerbar { background: #fff6db; border: 1px solid var(--parch-line); border-radius: 12px; padding: 8px 10px; }
.pb-label { font-size: 0.78rem; font-weight: 800; color: var(--wood-dark); margin-bottom: 2px; }
.btn-shuffle { width: 100%; background: linear-gradient(180deg, #6f97c4, #3f6a94); box-shadow: 0 4px 0 #2b4a68; }

/* ============================================================
   RESULT (victory / death / level up)
   ============================================================ */
.result {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 30px 22px;
}
.result-badge {
  font-size: 1.9rem; font-weight: 900; letter-spacing: 0.01em; color: var(--green-deep);
  text-shadow: 0 2px 0 rgba(0,0,0,0.12); animation: critpop .45s ease;
}
.result-badge.dead { color: var(--red-deep); }
.result-badge.level { color: var(--gold-deep); }
.result-win { background: radial-gradient(500px 360px at 50% 30%, #e7f2cf, transparent 72%); }
.result-dead { background: radial-gradient(500px 360px at 50% 30%, #f0d9cf, transparent 72%); }
.result-level { background: radial-gradient(500px 360px at 50% 30%, #f6e6bd, transparent 72%); }
.result-line { font-size: 0.98rem; line-height: 1.5; max-width: 320px; color: var(--wood-dark); font-weight: 600; }
.result-line p { margin: 6px 0; }
.result-narr {
  max-width: 320px; font-size: 0.86rem; font-style: italic; line-height: 1.5;
  color: var(--ink-soft); border-top: 1px dashed var(--parch-line); padding-top: 8px; margin-top: 2px;
}
.result-narr p { margin: 4px 0; }

.reward-box {
  width: 100%; max-width: 320px; background: #fff6db; border: 2px solid var(--parch-line);
  border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow);
}
.reward { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.88rem; border-bottom: 1px dashed var(--parch-line); }
.reward:last-child { border-bottom: none; }
.reward span { color: var(--ink-soft); }
.reward b.good, .reward b .good { color: var(--green-deep); }
.reward b.gold { color: var(--gold-deep); }
.reward b.bad { color: var(--red-deep); }

.stars { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 6px; }
.star-row {
  display: flex; align-items: center; gap: 10px; font-size: 0.84rem; color: var(--ink-soft);
  background: #fffaf0; border: 1px solid var(--parch-line); border-radius: 10px; padding: 8px 12px;
}
.star-row .star { font-size: 1.1rem; color: #b9ad92; }
.star-row.on { color: var(--wood-dark); font-weight: 700; }
.star-row.on .star { color: var(--gold); }

.result-btns { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.auto-gains { display: flex; gap: 8px; }
.lvl-prompt { font-weight: 800; color: var(--ink-soft); letter-spacing: 0.01em; }

/* ============================================================
   EVENT / TREASURE
   ============================================================ */
.event {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center; padding: 26px 22px;
}
.event-kind {
  font-size: 0.66rem; letter-spacing: 0.01em; text-transform: none;
  color: var(--gold-deep); font-weight: 800;
}
.event-icon {
  font-size: 3rem; width: 100px; height: 100px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff4d4, var(--parch-deep));
  box-shadow: 0 0 0 8px rgba(216,189,136,0.35), var(--shadow);
  animation: bob 2.6s ease-in-out infinite;
}
.event-icon.sm { width: 70px; height: 70px; font-size: 2rem; }
.event-title { font-size: 1.3rem; color: var(--wood-dark); }
.event-text { max-width: 330px; }
.event-text p { margin: 6px 0; line-height: 1.5; font-size: 0.95rem; }
.event-choices { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.btn-choice { background: linear-gradient(180deg, #fff6db, var(--parch-deep)); color: var(--wood-dark); box-shadow: 0 4px 0 var(--parch-line); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0; }
.chip {
  font-size: 0.74rem; font-weight: 800; padding: 5px 10px; border-radius: 999px;
  background: #ded; color: #333;
}
.chip-xp { background: #cfe6f6; color: #1c4a66; }
.chip-gold { background: #f7e3ad; color: #6b4708; }
.chip-buff { background: #d5edbf; color: #37561b; }
.chip-bad { background: #f2cfc6; color: #7a2c1a; }
.event-outcome { justify-content: center; }

/* full-bleed backdrop for a Town Center oddity (assets/oddity-town-center.png) */
.event.has-bg { position: relative; justify-content: center; }
.event-bg {
  position: absolute; top: -26px; bottom: -26px; left: -22px; right: -22px;
  z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, #14203a 0%, #1a2540 34%, #2a2418 70%, #171009 100%);
}
.event-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.event-bg-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,16,0.42) 0%, rgba(10,9,16,0.56) 40%, rgba(10,9,16,0.82) 100%);
}
.event.has-bg > *:not(.event-bg) { position: relative; z-index: 1; }
.event.has-bg .event-kind { color: #f0c869; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.event.has-bg .event-title { color: #fff6df; text-shadow: 0 2px 6px rgba(0,0,0,0.85); }
.event.has-bg .event-text { color: #f2e9d4; }
.event.has-bg .event-text p {
  background: rgba(14,11,9,0.5); border-radius: 10px; padding: 7px 13px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* ============================================================
   PANELS (equipment / merchant / oddities)
   ============================================================ */
.panel { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 0 20px; overflow-y: auto; }
.panel-head { display: flex; align-items: center; gap: 10px; }
.panel-head h2 { font-size: 1.16rem; line-height: 1.15; color: var(--wood-dark); }
.loc-panel .back, .panel-head .back { flex: 0 0 auto; align-self: flex-start; }
.back {
  font: inherit; font-weight: 800; cursor: pointer; border: none; border-radius: 10px;
  background: var(--wood); color: #fff2d5; padding: 8px 12px;
}

.loadout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slot {
  background: #fff6db; border: 2px solid var(--parch-line); border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.slot-k { font-size: 0.68rem; text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-weight: 800; }
.slot-v { font-weight: 800; color: var(--wood-dark); }
.derived {
  display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.76rem; font-weight: 700; color: var(--ink-soft);
}
.derived span { background: #fffaf0; border: 1px solid var(--parch-line); border-radius: 8px; padding: 4px 8px; }

.gear-group h3, .odd-head, .ach-head, .rock-note {
  font-size: 0.82rem; text-transform: none; letter-spacing: 0; color: var(--ink-soft);
  font-weight: 800; margin: 6px 0;
}
.gear {
  width: 100%; text-align: left; font: inherit; cursor: pointer; margin-bottom: 8px;
  background: #fff6db; border: 2px solid var(--parch-line); border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 3px 0 var(--parch-line);
}
.gear.equipped { border-color: var(--green); box-shadow: 0 3px 0 var(--green-deep); background: #f2f7e4; }
.gear-top { display: flex; justify-content: space-between; align-items: center; color: var(--wood-dark); }
.eq-tag { font-size: 0.62rem; font-weight: 800; background: var(--green); color: #fff; padding: 2px 7px; border-radius: 999px; }
.gear-blurb { font-size: 0.8rem; font-weight: 700; color: var(--green-deep); margin-top: 3px; }
.gear-desc { font-size: 0.76rem; font-style: italic; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }

.merch-say {
  background: #1c1210; color: #f3e2bd; font-style: italic; border-radius: 12px; padding: 12px 14px;
  box-shadow: inset 0 0 0 2px #3a1f1a; font-size: 0.9rem;
}
.merch-gold { font-weight: 800; color: var(--wood-dark); }
.shop { display: flex; flex-direction: column; gap: 10px; }
.shop-item { background: #fff6db; border: 2px solid var(--parch-line); border-radius: 12px; padding: 12px; box-shadow: 0 3px 0 var(--parch-line); }
.si-top { display: flex; justify-content: space-between; align-items: center; color: var(--wood-dark); font-size: 1.02rem; }
.si-slot { font-size: 0.62rem; text-transform: none; letter-spacing: 0; background: var(--wood); color: #fff2d5; padding: 2px 7px; border-radius: 999px; }
.si-blurb { font-size: 0.8rem; font-weight: 700; color: var(--green-deep); margin: 4px 0; }
.si-desc { font-size: 0.76rem; font-style: italic; color: var(--ink-soft); line-height: 1.4; margin-bottom: 8px; }
.btn-buy { width: 100%; background: linear-gradient(180deg, #e8b23e, var(--gold-deep)); box-shadow: 0 4px 0 #7a5310; color: #40280a; }
.shop-empty { font-style: italic; color: var(--ink-soft); padding: 20px; text-align: center; }

.odd-head, .ach-head { display: flex; justify-content: space-between; align-items: center; }
.odd-count { text-transform: none; letter-spacing: 0; font-weight: 800; color: var(--wood-dark); }
.odd-list { display: flex; flex-direction: column; gap: 6px; }
.odd-row {
  display: flex; align-items: center; gap: 10px; font-size: 0.9rem;
  background: #fffaf0; border: 1px solid var(--parch-line); border-radius: 10px; padding: 9px 12px;
  color: var(--ink-soft);
}
.odd-row.found { color: var(--wood-dark); font-weight: 700; background: #f2f7e4; border-color: #c3d9a0; align-items: flex-start; }
.odd-check {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 900; background: #d8c39a; color: #fff; flex: 0 0 auto;
}
.odd-row.found .odd-check { background: var(--green); }
.odd-cat { margin-bottom: 10px; }
.odd-cat h3 {
  font-size: 0.74rem; text-transform: none; letter-spacing: 0; color: var(--ink-soft);
  font-weight: 800; margin: 10px 0 6px;
}
.odd-ico {
  flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1;
}
.odd-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.odd-name { font-weight: 800; color: var(--wood-dark); }
.odd-name em { font-style: normal; font-weight: 700; font-size: 0.78rem; color: var(--gold-deep); }
.odd-desc { font-size: 0.76rem; font-weight: 400; font-style: italic; color: var(--ink-soft); line-height: 1.35; }
.gear.curio { background: #f4ecda; border-style: dashed; }
.rock-note { text-transform: none; letter-spacing: 0; font-weight: 600; font-style: italic; color: var(--ink-soft); }
.rock-note b { color: var(--wood-dark); }
.ach-list { display: flex; flex-direction: column; gap: 6px; }
.ach-row {
  display: flex; flex-direction: column; gap: 2px; background: #f6e6bd; border: 1px solid var(--gold-deep);
  border-radius: 10px; padding: 9px 12px;
}
.ach-row b { color: var(--gold-deep); }
.ach-row span { font-size: 0.78rem; font-style: italic; color: var(--ink-soft); }
.ach-empty { font-size: 0.82rem; font-style: italic; color: var(--ink-soft); }

/* ============================================================
   TOAST + FX
   ============================================================ */
#toast {
  position: absolute; left: 50%; bottom: 74px; transform: translate(-50%, 20px);
  background: #1c1210; color: #ffe9b8; font-size: 0.82rem; font-weight: 700;
  padding: 10px 16px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 60;
  max-width: 84%; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

#fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.floater {
  position: absolute; transform: translate(-50%, 0); font-weight: 900; font-size: 1.4rem;
  color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); animation: floatUp .95s ease-out forwards;
}
.floater.dmg { color: #ffd9cf; }
.floater.crit { color: var(--crit); font-size: 1.8rem; }

/* ============================================================
   DEBUG
   ============================================================ */
#debug-fab {
  position: absolute; top: 8px; right: 8px; z-index: 70;
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(47,30,18,0.72); color: #ffe9b8; font-size: 1rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
#debug-panel {
  position: absolute; top: 46px; right: 8px; z-index: 69; width: 250px; max-height: 80%;
  overflow-y: auto; background: #120c14; color: #f3e2bd; border: 2px solid var(--gold-deep);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.55); font-size: 0.76rem;
}
#debug-panel.hidden { display: none; }
.dbg-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid #3a1f1a; }
.dbg-x { background: none; border: none; color: #f3e2bd; font-size: 0.9rem; cursor: pointer; }
.dbg-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.dbg-btn {
  font: inherit; font-weight: 700; cursor: pointer; border: none; border-radius: 8px;
  background: var(--wood-light); color: #fff2d5; padding: 8px; text-align: left;
}
.dbg-btn.sm { padding: 6px 8px; }
.dbg-btn.danger { background: var(--red-deep); }
.dbg-row { display: flex; align-items: center; gap: 6px; }
.dbg-row label { width: 62px; flex-shrink: 0; }
.dbg-row input, .dbg-row select {
  flex: 1; min-width: 0; font: inherit; padding: 5px; border-radius: 6px; border: 1px solid #3a1f1a;
  background: #180f09; color: #f3e2bd;
}
.dbg-sep { margin-top: 6px; font-weight: 800; letter-spacing: 0; color: var(--gold); text-transform: none; font-size: 0.66rem; }
.dbg-note { font-size: 0.72rem; line-height: 1.5; color: #cfc19a; background: #180f09; border-radius: 6px; padding: 6px 8px; }
.dbg-forcetiles { display: flex; gap: 6px; }
.dbg-forcetiles .dbg-btn { flex: 1; text-align: center; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes hitshake {
  0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); }
}
@keyframes critpop { 0% { transform: scale(0.7); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes lunge {
  0%,100% { transform: translateY(0) scale(1); } 45% { transform: translateY(14px) scale(1.06); }
}
@keyframes flip { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -46px); } }
#phone.shake { animation: hitshake .34s ease; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   TOWN UPDATE — active effects, location grid, NPC panels
   ============================================================ */
.active-effects {
  background: #fff6db; border: 2px solid var(--parch-line); border-radius: 12px;
  padding: 8px 10px;
}
.ae-label {
  font-size: 0.6rem; letter-spacing: 0.01em; text-transform: none;
  color: var(--ink-soft); font-weight: 800; margin-bottom: 6px;
}
.ae-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.eff-chip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  background: #f2f7e4; border: 1px solid #c3d9a0; border-radius: 999px;
  padding: 4px 10px 4px 6px;
}
.eff-ico { font-size: 1rem; }
.eff-txt { display: flex; flex-direction: column; line-height: 1.15; }
.eff-txt b { font-size: 0.72rem; color: var(--wood-dark); }
.eff-txt em { font-size: 0.6rem; color: var(--ink-soft); font-style: normal; }

.loc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.loc-btn {
  font: inherit; font-weight: 800; font-size: 0.66rem; cursor: pointer;
  background: linear-gradient(180deg, #fff6db, var(--parch-deep));
  border: 2px solid var(--parch-line); box-shadow: 0 4px 0 var(--parch-line);
  border-radius: 12px; padding: 9px 2px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--wood-dark); position: relative; min-height: 62px; justify-content: center;
}
.loc-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--parch-line); }
.loc-btn.disabled { opacity: 0.5; }
.loc-ico { font-size: 1.35rem; line-height: 1; }
.loc-btn .soon {
  position: absolute; bottom: 2px; font-size: 0.52rem; color: var(--red-deep); font-weight: 800;
}

/* ---- location sub-screens ---- */
.loc-panel { gap: 10px; }
.loc-intro { font-size: 0.86rem; font-style: italic; color: var(--ink-soft); line-height: 1.45; }
.loc-intro p { margin: 4px 0; }

/* the narrator's aside on a location screen — still the game's own voice,
   so it wears the same dark panel as the floating NarratorOverlay, sitting
   just above the action buttons and clearly not an NPC speech bubble */
.loc-narr {
  background: #f3ead4; border-left: 4px solid var(--gold-deep); border-radius: 8px;
  padding: 8px 12px; font-size: 0.82rem; font-style: italic; line-height: 1.45; color: #5a4a2c;
}
.loc-narr p { margin: 3px 0; }

.narr-line {
  margin: 2px 14px; align-self: stretch;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 13px; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, rgba(28, 22, 34, 0.92), rgba(20, 15, 26, 0.94));
  border: 1px solid rgba(214, 195, 150, 0.3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
  color: #f2e6cf; font-size: 0.8rem; line-height: 1.42;
  animation: narrline-in .22s ease both;
}
.narr-line .no-text { flex: 1; min-width: 0; font-style: italic; }
.narr-line .no-star {
  flex: 0 0 auto; color: #e8c96b; font-size: 0.88rem; line-height: 1.5;
  text-shadow: 0 0 6px rgba(232, 201, 107, 0.5);
}
.narr-line.dismissed { animation: narrline-out .18s ease forwards; }
@keyframes narrline-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes narrline-out { to { opacity: 0; transform: translateY(4px); height: 0; margin: 0; padding-top: 0; padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) {
  .narr-line { animation-duration: .01ms; }
  .narr-line.dismissed { animation: none; display: none; }
}

/* full-bleed scene photo behind a location panel (e.g. Training Yard) */
.loc-panel.has-bg { position: relative; }
.loc-bg {
  position: absolute; top: -14px; bottom: -20px; left: 0; right: 0;
  margin: 0 !important; z-index: 0; overflow: hidden;
}
.loc-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block;
}
.loc-bg-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,10,18,0.3) 0%, rgba(12,10,18,0.46) 42%, rgba(12,10,18,0.7) 78%, rgba(12,10,18,0.82) 100%);
}
.loc-panel.has-bg > *:not(.loc-bg) { position: relative; z-index: 1; }
.loc-panel.has-bg .panel-head h2 { color: #fff6df; text-shadow: 0 2px 6px rgba(0,0,0,0.75); }
.loc-panel.has-bg .loc-intro {
  color: #f0e6cf; background: rgba(18,13,10,0.5); border-radius: 10px; padding: 8px 12px;
}

.npc-box {
  background: #1c1210; color: #f3e2bd; border-radius: 12px; padding: 10px 12px;
  box-shadow: inset 0 0 0 2px #3a1f1a;
}
.npc-name {
  font-size: 0.62rem; letter-spacing: 0.01em; text-transform: none;
  color: var(--gold); font-weight: 800; margin-bottom: 4px;
}
.npc-box p { font-size: 0.88rem; font-style: italic; line-height: 1.45; }

/* animated NPC portrait (Mabel) sitting inside the npc-box */
.npc-box.has-portrait { display: flex; align-items: center; gap: 12px; }
.npc-box.has-portrait .npc-say { flex: 1; min-width: 0; }
.npc-portrait {
  position: relative; flex: 0 0 auto; width: 84px; height: 84px;
  align-self: center;
}
.npc-portrait .npc-frame {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  opacity: 0; transition: opacity .45s ease;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.4));
  pointer-events: none;
}
.npc-portrait .npc-frame.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .npc-portrait .npc-frame { transition: none; }
}

.loc-result:empty { display: none; }
.loc-result-inner {
  background: #fffaf0; border: 2px solid var(--parch-line); border-radius: 12px;
  padding: 10px 12px; animation: fade .22s ease;
}
.loc-result-inner p { font-size: 0.9rem; line-height: 1.5; margin: 4px 0; color: var(--wood-dark); }
.res-aside { font-size: 0.8rem !important; font-style: italic; color: var(--ink-soft) !important; }

.loc-actions { display: flex; flex-direction: column; gap: 10px; }
.loc-action {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #fff6db, var(--parch-deep));
  color: var(--wood-dark); box-shadow: 0 4px 0 var(--parch-line);
}
.cost-tag {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0;
  background: var(--wood); color: #fff2d5; padding: 3px 8px; border-radius: 999px;
  flex: 0 0 auto;
}
.loc-action.disabled .cost-tag { background: var(--red-deep); }

/* ---- sub-location exits: compact, secondary to the main actions above ---- */
.loc-exits { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 2px; }
.loc-exit {
  background: transparent; color: var(--wood); box-shadow: inset 0 0 0 2px var(--wood-light);
  font-size: 0.78rem; padding: 8px 14px; letter-spacing: 0;
}

/* ---- bank ---- */
.bank-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bank-fig {
  background: #fffaf0; border: 2px solid var(--parch-line); border-radius: 12px;
  padding: 10px; display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.bank-fig span { font-size: 0.66rem; text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-weight: 800; }
.bank-fig b { font-size: 1.4rem; color: var(--wood-dark); font-variant-numeric: tabular-nums; }
.bank-fig.banked { background: #f2f7e4; border-color: #c3d9a0; }
.bank-note { font-size: 0.74rem; font-style: italic; color: var(--ink-soft); text-align: center; }
.bank-controls { display: flex; flex-direction: column; gap: 8px; }
#bank-amt {
  font: inherit; font-size: 1rem; padding: 10px 12px; border-radius: 10px;
  border: 2px solid var(--parch-line); background: #fffaf0; color: var(--ink);
  text-align: center; width: 100%;
}
.bank-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bank-row .btn { padding: 12px 10px; }

/* ---- notice board ---- */
.notice-list { display: flex; flex-direction: column; gap: 8px; }
.notice {
  background: #fffaf0; border: 1px solid var(--parch-line); border-left: 4px solid var(--wood-light);
  border-radius: 8px; padding: 10px 12px; font-size: 0.82rem; line-height: 1.45;
  color: var(--ink); white-space: pre-line;
}

/* ============================================================
   TOWN AREAS — two switchable zones (Town Center / Old Quarter)
   ============================================================ */
.area-switch { display: flex; align-items: stretch; gap: 8px; }
.area-arrow {
  flex: 0 0 auto; width: 40px; border: none; border-radius: 12px; cursor: pointer;
  font-size: 1.4rem; font-weight: 900; color: #fff2d5;
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  box-shadow: 0 4px 0 var(--wood-dark);
}
.area-arrow:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-dark); }
.area-head {
  flex: 1; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, #fff6db, var(--parch-deep));
  border: 2px solid var(--parch-line); border-radius: 12px; padding: 6px 8px;
  box-shadow: 0 4px 0 var(--parch-line);
}
.area-name { font-size: 1rem; font-weight: 800; color: var(--wood-dark); letter-spacing: 0.01em; }
.area-tag { font-size: 0.66rem; font-style: italic; color: var(--ink-soft); }
.area-dots { display: flex; gap: 5px; justify-content: center; margin-top: 5px; }
.area-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: #cbb489; }
.area-dots .dot.on { background: var(--wood); }

.area-stage { display: flex; flex-direction: column; gap: 8px; }
.place-card {
  position: relative; display: flex; align-items: center; gap: 12px; text-align: left;
  font: inherit; cursor: pointer; color: var(--wood-dark);
  background: linear-gradient(180deg, #fff6db, var(--parch-deep));
  border: 2px solid var(--parch-line); border-radius: 14px;
  box-shadow: 0 4px 0 var(--parch-line); padding: 9px 14px;
}
.place-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--parch-line); }
.place-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.55rem;
  background: #fffaf0; border: 1px solid var(--parch-line);
}
.place-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.place-txt b { font-size: 1rem; }
.place-txt em { font-size: 0.72rem; font-style: normal; color: var(--ink-soft); }
.place-badge {
  position: absolute; top: -7px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 900; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff6db; box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.town-foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.foot-btn {
  font: inherit; font-weight: 800; font-size: 0.62rem; cursor: pointer; color: var(--wood-dark);
  background: linear-gradient(180deg, #fff6db, var(--parch-deep));
  border: 2px solid var(--parch-line); box-shadow: 0 3px 0 var(--parch-line);
  border-radius: 10px; padding: 8px 2px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.foot-btn span { font-size: 1.15rem; }
.foot-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--parch-line); }
.foot-btn.disabled { opacity: 0.5; }

/* ============================================================
   TOWN SCENE — full-bleed background art + floating UI
   ============================================================ */
.scene-town {
  position: relative; flex: 1; display: block; overflow: hidden;
  margin: 0; padding: 0; gap: 0;
}

.scene-bg { position: absolute; inset: 0; z-index: 0; background: #1b2340; }
.scene-fallback { position: absolute; inset: 0; }
.area-center  .scene-fallback { background: linear-gradient(#1b2340 0%, #26325c 30%, #3a2f4a 55%, #241a2e 100%); }
.area-quarter .scene-fallback { background: linear-gradient(#1b2340 0%, #2a3050 42%, #3a3a45 70%, #23222c 100%); }
.area-craftsmenRow .scene-fallback { background: linear-gradient(#241a2e 0%, #3a2a28 34%, #4a3226 58%, #2a1c16 100%); }
.area-marketSquare .scene-fallback { background: linear-gradient(#1e2440 0%, #34304a 36%, #4a3a2a 60%, #2c2016 100%); }
.area-highQuarter  .scene-fallback { background: linear-gradient(#151c34 0%, #232c48 34%, #33384a 62%, #202430 100%); }
.area-riverside    .scene-fallback { background: linear-gradient(#152036 0%, #223448 34%, #2c4048 58%, #1a2a2e 100%); }
.scene-fallback svg { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; }
.scene-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block; z-index: 1;
}

/* ---- top status bar ---- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: linear-gradient(180deg, rgba(28,18,12,0.94), rgba(28,18,12,0.72));
  color: #f3e2bd;
}
.tb-hero { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.tb-avatar {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  background: #3a1f1a; border: 2px solid #6b4a2c;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.tb-hcol { flex: 1; min-width: 0; }
.tb-lv { font-size: 0.72rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-lv span { font-weight: 600; color: #cbb489; }
.tb-xp { height: 6px; border-radius: 999px; background: #3a1f1a; overflow: hidden; margin-top: 3px; }
.tb-xpfill { display: block; height: 100%; background: linear-gradient(90deg, #7ab7e0, #4d7ea8); }
.tb-res { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.tb-r { display: flex; align-items: center; gap: 3px; font-size: 0.7rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-r i { font-style: normal; font-size: 0.78rem; }
.tb-r.low { color: #f0a99c; }
.tb-r.hp i { color: #e06a5a; }
.tb-regen {
  font-style: normal; font-size: 0.6rem; color: #7fc47a;
  animation: regenPulse 1.4s ease-in-out infinite;
}
@keyframes regenPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
#dest-hp { font-weight: 800; }
#dest-hp.low { color: var(--red-deep); }
.tb-gear {
  width: 26px; height: 26px; border-radius: 7px; border: none; cursor: pointer;
  background: #3a1f1a; color: #f3e2bd; font-size: 0.85rem;
}
.tb-gear:active { transform: translateY(1px); }

/* ---- the middle scene region ---- */
.scene-overlay { position: absolute; top: 50px; left: 0; right: 0; bottom: 54px; z-index: 10; }

.buff-float {
  position: absolute; top: 8px; left: 8px; z-index: 14;
  display: flex; flex-direction: column; gap: 6px; max-width: 42%;
}
.buff-chip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(28,18,12,0.86); color: #f3e2bd;
  border-radius: 10px; padding: 4px 9px 4px 6px;
}
.bc-ico { font-size: 0.95rem; flex: 0 0 auto; }
.bc-txt { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.bc-txt b { font-size: 0.64rem; }
.bc-txt em { font-size: 0.55rem; font-style: normal; color: #cbb489; }

/* ============================================================
   NarratorOverlay — the game's own voice. A dark translucent
   fantasy panel that floats above the primary action area,
   distinct from NPC speech bubbles, and disappears completely
   when the narrator has nothing to say.
   ============================================================ */
.narrator-overlay {
  position: absolute; inset: 0; z-index: 55; pointer-events: none;
}
.narrator-overlay.blocking { pointer-events: auto; }
.no-scrim {
  position: absolute; inset: 0; background: rgba(10, 7, 14, 0.44);
  opacity: 0; transition: opacity .3s ease; pointer-events: auto;
}
.no-scrim.enter { opacity: 0; }
.no-scrim.show { opacity: 1; }
.no-scrim.leave { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .no-scrim { transition-duration: .01ms; } }

.no-panel {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%);
  width: 86%; max-width: 400px; box-sizing: border-box;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 14px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(28, 22, 34, 0.93), rgba(20, 15, 26, 0.95));
  border: 1px solid rgba(214, 195, 150, 0.32);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 246, 223, 0.06);
  color: #f2e6cf; font: inherit; font-size: 0.82rem; line-height: 1.42;
  text-align: left; cursor: pointer;
  max-height: 42vh; overflow-y: auto;
  pointer-events: auto;
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.no-star {
  flex: 0 0 auto; color: #e8c96b; font-size: 0.9rem; line-height: 1.5;
  text-shadow: 0 0 6px rgba(232, 201, 107, 0.5);
}
.no-text { flex: 1; min-width: 0; font-style: italic; }
.no-hint {
  display: none; margin-top: 6px; font-size: 0.62rem; font-style: normal;
  letter-spacing: 0; text-transform: none; color: #b7a67e; opacity: 0.85;
}
.no-panel.p-important .no-hint { display: block; }
/* entrance / exit */
.no-panel.enter { opacity: 0; transform: translateX(-50%) translateY(8px); }
.no-panel.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.no-panel.leave { opacity: 0; transform: translateX(-50%) translateY(4px); }
@media (prefers-reduced-motion: reduce) {
  .no-panel { transition-duration: .01ms; }
  .no-panel.enter, .no-panel.leave { transform: translateX(-50%); }
}

/* MINOR — a compact strip */
.no-panel.p-minor {
  width: auto; max-width: 78%; padding: 7px 13px; font-size: 0.76rem;
  align-items: center;
}
.no-panel.p-minor .no-text { font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* NORMAL — the default */
.no-panel.p-normal { /* base styles above */ }

/* IMPORTANT — prominent, centred, slower, blocks interaction */
.no-panel.p-important {
  width: 84%; max-width: 380px; bottom: auto; top: 26%;
  flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 20px 20px 16px; font-size: 0.95rem; line-height: 1.5;
  background: linear-gradient(180deg, rgba(24, 19, 30, 0.96), rgba(16, 12, 22, 0.97));
  border-color: rgba(232, 201, 107, 0.4);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  transition: opacity .32s ease, transform .32s ease;
}
.no-panel.p-important .no-star { font-size: 1.5rem; }
.no-panel.p-important .no-text { font-style: normal; }
.no-panel.p-important.enter { transform: translateX(-50%) translateY(12px) scale(0.98); }
.no-panel.p-important.show { transform: translateX(-50%) translateY(0) scale(1); }
.no-panel.p-important.leave { transform: translateX(-50%) translateY(6px); }

/* debug: show the overlay's bounds */
.no-panel.no-bounds { outline: 2px dashed #ff5a7a; outline-offset: 2px; }

.scene-debug {
  position: absolute; right: 6px; bottom: 200px; z-index: 16;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.sd-btn {
  font: inherit; font-size: 0.56rem; font-weight: 800; cursor: pointer;
  border: 1px dashed rgba(255,255,255,0.5); border-radius: 6px; padding: 3px 7px;
  background: rgba(28,18,12,0.55); color: #f3e2bd; white-space: nowrap;
}

.scene-title { position: absolute; top: 12%; left: 0; right: 0; text-align: center; pointer-events: none; z-index: 12; }
.st-name {
  font-size: 1.8rem; font-weight: 900; letter-spacing: 0; color: #fff6df;
  text-shadow: 0 2px 0 #24100d, 0 0 3px rgba(0,0,0,0.7), 0 5px 14px rgba(0,0,0,0.5);
}
.st-sub {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em; color: #f0c869;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.st-dots { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.st-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.st-dots .dot.on { background: #f0c869; box-shadow: 0 0 6px rgba(240,200,105,0.8); }

/* ============================================================
   TRAINING YARD — a small tap-to-act scene (Brigg + bubbles),
   built on the same .scene-town layout as the town districts
   ============================================================ */
.scene-training .scene-fallback { background: linear-gradient(#1e2440 0%, #2e3048 34%, #3a3226 60%, #241c14 100%); }
.scene-training .scene-overlay { top: 0; bottom: 0; }
.scene-title-sub { top: 8%; }
.scene-training .st-name { font-size: 1.45rem; letter-spacing: 0; }

.scene-back {
  position: absolute; top: 10px; left: 8px; z-index: 22;
  font: inherit; font-size: 0.66rem; font-weight: 900; letter-spacing: 0;
  cursor: pointer; color: #fff2d5; border: 1px solid rgba(255,255,255,0.28);
  background: rgba(28,18,12,0.66); border-radius: 8px; padding: 6px 12px 6px 8px;
  display: flex; align-items: center; gap: 4px;
}
.scene-back:active { background: rgba(28,18,12,0.88); }
.yard-hud {
  position: absolute; top: 42px; left: 8px; z-index: 22;
  font: inherit; font-size: 0.72rem; font-weight: 800; color: #fff2d5;
  background: rgba(28,18,12,0.66); border: 1px solid rgba(255,255,255,0.24);
  border-radius: 8px; padding: 5px 10px;
}
.yard-hud.low { color: #f0a99c; }
.ty-anchor { position: absolute; left: 0; right: 0; bottom: 14px; height: 1px; }

/* Brigg standing in the yard (reuses the town .scene-npc sprite) */
.scene-training .ty-brigg { z-index: 12; }
.scene-training .ty-brigg .npc-portrait { width: 96px; height: 128px; }
.ty-brigg-art {
  width: 118px; height: 118px;
  transform: scale(var(--npc-scale, 1)); transform-origin: bottom center;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,0.45));
}
.ty-brigg-art svg { width: 100%; height: 100%; display: block; }

/* the action bubbles */
.yard-bub {
  position: absolute; transform: translate(-50%, -50%); z-index: 14;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 60px; max-width: 112px; padding: 7px 11px;
  font: inherit; font-weight: 800; font-size: 0.68rem; letter-spacing: 0;
  color: #fff2d5; text-align: center; line-height: 1.15; cursor: pointer;
  background: linear-gradient(180deg, #8c2c22, #6b1f1a);
  border: 2px solid #24100d; border-radius: 13px;
  box-shadow: 0 3px 0 #170a08, 0 6px 14px rgba(0,0,0,0.45);
}
.yard-bub i { font-style: normal; font-size: 1.15rem; line-height: 1; }
.yard-bub em { font-style: normal; font-size: 0.56rem; font-weight: 700; color: #f0c869; letter-spacing: 0.01em; }
.yard-bub:active { transform: translate(-50%, calc(-50% + 2px)); box-shadow: 0 1px 0 #170a08; }
.yard-bub.dim { opacity: 0.45; filter: grayscale(0.45); }

/* result card shown over the scene after an action */
.yard-result {
  position: absolute; inset: 0; z-index: 58;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 60px 16px 24px; background: rgba(10,7,10,0.5);
  animation: fade .18s ease;
}
.yard-result-inner {
  width: 100%; max-width: 340px;
  background: linear-gradient(180deg, #fff6db, var(--parch-deep));
  border: 2px solid var(--parch-line); border-radius: 14px; padding: 13px 15px;
  color: var(--ink); font-size: 0.86rem; line-height: 1.5;
  box-shadow: 0 12px 34px rgba(0,0,0,0.55);
  max-height: 58vh; overflow-y: auto;
}
.yard-result .btn-big { width: 100%; max-width: 340px; }

.area-arrow {
  position: absolute; top: 44%; transform: translateY(-50%); z-index: 15;
  width: 32px; height: 46px; border: none; cursor: pointer;
  background: rgba(28,18,12,0.66); color: #fff2d5; font-size: 1.4rem; font-weight: 900;
}
.area-arrow:active { background: rgba(28,18,12,0.85); }
.area-arrow.left { left: 0; border-radius: 0 12px 12px 0; }
.area-arrow.right { right: 0; border-radius: 12px 0 0 12px; }

.sign {
  position: absolute; transform: translate(-50%, -50%); z-index: 13;
  display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 0.72rem; letter-spacing: 0; color: #fff2d5;
  background: linear-gradient(180deg, #8c2c22, #6b1f1a);
  border: 2px solid #24100d; border-radius: 10px; padding: 6px 11px;
  box-shadow: 0 3px 0 #170a08, 0 5px 12px rgba(0,0,0,0.45);
}
.sign:active { transform: translate(-50%, calc(-50% + 2px)); box-shadow: 0 1px 0 #170a08; }
.sign-ico { font-size: 0.95rem; }
.sign-badge {
  position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 900; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff6df;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

/* animated character standing in the town scene (e.g. Mabel by the tavern) */
.scene-npc {
  position: absolute; transform: translate(-50%, -100%); transform-origin: bottom center;
  z-index: 12; cursor: pointer; border: none; background: none; padding: 0;
  display: flex; flex-direction: column; align-items: center;
}
.scene-npc .npc-portrait {
  width: 92px; height: 120px; position: relative;
  transform: scale(var(--npc-scale, 1)); transform-origin: bottom center;
  filter: drop-shadow(0 6px 5px rgba(0,0,0,0.45));
}
.scene-npc:active { transform: translate(-50%, calc(-100% + 2px)); }
.scene-npc-tag {
  margin-top: -6px;
  font: inherit; font-weight: 800; font-size: 0.58rem; letter-spacing: 0.01em;
  color: #fff2d5; background: rgba(28,18,12,0.7); border-radius: 7px; padding: 2px 7px;
  text-transform: none;
}

/* visiting adventurers (bots) standing in a district scene */
.adv-sprite {
  position: absolute; transform: translate(-50%, -100%); transform-origin: bottom center;
  z-index: 11; cursor: pointer; border: none; background: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  animation: advbob 3.4s ease-in-out infinite;
}
.adv-disc {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.5), transparent 60%), var(--tone, #6a6a7a);
  border: 2px solid rgba(255,246,223,0.9);
  box-shadow: 0 4px 7px rgba(0,0,0,0.45);
}
.adv-sprite:active { transform: translate(-50%, calc(-100% + 2px)); }
.adv-tag {
  font: inherit; font-weight: 800; font-size: 0.54rem; letter-spacing: 0.01em;
  color: #fff2d5; background: rgba(28,18,12,0.72); border-radius: 7px; padding: 2px 6px;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.adv-tag em { font-style: normal; font-weight: 700; color: #f0c869; }
@keyframes advbob { 0%,100% { margin-top: 0; } 50% { margin-top: -4px; } }

/* Town News feed */
.news-feed { margin-inline: 14px; display: flex; flex-direction: column; gap: 7px; }
.news-row {
  display: flex; gap: 9px; align-items: flex-start; text-align: left;
  background: #fff6db; border: 2px solid var(--parch-line); border-radius: 10px;
  padding: 8px 10px; font: inherit; width: 100%; cursor: default;
}
.news-row.tappable { cursor: pointer; }
.news-row.tappable:active { transform: translateY(1px); }
.news-av {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.86rem;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.5), transparent 60%), var(--tone, #8a7a5a);
  border: 1.5px solid rgba(255,246,223,0.85);
}
.news-av-town { background: var(--parch-deep); }
.news-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.news-line { font-size: 0.82rem; color: var(--ink); line-height: 1.35; }
.news-narr { font-size: 0.74rem; font-style: italic; color: var(--ink-soft); line-height: 1.3; }
.news-time { font-size: 0.62rem; font-weight: 700; color: var(--ink-soft); opacity: 0.7; letter-spacing: 0.01em; }
.news-empty { margin-inline: 14px; font-style: italic; color: var(--ink-soft); padding: 12px 2px; }
.news-div {
  margin: 12px 14px 6px; text-align: center; font-size: 0.66rem; font-weight: 800;
  text-transform: none; letter-spacing: 0; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.news-div::before, .news-div::after { content: ""; flex: 1; height: 1px; background: var(--parch-line); }

/* adventurer profile panel */
.adv-profile .ap-hero { display: flex; gap: 12px; align-items: center; margin: 4px 14px 10px; }
.ap-avatar {
  position: relative; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.55), transparent 60%), var(--tone, #6a6a7a);
  border: 3px solid rgba(255,246,223,0.9); box-shadow: 0 4px 9px rgba(0,0,0,0.35);
}
.ap-dot {
  position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%;
  background: #58c06a; border: 2px solid #fff6db;
}
.ap-id { min-width: 0; }
.ap-name { font-size: 1.05rem; font-weight: 900; color: var(--ink); }
.ap-rival {
  font-style: normal; font-size: 0.6rem; font-weight: 800; letter-spacing: 0;
  color: #fff; background: var(--red-deep); border-radius: 5px; padding: 1px 5px; vertical-align: middle;
}
.ap-title { font-size: 0.78rem; font-style: italic; color: var(--ink-soft); }
.ap-sub { font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); margin-top: 2px; }
.ap-say {
  margin: 0 14px 10px; background: #fffaf0; border: 1px solid var(--parch-line); border-left: 3px solid var(--gold-deep);
  border-radius: 8px; padding: 8px 10px; font-size: 0.84rem; font-style: italic; color: var(--ink); line-height: 1.4;
}
.ap-say-narr { display: block; margin-top: 5px; font-size: 0.74rem; color: var(--ink-soft); font-style: italic; }
.ap-stats {
  margin: 0 14px 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.ap-stats > div {
  background: #fff6db; border: 1px solid var(--parch-line); border-radius: 8px; padding: 6px 2px;
  text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.ap-stats span { font-size: 0.58rem; text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-weight: 800; }
.ap-stats b { font-size: 0.95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.ap-gear { margin: 0 14px 8px; display: none; flex-direction: column; gap: 4px; }
.ap-gear.open { display: flex; }
.ap-row {
  display: flex; justify-content: space-between; font-size: 0.8rem;
  background: #fffaf0; border: 1px solid var(--parch-line); border-radius: 7px; padding: 6px 9px;
}
.ap-row span { color: var(--ink-soft); }
.ap-row b { color: var(--ink); font-weight: 800; }
.ap-activity { margin: 0 14px 8px; font-size: 0.8rem; color: var(--ink-soft); }
.ap-activity span { font-weight: 800; text-transform: none; letter-spacing: 0.01em; font-size: 0.64rem; margin-right: 4px; }
.ap-rel {
  margin: 0 14px 10px; font-size: 0.76rem; color: var(--ink-soft); line-height: 1.4;
  background: #f4e7cd; border: 1px dashed var(--parch-line); border-radius: 8px; padding: 7px 10px;
}
.ap-rel b { color: var(--ink); }
.ap-btns { margin: 0 14px 6px; display: flex; gap: 8px; }
.ap-btns .btn { flex: 1; }

/* Guild hub buttons */
.guild-hub { margin: 4px 14px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ghub {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: #fff6db; border: 2px solid var(--parch-line); border-radius: 10px; padding: 9px 10px;
  font: inherit; cursor: pointer;
}
.ghub:active { transform: translateY(1px); }
.ghub i { font-style: normal; font-size: 1.1rem; }
.ghub span { font-weight: 800; font-size: 0.82rem; color: var(--ink); }
.ghub em { font-style: normal; font-size: 0.66rem; color: var(--ink-soft); line-height: 1.25; }

/* Rankings */
.rk-list { margin-inline: 14px; display: flex; flex-direction: column; gap: 5px; }
.rk-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: #fff6db; border: 1px solid var(--parch-line); border-radius: 8px; padding: 7px 9px;
  font: inherit; cursor: pointer;
}
.rk-row.me { background: #f3e2bd; border-color: var(--gold-deep); border-width: 2px; }
.rk-row.gone { opacity: 0.55; }
.rk-row.gone .rk-name { text-decoration: line-through; }
.rk-n { flex: 0 0 auto; width: 22px; text-align: right; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rk-av {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.5), transparent 60%), var(--tone, #8a7a5a);
  border: 1.5px solid rgba(255,246,223,0.85);
}
.rk-name { flex: 1; min-width: 0; font-weight: 800; font-size: 0.82rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-name em { font-style: normal; font-weight: 700; color: var(--gold-deep); }
.rk-meta { flex: 0 0 auto; font-size: 0.66rem; color: var(--ink-soft); font-weight: 700; }
.rk-renown { flex: 0 0 auto; font-weight: 900; font-size: 0.86rem; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.rk-gap { text-align: center; color: var(--ink-soft); letter-spacing: 0.01em; padding: 2px 0; }

/* Bounty + Community shared bits */
.bounty-head { margin: 4px 14px 8px; }
.bounty-target { font-size: 1.05rem; font-weight: 900; color: var(--ink); }
.bounty-sub { font-size: 0.76rem; color: var(--ink-soft); line-height: 1.35; margin-top: 2px; }
.bounty-bar {
  margin: 6px 14px 4px; height: 12px; border-radius: 999px; overflow: hidden;
  background: var(--parch-deep); border: 1px solid var(--parch-line);
}
.bounty-bar span { display: block; height: 100%; background: linear-gradient(90deg, #e8b23e, var(--gold-deep)); }
.bounty-count { margin: 0 14px 8px; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.bounty-count b { color: var(--ink); }
.comm-you { margin: 0 14px 8px; font-size: 0.82rem; color: var(--ink-soft); }
.comm-you b { color: var(--ink); }
.sim-tag {
  margin: 2px 14px 8px; display: inline-block; align-self: flex-start;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0; text-transform: none;
  color: #7a4a1a; background: #f0d9a8; border: 1px dashed var(--gold-deep); border-radius: 6px; padding: 3px 7px;
}
.stand-list { margin: 4px 14px 8px; display: flex; flex-direction: column; gap: 4px; }
.stand-row {
  display: flex; align-items: center; gap: 8px;
  background: #fffaf0; border: 1px solid var(--parch-line); border-radius: 7px; padding: 6px 9px; font-size: 0.8rem;
}
.stand-row.me { background: #f3e2bd; border-color: var(--gold-deep); }
.stand-n { width: 18px; text-align: right; font-weight: 800; color: var(--ink-soft); }
.stand-name { flex: 1; min-width: 0; color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-row b { color: var(--gold-deep); font-variant-numeric: tabular-nums; }

/* Memorial */
.mem-list { margin: 4px 14px 6px; display: flex; flex-direction: column; gap: 5px; }
.mem-row {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: #fff6db; border: 1px solid var(--parch-line); border-radius: 8px; padding: 7px 10px;
  font: inherit; cursor: pointer;
}
.mem-av {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.82rem;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.45), transparent 60%), var(--tone, #7a7a7a);
  border: 1.5px solid rgba(255,246,223,0.8); filter: grayscale(0.4);
}
.mem-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mem-body b { font-size: 0.84rem; color: var(--ink); }
.mem-body span { font-size: 0.74rem; color: var(--ink-soft); }
.mem-time { flex: 0 0 auto; font-size: 0.62rem; font-weight: 700; color: var(--ink-soft); opacity: 0.7; }
.mem-note {
  margin: 6px 14px 0; font-size: 0.8rem; font-style: italic; color: var(--ink-soft);
  min-height: 1.2em; transition: opacity .2s; opacity: 0;
}
.mem-note.show { opacity: 1; }

/* Arena card: avatar + tappable name + rival tag */
.arena-av {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; margin-right: 6px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.5), transparent 60%), var(--tone, #8a7a5a);
  border: 1.5px solid rgba(255,246,223,0.85); vertical-align: middle;
}
.arena-card .arena-top { align-items: center; }
.arena-name {
  flex: 1; min-width: 0; text-align: left; font: inherit; font-weight: 800; font-size: 0.92rem;
  color: var(--wood-dark, var(--ink)); background: none; border: none; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arena-name.tappable { cursor: pointer; }
.arena-rival {
  font-style: normal; font-size: 0.56rem; font-weight: 800; letter-spacing: 0;
  color: #fff; background: var(--red-deep); border-radius: 4px; padding: 1px 4px; vertical-align: middle;
}

/* ============ Player Identity: first-run setup / edit ============ */
.setup-screen {
  min-height: 100%; padding: 18px 16px 28px; display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto;
}
.setup-head { text-align: center; }
.setup-title {
  font-size: 1.3rem; font-weight: 900; letter-spacing: 0.01em; color: var(--ink);
  text-shadow: 0 2px 0 var(--parch-line); padding: 0 46px; line-height: 1.25;
}
.setup-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; }
.setup-sec {
  background: linear-gradient(180deg, #fff6db, var(--parch-deep));
  border: 2px solid var(--parch-line); border-radius: 12px; padding: 12px 12px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.setup-label {
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0; text-transform: none; color: var(--ink-soft);
}
.setup-hint { font-size: 0.7rem; color: var(--ink-soft); line-height: 1.35; }
.setup-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; color: var(--ink);
  background: #fffdf6; border: 2px solid var(--parch-line); border-radius: 9px; padding: 10px 11px;
}
.setup-input:focus { outline: none; border-color: var(--gold-deep); }
.setup-row { display: flex; justify-content: space-between; align-items: center; min-height: 14px; }
.setup-count { font-size: 0.66rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.setup-err { font-size: 0.68rem; font-weight: 700; color: var(--red-deep); }

.char-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.char-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #fffaf0; border: 2px solid var(--parch-line); border-radius: 11px; padding: 12px 8px 9px;
  font: inherit; cursor: pointer; transition: transform .06s;
}
.char-card:active { transform: translateY(1px); }
.char-card.sel { border-color: var(--gold-deep); background: #f6e7c4; box-shadow: 0 0 0 2px rgba(227,167,44,0.4); }
.char-ava {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.55), transparent 60%), var(--tone, #6a6a7a);
  border: 3px solid rgba(255,246,223,0.9); box-shadow: 0 3px 7px rgba(0,0,0,0.3);
}
.char-arch { font-size: 0.82rem; font-weight: 800; color: var(--ink); }
.char-pick {
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0; color: var(--ink-soft);
}
.char-card.sel .char-pick { color: var(--gold-deep); }

.setup-actions { display: flex; gap: 10px; margin-top: 2px; }
.setup-actions .btn { flex: 1; }
.setup-actions .btn.disabled, .setup-actions .btn:disabled { opacity: 0.45; pointer-events: none; }

/* confirm summary */
.setup-confirm .confirm-hero {
  background: linear-gradient(180deg, #fff6db, var(--parch-deep));
  border: 2px solid var(--parch-line); border-radius: 14px; padding: 22px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.confirm-ava {
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 2.6rem;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.55), transparent 60%), var(--tone, #4a80b0);
  border: 4px solid rgba(255,246,223,0.92); box-shadow: 0 5px 12px rgba(0,0,0,0.32);
}
.confirm-name { font-size: 1.4rem; font-weight: 900; color: var(--ink); }
.confirm-msg { font-size: 0.9rem; font-style: italic; color: var(--ink-soft); line-height: 1.4; }
.confirm-char { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }
.confirm-char b { color: var(--ink); }

/* arrival narration */
.arrival-screen {
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 40px 26px; text-align: center;
}
.arrival-crest { font-size: 2.2rem; color: var(--gold-deep); animation: bob 3s ease-in-out infinite; }
.arrival-lines { display: flex; flex-direction: column; gap: 16px; max-width: 340px; }
.arrival-line {
  font-size: 1rem; line-height: 1.5; color: var(--ink);
  opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease;
}
.arrival-line.a2 { color: var(--ink-soft); font-style: italic; }
.arrival-line.a3 { font-weight: 800; }
.arrival-line.show { opacity: 1; transform: none; }
.arrival-go { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.arrival-go.show { opacity: 1; pointer-events: auto; }

/* player profile extras (reuses .adv-profile / .ap-* rules) */
.player-profile .ap-say-empty { color: var(--ink-soft); font-style: normal; opacity: 0.8; }
.ap-renown {
  margin: 0 14px 8px; display: flex; align-items: baseline; justify-content: space-between;
  background: #f3e2bd; border: 1px solid var(--gold-deep); border-radius: 8px; padding: 8px 12px;
}
.ap-renown span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.ap-renown b { font-size: 1.25rem; color: var(--gold-deep); font-variant-numeric: tabular-nums; }

/* ---- Adventurer Robbery / PvP ---- */
.btn-rob {
  width: 100%; margin: 0 14px 4px; box-sizing: border-box;
  background: linear-gradient(180deg, #c15b46, var(--red-deep)); box-shadow: 0 4px 0 #6e2415; color: #fff2ec;
}
.btn-rob:active { transform: translateY(2px); box-shadow: 0 2px 0 #6e2415; }
.adv-profile .ap-carry {
  margin: 0 14px 8px; display: flex; align-items: baseline; justify-content: space-between;
  background: #f4e7cd; border: 1px solid var(--parch-line); border-radius: 8px; padding: 7px 12px;
}
.ap-carry span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.ap-carry b { font-size: 0.95rem; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.ap-rel-rob { display: block; margin-top: 5px; color: var(--ink-soft); }
.ap-rel-rob b { color: var(--red-deep); }

.loc-rob-confirm .rob-box {
  margin: 4px 14px 8px; display: flex; flex-direction: column; gap: 5px;
}
.rob-row {
  display: flex; align-items: baseline; justify-content: space-between;
  background: #fffaf0; border: 1px solid var(--parch-line); border-radius: 8px; padding: 8px 11px; font-size: 0.86rem;
}
.rob-row span { color: var(--ink-soft); }
.rob-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rob-row b.gold { color: var(--gold-deep); }
.rob-row b.bad { color: var(--red-deep); }
.rob-actions { margin: 6px 14px 0; display: flex; gap: 10px; }
.rob-actions .btn { flex: 1; }
.rob-actions .btn-rob { margin: 0; }

/* the HUD hero area is now a button */
.topbar .tb-hero { border: none; background: none; padding: 0; cursor: pointer; text-align: left; font: inherit; }
.topbar .tb-hero:active { transform: translateY(1px); }
.tb-avatar {
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.5), transparent 60%), var(--tone, #3a1f1a) !important;
}

.corner-btn {
  position: absolute; bottom: 8px; z-index: 15; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font: inherit; font-size: 0.6rem; font-weight: 800; color: #4a3a22;
  background: #f4e4c1; border: 2px solid #c9a86a; border-radius: 10px; padding: 6px 9px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.32);
}
.corner-btn i { font-style: normal; font-size: 1rem; }
.corner-btn:active { transform: translateY(2px); box-shadow: 0 1px 3px rgba(0,0,0,0.32); }
.corner-btn.left { left: 8px; }
.corner-btn.right { right: 8px; }

.explore-plaque {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 14;
  width: 54%; max-width: 250px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: linear-gradient(180deg, #f4c657, #d69a2f);
  border: 3px solid #7a5310; border-radius: 12px; padding: 9px 8px;
  box-shadow: 0 5px 0 #5c3d10, 0 8px 18px rgba(0,0,0,0.42);
}
.explore-plaque:active { transform: translateX(-50%) translateY(3px); box-shadow: 0 2px 0 #5c3d10; }
.explore-plaque.disabled { filter: grayscale(0.65) brightness(0.85); pointer-events: none; }
.ep-word {
  font-size: 1.3rem; font-weight: 900; letter-spacing: 0; color: #24100d;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.ep-sub { font-size: 0.6rem; font-weight: 800; color: #5c3d10; }

/* ---- bottom nav ---- */
.bottomnav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(180deg, rgba(28,18,12,0.82), rgba(28,18,12,0.96));
  border-top: 2px solid #3a1f1a;
}
.bn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: pointer; padding: 7px 2px 8px;
  color: #cbb489; font: inherit; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.01em;
}
.bn i { font-style: normal; font-size: 1.1rem; }
.bn.active { color: #f0c869; }
.bn.active i { filter: drop-shadow(0 0 6px rgba(240,200,105,0.65)); }
.bn:active { transform: translateY(1px); }

/* ============================================================
   MULTI-REGION EXPLORATION
   ============================================================ */
.dest-panel { gap: 10px; }
.dest-intro {
  margin-inline: 14px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline;
  font-size: 0.82rem; font-weight: 700; color: var(--ink-soft);
}
.dest-warn { color: var(--red-deep); font-weight: 800; }

.region-list {
  margin-inline: 14px; display: flex; flex-direction: column; gap: 12px;
}
.region-card {
  display: flex; flex-direction: column;
  background: #fff6db; border: 2px solid var(--parch-line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 4px 0 rgba(0,0,0,0.14), 0 8px 18px rgba(0,0,0,0.16);
}
.region-card.current { border-color: var(--gold-deep); box-shadow: 0 0 0 2px rgba(227,167,44,0.4), 0 4px 0 rgba(0,0,0,0.14); }
.region-card.locked { filter: grayscale(0.55); opacity: 0.82; }

.rc-thumb {
  position: relative; height: 92px; overflow: hidden;
  background: #cbb489; border-bottom: 2px solid var(--parch-line);
}
.rc-thumb svg, .rc-thumb .rc-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.rc-thumb .rc-img { z-index: 2; }
.region-card.locked .rc-thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: repeating-linear-gradient(45deg, rgba(24,16,10,0.28) 0 10px, rgba(24,16,10,0.12) 10px 20px);
}

.rc-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 6px; }
.rc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rc-top b { font-size: 1rem; color: var(--wood-dark); line-height: 1.15; }
.rc-here {
  font-size: 0.6rem; font-weight: 800; text-transform: none; letter-spacing: 0.01em;
  color: var(--gold-deep); flex: 0 0 auto;
}
.rc-lock {
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0; color: var(--wood);
  border: 2px solid var(--wood); border-radius: 6px; padding: 1px 6px; flex: 0 0 auto;
}
.rc-blurb { font-size: 0.8rem; line-height: 1.42; color: var(--ink-soft); }
.rc-unlock { font-size: 0.8rem; line-height: 1.4; color: var(--wood); }
.rc-unlock b { color: var(--wood-dark); }

.rc-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.rc-tag {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0;
  background: var(--parch-deep); color: var(--ink-soft);
  border: 1px solid var(--parch-line); border-radius: 999px; padding: 2px 8px;
}
.rc-tag.done { background: #dcecc9; color: var(--green-deep); border-color: #b6d59b; }
.rc-tag.boss { background: #f6dcd3; color: var(--red-deep); border-color: #e3b2a5; }
.rc-tag.depth { background: #dfe8f4; color: var(--blue); border-color: #b9cde4; }
.rc-tag.coll { background: #f6ead0; color: var(--gold-deep); border-color: #e6cf9d; }
.rc-tag.diff-hard, .rc-tag.diff-veryhard { background: #f6dcd3; color: var(--red-deep); border-color: #e3b2a5; }
.rc-tag.diff-endgamescaling { background: #26203a; color: #cfc6e6; border-color: #4a3f5c; }

.rc-odd { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.rc-odd b { color: var(--wood-dark); }

.rc-actions { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.rc-go { width: 100%; padding: 11px; font-size: 1rem; }
.rc-boss-btn { width: 100%; font-size: 0.82rem; padding: 9px; }

/* ---- under-levelled warning screen ---- */
.region-warning .result-badge.warn { color: var(--red-deep); letter-spacing: 0.01em; }
.rw-region { font-weight: 800; color: var(--wood-dark); font-size: 0.95rem; }
.rw-levels {
  width: 100%; max-width: 320px; display: flex; gap: 10px;
}
.rw-l {
  flex: 1; background: #fff6db; border: 2px solid var(--parch-line); border-radius: 10px;
  padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 3px;
}
.rw-l span { font-size: 0.68rem; font-weight: 800; text-transform: none; letter-spacing: 0.01em; color: var(--ink-soft); }
.rw-l b { font-size: 1.5rem; color: var(--wood-dark); font-variant-numeric: tabular-nums; }
.rw-l b.bad { color: var(--red-deep); }

/* ---- boss unlock banner on the victory screen ---- */
.unlock-banner {
  width: 100%; max-width: 320px; text-align: center; line-height: 1.5;
  background: #f6ead0; border: 2px solid var(--gold-deep); border-radius: 10px;
  padding: 9px 12px; font-size: 0.86rem; font-weight: 700; color: var(--gold-deep);
}
.unlock-banner b { color: var(--wood-dark); font-size: 0.98rem; }
.unlock-banner.soft { background: #dcecc9; border-color: #b6d59b; color: var(--green-deep); font-size: 0.8rem; }

/* ---- transition region label ---- */
.trans-region {
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.01em; text-transform: none;
  color: var(--gold-deep); margin-bottom: 2px;
}

/* ---- journal: region progress rows ---- */
.rp-list { display: flex; flex-direction: column; gap: 4px; }
.rp-row {
  display: flex; justify-content: space-between; gap: 10px; font-size: 0.8rem;
  padding: 5px 8px; background: #fff6db; border: 1px solid var(--parch-line); border-radius: 8px;
}
.rp-row span:first-child { font-weight: 800; color: var(--wood-dark); }
.rp-n { color: var(--ink-soft); text-align: right; }

/* ---- debug: region readout ---- */
#dbg-regions { line-height: 1.5; }
#dbg-districts { line-height: 1.5; }

/* ============================================================
   BRAMBLEWICK DISTRICTS
   ============================================================ */
.district-nav {
  position: absolute; top: 46px; left: 8px; z-index: 16;
  font: inherit; font-size: 0.62rem; font-weight: 900; letter-spacing: 0;
  cursor: pointer; color: #fff2d5; border: 1px solid rgba(255,255,255,0.28);
  background: rgba(28,18,12,0.62); border-radius: 8px; padding: 5px 10px 5px 7px;
  display: flex; align-items: center; gap: 4px;
}
.district-nav:active { background: rgba(28,18,12,0.85); }
.dn-chev { font-size: 0.9rem; line-height: 1; }
.dn-badge {
  margin-left: 3px; background: var(--red); color: #fff; font-size: 0.6rem;
  border-radius: 999px; min-width: 14px; height: 14px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 3px;
}

/* district map */
.dm-panel { gap: 10px; }
.dm-intro { margin-inline: 14px; font-size: 0.82rem; color: var(--ink-soft); }
.dm-list { margin-inline: 14px; display: flex; flex-direction: column; gap: 9px; }
.dm-row {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  background: #fff6db; border: 2px solid var(--parch-line); border-radius: 12px;
  padding: 11px 12px;
}
.dm-row.current { border-color: var(--gold-deep); box-shadow: 0 0 0 2px rgba(227,167,44,0.35); }
.dm-row.locked { opacity: 0.62; cursor: default; background: #efe6cf; }
.dm-main { flex: 1; min-width: 0; }
.dm-name { font-size: 0.98rem; font-weight: 800; color: var(--wood-dark); display: flex; align-items: baseline; gap: 6px; }
.dm-sub { font-size: 0.76rem; color: var(--ink-soft); margin-top: 2px; }
.dm-here { font-size: 0.58rem; font-weight: 800; text-transform: none; letter-spacing: 0.01em; color: var(--gold-deep); }
.dm-lock { font-size: 0.56rem; font-weight: 900; letter-spacing: 0; color: var(--wood); border: 1px solid var(--wood); border-radius: 5px; padding: 0 5px; }
.dm-unlock { flex: 0 0 auto; text-align: right; font-size: 0.68rem; color: var(--wood); line-height: 1.3; }
.dm-unlock b { font-size: 1rem; color: var(--wood-dark); }
.dm-go { flex: 0 0 auto; font-size: 1.2rem; color: var(--ink-soft); }

/* district discovery */
.result-discovery .result-badge.discovery { color: var(--gold-deep); letter-spacing: 0; }
.disc-name {
  font-size: 1.5rem; font-weight: 900; letter-spacing: 0.01em; color: var(--wood-dark);
  text-align: center;
}

/* ---- Craftsman's Row shared ---- */
.loc-foot { margin-inline: 14px; font-size: 0.72rem; color: var(--ink-soft); font-style: italic; }
/* keep inline row buttons from stretching (global .btn-buy is width:100%) */
.anvil-row .btn-buy, .sv-row .btn-buy, .sv-shop-item .btn-buy,
.arena-foot .btn-buy, .nb-foot .btn-buy, .gm-item .btn-buy {
  width: auto; flex: 0 0 auto; white-space: nowrap;
}
.gm-item .btn-buy { width: 100%; }
.anvil-row .btn-buy { padding: 8px 14px; }
.anvil-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-tag {
  font-size: 0.66rem; font-weight: 900; color: #fff; background: var(--gold-deep);
  border-radius: 5px; padding: 0 5px; letter-spacing: 0;
}
.ench-tag {
  font-size: 0.62rem; font-weight: 800; color: var(--blue); border: 1px solid #b9cde4;
  background: #eaf1f8; border-radius: 5px; padding: 0 5px;
}

/* Bent Anvil */
.anvil-gold, .mm-charges, .sv-scrap { margin-inline: 14px; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.anvil-gold b, .mm-charges b, .sv-scrap b { color: var(--wood-dark); }
.anvil-list { margin-inline: 14px; display: flex; flex-direction: column; gap: 7px; }
.anvil-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff6db; border: 2px solid var(--parch-line); border-radius: 10px; padding: 8px 10px;
}
.anvil-row.equipped { border-color: var(--gold-deep); }
.anvil-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.anvil-info b { font-size: 0.88rem; color: var(--wood-dark); }
.anvil-stat { font-size: 0.72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Mostly Magic */
.mm-tabs { margin-inline: 14px; display: flex; gap: 8px; }
.mm-tab {
  flex: 1; font: inherit; font-weight: 800; font-size: 0.82rem; cursor: pointer;
  padding: 8px; border-radius: 9px; border: 2px solid var(--parch-line); background: #f2e6cf; color: var(--ink-soft);
}
.mm-tab.on { background: var(--wood); color: #f3e2bd; border-color: var(--wood-dark); }
.mm-item {
  margin-inline: 14px; background: #fff6db; border: 2px solid var(--parch-line); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
}
.mm-item b { color: var(--wood-dark); }
.mm-cur { font-size: 0.78rem; color: var(--blue); font-weight: 700; }
.mm-empty { font-size: 0.8rem; color: var(--ink-soft); font-style: italic; }
.loc-magic #mm-roll { margin-inline: 14px; width: calc(100% - 28px); }

/* Salvage Yard */
.sv-group { margin-inline: 14px; }
.sv-group h3 { font-size: 0.78rem; text-transform: none; letter-spacing: 0.01em; color: var(--ink-soft); margin: 10px 0 5px; }
.sv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff6db; border: 1px solid var(--parch-line); border-radius: 8px; padding: 7px 10px; margin-bottom: 5px;
}
.sv-row span { font-size: 0.84rem; font-weight: 700; color: var(--wood-dark); }
.sv-shop-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #f2e6cf; border: 1px solid var(--parch-line); border-radius: 9px; padding: 8px 10px; margin-bottom: 6px;
}
.sv-shop-item b { font-size: 0.85rem; color: var(--wood-dark); display: block; }
.sv-desc { font-size: 0.72rem; color: var(--ink-soft); }

/* ---- Market Square ---- */
.gm-bar, .cups-bar, .nb-bar-top { margin-inline: 14px; font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; }
.gm-bar b, .cups-bar b { color: var(--wood-dark); }
.gm-reset { font-weight: 600; font-style: italic; }
.gm-grid { margin-inline: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gm-item {
  background: #fff6db; border: 2px solid var(--parch-line); border-radius: 10px;
  padding: 8px; display: flex; flex-direction: column; gap: 5px;
}
.gm-item.sold { opacity: 0.5; }
.gm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.gm-top b { font-size: 0.8rem; color: var(--wood-dark); line-height: 1.15; }
.gm-kind { font-size: 0.56rem; font-weight: 800; text-transform: none; letter-spacing: 0.01em; color: var(--ink-soft); flex: 0 0 auto; }
.gm-desc { font-size: 0.7rem; color: var(--ink-soft); line-height: 1.35; flex: 1; }
.gm-item .btn-buy { width: 100%; padding: 7px; font-size: 0.8rem; }

/* Notice Board */
.nb-list { margin-inline: 14px; display: flex; flex-direction: column; gap: 9px; }
.nb-task {
  background: #fff6db; border: 2px solid var(--parch-line); border-radius: 10px; padding: 9px 11px;
}
.nb-task.ready { border-color: var(--green-deep); background: #f2f8e9; }
.nb-task.claimed { opacity: 0.55; }
.nb-text { font-size: 0.86rem; font-weight: 700; color: var(--wood-dark); }
.nb-non { margin-left: 5px; color: var(--gold-deep); font-weight: 900; }
.nb-bar { height: 6px; border-radius: 999px; background: var(--parch-deep); margin: 7px 0 5px; overflow: hidden; }
.nb-bar span { display: block; height: 100%; background: linear-gradient(90deg, #7ab7e0, var(--blue)); }
.nb-task.ready .nb-bar span { background: linear-gradient(90deg, #9bd06a, var(--green-deep)); }
.nb-foot { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--ink-soft); }
.nb-prog { font-variant-numeric: tabular-nums; font-weight: 800; }
.nb-rew { flex: 1; color: var(--gold-deep); font-weight: 700; }
.nb-claimed { color: var(--green-deep); font-weight: 800; }
.nb-foot .btn-buy { padding: 4px 10px; font-size: 0.72rem; }

/* Three Cups */
.cups-row { display: flex; justify-content: center; gap: 16px; margin: 16px 0; }
.cup {
  border: none; background: none; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 6px;
}
.cup.disabled { opacity: 0.45; pointer-events: none; }
.cup-body { font-size: 2.6rem; line-height: 1; transition: transform .12s ease; }
.cup:active .cup-body { transform: translateY(-6px); }
.cup-n { font-size: 0.78rem; font-weight: 800; color: var(--ink-soft); }
.loc-cart .sv-group { margin-top: 8px; }

/* ---- High Quarter ---- */
.grec-list { margin-inline: 14px; display: flex; flex-direction: column; gap: 4px; }
.grec-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: #fff6db; border: 1px solid var(--parch-line); border-radius: 8px; padding: 7px 11px;
}
.grec-row span { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.grec-row b { font-size: 1rem; color: var(--wood-dark); font-variant-numeric: tabular-nums; }

.arena-bar { margin-inline: 14px; font-size: 0.76rem; color: var(--ink-soft); font-weight: 700; line-height: 1.5; }
.arena-bar b { color: var(--wood-dark); }
.arena-list { margin-inline: 14px; display: flex; flex-direction: column; gap: 9px; }
.arena-card {
  background: #fff6db; border: 2px solid var(--parch-line); border-radius: 11px; padding: 10px 12px;
}
.arena-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.arena-top b { font-size: 0.92rem; color: var(--wood-dark); }
.arena-lv { font-size: 0.68rem; font-weight: 800; color: var(--ink-soft); }
.arena-stats { font-size: 0.76rem; color: var(--ink-soft); margin-top: 3px; font-variant-numeric: tabular-nums; }
.arena-eq { font-size: 0.72rem; font-style: italic; color: var(--ink-soft); margin-top: 1px; }
.arena-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.arena-rew { font-size: 0.78rem; font-weight: 800; color: var(--gold-deep); }
.loc-arena #arena-refresh { margin-inline: 14px; width: calc(100% - 28px); margin-top: 4px; }

.quest-box {
  margin-inline: 14px; background: #fff6db; border: 2px solid var(--parch-line);
  border-radius: 11px; padding: 11px 13px;
}
.quest-name { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.01em; text-transform: none; color: var(--gold-deep); margin-bottom: 5px; }
.quest-box p { font-size: 0.86rem; line-height: 1.5; color: var(--wood-dark); }
.loc-estate .result-btns { margin-top: 10px; }

.hall-event {
  margin-inline: 14px; background: #fff6db; border: 2px solid var(--parch-line);
  border-radius: 11px; padding: 12px 13px;
}
.hall-name { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.01em; text-transform: none; color: var(--ink-soft); }
.hall-event h3 { font-size: 1.05rem; color: var(--wood-dark); margin: 3px 0 5px; }
.hall-event p { font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); }
.hall-bars { margin-top: 9px; }
.hall-line { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 4px; }
.hall-line b { color: var(--wood-dark); }
.hall-line em { font-style: italic; opacity: 0.75; }
.loc-hall #hall-donate { margin-inline: 14px; width: calc(100% - 28px); }

/* ---- Riverside ---- */
.soon-box {
  margin-inline: 14px; background: #eef2f4; border: 2px dashed #9fb4c4;
  border-radius: 11px; padding: 12px 13px;
}
.soon-tag { font-size: 0.68rem; font-weight: 900; letter-spacing: 0; color: var(--blue); }
.soon-box p { font-size: 0.84rem; color: var(--ink-soft); margin: 5px 0 7px; line-height: 1.45; }
.soon-list { margin: 0; padding-left: 18px; font-size: 0.8rem; color: var(--ink-soft); }
.soon-list li { margin: 2px 0; }
.expo-list, .expo-row { display: flex; }
.expo-list { flex-direction: column; gap: 4px; margin-top: 4px; }
.expo-row { justify-content: space-between; font-size: 0.8rem; color: var(--ink-soft); }
.expo-row b { color: var(--wood-dark); }

.fish-bar { margin-inline: 14px; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); }
.fish-bar b { color: var(--wood-dark); }
.fish-stage {
  margin: 14px; background: linear-gradient(180deg, #cfe0ec, #9fc0d8);
  border: 2px solid #7fa0b4; border-radius: 12px; padding: 22px 14px; text-align: center;
}
.fish-water { font-size: 1.2rem; letter-spacing: 2px; color: #5f8fa6; opacity: 0.8; }
.fish-status { margin-top: 10px; font-weight: 800; color: var(--wood-dark); font-size: 0.9rem; }
.loc-fish #fish-btn { margin-inline: 14px; width: calc(100% - 28px); }

/* ============================================================
   THE JOURNEY
   ============================================================ */
.journey-obj {
  margin-inline: 14px; background: linear-gradient(180deg, #2a2438, #3a3350);
  color: #e8e2f2; border: 2px solid #4a4266; border-radius: 12px; padding: 12px 14px;
}
.jo-tag { font-size: 0.62rem; font-weight: 900; letter-spacing: 0; color: #b9a9e6; }
.jo-title { font-size: 1.1rem; font-weight: 900; letter-spacing: 0.01em; margin: 3px 0 4px; }
.jo-body { font-size: 0.84rem; line-height: 1.5; color: #cfc6e6; }
.jo-depth { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: #b9a9e6; }
.jo-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.jo-bar span { display: block; height: 100%; background: linear-gradient(90deg, #8f7fd0, #cfc6e6); }

.tb-j {
  font-style: normal; font-size: 0.6rem; font-weight: 900; color: #1c1228;
  background: #cfc6e6; border-radius: 5px; padding: 0 4px; margin-left: 4px;
}

/* paced story / dialogue panels */
.journey-panel {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px 20px; text-align: center;
}
.journey-panel.jp-fade { animation: fade .5s ease; }
.journey-panel.jp-fade-dark { animation: fadeDark .7s ease; background: #14111e; color: #d7d0e6; }
@keyframes fadeDark { from { opacity: 0; } to { opacity: 1; } }
.jp-heading {
  font-size: 0.66rem; font-weight: 900; letter-spacing: 0.01em; text-transform: none;
  color: var(--gold-deep);
}
.jp-hut .jp-heading { color: var(--wood); }
.jp-final .jp-heading { color: #b9a9e6; }
.jp-lines { max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.jp-line { font-size: 1rem; line-height: 1.55; font-weight: 600; color: var(--wood-dark); }
.jp-final .jp-line, .jp-fade-dark .jp-line { color: #d7d0e6; }
.jp-hint {
  font-size: 0.68rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft);
  opacity: 0.6; min-height: 14px;
}
.journey-panel .btn-big, .journey-panel .btn-ghost, .journey-panel .btn-choice { max-width: 300px; width: 100%; }
.journey-panel .event-choices { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 10px; }

/* Edge of the Map sign */
.jp-edge .edge-quiet {
  background: #f2ecdd; border: 3px solid var(--wood); border-radius: 6px;
  padding: 20px 18px; max-width: 320px; box-shadow: var(--shadow);
}
.edge-sign p { font-size: 0.92rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1.6; color: var(--wood-dark); margin: 4px 0; }

/* Journey 10 true-route badge */
.jp-truebadge {
  font-size: 1.1rem; font-weight: 900; letter-spacing: 0; color: var(--gold-deep);
  border: 2px dashed var(--gold-deep); border-radius: 10px; padding: 14px 18px;
}

/* strange space */
.strange-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 300px; }
.strange-cell {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
}
.strange-ico { font-size: 1.8rem; filter: grayscale(0.6) brightness(0.85); opacity: 0.85; }

/* Journey Complete */
.jp-complete { justify-content: flex-start; padding-top: 30px; }
.jc-badge { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.01em; color: var(--gold-deep); }
.jc-title { font-size: 1.5rem; font-weight: 900; letter-spacing: 0; color: var(--wood-dark); line-height: 1.2; }
.jc-title span { font-size: 0.9rem; color: var(--ink-soft); letter-spacing: 0.01em; }
.jc-stats { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 3px; }
.jc-stats.jc-funny { margin-top: 6px; opacity: 0.92; }
.jc-stats.jc-funny .jc-row b { color: var(--gold-deep); }
.jc-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: #fff6db; border: 1px solid var(--parch-line); border-radius: 7px; padding: 6px 11px;
}
.jc-row span { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.jc-row b { font-size: 1rem; color: var(--wood-dark); font-variant-numeric: tabular-nums; }
.jc-points { font-size: 0.8rem; font-weight: 800; color: var(--gold-deep); }

/* Journey Points screen */
.ju-bar { margin-inline: 14px; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.ju-bar b { color: var(--wood-dark); }
.ju-list { margin-inline: 14px; display: flex; flex-direction: column; gap: 8px; }
.ju-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff6db; border: 2px solid var(--parch-line); border-radius: 10px; padding: 9px 11px;
}
.ju-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ju-info b { font-size: 0.88rem; color: var(--wood-dark); }
.ju-rank { font-size: 0.68rem; font-weight: 800; color: var(--ink-soft); }
.ju-per { font-size: 0.74rem; color: var(--ink-soft); }
.ju-row .btn-buy { width: auto; flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }

/* final-boss combat: darker, quieter */
.combat.combat-final .combat-bg { background: radial-gradient(120% 90% at 50% 30%, #241d33 0%, #100c1a 100%); }
.combat.combat-final .combat-scrim { background: rgba(6,4,12,0.4); }
.combat.combat-final .enemy-name { color: #cfc6e6; letter-spacing: 0; }
.combat.combat-final .final-tag { color: #6a6280; }
.combat.combat-final .enemy-desc { color: #9990b0; }
.combat.combat-final .combat-log { color: #d7d0e6; }
#dbg-journey { line-height: 1.5; }