/* Portrait is the reference canvas. The original films always keep their full frame. */
#encounter {
 width:min(520px,100vw); height:100dvh; max-width:100vw; max-height:100dvh;
 margin:auto; border-radius:0; background:var(--paper); overflow:hidden;
 grid-template-columns:1fr; grid-template-rows:minmax(180px,42dvh) minmax(0,1fr);
}
#encounter[open]{display:grid;animation:portrait-arrival .28s ease-out both}
#encounter .encounter-media{position:relative;min-height:0;isolation:isolate;background:#10292f;overflow:hidden}
#encounter .encounter-media::before{content:"";position:absolute;inset:-22px;background:var(--poster) center/cover;filter:blur(18px) brightness(.38);z-index:-1}
#encounter-video{position:relative;display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:opacity .18s;}
#encounter .media-gradient{background:linear-gradient(#082c3426,transparent 28%,transparent 78%,#082c3452);pointer-events:none}
#encounter .mentor-caption{left:18px;bottom:16px;top:auto;gap:3px;text-shadow:0 2px 12px #071c26}
#encounter .mentor-caption strong{font-size:23px}
#encounter .mentor-caption .eyebrow{font-size:8px;max-width:125px}
#encounter .round-close{left:auto;right:14px;top:max(14px,env(safe-area-inset-top));width:44px;height:44px;z-index:5}
#encounter .encounter-content{position:relative;inset:auto;min-height:0;padding:22px 23px max(24px,env(safe-area-inset-bottom));background:var(--paper);border-radius:23px 23px 0 0;margin-top:-15px;z-index:2;scrollbar-width:thin}
#encounter .encounter-content h2{font-size:25px;line-height:1.17;margin:15px 0 8px}
#encounter .encounter-content>p{font-size:12px;margin:0 0 12px;line-height:1.6}
#encounter #answers{gap:8px;margin:7px 0 16px}
#encounter .answer{min-height:48px;padding:11px 12px;font-size:13px;gap:10px;flex-shrink:0}
#encounter #feedback{margin-bottom:15px}
#encounter .encounter-content>.primary{flex-shrink:0}
.inspect-insert{position:absolute;right:13px;bottom:24px;border:1px solid #fff5;border-radius:30px;min-height:44px;padding:10px 15px;color:#fff7da;background:#14363cdc;font-size:11px;z-index:3;backdrop-filter:blur(8px)}
#encounter.is-cinematic,#encounter.is-insert,#encounter.is-inspecting{grid-template-rows:1fr;background:#10292f}
#encounter.is-cinematic .encounter-media,#encounter.is-insert .encounter-media,#encounter.is-inspecting .encounter-media{position:absolute;inset:0}
#encounter.is-cinematic .encounter-content,#encounter.is-insert .encounter-content,#encounter.is-inspecting .encounter-content{display:none}
#encounter.is-cinematic .mentor-caption,#encounter.is-insert .mentor-caption,#encounter.is-inspecting .mentor-caption{display:none}
#encounter.is-cinematic .inspect-insert,#encounter.is-insert .inspect-insert,#encounter.is-inspecting .inspect-insert{display:none}
.film-controls{position:absolute;left:0;right:0;bottom:0;z-index:4;color:#fff0c8;padding:45px 22px max(19px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#0a272dde 43%);}
.film-heading{display:flex;flex-direction:column;gap:4px;margin-bottom:15px;pointer-events:none}
.film-heading .eyebrow{font-size:8px;color:#dccb9e}
.film-heading strong{font:23px/1.15 Georgia}
.film-progress{height:2px;background:#fff3;margin:0 0 14px;border-radius:2px;overflow:hidden}
.film-progress i{display:block;height:100%;width:0;background:#ecd08c;transition:width .15s linear}
.film-controls>.primary{margin-left:auto;min-height:44px;padding:11px 18px;font-size:12px;background:#eee1b6;color:#153b41;border-radius:30px}
#film-status{font-size:12px;line-height:1.5;margin:0 0 13px;color:#e2e6dc}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;border:1px solid #fff8;border-radius:32px;min-height:52px;padding:14px 23px;color:#fff6d9;background:#123a40ec;font-size:13px;white-space:nowrap;box-shadow:0 8px 40px #00182055}
.film-play:active{transform:translate(-50%,-50%) scale(.97)}
#opening-video{object-fit:contain;object-position:center}
#opening::before{content:"";position:absolute;inset:0;background:url('assets/images/00_intro.webp') center/cover;filter:blur(24px) brightness(.3);pointer-events:none}
#opening-video{position:relative;background:transparent}
#opening-brand{z-index:1}
#opening-play{z-index:3}
#world{transition:filter .25s}
body.in-encounter #world{filter:brightness(.7)}
@keyframes portrait-arrival{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@media(min-width:600px) and (min-height:700px){#encounter{height:min(960px,96dvh);border-radius:24px;max-height:96dvh}}
@media(max-height:710px){
 #encounter{grid-template-rows:minmax(145px,30dvh) minmax(0,1fr)}
 #encounter .encounter-content{padding:17px 20px 22px}#encounter .encounter-content h2{font-size:22px;margin-top:11px}
 #encounter .answer{padding:10px 11px;font-size:12px}.film-heading strong{font-size:20px}.film-controls{padding-top:28px}.film-heading{margin-bottom:11px}
}
@media(prefers-reduced-motion:reduce){#encounter[open]{animation:none}#world,#encounter-video{transition:none}}
body.reduce-media-motion #encounter[open]{animation:none}body.reduce-media-motion #world{transition:none}

#encounter #question-title:focus{outline:none}
/* Keep the scene itself clear: titles in the top margin, transport at the bottom. */
#encounter .film-controls{inset:0;padding:0;background:linear-gradient(#0a272d94,transparent 15%,transparent 83%,#0a272d9c);pointer-events:none}
#encounter .film-heading{position:absolute;top:max(20px,env(safe-area-inset-top));left:22px;right:75px;margin:0;text-shadow:0 2px 12px #081e25}
#encounter .film-heading strong{font-size:21px}
#encounter .film-progress{position:absolute;left:22px;right:22px;bottom:max(77px,calc(env(safe-area-inset-bottom) + 62px));margin:0}
#encounter .film-controls>.primary{position:absolute;right:22px;bottom:max(19px,env(safe-area-inset-bottom));pointer-events:auto}
#encounter #film-status{position:absolute;left:22px;right:22px;bottom:94px;margin:0;background:#0a272ddc;border-radius:12px;padding:10px 12px}
#encounter.is-inspecting .film-heading{top:max(74px,calc(env(safe-area-inset-top) + 60px))}
#encounter.is-inspecting .film-play{top:max(14px,env(safe-area-inset-top));left:14px;transform:none;min-height:44px;padding:10px 14px;font-size:11px}
#encounter.is-inspecting .film-play:active{transform:scale(.97)}
/* Reserve real room for controls, including on shorter portrait phones. */
#encounter.is-cinematic #encounter-video,#encounter.is-insert #encounter-video,#encounter.is-inspecting #encounter-video{position:absolute;top:max(76px,calc(env(safe-area-inset-top) + 62px));left:0;width:100%;height:calc(100% - max(76px,calc(env(safe-area-inset-top) + 62px)) - max(76px,calc(env(safe-area-inset-bottom) + 62px)))}
#encounter.is-inspecting .film-heading{display:none}

#opening-video{height:calc(100% - max(86px,calc(env(safe-area-inset-bottom) + 72px)))}

#encounter .encounter-media{overflow:clip}

/* A small keepsake of knowledge, with no countdown or simulated loading. */
#encounter.has-curiosity{grid-template-rows:minmax(130px,24dvh) minmax(0,1fr)}
#encounter.has-curiosity .reward-medallion{display:flex;align-items:center;gap:12px;text-align:left;padding:0}
#encounter.has-curiosity .reward-medallion>span{width:36px;height:36px;margin:0;flex-shrink:0;font-size:20px;box-shadow:none}
#encounter.has-curiosity .reward-medallion small{font-size:10px;letter-spacing:.05em;line-height:1.5}
#encounter.has-curiosity #answers{margin:3px 0 12px}
.curiosity-card{position:relative;flex-shrink:0;padding:20px;border:1px solid #ddc997;border-radius:18px;background:radial-gradient(ellipse at 100% 0,#f0d69a66,transparent 65%),#fffaf0;margin:0 0 16px;box-shadow:0 7px 22px #765f3510}
.curiosity-overline{display:flex;align-items:center;gap:12px}
#curiosity-icon{font-size:29px;line-height:1}
.curiosity-overline>div{display:grid;gap:2px}
.curiosity-overline .eyebrow{color:#795923;font-size:10px;letter-spacing:.15em}
.curiosity-overline small{color:#657368;font-size:11px}
.curiosity-spark{margin-left:auto;color:#ae7c28;font-size:24px}
.curiosity-card h3{font:normal 24px/1.2 Georgia,serif;letter-spacing:-.02em;margin:16px 0 9px;color:#193d40}
.curiosity-card>p{font-size:15px;line-height:1.6;margin:0 0 12px;color:#324d49}
.curiosity-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;border-top:1px solid #e7d9ba;padding-top:8px}
.curiosity-footer small{font-size:10px;color:#5d6f62;line-height:1.5}
.curiosity-footer a{display:inline-flex;align-items:center;min-height:44px;color:#596f61;font-size:11px;text-underline-offset:3px}
#encounter.has-curiosity #continue-button{width:100%;min-height:48px}
#encounter.has-curiosity #review-domain{min-height:44px}
#curiosity-journal{margin:26px 0}
#curiosity-journal-title{font:24px Georgia,serif;margin:0 0 8px}
#curiosity-journal-count{font-size:12px;line-height:1.6;color:#5b6f63}
.curiosity-entry{border-top:1px solid var(--line);padding:3px 0;font-size:13px;line-height:1.6}
.curiosity-entry summary{min-height:48px;padding:12px 2px;cursor:pointer;color:var(--ink)}
.curiosity-entry p{margin:0 0 8px}.curiosity-entry a{display:inline-flex;align-items:center;min-height:44px;color:#4c685a;font-size:11px}
@media(max-height:710px){#encounter.has-curiosity{grid-template-rows:130px minmax(0,1fr)}.curiosity-card{padding:15px}.curiosity-card h3{font-size:22px;margin-top:12px}}