/* ==========================================================
   ST4R Universe — Header Premium V4 FINAL
   Visual-only layer. Existing IDs, JS hooks, shop, Discord,
   points and navigation behavior remain untouched.
   ========================================================== */

:root{
  --st4r-head-bg: rgba(5,8,22,.955);
  --st4r-head-line: rgba(134,151,255,.15);
  --st4r-violet: #8c73ff;
  --st4r-blue: #57b7ff;
  --st4r-text: #f5f7ff;
  --st4r-muted: #929fc4;
}

@media (min-width:1051px){
  .v2-header{
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
    overflow:visible !important;
    background:
      radial-gradient(680px 120px at 50% -80px,rgba(111,88,255,.18),transparent 75%),
      radial-gradient(340px 100px at 92% 0%,rgba(61,157,255,.07),transparent 72%),
      linear-gradient(180deg,rgba(6,9,25,.985),var(--st4r-head-bg)) !important;
    border-bottom:1px solid var(--st4r-head-line) !important;
    box-shadow:0 18px 46px rgba(0,0,0,.25),inset 0 -1px 0 rgba(255,255,255,.015) !important;
    backdrop-filter:blur(30px) saturate(155%) !important;
    -webkit-backdrop-filter:blur(30px) saturate(155%) !important;
  }
  .v2-header::before{
    content:"" !important;
    position:absolute !important;
    inset:0 auto auto 0 !important;
    width:100% !important;
    height:1px !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,transparent 2%,rgba(122,100,255,.24) 23%,rgba(102,111,255,.50) 44%,rgba(68,178,255,.36) 62%,transparent 96%) !important;
    opacity:.9 !important;
  }
  .v2-header::after{
    content:"" !important;
    position:absolute !important;
    left:20% !important;
    right:20% !important;
    bottom:-1px !important;
    height:1px !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,transparent,rgba(112,88,255,.38),rgba(73,180,255,.28),transparent) !important;
    filter:drop-shadow(0 0 7px rgba(92,108,255,.18)) !important;
  }

  .v2-header .v2-nav.shell{
    width:100% !important;
    max-width:none !important;
    height:80px !important;
    min-height:80px !important;
    margin:0 !important;
    padding-inline:clamp(30px,2.45vw,50px) !important;
    display:grid !important;
    grid-template-columns:220px minmax(560px,710px) minmax(390px,1fr) !important;
    align-items:center !important;
    gap:clamp(18px,1.45vw,28px) !important;
  }

  /* Brand — cleaner hierarchy + subtle halo */
  .v2-header .brand{
    position:relative !important;
    height:54px !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:16px !important;
    text-decoration:none !important;
    isolation:isolate !important;
  }
  .v2-header .brand::before{
    content:"" !important;
    position:absolute !important;
    left:-12px !important;
    top:50% !important;
    width:78px !important;
    height:78px !important;
    transform:translateY(-50%) !important;
    border-radius:50% !important;
    background:radial-gradient(circle,rgba(91,94,255,.10),transparent 68%) !important;
    filter:blur(5px) !important;
    z-index:-1 !important;
    pointer-events:none !important;
  }
  .v2-header .brand img{
    width:46px !important;
    height:46px !important;
    border-radius:14px !important;
    object-fit:cover !important;
    border:1px solid rgba(159,176,255,.16) !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.018) inset,0 0 25px rgba(75,85,255,.15),0 10px 25px rgba(0,0,0,.28) !important;
    transition:transform .22s ease,box-shadow .22s ease !important;
  }
  .v2-header .brand:hover img{
    transform:translateY(-1px) scale(1.015) !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.035) inset,0 0 30px rgba(88,94,255,.22),0 12px 28px rgba(0,0,0,.30) !important;
  }
  .v2-header .brand span{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    line-height:1 !important;
  }
  .v2-header .brand strong{
    color:#f7f8ff !important;
    font-size:19px !important;
    font-weight:950 !important;
    letter-spacing:.145em !important;
    text-shadow:0 0 18px rgba(126,135,255,.11) !important;
  }
  .v2-header .brand small{
    margin-top:6px !important;
    color:#7d8db9 !important;
    font-size:7px !important;
    font-weight:900 !important;
    letter-spacing:.43em !important;
  }

  /* Main navigation — floating dock, active item is no longer a big box. */
  .v2-header .nav-links{
    justify-self:center !important;
    width:min(100%,710px) !important;
    max-width:710px !important;
    min-width:0 !important;
    height:48px !important;
    margin:0 !important;
    padding:4px 6px !important;
    display:grid !important;
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    align-items:center !important;
    gap:2px !important;
    border:1px solid rgba(137,154,242,.105) !important;
    border-radius:17px !important;
    background:linear-gradient(180deg,rgba(15,19,41,.58),rgba(8,11,29,.40)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.027),0 10px 30px rgba(0,0,0,.13),0 0 0 1px rgba(6,9,24,.28) !important;
    backdrop-filter:blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
  }
  .v2-header .nav-links a{
    position:relative !important;
    isolation:isolate !important;
    height:38px !important;
    min-width:0 !important;
    padding:0 7px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:11px !important;
    background:transparent !important;
    color:#929dbe !important;
    font-size:10.5px !important;
    font-weight:850 !important;
    letter-spacing:.012em !important;
    text-decoration:none !important;
    text-shadow:none !important;
    transition:color .18s ease,transform .18s ease !important;
  }
  .v2-header .nav-links a::before{
    content:"" !important;
    position:absolute !important;
    inset:3px 2px 4px !important;
    z-index:-1 !important;
    border-radius:9px !important;
    opacity:0 !important;
    background:linear-gradient(180deg,rgba(119,99,255,.085),rgba(73,130,255,.025)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.022) !important;
    transition:opacity .18s ease !important;
  }
  .v2-header .nav-links a::after{
    content:"" !important;
    position:absolute !important;
    left:31% !important;
    right:31% !important;
    bottom:1px !important;
    height:2px !important;
    border-radius:999px !important;
    opacity:0 !important;
    transform:scaleX(.45) !important;
    transform-origin:center !important;
    background:linear-gradient(90deg,var(--st4r-violet),var(--st4r-blue)) !important;
    box-shadow:0 0 9px rgba(103,101,255,.75),0 0 18px rgba(76,166,255,.24) !important;
    transition:opacity .18s ease,transform .2s ease !important;
  }
  .v2-header .nav-links a:hover{
    color:#dde4fb !important;
    transform:translateY(-1px) !important;
  }
  .v2-header .nav-links a:hover::before{opacity:.70 !important}
  .v2-header .nav-links a:hover::after{opacity:.38 !important;transform:scaleX(.78) !important}
  .v2-header .nav-links a.is-active{
    color:#fff !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
    text-shadow:0 0 16px rgba(169,177,255,.24) !important;
  }
  .v2-header .nav-links a.is-active::before{opacity:1 !important}
  .v2-header .nav-links a.is-active::after{opacity:1 !important;transform:scaleX(1) !important}

  /* Right-side controls — unified premium glass system. */
  .v2-header .nav-actions{
    justify-self:end !important;
    width:max-content !important;
    min-width:0 !important;
    height:50px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    white-space:nowrap !important;
  }
  .v2-header .live-pill,
  .v2-header .web-shop-header-purchases,
  .v2-header .nav-account-pro{
    position:relative !important;
    overflow:visible !important;
    height:46px !important;
    min-height:46px !important;
    border:1px solid rgba(141,159,245,.145) !important;
    border-radius:15px !important;
    background:linear-gradient(155deg,rgba(18,23,50,.84),rgba(8,11,29,.78)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 9px 24px rgba(0,0,0,.15) !important;
    backdrop-filter:blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
    transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease !important;
  }
  .v2-header .live-pill::before,
  .v2-header .web-shop-header-purchases::before,
  .v2-header .nav-account-pro::before{
    content:"" !important;
    position:absolute !important;
    left:12px !important;
    right:12px !important;
    top:0 !important;
    height:1px !important;
    border-radius:999px !important;
    opacity:.42 !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,transparent,rgba(187,198,255,.28),transparent) !important;
  }
  .v2-header .live-pill:hover,
  .v2-header .web-shop-header-purchases:hover,
  .v2-header .nav-account-pro:hover{
    transform:translateY(-1px) !important;
    border-color:rgba(129,111,255,.31) !important;
    background:linear-gradient(155deg,rgba(27,29,68,.91),rgba(9,13,33,.88)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 13px 30px rgba(0,0,0,.21),0 0 25px rgba(92,82,255,.055) !important;
  }

  .v2-header .live-pill{
    min-width:110px !important;
    padding:0 13px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    color:#99a6c7 !important;
    font-size:8.6px !important;
    font-weight:820 !important;
    letter-spacing:.012em !important;
    text-transform:none !important;
  }
  .v2-header .live-pill i{
    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;
    border-radius:50% !important;
    background:#67f0a7 !important;
    box-shadow:0 0 0 3px rgba(103,240,167,.055),0 0 14px rgba(103,240,167,.64) !important;
    animation:st4rMemberPulse 2.35s ease-in-out infinite !important;
  }
  .v2-header .live-pill b{
    margin-right:1px !important;
    color:#f7f9ff !important;
    font-size:11px !important;
    font-weight:950 !important;
    letter-spacing:0 !important;
  }

  .v2-header .web-shop-header-purchases{
    min-width:126px !important;
    width:auto !important;
    padding:0 12px 0 8px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    color:#dce2f8 !important;
  }
  .v2-header .web-shop-header-purchases.has-purchases{
    border-color:rgba(130,112,255,.225) !important;
  }
  .v2-header .web-shop-header-icon{
    position:relative !important;
    width:32px !important;
    height:32px !important;
    flex:0 0 32px !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(139,126,255,.13) !important;
    border-radius:10px !important;
    background:linear-gradient(145deg,rgba(118,98,255,.13),rgba(67,127,255,.045)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
  }
  .v2-header .web-shop-header-icon svg{
    width:15px !important;
    height:15px !important;
    stroke:#d8ddf9 !important;
  }
  .v2-header .web-shop-header-label{
    display:inline !important;
    color:#cbd2ed !important;
    font-size:7.4px !important;
    font-weight:950 !important;
    letter-spacing:.07em !important;
    white-space:nowrap !important;
  }
  .v2-header .web-shop-header-badge{
    top:-7px !important;
    right:-7px !important;
    min-width:18px !important;
    height:18px !important;
    padding:0 4px !important;
    display:grid !important;
    place-items:center !important;
    border:2px solid #0a0e25 !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#a76cff,#6878ff) !important;
    color:white !important;
    box-shadow:0 4px 11px rgba(80,61,206,.46),0 0 10px rgba(147,102,255,.18) !important;
    font-size:8px !important;
    font-weight:950 !important;
    line-height:1 !important;
  }
  .v2-header .web-shop-header-badge[hidden]{display:none !important}

  .v2-header .nav-account-pro{
    min-width:174px !important;
    max-width:196px !important;
    padding:4px 10px 4px 5px !important;
    gap:9px !important;
    cursor:pointer !important;
  }
  .v2-header .nav-account-pro .nav-profile-avatar{
    width:37px !important;
    height:37px !important;
    flex:0 0 37px !important;
    overflow:hidden !important;
    border:1px solid rgba(179,192,255,.10) !important;
    border-radius:11px !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.025) inset,0 7px 17px rgba(0,0,0,.24) !important;
  }
  .v2-header .nav-account-pro .nav-profile-meta{
    flex:1 1 auto !important;
    min-width:0 !important;
    line-height:1 !important;
  }
  .v2-header .nav-account-pro .nav-profile-meta strong{
    display:block !important;
    max-width:112px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    color:#f7f8ff !important;
    font-size:11.5px !important;
    font-weight:950 !important;
    letter-spacing:.005em !important;
  }
  .v2-header .nav-account-pro #navProfileSub{
    margin-top:5px !important;
    color:#8492b7 !important;
  }
  .v2-header .nav-account-pro .nav-points-value{
    color:#dce2ff !important;
    font-size:10.8px !important;
    font-weight:950 !important;
    text-shadow:0 0 12px rgba(124,130,255,.12) !important;
  }
  .v2-header .nav-account-pro .nav-points-unit{
    color:#7786ad !important;
    font-size:6.2px !important;
    font-weight:900 !important;
    letter-spacing:.14em !important;
  }
  .v2-header .nav-account-arrow{
    margin-left:1px !important;
    color:#7180aa !important;
    font-size:11px !important;
    transition:transform .18s ease,color .18s ease !important;
  }
  .v2-header .nav-account-pro:hover .nav-account-arrow{
    color:#c0c7e9 !important;
    transform:translateY(1px) !important;
  }
  .v2-header .menu-btn{display:none !important}
}

