@layer portal{.server-card{-webkit-user-select:none;user-select:none;aspect-ratio:16/10;background-position:50%;background-size:cover;border:1px solid #ff344f5c;border-radius:8px;min-width:calc(33.3333% - .666667rem);transition:transform .18s,border-color .18s,box-shadow .18s;position:relative;overflow:hidden;transform:translateZ(0);box-shadow:inset 0 0 0 1px #ffffff0a,0 18px 42px #0000006b}.server-card:hover{border-color:#58f0ff94;transform:translateY(-8px);box-shadow:inset 0 0 0 1px #ffffff0f,0 24px 58px #00000080,0 0 34px #ff344f47}.server-card__shade{pointer-events:none;background:linear-gradient(#0000 20%,#050912eb);transition:background .18s;position:absolute;inset:0}.server-card:hover .server-card__shade{background:#050912b8}.server-card__scan{pointer-events:none;opacity:.28;mix-blend-mode:screen;background:repeating-linear-gradient(0deg,#ffffff0d 0 1px,#0000 1px 5px),linear-gradient(120deg,#0000,#58f0ff1f,#0000);position:absolute;inset:0}.server-card__topline{z-index:2;justify-content:space-between;gap:.5rem;display:flex;position:absolute;top:.85rem;left:.85rem;right:.85rem}.server-card__topline span{color:var(--cyan);text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0309129e;border:1px solid #58f0ff3d;border-radius:8px;padding:.35rem .55rem;font-size:.72rem;font-weight:900}.server-card__meta,.server-card__actions{z-index:1;position:absolute;left:1rem;right:1rem}.server-card__meta{justify-content:space-between;align-items:end;gap:1rem;display:flex;bottom:1rem}.server-card__meta h3{margin:.15rem 0 0}.server-card__meta p{color:#d8e9ffc2;text-transform:uppercase;margin:.25rem 0 0;font-size:.78rem}.server-card__meta span{color:var(--cyan)}.server-card__meta strong{align-items:center;gap:.45rem;display:inline-flex}.server-card__actions{opacity:0;justify-content:center;gap:.7rem;transition:opacity .18s,transform .18s;display:flex;top:50%;transform:translateY(-35%)}@media (width<=620px){.server-card{transition:none}.server-card__meta{flex-direction:column;align-items:start}.server-card__actions{opacity:1;flex-direction:column;align-items:stretch;transform:translateY(-50%)}}.server-card{background-image:none}.server-card__meta{right:170px}.server-card__actions{opacity:1;display:flex;inset:auto 1rem 1rem auto;transform:none}.server-card:hover .server-card__actions{opacity:1;transform:none}.server-card__actions .primary-button{color:#dff5ff;box-shadow:none;background:#061b2de6;border-color:#4dbbef8f}.server-info-button{width:36px;min-width:36px;padding:0}@media (width<=620px){.server-card__meta{bottom:4.35rem;right:1rem}.server-card__actions{left:1rem;right:auto}}.server-card{min-width:calc(33.3333% - .666667rem);min-height:220px;box-shadow:none;background-color:#071525;border:1px solid #5cabdc47;border-radius:6px}.server-card__shade{background:linear-gradient(#02081014,#02081061 45%,#020810f5)}.server-card__scan{opacity:.08}.server-card__topline{color:#c9eaff;background:#04111ec2;border:0}.server-card__meta{align-items:end}.server-card__meta h3{font-size:1.05rem}.server-card__meta p{display:none}.server-card__actions{opacity:1;transform:none}.server-card__actions .primary-button,.server-card__actions .secondary-button{min-height:36px;padding:.45rem .7rem;font-size:.72rem}@media (width<=900px){.server-card{min-width:calc(50% - .5rem)}}@media (width<=620px){.server-card{min-width:86%;min-height:220px}}.server-card__image{object-fit:cover;width:100%;height:100%;transition:transform .35s;position:absolute;inset:0}.server-card:hover .server-card__image{transform:scale(1.025)}.server-card__meta{gap:.7rem;align-items:initial;display:grid;bottom:.85rem;left:1rem;right:1rem}.server-card__meta>div:first-child{min-width:0}.server-card__meta h3{max-width:100%}.server-card__footer{justify-content:space-between;align-items:center;gap:.75rem;width:100%;display:flex}.server-card__footer>strong{flex:none}.server-card__actions{opacity:1;pointer-events:auto;flex-direction:row;flex:0 auto;gap:.45rem;display:flex;position:static;transform:none}.server-card__actions .primary-button{color:#dff6ff;background:#071f33eb;border:1px solid #49aee899;min-height:36px;padding:.45rem .7rem;font-size:.7rem;box-shadow:inset 0 0 18px #2da9f614}.server-card__actions .server-info-button{width:36px;min-width:36px;min-height:36px;padding:0}@media (width<=620px){.server-card__meta{left:.85rem;right:.85rem}.server-card__footer{gap:.5rem}.server-card__actions .primary-button{padding-inline:.6rem}}.server-card__topline{display:none}.server-card__shade,.server-card:hover .server-card__shade{background:linear-gradient(#0208100a,#0208103d 48%,#020810e6);transition:none}.server-card__actions{align-items:center}.server-card__connection-status{width:9px;min-width:9px;height:9px;box-shadow:0 0 10px #65ffb6b8}.server-card__connection-status.server-status--offline{box-shadow:0 0 10px #ff344fb8}@media (width<=620px){.server-card__actions .primary-button{min-height:44px}.server-card__actions .server-info-button{width:44px;min-width:44px}.server-card{min-width:100%}}.server-card.server-card--compact{aspect-ratio:auto;width:100%;min-width:0;height:auto;min-height:160px}.server-card.server-card--compact:hover{transform:none}.server-card--compact .server-card__shade,.server-card--compact:hover .server-card__shade{background:linear-gradient(#020810a6,#02081073 45%,#020810e6)}.server-card--compact .server-card__meta{align-content:space-between;gap:12px;width:100%;height:100%;padding:16px;position:relative;inset:auto}.server-card--compact .server-card__meta h2{color:#90a6b9;margin:0 0 6px;font-size:11px;font-weight:500}.server-card--compact .server-card__meta h3{overflow-wrap:anywhere;font-size:15px}.server-card--compact .server-card__meta .server-card__playtime{text-transform:none;font-size:11px;display:block}.server-card--compact .server-card__footer{flex-wrap:wrap;gap:8px}.server-card--compact .server-card__footer>strong{font-size:11px}.server-card--compact .server-card__actions{flex-wrap:nowrap;flex:none;gap:5px}.server-card--compact .server-card__actions .primary-button{width:auto;min-height:30px;padding:5px 7px;font-size:10px}.server-card--compact .server-card__actions .server-info-button{width:30px;min-width:30px;min-height:30px}}
