/**
 * ESTILOS — PikPak
 * ---------------------------------------------------------------------------
 * Identidad de marca (actualizada): paleta violeta/azul noche con acentos
 * amarillo, rosa y verde menta, tomada del logo del personaje con
 * sombrero de regalos. Tipografía sin cambios (Fredoka/Nunito y el resto
 * del muestrario), esquinas redondeadas sin cambios.
 *
 * Los colores de RAREZA de los paquetes (común/poco común/raro/legendario,
 * ver client/js/packageIcons.js) siguen siendo un sistema aparte, con su
 * propio significado — remapeados a la paleta nueva: legendario comparte
 * el amarillo de marca a propósito (el premio máximo "es" el brillo del
 * logo), común queda gris neutro a propósito (que se vea menos que las
 * demás tiene sentido en una escala de rareza).
 */

:root {
  --bg: #4c3fae;
  --bg-deep: #241f4d; /* violeta-navy oscuro -- para encabezados/hero, que ahora van MÁS oscuros que el cuerpo, no al revés */
  --panel: #5c4ec4;
  --panel-border: #7d70e8;
  --text: #ffffff;
  --text-dim: #e3def9; /* antes #d6d0f5: sobre los paneles daba contraste 4,25 (mínimo recomendado 4,5); con este da 4,8 */
  --accent: #6957d4;
  --accent-bright: #f6c342;
  --accent-deep: #f55e84; /* rosa vivo -- la marca se apoya cada vez más en este color, no solo un detalle */
  --silver: #c9c8d6;
  --ok: #6fae7f; /* sin cambios: sigue siendo el verde de "vos/éxito" en el mapa */

  /* Escena de "ciudad" -- SOLO la pantalla de ingreso por ahora.
     Variables aparte a propósito: la idea es que más adelante haya
     una variante de noche que pise estos mismos nombres, sin tener
     que tocar la estructura de la pantalla en sí. */
  --city-sky-top: #7ec3e8;
  --city-sky-bottom: #cfe6d8;
  --city-mid: #9c9a72;
  --city-ground: #6b5d46;
  --city-street: #2e2b28;
  --city-tree: #4f8f5c;
  --city-building: #6c7078;

  --font-display: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display-2: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* antes había una fuente distinta acá para el "muestrario" (comparar varias en vivo) -- ya elegimos ganadora, las tres apuntan a la misma ahora */
  --font-display-3: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body-2: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body-3: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* sin el retraso ni el zoom por doble toque en botones */
  /* por defecto, nada de texto se puede seleccionar -- en el celu,
     seleccionar texto sin querer dispara el menú de "buscar en
     Google" todo el tiempo, y en esta app la enorme mayoría del texto
     no tiene sentido copiarlo. Los pocos casos donde SÍ hace falta
     (nombres, ids, códigos, links) tienen su propia excepción más
     abajo. Las páginas de privacidad/términos, al ser texto para leer
     y citar, pisan esto de vuelta en su propio <style>. */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* excepciones a propósito -- lo que la persona SÍ podría querer copiar */
code,
input,
textarea,
#profile-name,
#invite-link-text,
#business-name-display,
.redemption-code code {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
}

a { color: var(--accent-bright); }

.hidden { display: none !important; }

.screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- */
/* PANTALLA DE INGRESO -- fondo tipo "ciudad": cielo arriba, verdes/  */
/* grises/marrones en el medio, vereda abajo. Variables aparte para  */
/* poder armar una versión de noche más adelante sin tocar el resto. */
/* ---------------------------------------------------------------- */
#screen-join {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--city-sky-top) 0%,
    var(--city-sky-bottom) 30%,
    var(--city-mid) 52%,
    var(--city-ground) 74%,
    var(--city-street) 92%
  );
}

/* manchas orgánicas de fondo -- decoración pura, nunca reciben clicks
   (pointer-events:none) ni afectan el layout del contenido real. Cada
   una tiene una rotación propia y un par se solapan a propósito, para
   que no se vea como una grilla prolija de formas. Más blur que antes
   a propósito -- "vectorizado pero con blur", sugiriendo nubes/verde/
   siluetas de edificios sin dibujarlos en detalle. */
.join-blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 58% 42% 38% 62% / 55% 35% 65% 45%;
  filter: blur(6px);
}
.blob-1 {
  /* nube */
  width: 220px;
  height: 110px;
  top: 20px;
  left: -60px;
  background: #ffffff;
  opacity: 0.8;
  transform: rotate(-8deg);
}
.blob-2 {
  /* nube, más chica */
  width: 140px;
  height: 80px;
  top: 70px;
  right: -40px;
  background: #ffffff;
  opacity: 0.65;
  transform: rotate(10deg);
  border-radius: 45% 55% 60% 40% / 40% 60% 40% 60%;
}
.blob-3 {
  /* copa de árbol / verde de plaza, banda del medio */
  width: 260px;
  height: 200px;
  top: 38%;
  left: -100px;
  background: var(--city-tree);
  opacity: 0.55;
  transform: rotate(22deg);
}
.blob-4 {
  /* silueta de edificio gris, se solapa con el verde de al lado */
  width: 170px;
  height: 230px;
  top: 34%;
  right: -70px;
  background: var(--city-building);
  opacity: 0.5;
  transform: rotate(-14deg);
  border-radius: 40% 60% 35% 65% / 50% 50% 60% 40%;
}

