/* Decorative artwork and the live server card share the homepage palette. */
.home-page .feature-card__art {
    width: 43%;
    object-fit: contain;
    object-position: right center;
    pointer-events: none;
}

.home-page .feature-card::before {
    background: linear-gradient(90deg, rgba(7, 10, 20, .98), rgba(7, 10, 20, .96) 43%, rgba(7, 10, 20, .32) 68%, transparent 84%);
}

.home-page .rules-panel__art {
    right: 0;
    width: 48%;
    height: 95%;
    object-fit: contain;
    object-position: right bottom;
    pointer-events: none;
}

.home-page .rules-panel__shade {
    pointer-events: none;
}

/* Match the feature cards' lift and glow on the three lower panels. */
.home-page .lower-grid > .content-panel {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .home-page .lower-grid > .content-panel:hover,
    .home-page .lower-grid > .content-panel:focus-within {
        border-color: rgba(156, 76, 255, .38);
        box-shadow: 0 18px 42px rgba(0, 0, 0, .28), 0 0 25px rgba(123, 47, 224, .08);
        transform: translateY(-3px);
    }
}

.server-panel .server-state.is-offline {
    color: #c0c5d4;
    background: rgba(15, 17, 27, .9);
    border-color: rgba(142, 151, 177, .3);
}

.server-panel .server-state.is-offline i {
    background: #8e97b1;
    box-shadow: none;
}

.server-panel .server-stats strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.server-address {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px 12px 0;
    padding: 9px 11px;
    border: 1px solid rgba(153, 72, 255, .28);
    border-radius: 7px;
    background: rgba(87, 42, 159, .12);
}

.server-address > div {
    min-width: 0;
    flex: 1;
}

.server-address strong {
    display: block;
    font-size: 10px;
}

.server-address__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.server-address__value {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    color: #c1b3df;
    background: transparent;
    font: inherit;
    font-size: 12px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    cursor: text;
}

.server-address__value:focus-visible {
    outline: 2px solid #b37aff;
    outline-offset: 3px;
}

.server-address small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.server-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 12px 0;
}

.server-actions .server-join {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 11px;
}

.server-copy {
    min-height: 36px;
    margin-left: auto;
    padding: 7px 10px;
    border: 1px solid rgba(153, 72, 255, .4);
    border-radius: 6px;
    color: #c7afff;
    background: transparent;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.server-copy:hover:not(:disabled) {
    color: #fff;
    background: rgba(142, 60, 255, .12);
}

.server-copy:disabled {
    opacity: .5;
    cursor: default;
}

.server-copy:focus-visible,
.server-actions .server-join:focus-visible {
    outline: 2px solid #b37aff;
    outline-offset: 3px;
}

.server-feedback {
    min-height: 14px;
    margin: 5px 12px 9px;
    color: #aeb8d0;
    font-size: 9px;
    line-height: 1.5;
}

.server-panel [hidden] {
    display: none !important;
}

@media (max-width: 380px) {
    .server-actions .server-join,
    .server-copy {
        flex: 1 1 auto;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .feature-card--interactive,
    .home-page .lower-grid > .content-panel {
        transition: none;
    }

    .home-page .feature-card--interactive:hover,
    .home-page .feature-card--interactive:focus-visible,
    .home-page .lower-grid > .content-panel:hover,
    .home-page .lower-grid > .content-panel:focus-within {
        transform: none;
    }
}