#scp-tas-banner {
    position: fixed;
    z-index: 9990;
    left: clamp(24px, 4.5vw, 80px);
    top: var(--scp-tas-top, 65vh);
    width: clamp(384px, 30vw, 480px);
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #201329;
    box-shadow: 0 8px 28px rgb(33 18 48 / 16%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 550ms ease, visibility 0s linear 550ms;
}
#scp-tas-banner[hidden] { display: none !important; }
#scp-tas-banner.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 450ms ease, visibility 0s;
}
#scp-tas-banner .scp-tas-banner__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    object-fit: contain;
}
#scp-tas-banner .scp-tas-banner__close {
    position: absolute;
    top: -14px;
    right: -14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    box-shadow: none;
    cursor: pointer;
    line-height: 1;
}
#scp-tas-banner .scp-tas-banner__close::before {
    position: absolute;
    inset: 8px;
    content: "";
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 50%;
    background: #251833;
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
}
#scp-tas-banner .scp-tas-banner__close svg { position: relative; }
#scp-tas-banner .scp-tas-banner__close:hover::before { background: #60348a; }
#scp-tas-banner .scp-tas-banner__close:focus-visible {
    outline: 3px solid #f8d454;
    outline-offset: 1px;
}
@media (max-width: 1199px) and (min-width: 768px) {
    #scp-tas-banner { width: 384px; }
}
@media (max-width: 767px), (max-width: 991px) and (min-height: 501px) {
    #scp-tas-banner {
        left: 50%;
        width: min(480px, calc(100vw - 32px));
        transform: translateX(-50%);
    }
    #scp-tas-banner .scp-tas-banner__close { top: -10px; right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
    #scp-tas-banner, #scp-tas-banner.is-visible { transition-duration: 120ms, 0s; }
}