.join-box {
  position: relative;
  z-index: 1;
  width: min(360px, 88vw);
  text-align: center;
}

.brand-mark {
  width: 84px;
  height: 84px;
  margin: 0 auto 0.6em;
  filter: drop-shadow(0 0 16px rgba(242,163,64,0.45));
}
.brand-mark img, .brand-mark svg { display: block; width: 100%; height: 100%; }

.brand {
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: 3.4rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.2em;
  /* blanco sólido, igual que en el logo de referencia -- sin degradé (a pedido, los degradés quedan solo para barras de progreso) */
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.tagline {
  color: #fff;
  font-size: 0.9rem;
  margin: 0 0 2em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}

#screen-join .hint {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.legal-links { font-size: 0.68rem; margin-top: 0.8em; }
.legal-links a { color: #fff; text-decoration: underline; display: inline-block; padding: 0.55em 0.2em; } /* área de toque más grande, sin cambiar cómo se ve */

#input-name {
  width: 100%;
  padding: 0.9em 1.1em;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  margin-bottom: 0.8em;
}
#input-name:focus { outline: none; border-color: var(--accent); }

button {
  font-family: var(--font-body);
  cursor: pointer;
}

#btn-join {
  width: 100%;
  padding: 0.9em 1em;
  background: var(--accent-bright);
  border: none;
  border-radius: var(--radius-sm);
  color: #151b2c;
  font-weight: 700;
  font-size: 1rem;
}
#btn-join:active { background: var(--accent-bright); }

.google-signin-container {
  display: flex;
  justify-content: center;
  margin: 1.2em 0 0.6em;
  min-height: 44px; /* mismo alto aprox. del botón de Google, para que no "salte" el layout mientras carga */
}

.hint {
  color: var(--text-dim);
  font-size: 0.75rem;
  margin-top: 1.2em;
  line-height: 1.5;
}

.partner-invite {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.7em 0 0; /* área de toque */
}
.partner-invite:hover,
.partner-invite:active {
  color: var(--accent-bright);
}

/* ---------------------------------------------------------------- */
/* MAPA                                                               */
/* ---------------------------------------------------------------- */
#map { width: 100%; height: 100%; background: #212121; }
/* el mapa (Esri Dark Gray Canvas) es gris oscuro, no violeta -- si el
   fondo de la pantalla entera siguiera siendo el violeta de la app,
   se notaría un parpadeo de color al mover el mapa rápido (antes de
   que las tiles nuevas terminen de cargar) o en el borde de abajo,
   detrás de los controles del navegador/celular. Mimetizado acá con
   el mismo gris del mapa para que esos bordes no se noten. */
#screen-map { background: #212121; }

/* Cartel de "encontraste un premio" -- ver client/js/celebrationOverlay.js */
.celebration-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 900; /* por debajo de paneles/HUD (1300+) pero por encima del mapa */
  overflow: hidden;
}

.roulette-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000; /* por encima de todo -- es un momento que hay que resolver antes de seguir */
  background: rgba(20, 16, 46, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
}
.roulette-box {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 1.4em 1.2em;
  text-align: center;
  max-width: 340px;
  width: 100%;
}
.roulette-box h2 {
  font-family: var(--font-display); font-weight: 600;
  margin: 0 0 0.8em;
  font-size: 1.1rem;
}
.roulette-wheel-wrap {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0 auto;
}
.roulette-svg { width: 100%; height: 100%; }
#roulette-wheel-group { transform-origin: 150px 150px; }
.roulette-pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
.roulette-result {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.3rem;
  color: var(--accent-bright);
  margin: 1em 0 0.6em;
}
.roulette-continue {
  background: var(--accent-bright);
  border: 2px solid #d97a35;
  color: #151b2c;
  font-weight: 700;
  font-family: var(--font-body);
  padding: 0.7em 1.6em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
}

.celebration-pop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: celebration-pop-anim 1.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.celebration-word {
  font-family: var(--font-display-3); font-weight: 600;
  font-size: 2.4rem;
  color: var(--accent-bright);
  text-shadow: 0 0 22px rgba(246, 195, 66, 0.75), 0 2px 0 #151b2c;
  white-space: nowrap;
}
.celebration-combo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--bg);
  background: var(--accent-bright);
  padding: 0.2em 0.8em;
  border-radius: 999px;
  white-space: nowrap;
}
/* raro y legendario pegan un poco más fuerte -- coherente con que son
   hallazgos menos frecuentes */
