/* Phone frame: full-screen on real phones, a 390x844 device frame on desktop. */
html, body { height: 100%; }
.proto-body { margin: 0; background: #e4e8f2; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; color: #0b1530; }
.phone { position: relative; display: flex; flex-direction: column; width: 100%; height: 100dvh; background: #fff; overflow: hidden; }
.screen { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.screen::-webkit-scrollbar { width: 0; height: 0; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

@media (min-width: 520px) {
  .proto-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 0; }
  .phone { width: 390px; height: 844px; border-radius: 48px; border: 10px solid #0b1530; box-shadow: 0 30px 80px rgba(11,21,48,.35); }
}

/* Status bar injected by mobile.js */
.statusbar { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 26px; font-size: 13px; font-weight: 700; flex-shrink: 0; }

/* Bottom tab bar injected by mobile.js */
.tabbar { flex-shrink: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid #e4e8f2; background: #fff; padding: 8px 6px 18px; }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: #6f80aa; text-decoration: none; }
.tabbar a.active { color: #d62828; }
.tabbar a svg { width: 22px; height: 22px; }

/* Bottom sheet + modal helpers (toggled by data-open / data-close) */
.sheet { position: absolute; inset: 0; z-index: 50; display: none; }
.sheet.open { display: block; }
.sheet .sheet-backdrop { position: absolute; inset: 0; background: rgba(11,21,48,.45); }
.sheet .sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85%; overflow-y: auto; background: #fff; border-radius: 24px 24px 0 0; padding: 20px; animation: up .22s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }

.toast { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60; background: #0b1530; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px rgba(11,21,48,.3); }

/* Scanner viewfinder animation */
@keyframes scanline { 0% { top: 8%; } 50% { top: 88%; } 100% { top: 8%; } }
.scanline { position: absolute; left: 8%; right: 8%; height: 2px; background: #c6f432; box-shadow: 0 0 12px #c6f432; animation: scanline 2.4s ease-in-out infinite; }

/* Links and pictures must not be dragged out of the page (Chrome's grey link preview) — swiping uses them. */
.phone a, .phone img { -webkit-user-drag: none; user-drag: none; }
.phone img { user-select: none; }

/* ---- Race-day typography ------------------------------------------------------------------
   Page titles and section headings use a bold italic condensed face (like race bibs and
   finish-line banners) that echoes the italic Sportify wordmark. Body copy stays in Jakarta. */
.phone h1:not(.serif):not(.font-sans),
.phone h2:not(.serif):not(.font-sans),
.race {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size-adjust: cap-height .76;
}
/* Big numerals: distances, prices, countdowns, points. */
.num { font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif; font-style: italic; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* Checkered finish-line strip. */
.finish-line { height: 10px; background: repeating-conic-gradient(#0b1530 0 25%, #fff 0 50%) 0 0 / 10px 10px; }