/* ============================================================
   PAMBAMESA — styles.css
   Composición de pantallas SOBRE el sistema de diseño.
   Aquí no se inventan colores ni sombras: todo sale de los
   tokens de design-system.css. Si algo se repite en dos
   pantallas, su lugar es el sistema, no este archivo.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; font-size: 17px; }
html, body { height: 100%; }

body {
  font-family: var(--font-text);
  color: var(--text);
  line-height: var(--lead);
  background: radial-gradient(120% 90% at 50% 0%, #5b7f92 0%, #3e5666 60%, #2c3d49 100%);
  min-height: 100vh;
  overflow: hidden;               /* el scroll vive dentro de cada pantalla */
}

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; -webkit-tap-highlight-color: transparent; }
svg { display: block; width: 100%; height: 100%; }
/* icons.js inyecta su bloque de <defs> como un <svg width="0" height="0">.
   La regla de arriba le ganaba a esos atributos y lo estiraba a pantalla
   completa: invisible, pero dejaba el documento del doble de alto y un
   scroll fantasma que en móvil se siente como que la página "rebota". */
svg[width="0"] { width: 0; height: 0; }

/* ============================================================
   EL MUNDO — el marco donde vive el juego
   ============================================================ */

#stage {
  position: relative;
  width: 100%; max-width: var(--frame);
  margin: 0 auto;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  /* neutro a propósito: el fondo lo pone cada pantalla, para que la
     cocina 3D no parezca un cuadro colgado sobre otra escena */
  background: var(--pizarra-700);
  box-shadow: var(--e-4);
}

/* --- el mundo del puesto: zócalo de talavera, repisa y cal ---
   lo comparten las pantallas de papel (recetario, despensa, portada);
   la cocina no lo lleva porque su fondo ES la escena 3D. */
.mundo-puesto {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    var(--patron-mantel),
    linear-gradient(180deg,
      transparent 0, transparent 128px,
      var(--madera-500) 128px, var(--madera-300) 133px, var(--madera-600) 140px,
      var(--peltre-200) 140px, var(--peltre-200) 100%);
}
.mundo-puesto::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 128px;
  background: var(--patron-talavera);
  background-size: var(--patron-talavera-size);
  box-shadow: inset 0 -6px 12px -6px rgba(43,33,41,.35);
}
.mundo-puesto::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px;
  background: var(--papel-picado) repeat-x top left;
  background-size: 112px 30px;
  filter: drop-shadow(0 3px 3px rgba(20,12,18,.35));
}

.screen { display: none; position: relative; z-index: var(--z-scene); height: 100%; }
.screen.active { display: block; animation: pantalla-entra var(--dur-slow) var(--ease-pop) both; }
@keyframes pantalla-entra {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   HUD
   ============================================================ */

.hud-count { font-size: var(--t-sm); }
.hud-sucres { font-size: var(--t-md); }

/* ============================================================
   PORTADA
   ============================================================ */

.cover {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  text-align: center;
  overflow: hidden;
}
.cover > * { position: relative; z-index: 1; }
/* el sol que entra por la ventana */
.cover-sun {
  position: absolute; top: -18%; left: 50%; transform: translateX(-50%);
  width: 160%; aspect-ratio: 1; z-index: 0;
  background: radial-gradient(46% 46% at 50% 22%, rgba(255,238,190,.6), rgba(255,238,190,.16) 46%, transparent 66%);
  animation: sol-entra 1.4s var(--ease-out) both;
}
@keyframes sol-entra { from { opacity: 0; } to { opacity: 1; } }

.cover-star {
  font-size: var(--t-2xl); color: var(--maiz-400);
  text-shadow: 0 2px 0 var(--maiz-600), 0 0 20px rgba(255,210,77,.85);
  animation: estrella-late 5s ease-in-out infinite;
}
@keyframes estrella-late { 50% { transform: rotate(16deg) scale(1.14); } }

.cover-over {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--talavera-500);
}
.cover-title {
  font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 800; line-height: 1;
  color: #fff;
  text-shadow: 0 3px 0 var(--rosa-600), 0 6px 0 rgba(43,33,41,.22), 0 10px 22px rgba(43,33,41,.35);
}
.cover-sub { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; color: var(--rosa-600); }

