:root {
  /* v2.3: rediseño "videojuego cartoon de madera" (pedido explícito,
     visual únicamente — ninguna mecánica/id/clase que use JS se tocó).
     Paleta exacta pedida para madera/dorado + tinta, más algunos tokens
     DERIVADOS de esos 7 colores para no tener que inventar tonos sueltos
     en cada regla. Todo el resto del archivo ya leía sus colores de
     variables (herencia de v2.1), así que redefinir este bloque re-tiñe
     casi toda la interfaz sola; los paneles/botones/carteles de madera de
     verdad (con bisel/marco) son reglas nuevas más abajo que usan los
     --wood-* directamente. */
  --wood-light: #f6b34b;
  --wood-main: #d98226;
  --wood-edge: #a64e16;
  --wood-shadow: #5b2a14;
  --wood-highlight: #ffd97a;
  --ink-dark: #45230f;
  --ink-light: #fff0cd;

  --bg: #ecd6a4; /* fondo general — tela/mesa clara detrás de los paneles de madera */
  --panel: #fdf3de; /* superficies de contenido (pergamino claro) — mismo rol que antes, texto siempre legible arriba */
  --ink: var(--ink-dark);
  --muted: #8a5a37; /* texto secundario, mismo tono tierra más clarito, contraste AA sobre --bg/--panel */
  --accent: var(--wood-main); /* dorado/madera principal — reemplaza el verde de v2.1 como color de marca */
  --accent-dark: var(--wood-edge);
  --soft-green: #f7e3b8; /* alias retro-compatible (hovers/chips claros) — ahora un dorado suave, no verde */
  --peach: #e8a25e;
  --peach-dark: #b96a34;
  --warn: #e0a53a;
  --danger: #d6553b;
  --line: #c9924f; /* borde fino cálido, derivado de la madera */
  --happy: var(--accent);
  --radius-panel: 16px; /* tablones/carteles: esquinas más cuadradas que antes, menos "pill" */
  --radius-btn: 10px;
  --radius: var(--radius-panel);
  --shadow-soft: 0 3px 10px rgba(69, 35, 15, 0.22);
  --shadow-btn: 0 3px 0 var(--wood-edge); /* "canto" del botón de madera, se comprime al presionar */
  --wood-grad-raised: linear-gradient(180deg, var(--wood-highlight) 0%, var(--wood-light) 45%, var(--wood-main) 100%);
  --wood-grad-panel: linear-gradient(180deg, var(--wood-light) 0%, var(--wood-main) 100%);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; } /* nunca scroll horizontal, ni siquiera por un redondeo de 1px en algún componente */

/* Blindaje del atributo "hidden": varias reglas de acá abajo (.wake-btn,
 * .options-menu, etc.) declaran su propio "display"
 * para cuando SÍ están visibles, y esa declaración de autor le gana en
 * cascada a la hoja de estilos del navegador que pone display:none por
 * [hidden] — o sea que sin esto, un elemento "hidden" en el HTML igual se
 * mostraba. Con !important acá nos aseguramos de que hidden siempre gane
 * (cubre también los menús nuevos de esta entrega). */
[hidden] { display: none !important; }

/* Oculta visualmente pero deja leer por un lector de pantalla (la región
   de anuncios #live-status). No usar display:none/visibility:hidden ahí
   porque esos SÍ lo sacan también del árbol de accesibilidad. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Foco visible y consistente en todo lo interactivo. */
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;
}

/* Tamaño mínimo de 44px para cualquier control tocable (botones, swatches,
   inputs) — pedido de accesibilidad (sección 9), así nadie con dedos
   grandes o poca precisión motriz falla el toque en mobile. */
button, .swatch, input[type="text"], input[type="color"] {
  min-height: 44px;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.2em;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* Respeta la preferencia del sistema operativo/navegador automáticamente
     — sin selector manual en la interfaz. Frena las animaciones puramente
     decorativas (respirar, balanceo de brazos, temblor de ánimo crítico);
     el seguimiento de pupilas y la caminata siguen funcionando porque son
     parte de la interacción, no un adorno. */
  .game-stage,
  .brazo,
  .ropa-brazo,
  .pet-stage .pet-layer-orejas #oreja-izq,
  .pet-stage .pet-layer-orejas #oreja-der,
  .game-stage.mood-critico,
  .cloud {
    animation: none !important;
  }
  /* Las mangas quedan quietas junto con los brazos, con su escala. */
  .ropa-brazo { transform: scale(1.14); }
  /* Mismo criterio con los adornos de cuidado (rebote del juguete,
   * aparición de manchas/burbujas/corazones, el pulso de aviso en una
   * barra baja) y, nuevo en esta entrega, con la transición decorativa del
   * cambio de lugar y el destello de la puerta — nunca lo que sea la única
   * fuente de una info (los mensajes de texto/etiquetas siguen igual). */
  .dirt-item,
.speech-bubble,
.heart-pop,
.meter-track.meter-low,
.wellbeing-track.meter-low,
.options-menu,
.stage-floor {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  /* v4.6.2 hotfix: moscas, burbujas del baño y dormir NO se apagan con
   * movimiento reducido (en Windows, «Efectos de animación» desactivado lo
   * activa solo, y así parecía que no funcionaban). Son la única señal de
   * que está sucia / se está bañando / duerme, así que siguen animadas,
   * sólo un poco más lentas y suaves. */
  .fly-orbit, .fly-art { animation-duration: calc(var(--fly-t, 2.8s) * 1.6) !important; }
  .game-stage.sleeping { animation: sleep-breathe 5.5s ease-in-out infinite !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Encabezado ---------- */

.app-header {
  width: 100%;
  max-width: 1440px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  margin: 12px auto 8px;
  position: relative;
  box-sizing: border-box;
  /* v2.4: pedido explícito — se saca el borde, el border-radius y el
     box-shadow del encabezado (antes era un "tablón de madera superpuesto"
     con marco propio, ver historial abajo).
     v2.5: pedido explícito — también se saca el color de fondo (antes el
     degradé de madera). Queda transparente, apoyado directo contra el
     fondo de la página (--bg), sin cartel ni marco de ningún tipo. */
  background: none;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* v2.3: lockup compacto del logo oficial en el encabezado — símbolo
   (cabeza sola) + nombre extraído del arte original, ambos recortados del
   emblema fuente (logo_alpha.ai), nunca redibujados. Fondo/backing suave
   para que el dorado/crema del logo no choque contra --bg; una sola sombra
   exterior, sin brillos ni marcos extra encima del arte (pedido explícito). */
.brand-symbol {
  display: block;
  height: 44px;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(41, 62, 57, 0.18));
}
.brand-name-img {
  display: block;
  height: 20px;
  width: auto;
}
@media (max-width: 560px) {
  /* Mobile: sólo el símbolo + el texto accesible (.sr-only de al lado);
     el nombre-imagen se retira, no se lo aplasta ni recorta. */
  .brand-name-img { display: none; }
}
/* Título con Baloo 2 SemiBold (pedido explícito) — el link de Google
   Fonts está en index.html. Con fallback a la tipografía general de la
   app por si la fuente no llega a cargar (sin conexión, bloqueada, etc.). */
.app-header h1 {
  font-family: "Baloo 2", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0;
  color: var(--ink);
}
/* Insignia única "Alpha v2.1" (antes .badge + .version-badge por
   separado) — se actualiza a mano en index.html en cada entrega. */
.badge {
  background: var(--accent);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* v2.2: reloj del encabezado — el cálculo de hora (`new Date()`, un tick
   cada segundo, updateClock() en js/app.js) sigue vivo porque también
   decide si Casa/Jardín se ven de día o de noche (mismo lugar único de
   cálculo) — v2.5: pedido explícito, se sacó sólo el TEXTO visible del
   encabezado (#header-clock salió del HTML); .header-clock ya no se usa,
   se saca del CSS. */

/* Botón de icono solo (opciones, en el encabezado) — mismo lenguaje visual
   que el resto de los botones (radio chico, fondo claro), pero circular. */
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--wood-edge);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
  box-shadow: 0 2px 0 var(--wood-edge);
  transition: background 0.15s, transform 0.1s, box-shadow 0.1s;
}
.icon-btn .icon { width: 1.3em; height: 1.3em; }
.icon-btn:hover { background: var(--soft-green); }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--wood-edge); }
.icon-btn[aria-expanded="true"] { background: var(--soft-green); border-color: var(--accent); }

/* Menú de opciones (sección 6/7): popover anclado al botón de engranaje —
   agrupa Editar mascota + Modo prueba (preferencias/herramientas) y deja
   Reiniciar progreso separado y marcado como acción destructiva. Se cierra
   con Escape, con un click afuera, o al elegir una opción; el foco vuelve
   a #btn-opciones al cerrar (ver js/app.js, setupOptionsMenu). */
.options-menu {
  position: absolute;
  top: 100%;
  right: 16px;
  margin-top: 6px;
  /* v2.3: "ventana tipo cartel de madera" — marco degradé madera, interior
     de pergamino claro (misma técnica de borde-en-degradé que .wood-frame
     más abajo, escrita a mano acá porque este panel ya tenía su propio
     padding/posición). */
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--wood-grad-panel) border-box;
  border: 4px solid transparent;
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-soft), 0 10px 24px rgba(69, 35, 15, 0.28);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  z-index: 20;
  animation: menu-in 0.16s ease-out;
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.options-menu-item {
  background: none;
  border: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
.options-menu-item:hover { background: var(--soft-green); }
.options-menu-danger { color: var(--danger); }
.options-menu-danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
.options-menu-sep {
  border: none;
  border-top: 1px solid var(--line);
  margin: 4px 2px;
}

.screen {
  width: 100%;
  max-width: 760px;
  padding: 12px 16px 40px;
}
/* La pantalla de JUEGO usa un contenedor más ancho (sección 6: "contenedor
   centrado ~1200–1440px máx") para el layout de 2 columnas de escritorio.
   v2.6: la de personalización pasa a usar el mismo ancho — pedido
   explícito, "que la escena [de creación] tenga el mismo tamaño que la
   escena del juego" — así el escenario de personalización (.creator-
   layout, más abajo) puede llegar a los mismos 960px que .stage-col en
   vez de quedar atado al ancho angosto de antes (760px). El nombre y el
   título se quedan angostos y centrados con su propio ancho (.name-field
   más abajo), no todo el contenido de la pantalla necesita ser ancho. */
.screen.game, .screen.onboarding {
  max-width: 1440px;
}

/* ---------- Escenario de la mascota (capas SVG apiladas) ---------- */

.pet-stage {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0 auto;
}
.pet-stage .pet-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.game-stage {
  width: 280px;
  height: 280px;
  /* Ancla la animación de respiración abajo (donde están las patas), para
     que el "pecho" suba un poco pero la mascota no parezca flotar sobre
     el piso. */
  transform-origin: 50% 100%;
  /* v4.7: idle = balanceo lateral lento desde los pies (antes: bob scaleY). */
  animation: idleSway 2s ease-in-out infinite;
  cursor: url("../assets/ui/cursors/default.png") 2 1, default; cursor: -webkit-image-set(url("../assets/ui/cursors/default.png") 1x, url("../assets/ui/cursors/default@2x.png") 2x) 2 1, default;
}
@keyframes idleSway {
  0%, 100% { rotate: -0.9deg; }
  50% { rotate: 0.9deg; }
}
@keyframes bob {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.025); }
}
.game-stage.mood-critico { animation: shake 0.5s ease-in-out infinite; }
@keyframes shake {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(-4px) translateY(-2px); }
  75% { transform: translateX(4px) translateY(-2px); }
}

/* Escenario donde camina la mascota. La franja de piso queda marcada por
   el propio dibujo de cada lugar (zócalo en Casa, franja de pasto en
   Jardín — ver .location-casa/.location-jardin más abajo), ya no por una
   línea CSS genérica como en versiones anteriores. #walker es quien se
   mueve de lado a lado (ver js/app.js, walkFrame) — el bob/shake de arriba
   sigue viviendo en .game-stage, así que ambos movimientos (caminar +
   respirar) se combinan sin pisarse.
   v2.1: preferentemente 16:9 en TODOS los tamaños (antes era 260px fijo en
   mobile y sólo pasaba a 16:9 desde 768px) — pedido explícito, "tamaño
   suficiente para apreciar expresiones... no fijar proporciones que
   vuelvan diminuto el personaje en pantallas intermedias". */
.stage-floor {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  margin-top: 4px;
  background: var(--panel);
  /* v2.3: marco de madera MODERADO alrededor del escenario (pedido
     explícito) — borde sólido, en vez de un degradé de fondo (el fondo lo
     sigue controlando por completo cada .location-casa/.location-jardin,
     no se toca acá). No cubre ninguna zona clickeable: es sólo el borde.
     v2.4: pedido explícito — se sacan el border-radius y el box-shadow
     (el borde de madera en sí queda, sólo se pidió sacar esos dos). */
  border: 7px solid var(--wood-main);
  overflow: hidden;
  transition: opacity 0.32s ease;
}
/* Transición breve al cambiar de lugar (sección 4/9: "transición breve",
   250–400ms) — goToLocation() en js/app.js le agrega esta clase un
   instante mientras cambia el fondo. */
.stage-floor.location-fading { opacity: 0.15; }

/* ---------- Casa y Jardín: lugares navegables (sección 4) ---------- */
/* El fondo de la casa se compone en #housing-scene. */

/* Fondo de respaldo mientras cargan pared y piso. */
.stage-floor.location-casa {
  background: #ffefd5;
}
/* v2.2: pediste que el Jardín "vuelva a ser como antes" — el rediseño de
   v2.1 (cerca + arbustos + flores + fachada de casa, paleta marfil/verde)
   quedaba feo — así que esto vuelve al planteo simple de v1.2/v1.8: cielo
   celeste + pasto verde + sol + nubes, sin la decoración nueva. Se suma,
   sí, la variante de noche que no existía antes (pedido nuevo): la app
   alterna sola la clase .is-night sobre #stage-floor según la hora real
   de la PC (ver updateClock() en js/app.js), de día se ve el sol y de
   noche la luna + estrellas. */
.stage-floor.location-jardin {
  background: linear-gradient(to bottom, #bfe7f6 0%, #cdeaf6 55%, #9ed488 55%, #7fc86c 100%);
  transition: background 0.6s ease;
}
.stage-floor.location-jardin.is-night {
  background: linear-gradient(to bottom, #131b34 0%, #1c2a4d 55%, #2c4a34 55%, #1d3524 100%);
}
.location-jardin .sun {
  position: absolute;
  top: 8%;
  right: 10%;
  width: 15%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff3c4 0%, #ffd357 55%, #ffc12e 100%);
  box-shadow: 0 0 26px 6px rgba(255, 195, 60, 0.4);
}
.location-jardin .moon {
  position: absolute;
  top: 8%;
  right: 12%;
  width: 10%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fdfdf6 0%, #e6e6de 65%, #cfcfc4 100%);
  box-shadow: 0 0 16px 4px rgba(220, 220, 240, 0.3);
  display: none;
}
.location-jardin .star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.85;
  display: none;
}
.location-jardin .star-1 { top: 14%; left: 20%; }
.location-jardin .star-2 { top: 22%; left: 34%; }
.location-jardin .star-3 { top: 12%; left: 46%; }
.location-jardin .star-4 { top: 28%; left: 58%; }
.stage-floor.location-jardin.is-night .sun { display: none; }
.stage-floor.location-jardin.is-night .moon,
.stage-floor.location-jardin.is-night .star { display: block; }
.stage-floor.location-jardin.is-night .cloud { opacity: 0.35; }

.location-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Tinte nocturno de toda la escena, incluidas las decoraciones. */
#scene-noche-overlay {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.stage-floor.location-casa.is-night #scene-noche-overlay {
  opacity: 0.4;
}
#scene-puerta {
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
  pointer-events: auto;
  transition: fill-opacity 0.15s ease;
}
#scene-puerta:hover { filter: brightness(1.08); }
/* v2.2: se sacó la puerta dibujada (y su zona interactiva #door-hotspot) —
   pedido explícito: "que sólo se entre y salga de su casa a través del
   botón Salir a...". La navegación Casa↔Jardín ahora depende únicamente
   de #btn-nav (ver stage-controls, más abajo). */

/* Jardín: nubes, sol/luna + estrellas, y la franja de pasto transitable
   más clara donde camina la mascota (vuelta al diseño simple de antes de
   v2.1, ver comentario junto a .stage-floor.location-jardin más arriba). */
/* Nubes: cada una su propio elemento (así cada una puede tener su propia
   posición/tamaño/velocidad de deriva sin pisarse), agregadas como
   <span class="cloud cloud-N"> — sólo se insertan en el DOM cuando el
   lugar actual es Jardín (ver renderLocationDeco en js/app.js), así que no
   necesitan ocultarse/mostrarse por CSS según el lugar. */
.cloud {
  position: absolute;
  height: 6.5%;
  aspect-ratio: 2.6 / 1;
  background: #fff;
  border-radius: 999px;
  opacity: 0.9;
  pointer-events: none;
  animation: cloudDrift linear infinite;
}
.cloud::before {
  content: "";
  position: absolute;
  top: -55%;
  left: 18%;
  width: 55%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
}
.cloud-1 { top: 14%; left: 6%; height: 7%; animation-duration: 11s; animation-delay: -2s; }
.cloud-2 { top: 26%; left: 40%; height: 5%; opacity: 0.8; animation-duration: 14s; animation-delay: -8s; }
.cloud-3 { top: 9%; left: 63%; height: 4.2%; opacity: 0.85; animation-duration: 9s; animation-delay: -5s; }
@keyframes cloudDrift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(14%); }
}
.location-jardin .location-deco::before {
  /* franja de pasto transitable, más clara que el resto para leerse como
     "el camino" (pedido explícito: "franja transitable claramente
     legible") — tono bien diferenciado del verde de fondo, no un matiz
     casi igual. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background: linear-gradient(to bottom, #c8e8a8 0%, #bce097 100%);
  box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.25) inset;
}
/* ---------- Navegación entre lugares (sección 4, ver también v2.2 arriba) ---------- */
/* v2.2: antes había además una zona interactiva dibujada como puerta
   (#door-hotspot) sobre el escenario; se sacó del todo — pedido
   explícito ("que sólo se entre y salga de su casa a través del botón
   Salir a..."). Ahora #btn-nav (más abajo) es la única forma de cambiar
   de lugar. */

/* v2.4: la etiqueta de ubicación (".location-label", un cartelito arriba
   del escenario con el nombre del lugar) se sacó del todo — pedido
   explícito: "se entiende la ubicación en la que están" con sólo mirar el
   fondo (Casa/Jardín), no hace falta el texto. El elemento se sacó del
   HTML directamente, así que no queda regla acá. */

/* v2.4: barra de acciones + botón de Salir/Entrar, ahora DENTRO del
   escenario (pedido explícito, antes vivían debajo en ".stage-controls").
   Superpuesta abajo del todo con un degradé oscuro para que los botones
   se sigan leyendo sobre cualquier fondo/hora del día. */
.stage-actions-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  /* v2.4 bugfix: NO usar "center" acá. Con overflow-x:auto + contenido
     más ancho que el contenedor, "justify-content:center" desplaza el
     scroll inicial al medio del contenido y deja la mitad izquierda en
     territorio de scroll NEGATIVO, que la mayoría de los navegadores
     directamente no dejan alcanzar (scrollLeft se clampea a >=0). Esos
     tiles quedan con getBoundingClientRect().x negativo, recortados por
     el overflow del contenedor, invisibles/no clickeables aunque el
     layout "diga" que están ahí (así se rompía el click en Alimentar en
     mobile, con <main id="game"> "tapando" el punto de click porque el
     tile ni siquiera se pintaba en esa posición). "flex-start" deja el
     scroll arrancando en 0 con el primer tile siempre visible y
     clickeable, y todo el resto alcanzable con scroll positivo. */
  justify-content: flex-start;
  /* Mejora progresiva: si el navegador entiende "safe center", centra el
     dock cuando entra completo (se ve mejor en desktop) pero sin volver a
     caer en el bug de arriba — "safe" evita el territorio de scroll
     negativo, cayendo a flex-start automáticamente si no entra todo. Si
     el navegador NO entiende "safe center" esta línea es inválida y se
     ignora entera, quedando el flex-start declarado arriba. */
  justify-content: safe center;
  gap: 8px;
  padding: 10px 8px 10px;
  background: linear-gradient(to top, rgba(69, 35, 15, 0.55) 0%, rgba(69, 35, 15, 0.16) 70%, transparent 100%);
  /* v2.4: pensado para que SIEMPRE quepa en una sola fila dentro del
     escenario (ahora que los botones viven adentro, no hay tanto lugar
     vertical como antes) — en vez de partirse en 2 filas y arriesgarse a
     recortarse contra el borde superior del escenario, se permite scroll
     horizontal (pulgar en mobile, rueda/trackpad en desktop) cuando no
     entran todos los tiles. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.stage-actions-row .actions {
  margin-top: 0;
  flex-wrap: nowrap;
}
/* Tiles un poco más chicos que en versiones anteriores (v2.3 los tenía
   afuera del escenario, con más lugar) para que entren cómodos superpuestos
   arriba del fondo sin tapar de más. flex-shrink:0 para que el scroll
   horizontal (arriba) mueva los tiles enteros en vez de achicarlos. */
.stage-actions-row .action-circle-wrap { width: 68px; flex-shrink: 0; }
.stage-actions-row .cooldown-ring { height: 68px; }
.stage-actions-row .action-circle .icon { width: 1.3rem; height: 1.3rem; }
.stage-actions-row .action-circle-caption { font-size: 0.64rem; }
/* Botón de Salir al jardín/Entrar a casa: mismo lenguaje visual que los
   tiles de cuidado (madera/dorado con bisel), para que se sienta parte del
   mismo dock en vez de un botón suelto aparte. */

/* ---------- Panel de bienestar dentro del escenario (v2.4/v2.5) ----------
 * v2.4: "dentro del juego deberían estar las necesidades del bienestar" —
 * círculo con la cabeza de la mascota arriba a la izquierda + una placa
 * con las 4 barras (Agua, Hambre, Higiene, Energía, en ese orden).
 * v2.5, pedido explícito, 4 cambios sobre eso:
 *  1) Todo el widget un poco más grande (avatar/barras/toggle).
 *  2) El borde del círculo es semáforo de felicidad (verde >50%, amarillo
 *     25%-50%, rojo <25% — ver updateWellbeingAvatar en js/app.js, que
 *     setea --avatar-border) y la carita adentro refleja ánimo/enfermedad
 *     con las MISMAS clases mood-X y sick que ya usa la mascota del juego
 *     (ver más abajo, junto a esas reglas en .game-stage).
 *  3) Las barras pasan a un acordeón oculto por defecto, en grilla 2x2
 *     (antes una columna de 4 filas), que se abre con un botón de flecha
 *     — apunta a la derecha cerrado, a la izquierda abierto (una sola
 *     flecha rotada 180° por CSS, no dos iconos).
 *  4) El nombre de la mascota vive debajo, en su propio recuadro (ver
 *     .wellbeing-name-box más abajo) — no es parte de este HUD, es un
 *     hijo del wrapper .wellbeing-widget que lo agrupa junto a él. */
.wellbeing-widget {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  /* v2.6: bug real encontrado al verificar en mobile — con .wellbeing-bars
     ahora siempre visible (ya no es un acordeón que arranca cerrado, ver
     más abajo), el widget completo mide bastante más alto que antes, y en
     escenarios angostos/bajos (esta placa NO se achica tanto como el
     escenario, ver stage-floor min-height:220px) llegaba a taparle el
     click a la puerta del fondo de la Casa (#scene-puerta), que queda
     bastante arriba dentro del dibujo. Nada acá adentro es clickeable
     (ni el avatar, ni las barras, ni el nombre), así que dejar pasar el
     puntero de largo es seguro y arregla la superposición para cualquier
     tamaño de pantalla, no sólo el que se probó. */
  pointer-events: none;
}
.wellbeing-avatar {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel);
  border: 4px solid var(--wood-edge);
  box-shadow: 0 2px 0 rgba(91, 42, 20, 0.4);
  transition: border-color 0.3s ease;
}
/* v2.6: pedido explícito — el color del borde va de la mano del mismo
   ánimo (mood-*) que ya maneja la carita de este mismo avatar, en vez de
   ser un valor fijo por JS: verde en el estado neutral/feliz, amarillo al
   "enojarse", y en el tramo más bajo una animación infinita que alterna
   amarillo-rojo hasta que la felicidad vuelva a subir (ver
   updateWellbeingAvatar() en js/app.js, que sólo pone/saca estas clases —
   el color y el parpadeo son 100% CSS). Enferma pisa todo lo anterior con
   su propia animación verde-azul, también en loop hasta que se cure. */
