/* Shared portrait sizing and ambient desktop canvas. */
:root{--portrait-width:480px;--ambient:radial-gradient(ellipse at 12% 30%,rgba(187,139,53,.18),transparent 46%),radial-gradient(ellipse at 88% 48%,rgba(77,127,205,.23),transparent 48%),radial-gradient(circle at 10% 16%,#e3cf9444 0 1px,transparent 2px),radial-gradient(circle at 84% 24%,#c8ddff55 0 1px,transparent 2px),radial-gradient(circle at 22% 78%,#d8e7ff44 0 1px,transparent 2px),radial-gradient(circle at 78% 82%,#e3cf9444 0 1px,transparent 2px),linear-gradient(150deg,#101d38,#081226 65%,#101c35)}
html{min-height:100%;background:#0b162c}body{background:var(--ambient)!important;background-attachment:fixed!important;min-height:100svh}
#cover,#intro,#app{background:var(--ambient)!important}
#app::before{opacity:.18}
.cover-frame,.art-menu{width:min(100%,var(--portrait-width))!important}
#cover{align-items:flex-start}
.cover-frame{margin:0 auto}
#intro video{width:min(100%,var(--portrait-width));height:100svh;object-fit:contain;background:transparent}
html{--stage-width:min(100vw,var(--portrait-width))}
.shell{width:var(--stage-width)}
.stage{width:min(100%,var(--portrait-width));height:auto;aspect-ratio:1080/1868;min-height:0}
.stage video{width:100%;height:100%;object-fit:cover;background:transparent}
.stage .bottom{padding-bottom:24px}
@media(max-width:600px){:root{--portrait-width:100vw}.cover-frame,.art-menu,.stage{width:100%!important}.stage{height:auto;aspect-ratio:1080/1868}.stage video{object-fit:cover}.shell{width:100%}}
/* Preserve every shot and transition without cropping on any screen. */
#intro video{width:100%;height:100svh;object-fit:contain;object-position:center;}

/* Separate, fully contained side panels: never crop or cover the centre. */
#throneAmbience{position:fixed;inset:0;z-index:65;pointer-events:none}
#throneAmbience[hidden]{display:none!important}
#throneAmbience .throne-side{position:absolute;top:0;bottom:0;width:calc((100% - 520px)/2);padding:18px 14px;display:flex;align-items:center;justify-content:center}
#throneAmbience .nita{left:0}#throneAmbience .xiang-er{right:0}
#throneAmbience video{position:static;inset:auto;transform:none;width:100%;height:100%;max-height:860px;object-fit:contain;pointer-events:none;background:transparent;border:0;border-radius:0}
body .intro{background:#071528c9}
@media(max-width:1000px){#throneAmbience{display:none!important}}

body .stage{height:100svh;min-height:100svh;aspect-ratio:auto}body .stage video{object-fit:contain}body .stage.invitation-ended .bottom{bottom:auto;top:58%;padding:12px 24px}

/* Keep Skip within the centre video column, clear of the throne panels. */
#intro .intro-actions{inset:0 auto 0 50%;width:min(100%,480px);transform:translateX(-50%);z-index:2;padding:max(16px,env(safe-area-inset-top)) 16px}
#skipIntro{position:relative;z-index:3;min-width:72px;min-height:44px;background:#06142deF;border:1px solid #f1d58d;color:#fff3d2;font:600 15px Arial,sans-serif;box-shadow:0 2px 12px #0008;cursor:pointer}
#skipIntro:focus-visible{outline:2px solid white;outline-offset:3px}