:root{--bg: #e8e1d3;--surface: #f4efe5;--surface-2: #e9e1d1;--text: #433a2f;--muted: #8a7d6b;--line: #d8ccb6;--p0: #5f8b6a;--p1: #c07a55;--accent: #b07a4a;--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:flex-start;text-align:center;padding-top:clamp(76px,16vw,96px)}.title{font-size:clamp(56px,18vw,96px);letter-spacing:.15em;margin:0;color:var(--text)}.subtitle{color:var(--muted);margin:0 0 8px}.title-logo{display:block;height:clamp(58px,17vw,96px);width:auto;margin:0 auto;color:var(--text)}.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}.mode-menu{display:flex;flex-direction:column;gap:10px;width:100%}.mode-card{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;text-align:left;transition:border-color .15s,background .15s,transform .1s}.mode-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}.mode-card:active{transform:translateY(1px)}.mode-card.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}.mode-card.resume{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 14%,var(--surface))}.mode-card.resume .mode-card-icon{background:color-mix(in srgb,var(--accent) 30%,var(--surface-2));color:var(--text)}.mode-card-icon{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;letter-spacing:.02em;background:var(--surface-2);color:var(--muted)}.mode-card.selected .mode-card-icon{background:color-mix(in srgb,var(--accent) 22%,var(--surface-2));color:var(--text)}.mode-card-text{display:flex;flex-direction:column;gap:2px}.mode-card-title{font-weight:600;font-size:1.02rem}.mode-card-sub{font-size:.83rem;color:var(--muted)}.mode-options{display:flex;flex-direction:column;gap:14px;margin-top:2px;animation:mode-reveal .18s ease-out}@keyframes mode-reveal{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(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{position:relative;display:flex;justify-content:space-between;align-items:center}.size-tag{color:var(--muted);font-size:14px}.header-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:20px;width:auto;color:var(--muted);pointer-events:none}.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 2px var(--p0),0 0 16px color-mix(in srgb,var(--p0) 45%,transparent)}.score-card.p1.active-turn{border-color:var(--p1);box-shadow:0 0 0 2px var(--p1),0 0 16px color-mix(in srgb,var(--p1) 45%,transparent)}.score-card:not(.active-turn){opacity:.7}.turn-indicator{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text)}.turn-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:turn-pulse 1s ease-in-out infinite}.score-card.p0 .turn-dot{background:var(--p0)}.score-card.p1 .turn-dot{background:var(--p1)}@keyframes turn-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}.score-name{color:var(--muted);font-size:13px}.score-value{font-size:34px;font-weight:700;line-height:1.1}.board-arena{display:grid;gap:10px;grid-template-areas:"sec" "board" "pri"}.arena-secondary{grid-area:sec}.arena-board{grid-area:board;min-width:0}.arena-primary{grid-area:pri}@media (min-width: 821px){.board-arena{grid-template-areas:"pri sec" "board board";grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}}.player-panel{--pc: var(--p0);position:relative;min-width:0;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:linear-gradient(150deg,color-mix(in srgb,var(--pc) 18%,var(--surface)),var(--surface) 72%);border:1px solid color-mix(in srgb,var(--pc) 26%,var(--line));transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease,border-color .18s ease}.player-panel.p0{--pc: var(--p0)}.player-panel.p1{--pc: var(--p1)}.player-panel:not(.active){opacity:.58}.player-panel.active{transform:translateY(-3px);border-color:var(--pc);box-shadow:0 8px 24px color-mix(in srgb,var(--pc) 30%,transparent)}.player-token{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;background:var(--pc);box-shadow:inset 0 -3px 6px color-mix(in srgb,#000 20%,transparent),inset 0 2px 4px color-mix(in srgb,#fff 30%,transparent)}.player-token.bot{font-size:15px;letter-spacing:.03em}.player-panel.active .player-token{box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 32%,transparent),inset 0 -3px 6px color-mix(in srgb,#000 20%,transparent)}.player-id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}.player-name{display:flex;align-items:center;gap:6px;min-width:0}.player-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:14px}.player-you{flex:none;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 6px}.player-status{display:inline-flex;align-items:center;gap:6px;min-height:15px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text)}.player-panel .turn-dot{background:var(--pc)}.player-figures{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px}.player-score{font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--pc) 58%,var(--text))}.player-clock{font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;color:var(--muted)}.turn-pill{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;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))}.greeting{position:absolute;top:18px;left:16px;right:108px;font-size:13px;color:var(--muted);text-align:left;line-height:1.4}.greeting strong{color:var(--text);font-weight:600}.link-btn{background:none;border:none;padding:0;cursor:pointer;color:var(--accent);text-decoration:underline;font:inherit}.name-input{background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:4px 8px;font:inherit;font-size:13px;width:150px;margin-right:6px}.build-tag{position:fixed;right:4px;bottom:3px;font-size:9px;line-height:1;color:var(--muted);opacity:.35;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:200;font-variant-numeric:tabular-nums}.online-center{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);padding:32px 0}.online-score{display:grid;grid-template-columns:1fr 1fr;gap:12px}.online-score-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.clock{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;color:var(--text)}.games-list{display:flex;flex-direction:column;gap:8px}.game-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;text-align:left}.game-item-main{display:flex;flex-direction:column;gap:2px}.game-opp{font-weight:600}.game-size{color:var(--muted);font-size:12px}.game-item-side{display:flex;align-items:center;gap:12px}.game-score{font-variant-numeric:tabular-nums;font-weight:700}.game-badge{font-size:12px;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}.game-badge.you{background:color-mix(in srgb,var(--accent) 25%,var(--surface-2));color:var(--text)}.game-time{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.game-item.done{opacity:.5}.game-item.done:hover{opacity:.72}.game-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}.games-filter{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.games-filter .chip{padding:6px 12px;font-size:13px}.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:var(--surface);border:2px solid var(--line);box-shadow:0 10px 30px #3c2d1947;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)}.board-viewport{position:relative;width:100%;height:66vh;max-height:640px;overflow:hidden;border-radius:0;background:color-mix(in srgb,var(--text) 7%,transparent);user-select:none;-webkit-user-select:none}@media (max-width: 820px),(pointer: coarse){.board-viewport{height:auto;aspect-ratio:1 / 1;max-height:60vh}}.pz-content{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;touch-action:none}.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:var(--surface);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:4px}.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.filled.owner-p0{color:color-mix(in srgb,var(--p0) 55%,var(--text))}.cell.filled.owner-p1{color:color-mix(in srgb,var(--p1) 55%,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.just-played{animation:just-played .55s ease-out 3}@keyframes just-played{0%,to{box-shadow:inset 0 0 0 0 transparent}50%{box-shadow:inset 0 0 0 3px var(--accent)}}.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}.board-stage{position:relative}.board-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.board-overlay .gameover{width:100%;max-width:320px;box-shadow:0 14px 40px #00000059;animation:overlay-pop .18s ease-out}@keyframes overlay-pop{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}.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}.settings-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border-radius:12px;border:2px solid var(--line);background:var(--surface-2);cursor:pointer}.settings-toggle-text{flex:1}.settings-toggle-title{font-weight:600}.settings-toggle-desc{color:var(--muted);font-size:13px}.settings-toggle input[type=checkbox]{width:20px;height:20px;flex:none}[data-reduce-motion] *:not(.spinner),[data-reduce-motion] *:not(.spinner):before,[data-reduce-motion] *:not(.spinner):after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}