/* FEAR SQUAD PORTAL V3.12
   Reference-matched command-board frames, complete navigation and Reaper crest. */

:root{
  --fear-v312-steel:#6d797b;
  --fear-v312-steel-soft:rgba(142,157,159,.42);
  --fear-v312-gold:#efc457;
  --fear-v312-black:#030506;
  --fear-v312-frame:url('../img/ui-command-frame.svg');
  --fear-v312-head:url('../img/ui-command-header.svg');
  --fear-v312-metal:url('../img/ui-gunmetal-texture.svg');
}

body[data-fear-redesign="portal-v3"] header.nav,
body[data-fear-redesign="portal-v3"] header.nav *{box-sizing:border-box}

/* The Reaper lives only in the masthead row and can never intrude into the menu rail. */
body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell{
  position:relative!important;
  overflow:visible!important;
}
body[data-fear-redesign="portal-v3"] header.nav .brand.fear-header-badge-link{
  z-index:2!important;
  width:126px!important;
  min-width:126px!important;
  height:92px!important;
  padding:5px 10px!important;
  overflow:hidden!important;
  align-self:center!important;
  justify-self:start!important;
  filter:none!important;
}
body[data-fear-redesign="portal-v3"] header.nav .fear-header-badge-img{
  display:block!important;
  width:86px!important;
  max-width:86px!important;
  height:84px!important;
  max-height:84px!important;
  margin:0 auto!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:drop-shadow(0 7px 11px rgba(0,0,0,.9)) drop-shadow(0 0 7px rgba(240,196,88,.21))!important;
}
body[data-fear-redesign="portal-v3"] header.nav .fear-header-badge-link:hover .fear-header-badge-img{
  transform:scale(1.035)!important;
}
body[data-fear-redesign="portal-v3"] header.nav .fear-portal-platforms{position:relative;z-index:2}
body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-menu{
  position:relative!important;
  z-index:12!important;
  overflow:visible!important;
}

