:root {
  --bg: #121511; --panel: #171b15; --panel2: #1d2219; --border: #2b3128;
  --text: #d9ddd4; --muted: #9aa494; --faint: #6b7466; --accent: #9ccc5a; --accent-soft: #24301a;
  --hp: #d9534f; --hp-bg: #3a1d1c; --xp: #5aa9e6; --gold: #f0c050; --feather: #c3a6e8;
  --common: #b8bdb2; --uncommon: #9ccc5a; --rare: #5aa9e6; --epic: #b77ee0; --legendary: #f0a840;
  --mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, "IBM Plex Sans", sans-serif; }
button, input { font: inherit; color: var(--text); }
button { background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; padding: 5px 10px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.gold { color: var(--gold); } .feather { color: var(--feather); } .xp { color: var(--xp); }

/* app shell: header, stage + side panel, tab bar at the bottom */
#app { height: 100%; display: flex; flex-direction: column; }
header { display: flex; align-items: center; gap: 6px 18px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--panel); font-family: var(--mono); font-size: 13px; flex-wrap: wrap; }
#name-btn { background: none; border: 0; padding: 0; margin-right: auto; font: 600 15px var(--mono); color: var(--accent); }
#name-btn:hover { text-decoration: underline; }
#name-btn small { color: var(--faint); font-weight: normal; }
#body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
#stage-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 10px; gap: 8px; }
#panel { border-left: 1px solid var(--border); background: var(--panel); overflow-y: auto; padding: 12px; }
nav#tabs { display: flex; border-top: 1px solid var(--border); background: var(--panel); }
nav#tabs button { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; border: 0; border-radius: 0; border-top: 2px solid transparent; background: none; padding: 9px 4px 8px; font: 12px var(--mono); color: var(--muted); }
nav#tabs button .ic { display: block; font-size: 15px; line-height: 1; margin-bottom: 3px; }
nav#tabs button.on { color: var(--accent); border-top-color: var(--accent); background: var(--accent-soft); }

