/* Hearthbound demo — styles ported from the v6 (modes) mock. Two themes (dark torchlit dungeon /
   light sunlit town) driven by data-mode on .hb. Fonts: IM Fell English (display), Spectral (prose),
   JetBrains Mono (mechanical). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

@keyframes diceRoll { 0% { transform: translateY(0) rotate(0) } 25% { transform: translateY(-4px) rotate(90deg) } 50% { transform: translateY(0) rotate(180deg) } 75% { transform: translateY(-3px) rotate(270deg) } 100% { transform: translateY(0) rotate(360deg) } }
@keyframes fadein { from { opacity: 0; transform: translateY(3px) } to { opacity: 1; transform: none } }

::selection { background: rgba(232,148,60,.20); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(120,108,86,.5); border-radius: 8px; }
input::placeholder { font-style: italic; }

.hb[data-mode="dark"] {
  --appbg: radial-gradient(120% 90% at 38% 42%, #14110c 0%, #08080a 60%, #050506 100%);
  --panel: linear-gradient(180deg,#100e0a,#0b0a07); --panel2: #0c0b08;
  --sidebg: linear-gradient(180deg,#0c0b08,#090806); --stagebg: #08080a;
  --ink: #ddd0b6; --inkdim: #988d77; --line: #403c35; --linesoft: #2c2925; --chip: #13110d;
  --ember: #e8943c; --emberhi: #f6c66b; --flame: #ffd98a; --danger: #b23a3a; --dangerdim: #7d3030;
  --pipempty: #3a352c; --cmdborder: #5a4524; --selfg: #0c0b08; --ok: #5bb07f;
}
.hb[data-mode="light"] {
  --appbg: radial-gradient(130% 100% at 50% 0%, #f3ecda 0%, #ece3cf 55%, #e2d8c0 100%);
  --panel: linear-gradient(180deg,#ece3cf,#e3d9c1); --panel2: #e9dfca;
  --sidebg: linear-gradient(180deg,#efe7d5,#e7dcc4); --stagebg: #dde0d1;
  --ink: #2a2519; --inkdim: #7a7059; --line: #bcae8f; --linesoft: #d2c6a8; --chip: #f3ecda;
  --ember: #e8943c; --emberhi: #c0701a; --flame: #d98a2c; --danger: #b23a3a; --dangerdim: #9a4040;
  --pipempty: #cabd9d; --cmdborder: #cbb98c; --selfg: #f3ecda; --ok: #3a9a63;
}

.hb {
  height: 100vh; min-height: 620px; display: flex; flex-direction: column;
  background: var(--appbg); color: var(--ink); font-family: 'Spectral', Georgia, serif;
}

.mono { font-family: 'JetBrains Mono', monospace; }

/* ---------- top bar: brand + party strip ---------- */
.topbar { display: flex; align-items: stretch; background: var(--panel); border-bottom: 1px solid var(--line); min-height: 70px; }
.brand { display: flex; flex-direction: column; justify-content: center; padding: 10px 20px; border-right: 1px solid var(--linesoft); min-width: 182px; }
.brand .name { font: 400 25px/1 'IM Fell English', serif; letter-spacing: .03em; color: var(--ink); }
.brand .loc { font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--inkdim); margin-top: 7px; }
.party { flex: 1; display: flex; align-items: center; gap: 9px; padding: 0 16px; overflow: hidden; }
.pcard { display: flex; align-items: center; gap: 9px; background: var(--chip); border: 1px solid var(--linesoft); padding: 6px 11px 6px 6px; min-width: 0; cursor: pointer; transition: border-color .12s; }
.pcard:hover { border-color: var(--ember); }
.pcard .portrait { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; font: 400 16px/1 'IM Fell English', serif; color: #1a160f; }
.pcard .pname { font: 500 10.5px/1 'JetBrains Mono', monospace; color: var(--ink); }
.pcard .prole { font: 400 9px/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--inkdim); }
.pcard .pstatus { font: 500 8.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; padding: 1px 5px; }
.pips { font: 500 12px/1 'JetBrains Mono', monospace; letter-spacing: 1px; }
.pips .full { color: var(--ember); } .pips .empty { color: var(--pipempty); }