.cover-peek { display: flex; justify-content: center; gap: var(--sp-4); margin: var(--sp-1) 0 var(--sp-2); }
.cover-peek .plate {
  width: 68px; border: var(--ring); box-shadow: var(--e-3);
}
.cover-peek .plate:nth-child(2) { transform: translateY(-10px) scale(1.06); }

.cover-quote { max-width: 34ch; }
.cover-quote p { font-size: var(--t-md); line-height: var(--lead); }
.cover-quote p + p { margin-top: var(--sp-2); font-size: var(--t-sm); }
.cover .btn { max-width: 320px; margin-top: var(--sp-2); }

/* la puerta al minijuego de preparación (fanesca/) */
.cover-mini {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; max-width: 320px; margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  text-align: left; text-decoration: none;
  background: linear-gradient(180deg, var(--peltre-100), var(--peltre-300));
  border: 2.5px solid var(--madera-400);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  transition: transform var(--dur-fast) var(--ease-out);
}
.cover-mini:active { transform: translateY(2px); }
.cover-mini-ic { font-size: 1.7rem; line-height: 1; }
.cover-mini span:nth-child(2) {
  flex: 1; font-size: var(--t-xs); line-height: 1.25; color: var(--text-muted);
}
.cover-mini b {
  display: block; font-family: var(--font-display); font-size: var(--t-sm);
  color: var(--text);
}
.cover-mini-flecha { font-family: var(--font-display); font-size: var(--t-xl); color: var(--madera-500); }

/* ============================================================
   COCINA — el mesón
   ============================================================ */

.hoja--cocina {
  padding-inline: var(--sp-3);
  padding-top: calc(var(--hud-h) + var(--sp-1));
  gap: var(--sp-2);
}

.mesa-zona { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* la escena ocupa TODO: es el fondo de la pantalla, no un cuadro */
.cocina3d { position: absolute; inset: 0; z-index: 0; }
.cocina3d canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }

/* los mandos flotan sobre la escena */
.cocina-ui {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column;
  padding-top: calc(var(--hud-h) + var(--sp-1));
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-2));
}
.cocina-ui > * { pointer-events: auto; }
.mesa3d .hoja--cocina { display: none; }

/* flechas del cajón: se posicionan desde JS sobre la fila de casillas */
.cajon-flecha {
  position: absolute; z-index: 5;
  width: 2.3rem; height: 2.3rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 800; line-height: 1;
  color: var(--rosa-700);
  background: linear-gradient(180deg, var(--peltre-100), var(--peltre-200));
  border: 2.5px solid var(--rosa-600);
  border-bottom-width: 4px;
  border-radius: 50%;
  box-shadow: var(--e-2);
  transition: transform var(--dur-fast) var(--ease-out);
}
.cajon-flecha:active { transform: scale(.9); }
.cajon-flecha.prev { left: var(--sp-2); }
.cajon-flecha.next { right: var(--sp-2); }

/* etiquetas de lo que está sobre la tabla */
.mesa-etiquetas {
  display: flex; justify-content: center; gap: var(--sp-2);
  margin-top: var(--sp-2);
  pointer-events: none;
}
.mesa-etiqueta { animation: etiqueta-pop var(--dur) var(--ease-pop) both; }
@keyframes etiqueta-pop { from { opacity: 0; transform: translateY(-6px) scale(.9); } }
.mesa-etiqueta.mess { background: linear-gradient(180deg, var(--madera-500), var(--madera-700)); color: var(--text-invert); border-color: var(--maiz-400); }

/* la pista flota sobre la escena: no gasta alto de pantalla */
.taller-action {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: 0 var(--sp-3);
  pointer-events: none;
}
.taller-action > .btn { pointer-events: auto; }
.taller-hint {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600; text-align: center;
  color: var(--text-invert);
  background: rgba(43,33,41,.75);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: var(--r-pill); padding: .2rem .9rem;
  box-shadow: var(--e-1);
}

