html,body{margin:0}
img{max-width:100%}
/* Layout: one visual world, a dark tabletop. The printed board sits on it at full width, with pawns, deck piles and a hand of physical cards beneath. Single theme by choice. */
:root{
  color-scheme:dark;
  --bg:#1d2040; --bg2:#2a2e5c; --fg:#eceeff; --muted:#a9aedb; --line:#474c85; --tray:rgba(255,255,255,.06);
  --board:#a6b4ff; --board-edge:#6f7fe6; --board-ink:#23264d; --board-soft:#f4f5ff;
  --l3:#ffe566; --l2:#ffb347; --l1:#f4733a; --l0:#3d3f5c; --cell-ink:#a8481a; --cell-edge:#23264d;
  --paper:#fbf8ef; --ink:#23264d; --ink-soft:#6a6d8c; --paper-line:#d9d4c2;
  --eng:#f07a3c; --abl:#2f9e77; --evt:#3d3f5c; --on-solid:#ffffff;
  --lead:#9b2fb5; --supp:#0d6bc4; --ops:#f5b800;
  --good:#5fd39a; --bad:#ff8a8a; --coin:#f5b800;
  --display:"Jersey 20","Courier New",monospace; --body:"Figtree",system-ui,sans-serif;
  --move:1.5s;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{font-synthesis:none;background:radial-gradient(ellipse at 50% 0,var(--bg2),var(--bg) 70%) fixed var(--bg);color:var(--fg);font:15px/1.45 var(--body);padding-inline:16px;padding-block:clamp(10px,calc((100vh - 860px)*.45),96px) 40px}
.wrap{max-width:clamp(900px,140vh,1360px);margin:0 auto;display:flex;flex-direction:column;gap:12px}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.5px;margin:0;text-wrap:balance}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,summary:focus-visible{outline:3px solid var(--board-soft);outline-offset:3px}
.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.top h1{font-size:36px;letter-spacing:1px;font-weight:400;line-height:1}
.meters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.meter{background:var(--tray);border:2px solid var(--line);border-radius:6px;padding:4px 10px;font-weight:700;font-variant-numeric:tabular-nums}
.meter small{font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px;margin-right:6px}
.coins{display:inline-flex;gap:3px;vertical-align:-2px;margin-right:4px}
.coin{width:14px;height:14px;border-radius:50%;background:var(--coin);border:2px solid var(--cell-edge);box-shadow:inset -2px -2px 0 rgba(0,0,0,.2)}
.coin.used{opacity:.3}
.budget .coin.slot{background:transparent;border:2px dashed var(--line);box-shadow:none}
.budget{display:flex;align-items:center;gap:8px;background:var(--tray);border:2px solid var(--line);border-radius:8px;padding:6px 12px;margin-right:auto;font-variant-numeric:tabular-nums}
.budget small{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}
.budget b{font-size:20px;font-family:var(--display)}
.budget .coins{flex-wrap:wrap;gap:4px;margin:0}
.budget .coin{width:22px;height:22px;border-width:3px}
.endcard{width:min(620px,100%);max-height:100%;overflow:auto;background:var(--paper);color:var(--ink);border-radius:16px;padding:8px;box-shadow:0 14px 0 rgba(0,0,0,.5),0 0 0 6px var(--rc);animation:flip .7s cubic-bezier(.2,.8,.3,1.2) backwards}
.endcard.win{--rc:#2fc45a}.endcard.fail{--rc:#e0564f}
.endcard .in{border:4px solid var(--rc);border-radius:11px;padding:22px 20px;display:flex;flex-direction:column;gap:14px;text-align:center}
.endcard h2{font-size:44px;color:var(--rc);line-height:1}
.endcard p{margin:0;font-size:16px}
.endcard .big{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-family:var(--display)}
.endcard .big b{display:block;font-size:30px}
.endcard .tw{overflow-x:auto}
.endcard table{color:var(--ink);font:inherit;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;text-align:center}
.endcard th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:4px 6px}
.endcard td{padding:8px 6px;border-top:2px dashed var(--paper-line);font-weight:700}
.endcard td:first-child,.endcard th:first-child{text-align:left;white-space:nowrap}
.endcard td svg{width:18px;vertical-align:-4px;margin-right:6px}
.endcard .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.endcard .btn{border-color:var(--ink);color:var(--ink)}
.endcard .btn.primary{background:var(--ink);color:var(--paper);box-shadow:none;font-size:15px;padding:6px 12px}
.btn{background:transparent;border:2px solid var(--fg);border-radius:6px;padding:6px 12px;font-weight:700}
.btn.primary{background:var(--fg);color:var(--bg);font-size:16px;padding:10px 18px;box-shadow:0 4px 0 rgba(0,0,0,.4)}
.btn:disabled{opacity:.4;cursor:not-allowed}

