:root{--bg: #1a1a2e;--bg-surface: #16213e;--bg-card: #0f3460;--text: #e0e0e0;--text-muted: #8892a0;--accent: #e94560;--accent-hover: #ff6b6b;--border: #2a2a4a;--eval-white: #f0f0f0;--eval-black: #333;--clr-book: #a0a0a0;--clr-brilliant: #1baca6;--clr-great: #5c8bb0;--clr-best: #96bc4b;--clr-excellent: #96bc4b;--clr-good: #a5c06e;--clr-inaccuracy: #e6a817;--clr-mistake: #e68f17;--clr-blunder: #ca3431}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}#app{max-width:1200px;margin:0 auto;padding:8px}.app-layout{display:flex;flex-direction:column;gap:8px;max-width:560px;margin:0 auto}.game-info{background:var(--bg-surface);border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}.game-info .players{font-size:15px;font-weight:600}.game-info .players .user{color:var(--accent)}.game-info .meta{font-size:13px;color:var(--text-muted)}.game-info .opening-name{font-size:13px;color:var(--text-muted);min-height:18px}.board-row{display:flex;gap:0;align-items:stretch}.board-column{display:flex;flex:1;flex-direction:column;min-width:0}.board-wrap{flex:1;aspect-ratio:1;border-radius:0;overflow:hidden}.board-wrap cm-chessboard{width:100%;height:100%}.board-wrap .marker-square{fill:#ffff3266}.material-row{min-height:28px;padding:6px 10px;background:var(--bg-surface);display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--text-muted);font-size:18px}.material-top{border-radius:0 4px 0 0;border-bottom:1px solid var(--border)}.material-bottom{border-radius:0 0 4px;border-top:1px solid var(--border)}.material-pieces{min-height:20px;letter-spacing:1px}.material-advantage{font-size:13px;font-weight:700;color:var(--text)}.eval-bar{width:28px;flex-shrink:0;background:var(--eval-black);border-radius:4px 0 0 4px;position:relative;overflow:hidden}.eval-bar-white{position:absolute;bottom:0;left:0;right:0;background:var(--eval-white);transition:height .3s ease}.eval-bar-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;min-width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;line-height:1}.eval-bar-badge.book{background:var(--clr-book);color:#1a1a2e}.eval-bar-badge.brilliant{background:var(--clr-brilliant);color:#fff}.eval-bar-badge.great{background:var(--clr-great);color:#fff}.eval-bar-badge.best{background:var(--clr-best);color:#1a1a2e}.eval-bar-badge.excellent{background:var(--clr-excellent);color:#1a1a2e}.eval-bar-badge.good{background:var(--clr-good);color:#1a1a2e}.eval-bar-badge.inaccuracy{background:var(--clr-inaccuracy);color:#1a1a2e}.eval-bar-badge.mistake{background:var(--clr-mistake);color:#fff}.eval-bar-badge.blunder{background:var(--clr-blunder);color:#fff}.nav-controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.nav-controls button{background:var(--bg-surface);border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:6px;cursor:pointer;font-size:16px;transition:background .15s;touch-action:manipulation}.nav-controls button:hover{background:var(--bg-card)}.nav-controls button:active:not(:disabled){background:var(--accent)}.nav-controls button:disabled{opacity:.4;cursor:not-allowed}.nav-controls button.active{background:var(--accent);border-color:var(--accent)}.auto-eval-toggle{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--text-muted);cursor:pointer;padding:0 4px;user-select:none}.auto-eval-toggle input{accent-color:var(--accent);cursor:pointer}.move-list{background:var(--bg-surface);border-radius:8px;padding:8px 10px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;font-size:14px;display:flex;gap:2px;align-items:center;scrollbar-width:thin}.move-list::-webkit-scrollbar{height:4px}.move-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.move-list .move-pair{display:inline-flex;gap:2px;align-items:center;flex-shrink:0}.move-list .move-number{color:var(--text-muted);padding-right:2px;font-size:12px}.move-list .move{padding:2px 6px;border-radius:4px;cursor:pointer;text-align:center;transition:background .1s;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.move-list .move:hover{background:var(--bg-card)}.move-list .move.current{background:var(--accent);color:#fff;font-weight:600}.move-list .move.book{color:var(--clr-book)}.move-list .move.brilliant{color:var(--clr-brilliant)}.move-list .move.great{color:var(--clr-great)}.move-list .move.best{color:var(--clr-best)}.move-list .move.excellent{color:var(--clr-excellent)}.move-list .move.good{color:var(--clr-good)}.move-list .move.inaccuracy{color:var(--clr-inaccuracy)}.move-list .move.mistake{color:var(--clr-mistake)}.move-list .move.blunder{color:var(--clr-blunder)}.move-list .move.current.book,.move-list .move.current.brilliant,.move-list .move.current.great,.move-list .move.current.best,.move-list .move.current.excellent,.move-list .move.current.good,.move-list .move.current.inaccuracy,.move-list .move.current.mistake,.move-list .move.current.blunder{color:#fff}.move-annotation{display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:50%;line-height:1;flex-shrink:0}.move-annotation.book{background:var(--clr-book);color:#1a1a2e;font-size:10px}.move-annotation.brilliant{background:var(--clr-brilliant);color:#fff}.move-annotation.great{background:var(--clr-great);color:#fff}.move-annotation.best{background:var(--clr-best);color:#1a1a2e}.move-annotation.excellent{background:var(--clr-excellent);color:#1a1a2e}.move-annotation.good{background:var(--clr-good);color:#1a1a2e}.move-annotation.inaccuracy{background:var(--clr-inaccuracy);color:#1a1a2e}.move-annotation.mistake{background:var(--clr-mistake);color:#fff}.move-annotation.blunder{background:var(--clr-blunder);color:#fff}.pgn-input{width:100%;min-height:100px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:10px;font-family:monospace;font-size:13px;resize:vertical}.pgn-input::placeholder{color:var(--text-muted)}.btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;touch-action:manipulation}.btn:hover{background:var(--accent-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--bg-card)}.btn-secondary:hover{background:var(--border)}.history-list{display:flex;flex-direction:column;gap:8px}.history-item{background:var(--bg);border-radius:6px;padding:10px;cursor:pointer;transition:background .15s;display:flex;justify-content:space-between;align-items:center}.history-item:hover{background:var(--bg-card)}.history-item .info{display:flex;flex-direction:column;gap:2px}.history-item .info .players{font-size:14px;font-weight:600}.history-item .info .detail{font-size:12px;color:var(--text-muted)}.history-item .delete-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;font-size:16px;opacity:0;transition:opacity .15s,color .15s}.history-item:hover .delete-btn{opacity:1}.history-item .delete-btn:hover{color:var(--clr-blunder)}.eval-progress{width:100%;height:4px;background:var(--border);border-radius:2px;overflow:hidden}.eval-progress-fill{height:100%;background:var(--accent);transition:width .2s ease}.start-screen{max-width:520px;margin:0 auto;padding:40px 16px;display:flex;flex-direction:column;gap:16px}.start-title{font-size:28px;font-weight:700;text-align:center}.start-subtitle{font-size:15px;color:var(--text-muted);text-align:center}.start-buttons{display:flex;gap:10px;justify-content:center}.start-history{margin-top:16px}.start-history h3{font-size:15px;color:var(--text-muted);margin-bottom:8px}.color-toggle{display:flex;align-items:center;gap:8px;justify-content:center}.color-toggle button{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-muted);padding:4px 12px;border-radius:4px;cursor:pointer;font-size:13px;transition:all .15s}.color-toggle button.active{background:var(--accent);border-color:var(--accent);color:#fff}.back-btn{background:none;border:none;color:var(--text-muted);font-size:14px;cursor:pointer;padding:4px 0;text-align:left;transition:color .15s}.back-btn:hover{color:var(--text)}.eval-overlay{position:fixed;inset:0;z-index:1000;background:#000000b3;display:flex;align-items:center;justify-content:center}.eval-overlay-card{background:var(--bg-surface);border-radius:12px;padding:32px 40px;min-width:280px;max-width:400px;text-align:center;display:flex;flex-direction:column;gap:16px}.eval-overlay-status{font-size:15px;font-weight:600;color:var(--text)}.eval-overlay-bar{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden}.eval-overlay-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .2s ease;width:0%}.freeplay-move-list{background:var(--bg-surface);border-radius:8px;padding:8px 10px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;font-size:14px;display:none;gap:2px;align-items:center;scrollbar-width:thin;border-top:2px solid var(--accent)}.freeplay-move-list::-webkit-scrollbar{height:4px}.freeplay-move-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.freeplay-move-list .move-pair{display:inline-flex;gap:2px;align-items:center;flex-shrink:0}.freeplay-move-list .move-number{color:var(--text-muted);padding-right:2px;font-size:12px}.freeplay-move-list .move{padding:2px 6px;border-radius:4px;text-align:center;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.freeplay-move-list .move.current{background:var(--accent);color:#fff;font-weight:600}.freeplay-move-list .move.book{color:var(--clr-book)}.freeplay-move-list .move.brilliant{color:var(--clr-brilliant)}.freeplay-move-list .move.great{color:var(--clr-great)}.freeplay-move-list .move.best{color:var(--clr-best)}.freeplay-move-list .move.excellent{color:var(--clr-excellent)}.freeplay-move-list .move.good{color:var(--clr-good)}.freeplay-move-list .move.inaccuracy{color:var(--clr-inaccuracy)}.freeplay-move-list .move.mistake{color:var(--clr-mistake)}.freeplay-move-list .move.blunder{color:var(--clr-blunder)}.freeplay-move-list .move.current.book,.freeplay-move-list .move.current.brilliant,.freeplay-move-list .move.current.great,.freeplay-move-list .move.current.best,.freeplay-move-list .move.current.excellent,.freeplay-move-list .move.current.good,.freeplay-move-list .move.current.inaccuracy,.freeplay-move-list .move.current.mistake,.freeplay-move-list .move.current.blunder{color:#fff}.freeplay-label{font-size:11px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;padding-right:6px;flex-shrink:0}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.gap-8{gap:8px}.flex{display:flex}.flex-col{flex-direction:column}.hidden{display:none}.cm-chessboard .board.input-enabled .square{cursor:pointer}.cm-chessboard .coordinates,.cm-chessboard .markers-layer,.cm-chessboard .pieces-layer,.cm-chessboard .markers-top-layer{pointer-events:none}.cm-chessboard-content .list-inline{padding-left:0;list-style:none}.cm-chessboard-content .list-inline-item{display:inline-block}.cm-chessboard-content .list-inline-item:not(:last-child){margin-right:1rem}.cm-chessboard-accessibility.visually-hidden{width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cm-chessboard.default .board .square.white{fill:#ecdab9}.cm-chessboard.default .board .square.black{fill:#c5a076}.cm-chessboard.default.border-type-thin .board .border{stroke:#c5a076;stroke-width:.7%;fill:#c5a076}.cm-chessboard.default.border-type-none .board .border{stroke:#c5a076;stroke-width:0;fill:#c5a076}.cm-chessboard.default.border-type-frame .board .border{fill:#ecdab9;stroke:none}.cm-chessboard.default.border-type-frame .board .border-inner{fill:#c5a076;stroke:#c5a076;stroke-width:.7%}.cm-chessboard.default .coordinates{pointer-events:none;user-select:none}.cm-chessboard.default .coordinates .coordinate{fill:#b5936d;font-size:7px;cursor:default}.cm-chessboard.default .coordinates .coordinate.black{fill:#eeddbf}.cm-chessboard.default .coordinates .coordinate.white{fill:#b5936d}.cm-chessboard.default-contrast .board .square.white{fill:#ecdab9}.cm-chessboard.default-contrast .board .square.black{fill:#c5a076}.cm-chessboard.default-contrast.border-type-thin .board .border{stroke:#c5a076;stroke-width:.7%;fill:#c5a076}.cm-chessboard.default-contrast.border-type-none .board .border{stroke:#c5a076;stroke-width:0;fill:#c5a076}.cm-chessboard.default-contrast.border-type-frame .board .border{fill:#ecdab9;stroke:none}.cm-chessboard.default-contrast.border-type-frame .board .border-inner{fill:#c5a076;stroke:#c5a076;stroke-width:.7%}.cm-chessboard.default-contrast .coordinates{pointer-events:none;user-select:none}.cm-chessboard.default-contrast .coordinates .coordinate{fill:#b5936d;font-size:7px;cursor:default}.cm-chessboard.default-contrast .coordinates .coordinate.black,.cm-chessboard.default-contrast .coordinates .coordinate.white{fill:#333}.cm-chessboard.green .board .square.white{fill:#e0ddcc}.cm-chessboard.green .board .square.black{fill:#4c946a}.cm-chessboard.green.border-type-thin .board .border{stroke:#4c946a;stroke-width:.7%;fill:#4c946a}.cm-chessboard.green.border-type-none .board .border{stroke:#4c946a;stroke-width:0;fill:#4c946a}.cm-chessboard.green.border-type-frame .board .border{fill:#e0ddcc;stroke:none}.cm-chessboard.green.border-type-frame .board .border-inner{fill:#4c946a;stroke:#4c946a;stroke-width:.7%}.cm-chessboard.green .coordinates{pointer-events:none;user-select:none}.cm-chessboard.green .coordinates .coordinate{fill:#468862;font-size:7px;cursor:default}.cm-chessboard.green .coordinates .coordinate.black{fill:#e2e0d0}.cm-chessboard.green .coordinates .coordinate.white{fill:#468862}.cm-chessboard.blue .board .square.white{fill:#d8ecfb}.cm-chessboard.blue .board .square.black{fill:#86afcf}.cm-chessboard.blue.border-type-thin .board .border{stroke:#86afcf;stroke-width:.7%;fill:#86afcf}.cm-chessboard.blue.border-type-none .board .border{stroke:#86afcf;stroke-width:0;fill:#86afcf}.cm-chessboard.blue.border-type-frame .board .border{fill:#d8ecfb;stroke:none}.cm-chessboard.blue.border-type-frame .board .border-inner{fill:#86afcf;stroke:#86afcf;stroke-width:.7%}.cm-chessboard.blue .coordinates{pointer-events:none;user-select:none}.cm-chessboard.blue .coordinates .coordinate{fill:#7ba1be;font-size:7px;cursor:default}.cm-chessboard.blue .coordinates .coordinate.black{fill:#dbeefb}.cm-chessboard.blue .coordinates .coordinate.white{fill:#7ba1be}.cm-chessboard.chess-club .board .square.white{fill:#e6d3b1}.cm-chessboard.chess-club .board .square.black{fill:#af6b3f}.cm-chessboard.chess-club.border-type-thin .board .border{stroke:#692e2b;stroke-width:.7%;fill:#af6b3f}.cm-chessboard.chess-club.border-type-none .board .border{stroke:#692e2b;stroke-width:0;fill:#af6b3f}.cm-chessboard.chess-club.border-type-frame .board .border{fill:#692e2b;stroke:none}.cm-chessboard.chess-club.border-type-frame .board .border-inner{fill:#af6b3f;stroke:#692e2b;stroke-width:.7%}.cm-chessboard.chess-club .coordinates{pointer-events:none;user-select:none}.cm-chessboard.chess-club .coordinates .coordinate{fill:#e6d3b1;font-size:7px;cursor:default}.cm-chessboard.chess-club .coordinates .coordinate.black{fill:#e6d3b1}.cm-chessboard.chess-club .coordinates .coordinate.white{fill:#af6b3f}.cm-chessboard.chessboard-js .board .square.white{fill:#f0d9b5}.cm-chessboard.chessboard-js .board .square.black{fill:#b58863}.cm-chessboard.chessboard-js.border-type-thin .board .border{stroke:#404040;stroke-width:.7%;fill:#b58863}.cm-chessboard.chessboard-js.border-type-none .board .border{stroke:#404040;stroke-width:0;fill:#b58863}.cm-chessboard.chessboard-js.border-type-frame .board .border{fill:#f0d9b5;stroke:none}.cm-chessboard.chessboard-js.border-type-frame .board .border-inner{fill:#b58863;stroke:#404040;stroke-width:.7%}.cm-chessboard.chessboard-js .coordinates{pointer-events:none;user-select:none}.cm-chessboard.chessboard-js .coordinates .coordinate{fill:#404040;font-size:7px;cursor:default}.cm-chessboard.chessboard-js .coordinates .coordinate.black{fill:#f0d9b5}.cm-chessboard.chessboard-js .coordinates .coordinate.white{fill:#b58863}.cm-chessboard.black-and-white .board .square.white{fill:#fff}.cm-chessboard.black-and-white .board .square.black{fill:#9c9c9c}.cm-chessboard.black-and-white.border-type-thin .board .border{stroke:#9c9c9c;stroke-width:.7%;fill:#9c9c9c}.cm-chessboard.black-and-white.border-type-none .board .border{stroke:#9c9c9c;stroke-width:0;fill:#9c9c9c}.cm-chessboard.black-and-white.border-type-frame .board .border{fill:#fff;stroke:none}.cm-chessboard.black-and-white.border-type-frame .board .border-inner{fill:#9c9c9c;stroke:#9c9c9c;stroke-width:.7%}.cm-chessboard.black-and-white .coordinates{pointer-events:none;user-select:none}.cm-chessboard.black-and-white .coordinates .coordinate{fill:#909090;font-size:7px;cursor:default}.cm-chessboard.black-and-white .coordinates .coordinate.black{fill:#fff}.cm-chessboard.black-and-white .coordinates .coordinate.white{fill:#909090}.cm-chessboard .arrow-warning .arrow-head{fill:orange;fill-rule:nonzero}.cm-chessboard .arrow-warning .arrow-line{stroke:orange;stroke-linecap:round;opacity:.6}.cm-chessboard .arrow-danger .arrow-head{fill:red;fill-rule:nonzero}.cm-chessboard .arrow-danger .arrow-line{stroke:red;stroke-linecap:round;opacity:.5}.cm-chessboard .arrow-success .arrow-head{fill:green;fill-rule:nonzero}.cm-chessboard .arrow-success .arrow-line{stroke:green;stroke-linecap:round;opacity:.5}.cm-chessboard .arrow-info .arrow-head{fill:#00f;fill-rule:nonzero}.cm-chessboard .arrow-info .arrow-line{stroke:#00f;stroke-linecap:butt;opacity:.4}.cm-chessboard .arrow-secondary .arrow-head{fill:#666;fill-rule:nonzero}.cm-chessboard .arrow-secondary .arrow-line{stroke:#666;stroke-linecap:butt;opacity:.5}svg.cm-chessboard .promotion-dialog-group rect,svg.cm-chessboard .promotion-dialog-group g[data-piece]{animation:fade-in .25s ease-in}svg.cm-chessboard .promotion-dialog-group .promotion-dialog{fill:#fff;fill-opacity:.7;stroke:#0006}svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button{fill:transparent;cursor:pointer}svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button:hover{fill:#0003}svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button-group{outline:none}svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button-group:focus .promotion-dialog-button{stroke:#0000004d;stroke-width:2px}svg.cm-chessboard .promotion-dialog-group .piece{pointer-events:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}