body{font:14px system-ui,sans-serif;margin:0;background:#10121a;color:#dde}
header{padding:8px 12px;background:#1a1e2c;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
h1{font-size:18px;margin:0}h2{font-size:14px;margin:8px 0 4px}
main{display:flex;gap:12px;padding:12px;flex-wrap:wrap}
#cardlist{display:flex;flex-direction:column;gap:6px;width:190px}
.card{border:1px solid #446;border-radius:6px;padding:6px;background:#1a1e2c}
.card.taken{opacity:.6}.card b{display:block}.card button{margin-top:4px}
#map{display:grid;gap:1px;background:#334;width:max-content}
.cell{width:44px;height:44px;background:#171b28;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cell:hover{background:#242a40}.cell.target{outline:2px solid #fc6}
.tok{border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-weight:bold;color:#000;font-size:12px;border:2px solid #fff}
.tok.sel{outline:3px solid #fc6}.tok.marker{background:#aaa;border-radius:6px}
.tok.tascha{background:#f77}.tok.finessah{background:#7cf}.tok.tifani{background:#9e7}
#unplaced{margin:4px 0;min-height:40px;display:flex;gap:6px;flex-wrap:wrap}
#log{max-height:220px;overflow:auto;font:12px monospace;padding-left:34px}#log li.future{opacity:.35}
#io{width:100%;margin-top:4px}#status{color:#fc6}#status.err{color:#f66}
#side{width:340px}#hint{color:#9ab;min-height:18px}#lastroll{font-size:18px;margin-top:4px}