:root{--red:#a81a1f;--red-deep:#6a090d;--paper:#f8ebcf;--ink:#4a1d10;--pen:#1b4d8f;--line:#6e32144d;--rule:#c5282d;--gold:#e7bd62;--amber:#ffc04a;--amber-2:#f0920f;--wrong:#c4121a}html,body{color:#fff;background:var(--red-deep);-webkit-tap-highlight-color:transparent;height:100%;margin:0;font:600 15px/1.25 ui-rounded,SF Pro Rounded,Segoe UI,system-ui,sans-serif;overflow:hidden}body{background:repeating-linear-gradient(90deg, #00000012 0 2px, transparent 2px 11px), radial-gradient(130% 90% at 50% 0%, #bd2227, var(--red) 45%, var(--red-deep))}button{font:inherit;cursor:pointer;touch-action:manipulation;border:0;margin:0;padding:0}#app{--s:min(100vw - 20px, 100dvh - 318px, 560px);--w:max(var(--s), min(100vw - 20px, 340px));box-sizing:border-box;height:100dvh;padding:max(8px, env(safe-area-inset-top)) 10px max(18px, env(safe-area-inset-bottom));grid-template:"top""board""pad""tools""status"/100%;align-content:start;justify-items:center;gap:8px;display:grid}#top{width:var(--w);grid-area:top;align-items:center;gap:12px;min-height:40px;display:flex}#brand{letter-spacing:.02em;text-shadow:0 2px #0000004d;font-size:26px;font-weight:900}#stats{font-variant-numeric:tabular-nums;flex:1;justify-content:flex-end;gap:16px;margin:0;display:flex}#stats div{flex-direction:column;align-items:flex-end;display:flex}#stats dt{letter-spacing:.06em;text-transform:uppercase;opacity:.75;white-space:nowrap;font-size:10px}#stats dd{white-space:nowrap;margin:0;font-size:16px;font-weight:800}#board{width:var(--s);height:var(--s);box-sizing:border-box;background:var(--paper);border:3px solid var(--rule);font-size:calc(var(--s) / 9 * .56);box-shadow:0 0 0 4px var(--gold), 0 0 0 5px #00000040, 0 10px 24px #0006;border-radius:10px;grid-template:repeat(9,1fr)/repeat(9,1fr);grid-area:board;display:grid;overflow:hidden}.cell{min-width:0;min-height:0;color:var(--pen);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:0 0;place-items:center;font-weight:600;line-height:1;display:grid;position:relative}.cell.br{border-right:3px solid var(--rule)}.cell.bb{border-bottom:3px solid var(--rule)}.cell.given{color:var(--ink);font-weight:800}.cell.peer{background:#96551921}.cell.same{background:#ffc04a80}.cell.sel{box-shadow:inset 0 0 0 3px var(--amber-2);background:#ffd070}.cell:focus-visible{outline:3px solid var(--pen);outline-offset:-3px}.cell.bad{color:var(--wrong)}.cell.bad:after{content:"";background:var(--wrong);border-radius:50%;width:16%;height:16%;position:absolute;top:9%;right:9%}.cell.flag{color:var(--wrong);background-image:repeating-linear-gradient(45deg,#c4121a47 0 3px,#0000 3px 7px)}.notes{color:#7b4526;grid-template:repeat(3,1fr)/repeat(3,1fr);font-size:.4em;font-weight:700;display:grid;position:absolute;inset:7%}.notes i{place-items:center;font-style:normal;display:grid}#board.won .cell{animation:.45s ease-out both wave;animation-delay:calc(var(--d) * 40ms)}@keyframes wave{40%{background:#ffd070;transform:scale(1.12)}}#board.still .cell{animation:none}.b{min-height:44px;color:var(--ink);white-space:nowrap;background:linear-gradient(#ffd27a, var(--amber) 45%, var(--amber-2));border-radius:10px;font-weight:800;box-shadow:0 3px #a85f06,inset 0 1px #fff9}.b:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #a85f06}.b:disabled{opacity:.45;cursor:default}.b:focus-visible{outline-offset:2px;outline:3px solid #fff}.b[aria-pressed=true]{color:#fff;background:linear-gradient(#3b78c4, var(--pen));box-shadow:0 3px #0e2d57}.b.confirm{color:#fff;background:linear-gradient(#3a3a3a,#111);box-shadow:0 3px #000}#pad{width:var(--w);grid-area:pad;grid-template-columns:repeat(5,1fr);gap:6px;display:grid}#pad .b{min-height:46px;font-size:23px;position:relative}#pad .b small{opacity:.7;font-size:10px;font-weight:700;position:absolute;top:3px;right:6px}#pad .b.done{opacity:.45}#tools{width:var(--w);grid-area:tools;grid-template-columns:repeat(3,1fr);gap:6px;display:grid}#tools .b{text-overflow:ellipsis;padding:0 4px;font-size:13px;overflow:hidden}#status{min-height:20px;max-width:var(--w);text-align:center;grid-area:status;font-size:13px}@media (aspect-ratio>=11/10) and (width>=620px){#app{--s:min(100dvh - 34px, 100vw - 320px, 720px);--w:260px;grid-template:"board top" auto "board pad" auto "board tools" auto "board status" 1fr / auto var(--w);place-content:center;column-gap:22px;padding:14px 16px}#board{align-self:center}#top{flex-direction:column;gap:6px}#brand{font-size:40px}#stats{flex:none;justify-content:center;gap:22px}#stats div{align-items:center}#stats dd{font-size:19px}#pad{grid-template-columns:repeat(3,1fr)}#pad .b:last-child{grid-column:1/-1}#tools{grid-template-columns:repeat(2,1fr)}#status{align-self:start}}@media (aspect-ratio>=11/10) and (width>=620px) and (height<=540px){#top{flex-direction:row;justify-content:space-between}#brand{font-size:24px}#stats{gap:12px}#stats dd{font-size:15px}#pad{grid-template-columns:repeat(5,1fr)}#pad .b:last-child{grid-column:auto}#pad .b{min-height:44px;font-size:20px}}
