*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0;width:100%;height:100%;background:#000;overflow:hidden;color-scheme:dark}.cinema-presentation main{margin:0;padding:0;max-width:none;width:100%;height:100dvh;display:grid;place-items:center;background:transparent;position:relative}.screen{width:min(100vw,calc(100dvh * 16 / 9));aspect-ratio:16/9;border:0!important;background:#000;position:relative}.screen canvas{display:block;width:100%;height:100%;object-fit:contain}.presentation-audio-gate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-height:48px;padding:12px 20px!important;background:#080b10e8!important;border:2px solid #eee0b8!important;font:700 clamp(14px,2.8vw,23px)/1.3 Arial,sans-serif!important;white-space:nowrap;z-index:15;touch-action:manipulation}.tournament-entry-poster{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:transparent;pointer-events:none}.tournament-entry-poster img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}.app-launch{position:fixed;inset:0;z-index:5000;background:#000;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.app-launch>div{position:relative;width:min(92vw,calc(84dvh * 16 / 9));aspect-ratio:16/9;background:#000}.app-launch img{width:100%;height:100%;object-fit:contain}.app-launch button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-height:56px;max-width:85%;padding:14px 20px;border:3px solid #ffd2bc;border-right-color:#78180e;border-bottom-color:#78180e;background:#d82d1c;color:#fff3da;box-shadow:4px 4px #000;font:700 clamp(15px,3vw,25px)/1.15 monospace;text-align:center;touch-action:manipulation}.app-launch button:focus-visible,button:focus-visible{outline:3px solid #fff;outline-offset:4px}#panorama{display:none;position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#status{position:fixed;bottom:5%;color:#fff;left:5%}@media(any-pointer:coarse)and (orientation:landscape){#panorama{display:block}}@media(any-pointer:coarse)and (orientation:landscape){.screen{background:transparent!important}}#master-legends-menu{position:fixed;inset:0;width:100%;height:100dvh;border:0;z-index:5000;opacity:0;background:#000;transition:opacity .28s ease-out}#master-legends-menu.visible{opacity:1}#master-legends-menu[hidden]{display:none}@media(prefers-reduced-motion:reduce){#master-legends-menu{transition:none}}

/* Full viewport artwork stays in the browser's image compositor. Only
   translucent light and title layers use canvas. */
html.cinema-presentation #panorama{display:block;position:fixed;inset:0;width:auto;height:auto;overflow:hidden;pointer-events:none;isolation:isolate;background:#080609;container-type:size}
.opening-shot{position:absolute;inset:0;overflow:hidden}
.opening-world{position:absolute;left:50%;top:50%;width:max(100vw,calc(100dvh * var(--art-ratio)));width:max(100cqw,calc(100cqh * var(--art-ratio)));aspect-ratio:var(--art-ratio);transform:translate(-50%,-50%)}
.opening-art,.opening-light,.opening-dusk-glow{position:absolute;inset:0;width:100%;height:100%;display:block}
.opening-art{object-fit:contain}
.opening-light{object-fit:fill}
.opening-red-sky{background:radial-gradient(ellipse at 51% 40%,#21070c,#0b060b 65%,#030206)}
.opening-clouds,.opening-city{position:absolute;display:block;object-fit:fill;will-change:transform}
.opening-clouds{width:132%;height:132%;left:-16%;top:-16%}
.opening-city{width:125%;height:100%;left:-12.5%;top:-16%}
.opening-city-red{top:-30%}
.opening-dusk{filter:brightness(.79) contrast(1.14) saturate(.88)}
.opening-dusk-glow{background:radial-gradient(ellipse at 4% 42%,#950e2238,transparent 48%),radial-gradient(ellipse at 50% 55%,transparent 32%,#050005a6),linear-gradient(#0f010866,#2e021230 35%,transparent 72%)}

.cinema-presentation main{background:transparent!important}
.cinema-presentation main .screen{position:relative!important;inset:auto!important;width:min(100vw,calc(100dvh * 16 / 9))!important;height:auto!important;aspect-ratio:16/9!important;background:transparent!important}
.cinema-presentation main .screen #scene{width:100%;height:100%;object-fit:contain!important;background:transparent!important}

#opening-video {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  background: #000;
}
.opening-video-frame {
  position: relative;
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}
.opening-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}
.opening-video-frame #status {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 5px 12px;
  color: #fff2d8;
  background: #000b;
  font: 600 14px/1.4 Arial, sans-serif;
}
body:not([data-view="menu"]) .game-audio-bar {
  display: none !important;
}