:root {
  color-scheme: dark;
  --bg: #09111d;
  --bg-raised: #101c2b;
  --panel: rgba(20, 32, 48, .94);
  --panel-strong: #172639;
  --line: #34465a;
  --line-soft: rgba(133, 157, 178, .2);
  --accent: #e1b65f;
  --accent-bright: #f5d58d;
  --text: #edf0ee;
  --muted: #a9b6c2;
  --bad: #f0837f;
  --good: #78c7a2;
  --mana: #79aedd;
  --shadow: 0 24px 60px rgba(0, 0, 0, .32);
  --radius: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 0%, rgba(60, 92, 118, .24), transparent 36rem),
    linear-gradient(145deg, #0b1523 0%, #09111d 55%, #101b28 100%);
  color: var(--text);
  line-height: 1.6;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  background-image: repeating-linear-gradient(115deg, transparent 0 38px, rgba(164, 194, 212, .08) 39px, transparent 40px 82px);
}
button, input, select, textarea { font: inherit; }
button { min-height: 44px; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 4px;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.12;
  letter-spacing: -.025em;
}
h1 { margin-bottom: 1rem; color: var(--text); font-size: clamp(2.35rem, 6vw, 4.9rem); font-weight: 500; }
h2 { color: var(--accent-bright); font-size: 1.5rem; }
p { color: var(--muted); }
#app { min-height: 100vh; isolation: isolate; }
#app > .panel { width: calc(100% - 2rem); max-width: 1080px; margin-inline: auto; }
.game-shell { width: min(1180px, 100%); margin: 0 auto; padding: clamp(1.25rem, 4vw, 3.5rem); }
.ui-icon { width: 1.3em; height: 1.3em; flex: 0 0 auto; vertical-align: -.2em; }
.eyebrow {
  margin-bottom: .6rem;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .19em;
  line-height: 1.4;
  text-transform: uppercase;
}
.scene-header { display: flex; align-items: flex-start; gap: 1rem; }
.scene-header__mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-top: .15rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(225, 182, 95, .07);
  color: var(--accent);
}
.scene-header__mark .ui-icon { width: 1.65rem; height: 1.65rem; }
.scene-header h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.scene-subtitle { max-width: 62ch; margin-bottom: 0; font-size: 1rem; }
.title-screen { display: grid; align-items: center; min-height: 100svh; }
.title-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.title-copy { position: relative; z-index: 1; }
.title-copy .scene-header { display: block; }
.title-copy .scene-header__mark { margin-bottom: 2rem; width: 3.7rem; height: 3.7rem; }
.title-copy h1 { max-width: 9ch; }
.title-copy .scene-subtitle { font-size: clamp(1rem, 2vw, 1.15rem); }
.title-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.1rem; }
.save-note { margin: 1rem 0 0; color: var(--muted); font-size: .78rem; }
.save-note span { margin: 0 .4rem; color: var(--accent); }
.title-art-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px 48px 2px 2px;
  box-shadow: var(--shadow);
  background: #142438;
}
.title-art-frame::after { content: ""; position: absolute; inset: 0; border: 8px solid rgba(9, 17, 29, .3); pointer-events: none; }
.beacon-art { display: block; width: 100%; height: auto; }
.beacon-light { filter: drop-shadow(0 0 12px #f5d58d); }
.beacon-beam { animation: beacon-breathe 5s ease-in-out infinite alternate; }
.art-caption {
  position: absolute;
  right: 1rem;
  bottom: .8rem;
  padding: .3rem .6rem;
  background: rgba(9, 17, 29, .76);
  color: #d9e0e5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .8rem;
  font-style: italic;
}
@keyframes beacon-breathe { from { opacity: .6; } to { opacity: 1; } }
.panel {
  margin-bottom: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .12);
}
.town-screen > .scene-header { margin-bottom: 1.5rem; }
.town-resource-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.resource-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .55rem .85rem;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(20, 32, 48, .7);
  color: var(--accent);
}
.resource-chip span { color: var(--muted); font-size: .82rem; }
.resource-chip strong { color: var(--text); font-size: 1.05rem; }
.location-status { color: var(--muted); font-size: .8rem; }
.status-dot { display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px rgba(120, 199, 162, .45); }
.party-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.party-member { padding: 1rem 1.15rem; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(20, 32, 48, .8); }
.party-member__heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.party-member__name { font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; }
.level-badge { color: var(--accent); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.meter { margin: .55rem 0; }
.meter__labels { display: flex; justify-content: space-between; margin-bottom: .3rem; color: var(--muted); font-size: .69rem; font-weight: 650; letter-spacing: .05em; }
.meter__labels span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.meter__track { overflow: hidden; height: 5px; border-radius: 3px; background: #080e17; }
.meter__fill { display: block; height: 100%; border-radius: inherit; background: var(--good); transition: width .3s ease; }
.meter--mp .meter__fill { background: var(--mana); }
.meter--xp .meter__fill { background: var(--accent); }
.xp-line { display: flex; justify-content: space-between; margin-top: .7rem; color: var(--muted); font-size: .7rem; }
.xp-line strong { color: var(--muted); font-weight: 500; }
.town-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr); gap: 1rem; }
.town-grid .panel { height: 100%; margin: 0; }
.story-panel { position: relative; overflow: hidden; }
.story-panel::after { content: ""; position: absolute; width: 130px; height: 130px; right: -45px; top: -55px; border: 1px solid rgba(225, 182, 95, .15); transform: rotate(45deg); pointer-events: none; }
.story-panel h2, .action-panel h2 { margin-bottom: 1rem; }
.location-message { color: var(--text); font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; font-style: italic; }
.divider { width: 3rem; height: 1px; margin: 1.3rem 0; background: var(--accent); }
.quiet-note { margin-bottom: 0; font-size: .85rem; }
.action-list { display: grid; gap: .65rem; }
button, .action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin: .2rem;
  padding: .7rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #213249;
  color: var(--text);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.action-list .action-button { width: 100%; justify-content: flex-start; margin: 0; padding: .85rem 1rem; }
