.realm {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 40px;
    padding: 24px 28px;
    gap: 24px;

    border: 1px solid rgba(216, 180, 92, 0.4);

    background:
        linear-gradient(
            90deg,
            rgba(44, 33, 31, 0.94),
            rgba(61, 45, 38, 0.92),
            rgba(44, 33, 31, 0.94)
        );

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.38);
}

.realm > div {
    min-width: 0;
}

.realm small {
    display: block;
    margin-bottom: 5px;

    color: #b9ad9e;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.realm strong {
    display: block;

    color: #ffe19a;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    font-weight: 700;
}

.realm-status-line {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
}

.server-status {
    display: inline-block;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;

    border-radius: 50%;
}

.server-status.online {
    border: 1px solid #b8ff9f;

    background: #54ef57;

    box-shadow:
        0 0 5px #54ef57,
        0 0 11px rgba(84, 239, 87, 0.95),
        0 0 20px rgba(84, 239, 87, 0.65);

    animation: realmStatusPulse 2s ease-in-out infinite;
}

.server-status.offline {
    border: 1px solid #8c8c8c;

    background: #656565;

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.18),
        0 1px 3px rgba(0, 0, 0, 0.65);
}

.faction-counts {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
}

.alliance-count {
    color: #78aaff;
}

.horde-count {
    color: #f07268;
}

.faction-separator {
    color: #8c837a;
}

@keyframes realmStatusPulse {
    0%,
    100% {
        transform: scale(0.94);

        box-shadow:
            0 0 4px #54ef57,
            0 0 9px rgba(84, 239, 87, 0.8),
            0 0 16px rgba(84, 239, 87, 0.45);
    }

    50% {
        transform: scale(1.12);

        box-shadow:
            0 0 7px #54ef57,
            0 0 16px rgba(84, 239, 87, 1),
            0 0 28px rgba(84, 239, 87, 0.75);
    }
}

@media (max-width: 1000px) {
    .realm {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .realm {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}