/* Simule sua corrida | RunLab
   --u = 1% da largura do palco (definido no JS), pra tudo escalar igual no celular e no computador. */
:root {
  --lime: #CCF725;
  --red: #FF3922;
  --ink: #fff;
  --mut: #9c9c9c;
  --card: #1b1b1b;
  --line: #2c2c2c;
  --u: 3.9px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: #000; color: var(--ink); overflow: hidden; overscroll-behavior: none; }
body { font-family: "Libre Franklin", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }

/* fundo desfocado atrás do palco (só aparece no computador) */
.backdrop { position: fixed; inset: -60px; background: #050505 center / cover no-repeat; filter: blur(46px) brightness(.38) saturate(1.1); transition: background-image .6s; }

/* palco vertical 9:16 */
.stage {
  position: fixed; inset: 0; margin: auto;
  width: min(100vw, calc(100dvh * 9 / 16)); height: 100dvh;
  overflow: hidden; background: #000; isolation: isolate;
  user-select: none; -webkit-user-select: none;
}
@media (min-aspect-ratio: 10/16) { .stage { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 120px rgba(0, 0, 0, .8); } }

/* vídeo */
.videos, .vid, .blackout, .fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.vid { object-fit: cover; opacity: 0; transition: opacity .45s linear; background: #000; }
.vid.on { opacity: 1; }
.videos { transform-origin: 50% 62%; }
.blackout { background: #000; opacity: 0; pointer-events: none; z-index: 2; }
.fx { z-index: 3; pointer-events: none; }

/* telas */
.screen { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--u) * 8) calc(var(--u) * 6); background: #000; }
.lime { color: var(--lime); }
.display { font-family: Saira, sans-serif; font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; margin: 0; font-size: calc(var(--u) * 16.5); display: flex; flex-direction: column; }
.display.sm { font-size: calc(var(--u) * 11); }
.display span { display: block; }
.lead { font-size: calc(var(--u) * 4.4); line-height: 1.35; color: #d6d6d6; margin: calc(var(--u) * 5) 0 calc(var(--u) * 8); max-width: 22em; text-wrap: balance; }
.tiny { font-size: calc(var(--u) * 3.1); color: var(--mut); margin: calc(var(--u) * 4) 0 0; text-decoration: none; }
.logo { width: calc(var(--u) * 19); height: auto; margin-bottom: calc(var(--u) * 7); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font-family: Saira, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  font-size: calc(var(--u) * 5); color: #000; background: var(--lime);
  padding: calc(var(--u) * 4.2) calc(var(--u) * 11); border-radius: calc(var(--u) * 3.2);
  transition: transform .25s var(--ease), box-shadow .25s, opacity .25s;
  box-shadow: 0 0 0 0 rgba(204, 247, 37, .5);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 40px -8px rgba(204, 247, 37, .55); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .3; pointer-events: none; }
.btn:focus-visible, .link:focus-visible, .choice:focus-visible, .av:focus-visible, .play-btn:focus-visible, .stop-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.link { font-size: calc(var(--u) * 3.6); color: #cfcfcf; text-decoration: underline; text-underline-offset: .25em; margin-top: calc(var(--u) * 5); padding: calc(var(--u) * 2); }

/* 0. abertura */
.s-intro { overflow: hidden; }
.s-intro > * { position: relative; }
.grid-floor {
  position: absolute !important; left: -50%; right: -50%; bottom: -8%; height: 46%;
  background-image: linear-gradient(rgba(204, 247, 37, .55) 1px, transparent 1px), linear-gradient(90deg, rgba(204, 247, 37, .55) 1px, transparent 1px);
  background-size: calc(var(--u) * 12) calc(var(--u) * 12);
  transform: perspective(calc(var(--u) * 90)) rotateX(62deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(transparent, #000 55%); mask-image: linear-gradient(transparent, #000 55%);
  animation: floor 2.4s linear infinite; opacity: .5;
}
@keyframes floor { to { background-position: 0 calc(var(--u) * 12), 0 0; } }

/* 1. quem vai correr */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); width: 100%; margin-top: calc(var(--u) * 9); }
.choice, .av { position: relative; overflow: hidden; border-radius: calc(var(--u) * 3.2); border: 1px solid rgba(255, 255, 255, .14); background: #0b0b0b; transition: transform .35s var(--ease), border-color .25s, box-shadow .25s; }
.choice { aspect-ratio: 9 / 15; }
.choice img, .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.choice span { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(var(--u) * 10) 0 calc(var(--u) * 4); font-family: Saira, sans-serif; font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 6); background: linear-gradient(transparent, rgba(0, 0, 0, .92) 60%); }
.choice:hover, .av:hover { transform: translateY(-3px); border-color: var(--lime); }

/* 2. avatar */
.av-hero { position: relative; flex: none; width: calc(var(--u) * 44); aspect-ratio: 9 / 14.5; margin-top: calc(var(--u) * 6); border-radius: calc(var(--u) * 3.2); overflow: hidden; border: 1px solid rgba(204, 247, 37, .55); box-shadow: 0 calc(var(--u) * 5) calc(var(--u) * 20) calc(var(--u) * -6) rgba(204, 247, 37, .5); }
.av-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.avatars { display: flex; justify-content: center; gap: calc(var(--u) * 3.4); margin: calc(var(--u) * 5) 0 calc(var(--u) * 6); }
.av { flex: none; width: calc(var(--u) * 17); height: calc(var(--u) * 17); border-radius: 50%; opacity: .55; }
.av img { object-position: 50% 50%; }
.av.on { opacity: 1; border-color: var(--lime); box-shadow: 0 0 0 2px var(--lime), 0 0 calc(var(--u) * 8) rgba(204, 247, 37, .55); transform: scale(1.08); }

/* números da corrida por cima do vídeo */
.hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.glass { background: rgba(8, 8, 8, .46); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(204, 247, 37, .38); border-radius: calc(var(--u) * 3.2); }
.hud-top { position: absolute; left: calc(var(--u) * 4); right: calc(var(--u) * 4); top: calc(var(--u) * 4 + env(safe-area-inset-top)); padding: calc(var(--u) * 3) calc(var(--u) * 4); }
.hud-top { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.hud-map { flex: none; width: calc(var(--u) * 17); height: calc(var(--u) * 17); border-radius: calc(var(--u) * 2.2); overflow: hidden; }
.hud-info { flex: 1; min-width: 0; }
.hud-lema { margin: 0 0 calc(var(--u) * 1.5); font-family: Oswald, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .09em; line-height: 1; font-size: calc(var(--u) * 2.7); color: #fff; white-space: nowrap; }
.hud-km { display: flex; align-items: baseline; gap: calc(var(--u) * 2.4); flex-wrap: wrap; }
.hud-km b { font-family: Saira, sans-serif; font-weight: 800; font-size: calc(var(--u) * 5.4); color: var(--lime); }
.hud-km span { font-family: Oswald, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--u) * 3.4); color: #eee; }
.hud-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 1.2); margin-top: calc(var(--u) * 2.2); }
.hud-bar i { height: calc(var(--u) * 1); border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; position: relative; }
.hud-bar i::after { content: ""; position: absolute; inset: 0; background: var(--lime); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.hud-bottom { position: absolute; left: calc(var(--u) * 4); right: calc(var(--u) * 4); bottom: calc(var(--u) * 5 + env(safe-area-inset-bottom)); padding: calc(var(--u) * 3.4) calc(var(--u) * 2); display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); }
.stat b { font-family: "Londrina Solid", Saira, sans-serif; font-weight: 400; font-size: calc(var(--u) * 7.4); line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums; }
.stat span { font-family: Inter, sans-serif; font-size: calc(var(--u) * 2.5); color: #dcdcdc; letter-spacing: .02em; }
.skip { position: absolute; right: calc(var(--u) * 4); bottom: calc(var(--u) * 27 + env(safe-area-inset-bottom)); pointer-events: auto; font-size: calc(var(--u) * 3.1); color: #fff; padding: calc(var(--u) * 1.8) calc(var(--u) * 3.4); border-radius: 99px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .28); }
.km-title { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-family: Saira, sans-serif; font-weight: 800; text-transform: uppercase; line-height: .9; text-shadow: 0 4px 40px rgba(0, 0, 0, .65); }
.km-title .k { display: block; font-size: calc(var(--u) * 27); color: var(--lime); }
.km-title .t { display: block; font-family: Oswald, sans-serif; font-weight: 500; letter-spacing: .14em; font-size: calc(var(--u) * 5.4); margin-top: calc(var(--u) * 2); }
.km-title .ch { display: inline-block; white-space: pre; }

.tap { position: absolute; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: Saira, sans-serif; font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 4.4); color: #000; background: var(--lime); padding: calc(var(--u) * 4) calc(var(--u) * 7); border-radius: calc(var(--u) * 3.2); }

/* telas do app (recriadas dos prints) */
.app { font-family: Inter, system-ui, sans-serif; justify-content: flex-start; padding: 0; text-align: left; }
.s-play { align-items: center; justify-content: center; }
.appshot { position: relative; flex: none; width: var(--aw, 100%); height: var(--ah, 100%); }
.appshot img, .appshot video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
.hot { position: absolute; left: 50%; top: 79.3%; width: 81%; height: 4.6%; transform: translate(-50%, -50%); border-radius: 99px; }
.hot i { position: absolute; inset: calc(var(--u) * -1); border-radius: 99px; border: calc(var(--u) * .8) solid var(--lime); animation: hotBlink 1.1s ease-in-out infinite; }
@keyframes hotBlink { 0%, 100% { opacity: .25; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); box-shadow: 0 0 calc(var(--u) * 5) rgba(204, 247, 37, .8); } }
@keyframes ring { 0% { transform: scale(.95); opacity: 1; } 100% { transform: scale(2.3); opacity: 0; } }
.hot-hint { position: absolute; left: 50%; top: 70.6%; transform: translateX(-50%); white-space: nowrap; margin: 0; padding: calc(var(--u) * 2.2) calc(var(--u) * 3.6); border-radius: calc(var(--u) * 2.4); background: var(--lime); color: #000; font-family: Saira, sans-serif; font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 3.6); letter-spacing: .02em; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, .6); }
.hot-hint::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -1.6); width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); margin-left: calc(var(--u) * -1.7); background: var(--lime); transform: rotate(45deg); }

.plain { flex: none; width: calc(var(--u) * 6.4); margin: 0 calc(var(--u) * 1.8); }
.plain svg { width: 100%; display: block; }
.s-detail .app-bar-t { text-align: center; white-space: nowrap; font-size: calc(var(--u) * 3.6); }
.det-banner { position: relative; align-self: stretch; flex: none; height: calc(var(--u) * 62); overflow: hidden; background: #111; }
.det-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.det-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: rgba(60, 60, 60, .62); }
.det-chips { position: absolute; z-index: 1; left: calc(var(--u) * 6); bottom: calc(var(--u) * 5); display: flex; gap: calc(var(--u) * 2.2); }
.det-chips span { border: 1px solid rgba(255, 255, 255, .75); border-radius: 99px; padding: calc(var(--u) * 1.6) calc(var(--u) * 3.2); font-size: calc(var(--u) * 3.6); letter-spacing: .03em; }
.det-ok { align-self: stretch; margin: calc(var(--u) * 6) calc(var(--u) * 4) 0; background: var(--card); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 5.4) calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 3.4); color: var(--lime); font-size: calc(var(--u) * 3.9); letter-spacing: .03em; }
.det-ok i { flex: none; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: var(--lime); color: #000; display: grid; place-items: center; padding: calc(var(--u) * 1); }
.det-ok svg { width: 100%; }
.det-date { align-self: stretch; margin: calc(var(--u) * 6.4) calc(var(--u) * 4) 0; color: var(--lime); font-size: calc(var(--u) * 3.3); letter-spacing: .05em; }
.det-title { align-self: stretch; margin: calc(var(--u) * 2.6) calc(var(--u) * 4) 0; font-size: calc(var(--u) * 5.7); font-weight: 500; letter-spacing: .03em; }
.det-card { align-self: stretch; flex: 1; min-height: 0; overflow: hidden; margin: calc(var(--u) * 5.4) calc(var(--u) * 4) 0; background: var(--card); border-radius: calc(var(--u) * 4) calc(var(--u) * 4) 0 0; padding: calc(var(--u) * 7) calc(var(--u) * 6); }
.det-card b { font-weight: 500; font-size: calc(var(--u) * 4); letter-spacing: .03em; }
.det-card p { margin: calc(var(--u) * 3.4) 0 0; color: #b5b5b5; font-size: calc(var(--u) * 3.5); line-height: 1.55; letter-spacing: .03em; }
.det-foot { align-self: stretch; flex: none; background: #000; padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 8 + env(safe-area-inset-bottom)); }
.app-cta { display: block; width: 100%; background: var(--lime); color: #000; border-radius: 99px; padding: calc(var(--u) * 3.9) 0; font-size: calc(var(--u) * 4.2); font-weight: 500; letter-spacing: .04em; animation: ctaBlink 1.1s ease-in-out infinite; }
@keyframes ctaBlink { 0%, 100% { box-shadow: 0 0 0 0 rgba(204, 247, 37, 0); transform: scale(1); } 50% { box-shadow: 0 0 calc(var(--u) * 7) rgba(204, 247, 37, .85); transform: scale(1.02); } }

.s-count { align-items: center; justify-content: center; }
.count-n { font-family: Fredoka, sans-serif; font-weight: 600; font-size: calc(var(--u) * 27); line-height: 1; color: var(--lime); }

.app-map { margin: calc(var(--u) * 4 + env(safe-area-inset-top)) calc(var(--u) * 4) 0; align-self: stretch; aspect-ratio: 1.17; border-radius: calc(var(--u) * 4); overflow: hidden; background: #1d1d1d; }
[data-map] svg { display: block; width: 100%; height: 100%; }
.app-stats { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: calc(var(--u) * 6); padding: calc(var(--u) * 6) calc(var(--u) * 4) 0; }
.app-stats div { display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); }
.app-stats .c { align-items: center; }
.app-stats .r { align-items: flex-end; text-align: right; }
.app-stats b, .res-grid b { font-family: "Londrina Solid", sans-serif; font-weight: 400; font-size: calc(var(--u) * 7.6); line-height: 1; color: var(--lime); white-space: nowrap; }
.app-stats span, .res-grid span { font-size: calc(var(--u) * 3.4); color: #c9c9c9; letter-spacing: .03em; }
.app-controls { margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 6); align-self: center; }
.stop-btn { position: relative; width: calc(var(--u) * 20); height: calc(var(--u) * 20); display: grid; place-items: center; }
.stop-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.stop-btn .ring-bg { fill: #1f1f1f; stroke: #2a2a2a; stroke-width: 4; }
.stop-btn .ring { fill: none; stroke: var(--lime); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; }
.stop-btn i { position: relative; width: 20%; height: 20%; background: #fff; border-radius: 6%; animation: stopSq 1.1s ease-in-out infinite; }
/* o stop pisca pra ficar óbvio que é ali que se segura; para de piscar enquanto a pessoa segura */
.stop-btn { animation: stopGlow 1.1s ease-in-out infinite; }
.stop-btn::before, .stop-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: calc(var(--u) * .8) solid var(--lime); animation: ring 1.5s ease-out infinite; pointer-events: none; }
.stop-btn::after { animation-delay: .75s; }
@keyframes stopGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(204, 247, 37, 0)); } 50% { filter: drop-shadow(0 0 calc(var(--u) * 3.5) rgba(204, 247, 37, .95)); } }
@keyframes stopSq { 50% { background: var(--lime); transform: scale(1.18); } }
.stop-btn.holding, .stop-btn.holding i { animation: none; filter: none; }
.stop-btn.holding::before, .stop-btn.holding::after { display: none; }
.resume-btn { width: calc(var(--u) * 15.5); height: calc(var(--u) * 15.5); border-radius: 50%; background: var(--lime); color: #000; display: grid; place-items: center; }
.resume-btn svg { width: 42%; margin-left: 5%; }
.hold-hint { animation: hintBlink 1.1s ease-in-out infinite; align-self: center; color: var(--lime); font-size: calc(var(--u) * 3.5); letter-spacing: .03em; margin: calc(var(--u) * 6) 0 calc(var(--u) * 9 + env(safe-area-inset-bottom)); }

.app-bar { align-self: stretch; display: flex; align-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 3.6 + env(safe-area-inset-top)) calc(var(--u) * 4) calc(var(--u) * 3.6); }
.circ { flex: none; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: var(--card); display: grid; place-items: center; padding: calc(var(--u) * 2.6); }
.app-bar-t { flex: 1; text-align: center; font-size: calc(var(--u) * 3.6); font-weight: 500; letter-spacing: .03em; }
.me { flex: none; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; object-fit: cover; }
.app-tabs { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; text-align: center; font-size: calc(var(--u) * 4); letter-spacing: .03em; border-bottom: 1px solid var(--line); }
.app-tabs > * { padding: calc(var(--u) * 5.6) 0; color: #8d8d8d; position: relative; }
.app-tabs .on { color: #fff; }
.app-tabs .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #4ea3c9; }
.app-tabs.under { margin: calc(var(--u) * 2) calc(var(--u) * 4) 0; }
.app-tabs.under .on::after { background: var(--lime); height: 3px; }
.res-grid { align-self: stretch; display: grid; grid-template-columns: 1.1fr 1.25fr 1fr; gap: calc(var(--u) * 9) calc(var(--u) * 3); padding: calc(var(--u) * 10) calc(var(--u) * 4) 0; }
.res-grid div { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.res-grid .w2 { grid-column: span 2; }
.app-note { margin: calc(var(--u) * 12) calc(var(--u) * 4) 0; align-self: stretch; background: #262626; border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 4.4); display: flex; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 3.6); font-weight: 500; letter-spacing: .02em; }
.app-note i { flex: none; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: #333; color: var(--lime); display: grid; place-items: center; padding: calc(var(--u) * 2.2); }
.app-note svg { width: 100%; }

.app-h { align-self: stretch; margin: calc(var(--u) * 3.5) calc(var(--u) * 4) 0; font-size: calc(var(--u) * 6); font-weight: 500; letter-spacing: .02em; }
.app-search { align-self: stretch; margin: calc(var(--u) * 5) calc(var(--u) * 4) 0; background: var(--card); border-radius: 99px; padding: calc(var(--u) * 3.6) calc(var(--u) * 4.5); display: flex; align-items: center; gap: calc(var(--u) * 4); color: #8a8a8a; font-size: calc(var(--u) * 3.6); letter-spacing: .04em; }
.app-search svg { width: calc(var(--u) * 5); }
.rk-head, .rk-row { display: grid; grid-template-columns: 13% 13% 1fr 15% 14% 15%; align-items: center; padding: 0 calc(var(--u) * 4); }
.rk-head { grid-template-columns: 13% 1fr 15% 14% 15%; align-self: stretch; margin-top: calc(var(--u) * 7); padding-bottom: calc(var(--u) * 3); font-size: calc(var(--u) * 2.9); color: #b9b9b9; letter-spacing: .04em; }
.rk-head span:nth-child(2) { padding-left: 34%; }
.rk-list { align-self: stretch; position: relative; flex: 1; min-height: 0; overflow: hidden; }
.rk-row { position: absolute; left: 0; right: 0; top: 0; height: var(--rh, 60px); background: #1a1a1a; border-bottom: 1px solid #2a2a2a; font-size: calc(var(--u) * 3.7); letter-spacing: .03em; will-change: transform; }
.rk-row.top { background: #474747; }
.rk-row.flash { animation: flash .9s ease-out; }
@keyframes flash { 0% { background: rgba(204, 247, 37, .75); } 100% { background: #1a1a1a; } }
.rk-row.top.flash { animation-name: flashTop; }
@keyframes flashTop { 0% { background: rgba(204, 247, 37, .75); } 100% { background: #474747; } }
.rk-pos { font-size: calc(var(--u) * 3.8); text-align: center; }
.rk-pos svg { width: calc(var(--u) * 5.2); display: block; margin: auto; }
.rk-pic { width: calc(var(--u) * 8.4); height: calc(var(--u) * 8.4); border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: calc(var(--u) * 3.1); color: #000; object-fit: cover; }
.rk-name { display: flex; flex-direction: column; gap: calc(var(--u) * 1); min-width: 0; padding-left: calc(var(--u) * 1.5); }
.rk-name b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-name small { font-size: calc(var(--u) * 2.6); color: #d0d0d0; }
.rk-time { text-align: right; font-variant-numeric: tabular-nums; }
.rk-pts { text-align: center; font-variant-numeric: tabular-nums; }
.rk-me { position: relative; align-self: stretch; flex: none; height: var(--rh, 60px); background: var(--lime); color: #000; border: 0; }
.rk-me .rk-name small { color: #1a1a1a; }
.rk-me .rk-pos { font-variant-numeric: tabular-nums; }
.app-nav { align-self: stretch; display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-size: calc(var(--u) * 2.5); color: #8d8d8d; letter-spacing: .03em; padding: calc(var(--u) * 5) 0 calc(var(--u) * 6 + env(safe-area-inset-bottom)); background: #000; }
.app-nav svg { display: block; width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); margin: 0 auto calc(var(--u) * 1.6); }
.app-nav .on { color: var(--lime); }

/* 11. gran finale */
.s-finale { overflow: hidden; padding: 0; }
/* fundo: mosaico de fotos de atletas RunLab que vai se formando (4 colunas x 7 linhas) */
.mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(7, 1fr); gap: calc(var(--u) * .7); }
.mz { position: relative; overflow: hidden; opacity: 0; background: #111; }
.mz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.mz i { position: absolute; inset: 0; background: var(--lime); opacity: 0; }
.mosaic-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 46% at 50% 47%, rgba(0, 0, 0, .78), rgba(0, 0, 0, .5) 100%), linear-gradient(transparent 72%, rgba(0, 0, 0, .7)); }
.gl, .coins2d { position: absolute; inset: 0; width: 100%; height: 100%; }
.coins2d i { position: absolute; top: -12%; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f1ff9c, var(--lime) 55%, #86a500); box-shadow: inset 0 0 0 calc(var(--u) * .5) rgba(0, 0, 0, .18); animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(125vh) rotateY(900deg); } }
.splash { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sp { position: absolute; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); }
.sp svg { width: calc(var(--u) * 40); height: calc(var(--u) * 40); filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(204, 247, 37, .55)); }
.sp b { font-family: Saira, sans-serif; font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 10.5); line-height: .95; text-shadow: 0 4px 30px #000; }
.sp .burst { position: absolute; left: 50%; top: 34%; width: calc(var(--u) * 10); height: calc(var(--u) * 10); margin: calc(var(--u) * -5); border-radius: 50%; border: calc(var(--u) * 1) solid var(--lime); opacity: 0; }
.sp .sp-img { width: calc(var(--u) * 44); height: calc(var(--u) * 44); filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(204, 247, 37, .45)); }
.sp .sp-logo { transform: scale(1.22); filter: drop-shadow(0 0 calc(var(--u) * 7) rgba(204, 247, 37, .6)); }
.dock .slot .sp-logo { transform: scale(1.2); }
.sp small { font-family: "Londrina Solid", sans-serif; font-size: calc(var(--u) * 9); color: var(--lime); line-height: 1; margin-top: calc(var(--u) * -2); }
.sp .xp { width: calc(var(--u) * 52); height: calc(var(--u) * 2.4); border-radius: 99px; background: #3a3a3a; overflow: hidden; }
.sp .xp i { display: block; height: 100%; background: var(--lime); border-radius: 99px; transform-origin: 0 50%; }
.sp .orbit { position: absolute; left: 50%; top: calc(var(--u) * 22); width: 0; height: 0; }
.sp .orbit img { position: absolute; width: calc(var(--u) * 21); height: calc(var(--u) * 21); margin: calc(var(--u) * -10.5); filter: none; }
.sp .orbit img:nth-child(1) { left: calc(var(--u) * -30); top: calc(var(--u) * -16); }
.sp .orbit img:nth-child(2) { left: calc(var(--u) * 30); top: calc(var(--u) * -16); }
.sp .orbit img:nth-child(3) { left: calc(var(--u) * -32); top: calc(var(--u) * 12); }
.sp .orbit img:nth-child(4) { left: calc(var(--u) * 32); top: calc(var(--u) * 12); }
.dock { position: absolute; left: calc(var(--u) * 5); right: calc(var(--u) * 5); bottom: calc(var(--u) * 7 + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 2); }
.dock .slot { aspect-ratio: 1; border-radius: calc(var(--u) * 3.2); display: grid; place-items: center; opacity: 0; padding: 18%; }
.dock .slot svg, .dock .slot img { width: 100%; height: 100%; }
.dock .slot:has(img) { padding: 6%; }
.dock .slot img { filter: none; }

/* 12 e 13. frase e chamada */
.s-end { gap: 0; }
.s-end { padding-left: calc(var(--u) * 4); padding-right: calc(var(--u) * 4); }
.phrase { font-family: Saira, sans-serif; font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 9); line-height: 1; margin: 0; }
.phrase .ln { display: block; }
.phrase .ln + .ln { color: var(--lime); margin-top: calc(var(--u) * 3); }
.phrase .w { display: inline-block; opacity: 0; }
.cta { display: flex; flex-direction: column; align-items: center; height: 0; opacity: 0; overflow: hidden; }
.cta .display { font-size: calc(var(--u) * 6); white-space: nowrap; margin: calc(var(--u) * 13) 0 calc(var(--u) * 7); }
.btn.blink { animation: ctaBlink 1.1s ease-in-out infinite; }
.cta .display span { display: inline; }
.cta .display { display: block; }
.stores { display: flex; flex-direction: column; align-items: center; margin-top: calc(var(--u) * 5); }
.qr { width: calc(var(--u) * 30); height: calc(var(--u) * 30); background: #fff; border-radius: calc(var(--u) * 3.2); padding: calc(var(--u) * 2.4); }
.qr svg { width: 100%; height: 100%; display: block; }
.store-links { display: flex; gap: calc(var(--u) * 5); margin: calc(var(--u) * 3) 0 0; font-size: calc(var(--u) * 3.4); }
.store-links a { color: var(--lime); }
.site { color: var(--mut); }

/* selo da RunLab no canto (o arquivo tem margem própria, por isso os recuos menores) */
.brand { position: absolute; z-index: 8; left: calc(var(--u) * 2.55); top: calc(var(--u) * 3 + env(safe-area-inset-top)); width: calc(var(--u) * 10.2); height: auto; pointer-events: none; transition: opacity .3s, top .5s var(--ease); }
.hud:not([hidden]) ~ .brand { top: calc(var(--u) * 28.8 + env(safe-area-inset-top)); }   /* durante a corrida desce pra baixo do bloco do topo */
.stage[data-screen="s-intro"] .brand, .stage[data-screen="s-play"] .brand, .stage[data-screen="s-detail"] .brand, .stage[data-screen="s-count"] .brand,
.stage[data-screen="s-stop"] .brand, .stage[data-screen="s-result"] .brand, .stage[data-screen="s-rank"] .brand { opacity: 0; }

/* som */
.mute { position: absolute; z-index: 8; right: calc(var(--u) * 4); top: calc(var(--u) * 30 + env(safe-area-inset-top)); width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5); border-radius: 50%; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .28); display: grid; place-items: center; padding: calc(var(--u) * 2.2); opacity: 0; pointer-events: none; transition: opacity .3s; }
.stage[data-started] .mute { opacity: 1; pointer-events: auto; }
.stage[data-screen="s-play"] .mute, .stage[data-screen="s-result"] .mute, .stage[data-screen="s-rank"] .mute { top: auto; bottom: calc(var(--u) * 4 + env(safe-area-inset-bottom)); }
.mute svg { width: 100%; }
.mute .x { display: none; }
.mute[aria-pressed="true"] .wave { display: none; }
.mute[aria-pressed="true"] .x { display: inline; }

@keyframes hintBlink { 50% { opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  .grid-floor, .coins2d i, .stop-btn, .stop-btn i, .hold-hint, .hot i, .app-cta, .btn.blink { animation: none; }
  .stop-btn::before, .stop-btn::after { display: none; }
  .vid { transition: none; }
}