/* Screen-filling play uses the browser viewport, including on phones without the Fullscreen API. */
body.focus-play{height:100dvh;overflow:hidden;padding:0}
body.focus-play header{height:44px;margin:0 10px}
body.focus-play header .brand{font-size:14px}
body.focus-play header .brand-icon{font-size:24px}
body.focus-play .edition,body.focus-play #landing-home{display:none}
body.focus-play header nav{gap:10px}
body.focus-play header nav button{min-height:44px;font-size:11px;padding:6px}
body.focus-play main{height:calc(100dvh - 44px);max-width:none;display:flex;padding:0;gap:0}
body.focus-play main>.intro,body.focus-play .play-panel,body.focus-play .mobile-play-hint,body.focus-play footer{display:none}
body.focus-play .arena{display:grid;grid-template-rows:minmax(0,1fr) 24px;flex:1;min-height:0;width:100%;max-width:none;gap:0}
body.focus-play .match-tools,body.focus-play .board-heading,body.focus-play .set-progress{display:none}
body.focus-play .canvas-wrap{width:100%;height:100%!important;min-width:0;min-height:0;aspect-ratio:auto;border-radius:0;filter:none}
body.focus-play #board{height:100%!important;border-radius:0}
body.focus-play .board-bottom{padding:4px 12px;font-size:10px;line-height:16px}
body.focus-play .board-bottom>span:last-child{display:none}
body.focus-play:has(#focus-toggle) header>.brand{display:none}
body.focus-play:has(#focus-toggle) header nav{width:100%;justify-content:space-between}

/* Anchor the mobile game to the small viewport, not moving browser chrome. */
html:has(body.focus-play){overflow:hidden;overscroll-behavior:none}
body.focus-play{position:fixed;inset:0 auto auto 0;width:100%;height:100svh;overscroll-behavior:none}
body.focus-play main{height:calc(100svh - 44px)}