:root{--bg:#f6f4ef;--fg:#1f2421;--accent:#2f5d46;--muted:#6b716d;--card:#fff;--line:#d9d5cb;--warn:#fff3cd;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0}#app{max-width:42rem;margin:0 auto;padding:0 1rem 3rem}header{justify-content:space-between;align-items:center;padding:1rem 0;display:flex}header h1{margin:0;font-size:1.4rem}header h1 a{color:inherit;text-decoration:none}nav{align-items:center;gap:1rem;display:flex}a{color:var(--accent)}h2{margin:1.2rem 0 .4rem;font-size:1.1rem}button{font:inherit;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;border-radius:6px;padding:.45rem .9rem}button.secondary{color:var(--accent);background:0 0}button.link{color:var(--accent);background:0 0;border:0;padding:0;text-decoration:underline}button:disabled{opacity:.6;cursor:default}input,select{font:inherit;border:1px solid var(--line);border-radius:6px;max-width:100%;padding:.4rem}label{margin:.6rem 0;display:block}label.check{align-items:center;gap:.4rem;display:flex}.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1rem 1.2rem}.dev-hint{background:var(--warn);border-radius:6px;padding:.5rem .7rem;font-size:.9rem}.banner{background:var(--warn);border:1px solid #e6d58a;border-radius:6px;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.5rem 0;padding:.5rem .8rem;display:flex}.update-banner{margin-top:.5rem}.toolbar{flex-wrap:wrap;gap:.5rem;margin:.5rem 0;display:flex}.rows{margin:0;padding:0;list-style:none}.rows li{background:var(--card);border:1px solid var(--line);border-radius:6px;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.4rem;padding:.6rem .8rem;display:flex}.rows li .meta{color:var(--muted);flex:1}.error{color:#9b1c1c}.modal-overlay{background:#0006;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal{background:var(--card);border-radius:8px;width:100%;max-width:26rem;max-height:90vh;padding:1rem 1.4rem;overflow:auto}.modal h2{margin-top:0}.chess-board{width:100%;max-width:40rem;margin:0 auto}.chess-board .board-frame{border-radius:4px;line-height:0;position:relative;overflow:hidden;box-shadow:0 2px 8px #00000059}.chess-board svg.board{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:auto;display:block}.chess-board[data-locked=false] g.piece{cursor:grab}.chess-board .last-move{fill:#ffdd0061}.chess-board .draft-move{fill:#50be5a66}.chess-board .selected{fill:#288cff73}.chess-board .legal-dot{fill:#14141447;pointer-events:none}.chess-board .legal-dot.capture{fill:none;stroke:#1414144d;stroke-width:9px}.chess-board .coord{pointer-events:none;font-family:system-ui,sans-serif}.chess-board g.piece{pointer-events:none}.chess-board[data-locked=true] svg.board,.chess-board[data-locked=true] g.piece{cursor:default}.chess-board .captured{align-items:center;gap:1px;min-height:1.9rem;padding:.15rem 0;display:flex}.chess-board .captured[hidden]{display:none}.chess-board .captured img{width:1.5rem;height:1.5rem;margin-right:-.55rem}.chess-board .captured img:last-of-type{margin-right:0}.chess-board .material-diff{color:var(--muted,#666);margin-left:.9rem;font-size:.85rem;font-weight:600}.chess-board .board-controls{gap:.5rem;margin:.5rem 0;display:flex}.chess-board .board-controls [hidden]{display:none}.chess-board .promotion-picker{z-index:2;background:#fffffff5;border-radius:6px;width:12.5%;display:flex;position:absolute;box-shadow:0 2px 10px #00000080}.chess-board .promotion-picker button{aspect-ratio:1;cursor:pointer;background:0 0;border:0;border-radius:50%;width:100%;padding:0}.chess-board .promotion-picker button:hover{background:#288cff4d}.chess-board .promotion-picker img{width:100%;height:100%;display:block}.help-overlay{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;inset:0}.help-overlay .help-attacked{fill:#dc32322e;stroke:#c81e1ee6;stroke-width:7px;rx:10}.help-warning{color:#7a1d14;background:#fdecea;border:1px solid #e3a8a1;border-radius:6px;margin:.5rem 0;padding:.5rem .8rem}.help-warning[hidden],.mute-toggle[hidden]{display:none}#app:has(.game-screen){max-width:70rem}.game-screen{position:relative}.game-topbar{flex-wrap:wrap;align-items:center;gap:.75rem;margin:0 0 .5rem;display:flex}.game-topbar [hidden]{display:none}.status-panel{--state:var(--line);--tint:var(--card);border:2px solid var(--state);background:var(--tint);border-radius:10px;max-width:40rem;margin:0 0 .6rem;overflow:hidden}.status-panel[data-state=turn]{--state:var(--accent);--tint:#e7f1ea}.status-panel[data-state=waiting]{--state:#b8860b;--tint:#fbf3dc}.status-panel[data-state=draw]{--state:#3b6fa8;--tint:#e5eef8}.status-panel[data-state=over]{--state:#6b716d;--tint:#ecebe7}.game-status{align-items:center;gap:.75rem;padding:.6rem .8rem;display:flex}.status-icon{flex:none;font-size:1.8rem;line-height:1}.status-text{flex-direction:column;gap:.1rem;min-width:0;display:flex}.status-headline{overflow-wrap:anywhere;font-size:1.35rem;font-weight:700}.status-detail{color:var(--muted);overflow-wrap:anywhere;font-size:.95rem}.status-detail[hidden]{display:none}.illegal-note{color:#fff;overflow-wrap:anywhere;background:#9b1c1c;margin:0;padding:.5rem .8rem;font-weight:600}.illegal-note[hidden]{display:none}.game-log .badge,.tab-badge{text-align:center;color:#fff;background:#c0392b;border-radius:1em;min-width:1.3em;padding:0 .35em;font-size:.8em;line-height:1.4;display:inline-block}.game-log .badge:empty,.tab-badge:empty{display:none}.game-conn,.game-error{margin:.25rem 0}.game-conn[hidden],.game-error[hidden]{display:none}.game-layout{grid-template-columns:minmax(0,40rem) minmax(16rem,1fr);align-items:start;gap:1rem;display:grid}.game-main{min-width:0;max-width:40rem}.name-strip{align-items:center;gap:.5rem;padding:.3rem .1rem;display:flex}.name-strip .name{font-weight:600}.name-strip .presence{background:var(--line);border-radius:50%;width:.55rem;height:.55rem}.name-strip[data-online=true] .presence{background:#3a9d5d}.name-strip .clock{font-variant-numeric:tabular-nums;background:var(--card);border:1px solid var(--line);border-radius:4px;margin-left:auto;padding:.1rem .5rem;font-size:1.15rem}.name-strip .clock:empty{display:none}.name-strip[data-turn=true] .clock{border-color:var(--accent)}.name-strip[data-running=true] .clock{background:var(--accent);color:#fff}.board-wrap{position:relative}.board-wrap[data-gated=true] .board-host{filter:blur(5px)brightness(.55);pointer-events:none;-webkit-user-select:none;user-select:none}.start-gate{text-align:center;z-index:5;width:min(20rem,90%);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 18px #00000073}.start-gate[hidden]{display:none}.start-gate h2{margin-top:0}.start-gate p{margin:.35rem 0}.start-gate button{margin-top:.6rem;padding:.6rem 1.4rem;font-size:1.05rem}.move-controls{gap:.5rem;margin:.5rem 0;display:flex}.move-controls[hidden],.move-controls [hidden]{display:none}.game-actions{flex-wrap:wrap;align-items:center;gap:.5rem;margin:.5rem 0;display:flex}.game-actions[hidden],.game-actions [hidden]{display:none}.game-actions .confirm,.game-actions .draw-offered{flex-wrap:wrap;align-items:center;gap:.4rem;display:inline-flex}.tracker{background:var(--card);border:1px solid var(--line);border-radius:8px;min-width:0;padding:.6rem .8rem}.tabs{border-bottom:1px solid var(--line);align-items:center;gap:.4rem;margin-bottom:.5rem;padding-bottom:.5rem;display:flex}.tabs .tab{color:var(--fg);background:0 0;border-color:#0000}.tabs .tab[aria-selected=true]{border-color:var(--accent);color:var(--accent);font-weight:600}.tabs .pane-close{margin-left:auto;display:none}.tab-panel[hidden]{display:none}.chat-log{max-height:22rem;margin:0 0 .5rem;padding:0;list-style:none;overflow-y:auto}.chat-log li{overflow-wrap:anywhere;margin:.25rem 0}.chat-log li[data-from=w] .who{color:#6b4e16}.chat-log li[data-from=b] .who{color:#1f3f6b}.chat-log .who{font-weight:600}.chat-form{gap:.4rem;display:flex}.chat-form input{flex:1;min-width:0}.record p{margin:.15rem 0}.record-head{font-weight:600}.record-meta,.record-result{color:var(--muted)}.history-steps{gap:.3rem;margin:.5rem 0;display:flex}.move-list{max-height:18rem;margin:0 0 .5rem;padding:0;list-style:none;overflow-y:auto}.move-list li{grid-template-columns:2.5rem 1fr 1fr;align-items:center;gap:.25rem;display:grid}.move-list .move-no{color:var(--muted)}.move-list button.move{color:var(--fg);text-align:left;background:0 0;border-color:#0000;justify-content:space-between;gap:.5rem;padding:.15rem .4rem;display:flex}.move-list button.move[aria-current=true]{border-color:var(--accent);background:#2f5d461f}.move-list .clk{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85em}.export{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.export-message{color:var(--muted)}@media (width<=62rem){.game-layout{grid-template-columns:minmax(0,1fr)}.game-main{width:100%;margin:0 auto}}@media (width<=36rem){#app:has(.game-screen){padding:0 .5rem 2rem}.game-topbar{gap:.4rem}.status-headline{font-size:1.2rem}.name-strip .clock{font-size:1rem}.chat-log{max-height:14rem}.move-list{max-height:12rem}}.game-screen.is-fullscreen{z-index:100;background:var(--bg);flex-direction:column;padding:.5rem 1rem;display:flex;position:fixed;inset:0;overflow:hidden}.is-fullscreen .game-layout{flex:1;min-height:0;display:block}.is-fullscreen .game-main{width:min(100%,100vh - 12rem);max-width:none;margin:0 auto}.is-fullscreen .chess-board{max-width:none}.is-fullscreen .tracker{z-index:20;visibility:hidden;border-width:0 0 0 1px;border-radius:0;width:min(26rem,92%);transition:transform .25s,visibility 0s linear .25s;position:absolute;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(105%);box-shadow:-4px 0 16px #0000004d}.is-fullscreen.pane-open .tracker{visibility:visible;transition:transform .25s,visibility;transform:none}.is-fullscreen .pane-close{display:inline-block}.is-fullscreen .chat-log,.is-fullscreen .move-list{max-height:40vh}@media (prefers-reduced-motion:reduce){.is-fullscreen .tracker,.is-fullscreen.pane-open .tracker{transition:none}}.settings-page h3{margin:1.4rem 0 .4rem;font-size:1rem}.settings-form{flex-direction:column;gap:.2rem;display:flex}.settings-field{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.settings-check{align-items:center;gap:.4rem;display:flex}.settings-form button{align-self:flex-start;margin-top:.6rem}.settings-preview{min-width:0;max-width:24rem;margin-top:.6rem}.settings-page .back-link{margin:0 0 .6rem}.settings-page .back-link:last-child{margin:1rem 0 0}.settings-status{min-height:1.2rem;color:var(--muted);margin:.3rem 0 0}.settings-status.settings-saved{color:var(--accent)}.settings-status.error{color:#a12}.settings-page .hint{color:var(--muted);margin:.3rem 0;font-size:.9rem}.stats-page .stats-private{font-weight:600}.stats-page .stats-since,.stats-page .stats-empty{color:var(--muted)}.stats-page .stats-filter{align-items:center;gap:.4rem;display:flex}.stats-page .stats-overall{font-size:1.15rem;font-weight:600}.stats-table{border-collapse:collapse;width:100%;margin:.5rem 0 1rem}.stats-table th,.stats-table td{text-align:left;border-bottom:1px solid var(--line);padding:.4rem .5rem}.stats-table th:not(:first-child),.stats-table td:not(:first-child){text-align:right}.stats-confirm{background:var(--warn);border:1px solid #e6d58a;border-radius:6px;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.6rem .8rem;display:flex}.stats-confirm p{flex-basis:100%;margin:0}