:root{--bg:#0a0a0a;--panel:#121212;--panel-hover:#1c1c1c;--text:#f2f2f2;--text-dim:#8a8a8a;--primary:#f2f2f2;--primary-fg:#0a0a0a;--tile-light:#e2e2e2;--tile-dark:#141414;--danger:#e5484d;--valid:#34c759;--warn:#ff9f0a;--ink:0, 0, 0;--paper:255, 255, 255;--border:rgba(var(--paper), .16);--scrim:#0a0a0aeb;--hairline:1px solid var(--border);--radius:0;--label-size:32px;--dot-inset:32%;--triangle-size:15%;--z-piece:1;--z-piece-hover:5;--z-piece-dragging:10;--z-overlay:20;--dur-fast:.15s ease;--dur-quick:.12s ease;--dur-slide:.18s cubic-bezier(.2, .8, .2, 1);--dur-pulse:1.1s;--dur-card:.2s}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,sans-serif}.app{flex-direction:column;height:100%;display:flex}.navbar{border-bottom:var(--hairline);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:12px 24px;padding:20px 40px;display:flex}.brand{text-transform:uppercase;letter-spacing:.1em;font-size:1.3em;font-weight:800}.status{background:var(--panel);border:var(--hairline);align-items:center;gap:10px;margin:0 auto;padding:10px 20px;display:flex}.turn-dot{background:var(--text);border:var(--hairline);width:10px;height:10px}.turn-dot.black{background:var(--bg)}.turn-text{font-size:1.05em;font-weight:500}.navbar-actions{align-items:center;gap:12px;display:flex}.btn{white-space:nowrap;background:var(--panel);color:var(--text);border:var(--hairline);border-radius:var(--radius);height:44px;font:inherit;cursor:pointer;transition:background var(--dur-fast), border-color var(--dur-fast);flex-shrink:0;padding:0 20px;font-weight:500}.btn:hover{background:var(--panel-hover);border-color:var(--text-dim)}.btn:active{background:var(--bg)}.btn-primary{background:var(--primary);color:var(--primary-fg);border-color:var(--primary);font-weight:700}.btn-primary:hover{background:var(--text-dim);border-color:var(--text-dim)}.layout{flex:1;min-height:0;display:flex}#board-container{flex:1;justify-content:center;align-items:center;min-width:0;min-height:0;padding:16px;display:flex;position:relative}.panel{border-left:var(--hairline);flex-direction:column;flex-shrink:0;width:280px;display:flex}.panel-header{border-bottom:var(--hairline);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.panel-header h2{text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:0;font-size:1em;font-weight:700}.export-actions{gap:8px;display:flex}.export-actions .btn{height:32px;padding:0 12px;font-size:.85em}.move-list{flex:1;min-height:0;margin:0;padding:8px 0;list-style:none;overflow-y:auto}.move-row{grid-template-columns:32px 1fr 1fr;gap:8px;padding:4px 20px;font-family:SF Mono,ui-monospace,monospace;font-size:.9em;display:grid}.move-row:nth-child(odd){background:var(--panel)}.move-number{color:var(--text-dim)}#board-grid{grid-template-columns:var(--label-size) repeat(8, 1fr) var(--label-size);grid-template-rows:var(--label-size) repeat(8, 1fr) var(--label-size);aspect-ratio:1;width:min(100%,960px);max-height:100%;display:grid}#board-frame{border:var(--hairline);grid-area:2/2/10/10;line-height:0;position:relative}.coords{color:var(--text-dim);letter-spacing:.05em;-webkit-user-select:none;user-select:none;font-family:SF Mono,ui-monospace,monospace;font-size:15px;font-weight:600;display:flex}.coords span{flex:1;align-items:center;display:flex}.coords-ranks{flex-direction:column;grid-row:2/10}.coords-ranks-left{grid-column:1;padding-right:14px}.coords-ranks-left span{justify-content:flex-end}.coords-ranks-right{grid-column:10;padding-left:14px}.coords-ranks-right span{justify-content:flex-start}.coords-files{flex-direction:row;grid-column:2/10}.coords-files span{justify-content:center}.coords-files-top{grid-row:1;padding-bottom:8px}.coords-files-bottom{grid-row:10;padding-top:8px}.board{-webkit-user-select:none;user-select:none;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);width:100%;height:100%;display:grid;position:relative}.square{cursor:pointer;transition:filter var(--dur-fast);position:relative}.square.tile-light{background-color:var(--tile-light)}.square.tile-dark{background-color:var(--tile-dark)}.square:hover{filter:brightness(1.5)}.square:before,.square:after{content:"";pointer-events:none;position:absolute}.square.tile-light.legal-move,.square.tile-light.legal-ep{--dot-color:rgba(var(--ink), .55)}.square.tile-dark.legal-move,.square.tile-dark.legal-ep{--dot-color:rgba(var(--paper), .6)}.square.legal-move.drag-hover{--dot-color:var(--valid)}.square.legal-ep.drag-hover{--dot-color:var(--danger)}.square.selected{--dot-color:var(--warn)}.square.legal-move:before,.square.legal-ep:before,.square.selected:before{inset:var(--dot-inset);background:var(--dot-color);border-radius:50%}.square.tile-light.legal-capture{--capture-color:rgba(var(--ink), .55)}.square.tile-dark.legal-capture{--capture-color:rgba(var(--paper), .6)}.square.legal-capture.drag-hover{--capture-color:var(--danger)}.square.legal-capture:before{background:linear-gradient(135deg, var(--capture-color) 50%, transparent 50%) top left / var(--triangle-size) var(--triangle-size) no-repeat, linear-gradient(225deg, var(--capture-color) 50%, transparent 50%) top right / var(--triangle-size) var(--triangle-size) no-repeat, linear-gradient(315deg, var(--capture-color) 50%, transparent 50%) bottom right / var(--triangle-size) var(--triangle-size) no-repeat, linear-gradient(45deg, var(--capture-color) 50%, transparent 50%) bottom left / var(--triangle-size) var(--triangle-size) no-repeat;inset:0}.square.in-check:after{background:var(--danger);animation:check-pulse var(--dur-pulse) ease-in-out infinite;inset:0}@keyframes check-pulse{0%,to{opacity:.6}50%{opacity:.95}}.piece-layer{z-index:var(--z-piece);pointer-events:none;position:absolute;inset:0}.piece{pointer-events:auto;cursor:pointer;touch-action:none;width:12.5%;height:12.5%;transition:left var(--dur-slide), top var(--dur-slide), transform var(--dur-quick), filter var(--dur-quick), opacity var(--dur-slide);position:absolute}.piece.draggable{cursor:grab}.piece img{pointer-events:none;image-rendering:auto;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(var(--ink), .5)) drop-shadow(0 0 1px rgba(var(--paper), .35));display:block}.piece.draggable:hover{z-index:var(--z-piece-hover);transform:scale(1.08)translateY(-3%)}.piece.dragging{cursor:grabbing;z-index:var(--z-piece-dragging);transition:none;transform:scale(1.08)}.piece.captured{opacity:0;pointer-events:none;transform:scale(.4)}.piece.entering{animation:piece-pop var(--dur-slide)}@keyframes piece-pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.overlay{z-index:var(--z-overlay);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay[hidden]{display:none}.promo-picker{background:var(--scrim);gap:10px}.promo-choice{aspect-ratio:1;background:var(--panel);border:var(--hairline);border-radius:var(--radius);cursor:pointer;width:13%;transition:background var(--dur-fast), border-color var(--dur-fast);padding:6px}.promo-choice:hover{background:var(--panel-hover);border-color:var(--text-dim)}.promo-choice img{width:100%;height:100%}.game-over-overlay{background:var(--scrim)}.game-over-card{background:var(--panel);border:var(--hairline);animation:card-in var(--dur-card) ease;flex-direction:column;align-items:center;gap:20px;padding:32px 44px;display:flex}@keyframes card-in{0%{opacity:0}to{opacity:1}}.game-over-card>div{letter-spacing:.03em;text-align:center;font-size:1.6em;font-weight:700}@media (width<=900px){.navbar{gap:10px 16px;padding:12px 16px}.status{margin:0}.navbar-actions{margin-left:auto}.layout{flex-direction:column}#board-container{flex:0 auto;width:100%;padding:12px}.panel{border-left:none;border-top:var(--hairline);flex:1;width:100%;min-height:0;max-height:140px}.panel-header{padding:10px 16px}.move-row{padding:3px 16px}}