/* V24 - final global menu lock + account panel themed background
   Keeps menu position equal across index/ranking/login/account-panel and all pages. */

:root{
  --roi-menu-width: 1460px;
  --roi-menu-height: 80px;
  --roi-menu-bg: rgba(3,8,15,.94);
  --roi-menu-line: rgba(196,145,45,.16);
  --roi-menu-gold: #ffb321;
}

html body .header,
html body .header.inner,
html body .header.header-main{
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

html body .header.inner,
html body.account-v5-body .header.inner,
html body.account-v6-body .header.inner,
html body.account-v7-body .header.inner,
html body.account-v9-body .header.inner,
html body.account-v10-body .header.inner,
html body.account-v11-body .header.inner{
  height:var(--roi-menu-height)!important;
  min-height:var(--roi-menu-height)!important;
}

html body .header .nav,
html body .header.inner .nav,
html body .header.header-main .nav,
html body.account-v5-body .header.inner .nav,
html body.account-v6-body .header.inner .nav,
html body.account-v7-body .header.inner .nav,
html body.account-v9-body .header.inner .nav,
html body.account-v10-body .header.inner .nav,
html body.account-v11-body .header.inner .nav{
  height:var(--roi-menu-height)!important;
  min-height:var(--roi-menu-height)!important;
  width:100%!important;
  padding:0!important;
  margin:0!important;
  background:var(--roi-menu-bg)!important;
  border-bottom:1px solid var(--roi-menu-line)!important;
  box-shadow:none!important;
  position:relative!important;
  z-index:80!important;
}

html body .header .nav .content-area,
html body .header.inner .nav .content-area,
html body .header.header-main .nav .content-area,
html body.account-v5-body .header.inner .nav .content-area,
html body.account-v6-body .header.inner .nav .content-area,
html body.account-v7-body .header.inner .nav .content-area,
html body.account-v9-body .header.inner .nav .content-area,
html body.account-v10-body .header.inner .nav .content-area,
html body.account-v11-body .header.inner .nav .content-area{
  width:calc(100% - 80px)!important;
  max-width:var(--roi-menu-width)!important;
  min-width:0!important;
  height:var(--roi-menu-height)!important;
  min-height:var(--roi-menu-height)!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

html body .nav__logo,
html body.account-v5-body .header.inner .nav__logo,
html body.account-v6-body .header.inner .nav__logo,
html body.account-v7-body .header.inner .nav__logo,
html body.account-v9-body .header.inner .nav__logo,
html body.account-v10-body .header.inner .nav__logo,
html body.account-v11-body .header.inner .nav__logo{
  width:74px!important;
  min-width:74px!important;
  flex:0 0 74px!important;
  height:var(--roi-menu-height)!important;
  margin:0 26px 0 0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

html body .nav__logo img,
html body.account-v5-body .header.inner .nav__logo img,
html body.account-v6-body .header.inner .nav__logo img,
html body.account-v7-body .header.inner .nav__logo img,
html body.account-v9-body .header.inner .nav__logo img,
html body.account-v10-body .header.inner .nav__logo img,
html body.account-v11-body .header.inner .nav__logo img{
  width:64px!important;
  max-width:64px!important;
  max-height:64px!important;
  height:auto!important;
  object-fit:contain!important;
  display:block!important;
}

html body .nav__links,
html body.account-v5-body .header.inner .nav__links,
html body.account-v6-body .header.inner .nav__links,
html body.account-v7-body .header.inner .nav__links,
html body.account-v9-body .header.inner .nav__links,
html body.account-v10-body .header.inner .nav__links,
html body.account-v11-body .header.inner .nav__links{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  height:var(--roi-menu-height)!important;
  min-height:var(--roi-menu-height)!important;
  margin:0!important;
  padding:0!important;
  gap:clamp(19px,1.55vw,36px)!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
}

html body .nav__links-item,
html body .nav__links-item:not(:last-child),
html body.account-v5-body .header.inner .nav__links-item,
html body.account-v5-body .header.inner .nav__links-item:not(:last-child),
html body.account-v6-body .header.inner .nav__links-item,
html body.account-v6-body .header.inner .nav__links-item:not(:last-child),
html body.account-v7-body .header.inner .nav__links-item,
html body.account-v7-body .header.inner .nav__links-item:not(:last-child),
html body.account-v9-body .header.inner .nav__links-item,
html body.account-v9-body .header.inner .nav__links-item:not(:last-child),
html body.account-v10-body .header.inner .nav__links-item,
html body.account-v10-body .header.inner .nav__links-item:not(:last-child),
html body.account-v11-body .header.inner .nav__links-item,
html body.account-v11-body .header.inner .nav__links-item:not(:last-child){
  width:auto!important;
  height:var(--roi-menu-height)!important;
  min-height:var(--roi-menu-height)!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  position:relative!important;
  white-space:nowrap!important;
}

html body .nav__links-item a,
html body.account-v5-body .header.inner .nav__links-item a,
html body.account-v6-body .header.inner .nav__links-item a,
html body.account-v7-body .header.inner .nav__links-item a,
html body.account-v9-body .header.inner .nav__links-item a,
html body.account-v10-body .header.inner .nav__links-item a,
html body.account-v11-body .header.inner .nav__links-item a{
  height:var(--roi-menu-height)!important;
  min-height:var(--roi-menu-height)!important;
  line-height:var(--roi-menu-height)!important;
  padding:0 2px!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  color:#efe8dc!important;
  transform:none!important;
  transition:color .22s ease,text-shadow .22s ease!important;
}

html body .nav__links-item::after,
html body.account-v5-body .header.inner .nav__links-item::after,
html body.account-v6-body .header.inner .nav__links-item::after,
html body.account-v7-body .header.inner .nav__links-item::after,
html body.account-v9-body .header.inner .nav__links-item::after,
html body.account-v10-body .header.inner .nav__links-item::after,
html body.account-v11-body .header.inner .nav__links-item::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:16px!important;
  transform:translateX(-50%)!important;
  width:0!important;
  min-width:0!important;
  max-width:70px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(255,169,0,0),rgba(255,191,72,.98),rgba(255,169,0,0))!important;
  box-shadow:0 0 16px rgba(255,175,32,.42)!important;
  opacity:0!important;
  transition:width .22s ease,opacity .22s ease!important;
  pointer-events:none!important;
}

html body .nav__links-item:hover a,
html body .nav__links-item.active a{
  color:var(--roi-menu-gold)!important;
  text-shadow:0 0 14px rgba(255,176,51,.30)!important;
}

html body .nav__links-item:hover::after,
html body .nav__links-item.active::after{
  width:calc(100% - 8px)!important;
  min-width:42px!important;
  opacity:1!important;
}

html body .nav__langs,
html body.account-v5-body .header.inner .nav__langs,
html body.account-v6-body .header.inner .nav__langs,
html body.account-v7-body .header.inner .nav__langs,
html body.account-v9-body .header.inner .nav__langs,
html body.account-v10-body .header.inner .nav__langs,
html body.account-v11-body .header.inner .nav__langs{
  flex:0 0 auto!important;
  margin-left:auto!important;
  margin-right:16px!important;
  height:var(--roi-menu-height)!important;
  min-height:var(--roi-menu-height)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

html body .nav__langs-current-name{
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

html body .nav .button,
html body .nav a.button,
html body.account-v5-body .header.inner .nav .button,
html body.account-v5-body .header.inner .nav a.button,
html body.account-v6-body .header.inner .nav .button,
html body.account-v6-body .header.inner .nav a.button,
html body.account-v7-body .header.inner .nav .button,
html body.account-v7-body .header.inner .nav a.button,
html body.account-v9-body .header.inner .nav .button,
html body.account-v9-body .header.inner .nav a.button,
html body.account-v10-body .header.inner .nav .button,
html body.account-v10-body .header.inner .nav a.button,
html body.account-v11-body .header.inner .nav .button,
html body.account-v11-body .header.inner .nav a.button{
  width:auto!important;
  min-width:144px!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0 22px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  border-radius:999px!important;
}

html body .nav .button + .button,
html body .nav .nav-login-btn + .button,
html body.account-v5-body .header.inner .nav .button + .button,
html body.account-v5-body .header.inner .nav .nav-login-btn + .button{
  margin-left:16px!important;
}

html body .nav .button span,
html body.account-v5-body .header.inner .nav .button span{
  white-space:nowrap!important;
  letter-spacing:.14em!important;
}

html body .nav__open-links{
  margin-left:14px!important;
  flex:0 0 auto!important;
}

/* Panel background theme */
html body.account-v5-body,
html body.account-v6-body,
html body.account-v7-body,
html body.account-v9-body,
html body.account-v10-body,
html body.account-v11-body{
  background-color:#05080e!important;
  background-image:
    linear-gradient(180deg,rgba(3,7,12,.64) 0%,rgba(3,7,12,.84) 28%,rgba(3,7,12,.94) 100%),
    radial-gradient(circle at 48% 18%,rgba(72,130,160,.18),transparent 42%),
    url('../images/account-panel-bg-v24.jpg')!important;
  background-size:cover,cover,cover!important;
  background-position:center top,center top,center top!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}

html body.account-v5-body .account-wrapper{
  position:relative!important;
  isolation:isolate!important;
  background:linear-gradient(180deg,rgba(4,8,14,.40),rgba(4,8,14,.70))!important;
}

html body.account-v5-body .account-wrapper::before{
  content:""!important;
  position:fixed!important;
  inset:80px 0 0 0!important;
  pointer-events:none!important;
  z-index:-1!important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.16) 36%,rgba(0,0,0,.52)),
    linear-gradient(180deg,rgba(3,7,12,.12),rgba(3,7,12,.74) 70%,rgba(3,7,12,.96)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 72px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 72px);
}

html body.account-v5-body .account-v5-sidebar,
html body.account-v5-body .account-v11-panel,
html body.account-v5-body .account-v5-card,
html body.account-v5-body .account-v11-topline{
  background:linear-gradient(180deg,rgba(7,12,20,.94),rgba(5,9,15,.92))!important;
  backdrop-filter:blur(3px)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.32)!important;
}

html body.account-v5-body .account-v11-char-card,
html body.account-v5-body .account-v10-char-card{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 16px 36px rgba(0,0,0,.28)!important;
}

@media (max-width:1440px){
  html body .header .nav .content-area,
  html body .header.inner .nav .content-area,
  html body .header.header-main .nav .content-area{
    width:calc(100% - 70px)!important;
  }
  html body .nav__logo{margin-right:22px!important;width:70px!important;min-width:70px!important;flex-basis:70px!important;}
  html body .nav__logo img{width:60px!important;max-width:60px!important;}
  html body .nav__links{gap:22px!important;}
  html body .nav__links-item a{font-size:13px!important;letter-spacing:.10em!important;}
  html body .nav .button{min-width:132px!important;padding:0 18px!important;}
}

@media (max-width:1240px){
  html body .nav__logo{margin-right:18px!important;}
  html body .nav__links{gap:16px!important;}
  html body .nav__links-item a{font-size:12px!important;letter-spacing:.08em!important;}
  html body .nav .button{min-width:118px!important;padding:0 14px!important;}
}

@media (max-width:1080px){
  html body .nav__links{display:none!important;}
  html body .nav__open-links{display:flex!important;}
  html body .nav__logo{margin-right:auto!important;}
}