:root {
  --gold: #D6B25E; --gold-dim: #8F7534; --cream: #E9DFC8;
  --ink: #080808; --panel: #121210; --line: #2a2620;
}
* { margin: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; height: 100dvh; }
body {
  background: var(--ink); color: #fff;
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  overscroll-behavior: none;
}
.hide { display: none !important; }
.screen { position: fixed; inset: 0; }
.muted { color: var(--cream); opacity: .8; }
.error { color: #F09595; font-size: 13px; min-height: 18px; margin: 8px 0; text-align: center; }

/* ---------- AUTH ---------- */
#auth {
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    linear-gradient(180deg, rgba(8,8,8,.18) 0%, rgba(8,8,8,.45) 42%, rgba(8,8,8,.80) 100%),
    url('/assets/bg-login.jpg') center top / cover no-repeat var(--ink);
}
.logo-v { display:block; width:78%; max-width:240px; margin:0 auto 4px; }
.auth-box {
  width: 100%; max-width: 380px; border: 1px solid var(--gold-dim); padding: 32px 24px;
  background: rgba(8,8,8,.58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-row hr { flex: 1; border: none; border-top: 1px solid var(--gold-dim); }
.brand-row span { color: var(--gold); letter-spacing: 8px; font-weight: 700; font-size: 22px; }
.tagline { color: var(--gold-dim); letter-spacing: 4px; font-size: 10px; text-align: center; margin: 8px 0 24px; }
input {
  width: 100%; background: var(--panel); border: 1px solid var(--line); color: #fff;
  padding: 13px 14px; margin-bottom: 10px; font-size: 15px; border-radius: 4px; outline: none;
}
input:focus { border-color: var(--gold-dim); }
.btn-gold {
  width: 100%; background: var(--gold); color: var(--ink); border: none; padding: 14px;
  font-weight: 700; letter-spacing: 2px; font-size: 14px; cursor: pointer; border-radius: 4px;
}
.btn-dark {
  width: 100%; background: transparent; color: var(--cream); border: 1px solid var(--gold-dim);
  padding: 14px; font-weight: 600; letter-spacing: 2px; font-size: 13px; cursor: pointer; border-radius: 4px;
}
.switch { color: var(--cream); text-align: center; margin-top: 18px; font-size: 14px; cursor: pointer; }
.switch b { color: var(--gold); }

/* ---------- JOGO ---------- */
#map { position: absolute; inset: 0; }
#topbar {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 10px;
  background: linear-gradient(#080808F0 70%, #08080800);
  overflow-x: auto; scrollbar-width: none;
}
#topbar::-webkit-scrollbar { display: none; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); flex: none; }
#me-name { font-weight: 600; font-size: 14px; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#me-ha { font-size: 12px; margin-left: auto; white-space: nowrap; }
.chip {
  background: #121210E6; color: var(--cream); border: 1px solid var(--line);
  padding: 8px 12px; font-size: 12px; border-radius: 16px; cursor: pointer; white-space: nowrap;
}
.chip.active { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 700; }
.chip.strava { color: #FC4C02; border-color: #FC4C0255; }
.chip.strava.connected { color: var(--cream); }
#modalities {
  position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: 8px;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
#bottombar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(#08080800, #080808F0 40%);
}

/* ---------- MODAL ---------- */
#modal-root { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
#modal-backdrop {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,8,8,.30) 0%, rgba(8,8,8,.55) 45%, rgba(8,8,8,.75) 100%),
    url('/assets/bg-app.jpg') center top / cover no-repeat;
}
#modal-card {
  position: relative; width: min(460px, calc(100vw - 28px)); overflow-y: auto;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 70px);
  background: rgba(18,18,16,.94); border: 1px solid var(--gold-dim);
  padding: 20px 18px; animation: up .18s ease-out;
}
@keyframes up { from { transform: translateY(24px); opacity: .4; } }
.m-title { color: var(--gold); letter-spacing: 3px; font-size: 13px; font-weight: 700; margin-bottom: 14px; text-transform: uppercase; }
.m-close { position: sticky; float: right; top: 0; background: none; border: none; color: var(--cream); font-size: 20px; cursor: pointer; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.row {
  display: flex; align-items: center; gap: 10px; padding: 11px 2px;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.row .pos { width: 30px; color: var(--gold); font-weight: 600; }
.row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .val { color: var(--cream); font-size: 13px; }
.row .val small { display: block; font-size: 8px; letter-spacing: 1px; opacity: .55; text-align: right; }
.rk-caption { font-size: 9px; letter-spacing: 2px; color: var(--cream); opacity: .6; margin: -4px 0 8px; text-transform: uppercase; }
.row button { background: none; border: none; color: var(--gold); font-weight: 600; cursor: pointer; font-size: 13px; }
.stat-grid { display: flex; justify-content: center; margin: 10px 0 16px; }
.stat-grid > div { text-align: center; padding: 0 16px; }
.stat-grid > div + div { border-left: 1px solid var(--gold-dim); }
.stat-grid b { display: block; color: var(--gold); font-size: 24px; font-weight: 300; }
.stat-grid i { font-style: normal; color: var(--cream); font-size: 9px; letter-spacing: 2px; }
.empty { color: #777; text-align: center; padding: 16px 0; font-size: 14px; }
.m-actions { display: flex; gap: 10px; margin-top: 16px; }
.maplibregl-ctrl-attrib { display: none; }

.how { color:var(--cream); font-size:13px; line-height:1.55; padding:9px 0; border-bottom:1px solid var(--line); }
.how:last-child { border-bottom:none; }
.how b { color:var(--gold); display:block; margin-bottom:2px; }

.m-back { width:100%; margin-top:14px; }

.edit-avatar-row { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.ep-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); background:#121210; }
.ep-empty { border-style:dashed; }
.ep-label { display:block; color:var(--cream); font-size:11px; letter-spacing:2px; margin-bottom:6px; }
#ep-bio { width:100%; background:var(--panel); border:1px solid var(--line); color:#fff; padding:10px; font-size:14px; border-radius:4px; resize:none; font-family:inherit; }
.btn-line { background:none; border:1px solid var(--gold); color:var(--gold); padding:9px 14px; font-size:11px; letter-spacing:2px; font-weight:700; cursor:pointer; border-radius:4px; }

/* Botão oficial Connect with Strava (diretriz de marca — arte inalterada) */
.strava-official {
  position: fixed;
  top: calc(112px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
.strava-official img { display: block; }

/* E4 — tela Provas */
.prova-chips { display:flex; gap:6px; margin:4px 0 14px; }
.prova-row { border:1px solid #2a2620; padding:12px 12px 10px; margin-bottom:10px; position:relative; }
.prova-row.pb { border-color:#8F7534; }
.prova-dist { font-size:13px; letter-spacing:2px; color:#fff; font-weight:700; }
.prova-tempo { font-family:'Courier New',monospace; color:#D6B25E; font-size:20px; font-weight:700; margin-top:4px; letter-spacing:1px; }
.prova-meta { font-size:10px; color:#E9DFC8; opacity:.75; letter-spacing:1px; margin-top:2px; }
.prova-badge { position:absolute; top:10px; right:10px; font-size:8px; letter-spacing:2px; color:#D6B25E; border:1px solid #8F7534; padding:3px 7px; }
.prova-empty { font-size:11px; color:#E9DFC8; opacity:.55; margin-top:4px; letter-spacing:1px; }
.prova-card { margin-top:8px; }

/* E6 — tela do local (detalhes, dono do mês, recorde) */
.zs-owner { font-size:11px; letter-spacing:1px; color:#D6B25E; margin:-6px 0 10px; }
.zs-stats { display:flex; gap:18px; margin-bottom:12px; }
.zs-stats b { display:block; font-family:'Courier New',monospace; font-size:16px; color:#D6B25E; }
.zs-stats i { font-style:normal; font-size:8px; letter-spacing:2px; color:#E9DFC8; opacity:.7; }
.zs-record { border:1px solid #8F7534; padding:12px; margin:6px 0 10px; }
.zs-record-tag { font-size:9px; letter-spacing:3px; color:#D6B25E; font-weight:700; }
.zs-record-t { font-family:'Courier New',monospace; font-size:24px; color:#D6B25E; font-weight:700; margin-top:6px; letter-spacing:2px; }
.zs-record-who { font-size:10px; letter-spacing:1px; color:#fff; margin-top:4px; }
.zs-meta { font-size:10px; letter-spacing:1px; color:#E9DFC8; opacity:.8; margin:6px 0; }
.zs-meta.gold { color:#D6B25E; opacity:1; font-weight:600; }
.zs-hist { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.zs-hist span { font-size:9px; letter-spacing:1px; color:#E9DFC8; border:1px solid #2a2620; padding:4px 8px; }
.zs-rule { font-size:10px; color:#E9DFC8; opacity:.7; line-height:1.55; margin-top:10px; }
.zs-link { color:#D6B25E; border-bottom:1px dotted #8F7534; cursor:pointer; }
.zs-top { border:1px solid #2a2620; border-top:none; padding:2px 12px 8px; margin:0 0 10px; }
.zs-top-row { display:flex; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px solid #2a2620; font-size:11px; letter-spacing:1px; }
.zs-top-row:last-child { border-bottom:none; }
.zs-top-pos { width:20px; color:#8F7534; font-weight:700; font-size:10px; }
.zs-top-t { font-family:'Courier New',monospace; color:#E9DFC8; font-size:13px; letter-spacing:1px; min-width:64px; }
.zs-top-who { color:#fff; flex:1; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zs-top-date { font-size:9px; color:#E9DFC8; opacity:.55; }
.zs-tag-dono { font-size:8px; letter-spacing:2px; color:#080808; background:#D6B25E; padding:2px 5px 1px; font-weight:700; vertical-align:1px; margin-left:6px; }

/* ---------- Perfil redesign A (Energia Noturna) — aprovado por mockup ---------- */
.pfA { --pfbg:#1a1d23; --pfink:#f4f6f8; --pfmut:#8b93a1; --pfacc:#C8F135; }
.pfA .pfA-head { display:flex; align-items:center; gap:13px; }
.pfA .pfA-avwrap { position:relative; width:64px; height:64px; flex:none; }
.pfA .pfA-ring { position:absolute; inset:-4px; border-radius:50%;
  background:conic-gradient(var(--pfacc) 0 72%, #2a2e37 72% 100%); }
.pfA .pfA-av { position:absolute; inset:0; border-radius:50%; background:#39404d center/cover;
  cursor:pointer; }
.pfA .pfA-av-fb { display:flex; align-items:center; justify-content:center;
  font-size:25px; font-weight:800; color:var(--pfacc); }
.pfA .pfA-nm { color:var(--pfink); font-size:18px; font-weight:800; font-style:italic;
  letter-spacing:.3px; cursor:pointer; }
.pfA .pfA-badge { display:inline-block; background:rgba(200,241,53,.14); color:var(--pfacc);
  font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; letter-spacing:.5px;
  font-style:normal; vertical-align:2px; }
.pfA .pfA-hn { color:var(--pfmut); font-size:12px; margin-top:2px; }
.pfA .pfA-chips { display:flex; gap:8px; margin:14px 0 12px; }
.pfA .pfA-chip { flex:1; background:#22262e; border-radius:14px; padding:10px 6px;
  text-align:center; cursor:pointer; }
.pfA .pfA-chip:active { transform:scale(.96); }
.pfA .pfA-chip b { display:block; font-size:16px; color:var(--pfink); font-weight:800; }
.pfA .pfA-chip i { font-style:normal; font-size:8.5px; letter-spacing:1.2px; color:var(--pfmut);
  text-transform:uppercase; }
.pfA .pfA-chip.hot { background:linear-gradient(135deg, rgba(200,241,53,.20), rgba(53,224,241,.12)); }
.pfA .pfA-chip.hot b { color:var(--pfacc); }
.pfA .pfA-btn { width:100%; background:var(--pfacc); color:#101216; border:none; border-radius:14px;
  padding:13px; font-weight:800; font-size:13px; letter-spacing:1px; cursor:pointer; }
.pfA .pfA-btn:active { transform:scale(.98); }
.pfA .pfA-medals { display:flex; gap:8px; margin-top:12px; overflow-x:auto; padding-bottom:2px; }
.pfA .pfA-medal { min-width:124px; background:#22262e; border-radius:14px; padding:10px 12px; }
.pfA .pfA-mi { width:26px; height:26px; border-radius:8px; background:rgba(242,193,78,.15);
  display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.pfA .pfA-mi img { width:16px; }
.pfA .pfA-medal b { display:block; color:var(--pfink); font-size:12px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pfA .pfA-medal small { color:var(--pfmut); font-size:9.5px; }