.zonebar { display: flex; align-items: center; gap: 8px; font-family: var(--mono); }
.zonebar .name { flex: 1; min-width: 0; }
.zonebar .name b { color: var(--text); }
.zonebar .name span { color: var(--muted); }
.bar { position: relative; height: 10px; background: var(--hp-bg); overflow: hidden; border: 1px solid #0006; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--hp); transition: width 0.15s; }
.bar.xpbar { background: #1a2633; height: 5px; margin-top: 2px; } .bar.xpbar > i { background: var(--xp); }
.bar.prog { background: var(--panel2); height: 4px; } .bar.prog > i { background: var(--accent); }
label.toggle { display: flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: 12px; cursor: pointer; white-space: nowrap; }

#stage-box { flex: 1; min-height: 200px; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; border: 1px solid var(--border); background: #000; }
#stage canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.hpcard { position: absolute; top: 3%; width: 34%; font: 12px var(--mono); color: #fff; text-shadow: 1px 1px 0 #000; }
.hpcard.k { left: 2.5%; } .hpcard.e { right: 2.5%; text-align: right; }
.hpcard .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.hpcard .bar span { position: absolute; inset: 0; font: 9px/10px var(--mono); text-align: center; }
.float { position: absolute; font: 700 15px var(--mono); pointer-events: none; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; animation: up 0.9s ease-out forwards; }
.float.crit { font-size: 18px; }
@keyframes up { to { transform: translateY(-40px); opacity: 0; } }
.log { font: 12px/1.5 var(--mono); color: var(--muted); height: 92px; overflow: hidden; border-top: 1px dashed var(--border); padding-top: 6px; }
.log div:first-child { color: var(--text); }

.tab { display: none; } .tab.on { display: block; }
h3 { margin: 14px 0 6px; font: 600 12px var(--mono); color: var(--muted); text-transform: uppercase; }
.tab > h3:first-child { margin-top: 0; }
table.stats { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
table.stats td { padding: 4px 0; border-bottom: 1px solid var(--border); }
table.stats td:last-child { text-align: right; }
.shop { display: grid; gap: 6px; }
.shop .item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 7px 9px; border: 1px solid var(--border); background: var(--panel2); }
.shop .item small { color: var(--muted); grid-column: 1; }
.shop .item button { grid-row: 1 / 3; grid-column: 2; white-space: nowrap; }
.inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.card { border: 1px solid var(--border); border-left-width: 3px; padding: 6px 8px; background: var(--panel2); font-size: 12px; }
.card .n { font-weight: 600; font-size: 13px; }
.card .s { font-family: var(--mono); color: var(--muted); margin: 2px 0 6px; }
.card .s b { color: var(--accent); font-weight: normal; } .card .s em { color: var(--hp); font-style: normal; }
.card button { font-size: 11px; padding: 2px 6px; }
.r-common { border-left-color: var(--common); } .r-common .n { color: var(--common); }
.r-uncommon { border-left-color: var(--uncommon); } .r-uncommon .n { color: var(--uncommon); }
.r-rare { border-left-color: var(--rare); } .r-rare .n { color: var(--rare); }
.r-epic { border-left-color: var(--epic); } .r-epic .n { color: var(--epic); }
.r-legendary { border-left-color: var(--legendary); } .r-legendary .n { color: var(--legendary); }
.slot-label { font: 11px var(--mono); color: var(--faint); text-transform: uppercase; margin-bottom: 2px; }
.empty { border: 1px dashed var(--border); padding: 10px; color: var(--faint); font-size: 12px; text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.overlay { position: fixed; inset: 0; background: rgba(8, 10, 7, 0.85); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 5; }
.overlay.on { display: flex; }
.overlay .box { background: var(--panel); border: 1px solid var(--border); padding: 20px; max-width: 400px; width: 100%; text-align: center; }
.overlay h2 { margin: 0 0 8px; font: 600 18px var(--mono); }
.overlay input { width: 100%; padding: 8px 10px; margin: 6px 0 12px; background: var(--bg); border: 1px solid var(--border); font-family: var(--mono); text-align: center; }
.overlay input:focus { outline: none; border-color: var(--accent); }
#name-art { display: block; margin: 0 auto 10px; image-rendering: pixelated; }

/* phones and narrow frames: stack everything, keep the tab bar pinned */
@media (max-width: 760px) {
  #body { display: block; overflow-y: auto; }
  #stage-col { padding: 8px; }
  #stage-box { flex: none; min-height: 0; display: block; }
  #stage { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
  #panel { border-left: 0; border-top: 1px solid var(--border); overflow: visible; }
  .log { height: 74px; }
  .hpcard { width: 42%; font-size: 11px; }
}

/* ---- systems round: abilities, tree, pets, bestiary, wardrobe ---- */
img.px { image-rendering: pixelated; display: block; }
#body.wide { grid-template-columns: minmax(0, 1fr) min(62%, 760px); }
@media (max-width: 760px) { #body.wide { display: block; } }

.abilities { display: flex; gap: 6px; }
.abw { flex: 1; min-width: 0; max-width: 180px; display: flex; flex-direction: column; gap: 3px; }
.ab { position: relative; width: 100%; padding: 6px 6px 5px; text-align: left; overflow: hidden; }
.ab .nm { display: block; font: 12px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab .nm b { color: var(--accent); font-weight: normal; margin-right: 4px; }
.ab .cd { position: absolute; inset: 0 auto 0 0; background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.ab.locked { opacity: 0.4; }
.abw .auto { display: inline-flex; gap: 4px; align-items: center; font: 11px var(--mono); color: var(--muted); cursor: pointer; }
.abw .auto input { margin: 0; width: 12px; height: 12px; }

.attr { display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px 30px 44px; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 13px; }
.attr small { color: var(--muted); font-size: 11px; font-family: system-ui, sans-serif; }
.attr input { width: 44px; background: var(--bg); border: 1px solid var(--border); padding: 2px 4px; font-size: 12px; text-align: center; }
.attr button { padding: 1px 0; font-size: 12px; }
.attr.head { color: var(--faint); font-size: 11px; border: 0; padding-bottom: 0; }

.tree-wrap { position: relative; border: 1px solid var(--border); background: radial-gradient(circle at 50% 50%, #1d2419, #121511 70%); }
.tree-wrap svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.tree-wrap line { stroke: #3a4234; stroke-width: 3; }
.tree-wrap line.on { stroke: var(--accent); }
.tree-wrap .node { cursor: pointer; }
.tree-wrap .node circle, .tree-wrap .node rect { fill: #20261c; stroke: #4a5444; stroke-width: 2; }
.tree-wrap .node.avail circle, .tree-wrap .node.avail rect { stroke: #c8d0b8; }
.tree-wrap .node.on circle, .tree-wrap .node.on rect { fill: #4a6a2a; stroke: var(--accent); }
.tree-wrap .node.sel circle, .tree-wrap .node.sel rect { stroke: var(--gold); stroke-width: 3; }
.tree-wrap .node text { fill: #fff; font: 11px var(--mono); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.tree-info { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); background: var(--panel2); min-height: 64px; }
.tree-info .t { font-weight: 600; }
.tree-info .k { font: 11px var(--mono); color: var(--faint); text-transform: uppercase; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.tile { border: 1px solid var(--border); background: var(--panel2); padding: 8px; font-size: 12px; text-align: center; }
.tile img.px { margin: 0 auto 6px; height: 48px; width: auto; }
.tile .n { font-weight: 600; font-size: 13px; }
.tile .s { font-family: var(--mono); color: var(--muted); font-size: 11px; margin-top: 2px; }
.tile.dim { opacity: 0.55; }
.tile.on { border-color: var(--accent); background: var(--accent-soft); }
.tile button { margin-top: 6px; font-size: 11px; padding: 2px 8px; }
.pips { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
.pips i { width: 8px; height: 8px; background: var(--border); }
.pips i.on { background: var(--gold); }
.note { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
@media (max-width: 520px) { nav#tabs button { font-size: 10px; padding: 7px 0 6px; } .ab .nm { font-size: 11px; } }

/* ---- map and classes ---- */
.map { position: relative; border: 1px solid var(--border); }
.map img.px { width: 100%; height: auto; }
.spot { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid #f0e0b0; background: #3a2a1a; color: #f0e0b0; font: 700 12px var(--mono); }
.spot.locked { opacity: 0.45; border-color: #6b7466; color: #9aa494; }
.spot.here { background: var(--accent); color: #121511; border-color: #fff; }
.spot.sel { box-shadow: 0 0 0 3px var(--gold); }
.foes { display: flex; gap: 8px; align-items: flex-end; margin: 6px 0; flex-wrap: wrap; }
.foes img.px { height: 32px; width: auto; }
.class-now { padding: 8px 10px; border: 1px solid var(--border); background: var(--panel2); }
.class-now .s, .tile .s { font-family: var(--mono); color: var(--muted); font-size: 11px; }
select { font: 12px var(--mono); color: var(--text); background: var(--bg); border: 1px solid var(--border); padding: 2px 4px; }