:root{color-scheme:light;--ink:#173c46;--human:#176a67;--coral:#b04a34;--cream:#f5f0e4;--line:#d4d9d3;--muted:#53686a;--paper:#fffdf7}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-underline-offset:4px}button,select{font:inherit}button,select,a{touch-action:manipulation}button{cursor:pointer;min-height:44px;border:1px solid #abb8b4;background:var(--paper);color:var(--ink);border-radius:6px;padding:9px 14px}button:disabled{cursor:default;opacity:.5}.primary{background:var(--ink);color:#fffdf7;border-color:var(--ink);font-weight:650}
button:hover:not(:disabled){filter:brightness(.96)}:focus-visible{outline:3px solid #cf7e25;outline-offset:3px}select{min-height:46px;width:100%;border:1px solid #a9b9b4;background:var(--paper);border-radius:5px;padding:8px;color:var(--ink)}[hidden]{display:none!important}
.skip-link{position:absolute;z-index:5;left:12px;top:-70px;background:var(--ink);color:white;padding:12px}.skip-link:focus{top:10px}
.site-header,footer{max-width:1152px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 28px}.brand{font-size:23px;font-family:Georgia,serif;text-decoration:none;font-weight:700}.brand-mark{font:32px/1 Georgia,serif;vertical-align:middle;margin-right:5px}.site-header>a:last-child{font-size:14px;white-space:nowrap}
main{max-width:1152px;margin:auto;padding:10px 28px 36px}.intro{margin:16px 0 30px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700;margin:0 0 8px;color:var(--muted)}h1{font:clamp(36px,6vw,66px)/1.03 Georgia,serif;margin:0 0 10px;letter-spacing:-.055em}.intro-copy{margin:0;font-size:16px;color:var(--muted)}
.game-layout{display:grid;grid-template-columns:minmax(0,720px) minmax(240px,300px);gap:26px;align-items:start}.paper-board{min-width:0;background:var(--paper);border:1px solid #cdd4ca;border-radius:12px;padding:25px;box-shadow:0 8px 0 #e6e2d5}
.board-heading{display:flex;justify-content:space-between;gap:10px;align-items:center}.board-heading h2{font-size:14px;text-transform:uppercase;letter-spacing:.09em;margin:0}.turn-tag{font-size:12px;border:1px solid #d5ded6;padding:5px 10px;border-radius:30px;background:#e9f3ea}.turn-tag.cpu{background:#fae6d9;color:var(--coral)}
.scores{display:flex;gap:12px;margin:18px 0 12px}.score-card{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:1;padding:10px 13px;border-radius:6px;background:#e9f2ed;color:var(--human)}.score-card.computer{background:#f8e7dc;color:var(--coral)}.score-card span{font-size:13px}.player-mark{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:50%;font-size:11px;margin-right:5px}.score-card strong{font:32px/1 Georgia,serif}
.board{display:grid;grid-template-columns:repeat(var(--grid,7),minmax(0,1fr));aspect-ratio:1;max-width:510px;margin:10px auto;background:radial-gradient(#80939320 .6px,transparent .6px);background-size:9px 9px;isolation:isolate}
.dot{align-self:center;justify-self:center;width:8px;height:8px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--paper);z-index:2;pointer-events:none}
.edge{min-height:0;min-width:0;width:100%;height:100%;padding:0;position:relative;border:0;border-radius:0;background:transparent;z-index:3;outline-offset:-2px}.edge::before{content:"";position:absolute;left:0;top:calc(50% - 3px);width:100%;height:6px;background:#d9e0dc;border-radius:4px;transition:background .1s ease}.edge.vertical::before{left:calc(50% - 3px);top:0;width:6px;height:100%}.edge:hover[aria-disabled="false"]::before{background:#86ada0}.edge:focus-visible{outline:2px solid #c57c26;background:#e9b64330}.edge.drawn.human::before{background:var(--human)}.edge.drawn.computer::before{background:var(--coral)}.edge.last::before{box-shadow:0 0 0 2px #173c4626}
.box{display:flex;align-items:center;justify-content:center;margin:2px;border-radius:4px;color:var(--muted);font-size:clamp(16px,3vw,30px);font-family:Georgia,serif;pointer-events:none}.box.human{background:#d4e9dc;color:var(--human)}.box.computer{background:#f1cdbb;color:var(--coral)}.box.empty{background:#eff1e950}
.keyboard-note{margin:14px 0 5px;color:var(--muted);font-size:12px;text-align:center}.feedback{margin:0;text-align:center;min-height:48px;font-size:14px;padding:9px 0;color:var(--ink)}.match-panel{padding:28px 20px;border:1px solid #cbd0c8;border-radius:9px;background:#e6eadf;position:relative}.match-panel::before{content:"";position:absolute;top:-8px;right:32px;width:66px;height:17px;background:#dcb46a85;transform:rotate(5deg)}
.match-panel h2{font:29px/1.1 Georgia,serif;letter-spacing:-.04em;margin:0 0 22px}.match-panel label{display:block;font-size:12px;font-weight:700;margin:16px 0 5px}.match-panel>.primary{width:100%;margin:20px 0 4px}.rule-note{display:flex;gap:12px;align-items:center;border-top:1px solid #bac9bc;padding-top:18px;margin-top:22px}.rule-note>span{font-size:38px;color:var(--human)}.rule-note p{font-size:13px;margin:0}.rules-link{display:inline-block;font-size:13px;margin-top:15px}.save-state{font-size:11px;color:var(--muted);margin:20px 0 0}.notice{font-size:13px;padding:14px;border:1px solid #bf9168;background:#fff0d8;border-radius:7px;margin-top:16px}.notice p{margin:0 0 9px}.notice button{font-size:12px}.notice details{margin-top:10px}.notice summary{cursor:pointer;min-height:30px}.notice pre{white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.5 ui-monospace,monospace;max-height:160px;overflow:auto}
.result{display:flex;flex-wrap:wrap;align-items:center;gap:15px;background:#e8eedb;border:1px solid #bacba7;border-radius:7px;padding:18px;margin-top:10px}.result-stamp{font-size:35px;color:var(--human)}.result h2{font:27px/1.1 Georgia,serif;margin:0 0 6px}.result p{font-size:13px;margin:0}.result button{margin-left:auto}
footer{font-size:12px;color:var(--muted);padding-bottom:30px}footer nav{display:flex;gap:18px}dialog{max-width:calc(100% - 32px);width:430px;border:1px solid #adb8ac;border-radius:10px;padding:24px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#173c4680}dialog h2{font:30px/1.1 Georgia,serif;margin:0 0 15px}dialog p{font-size:14px}.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:22px}
.document{max-width:760px;background:var(--paper);padding:30px;border:1px solid #cdd4ca;border-radius:10px}.document h1{font-size:43px;letter-spacing:-.03em}.document h2{font:25px/1.2 Georgia,serif;margin-top:30px}.document p,.document li{font-size:15px}.document nav{margin-bottom:25px}.document a{overflow-wrap:anywhere}
@media(max-width:820px){.game-layout{grid-template-columns:1fr;gap:25px}.match-panel{max-width:none}.match-panel label{margin-top:12px}.intro{margin-bottom:23px}}
@media(max-width:440px){main{padding:8px 12px 25px}.site-header,footer{padding:18px 12px;gap:10px}.brand{font-size:21px}.site-header>a:last-child{font-size:12px}.paper-board{padding:14px 10px}.scores{gap:8px}.score-card{padding:10px 8px;gap:6px}.score-card span{font-size:12px}.player-mark{margin-right:3px}.board-heading{padding:0 3px}.board-heading h2{font-size:12px}.turn-tag{font-size:11px;padding:4px 7px}.dot{width:6px;height:6px;box-shadow:0 0 0 2px var(--paper)}.match-panel{padding:23px 18px}.keyboard-note{font-size:11px}.document{padding:22px 17px}.document h1{font-size:34px}footer{align-items:flex-start;flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}