@font-face{font-family:Prata;src:url(Prata.woff2)}@font-face{font-family:Jost;src:url(Jost.woff2)}
main{max-width:920px;margin:auto;padding:32px 20px 80px}header{max-width:660px}h1{font-size:clamp(30px,6vw,48px)}header p,#explain,footer p{color:var(--dim)}.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase}nav,.samples,.controls{display:flex;flex-wrap:wrap;gap:8px}nav{margin:22px 0 12px}nav [aria-pressed=true],.samples [aria-pressed=true]{background:var(--paper);color:var(--ink)}#explain{max-width:650px;min-height:3em}.samples{margin-bottom:24px}.samples .pill{font-size:13px;padding:0 13px}.game{max-width:520px;margin:0 auto}.bar-top,.players{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.bar-top>span{font:26px Prata,serif}.players{font-size:15px;color:var(--dim)}.players .active{color:var(--paper)}.stage{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:oklch(.56 .060 62)}#board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));height:100%}.cell{position:relative;border:0;border-right:1px solid #30241730;border-bottom:1px solid #30241730;border-radius:0;background:#ffffff06;padding:0;cursor:pointer;color:#161410;display:grid;place-items:center}.cell.diag{background:#00000017}.cell:focus-visible{outline:3px solid var(--paper);outline-offset:-3px}.piece{display:grid;place-items:center;position:relative;width:72%;height:72%;border-radius:50%;box-shadow:0 2px 4px #0005;font:500 clamp(18px,5vw,32px)/1 Jost;z-index:2}.p1{background:radial-gradient(circle at 35% 25%,var(--white-hi),var(--white) 60%,var(--white-lo));color:var(--black)}.p2{background:radial-gradient(circle at 35% 25%,var(--black-hi),var(--black) 65%,var(--black-lo));color:var(--white)}.marked:after{content:'';position:absolute;inset:13%;border:2px solid currentColor;border-radius:50%;opacity:.9}.marked{font-size:clamp(15px,4.4vw,26px)}.cell.selected{box-shadow:inset 0 0 0 3px var(--paper)}.destination{width:46%;height:46%;border-radius:50%;display:grid;place-items:center;background:#eee7d6cc;font:500 clamp(14px,3.8vw,23px)/1 Jost;z-index:2}.capture:after{content:'';position:absolute;inset:5%;border:2px solid var(--paper);border-radius:50%;z-index:3}.square-mark{position:absolute;top:3%;left:7%;font-size:clamp(10px,2.8vw,16px);color:#171410a0;line-height:1.2;pointer-events:none}.rank{position:absolute;bottom:1px;left:3px;font-size:9px;color:#171410b0}#lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}#status{margin:16px 0 4px;min-height:1.5em}#selection{color:var(--dim);font-size:14px;min-height:3em;margin:0 0 8px}.controls{justify-content:center}details{max-width:520px;margin:24px auto;color:var(--dim)}summary{cursor:pointer}li{margin:10px 0}footer{max-width:660px;margin:48px auto 0;border-top:1px solid var(--edge);padding-top:28px}footer h2{font-size:25px}@media(min-width:700px){.piece{font-size:32px}.marked{font-size:26px}.destination{font-size:23px}}@media(max-width:390px){main{padding:24px 14px 60px}.pill{font-size:13px;padding:0 13px}}

main.compact{max-width:390px}.compact .piece{font-size:23px}.compact .marked{font-size:18px}.compact .destination{font-size:17px}.compact .square-mark{font-size:11px}

:root{--white:#eee7d6;--white-hi:#fdfaf3;--white-lo:#d3c9b2;--black:#1c1b18;--black-hi:#4a4640;--black-lo:#0c0b09}