:root {
  --bg: #090b10;
  --panel: #11151d;
  --panel-2: #171d28;
  --text: #f3f6fb;
  --muted: #8c96a8;
  --accent: #ff6b35;
  --accent-2: #ffb347;
  --ok: #53d18a;
  --danger: #ff5d73;
  --line: rgba(255,255,255,.08);
}
* { box-sizing: border-box; }
.local-warning { margin:0 0 14px; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,179,71,.35); background:rgba(255,179,71,.08); color:#ffd39a; font-size:13px; line-height:1.55; }
.local-warning code { color:#fff; background:rgba(255,255,255,.08); padding:2px 5px; border-radius:6px; }
.secondary-btn:not(:disabled), .seg:not(:disabled), .text-btn:not(:disabled), .quit-btn:not(:disabled), .primary-btn:not(:disabled) { cursor:pointer; }

html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
body { min-height: 100svh; }
button { font: inherit; }
.app-shell { max-width: 980px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.eyebrow, .kicker { margin:0 0 4px; color:var(--accent-2); font-size:11px; font-weight:800; letter-spacing:.18em; }
h1 { margin:0; font-size:24px; letter-spacing:.03em; }
.privacy-pill { font-size:11px; padding:8px 10px; border:1px solid var(--line); color:var(--muted); border-radius:999px; white-space:nowrap; }
.screen { display:none; }
.screen.active { display:block; }
.hero-card, .control-card, .history-card, .race-card, .result-card { background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); border:1px solid var(--line); border-radius:24px; }
.hero-card { padding:24px; overflow:hidden; position:relative; }
.hero-card::after { content:""; position:absolute; width:200px; height:200px; border-radius:50%; background:var(--accent); filter:blur(90px); opacity:.12; right:-60px; top:-100px; }
.hero-copy h2 { margin:4px 0 10px; max-width:620px; font-size:clamp(30px, 6vw, 54px); line-height:1.03; }
.hero-copy p { color:var(--muted); line-height:1.6; max-width:640px; margin:0; }
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; }
.metric-row > div { background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:4px; }
.metric-row strong { font-size:24px; }
.metric-row span { font-size:10px; color:var(--muted); letter-spacing:.12em; }
.control-card, .history-card { padding:18px; margin-top:14px; }
.section-label { font-size:12px; color:var(--muted); }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:#080a0e; padding:5px; border-radius:14px; margin:8px 0 16px; }
.seg { border:0; background:transparent; color:var(--muted); border-radius:10px; padding:11px 8px; font-weight:800; font-size:12px; }
.seg.active { background:var(--panel-2); color:var(--text); }
.camera-check { display:grid; grid-template-columns:minmax(280px,420px) minmax(180px,1fr); gap:16px; align-items:start; }
.camera-preview-wrap { width:100%; aspect-ratio:3 / 4; min-height:0; background:#05070a; border-radius:18px; overflow:hidden; position:relative; }
.camera-preview-wrap video, .camera-preview-wrap canvas, .camera-panel video, .camera-panel canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:scaleX(-1); }
.camera-preview-wrap canvas, .camera-panel canvas { pointer-events:none; }
.guide-frame { position:absolute; inset:7% 15%; border:1px dashed rgba(255,255,255,.28); border-radius:40% 40% 18% 18%; }
.check-copy h3 { margin:6px 0 8px; }
.check-copy p { margin:0 0 12px; color:var(--muted); font-size:13px; }
.check-copy ul { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.check-copy li { color:var(--muted); font-size:13px; }
.check-copy li::before { content:"○"; display:inline-block; width:20px; }
.check-copy li.ok { color:var(--ok); }
.check-copy li.ok::before { content:"●"; }
.button-row { display:grid; grid-template-columns:1fr 1.4fr; gap:10px; margin-top:16px; }
.primary-btn,.secondary-btn,.quit-btn { border:0; border-radius:16px; min-height:52px; font-weight:900; letter-spacing:.04em; }
.primary-btn { color:#111; background:linear-gradient(135deg,var(--accent-2),var(--accent)); }
.primary-btn:disabled { opacity:.28; }
.secondary-btn { color:var(--text); background:var(--panel-2); border:1px solid var(--line); }
.fineprint { color:var(--muted); font-size:11px; margin:10px 0 0; }
.env-status { color:var(--muted); font-size:11px; margin:6px 0 0; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; }
.env-status.ok { color:var(--ok); }
.env-status.bad { color:#ffb0bc; }
.section-title-row { display:flex; align-items:center; justify-content:space-between; }
.section-title-row h3 { margin:0; }
.text-btn { border:0; background:transparent; color:var(--muted); }
.history-list { margin-top:12px; display:grid; gap:8px; }
.history-item { display:grid; grid-template-columns:1fr auto; gap:12px; padding:12px 2px; border-top:1px solid var(--line); }
.history-item:first-child { border-top:0; }
.history-item strong { display:block; }
.history-item span { color:var(--muted); font-size:12px; }
.empty { color:var(--muted); font-size:13px; padding:10px 0; }
.workout-head { display:flex; align-items:center; justify-content:space-between; margin:6px 0 12px; }
.phase-chip { display:inline-flex; padding:7px 10px; border-radius:999px; font-weight:900; font-size:11px; letter-spacing:.08em; }
.phase-chip.work { background:rgba(255,107,53,.18); color:#ff966f; }
.phase-chip.rest { background:rgba(83,209,138,.14); color:#7be3a9; }
.set-label { color:var(--muted); font-size:12px; margin-left:8px; }
.timer { font-size:46px; font-weight:900; font-variant-numeric:tabular-nums; }
.duel-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:760px; margin:0 auto; align-items:start; }
.duel-panel { position:relative; overflow:hidden; border-radius:22px; min-height:0; aspect-ratio:3 / 4; background:#05070a; border:1px solid var(--line); }
.panel-label { position:absolute; z-index:4; top:12px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; }
.panel-label span { font-size:11px; letter-spacing:.12em; font-weight:900; }
.panel-label strong { font-size:28px; }
.camera-hint { position:absolute; z-index:4; bottom:12px; left:12px; right:12px; text-align:center; background:rgba(0,0,0,.5); color:#fff; padding:9px; border-radius:12px; font-size:12px; }
.pacer-panel { background:radial-gradient(circle at 50% 40%, #222a36 0, #0c1017 62%); }
.pacer-stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; padding-top:35px; }
#pacerSvg { width:min(90%,320px); height:auto; overflow:visible; }
.pacer-body line, .pacer-body circle { stroke:#f3f6fb; stroke-width:13; stroke-linecap:round; fill:none; }
.pacer-body #head { fill:#1b2029; }
.pacer-body #mouth { fill:none; stroke:#f3f6fb; stroke-width:5; stroke-linecap:round; }
.sweat { opacity:0; }
.sweat path { fill:#80d8ff; stroke:none; }
.pacer-mood { color:var(--muted); font-size:12px; letter-spacing:.16em; font-weight:800; }
.race-card { margin-top:10px; padding:14px; }
.race-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.race-stats span { display:block; color:var(--muted); font-size:10px; }
.race-stats strong { font-size:22px; }
.timeline { height:9px; border-radius:999px; background:#080a0e; margin-top:12px; overflow:hidden; position:relative; }
.timeline::after { content:""; display:block; height:100%; width:var(--progress,0%); background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:inherit; }
.quit-btn { width:100%; margin-top:10px; background:transparent; color:var(--muted); border:1px solid var(--line); min-height:44px; }
.result-card { padding:30px 20px; text-align:center; margin-top:8vh; }
.result-card h2 { font-size:58px; margin:8px 0; }
.result-card p { color:var(--muted); }
.set-breakdown { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:24px 0; }
.set-breakdown div { border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:14px; padding:12px 6px; }
.set-breakdown strong { display:block; font-size:20px; }
.set-breakdown span { color:var(--muted); font-size:10px; }
@media (max-width:720px) {
  .camera-check { grid-template-columns:1fr; }
  .camera-preview-wrap { width:min(100%, 430px); margin:0 auto; min-height:0; aspect-ratio:3 / 4; }
  .check-copy { display:none; }
  .duel-grid { gap:6px; }
  .duel-panel { min-height:0; aspect-ratio:3 / 4; border-radius:16px; }
  .panel-label { top:8px; left:8px; right:8px; }
  .panel-label strong { font-size:22px; }
  .timer { font-size:38px; }
  .pacer-stage { padding-top:50px; }
}
@media (orientation:landscape) and (max-height:600px) {
  .topbar { display:none; }
  .duel-panel { min-height:0; aspect-ratio:3 / 4; max-height:78vh; }
  .app-shell { max-width:none; padding-top:8px; }
}

/* Streamlined start screen */
.compact-stats { padding: 10px; }
.compact-stats::after { display:none; }
.metric-row.metric-row-two { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.metric-row.metric-row-two > div { text-align:center; align-items:center; }
.single-button-row { grid-template-columns: 1fr; }
.single-button-row .primary-btn { min-height:58px; font-size:17px; }
.camera-status-overlay {
  position:absolute;
  z-index:5;
  left:12px;
  right:12px;
  bottom:12px;
  padding:10px 12px;
  border-radius:12px;
  text-align:center;
  font-size:13px;
  font-weight:800;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
}
.setup-countdown {
  position:absolute;
  z-index:8;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(110px, 24vw, 230px);
  line-height:1;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  text-shadow:0 8px 36px rgba(0,0,0,.65);
  background:rgba(0,0,0,.16);
}
.setup-countdown[hidden] { display:none; }
.privacy-pill, .local-warning, .fineprint, .env-status { display:none !important; }

/* Mobile: keep all primary setup controls inside one viewport. */
@media (max-width:720px) {
  .app-shell {
    max-width: 520px;
    padding: max(6px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
  }
  .topbar {
    min-height: 30px;
    margin-bottom: 6px;
  }
  .eyebrow { display:none; }
  h1 { font-size:20px; line-height:1; }

  .compact-stats {
    padding:6px;
    border-radius:16px;
  }
  .metric-row.metric-row-two { gap:6px; }
  .metric-row.metric-row-two > div {
    padding:6px 8px;
    min-height:44px;
    border-radius:11px;
  }
  .metric-row strong { font-size:20px; line-height:1; }
  .metric-row span { font-size:9px; }

  .control-card {
    padding:10px;
    margin-top:7px;
    border-radius:18px;
  }
  .section-label { display:none; }
  .segmented {
    margin:0 0 8px;
    padding:3px;
    border-radius:12px;
  }
  .seg {
    padding:8px 5px;
    font-size:11px;
    border-radius:9px;
  }
  .camera-check { display:block; }
  .camera-preview-wrap {
    width:auto;
    height:clamp(260px, 46dvh, 430px);
    max-width:100%;
    margin:0 auto;
    aspect-ratio:3 / 4;
    border-radius:16px;
  }
  .guide-frame { inset:5% 13%; }
  .camera-status-overlay {
    left:8px;
    right:8px;
    bottom:8px;
    padding:8px 10px;
    font-size:12px;
  }
  .single-button-row { margin-top:8px; }
  .single-button-row .primary-btn {
    min-height:50px;
    font-size:16px;
    border-radius:14px;
  }

  /* History stays available, but it is secondary and may sit below the first viewport. */
  .history-card {
    padding:14px;
    margin-top:10px;
    border-radius:18px;
  }

  /* Workout screen also stays compact on a phone. */
  .workout-head { margin:2px 0 7px; }
  .timer { font-size:34px; }
  .phase-chip { padding:5px 8px; }
  .set-label { font-size:11px; }
  .duel-grid { gap:5px; }
  .duel-panel { border-radius:14px; }
  .race-card { margin-top:7px; padding:10px; border-radius:16px; }
  .race-stats strong { font-size:19px; }
  .timeline { margin-top:8px; }
  .quit-btn { min-height:40px; margin-top:7px; }
}

/* Very short phones: sacrifice preview size before controls. */
@media (max-width:720px) and (max-height:700px) {
  .camera-preview-wrap { height:clamp(230px, 41dvh, 300px); }
  .metric-row.metric-row-two > div { min-height:40px; padding:5px 8px; }
  .single-button-row .primary-btn { min-height:46px; }
}


/* v7: true one-screen setup on phones */
@media (max-width:720px) {
  html, body { height:100%; }
  body { min-height:100dvh; }
  .app-shell {
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:max(6px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
  }
  .topbar { flex:0 0 auto; min-height:24px; margin-bottom:5px; }
  h1 { font-size:18px; }

  #setupScreen.active {
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  #setupScreen .compact-stats { flex:0 0 auto; }
  #setupScreen .control-card {
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:8px;
    margin-top:5px;
  }
  #setupScreen .segmented { flex:0 0 auto; margin-bottom:6px; }
  #setupScreen .camera-check {
    flex:1 1 auto;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  #setupScreen .camera-preview-wrap {
    flex:0 1 auto;
    height:min(60dvh, 560px);
    width:min(100%, 45dvh, 360px);
    max-height:100%;
    margin:0 auto;
    aspect-ratio:3 / 4;
  }
  #setupScreen .single-button-row { flex:0 0 auto; margin-top:6px; }
  #setupScreen .single-button-row .primary-btn { min-height:46px; }
  #setupScreen .history-card { display:none; }

  .metric-row.metric-row-two > div { min-height:38px; padding:4px 8px; }
  .metric-row strong { font-size:18px; }
  .metric-row span { font-size:8px; }
}

@media (max-width:720px) and (max-height:700px) {
  #setupScreen .camera-preview-wrap {
    height:min(54dvh, 360px);
    width:min(100%, 40.5dvh, 270px);
  }
  #setupScreen .single-button-row .primary-btn { min-height:44px; }
}

/* v9: preserve the camera's full field of view; no sensor-image cropping. */
.camera-preview-wrap video, .camera-panel video { object-fit:contain; background:#000; }