#servers-section .hc-server-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#servers-section .hc-server{position:relative;isolation:isolate;min-width:0;height:156px;border:1px solid #392b33;border-radius:12px;background:#171119;overflow:hidden;cursor:pointer}
#servers-section .hc-server[hidden]{display:none}
#servers-section .hc-server:hover{transform:none;box-shadow:none}
#servers-section .hc-server-art{position:absolute;inset:0;overflow:hidden}
#servers-section .hc-server-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:brightness(.74) saturate(.82);transform:scale(1);transform-origin:50% 42%;transition:transform .55s cubic-bezier(.2,.65,.3,1),filter .45s ease}
#servers-section .hc-server:hover .hc-server-art img{transform:scale(1.055);filter:brightness(.62) saturate(.82)}
#servers-section .hc-server-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#171119 0%,rgba(23,17,25,.86) 24%,rgba(23,17,25,.2) 64%,rgba(12,8,6,.08) 100%);pointer-events:none}
#servers-section .hc-server-mode,#servers-section .hc-server-map{position:absolute;z-index:1;top:10px;font-size:8px;line-height:1.5;font-weight:600}
#servers-section .hc-server-mode{left:12px;padding:3px 6px;background:rgba(15,10,13,.75);border:1px solid rgba(232,203,180,.15);border-radius:6px;color:#ebd4c1}
#servers-section .hc-server-map{right:12px;color:#e6d8cf;text-shadow:0 2px 5px #000;padding:3px 0}
#servers-section .hc-server-content{position:absolute;inset:auto 12px 12px;z-index:1}
#servers-section .hc-server-content h3{font-size:13px;font-weight:700;line-height:1.45;margin:0 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff2e6}
#servers-section .hc-server-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}
#servers-section .hc-online{display:inline-flex;align-items:center;justify-content:flex-start;gap:7px;color:#fff5ef;border:0;background:transparent;padding:0;width:auto;height:28px;min-height:0;white-space:nowrap;font-family:inherit;font-size:12px;line-height:1.2;flex-shrink:0;box-shadow:none}
#servers-section .hc-online:is(:hover,#servers-section :focus,#servers-section :active){background:transparent;border:0;box-shadow:none;outline:none;color:#ffd6b9}
#servers-section .hc-online-values{display:block;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums;min-width:62px;text-align:left}
#servers-section .hc-online-values span{color:#bba9b8;font-size:inherit;line-height:inherit;font-weight:500;transition:color .2s ease}
#servers-section .hc-online:hover .hc-online-values span{color:#ebc7af}
#servers-section .hc-live-dot{display:block;flex-shrink:0;width:5px;height:5px;border-radius:50%;background:#80bc88;box-shadow:0 0 6px #6db27d30}
#servers-section .hc-server-actions{display:flex;align-items:center;gap:5px}
#servers-section .hc-copy,#servers-section .hc-play{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;min-height:0;height:28px;font-family:inherit;cursor:pointer}
#servers-section .hc-copy{width:24px;padding:0;background:transparent;border:0;color:#a18b95}
#servers-section .hc-copy:is(:hover,#servers-section :focus){background:transparent;border:0;box-shadow:none;color:#ffc393}
#servers-section .hc-copy.hc-copied{color:#ffc393}
#servers-section .hc-copy svg{width:14px;height:14px;fill:none}
#servers-section .hc-play{gap:4px;padding:0 8px;border:1px solid #98603e;background:#4a2b20;color:#ffdbbd;font-size:9px;font-weight:700;transition:background .2s ease,color .2s ease}
#servers-section .hc-play svg{width:12px;height:12px;fill:currentColor;stroke-width:1}
#servers-section .hc-play:hover{background:#cf692e;border-color:#cf692e;color:#fff5ef}
#servers-section .hc-load{height:2px;width:100%;margin-top:8px;background:#352730;border-radius:3px;overflow:hidden}
#servers-section .hc-load span{display:block;width:var(--load);height:100%;background:linear-gradient(90deg,#bc6b40,#e0a778);border-radius:3px}

#servers-section{container-type:inline-size}
#servers-section .hc-server-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}
#servers-section .hc-server{display:block;width:auto;min-height:0;height:156px;max-height:none;padding:0;transform:none;transition:none;box-shadow:none}
#servers-section .hc-server::after{content:none}
#servers-section .hc-server-content h3{font-family:inherit}
#servers-section .hc-online{position:static;inset:auto;width:auto;border-radius:0;min-width:0;transform:none;margin:0;opacity:1;box-shadow:none}
#servers-section .hc-online .servers__card-online-current{color:inherit;font-size:inherit;font-weight:700;line-height:inherit}
#servers-section .hc-online-values{font-variant-numeric:tabular-nums;font-size:12px;line-height:1.2}
#servers-section .hc-copy{position:static;opacity:1!important;padding:0;width:24px;height:28px;transform:none;min-width:0;box-shadow:none}
#servers-section .hc-play{position:static;width:auto;min-width:0;transform:none;box-shadow:none}
#servers-section .hc-load{margin-top:8px}
#servers-section .hc-server-art img{position:static;margin:0;opacity:1;border-radius:0}
#servers-section .hc-copy:focus-visible,#servers-section .hc-play:focus-visible,#servers-section .hc-online:focus-visible{outline:2px solid #edac79;outline-offset:3px}
@container(max-width:980px){#servers-section .hc-server-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container(max-width:760px){#servers-section .hc-server-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container(max-width:520px){#servers-section .hc-server-grid{grid-template-columns:1fr}}
@media(max-width:600px){#servers-section .hc-server{height:148px}}
@media(prefers-reduced-motion:reduce){#servers-section .hc-server-art img{transition:none}#servers-section .hc-server:hover .hc-server-art img{transform:none}}

/* The site-wide button outline must never flash when online hover ends. */
#servers-section .hc-online,#servers-section .hc-online:hover,#servers-section .hc-online:focus,#servers-section .hc-online:active,#servers-section .hc-online:focus-visible{border:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;transition:color .18s ease;animation:none}
#servers-section .hc-online::before,#servers-section .hc-online::after{content:none}
#servers-section .hc-online:focus-visible .hc-online-values{text-decoration:underline;text-decoration-color:#edac79;text-underline-offset:4px}