/* The top navigation reuses the Register and Download orb artwork and type. */
.navigation-strip.helmet-nav{
  grid-template-columns:minmax(0,1fr) 158px minmax(0,1fr);
  min-height:160px;
  gap:8px;
  padding:6px 10px;
}
.navigation-strip.helmet-nav .nav-side{
  justify-items:center;
  gap:6px;
}
.navigation-strip.helmet-nav .nav-feature{
  width:142px;
  justify-self:center;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}
.navigation-strip.helmet-nav .nav-side>:is(a,button),
.navigation-strip.helmet-nav .nav-feature>summary,
.navigation-strip.helmet-nav .nav-feature-menu>a{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  flex:none;
  width:100px;
  min-width:0;
  height:100px;
  min-height:0;
  margin:0;
  padding:19px 12px;
  border:0;
  border-radius:50%;
  clip-path:none;
  overflow:visible;
  background:radial-gradient(circle closest-side at center,#0e141df0 0 68%,transparent 73%);
  box-shadow:none;
  color:#edf9ff;
  font:600 12px/1.2 Georgia,'Times New Roman',serif;
  letter-spacing:0;
  text-align:center;
  text-decoration:none;
  text-shadow:0 2px 4px #020915,0 0 8px #020915;
  white-space:normal;
  cursor:pointer;
  transition:filter .18s ease;
}
.navigation-strip.helmet-nav .nav-side>:is(a,button)::before,
.navigation-strip.helmet-nav .nav-feature>summary::before,
.navigation-strip.helmet-nav .nav-feature-menu>a::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:50%;
  background:radial-gradient(circle at center,#0e141df2 0 24%,transparent 27%) center/100% 100% no-repeat,url('../assets/silver-ice-arcane-online-orb-v1.png') center/contain no-repeat;
  mask-image:radial-gradient(circle closest-side,#000 70%,transparent 73%);
  opacity:.9;
  pointer-events:none;
}
.navigation-strip.helmet-nav .nav-side>:is(a,button)::after,
.navigation-strip.helmet-nav .nav-feature>summary::after,
.navigation-strip.helmet-nav .nav-feature-menu>a::after{
  content:'';
  position:absolute;
  inset:-5%;
  left:-5%;
  bottom:-5%;
  width:110%;
  height:110%;
  z-index:2;
  transform:none;
  border:0;
  border-radius:0;
  background:url('../assets/silver-ice-orb-action-frame-black-v2.png') center/250% 100% no-repeat;
  box-shadow:none;
  mask-image:url('../assets/silver-ice-orb-action-frame-black-v2.png');
  mask-mode:luminance;
  mask-size:250% 100%;
  mask-position:center;
  mask-repeat:no-repeat;
  opacity:.9;
  pointer-events:none;
}
.navigation-strip.helmet-nav .nav-side>:is(a,button)>:is(i,span),
.navigation-strip.helmet-nav .nav-feature>summary>:is(i,span),
.navigation-strip.helmet-nav .nav-feature-menu>a>:is(i,span){
  position:relative;
  z-index:3;
}
.navigation-strip.helmet-nav .fa{
  color:#b7e5ff;
  font-size:1.05em;
  filter:drop-shadow(0 0 5px #6abaff99);
}
.navigation-strip.helmet-nav .nav-side-right>:is(a,button),
.navigation-strip.helmet-nav .nav-side-right .navigation-account{
  width:100px;
  height:100px;
  padding:19px 10px;
  border:0;
  border-radius:50%;
  background:radial-gradient(circle closest-side at center,#0e141df0 0 68%,transparent 73%);
  box-shadow:none;
  color:#edf9ff;
  font:600 12px/1.2 Georgia,'Times New Roman',serif;
  text-shadow:0 2px 4px #020915,0 0 8px #020915;
}
.navigation-strip.helmet-nav .nav-side-right .navigation-account::before{
  inset:0;
  z-index:1;
  border-radius:50%;
  background:radial-gradient(circle at center,#0e141df2 0 24%,transparent 27%) center/100% 100% no-repeat,url('../assets/silver-ice-arcane-online-orb-v1.png') center/contain no-repeat;
  mask-image:radial-gradient(circle closest-side,#000 70%,transparent 73%);
  opacity:.9;
}
.navigation-strip.helmet-nav .nav-side-right .navigation-account i{color:#b7e5ff}
.navigation-strip.helmet-nav .nav-feature>summary{
  width:142px;
  height:142px;
  min-height:142px;
  padding:27px 23px;
  font:600 14px/1.15 Georgia,'Times New Roman',serif;
}
.navigation-strip.helmet-nav .nav-feature>summary .nav-feature-chevron{
  right:50%;
  top:auto;
  bottom:22px;
  transform:translateX(50%);
  font-size:9px;
}
.navigation-strip.helmet-nav .nav-side>:is(a,button):hover,
.navigation-strip.helmet-nav .nav-side>:is(a,button).active,
.navigation-strip.helmet-nav .nav-feature>summary:hover,
.navigation-strip.helmet-nav .nav-feature[open]>summary,
.navigation-strip.helmet-nav .nav-feature-menu>a:hover,
.navigation-strip.helmet-nav .nav-feature-menu>a.active,
body[data-route="information"] .navigation-strip.helmet-nav .nav-feature>summary{
  filter:brightness(1.15) drop-shadow(0 0 6px #8dd8ff);
  color:#fff;
  border:0;
  box-shadow:none;
}
.navigation-strip.helmet-nav :is(a,button,summary):focus-visible{
  outline:2px solid #e3f7ff;
  outline-offset:4px;
}
.navigation-strip.helmet-nav .nav-feature-menu{
  left:50%;
  right:auto;
  top:calc(100% + 3px);
  display:flex;
  justify-content:center;
  gap:6px;
  width:max-content;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  transform:translateX(-50%);
}
.navigation-strip.helmet-nav .nav-feature-menu>a{
  width:96px;
  height:96px;
  min-height:0;
  padding:18px 10px;
  font:600 12px/1.2 Georgia,'Times New Roman',serif;
}
.navigation-strip.helmet-nav .nav-feature-menu>a+a{border:0}
@media(max-width:720px){
  .navigation-strip.helmet-nav{
    grid-template-columns:minmax(0,1fr);
    gap:2px;
    min-height:0;
    padding:3px 7px 8px;
  }
  .navigation-strip.helmet-nav .nav-feature>summary{
    width:142px;
    height:142px;
    min-height:142px;
  }
  .navigation-strip.helmet-nav .nav-feature-menu{
    position:static;
    width:auto;
    margin:5px 0 0;
    transform:none;
  }
}
@media(max-width:480px){
  .navigation-strip.helmet-nav .nav-side>:is(a,button),
  .navigation-strip.helmet-nav .nav-side-right>:is(a,button),
  .navigation-strip.helmet-nav .nav-side-right .navigation-account{
    width:94px;
    height:94px;
    font-size:12px;
  }
}
@media(prefers-reduced-motion:reduce){
  .navigation-strip.helmet-nav :is(a,button,summary){transition:none}
}