/* The black top bar: app name, back button, sound icon, and the imigongo band under it. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ink);
  color: var(--chalk);
}

.topbar-row {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 56px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.topbar-title {
  flex: 1;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-back,
.topbar-sound {
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  background: transparent;
  color: var(--chalk);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ease), border-color var(--ease);
}

.topbar-back:hover,
.topbar-sound:hover {
  background: var(--action-hover);
  border-color: var(--chalk);
}

.topbar :focus-visible {
  outline-color: var(--chalk);
}

.topbar-sound {
  padding: 0;
}

.icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.icon-off,
.topbar-sound[aria-pressed="false"] .icon-on {
  display: none;
}

.topbar-sound[aria-pressed="false"] .icon-off {
  display: block;
}