/* Блок серверов в герое главной (группы «Классический Interlude» и т.п.).
   Та же разметка в лаунчере: designs/l2meta_v4 (Updater_L2Meta.net). */
.srv-groups { --srv-line: 120, 150, 230; --srv-text: #e8eeff; --srv-dim: 170, 188, 230;
    display: flex !important; flex-direction: column; gap: 1.2rem; width: 100%; }

@media (min-width: 769px) { .home-hero-launcher-portal:has(.srv-groups) { width: min(40rem, calc(100vw - 1.8rem)); max-width: 40rem; } }

.srv-group { position: relative; pointer-events: auto; padding: 1.4rem 1.2rem 1.2rem; border-radius: 1.4rem;
    background: linear-gradient(180deg, rgba(18, 27, 54, .82), rgba(9, 13, 28, .9));
    border: 1px solid rgba(var(--srv-line), .22);
    box-shadow: 0 1.4rem 3rem rgba(2, 5, 16, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(.6rem); backdrop-filter: blur(.6rem); }
.srv-group::before { content: ""; position: absolute; left: 1.6rem; right: 1.6rem; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(150, 180, 255, .55), transparent); }

.srv-group__head { display: flex; flex-direction: column; gap: .3rem; padding: 0 .4rem 1rem; }
.srv-group__title { display: flex; align-items: center; gap: .7rem; margin: 0;
    font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 1.55rem; letter-spacing: .06em; color: var(--srv-text); }
.srv-group__title::before { content: ""; flex: 0 0 .7rem; height: .7rem; transform: rotate(45deg);
    border: 1px solid rgba(150, 180, 255, .8); box-shadow: 0 0 .6rem rgba(120, 160, 255, .6); }
.srv-group__sub { margin: 0; padding-left: 1.4rem; font-family: 'Manrope', sans-serif; font-size: 1.1rem; font-weight: 500;
    letter-spacing: .04em; color: rgba(var(--srv-dim), .6); }

.srv-list { display: flex; flex-direction: column; gap: .7rem; }

.srv { --a: 110, 150, 240; position: relative; display: flex; align-items: center; gap: 1.2rem; min-height: 6rem;
    padding: .9rem 1rem .9rem .9rem; border-radius: 1rem; text-decoration: none; overflow: hidden;
    background: linear-gradient(100deg, rgba(var(--a), .1), rgba(20, 30, 62, .55) 38%, rgba(12, 18, 38, .7));
    border: 1px solid rgba(var(--srv-line), .16); transition: border-color .2s, transform .2s, background .2s; }
.srv::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(14rem 6rem at 0 50%, rgba(var(--a), .14), transparent 70%); }
.srv:hover { border-color: rgba(var(--a), .55); transform: translateX(.2rem); }
.srv:focus-visible { outline: 2px solid rgba(var(--a), .8); outline-offset: 2px; }

.srv__emblem { position: relative; z-index: 1; flex: 0 0 4.4rem; width: 4.4rem; height: 4.4rem; display: grid; place-items: center;
    border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(40, 56, 104, .95), rgba(10, 15, 33, .98) 72%);
    border: 1px solid rgba(var(--a), .45); box-shadow: 0 0 0 3px rgba(9, 13, 28, .9), 0 0 1.2rem rgba(var(--a), .28), inset 0 0 .8rem rgba(var(--a), .18); }
.srv__emblem svg, .srv__emblem img { width: 3rem; height: 3rem; display: block; }

.srv__body { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.srv__name { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 1.6rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--srv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv__name b { color: rgb(var(--a)); font-weight: 700; }
.srv__name em { margin-left: .4rem; padding: .1rem .5rem; border-radius: .4rem; vertical-align: .25em; font-style: normal;
    font-family: 'Manrope', sans-serif; font-size: .95rem; font-weight: 800; letter-spacing: .08em;
    color: #08131f; background: linear-gradient(180deg, #7ef0c4, #2fc48c); }
.srv__name em.is-old { color: #241804; background: linear-gradient(180deg, #f3d58c, #c6973a); }
.srv__meta { font-family: 'Manrope', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #e2c27a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv__meta[data-tone="dim"] { color: rgba(var(--srv-dim), .7); }
.srv__timer { font-family: 'Manrope', sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; color: rgba(var(--srv-dim), .75);
    white-space: nowrap; font-variant-numeric: tabular-nums; }
.srv__timer b { color: #9fc2ff; font-weight: 800; }

.srv__state { position: relative; z-index: 1; flex: 0 0 auto; min-width: 5.6rem; padding: .7rem 1.1rem; border-radius: .6rem; text-align: center;
    font-family: 'Manrope', sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.srv__state--on { color: #e9ffef; background: linear-gradient(180deg, #2f8a52, #1d5e37); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 .9rem rgba(62, 207, 142, .25); }
.srv__state--soon { color: #eef3ff; background: linear-gradient(180deg, #6a8fe8, #3a58b0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 1rem rgba(106, 143, 232, .4); }
.srv__state--obt { color: #04222c; background: linear-gradient(180deg, #8ff0ff, #2fb6d6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 1rem rgba(70, 200, 230, .4); }
.srv__state--bonus { color: #1f1604; background: linear-gradient(180deg, #ffe9a6, #e0aa3c); box-shadow: 0 0 1.1rem rgba(241, 213, 138, .55);
    animation: srvBonus 1.8s ease-in-out infinite; }
@keyframes srvBonus { 50% { box-shadow: 0 0 .25rem rgba(241, 213, 138, .2); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .srv__state--bonus { animation: none; } .srv:hover { transform: none; } }

@media (max-width: 768px) {
    .srv-group { padding: 1.1rem .9rem .9rem; }
    .srv { gap: .9rem; }
    .srv__emblem { flex-basis: 3.8rem; width: 3.8rem; height: 3.8rem; }
    .srv__emblem svg, .srv__emblem img { width: 2.6rem; height: 2.6rem; }
    .srv__name { font-size: 1.45rem; }
}