:root{--bg:#f4efe6;--surface:#fffdf8;--text:#2a241c;--muted:#7a6e5f;--border:#e2d8c6;--accent:#c0562b;--accent-text:#fff;--win:#2f8a4c;--lose:#b23b3b;--wood:#dcb35c;--wood-line:#5b4320;--danger:#e0332d;--shadow:0 6px 24px #3c280a1f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#1c1915;--surface:#27231e;--text:#efe8dc;--muted:#a99d8b;--border:#3b352d;--accent:#e0703f;--win:#5cc27c;--lose:#ec6b6b;--shadow:0 6px 24px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic,system-ui,sans-serif;line-height:1.6}button{font:inherit;color:inherit}.app{flex-direction:column;min-height:100dvh;display:flex}.topbar{border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.logo{letter-spacing:.02em;cursor:pointer;background:0 0;border:0;align-items:center;gap:2px;padding:0;font-size:1.25rem;font-weight:800;display:flex}.logo-stone{border-radius:50%;width:18px;height:18px;display:inline-block}.logo-black{background:#111}.logo-white{background:#f6f4ef;border:1px solid #aaa;margin:0 8px 0 -6px}.btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:10px;padding:10px 16px;font-weight:600;transition:transform 80ms,background .15s}.btn:hover:not(:disabled){background:color-mix(in srgb, var(--surface) 85%, var(--accent))}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.btn-primary:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 88%, #000)}.btn-ghost{background:0 0}.btn-active{background:color-mix(in srgb, var(--surface) 70%, var(--accent));border-color:var(--accent)}.btn-small{padding:6px 12px;font-size:.9rem}.btn-block{width:100%}.link-btn{color:var(--muted);cursor:pointer;background:0 0;border:0;margin-top:12px;font-size:.9rem;text-decoration:underline}.menu{width:100%;max-width:880px;margin:0 auto;padding:32px 16px 48px}.hero{text-align:center;margin-bottom:40px}.hero h1{letter-spacing:.02em;margin:0;font-size:clamp(2.5rem,8vw,4rem);line-height:1.1}.tagline{margin:8px 0 20px;font-size:1.2rem;font-weight:700}.levels h2{margin:0 0 12px;font-size:1.1rem}.level-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}@media (width<=560px){.level-grid{grid-template-columns:1fr}}.level-card{text-align:left;border:1px solid var(--border);background:var(--surface);cursor:pointer;box-shadow:var(--shadow);border-radius:14px;flex-direction:column;gap:6px;padding:18px;transition:transform .12s,border-color .12s;display:flex}.level-card:hover{border-color:var(--accent);transform:translateY(-2px)}.level-name{font-size:1.3rem;font-weight:800}.level-desc{color:var(--muted);flex:1;font-size:.92rem}.online-card{width:100%}.level-grid+h2{margin-top:24px}.topbar-actions{gap:8px;display:flex}.topbar-actions .btn-small{white-space:nowrap}@media (width<=420px){.topbar{padding:10px 12px}.topbar-actions{gap:4px}.topbar-actions .btn-small{padding:6px 8px;font-size:.82rem}}@media (width<=360px){.topbar{padding:10px 8px}.logo{font-size:1rem}.topbar-actions .btn-small{padding:5px 6px;font-size:.76rem}}.hero-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.tutorial-progress{justify-content:space-between;align-items:center;gap:8px;display:flex}.tutorial-count{font-weight:700}.tutorial-dots{gap:4px;display:flex}.tutorial-dot{border:1px solid var(--border);background:var(--surface);border-radius:50%;width:10px;height:10px}.tutorial-dot.dot-current{border-color:var(--accent)}.tutorial-dot.dot-ok{background:var(--win);border-color:var(--win)}.tutorial-dot.dot-retry{background:var(--muted);border-color:var(--muted)}.tutorial-message{background:var(--surface);border:1px solid var(--border);border-radius:12px;min-height:4.8em;padding:12px 14px;font-weight:600}.tutorial-message.wrong{color:var(--lose)}.tutorial-message.correct{color:var(--win)}.section-lead{color:var(--muted);margin:-4px 0 12px;font-size:.9rem}.link-card{color:inherit;text-decoration:none}.external-icon{fill:none;width:.7em;height:.7em;stroke:var(--muted);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;margin-left:6px}.level-stats{font-variant-numeric:tabular-nums;font-size:.85rem}.game{flex:1;justify-content:center;align-items:flex-start;gap:20px;padding:16px;display:flex}.board-wrap{flex-shrink:1;width:min(100%,100dvh - 100px);min-width:0;max-width:820px;position:relative}.board{width:100%;height:auto;box-shadow:var(--shadow);-webkit-user-select:none;user-select:none;border-radius:6px;display:block}.board-interactive{cursor:pointer;touch-action:none}.board-bg{fill:var(--wood)}.grid line{stroke:var(--wood-line);stroke-width:.04px}.star{fill:var(--wood-line)}.stone-white{stroke:#9a948a;stroke-width:.02px}.ghost-black{fill:#00000059;pointer-events:none}.ghost-white{fill:#ffffff8c;pointer-events:none}.terr{pointer-events:none}.terr-black{fill:#111;opacity:.75}.terr-white{fill:#fff;stroke:#555;stroke-width:.03px;opacity:.85}.atari-ring{fill:none;stroke:var(--danger);stroke-width:.08px;pointer-events:none;animation:.9s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.25}}.mark-on-black{fill:none;stroke:#fff;stroke-width:.06px}.mark-on-white{fill:none;stroke:#000;stroke-width:.06px}.libs{text-anchor:middle;font-variant-numeric:tabular-nums;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Roboto,Segoe UI,Arial,sans-serif;font-weight:600}.libs-on-black{fill:#fff}.libs-on-white{fill:#000}.libs-atari{fill:var(--danger)}.captured{pointer-events:none;transform-box:fill-box;transform-origin:50%;animation:.7s ease-out forwards vanish}@keyframes vanish{to{opacity:0;transform:scale(1.4)}}.illegal path{stroke:var(--danger);stroke-width:.12px;stroke-linecap:round;fill:none}.illegal{pointer-events:none}.illegal-flash{animation:.7s ease-out forwards vanish-fade}@keyframes vanish-fade{to{opacity:0}}.paused{background:#00000073;border-radius:6px;place-content:center;justify-items:center;gap:16px;display:grid;position:absolute;inset:0}.paused-title{color:#fff;text-shadow:0 4px 20px #00000080;font-size:clamp(1.8rem,7vw,3.5rem);font-weight:900}.countdown{color:#fff;text-shadow:0 4px 20px #00000080;pointer-events:none;place-items:center;font-size:clamp(3rem,14vw,8rem);font-weight:900;display:grid;position:absolute;inset:0;overflow:hidden}.countdown span{animation:.9s ease-out pop}@keyframes pop{0%{opacity:0;transform:scale(1.6)}30%{opacity:1}}.panel{flex-direction:column;flex-shrink:0;gap:12px;width:300px;display:flex}.timer{font-variant-numeric:tabular-nums;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:4px;font-size:2.4rem;font-weight:800;position:relative}.pause-btn{border:1px solid var(--border);width:40px;height:40px;color:var(--text);cursor:pointer;background:0 0;border-radius:10px;place-items:center;display:grid;position:absolute;top:50%;right:12px;translate:0 -50%}.pause-btn svg{fill:currentColor;width:16px;height:16px}.pause-btn:disabled{opacity:.4;cursor:default}.timer-warn{color:var(--danger)}.score-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;align-items:center;gap:12px;padding:10px 14px;display:flex}.score-main{flex:1;min-width:0}.score-label{flex-wrap:wrap;align-items:center;gap:6px;font-weight:700;display:flex}.score-detail{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.8rem}.score-captures{white-space:nowrap}.score-total{font-variant-numeric:tabular-nums;font-size:1.8rem;font-weight:800}.badge{background:var(--accent);color:var(--accent-text);border-radius:999px;padding:0 8px;font-size:.7rem}.dot{vertical-align:middle;border-radius:50%;flex-shrink:0;width:22px;height:22px;display:inline-block}.dot-black{background:radial-gradient(circle at 35% 30%,#666,#000 70%)}.dot-white{background:radial-gradient(circle at 35% 30%,#fff,#c8c3b9 90%);border:1px solid #9a948a}.lead-bar{background:#f1eee8;border:1px solid #b8b2a7;border-radius:999px;height:10px;overflow:hidden}.lead-black{background:#1a1a1a;height:100%;transition:width .3s}.message{min-height:3.2em;color:var(--muted);margin:0;font-size:.88rem}.actions{flex-wrap:wrap;gap:8px;display:flex}.actions .btn{flex:1}.toggles{flex-wrap:wrap;gap:4px 16px;font-size:.9rem;display:flex}.toggles label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:2px 0;display:flex}.toggles input[type=checkbox]{appearance:none;border:1.5px solid color-mix(in srgb, var(--muted) 45%, var(--border));background:var(--surface) center / 12px 12px no-repeat;cursor:pointer;border-radius:6px;flex-shrink:0;width:18px;height:18px;margin:0;transition:background-color .15s,border-color .15s}.toggles input[type=checkbox]:hover{border-color:var(--accent)}.toggles input[type=checkbox]:checked{border-color:var(--accent);background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.5 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.toggles input[type=checkbox]:focus-visible{outline:2px solid color-mix(in srgb, var(--accent) 45%, transparent);outline-offset:2px}.result{z-index:10;background:#140f0873;place-items:center;padding:16px;animation:.25s fade-in;display:grid;position:fixed;inset:0}.btn-x{color:#fff;background:#0f1419;border-color:#0f1419}.btn-x:disabled{opacity:.5}.share-open{margin-top:8px}.share-backdrop{z-index:20;background:#140f088c;padding:16px;display:flex;position:fixed;inset:0;overflow-y:auto}.share-card{background:var(--surface);width:min(100%,440px);box-shadow:var(--shadow);border-radius:18px;margin:auto;padding:22px 20px 18px;position:relative}.share-card h2{margin:0 0 12px;font-size:1.25rem}.share-preview{background:var(--bg);min-height:160px;color:var(--muted);border-radius:12px;place-items:center;margin-bottom:14px;font-size:.9rem;display:grid;overflow:hidden}.share-preview img{object-fit:contain;width:100%;max-height:44dvh;display:block}.share-note{color:var(--muted);margin:10px 0 0;font-size:.8rem}@keyframes fade-in{0%{opacity:0}}.result-card{background:var(--surface);text-align:center;width:min(100%,420px);box-shadow:var(--shadow);border-radius:18px;padding:24px}.online-wait{flex:1;place-items:center;padding:16px;display:grid}.result-card.notice h2{font-size:1.4rem}.result-card.notice p{color:var(--muted)}.wait-size{margin:0 0 16px}.code-input{box-sizing:border-box;width:100%;font:inherit;text-align:center;color:var(--text);background:var(--bg);border:2px solid var(--border);border-radius:12px;padding:12px 14px;font-size:1.1rem}.code-input:focus{border-color:var(--accent);outline:none}.result-card.notice .code-hint{text-wrap:balance;margin:6px 0 16px;font-size:.8rem}.friend-entry .actions{justify-content:center}.result-reason{color:var(--muted);font-size:.9rem}.result-card h2{margin:4px 0;font-size:2rem}.win{color:var(--win);font-weight:800}.loss{color:var(--lose);font-weight:800}.draw{font-weight:800}.result-diff{margin:0 0 12px;font-weight:700}.result-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;margin-bottom:18px}.result-table th,.result-table td{border-bottom:1px solid var(--border);padding:6px 4px}.result-table tbody th{text-align:left;white-space:nowrap;font-weight:600}.result-table .dot{width:14px;height:14px}.result-table .total{font-weight:800}.result-mini{background:var(--surface);border:1px solid var(--border);width:max-content;max-width:calc(100vw - 32px);box-shadow:var(--shadow);z-index:10;border-radius:16px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:8px 8px 8px 16px;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.result-mini>span{white-space:nowrap;margin-right:4px;font-weight:700}.result-mini .btn{white-space:nowrap}@media (width<=520px){.result-mini{width:calc(100vw - 32px);padding:10px}.result-mini>span{text-align:center;flex-basis:100%;margin:0}.result-mini .btn{white-space:normal;text-wrap:balance;flex:1;min-width:0;padding:10px 8px}}.modal-backdrop{z-index:20;background:#140f0880;justify-content:center;align-items:flex-start;padding:24px 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.modal{background:var(--surface);width:min(100%,640px);box-shadow:var(--shadow);border-radius:18px;padding:24px;position:relative}.modal-close{cursor:pointer;color:var(--muted);background:0 0;border:0;font-size:1.6rem;position:absolute;top:10px;right:14px}.rules h2{margin:0 0 8px}.rules h3{margin:20px 0 4px;font-size:1.05rem}.rules p{margin:6px 0}.rules ul{margin:6px 0 20px;padding-left:1.2em}.mini-row{flex-wrap:wrap;justify-content:center;gap:16px;margin:12px 0;display:flex}.mini{text-align:center;margin:0}.mini-board,.mini{max-width:100%}.mini figcaption{color:var(--muted);margin-top:6px;font-size:.82rem;line-height:1.5}@media (width<=860px){.game{flex-direction:column;justify-content:flex-start;align-items:center;gap:12px;padding:12px 16px}.board-wrap{width:100%}.panel{width:100%;max-width:560px}.timer{font-size:1.8rem}}.segmented{grid-template-columns:repeat(2,1fr);gap:8px;max-width:480px;margin-bottom:28px;display:grid}.segmented button{border:2px solid var(--border);background:var(--surface);cursor:pointer;border-radius:14px;flex-direction:column;align-items:center;padding:12px;display:flex}.segmented button.selected{border-color:var(--accent);background:color-mix(in srgb, var(--surface) 85%, var(--accent))}.seg-main{font-size:1.15rem;font-weight:800}.seg-sub{color:var(--muted);font-size:.85rem}.game-info{text-align:center;color:var(--muted);margin-bottom:-6px;font-size:.85rem}
