:root {
  --bg: #12100e;
  --bg2: #1b1815;
  --panel: #221e1a;
  --panel2: #2b2621;
  --line: #3d362e;
  --line2: #5a4f42;
  --text: #ece4d6;
  --muted: #a99c88;
  --dim: #7a6f60;
  --gold: #e0b354;
  --gold2: #b8862b;
  --red: #e0584a;
  --green: #6fcf7a;
  --blue: #5fa8e8;
  --purple: #b48cff;
  --party: #4fa3ff;
  --enemy: #ff5a4f;
  --radius: 8px;
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
  --font: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --title: 'Cinzel', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; }
body { overflow: hidden; }
#app { height: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--gold); }
h1, h2, h3 { font-family: var(--title); margin: 0; letter-spacing: .02em; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }
.hidden { display: none !important; }

.btn {
  background: linear-gradient(#3a3229, #2c261f); border: 1px solid var(--line2); border-radius: 6px; padding: 7px 12px;
  cursor: pointer; color: var(--text); font-weight: 600; transition: border-color .12s, background .12s, transform .05s; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--gold); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(#c99a3e, #8f6620); border-color: #e7c06a; color: #1b1308; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(#ddb04f, #a07428); }
.btn.danger { border-color: #8a3a32; color: #ffb4aa; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 8px; font-size: 12px; }
.btn.on { border-color: var(--gold); background: linear-gradient(#5a4a2a, #3c311c); }

input[type=text], input[type=number], select, textarea {
  background: #15120f; border: 1px solid var(--line2); border-radius: 6px; padding: 7px 9px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.card { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 600; background: #3a3229; border: 1px solid var(--line2); color: var(--muted); }
.tag.gold { color: var(--gold); border-color: var(--gold2); }
.tag.red { color: #ffb4aa; border-color: #8a3a32; }
.tag.green { color: #b8f5c0; border-color: #3f7a48; }
.tag.blue { color: #b8dcff; border-color: #2f5f8a; }

/* ---------- Home ---------- */
.home { height: 100%; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, #2b2116 0%, #12100e 65%); overflow: auto; }
.home-box { width: min(440px, calc(100% - 32px)); padding: 28px; }
.logo { text-align: center; margin-bottom: 18px; }
.logo h1 { font-size: 34px; color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 30px rgba(224, 179, 84, .25); }
.logo .sub { font-family: var(--title); color: var(--muted); letter-spacing: .3em; font-size: 12px; margin-top: 4px; }
.home-box .col > div { display: flex; flex-direction: column; gap: 5px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 12px; margin: 6px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.feature-list { margin-top: 18px; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ---------- Camp ---------- */
.camp { height: 100%; display: grid; grid-template-rows: auto 1fr; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.topbar .brand { font-family: var(--title); color: var(--gold); font-size: 18px; }
.code { font-family: var(--title); font-size: 16px; letter-spacing: .2em; color: var(--gold); background: #15120f; border: 1px dashed var(--gold2); padding: 3px 10px; border-radius: 6px; cursor: pointer; }
.players { display: flex; gap: 6px; flex-wrap: wrap; }
.pchip { display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); font-size: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #555; }
.dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.camp-body { display: grid; grid-template-columns: 1fr 360px; gap: 14px; padding: 14px; overflow: hidden; min-height: 0; }
.roster { overflow: auto; min-height: 0; }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; align-items: start; }
.char-card { display: flex; gap: 12px; padding: 12px; position: relative; }
.portrait { width: 64px; height: 64px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 30px; border: 2px solid rgba(255, 255, 255, .15); box-shadow: inset 0 -12px 20px rgba(0, 0, 0, .35); position: relative; overflow: hidden; }
.portrait img { display: block; }
.portrait.pt-head { background: none; border: 0; border-radius: 0; box-shadow: none; }
.portrait.pt-head img { width: 100%; height: 100%; image-rendering: pixelated; }
.portrait .pbadge { position: absolute; right: 2px; bottom: 1px; line-height: 1; text-shadow: 0 1px 2px #000; }
.char-card .name { font-family: var(--title); font-size: 16px; }
.xpbar { height: 6px; background: #15120f; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.xpbar > div { height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); }
.warn { color: #ffcf7a; font-size: 12px; }
.new-card { display: grid; place-items: center; min-height: 110px; border: 2px dashed var(--line2); background: transparent; cursor: pointer; color: var(--muted); font-weight: 600; }
.new-card:hover { border-color: var(--gold); color: var(--gold); }
.side { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.side > * { flex-shrink: 0; }
.setup { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.theme { padding: 8px; border-radius: 6px; border: 1px solid var(--line); background: #1a1714; cursor: pointer; font-size: 12px; }
.theme b { display: block; font-size: 13px; }
.theme.on { border-color: var(--gold); background: #2e2618; }
.theme.locked { opacity: .5; }
.chat { display: flex; flex-direction: column; min-height: 160px; flex: 1; }
.chat-log { flex: 1; overflow: auto; padding: 8px 10px; font-size: 13px; line-height: 1.45; }
.chat-log .sys { color: var(--dim); font-style: italic; }
.chat-log b { color: var(--gold); }
.chat-input { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; }
.result-banner { padding: 14px; border-radius: var(--radius); margin-bottom: 12px; display: flex; gap: 14px; align-items: center; }
.result-banner.victory { background: linear-gradient(90deg, #2c3a1f, #1d2316); border: 1px solid #5b8a3a; }
.result-banner.defeat, .result-banner.retreat { background: linear-gradient(90deg, #3a1f1f, #231616); border: 1px solid #8a3a3a; }
.result-banner h2 { font-size: 22px; }

/* ---------- Modal / editor ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .65); display: grid; place-items: center; z-index: 1000; padding: 16px; }
.modal { width: min(1100px, 100%); height: min(820px, 100%); display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden; box-shadow: var(--shadow); }
.modal-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--bg2); overflow-x: auto; }
.tab { padding: 10px 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 600; white-space: nowrap; }
.tab.on { color: var(--gold); border-bottom-color: var(--gold); }
.tab .bad { color: #ffcf7a; }
.editor { display: grid; grid-template-columns: 1fr 320px; min-height: 0; }
.editor-main { padding: 16px; overflow: auto; }
.editor-side { border-left: 1px solid var(--line); padding: 14px; overflow: auto; background: var(--bg2); font-size: 13px; }
.modal-foot { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.opt { padding: 9px 10px; border-radius: 6px; border: 1px solid var(--line); background: #1a1714; cursor: pointer; font-size: 12px; line-height: 1.35; }
.opt b { font-size: 13px; display: block; margin-bottom: 2px; color: var(--text); }
.opt:hover { border-color: var(--line2); }
.opt.on { border-color: var(--gold); background: #2e2618; box-shadow: inset 0 0 0 1px var(--gold2); }
.opt.disabled { opacity: .4; cursor: not-allowed; }
.section { margin-bottom: 18px; }
.section > h3 { margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; }
.section > h3 .count { font-family: var(--font); font-size: 12px; color: var(--muted); font-weight: 500; }
.section > h3 .count.bad { color: #ffcf7a; }
.ability-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ability { text-align: center; padding: 10px 4px; }
.ability .ab { font-family: var(--title); color: var(--gold); font-size: 13px; }
.ability .score { font-size: 24px; font-weight: 700; }
.ability .md { color: var(--muted); }
.ability select { width: 100%; margin-top: 6px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.stat { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px; text-align: center; }
.stat .v { font-size: 18px; font-weight: 700; }
.stat .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.errors { background: #3a2a14; border: 1px solid #7a5a24; border-radius: 6px; padding: 8px 10px; color: #ffd98a; font-size: 12px; }
.errors li { margin-left: -14px; }
.feat { margin-bottom: 6px; }
.feat b { color: var(--text); }
.spell-lvl { font-family: var(--title); color: var(--gold); font-size: 12px; margin: 10px 0 4px; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.swatch.on { border-color: #fff; }

/* ---------- Battle ---------- */
.battle { height: 100%; display: grid; grid-template-columns: 270px 1fr 320px; grid-template-rows: auto 1fr auto; }
.b-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--bg2); border-bottom: 1px solid var(--line); min-height: 58px; }
.initiative { display: flex; gap: 4px; overflow-x: auto; flex: 1; padding: 2px; }
.init-chip { flex: none; width: 46px; text-align: center; font-size: 10px; border-radius: 6px; padding: 3px 2px; background: var(--panel2); border: 1px solid var(--line); cursor: pointer; position: relative; }
.init-chip .ic { width: 30px; height: 30px; margin: 0 auto 2px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; border: 2px solid; }
.init-chip.cur { border-color: var(--gold); box-shadow: 0 0 10px rgba(224, 179, 84, .5); }
.init-chip.dead { opacity: .3; }
.init-chip .hpb { height: 3px; background: #333; border-radius: 2px; overflow: hidden; margin: 1px 3px 0; }
.init-chip .hpb div { height: 100%; }
.b-left { border-right: 1px solid var(--line); overflow: hidden; padding: 10px; background: var(--bg2); display: flex; flex-direction: column; min-height: 0; }
.b-center { position: relative; overflow: hidden; background: #0d0b09; }
.b-center canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.b-right { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--bg2); }
.b-bottom { grid-column: 1 / -1; border-top: 1px solid var(--line); background: var(--bg2); padding: 8px 12px; min-height: 64px; }
.turn-banner { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 6px 18px; border-radius: 99px; background: rgba(20, 16, 12, .85); border: 1px solid var(--line2); font-family: var(--title); font-size: 15px; pointer-events: none; white-space: nowrap; }
.turn-banner.mine { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 20px rgba(224, 179, 84, .3); }
.hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(20, 16, 12, .85); border: 1px solid var(--line2); padding: 5px 12px; border-radius: 6px; font-size: 12px; color: var(--muted); pointer-events: none; white-space: nowrap; }
.cam-ctrl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.cam-ctrl .btn { padding: 4px 8px; }
.tooltip { position: fixed; z-index: 40; pointer-events: none; background: rgba(18, 15, 12, .96); border: 1px solid var(--line2); border-radius: 6px; padding: 8px 10px; font-size: 12px; max-width: 280px; box-shadow: var(--shadow); }
.unit-panel h3 { font-size: 16px; }
.hpline { height: 10px; background: #15120f; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); margin: 6px 0 2px; position: relative; }
.hpline > div { height: 100%; }
.hpline .temp { position: absolute; top: 0; right: 0; background: rgba(120, 190, 255, .7); }
.effects { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.eff { font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid; }
.eff.good { color: #b8f5c0; border-color: #3f7a48; background: #1c2a1d; }
.eff.bad { color: #ffb4aa; border-color: #8a3a32; background: #2a1c1b; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12px; }
.kv span:nth-child(odd) { color: var(--muted); }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pip { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--purple); }
.pip.full { background: var(--purple); }
.log-tabs { display: flex; border-bottom: 1px solid var(--line); }
.log-tabs div { flex: 1; text-align: center; padding: 8px; cursor: pointer; color: var(--muted); font-weight: 600; }
.log-tabs div.on { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.log { flex: 1; overflow: auto; padding: 8px 10px; font-size: 12px; line-height: 1.5; }
.log div { padding: 1px 0; border-bottom: 1px solid rgba(255, 255, 255, .03); }
.log .sys { color: var(--gold); font-family: var(--title); text-align: center; padding: 4px 0; }
.log .hit { color: #ffd2a6; }
.log .miss { color: var(--dim); }
.log .good { color: #a6f0b0; }
.log .bad { color: #ff9d92; }
.log .spell { color: #d6c2ff; }
.log .warn { color: #ffd166; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.economy { display: flex; gap: 10px; align-items: center; margin-right: 6px; font-size: 12px; }
.econ { display: flex; align-items: center; gap: 4px; }
.econ i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid; }
.econ.action i { border-color: #6fcf7a; }
.econ.bonus i { border-color: #e0b354; transform: rotate(45deg) scale(.85); }
.econ.react i { border-color: #b48cff; border-radius: 50%; }
.econ.full i { background: currentColor; }
.econ.action { color: #6fcf7a; }
.econ.bonus { color: #e0b354; }
.econ.react { color: #b48cff; }
.submenu { position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 8px; box-shadow: var(--shadow); max-height: 60vh; overflow: auto; z-index: 30; width: 420px; max-width: calc(100vw - 24px); }
.menu-wrap { position: relative; }
.sp-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.sp-row:hover { background: #2e2618; border-color: var(--line2); }
.sp-row.disabled { opacity: .4; cursor: not-allowed; }
.sp-row .lv { width: 22px; height: 22px; border-radius: 50%; background: #3a2f4a; color: #d6c2ff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.sp-row .cost { font-size: 10px; color: var(--muted); }
.mods { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.mods select { padding: 3px 6px; }
.end-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); pointer-events: none; }
.end-overlay h1 { font-size: 56px; text-shadow: 0 4px 20px #000; }

#toasts { position: fixed; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2000; }
.toast { background: var(--panel); border: 1px solid var(--line2); border-left: 3px solid var(--red); padding: 8px 12px; border-radius: 6px; box-shadow: var(--shadow); max-width: 320px; font-size: 13px; animation: tin .2s ease-out; }
.toast.ok { border-left-color: var(--green); }
@keyframes tin { from { transform: translateX(20px); opacity: 0; } }

@media (max-width: 1100px) {
  .battle { grid-template-columns: 220px 1fr 260px; }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .camp-body { grid-template-columns: 1fr; overflow: auto; }
  .editor { grid-template-columns: 1fr; }
  .editor-side { border-left: none; border-top: 1px solid var(--line); }
  .ability-grid { grid-template-columns: repeat(3, 1fr); }
  .battle { grid-template-columns: 1fr; grid-template-rows: auto 55vh auto auto auto; height: auto; min-height: 100%; }
  .b-left, .b-right { border: none; border-top: 1px solid var(--line); max-height: 260px; }
}

/* ---------- Shop ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.shop-item { display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.shop-item.owned { border-color: #3f7a48; }
.price { font-weight: 700; color: var(--gold); }
.price.poor { color: #a06a5a; }
.gold-pill { font-weight: 700; color: var(--gold); background: #2e2618; border: 1px solid var(--gold2); padding: 4px 12px; border-radius: 99px; }

/* ---------- Equipment / paper doll ---------- */
.doll { display: grid; grid-template-columns: 1fr minmax(220px, 280px) 1fr; gap: 12px; align-items: start; }
.doll .col { gap: 6px; }
.avatar { text-align: center; background: radial-gradient(ellipse at 50% 85%, #3a2e1e 0%, #1a1714 70%); border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.avatar canvas { width: 100%; height: auto; display: block; }
.slot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #1a1714; cursor: pointer; min-height: 48px; transition: border-color .12s; }
.slot:hover { border-color: var(--line2); }
.slot.sel { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold2); background: #2e2618; }
.slot.empty .ic { opacity: .45; }
.slot .ic { font-size: 18px; width: 26px; text-align: center; flex: none; }
.slot .nm { font-size: 13px; font-weight: 600; line-height: 1.2; }
.slot .nm.magic { color: #8fd3ff; }
.shop-item.dimmed { opacity: .45; }
@media (max-width: 900px) { .doll { grid-template-columns: 1fr; } }

/* ---------- World map ---------- */
.wm-wrap { padding: 6px; background: #3a2a18; border-color: #5a4020; }
.wm-view { position: relative; aspect-ratio: 1000 / 560; overflow: hidden; border-radius: 6px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; background: #a88a58; }
.wm-view.dragging { cursor: grabbing; }
.wm-view.dragging .wm-node { cursor: grabbing; }
.worldmap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; font-family: var(--title); }
.wm-ctrl { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.wm-ctrl .btn { width: 32px; height: 30px; padding: 0; font-size: 16px; line-height: 1; background: rgba(40, 28, 16, .82); border-color: #7a5a30; color: #f3e6c4; }
.wm-ctrl .btn:hover { background: rgba(70, 48, 24, .92); }
.wm-zoomlvl { font-size: 10px; color: #f3e6c4; background: rgba(40, 28, 16, .7); border-radius: 4px; padding: 1px 4px; font-family: var(--font); }
.wm-mini { position: absolute; right: 8px; bottom: 8px; width: 168px; height: 94px; border: 2px solid #5a4020; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.45); cursor: crosshair; opacity: .92; }
.wm-hint { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: #f3e6c4; background: rgba(40, 28, 16, .6); padding: 2px 8px; border-radius: 10px; pointer-events: none; font-family: var(--font); }
.wm-region.big { font-size: 26px; letter-spacing: .25em; opacity: .62; }
.wm-view.far .wm-region { font-size: 30px; opacity: .8; }
.wm-view.far .wm-region.big { font-size: 34px; letter-spacing: .12em; }
.wm-view.far .wm-lvl { display: none; }
.wm-node.conquered > circle, .wm-node.conquered > text:not(.wm-label):not(.wm-lvl) { filter: saturate(.55) brightness(.92); }
.wm-node.conquered .wm-label { fill: #5a4630; }
.wm-node.conquered.dungeon > circle, .wm-node.conquered.dungeon > text { filter: none; }
.wm-node.conquered.dungeon .wm-label { fill: #6a4410; }
.wm-progress { position: absolute; top: 8px; left: 8px; font-size: 11px; color: #f3e6c4; background: rgba(40, 28, 16, .72); padding: 3px 9px; border-radius: 10px; pointer-events: none; font-family: var(--font); }
.wm-status { margin: -2px 0 8px; padding: 6px 10px; border-radius: 6px; line-height: 1.45; }
.wm-status.done { background: #2e2814; border: 1px solid #8a6a24; color: #f0d68a; }
.wm-status.todo { background: #1f1a14; border: 1px solid var(--line); }
.wm-view.fit .wm-mini { opacity: 0; pointer-events: none; }
.wm-mini { transition: opacity .2s; }
.wm-view.far .wm-node:not(.frontier):not(.sel) .wm-label { display: none; }
.wm-view.far .wm-node.frontier .wm-label, .wm-view.far .wm-node.sel .wm-label { font-size: 19px; stroke-width: 4px; }
@media (max-width: 700px) { .wm-mini { width: 110px; height: 62px; } .wm-hint { display: none; } }
.wm-node { cursor: pointer; }
.wm-node.locked { cursor: default; opacity: .75; }
.wm-node:hover circle { filter: brightness(1.2); }
.wm-label { font-size: 12px; font-weight: 800; fill: #3a2410; paint-order: stroke; stroke: #f3e6c4; stroke-width: 3px; }
.wm-lvl { font-size: 10px; fill: #6b4a24; font-family: var(--font); font-weight: 700; paint-order: stroke; stroke: #f3e6c4; stroke-width: 2.5px; }
.wm-region { font-size: 17px; fill: #5a4020; opacity: .55; letter-spacing: .2em; font-style: italic; }
.wm-pulse { fill: none; stroke: #ffd66b; stroke-width: 2.5; animation: wmpulse 1.8s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes wmpulse { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(1.5); } }
.wm-token { animation: wmbob 1.6s ease-in-out infinite; }
@keyframes wmbob { 50% { transform: translateY(-3px); } }
details.setup summary { cursor: pointer; }
details.setup[open] summary { margin-bottom: 8px; }

/* ---------- Race & class picker ---------- */
.rc-layout { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.15fr); gap: 18px; align-items: start; }
.rc-avatar { padding: 0; }
.rc-avatar canvas { width: 100%; height: auto; display: block; }
.rc-info { font-size: 13px; line-height: 1.45; }
.rc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.rc-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: 8px; background: #1a1714; cursor: pointer; transition: border-color .12s, background .12s, transform .08s; }
.rc-row img { border-radius: 6px; background: radial-gradient(circle at 50% 35%, #3a3026, #15120f); flex: none; }
.rc-row b { font-size: 13px; }
.rc-row:hover { border-color: var(--line2); background: #241f1a; transform: translateX(2px); }
.rc-row.on { border-color: var(--gold); background: #2e2618; box-shadow: inset 0 0 0 1px var(--gold2); }
.rc-row.disabled { opacity: .35; cursor: not-allowed; transform: none; }
@media (max-width: 900px) { .rc-layout { grid-template-columns: 1fr; } }
.rc-lists h3 .count { font-family: var(--font); font-size: 12px; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: 6px; }

/* ---------- Team phases & unit avatar ---------- */
.init-chip.done { opacity: .5; }
.init-chip.done::after { content: '✓'; position: absolute; top: 1px; right: 4px; color: var(--green); font-weight: 800; font-size: 12px; }
.init-chip.acting { border-color: #8a7030; }
.init-sep { flex: none; align-self: center; font-size: 10px; letter-spacing: .08em; color: var(--dim); padding: 0 4px; white-space: nowrap; }
.unit-avatar { position: relative; margin: -4px -4px 8px; border-radius: 10px; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 90%, #2e2519 0%, #15120f 75%); overflow: hidden; }
.unit-avatar.enemy { background: radial-gradient(ellipse at 50% 90%, #2e1a17 0%, #15100f 75%); }
.unit-avatar canvas { width: 100%; height: auto; display: block; }
.ua-state { position: absolute; top: 6px; right: 8px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: rgba(0,0,0,.55); color: var(--gold); }

.shop-avatar { position: relative; margin-bottom: 10px; }
.shop-avatar canvas { width: 100%; height: auto; display: block; }
.sh-prev { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 12px; font-weight: 700; color: #8fd3ff; text-shadow: 0 1px 3px #000; pointer-events: none; }
.stat .delta { font-size: 11px; margin-left: 3px; }
.stat .delta.up { color: var(--green); }
.stat .delta.down { color: var(--red); }

/* ---------- Battle character sheet ---------- */
#b-unit { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.unit-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sheet-quick { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.sheet-quick .btn { padding: 2px 8px; font-size: 11px; }
.sheet-quick .btn.acting { border-color: #8a3a32; }
.sheet-tabs { display: flex; border-bottom: 1px solid var(--line); margin: 8px -2px 0; }
.sheet-tabs div { flex: 1; text-align: center; padding: 6px 2px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.sheet-tabs div.on { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.sheet-body { flex: 1; overflow: auto; min-height: 120px; padding: 6px 2px 4px; }
.sheet-body h4 { font-family: var(--title); color: var(--gold); font-size: 12px; margin: 10px 0 4px; letter-spacing: .03em; }
.sheet-item { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 12px; }
.sheet-item.spent { opacity: .5; }
.abil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 0 8px; }
.abil { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; text-align: center; padding: 3px 2px; }
.abil.prof { border-color: var(--gold2); }
.abil .k { font-size: 10px; color: var(--muted); font-weight: 700; }
.abil .v { font-size: 15px; font-weight: 700; line-height: 1.1; }
.abil .m { font-size: 11px; color: var(--muted); }
.abil .s { font-size: 9px; color: var(--dim); }
.unit-avatar canvas { max-height: 170px; object-fit: contain; }

/* ---------- Party hero cards / shared sheet ---------- */
.hero-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.hc-head { display: flex; gap: 12px; align-items: center; }
.hc-head .name { font-family: var(--title); font-size: 17px; }
.hc-status { margin-top: 2px; }
.hc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hc-actions select { padding: 4px 6px; font-size: 12px; max-width: 130px; }
.sheet-summary h4 { font-family: var(--title); font-size: 12px; color: var(--gold); margin: 10px 0 4px; letter-spacing: .04em; }
.sheet-summary .sh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 8px; }
.sheet-summary.compact .sh-stats { grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 0 0 6px; }
.sheet-summary.compact .stat { padding: 4px 2px; }
.sheet-summary.compact .stat .v { font-size: 15px; }
.sheet-summary.compact .stat .k { font-size: 9px; }
.sh-abil { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; text-align: center; }
.sh-abil > div { padding: 2px 0; border-radius: 4px; }
.sh-abil > div.prof { box-shadow: inset 0 -2px 0 var(--gold2); }
.sh-atk { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.sh-atk .magic { color: #8fd3ff; }
.sh-slots { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sh-chips .chip { font-size: 11px; padding: 2px 7px; border-radius: 99px; background: #2a2236; border: 1px solid #4a3a66; color: #d6c2ff; white-space: nowrap; cursor: help; }
.sh-chips .chip.cantrip { background: #1f2a2a; border-color: #2f5a5a; color: #a8e6e0; }
.sh-chips .chip i { font-style: normal; font-weight: 800; margin-right: 4px; color: #b48cff; }

#skirmish .row.wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#skirmish select { width: 100%; }

.vchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 6px; }
.vchip { min-width: 30px; padding: 3px 5px; font-size: 12px; font-weight: 700; border-radius: 5px; border: 1px solid var(--line2); background: #1a1714; color: var(--muted); cursor: pointer; }
.vchip:hover { border-color: var(--gold2); color: var(--text); }
.vchip.on { background: linear-gradient(#c99a3e, #8f6620); border-color: #e7c06a; color: #1b1308; }

/* ---------- Dungeons ---------- */
.reveal-banner { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); text-align: center; padding: 14px 34px; border-radius: 10px; background: rgba(18,14,10,.88); border: 1px solid var(--gold2); box-shadow: 0 0 40px rgba(224,179,84,.25); pointer-events: none; animation: rbin 2.6s ease forwards; z-index: 5; }
.reveal-banner.boss { border-color: #b33a2a; box-shadow: 0 0 50px rgba(255,80,60,.35); }
.reveal-banner .rb-name { font-family: var(--title); font-size: 26px; color: var(--gold); }
.reveal-banner.boss .rb-name { color: #ff8070; }
.reveal-banner .rb-sub { color: var(--muted); margin-top: 2px; }
@keyframes rbin { 0% { opacity: 0; transform: translate(-50%, 12px); } 12% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; } }

.slotcount { font-family: var(--font); font-size: 11px; color: #d6c2ff; letter-spacing: 0; text-transform: none; font-weight: 600; }
.slotcount.empty { color: #ff9d92; }
.pchip.ready { border-color: #3f7a48; background: #1c2a1d; }
.ready-btn.on { background: linear-gradient(#3f8a4a, #2a5e32); border-color: #6fcf7a; color: #eaffea; }

/* shop filters */
.shop-filters { background: rgba(0,0,0,.18); border: 1px solid var(--line, #3a3a48); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.shop-filters input[type=search], .shop-filters select { background: #1b1b24; color: inherit; border: 1px solid #3a3a48; border-radius: 6px; padding: 4px 8px; }
.chip { --chip: #c9a24a; background: transparent; color: var(--chip); border: 1px solid color-mix(in srgb, var(--chip) 45%, transparent); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.chip:hover { background: color-mix(in srgb, var(--chip) 12%, transparent); }
.chip.on { background: color-mix(in srgb, var(--chip) 25%, transparent); border-color: var(--chip); color: #fff; }
.tag.rar { font-size: 10px; }
.cleared-bar { display: flex; align-items: center; gap: 10px; padding: 4px 10px; border: 1px solid #c9a24a; border-radius: 8px; background: rgba(201,162,74,.12); color: var(--gold, #e0b354); font-weight: 600; }
.challenge input[type=range] { accent-color: #c9a24a; }
.chal-val { color: var(--gold, #e0b354); font-weight: 600; }
/* hideable log & chat */
.battle.log-hidden { grid-template-columns: 270px 1fr 0; }
.battle.log-hidden .b-right { display: none; }
.log-tabs { display: flex; align-items: center; }
.log-tabs .log-hide { margin-left: auto; padding: 2px 8px; }
.log-show { position: absolute; right: 10px; bottom: 10px; z-index: 5; display: none; }
.battle.log-hidden .log-show { display: inline-flex; gap: 6px; align-items: center; }
.log-show .badge { background: #c0392b; color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }

/* spell & attack boards */
.submenu.spell-board { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); width: min(1180px, calc(100vw - 32px)); max-height: min(70vh, 640px); display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; z-index: 40; background: rgba(20,18,26,.97); border: 1px solid #5a4a2a; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.spell-board .board-top { gap: 10px; align-items: center; }
.spell-board .board-tools select { margin: 0 4px; }
.sb-cols { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; min-height: 0; flex: 1; padding-bottom: 4px; }
.sb-col { flex: 0 0 210px; display: flex; flex-direction: column; min-height: 0; background: rgba(255,255,255,.03); border: 1px solid #2f2a3a; border-radius: 9px; }
.sb-col.items { border-color: #4a3a6a; }
.sb-head { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: 1px solid #2f2a3a; color: var(--gold, #e0b354); position: sticky; top: 0; }
.sb-head b { margin-right: auto; }
.sb-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.sp-card { border: 1px solid #3a3346; background: #1d1a26; border-radius: 8px; padding: 7px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .12s, transform .12s; }
.sp-card:hover:not(.disabled) { border-color: var(--gold, #e0b354); transform: translateY(-1px); }
.sp-card.disabled { opacity: .45; cursor: not-allowed; }
.sp-card .desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-card.item { border-color: #4a3a6a; }
.atk-board { width: min(900px, calc(100vw - 32px)); }
.atk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; overflow-y: auto; }
.atk-stats { display: flex; gap: 14px; }
.atk-stats span { display: flex; flex-direction: column; }
.atk-stats b { font-size: 17px; color: #fff; }
.atk-stats i { font-style: normal; font-size: 11px; color: var(--muted, #999); }
@keyframes endGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,200,80,.0), 0 0 6px rgba(255,200,80,.35); } 50% { box-shadow: 0 0 0 4px rgba(255,200,80,.25), 0 0 22px rgba(255,200,80,.9); } }
#a-end.glow { animation: endGlow 1.4s ease-in-out infinite; }

/* ---- travel: party token, adjacent nodes, location states ---- */
.wm-party { animation: wmbob 1.6s ease-in-out infinite; }
.wm-party.walking { animation: wmstep .32s ease-in-out infinite; }
.wm-party.walking .leg.l { animation: wmlegl .32s ease-in-out infinite; transform-origin: 50% 0; transform-box: fill-box; }
.wm-party.walking .leg.r { animation: wmlegr .32s ease-in-out infinite; transform-origin: 50% 0; transform-box: fill-box; }
.wm-party .pennant { animation: wmflap 1.2s ease-in-out infinite; transform-origin: 0 50%; transform-box: fill-box; }
@keyframes wmstep { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes wmlegl { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } }
@keyframes wmlegr { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
@keyframes wmflap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.82) skewY(4deg); } }
.wm-adj { fill: none; stroke: #ffe9a8; stroke-width: 2.5; stroke-dasharray: 4 4; opacity: .9; animation: wmadj 6s linear infinite; }
@keyframes wmadj { to { stroke-dashoffset: -48; } }
.wm-where { font-size: 12px; padding: 5px 8px; border-radius: 6px; margin: 4px 0; }
.wm-where.here { background: #2c4a2a; border: 1px solid #4a7a44; }
.wm-where.adj { background: #3a3220; border: 1px solid #7a6430; }
.wm-where.far { background: #2a2622; border: 1px solid #4a423a; color: #b9ab98; }
.wm-status.must { background: #4a1a14; border: 1px solid #8a3a2a; padding: 6px 8px; border-radius: 6px; margin-bottom: 6px; }
.wm-status.ambush { background: #3e2a12; border: 1px solid #8a5a20; padding: 6px 8px; border-radius: 6px; margin-bottom: 6px; }
.wm-services { background: #1e2a3a; border: 1px solid #36506e; padding: 6px 8px; border-radius: 6px; margin-bottom: 8px; line-height: 1.6; }
.campbar .campbar-at { font-size: 14px; }
/* hero condition */
.hc-cond { display: flex; flex-direction: column; gap: 3px; }
.hpbar { height: 7px; background: #15120f; border-radius: 4px; overflow: hidden; }
.hpbar > div { height: 100%; transition: width .3s; }
/* battle recap */
.modal.recap { display: block; height: auto; max-width: 860px; width: calc(100vw - 32px); max-height: calc(100vh - 40px); overflow: auto; padding: 18px; }
.recap-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.recap-ico { font-size: 48px; }
.recap.victory h2 { color: var(--gold); }
.recap.defeat h2 { color: #ff8a80; }
.recap-earn { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.recap-earn > div { background: #1d1914; border: 1px solid #3a3226; border-radius: 8px; padding: 6px 12px; display: flex; flex-direction: column; align-items: center; min-width: 96px; }
.recap-earn b { font-size: 18px; }
.recap-earn span { font-size: 11px; color: #a89a86; }
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.award { background: linear-gradient(180deg, #2a2318, #1b1711); border: 1px solid #5a4a2a; border-radius: 8px; padding: 8px; text-align: center; }
.aw-ico { font-size: 22px; }
.aw-l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #c8b48a; }
.aw-n { font-weight: 700; margin-top: 2px; }
.aw-v { font-size: 12px; color: #a89a86; }
.recap-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 10px; }
.recap-table th { text-align: right; font-weight: 600; color: #a89a86; font-size: 11px; text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid #3a3226; }
.recap-table td { text-align: right; padding: 4px 6px; border-bottom: 1px solid #2a241c; }
.recap-table th:first-child, .recap-table td:first-child { text-align: left; }
.rc-hero { display: flex; align-items: center; gap: 8px; }
/* collapsible camp side panel */
.camp-body { position: relative; }
.camp-body.side-hidden { grid-template-columns: 1fr 0; }
.camp-body.side-hidden > .side { display: none; }
.side-show { display: none; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 6; writing-mode: vertical-rl; padding: 12px 4px; border-radius: 8px 0 0 8px; }
.camp-body.side-hidden { padding-right: 34px; }
.camp-body.side-hidden .side-show { display: inline-flex; }
.side-head { align-items: center; margin-bottom: -4px; }
/* spell hotbar */
.hotbar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.hb-slot { position: relative; width: 92px; height: 52px; border-radius: 8px; border: 1px solid #5a4a2a; background: linear-gradient(180deg, #2a2434, #1a1622); color: #eee; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 4px 6px; text-align: left; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.hb-slot:hover:not(.off):not(.empty) { border-color: var(--gold, #e0b354); box-shadow: 0 0 10px rgba(224,179,84,.35); }
.hb-slot.on { border-color: var(--gold, #e0b354); background: linear-gradient(180deg, #3a3020, #221c12); }
.hb-slot.off { opacity: .45; cursor: not-allowed; }
.hb-slot.empty { border-style: dashed; opacity: .5; }
.hb-key { position: absolute; top: 3px; left: 5px; font-size: 10px; color: var(--gold, #e0b354); font-weight: 700; }
.hb-name { font-size: 11px; font-weight: 600; line-height: 1.1; max-height: 2.3em; overflow: hidden; }
.hb-lv { font-size: 10px; color: var(--muted, #999); }
.hotbar.edit .hb-slot { cursor: pointer; }
.tag.explore { color: #9fe0b0; border-color: #3f7a52; background: rgba(60,140,90,.15); }
/* hotbar slot-level picker */
.hb-cell { position: relative; display: inline-flex; }
.hb-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 30; background: rgba(22,19,30,.98); border: 1px solid var(--gold, #e0b354); border-radius: 10px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.6); white-space: nowrap; animation: hbSlide .16s ease-out; }
.hb-pop::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--gold, #e0b354); }
@keyframes hbSlide { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* recast dock at the right end of the hotbar */
.hotbar .hb-spacer { flex: 1; min-width: 12px; }
.hb-slot.recast { border-color: #6a8fd8; background: linear-gradient(180deg, #24304a, #161c2c); }
.hb-slot.recast .hb-key { color: #9fc4ff; font-size: 13px; }
.hb-slot.recast:hover:not(.off) { border-color: #9fc4ff; box-shadow: 0 0 10px rgba(120,170,255,.4); }

/* hotbar ability icons (client/js/icons.js) */
.hb-slot:has(.hb-ico) { width: 58px; height: 58px; padding: 0; border-radius: 10px; border: 1px solid #2a2230; background: #0c0a10; transition: transform .1s, box-shadow .12s; }
.hb-ico { position: absolute; inset: 0; pointer-events: none; }
.hb-ico svg { width: 100%; height: 100%; display: block; transition: filter .15s; }
.hb-slot:has(.hb-ico):hover:not(.off):not(.empty) { transform: translateY(-2px); }
.hb-slot:has(.hb-ico):hover:not(.off) .hb-ico svg { filter: brightness(1.15) saturate(1.1); }
.hb-slot:has(.hb-ico) .hb-key { z-index: 2; top: 2px; left: 6px; font-size: 12px; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 1px #000; }
.hb-slot:has(.hb-ico) .hb-lv { position: absolute; left: 3px; right: 3px; bottom: 3px; z-index: 2; text-align: center; font-size: 9px; font-weight: 700; line-height: 1.35; color: #f4e6c0; background: rgba(0,0,0,.62); border-radius: 0 0 7px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-slot:has(.hb-ico) .hb-name { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; max-height: none; background: rgba(14,12,20,.96); border: 1px solid #5a4a2a; border-radius: 6px; padding: 3px 8px; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 25; }
.hb-slot:has(.hb-ico):hover .hb-name { opacity: 1; }
.hb-cell:has(.hb-pop) .hb-name { display: none; }
.hb-slot.off:has(.hb-ico) { opacity: 1; }
.hb-slot.off .hb-ico svg { filter: grayscale(1) brightness(.5); }
.hb-slot.off:has(.hb-ico) .hb-key, .hb-slot.off:has(.hb-ico) .hb-lv { color: #9a9a9a; }
.hb-slot.on:has(.hb-ico) { border-color: var(--gold, #e0b354); box-shadow: 0 0 0 2px var(--gold, #e0b354), 0 0 16px rgba(224,179,84,.75); }
.hb-slot.recast:has(.hb-ico) { border-color: #6a8fd8; box-shadow: 0 0 0 1px #6a8fd8; }
.hotbar.edit .hb-wrap { display: flex; flex-direction: column; align-items: center; width: 66px; }
.hotbar.edit .hb-slot.empty { width: 58px; height: 58px; }
.hb-cap { font-size: 10px; line-height: 1.15; text-align: center; max-width: 66px; margin-top: 3px; height: 2.3em; overflow: hidden; color: var(--text, #ddd); }
.chip-ico { vertical-align: middle; margin: -3px 2px -2px -2px; border-radius: 4px; }
.sp-ico { flex: 0 0 auto; border-radius: 5px; margin-right: 6px; vertical-align: middle; }
@media (max-width: 640px) { .hb-slot:has(.hb-ico), .hotbar.edit .hb-slot.empty { width: 48px; height: 48px; } .hb-slot:has(.hb-ico) .hb-lv { font-size: 8px; } }

/* hotbar v3: icon on the left, name + note on the right (no :has() needed) */
.hotbar .hb-slot { width: 150px; height: 52px; padding: 4px 8px 4px 54px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; background: linear-gradient(180deg, #2a2434, #1a1622); border: 1px solid #4a3e2a; }
.hotbar .hb-slot .hb-ico { position: absolute; left: 4px; top: 4px; width: 44px; height: 44px; inset: 4px auto auto 4px; border-radius: 8px; overflow: hidden; }
.hotbar .hb-slot .hb-ico svg { width: 44px; height: 44px; }
.hotbar .hb-slot .hb-key { position: absolute; left: 6px; top: 2px; z-index: 3; font-size: 11px; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.hotbar .hb-slot .hb-name { position: static; transform: none; opacity: 1; background: none; border: 0; padding: 0; font-size: 12px; font-weight: 600; line-height: 1.15; white-space: normal; max-height: 2.3em; overflow: hidden; color: #f2ead8; text-align: left; }
.hotbar .hb-slot .hb-lv { position: static; background: none; padding: 0; text-align: left; font-size: 10px; font-weight: 600; color: #c9b88e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hotbar .hb-slot.off .hb-name, .hotbar .hb-slot.off .hb-lv { color: #8a8a8a; }
.hotbar .hb-slot:hover:not(.off):not(.empty) { transform: translateY(-1px); border-color: var(--gold, #e0b354); }
.hotbar .hb-slot.on { border-color: var(--gold, #e0b354); box-shadow: 0 0 0 1px var(--gold, #e0b354), 0 0 14px rgba(224,179,84,.6); }
.hotbar .hb-slot.recast { border-color: #6a8fd8; background: linear-gradient(180deg, #24304a, #161c2c); }
.hotbar.edit .hb-slot, .hotbar.edit .hb-slot.empty { width: 150px; height: 52px; }
.hotbar.edit .hb-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
@media (max-width: 760px) { .hotbar .hb-slot, .hotbar.edit .hb-slot { width: 120px; } .hotbar .hb-slot .hb-name { font-size: 11px; } }
.hotbar .hb-cell .hb-slot .hb-name { display: block !important; visibility: visible !important; opacity: 1 !important; }

/* hotbar editor (drag & drop) */
.hbe-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.hbe-cell { position: relative; min-height: 58px; border: 1px dashed #4a3e2a; border-radius: 10px; background: rgba(255,255,255,.02); display: flex; align-items: stretch; transition: border-color .12s, background .12s; }
.hbe-cell.drop-over { border-color: var(--gold, #e0b354); background: rgba(224,179,84,.12); }
.hbe-key { position: absolute; top: 3px; left: 6px; font-size: 11px; font-weight: 700; color: var(--gold, #e0b354); z-index: 2; text-shadow: 0 1px 2px #000; }
.hbe-empty { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted, #888); opacity: .6; }
.hbe .is-dragging .hbe-empty, .hbe.is-dragging .hbe-empty { opacity: 1; }
.hbe-slot { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 26px 8px 18px; border-radius: 10px; background: linear-gradient(180deg, #2a2434, #1a1622); border: 1px solid #5a4a2a; cursor: grab; min-width: 0; }
.hbe-slot svg { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; }
.hbe-slot.dragging, .hbe-tile.dragging { opacity: .4; }
.hbe-name { font-size: 12px; font-weight: 600; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.hbe-x { position: absolute; top: 3px; right: 4px; border: 0; background: none; color: var(--muted, #999); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 4px; }
.hbe-x:hover { color: #fff; background: rgba(255,255,255,.08); }
.hbe-group { border: 1px solid #2f2a3a; border-radius: 9px; margin-bottom: 8px; background: rgba(255,255,255,.02); }
.hbe-group > summary { cursor: pointer; padding: 8px 10px; font-weight: 700; color: var(--gold, #e0b354); list-style: none; }
.hbe-group > summary::-webkit-details-marker { display: none; }
.hbe-group > summary::before { content: '▸ '; color: var(--muted, #999); }
.hbe-group[open] > summary::before { content: '▾ '; }
.hbe-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 0 10px 10px; }
.hbe-tile { position: relative; display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 8px; border: 1px solid #3a3346; background: #1d1a26; cursor: grab; font-size: 12px; min-width: 0; user-select: none; }
.hbe-tile:hover { border-color: var(--gold, #e0b354); }
.hbe-tile svg { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px; }
.hbe-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbe-tile.on { border-color: #8a7030; background: #2a2416; }
.hbe-pin { position: absolute; top: 2px; right: 5px; font-style: normal; font-size: 10px; color: var(--gold, #e0b354); }
.hbe.is-dragging .hbe-drop-remove.drop-over { outline: 2px dashed #c0392b; outline-offset: 4px; border-radius: 10px; }
@media (max-width: 900px) { .hbe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hbe-slot { gap: 6px; padding-left: 16px; }
.hbe-slot svg { width: 34px; height: 34px; flex-basis: 34px; }
.hbe-name { word-break: normal; overflow-wrap: normal; hyphens: auto; font-size: 11.5px; }
/* shop equipment-slot panel */
.slot-list { display: flex; flex-direction: column; gap: 3px; }
.slot-row { display: grid; grid-template-columns: 20px 78px 1fr; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font-size: 12px; }
.slot-row:hover { border-color: #5a4a2a; background: rgba(255,255,255,.03); }
.slot-row.sel { border-color: var(--gold, #e0b354); background: rgba(224,179,84,.08); }
.slot-row .slot-nm { color: var(--muted, #999); font-size: 11px; }
.slot-row .slot-it { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-row.open .slot-it { color: #6fcf7f; font-style: italic; opacity: .85; }
.slot-row .slot-it.magic { color: #b9a0ff; }

/* conditions over the battle portrait */
.ua-conds { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.ua-conds .eff { margin: 0; font-size: 11px; padding: 2px 7px; backdrop-filter: blur(3px); background: rgba(10, 30, 14, .78); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ua-conds .eff.bad { background: rgba(48, 12, 10, .82); }
.ua-conds .eff.conc { background: rgba(34, 22, 60, .85); color: #d6c4ff; border-color: #7a5cc8; }
.ua-conds .eff i { font-style: normal; opacity: .75; margin-left: 4px; font-size: 10px; }
.conc-x { margin-left: 6px; padding: 0 5px; border: 1px solid #7a5cc8; border-radius: 3px; background: rgba(255,255,255,.06); color: #d6c4ff; font-size: 10px; line-height: 14px; cursor: pointer; }
.conc-x:hover { background: #7a5cc8; color: #fff; }
.hero-card.paused { opacity: .55; filter: grayscale(.7); }
.hero-card.paused:hover { opacity: .85; }

/* ---- spell board v2: slots on the left, icon tiles on the right ---- */
.spell-board.sb2 { position: fixed; }
.sb2-body { display: flex; gap: 12px; min-height: 0; flex: 1; }
.sb2-side { flex: 0 0 190px; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: rgba(255,255,255,.03); border: 1px solid #2f2a3a; border-radius: 9px; overflow-y: auto; }
.sb2-side-h { font-family: var(--display, serif); color: var(--gold, #e0b354); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.sb2-slot { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lv cnt" "pips pips"; gap: 2px 6px; align-items: center; padding: 4px 6px; border-radius: 6px; background: #1d1a26; border: 1px solid #3a3346; }
.sb2-slot b { grid-area: lv; font-size: 13px; }
.sb2-slot .cnt { grid-area: cnt; font-weight: 700; color: var(--gold, #e0b354); font-size: 13px; }
.sb2-slot .pips { grid-area: pips; }
.sb2-slot.empty { opacity: .5; }
.sb2-slot.empty .cnt { color: #c06a5a; }
.sb2-slot.extra { grid-template-areas: "lv cnt"; }
.sb2-meta { margin-top: 4px; font-size: 12px; color: #cfc6b4; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid #3a3346; padding-top: 6px; }
.sb2-meta .conc { color: #c8b3ff; }
.sb2-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; align-content: start; overflow-y: auto; padding: 2px 4px 4px 2px; min-height: 0; }
.sb2-tile { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 30px 8px 8px; min-height: 58px; border: 1px solid #3a3346; border-radius: 10px; background: #1b1928; cursor: pointer; transition: border-color .12s, transform .12s, background .12s; }
.sb2-tile:hover:not(.disabled) { border-color: var(--gold, #e0b354); background: #24202f; transform: translateY(-1px); }
.sb2-tile.open { border-color: var(--gold, #e0b354); background: #2a2416; z-index: 5; }
.sb2-tile.disabled { opacity: .42; cursor: not-allowed; }
.sb2-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12); display: grid; place-items: center; }
.sb2-ico svg { display: block; }
.sb2-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sb2-name b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb2-lv { position: absolute; left: 4px; top: 3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #3a2f18; border: 1px solid #8a7030; color: #ffe2a0; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.sb2-i { position: absolute; right: 6px; top: 6px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #6a6080; background: #262236; color: #cfc6ff; font: italic 700 11px Georgia, serif; line-height: 16px; padding: 0; cursor: help; opacity: 1; }
.sb2-i:hover { background: #4a3f7a; color: #fff; border-color: #a99cff; }
.sb2-tile.disabled .sb2-i { cursor: help; pointer-events: auto; }
.sb2-pop { flex: 0 0 auto; z-index: 20; padding: 8px; border-radius: 10px; background: #221d14; border: 1px solid var(--gold, #e0b354); box-shadow: 0 10px 30px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 6px; cursor: default; }
.sb2-pop-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #bfae88; }
.sb2-levels { display: flex; flex-wrap: wrap; gap: 5px; }
.sb2-levels .btn { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 62px; padding: 4px 8px; line-height: 1.1; }
.sb2-levels .btn .up { color: #9fe0a8; }
.sb2-info { position: absolute; right: 16px; top: 46px; width: min(420px, calc(100% - 32px)); max-height: calc(100% - 60px); overflow-y: auto; z-index: 30; padding: 12px 14px; border-radius: 12px; background: #17141f; border: 1px solid #7a6ab0; box-shadow: 0 16px 44px rgba(0,0,0,.7); }
.sb2-info h3 { margin: 0; font-size: 18px; }
.sb2-info p { margin: 8px 0; line-height: 1.45; }
.sb2-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; }
.sb2-facts span { color: #a99f8c; }
@media (max-width: 700px) { .sb2-body { flex-direction: column; } .sb2-side { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; } .sb2-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }

.sb2-pop-title { display: flex; align-items: center; gap: 8px; }
.sb2-pop-title svg { border-radius: 5px; }

/* floating hover cards (items, spells, abilities) */
.hover-card { position: fixed; z-index: 9999; width: 300px; max-width: calc(100vw - 16px); padding: 10px 12px; border-radius: 10px; background: #17141f; border: 1px solid #6a5a9a; box-shadow: 0 14px 40px rgba(0,0,0,.7); pointer-events: none; color: #eee5d2; font-size: 13px; }
.hover-card.hidden { display: none; }
.hover-card .hc-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.hover-card .hc-head svg { flex: 0 0 auto; border-radius: 7px; }
.hover-card .hc-name { font-weight: 800; font-size: 15px; line-height: 1.2; }
.hover-card .hc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0; }
.hover-card .hc-desc { line-height: 1.45; color: #ddd3c0; }
.hover-card .hc-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin-top: 8px; font-size: 12px; }
.hover-card .hc-facts span { color: #a99f8c; }
.pack-line { cursor: default; padding: 1px 0; }
.pack-line:hover { color: var(--gold, #e0b354); }

/* camp: my hero card at the top of the side column + party overlay */
.my-heroes { display: flex; flex-direction: column; gap: 10px; }
.hero-card.compact { padding: 12px; }
.hero-card.compact .hc-actions { margin-top: 8px; }
.party-btn.on { border-color: var(--gold, #e0b354); color: var(--gold, #e0b354); }
.party-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(8, 6, 12, .72); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 56px 16px 16px; }
.party-modal { width: min(1400px, 100%); max-height: calc(100vh - 72px); overflow-y: auto; background: var(--panel, #1b1822); border: 1px solid #5a4a2a; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.7); padding: 16px 18px; }
.party-head { gap: 10px; align-items: center; margin-bottom: 12px; position: sticky; top: -16px; background: var(--panel, #1b1822); padding: 6px 0; z-index: 2; }
.party-head h2 { margin: 0; }
.party-view { display: flex; flex-direction: column; gap: 12px; }

/* the world map fills the left column (the party moved to the Party overlay) */
.camp-body > .roster { display: flex; flex-direction: column; }
.camp-body > .roster > .wm-wrap { flex: 1 1 auto; min-height: 380px; display: flex; flex-direction: column; }
.camp-body > .roster > .wm-wrap > .wm-view { flex: 1 1 auto; aspect-ratio: auto; min-height: 360px; }
.party-view { max-width: 900px; margin: 0 auto; width: 100%; }
.party-gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 14px; }
.party-gear .slot-row { display: flex; gap: 8px; align-items: center; padding: 3px 6px; border-radius: 6px; }
.party-gear .slot-row:hover { background: rgba(255,255,255,.05); }
.party-gear .slot-nm { color: #a99f8c; width: 92px; flex: 0 0 auto; font-size: 13px; }
.party-gear .slot-it.magic { color: #8fd3ff; }
.wm-actions { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 10px; }
.wm-actions > div.small { margin: 0 !important; }
/* waiting bar mirrors the turn bar so nothing jumps when you end your turn */
.hb-waiting .hb-cell { opacity: .45; pointer-events: none; filter: grayscale(.4); }
.actions.waiting .economy { min-width: 0; flex: 0 1 auto; }
.actions.waiting .wait-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; display: inline-block; vertical-align: middle; }
.btn.end-slot { min-width: 132px; }
#a-end { min-width: 132px; }
#a-end, .btn.end-slot { height: 34px; display: inline-flex; align-items: center; justify-content: center; }
/* spell slots in the action bar */
.econ-slots { display: inline-flex; gap: 8px; align-items: center; padding: 2px 8px; border-radius: 7px; background: rgba(140,110,255,.08); border: 1px solid #3c3360; cursor: pointer; }
.econ-slots:hover { border-color: #8a78e0; }
.econ-slots .es { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; }
.econ-slots .es b { color: #cfc4ff; margin-right: 2px; font-size: 11px; }
.econ-slots .es i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #8a78e0; display: inline-block; }
.econ-slots .es i.full { background: #a891ff; border-color: #c4b6ff; box-shadow: 0 0 4px rgba(168,145,255,.6); }
.econ-slots .es.empty { opacity: .45; }
.pchip { position: relative; }
.pchip.offline { opacity: .65; }
.pchip-x { margin-left: 6px; padding: 0 5px; border: 1px solid #6a3a32; border-radius: 4px; background: transparent; color: #e0907f; font-size: 11px; line-height: 15px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.pchip:hover .pchip-x, .pchip.offline .pchip-x { opacity: 1; }
.pchip-x:hover { background: #8a3a32; color: #fff; }
.actions.waiting .econ-slots { cursor: default; margin-left: 10px; }

/* ✎ Edit hotbar button at the end of the battle hotbar */
.hb-edit { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; padding: 4px 10px; border: 1px dashed #5a4f70; border-radius: 10px; background: rgba(255,255,255,.03); color: #cfc4ff; font-size: 18px; cursor: pointer; }
.hb-edit span { font-size: 10px; color: #a99fc8; white-space: nowrap; }
.hb-edit:hover { border-color: var(--gold, #e0b354); color: var(--gold, #e0b354); background: rgba(224,179,84,.08); }
.hotbar.empty .hb-edit { flex-direction: row; gap: 8px; font-size: 14px; min-height: 40px; }
.hotbar.empty .hb-edit span { font-size: 12px; }
#stale-banner { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3000; padding: 8px 12px 8px 16px; border-radius: 10px; background: #3a2a10; border: 1px solid #c8962e; color: #ffe2a0; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.6); display: flex; gap: 10px; align-items: center; }
#stale-banner code { background: rgba(0,0,0,.35); padding: 0 4px; border-radius: 3px; }
/* uses left: names wrap, numbers stay on one line at the right */
.kv.uses { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 4px; }
.kv.uses .n { white-space: nowrap; text-align: right; color: var(--text, #eee5d2); }
/* 18-slot hotbar: the editor shows 6 per row; in battle a full bar uses narrower slots over two rows */
.hbe-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .hbe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hotbar.many { gap: 4px; }
.hotbar.many .hb-slot { width: 124px; }
/* city missions in the town panel */
.wm-missions { margin: 10px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.wm-missions-h { font-family: var(--title, serif); color: var(--gold, #e0b354); font-size: 15px; }
.wm-mission { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.035); border: 1px solid #4a3e2a; }
.wm-mission.won { border-color: #3f6a3a; }
/* metamagic toggle bar in the spell board header */
.meta-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.meta-lbl { font-size: 12px; color: #a99f8c; text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.meta-btn { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid #5a4a7a; background: #221d30; color: #e6dcff; font-size: 13px; font-weight: 600; cursor: pointer; }
.meta-btn i { font-style: normal; font-size: 11px; color: #b6a6e8; font-weight: 500; }
.meta-btn:hover:not(:disabled) { border-color: #a98cff; background: #2c2440; }
.meta-btn.on, .meta-btn.on:hover:not(:disabled) { background: linear-gradient(180deg, #6a4bd0, #4a32a0); border-color: #c8b6ff; color: #fff; box-shadow: 0 0 10px rgba(150,120,255,.5); }
.meta-btn.on i { color: #e8deff; }
.meta-btn:disabled { opacity: .4; cursor: not-allowed; }
.meta-sp { font-size: 13px; color: #c8b6ff; font-weight: 700; margin-left: 4px; }
/* Masterwork Forge tab */
.tab.mw-tab { color: #ffb35c; }
.mw-head { display: flex; gap: 16px; align-items: center; padding: 12px 14px; border-radius: 10px; background: linear-gradient(135deg, #3a2410, #24170c); border: 1px solid #a86a2a; margin-bottom: 8px; }
.mw-head > div:first-child { flex: 1; }
.mw-title { font-family: var(--title, serif); font-size: 20px; color: #ffc27a; }
.mw-fp { text-align: center; padding: 6px 14px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid #a86a2a; }
.mw-fp b { display: block; font-size: 26px; color: #ffc27a; line-height: 1; }
.mw-fp span { font-size: 11px; color: #d8b080; }
.mw-card { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid #4a3a26; }
.mw-ups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px; margin-top: 8px; }
.mw-up { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: #1d1913; border: 1px solid #3a3020; }
.mw-up.has { border-color: #a86a2a; background: #261c10; }
.mw-ico { width: 26px; text-align: center; font-size: 18px; }
.mw-pips { display: inline-flex; gap: 3px; }
.mw-pips i { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); border: 1px solid #a86a2a; display: inline-block; }
.mw-pips i.on { background: #ffb35c; box-shadow: 0 0 5px rgba(255,179,92,.7); }
/* mini-map can be hidden; the map can also scroll a little past its edges so corners are reachable */
.wm-view.mini-off .wm-mini { opacity: 0; pointer-events: none; }
.wm-view.mini-off .wm-mini-btn { opacity: .6; }

/* ---- start page: pick a world ---- */
.home-box.wide { width: min(1080px, calc(100vw - 32px)); }
.world-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 6px 0 22px; }
@media (max-width: 800px) { .world-cards { grid-template-columns: 1fr; } }
.world-card { text-align: left; cursor: pointer; padding: 16px 16px 14px; border-radius: 14px; border: 2px solid #3a3326; background: #1c1914; color: inherit; display: flex; flex-direction: column; gap: 4px; transition: transform .12s, border-color .12s, box-shadow .12s; font: inherit; }
.world-card:hover { transform: translateY(-2px); border-color: #7a6338; }
.world-card.on { border-color: var(--gold, #e0b354); box-shadow: 0 0 0 1px var(--gold, #e0b354), 0 10px 30px rgba(224,179,84,.18); }
.wc-icon { font-size: 34px; }
.wc-name { font-family: var(--title, serif); font-size: 22px; color: var(--gold, #e0b354); }
.wc-short { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #a99f8c; }
.wc-blurb { font-size: 13px; line-height: 1.45; color: #d8cfbd; margin-top: 4px; }
.world-card.wc-ww1 { background: linear-gradient(160deg, #23251b, #1a1a14); }
.world-card.wc-ww1 .wc-name { color: #b9c08a; }
.world-card.wc-toybox { background: linear-gradient(160deg, #20203a, #1a1626); }
.world-card.wc-toybox .wc-name { color: #ffb3d9; }
/* story decisions */
.story-modal { max-width: 760px; }
.story-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #c9b88e; }
.story-text { line-height: 1.6; font-size: 15px; color: #e8dfcc; white-space: pre-line; }
.story-prompt { margin: 10px 0 4px; font-weight: 700; color: var(--gold, #e0b354); }
.story-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.story-choice { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid #4a3e2a; background: #221d16; }
.story-choice.mine { border-color: var(--gold, #e0b354); }
.story-choice.locked { opacity: .5; }
.world-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .world-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .world-cards { grid-template-columns: 1fr; } }
.world-card.wc-zombie { background: linear-gradient(160deg, #2a1c18, #161212); }
.world-card.wc-zombie .wc-name { color: #ff8a6a; }
.world-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1300px) { .world-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .world-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .world-cards { grid-template-columns: 1fr; } }
.world-card.wc-rogue { background: linear-gradient(160deg, #2a1a10, #1a1210); }
.world-card.wc-rogue .wc-name { color: #ffa94d; }
.home-box.wide { width: min(1320px, calc(100vw - 32px)); }

/* ---- Last Light (zombie world): the shelter panel & battle bar */
.zshelter { display: flex; flex-direction: column; gap: 8px; }
.zshelter .zs-head { gap: 12px; align-items: center; }
.zs-stat { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 4px 8px; border: 1px solid rgba(201,162,74,.35); border-radius: 8px; background: rgba(0,0,0,.2); }
.zs-stat b { font-size: 16px; color: var(--gold, #e0b354); } .zs-stat span { font-size: 11px; opacity: .7; }
.zs-body { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.zs-mapwrap { display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
.zs-map { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid #3a3025; background: #222; }
.zs-side { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.zs-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; }
.zs-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,.04); }
.zs-ico { font-size: 18px; width: 22px; text-align: center; }
.zs-hp { width: 70px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; }
.zs-hp > div { height: 100%; background: #5fcf6a; }
.zbar { border-color: #6a7fb0; background: rgba(60,80,130,.18); color: #cfd8f0; font-weight: 500; }
.world-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .world-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .world-cards { grid-template-columns: 1fr; } }
.home-box.wide { width: min(1200px, calc(100vw - 32px)); }
.world-card.wc-arcana { background: linear-gradient(160deg, #161a34, #120f22); }
.world-card.wc-arcana .wc-name { color: #9fb4ff; }
.world-card.wc-crystal { background: linear-gradient(160deg, #10263a, #0e1622); }
.world-card.wc-crystal .wc-name { color: #7fe3ff; }
.world-card.wc-weave { background: linear-gradient(160deg, #2a1838, #160f22); }
.world-card.wc-weave .wc-name { color: #e0a8ff; }
.world-card.wc-eldritch { background: radial-gradient(ellipse at 50% 120%, rgba(169, 210, 125, .16), transparent 60%), linear-gradient(160deg, #141711, #070806); }
.world-card.wc-eldritch .wc-name { color: #b9e08a; font-family: 'IM Fell English SC', Georgia, serif; letter-spacing: .04em; text-shadow: 0 0 10px rgba(169, 210, 125, .4); }
.world-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .world-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .world-cards { grid-template-columns: 1fr; } }
.home-box.wide { width: min(1320px, calc(100vw - 32px)); }
/* Crystalbound: mana & Heartfire in the battle action bar */
.cb-econ{display:inline-flex;align-items:center;gap:4px}.cb-bar{display:inline-block;width:46px;height:7px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}.cb-bar i{display:block;height:100%;background:#4aa8ff}.cb-bar.heart i{background:linear-gradient(90deg,#ff7a2a,#ffd24a)}.cb-bar.heart.full{box-shadow:0 0 8px #ff9a3c}

h3.needs { color: #ffcf7a; }
/* Throne & Yawn (world 'siege') home card; nine worlds sit nicely in a 3x3 grid */
.world-card.wc-siege { background: radial-gradient(circle at 85% 15%, #3a4a9a 0, transparent 45%), linear-gradient(160deg, #1c2550, #10142b); }
.world-card.wc-siege .wc-name { color: #ffcf5a; font-family: 'Lilita One', var(--title, serif); }
.world-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .world-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .world-cards { grid-template-columns: 1fr; } }
/* Last Light: per-survivor parts */
.zs-parts { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.18); }
.zs-wallet { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.zs-wallet.me b { color: var(--gold); }
.zs-give input, .zs-give select { padding: 3px 6px; font-size: 12px; }
.zbar .zs-give { display: inline-flex; align-items: center; margin-left: 8px; font-size: 12px; }
/* Crystalbound: socketed orbs on equipment slots; unequip tucks into the corner and shows on hover */
.slot { position: relative; }
.slot-socks { flex: none; display: flex; align-items: center; }
.slot-socks .cb-orb { cursor: inherit; }
.slot .unequip-mini { position: absolute; top: 3px; left: 3px; padding: 0 5px; font-size: 10px; line-height: 16px; min-height: 0; opacity: 0; transition: opacity .12s; }
.slot:hover .unequip-mini, .slot .unequip-mini:focus { opacity: 1; }
@media (hover: none) { .slot .unequip-mini { opacity: .7; } }
.world-cards.more-worlds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .world-cards.more-worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .world-cards.more-worlds { grid-template-columns: 1fr; } }
/* Pewter Crown (world 'muster') home card — a featured world, so the main row holds four */
.world-card.wc-muster { background: radial-gradient(ellipse at 50% 115%, rgba(201, 162, 74, .28), transparent 60%), repeating-linear-gradient(92deg, #3e2617 0 7px, #382214 7px 15px); border-color: #8a6a2a; }
.world-card.wc-muster .wc-name { color: #f0d48a; font-family: 'Grenze Gotisch', var(--title, serif); font-size: 28px; line-height: 1.1; letter-spacing: .02em; }
.world-card.wc-muster .wc-blurb { font-family: 'Spectral', Georgia, serif; }
.world-cards:not(.more-worlds) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .world-cards:not(.more-worlds) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .world-cards:not(.more-worlds) { grid-template-columns: 1fr; } }
/* shown when another tab takes over this player's connection */
.tab-banner { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .72); display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 16px; color: #fff; text-align: left; }
.tab-banner > div { max-width: 360px; }

/* ---- Dice & Dominion creation wizard (client/js/dnd_wizard.js) ---- */
.wz-bar { display: flex; align-items: center; gap: 2px; padding: 6px 4px 2px; overflow-x: auto; scrollbar-width: thin; }
.wz-step { display: flex; align-items: center; gap: 6px; background: #1a1714; border: 1px solid var(--line); color: var(--text); border-radius: 18px; padding: 4px 10px 4px 4px; cursor: pointer; white-space: nowrap; font-size: 12px; }
.wz-step .wz-n { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: #2a241d; font-weight: bold; font-size: 11px; }
.wz-step.on { border-color: var(--gold); background: #2e2618; box-shadow: 0 0 10px rgba(224,179,84,.25); }
.wz-step.on .wz-n { background: var(--gold); color: #1a1408; }
.wz-step.done .wz-n { background: #2f5a34; color: #d8ffd8; }
.wz-step.opt { opacity: .8; border-style: dashed; }
.wz-step .wz-n:not(:empty) { }
.wz-sep { flex: 0 0 8px; height: 2px; background: var(--line); }
.wz-progress { height: 3px; background: #241f1a; margin: 4px 6px 0; border-radius: 2px; overflow: hidden; }
.wz-progress > div { height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); transition: width .25s; }
.wz-class { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.5fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.wz-class .rc-list { grid-template-columns: 1fr; gap: 4px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.rc-row.peek { border-color: #7aa8d8; }
.wz-preview { position: sticky; top: 0; max-height: 70vh; overflow-y: auto; font-size: 13px; }
.wz-preview h4 { margin: 10px 0 4px; font-size: 13px; color: var(--gold); }
.wz-icon { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; font-size: 22px; flex: none; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); }
.wz-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.wz-feats > div, .wz-subs > div { font-size: 12px; margin: 2px 0; line-height: 1.35; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wz-chip { font-size: 12px; padding: 3px 8px; border-radius: 12px; background: #221d33; border: 1px solid #4a3f6e; cursor: help; }
.wz-chip.ab { background: #1d2a22; border-color: #3f6e4a; }
.wz-ladder { margin-top: 4px; max-height: 260px; overflow-y: auto; }
.wz-rung { font-size: 12px; padding: 2px 0; opacity: .6; }
.wz-rung.have { opacity: 1; }
.wz-rung.evo b { color: var(--gold); }
.wz-asc .opt { border-color: #8a6a2a; }
@media (max-width: 700px) { .wz-class { grid-template-columns: 1fr; } .wz-preview { position: static; max-height: none; } .wz-class .rc-list { grid-template-columns: 1fr; max-height: none; } .wz-step .wz-l { display: none; } .wz-step.on .wz-l { display: inline; } }
.wz-clist h3 { font-size: 15px; } .wz-clist h3 .count { display: block; font-size: 11px; margin: 2px 0 0; } .wz-class .rc-row { padding: 2px 6px 2px 2px; } .wz-class .rc-row .tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-wrap { width: 100%; padding-bottom: 4px; }
.wz-class .rc-row .grow { min-width: 0; } .wz-class .rc-row .btn { flex: none; }

/* ---- Dice & Dominion cast flow (client/js/castflow.js) ---- */
.castflow { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 30; min-width: 320px; max-width: min(640px, calc(100% - 24px)); background: rgba(18,15,24,.96); border: 1px solid #6a58a8; border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 30px rgba(0,0,0,.6), 0 0 18px rgba(140,110,255,.25); font-size: 13px; }
.castflow .cf-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.castflow .cf-head b { color: #d8c8ff; font-size: 15px; }
.cf-slots { display: flex; flex-direction: column; gap: 1px; max-height: min(340px, 48vh); overflow-y: auto; }
.cf-grp { display: flex; align-items: center; gap: 8px; padding: 2px 6px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; }
.cf-grp.on { border-color: #b8a0ff; background: rgba(140,110,255,.12); }
.cf-grp.off { opacity: .4; cursor: default; }
.cf-lv { width: 52px; font-weight: bold; color: #cfc4ef; font-size: 12px; }
.cf-row { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; }
.cf-n { font-size: 11px; color: #9a92b0; }
.cf-bub { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #8b7ad8; background: radial-gradient(circle at 35% 35%, #c8b8ff, #6a4fd8); padding: 0; cursor: pointer; transition: transform .1s, box-shadow .15s; }
.cf-bub.spent { background: #1e1a28; border-color: #3e3858; cursor: default; }
.cf-bub:disabled:not(.spent) { filter: grayscale(.8); opacity: .55; cursor: default; }
.cf-bub:not(:disabled):hover { transform: scale(1.15); }
.cf-bub.sel { box-shadow: 0 0 0 3px #fff3b0, 0 0 14px 4px #ffd36b; animation: cfglow 1.1s ease-in-out infinite alternate; }
@keyframes cfglow { from { box-shadow: 0 0 0 2px #fff3b0, 0 0 8px 2px #ffd36b; } to { box-shadow: 0 0 0 3px #fff3b0, 0 0 18px 6px #ffd36b; } }
.cf-preview { margin-top: 6px; font-size: 12px; color: #cfc4ef; }
.cf-preview.up { color: #ffe08a; }
.cf-preview.warn { color: #ff9a8a; }
.cf-note { color: #bdb4d8; font-size: 12px; }
.cf-meta { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.cf-foot { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.cf-foot .btn.glow { box-shadow: 0 0 12px rgba(255,211,107,.6); }
@media (max-width: 600px) { .castflow { min-width: 0; width: calc(100% - 16px); bottom: 6px; } }
.wz-class > * { min-width: 0; } .wz-class .rc-row { min-width: 0; overflow: hidden; }
/* Dice & Dominion wizard: no summary column — the steps get the full width */
.editor.no-side { grid-template-columns: minmax(0, 1fr); }
.editor.no-side > .editor-side { display: none; }
.wz-race .wz-preview .ladder, .wz-race .wz-preview { font-size: 13px; }
/* D&D wizard: in-step section navigation */
.wz-subnav { position: sticky; top: -16px; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap; margin: -16px -16px 12px; padding: 10px 16px; background: var(--panel, #221e1a); border-bottom: 1px solid var(--line); box-shadow: 0 6px 12px rgba(0,0,0,.25); }
.wz-sub { border: 1px solid var(--line2); background: transparent; color: var(--muted); border-radius: 99px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.wz-sub:hover { border-color: var(--gold); color: var(--text); }
.wz-sub.on { background: var(--gold); border-color: var(--gold); color: #1b1308; }
.wz-sub.todo i { font-style: normal; background: #ffcf7a; color: #1b1308; border-radius: 50%; width: 15px; height: 15px; display: inline-grid; place-items: center; font-size: 10px; }
@media (max-width: 700px) { .wz-subnav { flex-wrap: nowrap; overflow-x: auto; } }
/* Dice & Dominion spell board: clickable slot rows filter the grid; ascendant slots in gold */
.sb2-slot.sb2-f { cursor: pointer; }
.sb2-slot.sb2-f:hover { border-color: #6a5a80; }
.sb2-slot.sb2-f.on { border-color: var(--gold, #e0b354); box-shadow: inset 0 0 0 1px var(--gold, #e0b354); opacity: 1; }
.sb2-slot.all b { color: var(--muted, #aaa); font-size: 12px; }
.sb2-side-h.asc { color: #f5cf6a; margin-top: 8px; }
.sb2-slot.asc { background: linear-gradient(135deg, #3a2c10, #221a0c); border-color: #8a6a2a; }
.sb2-slot.asc .pip.full { background: #f5cf6a; box-shadow: 0 0 6px #f5cf6a; }
.asc-badge { color: #f5cf6a; font-weight: 800; }
.sb2-flt { color: var(--gold, #e0b354); }
/* Dice & Dominion wizard: sub-pages, path tabs, collapsed picks, spell filter */
.wz-subpos { margin-left: auto; align-self: center; }
.pt-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 0; border-bottom: 1px solid var(--line2); }
.pt-tab { border: 1px solid var(--line2); border-bottom: none; background: #1a1714; color: var(--muted); border-radius: 8px 8px 0 0; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pt-tab:hover { color: var(--text); }
.pt-tab.on { background: #2e2618; color: var(--gold); border-color: var(--gold2, #8a6a2a); }
.pt-tab.chosen { color: #9fe0a0; }
.pt-body { border-top-left-radius: 0; padding: 14px 16px; }
.pt-intro { font-size: 14px; line-height: 1.5; color: var(--text); margin: 8px 0 12px; }
.pt-feat { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
.pt-feat .pt-lv { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #2a241c; color: var(--gold); font-weight: 700; font-size: 12px; }
.pt-feat:not(.have) { opacity: .75; }
.pt-desc { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-top: 3px; }
.wz-chosen { display: flex; gap: 10px; align-items: flex-start; }
.wz-chosen > .opt, .wz-chosen > .opt-grid { flex: 1; cursor: default; }
.opt .sp-ico { vertical-align: middle; margin-right: 6px; border-radius: 5px; }
.opt b { display: flex; align-items: center; }
.sp-filter { position: sticky; top: 30px; z-index: 4; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; margin-bottom: 10px; background: var(--panel, #221e1a); border: 1px solid var(--line); border-radius: 8px; }
.sp-filter input[type=search] { width: 100%; }
@media (max-width: 700px) { .pt-tab { padding: 6px 8px; font-size: 12px; } .sp-filter { position: static; } }
.wz-chip { display: inline-flex; align-items: center; gap: 4px; } .wz-chip .sp-ico { border-radius: 4px; }
.wz-chosen-banner { display: flex; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--gold2, #8a6a2a); border-radius: 8px; background: linear-gradient(135deg, #2e2618, #1f1a12); }
.wz-chosen-banner .ok { color: #9fe0a0; font-weight: 800; }
.wz-icon.sm { width: 30px; height: 30px; font-size: 16px; }
.wz-previewing { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -4px 0 10px; padding: 6px 10px; border: 1px dashed var(--line2); border-radius: 8px; }

/* Dice & Dominion: Standard / Expanded game-mode toggle (home page) and the camp badge */
.mode-toggle { max-width: 720px; margin: -8px auto 18px; width: 100%; }
.mode-label { font-size: 13px; color: #d8c8a0; margin-bottom: 6px; text-align: center; }
.mode-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-opt { text-align: left; cursor: pointer; font: inherit; color: inherit; padding: 10px 12px; border-radius: 10px; border: 2px solid #3a3326; background: #1c1914; display: flex; flex-direction: column; gap: 3px; transition: border-color .12s, box-shadow .12s; }
.mode-opt:hover { border-color: #7a6338; }
.mode-opt.on { border-color: var(--gold, #e0b354); box-shadow: 0 0 0 1px var(--gold, #e0b354); background: #241f17; }
.mode-opt .mo-head { font-size: 15px; }
.mode-opt .mo-short { color: var(--gold, #e0b354); font-size: 12px; margin-left: 4px; }
.mode-opt .mo-def { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #9fb4c8; border: 1px solid #3c5068; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.mode-opt .mo-desc { font-size: 12px; color: #b0a48a; line-height: 1.35; }
.mode-badge { margin-left: 6px; white-space: nowrap; }
.mode-badge.mode-standard { color: #ffb38a; border-color: #8a4a2a; }
.mode-badge.mode-expanded { color: #9fd0ff; border-color: #2a5a8a; }
@media (max-width: 560px) { .mode-opts { grid-template-columns: 1fr; } .mode-opt .mo-desc { font-size: 11px; } }

/* Ping: a teammate told you to hurry up — End Turn gives a little shake */
#a-end.pinged { animation: ping-shake .5s steps(4) 3; }
@keyframes ping-shake { 25% { transform: translateX(-3px) rotate(-2deg); } 75% { transform: translateX(3px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { #a-end.pinged { animation: none; outline: 3px solid #ffd878; } }

/* Dice & Dominion headshots in chat lines and toasts (client/js/portrait.js) */
.chat-line-face { display: flex; gap: 6px; align-items: flex-start; }
.chat-line-face .chat-face { flex: none; width: 24px; height: 24px; image-rendering: pixelated; margin-top: 1px; }
.toast.has-face { display: flex; align-items: center; gap: 10px; }
.toast .toast-face { flex: none; width: 48px; height: 48px; image-rendering: pixelated; }
.vote-face { display: inline-block !important; width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; image-rendering: pixelated; }

/* ---------- subclass / ascendant path pages (editor.js pathPickerHTML + path_look.js) ---------- */
.pt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 10px 0 12px; }
.pt-card { --pa: var(--gold); position: relative; display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px 12px 8px 8px; cursor: pointer; color: var(--text); font: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pa) 10%, #1a1612), #15120f 70%); border: 1px solid color-mix(in srgb, var(--pa) 25%, var(--line2)); border-radius: 10px;
  transition: transform .12s, border-color .12s, box-shadow .12s; }
.pt-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--pa) 60%, transparent); }
.pt-card.on { border-color: var(--pa); box-shadow: 0 0 0 1px var(--pa), 0 4px 18px color-mix(in srgb, var(--pa) 25%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--pa) 22%, #1d1813), #17130f 75%); }
.pt-card .pt-emb { flex: none; border-radius: 9px; }
.pt-cn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-cn b { font-size: 15px; color: var(--pa); }
.pt-cn small { font-size: 11.5px; line-height: 1.3; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-ck { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; background: #4fae5a; color: #0d1a0e; box-shadow: 0 0 0 2px #15120f; }

.pt-body2 { --pa: var(--gold); border: 1px solid color-mix(in srgb, var(--pa) 35%, var(--line2)); border-radius: 12px; overflow: hidden; background: #17140f; }
.pt-banner { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; flex-wrap: wrap;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--pa) 28%, transparent), transparent 60%), linear-gradient(180deg, #221c15, #19150f);
  border-bottom: 1px solid color-mix(in srgb, var(--pa) 30%, var(--line)); }
.pt-banner::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07; background-image: radial-gradient(var(--pa) 1px, transparent 1.2px); background-size: 14px 14px; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.pt-emb-wrap { flex: none; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--pa) 18%, #0e0b08); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pa) 55%, transparent), 0 0 28px color-mix(in srgb, var(--pa) 35%, transparent); }
.pt-emb-wrap .pt-emb { display: block; border-radius: 10px; }
.pt-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pt-title h3 { margin: 0; font-size: 22px; color: var(--pa); text-shadow: 0 1px 0 #000, 0 0 16px color-mix(in srgb, var(--pa) 35%, transparent); }
.pt-body2 .pt-intro { margin: 6px 0 10px; max-width: 70ch; }
.pt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pt-chip { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; color: var(--text); background: #0f0c09aa; border: 1px solid color-mix(in srgb, var(--pa) 30%, var(--line2)); text-transform: capitalize; }
.pt-act { align-self: center; z-index: 1; }
.pt-chosen { display: inline-block; padding: 6px 12px; border-radius: 8px; font-weight: 800; color: #9fe0a0; background: #1c2a1a; border: 1px solid #4fae5a; }

.pt-rail { position: relative; padding: 12px 16px 14px 14px; }
.pt-rail::before { content: ''; position: absolute; left: 35px; top: 18px; bottom: 26px; width: 2px; background: linear-gradient(var(--pa), color-mix(in srgb, var(--pa) 15%, #2a241c)); opacity: .55; }
.pt-step { position: relative; display: flex; gap: 12px; align-items: stretch; padding: 5px 0; }
.pt-node { flex: none; width: 42px; display: flex; justify-content: center; padding-top: 12px; z-index: 1; }
.pt-node span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #1a1209; background: var(--pa); box-shadow: 0 0 0 3px #17140f, 0 0 12px color-mix(in srgb, var(--pa) 55%, transparent); }
.pt-step.later .pt-node span { background: #2a241c; color: var(--muted); box-shadow: 0 0 0 3px #17140f; border: 1px dashed #5a4e3e; }
.pt-fcard { flex: 1; display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--pa) 7%, #1e1914), #1a1612); border: 1px solid #2e271f; }
.pt-step.have .pt-fcard { border-color: color-mix(in srgb, var(--pa) 28%, #2e271f); }
.pt-step.later .pt-fcard { opacity: .72; filter: saturate(.6); }
.pt-step.k-action .pt-fcard, .pt-step.k-bonus .pt-fcard, .pt-step.k-reaction .pt-fcard { box-shadow: inset 3px 0 0 var(--pa); }
.pt-ficon { flex: none; }
.pt-ficon .sp-ico { display: block; border-radius: 8px; }
.pt-fhead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pt-fhead b { font-size: 15.5px; color: var(--text); }
.pt-kind { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 5px; color: var(--pa); background: color-mix(in srgb, var(--pa) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pa) 35%, transparent); }
.k-passive .pt-kind { color: var(--muted); background: #ffffff08; border-color: #ffffff1a; }
.pt-lock { margin-left: auto; font-size: 11px; color: var(--muted); }
.pt-lock::before { content: '🔒 '; font-size: 10px; }
.pt-body2 .pt-desc { font-size: 14px; color: #cfc4b2; margin-top: 4px; }
.pt-dice { color: #ffe08a; font-weight: 800; }
.pt-num { color: #9fe0a0; }
.pt-here { position: relative; margin: 6px 0 6px 0; display: flex; align-items: center; gap: 8px; padding-left: 4px; }
.pt-here span { z-index: 1; font-size: 11.5px; font-weight: 800; color: #1a1209; background: #e8c070; padding: 3px 10px; border-radius: 999px; box-shadow: 0 0 0 3px #17140f; }
.pt-here::after { content: ''; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, #e8c07088 0 6px, transparent 6px 11px); }
/* damage-type colours (feature text and the glance chip) */
.dm-acid { color: #a6e05a; } .dm-cold { color: #8fd6ff; } .dm-fire { color: #ff8a4c; } .dm-force { color: #c59bff; } .dm-lightning { color: #b9b2ff; }
.dm-necrotic { color: #9fd36a; } .dm-poison { color: #7fd36b; } .dm-psychic { color: #ff86d6; } .dm-radiant { color: #ffd76a; } .dm-thunder { color: #9ec4e6; }
.dm-bludgeoning, .dm-piercing, .dm-slashing { color: #d8cdbd; }
.pt-dmg { font-weight: 700; }
.wz-asc .pt-body2 { box-shadow: 0 0 0 1px #e8c07055, 0 0 30px #e8c07022; }
@media (max-width: 700px) {
  .pt-cards { grid-template-columns: 1fr 1fr; } .pt-banner { padding: 12px; gap: 10px; } .pt-emb-wrap .pt-emb { width: 60px; height: 60px; }
  .pt-rail { padding: 10px 8px; } .pt-rail::before { left: 28px; } .pt-node { width: 34px; } .pt-fcard { padding: 8px; gap: 8px; } .pt-ficon .sp-ico { width: 32px; height: 32px; }
}
.chat-taunt { color: #ffb4a0; } .chat-taunt b { color: #ff7a5c; }

/* ---------- Hero tab (dnd_wizard.js heroDetailHTML): XP card, themed banners, traits, rails ---------- */
.hx-xp { display: flex; gap: 14px; align-items: center; padding: 10px 14px; margin: 0 0 12px; border-radius: 10px; background: linear-gradient(90deg, #1c2533, #17140f 70%); border: 1px solid #34465e; }
.hx-lv, .hx-cap { display: flex; flex-direction: column; align-items: center; line-height: 1; min-width: 44px; }
.hx-lv small, .hx-cap small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hx-lv b { font-size: 28px; color: #9fd0ff; text-shadow: 0 0 12px #4a90e066; }
.hx-cap b { font-size: 16px; color: var(--muted); }
.hx-xprow { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 5px; }
.hx-xprow span { color: var(--muted); }
.hx-bar { height: 10px; border-radius: 6px; background: #0d1118; box-shadow: inset 0 0 0 1px #2a3546; overflow: hidden; }
.hx-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #4a90e0, #9fd8ff); box-shadow: 0 0 10px #6ab4ff88; }
.hx-body { margin-top: 10px; }
.hx-body .fg-dr-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.hx-thumb { display: block; width: 84px; height: 84px; border-radius: 10px; }
.hx-sec { padding: 12px 16px 4px; }
.hx-sec h4, .hx-subhead h4 { margin: 0 0 8px; font-size: 15px; color: var(--pa); display: flex; gap: 8px; align-items: center; }
.hx-traits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.hx-trait { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--pa) 8%, #1e1914), #1a1612); border: 1px solid color-mix(in srgb, var(--pa) 25%, #2e271f); }
.hx-trait b { font-size: 14.5px; }
.hx-sec .pt-rail { padding: 4px 0 8px; }
.hx-sec .pt-rail::before { left: 21px; }
.hx-evo { display: flex; gap: 12px; align-items: center; margin: 4px 0 12px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(90deg, #3a2c10, #1a1612); border: 1px solid #e8c07077; }
.hx-evo > span { font-size: 26px; color: #ffd76a; text-shadow: 0 0 12px #e8c070; }
.hx-subhead { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 6px; border-bottom: 1px solid color-mix(in srgb, var(--pa) 20%, var(--line)); background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--pa) 18%, transparent), transparent 60%); }
.hx-subhead .pt-emb { flex: none; border-radius: 9px; }
.hx-subhead + .pt-rail { padding: 10px 16px 12px 14px; }
.pt-step.evo .pt-fcard { border-color: #e8c07088; background: linear-gradient(90deg, #2e2410, #1a1612); }
/* the hero editor's stage column: at-a-glance stats */
.sx-card { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.sx-xp { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; align-items: center; }
.sx-xp span { font-size: 13px; color: var(--muted); } .sx-xp span b { font-size: 18px; color: #9fd0ff; }
.sx-xp small { grid-column: 2; font-size: 11px; color: var(--muted); }
.sx-bar { height: 8px; border-radius: 5px; background: #0d1118; box-shadow: inset 0 0 0 1px #2a3546; overflow: hidden; }
.sx-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4a90e0, #9fd8ff); }
.sx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sx-stat { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 8px; background: #1e1914; border: 1px solid #2e271f; line-height: 1.1; }
.sx-stat b { font-size: 18px; } .sx-stat small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sx-stat.hp b { color: #ff8a8a; } .sx-stat.ac b { color: #9ec4e6; }
.sx-abil { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.sx-abil div { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 6px; background: #17130f; border: 1px solid #2a231b; line-height: 1.15; }
.sx-abil small { font-size: 9.5px; color: var(--muted); } .sx-abil b { font-size: 14px; } .sx-abil i { font-style: normal; font-size: 10.5px; color: var(--gold); }
.hx-body .pt-chip { text-transform: none; }
.cf-forms { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0 6px; } .cf-forms .cf-lv { min-width: 44px; }