html,body{width:100%;height:100%;margin:0}:root{--bg:#0a0d0b;--panel:#0f1411;--line:#243029;--fg:#d2e6d6;--dim:#7a8c81;--accent:#57f08a;--cursor:#6dff9e;--hint:#ffd166;--warn:#ff6b6b;--cell-off:#e8ece8;--cell-on:#11150f;--mono:ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", Meiryo, "Noto Sans Mono CJK JP", "Noto Sans CJK JP", monospace}:root.light{--bg:#e9ece4;--panel:#e1e5da;--line:#c3ccbd;--fg:#34423a;--dim:#5c675f;--accent:#1c7245;--cursor:#0aa84f;--hint:#b9821f;--warn:#b23f28;--cell-off:#f6f7f2;--cell-on:#3c483f}.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}*{box-sizing:border-box;touch-action:manipulation}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}body{background:var(--bg);color:var(--fg);font-family:var(--mono);justify-content:center;align-items:center;min-height:100vh;padding:clamp(12px,4vw,32px);font-size:15px;line-height:1.5;transition:background-color .18s,color .18s;display:flex}.layout{justify-content:center;align-items:flex-start;gap:28px;display:flex}.cli{flex-direction:column;gap:16px;width:min(92vw,560px);display:flex}.bar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding-bottom:8px;display:flex}.bar-title{color:var(--accent);letter-spacing:.04em}.bar-title:before{content:"> ";color:var(--dim)}.bar-right{align-items:center;gap:14px;display:flex}.bar-meta{color:var(--dim);white-space:nowrap;font-size:.85em}.bar-theme,.bar-zen,.bar-lang{border:1px solid var(--line);color:var(--fg);font-family:var(--mono);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:3px 9px;font-size:1em;line-height:1;display:inline-flex}.bar-lang{letter-spacing:.04em;color:var(--dim)}.bar-theme .ic{display:block}.bar-theme:active,.bar-zen:active,.bar-lang:active{background:var(--panel)}.layout.zen .bar-zen{border-color:var(--accent);color:var(--accent)}.bar-meta,.hud-status,.keys,.hist-spacer,.hist-trigger,.toolbar,.history{transition:opacity .28s,visibility .28s}.bar{transition:border-color .28s}.layout.zen .bar{border-color:#0000}.layout.zen .bar-meta,.layout.zen .hud-status,.layout.zen .keys,.layout.zen .hist-spacer,.layout.zen .hist-trigger,.layout.zen .toolbar,.layout.zen .history{opacity:0;visibility:hidden;pointer-events:none}.footer{text-align:center;color:var(--dim);pointer-events:none;padding:8px 12px;font-size:.74em;transition:opacity .28s,visibility .28s;position:fixed;bottom:0;left:0;right:0}.footer a{color:var(--dim);border-bottom:1px solid var(--line);pointer-events:auto;text-decoration:none}.footer a:hover{color:var(--fg);border-color:var(--accent)}.layout.zen~.footer{opacity:0;visibility:hidden}.lang-screen{z-index:100;background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:blur(2px);justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.lang-screen[hidden]{display:none}.lang-card{background:var(--panel);border:1px solid var(--line);flex-direction:column;gap:18px;width:min(86vw,320px);padding:28px;display:flex}.lang-prompt{color:var(--accent);letter-spacing:.02em;margin:0}.lang-prompt:before{content:"> ";color:var(--dim)}.lang-options{flex-direction:column;gap:10px;display:flex}.lang-opt{font-family:var(--mono);text-align:left;color:var(--fg);border:1px solid var(--line);cursor:pointer;background:0 0;padding:12px 16px;font-size:1em;transition:border-color .12s,color .12s}.lang-opt:hover{border-color:var(--accent);color:var(--accent)}.board{aspect-ratio:1;width:min(100%,66vh);margin:0 auto;position:relative}.grid{grid-template-columns:repeat(var(--n,5), 1fr);grid-template-rows:repeat(var(--n,5), 1fr);background:var(--line);border:3px solid var(--line);user-select:none;touch-action:manipulation;gap:3px;width:100%;height:100%;transition:background-color .45s,border-color .45s;display:grid}.cell{background:var(--cell-off);cursor:pointer;min-width:0;min-height:0;transition:background-color .18s;position:relative}.cell.on{background:var(--cell-on)}.cell.flash{animation:.24s cellflash}@keyframes cellflash{0%{box-shadow:inset 0 0 0 99px color-mix(in srgb, var(--cursor) 40%, transparent)}to{box-shadow:inset 0 0 0 99px #0000}}.overlay{grid-template-columns:repeat(var(--n,5), 1fr);grid-template-rows:repeat(var(--n,5), 1fr);pointer-events:none;gap:3px;display:grid;position:absolute;inset:3px}.cursor-box,.hint-box{place-self:stretch stretch}.cursor-box{border:3px solid var(--cursor);box-shadow:0 0 0 1px var(--bg), inset 0 0 0 1px var(--bg)}.hint-box{border:3px solid var(--hint);background:color-mix(in srgb, var(--hint) 20%, transparent);z-index:1;animation:1.2s ease-in-out infinite hintpulse;position:relative}.hint-box:after{content:"";background:var(--hint);border-radius:50%;width:24%;height:24%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes hintpulse{0%,to{opacity:1}50%{opacity:.45}}.hud{flex-wrap:wrap;gap:4px 18px;font-size:.9em;display:flex}.hud-moves{color:var(--fg)}.hud-status{color:var(--accent);margin-left:auto;font-weight:600}.hud-streak{color:var(--dim);letter-spacing:.04em;flex:0 0 100%;align-items:center;gap:8px;display:none}.hud-streak.show{display:flex}.streak-marks{gap:3px;display:inline-flex}.hud-streak .mark{color:var(--accent)}.streak-n{color:var(--fg)}.hud-streak .mark.pulse{transform-origin:50%;animation:.45s ease-out streak-pulse;display:inline-block}@keyframes streak-pulse{0%{opacity:.35;transform:scale(1)}45%{opacity:1;transform:scale(1.55)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.hud-streak .mark.pulse{animation:none}}.tut-text{display:none}.cli.tutorial .tut-text{display:block}.tut-title{color:var(--accent);letter-spacing:.02em;margin:0 0 8px;font-size:1.05em}.tut-title:before{content:"> ";color:var(--dim)}.tut-body{color:var(--fg);margin:0;line-height:1.6}.tut-keys{color:var(--dim);margin:10px 0 0;font-size:.9em}.tut-skip{color:var(--dim);font-family:var(--mono);cursor:pointer;background:0 0;border:none;margin-top:12px;padding:0;font-size:.85em;text-decoration:underline}.tut-skip:hover{color:var(--fg)}.cli.tutorial .hud,.cli.tutorial .toolbar,.cli.tutorial .bar-zen{display:none}.layout.tutorial .history,.layout.tutorial .hist-spacer,.layout.tutorial .keys,.cli.tutorial .hist-trigger{display:none!important}.cta{z-index:3;font-family:var(--mono);color:var(--bg);background:var(--accent);cursor:pointer;border:none;padding:12px 20px;font-size:1em;display:none;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 6px 20px #0000004d}.cta.show{display:inline-block}.cta:hover{filter:brightness(1.08)}.cta.loading:after{content:"";background:color-mix(in srgb, var(--bg) 22%, transparent);transform-origin:0;animation:ctaload var(--auto-advance,5s) linear forwards;position:absolute;inset:0;transform:scaleX(0)}@keyframes ctaload{to{transform:scaleX(1)}}.toolbar{flex-wrap:wrap;gap:8px;display:none}.toolbar button{font-family:var(--mono);color:var(--fg);border:1px solid var(--line);cursor:pointer;background:0 0;min-height:44px;padding:0 14px;font-size:.9em}.toolbar button:active{background:var(--panel)}.cli .tut-only{display:none}.cli.tutorial .tut-only{display:inline-block}.cli.tutorial .free-only{display:none}.hist-trigger{appearance:none;letter-spacing:.04em;color:var(--accent);text-align:left;cursor:pointer;background:0 0;border:0;padding:0;font-family:inherit;font-size:1.05em;display:none}.hist-trigger:before{content:"> ";color:var(--dim)}.hist-trigger:after{content:" ▸";color:var(--dim)}.keys{flex:none;width:230px;font-size:.9em;display:none}.keys-head{color:var(--accent);letter-spacing:.04em;border-bottom:1px solid var(--line);margin:0 0 16px;padding-bottom:8px;font-size:15px}.keys-head:before{content:"> ";color:var(--dim)}.keys ul{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.keys li{color:var(--dim);align-items:baseline;gap:8px;display:flex}.keys kbd{font-family:var(--mono);color:var(--fg);background:var(--panel);border:1px solid var(--line);border-bottom-width:2px;flex:none;padding:1px 6px;font-size:.92em}.cli.won .grid{border-color:var(--accent);animation:.6s winpulse}.cli.won .cell{animation:winwave .5s ease var(--wd,0s) both}@keyframes winwave{0%{box-shadow:inset 0 0 #0000}45%{box-shadow:inset 0 0 0 99px color-mix(in srgb, var(--accent) 55%, transparent)}to{box-shadow:inset 0 0 0 99px #0000}}@keyframes winpulse{0%,to{box-shadow:0 0 #0000}50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent)}}@media (prefers-reduced-motion:reduce){.cli.won .cell,.cli.won .grid,.hint-box,.cta.loading:after{animation:none}.history,.hist-backdrop,.bar,.bar-meta,.hud-status,.keys,.hist-spacer,.hist-trigger,.toolbar{transition:none}}.cli.won .cursor-box,.cli.lost .cursor-box{opacity:0}.cli.lost .grid{border-color:var(--warn)}.cli.lost .hud-status{color:var(--warn)}.hist-spacer,.history{flex:none;width:230px;display:none}.layout.has-history .history{display:block}.hist-backdrop{display:none}.history{color:var(--fg);font-size:.85em}.hist-head{appearance:none;text-align:left;border:0;border-bottom:1px solid var(--line);width:100%;color:var(--accent);letter-spacing:.04em;background:0 0;flex:none;margin-bottom:8px;padding:0 0 8px;font-family:inherit;font-size:15px;line-height:1.5;position:relative}.hist-head:before{content:"> ";color:var(--dim)}.hist-chevron{color:var(--dim);display:none;position:absolute;top:0;right:0}.head-history-stats{display:none}.hist-empty{color:var(--dim);margin:0}.hist-list{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.hist-row{appearance:none;text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer;background:0 0;border:1px solid #0000;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:10px;padding:6px 8px;transition:background-color .12s,border-color .12s;display:grid}.hist-thumb{grid-template-columns:repeat(var(--n,5), 1fr);border:1px solid var(--line);width:32px;height:32px;display:grid}.hist-thumb i{background:var(--cell-off)}.hist-thumb i.on{background:var(--cell-on)}.hist-replay{color:var(--dim)}.hist-row:hover .hist-replay{color:var(--accent)}.hist-row:hover{background:var(--panel);border-color:var(--line)}.hist-result{font-weight:700}.hist-row.won .hist-result{color:var(--accent)}.hist-row.lost .hist-result{color:var(--warn)}.hist-moves{color:var(--dim)}.hist-clear{border:1px solid var(--line);color:var(--dim);font-family:var(--mono);cursor:pointer;background:0 0;flex:none;align-self:flex-start;margin-top:12px;padding:5px 10px;font-size:.95em;transition:color .12s,border-color .12s}.hist-clear:hover{color:var(--fg);border-color:var(--dim)}.stats{border-bottom:1px solid var(--line);flex:none;grid-template-columns:1fr 1fr;gap:3px 16px;margin-bottom:12px;padding-bottom:12px;display:grid}.stat{white-space:nowrap;justify-content:space-between;gap:8px;display:flex}.stat-k{color:var(--dim)}.stat-v{color:var(--fg)}.stats-clear{border:1px solid var(--line);color:var(--dim);font-family:var(--mono);cursor:pointer;background:0 0;grid-column:1/-1;justify-self:start;margin-top:8px;padding:4px 9px;font-size:.95em;transition:color .12s,border-color .12s}.stats-clear:hover{color:var(--fg);border-color:var(--dim)}@media (width<=880px){.layout{flex-direction:column;align-items:center;gap:16px}.hist-spacer{display:none!important}.layout.has-history .history{width:min(92vw,560px)}}@media (hover:hover) and (pointer:fine){body{overflow:hidden}.layout:not(.tutorial) .keys,.layout:not(.tutorial):not(.has-history) .hist-spacer{display:block}.layout.has-history .history{flex-direction:column;max-height:calc(100dvh - 2*clamp(12px,4vw,32px));display:flex}.hist-body{overscroll-behavior:contain;flex:auto;min-height:0;max-height:min(560px,66vh);overflow-y:auto}}@media (hover:none),(pointer:coarse){.keys,.bar-diff,.bar-sep,.tut-keys{display:none}.cell:after{content:"";pointer-events:none;z-index:2;--mk-line:color-mix(in srgb, var(--line) 50%, transparent);background-image:linear-gradient(var(--mk-line), var(--mk-line)), linear-gradient(var(--mk-line), var(--mk-line)), linear-gradient(var(--m-tl,transparent), var(--m-tl,transparent)), linear-gradient(var(--m-tr,transparent), var(--m-tr,transparent)), linear-gradient(var(--m-bl,transparent), var(--m-bl,transparent)), linear-gradient(var(--m-br,transparent), var(--m-br,transparent));background-position:50%,50%,0 0,100% 0,0 100%,100% 100%;background-repeat:no-repeat;background-size:3px 100%,100% 3px,50% 50%,50% 50%,50% 50%,50% 50%;border-radius:50%;width:15px;height:15px;transition:opacity .3s;position:absolute;top:0;left:0;transform:translate(calc(-50% - 1.5px),calc(-50% - 1.5px))}.cell[data-x="0"]:after,.cell[data-y="0"]:after{display:none}.cli.won .cell:after{opacity:0}.cursor-box{display:none}.toolbar{display:flex}.hist-spacer{display:none!important}.bar-theme,.bar-zen,.bar-lang{padding:7px 11px;font-size:1.1em}.hist-head{cursor:pointer;flex:none}.hist-chevron{display:inline}.hist-chevron:after{content:"▾"}.head-history{display:none}.head-history-stats{display:inline}.hist-body{overscroll-behavior:contain;flex:auto;min-height:0;overflow-y:auto}body{align-items:stretch;height:100dvh;min-height:0;overflow:hidden}.layout{height:100%;min-height:0}.cli{flex:none}.cli:not(.tutorial) .hist-trigger{visibility:hidden;display:block}.layout.has-history:not(.show-history) .hist-trigger{visibility:visible}.layout.has-history .history{z-index:30;background:var(--bg);border-top:1px solid var(--line);width:auto;max-height:85vh;padding:16px clamp(14px, 5vw, 24px) calc(16px + env(safe-area-inset-bottom,0px));flex-direction:column;transition:transform .28s;display:flex;position:fixed;inset:auto 0 0;transform:translateY(100%);box-shadow:0 -8px 24px #0000002e}.layout.show-history .history{transform:translateY(0)}.hist-backdrop{z-index:29;opacity:0;pointer-events:none;background:#0006;transition:opacity .28s;display:block;position:fixed;inset:0}.layout.show-history .hist-backdrop{opacity:1;pointer-events:auto}}