/* Added to the dashboards on the website only: the session bar and the "starting" cover. Tokens from ui/theme.css,
   motion tokens from ui/motion.css. Material: the bar is a strip of indigo glass; the cover frosts the whole page and
   holds one glass card, and fades away (opacity only) as the page comes into focus under it. The bar sits above the
   cover, so "Starting your town..." stays crisp while the page under it is frosted. */
.sessionbar { position: relative; z-index: 21; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 8px var(--gutter);
  font: 500 var(--fs-sm)/1.4 var(--font);
  background: var(--glass-ink); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px -16px rgba(46, 36, 110, 0.55); }
.sessionbar a { color: #fff; font-weight: 800; text-decoration: none; }
.sessionbar span { color: rgba(255, 255, 255, 0.9); flex: 1; min-width: 200px; }
.sessionbar button { font: 600 var(--fs-xs)/1 var(--font); color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--r-sm); padding: 7px 12px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.sessionbar button:hover { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: rgba(255, 255, 255, 0.6); }

.starting { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--page) 46%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  transition: opacity 320ms var(--ease-out, ease-out), visibility 0s linear 0s; }
.starting > div { background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: var(--r-lg); padding: 32px 36px; max-width: 440px;
  text-align: center; box-shadow: var(--glass-shadow); font-family: var(--font);
  animation: hr-in 560ms var(--ease-out, ease-out) both; --hr-dy: 10px; --hr-s: 0.985; }
.starting h2 { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.starting p { margin: 0 0 4px; color: var(--muted); }
.starting a, .starting button { margin-top: 16px; display: inline-flex; font: 600 var(--fs-sm) var(--font); }
.starting button { background: var(--primary); color: #fff; border: 1px solid var(--primary); border-radius: var(--r-sm); padding: 10px 16px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px -10px rgba(76, 61, 168, 0.7); }
.starting button:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
.starting a { color: var(--primary); margin-left: 12px; padding: 10px 4px; }
/* lifted: stays in the layout for one fade, then leaves the hit-test and paint (both dashboards hide .hidden with !important) */
.starting.hidden { display: grid !important; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 320ms var(--ease-out, ease-out), visibility 0s linear 320ms; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(76, 61, 168, 0.14); border-top-color: var(--primary);
  margin: 0 auto 16px; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.starting.hidden .spinner { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .starting, .starting.hidden { transition: none; }
  .starting > div { animation: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sessionbar { background: var(--primary); }
  .starting { background: color-mix(in srgb, var(--page) 92%, transparent); }
}