@keyframes st4rMemberPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.90);opacity:.72}
}

/* 1451–1699: desktop / Windows scaling */
@media (min-width:1451px) and (max-width:1699px){
  .v2-header .v2-nav.shell{
    padding-inline:24px !important;
    grid-template-columns:190px minmax(540px,660px) minmax(368px,1fr) !important;
    gap:14px !important;
  }
  .v2-header .nav-links{max-width:660px !important}
  .v2-header .nav-links a{font-size:10px !important;padding-inline:4px !important}
  .v2-header .live-pill{min-width:100px !important;padding-inline:10px !important}
  .v2-header .web-shop-header-purchases{min-width:48px !important;width:48px !important;padding:5px !important}
  .v2-header .web-shop-header-label{display:none !important}
  .v2-header .nav-account-pro{min-width:158px !important;max-width:172px !important}
  .v2-header .nav-account-pro .nav-profile-meta strong{max-width:78px !important}
}

@media (min-width:1241px) and (max-width:1450px){
  .v2-header .v2-nav.shell{
    height:76px !important;
    min-height:76px !important;
    padding-inline:18px !important;
    grid-template-columns:170px minmax(500px,600px) minmax(328px,1fr) !important;
    gap:10px !important;
  }
  .v2-header .brand img{width:40px !important;height:40px !important}
  .v2-header .brand strong{font-size:17px !important}
  .v2-header .nav-links{height:46px !important;max-width:600px !important}
  .v2-header .nav-links a{height:36px !important;font-size:9.5px !important;padding-inline:2px !important}
  .v2-header .live-pill{min-width:0 !important;padding:0 10px !important;font-size:0 !important}
  .v2-header .live-pill b{font-size:10px !important}
  .v2-header .web-shop-header-purchases{min-width:44px !important;width:44px !important;padding:5px !important}
  .v2-header .web-shop-header-label{display:none !important}
  .v2-header .nav-account-pro{min-width:145px !important;max-width:154px !important;gap:6px !important}
  .v2-header .nav-account-pro .nav-profile-meta strong{max-width:65px !important;font-size:10.5px !important}
  .v2-header .nav-account-arrow{display:none !important}
}

