:root{color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#0c1320;color:#f8fafc}*{box-sizing:border-box}body{margin:0}.wrap{max-width:1060px;margin:auto;padding:24px 16px 40px}.eyebrow{color:#8fd4ff;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}h1{font-size:clamp(2rem,5vw,3rem);margin:.15em 0}.wrap header>p:last-child{color:#cbd5e1}.game{display:grid;grid-template-columns:minmax(280px,600px) minmax(230px,1fr);gap:24px;align-items:start}.board{display:grid;grid-template-columns:repeat(8,1fr);width:100%;aspect-ratio:1;border:5px solid #a7b3c8;border-radius:8px;overflow:hidden}.square{border:0;padding:0;position:relative;display:grid;place-items:center;cursor:pointer;min-width:0;min-height:0}.square.dark{background:#506078}.square.light{background:#d6dfed;cursor:default}.square.selected{outline:4px solid #facc15;outline-offset:-4px}.square.target::before{content:'';position:absolute;width:28%;aspect-ratio:1;border-radius:50%;background:#c8fba3;opacity:.9}.square:focus-visible{outline:4px solid #facc15;outline-offset:-4px;z-index:2}.piece{width:76%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(12px,3vw,30px);font-weight:bold;box-shadow:inset 0 0 0 3px #ffffff55,0 3px 6px #0007;z-index:1}.piece.black{background:#111827;border:3px solid #9ca3af;color:#fff}.piece.red{background:#b91c1c;border:3px solid #fecaca;color:#fff}.panel{background:#182235;border:1px solid #35445a;border-radius:14px;padding:18px}.panel h2{margin-top:0}.panel p{line-height:1.5}.fine{color:#cbd5e1;font-size:.9rem}.restart{background:#facc15;color:#111827;font-weight:700;padding:12px 18px;border:0;border-radius:8px;cursor:pointer;min-height:44px}.restart:focus-visible{outline:3px solid #fff;outline-offset:3px}@media(max-width:730px){.game{grid-template-columns:1fr}.wrap{max-width:630px}}