*{box-sizing:border-box}body{margin:0;background:#050a12;color:#dceaf4;font:16px system-ui,sans-serif}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px max(20px,env(safe-area-inset-left));border-bottom:1px solid #183448}a{color:#70dfef;text-decoration:none}header span{font-weight:800;letter-spacing:.14em}button{font:inherit;font-weight:700;border:1px solid #2bdef5;background:#082330;color:#67ecff;padding:12px 20px;cursor:pointer;border-radius:4px}button:disabled{opacity:.45;cursor:default}button:hover:not(:disabled){background:#124354}button:focus-visible,a:focus-visible{outline:3px solid #ffb74f;outline-offset:4px}main{max-width:1440px;margin:auto;padding:20px}#player{position:relative;width:100%;aspect-ratio:16/9;background:#02050a;border:1px solid #183448;overflow:hidden}#game{display:block;width:100%;height:100%;touch-action:none;outline:none}#cover{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;background:radial-gradient(ellipse at center,#103245,#050b15 75%)}#cover[hidden],[hidden]{display:none!important}.logo{display:block;width:min(580px,70vw);max-height:230px;object-fit:contain;margin:auto}#start{font-size:20px;padding:14px 34px;margin-top:12px}.guide{color:#99adbd;font-size:14px;line-height:1.6}#status{font-size:15px;color:#70dfef}progress{width:min(400px,65vw);height:15px;accent-color:#38dff4}.rotate{display:none}#player:fullscreen{border:0;display:grid;place-items:center;background:#000}#player:fullscreen #game{width:min(100vw,calc(100dvh * 16 / 9));height:min(100dvh,calc(100vw * 9 / 16))}#player:fullscreen #cover{position:absolute}@media(max-width:640px){main{padding:10px}header{padding:10px;font-size:13px;gap:8px}header span{display:none}header button{padding:8px 12px}.logo{max-height:120px}#start{font-size:16px;padding:10px 22px}#welcome p{font-size:12px}h1{font-size:20px}#status{font-size:13px}.rotate{display:block}}@media(max-height:500px) and (orientation:landscape){main{padding:8px}header{padding:8px 16px}.guide{font-size:12px}}
html:has(#cover.intro-active){overflow:hidden}
#cover.intro-active{position:fixed;inset:0;z-index:1000;padding:0;background:#131217}
#loading{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:#131217}
#intro{display:block;position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;margin:0}
#loading-status{position:absolute;left:0;right:0;bottom:0;padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:linear-gradient(transparent,rgba(0,0,0,.8));pointer-events:none}
#loading h1{font-size:16px;margin:8px 0}#loading p{font-size:13px;margin:4px 0}
#skip-intro{position:absolute;z-index:1;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));min-height:44px;padding:8px 14px;font-size:14px;background:rgba(8,35,48,.85)}
@media(max-height:500px){#loading h1{display:none}#loading progress{height:8px}}
/* Preserve the complete wordmark on portrait and unusually wide displays.
   The video's matching edge color extends the animation to the viewport. */
@media(max-aspect-ratio:1/1),(min-aspect-ratio:12/5){#intro{object-fit:contain}}
/* Version 2: black opening, complete frame, then a short fade to the ready game. */
#cover.intro-active,#loading{background:#000}
#intro{object-fit:contain;transition:opacity .35s ease}
#loading.intro-ended #intro{opacity:0}
#loading.intro-ended{background:#07111e}
#cover{transition:opacity .45s ease}
#cover.handoff{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){#cover,#intro{transition:none}}