/* --- fogón 2D: respaldo para navegadores sin WebGL --- */
.fogon {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-3);
  background: linear-gradient(180deg, var(--madera-400), var(--madera-500));
  border: var(--ring); border-radius: var(--r-xl);
  box-shadow: var(--e-3);
}
.fogon.shake { animation: mesa-shake var(--dur-slow) ease; }
@keyframes mesa-shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.fusion-plus { font-size: var(--t-2xl); color: #fff; opacity: .9; }
.carta-slot {
  width: clamp(102px, 29vw, 130px); aspect-ratio: 5 / 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  background: rgba(0,0,0,.18);
  border: 3px dashed rgba(255,255,255,.7);
  border-radius: var(--r-md);
}
.carta-slot .slot-plus { font-size: var(--t-2xl); color: #fff; }
.carta-slot .slot-txt { font-size: var(--t-xs); color: #fff; text-align: center; padding: 0 var(--sp-1); }
.carta-slot.filled { border: none; background: none; }
.ingrediente-mesa {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  animation: ingrediente-cae var(--dur) var(--ease-pop) both;
}
@keyframes ingrediente-cae { from { opacity: 0; transform: translateY(-16px) scale(.7); } }
.ing-icono { width: 4.8rem; }
.ing-sombra {
  display: block; width: 58%; height: 10px; margin-top: -.3rem; border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(43,33,41,.45), transparent 75%);
}
.ing-nombre { font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); color: var(--text-invert); background: rgba(43,33,41,.7); border-radius: var(--r-pill); padding: 0 .6rem; }

/* accesos a la despensa (solo modo 2D) */
.despensa-accesos { display: flex; gap: var(--sp-3); }
.acceso-btn { flex: 1; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-2); font-size: var(--t-sm); }
.acceso-ic { font-size: var(--t-2xl); filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }

/* con el mesón 3D el cajón vive dentro de la escena */
.mesa3d .despensa-accesos, .mesa3d #en-preparacion { display: none !important; }

/* el combo es un aviso, no un botón: va en el flujo y nunca intercepta
   el toque de las fichas de estación que tiene debajo */
.combo-indicador {
  align-self: flex-end;
  margin: var(--sp-1) var(--sp-3) 0 0;
  pointer-events: none;
  animation: combo-pop var(--dur) var(--ease-pop) both;
}
@keyframes combo-pop { from { transform: scale(.5); opacity: 0; } }

/* ============================================================
   CHIPS — ingredientes en fila (preparación, mercado, despensa)
   ============================================================ */

.en-preparacion { padding: var(--sp-3); }
.en-preparacion-label {
  display: block; font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--nopal-600);
  margin-bottom: var(--sp-2);
}
.en-preparacion-row, .mercado-grid {
  display: flex; gap: var(--sp-2); overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-1) 2px var(--sp-2);
}
.en-preparacion-row::-webkit-scrollbar, .mercado-grid::-webkit-scrollbar { height: 0; }

