:root{--bg-primary: #0f1117;--bg-secondary: #171b26;--bg-card: #1e2330;--bg-card-hover: #252b3b;--border-subtle: #2e364a;--border-gold: #c9a24d;--accent-gold: #e0b85c;--accent-gold-dim: rgba(224, 184, 92, .16);--accent-emerald: #10b981;--accent-emerald-dim: rgba(16, 185, 129, .18);--accent-cyan: #06b6d4;--accent-cyan-dim: rgba(6, 182, 212, .2);--accent-crimson: #ef4444;--accent-crimson-dim: rgba(239, 68, 68, .2);--text-primary: #f3f4f6;--text-secondary: #9ca3af;--text-muted: #6b7280;--board-wood-outer: #261e18;--board-wood-inner: #33271e;--board-line: #b89352;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);background-image:radial-gradient(circle at 15% 15%,rgba(201,162,77,.06) 0%,transparent 45%),radial-gradient(circle at 85% 85%,rgba(6,182,212,.05) 0%,transparent 45%);color:var(--text-primary);font-family:var(--font-sans);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}.app-shell{max-width:1400px;margin:0 auto;padding:1rem 1.5rem 2.5rem;display:flex;flex-direction:column;gap:1.25rem}.app-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:.85rem 1.25rem;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:14px;box-shadow:0 8px 24px #00000040}.brand-group{display:flex;align-items:center;gap:.85rem}.brand-logo{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#2b2318,#1a1612);border:1px solid var(--border-gold);display:flex;align-items:center;justify-content:center;color:var(--accent-gold);flex-shrink:0}.brand-title{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.brand-subtitle{font-size:.8rem;color:var(--text-secondary)}.nav-tabs{display:flex;gap:.5rem;background:var(--bg-primary);padding:.3rem;border-radius:10px;border:1px solid var(--border-subtle)}.nav-tab{display:flex;align-items:center;gap:.45rem;padding:.5rem .95rem;border-radius:7px;border:none;background:transparent;color:var(--text-secondary);font-size:.875rem;font-weight:600;transition:all .15s ease}.nav-tab:hover{color:var(--text-primary);background:#ffffff0a}.nav-tab.active{background:var(--bg-card);color:var(--accent-gold);box-shadow:0 2px 8px #00000040}.nav-badge{background:var(--accent-gold-dim);color:var(--accent-gold);border:1px solid rgba(224,184,92,.35);font-size:.72rem;padding:.05rem .45rem;border-radius:999px;font-family:var(--font-mono)}.play-layout{display:grid;grid-template-columns:330px minmax(420px,1fr) 340px;gap:1.25rem;align-items:start}@media(max-width:1180px){.play-layout{grid-template-columns:1fr 1fr}.board-column{grid-column:1 / -1;order:-1}}@media(max-width:760px){.play-layout{grid-template-columns:1fr}.app-shell{padding:.75rem}}.panel-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:14px;padding:1.1rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 8px 24px #0003}.panel-title{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);display:flex;align-items:center;justify-content:space-between;gap:.5rem}.control-group{display:flex;flex-direction:column;gap:.4rem}.control-label{font-size:.78rem;font-weight:600;color:var(--text-secondary)}.segmented-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.35rem;background:var(--bg-primary);padding:.25rem;border-radius:9px;border:1px solid var(--border-subtle)}.seg-btn{padding:.45rem .5rem;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-secondary);font-size:.78rem;font-weight:600;text-align:center;transition:all .15s ease}.seg-btn:hover{color:var(--text-primary)}.seg-btn.active{background:var(--bg-card);color:var(--accent-gold);border-color:#e0b85c59}.difficulty-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.diff-btn{padding:.5rem .65rem;border-radius:8px;border:1px solid var(--border-subtle);background:var(--bg-primary);color:var(--text-secondary);text-align:left;transition:all .15s ease;display:flex;flex-direction:column;gap:.1rem}.diff-btn:hover{border-color:#4b5563;color:var(--text-primary)}.diff-btn.active{background:var(--accent-gold-dim);border-color:var(--accent-gold);color:var(--text-primary)}.diff-btn-name{font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:space-between}.diff-btn.active .diff-btn-name{color:var(--accent-gold)}.diff-btn-sub{font-size:.68rem;color:var(--text-secondary)}.action-row{display:flex;gap:.5rem}.btn-primary{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.6rem .9rem;border-radius:8px;border:1px solid var(--border-gold);background:linear-gradient(135deg,#d4af37,#b48a28);color:#111318;font-weight:700;font-size:.85rem;transition:filter .15s ease,transform .1s ease}.btn-primary:hover:not(:disabled){filter:brightness(1.08)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem .85rem;border-radius:8px;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);font-weight:600;font-size:.82rem;transition:all .15s ease}.btn-secondary:hover:not(:disabled){background:var(--bg-card-hover);border-color:#4b5563}.btn-secondary:disabled{opacity:.45;cursor:not-allowed}.btn-danger{border-color:#ef444466;color:#fca5a5}.btn-danger:hover:not(:disabled){background:#ef444426;border-color:var(--accent-crimson)}.player-card{padding:.85rem;border-radius:10px;background:var(--bg-primary);border:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:.6rem;transition:all .2s ease}.player-card.active-turn{border-color:var(--accent-gold);box-shadow:0 0 0 1px #e0b85c4d,0 4px 16px #e0b85c1f;background:linear-gradient(180deg,rgba(224,184,92,.07) 0%,var(--bg-primary) 100%)}.player-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.player-identity{display:flex;align-items:center;gap:.6rem}.stone-indicator{width:24px;height:24px;border-radius:50%;flex-shrink:0}.stone-indicator.white{background:radial-gradient(circle at 35% 30%,#fff,#d1d5db 70%,#9ca3af);border:2px solid #e5e7eb;box-shadow:0 2px 5px #0006}.stone-indicator.black{background:radial-gradient(circle at 35% 30%,#4b5563,#18181b 70%,#09090b);border:2px solid #a1a1aa;box-shadow:0 2px 5px #0009}.player-name{font-weight:700;font-size:.92rem}.player-role-tag{font-size:.72rem;color:var(--text-secondary)}.phase-pill{font-size:.7rem;font-weight:700;padding:.18rem .55rem;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}.phase-pill.phase-1{background:#3b82f626;color:#93c5fd;border:1px solid rgba(59,130,246,.35)}.phase-pill.phase-2{background:var(--accent-emerald-dim);color:#6ee7b7;border:1px solid rgba(16,185,129,.35)}.phase-pill.phase-3{background:var(--accent-cyan-dim);color:#67e8f9;border:1px solid var(--accent-cyan);animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 #06b6d466}50%{box-shadow:0 0 10px 2px #06b6d459}}.player-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;text-align:center}.metric-box{background:var(--bg-secondary);padding:.35rem .4rem;border-radius:6px;border:1px solid rgba(255,255,255,.04)}.metric-val{font-family:var(--font-mono);font-size:.95rem;font-weight:700;color:var(--text-primary)}.metric-lbl{font-size:.66rem;color:var(--text-secondary);text-transform:uppercase}.hand-tokens{display:flex;gap:.28rem;flex-wrap:wrap;min-height:16px;align-items:center}.mini-token{width:13px;height:13px;border-radius:50%}.mini-token.white{background:radial-gradient(circle at 30% 30%,#fff,#cbd5e1);border:1px solid #94a3b8}.mini-token.black{background:radial-gradient(circle at 30% 30%,#52525b,#18181b);border:1px solid #a1a1aa}.board-column{display:flex;flex-direction:column;gap:.9rem;align-items:center}.status-banner{width:100%;padding:.85rem 1.1rem;border-radius:12px;background:var(--bg-secondary);border:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:.35rem;box-shadow:0 6px 20px #00000038}.status-banner.capture-mode{border-color:var(--accent-crimson);background:linear-gradient(90deg,rgba(239,68,68,.14),var(--bg-secondary))}.status-banner.flying-mode{border-color:var(--accent-cyan);background:linear-gradient(90deg,rgba(6,182,212,.14),var(--bg-secondary))}.status-banner.gameover-mode{border-color:var(--accent-gold);background:linear-gradient(90deg,rgba(224,184,92,.18),var(--bg-secondary))}.status-headline{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.status-title{font-size:1.02rem;font-weight:700;display:flex;align-items:center;gap:.55rem}.status-instruction{font-size:.85rem;color:var(--text-secondary)}.invalid-move-alert{width:100%;padding:.65rem .95rem;border-radius:10px;background:#ef444429;border:1px solid var(--accent-crimson);color:#fecaca;font-size:.84rem;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:.75rem}.board-frame{position:relative;width:100%;max-width:600px;aspect-ratio:1 / 1;background:radial-gradient(circle at 50% 50%,var(--board-wood-inner) 0%,var(--board-wood-outer) 100%);border:3px solid #6b5335;border-radius:18px;box-shadow:0 20px 50px #0000008c,inset 0 0 32px #0000008c;padding:0;-webkit-user-select:none;user-select:none;overflow:hidden}.board-svg{width:100%;height:100%;display:block}.board-points-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.board-point-btn{position:absolute;transform:translate(-50%,-50%);width:9.5%;height:9.5%;border-radius:50%;border:none;background:transparent;pointer-events:auto;display:flex;align-items:center;justify-content:center;transition:transform .15s ease;padding:0}.board-point-btn:focus-visible{outline:2px solid var(--accent-gold);outline-offset:3px}.board-point-btn:hover{transform:translate(-50%,-50%) scale(1.08)}.point-coord-tag{position:absolute;bottom:-15px;right:-12px;font-family:var(--font-mono);font-size:.64rem;font-weight:700;color:#ebd5b3c7;background:#0f1117bf;padding:0 3.5px;border-radius:4px;pointer-events:none;line-height:1.25}.board-piece{width:82%;height:82%;border-radius:50%;position:relative;transition:all .18s cubic-bezier(.22,1,.36,1)}.board-piece.white{background:radial-gradient(circle at 32% 28%,#fff,#e5e7eb 58%,#9ca3af);border:2.5px solid #f9fafb;box-shadow:0 5px 12px #000000a6,inset 0 -3px 6px #00000040,inset 0 2px 4px #ffffffe6}.board-piece.black{background:radial-gradient(circle at 32% 28%,#52525b,#18181b 62%,#09090b);border:2.5px solid #a1a1aa;box-shadow:0 5px 12px #000c,inset 0 -3px 6px #0009,inset 0 2px 4px #ffffff38}.board-piece.selected{transform:scale(1.14);box-shadow:0 0 0 4px var(--accent-gold),0 0 18px var(--accent-gold),0 6px 14px #000000b3}.board-piece.in-mill:after{content:"";position:absolute;top:18%;right:18%;bottom:18%;left:18%;border-radius:50%;border:2px solid rgba(224,184,92,.85)}.board-piece.capturable{box-shadow:0 0 0 4px var(--accent-crimson),0 0 20px #ef4444d9;animation:pulseCapture 1.1s infinite}@keyframes pulseCapture{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.board-piece.protected-mill{opacity:.72}.vacant-dot{width:28%;height:28%;border-radius:50%;background:#d4af37;border:2px solid #261e18;transition:all .15s ease}.board-point-btn:hover .vacant-dot{transform:scale(1.35);background:#fde047}.legal-dest-ring{width:58%;height:58%;border-radius:50%;border:3px solid var(--accent-emerald);background:#10b98147;box-shadow:0 0 12px #10b981a6}.legal-dest-ring.flying-dest{border-color:var(--accent-cyan);background:#06b6d447;box-shadow:0 0 14px #06b6d4bf}.draw-tracker-grid{display:flex;flex-direction:column;gap:.65rem}.tracker-row{display:flex;flex-direction:column;gap:.25rem}.tracker-header{display:flex;justify-content:space-between;font-size:.76rem;color:var(--text-secondary)}.tracker-val{font-family:var(--font-mono);font-weight:700;color:var(--text-primary)}.progress-track{height:7px;background:var(--bg-primary);border-radius:999px;overflow:hidden;border:1px solid var(--border-subtle)}.progress-fill{height:100%;border-radius:999px;transition:width .2s ease}.move-log-container{max-height:340px;overflow-y:auto;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:9px;padding:.5rem;display:flex;flex-direction:column;gap:.3rem}.move-row{display:flex;align-items:center;justify-content:space-between;padding:.35rem .55rem;border-radius:6px;font-size:.78rem;background:#ffffff05}.move-row:nth-child(odd){background:#ffffff0a}.move-notation{font-family:var(--font-mono);font-weight:700;color:var(--text-primary)}.move-capture-badge{background:var(--accent-crimson-dim);color:#fca5a5;padding:.05rem .4rem;border-radius:4px;font-size:.68rem;font-weight:700}.move-fly-badge{background:var(--accent-cyan-dim);color:#67e8f9;padding:.05rem .4rem;border-radius:4px;font-size:.68rem;font-weight:700}.analytics-container{display:flex;flex-direction:column;gap:1.25rem}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.kpi-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:12px;padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.25rem}.kpi-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);font-weight:600}.kpi-value{font-size:1.65rem;font-weight:800;font-family:var(--font-mono);color:var(--accent-gold)}.kpi-sub{font-size:.76rem;color:var(--text-secondary)}.difficulty-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1rem}.diff-stat-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:14px;padding:1.15rem;display:flex;flex-direction:column;gap:.85rem}.diff-stat-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--border-subtle);padding-bottom:.65rem}.elo-badge{background:var(--accent-gold-dim);border:1px solid rgba(224,184,92,.4);color:var(--accent-gold);font-family:var(--font-mono);font-size:.8rem;font-weight:700;padding:.2rem .6rem;border-radius:8px}.winrate-bar-stack{height:10px;border-radius:999px;background:var(--bg-primary);display:flex;overflow:hidden;border:1px solid var(--border-subtle)}.bar-seg-win{background:var(--accent-emerald)}.bar-seg-draw{background:var(--accent-gold)}.bar-seg-loss{background:var(--accent-crimson)}.data-table-wrapper{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:.84rem}.data-table th,.data-table td{padding:.65rem .8rem;text-align:left;border-bottom:1px solid var(--border-subtle)}.data-table th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);background:#0003}.data-table tr:hover td{background:#ffffff05}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:100}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-gold);border-radius:16px;max-width:820px;width:100%;max-height:90vh;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.1rem;box-shadow:0 24px 64px #000000a6}.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.1rem}.rule-block{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:12px;padding:1.2rem;display:flex;flex-direction:column;gap:.6rem}.rule-block h3{color:var(--accent-gold);font-size:1rem;display:flex;align-items:center;gap:.5rem}.rule-block p,.rule-block li{font-size:.88rem;color:var(--text-secondary)}.rule-block ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:.35rem}