.celebration-raro .celebration-word {
  color: #f55e84;
  text-shadow: 0 0 22px rgba(245, 94, 132, 0.75), 0 2px 0 #151b2c;
}
.celebration-legendario .celebration-word {
  font-size: 2.9rem;
  color: var(--accent-bright);
  text-shadow: 0 0 32px rgba(246, 195, 66, 0.9), 0 2px 0 #151b2c;
}

/* celebración CHICA de "encontraste una pieza" -- a propósito más
   discreta que el cartel grande de arriba: es un paso intermedio, no
   el premio en sí (ver config.pieces) */
.celebration-piece {
  animation-duration: 1.1s;
}
.celebration-piece-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  background: rgba(36, 31, 77, 0.85);
  padding: 0.35em 0.9em;
  border-radius: 999px;
  border: 2px solid var(--accent-bright);
  white-space: nowrap;
}
.celebration-piece.celebration-raro .celebration-piece-word { border-color: #f55e84; }
.celebration-piece.celebration-legendario .celebration-piece-word { border-color: #6957d4; }
.celebration-piece.celebration-poco_comun .celebration-piece-word { border-color: #48c39d; }
.celebration-piece.celebration-comun .celebration-piece-word { border-color: #f2954f; }

@keyframes celebration-pop-anim {
  0% { transform: scale(0.4) translateY(14px); opacity: 0; }
  18% { transform: scale(1.15) translateY(0); opacity: 1; }
  28% { transform: scale(1) translateY(0); opacity: 1; }
  78% { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(1.04) translateY(-24px); opacity: 0; }
}

/* Overlay de "buscando tu ubicación" — tapa el mapa hasta tener la
   primera posición real de GPS, para que nunca se vea el salto entre
   el fallback (Obelisco) y donde estás de verdad. Ver mapView.js. */
.map-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  transition: opacity 0.6s ease-out;
}
.map-loading-overlay.fade-out { opacity: 0; pointer-events: none; }
.map-loading-overlay p { color: var(--text-dim); font-family: var(--font-body); font-size: 0.85rem; max-width: 280px; }
.spinner {
  width: 46px;
  height: 46px;
  border: 4px solid var(--panel-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinner-rotate 0.85s linear infinite;
}
@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

.btn-retry-location {
  margin-top: 8px;
  padding: 0.7em 1.4em;
  background: var(--accent-bright);
  border: none;
  border-radius: var(--radius-sm);
  color: #151b2c;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Tiles de Esri (World_Dark_Gray_Base): ya vienen oscuras, no hace
   falta invertir nada. Solo un ajuste fino de contraste/brillo. */
#map .leaflet-tile-pane { filter: brightness(0.92) contrast(1.08); }

/* atribución del mapa: es obligatoria (condición de uso de Esri/OSM,
   no se puede sacar), pero por defecto viene con el estilo de Leaflet
   sin tocar — fondo blanco, letra chica, se nota que es "de librería".
   Acá solo la integramos a la identidad visual, sin ocultar nada. */
.leaflet-control-attribution {
  background: rgba(31,26,20,0.75) !important;
  color: var(--text-dim) !important;
  font-size: 0.62rem !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-sm) 0 0 0;
}
.leaflet-control-attribution a { color: var(--text-dim) !important; }

.hud-top {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 500;
}

.hud-points {
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.7em;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 80px;
}
.hud-points-row { display: flex; align-items: baseline; gap: 6px; }
#hud-points-value { font-size: 1.1rem; font-weight: 700; color: #ffd966; /* antes el amarillo de acento: contraste 3,83 sobre el panel; con este da 4,6 (mínimo recomendado 4,5) */ }

.level-progress-track {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: var(--bg-deep);
  overflow: hidden;
}
.level-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  border-radius: 3px;
  transition: width 0.4s ease;
}
.hud-level-track { height: 4px; }
.stats-profile .level-progress-track { border: 1px solid rgba(255, 255, 255, 0.3); margin-top: 4px; }
.hud-points-label { font-size: 0.68rem; color: var(--text-dim); }
.hud-zone-name {
  font-size: 0.7rem; /* antes 0.62rem (9,9 px): demasiado chico para leer en el celular */
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* El ancho de la caja lo marcan SOLO los puntos ("12345 puntos"): el nombre de la zona se corta con "…" donde termina esa fila, sin agrandar la caja
     ni apretar los botones de al lado. (width:0 + min-width:100% saca al texto del cálculo del ancho; funciona en todos los navegadores.) */
  width: 0;
  min-width: 100%;
}

.hud-btn {
  flex: 1 1 0;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.5em 0.5em;
  min-height: 36px; /* antes ~28 px de alto: difícil de tocar con el pulgar */
  font-size: 0.75rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-btn:active { border-color: var(--accent); }
/* pantallas muy angostas (320-360 px): botones un poco más compactos para que "mis premios" no se corte */
@media (max-width: 360px) {
  .hud-btn { font-size: 0.68rem; padding: 0.5em 0.25em; }
  .hud-top { left: 8px; right: 8px; }
}

.hud-btn-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hud-btn-icon:active { background: var(--bg); }

/* ---------------------------------------------------------------- */
/* MODO DE PRUEBA (marca de agua, siempre visible)                    */
/* ---------------------------------------------------------------- */
.test-mode-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  z-index: 400; /* debajo del HUD/paneles/feed, arriba del mapa */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: 0.18em;
  color: rgba(231, 237, 243, 0.09);
  white-space: nowrap;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* ---------------------------------------------------------------- */
/* FLECHAS DE RADAR (paquetes fuera de la pantalla)                   */
/* ---------------------------------------------------------------- */
#offscreen-arrows {
  position: fixed;
  inset: 0;
  z-index: 550;
  pointer-events: none; /* nunca deben interceptar toques, son solo indicadores */
}
.offscreen-arrow {
  position: fixed;
  left: 0;
  top: 0;
  display: block;
  /* el centrado va acá (margen, resuelto en el layout), NUNCA como un
     translate(-50%,-50%) mezclado con rotate() en el mismo `transform`
     — si se combinan ahí, la rotación pivotea sobre la posición
     ORIGINAL del elemento (antes del translate), no sobre el punto
     real donde termina estando. Con el margen ya centrado acá, el
     `transform` en JS solo necesita traer un translate(posición) +
     rotate(ángulo), y ahí sí gira alrededor del punto correcto. */
  margin-left: -15px; /* mitad del width (30px) */
  margin-top: -15px; /* mitad del height (30px) */
  /* resplandor cálido además del contraste oscuro — antes solo tenía la
     sombra oscura (para que se recorte contra el mapa), lo que la hacía
     verse apagada. El brillo dorado es fijo (no varía por rareza) para
     no complicar esto con JS — igual se nota bien sobre cualquier color */
  filter: drop-shadow(0 0 16px rgba(255,214,132,0.55)) drop-shadow(0 0 8px rgba(255,214,132,0.85)) drop-shadow(0 0 3px rgba(0,0,0,0.85));
  transition: opacity 0.3s ease-out;
}

/* ---------------------------------------------------------------- */
/* MARCADORES DEL MAPA (Leaflet divIcon)                              */
/* ---------------------------------------------------------------- */
.player-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px rgba(111,174,127,0.7)) drop-shadow(0 0 3px rgba(0,0,0,0.7));
}
.player-icon-wrap img { display: block; }


.friend-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 7px rgba(94,200,245,0.75)) drop-shadow(0 0 3px rgba(0,0,0,0.7));
}
.friend-icon-wrap img { display: block; }

