.countdown-dock {
  position: fixed; z-index: 55; bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 680px;
  display: grid; grid-template-columns: 100px 1fr auto; gap: 28px; align-items: center;
  padding: 12px 16px; border: 1px solid #1112;
  background: var(--paper); color: var(--black); color-scheme: light;
  box-shadow: 0 8px 36px #0004;
}
.countdown-dock[hidden],
.next-ticket-store-visible .countdown-dock,
.has-ticket-cart .countdown-dock { display: none; }
.countdown-label { font-size: 9px; line-height: 1.6; }
.countdown-units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.countdown-units > span { text-align: center; }
.countdown-units b {
  display: block; font: 700 31px/1 Display, 'Arial Narrow', sans-serif;
  font-variant-numeric: tabular-nums;
}
.countdown-units small {
  display: block; font: 400 7px/1.5 Mono, monospace;
  letter-spacing: .03em; margin-top: 4px;
}
.countdown-dock .button { min-height: 48px; padding: 12px 18px; gap: 20px; font-size: 10px; }
.countdown-dock .button > span:last-child { font-size: 19px; }
footer { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
@media (max-width:640px) {
  .countdown-dock {
    bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 24px);
    grid-template-columns: minmax(0, 1fr) auto; gap: 5px 16px; padding: 11px 12px;
  }
  .countdown-label { grid-column: 1; grid-row: 1; font-size: 8px; white-space: nowrap; }
  .countdown-units { grid-column: 1; grid-row: 2; gap: 8px; max-width: 215px; }
  .countdown-units b { font-size: 25px; }
  .countdown-units small { font-size: 6px; margin-top: 3px; }
  .countdown-dock .button {
    grid-column: 2; grid-row: 1 / 3; min-height: 47px; padding: 11px 12px;
    gap: 10px; font-size: 9px; white-space: nowrap;
  }
  .countdown-dock .button > span:last-child { font-size: 16px; }
}