/* Bundled locally (fonts/) instead of the Google Fonts CDN link the Cast
   receiver uses: a plain WebView loading this bundle for HDMI output can't
   reliably guarantee the remote stylesheet lands before first paint, and a
   fallback font has different metrics that throw off standby-screen sizing
   (clock/weekday/date). Same families/weights, byte-identical rendering,
   zero dependency on network timing. */
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Rajdhani-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Rajdhani-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/SpaceMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/SpaceMono-Bold.woff2") format("woff2");
}

/* DSEG14 Classic by keshikan (SIL Open Font License 1.1): https://github.com/keshikan/DSEG -
   used for every text element (status, footer, standby clock/weekday/date, round/interval
   badges) EXCEPT the main timer clock, which is drawn as CSS-positioned LED segments
   (led-display.js), not real font glyphs. 14-segment (not 7) so full words stay legible. */
@font-face {
  font-family: "DSEG14 Classic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/DSEG14Classic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "DSEG14 Classic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/DSEG14Classic-Bold.woff2") format("woff2");
}

:root {
  /* Overridden at runtime (see index.html) on displays where the WebView's CSS-pixel
     viewport doesn't match the panel's real physical pixels (some HDMI/USB-C adapters report
     a densityDpi to Android that doesn't match their panel). Every clamp() min/max font-size
     bound below is expressed as `calc(N * var(--px))` instead of a literal `Npx` so that
     correction scales every one of them consistently; left at 1px this is a no-op identical to
     a literal px value, exactly what Chromecast (and any unaffected display) always gets. */
  --px: 1px;
  --bg: #000;
  --white: #f4f4f2;
  --muted: #a8a8a8;
  --blue: #1688ff;
  --green: #16e33f;
  --red: #ff2618;
  --orange: #ff6b00;
  --off: rgba(255,255,255,.024);
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

* { box-sizing: border-box; }

/* The proven receiver continues to render here, but this layer is not visible. */
.receiver-source {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hidden { visibility: hidden; }

.timer-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
  color: var(--white);
  font-family: "DSEG14 Classic", "Courier New", monospace;
}

.top-counter {
  position: absolute;
  left: 4vw;
  top: 4vh;
  color: var(--blue);
  font-size: clamp(calc(38 * var(--px)), 5.2vw, calc(100 * var(--px)));
  font-weight: 700;
  letter-spacing: .05em;
  text-shadow: 0 0 4px currentColor, 0 0 13px currentColor;
}

.status {
  position: absolute;
  top: 7vh;
  left: 23vw;
  right: 7vw;
  color: var(--orange);
  text-align: center;
  font-size: clamp(calc(58 * var(--px)), 8.4vw, calc(158 * var(--px)));
  line-height: .95;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 0 0 4px currentColor, 0 0 17px currentColor;
}

.timer {
  position: absolute;
  top: 46%;
  left: 4vw;
  right: 4vw;
  height: min(31vw, 43vh);
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(1vw, 16px);
  color: var(--red);
}

.led-char {
  position: relative;
  flex: 0 0 auto;
  width: min(17vw, 28vh);
  height: min(31vw, 43vh);
}

.led-seg {
  position: absolute;
  opacity: .11;
  background: var(--off);
}

.led-seg.on {
  opacity: 1;
  background: currentColor;
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor);
}

.led-a, .led-g, .led-d {
  left: 18%;
  width: 64%;
  height: 8.5%;
  clip-path: polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);
}
.led-a { top: 0; }
.led-g { top: 45.7%; }
.led-d { bottom: 0; }

.led-b, .led-c, .led-e, .led-f {
  width: 13%;
  height: 39%;
  clip-path: polygon(50% 0,100% 8%,100% 92%,50% 100%,0 92%,0 8%);
}
.led-b { top: 5.7%; right: 3.6%; }
.led-c { bottom: 5.7%; right: 3.6%; }
.led-e { bottom: 5.7%; left: 3.6%; }
.led-f { top: 5.7%; left: 3.6%; }

.led-colon {
  position: relative;
  width: min(5.2vw, 8vh);
  height: min(31vw, 43vh);
  flex: 0 0 auto;
}
.led-colon::before, .led-colon::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(2vw, 3.2vh);
  height: min(2vw, 3.2vh);
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 9px currentColor);
}
.led-colon::before { top: 30%; }
.led-colon::after { bottom: 30%; }

.fallback-timer-text {
  width: 100%;
  text-align: center;
  font-size: clamp(calc(120 * var(--px)), 20vw, calc(400 * var(--px)));
  font-weight: 700;
  line-height: 1;
}

.time-cap {
  position: absolute;
  top: 72.5vh;
  left: 8vw;
  right: 8vw;
  text-align: center;
  color: var(--white);
  /* v57 - cut roughly in half (was 28/3.4vw/66): left too little margin for
     long localized strings ("NESSUN TIME CAP") on a real TV where --px
     inflates the ceiling. Full text always shown, just smaller. */
  font-size: clamp(calc(14 * var(--px)), 1.7vw, calc(33 * var(--px)));
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
}

