:root{--bg: #1a1d23;--bg-elev: #252932;--bg-elev2: #2d323d;--border: #3a3f4b;--text: #e4e6eb;--text-dim: #9ca3af;--accent: #4a9eff;--accent-hover: #6bb3ff;--black-stone: #1a1a1a;--white-stone: #f5f5f5;--board-bg: #dcb35c;--board-line: #3d2817;--success: #4ade80;--danger: #f87171;--warning: #fbbf24;--radius: 8px;--shadow: 0 4px 12px rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}#app{width:100%;height:100vh;display:flex;flex-direction:column;overflow:hidden}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elev);color:var(--text);font-size:14px;cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none}.btn:hover:not(:disabled){background:var(--bg-elev2);border-color:var(--accent)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-large{padding:12px 24px;font-size:16px}.btn-active{background:var(--accent);border-color:var(--accent);color:#fff}#btn-sparkle{background:var(--bg-elev);border-color:var(--border);color:var(--text)}#btn-sparkle.active{background:#ccc;border-color:#ccc;color:#222}input.text-input{padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font-size:16px;width:100%;outline:none;transition:border-color .15s}input.text-input:focus{border-color:var(--accent)}.btn-sm{padding:4px 10px;font-size:12px}.btn-wide{flex:1}.btn-block{width:100%}.ident-box{display:flex;flex-direction:column;gap:10px;border:1px solid var(--border);border-radius:8px;padding:10px}.ident-fields{display:flex;flex-direction:column;gap:8px}.ident-row{display:flex;gap:8px}.ident-err{color:var(--danger);font-size:12px;min-height:14px;word-break:break-word}#ident-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--text-dim)}#ident-banner b{color:var(--text)}.app-version{margin:14px auto 0;font-size:12px;color:var(--text-dim);opacity:.7;-webkit-user-select:none;user-select:none}.auth-tabs{display:flex;gap:16px;border-bottom:1px solid var(--border)}.auth-tab{background:none;border:none;padding:6px 2px;font-size:14px;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}.auth-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}.screen{width:100%;height:100%;display:flex;flex-direction:column}.screen-centered{align-items:center;justify-content:center}.lang-switch{display:flex;align-items:center;gap:8px}.lang-btn{padding:2px 12px;font-size:12px}.lang-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.name-screen{gap:22px;position:relative;overflow:hidden;background:radial-gradient(110% 90% at 50% 0%,rgba(120,96,52,.2),transparent 55%),radial-gradient(120% 110% at 50% 115%,rgba(150,52,24,.18),transparent 60%),linear-gradient(180deg,#14171c,#101318 55%,#0d0f13);font-family:SimSun,STSong,Songti SC,serif}.war-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.war-bg .war-grid{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;background-image:linear-gradient(rgba(210,180,120,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(210,180,120,.05) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(80% 70% at 50% 45%,#000 40%,transparent 100%);-webkit-mask-image:radial-gradient(80% 70% at 50% 45%,#000 40%,transparent 100%)}.war-bg .war-glow{position:absolute;top:-30%;left:50%;transform:translate(-50%);width:640px;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgba(232,142,60,.16),transparent 70%);filter:blur(6px)}.war-bg .war-lines{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(232,185,63,.7),transparent)}.war-bg .war-smoke{position:absolute;bottom:-18%;width:40%;aspect-ratio:1.6 / 1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,210,150,.06),transparent 70%);filter:blur(26px);animation:war-smoke-drift 11s ease-in-out infinite alternate}.war-bg .war-smoke.s1{left:-8%;animation-delay:0s}.war-bg .war-smoke.s2{left:30%;animation-delay:2.4s;animation-duration:13s}.war-bg .war-smoke.s3{right:-10%;left:auto;animation-delay:5s;animation-duration:9s}@keyframes war-smoke-drift{0%{transform:translate(0) scale(1);opacity:.5}to{transform:translate(60px) scale(1.25);opacity:.9}}.war-head{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;animation:war-head-in .7s ease both}@keyframes war-head-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.war-head .war-star{font-size:20px;color:#e8b93f;text-shadow:0 0 12px rgba(232,185,63,.6);animation:war-pulse 2.4s ease-in-out infinite}@keyframes war-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.88)}}.war-head .logo{font-size:44px;font-weight:800;letter-spacing:10px;text-align:center;margin:0;color:#f0d9a0;text-shadow:0 0 1px #fff6e0,0 2px 0 #5a3a18,0 10px 26px rgba(0,0,0,.6)}.war-head .logo:after{content:"";display:block;width:78%;height:1.5px;margin:8px auto 0;background:linear-gradient(90deg,transparent,#e8b93f,transparent)}.war-head .subtitle{color:#b9aa88;letter-spacing:3px;font-size:14px;text-align:center}.war-seals{margin-top:4px;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:4px;color:#e08c4a;opacity:.85;text-shadow:0 0 8px rgba(224,140,74,.35)}.war-seals em{font-style:normal;color:#5a4a34;font-size:8px}.war-seals span{border:1px solid rgba(224,140,74,.5);border-radius:3px;padding:1px 7px;background:#32201259}.name-screen .form{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;width:344px;animation:war-form-in .7s .12s ease both}@keyframes war-form-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.name-screen .mode-tabs{gap:8px}.name-screen .mode-tabs .btn{flex:1;border-color:#2e3329;background:linear-gradient(180deg,#232722,#191c18);color:#c8bfa6;font-family:SimSun,STSong,serif;letter-spacing:4px;border-radius:6px;transition:transform .14s ease,background .2s ease,color .2s ease}.name-screen .mode-tabs .btn:hover{transform:translateY(-1px)}.name-screen .mode-tabs .btn.active{background:linear-gradient(180deg,#7a2e1e,#52200f);border-color:#c05b2e;color:#ffe6c8;box-shadow:0 6px 18px #963c1459,inset 0 1px #ffdcaa40}.name-screen .form .text-input{background:#14171c;border-color:#333a2f;color:#e6ddc2;font-family:inherit}.name-screen #start-btn{position:relative;background:linear-gradient(180deg,#262b21,#1c2019);border:1px solid #3c432f;color:#e8d9a8;font-family:SimSun,STSong,serif;font-size:18px;letter-spacing:10px;height:54px;border-radius:8px;overflow:hidden;transition:transform .15s ease,box-shadow .2s ease,color .2s ease;box-shadow:inset 0 0 0 1px #e8b93f1f}.name-screen #start-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(232,185,63,.16),transparent);transform:translate(-100%);animation:war-sweep 3s ease-in-out infinite}@keyframes war-sweep{0%,55%{transform:translate(-100%)}to{transform:translate(100%)}}.name-screen #start-btn:hover:not(:disabled){transform:translateY(-2px);color:#ffedbf;box-shadow:0 0 24px #e8b93f4d,inset 0 1px #fff0be4d}.name-screen #start-btn:disabled{opacity:.5}.name-screen .fog-hint{padding-left:0;color:#7d7464}.name-screen .chk-label{color:#c9bfa6;font-size:14px;letter-spacing:1px}.name-screen .rules-box{width:360px;background:#14171c99;border:1px solid #2c312a;border-radius:8px;color:#9a937f}.name-screen .rules-box summary{color:#d8cba2;letter-spacing:2px;font-family:SimSun,STSong,serif}.name-screen .rules-box .rules-body{max-height:200px;overflow-y:auto;padding-right:6px}.name-screen .rules-box .rules-body::-webkit-scrollbar{width:6px}.name-screen .rules-box .rules-body::-webkit-scrollbar-thumb{background:#3a3f33;border-radius:3px}.name-screen .feedback{color:#7d7464}.name-screen .lang-switch{justify-content:center}.rules-box{width:340px;border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--text-dim)}.rules-box summary{cursor:pointer;color:var(--text);font-weight:600;-webkit-user-select:none;user-select:none}.rules-body{margin-top:8px;text-align:left}.feedback{margin-top:10px;font-size:12px;color:var(--text-muted, #8899aa)}.feedback a{color:var(--font-color, #67b8e0);text-decoration:none}.feedback a:hover{text-decoration:underline}.rules-title{font-weight:600;margin-bottom:6px;color:var(--text)}.rules-body ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}.mode-tabs{display:flex;gap:8px;margin-bottom:8px}.mode-tabs .btn{flex:1}.mode-tabs .btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.ai-options{display:flex;flex-direction:column;gap:4px}.ai-options-label{font-size:12px;color:var(--text-dim)}.ai-options .mode-tabs{margin-bottom:0}.lobby-screen{padding:24px;gap:16px}.lobby-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--border)}.lobby-stats{display:flex;gap:24px}.lobby-stat{display:flex;flex-direction:column;gap:2px}.lobby-stat .label{font-size:12px;color:var(--text-dim)}.lobby-stat .value{font-size:20px;font-weight:600}.lobby-content{flex:1;display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:24px;padding:0 16px;min-height:0}.lobby-main{flex:0 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-height:0}.lobby-side{flex:0 1 auto;display:flex;flex-direction:column;gap:16px;align-self:center;min-height:0;overflow-y:auto;max-height:calc(100vh - 120px)}.lobby-header{width:100%;max-width:980px;display:flex;justify-content:space-between;align-items:center;padding:4px 0}.lobby-header .topbar-title{font-size:16px;font-weight:700}.lobby-settings{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;min-width:420px;max-width:480px}.lobby-settings-title{font-size:13px;color:var(--text-dim);margin-bottom:10px;text-align:center;letter-spacing:.5px}.lobby-settings-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.lobby-settings-item{display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center}.lobby-settings-item .label{font-size:12px;color:var(--text-dim)}.lobby-settings-item .value{font-size:15px;font-weight:600;color:var(--accent)}.match-status{padding:16px 24px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);text-align:center}.lobby-leaderboard{width:100%;max-width:420px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}.lb-me-banner{margin-bottom:8px;padding:6px 10px;background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:6px;font-size:13px;font-weight:600;color:var(--accent);text-align:center}.lb-row{display:grid;grid-template-columns:44px 1fr 56px 70px;align-items:center;gap:6px;padding:3px 6px;font-size:13px;border-radius:4px}.lb-row.lb-me{background:color-mix(in srgb,var(--accent) 12%,transparent)}.lb-rank{color:var(--text-dim);font-variant-numeric:tabular-nums}.lb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-rating{text-align:right;font-weight:700;color:var(--accent)}.lb-wl{text-align:right;color:var(--text-dim);font-size:12px}.match-status .spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-right:8px;vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}.match-status-inline{display:inline-flex;align-items:center;gap:6px;padding:0 8px;color:var(--text-dim);font-size:13px;white-space:nowrap}.match-status-inline:before{content:"";width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:24px;min-width:360px;box-shadow:var(--shadow);text-align:center}.modal h2{margin-bottom:12px}.modal .modal-body{margin-bottom:20px;color:var(--text-dim)}.modal .modal-actions{display:flex;gap:12px;justify-content:center}.countdown{font-size:32px;font-weight:700;color:var(--warning);margin:8px 0}.game-screen{display:flex;flex-direction:row;height:100vh}.game-main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.game-topbar{display:flex;justify-content:flex-start;align-items:center;padding:4px 12px;background:var(--bg-elev);border-bottom:1px solid var(--border);height:32px;flex-shrink:0;position:relative}.topbar-title{font-weight:600}.topbar-status{color:var(--text-dim);font-size:13px;position:absolute;left:50%;transform:translate(-50%);white-space:nowrap;text-align:center;max-width:46%;overflow:hidden;text-overflow:ellipsis}.game-topbar .btn{position:relative;z-index:3;margin-left:8px}.territory-scheme-ctl{position:relative;z-index:3;margin-left:auto;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-dim);white-space:nowrap}.territory-scheme-ctl select{font-size:12px;padding:1px 4px;background:#000;color:#3dff7a;border:1px solid #1f3d2c;border-radius:4px;cursor:pointer}.territory-scheme-ctl select option{background:#000;color:#3dff7a}.board-wrapper{flex:1;display:flex;align-items:stretch;justify-content:center;position:relative;padding:2px;overflow:hidden;min-height:0}.board-container{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0;min-height:0;align-self:stretch;height:100%}#board-canvas{cursor:pointer;border-radius:4px;box-shadow:var(--shadow);max-width:100%;max-height:100%;width:auto;height:auto}.side-panel{width:210px;flex-shrink:0;height:100vh;overflow-y:auto}.side-left{border-right:1px solid var(--border)}.side-right{border-left:1px solid var(--border)}.side-panel .score-panel{width:100%;height:auto;border-right:none;border-left:none}.deploy-banner{position:absolute;top:16px;left:50%;transform:translate(-50%);background:#141e32d9;color:#59e5a5;padding:6px 20px;border-radius:6px;font-size:14px;font-weight:600;letter-spacing:1px;border:1px solid rgba(89,229,165,.4);pointer-events:none;z-index:10;animation:deploy-banner-pulse 2s ease-in-out infinite}@keyframes deploy-banner-pulse{0%,to{opacity:.7}50%{opacity:1}}.disconnect-banner{position:absolute;top:60px;left:50%;transform:translate(-50%);background:#78281ee6;color:#ffd9d0;padding:8px 22px;border-radius:6px;font-size:14px;font-weight:600;letter-spacing:1px;border:1px solid rgba(255,160,120,.5);pointer-events:none;z-index:11;animation:deploy-banner-pulse 2s ease-in-out infinite}.game-controls{padding:4px 12px;display:flex;gap:8px;justify-content:center;background:var(--bg-elev);border-top:1px solid var(--border);flex-shrink:0}.game-controls .btn{flex:0 1 auto;padding:4px 12px;font-size:13px}.lobby-replays{width:100%;max-width:420px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}.replay-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:none;border-bottom:1px solid var(--border);padding:7px 4px;cursor:pointer;color:var(--text);font-size:13px}.replay-item:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}.replay-item-match{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.replay-item-score{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:12px}.replay-item-winner{color:var(--accent);font-weight:600;font-size:12px}.replay-item-empty{color:var(--text-dim);font-size:13px;padding:8px 2px}.replay-screen .game-controls{flex-wrap:wrap;align-items:center}.replay-controls input[type=range]{flex:1 1 160px;min-width:120px;max-width:280px;accent-color:var(--accent);cursor:pointer}.replay-move-label{font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}.replay-meta{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}:root{--sp-gold-bright: #ffd966;--sp-warm-gold: #f5b840;--sp-red-war: #ef5b3f;--sp-occ: #f5b840;--sp-def: #5fd1a0;--sp-cas: #e25a44;--sp-gold-dim: #e8c16a;--sp-panel-bg: #12100c}.score-panel{--sp-side: var(--sp-gold-dim);padding:14px 14px 16px;background:repeating-linear-gradient(115deg,rgba(255,255,255,.013) 0 2px,transparent 2px 6px),linear-gradient(180deg,#0c0e12 0%,var(--sp-panel-bg) 100%);border-right:1px solid var(--border);font-size:13px;position:relative;display:flex;flex-direction:column;gap:10px;color:var(--text)}.score-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--sp-side),transparent 72%);opacity:.9}.score-panel:after{content:"";position:absolute;top:0;right:0;width:46px;height:46px;background:linear-gradient(225deg,var(--sp-side),transparent 58%);opacity:.16;pointer-events:none}.score-panel>*{position:relative}.score-panel:last-child{border-right:none}.score-panel-black{--sp-side: #9fc4ff}.score-panel-white{--sp-side: var(--sp-gold-dim)}.score-panel.active{background:repeating-linear-gradient(115deg,rgba(255,255,255,.014) 0 2px,transparent 2px 6px),linear-gradient(180deg,#171b22,#221a0b);animation:sp-pulse 2.5s ease-in-out infinite}@keyframes sp-pulse{0%,to{box-shadow:inset 0 0 0 1.5px #ffd96652,0 0 #ffd96600}50%{box-shadow:inset 0 0 0 1.5px #ffd966d9,0 0 24px #ffc65833}}.score-panel.game-over{opacity:.6;filter:saturate(.55)}.sp-timer-bar{position:relative;height:14px;background:#0000008c;border:1px solid rgba(156,163,175,.55);border-radius:2px;overflow:hidden}.sp-timer-fill{height:100%;width:100%;background:var(--sp-gold-dim);transition:width .3s linear,background .3s}.sp-timer-fill.active{background:var(--sp-warm-gold)}.sp-timer-fill.low{background:var(--sp-red-war);animation:sp-blink .6s ease-in-out infinite}@keyframes sp-blink{0%,to{opacity:1}50%{opacity:.5}}.sp-timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:SF Mono,Monaco,Consolas,monospace;font-size:11px;font-weight:700;color:var(--text);letter-spacing:.5px;text-shadow:0 0 4px rgba(0,0,0,.9);white-space:nowrap}.sp-timer-text.low{color:var(--sp-red-war)}.sp-identity{display:flex;align-items:center;gap:12px;padding-top:6px}.sp-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;border:2px solid var(--sp-gold-dim);background:var(--black-stone);position:relative}.score-panel-white .sp-avatar{background:var(--white-stone)}.score-panel.active .sp-avatar{border-color:var(--sp-gold-bright);animation:sp-avatar-pulse 2.5s ease-in-out infinite}@keyframes sp-avatar-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.sp-id-text{flex:1;min-width:0}.sp-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-panel.active .sp-name{color:var(--sp-gold-bright)}.sp-pieces{font-size:11px;color:var(--text-dim);margin-top:2px}.sp-sep{height:1px;background:linear-gradient(90deg,transparent,var(--border) 30%,var(--sp-gold-dim) 50%,var(--border) 70%,transparent);opacity:.6}.sp-total-section{text-align:center;padding:4px 0}.sp-total-label{font-size:11px;color:var(--text-dim);letter-spacing:2px}.sp-total-wrap{position:relative;display:inline-block;margin-top:2px}.sp-total{font-size:32px;font-weight:700;color:var(--text);transition:transform .1s;display:inline-block}.score-panel.active .sp-total{color:var(--sp-gold-bright)}.sp-total-flash{position:absolute;top:0;right:0;bottom:0;left:0;font-size:32px;font-weight:700;opacity:0;pointer-events:none}.score-panel .sp-total.rainbow{color:transparent;background:linear-gradient(90deg,#ff595e,#ffca3a,#8ac926,#1982c4,#6a4c93,#ff595e);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:sp-rainbow-shift 2.4s linear infinite}@keyframes sp-rainbow-shift{0%{background-position:0% 50%}to{background-position:220% 50%}}.score-panel .sp-total.breathe{animation:sp-breathe 1.6s ease-in-out infinite}@keyframes sp-breathe{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.72}}.sp-bars{display:flex;flex-direction:column;gap:6px}.sp-bar-row{display:flex;align-items:center;gap:8px;font-size:11px}.sp-bar-name{width:16px;min-width:16px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);flex-shrink:0;cursor:help}.sp-bar-name .ic-occ{color:var(--sp-occ)}.sp-bar-name .ic-def{color:var(--sp-def)}.sp-bar-name .ic-cas{color:var(--sp-cas)}.sp-bar-track{flex:1;height:10px;background:#0006;border:1px solid rgba(156,163,175,.3);border-radius:2px;overflow:hidden}.sp-bar-fill{height:100%;width:0%;transition:width .3s ease}.sp-bar-occ{background:var(--sp-occ)}.sp-bar-def{background:var(--sp-def)}.sp-bar-cas{background:var(--sp-cas)}.sp-bar-val{width:32px;text-align:right;font-weight:600;color:var(--text);flex-shrink:0}.sp-bar-val.zero{color:var(--text-dim)}.sp-log{display:flex;flex-direction:column;gap:4px}.sp-log-title{background:#0006;border:1px solid var(--border);border-radius:2px;color:var(--text);padding:4px 8px;font-size:11px;text-align:left;cursor:pointer;font-family:SF Mono,Monaco,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp-log-title:hover{background:#ffd9661a;color:var(--sp-gold-bright)}.sp-log-scroll{max-height:120px;overflow-y:auto;font-family:SF Mono,Monaco,Consolas,monospace;font-size:10px;background:#0000004d;border:1px solid var(--border);border-radius:2px;padding:4px}.sp-log-scroll::-webkit-scrollbar{width:8px}.sp-log-scroll::-webkit-scrollbar-track{background:#00000040}.sp-log-scroll::-webkit-scrollbar-thumb{background:#00b9d273;border-radius:4px}.sp-log-scroll::-webkit-scrollbar-thumb:hover{background:#00b9d2b3}.sp-log-list{display:flex;flex-direction:column;gap:1px}.sp-log-item{padding:1px 4px;white-space:pre;color:var(--text)}.sp-log-pos{color:var(--sp-gold-bright)}.sp-log-neg{color:var(--sp-red-war)}.sp-log-neutral{color:var(--text-dim)}.sp-log-empty{text-align:center;color:var(--text-dim);padding:8px;font-style:italic}.player-panel{padding:12px 16px;border-bottom:1px solid var(--border)}.controls{padding:12px 16px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--border)}.controls .btn-row{display:flex;gap:8px}.controls .btn-row .btn{flex:1}.history-panel{flex:1;padding:12px 16px;overflow-y:auto;min-height:100px}.history-panel h4{font-size:12px;color:var(--text-dim);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.history-list{display:flex;flex-direction:column;gap:4px;font-size:13px;font-family:SF Mono,Monaco,Consolas,monospace}.history-item{padding:4px 8px;border-radius:4px;display:flex;justify-content:space-between}.history-item:hover{background:var(--bg-elev2)}.history-item .move-num{color:var(--text-dim)}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:var(--danger);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow);z-index:200;animation:slideDown .2s ease}@keyframes slideDown{0%{transform:translate(-50%,-100%);opacity:0}to{transform:translate(-50%);opacity:1}}.result-modal{min-width:420px}.result-modal .winner{font-size:28px;font-weight:700;margin:16px 0}.result-modal .winner.black-win{color:var(--text)}.result-modal .winner.white-win{color:var(--white-stone)}.result-modal .reason{color:var(--text-dim);margin-bottom:16px}.result-table{width:100%;border-collapse:collapse;margin:16px 0}.result-table th,.result-table td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--border)}.result-table th{text-align:center;color:var(--text-dim);font-weight:500;font-size:12px}.result-table td.label{text-align:left;color:var(--text-dim)}.result-table td.final{font-weight:700;font-size:18px}.hidden{display:none!important}.pzl-progress-card{margin:18px 14px;padding:14px;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;text-align:center}.pzl-progress-label{font-size:12px;color:var(--text-dim);margin-bottom:6px}.pzl-progress-value{font-size:30px;font-weight:700;color:var(--accent, #f5b840)}.pzl-type-card{margin:0 14px 14px;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px}.pzl-type{padding:12px 14px 4px;font-size:18px;font-weight:700}.pzl-diff{padding:0 14px 12px;font-size:13px;color:var(--text-dim)}.pzl-goal{margin:0 14px;padding:12px;font-size:13px;line-height:1.6;color:var(--text);background:var(--bg-elev);border:1px solid var(--border);border-radius:8px}.back-btn-row{padding:18px}.game-controls .btn:disabled,.back-btn-row .btn:disabled{opacity:.4;cursor:not-allowed}.topbar-status.solved{color:#59e5a5;font-weight:700}.pzl-match-row{padding:6px 12px;display:flex;gap:8px;align-items:center;justify-content:center;background:var(--bg-elev);border-top:1px solid var(--border);flex-shrink:0}.match-status-card{font-size:13px;color:var(--text-dim)}.pzl-hint-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.pzl-hint-dot.solved-hint{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:radial-gradient(circle,#59e5a5f2,#59e5a540);box-shadow:0 0 8px #59e5a5cc;animation:pzl-hint-pulse .9s ease-in-out infinite}@keyframes pzl-hint-pulse{0%,to{transform:scale(.85);opacity:.75}50%{transform:scale(1.1);opacity:1}}.lobby-screen{--accent: #e8b93f;--accent-hover: #f2cc54;--accent-deep: #a87f23;--war-red: #e05b3f;--war-green: #63c77f;--panel: #15180f;--panel-2: #1c1f16;--edge: #33372e;--line: #2a2e26;--gold-dim: #c2a65a;--ink: #f2efe7;--ink-dim: #9aa089;background:radial-gradient(1200px 520px at 50% -6%,rgba(232,185,63,.1),transparent 60%),radial-gradient(900px 500px at 100% 110%,rgba(224,91,63,.07),transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),linear-gradient(160deg,#0e100b,#101209);justify-content:flex-start;padding:26px 28px 28px;gap:22px}.lobby-screen .btn{background:var(--panel-2);border-color:var(--edge);color:var(--ink)}.lobby-screen .btn:hover:not(:disabled){border-color:var(--accent);background:#23270f}.lobby-screen .btn-primary{background:linear-gradient(180deg,var(--accent-hover),var(--accent-deep));border-color:var(--accent);color:#13140c;font-weight:700}.war-header{width:100%;max-width:1060px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--edge);border-left:4px solid var(--accent);background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:12px 18px;position:relative;overflow:hidden}.war-header:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(110deg,rgba(255,255,255,.02) 0 2px,transparent 2px 22px);pointer-events:none}.war-brand{display:flex;align-items:center;gap:14px;position:relative}.war-emblem{width:46px;height:46px;color:var(--accent);filter:drop-shadow(0 0 6px rgba(232,185,63,.35))}.war-brand-title{font-size:20px;font-weight:700;letter-spacing:2px}.war-brand-sub{font-size:11px;letter-spacing:3px;color:var(--gold-dim);text-transform:uppercase;margin-top:2px}.war-header-right{display:flex;align-items:center;gap:12px;position:relative}.war-stamp{font-size:11px;letter-spacing:2px;color:var(--war-green);border:1px solid color-mix(in srgb,var(--war-green) 40%,transparent);border-radius:999px;padding:3px 10px}.tight-btn{padding:6px 14px;font-size:13px}.lobby-content{flex:1;width:100%;max-width:1060px;margin:0 auto;display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:24px;min-height:0}.lobby-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.lobby-side{display:flex;flex-direction:column;gap:18px;width:400px;min-height:0;overflow-y:auto;max-height:calc(100vh - 150px);padding-right:2px}.cmd-panel{width:520px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--edge);position:relative;padding:16px 20px 18px;display:flex;flex-direction:column;gap:16px}.cmd-panel:before,.cmd-panel:after{content:"";position:absolute;width:12px;height:12px;pointer-events:none;border-color:var(--accent);border-style:solid}.cmd-panel:before{top:-1px;left:-1px;border-width:2px 0 0 2px}.cmd-panel:after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}.cmd-panel-head,.rail-head{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:8px}.cmd-title{font-size:13px;letter-spacing:2px;color:var(--ink);font-weight:600}.cmd-idx{font-size:11px;letter-spacing:1px;color:var(--accent);border:1px solid var(--edge);padding:1px 6px;font-variant-numeric:tabular-nums}.cmd-tag{margin-left:auto;font-size:10px;letter-spacing:2px;color:var(--gold-dim)}.lobby-stats{display:flex;gap:32px;padding:2px 4px}.lobby-stat{display:flex;flex-direction:column;gap:3px;position:relative}.lobby-stat .label{font-size:12px;color:var(--ink-dim)}.lobby-stat .value{font-size:24px;font-weight:700;letter-spacing:1px;color:var(--ink);font-variant-numeric:tabular-nums}.stat-led{width:9px;height:9px;border-radius:50%;position:absolute;top:4px;right:-14px}.led-online{background:var(--war-green);box-shadow:0 0 8px var(--war-green);animation:led-pulse 2.4s ease-in-out infinite}.led-matching{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:led-pulse 1.2s ease-in-out infinite}@keyframes led-pulse{0%,to{opacity:.55}50%{opacity:1}}.lobby-settings{border:1px solid var(--line);background:#0000002e;padding:12px}.lobby-settings-interior{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.lobby-settings-item{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:6px 4px;border-right:1px solid var(--line)}.lobby-settings-item:last-child{border-right:none}.lobby-settings-item .label{font-size:11px;letter-spacing:1px;color:var(--ink-dim)}.lobby-settings-item .value{font-size:15px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;min-height:22px}.lobby-rules{display:flex;flex-direction:column;gap:10px;padding:0 2px}.checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox input{position:absolute;opacity:0;width:0;height:0}.chk-track{width:42px;height:22px;border-radius:999px;background:var(--line);border:1px solid var(--edge);position:relative;transition:background .2s ease;flex-shrink:0}.chk-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#c9cdb8;transition:transform .2s ease,background .2s ease;box-shadow:0 1px 3px #0006}.checkbox input:checked+.chk-track{background:color-mix(in srgb,var(--accent) 60%,var(--line));border-color:var(--accent)}.checkbox input:checked+.chk-track .chk-knob{transform:translate(20px);background:var(--accent-hover)}.chk-label{font-size:13px;color:var(--ink)}.fog-hint{font-size:11px;color:var(--ink-dim);padding-left:52px;margin-top:-6px}#match-area{display:flex;justify-content:center}.cmd-match{width:100%;padding:14px;font-size:17px;letter-spacing:4px;position:relative;overflow:hidden;height:52px}.cmd-match .match-glyph{display:inline-block;margin-right:6px}.cmd-match:hover:not(:disabled){box-shadow:0 0 22px #e8b93f73;transform:translateY(-1px)}#match-status{width:100%;border:1px dashed var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel));color:var(--accent);letter-spacing:2px;display:flex;align-items:center;justify-content:center;gap:12px}.cmd-cancel{font-size:12px;letter-spacing:1px;color:var(--ink-dim);padding:4px 12px}.cmd-cancel:hover:not(:disabled){border-color:var(--war-red);color:var(--war-red)}.cmd-foot{text-align:center;font-size:12px;color:var(--ink-dim);letter-spacing:.5px}.lobby-leaderboard,.lobby-replays{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--edge);padding:14px 16px}.rail-head{margin-bottom:10px}.lb-me-banner{margin-bottom:8px;padding:6px 10px;text-align:center;font-size:13px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}.lb-row{display:grid;grid-template-columns:34px 1fr 52px 74px;align-items:center;gap:6px;padding:5px 6px;font-size:13px;border-radius:3px}.lb-row+.lb-row{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}.lb-row.lb-me{background:color-mix(in srgb,var(--accent) 14%,transparent)}.lb-rank{color:var(--gold-dim);font-variant-numeric:tabular-nums;font-weight:600}.lb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}.lb-rating{text-align:right;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.lb-wl{text-align:right;color:var(--ink-dim);font-size:12px}.replay-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:none;border-bottom:1px solid var(--line);padding:8px 4px;cursor:pointer;color:var(--ink);font-size:13px;transition:background .15s ease,padding-left .15s ease}.replay-item:last-child{border-bottom:none}.replay-item:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);padding-left:8px}.replay-item-match{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.3px}.replay-item-score{color:var(--ink-dim);font-variant-numeric:tabular-nums;font-size:12px}.replay-item-winner{color:var(--war-green);font-weight:600;font-size:12px}.replay-item-empty{color:var(--ink-dim);font-size:13px;padding:8px 2px}@media (max-width: 920px){.lobby-content{flex-direction:column;align-items:center;overflow-y:auto}.lobby-main{width:100%}.cmd-panel{width:100%;max-width:520px}.lobby-side{width:100%;max-width:520px;max-height:none;overflow-y:visible}.lobby-screen{justify-content:flex-start}}.modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;background:#0000008c;display:flex;align-items:center;justify-content:center}.modal-mask[hidden]{display:none}.modal-rules{width:min(560px,92vw);max-height:82vh;display:flex;flex-direction:column;overflow:hidden;background:#1b1f26;border:1px solid #3a3f4b;border-radius:10px;box-shadow:0 24px 60px #00000080}.modal-rules-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #333943;color:#e4e6eb;font-weight:700;letter-spacing:1px}.modal-rules-body{padding:14px 18px;overflow-y:auto;color:#c9cfda;font-size:14px;line-height:1.7}.modal-rules-body ol{margin-left:20px}.modal-rules-body li{margin-bottom:10px}.modal-rules-body li::marker{color:#d8cba2}