#story-screen{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#03050c}
.story-frame{position:relative;width:min(100vw,177.777vh);aspect-ratio:16/9}
.story-scene{position:absolute;inset:0;overflow:clip}
.story-frame canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.story-skip{position:absolute;right:12px;top:10px;padding:9px 11px;color:#e8d0a5;background:#070c19d9;border:1px solid #76674e;cursor:pointer;font:14px CampaignArcade,monospace}
.story-skip:hover,.story-skip:focus-visible{color:white;border-color:#ffe099;outline:2px solid #ffe099;outline-offset:3px}
.story-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.story-playing #touch-controls,.story-playing #rotate-phone,.story-playing .mobile-brand{display:none!important}
#story-replay{display:block;margin:22px auto 0;background:transparent;border:0;color:#c2a36c;font:14px/1.6 CampaignArcade,monospace;cursor:pointer;padding:10px}
#story-replay:hover,#story-replay:focus-visible{color:#fff0bc;text-decoration:underline}
@media(max-width:600px){.story-skip{font-size:12px;right:6px;top:5px;padding:6px}}

.story-mobile-label{display:none}
@media (max-width:900px) and (orientation:portrait), (pointer:coarse) and (max-height:600px){
 .story-frame{width:min(100vw,calc(100dvh - 128px));aspect-ratio:1}
 /* Center the bar frontage at x=215 in the original 480px scene. */
 #story-screen:not(.story-title) .story-scene>canvas{
  position:absolute;top:0;left:50%;height:120%;width:auto;max-width:none;
  aspect-ratio:16/9;transform:translateX(-44.8%);
 }
 .story-title .story-scene>canvas{position:absolute;inset:0;width:100%;height:100%}
 .story-skip{top:auto;bottom:calc(100% + 8px);right:8px}
 .story-skip,.story-playing #audio-mute.needs-gesture{
  box-sizing:border-box;width:140px;height:36px;padding:6px 10px;
  border:1px solid #ffffff80;border-radius:5px;background:#151618c9;color:white;
  font:9px CampaignArcade,monospace;text-align:center;justify-content:center;
 }
 .story-skip:hover{outline:none}
 .story-skip:focus-visible{outline:2px solid white;outline-offset:3px}
 .story-desktop-label{display:none}
 .story-mobile-label{display:inline}
 .story-announcement.story-subtitle{
  top:calc(100% + 12px);left:0;width:100%;height:auto;margin:0;padding:0 12px;
  box-sizing:border-box;clip-path:none;overflow:visible;text-align:center;
  color:#fff0cb;font:clamp(10px,3vw,14px)/1.6 CampaignArcade,monospace;
 }
}