/* A straight blue-city navigation row, with the existing User Panel orb. */
.hero .city-menu-hub {
  position:fixed;
  inset:0 auto auto 0;
  display:block;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  translate:none;
  transform:none;
  z-index:1000;
  pointer-events:none;
}
.hero .city-menu-hub .navigation-strip.city-menu {
  position:relative;
  inset:auto;
  left:auto;
  display:flex;
  align-items:center;
  width:100%;
  height:74px;
  min-height:0;
  margin:0;
  padding:0 12px 0 18px;
  transform:none;
  overflow:visible;
  border:0;
  border-bottom:2px solid #94dbf6;
  background:linear-gradient(180deg,rgba(2,22,42,.97),rgba(9,49,78,.94));
  box-shadow:inset 0 1px rgba(233,250,255,.7),inset 0 -3px #2c8cbb,0 5px 18px #041a3180;
  pointer-events:auto;
}
.city-menu .city-menu-links {
  display:flex;
  flex:1 1 auto;
  align-items:stretch;
  justify-content:space-evenly;
  gap:clamp(3px,1.2vw,18px);
  height:100%;
  min-width:0;
}
.city-menu .city-menu-links > a,
.city-menu .nav-feature > summary {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:auto;
  min-width:0;
  height:100%;
  margin:0;
  padding:9px 8px 7px;
  border:0;
  border-bottom:3px solid transparent;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#e8f7ff;
  font:600 clamp(11px,1.25vw,15px)/1.1 'Segoe UI',Arial,sans-serif;
  letter-spacing:.02em;
  text-align:center;
  text-decoration:none;
  text-shadow:0 1px 2px #00101c;
  white-space:nowrap;
  cursor:pointer;
}
.city-menu .city-menu-links > a:hover,
.city-menu .city-menu-links > a.active,
.city-menu .nav-feature > summary:hover,
.city-menu .nav-feature[open] > summary,
body[data-route="information"] .city-menu .nav-feature > summary {
  color:#fff;
  border-bottom-color:#6ad6ff;
  background:linear-gradient(180deg,transparent,#2794c82f);
  text-shadow:0 0 8px #8be1ff;
}
.city-menu .city-menu-links .fa { color:#8edaff;font-size:1em; }
.hero .city-menu .city-menu-links > .nav-feature {
  position:relative;
  flex:0 1 auto;
  align-self:stretch;
  min-width:0;
  height:100%;
  margin:0;
  padding:0;
  z-index:4;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.city-menu .nav-feature > summary { list-style:none; }
.city-menu .nav-feature > summary::-webkit-details-marker { display:none; }
.city-menu .nav-feature-chevron { margin-left:2px;font-size:9px; }
.city-menu .nav-feature-menu {
  position:absolute;
  top:100%;
  left:0;
  right:auto;
  display:grid;
  gap:0;
  width:max-content;
  min-width:155px;
  margin:0;
  padding:5px;
  transform:none;
  border:1px solid #86cbe8;
  background:#082843f7;
  box-shadow:0 10px 20px #021a2b9c;
}
.city-menu .nav-feature-menu > a {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:8px 10px;
  border:0;
  border-radius:0;
  background:none;
  color:#edf9ff;
  font:600 12px/1.2 'Segoe UI',Arial,sans-serif;
  text-decoration:none;
}
.city-menu .nav-feature-menu > a:hover,
.city-menu .nav-feature-menu > a.active { background:#205b7e; }
.city-menu .navigation-account {
  position:relative;
  isolation:isolate;
  display:flex;
  flex:0 0 110px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:110px;
  height:110px;
  min-height:0;
  margin:0 0 -36px 8px;
  padding:18px 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.1 Georgia,'Times New Roman',serif;
  text-align:center;
  text-decoration:none;
  text-shadow:0 2px 4px #020915,0 0 8px #020915;
  cursor:pointer;
}
.city-menu .navigation-account::before,
.city-menu .navigation-account::after {
  content:'';
  position:absolute;
  pointer-events:none;
}
.city-menu .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;
}
.city-menu .navigation-account::after {
  inset:-5%;
  z-index:2;
  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;
}
.city-menu .navigation-account > :is(i,span) { position:relative;z-index:3; }
.city-menu .navigation-account i { color:#b7e5ff; }
.city-menu .navigation-account:hover { filter:brightness(1.15) drop-shadow(0 0 6px #8dd8ff); }
.city-menu :is(a,button,summary):focus-visible { outline:2px solid #e3f7ff;outline-offset:3px; }

/* Online moves with the banner, centered above the Information card. */
.hero > .harbor-online-stack.city-online {
  position:absolute;
  left:50%;
  top:calc(100% - 88px);
  right:auto;
  bottom:auto;
  width:clamp(100px,11.4cqw,128px);
  height:clamp(100px,11.4cqw,128px);
  aspect-ratio:1;
  margin:0;
  transform:translateX(-50%);
  z-index:8;
  pointer-events:none;
}

/* Fill the side space introduced by the earlier frame sizing. */
body:not([data-route="account"]) .wrap { padding-inline:0; }
body[data-route="home"] .wrap #main-content > .home-hub {
  background:rgba(239,248,255,.5);
  background-clip:padding-box;
  border-image-outset:0;
}
@media(min-width:721px) {
  .home-showcase .home-slide-arrow--prev { right:calc(100% - 26px); }
  .home-showcase .home-slide-arrow--next { left:calc(100% - 26px); }
}
@media(max-width:720px) {
  .hero .city-menu-hub .navigation-strip.city-menu { height:61px;padding:0 4px 0 2px; }
  .city-menu .city-menu-links { gap:0; }
  .city-menu .city-menu-links > a,
  .city-menu .nav-feature > summary { flex:1 1 0;padding:5px 2px 3px;font-size:10px;letter-spacing:0; }
  .city-menu .city-menu-links > a > i,
  .city-menu .nav-feature > summary > i { display:none; }
  .city-menu .nav-feature { flex:1 1 0; }
  .city-menu .nav-feature-menu { left:auto;right:0; }
  .city-menu .navigation-account { flex-basis:64px;width:64px;height:64px;margin:0 0 -3px 1px;padding:8px 3px;font-size:9px; }
  .hero > .harbor-online-stack.city-online { top:calc(100% - 58px);width:min(26vw,98px);height:min(26vw,98px); }
  body[data-route="home"] .home-primary-grid > .home-server-stats { margin-top:72px; }
  .home-showcase .home-slide-arrow--prev { right:calc(100% - 22px); }
  .home-showcase .home-slide-arrow--next { left:calc(100% - 22px); }
}