.online-servers { gap: 0; }
button.online-server { position: relative; align-items: center; justify-content: center; min-height: 54px; padding: 3px 14px; background: transparent; color: var(--ink); border: 0; border-radius: 0; font-family: var(--body); }
button.online-server::before { content: ''; position: absolute; inset: 5px auto 5px 0; width: 1px; background: #56616b; }
button.online-server:first-child::before, button.online-server[hidden] + button.online-server:not([hidden])::before { display: none; }
button.online-server:hover { background: #2b343c; }
button.online-server:hover > span { color: var(--accent); }
button.online-server:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.server-info-dialog { position: fixed; inset: 0; width: min(900px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; margin: auto; overflow: auto; color: #f6f3ee; background: #171c20; border: 1px solid #56616b; box-shadow: 0 24px 80px #0009; }
.server-info-dialog::backdrop { background: #080c11c9; }
.server-info-close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; font: 400 30px/1 var(--body); color: #fff; background: #171c20e8; border: 1px solid #7b858c; }
.server-info-close:hover { color: var(--accent); border-color: var(--accent); }
.server-info-scene { position: relative; isolation: isolate; min-height: 520px; }
.server-info-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: opacity 1.2s ease; }
.server-info-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #11182066 0%, #111820d9 34%, #111820f5 76%); }
.server-info-body { padding: 100px 36px 24px; }
.server-info-status { font-size: 12px; color: #ffd2b8; margin: 0 0 8px; }
.server-info-heading h2 { font: 700 clamp(32px, 5vw, 54px)/1 var(--display); letter-spacing: -.02em; margin: 0 50px 12px 0; }
.server-info-name { margin: 0; font-size: 13px; color: #d6dee4; overflow-wrap: anywhere; }
.server-info-live { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 24px; padding: 24px 0 20px; margin-top: 12px; border-bottom: 1px solid #667581; }
.server-info-live > div { display: flex; flex-direction: column; gap: 6px; }
.server-info-live span, .server-info-facts dt { font-size: 12px; color: #c3cdd4; }
.server-info-live strong { font: 600 clamp(22px, 3vw, 30px)/1.1 var(--body); }
.server-info-live strong small { font-size: 18px; font-weight: 400; color: #c3cdd4; }
.server-info-live > div > small { font-size: 12px; color: #d6dee4; }
.server-info-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 24px; margin: 24px 0; }
.server-info-facts dt { margin-bottom: 6px; }
.server-info-facts dd { margin: 0; font-size: 15px; font-weight: 500; }
.server-info-schedule { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 12px; padding: 18px 0; border-top: 1px solid #667581; }
.server-info-schedule strong { color: #ffc6a3; font-weight: 500; }
.server-info-note { color: #c3cdd4; font-size: 11px; line-height: 1.6; margin: 0; }
.server-info-pending { min-height: 300px; display: grid; place-items: center; }
.server-info-spinner { width: 28px; height: 28px; border: 2px solid #59646d; border-top-color: var(--accent); border-radius: 50%; animation: statistics-spin .8s linear infinite; }
.server-info-error { padding: 80px 32px 36px; }
.server-info-error h2 { margin: 0 0 16px; font-size: 24px; }
.server-info-error button { margin-top: 20px; }
@media (max-width: 600px) { button.online-server { padding: 3px 9px; } .server-info-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); } .server-info-body { padding: 100px 20px 20px; } .server-info-live { gap: 12px; grid-template-columns: 1fr 1.3fr; } .server-info-live > div:last-child { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 12px; } .server-info-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .server-info-spinner { animation: none; } .server-info-photo { transition: none; } }