/* Equal control columns keep the heading centered on the viewport, not
   between one left button and two right buttons. No canvas overlay. */
.play-toolbar {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 96px;
  column-gap: 12px;
  padding-inline: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
}
.play-toolbar > #back-to-levels { grid-column: 1; grid-row: 1; justify-self: start; }
.play-toolbar > .toolbar-actions { grid-column: 3; grid-row: 1; justify-self: end; }
.level-heading {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 550;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}
.level-heading-number {
  flex: 0 0 auto;
  color: var(--sage);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.level-heading-separator { color: var(--muted); font-weight: 400; }
.level-heading-name { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .play-toolbar {
    column-gap: 8px;
    padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
}
@media (max-width: 520px) {
  .level-heading { flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.25; }
  .level-heading-number { font-size: 11px; }
  .level-heading-separator { display: none; }
}