html.training-timer-open, html.training-timer-open body { overflow: hidden; }
.training-timer {
  --tt-green: #005238;
  --tt-ink: #172a23;
  --tt-paper: #ffffff;
  --tt-line: #d7e1db;
  --tt-orange: #ffbc66;
  width: min(100%, 560px); max-width: 100vw; max-height: 100dvh;
  padding: 0; border: 0; border-radius: 16px;
  color: var(--tt-ink); background: var(--tt-paper); font-family: inherit;
  overscroll-behavior: contain;
}
.training-timer::backdrop { background: rgb(12 30 22 / 65%); }
.training-timer *, .training-timer *::before { box-sizing: border-box; }
.training-timer [hidden] { display: none !important; }
.training-timer button, .training-timer input, .training-timer select {
  font: inherit; color: inherit; min-height: 48px; border-radius: 9px;
  border: 1px solid var(--tt-line); background: white; padding: 10px;
  touch-action: manipulation; max-width: 100%;
}
.training-timer button { cursor: pointer; font-weight: 650; }
.training-timer button:disabled { opacity: .45; cursor: default; }
.training-timer :focus-visible { outline: 3px solid #d67b00; outline-offset: 3px; }
.tt-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--tt-line); }
.tt-header h2 { margin: 0; font-size: 20px; color: var(--tt-ink); }
.tt-header button { flex-shrink: 0; }
.tt-body { padding: 16px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.tt-mode { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; }
.tt-config { display: flex; gap: 10px; margin-top: 12px; }
.tt-config label { flex: 1; min-width: 0; font-size: 13px; }
.tt-config input { display: block; width: 100%; margin-top: 5px; }
.tt-clock { text-align: center; padding: 12px 0 18px; }
.tt-clock p { min-height: 24px; margin: 8px 0 0; }
.tt-time { display: block; font-size: clamp(52px, 15vw, 82px); font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.25; letter-spacing: -2px; margin-bottom: 12px; overflow-wrap: anywhere; }
.tt-controls { display: flex; gap: 8px; }
.tt-controls > button { flex: 1; }
.training-timer .tt-primary { background: var(--tt-green); color: white; border-color: var(--tt-green); }
.tt-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.tt-team { min-width: 0; border-top: 5px solid var(--tt-green); padding-top: 8px; }
.tt-team + .tt-team { border-color: var(--tt-orange); }
.tt-label { display: block; font-size: 12px; margin-bottom: 4px; }
.tt-team input { width: 100%; text-align: center; }
.tt-team output { display: block; text-align: center; font-size: 68px; line-height: 1.3; font-weight: 750; font-variant-numeric: tabular-nums; }
.tt-score-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.tt-score-buttons button { padding: 8px 2px; font-size: 20px; }
.tt-score-buttons button:last-child { grid-column: 1 / -1; font-size: 16px; min-height: 44px; }
.tt-check { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.training-timer .tt-check input { width: 22px; height: 22px; min-height: 22px; accent-color: var(--tt-green); }
.tt-shot { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.tt-shot output { font-size: 52px; font-weight: 750; font-variant-numeric: tabular-nums; min-width: 2ch; }
.tt-shot > div { flex: 1; }
.tt-shot > div > button { width: 100%; margin-top: 8px; }
.tt-help { font-size: 12px; line-height: 1.5; color: #53655c; margin: 12px 0 0; }
@media (max-width: 600px) {
  .training-timer { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .tt-header { padding-top: max(12px, env(safe-area-inset-top)); }
}
@media (max-width: 360px) {
  .tt-score-buttons { grid-template-columns: repeat(2, 1fr); }
  .tt-score-buttons button:last-child { grid-column: auto; min-height: 48px; }
}