/* Portrait entry sequence, using the original films and soundtrack. */
:root{--welcome-action-surface:#e3b23c}
body:has(main:empty) .topbar{display:none}
body:has(main:empty){background:#090d0f}
.cinematic{background:#090d0f;overflow:hidden}
.cinematic .topbar{display:none}
.cinematic main{max-width:460px;padding:0;margin:0 auto}
.cinema-stage{position:relative;height:100svh;width:100%;background:#0a0907;isolation:isolate;overflow:hidden;color:#fff0d3}
.cinema-stage [hidden]{display:none!important}
.cinema-video{width:100%;height:100%;object-fit:contain;display:block;background:#0a0907}
.cinema-controls{position:absolute;z-index:4;top:max(14px,env(safe-area-inset-top));left:15px;right:15px;display:flex;justify-content:space-between;gap:12px}
.cinema-controls .cinema-skip{display:none}
.cinema-stage:has(.cinema-cover[hidden]) .cinema-controls .cinema-skip{display:inline-flex}
.cinema-controls button,.cinema-pause{color:#ffe5af;background:#1b2a2290;border:1px solid #d6b77b70;backdrop-filter:blur(12px);border-radius:24px;min-height:44px;padding:9px 15px;font-size:12px;text-shadow:0 1px 4px #000}
.cinema-sound{display:inline-flex;align-items:center;justify-content:center}
.cinema-sound .sound-ico{flex:none;filter:drop-shadow(0 1px 3px #000)}
.cinema-sound[data-muted="true"] .sound-ico{opacity:.72}
.cinema-skip{display:inline-flex;align-items:center;justify-content:center}
.cinema-skip span{margin-left:7px;font-size:21px;line-height:10px;vertical-align:-1px}
.cinema-cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:35px 25px max(74px,calc(env(safe-area-inset-bottom) + 40px));background:linear-gradient(180deg,#0f0a0410 15%,#0f0a0470 55%,#100b06e8);text-align:center}
.cinema-stage[data-mode="ready"] .cinema-cover{background-image:url("assets/welcome-temple-collage.webp");background-size:cover;background-position:center;background-repeat:no-repeat}
.cinema-stage[data-mode="ready"] .cinema-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#00000042 0%,#00000052 55%,#00000075 100%);z-index:0;pointer-events:none}
.cinema-cover>*{position:relative;z-index:1}
:root{--welcome-action-stone:url('assets/eljem/whole-stone-0.png')}
.cinema-welcome{position:relative;transform:translateY(-5svh)}
.cinema-brand-logo{display:block;margin:0 auto 34px;width:250px;height:auto;filter:drop-shadow(0 4px 18px #0009)}
.cinema-brand{font-size:12px;letter-spacing:5px;font-weight:700;color:#f1d297}
.cinema-start{width:100%;max-width:330px;min-height:54px;gap:12px;font-size:14px;border:0;border-radius:6px;background:var(--welcome-action-stone) center/100% 100% no-repeat;background-color:transparent;color:#302b25;text-shadow:0 1px 1px #e3ded3;letter-spacing:0;font-weight:700;box-shadow:0 4px 5px #302b2559}
.cinema-start:hover:not(:disabled){filter:brightness(1.08)}
.cinema-start:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 2px #302b2559}
.cinema-start:disabled{opacity:.75}
.cinema-message{font-size:13px;line-height:1.7;max-width:300px;margin:0 0 18px;color:#f6e4c0}
.cinema-message:empty{display:none}
.cinema-loading{position:absolute;top:48%;left:20px;right:20px;text-align:center;padding:14px 18px;background:#100c08d9;border-radius:8px;font-size:12px}
.cinema-bottom{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px}
.cinema-pause{width:44px;padding:0;font-size:18px}
.cinema-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#fff3;border-radius:3px;overflow:hidden}
.cinema-progress span{display:block;height:100%;width:0;background:#edcb87;transition:width .2s linear}
.cinema-stage[data-mode="paused"] .cinema-cover,.cinema-stage[data-mode="blocked"] .cinema-cover,.cinema-stage[data-mode="error"] .cinema-cover{background:#100c0870;justify-content:center;padding-bottom:35px}
@media(min-width:721px){.cinema-stage{height:min(100svh,818px);box-shadow:0 0 90px #0008}}
@media(max-height:560px){.cinema-cover{padding-bottom:24px}.cinema-brand-logo{width:194px;margin-bottom:24px}}
/* Landing cover: centered group, no sound control. */
.cinema-stage[data-mode="ready"] .cinema-cover{justify-content:center;padding:0 25px}
.cinema-stage[data-mode="ready"] .cinema-welcome{transform:none}
.cinema-stage[data-mode="ready"] .cinema-sound{display:none}
:root{--login-surface:var(--toolbar-bg,#12302a7a);--login-border:var(--toolbar-border,#ddc18a40);--login-ink:var(--toolbar-text,#f9e3b2);--login-input:#0b201bcc;--login-error:#ffe4ca}
.cinema-stage[data-mode="ready"] .cinema-cover{overflow-y:auto;justify-content:safe center;padding:55px 25px 24px}
.cinema-stage[data-mode="ready"] .cinema-brand-logo{width:250px;margin-bottom:20px}
.cinema-tt-logo{position:absolute;z-index:6;top:max(14px,env(safe-area-inset-top));left:15px;height:46px;width:auto;filter:drop-shadow(0 2px 6px #0008)}
.cinema-stage:not([data-mode="ready"]) .cinema-tt-logo{display:none}
.player-auth{width:100%;max-width:340px;flex-shrink:0;padding:22px 20px;background:var(--login-surface);border:1px solid var(--login-border);border-radius:8px;color:var(--login-ink);text-align:left}
.player-auth h2{text-align:center;font-size:20px;margin:0 0 20px;letter-spacing:0}
.player-auth label{display:block;font-size:14px;margin:0 0 7px}
.player-auth input{box-sizing:border-box;width:100%;height:43px;border:1px solid var(--login-border);border-radius:5px;background:var(--login-input);color:var(--login-ink);font:inherit;font-size:16px;padding:10px 12px;margin-bottom:16px}
.player-auth input:focus{outline:2px solid var(--login-ink);outline-offset:2px}
.player-auth .cinema-start{display:block;margin:7px auto 0;box-shadow:none}
.player-status{font-size:13px;line-height:1.5;color:var(--login-error);margin:0 0 10px}
.player-status:empty{display:none}
.player-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:18px}
.player-actions button{border:0;padding:0;background:transparent;color:var(--login-ink);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}
.cinema-stage:not([data-mode="ready"]) .player-auth{display:contents}
.cinema-stage:not([data-mode="ready"]) .player-auth>:not(.cinema-start){display:none}
@media(max-height:600px){.cinema-stage[data-mode="ready"] .cinema-brand-logo{width:175px;margin-bottom:12px}.player-auth{padding:16px}.player-auth h2{margin-bottom:12px}.player-auth input{margin-bottom:10px}}

.player-popup{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.6)}
.player-popup-card{position:relative;width:min(340px,100%);padding:26px 22px 20px;background:#12302ae6;border:1px solid rgba(232,184,74,.8);border-radius:10px;color:#e8f0e4;text-align:center;font-size:17px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.player-popup-card h3{margin:0 0 14px;color:#e8b84a;font-size:20px}
.player-popup-card p{margin:8px 0}
.player-popup-close{position:absolute;top:6px;right:10px;background:none;border:0;color:#e8e2d4;font-size:26px;cursor:pointer;line-height:1}