/* =========================================================================
   Spiele-Seite (/<spiel>, pages/game-services.php): Kopf, Hintergrund und
   Karten im Look der Smurf- und Ranked-Shops (smurf-shop.css,
   ranked-shop.css): Seitenfarbe #0e0c1c, Boxen mit hellem Hauch statt
   eigener Farbe, feiner Rand, Akzent #5f62ee.

   Die View traegt rund 1.900 Zeilen gestapelter Inline-Schichten, viele mit
   !important. Alle Regeln hier haengen an #gsPage (dem .gs-Container) und
   setzen sich damit gegen jede dieser Schichten durch.
   ========================================================================= */

html body.game-hub{ background:#0e0c1c !important; }

/* Karten, Kacheln und Buttons sind deckend: die Key-Art scheint nur auf der
   freien Seitenflaeche durch, nie durch eine Box. Die Farben entsprechen dem
   hellen Hauch der Shop-Boxen auf #0e0c1c, nur ohne Transparenz. */
html body.game-hub #gsPage{
    --gh-card:linear-gradient(180deg, #171527, #13111f);
    --gh-solid:#181626;
    --gh-solid-hover:#1e1c31;
}

/* Key-Art des Spiels minimal sichtbar hinter der ganzen Seite: die View gibt
   lb_game_backdrop() an das Layout (.lb-page-backdrop, fest hinter allem,
   Grundregeln in main.css). Staerke und Abdunklung wie in smurf-shop.css
   und wie der Hover-Hintergrund der /services-Hubs: Bild bei 18 %, zu den
   Raendern und nach unten in Seitenfarbe abgedunkelt. Spiele ohne breite
   Key-Art (.is-cover) behalten die starke Unschaerfe aus main.css. */
body.game-hub.has-page-backdrop .lb-page-backdrop{
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 120px);
            mask-image:linear-gradient(180deg, transparent 0, #000 120px);
}
body.game-hub.has-page-backdrop .lb-page-backdrop img{ opacity:.18; }
body.game-hub.has-page-backdrop .lb-page-backdrop:not(.is-cover) img{
    filter:blur(2px) saturate(1.05);
    transform:scale(1.03);
}
body.game-hub.has-page-backdrop .lb-page-backdrop::after{
    content:""; position:absolute; inset:0;
    background:
        radial-gradient(130% 95% at 50% 18%, rgba(14,12,28,.2), rgba(14,12,28,.78) 72%),
        linear-gradient(180deg, rgba(14,12,28,.15) 0%, rgba(14,12,28,.55) 60%, #0e0c1c 100%);
}

/* Gleiche Breite wie die Shops */
@media (min-width:761px){
    html body.game-hub #gsPage.gs{ width:min(92%, 1560px) !important; max-width:none !important; }
}

/* ── Kopf ─────────────────────────────────────────────────────────────── */
html body.game-hub #gsPage .gs-intro{
    display:flex; align-items:flex-start; gap:20px;
    margin:4px 0 44px; padding:0 0 30px;
    border-bottom:1px solid rgba(255,255,255,.07);
}
html body.game-hub #gsPage .gs-intro__icon{
    display:flex; align-items:center; justify-content:center;
    flex:0 0 64px; width:64px; height:64px;
    border:1px solid rgba(255,255,255,.1); border-radius:18px;
    background:linear-gradient(180deg, #211f33, #161424);
    box-shadow:0 14px 34px rgba(0,0,0,.3);
}
html body.game-hub #gsPage .gs-intro__icon img{ width:40px; height:40px; border-radius:10px; object-fit:contain; }
html body.game-hub #gsPage .gs-intro__main{ min-width:0; }
html body.game-hub #gsPage .gs-page-h1{
    margin:0; padding:0; border:0;
    color:#fff;
    font-size:clamp(28px, 3vw, 42px); font-weight:900; line-height:1.08; letter-spacing:-.03em;
    text-wrap:balance;
}
html body.game-hub #gsPage .gs-intro__lead{
    max-width:680px; margin:12px 0 0;
    color:rgba(255,255,255,.66); font-size:15.5px; line-height:1.6;
}
html body.game-hub #gsPage .gs-intro__proof{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
    margin-top:18px;
}
html body.game-hub #gsPage .gs-intro__rating,
html body.game-hub #gsPage .gs-intro__rating:hover,
html body.game-hub #gsPage .gs-intro__rating:focus{ text-decoration:none; }
html body.game-hub #gsPage .gs-intro__rating{
    display:inline-flex; align-items:center; gap:9px;
    height:36px; padding:0 14px 0 12px;
    border:1px solid rgba(255,255,255,.09); border-radius:999px;
    background:var(--gh-solid);
    color:rgba(255,255,255,.62); font-size:13px; font-weight:600;
    transition:border-color .15s ease, background .15s ease;
}
html body.game-hub #gsPage .gs-intro__rating:hover{ border-color:rgba(251,191,36,.35); background:var(--gh-solid-hover); }
html body.game-hub #gsPage .gs-intro__stars{ display:inline-flex; gap:2px; color:#fbbf24; font-size:11.5px; }
html body.game-hub #gsPage .gs-intro__rating b{ color:#fff; font-size:14px; font-weight:900; }
html body.game-hub #gsPage .gs-intro__trust{
    display:flex; flex-wrap:wrap; gap:8px 18px;
    margin:0; padding:0; list-style:none;
}
html body.game-hub #gsPage .gs-intro__trust li{
    display:inline-flex; align-items:center; gap:8px;
    color:rgba(255,255,255,.8); font-size:13px; font-weight:700;
}
html body.game-hub #gsPage .gs-intro__trust i{ color:#a5b4fc; font-size:12.5px; }

