/* web/pantalla.css — LA LEY DE LA PANTALLA (rediseño del 1-ago-2026).
 *
 * La queja de Iñaki tras jugar no era una lista de bugs: «es súper cutre, cutre next level, hay que
 * cambiarlo todo». La causa raíz de casi todas sus quejas es UNA: el juego estaba construido como
 * SECCIONES DE UNA PÁGINA QUE SE DESPLAZA, no como la pantalla de un juego. La habitación —lo único que
 * de verdad es el juego— ocupaba un 4% de la pantalla, con el catálogo, la colección y la bandeja
 * apiladas debajo obligando a hacer scroll para jugar.
 *
 * De aquí cuelga todo lo demás:
 *
 *     .app { position: fixed; inset: 0; overflow: hidden }
 *
 * Nada se desplaza. Lo que no cabe, se abre ENCIMA (paneles) o se cuelga de un raíl. La escena manda.
 *
 * ⚠️ Esto es una CAPA, activada por `body.pantalla-juego`. El creador y la landing siguen siendo páginas
 * normales que se desplazan, y deben seguir siéndolo: una landing que no hace scroll no es una landing.
 * Por eso nada de aquí se escribe en `estilo.css`.
 *
 * La gramática (raíl, dock, panel, barra) es la misma que se validó en `docs/mockups/`, medida con
 * capturas reales antes de escribir una línea de este fichero.
 */

body.pantalla-juego {
  overflow: hidden;
  /* iOS: sin esto, el gesto de rebote arrastra la app entera y deja una franja del fondo del navegador */
  overscroll-behavior: none;
}

/* ── EL MARCO FIJO ───────────────────────────────────────────────────────────────────────────────── */
body.pantalla-juego .panel-barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--alto-barra, 62px);
  box-sizing: border-box;
}

body.pantalla-juego main {
  position: fixed;
  top: var(--alto-barra, 62px); left: 0; right: 0; bottom: 0;
  margin: 0; padding: 0; max-width: none;
  overflow: hidden;
}

/* Las vistas ya no son tramos de una página: cada una ES la pantalla. */
body.pantalla-juego .vista { position: absolute; inset: 0; overflow: hidden; }
/* ⚠️ `.vista` no activa se oculta con `display:none` en estilo.css; aquí solo se coloca la activa. */

/* La vista de la CASA es la única que se apodera del marco entero. Las demás (look, tablón, cuenta)
 * siguen siendo listas y necesitan desplazarse: forzarlas a caber sería cambiar un problema por otro. */
/* ⚠️ El padding lateral tiene que dejar hueco a los RAÍLES. Con 16px, la primera captura enseñó el
 * texto de las tarjetas pasando por DEBAJO de los botones redondos: ilegible, y sin ningún error. */
/* 🔴 Y el padding lateral es TAMBIEN el que fija el ancho de LECTURA, porque aqui arriba `main` renuncia
 * a su `max-width` para que la casa se apodere del marco. Sin esto, en un monitor de 2402 px la tarjeta de
 * «Mi Nomms» media 2226 px: las cuatro barras salian como pelos de 1066x9 px y el texto, correcto de
 * tamano, parecia diminuto al lado de tanto hueco. Iñaki lo leyo como «se ve muy pequenito» y luego, ya
 * agrandado, como «excesivo» — las dos veces el problema era el ANCHO, no la escala.
 * El `max()` mantiene los 88 px de guarda de los railes y, en cuanto la pantalla da para mas, centra una
 * columna de 1000 px: la MISMA que `panel.css` usa para el contenido de la barra de arriba, asi que el
 * titulo del panel y la tarjeta de debajo comparten borde izquierdo en vez de bailar. */
body.pantalla-juego .vista:not(#vista-hogar) {
  overflow-y: auto; padding: 14px max(88px, calc((100% - 1000px) / 2)) 90px;
}
body.pantalla-juego #vista-hogar { padding: 0; }

/* ── LOS RAÍLES ──────────────────────────────────────────────────────────────────────────────────────
 * Las pestañas mueren. Un raíl de botones redondos a cada lado: a la IZQUIERDA a dónde vas (los sitios),
 * a la DERECHA lo que haces aquí (las acciones). Es la disposición de Lustaria, que es la referencia que
 * dio Iñaki, y funciona porque separa NAVEGAR de ACTUAR — con pestañas, las dos cosas se mezclaban en la
 * misma fila y no se sabía qué te cambiaba de sitio y qué te cambiaba el mundo. */
body.pantalla-juego .rail {
  position: absolute; top: 14px; bottom: 14px; z-index: 30;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 8px; width: 74px; box-sizing: border-box;
  align-items: center; justify-content: flex-start;
  overflow: visible;
  pointer-events: none;                 /* el hueco entre botones deja pasar el clic a la escena */
}
body.pantalla-juego .rail > * { pointer-events: auto; }
/* ⚠️ `hidden` NO basta: es una regla del navegador de especificidad mínima y el `display:flex` de arriba
 * la pisa. Se vio en la primera captura — el raíl de acciones de la CASA aparecía sobre la pantalla de
 * Cuenta, con botones que allí no significan nada. Un elemento «oculto» que se ve no da ningún error. */
body.pantalla-juego .rail[hidden] { display: none; }
body.pantalla-juego .rail.izq { left: 0; }
body.pantalla-juego .rail.dcha { right: 0; align-items: center; }