.store-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 8px rgba(242,163,64,0.75)) drop-shadow(0 0 3px rgba(0,0,0,0.7));
}
.store-icon-wrap img { display: block; }

.package-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Brillo por rareza con `filter` — el MISMO patrón que ya usan
     .player-icon-wrap (nunca tuvieron el bug de
     desfasaje). SIN transform propio en este elemento: es el que
     Leaflet usa para posicionar el marcador en el mapa. Antes acá había
     un aura como div hijo aparte + un div interno con escala — se
     sacaron los dos como parte del diagnóstico del desfasaje al hacer
     zoom, que persistía incluso después de sacar la animación. Ver el
     comentario largo en mapView.js -> renderPackages.
     La `transition` de acá es para el DESVANECIDO del último minuto de
     vida (marker.setOpacity() en JS) — transition en `opacity` no toca
     `transform`, así que es seguro. El "latido" y la "levitación" (ver
     abajo) también son a propósito SOLO sobre `filter` y `margin-top`
     respectivamente — NUNCA sobre `transform`, que es justo la
     propiedad que Leaflet usa para posicionar. Si en algún momento este
     bug volviera a aparecer, acá es el primer lugar para sospechar. */
  transition: opacity 1.8s linear;
}
.package-icon-wrap img { display: block; }

/* levitación leve: sube y baja unos pocos píxeles con `margin-top`
   (JAMÁS con `transform` — ver el comentario de arriba). El margen
   afecta dónde queda la caja ANTES de que Leaflet le aplique su propio
   `transform` para posicionarla en el mapa, así que el resultado final
   es: posición geográfica correcta + un empujoncito visual encima, sin
   que Leaflet pierda el rastro de la posición real en ningún momento. */
@keyframes package-float {
  0%, 100% { margin-top: 0px; }
  50% { margin-top: -3px; }
}

