.rumble-player{min-height:100vh}
/* The game column is never wider than a comfortable 900px (owner 2026-10-10). */
.player-stage{width:min(900px,calc(100% - 112px));margin-inline:auto;padding-bottom:8px;scroll-margin-top:-60px}
.player-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px}
.player-header label{display:flex;align-items:center;gap:12px}
.player-header select{font:inherit;background:#1a2c5e;color:#fff6e0;border:2px solid #0a0b1a;border-radius:9px;max-width:160px;padding:10px}
.rumble-player h1{font-size:clamp(3rem,7vw,5.5rem);transform:none;margin-bottom:32px}
.rumble-player h1 br{display:none}
.rumble-player h1 span{margin-left:.15em}
/* Before the game runs the surface is only as big as its text and Play button, so a phone, in landscape too, is not filled by it (owner 2026-10-10). */
#player-surface{position:relative;overflow:hidden;background:#0b1630}
/* Until the game runs the surface is a small card that shrinks to its content, never a bar across the screen (owner 2026-10-10). */
#player-surface:not(.is-running){width:fit-content;max-width:100%;margin-inline:auto}
#player-loading{padding:clamp(16px,4vw,40px);display:grid;justify-items:start;gap:14px}
/* Once it runs, the game area never outgrows the screen it is on: its width follows the screen's height (the 8:5 picture fits whole). */
#player-surface.is-running:not(:is(:fullscreen,:-webkit-full-screen,.is-pseudo-fullscreen)){width:min(100%,max(320px,(100vh - 24px) * 1.6));width:min(100%,max(320px,(100dvh - 24px) * 1.6));margin-inline:auto}
#player-loading p{margin:0}
.player-invite-code{font-family:"Lilita One","Fredoka",system-ui,sans-serif;font-size:clamp(1.5rem,5vw,2.4rem);letter-spacing:.14em;color:#ffd23c;text-shadow:0 3px 0 #0a0b1a}
#player-canvas{display:block;width:100%;aspect-ratio:8/5;outline:none;background:#0b1630}
/* While the game downloads the canvas stays laid out (the engine measures it) but takes no room and no touches: only the loading panel shows (owner 2026-10-10). */
#player-surface:not(.is-running) #player-canvas{position:absolute;top:0;left:0;width:min(900px,calc(100vw - 40px));visibility:hidden;pointer-events:none}
#player-canvas:focus-visible{outline:4px solid #64e2ff;outline-offset:-6px}
#player-canvas[hidden],.rumble-player [hidden]{display:none!important}
#player-progress{width:240px;max-width:100%;height:24px;accent-color:#ffd23c}
.player-tools{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-top:24px}
#player-online{color:#a9b6da}
#player-sections{margin-top:56px}
/* Fullscreen: the browser's own, or (an iPhone has none) the game area fixed over the whole visible page with its own way out. */
#player-surface:is(:fullscreen,:-webkit-full-screen,.is-pseudo-fullscreen){display:flex;align-items:center;justify-content:center;background:#0b1630;border:0;border-radius:0;box-shadow:none}
#player-surface:is(:fullscreen,:-webkit-full-screen,.is-pseudo-fullscreen) #player-canvas{max-width:100%;max-height:100%;height:100%;object-fit:contain}
#player-surface.is-pseudo-fullscreen{position:fixed;inset:0;z-index:2000;box-sizing:border-box;width:100vw;height:100vh;height:var(--player-height,100dvh);min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
html.player-pseudo-fullscreen,html.player-pseudo-fullscreen body{overflow:hidden;overscroll-behavior:none}
.player-exit{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:3px solid #0a0b1a;border-radius:12px;background:#1a2c5ecc;color:#fff6e0;box-shadow:0 3px 0 #0a0b1a;cursor:pointer;opacity:.85}
.player-exit:hover,.player-exit:focus-visible{opacity:1}
@media(max-width:760px){.player-stage{width:calc(100% - 40px)}#player-sections{margin-top:40px}}
@media(max-height:520px){.player-header{padding-block:8px}.rumble-player h1{font-size:clamp(2rem,9vh,3rem);margin-bottom:12px}.rumble-player .rumble-kicker{margin-bottom:6px}.player-tools{margin-top:12px}#player-loading{padding:12px 16px;gap:8px}}
@media(max-width:560px){.player-header{align-items:flex-start;gap:12px}.player-header label{flex-direction:column;align-items:flex-start;gap:4px}.player-header select{max-width:135px}.rumble-player h1 br{display:block}.rumble-player h1 span{margin-left:0}#player-loading{padding:24px}.player-tools{align-items:flex-start;flex-direction:column}}
/* Vertical panning stays while the game is only a panel (the page scrolls past it); once it runs, touches belong to the game. */
#player-surface{touch-action:pan-y}
#player-surface.is-running,#player-surface.is-running #player-canvas{touch-action:none}
#player-surface,#player-canvas{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}