body.pantalla-juego .rbtn {
  position: relative;
  width: 54px; height: 54px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid #ffffff26;
  background: #171a1ecc; backdrop-filter: blur(6px);
  color: #f2ede1; font-size: 22px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
body.pantalla-juego .rbtn:hover { transform: translateY(-2px); background: #22262bdd; }
body.pantalla-juego .rbtn.activa { border-color: var(--amarillo, #FFD400); background: #2a2410ee; }
body.pantalla-juego .rbtn:focus-visible { outline: 2px solid var(--amarillo, #FFD400); outline-offset: 3px; }

/* ⚠️ `pintaRail()` COPIA la clase `cerrada` de la pestaña original, pero hasta hoy (20-ago) nadie la
 * pintaba aquí: en el raíl, TABLÓN y ARENA se veían EXACTAMENTE igual de encendidos que LA CASA, así que
 * invitaban al clic y lo que salía era un aviso de que no, que todavía no. Igual que en `panel.css`
 * (`.pestana-panel.cerrada`): apagado y con el cursor de ayuda, porque una pestaña cerrada SÍ contesta
 * (dice por qué), y por eso no lleva `not-allowed` ni `disabled`. */
body.pantalla-juego .rbtn.cerrada { opacity: .38; cursor: help; }
body.pantalla-juego .rbtn.cerrada:hover { transform: none; opacity: .55; background: #171a1ecc; }

/* ⚠️ La etiqueta va en un `::after` a partir de `data-lab`, NO en un `<span>` escondido con
 * `display:none`: una etiqueta apagada por CSS deja el botón MUDO para un lector de pantalla, y estos
 * botones son solo un emoji. El nombre accesible de verdad lo pone `aria-label` en el HTML. */
body.pantalla-juego .rbtn::after {
  content: attr(data-lab);
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #b7b1a5; white-space: nowrap; pointer-events: none;
}
body.pantalla-juego .rail { gap: 22px; }   /* hueco para la etiqueta de debajo */

/* la campanita del raíl: un punto cuando hay algo que ver */
body.pantalla-juego .rbtn[data-aviso]::before {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amarillo, #FFD400); border: 2px solid #171a1e;
}

/* `#estado-sesion` cuelga de <main> FUERA de las vistas, así que en la pantalla fija aterriza en la
 * esquina superior izquierda, justo debajo del raíl: se leía «Tu Nomms «X» te esperaba» partido por los
 * botones redondos (captura 09 del 1-ago).
 * ⚠️ Se esconde con `clip-path`, NO con `display:none`. Es un `aria-live="polite"`: con `display:none`
 * dejaría de ANUNCIARSE, y un lector de pantalla perdería el aviso de que la sesión se ha recuperado.
 * Visualmente no se pierde nada — el retrato y el nombre ya están en la barra de arriba. */
body.pantalla-juego #estado-sesion {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── LA ESCENA ───────────────────────────────────────────────────────────────────────────────────── */
body.pantalla-juego #hogar {
  position: absolute; inset: 0;
  display: block; margin: 0; padding: 0;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  max-width: none;
}
/* Lo que era una tarjeta con títulos y párrafos encima de la habitación desaparece de la escena: el
 * título, la explicación y la lista de materiales se van a la barra y al panel. Un juego no se explica
 * con tres párrafos sobre la escena, se juega. */
body.pantalla-juego #hogar > h2,
body.pantalla-juego #hogar > .sub,
body.pantalla-juego #hogar > .etiqueta,
body.pantalla-juego #hogar > .fila-etiqueta,
/* la lista de materiales sueltos («✨ Chispa x1 · 🧵 Tela x1») se colaba por DEBAJO del raíl izquierdo,
 * ilegible. Su sitio es el taller, que es donde se gastan. */
body.pantalla-juego #hogar > .materiales { display: none; }

body.pantalla-juego #escena-hogar {
  position: absolute;
  top: 74px;                     /* debajo de la tira de necesidades */
  left: 88px; right: 88px;       /* entre los dos raíles */
  bottom: 128px;                 /* encima del dock */
  /* ⚠️ `display: grid; place-items: center` NO vale aquí, y la primera medición lo cazó: la habitación
   * salió al 101,4% de la PANTALLA (1264x1040 en un hueco de 698 de alto). Con `place-items:center` la
   * fila del grid se dimensiona por su contenido, así que el `height:100%` del lienzo resuelve contra una
   * altura que a su vez depende del lienzo — y se dispara. Un contenedor de bloque con las cuatro
   * esquinas fijadas tiene altura DEFINIDA, y ahí `inset:0` sí significa exactamente el hueco. */
  display: block;
  transition: left .18s ease, right .18s ease;
}
body.pantalla-juego #hogar-lienzo {
  /* el lienzo se rinde a más resolución (ver `escalaNitidez` en habitacion.mjs) y aquí solo se le dice
   * cuánto sitio ocupa. `object-fit: contain` conserva la proporción del rombo isométrico. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* ⚠️ `max-width: none` NO es cosmética: `estilo.css` clava `max-width: 264px` en `.hogar-lienzo`, y ESE
   * número ES el 4% de pantalla del que se quejó Iñaki. Mi primera versión de esta regla no tocaba
   * `max-width`, así que la habitación seguía en 264 px dentro de un hueco de 1264 — a pantalla completa
   * y aun así diminuta. Lo cazó MEDIR la captura (13%), no mirarla: a ojo «se ve más grande que antes»
   * y se habría dado por bueno. */
  max-width: none; max-height: none; margin: 0;
  object-fit: contain;
  /* `pixelated` era correcto cuando el lienzo se estiraba a lo bruto desde 300 px; ahora se rinde a la
   * resolución que toca, y `pixelated` solo añadiría escalones. */
  image-rendering: auto;
  background: none; border: 0; border-radius: 0;
  cursor: pointer;
}

/* ── LA TIRA DE NECESIDADES, ARRIBA Y SIEMPRE ────────────────────────────────────────────────────────
 * Su pregunta literal: «qué se ve de hambre/higiene/energía dentro de la casa». Hoy: nada — vivían en
 * otra pestaña. Ahora van sobre la escena, donde se juegan. */
body.pantalla-juego #tira-necesidades {
  position: absolute; top: 10px; left: 88px; right: 88px; z-index: 20;
  display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap;
}
body.pantalla-juego .nec-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: #171a1ecc; border: 1px solid #ffffff1f; backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 700; color: #e9e4d8; cursor: pointer;
  min-width: 0;
}
body.pantalla-juego .nec-chip .nec-ico { font-size: 15px; line-height: 1; }
body.pantalla-juego .nec-chip .nec-barra {
  width: 62px; height: 7px; border-radius: 999px; background: #ffffff1f; overflow: hidden; flex: 0 0 auto;
}
/* 🚦 LOS MISMOS TRES COLORES que «Mi Nomms», y por los mismos tokens: `--nivel-*` de `estilo.css`.
   La clase la pone `nivelDeBarra()` del core, así que no hay dos umbrales que puedan separarse. */
body.pantalla-juego .nec-chip .nec-barra i { display: block; height: 100%; border-radius: 999px;
  background: var(--nivel-ok); transition: width .35s ease, background .35s ease; }
body.pantalla-juego .nec-chip.nivel-media .nec-barra i { background: var(--nivel-media); }
body.pantalla-juego .nec-chip.nivel-baja  .nec-barra i { background: var(--nivel-baja); }
body.pantalla-juego .nec-chip.nivel-media { border-color: #ffd84d55; }
body.pantalla-juego .nec-chip.nivel-baja  { border-color: #e4574c66; }

/* 🔴 21-ago-2026 · QUE EL CAMBIO SE VEA, que es la otra mitad de lo que pidió: «si se supone que con la
   casa aumenta o disminuye las barras y tal, debería verse también visualmente. Debería ser algo
   gracioso y que se viera». Antes la tira se repintaba con el número nuevo y ya: una barra que acababa
   de subir 20 puntos se veía IGUAL que una que no se había movido, así que usar un mueble no tenía
   acuse de recibo ninguno.
   El salto sale por dos vías a la vez porque se leen a distinta distancia: el CHIP entero pega un bote
   (se ve de reojo, sin estar mirándolo) y el NÚMERO flotante dice cuánto (se lee si miras). */
body.pantalla-juego .nec-chip { position: relative; }
body.pantalla-juego .nec-chip.pulso-sube { animation: nec-bote .55s var(--muelle) 1; }
body.pantalla-juego .nec-chip.pulso-baja { animation: nec-tirita .5s ease 1; }
@keyframes nec-bote  { 0% { transform: scale(1); } 38% { transform: scale(1.13); } 100% { transform: scale(1); } }
@keyframes nec-tirita { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

body.pantalla-juego .nec-delta {
  position: absolute; left: 50%; top: -2px; z-index: 2;
  font-size: 12px; font-weight: 900; letter-spacing: -.02em; pointer-events: none;
  color: var(--nivel-ok); text-shadow: 0 1px 3px #000a;
  animation: nec-sube-y-se-va 1.5s ease-out forwards;
}
body.pantalla-juego .nec-chip.pulso-baja .nec-delta { color: var(--nivel-baja); }
@keyframes nec-sube-y-se-va {
  0%   { opacity: 0; transform: translate(-50%, 4px)   scale(.7); }
  18%  { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
  60%  { opacity: 1; transform: translate(-50%, -16px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(.95); }
}

/* La BURBUJA sale sobre el MUEBLE que se acaba de usar, no sobre el chip: ahí es donde está mirando
   cuando toca «a jugar», y ligar el efecto a la causa es justo lo que faltaba. Va `fixed` porque las
   coordenadas vienen de `puntoDe()`, que se construye con `getBoundingClientRect` (viewport, no
   documento): con `absolute` se descolocaría en cuanto la página tuviera scroll. */
.burbuja-nec {
  position: fixed; z-index: 90; transform: translate(-50%, -100%); pointer-events: none;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: #171a1ee6; border: 1px solid #ffffff26; backdrop-filter: blur(6px);
  font-size: 13px; font-weight: 800; color: #e9e4d8; white-space: nowrap;
  animation: burbuja-flota 1.6s ease-out forwards;
}
.burbuja-nec .burbuja-ico { font-size: 16px; line-height: 1; }
.burbuja-nec .burbuja-num { color: var(--nivel-ok); }
.burbuja-nec.nivel-media .burbuja-num { color: var(--nivel-media); }
.burbuja-nec.nivel-baja  .burbuja-num { color: var(--nivel-baja); }
@keyframes burbuja-flota {
  0%   { opacity: 0; transform: translate(-50%, -80%)  scale(.6); }
  16%  { opacity: 1; transform: translate(-50%, -118%) scale(1.08); }
  62%  { opacity: 1; transform: translate(-50%, -128%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(.98); }
}

/* Quien pidió menos movimiento no lo pidió a medias: aquí el efecto ENTERO es el movimiento, así que
   se queda el mensaje (el número) y se va el baile. No se oculta, se aquieta. */
@media (prefers-reduced-motion: reduce) {
  body.pantalla-juego .nec-chip.pulso-sube,
  body.pantalla-juego .nec-chip.pulso-baja { animation: none; }
  body.pantalla-juego .nec-delta { animation: nec-solo-desvanece 1.5s ease-out forwards; }
  .burbuja-nec { animation: nec-solo-desvanece 1.6s ease-out forwards; }
  @keyframes nec-solo-desvanece { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
}

/* ── EL DOCK: tus muebles, abajo, siempre alcanzables ────────────────────────────────────────────── */
body.pantalla-juego #dock {
  position: absolute; left: 88px; right: 88px; bottom: 12px; z-index: 20;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
body.pantalla-juego #hogar-bandeja {
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  padding: 9px 11px; max-width: 100%;
  border-radius: 16px; background: #171a1ecc; border: 1px solid #ffffff1f;
  backdrop-filter: blur(6px);
  scrollbar-width: thin;
}
/* 🔴 21-ago-2026 · LA LÍNEA QUE EXPLICA EL MODO TIENE QUE PODERSE LEER.
   Iñaki, sobre decorar/vivir: «está muy mal explicado y no se entiende bien». Y la explicación ya se
   escribía aquí: lo que fallaba es que a 12 px, en gris, debajo del dock y sobre el suelo de la
   habitación, en un monitor de 2.400 px de ancho no la ve nadie. Una ayuda que no se lee no es ayuda.
   Ahora es una píldora con fondo propio, y al CAMBIAR de modo se agranda unos segundos: el momento en
   que hace falta leerla es exactamente ése, y el resto del tiempo no tapa la escena. */
body.pantalla-juego #hogar-nota {
  margin: 0; max-width: min(760px, 100%);
  font-size: 14px; line-height: 1.35; color: #ded8cc; text-align: center;
  padding: 7px 14px; box-sizing: border-box;
  border-radius: 14px; background: #171a1ecc; border: 1px solid #ffffff1f;
  backdrop-filter: blur(6px);
}
body.pantalla-juego #hogar-nota:empty { display: none; }
body.pantalla-juego #hogar-nota.nota-fuerte {
  font-size: 16px; color: var(--hueso);
  border-color: #ffd40066; box-shadow: 0 0 0 1px #ffd40033, 0 10px 30px #0008;
  animation: nota-entra .28s var(--muelle) both;
}
@keyframes nota-entra {
  from { transform: translateY(6px) scale(.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* 🔴 21-ago-2026 · VACACIONES NO PUEDE SER UN ESTADO INVISIBLE.
   Iñaki: «luego le da vacaciones, le pone de vuelta otra vez cuando le vuelva a dar, no sé, no tiene
   mucho sentido todo esto». Lo que hace es CONGELAR el desgaste (`core/necesidades.mjs`:
   `horasCongeladas`), y eso es justo lo que no se veía: las barras siguen ahí, con el mismo aspecto,
   solo que ya no bajan. Un cambio de reglas del juego que no se ve en pantalla es indistinguible de
   que no pase nada. Con el modo puesto, la tira lo dice. */
body.pantalla-juego.de-vacaciones #tira-necesidades::after {
  content: '🌴 congelado';
  align-self: center; white-space: nowrap;
  padding: 7px 12px; border-radius: 999px;
  background: #171a1ecc; border: 1px solid #ffd40066; backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 700; color: var(--amarillo);
}
body.pantalla-juego.de-vacaciones .nec-chip .nec-barra i { opacity: .65; }

/* ── EL PANEL LATERAL: el catálogo y la colección se abren ENCIMA, no debajo ─────────────────────── */
body.pantalla-juego #panel-taller {
  position: absolute; top: 10px; bottom: 10px; left: 88px; z-index: 25;
  width: min(430px, calc(100% - 176px));
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; box-sizing: border-box;
  border-radius: 18px; background: #14171acc; border: 1px solid #ffffff1f;
  backdrop-filter: blur(10px); box-shadow: 0 20px 50px #000a;
  transform: translateX(calc(-100% - 96px)); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none;
  overflow: hidden;
}
body.pantalla-juego.taller-abierto #panel-taller { transform: none; opacity: 1; pointer-events: auto; }
/* cuando el panel está abierto la escena se aparta, no se tapa: si la casa queda oculta detrás del
 * catálogo, colocar un mueble es a ciegas */
body.pantalla-juego.taller-abierto #escena-hogar { left: min(534px, calc(100% - 88px)); }

body.pantalla-juego #panel-taller h3 {
  margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #b7b1a5;
}
/* ⚠️ `min-height: 0` — sin esto un hijo de flex no baja de su contenido y la lista se derrama por
 * debajo del panel, en vez de desplazarse dentro. */
body.pantalla-juego #panel-taller .taller-cuerpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
}

/* ── MÓVIL ───────────────────────────────────────────────────────────────────────────────────────────
 * Medido a 430x932 (iPhone 15 Pro Max) antes de escribirlo: con los raíles a los lados se comían 148 de
 * 430 px de ancho ENCIMA de la habitación (el 34%). En vertical, los raíles se van abajo en dos filas y
 * la escena se queda con el ancho entero. */
@media (max-width: 620px) {
  body.pantalla-juego .rail {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; height: auto;
    flex-direction: row; justify-content: center; gap: 14px;
    /* ⚠️ 16px abajo, no 6: la etiqueta del botón es un `::after` con `top: 100%`, o sea que vive FUERA de
     * la caja del botón. Con `padding-bottom: 6px` y el raíl pegado a `bottom: 0`, las palabras de la fila
     * de abajo (TALLER · VIVIR · PUNTOS · VACACIONES) caían 46px por debajo del borde y salían cortadas
     * por la mitad — se ve en la captura 15 del móvil. Y NO lo cazaba el detector de desbordes: el botón
     * termina justo en 932, así que su `getBoundingClientRect()` está dentro; lo que se sale es un
     * pseudo-elemento, que ahí no aparece. Y 20, no 16: con 16 la etiqueta acababa CLAVADA en 932, y los
     * rasgos que bajan (la p de «Taller», la j) pintan por debajo de su caja de línea. */
    padding: 8px 10px 20px;
    background: #12141788; backdrop-filter: blur(8px);
  }
  body.pantalla-juego .rail.izq { bottom: 76px; }
  body.pantalla-juego .rail.dcha { bottom: 0; }
  body.pantalla-juego .rbtn { width: 46px; height: 46px; font-size: 19px; }
  body.pantalla-juego .rbtn::after { font-size: 8px; margin-top: 1px; }

  body.pantalla-juego #tira-necesidades { left: 8px; right: 8px; gap: 5px; }
  /* solo se esconde la PALABRA: el icono y la barra se quedan, que es lo que se lee de un vistazo */
  body.pantalla-juego .nec-chip { padding: 6px 8px; gap: 5px; flex: 1 1 0; justify-content: center; }
  body.pantalla-juego .nec-chip .nec-et { display: none; }
  body.pantalla-juego .nec-chip .nec-barra { width: 100%; min-width: 22px; }

  /* en móvil los raíles se van abajo, así que arriba ya no estorban: el padding lateral vuelve a ser
   * pequeño y lo que se reserva es sitio ABAJO para las dos filas. */
  body.pantalla-juego .vista:not(#vista-hogar) { padding: 14px 14px 160px; }
  body.pantalla-juego #escena-hogar { left: 4px; right: 4px; top: 62px; bottom: 230px; }
  body.pantalla-juego #dock { left: 6px; right: 6px; bottom: 148px; }
  body.pantalla-juego #panel-taller { left: 6px; right: 6px; width: auto; bottom: 144px; }
  body.pantalla-juego.taller-abierto #escena-hogar { left: 4px; }
}

/* los materiales, en la cabecera del taller: es donde se gastan */
body.pantalla-juego .taller-mat { float: right; color: var(--amarillo, #FFD400); letter-spacing: 0; text-transform: none; font-size: 11px; }

/* ── TALENTOS ────────────────────────────────────────────────────────────────────────────────────
 * Mismo panel que el taller pero entrando por la DERECHA: son dos cosas distintas —lo que forjas y lo
 * que eres— y compartir el gesto las haría parecer la misma. */
body.pantalla-juego #panel-talentos {
  position: absolute; top: 10px; bottom: 10px; right: 88px; z-index: 25;
  width: min(400px, calc(100% - 176px));
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; box-sizing: border-box;
  border-radius: 18px; background: #14171acc; border: 1px solid #ffffff1f;
  backdrop-filter: blur(10px); box-shadow: 0 20px 50px #000a;
  transform: translateX(calc(100% + 96px)); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none; overflow: hidden;
}
body.pantalla-juego.talentos-abierto #panel-talentos { transform: none; opacity: 1; pointer-events: auto; }
body.pantalla-juego.talentos-abierto #escena-hogar { right: min(504px, calc(100% - 88px)); }
/* la tira de necesidades también se aparta: con el panel abierto, «Juego» quedaba tapado a medias y una
 * barra a medio tapar es peor que ninguna — parece que el juego se ha roto. */
body.pantalla-juego.talentos-abierto #tira-necesidades { right: min(504px, calc(100% - 88px)); }
body.pantalla-juego.taller-abierto #tira-necesidades { left: min(534px, calc(100% - 88px)); }
/* el dock, igual: con el panel abierto, el último mueble quedaba cortado por el borde del panel */
body.pantalla-juego.talentos-abierto #dock { right: min(504px, calc(100% - 88px)); }
body.pantalla-juego.taller-abierto #dock { left: min(534px, calc(100% - 88px)); }
body.pantalla-juego #tira-necesidades,
body.pantalla-juego #dock { transition: left .18s ease, right .18s ease; }
body.pantalla-juego #panel-talentos h3 {
  margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #b7b1a5;
}
body.pantalla-juego .talentos-nota { margin: 0 0 4px; font-size: 11px; color: #8f8a80; line-height: 1.45; }
body.pantalla-juego .talentos-lista { display: flex; flex-direction: column; gap: 9px; }
body.pantalla-juego .tal {
  /* ⚠️ CUATRO columnas, no tres: la fila tiene icono + texto + número + botón. Con tres, el «+» era un
   * cuarto hijo y el grid lo bajaba a una SEGUNDA FILA — cada talento ocupaba el doble de alto y el
   * botón quedaba suelto debajo del icono, como si fuera de otra cosa. Visto en la captura 12. */
  display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 13px;
  background: #1c2025aa; border: 1px solid #ffffff14;
  /* ⚠️ sin esto, un nombre largo ensancha la columna y el botón «+» se sale del panel: un hijo de grid
   * es `min-width:auto` por defecto y no baja de su contenido. */
  min-width: 0;
}
body.pantalla-juego .tal-ico { font-size: 22px; line-height: 1; text-align: center; }
body.pantalla-juego .tal b { display: block; font-size: 13px; font-weight: 800; }
body.pantalla-juego .tal small { display: block; font-size: 11px; color: #97918a; }
body.pantalla-juego .tal-n {
  font-size: 15px; font-weight: 900; color: var(--amarillo, #FFD400);
  min-width: 2.2em; text-align: right;
}
body.pantalla-juego .tal-mas {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ffffff2a;
  background: #23282ecc; color: #f2ede1; font-size: 18px; font-weight: 800; cursor: pointer;
  display: grid; place-items: center;
}
body.pantalla-juego .tal-mas:hover:not(:disabled) { background: var(--amarillo, #FFD400); color: #14181c; }
body.pantalla-juego .tal-mas:disabled { opacity: .3; cursor: default; }
body.pantalla-juego .tal.al-tope { opacity: .62; }

@media (max-width: 620px) {
  body.pantalla-juego #panel-talentos { left: 6px; right: 6px; width: auto; bottom: 144px; }
  body.pantalla-juego.talentos-abierto #escena-hogar { right: 4px; }
}

/* ── LA PUERTA ───────────────────────────────────────────────────────────────────────────────────
 * En la pared del fondo, a la derecha. Late despacio para que se vea que es la salida sin que un
 * cartel lo diga. */
body.pantalla-juego #puerta {
  position: absolute; z-index: 22;
  top: 96px; right: 104px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .14s ease;
}
body.pantalla-juego #puerta:hover { transform: translateY(-3px); }
body.pantalla-juego .puerta-hueco {
  width: 62px; height: 84px;
  border-radius: 34px 34px 6px 6px;
  background: linear-gradient(180deg, #2b2210 0%, #171307 100%);
  border: 2px solid #ffd40055;
  display: grid; place-items: center; font-size: 26px;
  box-shadow: 0 0 0 0 #ffd40055;
  animation: puertaLate 2.6s ease-in-out infinite;
}
@keyframes puertaLate {
  0%, 100% { box-shadow: 0 0 0 0 #ffd40044; }
  50%      { box-shadow: 0 0 26px 4px #ffd40033; }
}
body.pantalla-juego .puerta-et {
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #cfc7b4;
}
body.pantalla-juego #puerta:focus-visible { outline: 2px solid var(--amarillo, #FFD400); outline-offset: 4px; }
/* ⚠️ Sin la casa abierta la puerta no pinta nada, y con un panel encima estorbaría. `visibility` y no
 * `display` para que la animación no se reinicie cada vez que se cierra un panel. */
body.pantalla-juego.taller-abierto #puerta,
body.pantalla-juego.talentos-abierto #puerta { visibility: hidden; }
/* respeta a quien pide menos movimiento: el latido es decoración, no información */
@media (prefers-reduced-motion: reduce) {
  body.pantalla-juego .puerta-hueco { animation: none; }
}
@media (max-width: 620px) {
  body.pantalla-juego #puerta { top: 70px; right: 12px; }
  body.pantalla-juego .puerta-hueco { width: 46px; height: 62px; font-size: 20px; }
}

/* ── EL COMBATE COMO ESCENA ──────────────────────────────────────────────────────────────────────
 * Iñaki luchó y lo que vio fue una tarjeta con dos muñecos y un registro de texto debajo. Un combate
 * que se LEE no es un combate. Aquí el ring se apodera de la pantalla, la cámara acusa cada golpe y la
 * crónica pasa a ser un pie discreto en vez de la mitad del contenido.
 *
 * ⚠️ Nada de esto toca `core/combate.mjs`: los pasos siguen siendo los mismos, deterministas, misma
 * semilla y mismo resultado. Es PUESTA EN ESCENA. Si esto cambiara quién gana, sería un bug. */
body.pantalla-juego.en-combate #vista-nomms { overflow: hidden; padding: 0; }
body.pantalla-juego.en-combate #vista-nomms > section:not(#lucha) { display: none; }
body.pantalla-juego.en-combate .rail.izq { opacity: .25; pointer-events: none; }

body.pantalla-juego.en-combate #lucha {
  position: absolute; inset: 0; margin: 0; padding: 0; max-width: none;
  background: radial-gradient(120% 80% at 50% 35%, #2a1c12 0%, #0d0b08 70%);
  border: 0; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* R08 · el «¡PELEA!» CEDE su sitio al marcador de vidas. Sigue en el documento —es el encabezado de la
 * sección y un lector de pantalla lo necesita— pero no se pinta: arriba solo cabe una cosa, el VS del
 * marcador dice lo mismo, y la vida es el dato que hay que ver, no el rótulo. */
body.pantalla-juego.en-combate #lucha > h2 {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* ── R08 · EL MARCADOR, a escala de escena ────────────────────────────────────────────────────────
 * `#lucha` es `position:absolute; inset:0`, así que esto flota sobre la escena sin entrar en el flujo
 * del ring: subirlo no le quita ni un píxel a los luchadores. */
body.pantalla-juego.en-combate #hud-combate {
  position: absolute; top: 14px; left: 0; right: 0; z-index: 6; gap: 20px;
  /* 86px = los 74 del raíl + 12 de aire. Con 22 la barra de la izquierda nacía DEBAJO de los botones de
   * navegación (el raíl es z-index 30 y en combate solo se atenúa, no se va), así que el primer tramo de
   * vida —justo el que dice si vas ganando— salía tapado por un icono. Se vio en la captura, no en el CSS. */
  padding: 0 86px;
}
body.pantalla-juego.en-combate #hud-combate .hud-nombre { font-size: 15px; }
body.pantalla-juego.en-combate #hud-combate .hud-cifra { font-size: 14px; color: #cdc6b6; }
body.pantalla-juego.en-combate #hud-combate .hp {
  height: 18px; border-radius: 4px; margin-top: 6px;
  background: #ffffff14; border: 1px solid #ffffff26; box-shadow: inset 0 2px 6px #00000066;
}
/* ── EL SUELO ─────────────────────────────────────────────────────────────────────────────────────
 * Dos muñecos recortados sobre negro no son una arena: son dos PNG flotando, y así se veía. Lo que
 * convierte esto en un SITIO no es más contenido, son tres cosas baratas: un plano de suelo, una sombra
 * bajo cada uno que los apoya en él, y una viñeta que cierra la caja. Todo decorado — no toca el DOM del
 * combate ni su resultado. */
body.pantalla-juego.en-combate #lucha::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
  background:
    linear-gradient(to top, #241a11 0%, #1b130d 42%, transparent 100%),
    radial-gradient(60% 100% at 50% 100%, #3a2a1a88 0%, transparent 70%);
  border-top: 1px solid #ffffff0d;   /* la línea del horizonte: sin ella el degradado no se lee como suelo */
}
/* ⚠️ Aquí NO va un `#lucha > * { position: relative }` para subir el contenido sobre el suelo. Se probó y
 * reventó la escena: esa regla gana en especificidad al `position: absolute` del resultado y de las
 * salidas, así que los botones se plantaron en mitad de la pantalla encima de las barras de vida y el
 * «¡HAS GANADO!» se fue al fondo. No hace falta: el `::before` es un absolute que se pinta ANTES que sus
 * hermanos, o sea, por debajo. */
/* la sombra va bajo los PIES. Antes `bottom` tenía que descontar la barra de vida y el nombre, que iban
 * debajo del muñeco; desde R08 los dos viven en el marcador de arriba y la figura acaba en los pies. */
body.pantalla-juego.en-combate .esquina::before {
  content: ''; position: absolute; z-index: 0; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 58%; height: 30px; border-radius: 50%;
  background: radial-gradient(closest-side, #000000b0 0%, #00000055 55%, transparent 100%);
}
body.pantalla-juego.en-combate .ring {
  width: min(920px, 92%); justify-content: space-between; align-items: flex-end;
  /* la CÁMARA: se sacude cuando alguien encaja. La clase la pone app.mjs por golpe. */
  transition: transform .06s ease-out;
}
body.pantalla-juego.en-combate .ring.sacude { animation: camSacude .26s ease-out; }
@keyframes camSacude {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-7px, 3px) rotate(-.4deg); }
  55%  { transform: translate(6px, -2px) rotate(.35deg); }
  100% { transform: translate(0, 0); }
}
body.pantalla-juego.en-combate .capas-ring { width: min(320px, 30vw); height: min(320px, 30vw); }
body.pantalla-juego.en-combate .hp-fill { border-radius: 3px; }
/* por debajo de un tercio la barra avisa con color, no con un número */
body.pantalla-juego.en-combate .hp-fill.critico { background: #E4574C; }
body.pantalla-juego.en-combate .vs { font-size: 30px; align-self: center; opacity: .5; }

/* ── R10 · QUIÉN GANÓ Y QUIÉN PERDIÓ, EN LOS CUERPOS ──────────────────────────────────────────────
 * «hasta que uno se quede sin vida y también se caiga, y el otro que lo celebre saltando».
 * Antes esto era un ladeo de 6° y un filtro gris: leído en pantalla, el perdedor seguía DE PIE y lo
 * único que decía quién había ganado era la línea de texto de abajo.
 *
 * 🔴 LA CAÍDA LA HACE EL RIG, NO EL CSS — y esto es lo contrario de lo que dictaba el instinto. El
 * primer intento tumbaba la figura con `rotate(74deg)` sobre los pies (`transform-origin: 50% 92%`) y
 * en pantalla el muñeco se iba abajo y a la derecha, con la cabeza HUNDIDA bajo su propia sombra: el
 * mismo defecto que él cazó con la silla del hogar, y en el mismo sitio donde acaba de pedir que se
 * arregle. Medido (`scratchpad/arena/mide-caida.mjs`, silueta por alfa sobre la caja de 320 px):
 *   idle    → pies en y=284. Ése ES el suelo del ring.
 *   derrota → el clip solo ya deja el cuerpo tirado en 88,127 → 291,281, o sea APOYADO en y=281.
 *   con el rotate(74°) encima → el borde bajo se iba a y=417: 132 px POR DEBAJO del suelo.
 * O sea que el clip `derrota` no es «un gesto de tristeza» que hubiera que tumbar: ya es el cuerpo en
 * el suelo, boca abajo y con la cabeza hacia el rival (a mira a la derecha, b a la izquierda: el rig
 * ya resuelve el sentido de la caída, que a mano había que corregir con un signo por esquina).
 *
 * Así que aquí el CSS se queda con lo único que el clip congelado NO puede dar: el IMPACTO. El cuerpo
 * entra un poco alto y ladeado, se estampa contra el suelo, rebota una vez y se queda. Y termina en
 * `rotate(0) translateY(0)` a propósito — cualquier ángulo residual vuelve a hundirlo. */
body.pantalla-juego.en-combate .esquina.perdio .capas-ring {
  filter: grayscale(.72) brightness(.5);
  transform-origin: 50% 92%;
  animation: caeKO .62s cubic-bezier(.45, .05, .6, 1) both;
}
body.pantalla-juego.en-combate #ring-a.perdio .capas-ring { --vuelco: -16deg; }
body.pantalla-juego.en-combate #ring-b.perdio .capas-ring { --vuelco: 16deg; }
@keyframes caeKO {
  0%   { transform: translateY(-34px) rotate(var(--vuelco, -16deg)); }   /* aún en el aire, ladeado */
  55%  { transform: translateY(0) rotate(0); }                          /* el golpe contra el suelo */
  70%  { transform: translateY(-9px) rotate(calc(var(--vuelco, -16deg) * .3)); }  /* el rebote */
  100% { transform: translateY(0) rotate(0); }
}
body.pantalla-juego.en-combate .esquina.perdio::before { opacity: .45; }   /* su sombra también se apaga */
/* EL QUE GANA SALTA, y salta VARIAS veces: con dos brincos de 16 px la celebración se acababa antes de
 * que el ojo llegara del perdedor al ganador. Cuatro saltos de 30 px con su aplastado al aterrizar. */
body.pantalla-juego.en-combate .esquina.gano .capas-ring {
  transform-origin: 50% 92%;
  animation: brincoVictoria .56s var(--muelle, ease-out) 4;
}
@keyframes brincoVictoria {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  12%      { transform: translateY(2px) scale(1.06, .92); }   /* se agacha para impulsarse */
  40%      { transform: translateY(-30px) scale(.95, 1.07); }
  70%      { transform: translateY(0) scale(1.07, .93); }     /* aterriza aplastado */
}

/* El cartel del golpe/esquiva, a tamaño de escena. Con el tamaño de la ficha pequeña (`top:20%`, 18px,
 * gris) caía SOBRE la cabeza y se leía a medias — lo único que cuenta lo que está pasando durante el
 * combate quedaba ilegible. Aquí flota por encima del muñeco y la esquiva lleva pastilla, porque el gris
 * sobre un fondo oscuro no es un color: es no verse. */
body.pantalla-juego.en-combate .dano-flota { top: -2%; font-size: 44px; }
body.pantalla-juego.en-combate .dano-flota.esquiva {
  font-size: 20px; color: #e9e4d8; letter-spacing: .1em; text-transform: uppercase;
  background: #ffffff1f; border-radius: 999px; padding: 5px 14px;
}
/* R09 · el crítico, a escala de escena. Va por DEBAJO del golpe normal en tamaño (44 → 34) a
 * propósito: lleva cuatro palabras en vez de dos cifras, y a 44 px «¡CRÍTICO! -12 HP» se sale de la
 * escena por los dos lados. Lo que lo hace destacar es el color y el golpe seco, no el cuerpo. */
body.pantalla-juego.en-combate .dano-flota.critico { font-size: 34px; white-space: nowrap; }
body.pantalla-juego.en-combate .dano-flota.quieto { transform: translate(-50%, -24px); }

/* la crónica deja de ser el protagonista: pie de escena, últimas líneas y sin barra de desplazamiento */
/* ⚠️ La crónica va ARRIBA, no abajo: abajo se pisaba con el texto del resultado y con los botones de
 * salida — se leían las dos cosas superpuestas (captura 08). Arriba es además donde no molesta: el ojo
 * está en los luchadores, y la crónica es historial. */
body.pantalla-juego.en-combate #cronica {
  position: absolute; top: 104px; left: 0; right: 0;
  max-height: 84px; overflow: hidden;
  text-align: center; font-size: 13px; color: #a8a296;
  /* se desvanece hacia ARRIBA, que es por donde salen las líneas viejas */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
          mask-image: linear-gradient(to bottom, transparent, #000 45%);
}
body.pantalla-juego.en-combate #lucha-final {
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  font-size: 19px; font-weight: 900; margin: 0;
}
/* las SALIDAS del combate: sin ellas, ganabas y te quedabas mirando una pantalla sin nada que pulsar */
body.pantalla-juego #salidas-combate {
  position: absolute; bottom: 26px; left: 0; right: 0; z-index: 5;
  display: none; gap: 12px; justify-content: center;
}
body.pantalla-juego.en-combate.combate-fin #salidas-combate { display: flex; }
body.pantalla-juego.en-combate.combate-fin #lucha-final { bottom: 92px; }
/* ⚠️ El ring se centra en el HUECO QUE QUEDA, no en la pantalla: arriba están el título y la crónica
 * (≈180px) y abajo el resultado y las salidas (≈150px). Centrarlo en la pantalla entera dejaba un vacío
 * enorme sobre los luchadores, y mandarlo abajo del todo (`flex-end`) lo dejaba pegado a los botones. Los
 * paddings son ESE hueco, declarado. */
body.pantalla-juego.en-combate #lucha { padding: 200px 0 150px; }

@media (max-width: 620px) {
  body.pantalla-juego.en-combate .ring { width: 96%; }
  body.pantalla-juego.en-combate .esquina::before { bottom: 4px; height: 20px; }
  body.pantalla-juego.en-combate .capas-ring { width: 38vw; height: 38vw; }
  body.pantalla-juego.en-combate #hud-combate { top: 8px; padding: 0 10px; gap: 10px; }
  body.pantalla-juego.en-combate #hud-combate .hud-nombre { font-size: 12px; }
  body.pantalla-juego.en-combate #hud-combate .hud-cifra { font-size: 11px; }
  body.pantalla-juego.en-combate #hud-combate .hp { height: 13px; margin-top: 4px; }
  body.pantalla-juego.en-combate #hud-combate .vs { font-size: 20px; }
  body.pantalla-juego.en-combate #cronica { top: 84px; max-height: 52px; }
  body.pantalla-juego.en-combate #lucha { padding: 146px 0 140px; }
}

/* ── R03 · EL MENÚ DEL MUEBLE ─────────────────────────────────────────────────────────────────────
 * Sale cuando el Nomms LLEGA al mueble, clavado encima de él. Va `fixed` y no dentro de `#escena-hogar`
 * a propósito: la escena tiene `overflow:hidden` (es lo que recorta el lienzo), así que un menú sobre un
 * mueble de la fila de arriba se quedaba cortado por la mitad sin que nada avisara. */
.menu-mueble {
  position: fixed; z-index: 60;
  min-width: 168px; padding: 8px;
  background: #14140fF2; border: 2px solid var(--linea); border-radius: 14px;
  box-shadow: 0 14px 34px #000000a6;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(6px) scale(.96);
  transition: opacity .12s ease, transform .16s var(--muelle);
}
.menu-mueble.visible { opacity: 1; transform: none; }
.menu-mueble-titulo {
  margin: 2px 8px 6px; font-size: 12px; font-weight: 900;
  letter-spacing: .09em; text-transform: uppercase; color: var(--amarillo);
}
.menu-mueble-op {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: 0; border-radius: 9px;
  background: transparent; color: #ece7db;
  font: inherit; font-size: 14px; font-weight: 700; text-align: left;
  cursor: pointer;
}
.menu-mueble-op:hover, .menu-mueble-op:focus-visible { background: #ffffff1a; outline: none; }
.menu-mueble-op:focus-visible { box-shadow: inset 0 0 0 2px var(--amarillo); }
.menu-mueble-emoji { font-size: 17px; width: 20px; text-align: center; }
/* La primera opción es la que de verdad juega (usar el mueble): se separa de las de manipular. */
.menu-mueble-op[data-accion="mover"] { margin-top: 4px; border-top: 1px solid #ffffff14; border-radius: 0 0 9px 9px; padding-top: 11px; }

@media (prefers-reduced-motion: reduce) {
  .menu-mueble { transition: none; opacity: 1; transform: none; }
  /* R10 · el desenlace SIN movimiento. Lo que se quita es el vuelo, no el dato: el perdedor sigue
   * TUMBADO y el ganador sigue marcado, porque quien gana es justo la informacion que da la escena.
   * Se fija a mano en vez de dejarlo al `animation-duration: 0.001ms` global de `estilo.css`: ese
   * atajo funciona por accidente (el `both` de `caeKO` congela el ultimo fotograma) y con el brinco
   * de la victoria falla del todo — su ultimo fotograma es `translateY(0)`, o sea NADA. */
  body.pantalla-juego.en-combate .esquina.perdio .capas-ring { animation: none; transform: none; }
  body.pantalla-juego.en-combate .esquina.gano .capas-ring {
    animation: none;
    transform: translateY(-10px) scale(1.04);
  }
}

/* R04 · mientras el Nomms lleva un mueble en las manos, el puntero lo dice: el estado «voy cargado»
 * no tiene ningún otro sitio donde verse si el bulto queda tapado por un mueble de delante. */
body.cargando-mueble #hogar-lienzo { cursor: grabbing; }

/* ── LA VEDA (20-ago-2026) ─────────────────────────────────────────────────────────────────────
   Iñaki: «que como mucho pudieras acceder a la casa, y no pudieras acceder a prácticamente nada más».
   El servidor ya contesta 403 a lo vedado (`core/veda.mjs`); esto es la otra mitad: que no queden a la
   vista puertas que no llevan a ningún sitio. El TALLER y los TALENTOS abrirían paneles vacíos (sus
   materiales y sus puntos salen de luchar), y la PUERTA da a la arena, que es justo lo capado.
   ⚠️ La clase la pone `fijaVeda()` en app.mjs, y se quita sola cuando el juego se abra: nada de esto
   hay que deshacerlo a mano el día que `JUEGO_ABIERTO=1` entre en Railway. */
body.juego-capado #rb-taller,
body.juego-capado #rb-talentos,
body.juego-capado #puerta { display: none; }

/* ═══ MODO EMPOTRADO: la lucha dentro de las webs de Iñaki (21-ago-2026) ═════════════════════════════
 *
 * `/embed/lucha` sirve EL MISMO `index.html` que el juego, así que aquí no se construye una pantalla
 * nueva: se APAGA todo lo que no es el ring. Es la única forma de que la pelea que se ve en
 * inakimarzo.com sea la de verdad y no una copia que empezaría a divergir en cuanto alguien tocase una
 * de las dos. La clase la pone `web/pase-embed.mjs` antes del primer pintado (ver la nota de allí).
 *
 * ⚠️ Y por eso NO se duplica ni una regla del bloque `en-combate` de arriba: durante el combate manda
 * aquél, que ya sabe apoderarse de la caja. Esto solo prepara la caja. */
body.embed { min-height: 0; }
body.embed #panel-nav,
body.embed .rail,
body.embed #guia-ios,
body.embed #barra-vincula,
body.embed footer,
body.embed .vista:not(#vista-nomms) { display: none !important; }
/* Dentro de «Mi Nomms», solo el ring y la portada del vínculo. `#comparativa`, `#tarjeta-cuidado` y
 * `#desbloqueo` son del juego completo, y aquí el visitante ni siquiera está en Nommeros. */
body.embed #vista-nomms > section:not(#lucha):not(#embed-portada) { display: none !important; }
body.embed main { padding: 0; margin: 0; max-width: none; }
body.embed #vista-nomms { position: absolute; inset: 0; padding: 0; margin: 0; overflow: hidden; }
body.embed #embed-portada {
  position: absolute; inset: 0; margin: 0; max-width: none; border: 0; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 22px;
  background: radial-gradient(120% 80% at 50% 35%, #2a1c12 0%, #0d0b08 70%);
}
body.embed #embed-portada .sub { max-width: 34ch; }
body.embed #embed-rival { width: 132px; height: 132px; }
/* El ring en empotrado ocupa la caja entera desde el primer fotograma, sin esperar a `en-combate`: el
 * iframe ya ES la ventana del combate, no hay nada alrededor de lo que apoderarse. */
body.embed #lucha { position: absolute; inset: 0; margin: 0; max-width: none; border-radius: 0; }

/* ── LA BARRA DE VUELTA (`/juego?vincula=<origen>`) ──────────────────────────────────────────────────
 * Quien llega aquí venía de la web de Iñaki a crearse el Nomms. Cuando lo tiene, esto le devuelve al
 * combate de un clic, en vez de dejarle adivinar que tiene que cerrar la pestaña y volver a buscar el
 * botón. Va fija arriba y NO tapa nada: la pantalla del juego empieza más abajo. */
#barra-vincula {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 9px 16px; background: var(--acento, #f5c451); color: #16120a;
  font-weight: 700; box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
#barra-vincula .btn { padding: 6px 14px; font-size: .9rem; }
body.con-barra-vincula { padding-top: 44px; }