/* latido leve: el brillo respira, el ícono NO se mueve ni escala —
   nunca animes `transform` acá, ver el comentario de arriba.
   Reducido de 4 capas de drop-shadow a 2, y radios/opacidad más
   chicos -- con muchos paquetes en pantalla a la vez (probando a
   escala), 4 sombras animadas por cada uno generaba un "smog" visual
   y trababa el renderizado del navegador. El servidor no lo nota (es
   puro trabajo del lado del cliente), pero el celu/la compu sí. */
.package-comun { animation: pulse-comun 2.4s ease-in-out infinite, package-float 2.6s ease-in-out infinite; }
@keyframes pulse-comun {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(240,230,214,0.55)) drop-shadow(0 0 3px rgba(0,0,0,0.6)); }
  50% { filter: drop-shadow(0 0 14px rgba(240,230,214,0.7)) drop-shadow(0 0 3px rgba(0,0,0,0.6)); }
}
.package-poco_comun { animation: pulse-poco-comun 2.4s ease-in-out infinite, package-float 2.6s ease-in-out infinite; }
@keyframes pulse-poco-comun {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(242,149,79,0.55)) drop-shadow(0 0 3px rgba(0,0,0,0.6)); }
  50% { filter: drop-shadow(0 0 14px rgba(242,149,79,0.7)) drop-shadow(0 0 3px rgba(0,0,0,0.6)); }
}
.package-raro { animation: pulse-raro 2.1s ease-in-out infinite, package-float 2.6s ease-in-out infinite; }
@keyframes pulse-raro {
  0%, 100% { filter: drop-shadow(0 0 11px rgba(94,200,245,0.6)) drop-shadow(0 0 3px rgba(0,0,0,0.6)); }
  50% { filter: drop-shadow(0 0 16px rgba(94,200,245,0.75)) drop-shadow(0 0 3px rgba(0,0,0,0.6)); }
}
.package-legendario { animation: pulse-legendario 1.5s ease-in-out infinite, package-float 2.6s ease-in-out infinite; }
@keyframes pulse-legendario {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(105,87,212,0.65)) drop-shadow(0 0 3px rgba(0,0,0,0.6)); }
  50% { filter: drop-shadow(0 0 18px rgba(105,87,212,0.8)) drop-shadow(0 0 3px rgba(0,0,0,0.6)); }
}

/* ---------------------------------------------------------------- */
/* EFECTO DE RECOLECCIÓN (partículas)                                 */
/* ---------------------------------------------------------------- */
/* Elementos efímeros (aparecen, animan, se autodestruyen) — a
   diferencia de los marcadores de paquetes, ACÁ SÍ es seguro animar
   `transform`: no son de Leaflet, no necesitan mantener su posición
   sincronizada con el mapa en el tiempo, solo duran una fracción de
   segundo. */
#effects-layer {
  position: fixed;
  inset: 0;
  z-index: 560;
  pointer-events: none;
}
.collect-flash {
  position: fixed;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--flash-color, #fff);
  animation: collect-flash-burst 0.5s ease-out forwards;
}
@keyframes collect-flash-burst {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(4.5); opacity: 0; }
}
.collect-particle {
  position: fixed;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  animation: collect-particle-burst 0.7s ease-out forwards;
}
@keyframes collect-particle-burst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* ---------------------------------------------------------------- */
/* PANELES (ranking / mis premios)                                    */
/* ---------------------------------------------------------------- */
.panel {
  position: fixed;
  inset: 0;
  z-index: 1400; /* por encima del feed (1300), para que no se le meta encima */
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: flex-end;
}
.panel-inner {
  width: 100%;
  max-height: 78vh;
  overflow-y: auto;
  background: var(--panel);
  border-top: 1px solid var(--panel-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 1.2em 1.2em max(1.2em, env(safe-area-inset-bottom));
}
.panel-inner h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  margin: 0 0 0.7em;
}

.panel-hero {
  position: relative;
  margin: -1.2em -1.2em 1.4em;
  background: var(--bg-deep);
  padding: 1.2em 1.2em 2.1em;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}
.panel-hero h2 { color: #fff; margin: 0 0 0.3em; }
.panel-hero .hint { color: #fff; opacity: 0.75; margin: 0; }
.panel-hero-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 30px;
  display: block;
}
.panel-hero-wave path { fill: var(--panel); }

.bag-capacity-display {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 0.6em;
}
.bag-capacity-display.bag-full { color: #7a1f1f; }
.bag-capacity-display .level-progress-track {
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#friends-ranking-list { list-style: none; padding: 0; margin: 0 0 1em; }
#friends-ranking-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 0;
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.85rem;
}
.friend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.friend-avatar {
  width: 26px;
  height: 26px;
  border-radius: 30%; /* misma forma que .profile-avatar -- toda foto de Google va cuadrada redondeada, no circular */
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--panel-border);
}
.friend-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  font-size: 0.9rem;
}
#friends-ranking-list li .rank-pos { color: var(--text-dim); width: 2em; display: inline-block; }

