html.splash-pending,html.splash-pending body{height:100%;overflow:hidden;background:#061725}
html.splash-pending #app{display:none!important}
#zaruba-splash{position:fixed;inset:0;z-index:1000;box-sizing:border-box;width:100%;height:100vh;height:100dvh;overflow:hidden;display:grid;place-items:center;padding:clamp(16px,3vw,32px);padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 43%,#103249 0%,#092338 43%,#061725 83%,#04121e 100%);isolation:isolate;opacity:1;transition:opacity .35s ease}
#zaruba-splash::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,#3489a512,transparent 62%);animation:zaruba-ambience 12s ease-in-out infinite alternate}
#zaruba-splash .splash-content{width:min(940px,100%);min-height:0;display:flex;align-items:center;flex-direction:column;gap:clamp(10px,1.8vh,22px)}
#zaruba-splash img{display:block;min-height:0;width:clamp(280px,88vw,900px);max-width:100%;height:auto;max-height:calc(100dvh - 136px);object-fit:contain;animation:zaruba-logo .8s cubic-bezier(.2,.7,.2,1) both;transition:opacity .35s ease,transform .35s ease}
#zaruba-splash button{position:relative;isolation:isolate;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;min-height:56px;width:clamp(210px,48vw,280px);max-width:100%;padding:14px 28px;border:1px solid #57c9dc;border-radius:12px;background:linear-gradient(165deg,#17455d 0%,#0c2b41 55%,#092335 100%);color:#e6fbff;font:750 19px/1.2 system-ui,sans-serif;letter-spacing:.035em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transition:opacity .42s cubic-bezier(.2,.75,.25,1),transform .42s cubic-bezier(.2,.75,.25,1),border-color .2s ease,box-shadow .2s ease;box-shadow:inset 0 0 0 3px #081d30,inset 0 0 0 4px #64d5e62e,0 8px 24px #0006,0 0 24px #2dbdd31c;text-shadow:0 1px 3px #0005}
#zaruba-splash .splash-cta-icon{width:21px;height:21px;flex:none;color:inherit}
#zaruba-splash button::before{content:"";position:absolute;inset:-60% auto -60% -55%;width:32%;pointer-events:none;background:linear-gradient(90deg,transparent,#c9faff2b,transparent);transform:translateX(-180%) skewX(-22deg);opacity:0}
#zaruba-splash button::after{content:"";position:absolute;inset:3px;border:1px solid #8ce3ed70;border-radius:8px;box-shadow:inset 0 0 12px #5bdaed14;opacity:.3;pointer-events:none}
#zaruba-splash.splash-ready button{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
#zaruba-splash.splash-ready button::before{animation:zaruba-shine 4.6s ease-in-out 1s infinite}
#zaruba-splash.splash-ready button::after{animation:zaruba-idle 4.6s ease-in-out infinite}
@media(hover:hover) and (pointer:fine){#zaruba-splash.splash-ready button:not(:disabled):hover{transform:translateY(-2px);border-color:#a7f1f5;box-shadow:inset 0 0 0 3px #081d30,inset 0 0 0 4px #84eaf056,0 10px 26px #0007,0 0 30px #42c8da32}}
#zaruba-splash.splash-ready button:not(:disabled):active{transform:translateY(1px) scale(.985);transition-duration:.1s;box-shadow:inset 0 0 0 3px #081d30,inset 0 0 0 4px #84eaf056,0 3px 12px #0006}
#zaruba-splash button:focus-visible{outline:2px solid #b7f6f8;outline-offset:5px}
#zaruba-splash.splash-closing{opacity:0;pointer-events:none}
#zaruba-splash.splash-closing img{animation:none;opacity:0;transform:scale(1.02)}
#zaruba-splash.splash-closing button{opacity:0;transform:translateY(8px) scale(.985);transition-duration:.3s}
#zaruba-splash.splash-closing button::before,#zaruba-splash.splash-closing button::after{animation:none}
@keyframes zaruba-logo{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:scale(1)}}
@keyframes zaruba-ambience{from{opacity:.35}to{opacity:.8}}
@keyframes zaruba-idle{0%,100%{opacity:.25}50%{opacity:.7}}
@keyframes zaruba-shine{0%,72%{transform:translateX(-180%) skewX(-22deg);opacity:0}76%{opacity:.65}94%{transform:translateX(650%) skewX(-22deg);opacity:0}100%{transform:translateX(650%) skewX(-22deg);opacity:0}}
@media(max-height:500px) and (orientation:landscape){#zaruba-splash{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}#zaruba-splash .splash-content{gap:8px}#zaruba-splash img{max-height:calc(100dvh - 98px)}#zaruba-splash button{min-height:52px;padding:12px 24px}}
@media(prefers-reduced-motion:reduce){#zaruba-splash,#zaruba-splash::before,#zaruba-splash img,#zaruba-splash button,#zaruba-splash button::before,#zaruba-splash button::after{animation:none!important;transition:none!important;transform:none!important}#zaruba-splash button::before{display:none}}
html.splash-seen #zaruba-splash{display:none!important}

/* The overlay shares the image box and its xMidYMid contain mapping. */
#zaruba-splash .splash-artwork{position:relative;min-height:0;width:clamp(280px,88vw,900px);max-width:100%}
#zaruba-splash .splash-artwork img{width:100%}
#zaruba-splash .splash-blink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#zaruba-splash .splash-eyelids{opacity:0}
#zaruba-splash .blink-closed .splash-eyelids{opacity:1}
#zaruba-splash.splash-closing .splash-blink{display:none}
@media(prefers-reduced-motion:reduce){#zaruba-splash .splash-blink{display:none}}

/* Only isolated eye/flag details move. The approved artwork remains the source. */
#zaruba-splash .mascot-gaze,#zaruba-splash .mascot-flag{display:none}
#zaruba-splash.mascot-active .mascot-gaze,#zaruba-splash.mascot-active .mascot-flag{display:inline}
#zaruba-splash.mascot-active .splash-artwork img{mask:url('./mascot-artwork-mask.svg?v=1.30.65&rev=97878136205f') center/100% 100% no-repeat}
#zaruba-splash .mascot-squint .splash-eyelids{opacity:1}
#zaruba-splash .mascot-squint .mascot-right-lid{opacity:0}
#zaruba-splash .mascot-flag-wave{animation:mascot-wave 2.4s ease-in-out infinite;animation-delay:var(--phase);animation-play-state:paused}
#zaruba-splash .mascot-flag-ripple{animation:mascot-ripple .91s ease-in-out infinite;animation-delay:var(--phase);animation-play-state:paused}
#zaruba-splash.mascot-active .mascot-flag-wave,#zaruba-splash.mascot-active .mascot-flag-ripple{animation-play-state:running}
@keyframes mascot-wave{0%,100%{transform:translate(calc(var(--wave) * (1 - var(--mascot-wind)) * .5),calc(var(--wave) * -.55 * var(--mascot-wind)))}45%{transform:translate(calc(var(--wave) * (1 - var(--mascot-wind)) * .5),calc(var(--wave) * var(--mascot-wind)))}}
@keyframes mascot-ripple{0%,100%{transform:translateY(calc(var(--ripple) * -1 * var(--mascot-wind)))}50%{transform:translateY(calc(var(--ripple) * var(--mascot-wind)))}}
@media(prefers-reduced-motion:reduce){#zaruba-splash.mascot-active .splash-artwork img{mask:none}#zaruba-splash .mascot-flag-wave,#zaruba-splash .mascot-flag-ripple{animation:none!important}}

@property --mascot-wind{syntax:"<number>";inherits:true;initial-value:1}
#zaruba-splash .mascot-mouth{display:none}
#zaruba-splash.mascot-active .mascot-smirk .mascot-mouth{display:inline}
#zaruba-splash .mascot-smirk .mascot-smile{animation:mascot-smirk 1.1s ease-in-out both}
#zaruba-splash.mascot-active .mascot-gust .mascot-flag{animation:mascot-gust .75s ease-in-out both}
@keyframes mascot-gust{0%,100%{--mascot-wind:1}22%,65%{--mascot-wind:1.28}}
@keyframes mascot-smirk{0%,100%{d:path('M442 515 C432 512 433 536 441 550 Q449 560 463 564 L543 528 Q494 533 448 518Z')}20%,73%{d:path('M442 515 C432 512 433 536 441 550 Q449 560 463 564 L548 525 Q496 530 448 518Z')}}
@media(prefers-reduced-motion:reduce){#zaruba-splash .mascot-smile,#zaruba-splash .mascot-flag{animation:none!important}}

#zaruba-splash .mascot-underlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
#zaruba-splash.mascot-active .mascot-underlay{display:block}
#zaruba-splash .splash-artwork>img{position:relative;z-index:1}
#zaruba-splash .splash-blink{z-index:2}
@media(prefers-reduced-motion:reduce){#zaruba-splash .mascot-underlay{display:none!important}}

/* Locale replacement remains visible and static with reduced motion / hidden tabs. */
#zaruba-splash.locale-flag .mascot-flag{display:inline}
#zaruba-splash.locale-flag .mascot-underlay{display:block!important}
#zaruba-splash.locale-flag .splash-artwork img{mask:url('./mascot-artwork-mask.svg?v=1.30.65&rev=97878136205f') center/100% 100% no-repeat}
@media(prefers-reduced-motion:reduce){#zaruba-splash.locale-flag .mascot-flag{animation:none!important}#zaruba-splash.locale-flag .mascot-flag-wave,#zaruba-splash.locale-flag .mascot-flag-ripple{animation:none!important}}

/* Separate grid row reserves footer space, including short landscape viewports. */
#zaruba-splash{grid-template-rows:minmax(min-content,1fr) auto;row-gap:16px;overflow-y:auto;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
#zaruba-splash img{max-height:calc(100dvh - 184px)}
#zaruba-splash .splash-footer{align-self:end;max-width:100%;color:#a2bacb;text-align:center;font:400 12px/1.5 system-ui,sans-serif}
#zaruba-splash .splash-footer a{color:inherit;text-decoration:none;border-radius:3px}
#zaruba-splash .splash-footer strong{font-weight:600;color:#bfd2df}
#zaruba-splash .splash-footer a:focus-visible{outline:2px solid #b7f6f8;outline-offset:4px}
@media(hover:hover) and (pointer:fine){#zaruba-splash .splash-footer a:hover,#zaruba-splash .splash-footer a:hover strong{color:#e6fbff;text-decoration:underline;text-underline-offset:3px}}
@media(max-height:500px) and (orientation:landscape){#zaruba-splash{row-gap:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}#zaruba-splash img{max-height:calc(100dvh - 142px)}}

/* Start CTA inherits its text color, independently of the selected game skin. */
#zaruba-splash button .splash-cta-icon .ui-icon{color:inherit;fill:currentColor}