@media (max-width:760px){
    html body.game-hub #gsPage .gs-intro{ gap:14px; margin:0 0 30px; padding-bottom:22px; }
    html body.game-hub #gsPage .gs-intro__icon{ flex-basis:48px; width:48px; height:48px; border-radius:14px; }
    html body.game-hub #gsPage .gs-intro__icon img{ width:30px; height:30px; border-radius:8px; }
    html body.game-hub #gsPage .gs-page-h1{ font-size:24px; }
    html body.game-hub #gsPage .gs-intro__lead{ margin-top:8px; font-size:14px; line-height:1.55; }
    html body.game-hub #gsPage .gs-intro__proof{ gap:12px; margin-top:14px; }
    html body.game-hub #gsPage .gs-intro__trust{ gap:8px 14px; }
    html body.game-hub #gsPage .gs-intro__trust li{ font-size:12.5px; }
}

/* ── Abschnittskoepfe und Slider-Steuerung ────────────────────────────── */
html body.game-hub #gsPage .gs-sec-lead{ color:rgba(255,255,255,.55) !important; }
html body.game-hub #gsPage .gs-showall{
    border:1px solid rgba(255,255,255,.08) !important; border-radius:12px !important;
    background:var(--gh-solid) !important;
    color:rgba(255,255,255,.82) !important; font-weight:800 !important;
    transition:background .15s ease, border-color .15s ease, color .15s ease !important;
}
html body.game-hub #gsPage .gs-showall:hover{
    border-color:rgba(95,98,238,.5) !important;
    background:#24224a !important;
    color:#fff !important;
}
html body.game-hub #gsPage .gs-arr{
    border:1px solid rgba(255,255,255,.08) !important; border-radius:12px !important;
    background:var(--gh-solid) !important;
    color:#fff !important;
    transition:background .15s ease, border-color .15s ease !important;
}
html body.game-hub #gsPage .gs-arr:hover{ border-color:#5f62ee !important; background:#5f62ee !important; }
@media (min-width:761px){
    html body.game-hub #gsPage .gs-showall{
        display:inline-flex; align-items:center;
        height:40px; padding:0 16px !important; font-size:13px !important;
    }
    html body.game-hub #gsPage .gs-arr{ width:40px !important; height:40px !important; }
}

/* ── Boosting-Karten ──────────────────────────────────────────────────── */
html body.game-hub #gsPage .gs-boost,
html body.game-hub #gsPage .gs-boost--featured,
html body.game-hub #gsPage .gs-boost:nth-child(n){
    border:1px solid rgba(255,255,255,.07) !important; border-radius:18px !important;
    background:
        radial-gradient(110% 60% at 0% 0%, rgba(95,98,238,.13), transparent 62%),
        var(--gh-card) !important;
    box-shadow:none !important;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
