/* Keep the board and its controls together at desktop sizes; help becomes a mobile sheet. */
main.responsive-game{max-width:1100px;padding:20px 28px 24px}
.responsive-game header{margin:8px 0 18px;gap:24px}
.responsive-game h1{font-size:clamp(26px,3.5vw,38px);margin:0;letter-spacing:-1.2px}
.responsive-game .topline{justify-content:flex-start;gap:12px}
.responsive-game .topline .eyebrow{margin-right:auto;letter-spacing:2px}
.responsive-game .score{padding:8px 18px;min-width:88px}
.game-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:32px;align-items:start}
.game-stage{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px;border-radius:24px;background:#0b223080;border:1px solid #42657566}
.responsive-game canvas{display:block;width:min(100%,calc((100svh - 215px)*var(--board-ratio)),440px);height:auto;max-height:none;margin:0 auto;border-width:6px;border-radius:16px}
.game-panel{min-width:0;padding:4px 0;display:flex;flex-direction:column;max-height:calc(100svh - 190px)}
.game-panel> :not(.guide-home){flex-shrink:0}
.responsive-game #details{font-size:13px;line-height:1.6;text-align:left;margin:0 0 12px;min-height:0}
.responsive-game #status{font-size:15px;line-height:1.5;text-align:left;margin:0 0 14px;min-height:0}
.responsive-game #extras,.responsive-game .controls{justify-content:flex-start;gap:8px;margin:0 0 14px}
.responsive-game #pieces{flex-wrap:wrap;justify-content:flex-start;margin:0 0 14px;gap:8px}
.responsive-game #pieces:empty,.responsive-game #extras:empty{display:none}
.guide-title{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#7ee0cb;margin:0 0 10px}
.guide-home{overflow:auto;min-height:70px;border-top:1px solid #42657580;padding-top:16px}
.responsive-game .subtitle{max-width:none;font-size:14px;line-height:1.55;margin:0 0 12px}
.responsive-game footer{margin:0;padding:0;border:0;line-height:1.6;font-size:12px}
.guide-open{display:none}
.guide-sheet{color:#eef6f4;background:#102a38;border:1px solid #527687;border-radius:24px 24px 0 0;padding:20px 20px max(24px,env(safe-area-inset-bottom));width:100%;max-width:620px;max-height:85dvh;margin:auto auto 0;overscroll-behavior:contain;box-shadow:0 -15px 60px #0007}
.guide-sheet::backdrop{background:#03111cbf;backdrop-filter:blur(5px)}
.guide-sheet[open]{animation:guide-rise 180ms ease-out}
.guide-close{display:block;margin:0 0 20px auto}
.guide-sheet .subtitle,.guide-sheet footer{font-size:15px;line-height:1.65;color:#c3d6dc}
.guide-sheet footer{margin-top:16px;padding-top:16px}
@keyframes guide-rise{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:759px){
 main.responsive-game{max-width:620px;padding:12px 14px max(20px,env(safe-area-inset-bottom))}
 .responsive-game .topline{flex-wrap:wrap;gap:8px}
 .responsive-game .topline .eyebrow{width:100%;font-size:10px;letter-spacing:1.8px}
 .responsive-game header{margin:12px 0 14px;gap:12px}
 .responsive-game h1{font-size:clamp(24px,6vw,32px)}
 .responsive-game .score{padding:7px 12px;min-width:70px}.responsive-game .score strong{font-size:23px}
 .game-layout{grid-template-columns:minmax(0,1fr);gap:14px}
 .game-stage{padding:10px;border-radius:20px}
 .responsive-game canvas{width:min(100%,calc(max(216px,100svh - 510px)*var(--board-ratio)),360px);height:auto}
 .game-panel{padding:0;display:block;max-height:none}.responsive-game #details{margin:0 0 8px;font-size:12px}
 .responsive-game #status{font-size:14px;margin:0 0 10px}
 .responsive-game .controls,.responsive-game #extras{margin-bottom:10px}
 .guide-home{display:none}.guide-open{display:block;margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.guide-sheet[open]{animation:none}}

@media(min-width:760px) and (max-height:499px){
 main.responsive-game{padding:10px 18px}
 .responsive-game header{margin:4px 0 8px}.responsive-game h1{font-size:24px}
 .responsive-game .score{padding:4px 12px}.responsive-game .score strong{font-size:20px}
 .game-stage{padding:8px}.responsive-game canvas{width:min(100%,calc((100svh - 160px)*var(--board-ratio)),440px)}
 .game-panel{max-height:calc(100svh - 140px);overflow:auto;padding-right:8px}
 .guide-home{display:none}.guide-open{display:block}
}

.game-panel{overflow:auto}.responsive-game #extras{max-height:160px;overflow:auto}