/* Fixed, responsive play surface: no browser-page scrolling during a match. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{min-height:100dvh}header{height:52px;padding:0 clamp(12px,4vw,7vw)}header span{font-size:.64rem}header button{padding:8px 12px;font-size:.8rem}main{max-width:1420px;height:calc(100dvh - 52px);margin:0 auto;padding:clamp(8px,1.8vh,16px) clamp(10px,2vw,28px);display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(8px,1.5vh,14px);overflow:hidden}.intro{min-height:0;gap:clamp(8px,1.5vw,16px)}.intro>div,.rules{padding:clamp(10px,1.6vw,18px)}.intro h1{font-size:clamp(1.45rem,3.3vw,2.8rem);margin:3px 0}.intro p{margin:5px 0;font-size:clamp(.75rem,1.25vw,.95rem);line-height:1.32}.rules{font-size:clamp(.72rem,1.1vw,.86rem);line-height:1.28}.rule-card{gap:1px}.game{margin-top:0;min-height:0;grid-template-columns:minmax(0,1fr) clamp(210px,23vw,270px);gap:clamp(8px,1.8vw,20px);overflow:hidden}.table{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.status{padding:9px 14px}.status b{font-size:.9rem}.status #alert{font-size:.78rem}.history{padding:6px 14px;max-height:43px;overflow:hidden;font-size:.75rem}.history ol{margin:3px 0 0;min-height:0;max-height:16px;overflow:hidden;font-size:.72rem;display:block;white-space:nowrap}#board{height:100%;width:auto;max-width:100%;min-height:0;justify-self:center;align-self:center}aside{height:100%;min-height:0;padding:13px;overflow:hidden}aside h2{font-size:1.15rem}aside h3,aside ul{display:none}aside hr{margin:10px 0}aside #start{margin-top:8px}.seat{padding:6px 1px;font-size:.8rem}
@media(max-width:800px){header{height:48px}main{height:calc(100dvh - 48px)}.intro{grid-template-columns:1fr}.intro .rules{display:none}.intro>div{padding:8px 12px}.intro h1{font-size:1.55rem}.intro p:last-child{display:none}.game{grid-template-columns:minmax(0,1fr) 112px;gap:8px}.game aside{order:initial;padding:8px}.game aside .eyebrow{display:none}.game aside h2{font-size:.9rem}.game aside label{gap:3px;font-size:.72rem}.game aside select,.game aside button{padding:7px 5px;font-size:.72rem}.seat{font-size:.68rem;line-height:1.15}.seat em{font-size:.62rem}.status{padding:7px 10px}.status #alert{font-size:.7rem}#board{border-width:4px}}
@media(max-width:520px){header span{display:none}header{gap:10px}.game{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.game aside{height:auto;display:grid;grid-template-columns:1fr auto;align-items:end;gap:5px;padding:7px 9px}.game aside h2,.game aside .seat{display:none}.game aside label{font-size:.68rem}.game aside #start{width:auto;margin:0;padding:8px 12px}.game aside hr{display:none}.status{grid-template-columns:1fr 1.25fr}.history{display:none}}
@media(max-height:650px) and (orientation:landscape){.intro{display:none}main{grid-template-rows:minmax(0,1fr)}.game{grid-template-columns:minmax(0,1fr) 180px}.game aside{padding:8px}.seat{padding:4px 1px}.history{display:none}}
/* Portrait phones need a board constrained by both width and the remaining height. */
@media(max-width:520px){.table{min-width:0}#board{width:min(100%,calc(100dvh - 300px));height:auto;max-width:100%;max-height:none}}
@media(max-height:650px) and (orientation:landscape){#board{width:auto;height:100%;max-width:100%;max-height:100%}}

/* Gameplay comes first: the board owns the opening screen. */
main{grid-template-rows:minmax(0,1fr);gap:0}.game{margin-top:0}.compact-rules{margin-top:8px;font-size:.75rem;line-height:1.3;color:#ded4f4}.compact-rules span{display:block}.compact-rules b{color:#ffd869}

/* Never let empty ranks collapse: every legal chess destination must remain
   a full-size, tappable square on both desktop and mobile. */
#board{grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));overflow:hidden}
#board .sq{min-height:0;height:100%;line-height:1;overflow:hidden}