.action-button--primary { border-color: var(--accent); background: var(--accent); color: #15202b; }
.action-button--ghost { border-color: transparent; background: transparent; color: var(--muted); }
.action-button--danger { border-color: var(--bad); color: var(--bad); }
button:hover:not(:disabled), .action-button:hover:not(:disabled) { border-color: var(--accent-bright); background: var(--accent-bright); color: #111c28; transform: translateY(-1px); }
.action-button--ghost:hover:not(:disabled) { background: rgba(225, 182, 95, .09); color: var(--accent-bright); }
button:active:not(:disabled) { transform: translateY(0); }
button:disabled, .action-button:disabled { opacity: .42; cursor: not-allowed; }
.stats { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; color: var(--muted); }
.log { max-height: 260px; overflow-y: auto; color: var(--muted); scrollbar-color: var(--line) var(--bg); }
.log p { margin: .3rem 0; }
.hp { color: var(--good); }
.dmg { color: var(--bad); }
@media (max-width: 760px) {
  .title-screen { min-height: auto; }
  .title-layout { grid-template-columns: 1fr; gap: 2rem; }
  .title-copy h1 { max-width: 12ch; }
  .title-art-frame { max-height: 380px; border-radius: 2px 32px 2px 2px; }
  .beacon-art { height: 100%; min-height: 320px; object-fit: cover; }
  .town-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .game-shell { padding: 1.1rem; }
  .title-screen { padding-top: 2rem; }
  .title-copy .scene-header__mark { margin-bottom: 1.25rem; }
  .title-actions, .title-actions .action-button { width: 100%; }
  .scene-header__mark { width: 2.55rem; height: 2.55rem; }
  .town-resource-row { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .location-status { padding-left: .25rem; }
  .title-art-frame { max-height: 290px; }
  .beacon-art { min-height: 280px; }
  .art-caption { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Story view integration */
.story-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-bottom: 1.1rem; }
.story-people button { width: 100%; margin: 0; }
.story-dialogue { margin: 1rem 0; padding: 1rem 1.15rem; border-left: 3px solid var(--accent); background: rgba(225, 182, 95, .06); }
.story-dialogue h3 { margin-bottom: .4rem; color: var(--accent-bright); }
.story-dialogue p { color: var(--text); }
.story-dialogue button { margin-left: 0; }
.story-update { padding: .7rem .85rem; border: 1px solid rgba(120, 199, 162, .25); border-radius: 7px; color: var(--good); }
.quest-journal { margin-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.quest-journal summary { display: flex; align-items: center; min-height: 44px; color: var(--accent); cursor: pointer; font-weight: 700; }
.quest-journal ul { margin: 0; padding: 0; list-style: none; }
.quest-journal li { padding: .75rem 0; border-top: 1px solid var(--line-soft); }
.quest-journal h3 { margin-bottom: .35rem; color: var(--text); font-size: 1.05rem; }
.quest-journal h3 small { color: var(--muted); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .65rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.quest-journal li p { margin-bottom: 0; font-size: .88rem; }
@media (max-width: 560px) { .story-people { grid-template-columns: 1fr; } }

/* Combat v2 */
.combat .combatants { display: flex; gap: 1rem; flex-wrap: wrap; }
.combat .unit { flex: 1 1 12rem; }
.bar { height: 8px; background: rgba(255,255,255,0.15); border-radius: 4px; overflow: hidden; margin: 2px 0 6px; }
.bar span { display: block; height: 100%; background: #d9534f; }
.bar.mp span { background: #4a90d9; }
.status { font-size: 0.75em; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; }
.actions button { margin: 2px; }

/* Companion units in combat */
.combat .unit.ally { border-left: 3px solid #6fb3d2; padding-left: 0.5rem; }
.combat .unit.ally.down { opacity: 0.5; filter: grayscale(0.8); }
.combat .unit.ally.down em { color: #d47a6a; font-style: normal; }
/* Exploration HUD */
.explore-screen { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
.explore-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.1rem; }
.explore-heading-row .scene-header { min-width: 0; }
.explore-heading-row .scene-header h1 { margin-bottom: .55rem; font-size: clamp(2rem, 4.5vw, 3.25rem); }
.coordinate-chip {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 .55rem;
  flex: 0 0 auto;
  min-width: 8.5rem;
  margin-top: .35rem;
  padding: .75rem .9rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(20, 32, 48, .72);
  color: var(--accent);
}
.coordinate-chip .ui-icon { grid-row: 1 / 3; width: 1.6rem; height: 1.6rem; }
.coordinate-chip span { color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.coordinate-chip strong { color: var(--text); font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1.35; }
.explore-resource-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.explore-screen > .party-status { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.explore-screen > .party-status .party-member { padding: .8rem 1rem; }
.explore-screen > .party-status .party-member__heading { margin-bottom: .45rem; }
.explore-screen > .party-status .party-member__name { font-size: 1.08rem; }
.explore-screen > .party-status .meter { margin: .35rem 0; }
.explore-screen > .party-status .xp-line { margin-top: .45rem; }
.explore-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); align-items: start; gap: 1rem; }
.explore-layout .panel { margin-bottom: 0; }
.exploration-map-panel { overflow: hidden; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.section-heading .eyebrow, .navigation-panel .eyebrow, .nearby-panel .eyebrow { margin-bottom: .3rem; }
.section-heading h2, .navigation-panel h2, .nearby-panel h2, .expedition-log h2 { margin-bottom: .65rem; font-size: 1.25rem; }
.turn-badge { padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.zone-description { margin-bottom: 1rem; font-size: .9rem; }
.map-frame {
  position: relative;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: clamp(.65rem, 2vw, 1.15rem);
  border: 1px solid #34485c;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 42%, rgba(73, 104, 123, .18), transparent 65%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(129, 158, 177, .025) 24px),
    #0b1420;
  box-shadow: inset 0 0 35px rgba(0, 0, 0, .3);
}
.map-frame::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(157, 180, 194, .08); border-radius: 5px; pointer-events: none; }
.map-grid { display: grid; grid-template-columns: repeat(var(--map-columns), minmax(0, 1fr)); width: min(100%, calc(var(--map-columns) * 2.8rem)); min-width: min(100%, calc(var(--map-columns) * 1.65rem)); }
.map-row { display: contents; }
.map-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid rgba(76, 99, 119, .38);
  background: #162230;
  color: #8fa5b5;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(.72rem, 2vw, 1rem);
  font-weight: 750;
  line-height: 1;
  text-align: center;
}
.map-cell > span { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.map-cell.tile-floor { background: #172331; color: #647e90; }
.map-cell.tile-grass { background: #172a2b; color: #7f9f91; }
.map-cell.tile-wall, .map-cell.tile-crag { background: #0b111a; color: #526577; border-color: #1e2c39; }
.map-cell.tile-chasm { background: #101827; color: #6b8ea9; }
.map-cell.tile-gate, .map-cell.entity-exit { background: #312c49; color: #c2b6ed; }
.map-cell.tile-beacon { background: #3b3422; color: var(--accent-bright); }
.map-cell.entity-npc { z-index: 1; background: #194838; color: #b4efd0; border-color: #3d7561; }
.map-cell.entity-encounter { z-index: 1; background: #592b34; color: #ffb0a9; border-color: #87444c; animation: threat-pulse 2.4s ease-in-out infinite; }
.map-cell.entity-interactable { z-index: 1; background: #203c5e; color: #b8dafa; border-color: #45698d; }
.map-cell.map-player { z-index: 2; border-color: #ffe3a1; background: var(--accent); color: #111c28; box-shadow: 0 0 0 2px rgba(225, 182, 95, .24), 0 0 18px rgba(225, 182, 95, .28); }
@keyframes threat-pulse { 50% { border-color: #d37778; } }
.map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 1rem; margin: 1rem 0 0; padding: 0; color: var(--muted); font-size: .72rem; list-style: none; }
.map-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.legend-symbol { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .2rem; border: 1px solid var(--line); border-radius: 4px; background: #172331; color: var(--text); font-family: ui-monospace, monospace; font-size: .62rem; font-weight: 750; }
.legend-symbol--player { border-color: var(--accent); background: var(--accent); color: #111c28; }
.legend-symbol--npc { background: #194838; color: #b4efd0; }
.legend-symbol--threat { background: #592b34; color: #ffb0a9; }
.legend-symbol--object { background: #203c5e; color: #b8dafa; }
.legend-symbol--exit { background: #312c49; color: #c2b6ed; }
.legend-symbol--wall { background: #0b111a; color: #718496; }
.explore-sidebar { display: grid; gap: 1rem; }
.movement-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: ". north ." "west survey east" ". south ."; gap: .4rem; margin-top: .85rem; }
.movement-button { position: relative; flex-direction: column; gap: .05rem; min-width: 0; min-height: 64px; margin: 0; padding: .45rem .3rem; text-align: center; }
.movement-button--north { grid-area: north; }
.movement-button--west { grid-area: west; }
.movement-button--survey { grid-area: survey; background: #2d3e50; }
.movement-button--east { grid-area: east; }
.movement-button--south { grid-area: south; }
.movement-button__arrow { color: var(--accent-bright); font-size: 1.1rem; line-height: 1.1; }
.movement-button:hover .movement-button__arrow { color: #111c28; }
.movement-button > span:not(.movement-button__arrow) { font-size: .69rem; }
.movement-button kbd { position: absolute; top: 3px; right: 5px; color: var(--muted); font-family: inherit; font-size: .55rem; font-weight: 500; opacity: .75; }
.movement-button:hover kbd { color: #263648; }
.control-hint { margin: .75rem 0 0; font-size: .74rem; line-height: 1.45; }
.nearby-actions { display: grid; gap: .45rem; }
.nearby-actions .action-button, .visited-routes .action-button, .field-pack__actions .action-button { width: 100%; justify-content: flex-start; margin: 0; }
.empty-state { margin: 0; padding: .75rem; border: 1px dashed var(--line); border-radius: 8px; font-size: .8rem; }
.field-pack, .visited-routes { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.field-pack h3, .visited-routes h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; color: var(--text); font-family: inherit; font-size: .82rem; letter-spacing: 0; }
.field-pack h3 .ui-icon, .visited-routes h3 .ui-icon { color: var(--accent); }
.field-pack__items { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin: 0; padding: 0; color: var(--muted); font-size: .76rem; list-style: none; }
.field-pack__items li { display: inline-flex; gap: .3rem; }
.field-pack__items strong { color: var(--accent-bright); }
.field-pack__actions { display: grid; gap: .35rem; margin-top: .6rem; }
.field-pack__actions .action-button, .visited-routes .action-button { min-height: 44px; padding: .55rem .65rem; font-size: .78rem; }
.explore-utilities { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line-soft); }
.explore-utilities .action-button { margin: 0; padding: .6rem .65rem; font-size: .75rem; }
.expedition-log { margin-top: 1rem; }
.expedition-log .log { max-height: 180px; padding-left: .75rem; border-left: 2px solid var(--line); }
.expedition-log .log p { margin: .3rem 0; font-size: .82rem; }
.explore-screen > .story-panel { margin-top: 1rem; }
@media (max-width: 900px) {
  .explore-layout { grid-template-columns: 1fr; }
  .explore-sidebar { grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); }
  .map-grid { width: min(100%, calc(var(--map-columns) * 3rem)); }
}
@media (max-width: 650px) {
  .explore-heading-row { flex-direction: column; gap: .75rem; }
  .coordinate-chip { align-self: flex-start; margin-top: 0; }
  .explore-resource-row { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .explore-sidebar { grid-template-columns: 1fr; }
  .explore-screen > .party-status { grid-template-columns: 1fr; }
  .explore-screen > .party-status .party-member { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
  .explore-screen > .party-status .party-member__heading, .explore-screen > .party-status .xp-line { grid-column: 1 / -1; }
}
@media (max-width: 390px) {
  .explore-screen { padding-inline: .8rem; }
  .explore-screen .panel { padding: .85rem; }
  .map-frame { padding: .45rem; }
  .map-cell { font-size: .68rem; }
  .map-legend { gap: .45rem .65rem; }
  .explore-utilities { grid-template-columns: 1fr; }
}
.field-pack__label { margin: .25rem 0 .1rem; color: var(--accent); font-size: .75rem; }

/* Warden's Field Journal (bestiary) and Watch House muster board */
.bestiary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; margin: 1rem 0; }
.bestiary-entry { background: var(--panel-strong); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: .8rem 1rem; }
.bestiary-entry h3 { margin: 0 0 .35rem; color: var(--accent-bright); }
.bestiary-entry p { margin: .25rem 0; font-size: .9rem; }
.bestiary-entry.unknown { border-left-color: var(--line); color: var(--muted); opacity: .75; }
.bestiary-entry.unknown h3 { color: var(--muted); letter-spacing: .2em; }
.bestiary .hint, .muster .hint { color: var(--muted); font-size: .88rem; }
.muster .companion { border-left: 3px solid var(--good); margin: .75rem 0; }
.muster .message { color: var(--accent-bright); font-weight: 600; }
.muster .actions button, .bestiary .actions button { margin-right: .5rem; }

/* Companion remarks on the muster board */
blockquote.remark {
  margin: .75rem 0;
  padding: .6rem .9rem;
  border-left: 3px solid var(--accent);
  background: var(--panel-strong);
  color: var(--text);
  font-style: italic;
  border-radius: 0 6px 6px 0;
}

/* Boss second phase marker in combat */
em.enraged {
  color: var(--bad);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .8em;
  animation: enraged-pulse 1.6s ease-in-out infinite;
}
@keyframes enraged-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  em.enraged { animation: none; }
}

/* Combat HUD */
.combat-screen { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
.combat-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.15rem; }
.combat-heading-row .scene-header { min-width: 0; }
.combat-heading-row .scene-header h1 { margin-bottom: .55rem; font-size: clamp(2rem, 4.5vw, 3.25rem); }
.turn-indicator { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .15rem .55rem; flex: 0 0 auto; min-width: 9.5rem; margin-top: .35rem; padding: .75rem .9rem; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(20, 32, 48, .72); }
.turn-indicator .status-dot { grid-row: 1 / 3; }
.turn-indicator > span:not(.status-dot) { color: var(--accent); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.turn-indicator strong { color: var(--text); font-size: .92rem; }
.combat-arena { position: relative; overflow: hidden; margin-bottom: 1rem; background: radial-gradient(circle at 85% 25%, rgba(147, 73, 74, .12), transparent 38%), radial-gradient(circle at 15% 75%, rgba(74, 144, 169, .09), transparent 40%), var(--panel); }
.combat-arena::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(157, 180, 194, .04); border-radius: inherit; pointer-events: none; }
.combat .combatants { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .75fr); gap: 1rem; }
.combat-side { min-width: 0; padding: .85rem; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(8, 16, 26, .28); }
.combat-side--enemy { border-color: rgba(212, 122, 106, .28); background: rgba(60, 25, 31, .16); }
.combat-side__heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.combat-side__heading h2 { margin: 0; font-size: 1.12rem; }
.combat-side__heading > span { color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.party-units { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .7rem; }
.combat .unit { min-width: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(23, 38, 57, .86); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.combat .unit.hero { border-top: 2px solid var(--accent); }
.combat .unit.ally { border-top: 2px solid #6fb3d2; border-left: 1px solid var(--line); padding-left: .9rem; }
.combat .unit.enemy { height: 100%; border-color: rgba(212, 122, 106, .4); border-top: 2px solid var(--bad); background: rgba(49, 29, 39, .88); }
.combat .unit.enemy.boss { box-shadow: inset 0 0 30px rgba(212, 122, 106, .07), 0 8px 20px rgba(0, 0, 0, .12); }
.combat .unit.ally.down, .combat .unit.hero.down { opacity: .68; filter: grayscale(.7); }
.combat .unit.down em { color: #f09a89; font-size: .7rem; font-style: normal; font-weight: 700; text-transform: uppercase; }
.unit-card__heading { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.unit-card__portrait { display: grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: 50%; background: rgba(8, 16, 26, .42); color: var(--accent); }
.unit-card__portrait .ui-icon { width: 1.3rem; height: 1.3rem; }
.enemy .unit-card__portrait { border-color: rgba(212, 122, 106, .45); color: #f09a89; }
.unit-card__identity { min-width: 0; flex: 1; }
.unit-card__identity h3 { overflow-wrap: anywhere; margin: .1rem 0 0; color: var(--text); font-size: 1.1rem; }
.unit-card__role { color: var(--muted); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.unit-card__heading .level-badge { flex: 0 0 auto; font-size: .62rem; }
.unit-card__statuses { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-height: 1.5rem; margin: .65rem 0 .4rem; }
.combat .status { display: inline-flex; align-items: center; min-height: 1.35rem; padding: .15rem .42rem; border-color: rgba(212, 122, 106, .48); border-radius: 999px; color: #f2b0a2; font-size: .61rem; font-weight: 700; letter-spacing: .035em; text-transform: capitalize; }
.combat .status[data-status="clear"] { border-color: var(--line-soft); color: var(--muted); font-weight: 500; }
.combat .status[data-status="shocked"] { border-color: rgba(123, 173, 211, .55); color: #a8d5f3; }
.combat .status[data-status="stunned"], .combat .status[data-status="warded"] { border-color: rgba(245, 213, 141, .5); color: var(--accent-bright); }
.combat .unit .meter { margin: .4rem 0; }
.combat .unit .meter__labels { font-size: .63rem; }
.combat .unit.enemy .meter--hp .meter__fill { background: var(--bad); }
.unit-stats { display: flex; flex-wrap: wrap; gap: .45rem .75rem; margin: .7rem 0 0; padding-top: .55rem; border-top: 1px solid var(--line-soft); }
.unit-stats div { display: flex; gap: .25rem; }
.unit-stats dt { color: var(--muted); font-size: .57rem; font-weight: 650; letter-spacing: .05em; }
.unit-stats dd { margin: 0; color: var(--text); font-size: .65rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.enemy-ability { display: flex; align-items: center; gap: .5rem; margin: .8rem 0 0; padding: .55rem .65rem; border: 1px solid rgba(212, 122, 106, .22); border-radius: 7px; background: rgba(8, 16, 26, .24); color: var(--muted); font-size: .65rem; }
.enemy-ability .ui-icon { flex: 0 0 auto; color: #f09a89; }
.enemy-ability strong { display: block; margin-top: .12rem; color: var(--text); font-size: .75rem; }
.enemy-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.enemy-tags span { color: var(--muted); font-size: .6rem; font-style: italic; text-transform: capitalize; }
.combat-dashboard { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); align-items: start; gap: 1rem; }
.combat-dashboard > .panel { margin: 0; }
.command-panel h2 { margin-bottom: 1rem; font-size: 1.3rem; }
.command-panel .actions button { margin: 0; }
.command-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.command-grid .command-button { justify-content: flex-start; min-height: 52px; padding: .75rem .85rem; }
.command-grid .command-button--flee { grid-column: 1 / -1; justify-content: center; min-height: 44px; }
.command-hint { grid-column: 1 / -1; margin: .15rem 0 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.command-list { display: grid; gap: .55rem; }
.command-card { display: grid; gap: .45rem; width: 100%; min-height: 64px; padding: .75rem .85rem; text-align: left; }
.command-card__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; }
.command-card__top > span { display: inline-flex; align-items: center; gap: .5rem; }
.command-card__top strong { flex: 0 0 auto; color: var(--accent-bright); font-size: .72rem; }
.command-card__description { color: var(--muted); font-size: .71rem; font-weight: 400; line-height: 1.45; }
.command-card:hover:not(:disabled) .command-card__description, .command-card:hover:not(:disabled) .command-card__top strong { color: #263648; }
.command-list > .action-button { justify-self: start; }
.combat-outcome { display: flex; align-items: center; gap: .8rem; grid-column: 1 / -1; padding: .75rem; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(8, 16, 26, .25); }
.combat-outcome > .ui-icon { flex: 0 0 auto; width: 1.8rem; height: 1.8rem; color: var(--accent); }
.combat-outcome strong { color: var(--accent-bright); font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; }
.combat-outcome p { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; }
.command-continue { grid-column: 1 / -1; min-height: 48px; }
.combat-log { max-height: 310px; padding-left: .8rem; border-left: 2px solid var(--line); }
.combat-log p { position: relative; margin: 0; padding: .5rem .25rem; border-bottom: 1px solid rgba(52, 70, 90, .35); font-size: .79rem; line-height: 1.5; }
.combat-log p:last-child { border-bottom: 0; color: var(--text); }
@media (max-width: 850px) {
  .combat .combatants { grid-template-columns: 1fr; }
  .combat .unit.enemy { height: auto; }
  .combat-dashboard { grid-template-columns: 1fr; }
  .combat-log { max-height: 230px; }
}
@media (max-width: 560px) {
  .combat-heading-row { flex-direction: column; gap: .75rem; }
  .turn-indicator { align-self: flex-start; margin-top: 0; }
  .combat-arena { padding: .8rem; }
  .combat-side { padding: .65rem; }
  .party-units { grid-template-columns: 1fr; }
  .combat .unit { padding: .8rem; }
  .combat .unit.ally { padding-left: .8rem; }
}
@media (max-width: 360px) {
  .combat-screen { padding-inline: .8rem; }
  .command-grid { grid-template-columns: 1fr; }
  .command-grid .command-button--flee, .command-hint, .combat-outcome, .command-continue { grid-column: 1; }
  .command-card__top { align-items: flex-start; }
}

/* Finale epilogue */
.ending .finale-sub { margin-top: -0.4em; font-style: italic; opacity: 0.85; }
.ending .epilogue { border-left: 3px solid currentColor; padding-left: 0.75em; opacity: 0.95; }