/* style.css — lenguaje visual del bosque reskineado.
 *
 * Paleta tomada del propio arte (muestreo de terreno, molino, casa hongo y
 * árboles): ciruela para contornos y texto, crema de papel, menta y turquesa
 * para la isla, rosa para la madera, dorado para el oro.
 *
 * Todo se dimensiona con --u, una centésima del ancho útil del escenario. Así
 * el layout escala por ancho Y alto sin media queries, y el juego conserva
 * proporción de teléfono también en escritorio.
 */

/* Las tres tipografías del propio proyecto Unity (Assets/Font). Todas de
 * Google Fonts, licencia SIL Open Font. `font-display: block` evita que el
 * título y los contadores se dibujen primero con la del sistema y salten de
 * ancho al llegar la real. */
@font-face {
  font-family: 'Fredoka One';
  src: url('assets/fonts/FredokaOne-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Delius Unicase';
  src: url('assets/fonts/DeliusUnicase-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Capriola';
  src: url('assets/fonts/Capriola-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Delius Unicase';
  src: url('assets/fonts/DeliusUnicase-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
/* 1.1: polaco (ą ę ł ś ż…) y japonés. Las tres tipografías del proyecto no tienen esos signos; el navegador
 * los toma, letra por letra, de M PLUS Rounded 1c (OFL), recortada a lo que usa el juego. */
@font-face {
  font-family: 'CQ Round Bold';
  src: url('assets/fonts/MPLUSRounded1c-Bold-sub.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CQ Round';
  src: url('assets/fonts/MPLUSRounded1c-Medium-sub.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* display: títulos, cifras y botones. body: textos. hand: encabezados de
     los modales, como el «choose a variant» de los mockups del reskin. */
  --font-display: 'Fredoka One', 'CQ Round Bold', system-ui, sans-serif;
  --font-body: 'Capriola', 'CQ Round', system-ui, sans-serif;
  --font-hand: 'Delius Unicase', 'CQ Round Bold', 'Capriola', system-ui, sans-serif;

  --ink: #5c1b2f;
  --ink-soft: #8a6472;
  --paper: #f7efe2;
  --paper-warm: #f3ddb4;
  --paper-deep: #e4cfae;
  --mint: #7ee8b4;
  --mint-deep: #35c9a0;
  --teal: #1f9cc0;
  --teal-deep: #0a6f93;
  --rose: #d9788f;
  --rose-deep: #bb5a74;
  --gold: #f5c84c;
  --gold-deep: #d79f27;
  --leaf: #4fc07a;
  --leaf-deep: #2f8d57;

  --u: 3.9px;               /* centésima del ancho del escenario; lo pone app.js */
  --uh: 8.4px;              /* centésima del alto del escenario; lo pone app.js */
  /* 19u caben el icono grande del dock (15u) y su etiqueta sin recortes */
  --dock-h: calc(var(--u) * 19);
  --hud-h: calc(var(--u) * 13);
  --radius: calc(var(--u) * 4);
  --shadow: 0 calc(var(--u) * 0.7) 0 rgba(92, 27, 47, 0.22);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* El `display` de una clase pisa el `display: none` que el navegador aplica al
   atributo hidden. Sin esto el velo del modal quedaba encima del juego. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #cfe9ee;
  color: var(--ink);
  font-family: var(--font-body);
  /* El tablero y la isla gestionan sus propios gestos; el navegador no debe
     robarlos con scroll o zoom de doble toque. */
  touch-action: manipulation;
  overscroll-behavior: none;
}

body { user-select: none; -webkit-user-select: none; }

#app {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #bfe4ea;
}

.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;
}

/* ---------------------------------------------------------------- escenas */

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease;
}
.screen.active { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- portada */

#splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  background:
    radial-gradient(120% 80% at 50% 18%, #e9fbf2 0%, #bfe8ea 55%, #9fd8e4 100%);
  padding: calc(var(--u) * 6);
  text-align: center;
}
.splash-art {
  width: calc(var(--u) * 72);
  max-height: 42vh;
  display: flex; align-items: center; justify-content: center;
}
.splash-art img {
  width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 1.6) calc(var(--u) * 2) rgba(10, 60, 70, 0.22));
  animation: bob 5.5s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--u) * -1.4)); }
}
.game-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--u) * 11);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: #fff;
  -webkit-text-stroke: calc(var(--u) * 0.85) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * 0.8) 0 rgba(92, 27, 47, 0.25);
}
.game-sub {
  margin: 0;
  font-size: calc(var(--u) * 4.6);
  color: var(--ink);
  opacity: 0.8;
}
.brand {
  position: absolute;
  bottom: calc(var(--u) * 3 + env(safe-area-inset-bottom, 0px));
  margin: 0;
  font-size: calc(var(--u) * 3.5);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.45;
}
.boot-bar {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 2.6);
  border-radius: 999px;
  background: rgba(92, 27, 47, 0.14);
  overflow: hidden;
}
.boot-bar i {
  display: block; height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mint) 0%, var(--mint-deep) 100%);
  transition: width 180ms linear;
}
.boot-hint {
  margin: 0;
  font-size: calc(var(--u) * 3.5);
  color: var(--ink);
  opacity: 0.72;
}

/* ---------------------------------------------------------------- botones */

.btn {
  font-family: var(--font-display);
  font-size: inherit;
  cursor: pointer;
  border: 0;
  color: #fff;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 7);
  font-size: calc(var(--u) * 4.4);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--leaf) 0%, var(--leaf-deep) 100%);
  box-shadow: 0 calc(var(--u) * 1.1) 0 var(--leaf-deep), var(--shadow);
  -webkit-text-stroke: calc(var(--u) * 0.45) rgba(47, 141, 87, 0.95);
  paint-order: stroke fill;
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.btn:active {
  transform: translateY(calc(var(--u) * 0.9)) scale(0.985);
  box-shadow: 0 calc(var(--u) * 0.2) 0 var(--leaf-deep);
}
.btn-go { min-width: calc(var(--u) * 40); }
.btn-soft {
  background: linear-gradient(180deg, #fff 0%, var(--paper-deep) 100%);
  color: var(--ink);
  -webkit-text-stroke: 0;
  box-shadow: 0 calc(var(--u) * 1.1) 0 var(--paper-deep), var(--shadow);
}
.btn-soft:active { box-shadow: 0 calc(var(--u) * 0.2) 0 var(--paper-deep); }
.btn-danger {
  background: linear-gradient(180deg, #ef7f93 0%, #c2415c 100%);
  box-shadow: 0 calc(var(--u) * 1.1) 0 #c2415c, var(--shadow);
  -webkit-text-stroke: 0;
}

/* ---------------------------------------------------------------- recursos */

.hud {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--u) * 1.6);
  left: calc(var(--u) * 2.4);
  right: calc(var(--u) * 2.4);
  height: var(--hud-h);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  z-index: 40;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }

.hud-level {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: url('assets/ui/atlas-hub-0.png') center/100% 100% no-repeat;
  filter: drop-shadow(0 calc(var(--u) * 0.6) 0 rgba(92, 27, 47, 0.25));
}
.hud-level span {
  font-family: var(--font-display);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u) * 4.4);
  color: #fff;
  -webkit-text-stroke: calc(var(--u) * 0.5) #1668a8;
  paint-order: stroke fill;
}

.hud-res {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  min-width: 0;
}
.res {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.9);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 2.4) calc(var(--u) * 0.5) calc(var(--u) * 0.5);
  min-width: calc(var(--u) * 19);
  height: calc(var(--u) * 7.6);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 calc(var(--u) * 0.55) 0 rgba(92, 27, 47, 0.18);
}
.res img {
  width: calc(var(--u) * 6.4);
  height: calc(var(--u) * 6.4);
  object-fit: contain;
  flex: 0 0 auto;
}
.res b {
  font-family: var(--font-display);
  font-size: calc(var(--u) * 3.7);
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.res.low b { color: #c2415c; }
.res.bump { animation: bump 320ms ease; }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.hud-cog {
  flex: 0 0 auto;
  width: calc(var(--u) * 8.4);
  height: calc(var(--u) * 8.4);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow: 0 calc(var(--u) * 0.55) 0 rgba(92, 27, 47, 0.18);
  display: grid; place-items: center;
}
.hud-cog svg { width: 58%; height: 58%; }

/* ---------------------------------------------------------------- dock */

.dock {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 calc(var(--u) * 4) env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: calc(var(--u) * 2);
  z-index: 35;
  background: linear-gradient(180deg, rgba(247, 239, 226, 0) 0%, rgba(247, 239, 226, 0.82) 48%, rgba(243, 221, 180, 0.96) 100%);
}
.dock-btn {
  position: relative;
  border: 0;
  cursor: pointer;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.4);
  color: var(--ink);
  transition: transform 90ms ease;
}
.dock-btn:active { transform: scale(0.955); }
.dock-btn img {
  width: calc(var(--u) * 11.5);
  height: calc(var(--u) * 11.5);
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 0.6) 0 rgba(92, 27, 47, 0.22));
}
.dock-main img { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.dock-label {
  font-family: var(--font-body);
  font-size: calc(var(--u) * 3.3);
  color: var(--ink);
  opacity: 0.86;
}
.dock-btn[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -1) calc(var(--u) * -1.6);
  border-radius: var(--radius);
  background: rgba(126, 232, 180, 0.34);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.5) var(--mint-deep);
  z-index: -1;
}
.dock-btn[disabled] { opacity: 0.42; cursor: default; }
.dock-badge {
  position: absolute;
  top: calc(var(--u) * -0.6); right: calc(var(--u) * -0.6);
  min-width: calc(var(--u) * 4.6);
  height: calc(var(--u) * 4.6);
  padding: 0 calc(var(--u) * 1);
  border-radius: 999px;
  background: #e9556f;
  color: #fff;
  font-size: calc(var(--u) * 3.3);
  display: grid; place-items: center;
  box-shadow: 0 calc(var(--u) * 0.4) 0 rgba(92, 27, 47, 0.3);
}

/* ---------------------------------------------------------------- isla */

#isla { background: #8fd3e2; }
#islaCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
.hit-layer {
  position: absolute;
  inset: 0;
  touch-action: none;
}
.scene-tip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + var(--u) * 2.4);
  max-width: calc(var(--u) * 78);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 3.4);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 calc(var(--u) * 0.7) 0 rgba(92, 27, 47, 0.2);
  font-size: calc(var(--u) * 3.3);
  text-align: center;
  z-index: 30;
  pointer-events: none;
}
.scene-tip b { color: var(--rose-deep); font-weight: 400; }

/* Pastilla de coste que sigue al objetivo de la isla. */
.target-pill {
  position: absolute;
  z-index: 32;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 2.2) calc(var(--u) * 0.5) calc(var(--u) * 0.5);
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font: inherit;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 calc(var(--u) * 0.7) 0 rgba(92, 27, 47, 0.26);
  animation: hover-pill 2.4s ease-in-out infinite;
}
.target-pill img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); object-fit: contain; }
.target-pill b { font-family: var(--font-display); font-size: calc(var(--u) * 3.6); font-weight: 400; color: var(--ink); }
.target-pill.short b { color: #c2415c; }
.target-pill:active { transform: translate(-50%, -100%) scale(0.95); }
@keyframes hover-pill {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: calc(var(--u) * -1.2); }
}

/* ---------------------------------------------------------------- grilla */

#grid {
  background: #a9e3c6 url('assets/grilla-fondo/fondo-grilla.png') center 38% / cover no-repeat;
}
.grid-stage {
  position: absolute;
  left: 0; right: 0;
  top: calc(env(safe-area-inset-top, 0px) + var(--hud-h) + var(--u) * 19);
  /* deja sitio a la fila de generadores, que vive encima del dock */
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + var(--u) * 15);
  display: grid;
  place-items: center;
}
.grid-board {
  /* Por ancho: 7 casillas + 6 huecos + el relleno caben en 96.4u, así que
     queda margen en un teléfono de 320 px. Por alto: 6.2uh evita que en un
     escenario bajo (tablet en horizontal) el tablero se coma la fila de
     generadores. El min() deja que en teléfonos gobierne el ancho. */
  --cell: min(calc(var(--u) * 12.8), calc(var(--uh) * 6.8));
  --gap: calc(var(--u) * 0.6);
  display: grid;
  grid-template-columns: repeat(7, var(--cell));
  grid-template-rows: repeat(7, var(--cell));
  gap: var(--gap);
  touch-action: none;
  /* El fondo de la grilla del original es un claro muy claro y las casillas
     también: sin este panel detrás, el tablero y los ítems se pierden. */
  padding: calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 4.5);
  background: rgba(255, 252, 244, 0.42);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.5) rgba(255, 255, 255, 0.6),
    0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(26, 86, 58, 0.18);
}
.cell {
  position: relative;
  border-radius: calc(var(--u) * 2.4);
  background: url('assets/ui/atlas-grilla-15.png') center/100% 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(26, 86, 58, 0.09);
}
.cell.alt {
  background-image: url('assets/ui/atlas-grilla-14.png');
  /* el patrón claro/oscuro del original, un poco más marcado para que se lea */
  filter: brightness(0.965) saturate(1.12);
}
/* Zona bloqueada: el propio juego la cubre de follaje
   (atlas-zonas-bloqueadas-1 es una textura de hojas que repite sin costura).
   Se lee como «aquí todavía no se ha despejado», no como casilla vacía. */
.cell.blocked {
  background: url('assets/ui/atlas-zonas-bloqueadas-1.png') center/120% 120% repeat;
  box-shadow: inset 0 0 calc(var(--u) * 1.6) rgba(26, 86, 58, 0.35);
}
.cell.blocked::after {
  font-family: var(--font-display);
  content: attr(data-lvl);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  min-width: calc(var(--u) * 5.4);
  padding: calc(var(--u) * 0.2) calc(var(--u) * 1);
  border-radius: 999px;
  background: rgba(26, 86, 58, 0.72);
  color: #fff;
  font-size: calc(var(--u) * 3.5);
  line-height: 1.5;
  text-align: center;
}
.cell.target {
  box-shadow: inset 0 0 0 calc(var(--u) * 0.6) var(--teal), 0 0 calc(var(--u) * 2) rgba(31, 156, 192, 0.5);
}
.cell.hint::before {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -0.6);
  background: url('assets/ui/atlas-grilla-18.png') center/100% 100% no-repeat;
  animation: pulse-hint 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse-hint {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.06); }
}

.tile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}
.tile img {
  width: 97%;             /* 1.3: un pelín más chico para que no se encimen */
  height: 97%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 calc(var(--u) * 0.5) calc(var(--u) * 0.5) rgba(92, 27, 47, 0.28));
}
.tile.picked { z-index: 20; cursor: grabbing; }
.tile.picked img {
  transform: scale(1.14);
  filter: drop-shadow(0 calc(var(--u) * 1.6) calc(var(--u) * 1.4) rgba(92, 27, 47, 0.34));
}
.tile.drop img { animation: drop-in 260ms cubic-bezier(.2, 1.5, .4, 1); }
@keyframes drop-in {
  0%   { transform: scale(0.3) translateY(calc(var(--u) * -4)); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.tile.fused img { animation: fuse-pop 320ms cubic-bezier(.2, 1.6, .35, 1); }
@keyframes fuse-pop {
  0%   { transform: scale(0.72); }
  55%  { transform: scale(1.26); }
  100% { transform: scale(1); }
}
.tile.reject img { animation: reject 260ms ease; }
@keyframes reject {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(calc(var(--u) * -1.4)); }
  75% { transform: translateX(calc(var(--u) * 1.4)); }
}

/* Lo que no es un objeto de familia: moneda, huevo, cofre, especial.
   Se distingue sin leer nada: la moneda y el huevo laten porque se cobran,
   el cofre lleva sus usos y el especial un halo. */
.tile.coin img { animation: coin-breathe 1.9s ease-in-out infinite; }
@keyframes coin-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.tile.special img {
  filter: drop-shadow(0 0 calc(var(--u) * 1.2) rgba(255, 236, 150, 0.95))
          drop-shadow(0 calc(var(--u) * 0.5) calc(var(--u) * 0.5) rgba(92, 27, 47, 0.28));
}
.tile.box img { width: 100%; height: 100%; }
.tile-uses {
  position: absolute;
  right: calc(var(--u) * -0.2);
  bottom: calc(var(--u) * -0.2);
  min-width: calc(var(--u) * 3.2);
  padding: 0 calc(var(--u) * 0.5);
  border-radius: 999px;
  background: #fff6ec;
  border: 1px solid rgba(146, 92, 60, 0.4);
  color: #7a4a2c;
  font-weight: 600;
  font-size: calc(var(--u) * 2.9);
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}
.tile.fresh img { animation: drop-in 300ms cubic-bezier(.2, 1.5, .4, 1); }
.float.note-float {
  /* 1.3: aviso como pastilla clara y legible, sin contorno oscuro */
  background: linear-gradient(180deg, #fff9f2 0%, #ffe9ef 100%);
  border: calc(var(--u) * 0.35) solid #f6b9c9;
  border-radius: 999px;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 2.2);
  color: #b34a6e;
  -webkit-text-stroke: 0;
  font-size: calc(var(--u) * 3.4);
  box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 1.6) rgba(150, 60, 90, 0.22);
  animation-name: note-up;
}
@keyframes note-up {
  0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.75); }
  12%  { opacity: 1; transform: translate(-50%, -100%) scale(1.06); }
  20%  { transform: translate(-50%, -100%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -130%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(0.96); }
}

/* ---------------------------------------------------------------- pedidos */

.order-strip {
  position: absolute;
  left: calc(var(--u) * 2.4);
  right: calc(var(--u) * 2.4);
  top: calc(env(safe-area-inset-top, 0px) + var(--hud-h) + var(--u) * 4);
  display: flex;
  gap: calc(var(--u) * 1.8);
  z-index: 30;
}
.order {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 3);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 calc(var(--u) * 0.6) 0 rgba(92, 27, 47, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  transition: transform 90ms ease;
}
.order:active { transform: scale(0.97); }
/* Hueco de pedido que todavía no está disponible: se explica, no se deja
   vacío ni se finge un botón. */
.order-wait {
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.4) rgba(92, 27, 47, 0.12);
  cursor: default;
  justify-content: center;
  min-height: calc(var(--u) * 13);
}
.order-wait-txt {
  font-size: calc(var(--u) * 3.3);
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.25;
}

.order-items { display: flex; gap: calc(var(--u) * 0.5); align-items: flex-end; }
.order-items figure {
  position: relative;
  margin: 0;
  width: calc(var(--u) * 7.6);
  height: calc(var(--u) * 7.6);
}
.order-items img { width: 100%; height: 100%; object-fit: contain; }
.order-items figure.has::after {
  content: '';
  position: absolute;
  right: calc(var(--u) * -0.8); bottom: calc(var(--u) * -0.8);
  width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2);
  background: url('assets/ui/atlas-grilla-20.png') center/100% 100% no-repeat;
}
.order-pay {
  font-family: var(--font-display);
  display: inline-flex; align-items: center; gap: calc(var(--u) * 0.5);
  font-size: calc(var(--u) * 3.5);
}
.order-pay img { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); object-fit: contain; }
.order.ready {
  background: linear-gradient(180deg, #e8fff2 0%, #c6f5dd 100%);
  box-shadow: 0 calc(var(--u) * 0.6) 0 var(--mint-deep), 0 0 calc(var(--u) * 2.4) rgba(53, 201, 160, 0.5);
  animation: ready-glow 1.8s ease-in-out infinite;
}
@keyframes ready-glow {
  0%, 100% { box-shadow: 0 calc(var(--u) * 0.6) 0 var(--mint-deep), 0 0 calc(var(--u) * 1.6) rgba(53, 201, 160, 0.35); }
  50%      { box-shadow: 0 calc(var(--u) * 0.6) 0 var(--mint-deep), 0 0 calc(var(--u) * 3.6) rgba(53, 201, 160, 0.7); }
}

/* ---------------------------------------------------------------- generadores */

.gen-row {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + var(--u) * 3.5);
  z-index: 32;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gen-row::-webkit-scrollbar { display: none; }
/* La pista va dentro: con `justify-content: center` directo en el contenedor
   que desborda, los navegadores recortan el primer elemento y no se puede
   llegar a él. Con una pista de ancho mínimo y márgenes automáticos, se centra
   cuando caben y se desplaza cuando no. */
.gen-track {
  display: flex;
  gap: calc(var(--u) * 1.6);
  width: min-content;
  margin-inline: auto;
  padding: 0 calc(var(--u) * 3);
}
.gen {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--u) * 12.6);
  border: 0;
  font: inherit;
  cursor: pointer;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 90ms ease;
}
.gen:active { transform: scale(0.95); }
/* Dos objetos por generador: el principal grande y el secundario pequeño
   detrás, para que se distingan de un vistazo y se lea qué producen. */
.gen-art {
  position: relative;
  display: block;
  width: calc(var(--u) * 12.6);
  height: calc(var(--u) * 11.4);
}
.gen-art img {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 0.5) 0 rgba(92, 27, 47, 0.26));
}
.gen-main {
  left: 0; bottom: 0;
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
}
.gen-second {
  right: 0; top: 0;
  width: calc(var(--u) * 6.2);
  height: calc(var(--u) * 6.2);
}
.gen-uses {
  font-family: var(--font-display);
  margin-top: calc(var(--u) * -0.8);
  padding: 0 calc(var(--u) * 1.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-size: calc(var(--u) * 3.3);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 calc(var(--u) * 0.4) 0 rgba(92, 27, 47, 0.2);
}
.gen.empty .gen-art img { filter: grayscale(0.85) opacity(0.6); }
.gen.empty .gen-uses {
  font-family: var(--font-display); color: #c2415c; }
.gen.fresh { animation: gen-arrive 520ms cubic-bezier(.2, 1.5, .4, 1); }
@keyframes gen-arrive {
  0%   { transform: scale(0) rotate(-18deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------------------------------------------------------------- modal */

.modal {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: calc(var(--u) * 5);
}
.modal-veil {
  position: absolute;
  inset: 0;
  background: rgba(60, 20, 34, 0.46);
  backdrop-filter: blur(calc(var(--u) * 0.5));
  animation: fade-in 200ms ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  position: relative;
  width: 100%;
  max-width: calc(var(--u) * 84);
  max-height: 86%;
  overflow-y: auto;
  padding: calc(var(--u) * 5) calc(var(--u) * 4.5) calc(var(--u) * 4.5);
  border-radius: calc(var(--u) * 6);
  background:
    radial-gradient(130% 90% at 50% 0%, #fff 0%, #fdf1f1 60%, #f9e6e6 100%);
  box-shadow: 0 calc(var(--u) * 1.6) 0 rgba(92, 27, 47, 0.22), 0 calc(var(--u) * 4) calc(var(--u) * 7) rgba(40, 10, 22, 0.3);
  text-align: center;
  animation: pop-in 280ms cubic-bezier(.2, 1.45, .4, 1);
}
@keyframes pop-in {
  0%   { transform: scale(0.88) translateY(calc(var(--u) * 3)); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-box h2 {
  font-family: var(--font-hand);
  margin: 0 0 calc(var(--u) * 2.4);
  font-size: calc(var(--u) * 5.2);
  color: var(--ink);
}
.modal-box p {
  margin: 0 0 calc(var(--u) * 3);
  font-size: calc(var(--u) * 3.5);
  line-height: 1.5;
  color: var(--ink-soft);
}
.modal-x {
  position: absolute;
  top: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6);
  width: calc(var(--u) * 8); height: calc(var(--u) * 8);
  border: 0; border-radius: 50%;
  cursor: pointer;
  background: rgba(92, 27, 47, 0.1);
  color: var(--ink);
  font-size: calc(var(--u) * 4.2);
  line-height: 1;
  display: grid; place-items: center;
}
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  align-items: center;
}

/* diálogo escrito del juego */
.talk { display: flex; flex-direction: column; align-items: center; }
.talk-who {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1) rgba(92, 27, 47, 0.24));
  animation: talk-bob 3.2s ease-in-out infinite;
}
@keyframes talk-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--u) * -0.9)); }
}
.talk-name {
  margin: calc(var(--u) * 0.6) 0 calc(var(--u) * 1.6);
  font-family: var(--font-hand);
  font-size: calc(var(--u) * 3.6);
  color: var(--rose-deep);
}
.talk-text {
  margin: 0 0 calc(var(--u) * 1.4);
  font-size: calc(var(--u) * 3.9);
  line-height: 1.45;
  color: var(--ink);
  min-height: calc(var(--u) * 11);
}
.talk-text b { color: var(--gold-deep); font-weight: 400; }
.talk-count {
  margin: 0 0 calc(var(--u) * 1.6);
  font-size: calc(var(--u) * 3.3);
  color: var(--ink-soft);
  opacity: 0.7;
}
body.no-motion .talk-who { animation: none; }

/* elegir variante de adorno */
.variants {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 2.4);
  margin-bottom: calc(var(--u) * 3.4);
}
.variant {
  border: 0;
  cursor: pointer;
  padding: calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 3.4);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.5) rgba(92, 27, 47, 0.1);
  transition: transform 110ms ease, box-shadow 110ms ease;
}
.variant img {
  display: block;
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
  object-fit: contain;
}
.variant[aria-pressed="true"] {
  transform: translateY(calc(var(--u) * -0.8)) scale(1.04);
  background: #fff;
  box-shadow: inset 0 0 0 calc(var(--u) * 0.7) var(--mint-deep), 0 calc(var(--u) * 1) 0 var(--mint-deep);
}

/* panel de ítem del tablero */
.item-panel { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4); }
.item-panel > img {
  width: calc(var(--u) * 26); height: calc(var(--u) * 26);
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1) rgba(92, 27, 47, 0.25));
}
.item-meta { font-size: calc(var(--u) * 3.5); color: var(--ink-soft); }

/* lista de ajustes */
.setting {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.8) 0;
  border-bottom: 1px solid rgba(92, 27, 47, 0.1);
  font-size: calc(var(--u) * 3.5);
  text-align: left;
}
.switch {
  flex: 0 0 auto;
  width: calc(var(--u) * 13); height: calc(var(--u) * 7);
  border: 0; border-radius: 999px;
  cursor: pointer;
  background: rgba(92, 27, 47, 0.18);
  position: relative;
  transition: background 160ms ease;
}
.switch::after {
  content: '';
  position: absolute;
  top: calc(var(--u) * 0.7); left: calc(var(--u) * 0.7);
  width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(var(--u) * 0.3) 0 rgba(92, 27, 47, 0.2);
  transition: transform 160ms cubic-bezier(.3, 1.4, .4, 1);
}
.switch[aria-pressed="true"] { background: var(--mint-deep); }
.switch[aria-pressed="true"]::after { transform: translateX(calc(var(--u) * 6)); }

.progress-line {
  display: flex; align-items: center; gap: calc(var(--u) * 1.6);
  margin-bottom: calc(var(--u) * 2.4);
  font-size: calc(var(--u) * 3.5);
  color: var(--ink-soft);
}
.progress-bar {
  flex: 1 1 auto;
  height: calc(var(--u) * 2.4);
  border-radius: 999px;
  background: rgba(92, 27, 47, 0.13);
  overflow: hidden;
}
.progress-bar i {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mint) 0%, var(--mint-deep) 100%);
}

.wipe-row { margin-top: calc(var(--u) * 3); }
.note {
  margin-top: calc(var(--u) * 2.4);
  font-size: calc(var(--u) * 3.3);
  color: var(--ink-soft);
  opacity: 0.85;
}

/* ---------------------------------------------------------------- efectos */

.fx-layer {
  position: absolute;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  overflow: hidden;
}
.float {
  font-family: var(--font-display);
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: calc(var(--u) * 4);
  color: #fff;
  -webkit-text-stroke: calc(var(--u) * 0.5) var(--ink);
  paint-order: stroke fill;
  animation: float-up 1000ms ease-out forwards;
  white-space: nowrap;
}
@keyframes float-up {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  22%  { opacity: 1; transform: translate(-50%, -115%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(1); }
}
.spark {
  position: absolute;
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spark-out 620ms ease-out forwards;
}
@keyframes spark-out {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); }
}
.flyer {
  position: absolute;
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  transform: translate(-50%, -50%);
  object-fit: contain;
  transition: left 620ms cubic-bezier(.4, 0, .6, 1), top 620ms cubic-bezier(.4, 0, .6, 1), opacity 180ms ease 520ms;
}

/* Respeta la preferencia del sistema: quita adorno, no información. */
@media (prefers-reduced-motion: reduce) {
  .splash-art img, .target-pill, .order.ready, .cell.hint::before { animation: none; }
  .modal-box, .tile.drop img, .tile.fused img, .gen.fresh { animation-duration: 1ms; }
  .float {
  font-family: var(--font-display); animation-duration: 600ms; }
}
body.no-motion .splash-art img,
body.no-motion .target-pill,
body.no-motion .order.ready,
body.no-motion .cell.hint::before { animation: none; }
body.no-motion .modal-box,
body.no-motion .tile.drop img,
body.no-motion .tile.fused img,
body.no-motion .tile.fresh img,
body.no-motion .tile.coin img,
body.no-motion .gen.fresh { animation: none; }

/* ---------------------------------------------------------------- criaturas */

.eggs {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 2.4);
  margin-bottom: calc(var(--u) * 3);
}
.egg-btn {
  position: relative;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 3.4);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 calc(var(--u) * 0.7) 0 rgba(92, 27, 47, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.2);
  transition: transform 90ms ease;
}
.egg-btn:active { transform: scale(0.96); }
.egg-btn[disabled] { opacity: 0.45; cursor: default; box-shadow: none; }
.egg-btn img { width: calc(var(--u) * 11); height: calc(var(--u) * 11); object-fit: contain; }
.egg-btn.mystery img { filter: hue-rotate(-50deg) saturate(1.35); }
.egg-btn b {
  font-family: var(--font-display);
  font-size: calc(var(--u) * 3.6);
  font-weight: 400;
  color: var(--ink);
}
.egg-btn span { font-size: calc(var(--u) * 3.3); color: var(--ink-soft); }

.cute-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 1.6);
}
.cute {
  position: relative;
  width: calc(var(--u) * 19);
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 0.6);
  border-radius: calc(var(--u) * 3);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.4) rgba(92, 27, 47, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.cute:active { transform: scale(0.96); }
.cute.picked {
  background: #fff;
  box-shadow: inset 0 0 0 calc(var(--u) * 0.6) var(--mint-deep);
}
/* Las criaturas no tienen sprite en el proyecto (son esqueletos de Spine), así
   que cada una se identifica por lo que produce en el taller. */
.cute-art {
  position: relative;
  display: block;
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 11);
}
.cute-art img { position: absolute; object-fit: contain; }
.cute-art.big { width: calc(var(--u) * 26); height: calc(var(--u) * 24); margin: 0 auto calc(var(--u) * 1.6); }
.cute-main { left: 0; bottom: 0; width: calc(var(--u) * 9.4); height: calc(var(--u) * 9.4); }
.cute-second { right: 0; top: 0; width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.cute-art.big .cute-main { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
.cute-art.big .cute-second { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.cute-name {
  font-size: calc(var(--u) * 3.3);
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
}
.cute-count {
  position: absolute;
  top: calc(var(--u) * 0.6); right: calc(var(--u) * 1);
  font-family: var(--font-display);
  font-size: calc(var(--u) * 3.3);
  color: var(--rose-deep);
}
.cute-toast {
  margin: calc(var(--u) * 2.4) 0 0;
  font-size: calc(var(--u) * 3.5);
  color: var(--rose-deep);
  animation: fade-in 180ms ease;
}

/* ------------------------------------------------------------- cuteario */
/* El contador «n/30» del panel de criaturas abre la galeria. */
.cuteario-link {
  border: 0;
  background: transparent;
  color: var(--ink-soft, #8a6b72);
  font: inherit;
  font-size: calc(var(--u) * 3.3);
  padding: 0 calc(var(--u) * 0.6);
  border-bottom: 1px dashed currentColor;
  cursor: pointer;
}
.cuteario-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * 1.4);
  margin: calc(var(--u) * 2) 0;
  max-height: calc(var(--uh) * 52);
  overflow-y: auto;
  /* el padding derecho deja sitio a la barra de desplazamiento, que si no
     recorta la ultima columna */
  padding: calc(var(--u) * 0.6) calc(var(--u) * 2.4) calc(var(--u) * 0.6) calc(var(--u) * 0.6);
}
.cuteario-cell {
  position: relative;
  display: grid;
  place-items: center;
  gap: calc(var(--u) * 0.3);
  padding: calc(var(--u) * 1) calc(var(--u) * 0.4);
  border: 0;
  border-radius: calc(var(--u) * 2.4);
  background: #fffaf4;
  box-shadow: 0 calc(var(--u) * 0.4) 0 rgba(146, 92, 60, 0.16);
  cursor: pointer;
}
.cuteario-cell img {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  object-fit: contain;
}
.cuteario-cell.unknown {
  background: #f2ece6;
  cursor: default;
}
/* Sin descubrir: silueta, no se regala la sorpresa. */
.cuteario-cell.unknown img { filter: grayscale(1) brightness(0.55) opacity(0.4); }
.cuteario-name {
  font-size: calc(var(--u) * 2.9);
  line-height: 1.2;
  color: #7a4a4a;
  text-align: center;
}
.cuteario-cell.unknown .cuteario-name { color: #ad9d95; }
.cuteario-n {
  position: absolute;
  top: calc(var(--u) * 0.4);
  right: calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 2.9);
  color: #b0203a;
}
.cute-makes {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 1);
  margin-top: calc(var(--u) * 0.8);
}
.cute-makes img {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  object-fit: contain;
}

/* =====================================================================
   0.2.0 · sistema final: corral, bolsas, pedidos con personajes, mockup
   ===================================================================== */
/* ---- isla: botones del mockup */
.cq-dock { justify-content: space-between; padding: 0 calc(var(--u) * 3) env(safe-area-inset-bottom, 0px); height: calc(var(--u) * 22 + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(247, 239, 226, 0) 0%, rgba(247, 239, 226, .55) 55%, rgba(243, 221, 180, .75) 100%); }
.cq-dock .dock-btn { width: calc(var(--u) * 15); height: calc(var(--u) * 15); background: none; display: grid; place-items: center; }
.cq-dock .dock-btn > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * .6) 0 rgba(92, 27, 47, .18)); }
.cq-dock .dock-nest { width: calc(var(--u) * 26); height: calc(var(--u) * 20); }
.dock-nest .nest-img { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 1); width: 100%; height: auto !important; }
.dock-nest .nest-egg { position: absolute; left: 50%; bottom: calc(var(--u) * 4); width: calc(var(--u) * 11) !important; height: auto !important; transform: translateX(-50%); transition: transform .2s; }
.dock-nest.empty .nest-egg { opacity: 0; }
.dock-nest.has .nest-egg { animation: eggBreath 1.6s ease-in-out infinite; }
@keyframes eggBreath { 50% { transform: translateX(-50%) scale(1.07) rotate(-3deg); } }
.nest-count { position: absolute; left: 50%; bottom: calc(var(--u) * -1.6); transform: translateX(-50%); font-family: var(--font-display); font-size: calc(var(--u) * 3.4);
  background: #c06a8c; color: #fff; border-radius: 999px; padding: 0 calc(var(--u) * 2.4); white-space: nowrap; }
.nest-time { position: absolute; left: 50%; top: calc(var(--u) * -2.4); transform: translateX(-50%); font-family: var(--font-display); font-size: calc(var(--u) * 3.3); color: var(--ink);
  background: rgba(255, 255, 255, .9); border-radius: 999px; padding: 0 calc(var(--u) * 1.6); white-space: nowrap; }
.nest-time:empty { display: none; }
.dock-badge.dot { min-width: 0; width: calc(var(--u) * 4); height: calc(var(--u) * 4); padding: 0; }
.pop-top { position: absolute; z-index: 36; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + var(--hud-h) + var(--u) * 3);
  display: flex; align-items: center; gap: calc(var(--u) * 1.5); height: calc(var(--u) * 9); min-width: calc(var(--u) * 30); padding: 0 calc(var(--u) * 3.5) 0 calc(var(--u) * 1);
  border: 0; border-radius: calc(var(--u) * 3); background: rgba(255, 252, 244, .92); box-shadow: 0 calc(var(--u) * .6) 0 rgba(92, 27, 47, .16); font-family: var(--font-display); font-size: calc(var(--u) * 5); color: var(--ink); }
