/**
 * ESTILOS — HORSHU
 * ---------------------------------------------------------------------------
 * Identidad de marca: herradura dorado-plateada como símbolo (suerte),
 * paleta cálida ámbar/naranja con acentos plateados sobre un fondo oscuro
 * cálido. Tipografía limpia (Poppins para títulos, Inter para todo lo
 * demás), esquinas redondeadas.
 *
 * Los colores de RAREZA de los paquetes (común/poco común/raro/legendario,
 * ver client/js/packageIcons.js) son un sistema aparte, con su propio
 * significado — no se tocan acá salvo legendario, que ahora comparte el
 * dorado de marca a propósito (el premio máximo "es" la suerte del logo).
 */

:root {
  --bg: #14110d;
  --panel: #1f1a14;
  --panel-border: #3d3325;
  --text: #f2ede2;
  --text-dim: #a89882;
  --accent: #f2a340;
  --accent-bright: #ffd684;
  --silver: #d4d7db;
  --ok: #6fae7f; /* sin cambios: sigue siendo el verde de "vos/éxito" en el mapa */

  --font-display: "Poppins", sans-serif;
  --font-body: "Inter", 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;
}

.hidden { display: none !important; }

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

/* ---------------------------------------------------------------- */
/* PANTALLA DE INGRESO                                               */
/* ---------------------------------------------------------------- */
#screen-join {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(242,163,64,0.14), transparent 60%),
    var(--bg);
}

.join-box {
  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);
  font-weight: 800;
  font-size: 3.2rem;
  letter-spacing: 0.03em;
  margin: 0 0 0.2em;
  /* texto con relleno degradado dorado-plateado, mismo espíritu que la herradura */
  background: linear-gradient(135deg, #eef0f2 0%, #ffd684 30%, #f2a340 65%, #c9782e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.tagline {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0 0 2em;
}

#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: linear-gradient(135deg, var(--accent-bright), var(--accent));
  border: none;
  border-radius: var(--radius-sm);
  color: #251705;
  font-weight: 700;
  font-size: 1rem;
}
#btn-join:active { background: var(--accent-bright); }

.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;
}
.partner-invite:hover,
.partner-invite:active {
  color: var(--accent-bright);
}

/* ---------------------------------------------------------------- */
/* MAPA                                                               */
/* ---------------------------------------------------------------- */
#map { width: 100%; height: 100%; background: var(--bg); }

/* 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); }
}

/* 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: 8px;
  z-index: 500;
}

.hud-points {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.9em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
#hud-points-value { font-size: 1.1rem; font-weight: 700; color: var(--accent-bright); }
.hud-points-label { font-size: 0.68rem; color: var(--text-dim); }

.hud-btn {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.5em 0.9em;
  font-size: 0.75rem;
  font-weight: 500;
}
.hud-btn:active { border-color: var(--accent); }

/* ---------------------------------------------------------------- */
/* 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; }

.bot-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.8));
}
.bot-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/.bot-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 */
.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 22px rgba(168,137,90,0.65)) drop-shadow(0 0 12px rgba(168,137,90,0.9)) drop-shadow(0 0 6px rgba(168,137,90,0.8)) drop-shadow(0 0 3px rgba(0,0,0,0.75)); }
  50% { filter: drop-shadow(0 0 30px rgba(168,137,90,0.8)) drop-shadow(0 0 17px rgba(168,137,90,1)) drop-shadow(0 0 8px rgba(168,137,90,0.95)) drop-shadow(0 0 4px rgba(0,0,0,0.75)); }
}
.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 22px rgba(111,174,127,0.65)) drop-shadow(0 0 12px rgba(111,174,127,0.9)) drop-shadow(0 0 6px rgba(111,174,127,0.8)) drop-shadow(0 0 3px rgba(0,0,0,0.75)); }
  50% { filter: drop-shadow(0 0 30px rgba(111,174,127,0.8)) drop-shadow(0 0 17px rgba(111,174,127,1)) drop-shadow(0 0 8px rgba(111,174,127,0.95)) drop-shadow(0 0 4px rgba(0,0,0,0.75)); }
}
.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 25px rgba(91,143,199,0.7)) drop-shadow(0 0 14px rgba(91,143,199,0.92)) drop-shadow(0 0 7px rgba(91,143,199,0.85)) drop-shadow(0 0 3px rgba(0,0,0,0.75)); }
  50% { filter: drop-shadow(0 0 34px rgba(91,143,199,0.85)) drop-shadow(0 0 19px rgba(91,143,199,1)) drop-shadow(0 0 9px rgba(91,143,199,1)) drop-shadow(0 0 4px rgba(0,0,0,0.75)); }
}
.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 30px rgba(242,177,52,0.8)) drop-shadow(0 0 17px rgba(242,177,52,1)) drop-shadow(0 0 8px rgba(242,177,52,0.95)) drop-shadow(0 0 4px rgba(0,0,0,0.75)); }
  50% { filter: drop-shadow(0 0 42px rgba(242,177,52,0.9)) drop-shadow(0 0 24px rgba(242,177,52,1)) drop-shadow(0 0 11px rgba(242,177,52,1)) drop-shadow(0 0 5px rgba(0,0,0,0.75)); }
}

/* ---------------------------------------------------------------- */
/* 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;
}
#ranking-list { list-style: none; padding: 0; margin: 0 0 1em; }
#ranking-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.5em 0;
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.85rem;
}
#ranking-list li .rank-pos { color: var(--text-dim); width: 2em; display: inline-block; }

.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; }
.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; }
.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-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-top: 0.7em;
  text-align: center;
  background: #fff;
  padding: 10px;
  border-radius: var(--radius-sm);
  display: inline-block;
}
.qr-container img { display: block; }
.collection-comun { border-left-color: #a8895a; }
.collection-poco_comun { border-left-color: var(--ok); }
.collection-raro { border-left-color: #5b8fc7; }
.collection-legendario { border-left-color: #f2b134; }

.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-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(1em, env(safe-area-inset-top)) 1.2em 1em;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.stats-header h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  margin: 0;
  color: var(--text);
}
.btn-close-stats {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  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;
}

.stats-section {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 1.2em;
  margin-bottom: 1em;
}
.stats-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.9em;
  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: linear-gradient(180deg, var(--accent-bright), var(--accent));
  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;
}