:root {
    --xp-nav-height: 76px;
    --xp-nav-bg: rgba(5, 10, 20, .94);
    --xp-nav-line: rgba(93, 196, 255, .14);
    --xp-nav-text: #aab9ce;
    --xp-nav-white: #f4f8ff;
    --xp-nav-cyan: #28c7f5;
}
body { scroll-padding-top: calc(var(--xp-nav-height) + 14px); }
header.xp-site-header {
    display: block !important;
    position: sticky !important;
    inset-block-start: 0 !important;
    z-index: 1200 !important;
    width: 100% !important;
    min-height: var(--xp-nav-height);
    margin: 0 !important;
    padding: 0 !important;
    color: var(--xp-nav-white) !important;
    background: var(--xp-nav-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--xp-nav-line) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.xp-site-nav {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    width: min(100%, 1380px);
    min-height: var(--xp-nav-height);
    margin: 0 auto !important;
    padding: 0 clamp(18px, 4vw, 56px) !important;
}
.xp-nav-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--xp-nav-white) !important;
    text-decoration: none !important;
}
.xp-nav-brand img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(40, 199, 245, .25));
}
.xp-nav-brand-name {
    display: flex;
    flex-direction: column;
    line-height: 1;
    font-family: 'Orbitron', 'Inter', sans-serif;
    letter-spacing: .07em;
}
.xp-nav-brand-name b { font-size: 1.03rem; font-weight: 900; }
.xp-nav-brand-name small {
    margin-top: 5px;
    color: #8aa2b8;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .31em;
}
.xp-nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    gap: clamp(4px, 1.15vw, 18px) !important;
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.xp-nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--xp-nav-text) !important;
    background: transparent !important;
    font-family: 'Inter', 'Rajdhani', sans-serif;
    font-size: .91rem !important;
    font-weight: 650 !important;
    letter-spacing: .01em !important;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.xp-nav-link:hover, .xp-nav-link[aria-current="page"] {
    color: var(--xp-nav-white) !important;
    background: rgba(255, 255, 255, .065) !important;
}
.xp-nav-link:hover { transform: translateY(-1px); }
.xp-nav-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--xp-nav-cyan); }
.xp-nav-community { color: #b9c4ff !important; }
.xp-nav-community:hover { background: rgba(88, 101, 242, .13) !important; }
.xp-nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto;
}
.xp-nav-login {
    color: var(--xp-nav-text) !important;
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}
.xp-nav-login:hover { color: #fff !important; }
.xp-nav-join {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 19px !important;
    border: 1px solid rgba(40, 199, 245, .4) !important;
    border-radius: 12px !important;
    color: #03131b !important;
    background: linear-gradient(135deg, #51ddfb, #19b9ee) !important;
    box-shadow: 0 8px 24px rgba(25, 185, 238, .22);
    font-family: 'Orbitron', 'Inter', sans-serif;
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .06em;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.xp-nav-join:hover {
    color: #03131b !important;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(25, 185, 238, .32);
}
.xp-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    color: #eaf6ff;
    background: rgba(255,255,255,.05);
    cursor: pointer;
}
.xp-nav-toggle-bars, .xp-nav-toggle-bars::before, .xp-nav-toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 4px;
    background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
}
.xp-nav-toggle-bars { position: relative; }
.xp-nav-toggle-bars::before, .xp-nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.xp-nav-toggle-bars::before { transform: translateY(-6px); }
.xp-nav-toggle-bars::after { transform: translateY(6px); }
.xp-nav-toggle[aria-expanded="true"] .xp-nav-toggle-bars { background: transparent; }
.xp-nav-toggle[aria-expanded="true"] .xp-nav-toggle-bars::before { transform: rotate(45deg); }
.xp-nav-toggle[aria-expanded="true"] .xp-nav-toggle-bars::after { transform: rotate(-45deg); }

@media (max-width: 1120px) {
    .xp-site-nav { gap: 14px !important; }
    .xp-nav-menu { gap: 2px !important; }
    .xp-nav-link { padding-inline: 8px !important; font-size: .86rem !important; }
    .xp-nav-actions { gap: 9px; }
    .xp-nav-join { padding-inline: 13px !important; }
}
@media (max-width: 960px) {
    :root { --xp-nav-height: 70px; }
    header.xp-site-header { position: sticky !important; }
    .xp-site-nav { gap: 12px !important; }
    .xp-nav-actions { margin-left: auto; }
    .xp-nav-toggle { display: inline-flex; flex: 0 0 auto; }
    .xp-nav-menu {
        display: none !important;
        position: absolute !important;
        inset: calc(100% + 8px) 14px auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 10px !important;
        border: 1px solid rgba(105, 193, 237, .18) !important;
        border-radius: 16px !important;
        background: rgba(7, 13, 25, .98) !important;
        box-shadow: 0 20px 50px rgba(0,0,0,.45);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }
    .xp-nav-menu.is-open { display: flex !important; }
    .xp-nav-link { justify-content: flex-start !important; min-height: 46px; padding-inline: 14px !important; }
}
@media (max-width: 560px) {
    .xp-site-nav { padding-inline: 14px !important; gap: 9px !important; }
    .xp-nav-brand { gap: 8px !important; }
    .xp-nav-brand img { width: 39px; height: 39px; }
    .xp-nav-brand-name b { font-size: .91rem; }
    .xp-nav-brand-name small { font-size: .51rem; }
    .xp-nav-actions { gap: 8px; }
    .xp-nav-login { font-size: .8rem; }
    .xp-nav-join { min-height: 42px; padding-inline: 11px !important; font-size: .65rem !important; }
}
@media (max-width: 390px) {
    .xp-nav-brand-name { display: none; }
    .xp-nav-join { padding-inline: 9px !important; }
}

/* Homepage: tighten the announcement stack and bring the join message up sooner. */
#home.hero {
    min-height: min(800px, calc(100svh - var(--xp-nav-height)));
    align-items: flex-start;
    padding: 82px 0 54px;
}
#home.hero .ann-banner {
    max-width: 720px;
    margin-bottom: 14px;
    padding: 10px 15px;
    border-radius: 12px;
}
#home.hero .hero-news { max-width: 720px; gap: 7px; margin-bottom: 18px; }
#home.hero .news-pill { max-width: 680px; min-height: 52px; padding: 8px 16px; border-radius: 14px; }
#home.hero .hero-badge { margin-bottom: 17px; }
#home.hero .hero-title { max-width: 940px; margin-bottom: 12px; font-size: clamp(2.55rem, 6.6vw, 5rem); }
#home.hero .hero-subtitle { margin-bottom: 16px; }
#home.hero .hero-desc { max-width: 670px; margin-bottom: 24px; }
#home.hero .hero-ip { margin-top: 12px; }
.xp-homepage .section { padding: 72px 0; }
.xp-homepage .section#promotions { padding-top: 52px !important; padding-bottom: 40px !important; }
.xp-homepage .section#battlepass-teaser { padding-top: 54px; padding-bottom: 54px; }
.xp-homepage .section#shop { padding-bottom: 78px; }
.xp-homepage .home-proof {
    position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    margin-top:-24px; padding:0; overflow:hidden; border:1px solid rgba(127,192,224,.13);
    border-radius:16px; background:rgba(8,15,26,.9); box-shadow:0 18px 44px rgba(0,0,0,.2);
}
.home-proof-item { display:flex; align-items:center; justify-content:center; gap:12px; min-height:86px; padding:14px 12px; color:#f0f5fa; font-size:.82rem; font-weight:700; line-height:1.4; }
.home-proof-item + .home-proof-item { border-left:1px solid rgba(127,192,224,.12); }
.home-proof-item > i { color:#49d8f4; font-size:1.15rem; }
.home-proof-item:nth-child(2) > i { color:#ffc94d; }
.home-proof-item small { color:#8292a6; font-size:.7rem; font-weight:500; }
#home.hero .hero-layout { width: 100%; margin-top: 0; }
#home.hero .hero-copy { position: relative; z-index: 1; }
#home.hero .hero-title { max-width: 760px; font-size: clamp(2.8rem, 5.1vw, 4.65rem); line-height: 1.08; letter-spacing: -.025em; }
#home.hero .hero-subtitle { font-size: clamp(.82rem, 1.15vw, 1rem); letter-spacing: .17em; }
#home.hero .hero-desc { max-width: 590px; font-size: 1.04rem; line-height: 1.75; }
#home.hero .hero-showcase-col { position: relative; z-index: 1; }
.hero-showcase {
    position: relative;
    max-width: 510px;
    margin: 12px 0 0 auto;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(119, 214, 246, .19);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(13, 24, 36, .94), rgba(6, 12, 20, .94));
    box-shadow: 0 28px 80px rgba(0,0,0,.38), 0 0 55px rgba(22,192,255,.07);
}
.showcase-topline { display:flex; align-items:center; justify-content:space-between; padding: 2px 3px 12px; color:#c9d6e3; font:700 .68rem 'Orbitron','Inter',sans-serif; letter-spacing:.12em; }
.showcase-topline > span:first-child { color:#5ce5aa; }
.showcase-topline i { margin-right:7px; }
.showcase-version { padding:6px 9px; border:1px solid rgba(40,199,245,.24); border-radius:99px; color:#74def9; background:rgba(40,199,245,.08); }
.showcase-art {
    position:relative;
    min-height:clamp(220px, 26vw, 320px);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.07);
    border-radius:15px;
    background: linear-gradient(180deg, rgba(5,10,18,.04) 35%, rgba(5,10,18,.82) 100%), url('/store/images/xplay-zombie-plague-hero.webp') center 62% / cover no-repeat, #0b1919;
}
.showcase-art::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,rgba(0,230,118,.09),transparent 52%,rgba(22,192,255,.09)); pointer-events:none; }
.showcase-info { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:17px 5px 15px; }
.showcase-info-copy { display:flex; flex-direction:column; gap:7px; }
.showcase-kicker { color:#65d8f4; font:700 .59rem 'Orbitron','Inter',sans-serif; letter-spacing:.12em; }
.showcase-info-copy strong { color:#f4f7fb; font-size:1.03rem; }
.showcase-play { display:grid; place-items:center; width:43px; height:43px; flex:0 0 auto; border-radius:50%; color:#05121a; background:linear-gradient(135deg,#50ddf8,#17b7eb); box-shadow:0 6px 20px rgba(22,192,255,.23); transition:transform .2s, box-shadow .2s; }
.showcase-play:hover { color:#05121a; transform:scale(1.06); box-shadow:0 9px 26px rgba(22,192,255,.36); }
.showcase-perks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.showcase-perks a { display:flex; align-items:center; gap:8px; min-width:0; padding:10px 9px; border:1px solid rgba(255,255,255,.08); border-radius:11px; color:#d7e0eb; background:rgba(255,255,255,.035); font-size:.7rem; font-weight:700; transition:border-color .18s,background .18s; }
.showcase-perks a:hover { border-color:rgba(40,199,245,.35); color:#fff; background:rgba(40,199,245,.08); }
.showcase-perks a > i:first-child { color:#4bd6f4; flex:0 0 auto; }
.showcase-perks a:nth-child(2) > i:first-child { color:#ffc94d; }
.showcase-perks a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.showcase-perks .perk-arrow { margin-left:auto; color:#75869a; font-size:.58rem; }
.xp-homepage #vip.vip-section {
    isolation:isolate;
    background:linear-gradient(110deg,rgba(5,9,17,.96),rgba(5,9,17,.79)),url('/store/images/bg_premium_shop_1.webp') center 46% / cover no-repeat;
}
.xp-homepage #shop {
    background-image:linear-gradient(180deg,rgba(5,10,18,.94),rgba(5,10,18,.89)),url('/store/images/bg_premium_shop_1.webp');
    background-position:center; background-size:cover;
}
.xp-homepage .vip-intro { display:flex; align-items:center; justify-content:space-between; gap:30px; max-width:1000px; margin:0 auto 42px; text-align:left; }
.vip-intro-copy { max-width:680px; }
.vip-intro .section-title { margin-bottom:12px; }
.vip-intro .section-subtitle { max-width:630px; margin:0; }
.vip-intro-art { width:clamp(130px,18vw,220px); height:auto; flex:0 0 auto; filter:drop-shadow(0 14px 36px rgba(255,177,43,.3)); animation:xp-emblem-float 6s ease-in-out infinite; }
.xp-homepage .vip-card { background:linear-gradient(145deg,rgba(16,20,28,.85),rgba(10,13,20,.68)); border-color:rgba(255,201,77,.2); backdrop-filter:blur(10px); }
.xp-homepage .vip-card { position:relative; min-height:350px; padding:22px 24px 25px; overflow:hidden; }
.xp-homepage .vip-card:hover { background:linear-gradient(145deg,rgba(31,27,21,.93),rgba(12,15,22,.86)); }
.vip-card-art { display:grid; place-items:center; height:145px; margin:-4px 0 12px; }
.vip-card-art img { width:min(100%,240px); height:145px; object-fit:contain; filter:drop-shadow(0 14px 20px rgba(0,0,0,.46)); transition:transform .35s,filter .35s; }
.vip-card:hover .vip-card-art img { transform:translateY(-4px) scale(1.035); filter:drop-shadow(0 18px 24px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,192,65,.16)); }
.vip-card-kicker { display:flex; align-items:center; gap:8px; color:#f0bf49; font:700 .57rem 'Orbitron','Inter',sans-serif; letter-spacing:.13em; margin-bottom:11px; }
.vip-card-kicker i { color:#54d9f5; font-size:.78rem; }
.xp-homepage .vip-card h4 { font-size:1.05rem; letter-spacing:.01em; margin-bottom:8px; }
.xp-homepage .vip-card p { font-size:.88rem; line-height:1.62; }
.vip-vault-feature { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr); align-items:center; gap:28px; min-height:280px; padding:28px clamp(24px,4vw,48px); overflow:hidden; border:1px solid rgba(76,220,179,.28); border-radius:22px; background:linear-gradient(100deg,rgba(7,18,22,.96),rgba(9,17,25,.82)),url('/store/images/bg_rankings_1.webp') center 55% / cover no-repeat; box-shadow:0 24px 60px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.04); }
.vip-vault-feature::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(450px circle at 78% 50%,rgba(0,230,118,.16),transparent 70%); }
.vip-vault-copy,.vip-vault-art { position:relative; z-index:1; }
.vip-vault-copy h3 { margin:0 0 10px; color:#fff; font:900 clamp(1.55rem,3vw,2.35rem) 'Orbitron','Inter',sans-serif; }
.vip-vault-copy p { max-width:690px; margin:0; color:#b8c7d4; font-size:.95rem; line-height:1.7; }
.vault-reward-tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.vault-reward-tags span { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(100,222,187,.18); border-radius:9px; color:#d9eee7; background:rgba(255,255,255,.04); font-size:.73rem; font-weight:700; }
.vault-reward-tags i { color:#62e0ac; }
.vip-vault-art { display:grid; place-items:center; min-height:240px; }
.vip-vault-art img { width:min(100%,340px); height:270px; object-fit:contain; filter:drop-shadow(0 22px 26px rgba(0,0,0,.58)) drop-shadow(0 0 22px rgba(0,230,118,.19)); animation:xp-emblem-float 6.4s ease-in-out infinite; }
.xp-homepage .bp-promo {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.8fr); align-items:center; gap:22px;
    padding:clamp(28px,4.5vw,58px);
    background:linear-gradient(100deg,rgba(5,10,18,.97) 0%,rgba(5,10,18,.87) 54%,rgba(5,10,18,.38) 100%),url('/store/images/bg_rankings_1.webp') center 55% / cover no-repeat;
    border-color:rgba(255,201,77,.34); box-shadow:0 28px 80px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);
}
.xp-homepage .bp-promo::before { background:radial-gradient(520px circle at 80% 55%,rgba(255,194,65,.19),transparent 62%); }
.bp-copy { min-width:0; }
.bp-promo h2 { font-size:clamp(2.25rem,4.7vw,4rem); line-height:1.02; letter-spacing:-.03em; }
.bp-promo p { max-width:520px; font-size:1rem; }
.bp-stats { gap:0; margin:27px 0 30px; padding:15px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.bp-stat { min-width:125px; padding:0 20px; border-left:1px solid rgba(255,255,255,.1); }
.bp-stat:first-child { padding-left:0; border-left:0; }
.bp-stat .n { font-size:1.55rem; }
.bp-stat .l { font-size:.62rem; letter-spacing:.09em; }
.bp-art-wrap { position:relative; display:grid; place-items:center; min-height:320px; isolation:isolate; }
.bp-art-glow { position:absolute; z-index:-1; width:min(28vw,340px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(0,230,118,.26),rgba(22,192,255,.1) 45%,transparent 72%); filter:blur(8px); }
.bp-art-wrap > img { width:min(100%,360px); max-height:390px; object-fit:contain; filter:drop-shadow(0 18px 35px rgba(0,0,0,.56)) drop-shadow(0 0 20px rgba(0,230,118,.19)); animation:xp-emblem-float 6.5s ease-in-out infinite; }
.bp-art-caption { position:absolute; right:0; bottom:4%; display:flex; flex-direction:column; gap:5px; padding:12px 15px; border:1px solid rgba(255,255,255,.13); border-radius:13px; background:rgba(6,12,20,.78); backdrop-filter:blur(12px); box-shadow:0 12px 34px rgba(0,0,0,.28); }
.bp-art-caption span { color:#f3c859; font:700 .57rem 'Orbitron','Inter',sans-serif; letter-spacing:.12em; }
.bp-art-caption b { color:#eff5fb; font-size:.8rem; }
.bp-primary-btn,.vip-primary-btn { box-shadow:0 10px 28px rgba(255,174,24,.22); }
.xp-homepage .shop-pack { background-color:rgba(8,14,24,.75); backdrop-filter:blur(12px); border-color:rgba(121,195,228,.15); }
.xp-homepage .shop-pack .sp-cta { border-radius:12px; }
.xp-homepage .btn-game { min-height:50px; border-radius:13px; }
#shop .shop-category-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 auto 34px; }
#shop .shop-category-tab { display:flex; align-items:center; gap:10px; min-height:58px; padding:8px 15px 8px 9px; border:1px solid rgba(125,190,220,.16); border-radius:14px; color:#d5e1ec; background:rgba(10,20,31,.82); font:750 .76rem 'Inter',sans-serif; cursor:pointer; transition:transform .2s,border-color .2s,background .2s,box-shadow .2s; }
#shop .shop-category-tab:hover { transform:translateY(-2px); border-color:rgba(58,207,243,.42); color:#fff; background:rgba(25,113,143,.18); }
#shop .shop-category-tab[aria-selected="true"] { border-color:rgba(65,211,243,.64); color:#fff; background:linear-gradient(135deg,rgba(15,112,143,.34),rgba(10,20,31,.96)); box-shadow:0 8px 24px rgba(0,180,224,.12),inset 0 0 0 1px rgba(65,211,243,.08); }
#shop .shop-category-tab img { width:40px; height:40px; object-fit:contain; border-radius:10px; }
#shop .shop-tab-skin-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; color:#d3afff; background:rgba(168,85,247,.14); }
#shop .shop-category-panel[hidden] { display:none !important; }
#shop .shop-category-panel { max-width:1200px; margin:0 auto; animation:shop-panel-in .28s ease both; }
@keyframes shop-panel-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
#shop .shop-group-head { display:flex; align-items:center; gap:14px; max-width:1200px; margin:38px auto 18px; scroll-margin-top:100px; }
#shop .shop-group-head:first-of-type { margin-top:14px; }
#shop .shop-group-icon { display:grid; place-items:center; width:46px; height:46px; flex:0 0 auto; border:1px solid rgba(80,210,240,.2); border-radius:14px; color:#4bd8f4; background:linear-gradient(145deg,rgba(40,199,245,.16),rgba(40,199,245,.045)); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
#shop .shop-group-gold { color:#ffd262; border-color:rgba(255,201,77,.24); background:linear-gradient(145deg,rgba(255,201,77,.17),rgba(255,157,0,.045)); }
#shop .shop-group-violet { color:#c6a1ff; border-color:rgba(168,85,247,.24); background:linear-gradient(145deg,rgba(168,85,247,.17),rgba(168,85,247,.045)); }
#shop .shop-group-head h3 { margin:0 0 3px; color:#f4f8fc; font:800 1.02rem 'Orbitron','Inter',sans-serif; letter-spacing:.015em; }
#shop .shop-group-head p { margin:0; color:#8899ac; font-size:.8rem; }
#shop .shop-group-count { margin-left:auto; padding:7px 10px; border:1px solid rgba(255,255,255,.08); border-radius:99px; color:#aab9c8; background:rgba(255,255,255,.035); font-size:.67rem; font-weight:700; white-space:nowrap; }
#shop .shop-product-grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:18px; max-width:1200px; margin:0 auto; }
#shop .shop-product-grid > .shop-pack { flex:1 1 245px; width:auto; max-width:285px; min-width:min(100%,245px); min-height:340px; padding:25px 21px 20px; border:1px solid rgba(116,186,219,.16); border-radius:20px; background:linear-gradient(155deg,rgba(17,27,40,.91),rgba(7,13,23,.91)); box-shadow:0 15px 38px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.035); }
#shop .shop-product-grid > .shop-pack:hover { transform:translateY(-5px); border-color:rgba(82,210,239,.34); box-shadow:0 23px 50px rgba(0,0,0,.32),0 0 24px rgba(30,178,216,.08); }
#shop .shop-product-grid > .shop-pack.hot { border-color:rgba(22,192,255,.48); background:linear-gradient(155deg,rgba(17,65,83,.76),rgba(7,13,23,.95) 65%); }
#shop .shop-product-grid > .shop-pack.best { border-color:rgba(0,230,118,.42); background:linear-gradient(155deg,rgba(14,67,48,.72),rgba(7,13,23,.95) 65%); }
#shop .shop-product-grid > .shop-vip-pack { border-color:rgba(255,201,77,.25); background:linear-gradient(155deg,rgba(57,42,19,.74),rgba(11,14,21,.96) 66%); }
#shop .shop-product-grid > .shop-vip-pack.best { border-color:rgba(0,230,118,.42); background:linear-gradient(155deg,rgba(14,67,48,.72),rgba(7,13,23,.95) 65%); }
#shop .shop-product-grid .shop-ribbon { top:13px; right:13px; left:auto; transform:none; padding:6px 10px; font-size:.49rem; box-shadow:0 7px 18px rgba(0,0,0,.18); }
#shop .shop-ribbon.gold { color:#2a1d00; background:linear-gradient(135deg,#ffd66f,#ffab18); }
#shop .shop-product-grid .sp-icon { display:grid; place-items:center; width:62px; height:62px; margin:0 auto 16px; border:1px solid rgba(55,201,237,.22); border-radius:19px; color:#50d8f4; background:linear-gradient(145deg,rgba(22,192,255,.2),rgba(22,192,255,.055)); box-shadow:0 10px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.09); font-size:1.3rem; }
#shop .shop-product-art { display:grid; place-items:center; width:100%; height:116px; margin:-4px auto 12px; overflow:hidden; }
#shop .shop-product-art img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
#shop .shop-product-art-vip { height:138px; margin-top:-13px; margin-bottom:3px; }
#shop .shop-product-art-vip img { max-width:150px; }
#shop .shop-product-art-points img { max-width:136px; }
#shop .shop-product-art-admin { height:134px; margin-top:-9px; margin-bottom:7px; }
#shop .shop-product-art-admin img { max-width:160px; }
#shop .shop-vip-pack .sp-icon { color:#ffd262; border-color:rgba(255,201,77,.25); background:linear-gradient(145deg,rgba(255,201,77,.22),rgba(255,157,0,.055)); }
#shop .shop-pack.best .sp-icon { color:#76f3b0; border-color:rgba(0,230,118,.23); background:linear-gradient(145deg,rgba(0,230,118,.2),rgba(0,230,118,.055)); }
#shop .shop-item-kicker { display:block; margin:0 0 8px; color:#8093a9; font:700 .55rem 'Orbitron','Inter',sans-serif; letter-spacing:.14em; }
#shop .shop-item-title { min-height:2.45em; margin:0; color:#f4f7fa; font:800 1rem/1.22 'Orbitron','Inter',sans-serif; }
#shop .shop-vip-pack .shop-item-title { color:#ffe09a; }
#shop .shop-pack .sp-pts { font-size:1.95rem; letter-spacing:-.03em; }
#shop .shop-pack .sp-pts small { font-size:.55rem; letter-spacing:.2em; }
#shop .shop-pack .sp-desc { min-height:38px; margin:11px 0 15px; font-size:.67rem; line-height:1.45; letter-spacing:.045em; }
#shop .shop-pack .sp-desc.bonus { color:#72e9b1; }
#shop .shop-vip-pack .sp-desc.bonus { color:#e8c477; }
#shop .shop-bonus-line { display:flex; align-items:center; justify-content:center; gap:6px; margin:-3px 0 12px; color:#83dbad; font-size:.68rem; font-weight:700; }
#shop .shop-bonus-line i { color:#78e4ae; }
#shop .shop-pack .sp-price { margin-top:auto; margin-bottom:14px; font-size:1.55rem; }
#shop .shop-pack .sp-cta { display:flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:10px 13px; border:1px solid rgba(79,204,239,.24); border-radius:12px; color:#04131b; background:linear-gradient(135deg,#5de0f7,#24b8e2); box-shadow:0 8px 22px rgba(22,192,255,.12); font-size:.61rem; letter-spacing:.08em; }
#shop .shop-vip-pack .sp-cta { border-color:transparent; color:#241800; background:linear-gradient(135deg,#ffe184,#ffae1a); box-shadow:0 8px 22px rgba(255,174,24,.15); }
#shop .shop-pack.best .sp-cta { border-color:transparent; color:#04170c; background:linear-gradient(135deg,#7df3b1,#28d887); }
#shop .shop-pack .sp-cta:hover { filter:brightness(1.08); color:#04131b; transform:translateY(-1px); }
#shop .shop-vip-pack .sp-cta:hover { color:#241800; }
#shop .shop-skin-wrap { max-width:1000px; margin:0 auto; }
#shop .shop-skin { display:flex; align-items:center; gap:20px; padding:22px 24px; border:1px solid rgba(186,148,255,.22) !important; border-radius:20px; background:linear-gradient(110deg,rgba(34,24,53,.78),rgba(9,15,25,.94)); box-shadow:0 18px 42px rgba(0,0,0,.2); }
#shop .shop-skin:hover { border-color:rgba(186,148,255,.46) !important; box-shadow:0 24px 50px rgba(0,0,0,.3),0 0 26px rgba(150,98,239,.08); }
#shop .shop-skin .ss-icon { width:58px; height:58px; border:1px solid rgba(209,177,255,.22); border-radius:17px; color:#e3cbff; background:linear-gradient(145deg,rgba(168,85,247,.34),rgba(111,66,193,.15)); }
#shop .shop-skin-copy { flex:1; min-width:0; }
#shop .shop-skin-copy h3 { margin:0 0 5px; color:#fff; font:800 1rem 'Orbitron','Inter',sans-serif; }
#shop .shop-skin-copy p { margin:0; color:#9eacc0; font-size:.82rem; }
#shop .shop-skin-price { color:#fff; font:900 1.25rem 'Orbitron','Inter',sans-serif; white-space:nowrap; }
#shop .shop-skin-price small { margin-left:4px; color:#a9b7c7; font-size:.72rem; }
#shop .shop-skin-price span { display:block; margin-top:5px; color:#9eacc0; font:700 .53rem 'Orbitron','Inter',sans-serif; letter-spacing:.08em; text-align:right; text-transform:uppercase; }
#shop .shop-skin-arrow { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(190,145,255,.25); border-radius:13px; color:#e0c8ff; background:rgba(168,85,247,.11); }
#shop .shop-skin-product { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:30px; align-items:center; max-width:1080px; margin:0 auto; padding:24px; overflow:hidden; border:1px solid rgba(186,148,255,.23); border-radius:22px; background:linear-gradient(115deg,rgba(28,24,47,.88),rgba(8,15,25,.96) 68%); box-shadow:0 20px 52px rgba(0,0,0,.3); }
#shop .shop-skin-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-width:0; }
#shop .shop-skin-gallery figure { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; min-width:0; height:260px; margin:0; overflow:hidden; border:1px solid rgba(125,190,220,.12); border-radius:15px; background:radial-gradient(ellipse at 50% 58%,rgba(20,151,180,.18),rgba(5,12,20,.08) 70%); }
#shop .shop-skin-gallery figure:nth-child(2) { background:radial-gradient(ellipse at 50% 58%,rgba(224,156,38,.17),rgba(5,12,20,.08) 70%); }
#shop .shop-skin-gallery figure:nth-child(3) { background:radial-gradient(ellipse at 50% 58%,rgba(135,83,200,.17),rgba(5,12,20,.08) 70%); }
#shop .shop-skin-gallery img { display:block; width:100%; height:225px; min-height:0; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 10px 18px rgba(0,0,0,.42)); }
#shop .shop-skin-gallery figcaption { z-index:1; width:100%; padding:8px 3px; color:#bac7d5; background:rgba(5,10,17,.64); font:700 .52rem 'Orbitron','Inter',sans-serif; letter-spacing:.05em; text-align:center; text-transform:uppercase; }
#shop .shop-skin-product-copy { min-width:0; }
#shop .shop-skin-product-copy h3 { margin:0 0 10px; color:#fff; font:800 clamp(1.15rem,2vw,1.55rem) 'Orbitron','Inter',sans-serif; }
#shop .shop-skin-product-copy p { margin:0 0 12px; color:#aab8c9; font-size:.84rem; line-height:1.65; }
#shop .shop-skin-browse { display:inline-flex; align-items:center; gap:8px; color:#53d6f2; font-size:.78rem; font-weight:750; }
#shop .shop-skin-browse:hover { color:#a2efff; }
#shop .shop-skin-order-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:20px; padding-top:17px; border-top:1px solid rgba(255,255,255,.09); }
#shop .shop-skin-card-price { color:#fff; font:900 1.4rem 'Orbitron','Inter',sans-serif; }
#shop .shop-skin-card-price small { margin-left:4px; color:#a9b7c7; font-size:.7rem; }
#shop .shop-skin-order-row .sp-cta { flex:1 1 180px; display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 13px; border-radius:12px; color:#10101b; background:linear-gradient(135deg,#d7bcff,#a36df1); box-shadow:0 8px 22px rgba(150,98,239,.17); font-size:.64rem; letter-spacing:.06em; }
@keyframes xp-emblem-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-9px) rotate(1deg); } }
.xp-vip-page .page-hero {
    padding:clamp(100px,12vw,150px) 0 58px;
    text-align:left;
    background:linear-gradient(100deg,rgba(5,9,17,.96),rgba(5,9,17,.72)),url('/store/images/bg_premium_shop_1.webp') center / cover no-repeat;
}
.xp-vip-page .page-hero .vip-page-hero-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,340px); grid-template-areas:"copy art"; align-items:center; gap:32px; max-width:1180px; }
.vip-page-hero-copy { position:relative; z-index:1; grid-area:copy; }
.xp-vip-page .page-hero h1 { max-width:760px; font-size:clamp(2.8rem,6.5vw,5.25rem); line-height:1.04; }
.xp-vip-page .page-hero p { max-width:650px; margin:0; font-size:1.1rem; line-height:1.7; }
.vip-page-hero-art { grid-area:art; width:100%; max-width:320px; justify-self:center; filter:drop-shadow(0 18px 45px rgba(255,177,43,.32)); animation:xp-emblem-float 6s ease-in-out infinite; }
.xp-vip-page .price-card { border-radius:20px; background-color:rgba(8,13,22,.78); backdrop-filter:blur(16px); }
.xp-vip-page .buy-btn { border-radius:13px; background:linear-gradient(135deg,#ffd66f,#ffab18); color:#271900; box-shadow:0 12px 30px rgba(255,174,24,.2); }
.xp-vip-page .buy-btn:hover { color:#271900; box-shadow:0 15px 38px rgba(255,174,24,.32); }
.bp-hero-premium { isolation:isolate; background:linear-gradient(180deg,rgba(2,6,18,.76),rgba(2,6,18,.92)),url('/store/images/bg_rankings_1.webp') center 42% / cover no-repeat; }
.bp-hero-emblem { display:none; }
.bp-hero-premium a[href^="login"] { background:linear-gradient(135deg,#ffe081,#f2a900) !important; box-shadow:0 12px 32px rgba(245,158,11,.25); }
.bp-hero-premium a[href^="login"]:hover { filter:brightness(1.08); transform:translateY(-2px); }
@media (min-width: 1280px) {
    .bp-hero-emblem { display:block; position:absolute; z-index:0; top:13%; right:max(3%,calc((100vw - 1320px)/2)); width:clamp(210px,23vw,330px); opacity:.63; pointer-events:none; filter:drop-shadow(0 18px 44px rgba(0,0,0,.65)) drop-shadow(0 0 28px rgba(0,230,118,.2)); animation:xp-emblem-float 6.5s ease-in-out infinite; }
}
@media (min-width: 1400px) { .hero-showcase { max-width: 530px; } }
@media (max-width: 768px) {
    .xp-vip-page .page-hero { padding:60px 0 40px; text-align:center; }
    .xp-vip-page .page-hero .vip-page-hero-layout { grid-template-columns:1fr; grid-template-areas:"art" "copy"; gap:4px; }
    .vip-page-hero-art { width:170px; max-width:42vw; margin:0 auto 4px; }
    .xp-vip-page .page-hero p { margin-inline:auto; }
    .xp-homepage #vip.vip-section { background-position:62% center; }
    .xp-homepage .vip-intro { justify-content:center; gap:12px; text-align:center; margin-bottom:30px; }
    .vip-intro-art { width:clamp(82px,22vw,140px); }
    .vip-intro .section-subtitle { margin-inline:auto; }
    .vip-vault-feature { grid-template-columns:1fr; gap:4px; text-align:center; }
    .vip-vault-copy .vip-card-kicker,.vault-reward-tags { justify-content:center; }
    .vip-vault-art { min-height:185px; }
    .vip-vault-art img { width:min(80%,300px); height:210px; }
    .xp-homepage .bp-promo { grid-template-columns:1fr; gap:0; }
    .bp-art-wrap { min-height:240px; }
    .bp-art-wrap > img { width:min(68%,290px); max-height:290px; }
    .bp-art-caption { right:5%; bottom:2%; }
    #shop .shop-product-grid { gap:14px; }
    #shop .shop-product-grid > .shop-pack { flex-basis:225px; min-width:min(100%,225px); max-width:290px; min-height:325px; }
    #shop .shop-skin-product { grid-template-columns:1fr; gap:20px; padding:20px; }
    #shop .shop-skin-gallery figure { height:240px; }
    #shop .shop-skin-gallery img { height:205px; }
    #shop .shop-group-head { gap:10px; margin-top:30px; }
    #shop .shop-group-count { font-size:.61rem; padding:6px 8px; }
    .xp-homepage .section { padding: 54px 0; }
    .xp-homepage .home-proof { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:-16px; }
    .home-proof-item { justify-content:flex-start; min-height:74px; padding-left:clamp(14px,5vw,28px); }
    .home-proof-item:nth-child(3) { border-left:0; }
    .home-proof-item:nth-child(n+3) { border-top:1px solid rgba(127,192,224,.12); }
    .xp-homepage .section#promotions { padding-top:38px !important; padding-bottom:32px !important; }
    #home.hero { min-height: 0; padding: 42px 0 54px; }
    #home.hero .hero-news { margin-bottom: 16px; }
    #home.hero .hero-title { font-size: clamp(2.15rem, 9vw, 3.7rem); }
    #home.hero .hero-copy { text-align:center; }
    #home.hero .hero-desc { margin-left:auto; margin-right:auto; }
    #home.hero .hero-showcase { max-width:590px; margin:16px auto 0; text-align:left; }
    #home.hero .hero-ip { justify-content:center; flex-wrap:wrap; }
    .showcase-art { min-height:clamp(210px,58vw,320px); }
}
@media (max-width: 440px) {
    .xp-homepage .vip-intro { flex-direction:column-reverse; }
    .vip-intro-art { width:110px; }
    .xp-homepage .vip-card { min-height:0; }
    .vip-card-art,.vip-card-art img { height:125px; }
    .vip-vault-feature { padding:24px 18px; }
    #shop .shop-category-nav { gap:7px; margin-bottom:26px; }
    #shop .shop-category-tab { min-height:49px; gap:7px; padding:6px 10px 6px 7px; font-size:.66rem; }
    #shop .shop-category-tab img,.shop-tab-skin-icon { width:34px; height:34px; }
    #shop .shop-product-art { height:96px; }
    #shop .shop-product-art-vip { height:118px; }
    #shop .shop-product-art-admin { height:112px; }
    #shop .shop-skin-product { gap:16px; padding:14px; }
    #shop .shop-skin-gallery { gap:5px; }
    #shop .shop-skin-gallery figure { height:160px; border-radius:11px; }
    #shop .shop-skin-gallery img { height:132px; }
    #shop .shop-skin-gallery figcaption { padding:7px 1px; font-size:.42rem; }
    #shop .shop-skin-order-row { gap:10px; margin-top:15px; }
    #shop .shop-group-head h3 { font-size:.87rem; }
    #shop .shop-group-head p { font-size:.69rem; }
    #shop .shop-group-icon { width:39px; height:39px; border-radius:12px; }
    #shop .shop-group-count { margin-left:auto; }
    #shop .shop-product-grid > .shop-pack { min-width:min(100%,255px); max-width:340px; flex-basis:100%; }
    .bp-stats { justify-content:center; }
    .bp-stat { min-width:0; flex:1 1 30%; padding:0 8px; text-align:center; }
    .bp-stat .n { font-size:1.3rem; }
    .bp-stat .l { font-size:.55rem; }
    .home-proof-item { gap:9px; padding-inline:10px; font-size:.73rem; }
    .home-proof-item > i { font-size:1rem; }
    .home-proof-item small { font-size:.65rem; }
    .hero-showcase { padding:11px; border-radius:17px; }
    .showcase-perks { grid-template-columns:1fr; }
    .showcase-perks a { min-height:42px; padding-inline:12px; font-size:.78rem; }
    .showcase-art { min-height:205px; }
    #home.hero .hero-ip { gap:8px; padding:11px 13px; font-size:.78rem; }
    #home.hero .hero-ip .ip-value { font-size:.76rem; }
}
@media (prefers-reduced-motion: reduce) {
    .xp-nav-link, .xp-nav-join, .xp-nav-toggle-bars, .xp-nav-toggle-bars::before, .xp-nav-toggle-bars::after { transition: none; }
}