/* webapp/css/app_run.css — экран пробежки и итога: большое табло, кнопки «пауза» и «финиш», отсчёт 3-2-1.
   Как в жизни: табло на стадионе — время видно издалека, а кнопки большие, чтобы попасть на бегу. */

.status-line { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-press); position: relative; flex-shrink: 0; }
.pulse::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--brand);
  animation: ring 1.6s ease-out infinite; }
.pulse.off { background: var(--text-muted); }
.pulse.off::after { display: none; }
@keyframes ring { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

.chip-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--bg-elevated); color: var(--icon-idle); font-size: 13px; font-weight: 600; }
.chip-live.on { background: var(--accent-soft); color: var(--accent-hover); }

.timer { font-family: var(--font-display); font-size: 52px; letter-spacing: .03em; line-height: 1; text-align: center;
  font-variant-numeric: tabular-nums; }
.big3 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 6px; }
.big3 .v { font-family: var(--font-display); font-size: 24px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.big3 .k { font-size: 12px; color: var(--text-secondary); font-weight: 500; margin-top: 2px; }
.now-pace { text-align: center; color: var(--text-secondary); font-size: 13px; }

.controls { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 4px 0; }
.ctl { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elevated); color: var(--graphite); }
.ctl:active { transform: scale(.95); }
.ctl.main { width: 84px; height: 84px; background: var(--brand); color: var(--graphite); box-shadow: 0 8px 20px rgba(56, 189, 248, .45); }
.ctl.stop { background: var(--graphite); color: #fff; position: relative; }
.ctl-label { font-size: 12px; color: var(--text-secondary); text-align: center; margin-top: 6px; font-weight: 600; }
.ctl-wrap { display: flex; flex-direction: column; align-items: center; }
/* «Финиш» держим 1 секунду: по краю бежит кольцо — случайное касание пробежку не закончит */
.ctl.stop svg.ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); }
.ctl.stop svg.ring circle { fill: none; stroke: var(--brand); stroke-width: 4; stroke-dasharray: 220; stroke-dashoffset: 220; }
.ctl.stop.holding svg.ring circle { transition: stroke-dashoffset 1s linear; stroke-dashoffset: 0; }

/* отсчёт 3-2-1 */
.countdown { position: fixed; inset: 0; z-index: 70; background: rgba(255, 255, 255, .92); display: grid; place-items: center; }
.countdown .n { font-family: var(--font-display); font-size: 150px; color: var(--brand-press); animation: tick 1s ease-out both; }
.countdown .skip { position: absolute; bottom: calc(var(--safe-bottom) + 40px); left: 0; right: 0; text-align: center; color: var(--text-secondary); }
@keyframes tick { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(.9); opacity: .9; } }

/* итог */
.hero-km { display: flex; align-items: baseline; gap: 10px; }
.hero-km .v { font-family: var(--font-display); font-size: 58px; line-height: 1; letter-spacing: .02em; }
.hero-km .u { font-family: var(--font-display); font-size: 22px; color: var(--accent-hover); }
.food { color: var(--accent-hover); font-weight: 600; font-size: 14px; }