@font-face {
    font-family: "GROBOLD";
    src: url("../font/GROBOLD.ttf") format("truetype");
    font-display: swap;
}

.test-server-banner {
    --test-ink: #32190b;
    align-items: center;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(80, 32, 5, 0.12) 0,
            rgba(80, 32, 5, 0.12) 11px,
            transparent 11px,
            transparent 23px
        ),
        #ffc928;
    border-bottom: 4px solid #fff4b5;
    box-shadow: 0 3px 0 #8a3d0c, 0 6px 16px rgba(45, 18, 2, 0.28);
    color: var(--test-ink);
    display: flex;
    flex-wrap: wrap;
    font-family: "GROBOLD", "Trebuchet MS", sans-serif;
    font-size: clamp(0.84rem, 1.6vw, 1.08rem);
    gap: 0.45rem;
    justify-content: center;
    letter-spacing: 0.035em;
    line-height: 1.2;
    padding: 0.6rem 1rem 0.5rem;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    z-index: 10000;
}

.test-server-banner strong {
    background: var(--test-ink);
    border: 2px solid #fff4b5;
    border-radius: 999px;
    box-shadow: 0 2px 0 #8a3d0c;
    color: #fff8cf;
    padding: 0.08rem 0.58rem;
    text-shadow: none;
}

.test-server-banner__light {
    background: #e33521;
    border: 2px solid #fff4b5;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #8a3d0c, 0 0 11px rgba(227, 53, 33, 0.78);
    height: 0.7rem;
    width: 0.7rem;
}

.test-server-banner__divider {
    color: #9e400b;
}

@media (prefers-reduced-motion: no-preference) {
    .test-server-banner__light {
        animation: test-server-pulse 1.8s ease-in-out infinite;
    }
}

@keyframes test-server-pulse {
    50% {
        box-shadow: 0 0 0 2px #8a3d0c, 0 0 18px rgba(227, 53, 33, 1);
        transform: scale(1.1);
    }
}

@media screen and (max-width: 680px) {
    .test-server-banner {
        gap: 0.3rem;
        padding-inline: 0.55rem;
    }

    .test-server-banner__divider {
        display: none;
    }

    .test-server-banner span:not(.test-server-banner__light):not(.test-server-banner__divider) {
        width: 100%;
    }
}