:root{
  --bg:#171310; --panel:#221c17; --panel2:#2c241d; --line:#4a3c2e;
  --ink:#f2e6d2; --dim:#a9977f; --gold:#d9b163; --bad:#c9482f; --good:#7fa86a;
  --board:#3a3125;
  --tile:clamp(42px,5vw,70px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:
   radial-gradient(1100px 700px at 50% -10%, #2a2119 0%, transparent 60%),
   var(--bg);
  color:var(--ink);font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  -webkit-font-smoothing:antialiased;}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{margin:0;letter-spacing:.08em}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
.screen{display:none;min-height:100vh}
.screen.on{display:block}
.wrap{max-width:1180px;margin:0 auto;padding:26px 20px 60px}

/* ---------- title ---------- */
.titlebar{text-align:center;padding:30px 10px 14px}
.titlebar .sub{color:var(--gold);letter-spacing:.42em;font-size:12px;text-transform:uppercase}
.titlebar h1{font-size:clamp(34px,7vw,66px);line-height:1;margin:8px 0 6px;
  background:linear-gradient(180deg,#f7e7c4,#c79a4b);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.35)}
.titlebar p{color:var(--dim);max-width:640px;margin:8px auto 0;font-size:15px;line-height:1.5}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:18px 0}

.sect{margin:22px 0 10px;color:var(--gold);font-size:12px;letter-spacing:.34em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.sect:after{content:"";flex:1;height:1px;background:var(--line)}

.cards{display:grid;gap:14px}
.c3{grid-template-columns:repeat(3,1fr)}
.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.c3,.c2{grid-template-columns:1fr}}

.card{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:10px;padding:16px;cursor:pointer;transition:.16s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-2px);border-color:var(--gold)}
.card.sel{border-color:var(--fc,var(--gold));box-shadow:0 0 0 1px var(--fc,var(--gold)) inset,0 8px 24px rgba(0,0,0,.45)}
.card.sel:after{content:"";position:absolute;inset:0;background:radial-gradient(400px 120px at 50% 0,var(--fc,#d9b163),transparent 70%);opacity:.14;pointer-events:none}
.card h3{font-size:19px}
.card .tag{color:var(--gold);font-size:10.5px;letter-spacing:.2em;margin:6px 0 10px}
.card p{margin:0;color:var(--dim);font-size:13px;line-height:1.45}
.crest{width:52px;height:52px;color:var(--fc,var(--gold));float:right;margin-left:10px}
.glyph{width:100%;height:100%}
.lineup{display:flex;gap:2px;justify-content:space-between;margin:12px 0 2px;padding:6px 4px;
  background:linear-gradient(180deg,rgba(0,0,0,.25),transparent);border-radius:6px}
.lu{width:25%;aspect-ratio:1;--c:var(--fc);--k:#1b140d;--m:#b9b3a6;--w:#7a5a34}
.lu .mini{width:100%;height:100%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.ability{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);font-size:12px;color:var(--ink)}
.ability b{color:var(--gold);letter-spacing:.12em}

.rowbtn{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:26px;flex-wrap:wrap}
.btn{background:linear-gradient(180deg,#e0b567,#a97c2e);color:#1d1409;border:0;padding:13px 30px;border-radius:7px;
  font-size:15px;letter-spacing:.2em;font-weight:700;text-transform:uppercase;box-shadow:0 4px 0 #6d4d18}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #6d4d18}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none;font-weight:400}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.sm{padding:8px 15px;font-size:12px}

/* ---------- counter triangle ---------- */
.triangle{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.tri{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:7px 15px;font-size:12.5px;letter-spacing:.1em}
.ricon{width:17px;height:17px}
.tri b{color:var(--gold)}

/* ---------- muster ---------- */
.muster{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start}
.unitgrid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1100px){.unitgrid{grid-template-columns:1fr}}
@media(max-width:940px){.muster{grid-template-columns:1fr}}
.ucard{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;
  background:linear-gradient(150deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:9px;padding:12px}
.ucard:hover{border-color:var(--gold)}
.ucard .mini{width:54px;height:54px;--c:var(--fc);--k:#1b140d;--m:#b9b3a6;--w:#7a5a34;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.selmini{width:52px;height:52px;flex:0 0 auto}
.selmini .mini{width:100%;height:100%;--k:#1b140d;--m:#b9b3a6;--w:#7a5a34}
.uname{font-size:16px}
.urole{font-size:10px;letter-spacing:.2em;color:var(--gold);display:flex;align-items:center;gap:5px;margin-top:2px}
.ustats{display:flex;gap:9px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:var(--dim)}
.ustats span b{color:var(--ink)}
.unote{font-size:11.5px;color:var(--dim);font-style:italic;margin-top:5px}
.cost{font-size:24px;color:var(--gold);text-align:center;line-height:1}
.cost small{display:block;font-size:9px;letter-spacing:.18em;color:var(--dim)}
.addbtn{margin-top:6px}
.side{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;position:sticky;top:14px}
.ptsbar{height:9px;background:#120e0b;border-radius:99px;overflow:hidden;margin:9px 0 4px}
.ptsbar i{display:block;height:100%;background:linear-gradient(90deg,#a97c2e,#e8c46f);transition:.25s}
.ptsnum{font-size:26px;letter-spacing:.04em}
.ptsnum b{color:var(--gold)}
.roster{list-style:none;margin:10px 0 0;padding:0;max-height:46vh;overflow:auto}
.roster li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px;border-bottom:1px solid #372c22;font-size:13px}
.roster li:hover{background:#2a2219}
.x{background:none;border:0;color:var(--bad);font-size:17px;line-height:1;padding:0 4px}
.warn{color:var(--bad);font-size:12px;min-height:16px;margin-top:6px}

/* ---------- battle ---------- */
.battle{display:grid;grid-template-columns:240px minmax(0,auto) 330px;gap:16px;padding:14px 16px 24px;align-items:start;justify-content:center}
.col{display:flex;flex-direction:column;gap:12px}
@media(max-width:1200px){.battle{grid-template-columns:1fr;}}
.hud{grid-column:1/-1;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:9px;padding:9px 14px}
.hudblock{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--dim)}
.hudblock b{font-size:17px;color:var(--ink);letter-spacing:.06em}
.vp{display:flex;align-items:center;gap:10px}
.vpbox{padding:5px 13px;border-radius:7px;border:1px solid var(--line);text-align:center;min-width:76px}
.vpbox b{font-size:22px;display:block}
.vpbox.p{border-color:var(--pc);color:var(--pc)} .vpbox.a{border-color:var(--ac);color:var(--ac)}
.turnflag{padding:5px 12px;border-radius:99px;font-size:11.5px;letter-spacing:.2em;border:1px solid}

.boardwrap{display:flex;justify-content:center;align-items:flex-start}
.stage{position:relative;perspective:1500px;perspective-origin:50% 62%;transition:padding .3s}
.stage.shake{animation:sh .3s}
.table{padding:16px;border-radius:10px;transition:transform .55s cubic-bezier(.3,.8,.35,1);transform-style:preserve-3d;
  background:
    radial-gradient(circle at 26% 16%, rgba(255,240,200,.1), transparent 45%),
    radial-gradient(circle at 76% 84%, rgba(90,120,70,.14), transparent 52%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"),
    linear-gradient(150deg,#8d7d5c,#6f6244 45%,#5d5238);
  box-shadow:0 26px 60px rgba(0,0,0,.6), 0 0 0 12px #2a2118, 0 0 0 13px #513f2a,
    inset 0 0 130px rgba(40,28,14,.5)}
.stage.iso .table{transform:rotateX(55deg) rotateZ(-90deg) scale(1.02)}
.board{position:relative;transform-style:preserve-3d}
.grid{display:block;overflow:visible}
.unitlayer,.proplayer{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d}
.prop{position:absolute;left:0;top:0;transform-origin:50% 86%;transition:transform .5s cubic-bezier(.3,.8,.35,1)}
.prop svg{width:100%;height:100%;filter:drop-shadow(0 4px 3px rgba(0,0,0,.5))}

/* ---------- hexes ---------- */
.hex{fill:rgba(255,245,215,.028);stroke:rgba(40,28,14,.3);stroke-width:1;cursor:pointer;transition:fill .12s}
.hex:hover{fill:rgba(255,240,200,.14);stroke:rgba(255,235,180,.75);stroke-width:2}
.hex.covert{fill:rgba(90,130,70,.2)}
.hex.blockt{fill:rgba(30,22,14,.35);cursor:not-allowed}
.hex.dz-p{fill:rgba(70,130,200,.2)} .hex.dz-a{fill:rgba(200,80,60,.2)}
.hex.legal{fill:rgba(120,200,120,.24);stroke:rgba(160,230,160,.8);stroke-width:2}
.hex.reach{fill:rgba(255,232,170,.26);stroke:rgba(255,235,180,.55);stroke-width:1.5}
.hex.reach:hover{fill:rgba(255,232,170,.45)}
.hex.dashreach{fill:rgba(150,195,255,.24);stroke:rgba(170,210,255,.6);stroke-width:1.5}
.hex.obj{stroke:rgba(226,190,110,.85);stroke-width:2.4}
.hex.obj.own-player{fill:rgba(70,130,200,.3);stroke:var(--pc);stroke-width:3.5}
.hex.obj.own-ai{fill:rgba(200,80,60,.3);stroke:var(--ac);stroke-width:3.5}
.deco{pointer-events:none}
.deco .terr{filter:drop-shadow(0 3px 2px rgba(0,0,0,.45))}
.deco .objart{filter:drop-shadow(0 4px 3px rgba(0,0,0,.5))}
.flame{transform-origin:24px 34px;animation:flick 1.1s infinite alternate ease-in-out}
@keyframes flick{from{transform:scaleY(.86) scaleX(1.05)}to{transform:scaleY(1.08) scaleX(.94)}}

/* ---------- miniatures ---------- */
.unit{position:absolute;left:0;top:0;transform-origin:50% 88%;
  transition:transform .34s cubic-bezier(.3,.8,.35,1);will-change:transform}
.minihold{position:absolute;inset:-36% -14% -6% -14%;display:flex;align-items:flex-end;justify-content:center}
.mini{width:100%;height:100%;--k:#1b140d;--m:#b9b3a6;--w:#7a5a34;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.55))}
.mini.flip{transform:scaleX(-1)}
.unit.act .mini{filter:drop-shadow(0 0 8px #ffdf9b) drop-shadow(0 4px 3px rgba(0,0,0,.55))}
.unit.done{opacity:.5;filter:saturate(.45)}
.unit.target .mini{animation:tgt .85s infinite}
.unit.holding:after{content:"";position:absolute;left:20%;right:20%;bottom:6%;height:2px;background:var(--gold);opacity:.85}
@keyframes tgt{0%,100%{filter:drop-shadow(0 0 3px #ff7a52) drop-shadow(0 4px 3px rgba(0,0,0,.5))}
  50%{filter:drop-shadow(0 0 14px #ff7a52) drop-shadow(0 4px 3px rgba(0,0,0,.5))}}
.unit.lunge .minihold{animation:lunge .32s ease-out}
@keyframes lunge{0%{transform:translate(0,0)}45%{transform:translate(var(--lx),var(--ly))}100%{transform:translate(0,0)}}
.unit.hit .minihold{animation:hitshake .3s}
@keyframes hitshake{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,1px) rotate(-4deg)}
  60%{transform:translate(3px,-1px) rotate(4deg)}}
.unit.dying{opacity:0;transition:opacity .6s}
.unit.dying .minihold{animation:topple .6s forwards}
@keyframes topple{to{transform:rotate(70deg) translateY(30%);opacity:0}}
.hpbar{position:absolute;left:18%;right:18%;bottom:0;height:4px;background:rgba(0,0,0,.65);
  border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.hpbar i{display:block;height:100%;background:var(--good);transition:width .3s}
.hpbar.hurt i{background:#e2ae3e} .hpbar.crit i{background:#d6503a}
.ocbadge{position:absolute;top:0;right:2px;font-size:10px;color:#f6e9cc;text-shadow:0 1px 3px #000;opacity:.85}

/* projectiles, impacts, shouts */
.shot{position:absolute;width:26px;height:10px;margin:-5px 0 0 -13px;pointer-events:none;z-index:400;
  transform:rotate(var(--ang));animation:fly .26s linear forwards}
.shot .boltart{width:100%;height:100%;filter:drop-shadow(0 0 3px rgba(255,220,150,.8))}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--ang))}}
.spark{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;pointer-events:none;z-index:400;animation:pop .45s ease-out forwards}
.spark .sparkart{width:100%;height:100%}
@keyframes pop{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.4);opacity:0}}
.float{position:absolute;transform:translate(-50%,-50%);font-size:20px;font-weight:700;color:#ffca6a;
  text-shadow:0 2px 5px #000,0 0 12px rgba(255,160,60,.6);animation:fl 1.15s ease-out forwards;
  pointer-events:none;z-index:500;letter-spacing:.04em;white-space:nowrap}
.float.miss{font-size:13px;color:#b9ab94;letter-spacing:.18em}
@keyframes fl{0%{opacity:0;transform:translate(-50%,-20%) scale(.8)}
  22%{opacity:1;transform:translate(-50%,-60%) scale(1.06)}
  100%{opacity:0;transform:translate(-50%,-170%) scale(1)}}
.banner{position:absolute;left:0;right:0;top:34%;text-align:center;pointer-events:none;z-index:600;
  animation:bn 1.5s ease-out forwards}
.banner b{display:block;font-size:42px;letter-spacing:.22em;color:#f6e0b0;text-shadow:0 4px 16px #000}
.banner span{display:block;font-size:13px;letter-spacing:.42em;color:var(--gold);margin-top:6px}
@keyframes bn{0%{opacity:0;transform:scale(.9)}15%{opacity:1;transform:scale(1)}
  75%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
.btn.active{border-color:var(--gold);color:var(--gold)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:12px}
.panel h3{font-size:11.5px;letter-spacing:.26em;color:var(--gold);margin-bottom:9px}
.ulist{list-style:none;margin:0;padding:0;font-size:12.5px}
.ulist li{display:flex;gap:7px;align-items:center;padding:5px 6px;border-radius:5px;cursor:pointer;border:1px solid transparent}
.ulist li:hover{background:#2c2419}
.ulist li.sel{border-color:var(--gold);background:#2f2618}
.ulist li.dead{opacity:.35;text-decoration:line-through;cursor:default}
.ulist li.done{opacity:.5}
.dot{width:9px;height:9px;border-radius:99px;flex:0 0 auto}
.actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.log{max-height:38vh;overflow:auto;font-size:12.5px;display:flex;flex-direction:column-reverse}
.entry{border-bottom:1px solid #362b21;padding:8px 2px}
.entry .hdr{color:var(--ink)}
.entry .hdr .who{color:var(--gold)}
.dice{display:flex;gap:3px;flex-wrap:wrap;align-items:center;margin:4px 0}
.die{width:19px;height:19px}
.die rect{fill:#e8dcc2;stroke:#5b4a34;stroke-width:2}
.die circle{fill:#3a2d1e}
.die-no rect{fill:#5c5148;stroke:#3b322a} .die-no circle{fill:#a0958a}
.dlabel{font-size:10.5px;color:var(--dim);letter-spacing:.12em;margin-right:4px;min-width:66px;display:inline-block}
.dmg{color:#ffc46a;font-weight:700}
.kill{color:var(--bad);font-weight:700;letter-spacing:.14em}
.mod{font-size:11px;color:var(--good)}
.roundmark{text-align:center;color:var(--gold);letter-spacing:.24em;font-size:11px;padding:8px 0;border-bottom:1px solid #362b21}
.hint{font-size:12px;color:var(--dim);line-height:1.45;margin-top:8px;min-height:32px}
.hint.err{color:var(--bad)}
.statline{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:12px;color:var(--dim);margin-top:8px}
.statline b{color:var(--ink)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(10,7,5,.84);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal.on{display:flex}
.mbox{background:linear-gradient(170deg,var(--panel2),var(--panel));border:1px solid var(--gold);border-radius:12px;
  max-width:620px;width:100%;padding:26px;max-height:88vh;overflow:auto}
.mbox h2{font-size:26px;color:var(--gold);margin-bottom:10px}
.mbox ol{padding-left:20px;line-height:1.75;color:var(--ink);font-size:14px}
.mbox p{color:var(--dim);line-height:1.55;font-size:14px}
.result{text-align:center}
.result h2{font-size:52px;letter-spacing:.14em}
.result.win h2{color:#e8c46f} .result.lose h2{color:var(--bad)} .result.draw h2{color:var(--dim)}
.summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0;text-align:left}
.sbox{background:#1d1712;border:1px solid var(--line);border-radius:8px;padding:10px}
.sbox small{color:var(--dim);font-size:10.5px;letter-spacing:.18em;display:block}
.sbox b{font-size:18px}
.seedline{font-size:11px;color:#6d6050;text-align:center;margin-top:16px;letter-spacing:.1em}
.seedline input{background:#191410;border:1px solid var(--line);color:var(--dim);border-radius:5px;padding:4px 7px;width:118px;font-family:inherit}
.thinking{position:absolute;right:10px;top:-2px;display:none;align-items:center;gap:8px;
  background:rgba(20,15,10,.9);border:1px solid var(--line);border-radius:99px;padding:5px 14px;
  z-index:6;font-size:10.5px;letter-spacing:.24em;color:var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.thinking.on{display:flex}
.thinking:before{content:"";width:7px;height:7px;border-radius:99px;background:var(--gold);animation:blip .8s infinite alternate}
@keyframes blip{from{opacity:.25}to{opacity:1}}