:root{color:#182e2b;background:#f4f3ee;font-family:system-ui,sans-serif;line-height:1.5;font-size:17px}*{box-sizing:border-box}body{margin:0}main{max-width:1100px;padding:1.2rem;margin:auto}header,.levels,.controls{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}header h1{margin:0}header a{margin-left:auto}h1{font-size:1.8rem}h2{font-size:1.25rem}h3{font-size:1.1rem}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #456c62;border-radius:.4rem;background:#fff;color:#182e2b;padding:.55rem .8rem;min-height:44px}button:disabled{opacity:.6;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #ec9c18;outline-offset:2px}a{color:#145b69}.notice{border-left:5px solid #477567;background:#e2ece6;padding:.75rem}.levels>div{flex:1;min-width:230px}small{display:block;font-size:.82rem}fieldset{border:1px solid #91a69d;border-radius:.5rem;margin:1rem 0}.mode label{display:inline-flex;margin-right:1rem}label{display:block;margin:.6rem 0}input:not([type=checkbox]):not([type=radio]),select{display:block;max-width:100%;padding:.6rem;border:1px solid #456c62;border-radius:.4rem}input[type=checkbox],input[type=radio]{width:1.2rem;height:1.2rem;margin-right:.6rem}.play{display:grid;grid-template-columns:minmax(280px,600px) minmax(220px,1fr);gap:2rem}.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;width:100%;border:3px solid #34564c;border-radius:4px}.square{border:0;border-radius:0;padding:0;position:relative;aspect-ratio:1;min-width:0;min-height:0;touch-action:none;-webkit-user-select:none;user-select:none}.square.light{background:#e5eadb}.square.dark{background:#70988a}.square>span{font-family:DejaVu Sans,Segoe UI Symbol,serif;font-size:clamp(24px,5.2vw,53px);line-height:1;pointer-events:none}.white-piece{color:#fff;-webkit-text-stroke:1px #162d28;text-shadow:0 1px 2px #162d28}.black-piece{color:#15221e}.square small{position:absolute;bottom:0;left:3px;font-size:.55rem;pointer-events:none}.square.selected{box-shadow:inset 0 0 0 4px #e5a32c}.square.target:after{content:"";position:absolute;top:34%;right:34%;bottom:34%;left:34%;border:4px solid #153e36;border-radius:50%;pointer-events:none}.controls{margin:.8rem 0;gap:.5rem}aside{padding:1rem;background:#fff;border-radius:.7rem}.moves{overflow-wrap:anywhere}.promotion{position:fixed;z-index:2;top:30%;left:50%;transform:translate(-50%);background:#fff;border:4px solid #456c62;border-radius:.8rem;box-shadow:0 0 0 100vmax #0008;padding:1rem;width:min(90vw,500px)}.promotion button{margin:.25rem}#settings{border-top:1px solid #91a69d;margin-top:2rem;padding-top:1rem}footer{margin-top:2rem;font-size:.8rem}@media(max-width:760px){.play{grid-template-columns:1fr;gap:1rem}main{padding:.7rem}.square>span{font-size:clamp(25px,8vw,55px)}header a{margin-left:0}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}