*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;display:flex;justify-content:center;align-items:center;background:#1a1a2e;font-family:Segoe UI,system-ui,sans-serif;color:#e0e0e0}#app{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px}h1{font-size:1.8rem;letter-spacing:2px}#status{font-size:1.1rem;min-height:1.5em;padding:6px 18px;border-radius:6px;background:#16213e}#board{display:grid;grid-template-columns:repeat(8,1fr);width:min(90vw,90vh,560px);height:min(90vw,90vh,560px);border:3px solid #0f3460;border-radius:4px;overflow:hidden;-webkit-user-select:none;user-select:none}.square{display:flex;justify-content:center;align-items:center;font-size:min(11vw,11vh,60px);cursor:pointer;position:relative;transition:background .15s}.light{background:#e8d4b0}.dark{background:#b58863}.square.selected{background:#f6f67c!important}.square.move-target:after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:#00000040}.square.capture-target{box-shadow:inset 0 0 0 4px #0000004d}.square.last-from,.square.last-to{background:#9bc70073!important}.square.in-check{background:radial-gradient(circle,#ff0000 0%,#cc0000 40%,transparent 70%)!important}.piece{pointer-events:none;line-height:1}#promotion-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;justify-content:center;align-items:center;z-index:10}#promotion-modal.hidden{display:none}.modal-content{background:#16213e;padding:24px 32px;border-radius:12px;text-align:center}.modal-content p{margin-bottom:16px;font-size:1.1rem}#promotion-choices{display:flex;gap:12px;justify-content:center}#promotion-choices button{font-size:48px;background:#e8d4b0;border:2px solid #0f3460;border-radius:8px;width:70px;height:70px;cursor:pointer;transition:transform .1s}#promotion-choices button:hover{transform:scale(1.1)}#reset-btn{padding:10px 28px;font-size:1rem;background:#0f3460;color:#e0e0e0;border:none;border-radius:6px;cursor:pointer;transition:background .2s}#reset-btn:hover{background:#1a4a8a}