:root {
    --yh3-green: #b9ff41;
    --yh3-cyan: #52e8ff;
    --yh3-violet: #806cff;
    --yh3-ink: #050608;
    --yh3-panel: rgba(13, 16, 20, .78);
}

body {
    background:
        radial-gradient(circle at 12% -10%, rgba(82, 232, 255, .12), transparent 32rem),
        radial-gradient(circle at 88% 12%, rgba(128, 108, 255, .10), transparent 36rem),
        #050608;
}

body::before {
    opacity: .22;
    background-size: 72px 72px;
}

.youhub-hero,
.info-block__wrapper-global,
.youhub-section-heading--news,
.youhub-section-heading--news + .row {
    display: none !important;
}

.navbar {
    top: 10px;
    border-color: rgba(255, 255, 255, .09);
    background: rgba(5, 6, 8, .72);
    box-shadow: 0 14px 60px rgba(0, 0, 0, .42);
}

.youhub-brand-mark,
.dropbtn.active_btn {
    color: #050608;
    background: var(--yh3-green);
    border-color: var(--yh3-green);
}

.yh3-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .82fr);
    gap: clamp(28px, 5vw, 88px);
    min-height: calc(100vh - 116px);
    margin: 20px 0 52px;
    padding: clamp(36px, 6vw, 92px);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(185, 255, 65, .055), transparent 34%),
        linear-gradient(315deg, rgba(82, 232, 255, .045), transparent 36%),
        #090b0e;
    box-shadow: 0 40px 110px rgba(0, 0, 0, .46);
}

.yh3-grid {
    position: absolute;
    z-index: -3;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(120deg, #000, transparent 78%);
}

.yh3-ambient {
    position: absolute;
    z-index: -2;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: .13;
    pointer-events: none;
    transition: transform .25s ease-out;
}

.yh3-ambient--one {
    top: -240px;
    left: -140px;
    background: var(--yh3-green);
}

.yh3-ambient--two {
    right: -180px;
    bottom: -260px;
    background: var(--yh3-cyan);
}

.yh3-hero__content {
    align-self: center;
    min-width: 0;
}

.yh3-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 34px;
    color: rgba(255, 255, 255, .52);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .24em;
}

.yh3-eyebrow span {
    width: 30px;
    height: 1px;
    background: var(--yh3-green);
    box-shadow: 0 0 14px rgba(185, 255, 65, .7);
}

.yh3-hero h1 {
    max-width: 860px;
    margin: 0;
    font-family: "Unbounded", sans-serif;
    font-size: clamp(56px, 7.5vw, 116px);
    font-weight: 700;
    line-height: .86;
    letter-spacing: -.085em;
}

.yh3-hero h1 span {
    display: block;
    margin-top: .14em;
    color: var(--yh3-green);
    text-shadow: 0 0 44px rgba(185, 255, 65, .12);
}

.yh3-hero__content > p {
    max-width: 450px;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, .55);
    font-size: clamp(15px, 1.3vw, 19px);
    line-height: 1.65;
}

.yh3-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

.yh3-button {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.yh3-button svg {
    width: 19px;
    height: 19px;
}

.yh3-button svg path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.yh3-button--primary {
    color: #050608;
    border-color: var(--yh3-green);
    background: var(--yh3-green);
    box-shadow: 0 14px 34px rgba(185, 255, 65, .12);
}

.yh3-button--ghost {
    color: #fff;
    background: rgba(255, 255, 255, .035);
    backdrop-filter: blur(14px);
}

.yh3-button:hover {
    transform: translateY(-4px);
}

.yh3-button--primary:hover {
    box-shadow: 0 20px 50px rgba(185, 255, 65, .22);
}

.yh3-signal {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 42px;
    color: rgba(255, 255, 255, .43);
}

.yh3-signal__dot,
.yh3-game__status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--yh3-green);
    box-shadow: 0 0 16px rgba(185, 255, 65, .9);
    animation: yh3-pulse 1.8s ease-in-out infinite;
}

.yh3-signal strong {
    color: #fff;
    font-family: "Unbounded", sans-serif;
    font-size: 16px;
}

.yh3-signal small {
    font-size: 11px;
    letter-spacing: .05em;
}

.yh3-games {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-self: center;
}

.yh3-game {
    position: relative;
    display: flex;
    min-height: 250px;
    flex-direction: column;
    justify-content: space-between;
    padding: 26px;
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .105);
    border-radius: 24px;
    background: var(--yh3-panel);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .22);
    transform-style: preserve-3d;
    transition: border-color .25s ease, box-shadow .25s ease, transform .16s ease-out;
    backdrop-filter: blur(18px);
}

.yh3-game::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: .55;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--mx, 80%) var(--my, 20%), rgba(255, 255, 255, .15), transparent 30%),
        linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .025));
}

.yh3-game::after {
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 270px;
    height: 270px;
    content: "";
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .09;
}

.yh3-game--cs2 {
    color: var(--yh3-cyan);
}

.yh3-game--legacy {
    color: var(--yh3-green);
}

.yh3-game:hover {
    border-color: currentColor;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .4);
}

