.chess-page{display:grid;gap:1rem}.chess-intro,.chess-setup,.chess-bridge,.chess-game,.chess-help{padding:1.3rem}.chess-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.chess-intro h1{margin:.15rem 0 .4rem}.chess-intro p:last-child{max-width:60rem;margin:0}.chess-settings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}.chess-field{display:grid;gap:.35rem}.chess-field span{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.68)}.chess-field select,.chess-field input{width:100%;padding:.72rem .8rem;border-radius:.65rem;border:1px solid rgba(226,164,108,.35);background:#121c23;color:inherit}.chess-setup-actions{display:flex;align-items:center;gap:.75rem;margin-top:1rem;flex-wrap:wrap}.chess-bridge{border-color:rgba(105,198,255,.3);background:linear-gradient(140deg,rgba(24,54,75,.55),rgba(17,27,34,.7))}.chess-bridge h2,.chess-game h2{margin:.1rem 0 .4rem}.chess-bridge p{margin:.35rem 0}.chess-bridge-tools{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}.chess-bridge input{flex:1 1 260px;min-width:0;padding:.7rem .8rem;border-radius:.6rem;border:1px solid rgba(105,198,255,.35);background:#0b1720;color:inherit}.chess-game-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.chess-game-head [data-status]{margin:.15rem 0 0;color:#e2a46c}.chess-table{display:grid;grid-template-columns:minmax(280px,680px) minmax(180px,1fr);gap:1rem;align-items:start;margin-top:1rem}.chess-board-wrap{width:min(100%,680px);aspect-ratio:1;margin:auto;border:10px solid #6f472c;border-radius:.55rem;background:#6f472c;box-shadow:0 14px 40px rgba(0,0,0,.35)}.chess-board{display:grid;grid-template-columns:repeat(8,1fr);width:100%;height:100%;overflow:hidden}.chess-square{position:relative;display:grid;place-items:center;min-width:0;aspect-ratio:1;border:0;padding:0;cursor:pointer}.chess-square.light{background:#e4c69b}.chess-square.dark{background:#9b623f}.chess-square:hover,.chess-square.selected{box-shadow:inset 0 0 0 4px rgba(226,164,108,.85)}.chess-square.in-check{box-shadow:inset 0 0 0 5px #d94b54, inset 0 0 25px rgba(217,75,84,.7)}.chess-piece{display:block;width:82%;height:82%;background-image:url('piece-sprites.svg');background-repeat:no-repeat;background-size:1200% 400%;background-position:calc(var(--sprite-x) * -100% / 11) calc(var(--sprite-y) * -100% / 3);filter:drop-shadow(0 4px 3px rgba(0,0,0,.35));pointer-events:none}.chess-piece.black-piece{filter:brightness(.68) saturate(1.15) drop-shadow(0 4px 3px rgba(0,0,0,.45))}.chess-side{display:grid;gap:.85rem}.chess-side-panel{padding:1rem;border:1px solid rgba(255,255,255,.12);border-radius:.75rem;background:rgba(10,18,23,.42)}.chess-side-panel h3{margin:0 0 .65rem;font-size:1rem}.chess-move-log{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem .8rem;margin:0;padding-left:1.7rem;max-height:300px;overflow:auto}.chess-move-log li{padding:.15rem 0;color:rgba(255,255,255,.85)}.chess-caption{font-size:.86rem;color:rgba(255,255,255,.68);margin:0}.chess-help details{padding:.1rem}.chess-help summary{cursor:pointer;font-weight:700}.chess-help p{color:rgba(255,255,255,.78)}
@media(max-width:850px){.chess-settings{grid-template-columns:repeat(2,minmax(0,1fr))}.chess-table{grid-template-columns:1fr}.chess-board-wrap{width:min(100%,620px)}.chess-intro{display:block}.chess-intro .button{margin-top:1rem}}
@media(max-width:480px){.chess-settings{grid-template-columns:1fr}.chess-intro,.chess-setup,.chess-bridge,.chess-game,.chess-help{padding:1rem}.chess-board-wrap{border-width:6px}.chess-piece{width:90%;height:auto}}

/* The atlas cells are 112×128; keep each crop at that ratio so pieces never bleed into neighbors. */
.chess-square{overflow:hidden}
.chess-piece{height:auto;aspect-ratio:112 / 128}
.chess-square.legal-destination{box-shadow:inset 0 0 0 3px rgba(105,198,255,.72), inset 0 0 20px rgba(105,198,255,.22)}