.boardscroll{overflow-x:auto;padding-bottom:12px}
.board{position:relative;background:var(--board);border:6px solid var(--board-edge);border-radius:14px;padding:12px 20px 14px;min-width:860px;color:var(--board-ink);display:flex;flex-direction:column;gap:4px;box-shadow:0 8px 0 #4b57b8,0 18px 26px rgba(0,0,0,.45)}
.boardhead{display:flex;justify-content:space-between;align-items:center;min-height:30px}
.boardhead b{font-family:var(--display);font-weight:400;font-size:30px;color:var(--board-soft);letter-spacing:1px}
#phase{font-family:var(--display);font-size:20px;background:var(--cell-edge);color:var(--board-soft);padding:3px 12px;border-radius:20px}
.rowlabel{font-family:var(--display);font-size:19px;display:flex;justify-content:space-between}
.rowlabel span:last-child{color:var(--board-soft)}
.track{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));gap:4px}
#tracks{container-type:inline-size;position:relative}
.cell[data-tip]{cursor:help}
#tip{position:fixed;z-index:40;width:min(250px,calc(100vw - 24px));background:var(--cell-edge);color:var(--on-solid);font:400 13px/1.35 var(--body);padding:8px 10px;border-radius:8px;box-shadow:0 4px 0 rgba(0,0,0,.4);pointer-events:none}
#tip b{display:block;font-family:var(--display);font-weight:400;font-size:17px;color:var(--coin)}
.half{position:absolute;top:0;bottom:-6px;left:calc((100% + 4px)*10/21 - 4px);border-left:4px dashed var(--cell-edge);pointer-events:none}
.half span{position:absolute;top:-2px;left:8px;white-space:nowrap;font-family:var(--display);font-size:17px;line-height:1;background:var(--cell-edge);color:var(--board-soft);padding:3px 8px;border-radius:4px}
.dots.hard{padding-top:30px}
.dot.gl{box-shadow:0 0 0 3px var(--cell-edge),0 0 0 6px var(--coin)}
.dot.gl::before{content:"GO-LIVE";position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);font-family:var(--display);font-size:15px;line-height:1;background:var(--cell-edge);color:var(--coin);padding:3px 7px;border-radius:4px;white-space:nowrap}
.cell{aspect-ratio:1;border:2px solid var(--cell-edge);border-radius:5px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:clamp(13px,2cqw,26px);font-weight:400;overflow:hidden;color:var(--cell-ink);box-shadow:inset -3px -3px 0 rgba(0,0,0,.14)}
.r3 .cell{background:var(--l3)} .r2 .cell{background:var(--l2)} .r1 .cell{background:var(--l1)}
.r0 .cell{background:var(--l0);color:#8f93b8}
.cell.ev{color:#fff;font-size:clamp(16px,2.6cqw,34px)}
.cell.start{background:var(--board-soft)}
.cell.dc{background:var(--board-soft)}
.cell .die{width:72%;height:auto;display:block}
.dicetag{color:var(--coin)}
.rollcard{background:var(--paper);color:var(--ink);border-radius:14px;padding:6px;box-shadow:0 10px 0 rgba(0,0,0,.5),0 0 0 5px var(--coin);animation:flip .5s cubic-bezier(.2,.8,.3,1.2) backwards}
.rollcard .in{border:3px solid var(--ink);border-radius:9px;padding:16px 22px;display:flex;align-items:center;gap:18px}
.rollcard .die{width:72px;flex:none;animation:tumble .5s linear 2}
.rollcard h2{font-size:30px}.rollcard p,.rollcard small{margin:0;color:var(--ink-soft);font-size:14px}
#rollN.done{color:var(--abl);font-size:1.3em}
.rollok{position:relative;width:56px;height:56px;flex:none;border:0;background:none;padding:0;color:var(--ink);font-weight:700;font-size:15px}
.rollok svg{position:absolute;inset:0;transform:rotate(-90deg)}
.rollok circle{fill:none;stroke:var(--paper-line);stroke-width:4}
.rollok .ring{stroke:var(--ink);stroke-dasharray:119.4;stroke-dashoffset:0;animation:ring 5s linear forwards}
.rollok span{position:relative}
.rollok:hover span{text-decoration:underline}
@keyframes ring{to{stroke-dashoffset:119.4}}
@keyframes tumble{to{transform:rotate(360deg)}}
.modes{--rc:var(--ink)}
.modegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.modegrid{grid-template-columns:1fr}}
.modebtn{background:transparent;border:3px solid var(--ink);border-radius:10px;padding:14px;text-align:left;color:var(--ink);display:flex;flex-direction:column;gap:8px;font-size:14px}
.modebtn b{font-family:var(--display);font-weight:400;font-size:28px}
.modebtn:hover{background:var(--ink);color:var(--paper)}
.cell.fin{background:#1f8a57;color:#fff}
#toks{position:absolute;inset:0;pointer-events:none}
.tok{position:absolute;transform:translate(-50%,-50%) scale(1);transition:left var(--move) ease-in-out,top var(--move) ease-in-out,transform .4s ease;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45));z-index:1}
.tok.moving{transform:translate(-50%,-60%) scale(1.9);z-index:5;filter:drop-shadow(0 12px 6px rgba(0,0,0,.4))}
.tok svg{display:block;width:100%;height:auto}
.tok{pointer-events:auto;cursor:help}
.tok:hover{z-index:8}
.tok.r:hover::after{left:auto;right:0}
.tok:hover::after{content:attr(data-name);position:absolute;bottom:108%;left:0;background:var(--cell-edge);color:var(--on-solid);font:600 13px var(--body);padding:4px 9px;border-radius:6px;white-space:nowrap}
.stage{display:flex;flex-wrap:nowrap;gap:10px 22px;align-items:center;justify-content:space-between;margin-top:8px}
.stage>div:first-child{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.pile.flat{width:auto;aspect-ratio:auto;padding:8px 16px;margin:0 8px 8px 0}
.pile.flat b{display:inline;font-size:22px;margin-left:6px}
.dots{display:flex;gap:8px;padding:6px}
.dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--cell-edge);background:#f77fa0;position:relative;transition:opacity .4s}
.dot.y{background:#ffe566}.dot.g1{background:#9dffb0}.dot.g2{background:#2fc45a}
.dot.done{opacity:.3}
.dot.now::after{content:"";position:absolute;inset:-7px;border:3px solid var(--board-soft);border-radius:50%}
.golive{font-family:var(--display);font-size:18px}
.pile{position:relative;border:2px solid var(--cell-edge);border-radius:8px;width:96px;aspect-ratio:5/7;display:grid;place-items:center;text-align:center;font-family:var(--display);font-size:17px;line-height:1.05;color:var(--on-solid);background:var(--kc);box-shadow:3px 3px 0 var(--paper),4px 4px 0 var(--cell-edge),7px 7px 0 var(--paper),8px 8px 0 var(--cell-edge);padding:6px}
.pile.E{--kc:var(--eng)}.pile.A{--kc:var(--abl)}.pile.V{--kc:var(--evt)}
.pile b{display:block;font-size:26px}
.pile.E,.pile.A{z-index:0}
.pile.E::before,.pile.A::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:62px;height:72px;margin:-36px 0 0 -31px;background:var(--on-solid);opacity:.2;clip-path:polygon(50% 0,100% 45%,70% 45%,70% 100%,30% 100%,30% 45%,0 45%)}
.pile.A::before{transform:rotate(90deg)}
.pile.can{animation:nudge 1.4s ease-in-out infinite}
.pile:disabled{opacity:.55;cursor:not-allowed}
@keyframes nudge{50%{transform:translateY(-5px)}}

