/* NavBar Component Lock v1
   Dedicated navbar ownership layer. Loaded after page skins so page-level CSS cannot
   accidentally recolor or resize the global header. */

:root{
  --navbar-rail-max: 1600px;
  --site-content-max-width: var(--navbar-rail-max);
  --site-content-gutter: 0px;
  --site-panel-content-padding: 20px;
  --navbar-edge-glow: rgba(122, 28, 28, .54);
  --navbar-purple: rgba(80, 12, 16, .34);
  --navbar-purple-strong: rgba(122, 28, 28, .34);
  --navbar-blue: rgba(32, 62, 112, .22);
}

/* Shared page-frame contract. These selectors intentionally work through
   module mount roots: History, Tournaments, and other pages render their
   actual shell after layout.js has already inserted the global chrome. */
body.has-site-navbar:not(.stream-overlay-mode) :is(.site-shell,.page-shell,.page-wrap,.dbd-page-shell,.public-seo-shell,.player-hub-shell,.tournament-page){
  box-sizing:border-box !important;
  width:min(var(--site-content-max-width), calc(100vw - (var(--site-content-gutter) * 2))) !important;
  max-width:var(--site-content-max-width) !important;
  margin-inline:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

body.has-site-navbar:not(.stream-overlay-mode) :is(.panel-card,.card,.section-card) > :is(.panel-body,.body,.section-body){
  padding:var(--site-panel-content-padding) !important;
}

body.has-site-navbar:not(.stream-overlay-mode) .panel-card > :where(:not(.panel-head):not(.panel-body):not(.head):not(.body):not(script):not(style):not([data-panel-full-bleed])){
  padding-inline:var(--site-panel-content-padding);
}

body.has-site-navbar:not(.stream-overlay-mode) .panel-card > :where(:last-child:not(.panel-head):not(.panel-body):not(.head):not(.body):not([data-panel-full-bleed])){
  padding-bottom:var(--site-panel-content-padding);
}

@media (max-width:640px){
  :root{--site-content-gutter:9px;--site-panel-content-padding:14px;}
}

body:not(.stream-overlay-mode) > .site-header-shell{
  box-sizing:border-box !important;
  width:min(var(--navbar-rail-max), 100vw) !important;
  max-width:var(--navbar-rail-max) !important;
  margin:8px auto 10px !important;
  padding:0 !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .topbar{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  min-height:78px !important;
  margin:0 !important;
  padding:12px 16px !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  border:1px solid rgba(151, 83, 255, .64) !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 4% 6%, rgba(166, 91, 255, .34), transparent 30%),
    radial-gradient(circle at 52% -22%, rgba(108, 64, 190, .20), transparent 44%),
    linear-gradient(90deg, rgba(36, 20, 77, .96), rgba(12, 18, 35, .96) 48%, rgba(7, 12, 25, .98)) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.40),
    0 0 30px rgba(135, 77, 255, .20),
    inset 0 1px 0 rgba(255,255,255,.11) !important;
  backdrop-filter:blur(12px) !important;
  position:relative !important;
  isolation:isolate !important;
}

/* Navbar fog is rendered by the shared .site-nav-fog layer injected by layout.js.
   Keep the component lock from flattening that absolute-positioned layer. */
