/* Top bar: bare icon buttons, one-line title with an optional context line, plain timer. */

.topbar {
  min-height: 52px;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  gap: var(--space-2);
  align-items: center;
}

.topbar > :last-child {
  justify-self: end;
}

.topbar > :last-child.icon-btn {
  margin-left: 0;
  margin-right: -10px;
}

.game-title {
  min-width: 0;
  text-align: center;
}

.game-title small {
  display: block;
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.2;
}

.game-title strong {
  display: block;
  font-size: var(--text-title);
  line-height: 1.25;
}

.timer-pill {
  justify-self: end;
  min-width: 64px;
  display: grid;
  justify-items: end;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.2;
}

.summary-topbar {
  grid-template-columns: 64px 1fr 64px;
}

.par-pill small {
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 500;
}

@media (max-height: 760px) {
  .game-topbar {
    min-height: 44px;
  }

  .game-topbar .game-title strong {
    font-size: var(--text-body);
  }

  .game-topbar .timer-pill {
    font-size: var(--text-small);
  }
}