:root {
  --ink: #07131a;
  --ink-2: #0b1d26;
  --panel: rgba(7, 18, 24, 0.94);
  --panel-soft: rgba(11, 27, 35, 0.9);
  --gold: #e4b85c;
  --gold-bright: #ffd77a;
  --bronze: #8b5b2f;
  --parchment: #e8d3a4;
  --cream: #fff1c8;
  --muted: #b9c0bb;
  --red: #d83b32;
  --red-dark: #7c1719;
  --blue: #2196d3;
  --green: #4caf68;
  --purple: #9b62c7;
  --line: rgba(228, 184, 92, 0.45);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
  font-family: Georgia, "Times New Roman", serif;
  color: var(--cream);
  background: var(--ink);
}

* { box-sizing: border-box; }

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

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 52% 24%, rgba(35, 105, 115, 0.2), transparent 34rem),
    linear-gradient(180deg, #0b2430 0%, #071218 75%);
  overflow-x: hidden;
}

button { font: inherit; }

button:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.app-shell { min-height: 100vh; padding-bottom: 76px; }

.game-header {
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.3fr) minmax(300px, 1fr);
  align-items: center;
  gap: 20px;
  padding: 16px clamp(18px, 3vw, 56px);
  background: linear-gradient(180deg, rgba(4, 12, 17, 0.98), rgba(6, 18, 24, 0.88));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.34);
  position: relative;
  z-index: 5;
}

.brand {
  color: var(--cream);
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}

.brand-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 45% 55%;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-size: 30px;
  background: radial-gradient(circle, #294733, #0c1d1d 72%);
  box-shadow: inset 0 0 18px rgba(232, 183, 79, 0.18), 0 0 18px rgba(232, 183, 79, 0.1);
}

.brand strong {
  display: block;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 0.88;
  letter-spacing: -2px;
  color: #f8e5b5;
  text-shadow: 0 3px 0 #5f4025;
}

.brand small {
  display: block;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  font-size: 10px;
}

.region-heading { text-align: center; }
.region-heading h1 { margin: 2px 0; font-size: clamp(24px, 3vw, 38px); font-weight: 500; }
.region-heading p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; }

.currencies { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.currencies span {
  padding: 8px 11px;
  border: 1px solid rgba(228, 184, 92, 0.26);
  background: rgba(0, 0, 0, 0.24);
  border-radius: 4px;
  color: #cfcec5;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 12px;
}
.currencies b { color: var(--gold-bright); }
.currencies strong { color: white; margin-left: 4px; }
.currencies .ledger-status { transition: border-color 180ms, background 180ms; }
.currencies .ledger-status[data-state="synced"] { border-color: rgba(76, 175, 104, .55); background: rgba(30, 91, 53, .22); }
.currencies .ledger-status[data-state="synced"] b,
.currencies .ledger-status[data-state="synced"] strong { color: #8ee6a3; }
.currencies .ledger-status[data-state="saving"],
.currencies .ledger-status[data-state="connecting"] { border-color: rgba(33, 150, 211, .58); background: rgba(20, 84, 120, .22); }
.currencies .ledger-status[data-state="saving"] b,
.currencies .ledger-status[data-state="connecting"] b { color: #7fd7ff; }
.currencies .ledger-status[data-state="offline"] { border-color: rgba(216, 59, 50, .48); }
.currencies .ledger-status[data-state="offline"] b,
.currencies .ledger-status[data-state="offline"] strong { color: #f2a09a; }

main { width: min(1540px, 100%); margin: 0 auto; }
.view { display: none; padding: clamp(14px, 2vw, 32px); animation: reveal 240ms ease-out; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } }

.panel {
  background: linear-gradient(160deg, rgba(10, 26, 34, 0.97), rgba(4, 13, 18, 0.97));
  border: 1px solid rgba(228, 184, 92, 0.48);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.28), var(--shadow);
  position: relative;
}
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--gold);
  opacity: 0.8;
  pointer-events: none;
}
.panel::before { left: 5px; top: 5px; border-left: 1px solid; border-top: 1px solid; }
.panel::after { right: 5px; bottom: 5px; border-right: 1px solid; border-bottom: 1px solid; }
.panel-title { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--gold-bright); text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; }
.panel-title small { color: var(--muted); letter-spacing: normal; text-transform: none; }