.carta-mini {
  --chip-edge: var(--rarity-tool);
  position: relative; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  width: 72px; padding: var(--sp-2) var(--sp-1);
  background: linear-gradient(180deg, var(--peltre-100), var(--peltre-200));
  border: 2px solid var(--hairline);
  border-bottom: 4px solid var(--chip-edge);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  transition: transform var(--dur-fast) var(--ease-out);
}
.carta-mini:active { transform: scale(.94); }
.carta-mini.rarity-semilla  { --chip-edge: var(--rarity-semilla); }
.carta-mini.rarity-hallazgo { --chip-edge: var(--rarity-hallazgo); }
.carta-mini.rarity-receta   { --chip-edge: var(--rarity-receta); }
.carta-mini.agotado { opacity: .45; filter: grayscale(.65); }
.mini-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; aspect-ratio: 1; padding: .22rem;
  background: radial-gradient(circle at 50% 40%, #fff 0%, #fff 52%, var(--peltre-400) 88%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(43,33,41,.05);
}
.mini-icon > svg { width: 100%; height: auto; aspect-ratio: 1; }
.mini-name { font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; line-height: 1.1; color: var(--text); text-align: center; }
.mini-cant {
  position: absolute; top: -.4rem; right: -.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .28rem;
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 800; line-height: 1; color: #fff;
  background: linear-gradient(180deg, var(--chile-500), var(--chile-600));
  border: 2px solid var(--peltre-100); border-radius: var(--r-pill);
  box-shadow: var(--e-1);
}
.mini-durab { font-size: .55rem; letter-spacing: .04em; color: var(--metal-600); line-height: 1; }
.mini-costo {
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 800; color: var(--maiz-800);
  background: linear-gradient(180deg, var(--maiz-300), var(--maiz-400));
  border-radius: var(--r-pill); padding: 0 .4rem;
}

/* ============================================================
   LA CARTA — el coleccionable
   ============================================================ */

.carta {
  --carta-edge: var(--rarity-tool-d);
  position: relative; overflow: hidden;
  width: clamp(102px, 29vw, 130px); aspect-ratio: 5 / 7;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--peltre-100) 0%, var(--peltre-200) 100%);
  border: 3px solid var(--carta-edge);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
}
.carta.rarity-semilla  { --carta-edge: var(--rarity-semilla); }
.carta.rarity-hallazgo { --carta-edge: var(--rarity-hallazgo); }
.carta.rarity-receta   { --carta-edge: var(--rarity-receta); box-shadow: var(--e-2), 0 0 14px -2px rgba(242,179,31,.6); }

.carta-art {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 11%;
  background: radial-gradient(66% 66% at 50% 46%, #fff 0%, #fff 54%, rgba(236,217,180,.5) 74%, transparent 80%);
}
.carta-art svg, .carta-art > span { width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgba(43,33,41,.22)); }
.carta-plate { flex-shrink: 0; text-align: center; padding: var(--sp-1) var(--sp-1) .35rem; border-top: 2px dashed var(--hairline); }
.carta-nombre { display: block; font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; line-height: var(--lead-tight); color: var(--text); }
.carta-rareza { display: block; font-size: .55rem; font-weight: 800; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--carta-edge); margin-top: .1rem; }
.rarity-semilla  .carta-plate { background: linear-gradient(180deg, transparent, rgba(185,126,60,.16)); }
.rarity-hallazgo .carta-plate { background: linear-gradient(180deg, transparent, rgba(108,191,90,.16)); }
.rarity-receta   .carta-plate { background: linear-gradient(180deg, transparent, rgba(242,179,31,.22)); }

.carta-foil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,236,180,.6) 48%, rgba(255,255,255,.85) 52%, transparent 65%);
  background-size: 260% 100%; background-position: 130% 0;
  animation: foil-sweep 3.2s ease-in-out infinite;
  mix-blend-mode: soft-light;
}
@keyframes foil-sweep { 0%, 30% { background-position: 130% 0; } 65%, 100% { background-position: -60% 0; } }

/* el reverso: plato tapado, rayas de caramelo */
.carta.back {
  background: repeating-linear-gradient(45deg, var(--rosa-400) 0 12px, var(--rosa-500) 12px 24px);
}
.carta.back.rarity-semilla  { --carta-edge: var(--rarity-semilla); }
.carta.back.rarity-hallazgo { --carta-edge: var(--rarity-hallazgo); }
.carta.back.rarity-receta   { --carta-edge: var(--rarity-receta); }
.carta-textura { position: absolute; inset: 0; }
.carta-textura::after {
  content: '✦'; position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  font-size: var(--t-lg); color: var(--maiz-300); text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.carta-interrogante {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: #fff;
  text-shadow: 0 3px 0 var(--rosa-700), 0 6px 10px rgba(0,0,0,.25);
}
.carta-cant {
  position: absolute; top: var(--sp-1); right: var(--sp-1); z-index: 2;
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 800; color: #fff;
  background: rgba(43,33,41,.8); border: 2px solid var(--peltre-100);
  border-radius: var(--r-pill); padding: 0 .38rem;
}

/* ============================================================
   RECETARIO
   ============================================================ */

.region-seccion { margin-bottom: var(--sp-6); }
.region-head {
  --region-acento: var(--maiz-400);
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  background: linear-gradient(180deg, var(--peltre-100), var(--peltre-200));
  border: 2px solid var(--hairline);
  border-left: 7px solid var(--region-acento);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
}
.region-nombre { min-width: 0; }
.region-head h3 { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 800; line-height: 1; color: var(--text); }
.region-tagline { font-size: var(--t-xs); color: var(--text-muted); line-height: 1.3; }
.region-progress--lock { background: var(--hairline-strong); }
.region-progress {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 800; color: #fff;
  background: var(--region-acento); border: 2px solid var(--peltre-100);
  border-radius: var(--r-pill); padding: .1rem .55rem;
  box-shadow: var(--e-1);
}
.region-locked {
  display: block; font-size: var(--t-sm); color: var(--text-muted); text-align: center;
  padding: var(--sp-4) var(--sp-3);
  background: rgba(43,33,41,.06);
  border: 2px dashed var(--hairline);
  border-radius: var(--r-md);
}
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.album-grid .carta { width: 100%; transition: transform var(--dur-fast) var(--ease-out); }
.album-grid .carta:active { transform: scale(.95); }
.coleccion-footnote { font-size: var(--t-sm); color: var(--text-muted); text-align: center; padding: var(--sp-2) 0 var(--sp-4); }

/* ============================================================
   DESPENSA
   ============================================================ */

.caja-box {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.caja-visual {
  width: 92px; aspect-ratio: 5 / 7;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--madera-200), var(--madera-400) 60%, var(--madera-500));
  border: var(--ring); border-radius: var(--r-md);
  box-shadow: var(--gloss), var(--e-3);
  animation: caja-flota 3.2s ease-in-out infinite;
}
@keyframes caja-flota { 50% { transform: translateY(-5px) rotate(-2deg); } }
.caja-sello {
  width: 40px; height: 40px; display: grid; place-items: center;
  font-size: var(--t-lg); color: var(--maiz-800);
  background: conic-gradient(from 210deg, var(--maiz-300), var(--maiz-600), var(--maiz-300));
  border-radius: 50%;
  box-shadow: var(--e-2);
}
.caja-stash { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; }
.sobre-count { font-size: var(--t-xl); font-weight: 800; color: var(--maiz-300); }
.caja-timer { font-size: var(--t-xs); opacity: .9; text-align: center; }

.seccion { margin-bottom: var(--sp-5); }
.seccion .label { margin: 0 0 var(--sp-2) var(--sp-1); }
.seccion-panel { display: flex; flex-direction: column; gap: var(--sp-2); }
.seccion-nota { font-size: var(--t-sm); color: var(--text-muted); text-align: center; line-height: 1.45; }
.seccion-acciones { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.regalos-num { font-family: var(--font-display); font-weight: 800; color: var(--accent-ink); }
.regalos-empty, .despensa-vacio {
  grid-column: 1 / -1; font-size: var(--t-sm); color: var(--text-muted); text-align: center; padding: var(--sp-3);
}
.regalo-mini { width: 100%; transition: transform var(--dur-fast) var(--ease-out); }
.regalo-mini:active { transform: scale(.94); }

/* ============================================================
   MODALES ESPECÍFICOS
   ============================================================ */

.sheet--wide { max-width: 400px; }
.despensa-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; width: 100%; max-height: 46vh; overflow-y: auto; }

