/* Score + clock + penalties block (shared by the Clock page and the Graphics panel).
   The layout follows the width of its container, so it works full-screen and inside a panel box. */
.board-wrap { container-type: inline-size; width: 100%; }
.board {
  width: 100%; display: grid; align-items: start; justify-items: center; gap: 24px 22px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "home center away";
}
.board .team[data-side="home"] { grid-area: home; }
.board .team[data-side="away"] { grid-area: away; }
.board .center { grid-area: center; }

/* ---------- teams */
.board .team { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.board .thead { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; min-width: 0; }
.board .tlogo { width: 44px; height: 30px; background: #fff; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.board .tlogo img { max-width: 90%; max-height: 88%; object-fit: contain; }
.board .tname { font-weight: 900; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.board .score { appearance: none; border: 0; background: none; padding: 0; font: var(--heavy); font-size: clamp(64px, 7vw, 84px); font-variant-numeric: tabular-nums; margin: -4px 0 2px; color: var(--text); }
.board .pm { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.board .pm .b { min-height: 72px; }
.board .pm .b svg { width: 26px; height: 26px; }
.board .pm .b.dim { color: var(--dim); }
.board .pen { width: 100%; min-height: 48px; font-size: 16px; }
.board .pen-more { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.board .pen-more .b { min-height: 40px; font-size: 14px; }

/* running penalties: tap the time to change it, ✕ to remove */
.board .chips { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 36px; }
.chip-pen { display: inline-flex; align-items: stretch; border: 1px solid #8f1d17; background: var(--maroon); border-radius: var(--r); overflow: hidden; }
.chip-pen .pt { appearance: none; border: 0; background: none; color: #fff; padding: 5px 4px 5px 10px; font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.chip-pen .pt small { font-size: 11px; font-weight: 700; opacity: .75; }
.chip-pen .px { appearance: none; border: 0; background: rgba(0, 0, 0, .22); color: #fff; width: 34px; font-size: 13px; }
.chip-pen.wait { background: var(--btn); border-color: var(--line); }
.chip-pen.wait .pt { color: var(--muted); }

/* ---------- centre: clock */
.board .center { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 480px; }
.board .adj { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: 100%; }
.board .adj .b { min-height: 46px; padding: 6px 4px; font-size: 15px; }
.board .adj .b.dim { color: var(--dim); }
.board .clockrow { position: relative; display: flex; align-items: center; justify-content: center; }
.board .clock { font: var(--heavy); font-size: clamp(72px, 9vw, 120px); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.board .edit { position: absolute; left: 100%; margin-left: 6px; bottom: 12%; appearance: none; border: 0; background: none; color: var(--dim); padding: 6px; }
.board .edit svg { width: 22px; height: 22px; }
.board .play {
  appearance: none; width: min(340px, 100%); height: 80px; border-radius: var(--r); border: 1px solid var(--line); background: var(--btn);
  display: flex; align-items: center; justify-content: center; color: #fff; transition: background .1s, transform .05s;
}
.board .play:active { transform: scale(.98); }
.board .play svg { width: 40px; height: 40px; }
.board .play .i-pause { display: none; }
.board .play.running { background: #1b2b22; border-color: #2c6b45; }
.board .play.running .i-play { display: none; }
.board .play.running .i-pause { display: block; }
.board .periods > button { padding: 10px 16px; min-width: 50px; }
.board .toggles { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.board .str-now { color: var(--text); margin-left: 4px; }

/* ---------- medium width: three columns, tighter */
@container (max-width: 980px) {
  .board { gap: 18px 12px; }
  .board .adj { gap: 6px; }
  .board .adj .b { font-size: 14px; }
  .board .clock { font-size: clamp(60px, 10cqw, 96px); }
  .board .edit { position: static; margin: 0 0 0 4px; align-self: flex-end; }
  .board .tlogo { width: 38px; height: 26px; }
  .board .tname { font-size: 19px; }
}

/* ---------- narrow (phone): clock on top, the two teams side by side below */
@container (max-width: 700px) {
  .board { grid-template-columns: 1fr 1fr; grid-template-areas: "center center" "home away"; align-content: start; gap: 30px 12px; }
  .board .center { max-width: none; }
  .board .adj .b { min-height: 50px; }
  .board .clock { font-size: clamp(76px, 25cqw, 112px); }
  .board .play { width: 72%; height: 84px; }
  .board .score { font-size: clamp(72px, 24cqw, 104px); }
  .board .pm .b { min-height: 74px; }
  .board .pen { min-height: 50px; }
}

/* ---------- compact version inside the Graphics panel */
.board.compact { gap: 12px 14px; }
.board.compact .team { gap: 7px; }
.board.compact .tname { font-size: 17px; }
.board.compact .tlogo { width: 36px; height: 24px; }
.board.compact .score { font-size: 54px; margin: -2px 0 0; }
.board.compact .pm .b { min-height: 52px; }
.board.compact .pm .b svg { width: 22px; height: 22px; }
.board.compact .pen { min-height: 40px; font-size: 14px; }
.board.compact .pen-more .b { min-height: 34px; font-size: 13px; }
.board.compact .chips { min-height: 30px; }
.board.compact .chip-pen .pt { font-size: 15px; padding: 3px 3px 3px 8px; }
.board.compact .center { gap: 9px; max-width: 420px; }
.board.compact .adj .b { min-height: 38px; font-size: 13px; }
.board.compact .clock { font-size: 68px; }
.board.compact .edit { position: static; margin: 0 0 0 4px; align-self: flex-end; }
.board.compact .play { height: 56px; width: min(300px, 100%); }
.board.compact .play svg { width: 30px; height: 30px; }
.board.compact .periods > button { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.board.compact .tog { font-size: 13px; }
@container (max-width: 700px) {
  .board.compact .clock { font-size: clamp(64px, 20cqw, 84px); }
  .board.compact .score { font-size: 60px; }
}