body.activeplayer-valorant-hub {
    --vh-red: #ff4655;
    --vh-ink: #080d12;
    --vh-navy: #0f1923;
    --vh-panel: #15232d;
    --vh-line: rgba(255, 255, 255, .1);
    background: var(--vh-ink) !important;
}

.activeplayer-valorant-hub .jnews_header_bottom_ads,
.activeplayer-valorant-hub .jnews_header_top_ads { display: none !important; }

/* JNews mega menus must always open above the plugin-owned hub layers. */
.activeplayer-valorant-hub .jeg_header_wrapper { position: relative !important; z-index: 1000 !important; }
.activeplayer-valorant-hub .jeg_header_sticky,
.activeplayer-valorant-hub .jeg_navbar_mobile_wrapper { z-index: 1000 !important; }
.activeplayer-valorant-hub .jeg_header_wrapper .jeg_megamenu .sub-menu,
.activeplayer-valorant-hub .jeg_header_wrapper .jeg_menu li > ul,
.activeplayer-valorant-hub .jeg_header_sticky .jeg_megamenu .sub-menu,
.activeplayer-valorant-hub .jeg_header_sticky .jeg_menu li > ul { z-index: 1001 !important; }

.valorant-hub {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 8%, rgba(255, 70, 85, .15), transparent 30%),
        linear-gradient(180deg, #0b1117 0, #101a22 52%, #080d12 100%);
    color: #eef2f5;
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.valorant-hub__shell { width: min(1320px, calc(100% - 48px)); margin-inline: auto; }

.valorant-hub__nav {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid var(--vh-line);
    background: rgba(8, 13, 18, .96);
}
.valorant-hub__nav-inner { display: flex; align-items: center; width: min(1400px, calc(100% - 48px)); min-height: 64px; margin-inline: auto; }
.valorant-hub__brand { display: inline-flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none !important; white-space: nowrap; }
.valorant-hub__brand > span { display: grid; width: 30px; height: 30px; place-items: center; clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%); background: var(--vh-red); font-size: 15px; font-weight: 900; }
.valorant-hub__brand strong { font-size: 12px; letter-spacing: .14em; }
.valorant-hub__section-nav { position: sticky; z-index: 5; top: 0; border-bottom: 1px solid var(--vh-line); background: rgba(15, 25, 35, .97); backdrop-filter: blur(14px); }
.admin-bar .valorant-hub__section-nav { top: 32px; }
.valorant-hub__nav-links { display: flex; align-items: stretch; justify-content: center; min-height: 54px; overflow-x: auto; }
.valorant-hub__nav-links a { position: relative; padding: 19px 18px 15px; color: #aeb9c2 !important; font-size: 12px; font-weight: 800; text-decoration: none !important; white-space: nowrap; }
.valorant-hub__nav-links a::after { position: absolute; right: 18px; bottom: 0; left: 18px; height: 3px; background: transparent; content: ""; }
.valorant-hub__nav-links a:hover,
.valorant-hub__nav-links a:focus,
.valorant-hub__nav-links a[aria-current="page"] { color: #fff !important; }
.valorant-hub__nav-links a[aria-current="page"]::after { background: var(--vh-red); }

.valorant-hub__masthead { position: relative; isolation: isolate; padding: clamp(58px, 8vw, 110px) 0 70px; border-bottom: 1px solid var(--vh-line); background: linear-gradient(115deg, #17232c 0 58%, #ba3441 58.2% 72%, #ff4655 72.2%); }
.valorant-hub__masthead::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(8, 13, 18, .2), rgba(8, 13, 18, .05) 55%, rgba(8, 13, 18, .42)); content: ""; }
.valorant-hub__masthead-grid { position: absolute; z-index: -1; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 52px 52px; transform: skewX(-8deg) scale(1.08); }
.valorant-hub__masthead .valorant-hub__shell { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 70px; }
.valorant-hub__eyebrow { margin: 0 0 10px !important; color: #ff929b !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .19em !important; text-transform: uppercase; }
.valorant-hub__masthead h1 { max-width: 840px; margin: 0 !important; color: #fff !important; font-size: clamp(42px, 7vw, 82px) !important; font-weight: 950 !important; letter-spacing: -.045em !important; line-height: .96 !important; text-transform: uppercase; }
.valorant-hub__masthead-copy > p:not(.valorant-hub__eyebrow) { max-width: 720px; margin: 22px 0 0 !important; color: #c6d0d8 !important; font-size: clamp(15px, 2vw, 19px) !important; line-height: 1.65 !important; }
.valorant-hub__signals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.valorant-hub__signals span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.18); background: rgba(8,13,18,.28); color: #f4f7f9; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.valorant-hub__signals i { width: 7px; height: 7px; border-radius: 50%; background: #43e6a0; box-shadow: 0 0 0 4px rgba(67,230,160,.14); }
.valorant-hub__mark { display: grid; justify-items: center; gap: 12px; color: #fff; }
.valorant-hub__mark span { display: grid; width: 190px; height: 190px; place-items: center; border: 2px solid rgba(255,255,255,.45); clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%); background: rgba(8,13,18,.2); font-size: 92px; font-weight: 950; line-height: 1; }
.valorant-hub__mark small { font-size: 10px; font-weight: 900; letter-spacing: .24em; }

.valorant-hub__body { min-width: 0; padding-block: 54px 70px; }
.valorant-hub__content { min-width: 0; color: #c3cdd4; }
.valorant-hub__content > h2,
.valorant-hub__content > h3 { max-width: 1000px; margin: 54px auto 16px !important; color: #fff !important; font-weight: 900 !important; letter-spacing: -.025em; }
.valorant-hub__content > h2:first-child { margin-top: 0 !important; font-size: clamp(27px, 4vw, 42px) !important; }
.valorant-hub__content > p,
.valorant-hub__content > ul,
.valorant-hub__content > ol { max-width: 1000px; margin-right: auto !important; margin-left: auto !important; color: #b9c5cd !important; font-size: 16px; line-height: 1.8; }
.valorant-hub__content > p strong,
.valorant-hub__content > ul strong,
.valorant-hub__content > ol strong { color: #fff; }
.valorant-hub__content > p a,
.valorant-hub__content > ul a,
.valorant-hub__content > ol a { color: #ff7c87; }

/* Keep text readable inside the light leaderboard/profile components. */
.valorant-hub__content .valorant-profile__season-table td,
.valorant-hub__content .valorant-profile__season-table td strong { color: #17212b; }
.valorant-hub__content .valorant-profile__placement-grid strong { color: #1f2937; }
.valorant-hub__content .valorant-profile__placement-grid span { color: #64748b; }
.activeplayer-valorant-hub .valorant-leaderboard,
.activeplayer-valorant-hub .valorant-profile { max-width: 1180px; margin-top: 34px; }
.activeplayer-valorant-hub .valorant-leaderboard,
.activeplayer-valorant-hub .valorant-status { scroll-margin-top: 90px; }

.valorant-status {
    --vs-green: #43e6a0;
    --vs-amber: #f7b955;
    width: min(1180px, 100%);
    margin: 34px auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: #111d25;
    color: #eaf0f4;
    box-shadow: 0 25px 70px rgba(0,0,0,.35);
}
.valorant-status__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding: 32px; background: linear-gradient(125deg, #172732 0 68%, #bd3542 68.2%, #ff4655 100%); }
.valorant-status__header h2 { margin: 0 !important; color: #fff !important; font-size: clamp(25px, 4vw, 38px) !important; font-weight: 900 !important; }
.valorant-status__header p:not(.valorant-hub__eyebrow) { max-width: 680px; margin: 10px 0 0 !important; color: #bdc9d1 !important; font-size: 14px; }
.valorant-status__overall { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(8,13,18,.36); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.valorant-status__overall i { width: 9px; height: 9px; border-radius: 50%; background: #8b98a2; box-shadow: 0 0 0 5px rgba(139,152,162,.14); }
.valorant-status--operational .valorant-status__overall i { background: var(--vs-green); box-shadow: 0 0 0 5px rgba(67,230,160,.15); }
.valorant-status--maintenance .valorant-status__overall i,
.valorant-status--degraded .valorant-status__overall i { background: var(--vs-amber); box-shadow: 0 0 0 5px rgba(247,185,85,.15); }
.valorant-status--down .valorant-status__overall i { background: #ff4655; box-shadow: 0 0 0 5px rgba(255,70,85,.16); }
.valorant-status__stale { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 11px 22px; border-bottom: 1px solid rgba(247,185,85,.26); background: rgba(247,185,85,.1); color: #d8c49c; font-size: 11px; }
.valorant-status__stale strong { color: #ffd98b; }
.valorant-status__regions { display: flex; gap: 7px; overflow-x: auto; padding: 17px 22px; border-bottom: 1px solid rgba(255,255,255,.09); background: #0c151c; }
.valorant-status__regions a { padding: 8px 12px; border: 1px solid #354651; border-radius: 999px; color: #b9c5cd !important; font-size: 11px; font-weight: 800; text-decoration: none !important; white-space: nowrap; }
.valorant-status__regions a:hover,
.valorant-status__regions a[aria-current="page"] { border-color: #ff4655; background: #ff4655; color: #fff !important; }
.valorant-status__summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 24px; }
.valorant-status__summary > div { padding: 18px; border: 1px solid rgba(255,255,255,.1); border-top: 3px solid #ff4655; background: #192832; }
.valorant-status__summary dt { color: #8797a2; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.valorant-status__summary dd { margin: 8px 0 0; color: #fff; font-size: 22px; font-weight: 900; }
.valorant-status--operational .valorant-status__summary > div:first-child { border-top-color: var(--vs-green); }
.valorant-status--operational .valorant-status__summary > div:first-child dd { color: var(--vs-green); }
.valorant-status__clear { display: flex; align-items: center; gap: 17px; margin: 0 24px 24px; padding: 22px; border: 1px solid rgba(67,230,160,.28); background: rgba(67,230,160,.08); }
.valorant-status__clear > span { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 50%; background: var(--vs-green); color: #092219; font-size: 22px; font-weight: 900; }
.valorant-status__clear strong { color: #fff; font-size: 15px; }
.valorant-status__clear p { margin: 4px 0 0 !important; color: #9fc5b4 !important; font-size: 12px; }
.valorant-status__events { padding: 0 24px 24px; }
.valorant-status__events h3 { margin: 0 0 12px !important; color: #fff !important; font-size: 18px !important; }
.valorant-status__events ul { display: grid; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.valorant-status__event { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px; border: 1px solid rgba(255,255,255,.1); background: #192832; }
.valorant-status__event-icon { display: grid; width: 32px; height: 32px; place-items: center; background: #ff4655; color: #fff; font-weight: 900; }
.valorant-status__event--maintenance .valorant-status__event-icon { background: var(--vs-amber); color: #382708; }
.valorant-status__event strong,
.valorant-status__event small { display: block; }
.valorant-status__event strong { color: #fff; font-size: 13px; }
.valorant-status__event p { margin: 4px 0 0 !important; color: #b8c5cd !important; font-size: 11px; line-height: 1.5; }
.valorant-status__event small { margin-top: 3px; color: #8495a1; font-size: 10px; }
.valorant-status__event em { color: #ff9da5; font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.valorant-status__footer { display: flex; flex-wrap: wrap; gap: 7px 20px; padding: 14px 24px; border-top: 1px solid rgba(255,255,255,.09); background: #0c151c; color: #85949e; font-size: 11px; }
.valorant-status__error { width: min(1180px, 100%); margin: 30px auto; }

.valorant-hub__related { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; margin-top: 70px; padding: 34px; border: 1px solid var(--vh-line); background: linear-gradient(135deg, #111d25, #0b1218); }
.valorant-hub__related-heading h2 { margin: 0 0 18px !important; color: #fff !important; font-size: 25px !important; line-height: 1.15 !important; }
.valorant-hub__related-heading > a { color: #ff7c87 !important; font-size: 12px; font-weight: 800; text-decoration: none !important; }
.valorant-hub__related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.valorant-hub__related-grid > a { position: relative; min-height: 118px; padding: 20px 46px 20px 20px; border: 1px solid var(--vh-line); background: #17242e; color: #fff !important; text-decoration: none !important; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.valorant-hub__related-grid > a:hover { border-color: var(--vh-red); background: #1c2b36; transform: translateY(-2px); }
.valorant-hub__related-grid small { display: block; margin-bottom: 8px; color: #ff7c87; font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.valorant-hub__related-grid strong { display: block; font-size: 15px; line-height: 1.35; }
.valorant-hub__related-grid span { position: absolute; right: 18px; bottom: 17px; color: #ff7c87; font-size: 20px; }

@media (max-width: 900px) {
    .valorant-hub__nav-inner { min-height: 56px; }
    .valorant-hub__nav-links { justify-content: flex-start; }
    .valorant-hub__nav-links a { padding-left: 10px; padding-right: 10px; }
    .valorant-hub__masthead .valorant-hub__shell { grid-template-columns: 1fr; }
    .valorant-hub__mark { display: none; }
    .valorant-hub__related { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .valorant-hub__shell,
    .valorant-hub__nav-inner { width: min(calc(100% - 28px), 1320px); }
    .valorant-hub__masthead { padding: 50px 0; }
    .valorant-hub__masthead h1 { font-size: 43px !important; }
    .valorant-hub__body { padding-block: 34px 50px; }
    .valorant-hub__related { margin-top: 48px; padding: 20px; }
    .valorant-hub__related-grid { grid-template-columns: 1fr; }
    .valorant-status__header { align-items: flex-start; flex-direction: column; padding: 24px 20px; }
    .valorant-status__summary { grid-template-columns: 1fr 1fr; padding: 16px; }
    .valorant-status__clear { margin: 0 16px 16px; }
    .valorant-status__event { grid-template-columns: 34px minmax(0, 1fr); }
    .valorant-status__event em { grid-column: 2; }
    .admin-bar .valorant-hub__section-nav { top: 46px; }
}