.detalle-art { width: 128px; border: var(--ring); box-shadow: var(--e-2); }
.detalle-art.rarity-semilla  { box-shadow: var(--e-2), 0 0 0 3px var(--rarity-semilla); }
.detalle-art.rarity-hallazgo { box-shadow: var(--e-2), 0 0 0 3px var(--rarity-hallazgo); }
.detalle-art.rarity-receta   { box-shadow: var(--e-2), 0 0 0 3px var(--rarity-receta); }
.pista-carta { width: 108px; pointer-events: none; }
.pista-texto { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; line-height: 1.35; color: var(--text); }
.racha-ic { font-size: var(--t-3xl); }
.racha-recompensa { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 800; color: var(--maiz-600); }

/* --- Revelación de carta --- */
.reveal-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); max-width: 320px; width: 100%; }
.reveal-stage { position: relative; width: 200px; aspect-ratio: 5 / 7; perspective: 1100px; touch-action: none; cursor: grab; }
.reveal-stage::before {
  content: ''; position: absolute; left: 50%; top: -60%; transform: translateX(-50%);
  width: 300%; height: 200%; z-index: 0; pointer-events: none;
  background: radial-gradient(42% 42% at 50% 32%, rgba(255,238,190,.18), transparent 68%);
}
.carta-flip {
  position: relative; z-index: 3; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out);
  will-change: transform;
}
.reveal-stack-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transition: transform var(--dur) var(--ease-out); }
#reveal-stack-2 { z-index: 2; transform: translate(7px, 14px) rotate(3deg); }
#reveal-stack-3 { z-index: 1; transform: translate(-8px, 24px) rotate(-4deg); }
.reveal-restantes { position: absolute; top: -.7rem; right: -.5rem; z-index: 4; font-size: var(--t-xs); }
.carta-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.carta-face-front { transform: rotateY(180deg); }
.carta-face .carta { width: 100%; height: 100%; }
.reveal-stage::after {
  content: ''; position: absolute; left: 50%; bottom: -14%; width: 70%; height: 18%;
  transform: translateX(-50%); z-index: -1;
  background: radial-gradient(50% 100% at 50% 50%, rgba(0,0,0,.55), transparent 75%);
  filter: blur(3px); opacity: .5; transition: opacity var(--dur) var(--ease-out);
}
.reveal-stage:has(.carta-flip.is-front)::after { opacity: .9; }
.reveal-hint { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; color: var(--maiz-300); text-align: center; animation: hint-bob 1.6s ease-in-out infinite; }
@keyframes hint-bob { 50% { transform: translateY(-5px); } }
.reveal-banner {
  min-height: 2rem;
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; text-align: center;
  color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.reveal-banner.visible { opacity: 1; transform: none; }
.reveal-banner.is-new { color: var(--maiz-300); }
.carta-face-front .carta.rarity-receta { box-shadow: 0 0 50px -6px rgba(255,210,77,.85), var(--e-3); }

.reveal-burst { position: fixed; z-index: 119; pointer-events: none; }
.reveal-burst i { position: absolute; width: 7px; height: 10px; border-radius: 2px; animation: burst-fly .85s ease-out both; }
@keyframes burst-fly { to { transform: translate(var(--dx), var(--dy)) rotate(220deg); opacity: 0; } }

/* --- Banner de anuncio grande --- */
.banner {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-140%);
  top: calc(env(safe-area-inset-top) + var(--sp-2)); z-index: var(--z-banner);
  width: min(360px, calc(100% - var(--sp-6)));
  display: flex; align-items: center; gap: var(--sp-3);
  background: linear-gradient(180deg, var(--peltre-100), var(--peltre-200));
  border: var(--ring); border-left: 6px solid var(--chile-500);
  border-radius: var(--r-lg);
  box-shadow: var(--e-4);
  padding: var(--sp-3);
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; line-height: 1.3; color: var(--text);
  pointer-events: none; opacity: 0;
  transition: transform var(--dur-slow) var(--ease-pop), opacity var(--dur) var(--ease-out);
}
.banner.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.banner-ic {
  flex-shrink: 0; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  font-size: var(--t-lg); color: var(--maiz-800);
  background: conic-gradient(from 210deg, var(--maiz-300), var(--maiz-600), var(--maiz-300));
  border-radius: 50%; box-shadow: var(--e-1);
}

