/* Final common layout contract. Do not add per-episode viewport overrides. */
:root{--app-height:100dvh;--app-width:100vw;--app-left:0px;--app-top:0px;--safe-top:0px;--safe-bottom:0px;--controls-bottom:20px}
@media(min-aspect-ratio:7/10){:root{--app-width:calc(100dvh * .5625);--app-left:calc((100vw - var(--app-width))/2)}}
body{display:flex;justify-content:center;align-items:flex-start}
#world{position:absolute;left:var(--app-left);top:var(--app-top);width:var(--app-width);height:var(--app-height);margin:0;container-type:size}
#viewportInsets{position:fixed;visibility:hidden;pointer-events:none;width:0;height:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
#world .topbar{padding:calc(var(--safe-top) + 12px) 16px 0;z-index:15}
#world .icon-button{width:40px;height:40px;min-width:40px}
#world .top-actions{gap:7px}
#world.cinema-active .top-actions{gap:0}
#world.cinema-active .top-actions #helpButton,#world.cinema-active #countdown{display:none}
#world .cinema-title,#world .episode-cinema #episodeHeading{top:var(--story-title-top);left:50%;right:auto;width:calc(100% - 32px);max-width:430px;transform:translateX(-50%);animation:cinema-title-in 1.2s ease both;z-index:9}
#world .cinema-title .distance{font-size:clamp(38px,11cqw,62px)}
#world .cinema-title h2{font-size:15px}
#world .episode-cinema #episodeTitle{font-size:clamp(21px,6cqw,34px);line-height:1}
#world .episode-cinema #episodeNumber{bottom:calc(100% + 14px)}
#world .episode-cinema .episode-location{margin-top:15px;font-size:8px}
#world #phoneConversation,#world .episode-cinema #episodeConversation{width:min(calc(100% - 32px),350px)}
#world .story-message p{font-size:clamp(11px,3.05cqw,12px)}
#world .episode-cinema .episode-attachment img{max-height:65px}
#world .cinema-veil{transition:none}
#world #episodeCinema>.cinema-veil{z-index:8}
#world #episodeCinema #episodeConversation,#world #episodeCinema #chapterSpeech{z-index:9}
#world .story-controls,#world .story-end-actions,#world .episode-cinema #episodeControls,#world .episode-cinema #episodeEnd{left:16px;right:16px;top:auto;bottom:var(--controls-bottom);width:auto;max-width:none;transform:none;flex-direction:row;align-items:center;justify-content:center;gap:12px}
#world .story-controls button,#world .story-end-actions button{min-height:44px}
#world .story-end-copy{top:var(--story-talk-top);width:min(calc(100% - 32px),350px)}
#world .scene-footer{bottom:var(--controls-bottom)}
#world .welcome.chinese-welcome h1{font-size:clamp(23px,6cqw,32px)}
#world .welcome.chinese-welcome .enter-button{bottom:max(calc(var(--safe-bottom) + 90px),calc(var(--app-height)*.16));min-width:0;max-width:calc(100% - 40px)}
#world .welcome.chinese-welcome .sound-note{bottom:max(calc(var(--safe-bottom) + 30px),calc(var(--app-height)*.07));max-width:calc(100% - 32px)}
#world .welcome-sub{max-width:calc(100% - 40px)}
#world .explore-summary{left:50%;top:auto;bottom:var(--controls-bottom);width:min(calc(100% - 32px),320px);transform:translateX(-50%)}
#world .explore-summary button{width:100%;min-width:0;min-height:44px;box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:9px;padding:7px 11px;box-shadow:none}
#world .explore-summary #exploreTitle{font-size:10px;line-height:1.4;letter-spacing:0;white-space:nowrap}
#world .explore-summary #progressText{font-size:11px;line-height:1.4;letter-spacing:0;white-space:nowrap}
#world .explore-summary .progress-dots{gap:5px;margin:0}
#world .explore-summary .progress-dots i{width:3px;height:3px}
#world .scene-footer{bottom:calc(var(--safe-bottom) + 2px)}
#world .scene-footer p{font-size:9px;line-height:10px}
#world .room-thought{position:absolute;z-index:7;margin:0;padding:0;pointer-events:none;font:12px/17px Courier,monospace;letter-spacing:0;color:#d4e5ed;text-shadow:1px 1px #070b12,-1px -1px #070b12;text-align:right;animation:room-thought-in .25s ease both}
#world .room-thought span{display:block}
#world .room-thought.leaving{animation:room-thought-out .6s ease forwards}
@keyframes room-thought-in{from{opacity:0}to{opacity:1}}
@keyframes room-thought-out{from{opacity:1}to{opacity:0}}
@container(max-width:280px){#world .explore-summary #exploreTitle,#world .explore-summary #progressDots{display:none}}
@media(prefers-reduced-motion:reduce){#world .room-thought,#world .room-thought.leaving{animation:none}}
dialog{width:calc(var(--app-width) - 24px);max-width:440px;max-height:calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 24px);padding:35px 24px 24px}
.chapter-game-dialog{inset:auto;left:var(--app-left);top:var(--app-top);width:var(--app-width);height:var(--app-height);max-width:none;max-height:none;margin:0;padding:0}
.save-status{width:min(calc(var(--app-width) - 32px),400px);bottom:calc(var(--safe-bottom) + 8px)}
#world .scene-still img{object-fit:cover}
@keyframes cinema-title-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#world .cinema-title,#world .episode-cinema #episodeHeading{animation:none}}

/* Native Canvas is the only scenic camera; old JPEGs cannot flash a different crop. */
#world .scene-still{visibility:hidden}

dialog{container-type:inline-size}
@container(max-width:280px){.calendar-days{grid-template-columns:repeat(3,minmax(0,1fr))}.calendar-day{min-height:44px}.calendar-dialog h2{font-size:21px}}

/* Modal sizing is tied to the stage, including activity-specific selectors. */
body>dialog:not(.chapter-game-dialog){position:fixed;inset:auto;left:calc(var(--app-left) + var(--app-width)/2);top:calc(var(--app-top) + var(--safe-top) + (var(--app-height) - var(--safe-top) - var(--safe-bottom))/2);transform:translate(-50%,-50%);margin:0;width:calc(var(--app-width) - 24px);max-width:440px;max-height:calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 24px)}
@container(max-height:450px){#phoneConversation .phone-contact,#episodeConversation .phone-contact{display:none}}
@container(max-width:280px){
  #world .wordmark{font-size:12px;letter-spacing:1px}
  #world .topbar .countdown{display:none}
  #world .clues-button{width:44px;min-width:44px;font-size:9px}
  #world .brand #dateLabel{font-size:8px}
  .radio-dialog .radio-receiver{grid-template-columns:minmax(0,1fr)}
  .radio-dialog .radio-station-label{grid-column:1}
  .radio-dialog .frequency{grid-column:1;grid-row:2;text-align:center;padding:0}
  .radio-dialog .mhz{grid-column:1;grid-row:3;text-align:center;padding:0}
  .radio-dialog .radio-visual{grid-column:1;grid-row:4;justify-self:center;margin:6px 0}
  .radio-dialog .signal-text{grid-column:1;grid-row:5}
  .radio-dialog .game-actions{flex-direction:column;align-items:stretch;gap:6px}
  .radio-dialog .game-actions button{width:100%;text-align:center}
}

#world .cinema-title,#world .episode-cinema #episodeHeading{text-shadow:2px 2px 0 #050711,-1px -1px 0 #050711}

@container(max-height:450px){
 #world #phoneConversation,#world #episodeConversation{padding:0 4px}
 #world #storyMessages,#world #episodeMessages{padding:0 3px}
 #world .cinema .story-message p{font-size:11px;line-height:1.45;padding:6px 9px}
 #world .cinema .message-speaker{font-size:6px;line-height:1.4;padding-bottom:2px}
 #world .cinema .story-message{margin-top:5px}
}
/* The title has one quiet local scrim so bright blinds/neon cannot erase the
   subtitle or dateline. It leaves with the title, before the conversation. */
#world .cinema-title::before,#world #episodeHeading::before{content:'';position:absolute;z-index:-1;inset:-36px -14px -30px;pointer-events:none;background:radial-gradient(ellipse at center,#08070ee8 20%,#08070eab 55%,transparent 78%)}