.mobile-splash-nav{display:none}
@media(max-width:900px) and (orientation:portrait){
 /* Show the loading artwork from the initial HTML, before the app creates its
    native player or mobile shell. The same cover projection is used later. */
 #start-screen:is([data-stage="loading"],[data-stage="to-splash"]){position:fixed;inset:0;width:100vw;height:100dvh;background:#020b14 url('/demo/floorbidden/assets/intro/loader-mobile-v1.webp') center/cover no-repeat}
 #start-screen:is([data-stage="loading"],[data-stage="to-splash"]) #intro-fallback{display:none}
 #start-screen:is([data-stage="loading"],[data-stage="to-splash"]) #load-display{left:50%;top:calc(50dvh - max(4.399525565vw,1.978609626dvh));width:max(41.617122473vw,18.71657754dvh)}
 #start-screen:is([data-stage="loading"],[data-stage="to-splash"]) #load-percent{font-size:clamp(24px,max(6.896551724vw,3.101604278dvh),40px)}
 #start-screen[data-mobile-loader="true"]{box-sizing:border-box;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:#020b14 url('/demo/floorbidden/assets/intro/loader-mobile-v1.webp') center/cover no-repeat}
 #start-screen[data-mobile-loader="true"] #intro-fallback{display:none}
 #start-screen[data-mobile-loader="true"] #intro-canvas{
  position:absolute;inset:auto;left:var(--mobile-loader-left);top:var(--mobile-loader-top);width:var(--mobile-loader-width);height:var(--mobile-loader-height);
  max-width:none;max-height:none;object-fit:fill;transition:none;
  mask-image:none;-webkit-mask-image:none;
 }
 #start-screen[data-mobile-loader="true"] #intro-canvas:not([data-intro-layout="portrait"]){opacity:0!important}
 #start-screen[data-mobile-loader="true"] #load-display{left:var(--mobile-loader-progress-left);top:var(--mobile-loader-progress-top);width:var(--mobile-loader-progress-size);height:var(--mobile-loader-progress-size)}
 #start-screen[data-mobile-loader="true"] #load-percent{font-size:var(--mobile-loader-progress-percent-size)}
 #start-screen[data-mobile-splash="true"]{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);background:#02090d url('/demo/floorbidden/assets/intro/splash-lab-mobile-v1.webp') center/cover no-repeat;touch-action:pan-y;container-type:inline-size}
 #start-screen[data-mobile-splash="true"] #intro-fallback{display:none}
 #start-screen[data-mobile-splash="true"] #intro-canvas,
 #start-screen[data-mobile-splash="true"] .splash-fallback-panels{
  position:absolute;inset:auto;width:var(--mobile-splash-width);height:var(--mobile-splash-height);left:var(--mobile-splash-left);top:var(--mobile-splash-top);
  max-width:none;max-height:none;object-fit:fill;transition:left .45s cubic-bezier(.22,.7,.2,1);
 }
 #start-screen[data-mobile-splash="true"][data-mobile-splash-wrap="true"] :is(#intro-canvas,.splash-fallback-panels){transition:none;animation:mobile-splash-card-wrap .4s ease-out both}
 #start-screen[data-mobile-splash="true"] #enter{
  inset:auto;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));translate:-50% 0;width:min(65%,260px);height:60px;min-height:60px;
  border:2px solid #fff9e9;border-radius:9px;background:#000e;box-shadow:0 5px 14px #0009;z-index:4;
 }
 #start-screen[data-mobile-splash="true"] #enter .enter-label{
  position:static;display:flex;width:100%;height:100%;padding:0;border:0;background:none;align-items:center;justify-content:center;font:800 clamp(22px,7vw,28px)/1 Arial,'Segoe UI',sans-serif;font-style:oblique 10deg;
  color:#fff;letter-spacing:.01em;-webkit-text-stroke:0;text-shadow:none;opacity:1;animation:none;
 }
 #start-screen[data-mobile-splash="true"] #enter:focus-visible{outline:none;border-color:#fff;box-shadow:0 0 12px #ffffff20,0 5px 14px #0009}
 #start-screen[data-mobile-splash="true"] .mobile-splash-nav{display:flex;position:absolute;z-index:4;left:50%;bottom:calc(103px + env(safe-area-inset-bottom,0px));translate:-50% 0;align-items:center;justify-content:center;gap:6px;max-width:100%;height:44px;padding:3px 5px;border-radius:30px;background:#0008;box-shadow:0 3px 12px #0004}
 .mobile-splash-nav[hidden]{display:none!important}
 #start-screen .mobile-splash-nav>button,#start-screen .mobile-splash-dots>button{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #efffe459;border-radius:50%;background:#0008;color:#fff7e9;font:20px/1 'Segoe UI',sans-serif;box-shadow:inset 0 1px #ffffff15;transition:background .2s,opacity .2s}
 #start-screen .mobile-splash-nav>button:disabled{opacity:.3}
 .mobile-splash-chevron{display:block;box-sizing:border-box;width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateX(-2px) rotate(45deg)}
 .mobile-splash-previous .mobile-splash-chevron{transform:translateX(2px) rotate(-135deg)}
 .mobile-splash-dots{display:flex;gap:0;align-items:center}
 #start-screen .mobile-splash-dots>button{border:0;background:transparent;box-shadow:none}
 .mobile-splash-dots i{display:block;width:6px;height:6px;border:0;border-radius:50%;background:#f6ffeb80;transition:width .2s,background .2s}
 .mobile-splash-dots [aria-current="true"] i{width:20px;border-radius:7px;background:#fff9e9;box-shadow:0 0 7px #fff9e929}
 #start-screen .mobile-splash-nav button:focus-visible{outline:2px solid #fff9e9;outline-offset:1px}
 .mobile-splash-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 #start-screen[data-mobile-splash="true"] #intro-curtain{z-index:5}
}
@keyframes mobile-splash-card-wrap{from{opacity:0}to{opacity:1}}
/* During the last fade the game is already painted underneath. This must win
   over both mobile shell and splash backgrounds, including the green tint. */
#start-screen.revealing-game[data-stage="to-game"]{background:transparent}
#intro-canvas[data-intro-painting="true"]{opacity:0!important}
@media(prefers-reduced-motion:reduce){#start-screen[data-mobile-splash="true"] #intro-canvas,#start-screen[data-mobile-splash="true"] .splash-fallback-panels,#start-screen[data-mobile-splash="true"] #intro-fallback,.mobile-splash-dots i{transition:none}}
body:has(#game.reduced-motion) #start-screen[data-mobile-splash="true"] #intro-canvas,
body:has(#game.reduced-motion) #start-screen[data-mobile-splash="true"] .splash-fallback-panels,
body:has(#game.reduced-motion) #start-screen[data-mobile-splash="true"] #intro-fallback{transition:none;animation:none}
@media(prefers-reduced-motion:reduce){#start-screen[data-mobile-splash="true"][data-mobile-splash-wrap="true"] :is(#intro-canvas,.splash-fallback-panels){animation:none}}