/* ============================================================================
   MASCOTA — piezas compartidas por la PWA (index.html) y el overlay de
   escritorio (desktop.html): sombra en el piso, estilos del globo de diálogo,
   insignia de clima/Pomodoro y corazones.

   Vive aparte porque desktop.html no carga styles.css (traería el layout y el
   fondo de la PWA a un overlay transparente). Cuando estas reglas estaban solo
   en styles.css, en el escritorio la insignia salía sin estilos —el icono del
   clima enorme detrás de la mascota— y los estilos de globo elegidos en
   Ajustes no hacían nada.
   ============================================================================ */
.companion-ground-shadow {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 52px;
  height: 13px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.34), rgba(0,0,0,0.14) 45%, transparent 72%);
  border-radius: 50%;
  transform: translate(-50%, var(--lift, 0px)) scale(var(--sh-scale, 1));
  opacity: var(--sh-op, 0.9);
  pointer-events: none;
  z-index: 0;
}
/* El globo de diálogo debe quedar por ENCIMA del widget de clima/timer
   (z-index 10); si no, el emoji flotante tapa el texto de las burbujas. */
.companion-bubble { z-index: 20; }
/* El globo sale de la cabeza, no del borde de la caja: con personajes anchos
   había hasta 40 px de aire entre el globo y la mascota. Los 22px dejan libre
   el icono del clima, que va a la altura de la cabeza (top: --pet-top − 16). */
.companion-roamer .companion-bubble:not(.below) {
  bottom: calc(100% - var(--pet-top, 0px) + 22px);
}
/* Con el Pomodoro en marcha el temporizador flota sobre la cabeza (top:-55px):
   el globo sube para no taparlo. Solo con el icono del clima (.weather-only,
   que va a un lado) se queda pegado a la mascota. */
.companion-roamer:has(.companion-timer.show:not(.weather-only)) .companion-bubble:not(.below) {
  bottom: calc(100% - var(--pet-top, 9px) + 72px);
}
/* …y si además lleva la etiqueta de la tarea encima del temporizador, un
   escalón más: si no, el globo la tapa. */
