:root{color-scheme:light;--paper:#f4efe4;--ink:#25221d;--muted:#766f64;--line:#d9d0c0;--human:#f36f4f;--human-soft:#f8b29f;--bot:#486de8;--bot-soft:#aebdf3}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:var(--paper);color:var(--ink);font:16px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;background-image:radial-gradient(circle at 50% -10%,#fff 0,transparent 45%)}button{font:inherit}main{position:relative;width:min(100%,640px);min-height:100svh;margin:auto;padding:24px 18px calc(24px + env(safe-area-inset-bottom))}header{display:flex;align-items:end;justify-content:space-between;gap:16px}.eyebrow{margin:0 0 4px;color:var(--human);font:800 11px/1.2 ui-monospace,monospace;letter-spacing:1.7px}h1{margin:0;font-size:clamp(36px,10vw,58px);line-height:.95;letter-spacing:-2.5px}.reset{border:1px solid var(--line);border-radius:999px;background:#fff8;padding:9px 15px;color:var(--muted);cursor:pointer}.score{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.score-card{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border:2px solid transparent;border-radius:16px;background:#fff9;transition:.2s}.score-card span{font-weight:750}.score-card b{font-size:27px;line-height:1}.score-card.human b{color:var(--human)}.score-card.bot b{color:var(--bot)}.score-card.active.human{border-color:var(--human);box-shadow:0 5px 20px #f36f4f18}.score-card.active.bot{border-color:var(--bot);box-shadow:0 5px 20px #486de818}.status{text-align:center;min-height:24px;margin:15px 0 7px;font-weight:750}.board-wrap{width:100%;border:1px solid var(--line);border-radius:24px;background:#fffaf1;box-shadow:0 16px 45px #50452414;overflow:hidden}canvas{display:block;width:100%;height:auto;touch-action:none}.hint{margin:12px auto 0;max-width:420px;color:var(--muted);text-align:center;font-size:13px}.result{position:fixed;z-index:4;inset:0;display:grid;place-items:center;padding:24px;background:#29251fc7;backdrop-filter:blur(5px)}.result>div{width:min(100%,380px);padding:28px;border-radius:24px;background:var(--paper);text-align:center;box-shadow:0 20px 70px #0004}.result h2{margin:5px 0 3px;font-size:32px}.result #final-score{margin:8px 0 20px;font-size:42px;font-weight:850}.result button{width:100%;border:0;border-radius:14px;background:var(--human);color:#fff;padding:14px;font-weight:800;cursor:pointer}.hidden{display:none!important}@media(max-width:420px){main{padding:17px 12px calc(18px + env(safe-area-inset-bottom))}.score{margin-top:16px}.score-card{padding:10px 13px}.board-wrap{border-radius:18px}.status{margin-top:11px}}
