:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#faf9f6;--text:#1c1c1a;--text-sub:#5e5e5a;--line:#cfcdc6;--surface:#f1efe9;--board-bg:#e9e7e1;--accent:#306dfd;--accent-hover:#2458d6;--accent-active:#1e4bbf;--slide-duration:.12s;--frame:8px;--tile-gap:4px;--tile-radius:4px;--tile-font-ratio:.42;--font:system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", "Segoe UI", sans-serif;--title-size:22px;--board-size:clamp(360px, min(100vw, calc(100dvh - 240px)), 640px);--cell:calc((var(--board-size) - 2 * var(--frame)) / 4)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#161616;--text:#ededea;--text-sub:#a6a6a1;--line:#3a3a38;--surface:#1f1f1e;--board-bg:#0b0b0b}}@media (width>=1024px){:root{--title-size:32px}}*{box-sizing:border-box}body{background:var(--bg);min-height:100dvh;color:var(--text);font-family:var(--font);margin:0;font-size:16px;line-height:1.5}button{font:inherit;color:inherit}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{grid-template-columns:var(--board-size);grid-template-areas:"head""board""side";place-content:start center;gap:12px;padding:12px 0 24px;display:grid}.head{grid-area:head;padding:0 16px}.title{font-size:var(--title-size);margin:0;line-height:1.2}.board{width:var(--board-size);aspect-ratio:1;background:var(--board-bg);touch-action:manipulation;grid-area:board;position:relative}.tile{left:var(--frame);top:var(--frame);width:var(--cell);height:var(--cell);border:calc(var(--tile-gap) / 2) solid transparent;border-radius:calc(var(--tile-radius) + var(--tile-gap) / 2);background:var(--surface) padding-box;box-shadow:inset 0 0 0 1px var(--line);font-size:calc(var(--cell) * var(--tile-font-ratio));font-variant-numeric:tabular-nums;transform:translate(calc(var(--col) * var(--cell)), calc(var(--row) * var(--cell)));transition:transform var(--slide-duration) ease;cursor:pointer;padding:0;font-weight:700;line-height:1;position:absolute}.side{grid-area:side;gap:12px;padding:0 16px;display:grid}.live{gap:4px;display:grid}.message{min-height:3em;margin:0;font-weight:700}.moves{color:var(--text-sub);margin:0;font-size:14px}.restart{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:4px;min-height:48px;padding:8px 16px;font-weight:700}.restart[data-emphasis=true]{border-color:var(--accent);background:var(--accent);color:#fff}.restart[data-emphasis=true]:hover{border-color:var(--accent-hover);background:var(--accent-hover)}.restart[data-emphasis=true]:active{border-color:var(--accent-active);background:var(--accent-active)}@media (aspect-ratio>=6/5){:root{--board-size:clamp(360px, min(calc(100dvh - 24px), calc(100vw - 340px)), 720px)}.app{grid-template-columns:var(--board-size) minmax(260px, 320px);grid-template-rows:auto 1fr;grid-template-areas:"board head""board side";align-content:center;column-gap:16px;min-height:100dvh;padding:12px 16px}.head,.side{align-self:start;padding:0}}@media (prefers-reduced-motion:reduce){:root{--slide-duration:0s}}