/* Generated portrait art (shared by the top bar, party card, conversation, journal, discovery card):
   cover the chip with the bitmap and hide the fallback initial. Pairs with each host's size/shape rule. */
.art { background-size: cover; background-position: center top; background-repeat: no-repeat; color: transparent; overflow: hidden; }
.pcard .portrait { border-radius: 4px; overflow: hidden; }

/* ---------- HUD strip ---------- */
.hud { display: flex; flex-wrap: wrap; gap: 0; background: var(--panel2); border-bottom: 1px solid var(--line); }
.hud .stat { display: flex; flex-direction: column; gap: 3px; padding: 7px 14px; border-right: 1px solid var(--linesoft); min-width: 0; }
.hud .stat .label { font: 600 8px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--inkdim); }
.hud .stat .val { font: 600 12.5px/1 'JetBrains Mono', monospace; color: var(--ink); white-space: nowrap; }
.hud .stat .val .dim { color: var(--inkdim); }
.hud .stat .val .ember { color: var(--ember); }
.hud .stat .val .danger { color: var(--danger); }
.hud .stat .val .ok { color: var(--ok); }

/* ---------- body ---------- */
.body { flex: 1; display: flex; min-height: 0; }

.left { flex: 1; min-width: 360px; background: var(--sidebg); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.log { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; font-size: 15.5px; line-height: 1.64; }
.log > * { animation: fadein .25s ease both; }
.l-cmd { font: 400 12.5px/1.5 'JetBrains Mono', monospace; color: var(--emberhi); padding-left: 14px; border-left: 2px solid var(--cmdborder); }
.l-system { font: 500 10.5px/1.5 'JetBrains Mono', monospace; letter-spacing: .02em; color: var(--inkdim); }
.l-game { color: var(--ink); }
.l-game .who, .l-npc .who { display: block; font: 500 9px/1 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--ember); margin-bottom: 5px; }
.l-npc { color: var(--ink); font-style: italic; }
/* cross-links: known item/npc/monster names in the prose jump to Inventory or the Journal */
.entlink { cursor: pointer; color: inherit; border-bottom: 1px dotted var(--ember); transition: color .12s; }
.entlink:hover { color: var(--ember); }
.l-discovery .disc-name.entlink { border-bottom: 1px dotted var(--ember); }
/* "new creature" discovery card — a framed bestiary unlock dropped into the log, art beside the telegraph */
.l-discovery { display: flex; align-items: flex-start; gap: 13px; padding: 12px 13px; border: 1px solid var(--linesoft); border-left: 2px solid var(--ember); background: var(--chip); }
.l-discovery .disc-portrait { width: 56px; height: 56px; flex: none; border-radius: 6px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font: 400 26px/1 'IM Fell English', serif; color: #1a160f; }
.l-discovery .disc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.l-discovery .disc-eyebrow { font: 600 8px/1 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--ember); }
.l-discovery .disc-name { font: 400 19px/1.05 'IM Fell English', serif; color: var(--ink); }
.l-discovery .disc-tele { font: 400 13.5px/1.5 'Spectral', serif; font-style: italic; color: var(--ink); }
.l-discovery .disc-meta { font: 500 9.5px/1.4 'JetBrains Mono', monospace; color: var(--danger); }
.l-roll { display: flex; flex-direction: column; gap: 8px; padding: 11px 13px; background: var(--chip); border: 1px solid var(--linesoft); }
.l-roll .rlabel { font: 500 9px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--inkdim); }
.l-roll .faces { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.die { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); font: 600 12px/1 'JetBrains Mono', monospace; color: var(--inkdim); }
.die.rolling { animation: diceRoll .5s linear infinite; }
.die.succ { background: var(--ember); border-color: var(--ember); color: #16100a; }
.die.burn { border-color: var(--danger); color: var(--danger); }
.l-roll .result { margin-left: 4px; font: 600 11px/1 'JetBrains Mono', monospace; }
.l-roll .result.ok { color: var(--ok); } .l-roll .result.no { color: var(--danger); }

/* ---------- action zone ---------- */
.actionzone { border-top: 1px solid var(--line); padding: 13px 16px 14px; background: var(--panel); display: flex; flex-direction: column; gap: 11px; }

.check { display: flex; flex-direction: column; gap: 10px; }
.check .head { display: flex; align-items: flex-start; gap: 10px; }
.check .calls { flex: 1; font: 500 8.5px/1.4 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--ember); }
.check .x { width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--chip); border: 1px solid var(--line); font: 600 12px/1 'JetBrains Mono', monospace; color: var(--inkdim); cursor: pointer; }
.check .prompt { font: 400 14.5px/1.5 'Spectral', serif; color: var(--ink); }
.check .stakes { display: flex; flex-direction: column; gap: 6px; }
.check .stake { font: 400 13px/1.45 'Spectral', serif; color: var(--ink); }
.check .stake .tag { font: 600 8.5px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; margin-right: 8px; }
.check .tag.s { color: var(--ok); } .check .tag.f { color: var(--danger); }
.check .commit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.check .attr { font: 600 10px/1 'JetBrains Mono', monospace; color: var(--ink); }
.check .need { font: 600 10px/1 'JetBrains Mono', monospace; color: var(--inkdim); }
.stepper { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.stepper .slabel { font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--inkdim); }
.stepper button { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; background: var(--chip); border: 1px solid var(--line); font: 600 15px/1 'JetBrains Mono', monospace; color: var(--ink); cursor: pointer; }
.stepper .count { font: 600 14px/1 'JetBrains Mono', monospace; color: var(--ink); min-width: 14px; text-align: center; }
.dots { display: flex; align-items: center; gap: 3px; margin-left: 2px; }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--inkdim); }
.dot.on { background: var(--ember); border-color: var(--ember); }
.bargains { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bargains .blabel { font: 600 8.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--inkdim); }
.barg { font: 500 9.5px/1 'JetBrains Mono', monospace; color: var(--inkdim); background: var(--chip); border: 1px solid var(--linesoft); border-radius: 20px; padding: 5px 10px; cursor: pointer; }
.barg.sel { color: var(--ember); border-color: var(--cmdborder); }

