:root{--text:#6b6375;--text-h:#08060d;--bg:#f7f6f3;--surface:#fff;--border:#e5e4e7;--accent:#7c3aed;--accent-bg:#7c3aed1a;--accent-border:#7c3aed73;--x-color:#7c3aed;--o-color:#ea580c;--success:#16a34a;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;font:16px/145% var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#9ca3af;--text-h:#f3f4f6;--bg:#121218;--surface:#1b1b23;--border:#2e303a;--accent:#a78bfa;--accent-bg:#a78bfa26;--accent-border:#a78bfa80;--x-color:#a78bfa;--o-color:#fb923c;--success:#4ade80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}}*,:before,:after{box-sizing:border-box}body{min-height:100svh;margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);margin:0;font-weight:600}p{margin:0}button{font:inherit;color:inherit}.app-shell{justify-content:center;align-items:center;min-height:100svh;display:flex}.app-main{width:100%;max-width:480px;padding:20px 16px calc(20px + env(safe-area-inset-bottom));flex-direction:column;gap:18px;display:flex}.app-header{text-align:center;padding-top:4px}.app-header__title{letter-spacing:-.02em;font-size:1.5rem}.app-header__subtitle{color:var(--text);margin-top:4px;font-size:.875rem}.status-bar{text-align:center;min-height:1.4em;color:var(--text-h);font-size:.95rem;font-weight:600}.meta-board{aspect-ratio:1;width:100%;position:relative}.meta-board__grid{background:var(--border);border-radius:18px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:6px;width:100%;height:100%;padding:6px;display:grid}.meta-board--finished .meta-board__grid{filter:saturate(.85)}.mini-board{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);border-radius:10px;position:relative;overflow:hidden}.mini-board--closed{background:color-mix(in srgb, var(--surface) 90%, var(--border))}.mini-board__grid{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:3px;width:100%;height:100%;padding:4px;display:grid}.mini-board__stamp{pointer-events:none;background:color-mix(in srgb, var(--surface) 78%, transparent);justify-content:center;align-items:center;font-size:clamp(2.2rem,11vw,3.6rem);font-weight:800;display:flex;position:absolute;inset:0}.mini-board__stamp--x{color:var(--x-color)}.mini-board__stamp--o{color:var(--o-color)}.mini-board__stamp--draw{color:var(--text);font-size:clamp(1.4rem,6vw,2rem)}.cell{background:var(--bg);cursor:pointer;color:var(--text-h);touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:none;border-radius:5px;justify-content:center;align-items:center;padding:0;font-size:clamp(.85rem,3.6vw,1.3rem);font-weight:700;display:flex;position:relative}.cell:disabled{cursor:default}.cell:not(:disabled):hover{background:var(--accent-bg)}.cell--x .cell__mark{color:var(--x-color)}.cell--o .cell__mark{color:var(--o-color)}.win-line-layer{pointer-events:none;position:absolute;inset:0}.win-line{background:var(--success);box-shadow:0 0 12px var(--success);border-radius:999px;position:absolute}.result-modal-backdrop{z-index:50;background:#00000073;justify-content:center;align-items:flex-end;padding:16px;display:flex;position:fixed;inset:0}@media (width>=640px){.result-modal-backdrop{align-items:center}}.result-modal{background:var(--surface);text-align:center;width:100%;max-width:380px;box-shadow:var(--shadow);border-radius:20px 20px 12px 12px;flex-direction:column;gap:10px;padding:28px 24px 24px;display:flex}@media (width>=640px){.result-modal{border-radius:20px}}.result-modal__title{font-size:1.5rem}.result-modal__meta{color:var(--text);font-size:.875rem}.result-modal__grid{background:var(--bg);white-space:pre;border-radius:12px;margin:8px 0;padding:14px;font-family:ui-monospace,Consolas,monospace;font-size:1.1rem;line-height:1.4}.result-modal__footnote{color:var(--text);font-size:.8rem}.button{cursor:pointer;border:none;border-radius:999px;padding:12px 24px;font-size:1rem;font-weight:600}.button--primary{background:var(--accent);color:#fff}.button--primary:hover{filter:brightness(1.05)}.button--large{width:100%;margin-top:4px;padding:14px 24px;font-size:1.05rem}.help-button{border:1px solid var(--border);background:var(--surface);color:var(--text-h);cursor:pointer;border-radius:999px;margin-top:10px;padding:6px 16px;font-size:.8rem;font-weight:600}.help-button:hover{border-color:var(--accent-border);color:var(--accent)}.tutorial-backdrop{z-index:60;background:#00000073;justify-content:center;align-items:flex-end;padding:16px;display:flex;position:fixed;inset:0}@media (width>=640px){.tutorial-backdrop{align-items:center}}.tutorial-panel{background:var(--surface);width:100%;max-width:400px;max-height:min(640px,88svh);box-shadow:var(--shadow);border-radius:20px 20px 12px 12px;flex-direction:column;display:flex;overflow:hidden}@media (width>=640px){.tutorial-panel{border-radius:20px}}.tutorial-panel__header{justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 20px 0;display:flex}.tutorial-panel__title{font-size:1.2rem;line-height:1.25}.tutorial-panel__close{background:var(--bg);width:28px;height:28px;color:var(--text);cursor:pointer;border:none;border-radius:999px;flex-shrink:0;font-size:.85rem}.tutorial-panel__close:disabled{opacity:.35;cursor:default}.tutorial-panel__close:not(:disabled):hover{color:var(--text-h)}.tutorial-panel__body{padding:16px 20px;overflow-y:auto}.tutorial-panel__footer{padding:12px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:8px;display:flex}.tutorial-nav-button{color:var(--text-h);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px 10px;font-size:.9rem;font-weight:600}.tutorial-nav-button:disabled{opacity:.3;cursor:default}.tutorial-nav-button--primary{background:var(--accent);color:#fff;border-radius:999px;padding:8px 18px}.tutorial-progress{gap:6px;display:flex}.tutorial-progress__dot{background:var(--border);cursor:pointer;border:none;border-radius:999px;width:7px;height:7px;padding:0}.tutorial-progress__dot--active{background:var(--accent);width:18px}.tutorial-step{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:220px;display:flex}.tutorial-step__text{color:var(--text-h);max-width:32ch;font-size:.95rem;line-height:1.45}.tutorial-step__text--emphasis{font-size:1.05rem;font-weight:600}.tutorial-step__caption{color:var(--accent);font-size:.85rem;font-weight:600}.tutorial-list{flex-direction:column;gap:12px;width:100%;margin:0;padding:0;list-style:none;display:flex}.tutorial-list li{background:var(--bg);color:var(--text-h);text-align:left;border-radius:12px;padding:12px 16px;font-size:.95rem}.tutorial-tinyboard{width:132px;height:132px}.tutorial-redirect{justify-content:center;align-items:center;gap:10px;width:100%;display:flex}.tutorial-redirect__side{flex-direction:column;align-items:center;gap:8px;display:flex}.tutorial-redirect__label{color:var(--text);text-transform:uppercase;letter-spacing:.04em;font-size:.7rem;font-weight:600}.tutorial-redirect__arrow{color:var(--accent);padding-top:18px;font-size:1.3rem}.tutorial-meta-preview{width:168px;margin:0 auto;position:relative}.tutorial-meta-preview__grid{aspect-ratio:1;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.tutorial-meta-preview__cell{background:var(--bg);box-shadow:inset 0 0 0 1px var(--border);border-radius:6px;justify-content:center;align-items:center;font-size:1.1rem;font-weight:800;display:flex}.tutorial-meta-preview__cell--target{box-shadow:0 0 0 3px var(--accent), 0 8px 16px -8px var(--accent-border)}.tutorial-meta-preview__cell--available{box-shadow:0 0 0 2px var(--success)}.tutorial-meta-preview__cell--x{color:var(--x-color)}.tutorial-meta-preview__cell--o{color:var(--o-color)}.tutorial-meta-preview__cell--draw{color:var(--text);font-size:1rem}.dev-reset-button{z-index:100;border:1px dashed var(--text);background:var(--surface);color:var(--text);opacity:.55;cursor:pointer;border-radius:6px;padding:6px 10px;font-size:.7rem;position:fixed;bottom:12px;left:12px}.dev-reset-button:hover{opacity:1}