body:not(.stream-overlay-mode) > .site-header-shell .topbar > *:not(.site-nav-fog){
  position:relative !important;
  z-index:2 !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .topbar > .site-nav-fog{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  border-radius:inherit !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .site-branding{
  min-width:250px !important;
  height:58px !important;
  padding:8px 12px !important;
  border:1px solid rgba(255,255,255,.085) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), rgba(20, 13, 42, .72) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .site-branding:hover{
  border-color:rgba(185, 132, 255, .42) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.026)), rgba(27, 16, 58, .86) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .site-logo-shell{
  width:44px !important;
  height:44px !important;
  border:1px solid rgba(180, 119, 255, .60) !important;
  border-radius:14px !important;
  background:
    radial-gradient(circle at 32% 20%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(145deg, rgba(155,84,255,.56), rgba(57,32,119,.84)) !important;
  color:#f4e9ff !important;
  box-shadow:0 0 22px rgba(154, 87, 255, .44), inset 0 0 20px rgba(255,255,255,.08) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .site-title{
  color:#fff7ee !important;
  font-weight:900 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .site-subtitle{
  color:#c784ff !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .page-nav{
  flex:1 1 auto !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
  padding:0 10px !important;
  overflow:visible !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:10px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), rgba(9, 12, 24, .78) !important;
  color:rgba(235,230,255,.78) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 10px 22px rgba(0,0,0,.22) !important;
  position:relative !important;
  overflow:visible !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link:hover,
body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link:focus-visible,
body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link.active{
  border-color:rgba(182, 118, 255, .72) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(215, 109, 255, .34), transparent 52%),
    linear-gradient(180deg, rgba(138, 72, 245, .40), rgba(39, 24, 85, .70)) !important;
  color:#fff !important;
  box-shadow:0 0 24px rgba(146, 87, 255, .36), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-icon{
  margin:0 !important;
  font-size:16px !important;
  line-height:1 !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link .nav-label-text{
  position:absolute !important;
  left:50% !important;
  top:calc(100% + 8px) !important;
  width:max-content !important;
  max-width:220px !important;
  padding:6px 9px !important;
  border:1px solid rgba(168, 100, 255, .42) !important;
  border-radius:999px !important;
  background:rgba(13, 10, 26, .97) !important;
  color:#f6edff !important;
  box-shadow:0 16px 34px rgba(0,0,0,.48), 0 0 18px rgba(139, 83, 255, .22) !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  opacity:0 !important;
  transform:translate(-50%, -4px) !important;
  pointer-events:none !important;
  transition:opacity .15s ease, transform .15s ease !important;
  z-index:40 !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link:hover .nav-label-text,
body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link:focus-visible .nav-label-text{
  opacity:1 !important;
  transform:translate(-50%, 0) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .topbar-actions{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}


body:not(.stream-overlay-mode) > .site-header-shell .mini-profile-banner{
  display:none !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .mini-profile{
  min-width:220px !important;
  height:52px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:13px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)), rgba(5, 9, 20, .74) !important;
  color:#fff7ee !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .sidebar-toggle,
body:not(.stream-overlay-mode) > .site-header-shell .logout-link{
  min-height:42px !important;
  padding:0 14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), rgba(8, 11, 22, .82) !important;
  color:#fff7ee !important;
  font-weight:900 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .mini-profile:hover,
body:not(.stream-overlay-mode) > .site-header-shell .sidebar-toggle:hover,
body:not(.stream-overlay-mode) > .site-header-shell .logout-link:hover{
  border-color:rgba(177, 111, 255, .48) !important;
  background:linear-gradient(180deg, rgba(135, 72, 245, .22), rgba(255,255,255,.018)), rgba(8, 11, 22, .90) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .site-update-ticker{
  margin-top:8px !important;
  border:1px solid rgba(122, 28, 28, .36) !important;
  border-radius:14px !important;
  background:linear-gradient(90deg, rgba(20, 13, 42, .90), rgba(8, 11, 22, .92)) !important;
  box-shadow:0 14px 38px rgba(0,0,0,.22) !important;
}

@media (max-width:1180px){
  body:not(.stream-overlay-mode) > .site-header-shell .topbar{flex-wrap:wrap !important;}
  body:not(.stream-overlay-mode) > .site-header-shell .site-branding{flex:1 1 260px !important;}
  body:not(.stream-overlay-mode) > .site-header-shell .page-nav{order:3 !important; flex-basis:100% !important;}
}

@media (max-width:640px){
  body:not(.stream-overlay-mode) > .site-header-shell{width:min(100% - 18px, var(--navbar-rail-max)) !important;}
  body:not(.stream-overlay-mode) > .site-header-shell .site-branding,
  body:not(.stream-overlay-mode) > .site-header-shell .mini-profile{min-width:0 !important; width:100% !important;}
  body:not(.stream-overlay-mode) > .site-header-shell .topbar-actions{width:100% !important; justify-content:space-between !important; flex-wrap:wrap !important;}
}

/* ── Fog Neutralization Hotfix v3.5.3 ─────────────────────────────
   Return the global navbar lock to default Fog instead of purple test chrome.
*/
:root{
  --navbar-edge-glow: rgba(82,102,122,.46) !important;
  --navbar-purple: rgba(15,24,34,.42) !important;
  --navbar-purple-strong: rgba(32,48,64,.34) !important;
  --navbar-blue: rgba(32,62,112,.18) !important;
}
body:not(.stream-overlay-mode) > .site-header-shell .topbar{
  border-color:rgba(82,102,122,.44) !important;
  background:
    radial-gradient(circle at 4% 6%, rgba(74,94,112,.20), transparent 30%),
    radial-gradient(circle at 52% -22%, rgba(52,74,92,.16), transparent 44%),
    linear-gradient(90deg, rgba(10,18,26,.96), rgba(9,14,24,.96) 48%, rgba(5,8,15,.98)) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.40),
    0 0 24px rgba(52,74,92,.14),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}
body:not(.stream-overlay-mode) > .site-header-shell .site-branding{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), rgba(7,12,18,.76) !important;
}
body:not(.stream-overlay-mode) > .site-header-shell .site-branding:hover{
  border-color:rgba(192,162,74,.38) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.024)), rgba(10,16,24,.86) !important;
}
body:not(.stream-overlay-mode) > .site-header-shell .site-logo-shell{
  border-color:rgba(192,162,74,.58) !important;
  background:
    radial-gradient(circle at 32% 20%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(145deg, rgba(192,162,74,.52), rgba(83,66,28,.80)) !important;
  color:#fff6dd !important;
  box-shadow:0 0 20px rgba(192,162,74,.30), inset 0 0 18px rgba(255,255,255,.08) !important;
}
body:not(.stream-overlay-mode) > .site-header-shell .site-subtitle{
  color:#cdb36a !important;
}
body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link:hover,
body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link:focus-visible,
body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link.active{
  border-color:rgba(192,162,74,.58) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(192,162,74,.24), transparent 52%),
    linear-gradient(180deg, rgba(192,162,74,.22), rgba(63,52,27,.46)) !important;
  box-shadow:0 0 22px rgba(192,162,74,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link .nav-label-text{
  border-color:rgba(192,162,74,.34) !important;
  background:rgba(9,10,14,.97) !important;
  color:#fff6dd !important;
  box-shadow:0 16px 34px rgba(0,0,0,.48), 0 0 18px rgba(192,162,74,.14) !important;
}

/* ── Fog No-Hue Navbar Override ───────────────────────────────── */
:root{
  --navbar-edge-glow:rgba(86,99,112,.42) !important;
  --navbar-purple:rgba(255,255,255,.025) !important;
  --navbar-purple-strong:rgba(255,255,255,.045) !important;
  --navbar-blue:rgba(255,255,255,.025) !important;
}
body:not(.stream-overlay-mode) > .site-header-shell .topbar{
  border-color:rgba(86,99,112,.42) !important;
  background:linear-gradient(90deg, rgba(8,12,18,.96), rgba(10,15,22,.96) 48%, rgba(5,8,12,.98)) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body:not(.stream-overlay-mode) > .site-header-shell .site-branding,
body:not(.stream-overlay-mode) > .site-header-shell .site-branding:hover{
  border-color:rgba(255,255,255,.09) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), rgba(6,9,14,.72) !important;
}
body:not(.stream-overlay-mode) > .site-header-shell .site-logo-shell{
  border-color:rgba(192,162,74,.55) !important;
  background:linear-gradient(145deg, rgba(192,162,74,.52), rgba(74,62,34,.82)) !important;
  color:#fff7df !important;
  box-shadow:0 0 18px rgba(192,162,74,.24), inset 0 0 18px rgba(255,255,255,.07) !important;
}
body:not(.stream-overlay-mode) > .site-header-shell .site-subtitle{
  color:#c0a24a !important;
}