/* Full-frame footage remains visible at every card aspect ratio. */
html body #app :is(.button-loop-media,.room-entrance,.inside-room-banner,.machine-cover){isolation:isolate!important}
html body #app :is(.button-loop-media,.room-entrance,.inside-room-banner,.machine-cover)>.button-loop-backdrop{position:absolute!important;inset:-8%!important;width:116%!important;height:116%!important;max-width:none!important;object-fit:cover!important;filter:blur(16px) brightness(.62)!important;opacity:.7!important;pointer-events:none!important;z-index:-1!important}
html body.home-screen #app :is(.button-loop-media,.room-entrance,.inside-room-banner,.machine-cover)>:is(.button-loop-poster,.button-loop-video){object-fit:contain!important;object-position:center!important;filter:brightness(1.12) saturate(1.03)!important;background:transparent!important}
html body #app .machine-cover>:is(.button-loop-poster,.button-loop-video){object-fit:contain!important}
html body.home-screen #app .room-entrance-copy{justify-content:flex-end!important;background:linear-gradient(90deg,#07090875,transparent 62%)!important;padding:10px 14px!important}
html body.home-screen #app .room-entrance-copy>small{font-size:8px!important}
html body.home-screen #app .room-entrance-copy>strong{font-size:clamp(24px,6vw,30px)!important}
html body.home-screen #app .room-entrance-copy>span{font-size:10px!important;max-width:58%!important;line-height:1.2!important}
html body.home-screen #app .room-entrance-copy>b{right:10px!important;bottom:10px!important;width:132px!important;min-height:35px!important;padding:7px 9px!important;font-size:9px!important}
/* Home hero: one full-width film, with the welcome copy in a lower safe area. */
html body.home-screen #app [data-lobby-panel="lounge"]>.lobby-welcome{position:relative!important;display:block!important;padding:0!important;overflow:hidden!important;isolation:isolate!important;background:#100e0a!important;grid-template-columns:none!important;grid-template-rows:none!important}
html body.home-screen #app .lobby-welcome>.home-film-backdrop{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:blur(22px) brightness(.58)!important;opacity:.65!important;z-index:-1!important}
html body.home-screen #app .lobby-welcome>.home-film{position:absolute!important;inset:0 0 0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center top!important;z-index:0!important;filter:brightness(1.08)!important}
html body.home-screen #app .lobby-welcome>.home-hero-copy{position:absolute!important;inset:auto 0 0!important;padding:14px 16px 12px!important;z-index:2!important;max-width:none!important;align-self:auto!important;background:linear-gradient(0deg,#080a09f5,#080a09c7 68%,transparent)!important;text-shadow:0 1px 4px #000!important}
html body.home-screen #app .lobby-welcome .home-hero-copy h1{font-size:clamp(25px,6vw,34px)!important;line-height:1.03!important;margin:5px 0!important}
html body.home-screen #app .lobby-welcome .home-hero-copy h1 br{display:none!important}
html body.home-screen #app .lobby-welcome .home-hero-copy h1 br:after{content:' '}
html body.home-screen #app .lobby-welcome .home-hero-copy .eyebrow{font-size:8px!important;display:block!important;letter-spacing:1.2px!important}
html body.home-screen #app .lobby-welcome .host-greeting{font-size:12px!important;line-height:1.3!important;margin:4px 0!important}
html body.home-screen #app .lobby-welcome .host-greeting br{display:none!important}
html body.home-screen #app .lobby-welcome .lobby-mode-label{display:block!important;font-size:8px!important;margin:6px 0 0!important;padding-top:5px!important}
/* Intro uses the complete wide film. The text appears over the last scene. */
html body.title-screen #app .lobby-title{position:relative!important;isolation:isolate!important;height:100%!important;min-height:0!important;padding:0!important;background:#080909!important;overflow:hidden!important}
html body.title-screen #app .title-room{position:absolute!important;inset:0!important;opacity:1!important;transform:none!important;filter:none!important;z-index:0!important}
html body.title-screen #app .title-room .entrance-backdrop{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:blur(26px) brightness(.4)!important;opacity:.65!important}
html body.title-screen #app .title-room :is(video,.title-end-poster){position:absolute!important;inset:12% 0 auto!important;width:100%!important;height:48%!important;object-fit:contain!important;object-position:center!important;opacity:1!important;transform:none!important;filter:none!important;z-index:1!important;background:transparent!important}
html body.title-screen #app .title-end-poster{display:none!important}
html body.title-screen #app .title-fallback .title-end-poster{display:block!important;z-index:2!important}
html body.title-screen #app .title-content{position:absolute!important;inset:auto 16px 30px!important;transform:none!important;padding:14px 0!important;max-width:none!important;width:auto!important;z-index:4!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .5s!important;gap:7px!important;animation:none!important;background:linear-gradient(0deg,#080909f7,#080909b0,transparent)!important}
html body.title-screen #app .title-final .title-content{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
html body.title-screen #app .title-content .title-emblem{display:none!important}
html body.title-screen #app .title-content h1{font-size:clamp(35px,10vw,60px)!important;line-height:1.2!important;margin:2px 0!important}
html body.title-screen #app .title-content p{font-size:14px!important;line-height:1.4!important;margin:0 0 6px!important}
html body.title-screen #app :is(.title-caption,.title-invitation,.title-content .eyebrow){font-size:9px!important;letter-spacing:1.5px!important}
html body.title-screen #app .title-enter{min-height:52px!important;max-width:340px!important;width:100%!important;margin:5px auto!important;display:flex!important}
html body.title-screen #app :is(.title-lights,.title-gold-dust){display:none!important}
html body.title-screen #app .intro-skip{position:absolute!important;top:16px!important;right:16px!important;z-index:5!important;min-height:40px!important;background:#080a09b0!important}
html body.title-screen #app .title-final .intro-skip{display:none!important}
html body.title-screen #app .title-audio{z-index:6!important;top:16px!important;left:16px!important;right:auto!important}
html body.title-screen #app .title-version{position:absolute!important;bottom:9px!important;z-index:5!important;font-size:9px!important}
/* Full portrait hostess, followed by the Home screen after her recorded greeting. */
html body.title-screen #app .welcome-screen{height:100%!important;min-height:0!important;position:relative!important;overflow:hidden!important;background:radial-gradient(ellipse at center,#44331e,#0b0c0c 70%)!important}
html body.title-screen #app .welcome-host{position:absolute!important;inset:10px 12px 150px!important;overflow:hidden!important}
html body.title-screen #app .welcome-host :is(img,video){position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important}
html body.title-screen #app .welcome-copy{position:absolute!important;bottom:16px!important;left:16px!important;right:16px!important;text-align:center!important;background:linear-gradient(0deg,#090a09,transparent)!important}
html body.title-screen #app .welcome-copy h1{font:30px Georgia!important;color:#ffe0a1!important;margin:3px!important}
html body.title-screen #app .welcome-copy small{font-size:9px!important;letter-spacing:2px!important;color:#e8ce94!important}
html body.title-screen #app .welcome-copy p{font-size:14px!important;min-height:36px!important;margin:7px 0!important;color:#f5e9cd!important}
html body.title-screen #app .welcome-copy button{min-height:42px!important;margin:2px 5px!important;font-size:12px!important}
html body.title-screen #app .welcome-copy button[hidden]{display:none!important}
@media(max-height:650px){html body.title-screen #app .title-content{bottom:20px!important;gap:3px!important;padding:3px 0!important}html body.title-screen #app .title-content h1{font-size:34px!important}html body.title-screen #app .title-content p{font-size:12px!important}html body.home-screen #app .lobby-welcome>.home-hero-copy{padding:7px 10px!important}html body.home-screen #app .lobby-welcome .home-hero-copy h1{font-size:23px!important}html body.home-screen #app .lobby-welcome .host-greeting{font-size:10px!important}}
html body.title-screen #app :is(.lobby-title,.welcome-screen){flex:1 1 0!important;height:0!important;min-height:0!important;width:100%!important;align-self:stretch!important}
html body.title-screen #app .title-room{background:none!important}
html body.title-screen #app .title-room:after{display:none!important}
html body.home-screen #app [data-lobby-panel="lounge"]>.lobby-welcome{flex:0 0 auto!important;height:clamp(200px,40dvh,340px)!important;min-height:0!important}
html body.home-screen #app [data-lobby-panel="lounge"]>.lobby-destinations{flex:1 1 0!important;min-height:120px!important;height:0!important}
html body.home-screen #app .lobby-welcome:before,html body.home-screen #app .lobby-welcome:after{display:none!important}
html body.title-screen #app .welcome-host{z-index:1!important;opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important}
html body.title-screen #app .welcome-host img{z-index:0!important;opacity:1!important;visibility:visible!important;filter:none!important;transform:none!important}
html body.title-screen #app .welcome-host video{z-index:1!important;opacity:0!important;background:transparent!important}
html body.title-screen #app .welcome-host video.host-playing{opacity:1!important}
html body.title-screen #app .welcome-copy{z-index:3!important}

/* 2.40.82: one visible artwork layer; opaque letterboxing prevents doubled posters. */
html body #app :is(.button-loop-media,.room-entrance,.inside-room-banner,.machine-cover)>.button-loop-backdrop{display:none!important}
html body #app :is(.button-loop-media,.room-entrance,.inside-room-banner,.machine-cover){background:#101210!important;background-image:none!important}
html body #app :is(.button-loop-media,.room-entrance,.inside-room-banner,.machine-cover)>:is(.button-loop-poster,.button-loop-video){object-fit:contain!important;object-position:center!important;background:#101210!important;transition:none!important}
html body #app :is(.button-loop-media,.room-entrance,.inside-room-banner,.machine-cover):has(>.button-loop-video.motion-ready:not([hidden]))>.button-loop-poster{visibility:hidden!important}
html body.no-motion #app :is(.button-loop-media,.room-entrance,.inside-room-banner,.machine-cover)>.button-loop-poster{visibility:visible!important}
@media(prefers-reduced-motion:reduce){html body #app :is(.button-loop-media,.room-entrance,.inside-room-banner,.machine-cover)>.button-loop-poster{visibility:visible!important}}
/* Shallow room strips fill their frame with a single centered image. */
html body.home-screen #app :is(.room-entrance,.inside-room-banner)>:is(.button-loop-poster,.button-loop-video){object-fit:cover!important}
/* Roulette and Bingo fill the complete button artwork area. */
html body.home-screen #app .room-game .button-loop-media:is([data-loop-key="roulette"],[data-loop-key="bingo"])>:is(.button-loop-poster,.button-loop-video){object-fit:cover!important;object-position:center!important}
html body.home-screen #app :is(.button-loop-media,.room-entrance,.inside-room-banner,.machine-cover)>:is(.button-loop-poster,.button-loop-video){background:#101210!important}
html body.no-motion #app :is(.button-loop-media,.room-entrance,.inside-room-banner,.machine-cover):has(>.button-loop-video.motion-ready:not([hidden]))>.button-loop-poster{visibility:visible!important}
@media(prefers-reduced-motion:reduce){html body #app :is(.button-loop-media,.room-entrance,.inside-room-banner,.machine-cover):has(>.button-loop-video.motion-ready:not([hidden]))>.button-loop-poster{visibility:visible!important}}

/* Every game and slot button fills its artwork box, with one centered frame. */
html body.home-screen #app .room-game .button-loop-media>:is(.button-loop-poster,.button-loop-video),
html body #app .machine-cover.machine-cover>:is(.button-loop-poster,.button-loop-video){object-fit:cover!important;object-position:center!important}