.pop-top img { height: calc(var(--u) * 10); margin-top: calc(var(--u) * -2.5); }
.pop-top span { flex: 1; text-align: center; font-variant-numeric: tabular-nums; }
.side-btns { position: absolute; z-index: 34; right: calc(var(--u) * 2.6); bottom: calc(var(--u) * 26 + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: calc(var(--u) * 2.4); }
.side-btn { position: relative; width: calc(var(--u) * 12.5); height: calc(var(--u) * 12.5); border: 0; border-radius: 50%; background: rgba(255, 252, 244, .9); box-shadow: 0 calc(var(--u) * .6) 0 rgba(92, 27, 47, .18); display: grid; place-items: center; cursor: pointer; }
.side-btn img { width: 74%; height: 74%; object-fit: contain; }
.side-btn:active { transform: scale(.94); }
.side-btn.on { background: #fff4c8; box-shadow: 0 0 0 calc(var(--u) * .7) #f5c84c, 0 0 calc(var(--u) * 3) rgba(245, 200, 76, .8); }
.side-btn .cd { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(92, 27, 47, .35) var(--p, 0%), transparent 0); opacity: 0; pointer-events: none; }
.side-btn.cooling .cd { opacity: 1; animation: cdSweep 1.5s linear forwards; }
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@keyframes cdSweep { from { --p: 100%; } to { --p: 0%; } }
.side-btn .dock-badge { top: calc(var(--u) * -1); right: calc(var(--u) * -1); }
#cuteCard { position: absolute; z-index: 34; left: calc(var(--u) * 4); right: calc(var(--u) * 18); bottom: calc(var(--u) * 26 + env(safe-area-inset-bottom, 0px));
  display: flex; gap: calc(var(--u) * 2.4); align-items: center; padding: calc(var(--u) * 2) calc(var(--u) * 3); border-radius: calc(var(--u) * 4);
  background: rgba(255, 250, 244, .94); box-shadow: 0 0 0 calc(var(--u) * .6) #f2b8cb, 0 calc(var(--u) * .8) 0 rgba(92, 27, 47, .16); }
#cuteCard img { width: calc(var(--u) * 14); height: calc(var(--u) * 14); object-fit: contain; }
#cuteCard b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 4.6); color: var(--ink); }
#cuteCard p { margin: calc(var(--u) * .4) 0 0; font-size: calc(var(--u) * 3.5); color: var(--ink-soft); }
#cuteCard small { display: block; margin-top: calc(var(--u) * .6); font-size: calc(var(--u) * 3.3); color: #b9507a; }
.hud-level { background-image: url('assets/ui/atlas-hub-0.png'); }
.hud-level::after { content: ''; position: absolute; inset: calc(var(--u) * -.7); border-radius: 50%; background: conic-gradient(#8fe3ff var(--xp, 0%), rgba(255, 255, 255, .5) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--u) * 1), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - var(--u) * 1), #000 0); }
#isla .hud-cog, .screen#isla ~ .hud .hud-cog { }
/* ---- taller */
#grid .grid-stage { top: calc(env(safe-area-inset-top, 0px) + var(--hud-h) + var(--u) * 27); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--u) * 41); }
.grid-board { position: relative; }
.cell.blocked { background: transparent; box-shadow: none; }
.cell.blocked::after { display: none; }
.cell.sel { box-shadow: inset 0 0 0 calc(var(--u) * .6) #fff, 0 0 calc(var(--u) * 2) rgba(255, 255, 255, .9); }
.zone { position: absolute; z-index: 2; border-radius: calc(var(--u) * 3); background: url('assets/ui/atlas-grilla-24.png') center / calc(var(--u) * 26) repeat; box-shadow: inset 0 0 0 calc(var(--u) * .5) rgba(26, 86, 58, .25), 0 calc(var(--u) * .5) 0 rgba(26, 86, 58, .25); pointer-events: none; display: grid; place-items: center; }
.zone-lv { font-family: var(--font-display); font-size: calc(var(--u) * 3.6); color: #fff; background: rgba(26, 120, 90, .75); border-radius: 999px; padding: 0 calc(var(--u) * 2.2); }
.order-strip { top: calc(env(safe-area-inset-top, 0px) + var(--hud-h) + var(--u) * 3); gap: calc(var(--u) * 1.4); align-items: flex-end; }
.order { position: relative; flex-direction: row; justify-content: flex-end; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4) calc(var(--u) * 1.2) calc(var(--u) * 11); margin-top: calc(var(--u) * 9);
  min-height: calc(var(--u) * 13); background: url('assets/ui/atlas-grilla-13.png') center/100% 100% no-repeat; box-shadow: none; }
.order-who { position: absolute; left: calc(var(--u) * -1.5); bottom: calc(var(--u) * 1); width: calc(var(--u) * 15); height: calc(var(--u) * 17); object-fit: contain; object-position: bottom; pointer-events: none; filter: drop-shadow(0 calc(var(--u) * .6) 0 rgba(92, 27, 47, .15)); }
.order:active .order-who { transform: scale(.96, .92); transform-origin: bottom; }
.order-items figure .chk { display: none; position: absolute; right: calc(var(--u) * -1); bottom: calc(var(--u) * -1); width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
.order-items figure.has .chk { display: block; }
.order-items figure.has::after { display: none; }
.order-pay { position: absolute; top: calc(var(--u) * -3.4); right: calc(var(--u) * -.6); background: #fff; border-radius: 999px; padding: 0 calc(var(--u) * 1.6) 0 calc(var(--u) * .4); box-shadow: 0 calc(var(--u) * .4) 0 rgba(92, 27, 47, .15); }
.order-go { position: absolute; right: calc(var(--u) * -1); bottom: calc(var(--u) * -2.6); width: calc(var(--u) * 6); animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(calc(var(--u) * -.8)); } }
.order.ready { background-image: url('assets/ui/atlas-grilla-13.png'); background-color: transparent; box-shadow: none; animation: none; filter: drop-shadow(0 0 calc(var(--u) * 1.6) rgba(53, 201, 160, .8)); }
.bag-row { position: absolute; z-index: 32; left: calc(var(--u) * 3); right: calc(var(--u) * 3); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--u) * 21);
  height: calc(var(--u) * 17); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); }
.bags { flex: 1; display: flex; gap: calc(var(--u) * 1.4); min-width: 0; }
.bags.left { justify-content: flex-end; }
.bag { position: relative; flex: 0 0 auto; width: calc(var(--u) * 15); height: calc(var(--u) * 15); border: 0; padding: 0; background: none; cursor: pointer; }
.bag-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * .7) 0 rgba(92, 27, 47, .18)); transition: transform .12s; transform-origin: 50% 90%; }
.bag.squish .bag-img { animation: squish .32s ease; }
@keyframes squish { 30% { transform: scale(1.12, .84); } 65% { transform: scale(.94, 1.08); } }
.bag-badge { position: absolute; left: 30%; top: 34%; width: 40%; height: 40%; object-fit: contain; }
.bag-bolt { position: absolute; right: -6%; top: -6%; width: 34%; height: 34%; object-fit: contain; }
.bag.empty .bag-bolt { display: none; }
.bag.empty .bag-img { filter: grayscale(.75) brightness(1.05); opacity: .8; }
.bag-uses { position: absolute; left: 50%; bottom: -8%; transform: translateX(-50%); font-family: var(--font-display); font-size: calc(var(--u) * 3.3); color: var(--ink); background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 0 calc(var(--u) * 1.4); white-space: nowrap; }
.bag.sel::before { content: ''; position: absolute; inset: -10%; background: url('assets/ui/atlas-grilla-18.png') center/100% 100% no-repeat; }
.basket { position: relative; flex: 0 0 auto; width: calc(var(--u) * 19); height: calc(var(--u) * 19); border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: radial-gradient(#fffdf6 58%, #f2e6cf); box-shadow: 0 0 0 calc(var(--u) * .7) #fff, 0 0 calc(var(--u) * 3) rgba(255, 255, 255, .9); display: grid; place-items: center; }
.basket > img { width: 74%; height: 74%; object-fit: contain; }
.basket.has > img { animation: bob 1.4s ease-in-out infinite; }
.basket-count { position: absolute; left: 50%; bottom: calc(var(--u) * -2); transform: translateX(-50%); font-family: var(--font-display); font-size: calc(var(--u) * 3.5); color: #fff; background: #c06a8c; border-radius: 999px; padding: 0 calc(var(--u) * 1.8); }
.grid-foot { position: absolute; z-index: 32; left: calc(var(--u) * 3); right: calc(var(--u) * 3); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--u) * 2.5); height: calc(var(--u) * 16); display: flex; align-items: center; gap: calc(var(--u) * 2); }
.grid-info { flex: 1; height: 100%; display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4); min-width: 0;
  background: url('assets/ui/atlas-grilla-4.png') center/100% 100% no-repeat; border-radius: calc(var(--u) * 3); }
.gi-ic { flex: 0 0 auto; width: calc(var(--u) * 12); height: calc(var(--u) * 12); display: grid; place-items: center; }
.gi-ic img { width: 100%; height: 100%; object-fit: contain; }
.gi-ic.info img { width: 60%; height: 60%; }
.gi-tx { flex: 1; min-width: 0; }
.gi-tx b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 3.9); color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-tx b small { font-size: .78em; color: var(--ink-soft); }
.gi-tx p { margin: calc(var(--u) * .3) 0 0; font-size: calc(var(--u) * 3.3); line-height: 1.25; color: var(--ink-soft); }
.gi-tx .gi-hint { font-size: calc(var(--u) * 3.1); }
.gi-mini { display: flex; align-items: center; gap: calc(var(--u) * .8); margin-top: calc(var(--u) * .5); }
.gi-mini img { width: calc(var(--u) * 5); height: calc(var(--u) * 5); object-fit: contain; }
.gi-mini small { font-size: calc(var(--u) * 3.1); color: var(--ink-soft); }
.pill-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: calc(var(--u) * .8); height: calc(var(--u) * 9); padding: 0 calc(var(--u) * 2.6) 0 calc(var(--u) * 1.2); border: 0; border-radius: 999px;
  background: #9be46a; box-shadow: inset 0 calc(var(--u) * -.8) 0 #4fc07a, 0 calc(var(--u) * .5) 0 rgba(47, 141, 87, .4); font-family: var(--font-display); font-size: calc(var(--u) * 3.8); color: var(--ink); cursor: pointer; }
.pill-btn img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); object-fit: contain; }
.pill-btn.trash { background: #f6c5cf; box-shadow: inset 0 calc(var(--u) * -.8) 0 #d9788f, 0 calc(var(--u) * .5) 0 rgba(187, 90, 116, .4); padding: 0 calc(var(--u) * 1.6); }
.pill-btn.armed { font-size: calc(var(--u) * 3.5); }
.pill-btn:active { transform: translateY(calc(var(--u) * .4)); }
.door-btn { flex: 0 0 auto; width: calc(var(--u) * 15); height: calc(var(--u) * 16); border: 0; padding: 0; background: none; cursor: pointer; }
.door-btn img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * .6) 0 rgba(92, 27, 47, .2)); }
.door-btn:active img { transform: scale(.93); }
/* ---- ventanas: título en cinta rosa, jardín, mundo, nivel */
.modal-title { position: absolute; left: 50%; top: calc(var(--u) * -5); transform: translateX(-50%); white-space: nowrap; padding: calc(var(--u) * 1.4) calc(var(--u) * 7);
  background: url('assets/ui/atlas-popup-6.png') center/100% 100% no-repeat, #e389ad; border-radius: 999px; font-family: var(--font-hand); font-size: calc(var(--u) * 5.2); color: #fff; z-index: 3; }
.modal-box { position: relative; }
.garden-top { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.5); font-family: var(--font-display); font-size: calc(var(--u) * 10); color: var(--ink-soft); margin-top: calc(var(--u) * 3); }
.garden-top img { width: calc(var(--u) * 11); height: calc(var(--u) * 11); object-fit: contain; }
.garden-top b { font-weight: 400; color: #d45f8e; }
.garden-top b.full { color: #c2415c; }
.garden-buy { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3); margin: calc(var(--u) * 2) 0; }
.gb-plus { display: inline-flex; align-items: center; gap: calc(var(--u) * 1); font-family: var(--font-display); font-size: calc(var(--u) * 6); color: var(--ink); }
.gb-plus img { width: calc(var(--u) * 8); height: calc(var(--u) * 8); object-fit: contain; }
.sec-title { display: flex; align-items: center; gap: calc(var(--u) * 2); margin: calc(var(--u) * 3) 0 calc(var(--u) * 2); font-family: var(--font-display); font-size: calc(var(--u) * 4.4); color: var(--ink); }
.sec-title i { flex: 1; height: 2px; background: rgba(92, 27, 47, .18); }
.sec-title small { font-size: calc(var(--u) * 3.6); color: var(--ink-soft); }
.garden .cuteario-grid { max-height: 42vh; overflow-y: auto; }
.world-map img { width: 100%; display: block; margin-top: calc(var(--u) * 2); }
.world-list { display: flex; gap: calc(var(--u) * 2); justify-content: center; margin: calc(var(--u) * 2) 0; }
.world-it { flex: 1; border: 0; border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 1.6); background: #fff; box-shadow: 0 calc(var(--u) * .5) 0 rgba(92, 27, 47, .15); display: flex; flex-direction: column; align-items: center; font: inherit; }
.world-it b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 3.6); color: var(--ink); }
.world-it small { font-size: calc(var(--u) * 3.3); color: var(--ink-soft); }
.world-it.cur { box-shadow: 0 0 0 calc(var(--u) * .7) var(--mint-deep); }
.world-it.off { opacity: .55; }
.lvl-bar { position: relative; height: calc(var(--u) * 11); margin: calc(var(--u) * 5) calc(var(--u) * 2) 0 calc(var(--u) * 7); border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 calc(var(--u) * .7) #f1b6c8; overflow: visible; }
.lvl-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(#9fe3ff, #4cb6ea); }
.lvl-orb { position: absolute; z-index: 2; left: calc(var(--u) * -7); top: 50%; transform: translateY(-50%); width: calc(var(--u) * 16); height: calc(var(--u) * 16); display: grid; place-items: center;
  background: url('assets/ui/atlas-hub-0.png') center/100% 100% no-repeat; font-family: var(--font-display); font-size: calc(var(--u) * 7); color: #fff; -webkit-text-stroke: calc(var(--u) * .6) #1668a8; paint-order: stroke fill; }
.lvl-num { text-align: center; font-family: var(--font-display); font-size: calc(var(--u) * 5.6); color: var(--ink); }
.rew-box { background: rgba(255, 255, 255, .75); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 2); text-align: center; }
.rew-box > b { font-family: var(--font-display); font-weight: 400; color: var(--ink-soft); font-size: calc(var(--u) * 4); }
.rew-row { display: flex; justify-content: center; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 1.5); }
.rew-chip { position: relative; width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.rew-chip img { width: 100%; height: 100%; object-fit: contain; }
.rew-chip b { position: absolute; right: 0; bottom: calc(var(--u) * -1); min-width: calc(var(--u) * 5.5); padding: 0 calc(var(--u) * 1); font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 3.5); color: #fff; background: #c06a8c; border-radius: 999px; text-align: center; }
.ribbon { display: inline-block; margin: 0 auto; padding: calc(var(--u) * .6) calc(var(--u) * 4); background: #e389ad; color: #fff; border-radius: 999px; font-family: var(--font-hand); font-size: calc(var(--u) * 4.2); }
.cute-art.big.glow { background: radial-gradient(rgba(255, 246, 200, .9), rgba(255, 246, 200, 0) 68%); }
.hud-cog { display: none; }
.modal-title { position: relative; left: auto; top: auto; transform: none; display: table; margin: calc(var(--u) * -1) auto calc(var(--u) * 1); }
/* ---- pantalla de carga del juego final (captura del usuario) */
#splash { justify-content: flex-start; padding: calc(var(--u) * 8 + env(safe-area-inset-top, 0px)) calc(var(--u) * 6) 0; background: #4fb4c9; overflow: hidden; }
#splash .load-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; z-index: 0; }
#splash > :not(.load-bg) { position: relative; z-index: 1; }
.load-logo { width: calc(var(--u) * 74); margin-top: calc(var(--u) * 2); filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.5) rgba(30, 40, 80, .25)); animation: bob 4s ease-in-out infinite; }
.load-tag { margin-top: calc(var(--u) * -9); padding: calc(var(--u) * .6) calc(var(--u) * 4); border-radius: 999px; background: #7b62d6; color: #fff; font-family: var(--font-display); font-size: calc(var(--u) * 4.2);
  box-shadow: 0 0 0 calc(var(--u) * .6) #fff, 0 calc(var(--u) * .7) 0 rgba(40, 30, 90, .35); transform: rotate(-3deg); }
#splash .boot-bar { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); bottom: calc(var(--u) * 9 + env(safe-area-inset-bottom, 0px)); width: auto; height: calc(var(--u) * 6.4);
  background: #23465f; box-shadow: inset 0 0 0 calc(var(--u) * .6) #1a3348; }
#splash .boot-bar i { background: linear-gradient(#ff9fb6, #f0718f); }
#splash .boot-bar b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 400; color: #fff; font-size: calc(var(--u) * 3.6); }
#splash #startBtn { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--u) * 20 + env(safe-area-inset-bottom, 0px)); }
#splash .boot-hint { position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8); bottom: calc(var(--u) * 7); background: rgba(255, 255, 255, .85); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 1.5); }
#splash .brand { color: #fff; opacity: .85; bottom: calc(var(--u) * 2 + env(safe-area-inset-bottom, 0px)); }
/* ---- diálogo de papelería rosa */
.talk-layer { position: absolute; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--u) * 6);
  background: radial-gradient(ellipse at 50% 50%, rgba(250, 205, 225, .97), rgba(253, 236, 244, .97) 70%); animation: talkIn .22s ease; cursor: pointer; }
