*,:before,:after{box-sizing:border-box}:root{--bg:#fff;--bg-card:#fff;--bg-soft:#f7f7f5;--bg-sidebar:#fff;--paper-dot:#ececec;--text:#000;--text-muted:#6b6b6b;--border:#000;--border-muted:#d8d8d8;--accent:#e60023;--accent-hover:#b8001c;--accent-soft:#ffe5e8;--green:#1f8a4a;--red:#e60023;--stroke-thin:1.5px;--stroke:2px;--stroke-bold:2.5px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:14px;--radius-2xl:18px;--radius-pill:999px;--shadow-sticker:4px 4px 0 var(--text);--shadow-sticker-lg:6px 6px 0 var(--text);--shadow-modal:8px 8px 0 var(--text);--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-back:cubic-bezier(.34, 1.56, .64, 1);--dur-fast:.15s;--dur-med:.25s;--font:"Bricolage Grotesque", system-ui, "Segoe UI", Roboto, sans-serif;--font-display:"Fraunces", "Bricolage Grotesque", Georgia, serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace}[data-theme=dark]{--bg:#0a0a0a;--bg-card:#0a0a0a;--bg-soft:#1a1a1a;--bg-sidebar:#0a0a0a;--paper-dot:#222;--text:#fff;--text-muted:#a0a0a0;--border:#fff;--border-muted:#333;--accent:#f34;--accent-hover:#f56}body{background:radial-gradient(circle, var(--paper-dot) 1px, transparent 1.2px) 0 0 / 18px 18px, var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;margin:0;font-weight:500}button{color:inherit;font-family:inherit}#root{justify-content:center;align-items:center;min-height:100vh;display:flex}.app{justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex}.page-layout{width:100%;min-height:100vh;display:flex}.btn-primary{background:var(--accent);color:#fff;border:var(--stroke-bold) solid var(--text);border-radius:var(--radius-lg);font-family:var(--font);cursor:pointer;box-shadow:var(--shadow-sticker);transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), background var(--dur-fast);justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:1rem;font-weight:700;display:inline-flex}.btn-primary:hover{box-shadow:var(--shadow-sticker-lg);background:var(--accent-hover);transform:translate(-2px,-2px)}.btn-primary:active{box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:var(--shadow-sticker);transform:none}.btn-outline{color:var(--text);border:var(--stroke-bold) solid var(--text);border-radius:var(--radius-lg);font-family:var(--font);cursor:pointer;box-shadow:var(--shadow-sticker);transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);background:0 0;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:1rem;font-weight:700;display:inline-flex}.btn-outline:hover{box-shadow:var(--shadow-sticker-lg);transform:translate(-2px,-2px)}.btn-outline:active{box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.btn-ghost{border:var(--stroke) solid var(--text);border-radius:var(--radius-md);font-family:var(--font);color:var(--text);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast), color var(--dur-fast);background:0 0;padding:6px 14px;font-size:.78rem;font-weight:600}.btn-ghost:hover{background:var(--text);color:var(--bg)}.btn-nav{border:var(--stroke) solid var(--text);background:var(--bg);width:36px;height:36px;color:var(--text);cursor:pointer;transition:background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:1rem;display:inline-flex}.btn-nav:hover:not(:disabled){background:var(--bg-soft);transform:translateY(-1px)}.btn-nav:disabled{opacity:.3;cursor:not-allowed}.ec-toggle{--w:44px;--h:22px;--pad:3px;width:var(--w);height:var(--h);border:var(--stroke) solid var(--text);border-radius:var(--radius-pill);padding:var(--pad);cursor:pointer;transition:border-color var(--dur-fast);background:0 0;flex-shrink:0;align-items:center;display:inline-flex}.ec-toggle .knob{width:calc(var(--h) - var(--pad) * 2 - 4px);height:calc(var(--h) - var(--pad) * 2 - 4px);background:var(--text);transform:translateX(calc(var(--w) - var(--h)));transition:transform .22s var(--ease-back), background var(--dur-fast);border-radius:50%}.ec-toggle[aria-pressed=false]{border-color:var(--text-muted)}.ec-toggle[aria-pressed=false] .knob{background:var(--text-muted);transform:translate(0)}.ec-toggle:hover[aria-pressed=true] .knob{background:var(--accent)}.modal-overlay{z-index:100;background:#0006;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg);border:3px solid var(--text);border-radius:var(--radius-2xl);box-shadow:var(--shadow-modal);width:min(540px,100%);max-height:90vh;position:relative;overflow:hidden}.modal-close-btn{z-index:1;border:var(--stroke) solid var(--text);background:var(--bg);width:36px;height:36px;color:var(--text);cursor:pointer;transition:background var(--dur-fast), color var(--dur-fast);border-radius:50%;padding:0;font-size:1.4rem;line-height:1;position:absolute;top:14px;right:14px}.modal-close-btn:hover{background:var(--accent);color:#fff}.start-screen{overscroll-behavior:contain;flex-direction:column;gap:22px;width:100%;max-height:90vh;padding:32px 32px 28px;display:flex;overflow-y:auto}.start-title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text);margin:0;font-size:2.6rem;font-style:italic;font-weight:700;line-height:1}.start-title-accent{color:var(--accent)}.start-subtitle{color:var(--text-muted);margin:0;font-size:1rem;font-weight:500}.selection-title{text-transform:uppercase;letter-spacing:.1em;color:var(--text);align-items:center;gap:10px;margin-bottom:8px;font-size:.72rem;font-weight:700;display:flex}.selection-title:after{content:"";background:var(--text);flex:1;height:2px}.mode-cards{flex-wrap:wrap;gap:10px;width:100%;display:flex}.mode-card{background:var(--bg);border:var(--stroke-bold) solid var(--text);border-radius:var(--radius-lg);cursor:pointer;color:var(--text);font-family:var(--font);transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast);flex-direction:column;flex:120px;justify-content:center;align-items:center;gap:6px;padding:16px 12px;font-weight:600;display:flex}.mode-card:hover:not(:disabled){box-shadow:3px 3px 0 var(--text);transform:translate(-1px,-1px)}.mode-card.selected{border-color:var(--accent);box-shadow:3px 3px 0 var(--accent);color:var(--accent)}.mode-card:disabled{opacity:.4;cursor:not-allowed}.mode-desc{color:var(--text-muted);font-size:.78rem;font-weight:500}.mode-card.selected .mode-desc{color:var(--accent)}.selection-cards{flex-direction:column;gap:8px;width:100%;display:flex}.selection-card{background:var(--bg);border:var(--stroke-bold) solid var(--text);border-radius:var(--radius-lg);cursor:pointer;color:var(--text);font-family:var(--font);transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast);align-items:center;gap:12px;padding:12px 14px;display:flex}.selection-card:hover{box-shadow:3px 3px 0 var(--text);transform:translate(-1px,-1px)}.selection-card.selected{border-color:var(--accent);box-shadow:3px 3px 0 var(--accent)}.selection-label{flex:none;min-width:76px;font-size:1rem;font-weight:700}.selection-desc{color:var(--text-muted);flex:1;font-size:.82rem;font-weight:500}.selection-elo{font-family:var(--font-mono);color:var(--text-muted);border:var(--stroke) solid var(--text);border-radius:var(--radius-pill);padding:2px 9px;font-size:.72rem;font-weight:600}.selection-card.selected .selection-elo{color:var(--accent);border-color:var(--accent)}.start-btn{width:100%;margin-top:4px;font-size:1.05rem}.move-history{background:var(--bg);border:var(--stroke-bold) solid var(--text);border-radius:var(--radius-xl);min-height:260px;max-height:340px;box-shadow:var(--shadow-sticker);flex-direction:column;flex:1 1 0;padding:12px 14px;display:flex}.move-history-title{border-bottom:var(--stroke) solid var(--text);color:var(--text);text-transform:uppercase;letter-spacing:.1em;align-items:center;gap:8px;margin:0;padding-bottom:8px;font-size:.72rem;font-weight:700;display:flex}.move-history-title:before{content:"✎";color:var(--accent);font-size:.95rem}.move-history-list{flex-direction:column;flex:1;gap:1px;padding:8px 0;display:flex;overflow-y:auto}.move-history-empty{color:var(--text-muted);margin:0;font-size:.85rem;font-style:italic}.move-row{font-family:var(--font-mono);grid-template-columns:32px 1fr 1fr;padding:3px 4px;font-size:.86rem;display:grid}.move-number{color:var(--text-muted)}.move-white{color:var(--text);font-weight:600}.move-black{color:var(--text-muted)}.move-active{font-weight:700;color:var(--accent)!important}.move-history-nav{border-top:var(--stroke) solid var(--text);justify-content:center;align-items:center;gap:6px;padding-top:8px;display:flex}.move-nav-btn{width:36px;height:36px;color:var(--text);background:var(--bg);border:var(--stroke) solid var(--text);cursor:pointer;transition:background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:1rem;display:flex}.move-nav-btn:hover:not(:disabled){background:var(--bg-soft);transform:translateY(-1px)}.move-nav-btn:disabled{opacity:.3;cursor:not-allowed}.captured-tray{align-items:center;gap:8px;min-height:28px;padding:4px 8px;display:flex}.captured-icons{letter-spacing:1px;color:var(--text);flex-wrap:wrap;gap:1px;font-size:1.1rem;line-height:1;display:flex}.captured-advantage{font-family:var(--font-mono);color:var(--text);border:var(--stroke) solid var(--text);border-radius:var(--radius-pill);padding:1px 8px;font-size:.7rem;font-weight:700}.hint-panel{background:var(--bg);border:var(--stroke-bold) solid var(--text);border-radius:var(--radius-xl);box-shadow:var(--shadow-sticker);flex-direction:column;gap:10px;height:auto;min-height:420px;padding:14px 16px;display:flex}.hint-status{color:var(--text);text-align:center;font-size:.92rem;font-weight:600}.hint-divider{border-bottom:var(--stroke) solid var(--text);height:0;margin:0}.hint-header{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.hint-title{min-width:80px;color:var(--text);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;flex:1;align-items:center;gap:8px;margin:0;font-size:.7rem;font-weight:700;display:flex}.hint-title:before{content:"★";color:var(--accent);font-size:.85rem}.hint-title:after{content:"";background:var(--text);flex:1;min-width:14px;height:2px}.hint-toggle-row{font-family:var(--font);color:var(--text);white-space:nowrap;align-items:center;gap:8px;font-size:.78rem;font-weight:600;display:inline-flex}.hint-show-btn{padding:4px 12px;font-size:.72rem}.hint-tag{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);border:var(--stroke) solid var(--accent);border-radius:var(--radius-pill);background:0 0;align-self:flex-start;padding:2px 10px;font-size:.7rem;font-weight:700;display:inline-block}.hint-description{color:var(--text);margin:0;font-size:.95rem;font-weight:500;line-height:1.45}.hint-score{font-size:.78rem;font-weight:700;font-family:var(--font-mono);border:var(--stroke) solid currentColor;border-radius:var(--radius-pill);background:0 0;align-self:flex-start;padding:2px 10px}.hint-score--great,.hint-score--good{color:var(--green)}.hint-score--neutral{color:var(--text-muted)}.hint-score--bad{color:var(--accent)}.hint-thinking{color:var(--text-muted);font-size:.88rem;font-style:italic}.hint-line-details{border:var(--stroke) solid var(--text);border-radius:var(--radius-md);background:var(--bg-soft);margin-top:4px;padding:8px 12px}.hint-line-summary{text-transform:uppercase;letter-spacing:.08em;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:.74rem;font-weight:700;list-style:none}.hint-line-summary::-webkit-details-marker{display:none}.hint-line-summary:before{content:"▶ ";color:var(--accent);font-size:.65rem}details[open] .hint-line-summary:before{content:"▼ "}.hint-line{color:var(--text);font-size:.84rem;font-family:var(--font-mono);word-break:break-word;margin:6px 0 0;line-height:1.5}.hint-explanation-wrapper{min-height:52px}.hint-explanation{color:var(--text);margin:0;font-size:.9rem;font-weight:500;line-height:1.5}.hint-explanation--loading{color:var(--text-muted);font-size:.85rem;font-style:italic}.game-layout{align-items:flex-start;width:100%;height:100vh;display:flex}@media screen and (width<=680px){.game-layout{flex-wrap:wrap}}.board-column{flex-direction:column;flex:1 1 0;min-width:380px;max-width:760px;padding:22px;display:flex}.board-area{background:var(--bg);border:var(--stroke-bold) solid var(--text);border-radius:var(--radius-md);box-shadow:var(--shadow-sticker);flex-direction:column;gap:4px;padding:6px 8px;display:flex;position:relative}.checkmate-overlay{border-radius:var(--radius-md);background:#ffffffd1;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.checkmate-text{font-family:var(--font-display);letter-spacing:-.01em;color:var(--accent);text-shadow:3px 3px 0 var(--text), 0 0 30px #e6002359;animation:checkmate-in .4s var(--ease-out) forwards;font-size:clamp(2rem,8vw,3.5rem);font-style:italic;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}[data-theme=dark] .checkmate-overlay{background:#000000d1}.analyse-bar{flex-direction:column;flex:1 1 0;gap:16px;min-width:240px;max-width:400px;height:100vh;padding:22px 22px 22px 8px;display:flex;overflow-y:auto}@keyframes checkmate-in{0%{opacity:0;transform:translate(-50%,-50%)scale(1.4)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes king-tremble{0%{transform:translate(0)rotate(0)}10%{transform:translate(-3px,-2px)rotate(-2deg)}20%{transform:translate(3px,1px)rotate(1deg)}30%{transform:translate(-2px,3px)rotate(2deg)}40%{transform:translate(2px,-1px)rotate(-1deg)}50%{transform:translate(-3px,2px)rotate(1.5deg)}60%{transform:translate(3px,-2px)rotate(-2deg)}70%{transform:translate(-1px,3px)rotate(1deg)}80%{transform:translate(2px,1px)rotate(-1.5deg)}90%{transform:translate(-2px,-3px)rotate(2deg)}to{transform:translate(0)rotate(0)}}.board-theme-picker{flex-direction:column;gap:10px;display:flex}.board-theme-title{text-transform:uppercase;letter-spacing:.1em;color:var(--text);align-items:center;gap:8px;font-size:.7rem;font-weight:700;display:flex}.board-theme-title:after{content:"";background:var(--text);flex:1;height:2px}.board-theme-swatches{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.board-theme-swatch{background:var(--bg);border:var(--stroke) solid var(--text);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font);transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast);flex-direction:column;align-items:center;gap:6px;padding:8px 4px;display:flex}.board-theme-swatch:hover{box-shadow:2px 2px 0 var(--text);transform:translate(-1px,-1px)}.board-theme-swatch.selected{border-color:var(--accent);box-shadow:2px 2px 0 var(--accent)}.swatch-grid{border-radius:var(--radius-sm);border:1.5px solid var(--text);grid-template-columns:1fr 1fr;width:32px;height:32px;display:grid;overflow:hidden}.swatch-grid div{width:100%;height:100%}.swatch-label{color:var(--text-muted);white-space:nowrap;font-size:.66rem;font-weight:600}.board-theme-swatch.selected .swatch-label{color:var(--accent)}.main-menu{background:var(--bg-sidebar);border-right:var(--stroke-bold) solid var(--text);flex-direction:column;flex-shrink:0;align-self:stretch;gap:2px;width:240px;min-height:100vh;padding:14px 12px;display:flex}.main-menu-brand{border:none;border-bottom:var(--stroke) solid var(--text);cursor:pointer;text-align:left;font-family:var(--font);color:var(--text);background:0 0;align-items:center;gap:10px;margin-bottom:10px;padding:4px 6px 12px;display:flex}.main-menu-logo{border:var(--stroke-bold) solid var(--text);background:var(--accent);color:#fff;width:38px;height:38px;box-shadow:3px 3px 0 var(--text);transition:transform var(--dur-fast) var(--ease-back);border-radius:10px;flex-shrink:0;place-items:center;font-size:1.25rem;line-height:1;display:grid;transform:rotate(-3deg)}.main-menu-brand:hover .main-menu-logo{transform:rotate(-6deg)translate(-1px,-1px)}.main-menu-brand-text{flex-direction:column;line-height:1.05;display:flex}.main-menu-brand-name{font-family:var(--font-display);letter-spacing:-.02em;font-size:1.05rem;font-style:italic;font-weight:700}.main-menu-brand-accent{color:var(--accent)}.main-menu-brand-tag{color:var(--text-muted);margin-top:2px;font-size:.65rem;font-weight:500}.main-menu-cta{width:100%;margin:0 0 14px;padding:10px 14px;font-size:.95rem}.main-menu-group{color:var(--text);text-transform:uppercase;letter-spacing:.12em;align-items:center;gap:8px;padding:12px 8px 6px;font-size:.66rem;font-weight:700;display:flex}.main-menu-group:after{content:"";background:var(--text);flex:1;height:2px}.main-menu-item{width:100%;font-family:var(--font);color:var(--text);border-radius:var(--radius-md);text-align:left;cursor:pointer;transition:background var(--dur-fast), color var(--dur-fast);background:0 0;border:none;align-items:center;gap:12px;padding:9px 10px;font-size:.92rem;font-weight:600;display:flex}.main-menu-item:hover:not(:disabled){background:#0000000a}[data-theme=dark] .main-menu-item:hover:not(:disabled){background:#ffffff0f}.main-menu-item:disabled{color:var(--text-muted);cursor:not-allowed;opacity:.7}.main-menu-icon{flex-shrink:0;place-items:center;width:20px;display:grid}.main-menu-badge{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;border:var(--stroke) solid var(--accent);color:var(--accent);border-radius:var(--radius-pill);margin-left:auto;padding:0 8px;font-size:.62rem;font-weight:700;line-height:1.4}.main-menu-item--active{background:var(--bg);border:var(--stroke) solid var(--text);color:var(--text);box-shadow:3px 3px 0 var(--accent);margin:2px 0;font-weight:700}.main-menu-item--active:hover:not(:disabled){background:var(--bg);box-shadow:4px 4px 0 var(--accent);transform:translate(-1px,-1px)}.main-menu-item--active .main-menu-icon{color:var(--accent)}.main-menu-item--muted{color:var(--text-muted);padding:7px 10px;font-size:.85rem;font-weight:500}.main-menu-item--muted:hover:not(:disabled){color:var(--text)}.main-menu-board{padding:8px 10px 4px}.main-menu-spacer{flex:1;min-height:12px}.main-menu-footer{border-top:var(--stroke) solid var(--text);align-items:center;gap:10px;margin-top:8px;padding-top:10px;display:flex}.main-menu-avatar{border:var(--stroke) solid var(--text);background:var(--bg);width:32px;height:32px;color:var(--text);font-size:.85rem;font-weight:700;font-family:var(--font);border-radius:50%;flex-shrink:0;place-items:center;display:grid}.main-menu-who{flex-direction:column;line-height:1.1;display:flex}.main-menu-who-name{color:var(--text);font-size:.78rem;font-weight:700}.main-menu-who-meta{font-family:var(--font-mono);color:var(--text-muted);font-size:.65rem;font-weight:500}