.suggest { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font: 500 10px/1 'JetBrains Mono', monospace; color: var(--inkdim); background: var(--chip); border: 1px solid var(--linesoft); border-radius: 20px; padding: 6px 12px; cursor: pointer; }
.chip:hover { color: var(--ember); border-color: var(--cmdborder); }

/* Upgrades tab: rows reuse the .invrow/.invhead/.btn idiom from the Market tab. Maxed/unaffordable
   rows are dimmed so the buyable ones stand out; the XP cost sits between the name and the button. */
.invrow.dim { opacity: .45; }
.invrow .xpcost { font: 600 10px/1 'JetBrains Mono', monospace; white-space: nowrap; }

.composer { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 11px 13px; background: var(--sidebg); }
.composer .caret { font: 500 15px/1 'JetBrains Mono', monospace; color: var(--ember); }
.composer input { flex: 1; background: transparent; border: none; outline: none; color: var(--ink); font-family: 'Spectral', serif; font-size: 15px; }
.composer .send { font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--inkdim); background: none; border: none; cursor: pointer; }
.composer .send:hover { color: var(--ember); }
.composer .send.armed { color: var(--ember); }

/* ---------- right panel ---------- */
.right { flex: 0 0 600px; max-width: 54%; display: flex; flex-direction: column; min-height: 0; background: var(--panel2); }
.tabs { display: flex; background: var(--panel); border-bottom: 1px solid var(--line); }
.tab { flex: 1; padding: 11px 8px 9px; background: transparent; border: none; border-right: 1px solid var(--linesoft); border-bottom: 2px solid transparent; cursor: pointer; font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--inkdim); }
.tab.active { background: var(--panel2); color: var(--ink); border-bottom-color: var(--ember); }

.stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background: var(--stagebg); overflow: hidden; }
.roomtitle { position: absolute; top: 14px; left: 16px; z-index: 5; font: italic 400 19px/1.1 'IM Fell English', serif; color: var(--ink); text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.grid { display: grid; position: relative; z-index: 1; }
/* the map image is painted on the canvas behind; cells are transparent hit-targets on top */
.mapcanvas { display: block; }
.cell { position: relative; background: transparent; }
.cell.walk { cursor: pointer; }
.cell.walk:hover { background: rgba(255,236,196,.07); box-shadow: inset 0 0 0 1px rgba(255,236,196,.18); }
.vignette-light { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 50% 34%, rgba(255,250,235,.18) 0%, rgba(255,250,235,0) 56%); }

/* map zoom controls — sit above the vignette, bottom-right of the stage */
.mapzoom { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: flex; gap: 4px; }
.mapzoom .zbtn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  font: 400 15px/1 'JetBrains Mono', monospace; color: var(--ink); background: rgba(20,18,14,.72); border: 1px solid rgba(201,168,106,.32);
  border-radius: 5px; backdrop-filter: blur(2px); user-select: none; }
.mapzoom .zbtn:hover { background: rgba(40,34,24,.85); border-color: rgba(201,168,106,.6); }

.panel-scroll { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* party card */
.charcard { border: 1px solid var(--line); background: var(--chip); display: flex; flex-direction: column; gap: 11px; padding: 13px 14px; }
.charcard .crow { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.charcard .cdot { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.charcard .cportrait { width: 44px; height: 44px; flex: none; border-radius: 6px; border: 1px solid var(--linesoft); display: flex; align-items: center; justify-content: center; font: 400 22px/1 'IM Fell English', serif; color: #1a160f; }
.charcard .cidcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.charcard .cname { font: 600 13.5px/1 'JetBrains Mono', monospace; color: var(--ink); }
.charcard .crole { font: 500 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--inkdim); }
.charcard .conds { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; }
.cond { font: 600 8px/1 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--dangerdim); color: var(--danger); }
.meters { display: flex; gap: 18px; flex-wrap: wrap; }
.meter { flex: 1 1 160px; display: flex; flex-direction: column; gap: 5px; }
.meter .mhead { display: flex; align-items: baseline; justify-content: space-between; }
.meter .mlabel { font: 600 8.5px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--inkdim); }
.meter .mval { font: 600 10.5px/1 'JetBrains Mono', monospace; color: var(--inkdim); }
.bar { height: 8px; background: var(--panel2); border: 1px solid var(--linesoft); }
.bar > div { height: 100%; }
.stamdots { display: flex; gap: 5px; align-items: center; min-height: 12px; flex-wrap: wrap; }
.sdot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--inkdim); }
.sdot.on { background: var(--ink); border-color: var(--ink); }
.sdot.burn { border-color: var(--danger); background: transparent; }
.stats { display: flex; gap: 6px; flex-wrap: wrap; }
.statchip { display: flex; gap: 5px; align-items: baseline; border: 1px solid var(--linesoft); padding: 4px 7px; font: 600 9px/1 'JetBrains Mono', monospace; color: var(--inkdim); }
.statchip span { color: var(--ink); }