/* 1051–1240: retain the site's hamburger behavior, polish only. */
@media (min-width:1051px) and (max-width:1240px){
  .v2-header .v2-nav.shell{
    height:72px !important;
    min-height:72px !important;
    padding-inline:18px !important;
    display:flex !important;
    gap:10px !important;
  }
  .v2-header .brand{flex:0 0 auto !important}
  .v2-header .nav-links{display:none !important}
  .v2-header .nav-links.open{
    display:flex !important;
    position:absolute !important;
    top:72px !important;
    left:18px !important;
    right:18px !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    padding:12px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
    border:1px solid rgba(129,146,240,.16) !important;
    border-radius:18px !important;
    background:rgba(7,10,26,.975) !important;
    box-shadow:0 22px 50px rgba(0,0,0,.40) !important;
    backdrop-filter:blur(24px) !important;
  }
  .v2-header .nav-links.open a{
    height:43px !important;
    justify-content:flex-start !important;
    padding:0 14px !important;
    font-size:11px !important;
  }
  .v2-header .nav-actions{margin-left:auto !important}
  .v2-header .live-pill{display:none !important}
  .v2-header .web-shop-header-purchases{width:44px !important;min-width:44px !important;padding:5px !important}
  .v2-header .web-shop-header-label{display:none !important}
  .v2-header .nav-account-pro{min-width:44px !important;width:44px !important;max-width:44px !important;padding:4px !important}
  .v2-header .nav-account-pro .nav-profile-meta,.v2-header .nav-account-arrow{display:none !important}
  .v2-header .nav-account-pro .nav-profile-avatar{margin:auto !important}
  .v2-header .menu-btn{display:inline-flex !important}
}

/* Mobile: maintain existing navigation mechanics and make controls visually consistent. */
@media (max-width:680px){
  .v2-header{
    background:rgba(6,9,24,.96) !important;
    border-bottom:1px solid rgba(132,151,239,.13) !important;
    backdrop-filter:blur(21px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(21px) saturate(140%) !important;
  }
  .v2-header .brand img{
    box-shadow:0 0 0 1px rgba(150,166,255,.12),0 8px 22px rgba(0,0,0,.25) !important;
  }
  .v2-header .nav-profile-chip,
  .v2-header .menu-btn,
  .v2-header .web-shop-header-purchases{
    border-color:rgba(139,158,245,.14) !important;
    background:linear-gradient(145deg,rgba(18,22,47,.86),rgba(8,11,27,.82)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 22px rgba(0,0,0,.14) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .v2-header *, .v2-header *::before, .v2-header *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}