/* Clock page – page frame around the shared score / clock block (shared/game.css). */
body { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; overscroll-behavior-y: none; }
main.board-wrap { display: flex; align-items: center; padding: 8px 16px; }
@media (max-width: 700px) { main.board-wrap { align-items: flex-start; padding: 4px 12px; } }

.bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(14px + var(--safe-b)); }
.bottom .b svg { width: 18px; height: 18px; }

/* ---------- short screens (small tablet / phone in landscape): everything on one screen */
@media (max-height: 560px) and (min-width: 600px) {
  .top { padding-top: calc(env(safe-area-inset-top, 0px) + 6px); padding-bottom: 0; }
  .top .pill { padding: 5px 10px; font-size: 13px; }
  .icon-btn { width: 34px; height: 34px; }
  main.board-wrap { padding: 0 12px; }
  .board { gap: 6px 12px; }
  .board .team { gap: 5px; }
  .board .tname { font-size: 16px; }
  .board .tlogo { width: 32px; height: 22px; }
  .board .score { font-size: 46px; margin: -4px 0 -2px; }
  .board .pm { gap: 6px; }
  .board .pm .b { min-height: 44px; }
  .board .pm .b svg { width: 20px; height: 20px; }
  .board .pen { min-height: 34px; font-size: 13px; }
  .board .pen-more { gap: 6px; }
  .board .pen-more .b { min-height: 28px; font-size: 12px; }
  .board .chips { min-height: 26px; gap: 4px; }
  .chip-pen .pt { font-size: 14px; padding: 2px 3px 2px 8px; }
  .chip-pen .px { width: 26px; }
  .board .center { gap: 6px; max-width: 400px; }
  .board .adj .b { min-height: 34px; font-size: 13px; }
  .board .clock { font-size: 60px; }
  .board .edit { position: static; }
  .board .play { height: 48px; width: min(300px, 100%); }
  .board .play svg { width: 26px; height: 26px; }
  .board .periods > button { min-height: 30px; padding: 3px 10px; font-size: 13px; }
  .board .toggles { gap: 12px; }
  .tog { font-size: 12px; gap: 6px; }
  .switch { width: 40px; height: 22px; }
  .switch::after { width: 16px; height: 16px; }
  .switch.on::after { transform: translateX(18px); }
  .bottom { padding: 0 12px calc(6px + var(--safe-b)); }
  .bottom .b { min-height: 32px; padding: 4px 12px; font-size: 13px; }
}