.wellbeing-avatar.avatar-border-feliz { border-color: #1fa616; }
.wellbeing-avatar.avatar-border-enojo { border-color: #a6a216; }
.wellbeing-avatar.avatar-border-critico {
  /* La transición de color de la regla base compite con la animación
     infinita (misma propiedad) — se apaga acá para que el parpadeo se
     vea limpio en vez de "amortiguado". */
  transition: none;
}
.wellbeing-avatar.avatar-border-critico { animation: avatar-border-critico 1.1s ease-in-out infinite; }
@keyframes avatar-border-critico {
  0%, 100% { border-color: #a6a216; }
  50% { border-color: #d12929; }
}
/* Recorte: la mascota se renderiza completa en un cuadrado 2x el círculo y
 * se desplaza para que sólo se vea la zona de la cabeza (misma matemática
 * para cualquier mascota, porque cabeza/ojos siempre están centrados en el
 * mismo lugar del viewBox 400x400). */
.wellbeing-avatar-stage {
  position: absolute;
  width: 144px;
  height: 144px;
  left: -36px;
  top: -22px;
  pointer-events: none;
}
/* v2.6: pedido explícito — sin border-radius ni borde (antes un borde
   transparente usado sólo para el truco de fondo en dos capas, que ya no
   hace falta sin borde) y box-shadow puntual en vez del "shadow-soft"
   genérico de siempre. */
.wellbeing-bars {
  margin-left: -14px;
  padding: 8px 12px 8px 26px;
  background: var(--panel);
  border: none;
  border-radius: 0;
  box-shadow: 2px 2px 0px rgb(10 10 10 / 50%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  min-width: 170px;
  animation: menu-in 0.16s ease-out;
}
.wellbeing-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.wellbeing-row .icon { width: 1.05em; height: 1.05em; color: var(--accent-dark); flex-shrink: 0; }
.wellbeing-track {
  flex: 1;
  height: 8px;
  background: var(--wood-shadow);
  border: 1px solid var(--wood-light);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.wellbeing-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.wellbeing-fill.meter-saciedad { background: var(--peach-dark); }
.wellbeing-fill.meter-hidratacion { background: #4f9bc4; }
.wellbeing-fill.meter-higiene { background: var(--accent); }
.wellbeing-fill.meter-energia { background: var(--warn); }
.wellbeing-track.meter-low { animation: meter-pulse 1.6s ease-in-out infinite; }
/* v2.6: pedido explícito — se saca el acordeón (antes acá vivía
   #wellbeing-toggle con el ícono "flecha") — .wellbeing-bars queda
   siempre visible, ver más arriba. */

/* Recuadro con el nombre, debajo del HUD. v2.6: pedido explícito — sin
   border-radius ni borde (antes un borde transparente usado sólo para el
   truco de fondo en dos capas); h2 con color fijo #313131 en vez de
   var(--ink). */
.wellbeing-name-box {
  background: var(--panel);
  border: none;
  padding: 3px 12px;
  box-shadow: var(--shadow-soft);
}
.wellbeing-name-box h2 {
  margin: 0;
  font-family: "Baloo 2", inherit;
  font-size: 1.05rem;
  color: #313131;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .wellbeing-avatar { width: 56px; height: 56px; }
  .wellbeing-avatar-stage { width: 112px; height: 112px; left: -28px; top: -17px; }
  .wellbeing-bars { min-width: 140px; padding: 6px 10px 6px 20px; gap: 4px 10px; }
  .wellbeing-track { height: 6px; }
  .wellbeing-name-box h2 { font-size: 0.92rem; max-width: 38vw; }
}

/* v2.2 — fix real: #walker no tenía `position` propio, así que quedaba en
   flujo normal del documento (ningún otro hijo de #stage-floor participa
   del flujo: label/deco/dirt/puerta son todos position:absolute) y se
   ubicaba pegado ARRIBA del escenario en vez de sobre el piso — la
   mascota "flotaba" en la parte de arriba de la tarjeta en vez de
   caminar sobre el pasto/piso dibujado abajo. El translateX que ya le
   pone js/app.js (walkFrame) sólo la corría de lado a lado, nunca la
   bajó. Fix: ancla el bloque completo (mascota + sombra, ambos viven
   adentro) al borde inferior real de #stage-floor. */
.walker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

@media (min-width: 768px) {
  .walker {
    width: max(200px, 31.25%);
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .walker .game-stage {
    width: 100%;
    height: 100%;
  }
}

/* Balanceo idle de los brazos: mismo ciclo, desfasado entre izquierdo y
   derecho para que no se muevan como espejo perfecto. */
@keyframes armSwing {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
/* v4.7: los brazos cuelgan y siguen el balanceo del cuerpo con un leve retraso. */
.brazo { animation: armSwing 2s ease-in-out infinite; animation-delay: 0.25s; }

/* v4.7: saludo ocasional en idle (js/app.js, scheduleIdleWave). */
@keyframes waveBody { 0%, 100% { rotate: 0deg; } 15%, 85% { rotate: -8deg; } }
@keyframes waveHead { 0%, 100% { rotate: 0deg; } 18%, 82% { rotate: -10deg; } }
/* v4.7: brazo cortito estilo Pet Society — se saluda al costado, a la
   altura del hombro (más arriba la mano queda tapada por la cabeza). */
@keyframes waveArm {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(-68deg); }
  28% { transform: rotate(-50deg); }
  38% { transform: rotate(-72deg); }
  48% { transform: rotate(-50deg); }
  58% { transform: rotate(-72deg); }
  68% { transform: rotate(-50deg); }
  85% { transform: rotate(-62deg); }
}
.game-stage.is-waving { animation: waveBody 2.3s ease-in-out; }
.game-stage.is-waving .pet-layer-cabeza,
.game-stage.is-waving .pet-layer-orejas,
.game-stage.is-waving .pet-layer-cejas,
.game-stage.is-waving .pet-layer-ojos,
.game-stage.is-waving .pet-layer-narices,
.game-stage.is-waving .pet-layer-boca,
.game-stage.is-waving .pet-layer-clothing-accessory { animation: waveHead 2.3s ease-in-out; }
.game-stage.is-waving #brazo-der,
.game-stage.is-waving .ropa-brazo-der { animation: waveArm 2.3s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .game-stage, .game-stage .brazo, .game-stage.is-waving * { animation: none !important; }
}

/* Brazos, piernas, cabeza y orejas toman el color de cuerpo elegido
   (variable seteada en js/app.js al renderizar), así siempre matchean sin
   necesitar un SVG por color — sólo la capa base de cabeza/orejas
   (class="cabeza-base"/"oreja-base") toma este color; el contorno/
   sombreado y el interior rosado de las orejas quedan fijos. */
/* v4.7: sólo la forma base; encima van el volumen y el contorno, que no toman color. */
.pet-stage .brazo-base, .creator-icon-svg .brazo-base { fill: var(--pet-body-color, #6cb9dd); }
.pet-stage .pierna-base, .creator-icon-svg .pierna-base { fill: var(--pet-body-color, #6cb9dd); }
.pet-stage .cabeza-base, .creator-icon-svg .cabeza-base { fill: var(--pet-body-color, #6cb9dd); }
.pet-stage .oreja-base, .creator-icon-svg .oreja-base { fill: var(--pet-body-color, #6cb9dd); }
.pet-stage .cuerpo-base, .creator-icon-svg .cuerpo-base { fill: var(--pet-body-color, #6cb9dd); }
.pet-stage .borde-color, .creator-icon-svg .borde-color { stroke: var(--pet-body-color, #6cb9dd); }

/* Color de ojos (pedido explícito) — mismo mecanismo que el color de
   cuerpo de arriba, pero sólo en las opciones de ojos con pupila propia.
   v3.6: también se aplica dentro de .creator-icon-svg (miniaturas del
   selector de partes en la escena del creador, ver renderCreatorPartIcons
   en js/app.js), que no está anidado dentro de un .pet-stage real. */
.pet-stage .iris-main, .creator-icon-svg .iris-main { fill: var(--eye-color, #4c4c4c); }
.pet-stage .iris-shadow, .creator-icon-svg .iris-shadow { fill: color-mix(in srgb, var(--eye-color, #4c4c4c) 70%, black); }
.pet-stage .iris-highlight, .creator-icon-svg .iris-highlight { stroke: color-mix(in srgb, var(--eye-color, #4c4c4c) 55%, white); }
/* v3.6 (pedido explícito): "arreglar color de ojos: 4 (mantiene un marrón
 * claro que debería cambiar por el color seleccionado pero un poco más
 * claro)". Ese resalto de ojos-4 (antes fill fijo #ba8b58) era la ÚNICA
 * forma de la pupila sin clase de recoloreo — se le agrega esta, con la
 * MISMA mezcla que .iris-highlight de arriba (55% color + 45% blanco:
 * "un poco más claro" que el color principal), sólo que como fill en vez
 * de stroke porque acá es una forma rellena, no un trazo. */
.pet-stage .iris-highlight-fill, .creator-icon-svg .iris-highlight-fill { fill: color-mix(in srgb, var(--eye-color, #4c4c4c) 55%, white); }
/* v3.6 (pedido explícito): ojos-5 y ojos-6 son ilustraciones multi-tono
 * (no un iris simple de 2-3 colores) dibujadas enteramente en tonos de
 * violeta — pasan a responder al selector de color aplicando un filtro
 * de imagen (hue-rotate + saturate + brightness) sobre todo el grupo del
 * ojo, calculado en JS (ver getEyeTintFilter en js/app.js) a partir de la
 * relación entre el violeta original del dibujo y el color elegido. Esto
 * preserva la MISMA estructura de tonos claros/oscuros que ya tiene el
 * dibujo en violeta (pedido explícito: "tener en cuenta los tonos del
 * violeta para definir los tonos claros y oscuros de los otros colores")
 * en vez de recolorear path por path. Con violeta elegido el filtro queda
 * en "none" (el dibujo ya está en violeta, no hace falta tocarlo). */
.pet-stage .ojo-tintable, .creator-icon-svg .ojo-tintable { filter: var(--eye-tint-filter, none); }

/* La cabeza (y todo lo que va montado sobre ella: orejas, cejas, ojos,
   nariz, boca) se escala como grupo para que quede grande respecto al
   cuerpo, estilo chibi. */
.pet-stage .pet-layer-cabeza,
.pet-stage .pet-layer-orejas,
.pet-stage .pet-layer-cejas,
.pet-stage .pet-layer-ojos,
.pet-stage .pet-layer-narices,
.pet-stage .pet-layer-boca,
.pet-stage .pet-layer-bath-face {
  transform: scale(1.22);
  transform-origin: 50% 54%;
}
/* v4.7: vista en tres cuartos (estilo Pet Society). La cara se corre hacia
   la derecha 9 unidades del dibujo (11 ya escaladas = 2.75 %). Al caminar hacia la izquierda el
   juego espeja la mascota entera, así siempre mira hacia donde va. Va en
   transform (no en translate) porque los ojos 2 usan translate para mirar. */
.pet-stage .pet-layer-cejas,
.pet-stage .pet-layer-ojos,
.pet-stage .pet-layer-narices,
.pet-stage .pet-layer-boca,
.pet-stage .pet-layer-bath-face {
  transform: translate(2.75%, 0) scale(1.22);
}
/* La oreja de atrás queda un poco más chica y corrida hacia la cara. Las dos
   orejas se mecen desde su base, con retraso respecto del cuerpo. */
.pet-stage .pet-layer-orejas #oreja-izq,
.pet-stage .pet-layer-orejas #oreja-der {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: earSway 2s ease-in-out infinite;
  animation-delay: 0.45s;
}
.pet-stage .pet-layer-orejas #oreja-der { scale: 0.88; translate: -5px 0; }
@keyframes earSway {
  0%, 100% { rotate: -3deg; }
  50% { rotate: 4deg; }
}
/* Al caminar las orejas rebotan a contratiempo del paso. */
.game-stage.is-walking .pet-layer-orejas #oreja-izq,
.game-stage.is-walking .pet-layer-orejas #oreja-der { animation: earFlop 0.21s ease-in-out infinite alternate; animation-delay: -0.07s; }
@keyframes earFlop {
  from { rotate: 7deg; }
  to { rotate: -6deg; }
}

/* Sombra fija debajo de la mascota: color plano, sin desvanecido ni
   desenfoque, borde duro. Va como ::before de .pet-stage (se pinta antes
   que las capas del SVG) en vez de agregarla en JS. Le sirve tal cual a
   #preview-stage (personalización); para #game-stage hay una versión
   aparte más abajo (.pet-shadow), que no hereda el bob/shake del
   personaje. */
.pet-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 17%;
  width: 46%;
  height: 8%;
  background: rgba(41, 62, 57, 0.22);
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.walker .game-stage::before {
  content: none;
}
.pet-shadow {
  position: absolute;
  inset: 0;
}
.pet-shadow::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 17%;
  width: 46%;
  height: 8%;
  background: rgba(41, 62, 57, 0.22);
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Las pupilas y las piernas se mueven por JS (seguimiento de cursor y
   caminata orgánica, en js/app.js); esta transición es lo que las hace
   ver suaves en vez de saltar de un ángulo a otro. */
.pupila { transition: transform 0.12s ease-out; }

/* Ojos: la escala vertical de reposo (--eye-scale) la setea JS según
   causas puntuales (computeEyeScale en app.js) — 1 mientras está despierta
   y sana, igual que en el creador. El pestañeo (blinkStage) pisa este
   transform un instante con un inline style (scaleY casi 0). */
.pet-stage .ojo {
  transform: scaleY(var(--eye-scale, 1));
  transition: transform 0.09s ease-in-out;
}
.pierna { transition: transform 0.15s ease-out; }
/* v4.7: ciclo de paso (ver applyLegSwing en js/app.js). Mientras camina o
   corre, brazos y cuerpo los mueve JS: se apagan la respiración y el
   balanceo idle; translate/rotate se suavizan igual que las piernas. */
.game-stage { transition: translate 0.12s ease-out, rotate 0.2s ease-out; }
.game-stage.is-walking { animation: none; }
.game-stage.is-walking .brazo { animation: none; }
/* v4.6.7: las mangas seguían con su balanceo idle mientras caminaba (y sin
   el suavizado del brazo): ahora copian exactamente el giro del brazo. */
.game-stage.is-walking .ropa-brazo { animation: none; transform: scale(1.14); }
.game-stage .ropa-brazo { transition: rotate 0.15s ease-out; }
.game-stage .brazo, .game-stage .pet-layer { transition: rotate 0.15s ease-out; }
/* v4.6.11: las piernas se suavizaban con «ease-out» y el pantalón y el
   calzado con «ease»: con el paso recalculado en cada cuadro, cada pieza
   quedaba en un ángulo distinto (hasta ~7° de diferencia) y la tela se
   despegaba de la pata. Mientras camina, JS ya las mueve cuadro a cuadro:
   sin transición, pata, pantalón y calzado tienen siempre el mismo giro.
   En reposo vuelven a su lugar con la misma curva todas juntas. */
.pierna, .ropa-pierna, .ropa-calzado { transition: transform 0.15s ease-out; }
.game-stage.is-walking .pierna,
.game-stage.is-walking .ropa-pierna,
.game-stage.is-walking .ropa-calzado,
.game-stage.is-walking .brazo,
.game-stage.is-walking .ropa-brazo { transition: none; }

/* Expresiones faciales completas por ánimo — cejas + boca. Sólo se aplica
   en el escenario de JUEGO (.game-stage.mood-*): en la personalización no
   hay "ánimo" todavía. */
.pet-layer-cejas #ceja-izq,
.pet-layer-cejas #ceja-der,
.pet-layer-boca #boca-shape {
  transition: transform 0.35s ease-in-out;
}
/* v2.5: el avatar de bienestar (".wellbeing-avatar-stage") reutiliza estas
   mismas reglas de expresión — pedido explícito, "que su cara cambie como
   pasa a la mascota en el juego" — updateWellbeingAvatar() en js/app.js le
   pone las mismas clases mood-X y sick que ya recibe #game-stage. No se le
   agregó el "shake" de mood-critico (ver más abajo): en un círculo tan
   chico se ve más como un glitch que como una expresión. */
.game-stage.mood-feliz .pet-layer-cejas #ceja-izq,
.wellbeing-avatar-stage.mood-feliz .pet-layer-cejas #ceja-izq { transform: rotate(-8deg) translateY(-0.6px); }
.game-stage.mood-feliz .pet-layer-cejas #ceja-der,
.wellbeing-avatar-stage.mood-feliz .pet-layer-cejas #ceja-der { transform: rotate(8deg) translateY(-0.6px); }
.game-stage.mood-feliz .pet-layer-boca #boca-shape,
.wellbeing-avatar-stage.mood-feliz .pet-layer-boca #boca-shape { transform: scale(1.12, 1.35); }
.game-stage.mood-triste .pet-layer-cejas #ceja-izq,
.wellbeing-avatar-stage.mood-triste .pet-layer-cejas #ceja-izq { transform: rotate(11deg) translateY(0.8px); }
.game-stage.mood-triste .pet-layer-cejas #ceja-der,
.wellbeing-avatar-stage.mood-triste .pet-layer-cejas #ceja-der { transform: rotate(-11deg) translateY(0.8px); }
.game-stage.mood-triste .pet-layer-boca #boca-shape,
.wellbeing-avatar-stage.mood-triste .pet-layer-boca #boca-shape { transform: scale(0.92, -0.85); }
.game-stage.mood-critico .pet-layer-cejas #ceja-izq,
.wellbeing-avatar-stage.mood-critico .pet-layer-cejas #ceja-izq { transform: rotate(18deg) translateY(1.4px); }
.game-stage.mood-critico .pet-layer-cejas #ceja-der,
.wellbeing-avatar-stage.mood-critico .pet-layer-cejas #ceja-der { transform: rotate(-18deg) translateY(1.4px); }
.game-stage.mood-critico .pet-layer-boca #boca-shape,
.wellbeing-avatar-stage.mood-critico .pet-layer-boca #boca-shape { transform: scale(0.85, -1); }

/* v2.3: animación de apertura/cierre de boca (pedido explícito), atada
   SOLO a acciones puntuales (Comer/Beber/Hablar, y minijuegos como
   reacción de alegría) — nunca en bucle permanente. #boca-shape (arriba)
   sigue siendo lo único que mueve el ánimo; esto sólo cruza la opacidad
   entre #boca-closed y #boca-open (dos dibujos reales, ver
   js/manifest.js) adentro de #boca-anim, así que boca+ánimo quedan
   intactos y se combinan solos. Las clases .mouth-anim-* las pone/saca
   playMouthAnim()/stopMouthAnim() en js/app.js. */
.pet-layer-boca #boca-open { opacity: 0; }
.pet-layer-boca #boca-closed { opacity: 1; }

/* Comer: 2 ciclos cortos de masticado. */
.game-stage.mouth-anim-comer .pet-layer-boca #boca-closed { animation: mouth-bite-closed 0.45s ease-in-out 2; }
.game-stage.mouth-anim-comer .pet-layer-boca #boca-open { animation: mouth-bite-open 0.45s ease-in-out 2; }
@keyframes mouth-bite-closed { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes mouth-bite-open { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* Beber: una apertura chica y única (no llega a opacidad 1 llena, para
   que se lea más chica que el "bocado" de Comer). */
.game-stage.mouth-anim-beber .pet-layer-boca #boca-closed { animation: mouth-sip-closed 0.55s ease-in-out 1; }
.game-stage.mouth-anim-beber .pet-layer-boca #boca-open { animation: mouth-sip-open 0.55s ease-in-out 1; }
@keyframes mouth-sip-closed { 0%, 100% { opacity: 1; } 45% { opacity: 0.35; } }
@keyframes mouth-sip-open { 0%, 100% { opacity: 0; } 45% { opacity: 0.75; } }

/* Hablar: aperturas cortas y variadas mientras se ve el globo de
   diálogo — sin sincronía de audio, sólo variación de ritmo/tamaño. */
.game-stage.mouth-anim-hablar .pet-layer-boca #boca-closed { animation: mouth-talk-closed 0.95s ease-in-out infinite; }
.game-stage.mouth-anim-hablar .pet-layer-boca #boca-open { animation: mouth-talk-open 0.95s ease-in-out infinite; }
@keyframes mouth-talk-closed {
  0%, 100% { opacity: 1; }
  20% { opacity: 0.2; }
  38% { opacity: 1; }
  55% { opacity: 0.4; }
  72% { opacity: 1; }
  86% { opacity: 0.55; }
}
@keyframes mouth-talk-open {
  0%, 100% { opacity: 0; }
  20% { opacity: 0.85; }
  38% { opacity: 0; }
  55% { opacity: 0.65; }
  72% { opacity: 0; }
  86% { opacity: 0.5; }
}

/* Alegría (reacción de minijuego): una sonrisa-apertura breve, un solo
   pulso. */
.game-stage.mouth-anim-feliz .pet-layer-boca #boca-closed { animation: mouth-joy-closed 0.48s ease-out 1; }
.game-stage.mouth-anim-feliz .pet-layer-boca #boca-open { animation: mouth-joy-open 0.48s ease-out 1; }
@keyframes mouth-joy-closed { 0%, 100% { opacity: 1; } 40% { opacity: 0; } }
@keyframes mouth-joy-open { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  /* Las animaciones de boca son reacción visual, no la única fuente de
     info (el bocadillo/estado ya lo dice en texto) — se las frena igual
     que el resto de los adornos, y no queda "a medio abrir": ambas capas
     vuelven a su opacidad de reposo (cerrada visible, abierta oculta). */
  .game-stage.mouth-anim-comer .pet-layer-boca #boca-closed,
  .game-stage.mouth-anim-comer .pet-layer-boca #boca-open,
  .game-stage.mouth-anim-beber .pet-layer-boca #boca-closed,
  .game-stage.mouth-anim-beber .pet-layer-boca #boca-open,
  .game-stage.mouth-anim-hablar .pet-layer-boca #boca-closed,
  .game-stage.mouth-anim-hablar .pet-layer-boca #boca-open,
  .game-stage.mouth-anim-feliz .pet-layer-boca #boca-closed,
  .game-stage.mouth-anim-feliz .pet-layer-boca #boca-open {
    animation: none !important;
  }
}

/* ---------- Moscas cuando está sucia ----------
 * Beta v4.6.2: mosca ilustrada (assets/ui/fx/fly.svg, en línea desde JS)
 * y cantidad según la higiene: 4 (<15 %), 3 (15-35 %), 2 (35-50 %),
 * 1 (50-65 %). Dan vueltas alrededor de la cabeza en una órbita ovalada,
 * se dan vuelta según hacia dónde vuelan y aletean sin parar.
 * Estructura: .fly (óvalo) > .fly-orbit (vuelta) > .fly-art (mira hacia
 * donde va, sube y baja) > svg (alas). Tamaños en cqw del propio #flies. */
.flies {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  container-type: size;
}
.flies.visible { opacity: 1; }
.fly {
  position: absolute;
  top: var(--fly-top, 34%);
  left: 50%;
  width: 0;
  height: 0;
  transform: scaleY(0.62);
}
.fly[hidden] { display: none; }
.fly-orbit {
  position: absolute;
  animation: fly-orbit var(--fly-t, 2.8s) linear infinite var(--fly-dir, normal);
  animation-delay: var(--fly-delay, 0s);
}
.fly-art {
  position: absolute;
  width: 7.5cqw;
  height: 6.25cqw;
  margin: -3.1cqw 0 0 -3.75cqw;
  animation: fly-face var(--fly-t, 2.8s) step-end infinite var(--fly-dir, normal);
  animation-delay: var(--fly-delay, 0s);
}
.fly-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: fly-hover 0.9s ease-in-out infinite alternate;
}
.fly-wing-back,
.fly-wing-front { transform-box: view-box; animation: fly-flap 0.11s ease-in-out infinite alternate; }
.fly-wing-back { transform-origin: 44px 58px; }
.fly-wing-front { transform-origin: 60px 62px; animation-delay: -0.05s; }
.fly:nth-child(1) { --fly-r: 27cqw; --fly-t: 2.9s; --fly-top: 33%; }
.fly:nth-child(2) { --fly-r: 33cqw; --fly-t: 3.4s; --fly-top: 38%; --fly-dir: reverse; --fly-delay: -1.3s; --fly-face: -1; }
.fly:nth-child(3) { --fly-r: 22cqw; --fly-t: 2.5s; --fly-top: 29%; --fly-delay: -0.8s; }
.fly:nth-child(4) { --fly-r: 30cqw; --fly-t: 3.8s; --fly-top: 42%; --fly-dir: reverse; --fly-delay: -2.4s; --fly-face: -1; }
.fly:nth-child(2) .fly-art svg { animation-delay: -0.4s; }
.fly:nth-child(3) .fly-art svg { animation-delay: -0.7s; }
.fly:nth-child(4) .fly-art svg { animation-delay: -0.2s; }
/* rotate + translate + rotate inverso = sólo traslada (la mosca no gira);
   el scaleY del .fly la vuelve óvalo y el de .fly-orbit lo compensa. */
@keyframes fly-orbit {
  0%   { transform: rotate(0deg) translateX(var(--fly-r, 28cqw)) rotate(0deg) scaleY(1.613); }
  100% { transform: rotate(360deg) translateX(var(--fly-r, 28cqw)) rotate(-360deg) scaleY(1.613); }
}
/* Media vuelta de abajo va hacia la izquierda (mira como el dibujo);
   la de arriba va hacia la derecha (espejada). --fly-face corrige las que
   giran al revés. */
@keyframes fly-face {
  0%   { transform: scaleX(var(--fly-face, 1)); }
  50%  { transform: scaleX(calc(-1 * var(--fly-face, 1))); }
}
@keyframes fly-hover {
  from { transform: translateY(-1.5cqw) rotate(-6deg); }
  to   { transform: translateY(1.5cqw) rotate(5deg); }
}
@keyframes fly-flap {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(-9deg) scale(0.9, 0.82); }
}

/* ---------- Onboarding / personalización ---------- */

.onboarding h2 { text-align: center; font-family: "Baloo 2", inherit; }

/* v2.3: emblema completo del logo oficial, centrado arriba del título de
   personalización. Backing circular suave (no un marco extra: el logo ya
   trae su propio anillo) + una sola sombra exterior, para integrarlo sin
   competir con el marfil de fondo. Tamaño proporcional: 180px desktop,
   120px mobile (dentro del rango 160-200 / 110-140 pedido), con respiro
   propio via margin (>=10% de su ancho) sin empujar demasiado el resto. */
.brand-emblem {
  display: block;
  margin: 0 auto 20px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--panel) 62%, transparent 64%);
  filter: drop-shadow(0 4px 10px rgba(41, 62, 57, 0.16));
}
@media (max-width: 560px) {
  .brand-emblem { width: 120px; height: 120px; margin-bottom: 14px; }
}

/* v2.6: campo de nombre, pedido explícito — se pide ANTES del escenario
 * (ver orden en index.html) y queda angosto/centrado con su propio ancho
 * máximo, aunque .screen.onboarding ahora sea tan ancha como la del
 * juego (960-1440px) — no tendría sentido un input de una sola línea
 * estirado a lo ancho de toda la pantalla. */
.name-field {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.name-label {
  display: block;
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: left;
}
.name-input {
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 1rem;
  background: var(--panel);
  color: var(--ink);
}
/* Nombre obligatorio, mínimo 2 caracteres (pedido explícito) — ver
   isValidPetName()/submitOnboarding() en js/app.js. */
.name-input.input-error { border-color: var(--danger); }
.field-error {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--danger);
  text-align: left;
}

/* ---------- v2.4: creador/editor como "escenario" con pestañas ----------
 * Rediseño pedido explícito: reemplaza la vieja grilla de tarjetas
 * (.swatch-groups, todas las categorías visibles a la vez) — ahora es un
 * único escenario, del mismo tamaño/proporción que .stage-floor del
 * juego, con la mascota parada en el medio (idle + sigue el mouse con los
 * ojos, salvo al pasar por encima de su cara) y 7 pestañas de categoría
 * debajo (Color/Cabeza/Orejas/Ojos/Nariz/Boca/Cejas) que muestran de a una
 * las opciones de esa categoría. Ver buildCreatorTabs()/
 * renderCreatorPanel() en js/app.js.
 *
 * v2.6, pedido explícito: el escenario pasa a medir lo mismo que
 * #stage-floor del juego (mismo max-width 960px que .stage-col, ver
 * .screen.onboarding más arriba — antes estaba atado al ancho angosto de
 * .screen, 760px). La mascota (.creator-pet-pos) sube arriba del todo en
 * vez de vivir pegada abajo, para dejar lugar a un panel de controles
 * (#creator-controls, más abajo) que agrupa TODO lo que antes vivía
 * afuera del escenario — pestañas, opciones/colores y Guardar/Cancelar —
 * superpuesto abajo con un degradé oscuro, mismo lenguaje visual que
 * .stage-actions-row en el juego. */
.creator-stage-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  /* v2.5: pedido explícito — reemplaza el fondo sólido #ecd6a4 (v2.4) por
     el arte de cc-scene.ai, extraído fielmente con la misma técnica que
     el resto del arte vectorial del proyecto (ver HOME_SCENE_INLINE en
     js/manifest.js para el caso que sí necesita JS/CSS). Este fondo es
     puramente decorativo (sin partes clickeables ni color que cambie de
     día/noche), así que alcanza con un archivo estático + background-
     image — no hace falta pegarlo inline. El archivo comparte el mismo
     viewBox 1920x1080 (16:9) que este escenario, así que cover no
     recorta ni deforma nada. */
  background: var(--bg) url("../assets/backgrounds/cc-scene.svg") center / cover no-repeat;
  border: 7px solid var(--wood-main);
  overflow: hidden;
}
/* v3.6 (pedido explícito): "los selectores estén ubicados en un
 * rectángulo horizontal DENTRO de la escena donde está la mascota... en
 * la parte de abajo" — mismo lenguaje visual que .stage-actions-row en el
 * juego (degradé oscuro + scroll horizontal si no entran todas las
 * opciones). Ancla a #creator-stage-wrap (position:relative de siempre,
 * ver arriba) en vez de a .creator-controls, así queda DENTRO de la
 * escena y no del panel lateral — el "right" se ajusta por breakpoint
 * para no meterse debajo del panel lateral, igual que ya hace
 * .creator-random-btn más arriba (ver sus mismos anchos de panel en los
 * media queries de más abajo). */
.creator-part-icons {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-content: safe center;
  gap: 8px;
  padding: 10px 8px;
  background: linear-gradient(to top, rgba(69, 35, 15, 0.55) 0%, rgba(69, 35, 15, 0.16) 70%, transparent 100%);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.creator-icon-tile {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  padding: 4px;
  background: #fff8e8;
  border: 2px solid transparent;
  box-shadow: 0 2px 6px rgba(35, 25, 18, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
.creator-icon-tile.selected { border-color: #d98226; background: #ffedcf; }
.creator-icon-svg, .creator-icon-crop { width: 100%; height: 100%; }
.creator-icon-crop { position: relative; overflow: hidden; display: block; }
.creator-icon-crop img { position: absolute; max-width: none; }
/* v2.6: agrupa TODO lo que se pidió meter dentro del escenario — pestañas,
   panel de opciones/colores y los botones de Guardar/Cancelar — anclado
   abajo con un degradé oscuro (mismo criterio que .stage-actions-row en
   el juego) para que se siga leyendo sobre cualquier apariencia elegida
   de fondo. Column flex con la parte de opciones (.creator-panel) como
   único tramo con scroll propio (flex:1 + overflow-y:auto): así las
   pestañas de arriba y los botones de abajo quedan siempre a la vista
   aunque una categoría tenga muchas opciones (p.ej. Color, con 8
   swatches) y no entren todas en el alto disponible. */
/* v2.6 bugfix (verificación mobile): con 7 pestañas de categoría, en
   pantallas angostas "Boca"/"Cejas" se pasaban a una segunda fila y le
   comían la mitad de la altura disponible a #creator-controls (todo el
   panel de opciones quedaba reducido a una tira de ~20px, mostrando los
   swatches de color cortados a la mitad). Mismo criterio ya probado en
   .stage-actions-row: una sola fila con scroll horizontal en vez de
   partirse en 2 filas fijas, así el alto de las pestañas es siempre
   predecible (una fila) y el resto del alto queda para el panel. */
.creator-tabs {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 6px;
  justify-content: flex-start;
  justify-content: safe center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.creator-tab {
  font-family: inherit;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid var(--wood-edge);
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.82rem;
  flex-shrink: 0;
}
.creator-tab[aria-selected="true"] {
  background: var(--wood-grad-raised);
  color: var(--ink-dark);
  box-shadow: var(--shadow-btn);
}
.creator-tab:hover { background: var(--soft-green); }
.creator-tab[aria-selected="true"]:hover { background: var(--wood-grad-raised); }
/* Swatches: radio 12–16px (ya no círculos) — borde + check al
   seleccionar, en vez de sólo un aro de color (sección 8: "selección con
   borde+check"). */
.swatch {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 2px solid var(--line);
  outline: none;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
  background: var(--panel);
  transition: border-color 0.15s, transform 0.1s;
}
.swatch:hover { transform: translateY(-1px); }
.swatch.selected { border-color: var(--accent); border-width: 3px; box-shadow: 0 0 0 2px var(--wood-highlight); }
.swatch.selected::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 12.6l4.8 4.8L19.8 6.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  box-shadow: 0 0 0 2px var(--panel);
}

/* v3.4: colores "próximamente" (bodyColor con locked:true) — mismo swatch
   de color pero atenuado, con un candado encima y sin cursor de selección;
   sólo se ven al EDITAR una mascota ya creada, nunca al crearla, salvo
   para el Administrador (ver renderCreatorSwatchRow en js/app.js). */
.swatch-lock-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Círculos numerados para elegir la forma del cuerpo (1, 2, ...) en vez
   de un swatch de color, porque la forma no tiene color propio. */

/* v3.5: pedido explícito — "cambiar selector de opciones de partes por un
 * slider (menos los de color, mantenerlos)". Reemplaza la fila con TODAS
 * las opciones numeradas visibles a la vez por flechas ‹ › + la opción
 * actual (ver renderCreatorPartSlider en js/app.js); los colores
 * (bodyColor/ojosColor) no pasan por acá, siguen usando .swatch-row tal
 * cual. .is-slider centra el conjunto en vez de heredar el
 * justify-content de la fila normal de swatches. */

/* ---------- Botones ---------- */

.primary-btn,
.secondary-btn,
.action-circle {
  font-family: inherit;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
  border: none;
}
.primary-btn {
  width: 100%;
  padding: 12px;
  background: var(--wood-light);
  border: 2px solid var(--wood-edge);
  color: var(--ink-dark);
  font-family: "Baloo 2", inherit;
  font-size: 1rem;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 240, 205, 0.4);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.1s;
}
#onboarding-submit{
    font-size: 0.85rem;
    padding: 8px 14px;
}
.primary-btn:hover { filter: brightness(1.06); }
.primary-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--wood-edge); }
.primary-btn:disabled { opacity: 0.55; cursor: url("../assets/ui/cursors/not-allowed.png") 2 1, not-allowed; cursor: -webkit-image-set(url("../assets/ui/cursors/not-allowed.png") 1x, url("../assets/ui/cursors/not-allowed@2x.png") 2x) 2 1, not-allowed; filter: grayscale(0.3); }
.primary-btn:focus-visible { outline: 3px solid var(--wood-edge); outline-offset: 2px; }

.secondary-btn {
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--wood-edge);
  font-size: 0.85rem;
  color: var(--ink);
  font-weight: 600;
  transition: background 0.15s, transform 0.08s, box-shadow 0.08s;
}
.secondary-btn:hover { background: var(--soft-green); }
.secondary-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--wood-edge); }
.secondary-btn:disabled { opacity: 0.55; cursor: url("../assets/ui/cursors/not-allowed.png") 2 1, not-allowed; cursor: -webkit-image-set(url("../assets/ui/cursors/not-allowed.png") 1x, url("../assets/ui/cursors/not-allowed@2x.png") 2x) 2 1, not-allowed; box-shadow: none; }

/* ---------- Pantalla de juego: identidad ----------
 * v2.5: pedido explícito — se saca el renglón de arriba del escenario
 * (nombre + estado breve + nivel, antes ".game-top"). El nombre pasa a
 * ".wellbeing-name-box" (dentro del escenario, ver más abajo); el nivel
 * ("bond-chip") se muda dentro de #stage-floor arriba a la derecha (ver
 * regla más abajo); el estado breve (mood-caption) se saca del todo —
 * las necesidades/el ánimo ahora se cuentan con frases que la mascota va
 * diciendo (PET_REQUEST_PHRASES), no con un texto fijo. */

.alert-banner {
  background: color-mix(in srgb, var(--danger) 14%, var(--panel));
  color: color-mix(in srgb, var(--danger) 65%, black);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 10px 0 0;
  width: 100%;
  max-width: 1440px;
  box-sizing: border-box;
}

/* ---------- Panel de bienestar ----------
 * v2.4: las 4 barras principales se mudaron DENTRO del escenario del
 * juego (pedido explícito) — ver ".wellbeing-*" más arriba, junto a
 * .stage-floor. Acá sólo queda @keyframes meter-pulse, reutilizado por
 * ".wellbeing-track.meter-low" para el parpadeo de aviso en valores
 * bajos; el resto de las reglas viejas (.meters/.meter-row/.meter-label/…)
 * ya no las usa nada y se sacaron. */
@keyframes meter-pulse {
  0%, 100% { box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.45), 0 0 0 0 color-mix(in srgb, var(--danger) 35%, transparent); }
  50% { box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.45), 0 0 0 4px transparent; }
}

/* v2.5: pedido explícito — se saca del todo la fila de Felicidad/Salud
 * (antes ".secondary-indicators"/".indicator-chip", en el panel lateral
 * .side-col, ya eliminado). La felicidad ahora se ve en el borde y la
 * carita de #wellbeing-avatar (ver updateWellbeingAvatar en js/app.js) y
 * la salud, con el mismo efecto visual de enfermedad que ya tiene la
 * mascota del juego (misma clase "sick" aplicada también al avatar). */

/* Chip de vínculo (nivel) — v2.5: pedido explícito, se muda DENTRO de
 * #stage-floor, arriba a la derecha (antes vivía afuera del escenario,
 * junto al nombre). */
/* v2.6: pedido explícito — sin border-radius ni borde, y se saca el
   corazoncito decorativo (antes .bond-chip-icon) del HTML — queda sólo
   el texto de nivel + la barrita de progreso. */
.bond-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  border: none;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-dark);
  flex-shrink: 0;
  box-shadow: var(--shadow-soft);
}

/* ---------- Layout principal de la pantalla de juego (sección 6) ----------
 * v2.4: escenario ~70-75% + panel de bienestar en el resto (".side-col").
 * v2.5: pedido explícito — se sacó .side-col del todo (ver más arriba,
 * junto a .bond-chip/.wellbeing-*): ya no hay nada afuera del escenario,
 * así que .game-main queda con una sola columna y #stage-floor se centra
 * con un ancho máximo cómodo en vez de estirarse a todo el ancho
 * disponible en pantallas muy anchas ("centrar la escena del juego",
 * pedido explícito). */
.game-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 14px;
}
.stage-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  justify-content: center;
  flex-wrap: wrap;
}

/* v2.3: botones de acción — dejaron de ser círculos (pedido explícito:
   "no circulares para las cuidados primarios, lo circular queda para
   controles secundarios" — el círculo secundario es .icon-btn, arriba).
   Ahora son tablones de madera/dorado con bisel real (borde+luz arriba+
   sombra abajo) e icono+etiqueta corta, en vez de icono solo. Se
   mantuvieron EXACTAMENTE los mismos ids/clases que ya usaba JS
   (.action-circle-wrap, .cooldown-ring, .action-circle, .action-circle-*
   por acción, .cooldown-label) — createActionButton() en js/app.js no se
   tocó, sólo cambia lo que se ve. El aro de cooldown (conic-gradient) se
   reemplazó por una barrita de progreso embutida abajo del botón, mismo
   --pct que ya seteaba updateCooldownButtons(). */
.action-circle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 84px;
}
/* v2.5: ancho y alto del aro deben coincidir — .action-circle ahora es
   circular de verdad (border-radius:50%), así que si el aro no es
   cuadrado queda una elipse en vez de un círculo. */
.cooldown-ring {
  --pct: 0;
  position: relative;
  width: 100%;
  height: 84px;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 50%;
}
/* v2.5: pedido explícito — vuelven a ser circulares (como en v2.2), pero
   SIN el borde ni el box-shadow que sí tenían en aquel entonces: quedan
   planos, sólo el fondo madera/dorado + el icono, ahora que conviven
   directo sobre el fondo ilustrado del escenario (home-scene.ai) en vez
   de sobre el degradé oscuro genérico de antes.
   v2.6: pedido explícito — se saca también el fondo madera/dorado: queda
   sólo el icono, flotando directo sobre la barra de acciones (mismo
   degradé oscuro de .stage-actions-row detrás, que le sigue dando
   contraste). El color del icono pasa de --ink-dark (pensado para leerse
   sobre madera clara) a --wood-highlight, que se lee mejor sobre ese
   fondo oscuro ahora que no hay círculo propio debajo. */
.action-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--wood-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: filter 0.15s, transform 0.08s;
}
.action-circle .icon { width: 1.55rem; height: 1.55rem; }
.action-circle:hover:not(:disabled) { filter: brightness(1.15); }
.action-circle:active:not(:disabled) { transform: translateY(3px); }
.action-circle:disabled { opacity: 0.5; cursor: url("../assets/ui/cursors/not-allowed.png") 2 1, not-allowed; cursor: -webkit-image-set(url("../assets/ui/cursors/not-allowed.png") 1x, url("../assets/ui/cursors/not-allowed@2x.png") 2x) 2 1, not-allowed; filter: grayscale(0.25); }
.action-circle:focus-visible { outline: 3px solid var(--wood-highlight); outline-offset: 2px; }
/* Barra de cooldown embutida: track siempre presente (discreto) + relleno
   dorado que avanza con --pct — "en curso" sin tapar la etiqueta ni el
   icono. */
.cooldown-ring::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 4px;
  border-radius: 3px;
  background: var(--wood-shadow);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.cooldown-ring::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 5px;
  width: calc((100% - 20px) * var(--pct) / 100);
  height: 4px;
  border-radius: 3px;
  background: var(--wood-highlight);
  z-index: 2;
  transition: width 0.3s linear;
}
/* v2.5: todas las acciones compartían la misma superficie madera/dorado
 * (sin mezclar colores pastel por acción, como en v2.1) — v2.6: pedido
 * explícito de sacar ese fondo del todo (ver .action-circle más arriba),
 * así que esta regla queda sin nada que aportar; se deja comentada la
 * lista de selectores por si en algún momento se pide volver a distinguir
 * cada acción con un tinte propio. */
.action-circle-caption {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
/* Segundos restantes en formato "Xs", debajo del botón — sólo tiene
   contenido mientras hay cooldown activo. */
.cooldown-label {
  font-size: 0.72rem;
  color: var(--muted);
  min-height: 1.1em;
}

.app-footer {
  margin-top: auto;
  padding: 20px;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Menús de tarjetas: Alimentar / Afecto (sección 3/6/7) ----------
 * Popover anclado con tarjetas — icono ilustrado, nombre, descripción
 * corta. Sin inventario ni cantidad: son acciones siempre disponibles
 * (cooldown propio, no un "stock"). */
/* Advertencia comprensible sobre exceso de golosinas (sección 7) — fija
   dentro del menú de comida, no sólo un mensaje que aparece después de
   haber abusado. */

/* ---------- Manchas del entorno ---------- */
.dirt-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.dirt-item {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
  box-shadow: 0 2px 6px rgba(41, 62, 57, 0.22);
  animation: dirt-pop 0.25s ease-out;
}
.dirt-item:hover { transform: translate(-50%, -50%) scale(1.12); }
@keyframes dirt-pop {
  from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ---------- Jugar: el juguete a atrapar ---------- */

/* ---------- Globo de diálogo ---------- */
/* v2.6: pedido explícito — el globo aparece con fade in (ya lo hacía,
   bubble-in) y ahora también desaparece con un fade out, flotando hacia
   arriba desde la cabeza (top:34px ya lo posiciona justo arriba de la
   mascota dentro de #walker) en vez de cortarse en seco. La clase
   .speech-bubble-hide (agregada por showBubble() en js/app.js antes de
   ocultarlo de verdad) pisa la animación de entrada con bubble-out —
   misma propiedad, selector más específico (dos clases). */
.speech-bubble {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  max-width: 80%;
  text-align: center;
  box-shadow: 0 4px 14px rgba(41, 62, 57, 0.16);
  z-index: 5;
  animation: bubble-in 0.2s ease-out;
}
.speech-bubble.speech-bubble-hide {
  animation: bubble-out 0.42s ease-in forwards;
}
@keyframes bubble-in {
  from { transform: translateX(-50%) translateY(-6px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes bubble-out {
  from { transform: translateX(-50%) translateY(0); opacity: 1; }
  to { transform: translateX(-50%) translateY(-28px); opacity: 0; }
}

/* ---------- Baño ----------
 * Beta v4.6.2: espuma sobre la cabeza y el cuerpo que aparece de a poco,
 * burbujas que suben y la mascota que se sacude. Antes eran dos puntitos
 * de 10-14 px al pie del personaje (pensados para la mascota de 200 px):
 * con la mascota grande casi no se veían. Tamaños en cqw del propio
 * .bath-fx, así escala con cualquier mascota (también las remotas). Las
 * burbujas las arma bathFxMarkup() en js/app.js. */
.bath-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  container-type: size;
}
.bath-fx.bathing { opacity: 1; }
.bath-fx i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  /* Hotfix 2: pompa de jabón transparente — casi sin relleno, borde fino
     y un brillito arriba a la izquierda. */
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.95) 0 12%, rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 58%, rgba(170, 215, 245, 0.4) 80%, rgba(255, 255, 255, 0.7) 100%);
  box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.75), 0 0 0 0.18cqw rgba(110, 170, 215, 0.5);
  opacity: 0;
  transform: scale(0);
}
.bath-fx i.bath-rise { box-shadow: inset 0 0 0 0.2cqw rgba(255, 255, 255, 0.7); }
.bath-fx.bathing i.bath-foam { animation: bath-foam 1.9s ease-out var(--d) both; }
.bath-fx.bathing i.bath-rise { animation: bath-rise 1.3s ease-in var(--d) both; }
@keyframes bath-foam {
  0% { opacity: 0; transform: scale(0); }
  14% { opacity: 1; transform: scale(1.12); }
  22% { transform: scale(0.94); }
  30%, 72% { opacity: 1; transform: scale(1); }
  82% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes bath-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -34cqh) scale(1.1); }
}
/* v4.6.3: mientras se baña la mascota se queda quieta (sin sacudirse ni
   respirar) y pone cara de «> <»: los ojos y la boca propios se esconden
   y se muestra la capa .pet-layer-bath-face (boca 1 + ojos en «> <», con
   el mismo grosor de trazo que la boca). La arma setBathFace() en app.js. */
.pet-stage.is-bath-face { animation: none !important; }
.pet-stage.is-bath-face * { animation: none !important; }
.pet-stage.is-bath-face .ropa-brazo { transform: scale(1.14); }
.pet-stage.is-bath-face .pet-layer-ojos,
.pet-stage.is-bath-face .pet-layer-boca { visibility: hidden; }
.pet-layer-bath-face { pointer-events: none; }

/* ---------- Dormir: postura + "Zzz" flotando ----------
 * Beta v4.6.2: las Z salen de arriba de la cabeza (antes flotaban lejos,
 * a la derecha, en letra chica gris) y son más grandes, azules con borde
 * blanco como el ícono de la ficha. Suben en diagonal meciéndose. */
.zzz-fx {
  position: absolute;
  left: 60%;
  top: 4%;
  width: 34%;
  height: 32%;
  display: none;
  pointer-events: none;
  container-type: size;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  line-height: 1;
  color: #5d74d6;
}
#walker:has(.game-stage.sleeping) .zzz-fx,
#walker.is-sleeping .zzz-fx,
.remote-player-walker.is-sleeping .zzz-fx,
.visit-host-walker.is-sleeping .zzz-fx {
  display: block;
}
.zzz-fx span {
  position: absolute;
  left: 4%;
  bottom: 6%;
  -webkit-text-stroke: 4cqw #ffffff;
  paint-order: stroke fill;
  text-shadow: 0 2cqw 0 rgba(40, 50, 110, 0.18);
  animation: zzz-float 3.3s ease-in-out infinite;
  opacity: 0;
}
.zzz-fx span:nth-child(1) { font-size: 24cqw; animation-delay: 0s; }
.zzz-fx span:nth-child(2) { font-size: 32cqw; animation-delay: 1.1s; }
.zzz-fx span:nth-child(3) { font-size: 40cqw; animation-delay: 2.2s; }
@keyframes zzz-float {
  0% { transform: translate(0, 0) rotate(-8deg) scale(0.6); opacity: 0; }
  18% { opacity: 1; }
  45% { transform: translate(24cqw, -30cqh) rotate(8deg) scale(0.85); }
  75% { opacity: 1; }
  100% { transform: translate(48cqw, -64cqh) rotate(-6deg) scale(1); opacity: 0; }
}
/* v2.4: el botón de Despertar dejó de ser un botón aparte (".wake-btn") —
   pedido explícito: "el botón de despertar debería ser el mismo que
   dormir, sólo que alternar". Ahora el mismo tile de "Dormir" en el dock
   de acciones cambia de ícono/etiqueta a "Despertar" cuando corresponde
   (ver updateSleepToggle() en js/app.js) — se reutiliza el estilo de
   .action-circle de siempre, no hace falta una clase nueva. */

/* Postura dormida: ojos casi cerrados (--eye-scale lo maneja JS), y la
 * respiración/temblor decorativos se frenan. */
/* Beta v4.6.2: durmiendo ya no queda congelada: respira lento y profundo,
 * con la cabeza apenas caída hacia un costado y los brazos quietos. */
.game-stage.sleeping { animation: sleep-breathe 4.4s ease-in-out infinite; }
.game-stage.sleeping .brazo { animation: none; transform: rotate(4deg); }
.game-stage.sleeping #brazo-der { transform: rotate(-4deg); }
/* Hotfix v4.6.3: las mangas de la ropa seguían balanceándose mientras los
   brazos quedaban quietos. Ahora copian la misma pose (con su escala). */
.game-stage.sleeping .ropa-brazo { animation: none; transform: rotate(4deg) scale(1.14); }
.game-stage.sleeping .ropa-brazo-der { transform: rotate(-4deg) scale(1.14); }
@keyframes sleep-breathe {
  0%, 100% { transform: rotate(-2.5deg) scale(1, 1); }
  45% { transform: rotate(-2deg) scale(1.012, 1.04); }
}
.game-stage.sleeping .pet-layer-cejas #ceja-izq,
.game-stage.sleeping .pet-layer-cejas #ceja-der { transform: rotate(4deg) translateY(0.5px); }

/* Corazones/destellos al acertar en un minijuego — <span> chicos que agrega/saca JS
 * (popHearts) sobre #walker. */
.heart-pop {
  position: absolute;
  top: 30%;
  font-size: 1.1rem;
  pointer-events: none;
  animation: heart-float 1.3s ease-out forwards;
}
@keyframes heart-float {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(-60px) scale(1.15); opacity: 0; }
}

/* ---------- Modo prueba / debug ----------
 * Oculto por defecto; se activa desde el menú de Opciones del encabezado
 * ("Modo prueba"). No es parte de la jugabilidad normal — pensado para
 * poder validar el juego sin esperar horas reales. */
.debug-panel {
  max-width: 1440px;
  width: 100%;
  margin: 12px auto 0;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: left;
  font-size: 0.8rem;
  box-sizing: border-box;
}
.debug-title { font-weight: 700; margin: 0 0 8px; }
.debug-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.debug-row span:first-child { min-width: 90px; }
.debug-val { min-width: 28px; text-align: right; color: var(--muted); }
.debug-row button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
  font-size: 0.75rem;
}

/* ---------- Responsive / accesibilidad (sección 9) ----------
 * Angostas: una sola columna (ya es el comportamiento por defecto de
 * .game-main y .onboarding-layout arriba de 900px se hacen "row"), acciones
 * en dos filas si no entran todas (flex-wrap ya lo permite). Verificado
 * sin scroll horizontal desde 360px. */
@media (max-width: 480px) {
  .app-header { padding: 10px 12px; }
  .screen { padding: 10px 12px 32px; }
  /* v2.4: la barra de acciones se mudó DENTRO del escenario (pedido
     explícito, ver .stage-actions-row más arriba) — ahí ya queda en una
     sola fila con scroll horizontal en vez de partirse en 2 filas fijas
     como antes (no hay margen vertical de sobra dentro del escenario para
     una segunda fila). Acá sólo se achican un poco más los tiles para que
     entren más juntos y haga falta menos scroll en pantallas angostas. */
  .stage-actions-row { gap: 6px; padding: 8px 6px 8px; }
  .stage-actions-row .action-circle-wrap { width: 58px; }
  /* v2.5: el aro circular necesita el mismo alto que el ancho del wrap
     (58px) para seguir siendo un círculo — .nav-btn-tile no es circular,
     así que sigue con su propio alto de siempre (52px), por separado. */
  .stage-actions-row .cooldown-ring { height: 58px; }
  .stage-actions-row .action-circle .icon { width: 1.15rem; height: 1.15rem; }
  .stage-actions-row .action-circle-caption { font-size: 0.58rem; }
  .options-menu { right: 8px; left: 8px; min-width: 0; }
  /* v2.6: panel de controles de personalización (pestañas + opciones +
     Guardar/Cancelar) más compacto en mobile, para que le quede lugar de
     sobra a la mascota arriba. */
  .creator-tab { padding: 6px 12px; font-size: 0.76rem; }
}

/* v2.3: el tema de madera/dorado es un solo look intencional (como
   cualquier videojuego con arte propio) — ya no cambia de paleta con el
   modo oscuro del sistema, así que no hay un segundo juego de --bg/--panel/
   --ink acá. Lo único que sigue dependiendo de prefers-color-scheme es el
   fondo del ESCENARIO (casa/jardín), que es arte de ambientación, no
   "chrome" de interfaz. */
@media (prefers-color-scheme: dark) {
  /* v2.5: la Casa ya no tiene una variante de modo oscuro propia — el
     fondo ahora es el arte real de home-scene.ai (fijo, como el resto de
     la ilustración del juego), no un gradiente CSS que pudiera redefinirse
     acá. La única variante de día/noche que le queda es is-night (ver
     más arriba, junto a #scene-puerta). */
  .stage-floor.location-jardin {
    background: linear-gradient(to bottom, #16232a 0%, #172a25 58%, #172a25 62%, #234a30 62%, #1d3d28 100%);
  }
}

/* ======================================================================
   v2.7 — Rediseño UX/UI: Mascotito como videojuego browser full-screen
   ====================================================================== */
:root {
  --ui-cream: #fff8e8;
  --ui-cream-2: #f9ecd0;
  --ui-orange: #d98226;
  --ui-orange-dark: #a64e16;
  --ui-brown: #4b2b18;
  --ui-navy: #17233f;
  --ui-green: #43a957;
  --ui-blue: #48a9df;
  --ui-yellow: #efb533;
  --ui-purple: #8b68c9;
  --ui-pink: #dd6d85;
  --ui-shadow: 0 14px 34px rgba(32, 22, 12, .22);
  --ui-border: rgba(166, 78, 22, .72);
  font-family: "Baloo 2", "Segoe UI", sans-serif;
}

body {
  min-height: 100dvh;
  background: #f4ead2;
  align-items: stretch;
}

/* Header / HUD superior */
.app-header {
  max-width: none;
  min-height: 76px;
  margin: 0;
  padding: 10px clamp(14px, 2.4vw, 42px);
  background: rgba(255, 248, 232, .96);
  border-bottom: 1px solid rgba(166, 78, 22, .16);
  box-shadow: 0 6px 22px rgba(61, 36, 17, .10);
  z-index: 60;
  gap: 18px;
}
.brand { flex-shrink: 0; }
.brand-symbol { height: 50px; }
.brand-name-img { height: 24px; }
.badge { background: var(--ui-orange); box-shadow: inset 0 1px rgba(255,255,255,.25); }

.header-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.header-level-fill { width:0; height:100%; background:linear-gradient(90deg,#efa336,#d87820); border-radius:inherit; transition:width .35s ease; }

.icon-btn {
  background: #fffaf0;
  border: 1px solid #e3caa5;
  box-shadow: 0 4px 12px rgba(69,35,15,.10);
}

/* Pantalla juego: ocupa la ventana y deja de parecer un iframe chico */
.screen.game {
  width: 100%;
  max-width: none;
  flex: 1;
  padding: 14px clamp(12px, 1.5vw, 24px) 18px;
}
.game-main { margin-top: 0; gap: 0; }
.stage-col { max-width: 1640px; width: 100%; margin: 0 auto; }
.stage-floor {
  width: 100%;
  height: calc(100dvh - 110px);
  /* v3.6.3 (pedido explícito): "responsive desktop, que el alto/ancho no
     exceda lo que entra en el browser" — antes 620px era un piso fijo
     que, en ventanas bajas, terminaba empujando a #stage-floor por
     encima del viewport (scroll de página entera). Con min() el piso
     cede solo en ventanas realmente bajas (deja algo de margen para
     header/padding), en vez de pelear contra el 100dvh de arriba. */
  min-height: min(620px, calc(100dvh - 150px));
  max-height: 920px;
  aspect-ratio: auto;
  margin: 0;
  border: 2px solid rgba(86, 46, 20, .20);
  border-radius: 26px;
  box-shadow: var(--ui-shadow);
  background-clip: padding-box;
}
body:has(#game:not([hidden])) .app-footer { display:none; }

/* Más profundidad ambiental en el jardín, sin reemplazar la lógica día/noche */
.stage-floor.location-jardin {
  background: linear-gradient(to bottom, #c8e9f8 0%, #bfe5f7 54%, #416e4d 54%, #315f42 65%, #9fc96e 65%, #91bd61 100%);
}
.stage-floor.location-jardin.is-night {
  background: linear-gradient(to bottom, #13213f 0%, #1b2d51 54%, #234635 54%, #24422f 65%, #6f8e55 65%, #637f4c 100%);
}
.location-jardin .location-deco::before {
  height: 35%;
  background: linear-gradient(to bottom, rgba(205,235,167,.97), rgba(143,181,93,.98));
  box-shadow: 0 -4px 22px rgba(22,56,33,.18) inset;
}
.location-jardin .location-deco::after {
  content:"";
  position:absolute;
  left:0; right:0;
  top:51%; height:14%;
  opacity:.78;
  background:
    linear-gradient(to bottom, transparent 0 35%, rgba(83,59,38,.9) 36% 43%, transparent 44% 63%, rgba(83,59,38,.9) 64% 71%, transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 6%, rgba(122,88,58,.92) 6.2% 8.1%, transparent 8.3% 13%);
  filter: drop-shadow(0 4px 3px rgba(25,25,25,.12));
}

/* Mascota: más protagonista */
.walker { bottom: 92px; z-index: 4; }
@media (min-width: 768px) {
  .walker { width: clamp(250px, 24vw, 360px); }
}
.pet-shadow { opacity: .22; transform: scale(1.08); }

/* Cards HUD */
.hud-card,
.wellbeing-widget,
.bond-chip {
  color: #3d281a;
  background: rgba(255, 249, 235, .95);
  border: 2px solid var(--ui-border);
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(28, 20, 14, .18), inset 0 1px rgba(255,255,255,.7);
  backdrop-filter: blur(7px);
}
.hud-eyebrow {
  display:block;
  color:#b36a2a;
  font:800 .63rem/1.1 "Segoe UI",sans-serif;
  letter-spacing:.12em;
}
.hud-card h3 { margin:2px 0 0; font:800 1.22rem/1.05 "Baloo 2",sans-serif; color:#382315; }

.wellbeing-widget {
  top: 18px;
  left: 18px;
  width: 330px;
  padding: 18px;
  gap: 12px;
  pointer-events:none;
}
/* v3.5 (pedido explícito): estado de conectado/desconectado. Conectado =
   sesión de nube activa y con internet (mismo verde de siempre). Desconectado
   = jugando sin nube o sin internet en este momento (naranja). El valor de
   box-shadow desconectado no llegó completo en el pedido original — se
   infiere por simetría con el conectado (mismo color base que el
   background, alpha .13); ver nota de entrega para que se pueda corregir. */
.hud-status-dot { width:10px; height:10px; border-radius:50%; background:#55ad62; box-shadow:0 0 0 5px rgba(85,173,98,.13); }
.hud-status-dot.is-offline { background:#d9822636; box-shadow:0 0 0 5px rgba(217,130,38,.13); }
.wellbeing-avatar { width:68px; height:68px; border-width:3px; box-shadow:0 4px 10px rgba(35,25,18,.14); }
.wellbeing-avatar-stage { width:136px; height:136px; left:-34px; top:-21px; }
.wellbeing-bars {
  flex:1;
  min-width:0;
  margin-left:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:transparent;
  box-shadow:none;
  animation:none;
}
.wellbeing-row {
  display:grid;
  grid-template-columns: 19px 62px 1fr 38px;
  gap:7px;
  width:100%;
}
.wellbeing-row .icon { color:#9a5b29; width:18px; height:18px; }
.wellbeing-label { font:700 .76rem/1 "Segoe UI",sans-serif; color:#5a412e; }
.wellbeing-value { text-align:right; font:800 .72rem/1 "Segoe UI",sans-serif; color:#5b402c; font-variant-numeric:tabular-nums; }
.wellbeing-track { height:9px; border:0; background:#eadfc8; box-shadow:inset 0 1px 2px rgba(70,40,18,.12); }
.wellbeing-row.is-warning .wellbeing-value { color:#b44b2f; }
.wellbeing-fill.meter-saciedad { background: var(--ui-green); }
.wellbeing-fill.meter-hidratacion { background: var(--ui-blue); }
.wellbeing-fill.meter-higiene { background: var(--ui-yellow); }
.wellbeing-fill.meter-energia { background: var(--ui-purple); }
.wellbeing-name-box {
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  background:#fffdf6;
  box-shadow:inset 0 0 0 1px rgba(166,78,22,.10);
}
.wellbeing-name-box h2 { max-width:none; font-size:1rem; color:#382315; }

/* Progreso en esquina superior derecha */
.bond-chip {
  top:18px;
  right:18px;
  width:270px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:5px 10px;
  padding:14px 16px;
  font-size:.8rem;
}
/* v3.5: #time-card (reloj + Mañana/Tarde/Noche) se sacó del todo —
   pedido explícito, "quitar cartel de reloj y que las notificaciones
   ocupen ese lugar" (ver syncHudLayout() en js/app.js, que ahora ancla
   #notification-card directo debajo de #wellbeing-widget). */

/* Dock inferior: acciones como controles de videojuego, no iconos flotantes */
.stage-actions-row {
  left:50%; right:auto; bottom:16px;
  width:min(880px, calc(100% - 360px));
  transform:translateX(-50%);
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  overflow:visible;
  background:rgba(255,248,232,.94);
  border:2px solid rgba(166,78,22,.72);
  border-radius:24px;
  box-shadow:0 14px 28px rgba(33,22,13,.22), inset 0 1px rgba(255,255,255,.85);
  backdrop-filter:blur(9px);
}
.stage-actions-row .actions { flex:1; gap:8px; justify-content:center; }
.stage-actions-row .action-circle-wrap { width:92px; gap:0; }
.stage-actions-row .cooldown-ring { height:68px; width:92px; border-radius:16px; }
.action-circle {
  border-radius:16px;
  background:linear-gradient(180deg,#fff9eb,#f3dfba);
  border:1px solid #e1c18d;
  color:#5d3a20;
  box-shadow:0 3px 8px rgba(61,38,20,.10), inset 0 1px rgba(255,255,255,.8);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.action-circle:hover:not(:disabled) { filter:none; transform:translateY(-2px); box-shadow:0 7px 14px rgba(61,38,20,.16), inset 0 1px white; background:#fff5dd; }
.action-circle:active:not(:disabled) { transform:translateY(1px) scale(.98); }
.stage-actions-row .action-circle .icon { width:1.7rem; height:1.7rem; }
.action-circle-caption { margin-top:5px; font:800 .67rem/1 "Baloo 2",sans-serif; color:#4c301e; }
.action-circle-wrap.needs-attention .action-circle { border-color:#de8125; box-shadow:0 0 0 3px rgba(222,129,37,.15), 0 5px 12px rgba(61,38,20,.12); animation:attentionPulse 1.7s ease-in-out infinite; }
@keyframes attentionPulse { 50% { transform:translateY(-2px); } }
.cooldown-ring::before { left:10px; right:10px; bottom:4px; height:4px; padding:0; border:0; border-radius:999px; background:linear-gradient(90deg,#d98226 var(--pct-css, 0%),#e8d5b4 var(--pct-css, 0%)); opacity:.9; }
.cooldown-label { color:#8e4b1d; }

/* Feed menu acompaña el nuevo dock */

/* Globo de diálogo con más presencia */
.speech-bubble {
  max-width:330px;
  padding:14px 18px;
  border-radius:20px;
  background:#fffaf0;
  color:#3f2a1b;
  border:1px solid rgba(166,78,22,.22);
  box-shadow:0 10px 20px rgba(26,22,18,.15);
  font:700 1rem/1.25 "Baloo 2",sans-serif;
}

/* Menos aspecto de web utilitaria */
.options-menu { border-radius:16px; box-shadow:0 14px 32px rgba(45,28,15,.22); }

/* Responsive: conserva jerarquía y no simplemente encoge todo */
@media (max-width: 1240px) {
  .wellbeing-widget { width:300px; }
  .bond-chip { width:240px; }
  .stage-actions-row { width:min(760px, calc(100% - 250px)); }
}

@media (max-width: 900px) {
  .app-header { min-height:68px; padding:8px 12px; }
  .brand-name-img, .badge { display:none; }
  .header-progress { margin-left:auto; }
  .stage-floor { height:calc(100dvh - 92px); min-height:650px; border-radius:20px; }
  .wellbeing-widget { width:270px; padding:12px; top:10px; left:10px; }
  .wellbeing-avatar { width:56px; height:56px; }
  .wellbeing-avatar-stage { width:112px; height:112px; left:-28px; top:-17px; }
  .wellbeing-row { grid-template-columns:17px 52px 1fr 34px; gap:5px; }
  .bond-chip { top:10px; right:10px; width:210px; padding:10px 12px; }
  .stage-actions-row { width:calc(100% - 24px); bottom:12px; overflow-x:auto; justify-content:flex-start; }
  .stage-actions-row .actions { justify-content:flex-start; }
  .walker { bottom:94px; }
}

@media (max-width: 640px) {
  .screen.game { padding:8px; }
  .stage-floor { height:calc(100dvh - 82px); min-height:690px; border-radius:18px; }
  .wellbeing-widget { width:calc(100% - 20px); max-width:none; }
  .wellbeing-bars { display:grid; grid-template-columns:1fr 1fr; gap:7px 10px; }
  .wellbeing-row { grid-template-columns:18px 48px 1fr; }
  .wellbeing-value { display:none; }
  .wellbeing-name-box { position:absolute; top:18px; left:92px; width:auto; max-width:55%; background:transparent; box-shadow:none; padding:0; }
  .bond-chip { top:170px; left:10px; right:auto; width:188px; }
  .walker { width:250px; bottom:100px; }
  .stage-actions-row { border-radius:20px; padding:8px; }
  .stage-actions-row .action-circle-wrap { width:74px; }
  .stage-actions-row .cooldown-ring { width:74px; height:58px; }
  .stage-actions-row .action-circle .icon { width:1.35rem; height:1.35rem; }
}

/* ==========================================================
   v2.8 — UI/UX refinements
   ========================================================== */

/* Header: brand left, progression centered, settings right. */
.app-header {
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);
  align-items:center;
  gap:18px;
}
.app-header .brand { justify-self:start; }
.header-progress {
  justify-self:center;
  margin:0 !important;
  display:flex;
  align-items:center;
  gap:12px;
}
/* v3.5: Amigos + Opciones (+ su menú desplegable) viven ahora agrupados
   en un solo div (.header-actions, ver index.html) — UN solo hijo de
   grid en la 3ra columna, en vez de 2-3 hijos sueltos que el grid de 3
   columnas mandaba a una fila implícita nueva (pedido explícito: "el
   header... queda en dos líneas... debería estar todo en una sola
   línea"). Sin position propio: #options-menu sigue anclando su
   position:absolute contra .app-header, como siempre. */
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-edit-btn {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:transparent;
  border:0;
  color:#6b3a19;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
  transition:transform .15s ease, background .15s ease;
}
.header-edit-btn:hover { transform:translateY(-1px); background:rgba(217,130,38,.12); }
.header-edit-btn svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn { border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; }

/* Cards requested without outline / rounded container styling. */
.hud-card,
.wellbeing-widget,
.bond-chip {
  border:0 !important;
  border-radius:0 !important;
}
.wellbeing-widget { box-shadow:0 14px 30px rgba(31,24,18,.13); }

/* Modern action rail: flat, square and icon-led. */
.stage-actions-row {
  border:0 !important;
  border-radius:0 !important;
  background:rgba(255,249,236,.94);
  box-shadow:0 -1px 0 rgba(69,35,15,.08), 0 14px 30px rgba(26,20,16,.18);
  padding:8px 10px;
}
.stage-actions-row .action-circle-wrap { gap:3px; }
.stage-actions-row .cooldown-ring,
.action-circle {
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.action-circle {
  background:transparent;
  color:#4c301f;
  position:relative;
}
.action-circle::after {
  content:"";
  position:absolute;
  left:18%; right:18%; bottom:5px;
  height:2px;
  background:transparent;
  transition:background .15s ease, transform .15s ease;
}
.action-circle:hover:not(:disabled) {
  background:rgba(217,130,38,.10);
  transform:translateY(-2px);
}
.action-circle:hover:not(:disabled)::after,
.action-circle-wrap.needs-attention .action-circle::after { background:#d98226; transform:scaleX(1.12); }
.action-circle-wrap.needs-attention .action-circle {
  animation:none;
  background:rgba(217,130,38,.08);
}
.stage-actions-row .action-circle .icon {
  width:1.75rem;
  height:1.75rem;
  stroke-width:1.55;
}
.action-circle-caption { font-weight:700; letter-spacing:.01em; }
.cooldown-ring::before { border-radius:0 !important; height:3px; left:15px; right:15px; }

/* Comic-like speech balloon physically belongs to the character. */
.walker { overflow:visible; }
.speech-bubble {
  position:absolute;
  left:50%;
  bottom:calc(100% - 18px);
  transform:translateX(-50%);
  width:max-content;
  max-width:min(320px, 78vw);
  min-width:130px;
  padding:13px 16px;
  border:0;
  border-radius:0;
  background:#fffdf6;
  color:#382315;
  box-shadow:5px 6px 0 rgba(69,35,15,.20);
  text-align:center;
  font:700 .98rem/1.3 "Baloo 2", sans-serif;
  z-index:15;
  pointer-events:none;
}
.speech-bubble::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-18px;
  width:0; height:0;
  border-left:15px solid transparent;
  border-right:4px solid transparent;
  border-top:20px solid #fffdf6;
  transform:translateX(-50%) skewX(-8deg);
  filter:drop-shadow(3px 3px 0 rgba(69,35,15,.12));
}

/* Debug mode is now a real fixed tool window rather than disappearing in the footer. */
.debug-panel {
  position:fixed;
  z-index:100;
  top:82px;
  right:18px;
  width:min(420px, calc(100vw - 36px));
  max-height:calc(100dvh - 100px);
  overflow:auto;
  padding:18px;
  background:#fff8e8;
  color:#45230f;
  box-shadow:0 20px 50px rgba(32,21,13,.28);
  border:0;
  border-radius:0;
}
.debug-title { margin:0 46px 14px 0; font:800 1.2rem/1 "Baloo 2",sans-serif; }
.debug-close { position:absolute; top:10px; right:10px; width:36px; height:36px; border:0; border-radius:0; background:#ead8b9; color:#45230f; font-size:1.3rem; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; }
.debug-row { padding:10px 0; border-bottom:1px solid rgba(69,35,15,.10); }
.debug-row button { border:0; border-radius:0; background:#e9cf9f; color:#45230f; padding:8px 10px; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; }
.debug-row button:hover { background:#dfbc7d; }

/* Editing experience */
.screen.onboarding.is-editing { padding-top:22px; }
.screen.onboarding.is-editing #onboarding-title { margin-bottom:8px; font-size:1.5rem; }
.screen.onboarding.is-editing .creator-stage-wrap {
  box-shadow:0 24px 55px rgba(24,18,14,.24);
}
.screen.onboarding.is-editing .creator-tab {
  border-radius:0 !important;
}

@media (max-width:900px) {
  .app-header { grid-template-columns:auto 1fr auto; gap:8px; }
  .header-progress { justify-self:end; gap:6px; }
  .header-edit-btn { width:38px; height:38px; }
  
}
@media (max-width:640px) {
  .header-progress { justify-self:center; }
  .stage-actions-row { border-radius:0 !important; }

}

/* v2.9 — stage, creator and global overlays */
.app-header { grid-template-columns:minmax(150px,1fr) auto minmax(44px,1fr); }
.header-edit-btn { display:flex; width:auto; gap:7px; padding:8px 10px; white-space:nowrap; font:700 .85rem "Baloo 2",sans-serif; }
/* v3.6: pedido explícito "que camine un poco más abajo... ahora estaría muy
   arriba" — se baja el ancla de #walker (pero sin llegar a superponerse con
   .stage-actions-row, ver el mismo ajuste más abajo en @media(max-width:640px)). */
.walker { width:clamp(340px,31vw,440px); bottom:55px; }
.walker .game-stage { width:100%; height:auto; aspect-ratio:1; cursor: url("../assets/ui/cursors/default.png") 2 1, default; cursor: -webkit-image-set(url("../assets/ui/cursors/default.png") 1x, url("../assets/ui/cursors/default@2x.png") 2x) 2 1, default; touch-action:manipulation; }
.speech-bubble { top:auto; bottom:88%; height:auto; padding:16px 20px 20px; max-width:min(300px,80vw); overflow-wrap:anywhere; }
.flies,.bath-fx,.zzz-fx,.heart-pop,.pet-shadow { pointer-events:none; }
.debug-panel { inset:0; width:100%; height:100dvh; max-height:none; z-index:2147483647; padding:24px; margin:0; background:rgba(15,30,48,.72); display:grid; place-items:center; overflow:auto; }
.debug-window { position:relative; width:min(600px,100%); max-height:calc(100dvh - 48px); overflow:auto; padding:28px; background:#fff8e8; text-align:left; box-shadow:0 20px 60px #101a3255; }
.debug-title { color:#244962; line-height:1.3; }
.debug-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.debug-row input { flex:1; min-width:80px; accent-color:#d98226; }
.debug-row button { min-height:44px; }
.debug-close { background:#244962; color:white; }

.screen.onboarding,.screen.onboarding.is-editing { width:100%; max-width:1600px; padding:20px; margin:auto; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px 24px; }
#brand-emblem { width:100px; height:100px; grid-column:1; grid-row:1 / 3; margin:0; }
#onboarding-title,.screen.onboarding.is-editing #onboarding-title { text-align:left; font-size:2rem; margin:0; color:#244962; }
.name-field { width:min(460px,100%); max-width:none; margin:0; grid-column:2; }
.is-editing #onboarding-title { grid-column:1 / -1; }
.is-editing .name-field { grid-column:1 / -1; }
.name-input { background:#fffaf0; border:0; border-bottom:3px solid #d98226; border-radius:0; box-shadow:none; }
.creator-stage-wrap { height:max(620px,calc(100dvh - 210px)); aspect-ratio:auto; border:0; display:grid; grid-template-columns:minmax(0,1fr) 400px; background:#e1eced url('../assets/backgrounds/cc-scene.svg') center / cover no-repeat; }
.creator-tabs { flex-wrap:wrap; overflow:visible; justify-content:flex-start; }
.creator-tab { border:0; border-radius:0; background:#ece3d1; color:#244962; padding:10px 14px; box-shadow:none; }
.creator-tab[aria-selected="true"] { background:#244962; color:#fff8e8; box-shadow:none; }
.onboarding .primary-btn,.onboarding .secondary-btn { border:0; border-radius:0; box-shadow:none; background:#244962; color:#fff8e8; min-height:44px; }
.onboarding .primary-btn { background:#d98226; }
.swatch { border-radius:0; }
@media(max-width:900px) {
 .walker { width:340px; }
 .creator-stage-wrap { grid-template-columns:minmax(0,1fr) 330px; }
 .brand-name-img { display:none; }
}
@media(max-width:640px) {
 .app-header { grid-template-columns:auto 1fr auto; padding:8px; gap:4px; }
 .brand-symbol { width:42px; height:auto; }
 .header-progress { gap:3px; }
 .header-edit-btn { font-size:.73rem; padding:5px; gap:3px; }
 .header-edit-btn svg { width:16px; }
 .stage-floor { min-height:820px; }
 .wellbeing-widget { width:calc(55% - 15px); padding:10px; }
 .wellbeing-avatar { display:none; }
 .wellbeing-bars { display:flex; flex-direction:column; gap:8px; }
 .wellbeing-row { grid-template-columns:16px 43px 1fr; gap:3px; }
 .walker { width:min(330px,calc(100% - 32px)); bottom:55px; }
 
 .screen.onboarding,.screen.onboarding.is-editing { padding:12px; gap:8px 12px; }
 #brand-emblem { width:64px; height:64px; }
 #onboarding-title,.screen.onboarding.is-editing #onboarding-title { font-size:1.5rem; }
 .creator-stage-wrap { height:auto; min-height:780px; display:flex; flex-direction:column; }
 .creator-tab { padding:8px 12px; }
 .debug-panel { padding:12px; }
 .debug-window { padding:20px; max-height:calc(100dvh - 24px); }
}
#game-stage { -webkit-tap-highlight-color:transparent; }
/* v3.0 — configuration submenu, inventory and game selection */
.app-header { z-index:100; }
.options-menu { width:min(480px,calc(100vw - 24px)); max-height:calc(100dvh - 90px); overflow:auto; border-radius:0; }
#opt-debug { display:flex; justify-content:space-between; }
#opt-debug::after { content:'▸'; }
#opt-debug[aria-expanded="true"]::after { content:'▾'; }
#debug-panel { position:static; display:block; width:100%; height:auto; max-height:none; padding:0; margin:0; background:#f1e6d0; overflow:visible; box-shadow:none; }
.debug-window { width:100%; max-height:none; padding:18px 14px; background:transparent; box-shadow:none; overflow:visible; }
.debug-title { margin-top:0; font-size:1rem; }
.debug-row { gap:7px; font-size:.8rem; }
.debug-row button { padding:7px; }
@media(max-width:700px) {
 
 .options-menu { right:6px; max-height:calc(100dvh - 76px); }
}
@media(max-width:380px) {
 .app-header { grid-template-columns:minmax(0,1fr) auto; }
 .app-header .brand { display:none; }
 .header-progress { justify-self:start; min-width:0; }
}
/* v3.1 — games, fishing, inventory and notifications */
.debug-window { display:flex; flex-direction:column; }
.debug-save-actions { order:99; display:flex; gap:8px; position:sticky; bottom:0; background:#fff8e8; padding:12px 0; }
.debug-save-actions button { flex:1; border:0; padding:12px; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; }
#debug-save { background:#244962; color:white; }
.debug-help { margin:6px 0 12px; font-size:.8rem; line-height:1.4; }
.notification-card { position:absolute; left:18px; width:250px; z-index:10; background:#fff8e8; color:#244962; padding:10px 12px; box-shadow:0 5px 16px #14253a20; max-height:160px; overflow:auto; }
.notification-card ul { padding:0; margin:0; list-style:none; }
.notification-card li { font-size:.78rem; line-height:1.4; padding:5px 0; }
.notification-card li+li { border-top:1px solid #ddcfb3; }
/* v3.2, pedido explícito: separar en 3 ventanas lo que antes vivía todo
   junto en .notification-card (ver renderNotifications en js/app.js) —
   estas dos reusan la misma base visual, sólo cambia lo que va adentro. */
.notification-card p { margin:0; font-size:.78rem; line-height:1.4; }
/* "Durmiendo": estática (sin botón de cerrar), tinte propio para
   distinguirla de un aviso puntual. */
.sleep-notice-card { background:#eef1f6; color:#2c3a4f; font-weight:700; }
/* Avisos del sistema: con botón de cerrar propio, arriba a la derecha. */
.system-notice-card { padding-right:34px; }
.notice-close-btn {
  position:absolute; top:6px; right:6px;
  width:24px; height:24px;
  display:grid; place-items:center;
  border:0; border-radius:0; background:transparent;
  color:#244962; font-size:1.1rem; line-height:1; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
.notice-close-btn:hover, .notice-close-btn:focus-visible { background:#e4d9bf; }
.dirt-layer { z-index:6; }
.dirt-item { width:46px; height:44px; background:transparent; border-radius:0; box-shadow:none; }
.dirt-item img { width:100%; height:100%; pointer-events:none; }
.game-stage.is-pooping { animation:poop-squat .7s ease-in-out; }
@keyframes poop-squat { 50% { transform:scaleY(.88); } }
@media(max-width:900px) { .notification-card { left:10px; } }
@media(max-width:640px) { .notification-card { width:calc(55% - 15px); max-height:125px; padding:8px; } }
@media(prefers-reduced-motion:reduce) { .game-stage.is-pooping{ animation:none!important; }  }
/* v3.5: mantiene columna (icono arriba, stock chico debajo, centrado —
   ver el bloque ".feed-item"/#fish-quantity más arriba) en vez de volver
   a la fila icono+texto que tenía esta capa antes. */

/* ======================================================================
   v3.5: los objetos interactivos de la Casa (Cama/Sillón/Lámpara,
   placeholders de v3.4 sin arte definitivo) se sacaron del todo — pedido
   explícito, "quitar los items interactivos: lampara/cama/sillón de la
   casa". Todo su CSS (.world-layer/.world-object*/.wo-*/.room-lamp-on)
   se retira acá con ellos (ver js/world.js: WORLD_OBJECTS ahora vacío).
   ====================================================================== */

/* ======================================================================
   v3.3 — Fase 2: cuenta en la nube (login usuario+PIN) y sistema de
   amigos. Reutiliza los tokens/clases del look actual (cream/naranja/
   navy: --ui-cream, --ui-orange, --ui-navy, .primary-btn/.secondary-btn/
   .name-field/.field-error/.creator-tabs/.creator-tab) en vez de inventar
   una paleta nueva, para que se sienta parte de la misma app.
   ====================================================================== */

.icon-btn { position: relative; }

/* ---------- Pantalla de login ---------- */
.login-screen {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding-top: clamp(24px, 6vh, 64px);
}
.login-screen .brand-emblem { margin: 0 auto 8px; }
.login-hint {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 4px 0 18px;
  line-height: 1.4;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.login-form .name-field { max-width: none; text-align: left; }
.login-form .primary-btn { margin-top: 10px; }
.login-form .secondary-btn { margin-top: 8px; width: 100%; }

/* ---------- v3.3: login alternativo con Google ---------- */
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--muted);
  font-size: 0.85rem;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--wood-edge, #cbb28a);
  opacity: 0.5;
}
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--wood-edge, #cbb28a);
  border-radius: 10px;
  background: #fff;
  color: #3c4043;
  font: 700 0.95rem/1 "Baloo 2", sans-serif;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
.google-btn:hover { background: #f7f7f7; }
.google-btn:disabled { opacity: 0.6; cursor: url("../assets/ui/cursors/not-allowed.png") 2 1, not-allowed; cursor: -webkit-image-set(url("../assets/ui/cursors/not-allowed.png") 1x, url("../assets/ui/cursors/not-allowed@2x.png") 2x) 2 1, not-allowed; }
.google-btn .google-icon { flex-shrink: 0; }
#google-username-form { margin-top: 14px; }

/* ---------- v3.4: confirmación de "Eliminar cuenta" ---------- */
#delete-account-panel .login-hint { text-align: left; }
#delete-account-panel #delete-account-username-hint { color: var(--danger); }
.options-menu-danger-btn {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  text-shadow: none;
}
.options-menu-danger-btn:hover { filter: brightness(1.08); }

/* ---------- Modal genérico (Amigos) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  /* Tiene que ganarle a .app-header (z-index:100 en el rediseño de
     encabezado más abajo en este mismo archivo) para que el panel de
     Amigos no quede tapado/inaccesible detrás del encabezado. */
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(23, 35, 63, 0.5);
  backdrop-filter: blur(2px);
}
.modal-window {
  width: min(480px, 100%);
  max-height: min(640px, 90dvh);
  display: flex;
  flex-direction: column;
  background: var(--ui-cream, #fff8e8);
  border-radius: 20px;
  box-shadow: var(--ui-shadow, 0 14px 34px rgba(32, 22, 12, .28));
  overflow: hidden;
}
.modal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
}
.modal-topbar h2 { margin: 0; font: 800 1.3rem/1 "Baloo 2", sans-serif; color: var(--ui-navy, #17233f); }
.modal-window .creator-tabs { margin: 0 18px; }
.friends-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.friend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--ui-cream-2, #f9ecd0);
}
.friend-item-name { font-weight: 700; color: var(--ui-navy, #17233f); overflow-wrap: anywhere; }
.friend-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.friend-item-actions button {
  border: 0;
  border-radius: 10px;
  padding: 7px 12px;
  font: 700 0.8rem/1 "Baloo 2", sans-serif;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
.friend-btn-accept { background: var(--ui-green, #43a957); color: #fff; }
.friend-btn-reject { background: #ecdcc4; color: var(--ui-navy, #17233f); }
.friend-btn-accept:hover { filter: brightness(1.06); }
.friend-btn-reject:hover { background: #e2cfae; }
#add-friend-form { display: flex; align-items: flex-end; gap: 10px; }
#add-friend-form .name-field { flex: 1; margin: 0; }
#add-friend-form .secondary-btn { flex-shrink: 0; }

/* v3.5: pedido explícito — "sacarle todos los border-radius que haya en
   el cartel del panel de amigos, en los botones y en los recuadros".
   #friends-panel (el <section> del modal) + selector universal para
   TODO lo de adentro (la tarjeta en sí, los tabs, la lista, cada
   friend-item, sus botones, el form de "Agregar", el badge de
   solicitudes, etc.) — el selector por id le gana en especificidad a
   cualquier ".clase" de las reglas de arriba (.modal-window,
   .friend-item, .friend-item-actions button, ...) sin tener que tocar
   esas reglas compartidas con otros modales (p. ej. #delete-account-panel
   sigue con esquinas redondeadas, no se pidió cambiarlo). */

@media (max-width: 640px) {
  .modal-window { border-radius: 16px; }
  #add-friend-form { flex-direction: column; align-items: stretch; }
}

/* ---------- v3.8: la visita reutiliza la casa principal ---------- */
.visit-context {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 12;
  transform: translateX(-50%);
  width: min(430px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  color: var(--ui-navy, #17233f);
  background: rgba(255, 249, 236, .95);
  border: 1px solid rgba(23, 35, 63, .12);
  box-shadow: 0 12px 28px rgba(26, 20, 16, .16);
  backdrop-filter: blur(9px);
}
.visit-context > div { min-width: 0; display: grid; gap: 1px; }
.visit-context strong { font: 800 1.05rem/1.1 "Baloo 2", sans-serif; }
.visit-context #visit-status-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--muted); }
.visit-room-count { font-size: .72rem; font-weight: 800; color: #526079; }
.visit-context .secondary-btn { flex: 0 0 auto; white-space: nowrap; }

/* ---------- v3.9.1: chat de la sala ---------- */
.room-chat-toggle {
  position: absolute;
  right: 16px;
  bottom: 116px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid rgba(23, 35, 63, .16);
  border-radius: 999px;
  color: var(--ui-navy, #17233f);
  background: rgba(255, 249, 236, .96);
  box-shadow: 0 9px 24px rgba(26, 20, 16, .18);
  font: 800 .82rem/1 "Baloo 2", sans-serif;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
.room-chat-toggle:hover { transform: translateY(-2px); }
.room-chat-toggle.is-offline { opacity: .72; }
.room-chat-toggle.is-offline::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d64545; }
.room-chat-toggle b {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: #d64545;
  font: 800 .68rem/1 system-ui, sans-serif;
}
.room-chat-toggle b[hidden] { display: none; }
.room-chat-panel {
  position: absolute;
  right: 16px;
  bottom: 166px;
  z-index: 16;
  width: min(350px, calc(100% - 32px));
  max-height: min(430px, calc(100% - 190px));
  overflow: hidden;
  color: var(--ui-navy, #17233f);
  background: rgba(255, 249, 236, .98);
  border: 1px solid rgba(23, 35, 63, .14);
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(26, 20, 16, .24);
  backdrop-filter: blur(12px);
}
.room-chat-panel:not([hidden]) { display: grid; grid-template-rows: auto auto auto minmax(80px, 1fr) auto; }
.room-chat-panel header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px 9px; border-bottom: 1px solid rgba(23, 35, 63, .1); }
.room-chat-panel header > div { display: grid; gap: 2px; min-width: 0; }
.room-chat-panel header strong { font: 800 1rem/1.1 "Baloo 2", sans-serif; }
.room-chat-participants { overflow: hidden; color: #68738a; font-size: .68rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.room-chat-panel header button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(23, 35, 63, .08); color: inherit; font-size: 1.2rem; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; }
.room-chat-status { min-height: 1.3em; margin: 0; padding: 7px 14px 0; color: var(--muted); font-size: .72rem; }
.room-chat-typing { min-height: 1.25em; margin: 0; padding: 2px 14px 0; color: #41577f; font-size: .72rem; font-style: italic; }
.room-chat-messages { display: grid; align-content: start; gap: 8px; min-height: 90px; margin: 0; padding: 10px 12px; overflow-y: auto; list-style: none; }
.room-chat-messages { grid-row: 4; }
.room-chat-message { display: grid; justify-items: start; gap: 2px; }
.room-chat-message.is-own { justify-items: end; }
.room-chat-message-meta { color: #69748a; font-size: .66rem; font-weight: 700; }
.room-chat-message-body { max-width: 86%; padding: 7px 10px; border-radius: 12px 12px 12px 3px; background: #edf0f5; overflow-wrap: anywhere; font-size: .8rem; line-height: 1.25; }
.room-chat-message.is-own .room-chat-message-body { border-radius: 12px 12px 3px 12px; color: #fff; background: #31466f; }
.room-chat-empty { grid-row: 4; align-self: center; z-index: 1; margin: 12px 22px; color: var(--muted); text-align: center; font-size: .76rem; line-height: 1.3; pointer-events: none; }
.room-chat-form { grid-row: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 10px 12px 12px; border-top: 1px solid rgba(23, 35, 63, .1); }
.room-chat-form input { min-width: 0; padding: 9px 10px; border: 1px solid rgba(23, 35, 63, .18); border-radius: 10px; color: inherit; background: #fff; font: 600 .8rem/1.2 system-ui, sans-serif; }
.room-chat-form button { padding: 9px 12px; border: 0; border-radius: 10px; color: #fff; background: #31466f; font-weight: 800; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; }
.room-chat-form button:disabled { opacity: .5; cursor: wait; }

.visit-host-walker.walker {
  left: 62%;
  right: auto;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  transition: left 120ms linear;
}
.visit-host-walker.is-npc { transition: none !important; }
.visit-host-walker.npc-to-live { transition: left 780ms cubic-bezier(.2,.8,.2,1) !important; }
.visit-host-walker.is-wandering { animation: visitWander 10s ease-in-out infinite; }
@keyframes visitWander {
  0%, 100% { left: 46%; }
  50% { left: 78%; }
}
.visit-host-walker .pet-stage { cursor: url("../assets/ui/cursors/default.png") 2 1, default; cursor: -webkit-image-set(url("../assets/ui/cursors/default.png") 1x, url("../assets/ui/cursors/default@2x.png") 2x) 2 1, default; }
.visit-host-tag {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  max-width: 90%;
  color: var(--ui-navy, #17233f);
  background: rgba(255, 249, 236, .92);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(26, 20, 16, .14);
  font: 800 .75rem/1 "Baloo 2", sans-serif;
  white-space: nowrap;
}
.visit-host-tag span:first-child { overflow: hidden; text-overflow: ellipsis; }
#visit-host-presence { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #8b94a7; }
.visit-host-walker.is-online #visit-host-presence { background: #35a853; box-shadow: 0 0 0 3px rgba(53, 168, 83, .16); }
.visit-host-walker.is-facing-left .pet-stage { scale: -1 1; }

/* v3.8.2 — jugadores remotos dentro del mismo #stage-floor. `left` llega
   como porcentaje de la sala y la transición interpola entre paquetes de
   red (10 por segundo como máximo), evitando saltos visibles. */
.remote-players-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.remote-player-walker.walker {
  right: auto;
  transform: translateX(-50%);
  transition: left 120ms linear;
  pointer-events: none;
}
.remote-player-stage {
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: remoteIdle 2.8s ease-in-out infinite;
}
.remote-player-walker.is-facing-left .remote-player-stage { scale: -1 1; }
.remote-player-walker.is-moving .remote-player-stage,
.visit-host-walker.is-moving .pet-stage { animation-duration: .25s; }
.remote-player-walker.is-running .remote-player-stage,
.visit-host-walker.is-running .pet-stage { animation-duration: .25s; }
@keyframes remoteIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.remote-player-tag {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 90%;
  padding: 4px 8px;
  color: var(--ui-navy, #17233f);
  background: rgba(255, 249, 236, .92);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(26, 20, 16, .14);
  font: 800 .75rem/1 "Baloo 2", sans-serif;
  white-space: nowrap;
}
.remote-player-name { overflow: hidden; text-overflow: ellipsis; }
.remote-live-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #35a853; box-shadow: 0 0 0 3px rgba(53, 168, 83, .16); }

/* v3.9 — las acciones remotas reutilizan los efectos visuales locales.
   Sólo se anima la representación: nunca se escriben estadísticas ajenas. */
.remote-action-bubble { top: -10px; max-width: 180px; z-index: 12; }
.remote-action-playing .pet-stage { animation: remotePlay .42s ease-in-out infinite alternate; }
.remote-action-medicine::after {
  content: "✚";
  position: absolute;
  top: 18%;
  right: 16%;
  color: #35a853;
  font: 900 1.45rem/1 system-ui, sans-serif;
  animation: remoteMedicine 1s ease-out forwards;
}
@keyframes remotePlay { to { transform: translateY(-10px) rotate(2deg); } }
@keyframes remoteMedicine { from { opacity: 0; transform: scale(.6); } 45% { opacity: 1; } to { opacity: 0; transform: translateY(-28px) scale(1.2); } }

/* La casa se puede recorrer, pero los controles y pertenencias del
   anfitrión no se pueden accionar ni limpiar. */
#stage-floor.is-visiting #location-deco,
#stage-floor.is-visiting #dirt-layer { pointer-events: none !important; }
#stage-floor.is-visiting #notification-card,
#stage-floor.is-visiting #sleep-notice-card,
#stage-floor.is-visiting #system-notice-card { opacity: .42; }

@media (prefers-reduced-motion: reduce) {
  .visit-host-walker.is-wandering { animation: none; }
  .visit-host-walker.walker { transition: none !important; }
  .remote-player-walker.walker { transition: none; }
  .remote-player-stage { animation: none; }
}

@media (max-width: 640px) {
  .visit-context { top: 8px; width: calc(100% - 16px); padding: 8px; }
  .visit-context .secondary-btn { padding: 8px 10px; font-size: .78rem; }
  .room-chat-toggle { right: 8px; bottom: 92px; }
  .room-chat-panel { right: 8px; bottom: 142px; width: calc(100% - 16px); max-height: min(410px, calc(100% - 158px)); }
  .visit-host-walker.walker { left: 68%; width: min(250px, 58vw); }
  .remote-player-walker.walker { width: min(250px, 58vw); }
}

/* ======================================================================
   v3.6.2 (pedido explícito) — "hacer que #stage-floor sea multiuso, donde
   puedas estar en tu casa/en otras localizaciones y hasta en la edición
   de la mascota. Así juntamos todo en una sola ventana de juego" +
   rediseño completo de Crear/Editar. Reemplaza a la vieja pantalla
   #onboarding (aparte del juego, con su propio <main> — ver
   .creator-stage-wrap/.creator-controls/.creator-layout/.creator-panel/
   .creator-random-btn/.creator-pet-pos/.creator-pet-stage más arriba, que
   quedan de referencia sin uso: ya ningún elemento del HTML tiene esas
   clases). Ahora todo vive DENTRO de #stage-floor: los elementos "de
   juego" llevan la clase .play-only y los "del editor" .editor-only (ver
   index.html) — se ocultan/muestran enteros según la clase
   #stage-floor.is-editing (ver setStageEditing() en js/app.js), sin pisar
   la lógica interna propia de cada uno (p.ej. #creator-color-icons sigue
   ocultándose sólo cuando la categoría activa no tiene color, ver
   renderCreatorRow() en js/app.js).
   Nota: #brand-emblem/#onboarding-title/.name-field/.name-input siguen
   viviendo dentro de este nuevo layout con su apariencia ya definida más
   arriba (colores/tipografía de la era "v2.9" — #brand-emblem 100px,
   #onboarding-title navy 2rem, input plano con línea inferior naranja):
   no hacía falta repetirla, sólo reposicionarla dentro de #stage-floor. */
#stage-floor.is-editing .play-only { display: none !important; }
/* Red de seguridad: cualquier elemento .editor-only queda oculto apenas
   se sale del editor, sin importar en qué quedó su propio atributo
   `hidden` (ver setStageEditing() en js/app.js, que sólo se ocupa de
   volver a mostrarlos al ABRIR el editor). */
#stage-floor:not(.is-editing) .editor-only { display: none !important; }

/* ---------- Bienvenida (emblema + título, sólo al crear por primera
   vez — pedido explícito de mantener eso igual que siempre) ---------- */
.editor-welcome {
  position: absolute;
  left: 50%;
  top: 7%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
}
.editor-welcome #onboarding-title { text-align: center; }

/* ---------- Nombre (siempre visible mientras se edita/crea) ---------- */
.editor-name-card {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 7;
  width: 260px;
  padding: 14px;
}
.editor-name-card .name-field { width: 100%; max-width: none; margin: 0; }
.editor-name-card .name-label { margin-top: 0; }

/* ---------- Aleatorio ---------- */
.editor-random-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 7;
}

/* ---------- v3.7: vista previa grande y centrada en la escena ---------- */
.editor-pet-pos {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 64vh, calc(100% - 32px));
  width: min(520px, 64dvh, calc(100% - 32px));
  z-index: 3;
  pointer-events: none;
}
.editor-pet-stage {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  animation: bob 3.2s ease-in-out infinite;
  transform-origin: 50% 100%;
  cursor: url("../assets/ui/cursors/default.png") 2 1, default; cursor: -webkit-image-set(url("../assets/ui/cursors/default.png") 1x, url("../assets/ui/cursors/default@2x.png") 2x) 2 1, default;
}

/* La barra mantiene su ancho original fuera de Crear/Editar.
   v3.9.4 fix: el selector de partes/colores (Crear/Editar) quedaba
   corrido bien a la izquierda, sin alinear con la fila de pestañas de
   arriba (que sí está centrada, ver .editor-tabs-row) — el bug real era
   que esta regla no resetea `transform`, así que seguía heredando el
   `translateX(-50%)` de la regla general de .stage-actions-row (pensada
   para cuando el dock usa left:50%). Con left:10% + width:80%, ese
   translateX(-50%) corre la caja un 40% extra del ancho del escenario
   hacia la izquierda (la mitad de su propio 80% de ancho), dejándola
   arrancando fuera de pantalla por la izquierda en vez de centrada. */
#stage-floor.is-editing .stage-actions-row {
  width: 80%;
  left: 10%;
  right: auto;
  transform: none;
}
/* ---------- Pestañas de categoría + Guardar/Cancelar: flotan arriba del
   selector de partes/colores (la posición real la calcula syncHudLayout()
   en js/app.js, esto es sólo el valor de arranque antes del primer cálculo)
   con el mismo lenguaje visual que .stage-actions-row. ---------- */
.editor-tabs-row {
  position: absolute;
  left: 50%;
  bottom: 104px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(880px, calc(100% - 360px));
  padding: 8px 12px;
  background: rgba(255, 249, 236, .94);
  box-shadow: 0 -1px 0 rgba(69, 35, 15, .08), 0 14px 30px rgba(26, 20, 16, .18);
  backdrop-filter: blur(9px);
}
.editor-tabs {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Clase nueva a propósito ("editor-tab", no "creator-tab") — "creator-tab"
   sigue en uso, sin tocar, en las pestañas del panel de Amigos (ver
   #friends-tabs en index.html), que sería un choque de estilos si se
   reutilizara acá con un look distinto. */
.editor-tab {
  flex-shrink: 0;
  border: 0;
  border-radius: 12px;
  padding: 8px 14px;
  background: transparent;
  color: #6a4a30;
  font: 700 .82rem/1 "Baloo 2", sans-serif;
  box-shadow: none;
  white-space: nowrap;
}
.editor-tab[aria-selected="true"] { background: #244962; color: #fff8e8; }
.editor-final-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---------- Selector de partes/colores: pedido explícito "que el
   selector de partes sea igual a la ventana de acciones cuando jugás
   (.stage-actions-row)". En vez de un look aparte, createEditorTile() en
   js/app.js arma cada opción con la MISMA estructura que el dock
   (.action-circle-wrap > .cooldown-ring > .action-circle), así hereda
   pixel a pixel el aspecto ya definido para .stage-actions-row más arriba
   (incluidos sus propios breakpoints responsive) sin duplicar nada acá.
   Partes 80% a la izquierda / color 20% chiquito a la derecha cuando
   conviven (hoy sólo Ojos) — pedido explícito — vía flex-grow 4:1; con
   uno solo de los dos visible (el otro con `hidden`), el que queda pasa a
   ocupar el 100% solo. */
.stage-actions-row .editor-part-icons,
.stage-actions-row .editor-color-icons {
  /* .stage-actions-row .actions (más arriba) hereda justify-content:center
     de .actions — con overflow-x:auto y más tiles de los que entran, un
     "center" real deja el contenido arrancando ANTES del borde izquierdo
     del propio contenedor (scroll negativo inalcanzable), pisando al
     hermano de la izquierda y tapándole los clics — bug real encontrado
     al verificar con Playwright (el primer swatch de color quedaba fuera
     de su propia caja, encima de #creator-part-icons). "safe center" ya
     se usaba en la vieja .creator-part-icons para este mismo problema:
     centra sólo si entra, si no cae a flex-start (con fallback para
     navegadores sin soporte de "safe"). */
  justify-content: flex-start;
  justify-content: safe center;
}
.stage-actions-row .editor-part-icons {
  flex: 2 1;
  /* min-width:0 — sin esto, un flex-item con overflow-x:auto no respeta
     su flex-basis y crece hasta el ancho de su contenido (una fila de
     tiles de 92px puede ser más ancha que el 80% asignado), invadiendo el
     lado de los colores y tapándole los clics — mismo tipo de bug que el
     de justify-content de arriba. */
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.stage-actions-row .editor-color-icons {
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Sin barra de cooldown (no aplica a partes/colores del editor). */
.editor-part-icons .cooldown-ring::before,
.editor-color-icons .cooldown-ring::before { display: none; }
/* Selección: mismo lenguaje que el subrayado de hover del dock
   (.action-circle::after), pedido explícito de quedar "igual" al dock —
   se deja prendido de forma permanente en vez de sólo al pasar el mouse. */
.action-circle.selected { background: rgba(217, 130, 38, .14); }
.action-circle.selected::after { background: #d98226; transform: scaleX(1.12); }

/* Colores: "cuadrados chiquitos" (pedido explícito) — mismo tile que las
   partes pero bien más chico; quedan cuadrados de verdad porque heredan
   el border-radius:0 ya forzado para .action-circle/.cooldown-ring más
   arriba (era "Modern action rail"), que era justo lo pedido. */
#creator-color-icons .action-circle-wrap { width: 40px; }
#creator-color-icons .cooldown-ring { width: 40px; height: 40px; }
.editor-color-locked { opacity: .55; cursor: url("../assets/ui/cursors/not-allowed.png") 2 1, not-allowed; cursor: -webkit-image-set(url("../assets/ui/cursors/not-allowed.png") 1x, url("../assets/ui/cursors/not-allowed@2x.png") 2x) 2 1, not-allowed; }
.editor-color-locked .swatch-lock-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}

@media (max-width: 1240px) {
  .editor-tabs-row { width: min(760px, calc(100% - 250px)); }
}
@media (max-width: 900px) {
  .editor-tabs-row { width: calc(100% - 24px); }
  .editor-name-card { width: 230px; top: 10px; left: 10px; }
  .editor-random-btn { top: 10px; right: 10px; }
  /* En mobile la tarjeta de nombre (arriba a la izquierda) es ancha
     relativo a la pantalla y se solapaba con el emblema/título
     centrados (#editor-welcome, verificado con Playwright) — se bajan
     lo suficiente como para quedar siempre debajo de la tarjeta. */
  .editor-welcome { top: 108px; }

}
@media (max-width: 640px) {
  .editor-tabs-row { padding: 6px 8px; gap: 6px; }
  .editor-name-card { width: calc(60% - 15px); padding: 10px; }
  .editor-random-btn { padding: 8px 10px; }

  #creator-color-icons .action-circle-wrap { width: 34px; }
  #creator-color-icons .cooldown-ring { width: 34px; height: 34px; }
}

/* ======================================================================
   v3.9.2.1 — correccion para notebooks 1920x1200 con escalado del SO

   En una pantalla 1920x1200 configurada al 125%, Chromium expone un
   viewport cercano a 1536x960 CSS px. La interfaz de escritorio anterior
   ocupaba ese viewport completo y por eso solo recuperaba sus proporciones
   al bajar el zoom del navegador a 75%. Esta variante compacta reproduce
   esa densidad a zoom 100%, componente por componente (sin `zoom` global
   ni transformaciones que desalineen hitboxes).

   La condicion de resolucion evita aplicar una segunda reduccion si el
   usuario vuelve a poner el navegador en 75%: en Chromium el dppx efectivo
   tambien baja y deja de coincidir con este bloque.
   ====================================================================== */
@media (min-width: 1300px) and (max-width: 1700px) and (min-resolution: 1.15dppx) {
  .app-header {
    min-height: 58px;
    padding: 6px 24px;
    gap: 14px;
  }
  .brand { gap: 8px; }
  .brand-symbol { height: 38px; }
  .brand-name-img { height: 18px; }
  .badge { padding: 2px 7px; font-size: .58rem; }

  .header-progress { gap: 9px; }
  .header-actions { gap: 7px; }
  .header-edit-btn { height: 32px; padding: 5px 7px; gap: 5px; font-size: .68rem; }
  .header-edit-btn svg { width: 16px; height: 16px; }
  .icon-btn { width: 33px; height: 33px; }

  .screen.game { padding: 10px 12px 12px; }
  .stage-col { max-width: 1192px; }
  .stage-floor {
    height: min(calc(100dvh - 70px), 690px);
    min-height: min(500px, calc(100dvh - 88px));
    max-height: 690px;
    border-radius: 20px;
  }

  .wellbeing-widget {
    top: 14px;
    left: 14px;
    width: 248px;
    padding: 13px;
    gap: 9px;
  }
  .hud-eyebrow { font-size: .5rem; }
  .hud-card h3 { font-size: .92rem; }
  .hud-status-dot { width: 8px; height: 8px; box-shadow: 0 0 0 4px rgba(85,173,98,.13); }
  .wellbeing-avatar { width: 51px; height: 51px; border-width: 2px; }
  .wellbeing-avatar-stage { width: 102px; height: 102px; left: -26px; top: -16px; }
  .wellbeing-bars { gap: 6px; }
  .wellbeing-row { grid-template-columns: 14px 47px 1fr 29px; gap: 5px; }
  .wellbeing-row .icon { width: 14px; height: 14px; }
  .wellbeing-label { font-size: .58rem; }
  .wellbeing-value { font-size: .56rem; }
  .wellbeing-track { height: 7px; }
  .wellbeing-name-box { padding: 7px 9px; }
  .wellbeing-name-box h2 { font-size: .78rem; }

  .notification-card {
    left: 14px;
    width: 188px;
    max-height: 120px;
    padding: 8px 9px;
  }
  .notification-card li,
  .notification-card p { font-size: .6rem; }
  .notification-card li { padding: 4px 0; }

  .walker { width: clamp(255px, 23.25vw, 330px); bottom: 41px; }
  .speech-bubble {
    max-width: min(240px, 60vw);
    min-width: 98px;
    padding: 10px 14px 14px;
    font-size: .74rem;
  }

  .stage-actions-row {
    bottom: 12px;
    width: min(660px, calc(100% - 270px));
    gap: 6px;
    padding: 6px 8px;
  }
  .stage-actions-row .actions { gap: 6px; }
  .stage-actions-row .action-circle-wrap { width: 69px; gap: 2px; }
  .stage-actions-row .cooldown-ring { width: 69px; height: 51px; }
  .stage-actions-row .action-circle .icon { width: 1.3rem; height: 1.3rem; }
  .action-circle-caption { margin-top: 3px; font-size: .52rem; }
  .cooldown-ring::before { left: 11px; right: 11px; bottom: 3px; height: 2px; }

  .visit-context {
    top: 10px;
    width: min(323px, calc(100% - 24px));
    gap: 10px;
    padding: 7px 9px;
  }
  .visit-context strong { font-size: .8rem; }
  .visit-context #visit-status-line { font-size: .6rem; }
  .visit-room-count { font-size: .56rem; }
  .visit-context .secondary-btn { padding: 6px 8px; font-size: .64rem; }

  .room-chat-toggle {
    right: 12px;
    bottom: 87px;
    min-height: 32px;
    gap: 5px;
    padding: 6px 10px;
    font-size: .64rem;
  }
  .room-chat-toggle b { min-width: 15px; height: 15px; padding: 0 4px; font-size: .54rem; }
  .room-chat-panel {
    right: 12px;
    bottom: 124px;
    width: min(263px, calc(100% - 24px));
    max-height: min(323px, calc(100% - 143px));
    border-radius: 14px;
  }
}

/* ======================================================================
   v3.9.2.2 — chat amplio, rectangular y de lectura clasica

   Inspirado en la claridad del chat del Facebook de escritorio original:
   barra azul bien identificable, historial blanco, mensajes apilados sin
   burbujas y compositor fijo al pie. Se modifica solamente la presentacion;
   presencia, escritura, envio y suscripciones siguen usando la logica de
   red de v3.9.2.
   ====================================================================== */
.room-chat-toggle {
  right: 16px;
  bottom: 106px;
  min-width: 184px;
  min-height: 46px;
  justify-content: flex-start;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(69, 35, 15, .22);
  border-radius: 0;
  color: #382315;
  background: rgba(255, 249, 236, .94);
  box-shadow: 0 3px 10px rgba(69, 35, 15, .18);
  font: 700 .78rem/1.1 Arial, Helvetica, sans-serif;
}
.room-chat-toggle:hover {
  transform: none;
  background: rgba(247, 235, 210, .98);
}
.room-chat-toggle:focus-visible {
  outline: 2px solid #d98226;
  outline-offset: -4px;
}
.room-chat-toggle.is-selected { box-shadow: inset 3px 0 0 #d98226, 0 3px 10px rgba(69, 35, 15, .18); }
.room-chat-toggle.is-offline { opacity: .82; }
.room-chat-contact-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #43a957;
  box-shadow: 0 0 0 3px rgba(67, 169, 87, .14);
}
.room-chat-toggle.is-offline .room-chat-contact-dot {
  background: #c65b4a;
  box-shadow: 0 0 0 3px rgba(198, 91, 74, .13);
}
.room-chat-contact-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
  text-align: left;
}
.room-chat-contact-copy strong {
  overflow: hidden;
  color: #382315;
  font: 700 .78rem/1 Arial, Helvetica, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-chat-contact-copy small {
  color: #826249;
  font: 400 .62rem/1 Arial, Helvetica, sans-serif;
}
.room-chat-toggle b {
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 4px;
  border-radius: 0;
  background: #d83b3e;
  font: 700 .65rem/1 Arial, Helvetica, sans-serif;
}

.room-chat-panel {
  right: 16px;
  bottom: 150px;
  width: min(400px, calc(100% - 32px));
  height: min(510px, calc(100% - 170px));
  max-height: none;
  border: 1px solid rgba(69, 35, 15, .22);
  border-radius: 0;
  color: #382315;
  background: #fff;
  box-shadow: 0 8px 24px rgba(69, 35, 15, .24);
  backdrop-filter: none;
  font-family: Arial, Helvetica, sans-serif;
}
.room-chat-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.room-chat-panel header {
  flex: 0 0 auto;
  min-height: 48px;
  gap: 10px;
  padding: 7px 8px 7px 10px;
  border-bottom: 1px solid rgba(69, 35, 15, .18);
  color: #382315;
  background: rgba(255, 249, 236, .94);
}
.room-chat-panel header > div {
  flex: 1;
  min-width: 0;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
}
.room-chat-panel header .hud-eyebrow {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 9px;
  height: 9px;
  overflow: hidden;
  border-radius: 50%;
  color: transparent;
  background: #62c46f;
  letter-spacing: 0;
}
.room-chat-panel header strong {
  grid-column: 2;
  font: 700 .9rem/1.1 Arial, Helvetica, sans-serif;
}
.room-chat-participants {
  grid-column: 2;
  color: #826249;
  font-size: .67rem;
  font-weight: 400;
}
.room-chat-panel header button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  color: #593923;
  background: transparent;
  font: 700 1.15rem/1 Arial, Helvetica, sans-serif;
}
.room-chat-panel header button:hover,
.room-chat-panel header button:focus-visible { background: rgba(217, 130, 38, .14); }
.room-chat-panel header .room-chat-back {
  width: 32px;
  flex: 0 0 32px;
  border-right: 1px solid rgba(69, 35, 15, .14);
  font-size: 1rem;
}

.room-chat-contacts {
  flex: 1;
  min-height: 0;
  padding: 12px 0 0;
  overflow-y: auto;
  background: #fff;
}
.room-chat-contact-list { display: grid; }
.room-chat-contact-item {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid #eee5d5;
  border-radius: 0;
  color: #382315;
  background: #fff;
  text-align: left;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
.room-chat-contact-item:last-child { border-bottom: 1px solid #eee5d5; }
.room-chat-contact-item:hover,
.room-chat-contact-item:focus-visible {
  outline: 0;
  background: rgba(255, 249, 236, .94);
}
.room-chat-list-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.room-chat-list-copy strong,
.room-chat-list-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-chat-list-copy strong { font: 700 .8rem/1 Arial, Helvetica, sans-serif; }
.room-chat-list-copy small { color: #756556; font: 400 .68rem/1 Arial, Helvetica, sans-serif; }
.room-chat-list-badge {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  color: #fff;
  background: #d83b3e;
  font: 700 .65rem/1 Arial, Helvetica, sans-serif;
}
.room-chat-contacts-empty {
  margin: 18px 24px;
  color: #756556;
  text-align: center;
  font-size: .74rem;
}
.room-chat-conversation {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(150px, 1fr) auto;
}
.room-chat-history {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.room-chat-status {
  min-height: 25px;
  padding: 6px 10px 5px;
  border-bottom: 1px solid #e6d4b8;
  color: #826249;
  background: rgba(255, 249, 236, .72);
  font-size: .67rem;
}
.room-chat-typing {
  min-height: 23px;
  padding: 5px 10px 4px;
  border-bottom: 1px solid #eee5d5;
  color: #826249;
  background: #fff;
  font-size: .68rem;
}
.room-chat-messages {
  gap: 0;
  min-height: 150px;
  padding: 0;
  background: #fff;
  scrollbar-color: #bda98c #f4ecdd;
  scrollbar-width: thin;
  height: 100%;
}
.room-chat-messages::-webkit-scrollbar { width: 11px; }
.room-chat-messages::-webkit-scrollbar-track { background: #f4ecdd; }
.room-chat-messages::-webkit-scrollbar-thumb {
  border: 2px solid #f4ecdd;
  border-radius: 0;
  background: #bda98c;
}
.room-chat-message,
.room-chat-message.is-own {
  justify-items: stretch;
  gap: 3px;
  padding: 8px 10px 9px;
  border-bottom: 1px solid #eee5d5;
  background: #fff;
}
.room-chat-message.is-own { background: rgba(255, 249, 236, .72); }
.room-chat-message-meta {
  color: #9a531d;
  font-size: .68rem;
  font-weight: 700;
}
.room-chat-message-body,
.room-chat-message.is-own .room-chat-message-body {
  max-width: none;
  padding: 0;
  border-radius: 0;
  color: #382315;
  background: transparent;
  font-size: .8rem;
  line-height: 1.32;
}
.room-chat-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px 34px;
  color: #756556;
  font-size: .75rem;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
.room-chat-form {
  gap: 6px;
  padding: 8px;
  border-top: 1px solid #d8c4a3;
  background: #f8f0e0;
}
.room-chat-form input {
  min-height: 36px;
  padding: 8px 9px;
  border: 1px solid #bca789;
  border-radius: 0;
  background: #fff;
  font: 400 .78rem/1.2 Arial, Helvetica, sans-serif;
}
.room-chat-form input:focus {
  border-color: #d98226;
  outline: 1px solid #d98226;
}
.room-chat-form button {
  min-width: 68px;
  padding: 8px 11px;
  border: 1px solid rgba(69, 35, 15, .22);
  border-radius: 0;
  color: #382315;
  background: rgba(255, 249, 236, .94);
  font: 700 .75rem/1 Arial, Helvetica, sans-serif;
}
.room-chat-form button:hover:not(:disabled) { background: rgba(247, 235, 210, .98); }

/* En la notebook objetivo el resto de la interfaz se compacta, pero el chat
   conserva una superficie generosa para no volver al problema original. */
@media (min-width: 1300px) and (max-width: 1700px) and (min-resolution: 1.15dppx) {
  .room-chat-toggle {
    right: 12px;
    bottom: 82px;
    min-width: 154px;
    min-height: 38px;
    padding: 6px 8px;
    font-size: .66rem;
  }
  .room-chat-toggle b { min-width: 16px; height: 16px; font-size: .56rem; }
  .room-chat-panel {
    right: 12px;
    bottom: 120px;
    width: min(340px, calc(100% - 24px));
    height: min(430px, calc(100% - 138px));
  }
}

@media (max-width: 640px) {
  .room-chat-toggle {
    right: 8px;
    bottom: 92px;
    min-width: 154px;
  }
  .room-chat-panel {
    right: 8px;
    bottom: 136px;
    width: calc(100% - 16px);
    height: min(440px, calc(100% - 152px));
  }
}

/* ======================================================================
   v3.9.7 — escritura rápida del chat de la sala

   Se ubica por JS contra el borde superior real del dock. En reposo es
   deliberadamente tenue; foco, hover o activación por Enter la vuelven
   completamente legible. Mantiene la geometría rectangular del chat.
   ====================================================================== */
.room-quick-chat {
  position: absolute;
  left: 50%;
  bottom: 104px;
  z-index: 14;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(620px, calc(100% - 430px));
  min-width: 280px;
  padding: 5px;
  border: 1px solid rgba(69, 35, 15, .28);
  border-radius: 0;
  color: #382315;
  background: rgba(255, 249, 236, .94);
  box-shadow: 0 5px 16px rgba(69, 35, 15, .16);
  opacity: .24;
  transform: translateX(-50%);
  transition: opacity .16s ease, box-shadow .16s ease;
}
.room-quick-chat[hidden] { display: none; }
.room-quick-chat:hover,
.room-quick-chat:focus-within,
.room-quick-chat.is-active {
  opacity: .98;
  box-shadow: 0 7px 20px rgba(69, 35, 15, .22);
}
.room-quick-chat.has-error {
  border-color: #b83e32;
  opacity: 1;
}
.room-quick-chat input {
  min-width: 0;
  height: 32px;
  padding: 7px 9px;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: #382315;
  background: transparent;
  font: 400 .77rem/1.2 Arial, Helvetica, sans-serif;
}
.room-quick-chat input::placeholder { color: #6f5e50; }
.room-quick-chat.has-error input::placeholder { color: #9a2f27; }
.room-quick-chat button {
  min-width: 64px;
  padding: 7px 10px;
  border: 1px solid rgba(69, 35, 15, .22);
  border-radius: 0;
  color: #382315;
  background: rgba(255, 249, 236, .94);
  font: 700 .72rem/1 Arial, Helvetica, sans-serif;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
.room-quick-chat button:hover:not(:disabled),
.room-quick-chat button:focus-visible { background: rgba(247, 235, 210, .98); }
.room-quick-chat button:disabled,
.room-quick-chat input:disabled { cursor: url("../assets/ui/cursors/not-allowed.png") 2 1, not-allowed; cursor: -webkit-image-set(url("../assets/ui/cursors/not-allowed.png") 1x, url("../assets/ui/cursors/not-allowed@2x.png") 2x) 2 1, not-allowed; opacity: .55; }

@media (max-width: 1240px) {
  .room-quick-chat { width: min(540px, calc(100% - 310px)); }
}

@media (max-width: 900px) {
  .room-quick-chat {
    width: calc(100% - 24px);
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .room-quick-chat {
    width: calc(100% - 16px);
    padding: 4px;
  }
  .room-quick-chat input { height: 30px; font-size: .72rem; }
  .room-quick-chat button { min-width: 56px; padding-inline: 8px; font-size: .68rem; }
}

/* ---------- Beta v1.0: acciones compactas, inventario y vestidor ---------- */
#stage-floor:not(.is-editing) .stage-actions-row {
  left: 16px; right: auto; bottom: 16px;
  width: auto; max-width: calc(100% - 32px);
  transform: none; justify-content: flex-start;
  padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; backdrop-filter: none;
}
#stage-floor:not(.is-editing) .stage-actions-row .actions { flex: 0 1 auto; justify-content: flex-start; gap: 8px; }
#stage-floor:not(.is-editing) .stage-actions-row .action-circle-wrap { width: 54px; gap: 2px; }
#stage-floor:not(.is-editing) .stage-actions-row .cooldown-ring { width: 54px; height: 50px; border-radius: 0; }
#stage-floor:not(.is-editing) .stage-actions-row .action-circle {
  border-radius: 0; background: rgba(255, 249, 236, .94);
  border: 1px solid rgba(85, 52, 28, .28); box-shadow: 0 4px 10px rgba(42, 26, 15, .18);
}
#stage-floor:not(.is-editing) .stage-actions-row .action-circle-caption { font-size: .58rem; margin-top: 2px; }
#stage-floor:not(.is-editing) .stage-actions-row .action-circle .icon { width: 1.35rem; height: 1.35rem; }
.action-circle-wrap.is-disabled { opacity: .45; }

.inventory-window, .wardrobe-window { width: min(680px, 100%); border-radius: 0; }
.inventory-tabs { display: flex; gap: 0; padding: 0 18px; overflow-x: auto; border-bottom: 1px solid #dfd1ba; }
.inventory-tab {
  flex: 0 0 auto; padding: 10px 13px; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; background: transparent; color: #624936;
  font: 700 .76rem/1 Arial, sans-serif; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
.inventory-tab.is-active { border-bottom-color: #d98226; color: #352316; }
.inventory-tab:disabled { opacity: .38; cursor: url("../assets/ui/cursors/not-allowed.png") 2 1, not-allowed; cursor: -webkit-image-set(url("../assets/ui/cursors/not-allowed.png") 1x, url("../assets/ui/cursors/not-allowed@2x.png") 2x) 2 1, not-allowed; }
.inventory-grid, .wardrobe-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px; padding: 18px; overflow-y: auto;
}
.inventory-item, .wardrobe-item, .beta-welcome-choice {
  min-height: 150px; display: grid; place-items: center; gap: 8px; padding: 12px;
  border: 1px solid #ddc9a8; border-radius: 0; background: #fffdf7; color: #432d1f; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
.inventory-item img, .wardrobe-item img { width: 100%; height: 105px; object-fit: contain; }
.inventory-item:disabled { opacity: .42; cursor: url("../assets/ui/cursors/not-allowed.png") 2 1, not-allowed; cursor: -webkit-image-set(url("../assets/ui/cursors/not-allowed.png") 1x, url("../assets/ui/cursors/not-allowed@2x.png") 2x) 2 1, not-allowed; }
.wardrobe-item.is-selected { outline: 3px solid #d98226; outline-offset: -3px; background: #fff5df; }
.inventory-status { margin: 0; padding: 0 18px 18px; color: #756556; font-size: .82rem; }

.beta-welcome-overlay { z-index: 180; }
.beta-welcome-window { width: min(760px, 100%); border-radius: 0; padding: 22px; }
.beta-welcome-copy { text-align: center; }
.beta-welcome-copy h2 { margin: 5px 0; color: #342218; }
.beta-welcome-copy p { margin: 0 auto 18px; max-width: 590px; color: #6d5949; }
.beta-welcome-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.beta-welcome-choice { min-height: 300px; font-size: 1rem; }
.beta-welcome-choice img { width: 100%; height: 240px; object-fit: contain; }
.beta-welcome-choice:hover, .beta-welcome-choice:focus-visible { outline: 3px solid #d98226; background: #fff7e7; }

.ropa-brazo { animation: armSwing 2.4s ease-in-out infinite; }
.ropa-brazo-der { animation-delay: -1.2s; animation-direction: reverse; }
/* v4.6.11: transición de piernas/pantalón/calzado unificada más arriba (ver .game-stage.is-walking .pierna). */
.friend-item-name { display: inline-flex; align-items: center; gap: 8px; }
.friend-presence-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #43a957; box-shadow: 0 0 0 3px rgba(67,169,87,.12); }
.friend-presence-dot.is-offline { background: #9c8c7e; box-shadow: none; }
.room-chat-friend-actions { display: flex; gap: 5px; }
.room-chat-friend-actions button, .room-chat-tools button {
  border: 1px solid #d8c5a6; border-radius: 0; padding: 6px 8px;
  background: rgba(255,249,236,.94); color: #4b301e; font: 700 .64rem/1 Arial, sans-serif; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}

@media (max-width: 640px) {
  #stage-floor:not(.is-editing) .stage-actions-row { left: 8px; bottom: 8px; max-width: calc(100% - 16px); overflow-x: auto; }
  #stage-floor:not(.is-editing) .stage-actions-row .action-circle-wrap { width: 48px; }
  #stage-floor:not(.is-editing) .stage-actions-row .cooldown-ring { width: 48px; height: 44px; }
  .beta-welcome-options { grid-template-columns: 1fr; }
  .beta-welcome-choice { min-height: 220px; }
  .beta-welcome-choice img { height: 165px; }
  .room-chat-friend-item { grid-template-columns: 10px minmax(0,1fr); }
  .room-chat-friend-actions { grid-column: 2; }
}

/* ---------- Beta v1.2.1 ---------- */
/* Orden visual: torso de la prenda < brazos de la mascota < mangas. */
.pet-layer-clothing-upper-body .ropa-brazo { display: none; }
.pet-layer-clothing-upper-sleeves .ropa-cuerpo { display: none; }

@keyframes clothingArmSwing {
  /* La manga necesita cubrir también el trazo exterior del brazo. El
     aumento es sólo de esta pieza y conserva exactamente la rotación del
     brazo inferior para que la unión no se abra durante el balanceo. */
  0%, 100% { transform: rotate(-6deg) scale(1.14); }
  50% { transform: rotate(6deg) scale(1.14); }
}
.ropa-brazo { animation-name: clothingArmSwing; }
.ropa-pierna { transform: scale(1.07); }
.ropa-calzado { transform: scale(1.08); }

.badge { background: #6bafd7; }

/* Housing: el fondo y los objetos comparten el mismo sistema de coordenadas. */
#housing-scene { display: block; width: 100%; height: 100%; }
.housing-window-sky { fill: #50cae7; transition: fill .8s ease; }
.housing-window-horizon { fill: #71dcf1; transition: fill .8s ease; }
.housing-window-cloud { fill: #e9fbff; opacity: .95; }
/* v4.6.6: las nubes van en una capa HTML aparte, encima del vidrio (ver
   layoutWindowClouds en js/app.js); se deslizan con transform en su propia
   capa, así no se repinta la casa entera en cada cuadro. */
.housing-cloud-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.housing-window-clouds { position: absolute; overflow: hidden; pointer-events: none; }
.housing-window-cloud-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
/* v4.6.12 hotfix 1 (pedido): la ventana ya no se anima — nubes quietas. */
.housing-window-cloud-layer.cloud-one,
.housing-window-cloud-layer.cloud-two { animation: none; will-change: auto; }
.stage-floor.is-night .housing-window-sky { fill: #1a3458; }
.stage-floor.is-night .housing-window-horizon { fill: #294e73; }
.stage-floor.is-night .housing-window-cloud { fill: #bacde4; opacity: .72; }
/* Antes el tinte de noche de la casa (#scene-noche-overlay) también las
   oscurecía; ahora están encima, así que llevan el tinte en el color. */
.stage-floor.location-casa.is-night .housing-window-cloud { fill: #76869f; }
/* Mismo recorrido que antes (−13 → 24 y 20 → −25 unidades de un vidrio de 286). */
@keyframes windowCloudDriftOne { from { transform: translateX(-4.55%); } to { transform: translateX(8.39%); } }
@keyframes windowCloudDriftTwo { from { transform: translateX(6.99%); } to { transform: translateX(-8.74%); } }
@media (prefers-reduced-motion: reduce) { .housing-window-cloud-layer { animation: none !important; } }
.housing-object { pointer-events: none; }
#scene-puerta { pointer-events: auto; }
#stage-floor.is-decorating .location-deco { z-index: 20; pointer-events: auto; }
#stage-floor.is-decorating .walker { z-index: 21; pointer-events: none; }
#stage-floor.is-decorating #housing-scene { pointer-events: all; touch-action: none; cursor: crosshair; }
#stage-floor.is-decorating .housing-object { pointer-events: auto; cursor: grab; }
#stage-floor.is-decorating .housing-object.is-selected { outline: 5px solid #e87e2d; }
#stage-floor.is-decorating .stage-actions-row,
#stage-floor.is-decorating .room-quick-chat,
#stage-floor.is-decorating .room-chat-toggle { visibility: hidden; pointer-events: none; }
.housing-editor-panel {
  position: absolute; top: 16px; right: 16px; z-index: 30;
  width: min(350px, calc(100% - 32px)); max-height: min(80%, 620px);
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  overflow: auto; background: #fff9ec; color: #432d1f;
  border: 2px solid #aa7544; box-shadow: 0 8px 30px #321c1460;
}
.housing-editor-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: move; touch-action: none; user-select: none; }
.housing-editor-controls { display: flex; gap: 6px; }
.housing-editor-heading button, #housing-editor-remove {
  border: 1px solid #b78b60; background: #f4dfbc; color: #432d1f;
  padding: 7px 10px; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; font-weight: 700;
}
.housing-editor-panel.is-collapsed #housing-editor-hint,
.housing-editor-panel.is-collapsed #housing-editor-items,
.housing-editor-panel.is-collapsed #housing-editor-remove { display: none; }
#housing-editor-hint { margin: 0; font-size: .78rem; line-height: 1.35; }
.housing-editor-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 7px; overflow: auto; }
.housing-editor-item { min-width: 0; height: auto; min-height: 90px; padding: 6px; border: 1px solid #d6b990; background: white; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; color: #49301f; }
.housing-editor-item img { display: block; width: 100%; height: 58px; object-fit: contain; }
.housing-editor-item span { display: block; font-size: .67rem; line-height: 1.2; }
.housing-editor-item.is-selected, .housing-editor-item.is-equipped { border: 2px solid #d98226; background: #fff1d4; }
.housing-gift-window { width: min(900px, 100%); max-height: min(90dvh, 850px); overflow: auto; border-radius: 0; padding: 20px; }
.housing-gift-window h2 { margin: 5px 0; }
.housing-gift-window p { margin: 0 0 12px; }
.housing-gift-group { margin: 12px 0; }
.housing-gift-group h3 { margin: 0 0 6px; font-size: .9rem; }
.housing-gift-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 8px; }
.housing-gift-choice { padding: 7px; border: 2px solid #ddc9a8; background: #fffdf7; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; color: #432d1f; }
.housing-gift-choice.is-selected { border-color: #d98226; background: #fff1d4; }
.housing-gift-choice img { display: block; width: 100%; height: 75px; object-fit: contain; }
.housing-gift-choice span { font-weight: 700; font-size: .72rem; }

/* Dock, compositor de sala y Amigos comparten la línea inferior. */
.room-quick-chat {
  left: 392px;
  right: 212px;
  bottom: 16px;
  width: auto;
  min-width: 0;
  transform: none;
}
.room-chat-toggle {
  right: 16px;
  bottom: 16px;
}
.room-chat-panel {
  right: 16px;
  bottom: 62px;
  height: min(510px, calc(100% - 82px));
}

.room-chat-tools {
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 12px;
}

.inventory-item-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 105px;
}
.inventory-item-visual img { width: 100%; height: 100%; object-fit: contain; }
#inventory-water .inventory-item-visual img {
  width: auto;
  height: 78px;
  max-width: 64px;
}
.inventory-fish-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(69,35,15,.2);
  color: #fff;
  background: rgba(48,31,20,.68);
  font: 800 .9rem/1 Arial, sans-serif;
  text-shadow: 0 1px 2px #000;
}
.inventory-fish-overlay[hidden] { display: none; }
.inventory-fish-catch { background: rgba(217,130,38,.88); }
#inventory-fish:disabled,
#inventory-water:disabled { opacity: 1; }
#inventory-fish:disabled .inventory-item-visual img,
#inventory-water:disabled .inventory-item-visual img { opacity: .42; }
.inventory-window .inventory-item.is-cooling-down .inventory-item-visual img { opacity: .65; }
.inventory-window .inventory-fish-cooldown,
.inventory-window .inventory-water-cooldown {
  inset: auto auto 2px 50%; transform: translateX(-50%);
  min-height: 0; padding: 2px 5px; border: 0; border-radius: 6px;
  background: #fff9ec; color: #45230f; text-shadow: none;
  font: 700 12px/1.2 "Segoe UI", sans-serif; font-variant-numeric: tabular-nums;
  white-space: nowrap; pointer-events: none;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 18px 18px;
}
.modal-actions .secondary-btn { min-width: 96px; border-radius: 0; }
.wardrobe-item { min-height: 132px; }
.wardrobe-item img { height: 112px; }

/* Beta v3.0: catálogo y moneda del arte original. */
.shop-window { width: min(900px, calc(100vw - 24px)); max-height: min(90vh, 850px); overflow: hidden; }
.shop-balance { display: flex; align-items: center; gap: 6px; padding: 0 18px; font-family: 'Baloo 2', sans-serif; }
.shop-balance img { width: 25px; height: 25px; }
.shop-balance strong, .shop-price { color: #a57212; font-family: 'Baloo 2', sans-serif; font-weight: 800; }
.shop-grid { display: grid; flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 16px 18px; }
.shop-card { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 12px; border: 2px solid #cfae73; border-radius: 12px; background: #fff9e9; text-align: center; }
.shop-card > img { width: 100%; height: 115px; object-fit: contain; }
.shop-card > button { margin-top: auto; width: 100%; }
.shop-swatch { display: block; width: 92px; height: 92px; margin: 12px auto; border: 2px solid #815629; border-radius: 50%; }
.shop-admin-controls { display: flex; align-items: center; gap: 5px; width: 100%; }
.shop-admin-controls input[type=number] { min-width: 0; width: 65px; padding: 5px; font: 700 15px 'Baloo 2', sans-serif; }
.shop-admin-controls input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 20px; }
.shop-enable-label { display: flex; flex-direction: column; align-items: center; font-size: 11px; }
.shop-subtabs { flex-wrap: wrap; gap: 4px; padding-top: 4px; }
.shop-subtabs .inventory-tab { flex: 0 0 auto; padding: 6px 10px; font-size: .78rem; }

/* Los paneles de juego quedan recortados y centrados dentro del escenario. */
#stage-floor > .modal-overlay { position: absolute; inset: 0; z-index: 90; padding: 12px; }
#stage-floor > .modal-overlay .modal-window { max-height: calc(100% - 8px); }
#stage-floor > #shop-overlay .shop-window { max-height: calc(100% - 8px); }

.stage-transition {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #ffe582;
  background: #17233f;
  opacity: 1;
  transition: opacity .18s ease;
}
.stage-transition.is-leaving { opacity: 0; pointer-events: none; }
.stage-transition-content { display: grid; justify-items: center; gap: 14px; text-align: center; font: 800 clamp(1.1rem, 2.5vw, 1.7rem)/1.2 "Baloo 2", sans-serif; }
.stage-transition-mark { display: block; width: clamp(130px, 18vw, 210px); height: auto; animation: stageTransitionPulse 1.4s ease-in-out infinite alternate; }
.stage-transition-back { margin-top: 6px; }
@keyframes stageTransitionPulse { from { transform: scale(.9); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .stage-transition, .stage-transition-mark { transition: none; animation: none; } }
.shop-admin-controls button { min-width: 0; padding: 5px; font-size: 13px; }

/* Chat rápido a la derecha para dejar espacio a las acciones. */
.room-quick-chat {
  left: auto;
  right: 20px;
  width: min(360px, calc(100% - 24px));
  transform: none;
}

.room-quick-chat:not(.is-active):not([hidden]) {
  display: block; padding: 0; border: 0; background: transparent;
  box-shadow: none; opacity: 1;
}
.room-quick-chat:not(.is-active) input,
.room-quick-chat:not(.is-active) button[type="submit"] { display: none; }
.room-quick-chat .room-quick-chat-help {
  width: 100%; height: auto; padding: 8px; background: transparent;
  border: 0; color: #633719; font: 600 .76rem/1.4 "Segoe UI", sans-serif;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
.room-quick-chat.is-active .room-quick-chat-help { display: none; }
.room-quick-chat .room-quick-chat-help:hover,
.room-quick-chat .room-quick-chat-help:focus-visible { background: transparent; }

@media (max-width: 900px) {
  .room-quick-chat {
    left: 50%;
    right: auto;
    bottom: 72px !important;
    width: min(360px, calc(100% - 24px));
    transform: translateX(-50%);
  }
  .room-chat-toggle { right: 8px; bottom: 8px; }
  .room-chat-panel { right: 8px; bottom: 54px; width: calc(100% - 16px); height: min(440px, calc(100% - 70px)); }
}

/* Beta v4.2: inventory window and illustrated close control. */
.inventory-window {
  --window-surface: #f7e0cb;
  position: relative;
  height: 400px;
  padding: 72px 18px 18px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}
.inventory-window::before {
  content: "";
  position: absolute;
  inset: 48px 0 0;
  border: 0 solid transparent;
  border-image: url("../assets/ui/inventory/frame.png") 120 fill / 39px / 0 stretch;
  pointer-events: none;
  z-index: -1;
}
.inventory-window .modal-topbar {
  position: absolute;
  inset: 0 0 auto;
  height: 50px;
  padding: 0;
  justify-content: center;
}
.inventory-window .modal-topbar::before {
  content: none;
  position: absolute;
  top: 0; left: 50%;
  width: 372px; height: 50px;
  transform: translateX(-50%);
  background: url("../assets/ui/inventory/title-tab.svg") center / 100% 100% no-repeat;
  z-index: -1;
  pointer-events: none;
}
.inventory-window .modal-topbar h2 { color: #633719; }
.inventory-window .inventory-grid { min-height: 0; }
.inventory-window .inventory-item { position: relative; background: transparent; border: 0; }
.inventory-window .inventory-tabs { overflow: hidden; flex-wrap: wrap; flex-shrink: 0; border-bottom: 0; padding-right: 48px; }
.inventory-window .inventory-tab { border-bottom: 0; }
.inventory-window .inventory-tab.is-active { color: #352316; font-weight: 800; }
.inventory-window .inventory-grid { overflow: hidden; }
#inventory-fish-count, #inventory-water-count, #inventory-can-count {
  position: absolute; top: 0; right: 4px; z-index: 2;
  font: 800 24px/1.2 "Baloo 2", sans-serif; color: #fddc35;
  -webkit-text-stroke: 2px #9c7514; paint-order: stroke fill;
  pointer-events: none;
}
#inventory-water .inventory-item-visual img { width: 88px; height: 105px; max-width: none; transform: rotate(-12deg); transform-origin: center; }
.inventory-pages { position: absolute; left: 28px; right: 28px; bottom: 18px; display: flex; gap: 10px; pointer-events: none; }
.inventory-pages[hidden], .inventory-pages button[hidden] { display: none; }
.inventory-pages button { border: 0; padding: 0; width: 38px; height: 38px; background: transparent; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; pointer-events: auto; transition: transform .15s ease; }
#inventory-next { margin-left: auto; }
.inventory-pages img { width: 100%; height: 100%; object-fit: contain; }
.inventory-pages button:hover { transform: scale(1.02); }
.inventory-status:empty { display: none; }
.inventory-close-icon {
  position: absolute;
  top: 72px; right: 36px; margin-top: 0;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 6px;
  border: 0; border-radius: 50%;
  background: transparent; box-shadow: none;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
  transition: transform .15s ease;
}
.inventory-close-icon img { display: block; width: 32px; height: 32px; object-fit: contain; pointer-events: none; }
.inventory-close-icon:hover { transform: scale(1.02); }
.inventory-close-icon:active { transform: translateY(1px) scale(.94); }
.inventory-close-icon:focus-visible { outline: 3px solid #244962; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .inventory-close-icon, .inventory-pages button { transition: none; }
}

/* Beta v4.1: illustrated action icons, with selection only for panels. */
#stage-floor:not(.is-editing) #actions-dock { gap: 24px; }
#actions-dock .action-group { display: flex; gap: 8px; flex: 0 0 auto; }
#actions-dock .cooldown-ring::before,
#actions-dock .cooldown-ring::after { display: none; }
#actions-dock .cooldown-label {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  min-height: 0;
  padding: 2px 5px;
  border-radius: 6px;
  background: #fff9ec;
  color: #45230f;
  font: 700 12px/1.2 "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
#actions-dock .cooldown-label:empty { display: none; }
#actions-dock .is-cooling-down .action-art { opacity: .65; }
#actions-dock .action-art {
  display: block;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  object-fit: contain;
  pointer-events: none;
  filter: none;
  transition: filter .18s ease;
}
#actions-dock .action-circle[aria-expanded="true"] .action-art {
  filter: drop-shadow(0 0 3px rgba(255, 255, 244, 1))
    drop-shadow(0 0 8px rgba(255, 218, 122, 1));
}
#stage-floor:not(.is-editing) #actions-dock .action-circle {
  padding: 4px;
  background: transparent;
  transform: none;
  transition: transform .15s ease;
}
#stage-floor:not(.is-editing) #actions-dock .action-circle-wrap,
#stage-floor:not(.is-editing) #actions-dock .cooldown-ring { width: 92px; }
#stage-floor:not(.is-editing) #actions-dock .cooldown-ring { height: 92px; }
#actions-dock .action-circle::after { display: none; }
#stage-floor:not(.is-editing) #actions-dock .action-circle:hover:not(:disabled) {
  background: transparent;
  transform: translateY(-2px) scale(1.06);
}
#stage-floor:not(.is-editing) #actions-dock .action-circle:active:not(:disabled) {
  transform: translateY(1px) scale(.94);
}
#stage-floor:not(.is-editing) #actions-dock .action-circle[aria-expanded="true"] {
  background: transparent;
}
#stage-floor:not(.is-editing) #actions-dock .action-circle:focus-visible {
  outline: 3px solid #244962;
  outline-offset: -3px;
}
@media (max-width: 640px) {
  #stage-floor:not(.is-editing) #actions-dock { gap: 16px; }
  #actions-dock .action-group { gap: 4px; }
  #stage-floor:not(.is-editing) #actions-dock .action-circle-wrap,
  #stage-floor:not(.is-editing) #actions-dock .cooldown-ring { width: 80px; }
  #stage-floor:not(.is-editing) #actions-dock .cooldown-ring { height: 80px; }
  #actions-dock .action-art { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  #stage-floor:not(.is-editing) #actions-dock .action-circle { transition: none; }
  #actions-dock .action-art { transition: none; }
}

/* Beta v4.2.8: encabezado y menú de usuario. */
.app-header { background: none; box-shadow: none; border: none; }
#btn-opciones { width: auto; min-width: 44px; gap: 8px; padding: 8px 12px; font: 700 1rem/1.2 "Baloo 2", sans-serif; }
#options-username { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Beta v4.2.9: ventana simplificada, exclusiva para consumibles. */
.inventory-window {
  width: min(760px, 100%); height: auto; aspect-ratio: 1006 / 652;
  padding: 24px 26px 68px; border-radius: 26px;
  background: url('../assets/ui/inventory/window-v2.png') center / 100% 100% no-repeat;
  box-shadow: 0 3px 5px #0003;
}
.inventory-window::before { content: none; }
.inventory-window .inventory-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  grid-template-rows: repeat(2, minmax(0,1fr)); gap: 14px 18px;
  padding: 16px 8px; flex: 1; min-height: 0; overflow: hidden;
}
.inventory-window .inventory-item { min-height: 0; padding: 14px 4px 4px; }
.inventory-window .inventory-item[hidden] { display: none; }
.inventory-window .inventory-item-visual { height: 120px; }
#inventory-water .inventory-item-visual img { height: 120px; width: 96px; }
.inventory-window .inventory-close-icon { top: -19px; right: -15px; width: 48px; height: 48px; }
.inventory-window .inventory-close-icon img { width: 36px; height: 36px; }
.inventory-window .inventory-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
#housing-edit-open { white-space: nowrap; font: 700 .85rem 'Baloo 2', sans-serif; }

/* Beta v4.3: botón Contactos (ex Amigos) y herramientas + / − como íconos SVG.
   Mismo lenguaje que la barra de acciones: sin fondo ni borde, elevación
   suave al pasar el cursor, se hunde al presionar y resplandor mientras su
   panel está abierto. */
#stage-floor .room-chat-toggle {
  display: grid;
  place-items: center;
  width: 76px;
  min-width: 0;
  height: 76px;
  min-height: 0;
  padding: 4px;
  border: none;
  background: transparent;
  box-shadow: none;
  transition: transform .15s ease;
}
#stage-floor .room-chat-toggle:hover { background: transparent; transform: translateY(-2px) scale(1.06); }
#stage-floor .room-chat-toggle:active { transform: translateY(1px) scale(.94); }
#stage-floor .room-chat-toggle:focus-visible { outline: 3px solid #244962; outline-offset: -3px; }
#stage-floor .room-chat-toggle.is-selected { box-shadow: none; }
.room-chat-toggle-art { width: 68px; height: auto; pointer-events: none; }
.room-chat-toggle.is-selected .room-chat-toggle-art {
  filter: drop-shadow(0 0 3px rgba(255, 255, 244, 1)) drop-shadow(0 0 8px rgba(255, 218, 122, 1));
}
#stage-floor .room-chat-toggle.is-offline { opacity: .72; }
#stage-floor .room-chat-toggle.is-offline::after { content: none; }
/* El punto de conexión sólo aparece cuando no hay conexión. */
#stage-floor .room-chat-toggle .room-chat-contact-dot { display: none; }
#stage-floor .room-chat-toggle.is-offline .room-chat-contact-dot {
  display: block; position: absolute; left: 8px; bottom: 10px;
  width: 12px; height: 12px; border: 2px solid #fff6e4; border-radius: 50%;
  background: #d64545; box-shadow: none;
}
#stage-floor .room-chat-toggle b {
  position: absolute; top: 2px; right: 0;
  min-width: 22px; height: 22px; margin: 0; padding: 0 6px;
  display: grid; place-items: center;
  border: 2px solid #fff6e4; border-radius: 11px;
  background: #d83b3e; color: #fff;
  font: 700 .72rem/1 'Baloo 2', Arial, sans-serif;
}
#stage-floor .room-chat-toggle b[hidden] { display: none; }

.room-chat-tools { gap: 18px; align-items: center; }
.room-chat-tools .room-chat-tool-icon {
  position: relative;
  display: grid; place-items: center;
  width: 58px; height: 52px; padding: 2px;
  border: none; border-radius: 0; background: transparent;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; transition: transform .15s ease;
}
.room-chat-tools .room-chat-tool-icon img { width: 44px; height: 44px; object-fit: contain; pointer-events: none; }
/* El − es muy ancho y bajo: se muestra al mismo ancho visual que el +. */
.room-chat-tools .room-chat-tool-icon:hover { transform: translateY(-2px) scale(1.06); }
.room-chat-tools .room-chat-tool-icon:active { transform: translateY(1px) scale(.94); }
.room-chat-tools .room-chat-tool-icon:focus-visible { outline: 3px solid #244962; outline-offset: 0; }
.room-chat-tools .room-chat-tool-icon b {
  position: absolute; top: -2px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border: 2px solid #fff6e4; border-radius: 10px;
  background: #d83b3e; color: #fff;
  font: 700 .68rem/1 'Baloo 2', Arial, sans-serif;
}
.room-chat-tools .room-chat-tool-icon b[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  #stage-floor .room-chat-toggle, .room-chat-tools .room-chat-tool-icon { transition: none; }
}
/* El panel sube para no tapar el ícono de Contactos, que ahora es más alto. */
#stage-floor .room-chat-panel { bottom: 102px; height: min(510px, calc(100% - 122px)); }
@media (max-width: 900px) {
  #stage-floor .room-chat-panel { bottom: 90px; height: min(440px, calc(100% - 106px)); }
}

/* Beta v4.3.1: Aceptar (+ verde), Rechazar (− rojo), Visitar, Chat y Enviar como íconos SVG. */
.friend-icon-btn,
.room-chat-friend-actions .friend-icon-btn,
.friend-item-actions .friend-icon-btn {
  position: relative;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; min-width: 0; padding: 2px;
  border: none; border-radius: 0; background: transparent; box-shadow: none;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; transition: transform .15s ease;
}
.friend-icon-btn:hover:not(:disabled) { background: transparent; filter: none; transform: translateY(-2px) scale(1.06); }
.friend-icon-btn:active:not(:disabled) { transform: translateY(1px) scale(.94); }
.friend-icon-btn:focus-visible { outline: 3px solid #244962; outline-offset: 0; }
.friend-icon-btn:disabled { opacity: .5; cursor: wait; }
.friend-icon-art { width: 38px; height: 38px; object-fit: contain; pointer-events: none; }
.friend-icon-badge {
  position: absolute; top: -3px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  border: 2px solid #fff6e4; border-radius: 9px;
  background: #d83b3e; color: #fff;
  font: 700 .64rem/1 'Baloo 2', Arial, sans-serif;
}
.room-chat-friend-actions { gap: 8px; align-items: center; }
.friend-item-actions:has(.friend-icon-btn) { display: inline-flex; gap: 10px; align-items: center; }

.room-chat-form .room-chat-send-icon {
  display: grid; place-items: center;
  width: 46px; min-width: 0; height: 46px; padding: 2px;
  border: none; border-radius: 0; background: transparent;
  cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; transition: transform .15s ease;
}
.room-chat-form .room-chat-send-icon img { width: 42px; height: 42px; pointer-events: none; }
.room-chat-form .room-chat-send-icon:hover:not(:disabled) { background: transparent; transform: translateY(-2px) scale(1.06); }
.room-chat-form .room-chat-send-icon:active:not(:disabled) { transform: translateY(1px) scale(.94); }
.room-chat-form .room-chat-send-icon:focus-visible { outline: 3px solid #244962; outline-offset: 0; }
@media (prefers-reduced-motion: reduce) {
  .friend-icon-btn, .room-chat-form .room-chat-send-icon { transition: none; }
}

/* ===== Beta v4.3.2: Contactos y chat dentro del celular ilustrado ===== */
/* Marco: assets/ui/phone/phone.svg (710 × 1100). La pantalla ocupa el
   rectángulo crema medido sobre ese arte (11,4 % / 14 % / 11,8 % / 12,1 %). */
#stage-floor #room-chat-panel.phone-panel {
  right: 16px;
  bottom: 102px;
  width: auto;
  height: min(580px, calc(100% - 122px));
  max-height: none;
  aspect-ratio: 710 / 1100;
  padding: 0;
  border: none;
  border-radius: 0;
  color: #4a2c17;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 8px 14px rgba(69, 35, 15, .28));
  font-family: Arial, Helvetica, sans-serif;
  overflow: visible;
}
#stage-floor #room-chat-panel.phone-panel:not([hidden]) { display: block; }
#room-chat-panel .phone-frame-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; user-select: none;
}
#room-chat-panel .phone-screen {
  position: absolute;
  left: 11.4%; right: 11.8%; top: 14%; bottom: 12.1%;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 18px 18px 22px 22px;
  background: #faf2d9;
}

/* Encabezado: avatar redondo + nombre + ••• (como en la referencia). */
#room-chat-panel .phone-screen header {
  position: relative;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  min-height: 0;
  padding: 10px 10px 9px;
  border: none;
  border-bottom: 2px solid #efe0bd;
  background: #f5e8c7;
  color: #4a2c17;
}
#room-chat-panel .phone-screen header > div:not(.phone-menu-wrap) {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: 1fr; gap: 2px;
}
#room-chat-panel header .hud-eyebrow { display: none; }
#room-chat-panel header strong {
  grid-column: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #4a2c17;
  font: 700 1.05rem/1.05 "Baloo 2", Arial, sans-serif;
}
#room-chat-panel .room-chat-participants {
  grid-column: 1;
  color: #9a7650; font: 400 .66rem/1.1 Arial, sans-serif;
}
#room-chat-panel header .room-chat-back {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  color: #7a5230; background: #ead7ae;
  font: 700 .9rem/1 Arial, sans-serif; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
#room-chat-panel header .room-chat-back[hidden] { display: none; }
#room-chat-panel header .room-chat-back:hover { background: #e2c994; }
.phone-header-avatar { display: contents; }
.phone-header-avatar[hidden] { display: none; }

/* Avatares: cabeza de la mascota recortada, aro verde conectado / gris no. */
.contact-avatar {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  overflow: hidden;
  border: 3px solid #b5a797;
  border-radius: 50%;
  background: #fff8e6;
  box-sizing: border-box;
}
.contact-avatar.is-online { border-color: #43a957; }
.contact-avatar.is-offline { border-color: #b5a797; }
.contact-avatar.is-room { border-color: #d7bf8f; background: #fff3d6; }
.contact-avatar.is-room img { width: 80%; height: 80%; object-fit: contain; }
.contact-avatar.is-empty::after {
  content: ""; width: 55%; height: 55%;
  background: #c9a877;
  -webkit-mask: url("../assets/ui/phone/paw-mask.svg") center / contain no-repeat;
          mask: url("../assets/ui/phone/paw-mask.svg") center / contain no-repeat;
}
.contact-avatar-stage {
  position: absolute;
  width: 200%; height: 200%;
  left: -50%; top: -30.5%;
  pointer-events: none;
}
#room-chat-panel header .contact-avatar { width: 42px; height: 42px; }

/* Menú ••• */
.phone-menu-wrap { position: relative; flex: 0 0 auto; display: grid; }
#room-chat-panel header .phone-menu-btn {
  display: flex; gap: 3px; align-items: center; justify-content: center;
  width: 34px; height: 26px; padding: 0;
  border: none; border-radius: 13px; background: transparent; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
#room-chat-panel header .phone-menu-btn[hidden] { display: none; }
#room-chat-panel header .phone-menu-btn i { width: 7px; height: 7px; border-radius: 50%; background: #d7bf8f; }
#room-chat-panel header .phone-menu-btn:hover i,
#room-chat-panel header .phone-menu-btn[aria-expanded="true"] i { background: #a88455; }
.phone-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 5;
  display: grid; min-width: 160px; padding: 6px;
  border: 2px solid #e5cf9f; border-radius: 14px;
  background: #fffaf0; box-shadow: 0 6px 16px rgba(69, 35, 15, .2);
}
.phone-menu[hidden] { display: none; }
#room-chat-panel header .phone-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: auto; padding: 7px 8px;
  border: none; border-radius: 10px; background: transparent;
  color: #4a2c17; font: 700 .8rem/1 Arial, sans-serif; text-align: left; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
#room-chat-panel header .phone-menu button:hover,
#room-chat-panel header .phone-menu button:focus-visible { background: #f5e8c7; }
.phone-menu img { width: 26px; height: 26px; object-fit: contain; }

/* Contactos */
#room-chat-panel .room-chat-contacts {
  flex: 1; min-height: 0;
  padding: 8px 0 0;
  overflow-y: auto;
  background: transparent;
  scrollbar-width: thin; scrollbar-color: #d7bf8f transparent;
}
#room-chat-panel .room-chat-tools { margin: 0 auto 8px; gap: 14px; }
#room-chat-panel .room-chat-tools .room-chat-tool-icon { width: 46px; height: 42px; }
#room-chat-panel .room-chat-tools .room-chat-tool-icon img { width: 36px; height: 36px; }
#room-chat-panel .room-chat-contact-list { display: grid; gap: 6px; padding: 0 8px 10px; }
#room-chat-panel .room-chat-contact-item {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
  padding: 7px 8px;
  border: 2px solid #efdfbb;
  border-radius: 16px;
  background: #fffaf0;
  color: #4a2c17;
}
#room-chat-panel .room-chat-contact-item:last-child { border-bottom: 2px solid #efdfbb; }
#room-chat-panel .room-chat-contact-item:hover,
#room-chat-panel .room-chat-contact-item:focus-visible { background: #fdf3dc; outline: none; }
#room-chat-panel button.room-chat-contact-item:focus-visible { outline: 3px solid #244962; outline-offset: -3px; }
#room-chat-panel .room-chat-list-copy strong { color: #4a2c17; font: 700 .82rem/1.1 "Baloo 2", Arial, sans-serif; }
#room-chat-panel .room-chat-list-copy small { color: #9a7650; font: 400 .66rem/1.1 Arial, sans-serif; }
#room-chat-panel .room-chat-list-badge { border-radius: 10px; }
#room-chat-panel .room-chat-friend-item { grid-template-columns: 40px minmax(0, 1fr) auto; }
#room-chat-panel .room-chat-friend-actions { grid-column: auto; gap: 2px; }
#room-chat-panel .room-chat-friend-actions .friend-icon-btn { width: 34px; height: 34px; }
#room-chat-panel .room-chat-friend-actions .friend-icon-art { width: 30px; height: 30px; }
#room-chat-panel .room-chat-contacts-empty { color: #9a7650; }

/* Conversación: globos crema (recibidos, izquierda) y menta (propios, derecha). */
#room-chat-panel .room-chat-conversation { flex: 1; min-height: 0; display: flex; flex-direction: column; background: transparent; }
#room-chat-panel .room-chat-conversation[hidden] { display: none; }
#room-chat-panel .room-chat-history { flex: 1; min-height: 0; }
#room-chat-panel .room-chat-status,
#room-chat-panel .room-chat-typing { border: none; background: transparent; color: #9a7650; }
#room-chat-panel .room-chat-messages {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0; padding: 10px 10px 12px;
  background: transparent;
  scrollbar-width: thin; scrollbar-color: #d7bf8f transparent;
}
#room-chat-panel .room-chat-message,
#room-chat-panel .room-chat-message.is-own {
  position: relative;
  display: grid; gap: 2px; justify-items: start;
  max-width: 82%;
  align-self: flex-start;
  padding: 8px 12px 9px;
  border: 2px solid #ead7b3;
  border-radius: 16px 16px 16px 5px;
  background: #fbf0dc;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55);
}
#room-chat-panel .room-chat-message.is-own {
  align-self: flex-end; justify-items: end;
  border-color: #bfdcc6;
  border-radius: 16px 16px 5px 16px;
  background: #dcefe0;
}
#room-chat-panel .room-chat-message-meta { color: #a07a52; font: 700 .6rem/1.1 Arial, sans-serif; }
#room-chat-panel .room-chat-message.is-own .room-chat-message-meta { color: #6f9a7b; }
#room-chat-panel .room-chat-message-body,
#room-chat-panel .room-chat-message.is-own .room-chat-message-body {
  max-width: none; padding: 0; border-radius: 0; background: transparent;
  color: #4a2c17; font: 400 .82rem/1.3 Arial, sans-serif; overflow-wrap: anywhere;
}
#room-chat-panel .room-chat-empty { color: #9a7650; }

/* Barra inferior: campo + Enviar. */
#room-chat-panel .room-chat-form {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 6px; padding: 8px;
  border: none; border-top: 2px solid #efe0bd;
  background: #f5e8c7;
}
#room-chat-panel .room-chat-form input {
  height: 38px; padding: 0 12px;
  border: 2px solid #e8d6b5; border-radius: 19px;
  background: #fffaf0; color: #4a2c17;
  font: 400 .8rem/1 Arial, sans-serif;
}
#room-chat-panel .room-chat-form input:focus { border-color: #d7a95f; outline: none; }
#room-chat-panel .room-chat-form .room-chat-send-icon { width: 40px; height: 40px; }
#room-chat-panel .room-chat-form .room-chat-send-icon img { width: 38px; height: 38px; }

/* Huella del marco: botón de inicio (vuelve a Contactos / cierra). */
#room-chat-panel .phone-home-btn {
  position: absolute; left: 42%; width: 16%; bottom: 2.2%; height: 8.6%;
  padding: 0; border: none; border-radius: 50%;
  background: transparent; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
#room-chat-panel .phone-home-btn:hover { background: radial-gradient(closest-side, rgba(255, 244, 190, .55), transparent); }
#room-chat-panel .phone-home-btn:active { background: radial-gradient(closest-side, rgba(122, 74, 42, .22), transparent); }
#room-chat-panel .phone-home-btn:focus-visible { outline: 3px solid #244962; outline-offset: 0; }

.friend-search-btn {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 50px; height: 50px; padding: 2px;
  border: none; background: transparent; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; transition: transform .15s ease;
}
.friend-search-btn img { width: 44px; height: 44px; pointer-events: none; }
.friend-search-btn:hover { transform: translateY(-2px) scale(1.06); }
.friend-search-btn:active { transform: translateY(1px) scale(.94); }
.friend-search-btn:focus-visible { outline: 3px solid #244962; outline-offset: 0; }

@media (max-width: 900px) {
  #stage-floor #room-chat-panel.phone-panel { right: 8px; bottom: 90px; height: min(480px, calc(100% - 100px)); }
}

/* ===== Beta v4.3.3: el marco va en la capa de arriba ===== */
/* phone.svg ahora tiene la pantalla transparente (hueco). El contenido va
   debajo y se extiende unos píxeles por detrás del borde, así el marco
   recorta las esquinas y no se ven cortes ni fondos desalineados.
   Hueco medido sobre el arte: x 80–627, y 154–968 de 710 × 1100. */
#room-chat-panel .phone-frame-art { z-index: 3; }
#room-chat-panel .phone-screen {
  z-index: 1;
  left: 10.1%; right: 10.6%; top: 13.3%; bottom: 11.3%;
  border-radius: 0;
  background: #faf2d9;
}
#room-chat-panel .phone-home-btn { z-index: 4; }
#room-chat-panel .phone-screen header { padding: 13px 14px 9px; }
#room-chat-panel .room-chat-form { padding: 9px 14px 12px; }
#room-chat-panel .room-chat-contact-list { padding: 0 12px 12px; }
#room-chat-panel .room-chat-tools .room-chat-tool-icon[hidden] { display: none; }

/* Pantallas Buscar y Solicitudes */
#room-chat-panel .phone-view { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; }
#room-chat-panel .phone-view[hidden] { display: none; }
#room-chat-panel .phone-search-form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; margin: 0;
}
#room-chat-panel .phone-search-form input {
  min-width: 0; height: 38px; padding: 0 12px;
  border: 2px solid #e8d6b5; border-radius: 19px;
  background: #fffaf0; color: #4a2c17; font: 400 .8rem/1 Arial, sans-serif;
}
#room-chat-panel .phone-search-form input:focus { border-color: #d7a95f; outline: none; }
#room-chat-panel .phone-search-form .friend-search-btn { width: 42px; height: 42px; }
#room-chat-panel .phone-search-form .friend-search-btn img { width: 36px; height: 36px; }
#room-chat-panel .phone-view-note {
  margin: 12px 2px 0; color: #7a5a3a; font: 400 .78rem/1.35 Arial, sans-serif; text-align: center;
}
#room-chat-panel .phone-view-note[hidden] { display: none; }
#room-chat-panel #add-friend-result .secondary-btn {
  display: block; margin: 10px auto 0; padding: 8px 14px;
  border: 2px solid #9fcfa9; border-radius: 16px; background: #dcefe0; color: #2f5d3a;
  font: 700 .78rem/1 Arial, sans-serif; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
#room-chat-panel #add-friend-result .secondary-btn:hover:not(:disabled) { background: #cde8d3; }
#room-chat-panel .phone-requests-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#room-chat-panel .phone-requests-list .friend-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 8px 7px 12px;
  border: 2px solid #efdfbb; border-radius: 16px; background: #fffaf0;
}
#room-chat-panel .phone-requests-list .friend-item-name { color: #4a2c17; font: 700 .85rem/1.1 "Baloo 2", Arial, sans-serif; }
#room-chat-panel .phone-requests-list .friend-icon-btn { width: 36px; height: 36px; }
#room-chat-panel .phone-requests-list .friend-icon-art { width: 30px; height: 30px; }

/* Confirmación dentro del celular (Eliminar amigo). */
#room-chat-panel .phone-confirm {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; padding: 16px;
  background: rgba(74, 44, 23, .28);
}
#room-chat-panel .phone-confirm[hidden] { display: none; }
#room-chat-panel .phone-confirm-card {
  display: grid; justify-items: center; gap: 10px;
  width: 100%; padding: 16px 12px 12px;
  border: 2px solid #e5cf9f; border-radius: 18px;
  background: #fffaf0; box-shadow: 0 6px 16px rgba(69, 35, 15, .22);
}
#room-chat-panel .phone-confirm-card p { margin: 0; color: #4a2c17; font: 700 .9rem/1.3 "Baloo 2", Arial, sans-serif; text-align: center; }
#room-chat-panel .phone-confirm-actions { display: flex; gap: 18px; }
#room-chat-panel .phone-screen header > .phone-menu-wrap { flex: 0 0 auto; min-width: 0; }
#room-chat-panel .phone-screen header { padding-left: 20px; padding-right: 18px; }

/* Beta v4.3.4: navegación y confirmaciones del celular. */
#room-chat-panel[data-phone-view="contacts"] .phone-screen header { padding-inline: 20px; text-align: center; }
#room-chat-panel[data-phone-view="contacts"] .phone-menu-wrap,
#room-chat-panel[data-phone-view="contacts"] .room-chat-participants { display: none; }
#room-chat-panel header .room-chat-back,
#room-chat-panel header .room-chat-back:hover { background: transparent; padding: 2px; box-shadow: none; }
#room-chat-panel header .room-chat-back img { width: 22px; height: 22px; object-fit: contain; transition: transform .15s ease; }
#room-chat-panel header .room-chat-back:hover img { transform: scale(1.04); }
#room-chat-panel .phone-confirm:not([hidden]) .phone-confirm-card { animation: phone-confirm-enter .18s ease-out; }
@keyframes phone-confirm-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  #room-chat-panel .phone-confirm:not([hidden]) .phone-confirm-card { animation: none; }
  #room-chat-panel header .room-chat-back img { transition: none; }
}

/* Inventario cofre: arte vectorial y medallones de cantidad/espera. */
.inventory-window {
  aspect-ratio: 1200 / 720;
  padding: 0;
  background-image: url('../assets/ui/inventory/cofre/ventana.svg');
  border: 0; border-radius: 0; box-shadow: none;
  container-type: inline-size;
}
.inventory-window .inventory-grid { position: absolute; inset: 13% 8% 15%; padding: 0; gap: 8px 12px; }
.inventory-window .inventory-item { padding: 18px 0 0; display: grid; place-items: center; }
.inventory-window .inventory-item-visual { height: min(120px, 18cqw); }
#inventory-water .inventory-item-visual img { width: auto; height: min(120px, 18cqw); max-width: 100%; transform: none; }
.inventory-window .inventory-close-icon { top: 0; right: 0; width: 48px; height: 48px; padding: 0; z-index: 3; }
.inventory-window .inventory-close-icon img { width: 100%; height: 100%; }
#inventory-fish-count, #inventory-water-count, #inventory-can-count,
.inventory-window .inventory-fish-cooldown, .inventory-window .inventory-water-cooldown {
  display: grid; place-items: center;
  border: 2px solid #75400e;
  background: radial-gradient(ellipse at 33% 20%, #fff7b0 0%, #ffe06b 38%, #ffc632 73%, #e8a222 100%);
  color: #633300; -webkit-text-stroke: 0; text-shadow: none;
  box-shadow: inset 0 0 0 2px #fff0a0, 0 1px 1px #5c310b25;
  font-family: "Baloo 2", sans-serif; font-weight: 800;
}
#inventory-fish-count, #inventory-water-count, #inventory-can-count {
  top: 0; right: 0; min-width: 38px; width: max-content; height: auto; aspect-ratio: 1; padding: 3px; box-sizing: border-box;
  border-radius: 50%; font-size: 23px; line-height: 1;
}
#inventory-water-count { font-size: 28px; }
#inventory-can .inventory-item-visual img { transform: scale(.8); }
.inventory-window .inventory-fish-cooldown, .inventory-window .inventory-water-cooldown {
  border-radius: 20px; padding: 2px 8px; font-size: 13px; line-height: 1.25;
}
.inventory-window .inventory-fish-overlay[hidden] { display: none; }
@media (max-width: 480px) {
  #inventory-fish-count, #inventory-water-count, #inventory-can-count { min-width: 28px; height: auto; font-size: 18px; padding: 2px; }
  #inventory-water-count { font-size: 22px; }
  .inventory-window .inventory-close-icon { width: 40px; height: 40px; }
  .inventory-window .inventory-fish-cooldown, .inventory-window .inventory-water-cooldown { font-size: 11px; padding-inline: 5px; }
}

/* Beta v4.3.5: saldo dentro del escenario y cierre dentro del marco. */
#stage-floor .game-coins {
  position: absolute; top: 16px; right: 22px; z-index: 8;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
  max-width: 44%;
}
.game-coins img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.game-coins strong {
  font: 900 32px/1 "Baloo 2", sans-serif;
  color: #ffe052; -webkit-text-stroke: 3px #78410d; paint-order: stroke fill;
  text-shadow: 0 3px 0 #512a0c; overflow-wrap: anywhere;
}
/* v4.6.11: recordatorio del giro diario, colgado debajo de las monedas. */
#stage-floor .roulette-reminder {
  position: absolute; top: 72px; right: 18px; z-index: 8;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: min(260px, 44%);
  padding: 5px 14px 6px 6px;
  border: 3px solid #c98f14; border-radius: 999px;
  background: linear-gradient(#fff3b8, #f7c843);
  box-shadow: inset 0 -3px 0 #e5ab25, inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 #a8740f, 0 8px 14px rgba(60, 30, 5, .25);
  color: #4b331d; font: 700 13px/1.15 "Baloo 2", sans-serif; text-align: left;
  transform-origin: 85% 0;
  animation: rouletteReminderIn .45s cubic-bezier(.2, 1.4, .4, 1), rouletteReminderNudge 4s ease-in-out 1s infinite;
  transition: filter .15s ease;
}
#stage-floor .roulette-reminder[hidden] { display: none; }
#stage-floor .roulette-reminder::before {
  content: ""; position: absolute; top: -9px; right: 34px;
  border: 6px solid transparent; border-bottom-color: #c98f14; border-top: 0;
}
#stage-floor .roulette-reminder img { width: 34px; height: 34px; object-fit: contain; flex: none; }
#stage-floor .roulette-reminder b { display: block; font-weight: 900; font-size: 15px; color: #78410d; }
#stage-floor .roulette-reminder:hover { filter: brightness(1.05); }
#stage-floor .roulette-reminder:active { transform: scale(.96); }
#stage-floor .roulette-reminder:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#stage-floor.is-visiting .roulette-reminder { display: none; }
@keyframes rouletteReminderIn { from { opacity: 0; transform: translateY(-8px) scale(.85); } }
@keyframes rouletteReminderNudge {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(-3deg); }
  90% { transform: rotate(3deg); }
  94% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { #stage-floor .roulette-reminder { animation: none; } }
.inventory-window .inventory-close-icon { top: 10px; right: 12px; }
@media (max-width: 600px) {
  #stage-floor .roulette-reminder { top: 52px; right: 10px; gap: 5px; padding: 3px 10px 4px 4px; font-size: 11px; }
  #stage-floor .roulette-reminder img { width: 26px; height: 26px; }
  #stage-floor .roulette-reminder b { font-size: 13px; }
  #stage-floor .game-coins { top: 12px; right: 14px; gap: 5px; }
  .game-coins img { width: 32px; height: 32px; }
  .game-coins strong { font-size: 25px; -webkit-text-stroke-width: 2px; }
  .inventory-window .inventory-close-icon { top: 7px; right: 8px; }
}
/* v4.4: vestidor con prueba temporal de conjuntos. */
.wardrobe-window {
  position: relative; width: min(1000px, 96vw); height: min(640px, 90vh); max-height: none;
  padding: 98px 70px 75px; border: 0; border-radius: 0;
  background: url('../assets/ui/wardrobe/ventana.svg') center / 100% 100% no-repeat;
  box-shadow: none; overflow: visible; color: #603817; font-family: 'Baloo 2', sans-serif;
}
.dressing-close { position: absolute; top: 16px; right: 19px; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; }
.dressing-close img { width: 100%; height: 100%; }
.dressing-close:hover { transform: scale(1.02); }
.dressing-layout { display: grid; grid-template-columns: 36% minmax(0,1fr); gap: 24px; height: 100%; min-height: 0; }
.dressing-preview { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 0; border-radius: 45% 45% 22px 22px; background: radial-gradient(ellipse at 50% 50%, #fffdf2, #ebd8ae); padding: 10px 12px; }
.dressing-preview h3 { margin: 0; font-size: 22px; }
#wardrobe-preview { flex: 1; min-height: 0; width: 100%; height: auto; }
#wardrobe-preview .pet-layer { overflow: visible; }
.dressing-preview button, .dressing-actions button, #wardrobe-shop { border: 2px solid #b89762; border-radius: 22px; background: linear-gradient(#fffcf0,#f0dfbb); color: #613817; padding: 7px 20px; font: 800 18px 'Baloo 2',sans-serif; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; box-shadow: inset 0 2px #fff9df,0 2px 0 #ad86563b; }
.dressing-collection { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dressing-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-bottom: 10px; }
.dressing-tabs button { display: grid; justify-items: center; padding: 5px 2px; border: 2px solid #e2cc9f; border-radius: 14px; background: #f5e8cd; color: #603817; font: 800 14px 'Baloo 2',sans-serif; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; }
.dressing-tabs button.is-active { background: linear-gradient(#ffe89d,#ffd15f); border-color: #cc942b; }
.dressing-tabs img { width: 46px; height: 35px; object-fit: contain; }
.wardrobe-window .wardrobe-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0; flex: 1; min-height: 0; overflow: hidden; }
.wardrobe-window .wardrobe-item { position: relative; display: grid; place-items: center; padding: 8px; min-height: 0; border: 2px solid #ead9b6; border-radius: 18px; background: #fff8e750; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; }
.wardrobe-window .wardrobe-item img { width: 100%; height: 100%; min-height: 0; object-fit: contain; max-height: 115px; }
.wardrobe-window .wardrobe-item.is-selected { border-color: #d69519; background: #fffbee; }
.wardrobe-window .wardrobe-item.is-selected::after { content: '✓'; position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #378832; border-radius: 50%; background: linear-gradient(#9fe671,#41a747); color: white; font: 900 19px/1 sans-serif; }
.wardrobe-window button:focus-visible { outline: 3px solid #226886; outline-offset: 2px; }
.dressing-pages { display: flex; justify-content: center; align-items: center; gap: 20px; min-height: 36px; margin: 7px 0; font-size: 18px; font-weight: 800; }
.dressing-pages button { border: 0; background: none; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; width: 30px; height: 30px; padding: 0; }
.dressing-pages button[hidden] { display: none; }
.dressing-pages img { width: 100%; height: 100%; }
#wardrobe-next img { transform: scaleX(-1); }
.dressing-actions { display: flex; justify-content: space-evenly; gap: 12px; border-top: 1px solid #e8d6af; padding-top: 8px; }
.dressing-actions #wardrobe-save { background: linear-gradient(#8ee366,#34aa3b); border-color: #39872c; color: white; text-shadow: 0 1px #34762b; flex: 1; }
#wardrobe-empty { text-align: center; font-size: 15px; }
#wardrobe-empty[hidden] { display: none; }
@media (max-width: 650px) {
 .wardrobe-window { height: min(660px,92vh); padding: 76px 24px 52px; }
 .dressing-layout { grid-template-columns: 1fr; grid-template-rows: 34% minmax(0,1fr); gap: 10px; }
 .dressing-preview { padding: 2px; border-radius: 20px; }
 .dressing-preview h3 { position: absolute; top: 5px; left: 9px; font-size: 14px; }
 #wardrobe-preview { width: 160px; flex: none; height: 100%; }
 .dressing-preview button { position: absolute; bottom: 8px; right: 8px; font-size: 12px; padding: 3px 7px; }
 .dressing-tabs { gap: 3px; margin-bottom: 6px; }
 .dressing-tabs button { font-size: 11px; padding: 2px; }
 .dressing-tabs img { height: 26px; }
 .wardrobe-window .wardrobe-grid { gap: 5px; }
 .wardrobe-window .wardrobe-item { padding: 3px; border-radius: 12px; }
 .wardrobe-window .wardrobe-item img { max-height: 74px; }
 .dressing-actions button { font-size: 15px; padding: 4px 9px; }
 .dressing-pages { min-height: 25px; margin: 3px; font-size: 14px; }
 .dressing-pages button { width: 23px; height: 23px; }
}

/* Mantener el marco completo también en el formato vertical. */
#wardrobe-preview .pet-layer { transform: scale(1.2); }
@media (max-width: 650px) {
 .wardrobe-window { background-size: 100% 100%; }
 #wardrobe-preview .pet-layer { transform: none; }
}

/* v4.4.2: categorías del vestidor representadas sólo por íconos. */
.dressing-tabs button,
.dressing-tabs button.is-active {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  padding: 7px; min-height: 58px; place-items: center;
}
.dressing-tabs img { width: 52px; height: 44px; transition: transform .15s ease, filter .15s ease; }
.dressing-tabs button.is-active img { filter: drop-shadow(0 0 4px #e1a52c); transform: scale(1.08); }
.dressing-tabs button:hover img { transform: scale(1.1); }
@media (max-width: 650px) {
 .dressing-tabs button { min-height: 42px; padding: 4px; }
 .dressing-tabs img { width: 40px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .dressing-tabs img { transition: none; } }

/* v4.4.3: armario de juguete y controles vectoriales. */
.wardrobe-window { background-image: url('../assets/ui/wardrobe/armario.svg'); padding: 88px 112px 84px; }
.dressing-layout { gap: 20px; }
.wardrobe-window .dressing-close { top: 76px; right: 108px; width: 38px; height: 38px; }
.dressing-preview { background: radial-gradient(ellipse at 50% 35%,#fffbed,#e8d2a6); border: 2px solid #fff4d6; }
.dressing-preview #wardrobe-clear,
.dressing-actions #wardrobe-save,
.dressing-actions #wardrobe-close-action { border: 0; background: none; box-shadow: none; padding: 0; width: 140px; height: 55px; flex: 0 1 160px; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; }
.dressing-preview #wardrobe-clear { flex: 0 0 48px; width: 125px; }
.dressing-actions button img,.dressing-preview button img { width: 100%; height: 100%; display: block; }
.dressing-actions { border: 0; padding-top: 0; flex-direction: row-reverse; }
#wardrobe-preview, #wardrobe-preview *, #wardrobe-preview::before, #wardrobe-preview::after { animation: none !important; transition: none !important; }
#wardrobe-preview .ropa-brazo { transform: scale(1.14); }
@media (max-width:650px) {
 .wardrobe-window { padding: 86px 43px 70px; }
 .wardrobe-window .dressing-close { top: 66px; right: 37px; width: 30px; height: 30px; }
 .dressing-layout { gap: 8px; }
 .dressing-preview #wardrobe-clear { width: 77px; height: 33px; }
 .dressing-actions #wardrobe-save,.dressing-actions #wardrobe-close-action { height: 42px; }
}
.wardrobe-window .dressing-close { top: 48px; z-index: 5; }
@media (max-width:650px) { .wardrobe-window .dressing-close { top: 58px; } }

/* v4.4.4: apoyo de la mascota sobre una tarima, sin sombra flotante. */
#wardrobe-preview::before { content: none; }
#wardrobe-preview .pet-layer { transform: none; object-fit: contain; }
.wardrobe-window { padding-inline: 60px; }
.wardrobe-window .dressing-close { right: 48px; }
@media (max-width:650px) {
 .wardrobe-window { padding-inline: 28px; }
 .wardrobe-window .dressing-close { right: 25px; }
}
/* v4.4.5: proporciones y pantalla del vector actualizado. */
#stage-floor #room-chat-panel.phone-panel { aspect-ratio: 798.1 / 1149.7; }
#room-chat-panel .phone-screen { z-index: 4; left: 14%; right: 14%; border-radius: 30px 30px 35px 35px; padding-top: 2%; }
#room-chat-panel .phone-home-btn { z-index: 5; }

/* v4.4.6: marco del celular siempre por encima de la pantalla. */
#room-chat-panel .phone-frame-art { z-index: 10; }
/* v4.4.6: el hover de «•••» sólo cambia el color de los puntos. */
#room-chat-panel header .phone-menu-btn:hover,
#room-chat-panel header .phone-menu-btn[aria-expanded="true"] { background: transparent; }

/* ===== Beta v4.5: ficha del personaje ===== */
/* assets/ui/ficha/ficha.svg mide 1100 × 639 (unidades u). La ficha se arma
   con tres cortes del mismo dibujo: arriba (0–305 u), necesidades (305–601 u)
   y base (601–639 u). Al plegarse, el corte del medio va a altura 0 y la
   base queda pegada a la cabecera. */
#wellbeing-widget.ficha {
  --fw: 360px;
  --u: calc(var(--fw) / 1100);
  position: absolute;
  top: 14px; left: 14px;
  width: var(--fw);
  padding: 0; margin: 0;
  border: 0; border-radius: 0;
  background: none; box-shadow: none;
  filter: drop-shadow(0 6px 10px rgba(60, 80, 30, .16));
  color: #3f4a2b;
}
#wellbeing-widget.ficha > div { position: relative; background: url("../assets/ui/ficha/ficha.svg") no-repeat; background-size: var(--fw) calc(639 * var(--u)); }
#wellbeing-widget.ficha > .ficha-top { height: calc(305 * var(--u)); background-position: 0 0; }
#wellbeing-widget.ficha > .ficha-needs {
  height: calc(296 * var(--u));
  overflow: hidden;
  background-position: 0 calc(-305 * var(--u));
  transition: height .38s ease;
}
#wellbeing-widget.ficha > .ficha-base { height: calc(38 * var(--u)); background-position: 0 calc(-601 * var(--u)); }
#wellbeing-widget.ficha.is-collapsed > .ficha-needs { height: 0; }

/* Mini-foto sobre el círculo del dibujo (centro 243,163 · radio 114 u).
   El aro sigue tomando el color del ánimo. */
#wellbeing-widget .wellbeing-avatar {
  position: absolute;
  left: calc(129 * var(--u)); top: calc(49 * var(--u));
  width: calc(228 * var(--u)); height: calc(228 * var(--u));
  margin: 0; box-sizing: border-box;
  border-width: calc(17 * var(--u));
  background: #fffbea;
  box-shadow: none;
}
#wellbeing-widget .wellbeing-avatar-stage { width: 200%; height: 200%; left: -50%; top: -30.5%; }

#wellbeing-widget .ficha-info {
  position: absolute;
  left: calc(385 * var(--u)); right: calc(170 * var(--u)); top: calc(78 * var(--u));
  display: grid; gap: calc(10 * var(--u));
}
#wellbeing-widget .ficha-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
#wellbeing-widget #pet-name {
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #33401f; font: 800 1.2rem/1.05 "Baloo 2", Arial, sans-serif;
}
#wellbeing-widget .hud-status-dot { position: static; flex: 0 0 8px; width: 8px; height: 8px; margin: 0; }
#wellbeing-widget .ficha-level-row strong { color: #6d7a55; font: 700 .8rem/1 "Baloo 2", Arial, sans-serif; }
#wellbeing-widget .ficha-level-track {
  height: calc(26 * var(--u)); min-height: 7px;
  overflow: hidden; border-radius: 999px;
  background: #dfe0c8; box-shadow: inset 0 1px 2px rgba(60, 70, 30, .18);
}
#wellbeing-widget .header-level-fill {
  width: 0; height: 100%; border-radius: inherit;
  background: linear-gradient(#7cc0f0, #4b95dc);
  transition: width .35s ease;
}

/* Flecha sobre el círculo chico (centro 1015,120 · radio 57 u). */
#wellbeing-widget .ficha-toggle {
  position: absolute;
  left: calc(958 * var(--u)); top: calc(63 * var(--u));
  width: calc(114 * var(--u)); height: calc(114 * var(--u));
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
}
#wellbeing-widget .ficha-toggle svg {
  width: 62%; height: 62%;
  fill: none; stroke: #3e4a2a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .38s ease;
}
#wellbeing-widget .ficha-toggle:hover svg { stroke: #5f8a3c; }
#wellbeing-widget .ficha-toggle:focus-visible { outline: 3px solid #244962; outline-offset: 1px; }
#wellbeing-widget.is-collapsed .ficha-toggle svg { transform: rotate(180deg); }

/* Celdas de necesidades (x 51 / 307 / 562 / 816 · ancho 237 · alto 278 u). */
#wellbeing-widget .wellbeing-bars {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(4, calc(237 * var(--u)));
  column-gap: calc(19.5 * var(--u));
  padding: calc(11 * var(--u)) 0 0 calc(51 * var(--u));
  margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
#wellbeing-widget .need-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  height: calc(278 * var(--u));
  padding: 0 calc(26 * var(--u));
  margin: 0; border: 0; background: none;
}
#wellbeing-widget .need-icon { width: 30px; height: 28px; object-fit: contain; margin-bottom: 2px; }
#wellbeing-widget .need-cell .wellbeing-label { color: #3f4a2b; font: 700 .72rem/1.1 "Baloo 2", Arial, sans-serif; }
#wellbeing-widget .need-cell .wellbeing-value { color: #33401f; font: 800 .92rem/1.05 "Baloo 2", Arial, sans-serif; }
#wellbeing-widget .need-cell.is-warning .wellbeing-value { color: #b44b2f; }
#wellbeing-widget .need-cell .wellbeing-track {
  width: 100%; height: 7px; margin-top: 3px;
  overflow: hidden; border-radius: 999px;
  background: #dfe0c8; box-shadow: inset 0 1px 1px rgba(60, 70, 30, .15);
}
#wellbeing-widget .wellbeing-fill { border-radius: 999px; }
#wellbeing-widget .wellbeing-fill.meter-saciedad { background: #3fa84f; }
#wellbeing-widget .wellbeing-fill.meter-hidratacion { background: #4a9fe0; }
#wellbeing-widget .wellbeing-fill.meter-higiene { background: #efb21f; }
#wellbeing-widget .wellbeing-fill.meter-energia { background: #9056de; }

/* ===== Beta v4.5: notificaciones en burbuja ===== */
#stage-floor .notification-card {
  left: 14px; width: 360px;
  max-height: none; overflow: visible;
  padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
  color: #3f4a2b;
}
#stage-floor .notification-card ul { display: grid; gap: 8px; }
#stage-floor .notification-card li { padding: 0; border: 0; }
#stage-floor .system-notice-card { padding-right: 0; }
.nb {
  --nb-fill: #f4f3d8; --nb-rim: #e5edc2; --nb-stroke: #76925c;
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 46px;
  padding: 7px 12px 18px 9px;
}
.nb > *:not(.nb-shape) { position: relative; z-index: 1; }
.nb-shape { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.nb-glint { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; opacity: .85; }
.nb-icon {
  flex: 0 0 34px; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%; background: #d1dfb5;
}
.nb-icon img { width: 24px; height: 24px; object-fit: contain; }
.nb-info { width: 22px; height: 22px; fill: none; stroke: #55703d; stroke-width: 2.6; stroke-linecap: round; }
.nb-info circle { fill: #55703d; stroke: none; }
#stage-floor .nb p { flex: 1; margin: 0; color: #3f4a2b; font: 600 .8rem/1.3 Arial, Helvetica, sans-serif; }
.nb-trail {
  flex: 0 0 auto; min-width: 44px; height: 26px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 13px; background: #d1dfb5;
}
.nb-trail img { height: 22px; width: auto; }
.nb-close {
  width: 30px; height: 24px; padding: 0;
  border: 0; background: transparent; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
  color: #4f6a37; font: 700 1.15rem/1 Arial, sans-serif;
}
.nb-close:hover { color: #2f4520; }
.nb-close:focus-visible { outline: 2px solid #244962; outline-offset: 1px; }
/* «Durmiendo»: se mantiene el fondo #eef1f6; luna y zzz sin fondo propio. */
.nb-sleep { --nb-fill: #eef1f6; --nb-rim: #e1e6ef; --nb-stroke: #8a9bb2; }
.nb-sleep .nb-icon, .nb-sleep .nb-trail { background: transparent; }
.nb-sleep .nb-icon img { width: 28px; height: 28px; }
.nb-sleep .nb-trail img { height: 24px; }
#stage-floor .nb-sleep p { color: #2c3a4f; }

/* ===== Beta v4.5: sombra interna de la pantalla del celular ===== */
#room-chat-panel .phone-screen { box-shadow: inset #0000005c -1px -8px 9px; }

@media (max-width: 900px) {
  #wellbeing-widget.ficha { --fw: 300px; top: 10px; left: 10px; }
  #stage-floor .notification-card { left: 10px; width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  #wellbeing-widget .ficha-needs, #wellbeing-widget .ficha-toggle svg { transition: none; }
}
/* La ficha deja pasar los clics al escenario (v2.6), salvo la flecha. */
#wellbeing-widget .ficha-toggle { pointer-events: auto; }
#wellbeing-widget.ficha { display: block; backdrop-filter: none; -webkit-backdrop-filter: none; }
#wellbeing-widget .need-cell .wellbeing-track { flex: 0 0 7px; min-height: 0; max-height: 7px; }
#wellbeing-widget .need-cell > * { flex-shrink: 0; }

/* ===== Beta v4.5.1 ===== */
/* Flecha y cierre centrados: el mínimo táctil general (44 px) estiraba los
   botones y los corría hacia abajo de su círculo / pastilla. */
#wellbeing-widget .ficha-toggle { min-width: 0; min-height: 0; }
.nb-trail .nb-close {
  display: grid; place-items: center;
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  padding: 0; line-height: 0;
}
.nb-close svg { width: 16px; height: 16px; fill: none; stroke: #4f6a37; stroke-width: 3; stroke-linecap: round; }
.nb-close:hover svg { stroke: #2f4520; }

/* ===== Beta v4.5.2: armario nuevo (assets/ui/wardrobe/armario.svg, 860 × 688) =====
   Todo se ubica en % sobre el dibujo: arco con tarima a la izquierda
   (la mascota apoya los pies en la tarima pintada) y 6 celdas pintadas a
   la derecha, donde caen los botones de prenda. */
#wardrobe-overlay .wardrobe-window {
  position: relative;
  width: min(1000px, 96vw, calc(90vh * 860 / 688)); height: auto; max-height: none;
  aspect-ratio: 860 / 688;
  padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: url('../assets/ui/wardrobe/armario.svg') center / 100% 100% no-repeat;
  overflow: visible;
}
#wardrobe-overlay .dressing-layout { display: block; position: absolute; inset: 0; height: auto; gap: 0; }
#wardrobe-overlay .dressing-preview,
#wardrobe-overlay .dressing-collection { position: absolute; inset: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; pointer-events: none; }
#wardrobe-overlay .dressing-preview > *, #wardrobe-overlay .dressing-collection > * { pointer-events: auto; }
#wardrobe-overlay #wardrobe-preview {
  position: absolute; left: 9.3%; top: 32%; width: 26.74%; height: 51.45%;
  flex: none; margin: 0;
}
#wardrobe-overlay #wardrobe-preview .dressing-platform { display: none; }
#wardrobe-overlay .dressing-preview #wardrobe-clear {
  position: absolute; left: 17.1%; top: 83.9%; width: 11.2%; height: 3.4%;
  padding: 0; border: 0; background: none; box-shadow: none; transition: transform .15s ease;
}
#wardrobe-overlay .dressing-tabs {
  position: absolute; left: 41.5%; width: 51.2%; top: 18.6%; height: 12.8%;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 0; margin: 0;
}
#wardrobe-overlay .dressing-tabs button { height: 100%; min-height: 0; }
#wardrobe-overlay .dressing-tabs img { width: 58px; height: 48px; }
#wardrobe-overlay .wardrobe-grid {
  position: absolute; left: 41.5%; width: 51.2%; top: 34.6%; height: 40%;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
  column-gap: 2.5%; row-gap: 4%; padding: 0; overflow: visible;
}
#wardrobe-overlay .wardrobe-item {
  padding: 10%; border: 0; border-radius: 16px; background: transparent;
  transition: transform .15s ease, background-color .15s ease;
}
#wardrobe-overlay .wardrobe-item:hover { transform: scale(1.03); background: #fff6e060; }
#wardrobe-overlay .wardrobe-item.is-selected { border: 0; background: #ffe9a655; box-shadow: inset 0 0 0 3px #e0a834; }
#wardrobe-overlay .wardrobe-item img { max-height: none; }
#wardrobe-overlay #wardrobe-empty {
  position: absolute; left: 41.5%; width: 51.2%; top: 34.6%; height: 40%;
  display: grid; place-content: center; margin: 0; padding: 0 8%;
  text-align: center; color: #6b4a2a; font: 700 15px/1.35 'Baloo 2', sans-serif;
}
#wardrobe-overlay #wardrobe-empty[hidden] { display: none; }
#wardrobe-overlay .dressing-pages { position: absolute; left: 41.5%; width: 51.2%; top: 75.4%; height: 4.6%; min-height: 0; margin: 0; }
#wardrobe-overlay .dressing-actions {
  position: absolute; left: 41.5%; width: 51.2%; top: 80.6%; height: 7.4%;
  display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 3%; margin: 0; padding: 0; border: 0;
}
#wardrobe-overlay .dressing-actions #wardrobe-save,
#wardrobe-overlay .dressing-actions #wardrobe-close-action { flex: 0 0 30%; width: 30%; height: 100%; }
#wardrobe-overlay .wardrobe-window .dressing-close { top: 9.5%; right: 3.2%; width: 4.4%; height: auto; aspect-ratio: 1; z-index: 5; }
#wardrobe-overlay .dressing-preview #wardrobe-clear:hover,
#wardrobe-overlay .dressing-actions button:hover { transform: scale(1.03); }
#wardrobe-overlay .dressing-preview #wardrobe-clear:active,
#wardrobe-overlay .dressing-actions button:active { transform: scale(.95); }

/* ===== Beta v4.5.2: placa del jugador (assets/ui/placa_player.svg, 792 × 338) =====
   Tres tramos con border-image: los extremos con las orejitas quedan fijos
   (266 y 271 u) y sólo se estira el tramo recto del medio, así la placa
   crece con nombres largos sin deformarse. */
#stage-floor .visit-host-tag,
#stage-floor .remote-player-tag {
  --plate-h: 38px;
  box-sizing: border-box;
  height: var(--plate-h);
  bottom: -26px;
  max-width: 320px;
  gap: 6px;
  padding: calc(var(--plate-h) * .27) 2px 0;
  border-style: solid;
  border-width: 0 calc(var(--plate-h) * 271 / 338) 0 calc(var(--plate-h) * 266 / 338);
  border-image: url('../assets/ui/placa_player.svg') 0 271 0 266 fill / 0 calc(var(--plate-h) * 271 / 338) 0 calc(var(--plate-h) * 266 / 338) stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(60, 35, 15, .18));
  color: #5a3a22;
  font: 800 .82rem/1 "Baloo 2", sans-serif;
}
#stage-floor #visit-host-presence,
#stage-floor .remote-live-dot { width: 9px; height: 9px; flex: 0 0 9px; margin-left: 2px; border-radius: 50%; background: #a79a8c; box-shadow: none; }
#stage-floor .visit-host-walker.is-online #visit-host-presence,
#stage-floor .remote-live-dot { background: #3dae4f; box-shadow: 0 0 0 2px rgba(61, 174, 79, .2); }

/* ===== Beta v4.5.2: nombre del lugar visitado + puerta para volver ===== */
#stage-floor #visit-context.visit-badge {
  top: 14px; left: 50%; transform: translateX(-50%);
  width: auto; max-width: min(520px, 60%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none;
  pointer-events: none;
}
#stage-floor #visit-context.visit-badge[hidden] { display: none; }
#stage-floor #visit-title {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 900 30px/1.1 "Baloo 2", sans-serif;
  color: #ffe052; -webkit-text-stroke: 3px #78410d; paint-order: stroke fill;
  text-shadow: 0 3px 0 #512a0c;
}
#stage-floor .visit-home-btn {
  pointer-events: auto;
  width: 58px; height: 64px; min-width: 0; min-height: 0; padding: 0;
  border: 0; background: none; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
  opacity: .55;
  transition: opacity .18s ease, transform .15s ease;
}
#stage-floor .visit-home-btn img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
#stage-floor .visit-home-btn:hover,
#stage-floor .visit-home-btn:focus-visible { opacity: 1; }
#stage-floor .visit-home-btn:active { opacity: 1; transform: scale(.9); }
#stage-floor .visit-home-btn:focus-visible { outline: 3px solid #244962; outline-offset: 2px; }
@media (max-width: 600px) {
  #stage-floor #visit-title { font-size: 22px; -webkit-text-stroke-width: 2px; }
  #stage-floor .visit-home-btn { width: 44px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { #stage-floor .visit-home-btn { transition: none; } }

/* ===== Beta v4.5.3 =====
   Placa de nombre de las otras mascotas: el calzado termina ~21% por encima
   del borde inferior del walker (el arte tiene aire abajo). La placa se
   ubica apenas debajo del calzado, en % para que acompañe cualquier ancho. */
#stage-floor .visit-host-tag,
#stage-floor .remote-player-tag { bottom: calc(20.3% - var(--plate-h)); }

/* Globo de charla más redondo (pedido v4.5.3). */
#stage-floor .speech-bubble,
#stage-floor .remote-action-bubble { border-radius: 50%; padding: 8% 8%; }
#stage-floor .remote-action-bubble { top: auto; height: auto; max-width: min(260px, 70vw); }

/* ===== Beta v4.5.4 =====
   Globo de charla con borde marrón; la colita también lleva borde
   (::before marrón debajo del ::after crema). */
#stage-floor .speech-bubble { border: 2px solid #6b4526; }
#stage-floor .speech-bubble::before {
  content: ""; position: absolute; left: 50%; bottom: -24px;
  width: 0; height: 0;
  border-left: 18px solid transparent; border-right: 6px solid transparent;
  border-top: 25px solid #6b4526;
  transform: translateX(-50%) skewX(-8deg);
}
#stage-floor .speech-bubble::after { bottom: -19px; filter: none; }

/* Barra del chat de la sala (arte vectorial): el marco verde se estira por
   el centro (border-image), el campo crema también y «Enviar» es su propio
   SVG. Todas las medidas salen del arte: --u = alto de la barra / 314.
   Sin activar muestra el mismo marco con la ayuda dentro del campo. */
#room-quick-chat,
#room-quick-chat:not(.is-active):not([hidden]) {
  --h: 58px; --u: calc(var(--h) / 314);
  box-sizing: border-box; height: var(--h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 62) calc(var(--u) * 54) 0 calc(var(--u) * 54);
  border: 0; border-style: solid; border-width: 0; border-radius: 0;
  border-image: url('../assets/ui/chat/barra.svg') 0 200 fill / 0 calc(var(--u) * 200) stretch;
  background: none; box-shadow: none; opacity: 1;
  filter: drop-shadow(0 4px 6px rgba(60, 35, 15, .18));
}
#room-quick-chat[hidden] { display: none; }
#room-quick-chat.has-error { filter: drop-shadow(0 0 3px rgba(184, 62, 50, .9)); }
#room-quick-chat input,
#room-quick-chat .room-quick-chat-help {
  box-sizing: border-box; width: 100%; height: calc(var(--u) * 193); min-width: 0; min-height: 0; margin: 0;
  padding: 0 calc(var(--u) * 44) calc(var(--u) * 6);
  border: 0; border-style: solid; border-width: 0; border-radius: 0;
  border-image: url('../assets/ui/chat/campo.svg') 0 200 fill / 0 calc(var(--u) * 200) stretch;
  background: none; box-shadow: none; outline: none;
  color: #4a2c17; font: 600 .8rem/1 "Baloo 2", Arial, sans-serif; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#room-quick-chat .room-quick-chat-help { color: #8a6f4c; cursor: text; }
#room-quick-chat .room-quick-chat-help:hover,
#room-quick-chat .room-quick-chat-help:focus-visible { background: none; color: #633719; }
#room-quick-chat input::placeholder { color: #a8946f; }
#room-quick-chat.has-error input::placeholder { color: #9a2f27; }
#room-quick-chat .room-quick-chat-send,
#room-quick-chat:not(.is-active) .room-quick-chat-send {
  display: block; grid-column: 2; grid-row: 1;
  width: calc(var(--u) * 496); height: calc(var(--u) * 198);
  min-width: 0; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer;
  transition: transform .12s ease, filter .12s ease;
}
/* Sin activar, «Enviar» se ve pero todavía no hay nada que mandar. */
#room-quick-chat:not(.is-active) .room-quick-chat-send { pointer-events: none; }
#room-quick-chat .room-quick-chat-send img { display: block; width: 100%; height: 100%; pointer-events: none; }
#room-quick-chat .room-quick-chat-send:hover:not(:disabled),
#room-quick-chat .room-quick-chat-send:focus-visible { background: none; transform: translateY(-1px); filter: brightness(1.05); }
#room-quick-chat .room-quick-chat-send:active:not(:disabled) { transform: translateY(1px) scale(.96); }
#room-quick-chat .room-quick-chat-send:disabled { opacity: .55; cursor: url("../assets/ui/cursors/not-allowed.png") 2 1, not-allowed; cursor: -webkit-image-set(url("../assets/ui/cursors/not-allowed.png") 1x, url("../assets/ui/cursors/not-allowed@2x.png") 2x) 2 1, not-allowed; }

/* v4.6.2: fila de minijuegos del modo prueba. */
.debug-games-row .debug-check { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; }
.debug-games-row .debug-check input { flex: none; min-width: 0; width: 18px; height: 18px; }
.debug-games-status { flex-basis: 100%; color: #7a5a3a; font-size: .8rem; }

/* ==========================================================================
   Beta v4.6.4
   ========================================================================== */

/* Cursores propios (cursor_default.ai, cursor_pointer.ai y
   cursor_not-allowed.ai → assets/ui/cursors, ver
   scripts/export-cursors-v464.py). Los tres miden lo mismo: 28 px de alto
   la flecha y la mano, con versión @2x para pantallas de alta densidad. */
html { cursor: url("../assets/ui/cursors/default.png") 2 1, default; cursor: -webkit-image-set(url("../assets/ui/cursors/default.png") 1x, url("../assets/ui/cursors/default@2x.png") 2x) 2 1, default; }
a[href], button:not(:disabled), [role="button"]:not([aria-disabled="true"]), summary, select, label[for],
input[type="checkbox"], input[type="radio"], input[type="range"] { cursor: url("../assets/ui/cursors/pointer.png") 8 1, pointer; cursor: -webkit-image-set(url("../assets/ui/cursors/pointer.png") 1x, url("../assets/ui/cursors/pointer@2x.png") 2x) 8 1, pointer; }
button:disabled, [aria-disabled="true"], input:disabled, select:disabled { cursor: url("../assets/ui/cursors/not-allowed.png") 2 1, not-allowed; cursor: -webkit-image-set(url("../assets/ui/cursors/not-allowed.png") 1x, url("../assets/ui/cursors/not-allowed@2x.png") 2x) 2 1, not-allowed; }

/* Inventario: la lata (chatarra) se ve del mismo tamaño y a la misma
   altura que el resto de los objetos (antes tenía scale(.8) y quedaba más
   baja) y no se puede usar: cursor de prohibido. */
.inventory-window .inventory-item-visual { display: flex; align-items: center; justify-content: center; }
#inventory-can .inventory-item-visual img,
#inventory-energy .inventory-item-visual img {
  width: auto; height: 100%; max-width: 100%; transform: none; object-fit: contain;
}
#inventory-can, #inventory-can * { cursor: url("../assets/ui/cursors/not-allowed.png") 2 1, not-allowed; cursor: -webkit-image-set(url("../assets/ui/cursors/not-allowed.png") 1x, url("../assets/ui/cursors/not-allowed@2x.png") 2x) 2 1, not-allowed; }
#inventory-energy-count {
  display: grid; place-items: center;
  border: 2px solid #75400e;
  background: radial-gradient(ellipse at 33% 20%, #fff7b0 0%, #ffe06b 38%, #ffc632 73%, #e8a222 100%);
  color: #633300; font-family: "Baloo 2", sans-serif; font-weight: 800;
  box-shadow: inset 0 0 0 2px #fff0a0, 0 1px 1px #5c310b25;
  position: absolute; top: 0; right: 0; min-width: 38px; width: max-content; aspect-ratio: 1; padding: 3px;
  box-sizing: border-box; border-radius: 50%; font-size: 23px; line-height: 1;
}
#inventory-energy:disabled { opacity: 1; }
#inventory-energy:disabled .inventory-item-visual img { opacity: .42; }
@media (max-width: 480px) {
  #inventory-energy-count { min-width: 28px; font-size: 18px; padding: 2px; }
}

/* Ventanas que tardaban en aparecer la primera vez: mientras su arte no
   terminó de cargar, la ventana entera queda oculta (ver revealWhenReady en
   app.js) y aparece junta, marco y contenido. */
.is-loading-art { visibility: hidden !important; }

/* Dormir ↔ despertar con transición (antes cambiaba de golpe). Al dormirse
   cierra los ojos despacio y se acomoda; al despertarse abre los ojos
   despacio, se estira y las «Z» se desvanecen. */
.game-stage.is-falling-asleep .ojo,
.game-stage.is-waking .ojo { transition-duration: .45s; } /* v4.6.12: antes .9s — pedido: abrir/cerrar los ojos un poco más rápido */
.game-stage.sleeping.is-falling-asleep { animation: sleep-enter .9s ease-out both, sleep-breathe 4.4s ease-in-out .9s infinite; }
.game-stage.is-waking { animation: sleep-exit 1s ease-out both; }
.game-stage.is-waking .brazo { animation: none; }
@keyframes sleep-enter {
  0% { transform: rotate(0deg) scale(1, 1); }
  55% { transform: rotate(-3.5deg) scale(1.01, .97); }
  100% { transform: rotate(-2.5deg) scale(1, 1); }
}
@keyframes sleep-exit {
  0% { transform: rotate(-2.5deg) scale(1, 1); }
  45% { transform: rotate(1.5deg) scale(.97, 1.06); }
  75% { transform: rotate(-.5deg) scale(1.01, .99); }
  100% { transform: rotate(0deg) scale(1, 1); }
}
#walker:has(.game-stage.is-waking) .zzz-fx,
.remote-player-walker:has(.is-waking) .zzz-fx { display: block; animation: zzz-fade-out .6s ease-out forwards; }
.zzz-fx { transition: opacity .6s ease; }
#walker:has(.game-stage.is-falling-asleep) .zzz-fx { animation: zzz-fade-in .9s ease-in both; }
@keyframes zzz-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes zzz-fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .game-stage.sleeping.is-falling-asleep { animation: sleep-breathe 5.5s ease-in-out infinite !important; }
  .game-stage.is-waking { animation: none !important; }
}

/* Pupilas: sin pupila propia (ojos 2) se mueve el ojo entero, un poquito. */
.pet-stage .pet-layer-ojos { transition: translate .12s ease-out, rotate .15s ease-out; }

/* ==========================================================================
   Beta v4.6.5 — Celular horizontal (referencia: iPhone 11 apaisado,
   896 × 414, y más bajo cuando Safari muestra sus barras).
   Idea: el escenario se arma con las MISMAS medidas que en la compu
   (640 px de alto «lógico») y se achica entero con transform: scale para
   entrar en la pantalla. Así mascota, ficha, botones, ventanas y juegos
   conservan las proporciones ya probadas en escritorio, y todo entra sin
   scroll. El factor (--mh-s) lo calcula syncMobileLandscape() en app.js
   según el alto real disponible. Encabezado: finito, a tamaño real.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --mh-head: 38px; --mh-s: .56; --mh-lh: 640px; }
  html, body { height: 100dvh; overflow: hidden; }
  body { overscroll-behavior: none; }

  /* Encabezado finito. */
  #app-header.app-header { height: var(--mh-head); min-height: 0; flex-shrink: 0; margin: 0 auto; padding: 4px 12px; max-width: none; box-sizing: border-box; }
  #app-header .brand-symbol { height: 28px; width: auto; }
  #app-header .header-edit-btn,
  #app-header .header-actions > button { min-height: 30px; height: 30px; padding: 2px 10px; font-size: 12px; }
  #app-header .header-edit-btn svg { width: 16px; height: 16px; }
  #app-header .header-actions { gap: 8px; }
  .options-menu { max-height: calc(100dvh - var(--mh-head) - 8px); overflow: auto; }

  /* Contenedor del escenario: ocupa todo lo que queda (tamaño real). */
  #game.screen, main.screen { padding: 0 8px 0; max-width: none; min-height: 0; flex-shrink: 0; }
  #game .game-main { margin: 0; gap: 0; }
  #game .stage-col {
    max-width: none;
    height: calc(var(--mh-lh) * var(--mh-s));
    /* clip (no hidden): así un focus() adentro no «scrollea» el contenedor. */
    overflow: hidden;
    overflow: clip;
    border-radius: 12px;
  }
  /* Escenario «de compu», achicado entero. */
  #stage-floor.stage-floor {
    width: calc((100vw - 16px) / var(--mh-s)) !important;
    height: var(--mh-lh) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    flex-shrink: 0;
    transform: scale(var(--mh-s));
    transform-origin: 0 0;
    border-radius: 20px;
  }

  /* Mascota: en escritorio mide ~58 % del alto del escenario. */
  #stage-floor .walker:not(.remote-player-walker) { width: calc(var(--mh-lh) * .6); }
  #stage-floor .remote-player-walker { width: calc(var(--mh-lh) * .5); }

  /* Lo que usaba el alto de la VENTANA (vh/dvh) pasa al alto lógico. */
  .editor-pet-pos { width: min(520px, calc(var(--mh-lh) * .64), calc(100% - 32px)); }
  .wardrobe-window { height: min(640px, calc(var(--mh-lh) - 24px)); width: min(1000px, calc(100% - 24px)); }
  #stage-floor .roulette-wheel { width: min(100%, calc(var(--mh-lh) - 190px)); }

  /* Crear mascota: el logo y «Creá tu mascota» pasan a la izquierda, debajo
     del nombre (al centro tapaban la cara de la mascota). */
  .editor-welcome { left: 24px; top: 190px; transform: none; align-items: flex-start; }
  .editor-welcome .editor-emblem { width: 110px; height: 110px; }
  .editor-welcome #onboarding-title { text-align: left; }

  /* Entrar: dos columnas (logo y texto | formulario) y, si igual no
     entra (por ejemplo con el teclado abierto), se puede desplazar. */
  #login-screen.login-screen:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: 32px;
    align-content: center;
    max-width: 820px;
    height: 100dvh;
    overflow-y: auto;
    padding: 12px 24px;
    box-sizing: border-box;
  }
  #login-screen .brand-emblem { grid-column: 1; grid-row: 1; width: 96px; height: 96px; margin: 0 auto 4px; }
  #login-screen > h2 { grid-column: 1; grid-row: 2; margin: 0; font-size: 1.3rem; }
  #login-screen > .login-hint { grid-column: 1; grid-row: 3; margin: 6px 0 0; font-size: .82rem; }
  #login-screen > #login-form,
  #login-screen > #google-username-form { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  #login-screen > .login-divider { grid-column: 2; grid-row: 4; margin: 6px 0; }
  #login-screen > #login-google { grid-column: 2; grid-row: 5; }
  #login-screen > #login-google-error { grid-column: 2; grid-row: 6; }
  #login-screen .name-input { padding-top: 8px; padding-bottom: 8px; }
}

/* Celular en vertical: el juego está pensado apaisado (v4.6.5). */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 500px) and (pointer: coarse) {
  .rotate-hint {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 24px;
    background: #17233f;
    color: #ffe582;
    text-align: center;
    font: 800 1.15rem/1.35 "Baloo 2", sans-serif;
  }
  .rotate-hint img { width: 120px; height: auto; animation: rotateHint 2.4s ease-in-out infinite; }
  @keyframes rotateHint { 0%, 30% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
}

/* ==========================================================================
   Beta v4.6.6 — rendimiento en celulares y tablets (html.is-lite, ver
   LITE_GFX en js/config.js). En la compu no cambia nada.
   Un SVG se repinta entero cada vez que algo se mueve adentro suyo; en el
   celular eso es lo que trababa. Acá:
   - los brazos quedan quietos en reposo (la mascota se sigue meciendo
     entera, que lo hace la placa de video sin repintar); caminar, saludar,
     dormir y bañarse siguen animados igual;
   - la mascota chiquita de la ficha no se anima;
   - la mascota y quien la mueve van en su propia capa;
   - fondos pesados en su copia WebP (scripts/export-lite-v466.py).
   ========================================================================== */
html.is-lite .brazo,
html.is-lite .ropa-brazo,
html.is-lite .pet-stage .pet-layer-orejas #oreja-izq,
html.is-lite .pet-stage .pet-layer-orejas #oreja-der { animation: none; }
html.is-lite .ropa-brazo { transform: scale(1.14); }
html.is-lite .wellbeing-avatar *,
html.is-lite .preview-stage * { animation: none !important; }
html.is-lite .walker,
html.is-lite .game-stage,
html.is-lite .fly-orbit,
html.is-lite .fly-art svg { will-change: transform; }
html.is-lite #wellbeing-widget.ficha > div { background-image: url("../assets/lite/ui/ficha/ficha.webp"); }
html.is-lite #wardrobe-overlay .wardrobe-window,
html.is-lite .wardrobe-window { background-image: url("../assets/lite/ui/wardrobe/armario.webp"); }

/* v4.6.11: cartelito con el nombre de cada ícono al pasar el mouse
   (data-tip, ver setupHoverTips en js/app.js). Mismo lenguaje que los
   carteles del juego: crema, borde marrón y letra redondeada. */
.hover-tip {
  position: fixed; z-index: 10000; pointer-events: none;
  padding: 4px 12px 5px;
  border: 3px solid #5a3a22; border-radius: 12px;
  background: #fffdf3; color: #4a2c17;
  font: 800 15px/1.1 "Baloo 2", sans-serif; white-space: nowrap;
  box-shadow: 0 3px 0 rgba(90, 58, 34, .28), 0 6px 14px rgba(40, 20, 5, .18);
  transform-origin: var(--tip-arrow-x, 50%) 100%;
}
.hover-tip[hidden] { display: none; }
.hover-tip::after {
  content: ""; position: absolute; top: 100%; left: var(--tip-arrow-x, 50%);
  width: 10px; height: 10px; margin: -5px 0 0 -6px;
  background: #fffdf3; border: 3px solid #5a3a22; border-top: 0; border-left: 0;
  transform: rotate(45deg);
}
.hover-tip.is-below { transform-origin: var(--tip-arrow-x, 50%) 0; }
.hover-tip.is-below::after { top: auto; bottom: 100%; margin: 0 0 -5px -6px; transform: rotate(-135deg); }
.hover-tip.is-on { animation: hoverTipIn .16s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes hoverTipIn { from { opacity: 0; transform: translateY(4px) scale(.85); } }
.hover-tip.is-below.is-on { animation-name: hoverTipInBelow; }
@keyframes hoverTipInBelow { from { opacity: 0; transform: translateY(-4px) scale(.85); } }
@media (prefers-reduced-motion: reduce) { .hover-tip.is-on { animation: none; } }

/* ===== Beta v4.6.11: globo de charla rediseñado =====
   Mismo lenguaje que la ficha y las notificaciones (.nb): relleno crema,
   borde interno más claro, trazo (v4.6.12: marrón clarito), brillito arriba a
   la izquierda y una colita con el mismo borde. Reemplaza la elipse de
   borde marrón fino (v4.5.3/v4.5.4). Vale para la mascota propia y para
   las de la sala (.remote-action-bubble). */
#stage-floor .speech-bubble,
#stage-floor .remote-action-bubble {
  /* v4.6.12: mismo diseño, pero crema casi blanco con detalles en marrón
     clarito (antes verde oliva, como la ficha). */
  --sb-fill: #fffdf7; --sb-rim: #f7efe2; --sb-stroke: #dcc3a1;
  width: max-content;
  min-width: 64px;
  max-width: min(300px, 78vw);
  padding: 10px 18px 11px;
  border: 3px solid var(--sb-stroke);
  border-radius: 22px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M3 10 Q6 3 16 2' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 10px 6px / 26px 11px,
    var(--sb-fill);
  box-shadow: inset 0 0 0 4px var(--sb-rim), 0 4px 0 rgba(150, 110, 70, .22), 0 10px 18px rgba(70, 45, 20, .12);
  color: #5a3e28;
  font: 700 1rem/1.3 "Baloo 2", sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
  transform-origin: 50% 100%;
}
#stage-floor .speech-bubble::before,
#stage-floor .speech-bubble::after {
  content: ""; position: absolute; left: 50%; width: 0; height: 0;
  border-left: 13px solid transparent; border-right: 13px solid transparent;
  transform: translateX(-50%);
  filter: none;
}
#stage-floor .speech-bubble::before { bottom: -22px; border-top: 19px solid var(--sb-stroke); }
#stage-floor .speech-bubble::after { bottom: -15px; border-left-width: 9px; border-right-width: 9px; border-top: 13px solid var(--sb-fill); }
@keyframes bubble-in {
  from { transform: translateX(-50%) translateY(6px) scale(.8); opacity: 0; }
  70% { transform: translateX(-50%) translateY(-2px) scale(1.03); opacity: 1; }
  to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
#stage-floor .speech-bubble { animation: bubble-in .28s cubic-bezier(.3, 1.3, .5, 1); }
#stage-floor .speech-bubble.speech-bubble-hide { animation: bubble-out .42s ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
  #stage-floor .speech-bubble, #stage-floor .speech-bubble.speech-bubble-hide { animation: none; }
}