/* Short, optional arrival sequence. Native dialog keeps the background inert. */
html.welcome-playing{overflow:hidden}
.welcome{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:28px;color:#edf1f5;background:#080f1b;overflow:hidden;isolation:isolate;opacity:1;transition:opacity .36s ease,transform .36s ease}
.welcome:not([open]){display:none}
.welcome[open]{display:grid;place-items:center}
.welcome::backdrop{background:#080f1b}
.welcome:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#080f1bed,#080f1b99,#080f1bed),url("assets/starfield.webp") center/cover;opacity:.55}
.welcome.leaving{opacity:0;transform:scale(1.015);pointer-events:none}
.welcome-top,.welcome-bottom{position:absolute;left:clamp(24px,5vw,80px);right:clamp(24px,5vw,80px);display:flex;justify-content:space-between;align-items:center;gap:18px;font-family:var(--technical,monospace);font-size:.75rem;letter-spacing:.12em;color:#a8b7c9}
.welcome-top{top:32px;padding-bottom:18px;border-bottom:1px solid #d9a35444}
.welcome-top>span:first-child{color:#f2c36c}
.welcome-bottom{bottom:28px}
.welcome-skip{background:transparent;border:1px solid #52627a;border-radius:5px;color:#edf1f5;padding:11px 16px;min-height:44px;font-size:.85rem;letter-spacing:0}
.welcome-skip:hover{border-color:#f2c36c;color:#f2c36c}
.welcome-center{text-align:center;position:relative;display:grid;justify-items:center;padding:55px 0;width:min(100%,650px)}
.welcome-rings{position:absolute;width:330px;aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none}
.welcome-rings span{position:absolute;inset:0;border:1px solid #d9a35430;border-radius:50%}
.welcome-rings span:first-child{border-top-color:#d9a354bb;border-bottom-color:#d9a35488;animation:welcome-orbit 8s linear infinite}
.welcome-rings span:nth-child(2){inset:18px;border:1px dashed #a8b7c930;animation:welcome-orbit 16s linear infinite reverse}
.welcome-rings span:last-child{inset:-22px;border-color:#a8b7c912}
.welcome-mark{font-family:var(--technical,monospace);color:#f2c36c;font-size:.8rem;letter-spacing:.23em;margin-bottom:26px}
.welcome h2{font-size:clamp(2.8rem,8vw,6rem);font-weight:400;text-transform:uppercase;letter-spacing:.12em;margin:0 0 18px;padding-left:.12em;line-height:1.1;animation:welcome-arrive .8s ease both}
.welcome-center>p{font-size:1rem;color:#f2c36c;letter-spacing:.05em;animation:welcome-arrive .9s ease both}
.welcome-line{height:2px;width:130px;background:#d9a35425;margin-top:32px;overflow:hidden}
.welcome-line:after{content:"";display:block;height:100%;background:#f2c36c;transform-origin:left;animation:welcome-line 4s ease-in-out both}
@keyframes welcome-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes welcome-orbit{to{transform:rotate(360deg)}}
@keyframes welcome-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:600px){.welcome-top{font-size:.75rem;letter-spacing:.04em;top:24px}.welcome-top>span:last-child{display:none}.welcome-rings{width:260px}.welcome h2{font-size:clamp(2rem,9vw,3.5rem);letter-spacing:.08em}.welcome-bottom>span{max-width:140px;font-size:.75rem}.welcome-bottom{bottom:22px}.welcome-skip{flex-shrink:0}.welcome-mark{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.welcome,.welcome *{animation:none!important;transition:none!important}}

@font-face{font-family:"Jura";src:url("assets/fonts/Jura.ttf") format("truetype");font-weight:300 700;font-style:normal;font-display:swap}
.welcome h2{font-family:"Jura",sans-serif;font-weight:300;letter-spacing:.2em;padding-left:.2em}
.welcome-mark{font-family:"Jura",sans-serif;font-weight:500;letter-spacing:.23em}
@media(max-width:600px){.welcome h2{font-size:clamp(2rem,8.4vw,3.5rem);letter-spacing:.12em;padding-left:.12em}}