.battle-screen{position:fixed;inset:0;z-index:60;overflow:hidden;isolation:isolate;color:var(--text);background:var(--ink)}
.battle-screen[hidden]{display:none}
.battle-screen:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(10,12,20,.55),rgba(10,12,20,.8)),url(assets/battle-backdrop.webp) center/cover}
.battle-center{position:absolute;inset:66px 12px 96px 176px;display:flex;align-items:center;justify-content:center;container-type:size}
.battle-stage{--tilt:42deg;--w:min(92cqw,calc(100cqh*var(--cols)/var(--rows)*1.16));--u:calc(var(--w)/var(--cols));position:relative;width:var(--w);height:calc(var(--u)*var(--rows)*.82);perspective:calc(var(--w)*3.2);perspective-origin:50% 40%}
.battle-grid{position:absolute;left:0;top:50%;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);width:var(--w);height:calc(var(--u)*var(--rows));transform:translateY(-52%) rotateX(var(--tilt));transform-style:preserve-3d;background:#05070e;box-shadow:0 0 0 calc(var(--u)*.06) #2a2f42}
.battle-grid:after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(var(--u)*.3);background:linear-gradient(#232739,#0b0e18);transform-origin:top;transform:rotateX(-90deg)}
.battle-cell{--h:0px;--cap:var(--ground);position:relative;display:block;transform-style:preserve-3d;background:color-mix(in srgb,var(--ground) 74%,#0a0e1a);box-shadow:inset 0 0 0 .5px rgba(5,7,14,.55);color:var(--text)}
.battle-cell.odd{background:color-mix(in srgb,var(--ground) 58%,#0a0e1a)}
button.battle-cell:active:not(:disabled){transform:none}
.battle-cell[data-kind="water"]{background:#2b7cc8;box-shadow:inset 0 0 calc(var(--u)*.26) #0a2c55}
.battle-cell[data-kind="forest"]{--h:calc(var(--u)*.08);--cap:#2e7a57}
.battle-cell[data-kind="hill"]{--h:calc(var(--u)*.12);--cap:#bb7a3e}
.battle-cell[data-kind="rock"]{--h:calc(var(--u)*.16);--cap:#6c7795}
.battle-cell[data-kind="fort"]{--h:calc(var(--u)*.1);--cap:#e8c15a}
.battle-cell[data-kind="shallow"]{background:#58a7cf}
.battle-cell[data-kind="bridge"]{background:repeating-linear-gradient(90deg,#9a6a3a 0 14%,#7f5228 14% 20%);box-shadow:inset 0 3px 0 #4f3218,inset 0 -3px 0 #4f3218}
.cell-cap,.cell-mark{position:absolute;inset:0;transform:translateZ(var(--h))}
.cell-cap{background:var(--cap);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.cell-mark{transform:translateZ(calc(var(--h) + 1px))}
.cell-face{position:absolute;background:color-mix(in srgb,var(--cap) 46%,#080c18)}
.cell-face.front{left:0;right:0;bottom:0;height:var(--h);transform-origin:bottom;transform:rotateX(-90deg)}
.cell-face.side-l{left:0;top:0;bottom:0;width:var(--h);transform-origin:left;transform:rotateY(-90deg);background:color-mix(in srgb,var(--cap) 34%,#080c18)}
.cell-face.side-r{right:0;top:0;bottom:0;width:var(--h);transform-origin:right;transform:rotateY(90deg);background:color-mix(in srgb,var(--cap) 34%,#080c18)}
.battle-prop{position:absolute;left:14%;bottom:42%;width:72%;height:72%;transform-origin:50% 100%;transform:translateZ(var(--h)) rotateX(calc(var(--tilt)*-1));overflow:visible}
.battle-cell:hover .cell-mark{background:rgba(255,255,255,.14)}
.battle-cell.move-option .cell-mark{background:rgba(140,200,242,.42);box-shadow:inset 0 0 0 3px var(--ice)}
.battle-cell.move-option:hover .cell-mark{background:rgba(140,200,242,.68)}
.battle-cell.target-option .cell-mark{background:rgba(239,91,67,.34);box-shadow:inset 0 0 0 3px var(--red)}
.battle-cell.target-selected .cell-mark{background:rgba(239,91,67,.6);box-shadow:inset 0 0 0 4px #fff}
.battle-cell.threat .cell-mark{box-shadow:inset 0 0 0 2px rgba(239,91,67,.75);background:repeating-linear-gradient(45deg,rgba(239,91,67,.26) 0 8px,transparent 8px 16px)}
.battle-cell.selected .cell-mark{background:rgba(255,220,146,.4);box-shadow:inset 0 0 0 4px var(--gold-hi)}
.battle-piece{position:absolute;z-index:3;left:50%;bottom:34%;width:62%;aspect-ratio:.72;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--u)*.1);border:3px solid var(--gold);background:radial-gradient(circle at 35% 30%,#6a4c1d,#2a1d0b);color:var(--gold-hi);box-shadow:0 8px 14px rgba(0,0,0,.6);transform-origin:50% 100%;transform:translate3d(-50%,0,calc(var(--h) + 3px)) rotateX(calc(var(--tilt)*-1))}
.battle-piece.enemy{border-color:var(--red);background:radial-gradient(circle at 35% 30%,#7a2a1a,#2d0d07);color:var(--red-hi)}
.battle-piece>svg{width:54%;height:54%;margin-bottom:22%}
.battle-token-portrait{width:100%;height:100%;border-radius:calc(var(--u)*.07);overflow:hidden}
.battle-token-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 4%;transform:scale(1.5);transform-origin:50% 6%}
.battle-piece.sazai{background:radial-gradient(circle at 50% 30%,#2b3250,#10152a);box-shadow:0 0 0 2px var(--glow),0 0 12px 3px var(--glow),0 8px 14px rgba(0,0,0,.6)}
.battle-piece.sazai img{object-position:50% 0;transform:none;filter:drop-shadow(0 0 2px var(--glow))}
.piece-health{position:absolute;left:0;right:0;bottom:-3px;height:clamp(6px,calc(var(--u)*.07),9px);border-radius:4px;background:#05070e;overflow:hidden}
.piece-health i{display:block;height:100%;background:var(--gold-hi);transition:width .2s}.battle-piece.enemy .piece-health i{background:var(--red-hi)}
.piece-hp{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);padding:0 6px;border-radius:4px;background:rgba(5,7,14,.92);font-size:clamp(12px,calc(var(--u)*.15),16px);line-height:1.3;font-weight:700;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.battle-piece.spent{filter:grayscale(.75) brightness(.7)}
.battle-piece.selected{box-shadow:0 0 0 2px #fff,0 8px 14px rgba(0,0,0,.6)}
@keyframes battle-hit{0%,55%{filter:brightness(2) sepia(.5)}100%{filter:none}}
.battle-piece.hit{animation:battle-hit .38s ease-out}
.cell-chip{position:absolute;left:4%;bottom:5%;padding:0 5px;background:#080b14;color:#fff;font-size:clamp(12px,calc(var(--u)*.13),14px);font-weight:600;line-height:1.4;white-space:nowrap;transform-origin:0 100%;transform:translateZ(calc(var(--h) + 2px)) rotateX(calc(var(--tilt)*-1))}
.cell-chip.flag{background:var(--gold);color:#2a1a03;font-weight:800}.cell-chip.weak{background:#123a5c}
.battle-cell.heal-option .cell-mark{background:rgba(255,200,61,.3);box-shadow:inset 0 0 0 3px var(--gold)}
.dmg{position:absolute;left:50%;top:-14px;transform:translateX(-50%);z-index:4;padding:0 8px;color:#fff;background:var(--red);border:2px solid var(--ink);font:800 clamp(14px,calc(var(--u)*.19),22px)/1.25 var(--font);white-space:nowrap;animation:dmg 1s ease-in-out infinite alternate}
.dmg.kill{background:#000;color:var(--gold);border-color:var(--gold)}.dmg.heal{background:var(--gold);color:#2a1a03}
@keyframes dmg{to{transform:translateX(-50%) translateY(-4px)}}
.battle-cell.target-option,.battle-cell.heal-option{cursor:crosshair}

/* Heads-up pieces float over the board instead of walling it in. */
.b-top{position:absolute;z-index:6;left:50%;top:6px;transform:translateX(-50%);display:flex;align-items:baseline;gap:8px;padding:5px 24px 6px 12px;white-space:nowrap}
.b-top b{font:400 19px var(--display)}.b-top span{font-size:12px;color:var(--on-paper-2)}.b-top small{margin-left:6px;font-size:13px;color:var(--on-paper-2)}
.b-tools{position:absolute;z-index:6;right:12px;top:8px;display:flex;gap:3px}.b-tools .tab{height:34px;padding:0 10px}.b-tools .tab:after{font-size:13px}
.b-hero{position:absolute;z-index:5;left:-26px;bottom:-34px;height:min(46dvh,420px);aspect-ratio:560/818;pointer-events:none;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6))}
.b-hero img{width:100%;height:100%;object-fit:contain;object-position:bottom}
.b-hero.is-sazai img{filter:drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 14px var(--glow))}
.b-plate{position:absolute;z-index:6;left:12px;bottom:12px;display:grid;grid-template-columns:1fr auto;gap:0 8px;min-width:210px;padding:5px 20px 7px 10px;background:var(--ink);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.b-plate b{grid-column:1/3;font:400 22px/1.15 var(--display)}.b-plate small{grid-column:1/3;font-size:12px;color:var(--gold)}
.b-plate .hp{align-self:center;height:8px;background:var(--ink-3)}.b-plate .hp i{display:block;height:100%;background:var(--gold);transition:width .2s}.b-plate em{font-style:normal;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.b-dock{position:absolute;z-index:6;left:max(calc(min(46dvh,420px)*.62),236px);right:168px;bottom:12px;display:flex;align-items:center;gap:12px}
.b-squad{display:flex;gap:4px}
.b-token{position:relative;width:58px;height:58px;padding:4px;border-radius:50%;background:conic-gradient(var(--gold) var(--hp),#3a3f55 0);transition:transform .12s}
.b-token span{display:block;width:100%;height:100%;overflow:hidden;border-radius:50%;background:var(--ink-3);border:2px solid var(--ink)}
.b-token img{display:block;width:100%;transform:scale(1.9);transform-origin:50% 7%}
.b-token.sazai img{transform:scale(1.5);transform-origin:50% 0}
.b-token.sazai{box-shadow:0 0 8px 2px var(--glow)}
.b-token:hover{transform:translateY(-3px)}.b-token.selected{transform:translateY(-6px) scale(1.12);outline:3px solid #fff}
.b-token.spent span{filter:grayscale(1) brightness(.6)}.b-token.fallen{opacity:.35;filter:grayscale(1)}
.b-actions{display:flex;gap:6px;min-width:0}
.b-act{display:flex;align-items:center;gap:6px;min-height:50px;max-width:290px;padding:4px 12px;text-align:left;color:var(--on-paper);background:var(--paper);border:3px solid var(--ink);transform:skewX(-6deg);transition:transform .1s}
.b-act>*{transform:skewX(6deg)}.b-act svg{flex-shrink:0;width:18px;height:18px}.b-act b{display:block;font-size:14px;line-height:1.2}.b-act small{display:block;font-size:12px;line-height:1.3;color:var(--on-paper-2)}
.b-act:hover:not(:disabled){transform:skewX(-6deg) translateY(-2px)}.b-act.on{background:var(--gold)}.b-act:disabled{opacity:.45}
.b-log{position:absolute;z-index:5;left:max(calc(min(46dvh,420px)*.62 + 4px),240px);right:168px;bottom:86px;font-size:13px;color:var(--text);text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-key{position:absolute;z-index:5;left:50%;top:48px;transform:translateX(-50%);display:flex;gap:12px;padding:2px 10px;background:rgba(13,14,22,.6);font-size:12px;color:var(--muted);white-space:nowrap}
.b-key span{display:flex;align-items:center;gap:4px}.b-key i{width:9px;height:9px}.k-move{background:var(--ice)}.k-hit{background:var(--red)}.k-high{background:#bb7a3e}.k-wood{background:#2e7a57}.k-flag{background:var(--gold)}
.in-battle .bubble{position:fixed;z-index:80;left:calc(min(46dvh,420px)*.5);bottom:calc(min(46dvh,420px)*.7)}
.b-result{position:absolute;inset:0;z-index:12;display:grid;place-items:center;overflow:hidden;padding:16px;background:rgba(8,10,18,.82)}
.b-result .speed-lines{--c:#fff;opacity:.5}.b-result.lost .speed-lines{--c:#5d6480}
.b-result section{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.b-result h3{font:400 clamp(64px,13vw,132px)/1 var(--display);color:var(--gold);-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;transform:rotate(-5deg);animation:stamp .3s cubic-bezier(.2,1.6,.4,1)}
.b-result.lost h3{color:#d5d9e6}
@keyframes stamp{from{transform:rotate(-5deg) scale(1.9);opacity:0}}
.tally{font-size:16px}.tally b{font-size:32px;font-weight:800}.tally span{color:var(--muted)}.lost{color:#ff9d8f;font-size:14px}
.b-faces{display:flex;gap:10px;margin:4px 0}.b-faces figure{margin:0;width:112px}.b-faces img{display:block;width:112px;height:128px;object-fit:cover;object-position:50% 0;background:var(--ink-3);border:3px solid var(--text)}.b-faces figcaption{font-size:14px}.b-faces small{display:block;font-size:12px;color:var(--muted)}
.dial-like{display:flex;align-items:center;gap:8px;margin-top:6px;padding:9px 26px;font:400 22px var(--display);color:var(--on-paper);background:var(--gold);border:3px solid var(--ink);transform:skewX(-8deg)}.dial-like:hover{background:#ffdb7a}.dial-like svg{width:20px;height:20px}
.captives-list{display:flex;flex-direction:column}
@media(max-width:1180px){.b-key{display:none}.b-act small{display:none}.b-token{width:48px;height:48px}}
@media(max-width:900px){
  .battle-screen{display:flex;flex-direction:column;align-items:stretch}
  .b-top{order:-2;position:relative;left:auto;top:auto;transform:none;align-self:flex-start;margin:4px 0 0 4px;padding:3px 20px 4px 9px;max-width:calc(100% - 120px);flex-wrap:wrap;gap:0 6px;white-space:normal}.b-top b{font-size:15px}.b-top small{width:100%;margin:0;font-size:12px}
  .b-tools{right:4px;top:4px}.b-tools [data-battle-command="save"]{display:none}.b-tools .tab{width:auto;height:32px;padding:0 8px}.b-tools .tab:after{display:inline;font-size:13px}
  .battle-center{order:-1;position:relative;inset:auto;flex:0 0 auto;display:flex;margin-top:4px;container-type:normal}
  .battle-stage{--tilt:34deg;--w:min(90vw,520px);--u:calc(var(--w)/var(--rows));width:var(--w);height:calc(var(--u)*var(--cols)*.84);margin:0 auto;perspective:calc(var(--w)*7)}
  .battle-grid{grid-template-columns:repeat(var(--rows),1fr);grid-template-rows:repeat(var(--cols),1fr);height:calc(var(--u)*var(--cols))}
  .battle-grid .battle-cell{grid-column:var(--gc);grid-row:var(--gr)}
  .b-dock{order:0;position:relative;left:auto;right:auto;bottom:auto;margin:6px 6px 0;flex-direction:column;align-items:stretch;gap:5px}
  .b-squad{justify-content:center}.b-token{width:46px;height:46px;padding:3px}
  .b-actions{justify-content:center}.b-act{min-height:40px;padding:3px 10px}.b-act small{display:none}
  .b-hero{height:min(31dvh,270px);left:-26px;bottom:-22px}
  .b-plate{left:6px;bottom:calc(6px + var(--safe-b));min-width:150px;padding:3px 16px 5px 8px}.b-plate b{font-size:17px}.b-plate small{font-size:12px}
  .b-log,.b-key{display:none}
  .dial{width:96px;height:96px;right:6px;bottom:calc(6px + var(--safe-b))}.dial .core b{font-size:26px}.dial .core small{display:none}.dial .core em{font-size:13px}
  .piece-health{height:5px}.piece-hp{bottom:3px;font-size:12px;padding:0 3px}.dmg{top:-10px;padding:0 4px;font-size:13px}.cell-chip{display:none}.cell-chip.flag{display:block}
  .battle-piece{border-width:2px}
  .in-battle .bubble{left:42vw;right:8px;bottom:calc(112px + var(--safe-b));top:auto;max-width:none;width:auto}.in-battle .bubble p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.battle-screen *{transition:none!important;animation:none!important}}