.yh3-game__top,
.yh3-game__footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.yh3-game__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .55);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.yh3-game__status i {
    background: currentColor;
    box-shadow: 0 0 16px currentColor;
}

.yh3-game__index {
    color: rgba(255, 255, 255, .25);
    font-family: "Unbounded", sans-serif;
    font-size: 10px;
}

.yh3-game > div:nth-child(2) {
    position: relative;
    z-index: 2;
    margin: 26px 0;
}

.yh3-game small {
    color: rgba(255, 255, 255, .38);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.yh3-game h2 {
    margin: 8px 0 4px;
    color: #fff;
    font-family: "Unbounded", sans-serif;
    font-size: clamp(38px, 4.3vw, 66px);
    line-height: 1;
    letter-spacing: -.065em;
}

.yh3-game p {
    margin: 0;
    color: currentColor;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
}

.yh3-game__footer {
    padding-top: 17px;
    color: rgba(255, 255, 255, .5);
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px;
}

.yh3-game__footer b {
    color: currentColor;
    font-size: 22px;
    font-weight: 400;
}

.yh3-scroll {
    position: absolute;
    bottom: 24px;
    left: 50%;
    display: grid;
    width: 28px;
    height: 42px;
    place-items: start center;
    padding-top: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    transform: translateX(-50%);
}

.yh3-scroll span {
    width: 3px;
    height: 7px;
    border-radius: 4px;
    background: var(--yh3-green);
    animation: yh3-scroll 1.7s ease-in-out infinite;
}

.youhub-section-heading {
    margin-top: 66px;
}

.youhub-section-heading span {
    color: var(--yh3-green);
}

.youhub-section-heading h2 {
    font-size: clamp(28px, 3.4vw, 52px);
}

.servers_filter {
    width: max-content;
    max-width: 100%;
    margin-bottom: 6px;
    border-radius: 999px;
}

.chips_btn {
    border-radius: 999px;
}

.chips_btn:hover,
.chips_btn.chips_active {
    background: var(--yh3-green);
}

.servers_wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.server_block {
    border-radius: 26px;
    background: rgba(13, 16, 20, .82);
}

.server_map_image {
    height: 250px;
}

.server_button,
.statistics_icon {
    background: rgba(185, 255, 65, .10);
}

.server_button {
    color: #050608;
    background: var(--yh3-green);
}

.progress-value {
    background: linear-gradient(90deg, var(--yh3-cyan), var(--yh3-green));
}

.youhub-statistics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.statistics_container {
    min-height: 142px;
    border-radius: 22px;
    background: rgba(13, 16, 20, .72);
}

.statistics_container:hover {
    border-color: rgba(185, 255, 65, .32);
}

.statistics_number {
    font-size: 30px;
}

[data-yh3-reveal],
.youhub-section-heading,
.server_block,
.statistics_container {
    opacity: 0;
    transform: translateY(24px);
}

.yh3-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .75, .2, 1);
}

@keyframes yh3-pulse {
    50% { opacity: .35; transform: scale(.78); }
}

@keyframes yh3-scroll {
    0%, 100% { opacity: .25; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(14px); }
}

@media (max-width: 1080px) {
    .yh3-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-bottom: 72px;
    }

    .yh3-games {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .yh3-game {
        min-height: 260px;
    }
}

@media (max-width: 720px) {
    .yh3-hero {
        gap: 46px;
        margin-top: 12px;
        padding: 46px 20px 70px;
        border-radius: 24px;
    }

    .yh3-hero h1 {
        font-size: clamp(43px, 14vw, 68px);
    }

    .yh3-hero__content > p {
        max-width: 280px;
        font-size: 14px;
    }

    .yh3-actions,
    .yh3-button {
        width: 100%;
    }

    .yh3-games,
    .servers_wrap,
    .youhub-statistics-grid {
        grid-template-columns: 1fr;
    }

    .yh3-game {
        min-height: 230px;
    }

    .server_map_image {
        height: 210px;
    }

    .youhub-section-heading > p {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-yh3-reveal],
    .youhub-section-heading,
    .server_block,
    .statistics_container {
        opacity: 1;
        transform: none;
    }
}

/* YouHub 2026 responsive polish */
@media (max-width: 900px){
  .navbar{position:sticky;top:0;z-index:1000;backdrop-filter:blur(18px);background:rgba(7,10,18,.82)!important;border-bottom:1px solid rgba(255,255,255,.08)}
  .navbar_menu_left{width:100%;display:flex;align-items:center;gap:.75rem}.logo-text small{display:none}.desc_nav_item{display:inline!important}.drpdwn_menu{display:none!important}.header_burger{display:flex!important;margin-left:auto}.nav_header_menu{position:fixed;inset:72px .75rem auto .75rem;max-height:calc(100vh - 90px);overflow:auto;border:1px solid rgba(255,255,255,.12);background:rgba(10,14,24,.96);backdrop-filter:blur(18px);border-radius:22px;padding:1rem;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.22s ease}.nav_header_menu.active,.nav_header_menu.mmactive{transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}.header_list{display:grid!important;gap:.5rem;padding:0;margin:0}.header_list li{list-style:none}.header_list a{display:flex;padding:1rem;border-radius:16px;background:rgba(255,255,255,.055);color:inherit;text-decoration:none}.navbar_usermenu{gap:.45rem}.navbar_usermenu .pay_button span,.navbar_usermenu button:not(.language) span{display:none}.global-container,.container-fluid{padding-left:.5rem!important;padding-right:.5rem!important}.row{margin-left:0!important;margin-right:0!important}.card{border-radius:18px!important}.table-responsive,table{max-width:100%;overflow:auto}.online{display:none!important}}
