@font-face{font-family:Caveat;font-weight:500 700;font-display:swap;src:url(/fonts/caveat.woff2)format("woff2")}@font-face{font-family:Patrick Hand;font-weight:400;font-display:swap;src:url(/fonts/patrickhand.woff2)format("woff2")}:root{--paper:#f6f0e1;--paper-edge:#e9dfc6;--desk:#6d4f36;--pencil:#3b3a38;--pencil-dark:#2b2a28;--graphite:#55534f;--ink-blue-rgb:31 63 143;--ink-red-rgb:194 53 43;--ink-blue:rgb(var(--ink-blue-rgb));--ink-red:rgb(var(--ink-red-rgb));--ink-green:#14703a;--highlighter:#f5c518;--rule:#5a82be47;--margin:#c846468c;--sticky:#fbe98a;--sticky-warning:#ffc9b8;--font-hand:"Caveat", "Patrick Hand", cursive;--font-body:"Patrick Hand", "Caveat", cursive;--space-2:8px;--space-3:12px;--space-4:16px;--line:32px;--chrome:448px;--board-max:384px}*{box-sizing:border-box}html,body{min-height:100%;margin:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{font-family:var(--font-body);color:var(--pencil);background:radial-gradient(ellipse at 30% 20%, #ffffff14, transparent 60%), repeating-linear-gradient(90deg, #00000009 0 2px, transparent 2px 7px), var(--desk);touch-action:manipulation;-webkit-tap-highlight-color:transparent;overflow-x:hidden}.desk{min-height:100dvh;padding:max(28px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));place-items:center;display:grid;position:relative}.desk:before{content:"";pointer-events:none;opacity:0;background:radial-gradient(60% 55% at 50% 42%,#ffd68c38,#0000 70%),radial-gradient(#0000 40%,#0000008c);position:fixed;inset:0}@media (prefers-color-scheme:dark){:root{--paper:#e8dcc0;--paper-edge:#d6c9a8;--desk:#3a2a1c;--rule:#4669a04d}.desk:before{opacity:1}}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.filter-defs{position:absolute}.sheet{width:min(560px,100%)}@media (width>=700px) and (height>=860px){:root{--board-max:460px}.sheet{width:min(680px,100%)}}.page{background:linear-gradient(90deg, transparent 58px, var(--margin) 58px 60px, transparent 60px), repeating-linear-gradient(180deg, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .25  0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), var(--paper);box-shadow:0 1px 0 var(--paper-edge), 0 2px 0 color-mix(in srgb, var(--paper-edge), black 5%), 0 3px 0 color-mix(in srgb, var(--paper-edge), black 10%), 0 22px 40px #00000073;border-radius:3px 6px 4px 3px;padding:32px 28px 32px 76px;animation:.6s cubic-bezier(.2,.8,.2,1) both page-in;position:relative;transform:rotate(-.6deg)}.page:after{content:"";background:linear-gradient(135deg, transparent 50%, #00000024 50%, var(--paper-edge) 56%, color-mix(in srgb, var(--paper), white 55%) 100%);clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none;border-top-left-radius:8px;width:44px;height:44px;position:absolute;bottom:0;right:0;box-shadow:-3px -3px 6px #0000001f}@keyframes page-in{0%{opacity:0;translate:90px 14px;rotate:5deg}to{opacity:1;translate:0;rotate:0deg}}.holes{flex-direction:column;justify-content:space-around;padding:24px 0;display:flex;position:absolute;top:0;bottom:0;left:14px}.holes span{background:var(--desk);border-radius:50%;width:20px;height:20px;box-shadow:inset 2px 3px 5px #0009,0 1px #ffffff59}header{gap:var(--space-4);padding-bottom:var(--space-4);flex-direction:column;display:flex}h1{font:700 clamp(31px, 10vw, 56px) / 1.05 var(--font-hand);color:var(--ink-blue);-webkit-text-decoration:underline wavy rgb(var(--ink-blue-rgb) / .35);text-decoration:underline wavy rgb(var(--ink-blue-rgb) / .35);text-underline-offset:9px;align-self:flex-start;margin:0;transform:rotate(-1deg)}h1 span{color:var(--ink-red)}footer{padding-top:var(--space-2)}.scorecard{align-items:flex-end;gap:var(--space-3);display:flex}.scorecard>*{justify-items:center;min-width:60px;display:grid}.scorecard>div{border-bottom:2.5px solid #3b3a38bf;border-radius:0 0 6px 3px/0 0 3px 8px;padding:0 4px 2px}.scorecard>div>span:first-child{color:var(--pencil-dark);font-size:19px;line-height:22px}.scorecard>.game-number{font:700 22px / 1.1 var(--font-hand);color:var(--ink-red);text-align:left;align-self:center;margin-right:auto;display:block}.score{font:400 34px / 36px var(--font-body);color:var(--pencil-dark)}.board-wrap{width:min(100%, var(--board-max), max(220px, calc(100dvh - var(--chrome))));margin:0 auto;position:relative}.board{aspect-ratio:1;grid-template:repeat(3,1fr)/repeat(3,1fr);display:grid;position:relative}.board.is-thinking{cursor:progress}.board.shake{animation:.5s .5s shake}@keyframes shake{20%,60%{transform:translate(-5px)rotate(-.6deg)}40%,80%{transform:translate(5px)rotate(.6deg)}}.grid-svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.grid-line,.win-line,.stroke{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px}@keyframes draw{to{stroke-dashoffset:0}}.grid-line{stroke:var(--graphite);stroke-width:3.4px;opacity:.9;filter:url(#graphite);animation:.55s ease-out forwards draw}.win-line{stroke:var(--highlighter);stroke-width:24px;opacity:.7;mix-blend-mode:multiply;animation:.5s ease-out .25s forwards draw}.cell{font:inherit;cursor:pointer;background:0 0;border:0;border-radius:12px;padding:0;position:relative}.cell[aria-disabled=true]{cursor:default}.cell:focus-visible{outline:3px dashed var(--ink-blue);outline-offset:-10px;border-radius:50%}.cell:not([aria-disabled=true]):after{content:"";opacity:0;pointer-events:none;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%231f3f8f' stroke-width='7' stroke-linecap='round'><path d='M24 22Q50 48 78 80'/><path d='M78 20Q52 52 22 80'/></svg>") 50%/contain no-repeat;transition:opacity .15s,transform .15s;position:absolute;inset:8%;transform:scale(.85)rotate(-4deg)}.cell:not([aria-disabled=true]):focus-visible:after{opacity:.32;transform:none}.cell:not([aria-disabled=true]):active:after{opacity:.5;transform:scale(.94)}@media (hover:hover){.cell:not([aria-disabled=true]):hover:after{opacity:.32;transform:none}}.cell.pulse:before{content:"";border:3px dashed rgb(var(--ink-blue-rgb) / .5);border-radius:50%;animation:1.6s ease-in-out infinite pulse;position:absolute;inset:14%}.cell.last:after{content:"";background:repeating-linear-gradient(90deg, var(--pencil) 0 6px, transparent 6px 9px);opacity:.45;border-radius:4px;height:4px;position:absolute;bottom:6%;left:22%;right:22%}@keyframes pulse{0%,to{opacity:.4;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}.mark{filter:url(#ink);width:100%;height:100%;display:block;overflow:visible}.mark .stroke{stroke-width:6.5px}.mark .stroke.bleed{stroke-width:11px;opacity:.16}.ink-cross .stroke{stroke:var(--ink-blue)}.ink-cross .first{animation:.28s ease-out forwards draw}.ink-cross .second{animation:.28s ease-out .28s forwards draw}.ink-nought .stroke{stroke:var(--ink-red)}.ink-nought .first{animation:.5s ease-out forwards draw}.hand{pointer-events:none}.stamp{z-index:2;background:color-mix(in srgb, var(--paper) 78%, transparent);font:700 clamp(30px, 8vw, 48px) var(--font-hand);letter-spacing:2px;white-space:nowrap;pointer-events:none;border:6px double;border-radius:10px;padding:0 14px;animation:.4s cubic-bezier(.2,1.4,.4,1) .7s both stamp;position:absolute;top:46%;left:50%;translate:-50% -50%;rotate:-12deg;-webkit-mask:radial-gradient(circle at 20% 30%,#0000 1px,#000 1.5px) 0 0/11px 11px;mask:radial-gradient(circle at 20% 30%,#0000 1px,#000 1.5px) 0 0/11px 11px}.stamp.stamp-win{color:var(--ink-green)}.stamp.stamp-loss{color:var(--ink-red)}.stamp.stamp-draw{color:var(--ink-blue)}@keyframes stamp{0%{opacity:0;scale:2.4}to{opacity:.95;scale:1}}.confetti{z-index:3;pointer-events:none;position:absolute;inset:-20px;overflow:visible}.confetti i{opacity:0;border-radius:2px;animation:linear forwards fall;position:absolute;top:-10px;box-shadow:0 0 0 1px #00000014}@keyframes fall{0%{opacity:1;transform:translateY(-10px)rotate(0)}to{opacity:0;transform:translate(var(--drift), 460px) rotate(calc(var(--rotation) + 540deg))}}.status-line{justify-content:space-between;align-items:center;gap:var(--space-2);min-height:var(--line);display:flex}.status{font:700 clamp(22px, 6.4vw, 30px) / var(--line) var(--font-hand);color:var(--ink-blue);margin:0}.thinking-pencil{vertical-align:-8px;transform-origin:2px 100%;margin-left:10px;animation:.55s ease-in-out infinite tap}@keyframes tap{0%,to{transform:rotate(0)}50%{transform:rotate(-16deg)translateY(2px)}}.opponent-chip{border:1.5px solid var(--ink-blue);font:500 18px / 24px var(--font-hand);color:var(--ink-blue);white-space:nowrap;border-radius:12px;flex:none;padding:0 9px}.opponent-chip.minimax{border-style:dashed;border-color:var(--ink-red);color:var(--ink-red)}.sticky{background:var(--sticky);width:fit-content;max-width:100%;color:var(--pencil);border-radius:2px 2px 14px;align-items:flex-start;gap:10px;margin:14px 0 16px;padding:10px 16px 12px 12px;font-size:21px;line-height:1.2;animation:.35s cubic-bezier(.3,1.5,.5,1) stick;display:flex;position:relative;rotate:-1.2deg;box-shadow:0 5px 10px #00000038,inset 0 -18px 18px -18px #966e0040}.sticky:before{content:"";background:#ffffff80;width:54px;height:18px;position:absolute;top:-9px;left:50%;translate:-50%;rotate:-3deg;box-shadow:0 1px 2px #00000026}.sticky p{margin:0}.sticky .face{flex:none;width:34px;height:34px}.sticky.warn{background:var(--sticky-warning)}.sticky.warn b{font-family:var(--font-hand);color:var(--ink-red);font-size:26px}@keyframes stick{0%{opacity:0;rotate:4deg;scale:1.15}}.actions{flex-wrap:wrap;align-items:center;gap:10px 14px;display:flex}.pen-button{border:2.5px solid var(--ink-blue);min-height:44px;font:700 24px var(--font-hand);color:var(--ink-blue);cursor:pointer;background:0 0;border-radius:255px 15px 225px/15px 225px 15px 255px;padding:2px 18px 4px;transition:transform .15s,background .15s;display:inline-block}.pen-button:hover,.pen-button:focus-visible{background:rgb(var(--ink-blue-rgb) / .09);outline:none;transform:rotate(-1.5deg)scale(1.03)}.pen-button:focus-visible{box-shadow:0 0 0 3px rgb(var(--ink-blue-rgb) / .3)}.pen-button:disabled{opacity:.6;cursor:progress}.pen-button.share{color:var(--ink-red);border-color:var(--ink-red);animation:2.4s 1.2s 2 nudge}.pen-button.share:hover{background:rgb(var(--ink-red-rgb) / .09)}@keyframes nudge{0%,to{transform:none}10%,30%{transform:rotate(-3deg)scale(1.05)}20%{transform:rotate(3deg)scale(1.05)}}.credit{text-align:center;color:#3b3a38bf;margin:0;font-size:17px;line-height:20px;position:absolute;bottom:5px;left:0;right:0}.credit .heart{color:var(--ink-red)}.credit a{color:var(--ink-blue);text-underline-offset:3px;margin:-10px 0;padding:10px 2px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.credit a:hover,.credit a:focus-visible{text-decoration-style:solid}.toast{left:50%;bottom:max(24px, env(safe-area-inset-bottom));z-index:10;background:var(--sticky);max-width:calc(100vw - 32px);color:var(--pencil);font:700 24px var(--font-hand);border-radius:2px 2px 14px;padding:8px 20px;animation:.3s cubic-bezier(.3,1.5,.5,1) stick;position:fixed;translate:-50%;rotate:-1deg;box-shadow:0 8px 20px #00000059}@media (width<=480px),(height<=700px){.desk{padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left))}.page{box-shadow:0 1px 0 var(--paper-edge), 0 8px 18px #0006;background-position:-20px 0,0 0,0 0,0 0;padding:12px 12px 14px 44px;transform:none}.page:after{display:none}.holes{padding:14px 0;left:8px}.holes span{width:13px;height:13px}.holes span:nth-child(n+5){display:none}header{gap:var(--space-3);padding-bottom:var(--space-3)}h1{font-size:clamp(30px,9.5vw,36px)}.scorecard{gap:var(--space-2);width:100%}.scorecard>*{flex:1;min-width:0}.scorecard>div>span:first-child{font-size:18px}.scorecard>.game-number{white-space:nowrap;flex:1.3;font-size:19px}.score{font-size:30px;line-height:32px}.of{font-size:0}.of:after{content:"/";font-size:19px}.status{line-height:30px}.status-line{min-height:30px}.opponent-chip{font-size:16px;line-height:22px}.sticky{margin:12px 0 10px;padding:8px 12px 9px 10px;font-size:18px}.sticky .face{width:28px;height:28px}.sticky.warn b{font-size:22px}.actions{flex-wrap:nowrap;gap:10px}.pen-button{white-space:nowrap;flex:1;padding:2px 8px 4px;font-size:21px}.credit{margin-top:4px;font-size:15px;line-height:18px;position:static}.toast{top:max(12px, env(safe-area-inset-top));font-size:21px;bottom:auto}}@media (width<=480px) and (orientation:portrait){:root{--chrome:342px}.desk{align-items:stretch}.sheet{display:flex}.page{flex-direction:column;flex:1;display:flex}.board-wrap{margin-block:auto}}@media (width<=340px){.opponent-chip{padding:0 6px;font-size:14px}.page{padding-left:38px;padding-right:8px}.pen-button{font-size:19px}.thinking-pencil{display:none}}@media (orientation:landscape) and (height<=700px){.sheet{width:min(820px,100%)}.page{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:20px;padding-bottom:18px;display:grid}.credit{margin:0;font-size:13px;line-height:14px;position:absolute}header{padding-bottom:var(--space-2);flex-direction:row;grid-column:1/-1;justify-content:space-between;align-items:center}h1{white-space:nowrap;font-size:clamp(26px,8vh,36px)}.scorecard{flex:none;width:auto}.scorecard>*{flex:none;min-width:58px}.board-wrap{width:min(100%,max(200px,100dvh - 130px));margin:0}footer{align-self:center}}@media (height<=340px){.score{font-size:26px;line-height:28px}.scorecard>div>span:first-child{font-size:16px;line-height:18px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important}.confetti{display:none}}