/* A painted threshold is visible while modules and the actual scene prepare. */
#opening{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 88%,#3d241b 0,transparent 44%),radial-gradient(ellipse at 50% 5%,#192c3c,transparent 63%),#05090e;color:#ead7ad;transition:opacity .65s ease}
#opening.leaving{opacity:0;pointer-events:none}
.opening-arch{position:absolute;left:50%;top:9%;width:min(66vw,740px);height:120%;transform:translateX(-50%);border:1px solid #a0bacc24;border-radius:50% 50% 0 0;box-shadow:0 0 100px #8cc4ed0b,inset 0 0 90px #9ab9df0c}
.opening-arch::before,.opening-arch::after{content:'';position:absolute;inset:20px;border:1px solid #a0bacc13;border-radius:inherit}.opening-arch::after{inset:45px}
.opening-arch i{position:absolute;bottom:0;left:25%;width:50%;height:45%;background:radial-gradient(ellipse at bottom,#c4894620,transparent 70%);filter:blur(25px)}
.opening-seal{position:relative;text-align:center;width:min(620px,90vw);padding:32px 12px}
.opening-kicker{font:11px var(--serif,Georgia);text-transform:uppercase;letter-spacing:.3em;color:#9dadb7;margin:0 0 30px}
.opening-seal h1{font:clamp(38px,7vw,78px)/1.2 var(--menu-display,Georgia);font-weight:400;letter-spacing:.03em;margin:0;text-shadow:0 2px 2px #000,0 0 50px #d6ad6220}
.opening-seal h1 span{display:block}
.opening-rule{height:50px;margin:14px auto 26px;width:min(360px,80%);background:url('./assets/ui/menu-flourish.svg') center/contain no-repeat;opacity:.65}
#opening-status{color:#b4c4ce;font:14px/1.6 var(--serif,Georgia);letter-spacing:.06em;min-height:24px;margin:0 0 17px}
.opening-embers{display:flex;justify-content:center;gap:10px;height:24px}.opening-embers i{width:3px;height:3px;background:#d6b376;transform:rotate(45deg);animation:opening-glow 1.8s ease-in-out infinite}.opening-embers i:nth-child(2){animation-delay:.3s}.opening-embers i:nth-child(3){animation-delay:.6s}
#opening.failed .opening-embers{visibility:hidden}#opening-retry{margin-top:14px;min-width:110px;min-height:44px}#opening-retry[hidden]{display:none}
@keyframes opening-glow{0%,100%{opacity:.25}50%{opacity:1;box-shadow:0 0 10px #dfbe7b}}
/* Keep the opening composition readable while the camera advances through the nave. */
#login.accounts-screen{background:linear-gradient(90deg,#05080e77,transparent 48%,#05080e5c),linear-gradient(#04070c99,transparent 24%,transparent 73%,#04070cb8)}
#login.accounts-screen .lid{display:block;height:3cqh;animation:none;pointer-events:none;z-index:1;opacity:.85}
#login.accounts-screen .crest{top:18%;animation:none}
#login.accounts-screen .account-panel{animation:none;top:20%;max-height:70%}
body:not(.booting) .title-arrive #login.accounts-screen .crest{animation:cinematic-title 1.7s .15s both}
body:not(.booting) .title-arrive #login.accounts-screen .account-panel{animation:cinematic-folio 1s .4s both}
.title-controls{position:absolute;right:7%;bottom:5%;display:flex;gap:8px;z-index:2}
.title-controls .btn{font:12px var(--serif);color:#c5c7c4;background:#080b10a6;border:1px solid #8796a14d;min-height:36px;padding:8px 12px;letter-spacing:.02em}
.title-controls .btn[aria-pressed=true]{border-color:#c9aa6e;color:#ead5aa}
.title-controls .btn:disabled{opacity:.65;cursor:default}
@keyframes cinematic-title{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes cinematic-folio{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@container(max-width:700px){
 #login.accounts-screen .crest{top:4%}
 #login.accounts-screen .account-panel{top:32%;max-height:57%;padding:14px 12px}
 .title-controls{right:16px;left:16px;bottom:3%;justify-content:center}.title-controls .btn{min-height:40px;font-size:11px}
}
@container(max-height:560px) and (min-width:701px){
 #login.accounts-screen .crest{top:10%}#login.accounts-screen .account-panel{top:7%;max-height:80%}
 #login.accounts-screen .crest>.menu-mark{display:none}.title-controls{bottom:3%;right:auto;left:12%}
}
@media(prefers-reduced-motion:reduce){
 #opening{transition:none}.opening-embers i{animation:none;opacity:.7}
 #login.accounts-screen .crest,#login.accounts-screen .account-panel{animation:none}
}