:root{
  --bg:#12150f; --panel:#1c2118; --panel2:#232a1e; --line:#4a5740;
  --ink:#ece7d6; --dim:#a8a894; --gold:#e2be60;
  --t1:#ffffff; --t2:#e8e2cd; --t3:#a36eff; --t4:#009dff; --t5:#ffe14f;
  --w:#f6efc9; --u:#4aa8ff; --b:#cdb4f5; --r:#ff6b5e; --g:#78e08a;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* ---- nav ---- */
header{position:sticky;top:0;z-index:50;background:#0d100b;
  border-bottom:2px solid var(--line);display:flex;align-items:center;gap:28px;
  padding:0 22px;height:58px}
header .brand{font-size:22px;letter-spacing:.16em;color:var(--gold);font-weight:700}
header nav{display:flex;gap:4px;height:100%}
header nav a{display:flex;align-items:center;padding:0 20px;color:var(--dim);
  text-decoration:none;letter-spacing:.12em;font-size:14px;font-weight:600;
  border-bottom:3px solid transparent}
header nav a:hover{color:var(--ink);background:#161a12}
header nav a.on{color:var(--gold);border-bottom-color:var(--gold)}
header .spacer{flex:1}
header .note{color:#6d7362;font-size:12px;letter-spacing:.06em}

main{padding:28px 26px 80px;max-width:1500px;margin:0 auto}
h1{font-size:30px;margin:0 0 4px;color:var(--gold);letter-spacing:.04em}
h2{font-size:21px;margin:34px 0 12px;color:var(--gold);
  border-bottom:1px solid var(--line);padding-bottom:6px;letter-spacing:.03em}
h3{font-size:16px;margin:20px 0 8px;color:var(--ink);letter-spacing:.04em}
p.lede{color:var(--dim);margin:0 0 20px;max-width:70ch}
a{color:var(--gold)}
code,.mono{font-family:var(--mono);font-size:.9em}

/* ---- generic bits ---- */
.pill{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11px;
  font-weight:700;letter-spacing:.08em;font-family:var(--mono)}
.tier1{background:#3a3a34;color:#fff}
.tier2{background:#4a4634;color:var(--t2)}
.tier3{background:#38225e;color:var(--t3)}
.tier4{background:#0d3a56;color:var(--t4)}
.tier5{background:#4a4318;color:var(--t5)}
.wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;margin:6px 0 18px}
th,td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
th{background:#20261a;color:var(--gold);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;font-family:var(--mono);font-weight:700}
tbody tr:nth-child(even){background:#181c14}
td.num,th.num{text-align:right;font-family:var(--mono)}

/* ---- cards ---- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:7px;
  padding:13px 15px;position:relative}
.card .nm{font-size:16px;color:var(--gold);margin:0 0 5px;font-weight:700}
.card .eff{font-size:14px;color:var(--ink);margin:0}
.card .meta{margin-top:9px;padding-top:8px;border-top:1px solid #333c2c;
  font-size:12px;font-family:var(--mono);color:var(--dim);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card .fail{color:#ff8f7a}
.card .rew{color:#9ee08a}
.card.wsel{border-color:#8a8259}.card.usel{border-color:#2a6a9e}
.card.bsel{border-color:#6a4f8e}.card.rsel{border-color:#9e4038}
.card.gsel{border-color:#3d7a48}
.card.ph{border-style:dashed;opacity:.72}
.deck{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:14px 16px}
.deck h3{margin-top:0}
.deck ul{margin:0;padding-left:18px;font-size:13.5px;columns:2;column-gap:24px}
.deck ul li{break-inside:avoid}
.swatch{display:inline-block;width:11px;height:11px;border-radius:50%;
  margin-right:7px;vertical-align:baseline;border:1px solid #0006}
/* scoped to .swatch on purpose: bare .cw / .cb / .cr are far too generic and
   collided with the popup's own classes, painting a pale wash behind text */
.swatch.cw{background:var(--w)}.swatch.cu{background:var(--u)}
.swatch.cb{background:var(--b)}.swatch.cr{background:var(--r)}
.swatch.cg{background:var(--g)}

/* ---- buttons ---- */
button{font-family:var(--serif);font-size:15px;color:var(--ink);
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  padding:9px 17px;cursor:pointer;letter-spacing:.03em}
button:hover{background:#2d3626;border-color:var(--gold)}
button:active{transform:translateY(1px)}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0 16px}

/* ---- map ---- */
#stage{position:relative;width:100%;height:calc(100vh - 176px);min-height:400px;
  overflow:hidden;background:#0a0d08;border:1px solid var(--line);border-radius:7px;
  cursor:grab;touch-action:none}
#stage.drag{cursor:grabbing}
#world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
#world img{display:block;image-rendering:auto}
#world svg{position:absolute;top:0;left:0;pointer-events:none}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{border:0;border-radius:0;border-right:1px solid var(--line);padding:8px 15px;
  font-size:14px}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--gold);color:#14170f;font-weight:700}
.readout{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-left:auto}

/* ---- dice ---- */
.dice{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:14px 0}
.die{width:64px;height:64px;border-radius:9px;background:var(--panel2);
  border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;
  font-size:31px;font-weight:700;color:var(--gold);font-family:var(--mono)}
.sum{font-size:15px;font-family:var(--mono);color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:11px 18px}
.sum b{color:var(--gold);font-size:24px}
.out{background:var(--panel);border:1px solid var(--line);border-radius:7px;
  padding:16px 18px;min-height:74px;margin:6px 0 20px}
.out .nm{color:var(--gold);font-size:19px;font-weight:700;margin:0 0 5px}
.out .eff{margin:0;font-size:15px}
.out .meta{margin-top:10px;padding-top:9px;border-top:1px solid #333c2c;
  font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.empty{color:#6d7362;font-style:italic}
.two{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.note{color:var(--dim);font-size:13.5px}
ul.plain{padding-left:19px}
ul.plain li{margin:4px 0}
.q{color:#ffb27a}

/* ---- map overview ---- */
#mini{position:absolute;right:12px;bottom:12px;width:290px;
  border:2px solid var(--line);border-radius:5px;overflow:hidden;
  background:#000;cursor:crosshair;box-shadow:0 6px 22px #000a;z-index:5}
#mini img{display:block;width:100%;height:auto;opacity:.82}
#mbox{position:absolute;border:2px solid var(--gold);background:#e2be6022;
  pointer-events:none;box-shadow:0 0 0 9999px #0006}

/* ---- map simulation ---- */
#world svg#sim{position:absolute;top:0;left:0;pointer-events:none}
/* hover: the marker swells and lights up so it is obvious it is clickable */
#sim .mk .ring,#sim .mk .halo{transition:stroke-width .1s, opacity .1s, r .1s}
#sim .mk.hot .ring{stroke-width:20;fill-opacity:.72}
#sim .mk.hot .halo{stroke-width:9;opacity:.55}
#sim .mk.hot text{font-weight:700}
#sim .mk.reach .ring{filter:drop-shadow(0 0 26px currentColor)}

.tip{position:absolute;z-index:22;pointer-events:none;max-width:280px;
  background:#0d100b;border:1px solid var(--gold);border-radius:7px;
  padding:8px 12px;box-shadow:0 8px 24px #000c;font-size:14px;line-height:1.35}
.tip b{display:block;color:var(--gold);font-size:15.5px}
.tip span{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  padding:1px 7px;border-radius:9px;margin:3px 0;background:#2a3122}
.tip span.t1{color:#fff}.tip span.t2{color:#ffd873}.tip span.t3{color:#a36eff}
.tip span.t4{color:#3fb6ff}.tip span.t5{color:#ffe14f}
.tip i{display:block;font-family:var(--mono);font-size:11.5px;color:var(--dim);font-style:normal}
.tip u{display:block;margin-top:4px;text-decoration:none;font-size:13px}
.tip u.yes{color:#9ee08a}
.tip u.no{color:#ff9a86}

/* the drawn card, floating over the map */
.pop{position:absolute;right:14px;top:14px;z-index:24;width:340px;
  background:#0e120b;border:2px solid var(--gold);border-radius:10px;
  padding:16px 18px 15px;box-shadow:0 14px 40px #000d}
.pop.in{animation:popin .26s cubic-bezier(.2,1.3,.4,1)}
@keyframes popin{from{opacity:0;transform:translateY(-10px) scale(.94)}
                 to{opacity:1;transform:none}}
.popx{position:absolute;right:7px;top:5px;background:none;border:0;color:var(--dim);
  font-size:22px;line-height:1;padding:2px 7px;cursor:pointer}
.popx:hover{color:var(--gold);background:none;border:0}
.pop .cn{margin:0;font-size:23px;font-weight:700}
.pop .cs{margin:2px 0 10px;font-family:var(--mono);font-size:11px;color:var(--dim);
  letter-spacing:.08em}
.pop .ce{margin:0 0 9px;font-size:15.5px}
.pop .owin{margin:0;font-size:14px;color:#9ee08a}
.pop .olose{margin:3px 0 0;font-size:14px;color:#ff9a86}
.pop .owin b,.pop .olose b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  margin-right:6px}
.pop .cm{margin:10px 0 0;padding-top:8px;border-top:1px solid #333c2c;
  font-family:var(--mono);font-size:11px;color:var(--dim)}
#simbar{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:7px;
  padding:11px 15px;margin:0 0 12px}
#simbar .stat{display:flex;flex-direction:column;gap:1px;min-width:66px}
#simbar .stat label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#7f8a72}
#simbar .stat b{font-size:17px;color:var(--gold);font-family:var(--mono)}
#simbar .stat .sub{font-family:var(--mono);font-size:11px;color:var(--dim)}
#simbar .stat b.ok{color:#9ee08a}
#simbar .stat b.warn{color:#ffb27a}
.pstrip{display:flex;gap:6px;margin-left:auto;flex-wrap:nowrap}
.pchip{display:flex;flex-direction:column;align-items:flex-start;gap:0;
  white-space:nowrap;
  background:#161a12;border:1px solid #333c2c;border-left:5px solid var(--pi);
  border-radius:6px;padding:4px 9px;cursor:pointer;min-width:0}
.pchip b{color:var(--pi);font-size:13px;letter-spacing:.03em}
.pchip i{font-style:normal;font-family:var(--mono);font-size:9.5px;color:#7f8a72}
.pchip:hover{background:#232a1e;border-color:var(--pi)}
.pchip.on{background:#232a1e;box-shadow:inset 0 0 0 1px var(--pi), 0 0 14px -4px var(--pi)}
.pchip.on i{color:var(--dim)}
#nextbtn{background:#2a3122;border-color:var(--gold);color:var(--gold);font-weight:700;
  letter-spacing:.06em}
#nextbtn:hover{background:var(--gold);color:#14170f}
.pip{display:inline-block;width:25px;height:25px;line-height:25px;text-align:center;
  border:1.5px solid var(--gold);border-radius:5px;color:var(--gold);
  font-family:var(--mono);font-size:14px;font-weight:700;margin-right:4px}

.flash{position:absolute;left:50%;top:14px;transform:translateX(-50%) translateY(-14px);
  background:#0e120b;border:1px solid var(--gold);color:var(--ink);
  padding:10px 20px;border-radius:7px;font-size:15px;z-index:20;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  box-shadow:0 8px 26px #000b;max-width:80%;text-align:center}
.flash.show{opacity:1;transform:translateX(-50%) translateY(0)}
.flash.bad{border-color:#ff6b5e;color:#ffd9d2}

#simout{display:grid;grid-template-columns:minmax(230px,1fr) minmax(280px,1.35fr) minmax(200px,.85fr) minmax(190px,.8fr);
  gap:16px;margin:12px 0 0}
#simout h3 .poolnote{margin-left:auto;font-size:10.5px;color:#6d7362;letter-spacing:.06em;
  white-space:nowrap}
.ministat{display:flex;gap:16px;margin-top:8px;font-family:var(--mono);font-size:12px;
  color:var(--dim)}
.ministat b{color:var(--gold);font-size:15px;margin-left:5px}
.rgrp{margin-bottom:11px}
.rgrp h4{margin:0 0 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase}
.rgrp h4.rR{color:#e2be60}.rgrp h4.rU{color:#c9a3ff}.rgrp h4.rC{color:#a8b09a}
.clist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.clist li{font-size:12.5px;background:#161a12;border:1px solid #333c2c;border-radius:4px;
  padding:2px 7px;border-left:3px solid var(--ci)}
.clist li i{font-style:normal;font-family:var(--mono);font-size:9.5px;color:#7f8a72;
  margin-left:5px}
.vlist.boons li.boon{color:var(--gold);text-decoration:none;font-size:14px;
  display:flex;align-items:center;gap:7px}
.boonspend{margin-left:auto;background:#161a10;border:1px solid #ffd87355;
  color:#ffd873;border-radius:5px;padding:1px 7px;font:inherit;font-size:10px;
  letter-spacing:.1em;cursor:pointer}
.boonspend:hover:not(:disabled){background:#ffd873;color:#0b0d07}
.boonspend:disabled{opacity:.38;cursor:default;border-color:#ffd87322}
#acards{max-height:250px;overflow:auto}

/* trial and pick screens inside the popup */
.pop{width:380px}
.pkhint{margin:9px 0 7px;font-size:13px;color:var(--dim)}
.pkhint b{color:var(--gold)}
.pks{display:flex;flex-direction:column;gap:5px;max-height:240px;overflow:auto;margin-bottom:11px}
.pk{display:block;width:100%;text-align:left;background:#161a12;border:1px solid #333c2c;
  border-left:4px solid var(--ci);border-radius:5px;padding:6px 10px;font-size:14px;
  color:var(--ink);cursor:pointer}
.pk b{font-weight:600}
.pk i{float:right;font-style:normal;font-family:var(--mono);font-size:10px;color:#7f8a72}
.pk:hover{background:#232a1e;border-color:var(--gold)}
.pk.on{background:#2f3a24;border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.go{width:100%;background:var(--gold);color:#14170f;font-weight:700;border:0;
  letter-spacing:.1em;font-size:14px;padding:9px}
.go:disabled{opacity:.35;cursor:not-allowed}
.go:hover:not(:disabled){background:#f2d484;border:0}
.alt{background:#232a1e;font-size:14px;padding:9px 14px}
.trow{display:flex;gap:8px;margin-top:10px}
.dicerow{display:flex;gap:9px;margin:12px 0 8px}
.dicerow .die{width:52px;height:52px;font-size:25px;border-radius:8px;cursor:default;
  background:var(--panel2)}
.dicerow .die.off{opacity:.34}
.dicerow .die.pick{cursor:pointer;border-color:#7fd97f;box-shadow:0 0 12px #7fd97f66}
.faces{display:flex;gap:6px;margin:0 0 10px}
.face{width:42px;padding:6px 0;font-family:var(--mono);font-size:16px}
.verdict{margin:4px 0 8px;font-family:var(--mono);font-size:18px;letter-spacing:.16em;
  font-weight:700}
.verdict span{font-size:12px;letter-spacing:.06em;color:var(--dim);margin-left:9px}
.verdict.yes{color:#9ee08a}.verdict.no{color:#ff8f7a}
.boonrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 2px}
.boonb{font-size:12.5px;padding:5px 11px;background:#2a2340;border-color:#6a4fa0;
  color:#c8a6ff}
.boonb:hover{border-color:#a36eff;background:#372c55}
.boonb.on{background:#a36eff;color:#1a1030;font-weight:700;border-color:#a36eff}
.boonrow .used{font-family:var(--mono);font-size:10.5px;color:#7f8a72;width:100%}
.quirk{font-size:11.5px;padding:5px 10px;background:#1b3346;border-color:#2f6f9e;
  color:#8ad6ff;letter-spacing:.04em}
.quirk:hover{border-color:#3fb6ff;background:#22415a}
.quirk.on{background:#3fb6ff;color:#06202f;font-weight:700;border-color:#3fb6ff}
.res{list-style:none;margin:0 0 11px;padding:0}
.res li{font-size:14px;margin:4px 0;padding-left:13px;position:relative}
.res li:before{content:'▸';position:absolute;left:0;color:var(--gold)}
#simout h3{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
  margin:0 0 7px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--mono);color:var(--gold)}
.cardbox{background:var(--panel);border:1px solid var(--line);border-radius:7px;
  padding:14px 16px;min-height:120px}
.cardbox .cn{margin:0;font-size:21px;font-weight:700}
.cardbox .cs{margin:1px 0 9px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.cardbox .ce{margin:0 0 8px;font-size:15px}
.cardbox .owin{margin:0;font-size:14px;color:#9ee08a}
.cardbox .olose{margin:2px 0 0;font-size:14px;color:#ff9a86}
.cardbox .owin b,.cardbox .olose b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  margin-right:6px}
.cardbox .cm{margin:9px 0 0;padding-top:7px;border-top:1px solid #333c2c;
  font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.vlist{list-style:none;margin:0;padding:0;max-height:250px;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:10px 14px}
.vlist li{font-size:14.5px;color:#ff5a5a;text-decoration:line-through;
  text-decoration-color:#ff5a5a;margin:3px 0}
.vlist li.empty{color:#6d7362;text-decoration:none;font-style:italic}
.vlist .vc{font-family:var(--mono);font-size:11px;color:#8a4a4a;
  text-decoration:none;display:inline-block;margin-left:5px}

/* Tier 4 — handing each won Rare to a player */
.assign{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px}
.arow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#0f120b;border:1px solid #ffffff1c;border-radius:8px;padding:8px 10px}
.arow b{color:var(--ci);font-size:14px}
.arow span{display:flex;gap:6px}
.pbtn{background:#161a10;border:1px solid var(--pi);color:var(--pi);
  border-radius:6px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer;
  letter-spacing:.06em}
.pbtn.on{background:var(--pi);color:#0b0d07;font-weight:700}

/* --- the live 40, and the swap that keeps it at 40 --- */
.deck40 li{display:flex;align-items:baseline;gap:8px}
.deck40 li.drafted{border-left:3px solid #ffd873;padding-left:7px}
.deck40 li.drafted i{color:#ffd873;font-style:normal;font-size:10px;letter-spacing:.12em}
.deck40 li.basic{opacity:.55}
.deck40 li i{font-style:normal;font-size:10px;letter-spacing:.1em;color:#8f9a80}
.swapb{margin-left:auto;background:#161a10;border:1px solid #ffd87355;color:#ffd873;
  border-radius:5px;padding:1px 7px;font:inherit;font-size:10px;letter-spacing:.1em;
  cursor:pointer}
.swapb:hover{background:#ffd873;color:#0b0d07}
.swaplist{max-height:340px;overflow:auto}
.swaplist .pk.drafted{border-color:#ffd873}
.go.ghost{background:transparent;border:1px solid #ffffff33;color:#cfc7b4}
.pbtn.big{padding:9px 16px;font-size:13px;letter-spacing:.08em;border-radius:7px}
.delta{margin-left:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:#7f8a72;font-weight:400}
.delta.up{color:#9ee08a} .delta.down{color:#ff9a86}
.assign .pbtn.big{flex:1}
#swatch.free{color:#4aa8ff}
.grace{color:#4aa8ff;margin-right:5px;text-shadow:0 0 8px #4aa8ff99}