/* Mobile uses the same film and clock in both orientations. */
#film-frame{position:absolute;inset:0;overflow:hidden;background:#000}
.mobile-framed{position:absolute!important;inset:auto;max-width:none!important;object-fit:fill!important}
#experience[data-mobile-cinema=portrait],#experience[data-mobile-cinema=landscape]{background:#020a0f}
#experience[data-mobile-cinema=portrait] #scene-media,#experience[data-mobile-cinema=landscape] #scene-media{right:auto;bottom:auto;overflow:hidden}
#experience[data-mobile-cinema=portrait] #film-frame,#experience[data-mobile-cinema=landscape] #film-frame{right:auto;bottom:auto;background:transparent}
#experience[data-mobile-cinema=portrait] .transition-screen,#experience[data-mobile-cinema=landscape] .transition-screen{background:#020a0f}
#experience[data-mobile-cinema=portrait] .veil,#experience[data-mobile-cinema=landscape] .veil{background:linear-gradient(180deg,#020a0f44,transparent 18%,transparent 82%,#020a0f55)}
.rotate-hint{position:absolute;z-index:8;top:max(76px,calc(env(safe-area-inset-top) + 60px));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);display:flex;align-items:center;gap:10px;padding:7px 8px 7px 13px;border:1px solid #c4dfd24a;border-radius:12px;background:#09242cdd;backdrop-filter:blur(10px);color:#f7eedc;box-shadow:0 3px 14px #0002}
.rotate-hint>svg{width:27px;height:27px;flex:none;fill:none;stroke:#d9d6b4;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rotate-hint strong{display:block;font-size:.875rem;font-weight:500;line-height:1.3}
.rotate-hint small{display:block;font-size:.75rem;line-height:1.4;color:#c9d8d8;margin-top:2px}
#dismiss-rotate{width:44px;min-width:44px;height:44px;padding:0;font-size:1.35rem;color:#d9e5e2}
.rotate-hint[hidden]{display:none}
@media(orientation:landscape){.rotate-hint{display:none}}
/* A dedicated, compact portrait masthead keeps the logo off the picture edge. */
#experience[data-mobile-cinema=portrait]{--mobile-header-height:calc(64px + env(safe-area-inset-top))}
#experience[data-mobile-cinema=portrait] .masthead{height:var(--mobile-header-height);padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));gap:12px;background:#020a0f}
#experience[data-mobile-cinema=portrait] .brand{width:126px}
#experience[data-mobile-cinema=portrait] .brand img,#experience[data-mobile-cinema=landscape] .brand img{display:block}
#experience[data-mobile-cinema=portrait] .language-switch,#experience[data-mobile-cinema=landscape] .language-switch{gap:4px}
#experience[data-mobile-cinema=portrait] .language-switch button,#experience[data-mobile-cinema=landscape] .language-switch button{min-width:44px;min-height:44px;padding:6px;font-size:.875rem}
/* Controls also keep their position when the cards or the phone tip disappear. */
#experience[data-mobile-cinema=portrait] :is(.film-sound,.film-pause){top:max(88px,calc(env(safe-area-inset-top) + 72px))}
#experience[data-mobile-cinema=portrait] .rotate-hint{top:max(148px,calc(env(safe-area-inset-top) + 132px))}
@media(max-width:380px){.rotate-hint{gap:7px;padding-left:9px}.rotate-hint small{max-width:210px}.rotate-hint>svg{width:23px}}
/* The film has the entire landscape viewport throughout playback and arrival.
   Choices sit on the picture; they never reserve or resize part of the film. */
#experience[data-mobile-cinema=landscape]{padding:0;overflow:hidden;display:block}
#experience[data-mobile-cinema=landscape] .journey-panel.is-choice-panel{left:50%;right:auto;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(860px,calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));padding:6px}
#experience[data-mobile-cinema=landscape] .journey-panel:has(.newsletter-panel:not([hidden])){width:min(460px,calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
#experience[data-mobile-cinema=landscape] .is-choice-panel .scene-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#experience[data-mobile-cinema=landscape] .arrival-option,#experience[data-mobile-cinema=landscape] .is-choice-panel .scene-choice.direction-next{min-height:108px;padding:12px 11px;font-size:1.08rem}
#experience[data-mobile-cinema=landscape] .arrival-icon{top:7px;left:8px;width:25px;height:25px}
#experience[data-mobile-cinema=landscape] .arrival-continue .arrival-icon{left:auto;right:8px}
#experience[data-mobile-cinema=landscape] .arrival-icon svg{width:17px;height:17px}
#experience[data-mobile-cinema=landscape] .masthead{left:max(calc(var(--mobile-picture-left) + 16px),env(safe-area-inset-left));right:max(calc(var(--mobile-picture-left) + 16px),env(safe-area-inset-right));top:var(--mobile-picture-top);padding:8px 0;min-height:60px;gap:12px;filter:drop-shadow(0 2px 5px #00101988)}
#experience[data-mobile-cinema=landscape] .brand{width:126px}
#experience[data-mobile-cinema=landscape] .film-sound{right:max(calc(var(--mobile-picture-left) + 16px),env(safe-area-inset-right));top:calc(var(--mobile-picture-top) + 68px)}
#experience[data-mobile-cinema=landscape] .film-pause{left:max(calc(var(--mobile-picture-left) + 16px),env(safe-area-inset-left));top:calc(var(--mobile-picture-top) + 68px)}
@media(max-height:360px){#experience[data-mobile-cinema=landscape] .arrival-option,#experience[data-mobile-cinema=landscape] .is-choice-panel .scene-choice.direction-next{min-height:96px;font-size:1rem}}

/* Poule sits low in the picture: move only its choices, never its frame. */
body[data-scene=rencontre] #experience[data-mobile-cinema=landscape] .journey-panel.is-choice-panel{left:auto;right:max(12px,env(safe-area-inset-right));transform:none;width:248px}
body[data-scene=rencontre] #experience[data-mobile-cinema=landscape] .scene-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-scene=rencontre] #experience[data-mobile-cinema=landscape] .arrival-option,body[data-scene=rencontre] #experience[data-mobile-cinema=landscape] .scene-choice.direction-next{min-height:98px;font-size:1rem;padding:10px 8px}
@media(max-height:360px){
 body[data-scene=rencontre] #experience[data-mobile-cinema=landscape] .journey-panel.is-choice-panel{width:230px}
 body[data-scene=rencontre] #experience[data-mobile-cinema=landscape] .arrival-option,body[data-scene=rencontre] #experience[data-mobile-cinema=landscape] .scene-choice.direction-next{min-height:96px}
 body[data-scene=rencontre] #experience[data-mobile-cinema=landscape] .film-sound{top:calc(var(--mobile-picture-top) + 8px);right:calc(var(--mobile-picture-left) + 128px)}
}