:root{--bg:#f5efe3;--bg-soft:#ede4d2;--panel:#fffdf7;--panel-border:#e2d6bd;--text:#3a3226;--text-soft:#8a7d66;--accent:#c0392b;--accent-soft:#f3d9d4;--board-bg:#e3b565;--board-line:#8a6a3a;--shadow:0 4px 16px #5a462826;--good:#2e8b57;--bad:#d64541;--turning:#e67e22}html[data-theme=dark]{--bg:#1e1b16;--bg-soft:#26221b;--panel:#2c2820;--panel-border:#3d372c;--text:#e8e0d0;--text-soft:#a3988a;--accent:#e74c3c;--accent-soft:#4a2f2a;--board-bg:#b8874a;--board-line:#5c4526;--shadow:0 4px 16px #0006}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);min-height:100%;margin:0;padding:0;font-family:PingFang SC,Microsoft YaHei,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;transition:background .3s,color .3s}#app{flex-direction:column;max-width:1100px;min-height:100vh;margin:0 auto;padding:0 16px 32px;display:flex}.topbar{justify-content:space-between;align-items:center;padding:14px 4px;display:flex}.brand{color:var(--text);letter-spacing:1px;font-size:20px;font-weight:700;text-decoration:none}.topbar-actions{gap:8px;display:flex}.icon-btn{background:var(--panel);border:1px solid var(--panel-border);cursor:pointer;border-radius:8px;width:38px;height:38px;font-size:16px;transition:transform .15s}.icon-btn:hover{transform:scale(1.08)}.view{flex:1}.menu-hero{text-align:center;padding:28px 0 8px}.menu-hero h1{letter-spacing:4px;margin:0 0 6px;font-size:34px}.tagline{color:var(--text-soft);margin:0}.menu-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:24px 0;display:grid}.mode-card{background:var(--panel);border:1px solid var(--panel-border);text-align:center;cursor:pointer;box-shadow:var(--shadow);border-radius:14px;padding:20px 16px;transition:transform .15s,border-color .15s}.mode-card:hover{border-color:var(--accent);transform:translateY(-3px)}.mode-icon{margin-bottom:8px;font-size:34px}.mode-title{margin-bottom:6px;font-size:17px;font-weight:700}.mode-desc{color:var(--text-soft);font-size:13px}.menu-options{justify-content:center;margin:4px 0 20px;display:flex}.option-label{color:var(--text-soft);align-items:center;gap:12px;font-size:14px;display:flex}.seg{border:1px solid var(--panel-border);border-radius:8px;display:inline-flex;overflow:hidden}.seg-btn{background:var(--panel);color:var(--text);cursor:pointer;border:none;padding:7px 14px;font-size:13px}.seg-btn.active{background:var(--accent);color:#fff}.stats-panel{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--shadow);border-radius:14px;margin-bottom:18px;padding:16px 20px}.stats-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 28px;display:flex}.stats-title{margin:0 0 10px;font-size:15px;font-weight:700}.stats-item{color:var(--text-soft);font-size:14px}.stats-item b{color:var(--text);margin-left:4px;font-size:17px}.stats-win{color:var(--good)}.stats-lose{color:var(--bad)}.history-panel h2{margin:0 0 10px;font-size:17px}.history-list{flex-direction:column;gap:8px;display:flex}.history-item{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 14px;font-size:14px;display:flex}.history-main{flex:1;min-width:200px}.history-meta{color:var(--text-soft);font-size:12px}.history-result{font-weight:700}.history-result.win{color:var(--good)}.history-result.lose{color:var(--bad)}.history-result.draw{color:var(--text-soft)}.history-empty{color:var(--text-soft);padding:8px 0;font-size:14px}.game-layout{align-items:flex-start;gap:20px;padding-top:8px;display:flex}.board-wrap{flex:1;justify-content:center;min-width:0;display:flex}#board-canvas,#review-canvas{max-width:100%;box-shadow:var(--shadow);touch-action:manipulation;border-radius:10px;display:block}.game-side{flex-direction:column;flex-shrink:0;gap:12px;width:230px;display:flex}.player-row{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;align-items:center;gap:10px;padding:10px 14px;transition:border-color .2s;display:flex}.player-row.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.stone-dot{border-radius:50%;flex-shrink:0;width:20px;height:20px}.stone-dot.black{background:radial-gradient(circle at 35% 30%,#555,#000)}.stone-dot.white{background:radial-gradient(circle at 35% 30%,#fff,#ccc);border:1px solid #bbb}.player-name{flex:1;font-size:15px;font-weight:600}.player-time{font-variant-numeric:tabular-nums;color:var(--text-soft);font-size:14px}.status-bar{text-align:center;background:var(--accent-soft);color:var(--text);border-radius:8px;padding:9px 8px;font-size:14px;font-weight:600}.btn-group{grid-template-columns:1fr 1fr;gap:8px;display:grid}.action-btn{background:var(--panel);color:var(--text);border:1px solid var(--panel-border);cursor:pointer;white-space:nowrap;border-radius:8px;padding:9px 10px;font-size:13px;transition:border-color .15s,background .15s}.action-btn:hover:not(:disabled){border-color:var(--accent)}.action-btn:disabled{opacity:.45;cursor:not-allowed}.modal-mask{z-index:100;background:#140f058c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modal-mask[hidden]{display:none}.modal{background:var(--panel);text-align:center;width:100%;max-width:380px;box-shadow:var(--shadow);border-radius:16px;padding:28px 30px}.result-title{margin-bottom:10px;font-size:26px;font-weight:800}.result-detail{color:var(--text-soft);margin-bottom:20px;font-size:14px;line-height:1.7}.modal-btns{flex-direction:column;gap:10px;display:flex}.primary-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:12px;font-size:15px;font-weight:600}.primary-btn:hover{filter:brightness(1.1)}.review-layout{align-items:flex-start;gap:20px;padding-top:8px;display:flex}.review-board-wrap{flex-direction:column;flex:1;align-items:center;gap:10px;min-width:0;display:flex}.review-controls{flex-wrap:wrap;align-items:center;gap:8px;width:100%;max-width:640px;display:flex}.review-controls input[type=range]{min-width:120px;accent-color:var(--accent);flex:1}.review-side{flex-direction:column;flex-shrink:0;gap:10px;width:320px;display:flex}.review-side h2{margin:0;font-size:18px}.rv-progress{background:var(--accent-soft);border-radius:8px;padding:10px 14px}.rv-progress-text{margin-bottom:6px;font-size:13px}.rv-progress-bar{background:#80808040;border-radius:4px;height:8px;overflow:hidden}#rv-progress-fill{background:var(--accent);width:0;height:100%;transition:width .2s}.rv-summary{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.7}.rv-chart{background:var(--panel);border:1px solid var(--panel-border);cursor:crosshair;border-radius:10px;width:100%;height:160px}.rv-chart-caption{color:var(--text-soft);text-align:center;font-size:12px}.rv-movelist{flex-direction:column;gap:6px;max-height:320px;display:flex;overflow-y:auto}.rv-move-item{background:var(--panel);border:1px solid var(--panel-border);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;font-size:13px;display:flex}.rv-move-item:hover{border-color:var(--accent)}.rv-move-item.current{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.rv-tag{border-radius:5px;flex-shrink:0;padding:2px 7px;font-size:12px;font-weight:700}.rv-tag.good{color:var(--good);background:#2e8b5726}.rv-tag.normal{color:var(--text-soft);background:#80808026}.rv-tag.mistake{color:var(--bad);background:#d6454126}.rv-tag.turning{color:var(--turning);background:#e67e2226}.rv-move-desc{color:var(--text-soft);flex:1}.footer{text-align:center;color:var(--text-soft);margin-top:32px;padding:10px 0;font-size:12px}@media (max-width:760px){#app{padding:0 10px 20px}.menu-hero h1{font-size:26px}.menu-grid{grid-template-columns:repeat(2,1fr);gap:10px}.mode-card{padding:14px 8px}.mode-icon{font-size:26px}.mode-desc{display:none}.game-layout,.review-layout{flex-direction:column}.game-side,.review-side,.board-wrap{width:100%}.btn-group{grid-template-columns:repeat(3,1fr)}.action-btn{padding:11px 6px;font-size:12px}.review-controls{justify-content:center}.rv-movelist{max-height:220px}}