html.preview body{overflow:hidden;background:#101d2b}html.preview main{width:1280px;max-width:none;padding:0;margin:0}html.preview main> :not(.arcade){display:none}html.preview .arcade{border:0;border-radius:0}html.preview .arcade> :not(.viewport){display:none}html.preview .viewport{width:1280px;height:640px;aspect-ratio:2}html.preview .overlay{display:none}html.embedded main{padding:10px 12px}html.embedded header{margin-bottom:10px}html.embedded .language-picker,html.embedded .edition{display:none}html.embedded .brand{font-size:19px}html.embedded footer,html.embedded .pad-menu-hint{display:none}html.embedded .viewport{max-height:calc(100dvh - 210px);min-height:190px}html.embedded canvas{object-fit:contain}html.embedded .audio-mixer{margin-top:10px;padding:10px 0}html.embedded .hud{padding:10px 15px}html.embedded #gamepad-status{font-size:10px;margin:8px 0}@media(pointer:coarse){html.embedded .viewport{max-height:calc(100dvh - 255px)}}

/* Fullscreen layout supplied by the common portal player. */
html.embedded.immersive,html.embedded.immersive body{height:100%;min-height:0;overflow:hidden;background:#080d13}
html.embedded.immersive main{width:100%;height:100%;max-width:none;padding:0;margin:0}
html.embedded.immersive main> :not(.arcade){display:none!important}
html.embedded.immersive .arcade{display:flex;flex-direction:column;width:100%;height:100%;border:0;border-radius:0;box-shadow:none;background:#080d13}
html.embedded.immersive .hud{display:flex;flex:0 0 auto;gap:8px;padding:5px 12px;border-bottom-width:1px}
html.embedded.immersive .hud>div{gap:2px;min-width:0;text-align:left}
html.embedded.immersive .hud label{font-size:10px;letter-spacing:0}
html.embedded.immersive .hud strong,html.embedded.immersive .hud #lives{font-size:clamp(14px,2.4vw,24px)}
html.embedded.immersive .hud #score{font-size:clamp(12px,2.4vw,24px)}
html.embedded.immersive .hud #office{font-size:clamp(11px,1.8vw,18px)}
html.embedded.immersive .viewport{flex:1 1 0;width:100%;height:0;min-height:0;max-height:none;aspect-ratio:auto;background:#080d13}
html.embedded.immersive canvas{width:100%;height:100%;object-fit:contain}
html.embedded.immersive .statusbar{display:none}
html.embedded.immersive .touch{position:static;flex:0 0 auto;width:100%;margin:0;display:flex;justify-content:space-between;gap:8px;min-height:0;padding:8px 12px;background:#101d2b;box-sizing:border-box}
html.embedded.immersive .touch>div{gap:8px}
html.embedded.immersive .touch button{width:clamp(58px,17vw,96px);height:68px;min-height:68px;font-size:30px}
html.embedded.immersive.touch-hidden .touch{display:none!important}
@media(orientation:landscape){html.embedded.immersive .touch{padding:4px 16px}html.embedded.immersive .touch button{height:60px;min-height:60px}}
@media(max-width:500px) and (orientation:portrait){html.embedded.immersive .hud{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 10px}html.embedded.immersive .hud>div:nth-child(2){grid-column:2/4;text-align:right}}

/* In landscape the buttons overlay the bottom corners, leaving the entire
   viewport height for the game. Explicit positioning also avoids nested flex
   percentage-height resolution in WebKit. Portrait keeps its control row. */
@media(orientation:landscape){
 html.embedded.immersive .arcade{position:relative;display:block;padding-top:40px}
 html.embedded.immersive .hud{position:absolute;top:40px;left:0;right:0;height:42px;z-index:2;background:#142636ed;padding:3px max(12px,env(safe-area-inset-right)) 3px max(12px,env(safe-area-inset-left))}
 html.embedded.immersive .viewport{position:absolute;top:82px;left:0;right:0;bottom:0;width:100%;height:auto;min-height:0;max-height:none}
 html.embedded.immersive .touch{position:absolute;z-index:3;left:0;right:0;bottom:0;top:auto;width:100%;padding:6px max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:transparent;pointer-events:none}
 html.embedded.immersive .touch>div{pointer-events:auto}
 html.embedded.immersive .touch button{background:#182936bb;width:clamp(58px,9vw,80px)}
}
/* The exit button has its own 40px overlay area in portrait too. */
@media(orientation:portrait){html.embedded.immersive main{padding-top:40px}}