/* ── Secondhander – launch splash ──────────────────────────────────────────
   Phones: the animated splash fills the screen.
   Tablets / wide screens: the splash is centred on the brand colour and its
   corner artwork fades out, so the artwork never shows a hard cut-off.
────────────────────────────────────────────────────────────────────────── */
#appSplash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #931e1e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}
#appSplash.splash-done { opacity: 0; visibility: hidden; pointer-events: none; }
html.no-splash #appSplash { display: none; }

#appSplash img {
    display: block;
    height: 100vh;
    height: 100dvh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

@media (min-width: 600px) {
    #appSplash img {
        height: min(100vh, 1100px);
        height: min(100dvh, 1100px);
        /* Soft radial fade: logo, tagline and dots stay; the corner artwork
           (which is cut off by the phone-sized edges) dissolves into the brand colour. */
        -webkit-mask-image: radial-gradient(ellipse at center, #000 52%, transparent 80%);
        mask-image: radial-gradient(ellipse at center, #000 52%, transparent 80%);
    }
}