.talk-layer.out { animation: talkOut .22s ease forwards; }
@keyframes talkIn { from { opacity: 0; } }
@keyframes talkOut { to { opacity: 0; } }
.talk-stack { display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.talk-row { display: flex; align-items: center; gap: calc(var(--u) * 2); animation: rowIn .28s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rowIn { from { transform: translateY(calc(var(--u) * 4)) scale(.96); opacity: 0; } }
.talk-face { width: calc(var(--u) * 28); flex: 0 0 auto; }
.talk-card { position: relative; flex: 1; padding: calc(var(--u) * 2.4) calc(var(--u) * 3) calc(var(--u) * 3); background: #fff4f8; border-radius: calc(var(--u) * 5); box-shadow: inset 0 0 0 calc(var(--u) * .9) #f6a8c6; text-align: center; }
.talk-card::after { content: ''; position: absolute; right: calc(var(--u) * -2); top: calc(var(--u) * -3); width: calc(var(--u) * 9); height: calc(var(--u) * 7); background: url('assets/cq/dialogo-2.png') right top / auto 100% no-repeat; display: none; }
.talk-card b { font-family: var(--font-hand); font-weight: 400; font-size: calc(var(--u) * 5.4); color: #d25b93; }
.talk-card i { display: block; height: calc(var(--u) * 1.2); margin: calc(var(--u) * .8) 0 calc(var(--u) * 1.2); background: radial-gradient(circle at 50% 0, transparent 60%, #f6a8c6 62%, transparent 68%) 0 0 / calc(var(--u) * 4) 100% repeat-x; }
.talk-card p { margin: 0; font-family: var(--font-body); font-size: calc(var(--u) * 4.2); line-height: 1.35; color: #c0638f; }
.talk-tap { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 10 + env(safe-area-inset-bottom, 0px)); text-align: center; font-family: var(--font-hand); font-size: calc(var(--u) * 5); color: #d25b93; animation: bob 1.6s ease-in-out infinite; }
#splash .brand { position: absolute; }

/* ================================================================ 0.3.0
   Tutorial (TutorialController), misión principal (CutebuildCanvas) y la
   cinemática de misión completada. */
.tuto-layer { position: absolute; inset: 0; z-index: 120; pointer-events: none; }
.tuto-layer.dim { background: rgba(70, 30, 50, .28); }
.tuto-catch { position: absolute; inset: 0; pointer-events: auto; cursor: pointer; }
.tuto-hand { position: absolute; width: calc(var(--u) * 15); height: calc(var(--u) * 15); margin: calc(var(--u) * -2.2) 0 0 calc(var(--u) * -3.6); pointer-events: none; filter: drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * .6) rgba(92, 27, 47, .35)); }
.tuto-hand img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tuto-hand.tap img { animation: handTap 1s ease-in-out infinite; transform-origin: 30% 20%; }
@keyframes handTap { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(calc(var(--u) * 1.4), calc(var(--u) * 1.8)) scale(.9); } }
.tuto-card { position: absolute; left: calc(var(--u) * 4); right: calc(var(--u) * 4); bottom: calc(var(--u) * 30 + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: calc(var(--u) * 1.6); animation: rowIn .3s cubic-bezier(.3, 1.4, .5, 1); }
.tuto-card.top { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + var(--hud-h) + var(--u) * 26); }
.tuto-card.center { bottom: auto; top: 40%; }
.tuto-face { width: calc(var(--u) * 20); flex: 0 0 auto; filter: drop-shadow(0 calc(var(--u) * .5) 0 rgba(92, 27, 47, .2)); }
.tuto-text { flex: 1; min-width: 0; background: #fff4f8; border-radius: calc(var(--u) * 4.5); box-shadow: inset 0 0 0 calc(var(--u) * .8) #f6a8c6, 0 calc(var(--u) * .8) 0 rgba(187, 90, 116, .25); padding: calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 2.4); }
.tuto-text > b { display: block; font-family: var(--font-hand); font-weight: 400; font-size: calc(var(--u) * 4); color: #d25b93; }
.tuto-text p { margin: calc(var(--u) * .6) 0 0; font-family: var(--font-body); font-size: calc(var(--u) * 4.1); line-height: 1.32; color: #a24f7a; }
.tuto-text p b { color: #407036; font-weight: 400; font-family: var(--font-display); }
.tuto-text small { display: block; margin-top: calc(var(--u) * 1); font-family: var(--font-hand); font-size: calc(var(--u) * 3.5); color: #d25b93; text-align: right; animation: bob 1.6s ease-in-out infinite; }
[hidden].tuto-card, .tuto-hand[hidden], .tuto-catch[hidden] { display: none; }

/* Cinemática: la interfaz del refugio se aparta, como CanvasCommon.ActiveCanvas(false). */
body.cine .cq-dock, body.cine .side-btns, body.cine .scene-tip, body.cine #popPill, body.cine #cuteCard { opacity: 0; pointer-events: none; transition: opacity .25s; }
body.cine #islaHit { pointer-events: none; }
.star-drop { width: calc(var(--u) * 6); height: calc(var(--u) * 6); transition: left 480ms cubic-bezier(.5, 0, .7, 1), top 480ms cubic-bezier(.5, 0, .7, 1), opacity 120ms ease 420ms; }

/* Misión principal en la grilla: tarjeta dorada con «¡Vamos!». */
.order.main { flex: 0 0 auto; min-width: calc(var(--u) * 21); background: linear-gradient(180deg, #fff6d6 0%, #ffe39a 100%); box-shadow: 0 calc(var(--u) * .6) 0 var(--gold-deep), 0 0 calc(var(--u) * 2.6) rgba(245, 200, 76, .65); animation: main-glow 1.6s ease-in-out infinite; position: relative; }
.order.main .main-ic img { width: calc(var(--u) * 9); height: calc(var(--u) * 9); object-fit: contain; display: block; }
.order.main .main-go { position: absolute; right: calc(var(--u) * -1.4); top: calc(var(--u) * -2.2); padding: calc(var(--u) * .6) calc(var(--u) * 2); border-radius: 999px; background: #6ccf62; color: #fff; font-family: var(--font-display); font-size: calc(var(--u) * 3.5); box-shadow: 0 calc(var(--u) * .5) 0 #3c9a43; transform: rotate(6deg); }
@keyframes main-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.pill-btn.free { background: #8fe07e; color: #fff; font-family: var(--font-display); font-size: calc(var(--u) * 3.8); padding: 0 calc(var(--u) * 3); box-shadow: inset 0 calc(var(--u) * -.8) 0 #4fb24a, 0 calc(var(--u) * .5) 0 rgba(60, 140, 60, .4); }

/* Ventana de la misión (CutebuildCanvas) y de misión completada. */
.mission-pop .mp-head { display: flex; align-items: center; gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 3); }
.mission-pop .mp-who { width: calc(var(--u) * 24); height: calc(var(--u) * 24); object-fit: contain; flex: 0 0 auto; }
.mission-pop .mp-lv { flex: 1; min-width: 0; }
.mission-pop .mp-lvn { font-family: var(--font-display); font-size: calc(var(--u) * 4.6); color: var(--ink); }
.mp-bar { position: relative; height: calc(var(--u) * 5.4); margin-top: calc(var(--u) * 1); border-radius: 999px; background: #f2dfe6; box-shadow: inset 0 0 0 calc(var(--u) * .6) #e7b8c9; overflow: hidden; }
.mp-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #9ef08e, #5ccb58); border-radius: 999px; }
.mp-bar em { position: relative; display: block; text-align: center; font-style: normal; font-family: var(--font-display); font-size: calc(var(--u) * 3.4); line-height: calc(var(--u) * 5.4); color: #fff; -webkit-text-stroke: calc(var(--u) * .5) var(--ink); paint-order: stroke fill; }
.mp-need { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 2) calc(var(--u) * 3); margin: 0 auto calc(var(--u) * 3); width: fit-content; border-radius: calc(var(--u) * 4); background: #fff7e2; box-shadow: inset 0 0 0 calc(var(--u) * .6) #f1d48b; }
.mp-need > img:first-child { width: calc(var(--u) * 9); height: calc(var(--u) * 9); object-fit: contain; }
.mp-need b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 7); color: var(--ink); }
.mp-need small { font-size: calc(var(--u) * 3.5); color: var(--rose-deep); }
.mp-need .mp-check { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.complete-pop .mc-who img { width: calc(var(--u) * 34); height: calc(var(--u) * 34); object-fit: contain; display: block; margin: 0 auto calc(var(--u) * 2); animation: rowIn .4s cubic-bezier(.3, 1.4, .5, 1); }
.complete-pop .rew-row, .mission-pop .rew-row { justify-content: center; }
.complete-pop, .pop-pop { cursor: pointer; }
.pop-pop .pop-up { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); margin: calc(var(--u) * 2) 0; }
.pop-pop .pop-up img { width: calc(var(--u) * 20); height: calc(var(--u) * 20); object-fit: contain; }
.pop-pop .pop-up b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 10); color: var(--leaf-deep); }
.info-pop .info-img { display: block; width: calc(var(--u) * 30); height: calc(var(--u) * 30); object-fit: contain; margin: 0 auto calc(var(--u) * 2); }
.info-pop .info-img.wide { width: calc(var(--u) * 52); height: auto; }
.info-pop p b { color: var(--gold-deep); font-weight: 400; font-family: var(--font-display); }

/* Las tarjetas de pedido tienen ancho de tarjeta, no de fila (MissionGrid). */
.order-strip { justify-content: flex-start; }
.order { flex: 0 1 calc(var(--u) * 31); }
/* PropSelection: el color de cada opción como aro del botón. */
.variant[style*="--opt"] { box-shadow: inset 0 0 0 calc(var(--u) * 1.1) var(--opt); }
.variant[style*="--opt"][aria-pressed="true"] { box-shadow: inset 0 0 0 calc(var(--u) * 1.1) var(--opt), 0 0 0 calc(var(--u) * .9) #fff, 0 0 0 calc(var(--u) * 1.8) var(--opt); }

/* ================================================================ 0.3.2
   Interfaz fiel al prototipo grabado por un jugador (video de YouTube) y a
   los prefabs/mockups del reskin (Arte/UI/Reskin/mokups, CanvasCommon,
   PopUpMision, MisionCompletada, New Cuteling, MissionGrid, BuildCharacterUI). */

/* ---- portada: fondo-pantalla-de-carga centrado, logotipo-cuddlequest-2
   arriba (sin «Happy Merge», que es del logo de Cuteland) y barrita-de-carga */
#splash { padding: 0; background: #57b9d6; }
#splash .load-bg { object-position: 50% 50%; }
#splash .load-logo { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + var(--uh) * 9); width: calc(var(--u) * 66); margin: 0; transform: translateX(-50%); animation: none; filter: drop-shadow(0 calc(var(--u) * .8) calc(var(--u) * 1.2) rgba(30, 40, 80, .2)); }
#splash .boot-bar { left: calc(var(--u) * 12); right: calc(var(--u) * 12); bottom: calc(var(--uh) * 3.4 + env(safe-area-inset-bottom, 0px)); height: calc(var(--u) * 6.2); border-radius: 0;
  background: url('assets/cq/carga-barra-0.png') center / 100% 100% no-repeat; box-shadow: none; overflow: visible; padding: calc(var(--u) * .9) calc(var(--u) * 1.1); }
#splash .boot-bar i { display: block; height: 100%; border-radius: 999px; background: url('assets/cq/carga-barra-1.png') left center / calc(var(--u) * 73.8) 100% no-repeat; transition: width .2s; }
#splash .boot-bar b { font-family: var(--font-body); font-size: calc(var(--u) * 3.5); color: #fff; text-shadow: 0 1px 0 rgba(120, 40, 70, .45); }
#splash .brand, #splash .load-tag { display: none; }

/* ---- HUD (CanvasCommon/Superior): nivel, energía, corazones, gemas en sus
   píldoras (atlas-hub 1/3/2 con iconos 5/7/6), estrella grande y tienda */
.hud { top: calc(env(safe-area-inset-top, 0px) + var(--u) * 3); left: calc(var(--u) * 3.6); right: calc(var(--u) * 2.6); gap: calc(var(--u) * 1.2); height: calc(var(--u) * 14); }
.hud-level { width: calc(var(--u) * 10.6); height: calc(var(--u) * 10.6); filter: none; }
.hud-level::after { inset: calc(var(--u) * -.5); }
.hud-level span { font-size: calc(var(--u) * 4.4); -webkit-text-stroke: 0; color: #fff; text-shadow: 0 calc(var(--u) * .3) 0 rgba(10, 60, 120, .45); }
.hud-res { gap: calc(var(--u) * 2.2); justify-content: space-between; padding-left: calc(var(--u) * 2.4); }
.hud .res { position: relative; min-width: 0; flex: 1 1 0; max-width: calc(var(--u) * 14.4); height: calc(var(--u) * 5.8); padding: 0 calc(var(--u) * 1.4) 0 calc(var(--u) * 4.2); justify-content: flex-end;
  border-radius: 0; background: url('assets/ui/atlas-hub-1.png') center / 100% 100% no-repeat; box-shadow: none; }
.hud .res.pill-h { background-image: url('assets/ui/atlas-hub-3.png'); }
.hud .res.pill-g { background-image: url('assets/ui/atlas-hub-2.png'); }
.hud .res img { position: absolute; left: calc(var(--u) * -2.2); top: 50%; transform: translateY(-58%); width: calc(var(--u) * 6.4); height: calc(var(--u) * 7); }
.hud .res.pill-g img { left: calc(var(--u) * -1.6); width: calc(var(--u) * 5); }
.hud .res b { font-family: var(--font-body); font-size: calc(var(--u) * 3.5); color: #d58a3f; }
.hud .res.pill-h b { color: #c8476a; }
.hud .res.pill-g b { color: #c0508a; }
.hud .res.star-badge { flex: 0 0 auto; max-width: none; width: calc(var(--u) * 13.4); height: calc(var(--u) * 13.4); padding: 0; background: none; justify-content: center; margin-left: calc(var(--u) * 1.4); }
.hud .res.star-badge img { left: 0; top: 0; transform: none; width: 100%; height: 100%; object-fit: contain; }
.hud .res.star-badge b { position: relative; font-family: var(--font-display); font-size: calc(var(--u) * 5.4); color: #e88f2c; -webkit-text-stroke: calc(var(--u) * .45) #fff3c6; paint-order: stroke fill; margin-top: calc(var(--u) * .8); }
.hud-shop { position: relative; flex: 0 0 auto; width: calc(var(--u) * 10.6); height: calc(var(--u) * 10.6); border: 0; padding: 0; background: none; cursor: pointer; }
.hud-shop img { width: 100%; height: 100%; object-fit: contain; }
.hud-shop .shop-dot { position: absolute; right: calc(var(--u) * -.6); top: calc(var(--u) * -.8); width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: 50%; background: #e2304c; box-shadow: 0 0 0 calc(var(--u) * .4) #fff; }
.hud-shop:active { transform: scale(.93); }

/* ---- diálogos (Dialogo/ChatDialog): se apilan desde arriba, cara de Gabi
   a la izquierda y tarjeta rosa con hojita; «Tap to continue…» abajo */
.talk-layer { justify-content: flex-start; padding: calc(env(safe-area-inset-top, 0px) + var(--uh) * 15) calc(var(--u) * 3) 0 0;
  background: radial-gradient(ellipse 80% 55% at 50% 55%, rgba(251, 206, 226, .82), rgba(254, 240, 245, .93) 75%); }
.talk-stack { gap: calc(var(--u) * 5); }
.talk-row { gap: 0; align-items: center; }
.talk-face { width: calc(var(--u) * 33); margin-right: calc(var(--u) * -2.4); position: relative; z-index: 1; }
.talk-card { flex: 0 0 calc(var(--u) * 63); min-height: calc(var(--u) * 30); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--u) * 2.4) calc(var(--u) * 4) calc(var(--u) * 3.4);
  background: #fff7fa; border-radius: calc(var(--u) * 3.6); box-shadow: inset 0 0 0 calc(var(--u) * .8) #f7b2cd, 0 calc(var(--u) * .8) 0 #f7c4d8; }
.talk-card::after { display: block; right: calc(var(--u) * -2.6); top: calc(var(--u) * -2.6); width: calc(var(--u) * 10); height: calc(var(--u) * 8); background: url('assets/ui/atlas-popup-20.png') center / contain no-repeat; transform: rotate(60deg); }
.talk-card b { font-family: var(--font-hand); font-size: calc(var(--u) * 5.4); color: #e06cae; letter-spacing: .06em; }
.talk-card i { height: calc(var(--u) * 1.4); margin: calc(var(--u) * .2) calc(var(--u) * -1) calc(var(--u) * 1.6); background: url('assets/ui/atlas-popup-14.png') center / 100% 100% no-repeat; }
.talk-card p { font-size: calc(var(--u) * 4.1); color: #e06cae; line-height: 1.3; }
.talk-tap { bottom: calc(var(--uh) * 12 + env(safe-area-inset-bottom, 0px)); font-family: var(--font-body); font-size: calc(var(--u) * 3.6); color: #e096bd; animation: none; }
/* la tarjeta del tutorial habla igual que el diálogo */
.tuto-card { left: 0; right: calc(var(--u) * 3); gap: 0; }
.tuto-face { width: calc(var(--u) * 30); margin-right: calc(var(--u) * -2.4); position: relative; z-index: 1; filter: none; }
.tuto-text { position: relative; flex: 0 0 calc(var(--u) * 63); text-align: center; background: #fff7fa; border-radius: calc(var(--u) * 3.6); box-shadow: inset 0 0 0 calc(var(--u) * .8) #f7b2cd, 0 calc(var(--u) * .8) 0 #f7c4d8; padding: calc(var(--u) * 2.4) calc(var(--u) * 4) calc(var(--u) * 3); }
.tuto-text::after { content: ''; position: absolute; right: calc(var(--u) * -2.6); top: calc(var(--u) * -2.6); width: calc(var(--u) * 10); height: calc(var(--u) * 8); background: url('assets/ui/atlas-popup-20.png') center / contain no-repeat; transform: rotate(60deg); }
.tuto-text > b { font-size: calc(var(--u) * 5.2); color: #e06cae; letter-spacing: .06em; padding-bottom: calc(var(--u) * 1.4); margin-bottom: calc(var(--u) * 1); background: url('assets/ui/atlas-popup-14.png') bottom center / 100% calc(var(--u) * 1.2) no-repeat; }
.tuto-text p { font-size: calc(var(--u) * 4); color: #e06cae; }
#popPill { display: none !important; }
/* el prototipo no tiene píldora de población, aviso de estrellas ni botón de enfoque en el refugio */
#islaTip, #btnFocus { display: none !important; }
/* dock del refugio como en el video: iconos sueltos, sin franja de fondo */
.cq-dock { background: none; height: calc(var(--u) * 20 + env(safe-area-inset-bottom, 0px)); padding: 0 calc(var(--u) * 4) env(safe-area-inset-bottom, 0px); }
.cq-dock .dock-btn { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.cq-dock .dock-nest { width: calc(var(--u) * 22); height: calc(var(--u) * 16); }
.cq-dock #btnGrid { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.nest-count { font-family: var(--font-body); font-size: calc(var(--u) * 3.5); background: #b04d86; bottom: calc(var(--u) * -2.6); }
.side-btn { width: calc(var(--u) * 10); height: calc(var(--u) * 10); background: #fff; }

/* ---- ventanas del reskin (atlas-popup): velo rosado, papel crema, cinta rosa
   con hojitas, botón verde (popup_121) y la X roja debajo (popup_32) */
.modal { padding: calc(var(--u) * 8) calc(var(--u) * 10); }
.modal-veil { background: rgba(255, 236, 242, .74); backdrop-filter: blur(calc(var(--u) * .35)); }
.modal-box { max-width: calc(var(--u) * 74); max-height: none; overflow: visible; border-radius: calc(var(--u) * 3.4); padding: calc(var(--u) * 10) calc(var(--u) * 5) calc(var(--u) * 6);
  background: url('assets/ui/atlas-popup-2.png') center / 100% 100% no-repeat, #fcefee;
  box-shadow: inset 0 0 0 calc(var(--u) * .7) #f5dcd9, 0 calc(var(--u) * 1.1) 0 #f3c9d0, 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(214, 120, 150, .18); }
.modal-body { max-height: calc(var(--uh) * 64); overflow-y: auto; overflow-x: hidden; }
.modal-box h2 { font-family: var(--font-hand); color: #d76fa6; font-weight: 400; }
.modal-box p { color: #a98b88; }
.modal-box .modal-title, .modal-title { position: absolute; z-index: 3; left: 50%; top: calc(var(--u) * -5.6); transform: translateX(-50%); display: block; margin: 0; width: calc(var(--u) * 47); height: calc(var(--u) * 11.6); padding: 0 calc(var(--u) * 5);
  background: url('assets/ui/atlas-popup-27.png') center / 100% 100% no-repeat; border-radius: 0; font-family: var(--font-hand); font-size: calc(var(--u) * 5); line-height: calc(var(--u) * 11); color: #fff; text-align: center; white-space: nowrap; overflow: visible; text-overflow: ellipsis; }
.modal-title::after { content: ''; position: absolute; right: calc(var(--u) * -10); top: calc(var(--u) * -.4); width: calc(var(--u) * 11); height: calc(var(--u) * 11);
  background: url('assets/ui/atlas-popup-19.png') 10% 30% / 48% auto no-repeat, url('assets/ui/atlas-popup-20.png') 90% 70% / 56% auto no-repeat; }
.modal-x { top: auto; right: auto; left: 50%; bottom: calc(var(--u) * -15); transform: translateX(-50%); width: calc(var(--u) * 9); height: calc(var(--u) * 9); background: url('assets/ui/atlas-popup-32.png') center / contain no-repeat; font-size: 0; color: transparent; }
.modal-box .btn { min-width: calc(var(--u) * 44); height: calc(var(--u) * 10.6); padding: 0 calc(var(--u) * 6); border: 0; border-radius: 0; background: url('assets/ui/atlas-popup-121.png') center / 100% 100% no-repeat; box-shadow: none;
  font-family: var(--font-hand); font-size: calc(var(--u) * 5.2); color: #fff; text-shadow: 0 calc(var(--u) * .35) 0 #3d9e4b, 0 0 calc(var(--u) * .5) #3d9e4b; }
.modal-box .btn:disabled { filter: grayscale(.35) brightness(1.08); opacity: .55; cursor: default; }
.modal-box .btn:not(:disabled):active { transform: translateY(calc(var(--u) * .4)); }
.modal-actions { margin-top: calc(var(--u) * 3); }
.rew-title { margin: calc(var(--u) * 2) 0 calc(var(--u) * 1.6) !important; font-family: var(--font-hand); font-size: calc(var(--u) * 3.8) !important; color: #7f6a66 !important; }
.modal-box .rew-row { gap: calc(var(--u) * 2.4); margin-top: 0; }
.modal-box .rew-chip { width: calc(var(--u) * 11); height: auto; display: flex; flex-direction: column; align-items: center; }
.modal-box .rew-chip img { width: calc(var(--u) * 10.5); height: calc(var(--u) * 10.5); }
.modal-box .rew-chip b { position: static; margin-top: calc(var(--u) * 1.2); min-width: calc(var(--u) * 5.6); padding: 0 calc(var(--u) * 1); border-radius: calc(var(--u) * .8); background: #c8b4ad; font-family: var(--font-body); font-size: calc(var(--u) * 3.3); line-height: 1.35; color: #fff; }

/* misión (PopUpMision) */
.mission-pop .mp-prog { display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 1.6); margin: calc(var(--u) * -2) 0 calc(var(--u) * 3); }
.mission-pop .mp-bar { position: relative; width: calc(var(--u) * 26); height: calc(var(--u) * 5.2); margin: 0; border-radius: 999px; background: #c6aba5; box-shadow: none; overflow: hidden; }
.mission-pop .mp-bar i { background: #f08cb2; border-radius: 999px; }
.mission-pop .mp-bar em { font-family: var(--font-body); font-size: calc(var(--u) * 3.5); line-height: calc(var(--u) * 5.2); -webkit-text-stroke: 0; color: #fff; }
.mission-pop .mp-home { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); object-fit: contain; }
.mission-pop .mp-mid { position: relative; height: calc(var(--u) * 38); margin: 0 calc(var(--u) * -1); }
.mission-pop .mp-who { position: absolute; z-index: 1; left: calc(var(--u) * 1); bottom: 0; width: auto; height: calc(var(--u) * 37); }
.mission-pop .mp-cost { position: absolute; right: calc(var(--u) * 1); top: calc(var(--u) * 9); width: calc(var(--u) * 37); height: calc(var(--u) * 20); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.5); padding-left: calc(var(--u) * 7);
  background: url('assets/ui/atlas-popup-26.png') center / 100% 100% no-repeat; }
.mission-pop .mp-cost b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 5.6); color: #d15a09; }
.mission-pop .mp-star { position: relative; width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.mission-pop .mp-star img { width: 100%; height: 100%; object-fit: contain; }
.mission-pop .mp-star .mp-check { position: absolute; right: calc(var(--u) * -2); bottom: calc(var(--u) * -1); width: 58%; height: 58%; }
.mission-pop .mp-div { display: block; height: calc(var(--u) * 1.6); margin: calc(var(--u) * 2) calc(var(--u) * -3) 0; background: url('assets/ui/atlas-popup-18.png') center / 100% 100% no-repeat; }
.mission-pop .mp-need { margin: calc(var(--u) * 2) 0 0; font-size: calc(var(--u) * 3.5); color: #d76fa6; }

/* elegir variante (PropSelection): panel blanco suelto, sin velo, OK aparte */
.variant-pop.modal-box { width: auto; max-width: calc(var(--u) * 62); padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 4); border-radius: calc(var(--u) * 3); margin-top: 0;
  background: url('assets/ui/atlas-decoracion-5.png') center / 100% 100% no-repeat; box-shadow: none; }
.modal:has(.variant-pop) .modal-veil { background: transparent; backdrop-filter: none; }
.variant-pop h2 { margin: 0 0 calc(var(--u) * 2); font-size: calc(var(--u) * 3.6); color: #c39ca3; }
.variant-pop .variants { display: flex; gap: calc(var(--u) * 1.4); justify-content: center; flex-wrap: nowrap; }
.variant-pop .variant { position: relative; width: calc(var(--u) * 13.5); height: calc(var(--u) * 13.5); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none !important; }
.variant-pop .variant[aria-pressed="true"] { background: url('assets/ui/atlas-decoracion-2.png') center / 100% 100% no-repeat; }
.variant-pop .variant img { width: 74%; height: 74%; object-fit: contain; }
.variant-pop .variant.brush img { width: 62%; height: 80%; transform: rotate(-35deg); }
.variant-pop .variant .paint { position: absolute; left: 30%; top: 14%; width: 44%; height: 34%; transform: rotate(-35deg); background: var(--paint);
  -webkit-mask: url('assets/ui/atlas-decoracion-1.png') center / contain no-repeat; mask: url('assets/ui/atlas-decoracion-1.png') center / contain no-repeat; }
.variant-pop .modal-actions { position: absolute; left: 50%; bottom: calc(var(--u) * -14); transform: translateX(-50%); margin: 0; }
.variant-pop .btn.btn-ok { min-width: calc(var(--u) * 26); height: calc(var(--u) * 10); background-image: url('assets/ui/atlas-decoracion-4.png'); font-size: calc(var(--u) * 5.4); }

/* celebraciones (MisionCompletada, New Cuteling, nivel, población, avisos):
   pantalla clara sin papel, adorno de ramitas, cinta de color y Great! */
.modal:has(.celebrate) .modal-veil { background: radial-gradient(ellipse 70% 40% at 50% 30%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)), rgba(255, 244, 243, .96); backdrop-filter: none; }
.modal-box.celebrate { max-width: calc(var(--u) * 92); padding: 0; background: none; box-shadow: none; animation: fade-in .25s ease; }
.celebrate .cel-art { position: relative; width: 100%; height: calc(var(--u) * 62); display: flex; align-items: flex-end; justify-content: center; }
.celebrate .cel-deco { position: absolute; left: calc(var(--u) * -4); right: calc(var(--u) * -4); top: calc(var(--u) * 2); bottom: calc(var(--u) * -6); background: #e8dcf0;
  -webkit-mask: url('assets/ui/atlas-popup-36.png') center / 100% 100% no-repeat; mask: url('assets/ui/atlas-popup-36.png') center / 100% 100% no-repeat; opacity: .9; }
.newcute-pop .cel-deco, .pop-pop .cel-deco { background: #dfe9c9; }
.info-pop .cel-deco, .newlevel-pop .cel-deco { background: #f6d4dc; }
.celebrate .cel-who { position: relative; height: calc(var(--u) * 56); width: auto; max-width: 100%; object-fit: contain; animation: rowIn .45s cubic-bezier(.3, 1.4, .5, 1); }
.celebrate .cel-who.wide { height: calc(var(--u) * 50); }
.complete-pop .cel-art::before { content: ''; position: absolute; inset: calc(var(--u) * 6) calc(var(--u) * 2) calc(var(--u) * 2);
  background: url('assets/ui/atlas-popup-21.png') 12% 52% / calc(var(--u) * 14) auto no-repeat, url('assets/ui/atlas-popup-20.png') 88% 50% / calc(var(--u) * 12) auto no-repeat,
    url('assets/ui/atlas-popup-209.png') 2% 78% / calc(var(--u) * 9) auto no-repeat, url('assets/ui/atlas-popup-209.png') 97% 66% / calc(var(--u) * 9) auto no-repeat,
    url('assets/ui/atlas-popup-208.png') 16% 20% / calc(var(--u) * 7) auto no-repeat, url('assets/ui/atlas-popup-208.png') 84% 8% / calc(var(--u) * 7) auto no-repeat; }
.newcute-pop .cel-art { height: calc(var(--u) * 50); }
.newcute-pop .cel-who { height: calc(var(--u) * 34); margin-bottom: calc(var(--u) * 6); }
.newcute-pop .cel-leaves { position: absolute; inset: calc(var(--u) * 4) calc(var(--u) * 10) calc(var(--u) * 2);
  background: url('assets/ui/atlas-popup-21.png') 6% 20% / calc(var(--u) * 13) auto no-repeat, url('assets/ui/atlas-popup-22.png') 94% 20% / calc(var(--u) * 12) auto no-repeat,
    url('assets/ui/atlas-popup-20.png') 0% 78% / calc(var(--u) * 13) auto no-repeat, url('assets/ui/atlas-popup-19.png') 100% 78% / calc(var(--u) * 11) auto no-repeat; }
.celebrate .cel-ribbon { position: relative; z-index: 2; display: block; width: calc(var(--u) * 66); height: calc(var(--u) * 11); margin: calc(var(--u) * -3) auto calc(var(--u) * 3); padding: 0 calc(var(--u) * 6);
  background: url('assets/ui/atlas-popup-42.png') center / 100% 100% no-repeat; font-family: var(--font-hand); font-size: calc(var(--u) * 4.4); line-height: calc(var(--u) * 10.4); color: #fff; letter-spacing: .03em; white-space: nowrap; }
.celebrate .cel-ribbon.verde { background-image: url('assets/ui/atlas-popup-23.png'); }
.celebrate .cel-ribbon.rosa { background-image: url('assets/ui/atlas-popup-89.png'); width: calc(var(--u) * 52); }
.celebrate .cel-name { margin: 0 0 calc(var(--u) * 1); font-family: var(--font-hand); font-size: calc(var(--u) * 6.4); color: #8c6b5d; }
.celebrate .cel-text { margin: 0 auto calc(var(--u) * 3); max-width: calc(var(--u) * 62); font-size: calc(var(--u) * 3.6); color: #a98b88; }
.celebrate .btn { min-width: calc(var(--u) * 50); }
.newlevel-pop .cel-art { height: calc(var(--u) * 54); align-items: center; }
.newlevel-pop .cel-art::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 64); height: calc(var(--u) * 40); transform: translate(-50%, -50%);
  background: url('assets/ui/atlas-popup-21.png') 4% 64% / calc(var(--u) * 12) auto no-repeat, url('assets/ui/atlas-popup-22.png') 96% 64% / calc(var(--u) * 11) auto no-repeat,
    url('assets/ui/atlas-popup-20.png') 22% 2% / calc(var(--u) * 10) auto no-repeat, url('assets/ui/atlas-popup-19.png') 78% 2% / calc(var(--u) * 9) auto no-repeat; }
.newlevel-pop .cel-lvl { position: relative; width: calc(var(--u) * 30); height: calc(var(--u) * 30); display: grid; place-items: center; background: url('assets/ui/atlas-popup-24.png') center / contain no-repeat;
  font-family: var(--font-display); font-size: calc(var(--u) * 15); color: #fff; animation: rowIn .45s cubic-bezier(.3, 1.4, .5, 1); }
.newlevel-pop .cel-ribbon { margin-top: calc(var(--u) * -9); }
.info-pop .cel-art { height: calc(var(--u) * 52); align-items: center; }
.info-pop .info-img.wide { position: relative; width: calc(var(--u) * 74); height: auto; margin: 0; }
.info-pop.celebrate p { font-size: calc(var(--u) * 4); color: #8f7570; }
.info-pop.celebrate p b { color: #e2a12f; }
.modal-box .btn:focus, .modal-box .btn:focus-visible { outline: none; }
.mission-pop p.mp-need { display: block; width: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; }

/* ---- taller como el prototipo: fondo del bosque arriba con los pedidos
   (MissionGrid), tablero de 7x7 a lo ancho sin panel, zonas de arbusto con su
   número en círculo azul, bolsas sueltas al centro y la barra de info abajo
   con engranaje a la izquierda y puerta a la derecha. */
#grid .grid-stage { top: calc(env(safe-area-inset-top, 0px) + var(--uh) * 34); bottom: auto; place-items: start center; }
#grid .grid-board { --cell: min(calc(var(--u) * 13.7), calc(var(--uh) * 6.3)); --gap: calc(var(--u) * .45); padding: 0; background: none; box-shadow: none; border-radius: 0; }
#grid .cell { border-radius: calc(var(--u) * 2.2); box-shadow: none; }
#grid .cell.alt { filter: none; }
#grid .zone { border-radius: calc(var(--u) * 2.6); box-shadow: inset 0 0 0 calc(var(--u) * .45) rgba(40, 140, 100, .35), 0 calc(var(--u) * .4) 0 rgba(40, 140, 100, .25); }
#grid .zone-lv { width: calc(var(--u) * 8); height: calc(var(--u) * 8); padding: 0; display: grid; place-items: center; border-radius: 50%; background: url('assets/ui/atlas-hub-0.png') center / 100% 100% no-repeat;
  font-family: var(--font-display); font-size: calc(var(--u) * 4.2); color: #fff; }
#orderStrip.order-strip { position: absolute; z-index: 30; left: calc(var(--u) * 2); right: calc(var(--u) * 2); top: calc(env(safe-area-inset-top, 0px) + var(--uh) * 10.5); height: calc(var(--uh) * 22);
  display: flex; gap: calc(var(--u) * 1); align-items: flex-start; justify-content: flex-start; overflow: visible; padding: 0; }
#orderStrip .order { position: relative; flex: 0 0 calc(var(--u) * 31); width: calc(var(--u) * 31); min-height: 0; height: 100%; margin: 0; padding: 0; display: block;
  background: none !important; box-shadow: none; border: 0; border-radius: 0; animation: none; filter: none; cursor: pointer; }
#orderStrip .order-pay { position: absolute; z-index: 2; left: calc(var(--u) * 3); top: 0; right: auto; display: flex; align-items: center; gap: 0; height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 1.6) 0 calc(var(--u) * 5);
  background: url('assets/ui/atlas-grilla-7.png') center / 100% 100% no-repeat; border-radius: 0; box-shadow: none; }
#orderStrip .order-pay img { position: absolute; left: calc(var(--u) * -.6); top: 50%; transform: translateY(-55%); width: calc(var(--u) * 5.8); height: calc(var(--u) * 5.8); }
#orderStrip .order-pay b { font-family: var(--font-body); font-weight: 400; font-size: calc(var(--u) * 3.3); color: #f4a04d; }
#orderStrip .order-who { position: absolute; left: 50%; top: calc(var(--u) * 3); bottom: auto; transform: translateX(-50%); width: calc(var(--u) * 24); height: calc(var(--u) * 25); object-fit: contain; object-position: bottom; filter: drop-shadow(0 calc(var(--u) * .6) 0 rgba(40, 90, 60, .15)); }
#orderStrip .order-items { position: absolute; left: 50%; top: calc(var(--u) * 30); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .6); min-width: calc(var(--u) * 16); height: calc(var(--u) * 10.6); padding: 0 calc(var(--u) * 2);
  background: url('assets/ui/atlas-grilla-4.png') center / 100% 100% no-repeat; }
#orderStrip .order.ready .order-items { background-image: url('assets/ui/atlas-grilla-13.png'); }
#orderStrip .order-items figure { position: relative; margin: 0; width: calc(var(--u) * 8); height: calc(var(--u) * 8); background: none; box-shadow: none; border-radius: 0; }
#orderStrip .order-items figure > img:first-child { width: 100%; height: 100%; object-fit: contain; }
#orderStrip .order-items figure .chk { position: absolute; right: calc(var(--u) * -1.2); bottom: calc(var(--u) * -.8); width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
#orderStrip .order-go { position: absolute; z-index: 3; left: calc(var(--u) * 2); top: calc(var(--u) * 24.5); right: auto; bottom: auto; width: calc(var(--u) * 13); animation: none; }
#orderStrip .order.main .order-who { width: calc(var(--u) * 20); height: calc(var(--u) * 21); top: calc(var(--u) * 5); }
#orderStrip .order-gold { position: absolute; left: 50%; top: calc(var(--u) * 27); transform: translateX(-50%); width: calc(var(--u) * 13); height: calc(var(--u) * 13); display: grid; place-items: center; }
#orderStrip .order-gold img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#orderStrip .order-gold b { position: relative; font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 4.6); color: #d15a09; margin-top: calc(var(--u) * 1); }
#orderStrip .order-gold .chk { position: absolute; right: calc(var(--u) * -2); bottom: calc(var(--u) * -.4); width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); }
#orderStrip .order.main .order-go { top: calc(var(--u) * 21); left: calc(var(--u) * 6); }
#orderStrip .main-go, #orderStrip .main-ic { display: none; }

.bag-row { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + var(--uh) * 80); height: calc(var(--u) * 16); gap: calc(var(--u) * 5); }
.bags { gap: calc(var(--u) * 5); }
.bag { width: calc(var(--u) * 14.5); height: calc(var(--u) * 14.5); } /* 1.3: un pelín más grandes */
.bag-uses { display: none; }
.bag.empty .bag-uses { display: block; font-family: var(--font-body); font-size: calc(var(--u) * 3.1); background: #fff; color: #8a6c6c; }
.bag.empty .bag-img { filter: grayscale(.2) brightness(1.05) opacity(.75); }
.bag.sel::before { inset: -18%; }
.basket { width: calc(var(--u) * 14.5); height: calc(var(--u) * 14.5); background: none; box-shadow: none; border-radius: 0; }
.basket > img { width: 100%; height: 100%; }
.grid-foot { left: calc(var(--u) * 2); right: calc(var(--u) * 2); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--uh) * 2.4); height: calc(var(--u) * 19); gap: calc(var(--u) * 1.6); }
.grid-foot .foot-cog { flex: 0 0 auto; width: calc(var(--u) * 10.5); height: calc(var(--u) * 10.5); border: 0; padding: 0; background: none; cursor: pointer; }
.grid-foot .foot-cog img { width: 100%; height: 100%; object-fit: contain; }
.grid-info { position: relative; height: calc(var(--u) * 19); padding: calc(var(--u) * 1.4) calc(var(--u) * 2) calc(var(--u) * 1.4) calc(var(--u) * 2.6); border-radius: 0; gap: calc(var(--u) * 1.8);
  background: url('assets/ui/atlas-grilla-46.png') center / 100% 100% no-repeat; }
.grid-info::before { content: ''; position: absolute; left: calc(var(--u) * -1.6); top: calc(var(--u) * -2); width: calc(var(--u) * 6); height: calc(var(--u) * 6); background: url('assets/ui/atlas-grilla-29.png') center / contain no-repeat; }
.gi-ic { position: relative; width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.gi-ic.info { display: none; }
.gi-lvl { position: absolute; left: 50%; bottom: calc(var(--u) * -3.8); transform: translateX(-50%); padding: 0 calc(var(--u) * 1.4); border-radius: calc(var(--u) * .8); background: #a98e86; font-style: normal; font-family: var(--font-body); font-size: calc(var(--u) * 2.9); line-height: 1.5; color: #fff; white-space: nowrap; }
.gi-tx { padding-left: calc(var(--u) * 1.8); border-left: calc(var(--u) * .35) dashed #e9d6d0; }
.gi-tx b { font-family: var(--font-hand); font-size: calc(var(--u) * 4); color: #d87ea6; }
.gi-tx b small { font-family: var(--font-body); font-size: .7em; color: #b9a19c; }
.gi-tx p { font-size: calc(var(--u) * 3.3); color: #a58e88; }
.gi-act { position: relative; flex: 0 0 auto; width: calc(var(--u) * 11); height: calc(var(--u) * 11); border: 0; padding: 0; background: none; cursor: pointer; }
.gi-act img { width: 100%; height: 100%; object-fit: contain; }
.gi-act small { position: absolute; right: calc(var(--u) * -1.4); bottom: calc(var(--u) * -2.6); font-family: var(--font-body); font-size: calc(var(--u) * 3.1); color: #8a6c6c; white-space: nowrap; }
.gi-act.trash.armed small { right: 50%; transform: translateX(50%); bottom: calc(var(--u) * -3.6); color: #c2415c; font-size: calc(var(--u) * 2.9); }
.gi-rc { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8); }
.gi-rc span { padding: 0 calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1); background: #ef8db0; color: #fff; font-family: var(--font-body); font-size: calc(var(--u) * 3.1); white-space: nowrap; }
.gi-rc .pill-btn { height: calc(var(--u) * 8); border-radius: calc(var(--u) * 2); }
.door-btn { width: calc(var(--u) * 11); height: calc(var(--u) * 14); }
#orderStrip .order-go { width: calc(var(--u) * 13); height: calc(var(--u) * 9); display: grid; place-items: center; background: url('assets/ui/go-boton.png') center / 100% 100% no-repeat;
  font-family: var(--font-display); font-size: calc(var(--u) * 4.6); color: #fff; -webkit-text-stroke: calc(var(--u) * .5) #3f8f4c; paint-order: stroke fill; animation: bob 1.2s ease-in-out infinite; }
#grid .zone-lv { width: calc(var(--u) * 10.4); height: calc(var(--u) * 10.4); font-size: calc(var(--u) * 5.4); }

/* ---- tienda (PopUpTienda / mockup tienda_1) */
.shop-pop.modal-box { max-width: calc(var(--u) * 76); padding: calc(var(--u) * 9) calc(var(--u) * 5) calc(var(--u) * 5); }
.shop-pop .modal-body { max-height: calc(var(--uh) * 62); }
.shop-sec { display: flex; align-items: center; gap: calc(var(--u) * 2); margin: calc(var(--u) * 1) 0 calc(var(--u) * 2); }
.shop-sec b { font-family: var(--font-hand); font-weight: 400; font-size: calc(var(--u) * 4); color: #d76fa6; }
.shop-sec i { flex: 1; height: calc(var(--u) * 1.2); background: url('assets/ui/atlas-popup-14.png') center / 100% 100% no-repeat; }
.shop-sec small { font-family: var(--font-hand); font-size: calc(var(--u) * 3.6); color: #d76fa6; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.4) calc(var(--u) * 2); margin-bottom: calc(var(--u) * 4); }
.shop-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 2) calc(var(--u) * 1) calc(var(--u) * 1.6); background: url('assets/ui/atlas-popup-28.png') center / 100% 100% no-repeat; }
.shop-card .shop-art { width: calc(var(--u) * 11); height: calc(var(--u) * 11); object-fit: contain; }
.shop-card small { margin: calc(var(--u) * .6) 0; font-size: calc(var(--u) * 3.1); color: #a58e88; }
.shop-tag { position: absolute; top: calc(var(--u) * -2.4); left: 50%; transform: translateX(-50%); min-width: calc(var(--u) * 6); padding: 0 calc(var(--u) * 1.2); border-radius: calc(var(--u) * .8); background: #b9a39c; color: #fff; font-family: var(--font-body); font-size: calc(var(--u) * 3.3); }
.shop-buy { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1); width: 92%; height: calc(var(--u) * 6.4); border: 0; border-radius: calc(var(--u) * 1.4); padding: 0; cursor: pointer;
  background: #8ed36b; box-shadow: inset 0 calc(var(--u) * -.6) 0 #5cae4a; font-family: var(--font-display); font-size: calc(var(--u) * 4); color: #fff; }
.shop-buy img { height: 80%; }
.shop-buy.gem { justify-content: flex-start; padding-left: calc(var(--u) * .6); }
.shop-buy.gem b { flex: 1; font-weight: 400; }
.shop-buy.free { font-family: var(--font-hand); }
.shop-buy.ad { background: #34b6ea; box-shadow: inset 0 calc(var(--u) * -.6) 0 #1b86c4; }
.shop-buy.ad b { font-weight: 400; }
.shop-buy:disabled { filter: grayscale(1); opacity: .55; cursor: default; }
.buy-pop .cel-art { height: calc(var(--u) * 46); }
.buy-pop .cel-who { height: calc(var(--u) * 24); margin-bottom: calc(var(--u) * 10); }
.buy-pop .cel-leaves { position: absolute; inset: calc(var(--u) * 6) calc(var(--u) * 16) calc(var(--u) * 6);
  background: url('assets/ui/atlas-popup-21.png') 0% 30% / calc(var(--u) * 12) auto no-repeat, url('assets/ui/atlas-popup-22.png') 100% 30% / calc(var(--u) * 11) auto no-repeat, url('assets/ui/atlas-popup-20.png') 50% 0% / calc(var(--u) * 11) auto no-repeat; }
.buy-pop .cel-deco { background: #e8dcf0; }
.shop-buy:focus, .variant:focus, .modal-box button:focus { outline: none; }
.energy-pop .me-rate { display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 3); margin: 0 0 calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: #fbf2d6; box-shadow: inset 0 0 0 calc(var(--u) * .5) #f2e0b0; }
.energy-pop .me-rate img { width: calc(var(--u) * 34); }
.energy-pop .me-rate p { margin: calc(var(--u) * 1) 0 0; color: #a58b7b; font-size: calc(var(--u) * 3.5); }
.shop-grid.two { grid-template-columns: repeat(2, 1fr); padding: 0 calc(var(--u) * 6); margin-bottom: 0; }
.settings.modal-box { padding-top: calc(var(--u) * 11); }
.hud .res b[data-len="4"], .hud .res b[data-len="5"] { font-size: calc(var(--u) * 3.3); }
.hud .res.star-badge b[data-len="3"] { font-size: calc(var(--u) * 4.2); }
.hud .res.star-badge b[data-len="4"], .hud .res.star-badge b[data-len="5"] { font-size: calc(var(--u) * 3.3); }

/* ================================================================ 0.3.3
   Ajustes tras la revisión de Nico. */
/* Tipografías del reskin: títulos, cintas y botones en Delius Unicase Bold
   (TMP «DeliusUnicase-Bold SDF»); textos en Capriola; cifras en Fredoka One. */
.modal-title, .modal-box h2, .modal-box .btn, .talk-card b, .tuto-text > b, .rew-title, .cel-ribbon, .cel-name, .shop-sec b, .shop-sec small,
.gi-tx b, .variant-pop h2, .shop-buy.free, .gi-rc span, .mp-need { font-weight: 700; }
.tuto-text p b, .talk-card p b { color: #e58a17; font-family: var(--font-body); font-weight: 400; }
/* texto de los botones centrado en la parte clara del sprite (el borde de abajo es sombra) */
.modal-box .btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding-bottom: calc(var(--u) * 1.2); letter-spacing: .02em; }
.modal-title { line-height: 1; display: flex !important; align-items: center; justify-content: center; padding-bottom: calc(var(--u) * .6); }
/* mano del tutorial (manito del reskin, HandTap.anim: 20°, dos toques a 0,75 y pausa; ciclo 1,92 s) */
.tuto-hand { width: calc(var(--u) * 19.5); height: calc(var(--u) * 19.5); margin: calc(var(--u) * -1.9) 0 0 calc(var(--u) * -8.2); filter: drop-shadow(0 calc(var(--u) * .5) calc(var(--u) * .4) rgba(120, 40, 70, .25)); }
.tuto-hand img { transform-origin: 42% 10%; transform: rotate(-20deg); }
.tuto-hand.tap img { animation: handTap2 1.9167s ease-in-out infinite; transform-origin: 42% 10%; }
@keyframes handTap2 {
  0% { transform: rotate(-20deg) scale(1); }
  11.3% { transform: rotate(-20deg) scale(.75); }
  22.6% { transform: rotate(-20deg) scale(1); }
  26.1% { transform: rotate(-20deg) scale(1); }
  35.7% { transform: rotate(-20deg) scale(.75); }
  48.7%, 100% { transform: rotate(-20deg) scale(1); }
}
/* Taller sin encimarse en ninguna proporción: el tablero arranca bajo los
   pedidos y su casilla se achica si no caben bolsas y panel debajo. Los
   objetos van por encima de las casillas vecinas y de las zonas de pasto. */
#grid { --gtop: max(calc(env(safe-area-inset-top, 0px) + var(--u) * 63), calc(var(--uh) * 34)); --ggap: calc(var(--u) * .45);
  --gcell: max(calc(var(--u) * 8), min(calc(var(--u) * 13.7), calc((var(--uh) * 100 - var(--gtop) - var(--u) * 40 - env(safe-area-inset-bottom, 0px)) / 7.2))); }
#grid .grid-stage { top: var(--gtop); }
#grid .grid-board { --cell: var(--gcell); --gap: var(--ggap); }
#grid .bag-row { top: calc(var(--gtop) + var(--gcell) * 7 + var(--ggap) * 6 + var(--u) * 1.5); }
#orderStrip.order-strip { top: max(calc(env(safe-area-inset-top, 0px) + var(--u) * 18), calc(var(--uh) * 10.5)); }
#grid .tile { z-index: 3; }
#grid .tile.picked { z-index: 40; }   /* 1.8.7: por encima de la fila de sacos (z 32) al arrastrar */
#grid .zone { z-index: 2; }
/* par sugerido para fusionar: se acercan y vuelven (0,6 s ida, 0,8 s vuelta) */
#grid .tile.recommend img { animation: recommendMove 1.4s ease-in-out infinite; }
@keyframes recommendMove {
  0%, 100% { transform: translate(0, 0); }
  43% { transform: translate(calc(var(--u) * var(--rx, 0)), calc(var(--u) * var(--ry, 0))); }
}
/* lo que pide un pedido lleva el visto turquesa (Ticket, atlas-grilla_20) */
#grid .cell.target { box-shadow: none; }
#grid .cell.target .tile::after { content: ''; position: absolute; right: -6%; bottom: -6%; width: 42%; height: 42%; background: url('assets/ui/atlas-grilla-20.png') center / contain no-repeat; pointer-events: none; }
/* tablero lleno: aviso corto, no ventana */
.note-float.board-full { font-size: calc(var(--u) * 3.5); padding: calc(var(--u) * .6) calc(var(--u) * 2.4); }
/* estallido grande al abrir huevos */
.spark.big { animation: spark-big 850ms cubic-bezier(.15, .7, .35, 1) forwards; box-shadow: 0 0 calc(var(--u) * 1.2) rgba(255, 255, 255, .9); }
.spark.big.star { border-radius: 0; box-shadow: none; object-fit: contain; }
@keyframes spark-big {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.4) rotate(0); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(120deg); }
}
.burst-ring { position: absolute; width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; transform: translate(-50%, -50%) scale(.2);
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 30%, rgba(207, 239, 255, .6) 45%, rgba(207, 239, 255, 0) 70%); animation: ring-out 650ms ease-out forwards; pointer-events: none; }
@keyframes ring-out { to { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } }
/* misión: la barra de etapas queda bajo la cinta, visible */
.mission-pop.modal-box { padding-top: calc(var(--u) * 11); }
.mission-pop .mp-prog { margin: calc(var(--u) * 1) 0 calc(var(--u) * 2); }
.mission-pop .mp-home { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
/* celebraciones: sin scroll, sin fondo blanco, medidas que caben por alto;
   las ramitas van detrás de hojas y estrellas, y éstas detrás del personaje */
.modal-box.celebrate { --u: var(--cu); }
.modal-box.celebrate, .celebrate .modal-body { background: none !important; box-shadow: none; }
.celebrate .modal-body { max-height: none; overflow: visible; }
.celebrate .cel-deco { z-index: 0; background: #ebe2f3; opacity: .75; }
.newcute-pop .cel-deco, .pop-pop .cel-deco { background: #e1ebcf; }
.info-pop .cel-deco, .newlevel-pop .cel-deco { background: #f6dbe2; }
.celebrate .cel-art::before { z-index: 1; }
.celebrate .cel-leaves { z-index: 1; }
.celebrate .cel-who, .celebrate .cel-lvl, .celebrate .info-img { z-index: 2; position: relative; }
.celebrate .cel-ribbon { z-index: 3; }
/* pinceles centrados: el pincel y su pintura giran juntos */
.variant-pop .variant.brush { display: grid; place-items: center; }
.variant-pop .brush-ic { position: relative; width: 62%; height: 80%; transform: rotate(-35deg); }
.variant-pop .variant.brush .brush-ic img { width: 100%; height: 100%; object-fit: contain; transform: none; }
.variant-pop .brush-ic .paint { left: 4%; top: -6%; width: 92%; height: 42%; transform: none; }
/* pestaña «i» del cuteling (atlas-hub_11), pegada al borde derecho */
.cute-info { position: absolute; z-index: 36; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--uh) * 28); width: calc(var(--u) * 13); height: calc(var(--u) * 9.6); border: 0; padding: 0; background: none; cursor: pointer; }
.cute-info img { width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.cute-info.pop { animation: infoIn .35s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes infoIn { from { transform: translateX(100%); } }
#cuteCard { left: auto; right: calc(var(--u) * 3); width: calc(var(--u) * 70); bottom: auto; top: calc(env(safe-area-inset-top, 0px) + var(--uh) * 28 + var(--u) * 11); }
body.cine .cute-info { opacity: 0; pointer-events: none; }
#orderStrip.order-strip { overflow-x: auto; overflow-y: visible; scrollbar-width: none; padding-top: calc(var(--u) * .5); height: calc(var(--u) * 44); }
#orderStrip.order-strip::-webkit-scrollbar { display: none; }
#grid { --u: var(--cu); }
.modal-box .btn.btn-danger { background-image: url('assets/cq/btn-rosa.png'); text-shadow: 0 calc(var(--u) * .35) 0 #b8456a, 0 0 calc(var(--u) * .5) #b8456a; }
.modal-box .btn.btn-soft { background-image: url('assets/ui/atlas-popup-51.png'); text-shadow: 0 calc(var(--u) * .35) 0 #8b7363, 0 0 calc(var(--u) * .5) #8b7363; }
.wipe-pop .wipe-step { font-family: var(--font-display); color: #d76fa6 !important; }
.wipe-pop .modal-actions { gap: calc(var(--u) * 2.4); }
.modal-title.long { font-size: calc(var(--u) * 4.2); }
.modal-title.xlong { font-size: calc(var(--u) * 3.6); }
/* escritorio: a los lados del teléfono, el fondo de la portada difuminado */
body { background: #9fd3d9 url('assets/cq/carga.png') center / cover no-repeat; }
body::before { content: ''; position: fixed; inset: 0; backdrop-filter: blur(18px) brightness(1.05); background: rgba(255, 244, 243, .35); }
#app { box-shadow: 0 0 40px rgba(60, 40, 80, .25); }
/* nido: mientras se genera un huevo, un cronómetro chico arriba a la izquierda (como en el video) */
.cq-dock .nest-time { left: calc(var(--u) * 1); top: calc(var(--u) * -1); transform: none; width: calc(var(--u) * 6); height: calc(var(--u) * 6.4); padding: 0; font-size: 0; color: transparent;
  background: url('assets/ui/atlas-cronometro-2.png') 50% 30% / 26% auto no-repeat, url('assets/ui/atlas-cronometro-0.png') center / contain no-repeat; border-radius: 0; box-shadow: none; }
.cq-dock .nest-time:not(.on) { display: none; }
.celebrate .cel-ribbon.long { font-size: calc(var(--u) * 3.9); }
.celebrate .cel-ribbon.xlong { font-size: calc(var(--u) * 3.4); width: calc(var(--u) * 72); }

/* 0.3.5 · recarga «Full / Partial» del panel (GridManager rechargeGemButton / rechargeAddButton) */
.gi-rc .rc-row { display: flex; gap: calc(var(--u) * 1); }
.gi-rc .pill-btn { flex-direction: column; justify-content: center; gap: 0; height: calc(var(--u) * 10); min-width: calc(var(--u) * 13); padding: 0 calc(var(--u) * 1.6); line-height: 1; font-family: var(--font-display); color: #fff; }
.gi-rc .pill-btn img { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
.gi-rc .pill-btn small { font-family: var(--font-body); font-size: calc(var(--u) * 2.9); opacity: .95; }
.gi-rc .pill-btn.gem { flex-direction: column; background: #8fe07e; box-shadow: inset 0 calc(var(--u) * -.8) 0 #4fb24a, 0 calc(var(--u) * .5) 0 rgba(60, 140, 60, .4); }
.gi-rc .pill-btn.gem[disabled] { filter: grayscale(.8); opacity: .7; }
.gi-rc .pill-btn.ad { background: #34b6ea; box-shadow: inset 0 calc(var(--u) * -.8) 0 #1b86c4, 0 calc(var(--u) * .5) 0 rgba(30, 110, 170, .35); }
/* ventanas de energía y corazones */
.shop-grid.one { grid-template-columns: minmax(0, calc(var(--u) * 30)); justify-content: center; margin-bottom: 0; }
.energy-pop .shop-card { position: relative; }
.pay-welcome { margin: calc(var(--u) * -2) 0 calc(var(--u) * 3); text-align: center; font-family: var(--font-hand); color: #d9688f; font-size: calc(var(--u) * 4); }
.pay-hand { position: absolute; right: calc(var(--u) * -4); bottom: calc(var(--u) * -6); width: calc(var(--u) * 15); height: calc(var(--u) * 15); pointer-events: none; }
.pay-hand img { width: 100%; height: 100%; object-fit: contain; transform: rotate(-20deg); transform-origin: 42% 10%; animation: handTap2 1.9167s ease-in-out infinite; }
.pay-info { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 8) 0 calc(var(--u) * 4); }
.pay-info img { width: calc(var(--u) * 14); height: calc(var(--u) * 14); object-fit: contain; }
.pay-info i { font-style: normal; font-size: calc(var(--u) * 8); color: #e7a5bd; }
.pay-info-tx { text-align: center; color: #a58b7b; font-size: calc(var(--u) * 3.8); margin: 0 calc(var(--u) * 4) calc(var(--u) * 4); }
.pay-info-tx b { color: #d64f8a; }
/* 0.3.5: la fila de botones no hereda la píldora rosa del título, y el nombre de la bolsa vacía se ajusta en dos líneas */
.gi-rc .rc-row { padding: 0; background: none; border-radius: 0; }
.gi-rc ~ .gi-tx b, .gi-tx:has(+ .gi-rc) b { white-space: normal; font-size: calc(var(--u) * 3.4); line-height: 1.05; }
/* 0.3.6: la bolsa nueva del tutorial entra con un salto y brillo */
.bag.bag-new { animation: bagNew 1.1s cubic-bezier(.3,1.6,.5,1) both; }
.bag.bag-new::after { content: ''; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(255,250,210,.9), rgba(255,240,160,0) 65%); animation: bagGlow 2.4s ease-out both; pointer-events: none; z-index: -1; }
@keyframes bagNew { 0% { transform: scale(0) translateY(30%); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes bagGlow { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
/* 0.3.6: foco del tutorial — oscurece suave todo menos lo que se señala */
.tuto-spot { position: absolute; pointer-events: none; border-radius: 22px; box-shadow: 0 0 0 200vmax rgba(58, 24, 44, 0); transition: left .55s cubic-bezier(.3,.8,.3,1), top .55s cubic-bezier(.3,.8,.3,1), width .55s cubic-bezier(.3,.8,.3,1), height .55s cubic-bezier(.3,.8,.3,1), box-shadow .6s ease, border-radius .4s ease; }
.tuto-spot.on { box-shadow: 0 0 0 200vmax rgba(48, 18, 36, .5), 0 0 18px 6px rgba(255, 250, 220, .55) inset; }
.tuto-spot[hidden] { display: none; }
.tuto-hand.in { animation: handIn .5s ease-out both; }
@keyframes handIn { from { opacity: 0; } to { opacity: 1; } }
.tuto-layer.dim { transition: background .4s ease; }
.tuto-card { animation: cardIn .35s ease-out both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* 0.3.6: píldoras del HUD en 9 cortes: las puntas redondas no se deforman con ningún ancho de pantalla */
.hud .res:not(.star-badge) { background: none !important; border-style: solid; border-width: 0; border-image: url('assets/ui/atlas-hub-1.png') 31 31 31 31 fill / calc(var(--u) * 2.9) / 0 stretch; flex: 0 1 calc(var(--u) * 14.4); }
.hud .res.pill-h { border-image-source: url('assets/ui/atlas-hub-3.png'); }
.hud .res.pill-g { border-image-source: url('assets/ui/atlas-hub-2.png'); }
.hud .res:not(.star-badge) img { width: calc(var(--u) * 5.6); height: calc(var(--u) * 6.2); left: calc(var(--u) * -1.8); }
.hud .res.pill-g img { width: calc(var(--u) * 4.4); left: calc(var(--u) * -1.2); }
.hud-res { justify-content: flex-start; gap: calc(var(--u) * 3.2); }
.shop-grid.three { grid-template-columns: repeat(3, 1fr); padding: 0 calc(var(--u) * 2); margin-bottom: 0; }
.shop-buy.free.wait { font-family: var(--font-body); font-size: calc(var(--u) * 3.5); opacity: .75; }
.gi-rc .pill-btn.free { background: #6fcb73; box-shadow: 0 calc(var(--u) * .6) 0 #47a24f; }
/* 0.3.6: cronómetro del nido con la manecilla centrada en la esfera y girando; el nido sube un poco */
.cq-dock .nest-time { background: none !important; width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.6); top: calc(var(--u) * -1.6); left: calc(var(--u) * .6); }
.cq-dock .nest-time .nc-dial { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.cq-dock .nest-time .nc-hand { position: absolute; left: 46.2%; top: 28.6%; width: 21.3%; height: 38.3%; transform-origin: 49.5% 76.6%; }
.cq-dock .dock-nest { position: relative; top: calc(var(--u) * -3.4); }
/* 0.3.6: Ajustes rediseñados */
.settings.modal-box { padding: calc(var(--u) * 10) calc(var(--u) * 4.4) calc(var(--u) * 4.4); overflow: visible; max-height: none; }
.settings .modal-body { scrollbar-width: none; }
.settings .modal-body::-webkit-scrollbar { display: none; }
.st-card { background: #fffaf6; border-radius: calc(var(--u) * 3); box-shadow: inset 0 0 0 calc(var(--u) * .35) #f1dfd9; padding: calc(var(--u) * 3) calc(var(--u) * 3.4); margin-bottom: calc(var(--u) * 3); text-align: left; }
.st-prog { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-body); color: #8e6b6b; font-size: calc(var(--u) * 3.3); }
.st-prog b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 4.6); color: #d87ea6; }
.st-bar { margin: calc(var(--u) * 1.4) 0 calc(var(--u) * 2.8); height: calc(var(--u) * 2.6); }
.st-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.6); }
.st-tile { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .4); padding: calc(var(--u) * 1.6) calc(var(--u) * .4) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 2.2); background: #fdf1ec; min-width: 0; }
.st-tile img { width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); object-fit: contain; }
.st-tile b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 3.8); color: #7d4c5c; line-height: 1; white-space: nowrap; }
.st-tile b i { font-style: normal; font-size: .62em; color: #b9a19c; }
.st-tile small { font-size: calc(var(--u) * 3.1); color: #a58e88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-list { padding-top: calc(var(--u) * .6); padding-bottom: calc(var(--u) * .6); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); min-height: calc(var(--u) * 11); border-bottom: 1px solid rgba(92, 27, 47, .08); font-size: calc(var(--u) * 3.6); color: #5c2a3a; }
.st-row:last-child { border-bottom: 0; }
.st-seg { display: inline-flex; padding: calc(var(--u) * .6); border-radius: 999px; background: rgba(92, 27, 47, .1); }
.st-seg button { border: 0; background: none; border-radius: 999px; padding: calc(var(--u) * 1.3) calc(var(--u) * 2.8); font: inherit; font-size: calc(var(--u) * 3.5); color: #8e6b6b; cursor: pointer; transition: background .2s, color .2s; }
.st-seg button[aria-pressed="true"] { background: #fff; color: #c2507f; box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * .8) rgba(92, 27, 47, .15); font-weight: 700; }
.st-wipe { display: block; margin: calc(var(--u) * 1) auto 0; border: calc(var(--u) * .4) solid #efb7c6; background: #fff; color: #c2415c; border-radius: 999px; padding: calc(var(--u) * 1.6) calc(var(--u) * 5); font-family: var(--font-body); font-weight: 700; font-size: calc(var(--u) * 3.5); cursor: pointer; }
.st-wipe:active { transform: scale(.96); }
.st-foot { margin: calc(var(--u) * 2.4) 0 0; font-size: calc(var(--u) * 3.1); color: #b9a19c; text-align: center; }
/* 0.3.6: panel de info como la referencia — 9 cortes (las esquinas no se estiran), ancho con tope
   y todo lo que cuelga (+N, «¿vender?») dentro del panel */
.grid-foot { justify-content: center; }
.grid-info { flex: 0 1 calc(var(--u) * 64); max-width: calc(var(--u) * 64); background: none !important; border-style: solid; border-width: 0;
  border-image: url('assets/ui/atlas-grilla-46.png') 34 34 34 34 fill / calc(var(--u) * 5.2) / 0 stretch; padding-right: calc(var(--u) * 3.2); }
.gi-act { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.gi-act small { right: calc(var(--u) * -.4); bottom: calc(var(--u) * -1.6); font-size: calc(var(--u) * 3.1); }
.gi-act.trash.armed small { bottom: calc(var(--u) * -2.2); }
.gi-tx { flex: 1 1 auto; min-width: 0; }
.gi-tx p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* 0.3.6: cuteario — los no descubiertos son un «?» (no silueta) */
.cuteario-cell .qmark { display: grid; place-items: center; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: #e7ddd6; color: #fffaf4; font-family: var(--font-display); font-size: calc(var(--u) * 6.4); line-height: 1; box-shadow: inset 0 calc(var(--u) * -.5) 0 rgba(146, 92, 60, .12); }
.cuteario-n { display: none; }
/* 0.3.6: ficha del punto de interés */
.build-pop .bp-lvl { display: inline-block; margin-bottom: calc(var(--u) * 1); padding: calc(var(--u) * .4) calc(var(--u) * 2.4); border-radius: 999px; background: #a98e86; color: #fff; font-family: var(--font-body); font-weight: 700; font-size: calc(var(--u) * 3.3); }
.build-pop .bp-art { display: block; width: calc(var(--u) * 40); height: calc(var(--u) * 36); object-fit: contain; margin: 0 auto calc(var(--u) * 2); filter: drop-shadow(0 calc(var(--u) * .8) calc(var(--u) * .6) rgba(92, 27, 47, .15)); animation: bpIn .45s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes bpIn { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.build-pop .bp-note { margin: calc(var(--u) * 2.4) 0 0; color: #a58e88; font-size: calc(var(--u) * 3.5); }
.build-pop .bp-gift { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); margin: calc(var(--u) * 2) auto 0; padding: calc(var(--u) * 1.4) calc(var(--u) * 3); border-radius: 999px; background: #fdf1ec; color: #8e6b6b; font-size: calc(var(--u) * 3.5); width: fit-content; }
.build-pop .bp-gift img { width: calc(var(--u) * 5); height: calc(var(--u) * 5); object-fit: contain; }
/* 0.3.6: elegir variante abajo, sin tapar el adorno nuevo */
.modal:has(.variant-pop) { place-items: start center; padding-top: calc(var(--uh) * 47); padding-bottom: 0; }   /* 0.4.1: justo bajo el adorno */
.variant-pop.modal-box { margin-top: 0; }
/* 0.3.6: bolsa vacía — el panel se ensancha un poco y el texto deja sitio a los botones (el tiempo ya va bajo la bolsa) */
.grid-info:has(.gi-rc) { flex-basis: calc(var(--u) * 76); max-width: calc(var(--u) * 76); }
.grid-info:has(.gi-rc) .gi-tx p { display: none; }
.grid-info:has(.gi-rc) .gi-tx b { font-size: calc(var(--u) * 3.3); line-height: 1.05; white-space: normal; }

/* =====================================================================
   0.4.0 · juego cerrado: diálogos con el elenco, álbum de pegatinas, final y créditos
   ===================================================================== */
.talk-row.right { flex-direction: row-reverse; }
.talk-row.right .talk-face { margin-right: 0; margin-left: calc(var(--u) * -2.4); }
.talk-row.right .talk-card b { color: #7a68c9; }
.talk-row.spirit .talk-face { filter: drop-shadow(0 0 calc(var(--u) * 3) #fff6b8) drop-shadow(0 0 calc(var(--u) * 1.2) #ffe27a); animation: spiritFloat 2.6s ease-in-out infinite; }
.talk-row.spirit .talk-card { background: #fffbe8; box-shadow: inset 0 0 0 calc(var(--u) * .9) #f5d77a; }
.talk-row.spirit .talk-card b { color: #c99a1b; }
@keyframes spiritFloat { 50% { transform: translateY(calc(var(--u) * -1.4)); } }

/* álbum */
#btnWorld { position: relative; }
.album .alb-head { padding: calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 2); }
.album .alb-isle { display: flex; justify-content: space-between; font-family: var(--font-display); color: #7d4c5c; font-size: calc(var(--u) * 3.8); margin-bottom: calc(var(--u) * 1); }
.album .alb-count { margin: calc(var(--u) * 1.4) 0 0; font-size: calc(var(--u) * 3.3); color: #a58e88; text-align: center; }
.album .alb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.2) calc(var(--u) * 1.6); max-height: calc(var(--vh, 1vh) * 52); overflow-y: auto; padding: calc(var(--u) * 1.6) calc(var(--u) * 1) calc(var(--u) * 2); scrollbar-width: none; }
.album .alb-grid::-webkit-scrollbar { display: none; }
.stk { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * .6); padding: calc(var(--u) * 1.6) calc(var(--u) * .8) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 3); background: repeating-linear-gradient(0deg, #fdf6ef 0 calc(var(--u) * 3.4), #f7e6dc calc(var(--u) * 3.4) calc(var(--u) * 3.6)); min-width: 0; }
.stk-art { width: calc(var(--u) * 15); height: calc(var(--u) * 15); flex: 0 0 auto; display: grid; place-items: center; }
.stk-art img { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: grayscale(1) brightness(1.15) opacity(.28); }
.stk.on .stk-art img, .stk.ready .stk-art img { filter: drop-shadow(calc(var(--u) * .5) 0 0 #fff) drop-shadow(calc(var(--u) * -.5) 0 0 #fff) drop-shadow(0 calc(var(--u) * .5) 0 #fff) drop-shadow(0 calc(var(--u) * -.5) 0 #fff) drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * .5) rgba(125, 76, 92, .3)); }
.stk.on .stk-art { transform: rotate(var(--r, 0deg)); }
.stk.ready .stk-art { animation: stkWiggle 1.6s ease-in-out infinite; }
@keyframes stkWiggle { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.06); } }
.stk b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 3.3); overflow-wrap: normal; word-break: normal; hyphens: none; max-width: 100%; color: #7d4c5c; line-height: 1.1; }
.stk.off b { color: #b9a19c; }
.stk small { font-size: calc(var(--u) * 2.9); color: #a58e88; line-height: 1.2; }
.stk-ok { color: #4fae8e !important; }
.stk-ok a { color: #c2415c; }
.stk-bar { display: block; width: 86%; height: calc(var(--u) * 1.4); border-radius: 999px; background: #efdcd3; overflow: hidden; }
.stk-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb3cf, #f08bb0); border-radius: 999px; }
.stk-rews { display: flex; gap: calc(var(--u) * 1); justify-content: center; }
.stk-rew { display: inline-flex; align-items: center; gap: calc(var(--u) * .3); font-family: var(--font-display); font-size: calc(var(--u) * 3.1); color: #c06a8c; }
.stk-rew img { width: calc(var(--u) * 4); height: calc(var(--u) * 4); object-fit: contain; }
.stk .stk-claim { padding: calc(var(--u) * .8) calc(var(--u) * 3); font-size: calc(var(--u) * 3.5); min-width: 0; }
.st-btns { display: flex; gap: calc(var(--u) * 2); justify-content: center; margin-top: calc(var(--u) * 1); }
.st-btns .st-wipe { margin: 0; }
.st-cred { border: calc(var(--u) * .4) solid #b9d9c9; background: #fff; color: #3f8f6f; border-radius: 999px; padding: calc(var(--u) * 1.6) calc(var(--u) * 5); font-family: var(--font-body); font-weight: 700; font-size: calc(var(--u) * 3.5); cursor: pointer; }

/* final */
.finale-pop .fin-art { position: relative; height: calc(var(--u) * 46); display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--u) * 2); }
.finale-pop .fin-glow { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 70); height: calc(var(--u) * 70); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 184, .95), rgba(255, 220, 240, .5) 45%, transparent 70%); animation: finGlow 3s ease-in-out infinite; }
@keyframes finGlow { 50% { transform: translate(-50%, -50%) scale(1.1); opacity: .85; } }
.finale-pop .fin-spirit { position: relative; height: calc(var(--u) * 40); animation: spiritFloat 2.6s ease-in-out infinite; filter: drop-shadow(0 0 calc(var(--u) * 3) #fff6b8); }
.finale-pop .fin-gabi { position: relative; height: calc(var(--u) * 36); }
.finale-pop .fin-cast { display: flex; justify-content: center; flex-wrap: nowrap; gap: calc(var(--u) * .2); margin: calc(var(--u) * 1) 0 0; }
.finale-pop .fin-cast img { width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); min-width: 0; flex: 0 1 auto; object-fit: contain; animation: castHop 1.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes castHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(calc(var(--u) * -1.6)); } }
.finale-pop .fin-tiles { margin: 0 calc(var(--u) * 1) calc(var(--u) * 1); }
.finale-pop .modal-actions { gap: calc(var(--u) * 2); }
.no-motion .finale-pop .fin-cast img, .no-motion .finale-pop .fin-spirit, .no-motion .finale-pop .fin-glow, .no-motion .stk.ready .stk-art { animation: none; }
.confetti { position: absolute; top: -4%; width: calc(var(--u) * 1.8); height: calc(var(--u) * 2.8); border-radius: calc(var(--u) * .5); pointer-events: none; z-index: 90; animation: confFall 3s cubic-bezier(.3, .4, .6, 1) forwards; }
@keyframes confFall { to { transform: translate(var(--dx, 0), 110vh) rotate(var(--rot, 360deg)); opacity: .9; } }

/* créditos */
.credits-pop { text-align: center; }
.credits-pop .cred-logo { width: calc(var(--u) * 52); display: block; margin: calc(var(--u) * 1) auto; }
.credits-pop .cred-big { font-family: var(--font-display); font-size: calc(var(--u) * 4.6); color: #7d4c5c; margin: calc(var(--u) * 1) 0 0; }
.credits-pop .cred-place { margin: 0 0 calc(var(--u) * 2); color: #a58e88; }
.credits-pop .cred-cast { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * .6); margin: calc(var(--u) * 2) 0; }
.credits-pop .cred-cast img { width: calc(var(--u) * 9.6); height: calc(var(--u) * 9.6); object-fit: contain; }
.credits-pop .cred-thanks { font-family: var(--font-hand); font-size: calc(var(--u) * 5); color: #d25b93; margin: calc(var(--u) * 1) 0; }

/* ---------- 0.4.1 ---------- */
/* «Toca para continuar» con la Delius gruesa y espacio para su vaivén */
.tuto-text small, .talk-tap { font-family: var(--font-hand); font-weight: 700; }
.tuto-text { padding-bottom: calc(var(--u) * 4.2); }
.tuto-text small { margin-top: calc(var(--u) * 1.8); font-size: calc(var(--u) * 3.3); }
.tuto-text > b { margin-bottom: calc(var(--u) * 1.6); }
.talk-tap { font-size: calc(var(--u) * 3.8); color: #d878aa; }
/* vecino nuevo: cinta, tarjeta y botón */
.talk-layer.talk-btn { justify-content: center; padding-top: 0; align-items: center; background: rgba(255, 240, 246, .55); }
.talk-layer.talk-btn .talk-stack { width: 100%; padding-right: calc(var(--u) * 3); box-sizing: border-box; }
.talk-rib { align-self: center; width: calc(var(--u) * 56); height: calc(var(--u) * 11); margin: 0 0 calc(var(--u) * 4); padding: 0 calc(var(--u) * 6); box-sizing: border-box; text-align: center;
  background: url('assets/ui/atlas-popup-89.png') center / 100% 100% no-repeat; font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 4.6); line-height: calc(var(--u) * 10.4); color: #fff; white-space: nowrap; animation: rowIn .35s cubic-bezier(.3, 1.4, .5, 1); }
.talk-go.btn { margin-top: calc(var(--u) * 6); min-width: calc(var(--u) * 44); height: calc(var(--u) * 10.6); padding: 0 calc(var(--u) * 6) calc(var(--u) * 1.2); border-radius: 0; box-shadow: none; -webkit-text-stroke: 0;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  background: url('assets/ui/atlas-popup-121.png') center / 100% 100% no-repeat; font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 5.2); color: #fff; text-shadow: 0 calc(var(--u) * .35) 0 #3d9e4b, 0 0 calc(var(--u) * .5) #3d9e4b; transition: opacity .3s, filter .3s; }
.talk-go[disabled] { opacity: .5; filter: grayscale(.4); }
/* ventanas: sin barra del navegador; se ajustan (ui.fitModal) y, si hace falta, barra del juego */
.modal-body { overflow-y: hidden; }
.modal-body.scroll { overflow-y: auto; }
.modal-body, .cuteario-grid, .album .alb-grid { scrollbar-width: thin; scrollbar-color: #f2a2c4 transparent; }
.modal-body::-webkit-scrollbar, .cuteario-grid::-webkit-scrollbar, .album .alb-grid::-webkit-scrollbar { display: block; width: calc(var(--u) * 1.4); }
.modal-body::-webkit-scrollbar-track, .cuteario-grid::-webkit-scrollbar-track, .album .alb-grid::-webkit-scrollbar-track { background: rgba(246, 200, 218, .35); border-radius: 999px; margin: calc(var(--u) * 2) 0; }
.modal-body::-webkit-scrollbar-thumb, .cuteario-grid::-webkit-scrollbar-thumb, .album .alb-grid::-webkit-scrollbar-thumb { background: linear-gradient(#f7b6d1, #ee8fb6); border-radius: 999px; border: calc(var(--u) * .25) solid #fff4f8; }
.modal-body::-webkit-scrollbar-button, .cuteario-grid::-webkit-scrollbar-button, .album .alb-grid::-webkit-scrollbar-button { display: none; height: 0; }
.garden .cuteario-grid { max-height: none; overflow: visible; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 1); padding-right: calc(var(--u) * .6); }
/* álbum 0.4.1: resumen de premios y páginas */
.album .alb-sum { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: calc(var(--u) * 1.4); margin-bottom: calc(var(--u) * 2.2); }
.album .alb-sum > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .4); padding: calc(var(--u) * 1.2) calc(var(--u) * .8); border-radius: calc(var(--u) * 2.6); background: #fff7f3; box-shadow: inset 0 0 0 calc(var(--u) * .45) #f4d6d6; }
.album .alb-sum .alb-pot { background: linear-gradient(#fff2f8, #ffe3ef); box-shadow: inset 0 0 0 calc(var(--u) * .5) #f6b4cf; }
.album .alb-sum small { font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 3.3); color: #c07b97; line-height: 1; }
.album .alb-sum span { display: inline-flex; align-items: center; gap: calc(var(--u) * .5); }
.album .alb-sum b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 4.6); color: #7d4c5c; line-height: 1; }
.album .alb-sum b i { font-style: normal; font-size: calc(var(--u) * 3.5); color: #b49a97; }
.album .alb-sum img { width: calc(var(--u) * 5); height: calc(var(--u) * 5); object-fit: contain; }
.album .alb-pot b { color: #d2457e; }
.album .alb-tabs { display: flex; gap: calc(var(--u) * 1); }
.album .alb-tab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .2); padding: calc(var(--u) * 1) 0 calc(var(--u) * .8); border: 0; border-radius: calc(var(--u) * 2.4) calc(var(--u) * 2.4) calc(var(--u) * 1) calc(var(--u) * 1); background: #f6e7e3; font: inherit; cursor: pointer; transition: transform .15s; }
.album .alb-tab img { width: calc(var(--u) * 7); height: calc(var(--u) * 7); object-fit: contain; filter: saturate(.6) opacity(.75); }
.album .alb-tab span { font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 2.9); color: #b48d93; line-height: 1.05; white-space: nowrap; }
.album .alb-tab small { font-size: calc(var(--u) * 2.9); color: #b8a2a0; line-height: 1; }
.album .alb-tab.on { background: #ffd9e8; transform: translateY(calc(var(--u) * -.6)); box-shadow: 0 calc(var(--u) * .6) 0 #f3b3cd; }
.album .alb-tab.on img { filter: none; }
.album .alb-tab.on span { color: #d2457e; }
.album .alb-dot { position: absolute; top: calc(var(--u) * -1.2); right: calc(var(--u) * -.4); min-width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); padding: 0 calc(var(--u) * .8); box-sizing: border-box; border-radius: 999px; background: #ef5f8f; color: #fff; font-style: normal; font-family: var(--font-display); font-size: calc(var(--u) * 3.1); line-height: calc(var(--u) * 4.4); box-shadow: 0 0 0 calc(var(--u) * .5) #fff; animation: stkWiggle 1.6s ease-in-out infinite; }
.album .alb-grid { border-top: calc(var(--u) * .5) solid #ffd9e8; border-radius: calc(var(--u) * 1); background: rgba(255, 247, 250, .6); max-height: calc(var(--uh) * 46); }
.album .stk .stk-claim { white-space: nowrap; font-size: calc(var(--u) * 3.3); padding: 0 calc(var(--u) * 2.4) calc(var(--u) * .9); min-width: calc(var(--u) * 17); height: calc(var(--u) * 7.4); }
/* ---------- 1.0 ---------- */
.credits-pop .cred-roles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .6) calc(var(--u) * 2); margin: calc(var(--u) * 2) 0; text-align: left; }
.credits-pop .cred-roles dt { font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 3.5); color: #d25b93; text-align: right; }
.credits-pop .cred-roles dd { margin: 0; font-size: calc(var(--u) * 3.5); color: #7d4c5c; }
.cheat-btn { position: absolute; z-index: 95; left: calc(var(--u) * 2); top: calc(var(--u) * 34 + env(safe-area-inset-top, 0px)); width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; border: calc(var(--u) * .5) solid #fff; background: rgba(214, 40, 90, .85); color: #fff; font-family: var(--font-display); font-size: calc(var(--u) * 4.6); box-shadow: 0 calc(var(--u) * .5) 0 rgba(0, 0, 0, .25); cursor: pointer; }
/* barras de volumen (de Cuteland) con la estética del juego */
.st-vol input[type=range] { -webkit-appearance: none; appearance: none; width: 52%; height: calc(var(--u) * 2.6); border-radius: 999px; background: linear-gradient(90deg, #ef8fb6 var(--p, 50%), #f3dfe2 var(--p, 50%)); box-shadow: inset 0 0 0 calc(var(--u) * .3) rgba(214, 120, 150, .25); outline: none; margin: 0; }
.st-vol input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #fff; border: calc(var(--u) * .7) solid #ef8fb6; box-shadow: 0 calc(var(--u) * .4) 0 rgba(187, 90, 116, .25); cursor: pointer; }
.st-vol input[type=range]::-moz-range-thumb { width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: #fff; border: calc(var(--u) * .7) solid #ef8fb6; cursor: pointer; }
/* sugerencia de fusión (de Cuteland): los dos iguales se inclinan uno hacia el otro */
.tile.pair-hint { animation: pairHint 1.5s ease-in-out infinite; z-index: 2; }
@keyframes pairHint { 0%, 100% { transform: none; } 45%, 55% { transform: translate(var(--hx), var(--hy)) scale(1.06); } }
body.no-motion .tile.pair-hint { animation: none; filter: drop-shadow(0 0 calc(var(--u) * 1.2) #fff6a8); }
/* copia de seguridad */
.st-btns { flex-wrap: wrap; gap: calc(var(--u) * 1.4); }
.st-btns .st-cred, .st-btns .st-wipe { padding: calc(var(--u) * 1.4) calc(var(--u) * 3.6); }
.st-bk { border-color: #c9c2ee; color: #6f5fc0; }
.backup .bk-intro { font-size: calc(var(--u) * 3.5); margin: 0 0 calc(var(--u) * 2); }
.backup .bk-box { background: #fff7f3; border-radius: calc(var(--u) * 3); box-shadow: inset 0 0 0 calc(var(--u) * .45) #f4d6d6; padding: calc(var(--u) * 2) calc(var(--u) * 2.4) calc(var(--u) * 2.6); margin: 0 0 calc(var(--u) * 2.4); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4); }
.backup .bk-box b { font-family: var(--font-hand); font-weight: 700; color: #d25b93; font-size: calc(var(--u) * 3.6); }
.backup textarea { width: 100%; box-sizing: border-box; resize: none; border: calc(var(--u) * .4) solid #f2c6d6; border-radius: calc(var(--u) * 2); padding: calc(var(--u) * 1.4); font: calc(var(--u) * 2.6)/1.3 ui-monospace, monospace; color: #7d4c5c; background: #fff; word-break: break-all; }
.backup .bk-msg { margin: 0; min-height: 1em; font-size: calc(var(--u) * 3.3); color: #c2415c; }
.backup .btn { min-width: calc(var(--u) * 36); }
/* ---------- 1.1: idiomas ---------- */
.st-lang-row { border-bottom: 0 !important; padding-bottom: 0 !important; }
.st-langs { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1); padding: calc(var(--u) * 1) 0 calc(var(--u) * 1.6); }
.st-langs button { border: 0; border-radius: 999px; padding: calc(var(--u) * 1.2) calc(var(--u) * .2); font: inherit; font-size: calc(var(--u) * 3.1); letter-spacing: -.01em; color: #8e6b6b; background: rgba(92, 27, 47, .08); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s, color .2s; }
.st-langs button[aria-pressed="true"] { background: #fff; color: #c2507f; font-weight: 700; box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * .8) rgba(92, 27, 47, .15), inset 0 0 0 calc(var(--u) * .4) #f6b4cf; }

/* japonés: sin interletrado de los títulos latinos y un poco más de interlineado */
body[data-lang="ja"] .modal-title, body[data-lang="ja"] .cel-ribbon, body[data-lang="ja"] .talk-card b, body[data-lang="ja"] .tuto-text > b, body[data-lang="ja"] .modal-box .btn { letter-spacing: 0; }
body[data-lang="ja"] .talk-card p, body[data-lang="ja"] .tuto-text p, body[data-lang="ja"] .cel-text { line-height: 1.5; }

/* ---- 1.2 · corral: pincel, frutillas y bonos por jugar */
.side-btns { gap: calc(var(--u) * 2); }
.side-btn { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.side-btn .play-bonus { position: absolute; top: calc(var(--u) * -1.6); left: calc(var(--u) * -1.6); width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); border-radius: 50%; background: #fff7d6; box-shadow: 0 0 0 calc(var(--u) * .45) #f5c84c, 0 calc(var(--u) * .4) calc(var(--u) * 1) rgba(92, 27, 47, .25); display: grid; place-items: center; animation: bonusBeat 1.1s ease-in-out infinite; pointer-events: none; }
.side-btn .play-bonus[hidden] { display: none; }
.side-btn .play-bonus img { width: 78%; height: 78%; object-fit: contain; }
@keyframes bonusBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18) rotate(-6deg); } }
body.edit-on .side-btn:not(#btnEdit), body.edit-on #cuteInfo, body.edit-on #cuteCard, body.edit-on .cq-dock { opacity: 0; pointer-events: none; transition: opacity .25s; }
body.edit-on #btnEdit { background: #fff4c8; }

/* ---- 1.2 · colección de 3 columnas, celdas grandes y desplazamiento propio con la barra rosada del juego */
.garden .cuteario-grid { grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.8); max-height: min(calc(var(--u) * 92), calc(var(--uh) * 44)); overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--u) * .8) calc(var(--u) * 2.4) calc(var(--u) * 1.6) calc(var(--u) * .6); scroll-snap-type: y proximity;
  -webkit-mask-image: linear-gradient(#000 calc(100% - var(--u) * 5), transparent); mask-image: linear-gradient(#000 calc(100% - var(--u) * 5), transparent); }
.garden .cuteario-cell { padding: calc(var(--u) * 1.6) calc(var(--u) * .6) calc(var(--u) * 1.2); scroll-snap-align: start; }
.garden .cuteario-cell img { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.garden .cuteario-cell .qmark { width: calc(var(--u) * 15); height: calc(var(--u) * 15); font-size: calc(var(--u) * 9); }
.garden .cuteario-name { font-size: calc(var(--u) * 3.5); font-family: var(--font-body); }
.garden .cuteario-grid::-webkit-scrollbar { width: calc(var(--u) * 1.8); }
.pill-btn.free { background: #8fd16a; color: #fff; box-shadow: inset 0 calc(var(--u) * -.8) 0 #5aa53f, 0 calc(var(--u) * .5) 0 rgba(70, 120, 50, .35); font-family: var(--font-display); font-size: calc(var(--u) * 3.6); padding: 0 calc(var(--u) * 4); }
/* 1.2: las bolsas siempre centradas (con 3 bolsas quedaban corridas a la izquierda): la fila completa se centra */
#bagRow .bags { flex: 0 0 auto; }
#bagRow .bags:empty { display: none; }

/* ---- 1.2 · vecinos del taller: un poco más a la derecha, más grandes, animados; estrellas y Go! a la derecha */
#orderStrip.order-strip { left: calc(var(--u) * 4.2); right: calc(var(--u) * 1); gap: calc(var(--u) * .6); }
#orderStrip .order { flex: 0 0 calc(var(--u) * 31); }
#orderStrip .order-who { width: calc(var(--u) * 27); height: calc(var(--u) * 27.5); top: calc(var(--u) * 2.2); transform-origin: 50% 100%; animation: whoIdle 2.6s ease-in-out infinite; transform: translateX(-50%); }
#orderStrip .order:nth-child(2) .order-who { animation-delay: -.9s; }
#orderStrip .order:nth-child(3) .order-who { animation-delay: -1.7s; }
#orderStrip .order:nth-child(4) .order-who { animation-delay: -.4s; }
#orderStrip .order.ready .order-who { animation: whoHappy 1.1s ease-in-out infinite; }
@keyframes whoIdle { 0%, 100% { transform: translateX(-50%) scale(1, 1); } 45% { transform: translateX(-50%) scale(1.035, .965); } 60% { transform: translateX(-50%) scale(.985, 1.02) rotate(-1.2deg); } }
@keyframes whoHappy { 0%, 100% { transform: translateX(-50%) translateY(0) scale(1, 1); } 30% { transform: translateX(-50%) translateY(0) scale(1.06, .93); } 55% { transform: translateX(-50%) translateY(calc(var(--u) * -1.6)) scale(.97, 1.04); } }
#orderStrip .order:active .order-who { animation: none; transform: translateX(-50%) scale(.96, .92); }
#orderStrip .order-pay { left: auto; right: calc(var(--u) * 1); top: calc(var(--u) * -.6); height: calc(var(--u) * 6.6); padding: 0 calc(var(--u) * 2) 0 calc(var(--u) * 6.6); }
#orderStrip .order-pay img { left: calc(var(--u) * -.8); width: calc(var(--u) * 7.8); height: calc(var(--u) * 7.8); }
#orderStrip .order-pay b { font-family: var(--font-display); font-size: calc(var(--u) * 4); color: #e98a2c; }
#orderStrip .order-items { top: calc(var(--u) * 29.5); height: calc(var(--u) * 13.4); min-width: calc(var(--u) * 19); padding: 0 calc(var(--u) * 2.4); gap: calc(var(--u) * .8); }
#orderStrip .order-items figure { width: calc(var(--u) * 10.4); height: calc(var(--u) * 10.4); }
#orderStrip .order-items figure .chk { width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
#orderStrip .order-go { left: auto; right: calc(var(--u) * -.6); top: calc(var(--u) * 21.5); width: calc(var(--u) * 14); animation: goBob 1.2s ease-in-out infinite; }
#orderStrip .order.main .order-go { left: auto; right: calc(var(--u) * 1); top: calc(var(--u) * 20); }
@keyframes goBob { 0%, 100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(calc(var(--u) * -.8)) rotate(3deg); } }
#orderStrip .order.main .order-who { animation: none; transform: translateX(-50%); }

/* ---- 1.2 · vecino nuevo: velo morado del juego que tapa mejor el fondo, y aire a la izquierda del globo */
.talk-layer.talk-btn { background: radial-gradient(ellipse 85% 60% at 50% 48%, rgba(122, 78, 150, .78), rgba(74, 44, 98, .9) 78%); backdrop-filter: blur(calc(var(--u) * .6)); -webkit-backdrop-filter: blur(calc(var(--u) * .6)); }
.talk-layer.talk-btn .talk-stack { padding-left: calc(var(--u) * 5); padding-right: calc(var(--u) * 2); }
.talk-layer.talk-btn .talk-card { box-shadow: inset 0 0 0 calc(var(--u) * .9) #f6a8c6, 0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(40, 18, 60, .35); }
.talk-layer.talk-btn .talk-face { filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.6) rgba(40, 18, 60, .35)); }
.talk-layer.talk-btn .talk-card { flex: 0 1 calc(var(--u) * 57); }
.talk-layer.talk-btn .talk-face { width: calc(var(--u) * 31); }

/* ---- 1.2 · todo más grande para el teléfono: recompensas, panel de info, nivel y misión */
.modal-box { max-width: calc(var(--u) * 82); }
.rew-title { font-size: calc(var(--u) * 4.6) !important; }
.modal-box .rew-row { gap: calc(var(--u) * 3.4); }
.modal-box .rew-chip { width: calc(var(--u) * 16); }
.modal-box .rew-chip img { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.modal-box .rew-chip b { font-size: calc(var(--u) * 3.8); min-width: calc(var(--u) * 8); margin-top: calc(var(--u) * 1.4); padding: 0 calc(var(--u) * 1.6); }
.rew-box { padding: calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 4); }
.rew-box > b { font-size: calc(var(--u) * 5); }
.lvl-num { font-size: calc(var(--u) * 6.4); }
.gi-tx b { font-size: calc(var(--u) * 4.8); }
.gi-tx p { font-size: calc(var(--u) * 3.9); line-height: 1.25; }
.gi-tx .gi-hint { font-size: calc(var(--u) * 3.7); }
.gi-mini small { font-size: calc(var(--u) * 3.4); }
.complete-pop .mc-who img { width: calc(var(--u) * 42); height: calc(var(--u) * 42); }
.mission-pop .mp-bar { width: calc(var(--u) * 32); height: calc(var(--u) * 6.4); }
.mission-pop .mp-bar em { font-size: calc(var(--u) * 3.9); line-height: calc(var(--u) * 6.4); }
.mission-pop .mp-home { width: calc(var(--u) * 6.6); height: calc(var(--u) * 6.6); }
.level-pop .rew-chip { width: calc(var(--u) * 22); }
.level-pop .rew-chip img { width: calc(var(--u) * 21); height: calc(var(--u) * 21); }
.level-pop .rew-chip b { font-size: calc(var(--u) * 4.2); }
.level-pop .item-meta { font-size: calc(var(--u) * 4); }
.mission-pop .rew-chip, .complete-pop .rew-chip { width: calc(var(--u) * 18); }
.mission-pop .rew-chip img, .complete-pop .rew-chip img { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.mission-pop .mp-need small, .mission-pop .mp-short { font-size: calc(var(--u) * 3.8); }
/* 1.2: ofertas diarias que se desbloquean por nivel */
.shop-card.locked .shop-art { filter: grayscale(.85) brightness(1.05); opacity: .55; }
.shop-buy.lock { background: #cdbab4; box-shadow: inset 0 calc(var(--u) * -.6) 0 #b09b95; color: #fff; font-family: var(--font-hand); cursor: default; }
.st-langs button { font-size: calc(var(--u) * 2.95); letter-spacing: -.03em; padding: calc(var(--u) * 1.6) 0; text-overflow: clip; }
.album .alb-tab span { font-size: calc(var(--u) * 2.6); max-width: 100%; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.album .alb-tab small { font-size: calc(var(--u) * 2.7); }
/* 1.3: los botones de acción principal (Completar, ¡Genial!, Reclamar…) respiran lento */
.btn.btn-go:not(.btn-soft):not(.btn-danger), .btn[data-complete], .btn[data-ok], .btn[data-claim] { animation: btnBreath 2.4s ease-in-out infinite; }
@keyframes btnBreath { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
body.no-motion .btn { animation: none !important; }
/* 1.3: la libreta de misión lista llama la atención (se mece y late) */
#orderStrip .order.main .order-who { animation: mainNote 1.8s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes mainNote { 0%, 100% { transform: translateX(-50%) rotate(0) scale(1); } 20% { transform: translateX(-50%) rotate(-5deg) scale(1.06); } 40% { transform: translateX(-50%) rotate(4deg) scale(1.06); } 60% { transform: translateX(-50%) rotate(0) scale(1); } }
#orderStrip .order.main .order-gold { animation: btnBreath 1.8s ease-in-out infinite; }
body.no-motion #orderStrip .order.main .order-who, body.no-motion #orderStrip .order.main .order-gold { animation: none; }
/* 1.3: números de recompensa grandes y legibles (antes, gris chico con la fuente de texto) */
.modal-box .rew-chip b { font-family: var(--font-display); font-size: calc(var(--u) * 5); line-height: 1.3; min-width: calc(var(--u) * 10); padding: 0 calc(var(--u) * 2.2); margin-top: calc(var(--u) * 1.2);
  background: linear-gradient(180deg, #ee93b6 0%, #c8648f 100%); border-radius: 999px; color: #fff; box-shadow: 0 calc(var(--u) * .5) 0 rgba(150, 60, 95, .25); }
.level-pop .rew-chip b { font-size: calc(var(--u) * 5.4); }
/* 1.3: pegatina misteriosa (cuteling, vecino u objeto que aún no conoces) */
.stk.hid .stk-art { position: relative; }
.stk.hid .stk-art img { filter: brightness(0) opacity(.18); }
.stk.hid .stk-art::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: calc(var(--u) * 7); color: #c9a9b4; }
.stk.hid b { letter-spacing: .1em; }
.alb-hint { margin: calc(var(--u) * .4) 0 calc(var(--u) * 1.2); font-size: calc(var(--u) * 3.3); color: #8c6670; text-align: center; line-height: 1.25; }
.alb-hint b { color: #c8487d; font-weight: 400; font-family: var(--font-display); }
.hud .res.pill-g { cursor: pointer; pointer-events: auto; }
/* 1.3: Lily animada (respira, inclina la cabeza y da saltitos al hablar) */
.talk-row:not(.right):not(.spirit) .talk-face, .tuto-face, .mission-pop .mp-who, .complete-pop .cel-who { transform-origin: 50% 100%; animation: lilyIdle 2.8s ease-in-out infinite; }
.talk-row:not(.right):not(.spirit):last-child .talk-face, .tuto-card .tuto-face { animation: lilyTalk .42s ease-in-out 3, lilyIdle 2.8s ease-in-out 1.3s infinite; }
@keyframes lilyIdle { 0%, 100% { transform: scale(1, 1) rotate(0); } 35% { transform: scale(1.025, .975) rotate(-1.5deg); } 70% { transform: scale(.99, 1.015) rotate(1deg); } }
@keyframes lilyTalk { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(calc(var(--u) * -1.2)) scale(.98, 1.03); } 75% { transform: translateY(0) scale(1.03, .97); } }
body.no-motion .talk-face, body.no-motion .tuto-face, body.no-motion .mp-who, body.no-motion .complete-pop .cel-who { animation: none !important; }
.complete-pop .cel-who { animation: rowIn .45s cubic-bezier(.3, 1.4, .5, 1), lilyIdle 2.8s ease-in-out .45s infinite; }
/* 1.3: energía de regalo al fusionar alto */
.tile.bonus-pop img { animation: bonusPop 650ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bonusPop { 0% { transform: scale(.2) translateY(30%); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------- 1.3.2 · pulido tras el QA */
/* Fusión: anillo blanco visible sobre la grilla clara; más grande en niveles altos */
.burst-ring.merge-ring { width: calc(var(--u) * 18); height: calc(var(--u) * 18); border: calc(var(--u) * .9) solid rgba(255, 255, 255, .95); background: radial-gradient(circle, rgba(255, 246, 199, .55), rgba(255, 246, 199, 0) 65%); box-shadow: 0 0 calc(var(--u) * 2) rgba(255, 214, 120, .7); }
.burst-ring.merge-ring.hi { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
#gridBoard.bump { animation: board-bump .22s ease-out; }
@keyframes board-bump { 0% { transform: scale(1); } 35% { transform: scale(1.012) translateY(calc(var(--u) * -.3)); } 100% { transform: none; } }
/* Pedido recién listo: salta una vez */
#orderStrip .order.just-ready { animation: order-ready .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes order-ready { 0% { transform: scale(.85); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
/* Panel de información: el nombre usa dos líneas antes de cortarse («Bolsa de frutas (12)») */
.grid-info .gi-tx b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.05; overflow-wrap: anywhere; }
/* Álbum: las pestañas largas (Werkstatt, Przyjaciele…) se achican en vez de cortarse */
.album .alb-tab span { max-width: 100%; overflow: hidden; text-overflow: clip; letter-spacing: -.02em; }
.album .alb-tab span.long { font-size: calc(var(--u) * 2.4); }
/* Japonés: cortes de línea por frase, no a mitad de palabra (Chrome/Edge 119+; el resto lo ignora) */
html:lang(ja) body { line-break: strict; word-break: auto-phrase; }
/* Celebraciones: se sigue viendo la isla detrás (antes el velo era casi opaco) */
.modal:has(.celebrate) .modal-veil { background: radial-gradient(ellipse 72% 42% at 50% 34%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0)), rgba(255, 240, 244, .84); backdrop-filter: blur(calc(var(--u) * .6)); }
body.no-motion #gridBoard.bump, body.no-motion #orderStrip .order.just-ready { animation: none; }
html:lang(ja) .stk b, html:lang(ja) .cel-name, html:lang(ja) .gi-tx b { word-break: auto-phrase; line-break: strict; }
.album .stk .stk-claim { padding-left: calc(var(--u) * 1.4); padding-right: calc(var(--u) * 1.4); letter-spacing: -.01em; max-width: 100%; }
.album .stk .stk-claim.long { font-size: calc(var(--u) * 2.75); }

/* ---------------------------------------------------------------- 1.4.0 · pedido estrella */
#orderStrip .order.star { position: relative; filter: drop-shadow(0 0 calc(var(--u) * 1.4) rgba(255, 196, 60, .95)); }
#orderStrip .order.star .order-items { box-shadow: 0 0 0 calc(var(--u) * .7) #ffd45c inset; border-radius: calc(var(--u) * 2.2); }
#orderStrip .order.star .order-star { position: absolute; left: calc(var(--u) * .4); top: calc(var(--u) * .2); width: calc(var(--u) * 7); height: calc(var(--u) * 7); object-fit: contain; animation: star-spin 3.2s ease-in-out infinite; pointer-events: none; z-index: 3; }
@keyframes star-spin { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.12); } }
.modal-box .star-hint { margin: calc(var(--u) * -1) auto calc(var(--u) * 2.4); max-width: calc(var(--u) * 64); padding: calc(var(--u) * 1) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 2); background: #fff4d0; color: #b0782a; font-size: calc(var(--u) * 3.3); }
body.no-motion #orderStrip .order.star .order-star { animation: none; }

/* ---------------------------------------------------------------- 1.5.0 · niebla en el tablero */
#gridBoard .cell.fog { position: relative; overflow: hidden; background: linear-gradient(160deg, #efeaff, #d9d2f3); box-shadow: inset 0 0 calc(var(--u) * 1.6) rgba(255, 255, 255, .9); }
#gridBoard .cell.fog::after { content: none; }
#gridBoard .cell.fog .fog-puff { position: absolute; left: -20%; top: 10%; width: 90%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%); animation: fog-drift 5.5s ease-in-out infinite alternate; pointer-events: none; }
#gridBoard .cell.fog .fog-puff.b { left: 30%; top: 35%; width: 85%; height: 65%; animation-duration: 7s; animation-delay: -2s; opacity: .85; }
@keyframes fog-drift { from { transform: translateX(-8%) scale(1); } to { transform: translateX(14%) scale(1.12); } }
body.no-motion #gridBoard .cell.fog .fog-puff { animation: none; }
.backup-nudge .bk-intro { font-size: calc(var(--u) * 3.6); line-height: 1.35; margin-bottom: calc(var(--u) * 3); }

/* ---------------------------------------------------------------- 1.5.0 · costados en pantallas anchas */
.side-deco { display: none; }
body.wide .side-deco { position: fixed; top: 0; bottom: 0; width: var(--side); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1; }
body.wide #sideL { left: 0; }
body.wide #sideR { right: 0; flex-direction: column; gap: 2vh; }
.side-logo { width: min(80%, 420px); height: auto; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(120, 60, 100, .3)); }
.side-lily { height: min(52vh, 520px); width: auto; max-width: 80%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(120, 60, 100, .3)); }
.side-cutes { display: flex; align-items: flex-end; gap: 1.5vw; }
.side-cutes img { width: min(6vw, 90px); height: auto; object-fit: contain; flex: 0 0 auto; }

@keyframes side-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2vh); } }
@keyframes side-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-1.4vh) scaleY(1.04); } }
body.no-motion .side-deco * { animation: none !important; }
#app { z-index: 2; }

/* ---------------------------------------------------------------- 1.5.2 · estrellas que caen del cielo */
.flyer.star-fall { transition: left 720ms cubic-bezier(.45, 0, .9, .55), top 720ms cubic-bezier(.55, 0, 1, .45), transform 720ms linear, opacity 160ms ease; filter: drop-shadow(0 0 calc(var(--u) * 1.2) rgba(255, 226, 122, .9)); }
.flyer.star-fall.go { transform: translate(-50%, -50%) rotate(var(--spin, 300deg)); }
.flyer.star-fall.land { transform: translate(-50%, -50%) rotate(var(--spin, 300deg)) scale(1.35); opacity: 0; transition: transform 240ms ease-out, opacity 240ms ease-out; }

/* ---------------------------------------------------------------- 1.5.3 · premio del pedido estrella visible */
#orderStrip .order.star .order-pay.star-pay { background: linear-gradient(180deg, #fff3c4, #ffd86b); box-shadow: 0 0 0 calc(var(--u) * .5) #fff, 0 0 calc(var(--u) * 1.6) rgba(255, 196, 60, .9); }
#orderStrip .order.star .order-pay.star-pay { padding-right: calc(var(--u) * 1.4); gap: calc(var(--u) * .3); white-space: nowrap; z-index: 3; }
#orderStrip .order.star .order-pay .pay-gem { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); object-fit: contain; margin-left: calc(var(--u) * .8); }
#orderStrip .order.star .order-pay .pay-gems { color: #c0408a; }
#orderStrip .order.star .order-x2 { position: absolute; right: calc(var(--u) * -.6); top: calc(var(--u) * 9); z-index: 4; padding: 0 calc(var(--u) * 1.3); border-radius: 999px; background: #ff6fa3; color: #fff; font-family: var(--font-display); font-size: calc(var(--u) * 4.4); line-height: 1.35; box-shadow: 0 0 0 calc(var(--u) * .5) #fff; transform: rotate(8deg); animation: x2-pulse 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes x2-pulse { 0%, 100% { transform: rotate(8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }
.star-x2 { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: calc(var(--u) * 11); color: #ffd23f; -webkit-text-stroke: calc(var(--u) * .7) #fff; text-shadow: 0 calc(var(--u) * .6) 0 #e8649a, 0 0 calc(var(--u) * 3) rgba(255, 200, 80, .9); pointer-events: none; animation: x2-pop 1.25s cubic-bezier(.2, 1.6, .4, 1) forwards; z-index: 60; }
@keyframes x2-pop { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 25% { transform: translate(-50%, -60%) scale(1.15); opacity: 1; } 70% { transform: translate(-50%, -90%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -130%) scale(.9); opacity: 0; } }
body.no-motion #orderStrip .order.star .order-x2, body.no-motion .star-x2 { animation: none; }

/* ---------------------------------------------------------------- 1.5.4 · ajustes pedidos por Nico */
/* La estrella del monto del vecino («+6») se cortaba arriba: baja dentro de la tarjeta */
#orderStrip .order-pay { top: calc(var(--u) * .9); }
#orderStrip .order-pay img { transform: translateY(-50%); }
/* Números del HUD: centrados en su contenedor y con M PLUS Rounded 1c Bold (libre, OFL; ya está en el juego):
   dígitos de ancho parejo y bien centrados en vertical. Capriola los dejaba bajos y corridos */
.hud .res { justify-content: center; padding-left: calc(var(--u) * 4.6); padding-right: calc(var(--u) * 1.2); }
.hud .res b, .hud .res b[data-len="4"], .hud .res b[data-len="5"] { font-family: 'CQ Round Bold', var(--font-body); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: 0; }
.hud .res b { font-size: calc(var(--u) * 3.6); }
.hud .res b[data-len="4"], .hud .res b[data-len="5"] { font-size: calc(var(--u) * 3.2); }
/* Ventana de misión: Lily un poco a la derecha (su animación se cortaba a la izquierda) y el costo de estrellas
   centrado en su contenedor (el contenedor no se mueve) */
.mission-pop .mp-who { left: calc(var(--u) * 4); }
.mission-pop .mp-cost { padding-left: calc(var(--u) * 1); }
/* Pinceles del modo edición: centrados y dentro del cuadrado (girados se salían por el borde) */
.variant-pop .variant { display: grid; place-items: center; }
.variant-pop .variant.brush img { width: 52%; height: 67%; }
.variant-pop .variant .paint { left: 33%; top: 20%; width: 37%; height: 28.5%; }
/* Panel de información del taller: el objeto sube un poco */
.grid-info .gi-ic { transform: translateY(calc(var(--u) * -1.6)); }
/* Ajustes: más aire abajo */
.settings.modal-box { padding-bottom: calc(var(--u) * 8); }
/* Idioma: un botón con ícono que abre la lista */
.st-lang-row { display: flex; align-items: center; justify-content: space-between; }
.st-lang-btn { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.4); border: 0; border-radius: 999px; padding: calc(var(--u) * 1.2) calc(var(--u) * 2.6); font: inherit; font-size: calc(var(--u) * 3.3); color: #c2507f; background: #fff; box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * .8) rgba(92, 27, 47, .15), inset 0 0 0 calc(var(--u) * .4) #f6b4cf; cursor: pointer; }
.st-lang-btn svg { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
.st-lang-btn b { font-weight: 700; }
.st-lang-btn i { font-style: normal; font-size: .8em; transition: transform .2s; }
.st-lang-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.st-langs[hidden] { display: none !important; }
/* Aviso breve de ayuda (reloj de arena, caja de energía, corazones) */
.cq-toast { position: absolute; left: 50%; top: calc(var(--u) * 26); z-index: 70; display: flex; align-items: center; gap: calc(var(--u) * 1.6); max-width: 86%; padding: calc(var(--u) * 1.6) calc(var(--u) * 3.2); border-radius: 999px; background: #fff; color: #8e4b6b; font-family: var(--font-body); font-size: calc(var(--u) * 3.4); line-height: 1.25; box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2.4) rgba(92, 27, 47, .25), inset 0 0 0 calc(var(--u) * .5) #f6b4cf; transform: translate(-50%, calc(var(--u) * -3)); opacity: 0; transition: opacity .3s, transform .35s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.cq-toast.on { opacity: 1; transform: translate(-50%, 0); }
.cq-toast img { width: calc(var(--u) * 7); height: calc(var(--u) * 7); object-fit: contain; flex: 0 0 auto; }
/* Botón para cerrar las explicaciones del tutorial */
.tuto-card .tuto-go { display: block; margin: calc(var(--u) * 1.6) auto 0; padding: calc(var(--u) * 1) calc(var(--u) * 5); font-size: calc(var(--u) * 3.4); pointer-events: auto; position: relative; z-index: 3; }
.tuto-card .tuto-go.nudge { animation: tgo-nudge .45s ease; }
@keyframes tgo-nudge { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } }
.tuto-catch { z-index: 1; }
.tuto-card { z-index: 2; }   /* la tarjeta no bloquea toques; sólo su botón los recibe */
/* Recompensas que vuelan al HUD al cerrar una ventana de premio */
.flyer.fly-rew { transition: left .72s cubic-bezier(.5, -.25, .6, 1), top .72s cubic-bezier(.3, .2, .4, 1), transform .72s ease-in, opacity .72s ease-in; transform: translate(-50%, -50%); z-index: 90; }
.hud-bump { animation: hud-bump .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hud-bump { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* Ventana de cuteling nuevo: aparece por partes (rápido, con rebote) */
.newcute-pop .cel-leaves { animation: nc-leaves .55s cubic-bezier(.3, 1.4, .5, 1) both; }
.newcute-pop .cel-deco { animation: nc-fade .4s ease both .05s; }
.newcute-pop .cel-who { animation: nc-pop .6s cubic-bezier(.25, 1.7, .45, 1) both .18s; }
.newcute-pop .cel-ribbon { animation: nc-ribbon .45s cubic-bezier(.3, 1.4, .5, 1) both .42s; }
.newcute-pop .cel-name { animation: nc-up .35s ease-out both .55s; }
.newcute-pop .cel-text { animation: nc-up .35s ease-out both .65s; }
.newcute-pop .rew-title { animation: nc-up .3s ease-out both .78s; }
.newcute-pop .rew-chip { animation: nc-pop .45s cubic-bezier(.25, 1.7, .45, 1) both; }
.newcute-pop .rew-chip:nth-child(1) { animation-delay: .86s; } .newcute-pop .rew-chip:nth-child(2) { animation-delay: .96s; } .newcute-pop .rew-chip:nth-child(3) { animation-delay: 1.06s; }
.newcute-pop .modal-actions { animation: nc-up .35s ease-out both 1.1s; }
@keyframes nc-leaves { from { opacity: 0; transform: scale(.4) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes nc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nc-pop { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes nc-ribbon { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
@keyframes nc-up { from { opacity: 0; transform: translateY(calc(var(--u) * 3)); } to { opacity: 1; transform: none; } }
body.no-motion .newcute-pop * { animation: none !important; }
/* Contador de gemas sobre el álbum al pegar una pegatina */
.gem-float { position: absolute !important; z-index: 95; margin: 0; opacity: 0; transition: opacity .25s; pointer-events: none; }
.gem-float.on { opacity: 1; }
#app > .flyer.fly-rew { position: absolute; z-index: 96; pointer-events: none; }
.hud.gemfloat-wrap { position: absolute; left: 0; top: 0; right: auto; width: 0; height: 0; padding: 0; margin: 0; gap: 0; z-index: 95; pointer-events: none; }
/* Estrellas fugaces al mejorar un punto de interés */
.shoot { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 58; will-change: transform; }
.shoot-star { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); filter: drop-shadow(0 0 calc(var(--u) * 1.4) rgba(255, 226, 122, .95)); }
.shoot-tail { position: absolute; left: 0; top: 0; height: calc(var(--u) * 1.9); margin-top: calc(var(--u) * -.95); transform-origin: 0 50%; border-radius: 999px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 252, 225, 1), rgba(255, 220, 120, .75) 30%, rgba(255, 214, 120, 0)); filter: blur(.4px) drop-shadow(0 0 calc(var(--u) * .8) rgba(255, 220, 120, .8)); }
.garden .cuteario-grid, .album .alb-grid { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.garden .cuteario-grid.dragging, .album .alb-grid.dragging { cursor: grabbing; scroll-snap-type: none; }
.garden .cuteario-grid img, .album .alb-grid img { -webkit-user-drag: none; pointer-events: none; }
/* Burbuja guía de regalos de la isla */
.find-btn { position: relative; animation: find-bob 2.4s ease-in-out infinite; }
.find-btn .find-arrow { position: absolute; right: calc(var(--u) * -1.2); bottom: calc(var(--u) * -1.2); width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%23c2507f' stroke-width='2.6'/%3E%3Cpath d='M14.5 14.5l5 5' stroke='%23c2507f' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 72% no-repeat; box-shadow: 0 1px 3px rgba(92, 27, 47, .3); }
@keyframes find-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -1)); } }
body.no-motion .find-btn { animation: none; }

/* 1.5.5 (pedido de Nico): sin barras de desplazamiento en ventanas de premio ni avisos. Sólo la colección
   (jardín, cuteario) y el álbum de pegatinas se desplazan. Las celebraciones nunca recortan ni desplazan. */
.modal-box:not(.garden):not(.cuteario):not(.cutes):not(.album) .modal-body,
.modal-box:not(.garden):not(.cuteario):not(.cutes):not(.album) .modal-body.scroll { overflow-y: hidden; overflow-x: hidden; scrollbar-width: none; }
.modal-box.celebrate .modal-body, .modal-box.celebrate .modal-body.scroll { overflow: visible !important; }
.modal-box:not(.garden):not(.cuteario):not(.cutes):not(.album) .modal-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.modal { overflow: hidden; }
/* 1.5.5: el rayito de energía del tablero, más chico y centrado en su casilla como los demás objetos */
/* La causa: el sprite es más alto que ancho (119×150) y la fila de la casilla crecía con él; quedaba 20 % más
   alto que la casilla y corrido hacia abajo. Ahora se centra en la casilla, sin transform (las animaciones lo usan). */
#gridBoard .tile.cur-energy img { position: absolute; inset: 0; margin: auto; width: 76%; height: 76%; object-fit: contain; object-position: 50% 50%; }
/* 1.5.5: mano guía sobre «Go!» de la misión lista, sin oscurecer la pantalla */
.go-hint { position: absolute; inset: 0; z-index: 118; pointer-events: none; }
.go-hint[hidden] { display: none; }

/* ================= 1.6.0: lazos, postales y «mientras no estabas» ================= */
/* corazones de lazo */
.bond-hearts { display: inline-flex; gap: calc(var(--u) * .5); align-items: center; vertical-align: middle; }
.bond-hearts .bh { display: block; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); background: url('assets/ui/atlas-hub-7.png') center / contain no-repeat; filter: grayscale(1) brightness(1.35) opacity(.45); }
.bond-hearts .bh.on { filter: drop-shadow(0 calc(var(--u) * .2) 0 rgba(160, 40, 80, .25)); }
.bond-hearts.mini { gap: calc(var(--u) * .2); margin-top: calc(var(--u) * .4); }
.bond-hearts.mini .bh { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); }
.bond-hearts.big { display: flex; justify-content: center; gap: calc(var(--u) * 1.4); margin: 0 auto calc(var(--u) * 2); }
.bond-hearts.big .bh { width: calc(var(--u) * 7.5); height: calc(var(--u) * 7.5); animation: bondPulse 1.4s ease-in-out infinite; }
.bond-hearts.big .bh:nth-child(2) { animation-delay: .15s; } .bond-hearts.big .bh:nth-child(3) { animation-delay: .3s; }
@keyframes bondPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
body.no-motion .bond-hearts.big .bh { animation: none; }
.bond-hearts.note .bh { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); }
.bond-bar { display: block; height: calc(var(--u) * 1.3); margin: calc(var(--u) * .8) 0 0; border-radius: 999px; background: #f6dfe6; overflow: hidden; }
.bond-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f7a6c5, #e9679a); }
/* corazón que sube al acariciar */
.bond-float { position: absolute; z-index: 40; width: calc(var(--u) * 7); height: calc(var(--u) * 7); margin: calc(var(--u) * -3.5) 0 0 calc(var(--u) * -3.5); pointer-events: none; animation: bondRise 1.2s cubic-bezier(.25, .8, .4, 1) forwards; }
.bond-float.big { width: calc(var(--u) * 10); height: calc(var(--u) * 10); margin: calc(var(--u) * -5) 0 0 calc(var(--u) * -5); }
.bond-float.soft { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); opacity: .75; }
@keyframes bondRise { 0% { transform: translateY(0) scale(.3); opacity: 0; } 18% { transform: translateY(calc(var(--u) * -3)) scale(1.15); opacity: 1; } 100% { transform: translateY(calc(var(--u) * -16)) scale(.9); opacity: 0; } }
/* ficha del corral */
.cute-card .bond-card { margin-top: calc(var(--u) * 1.2); }
.cute-card .bond-card .bond-bar { width: calc(var(--u) * 26); }
.cute-card .bond-line { margin: calc(var(--u) * .9) 0 0; font-size: calc(var(--u) * 3.2); color: #b25a85; font-style: italic; line-height: 1.3; }
/* ficha del cuteario */
.bond-ficha { margin: calc(var(--u) * 2) 0 0; padding: calc(var(--u) * 2.2) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 3); background: #fff6f8; box-shadow: inset 0 0 0 calc(var(--u) * .45) #f6cdd9; text-align: left; }
.bond-ficha .bf-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 3.8); color: #d2457e; }
.bond-ficha .bf-lines { margin: calc(var(--u) * 1.6) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); }
.bond-ficha .bf-lines li { position: relative; padding-left: calc(var(--u) * 5); font-size: calc(var(--u) * 3.3); line-height: 1.35; color: #8a6470; }
.bond-ficha .bf-lines li::before { content: ''; position: absolute; left: 0; top: calc(var(--u) * .2); width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); background: url('assets/ui/atlas-hub-7.png') center / contain no-repeat; }
.bond-ficha .bf-lines li.off { color: #c4b2b4; font-style: italic; }
.bond-ficha .bf-lines li.off::before { filter: grayscale(1) opacity(.4); }
.bond-ficha .bf-hint { margin: calc(var(--u) * 1.6) 0 0; font-size: calc(var(--u) * 3); color: #b49aa0; }
/* banda de aviso (lazo nuevo, postal nueva) */
.cozy-note { position: absolute; z-index: 96; left: 50%; top: calc(env(safe-area-inset-top, 0px) + var(--u) * 20); display: flex; align-items: center; gap: calc(var(--u) * 2.4); width: calc(var(--u) * 86); padding: calc(var(--u) * 1.8) calc(var(--u) * 3) calc(var(--u) * 1.8) calc(var(--u) * 2); border: 0; border-radius: calc(var(--u) * 4); background: #fffaf3; box-shadow: inset 0 0 0 calc(var(--u) * .6) #f6c3d6, 0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(190, 90, 130, .25); font: inherit; text-align: left; cursor: pointer; transform: translate(-50%, calc(var(--u) * -30)); opacity: 0; transition: transform .38s cubic-bezier(.3, 1.4, .5, 1), opacity .25s; }
.cozy-note.on { transform: translate(-50%, 0); opacity: 1; }
.cozy-note .cn-art { flex: none; width: calc(var(--u) * 13); height: calc(var(--u) * 13); object-fit: contain; }
.cozy-note .cn-tx { display: flex; flex-direction: column; gap: calc(var(--u) * .6); min-width: 0; }
.cozy-note b { font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 4.2); color: #d2457e; line-height: 1.1; }
.cozy-note small { font-size: calc(var(--u) * 3.1); color: #8a6470; line-height: 1.3; font-style: italic; }
.cozy-note.post small { font-style: normal; }
/* ventana de mejores amigos */
.bond-pop .bond-post-tx { margin: calc(var(--u) * -1) 0 calc(var(--u) * 2.4); font-family: var(--font-hand); font-size: calc(var(--u) * 3.6); color: #c45d8c; }
.bond-pop .modal-actions { gap: calc(var(--u) * 2.4); }
/* postales en el álbum */
.album .alb-mode { display: flex; gap: calc(var(--u) * 1.6); margin: 0 0 calc(var(--u) * 2.2); }
.album .alb-mode button { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2); height: calc(var(--u) * 10); border: 0; border-radius: 999px; background: #f6e7e3; font: inherit; cursor: pointer; }
.album .alb-mode img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); object-fit: contain; filter: saturate(.6) opacity(.75); }
.album .alb-mode span { font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 3.8); color: #b48d93; white-space: nowrap; }
.album .alb-mode small { font-size: calc(var(--u) * 3); color: #b8a2a0; }
.album .alb-mode button.on { background: #ffd9e8; box-shadow: 0 calc(var(--u) * .6) 0 #f3b3cd; }
.album .alb-mode button.on span { color: #d2457e; }
.album .alb-mode button.on img { filter: none; }
.album .alb-mode button.post.on { background: #ffe9c2; box-shadow: 0 calc(var(--u) * .6) 0 #f1c27a; }
.album .alb-mode button.post.on span { color: #c4741f; }
.album .alb-grid.posts { display: block; max-height: calc(var(--uh) * 60); padding: calc(var(--u) * 2.4) calc(var(--u) * 1.6) calc(var(--u) * 2.4); }
.post-hint, .post-empty { margin: 0 0 calc(var(--u) * 2); font-size: calc(var(--u) * 3.2); color: #a98b88; text-align: center; line-height: 1.35; }
.post-empty { padding: calc(var(--u) * 8) calc(var(--u) * 4); }
.post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3) calc(var(--u) * 2.4); }
.post-tile { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * 1.4); border: 0; border-radius: calc(var(--u) * 1.6); background: #fff; box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 1.8) rgba(170, 100, 120, .22); font: inherit; cursor: pointer; transform: rotate(var(--r, 0deg)); transition: transform .18s; }
.post-tile:active { transform: rotate(0deg) scale(.97); }
.post-tile img { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: calc(var(--u) * .9); background: linear-gradient(135deg, #fdf3ea, #f8e4ea); opacity: 0; transition: opacity .35s; }
.post-tile img.on { opacity: 1; }
.post-tile .post-cap { font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 2.9); color: #b45f86; line-height: 1.15; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.post-tile .post-new { position: absolute; top: calc(var(--u) * -1.6); right: calc(var(--u) * -1); padding: calc(var(--u) * .4) calc(var(--u) * 1.6); border-radius: 999px; background: #ef5f8f; color: #fff; font-style: normal; font-family: var(--font-display); font-size: calc(var(--u) * 2.6); box-shadow: 0 0 0 calc(var(--u) * .5) #fff; }
/* ver una postal */
.modal-box.post-view { max-width: calc(var(--u) * 92); padding-left: calc(var(--u) * 3.4); padding-right: calc(var(--u) * 3.4); }
.post-view-wrap { position: relative; }
.post-big { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: calc(var(--u) * 1.6); background: linear-gradient(135deg, #fdf3ea, #f8e4ea); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2.4) rgba(170, 100, 120, .3); opacity: .0; transition: opacity .3s; }
.post-big.on { opacity: 1; }
.post-load { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 8); height: calc(var(--u) * 8); margin: calc(var(--u) * -4) 0 0 calc(var(--u) * -4); border-radius: 50%; border: calc(var(--u) * 1) solid #f6cdd9; border-top-color: #e9679a; animation: postSpin .8s linear infinite; }
@keyframes postSpin { to { transform: rotate(360deg); } }
.post-nav { position: absolute; top: 50%; width: calc(var(--u) * 9); height: calc(var(--u) * 9); margin-top: calc(var(--u) * -4.5); border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #d2457e; font-family: var(--font-display); font-size: calc(var(--u) * 6); line-height: 1; box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(170, 100, 120, .3); cursor: pointer; }
.post-nav.prev { left: calc(var(--u) * -2.4); } .post-nav.next { right: calc(var(--u) * -2.4); }
.post-count { margin: calc(var(--u) * 2) 0 calc(var(--u) * 1); font-size: calc(var(--u) * 3); color: #b49aa0; }
.post-view .modal-actions { gap: calc(var(--u) * 2.4); }
/* mientras no estabas */
.away-pop .away-head { display: flex; align-items: center; gap: calc(var(--u) * 2.4); margin: 0 0 calc(var(--u) * 1.6); text-align: left; }
.away-pop .away-head img { flex: none; width: calc(var(--u) * 15); height: calc(var(--u) * 15); object-fit: contain; }
.away-pop .away-head p { margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 4.4); color: #d2457e; line-height: 1.2; }
.away-pop .away-vig { margin: 0 0 calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 2.6); background: #fff6f8; font-size: calc(var(--u) * 3.5); color: #8a6470; font-style: italic; line-height: 1.4; }
.away-pop .away-list { margin: 0 0 calc(var(--u) * 2); padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); text-align: left; }
.away-pop .away-list li { display: flex; align-items: center; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 3.4); color: #7d5a64; line-height: 1.25; }
.away-pop .away-list img { flex: none; width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); object-fit: contain; }
.away-pop .away-gift { display: flex; align-items: center; gap: calc(var(--u) * 2.4); margin: 0 0 calc(var(--u) * 2.4); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 3); background: linear-gradient(#fff4dc, #ffe8c4); box-shadow: inset 0 0 0 calc(var(--u) * .5) #f4cf8e; text-align: left; }
.away-pop .away-who { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); object-fit: contain; animation: awayHop 1.6s ease-in-out infinite; }
@keyframes awayHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -1.4)); } }
body.no-motion .away-pop .away-who { animation: none; }
.away-pop .away-gift p { margin: 0 0 calc(var(--u) * 1); font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 3.6); color: #b0702a; }
.away-pop .away-gift .rew-row { justify-content: flex-start; }
.away-pop .away-gift .rew-chip { width: calc(var(--u) * 12); }
.away-pop .away-gift .rew-chip img { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }

/* ================= 1.6.1: botones dibujados en todo el juego =================
   Un solo dibujo (atlas-popup-121, verde a crayón) cortado en 9 partes: los extremos redondos y el borde
   conservan su forma a cualquier ancho o alto (antes se estiraba con 100% 100% y se veía aplastado o
   inflado). La variante crema (btn-crema, el mismo dibujo recoloreado) es para acciones secundarias.
   --bh es el alto del botón: de ahí salen los anchos del corte. */
.modal-box .btn, .talk-go.btn, .tuto-card .tuto-go, .shop-buy:not(.ad):not(.lock), .pill-btn.gem, .pill-btn.free, .btn-mini {
  --bh: calc(var(--u) * 10.6);
  /* 1.8.0: tres piezas (punta izquierda, centro, punta derecha) en vez del corte en 9: el corte dejaba
     líneas finas entre piezas a algunos tamaños. Las puntas escalan con el alto y tapan el borde del centro. */
  --cap: calc(var(--bh) * .515);
  background: url('assets/ui/btn-verde-l-v2.png') left center / auto 100% no-repeat, url('assets/ui/btn-verde-r-v2.png') right center / auto 100% no-repeat,
    url('assets/ui/btn-verde-m.png') center / calc(100% - var(--cap) * 1.65) 100% no-repeat !important;
  box-shadow: none !important; border-radius: 0 !important; border: 0 !important; border-image: none !important;
}
.modal-box .btn.btn-soft, .btn-mini { background: url('assets/ui/btn-crema-l-v2.png') left center / auto 100% no-repeat, url('assets/ui/btn-crema-r-v2.png') right center / auto 100% no-repeat, url('assets/ui/btn-crema-m.png') center / calc(100% - var(--cap) * 1.65) 100% no-repeat !important; color: #c9568a; text-shadow: none; -webkit-text-stroke: 0; }
/* «Continuar» de la tarjeta de Lily (tutorial): mismo botón y misma letra que «¡Genial!» */
.tuto-card .tuto-go { --bh: calc(var(--u) * 9.4); height: var(--bh); min-width: calc(var(--u) * 34); padding: 0 calc(var(--u) * 5) calc(var(--u) * 1.1); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 4.4); line-height: 1; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 calc(var(--u) * .35) 0 #3d9e4b, 0 0 calc(var(--u) * .5) #3d9e4b; letter-spacing: .02em; }
/* tienda */
.shop-buy:not(.ad):not(.lock) { --bh: calc(var(--u) * 7.4); height: var(--bh); padding-bottom: calc(var(--u) * .9); text-shadow: 0 calc(var(--u) * .3) 0 #3d9e4b, 0 0 calc(var(--u) * .4) #3d9e4b; }
.shop-buy.gem { padding-left: calc(var(--u) * 1.4); padding-right: calc(var(--u) * 1.4); }
.shop-buy.gem img { height: 64%; }
/* jardín: «+4 por 15 gemas» y recargas del taller */
.pill-btn.gem, .pill-btn.free { --bh: calc(var(--u) * 9.6); height: var(--bh); padding: 0 calc(var(--u) * 4.2) calc(var(--u) * 1) calc(var(--u) * 3.4); color: #fff; font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 4.4); text-shadow: 0 calc(var(--u) * .35) 0 #3d9e4b, 0 0 calc(var(--u) * .5) #3d9e4b; }
.gi-rc .pill-btn.gem, .gi-rc .pill-btn.free { --bh: calc(var(--u) * 10); padding: 0 calc(var(--u) * 2.6) calc(var(--u) * 1); font-size: calc(var(--u) * 3.6); }
.pill-btn.gem img { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); }
/* botón chico secundario (guardar o compartir una postal) */
.btn-mini { --bh: calc(var(--u) * 7.6); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1); height: var(--bh); min-width: calc(var(--u) * 22); padding: 0 calc(var(--u) * 3.4) calc(var(--u) * .8); font: inherit; font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 3.4); line-height: 1; cursor: pointer; }
.btn-mini:active { transform: translateY(calc(var(--u) * .3)); }
.btn-mini img { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); object-fit: contain; }
.post-tools { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); margin: calc(var(--u) * 2.4) 0 0; }
.post-tools .post-count { margin: 0; font-size: calc(var(--u) * 3.2); color: #b49aa0; }
.post-tools .post-tbtns { display: flex; gap: calc(var(--u) * 1.6); }
.post-view .modal-actions { margin-top: calc(var(--u) * 3); }
/* 1.6.1: pedido nuevo: espera un instante (para que se vea que el anterior se fue), entra con salto y destello */
#orderStrip .order.order-new { animation: orderNew 1.1s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--nd, 0ms); }
#orderStrip .order.order-new::after { content: ''; position: absolute; inset: calc(var(--u) * -1); border-radius: calc(var(--u) * 4); box-shadow: 0 0 0 calc(var(--u) * .8) rgba(255, 255, 255, .95), 0 0 calc(var(--u) * 4) rgba(255, 236, 140, .9); opacity: 0; animation: orderNewRing 1.1s ease-out both; animation-delay: var(--nd, 0ms); pointer-events: none; }
@keyframes orderNew { 0%, 28% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.16); opacity: 1; } 72% { transform: scale(.94); } 86% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
@keyframes orderNewRing { 0%, 40% { opacity: 0; transform: scale(.8); } 55% { opacity: 1; } 100% { opacity: 0; transform: scale(1.18); } }
body.no-motion #orderStrip .order.order-new, body.no-motion #orderStrip .order.order-new::after { animation: none; }
/* 1.6.1: recompensas que vuelan a su contenedor */
.flyer.fly2 { transition: top .17s cubic-bezier(.3, .8, .5, 1), transform .17s ease-out; transform: translate(-50%, -50%) scale(.6); z-index: 90; pointer-events: none; filter: drop-shadow(0 calc(var(--u) * .4) calc(var(--u) * .5) rgba(92, 27, 47, .3)); }
.flyer.fly2.up { transform: translate(-50%, -50%) scale(1.15); }
.flyer.fly2.go { transition: left .64s cubic-bezier(.55, 0, .75, .4), top .64s cubic-bezier(.2, .5, .45, 1), transform .64s ease-in; transform: translate(-50%, -50%) scale(.62); }
.fly-ghost-wrap { position: absolute; inset: 0; z-index: 96; pointer-events: none; background: none; height: auto; }
.fly-ghost { position: absolute !important; margin: 0 !important; opacity: 0; transition: opacity .25s; pointer-events: none; }
.fly-ghost.on { opacity: 1; }
#app > .flyer.fly2 { position: absolute; }
/* 1.6.1: oferta diaria bloqueada: insignia corta de nivel que cabe en todos los idiomas */
.shop-buy.lock { --bh: calc(var(--u) * 7.4); height: var(--bh); width: 92%; overflow: hidden; white-space: nowrap; padding: 0 calc(var(--u) * 1); font-family: var(--font-display); font-size: calc(var(--u) * 3.6); letter-spacing: .02em; }
.shop-buy.lock .fit { display: inline-block; white-space: nowrap; }
.shop-buy.lock::before { content: ''; flex: none; width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); margin-right: calc(var(--u) * .8); background: url('assets/ui/atlas-hub-14.png') center / contain no-repeat; display: none; }
.buy-pop .buy-rew { margin: calc(var(--u) * -2) 0 calc(var(--u) * 2); }
/* 1.6.1: el número rojo del selector del álbum ya no se corta arriba */
.album .alb-mode { padding-top: calc(var(--u) * 2); margin-top: calc(var(--u) * -.6); }
.album .alb-mode img { width: calc(var(--u) * 6.6); height: calc(var(--u) * 6.6); }
.album .alb-mode .alb-dot { top: calc(var(--u) * -1.6); right: calc(var(--u) * .6); }
/* 1.6.1 (pedido de Nico): números del HUD con Fredoka One, la letra redonda del juego. La subfuente de
   M PLUS (1.5.4) no traía los dígitos y el navegador caía a una letra con serifa: por eso se veían chuecos. */
.hud .res b, .hud .res b[data-len="4"], .hud .res b[data-len="5"] { font-family: 'Fredoka One', var(--font-display); font-weight: 400; font-variant-numeric: normal; line-height: 1; letter-spacing: .01em; display: block; text-align: center; transform: translateY(calc(var(--u) * .1)); }
.hud .res b { font-size: calc(var(--u) * 3.9); }
.hud .res b[data-len="4"], .hud .res b[data-len="5"] { font-size: calc(var(--u) * 3.3); }
/* 1.6.1: pie de Ajustes equilibrado (antes pegado a los botones y con mucho aire abajo) */
.settings.modal-box { padding-bottom: calc(var(--u) * 5.2); }
.settings .st-foot { margin: calc(var(--u) * 3.4) 0 0; line-height: 1.2; }
.garden-buy .pill-btn.gem, .garden-buy .pill-btn.free { min-width: calc(var(--u) * 22); justify-content: center; }

/* ================= 1.7.0: paseos y expediciones ================= */
.btn-mini.green { background: url('assets/ui/btn-verde-l-v2.png') left center / auto 100% no-repeat, url('assets/ui/btn-verde-r-v2.png') right center / auto 100% no-repeat, url('assets/ui/btn-verde-m.png') center / calc(100% - var(--cap) * 1.65) 100% no-repeat !important; color: #fff; text-shadow: 0 calc(var(--u) * .3) 0 #3d9e4b, 0 0 calc(var(--u) * .4) #3d9e4b; }
.cute-card .trip-card { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 1.4); }
.cute-card .trip-card .btn-mini { margin-left: auto; }
.cute-card .tc-fav { margin: 0; font-size: calc(var(--u) * 3); color: #d2457e; white-space: nowrap; }
.bond-ficha .bf-fav { margin: calc(var(--u) * 1.4) 0 0; font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 3.4); color: #d2457e; }
/* selector */
.trip-pop .tr-head { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); margin: 0 0 calc(var(--u) * 2); }
.trip-pop .tr-head img { width: calc(var(--u) * 12); height: calc(var(--u) * 12); object-fit: contain; }
.trip-pop .tr-head b { font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 4.4); color: #c45d8c; line-height: 1.15; }
.trip-pop .tr-reg { width: calc(var(--u) * 22); height: calc(var(--u) * 13); border-radius: calc(var(--u) * 2); background: #bfe6f2 url('assets/cq/islas.png') var(--rx) var(--ry) / 360% auto no-repeat; box-shadow: inset 0 0 0 calc(var(--u) * .5) #f6cdd9; }
.trip-pop .tr-q { margin: calc(var(--u) * 1.4) 0 calc(var(--u) * 1); font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 3.6); color: #b48d93; }
.trip-pop .tr-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.6); }
.trip-pop .tr-opts.who { grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 1.1); }
.trip-pop .tr-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .4); padding: calc(var(--u) * 1.2) calc(var(--u) * .4) calc(var(--u) * 1); border: 0; border-radius: calc(var(--u) * 2.4); background: #fff7f3; box-shadow: inset 0 0 0 calc(var(--u) * .45) #f4d6d6; font: inherit; cursor: pointer; transition: transform .12s; }
.trip-pop .tr-opt img { width: calc(var(--u) * 11); height: calc(var(--u) * 11); object-fit: contain; }
.trip-pop .tr-opts.place .tr-opt img { width: calc(var(--u) * 15); height: calc(var(--u) * 13); }
.trip-pop .tr-opt small { font-size: calc(var(--u) * 2.7); color: #8a6470; line-height: 1.1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.trip-pop .tr-opt.on { background: #ffe3ef; box-shadow: inset 0 0 0 calc(var(--u) * .7) #ef8fb6; transform: translateY(calc(var(--u) * -.5)); }
.trip-pop .tr-fav { position: absolute; top: calc(var(--u) * -1.4); right: calc(var(--u) * -.6); padding: 0 calc(var(--u) * 1); border-radius: 999px; background: #ef5f8f; color: #fff; font-style: normal; font-family: var(--font-display); font-size: calc(var(--u) * 2.5); line-height: calc(var(--u) * 4); white-space: nowrap; box-shadow: 0 0 0 calc(var(--u) * .4) #fff; }
.trip-pop .tr-n { position: absolute; top: calc(var(--u) * .4); left: calc(var(--u) * .8); font-style: normal; font-family: var(--font-display); font-size: calc(var(--u) * 2.6); color: #b48d93; }
.trip-pop .tr-durs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.4); }
.trip-pop .tr-dur { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1.4) calc(var(--u) * .6); border: 0; border-radius: calc(var(--u) * 2.4); background: #fff7f3; box-shadow: inset 0 0 0 calc(var(--u) * .45) #f4d6d6; font: inherit; cursor: pointer; }
.trip-pop .tr-dur.on { background: #e9f8df; box-shadow: inset 0 0 0 calc(var(--u) * .7) #6fcb73; }
.trip-pop .tr-dur > b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 4); color: #7d4c5c; }
.trip-pop .tr-rws { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * .4) calc(var(--u) * 1); }
.trip-pop .tr-rw { display: inline-flex; align-items: center; gap: calc(var(--u) * .3); }
.trip-pop .tr-rw img { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); object-fit: contain; }
.trip-pop .tr-rw b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 3); color: #8a6470; }
.trip-pop .tr-rw.maybe { opacity: .75; }
.trip-pop .tr-slots, .trip-pop .tr-why, .trip-pop .tr-none { margin: calc(var(--u) * 1.2) 0 0; font-size: calc(var(--u) * 3); color: #b49aa0; }
.trip-pop .tr-why { color: #d2457e; }
/* marcadores sobre los puntos de interés */
.trip-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.trip-layer[hidden] { display: none; }
.trip-mark { position: absolute; width: calc(var(--u) * 13); height: calc(var(--u) * 13); margin: calc(var(--u) * -6.5) 0 0 calc(var(--u) * -6.5); padding: 0; border: 0; border-radius: 50%; background: #fffaf3; box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgba(150, 80, 110, .3); pointer-events: auto; cursor: pointer; }
.trip-mark > img, .map-slot > img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.tm-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#ef8fb6 var(--p, 0deg), #f6dfe6 0); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%); }
.trip-mark small, .map-slot .ms-t { position: absolute; left: 50%; top: 100%; transform: translate(-50%, calc(var(--u) * .4)); padding: 0 calc(var(--u) * 1.2); border-radius: 999px; background: rgba(255, 250, 243, .95); font-family: var(--font-display); font-size: calc(var(--u) * 2.7); color: #a0607e; white-space: nowrap; }
.trip-mark small:empty { display: none; }
.tm-gift { position: absolute; right: calc(var(--u) * -2); top: calc(var(--u) * -2.6); width: calc(var(--u) * 7); height: calc(var(--u) * 7); display: none; }
.tm-gift img { width: 100%; height: 100%; object-fit: contain; }
.trip-mark.ready, .map-slot.ready { animation: tripReady 1.2s ease-in-out infinite; }
.trip-mark.ready .tm-gift, .map-slot.ready .tm-gift { display: block; }
.trip-mark.ready .tm-ring, .map-slot.ready .tm-ring { background: #ffd864; }
@keyframes tripReady { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(calc(var(--u) * -1.2)) scale(1.06); } }
body.no-motion .trip-mark.ready, body.no-motion .map-slot.ready { animation: none; }
.trip-fly { position: absolute; z-index: 92; width: calc(var(--u) * 12); height: calc(var(--u) * 12); transform: translate(-50%, -50%); object-fit: contain; pointer-events: none; transition: left .85s cubic-bezier(.4, 0, .5, 1), top .85s cubic-bezier(.2, -.4, .5, 1), transform .85s ease; }
.trip-fly.go { transform: translate(-50%, -50%) scale(.7); }
/* mapa */
.modal-box.map-pop { max-width: calc(var(--u) * 94); padding-left: calc(var(--u) * 3); padding-right: calc(var(--u) * 3); }
.map-wrap { position: relative; border-radius: calc(var(--u) * 2.4); background: linear-gradient(#cdeef5, #a9dcea); box-shadow: inset 0 0 0 calc(var(--u) * .6) #f6cdd9; overflow: hidden; }
.map-art { display: block; width: 125%; margin-left: -1%; aspect-ratio: 2 / 1; object-fit: contain; }
.map-wrap { aspect-ratio: 1.62 / 1; }
.map-slot { position: absolute; width: calc(var(--u) * 12); height: calc(var(--u) * 12); margin: calc(var(--u) * -6) 0 0 calc(var(--u) * -6); padding: 0; border: 0; border-radius: 50%; background: rgba(255, 250, 243, .96); box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgba(80, 110, 140, .35); cursor: pointer; font: inherit; }
.map-slot.free { background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 calc(var(--u) * .6) #fff, 0 0 0 calc(var(--u) * 1.4) rgba(239, 143, 182, .7); animation: slotPulse 1.8s ease-in-out infinite; }
@keyframes slotPulse { 0%, 100% { box-shadow: 0 0 0 calc(var(--u) * .6) #fff, 0 0 0 calc(var(--u) * 1.2) rgba(239, 143, 182, .7); } 50% { box-shadow: 0 0 0 calc(var(--u) * .6) #fff, 0 0 0 calc(var(--u) * 2.4) rgba(239, 143, 182, .25); } }
body.no-motion .map-slot.free { animation: none; }
.map-slot .ms-plus { font-family: var(--font-display); font-size: calc(var(--u) * 7); line-height: calc(var(--u) * 12); color: #ef8fb6; }
.map-slot.locked { background: rgba(230, 222, 226, .9); }
.map-slot .ms-lock { position: absolute; inset: 22%; background: url('assets/ui/icono-candado.png') center / contain no-repeat; opacity: .85; }
.map-slot.locked small { position: absolute; left: 50%; top: 100%; transform: translate(-50%, calc(var(--u) * 3.4)); font-size: calc(var(--u) * 2.4); color: #8a7a80; white-space: nowrap; background: rgba(255, 255, 255, .85); border-radius: 999px; padding: 0 calc(var(--u) * 1); }
.map-slot .ms-name { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, calc(var(--u) * -.4)); padding: 0 calc(var(--u) * 1.4); border-radius: 999px; background: #fffaf3; font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 2.8); color: #c45d8c; white-space: nowrap; box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .8) rgba(150, 80, 110, .2); }
.map-slot.away .ms-t { transform: translate(-50%, calc(var(--u) * .4)); }
.map-slot > img.pop { animation: rowIn .45s cubic-bezier(.3, 1.4, .5, 1); }
.map-hint { margin: calc(var(--u) * 2) 0 0; font-size: calc(var(--u) * 3.1); color: #a98b88; line-height: 1.35; }
/* 1.7.0: mapa más grande; los lugares y sus nombres no se recortan */
.map-wrap { aspect-ratio: 1.6 / 1; overflow: visible; background: none; box-shadow: none; margin: calc(var(--u) * 3) 0 calc(var(--u) * 1); }
.map-clip { position: absolute; inset: 0; border-radius: calc(var(--u) * 2.4); overflow: hidden; background: linear-gradient(#cdeef5, #a9dcea); box-shadow: inset 0 0 0 calc(var(--u) * .6) #f6cdd9; }
.map-art { position: absolute; left: 0; top: 0; width: 125%; height: 100%; margin: 0; object-fit: fill; aspect-ratio: auto; }
.map-slot { width: calc(var(--u) * 11); height: calc(var(--u) * 11); margin: calc(var(--u) * -5.5) 0 0 calc(var(--u) * -5.5); z-index: 2; }
.map-slot .ms-name { font-size: calc(var(--u) * 2.6); }
.map-slot.below .ms-name { bottom: auto; top: 100%; transform: translate(-50%, calc(var(--u) * .6)); }
.map-slot.locked small { transform: translate(-50%, calc(var(--u) * .5)); top: 100%; font-size: calc(var(--u) * 2.3); }
.map-slot.locked.below small { transform: translate(-50%, calc(var(--u) * 4.2)); }
.map-slot.locked .ms-name { opacity: .8; }
.map-slot .ms-plus { line-height: calc(var(--u) * 11); }
.modal-box.map-pop { max-width: calc(var(--u) * 98); padding-left: calc(var(--u) * 2); padding-right: calc(var(--u) * 2); }
.map-pop .map-wrap { margin: calc(var(--u) * 3) calc(var(--u) * -.5) calc(var(--u) * 1.5); }
.map-slot.locked { width: calc(var(--u) * 9); height: calc(var(--u) * 9); margin: calc(var(--u) * -4.5) 0 0 calc(var(--u) * -4.5); }
.map-slot.below .ms-t { top: auto; bottom: 100%; transform: translate(-50%, calc(var(--u) * -.4)) !important; }
/* 1.8.0: pedido estrella: aro dorado parejo alrededor de las frutas (antes una línea fina por dentro que no calzaba)
   y la píldora de premio sin el borde blanco */
#orderStrip .order.star .order-items { box-shadow: 0 0 0 calc(var(--u) * 1.1) #ffd45c, 0 0 calc(var(--u) * 2.2) rgba(255, 190, 60, .75); border-radius: calc(var(--u) * 3.4); }
#orderStrip .order.star .order-pay.star-pay { box-shadow: 0 0 0 calc(var(--u) * .45) #f2b53c, 0 0 calc(var(--u) * 1.4) rgba(255, 196, 60, .8); }
/* 1.8.0: pedido nuevo sin el aro blanco (parecía una máscara); queda el salto y las chispas */
#orderStrip .order.order-new::after { display: none; }
.mp-cost b i { font-style: normal; font-size: .72em; opacity: .75; }
/* 1.8.0: panel de información de la grilla: letra un poco menor para que quepa en todos los idiomas */
.gi-tx b { font-size: calc(var(--u) * 4.1); }
.gi-tx p { font-size: calc(var(--u) * 3.35); line-height: 1.2; }
.gi-tx .gi-hint { font-size: calc(var(--u) * 3.2); }
body[data-lang="de"] .gi-tx b, body[data-lang="pl"] .gi-tx b, body[data-lang="fr"] .gi-tx b { font-size: calc(var(--u) * 3.7); }
body[data-lang="de"] .gi-tx p, body[data-lang="pl"] .gi-tx p, body[data-lang="fr"] .gi-tx p { font-size: calc(var(--u) * 3.1); }
/* 1.8.0: puerta de la grilla (volver a la isla) más grande, como los botones de la isla */
.door-btn { width: calc(var(--u) * 14); height: calc(var(--u) * 17.5); }
/* 1.8.0: botón del taller del dock a la altura de los demás */
.cq-dock #btnGrid { width: calc(var(--u) * 15); height: calc(var(--u) * 15); margin-bottom: calc(var(--u) * 3.2); align-self: center; }
/* 1.8.0: burbujas de lazo (esquina de arriba, bajo el HUD) y etiqueta chica de postal nueva sobre el Álbum */
.bond-bubbles { position: absolute; z-index: 35; left: calc(var(--u) * 3); top: calc(env(safe-area-inset-top, 0px) + var(--u) * 33); display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); }
.bond-bubbles[hidden] { display: none; }
.bond-bub { position: relative; width: calc(var(--u) * 12); height: calc(var(--u) * 12); padding: 0; border: 0; border-radius: 50%; background: #fffaf3; box-shadow: 0 0 0 calc(var(--u) * .6) #f7a6c5, 0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgba(150, 80, 110, .3); cursor: pointer; animation: bubIn .5s cubic-bezier(.3, 1.5, .5, 1), bubBob 2.6s ease-in-out .5s infinite; }
.bond-bub img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.bond-bub .bb-h { position: absolute; right: calc(var(--u) * -1.4); bottom: calc(var(--u) * -1); width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); background: url('assets/ui/atlas-hub-7.png') center / contain no-repeat; color: #fff; font-style: normal; font-family: var(--font-display); font-size: calc(var(--u) * 2.6); line-height: calc(var(--u) * 5.4); text-align: center; }
.bond-bub.best { box-shadow: 0 0 0 calc(var(--u) * .6) #ffd45c, 0 0 calc(var(--u) * 2.4) rgba(255, 210, 90, .9); }
.bond-more { align-self: center; font-family: var(--font-display); font-size: calc(var(--u) * 3); color: #c45d8c; }
@keyframes bubIn { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes bubBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -.8)); } }
body.no-motion .bond-bub { animation: none; }
.post-chip { position: absolute; z-index: 36; display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .6) calc(var(--u) * 2) calc(var(--u) * .6) calc(var(--u) * .8); border: 0; border-radius: 999px; background: #fffaf3; box-shadow: 0 0 0 calc(var(--u) * .45) #f7a6c5, 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(150, 80, 110, .25); font: inherit; font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 3); color: #c45d8c; white-space: nowrap; cursor: pointer; transform: translate(-50%, -100%) scale(.4); opacity: 0; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), opacity .2s; }
.post-chip.on { transform: translate(-50%, -100%) scale(1); opacity: 1; }
.post-chip img { width: calc(var(--u) * 5); height: calc(var(--u) * 5); object-fit: contain; }
#btnWorld.has-new > img { animation: albumNudge 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes albumNudge { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(7deg); } 95% { transform: rotate(-3deg); } }
body.no-motion #btnWorld.has-new > img { animation: none; }
.find-btn.nudge { animation: findNudge .9s ease 2; }
@keyframes findNudge { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25); } }
/* 1.8.0: niebla de los bordes de la isla (se retira con la historia) y luces misteriosas */
.mist-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 2s ease; }
.mist-layer[hidden] { display: none; }
.mist-layer i { position: absolute; inset: -20%; background:
  radial-gradient(ellipse 45% 30% at 0% 20%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
  radial-gradient(ellipse 40% 26% at 100% 35%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%),
  radial-gradient(ellipse 55% 24% at 15% 100%, rgba(250, 248, 255, .95), rgba(255, 255, 255, 0) 70%),
  radial-gradient(ellipse 50% 22% at 95% 95%, rgba(250, 248, 255, .9), rgba(255, 255, 255, 0) 70%); animation: mistDrift 38s ease-in-out infinite alternate; }
.mist-layer .mist-b { opacity: .6; animation-duration: 53s; animation-direction: alternate-reverse; transform: scale(1.1); }
@keyframes mistDrift { from { transform: translate(-3%, 0); } to { transform: translate(3%, -2%); } }
body.no-motion .mist-layer i { animation: none; }
.wisp { position: absolute; z-index: 40; width: calc(var(--u) * 11); height: calc(var(--u) * 11); margin: calc(var(--u) * -5.5) 0 0 calc(var(--u) * -5.5); padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 252, 220, .95) 0%, rgba(255, 236, 150, .55) 35%, rgba(255, 220, 120, 0) 70%); cursor: pointer; transition: opacity .5s; }
.wisp-core { position: absolute; inset: 38%; border-radius: 50%; background: #fffdf0; box-shadow: 0 0 calc(var(--u) * 2) calc(var(--u) * .8) rgba(255, 240, 170, .95); animation: wispPulse 1.4s ease-in-out infinite; }
.wisp.out { opacity: 0 !important; }
@keyframes wispPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.wisp-say { position: absolute; z-index: 45; left: 50%; bottom: calc(var(--u) * 30 + env(safe-area-inset-bottom, 0px)); width: calc(var(--u) * 84); transform: translate(-50%, calc(var(--u) * 3)); opacity: 0; transition: opacity .6s, transform .6s; pointer-events: none; text-align: center; }
.wisp-say.on { opacity: 1; transform: translate(-50%, 0); }
.wisp-say span { position: relative; display: inline-block; padding: calc(var(--u) * 2) calc(var(--u) * 4); border-radius: calc(var(--u) * 4); background: rgba(60, 52, 96, .72); color: #fff8e6; font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 3.6); line-height: 1.35; box-shadow: 0 0 calc(var(--u) * 4) rgba(255, 236, 160, .45); }
/* ================= 1.8.0: viajes ================= */
.trips-btn { position: absolute; z-index: 35; left: calc(var(--u) * 3); top: calc(env(safe-area-inset-top, 0px) + var(--u) * 19); width: calc(var(--u) * 12.5); height: calc(var(--u) * 12.5); padding: 0; border: 0; border-radius: 50%; background: rgba(255, 252, 244, .95); box-shadow: 0 calc(var(--u) * .6) 0 rgba(92, 27, 47, .18); cursor: pointer; }
.trips-btn[hidden] { display: none; }
.trips-btn > img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.trips-btn .tb-n { position: absolute; right: calc(var(--u) * -1); top: calc(var(--u) * -1); min-width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); padding: 0 calc(var(--u) * .8); box-sizing: border-box; border-radius: 999px; background: #6fbcd6; color: #fff; font-family: var(--font-display); font-size: calc(var(--u) * 2.8); line-height: calc(var(--u) * 4.6); box-shadow: 0 0 0 calc(var(--u) * .45) #fff; }
.trips-btn .tb-n[hidden] { display: none; }
.trips-btn .tb-t { position: absolute; left: 50%; top: 100%; transform: translate(-50%, calc(var(--u) * .4)); padding: 0 calc(var(--u) * 1.2); border-radius: 999px; background: rgba(255, 250, 243, .95); font-family: var(--font-display); font-size: calc(var(--u) * 2.7); color: #6a8fa0; white-space: nowrap; }
.trips-btn .tb-t:empty { display: none; }
.trips-btn .tb-gift { position: absolute; right: calc(var(--u) * -2); bottom: calc(var(--u) * -1.4); width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); display: none; }
.trips-btn .tb-gift img { width: 100%; height: 100%; object-fit: contain; }
.trips-btn.ready { animation: tripReady 1.2s ease-in-out infinite; box-shadow: 0 0 0 calc(var(--u) * .6) #ffd864, 0 0 calc(var(--u) * 2.4) rgba(255, 210, 90, .8); }
.trips-btn.ready .tb-gift { display: block; }
.trips-btn.nudge { animation: findNudge .9s ease 2; }
.bond-bubbles { top: calc(env(safe-area-inset-top, 0px) + var(--u) * 38); }
.modal-box.trips-pop { max-width: calc(var(--u) * 98); padding-left: calc(var(--u) * 2.4); padding-right: calc(var(--u) * 2.4); padding-top: calc(var(--u) * 9); }
.trips-pop .tp-sec { margin: 0 0 calc(var(--u) * 2.4); }
.trips-pop .tp-h { display: flex; align-items: center; gap: calc(var(--u) * 1.2); margin: 0 0 calc(var(--u) * 1.2); text-align: left; }
.trips-pop .tp-h img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); object-fit: contain; }
.trips-pop .tp-h b { font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 4); color: #c45d8c; white-space: nowrap; }
.trips-pop .tp-h small { font-size: calc(var(--u) * 2.7); color: #b49aa0; line-height: 1.2; }
.trips-pop .map-wrap { margin: calc(var(--u) * 2.4) 0 0; }
.trips-pop .tp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.6); }
.trips-pop .tp-row.strolls { display: flex; justify-content: center; gap: calc(var(--u) * 5); }
.trips-pop .tp-b { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); padding: calc(var(--u) * 1) calc(var(--u) * .6) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 2.4); background: #fff7f3; box-shadow: inset 0 0 0 calc(var(--u) * .45) #f4d6d6; }
.trips-pop .tp-b.off { opacity: .6; }
.trips-pop .tp-art { width: calc(var(--u) * 13); height: calc(var(--u) * 10); object-fit: contain; }
.trips-pop .tp-b small { font-size: calc(var(--u) * 2.6); color: #8a6470; text-align: center; line-height: 1.1; }
.trips-pop .tp-lock { min-height: calc(var(--u) * 10); display: flex; align-items: center; font-size: calc(var(--u) * 2.4); color: #a8949a; text-align: center; line-height: 1.15; }
.tp-slot { position: relative; width: calc(var(--u) * 11); height: calc(var(--u) * 11); padding: 0; border: 0; border-radius: 50%; background: rgba(255, 250, 243, .96); box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(150, 80, 110, .25); cursor: pointer; font: inherit; }
.tp-slot.free { box-shadow: 0 0 0 calc(var(--u) * .6) #fff, 0 0 0 calc(var(--u) * 1.3) rgba(239, 143, 182, .7); animation: slotPulse 1.8s ease-in-out infinite; }
.tp-slot > img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.tp-slot .ms-plus { font-family: var(--font-display); font-size: calc(var(--u) * 7); line-height: calc(var(--u) * 11); color: #ef8fb6; }
.tp-slot.ready { animation: tripReady 1.2s ease-in-out infinite; }
.tp-slot.ready .tm-gift { display: block; }
.tp-slot.ready .tm-ring { background: #ffd864; }
.tp-slot .ms-t { position: absolute; left: 50%; top: 100%; transform: translate(-50%, calc(var(--u) * .3)); padding: 0 calc(var(--u) * 1); border-radius: 999px; background: rgba(255, 250, 243, .95); font-family: var(--font-display); font-size: calc(var(--u) * 2.5); color: #a0607e; white-space: nowrap; }
.trips-pop .tp-b .tp-slot { margin-bottom: calc(var(--u) * 2.4); }
.trip-pop .tr-head { gap: calc(var(--u) * 2.4); }
.trip-pop .tr-head span { display: flex; flex-direction: column; align-items: flex-start; }
.trip-pop .tr-head small { font-size: calc(var(--u) * 2.8); color: #b48d93; }
.trip-pop .tr-st { position: absolute; left: 50%; bottom: calc(var(--u) * -1.6); transform: translateX(-50%); font-style: normal; font-size: calc(var(--u) * 2.4); color: #e8a33c; white-space: nowrap; }
.trip-pop .tr-durs.n2 { grid-template-columns: repeat(2, 1fr); }
.bond-ficha .bf-trait { margin: calc(var(--u) * .8) 0 0; font-size: calc(var(--u) * 3); color: #8a6470; }
.bond-ficha .bf-trait b { color: #e8a33c; font-weight: 400; }
/* 1.8.0: botones de la bolsa vacía con aire y del mismo ancho */
.gi-rc { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8); flex: none; }
.gi-rc > span:first-child { font-size: calc(var(--u) * 2.6); padding: 0 calc(var(--u) * 1.4); white-space: nowrap; }
.gi-rc .rc-row { display: flex; gap: calc(var(--u) * 1.2); }
.gi-rc .pill-btn.gem, .gi-rc .pill-btn.free { --bh: calc(var(--u) * 10.4); min-width: calc(var(--u) * 15); padding: 0 calc(var(--u) * 2.6) calc(var(--u) * 1.1); font-size: calc(var(--u) * 3.6); flex-direction: column; gap: 0; line-height: 1; }
.gi-rc .pill-btn small { font-family: var(--font-body); font-size: calc(var(--u) * 2.5); font-weight: 400; }
.gi-rc .pill-btn img { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); }
.gi-rc .pill-btn[disabled] { filter: grayscale(.7); opacity: .65; }
/* 1.8.0: niebla más visible (las manchas quedaban fuera de la pantalla) y luz más brillante */
.mist-layer i { inset: -4%; background:
  radial-gradient(ellipse 60% 34% at 0% 12%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%),
  radial-gradient(ellipse 55% 30% at 100% 30%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 72%),
  radial-gradient(ellipse 70% 26% at 10% 96%, rgba(248, 246, 255, .9), rgba(255, 255, 255, 0) 72%),
  radial-gradient(ellipse 60% 24% at 100% 90%, rgba(248, 246, 255, .9), rgba(255, 255, 255, 0) 72%); }
.wisp { width: calc(var(--u) * 16); height: calc(var(--u) * 16); margin: calc(var(--u) * -8) 0 0 calc(var(--u) * -8); background: radial-gradient(circle, rgba(255, 253, 225, 1) 0%, rgba(255, 238, 160, .75) 30%, rgba(255, 220, 120, 0) 70%); }
.wisp-core { inset: 40%; box-shadow: 0 0 calc(var(--u) * 3) calc(var(--u) * 1.4) rgba(255, 244, 180, 1); }
.grid-info:has(.gi-rc) .gi-tx b { display: block; font-size: calc(var(--u) * 3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
/* 1.8.1: recompensas que aparecen al centro antes de volar a su contador */
.rew-pop { position: absolute; z-index: 91; width: calc(var(--u) * 17); height: calc(var(--u) * 17); margin: calc(var(--u) * -8.5) 0 0 calc(var(--u) * -8.5); transform: scale(0); opacity: 0; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; pointer-events: none; }
.rew-pop.on { transform: scale(1); opacity: 1; animation: rewBob 1.2s ease-in-out .35s infinite; }
.rew-pop.go { opacity: 0; transform: scale(.6); transition: transform .25s, opacity .25s; animation: none; }
.rew-pop img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * .8) calc(var(--u) * 1.2) rgba(92, 27, 47, .3)); }
.rew-pop b { position: absolute; left: 50%; top: 100%; transform: translate(-50%, calc(var(--u) * -1)); padding: 0 calc(var(--u) * 1.6); border-radius: 999px; background: #fffaf3; color: #c45d8c; font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 4.2); box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1) rgba(150, 80, 110, .25); white-space: nowrap; }
@keyframes rewBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--u) * -1.2); } }
.cq-dock .dock-btn.off { visibility: hidden; pointer-events: none; }
/* 1.8.1: selector del álbum con aspecto de botón (alzado si no está elegido, hundido si está elegido) y candado */
.album .alb-mode button { background: #fffaf6; box-shadow: inset 0 0 0 calc(var(--u) * .5) #f3cfdc, 0 calc(var(--u) * .9) 0 #f0c2d3; transform: translateY(calc(var(--u) * -.4)); transition: transform .1s, box-shadow .1s; }
.album .alb-mode button span { color: #c45d8c; }
.album .alb-mode button img { filter: none; }
.album .alb-mode button.on { background: #ffd9e8; box-shadow: inset 0 calc(var(--u) * .7) calc(var(--u) * 1.2) rgba(196, 93, 140, .25), inset 0 0 0 calc(var(--u) * .5) #ef8fb6; transform: translateY(calc(var(--u) * .4)); }
.album .alb-mode button.post.on { background: #ffe9c2; box-shadow: inset 0 calc(var(--u) * .7) calc(var(--u) * 1.2) rgba(196, 116, 31, .25), inset 0 0 0 calc(var(--u) * .5) #f1c27a; }
.album .alb-mode button.locked { background: #f1e9ea; box-shadow: inset 0 0 0 calc(var(--u) * .5) #e3d6d8; transform: none; cursor: default; }
.album .alb-mode button.locked span, .album .alb-mode button.locked img { opacity: .5; filter: grayscale(1); }
.album .alb-lock { display: inline-block; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); background: url('assets/ui/icono-candado.png') center / contain no-repeat; }
.album .alb-tab { background: #fffaf6; box-shadow: inset 0 0 0 calc(var(--u) * .45) #f3d6df, 0 calc(var(--u) * .7) 0 #f0c9d6; transform: translateY(calc(var(--u) * -.3)); }
.album .alb-tab.on { background: #ffd9e8; box-shadow: inset 0 calc(var(--u) * .6) calc(var(--u) * 1) rgba(196, 93, 140, .25), inset 0 0 0 calc(var(--u) * .45) #ef8fb6; transform: translateY(calc(var(--u) * .3)); }
.album .alb-tab img { filter: none; }
.album .alb-tab span { color: #c08a9f; }
.garden-gems { display: flex; align-items: center; gap: calc(var(--u) * .8); width: max-content; margin: calc(var(--u) * -2) 0 calc(var(--u) * -1) auto; padding: calc(var(--u) * .4) calc(var(--u) * 2) calc(var(--u) * .4) calc(var(--u) * .8); border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 calc(var(--u) * .5) #f3b6cf; }
.garden-gems img { width: calc(var(--u) * 5); height: calc(var(--u) * 5); object-fit: contain; }
.garden-gems b { font-family: 'Fredoka One', var(--font-display); font-weight: 400; font-size: calc(var(--u) * 3.6); color: #c0408a; }
.show-glow { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 240, 190, .5), rgba(255, 240, 190, 0) 70%); animation: showGlow 1.6s ease-in-out infinite alternate; transition: opacity .9s; }
.show-glow.out { opacity: 0; }
@keyframes showGlow { from { opacity: .6; } to { opacity: 1; } }
/* 1.8.1 (pedido de Nico): el botón del taller quedaba bajo (la imagen se salía 12 px por abajo del botón) */
.cq-dock #btnGrid { width: calc(var(--u) * 15); height: calc(var(--u) * 15); margin-bottom: calc(var(--u) * 4.4); }
.cq-dock #btnGrid > img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.cq-dock #btnGrid { align-self: flex-end; margin-bottom: 0; position: relative; top: calc(var(--u) * -4.2); }
#btnGrid.dock-btn { transform: translateY(calc(var(--u) * -2.2)) !important; }
#btnGrid.dock-btn:active { transform: translateY(calc(var(--u) * -2.2)) scale(.955) !important; }
#btnGrid.dock-btn > img { width: calc(var(--u) * 15) !important; height: calc(var(--u) * 15) !important; object-fit: contain; }
/* 1.8.1: pestaña «i» menos afuera (se ve el círculo azul y un poco de borde) y salida suave */
.cute-info { right: calc(var(--u) * -4.4); transition: transform .4s ease, opacity .4s ease; }
.cute-info.out { transform: translateX(calc(var(--u) * 6)); opacity: 0; }
/* 1.8.1: el botón «¡Pégala!» es más bajo: sus puntas se calculan con su propio alto */
.album .stk .stk-claim { --bh: calc(var(--u) * 7.4); height: var(--bh); }
/* 1.8.1: botones de la bolsa vacía más chicos (el «Completa» se salía) */
.gi-rc .pill-btn.gem, .gi-rc .pill-btn.free { --bh: calc(var(--u) * 9.2); height: var(--bh); min-width: calc(var(--u) * 12.6); padding: 0 calc(var(--u) * 1.8) calc(var(--u) * .9); font-size: calc(var(--u) * 3.2); }
.gi-rc .pill-btn small { font-size: calc(var(--u) * 2.2); }
.gi-rc .rc-row { gap: calc(var(--u) * .8); }
.grid-info:has(.gi-rc) { padding-right: calc(var(--u) * 1.4); }
/* 1.8.1: pedido estrella: el contenedor de las frutas en dorado (el mismo dibujo teñido) en vez de un aro encima,
   y la píldora del premio más limpia */
#orderStrip .order.star .order-items { box-shadow: none; isolation: isolate; background-image: none !important; }
#orderStrip .order.star .order-items::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('assets/ui/atlas-grilla-13.png') center / 100% 100% no-repeat; filter: sepia(1) saturate(3.2) hue-rotate(-12deg) brightness(1.06) drop-shadow(0 0 calc(var(--u) * 1.4) rgba(255, 200, 70, .85)); }
#orderStrip .order.star .order-pay.star-pay { background: linear-gradient(180deg, #fff6d2, #ffe08a); box-shadow: 0 0 0 calc(var(--u) * .4) #f0b43a, 0 calc(var(--u) * .4) 0 rgba(190, 120, 30, .3); }
#orderStrip .order.star .order-pay .pay-gem { margin-left: calc(var(--u) * 1.1); margin-right: calc(var(--u) * .2); }
/* 1.8.1: el pedido nuevo entra bajando un poco y sin crecer de más (se cortaba abajo dentro de la tira) */
@keyframes orderNew { 0%, 25% { transform: translateY(calc(var(--u) * -6)); opacity: 0; } 60% { transform: translateY(calc(var(--u) * .8)); opacity: 1; } 80% { transform: translateY(calc(var(--u) * -.4)); } 100% { transform: none; opacity: 1; } }
/* 1.8.1: la niebla sólo en los bordes; el centro (corral y edificios) queda limpio */
.mist-layer { -webkit-mask-image: radial-gradient(ellipse 62% 56% at 50% 52%, transparent 55%, #000 100%); mask-image: radial-gradient(ellipse 62% 56% at 50% 52%, transparent 55%, #000 100%); }
#orderStrip .order.star .order-items::before { background-image: url('assets/ui/atlas-grilla-4.png'); }
#orderStrip .order.star.ready .order-items::before { background-image: url('assets/ui/atlas-grilla-13.png'); filter: sepia(1) saturate(3.6) hue-rotate(-14deg) brightness(1.12) drop-shadow(0 0 calc(var(--u) * 1.8) rgba(255, 210, 80, .95)); }
.show-star { position: absolute; top: -40px; z-index: 92; width: calc(var(--u) * 7); height: calc(var(--u) * 7); object-fit: contain; pointer-events: none; animation: showStar 2s ease-in forwards; filter: drop-shadow(0 0 calc(var(--u) * 1) rgba(255, 230, 140, .9)); }
@keyframes showStar { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), 110vh) rotate(540deg); opacity: .6; } }

/* 1.8.2 · el contador que recibe recursos crece un poco (gana a .res.bump y a otras animaciones de los botones) */
.hud-bump, .res.hud-bump, .dock-btn.hud-bump, #btnNest.hud-bump { animation: hud-bump .42s cubic-bezier(.3, 1.6, .5, 1) !important; }
@keyframes hud-bump { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* 1.8.2 (pedido de Nico): textos más grandes para leer en el teléfono: ventanas de explicación y pegatinas */
.modal-box p { font-size: calc(var(--u) * 4.3); line-height: 1.42; }
.celebrate .cel-text { font-size: calc(var(--u) * 4.4); max-width: calc(var(--u) * 70); }
.info-pop.celebrate p { font-size: calc(var(--u) * 5.1); line-height: 1.38; color: #86685f; }
.item-meta { font-size: calc(var(--u) * 4); }
.alb-hint { font-size: calc(var(--u) * 3.9); }
.album .alb-grid { grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 2.4) calc(var(--u) * 2); }
.album .alb-grid.posts { display: block; }
.stk-art { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.stk b { font-size: calc(var(--u) * 4.2); }
.stk small { font-size: calc(var(--u) * 3.6); }
.album .stk .stk-claim { font-size: calc(var(--u) * 3.9); min-width: calc(var(--u) * 22); --bh: calc(var(--u) * 8.4); height: var(--bh); }
.album .stk .stk-claim.long { font-size: calc(var(--u) * 3.3); }
.album .alb-mode span { font-size: calc(var(--u) * 4.4); }

/* 1.8.3 · gema de la postal nueva: flota en la esquina mientras la miras; al cerrar vuela al contador */
.post-gem { position: absolute; right: calc(var(--u) * -2); top: calc(var(--u) * -3); z-index: 4; display: flex; align-items: center; gap: calc(var(--u) * .6); padding: calc(var(--u) * .8) calc(var(--u) * 2) calc(var(--u) * .8) calc(var(--u) * 1); border-radius: 999px; background: #fffaf3; box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgba(150, 80, 110, .3); pointer-events: none; transform: scale(0); }
.post-gem.on { animation: postGemIn .45s cubic-bezier(.3, 1.6, .5, 1) forwards, rewBob 1.4s ease-in-out .45s infinite; }
.post-gem img { width: calc(var(--u) * 7); height: calc(var(--u) * 7); object-fit: contain; }
.post-gem b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 4.4); color: #c45d8c; }
@keyframes postGemIn { from { transform: scale(0); } to { transform: scale(1); } }
/* 1.8.3 · la misión del edificio lista entra celebrando, después de que vuelan las estrellas */
#orderStrip .order.main.main-in { animation: mainIn .6s cubic-bezier(.3, 1.7, .5, 1) .8s both; }
@keyframes mainIn { 0% { transform: scale(0) rotate(-8deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
/* 1.8.3 · «¡La casa creció!» un 50 % más grande */
.float.note-float.build-up { font-size: calc(var(--u) * 5.4); padding: calc(var(--u) * .8) calc(var(--u) * 3.4); border-width: calc(var(--u) * .5); white-space: nowrap; }
/* 1.8.3 · jardín: gemas bien visibles arriba y fanfarria al ampliar la población */
.fx-layer.over-modal { z-index: 70; }
.garden .garden-gems { margin: 0 0 calc(var(--u) * 2) auto; padding: calc(var(--u) * .8) calc(var(--u) * 3) calc(var(--u) * .8) calc(var(--u) * 1.2); gap: calc(var(--u) * 1.2); background: #fff4fa; border: calc(var(--u) * .45) solid #f4b8d2; box-shadow: 0 calc(var(--u) * .5) 0 #f1c1d6; }
.garden .garden-gems img { width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); }
.garden .garden-gems b { font-size: calc(var(--u) * 5.6); line-height: 1; }
.garden-top.gt-boom { animation: gtBoom .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes gtBoom { 0% { transform: scale(1); } 35% { transform: scale(1.28) rotate(-3deg); } 70% { transform: scale(.96) rotate(1deg); } 100% { transform: scale(1); } }
.float.big-plus { font-size: calc(var(--u) * 8); color: #ffe07a; -webkit-text-stroke: calc(var(--u) * .7) #b5651d; animation-duration: 1.4s; }
/* 1.8.3 (pedido de Nico): cintas de celebración un 20 % más grandes y con el texto centrado en la banda verde;
   explicaciones y pegatinas un poco más grandes todavía */
.celebrate .cel-ribbon { font-size: calc(var(--u) * 5.3); height: calc(var(--u) * 12.6); line-height: calc(var(--u) * 13.4); width: calc(var(--u) * 74); }
.celebrate .cel-ribbon.long { font-size: calc(var(--u) * 4.7); width: calc(var(--u) * 78); }
.celebrate .cel-ribbon.xlong { font-size: calc(var(--u) * 4.2); width: calc(var(--u) * 84); }
.celebrate .cel-ribbon.verde { line-height: calc(var(--u) * 13.8); padding: 0 calc(var(--u) * 8); }
.celebrate .cel-ribbon.rosa { width: calc(var(--u) * 62); }
.modal-box p { font-size: calc(var(--u) * 4.7); }
.celebrate .cel-text { font-size: calc(var(--u) * 4.9); max-width: calc(var(--u) * 74); }
.info-pop.celebrate p { font-size: calc(var(--u) * 5.8); }
.item-meta { font-size: calc(var(--u) * 4.4); }
.rew-title { font-size: calc(var(--u) * 5.2) !important; }
.stk b { font-size: calc(var(--u) * 4.6); }
.stk small { font-size: calc(var(--u) * 3.9); }
.alb-hint { font-size: calc(var(--u) * 4.2); }

/* 1.8.4 · la barra de carga la anima app.js cuadro a cuadro: sin transición que la frene */
#splash .boot-bar i { transition: none; }

/* 1.8.5 (pedido de Nico): el premio del pedido estrella con bordes suaves (era un rectángulo con esquinas) y la gema
   en su lugar, junto a su número (antes se encimaba sobre la estrella) */
#orderStrip .order.star .order-pay.star-pay { border-radius: 999px !important; overflow: visible; }
#orderStrip .order.star .order-pay .pay-gem { position: static; transform: none; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); margin: 0 calc(var(--u) * .2) 0 calc(var(--u) * 1.2); left: auto; top: auto; }

/* 1.8.5 (pedido de Nico): «Población aumentada» con Lily y sus cutelings más grande */
.pop-pop .cel-art { height: calc(var(--u) * 74); }
.pop-pop .cel-who.wide { height: calc(var(--u) * 70); max-width: 100%; object-fit: contain; }
/* 1.8.5 · tutorial de la pegatina: la lista no se desplaza y toda la tarjeta lista cobra */
.album .alb-grid.no-drag { overflow: hidden; touch-action: none; cursor: default; }
.stk.tap-claim { cursor: pointer; }
/* 1.8.5 · el punto del taller: arriba a la derecha del botón y rebotando para invitar a la grilla */
#btnGrid #gridDot { position: absolute; top: calc(var(--u) * .2); right: calc(var(--u) * .6); left: auto; bottom: auto; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); border: calc(var(--u) * .6) solid #fff; box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * .8) rgba(150, 40, 70, .4); animation: gridDotHop 1.6s ease-in-out infinite; z-index: 3; }
@keyframes gridDotHop { 0%, 55%, 100% { transform: translateY(0) scale(1); } 65% { transform: translateY(calc(var(--u) * -2.6)) scale(1.08, .94); } 75% { transform: translateY(0) scale(1.1, .9); } 85% { transform: translateY(calc(var(--u) * -1)) scale(1); } }
body.no-motion #btnGrid #gridDot { animation: none; }

/* ===================================================== 1.8.6 */
/* meneo suave: botones del álbum con algo por cobrar, postales por abrir, cutelings con lazo nuevo */
@keyframes softWig {
  0%, 64%, 100% { rotate: 0deg; scale: 1; }
  70% { rotate: -2.4deg; scale: 1.04; }
  76% { rotate: 2deg; scale: 1.04; }
  82% { rotate: -1.2deg; scale: 1.02; }
  88% { rotate: .6deg; scale: 1.01; }
}
.wig { animation: softWig 2.8s ease-in-out infinite; }
body.no-motion .wig { animation: none; }
.album .alb-tab.wig { animation-duration: 3.1s; }
.album .alb-mode button.post.wig { animation-delay: .5s; }
.post-tile .post-new.gem { display: flex; align-items: center; gap: calc(var(--u) * .4); top: calc(var(--u) * -1.8); right: calc(var(--u) * -1.2); padding: calc(var(--u) * .3) calc(var(--u) * 1.4) calc(var(--u) * .3) calc(var(--u) * .7); background: linear-gradient(#ff8fb5, #ef5f8f); font-size: calc(var(--u) * 3.2); line-height: 1; z-index: 2; }
.post-tile .post-new.gem img { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); aspect-ratio: auto; opacity: 1; background: none; border-radius: 0; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * .2) 0 rgba(120, 30, 70, .25)); }
.post-tile.unread { box-shadow: 0 0 0 calc(var(--u) * .7) #ffd0e1, 0 calc(var(--u) * .8) calc(var(--u) * 1.8) rgba(170, 100, 120, .22); }
/* jardín: cuteling con lazo nuevo por mirar */
.cuteario-cell.bond-new { position: relative; background: linear-gradient(#fff4f8, #ffe1ec); box-shadow: 0 0 0 calc(var(--u) * .7) #ffb3cf, 0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgba(220, 100, 150, .28); }
.cuteario-cell .bond-gem { position: absolute; top: calc(var(--u) * -1.4); right: calc(var(--u) * -1); display: flex; align-items: center; gap: calc(var(--u) * .3); padding: calc(var(--u) * .3) calc(var(--u) * 1.2) calc(var(--u) * .3) calc(var(--u) * .6); border-radius: 999px; background: linear-gradient(#ff8fb5, #ef5f8f); color: #fff; font-style: normal; font-family: var(--font-display); font-size: calc(var(--u) * 3); line-height: 1; box-shadow: 0 0 0 calc(var(--u) * .5) #fff; z-index: 2; }
.cuteario-cell .bond-gem img { width: calc(var(--u) * 4) !important; height: calc(var(--u) * 4) !important; object-fit: contain; }
.bond-hearts.bh-new { animation: bhNew .9s ease-out; }
@keyframes bhNew { 0% { scale: 1; } 35% { scale: 1.3; } 100% { scale: 1; } }
#btnCutes.bond-wait img { animation: softWig 2.8s ease-in-out infinite; }
/* acariciar: nota (sin corazón) cuando ya recibió mimos */
.pet-note { position: absolute; z-index: 60; pointer-events: none; font-family: var(--font-display); font-size: calc(var(--u) * 5.4); color: #ff8fb5; text-shadow: 0 2px 0 #fff, 0 0 6px #fff; transform: translate(-50%, -50%); animation: petNote 1.1s ease-out forwards; }
@keyframes petNote { 0% { opacity: 0; translate: 0 6px; } 20% { opacity: 1; } 100% { opacity: 0; translate: 10px -38px; rotate: 14deg; } }
.bond-pet { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1); margin: calc(var(--u) * 1) 0 0; font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--u) * 3.3); color: #c45d8c; }
.bond-pet.wait { color: #a8939a; }
.bond-pet img { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); object-fit: contain; }
.bond-pet.wait img { filter: grayscale(.7) opacity(.6); }
/* taller: explicaciones cortas (no bloquean) y soltar fuera del tablero */
.grid-coach { position: absolute; inset: 0; z-index: 117; pointer-events: none; }
.grid-coach .tuto-card { pointer-events: auto; }
.grid-coach.out { opacity: 0; transition: opacity .25s; }
.grid-coach .tuto-hand.drag img { transform: rotate(-20deg); }
.bag.drop-hint { transform: scale(1.14); filter: drop-shadow(0 0 calc(var(--u) * 1.6) #ffe27a) brightness(1.08); transition: transform .12s, filter .12s; }
.order.drop-hint { scale: 1.08; filter: drop-shadow(0 0 calc(var(--u) * 1.4) #fff3a8); transition: scale .12s; }
.order.nudge-no { animation: orderNo .38s ease-in-out; }
@keyframes orderNo { 0%, 100% { translate: 0 0; } 25% { translate: calc(var(--u) * -1) 0; } 75% { translate: calc(var(--u) * 1) 0; } }

/* ===================================================== 1.8.7 */
/* jardín: la etiqueta «+1 gema» sobresale de la celda; la cuadrícula deja sitio arriba para que no se corte */
.garden .cuteario-grid { padding-top: calc(var(--u) * 2.6); scroll-padding-top: calc(var(--u) * 2.6); }   /* el imán del desplazamiento respeta ese espacio */
/* álbum: Pegatinas y Postales caben en su barra en todos los idiomas (antes «Postcards» se salía y cortaba el aviso) */
.album .alb-mode button { min-width: 0; padding: 0 calc(var(--u) * 1.4); gap: calc(var(--u) * .9); }
.album .alb-mode span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.album .alb-mode span.long { font-size: calc(var(--u) * 3.6); }
.album .alb-mode img { flex: none; }
.album .alb-mode small { flex: none; }
/* taller: energía al saco. La energía late y el saco vacío la pide, sin texto ni bloqueo */
@keyframes energyHint { 0%, 100% { scale: 1; filter: none; } 50% { scale: 1.12; filter: drop-shadow(0 0 calc(var(--u) * 1.4) #ffe27a) brightness(1.08); } }
#grid .tile.energy-hint { animation: energyHint .9s ease-in-out infinite; }
@keyframes energyWant { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 calc(var(--u) * 1.6) #ffe27a) brightness(1.06); } }
.bag.energy-want { animation: energyWant .9s ease-in-out infinite; }

/* ===================================================== 1.8.8 */
/* lupa: vuelve al encuadre de siempre; aparece sólo cuando la cámara se alejó */
.side-btn.zoom-home { position: absolute; z-index: 34; left: calc(var(--u) * 2.6); bottom: calc(var(--u) * 26 + env(safe-area-inset-bottom, 0px)); opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .25s, transform .25s cubic-bezier(.3,1.5,.5,1); }
.side-btn.zoom-home.show { opacity: 1; transform: scale(1); pointer-events: auto; }
.side-btn.zoom-home svg { width: 84%; height: 84%; }
body.cine .side-btn.zoom-home { display: none; }
/* diálogos: las líneas de en medio dicen «Toca para continuar» en el lugar del botón (que sólo sale en la última) */
.talk-layer.talk-btn .talk-tap { position: static; margin-top: calc(var(--u) * 6); height: calc(var(--u) * 10.6); display: flex; align-items: center; justify-content: center; color: #ffe1ee; font-size: calc(var(--u) * 4.4); animation: bob 1.6s ease-in-out infinite; }
.talk-layer .talk-tap[hidden], .talk-layer .talk-go[hidden] { display: none; }
body.no-motion .talk-layer .talk-tap { animation: none; }
/* ficha del corral: arriba y al centro (bajo el HUD), con su cruz debajo; también se cierra tocando afuera */
#cuteCard { left: 50%; right: auto; transform: translateX(-50%); width: min(calc(var(--u) * 86), calc(100% - var(--u) * 6)); box-sizing: border-box; top: calc(env(safe-area-inset-top, 0px) + var(--u) * 20); bottom: auto; z-index: 36; }
#cuteCard .cc-x { position: absolute; left: 50%; bottom: calc(var(--u) * -12); transform: translateX(-50%); width: calc(var(--u) * 9); height: calc(var(--u) * 9); padding: 0; border: 0; background: url('assets/ui/atlas-popup-32.png') center / contain no-repeat; cursor: pointer; }
/* taller: la tarjeta de Lily va arriba (sobre el HUD y los pedidos), así no tapa la grilla */
.grid-coach .coach-card { top: calc(env(safe-area-inset-top, 0px) + var(--u) * 2); bottom: auto; }
.grid-coach .coach-card.nudge { animation: coachNudge .35s ease-in-out; }
@keyframes coachNudge { 0%, 100% { translate: 0 0; } 30% { translate: calc(var(--u) * -1) 0; } 70% { translate: calc(var(--u) * 1) 0; } }
.post-tile canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: calc(var(--u) * .9); }
canvas.post-big { width: 100%; height: auto; }
.post-load[hidden] { display: none; }

/* ===================================================== 1.8.9 */
/* cinta de título ensanchada: se corta en tres (puntas con sus puntitos y centro estirado), así las puntas no se deforman */
.modal-box .modal-title.wide, .modal-title.wide { background: none; border: 0 solid transparent;
  border-image: url('assets/ui/atlas-popup-27.png') 0 52 0 52 fill / 0 calc(var(--u) * 8.5) / 0 stretch; padding: 0 calc(var(--u) * 8.4); }

/* 1.8.9 (pedido de Nico): botones dibujados sin marquitas abajo. La sombra translúcida venía dentro de cada pieza y se
   pintaba dos veces donde se juntan (las rayitas claras). Ahora las piezas (v3) son sólo el cuerpo, que es opaco y puede
   encimarse sin que se note, y la sombra es una sola forma redondeada detrás. */
.modal-box .btn, .talk-go.btn, .tuto-card .tuto-go, .shop-buy:not(.ad):not(.lock), .pill-btn.gem, .pill-btn.free, .btn-mini { position: relative; isolation: isolate; background: none !important; }
.modal-box .btn.btn-soft, .btn-mini, .btn-mini.green { background: none !important; }
.modal-box .btn::before, .talk-go.btn::before, .tuto-card .tuto-go::before, .shop-buy:not(.ad):not(.lock)::before, .pill-btn.gem::before, .pill-btn.free::before, .btn-mini::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('assets/ui/btn-verde-l-v3.png') left center / auto 100% no-repeat, url('assets/ui/btn-verde-r-v3.png') right center / auto 100% no-repeat, url('assets/ui/btn-verde-m-v3.png') center / calc(100% - var(--cap) * 2 + 6px) 100% no-repeat; }
.modal-box .btn::after, .talk-go.btn::after, .tuto-card .tuto-go::after, .shop-buy:not(.ad):not(.lock)::after, .pill-btn.gem::after, .pill-btn.free::after, .btn-mini::after { content: ''; position: absolute; z-index: -2; left: .5%; right: .5%; top: 15%; bottom: 2.5%; border-radius: 999px; background: rgba(56, 177, 161, .565); pointer-events: none; }
.modal-box .btn.btn-soft::before, .btn-mini::before { background: url('assets/ui/btn-crema-l-v3.png') left center / auto 100% no-repeat, url('assets/ui/btn-crema-r-v3.png') right center / auto 100% no-repeat, url('assets/ui/btn-crema-m-v3.png') center / calc(100% - var(--cap) * 2 + 6px) 100% no-repeat; }
.modal-box .btn.btn-soft::after, .btn-mini::after { background: rgba(244, 205, 217, .565); }
.btn-mini.green::before { background: url('assets/ui/btn-verde-l-v3.png') left center / auto 100% no-repeat, url('assets/ui/btn-verde-r-v3.png') right center / auto 100% no-repeat, url('assets/ui/btn-verde-m-v3.png') center / calc(100% - var(--cap) * 2 + 6px) 100% no-repeat; }
.btn-mini.green::after { background: rgba(56, 177, 161, .565); }

/* ===================================================== 1.9.1 */
/* ventanas: el velo se va con un leve retraso; si se abre otra ventana enseguida, no parpadea */
.modal-veil { transition: opacity .12s ease .12s; }
.modal.closing { pointer-events: none; }
.modal.closing .modal-veil { opacity: 0; }
/* miniaturas de postales ya dibujadas: aparecen sin fundido al volver a la pestaña */
.post-tile img.instant, .post-tile canvas.instant { transition: none; }
.st-cred { position: relative; }
.st-cred .cred-gem { position: absolute; top: calc(var(--u) * -2.2); right: calc(var(--u) * -1.6); display: flex; align-items: center; gap: calc(var(--u) * .3); padding: calc(var(--u) * .3) calc(var(--u) * 1.1) calc(var(--u) * .3) calc(var(--u) * .5); border-radius: 999px; background: linear-gradient(#ff8fb5, #ef5f8f); color: #fff; font-style: normal; font-family: var(--font-display); font-size: calc(var(--u) * 2.8); line-height: 1; box-shadow: 0 0 0 calc(var(--u) * .45) #fff; animation: softWig 2.8s ease-in-out infinite; }
.st-cred .cred-gem img { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); object-fit: contain; }
body.no-motion .st-cred .cred-gem { animation: none; }

/* ===================================================== 1.9.2 */
/* ventanas: no se muestran hasta tener su escala final; entre ventanas, fundido suave */
.modal-box.loading { visibility: hidden; animation: none !important; }
.modal-box.swap-in { animation: swapIn .22s ease-out !important; }
@keyframes swapIn { from { opacity: 0; translate: 0 calc(var(--u) * 1.4); } to { opacity: 1; translate: 0 0; } }
.btn.busy[disabled], .btn-go.busy[disabled] { opacity: 1 !important; filter: none !important; }
/* caricia con premio: una viñeta con el corazón, como la de los huevos */
.pet-bubble { position: absolute; z-index: 3; transform: translate(-50%, -100%); display: flex; align-items: center; gap: calc(var(--u) * .5); padding: calc(var(--u) * .9) calc(var(--u) * 1.8); border-radius: 999px; background: #fff; box-shadow: 0 calc(var(--u) * .5) 0 rgba(214, 120, 160, .35); font-family: var(--font-display); font-size: calc(var(--u) * 4); color: #e5679b; animation: petBubIn .3s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.pet-bubble::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--u) * -1.4); width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: calc(var(--u) * .5); z-index: -1; }
.pet-bubble img { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); object-fit: contain; }
.pet-bubble.out { opacity: 0; transition: opacity .25s; }
.pet-bubble.out img { opacity: 0; }
@keyframes petBubIn { from { transform: translate(-50%, -80%) scale(.4); opacity: 0; } to { transform: translate(-50%, -100%) scale(1); opacity: 1; } }
/* pedido estrella: la estrella ya está en el premio; sin la de arriba a la izquierda */
#orderStrip .order.star .order-star { display: none !important; }
/* puerta al refugio: late si allá hay regalos esperando */
#btnIsla.has-gifts { animation: doorCall 1.6s ease-in-out infinite; filter: drop-shadow(0 0 calc(var(--u) * 1.6) rgba(255, 214, 120, .95)); }
@keyframes doorCall { 0%, 100% { scale: 1; } 45% { scale: 1.13; } 60% { scale: 1.05; } }
body.no-motion #btnIsla.has-gifts { animation: none; }
/* modo edición: la brocha late si llevas rato, para recordar cómo salir */
body.edit-on #btnEdit.remind { animation: doorCall 1.4s ease-in-out infinite; box-shadow: 0 0 0 calc(var(--u) * .8) #ffd45c, 0 calc(var(--u) * .6) 0 rgba(92, 27, 47, .18); }
body.no-motion #btnEdit.remind { animation: none; }
/* botón de buscar: aviso «¡aquí!» en vez de un regalo, y la luz que marca el lugar */
.find-btn .find-ic { width: 78%; height: 78%; }
.find-glow { position: absolute; z-index: 2; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255, 250, 214, .75) 0%, rgba(255, 233, 150, .45) 38%, rgba(255, 220, 120, 0) 70%);
  box-shadow: 0 0 0 calc(var(--u) * .7) rgba(255, 255, 255, .85) inset; animation: findGlow 1.5s ease-out forwards; mix-blend-mode: screen; }
@keyframes findGlow { 0% { opacity: 0; scale: .55; } 18% { opacity: 1; scale: 1.05; } 55% { opacity: .9; scale: .96; } 100% { opacity: 0; scale: 1.12; } }
body.no-motion .find-glow { animation-duration: .01s; opacity: .8; }
.cute-ficha .ficha-nav { z-index: 3; }
/* grilla: en pantallas anchas y bajas el tope de cada casilla se mide por el ancho del escenario (antes por una unidad
   ligada al alto, que la dejaba angosta); el alto disponible sigue mandando, así que hacia abajo no cambia */
#grid { --gcell: max(calc(var(--u) * 8), min(calc(var(--aw, 390px) * .137), calc((var(--uh) * 100 - var(--gtop) - var(--u) * 40 - env(safe-area-inset-bottom, 0px)) / 7.2))); }

/* ===================================================== 1.9.3 */
/* el botón de buscar ya no lleva la lupita en la esquina (se confundía con la lupa del zoom) */
.find-btn .find-arrow { display: none !important; }
/* postales: las flechas bajan al borde inferior de la postal (antes tapaban el texto del medio) */
.post-view .post-view-wrap .post-nav { top: auto; bottom: calc(var(--u) * -4.2); margin-top: 0; width: calc(var(--u) * 8.4); height: calc(var(--u) * 8.4); font-size: calc(var(--u) * 5.4); }
.post-view .post-view-wrap .post-nav.prev { left: calc(var(--u) * -1.6); }
.post-view .post-view-wrap .post-nav.next { right: calc(var(--u) * -1.6); }

/* ===================================================== 1.9.4 */
/* colección: sin imán de filas (con el dedo daba saltos) y desplazamiento suave y nativo */
.garden .cuteario-grid, .album .alb-grid { scroll-snap-type: none !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.garden .cuteario-cell { scroll-snap-align: none; }
/* saco recargado: salto con brillo */
.bag.refilled { animation: bagParty .8s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 0 calc(var(--u) * 2) rgba(255, 240, 150, .95)); }
@keyframes bagParty { 0% { scale: 1; } 30% { scale: 1.28; rotate: -6deg; } 55% { scale: .94; rotate: 4deg; } 80% { scale: 1.06; rotate: 0deg; } 100% { scale: 1; } }
.float.cel-float { font-size: calc(var(--u) * 5.2); color: #fff; text-shadow: 0 calc(var(--u) * .4) 0 #e5679b, 0 0 calc(var(--u) * 1) rgba(229, 103, 155, .6); }
body.no-motion .bag.refilled { animation: none; }
/* diálogos largos: se sube para releer, sin barra; un leve fundido arriba avisa que hay más */
.talk-layer .talk-stack { max-height: calc(var(--uh) * 64); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-y; }
.talk-layer .talk-stack::-webkit-scrollbar { display: none; width: 0; height: 0; }
.talk-layer .talk-stack.over { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--u) * 10)); mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--u) * 10)); }
/* la canica (juguete nivel 1) se veía grande en la grilla: 7 % más chica */
#gridBoard .tile img[src*="item-toy/toy-01."] { scale: .93; }

/* ===================================================== 1.9.5 */
/* el reloj de un saco vacío queda por encima del panel de información si alguna pantalla los junta */
#grid .bag-row { z-index: 33; }

/* ===================================================== 1.9.7 */
/* el escenario ocupa siempre todo el alto real de la pantalla (antes el alto venía en píxeles desde JS y, si el
   navegador agrandaba su área sin avisar, quedaba una barrita del fondo abajo). Centrado sólo a lo ancho. */
#app { top: 0; bottom: 0; height: auto; margin: 0 auto; }
@supports (height: 100dvh) { #app { height: 100dvh; bottom: auto; } }
/* y si aun así se asomara algo, el fondo de la página es del mismo tono del juego, no una franja clara */
html { background: #8fd3e2; }

/* ===================================================== 1.9.8 */
/* diálogos: espacio interno para que la hoja de la tarjeta y su sombra no se recorten al poder desplazarse */
.talk-layer .talk-stack { padding-top: calc(var(--u) * 4); padding-bottom: calc(var(--u) * 2); margin-top: calc(var(--u) * -4); margin-bottom: calc(var(--u) * -2); }
/* «mientras no estabas», liviano: fichas con número en una fila y el regalo del cuteling en una sola línea */
.away-pop .away-sum { flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1.6); margin: calc(var(--u) * 2) 0 calc(var(--u) * 1); }
.away-pop .away-gift.light { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); margin: calc(var(--u) * 2) 0 calc(var(--u) * 1); padding: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 3); background: rgba(255, 228, 238, .6); }
.away-pop .away-gift.light .away-who { width: calc(var(--u) * 12); height: calc(var(--u) * 12); object-fit: contain; }
.away-pop .away-head p { margin: 0; }
/* contadores del HUD: al llegar un recurso crecen el ícono y el número, no la píldora entera. La imagen de la
   píldora viene recortada justo en su borde y, al agrandarla, se veían sus cortes rectos («líneas guía») */
.hud .res.hud-bump:not(.star-badge), .hud .res.bump:not(.star-badge) { animation: none !important; }
.hud .res.hud-bump:not(.star-badge) > img, .hud .res.hud-bump:not(.star-badge) > b,
.hud .res.bump:not(.star-badge) > img, .hud .res.bump:not(.star-badge) > b { animation: resPop .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes resPop { 0% { scale: 1; } 45% { scale: 1.28; } 100% { scale: 1; } }
body.no-motion .hud .res > img, body.no-motion .hud .res > b { animation: none !important; }
.find-btn .find-ic { width: 88%; height: 88%; }   /* 1.9.8: corazón verde con «!», un poco más grande */

/* ===================================================== 1.10.2 */
/* al medir si una ventana cabe, los botones que respiran o se hunden no cuentan (antes la escala cambiaba al tocar) */
.modal-box.fitting .btn, .modal-box.fitting .btn-mini, .modal-box.fitting .pill-btn { scale: none !important; translate: none !important; transform: none !important; }
/* postales: las flechas van junto al contador («‹ 3/15 ›»), dentro de la ventana */
.post-tools .post-pager { display: flex; align-items: center; gap: calc(var(--u) * 1.4); flex: none; }
.post-tools .post-pager .post-count { min-width: calc(var(--u) * 9); text-align: center; }
.post-pg { flex: none; display: grid; place-items: center; width: calc(var(--u) * 7.6); height: calc(var(--u) * 7.6); padding: 0 0 calc(var(--u) * .5); border: 0; border-radius: 50%; background: #fff; color: #d2457e; font-family: var(--font-display); font-size: calc(var(--u) * 5.4); line-height: 1; box-shadow: 0 calc(var(--u) * .5) 0 rgba(214, 120, 160, .35), 0 0 0 calc(var(--u) * .35) #f6cdd9 inset; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.post-pg:active { transform: translateY(calc(var(--u) * .3)); box-shadow: 0 calc(var(--u) * .2) 0 rgba(214, 120, 160, .35), 0 0 0 calc(var(--u) * .35) #f6cdd9 inset; }
.post-tools .post-tbtns .btn-mini { min-width: calc(var(--u) * 17); padding-left: calc(var(--u) * 2.6); padding-right: calc(var(--u) * 2.6); }
.modal-box.fitting .post-pg { transform: none !important; }

/* ===================================================== 1.10.4 */
/* la canica: otro 7 % más chica (0,93 × 0,93) */
#gridBoard .tile img[src*="item-toy/toy-01."] { scale: .865; }
/* las flechas de las postales: su sombra ya no se corta abajo */
.post-tools { padding-bottom: calc(var(--u) * 1.6); }
/* «+10» del saco: verde intenso con borde blanco, legible sobre cualquier fondo */
.float.cel-float.bag-float { color: #2f9a4f; font-size: calc(var(--u) * 6); -webkit-text-stroke: calc(var(--u) * .7) #fff; paint-order: stroke fill; text-shadow: 0 calc(var(--u) * .5) 0 rgba(31, 100, 55, .45); }
/* pedido: lo entregado conserva su ticket y salta al llegar */
.order-items figure.got { opacity: 1; }
.order-items figure.got-pop { animation: gotPop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes gotPop { 0% { scale: .6; } 55% { scale: 1.22; } 100% { scale: 1; } }
/* ventana del pedido: de dónde sale cada cosa */
.order-src { list-style: none; margin: 0 0 calc(var(--u) * 2); padding: 0; display: grid; gap: calc(var(--u) * 1.6); text-align: left; }
.order-src li { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.4) calc(var(--u) * 2); border-radius: calc(var(--u) * 3); background: #fff6f3; box-shadow: 0 0 0 calc(var(--u) * .3) #f3d6d6 inset; }
.order-src li.ok { background: #effaef; box-shadow: 0 0 0 calc(var(--u) * .3) #bfe6c1 inset; }
.order-src .os-it { width: calc(var(--u) * 9); height: calc(var(--u) * 9); object-fit: contain; flex: none; }
.order-src span { display: grid; gap: calc(var(--u) * .4); flex: 1; min-width: 0; }
.order-src b { font-family: var(--font-hand); font-size: calc(var(--u) * 3.8); color: #7a4a5a; }
.order-src b em { font-style: normal; font-size: calc(var(--u) * 2.9); color: #fff; background: #e07aa3; border-radius: 999px; padding: 0 calc(var(--u) * 1.4); margin-left: calc(var(--u) * .8); }
.order-src small { display: flex; align-items: center; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 3.1); color: #9c7f86; }
.order-src small img { width: calc(var(--u) * 5); height: calc(var(--u) * 5); object-fit: contain; }
.order-src i { font-style: normal; font-weight: 700; font-size: calc(var(--u) * 3); color: #3f9d55; white-space: nowrap; }
.go-pay { display: inline-flex; align-items: center; gap: calc(var(--u) * .6); margin-left: calc(var(--u) * 1.2); }
.go-pay img { width: calc(var(--u) * 5); height: calc(var(--u) * 5); object-fit: contain; }
/* ayudar: bono por nivel del cuteling */
.tr-lvb { display: inline-flex; align-items: center; padding: 0 calc(var(--u) * 1.6); margin-right: calc(var(--u) * 1); border-radius: 999px; background: #ffe9a8; color: #a5651c; font-weight: 700; font-size: calc(var(--u) * 2.9); white-space: nowrap; }
/* ventana del edificio: puesto de ayuda */
.build-pop .bp-help { margin-top: calc(var(--u) * 2.4); padding-top: calc(var(--u) * 2); border-top: calc(var(--u) * .3) dashed #f1c9d6; }
.build-pop .bp-help .tp-row { justify-content: center; }
.build-pop .bp-help .tp-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--u) * .6) calc(var(--u) * 1.4); margin: 0 0 calc(var(--u) * 1.6); }
.build-pop .bp-help .tp-h img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); object-fit: contain; }
.build-pop .bp-help .tp-h b { font-size: calc(var(--u) * 4.2); }
.build-pop .bp-help .tp-h small { flex-basis: 100%; text-align: center; font-size: calc(var(--u) * 3.2); }
/* 1.10.5: la explicación de entregar arrastrando va abajo, sobre el panel de información, para que se vean los pedidos */
.grid-coach .coach-card.low { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--u) * 30); }

/* ===================================================== 1.10.6 */
/* explicación de entregar arrastrando: la tarjeta va abajo del todo (sobre el panel de información, donde nunca pasa
   la mano), la mano siempre por encima de la tarjeta, y el pedido y el objeto laten */
.grid-coach .tuto-card { z-index: 1; }
.grid-coach .tuto-hand { z-index: 3; }
.grid-coach .coach-card.low { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--u) * 2); max-width: calc(var(--u) * 86); }
.grid-coach .coach-card.low .tuto-text p { font-size: calc(var(--u) * 3.6); }
.grid-coach .coach-card.low .tuto-face { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
#grid .order.coach-target { animation: coachTarget 1.1s ease-in-out infinite; filter: drop-shadow(0 0 calc(var(--u) * 1.6) rgba(255, 236, 140, .95)); z-index: 2; }
#gridBoard .cell.coach-target .tile { animation: coachTarget 1.1s ease-in-out infinite; filter: drop-shadow(0 0 calc(var(--u) * 1.4) rgba(255, 236, 140, .95)); }
@keyframes coachTarget { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
body.no-motion #grid .order.coach-target, body.no-motion #gridBoard .cell.coach-target .tile { animation: none; }
/* lo entregado sale del pedido: su casilla se pone el ticket, salta y se va */
.got-ghost { position: fixed; z-index: 140; pointer-events: none; display: grid; place-items: center; animation: gotGhost .85s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.got-ghost img { width: 82%; height: 82%; object-fit: contain; grid-area: 1 / 1; }
.got-ghost img.chk { width: 46%; height: 46%; align-self: end; justify-self: end; }
@keyframes gotGhost { 0% { scale: 1; opacity: 1; } 30% { scale: 1.3; opacity: 1; } 100% { scale: .2; opacity: 0; translate: 0 calc(var(--u) * -6); } }
/* todo entregado: un solo ticket grande junto al «Go!» */
.order-items figure.got-all { background: #e8f8e6; }
.order-items figure.got-all img.chk { position: static; width: 78%; height: 78%; }