.chess-playground{--chess-blue:#67869b;--chess-cream:#f1eddc;--chess-border:#dce5ec;color:#19344b}
.chess-intro{display:flex;align-items:center;gap:24px;justify-content:space-between;margin-bottom:22px}.chess-intro h2{margin:0 0 8px;font-size:24px}.chess-intro p{margin:0;color:#597082}.chess-intro>a{font-size:12px;white-space:nowrap;color:#b43e2b}
.chess-settings{display:flex;gap:18px;flex-wrap:wrap;padding:16px 0 24px;border-top:1px solid var(--chess-border)}.chess-settings label,.chess-position-panel label,.chess-template-controls label{display:grid;gap:7px;font-size:11px;font-weight:600;color:#587084}.chess-settings label{flex:1;min-width:170px}
.chess-playground select{border:1px solid #cbd9e2;border-radius:7px;padding:10px 12px;color:#254358;background:white;min-height:40px;font-size:12px;max-width:100%}.chess-playground button{min-height:40px}.chess-playground .learn-button{font-size:11px;padding:10px 13px;gap:8px}
.chess-workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:start}.chess-board-column,.chess-code-column{min-width:0}.chess-board-column{border:1px solid var(--chess-border);border-radius:12px;padding:18px;background:#fff}.chess-player{display:flex;gap:10px;align-items:center;padding:0 0 16px}.chess-player strong{display:block;font-size:13px}.chess-player>div>span{display:block;font-size:10px;color:#748697;margin-top:4px}.chess-avatar{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#edf2f6;font-size:23px;color:#1d3348}.chess-avatar.participant{background:#fff0ea;color:#ae4938}.chess-side-chip{margin-left:auto;border:1px solid #d7e2e9;border-radius:6px;padding:5px 9px;font-size:10px}.chess-board{width:100%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;box-shadow:0 3px 10px #19344b0f;border:4px solid #e1e8eb;border-radius:3px;overflow:hidden}
.chess-square{position:relative;display:grid;place-items:center;padding:0;border:0;border-radius:0;aspect-ratio:1;min-height:0!important;cursor:pointer;isolation:isolate}.chess-square.light{background:var(--chess-cream);color:#557186}.chess-square.dark{background:var(--chess-blue);color:#f5f1e3}.chess-square:disabled{cursor:default;opacity:1}.chess-square:focus-visible{outline:3px solid #ed593d;outline-offset:-3px;z-index:2}.chess-square.selected{box-shadow:inset 0 0 0 3px #f25f41}.chess-square.last-move{background-image:linear-gradient(#f6ca5780,#f6ca5780)}.chess-square.in-check{background-image:radial-gradient(#fa7564cc,#fa756455)}.chess-square.legal:after{content:'';width:22%;height:22%;border-radius:50%;background:#203f5860;position:absolute;z-index:2;pointer-events:none}.chess-square.legal:has(.chess-piece):after{width:83%;height:83%;background:transparent;border:3px solid #d2583c}
.chess-piece{width:91%;height:91%;position:relative;z-index:1;pointer-events:none;overflow:visible}.chess-piece text{font-family:'DejaVu Sans','Arial Unicode MS','Apple Symbols',serif;font-size:64px;paint-order:stroke fill;stroke-linejoin:round}.chess-piece.white text{fill:#fffdf5;stroke:#243543;stroke-width:1.4}.chess-piece.black text{fill:#172b3d;stroke:#fff9ee;stroke-width:.5}.chess-rank,.chess-file{position:absolute;font-size:9px;font-weight:700;z-index:3;pointer-events:none}.chess-rank{top:3px;left:4px}.chess-file{bottom:2px;right:4px}.chess-board-help{font-size:10px!important;color:#637b8d;margin:12px 0 20px;line-height:1.6!important}.chess-game-status{font-size:13px!important;line-height:1.7!important;font-weight:700;color:#25485e;margin:0 0 12px}.chess-game-actions{display:flex;flex-wrap:wrap;gap:8px}.chess-turn-note{font-size:10px!important;line-height:1.7!important;margin:12px 0 0;color:#788b99}.chess-promotion{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:15px}.chess-promotion button{background:#fff7ef;border:1px solid #eecfbd;border-radius:6px;color:#263f51;padding:8px;font-size:12px;cursor:pointer}
.chess-editor-panel,.chess-output-panel,.chess-analysis-panel{border:1px solid var(--chess-border);border-radius:10px;overflow:hidden;background:white;margin:0 0 15px}.chess-editor-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 15px;border-bottom:1px solid var(--chess-border);background:#f7fafc}.chess-editor-heading strong{font:600 12px ui-monospace,monospace}.chess-editor-heading select{border:0;background:transparent;font-size:11px;min-height:32px;padding:4px 6px}.chess-template-controls{display:flex;align-items:end;gap:10px;padding:12px 15px;background:#fff}.chess-template-controls label{min-width:0;flex:1}.chess-template-controls select{width:100%;font-size:11px}.chess-template-controls button{flex:none}.chess-code-editor{display:block;width:100%;resize:vertical;min-height:280px;height:325px;border:0;border-top:1px solid #e4ebf1;border-bottom:1px solid #e4ebf1;outline-offset:-3px!important;background:#fbfdff;color:#1f3d59;padding:18px 16px;font:12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace!important;tab-size:4;white-space:pre;overflow:auto}.chess-code-editor[readonly]{background:#f3f6f9}.chess-editor-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px}.chess-editor-footer>span{font-size:9px;color:#6e8493}.chess-editor-footer .learn-button{padding:6px 10px;min-height:34px}.chess-output-panel,.chess-analysis-panel{padding:14px 16px}.chess-output-panel h3,.chess-analysis-panel h3{margin:0 0 10px;font-size:13px}.chess-output-panel>p{font-size:11px!important;line-height:1.6!important;color:#667f90;margin:0 0 10px}.chess-output-panel pre{font:11px/1.8 ui-monospace,monospace;background:#f4f7fa;border-radius:5px;padding:12px;margin:0;white-space:pre-wrap;overflow:auto;max-height:230px;overflow-wrap:anywhere}.chess-analysis-panel{font-size:11px;line-height:1.8;color:#5f7789}.chess-analysis-panel p{font-size:11px!important;line-height:1.8!important;margin:10px 0}.chess-analysis-panel dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}.chess-analysis-panel dt{font-size:9px;color:#738a99}.chess-analysis-panel dd{font-size:14px;color:#203e55;font-weight:700;margin:3px 0 0}.chess-analysis-panel details summary{cursor:pointer;color:#244f6b}.chess-candidates{padding-top:10px;display:grid;gap:5px}.chess-candidates>span{display:flex;justify-content:space-between;padding:6px 8px;background:#f5f9fc}
.chess-session{display:grid;grid-template-columns:1fr 1.05fr;gap:24px;border-top:1px solid var(--chess-border);padding-top:25px;margin-top:26px}.chess-session h3{margin:0 0 14px}.chess-session header{display:flex;justify-content:space-between;align-items:center;gap:12px}.chess-session header h3{margin:0}.chess-history{max-height:280px;overflow:auto;margin-top:14px;border:1px solid var(--chess-border);border-radius:8px}.chess-history>p{padding:5px 14px;font-size:12px;color:#688193}.chess-history ol{list-style:none;margin:0;padding:0}.chess-history li{display:grid;grid-template-columns:35px 1fr 1fr 55px;gap:8px;font-size:11px!important;padding:8px 12px;border-bottom:1px solid #e6edf2}.chess-history li:last-child{background:#fff3ec;border-color:transparent}.chess-history li>span{color:#6c8495}.chess-history code{font-size:10px;color:#7690a2}.chess-position-panel>label{margin:12px 0 8px}.chess-position-panel textarea{width:100%;font:11px/1.7 ui-monospace,monospace;border:1px solid #cfdee8;border-radius:6px;resize:vertical;padding:10px;color:#34546b}.chess-position-panel>div{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}.chess-position-panel>p{font-size:10px!important;line-height:1.8!important;color:#728998}.chess-learning-section{margin:45px 0;padding-top:28px;border-top:1px solid var(--chess-border)}.chess-learning-section h2{margin:0 0 20px}.chess-learning-steps{display:grid;grid-template-columns:1fr 1fr;gap:22px 35px;padding-left:24px}.chess-learning-steps li::marker{font-weight:700;color:#d64c32}.chess-learning-steps p{font-size:12px!important;line-height:1.8!important;color:#567388;margin:8px 0 0}.chess-learning-section code{font:12px ui-monospace,monospace;background:#eff5f9;padding:3px 5px;border-radius:3px}.chess-learning-section .learn-table td{vertical-align:top}
@media(min-width:1500px){.chess-code-editor{height:385px}}
@media(max-width:1100px){.chess-workbench,.chess-session{grid-template-columns:minmax(0,1fr)}.chess-board-column{max-width:550px;margin:0 auto;width:100%}.chess-code-editor{height:330px}.chess-code-column{width:100%}.chess-intro{align-items:start}.chess-intro>a{display:none}.chess-settings{gap:12px}}
@media(max-width:600px){.chess-intro h2{font-size:21px}.chess-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px}.chess-settings label{min-width:0}.chess-settings label:last-child{grid-column:1/-1}.chess-playground select{font-size:11px;padding:9px 7px}.chess-board-column{padding:12px}.chess-game-actions .learn-button{flex:1}.chess-player strong{font-size:12px}.chess-player>div>span{font-size:9px}.chess-learning-steps{grid-template-columns:1fr;gap:20px}.chess-template-controls{padding:10px;gap:7px}.chess-code-editor{font-size:11px!important;padding:14px 10px}.chess-session{gap:28px}.chess-history li{grid-template-columns:28px 1fr 1fr 50px}.chess-session header .learn-button{font-size:10px}}