/* "Am beliebtesten": kraeftigerer Schein und Rand im Akzent */
html body.game-hub #gsPage .gs-boost--featured{
    border-color:rgba(95,98,238,.55) !important;
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(95,98,238,.28), transparent 62%),
        var(--gh-card) !important;
    box-shadow:0 18px 44px rgba(95,98,238,.12) !important;
}
html body.game-hub #gsPage .gs-boost:hover{
    border-color:rgba(95,98,238,.5) !important;
    transform:translateY(-3px) !important;
    box-shadow:0 18px 44px rgba(0,0,0,.32) !important;
}
html body.game-hub #gsPage .gs-boost__ico{
    border:1px solid rgba(95,98,238,.32) !important; border-radius:15px !important;
    background:rgba(95,98,238,.16) !important;
    transition:background .18s ease, border-color .18s ease !important;
}
html body.game-hub #gsPage .gs-boost:hover .gs-boost__ico{ border-color:#5f62ee !important; background:#5f62ee !important; }
html body.game-hub #gsPage .gs-boost__name{ font-size:16.5px !important; font-weight:800 !important; }
html body.game-hub #gsPage .gs-boost__desc{ color:rgba(255,255,255,.55) !important; }
html body.game-hub #gsPage .gs-boost__foot{
    margin-top:auto !important; padding-top:14px !important;
    border-top:1px solid rgba(255,255,255,.06);
}
html body.game-hub #gsPage .gs-boost__cta{
    padding:0 !important; border:0 !important; background:none !important;
    color:#a5b4fc !important; font-size:13px !important; font-weight:800 !important;
}
html body.game-hub #gsPage .gs-boost:hover .gs-boost__cta{ color:#fff !important; }
html body.game-hub #gsPage .gs-boost__cta i{ transition:transform .18s ease; }
html body.game-hub #gsPage .gs-boost:hover .gs-boost__cta i{ transform:translateX(3px); }

/* ── Account- und Item-Karten wie in den Shops ────────────────────────── */
html body.game-hub #gsPage .gs-acc .account-card,
html body.game-hub #gsPage .gs-items .item-shop-card{
    border:1px solid rgba(255,255,255,.07) !important; border-radius:18px !important;
    background:
        radial-gradient(110% 60% at 0% 0%, rgba(95,98,238,.12), transparent 62%),
        var(--gh-card) !important;
    box-shadow:none !important;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
html body.game-hub #gsPage .gs-acc .account-card:hover,
html body.game-hub #gsPage .gs-items .item-shop-card:hover{
    border-color:rgba(95,98,238,.45) !important;
    transform:translateY(-2px) !important;
    box-shadow:0 18px 44px rgba(0,0,0,.32) !important;
}
html body.game-hub #gsPage .gs-acc .account-card .excerpt{ color:rgba(255,255,255,.58) !important; }
html body.game-hub #gsPage .gs-acc .account-card .image-box{
    border:1px solid rgba(255,255,255,.06) !important; border-radius:12px !important;
    background:rgba(0,0,0,.22) !important;
}
html body.game-hub #gsPage .gs-acc .account-card .highlights .badge,
html body.game-hub #gsPage .gs-items .item-shop-badge{
    border:1px solid rgba(255,255,255,.07) !important; border-radius:8px !important;
    background:rgba(255,255,255,.045) !important;
    color:rgba(255,255,255,.78) !important;
}
html body.game-hub #gsPage .gs-acc .account-card .highlights .badge i,
html body.game-hub #gsPage .gs-items .item-shop-badge i{ color:#a5b4fc !important; }
html body.game-hub #gsPage .gs-acc .account-card .totals{ border-top:1px solid rgba(255,255,255,.06) !important; }
html body.game-hub #gsPage .gs-acc .account-card .totals .price-eur{ color:#fff !important; }
html body.game-hub #gsPage .gs-acc .account-card .totals .btn,
html body.game-hub #gsPage .gs-acc .account-card .totals .btn.primary,
html body.game-hub #gsPage .gs-items .item-shop-btn{
    border:0 !important; border-radius:12px !important;
    background:#5f62ee !important; background-image:none !important;
    color:#fff !important;
    box-shadow:0 10px 24px rgba(95,98,238,.3) !important;
    transition:background .15s ease !important;
}
html body.game-hub #gsPage .gs-acc .account-card:hover .totals .btn.primary,
html body.game-hub #gsPage .gs-items .item-shop-card:hover .item-shop-btn{ background:#6a6df0 !important; }
html body.game-hub #gsPage .gs-acc .account-card > .seller-info,
html body.game-hub #gsPage .gs-acc .account-card > .lb-seller-footer,
html body.game-hub #gsPage .gs-items .item-shop-card > .lb-seller-footer{
    border-top:1px solid rgba(255,255,255,.06) !important;
    border-radius:0 0 17px 17px !important;
    background:rgba(0,0,0,.14) !important;
}

