:root{--bg:#111827;--panel:#182235;--panel2:#202c42;--text:#eef4ff;--muted:#9cabc1;--accent:#55d38a;--gold:#ffd166;--danger:#ff6b6b;--board:#166534;--board-dark:#14532d;--line:#0a2a18}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#1c2940,#0c1220 70%);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh;padding:18px}h1{text-align:center;letter-spacing:.18em;margin:0 0 16px;font-size:1.7rem}h1 span{color:var(--accent)}h1 small{font-size:.6rem;letter-spacing:.04em;color:var(--muted)}.layout{display:flex;gap:20px;align-items:flex-start;justify-content:center;flex-wrap:wrap}.board-column{display:flex;flex-direction:column;gap:10px;align-items:center}.panel{width:340px;background:linear-gradient(180deg,var(--panel),#131b2b);border:1px solid #31405a;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:11px;box-shadow:0 12px 35px rgba(0,0,0,.3)}label{display:block;color:var(--muted);font-size:.72rem;margin-bottom:4px}select,button,.button-link,input{font:inherit}select,button,.button-link{width:100%;border:1px solid #40516d;background:#27334a;color:var(--text);border-radius:8px;padding:8px 10px}button,.button-link{cursor:pointer;text-align:center;text-decoration:none}button:hover,.button-link:hover{filter:brightness(1.12)}button:focus,.button-link:focus,.cell:focus{outline:2px solid var(--accent);outline-offset:2px}button.primary{background:var(--accent);border-color:var(--accent);color:#0b1524;font-weight:800}button:disabled{opacity:.42;cursor:not-allowed}.hidden{display:none!important}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.row2,.row3,.row4,.modal-actions,.board-toolbar{display:flex;gap:8px}.row2>*,.row3>*,.row4>*,.modal-actions>*{flex:1}.speed-row{display:flex;align-items:center;gap:8px}.speed-row input{flex:1;accent-color:var(--accent)}.speed-row span{font-size:.68rem;color:var(--muted)}
.eval-wrap{width:min(92vw,610px);display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;font-size:.72rem;color:var(--muted)}.eval-track{height:10px;background:#e8edf5;border-radius:999px;position:relative;overflow:hidden;border:1px solid #4a5870}.eval-track #evalFill{height:100%;width:50%;background:#111;transition:width .3s}.eval-center{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#ffcf5c}.eval-wrap strong{min-width:66px;color:var(--text);text-align:right}
.board-shell{background:#0f3d27;padding:8px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.45);width:min(92vw,610px)}.coord-row{height:20px;display:grid;grid-template-columns:repeat(8,1fr);padding:0 20px;color:#b9d4c3;font-size:.68rem;align-items:center;text-align:center;user-select:none}.board-middle{display:grid;grid-template-columns:20px 1fr 20px;align-items:stretch}.coord-col{display:grid;grid-template-rows:repeat(8,1fr);color:#b9d4c3;font-size:.68rem;align-items:center;text-align:center;user-select:none}#board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:min(82vw,560px);height:min(82vw,560px);border:2px solid var(--line);border-radius:6px;overflow:hidden}.cell{background:var(--board);border:1px solid var(--line);position:relative;min-width:0;min-height:0}.cell:nth-child(16n+2),.cell:nth-child(16n+4),.cell:nth-child(16n+6),.cell:nth-child(16n+8),.cell:nth-child(16n+9),.cell:nth-child(16n+11),.cell:nth-child(16n+13),.cell:nth-child(16n+15){background:var(--board-dark)}.cell.legal{cursor:pointer}.cell.legal::after{content:attr(data-flips);position:absolute;inset:34%;border-radius:50%;background:rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.65rem;font-weight:800;transition:.12s}.cell.legal:hover::after,.cell.preview::after{inset:24%;background:rgba(255,255,255,.4)}.cell.preview-flip .piece{box-shadow:0 0 0 3px rgba(255,209,102,.85),0 3px 6px rgba(0,0,0,.5)}.cell.hint{box-shadow:inset 0 0 0 4px var(--gold)}.cell.heat-good{box-shadow:inset 0 0 0 999px rgba(70,220,130,.12)}.cell.heat-bad{box-shadow:inset 0 0 0 999px rgba(255,80,80,.15)}.cell.heat-neutral{box-shadow:inset 0 0 0 999px rgba(255,210,80,.04)}.piece{position:absolute;inset:9%;border-radius:50%;box-shadow:0 3px 6px rgba(0,0,0,.5)}.piece.black{background:radial-gradient(circle at 35% 30%,#5a5a5a,#090909 72%)}.piece.white{background:radial-gradient(circle at 35% 30%,#fff,#c4cad4 72%)}.piece.flip{animation:flip .38s ease}.piece.drop{animation:drop .28s ease}.cell.last-move::before{content:'';position:absolute;inset:42%;border-radius:50%;background:var(--danger);z-index:2}@keyframes flip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg) scale(1.08)}100%{transform:rotateY(0)}}@keyframes drop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.analysis-card{width:min(92vw,610px);background:var(--panel);border:1px solid #31405a;border-radius:10px;padding:9px 12px;display:flex;gap:10px;align-items:center;font-size:.74rem;min-height:42px}.analysis-card strong{color:var(--gold);white-space:nowrap}.analysis-card span{color:var(--muted)}.board-toolbar{width:min(92vw,610px);flex-wrap:wrap}.board-toolbar>*{flex:1;min-width:95px;padding:7px;font-size:.73rem}
.scores{display:flex;gap:10px}.score-card{flex:1;background:#2a3750;border-radius:10px;padding:9px;text-align:center;border:2px solid transparent}.score-card.active{border-color:var(--gold);box-shadow:0 0 12px rgba(255,209,102,.2)}.score-card .disc{width:26px;height:26px;border-radius:50%;margin:0 auto 5px}.disc.black{background:radial-gradient(circle at 35% 30%,#555,#080808 72%)}.disc.white{background:radial-gradient(circle at 35% 30%,#fff,#c9ced6 72%)}.score-card .num{font-size:1.45rem;font-weight:800}.score-card .who{font-size:.66rem;color:var(--muted)}.status{text-align:center;background:#28344b;border-radius:9px;padding:9px;min-height:40px;font-size:.85rem}.move-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.7rem}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.stats-grid div,.result-breakdown div{background:#202a3d;border-radius:8px;padding:7px 9px;display:flex;justify-content:space-between;align-items:center}.stats-grid span,.result-breakdown span{font-size:.66rem;color:var(--muted)}.stats-grid strong,.result-breakdown strong{font-size:.8rem} .career-panel,.history-panel{background:#202738;border-radius:10px;padding:9px}.career-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.career-grid div{background:#1b2231;border-radius:7px;padding:6px 8px;display:flex;justify-content:space-between;align-items:center}.career-grid span{font-size:.66rem;color:var(--muted)}.career-grid strong{font-size:.8rem}.career-grid .career-wide{grid-column:1/-1}.history-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:.8rem}.mini{width:auto;padding:4px 8px;font-size:.7rem}.history-panel ol{max-height:155px;overflow:auto;padding-left:25px;display:grid;grid-template-columns:1fr 1fr;gap:3px 16px}.history-panel li{font-size:.7rem;color:var(--muted);padding:2px 4px;border-radius:4px;cursor:pointer}.history-panel li:hover,.history-panel li:focus{background:#2b374e;outline:none;box-shadow:inset 0 0 0 1px #50627e}.history-panel li.active-review{background:#33435e;color:var(--text)}.history-panel li.excellent{color:#7fe6a8}.history-panel li.good{color:#bcd88d}.history-panel li.inaccuracy{color:#ffd166}.history-panel li.mistake{color:#ff8787}.footer-note{font-size:.65rem;color:var(--muted);text-align:center;line-height:1.35}
#overlay{position:fixed;inset:0;background:rgba(8,12,20,.76);display:flex;align-items:center;justify-content:center;z-index:50}.modal{background:var(--panel);border-radius:16px;padding:28px 34px;text-align:center;box-shadow:0 12px 48px rgba(0,0,0,.6);max-width:460px;width:92vw}.modal h2{color:var(--gold);margin:0 0 7px}.modal p{color:var(--muted)}.result-breakdown{display:grid;gap:6px;margin:12px 0}.review-bar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40;background:var(--panel);padding:9px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.45);display:flex;gap:6px;align-items:center}.review-bar button{width:auto;padding:7px 9px}.review-bar span{min-width:120px;text-align:center;font-size:.76rem}
@media(max-width:720px){body{padding:8px}.row4{display:grid;grid-template-columns:1fr 1fr}.panel{width:min(96vw,610px)}.settings-grid{grid-template-columns:1fr}.review-bar{width:95vw;flex-wrap:wrap;justify-content:center}.eval-wrap{grid-template-columns:auto 1fr auto}.eval-wrap strong{grid-column:1/-1;text-align:center}.history-panel ol{grid-template-columns:1fr}}
.strategy-panel{background:#202738;border-radius:10px;padding:9px}.opening-name{font-size:.7rem;color:var(--gold);font-weight:700}.top-moves{display:grid;gap:5px;margin:5px 0}.top-move{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;background:#1b2231;border:1px solid #31405a;border-radius:7px;padding:6px 8px;color:var(--text);font-size:.72rem;text-align:left;width:100%}.top-move:hover{border-color:var(--gold)}.top-move .rank{color:var(--gold);font-weight:800}.top-move .score{color:var(--muted)}.search-info{font-size:.64rem;color:var(--muted);text-align:center}.muted{color:var(--muted);font-size:.7rem}.cell.stable .piece{box-shadow:0 0 0 3px rgba(80,220,150,.8),0 3px 6px rgba(0,0,0,.5)}.cell.frontier .piece::after{content:'';position:absolute;inset:36%;border-radius:50%;background:rgba(255,209,102,.9)}.utility-modal{position:fixed;inset:0;background:rgba(8,12,20,.82);display:flex;align-items:center;justify-content:center;z-index:70}.utility-card{background:var(--panel);border:1px solid #3b4b66;border-radius:16px;padding:24px;width:min(92vw,560px);box-shadow:0 16px 50px rgba(0,0,0,.6)}.utility-card h2{color:var(--gold);margin-top:0}.utility-card p{color:var(--muted);font-size:.8rem}.challenge-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.editor-tools{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.editor-tools button.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}.editor-turn{display:flex;align-items:center;gap:10px;margin:12px 0}.editor-turn label{margin:0}.editor-card .modal-actions{margin-top:14px}.editor-mode .cell{cursor:crosshair}.career-grid .career-wide strong{font-size:.7rem;text-align:right}.analysis-active .cell.stable .piece{box-shadow:0 0 0 3px rgba(80,220,150,.8),0 3px 6px rgba(0,0,0,.5)}
@media(max-width:720px){.challenge-grid{grid-template-columns:1fr}.editor-tools{display:grid;grid-template-columns:1fr 1fr}.strategy-panel{width:100%}}
.editor-mini-board{display:grid;grid-template-columns:repeat(8,1fr);width:min(76vw,400px);aspect-ratio:1;margin:10px auto;border:2px solid var(--line)}.editor-mini-cell{background:var(--board);border:1px solid var(--line);position:relative}.editor-mini-cell:nth-child(16n+2),.editor-mini-cell:nth-child(16n+4),.editor-mini-cell:nth-child(16n+6),.editor-mini-cell:nth-child(16n+8),.editor-mini-cell:nth-child(16n+9),.editor-mini-cell:nth-child(16n+11),.editor-mini-cell:nth-child(16n+13),.editor-mini-cell:nth-child(16n+15){background:var(--board-dark)}.editor-mini-cell .piece{inset:12%}
.top-move-row{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:stretch}.top-move-play{width:auto;min-width:58px;padding:6px 10px;font-size:.7rem;background:#2d6a4f;border-color:#40916c;font-weight:700}@media(max-width:520px){.top-move-row{grid-template-columns:1fr}.top-move-play{width:100%}}
.tournament-panel,.opening-book{background:#202738;border-radius:10px;padding:9px}.series-status{font-size:.72rem;color:var(--muted);margin-bottom:7px}.clock-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.clock-row div{background:#1b2231;border-radius:7px;padding:7px 9px;display:flex;justify-content:space-between;font-size:.72rem}.clock-row strong.low-time{color:#ff8787}.training-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}.training-tabs button.active{border-color:var(--gold);color:var(--gold)}.training-card{max-height:88vh;overflow:auto}.training-list{display:grid;gap:7px}.training-item{background:#1b2231;border:1px solid #31405a;border-radius:9px;padding:9px}.training-item h3{margin:0 0 4px;font-size:.82rem;color:var(--text)}.training-item p{margin:3px 0}.training-item .meta{font-size:.65rem;color:var(--muted)}.training-item button{margin-top:7px;width:auto}.training-progress{margin:10px 0;font-size:.7rem;color:var(--gold)}.opening-book{font-size:.68rem;margin-bottom:7px}.analysis-report-card{width:min(94vw,760px);max-height:90vh;overflow:auto}.analysis-summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:10px 0}.analysis-summary-grid div{background:#1b2231;padding:8px;border-radius:8px;display:flex;justify-content:space-between;font-size:.72rem}.analysis-move-list{display:grid;gap:5px;margin-top:10px}.analysis-move-entry{display:grid;grid-template-columns:52px 1fr auto;gap:8px;background:#1b2231;border-radius:7px;padding:7px 8px;font-size:.7rem;align-items:center;cursor:pointer}.analysis-move-entry.mistake{box-shadow:inset 3px 0 #ff8787}.analysis-move-entry.inaccuracy{box-shadow:inset 3px 0 #ffd166}.mistake-nav{display:flex;gap:7px;flex-wrap:wrap}.mistake-nav button{width:auto}.coach-text{background:#202a3d;border-radius:8px;padding:10px;margin-top:9px;font-size:.75rem;color:var(--muted);line-height:1.45}.book-moves{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}.book-moves button{width:auto;padding:5px 8px;font-size:.68rem}.achievement-toast{position:fixed;right:16px;bottom:16px;z-index:100;background:var(--panel);border:1px solid var(--gold);border-radius:10px;padding:10px 14px;box-shadow:0 8px 30px rgba(0,0,0,.45);font-size:.75rem;color:var(--gold)}
@media(max-width:600px){.training-tabs{grid-template-columns:1fr}.analysis-summary-grid{grid-template-columns:1fr}.analysis-move-entry{grid-template-columns:45px 1fr}.analysis-move-entry span:last-child{grid-column:2}}