/* Drataria Gaming — clean navigation shell.
 * Desktop: horizontal nav at >= 901px. Mobile/tablet: hamburger at <= 900px.
 * No stretched raster buttons. Decorative imagery is isolated and aspect-ratio safe.
 */

body .rg-context-bar{display:none!important}

body header.rg-site-header{
  position:sticky!important;
  overflow:visible!important;
  isolation:isolate!important;
  background:#07141b!important;
  background-image:
    linear-gradient(90deg,#061117 0%,#0a2029 48%,#061117 100%)!important;
  border-bottom:1px solid rgba(212,175,55,.34)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.34)!important;
}

/* Background treatment begins after the logo and fills the remaining bar without stretching artwork. */
body header.rg-site-header::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:clamp(245px,14vw,285px)!important;
  right:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:
    radial-gradient(circle at 72% 45%,rgba(46,184,184,.15),transparent 34%),
    linear-gradient(90deg,rgba(7,20,27,.08),rgba(12,40,49,.52) 52%,rgba(5,16,22,.76)),
    url('/assets/drataria/geometric_pattern_overlay_2048.png')!important;
  background-repeat:no-repeat,no-repeat,repeat!important;
  background-size:100% 100%,100% 100%,560px auto!important;
  background-position:center,center,center!important;
  opacity:.70!important;
}

/* Dedicated right-side dragon ornament. It never shares the logo's space and never gets cropped. */
body header.rg-site-header::after{
  content:""!important;
  position:absolute!important;
  top:7px!important;
  right:10px!important;
  bottom:7px!important;
  width:118px!important;
  z-index:1!important;
  pointer-events:none!important;
  background:url('/assets/drataria/dragon_teal_right_820x708.png') no-repeat right center/contain!important;
  opacity:.72!important;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.45))!important;
}

body header.rg-site-header .rg-topbar{
  position:relative!important;
  z-index:3!important;
  overflow:visible!important;
}
body header.rg-site-header .rg-brand{
  position:relative!important;
  z-index:4!important;
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
}
body header.rg-site-header .dt-nav-logo{
  display:block!important;
  width:clamp(225px,14vw,272px)!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:left center!important;
  transform:translateX(-10px)!important;
  filter:drop-shadow(0 7px 15px rgba(0,0,0,.48))!important;
}

/* No giant outer nav pill. */
body header.rg-site-header .rg-nav,
body header.rg-site-header .top-links{
  position:relative!important;
  z-index:4!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* Compact professional tabs: CSS, not compressed 800x240 artwork. */
body header.rg-site-header :is(.rg-nav-link,.dropdown-toggle,.top-link){
  position:relative!important;
  border:1px solid rgba(46,184,184,.24)!important;
  border-radius:8px!important;
  background:
    linear-gradient(180deg,rgba(18,52,62,.74),rgba(5,20,27,.88))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 3px 10px rgba(0,0,0,.16)!important;
  color:#edf3f3!important;
  text-shadow:0 1px 3px rgba(0,0,0,.72)!important;
  transition:border-color .14s ease,background .14s ease,transform .14s ease,color .14s ease!important;
}
body header.rg-site-header :is(.rg-nav-link,.dropdown-toggle,.top-link):is(:hover,:focus-visible){
  border-color:rgba(212,175,55,.52)!important;
  background:linear-gradient(180deg,rgba(25,72,82,.88),rgba(7,28,35,.94))!important;
  color:#f4e3a1!important;
  transform:translateY(-1px)!important;
}
body header.rg-site-header :is(.rg-nav-link,.dropdown-toggle,.top-link).active{
  border-color:rgba(212,175,55,.72)!important;
  background:
    linear-gradient(180deg,rgba(28,79,88,.94),rgba(7,31,38,.96))!important;
  color:#f4e3a1!important;
  box-shadow:inset 0 -2px 0 rgba(212,175,55,.56),0 4px 12px rgba(0,0,0,.22)!important;
}
body header.rg-site-header :is(.rg-account-trigger,.rg-signin-link){
  border:1px solid rgba(212,175,55,.34)!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,rgba(17,47,55,.88),rgba(5,19,25,.94))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 3px 10px rgba(0,0,0,.18)!important;
  color:#f4e3a1!important;
  text-shadow:0 1px 3px rgba(0,0,0,.72)!important;
}
body header.rg-site-header :is(.rg-account-trigger,.rg-signin-link):is(:hover,:focus-visible){
  border-color:rgba(212,175,55,.68)!important;
  background:linear-gradient(180deg,rgba(60,52,25,.86),rgba(20,29,26,.96))!important;
}

