body:has(.chess-solo) .main{padding:4px 0}
body:has(.chess-solo) .main.container{width:100%}
body:has(.chess-solo) .footer{display:none}
.chess-solo{--chess-size:min(calc(100vw - 16px),calc(100dvh - 150px),620px);min-height:calc(100dvh - 76px);display:grid;place-items:start center}
.chess-game{display:grid;justify-items:center;gap:2px;width:100%}
.chess-head{text-align:center;line-height:1.15}
.chess-head h1{font-size:clamp(1rem,4vw,1.3rem);margin:0}
.chess-head p{margin:2px;font-size:.82rem;font-weight:700}
.chess-board{width:var(--chess-size);height:var(--chess-size);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));border:2px solid #382b20;position:relative}
.chess-square{border:0;padding:0;width:100%;height:100%;min-width:0;min-height:0;display:grid;place-items:center;position:relative;font-size:calc(var(--chess-size)/11);line-height:1}
.chess-square:disabled{opacity:1}
.chess-square.light{background:#ead8b7}
.chess-square.dark{background:#7b5a42}
.chess-square.selectable::after{content:'';position:absolute;inset:7%;border:2px dashed #f5d142}
.chess-square.selected{outline:3px solid #fff;outline-offset:-3px}
.chess-square.destination::after{content:'';width:22%;height:22%;border-radius:50%;background:#4de078;box-shadow:0 0 0 2px #174b25}
.chess-square.capture::after{content:'';position:absolute;inset:5%;border:3px solid #ed6a5a;border-radius:50%}
.chess-square.last{box-shadow:inset 0 0 0 4px #e7c84b99}
.chess-square.check{box-shadow:inset 0 0 0 4px #e33}
.chess-coord{position:absolute;font-size:8px;opacity:.7;left:2px;bottom:1px}
.chess-piece{display:block;max-width:100%;max-height:100%;line-height:1;margin:0;place-self:center;pointer-events:none;filter:drop-shadow(0 1px 1px #0005);z-index:1}
.chess-message{margin:2px;min-height:1.2em;font-size:.78rem;font-weight:800}
.chess-promotion{position:fixed;inset:0;background:#0007;display:grid;place-items:center;z-index:20}
.chess-promotion[hidden]{display:none}
.chess-promotion-box{background:#fff;padding:10px;border-radius:10px;display:flex;gap:8px}
.chess-promotion button{font-size:2rem;min-width:50px}
.chess-anim-piece{position:fixed;z-index:30;pointer-events:none;transition:transform 330ms ease;font-size:3rem}
.chess-ready{width:min(430px,100%);text-align:center;margin:auto}
.chess-ready p{margin:.5rem}
@media(max-width:520px){.chess-solo{--chess-size:min(calc(100vw - 8px),calc(100dvh - 142px));min-height:calc(100dvh - 68px)}.chess-square{font-size:calc(var(--chess-size)/10.5)}}