/* inventory */
.invhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.invhead .t { font: 600 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.invhead .s { font: 500 10.5px/1 'JetBrains Mono', monospace; color: var(--inkdim); }
.invlist { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.invrow { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid var(--linesoft); }
.invrow .glyph { width: 18px; text-align: center; font: 600 15px/1 'JetBrains Mono', monospace; color: var(--ember); }
.invrow .iname { flex: 1; min-width: 0; font: 600 12.5px/1.2 'JetBrains Mono', monospace; color: var(--ink); }
.invrow .itype { width: 74px; font: 500 8.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--inkdim); }
.invrow .durpips { display: flex; gap: 3px; width: 44px; }
.durpip { width: 7px; height: 7px; border: 1px solid var(--inkdim); }
.durpip.on { background: var(--ember); border-color: var(--ember); }
.invrow .idie { width: 30px; text-align: right; font: 600 10px/1 'JetBrains Mono', monospace; color: var(--ember); }
.invrow.empty .glyph { color: var(--inkdim); }
/* a cross-link from chat highlights the target row (border-left accent, like the discovery card) */
.invrow.sel { background: var(--chip); border-left: 2px solid var(--ember); padding-left: 4px; }
.invrow.empty .iname { font: 500 9px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--inkdim); }

/* journal */
.journal { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.jnav { flex: 0 0 188px; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border-right: 1px solid var(--line); overflow: auto; }
.jgroup .glabel { font: 600 8.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--inkdim); padding: 4px 2px 3px; display: block; }
.jentry { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: transparent; border: none; border-bottom: 1px solid var(--linesoft); cursor: pointer; text-align: left; width: 100%; }
.jentry.sel { background: var(--chip); }
.jentry .jdot { width: 5px; height: 5px; flex: none; }
.jentry .jthumb { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid var(--linesoft); }
.jentry .jname { flex: 1; min-width: 0; font: 600 10.5px/1.25 'JetBrains Mono', monospace; color: var(--inkdim); }
.jentry.sel .jname { color: var(--ink); }
.jentry .jtag { flex: none; font: 600 7px/1 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.jbody { flex: 1 1 0; min-width: 0; overflow: auto; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.jbody .jhead { display: flex; align-items: flex-start; gap: 14px; }
.jbody .jglyph { width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); border-radius: 50%; color: var(--ember); font: 600 21px/1 'JetBrains Mono', monospace; }
.jbody .jtitle { font: 400 25px/1.05 'IM Fell English', serif; color: var(--ink); }
.jbody .jkind { font: 600 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--inkdim); }
.jbody .jfields { display: flex; flex-wrap: wrap; gap: 9px; }
.jfield { min-width: 120px; border: 1px solid var(--linesoft); padding: 8px 11px; display: flex; flex-direction: column; gap: 4px; }
.jfield .fl { font: 600 8px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--inkdim); }
.jfield .fv { font: 600 12px/1.25 'JetBrains Mono', monospace; color: var(--ink); }
.jbody .jpara { font: 400 16px/1.62 'Spectral', serif; color: var(--ink); max-width: 440px; }

/* combat panel */
.combat { display: flex; flex-direction: column; gap: 10px; }
.combat .chead { display: flex; align-items: baseline; gap: 10px; }
.combat .ctitle { font: 500 8.5px/1.4 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--danger); }
.combat .cname { font: 400 18px/1 'IM Fell English', serif; color: var(--ink); }
.combat .telegraph { font: 400 13.5px/1.5 'Spectral', serif; color: var(--ink); }
.combat .lethal { font: 600 9px/1.4 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--danger); }
.combat .hpbar { height: 8px; background: var(--panel2); border: 1px solid var(--linesoft); }
.combat .hpbar > div { height: 100%; background: var(--danger); }
.combat .cbtns { display: flex; gap: 8px; margin-left: auto; }
.btn { font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--line); background: var(--chip); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--ember); border-color: var(--ember); color: #16100a; }
.btn.ghost { background: transparent; color: var(--inkdim); }