/* ============================================================
   ADAPTABLE
   ============================================================ */

@media (max-height: 700px) {
  html { font-size: 16px; }
  :root { --hud-h: calc(48px + env(safe-area-inset-top)); --nav-h: 58px; }
  .cover-peek .plate { width: 56px; }
  .cocina3d { min-height: 240px; }
}
@media (min-width: 640px) {
  #stage { height: calc(100dvh - 40px); margin: 20px auto; border-radius: var(--r-xl); }
  .tabbar { border-radius: 0 0 var(--r-xl) var(--r-xl); }
}
@media (min-width: 768px) {
  :root { --frame: 720px; }
  html { font-size: 18px; }
  .scroll, .hoja-head { padding-inline: var(--sp-6); }
  .album-grid { grid-template-columns: repeat(4, 1fr); }
  .carta-slot, .reveal-wrap .carta { width: 150px; }
}
@media (min-width: 1080px) {
  :root { --frame: 920px; }
  .album-grid { grid-template-columns: repeat(5, 1fr); }
}

:focus-visible { outline: 3px solid var(--maiz-400); outline-offset: 2px; border-radius: var(--r-sm); }
button:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}

/* ============================================================
   COCINA — la fila de estaciones (nivel 1)
   ============================================================ */

.estacion-fichas {
  flex-shrink: 0;
  display: flex; gap: .35rem; justify-content: center;
  overflow-x: auto; padding: 0 var(--sp-2) var(--sp-1);
  scroll-snap-type: x proximity;
}
.estacion-fichas > * { scroll-snap-align: center; }
.estacion-fichas::-webkit-scrollbar { height: 0; }
.estacion-ficha {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  width: 54px; padding: .3rem .2rem .28rem;
  background: linear-gradient(180deg, var(--peltre-100), var(--peltre-200));
  border: 2px solid var(--hairline);
  border-bottom: 4px solid var(--madera-400);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.estacion-ficha:active { transform: scale(.94); }
.estacion-ficha.activa {
  border-color: var(--maiz-400);
  border-bottom-color: var(--maiz-600);
  background: linear-gradient(180deg, #fff8e2, var(--maiz-300));
  box-shadow: var(--e-2), 0 0 0 3px rgba(255,201,60,.35);
}
.estacion-ic {
  display: flex; align-items: center; justify-content: center;
  width: 1.65rem; aspect-ratio: 1;
}
.estacion-ic > svg { width: 100%; height: auto; aspect-ratio: 1; }
.estacion-txt { font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; color: var(--text); }

/* flechas de paginación de cada nivel del mesón */
.nivel-flecha {
  position: absolute; z-index: 5; transform: translateY(-50%);
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800; line-height: 1;
  color: var(--madera-600);
  background: linear-gradient(180deg, var(--peltre-100), var(--peltre-200));
  border: 2px solid var(--madera-500);
  border-bottom-width: 3px;
  border-radius: 50%;
  box-shadow: var(--e-2);
}
.nivel-flecha:active { transform: translateY(-50%) scale(.9); }
.nivel-flecha.prev { left: var(--sp-2); }
.nivel-flecha.next { right: var(--sp-2); }

/* ============================================================
   DESPENSA — canasta y estantería
   ============================================================ */

.chip-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.canasta-cuenta {
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 800;
  color: var(--maiz-800); background: linear-gradient(180deg, var(--maiz-300), var(--maiz-400));
  border-radius: var(--r-pill); padding: 0 .45rem; letter-spacing: 0;
}
/* el chip que ya está en la canasta se marca con una palomita */
.carta-mini.activo {
  border-color: var(--nopal-500);
  border-bottom-color: var(--nopal-600);
  background: linear-gradient(180deg, #f4fbee, #e4f4d8);
}
.carta-mini.activo::after {
  content: '✓'; position: absolute; top: -.4rem; left: -.35rem;
  width: 1.25rem; height: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 800; color: #fff;
  background: linear-gradient(180deg, var(--nopal-400), var(--nopal-600));
  border: 2px solid var(--peltre-100); border-radius: 50%;
  box-shadow: var(--e-1);
}

/* ============================================================
   RECETARIO — subtítulos de sección
   ============================================================ */

.sub-label {
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--sp-3) 0 var(--sp-2) var(--sp-1);
}
.album-grid--sm { grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.album-grid--sm .carta-nombre { font-size: var(--t-2xs); }
.album-grid--sm .carta-rareza { display: none; }

/* cómo se hace, en el detalle de una carta */
.detalle-paso {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  flex-wrap: wrap; width: 100%;
  padding: var(--sp-2); margin-top: var(--sp-1);
  background: rgba(43,33,41,.05);
  border: 2px dashed var(--hairline);
  border-radius: var(--r-md);
}
.paso-item { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; color: var(--text); }
.paso-mas { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800; color: var(--accent); }

@media (min-width: 768px) {
  .album-grid--sm { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   IDENTIDAD PROPIA DE CADA PANTALLA
   ============================================================ */

/* --- LA DESPENSA: una alacena de verdad --- */
.seccion-panel .chip-grid { justify-content: flex-start; }
.despensa-estante {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}
.despensa-estante .carta-mini {
  background: linear-gradient(180deg, var(--peltre-100), var(--peltre-200));
}
/* la canasta se distingue del estante: mimbre, no tabla */
.panel--canasta {
  --panel-face: var(--madera-300);
  --panel-face-2: var(--madera-500);
  color: var(--text-invert);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 6px, transparent 6px 14px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.14) 0 5px, transparent 5px 13px);
}
.panel--canasta .seccion-nota { color: rgba(255,246,238,.9); }

/* --- EL RECETARIO: páginas de libreta de cocina --- */
.region-seccion { margin-bottom: var(--sp-6); }
.region-head {
  background: linear-gradient(180deg, var(--pizarra-500), var(--pizarra-700));
  border: 3px solid var(--madera-500);
  border-left-width: 7px;
  border-left-color: var(--region-acento, var(--maiz-400));
  color: var(--text-invert);
}
.region-head h3 { color: #fff; }
.region-tagline { color: var(--maiz-300); }
.region-progress { border-color: var(--pizarra-700); }
/* el subtítulo lleva su línea de puntos, como una carta de menú */
.sub-label {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-2);
}
.sub-label::after {
  content: ''; flex: 1; height: 0;
  border-bottom: 2px dotted var(--hairline);
}

/* ============================================================
   UN FONDO PROPIO POR PANTALLA
   Cada pantalla trae el suyo, así nunca se ve "una escena sobre
   otra escena": en la Cocina el fondo ES el mesón 3D.
   ============================================================ */

.screen > .hoja, .screen > .cover { position: relative; z-index: 1; }

/* el recetario es papel: la pared de cal se tiñe de libreta */
.screen--recetario .mundo-puesto {
  background:
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(27,95,170,.07) 29px 30px),
    linear-gradient(180deg,
      transparent 0, transparent 128px,
      var(--madera-500) 128px, var(--madera-300) 133px, var(--madera-600) 140px,
      #fffdf7 140px, var(--peltre-200) 100%);
}
/* la despensa es alacena: tablones de madera bajo la repisa */
.screen--despensa .mundo-puesto {
  background:
    repeating-linear-gradient(180deg, rgba(114,55,19,.16) 0 2px, transparent 2px 54px),
    linear-gradient(180deg,
      transparent 0, transparent 128px,
      var(--madera-600) 128px, var(--madera-300) 133px, var(--madera-600) 140px,
      var(--madera-200) 140px, var(--madera-300) 100%);
}
.screen--despensa .seccion-nota { color: var(--madera-700); }
.screen--despensa .sign { border-color: var(--madera-600); }

/* el HUD se apoya en un velo suave para leerse sobre la escena 3D */
.hud::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,12,18,.5), transparent);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.mesa3d.en-cocina .hud::before { opacity: 1; }