@media (min-width:901px){
  body header.rg-site-header .rg-topbar{
    width:calc(100% - 24px)!important;
    max-width:1920px!important;
    min-height:96px!important;
    margin:0 auto!important;
    padding:7px 118px 7px 0!important;
    gap:12px!important;
    flex-wrap:nowrap!important;
  }
  body header.rg-site-header .rg-menu-toggle,
  body header.rg-site-header .menu-toggle{display:none!important}

  body header.rg-site-header .rg-nav,
  body header.rg-site-header .top-links{
    display:flex!important;
    position:static!important;
    inset:auto!important;
    width:max-content!important;
    max-width:calc(100% - 300px)!important;
    max-height:none!important;
    overflow:visible!important;
    margin-left:auto!important;
    padding:0!important;
    flex:0 1 auto!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
  }
  body header.rg-site-header .rg-nav > .rg-nav-link,
  body header.rg-site-header .rg-nav .dropdown-toggle,
  body header.rg-site-header .top-links > .top-link,
  body header.rg-site-header .top-links .dropdown-toggle{
    width:auto!important;
    min-width:0!important;
    min-height:38px!important;
    padding:8px 12px!important;
    justify-content:center!important;
    white-space:nowrap!important;
    text-align:center!important;
    font-size:.69rem!important;
    line-height:1!important;
  }
  body header.rg-site-header .nav-dropdown,
  body header.rg-site-header .rg-nav-dropdown{
    width:auto!important;
    position:relative!important;
    display:block!important;
    flex:0 0 auto!important;
  }
  body header.rg-site-header .dropdown-menu,
  body header.rg-site-header .rg-dropdown-menu,
  body header.rg-site-header #communityDropdownWrap .dropdown-menu,
  body header.rg-site-header #supportDropdownWrap .rg-dropdown-menu,
  body header.rg-site-header #techDropdownWrap .rg-dropdown-menu{
    position:absolute!important;
    top:calc(100% + 9px)!important;
    left:0!important;
    right:auto!important;
    width:max-content!important;
    min-width:250px!important;
    max-width:min(360px,calc(100vw - 24px))!important;
    margin-top:0!important;
    padding:8px!important;
  }
  body header.rg-site-header #supportDropdownWrap .rg-dropdown-menu,
  body header.rg-site-header #techDropdownWrap .rg-dropdown-menu{
    left:auto!important;
    right:0!important;
  }
  body header.rg-site-header #navUserSlot,
  body header.rg-site-header .rg-account-slot,
  body header.rg-site-header .rg-account-menu,
  body header.rg-site-header .rg-account-trigger,
  body header.rg-site-header .rg-signin-link{
    width:auto!important;
    flex:0 0 auto!important;
  }
  body.rs-nav-open{overflow:auto!important;touch-action:auto!important}
}

@media (min-width:901px) and (max-width:1320px){
  body header.rg-site-header::after{width:72px!important;opacity:.50!important}
  body header.rg-site-header .rg-topbar{
    width:calc(100% - 18px)!important;
    min-height:86px!important;
    padding-right:70px!important;
    gap:6px!important;
  }
  body header.rg-site-header .dt-nav-logo{
    width:170px!important;
    transform:translateX(-6px)!important;
  }
  body header.rg-site-header .rg-nav,
  body header.rg-site-header .top-links{
    max-width:calc(100% - 180px)!important;
    gap:2px!important;
  }
  body header.rg-site-header .rg-nav > .rg-nav-link,
  body header.rg-site-header .rg-nav .dropdown-toggle,
  body header.rg-site-header .top-links > .top-link,
  body header.rg-site-header .top-links .dropdown-toggle{
    min-height:35px!important;
    padding:7px 7px!important;
    font-size:.60rem!important;
  }
  body header.rg-site-header :is(.rg-account-trigger,.rg-signin-link){
    min-height:35px!important;
    padding:6px 7px!important;
    font-size:.60rem!important;
  }
}

@media (max-width:900px){
  body header.rg-site-header::before{
    left:36%!important;
    background-size:100% 100%,100% 100%,360px auto!important;
    opacity:.52!important;
  }
  body header.rg-site-header::after{
    width:54px!important;
    top:8px!important;
    bottom:8px!important;
    right:58px!important;
    opacity:.48!important;
  }
  body header.rg-site-header .rg-topbar{
    min-height:74px!important;
    padding:8px max(12px,env(safe-area-inset-left)) 8px max(12px,env(safe-area-inset-right))!important;
  }
  body header.rg-site-header .dt-nav-logo{
    width:min(205px,56vw)!important;
    transform:none!important;
  }
  body header.rg-site-header .rg-menu-toggle,
  body header.rg-site-header .menu-toggle{
    display:inline-flex!important;
    margin-left:auto!important;
  }
  body header.rg-site-header .rg-nav,
  body header.rg-site-header .top-links{
    display:none!important;
    position:fixed!important;
    inset:74px 8px auto 8px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - 84px)!important;
    overflow-y:auto!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:6px!important;
    padding:10px!important;
    border:1px solid rgba(212,175,55,.24)!important;
    border-radius:12px!important;
    background:#07141b!important;
    box-shadow:0 18px 42px rgba(0,0,0,.48)!important;
  }
  body header.rg-site-header .rg-nav.open,
  body header.rg-site-header .top-links.open{display:flex!important}
  body header.rg-site-header .rg-nav > .rg-nav-link,
  body header.rg-site-header .rg-nav .dropdown-toggle,
  body header.rg-site-header .top-links > .top-link,
  body header.rg-site-header .top-links .dropdown-toggle,
  body header.rg-site-header :is(.rg-account-trigger,.rg-signin-link){
    width:100%!important;
    min-height:42px!important;
    justify-content:center!important;
  }
}

@media (max-width:420px){
  body header.rg-site-header .dt-nav-logo{width:min(170px,52vw)!important}
}