/*
 * Alameda da Vila — painel da corrida (velocímetro, distância, estágio,
 * poderes), missões e avisos. Arquivo próprio porque o painel
 * administrativo carrega o mesmo visual na prévia dos estágios.
 */

/* ---------- Alameda da Vila: velocímetro, distância, missões e avisos ---------- */
/* Card do painel: vidro escuro de cantos bem arredondados, com uma borda de luz
   que puxa as cores da aurora e um brilho interno no alto — orgânico, sem
   caixa dura por cima da pista. */
.lane-dash {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 8px; border-radius: 26px 22px 24px 20px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(125, 211, 252, .16), transparent 60%),
    linear-gradient(160deg, rgba(10, 22, 44, .88), rgba(5, 11, 24, .82));
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(94, 234, 212, .22);
  color: #e6f6ff; font-family: var(--font-display); pointer-events: none;
  /* Sem `backdrop-filter`: sobre um canvas que muda a cada quadro, o desfoque
     do que está atrás do card é refeito a cada quadro — no celular, era um dos
     custos que faziam a pista engasgar. O fundo mais opaco segura a leitura. */
}
.lane-icon { display: block; flex: none; }
.lane-icon--ui { width: 15px; height: 15px; color: #7dd3fc; }

.lane-gauge { position: relative; width: 84px; height: 66px; flex: none; }
.lane-gauge svg { width: 84px; height: 52px; display: block; overflow: visible; }
.lane-gauge__track, .lane-gauge__fill, .lane-gauge__glow { fill: none; stroke-linecap: round; }
.lane-gauge__track { stroke: rgba(255, 255, 255, .1); stroke-width: 8; }
.lane-gauge__fill { stroke-width: 6; stroke-dasharray: .5 100; transition: stroke-dasharray .12s linear; }
.lane-gauge__glow { stroke-width: 9; opacity: .55; stroke-dasharray: .5 100; transition: stroke-dasharray .12s linear; }
.lane-gauge__tick { stroke: rgba(230, 246, 255, .35); stroke-width: 1.1; stroke-linecap: round; }
.lane-gauge__tick.is-major { stroke: rgba(230, 246, 255, .7); stroke-width: 1.6; }
.lane-gauge__needle { transform-origin: 50px 52px; transform: rotate(-90deg); transition: transform .14s cubic-bezier(.3, 1.4, .6, 1); }
.lane-gauge__needle path { fill: #fff; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .8)); }
.lane-gauge__hub { fill: #0b1830; stroke: #fff; stroke-width: 1.6; }
.lane-gauge__value { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; justify-content: center; gap: 2px; line-height: 1; }
.lane-gauge__value strong { font-size: 1.12rem; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(125, 211, 252, .5); }
.lane-gauge__value small { font-size: .52rem; opacity: .72; letter-spacing: .02em; }
.lane-gauge__level {
  position: absolute; top: -6px; right: -6px; padding: 1px 6px; border-radius: 999px;
  background: linear-gradient(135deg, #fde68a, #f59e0b); color: #3b2300; font-size: .56rem; font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.lane-gauge__delta {
  position: absolute; top: -6px; left: -6px; padding: 1px 6px; border-radius: 999px;
  background: linear-gradient(135deg, #86efac, #16a34a); color: #052e16; font-size: .56rem; font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.lane-gauge__delta[hidden] { display: none; }
.lane-gauge__delta.is-down { background: linear-gradient(135deg, #fdba74, #ea580c); color: #431407; }
/* Acima do teto do ritmo: placas e foguete não têm limite — o número pega fogo. */
.lane-gauge.is-turbo .lane-gauge__value strong { color: #fca5a5; text-shadow: 0 0 12px rgba(248, 113, 113, .95); }
.lane-gauge.is-turbo .lane-gauge__glow { opacity: 1; animation: lane-turbo .5s ease-in-out infinite alternate; }
@keyframes lane-turbo { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .lane-gauge.is-turbo .lane-gauge__glow { animation: none; } }
.lane-gauge.is-boosting .lane-gauge__value strong { color: #fde68a; text-shadow: 0 0 12px rgba(251, 191, 36, .9); }
.lane-gauge.is-boosting .lane-gauge__glow { opacity: 1; }

.lane-dash__info { display: grid; gap: 5px; min-width: 0; }
.lane-stat { display: flex; align-items: center; gap: 5px; font-size: .74rem; white-space: nowrap; }
.lane-stat strong { font-variant-numeric: tabular-nums; }
.lane-stage__icon { font-size: .95rem; line-height: 1; }
.lane-stage__body { display: grid; gap: 3px; min-width: 64px; }
.lane-stage__name { font-size: .64rem; opacity: .85; }
.lane-stage__bar { display: block; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.lane-stage__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand-mint), #7dd3fc); transition: width .25s linear; }

.lane-powers { display: flex; gap: 6px; }
.lane-powers[hidden] { display: none; }
.lane-power { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; }
.lane-power[hidden] { display: none; }
.lane-power--magnet { background: radial-gradient(circle at 35% 30%, rgba(255, 107, 129, .35), rgba(80, 8, 24, .55)); animation: lane-power-pulse 1.1s ease-in-out infinite; }
.lane-power--shield { background: radial-gradient(circle at 35% 30%, rgba(147, 197, 253, .35), rgba(8, 30, 80, .55)); }
.lane-power .lane-icon { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.lane-power__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lane-power__track { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 2.6; }
.lane-power__left { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100 100; transition: stroke-dasharray .12s linear; }
.lane-power--magnet .lane-power__left { stroke: #fb7185; }
.lane-power--shield .lane-power__left { stroke: #93c5fd; }
.lane-power__time { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); padding: 0 4px; border-radius: 99px; background: #0b1830; font-size: .52rem; font-weight: 800; color: #fecdd3; }
.lane-power--shield .lane-power__time { display: none; }
@keyframes lane-power-pulse { 50% { box-shadow: 0 0 14px 2px rgba(244, 63, 94, .55); } }
@media (prefers-reduced-motion: reduce) { .lane-power--magnet { animation: none; } }
@media (max-width: 360px) {
  .lane-dash { gap: 7px; padding: 6px 9px 6px 6px; }
  .lane-stage__body { min-width: 52px; }
}

.lane-missions {
  position: absolute; left: 10px; top: 48px; z-index: 2; margin: 0; padding: 0; list-style: none;
  display: grid; gap: 4px; max-width: min(62%, 240px); pointer-events: none;
}
.lane-mission {
  display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px;
  background: rgba(5, 11, 24, .55); border: 1px solid rgba(255, 255, 255, .1);
  color: #e6f6ff; font: 600 .66rem var(--font-display);
  transition: background .3s ease, border-color .3s ease;
}
.lane-mission__icon { flex: none; font-size: .8rem; }
.lane-mission__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-mission__count { flex: none; opacity: .8; font-variant-numeric: tabular-nums; }
.lane-mission.is-done { background: rgba(61, 220, 151, .22); border-color: rgba(61, 220, 151, .55); }
.lane-mission__booster { flex: none; margin-left: 2px; padding: 0 5px; border-radius: 99px; background: rgba(163, 230, 53, .16); font-size: .66rem; }
.lane-mission.is-doubled { border-color: rgba(163, 230, 53, .7); box-shadow: 0 0 10px rgba(163, 230, 53, .35); }
.lane-mission.is-doubled .lane-mission__booster { background: #a3e635; color: #1a2e05; font-weight: 800; }

.lane-toast {
  position: absolute; left: 50%; top: 24%; z-index: 3; max-width: 86%;
  padding: 7px 14px; border-radius: 999px; text-align: center;
  background: rgba(5, 11, 24, .72); border: 1px solid rgba(253, 230, 138, .45);
  color: #fff7d1; font: 700 .8rem var(--font-display);
  opacity: 0; transform: translate(-50%, 6px) scale(.96); pointer-events: none;
}
.lane-toast.is-visible { animation: lane-toast 1.8s ease forwards; }
@keyframes lane-toast {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.96); }
  12%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -6px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .lane-toast.is-visible { animation: none; opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 360px) {
  .lane-missions { max-width: 70%; }
  .lane-mission { font-size: .6rem; }
}