.toast {
    position: fixed;
    left: 50%;
    bottom: calc(16px + var(--safe-bottom-ui));
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .85);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    max-width: min(90vw, calc(100vw - 32px - var(--safe-left-ui) - var(--safe-right-ui)));
    z-index: 99999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.toast.success {
    background: #1b8f3e;
}

.toast.error {
    background: #c81e1e;
}

.toast.warning {
    background: #98a00e;
}

.toast,
.toast * {
    color: #fff !important;
}

#bac-splash.bac-splash {
    --bp-bg-start: #0d2d67;
    --bp-bg-end: #091a35;
    --bp-glow: #5fd6ff;
    --bp-logo-size: min(58vw, 520px);
    position: fixed;
    top: calc(-1 * var(--safe-top));
    right: calc(-1 * var(--safe-right));
    bottom: calc(-1 * var(--safe-bottom));
    left: calc(-1 * var(--safe-left));
    z-index: 99999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(95, 214, 255, .12), transparent 28%),
        linear-gradient(180deg, var(--bp-bg-start), var(--bp-bg-end));
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    opacity: 1;
    transition: opacity .45s ease;
}

#bac-splash,
#bac-splash * {
    box-sizing: border-box;
}

#bac-splash.is-hidden,
#bac-splash.hidden {
    opacity: 0;
    pointer-events: none;
}

#bac-splash .bp-logo-wrap {
    position: relative;
    width: var(--bp-logo-size);
    aspect-ratio: 1 / 1;
}

#bac-splash .bp-logo {
    width: 100%;
    height: 100%;
    display: block;
    background: url('../img/splash.png') center / contain no-repeat;
    opacity: 0;
    transform: scale(.92);
    filter: drop-shadow(0 0 0 rgba(95, 214, 255, 0));
    animation:
        bacPlaySplashIn .75s cubic-bezier(.22, .9, .2, 1) .10s forwards,
        bacPlaySplashPulse 1.2s ease-in-out .95s 1;
}

#bac-splash .bp-glow {
    position: absolute;
    inset: -8%;
    background: radial-gradient(circle, rgba(95, 214, 255, .22), rgba(95, 214, 255, 0) 66%);
    filter: blur(18px);
    opacity: 0;
    animation: bacPlaySplashGlowIn .65s ease .45s forwards;
}

#bac-splash .bp-tagline {
    position: absolute;
    right: max(16px, var(--safe-right));
    bottom: max(14vh, calc(24px + var(--safe-bottom)));
    left: max(16px, var(--safe-left));
    margin: 0;
    color: rgba(255, 255, 255, .72);
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: .16em;
    opacity: 0;
    animation: bacPlaySplashSubtitleIn .5s ease .55s forwards;
}

#bac-splash.is-finishing .bp-logo-wrap,
#bac-splash.is-finishing .bp-tagline,
#bac-splash.ending .bp-logo-wrap,
#bac-splash.ending .bp-tagline {
    animation: bacPlaySplashOut .42s ease forwards;
}

@keyframes bacPlaySplashIn {
    from { opacity: 0; transform: scale(.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bacPlaySplashPulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(95, 214, 255, 0)); }
    50% { filter: drop-shadow(0 0 16px rgba(95, 214, 255, .18)); }
}

@keyframes bacPlaySplashGlowIn {
    from { opacity: 0; transform: scale(.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bacPlaySplashSubtitleIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bacPlaySplashOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    #bac-splash .bp-logo,
    #bac-splash .bp-glow,
    #bac-splash .bp-tagline {
        animation-duration: .01ms;
        animation-delay: 0s;
    }
}