@media (max-width: 560px){.logo-text strong{font-size:1rem}.youhub-brand-copy{max-width:120px}.navbar_usermenu{margin-left:auto}.search_players{display:none!important}}

/* YouHub click fix */
.yh-buy,
.yh-store-tabs button,
.yh-toolbar a,
.yh-pill {
  pointer-events: auto;
  position: relative;
  z-index: 5;
}

.yh-product {
  position: relative;
}

@media (max-width: 760px) {
  .yh-store-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.nav_header_menu.mmactive {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}@media (max-width: 1079px) {
  .nav_header_menu.no_scroll.mmactive,
  .nav_header_menu.mmactive {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}
/* YouHub mobile fixes for header/pay modal */
/* YouHub mobile fixes for header, balance modal and store */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 760px) {
  .global-container,
  .container-fluid,
  .navbar,
  .navbar_menu_left,
  .navbar_usermenu,
  .row {
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  .navbar {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: .65rem;
    padding: .6rem .75rem !important;
  }

  .navbar_menu_left {
    grid-column: 1 / -1;
  }

  .navbar_usermenu {
    display: none !important;
  }

  .navbar_usermenu > *,
  .navbar_usermenu button,
  .navbar_usermenu a,
  .pay_button {
    min-width: 0 !important;
  }

  .popup_modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .popup_modal_content {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  #popupPay .popup_modal_content {
    background:
      radial-gradient(circle at top left, rgba(153, 83, 255, .22), transparent 38%),
      rgba(11, 17, 27, .98) !important;
    border: 1px solid rgba(255, 255, 255, .1);
  }

  .popup_modal_head {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    gap: .7rem;
  }

  #pay.lk_window,
  #popupPay .popup_balance_content {
    width: 100% !important;
    min-width: 0 !important;
  }

  #popupPay .popup_balance_content {
    max-height: calc(92dvh - 74px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 0 !important;
    gap: .85rem !important;
  }

  #popupPay .popub_balance_first,
  #popupPay .popub_balance_second,
  #popupPay .popup_balance_second_flex,
  #popupPay .popup_column,
  #popupPay .inputs-inline,
  #popupPay .popup_promo_block {
    width: 100% !important;
    min-width: 0 !important;
  }

  #popupPay .popup_promo_block {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #popupPay .popup_pay_area {
    grid-template-columns: 1fr !important;
  }

  #popupPay .popup_gateways-label {
    height: 72px !important;
  }

  #popupPay .popup_pay_info {
    padding: .85rem !important;
  }

  #popupPay .preset_buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem !important;
  }

  #popupPay .preset_buttons button,
  #popupPay .delete-amount {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    border-radius: 14px !important;
  }

  #popupPay .number {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 44px 1fr 44px;
  }

  #popupPay .number input {
    min-width: 0 !important;
    width: 100% !important;
  }

  #popupPay .popup_promo_area {
    display: grid !important;
    grid-template-columns: 1fr 48px;
    width: 100% !important;
  }

  #popupPay .button-pay {
    min-height: 52px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 420px) {
  #popupPay .preset_buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .navbar_usermenu {
    display: none !important;
  }
}

.yh-stat-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  margin: 0 0 1rem;
}

@media (max-width: 1180px) {
  .yh-stat-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.yh-stat-tabs a {
  display: grid;
  gap: .25rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: rgba(255,255,255,.045);
  color: #fff;
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
  min-width: 0;
}

.yh-stat-tabs a:hover,
.yh-stat-tabs a.is-active {
  border-color: rgba(164,90,255,.55);
  background: linear-gradient(135deg, rgba(164,90,255,.18), rgba(82,227,163,.06));
}

.yh-stat-tabs a:hover {
  transform: translateY(-1px);
}

.yh-stat-tabs span {
  width: fit-content;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: rgba(82,227,163,.13);
  color: #52e3a3;
  font-weight: 950;
  font-size: .78rem;
}

.yh-stat-tabs b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yh-stat-tabs em {
  color: rgba(235,239,247,.62);
  font-style: normal;
  font-weight: 800;
  font-size: .82rem;
}

@media (max-width: 680px) {
  .yh-stat-tabs {
    display: flex;
    overflow-x: auto;
    gap: .55rem;
    padding-bottom: .15rem;
    scroll-snap-type: x mandatory;
  }

  .yh-stat-tabs a {
    min-width: 76%;
    padding: .9rem;
    scroll-snap-align: start;
  }
}