:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#171923;color:#f7f3fa}*{box-sizing:border-box}body{margin:0}main{max-width:1000px;margin:auto;padding:1rem}header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}h1{font-size:1.5rem}h2{font-size:1.1rem}header span{font-size:.8rem;color:#c9c1d5}.layout{display:grid;grid-template-columns:minmax(0,600px) minmax(180px,1fr);gap:1.5rem}.bubble{background:#57416b;border-radius:1rem 1rem 1rem .2rem;padding:.8rem 1rem;min-height:3rem;overflow-wrap:anywhere}.error{background:#782f3a;padding:.75rem;border-radius:.5rem}.board{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;width:100%;touch-action:none;-webkit-user-select:none;user-select:none}.square{position:relative;border:0;border-radius:0;padding:0;font-size:clamp(1.6rem,7vw,3.8rem);line-height:1;cursor:pointer;touch-action:none;color:#15151c;text-shadow:0 1px 2px #fff}.square.light{background:#e7d8c3}.square.dark{background:#936f80}.square.selected{box-shadow:inset 0 0 0 4px #f6d66b}.square.target:after{content:"";position:absolute;top:36%;right:36%;bottom:36%;left:36%;border-radius:50%;background:#2a293c80;pointer-events:none}.square small{position:absolute;left:3px;bottom:1px;font-size:.6rem;text-shadow:none}.drag-piece{position:fixed;transform:translate(-50%,-50%);pointer-events:none;font-size:clamp(1.6rem,7vw,3.8rem);color:#15151c;text-shadow:0 1px 2px #fff;z-index:5}button:not(.square){background:#55416c;color:#fff;border:0;border-radius:.4rem;padding:.5rem .75rem;cursor:pointer}button:disabled{opacity:.5;cursor:default}.actions,.promotion{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}.promotion{align-items:center;padding:.8rem;background:#32303e;border-radius:.5rem}.promotion button{font-size:1.3rem}aside{overflow-wrap:anywhere}aside ul{padding-left:1rem}aside li{margin-bottom:.5rem}.moves{line-height:1.7}@media(max-width:650px){.layout{grid-template-columns:1fr}}