#home .hero-grid {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(330px, 380px) !important;

    align-items: center !important;
    gap: 36px !important;
}

#home .pa-realm-overview-card {
    width: 100% !important;
    max-width: 380px !important;

    min-height: 0 !important;
    height: auto !important;

    align-self: center !important;
    display: block !important;

    padding: 22px !important;
    overflow: hidden;

    border: 1px solid rgba(225, 180, 81, 0.28) !important;
    border-radius: 22px !important;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(233, 185, 79, 0.10),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(6, 24, 40, 0.85),
            rgba(3, 15, 27, 0.76)
        ) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#home .pa-realm-overview-card::before,
#home .pa-realm-overview-card::after {
    display: none !important;
    content: none !important;
}

.pa-realm-card-header {
    padding-bottom: 16px;
    margin-bottom: 14px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    border-bottom: 1px solid rgba(120, 171, 215, 0.15);
}

.pa-realm-kicker {
    display: block;
    margin-bottom: 6px;

    color: #e9bc5e;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.pa-realm-card-header h2 {
    margin: 0;

    color: #edf6ff;
    font-size: 21px;
    line-height: 1.15;
}

.pa-client-version {
    flex: 0 0 auto;
    padding: 7px 10px;

    border: 1px solid rgba(115, 176, 230, 0.23);
    border-radius: 999px;

    color: #9dccf8;
    background: rgba(11, 39, 63, 0.62);

    font-size: 10px;
    font-weight: 800;
}

.pa-realm-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pa-realm-stat {
    min-width: 0;
    padding: 14px;

    border: 1px solid rgba(111, 168, 219, 0.16);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(13, 42, 67, 0.64),
            rgba(6, 25, 43, 0.52)
        );
}

.pa-realm-stat span {
    display: block;
    margin-bottom: 8px;

    color: #8ebeea;
    font-size: 10px;
    font-weight: 750;
}

.pa-realm-stat strong {
    display: block;

    color: #f4c964;
    font-size: 24px;
    line-height: 1;
}

.pa-faction-section {
    margin-top: 14px;
    padding-top: 14px;

    border-top: 1px solid rgba(120, 171, 215, 0.14);
}

.pa-faction-section-title {
    margin-bottom: 10px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.pa-faction-section-title span {
    color: #cfe4f8;
    font-size: 11px;
    font-weight: 800;
}

.pa-faction-section-title small {
    color: #718ba3;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pa-faction-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pa-faction-card {
    min-width: 0;
    padding: 13px;

    border-radius: 12px;
}

.pa-faction-card span,
.pa-faction-card strong,
.pa-faction-card small {
    display: block;
}

.pa-faction-card span {
    margin-bottom: 5px;

    font-size: 11px;
    font-weight: 800;
}

.pa-faction-card strong {
    margin-bottom: 6px;

    font-size: 23px;
    line-height: 1;
}

.pa-faction-card small {
    font-size: 10px;
}

.pa-alliance-card {
    border: 1px solid rgba(79, 146, 255, 0.28);

    background:
        linear-gradient(
            145deg,
            rgba(20, 65, 130, 0.43),
            rgba(7, 29, 65, 0.48)
        );
}

.pa-alliance-card span,
.pa-alliance-card strong {
    color: #70afff;
}

.pa-alliance-card small {
    color: #cce2ff;
}

.pa-horde-card {
    border: 1px solid rgba(235, 77, 77, 0.29);

    background:
        linear-gradient(
            145deg,
            rgba(113, 25, 29, 0.43),
            rgba(55, 9, 14, 0.49)
        );
}

.pa-horde-card span,
.pa-horde-card strong {
    color: #ff7676;
}

.pa-horde-card small {
    color: #ffd0d0;
}

.pa-faction-balance-bar {
    width: 100%;
    height: 7px;
    margin-top: 11px;

    display: flex;
    overflow: hidden;

    border-radius: 999px;
    background: rgba(0, 0, 0, 0.30);
}

.pa-alliance-bar {
    height: 100%;
    background: linear-gradient(90deg, #306bc8, #6caeff);
}

.pa-horde-bar {
    height: 100%;
    background: linear-gradient(90deg, #d84b4b, #8e1d25);
}

.pa-realm-connection {
    margin-top: 14px;
    padding-top: 14px;

    border-top: 1px solid rgba(120, 171, 215, 0.14);
}

.pa-realm-connection > span {
    display: block;
    margin-bottom: 7px;

    color: #82b9eb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pa-realm-connection code {
    width: 100%;
    display: block;

    padding: 10px 11px;
    overflow-x: auto;

    border: 1px solid rgba(226, 177, 72, 0.14);
    border-radius: 9px;

    color: #f1c65e;
    background: rgba(0, 0, 0, 0.26);

    font-size: 11px;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 900px) {
    #home .hero-grid {
        grid-template-columns: 1fr !important;
    }

    #home .pa-realm-overview-card {
        max-width: 100% !important;
    }
}

@media (max-width: 430px) {
    .pa-realm-stat-grid,
    .pa-faction-grid {
        grid-template-columns: 1fr;
    }
}


/* PA SINGLE REALM STAT */
.pa-realm-stat-grid {
    grid-template-columns: 1fr !important;
}