:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#0a0a0a;color:#eceae5}
*{box-sizing:border-box}body{margin:0}main{min-height:100vh;min-height:100svh;display:grid;place-items:center}
button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid #e0b24a;outline-offset:6px}
.logo{padding:20px;background:none;border:0;border-radius:8px;transition:opacity .18s}.logo:hover{opacity:.8}.logo img{display:block;width:clamp(120px,22vw,230px);height:auto}
dialog{width:min(94vw,590px);max-height:96vh;max-height:96svh;padding:24px;background:#101211;border:1px solid #343630;border-radius:12px;color:inherit;overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.88)}header,footer{display:flex;justify-content:space-between;align-items:center;gap:16px}h1{font-size:22px;font-weight:450;margin:0}.instruction{color:#aaa;font-size:13px;margin:12px 0 20px}.text-button{background:none;border:1px solid #44463f;border-radius:4px;padding:9px 12px;font-size:12px;white-space:nowrap}
#board{width:min(100%,60svh);aspect-ratio:1;margin:auto;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);overflow:hidden;border-radius:4px;border:1px solid #454943}
.square{position:relative;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;line-height:1;user-select:none;touch-action:manipulation;background:#263449;font-size:clamp(23px,6vmin,48px)}.square.dark{background:#111b28}.square.selected{box-shadow:inset 0 0 0 3px #e0b24a}.piece.white{color:#f4f7fb;text-shadow:0 1px 2px #000}.piece.black{color:#090d14;text-shadow:0 1px 1px #a9b6c8}.coordinate{position:absolute;bottom:3px;left:4px;color:#b3bdca;font:9px system-ui;opacity:.7}footer{margin-top:18px}#access-status{font-size:12px;color:#aaa;line-height:1.5;margin:0}
@media(max-width:480px){dialog{padding:18px}header{gap:8px}.logo img{width:160px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}