:root{
  --paper:#f3eedd; --paper2:#e8e1c8; --ink:#1d1b16; --muted:#6b6455; --rule:#9fb4c8; --rule2:#c9d6e2;
  --spi:#b3241c; --spi2:#7c140f; --pencil:#3a3f48; --gold:#c89b2a; --ok:#2f6d3a; --warn:#b8860b; --bad:#a3221a;
  --board:#2a2c27; --btn:#fbf8ee; --btnb:#7f7660; --sel:#1f4e8c;
  --hand:"Segoe Print","Bradley Hand","Marker Felt","Comic Sans MS",cursive;
  --sans:"Helvetica Neue",Helvetica,Arial,"Nimbus Sans",sans-serif;
  --mono:"Courier New",Courier,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--board);color:var(--ink);font:13px/1.35 var(--sans)}
button{font:inherit;color:var(--ink);background:var(--btn);border:1px solid var(--btnb);border-radius:3px;padding:6px 8px;cursor:pointer;min-height:32px}
button:hover{background:#fff}
button:focus-visible{outline:2px solid var(--sel);outline-offset:1px}
button:disabled{opacity:.45;cursor:default}
button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#top{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--spi);color:#fff;border-bottom:3px solid var(--spi2)}
.mast{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
.brand{font-weight:900;letter-spacing:.14em;font-size:20px}
.ver{font:700 11px var(--mono);background:#fff;color:var(--spi);padding:1px 5px;border-radius:2px}
.sub{font-size:12px;opacity:.9;overflow:hidden;text-overflow:ellipsis}
.hdr-r{display:flex;gap:6px;align-items:center}
.hdr-scen{font-size:12px;opacity:.95;margin-right:6px;white-space:nowrap}
.hbtn{background:transparent;color:#fff;border-color:#fff8;min-height:30px;padding:4px 10px}
.hbtn:hover{background:#fff2}
.hbtn .ico{display:none;font-size:16px}
#layout{position:absolute;top:46px;left:0;right:0;bottom:0;display:grid;grid-template-columns:290px 1fr 330px;min-height:0}
aside{background:var(--paper);overflow-y:auto;min-height:0;padding:8px}
#info{border-right:2px solid #000}
#ctl{border-left:2px solid #000;display:flex;flex-direction:column;gap:8px}
.panel{background:var(--paper);margin-bottom:8px}
.panel h2{font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;margin:0 0 4px;padding:3px 6px;background:var(--ink);color:var(--paper)}
.card{padding:4px 6px;font-size:12.5px}
.muted{color:var(--muted)}
.small{font-weight:400;letter-spacing:0;text-transform:none;opacity:.8}
.kv{display:grid;grid-template-columns:auto 1fr;gap:1px 8px}
.kv b{font-weight:700}
.chip{display:inline-block;width:12px;height:12px;border:1px solid #000;vertical-align:-2px;margin-right:4px}
.armour{display:flex;gap:4px;margin:4px 0}
.armour span{flex:1;text-align:center;border:1px solid var(--btnb);background:var(--paper2);padding:2px 0;font:700 12px var(--mono)}
.pen{font:12px var(--mono)}
.st-ok{color:var(--ok);font-weight:700}.st-shaken{color:var(--warn);font-weight:700}.st-panic{color:var(--bad);font-weight:700}
#board{position:relative;min-width:0;min-height:0;background:var(--board);overflow:hidden}
#map{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;display:block}
.zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px}
.zoom button{width:36px;height:36px;font-size:18px;padding:0;background:#f3eeddee}
.mini{position:absolute;left:10px;bottom:10px;width:200px;height:146px;cursor:pointer;box-shadow:2px 2px 0 #0006;border-radius:2px}
.flag{font:700 10px var(--mono);color:#7a4fa0;margin-left:4px}.flag.cmd{color:#1d1b16}
.badge{display:inline-block;font:700 9.5px var(--sans);letter-spacing:.04em;padding:1px 5px;margin-left:6px;border-radius:2px;vertical-align:2px;color:#fff}
.badge.bv{background:#2f6d3a}.badge.bd{background:#7f7660}.badge.bl{background:#a3221a}
.record{font-weight:700}
.banner{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:#000c;color:#fff;padding:6px 14px;border-radius:3px;font-weight:700;letter-spacing:.06em;pointer-events:none;opacity:0;transition:opacity .25s;white-space:nowrap}
.banner.show{opacity:1}
.hovertip{position:absolute;pointer-events:none;background:#fffbea;border:1px solid #000;padding:3px 6px;font-size:12px;display:none;max-width:240px;box-shadow:2px 2px 0 #0004}
.phasebox{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;padding:6px;border:2px solid var(--ink)}
.phase{grid-row:span 2;font:900 15px var(--sans);letter-spacing:.1em;background:var(--spi);color:#fff;padding:8px 10px;text-align:center}
.clock{font:700 13px var(--mono);white-space:nowrap}
.score{font-size:12px}
.sheet{flex:1 1 auto;display:flex;flex-direction:column;min-height:140px}
.sheetwrap{flex:1 1 auto;overflow:auto;background:var(--paper) repeating-linear-gradient(0deg,transparent 0 21px,var(--rule2) 21px 22px);border:1px solid var(--rule);border-left:3px double var(--spi)}
table.plot{width:100%;border-collapse:collapse;font-size:12px}
table.plot th{position:sticky;top:0;background:var(--paper2);text-align:left;font:700 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:3px 4px;border-bottom:1px solid var(--rule)}
table.plot td{padding:2px 4px;height:22px;vertical-align:middle;border-right:1px solid var(--rule2)}
table.plot tr{cursor:pointer}
table.plot tr.sel td{background:#d9e5f3}
table.plot tr.dead td{color:#9a9384;text-decoration:line-through;cursor:default}
td.hand{font:14px var(--hand);color:var(--pencil);white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
td.ord{font:700 11px var(--mono)}
.o-move{color:#1d4d8a}.o-fire{color:var(--bad)}.o-ow{color:#356b2c}.o-panic{color:#fff;background:var(--bad);padding:0 3px}
.artline{font-size:12px;padding:4px 2px 0}
.orders{display:flex;flex-direction:column;gap:6px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.row4 button{padding:6px 2px}
.row2{display:grid;grid-template-columns:2fr 1fr;gap:4px}
.go{background:var(--spi);color:#fff;border-color:var(--spi2);font:900 15px var(--sans);letter-spacing:.1em;min-height:44px;text-transform:uppercase}
.go:hover{background:#c9342b}
.small-btns button{font-size:12px}
.slips{font-size:12px;max-height:none}
.slip{border:1px solid var(--rule);background:#fffdf4;margin-bottom:4px;padding:3px 5px;cursor:pointer}
.slip.mine{border-left:4px solid var(--sel)}.slip.theirs{border-left:4px solid var(--spi)}
.slip .hd{font-weight:700}
.slip .dice{font:14px var(--mono);letter-spacing:1px}
.slip .mods{display:none;margin-top:3px;border-top:1px dashed var(--rule);padding-top:2px;font:11px var(--mono)}
.slip.open .mods{display:block}
.slip.hl{background:#fff3c4}
.log{font-size:12px;max-height:220px;overflow-y:auto}
.log p{margin:0 0 2px}
.log p.turn{font-weight:700;border-top:1px solid var(--rule);margin-top:4px}
.modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:20;padding:12px}
.modal.hidden{display:none}
.modal.cover{background:#1d1b16}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.form label{display:flex;flex-direction:column;font-size:12px;gap:2px}
.form select{font:inherit;padding:5px;min-height:32px;border:1px solid var(--btnb);background:#fffdf4}
.o-ride{color:#7a4fa0}
.sheetbox{background:var(--paper);max-width:860px;width:100%;max-height:calc(100vh - 24px);overflow:auto;border:3px solid var(--ink);box-shadow:6px 6px 0 #0006;padding:0 0 12px}
.sheetbox h1{margin:0;background:var(--spi);color:#fff;font:900 22px var(--sans);letter-spacing:.14em;padding:10px 16px;display:flex;align-items:baseline;gap:10px}
.sheetbox h1 .ver{font-size:12px}
.sheetbox .body{padding:10px 16px}
.sheetbox h3{font:800 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;margin:12px 0 4px;border-bottom:2px solid var(--ink)}
.scens{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.scen{border:1px solid var(--btnb);background:#fffdf4;padding:6px 8px;cursor:pointer;text-align:left;min-height:0;display:block;width:100%}
.scen.on{outline:3px solid var(--sel);background:#eef3fa}
.scen .t{font-weight:800}.scen .d{font-size:11.5px;color:var(--muted)}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.side{text-align:left;padding:8px}
.side .lab{font-size:11.5px;color:var(--muted)}
.opts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.brief{font-style:italic;margin:6px 0}
.cta{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.cta .go{min-width:160px}
.rules p,.rules li{max-width:70ch}
.aar svg{width:100%;height:auto;background:#fffdf4;border:1px solid var(--rule)}
.result{font:900 24px var(--sans);letter-spacing:.06em;color:var(--spi)}
.tbl{border-collapse:collapse;font-size:12px}.tbl td,.tbl th{border:1px solid var(--rule);padding:2px 6px;text-align:left}
.high-contrast{--muted:#1d1b16;--rule:#1d1b16;--rule2:#555;--btnb:#000}
.high-contrast button{border-width:2px;font-weight:700}
.high-contrast .card,.high-contrast .slip,.high-contrast td{color:#000}
.high-contrast button:focus-visible{outline:3px solid #000;outline-offset:2px}
@media (prefers-contrast: more){button{border-width:2px}}
@media (prefers-reduced-motion: reduce){.banner{transition:none}}
@media (max-width:1100px){#layout{grid-template-columns:240px 1fr 290px}}
@media (max-width:860px){
  html,body{height:auto}
  #layout{position:static;display:flex;flex-direction:column}
  #board{height:58vh;min-height:300px;order:1}
  .mini{width:130px;height:95px}
  #ctl{order:2;border:0;border-top:2px solid #000}
  #info{order:3;border:0;border-top:2px solid #000}
  .sheetwrap{max-height:240px}
  .sub,.hdr-scen{display:none}
  .brand{font-size:17px;letter-spacing:.1em}
  .hbtn{padding:4px 8px}
  .hbtn .lbl{display:none}
  .hbtn .ico{display:inline}
  #top{position:sticky;top:0;z-index:5}
}
.light{font:600 11px var(--sans);color:var(--ink)}
.scen.camp{border-style:double;border-width:3px}
.tbl.camp tr.next td{background:rgba(31,78,140,.10);font-weight:600}
.rank,.camp-result{font-size:13px}
.scen.on{color:var(--ink)}