/* ── Booster-Karten ───────────────────────────────────────────────────── */
html body.game-hub #gsPage .gs-boosters .booster-card{
    border:1px solid rgba(255,255,255,.07) !important;
    background:var(--gh-card) !important;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
html body.game-hub #gsPage .gs-boosters .booster-card:hover{
    border-color:rgba(95,98,238,.45) !important;
    box-shadow:0 18px 44px rgba(0,0,0,.32) !important;
}

/* ── Bewertungen ──────────────────────────────────────────────────────── */
html body.game-hub #gsPage .lbRev4Card,
html body.game-hub #gsPage .lbRev4Sum{
    border-color:rgba(255,255,255,.07) !important;
    background:var(--gh-card) !important;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
/* Die Fragen liegen in einer deckenden Box statt frei auf der Seite */
html body.game-hub #gsPage .gs-faq__panel{
    border:1px solid rgba(255,255,255,.07) !important; border-radius:18px !important;
    background:var(--gh-card) !important;
    overflow:hidden;
}
html body.game-hub #gsPage .gs-faq__item:last-child{ border-bottom:0 !important; }
html body.game-hub #gsPage .gs-faq__eyebrow{ color:#a5b4fc !important; }
html body.game-hub #gsPage .gs-faq__eyebrow::before{ background:#5f62ee !important; }
html body.game-hub #gsPage .gs-faq__item[open]{ background:linear-gradient(90deg, rgba(95,98,238,.1), transparent 55%) !important; }
html body.game-hub #gsPage .gs-faq__item[open] summary i{
    border:1px solid rgba(95,98,238,.32) !important;
    background:rgba(95,98,238,.16) !important;
}
html body.game-hub #gsPage .gs-faq__aside-link{
    border:1px solid rgba(95,98,238,.4) !important;
    background:#24224a !important;
}
html body.game-hub #gsPage .gs-faq__aside-link:hover{ border-color:#5f62ee !important; background:#5f62ee !important; color:#fff !important; }

/* ── Ratgeber ─────────────────────────────────────────────────────────── */
html body.game-hub #gsPage .gs-blog-card{
    border:1px solid rgba(255,255,255,.07) !important; border-radius:18px !important;
    background:var(--gh-card) !important;
    box-shadow:none !important;
}
html body.game-hub #gsPage .gs-blog-card:hover{
    border-color:rgba(95,98,238,.45) !important;
    box-shadow:0 18px 44px rgba(0,0,0,.32) !important;
}
html body.game-hub #gsPage .gs-blog-img{ background:rgba(0,0,0,.22) !important; }

@media (max-width:760px){
    html body.game-hub #gsPage .gs-boost:hover,
    html body.game-hub #gsPage .gs-acc .account-card:hover,
    html body.game-hub #gsPage .gs-items .item-shop-card:hover{ transform:none !important; }
}
@media (prefers-reduced-motion:reduce){
    html body.game-hub #gsPage .gs-boost,
    html body.game-hub #gsPage .gs-acc .account-card,
    html body.game-hub #gsPage .gs-items .item-shop-card,
    html body.game-hub #gsPage .gs-boost__cta i{ transition:none !important; }
}