.companion-roamer:has(.companion-timer.show .companion-timer-task.show) .companion-bubble:not(.below) {
  bottom: calc(100% - var(--pet-top, 9px) + 104px);
}
/* --- Estilos de globo de diálogo (seleccionables en Ajustes) --- */
.companion-bubble.style-kawaii {
  background: #fff5fb; color: #3a2b33;
  border: 2.5px solid var(--companion-accent, #f9a8d4);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.companion-bubble.style-kawaii::after { border-top-color: var(--companion-accent, #f9a8d4); }
.companion-bubble.style-kawaii.below::after { border-top-color: transparent; border-bottom-color: var(--companion-accent, #f9a8d4); }
.companion-timer.style-kawaii {
  background: #fff5fb;
  border: 4px solid var(--companion-accent, #f9a8d4);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.companion-bubble.style-retro {
  background: #f4ecd8; color: #1d0e01;
  border: 2.5px solid #1d0e01; border-radius: 10px;
  box-shadow: 4px 4px 0 #1d0e01;
}
.companion-bubble.style-retro::after { border-top-color: #1d0e01; }
.companion-bubble.style-retro.below::after { border-top-color: transparent; border-bottom-color: #1d0e01; }
.companion-timer.style-retro {
  background: #f4ecd8;
  border: 4px solid #1d0e01;
  border-radius: 0;
  box-shadow: 4px 4px 0 #1d0e01;
}
.companion-bubble.style-minimal {
  background: rgba(20,19,15,0.92); color: #fff;
  border: 2px solid var(--companion-accent, #f9a8d4); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.companion-bubble.style-minimal::after { border-top-color: rgba(20,19,15,0.92); }
.companion-bubble.style-minimal.below::after { border-top-color: transparent; border-bottom-color: rgba(20,19,15,0.92); }
.companion-timer.style-minimal {
  background: rgba(20,19,15,0.92);
  border: 2px solid var(--companion-accent, #f9a8d4);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.companion-timer {
  position: absolute;
  /* Justo encima de la cabeza: --pet-top lo publica companion.js según el
     personaje (ver publishPetTop). 9px reproduce el antiguo top:-55px. */
  top: calc(var(--pet-top, 9px) - 64px);
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 54px;
  height: 54px;
  background: white; /* Fallback de seguridad */
  border: 4px solid var(--companion-accent, #f9a8d4); /* Fallback de seguridad */
  border-radius: 12px;
  display: flex;
  flex-direction: column; /* Cambiar a vertical para alinear el texto de forma limpia */
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  pointer-events: none;
  z-index: 10;
}
.companion-timer.show {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}
/* Kawaii: leve flotar/rebote para que se sienta tierno */
@keyframes kawaii-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3.5px); }
}
.companion-timer-weather {
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.22));
  animation: kawaii-float 3s ease-in-out infinite;
}
/* Solo clima (sin Pomodoro): icono chico junto a la cabeza, a la derecha, en
   vez de un sol grande encima de la mascota. Sin halo ni destello: el icono
   kawaii ya trae su propia carita y rubor. */
.companion-timer.weather-only {
  /* A la altura de la cabeza, sea cual sea el personaje (--pet-top). */
  top: calc(var(--pet-top, 30px) - 16px);
  /* Al pasar de caminar a sentarse la cabeza cambia de altura: que el icono
     la siga suave en vez de saltar. */
  transition: top 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  left: calc(50% + 38px);
}
.companion-timer.weather-only .companion-timer-weather {
  font-size: 16px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}
/* Cuando la insignia lleva el icono del cielo, el canvas manda en el tamaño:
   el elemento se dimensionaba por el glifo del emoji y sin esto se colapsa.
   Es pixel art de 16×16 (kawaii-sky.js): se escala sin suavizar. */
.companion-timer-weather canvas {
  display: block;
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.companion-timer-weather.mini canvas {
  width: 16px;
  height: 16px;
}
/* Amanecer y ocaso: no hay icono propio para esas horas, así que se dibuja el
   sol y se le calienta el tono. El ocaso tira más a rojo que el amanecer. */
.companion-timer-weather.warm canvas {
  filter: hue-rotate(-14deg) saturate(1.3) brightness(1.03);
}
.companion-timer-weather.warm-dusk canvas {
  filter: hue-rotate(-24deg) saturate(1.45) brightness(0.94);
}
.companion-timer-weather.mini {
  position: absolute;
  top: -9px;
  right: -9px;
  font-size: 15px;
  background: white;
  border: 2px solid var(--companion-accent, #f9a8d4);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  box-shadow: 0 2px 5px rgba(249,168,212,0.5);
  z-index: 5;
}
.companion-timer-face {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #e2e8f0; /* Fallback for browsers that don't support repeating-conic-gradient */
  background: repeating-conic-gradient(#cbd5e1 0 2deg, transparent 2deg 6deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: kawaii-float 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(167,139,250,0.55));
}
.companion-timer-slice {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  /* Anillo de progreso de un solo tono (ligado al accent) en vez del arcoíris
     original; la porción restante se ve como pista pastel clara. */
  background: conic-gradient(var(--companion-accent, #7dd3fc) var(--deg, 0deg), #eef2f7 var(--deg, 0deg) 360deg);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,0.05);
  transition: background 0.3s ease;
}
.companion-timer.break .companion-timer-slice {
  background: conic-gradient(#34d399 var(--deg, 0deg), #eef2f7 var(--deg, 0deg) 360deg);
}
.companion-timer-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 35% 30%, #ffffff, #ffe3ef 70%);
  border: 2px solid var(--companion-accent, #f9a8d4);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  z-index: 3;
}
.companion-timer-knob::before { content: '♡'; color: var(--companion-accent, #f472b6); }
.companion-timer.break .companion-timer-knob { border-color: #86efac; }
.companion-timer.break .companion-timer-knob::before { content: '♡'; color: #34d399; }
.companion-timer-text {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 11px;
  color: #111;
  background: white;
  padding: 2px 6px;
  border: 1.5px solid #111;
  border-radius: 4px;
  white-space: nowrap;
}
.companion-timer-task {
  position: absolute;
  /* Encima del timer (que ya flota sobre la mascota) para no tapar al sprite */
  bottom: 100%;
  left: 50%;
  margin-bottom: 12px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 10px;
  color: white;
  background: #14130f;
  padding: 4px 8px;
  border-radius: 6px;
  border: 2px solid #8B5CF6;
  white-space: nowrap;
  box-shadow: 2px 2px 0 #111;
  border-color: var(--companion-accent, #8B5CF6);
  opacity: 0;
  transform: translateX(-50%) translateY(-5px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.companion-timer.show .companion-timer-task.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@keyframes pulse-bubble {
  0% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-50%, -3px) scale(1.03); }
  100% { transform: translate(-50%, 0) scale(1); }
}
.companion-bubble.clickable {
  animation: pulse-bubble 1.5s ease-in-out infinite;
}
.companion-bubble.clickable:hover {
  background: #d36604;
  color: #fff;
  transform: translate(-50%, -4px) scale(1.05);
}
.companion-bubble.clickable::after {
  border-top-color: inherit;
}
.companion-heart {
  position: absolute;
  left: 50%;
  top: 12%;
  font-size: 14px;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  animation: companion-heart-float 1.1s ease-out forwards;
}
@keyframes companion-heart-float {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--hx, 0px)), -48px) scale(1.15); }
}