/* Keep the cinematic in its own aspect ratio; the title sits in the empty sky. */
.opening{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:radial-gradient(ellipse at 60% 35%,#25374d,#090e1b 76%);overflow:hidden;color:#f9e7bf;isolation:isolate}
.opening-frame{position:relative;width:min(100vw,177.7778vh);width:min(100vw,177.7778dvh);aspect-ratio:16/9;container-type:inline-size;overflow:hidden}
.opening-frame video,.opening-still{display:block;width:100%;height:100%;object-fit:contain}
.opening-still{position:absolute;inset:0;display:none}
.opening[data-phase=still] video{visibility:hidden}
.opening[data-phase=still] .opening-still{display:block}
.opening-title{position:absolute;left:39%;top:39%;width:56%;text-align:center;pointer-events:none;opacity:0;transform:translateY(7px);transition:opacity .55s ease,transform .8s ease;color:#ffebbf;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;text-shadow:0 2px 4px #172340,0 0 15px #0d183abf,0 0 32px #1a264699}
.opening-title::before{content:"";position:absolute;inset:-24% -2%;z-index:-1;background:radial-gradient(ellipse,#101c344a,transparent 70%)}
.opening.title-visible .opening-title{opacity:1;transform:none}
.opening-game-name{margin:0;font-size:clamp(13px,2.5vw,32px);font-size:clamp(13px,2.5cqw,34px);font-weight:500;letter-spacing:.08em;line-height:1.6;color:#fff1d4}
.opening-game-name span{display:block;font:400 clamp(9px,1.2cqw,15px)/1.5 Georgia,serif;letter-spacing:.18em;margin-top:.1em}
.opening-rule{display:block;width:22%;height:1px;background:linear-gradient(90deg,transparent,#fbe3a6,transparent);margin:clamp(6px,1.2cqw,15px) auto}
.opening-title h2{margin:0;font-size:clamp(18px,3.9vw,50px);font-size:clamp(18px,3.9cqw,50px);font-weight:500;letter-spacing:.12em;line-height:1.5;white-space:nowrap}
.opening-actions{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));right:max(24px,env(safe-area-inset-right));left:max(24px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.opening-actions p{margin:0;color:#ede7dd;font-size:12px;line-height:1.6;letter-spacing:.035em;text-shadow:0 2px 7px #030917}
.opening-actions p:empty{display:none}
.opening-buttons{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.opening-buttons button{min-height:44px;min-width:44px;padding:10px 16px;border:1px solid #e7d4a957;border-radius:3px;background:#101b2ce8;color:#f2e5cb;font-size:12px;letter-spacing:.04em}
.opening-buttons button:hover{background:#28374a;border-color:#fbe2ad}
.opening-buttons #opening-skip{color:#ffe7b2;border-color:#d8bf8e88}
.opening-buttons button:focus-visible{outline:2px solid #fff0c4;outline-offset:3px}
body[data-state=intro]>.topbar,body[data-state=intro]>.hud,body[data-state=intro]>.hint,body[data-state=intro]>.toast,body[data-state=intro]>.flight-progress{visibility:hidden}
@media(max-width:500px){.opening-actions{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));align-items:center}.opening-buttons{justify-content:center;gap:6px}.opening-buttons button{padding:10px 12px;font-size:11px}.opening-actions p{text-align:center;font-size:11px}.opening-title{left:37%;width:60%}.opening-title h2{letter-spacing:.035em}}
@media(max-height:440px) and (orientation:landscape){.opening-actions{bottom:max(10px,env(safe-area-inset-bottom));right:max(14px,env(safe-area-inset-right));gap:4px}.opening-buttons button{padding:9px 12px;font-size:11px}.opening-title{top:37%}}
@media(prefers-reduced-motion:reduce){.opening-title{transition:none;transform:none}}