/* status bar */
.statusbar { display: flex; align-items: center; gap: 0; border-top: 1px solid var(--line); background: var(--panel); }
.statusbar .sb { display: flex; flex-direction: column; gap: 3px; padding: 8px 16px; border-right: 1px solid var(--linesoft); }
.statusbar .sb .k { font: 500 7.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--inkdim); }
.statusbar .sb .v { font: 500 10.5px/1 'JetBrains Mono', monospace; color: var(--ink); }
.statusbar .sb .v .modelsel { font: 500 10.5px/1 'JetBrains Mono', monospace; color: var(--ink); background: var(--panel); border: 1px solid var(--cmdborder); border-radius: 3px; padding: 2px 4px; cursor: pointer; }
.statusbar .sb .v .modelsel:hover { border-color: var(--ember); }
.statusbar .sb .v .modelsel option { background: var(--panel); color: var(--ink); }
.statusbar .spacer { flex: 1; }
.statusbar .newrun { margin: 0 12px; font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--cmdborder); background: transparent; color: var(--ember); cursor: pointer; }
.statusbar .logout { margin: 0 12px 0 0; font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--linesoft); background: transparent; color: var(--inkdim); cursor: pointer; }
.statusbar .logout:hover { color: var(--ember); border-color: var(--cmdborder); }

.dead-banner { font: 600 10px/1.5 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--danger); padding: 10px 13px; border: 1px solid var(--dangerdim); background: rgba(178,58,58,.08); }

/* loading / waiting-on-the-AI indicator */
@keyframes pulse { 0%, 80%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }
.l-typing { display: flex; align-items: center; gap: 5px; font: 500 11px/1.5 'JetBrains Mono', monospace; color: var(--inkdim); letter-spacing: .04em; }
.l-typing .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); display: inline-block; animation: pulse 1.2s ease-in-out infinite; }
.l-typing .pulse:nth-child(2) { animation-delay: .18s; }
.l-typing .pulse:nth-child(3) { animation-delay: .36s; margin-right: 4px; }
.composer.busy { opacity: .65; }

/* focused NPC conversation (takes over the right panel) */
.convo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.convo-head { display: flex; align-items: center; gap: 11px; padding: 13px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.convo-head .portrait { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; font: 400 18px/1 'IM Fell English', serif; color: #1a160f; border-radius: 50%; overflow: hidden; background-size: cover; background-position: center top; }
.convo-id { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.convo-id .cv-name { font: 400 17px/1 'IM Fell English', serif; color: var(--ink); }
.convo-id .cv-role { font: 500 9px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--inkdim); }
.convo-thread { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.cv-line { display: flex; flex-direction: row; align-items: flex-start; gap: 9px; max-width: 86%; }
.cv-line .cv-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cv-line .cv-portrait { width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 400 14px/1 'IM Fell English', serif; color: #1a160f; }
.cv-line .cv-who { font: 600 8.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.cv-line .cv-text { font: 400 14.5px/1.55 'Spectral', serif; color: var(--ink); }
.cv-npc { align-self: flex-start; }
.cv-npc .cv-who { color: var(--ember); }
.cv-npc .cv-text { font-style: italic; }
.cv-you { align-self: flex-end; text-align: right; }
.cv-you .cv-who { color: var(--inkdim); }
.cv-you .cv-text { color: var(--inkdim); }

/* debug trace (HB_DEBUG) */
.l-trace { font-family: 'JetBrains Mono', monospace; border: 1px solid var(--linesoft); background: var(--chip); }
.l-trace > summary { cursor: pointer; padding: 7px 10px; font: 600 9px/1.3 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--inkdim); list-style: none; }
.l-trace > summary::-webkit-details-marker { display: none; }
.l-trace[open] > summary { color: var(--ember); border-bottom: 1px solid var(--linesoft); }
.trace-call { padding: 8px 10px; border-top: 1px solid var(--linesoft); }
.trace-call:first-of-type { border-top: none; }
.trace-head { font: 600 9px/1.4 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ember); margin-bottom: 4px; }
.trace-k { font: 600 8px/1.4 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--inkdim); margin-top: 5px; }
.trace-pre { margin: 2px 0 0; padding: 6px 8px; background: var(--panel2); border: 1px solid var(--linesoft); font: 400 10.5px/1.45 'JetBrains Mono', monospace; color: var(--ink); white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; }

/* ---------- front-of-house screens: login / campaign menu / player menu ---------- */
/* All wrap content in .hb[data-mode] so the theme tokens + fonts apply; .screen centers a .card. */
.screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.4); }
.card.wide-card { max-width: 460px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-title { font: 400 28px/1 'IM Fell English', serif; color: var(--ink); }
.card-sub { font: 500 10px/1.4 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--inkdim); }
.card-note { font: 400 11px/1.4 'JetBrains Mono', monospace; color: var(--inkdim); text-align: center; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field span { font: 600 8.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--inkdim); }
.field input, .menu-create input { background: var(--chip); border: 1px solid var(--line); color: var(--ink); font-family: 'Spectral', serif; font-size: 14px; padding: 9px 11px; outline: none; }
.field input:focus, .menu-create input:focus { border-color: var(--cmdborder); }
.btn.wide { width: 100%; justify-content: center; text-align: center; padding: 11px; }
.linkbtn { background: none; border: none; color: var(--inkdim); font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.linkbtn:hover { color: var(--ember); }
.menu-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow: auto; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--chip); border: 1px solid var(--linesoft); padding: 12px 14px; cursor: pointer; text-align: left; }
.menu-row:hover { border-color: var(--cmdborder); }
.menu-name { font: 600 13px/1.2 'JetBrains Mono', monospace; color: var(--ink); }
.menu-go { font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ember); margin-left: auto; }
.menu-del { color: var(--inkdim); font: 600 12px/1 'JetBrains Mono', monospace; padding: 2px 6px; }
.menu-del:hover { color: var(--ember); }
.menu-empty { font: 400 13px/1.5 'Spectral', serif; color: var(--inkdim); padding: 8px 2px; }
.menu-create { display: flex; gap: 8px; }
.menu-create input { flex: 1; }

