/* The portrait canvas preserves the approved composition at every aspect ratio. */
:root{color-scheme:dark}
html,body,#root{margin:0;min-width:100%;min-height:100%;background:#09090d}
body{overflow:hidden}
.bet-boot-splash{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;overflow:hidden;background:#030405;color:#f5eddd;font-family:Georgia,"Times New Roman",serif;opacity:1;transition:opacity 250ms ease-out}
.bet-boot-splash[data-ready="true"]{opacity:0;pointer-events:none}
.bet-boot-canvas{position:relative;width:min(100vw,46.2582svh);height:min(216.1782vw,100svh);container-type:inline-size;overflow:hidden;background:#030405}
.bet-boot-art,.bet-boot-crowd,.bet-boot-haze{position:absolute;inset:0;width:100%;height:100%}
.bet-boot-art{object-fit:fill}
.bet-boot-crowd,.bet-boot-haze{pointer-events:none;background:url("/art/boot/intimate-room.webp") center/100% 100% no-repeat;animation-play-state:paused;will-change:transform}
/* Feathered same-plate regions: movement is confined to three audience members,
   not the camera, stage, logo or copy. At phone width the excursion is ~1px. */
.bet-boot-crowd--left{mask-image:radial-gradient(ellipse 5% 6% at 13% 48%,#000 45%,transparent 100%);animation:bet-crowd-left 9s ease-in-out infinite paused}
.bet-boot-crowd--middle{mask-image:radial-gradient(ellipse 4.7% 5.8% at 34% 47%,#000 48%,transparent 100%);animation:bet-crowd-middle 11s ease-in-out -3s infinite paused}
.bet-boot-crowd--right{mask-image:radial-gradient(ellipse 5.2% 6% at 79% 48%,#000 45%,transparent 100%);animation:bet-crowd-right 10s ease-in-out -6s infinite paused}
/* Reuse the authored smoke texture under its existing colored practical lights. */
.bet-boot-haze{mix-blend-mode:screen;opacity:.09}
.bet-boot-haze--teal{mask-image:radial-gradient(ellipse 12% 10% at 17% 35%,#000 12%,transparent 100%);animation:bet-haze-teal 12s ease-in-out infinite paused}
.bet-boot-haze--crimson{mask-image:radial-gradient(ellipse 12% 10% at 84% 36%,#000 12%,transparent 100%);animation:bet-haze-crimson 14s ease-in-out -5s infinite paused}
.bet-boot-copy{position:absolute;left:4%;width:92%;margin:0;text-align:center;font-weight:400;font-size:3.8cqw;line-height:1.3;letter-spacing:.105em;color:#f5eddd;text-shadow:0 1px 3px #000}
.bet-boot-tagline{top:23.35%}
.bet-boot-challenge{top:84.15%;font-size:3.85cqw}
.bet-boot-status{position:absolute;top:92.35%;left:4%;width:92%;text-align:center;font-size:3.1cqw;line-height:1.5;letter-spacing:.23em;color:#f5eddd}
.bet-boot-dots{display:inline-flex;gap:.45em;margin-left:.6em;letter-spacing:0;vertical-align:middle}
.bet-boot-dots span{width:.25em;height:.25em;background:currentColor;border-radius:50%;animation:bet-boot-dot 1.2s ease-in-out infinite paused}
.bet-boot-dots span:nth-child(2){animation-delay:.2s}
.bet-boot-dots span:nth-child(3){animation-delay:.4s}
.bet-boot-retry{margin:6px auto 0;min-width:80px;min-height:44px;border:1px solid #dbc296;background:#0b0b0b;color:#f5eddd;font:inherit;letter-spacing:normal;cursor:pointer}
.bet-boot-status[role="alert"]{position:fixed;top:auto;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(86vw,380px);padding:10px;box-sizing:border-box;background:rgba(3,4,5,.96);font-size:14px;letter-spacing:.04em}
.bet-boot-retry:not([hidden]){display:block}
.bet-boot-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.bet-boot-splash[data-motion="on"] .bet-boot-crowd,.bet-boot-splash[data-motion="on"] .bet-boot-haze,.bet-boot-splash[data-motion="on"] .bet-boot-dots span{animation-play-state:running}
@keyframes bet-boot-dot{0%,65%,100%{opacity:.3}25%{opacity:1}}
@keyframes bet-crowd-left{0%,100%{transform:translate(0,0)}40%{transform:translate(.19cqw,.12cqw)}65%{transform:translate(.06cqw,0)}}
@keyframes bet-crowd-middle{0%,100%{transform:translate(0,0)}35%{transform:translate(-.12cqw,.23cqw)}70%{transform:translate(-.04cqw,.08cqw)}}
@keyframes bet-crowd-right{0%,100%{transform:translate(0,0)}50%{transform:translate(-.21cqw,.1cqw)}}
@keyframes bet-haze-teal{0%,100%{transform:translate(0,0);opacity:.055}50%{transform:translate(1.2cqw,-.8cqw);opacity:.11}}
@keyframes bet-haze-crimson{0%,100%{transform:translate(0,0);opacity:.06}50%{transform:translate(-1cqw,-1cqw);opacity:.1}}
@media(prefers-reduced-motion:reduce){.bet-boot-splash{transition:none}.bet-boot-splash .bet-boot-crowd,.bet-boot-splash .bet-boot-haze,.bet-boot-splash .bet-boot-dots span{animation:none!important;will-change:auto}.bet-boot-haze{display:none}}
.bet-boot-splash[data-motion="off"] .bet-boot-crowd,.bet-boot-splash[data-motion="off"] .bet-boot-haze,.bet-boot-splash[data-motion="off"] .bet-boot-dots span{animation:none;will-change:auto}
.bet-boot-splash[data-motion="off"] .bet-boot-haze{display:none}
.bet-boot-splash[data-motion="off"]{transition:none}
/* In landscape, use the side space for readable copy rather than shrinking it
   with the portrait artwork. Keep the stage and gold logo fully composed. */
@media(orientation:landscape) and (max-height:600px){
  .bet-boot-copy{position:fixed;top:44svh;width:calc((100vw - 46.2582svh)/2 - 6vw);font-size:16px;line-height:1.5;letter-spacing:.08em}
  .bet-boot-tagline{left:3vw}
  .bet-boot-challenge{left:auto;right:3vw}
  .bet-boot-status{font-size:12px;letter-spacing:.12em}
}