:root,[data-theme=modern]{--bg: #0f1220;--bg-glow: #1b2140;--surface: #1a1f36;--surface-2: #232a4a;--text: #eef1ff;--muted: #9aa3c7;--line: #2e3760;--p0: #3ecf8e;--p1: #ff8a5c;--accent: #6c8cff;--radius: 14px;color-scheme:dark}[data-theme=chalkboard]{--bg: #2c3a32;--bg-glow: #3a4c40;--surface: #33443a;--surface-2: #3e5145;--text: #f2f0e6;--muted: #b7c2b3;--line: #56685b;--p0: #f5e26b;--p1: #f2a6c2;--accent: #a9d3c4;--radius: 14px;color-scheme:dark}[data-theme=paper]{--bg: #e8e0cd;--bg-glow: #fffdf6;--surface: #f7f3e9;--surface-2: #efe7d5;--text: #2b2b2b;--muted: #6f6a5c;--line: #cabfa6;--p0: #2f6db0;--p1: #c0433a;--accent: #3b6ea5;--radius: 14px;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.screen{max-width:560px;margin:0 auto;padding:clamp(16px,4vw,32px);min-height:100%;display:flex;flex-direction:column;gap:18px}.start{justify-content:center;text-align:center}.title{font-size:clamp(56px,18vw,96px);letter-spacing:.15em;margin:0;color:var(--text)}.subtitle{color:var(--muted);margin:0 0 8px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:14px}.label{color:var(--muted);font-size:14px;text-align:left}.size-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.chip{background:var(--surface-2);border:1px solid var(--line);color:var(--text);padding:10px 14px;border-radius:999px;font-size:15px;cursor:pointer}.chip.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,var(--surface))}.mode-note{color:var(--muted);font-size:13px;margin:0}.size-slider{display:flex;flex-direction:column;align-items:center;gap:8px}.size-slider-value{font-size:18px;font-weight:600}.size-slider input[type=range]{width:100%;max-width:320px;accent-color:var(--accent);cursor:pointer}button{font:inherit}.primary{background:var(--accent);color:#fff;border:none;padding:14px 18px;border-radius:var(--radius);font-weight:600;cursor:pointer}.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--line);padding:14px 18px;border-radius:var(--radius);cursor:pointer}.ghost-btn{background:transparent;color:var(--muted);border:none;cursor:pointer;padding:6px 4px}.game-header{display:flex;justify-content:space-between;align-items:center}.size-tag{color:var(--muted);font-size:14px}.scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:12px}.score-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;position:relative;transition:border-color .15s,transform .15s}.score-card.p0{border-left:4px solid var(--p0)}.score-card.p1{border-left:4px solid var(--p1)}.score-card.active-turn{transform:translateY(-2px)}.score-card.p0.active-turn{border-color:var(--p0);box-shadow:0 0 0 1px var(--p0)}.score-card.p1.active-turn{border-color:var(--p1);box-shadow:0 0 0 1px var(--p1)}.score-name{color:var(--muted);font-size:13px}.score-value{font-size:34px;font-weight:700;line-height:1.1}.turn-pill{position:absolute;top:12px;right:12px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.turn-pill.thinking{display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;color:var(--text)}.spinner{width:12px;height:12px;border:2px solid color-mix(in srgb,var(--muted) 60%,transparent);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex:none}@keyframes spin{to{transform:rotate(360deg)}}.control-bar{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px}.cb-group{display:flex;gap:6px}.control-bar button{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-size:22px;line-height:1;cursor:pointer}.control-bar button:disabled{opacity:.35;cursor:default}.control-bar button:not(:disabled):active{background:color-mix(in srgb,var(--accent) 22%,var(--surface-2))}.picker-layer{position:fixed;transform:translate(-50%,-50%);z-index:50;display:flex;align-items:center;gap:28px;pointer-events:none}.pick-target{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:46px;font-weight:800;color:var(--text);background:#1a1f36eb;border:2px solid var(--line);box-shadow:0 10px 30px #00000073;transition:transform .08s,background .08s,border-color .08s}.pick-target.s.on{border-color:var(--p0);background:color-mix(in srgb,var(--p0) 28%,var(--surface));transform:scale(1.18)}.pick-target.o.on{border-color:var(--p1);background:color-mix(in srgb,var(--p1) 28%,var(--surface));transform:scale(1.18)}.pick-hint{color:var(--muted);font-size:12px;white-space:nowrap;background:#0f1220cc;padding:3px 8px;border-radius:999px}.board-viewport{position:relative;width:100%;height:66vh;max-height:640px;overflow:hidden;border-radius:12px;background:#0000002e;touch-action:none;user-select:none;-webkit-user-select:none}.pz-content{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}.zoom-controls{position:absolute;right:10px;bottom:10px;z-index:2;display:flex;flex-direction:column;gap:6px}.zoom-controls button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#1a1f36e6;color:var(--text);font-size:22px;line-height:1;cursor:pointer}.zoom-controls button:disabled{opacity:.4;cursor:default}.board{position:relative}.board-grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);gap:4px;background:var(--line);border:4px solid var(--line);border-radius:12px}.cell{display:flex;align-items:center;justify-content:center;background:var(--surface);border:none;color:var(--text);font-weight:700;font-size:calc(var(--cell) * .48);cursor:pointer;padding:0;transition:background .1s}.cell:disabled{cursor:default}.cell.filled.letter-S,.cell.filled.letter-O{color:var(--text)}.cell .ghost{color:var(--muted);opacity:0;transition:opacity .1s}@media (hover: hover){.cell.empty:hover:not(:disabled){background:var(--surface-2)}.cell.empty:hover .ghost{opacity:.4}}.cell.picking{box-shadow:inset 0 0 0 3px var(--accent);background:var(--surface-2)}.cell.hinted{box-shadow:inset 0 0 0 3px var(--accent)}.hint-letter{animation:hint-pulse 1s ease-in-out infinite}.hint-letter.p0{color:var(--p0)}.hint-letter.p1{color:var(--p1)}@keyframes hint-pulse{0%,to{opacity:.45}50%{opacity:.85}}.sos-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.sos-line{stroke-linecap:round;opacity:.9;stroke-dasharray:1;stroke-dashoffset:1;animation:draw-sos .2s ease-out forwards}.sos-line.p0{stroke:var(--p0)}.sos-line.p1{stroke:var(--p1)}@keyframes draw-sos{to{stroke-dashoffset:0}}@media (prefers-reduced-motion: reduce){.sos-line{animation-duration:.01s}}.status-line{text-align:center;min-height:22px}.hint{color:var(--muted)}.combo{color:var(--p0);font-weight:600}.resign-btn{align-self:center;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:8px 18px;cursor:pointer}.gameover{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center;display:flex;flex-direction:column;gap:14px}.gameover-text{font-size:24px;font-weight:700}.gameover-actions{display:flex;gap:10px;justify-content:center}.start-actions{position:absolute;top:16px;right:16px;display:flex;gap:8px}.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:20px;cursor:pointer}.help-body p{margin:0 0 10px;line-height:1.5}.help-body p:last-child{margin-bottom:0}.teach-banner{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}.teach-message{margin:0;line-height:1.5}.teach-nudge{margin:8px 0 0;color:var(--p1);font-size:14px}.teach-actions{min-height:46px;display:flex;justify-content:center;align-items:center}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}.modal{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:12px}.modal-head{display:flex;align-items:center;justify-content:space-between}.modal-head h2{margin:0;font-size:20px}.theme-list{display:flex;flex-direction:column;gap:10px}.theme-option{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;border:2px solid var(--line);background:var(--surface-2);color:var(--text);cursor:pointer;text-align:left}.theme-option.selected{border-color:var(--accent)}.theme-swatch{display:flex;border-radius:8px;overflow:hidden;border:1px solid var(--line);flex:none}.theme-swatch span{width:20px;height:40px;display:block}.theme-meta{flex:1}.theme-name{font-weight:600}.theme-desc{color:var(--muted);font-size:13px}.theme-check{color:var(--accent);font-weight:700;font-size:18px}