/* ============================================================================
   SplitTime — the group stopwatch.
   English / LTR. Light & clean: white page, two matching colours (blue+orange).
   RULE: the page NEVER scrolls. Every screen is exactly 100dvh; only bounded
   inner regions (lists) may scroll. Mobile-first, scales up to a big screen.
   ========================================================================== */
:root {
  --bg: #ffffff;
  --surface: #f6f8fb;
  --surface-2: #edf1f7;
  --line: #e3e8f0;
  --line-2: #cdd6e3;
  --ink: #101828;
  --muted: #667085;
  --blue: #2f6fed;
  --blue-d: #1f56c8;
  --blue-soft: #eaf1fe;
  --orange: #f97316;
  --orange-soft: #fff3e8;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --t: 170ms;
  --shadow: 0 6px 18px -10px rgba(16,24,40,.18);
  --shadow-lg: 0 14px 34px -16px rgba(16,24,40,.26);
  --sb: env(safe-area-inset-bottom, 0px);
  --st: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }        /* the page itself never scrolls */
body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); background: var(--bg); font-weight: 500; line-height: 1.45; -webkit-font-smoothing: antialiased; }
#app { height: 100dvh; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; }
button, input { font-family: inherit; }
.num { font-family: 'Space Grotesk', 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ic { display: inline-block; vertical-align: -.15em; }

/* ---- Screen shell (never scrolls) ----------------------------------------- */
.screen { height: 100dvh; width: 100%; max-width: 460px; margin: 0 auto; padding: calc(14px + var(--st)) 16px calc(14px + var(--sb)); display: flex; flex-direction: column; gap: 10px; overflow: hidden; animation: rise var(--t) var(--ease) both; }
.center { align-items: center; justify-content: center; text-align: center; }
.grow { flex: 1 1 auto; min-height: 0; }
.stack { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.row { display: flex; gap: 9px; align-items: center; }
.spread { justify-content: space-between; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.scroll::-webkit-scrollbar { width: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }

/* ---- Type ----------------------------------------------------------------- */
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }
.title { font-size: clamp(22px, 5.5vw, 28px); font-weight: 700; line-height: 1.15; }
.sub { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.muted { color: var(--muted); }
.tiny { font-size: 11.5px; }
.blue { color: var(--blue); }
.orange { color: var(--orange); }

/* ---- Buttons -------------------------------------------------------------- */
.btn { appearance: none; cursor: pointer; border: 1px solid var(--line-2); background: #fff; color: var(--ink); border-radius: var(--r); font-weight: 600; font-size: 14px; padding: 11px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; transition: background var(--t), border-color var(--t), transform 110ms var(--ease); white-space: nowrap; }
.btn:hover { background: var(--surface); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-primary { background: var(--blue); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--blue-d); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface); }
.btn-sm { min-height: 36px; padding: 8px 12px; font-size: 13px; }

/* ---- Cards ---------------------------------------------------------------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 13px; }
.tap-card { cursor: pointer; text-align: left; display: flex; gap: 11px; align-items: center; box-shadow: var(--shadow); transition: border-color var(--t), transform 110ms var(--ease), box-shadow var(--t); }
.tap-card:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); }
.tap-card:active { transform: scale(.99); }
.tap-ic { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.tap-card.primary .tap-ic { background: var(--blue); color: #fff; }
.tap-t { font-size: 15.5px; font-weight: 700; }
.tap-d { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.tap-card .chev { margin-left: auto; color: var(--muted); flex: none; }

/* ---- Brand ---------------------------------------------------------------- */
.brandmark { display: grid; place-items: center; }
.wordmark { font-family: 'Space Grotesk'; font-size: clamp(28px, 8vw, 36px); font-weight: 700; letter-spacing: -.03em; }
.wordmark .s { color: var(--blue); }
.brand-sm { display: inline-flex; align-items: center; gap: 7px; font-family: 'Space Grotesk'; font-size: 16px; font-weight: 700; }

/* ---- Inputs --------------------------------------------------------------- */
.input { width: 100%; background: #fff; border: 1px solid var(--line-2); color: var(--ink); border-radius: var(--r); padding: 12px 13px; font-size: 16px; min-height: 44px; outline: none; transition: border-color var(--t), box-shadow var(--t); }
.input::placeholder { color: var(--muted); }
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.input.center { text-align: center; }
.code-input { font-family: 'Space Grotesk'; letter-spacing: .35em; text-transform: uppercase; font-weight: 700; font-size: 26px; padding-left: .35em; }
.err { color: var(--orange); font-size: 12.5px; font-weight: 600; min-height: 15px; text-align: center; }

/* ---- Avatars / chips ------------------------------------------------------ */
.av { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px 4px 4px; font-weight: 600; font-size: 12.5px; animation: pop var(--t) var(--ease) both; }
.badge { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.badge b { color: var(--blue); }

/* ============================================================================
   HOST — same shell, wider. Never scrolls; inner lists do.
   ========================================================================== */
.host { height: 100dvh; display: flex; flex-direction: column; gap: 10px; padding: calc(12px + var(--st)) 14px calc(12px + var(--sb)); max-width: 1100px; margin: 0 auto; overflow: hidden; background: var(--bg); }
.host-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
.host-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.host-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }

/* Lobby: phone = stacked, desktop = 2 columns */
.lobby { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; }
@media (min-width: 760px) { .lobby { grid-template-columns: 320px 1fr; grid-template-rows: 1fr; align-items: stretch; } }
.join-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 14px; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.join-card .lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.roomcode { font-family: 'Space Grotesk'; font-size: clamp(34px, 9vw, 54px); font-weight: 700; letter-spacing: .12em; line-height: 1; color: var(--blue); }
.qr-box { width: clamp(96px, 26vw, 160px); aspect-ratio: 1; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.qr-box img { width: 100%; height: 100%; display: block; }
.join-link { display: flex; align-items: center; gap: 6px; max-width: 100%; font-size: 11.5px; font-weight: 600; color: var(--blue); background: var(--blue-soft); border: 1px solid #cfe0fd; border-radius: 999px; padding: 6px 11px; cursor: pointer; min-height: 32px; }
.join-link .ic { flex: none; }
.join-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.req-row { display: flex; align-items: center; gap: 8px; background: var(--orange-soft); border: 1px solid #ffddc2; border-radius: var(--r); padding: 7px 10px; animation: pop var(--t) var(--ease) both; }
.req-row .nm { font-weight: 600; font-size: 13.5px; }
.req-ok { background: var(--blue); color: #fff; border: none; margin-left: auto; }
.req-no { background: #fff; color: var(--muted); border: 1px solid var(--line-2); }
.req-ok, .req-no { cursor: pointer; border-radius: 8px; padding: 6px 9px; font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }

/* Stages */
.st-row { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; animation: pop var(--t) var(--ease) both; }
.st-num { width: 23px; height: 23px; border-radius: 7px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.st-name { font-weight: 600; flex: 1; font-size: 14px; }
.icon-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 7px; display: grid; place-items: center; min-height: 34px; min-width: 34px; }
.icon-btn:hover { color: var(--orange); background: var(--orange-soft); }

/* Race */
.race-clock { font-family: 'Space Grotesk'; font-size: clamp(44px, 11vw, 96px); font-weight: 700; line-height: 1; color: var(--blue); text-align: center; flex: none; }
.lb-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 7px 10px; transition: border-color var(--t); }
.lb-row.lead { border-color: var(--blue); background: var(--blue-soft); }
.lb-rank { font-weight: 700; font-size: 13px; color: var(--muted); width: 20px; text-align: center; flex: none; }
.lb-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26vw; }
.lb-stage { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.lb-time { font-family: 'Space Grotesk'; font-weight: 700; font-size: 14px; color: var(--blue); flex: none; }
.prog { height: 5px; background: var(--surface-2); border-radius: 999px; overflow: hidden; flex: 1; min-width: 40px; max-width: 120px; }
.prog i { display: block; height: 100%; background: var(--blue); transition: width var(--t) var(--ease); }

/* Countdown */
.count { font-family: 'Space Grotesk'; font-size: clamp(72px, 20vw, 150px); font-weight: 700; color: var(--blue); line-height: 1; animation: cnt .75s var(--ease); }
@keyframes cnt { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: scale(1); } }

/* ---- Controller ----------------------------------------------------------- */
.stage-now .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stage-now .nm { font-size: clamp(22px, 6.5vw, 30px); font-weight: 700; line-height: 1.15; }
.trigger { width: min(58vw, 46vh, 240px); aspect-ratio: 1; margin: 0 auto; border: none; border-radius: 50%; cursor: pointer; background: var(--blue); color: #fff; font-family: 'Space Grotesk'; font-size: clamp(17px, 4.6vw, 22px); font-weight: 700; letter-spacing: .04em; display: grid; place-items: center; box-shadow: 0 10px 26px -10px rgba(47,111,237,.6); transition: transform 90ms var(--ease), background var(--t); flex: none; }
.trigger:hover { background: var(--blue-d); }
.trigger:active { transform: scale(.95); }
.trigger:disabled { background: var(--line-2); box-shadow: none; cursor: not-allowed; }
.my-split { font-family: 'Space Grotesk'; font-size: 30px; font-weight: 700; color: var(--blue); }
.split-row { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; animation: pop var(--t) var(--ease) both; }
.split-row .t { margin-left: auto; font-family: 'Space Grotesk'; font-weight: 700; color: var(--blue); }
.pulse { width: 44px; height: 44px; border-radius: 50%; background: var(--blue); animation: pulse 1.6s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,111,237,.35);} 70% { box-shadow: 0 0 0 16px rgba(47,111,237,0);} 100% { box-shadow: 0 0 0 0 rgba(47,111,237,0);} }
.wait { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.wait .h { font-size: 20px; font-weight: 700; }

/* ============================================================================
   ANALYTICS — phone: one tab at a time (nothing scrolls). Desktop: all at once.
   ========================================================================== */
.an-tabs { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; flex: none; }
.an-tabs button { flex: 1; border: none; background: transparent; color: var(--muted); font-weight: 600; font-size: 12.5px; padding: 8px 6px; border-radius: 999px; cursor: pointer; min-height: 36px; white-space: nowrap; }
.an-tabs button.on { background: var(--blue); color: #fff; }
.an-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.an-panel { flex: 1; min-height: 0; display: none; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; }
.an-panel.on { display: flex; }
.an-panel.bottleneck { border-color: #ffddc2; background: var(--orange-soft); }
.an-h { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; flex: none; }
.an-h .ic { color: var(--blue); }
.an-panel.bottleneck .an-h .ic { color: var(--orange); }
.chart { flex: 1; min-height: 0; }
.chart svg { width: 100%; height: 100%; display: block; }
.big-stat { font-family: 'Space Grotesk'; font-size: clamp(22px, 5vw, 30px); font-weight: 700; line-height: 1.1; flex: none; }
.big-stat.orange { color: var(--orange); }
.big-stat.blue { color: var(--blue); }
.an-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
.an-panel.bottleneck .an-row { background: #fff; }
.an-row .v { margin-left: auto; font-family: 'Space Grotesk'; font-weight: 700; color: var(--blue); }
.legend { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.leg { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.leg i { width: 8px; height: 8px; border-radius: 2px; }
@media (min-width: 760px) {
  .an-tabs { display: none; }
  .an-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr auto; gap: 10px; }
  .an-panel { display: flex !important; }
  .an-panel.curves { grid-row: span 2; }
  .an-panel.standings { grid-column: span 2; flex: none; }
}

/* ---- Toast ---------------------------------------------------------------- */
.toast { position: fixed; left: 50%; bottom: calc(18px + var(--sb)); transform: translate(-50%, 8px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 13px; opacity: 0; transition: opacity var(--t), transform var(--t); z-index: 60; box-shadow: var(--shadow-lg); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }