/* Match the Register, Download, and Online orbs to the navigation ornaments. */
.hero .hero-orb-hub .navigation-strip.helmet-nav>.orb-action,
.hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack{
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  border:0;
  border-radius:50%;
  background:radial-gradient(circle closest-side at center,#0e141df0 0 68%,transparent 73%);
  box-shadow:none;
  color:#edf9ff;
  text-align:center;
  text-shadow:0 2px 4px #020915,0 0 8px #020915;
}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.orb-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:9px 4px;
  font:600 12px/1.2 Georgia,'Times New Roman',serif;
  text-decoration:none;
}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.orb-action::before,
.hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack::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;
}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.orb-action::after,
.hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack::after{
  content:'';
  position:absolute;
  inset:-5%;
  width:110%;
  height:110%;
  z-index:2;
  border:0;
  background:url('../assets/silver-ice-orb-action-frame-black-v2.png') center/250% 100% no-repeat;
  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;
}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.orb-action>:is(i,span){
  position:relative;
  z-index:3;
}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.orb-action .fa{
  color:#b7e5ff;
  font-size:1.05em;
  filter:drop-shadow(0 0 5px #6abaff99);
}
/* The old oversized frame and narrow inset bubble distorted the small Online orb. */
.hero .hero-orb-hub>.orb-frame-center,
.hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack>.online-orb-backdrop{
  display:none;
}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack>.harbor-online-bubble{
  position:absolute;
  inset:10%;
  width:80%;
  height:80%;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:none;
  box-shadow:none;
  z-index:3;
}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack .harbor-online-value{
  width:100%;
  max-width:100%;
  gap:1px;
  color:#edf9ff;
  font:600 10px/1 Georgia,'Times New Roman',serif;
  text-shadow:0 2px 4px #020915,0 0 8px #020915;
}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack .harbor-online-value span{
  width:100%;
  font:inherit;
  line-height:1;
}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack .harbor-online-value strong{
  font:700 15px/1 Georgia,'Times New Roman',serif;
  color:#fff;
}