@media(min-width:901px){
  body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-menu{
    display:flex!important;
    align-items:stretch!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .nav-links{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    display:flex!important;
    align-items:stretch!important;
    overflow:visible!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .nav-links>a{
    flex:1 1 0!important;
    min-width:76px!important;
    max-width:126px!important;
    padding:0 8px!important;
    white-space:nowrap!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more{
    position:relative!important;
    z-index:30!important;
    flex:0 0 82px!important;
    width:82px!important;
    min-width:82px!important;
    overflow:visible!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-toggle{
    width:100%!important;
    min-width:0!important;
    padding:0 8px!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-menu{
    top:calc(100% + 4px)!important;
    right:-6px!important;
    z-index:10080!important;
    width:242px!important;
    max-height:min(70vh,520px)!important;
    padding:7px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    border:1px solid rgba(239,196,87,.56)!important;
    background:
      linear-gradient(135deg,rgba(255,255,255,.05),transparent 23%),
      linear-gradient(180deg,#202627 0,#0a0d0e 42%,#030505 100%)!important;
    box-shadow:inset 0 0 0 3px #020303,0 18px 38px rgba(0,0,0,.82),0 0 18px rgba(239,196,87,.09)!important;
    clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-menu>a{
    min-height:43px!important;
    padding:9px 12px!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .nav-right{
    position:relative!important;
    z-index:20!important;
    flex:0 0 auto!important;
    max-width:236px!important;
    overflow:visible!important;
  }
}

@media(min-width:901px) and (max-width:1100px){
  body[data-fear-redesign="portal-v3"] header.nav .nav-links>a{
    min-width:68px!important;
    padding-inline:5px!important;
    font-size:8px!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more{flex-basis:70px!important;width:70px!important;min-width:70px!important}
  body[data-fear-redesign="portal-v3"] header.nav .fear-user-copy{display:none!important}
  body[data-fear-redesign="portal-v3"] header.nav .nav-right{max-width:172px!important}
}

/* Fixed-size nine-slice armor. Corners keep their proportions at every panel height. */
.fear-portal-home{overflow:visible!important}
.fear-portal-panel{
  position:relative!important;
  isolation:isolate!important;
  min-width:0!important;
  max-width:100%!important;
  padding:7px!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  clip-path:none!important;
  box-shadow:0 6px 0 #010202,0 15px 28px rgba(0,0,0,.52)!important;
}
.fear-portal-panel::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
  border:14px solid transparent!important;
  border-image-source:var(--fear-v312-frame)!important;
  border-image-slice:64!important;
  border-image-width:14px!important;
  border-image-outset:0!important;
  border-image-repeat:stretch!important;
  background:none!important;
}
.fear-portal-panel::after{
  content:""!important;
  position:absolute!important;
  inset:7px!important;
  z-index:0!important;
  width:auto!important;
  height:auto!important;
  pointer-events:none!important;
  border:1px solid rgba(108,123,126,.54)!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.045),transparent 20%),
    linear-gradient(180deg,rgba(13,17,18,.97),rgba(2,4,5,.99)),
    var(--fear-v312-metal) center/320px 220px repeat!important;
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)!important;
  box-shadow:inset 0 0 0 2px #020303,inset 0 0 26px rgba(0,0,0,.72)!important;
}
.fear-portal-panel>*{position:relative!important;z-index:5!important;min-width:0;max-width:100%}

.fear-portal-panel-head{
  min-height:43px!important;
  margin:0!important;
  padding:0 18px!important;
  overflow:hidden!important;
  border:1px solid rgba(118,133,136,.58)!important;
  border-bottom-color:rgba(0,0,0,.94)!important;
  background:var(--fear-v312-head) 0 0/100% 100% no-repeat,#0b0e0f!important;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%,0 8px)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 -3px #020303,0 2px rgba(112,126,129,.24)!important;
}
.fear-portal-panel-head::before{
  content:""!important;
  position:absolute!important;
  inset:4px 6px 5px!important;
  z-index:0!important;
  pointer-events:none!important;
  border:1px solid rgba(255,255,255,.035)!important;
  background:linear-gradient(90deg,rgba(239,196,87,.075),transparent 19% 84%,rgba(255,255,255,.018))!important;
  box-shadow:inset 13px 0 13px -16px rgba(239,196,87,.8),inset -12px 0 12px -16px rgba(151,165,168,.8)!important;
}
.fear-portal-panel-head::after{
  content:""!important;
  position:absolute!important;
  left:18px!important;
  bottom:3px!important;
  width:88px!important;
  height:2px!important;
  background:linear-gradient(90deg,var(--fear-v312-gold),rgba(239,196,87,0))!important;
  box-shadow:0 0 8px rgba(239,196,87,.35)!important;
}
.fear-portal-panel-head>*{position:relative;z-index:2}

.fear-portal-shout-layout,.fear-portal-news-grid,.fear-portal-activity-list,
.fear-portal-forum-list,.fear-portal-featured-members,.fear-portal-progress,
.fear-portal-shop-feature,.fear-portal-poll,.fear-portal-telemetry-body{
  min-width:0!important;
  max-width:100%!important;
  border:1px solid rgba(74,87,89,.67)!important;
  border-top:0!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.024),transparent 23%),
    linear-gradient(180deg,rgba(5,8,9,.94),rgba(1,3,4,.99)),
    var(--fear-v312-metal) center/320px 220px repeat!important;
  box-shadow:inset 0 0 0 2px #020303,inset 0 0 26px rgba(0,0,0,.56)!important;
}
.fear-portal-panel img,.fear-portal-panel video,.fear-portal-panel svg{
  max-width:100%;
}
.fear-portal-news-art,.fear-portal-member-art,.fear-portal-shop-art,
.fear-portal-telemetry-card,.fear-portal-telemetry-detail{overflow:hidden}
.fear-portal-news-art img,.fear-portal-member-art img,.fear-portal-shop-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* The animated main logo keeps a separate framed stage below the navigation. */
.fear-portal-brand-stage{
  position:relative!important;
  isolation:isolate!important;
  padding:8px!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  clip-path:none!important;
}
.fear-portal-brand-stage::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:8!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
  border:15px solid transparent!important;
  border-image-source:var(--fear-v312-frame)!important;
  border-image-slice:64!important;
  border-image-width:15px!important;
  border-image-repeat:stretch!important;
  background:none!important;
}
.fear-portal-brand-stage::after{
  content:""!important;
  position:absolute!important;
  inset:8px!important;
  z-index:6!important;
  pointer-events:none!important;
  border:1px solid rgba(128,143,146,.48)!important;
  background:linear-gradient(90deg,rgba(213,166,59,.035),transparent 16% 84%,rgba(213,166,59,.035))!important;
  box-shadow:inset 0 0 0 3px #020303,inset 0 0 40px rgba(0,0,0,.74)!important;
}
.fear-portal-brand-stage video{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)!important;
}

/* Mobile menu: one reliable vertical list, including every FEAR destination. */
@media(max-width:900px){
  :root{--fear-portal-header-height:82px}
  html body[data-fear-redesign="portal-v3"]{padding-top:82px!important}
  body[data-fear-redesign="portal-v3"] header.nav.fear-portal-header,
  body.fear-portal-scrolled[data-fear-redesign="portal-v3"] header.nav.fear-portal-header{
    height:82px!important;
    overflow:visible!important;
    transform:none!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell{
    width:100%!important;
    max-width:none!important;
    height:82px!important;
    padding:0 17px!important;
    display:flex!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .brand.fear-header-badge-link{
    flex:0 0 78px!important;
    width:78px!important;
    min-width:78px!important;
    height:80px!important;
    margin:0!important;
    padding:4px!important;
    overflow:hidden!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .fear-header-badge-img{
    width:70px!important;
    max-width:70px!important;
    height:72px!important;
    max-height:72px!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .nav-toggle{
    position:relative!important;
    z-index:10070!important;
    flex:0 0 50px!important;
    width:50px!important;
    height:50px!important;
    margin-left:auto!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-menu,
  body[data-fear-redesign="portal-v3"] header.nav #fear-navigation{
    position:fixed!important;
    inset:82px 0 0!important;
    z-index:10060!important;
    width:100vw!important;
    max-width:100vw!important;
    height:calc(100dvh - 82px)!important;
    min-height:0!important;
    max-height:calc(100dvh - 82px)!important;
    margin:0!important;
    padding:14px 12px 34px!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
    clip-path:none!important;
    border:0!important;
    border-top:1px solid rgba(239,196,87,.48)!important;
    background:
      linear-gradient(90deg,rgba(104,118,120,.22),transparent 13px calc(100% - 13px),rgba(104,118,120,.22)),
      linear-gradient(180deg,#171c1e,#050707 74%),
      var(--fear-v312-metal) center/320px 220px repeat!important;
    box-shadow:inset 5px 0 #020303,inset -5px 0 #020303,inset 6px 0 rgba(111,125,128,.38),inset -6px 0 rgba(111,125,128,.38),0 18px 36px rgba(0,0,0,.78)!important;
    overscroll-behavior:contain;
  }
  body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-menu.is-open,
  body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-menu.open,
  body[data-fear-redesign="portal-v3"] header.nav #fear-navigation.is-open{
    display:flex!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .fear-mobile-welcome{order:-30!important;flex:0 0 auto!important}
  body[data-fear-redesign="portal-v3"] header.nav .fear-mobile-wallet{order:-29!important;flex:0 0 auto!important}
  body[data-fear-redesign="portal-v3"] header.nav .nav-links{
    order:0!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0 10px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    overflow:visible!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more,
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-menu{
    position:static!important;
    inset:auto!important;
    z-index:auto!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    display:contents!important;
    overflow:visible!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
    border:0!important;
    background:none!important;
    box-shadow:none!important;
    clip-path:none!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-toggle{display:none!important}
  body[data-fear-redesign="portal-v3"] header.nav .nav-links>a,
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-menu>a{
    position:relative!important;
    flex:none!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:58px!important;
    height:58px!important;
    margin:0!important;
    padding:0 17px!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    align-items:center!important;
    gap:13px!important;
    overflow:hidden!important;
    border:0!important;
    border-bottom:1px solid rgba(239,196,87,.16)!important;
    background:linear-gradient(90deg,rgba(239,196,87,.035),transparent 24%)!important;
    color:#d9dddc!important;
    font:800 13px/1 'Barlow Condensed','Arial Narrow',sans-serif!important;
    letter-spacing:.12em!important;
    text-align:left!important;
    text-decoration:none!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
    box-shadow:none!important;
    clip-path:none!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .nav-links>a::before,
  body[data-fear-redesign="portal-v3"] header.nav .nav-links>a::after,
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-menu>a::before,
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-menu>a::after{
    content:none!important;
    display:none!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .nav-links>a:hover,
  body[data-fear-redesign="portal-v3"] header.nav .nav-links>a:focus-visible,
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-menu>a:hover,
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-menu>a:focus-visible{
    padding-left:21px!important;
    color:#fff2c0!important;
    background:linear-gradient(90deg,rgba(239,196,87,.16),rgba(239,196,87,.025) 62%,transparent)!important;
    box-shadow:inset 3px 0 var(--fear-v312-gold)!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .nav-links .fear-nav-icon,
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-menu .fear-nav-icon{
    grid-column:1!important;
    display:block!important;
    width:42px!important;
    margin:0!important;
    color:var(--fear-v312-gold)!important;
    font-size:20px!important;
    text-align:center!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .nav-links .fear-nav-text,
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-menu .fear-nav-text{
    grid-column:2!important;
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .nav-social.fear-social-command{
    order:10!important;
    flex:0 0 auto!important;
  }
  body[data-fear-redesign="portal-v3"] header.nav .nav-right{
    order:20!important;
    flex:0 0 auto!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    margin:10px 0 0!important;
    padding:12px!important;
    overflow:visible!important;
  }
  .fear-portal-home{width:calc(100% - 10px)!important;padding-inline:4px!important;overflow:visible!important}
  .fear-portal-panel{padding:6px!important}
  .fear-portal-panel::before{border-width:12px!important;border-image-width:12px!important}
  .fear-portal-panel::after{inset:6px!important}
  .fear-portal-panel-head{min-height:48px!important;padding-inline:14px!important}
  .fear-portal-panel-head::after{left:14px!important;width:72px!important}
  .fear-portal-brand-stage{padding:7px!important}
  .fear-portal-brand-stage::before{border-width:12px!important;border-image-width:12px!important}
  .fear-portal-brand-stage::after{inset:7px!important}
}

@media(max-width:390px){
  body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell{padding-inline:12px!important}
  body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-menu{padding-inline:7px!important}
  body[data-fear-redesign="portal-v3"] header.nav .nav-links{padding-inline:6px!important}
  body[data-fear-redesign="portal-v3"] header.nav .nav-links>a,
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-menu>a{padding-inline:11px!important;grid-template-columns:39px minmax(0,1fr)!important;gap:10px!important;font-size:12px!important}
  body[data-fear-redesign="portal-v3"] header.nav .nav-links .fear-nav-icon,
  body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-menu .fear-nav-icon{width:37px!important;font-size:18px!important}
  .fear-portal-panel{padding:5px!important}
  .fear-portal-panel::before{border-width:10px!important;border-image-width:10px!important}
  .fear-portal-panel::after{inset:5px!important}
}

@media(prefers-reduced-motion:reduce){
  body[data-fear-redesign="portal-v3"] header.nav .fear-header-badge-img{transition:none!important}
}