.friend-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.friend-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.5em;
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}
.friend-suggestion-item .friend-suggestion-info { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.friend-suggestion-item .mutual-count { color: var(--text-dim); font-size: 0.72rem; }
.friend-suggestion-item button {
  flex-shrink: 0;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.4em 0.8em;
  cursor: pointer;
}
.friend-suggestion-item button:disabled { opacity: 0.5; cursor: default; }
.friend-actions { display: flex; gap: 6px; }
.account-actions { display: flex; flex-direction: column; gap: 8px; }
.account-actions button { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--text-dim); background: transparent; color: inherit; font-size: 0.85rem; cursor: pointer; }
.account-actions .btn-danger { border-color: #e05a5a; color: #ff8b8b; }
.friend-suggestion-item .btn-decline-request,
.friend-suggestion-item .btn-cancel-request { background: transparent; border: 1px solid var(--text-dim); color: var(--text-dim); }
.friend-row-end { display: inline-flex; align-items: center; gap: 8px; }
.btn-remove-friend { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.8rem; padding: 2px 4px; }

.global-rank-display {
  text-align: center;
  padding: 1em;
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}
.global-rank-display .rank-number {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--accent-bright);
}
.global-rank-display .rank-of { color: var(--text-dim); font-size: 0.8rem; margin-top: 0.2em; }
.friends-ranking-you { color: var(--accent-bright); font-weight: 700; }

.invite-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 0.6em 0.8em;
  margin: 0.6em 0 1em;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.invite-link-box span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-link-box button {
  flex-shrink: 0;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.4em 0.7em;
  cursor: pointer;
}

.my-id-box {
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.8em;
  margin: 0.6em 0;
  font-size: 0.75rem;
  color: var(--text-dim);
  overflow-x: auto;
  white-space: nowrap;
}
.my-id-box code { color: var(--accent-bright); }
#btn-copy-my-id {
  float: right;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 0.2em;
}

.add-friend-row {
  display: flex;
  gap: 8px;
  margin-bottom: 0.6em;
}
.add-friend-row input {
  flex: 1;
  min-width: 0;
  padding: 0.6em 0.7em;
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
}
.add-friend-row button {
  flex-shrink: 0;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0 1em;
  cursor: pointer;
}

.share-location-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 0.8em;
  cursor: pointer;
}
.share-location-toggle input { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; margin: 0; }

