:root{color-scheme:dark;font-family:PingFang SC,Microsoft YaHei,system-ui,-apple-system,sans-serif;--font-display: "Songti SC", "STSong", "SimSun", serif;--font-text: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;--bg: #16120e;--surface: #201a14;--surface-2: #2a231a;--surface-3: #362c1f;--ink: #ece3d2;--muted: #b7a88f;--faint: #a0937a;--accent: #e2623b;--accent-strong: #f0784c;--accent-ink: #1d0f08;--win: #8fc77e;--draw: #e8b35f;--danger: #e56b6b;--danger-strong: #f08a8a;--border: #453a2c;--radius: 16px;--radius-md: 12px;--radius-sm: 8px;--radius-pill: 999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-soft: cubic-bezier(.33, 1, .68, 1);--t-press: .14s;--t-hover: .18s;--t-ui: .24s;--t-reveal: .8s}*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--bg)}body{margin:0;min-height:100svh;background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}::selection{background:var(--accent);color:var(--accent-ink)}#app{width:100%;max-width:1160px;margin:0 auto;padding:32px clamp(16px,3vw,36px) 72px;display:flex;flex-direction:column;gap:var(--space-5)}.game-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-5);align-items:start}.board-column,.side-column{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}@media(min-width:881px)and (min-height:880px){.board-column{position:sticky;top:20px}}.app-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding:4px 2px 0}.brand h1{margin:0;font-family:var(--font-display);font-size:clamp(30px,3.4vw,42px);font-weight:700;letter-spacing:.1em;line-height:1.1;color:var(--ink)}.subtitle{margin:8px 0 0;font-size:13.5px;color:var(--muted)}.brand-mark{display:inline-flex;align-items:center;gap:3px;padding:7px 12px;background:var(--surface);border-radius:var(--radius-pill)}.mark-stone{width:18px;height:18px;border-radius:50%;display:inline-block}.mark-stone.black{background:#191919;border:1px solid rgba(255,255,255,.24)}.mark-stone.white{background:#f1f1f1;border:1px solid rgba(0,0,0,.4)}.panel,.status-bar,.record-list,.replay-bar,.coord-form{background:var(--surface);border-radius:var(--radius)}.panel{padding:16px 18px}.panel-title{font-size:14px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px;color:var(--ink)}.panel-title .hint{margin-left:auto;font-weight:400;font-size:13px;color:var(--faint)}.panel-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}button{font-family:inherit}.btn,.btn-sm,.controls button,.replay-bar button,.coord-form button{font-size:14px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);cursor:pointer;transition:background var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}.btn{padding:8px 18px}.btn-sm{padding:5px 12px;font-size:13px;border-radius:7px}.btn.primary{background:var(--accent);color:var(--accent-ink);font-weight:600}.btn.ghost{background:transparent;color:var(--muted)}.btn-sm.danger{color:var(--danger)}.btn:disabled,.btn-sm:disabled,.controls button:disabled,.replay-bar button:disabled,.coord-form button:disabled{opacity:.4;cursor:not-allowed}@media(hover:hover)and (pointer:fine){.btn:hover:not(:disabled),.btn-sm:hover:not(:disabled),.controls button:hover:not(:disabled),.replay-bar button:hover:not(:disabled),.coord-form button:hover:not(:disabled){background:var(--surface-3)}.btn.primary:hover:not(:disabled){background:var(--accent-strong)}.btn.ghost:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}.btn-sm.danger:hover:not(:disabled){background:#e56b6b24;color:var(--danger-strong)}}.btn:active:not(:disabled),.btn-sm:active:not(:disabled),.controls button:active:not(:disabled),.replay-bar button:active:not(:disabled),.coord-form button:active:not(:disabled){transform:scale(.97)}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible,li[data-action]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.banner{display:flex;align-items:center;gap:12px;justify-content:space-between;background:#e8b35f1f;color:var(--draw);border-radius:var(--radius-md);padding:10px 16px;font-size:13px;line-height:1.5}.banner-text{flex:1}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 16px;font-size:13.5px}.mode-switch{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--surface-2);border-radius:var(--radius-sm);padding:3px}.mode-switch label{cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:5px 12px;border-radius:6px;color:var(--muted);transition:background var(--t-hover) ease,color var(--t-hover) ease}.mode-switch input{position:absolute;opacity:0;pointer-events:none}.mode-switch label:has(input:checked){background:var(--surface-3);color:var(--ink);font-weight:500}.toolbar .field{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}.toolbar select{font-size:13.5px;padding:5px 8px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink)}.toolbar select:disabled{opacity:.5;cursor:not-allowed}.toolbar .check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--muted);transition:color var(--t-hover) ease}.toolbar .check input{position:absolute;opacity:0;pointer-events:none}.toolbar .check .track{width:34px;height:20px;border-radius:var(--radius-pill);background:var(--surface-3);position:relative;flex:none;transition:background var(--t-hover) ease}.toolbar .check .track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--faint);transition:transform var(--t-hover) var(--ease-out),background var(--t-hover) ease}.toolbar .check input:checked+.track{background:var(--accent)}.toolbar .check:has(input:checked){color:var(--ink)}.toolbar .check input:checked+.track:after{transform:translate(14px);background:var(--accent-ink)}.toolbar .check-text{font-size:13.5px}@media(hover:hover)and (pointer:fine){.toolbar .check:hover{color:var(--ink)}}.status-bar{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;font-size:14px;padding:12px 16px}.turn-indicator{display:inline-flex;align-items:center;gap:8px;font-weight:600;min-width:150px}.turn-stone{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:inline-block;flex:none}.turn-stone.black{background:#191919}.turn-stone.white{background:#f1f1f1;border-color:#00000080}.step-count{color:var(--muted);font-variant-numeric:tabular-nums}.mode-tag{font-size:13px;color:var(--faint);margin-left:auto}.board-wrap{position:relative;width:100%;line-height:0;border-radius:18px;background:#2e2315;padding:10px;overflow:hidden}canvas{display:block;width:100%;height:auto;max-width:100%;cursor:pointer;touch-action:manipulation;border-radius:10px}.board-busy{position:absolute;left:50%;bottom:22px;transform:translate(-50%);display:inline-flex;align-items:center;gap:8px;background:#16120ee0;color:var(--ink);font-size:13px;line-height:1;padding:8px 14px;border-radius:var(--radius-pill);pointer-events:none}.spinner{width:12px;height:12px;border-radius:50%;border:2px solid rgba(236,227,210,.3);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.message{min-height:28px;font-size:16px;font-weight:600;text-align:center;padding:2px 0}.message.win{color:var(--win)}.message.draw{color:var(--draw)}.message.replay{color:var(--accent);font-weight:500}.message.hint{color:var(--muted);font-weight:400;font-size:14px}.message.win,.message.draw{animation:msg-pop .5s var(--ease-out)}@keyframes msg-pop{0%{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}.controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.controls button{flex:1 1 auto}.coord-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;padding:12px 16px}.coord-form label{font-size:13.5px;color:var(--muted)}.coord-form input{width:92px;font-size:14px;padding:7px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--ink);text-transform:uppercase;font-family:inherit;transition:border-color var(--t-hover) ease,background var(--t-hover) ease}.coord-form input::placeholder{color:var(--faint)}.coord-form input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}.coord-form input.invalid{border-color:var(--danger);background:#e56b6b1f}.coord-hint{font-size:13px;color:var(--faint);flex:1 1 100%}.field-error{font-size:13px;color:var(--danger-strong);padding:0 4px;margin-top:-6px}.replay-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;font-size:13px}.replay-title{font-weight:600}.replay-bar button{padding:5px 12px}.replay-step{min-width:64px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}.record-list{max-height:250px;overflow-y:auto;padding:12px 16px;font-size:14px;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}.record-list ol{margin:8px 0 0;padding-left:22px;columns:2;column-gap:24px}.record-list li{padding:3px 6px;break-inside:avoid;display:flex;justify-content:space-between;gap:8px;cursor:pointer;border-radius:6px;transition:background var(--t-hover) ease}.record-list li span{color:var(--faint);font-size:13px}.record-list li.future{opacity:.35}@media(hover:hover)and (pointer:fine){.record-list li:hover{background:var(--surface-2)}}.stats-rows{display:flex;flex-direction:column;gap:6px;color:var(--ink);font-size:14px}.stat-label{display:inline-block;min-width:34px;color:var(--faint);margin-right:4px}.empty-hint,.empty-state p{margin:6px 0;font-size:13px;color:var(--muted)}.empty-state{text-align:center;padding:10px 0 6px}.empty-state .stones{display:inline-flex;gap:3px;margin-bottom:10px}.empty-state .stones i{width:14px;height:14px;border-radius:50%;display:block}.empty-state .stones i.black{background:#191919;border:1px solid rgba(255,255,255,.3)}.empty-state .stones i.white{background:#f1f1f1;border:1px solid rgba(0,0,0,.4)}.empty-state .btn{margin-top:8px}.game-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}.game-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;background:var(--surface-2);border-radius:10px;font-size:13px;transition:background var(--t-hover) ease}.game-list li.active{background:#e2623b24}.game-meta{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0}.game-meta b{color:var(--ink);font-weight:600}.game-meta span{color:var(--faint);font-size:13px;overflow-wrap:anywhere}.game-actions{display:flex;gap:6px;margin-left:auto}@media(hover:hover)and (pointer:fine){.game-list li:hover{background:var(--surface-3)}}.record-list::-webkit-scrollbar,.game-list::-webkit-scrollbar{width:8px}.record-list::-webkit-scrollbar-thumb,.game-list::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:var(--radius-pill)}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);max-width:min(92vw,480px);background:var(--surface-3);color:var(--ink);font-size:13px;line-height:1.5;padding:10px 18px;border-radius:10px;box-shadow:0 14px 40px #00000080;opacity:0;transition:opacity .2s,transform .2s;z-index:10;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%)}.toast.warn{background:#e2623b33;color:#f2b39c}@media(prefers-reduced-motion:no-preference){.js [data-rise]{opacity:0;transform:translateY(18px);animation:var(--anim, rise) var(--t-reveal) var(--ease-out) forwards;animation-delay:calc(var(--i, 0) * 90ms + .12s)}.js .board-wrap[data-rise]{--anim: board-in;transform-origin:center top}@keyframes rise{to{opacity:1;transform:none}}@keyframes board-in{0%{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}.replay-bar,.record-list{animation:panel-in .4s var(--ease-out)}@keyframes panel-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}@media(max-width:880px){.game-layout{grid-template-columns:1fr}}@media(max-width:520px){#app{gap:var(--space-4);padding:20px 12px 44px}.app-header{align-items:flex-start}.brand h1{font-size:28px;letter-spacing:.08em}.subtitle{font-size:13px}.brand-mark{padding:6px 10px}.mark-stone{width:16px;height:16px}.panel,.status-bar,.record-list,.replay-bar,.toolbar,.coord-form{border-radius:var(--radius-md)}.status-bar{gap:6px 14px;font-size:14px}.turn-indicator{min-width:130px}.mode-tag{margin-left:0;flex:1 1 100%}.controls button{flex:1 1 calc(50% - 10px)}.mode-switch{width:100%}.mode-switch label{flex:1 1 auto;justify-content:center}.record-list ol{columns:1}.game-list li{align-items:flex-start}.game-actions{margin-left:0}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}.toast{transition:none}.message.win,.message.draw,.replay-bar,.record-list{animation:none}.js [data-rise]{opacity:1;transform:none;animation:none}}.board-fallback{margin:0;padding:28px 20px;font-size:14px;line-height:1.7;color:var(--muted);text-align:center;background:var(--surface-2);border-radius:10px}