.camp-scene { min-height: 680px; overflow: hidden; display: grid; place-items: center; padding: 42px; }
.camp-sky, .map-landscape, .battle-landscape {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 16, 24, 0.05), rgba(2, 9, 12, 0.35) 48%, rgba(4, 10, 11, 0.9)),
    radial-gradient(circle at 58% 28%, #eaa455 0 2%, #d66f3e 10%, #705269 24%, transparent 41%),
    linear-gradient(140deg, transparent 0 36%, #162d2b 36% 48%, transparent 48%),
    linear-gradient(220deg, transparent 0 39%, #243b32 39% 51%, transparent 51%),
    linear-gradient(180deg, #244757, #302f3b 55%, #18261e 56%, #0b1514);
  filter: saturate(0.86);
}
.camp-sky {
  background-image: url("assets/art/wilderness-camp-v1.webp");
  background-size: cover;
  background-position: center 52%;
  filter: none;
}
.camp-sky::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,8,12,.38), transparent 23%, rgba(2,8,10,.08) 65%, rgba(2,7,9,.66));
}
.camp-copy { position: absolute; top: 28px; text-align: center; width: min(620px, 85%); z-index: 1; text-shadow: 0 2px 8px #020607; }
.camp-copy h2 { font-weight: 500; font-size: clamp(28px, 4vw, 48px); margin: 8px 0; }
.camp-copy p { color: #e2ddce; line-height: 1.6; margin: 0 auto; max-width: 560px; }

.camp-actions { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.location-card {
  position: absolute;
  width: 190px;
  min-height: 88px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--cream);
  cursor: pointer;
  background: linear-gradient(180deg, rgba(11, 23, 25, 0.6), rgba(3, 9, 12, 0.92));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 24px rgba(228, 184, 92, 0.04), 0 8px 25px rgba(0, 0, 0, 0.3);
  transition: transform 160ms, border-color 160ms, background 160ms;
  pointer-events: auto;
}
.location-card:nth-child(1) { left: 10%; top: 43%; }
.location-card:nth-child(2) { left: 34%; top: 34%; }
.location-card:nth-child(3) { right: 25%; top: 34%; }
.location-card:nth-child(4) { right: 8%; top: 46%; }
.location-card:nth-child(5) { left: 8%; top: 65%; }
.location-card:hover { transform: translateY(-5px); border-color: var(--gold-bright); background: linear-gradient(180deg, rgba(71, 50, 28, 0.75), rgba(3, 9, 12, 0.94)); }
.location-card > span { color: var(--gold-bright); font-size: 27px; line-height: 1; }
.location-card strong { font-size: 16px; }
.location-card small { color: var(--muted); font-family: "Trebuchet MS", sans-serif; }
.campfire { display: none; position: absolute; left: 50%; bottom: 78px; width: 140px; height: 78px; transform: translateX(-50%); }
.campfire::before, .campfire::after, .campfire span {
  content: ""; position: absolute; left: 50%; bottom: 18px; transform-origin: bottom; border-radius: 70% 20% 60% 35%;
}
.campfire::before { width: 44px; height: 64px; background: #d04b24; transform: translateX(-50%) rotate(42deg); box-shadow: 0 0 45px #df772d; animation: flame 1s infinite alternate ease-in-out; }
.campfire::after { width: 28px; height: 50px; background: #ffc24f; transform: translateX(-50%) rotate(28deg); animation: flame 0.7s 0.2s infinite alternate ease-in-out; }
.campfire span { width: 86px; height: 9px; background: #4c2e20; transform: translateX(-50%) rotate(7deg); box-shadow: 0 10px 0 #2d211b; border-radius: 7px; }
@keyframes flame { to { transform: translateX(-50%) rotate(35deg) scale(0.9, 1.08); } }
.primary-cta {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 250px;
  padding: 14px 22px;
  color: var(--cream);
  background: linear-gradient(#183044, #0b1822);
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 2px #102a3a, 0 5px 18px rgba(0, 0, 0, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.primary-cta:hover { color: white; box-shadow: inset 0 0 24px rgba(228, 184, 92, 0.15), 0 5px 18px rgba(0, 0, 0, 0.45); }
.primary-cta span { color: var(--gold-bright); margin-right: 8px; }
.camp-lower-grid { margin-top: 16px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.compact-panel { min-height: 160px; padding: 16px 22px; }
.portrait-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.portrait-chip { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(228, 184, 92, 0.22); padding: 8px; background: rgba(0,0,0,.2); }
.portrait-symbol { width: 42px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; color: var(--gold-bright); font-size: 24px; background: linear-gradient(160deg, #283c38, #0a1217); border: 1px solid var(--bronze); overflow: hidden; }
.portrait-art {
  background-color: #0b171d;
  background-image: url("assets/art/portrait-atlas-v1.webp");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: var(--art-x, 0%) var(--art-y, 0%);
}
.traveler-portrait {
  background-color: #07131a;
  background-image: url("assets/art/traveler-portrait-v1.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 24%;
}
.traveler-portrait .fallback-symbol { opacity: 0; }
.portrait-art .fallback-symbol { opacity: 0; }
.portrait-chip strong, .portrait-chip small { display: block; }
.portrait-chip small { color: var(--muted); font-family: "Trebuchet MS", sans-serif; font-size: 11px; }
.legacy-track { height: 13px; border: 1px solid #5d4a32; background: #03090c; padding: 2px; margin: 18px 0; }
.legacy-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #865822, var(--gold-bright)); transition: width 400ms; }
.camp-progression { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.camp-progression span { padding: 7px 4px; text-align: center; background: rgba(0,0,0,.2); border: 1px solid rgba(228,184,92,.16); }
.camp-progression b, .camp-progression small { display: block; }
.camp-progression b { color: var(--gold-bright); font-size: 15px; }
.camp-progression small { margin-top: 2px; color: var(--muted); font: 8px "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.muted { color: var(--muted); font-family: "Trebuchet MS", sans-serif; font-size: 13px; line-height: 1.5; }

.journey-layout { display: grid; grid-template-columns: 270px 1fr; gap: 16px; min-height: 720px; }
.run-summary { padding: 16px; display: flex; flex-direction: column; }
.run-party { display: grid; gap: 10px; }
.run-hero { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; }
.run-hero .portrait-symbol { grid-row: span 2; }
.run-hero strong { font-size: 14px; }
.run-record { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; font-family: "Trebuchet MS", sans-serif; }
.run-record span { padding: 7px 3px; text-align: center; color: var(--muted); background: rgba(0,0,0,.22); border: 1px solid rgba(228,184,92,.16); font-size: 8px; text-transform: uppercase; }
.run-record b { display: block; color: var(--gold-bright); font-size: 15px; }
.hp-bar, .resolve-bar, .enemy-hp { height: 9px; background: #03080a; border: 1px solid #334047; position: relative; overflow: hidden; }
.hp-bar span, .enemy-hp span { display: block; height: 100%; background: linear-gradient(90deg, #8f151a, #f1483f); transition: width 300ms; }
.resolve-bar span { display: block; height: 100%; background: linear-gradient(90deg, #09629a, #28b6e8); transition: width 300ms; }
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.run-summary h3 { color: var(--gold); font-size: 14px; font-weight: 500; }
.relic-list { display: grid; gap: 8px; }
.relic { padding: 8px; background: rgba(144, 94, 30, .12); border: 1px solid rgba(228, 184, 92, .2); color: #e6dbc1; font-size: 12px; }
.quiet-button { margin-top: auto; padding: 10px; border: 1px solid #536068; color: #c2c7c7; background: transparent; cursor: pointer; }
.quiet-button + .quiet-button { margin-top: 7px; }
.quiet-button.danger-quiet { color: #d99b94; border-color: #743b38; }
.map-panel { overflow: hidden; min-height: 720px; }
.map-landscape {
  background-image: url("assets/art/wilderness-journey-map-v1.webp");
  background-size: cover;
  background-position: center;
  opacity: 1;
  filter: none;
}
.map-landscape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,9,12,.24), rgba(2,9,12,.06) 24%, rgba(2,9,12,.12) 70%, rgba(2,9,12,.55));
  pointer-events: none;
}
.map-title { position: relative; z-index: 2; text-align: center; margin-top: 32px; }
.map-title h2 { font-size: 38px; margin: 4px; font-weight: 500; text-shadow: 0 3px 8px #061015, 0 1px 0 #061015; }
.map-title p { color: #e8dcc5; margin: 0; }
.journey-map { width: min(820px, 94%); height: 535px; position: relative; margin: 0 auto; z-index: 2; }
.journey-map::before { display: none; }
.map-node {
  position: absolute;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: radial-gradient(circle, #183444, #071218 67%);
  color: var(--gold-bright);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 0 5px rgba(4, 12, 16, .76), 0 5px 18px rgba(0,0,0,.6);
  transition: transform 160ms, filter 160ms, opacity 160ms;
  z-index: 2;
}
.map-node:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.12); filter: brightness(1.25); }
.map-node.completed { background: radial-gradient(circle, #6a4c21, #1e1b12); }
.map-node.current { animation: nodePulse 1.5s infinite; }
.map-node.current::after { content: attr(data-label); position: absolute; left: 50%; top: calc(100% + 9px); width: max-content; max-width: 150px; transform: translateX(-50%); padding: 4px 7px; color: #fff0c8; background: rgba(3,11,15,.92); border: 1px solid rgba(228,184,92,.45); font: 10px/1.15 "Trebuchet MS", sans-serif; box-shadow: 0 4px 10px rgba(0,0,0,.5); pointer-events: none; }
.map-node:disabled { cursor: default; filter: grayscale(.75); opacity: .62; }
.map-node.elite { border-color: #db433d; color: #ff6f5d; }
.map-node.event { border-color: #3bb7dc; color: #7ddfff; }
.map-node.companion { border-color: #a76ade; color: #cf9aff; }
.map-node.witness { border-color: #73d7e5; color: #d8fbff; background: radial-gradient(circle, #256176, #071218 68%); }
.map-node.camp { border-color: #60bc72; color: #aef0b7; background: radial-gradient(circle, #24563b, #071218 68%); }
.map-node.merchant { border-color: #e7a744; color: #ffd889; background: radial-gradient(circle, #5d3e19, #071218 68%); }
.map-node.unknown { border-color: #9a79c7; color: #d9bbff; background: radial-gradient(circle, #3d285c, #071218 68%); }
.map-node.boss { width: 56px; height: 56px; border-color: #ef493d; color: #ffcd73; background: radial-gradient(circle, #761b17, #140708 70%); }
.map-node.veiled,
.map-node.veiled:disabled { opacity: .48; border-color: rgba(214,198,161,.55); background: radial-gradient(circle, rgba(40,52,53,.72), rgba(6,14,17,.88) 70%); box-shadow: 0 0 0 4px rgba(4,12,16,.55), 0 4px 12px rgba(0,0,0,.42); filter: none; }
@keyframes nodePulse { 50% { box-shadow: 0 0 0 7px rgba(4,12,16,.76), 0 0 26px rgba(255,207,112,.72); } }
.node-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.node-connector { fill: none; stroke: rgba(255,225,163,.68); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.node-connector.chosen { stroke: #ffc960; stroke-width: 3; stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(255,201,96,.85)); }
.map-legend { position: absolute; bottom: 12px; left: 20px; right: 20px; display: flex; justify-content: center; gap: 7px 14px; flex-wrap: wrap; color: #e8e2d4; font: 10px "Trebuchet MS", sans-serif; z-index: 2; text-shadow: 0 1px 3px #000; }
.node-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); margin-right: 4px; }
.node-key.event { background: #3bb7dc; } .node-key.companion { background: var(--purple); } .node-key.elite { background: var(--red); }
.node-key.witness { background: #73d7e5; } .node-key.camp { background: #60bc72; } .node-key.merchant { background: #e7a744; }
.node-key.unknown { background: #9a79c7; } .node-key.boss { background: #ef493d; }

.encounter-overlay { position: absolute; inset: 0; z-index: 12; display: none; place-items: center; padding: 24px; background: rgba(2,8,11,.78); backdrop-filter: blur(4px); }
.encounter-overlay.show { display: grid; animation: reveal 220ms ease-out; }
.encounter-panel { width: min(720px, 100%); max-height: 88%; overflow-y: auto; padding: clamp(22px, 4vw, 38px); text-align: center; color: var(--cream); background: linear-gradient(165deg, rgba(18,42,51,.98), rgba(4,13,18,.99)); border: 1px solid var(--gold); box-shadow: 0 25px 85px #000, inset 0 0 42px rgba(228,184,92,.06); }
.encounter-panel h2 { margin: 7px 0 12px; color: var(--gold-bright); font-size: clamp(27px, 4vw, 42px); font-weight: 500; }
.encounter-panel > p { max-width: 610px; margin: 0 auto 22px; color: #d9d7cd; font: 14px/1.6 "Trebuchet MS", sans-serif; }
.encounter-panel blockquote { margin: 18px auto; padding: 18px; max-width: 590px; color: #fff1c8; background: rgba(228,184,92,.08); border-left: 3px solid var(--gold); font-size: clamp(18px, 3vw, 27px); line-height: 1.4; }
.encounter-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.encounter-choice { min-height: 92px; padding: 13px; color: #f2e9d4; background: linear-gradient(165deg, #1b3540, #0b171d); border: 1px solid #587380; cursor: pointer; }
.encounter-choice:hover:not(:disabled) { border-color: var(--gold-bright); filter: brightness(1.14); }
.encounter-choice:disabled { opacity: .42; cursor: not-allowed; }
.encounter-choice strong, .encounter-choice small { display: block; }
.encounter-choice strong { color: var(--gold-bright); font-size: 16px; }
.encounter-choice small { margin-top: 7px; color: #c5cac7; font: 11px/1.35 "Trebuchet MS", sans-serif; }
.encounter-overlay.witness { background: rgba(4,20,26,.72); }
.encounter-overlay.witness .encounter-panel { border-color: #72d6e4; background: linear-gradient(165deg, rgba(24,65,77,.98), rgba(5,22,29,.99)); }
.encounter-overlay.camp .encounter-panel { border-color: #66c57a; }
.encounter-overlay.merchant .encounter-panel { border-color: #e7a744; }
.encounter-overlay.companion .encounter-panel { border-color: #ad7bde; }

.battle-shell { min-height: 820px; overflow: hidden; background: #1a2c2f; }
.battle-landscape {
  background-image: url("assets/art/wilderness-battlefield-v2.webp");
  background-size: cover;
  background-position: center 48%;
  filter: none;
  opacity: 1;
}
.battle-landscape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 15, 18, .04), rgba(5, 11, 12, .08) 50%, rgba(3, 9, 12, .62));
  pointer-events: none;
}
.turn-order-wrap { position: relative; z-index: 3; margin: 10px auto 0; width: min(840px, 88%); min-height: 66px; padding: 8px 14px; display: grid; grid-template-columns: 90px 1fr 80px; align-items: center; background: rgba(3, 12, 17, .92); border: 1px solid var(--line); }
.turn-order-wrap > span { color: var(--gold); font-size: 12px; text-transform: uppercase; }
.turn-order-wrap > b { text-align: right; color: var(--gold-bright); font-size: 13px; }
.turn-order { display: flex; gap: 6px; align-items: center; justify-content: center; }
.turn-token { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid var(--blue); color: #dff7ff; position: relative; overflow: hidden; }
.turn-token.enemy { border-color: var(--red); background: #2c1013; }
.turn-token.active { box-shadow: 0 0 16px var(--gold); border-color: var(--gold-bright); transform: translateY(3px); }
.battlefield { position: relative; z-index: 2; min-height: 425px; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: end; padding: 40px 5% 22px; }
.combat-side { min-height: 350px; display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); align-items: end; gap: 18px; }
.enemy-side { direction: rtl; }
.fighter { min-height: 248px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; direction: ltr; cursor: default; transition: opacity 160ms, filter 160ms; }
.fighter::after { content: ""; position: absolute; bottom: 44px; width: 72%; height: 14px; border-radius: 50%; background: rgba(7, 8, 8, .34); filter: blur(4px); z-index: -1; }
.fighter-avatar {
  width: clamp(96px, 9.5vw, 142px);
  height: clamp(128px, 12.7vw, 190px);
  display: grid;
  place-items: center;
  color: #f1d29a;
  font-size: clamp(42px, 5vw, 72px);
  text-shadow: 0 4px 0 #111, 0 0 20px rgba(255,203,96,.2);
  background-image: url("assets/art/character-atlas-v1.webp");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: var(--art-x, 0%) var(--art-y, 0%);
  filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .45));
  transition: transform 160ms, filter 160ms;
  animation: fighterIdle 2.8s ease-in-out infinite;
  z-index: 1;
}
.fighter-avatar .fallback-symbol { opacity: 0; }
.fighter-avatar.animated-hero,
.fighter-avatar.animated-enemy {
  width: clamp(112px, 10.8vw, 162px);
  height: clamp(112px, 10.8vw, 162px);
  background-size: 600% 400%;
  background-position: 0% 0%;
  animation: plantedIdle var(--breath-duration, 2800ms) ease-in-out var(--breath-delay, 0ms) infinite;
  transform-origin: 50% 90%;
  transition: filter 160ms;
}
.fighter-avatar.animated-traveler { background-image: url("assets/art/traveler-animation-sheet-v1.webp"); }
.fighter-avatar.animated-david { background-image: url("assets/art/david-animation-sheet-v1.webp"); }
.fighter-avatar.animated-ruth { background-image: url("assets/art/ruth-animation-sheet-v1.webp"); }
.fighter-avatar.animated-gideon { background-image: url("assets/art/gideon-animation-sheet-v1.webp"); }
.fighter-avatar.animated-caleb { background-image: url("assets/art/caleb-animation-sheet-v1.webp"); }
.fighter-avatar.animated-archer { background-image: url("assets/art/archer-animation-sheet-v1.webp"); }
.fighter-avatar.animated-beast { width: clamp(136px, 12.6vw, 188px); height: clamp(136px, 12.6vw, 188px); background-image: url("assets/art/beast-animation-sheet-v1.webp"); }
.fighter-avatar.animated-bandit { background-image: url("assets/art/bandit-animation-sheet-v1.webp"); }
.fighter-avatar.animated-captain { width: clamp(120px, 11.4vw, 170px); height: clamp(120px, 11.4vw, 170px); background-image: url("assets/art/captain-animation-sheet-v1.webp"); }
.fighter.targetable { cursor: crosshair; z-index: 3; animation: targetReady 1s ease-in-out infinite; }
.fighter.targetable .fighter-avatar { filter: brightness(1.24) drop-shadow(0 0 12px rgba(255,255,255,.48)) drop-shadow(0 10px 7px rgba(0,0,0,.5)); }
.fighter.target-enemy .fighter-name { border-color: #ff6d5d; box-shadow: 0 0 16px rgba(255,77,61,.72); }
.fighter.target-ally .fighter-name { border-color: #79ddff; box-shadow: 0 0 16px rgba(70,190,239,.72); }
.fighter.targetable::before { content: "⌖"; position: absolute; top: -5px; color: white; font-size: 27px; z-index: 4; }
.fighter.target-enemy::before { color: #ff8c7d; text-shadow: 0 0 10px #e4433a; }
.fighter.target-ally::before { content: "✦"; color: #a7edff; text-shadow: 0 0 10px #198dcc; }
.fighter.target-dimmed { opacity: .42; filter: grayscale(.65); }
.fighter.taking-turn .fighter-name { border-color: var(--gold-bright); box-shadow: 0 0 12px rgba(255, 215, 122, .42); }
.fighter.hit .fighter-avatar { animation: hit .28s; }
.fighter.attacking .fighter-avatar { animation: attack .34s; }
.fighter.casting .fighter-avatar { animation: castPulse .4s; }
.fighter.attacking .fighter-avatar.animated-hero,
.fighter.attacking .fighter-avatar.animated-enemy { animation: heroAttackFrames var(--attack-duration, 480ms) step-end 1 both; }
.fighter.casting .fighter-avatar.animated-hero,
.fighter.casting .fighter-avatar.animated-enemy { animation: heroCastFrames var(--cast-duration, 600ms) step-end 1 both; }
.fighter.hit .fighter-avatar.animated-hero,
.fighter.hit .fighter-avatar.animated-enemy { animation: heroHitFrames var(--hit-duration, 300ms) step-end 1 both; }
.fighter.defeated .fighter-avatar.animated-hero,
.fighter.defeated .fighter-avatar.animated-enemy { animation: none; background-position: 100% 100%; translate: none; scale: 1; }
.fighter.newly-defeated .fighter-avatar.animated-hero,
.fighter.newly-defeated .fighter-avatar.animated-enemy { animation: heroDefeatFrames var(--defeat-duration, 420ms) step-end 1 forwards; }
.fighter.defeated { filter: grayscale(.72); pointer-events: none; }
.fighter.defeated .fighter-name,
.fighter.defeated .fighter-bars,
.fighter.defeated .status-row { opacity: .35; }
@keyframes hit { 33% { transform: translateX(8px); filter: brightness(2) sepia(1); } 66% { transform: translateX(-5px); } }
@keyframes attack { 50% { transform: translateX(22px) scale(1.06); } }
@keyframes castPulse { 50% { transform: translateY(-10px) scale(1.06); filter: brightness(1.65) drop-shadow(0 0 12px #62cfff); } }
@keyframes fighterIdle { 50% { transform: translateY(-3px); } }
@keyframes targetReady { 50% { filter: brightness(1.14); } }
@keyframes plantedIdle { 0%, 100% { scale: 1 1; } 50% { scale: 1 1.012; } }
@keyframes heroAttackFrames { 0.0000% { background-position: 0% 33.333%; } 16.6667% { background-position: 20% 33.333%; } 33.3333% { background-position: 40% 33.333%; } 50.0000% { background-position: 60% 33.333%; } 66.6667% { background-position: 80% 33.333%; } 83.3333% { background-position: 100% 33.333%; } 100% { background-position: 100% 33.333%; } }
@keyframes heroCastFrames { 0.0000% { background-position: 0% 66.667%; } 16.6667% { background-position: 20% 66.667%; } 33.3333% { background-position: 40% 66.667%; } 50.0000% { background-position: 60% 66.667%; } 66.6667% { background-position: 80% 66.667%; } 83.3333% { background-position: 100% 66.667%; } 100% { background-position: 100% 66.667%; } }
@keyframes heroHitFrames { 0.0000% { background-position: 0% 100%; } 33.3333% { background-position: 20% 100%; } 66.6667% { background-position: 40% 100%; } 100% { background-position: 40% 100%; } }
@keyframes heroDefeatFrames { 0.0000% { background-position: 60% 100%; } 33.3333% { background-position: 80% 100%; } 66.6667% { background-position: 100% 100%; } 100% { background-position: 100% 100%; } }
.fighter-name { min-width: 112px; text-align: center; background: rgba(3,9,12,.9); border: 1px solid #805f36; padding: 4px 7px; font-size: 13px; z-index: 2; }
.fighter-bars { width: 115px; display: grid; gap: 3px; margin-top: 3px; }
.enemy-intent { width: 124px; min-height: 32px; margin-top: 4px; padding: 3px 5px; display: grid; grid-template-columns: 20px 1fr; align-items: center; color: #ffd5cb; background: rgba(49, 12, 14, .94); border: 1px solid #a84a43; font-family: "Trebuchet MS", sans-serif; font-size: 9px; line-height: 1.1; z-index: 2; }
.enemy-intent > span { grid-row: 1 / 3; color: #ff7b6c; font-size: 15px; text-align: center; }
.enemy-intent strong, .enemy-intent small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enemy-intent small { color: #d7b7ae; }
.enemy-intent.expanded { width: 100%; min-height: 52px; margin-top: 12px; padding: 8px; grid-template-columns: 34px 1fr; font-size: 11px; }
.enemy-intent.expanded > span { font-size: 24px; }
.status-row { min-height: 22px; display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
.status-icon { min-width: 22px; height: 22px; padding: 0 3px; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 11px; background: #153749; border: 1px solid #55bde8; font-family: "Trebuchet MS", sans-serif; }
.status-icon b { font-size: 8px; color: white; }
.status-icon.guard { background: #214f38; border-color: #71d08c; }
.status-icon.bleed { background: #501218; border-color: #ef4e5d; color: #ff7982; }
.status-icon.stun { background: #34205a; border-color: #c28cff; color: #d6b1ff; }
.status-icon.weaken { background: #4b1a25; border-color: #e6637a; color: #ff91a4; }
.damage-number { position: absolute; top: 50px; color: #ff503e; font-family: "Trebuchet MS", sans-serif; font-weight: 900; font-size: 32px; text-shadow: 0 3px 0 #250305, 0 0 6px white; animation: floatDamage .8s forwards; pointer-events: none; }
.damage-number.heal { color: #69f08a; }
@keyframes floatDamage { to { transform: translateY(-60px) scale(1.15); opacity: 0; } }
.battle-center .ember { width: 55px; height: 25px; margin: 0 auto 22px; border-radius: 50%; background: #d3732f; filter: blur(1px); box-shadow: 0 0 35px 12px rgba(232,109,39,.7); }
.battle-hud { position: relative; z-index: 4; display: grid; grid-template-columns: 250px 1fr 270px; gap: 10px; padding: 10px; background: rgba(4, 12, 16, .95); border-top: 1px solid var(--line); }
.active-hero-card, .battle-log { min-height: 220px; border: 1px solid rgba(228,184,92,.38); background: #08161d; padding: 12px; }
.active-hero-head { display: grid; grid-template-columns: 68px 1fr; gap: 10px; align-items: center; }
.active-hero-head .portrait-symbol { width: 68px; height: 78px; font-size: 36px; }
.active-hero-head h2 { margin: 0; font-size: 25px; }
.active-hero-head p { color: var(--gold); margin: 4px 0 8px; font-size: 13px; }
.stat-label { display: flex; justify-content: space-between; font-size: 11px; font-family: "Trebuchet MS", sans-serif; margin: 8px 0 3px; }
.target-prompt { margin-top: 10px; padding: 8px; display: grid; gap: 3px; border: 1px solid rgba(228,184,92,.2); background: rgba(0,0,0,.18); font-family: "Trebuchet MS", sans-serif; }
.target-prompt span { color: var(--gold); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.target-prompt strong { color: #e9ece7; font-size: 10px; line-height: 1.35; }
.target-prompt.active { border-color: #6dcce9; background: rgba(28,94,119,.22); box-shadow: inset 0 0 14px rgba(73,190,230,.08); }
.enemy-turn-card h2 { margin: 7px 0; color: #ffb3a7; }
.enemy-turn-card p { color: var(--muted); font: 11px/1.4 "Trebuchet MS", sans-serif; }
.action-area { display: flex; flex-direction: column; gap: 8px; }
.ability-cards { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ability-card { position: relative; padding: 9px 8px 31px; color: var(--cream); background: linear-gradient(165deg, #203946, #071118); border: 1px solid #4b9dca; cursor: pointer; min-height: 166px; }
.ability-card:nth-child(1) { border-color: #bf463a; background: linear-gradient(165deg, #4e1718, #0d1115); }
.ability-card:nth-child(3) { border-color: var(--gold); background: linear-gradient(165deg, #4a3513, #0d1115); }
.ability-card:disabled { filter: grayscale(.8); opacity: .5; cursor: not-allowed; }
.ability-card.selected-action, .action-button.selected-action { border-color: #fff0a6; box-shadow: 0 0 0 2px rgba(255,215,122,.3), 0 0 16px rgba(255,215,122,.42); filter: brightness(1.12); }
.skill-icon { background-image: url("assets/art/skill-icon-atlas-v1.webp"); background-size: 400% 400%; background-position: var(--icon-x, 0%) var(--icon-y, 0%); background-repeat: no-repeat; }
.ability-icon { width: 58px; height: 58px; display: block; margin: 0 auto 5px; border: 1px solid rgba(255,216,126,.45); box-shadow: inset 0 0 9px rgba(0,0,0,.45); }
.ability-card strong { display: block; text-align: center; font-size: 16px; }
.ability-card small { display: block; margin-top: 6px; color: #d5d7d3; text-align: center; line-height: 1.3; font-family: "Trebuchet MS", sans-serif; font-size: 11px; }
.ability-card em { display: block; margin-top: 5px; color: #77c8e9; text-align: center; text-transform: uppercase; letter-spacing: .08em; font: normal 8px "Trebuchet MS", sans-serif; }
.ability-card .lesson-boost { display: block; width: max-content; max-width: 100%; margin: 5px auto 0; padding: 3px 5px; color: #ffdc82; background: rgba(128,83,27,.28); border: 1px solid rgba(255,215,122,.38); font: 8px "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.ability-cost { position: absolute; left: 50%; bottom: -1px; transform: translate(-50%, 50%); width: 34px; height: 34px; display: grid; place-items: center; background: #075f95; border: 2px solid #72d3ff; color: white; rotate: 45deg; }
.ability-cost span { rotate: -45deg; font-weight: bold; }
.basic-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.action-button { min-height: 45px; padding: 6px 10px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #eef3f3; background: #10232d; border: 1px solid #506c7a; cursor: pointer; }
.mini-skill-icon { width: 32px; height: 32px; flex: 0 0 32px; background-image: url("assets/art/skill-icon-atlas-v1.webp"); background-size: 400% 400%; background-position: var(--icon-x, 0%) var(--icon-y, 0%); border: 1px solid #6f5c38; }
.action-button:disabled { opacity: .4; cursor: not-allowed; }
.action-button.gold { border-color: var(--gold); color: var(--gold-bright); }
.waiting-panel { grid-column: 1 / -1; display: grid; place-items: center; align-content: center; gap: 8px; min-height: 166px; color: var(--muted); border: 1px solid rgba(228,184,92,.2); background: rgba(0,0,0,.22); }
.waiting-panel span { color: var(--gold); font-size: 28px; }
.battle-log { font-family: "Trebuchet MS", sans-serif; overflow: hidden; }
.battle-log .panel-title button { color: var(--gold-bright); border: 1px solid #77633e; background: transparent; cursor: pointer; }
#battle-log-lines { display: grid; gap: 7px; max-height: 172px; overflow-y: auto; padding-right: 3px; }
.log-line { font-size: 12px; color: #d7dcdb; padding-bottom: 6px; border-bottom: 1px solid rgba(228,184,92,.12); }
.log-line.good { color: #78e69a; } .log-line.bad { color: #ff7b71; } .log-line.gold { color: var(--gold-bright); }

.reward-overlay { position: absolute; inset: 0; z-index: 12; display: none; place-items: center; padding: 24px; background: rgba(2, 8, 11, .82); backdrop-filter: blur(4px); }
.reward-overlay.show { display: grid; animation: reveal 260ms ease-out; }
.reward-panel { width: min(820px, 100%); padding: 25px; text-align: center; background: linear-gradient(165deg, rgba(19,43,51,.98), rgba(4,13,18,.99)); border: 1px solid var(--gold); box-shadow: 0 24px 80px #000, inset 0 0 40px rgba(228,184,92,.06); }
.reward-panel h2 { margin: 6px 0; color: var(--gold-bright); font-size: clamp(25px, 4vw, 38px); font-weight: 500; }
.reward-panel > p { margin: 0 0 20px; color: var(--parchment); }
.reward-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reward-card { min-height: 250px; padding: 15px; display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--cream); background: linear-gradient(165deg, #233943, #09151b); border: 1px solid #7d6942; cursor: pointer; transition: transform 150ms, border-color 150ms, filter 150ms; }
.reward-card:hover { transform: translateY(-5px); border-color: var(--gold-bright); filter: brightness(1.12); }
.reward-icon { width: 92px; height: 92px; border: 2px solid #8e7138; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.reward-card strong { color: var(--gold-bright); font-size: 19px; }
.reward-card small { flex: 1; color: #d6d7d0; font: 12px/1.4 "Trebuchet MS", sans-serif; }
.reward-card b { width: 100%; padding: 8px; color: #112026; background: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.reward-panel { max-height: calc(100dvh - 110px); overflow-y: auto; }
.reward-build { margin: 12px 0 18px; color: var(--parchment); font-size: 13px; text-align: left; }
.reward-build summary { cursor: pointer; padding: 8px 0; }
.journey-bonus-details { margin: 16px 0; padding: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.18); font-size: 13px; line-height: 1.55; }
.journey-bonus-details summary { cursor: pointer; color: var(--gold-bright); }
.journey-bonus-details ul { padding-left: 20px; }
.journey-bonus-details li { margin: 8px 0; }
.battle-forecast { margin-top: 12px; padding: 12px; border: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.battle-forecast summary { cursor: pointer; color: var(--gold-bright); }
.battle-forecast article { border-top: 1px solid var(--line); padding: 12px 0; }
.battle-forecast article strong { color: var(--parchment); }
.battle-forecast ul { padding-left: 20px; }
.battle-forecast li { margin: 7px 0; }
.cloud-gate { position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:24px; background:rgba(3,12,18,.97); overflow:auto; }
.cloud-gate[hidden] { display:none; }
.cloud-gate section { width:min(540px,100%); max-height:90dvh; overflow:auto; padding:28px; border:1px solid var(--gold); background:#10252e; color:var(--parchment); line-height:1.6; }
.cloud-gate h2 { color:var(--gold-bright); }
.cloud-actions,.cloud-actions form,.cloud-actions label { display:grid; gap:12px; }
.cloud-actions input { width:100%; box-sizing:border-box; padding:12px; color:#fff; background:#09171e; border:1px solid #8c7954; font:inherit; }
.cloud-actions button { padding:12px; cursor:pointer; background:var(--gold); color:#112026; border:0; font:inherit; }
.cloud-actions button:disabled { opacity:.5; cursor:wait; }
.cloud-actions p { font-size:13px; }
.reward-build p { line-height: 1.6; }
.relic-build-connection { color: #a6dfb7; font-size: 12px; line-height: 1.45; }
.relic-build-connection:empty { display: none; }
.reward-alternatives { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 18px; }
.reward-alternatives button { display: grid; gap: 8px; padding: 14px; text-align: left; }
.reward-alternatives small { line-height: 1.5; font-weight: normal; text-transform: none; }
.reward-alternatives button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 700px) { .reward-panel .reward-choices { max-height: none; overflow: visible; } }

.bottom-nav { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; min-height: 64px; display: flex; align-items: stretch; justify-content: center; background: rgba(4, 12, 17, .97); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px rgba(0,0,0,.35); }
.bottom-nav button { min-width: 118px; color: #d7d9d5; background: transparent; border: 0; border-left: 1px solid rgba(228,184,92,.12); cursor: pointer; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.bottom-nav button:last-child { border-right: 1px solid rgba(228,184,92,.12); }
.bottom-nav button:hover { color: var(--gold-bright); background: rgba(228,184,92,.07); }
.bottom-nav span { display: block; font-size: 18px; margin-bottom: 3px; color: var(--gold); }

.game-modal { width: min(820px, calc(100% - 30px)); max-height: 84vh; color: var(--cream); background: linear-gradient(160deg, #102731, #050e13); border: 1px solid var(--gold); box-shadow: 0 25px 100px black; padding: 28px; }
.game-modal::backdrop { background: rgba(0, 7, 10, .83); backdrop-filter: blur(4px); }
.modal-close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 1px solid #5e6f74; color: white; background: #08151b; cursor: pointer; }
.modal-heading { text-align: center; margin-bottom: 22px; }
.modal-heading h2 { color: var(--gold-bright); font-weight: 500; font-size: 30px; margin: 4px; }
.insight-balance { width: max-content; margin: 11px auto 0; padding: 7px 11px; color: #d7f1df; background: linear-gradient(90deg, rgba(42,91,74,.42), rgba(33,62,77,.42)); border: 1px solid rgba(116,198,161,.48); font: 700 11px "Trebuchet MS", sans-serif; letter-spacing: .05em; }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
.roster-card { position: relative; min-width: 0; text-align: center; padding: 12px; color: var(--cream); border: 1px solid rgba(228,184,92,.3); background: linear-gradient(165deg, rgba(17,38,46,.76), rgba(0,0,0,.3)); }
.roster-card .portrait-symbol { width: 72px; height: 82px; margin: 0 auto 8px; font-size: 36px; }
.roster-card strong, .roster-card small { display: block; }
.roster-card small { color: var(--muted); font-family: "Trebuchet MS", sans-serif; font-size: 11px; }
.roster-state { display: inline-block; margin-top: 9px; padding: 5px 8px; color: #cbd8da; border: 1px solid #42555d; font: 9px "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.roster-card.selected { border-color: var(--gold-bright); box-shadow: inset 0 0 20px rgba(228,184,92,.12), 0 0 12px rgba(228,184,92,.12); }
.roster-card.selected .roster-state { color: #17130a; background: var(--gold-bright); border-color: var(--gold-bright); }
.roster-card.locked .roster-identity { opacity: .5; filter: grayscale(.8); }
.lesson-panel { min-height: 89px; margin: 11px -4px 0; padding: 8px; text-align: left; background: rgba(0,0,0,.28); border-top: 1px solid rgba(228,184,92,.18); border-bottom: 1px solid rgba(228,184,92,.18); }
.lesson-panel > span { color: var(--gold); font: 9px "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.lesson-panel .rank-pips { justify-content: center; }
.lesson-panel small { min-height: 30px; margin-top: 7px; font-size: 9px; line-height: 1.35; }
.roster-actions { display: grid; grid-template-columns: 1fr 1.45fr; gap: 6px; margin-top: 10px; }
.roster-actions button { min-width: 0; padding: 8px 4px; color: var(--cream); background: linear-gradient(#3c2e19, #151617); border: 1px solid var(--gold); cursor: pointer; font: 9px "Trebuchet MS", sans-serif; }
.roster-actions button:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.7); }
.road-only-note { grid-column: 1 / -1; min-height: 32px; display: grid; place-items: center; padding: 7px; color: #8fa4a8; border: 1px dashed #42555d; font: 9px/1.3 "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.traveler-anchor { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 16px; margin-bottom: 14px; padding: 14px; background: linear-gradient(90deg, rgba(151,96,34,.2), rgba(8,20,25,.65)); border: 1px solid rgba(228,184,92,.38); }
.traveler-anchor .portrait-symbol { width: 88px; height: 88px; }
.traveler-anchor h3 { margin: 3px 0; color: var(--gold-bright); font-size: 20px; }
.traveler-anchor p { margin: 0; color: #c8cdca; font: 11px/1.45 "Trebuchet MS", sans-serif; }
.traveler-anchor > strong { padding: 7px 9px; color: #17130a; background: var(--gold-bright); font: 9px "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.fellowship-rule { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; align-items: end; margin: 0 0 12px; padding: 10px 12px; background: rgba(0,0,0,.22); border-left: 3px solid var(--gold); }
.fellowship-rule span { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.fellowship-rule strong { color: white; font-size: 15px; }
.fellowship-rule small { grid-column: 1 / -1; color: var(--muted); font: 10px "Trebuchet MS", sans-serif; }
.roadside-recruitment { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid rgba(116,198,161,.38); background: radial-gradient(circle at 80%, rgba(45,105,88,.28), transparent 48%); }
.roadside-recruitment p { max-width: 720px; color: var(--muted); margin: 4px 0 0; font-family: "Trebuchet MS", sans-serif; font-size: 11px; line-height: 1.45; }
.roadside-recruitment > span { flex: none; padding: 7px 9px; color: #d7f1df; border: 1px solid rgba(116,198,161,.4); font: 9px "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.road-recruitment-card { min-height: 89px; display: grid; place-content: center; gap: 7px; margin: 11px -4px 0; padding: 10px; text-align: center; background: rgba(0,0,0,.28); border-top: 1px solid rgba(116,198,161,.18); border-bottom: 1px solid rgba(116,198,161,.18); }
.road-recruitment-card strong { color: #9cb4b8; font-size: 11px; }
.road-recruitment-card small { color: #72888c; font: 9px/1.4 "Trebuchet MS", sans-serif; }
.story-card { padding: 14px; border-left: 3px solid var(--gold); background: rgba(0,0,0,.2); margin: 10px 0; }
.story-card h3 { margin: 0 0 5px; color: var(--gold-bright); }
.story-card p { margin: 0; color: #d7d8d1; line-height: 1.5; }
.training-grid, .store-grid { display: grid; gap: 10px; }
.progression-card, .store-card { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 13px; background: rgba(0,0,0,.22); border: 1px solid rgba(228,184,92,.24); }
.progression-icon, .store-card > span { width: 48px; height: 48px; display: grid; place-items: center; color: var(--gold-bright); background: radial-gradient(circle, #4a381d, #10191c 72%); border: 1px solid #846a36; font-size: 23px; }
.progression-card h3, .store-card h3 { margin: 0 0 4px; color: var(--gold-bright); font-size: 17px; }
.progression-card p, .store-card p { margin: 0; color: #c8cdca; font: 11px/1.4 "Trebuchet MS", sans-serif; }
.progression-card button, .store-card button { min-width: 132px; padding: 10px; color: var(--cream); background: linear-gradient(#3c2e19, #151617); border: 1px solid var(--gold); cursor: pointer; font-size: 12px; }
.progression-card button:disabled, .store-card button:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.7); }
.rank-pips { display: flex; gap: 5px; margin-top: 9px; }
.rank-pips i { width: 18px; height: 6px; background: #172329; border: 1px solid #536068; }
.rank-pips i.filled { background: var(--gold); border-color: var(--gold-bright); box-shadow: 0 0 7px rgba(255,215,122,.38); }
.modal-note { margin: 18px 0 0; padding: 11px; color: var(--muted); background: rgba(228,184,92,.06); border: 1px solid rgba(228,184,92,.18); font: 11px/1.5 "Trebuchet MS", sans-serif; }
.modal-note strong { color: var(--gold-bright); }
.scripture-credit { margin: 10px 0 0; color: #78878a; font: 8px/1.45 "Trebuchet MS", sans-serif; text-align: center; }
.store-balance { display: flex; gap: 7px; flex-wrap: wrap; margin: -8px 0 16px; justify-content: center; }
.store-balance span { padding: 7px 9px; color: var(--gold-bright); background: rgba(0,0,0,.22); border: 1px solid rgba(228,184,92,.22); font: 11px "Trebuchet MS", sans-serif; }
.modal-section-title { margin: 18px 0 8px; color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.carried-relics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.carried-relics .story-card { margin: 0; }
.codex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.codex-card { min-height: 76px; display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; padding: 8px; background: rgba(0,0,0,.2); border: 1px solid rgba(228,184,92,.22); }
.codex-card > .skill-icon { width: 58px; height: 58px; border: 1px solid #75633f; }
.codex-card strong, .codex-card small { display: block; }
.codex-card strong { color: var(--gold-bright); font-size: 13px; }
.codex-card small { margin-top: 4px; color: var(--muted); font: 9px/1.35 "Trebuchet MS", sans-serif; }
.codex-card.locked { filter: grayscale(1); opacity: .5; }
.codex-card.locked > .skill-icon { background-image: none; background-color: #10181b; }
.library-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.library-grid .story-card { margin: 0; }
.passage-tag { display: inline-block; margin-bottom: 7px; color: #8bd4e8; font: 10px "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.journey-summary { text-align: center; }
.journey-summary .summary-seal { width: 72px; height: 72px; margin: 0 auto 10px; display: grid; place-items: center; color: var(--gold-bright); background: radial-gradient(circle, #4d3a1b, #101619 70%); border: 1px solid var(--gold); border-radius: 50%; font-size: 34px; box-shadow: 0 0 28px rgba(228,184,92,.18); }
.journey-summary h2 { margin: 6px; color: var(--gold-bright); font-size: clamp(30px, 5vw, 46px); font-weight: 500; }
.journey-summary > p { max-width: 570px; margin: 8px auto 22px; color: #d5d7d1; font: 13px/1.5 "Trebuchet MS", sans-serif; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.summary-grid span { padding: 13px 6px; background: rgba(0,0,0,.22); border: 1px solid rgba(228,184,92,.2); }
.summary-grid b, .summary-grid small { display: block; }
.summary-grid b { color: white; font-size: 24px; }
.summary-grid small { margin-top: 3px; color: var(--muted); font: 9px "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.summary-rewards { margin: 14px 0 20px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.summary-rewards span { padding: 8px 11px; color: var(--gold-bright); background: rgba(228,184,92,.08); border: 1px solid rgba(228,184,92,.28); font: 11px "Trebuchet MS", sans-serif; }
.primary-cta.compact { position: static; min-width: 200px; margin: 0 auto; transform: none; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(228,184,92,.15); }
.settings-row > span { color: #cdd0ca; }
.settings-row > strong { text-align: right; }
.ledger-setting-state.state-synced { color: #8ee6a3; }
.ledger-setting-state.state-saving, .ledger-setting-state.state-connecting { color: #7fd7ff; }
.ledger-setting-state.state-offline { color: #f2a09a; }
.profile-id { max-width: 58%; overflow-wrap: anywhere; color: var(--gold-bright); font: 11px "Trebuchet MS", sans-serif; }
.ledger-recovery { margin-top: 20px; padding: 16px; background: linear-gradient(145deg, rgba(22,52,61,.72), rgba(4,13,18,.82)); border: 1px solid rgba(33,150,211,.42); }
.ledger-recovery h3 { margin: 5px 0; color: #d9f3ff; font-size: 19px; }
.ledger-recovery p { margin: 0; color: var(--muted); font: 11px/1.5 "Trebuchet MS", sans-serif; }
.ledger-recovery label { display: block; margin: 16px 0 6px; color: #d4d9d7; font: 10px "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.ledger-actions { display: flex; gap: 8px; margin-top: 14px; }
.ledger-actions .quiet-button { margin-top: 0; }
.ledger-actions .quiet-button:disabled { opacity: .42; cursor: not-allowed; }
.ledger-restore-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ledger-restore-row input { min-width: 0; padding: 11px; color: white; background: #040d12; border: 1px solid #496675; font: 12px "Trebuchet MS", sans-serif; }
.ledger-restore-row input:focus { outline: 2px solid #5bc5ef; outline-offset: 1px; }
.ledger-restore-row button { min-width: 96px; padding: 10px 14px; color: #e7f8ff; background: linear-gradient(#164968, #0b2536); border: 1px solid #5bc5ef; cursor: pointer; }
.danger-button { margin-top: 22px; padding: 10px 14px; background: #43181a; color: #ffc4bc; border: 1px solid #a44843; cursor: pointer; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 88px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 11px 18px; color: white; background: #142b35; border: 1px solid var(--gold); box-shadow: 0 8px 25px black; transition: opacity 180ms, transform 180ms; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1050px) {
  .game-header { grid-template-columns: 1fr 1fr; }
  .region-heading { display: none; }
  .camp-actions { position: relative; inset: auto; width: min(700px, 100%); display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 150px; }
  .location-card { position: static; width: auto; min-height: 100px; }
  .location-card:nth-child(5) { grid-column: 1 / -1; width: min(340px, 100%); justify-self: center; }
  .battle-hud { grid-template-columns: 210px 1fr; }
  .battle-log { grid-column: 1 / -1; min-height: 120px; }
  #battle-log-lines { max-height: 80px; }
  .fighter { min-height: 225px; }
}

@media (max-width: 760px) {
  .app-shell { padding-bottom: 58px; }
  .game-header { min-height: 88px; padding: 12px; }
  .brand-mark { width: 42px; height: 42px; }
  .brand strong { font-size: 29px; }
  .brand small { display: none; }
  .currencies span { padding: 5px 7px; font-size: 10px; }
  .camp-scene { min-height: 720px; padding: 16px; }
  .camp-copy { top: 24px; }
  .camp-actions { margin-top: 120px; }
  .location-card { min-height: 105px; }
  .camp-lower-grid, .journey-layout { grid-template-columns: 1fr; }
  .run-summary { display: none; }
  .map-panel { min-height: 650px; }
  .journey-map { height: 470px; }
  .map-legend { gap: 9px; flex-wrap: wrap; }
  .encounter-overlay { padding: 10px; }
  .encounter-panel { max-height: 94%; padding: 20px 14px; }
  .encounter-actions { grid-template-columns: 1fr; }
  .battle-shell { min-height: 980px; }
  .turn-order-wrap { grid-template-columns: 1fr; text-align: center; }
  .turn-order-wrap > b, .turn-order-wrap > span { display: none; }
  .turn-token { width: 34px; height: 34px; }
  .battlefield { min-height: 420px; grid-template-columns: 1fr 30px 1fr; padding: 20px 3%; }
  .combat-side { grid-template-columns: 1fr 1fr; gap: 5px; }
  .fighter-avatar { width: 62px; height: 94px; }
  .fighter-avatar.animated-hero, .fighter-avatar.animated-enemy { width: 86px; height: 86px; }
  .fighter-avatar.animated-beast { width: 104px; height: 104px; }
  .fighter-avatar.animated-captain { width: 92px; height: 92px; }
  .fighter-name, .fighter-bars { width: 86px; min-width: 86px; font-size: 10px; }
  .fighter { min-height: 192px; }
  .enemy-intent { width: 88px; grid-template-columns: 16px 1fr; font-size: 7px; }
  .enemy-intent > span { font-size: 11px; }
  .battle-hud { grid-template-columns: 1fr; }
  .active-hero-card { min-height: 120px; }
  .active-hero-head .portrait-symbol { width: 50px; height: 58px; }
  .ability-cards { gap: 4px; }
  .ability-card { min-height: 145px; padding-inline: 4px; }
  .ability-card strong { font-size: 13px; }
  .ability-card small { font-size: 9px; }
  .battle-log { display: none; }
  .reward-choices { grid-template-columns: 1fr; max-height: 58vh; overflow-y: auto; }
  .reward-card { min-height: 160px; }
  .reward-icon { width: 68px; height: 68px; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .progression-card, .store-card { grid-template-columns: 48px 1fr; }
  .progression-card button, .store-card button { grid-column: 1 / -1; width: 100%; }
  .codex-grid, .library-grid, .carried-relics { grid-template-columns: 1fr; }
  .traveler-anchor { grid-template-columns: 72px 1fr; }
  .traveler-anchor .portrait-symbol { width: 68px; height: 68px; }
  .traveler-anchor > strong { grid-column: 1 / -1; text-align: center; }
  .roadside-recruitment { align-items: stretch; flex-direction: column; }
  .ledger-actions { align-items: stretch; flex-direction: column; }
  .ledger-restore-row { grid-template-columns: 1fr; }
  .ledger-restore-row button { width: 100%; }
  .bottom-nav { min-height: 55px; }
  .bottom-nav button { min-width: 0; flex: 1; font-size: 9px; }
  .bottom-nav span { font-size: 15px; }
}

@media (max-width: 470px) {
  .currencies span { font-size: 0; }
  .currencies b, .currencies strong { font-size: 11px; }
  .view { padding: 7px; }
  .camp-actions { gap: 7px; }
  .location-card strong { font-size: 13px; }
  .location-card small { font-size: 9px; }
  .portrait-row { grid-template-columns: repeat(2, 1fr); }
  .camp-progression { grid-template-columns: repeat(2, 1fr); }
  .camp-lower-grid .compact-panel:last-child { display: none; }
  .map-node { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Keep health legible during target selection and damage feedback. */
.fighter-bars .hp-bar, .fighter-bars .enemy-hp { height: 17px; }
.fighter-bars .health-value { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 11px/1 "Trebuchet MS", sans-serif; text-shadow: 0 1px 2px #000, 1px 0 2px #000; pointer-events: none; }

/* Preview lives inside the card so it also works on touch screens. */
.target-preview { color: #fff2c7; background: #17221eed; border: 1px solid #b89b57; border-radius: 6px; padding: 4px 6px; margin-top: 5px; font-size: 12px; line-height: 1.3; text-align: center; }
.cancel-target { margin-top: 8px; padding: 5px 9px; font-size: 12px; border: 1px solid #b89b57; border-radius: 5px; color: #fff2c7; background: #17221e; cursor: pointer; }
.cancel-target:focus-visible { outline: 2px solid #fff2c7; outline-offset: 2px; }

/* Intent and status text stays readable without hovering. */
.enemy-intent { width: min(160px, 100%); line-height: 1.25; }
.enemy-intent strong, .enemy-intent small { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.enemy-intent .intent-target, .enemy-intent .intent-note { grid-column: 1 / -1; margin-top: 3px; }
.enemy-intent .intent-target { color: #fff1d2; }
.enemy-intent.intent-guard { background: #183729; border-color: #71a67e; }
.enemy-intent.intent-disabled { background: #30283e; border-color: #a292b6; }
.enemy-intent .intent-note { color: #d7cbb8; margin-top: 7px; }
.status-row { flex-wrap: wrap; }
.status-icon { height: auto; min-height: 22px; border-radius: 4px; }
.status-icon b { font-size: 10px; }
.status-expanded { display: grid; gap: 5px; }
.status-expanded .status-icon { display: grid; grid-template-columns: 16px 1fr; padding: 5px 7px; }
.status-expanded .status-icon small { grid-column: 1 / -1; font-size: 11px; line-height: 1.35; color: #f0e6d5; }
@media (max-width: 700px) { .enemy-intent { font-size: 9px; } }

/* Reserve transient targeting UI so choosing/cancelling never resizes combat. */
.target-preview-slot { width: min(160px, 100%); height: 70px; flex: 0 0 70px; display: grid; align-items: center; }
.target-preview { margin: 0; max-height: 70px; overflow-y: auto; box-sizing: border-box; }
.preview-hidden { visibility: hidden; pointer-events: none; }
.target-prompt { grid-template-rows: 12px 42px 32px; }
.target-prompt strong { min-height: 0; overflow-y: auto; }
.target-prompt .cancel-target { margin-top: 0; align-self: stretch; }
/* Keep the combat log from growing as the first messages arrive. */
#battle-log-lines { height: 172px; align-content: start; }
@media (max-width: 1050px) { #battle-log-lines { height: 80px; } }

/* The scene belongs to the arena, not the growing menus below it. */
.battle-shell { background: #171a17; }
.battlefield { isolation: isolate; padding-top: 95px; background: #9c7644; }
.battlefield > .battle-landscape { z-index: -1; background-position: center top; background-size: 100% 100%; }
.battle-landscape::after { background: linear-gradient(180deg, rgba(40,28,15,.03), rgba(40,28,15,.02) 70%, rgba(16,19,16,.5)); }
.fighter::after { content: none; }
.fighter-stage { position: relative; isolation: isolate; flex: 0 0 auto; }
.foot-shadow { position: absolute; z-index: 0; left: 17%; right: 17%; top: 87%; height: 10%; border-radius: 50%; background: radial-gradient(ellipse, rgba(35,24,13,.72) 0%, rgba(35,24,13,.3) 48%, transparent 73%); pointer-events: none; }
.fighter-stage .fighter-avatar { position: relative; z-index: 1; }
.fighter.defeated .foot-shadow { opacity: .6; }
.battle-hud { position: relative; background: linear-gradient(#252820, #0b171b 55px); border-top: 1px solid #87734a; }
@media (max-width: 760px) { .battlefield { padding-top: 70px; } }

/* Reference-board composition: open stage, edge portraits, aged gold panels. */
.battle-shell { min-height: 0; border-color: #8b7346; box-shadow: inset 0 0 0 3px #111510, 0 12px 35px #0008; }
.turn-order-wrap { background: linear-gradient(#26291f, #10140f); border: 1px solid #a28750; box-shadow: inset 0 0 0 3px #13180f; margin-block: 10px; }
.turn-token { border-color: #9b814e; }
.turn-token.active { box-shadow: 0 0 0 2px #e9c978, 0 0 15px #dcb86555; }
.battle-roster { display: none; }
.fighter-details { display: flex; flex-direction: column; align-items: center; }
.battle-center .ember { display: none; }
.battle-hud { border-top: 2px solid #8b7346; background: linear-gradient(135deg, #26291e, #111710 65%); }
.active-hero-card, .battle-log { background: linear-gradient(150deg, #22251c, #0d130f); border-color: #806b42; box-shadow: inset 0 0 0 3px #11180f; }
.ability-card, .ability-card:nth-child(1), .ability-card:nth-child(3) { background: linear-gradient(145deg, #303023, #111710); border-color: #9a7d43; box-shadow: inset 0 0 0 3px #14190f; }
.ability-card:not(:disabled):hover, .action-button:not(:disabled):hover { background: linear-gradient(145deg, #49412a, #1c2216); border-color: #ebce85; }
.ability-card.selected-action, .action-button.selected-action { border-color: #ffe3a0; box-shadow: inset 0 0 0 2px #ac8c44, 0 0 12px #d7b46255; }
.ability-card em { color: #d5bd84; }
.ability-cost { background: #253635; border-color: #b9a269; width: 28px; height: 28px; }
.action-button { background: #20261b; border-color: #7c704b; color: #eee4ca; }
.target-prompt.active { background: #37341e; border-color: #c7ab62; box-shadow: inset 0 0 12px #ab8b3520; }
.cancel-target { background: #1c2418; }
@media (min-width: 1100px) {
  .battlefield { height: 650px; min-height: 650px; padding: 24px 18px; grid-template-columns: 175px 1fr 32px 1fr 175px; gap: 12px; align-items: stretch; }
  .battlefield > .battle-landscape { background-size: cover; background-position: center 55%; }
  .battle-roster { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #8d7748 #13170e; align-self: stretch; padding: 0 4px 5px; z-index: 5; }
  .battle-roster h3 { margin: 0 0 3px; padding: 7px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #f1d59a; text-align: center; background: #172014e8; border-block: 1px solid #8d7748; }
  .roster-target { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 7px; color: #f0e4c4; background: linear-gradient(135deg, #25291ff2, #10170ff2); border: 1px solid #8e774a; box-shadow: inset 0 0 0 2px #12190f; text-align: left; font-family: "Trebuchet MS", sans-serif; }
  .roster-target:disabled { opacity: 1; cursor: default; }
  .roster-head { display: flex; align-items: center; gap: 7px; }
  .roster-head strong { font-size: 12px; }
  .roster-portrait { width: 35px; height: 39px; flex: 0 0 35px; border: 1px solid #8f7a4d; }
  .roster-health { width: 100%; position: relative; display: block; height: 17px; }
  .roster-health > span { display: block; height: 100%; }
  .roster-resolve { color: #a8c7c5; font-size: 10px; }
  .roster-intent { display: block; color: #e6c796; font-size: 10px; line-height: 1.35; }
  .roster-intent small { display: block; color: #d7cbb4; font-size: 10px; }
  .roster-target .status-row { justify-content: start; min-height: 0; margin: 0; }
  .roster-preview { display: flex; align-items: center; height: 38px; font-size: 10px; line-height: 1.25; color: #ffe2a0; overflow-y: auto; border-top: 1px solid #8b774955; }
  .roster-active { border-color: #efd58a; }
  .roster-selectable { cursor: crosshair; border-color: #f4d281; box-shadow: inset 0 0 0 2px #90733d; }
  .roster-selectable:hover, .roster-selectable:focus-visible { outline: 2px solid #ffe4a4; outline-offset: -2px; background: #45412bf5; }
  .roster-target.roster-fallen { opacity: .45; }
  .combat-side { position: relative; display: block; min-height: 0; direction: ltr; }
  .fighter { position: absolute; min-height: 0; width: 150px; height: 162px; justify-content: end; left: 45%; bottom: 340px; transform: translateX(-50%); }
  .fighter:nth-child(2) { left: 25%; bottom: 185px; }
  .fighter:nth-child(3) { left: 75%; bottom: 55px; }
  .fighter:nth-child(4) { left: 25%; bottom: 10px; }
  .enemy-side .fighter { left: 55%; }
  .enemy-side .fighter:nth-child(2) { left: 75%; }
  .enemy-side .fighter:nth-child(3) { left: 25%; }
  .enemy-side .fighter:nth-child(4) { left: 75%; }
  .fighter-details { display: none; }
  .fighter.targetable::before { top: -23px; }
  .fighter-stage::after { content: ""; position: absolute; left: 18%; right: 18%; top: 88%; height: 9%; border-radius: 50%; border: 1px solid transparent; pointer-events: none; }
  .fighter.taking-turn .fighter-stage::after { border-color: #e8d078; box-shadow: 0 0 9px #ffd16d55; }
  .fighter.targetable .fighter-stage::after { border-color: #fff0b8; }
  .battle-hud { grid-template-columns: 235px minmax(0, 1fr) 230px; }
  .ability-card { min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .fighter.targetable { animation: none; }
}

.stage-name { display: none; }
@media (min-width: 1100px) {
  .stage-name { display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #f2e0b6; background: #151b11bd; border-bottom: 1px solid #aa8a45; padding: 2px 6px; font: 10px "Trebuchet MS", sans-serif; }
}

/* Continuous travel and impact layers complement the authored sprite poses. */
.combat-projectile { position: absolute; z-index: 20; pointer-events: none; width: 11px; height: 9px; border-radius: 50%; background: #e5cf9e; border: 1px solid #483723; box-shadow: -5px 0 7px #d0b98780, 0 2px 3px #0008; }
.projectile-arrow { width: 24px; height: 4px; border-radius: 1px; background: #e4c994; }
.projectile-cast { width: 14px; height: 14px; background: #d8f6c6; border-color: #82b875; box-shadow: 0 0 14px #ccf5a5; }
.impact-burst { position: absolute; z-index: 5; inset: 28% 18%; pointer-events: none; border-radius: 50%; border: 3px solid #ffdc92; background: radial-gradient(ellipse, #fff3c466, transparent 65%); }
.support-burst { border-color: #b5e9ae; background: radial-gradient(ellipse, #c5efb955, transparent 65%); }
.fighter-stage { will-change: transform; }
.fighter.attacking, .fighter.casting { z-index: 8; }
.fighter .hp-bar > span, .fighter .enemy-hp > span, .roster-health > span { transition: width 160ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .fighter .hp-bar > span, .fighter .enemy-hp > span, .roster-health > span { transition: none; }
  .impact-burst { background: none; }
}

/* Doubled poses from the cached, motion-compensated atlas. */
.fighter-avatar.enhanced-frames { background-image: var(--enhanced-sheet); background-size: 1200% 400%; }
.fighter.attacking .fighter-avatar.enhanced-frames { animation-name: enhancedAttack; }
.fighter.casting .fighter-avatar.enhanced-frames { animation-name: enhancedCast; }
.fighter.hit .fighter-avatar.enhanced-frames { animation-name: enhancedHit; }
.fighter.newly-defeated .fighter-avatar.enhanced-frames { animation-name: enhancedDefeat; }
@keyframes enhancedAttack { 0.000000% { background-position: 0.000000% 33.333333%; } 8.333333% { background-position: 9.090909% 33.333333%; } 16.666667% { background-position: 18.181818% 33.333333%; } 25.000000% { background-position: 27.272727% 33.333333%; } 33.333333% { background-position: 36.363636% 33.333333%; } 41.666667% { background-position: 45.454545% 33.333333%; } 50.000000% { background-position: 54.545455% 33.333333%; } 58.333333% { background-position: 63.636364% 33.333333%; } 66.666667% { background-position: 72.727273% 33.333333%; } 75.000000% { background-position: 81.818182% 33.333333%; } 83.333333% { background-position: 90.909091% 33.333333%; } 91.666667% { background-position: 100.000000% 33.333333%; } 100% { background-position: 100.000000% 33.333333%; } }
@keyframes enhancedCast { 0.000000% { background-position: 0.000000% 66.666667%; } 8.333333% { background-position: 9.090909% 66.666667%; } 16.666667% { background-position: 18.181818% 66.666667%; } 25.000000% { background-position: 27.272727% 66.666667%; } 33.333333% { background-position: 36.363636% 66.666667%; } 41.666667% { background-position: 45.454545% 66.666667%; } 50.000000% { background-position: 54.545455% 66.666667%; } 58.333333% { background-position: 63.636364% 66.666667%; } 66.666667% { background-position: 72.727273% 66.666667%; } 75.000000% { background-position: 81.818182% 66.666667%; } 83.333333% { background-position: 90.909091% 66.666667%; } 91.666667% { background-position: 100.000000% 66.666667%; } 100% { background-position: 100.000000% 66.666667%; } }
@keyframes enhancedHit { 0.000000% { background-position: 0.000000% 100.000000%; } 16.666667% { background-position: 9.090909% 100.000000%; } 33.333333% { background-position: 18.181818% 100.000000%; } 50.000000% { background-position: 27.272727% 100.000000%; } 66.666667% { background-position: 36.363636% 100.000000%; } 83.333333% { background-position: 45.454545% 100.000000%; } 100% { background-position: 45.454545% 100.000000%; } }
@keyframes enhancedDefeat { 0.000000% { background-position: 54.545455% 100.000000%; } 16.666667% { background-position: 63.636364% 100.000000%; } 33.333333% { background-position: 72.727273% 100.000000%; } 50.000000% { background-position: 81.818182% 100.000000%; } 66.666667% { background-position: 90.909091% 100.000000%; } 83.333333% { background-position: 100.000000% 100.000000%; } 100% { background-position: 100.000000% 100.000000%; } }

.region-board { margin-top: 18px; padding: 14px; border-top: 1px solid #8d7748; }
.region-board h3 { color: #e8d099; margin: 0 0 8px; }
.region-board p, .region-board > small { font: 12px/1.5 "Trebuchet MS", sans-serif; color: #d3cbb6; }
.region-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block: 12px; }
.region-choice { display: grid; gap: 6px; text-align: left; padding: 12px; background: #172017; color: #f0dfb8; border: 1px solid #766641; cursor: pointer; }
.region-choice strong { font-size: 18px; }
.region-choice small, .region-choice span { font: 11px/1.4 "Trebuchet MS", sans-serif; }
.region-choice.chosen { border-color: #e3c476; box-shadow: inset 0 0 0 2px #766641; }
.region-choice:disabled { cursor: default; opacity: .6; }

#battle-view[data-region="canaan"] .battle-landscape { filter: saturate(.8) hue-rotate(8deg); }
@media(max-width: 600px) { .region-choices { grid-template-columns: 1fr; } }

/* Readable choices complement the connected map without revealing future nodes. */
.route-choices { padding: 16px; background: #161b1be8; border: 1px solid #8f775042; border-radius: 10px; margin: 12px 0; }
.route-choices h3, .run-upgrades h3 { margin: 0 0 8px; color: #e8cf98; }
.route-choices p, .run-upgrades p, .run-upgrades small { color: #bcb7a8; font-size: 13px; }
.route-choice-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 10px; }
.route-choice-grid button { padding: 14px; text-align: left; background: #252b29; border: 1px solid #9c855b; border-radius: 8px; color: #eee1c3; cursor:pointer; }
.route-choice-grid button:hover, .route-choice-grid button:focus-visible { background: #3a4135; outline: 2px solid #d8bd79; }
.route-choice-grid strong, .route-choice-grid small { display: block; }
.route-choice-grid small { margin-top: 8px; line-height: 1.45; color: #c6c0b2; }
.run-upgrades { padding: 12px 0; border-bottom: 1px solid #8f775042; margin-bottom: 12px; }

.route-choices { position: relative; z-index: 2; }
.encounter-panel { max-height: min(80vh, 850px); overflow-y: auto; }

/* Journey atlas: artwork sets the chapter; a quiet surface carries the decisions. */
#map-view .journey-layout { grid-template-columns: 238px minmax(0,1fr); gap: 18px; align-items: start; }
#map-view .run-summary { background: linear-gradient(155deg,#14252b,#0a151c); border-color: #35484c; border-radius: 14px; gap: 6px; }
#map-view .journey-vitals { display:block; margin-top:5px; color:#aabfc4; font:11px/1.5 "Trebuchet MS",sans-serif; }
#map-view .run-hero { grid-template-columns:44px minmax(0,1fr); }
#map-view .run-hero .hp-bar { grid-column:2; }
#map-view .map-panel { min-height:0; border:1px solid #475657; border-radius:16px; background:#0a161e; box-shadow:0 18px 60px #0005; }
#map-view .journey-banner { position:relative; overflow:hidden; min-height:155px; padding:28px 30px; display:flex; align-items:center; justify-content:space-between; gap:22px; border-bottom:1px solid #78816c60; }
#map-view .map-landscape { background-position:50% 38%; opacity:.55; }
#map-view .map-landscape::after { background:linear-gradient(90deg,#08151fe8,#0a182788 65%,#0a161ec9); }
#map-view .map-title { text-align:left; margin:0; }
#map-view .map-title h2 { font-size:clamp(27px,3vw,42px); margin:7px 0; }
#map-view .map-title p { font:12px/1.6 "Trebuchet MS",sans-serif; color:#c4d0cc; max-width:420px; }
#map-view .chapter-progress { position:relative; z-index:2; width:110px; flex-shrink:0; color:#ead9b2; font:11px "Trebuchet MS",sans-serif; letter-spacing:.12em; }
#map-view .chapter-progress>div { height:4px; background:#e9dab22b; margin-top:12px; }
#map-view .chapter-progress i { display:block; height:100%; background:#e8bd69; }
#map-view .journey-workspace { display:grid; grid-template-columns:minmax(290px,1fr) 280px; }
#map-view .route-atlas { min-width:0; background:radial-gradient(ellipse at 50% 70%,#1d3540 0%,#101f29 55%,#0b171f 100%); }
#map-view .atlas-heading { display:flex; justify-content:space-between; gap:12px; padding:22px 24px 0; font:10px "Trebuchet MS",sans-serif; letter-spacing:.15em; color:#97b0b9; }
#map-view .atlas-heading small { letter-spacing:0; color:#c7d4d4; }
#map-view .journey-map { width:calc(100% - 36px); height:590px; margin:0 18px; background:repeating-linear-gradient(to top,transparent 0,transparent 60px,#a7cbd006 61px,transparent 62px); }
#map-view .route-step { position:absolute; left:0; transform:translateY(-50%); color:#76929e; font:9px "Trebuchet MS",sans-serif; letter-spacing:.08em; pointer-events:none; }
#map-view .map-node { width:38px; height:38px; font-size:17px; border-width:1px; box-shadow:0 0 0 5px #10212b; background:#142a35; transition:background .15s,box-shadow .15s; }
#map-view .map-node.current { width:46px; height:46px; animation:none; border:2px solid #f1cb7f; box-shadow:0 0 0 5px #10212b,0 0 0 7px #d9b46544,0 0 23px #edbd5633; color:#fff0c8; }
#map-view .map-node.current::after { display:none; }
#map-view .map-node:hover:not(:disabled),#map-view .map-node:focus-visible { transform:translate(-50%,-50%); background:#365563; outline:2px solid #fff2c9; outline-offset:4px; }
#map-view .map-node:disabled { opacity:1; filter:none; }
#map-view .map-node.veiled { width:24px; height:24px; border:1px solid #738e9c; background:#122530; opacity:1; box-shadow:0 0 0 5px #10212b; }
#map-view .map-node.unreachable { border-color:#42545f; color:#546873; background:#10202a; opacity:.52; }
#map-view .map-node.completed { background:#665333; border-color:#d2ac65; color:#ffe5ad; }
#map-view .map-node.you-are-here { border:2px solid #fff2c7; box-shadow:0 0 0 5px #10212b,0 0 0 7px #d8b36d77; }
#map-view .node-letter { position:absolute; right:-10px; top:-9px; width:20px; height:20px; display:grid; place-items:center; border-radius:6px; background:#f0cc85; color:#17242b; font:bold 11px "Trebuchet MS",sans-serif; }
#map-view .here-marker { position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); color:#f8dea4; font:bold 8px "Trebuchet MS",sans-serif; letter-spacing:.14em; }
#map-view .node-connector { stroke:#708c9c; stroke-width:1.8; stroke-dasharray:5 5; opacity:.85; }
#map-view .node-connector.closed-path { stroke:#394d59; opacity:.45; }
#map-view .node-connector.next-path { stroke:#e5c585; stroke-width:3; stroke-dasharray:7 4; opacity:1; }
#map-view .node-connector.chosen { stroke:#f1c771; stroke-width:3.5; stroke-dasharray:none; opacity:1; filter:none; }
#map-view .map-legend { position:static; margin:0; padding:12px 16px 20px; gap:12px; font:10px "Trebuchet MS",sans-serif; color:#9eb3be; border-top:1px solid #48616e40; }
#map-view .legend-traveled,#map-view .legend-open { color:#e4c489; }
#map-view .route-choices { margin:0; padding:25px 20px; border:0; border-left:1px solid #3d536050; border-radius:0; background:#0c1922; }
#map-view .route-choices .eyebrow { font-size:9px; }
#map-view .route-choices h3 { margin:8px 0; font-size:25px; font-weight:normal; }
#map-view .route-choices>p { font:12px/1.6 "Trebuchet MS",sans-serif; color:#a3b5bf; }
#map-view .route-choice-grid { grid-template-columns:1fr; margin-top:20px; gap:14px; }
#map-view .route-choice-grid button { background:linear-gradient(120deg,#1d303b,#13232e); border:1px solid #52646b; padding:15px; border-radius:10px; }
#map-view .route-choice-grid button:hover,#map-view .route-choice-grid button:focus-visible { border-color:#ebc47b; background:#223b46; outline:1px solid #ebc47b; }
#map-view .choice-heading { display:flex; align-items:center; gap:8px; margin-bottom:10px; color:#b4c9d1; font:10px "Trebuchet MS",sans-serif; text-transform:uppercase; letter-spacing:.09em; }
#map-view .choice-heading b { width:23px; height:23px; display:grid; place-items:center; border:1px solid #d8bd81; border-radius:5px; color:#eed59d; }
#map-view .choice-heading>span:last-child { margin-left:auto; font-size:17px; }
#map-view .route-choice-grid strong { font-size:16px; line-height:1.3; }
#map-view .route-choice-grid small { font:11px/1.6 "Trebuchet MS",sans-serif; color:#b0c0c8; }
#map-view .inspect-path { display:block; margin-top:14px; color:#e5c88d; font:10px "Trebuchet MS",sans-serif; }
#map-view .route-guidance { margin-top:24px; border-top:1px solid #38505c; padding-top:18px; color:#98aeb9; font:11px/1.6 "Trebuchet MS",sans-serif; }
#map-view .route-guidance p { font:11px/1.6 "Trebuchet MS",sans-serif; color:#879fac; }
@media(max-width:1200px) { #map-view .journey-layout { grid-template-columns:190px minmax(0,1fr); } #map-view .journey-workspace { grid-template-columns:minmax(260px,1fr) 230px; } #map-view .route-choices { padding:22px 14px; } }
@media(max-width:960px) { #map-view .journey-layout { grid-template-columns:1fr; } #map-view .run-summary { order:2; } #map-view .journey-workspace { grid-template-columns:minmax(280px,1fr) 260px; } }
@media(max-width:620px) { #map-view .journey-workspace { grid-template-columns:1fr; } #map-view .journey-banner { padding:22px 18px; } #map-view .chapter-progress { width:72px; font-size:9px; } #map-view .journey-map { height:560px; } #map-view .route-choices { border-left:0; border-top:1px solid #3d5360; } #map-view .route-choice-grid { grid-template-columns:1fr; } }

/* Restore the landscape across the atlas, with local contrast for the route UI. */
#map-view .route-atlas {
  background-image: linear-gradient(180deg,rgba(5,16,23,.42),rgba(5,16,23,.22) 35%,rgba(5,16,23,.30) 75%,rgba(5,16,23,.62)),var(--region-map-art);
  background-size:cover;
  background-position:center;
}
#map-view .journey-map { background:none; }
#map-view .atlas-heading { color:#e5e7dc; text-shadow:0 2px 4px #000; }
#map-view .atlas-heading small { color:#f0ebda; }
#map-view .route-step { color:#e0e5df; text-shadow:0 1px 3px #000,0 0 5px #000; }
#map-view .map-legend { background:rgba(6,18,25,.85); color:#c5d5d9; }
#map-view .node-connector { stroke:#c2d4da; opacity:.95; filter:drop-shadow(0 1px 2px #02090e); }
#map-view .node-connector.closed-path { stroke:#7b969d; opacity:.5; }
#map-view .node-connector.next-path { stroke:#ffe2a2; opacity:1; filter:drop-shadow(0 1px 2px #02090e); }
#map-view .node-connector.chosen { stroke:#ffce6e; filter:drop-shadow(0 1px 2px #02090e); }
#map-view .map-landscape { opacity:.85; }
#map-view .map-landscape::after { background:linear-gradient(90deg,#08151fbf,#0a182738 65%,#0a161e88); }

.relic-party-hint { display:block; margin:12px 0; padding:10px; border-top:1px solid #9e875444; color:#d6bd87; font:12px/1.5 "Trebuchet MS",sans-serif; }
.reward-gold { display:block; margin:20px auto 0; min-height:44px; }
.reward-explanation { color:#adc0c7; font:12px/1.5 "Trebuchet MS",sans-serif; }

/* Regional node-map scenery. The title banner has its own surface. */
#map-view { --region-map-art: url("assets/art/wilderness-journey-map-v1.webp"); }
#map-view[data-region="canaan"] { --region-map-art: url("assets/art/canaan-journey-map-v1.webp"); }
#map-view[data-region="kingdom"] { --region-map-art: url("assets/art/kingdom-journey-map-v1.webp"); }
/* v0.15.3: quiet chapter banner, without a second cropped landscape. */
#map-view { --banner-tint: #4a3823; --banner-edge: #a38a58; }
#map-view[data-region="canaan"] { --banner-tint: #244437; --banner-edge: #8d9d70; }
#map-view[data-region="kingdom"] { --banner-tint: #39354e; --banner-edge: #a392b3; }
#map-view .journey-banner {
  min-height: 132px;
  border-bottom: 1px solid var(--banner-edge);
  box-shadow: inset 0 1px 0 #f3dbac12;
}
#map-view .map-landscape {
  background-image:
    repeating-linear-gradient(115deg, transparent 0, transparent 3px, #ffffff02 4px, transparent 5px),
    radial-gradient(ellipse at 72% 0%, var(--banner-tint), transparent 75%),
    linear-gradient(110deg, #101d22, #0b151c);
  background-size: auto;
  background-position: center;
  opacity: 1;
  filter: none;
}
#map-view .map-landscape::after {
  background: linear-gradient(180deg, #0000 65%, #030a102b);
}
#map-view .journey-banner .eyebrow { color: #e6c886; }
#map-view .chapter-progress { padding-left: 20px; border-left: 1px solid #e5d8b82e; }
@media (max-width: 620px) {
  #map-view .journey-banner { min-height: 124px; gap: 14px; }
  #map-view .chapter-progress { padding-left: 12px; }
}

/* v0.16.2: readable live ability values and deliberate group actions. */
.effective-ability { display:block; margin-top:7px; color:#f0d49a; font:11px/1.5 "Trebuchet MS",sans-serif; }
.battle-save-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:8px 16px; border-bottom:1px solid #8d774444; background:#08161d; }
.battle-save-controls small { color:#bed4c7; font:11px/1.5 "Trebuchet MS",sans-serif; }
.battle-save-controls button { margin:0; font-size:12px; padding:8px 12px; }
.group-preview { margin-top:12px; padding:12px; border:1px solid #a89059; background:#071820; font:12px/1.5 "Trebuchet MS",sans-serif; }
.group-preview>strong { color:#f0d49a; }
.group-preview ul { list-style:none; padding:0; margin:10px 0; }
.group-preview li { display:grid; gap:2px; padding:6px 0; border-bottom:1px solid #8d774433; }
.group-preview li span { color:#c9dcd7; }
.group-preview button { width:100%; min-height:42px; white-space:normal; }

/* v0.16.3: readable journey records and build review. */
.journey-record-details,.summary-next,.active-build { margin:18px 0; padding:16px; text-align:left; border:1px solid #91784c66; background:#0b1920; font:13px/1.65 "Trebuchet MS",sans-serif; }
.journey-record-details p { margin:8px 0; }
.new-unlocks { color:#bfe1a7; }
.journal-entry { padding:18px 0; border-bottom:1px solid #91784c66; }
.journal-entry h3,.summary-next h3,.active-build h3 { color:#edd59f; }
.journal-entry p { font:13px/1.6 "Trebuchet MS",sans-serif; }
.journal-entry summary,.journey-record-details summary { cursor:pointer; color:#edd59f; padding:8px 0; }
.journey-record-details li { margin:8px 0; }
.summary-next button { margin-right:10px; }

/* 0.19: quiet surfaces, optional depth, clear decisions. */
.quiet-details { margin:16px 0; border:1px solid #d8bc7e30; border-radius:12px; background:#08151d66; padding:12px 15px; }
.quiet-details > summary { cursor:pointer; color:#e8d8b4; font-size:13px; font-weight:600; }
.quiet-details[open] > summary { margin-bottom:14px; }
.quiet-details p { line-height:1.65; }
.run-summary > .quiet-details { margin:12px 0; padding:12px; }
.run-summary > .quiet-details > summary { font-size:12px; }
.library-grid { align-items:start; }
.library-entry summary { cursor:pointer; padding:4px 0; }
.library-entry summary strong { display:block; margin:9px 0 0; font:22px Georgia,serif; color:#f3e6c9; }
.library-entry[open] { border-color:#d4b06a88; }
.library-entry p { line-height:1.8; margin-top:18px; }
.resolve-rule { margin:0 0 8px; font-size:12px; color:#d5c7a9; line-height:1.5; }
.game-modal .modal-heading { margin-bottom:24px; }
.game-modal .modal-heading h2 { margin-bottom:8px; }
.game-modal .modal-heading p { max-width:54ch; }
.game-modal .roster-grid { gap:18px; }
#map-view .route-choice-grid small { font-size:12px; }
#map-view .route-choices > p { font-size:12px; color:#bcc9cd; }
#map-view .route-choices .quiet-details { margin-top:22px; }
#map-view .run-summary > .quiet-button { width:100%; margin-top:8px; }
summary:focus-visible { outline:2px solid #eac684; outline-offset:5px; border-radius:3px; }
@media(max-width:620px) { .resolve-rule { font-size:11px; } .library-grid { grid-template-columns:1fr; } }

/* Route inspection: the decision first, deeper explanation on demand. */
.route-inspection .encounter-panel { max-width:700px; width:min(700px,100%); }
.route-preview { display:grid; gap:18px; margin:22px 0; }
.route-preview h3 { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin:0 0 12px; font-size:15px; }
.route-preview h3 small { font:12px/1.5 sans-serif; color:#b9c8cc; }
.preview-reward { display:grid; gap:6px; border-left:3px solid #dbb878; background:#d4b06a12; padding:13px 16px; }
.preview-reward > span { color:#c8c0ae; font-size:11px; text-transform:uppercase; letter-spacing:1.5px; }
.preview-reward strong { font-size:15px; color:#f1d79d; }
.preview-enemy-list { display:flex; flex-wrap:wrap; gap:8px; }
.preview-enemy-list > span { display:grid; gap:5px; padding:10px 14px; background:#ffffff06; border:1px solid #ffffff20; border-radius:10px; }
.preview-enemy-list strong { font-size:13px; }
.preview-enemy-list small { color:#c4c5ba; font-size:12px; }
.preview-party-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.preview-member { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #ffffff15; border-radius:12px; background:#07141b66; }
.preview-member > div { min-width:0; flex:1; }
.preview-member strong,.preview-member small { display:block; }
.preview-member strong { font-size:14px; }
.preview-member small { margin:5px 0 7px; font-size:11px; color:#bec8c6; }
.preview-member .portrait-symbol { flex:0 0 42px; width:42px; height:42px; }
.preview-member.fallen .portrait-symbol { filter:grayscale(1); opacity:.6; }
.preview-readiness { color:#efbb92; margin:10px 0 0; font-size:12px; }
.route-preview > .quiet-details { margin:0; }
.preview-commit { color:#b7c2c5; font-size:12px; margin:0; }
.route-inspection .encounter-actions { display:grid; grid-template-columns:1.4fr 1fr; gap:12px; }
.route-inspection [data-action="enter"] { background:#d8b777; color:#16201b; border-color:#e4c98f; }
.route-inspection .encounter-choice small:empty { display:none; }
@media(max-width:520px) { .preview-party-list { grid-template-columns:1fr; } .route-inspection .encounter-actions { grid-template-columns:1fr; } }

/* Camp decisions: compact summaries with optional detail. */
.departure-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.departure-summary > span { padding:12px; background:rgba(0,0,0,.25); border-left:2px solid var(--gold); color:var(--muted); font:12px/1.5 "Trebuchet MS",sans-serif; }
.departure-summary strong { display:block; color:var(--cream); font-size:15px; }
.region-board .setup-note, .setup-note { color:var(--muted); font:12px/1.5 "Trebuchet MS",sans-serif; }
.game-modal .roster-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.roster-card { display:flex; flex-direction:column; }
.roster-card .roster-actions { margin-top:auto; padding-top:12px; }
.companion-role { min-height:36px; margin:12px 0; color:var(--gold-bright); font:12px/1.5 "Trebuchet MS",sans-serif; }
.companion-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:12px 0; border-block:1px solid rgba(228,184,92,.2); }
.companion-stats span { font:10px/1.5 "Trebuchet MS",sans-serif; color:var(--muted); }
.companion-stats strong { color:var(--cream); font-size:19px; }
.companion-details { text-align:left; margin:12px 0; }
.comparison-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; font:12px "Trebuchet MS",sans-serif; }
.companion-skill { padding:12px 0; border-top:1px solid rgba(228,184,92,.15); }
.companion-skill strong { font-size:14px; }
.companion-skill strong small { margin-top:4px; color:var(--gold-bright); }
.companion-skill p, .lesson-panel p { margin:6px 0; font:12px/1.5 "Trebuchet MS",sans-serif; }
.roster-card .lesson-panel { min-height:0; margin-bottom:12px; }
.roster-card .lesson-panel small { font-size:12px; min-height:0; }
.roster-card .roster-actions button { font-size:12px; min-height:44px; }
.training-balance { text-align:center; padding:12px; margin-bottom:16px; color:var(--gold-bright); background:rgba(0,0,0,.25); }
.progression-card .upgrade-preview { margin:10px 0; color:#d7efdf; font-size:15px; }
.progression-card small { color:var(--muted); font:12px "Trebuchet MS",sans-serif; }
.progression-card .quiet-details { margin-top:12px; }
@media(max-width:460px) { .departure-summary { grid-template-columns:1fr; } }

/* Battle clarity: details on demand, costs visible before committing. */
.battle-action-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px; font:13px "Trebuchet MS",sans-serif; color:var(--gold-bright); }
.battle-action-heading small { color:var(--muted); font-size:10px; margin-left:5px; }
.battle-action-heading button { color:var(--cream); background:#17231e; border:1px solid #806b42; padding:8px 10px; cursor:pointer; font:12px "Trebuchet MS",sans-serif; }
.battle-action-heading button:focus-visible { outline:2px solid var(--gold-bright); outline-offset:3px; }
.skill-availability { display:block; margin:10px 0 6px; color:#ead29c; font:12px/1.4 "Trebuchet MS",sans-serif; }
.ability-card:disabled .skill-availability { color:#fff; }
.action-review { display:grid; gap:6px; margin:10px 0; padding:10px; border-left:2px solid var(--gold-bright); background:rgba(0,0,0,.25); font:12px/1.5 "Trebuchet MS",sans-serif; }
.action-review strong { color:var(--gold-bright); }
.action-review small { color:#cbd5ca; font-size:11px; }
.basic-actions .action-button { white-space:normal; }

/* Rewards: one effect per choice, supporting detail on demand. */
.victory-payout { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 20px; margin:16px 0; color:var(--gold-bright); font:16px "Trebuchet MS",sans-serif; }
.victory-payout small { flex-basis:100%; color:var(--muted); font-size:11px; }
.reward-option { display:flex; flex-direction:column; min-width:0; }
.reward-option .reward-card { flex:1; width:100%; }
.reward-fit { padding:10px; text-align:left; color:#cad2c9; font:12px/1.5 "Trebuchet MS",sans-serif; }
.reward-fit summary { cursor:pointer; color:var(--gold-bright); }
.reward-fit p { font:12px/1.5 "Trebuchet MS",sans-serif; }
.reward-notes { margin-top:12px; border-top:1px solid #806b4266; }
.reward-alternatives button small { display:block; margin-top:6px; }

/* Caravan service review: show only companions whose stats change. */
.caravan-preview { display:grid; gap:8px; margin:18px 0; }
.caravan-preview > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:10px 12px; background:rgba(0,0,0,.24); border-left:2px solid var(--gold); font:14px/1.5 "Trebuchet MS",sans-serif; }
.caravan-preview span { color:#d7efdf; }

/* 0.20.7: Scripture stays central; supporting details open on demand. */
.encounter-overlay.witness .encounter-panel { width:min(760px,100%); padding:24px; }
.encounter-overlay.witness .encounter-panel h2 { font-size:clamp(25px,3vw,34px); }
.encounter-overlay.witness blockquote { margin:14px auto; padding:14px 18px; font-size:clamp(19px,2.5vw,25px); }
.encounter-overlay.witness .encounter-panel > p { margin-bottom:10px; }
.witness-discovery { margin:0 0 12px; color:#a7dce2; font:12px/1.5 "Trebuchet MS",sans-serif; }
.encounter-overlay.witness .quiet-details { margin:8px 0; padding:10px 12px; text-align:left; }
.encounter-overlay.witness .quiet-details p { color:#c5cac7; font:12px/1.6 "Trebuchet MS",sans-serif; }
.encounter-overlay.witness .encounter-actions { margin-top:16px; grid-template-columns:repeat(6,minmax(0,1fr)); }
.encounter-overlay.witness .encounter-choice { grid-column:span 2; min-height:76px; padding:12px 8px; }
.encounter-overlay.witness .encounter-choice:nth-child(-n+2) { grid-column:span 3; }
.encounter-overlay.witness .encounter-choice:focus-visible,
.encounter-overlay.witness summary:focus-visible { outline:2px solid #fff1c8; outline-offset:3px; }
@media(max-width:560px) {
  .encounter-overlay.witness .encounter-panel { padding:18px 14px; }
  .encounter-overlay.witness .encounter-actions { grid-template-columns:1fr; gap:8px; }
  .encounter-overlay.witness .encounter-choice,
  .encounter-overlay.witness .encounter-choice:nth-child(-n+2) { grid-column:auto; min-height:64px; }
}

/* 0.20.8: concise roadside event choices with explicit costs and gains. */
.encounter-overlay.event .encounter-panel { width:min(760px,100%); padding:24px; }
.encounter-overlay.event .encounter-panel h2 { font-size:clamp(25px,3vw,34px); }
.encounter-overlay.event .encounter-panel > p { margin-bottom:14px; }
.event-choice-note { color:#d9c795; font:12px/1.5 "Trebuchet MS",sans-serif; }
.encounter-overlay.event .quiet-details { margin:12px 0; padding:10px 12px; text-align:left; }
.encounter-overlay.event .quiet-details p { color:#c5cac7; font:12px/1.6 "Trebuchet MS",sans-serif; }
.encounter-overlay.event .encounter-actions { grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); margin-top:16px; }
.encounter-overlay.event .encounter-choice { min-height:108px; padding:14px 10px; }
.event-effects { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.event-effect { padding:4px 7px; border-radius:5px; border:1px solid #83b8a33d; background:#0b211e; line-height:1.4; }
.event-gain { color:#b7e8c5; }
.event-cost { color:#ffcab9; background:#342019; border-color:#d395794d; }
.event-shortfall { display:block; margin-top:8px; color:#ffcab9; }
.encounter-overlay.event .encounter-choice:disabled { opacity:.65; }
.encounter-overlay.event .encounter-choice:focus-visible,
.encounter-overlay.event summary:focus-visible { outline:2px solid #fff1c8; outline-offset:3px; }
@media(max-width:560px) {
  .encounter-overlay.event .encounter-panel { padding:18px 14px; }
  .encounter-overlay.event .encounter-actions { grid-template-columns:1fr; gap:8px; }
  .encounter-overlay.event .encounter-choice { min-height:78px; }
}

/* 0.20.9: journey results lead with progress, earnings and new companions. */
.journey-summary .summary-seal { width:52px; height:52px; font-size:26px; margin-bottom:8px; }
.journey-summary h2 { font-size:clamp(28px,4vw,38px); }
.journey-summary > p { margin-bottom:16px; }
.summary-grid.summary-highlights { grid-template-columns:repeat(2,minmax(0,1fr)); }
.journey-summary .summary-rewards { margin:12px 0; }
.journey-summary > .quiet-details { text-align:left; margin:10px 0; padding:10px 12px; }
.journey-summary .journey-record-details { margin:12px 0 0; padding:0; border:0; background:none; }
.journey-stat-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; margin:12px 0; font:12px/1.5 "Trebuchet MS",sans-serif; }
.journey-stat-list > div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #91784c33; padding:7px 0; }
.journey-stat-list dt { color:#bcc8c9; }
.journey-stat-list dd { margin:0; color:#f6dfaa; font-weight:bold; }
.journey-unlocks { padding:10px 12px; color:#b7e8c5; background:#15302b; border:1px solid #83b8a344; border-radius:8px; }
.journey-unlocks strong,.journey-unlocks span { display:block; }
.journey-unlocks strong { font-size:11px; margin-bottom:4px; }
.summary-shortcuts { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:12px 0 16px; }
.summary-shortcuts .quiet-button { margin:0; }
.journal-entry .journal-earnings { color:#edd59f; }
@media(max-width:480px) { .journey-stat-list { grid-template-columns:1fr; } }

/* 0.20.10: compact camp purchases and visible supply inventory. */
.camp-purchase-notice { margin:12px 0 18px; padding:10px 12px; color:#dfcda5; background:#e4b85c0d; border-left:2px solid #91784c; font:12px/1.5 "Trebuchet MS",sans-serif; }
.progression-card .rank-pips { margin-top:10px; }
.store-card .supply-effect { margin:8px 0; color:#d7efdf; font-size:14px; }
.supply-stock { display:block; color:#bac7cb; font:12px/1.5 "Trebuchet MS",sans-serif; }
.progression-card button:focus-visible,.store-card button:focus-visible { outline:2px solid #fff1c8; outline-offset:3px; }

/* 0.20.11: a compact build overview and expandable relic descriptions. */
.compact-build { margin:16px 0; padding:16px; }
.compact-build h3 { margin:0 0 6px; }
.compact-build > p { margin:0 0 14px; }
.build-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.build-stat-grid > div { padding:10px 6px; text-align:center; background:#06111688; border:1px solid #91784c44; border-radius:6px; }
.build-stat-grid strong,.build-stat-grid span { display:block; }
.build-stat-grid strong { color:#d7efdf; font-size:22px; }
.build-stat-grid span { color:#bfcace; font-size:10px; line-height:1.4; }
.compact-build .quiet-details { margin:10px 0 0; padding:10px 12px; }
.compact-relics { display:grid; grid-template-columns:1fr; gap:8px; }
.relic-entry { padding:0 14px; background:#0a1920; border:1px solid #91784c55; border-radius:8px; }
.relic-entry > summary { padding:12px 0; cursor:pointer; color:#edd59f; font:14px/1.4 "Trebuchet MS",sans-serif; overflow-wrap:anywhere; }
.relic-entry > p { margin:0 0 14px; color:#c5cfce; font:12px/1.6 "Trebuchet MS",sans-serif; }
.relic-entry > summary:focus-visible { outline:2px solid #fff1c8; outline-offset:3px; }
.relic-codex > .compact-relics { margin-top:12px; }
@media(max-width:560px) { .build-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* 0.20.12: compact map status, with encounter resume outside details. */
.run-hero.fallen { opacity:.6; }
.run-hero.fallen .journey-vitals { color:#ffbaa4; }
.journey-guard { display:block; margin-top:4px; color:#a8d7ed; font:11px/1.4 "Trebuchet MS",sans-serif; }
#run-resume:empty { display:none; }
#run-resume .quiet-button { width:100%; margin:8px 0 0; border-color:#c6a664; color:#f5dfa8; }
.map-blessings { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.map-blessings span { padding:4px 7px; border:1px solid #91784c55; border-radius:5px; color:#e8d8b4; font:11px/1.4 "Trebuchet MS",sans-serif; }
.map-relic,.map-practice { border:1px solid #91784c44; border-radius:6px; padding:8px 10px; }
.map-practice { margin-top:12px; }
.map-relic summary,.map-practice summary { cursor:pointer; color:#e8d8b4; font:12px/1.5 "Trebuchet MS",sans-serif; overflow-wrap:anywhere; }
.map-relic p { margin:8px 0 0; color:#bcc8c9; font:11px/1.5 "Trebuchet MS",sans-serif; }

/* 0.20.13: concise region-clear choices and optional exact recovery preview. */
.encounter-overlay.region-exit .encounter-panel { width:min(760px,100%); padding:24px; border-color:#8cce9a; }
.encounter-overlay.region-exit .encounter-panel h2 { font-size:clamp(25px,3vw,34px); }
.encounter-overlay.region-exit .encounter-panel > p { margin-bottom:12px; }
.region-clear-note { color:#b7e8c5; font:12px/1.5 "Trebuchet MS",sans-serif; margin-bottom:14px; }
.encounter-overlay.region-exit .quiet-details { margin:10px 0; padding:10px 12px; text-align:left; }
.encounter-overlay.region-exit .quiet-details p { color:#c5cac7; font:12px/1.6 "Trebuchet MS",sans-serif; }
.region-recovery-list > div { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid #91784c44; font:12px/1.5 "Trebuchet MS",sans-serif; }
.region-recovery-list span { color:#b7e8c5; }
.region-recovery-list .revival-tag { display:block; font-size:10px; }
.encounter-overlay.region-exit .encounter-actions { margin-top:16px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.encounter-overlay.region-exit .encounter-choice { min-height:84px; }
.encounter-overlay.region-exit summary:focus-visible,.encounter-overlay.region-exit button:focus-visible { outline:2px solid #fff1c8; outline-offset:3px; }
@media(max-width:560px) {
  .encounter-overlay.region-exit .encounter-panel { padding:18px 14px; }
  .encounter-overlay.region-exit .encounter-actions { grid-template-columns:1fr; }
  .region-recovery-list > div { grid-template-columns:1fr 1fr; }
  .region-recovery-list strong { grid-column:1/-1; }
}

/* 0.20.14: show the tradeoffs before swapping a companion. */
.companion-swap .encounter-panel { width:min(800px,100%); padding:24px; }
.companion-swap .encounter-panel h2 { font-size:clamp(25px,3vw,34px); }
.companion-swap .encounter-panel > p { margin-bottom:14px; }
.incoming-companion { display:flex; gap:14px; align-items:center; padding:14px; margin:0 0 12px; background:#ad7bde12; border:1px solid #ad7bde55; border-radius:8px; text-align:left; }
.incoming-companion .portrait-symbol { flex-shrink:0; }
.incoming-companion strong { color:#eddbff; font-size:18px; }
.incoming-companion p { margin:5px 0; color:#d4cadf; font:12px/1.5 "Trebuchet MS",sans-serif; }
.incoming-companion small { color:#b8dbd0; font:12px/1.5 "Trebuchet MS",sans-serif; }
.companion-swap .quiet-details { text-align:left; margin:8px 0; padding:10px 12px; }
.companion-swap .quiet-details p { font:12px/1.6 "Trebuchet MS",sans-serif; color:#c5cac7; }
.companion-swap .encounter-actions { margin-top:16px; }
.swap-role,.swap-vitals { display:block; margin-top:6px; }
.swap-changes { display:flex; justify-content:center; flex-wrap:wrap; gap:5px; margin-top:8px; }
.swap-changes:empty { display:none; }
.swap-change { padding:3px 6px; border:1px solid #83b8a344; border-radius:4px; }
.swap-gain { color:#b7e8c5; background:#15302b; }
.swap-loss { color:#ffcab9; background:#342019; border-color:#d395794d; }
.companion-swap summary:focus-visible,.companion-swap button:focus-visible { outline:2px solid #fff1c8; outline-offset:3px; }
@media(max-width:560px) { .companion-swap .encounter-panel { padding:18px 14px; } .companion-swap .encounter-actions { grid-template-columns:1fr; } }

/* 0.20.15: one compact action prompt with target count and cost. */
.compact-target-prompt > strong { color:#ffe2a4; }
.action-cost-preview { margin:6px 0; color:#b9dce8; font:11px/1.5 "Trebuchet MS",sans-serif; }
.compact-target-prompt > p { margin:6px 0 10px; color:#e1e8e5; font:12px/1.5 "Trebuchet MS",sans-serif; }
.target-action-note { margin:8px 0; color:#d8cfbb; font:11px/1.4 "Trebuchet MS",sans-serif; }
.action-help { margin:10px 0; padding:8px 10px; border:1px solid #91784c44; border-radius:6px; font:11px/1.5 "Trebuchet MS",sans-serif; }
.action-help summary { cursor:pointer; color:#e8d8b4; }
.action-help p { color:#c5cac7; margin:8px 0; }
.action-help summary:focus-visible { outline:2px solid #fff1c8; outline-offset:3px; }
.compact-target-prompt { grid-template-rows:auto; gap:4px; }
.compact-target-prompt > strong { font-size:14px; }

/* 0.20.16: status chips show key numbers; rules expand on demand. */
.status-compact-panel { justify-content:flex-start; gap:5px; margin-top:10px; }
.status-compact-panel .status-icon { padding:5px 7px; }
.status-help { margin:8px 0; padding:8px 10px; border:1px solid #91784c44; border-radius:6px; font:11px/1.5 "Trebuchet MS",sans-serif; }
.status-help summary { cursor:pointer; color:#e8d8b4; }
.status-help p { margin:10px 0; color:#c5cac7; }
.status-help strong { color:#efdfbd; }
.status-help summary:focus-visible { outline:2px solid #fff1c8; outline-offset:3px; }

/* 0.20.17: save tools are grouped, and installed frontend patch is explicit. */
.settings-patch { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; margin-top:16px; border-top:1px solid #91784c44; font:12px/1.5 "Trebuchet MS",sans-serif; color:#bcc8c9; }
.settings-patch strong { color:#edd59f; }
.settings-reset > summary { color:#f0b9aa; }
.settings-reset p { font:12px/1.6 "Trebuchet MS",sans-serif; color:#c5cac7; }
.settings-reset small { display:block; margin-top:8px; color:#c5cac7; }
.settings-backup .ledger-recovery { border:0; padding:0; margin:12px 0 0; background:none; }
.settings-backup .ledger-recovery h3 { display:none; }
.settings-backup input[type="file"] { max-width:100%; }

/* 0.20.18: keyboard selection uses the same battle buttons and guards. */
.battle-shortcuts { margin:8px 0 4px; color:#b6c8cb; font:10px/1.5 "Trebuchet MS",sans-serif; }
.battle-shortcuts kbd,.skill-shortcut { display:inline-block; padding:1px 4px; border:1px solid #91784c66; border-radius:3px; background:#07131a; color:#efdfbd; font:10px/1.4 "Trebuchet MS",sans-serif; }
.skill-shortcut { vertical-align:middle; }
@media(pointer:coarse) { .battle-shortcuts,.skill-shortcut { display:none; } }

/* 0.20.19: optional quieter impact effects, with combat timing preserved. */
.battle-effects-setting { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; padding:14px; background:#0b1920; border:1px solid #91784c55; border-radius:8px; cursor:pointer; }
.battle-effects-setting strong,.battle-effects-setting small { display:block; }
.battle-effects-setting strong { color:#edd59f; font:14px/1.5 "Trebuchet MS",sans-serif; }
.battle-effects-setting small { margin-top:4px; color:#bcc8c9; font:12px/1.5 "Trebuchet MS",sans-serif; }
.battle-effects-setting input { width:20px; height:20px; flex-shrink:0; accent-color:#d8bc7e; }
.battle-effects-setting input:focus-visible { outline:2px solid #fff1c8; outline-offset:3px; }
#battle-view.reduced-battle-effects .impact-burst { display:none; }
#battle-view.reduced-battle-effects .damage-number { text-shadow:0 2px 2px #250305; }

/* 0.20.20: search unlocked Library records without losing reading state. */
.library-search-label { display:block; margin:16px 0 7px; color:#e8d8b4; font:12px/1.5 "Trebuchet MS",sans-serif; }
.library-search-controls { display:flex; gap:8px; align-items:stretch; }
.library-search-controls input { flex:1; min-width:0; padding:11px 12px; color:#f2e9d4; background:#07151c; border:1px solid #91784c88; border-radius:6px; font:14px "Trebuchet MS",sans-serif; }
.library-search-controls .quiet-button { margin:0; }
.library-search-controls input:focus-visible { outline:2px solid #e8cf98; outline-offset:2px; }
.library-result-count { color:#aebfc4; font:11px/1.5 "Trebuchet MS",sans-serif; margin:9px 0 14px; }
.library-entry[hidden],.library-empty[hidden] { display:none; }
.library-empty { padding:18px; color:#d5c6a8; border:1px dashed #91784c66; font:13px/1.6 "Trebuchet MS",sans-serif; }

/* 0.20.21: companion status and role filters. */
.hall-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.hall-filters label { color:#e8d8b4; font:12px/1.5 "Trebuchet MS",sans-serif; }
.hall-filters select { display:block; width:100%; margin-top:6px; padding:10px; border:1px solid #91784c88; border-radius:6px; background:#07151c; color:#f2e9d4; font:13px "Trebuchet MS",sans-serif; }
.hall-filters select:focus-visible { outline:2px solid #e8cf98; outline-offset:2px; }
.roster-card[hidden] { display:none; }
@media(max-width:420px) { .hall-filters { grid-template-columns:1fr; } }

/* 0.20.22: readable history beyond the nine-line battle sidebar. */
#battle-history { width:100%; margin-top:10px; padding:8px; font-size:11px; }
#battle-history:disabled { opacity:.5; cursor:not-allowed; }
.battle-history-list { display:grid; gap:4px; border:1px solid #91784c55; border-radius:8px; padding:12px; background:#08151c; }
.battle-history-list .log-line { padding:8px; font:13px/1.6 "Trebuchet MS",sans-serif; overflow-wrap:anywhere; border-bottom:1px solid #91784c22; }
#battle-history:focus-visible { outline:2px solid #fff1c8; outline-offset:3px; }

/* 0.20.23: saved battle preferences. */
.battle-preferences { margin-top:18px; }
.battle-preferences h3 { color:#edd59f; margin:0 0 6px; }
.battle-preferences .battle-effects-setting { margin-top:10px; }
.battle-preferences .settings-row .quiet-button { margin:0; }
.battle-shortcuts-off .battle-shortcuts,.battle-shortcuts-off .skill-shortcut { display:none; }

/* 0.20.24 — Scripture readings */
.encounter-overlay.witness { position:fixed; z-index:60; padding:20px; }
.encounter-overlay.witness .encounter-panel { max-height:calc(100dvh - 40px); overscroll-behavior:contain; }
.witness-reading-content { text-align:left; }
.witness-meta { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px; color:#b8dce0; font:12px/1.5 "Trebuchet MS",sans-serif; }
.witness-meta span { border:1px solid #416572; border-radius:4px; padding:4px 8px; }
.witness-reading-content h3 { margin:16px 0 7px; font:600 14px/1.5 "Trebuchet MS",sans-serif; color:#ead19a; }
.witness-reading-content p { margin:0 0 12px; color:#e2e5dd; font:15px/1.65 "Trebuchet MS",sans-serif; }
.witness-passage { margin:18px 0; }
.witness-passage figcaption { text-align:right; color:#c9d5d5; font:12px/1.5 "Trebuchet MS",sans-serif; }
.witness-source { display:inline-block; margin:10px 0; padding:5px 0; color:#aee9f2; text-decoration:underline; text-underline-offset:3px; font:14px/1.6 "Trebuchet MS",sans-serif; }
.witness-source span { display:block; color:#c1cbcd; font-size:11px; }
.witness-reading-content .quiet-details { padding:12px; margin:12px 0; border:1px solid #42616a; background:rgba(0,0,0,.12); }
.witness-reading-content summary { cursor:pointer; color:#eee4ce; font:14px/1.5 "Trebuchet MS",sans-serif; }
.witness-reading-content .quiet-details p { margin:12px 0 6px; font-size:14px; }
.witness-reflection small { color:#c1cbcd; font:12px/1.6 "Trebuchet MS",sans-serif; }
.witness-reading-content p.witness-caption { font-size:11px; line-height:1.6; color:#b6c6c8; margin:16px 0 0; }
.encounter-overlay.witness-reading .encounter-actions { display:block; }
.encounter-overlay.witness-reading .encounter-choice { width:100%; min-height:66px; }
.encounter-overlay.witness-benefits .encounter-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.encounter-overlay.witness-benefits .encounter-choice,
.encounter-overlay.witness-benefits .encounter-choice:nth-child(-n+2) { grid-column:auto; }
.encounter-overlay.witness-benefits [data-action="read-again"] { grid-column:1/-1; min-height:58px; background:transparent; }
.witness-reading-content a:focus-visible,.witness-reading-content summary:focus-visible { outline:2px solid #fff1c8; outline-offset:4px; }
.story-card .witness-reading-content { padding:4px 0; }
.story-card .witness-passage blockquote { margin:12px 0; padding:14px; border-left:3px solid var(--gold); background:rgba(228,184,92,.08); color:#fff1c8; font-size:19px; line-height:1.5; }
@media(max-width:560px) {
  .encounter-overlay.witness { padding:10px; }
  .encounter-overlay.witness .encounter-panel { max-height:calc(100dvh - 20px); }
  .encounter-overlay.witness-benefits .encounter-actions { grid-template-columns:1fr; }
  .witness-reading-content p { font-size:14px; }
}

/* 0.20.25 — connected Scripture collections */
.reading-collections { margin:22px 0 28px; }
.reading-collections > h3 { color:var(--gold-bright); font-size:22px; margin-bottom:6px; }
.collection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.collection-card { padding:20px; border:1px solid #42616a; background:linear-gradient(135deg,#182f36,#0b1d25); }
.collection-card.collection-featured { grid-column:1/-1; border-color:#bb9b5c; background:linear-gradient(120deg,#263c40,#101f28); }
.collection-card h4 { color:#f0d69c; font-size:25px; font-weight:500; margin:8px 0; }
.collection-card p { color:#d5dedc; font:14px/1.65 "Trebuchet MS",sans-serif; }
.collection-card .quiet-button { display:block; width:100%; margin-top:15px; min-height:44px; }
.collection-progress { display:block; color:#b8dce0; font:12px/1.6 "Trebuchet MS",sans-serif; margin:10px 0; }
.collection-bookmark { display:block; color:#c4d0cf; margin-top:10px; font:12px/1.5 "Trebuchet MS",sans-serif; }
.collection-hint { color:#e9d5a6; border-bottom:1px solid #49636a; padding-bottom:12px; font:14px/1.6 "Trebuchet MS",sans-serif; }
.collection-hint small { color:#bfd0d0; font-size:12px; }
.collection-timeline { margin-top:16px; }
.collection-timeline ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 28px; padding-left:22px; }
.collection-timeline li strong,.collection-timeline li span { display:block; }
.collection-timeline li strong { color:#e8d09a; margin-bottom:5px; }
.collection-timeline li span,.collection-timeline p { font:13px/1.6 "Trebuchet MS",sans-serif; color:#c8d4d3; }
.collection-reader { max-width:760px; margin:auto; }
.collection-reader .modal-heading { margin-top:20px; }
.collection-reader .witness-passage blockquote { margin:12px 0; padding:18px; border-left:3px solid var(--gold); background:rgba(228,184,92,.08); color:#fff1c8; font-size:23px; line-height:1.5; }
.collection-navigation { display:grid; grid-template-columns:1fr 1.5fr; gap:12px; margin:24px 0; }
.collection-navigation button { min-height:50px; white-space:normal; line-height:1.5; }
.collection-end { align-self:center; font:13px/1.6 "Trebuchet MS",sans-serif; color:#c8d4d3; }
.collection-chapters ol { list-style:none; padding:0; display:grid; gap:8px; }
.collection-chapters button { width:100%; text-align:left; padding:12px; }
.collection-chapters button small { display:block; color:#bbcdcf; margin-top:6px; font:12px/1.5 "Trebuchet MS",sans-serif; }
.collection-chapters button[aria-current] { border-color:var(--gold-bright); background:#253f43; }
.collection-reader button:focus-visible,.collection-card button:focus-visible,.collection-reader summary:focus-visible { outline:2px solid #fff1c8; outline-offset:3px; }
@media(max-width:620px) {
 .collection-grid,.collection-navigation,.collection-timeline ol { grid-template-columns:1fr; }
 .collection-card { padding:16px; }
 .collection-reader .witness-passage blockquote { font-size:20px; }
}

/* 0.20.26 — journey skill specializations */
.skill-specialization .encounter-panel { width:min(800px,100%); }
.skill-specialization .encounter-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.skill-specialization .encounter-choice { padding:15px; min-height:108px; }
.skill-specialization .encounter-choice small { font-size:13px; line-height:1.6; }
.skill-specialization .specialization-rule { color:#d6e2db; font:14px/1.6 "Trebuchet MS",sans-serif; margin:12px auto; }
.skill-branch-tag { display:block; padding:5px 7px; margin:5px 0; border:1px solid #799b8c; background:#17362d; color:#d6f1d9; font:12px/1.4 "Trebuchet MS",sans-serif; }
.skill-branch-build { margin:12px 0; padding:12px; border:1px solid #517263; background:rgba(38,70,49,.18); text-align:left; }
.skill-branch-build summary { cursor:pointer; color:#d6e8ce; font:14px/1.5 "Trebuchet MS",sans-serif; }
.skill-branch-build ul { list-style:none; padding:0; margin-bottom:0; }
.skill-branch-build li { margin:12px 0; font:13px/1.6 "Trebuchet MS",sans-serif; }
.skill-branch-build strong,.skill-branch-build span { display:block; }
.skill-branch-build span { color:#c1d2cb; }
.skill-specialization button:focus-visible { outline:2px solid #fff1c8; outline-offset:3px; }
@media(max-width:560px) { .skill-specialization .encounter-actions { grid-template-columns:1fr; } }
.encounter-overlay.skill-specialization { position:fixed; inset:0; z-index:60; }
.encounter-overlay.skill-specialization .encounter-panel { max-height:calc(100dvh - 48px); overscroll-behavior:contain; }
@media(max-width:560px) { .encounter-overlay.skill-specialization .encounter-panel { max-height:calc(100dvh - 20px); } }

/* 0.20.27: companion discovery hint stays beside route choices. */
.discovery-tracker { border-left: 3px solid #dfbc76; padding: .7rem .85rem; background: rgba(223,188,118,.09); color: #f2dfb7; line-height: 1.5; overflow-wrap: anywhere; }
.map-node.discovery { border-color: #dfbc76; }

/* 0.20.29: compact Library filters and optional journey Scripture recap. */
.library-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0; }
.library-filters label { display:flex; flex-direction:column; gap:6px; color:#e8d8b4; font:12px/1.4 "Trebuchet MS",sans-serif; min-width:0; }
.library-filters select { width:100%; min-width:0; padding:10px; color:#f2e9d4; background:#07151c; border:1px solid #91784c88; border-radius:6px; font:14px "Trebuchet MS",sans-serif; }
.library-filters select:focus-visible { outline:2px solid #e8cf98; outline-offset:2px; }
.journey-scripture .story-card { margin:10px 0; }
.journey-scripture .story-card>summary { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
@media(max-width:620px) { .library-filters { grid-template-columns:1fr; } }

/* Companion discovery guide */
.hall-guide-button { margin: 0 0 12px; }
.road-recruitment-card small { color: #a4b8bb; font-size: 11px; line-height: 1.5; }
.road-recruitment-card .hall-lead-status { color: #c8dccd; border-top: 1px solid rgba(116,198,161,.18); padding-top: 7px; }