/* Eureka bar: the same thin night strip above every world (see eureka-bar.js). Its colours are the hub's
   and never follow a world's light or dark setting, so moving between worlds always feels like one place. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }

.eu-bar {
  position: relative; z-index: 30; height: 44px; padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box;
  background: #070b1a; border-bottom: 1px solid rgba(255, 255, 255, .08);
  font: 400 .8rem/1 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased;
}
.eu-in { box-sizing: border-box; max-width: 62rem; height: 44px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 28px; }
.eu-bar a { text-decoration: none; }
.eu-bar :focus-visible { outline: 2px solid #ffb547; outline-offset: 3px; border-radius: 6px; }
.eu-brand { display: flex; align-items: center; gap: 8px; color: #f4ecdf; font: 500 1.06rem/1 "Fraunces", Georgia, serif; letter-spacing: .01em; }
.eu-back { width: 7px; height: 12px; fill: none; stroke: #a7aec4; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-right: -1px; transition: transform .25s, stroke .25s; }
.eu-brand:hover .eu-back { transform: translateX(-3px); stroke: #ffb547; }
.eu-logo { display: block; height: 19px; width: auto; margin: -2px 0 -1px -3px; }
.eu-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.eu-links a { color: #a7aec4; transition: color .2s; white-space: nowrap; }
.eu-links a:hover { color: #f4ecdf; }
.eu-links a[aria-current] { color: #f4ecdf; }
.eu-links a[aria-current]::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: #ffb547; box-shadow: 0 0 6px #ffb547; vertical-align: middle; }
.eu-more { display: none; }
.eu-acct {
  --p: 0; flex: none; display: grid; place-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); color: #f4ecdf; font-weight: 600; font-size: .76rem; transition: border-color .2s, box-shadow .3s;
}
.eu-acct:hover { border-color: rgba(255, 181, 71, .5); }
.eu-acct.in {
  width: 28px; padding: 0; border: 0; color: #ffd98a; font: 500 .9rem/1 "Fraunces", Georgia, serif;
  background: radial-gradient(closest-side, #0c1330 84%, transparent 86%), conic-gradient(#ffb547 calc(var(--p) * 1%), rgba(255, 255, 255, .16) 0);
}
.eu-acct.in:hover { box-shadow: 0 0 16px rgba(255, 181, 71, .35); }

@media (max-width: 680px) {
  .eu-in { gap: 14px; }
  .eu-more {
    display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 4px; border: 0; background: none; cursor: pointer;
    color: #a7aec4; font: inherit; font-size: .8rem;
  }
  .eu-more svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transition: transform .25s; }
  .eu-more[aria-expanded="true"] { color: #f4ecdf; }
  .eu-more[aria-expanded="true"] svg { transform: rotate(180deg); }
  .eu-links {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 20px 14px; background: rgba(7, 11, 26, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
    visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s, visibility 0s .25s;
  }
  .eu-links.open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s; }
  .eu-links a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); font: 500 1.25rem/1.2 "Fraunces", Georgia, serif; color: #f4ecdf; }
  .eu-links a:last-child { border-bottom: 0; }
  .eu-links a[aria-current] { color: #ffb547; }
  .eu-links a[aria-current]::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .eu-bar * { transition: none !important; } }