/* GameHub server cards — CS2 HUD layout */
.gh-server-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .gh-server-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .gh-server-grid { grid-template-columns: repeat(3, 1fr); }
}

.gh-server-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.gh-server-card--list {
    grid-template-columns: 140px 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas: "media body side";
}
@media (min-width: 768px) {
    .gh-server-card--list {
        grid-template-columns: 200px 1fr 160px;
    }
}
.gh-server-card--list .gh-server-media { grid-area: media; }
.gh-server-card--list .gh-server-body { grid-area: body; }
.gh-server-card--list .gh-server-side { grid-area: side; border-top: none; border-left: 1px solid rgba(74, 158, 255, .12); }

.gh-server-media { aspect-ratio: 16/9; }
.gh-server-media img { width: 100%; height: 100%; object-fit: cover; }
.gh-status-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}
.gh-featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: var(--cs2-orange, #e8a020);
    color: #0a0e12;
    width: 28px;
    height: 28px;
    border-radius: 0;
    clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
}

.gh-server-body { padding: 16px; }
.gh-server-body h3 { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.gh-server-address, .gh-server-map {
    font-family: var(--gh-mono, monospace);
    font-size: 11px;
    color: var(--gh-text-muted);
    margin-top: 4px;
}
.gh-server-side { padding: 16px; }

.gh-detail-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; }
.gh-detail-img { border-radius: 0; border: 1px solid rgba(232, 160, 32, .2); }
.gh-side-card {
    border-radius: 0;
    border-left: 3px solid var(--cs2-orange, #e8a020);
}
.gh-empty-state i { color: var(--cs2-orange, #e8a020); }

.gh-footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding: 48px 0 24px; }
.gh-footer-bottom { border-top: 1px solid rgba(74, 158, 255, .12); padding: 16px 0; font-size: 13px; color: var(--gh-text-muted); }

.gh-map-preview-link { position: relative; display: block; height: 100%; }
.gh-map-preview-img { transition: transform .35s ease; }
.gh-map-preview-link:hover .gh-map-preview-img { transform: scale(1.04); }
.gh-map-preview-badge {
    position: absolute; left: 10px; bottom: 10px; z-index: 2;
    background: rgba(6, 8, 12, .82); color: #e8a020; font-size: 11px; font-weight: 700;
    padding: 5px 10px; border-radius: 6px; border: 1px solid rgba(232, 160, 32, .35);
}
.gh-server-tick { font-size: 12px; color: var(--gh-text-muted); margin-top: 4px; }
.gh-map-hero { position: relative; margin: 0 0 16px; border-radius: 12px; overflow: hidden; }
.gh-map-hero-cap {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px;
    padding: 12px 16px; background: linear-gradient(transparent, rgba(6,8,12,.92));
    font-size: 13px; font-weight: 600;
}
.gh-map-hero-cap span { display: inline-flex; align-items: center; gap: 6px; }
.gh-vac-badge, .gh-tag-pill {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 99px; background: rgba(34,197,94,.15); color: #4ade80;
}
.gh-tag-pill { background: rgba(74,158,255,.12); color: #93c5fd; margin: 0 6px 6px 0; }
.gh-server-tags { margin: 10px 0 14px; }
.gh-player-list { margin: 20px 0; padding: 16px; border-radius: 10px; background: rgba(74,158,255,.06); border: 1px solid rgba(74,158,255,.12); }
.gh-player-list h2 { margin: 0 0 12px; font-size: 1rem; }
.gh-player-list ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.gh-player-list li { font-size: 13px; color: var(--gh-text-muted); }
.gh-btn-steam {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 12px; margin-bottom: 10px; border-radius: 8px; text-decoration: none; font-weight: 700;
    background: linear-gradient(135deg, #1b2838, #2a475e); color: #fff; border: 1px solid #66c0f4;
    transition: filter .15s ease, border-color .15s ease;
}
.gh-btn-steam:hover {
    filter: brightness(1.08);
    border-color: #a4d7f5;
    color: #fff;
}
.gh-btn-steam--card {
    margin-bottom: 8px;
    padding: 10px 12px;
    font-size: 13px;
}
.gh-btn-discord { width: 100%; margin-top: 8px; justify-content: center; }
.gh-map-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gh-map-card { border-radius: 12px; overflow: hidden; border: 1px solid rgba(74,158,255,.15); background: var(--gh-card, #0d1117); transition: transform .2s, border-color .2s; }
.gh-map-card:hover { transform: translateY(-3px); border-color: rgba(232,160,32,.45); }
.gh-map-card a { color: inherit; text-decoration: none; display: block; }
.gh-map-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.gh-map-card-body { padding: 12px 14px; }
.gh-map-card-body h2 { margin: 0 0 4px; font-size: 1rem; }
.gh-map-card--compact span { display: block; padding: 8px 10px; font-size: 13px; font-weight: 600; text-align: center; }
.gh-map-grid--home { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .gh-map-grid--home { grid-template-columns: repeat(4, 1fr); } }
.cs2-ticker-card { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; }
.cs2-ticker-map { border-radius: 4px; object-fit: cover; grid-row: span 2; }

@media (max-width: 768px) {
    .gh-detail-layout { grid-template-columns: 1fr; }
    .gh-footer-inner { grid-template-columns: 1fr; }
    .gh-server-card--list {
        grid-template-columns: 1fr;
        grid-template-areas: "media" "body" "side";
    }
    .gh-server-card--list .gh-server-side { border-left: none; border-top: 1px solid rgba(74, 158, 255, .12); }
}