.collection-item {
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.9em;
  margin-bottom: 0.5em;
}
.collection-item-info h4 { margin: 0 0 0.2em; font-size: 0.9rem; font-weight: 600; }
.collection-item-info p { margin: 0; font-size: 0.75rem; color: var(--text-dim); }
.collection-item-info .redemption-code { margin-top: 0.4em; }
.redemption-validity { font-size: 0.85em; opacity: 0.75; margin: 0.25em 0 0.4em; }
.redemption-validity-soon { color: #b45309; font-weight: 600; opacity: 1; }
.collection-item-info .redemption-code code { background: var(--bg); padding: 0.1em 0.4em; border-radius: 4px; color: var(--accent-bright); }
.collection-item-info .redemption-code.redeemed {
  color: var(--ok);
  font-weight: 600;
}
.collection-item-info .redemption-code.redeemed code { color: var(--ok); opacity: 0.8; text-decoration: line-through; }

.pieces-section { margin-top: 1.4em; padding-top: 1em; border-top: 1px solid var(--panel-border); }
.pieces-section h3 { margin: 0 0 0.2em; font-size: 1rem; }
.piece-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 0.6em 0.9em;
  margin-bottom: 0.5em;
  background: var(--panel);
}
.piece-emoji-badge {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
}
.piece-item-info { flex: 1; min-width: 0; }
.piece-item-info h4 { margin: 0 0 0.15em; font-size: 0.85rem; font-weight: 600; }
.piece-item-info p { margin: 0; font-size: 0.72rem; color: var(--text-dim); }
.piece-item .piece-fraction { flex-shrink: 0; font-family: var(--font-display); font-weight: 700; color: var(--accent-bright); font-size: 0.95rem; white-space: nowrap; }
.btn-gift-piece {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: var(--bg);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-gift-piece:active { background: var(--accent); }
.btn-open-package {
  flex-shrink: 0;
  background: var(--accent-bright);
  border: 2px solid #d97a35;
  color: #151b2c;
  font-weight: 700;
  font-family: var(--font-body);
  padding: 0.5em 1em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
}
.btn-qr-toggle {
  margin-top: 0.5em;
  padding: 0.4em 0.8em;
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  color: var(--accent-bright);
  font-size: 0.72rem;
  font-family: var(--font-body);
  cursor: pointer;
}
.btn-gift-toggle {
  margin-top: 0.5em;
  margin-left: 0.5em;
  padding: 0.4em 0.8em;
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  color: var(--accent-bright);
  font-size: 0.72rem;
  font-family: var(--font-body);
  cursor: pointer;
}
.btn-discard {
  margin-top: 0.5em;
  margin-left: 0.5em;
  padding: 0.4em 0.8em;
  background: transparent;
  border: 1px solid #a94454;
  border-radius: var(--radius-sm);
  color: #f2a3ae;
  font-size: 0.72rem;
  font-family: var(--font-body);
  cursor: pointer;
}
/* dentro de la fila de "paquetes sin abrir" (flex horizontal, ver
   .piece-item) el botón va compacto al lado de "abrir", no apilado
   como en la lista de premios ya resueltos */
.piece-item .btn-discard {
  margin: 0;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.gift-picker-list {
  max-height: 40vh;
  overflow-y: auto;
  margin: 0.8em 0;
}
.btn-gift-to {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.8em 0.4em;
  background: none;
  border: none;
  border-bottom: 1px solid var(--panel-border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.btn-gift-to:last-child { border-bottom: none; }
.btn-gift-to:active { background: var(--bg); }
.btn-gift-to:disabled { opacity: 0.5; cursor: default; }

.btn-go-to-store {
  margin-top: 0.5em;
  margin-left: 0.5em;
  padding: 0.4em 0.8em;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent-bright);
  font-size: 0.72rem;
  font-family: var(--font-body);
  cursor: pointer;
}
.qr-container {
  margin: 0.7em auto 0;
  text-align: center;
  background: #fff;
  padding: 10px;
  border-radius: var(--radius-sm);
  display: block;
  width: fit-content;
}
.qr-container img { display: block; }
.collection-comun { border-left-color: #f2954f; }
.collection-poco_comun { border-left-color: #48c39d; }
.collection-raro { border-left-color: #f55e84; }
.collection-legendario { border-left-color: #f6c342; }

.toast {
  position: fixed;
  bottom: max(100px, calc(env(safe-area-inset-bottom) + 90px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1500;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.7em 1.1em;
  font-size: 0.82rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  max-width: 88vw;
  text-align: center;
}
.toast.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------------- */
/* FEED DE RECOLECCIÓN (abajo a la izquierda)                         */
/* ---------------------------------------------------------------- */
.kill-feed {
  position: fixed;
  left: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 1300;
  display: flex;
  flex-direction: column-reverse; /* la más nueva entra abajo y empuja hacia arriba */
  gap: 4px;
  pointer-events: none;
  max-width: 78vw;
}
.kill-feed-entry {
  background: rgba(21,28,36,0.9);
  border-left: 3px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 0.45em 0.85em;
  font-size: 0.75rem;
  color: var(--text);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.kill-feed-entry-visible {
  opacity: 1;
  transform: translateX(0);
}
.kill-feed-entry.feed-green {
  border-left-color: var(--ok);
  color: #c8f0d4;
}

/* popup de info al tocar un paquete en el mapa */
.leaflet-popup-content-wrapper {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}
.leaflet-popup-tip { background: var(--panel); }
.map-popup { font-family: var(--font-body); font-size: 0.8rem; }
.map-popup strong { color: var(--accent-bright); font-size: 0.88rem; font-weight: 600; }
.map-popup p { margin: 0.3em 0 0; color: var(--text-dim); }

.btn-close {
  width: 100%;
  padding: 0.8em;
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.78rem;
  margin-top: 0.4em;
}

/* ---------------------------------------------------------------- */
/* PANTALLA DE ESTADÍSTICAS                                          */
/* ---------------------------------------------------------------- */
#screen-stats { display: flex; flex-direction: column; background: var(--bg); }

.stats-hero {
  position: relative;
  flex-shrink: 0;
  background: var(--bg-deep);
  padding-top: max(0.6em, env(safe-area-inset-top));
  overflow: hidden;
}
.stats-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4em 1.2em;
}
.stats-hero-top h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  margin: 0;
  color: #fff;
}
.btn-close-stats {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1em 1.2em max(1.5em, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}

.stats-section {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 1.2em;
  margin-bottom: 1em;
}
/* cada sección con su propio color de identidad, en el orden en que
   aparecen -- para que no todo se sienta del mismo tono violeta (a
   pedido explícito, más variedad de color en general) */
.stats-scroll .stats-section:nth-of-type(1) { border-left: 4px solid #f6c342; } /* Logros */
.stats-scroll .stats-section:nth-of-type(2) { border-left: 4px solid #48c39d; } /* Distancia caminada */
.stats-scroll .stats-section:nth-of-type(3) { border-left: 4px solid #f2954f; } /* Premios */
.stats-scroll .stats-section:nth-of-type(4) { border-left: 4px solid var(--accent); } /* Locales cerca tuyo */
.stats-scroll .stats-section:nth-of-type(5) { border-left: 4px solid #f55e84; } /* Ranking global */
.stats-scroll .stats-section:nth-of-type(6) { border-left: 4px solid var(--ok); } /* Ranking entre amigos */
.stats-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.9em;
  color: var(--text);
}

.stats-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.6em 1.2em 2.2em;
  position: relative;
  z-index: 1;
}
.profile-info { flex: 1; min-width: 0; } /* sin esto, el div se achica a su contenido y la barra de progreso (width:100% adentro) colapsa a un ancho ínfimo -- bug clásico de flexbox */
.stats-hero-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 34px;
  display: block;
}
.stats-hero-wave path { fill: var(--bg); }
.profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 30%; /* toda foto de Google va así: cuadrada redondeada, no circular -- ver también .friend-avatar */
  object-fit: cover;
  border: 2px solid #fff;
  flex-shrink: 0;
}
.profile-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.4rem;
}
.profile-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
}
.profile-level {
  font-size: 0.75rem;
  color: #fff;
  opacity: 0.75;
  margin-top: 2px;
}

.achievements-carousel {
  position: relative;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.achievements-carousel::-webkit-scrollbar { height: 4px; }
.achievements-carousel::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 2px; }
.achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 72px;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.65rem;
  color: var(--text-dim);
  scroll-snap-align: center;
}
.achievement-badge .achievement-emoji {
  font-size: 1.6rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--panel-border);
}
.achievement-badge.unlocked .achievement-emoji {
  border-color: var(--accent);
  background: rgba(230, 168, 74, 0.12);
}
.achievement-badge.locked .achievement-emoji { filter: grayscale(1) brightness(0.5); }
.achievement-badge.unlocked { color: var(--text); }

/* calendario semanal de distancia caminada */
.distance-week-chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  margin-bottom: 0.8em;
}
.distance-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 0.4em;
}
.distance-bar-track {
  width: 100%;
  max-width: 22px;
  height: 70px;
  display: flex;
  align-items: flex-end;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
}
.distance-bar {
  width: 100%;
  background: var(--accent-bright);
  border-radius: 4px 4px 0 0;
  transition: height 0.4s ease-out;
}
.distance-day-label { font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; }
.distance-day-label.distance-day-today { color: var(--accent-bright); font-weight: 700; }
.distance-day-value { font-size: 0.62rem; color: var(--text-dim); white-space: nowrap; }

.btn-text-link {
  background: none;
  border: none;
  color: var(--accent-bright);
  font-family: var(--font-body);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
#distance-history-full { margin-top: 0.8em; max-height: 220px; overflow-y: auto; }
.history-row {
  display: flex;
  justify-content: space-between;
  padding: 0.4em 0;
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.8rem;
  color: var(--text-dim);
}
.history-row span:last-child { color: var(--text); }

/* tarjetas de premios conseguidos/canjeados */
.stats-cards { display: flex; gap: 10px; margin-bottom: 1em; }
.stats-card {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 1em;
  text-align: center;
}
.stats-card-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--accent-bright); }
.stats-card-label { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.2em; }

.rarity-breakdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.35em 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.rarity-breakdown-row strong { margin-left: auto; color: var(--text); }
.rarity-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* locales cerca */
.nearby-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7em 0;
  border-bottom: 1px solid var(--panel-border);
}
.nearby-item:last-child { border-bottom: none; }
.nearby-item strong { font-size: 0.88rem; }
.nearby-distance { font-size: 0.8rem; color: var(--accent-bright); font-weight: 600; white-space: nowrap; margin-left: 10px; }

/* ---------------------------------------------------------------- */
/* FICHA DE LOCAL (chica, no ocupa toda la pantalla)                 */
/* ---------------------------------------------------------------- */
.store-info-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500; /* por encima del feed y de los paneles normales — es lo último que se ve */
  background: var(--panel);
  border-top: 1px solid var(--panel-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 1em 1.1em max(1em, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}
.store-info-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
.store-photo-placeholder {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.store-info-text { flex: 1; min-width: 0; padding-right: 24px; }
.store-info-text h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.3em;
  color: var(--text);
}
.store-info-text p { margin: 0.15em 0; }
.btn-close-store-info {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ---------------------------------------------------------------- */
/* SERVIDOR LLENO -- tapa todo hasta que haya lugar (el celu reintenta solo) */
/* ---------------------------------------------------------------- */
.server-full {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(21, 27, 44, 0.94);
  color: #fff;
  text-align: center;
}
.server-full-box { max-width: 340px; }
.server-full-icon { font-size: 48px; margin-bottom: 8px; }
.server-full h2 { margin: 0 0 10px; font-size: 22px; }
.server-full p { margin: 0 0 10px; line-height: 1.4; }
.server-full-hint { opacity: 0.75; font-size: 14px; }
.server-full-place { font-size: 22px; font-weight: 700; margin: 8px 0; }