#game{display:block;width:100%;height:100%;border:0;background:#00a2ff}#stage{aspect-ratio:16/9}#stage:fullscreen #game{width:100vw;height:100vh}
@media(max-width:640px){#stage{aspect-ratio:auto;height:70svh;min-height:360px;max-height:760px}}

/* Keep the game and its leaderboard in independent desktop columns. */
main{width:100%;max-width:1680px;display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"header header" "stage ranking" "footer ranking";gap:0 24px}
header{grid-area:header}#stage{grid-area:stage;min-width:0;align-self:start}footer{grid-area:footer;min-width:0;align-self:start}
.ranking{grid-area:ranking;min-width:0;margin-top:0;padding:20px;align-self:start;max-height:calc(100svh - 125px);display:flex;flex-direction:column;overflow:auto;overflow-anchor:none;overscroll-behavior:contain}
.rank-heading{gap:8px;flex-wrap:wrap}.ranking h2{font-size:19px;margin-bottom:5px}.ranking ol{min-height:80px;margin-bottom:0}.ranking li{padding:12px 4px}.ranking #rank-player{align-self:flex-start;margin-top:0}.ranking #rank-status{margin:10px 0}
:root[data-theme=light] #reward-ad{border-color:#cbd6e4;box-shadow:0 24px 100px #26395140}
:root[data-theme=light] #reward-ad::backdrop{background:#52657e66}
:root[data-theme=light] #ad-image{background:#e9eff7}
:root[data-theme=light] .ad-bottom span{color:#426184}
:root[data-theme=light] .ad-bottom strong{color:#1766a3}
:root[data-theme=light] #notice{background:#f8fbfff2;color:#24334b;border:1px solid #cbd6e4}
@media(max-width:900px){main{grid-template-columns:minmax(0,1fr);grid-template-areas:"header" "stage" "footer" "ranking"}.ranking{margin-top:20px;max-height:480px}.rank-heading{flex-wrap:nowrap}}
/* Reserve a stable card size so leaderboard updates never move the page. */
.ranking{height:calc(100svh - 125px);min-height:320px;max-height:none;overflow:hidden}
.ranking #rank-list{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
@media(max-width:900px){.ranking{height:480px;min-height:0;max-height:none}}