.footer {
  position: absolute;
  left: 5vw;
  right: 5vw;
  bottom: 5vh;
  color: var(--muted);
  text-align: center;
  /* v57 - cut roughly in half (was 30/4vw/76), same reasoning as .time-cap
     above. */
  font-size: clamp(calc(15 * var(--px)), 2vw, calc(38 * var(--px)));
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer.phase-footer {
  color: var(--orange);
  font-size: clamp(calc(50 * var(--px)), 6.3vw, calc(120 * var(--px)));
  letter-spacing: .08em;
  text-shadow: 0 0 4px currentColor, 0 0 13px currentColor;
}

.footer-block { color: var(--orange); }
.footer-mode { color: var(--muted); }
.footer-round { color: var(--blue); }
.footer-separator { color: #666; }

.state-work .status { color: var(--green); }
.state-work .timer { color: var(--red); }

.state-rest .status, .state-rest .timer { color: var(--blue); }

.state-otc .status, .state-otc .timer { color: var(--red); }

.state-finished .status { color: var(--green); }
.state-finished .timer { color: var(--white); }

.state-prep .status, .state-prep .timer { color: var(--orange); }

.state-paused .status { color: var(--orange); }
.state-paused .timer { color: var(--white); }

.state-idle .status { color: var(--orange); }
.state-idle .timer { color: var(--white); }


/* ================================================================
   SAFE INTERVALS OVERRIDE v7
   ================================================================ */

.timer-screen.has-interval .top-counter {
  display: none !important;
}

.timer-screen.has-interval .status {
  top: 1.2vh !important;
  left: 17vw !important;
  right: 1vw !important;
  text-align: center !important;
  font-size: clamp(calc(66 * var(--px)), 9vw, calc(174 * var(--px))) !important;
}

.timer-screen.has-interval .interval-badge {
  display: flex !important;
  position: absolute !important;
  left: .5vw !important;
  top: 50% !important;
  width: 16vw !important;
  height: 45vh !important;
  transform: translateY(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
}

.timer-screen.has-interval .interval-number {
  color: var(--red) !important;
  font-family: "DSEG14 Classic", "Courier New", monospace !important;
  font-size: clamp(calc(150 * var(--px)), 18vw, calc(340 * var(--px))) !important;
  line-height: .82 !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  text-shadow: 0 0 5px currentColor, 0 0 16px currentColor !important;
}

/* Main clock: large and pushed close to the right edge. */
.timer-screen.has-interval .timer {
  left: 16.5vw !important;
  right: .15vw !important;
  top: 50% !important;
  height: min(40vw, 56vh) !important;
  gap: min(.4vw, 7px) !important;
}

.timer-screen.has-interval .led-char {
  width: min(21vw, 35vh) !important;
  height: min(39vw, 55vh) !important;
}

.timer-screen.has-interval .led-colon {
  width: min(4.2vw, 6.5vh) !important;
  height: min(39vw, 55vh) !important;
}

/* Work: green title, white clock. */
.timer-screen.has-interval.state-work .status {
  color: var(--green) !important;
}
.timer-screen.has-interval.state-work .timer {
  color: var(--white) !important;
}

/* Rest: blue title AND blue clock, as requested. */
.timer-screen.has-interval.state-rest .status,
.timer-screen.has-interval.state-rest .timer {
  color: var(--blue) !important;
}

/* Pause: orange title, white clock. */
.timer-screen.has-interval.state-paused .status {
  color: var(--orange) !important;
}
.timer-screen.has-interval.state-paused .timer {
  color: var(--white) !important;
}

.timer-screen.has-interval .footer.intervals-total-footer {
  left: 2vw !important;
  right: 2vw !important;
  bottom: .7vh !important;
  text-align: center !important;
  color: var(--muted) !important;
  font-size: clamp(calc(18 * var(--px)), 2vw, calc(38 * var(--px))) !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
}


/* ================================================================
   SAFE INTERVALS OVERRIDE v8 — micro alignment / sizing fixes
   ================================================================ */

/* Never show a textual label beside the red 01/02/03 counter. */
.timer-screen.has-interval .interval-label,
.timer-screen.has-interval [id="ledIntervalLabel"] {
  display: none !important;
}

/* WORK / REST / PAUSA truly centered on the TV width. */
.timer-screen.has-interval .status {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  text-align: center !important;
  transform: none !important;
}

/* Configuration caption: centered too, but much smaller so it fits. */
.timer-screen.state-config .status {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  top: 2vh !important;
  text-align: center !important;
  font-size: clamp(calc(28 * var(--px)), 3.8vw, calc(70 * var(--px))) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Slightly smaller red current-round number so 01/02/... always fits. */
.timer-screen.has-interval .interval-number {
  font-size: clamp(calc(125 * var(--px)), 15.8vw, calc(295 * var(--px))) !important;
  line-height: .84 !important;
}

/* Bottom info is intentionally more readable, but still secondary. */
.timer-screen.has-interval .footer.intervals-total-footer {
  bottom: .8vh !important;
  font-size: clamp(calc(27 * var(--px)), 3.1vw, calc(58 * var(--px))) !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
}

/* Keep semantic colors explicit after centering overrides. */
.timer-screen.has-interval.state-work .status {
  color: var(--green) !important;
}

.timer-screen.has-interval.state-rest .status {
  color: var(--blue) !important;
}

.timer-screen.has-interval.state-paused .status {
  color: var(--orange) !important;
}


/* ================================================================
   LED v10 — Structured Intervals footer + centered states
   ================================================================ */

/* Bottom metadata: gray, readable, still secondary. */
.timer-screen.has-interval .footer.intervals-total-footer {
  left: 1vw !important;
  right: 1vw !important;
  bottom: .8vh !important;
  width: auto !important;
  text-align: center !important;
  color: var(--muted) !important;
  font-size: clamp(calc(34 * var(--px)), 3.8vw, calc(72 * var(--px))) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
}

/* Preparation / pause / completed must be truly centered. */
.timer-screen.state-prep .status,
.timer-screen.state-paused .status,
.timer-screen.state-finished .status {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  text-align: center !important;
  transform: none !important;
}

/* Keep requested semantic colors. */
.timer-screen.state-prep .status,
.timer-screen.state-paused .status {
  color: var(--orange) !important;
}

.timer-screen.state-finished .status {
  color: var(--green) !important;
}

/* Finished state should not inherit an interval-side offset. */
.timer-screen.state-finished .timer {
  left: 2vw !important;
  right: 2vw !important;
}


/* ================================================================
   LED v11 — final Structured Intervals spacing/color micro-fix
   ================================================================ */

/* Red 01/02/03 almost flush with the left edge. */
.timer-screen.has-interval .interval-badge {
  left: -0.35vw !important;
}

/* Tighter spacing around the colon in the main white/blue clock. */
.timer-screen.has-interval .timer {
  gap: min(.12vw, 2px) !important;
}

.timer-screen.has-interval .led-colon {
  width: min(3.25vw, 5.1vh) !important;
}

/* Footer uses semantic colors:
   ROUND/TEMPO TOTALE = aqua, INTERVALLI = red. */
.timer-screen.has-interval .footer.intervals-total-footer .intervals-primary {
  color: #38d9d0 !important;
}

.timer-screen.has-interval .footer.intervals-total-footer .intervals-count {
  color: var(--red) !important;
}

.timer-screen.has-interval .footer.intervals-total-footer .intervals-separator {
  color: var(--muted) !important;
  padding: 0 .35em;
}


/* ================================================================
   STANDBY v12 — shown only when no timer is active
   ================================================================ */
.standby-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7vh;
  box-sizing: border-box;
  background: #000;
  overflow: hidden;
}

.standby-screen.hidden {
  display: none !important;
}

.timer-screen.standby-hidden {
  visibility: hidden !important;
}

.standby-logo {
  display: block;
  width: min(58vw, 980px);
  max-height: 25vh;
  object-fit: contain;
}

.standby-clock {
  color: #fff;
  font-family: "DSEG14 Classic", "Courier New", monospace;
  font-size: clamp(calc(130 * var(--px)), 18vw, calc(350 * var(--px)));
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.045em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 5px currentColor, 0 0 15px rgba(255,255,255,.25);
}


/* ================================================================
   STANDBY v13 — bigger clock in a nicer face, weekday + date lines.
   Gap is now split: a moderate logo/clock/date-group rhythm at the
   container level, with a tight gap inside the date group itself, so
   adding two more lines doesn't just stretch everything apart evenly.
   ================================================================ */
.standby-screen {
  gap: 4vh;
}

.standby-logo {
  margin-top: -2vh;
}

.standby-clock {
  font-family: "DSEG14 Classic", "Orbitron", "Courier New", monospace;
  font-size: clamp(calc(140 * var(--px)), 20vw, calc(400 * var(--px)));
  font-weight: 800;
  letter-spacing: 0;
  max-width: 96vw;
}

.standby-date-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8vh;
}

.standby-weekday {
  color: var(--orange);
  font-family: "DSEG14 Classic", "Rajdhani", "Courier New", monospace;
  font-size: clamp(calc(38 * var(--px)), 4.6vw, calc(88 * var(--px)));
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.standby-date {
  color: #bdbdbd;
  font-family: "DSEG14 Classic", "Rajdhani", "Courier New", monospace;
  font-size: clamp(calc(30 * var(--px)), 3.4vw, calc(64 * var(--px)));
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ================================================================
   v36 — standby made much more prominent: logo at least 5x bigger
   (was capped at a flat 980px regardless of screen size), clock and
   weekday/date lines doubled.
   ================================================================ */
.standby-logo {
  width: min(85vw, calc(4900 * var(--px)));
  max-height: 45vh;
}

.standby-clock {
  font-size: clamp(calc(280 * var(--px)), 40vw, calc(800 * var(--px)));
}

.standby-weekday {
  font-size: clamp(calc(76 * var(--px)), 9.2vw, calc(176 * var(--px)));
}

.standby-date {
  font-size: clamp(calc(60 * var(--px)), 6.8vw, calc(128 * var(--px)));
}


/* ================================================================
   LED v19 — AMRAP adopts the frozen Structured Intervals visual base
   Visual-only. No receiver/audio/transport changes.
   ================================================================ */

.timer-screen.has-amrap .top-counter {
  display: none !important;
}

.timer-screen.has-amrap .status {
  top: 1.2vh !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  text-align: center !important;
  transform: none !important;
  font-size: clamp(calc(66 * var(--px)), 9vw, calc(174 * var(--px))) !important;
  line-height: .95 !important;
}

.timer-screen.has-amrap.state-idle .status,
.timer-screen.has-amrap.state-work .status {
  color: var(--green) !important;
}

/* AMRAP main clock uses the same huge LED proportions as Intervals,
   but spans the whole screen because there is no interval number badge. */
.timer-screen.has-amrap .timer {
  left: 1vw !important;
  right: 1vw !important;
  top: 50% !important;
  height: min(40vw, 56vh) !important;
  gap: min(.12vw, 2px) !important;
  color: var(--white) !important;
}

.timer-screen.has-amrap .led-char {
  width: min(21vw, 35vh) !important;
  height: min(39vw, 55vh) !important;
}

.timer-screen.has-amrap .led-colon {
  width: min(3.25vw, 5.1vh) !important;
  height: min(39vw, 55vh) !important;
}

.timer-screen.has-amrap.state-paused .status {
  color: var(--orange) !important;
}

.timer-screen.has-amrap.state-paused .timer {
  color: var(--white) !important;
}

.timer-screen.has-amrap.state-prep .status {
  color: var(--orange) !important;
}

.timer-screen.has-amrap.state-prep .timer {
  color: var(--orange) !important;
}

.timer-screen.has-amrap.state-finished .status {
  color: var(--green) !important;
}

.timer-screen.has-amrap.state-finished .timer {
  left: 2vw !important;
  right: 2vw !important;
  color: var(--white) !important;
}

.timer-screen.has-amrap .footer.amrap-footer {
  left: 1vw !important;
  right: 1vw !important;
  bottom: .8vh !important;
  width: auto !important;
  text-align: center !important;
  color: var(--muted) !important;
  font-size: clamp(calc(38 * var(--px)), 4.15vw, calc(78 * var(--px))) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
  white-space: nowrap !important;
}

.timer-screen.has-amrap .footer.amrap-footer .amrap-primary {
  color: #38d9d0 !important;
}

.timer-screen.has-amrap .footer.amrap-footer .amrap-count {
  color: var(--red) !important;
  padding-left: .16em !important;
}


/* ================================================================
   LED v20 — AMRAP micro-fixes
   ================================================================ */

/* Configuration label must stay compact; the huge active AMRAP status
   typography is reserved for the running workout. */
.timer-screen.has-amrap.state-config .status {
  top: 2vh !important;
  font-size: clamp(calc(28 * var(--px)), 3.8vw, calc(70 * var(--px))) !important;
  line-height: 1 !important;
  color: var(--orange) !important;
}

/* Explicit footer colors, including localized labels with ':' punctuation. */
.timer-screen.has-amrap .footer.amrap-footer .amrap-primary {
  color: #38d9d0 !important;
}

.timer-screen.has-amrap .footer.amrap-footer .amrap-count {
  color: var(--red) !important;
  padding-left: .16em !important;
}


/* ================================================================
   LED v21 — EMOM adopts the frozen Intervals/AMRAP visual language
   ================================================================ */

.timer-screen.has-emom .top-counter {
  display: none !important;
}

.timer-screen.has-emom .status {
  top: 1.2vh !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  text-align: center !important;
  transform: none !important;
  font-size: clamp(calc(66 * var(--px)), 9vw, calc(174 * var(--px))) !important;
  line-height: .95 !important;
}

.timer-screen.has-emom.state-work .status {
  color: var(--green) !important;
}

.timer-screen.has-emom.state-rest .status {
  color: #4da3ff !important;
}

.timer-screen.has-emom.state-paused .status {
  color: var(--orange) !important;
}

.timer-screen.has-emom.state-prep .status {
  color: var(--orange) !important;
}

.timer-screen.has-emom .timer {
  left: 1vw !important;
  right: 1vw !important;
  top: 50% !important;
  height: min(40vw, 56vh) !important;
  gap: min(.12vw, 2px) !important;
  color: var(--white) !important;
}

.timer-screen.has-emom .led-char {
  width: min(21vw, 35vh) !important;
  height: min(39vw, 55vh) !important;
}

.timer-screen.has-emom .led-colon {
  width: min(3.25vw, 5.1vh) !important;
  height: min(39vw, 55vh) !important;
}

/* Configuration stays compact. */
.timer-screen.has-emom.state-config .status {
  top: 2vh !important;
  font-size: clamp(calc(28 * var(--px)), 3.8vw, calc(70 * var(--px))) !important;
  line-height: 1 !important;
  color: var(--orange) !important;
}

/* Finished label stays readable, not gigantic. */
.timer-screen.has-emom.state-finished .status {
  font-size: clamp(calc(34 * var(--px)), 4.8vw, calc(88 * var(--px))) !important;
  color: var(--green) !important;
}

/* Footer: ROUND aqua, x/y red. */
.timer-screen.has-emom .footer.emom-footer {
  left: 1vw !important;
  right: 1vw !important;
  bottom: .8vh !important;
  width: auto !important;
  text-align: center !important;
  font-size: clamp(calc(38 * var(--px)), 4.15vw, calc(78 * var(--px))) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
  white-space: nowrap !important;
}

.timer-screen.has-emom .footer.emom-footer .emom-primary {
  color: #38d9d0 !important;
}

.timer-screen.has-emom .footer.emom-footer .emom-count {
  color: var(--red) !important;
  padding-left: .16em !important;
}


/* v22 — EMOM: protocol keeps WORK for audio, visual label is intentionally hidden. */
.timer-screen.has-emom.state-work .status {
  visibility: hidden !important;
}


/* ================================================================
   v23 — EMOM ROUND row enlarged on Chromecast only.
   Android EMOM is intentionally untouched.
   Previous EMOM footer: clamp(calc(38 * var(--px)), 4.15vw, calc(78 * var(--px)))
   New size is approximately 3x.
   ================================================================ */
.timer-screen.has-emom .footer.emom-footer {
  font-size: clamp(calc(114 * var(--px)), 12.45vw, calc(234 * var(--px))) !important;
  bottom: 1.2vh !important;
  line-height: .9 !important;
}


/* ================================================================
   v24 — EMOM: red current round + smaller total rounds on the left,
   white clock right-aligned. Structured Intervals/AMRAP untouched.
   Bottom footer is no longer used for EMOM (superseded by v23 above).
   ================================================================ */

.timer-screen.has-emom .interval-badge {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  left: .5vw !important;
  top: 50% !important;
  width: 16vw !important;
  height: 45vh !important;
  transform: translateY(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.4vh !important;
}

.timer-screen.has-emom .interval-number {
  color: var(--red) !important;
  font-family: "DSEG14 Classic", "Courier New", monospace !important;
  font-size: clamp(calc(125 * var(--px)), 15.8vw, calc(295 * var(--px))) !important;
  line-height: .84 !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  text-shadow: 0 0 5px currentColor, 0 0 16px currentColor !important;
}

.timer-screen.has-emom .interval-total {
  color: var(--muted) !important;
  font-family: "DSEG14 Classic", "Courier New", monospace !important;
  font-size: clamp(calc(34 * var(--px)), 4.2vw, calc(78 * var(--px))) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
}

/* Clock hugs the right edge instead of sitting centered on the screen. */
.timer-screen.has-emom .timer {
  left: 16.5vw !important;
  right: .5vw !important;
  justify-content: flex-end !important;
}


/* ================================================================
   v25 — AMRAP adopts the same left-badge + right-clock language as
   Structured Intervals/EMOM (completed rounds count, no total since
   AMRAP has no fixed number of rounds). Also: Intervals' red number
   slightly smaller, EMOM's red number and total slightly bigger.
   ================================================================ */

.timer-screen.has-amrap .interval-badge {
  display: flex !important;
  position: absolute !important;
  left: .5vw !important;
  top: 50% !important;
  width: 16vw !important;
  height: 45vh !important;
  transform: translateY(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
}

.timer-screen.has-amrap .interval-number {
  color: var(--red) !important;
  font-family: "DSEG14 Classic", "Courier New", monospace !important;
  font-size: clamp(calc(112 * var(--px)), 14.2vw, calc(266 * var(--px))) !important;
  line-height: .84 !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  text-shadow: 0 0 5px currentColor, 0 0 16px currentColor !important;
}

/* Clock hugs the right edge instead of sitting centered on the screen. */
.timer-screen.has-amrap .timer {
  left: 16.5vw !important;
  right: .5vw !important;
  justify-content: flex-end !important;
}

/* Structured Intervals: slightly smaller red current-interval number. */
.timer-screen.has-interval .interval-number {
  font-size: clamp(calc(112 * var(--px)), 14.2vw, calc(266 * var(--px))) !important;
}

/* EMOM: slightly bigger red current round and total-rounds numbers. */
.timer-screen.has-emom .interval-number {
  font-size: clamp(calc(140 * var(--px)), 17.7vw, calc(330 * var(--px))) !important;
}

.timer-screen.has-emom .interval-total {
  font-size: clamp(calc(39 * var(--px)), 4.8vw, calc(90 * var(--px))) !important;
}


/* ================================================================
   v26 — Tabata / manual Intervals (shared "ROUNDS" mode) and
   Countdown / Count Up (shared "PLAIN" mode, no rounds at all) adopt
   the same family baseline as Intervals/EMOM/AMRAP. First pass: same
   proportions as EMOM for ROUNDS, same as AMRAP-without-badge for
   PLAIN. To be refined by hand per timer afterwards.
   ================================================================ */

.timer-screen.has-rounds .top-counter,
.timer-screen.has-plain .top-counter {
  display: none !important;
}

.timer-screen.has-rounds .status,
.timer-screen.has-plain .status {
  top: 1.2vh !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  text-align: center !important;
  transform: none !important;
  font-size: clamp(calc(66 * var(--px)), 9vw, calc(174 * var(--px))) !important;
  line-height: .95 !important;
}

.timer-screen.has-rounds.state-work .status,
.timer-screen.has-plain.state-work .status,
.timer-screen.has-plain.state-idle .status {
  color: var(--green) !important;
}

.timer-screen.has-rounds.state-rest .status {
  color: #4da3ff !important;
}

/* PLAIN's clock is forced white unconditionally (see below), which was
   silently beating the base ".state-rest .timer{color:blue}" rule via
   !important specificity whenever a structured/library WOD's round-less
   sub-block (Countdown/Count Up) sits in REST/BETWEEN_BLOCKS. Restore
   blue explicitly for both the status word and the clock digits. */
.timer-screen.has-plain.state-rest .status,
.timer-screen.has-plain.state-rest .timer {
  color: #4da3ff !important;
}

.timer-screen.has-rounds.state-paused .status,
.timer-screen.has-plain.state-paused .status {
  color: var(--orange) !important;
}

.timer-screen.has-rounds.state-prep .status,
.timer-screen.has-plain.state-prep .status {
  color: var(--orange) !important;
}

.timer-screen.has-plain.state-paused .timer {
  color: var(--white) !important;
}

.timer-screen.has-rounds.state-config .status,
.timer-screen.has-plain.state-config .status {
  top: 2vh !important;
  font-size: clamp(calc(28 * var(--px)), 3.8vw, calc(70 * var(--px))) !important;
  line-height: 1 !important;
  color: var(--orange) !important;
}

.timer-screen.has-rounds.state-finished .status,
.timer-screen.has-plain.state-finished .status {
  font-size: clamp(calc(34 * var(--px)), 4.8vw, calc(88 * var(--px))) !important;
  color: var(--green) !important;
}

/* Shared LED clock proportions. */
.timer-screen.has-rounds .led-char,
.timer-screen.has-plain .led-char {
  width: min(21vw, 35vh) !important;
  height: min(39vw, 55vh) !important;
}

.timer-screen.has-rounds .led-colon,
.timer-screen.has-plain .led-colon {
  width: min(3.25vw, 5.1vh) !important;
  height: min(39vw, 55vh) !important;
}

/* ROUNDS: red current round + smaller total on the left, clock right-aligned
   (same language as EMOM). */
.timer-screen.has-rounds .interval-badge {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  left: .5vw !important;
  top: 50% !important;
  width: 16vw !important;
  height: 45vh !important;
  transform: translateY(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.4vh !important;
}

.timer-screen.has-rounds .interval-number {
  color: var(--red) !important;
  font-family: "DSEG14 Classic", "Courier New", monospace !important;
  font-size: clamp(calc(140 * var(--px)), 17.7vw, calc(330 * var(--px))) !important;
  line-height: .84 !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  text-shadow: 0 0 5px currentColor, 0 0 16px currentColor !important;
}

.timer-screen.has-rounds .interval-total {
  color: var(--muted) !important;
  font-family: "DSEG14 Classic", "Courier New", monospace !important;
  font-size: clamp(calc(39 * var(--px)), 4.8vw, calc(90 * var(--px))) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
}

.timer-screen.has-rounds .timer {
  left: 16.5vw !important;
  right: .5vw !important;
  top: 50% !important;
  height: min(40vw, 56vh) !important;
  gap: min(.12vw, 2px) !important;
  color: var(--white) !important;
  justify-content: flex-end !important;
}

/* PLAIN: no badge, clock spans the full width like the pre-round AMRAP. */
.timer-screen.has-plain .timer {
  left: 1vw !important;
  right: 1vw !important;
  top: 50% !important;
  height: min(40vw, 56vh) !important;
  gap: min(.12vw, 2px) !important;
  color: var(--white) !important;
}


/* ================================================================
   v27 — Countdown/Count Up: clock right-aligned (no badge, but still
   flush right like the rest of the family) and the running-state
   "COUNTDOWN"/"COUNT UP" label hidden entirely (every other status —
   GET READY, PAUSED, SET UP TIMER, DONE/FINISHED — stays visible).
   For Time adopts the same enlarged/right-aligned family baseline as
   Countdown/Count Up, plus its own status relabel/footer treatment.
   ================================================================ */

.timer-screen.has-plain .timer {
  justify-content: flex-end !important;
}

.timer-screen.has-plain.state-idle .status {
  visibility: hidden !important;
}

.timer-screen.has-fortime .top-counter {
  display: none !important;
}

.timer-screen.has-fortime .status {
  top: 1.2vh !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  text-align: center !important;
  transform: none !important;
  font-size: clamp(calc(66 * var(--px)), 9vw, calc(174 * var(--px))) !important;
  line-height: .95 !important;
}

/* Running "IN TIME" (relabeled from "FOR TIME" by led-display.js): green,
   like every other "on pace" running state in the family. */
.timer-screen.has-fortime.state-idle .status {
  color: var(--green) !important;
}

.timer-screen.has-fortime.state-paused .status {
  color: var(--orange) !important;
}

.timer-screen.has-fortime.state-paused .timer {
  color: var(--white) !important;
}

.timer-screen.has-fortime.state-prep .status {
  color: var(--orange) !important;
}

.timer-screen.has-fortime.state-config .status {
  top: 2vh !important;
  font-size: clamp(calc(28 * var(--px)), 3.8vw, calc(70 * var(--px))) !important;
  line-height: 1 !important;
  color: var(--orange) !important;
}

/* OTC (over time cap, still running) and finished labels can be long
   ("COMPLETATO OTC"/"COMPLETED OTC"/"COMPLETADO OTC") so they stay
   compact; state-otc already inherits its red color from the base rules. */
.timer-screen.has-fortime.state-otc .status,
.timer-screen.has-fortime.state-finished .status {
  font-size: clamp(calc(34 * var(--px)), 4.8vw, calc(88 * var(--px))) !important;
}

.timer-screen.has-fortime.state-finished .status {
  color: var(--green) !important;
}

.timer-screen.has-fortime .timer {
  left: 1vw !important;
  right: 1vw !important;
  top: 50% !important;
  height: min(40vw, 56vh) !important;
  gap: min(.12vw, 2px) !important;
  color: var(--white) !important;
  justify-content: flex-end !important;
}

.timer-screen.has-fortime .led-char {
  width: min(21vw, 35vh) !important;
  height: min(39vw, 55vh) !important;
}

.timer-screen.has-fortime .led-colon {
  width: min(3.25vw, 5.1vh) !important;
  height: min(39vw, 55vh) !important;
}

/* Time cap footer ("TIME CAP mm:ss" / "NO TIME CAP"), bigger than the
   generic footer used by untouched screens. */
.timer-screen.has-fortime .footer.fortime-footer {
  left: 1vw !important;
  right: 1vw !important;
  bottom: .8vh !important;
  width: auto !important;
  text-align: center !important;
  color: var(--muted) !important;
  font-size: clamp(calc(38 * var(--px)), 4.15vw, calc(78 * var(--px))) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
  white-space: nowrap !important;
}


/* ================================================================
   v28 — For Time: time cap footer doubled in size.
   v57 — that doubling (76/8.3vw/156, on top of an already-doubled base a
   few lines up) was the actual cause of "NESSUN TIME CAP" always
   overflowing on a real TV - a ~250px ceiling at --px's max real-device
   factor, never touched by the generic .footer/.time-cap cuts elsewhere
   in this file because this more specific rule wins the cascade. Scaled
   back to noticeably bigger than the generic footer (this line is meant
   to stand out) but nowhere near double.
   v58 — confirmed fitting comfortably on-device at v57's size (no runtime
   fit-to-width rescue needed), so brought back up ~1.5x from there, same
   as the Intervals footer above - still real margin left vs. the original.
   ================================================================ */
.timer-screen.has-fortime .footer.fortime-footer {
  font-size: clamp(calc(36 * var(--px)), 3.9vw, calc(75 * var(--px))) !important;
}


/* ================================================================
   v42 — For Time (structured/library WOD block with its own position in
   the sequence, or round-based): red badge next to the clock instead of
   the full-width enlarged clock, same language/proportions as EMOM/
   Tabata/Structured Intervals ("the standard timers"). The compound
   selector (two classes) outranks the plain .has-fortime rules above it
   in specificity regardless of file order, so this cleanly overrides the
   full-width clock/no-badge layout only when has-fortime-badge is also
   present (led-display.js).
   IMPORTANT: these numbers must match has-emom/has-rounds.has-tabata/
   has-interval's OWN FINAL values (28vw badge, clock starting at
   28.5vw, 13vw digit chars, 19vw clock chars - see the "v41 ... confirmed
   correct by testing" rule further down this file), not their early/
   superseded declarations earlier in the file (16vw badge, 16.5vw clock,
   7.7vw digit, 21vw clock chars) that later rules with equal specificity
   override by simply appearing later - copying those first made the
   badge/clock look visibly out of proportion compared to every other
   badge+clock mode.
   ================================================================ */
.timer-screen.has-fortime.has-fortime-badge .interval-badge {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 28vw !important;
  height: min(40vw, 56vh) !important;
  transform: translateY(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2.6vh !important;
}

.timer-screen.has-fortime.has-fortime-badge .interval-number {
  color: var(--red) !important;
  font-family: "DSEG14 Classic", "Courier New", monospace !important;
  font-size: clamp(calc(145 * var(--px)), 18.2vw, calc(340 * var(--px))) !important;
  line-height: .84 !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  text-shadow: 0 0 5px currentColor, 0 0 16px currentColor !important;
}

.timer-screen.has-fortime.has-fortime-badge .interval-total {
  color: var(--muted) !important;
  font-family: "DSEG14 Classic", "Courier New", monospace !important;
  font-size: clamp(calc(68 * var(--px)), 8.4vw, calc(156 * var(--px))) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
}

.timer-screen.has-fortime.has-fortime-badge .timer {
  left: 28.5vw !important;
  right: .5vw !important;
}

/* .led-char/.led-colon is the SAME class the clock digits use (renderDigits)
   and the badge digits use (renderLedNumber) - these two rules must stay
   scoped through .timer specifically, or they also resize the badge's own
   digits to the clock's huge dimensions instead of leaving them to the
   dedicated .interval-number/.interval-total rules below (this is exactly
   what went wrong the first time: a giant red bar instead of a small "1"). */
.timer-screen.has-fortime.has-fortime-badge .timer .led-char {
  width: min(19vw, 31vh) !important;
  height: min(35vw, 49vh) !important;
}

.timer-screen.has-fortime.has-fortime-badge .timer .led-colon {
  width: min(2.9vw, 4.7vh) !important;
  height: min(35vw, 49vh) !important;
}

.timer-screen.has-fortime.has-fortime-badge .interval-number .led-char {
  width: min(13vw, 21.5vh) !important;
  height: min(24vw, 33vh) !important;
}

.timer-screen.has-fortime.has-fortime-badge .interval-total .led-char {
  width: min(2.7vw, 4.5vh) !important;
  height: min(5vw, 6.9vh) !important;
}


/* ================================================================
   v29 — AMRAP: two-line "ROUND COMPLETATI"/"ROUNDS COMPLETED"/
   "RONDAS COMPLETADAS" caption under the red count (already localized
   by the app; led-display.js just splits it across two lines).
   ================================================================ */
.timer-screen.has-amrap .interval-badge {
  flex-direction: column !important;
  gap: 1vh !important;
}

/* ================================================================
   v33 — Structured Intervals: the red current-interval number is
   centered inside a badge box that a previous fix already shifted to
   a negative left offset (to sit almost flush with the screen edge).
   Depending on the digit width, that centering could push part of the
   number further left than x=0, clipping it against the screen edge.
   Right-align it instead: its right edge stays anchored next to the
   timer, and any width difference is absorbed on the left, where
   there is still room, instead of clipping off-screen.
   ================================================================ */
.timer-screen.has-interval .interval-badge {
  justify-content: flex-end !important;
  padding-right: .3vw !important;
}


.timer-screen.has-amrap .interval-total {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-left: 1.2vw !important;
  color: var(--muted) !important;
  font-family: "DSEG14 Classic", "Courier New", monospace !important;
  font-size: clamp(calc(20 * var(--px)), 2.5vw, calc(46 * var(--px))) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .04em !important;
}


/* ================================================================
   v30 — Structured Intervals: bottom "ROUND x/y · INTERVALLI N"
   caption slightly bigger.
   ================================================================ */
.timer-screen.has-interval .footer.intervals-total-footer {
  /* v57 - cut roughly in half from v30's 40/4.4vw/84 (too tight a margin on
     a real TV, see the fit-to-width work above), then v58 brought it back
     up ~1.5x from that cut once confirmed on-device that the cut version no
     longer needed the runtime fit-to-width rescue at all (real headroom to
     spare) - this is comfortably readable again while still leaving that
     margin, instead of the original's near-zero margin. */
  font-size: clamp(calc(30 * var(--px)), 3.3vw, calc(63 * var(--px))) !important;
}


/* ================================================================
   v32 — Structured Intervals: the ROUND x/y numbers doubled in size;
   "ROUND", "INTERVALLI" and its count all stay at the normal caption
   size.
   ================================================================ */
.timer-screen.has-interval .intervals-round-number {
  /* v57 - was 2em (double the rest of the line); v58 brought the line's own
     base size back up (see above), so this only needs a modest bump from
     v57's 1.3em to stay proportionate - still short of the original 2em on
     purpose, real margin intact. */
  font-size: 1.9em !important;
  font-weight: 800 !important;
}


/* ================================================================
   STANDBY v14 — genuinely fixed-width clock. Orbitron is a geometric
   display face but its digits are NOT equal-width, so the clock kept
   shifting as digits changed even with a "9ch" container. Space Mono
   is an actual monospace font (every character, digits included,
   shares one identical advance width), so no digit combination can
   ever change the rendered width — no container-width hack needed.
   ================================================================ */
.standby-clock {
  font-family: "DSEG14 Classic", "Space Mono", "Courier New", monospace;
  font-weight: 700;
  text-align: center;
}


/* ================================================================
   v31 — Structured/library WODs (e.g. starting "Fight Gone Bad"):
   round-less sub-blocks (Countdown/Count Up/For Time chained inside a
   multi-block WOD) now render through the PLAIN family mode instead
   of the old tiny/untouched fallback. Their remaining footer (round
   or block info, once the bare block-type word is stripped by
   led-display.js) is shown at the same bigger size as For Time's.
   ================================================================ */
.timer-screen.has-plain .footer.plain-footer {
  font-size: clamp(calc(38 * var(--px)), 4.15vw, calc(78 * var(--px))) !important;
}


/* ================================================================
   v34 — Structured Intervals: the red current-interval number is
   always 2 digits (01, 02, ... padded), but its font-size could reach
   far wider than the 16vw badge box that holds it, so it overflowed
   and got clipped no matter how it was aligned inside the box. Shrunk
   the range so two digits always fit with room to spare, at any
   resolution (kept in vw so the margin scales too).
   ================================================================ */
.timer-screen.has-interval .interval-number {
  font-size: clamp(calc(90 * var(--px)), 10.5vw, calc(200 * var(--px))) !important;
}


/* ================================================================
   v35 — Finished label overflowing off-screen. EMOM/ROUNDS/PLAIN/For
   Time already shrink the status font for the long "WORKOUT
   COMPLETE"/"COMPLETATO"-style finish message, but Structured
   Intervals and AMRAP didn't have an equivalent override and kept
   their much bigger running-status size, wide enough to run off both
   edges of the screen even though the text itself is centered. Added
   as one unscoped rule instead of repeating it per mode, so it also
   covers any future/unclassified mode that reaches state-finished
   without its own override — a mode-specific rule (higher selector
   specificity) still wins wherever one already exists.
   ================================================================ */
.timer-screen.state-finished .status {
  font-size: clamp(calc(34 * var(--px)), 4.8vw, calc(88 * var(--px))) !important;
}


/* ================================================================
   v37 — Tabata / manual Intervals: the REST status word already turned
   blue (state-rest .status), but the clock digits didn't - has-rounds
   unconditionally forces the clock white with !important for every
   state, silently beating the base ".state-rest .timer" rule that has
   no has-rounds prefix to win the specificity tie. Structured
   Intervals already had this exact override; ROUNDS never did.
   ================================================================ */
.timer-screen.has-rounds.state-rest .timer {
  color: var(--blue) !important;
}


/* ================================================================
   v38 — EMOM: current round number and total-rounds number both
   slightly bigger, with a bit more breathing room between them.
   ================================================================ */
.timer-screen.has-emom .interval-number {
  font-size: clamp(calc(145 * var(--px)), 18.2vw, calc(340 * var(--px))) !important;
}

.timer-screen.has-emom .interval-total {
  font-size: clamp(calc(68 * var(--px)), 8.4vw, calc(156 * var(--px))) !important;
}

.timer-screen.has-emom .interval-badge {
  gap: 2.2vh !important;
}


/* ================================================================
   v39 — Tabata reuses EMOM's exact numbers/spacing (has-rounds already
   gives it EMOM's badge layout; only the sizes needed to match).
   Higher specificity than has-rounds' own rules, so this always wins
   regardless of source order.
   ================================================================ */
.timer-screen.has-rounds.has-tabata .interval-number {
  font-size: clamp(calc(145 * var(--px)), 18.2vw, calc(340 * var(--px))) !important;
}

.timer-screen.has-rounds.has-tabata .interval-total {
  font-size: clamp(calc(68 * var(--px)), 8.4vw, calc(156 * var(--px))) !important;
}

.timer-screen.has-rounds.has-tabata .interval-badge {
  gap: 2.2vh !important;
}


/* ================================================================
   v40 — AMRAP: completed-rounds count roughly tripled and moved to sit
   close to the clock instead of hugging the far-left screen edge -
   widened its box and right-aligned the number/caption inside it, then
   pushed the clock's own left edge over to make room so the two don't
   overlap. Caption text ("ROUND COMPLETATI") doubled, with more gap
   between it and the red number above it.
   ================================================================ */
.timer-screen.has-amrap .interval-badge {
  width: 34vw !important;
  align-items: flex-end !important;
  padding-right: .6vw !important;
  gap: 2.2vh !important;
}

.timer-screen.has-amrap .interval-number {
  font-size: clamp(calc(336 * var(--px)), 42.6vw, calc(798 * var(--px))) !important;
}

.timer-screen.has-amrap .interval-total {
  align-items: flex-end !important;
  margin-left: 0 !important;
  font-size: clamp(calc(40 * var(--px)), 5vw, calc(92 * var(--px))) !important;
}

.timer-screen.has-amrap .timer {
  left: 35vw !important;
}


/* ================================================================
   v41 — Manual Intervals reuses AMRAP's exact treatment (has-rounds
   gives it the current/total round numbers; AMRAP's sizing/position is
   applied on top). Higher specificity than has-rounds' own rules.
   ================================================================ */
.timer-screen.has-rounds.has-manual-intervals .interval-badge {
  width: 34vw !important;
  align-items: flex-end !important;
  padding-right: .6vw !important;
  gap: 2.2vh !important;
}

.timer-screen.has-rounds.has-manual-intervals .interval-number {
  font-size: clamp(calc(336 * var(--px)), 42.6vw, calc(798 * var(--px))) !important;
}

.timer-screen.has-rounds.has-manual-intervals .interval-total {
  font-size: clamp(calc(40 * var(--px)), 5vw, calc(92 * var(--px))) !important;
}

.timer-screen.has-rounds.has-manual-intervals .timer {
  left: 35vw !important;
}


/* ================================================================
   v42 — Structured Intervals: current-interval number slightly bigger.
   The "INTERVALLI N" count number now reuses .intervals-round-number
   (see led-display.js) so it renders at the same size as the ROUND
   x/y numbers - no separate rule needed here for that part.
   ================================================================ */
.timer-screen.has-interval .interval-number {
  font-size: clamp(calc(104 * var(--px)), 12.1vw, calc(230 * var(--px))) !important;
}


/* ================================================================
   v43 — standby v36 turned out too big on a real display; scaled back
   from roughly 5x/2x to a more moderate ~2.5x logo / ~1.4x clock and
   weekday/date.
   ================================================================ */
.standby-logo {
  width: min(45vw, calc(2500 * var(--px)));
  max-height: 34vh;
}

.standby-clock {
  font-size: clamp(calc(190 * var(--px)), 27vw, calc(550 * var(--px)));
}

.standby-weekday {
  font-size: clamp(calc(50 * var(--px)), 6vw, calc(115 * var(--px)));
}

.standby-date {
  font-size: clamp(calc(40 * var(--px)), 4.4vw, calc(84 * var(--px)));
}


/* ================================================================
   v56 — standby still too big on a real Chromecast display even after
   v43's scale-back. Clock and weekday/date roughly a third of v43's
   size each (logo untouched - not reported as a problem).
   ================================================================ */
.standby-clock {
  font-size: clamp(calc(60 * var(--px)), 9vw, calc(180 * var(--px)));
}

.standby-weekday {
  font-size: clamp(calc(16 * var(--px)), 2vw, calc(38 * var(--px)));
}

.standby-date {
  font-size: clamp(calc(13 * var(--px)), 1.5vw, calc(28 * var(--px)));
}


/* ================================================================
   v44 — AMRAP: the red completed-rounds badge was vertically centered
   on the whole screen (top:50%, translateY(-50%)), which put it far
   below the "AMRAP" title with a lot of dead space above it. Pinned it
   near the top instead, roughly level with the title. Caption's two
   lines ("ROUND"/"COMPLETATI") centered on each other instead of
   right-edge-aligned, and given a bit more room from the number above.
   ================================================================ */
.timer-screen.has-amrap .interval-badge {
  top: 9vh !important;
  transform: none !important;
  gap: 3vh !important;
}

.timer-screen.has-amrap .interval-total {
  align-items: center !important;
}


/* ================================================================
   v45 — the round/interval badge numbers (current round, total rounds,
   AMRAP completed count, Structured Intervals interval number) now
   render with the exact same 7-segment LED code as the main clock
   (see renderLedNumber in led-display.js) instead of text in a font.
   Sizing is plain CSS box dimensions (min(vw, vh), same technique as
   the main clock's own .led-char), never a font-size clamp() ceiling -
   nothing here can be affected by the viewport/density issue that
   --px corrects for elsewhere, and nothing here depends on font
   metrics that could make two digits render at different sizes
   between updates. AMRAP's "ROUND COMPLETATI" text caption is
   unaffected - it's still real text, only the numbers changed.

   Also fixes Tabata/manual Intervals: they publish their
   TimerProjectionState through two independent code paths (a live
   Composable + a background-safe ticker), and only one of them
   threads screenKind through, so the HDMI receiver was alternating
   between the has-tabata/has-manual-intervals styling and the
   generic has-rounds fallback on every publish from the other path.
   That still needs its own fix in Kotlin; this change at least makes
   both paths render at a stable, consistent size in the meantime,
   since neither now depends on which font-size rule is active.
   ================================================================ */
.interval-number,
.interval-total {
  display: flex;
  align-items: center;
  justify-content: center;
}

.interval-number .led-char {
  gap: min(.4vw, 5px);
}

/* Structured Intervals: current interval number. */
.timer-screen.has-interval .interval-number .led-char {
  width: min(4.8vw, 7.8vh) !important;
  height: min(8.7vw, 12vh) !important;
}

/* EMOM / Tabata: current round (red) and total rounds (gray), with a
   visible gap between the two now that both are fixed-size boxes
   instead of text whose line-height could be squeezed. */
.timer-screen.has-emom .interval-badge,
.timer-screen.has-rounds.has-tabata .interval-badge {
  gap: 2.6vh !important;
}

.timer-screen.has-emom .interval-number .led-char,
.timer-screen.has-rounds.has-tabata .interval-number .led-char {
  width: min(7.7vw, 12.6vh) !important;
  height: min(14vw, 19.4vh) !important;
}

.timer-screen.has-emom .interval-total .led-char,
.timer-screen.has-rounds.has-tabata .interval-total .led-char {
  width: min(2.7vw, 4.5vh) !important;
  height: min(5vw, 6.9vh) !important;
}

/* AMRAP / manual Intervals: completed/current round count (red, ~3x
   EMOM's), positioned level with the clock instead of centered on the
   whole screen, with the number top-aligned inside that space instead
   of vertically centered within it. */
.timer-screen.has-amrap .interval-badge,
.timer-screen.has-rounds.has-manual-intervals .interval-badge {
  top: 50% !important;
  transform: translateY(-50%) !important;
  justify-content: flex-start !important;
  gap: 4vh !important;
}

.timer-screen.has-amrap .interval-number .led-char,
.timer-screen.has-rounds.has-manual-intervals .interval-number .led-char {
  width: min(11vw, 18.2vh) !important;
  height: min(20vw, 28vh) !important;
}

.timer-screen.has-rounds.has-manual-intervals .interval-total .led-char {
  width: min(3vw, 5vh) !important;
  height: min(5.6vw, 7.7vh) !important;
}


/* ================================================================
   v46 — AMRAP / manual Intervals redesign: the badge now sits right
   beside the clock (small left column) instead of far away with a lot
   of dead space, at a slightly smaller size than v45's attempt. The
   clock itself is shrunk and its digits start right after the badge
   (justify-content: flex-start) instead of hugging the far screen
   edge, so the two form one visually connected group. Identical rules
   for has-amrap and has-manual-intervals, as requested.
   ================================================================ */
.timer-screen.has-amrap .interval-badge,
.timer-screen.has-rounds.has-manual-intervals .interval-badge {
  left: 2vw !important;
  width: 20vw !important;
  align-items: center !important;
}

.timer-screen.has-amrap .interval-number .led-char,
.timer-screen.has-rounds.has-manual-intervals .interval-number .led-char {
  width: min(8vw, 13vh) !important;
  height: min(14.5vw, 20vh) !important;
}

.timer-screen.has-amrap .interval-total .led-char {
  width: min(3vw, 5vh) !important;
  height: min(5.6vw, 7.7vh) !important;
}

.timer-screen.has-amrap .timer,
.timer-screen.has-rounds.has-manual-intervals .timer {
  left: 24vw !important;
  right: 2vw !important;
  justify-content: flex-start !important;
}

.timer-screen.has-amrap .led-char,
.timer-screen.has-rounds.has-manual-intervals .led-char {
  width: min(14vw, 23vh) !important;
  height: min(26vw, 36vh) !important;
}

.timer-screen.has-amrap .led-colon,
.timer-screen.has-rounds.has-manual-intervals .led-colon {
  width: min(2.2vw, 3.4vh) !important;
  height: min(26vw, 36vh) !important;
}


/* ================================================================
   v47 — AMRAP / manual Intervals, corrected: v46 shrank the clock too
   far and left it flex-start-aligned, which abandoned the right-edge
   alignment every other mode uses and left a dead gap on the right
   instead of the two halves filling the screen together. Fixed here:
   - Red number in a wider left column, vertically centered at the
     exact same height as the clock (top:50%, same translateY/height),
     instead of pinned to the top on its own.
   - Clock back to justify-content:flex-end (hugs the right edge like
     EMOM/Tabata/AMRAP always have), shrunk just enough that its digits
     naturally start right after the badge's column with only a small
     gap - the two together span the full screen width edge to edge.
   - Caption constrained to the badge's own column width so it can't
     overflow past it.
   ================================================================ */
.timer-screen.has-amrap .interval-badge,
.timer-screen.has-rounds.has-manual-intervals .interval-badge {
  left: 0 !important;
  width: 28vw !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: min(40vw, 56vh) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2vh !important;
}

.timer-screen.has-amrap .interval-number .led-char,
.timer-screen.has-rounds.has-manual-intervals .interval-number .led-char {
  width: min(13vw, 21.5vh) !important;
  height: min(24vw, 33vh) !important;
}

.timer-screen.has-amrap .interval-total,
.timer-screen.has-rounds.has-manual-intervals .interval-total {
  width: 100% !important;
}

/* ================================================================
   v46 — the "ROUND COMPLETATI"/"ROUNDS COMPLETED"/etc caption was
   centered inside its badge column, which itself sits flush against
   the screen's left edge (left: 0, see the has-amrap/has-manual-
   intervals .interval-badge rules above). A short line ("ROUND")
   centers fine, but a longer localized line ("COMPLETATI") is wider
   than the badge column and, centered, overflows equally left and
   right - straight off the physical screen on the left side, since
   there is no margin left to absorb it there. Confirmed on-device on
   two unrelated real displays (a Samsung TV and a separate PC
   monitor, different physicalWidth/devicePixelRatio on each), so this
   is a plain text-width-vs-box overflow, unrelated to the --px HDMI
   density correction. Left-aligning instead of centering pins every
   line's left edge at the badge's own left edge (x=0) so it can never
   go negative; any extra width from a longer line is absorbed on the
   right, where the gap to the main clock leaves room for it.
   ================================================================ */
.timer-screen.has-amrap .interval-total,
.timer-screen.has-rounds.has-manual-intervals .interval-total {
  align-items: flex-start !important;
}

.timer-screen.has-amrap .timer,
.timer-screen.has-rounds.has-manual-intervals .timer {
  left: 30vw !important;
  right: .5vw !important;
  justify-content: flex-end !important;
}

.timer-screen.has-amrap .led-char,
.timer-screen.has-rounds.has-manual-intervals .led-char {
  width: min(17vw, 28vh) !important;
  height: min(31.6vw, 44.5vh) !important;
}

.timer-screen.has-amrap .led-colon,
.timer-screen.has-rounds.has-manual-intervals .led-colon {
  width: min(2.6vw, 4.1vh) !important;
  height: min(31.6vw, 44.5vh) !important;
}


/* ================================================================
   v48 — clock still too small and left too big a gap after the badge.
   Bigger digits close both problems together: right-aligned (flex-
   end) digits that need more room naturally extend further left,
   toward the badge, as they grow.
   ================================================================ */
.timer-screen.has-amrap .timer,
.timer-screen.has-rounds.has-manual-intervals .timer {
  left: 29vw !important;
}

.timer-screen.has-amrap .led-char,
.timer-screen.has-rounds.has-manual-intervals .led-char {
  width: min(20.5vw, 33.5vh) !important;
  height: min(37.5vw, 52.5vh) !important;
}

.timer-screen.has-amrap .led-colon,
.timer-screen.has-rounds.has-manual-intervals .led-colon {
  width: min(3.1vw, 5.1vh) !important;
  height: min(37.5vw, 52.5vh) !important;
}


/* v49 — one more small bump, per feedback ("ancora leggermente più grande"). */
.timer-screen.has-amrap .timer,
.timer-screen.has-rounds.has-manual-intervals .timer {
  left: 28.5vw !important;
}

/* v50 — v49 was slightly too big ("leggermente più piccolo"), small step back. */
.timer-screen.has-amrap .led-char,
.timer-screen.has-rounds.has-manual-intervals .led-char {
  width: min(19vw, 31vh) !important;
  height: min(35vw, 49vh) !important;
}

.timer-screen.has-amrap .led-colon,
.timer-screen.has-rounds.has-manual-intervals .led-colon {
  width: min(2.9vw, 4.7vh) !important;
  height: min(35vw, 49vh) !important;
}


/* ================================================================
   v51 — the AMRAP/manual-Intervals layout (badge column + red number
   size + clock size/position) confirmed correct by testing, now
   applied identically to EMOM, Tabata and Structured Intervals so
   every badge+clock mode looks consistent. EMOM/Tabata's own gray
   total-rounds number underneath keeps its own size (v38/v39) - only
   the red current-number and the clock changed here.
   ================================================================ */
.timer-screen.has-emom .interval-badge,
.timer-screen.has-rounds.has-tabata .interval-badge,
.timer-screen.has-interval .interval-badge {
  left: 0 !important;
  width: 28vw !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: min(40vw, 56vh) !important;
  align-items: center !important;
  justify-content: center !important;
}

.timer-screen.has-emom .interval-number .led-char,
.timer-screen.has-rounds.has-tabata .interval-number .led-char,
.timer-screen.has-interval .interval-number .led-char {
  width: min(13vw, 21.5vh) !important;
  height: min(24vw, 33vh) !important;
}

/* Structured Intervals' status ("WORK"/"REST · INTERVALLO n/N") used to
   start at left:17vw to clear the old, narrower 16vw badge - now centered
   full-width like every other mode, clearing the new wider 28vw badge too. */
.timer-screen.has-interval .status {
  left: 0 !important;
  right: 0 !important;
}

.timer-screen.has-emom .timer,
.timer-screen.has-rounds.has-tabata .timer,
.timer-screen.has-interval .timer {
  left: 28.5vw !important;
  right: .5vw !important;
  justify-content: flex-end !important;
}

.timer-screen.has-emom .led-char,
.timer-screen.has-rounds.has-tabata .led-char,
.timer-screen.has-interval .led-char {
  width: min(19vw, 31vh) !important;
  height: min(35vw, 49vh) !important;
}

.timer-screen.has-emom .led-colon,
.timer-screen.has-rounds.has-tabata .led-colon,
.timer-screen.has-interval .led-colon {
  width: min(2.9vw, 4.7vh) !important;
  height: min(35vw, 49vh) !important;
}

/* Structured/manual Intervals only (not EMOM/Tabata, which share the box
   above but aren't reported as clipped): its current-interval number is
   commonly two digits, which at the shared EMOM/Tabata digit size (13vw
   per char) renders about 26.4vw wide inside the 28vw badge box - a bare
   1.6vw margin split both sides when centered, easily eaten by any real
   HDMI overscan. Shrinking the digit box itself (not the outer badge
   box/positioning, and not touching justify-content - kept at the
   inherited "center" from the shared has-emom/has-tabata/has-interval
   rule, deliberately not overridden here) is the whole fix: centered at
   9vw/char leaves roughly 4.8vw of margin on each side, real headroom
   instead of hoping alignment tricks alone are enough. */
.timer-screen.has-interval .interval-number .led-char {
  width: min(9vw, 15vh) !important;
  height: min(17vw, 23.5vh) !important;
}


/* ================================================================
   v52 — For Time / Count Up / Countdown (and any round-less structured
   sub-block) had no badge stealing width, so their clock kept its
   original bigger size while every badge+clock mode got shrunk to fit
   one - switching between WOD types made the clock visibly change
   scale for no reason. Same digit size everywhere now; position
   (full width, right-aligned) is unchanged since there's no badge here.
   ================================================================ */
.timer-screen.has-fortime .led-char,
.timer-screen.has-plain .led-char {
  width: min(19vw, 31vh) !important;
  height: min(35vw, 49vh) !important;
}

.timer-screen.has-fortime .led-colon,
.timer-screen.has-plain .led-colon {
  width: min(2.9vw, 4.7vh) !important;
  height: min(35vw, 49vh) !important;
}


/* ================================================================
   v53 — "CONFIGURA IL TIMER" (state-config) had no clock color rule of
   its own anywhere, generic or per-mode. EMOM/Tabata/manual Intervals/
   AMRAP/For Time happen to force the clock white unconditionally
   (regardless of state) for other reasons, which accidentally covered
   this too - Countdown/Count Up/Structured Intervals don't have such a
   blanket rule, so their clock fell back to the base ".timer{color:
   red}" default while setting up the timer, before anything is even
   running. One rule for every mode instead of patching each
   separately.
   ================================================================ */
.timer-screen.state-config .timer {
  color: var(--white) !important;
}


/* ================================================================
   v54 — AMRAP (standalone has no time cap concept, but a structured/
   library WOD's AMRAP sub-block with one configured does): the generic
   .time-cap spans left:8vw to right:8vw, which sits inside the badge's
   0-28vw column and overlapped its caption. Confined to the clock's
   own region instead, matching its left/right boundaries.
   ================================================================ */
.timer-screen.has-amrap .time-cap {
  left: 29vw !important;
  right: .5vw !important;
}

/* v55 — the left/right fix in v54 wasn't enough: at its generic top:72.5vh the
   time cap still sat over the lower part of the clock digits, since AMRAP's
   clock box is taller than the mode that position was originally tuned for.
   Moved to the bottom row instead, where the (otherwise hidden/unused for
   AMRAP) footer would normally sit - same idea as the "Blocco x/y" line for
   other modes, not floating in the middle of the screen. */
.timer-screen.has-amrap .time-cap {
  top: auto !important;
  bottom: 1.5vh !important;
}

/* ================================================================
   v56 — same overflow mechanism as v46's interval-total fix, mirrored
   on the right: v54 moved this box to right: .5vw (almost flush with
   the screen's right edge), but the generic .time-cap rule still
   centers its nowrap text within the box. A long localized string
   ("NESSUN TIME CAP") wider than the box overflows equally left and
   right when centered, and the right side has essentially no margin
   left to absorb it - straight off the physical screen. Right-
   aligning instead pins the text's right edge at the box's own right
   edge (never past it), absorbing any extra width to the left, where
   the box already has ~70vw of room. Confirmed on-device on two
   unrelated real displays (Samsung TV and a separate PC monitor).
   ================================================================ */
.timer-screen.has-amrap .time-cap {
  text-align: right !important;
}

/* ================================================================
   v59 — Structured Intervals' current-interval badge was still showing up
   next to the clock on the right on a real TV instead of the fixed left
   badge column EMOM/Tabata use, despite v51 already unifying the
   left/width for .interval-badge - some earlier, more specific rule
   elsewhere in this file's long history was still winning for at least
   one of the properties that matters for where the number actually
   renders. Rather than keep hunting for which of the many past overrides
   is still interfering, this is a final, unmistakably-last, fully
   explicit copy of EMOM/Tabata's exact badge position AND digit size
   (matching v51 + the pre-v51-Intervals-specific-shrink at v51's own
   line 1931 - undone here per explicit request: same size as EMOM/Tabata,
   not a smaller Intervals-only one) so there's no ambiguity left about
   which rule is meant to win.
   ================================================================ */
.timer-screen.has-interval .interval-badge {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: 28vw !important;
  height: min(40vw, 56vh) !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-right: 0 !important;
}

.timer-screen.has-interval .interval-number .led-char {
  width: min(13vw, 21.5vh) !important;
  height: min(24vw, 33vh) !important;
}

/* ================================================================
   v60 — standby screen (logo/clock/weekday/date) scaled up ~1.7x from
   v56's real-device-tuned size, per explicit request.
   ================================================================ */
.standby-logo {
  width: min(76.5vw, calc(4250 * var(--px))) !important;
  max-height: 58vh !important;
}

.standby-clock {
  font-size: clamp(calc(102 * var(--px)), 15.3vw, calc(306 * var(--px))) !important;
}

.standby-weekday {
  font-size: clamp(calc(27 * var(--px)), 3.4vw, calc(65 * var(--px))) !important;
}

.standby-date {
  font-size: clamp(calc(22 * var(--px)), 2.6vw, calc(48 * var(--px))) !important;
}

/* ================================================================
   v61 — standby screen still felt a bit small after v60's ~1.7x bump;
   another ~1.2x on top of that per follow-up request.
   ================================================================ */
.standby-logo {
  width: min(92vw, calc(5100 * var(--px))) !important;
  max-height: 70vh !important;
}

.standby-clock {
  font-size: clamp(calc(122 * var(--px)), 18.4vw, calc(367 * var(--px))) !important;
}

.standby-weekday {
  font-size: clamp(calc(32 * var(--px)), 4.1vw, calc(78 * var(--px))) !important;
}

.standby-date {
  font-size: clamp(calc(26 * var(--px)), 3.1vw, calc(58 * var(--px))) !important;
}

/* ================================================================
   v62 — v61 turned out a bit too big; scaled back down ~15% from there
   (still bigger than the original v56 baseline, just not as much as v61).
   ================================================================ */
.standby-logo {
  width: min(78vw, calc(4335 * var(--px))) !important;
  max-height: 60vh !important;
}

.standby-clock {
  font-size: clamp(calc(104 * var(--px)), 15.6vw, calc(312 * var(--px))) !important;
}

.standby-weekday {
  font-size: clamp(calc(27 * var(--px)), 3.5vw, calc(66 * var(--px))) !important;
}

.standby-date {
  font-size: clamp(calc(22 * var(--px)), 2.6vw, calc(49 * var(--px))) !important;
}

/* ================================================================
   v63 — standby screen still a touch too big after v62; another ~10%
   reduction on top of that.
   ================================================================ */
.standby-logo {
  width: min(70vw, calc(3900 * var(--px))) !important;
  max-height: 54vh !important;
}

.standby-clock {
  font-size: clamp(calc(94 * var(--px)), 14vw, calc(281 * var(--px))) !important;
}

.standby-weekday {
  font-size: clamp(calc(24 * var(--px)), 3.15vw, calc(59 * var(--px))) !important;
}

.standby-date {
  font-size: clamp(calc(20 * var(--px)), 2.3vw, calc(44 * var(--px))) !important;
}

/* ================================================================
   v64 — standby screen still too big after v63; another ~15% reduction.
   ================================================================ */
.standby-logo {
  width: min(59.5vw, calc(3315 * var(--px))) !important;
  max-height: 46vh !important;
}

.standby-clock {
  font-size: clamp(calc(80 * var(--px)), 11.9vw, calc(239 * var(--px))) !important;
}

.standby-weekday {
  font-size: clamp(calc(20 * var(--px)), 2.7vw, calc(50 * var(--px))) !important;
}

.standby-date {
  font-size: clamp(calc(17 * var(--px)), 1.95vw, calc(37 * var(--px))) !important;
}

/* ================================================================
   v65 — Intervals' badge box sits flush against the left edge (left:0,
   see v59), and its digit(s) were centered inside it - the same overflow
   mechanism as v46/v56 elsewhere in this file: centering content in a box
   with zero margin on one side means any extra width (a two-digit
   interval count, real-device rounding) bleeds off screen on that side
   instead of into open space. Left-aligning pins the digit's own left
   edge at the badge's left edge (x=0, never negative) and lets any extra
   width grow rightward, where the badge's own 28vw column still has room
   before the clock starts. EMOM/Tabata/AMRAP/manual-Intervals keep their
   existing center alignment untouched - only Intervals was reported
   affected.
   ================================================================ */
.timer-screen.has-interval .interval-badge {
  justify-content: flex-start !important;
}