/* Står UTENFOR .wrap (se page.js) for å kunne gå kant til kant — egen
   venstre/høyre-padding her, samme formel som .wrap, så innholdet likevel
   flukter med resten av siden.

   Kant-linja (border-bottom) skal gå HELE skjermens bredde på brede
   skjermer, ikke stoppe ved --width-wide slik selve innholdet gjør — den
   ligger derfor på `.topbar` selv (full bredde), mens
   bredde-begrensningen og paddingen flyttes inn i `.topbar-inner`. */
.topbar{
  border-bottom:var(--border-w) solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  max-width:var(--width-wide); margin:0 auto;
  padding-top:calc(var(--space-4) + env(safe-area-inset-top));
  padding-bottom:var(--space-4);
  padding-left:calc(var(--space-6) + env(safe-area-inset-left));
  padding-right:calc(var(--space-6) + env(safe-area-inset-right));
}
.topbar-back{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--text-base); color:var(--text-dim);
  white-space:nowrap;
}
.topbar-back:hover{ color:var(--text); }
.topbar-game{
  display:flex; align-items:center; gap:var(--space-2);
  min-width:0;
}
.topbar-title{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--text-base);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Forsidens topplinje (renderHomeTopbar) — logo/navn + innstillinger,
   gjenbruker .topbar/.topbar-title over for felles padding/kant/tekststil. */
.topbar-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  font-size:var(--text-md);
  border-radius:var(--radius-full);
}
.topbar-icon-btn:hover{ background:var(--card-hover); }