:root {
  --bg: #16181d; --panel: #1f2229; --panel2: #272b34; --line: #363b47; --text: #e6e8ec; --muted: #9aa1ad;
  --accent: #d4a53a; --accent2: #f0c75e; --danger: #c0473b; --p1: #3b7be0; --p2: #d0453a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.4 "Segoe UI", "Malgun Gothic", sans-serif; }
#app { display: flex; height: 100vh; }
.sbpanel { width: 320px; min-width: 320px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.brand { flex: 1; padding: 10px 12px; font-weight: 700; font-size: 15px; color: var(--accent2); border-bottom: 1px solid var(--line); }
.brand .sub { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 6px; }
.tabnav { display: flex; border-bottom: 1px solid var(--line); }
.tabnav button { flex: 1 1 auto; border: 0; border-radius: 0; background: transparent; color: var(--muted); padding: 9px 5px; white-space: nowrap; font-size: 12px; border-bottom: 2px solid transparent; }
.tabnav button.on { color: var(--text); border-bottom-color: var(--accent); }
.tab { padding: 10px 12px; overflow-y: auto; flex: 1; }
.hidden { display: none !important; }
.lbl { display: block; margin: 12px 0 5px; color: var(--accent2); font-weight: 600; font-size: 12px; }
.lbl:first-child { margin-top: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.row.right { justify-content: flex-end; }
.note { color: var(--muted); font-size: 12px; }
button, .btn { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 5px 10px; cursor: pointer; font: inherit; display: inline-block; }
button:hover, .btn:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #1a1406; border-color: var(--accent); font-weight: 600; }
button.primary:hover { background: var(--accent2); }
button.danger { color: #ffb4ab; }
button.wide { width: 100%; margin: 8px 0; padding: 7px; }
button.mini { padding: 1px 7px; font-size: 12px; }
input, select, textarea { background: #12141a; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; font: inherit; }
input[type=number] { width: 70px; }
select, input[type=search] { width: 100%; }
textarea { width: 100%; height: 180px; resize: vertical; font-family: Consolas, monospace; font-size: 12px; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); }

.boardlist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.boardlist .bitem { cursor: pointer; border: 2px solid transparent; border-radius: 5px; overflow: hidden; background: #111; }
.boardlist .bitem img { width: 100%; display: block; aspect-ratio: 60/44; object-fit: cover; }
.boardlist .bitem span { display: block; font-size: 11px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boardlist .bitem.on { border-color: var(--accent); }
.boardlist .blankthumb { aspect-ratio: 60/44; background: #3a3d36; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 10% 13.6%; display: flex; align-items: center; justify-content: center; color: #d8d2bd; font-weight: 600; }
.blanksize { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; }
.blanksize .lbl { margin-top: 0; }
.tokpal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.tokpal button { border-left: 4px solid var(--c); text-align: left; padding: 4px 8px; font-weight: 600; font-size: 12px; }
.tokpal button.on { background: #3a3320; border-color: var(--accent); border-left-color: var(--c); }
.tokdot { width: 14px; height: 14px; border-radius: 50%; background: #1b1e24; border: 3px solid var(--c); flex: none; }
.tokedit { flex: 1; min-width: 0; padding: 2px 5px; }
.bgroup { grid-column: 1 / -1; font-size: 11px; color: var(--accent2); font-weight: 600; margin-top: 6px; border-bottom: 1px solid var(--line); }
.subsection { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 4px; }
.ctxmenu { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.5); display: flex; flex-direction: column; min-width: 190px; }
.ctxmenu button { border: 0; background: transparent; text-align: left; padding: 6px 10px; border-radius: 4px; }
.ctxmenu button:hover { background: var(--panel2); }
.ctxmenu .ctxnote { padding: 4px 10px 5px; font-size: 11px; color: var(--muted); }
.ctxmenu hr { border: 0; border-top: 1px solid var(--line); margin: 3px 0; width: 100%; }
#helpBtn { position: absolute; left: 10px; top: 8px; width: 28px; height: 28px; padding: 0; border-radius: 50%; font-weight: 700; background: rgba(15, 16, 20, .85); z-index: 5; }

.list { display: flex; flex-direction: column; gap: 4px; }
.list .item { background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.list .item.sel { border-color: var(--accent); }
.list .item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .item input[type=number] { width: 52px; padding: 2px 4px; }
.list.small .item { padding: 3px 6px; cursor: pointer; }
.objpal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.objpal button { padding: 4px; display: flex; flex-direction: column; align-items: center; font-size: 11px; gap: 3px; }
.objpal canvas { width: 52px; height: 52px; }
.objpal button.on { border-color: var(--accent); background: #3a3320; }

.ptabs { display: flex; gap: 6px; margin: 10px 0 6px; }
.ptabs button { flex: 1; }
.ptabs button.on.p1 { background: var(--p1); border-color: var(--p1); }
.ptabs button.on.p2 { background: var(--p2); border-color: var(--p2); }
.unitrow { display: flex; align-items: center; gap: 5px; background: var(--panel2); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--line)); border-radius: 5px; padding: 4px 6px; margin: 3px 0; }
.unitrow .name { flex: 1; min-width: 0; }
.unitrow .name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.unitrow .name small { color: var(--muted); }
.unitrow.done { opacity: .75; }
.warn { color: #ffcf8a; font-size: 12px; }
.tag { font-size: 10px; background: #444; border-radius: 3px; padding: 0 4px; color: #ddd; }

#main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #0d0e11; }
#stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#status { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 10px; background: rgba(15, 16, 20, .85); color: var(--muted); font-size: 12px; pointer-events: none; display: flex; gap: 18px; }
#hud { position: absolute; top: 8px; right: 10px; background: rgba(15, 16, 20, .85); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 12px; pointer-events: none; max-width: 360px; }
#hud:empty { display: none; }
#toast { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #2b2f39; border: 1px solid var(--accent); border-radius: 6px; padding: 7px 14px; pointer-events: none; }

/* ---------- Dice tab ---------- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.seg label { cursor: pointer; }
.seg input { display: none; }
.seg span { display: block; padding: 5px 12px; background: var(--panel2); font-weight: 600; }
.seg input:checked + span { background: var(--accent); color: #1a1406; }
.dexpr { font: 700 22px Consolas, monospace; color: var(--accent2); margin: 2px 0 6px; }
.dbox { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; margin: 6px 0; }
.dbox.wound { border-color: #6b2a2a; }
.dhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.dcounts { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; }
.dcrow { display: flex; align-items: center; gap: 7px; }
.dcrow b { width: 26px; text-align: right; }
.dcrow.fail { opacity: .5; }
.dface { width: 20px; height: 20px; border-radius: 4px; background: #eee6d0; color: #222; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.dface.crit { background: #f2c94c; box-shadow: 0 0 0 2px #fff3; }
.dface.fail { background: #777; }
.dbar { flex: 1; height: 10px; background: #15171c; border-radius: 3px; overflow: hidden; }
.dbar i { display: block; height: 100%; background: #6c8fd8; }
.dcrow.pass .dbar i { background: #4cbb6c; }
.dcrow.crit .dbar i { background: #f2c94c; }
.dcrow.fail .dbar i { background: #666; }
b.big { font-size: 16px; color: #fff; }
.crit-t { color: #f2c94c; }
.dexpr { margin: 0 0 0 4px !important; }
.seqgroup { border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px 9px; margin-bottom: 12px; background: rgba(255,255,255,.015); }
.seqgroup.attack { border-left: 4px solid #c9973a; }
.seqgroup.defense { border-left: 4px solid #3f86c9; }
.seqtitle { font-weight: 700; font-size: 14px; padding: 5px 0 2px; }
.seqgroup.attack .seqtitle { color: #f0c75e; }
.seqgroup.defense .seqtitle { color: #7fc0ff; }
.dbox.save { border-color: #2a4f6b; }
.dbox.ward { border-color: #4b3a6b; }
.dsum.final > div { min-width: 0; }
.dsum .dmg b { color: #ffb14d; }
.critlist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.critlist label { cursor: pointer; }
.critlist input { display: none; }
.critlist span { display: flex; flex-direction: column; padding: 5px 9px; background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; }
.critlist span small { color: var(--muted); font-size: 11px; }
.critlist input:checked + span { border-color: var(--accent); background: #3a3320; }
.critlist input:checked + span b { color: var(--accent2); }
.wcalc { background: #12141a; border: 1px dashed var(--line); border-radius: 6px; padding: 6px 9px; margin: 6px 0 0; font-size: 12px; }
.wcalc:empty { display: none; }
.wcalc .big { font-size: 18px; color: var(--accent2); }
button.grow { flex: 1; }
.combatgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.combatgrid label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.combatgrid input, .combatgrid select { width: 100%; }
.dsum { display: flex; gap: 6px; margin: 8px 0 4px; }
.dsum > div { flex: 1; background: #12141a; border: 1px solid var(--line); border-radius: 6px; padding: 5px; text-align: center; display: flex; flex-direction: column; }
.dsum span { font-size: 11px; color: var(--muted); }
.dsum b { font-size: 22px; color: #fff; }
.dsum small { font-size: 10px; color: var(--muted); }
.dsum .mortal { border-color: #a33; }
.dsum .mortal b { color: #ff7a6b; }
.dhist { font-size: 11px; font-family: Consolas, monospace; max-height: 160px; overflow: auto; word-break: break-all; }
.dhist div { padding: 2px 0; border-bottom: 1px solid #2a2e37; }

#diceTray { position: absolute; inset: 0; z-index: 30; background: radial-gradient(ellipse at center, rgba(40, 32, 20, .82), rgba(6, 7, 10, .9)); display: flex; flex-direction: column; cursor: pointer; }
.trayhead { display: flex; gap: 16px; align-items: baseline; padding: 12px 16px; font-size: 15px; }
.trayhead b { color: var(--accent2); font-size: 17px; }
.traydice { flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: calc(var(--s) * .45); padding: 10px 30px 40px; }
.die { width: var(--s); height: var(--s); perspective: calc(var(--s) * 7); animation: diceDrop var(--dur) cubic-bezier(.3, .6, .4, 1) var(--delay) both; transition: opacity .3s, filter .3s; }
@keyframes diceDrop {
  0% { transform: translate(var(--dx), -70vh) rotate(var(--rz)); }
  55% { transform: translate(0, 0) rotate(var(--rz)); }
  70% { transform: translate(0, calc(var(--s) * -.35)) rotate(var(--rz)); }
  84% { transform: translate(0, 0) rotate(var(--rz)); }
  92% { transform: translate(0, calc(var(--s) * -.08)) rotate(var(--rz)); }
  100% { transform: translate(0, 0) rotate(var(--rz)); }
}
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.cube.go { transition: transform var(--dur) cubic-bezier(.12, .75, .22, 1) var(--delay); }
.face { position: absolute; inset: 0; border-radius: 16%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 13%; backface-visibility: hidden;
  background: var(--dbg); box-shadow: inset 0 0 calc(var(--s) * .14) rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(0, 0, 0, .25); }
.face .pip { border-radius: 50%; margin: 13%; background: var(--dpip); box-shadow: inset 0 calc(var(--s) * .02) calc(var(--s) * .03) rgba(0, 0, 0, .5); }
.face.front { transform: translateZ(calc(var(--s) / 2)); }
.face.back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.face.right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.face.left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.face.top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.die.plain { --dbg: #f4efe2; --dpip: #1b1b1b; }
.die.d3 { --dbg: #2b7a8f; --dpip: #fff; }
.die.hit { --dbg: #efe6cc; --dpip: #20242c; }
.die.wound { --dbg: #9b1d1d; --dpip: #fff3e0; }
.die.save { --dbg: #1f4e7a; --dpip: #eaf4ff; }
.die.ward { --dbg: #5a3a8a; --dpip: #f3ecff; }
.die.fail { opacity: .28; filter: grayscale(.7); }
.die.crit .face { box-shadow: inset 0 0 calc(var(--s) * .14) rgba(0, 0, 0, .3), 0 0 0 3px #f2c94c, 0 0 calc(var(--s) * .4) rgba(242, 201, 76, .8); }
.die.pass .face { box-shadow: inset 0 0 calc(var(--s) * .14) rgba(0, 0, 0, .3), 0 0 0 2px #4cbb6c; }

.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 50; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; max-height: 92vh; overflow: auto; }
.card h2 { margin: 0 0 10px; font-size: 17px; color: var(--accent2); }
.card h3 { margin: 0 0 10px; }
.card.small { width: 320px; }
.card.help { width: 820px; max-width: 96vw; }
.help .cols { display: flex; gap: 18px; flex-wrap: wrap; }
.help table { flex: 1; min-width: 320px; border-collapse: collapse; align-self: flex-start; }
.help th { text-align: left; color: var(--accent2); padding: 8px 0 3px; border-bottom: 1px solid var(--line); }
.help td { padding: 3px 6px 3px 0; vertical-align: top; }
.help td:first-child { white-space: nowrap; color: #fff; font-family: Consolas, monospace; width: 150px; }

.card.db { width: 1100px; max-width: 97vw; height: 88vh; display: flex; flex-direction: column; }
.dbhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.dbhead h2 { margin: 0 8px 0 0; }
.dbhead select { width: 200px; }
.dbhead input[type=search] { width: 200px; }
.grow { flex: 1; }
.dbbody { flex: 1; display: flex; gap: 12px; min-height: 0; }
.dbtable { flex: 1; overflow: auto; border: 1px solid var(--line); border-radius: 5px; }
.dbtable table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dbtable th { position: sticky; top: 0; background: var(--panel2); text-align: left; padding: 5px 6px; }
.dbtable td { padding: 3px 6px; border-top: 1px solid #2a2e37; }
.dbtable td.num { text-align: right; }
.dbtable tr { cursor: pointer; }
.dbtable tbody tr:hover { background: #2a2e38; }
.dbtable tr.sel { background: #3a3320; }
.dbform { width: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.dbform label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.dbform label:has(input[type=checkbox]) { flex-direction: row; align-items: center; gap: 6px; }
.dbform input:not([type=checkbox]):not([type=radio]), .dbform select { width: 100%; }
.dbform label small.note, .fbase small.note { font-size: 11px; }
.fbase { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.fbase #fBases { display: flex; flex-direction: column; gap: 5px; }
.baserow { border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px 6px; background: var(--panel2); display: flex; flex-direction: column; gap: 5px; }
.baserow .brtop { display: flex; align-items: center; gap: 12px; }
.dbform .baserow .brtop label { flex-direction: row; align-items: center; gap: 4px; color: var(--text, #e6e6e6); cursor: pointer; }
.baserow .brsize { display: flex; align-items: center; gap: 5px; }
.dbform .baserow .brsize input.bw, .dbform .baserow .brsize input.bh { width: 68px; flex: 0 0 68px; }
.baserow .brsize input:disabled { opacity: .35; }
.baserow .bcnt { margin-left: auto; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.baserow .bcnt.hidden { display: none; }
.dbform .baserow .bcnt input.bc { width: 52px; }
.fbase #fBaseAdd { align-self: flex-start; }

/* ---------- sidebars (pin / hide) ---------- */
.sb { position: relative; flex: none; display: flex; z-index: 20; }
.sbrail { width: 30px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding-top: 6px; gap: 10px; }
.sb.open.pinned .sbrail { display: none; }
.sbopen { padding: 2px 6px; font-weight: 700; }
.sbvt { writing-mode: vertical-rl; color: var(--accent2); font-weight: 600; font-size: 12px; letter-spacing: .5px; white-space: nowrap; }
.sb:not(.open) .sbpanel { display: none; }
.sb.open:not(.pinned) .sbpanel { position: absolute; left: 0; top: 0; bottom: 0; z-index: 40; box-shadow: 8px 0 26px rgba(0, 0, 0, .6); }
/* an unpinned sidebar floats over the map: it must also lie above the score / phase bars */
.sb.open:not(.pinned) { z-index: 45; }
.sbhead { display: flex; align-items: center; border-bottom: 1px solid var(--line); padding-right: 6px; gap: 4px; }
.sbhead .brand { border-bottom: 0; }
.sbhead button { padding: 2px 6px; flex: none; }
.sbpin { opacity: .45; filter: grayscale(1); }
.sbpin.on { opacity: 1; filter: none; border-color: var(--accent); }

/* ---------- score bar ---------- */
#scorebar { flex: none; background: var(--panel); border-bottom: 1px solid var(--line); padding: 4px 8px; overflow-x: auto; }
table.score { border-collapse: collapse; margin: 0 auto; font-size: 12px; }
table.score th, table.score td { border: 1px solid var(--line); padding: 1px 3px; text-align: center; }
table.score th { background: var(--panel2); font-weight: 600; color: var(--muted); }
table.score th.rd { color: var(--accent2); }
table.score th.sub { font-weight: 400; font-size: 11px; }
table.score th.mapcell { text-align: left; padding-left: 8px; }
table.score th.mapcell b { color: var(--text); margin-left: 6px; }
table.score .lead { border: 0; background: transparent; min-width: 120px; }
table.score tbody .lead { border: 1px solid var(--line); border-left-width: 4px; }
table.score tr.p1 .lead { border-left-color: var(--p1); }
table.score tr.p2 .lead { border-left-color: var(--p2); }
table.score .pname { width: 118px; border: 0; background: transparent; font-weight: 600; text-align: left; }
table.score .pname:focus { background: #12141a; }
table.score input.pt { width: 52px; border: 0; background: transparent; text-align: center; padding: 3px 2px; }
table.score input.pt:focus { background: #12141a; }
table.score td.tot, table.score th.tot { font-weight: 700; min-width: 50px; color: var(--accent2); }

/* ---------- Round Status ---------- */
.rsbox { background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; }
.rsrow { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #2f3440; }
.rsrow:last-child { border-bottom: 0; }
.rsrow.wrap { flex-wrap: wrap; }
.rslbl { flex: 1 0 110px; font-weight: 700; color: var(--accent2); text-transform: uppercase; letter-spacing: .3px; }
.rsrow .rsnum { width: 80px; }
.priest { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); gap: 2px; }
.priest input { width: 64px; }
.tchips { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tchip { text-align: left; font-size: 12px; padding: 4px 8px; }
.tchip.on { background: #3a3320; border-color: var(--accent); color: var(--accent2); font-weight: 600; }
.tcard { border: 1px solid #4d5b8a; border-radius: 5px; padding: 7px 9px; margin: 9px 0; background: #1a1d26; }
.tname { color: #e0584c; font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.tsetup { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #2f3440; }
.tact { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; cursor: pointer; }
.tact input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.tact b { display: block; color: #e0584c; font-size: 12px; }
.tdesc { display: block; font-size: 11.5px; color: var(--text); }
.tact.done { opacity: .6; }
.tact.done b { text-decoration: line-through; }

/* ---------- Damage formula / highlight ---------- */
label.chk { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--muted); margin: 8px 0 0; cursor: pointer; }
label.chk input { margin-top: 2px; }
.dmgcfg { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dmgcfg input[type=number] { width: 54px; }
.dmgcfg select { width: 62px; }
.dgchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.dgchips button.on { background: #3a3320; border-color: var(--accent); color: var(--accent2); }
.dbox.dmg { border-color: #8a5a1f; }
.die.dmg { --dbg: #c8731a; --dpip: #fff; }
.dcrow.hlfail .dbar i { background: #ff5a4a; }
.dcrow.hlfail b { color: #ff9a8e; }
.dcrow.dim { opacity: .4; }
.dcrow.dim .dbar i { background: #666; }
.dface.hlfail { background: #ff5a4a; color: #fff; box-shadow: 0 0 0 2px #fff3; }
.dface.dim { background: #777; }
.die.hlfail .face { box-shadow: inset 0 0 calc(var(--s) * .14) rgba(0, 0, 0, .3), 0 0 0 3px #ff4a3a, 0 0 calc(var(--s) * .45) rgba(255, 74, 58, .9); }
.die.dim { opacity: .3; filter: grayscale(.8); }.rsrow.wrap .rslbl { flex: 1 0 100%; }
.rsrow.wrap { gap: 10px; }

/* ---------- score bar toggle ---------- */
#scorewrap { position: relative; flex: none; z-index: 25; }
#scorehead { display: flex; align-items: center; gap: 8px; background: var(--panel2); border-bottom: 1px solid var(--line); padding: 2px 8px; font-size: 12px; }
#scorehead .sct { font-weight: 700; color: var(--accent2); }
#scorehead button { padding: 1px 7px; font-size: 12px; }
#scorewrap:not(.open) #scorebar { display: none; }
#scorewrap.open:not(.pinned) #scorebar { position: absolute; top: 100%; left: 0; right: 0; box-shadow: 0 10px 26px rgba(0, 0, 0, .6); }

/* ---------- battle plan popup (Tab) ---------- */
#bpPop { position: absolute; z-index: 35; top: 10px; right: 10px; bottom: 34px; width: min(470px, 94%); background: rgba(24, 26, 33, .97); border: 1px solid var(--accent); border-radius: 9px; box-shadow: 0 10px 34px rgba(0, 0, 0, .65); display: flex; flex-direction: column; overflow: hidden; }
#bpPop .bphead { padding: 9px 14px; background: #2b2618; border-bottom: 1px solid var(--accent); }
#bpPop .bphead b { font-size: 17px; color: var(--accent2); }
#bpPop .bphead small { display: block; color: var(--muted); }
#bpPop .bpbody { padding: 8px 14px 12px; overflow-y: auto; flex: 1; }
#bpPop h4 { margin: 12px 0 4px; color: var(--accent2); font-size: 13px; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
#bpPop p { margin: 4px 0; }
#bpPop .abil { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; margin: 6px 0; }
#bpPop .abil .tm { font-size: 11px; color: #7fc0ff; }
#bpPop .abil .nm { font-weight: 700; font-size: 14px; color: #fff; }
#bpPop .abil .lb { color: var(--accent2); font-weight: 600; }
#bpPop ul { margin: 4px 0; padding-left: 18px; }
#bpPop li { margin: 3px 0; }
#bpPop li b { color: var(--accent2); }
#bpPop .bpfoot { padding: 4px 14px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); }

/* ---------- game tracker (territories, round / turn / phase) ---------- */
#phasebar { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--panel); border-bottom: 1px solid var(--line); padding: 4px 10px; font-size: 12px; z-index: 24; }
#phasebar .pbsides { display: flex; gap: 8px; }
#phasebar .pbside { display: flex; align-items: center; gap: 6px; border-left: 4px solid var(--line); padding-left: 6px; }
#phasebar .pbside i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 0 6px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); color: var(--accent2); }
#phasebar .pbside.p1 { border-left-color: var(--p1); }
#phasebar .pbside.p2 { border-left-color: var(--p2); }
#phasebar .pbside b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#phasebar .pbside select { width: auto; padding: 2px 4px; }
#phasebar .pbnow { white-space: nowrap; }
#phasebar .pbnow b { color: var(--accent2); font-size: 13px; }
#phasebar .pbwho { margin-left: 6px; padding: 1px 8px; border-radius: 10px; color: #fff; font-weight: 600; }
#phasebar .pbwho.p1, #phasebar .pbgo.p1 { background: var(--p1); border-color: var(--p1); color: #fff; }
#phasebar .pbwho.p2, #phasebar .pbgo.p2 { background: var(--p2); border-color: var(--p2); color: #fff; }
#phasebar .pbphases { display: flex; gap: 3px; flex-wrap: wrap; }
#phasebar .pbphase { padding: 2px 8px; font-size: 12px; color: var(--muted); }
#phasebar .pbphase.done { color: var(--text); border-color: #4c8a5b; background: #1f2f25; }
#phasebar .pbphase.on { color: #1a1406; background: var(--accent); border-color: var(--accent); font-weight: 700; }
#phasebar .pbphase:disabled, #phasebar button:disabled { opacity: .4; cursor: default; }
#phasebar .pbctl { display: flex; align-items: center; gap: 6px; margin-left: auto; }
#phasebar .pbctl button { padding: 3px 10px; }
#phasebar .pbdie { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 5px; padding: 1px 3px 1px 7px; white-space: nowrap; }
#phasebar .pbdie.p1 { border-left-color: var(--p1); }
#phasebar .pbdie.p2 { border-left-color: var(--p2); }
#phasebar .pbdie b { display: inline-block; min-width: 22px; text-align: center; background: #f4f1e8; color: #16181d; border-radius: 4px; font-size: 14px; }
#phasebar .pbdie b.none { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
#phasebar .pbdie button { padding: 1px 8px; }
#phasebar .pbdie.win b { background: var(--accent2); }
#phasebar .pbdie button.mini { padding: 0 5px; }

button:disabled, input[type=file]:disabled + * { opacity: .45; cursor: default; }

/* ---------- 2-player: status, pointers ---------- */
.netstatus { font-size: 12px; margin-bottom: 2px; }
.p1t { color: #6fb1ff; } .p2t { color: #ff8273; }
#netBadge { position: absolute; left: 46px; top: 11px; z-index: 6; background: rgba(15, 16, 20, .85); border: 1px solid var(--line); border-radius: 12px; padding: 2px 10px 2px 8px; font-size: 12px; pointer-events: none; }
#netBadge i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #c99a2e; }
#netBadge.ok i { background: #45c46b; }
#ptrLayer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 12; }
#ptrPeer { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
#ptrPeer svg { display: block; }
#ptrPeer span { position: absolute; left: 14px; top: 18px; padding: 0 6px; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
#ptrMe { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border: 2px solid; border-radius: 50%; opacity: .85; will-change: transform; }
.ripple { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid; border-radius: 50%; animation: ripple .65s ease-out forwards; }
@keyframes ripple { from { transform: scale(.6); opacity: 1; } to { transform: scale(5); opacity: 0; } }

/* ---------- chat ---------- */
#chat { position: absolute; left: 10px; bottom: 34px; width: 330px; max-width: calc(100% - 20px); max-height: 40%; display: flex; flex-direction: column; background: rgba(20, 22, 28, .93); border: 1px solid var(--line); border-radius: 8px; z-index: 31; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); transition: opacity .6s; }
#chat.idle { opacity: .42; }
#chat.idle:hover { opacity: 1; }
#chat.flash { animation: chatflash 1.2s ease-in-out 1; }
@keyframes chatflash { 0%, 40%, 80% { border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(240, 199, 94, .55), 0 6px 20px rgba(0, 0, 0, .5); } 20%, 60%, 100% { border-color: var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); } }
#chat .chathead { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
#chat .chathead b { color: var(--accent2); }
#chatLog { flex: 1; min-height: 60px; overflow-y: auto; padding: 6px 10px; font-size: 13px; line-height: 1.45; }
#chatLog .cm { overflow-wrap: anywhere; }
#chatLog .cm.sys { color: var(--muted); font-size: 12px; }
#chatLog .cm.sys.big { color: var(--accent2); }
#chatLog .cn { font-weight: 700; margin-right: 4px; }
#chatLog .cn.p1, .rpwho.p1 { color: #6fb1ff; }
#chatLog .cn.p2, .rpwho.p2 { color: #ff8273; }
#chatInput { margin: 0 6px 6px; }
#chatTab { position: absolute; left: 10px; bottom: 34px; z-index: 31; background: rgba(20, 22, 28, .93); }

/* ---------- replay ---------- */
#rpBar { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: min(1000px, calc(100% - 100px)); min-width: min(300px, calc(100% - 16px)); box-sizing: border-box; z-index: 33; background: rgba(24, 26, 33, .96); border: 1px solid var(--accent); border-radius: 9px; padding: 6px 10px; box-shadow: 0 8px 26px rgba(0, 0, 0, .6); }
#rpBar .rprow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }      /* wraps onto more lines when the table is narrow */
#rpBar .rprow > * { flex: 0 0 auto; }
#rpBar .rptitle { color: var(--accent2); margin-right: 4px; white-space: nowrap; }
#rpBar button { padding: 3px 9px; white-space: nowrap; }
#rpBar select { width: auto; }
#rpBar #rpMarks { flex: 1 1 120px; min-width: 0; max-width: 260px; }
#rpBar #rpSlider { flex: 1 1 110px; min-width: 90px; width: auto; padding: 0; margin: 0; }
#rpDesc { margin-top: 5px; font-size: 13px; min-height: 19px; line-height: 1.4; max-height: 2.8em; overflow: hidden; overflow-wrap: anywhere; }
#rpDesc .rpwho { font-weight: 700; margin-right: 6px; }
#rpDesc .rptext { margin-left: 6px; }
body.replay #toast { top: 92px; }
body.replay .sbpanel .tab, body.replay #scorebar, body.replay #phasebar { pointer-events: none; }
body.replay #phasebar .pbctl, body.replay #chatInput { visibility: hidden; }
body.replay #stage { outline: 2px solid var(--accent); outline-offset: -2px; }
.dmgrolls { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; max-height: 66px; overflow-y: auto; margin: 2px 0; }
#rpBar .rphint { font-size: 11px; color: var(--muted); white-space: nowrap; }
#rpCount { white-space: nowrap; }

/* ---------- input mode: help sections that belong to one mode only ---------- */
html:not(.touch) .touchonly { display: none !important; }
html.touch .mouseonly { display: none !important; }

/* Use model: no fixed base, the size is typed when the unit is placed */
.dbform .fbase label.fum { flex-direction: row; align-items: center; gap: 6px; color: var(--text, #e6e6e6); cursor: pointer; }
.fbase.usemodel #fBases { opacity: .55; }
#sizeModal .row label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
#sizeModal .sizebox { align-items: center; gap: 6px; }
#sizeModal .sizebox input { width: 84px; }
#sizeModal .sizebox input:disabled { opacity: .35; }
#sizeMsg { min-height: 1.3em; }
#sizeMsg.err { color: var(--danger); }