/* Basketball layout: clocks centered on top, two team columns below, DJ strip at the bottom. */
/* game clock with the shot clock to its right, controls underneath */
.clocks { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: stretch; gap: 6px 10px; }
.clocks .game { order: 1; } .clocks .shot { order: 2; display: grid; place-items: center; font-size: clamp(40px, 11vmin, 104px); } .clockctl { order: 3; grid-column: 1 / -1; }
.clocks .game, .clocks .shot { -webkit-touch-callout: none; }
.shot {
  min-width: 5.2ch; padding: 2px 14px; border-radius: 10px; background: #000; border: 2px solid var(--line);
  font-family: var(--f-clock); font-size: clamp(30px, 7vmin, 64px); line-height: 1.1; color: var(--shot); text-align: center;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 12px color-mix(in srgb, var(--shot) 60%, transparent);
}
.shot.off { color: var(--muted); text-shadow: none; }
.shot.idle { opacity: .6; }
.game {
  display: flex; flex-direction: column; align-items: center; padding: 4px 26px 6px; border-radius: 14px; background: #000; border: 2px solid var(--line);
  min-width: 7ch;
}
.game .t { font-family: var(--f-clock); font-size: clamp(44px, 12vmin, 112px); line-height: 1.05; color: var(--led); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px color-mix(in srgb, var(--sky) 70%, transparent); }
.game .t.target { font-family: var(--f-score); font-weight: 900; letter-spacing: .02em; }
.game .sub { font-size: 12px; color: var(--muted); letter-spacing: .12em; }
.game .per { color: var(--blush); font-weight: 700; }
.game.paused .t { opacity: .55; }
.clockctl { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.btn.shotbtn { color: var(--shot); font-family: var(--f-clock); font-size: 18px; }
.btn.shotbtn.running { border-color: var(--shot); }
.timeset { display: grid; gap: 8px; }
.timeset .mmss { display: flex; justify-content: center; align-items: center; gap: 6px; font: 900 32px var(--f-clock); }
.timeset .num.big { width: 96px; }
.timeset .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.timeset .steps .btn { padding: 0 6px; font-size: 15px; }

.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
.team { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; min-height: 0; min-width: 0; }
.stats { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.fouls, .tos { display: inline-flex; align-items: center; gap: 6px; }
.fouls .fn { font: 900 22px var(--f-score); color: var(--fg); min-width: 1.4ch; text-align: center; font-variant-numeric: tabular-nums; }
.mini { width: 30px; height: 30px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-weight: 700; display: grid; place-items: center; }
.bonus { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--coral); color: var(--ink); letter-spacing: .06em; }
.dots { display: inline-flex; gap: 5px; }
.dot { width: 18px; height: 18px; border-radius: 50%; background: var(--tc); border: 2px solid var(--tc); }
.dot.used { background: transparent; border-color: var(--line); }

@media (max-width: 520px) {
  .clockctl .lbl { display: none; } /* icon only on phones so the row stays on one line */
  .game { padding-inline: 16px; }
  .stats { justify-content: center; }
  .dot { width: 14px; height: 14px; }
  #ruleChip, #fsBtn, #helpBtn { display: none; }
  .topbar { gap: 6px; }
  .topbar .chip { padding: 6px 10px; }
}
.board { display: contents; }
/* landscape phones: clocks sit between the teams, each team keeps its score
   on the left and stacks its point buttons in a column on the right, so the score never collapses */
@media (orientation: landscape) and (max-height: 540px) {
  .app { grid-template-rows: auto 1fr auto; gap: 6px; }
  .board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; min-height: 0; }
  .teams { display: contents; }
  .home { order: 1; } .clocks { order: 2; align-content: center; } .away { order: 3; }
  .clocks { grid-template-columns: auto; justify-items: center; } /* narrow middle column: clocks stack again */
  .clocks .shot { order: 0; display: block; font-size: clamp(22px, 8vh, 40px); }
  /* time sheet side by side so 套用 stays on screen */
  #timeOv .sheet { width: min(760px, 100%); grid-template-columns: 1.4fr 1fr; gap: 10px 18px; padding: 14px 18px; align-items: start; }
  #timeOv .sheet > h2, #timeOv .sheet > .actions { grid-column: 1 / -1; }
  #timeOv .sheet > p { display: none; }
  #timeOv h2 { font-size: 20px; }
  #timeOv .num.big { font-size: 30px; padding: 2px; }
  #timeOv .btn { min-height: 38px; }
  .team {
    grid-template-columns: 1fr auto; grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "name name" "stats stats" "score pts"; gap: 6px;
  }
  .team .name { grid-area: name; padding: 0; font-size: 16px; }
  .stats { grid-area: stats; justify-content: center; gap: 4px 10px; font-size: 12px; }
  .mini { width: 26px; height: 26px; }
  .fouls .fn { font-size: 18px; }
  .dot { width: 12px; height: 12px; }
  .score { grid-area: score; min-height: 72px; }
  .score .lead, .score .hint { display: none; }
  .pts { grid-area: pts; grid-template-columns: auto auto; grid-auto-flow: column; grid-template-rows: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 4px; min-height: 0; }
  .pts button, .pts button.minus { min-height: 0; padding: 0 10px; font-size: 18px; }
  .game { padding: 2px 14px 4px; }
  .game .t { font-size: clamp(30px, 11vh, 64px); }
  .shot { font-size: clamp(22px, 8vh, 40px); }
  .clockctl .btn { min-height: 34px; padding: 0 10px; }
}