/* ---------- token meter (HUD) + purchase overlay ---------- */
.hud .stat.tokens { cursor: pointer; }
.hud .meter { display: inline-block; width: 64px; height: 8px; background: var(--pipempty); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.hud .meter .fill { display: block; height: 100%; background: var(--ok); transition: width .3s ease; }
.hud .meter .fill.ember { background: var(--ember); }
.hud .meter .fill.danger { background: var(--danger); }

.hb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; animation: fadein .15s ease; }
.hb-modal { background: var(--panel); border: 1px solid var(--line); max-width: 420px; width: 90%; padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.hb-modal h2 { font: 400 22px/1 'IM Fell English', serif; margin: 0 0 8px; color: var(--ink); }
.hb-modal p { font-family: 'Spectral', serif; color: var(--inkdim); font-size: 13px; line-height: 1.5; margin: 0 0 16px; }
.hb-modal .bal { font: 600 13px/1.8 'JetBrains Mono', monospace; color: var(--ember); }
.hb-modal .muted { color: var(--inkdim); font-size: 12px; }
.hb-modal .pkgs { display: flex; gap: 8px; margin-bottom: 12px; }
.hb-modal .pkg { flex: 1; padding: 12px 0; background: var(--chip); border: 1px solid var(--line); color: var(--ink); font: 600 14px/1 'JetBrains Mono', monospace; cursor: pointer; }
.hb-modal .pkg:hover { border-color: var(--ember); }
.hb-modal .custom { display: flex; gap: 8px; margin-bottom: 16px; }
.hb-modal .custom input { flex: 1; min-width: 0; background: var(--chip); border: 1px solid var(--line); color: var(--ink); padding: 8px; font-family: 'JetBrains Mono', monospace; }
.hb-modal .actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hb-modal button.buy { background: var(--ember); color: var(--selfg); border: none; padding: 9px 18px; font: 600 12px/1 'JetBrains Mono', monospace; cursor: pointer; }
.hb-modal button.cancel { background: transparent; border: 1px solid var(--line); color: var(--inkdim); padding: 9px 16px; font: 600 12px/1 'JetBrains Mono', monospace; cursor: pointer; }
.hb-modal button:disabled { opacity: .5; cursor: default; }
.hb-modal .pkg.sel { border-color: var(--ember); color: var(--ember); }