:root {
  --bg: #0a0d12;
  --panel: rgba(18, 23, 31, 0.92);
  --panel-solid: #12171f;
  --line: #2a3340;
  --text: #e7ecf3;
  --muted: #8b97a7;
  --accent: #ff6b2c;
  --accent-glow: rgba(255, 107, 44, 0.55);
  --gold: #ffcf33;
  --danger: #ef4444;
  --ok: #22c55e;
  --behind: #f59e0b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Rajdhani", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior: none;
  letter-spacing: 0.3px;
}

.screen { position: relative; height: 100dvh; width: 100%; overflow: hidden; }
.hidden { display: none !important; }
.fullmap { position: absolute; inset: 0; background: #0a0d12; z-index: 0; }

/* ---- buttons ---- */
.btn {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-solid);
  color: var(--text);
  cursor: pointer;
  transition: transform .08s, box-shadow .15s;
}
.btn:active { transform: scale(.96); }
.btn.block { width: 100%; }
.btn.big { font-size: 17px; padding: 14px 18px; }
.btn.tiny { font-size: 12px; padding: 6px 10px; }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #160a03;
  box-shadow: 0 0 18px var(--accent-glow);
}
.btn.danger { color: var(--danger); border-color: #3a2230; }
.btn.active { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px rgba(255,207,51,.35); }

input {
  font-family: "Rajdhani", sans-serif;
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0f141b;
  color: var(--text);
  outline: none;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.error { color: var(--danger); font-size: 14px; min-height: 20px; margin: 10px 0 0; text-align: center; }

/* ============ AUTH ============ */
.auth-screen { display: flex; align-items: center; justify-content: center; padding: 22px;
  background: radial-gradient(120% 90% at 50% -10%, #1a2230 0%, #0a0d12 55%); }
.auth-card { width: 100%; max-width: 360px; }
.brand { display: flex; align-items: center; gap: 12px; justify-content: center; }
.brand-mark {
  font-size: 30px; color: var(--accent);
  text-shadow: 0 0 18px var(--accent-glow);
  transform: translateY(-2px);
}
.brand h1 {
  font-family: "Teko", sans-serif; font-weight: 700;
  font-size: 46px; margin: 0; letter-spacing: 4px;
}
.tagline {
  text-align: center; color: var(--muted); letter-spacing: 3px;
  font-size: 13px; margin: 2px 0 26px; font-weight: 600;
}
.auth-card input { margin-bottom: 10px; }
.auth-row { display: flex; gap: 10px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); margin: 18px 0; font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* version label (auth + settings) */
.version { text-align: center; color: var(--muted); font-size: 12px; letter-spacing: 2px; margin: 16px 0 0; }
/* floating build badge — visible on every screen, never blocks taps */
#verBadge {
  position: fixed; z-index: 3000; pointer-events: none;
  top: calc(env(safe-area-inset-top) + 2px); right: 8px;
  font-family: "Teko", sans-serif; font-size: 13px; letter-spacing: 1px;
  color: var(--muted); opacity: .55;
  background: rgba(10,13,18,.5); padding: 1px 6px; border-radius: 6px;
}

/* ============ HUD shared ============ */
.hud { position: absolute; z-index: 500; }
.hud-top {
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: calc(env(safe-area-inset-top) + 12px) 12px 0;   /* clears the iPhone notch in the native app */
}
.hud-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text);
  font-size: 20px; cursor: pointer;
  backdrop-filter: blur(6px);
}
.hud-btn.danger { color: var(--danger); }
.hud-btn.privacy-public { color: var(--ok); }
.hud-btn.privacy-group { color: var(--behind); }
.hud-btn.privacy-private { color: var(--muted); }

.callsign-chip, .count-chip, .room-chip {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 0 14px; height: 44px;
  display: flex; align-items: center; gap: 8px;
  backdrop-filter: blur(6px);
  font-family: "Teko", sans-serif; font-size: 24px; letter-spacing: 2px;
}
.room-chip { color: var(--accent); }
.count-chip { color: var(--muted); }
.chip-share { background: none; border: none; color: var(--accent); font-size: 18px; cursor: pointer; }

/* speedometer */
.speedo {
  bottom: 215px; left: 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px 14px;
  display: flex; flex-direction: column; align-items: center;
  backdrop-filter: blur(6px); min-width: 78px;
}
.speed-val { font-family: "Teko", sans-serif; font-size: 42px; line-height: 0.9; color: var(--accent);
  text-shadow: 0 0 14px var(--accent-glow); }
.speed-unit { font-size: 11px; letter-spacing: 2px; color: var(--muted); }

/* home bottom bar — its dark backing tucks UNDER the tab bar (z900) so no map peeks through */
.hud-bottom {
  bottom: calc(48px + env(safe-area-inset-bottom)); left: 0; right: 0;
  padding: 14px 14px 20px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.join-row { display: flex; gap: 10px; }
.join-row input { text-transform: uppercase; letter-spacing: 6px; text-align: center;
  font-family: "Teko", sans-serif; font-size: 24px; }
.join-row .btn { flex-shrink: 0; }

/* gps status strip */
.gps-status {
  position: absolute; z-index: 500; top: 66px; left: 12px; right: 12px;
  font-size: 13px; font-weight: 700; text-align: center;
  padding: 6px 12px; border-radius: 10px; letter-spacing: .5px;
  backdrop-filter: blur(6px);
}
.gps-status.ok      { background: rgba(34,197,94,.16);  color: var(--ok); }
.gps-status.waiting { background: rgba(245,158,11,.16); color: var(--behind); }
.gps-status.error   { background: rgba(239,68,68,.2);   color: var(--danger); }
.gps-status.view    { background: rgba(59,130,246,.16); color: #6ea8ff; }
.gps-status { display: flex; align-items: center; justify-content: center; gap: 10px; }
.gps-status #gpsMsg::before { display: inline; }
.gps-status.ok #gpsMsg::before { content: "📍 "; }
.gps-status.waiting #gpsMsg::before { content: "⏳ "; }
.gps-status.error #gpsMsg::before { content: "⚠️ "; }
.gps-status.view #gpsMsg::before { content: "👁 "; }
.gps-fix {
  flex-shrink: 0;
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1px;
  padding: 5px 12px; border-radius: 8px; cursor: pointer;
  background: var(--danger); color: #fff; border: none;
  box-shadow: 0 0 12px rgba(239,68,68,.5);
}
.gps-fix:active { transform: scale(.95); }

.help-lead { color: var(--muted); font-size: 15px; font-weight: 500; margin: 0 0 14px; line-height: 1.4; }
.help-steps { margin: 0; padding-left: 20px; }
.help-steps li { margin-bottom: 10px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.help-steps b { color: var(--accent); }

/* ============ map markers ============ */
.rider-marker {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(0,0,0,.6);
}
.rider-marker span { transform: rotate(45deg); font-family: "Teko", sans-serif; font-size: 16px; color: #fff; font-weight: 700; }
.rider-marker.lead { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,207,51,.4), 0 0 12px var(--gold); }
.rider-marker.me { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 0 14px var(--accent-glow); }
.rider-marker.stale { opacity: .4; }

/* ============ riders drawer ============ */
.drawer {
  position: absolute; z-index: 500; left: 0; right: 0; bottom: 0;
  background: var(--panel); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  transform: translateY(calc(100% - 52px));
  transition: transform .25s ease;
  max-height: 60dvh;
  padding-bottom: env(safe-area-inset-bottom);
}
.drawer.open { transform: translateY(0); }
.drawer-handle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; cursor: pointer;
  font-family: "Teko", sans-serif; font-size: 22px; letter-spacing: 3px;
}
.drawer-handle::before {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 2px; background: var(--line);
}
.drawer-tools { display: flex; gap: 8px; }
#ridersList { list-style: none; margin: 0; padding: 0 12px 16px; overflow-y: auto; max-height: 44dvh; }
.rider-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; background: #0f141b;
  margin-bottom: 8px; cursor: pointer; border: 1px solid transparent;
}
.rider-row.is-lead { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,207,51,.18); }
.rider-row.stale { opacity: .45; }
.rider-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.rider-name { font-weight: 700; flex: 1 1 auto; font-size: 16px; }
.rider-name .you { color: var(--muted); font-weight: 500; font-size: 13px; }
.rider-dist { font-family: "Teko", sans-serif; font-size: 22px; color: var(--muted); }
.rider-dist.behind { color: var(--behind); }
.rider-dist.nofix { color: var(--danger); font-size: 15px; font-family: "Rajdhani"; font-weight: 700; }
.lead-ctrl {
  flex-shrink: 0; cursor: pointer; font-family: "Rajdhani", sans-serif; font-weight: 700;
  border-radius: 8px; border: 1px solid var(--line); background: #0f141b; color: var(--muted);
}
.lead-ctrl.set-lead { width: 32px; height: 32px; font-size: 18px; line-height: 1; }
.lead-ctrl.set-lead:active { color: var(--gold); border-color: var(--gold); }
.lead-ctrl.claim-lead {
  padding: 6px 10px; font-size: 12px; letter-spacing: .5px;
  color: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(255,207,51,.25);
}

/* ============ settings sheet ============ */
.sheet {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(5,7,10,.6); backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-card {
  width: 100%; max-width: 460px;
  max-height: 90dvh; overflow-y: auto;
  background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: 18px 18px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
}
.sheet-card h2 { font-family: "Teko", sans-serif; letter-spacing: 3px; margin: 0 0 14px; font-size: 28px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; letter-spacing: 1px; text-transform: uppercase; }
.color-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; box-shadow: 0 0 8px currentColor; }
.swatch.selected { border-color: #fff; transform: scale(1.1); }
.privacy-picker { display: flex; flex-direction: column; gap: 8px; }
.priv-opt {
  text-align: left; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: #0f141b; color: var(--text);
  font-family: "Rajdhani"; font-weight: 700; font-size: 15px; letter-spacing: 1px; cursor: pointer;
}
.priv-opt small { display: block; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.priv-opt.selected { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.sheet-actions { display: flex; gap: 10px; margin-top: 22px; }
.sheet-actions .btn { flex: 1; }

/* leaflet attribution toned down for HUD look */
.leaflet-control-attribution { background: rgba(10,13,18,.6) !important; color: #5b6573 !important; }
.leaflet-control-attribution a { color: #7a8696 !important; }

/* ============ SOLO RIDE ============ */
.solo-cta { border-color: var(--accent); color: var(--accent); }
.solo-top { justify-content: center; }
.solo-time {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 6px 22px; text-align: center; backdrop-filter: blur(6px);
}
.solo-time span { display: block; font-family: "Teko", sans-serif; font-size: 44px; line-height: .9; color: var(--text); }
.solo-time small { font-size: 11px; letter-spacing: 2px; color: var(--muted); }
.solo-metrics { top: 92px; right: 12px; display: flex; flex-direction: column; gap: 10px; }
.solo-metric {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px 14px; text-align: center; min-width: 74px; backdrop-filter: blur(6px);
}
.solo-metric span { display: block; font-family: "Teko", sans-serif; font-size: 28px; line-height: .9; color: var(--accent); }
.solo-metric small { font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.stop-btn { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: 0 0 18px rgba(239,68,68,.5); }
/* solo has no tab bar, so its bottom bar sits flush at the bottom */
#solo .hud-bottom { bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

/* ride summary */
.summary-stats { display: flex; gap: 10px; margin: 6px 0 8px; }
.summary-stats > div {
  flex: 1; background: #0f141b; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 6px; text-align: center;
}
.summary-stats span { display: block; font-family: "Teko", sans-serif; font-size: 32px; color: var(--accent); line-height: 1; }
.summary-stats small { font-size: 11px; letter-spacing: 1px; color: var(--muted); }

/* ============ FEED ============ */
.feed-list { height: 100%; overflow-y: auto; padding: 12px 14px calc(80px + env(safe-area-inset-bottom)); }
.feed-card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.feed-head { display: flex; align-items: center; gap: 10px; }
.feed-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
.feed-av.init { display: flex; align-items: center; justify-content: center; font-family: "Teko", sans-serif; font-size: 20px; background: var(--panel); }
.feed-who { display: flex; flex-direction: column; line-height: 1.1; }
.feed-who b { font-size: 16px; }
.feed-who span { font-size: 12px; color: var(--muted); }
.feed-title { font-family: "Teko", sans-serif; font-size: 24px; letter-spacing: 1px; margin: 10px 0 8px; }
.feed-trail { width: 100%; height: auto; aspect-ratio: 3 / 1; background: #0a0d12; border-radius: 10px; display: block; }
.feed-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.feed-stats { font-size: 13px; color: var(--muted); font-weight: 600; }
.like-btn { background: none; border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; color: var(--text); cursor: pointer; font-weight: 700; font-size: 14px; }
.like-btn.liked { border-color: #ef4444; color: #ef4444; }

/* badge toast */
.toast {
  position: fixed; z-index: 2000; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--accent); color: #160a03; font-weight: 700; text-align: center;
  padding: 12px 18px; border-radius: 14px; box-shadow: 0 0 24px var(--accent-glow);
  font-size: 15px; max-width: 88vw; line-height: 1.4;
}

/* ============ BOTTOM TAB BAR ============ */
.tabbar {
  position: fixed; z-index: 900; left: 0; right: 0; bottom: 0;
  display: flex; background: var(--panel-solid);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 0 8px; color: var(--muted);
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1px;
}
.tab .tab-ico { font-size: 22px; filter: grayscale(1) opacity(.7); transition: filter .15s; }
.tab.active { color: var(--accent); }
.tab.active .tab-ico { filter: none; }

/* tab screens scroll above the bar */
.tab-screen { padding-bottom: 0; }
.tab-header {
  font-family: "Teko", sans-serif; font-size: 32px; letter-spacing: 4px;
  padding: calc(env(safe-area-inset-top) + 16px) 18px 10px; color: var(--text);
  border-bottom: 1px solid var(--line);
}

/* ============ FEED empty state ============ */
.empty-state { text-align: center; padding: 60px 30px; }
.empty-emoji { font-size: 48px; opacity: .8; }
.empty-title { font-family: "Teko", sans-serif; font-size: 26px; letter-spacing: 2px; margin: 8px 0; }
.muted-small { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ============ ME / PROFILE ============ */
.me-scroll {
  height: 100%; overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 18px) 18px calc(90px + env(safe-area-inset-bottom));
}
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.avatar {
  position: relative; width: 84px; height: 84px; flex-shrink: 0;
  border-radius: 50%; border: 3px solid var(--accent); background: var(--panel-solid);
  cursor: pointer; overflow: hidden; padding: 0;
  box-shadow: 0 0 18px var(--accent-glow);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: none; }
.avatar img[src] { display: block; }
.avatar #meAvatarInitial {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Teko", sans-serif; font-size: 42px; color: var(--text);
}
.avatar img[src] + #meAvatarInitial { display: none; }
.me-callsign { font-family: "Teko", sans-serif; font-size: 34px; letter-spacing: 2px; line-height: 1; }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer;
  font-family: "Rajdhani"; font-weight: 700; font-size: 13px; padding: 4px 0; }

.stats-row { display: flex; gap: 10px; margin-bottom: 8px; }
.stat {
  flex: 1; background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 6px; text-align: center;
}
.stat-num { display: block; font-family: "Teko", sans-serif; font-size: 30px; color: var(--accent); line-height: 1; }
.stat-lbl { font-size: 11px; letter-spacing: 1px; color: var(--muted); }

.section-title {
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 2px;
  color: var(--muted); margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.badge { text-align: center; cursor: pointer; }
.medal-wrap { display: flex; justify-content: center; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.medal-wrap.sm { filter: none; }
.badge.locked .medal-wrap { opacity: .85; }
/* gear medal: emoji centered over the cog */
.medal { position: relative; display: inline-block; line-height: 0; }
.medal svg { display: block; }
.medal-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }
.medal.locked .medal-emoji { filter: grayscale(1); opacity: .5; }
.badge-name { font-size: 11px; color: var(--text); margin-top: 4px; line-height: 1.1; display: block; font-weight: 700; }
.badge-tier { font-family: "Teko", sans-serif; font-size: 15px; letter-spacing: 1px; display: block; }

/* tier label colors */
.t-bronze   { color: #d98a4a; }
.t-silver   { color: #cbd2db; }
.t-gold     { color: #f1c33f; }
.t-platinum { color: #dbe7f0; }
.t-onyx     { color: #9aa6bd; }
.t-locked   { color: var(--muted); }

/* badge detail */
.bd-current { color: var(--muted); font-size: 15px; margin: 2px 0 12px; }
.bd-current b { color: var(--accent); font-family: "Teko", sans-serif; font-size: 22px; }
.bd-progress { margin-bottom: 16px; }
.bd-bar { height: 10px; background: #0f141b; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.bd-fill { height: 100%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.bd-next { font-size: 13px; color: var(--muted); margin-top: 6px; font-weight: 600; }
.bd-maxed { text-align: center; font-family: "Teko", sans-serif; font-size: 22px; color: var(--gold); letter-spacing: 1px; }
.bd-ladder { display: flex; flex-direction: column; gap: 8px; }
.bd-tier { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 10px; background: #0f141b; border: 1px solid var(--line); opacity: .55; }
.bd-tier.got { opacity: 1; }
.bd-tier.current { border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.bd-tname { flex: 1; font-family: "Teko", sans-serif; font-size: 20px; letter-spacing: 1px; }
.bd-thresh { font-family: "Teko", sans-serif; font-size: 20px; color: var(--muted); }

/* rides happening now (home discovery) */
.rides-now {
  top: 70px; left: 12px; right: 12px;
  max-height: 34dvh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px; backdrop-filter: blur(8px);
}
.rides-now-title { font-family: "Teko", sans-serif; font-size: 16px; letter-spacing: 2px; color: var(--muted); margin-bottom: 8px; }
.ride-now-card { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.ride-now-card + .ride-now-card { border-top: 1px solid var(--line); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); flex-shrink: 0; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.rn-info { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.15; }
.rn-info b { font-size: 15px; }
.rn-info span { font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.rn-join { flex-shrink: 0; }

/* tier toast rows */
.toast-row { display: flex; align-items: center; gap: 10px; text-align: left; }
.toast-row + .toast-row { margin-top: 8px; }

/* ============ TEAMS SHEET ============ */
.teams-count {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 600; margin: 6px 0 10px;
}
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper .btn { width: 44px; height: 44px; font-size: 22px; padding: 0; }
.stepper #teamCount { font-family: "Teko", sans-serif; font-size: 30px; min-width: 24px; text-align: center; }

.team-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.team-chip {
  display: flex; align-items: center; gap: 8px;
  background: #0f141b; border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px 6px 6px;
}
.team-chip .team-color {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.5); box-shadow: 0 0 8px currentColor;
}
.team-chip .team-label { font-family: "Teko", sans-serif; font-size: 20px; letter-spacing: 1px; }

.team-assign { display: flex; flex-direction: column; gap: 8px; }
.assign-row {
  display: flex; align-items: center; gap: 10px;
  background: #0f141b; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px;
}
.assign-name { flex: 1 1 auto; font-weight: 700; font-size: 15px; }
.assign-opts { display: flex; gap: 8px; }
.assign-dot {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; box-shadow: 0 0 6px currentColor;
}
.assign-dot.none { background: #2a3340; color: #2a3340; box-shadow: none; position: relative; }
.assign-dot.none::after { content: "✕"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.assign-dot.selected { border-color: #fff; transform: scale(1.08); }

/* ============ v0.3.0 polish ============ */
/* locked badge lock graphic */
.medal-lock { position: absolute; right: -1px; bottom: -1px; line-height: 1; }

/* name chip: photo + white name */
.callsign-chip { gap: 8px; padding: 0 14px 0 6px; }
.chip-av {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-solid); border: 1px solid var(--line);
  font-family: "Teko", sans-serif; font-size: 17px; color: var(--text);
}
.chip-av img { width: 100%; height: 100%; object-fit: cover; }
/* long names stay on one line and trim with an ellipsis (both Android + iOS) */
.callsign-chip { max-width: 56%; min-width: 0; overflow: hidden; }
#homeCallsign { color: #fff; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* consistent map action buttons with SVG icons */
.map-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 16px; border-radius: 12px; cursor: pointer;
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .3px;
  border: 1px solid var(--line); background: var(--panel-solid); color: var(--text);
  transition: transform .08s, box-shadow .15s;
}
.map-btn:active { transform: scale(.97); }
.btn-ico { width: 22px; height: 22px; flex-shrink: 0; }
.map-btn.solo  { border-color: var(--accent); color: var(--accent); }
.map-btn.group { background: var(--accent); border-color: var(--accent); color: #160a03; box-shadow: 0 0 18px var(--accent-glow); }
.code-input {
  width: 100%; text-transform: uppercase; letter-spacing: 6px; text-align: center;
  font-family: "Teko", sans-serif; font-size: 24px;
}

/* ME close button (back to map) */
.me-close {
  position: absolute; z-index: 20; top: calc(env(safe-area-inset-top) + 12px); right: 14px;
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  font-size: 18px; backdrop-filter: blur(6px);
}

/* eye-catching empty-join feedback */
@keyframes shake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); }
}
.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
.input-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.35) !important; }

.toast-msg { font-family: "Teko", sans-serif; font-size: 20px; letter-spacing: 1px; }

/* ============ v0.4.0: icons, sub-tabs, cover, tier animations ============ */
.ico { display: inline-block; vertical-align: middle; }
.tab-ico .ico { width: 24px; height: 24px; }
.empty-emoji .ico.big { width: 52px; height: 52px; color: var(--muted); }
.lead-star { display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.lead-star .ico { width: 15px; height: 15px; color: var(--gold); }
.lead-ctrl.set-lead .ico { width: 18px; height: 18px; }

/* join row on one line */
.join-row { display: flex; gap: 10px; align-items: stretch; }
.join-row .code-input { flex: 0 0 36%; width: auto; }
.join-row .map-btn { flex: 1; font-size: 15px; white-space: nowrap; }

/* profile BADGES / SETTINGS segmented control */
.seg { display: flex; gap: 6px; background: #0f141b; border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin: 16px 0 14px; }
.seg-btn {
  flex: 1; padding: 9px 0; border: none; background: none; cursor: pointer; border-radius: 9px;
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 1.5px; color: var(--muted);
}
.seg-btn.active { background: var(--accent); color: #160a03; box-shadow: 0 0 12px var(--accent-glow); }

/* cover photo */
.cover {
  height: 130px; margin: 0 -18px 0; border-radius: 14px; position: relative;
  background: #0f141b center/cover no-repeat; border: 1px solid var(--line);
  box-shadow: inset 0 -45px 55px -25px rgba(10,13,18,.92);
}
.cover.has-cover { border-color: transparent; }
.cover-btn {
  position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 10px;
  background: rgba(10,13,18,.55); border: 1px solid var(--line); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.cover-btn.busy { opacity: .5; }
.cover-btn .ico { width: 18px; height: 18px; }
.profile-head { margin-top: -42px; align-items: flex-end; }
.profile-head .avatar { border-width: 4px; }

/* lock graphic on locked medals */
.medal-lock {
  position: absolute; right: -2px; bottom: -2px; width: 38%; height: 38%;
  background: rgba(10,13,18,.85); border: 1px solid var(--line); border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.medal-lock .ico { width: 60%; height: 60%; }

/* progressive tier animation: silver subtle → onyx extra */
.medal.anim { overflow: hidden; border-radius: 50%; }
.medal.anim::after {
  content: ""; position: absolute; top: -12%; bottom: -12%; left: 0; width: 46%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-170%) skewX(-12deg); pointer-events: none;
}
@keyframes shine { 0% { transform: translateX(-170%) skewX(-12deg); } 55%, 100% { transform: translateX(330%) skewX(-12deg); } }
.medal.tier-silver::after   { animation: shine 7s ease-in-out infinite; opacity: .45; }
.medal.tier-gold::after     { animation: shine 5s ease-in-out infinite; opacity: .7; }
.medal.tier-platinum::after { animation: shine 4s ease-in-out infinite; opacity: .85; }
.medal.tier-onyx::after     { animation: shine 3s ease-in-out infinite; opacity: 1; }
@keyframes glowGold { 0%,100% { box-shadow: 0 0 5px rgba(241,195,63,.35); } 50% { box-shadow: 0 0 14px 2px rgba(241,195,63,.7); } }
@keyframes glowPlat { 0%,100% { box-shadow: 0 0 6px rgba(219,231,240,.4); transform: scale(1); } 50% { box-shadow: 0 0 16px 3px rgba(180,220,255,.75); transform: scale(1.04); } }
@keyframes glowOnyx { 0%,100% { box-shadow: 0 0 8px rgba(150,120,255,.5); transform: scale(1); } 50% { box-shadow: 0 0 20px 5px rgba(170,110,255,.9); transform: scale(1.05); } }
.medal.tier-gold     { animation: glowGold 3s ease-in-out infinite; }
.medal.tier-platinum { animation: glowPlat 2.6s ease-in-out infinite; }
.medal.tier-onyx     { animation: glowOnyx 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .medal.anim::after, .medal.tier-gold, .medal.tier-platinum, .medal.tier-onyx { animation: none; } }
.like-btn .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }

/* ============ v0.4.1: profile + map control polish ============ */
/* cover full-bleed to the very top (under the status bar), no awkward gap */
.me-scroll { padding: 0 18px calc(90px + env(safe-area-inset-bottom)); }
.cover {
  margin: 0 -18px; height: calc(150px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  border: none; border-radius: 0 0 16px 16px; position: relative;
  background: #0f141b center/cover no-repeat;
  box-shadow: inset 0 -55px 60px -28px rgba(10,13,18,.92);
}
.cover-btn.busy { opacity: .5; }

/* profile header stacked so the name never hides under the cover */
.profile-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: -46px; margin-bottom: 18px; }
.profile-head .avatar { margin: 0; }
.avatar.busy { opacity: .6; }
.me-callsign { color: #fff; }

/* camera badge on the avatar (replaces the "Change photo" text) */
.avatar-cam {
  position: absolute; right: -3px; bottom: -3px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #160a03; border: 3px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.avatar-cam .ico { width: 15px; height: 15px; }

/* ME back button (says where it goes) */
.me-back {
  position: absolute; z-index: 30; top: calc(env(safe-area-inset-top) + 12px); left: 14px;
  display: flex; align-items: center; gap: 5px; height: 38px; padding: 0 14px 0 9px; border-radius: 20px;
  background: rgba(10,13,18,.55); border: 1px solid var(--line); color: #fff; cursor: pointer;
  backdrop-filter: blur(6px); font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .5px;
}
.me-back .mb-ico { display: flex; }
.me-back .mb-ico .ico { width: 18px; height: 18px; }

/* map top-left: name + live stats (speed moved here from the covered bottom-left) */
.top-left { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.live-stats { display: flex; gap: 8px; }
.ls-item {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px 12px;
  display: flex; flex-direction: column; align-items: center; backdrop-filter: blur(6px); min-width: 62px;
}
.ls-item b { font-family: "Teko", sans-serif; font-size: 23px; line-height: .95; color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); }
.ls-item small { font-size: 9px; letter-spacing: 2px; color: var(--muted); }
.rides-now { top: 122px; }

/* join row: code + button share the line, never overflow */
.join-row { display: flex; gap: 10px; }
.join-row .code-input { flex: 1 1 0; min-width: 0; }
.join-row .map-btn { flex: 1.5 1 0; min-width: 0; font-size: 14px; white-space: nowrap; padding: 14px 10px; }
.join-row .map-btn .btn-ico { width: 20px; }

/* center-lock + compass buttons, floated to the middle-right edge (clear of all furniture) */
.leaflet-bottom.leaflet-right { top: 50%; bottom: auto; transform: translateY(-50%); }
.map-ctl {
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer; margin: 0 10px 8px 0;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px);
}
.map-ctl .ico { width: 20px; height: 20px; }
.map-ctl.active { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.map-ctl { pointer-events: auto; }

/* ============ v0.4.2: subtle toast, premium speedo, Motorrad solo HUD, GPX ============ */
/* toast — quiet dark-glass instead of loud orange */
.toast {
  background: rgba(16,20,27,.94); color: var(--text); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.55); border-radius: 14px; padding: 10px 16px;
  backdrop-filter: blur(12px); font-size: 14px; max-width: 82vw; line-height: 1.35;
}
.toast-msg { font-family: "Rajdhani", sans-serif; font-weight: 700; letter-spacing: 1px; color: var(--accent); }

/* room speedo — premium overlay, no bounding box */
.speedo { background: none; border: none; backdrop-filter: none; padding: 0; min-width: 0; align-items: flex-start; }
.speed-val { font-size: 58px; line-height: .82; text-shadow: 0 2px 14px rgba(0,0,0,.85), 0 0 18px var(--accent-glow); }
.speed-unit { font-size: 12px; letter-spacing: 3px; color: #cfd6df; text-shadow: 0 1px 4px rgba(0,0,0,.85); }

/* solo ride — Motorrad-style HUD */
.solo-strip {
  position: absolute; z-index: 500; top: calc(env(safe-area-inset-top) + 12px); left: 12px; right: 12px;
  display: flex; gap: 8px;
}
.solo-strip .sm {
  flex: 1; background: rgba(16,20,27,.62); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 4px; text-align: center; backdrop-filter: blur(8px);
}
.solo-strip .sm b { display: block; font-family: "Teko", sans-serif; font-size: 25px; line-height: .9; color: #fff; }
.solo-strip .sm small { font-size: 9px; letter-spacing: 1.5px; color: var(--muted); }

.solo-gauge { position: absolute; z-index: 500; left: 50%; transform: translateX(-50%); bottom: 100px; width: 196px; height: 196px; }
.gauge-svg { width: 100%; height: 100%; display: block; }
.gauge-track { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 10; }
.gauge-prog { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round;
  filter: drop-shadow(0 0 7px var(--accent-glow)); transition: stroke-dashoffset .25s ease; }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-center span { font-family: "Teko", sans-serif; font-size: 70px; line-height: .78; color: #fff; text-shadow: 0 0 20px var(--accent-glow); }
.gauge-center small { font-size: 12px; letter-spacing: 3px; color: var(--muted); margin-top: 2px; }

/* GPX download buttons */
.feed-actions { display: flex; align-items: center; gap: 8px; }
.gpx-dl { background: none; border: 1px solid var(--line); border-radius: 20px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; }
.gpx-dl .ico { width: 18px; height: 18px; }
.gpx-btn { margin-top: 10px; color: var(--accent); border-color: var(--line); }

/* ============ v0.5.0: team leads/blind, profiles, my-rides, tagging ============ */
/* team lead name in chip + team-lead star */
.team-lead-name { display: block; font-size: 11px; letter-spacing: 0; color: var(--muted); font-family: "Rajdhani", sans-serif; font-weight: 600; }
.lead-ctrl.team-lead-btn { width: 34px; height: 34px; }
.lead-ctrl.team-lead-btn.on { color: var(--gold); border-color: var(--gold); }
.lead-ctrl .ico { width: 18px; height: 18px; }
.lead-star .ico { width: 15px; height: 15px; }

/* feed: clickable head, group badge, tags */
.feed-head { cursor: pointer; position: relative; }
.feed-grp { margin-left: auto; font-family: "Teko", sans-serif; font-size: 14px; letter-spacing: 1px;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 1px 7px; }
.feed-tags { font-size: 13px; color: var(--muted); margin: -2px 0 8px; }

/* another rider's profile sheet */
.pv-card { max-height: 90dvh; }
.pv-card .cover { margin: -22px -20px 0; height: 120px; padding-top: 0; border-radius: 16px 16px 0 0; box-shadow: inset 0 -45px 50px -25px rgba(10,13,18,.9); }
.pv-card .profile-head { margin-top: -40px; margin-bottom: 14px; }

/* my rides */
.rides-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rides-filter input[type="date"] {
  flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px; font-family: "Rajdhani", sans-serif;
  background: #0f141b; border: 1px solid var(--line); border-radius: 10px; color: var(--text);
}
.rides-filter span { color: var(--muted); }
.my-rides { display: flex; flex-direction: column; gap: 10px; }
.myride-card { display: flex; gap: 12px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.myride-trail { width: 120px; height: 60px; flex-shrink: 0; background: #0a0d12; border-radius: 8px; }
.myride-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.myride-info b { font-size: 15px; }
.myride-info > span { font-size: 12px; color: var(--muted); }
.myride-stats { font-weight: 600; }
.myride-actions { display: flex; gap: 8px; margin-top: 4px; }
.gpx-dl.sm { width: 30px; height: 30px; }

/* trail map sheet */
.trail-map-card { max-height: 92dvh; }
.trail-map { height: 52dvh; border-radius: 12px; overflow: hidden; margin: 8px 0 4px; border: 1px solid var(--line); }
.rn-name { cursor: pointer; }
.rn-name:active { color: var(--accent); }

/* ============ v0.5.2: badge how-to-earn + new badges ============ */
.bd-how { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 0 0 12px; }
.bd-thresh { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .3px;
  color: var(--muted); text-align: right; flex-shrink: 0; }
.bd-tname { font-size: 18px; }

/* ============ v0.5.6: premium map top bar, visibility pill, intro banner ============ */
/* solo + group on one line */
.ride-row { display: flex; gap: 10px; }
.ride-row .map-btn { flex: 1; white-space: nowrap; padding: 14px 10px; font-size: 16px; }

/* build version now lives inline in the intro title, so hide the floating badge */
#verBadge { display: none; }
.mi-ver { font-family: "Rajdhani", sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: 1px; color: var(--muted); margin-left: 6px; vertical-align: 1px; }

/* visibility pill (replaces the old ◉ button) — states who can see you */
.vis-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px; border-radius: 12px; cursor: pointer; flex-shrink: 0;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  backdrop-filter: blur(6px);
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .3px;
  white-space: nowrap;
}
.vis-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.vis-public  .vis-dot { background: var(--ok);     box-shadow: 0 0 8px var(--ok); }
.vis-group   .vis-dot { background: var(--behind); box-shadow: 0 0 8px var(--behind); }
.vis-private .vis-dot { background: var(--muted); }
.vis-public  { border-color: rgba(34,197,94,.5); }
.vis-group   { border-color: rgba(245,158,11,.5); }

/* inline visibility menu (premium popover) */
.vis-menu {
  position: absolute; z-index: 600;
  top: calc(env(safe-area-inset-top) + 62px); right: 12px;
  width: min(300px, 84vw);
  background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: 14px; padding: 8px;
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 2px;
}
.vis-menu.hidden { display: none; }
.vis-menu-head { font-family: "Teko", sans-serif; letter-spacing: 2px; font-size: 13px; color: var(--muted); padding: 6px 8px 4px; }
.vis-opt {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 11px 10px; border-radius: 10px; cursor: pointer;
  background: none; border: none; color: var(--text);
}
.vis-opt:active { background: rgba(255,255,255,.06); }
.vis-opt .vis-dot { width: 12px; height: 12px; }
.vd-public  { background: var(--ok);     box-shadow: 0 0 8px var(--ok); }
.vd-group   { background: var(--behind); box-shadow: 0 0 8px var(--behind); }
.vd-private { background: var(--muted); }
.vis-opt-txt { display: flex; flex-direction: column; gap: 1px; }
.vis-opt-txt b { font-size: 15px; font-weight: 700; }
.vis-opt-txt small { color: var(--muted); font-size: 12px; }

/* premium intro banner (under the top bar) */
.map-intro {
  position: absolute; z-index: 480; pointer-events: none;
  top: calc(env(safe-area-inset-top) + 64px); left: 12px; right: 12px;
  background: linear-gradient(180deg, rgba(18,23,31,.94), rgba(18,23,31,.80));
  border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 14px; backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 2px;
}
.mi-title { font-family: "Teko", sans-serif; letter-spacing: 3px; font-size: 16px; color: var(--accent); line-height: 1; }
.mi-sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; }

/* push the "rides happening now" list below the intro banner */
.rides-now { top: calc(env(safe-area-inset-top) + 122px); }

/* ---- end-of-ride badge report (in the ride summary sheet) ---- */
.ride-badges { margin: 2px 0 4px; }
.rb-h { font-family: "Teko", sans-serif; letter-spacing: 2px; font-size: 14px; color: var(--muted); margin: 12px 0 7px; }
.rb-h-gold { color: var(--gold); }
.rb-ups { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2px; }
.rb-up {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,207,51,.08); border: 1px solid rgba(255,207,51,.32);
  border-radius: 12px; padding: 6px 12px 6px 6px;
}
.rb-up-txt { display: flex; flex-direction: column; line-height: 1.05; }
.rb-up-txt b { font-family: "Teko", sans-serif; letter-spacing: 1px; color: var(--gold); font-size: 17px; }
.rb-up-txt span { font-size: 12px; color: var(--text); }
.rb-prog { margin: 8px 0; }
.rb-prow { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.rb-prow span:first-child { color: var(--text); font-weight: 600; }
.rb-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.rb-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--gold)); }
.rb-max { color: var(--ok); font-weight: 700; }

/* ============ v0.5.9: sigil logo, join combo, map hints, feed maps, date range ============ */
/* login sigil */
.brand-mark { color: var(--accent); filter: drop-shadow(0 0 14px var(--accent-glow)); transform: none; }
.brand-mark svg { width: 56px; height: 56px; display: block; }

/* join + code as a single button (input lives inside the button) */
.join-combo {
  display: flex; align-items: stretch; height: 50px;
  border: 1px solid var(--accent); border-radius: 12px; overflow: hidden;
  background: var(--panel-solid); box-shadow: 0 0 16px rgba(255,107,44,.18);
}
.join-code {
  flex: 1; min-width: 0; border: none; background: none; color: var(--text);
  text-transform: uppercase; letter-spacing: 4px; text-align: center; padding: 0 8px;
  font-family: "Teko", sans-serif; font-size: 24px;
}
.join-code::placeholder { letter-spacing: 1.5px; color: var(--muted); font-size: 15px; }
.join-code:focus { outline: none; }
.join-go {
  display: flex; align-items: center; gap: 7px; padding: 0 20px; cursor: pointer; border: none;
  background: var(--accent); color: #160a03;
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 1px;
}
.join-go .btn-ico { width: 19px; height: 19px; }
.join-go:active { filter: brightness(.93); }

/* map control slide-in confirmation (from the left edge) */
.map-hint {
  position: fixed; z-index: 1100; left: 0; top: 46%;
  transform: translateX(-115%); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.85,.25,1), opacity .25s;
  background: var(--panel-solid); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 10px 18px; max-width: 72%;
  font-family: "Teko", sans-serif; letter-spacing: 2px; font-size: 19px; color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.45); pointer-events: none; white-space: nowrap;
}
.map-hint.show { transform: translateX(0); opacity: 1; }

/* feed trail → tappable interactive route */
.feed-trailwrap { position: relative; cursor: pointer; }
.trail-hint {
  position: absolute; bottom: 8px; right: 9px; pointer-events: none;
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .5px;
  color: var(--accent); background: rgba(10,13,18,.72); padding: 3px 9px; border-radius: 20px;
  border: 1px solid rgba(255,107,44,.35);
}

/* visible, intentional date-range pickers (were invisible dark-on-dark) */
.date-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.df-lbl { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 1.5px; color: var(--muted); }
.rides-filter input[type="date"] { color-scheme: dark; width: 100%; min-height: 38px; }

/* ============ v0.6.0: Twisted-Metal feed "ride report" cards ============ */
.feed-card {
  position: relative; height: 250px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); margin-bottom: 14px; padding: 0; cursor: pointer;
  background: #0a0d12; box-shadow: 0 6px 22px rgba(0,0,0,.4);
}
.fc-map { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #0a0d12; }
.fc-map .leaflet-container { background: #0a0d12; font: inherit; }
/* top + bottom darkening so text stays readable over imagery */
.fc-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,11,16,.78) 0%, rgba(8,11,16,0) 30%,
    rgba(8,11,16,0) 42%, rgba(8,11,16,.55) 72%, rgba(8,11,16,.92) 100%);
}
.fc-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: auto;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
}
.fc-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); flex-shrink: 0; }
.fc-av.init { display: flex; align-items: center; justify-content: center; font-family: "Teko", sans-serif; font-size: 20px; background: var(--panel); color: var(--text); }
.fc-who { display: flex; flex-direction: column; line-height: 1.12; }
.fc-who b { font-size: 16px; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.9); }
.fc-who span { font-size: 12px; color: #d6deea; text-shadow: 0 1px 5px rgba(0,0,0,.9); }
.fc-grp {
  margin-left: auto; font-family: "Teko", sans-serif; font-size: 14px; letter-spacing: 1px;
  color: #160a03; background: var(--accent); padding: 2px 10px; border-radius: 6px;
  box-shadow: 0 0 14px var(--accent-glow);
}
.fc-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; padding: 0 14px 12px; }
.fc-title {
  font-family: "Teko", sans-serif; font-size: 27px; letter-spacing: 1px; color: #fff;
  line-height: 1; margin-bottom: 8px; text-shadow: 0 2px 10px rgba(0,0,0,.95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.fc-stats { display: flex; gap: 18px; }
.fc-stat { display: flex; flex-direction: column; }
.fc-stat b {
  font-family: "Teko", sans-serif; font-size: 33px; line-height: .82; color: var(--accent);
  text-shadow: 0 0 16px rgba(255,107,44,.55), 0 2px 6px rgba(0,0,0,.95);
}
.fc-stat small {
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 1.5px;
  color: #d6deea; margin-top: 2px; text-shadow: 0 1px 4px rgba(0,0,0,.95);
}
.fc-actions { display: flex; gap: 8px; pointer-events: auto; flex-shrink: 0; }
.fc-act {
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.28); background: rgba(8,11,16,.62);
  color: #fff; cursor: pointer; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 13px;
  backdrop-filter: blur(4px);
}
.fc-act .ico { width: 16px; height: 16px; }
.fc-act:active { transform: scale(.95); }
.fc-act.gpx { color: var(--accent); border-color: rgba(255,107,44,.55); }
.fc-act.like.liked { color: #ef4444; border-color: #ef4444; }

/* swipe-left action tray (Share to FB · Copy link · Delete) */
.fc-slide { position: absolute; inset: 0; z-index: 1; background: #0a0d12; will-change: transform; }
.fc-tray { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; display: flex; align-items: stretch; }
.fc-tray-btn {
  width: 78px; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #fff; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1px;
}
.fc-tray-btn .ico { width: 22px; height: 22px; }
.fc-tray-btn:active { filter: brightness(1.12); }
.fc-tray-btn.fb { background: #1877f2; }
.fc-tray-btn.copy { background: #37414f; }
.fc-tray-btn.del { background: var(--danger); }
/* report card top-left meta for the rides variant (date + SOLO/GROUP) */
.fc-date { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .5px; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.9); }
.fc-grp.solo { background: rgba(8,11,16,.66); color: #fff; border: 1px solid rgba(255,255,255,.25); box-shadow: none; }

/* ============ v0.6.1: profile rides, settings toggle, avatar cam, trail modal ============ */
/* avatar camera badge — now a sibling button so the circle's overflow doesn't crop it */
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-cam { cursor: pointer; padding: 0; z-index: 3; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }

/* BADGES / RIDES switch inside another rider's profile sheet */
.pv-seg { margin: 16px 0 14px; }
#pvRidesList.my-rides { gap: 0; }

/* premium / Twisted-Metal trail map modal */
.trail-map-card { max-height: 92dvh; border-top: 3px solid var(--accent); }
.tm-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tm-head h2 { margin: 0; color: #fff; text-shadow: 0 0 16px var(--accent-glow); }
.tm-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.tm-stats span { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1px; color: var(--muted); }
.tm-stats b { font-family: "Teko", sans-serif; font-size: 26px; font-weight: 600; color: var(--accent); letter-spacing: 0; margin-right: 5px; text-shadow: 0 0 14px rgba(255,107,44,.45); }
.trail-map { height: 58dvh; border-radius: 12px; overflow: hidden; margin: 0 0 4px; border: 1px solid var(--line); box-shadow: 0 0 26px rgba(0,0,0,.5) inset; }

/* trail modal rider header (avatar + name + posting time, then the title) */
.tm-rider { display: flex; align-items: center; gap: 10px; }
.tm-rider.hidden { display: none; }
.tm-av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; overflow: hidden; border: 2px solid var(--accent);
  background: var(--panel); display: flex; align-items: center; justify-content: center;
  font-family: "Teko", sans-serif; font-size: 18px; color: var(--text); }
.tm-av img { width: 100%; height: 100%; object-fit: cover; }
.tm-who { display: flex; flex-direction: column; line-height: 1.15; }
.tm-who b { font-size: 16px; color: #fff; }
.tm-who span { font-size: 12px; color: var(--muted); }
.tm-head h2 { font-size: 26px; }

/* date-range filter — aligned, equal heights, no more wonky layout on mobile */
.rides-filter { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.rides-filter #ridesClear { height: 44px; padding: 0 18px; flex-shrink: 0; align-self: flex-end; }
/* styled date field: always shows a calendar icon + value (or "Any date"), native picker overlaid */
.date-box {
  position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
  background: #0f141b; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.date-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.date-ico { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.date-val { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-val.empty { color: var(--muted); }
.date-box input[type="date"] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  border: none; margin: 0; padding: 0; cursor: pointer; color-scheme: dark;
}

/* ============ v0.6.4: solo/group ride HUD — gamer biker HUD, off the edges ============ */
/* keep the live-GPS strip clear of the top chips (was overlapping on the notch) */
.gps-status { top: calc(env(safe-area-inset-top) + 64px); }

/* SOLO ride: metric strip + finish button with more breathing room and accent edges */
.solo-strip { top: calc(env(safe-area-inset-top) + 16px); gap: 7px; }
.solo-strip .sm {
  background: linear-gradient(180deg, rgba(8,11,16,.82), rgba(8,11,16,.62));
  border: 1px solid rgba(255,107,44,.3); border-bottom: 2px solid var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.solo-strip .sm b { text-shadow: 0 0 12px var(--accent-glow); }
.solo-strip .sm small { color: var(--accent); opacity: .9; }
#solo .hud-bottom { padding: 0 16px calc(30px + env(safe-area-inset-bottom)); }
.stop-btn { letter-spacing: 2px; box-shadow: 0 0 22px rgba(239,68,68,.35); }
.solo-gauge { bottom: 128px; }

/* GROUP ride: lift the RIDERS drawer off the bottom edge + biker-HUD accent */
.drawer {
  transform: translateY(calc(100% - 64px));
  border-top: 2px solid var(--accent);
  box-shadow: 0 -10px 34px rgba(0,0,0,.55);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.drawer-handle { padding: 18px 16px 14px; }
.drawer-handle > span:first-child { color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); }
/* group ride top chips sit a touch lower, clearly off the notch */
#room .hud-top { padding-top: calc(env(safe-area-inset-top) + 14px); }

/* ============ v0.6.5: bottom-bar spacing + rides-filter alignment ============ */
/* sit exactly on top of the real tab bar (height measured into --tabbar-h at runtime), so the
   gap below the ride-code bar equals the internal gap above it — uniform, premium spacing. */
.hud-bottom {
  bottom: var(--tabbar-h, 56px); padding: 14px 14px 14px; gap: 14px;
  background: linear-gradient(to top, var(--bg) 76%, transparent);
}
/* the "All" button now lives in its own column with a spacer label, so it lines up with the date fields */
.date-clear { flex: 0 0 auto; }
.date-clear .btn.tiny { height: 44px; padding: 0 18px; }
/* don't let "View all on map" touch the first ride card */
#mapAllBtn { margin-bottom: 14px; }

/* ============ v0.6.6: page entrance + badge-unlock scene ============ */
/* every screen fades + slides in when shown */
.screen-enter { animation: screenIn .34s cubic-bezier(.22,.85,.25,1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 🎖️ BADGE UNLOCKED celebration */
.badge-unlock {
  position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(22,12,2,.86), rgba(5,7,10,.97));
  backdrop-filter: blur(7px); padding: 24px;
}
.badge-unlock.hidden { display: none; }
.bu-rays {
  position: absolute; width: 160vmax; height: 160vmax; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255,107,44,.13) 0deg 7deg, transparent 7deg 15deg);
  animation: buSpin 16s linear infinite;
}
.badge-unlock.show .bu-rays { opacity: 1; transition: opacity .6s ease; }
@keyframes buSpin { to { transform: rotate(360deg); } }
.bu-inner { position: relative; text-align: center; transform: scale(.7); opacity: 0; }
.badge-unlock.show .bu-inner { animation: buPop .55s cubic-bezier(.2,1.25,.35,1) forwards; }
@keyframes buPop { to { transform: scale(1); opacity: 1; } }
.bu-kicker {
  font-family: "Teko", sans-serif; letter-spacing: 5px; font-size: 20px; color: var(--accent);
  text-shadow: 0 0 18px var(--accent-glow); margin-bottom: 14px;
}
.bu-medal { display: inline-block; filter: drop-shadow(0 0 34px var(--accent-glow)); }
.badge-unlock.show .bu-medal { animation: buMedalIn .7s cubic-bezier(.2,1.5,.3,1) .08s both; }
@keyframes buMedalIn { from { transform: scale(.3) rotate(-22deg); } to { transform: scale(1) rotate(0); } }
.bu-name { font-family: "Teko", sans-serif; font-size: 40px; letter-spacing: 3px; color: #fff; margin-top: 14px; line-height: 1; }
.bu-tier { font-family: "Rajdhani", sans-serif; font-weight: 700; letter-spacing: 3px; font-size: 16px; margin-top: 4px; }
.bu-btn { margin-top: 28px; min-width: 170px; }

/* ============ v0.6.7: live rides = horizontal scroller (scales to any count) ============ */
.rides-now {
  top: calc(env(safe-area-inset-top) + 64px); left: 0; right: 0;
  max-height: none; overflow: visible;
  background: none; border: none; backdrop-filter: none; padding: 0;
}
.rn-head {
  font-family: "Teko", sans-serif; font-size: 14px; letter-spacing: 2px; color: #fff;
  margin: 0 12px 8px; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
.rn-scroll {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  padding: 0 12px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rn-scroll::-webkit-scrollbar { display: none; }
.rn-panel {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 8px; min-width: 190px; max-width: 244px;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.rn-av {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; cursor: pointer;
  border: 2px solid var(--accent); background: var(--panel); box-shadow: 0 0 10px var(--accent-glow);
  display: flex; align-items: center; justify-content: center;
  font-family: "Teko", sans-serif; font-size: 18px; color: var(--text);
}
.rn-av img { width: 100%; height: 100%; object-fit: cover; }
.rn-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.rn-meta .rn-name { font-size: 14px; color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-meta > span { font-size: 11px; color: var(--ok); letter-spacing: 1px; display: flex; align-items: center; gap: 5px; }
.live-dot.sm { width: 7px; height: 7px; }
.rn-panel .rn-join { flex-shrink: 0; }

/* "My trails" quick-access strip above the ride buttons (horizontal scroll) */
.trails-strip { width: 100%; }
.ts-scroll {
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ts-scroll::-webkit-scrollbar { display: none; }
.ts-panel {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 7px 12px 7px 10px; min-width: 148px; max-width: 210px;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px;
  text-align: left; color: var(--text); transition: transform .08s;
}
.ts-panel:active { transform: scale(.97); }
.ts-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.ts-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ts-txt b { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-txt > span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ts-panel.active { border-color: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }

/* ============ v0.6.9: rider mini-profile preview (pin tap / hover) ============ */
.rider-pop .leaflet-popup-content-wrapper {
  background: var(--panel-solid); color: var(--text); border: 1px solid var(--line);
  border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.6);
}
.rider-pop .leaflet-popup-content { margin: 0; width: 250px !important; }
.rider-pop .leaflet-popup-tip { background: var(--panel-solid); border: none; box-shadow: none; }
.rider-pop a.leaflet-popup-close-button { color: #fff; top: 7px; right: 9px; font-size: 18px; z-index: 5; }
.rp-cover { height: 74px; background: linear-gradient(135deg, #311e0d, #12171f); background-size: cover; background-position: center; }
.rp-inner { padding: 0 14px 14px; margin-top: -30px; text-align: center; }
.rp-av {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto; overflow: hidden;
  border: 3px solid var(--accent); background: var(--panel); box-shadow: 0 0 14px var(--accent-glow);
  display: flex; align-items: center; justify-content: center; font-family: "Teko", sans-serif; font-size: 26px; color: #fff;
}
.rp-av img { width: 100%; height: 100%; object-fit: cover; }
.rp-name { font-family: "Teko", sans-serif; font-size: 24px; letter-spacing: 1px; color: #fff; margin-top: 8px; line-height: 1; }
.rp-stats { display: flex; justify-content: center; gap: 20px; margin-top: 10px; }
.rp-stats b { font-family: "Teko", sans-serif; font-size: 24px; color: var(--accent); display: block; line-height: 1; }
.rp-stats small { font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.rp-badges { display: flex; justify-content: center; gap: 11px; margin: 12px 0 2px; }
.rp-tier { display: inline-flex; align-items: center; gap: 4px; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 12px; color: var(--text); }
.rp-tier i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rp-view { margin-top: 12px; }

/* ===================================================================== */
/* v0.7.0 — luxury loader + Genshin-style living login                     */
/* ===================================================================== */

/* ---- LUXURY LOADER (locks UI on launch + significant writes) ---- */
.app-loader {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(120% 100% at 50% 50%, rgba(10,13,18,0.86) 0%, rgba(6,8,11,0.96) 70%);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 1; transition: opacity 0.4s ease;
}
.app-loader.hidden { display: none; }
.app-loader.fade-out { opacity: 0; }
.al-core { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.al-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.al-ring-1 { border-top-color: var(--accent); border-right-color: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent-glow)); animation: alspin 1.15s linear infinite; }
.al-ring-2 { inset: 16px; border-bottom-color: rgba(255,107,44,0.55); border-left-color: rgba(255,107,44,0.55);
  animation: alspin 1.7s linear infinite reverse; }
.al-sigil { width: 74px; height: 74px; color: var(--accent);
  filter: drop-shadow(0 0 12px var(--accent-glow)); animation: alpulse 1.8s ease-in-out infinite; }
.al-sigil svg { width: 100%; height: 100%; }
.al-label { font-family: "Teko", sans-serif; font-size: 22px; letter-spacing: 4px; color: #fff;
  text-shadow: 0 0 14px var(--accent-glow); }
.al-dots { display: flex; gap: 7px; }
.al-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.3;
  animation: aldot 1.1s ease-in-out infinite; }
.al-dots i:nth-child(2) { animation-delay: 0.18s; }
.al-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes alspin { to { transform: rotate(360deg); } }
@keyframes alpulse { 0%,100% { transform: scale(0.94); opacity: 0.82; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes aldot { 0%,100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* disable buttons mid-write so a double-tap can't fire twice */
.is-busy { opacity: 0.55; pointer-events: none; filter: saturate(0.6); }

/* ---- GENSHIN-STYLE LIVING LOGIN ---- */
.auth-screen { position: relative; overflow: hidden; }
.auth-map { position: absolute; inset: 0; z-index: 0; filter: saturate(1.18) brightness(0.9) contrast(1.06); }
.auth-map .leaflet-control-container,
.auth-map .leaflet-control-attribution { display: none !important; }
/* center-darkening vignette: dark in the middle (foundation for the form), lush terrain at the edges */
.auth-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(7,9,13,0.92) 0%, rgba(7,9,13,0.64) 28%, rgba(7,9,13,0.1) 60%, rgba(7,9,13,0.34) 100%),
    linear-gradient(180deg, rgba(7,9,13,0.5) 0%, rgba(7,9,13,0) 20%, rgba(7,9,13,0) 76%, rgba(7,9,13,0.66) 100%); }
/* ghost riders drifting on the backdrop */
.ghost-rider { width: 14px; height: 14px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: currentColor; box-shadow: 0 0 10px 2px currentColor; opacity: 0.92;
  border: 1.5px solid rgba(255,255,255,0.85); position: relative; }
.ghost-rider::after { content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.92); }

/* drifting embers / fireflies — magical motes rising over the darkened centre */
.auth-embers { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.auth-embers i { position: absolute; bottom: -12px; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,160,90,0.95); box-shadow: 0 0 8px 2px rgba(255,130,50,0.7);
  opacity: 0; animation: ember linear infinite; }
.auth-embers i:nth-child(1){ left: 12%; animation-duration: 11s; animation-delay: 0s; }
.auth-embers i:nth-child(2){ left: 24%; animation-duration: 14s; animation-delay: 2.4s; width:3px;height:3px; }
.auth-embers i:nth-child(3){ left: 38%; animation-duration: 9.5s; animation-delay: 1.1s; }
.auth-embers i:nth-child(4){ left: 49%; animation-duration: 13s; animation-delay: 5s; width:5px;height:5px; }
.auth-embers i:nth-child(5){ left: 61%; animation-duration: 10.5s; animation-delay: 3.2s; }
.auth-embers i:nth-child(6){ left: 72%; animation-duration: 15s; animation-delay: 0.6s; width:3px;height:3px; }
.auth-embers i:nth-child(7){ left: 83%; animation-duration: 12s; animation-delay: 4.1s; }
.auth-embers i:nth-child(8){ left: 90%; animation-duration: 9s; animation-delay: 2s; width:5px;height:5px; }
.auth-embers i:nth-child(9){ left: 6%; animation-duration: 13.5s; animation-delay: 6s; }
@keyframes ember {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 0.9; }
  50% { transform: translateY(-46vh) translateX(14px); opacity: 0.8; }
  88% { opacity: 0.5; }
  100% { transform: translateY(-92vh) translateX(-10px); opacity: 0; }
}

/* glass card floating above the map, wrapped in a magical glowing aura */
.auth-card { position: relative; z-index: 3;
  background:
    radial-gradient(130% 80% at 50% -8%, rgba(255,107,44,0.16) 0%, rgba(255,107,44,0) 46%),
    linear-gradient(180deg, rgba(22,28,40,0.58), rgba(11,15,22,0.74));
  border: 1px solid rgba(255,150,90,0.16); border-radius: 22px; padding: 30px 24px 18px;
  -webkit-backdrop-filter: blur(15px) saturate(1.2); backdrop-filter: blur(15px) saturate(1.2);
  box-shadow: 0 26px 70px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 40px rgba(255,107,44,0.05);
  animation: authrise 0.7s cubic-bezier(.2,.8,.2,1) both; }
/* slow-rotating warm aura glowing around the card's edge */
.auth-card::before { content: ""; position: absolute; inset: -2px; border-radius: 24px; z-index: -1;
  background: conic-gradient(from 0deg,
    rgba(255,107,44,0) 0deg, rgba(255,107,44,0) 30deg,
    rgba(255,170,80,0.85) 95deg, rgba(255,107,44,0.2) 150deg,
    rgba(255,107,44,0) 210deg, rgba(255,107,44,0) 360deg);
  filter: blur(9px); opacity: 0.75; animation: auraspin 7s linear infinite; }
@keyframes auraspin { to { transform: rotate(360deg); } }
/* faint travelling sheen across the glass */
.auth-card::after { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.07) 48%, transparent 60%);
  background-size: 250% 100%; animation: sheen 6.5s ease-in-out infinite; }
@keyframes sheen { 0%,100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }
.auth-card > * { position: relative; z-index: 1; }
@keyframes authrise { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }

/* brand: logo on its own line + bigger, title below with breathing room */
.auth-card .brand { flex-direction: column; gap: 10px; }
.brand-logo { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.auth-card .brand-mark svg { width: 76px; height: 76px; }
.auth-card .brand-mark { position: relative; z-index: 2; filter: drop-shadow(0 0 16px var(--accent-glow)); animation: alpulse 3.2s ease-in-out infinite; }
/* pulsing magical halo behind the logo */
.brand-halo { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px;
  transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,107,44,0.5) 0%, rgba(255,107,44,0.14) 40%, rgba(255,107,44,0) 70%);
  animation: halo 3.4s ease-in-out infinite; }
@keyframes halo { 0%,100% { opacity: 0.55; transform: translate(-50%,-50%) scale(0.9); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); } }
/* slow-rotating rune ring around the logo */
.brand-ring { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px;
  transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; z-index: 1;
  border: 1px dashed rgba(255,150,90,0.45); animation: ringspin 14s linear infinite; }
.brand-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px solid rgba(255,107,44,0.18); }
@keyframes ringspin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.auth-card .brand h1 { font-size: 42px; letter-spacing: 3px; line-height: 0.92;
  text-shadow: 0 2px 22px rgba(0,0,0,0.6), 0 0 26px rgba(255,107,44,0.25); }
.auth-card .tagline { margin-top: 6px; }

/* ===================================================================== */
/* v0.7.1 — "proper game" panel language, applied app-wide                 */
/* The login card's DNA (warm top-glow, warm-tinted edge, layered depth),  */
/* MINUS the rotating aura + travelling sheen, so no panel feels corporate.*/
/* ===================================================================== */
:root {
  --game-glow: radial-gradient(135% 95% at 50% -16%, rgba(255,107,44,0.11) 0%, rgba(255,107,44,0) 52%);
  --game-edge: rgba(255,150,90,0.15);
  --game-depth: 0 16px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 32px rgba(255,107,44,0.05);
  --game-depth-sm: 0 8px 22px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 22px rgba(255,107,44,0.04);
}

/* solid content panels — modals / sheets, feed report cards, the visibility menu */
.sheet-card, .feed-card, .vis-menu {
  background: var(--game-glow), linear-gradient(180deg, rgba(24,30,42,0.985), rgba(13,17,24,0.99));
  border: 1px solid var(--game-edge);
  box-shadow: var(--game-depth);
}

/* glassy panels floating over the live map (NOT .speedo — it's a borderless big number) */
.map-intro, .rn-panel {
  background: var(--game-glow), linear-gradient(180deg, rgba(22,28,40,0.82), rgba(12,16,23,0.9));
  border: 1px solid var(--game-edge);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: var(--game-depth-sm);
}

/* nested interactive tiles — lighter, so they read as the same family without shouting */
.ts-panel, .stat, .priv-opt, .seg, .date-box {
  background: var(--game-glow), linear-gradient(180deg, rgba(22,28,40,0.72), rgba(13,17,22,0.82));
  border: 1px solid var(--game-edge);
}

/* small HUD chips — keep their meaningful (state-coloured) borders, just add the warm glow */
.callsign-chip, .count-chip, .room-chip, .vis-pill {
  background: var(--game-glow), linear-gradient(180deg, rgba(22,28,40,0.82), rgba(12,16,23,0.9));
  box-shadow: var(--game-depth-sm);
}

/* group-ride tools drawer — warm glow, keep its accent top edge */
.drawer {
  background: var(--game-glow), linear-gradient(180deg, rgba(22,28,40,0.9), rgba(12,16,23,0.95));
}

/* ===================================================================== */
/* v0.7.2 — glow-up: forged buttons, premium map controls + tab bar       */
/* Kills the flat "cartoony" look on the ride buttons / bottom bar.        */
/* ===================================================================== */
:root {
  /* glossy "forged metal" orange for primary CTAs */
  --accent-grad: linear-gradient(180deg, #ff9356 0%, #ff6b2c 52%, #e2551c 100%);
  --accent-emboss: inset 0 1px 0 rgba(255,222,196,0.55), inset 0 -3px 7px rgba(150,52,12,0.4);
  --accent-cast: 0 8px 22px rgba(255,107,44,0.42);
}

/* primary CTAs everywhere (Continue with Google, Save Ride, Group Ride, JOIN…) */
.btn.primary, .map-btn.group, .join-go {
  background: var(--accent-grad);
  border-color: #ff9356; color: #1c0a02;
  box-shadow: var(--accent-cast), var(--accent-emboss);
  text-shadow: 0 1px 0 rgba(255,214,180,0.45);
}
.btn.primary:active, .map-btn.group:active, .join-go:active { filter: brightness(1.04); transform: scale(.97); }

/* solo ride button — warm dark glass instead of a flat outline */
.map-btn.solo {
  background: var(--game-glow), linear-gradient(180deg, rgba(34,26,21,0.92), rgba(15,13,17,0.96));
  border-color: rgba(255,140,80,0.7); color: var(--accent);
  box-shadow: 0 8px 20px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 18px rgba(255,107,44,0.2);
  text-shadow: 0 0 12px var(--accent-glow);
}

/* join code bar — warmer glass shell + glow (the JOIN button is forged above) */
.join-combo {
  background: var(--game-glow), linear-gradient(180deg, rgba(24,30,42,0.95), rgba(13,17,24,0.98));
  border-color: rgba(255,140,80,0.65);
  box-shadow: 0 8px 22px rgba(0,0,0,0.42), 0 0 20px rgba(255,107,44,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* middle-right map controls — premium forged-glass pills */
.map-ctl {
  background: var(--game-glow), linear-gradient(180deg, rgba(26,32,44,0.9), rgba(12,16,23,0.94));
  border: 1px solid var(--game-edge);
  box-shadow: var(--game-depth-sm);
}

/* bottom tab bar — warm glass deck with a glowing active indicator */
.tabbar {
  background:
    radial-gradient(120% 240% at 50% 0%, rgba(255,107,44,0.12) 0%, rgba(255,107,44,0) 58%),
    linear-gradient(180deg, rgba(24,30,42,0.98), rgba(10,13,19,0.99));
  border-top: 1px solid var(--game-edge);
  box-shadow: 0 -12px 34px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.tab { position: relative; }
.tab.active { color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); }
.tab.active .tab-ico { filter: drop-shadow(0 0 9px var(--accent-glow)); }
.tab.active::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 36px; height: 3px; border-radius: 0 0 4px 4px;
  background: var(--accent); box-shadow: 0 0 12px var(--accent-glow);
}

/* ===================================================================== */
/* v0.7.3 — polish: avatar clip, active-tab embers, uniform bottom gap    */
/* ===================================================================== */
/* kill the square photo-corner bleed behind circular feed avatars
   (Android WebView <img> + border-radius + border compositing artifact) */
.fc-av { clip-path: circle(50%); }

/* subtle floating embers rising from the CURRENTLY SELECTED bottom-tab */
.tab-emb { position: absolute; left: 0; right: 0; top: 4px; height: 30px; pointer-events: none; }
.tab-emb i {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,160,90,0.95); box-shadow: 0 0 6px 1px rgba(255,120,50,0.75);
  opacity: 0;
}
.tab.active .tab-emb i { animation: tabEmber linear infinite; }
.tab.active .tab-emb i:nth-child(1) { animation-duration: 2.8s; animation-delay: 0s;   --dx: -7px; }
.tab.active .tab-emb i:nth-child(2) { animation-duration: 3.4s; animation-delay: 1.1s; --dx:  6px; }
.tab.active .tab-emb i:nth-child(3) { animation-duration: 3.0s; animation-delay: 1.9s; --dx:  0px; }
@keyframes tabEmber {
  0%   { transform: translate(-50%, 0) scale(1);   opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), -20px) scale(0.5); opacity: 0; }
}

/* ===================================================================== */
/* v0.7.4 — feed rider search + "badges unlocked this ride" on cards      */
/* ===================================================================== */
.feed-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feed-search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; min-width: 0; flex: 0 1 220px;
  background: var(--game-glow), linear-gradient(180deg, rgba(22,28,40,0.9), rgba(12,16,23,0.95));
  border: 1px solid var(--game-edge); border-radius: 12px; box-shadow: var(--game-depth-sm);
}
.feed-search:focus-within { border-color: rgba(255,140,80,0.7); box-shadow: 0 0 0 2px var(--accent-glow); }
.fs-ico { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.feed-search input {
  flex: 1; min-width: 0; width: auto; border: none; background: none; padding: 0; height: 100%;
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .5px; color: var(--text);
}
.feed-search input:focus { outline: none; box-shadow: none; }
.feed-search input::placeholder { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: .3px; }
.fs-clear { border: none; background: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.fs-clear:active { color: var(--accent); }

/* tag cluster on the top-right of a feed card: SOLO/GROUP badge + any badges unlocked that ride */
.fc-tags { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.fc-tags .fc-grp { margin-left: 0; }
.fc-unlocks { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; max-width: 132px;
  background: rgba(8,11,16,0.5); border-radius: 10px; padding: 3px 5px; backdrop-filter: blur(4px); }
.fc-unlock { display: inline-flex; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); }
.fc-unlock .medal { width: 30px !important; height: 30px !important; }

/* ===================================================================== */
/* v0.7.5 — ride selfies: camera FAB, polaroid on cards, trail photo pins */
/* ===================================================================== */
/* solo: float the camera at the vertical mid-right — well clear of the full-width FINISH button below,
   so a thumb reaching for the shutter never clips STOP. room keeps its bottom-right spot (no STOP there). */
.selfie-fab{position:absolute;z-index:600;right:14px;top:50%;transform:translateY(-50%);
  width:58px;height:58px;border-radius:50%;border:1px solid #ff9356;cursor:pointer;
  background:var(--accent-grad);color:#1c0a02;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(255,107,44,.45),var(--accent-emboss);transition:transform .08s,filter .15s}
.selfie-fab:active{transform:translateY(-50%) scale(.92);filter:brightness(1.05)}
.selfie-fab.in-room{top:auto;transform:none;bottom:calc(86px + env(safe-area-inset-bottom))}
.selfie-fab.in-room:active{transform:scale(.92)}
.selfie-ico{display:flex}.selfie-ico svg{width:28px;height:28px}
.selfie-count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;border-radius:11px;padding:0 5px;
  background:var(--gold);color:#160a03;border:2px solid #160a03;font-family:"Teko",sans-serif;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(255,207,51,.5)}
.selfie-count.hidden{display:none}

/* live preview strip of selfies taken THIS ride — tap a thumb to open the lightbox */
.ride-photo-strip{position:absolute;z-index:560;left:12px;right:12px;display:flex;gap:7px;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0}
.ride-photo-strip::-webkit-scrollbar{display:none}
.ride-photo-strip.hidden{display:none}
.rps-thumb{flex:0 0 auto;width:46px;height:46px;border-radius:10px;overflow:hidden;cursor:pointer;
  border:2px solid var(--accent);background:#0a0d12;
  box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 8px var(--accent-glow)}
.rps-thumb img{width:100%;height:100%;object-fit:cover;display:block}
#solo .ride-photo-strip{top:calc(env(safe-area-inset-top) + 78px)}
#room .ride-photo-strip{top:calc(env(safe-area-inset-top) + 70px)}

/* polaroid of ride selfies on a feed card (stacked + count when there are more) */
.fc-polaroid{position:absolute;right:14px;top:auto;bottom:68px;z-index:3;width:74px;background:#f4f1ea;padding:5px 5px 13px;
  border-radius:3px;box-shadow:0 7px 18px rgba(0,0,0,.55);transform:rotate(-4deg);cursor:pointer;transition:transform .12s}
.fc-polaroid:active{transform:rotate(-4deg) scale(.95)}
.fc-polaroid img{display:block;width:100%;height:62px;object-fit:cover;background:#222}
.fc-polaroid.stacked::before,.fc-polaroid.stacked::after{content:"";position:absolute;inset:0;background:#e7e2d7;border-radius:3px;z-index:-1;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.fc-polaroid.stacked::before{transform:rotate(5deg) translate(3px,2px)}
.fc-polaroid.stacked::after{transform:rotate(-9deg) translate(-3px,1px)}
.fc-poly-tape{position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(-3deg);width:34px;height:13px;
  background:rgba(255,210,140,.45);border:1px solid rgba(255,255,255,.22)}
.fc-poly-count{position:absolute;bottom:-8px;right:-8px;min-width:23px;height:23px;border-radius:12px;padding:0 5px;
  background:var(--accent);color:#160a03;border:1.5px solid #160a03;font-family:"Teko",sans-serif;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px var(--accent-glow);z-index:1}

/* photo pin on the trail line */
.photo-pin{color:var(--accent);line-height:0}
.photo-pin svg{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}

/* fullscreen photo lightbox */
.lightbox{position:fixed;inset:0;z-index:4500;display:flex;align-items:center;justify-content:center;
  background:rgba(4,6,9,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox.hidden{display:none}
.lb-img{max-width:92vw;max-height:82vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.7);object-fit:contain}
.lb-close{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:16px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--game-edge);background:rgba(20,26,36,.85);color:#fff;font-size:19px;cursor:pointer;z-index:2}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  border:1px solid var(--game-edge);background:rgba(20,26,36,.7);color:#fff;font-size:30px;line-height:1;cursor:pointer;z-index:2;padding-bottom:4px}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-nav.hidden{display:none}
.lb-count{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 18px);left:50%;transform:translateX(-50%);
  font-family:"Teko",sans-serif;letter-spacing:2px;color:#fff;font-size:18px;background:rgba(8,11,16,.7);padding:3px 14px;border-radius:20px}

/* ===================================================================== */
/* v0.8.0 — trail-map detail: badges earned + ride photo album            */
/* ===================================================================== */
.tm-sec-h{display:block;font-family:"Teko",sans-serif;letter-spacing:2px;font-size:14px;color:var(--muted);margin:14px 2px 8px}
.tm-sec-h i{color:var(--accent);font-style:normal}
.tm-badges{padding:0 2px}
.tm-badge-row{display:flex;flex-wrap:wrap;gap:14px}
.tm-badge{display:flex;flex-direction:column;align-items:center;gap:4px;width:62px;text-align:center}
.tm-badge .medal{width:38px!important;height:38px!important}
.tm-badge small{font-size:10px;line-height:1.1;color:var(--text);font-weight:600}
.tm-album{padding:0 2px 2px}
.tm-album-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tm-album-row::-webkit-scrollbar{display:none}
.tm-thumb{flex:0 0 auto;width:74px;height:74px;border-radius:10px;overflow:hidden;border:1px solid var(--game-edge);
  background:#0f141b;cursor:pointer;padding:0;box-shadow:var(--game-depth-sm)}
.tm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tm-thumb:active{transform:scale(.95)}

/* ===================================================================== */
/* v0.8.3 — LANDING: editorial scroll page below the login (luxe + vogue)  */
/* ===================================================================== */
:root{ --gold:#d8b36a; --gold-soft:#e7cd97; --ivory:#f2ece0; }

/* the auth screen becomes a scrollable editorial; login is the hero */
.auth-screen{ display:block; overflow-y:auto; overflow-x:hidden; padding:0; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
.auth-hero{ position:relative; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:22px; }

/* vogue location marking */
.vogue-tag{ position:absolute; z-index:4; pointer-events:none; }
.vt-name{ display:block; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:44px; letter-spacing:2px; line-height:.9; color:var(--ivory); text-shadow:0 2px 22px rgba(0,0,0,.85); }
.vt-name::first-letter{ color:var(--gold-soft); }
.vt-sub{ display:block; font-family:"Rajdhani",sans-serif; font-weight:600; font-size:11px; letter-spacing:3px; color:var(--gold-soft); margin-top:7px; text-transform:uppercase; }
.hero-tag{ left:26px; bottom:118px; }
.sec-tag{ top:46px; left:30px; }
.sec-tag.right{ left:auto; right:30px; text-align:right; }

/* scroll cue */
.scroll-cue{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:5; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--ivory); opacity:.9; }
.scroll-cue span{ font-family:"Rajdhani"; font-weight:700; font-size:11px; letter-spacing:3px; }
.scroll-cue i{ width:22px; height:34px; border:2px solid rgba(255,255,255,.5); border-radius:12px; position:relative; }
.scroll-cue i::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:7px; background:var(--gold); border-radius:2px; transform:translateX(-50%); animation:scrolldot 1.5s ease-in-out infinite; }
@keyframes scrolldot{ 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,13px)} }

/* fixed "get the app" callout */
.dl-callout{ position:fixed; top:calc(env(safe-area-inset-top) + 14px); right:14px; z-index:30; display:flex; align-items:center; gap:8px; padding:7px 10px 7px 14px; border-radius:30px;
  background:linear-gradient(180deg,rgba(30,25,18,.88),rgba(14,12,9,.92)); border:1px solid rgba(216,179,106,.7);
  box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 18px rgba(216,179,106,.22); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.dl-lead{ font-family:"Teko",sans-serif; letter-spacing:2px; font-size:15px; color:var(--gold-soft); }
.dl-ico{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(216,179,106,.45); text-decoration:none; }
.dl-ico svg{ width:20px; height:20px; }
.dl-ico:active{ transform:scale(.92); }

/* sticky section nav */
.land-nav{ position:fixed; left:14px; top:50%; transform:translateY(-50%); z-index:25; display:flex; flex-direction:column; gap:15px; }
.land-nav a{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.ln-dot{ width:10px; height:10px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); transition:all .2s; flex-shrink:0; }
.ln-lbl{ font-family:"Rajdhani"; font-weight:700; font-size:11px; letter-spacing:1px; color:var(--ivory); opacity:0; transform:translateX(-4px); transition:opacity .2s,transform .2s; white-space:nowrap; text-transform:uppercase; }
.land-nav a:hover .ln-lbl{ opacity:.9; transform:none; }
.land-nav a.active .ln-dot{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 10px var(--gold); transform:scale(1.25); }
.land-nav a.active .ln-lbl{ opacity:1; transform:none; color:var(--gold-soft); }

/* landing sections */
.land-sec{ position:relative; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:90px 26px; overflow:hidden; }
.sec-sat{ position:absolute; inset:0; z-index:0; filter:saturate(1.12) brightness(.74) contrast(1.05); }
.sec-sat .leaflet-control-container,.sec-sat .leaflet-control-attribution{ display:none!important; }
.sec-sat-veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(8,9,12,.72) 0%,rgba(8,9,12,.34) 32%,rgba(8,9,12,.5) 68%,rgba(8,9,12,.93) 100%); }
.sec-sat-veil.strong{ background:radial-gradient(120% 90% at 50% 45%,rgba(8,9,12,.7),rgba(8,9,12,.96)); }

.land-row{ position:relative; z-index:3; display:flex; align-items:center; gap:44px; max-width:1000px; width:100%; }
.land-row.reverse{ flex-direction:row-reverse; }
.land-copy{ flex:1 1 0; min-width:0; }
.land-kicker{ font-family:"Rajdhani"; font-weight:700; letter-spacing:3px; font-size:12px; color:var(--gold); }
.land-copy h2{ font-family:"Cormorant Garamond",serif; font-weight:600; font-size:46px; line-height:1.03; color:var(--ivory); margin:12px 0 14px; }
.land-copy p{ font-family:"Rajdhani"; font-weight:500; font-size:16px; line-height:1.55; color:#ccd3dd; max-width:430px; }
.land-btn{ display:inline-flex; width:auto; margin-top:22px; padding:13px 26px; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* phone frame + mock screens */
.phone{ flex:0 0 auto; width:258px; }
.phone-screen{ position:relative; width:100%; aspect-ratio:9/19.3; border-radius:36px; overflow:hidden; border:8px solid #14171d;
  box-shadow:0 34px 80px rgba(0,0,0,.62),0 0 0 2px rgba(216,179,106,.28),0 0 46px rgba(216,179,106,.16); background:#0a0d12; }
.mock-map{ position:absolute; inset:0; z-index:0; }
.mock-top{ position:absolute; top:12px; left:10px; right:10px; z-index:2; display:flex; justify-content:space-between; gap:6px; }
.mock-chip,.mock-pill{ display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:9px; font-family:"Rajdhani"; font-weight:700; font-size:10px; color:#fff;
  background:var(--game-glow),linear-gradient(180deg,rgba(22,28,40,.85),rgba(12,16,23,.9)); border:1px solid var(--game-edge); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.mock-chip.sm{ font-size:9px; padding:4px 7px; }
.mc-av{ width:16px; height:16px; border-radius:50%; background:var(--accent); color:#160a03; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; font-style:normal; }
.mock-pill i{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 6px var(--ok); }
.mock-bottom{ position:absolute; bottom:12px; left:10px; right:10px; z-index:2; display:flex; gap:7px; }
.mock-btn{ flex:1; text-align:center; padding:10px 4px; border-radius:11px; font-family:"Rajdhani"; font-weight:700; font-size:11px; color:var(--accent); border:1px solid rgba(255,140,80,.7);
  background:var(--game-glow),linear-gradient(180deg,rgba(34,26,21,.92),rgba(15,13,17,.96)); }
.mock-btn.group{ color:#1c0a02; background:var(--accent-grad); border-color:#ff9356; }

/* mock feed card */
.mock-feedcard{ position:absolute; inset:0; }
.mfc-shade{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,11,16,.55) 0%,rgba(8,11,16,0) 28%,rgba(8,11,16,.5) 64%,rgba(8,11,16,.93) 100%); }
.mfc-top{ position:absolute; top:12px; left:10px; right:10px; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; }
.mfc-grp{ font-family:"Teko"; font-size:12px; letter-spacing:1px; color:#160a03; background:var(--accent); padding:2px 8px; border-radius:6px; box-shadow:0 0 12px var(--accent-glow); }
.mfc-poly{ position:absolute; right:12px; bottom:78px; z-index:3; width:62px; background:#f4f1ea; padding:4px 4px 11px; border-radius:3px; transform:rotate(-4deg); box-shadow:0 7px 16px rgba(0,0,0,.55); }
.mfc-poly img{ display:block; width:100%; height:52px; object-fit:cover; background:#2a2a2a; }
.mfc-poly-c{ position:absolute; bottom:-7px; right:-7px; min-width:21px; height:21px; border-radius:11px; padding:0 5px; background:var(--accent); color:#160a03; border:1.5px solid #160a03; font-family:"Teko"; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 10px var(--accent-glow); }
.mfc-body{ position:absolute; left:11px; right:11px; bottom:12px; z-index:2; }
.mfc-title{ font-family:"Teko"; font-size:20px; letter-spacing:.5px; color:#fff; line-height:1; margin-bottom:6px; text-shadow:0 2px 8px rgba(0,0,0,.95); }
.mfc-stats{ display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; }
.mfc-stats b{ font-family:"Teko"; font-size:22px; color:var(--accent); line-height:1; }
.mfc-stats small{ font-size:8px; letter-spacing:1px; color:var(--muted); margin-right:6px; }

/* mock profile */
.mock-profile{ background:#0a0d12; }
.mp-cover{ position:absolute; top:0; left:0; right:0; height:34%; background:linear-gradient(135deg,#2a2018,#0f1319); }
.mp-cover::after{ content:""; position:absolute; inset:0; background:radial-gradient(100% 80% at 50% 0,rgba(216,179,106,.18),transparent 60%); }
.mp-av{ position:absolute; top:26%; left:50%; transform:translateX(-50%); width:64px; height:64px; border-radius:50%; background:var(--accent); color:#160a03; border:3px solid #0a0d12; display:flex; align-items:center; justify-content:center; font-family:"Teko"; font-size:30px; z-index:2; box-shadow:0 0 16px var(--accent-glow); }
.mp-name{ position:absolute; top:calc(26% + 70px); left:0; right:0; text-align:center; font-family:"Teko"; font-size:20px; letter-spacing:1px; color:#fff; }
.mp-stats{ position:absolute; top:calc(26% + 102px); left:14px; right:14px; display:flex; justify-content:space-around; }
.mp-stats span{ text-align:center; }
.mp-stats b{ display:block; font-family:"Teko"; font-size:22px; color:var(--accent); line-height:1; }
.mp-stats small{ font-size:8px; letter-spacing:1px; color:var(--muted); }
.mp-badges{ position:absolute; top:calc(26% + 150px); left:14px; right:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.mp-badges .medal{ width:100%!important; height:auto!important; aspect-ratio:1; }

/* download section */
.land-sec.dl{ text-align:center; }
.dl-inner{ position:relative; z-index:3; max-width:460px; }
.dl-logo{ width:84px; height:84px; margin:0 auto 8px; color:var(--accent); filter:drop-shadow(0 0 16px var(--accent-glow)); }
.dl-logo svg{ width:100%; height:100%; }
.dl-h{ font-family:"Cormorant Garamond",serif; font-weight:600; font-size:54px; color:var(--ivory); margin:6px 0 4px; }
.dl-sub{ font-family:"Rajdhani"; font-weight:600; letter-spacing:1px; color:var(--gold-soft); font-size:15px; margin-bottom:26px; }
.dl-cta{ display:flex; flex-direction:column; gap:12px; }
.dl-big{ display:flex; align-items:center; justify-content:center; gap:11px; padding:15px 18px; font-size:16px; }
.dl-big svg{ width:24px; height:24px; flex-shrink:0; }
.dl-big small{ display:block; font-size:10px; letter-spacing:1px; opacity:.85; font-weight:600; margin-top:2px; }
.dl-big.ghost{ background:var(--game-glow),linear-gradient(180deg,rgba(34,26,21,.9),rgba(15,13,17,.95)); border-color:rgba(255,140,80,.7); color:var(--accent); }
.dl-ios-note{ margin-top:16px; padding:12px 14px; border:1px dashed rgba(216,179,106,.4); border-radius:12px; background:rgba(8,11,16,.4); font-family:"Rajdhani"; font-size:12.5px; color:#aeb7c2; line-height:1.5; }
.dl-ios-note b{ color:var(--ivory); }
.dl-foot{ margin-top:22px; font-family:"Rajdhani"; font-size:11px; letter-spacing:1px; color:var(--muted); }
.dl-foot a{ color:#9fb0c4; }

/* phones stack under copy on narrow screens */
@media (max-width:760px){
  .land-row,.land-row.reverse{ flex-direction:column; gap:30px; text-align:center; }
  .land-copy p{ margin-left:auto; margin-right:auto; }
  .land-copy h2{ font-size:38px; }
  .phone{ width:230px; }
  .land-nav{ display:none; }
  .vt-name{ font-size:36px; }
  .sec-tag,.sec-tag.right{ left:50%; right:auto; transform:translateX(-50%); text-align:center; top:30px; }
  .hero-tag{ display:none; }
}

/* ===================================================================== */
/* v0.8.4 — landing polish: breathing room, no underlines, buttery blends */
/* ===================================================================== */

/* no cheap underlines on anything button/link-like */
.btn, a.btn, .land-btn, .dl-big, .dl-ico, .scroll-cue, .land-nav a, .dl-callout a, .scroll-cue:hover { text-decoration:none; }
.dl-foot a { text-decoration:none; border-bottom:1px solid rgba(159,176,196,.35); padding-bottom:1px; }

/* "get the app" callout — off the edge, refined */
.dl-callout{ top:calc(env(safe-area-inset-top) + 20px); right:26px; padding:8px 12px 8px 16px; gap:9px; }
@media (max-width:760px){
  .dl-callout{ right:14px; top:calc(env(safe-area-inset-top) + 12px); padding:6px 8px 6px 12px; gap:7px; }
  .dl-lead{ font-size:13px; } .dl-ico{ width:30px; height:30px; } .dl-ico svg{ width:18px; height:18px; }
}

/* generous section padding so nothing kisses the edge */
.land-sec{ padding:120px 7vw; background:#08090c; }
.land-row{ max-width:1080px; gap:6vw; }
@media (min-width:1100px){ .land-row{ gap:84px; } .land-copy h2{ font-size:52px; } }
@media (max-width:760px){
  .land-sec{ padding:118px 26px 96px; }
  .land-row,.land-row.reverse{ gap:34px; }
  .land-copy h2{ font-size:34px; padding:0 6px; }
}
.land-copy{ padding-right:8px; }

/* vogue tags clear of the fixed callout */
.sec-tag{ top:80px; left:34px; }
.sec-tag.right{ top:80px; left:auto; right:34px; }
@media (max-width:760px){ .sec-tag,.sec-tag.right{ top:60px; left:50%; right:auto; transform:translateX(-50%); text-align:center; } }

/* BUTTERY SEAMS: each satellite emerges from + dissolves into pure black at the section edges, so
   adjacent sections meet in darkness — no abrupt satellite jump between them. */
.sec-sat-veil{ background:
  linear-gradient(180deg, #08090c 0%, rgba(8,9,12,.5) 17%, rgba(8,9,12,.24) 50%, rgba(8,9,12,.55) 83%, #08090c 100%),
  radial-gradient(125% 75% at 50% 50%, transparent 52%, rgba(8,9,12,.55) 100%); }
.sec-sat-veil.strong{ background:radial-gradient(120% 90% at 50% 45%, rgba(8,9,12,.72), #08090c 92%); }
/* hero dissolves into the same black so it flows into the first section */
.auth-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:130px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent, #08090c); }