:root{--board-size: min(85vw, 85vh, 560px);--square-size: calc(var(--board-size) / 8);--light-square: #f0d9b5;--dark-square: #b58863;--selected: rgba(255, 255, 0, .45);--last-move: rgba(155, 199, 0, .42);--check: radial-gradient(ellipse at center, rgba(255, 0, 0, .6) 0%, rgba(255, 0, 0, 0) 70%);--move-dot: rgba(0, 0, 0, .2);--capture-ring: rgba(0, 0, 0, .2);--bg: #312e2b;--surface: #272522;--surface-light: #3d3a37;--text: #f0f0f0;--text-muted: #999;--accent: #81b64c;--danger: #e74c3c;--border-radius: 6px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);display:flex;justify-content:center;align-items:center;min-height:100dvh;-webkit-user-select:none;user-select:none}#app,.chess-app{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.app-layout{display:flex;gap:20px;align-items:flex-start;max-width:100%;padding:10px}.center-area{display:flex;flex-direction:column;align-items:center;gap:12px}.turn-indicator{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:600;padding:8px 16px;background:var(--surface);border-radius:var(--border-radius)}.turn-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--text-muted)}.turn-dot.white{background:#fff}.turn-dot.black{background:#000}.check-badge{background:var(--danger);color:#fff;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:.5px}.board-wrapper{display:flex;flex-direction:column;align-items:center}.file-labels{display:grid;grid-template-columns:repeat(8,var(--square-size));margin-left:calc(var(--square-size) * .35);margin-right:calc(var(--square-size) * .35)}.file-labels span{text-align:center;font-size:.75rem;color:var(--text-muted);padding:2px 0}.board{display:grid;grid-template-columns:auto repeat(8,var(--square-size)) auto;grid-template-rows:repeat(8,var(--square-size));border:3px solid var(--surface-light);border-radius:3px;box-shadow:0 8px 30px #0006}.rank-label{display:flex;align-items:center;justify-content:center;width:calc(var(--square-size) * .35);font-size:.75rem;color:var(--text-muted)}.square{width:var(--square-size);height:var(--square-size);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.square.light{background:var(--light-square)}.square.dark{background:var(--dark-square)}.square.selected{background:var(--selected)!important}.square.last-move{background:var(--last-move)!important}.square.in-check{background:var(--check)!important}.square.legal-target{cursor:pointer}.move-indicator{width:28%;height:28%;border-radius:50%;background:var(--move-dot);pointer-events:none}.capture-indicator{position:absolute;inset:0;border-radius:50%;border:5px solid var(--capture-ring);pointer-events:none}.piece{font-size:calc(var(--square-size) * .82);line-height:1;cursor:grab;z-index:1;transition:transform .05s;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.3))}.piece:active{cursor:grabbing}.piece.dragging{opacity:.4}.white-piece{color:#fff;-webkit-text-stroke:.5px #333;text-shadow:0 1px 3px rgba(0,0,0,.3)}.black-piece{color:#000;text-shadow:0 1px 2px rgba(0,0,0,.2)}.controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.btn{padding:8px 18px;border:none;border-radius:var(--border-radius);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:#6fa03a}.btn-secondary{background:var(--surface-light);color:var(--text)}.btn-secondary:hover:not(:disabled){background:#4a4744}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:#c0392b}.right-sidebar{display:flex;flex-direction:column;gap:12px;min-width:180px;max-width:220px}.move-history{background:var(--surface);border-radius:var(--border-radius);overflow:hidden}.move-history h3{padding:10px 12px;font-size:.9rem;border-bottom:1px solid var(--surface-light);color:var(--text-muted)}.move-list{max-height:350px;overflow-y:auto;padding:4px 0}.move-list::-webkit-scrollbar{width:6px}.move-list::-webkit-scrollbar-thumb{background:var(--surface-light);border-radius:3px}.move-row{display:grid;grid-template-columns:35px 1fr 1fr;padding:3px 12px;font-size:.85rem;font-family:SF Mono,Fira Code,Consolas,monospace}.move-row:hover{background:var(--surface-light)}.move-number{color:var(--text-muted)}.move-white,.move-black{padding:1px 6px;border-radius:3px}.captured-panel{background:var(--surface);border-radius:var(--border-radius);padding:8px 12px;min-width:50px}.captured-panel h4{font-size:.75rem;color:var(--text-muted);margin-bottom:4px;white-space:nowrap}.captured-pieces{display:flex;flex-wrap:wrap;gap:2px}.captured-piece{font-size:1.2rem;line-height:1}.modal-overlay{position:fixed;inset:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-over-modal,.draw-offer-modal{background:var(--surface);border-radius:12px;padding:32px 40px;text-align:center;box-shadow:0 12px 40px #00000080;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.game-over-modal h2{font-size:1.8rem;margin-bottom:8px}.game-over-modal p{color:var(--text-muted);font-size:1.1rem;margin-bottom:24px}.draw-offer-modal h3{margin-bottom:20px}.draw-offer-btns{display:flex;gap:12px;justify-content:center}.promotion-dialog{background:var(--surface);border-radius:12px;padding:24px 32px;text-align:center;box-shadow:0 12px 40px #00000080;animation:slideUp .3s ease}.promotion-dialog h3{margin-bottom:16px;font-size:1.1rem}.promotion-pieces{display:flex;gap:12px;justify-content:center}.promotion-btn{width:64px;height:64px;font-size:2.5rem;background:var(--surface-light);border:2px solid transparent;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;color:var(--text)}.promotion-btn:hover{border-color:var(--accent);background:#3d3a37;transform:scale(1.1)}@media(max-width:900px){.app-layout{flex-direction:column;align-items:center;gap:10px}.right-sidebar{flex-direction:row;min-width:unset;max-width:unset;width:100%;justify-content:center;flex-wrap:wrap}.captured-panel{min-width:unset}.move-history{flex:1;min-width:200px}.move-list{max-height:150px}}@media(max-width:600px){:root{--board-size: min(95vw, 60vh, 420px)}html,body{overflow:auto}body{align-items:flex-start;padding-top:5px}.app-layout{padding:5px;gap:6px}.turn-indicator{font-size:.9rem;padding:6px 12px}.controls{gap:6px}.btn{padding:6px 12px;font-size:.8rem}.rank-label{width:calc(var(--square-size) * .3);font-size:.6rem}.file-labels span{font-size:.6rem}.file-labels{margin-left:calc(var(--square-size) * .3);margin-right:calc(var(--square-size) * .3)}.right-sidebar{gap:6px}.captured-panel{padding:4px 8px}.captured-panel h4{font-size:.65rem}.captured-piece{font-size:1rem}.move-history h3{padding:6px 8px;font-size:.8rem}.move-row{font-size:.75rem;padding:2px 8px}.promotion-btn{width:50px;height:50px;font-size:2rem}}@media(pointer:coarse){.square{-webkit-tap-highlight-color:transparent}.piece{cursor:pointer}}@media(max-width:900px){.app-layout>.captured-panel:first-child{display:none}}