*{box-sizing:border-box}html{color-scheme:dark;--accent:#72e0bd}body{margin:0;background:radial-gradient(ellipse at top,#243547,#101721 65%);color:#f5f5f2;font:16px/1.45 system-ui,sans-serif;min-height:100dvh}main{width:min(100%,460px);padding:18px 14px 28px;margin:auto}h1{font-size:clamp(26px,7vw,35px);line-height:1.08;margin:9px 0 16px;letter-spacing:-.04em}p{margin:8px 0}header p{font-size:14px;color:#c9d3de}.eyebrow{color:var(--accent);font:700 11px/1.4 monospace;letter-spacing:.12em}.dashboard{background:#1c2939;border:1px solid #38475b;border-radius:16px;padding:12px;margin:18px 0 12px}.dashboard strong{color:var(--accent)}#info{font-size:13px;color:#d4dbe5;overflow-wrap:anywhere}.board{display:grid;gap:6px;padding:10px;background:#0a111b;border:1px solid #3c4a5e;border-radius:18px;min-height:80px}.tile,.board button{min-width:0;min-height:48px;padding:5px 2px;border-radius:11px;white-space:pre-line;text-align:center;display:grid;align-content:center;background:linear-gradient(145deg,#34485d,#233246);color:#fff;border:1px solid #5d7087;overflow-wrap:anywhere;font-size:14px}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}button{font:600 14px/1.25 system-ui;min-height:48px;min-width:44px;padding:10px;border-radius:12px;border:1px solid #657287;color:#fff;background:#2b3d50;touch-action:manipulation;cursor:pointer;overflow-wrap:anywhere}button:hover{background:#3c526a}button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button.selected{border:3px solid var(--accent);background:#365b5b}.blocked{opacity:.55}#reset{width:100%;background:var(--accent);color:#102029;border:0}#status{min-height:48px;padding:10px;font-size:14px}#status[data-state=won]{color:#94f4ba}#status[data-state=lost]{color:#ffb1a8}footer{font-size:11px;text-align:center;color:#9daaba;margin-top:18px}@media(prefers-reduced-motion:no-preference){button{transition:background .12s,transform .12s}button:active{transform:scale(.96)}}.board .tile{border-radius:50%;min-height:48px;background:radial-gradient(circle at 30% 25%,#638c91,#254650);font-size:13px}.dashboard{border-left:4px solid var(--accent)}

.board .orb0{background:#10202b;color:#73848a;border-style:dashed}.board .orb1{background:radial-gradient(circle at 30% 25%,#ffe8ac,#a57524);color:#292415}.board .orb2{background:radial-gradient(circle at 30% 25%,#c6f7e8,#367f75);color:#12332e}.board .orb3{background:radial-gradient(circle at 30% 25%,#ffdfeb,#a55181);color:#35162e}
