*{margin:0;padding:0;box-sizing:border-box}:root{--light-square: #f0d9b5;--dark-square: #b58863;--highlight: rgba(255, 255, 0, .4);--legal-move: rgba(0, 0, 0, .15);--selected: rgba(20, 85, 180, .45);--last-move: rgba(155, 199, 0, .41);--check: radial-gradient(ellipse at center, rgba(255, 0, 0, .6) 0%, rgba(255, 0, 0, 0) 70%);--board-size: min(90vw, 90vh, 560px);--square-size: calc(var(--board-size) / 8)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#312e2b;color:#e0d8cf;min-height:100vh;display:flex;justify-content:center;align-items:center}#root{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px;width:100%;max-width:800px}.board-container{position:relative}.board{display:grid;grid-template-columns:repeat(8,var(--square-size));grid-template-rows:repeat(8,var(--square-size));border:3px solid #1a1816;border-radius:2px}.square{width:var(--square-size);height:var(--square-size);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.square.light{background:var(--light-square)}.square.dark{background:var(--dark-square)}.square.selected{background:var(--selected)}.square.last-move{background:var(--last-move)}.square.check{background-image:var(--check)}.square.drag-over{box-shadow:inset 0 0 0 3px #1455b4b3}.square .legal-dot{position:absolute;width:30%;height:30%;border-radius:50%;background:var(--legal-move);pointer-events:none}.square .legal-capture{position:absolute;width:100%;height:100%;border-radius:50%;border:5px solid var(--legal-move);pointer-events:none;box-sizing:border-box}.square .coord-rank{position:absolute;top:2px;left:3px;font-size:10px;font-weight:700;pointer-events:none}.square .coord-file{position:absolute;bottom:1px;right:3px;font-size:10px;font-weight:700;pointer-events:none}.square.light .coord-rank,.square.light .coord-file{color:var(--dark-square)}.square.dark .coord-rank,.square.dark .coord-file{color:var(--light-square)}.piece{display:flex;align-items:center;justify-content:center;width:85%;height:85%;pointer-events:none;z-index:1}.piece.draggable{pointer-events:auto;cursor:grab}.piece.draggable:active{cursor:grabbing}.piece img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}.promotion-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:20}.promotion-dialog{background:#2b2926;border-radius:8px;padding:12px;display:flex;gap:8px;box-shadow:0 8px 32px #00000080}.promotion-option{width:calc(var(--square-size) * .9);height:calc(var(--square-size) * .9);display:flex;align-items:center;justify-content:center;font-size:calc(var(--square-size) * .75);background:var(--light-square);border:2px solid transparent;border-radius:6px;cursor:pointer;transition:border-color .15s}.promotion-option:hover{border-color:#7fa8d4}.status-bar{font-size:18px;font-weight:600;text-align:center;min-height:28px}.status-bar.check{color:#e8a838}.status-bar.checkmate{color:#e85838}.status-bar.stalemate{color:#a8a8a8}.move-panel{width:var(--board-size);max-width:100%}.move-panel .email-row{display:flex;gap:8px;margin-bottom:12px;align-items:center}.move-panel .email-row label{font-size:13px;white-space:nowrap;color:#a09888}.move-panel .email-row input{flex:1;padding:6px 10px;background:#1e1c1a;border:1px solid #4a4540;border-radius:4px;color:#e0d8cf;font-size:14px;outline:none}.move-panel .email-row input:focus{border-color:#7fa8d4}.move-panel .controls{display:flex;gap:8px;align-items:center;margin-bottom:12px}.move-panel .controls button{padding:6px 14px;background:#3d3a36;border:1px solid #555;border-radius:4px;color:#e0d8cf;cursor:pointer;font-size:14px;transition:background .15s}.move-panel .controls button:hover:not(:disabled){background:#4d4a46}.move-panel .controls button:disabled{opacity:.4;cursor:default}.move-panel .controls .send-btn{background:#2d7a3a;border-color:#3a9a4a}.move-panel .controls .send-btn:hover:not(:disabled){background:#3a9a4a}.move-panel .history{display:flex;flex-wrap:wrap;gap:4px;font-size:13px}.move-panel .history .history-item{padding:3px 8px;background:#3d3a36;border:1px solid transparent;border-radius:3px;cursor:pointer;color:#c0b8af;font-family:monospace}.move-panel .history .history-item:hover{background:#4d4a46}.move-panel .history .history-item.active{background:#4a6880;border-color:#7fa8d4;color:#e0d8cf}.move-panel .history .history-item.response{border-left:3px solid #2d7a3a}.new-game{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}.new-game h1{font-size:32px;color:#e0d8cf}.new-game p{color:#a09888;max-width:400px;line-height:1.5}.new-game form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:360px}.new-game form label{text-align:left;font-size:13px;color:#a09888}.new-game form input{padding:10px 14px;background:#1e1c1a;border:1px solid #4a4540;border-radius:6px;color:#e0d8cf;font-size:16px;outline:none}.new-game form input:focus{border-color:#7fa8d4}.new-game form button{padding:12px;background:#2d7a3a;border:none;border-radius:6px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:background .15s}.new-game form button:hover{background:#3a9a4a}.settings-wrapper{position:absolute;top:-36px;right:0;z-index:30}.settings-gear{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#a09888;cursor:pointer;border-radius:4px;transition:color .15s,background .15s;margin-left:auto}.settings-gear:hover{color:#e0d8cf;background:#ffffff14}.settings-dropdown{position:absolute;top:34px;right:0;background:#2b2926;border:1px solid #4a4540;border-radius:8px;padding:12px;min-width:220px;box-shadow:0 8px 32px #00000080;display:flex;flex-direction:column;gap:12px}.settings-section{display:flex;flex-direction:column;gap:6px}.settings-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#a09888}.settings-options{display:flex;flex-wrap:wrap;gap:6px}.settings-option{display:flex;align-items:center;gap:6px;padding:5px 10px;background:#3d3a36;border:2px solid transparent;border-radius:6px;color:#c0b8af;cursor:pointer;font-size:12px;transition:border-color .15s,background .15s}.settings-option:hover{background:#4d4a46}.settings-option.active{border-color:#5b8db8;background:#3a4a58;color:#e0d8cf}.settings-preview-piece{width:26px;height:26px;display:block}.settings-swatch{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:22px;height:22px;border-radius:3px;overflow:hidden;flex-shrink:0}.settings-swatch span{display:block}.site-footer{margin-top:24px;font-size:13px}.site-footer a{color:#a09888;text-decoration:none}.site-footer a:hover{color:#e0d8cf}