.who{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sh{background:var(--tray);border:2px solid var(--line);border-radius:8px;padding:5px 10px;min-width:0;display:flex;flex-wrap:nowrap;align-items:center;gap:2px 10px;white-space:nowrap}
.sh h3{font-size:20px;display:flex;align-items:center;gap:8px}
.sh h3 svg{width:22px;flex:none}
.sh .pos{font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}
.sh .proj{font-size:13px;color:var(--muted);margin-left:auto;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
.warn{color:var(--bad);font-weight:700}.ok{color:var(--good);font-weight:700}
@media (max-width:900px){.who{grid-template-columns:1fr}}

.table{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.decks{display:flex;gap:22px;padding:4px 10px 10px 0}
.handwrap{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:6px}
.handhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.handhead h2{font-size:26px}
.hand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-top:14px}
@media (max-width:640px){.hand{grid-template-columns:repeat(2,minmax(0,1fr))}}
.slot{display:flex;flex-direction:column;gap:6px;min-width:0}
.card{border:0;border-radius:10px;background:var(--paper);color:var(--ink);padding:5px;text-align:left;display:flex;flex-direction:column;width:100%;box-shadow:0 5px 0 rgba(0,0,0,.45);transition:transform .18s ease,box-shadow .18s ease}
.card.E{--kc:var(--eng)} .card.A{--kc:var(--abl)}
.card .in{border:3px solid var(--kc);border-radius:7px;display:flex;flex-direction:column;flex:1;overflow:hidden}
.card .hd{background:var(--kc);color:var(--on-solid);font-family:var(--display);padding:5px 8px;display:flex;justify-content:space-between;align-items:center;font-size:19px}
.card .cost{background:var(--on-solid);color:var(--ink);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-weight:700;font-family:var(--body)}
.card .nm{padding:8px;font-weight:700;font-size:16px;min-height:62px;overflow-wrap:anywhere;text-align:center;display:grid;place-items:center}
.card .nm{position:relative;z-index:0}
.card .nm::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:56px;height:64px;margin:-32px 0 0 -28px;background:var(--kc);opacity:.16;clip-path:polygon(50% 0,100% 45%,70% 45%,70% 100%,30% 100%,30% 45%,0 45%)}
.card.A .nm::before{transform:rotate(90deg)}
.card .vals{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px dashed var(--paper-line);padding:7px 2px 8px;text-align:center;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.card .vals svg{width:18px;display:inline-block;vertical-align:-3px;margin-right:4px}
.card .zero{color:var(--ink-soft);font-weight:400}
.card:not(:disabled):hover{transform:translateY(-4px) rotate(-1deg)}
.card.sel,.card.sel:hover{transform:translateY(-16px);box-shadow:0 16px 0 rgba(0,0,0,.3),0 0 0 4px var(--coin)}
.card:disabled{filter:saturate(.4) brightness(.75);cursor:not-allowed}
.card.deal{animation:deal .55s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes deal{0%{transform:translate(-260px,-40px) rotate(-18deg) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.card.fly{animation:fly .6s ease-in forwards;filter:none}
@keyframes fly{0%{transform:translateY(-16px)}40%{transform:translateY(-40px) scale(1.08)}100%{transform:translateY(-320px) scale(.5) rotate(8deg);opacity:0}}
.mini{background:none;border:0;color:var(--muted);font-size:12px;text-decoration:underline;padding:2px;align-self:center}
.empty{border:3px dashed var(--line);border-radius:10px;display:grid;place-items:center;min-height:150px;color:var(--muted);text-align:center;font-size:13px;padding:10px}
.note{font-size:13px;color:var(--muted);margin:0}
.report{background:var(--tray);border:2px solid var(--line);border-radius:10px;padding:12px 16px}
.report h2{font-size:22px;margin-bottom:6px}
.report ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.banner{border-radius:10px;padding:16px;border:3px solid var(--good);background:var(--tray);display:flex;flex-direction:column;gap:8px}
.banner.lost{border-color:var(--bad)}
.banner h2{font-size:26px}
details{background:var(--tray);border:2px solid var(--line);border-radius:10px;padding:10px 14px}
summary{font-family:var(--display);font-size:20px;cursor:pointer}
details ol{max-width:65ch;padding-left:20px}

#modal{position:fixed;inset:0;background:rgba(12,13,32,.82);display:grid;place-items:center;padding:20px;z-index:50;animation:fade .3s}
@keyframes fade{from{opacity:0}}
.evbig{width:min(420px,100%);border:0;border-radius:16px;background:var(--paper);color:var(--ink);padding:8px;text-align:center;box-shadow:0 14px 0 rgba(0,0,0,.5),0 0 0 6px var(--coin);animation:flip .7s cubic-bezier(.2,.8,.3,1.2) backwards}
@keyframes flip{0%{transform:translateY(60vh) rotateY(180deg) scale(.3)}60%{transform:translateY(0) rotateY(90deg) scale(1.05)}100%{transform:none}}
.evbig .in{border:4px solid var(--evt);border-radius:11px;overflow:hidden;display:flex;flex-direction:column}
.evbig .hd{background:var(--evt);color:var(--on-solid);font-family:var(--display);font-size:20px;padding:8px 14px;display:flex;justify-content:space-between}
.evbig h2{font-size:30px;padding:26px 16px 8px}
.evbig p{margin:0;padding:0 22px 20px;color:var(--ink-soft);font-size:15px}
.evbig .fx{padding:0 16px 14px;font-weight:700;font-size:18px}
.evbig .vals{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px dashed var(--paper-line);padding:12px 6px 14px;text-align:center;font-variant-numeric:tabular-nums}
.evbig .vals svg{width:26px;display:block;margin:0 auto 4px}
.evbig .vals b{display:block;font-size:26px;line-height:1.1}
.evbig .vals small{display:block;font-size:12px;color:var(--ink-soft)}
.evbig .vals .up{color:#1f8a57}.evbig .vals .dn{color:#c23a3a}.evbig .vals .zero{color:var(--ink-soft);font-weight:400}
.evbig .go{background:var(--evt);color:var(--on-solid);padding:10px;font-family:var(--display);font-size:15px;animation:nudge 1.4s ease-in-out infinite}
#tourBlock{position:fixed;inset:0;z-index:60}
#tourSpot{position:fixed;z-index:61;border-radius:12px;box-shadow:0 0 0 4px var(--coin),0 0 0 9999px rgba(12,13,32,.8);pointer-events:none;transition:all .35s ease}
#tourTip{position:fixed;z-index:62;width:min(380px,calc(100vw - 32px));background:var(--paper);color:var(--ink);border-radius:12px;padding:6px;box-shadow:0 8px 0 rgba(0,0,0,.5);transition:top .35s ease,left .35s ease}
#tourTip .in{border:3px solid var(--ink);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
#tourTip .hd{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:16px;color:var(--ink-soft)}
#tourTip .mini{color:var(--ink-soft)}
#tourTip h2{font-size:28px}
#tourB{font-size:15px}
#tourB p{margin:0 0 8px}
#tourTip .acts{display:flex;justify-content:space-between;gap:8px}
#tourTip .btn{border-color:var(--ink);color:var(--ink);padding:5px 14px}
#tourTip .btn.primary{background:var(--ink);color:var(--paper);box-shadow:none;font-size:15px}
.demo{border:2px dashed var(--paper-line);border-radius:8px;padding:8px;text-align:center;display:flex;flex-direction:column;gap:6px}
.demo .lv{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}
.demo .lv button{width:34px;height:34px;border-radius:6px;border:2px solid var(--ink);background:transparent;color:var(--ink);font-weight:700}
.demo .lv button[aria-pressed="true"]{background:var(--abl);color:var(--on-solid)}
.demo output{font-family:var(--display);font-size:18px}
@media (prefers-reduced-motion:reduce){.rollcard,.rollcard .die{animation:none}#tourSpot,#tourTip{transition:none}:root{--move:.01s}.card,.card.deal,.card.fly,.evbig,.evbig .go,.pile.can,#modal{animation:none;transition:none}.tok{transition:none}}