/* ============================================================
   HUECAS — El recetario de la abuela
   v17 "MOLESKINE & MOSTRADOR"
   Dirección de arte:
   · Un cuaderno Moleskine táctil pero skeumórfico: una hoja por
     paso, banda elástica, cinta marcapáginas, número fantasma.
   · Objetos DE PIE sobre repisas con profundidad real (platos en
     el mostrador, libros en la estantería, víveres en la lona).
   · Dos mundos en una pantalla: la hueca cálida del comensal
     arriba / tu cocina de papel blanco abajo.
   · Adaptable de verdad: celular y tablet.
   ============================================================ */

:root {
  /* LA ENCIMERA — el mundo donde pasa todo. Coral cálido, como la mesa
     de las referencias (ref-encimera-cenital, ref-mesa-servida).
     Regla que sostiene el boceto→color (GDD §3.2): el mundo es cálido,
     pero el PAPEL sigue siendo papel. Así lo que aún no descubres se
     lee como lápiz sobre una página, no como algo apagado. */
  --mesa:       #e8a596;
  --mesa-clara: #f2bfae;
  --mesa-honda: #cf8172;

  /* el fogón: el único punto oscuro, y por eso atrae la mirada */
  --fogon:       #4a3550;
  --fogon-2:     #3a2740;
  --fogon-brasa: #d95f43;

  /* papel: crema cálida, nunca blanco clínico */
  --page:    #fdf0e2;
  --page-2:  #f7e3cd;
  --ivory:   #fbeadb;
  --mist:    #eeddc9;
  /* la hueca (zona del comensal): crema cálida de la referencia */
  --hueca:   #f8e7d5;
  --hueca-2: #f2dcc5;
  /* tinta: ciruela cálida, no gris de oficina */
  --ink:     #4a2f3d;
  --ink-2:   #8a6472;
  --line:    rgba(74, 47, 61, .18);
  --line-soft: rgba(74, 47, 61, .09);
  /* rebote de algo que cae sobre la madera */
  --plop: cubic-bezier(.3, 1.6, .4, 1);
  /* acentos */
  --rojo:    #c8442c;
  --rojo-d:  #a83420;
  --verde:   #5f7f56;
  --verde-d: #4c6a45;
  --azul:    #5d6b83;
  --oro:     #c9982f;
  /* relieve */
  --emboss:      inset 0 1px 0 rgba(255,255,255,.95);
  --card-shadow: 0 1px 2px rgba(45,38,25,.05), 0 12px 32px -14px rgba(45,38,25,.22);
  --card-shadow-lg: 0 2px 4px rgba(45,38,25,.06), 0 24px 60px -20px rgba(45,38,25,.32);
  --btn-white: linear-gradient(180deg, #ffffff, #f0eee8);
  --serif: 'Lora', Georgia, serif;
  --hand:  'Caveat', 'Segoe Script', cursive;
  --frame: 480px;
  --hud-h: 58px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

body {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.5;
  /* la mesa de estudio alrededor del cuaderno (crema cálida, ref. librería) */
  background: #efe4d2;
  background-image: radial-gradient(120% 100% at 50% 0%, #f7efe1 0%, #efe4d2 55%, #e2d4bc 100%);
}

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; -webkit-tap-highlight-color: transparent; }
svg { display: block; width: 100%; height: 100%; }
.hand { font-family: var(--hand); font-weight: 600; }
.hidden { display: none !important; }

/* ---------- El cuaderno-app (marco flotante, adaptable) ---------- */

/* la encimera de la hueca, vista desde arriba */
#stage {
  position: relative;
  width: 100%;
  max-width: var(--frame);
  height: 100dvh;
  margin: 0 auto;
  background: var(--mesa);
  background-image:
    var(--grain),
    repeating-linear-gradient(96deg, rgba(140,80,55,.06) 0 2px, transparent 2px 44px),
    radial-gradient(120% 70% at 50% 0%, var(--mesa-clara) 0%, var(--mesa) 55%, var(--mesa-honda) 100%);
  box-shadow: 0 1px 2px rgba(45,38,25,.08), 0 34px 90px -30px rgba(70,50,20,.5);
  overflow: hidden;
}
/* la luz de la mañana entrando por la ventana */
#stage::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(70% 45% at 14% 3%, rgba(255,246,226,.42), transparent 70%);
  pointer-events: none;
}

/* ---------- Pantallas: cada una es una hoja que gira ---------- */

.screen { display: none; height: 100%; }
.screen.active {
  display: block;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: page-turn .5s cubic-bezier(.2, .85, .3, 1) both;
  transform-origin: left center;
}
@keyframes page-turn {
  from { opacity: 0; transform: perspective(1400px) rotateY(10deg) translateX(20px); filter: blur(4px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Botones (relieve clásico) ---------- */

.btn-main {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .8rem 1.7rem;
  font-size: 1.1rem; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #e06a4c 0%, var(--rojo) 55%, var(--rojo-d) 100%);
  border-radius: 14px;
  border: none; border-bottom: 4px solid #8e2c17;
  box-shadow: inset 0 1px 0 rgba(255,225,200,.45), 0 8px 18px -8px rgba(140,45,25,.6);
  text-shadow: 0 1px 1px rgba(120,30,14,.5);
  transition: transform .1s ease, border-bottom-width .1s ease, filter .12s ease;
}
.btn-main:hover { filter: brightness(1.04); }
.btn-main:active { transform: translateY(3px); border-bottom-width: 1px; }
.btn-main:disabled { filter: grayscale(.55) brightness(.95); opacity: .6; }
.btn-main.wide { width: 100%; padding: .95rem 1rem; font-size: 1.18rem; }
.btn-main.small { padding: .5rem 1rem; font-size: .95rem; border-radius: 11px; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .7rem 1.4rem; font-size: 1.02rem; font-weight: 600; color: var(--ink);
  background: linear-gradient(180deg, var(--page), var(--page-2));
  border: none; border-bottom: 3px solid rgba(200,68,44,.3);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 5px 12px -7px rgba(140,45,25,.5);
  transition: transform .1s ease, border-bottom-width .1s ease;
}
.btn-ghost:active { transform: translateY(2px); border-bottom-width: 1px; }
.btn-ghost:disabled { opacity: .5; }
.btn-ghost.small { padding: .48rem .9rem; font-size: .88rem; border-radius: 11px; }
.btn-ghost.small small { color: var(--ink-2); margin-left: .2rem; }

/* ============================================================
   HUD — anotaciones flotantes (sin barra que tape la escena)
   ============================================================ */

.hud {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--hud-h) + env(safe-area-inset-top));
  padding: calc(env(safe-area-inset-top) + .55rem) .7rem 0;
  display: flex; align-items: flex-start; gap: .4rem;
  background: none; border: none;
  z-index: 50; pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud-pill.coins {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .75rem;
  font-family: var(--serif); font-weight: 700; font-size: 1.08rem; color: var(--ink);
  white-space: nowrap; flex-shrink: 0;
  background: rgba(255,255,254,.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--emboss), 0 4px 12px -6px rgba(45,38,25,.25);
}
.hud-pill.coins .coin-icon { width: 1.3rem; height: 1.3rem; }
.hud-pill.coins.pulse { animation: coin-pulse .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes coin-pulse { 30% { transform: scale(1.1); } }

.hud-hearts {
  display: flex; gap: .1rem; margin-left: auto; align-items: center;
  padding: .34rem .45rem;
  background: rgba(255,255,254,.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--emboss), 0 4px 12px -6px rgba(45,38,25,.25);
}
.heart { width: .92rem; height: .92rem; }
.heart.empty svg { filter: grayscale(1) opacity(.3); }
.heart.half svg { filter: saturate(.6) opacity(.75); }
.hud-hearts.bump { animation: hearts-bump .6s ease; }
.hud-hearts.lose { animation: hearts-lose .6s ease; }
@keyframes hearts-bump { 35% { transform: scale(1.15); } }
@keyframes hearts-lose { 25%, 75% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }

.hud-sound, .hud-mode {
  height: 36px; display: inline-flex; align-items: center; gap: .3rem;
  padding: 0 .6rem; font-size: .84rem; border-radius: 999px;
  flex-shrink: 0;
  background: rgba(255,255,254,.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: var(--emboss), 0 4px 12px -6px rgba(45,38,25,.2);
  color: var(--ink-2);
}
.hud-sound { width: 36px; padding: 0; justify-content: center; }
.hud-sound.off { opacity: .6; }
.hud-mode { font-family: var(--serif); font-weight: 600; }
.hud-mode .mode-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink-2); opacity: .5; }
.hud-mode .mode-dot.on { background: var(--verde); opacity: 1; box-shadow: 0 0 6px rgba(95,127,86,.7); }
.hud-mode[data-mode="servicio"] { color: var(--verde-d); }
.hud-mode:active, .hud-sound:active { transform: translateY(1px); }

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

.cover-scene { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem 1.3rem; }
.cover {
  width: 100%; max-width: 400px; text-align: center;
  background: linear-gradient(180deg, #ffffff, #faf9f5);
  border: 1px solid var(--line);
  border-radius: 8px 22px 22px 8px;
  box-shadow: var(--emboss), var(--card-shadow-lg);
  padding: 2.4rem 1.8rem 2rem;
  position: relative;
}
.cover::before {
  content: ''; position: absolute; left: 12px; top: 14px; bottom: 14px; width: 1px;
  background: repeating-linear-gradient(180deg, var(--line) 0 10px, transparent 10px 20px);
}
.cover-over { font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .6rem; }
.cover h1 { font-size: 3.4rem; font-weight: 700; color: var(--rojo); letter-spacing: -.01em; line-height: 1; }
.cover-sub { font-family: var(--hand); font-size: 1.6rem; color: var(--ink-2); margin: .2rem 0 1.1rem; }
.cover-icons { display: flex; justify-content: center; align-items: flex-end; gap: 1.4rem; margin-bottom: .2rem; padding-bottom: 12px; position: relative; }
.cover-icons span { width: 62px; height: 62px; filter: drop-shadow(0 7px 5px rgba(45,38,25,.22)); }
/* los platos de la portada, parados en su repisita */
.cover-icons::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: 0; height: 9px;
  background: linear-gradient(180deg, #ffffff 0 40%, #e9e6dd 40% 100%);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 #fff, 0 8px 14px -6px rgba(45,38,25,.35);
}
.cover-quote {
  font-size: .98rem; line-height: 1.65; color: var(--ink-2);
  border-bottom: 1px dashed var(--line);
  padding: 1rem .2rem; margin: .6rem 0 1.4rem;
}
.cover-actions { display: flex; flex-direction: column; gap: .6rem; }
.cover-fs { margin-top: 1rem; font-size: .9rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.cover-fs .fs-ic { margin-right: .25rem; }
.no-fs .cover-fs { display: none; }

/* ============================================================
   COCINA — dos mundos: la hueca (crema) y tu cocina (blanco)
   ============================================================ */

.screen-fixed.active {
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 0 0 calc(8px + env(safe-area-inset-bottom));
}
.barra { display: flex; flex-direction: column; height: 100%; width: 100%; min-height: 0; }

/* --- LA HUECA: fondo cálido donde vive el comensal --- */
.comensal {
  flex-shrink: 0;
  padding: calc(var(--hud-h) + env(safe-area-inset-top) + .2rem) 1.1rem 1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .3rem;
  min-height: 172px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, var(--hueca) 0%, var(--hueca-2) 100%);
}
.mostrador-note { font-size: 1.3rem; color: #8a7a5f; text-align: center; max-width: 30ch; }

/* el comensal es un personaje en la barra */
.com-scene {
  width: 100%; max-width: 400px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  animation: com-in .5s cubic-bezier(.2, 1.1, .35, 1) both;
}
@keyframes com-in { from { opacity: 0; transform: translateY(-14px); } }
.com-who { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.com-avatar {
  width: 76px; height: 76px; padding: 8px;
  background: linear-gradient(180deg, #ffffff, #f4f1e9);
  border: 1px solid rgba(60,55,45,.14); border-radius: 50%;
  box-shadow: var(--emboss), 0 10px 22px -10px rgba(70,50,20,.45);
}
.com-name { font-size: .95rem; font-weight: 600; color: #6d5f47; }
.com-crown {
  position: absolute; top: -.5rem; right: -.3rem; z-index: 2;
  width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: #fff;
  background: linear-gradient(180deg, #dcae4a, var(--oro));
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(160,110,20,.4);
}
.com-waiting {
  position: absolute; top: -.35rem; left: -.9rem; z-index: 2;
  font-size: .72rem; font-weight: 700; color: #857452;
  background: rgba(255,255,254,.9); border: 1px solid rgba(60,55,45,.14);
  border-radius: 999px; padding: .1rem .45rem;
  box-shadow: 0 2px 6px -2px rgba(70,50,20,.3);
}

/* el globo de pedido */
.com-order { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.com-bubble {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  background: linear-gradient(180deg, #ffffff, #fbfaf6);
  border: 1px solid rgba(60,55,45,.13);
  border-radius: 18px 18px 18px 5px;
  box-shadow: var(--emboss), 0 10px 24px -12px rgba(70,50,20,.4);
  padding: .55rem .85rem;
}
.com-bubble::before {
  content: ''; position: absolute; left: -7px; bottom: 8px; width: 12px; height: 12px;
  background: #fbfaf6; border-left: 1px solid rgba(60,55,45,.13); border-bottom: 1px solid rgba(60,55,45,.13);
  transform: rotate(45deg); border-radius: 0 0 0 3px;
}
.com-dish { width: 44px; height: 44px; flex-shrink: 0; filter: drop-shadow(0 2px 2px rgba(45,38,25,.15)); }
.com-ask { display: flex; flex-direction: column; min-width: 0; font-size: 1.08rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.com-ask small { font-family: var(--hand); font-size: 1.02rem; font-weight: 400; color: var(--ink-2); }
.com-bar-wrap {
  display: block; height: 5px; border-radius: 999px; margin: 0 .3rem;
  background: rgba(60,55,45,.14); box-shadow: inset 0 1px 2px rgba(45,38,25,.18);
  overflow: hidden;
}
.com-bar {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(180deg, #86a97c, var(--verde));
  transform-origin: left; transition: transform .25s linear;
}
.comensal.urgent .com-bar { background: linear-gradient(180deg, #d97a5f, var(--rojo)); }
.com-serve {
  align-self: center;
  padding: .7rem 1.15rem;
  font-size: 1.05rem; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #7da272, var(--verde) 45%, var(--verde-d));
  border: 1px solid rgba(60, 90, 50, .5);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(45,38,25,.18), 0 8px 18px -8px rgba(76,106,69,.65);
  text-shadow: 0 -1px 0 rgba(0,0,0,.15);
  transition: transform .12s ease, box-shadow .12s ease;
}
.com-serve:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.22); }
.com-serve[disabled] {
  background: rgba(255,255,254,.75); color: #a99a7d; border: 1px solid rgba(60,55,45,.14);
  box-shadow: none; text-shadow: none; cursor: default;
}

/* conversar con el comensal: chisme (+paciencia) o despedirlo */
.com-chat { display: flex; gap: .45rem; margin: .1rem .2rem 0; }
.chat-btn {
  padding: .28rem .6rem; font-family: var(--hand); font-size: .98rem; font-weight: 600;
  color: #6d5f47;
  background: rgba(255,255,254,.85);
  border: 1px solid rgba(60,55,45,.16); border-radius: 999px;
  box-shadow: 0 2px 6px -2px rgba(70,50,20,.3);
  white-space: nowrap;
}
.chat-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(45,38,25,.15); }
.chat-btn.chisme[disabled] { opacity: .4; cursor: default; }
.chat-btn.adios { color: #a06a52; }

/* --- EL MOSTRADOR: la repisa que separa los dos mundos.
       Los platos listos se paran encima, como en la vitrina. --- */
.mostrador { flex-shrink: 0; position: relative; z-index: 3; padding: 0 1rem; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--hueca-2) 0%, var(--hueca-2) 46%, transparent 46%); }
.barra-linea {
  height: 20px; border-radius: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f1ea 42%, #e3dfd4 46%, #d8d3c5 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 rgba(45,38,25,.06),
    0 18px 28px -12px rgba(70,50,20,.5);
}
.barra-linea::after {
  content: ''; position: absolute; left: 4%; right: 4%; top: 100%; height: 26px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(45,38,25,.13), transparent 75%);
  pointer-events: none;
}
/* platos listos DE PIE sobre el mostrador: en flujo (ocupan su propio
   espacio, jamás tapan al comensal), pisando la repisa con -7px */
.ready-strip {
  position: relative; z-index: 2;
  display: none; align-items: flex-end; gap: 1rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: .3rem .4rem 0;
  margin-bottom: -7px;
}
.ready-strip::-webkit-scrollbar { height: 0; }
.ready-strip.has { display: flex; }
/* centrados cuando caben, scroll cuando no */
.ready-chip:first-of-type { margin-left: auto; }
.ready-chip:last-of-type { margin-right: auto; }
.ready-label { display: none; }
.ready-chip { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .1rem; pointer-events: auto; }
.ready-chip .item-card { width: auto; padding: 0; background: none; border: none; box-shadow: none; }
.ready-chip .item-card .icon {
  width: 56px; height: 56px;
  filter: drop-shadow(0 7px 4px rgba(70,50,20,.28));
}
.ready-chip .item-card .name { display: none; }
.ready-chip .item-card .badge { top: -.2rem; right: -.4rem; }
.chip-acts { display: flex; gap: .25rem; }
.chip-btn {
  padding: .22rem .55rem; font-size: .74rem; font-weight: 600; border-radius: 8px;
  color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 4px -1px rgba(45,38,25,.3);
}
.chip-btn.serve { background: linear-gradient(180deg, #7da272, var(--verde-d)); }
.chip-btn.sell  { background: linear-gradient(180deg, #4e453b, #35302a); }
.chip-btn.toss  { background: var(--btn-white); color: var(--ink-2); text-shadow: none; border: 1px solid var(--line); }
.chip-btn:active { transform: translateY(1px); }

/* --- TU COCINA (papel blanco): la mesa en perspectiva --- */
.cocina {
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  padding: .7rem 1.1rem .4rem;
  padding-right: 76px;                    /* carril de la navegación */
}

/* ============================================================
   LA ENCIMERA — lo tuyo, a la vista y al alcance del pulgar.
   Nada de cajones: si es un objeto, se arrastra o se toca.
   ============================================================ */

.encimera {
  flex: 0 1 auto; min-height: 0; max-height: 46%;
  display: flex; flex-direction: column; gap: .15rem;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  margin-top: .2rem;
}
.encimera::-webkit-scrollbar { width: 0; }
.repisa { flex-shrink: 0; }
.repisa-label {
  display: block; font-size: 1.02rem; color: #7d5a48;
  margin-bottom: .02rem; padding-left: .3rem;
}
.repisa-fila { display: flex; gap: .12rem; flex-wrap: wrap; padding: .05rem 0 .25rem; }
/* la repisa de utensilios se lee como una tabla de madera colgada */
.repisa-tools .repisa-fila {
  background: linear-gradient(180deg, rgba(253,247,236,.62), rgba(247,239,224,.42));
  border-radius: 13px; padding: .28rem .3rem .36rem;
  box-shadow: var(--emboss), 0 3px 8px -5px rgba(120,70,40,.4);
}

.objeto {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .02rem;
  width: 60px; padding: .2rem .05rem .05rem;
  touch-action: none;                     /* el arrastre lo maneja JS */
  transition: transform .16s var(--plop, cubic-bezier(.3,1.6,.4,1)), opacity .15s ease;
  animation: objeto-aterriza .3s cubic-bezier(.3,1.6,.4,1) both;
}
@keyframes objeto-aterriza { from { opacity: 0; transform: translateY(-12px) scale(.82); } }
.objeto-icono {
  width: 2.3rem; height: 2.3rem;
  filter: saturate(1.12) drop-shadow(0 4px 3px rgba(120,70,45,.32));
}
/* sin sombra elíptica un objeto cenital se ve pegado como sticker */
.objeto-sombra {
  display: block; width: 1.65rem; height: 6px; margin-top: -3px; border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(120,65,45,.38), transparent 72%);
}
.objeto-nombre { font-size: .59rem; line-height: 1.05; color: var(--ink); text-align: center; margin-top: .06rem; }
.objeto:active { transform: scale(.93); }
.objeto.agotado { opacity: .36; filter: grayscale(.65); }

.objeto-cant {
  position: absolute; top: 0; right: .32rem; z-index: 2;
  min-width: 1.02rem; height: 1.02rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .58rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, var(--rojo), var(--rojo-d));
  border: 1.5px solid var(--page);
  border-radius: 999px; padding: 0 .2rem;
  box-shadow: 0 2px 4px rgba(120,45,30,.4);
}
.objeto-vida { display: flex; gap: 1.5px; margin-top: .08rem; padding: 2px 3px; border-radius: 999px; background: rgba(93,107,131,.16); }
.objeto-vida i { width: 3px; height: 5px; border-radius: 1px; background: var(--azul); }
.objeto-vida i.gastado { background: var(--ink-2); opacity: .22; }

/* lo que pide el paso se ofrece solo: no hay que leer instrucciones */
.objeto.sugerido .objeto-icono { animation: sugerido-latir 1.4s ease-in-out infinite; }
.objeto.sugerido::after {
  content: ''; position: absolute; inset: .1rem .25rem 1rem; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,152,47,.5), transparent 68%);
}
@keyframes sugerido-latir { 50% { transform: scale(1.13) translateY(-4px); } }

/* la copia que sigue al dedo mientras arrastras */
.objeto-fantasma {
  position: fixed; z-index: 300; pointer-events: none;
  width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem;
  filter: drop-shadow(0 12px 10px rgba(80,40,25,.5));
  animation: fantasma-alza .16s cubic-bezier(.3,1.6,.4,1) both;
}
@keyframes fantasma-alza { from { transform: scale(.7); } to { transform: scale(1.14); } }

.encimera-vacia { font-size: 1.05rem; color: #7d5a48; text-align: center; padding: .6rem; }
.encimera-comprar {
  align-self: center; flex-shrink: 0;
  font-family: var(--hand); font-size: 1.05rem; color: #7d5a48;
  background: rgba(253,247,236,.7); border: 1px dashed rgba(120,70,45,.32);
  border-radius: 999px; padding: .2rem .9rem; margin: .1rem 0 .2rem;
}
.encimera-comprar:active { transform: translateY(1px); }
.cocina-riddle {
  flex-shrink: 0; text-align: center;
  display: flex; flex-direction: column; gap: .05rem;
  min-height: 3.2rem; justify-content: center;
  cursor: pointer;
}
.cocina-riddle:active .riddle-hint { transform: scale(.97); }
.riddle-hint { transition: transform .12s ease; }
.riddle-label { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.riddle-hint { font-family: var(--hand); font-size: 1.65rem; line-height: 1.2; color: var(--azul); }
.cocina-riddle.done .riddle-hint { color: var(--verde-d); }

.mesa-persp { flex-shrink: 0; perspective: 1200px; position: relative; }
/* la sombra que la mesa proyecta en el piso de papel */
.mesa-persp::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -16px; height: 26px;
  background: radial-gradient(50% 100% at 50% 40%, rgba(70,50,20,.22), transparent 75%);
  filter: blur(3px); z-index: -1;
}
/* LA HORNILLA — el único punto oscuro de la escena, y por eso atrae la
   mirada (ref-encimera-cenital / ref-hornilla-vapor) */
.mesa.hornilla {
  position: relative;
  width: fit-content; margin: 0 auto;      /* la hornilla es del tamaño de la olla, no del ancho */
  padding: .8rem;
  border-radius: 22px;
  overflow: hidden;                        /* que ni parrillas ni brasa se salgan del fogón */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #5a4260 0%, var(--fogon) 55%, var(--fogon-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -6px 14px rgba(0,0,0,.4),
    0 14px 26px -12px rgba(60,35,50,.6);
}
/* el aro de hierro de la hornilla, bajo la olla */
.mesa.hornilla::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 122%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(0,0,0,.4) 0deg 3deg, transparent 3deg 45deg);
  pointer-events: none;
}
/* la brasa: se enciende cuando hay algo cocinándose */
.mesa.hornilla::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, rgba(217,95,67,.6) 52%, transparent 66%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.mesa.hornilla.encendida::after { opacity: 1; animation: brasa-latir 1.7s ease-in-out infinite; }
@keyframes brasa-latir { 50% { opacity: .5; } }

.cocina-surface { display: flex; align-items: center; justify-content: center; position: relative; }
.cocina-surface .plus { font-size: 1.9rem; color: var(--ink-2); opacity: .55; }
.cocina-surface.shake { animation: shake .4s ease; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.cocina-surface.success { animation: pop .5s ease; }
@keyframes pop { 40% { transform: scale(1.06); } }

/* vapor saliendo de la olla */
.olla-vapor { position: absolute; left: 50%; top: -4%; z-index: 4; pointer-events: none; }
.olla-vapor i {
  position: absolute; bottom: 0; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,248,240,.55); opacity: 0;
}
.cocina-surface:has(.slot.filled) .olla-vapor i { animation: vapor-sube 2.6s ease-out infinite; }
.olla-vapor i:nth-child(1) { left: -19px; animation-delay: 0s; }
.olla-vapor i:nth-child(2) { left: -2px;  animation-delay: .85s; }
.olla-vapor i:nth-child(3) { left: 15px;  animation-delay: 1.7s; }
@keyframes vapor-sube {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  25%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(-58px) scale(1.9); }
}

/* LA OLLA — redonda, de peltre, con el guiso adentro */
.slot {
  position: relative; z-index: 2;
  width: clamp(96px, 27vw, 124px); height: clamp(96px, 27vw, 124px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  border: none; border-radius: 50%;
  background:
    radial-gradient(circle at 40% 30%, #cfc0d8 0 4%, #a996b4 24%, #8a7796 60%, #5f5069 100%);
  box-shadow:
    inset 0 5px 12px rgba(255,255,255,.22),
    inset 0 -9px 16px rgba(0,0,0,.42),
    0 8px 16px -5px rgba(45,25,45,.55);
  transition: transform .18s cubic-bezier(.3,1.6,.4,1), box-shadow .18s ease;
}
/* el fondo de la olla */
.slot::before {
  content: ''; position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle at 44% 34%, #6d5c79, #40354a 78%);
  box-shadow: inset 0 4px 11px rgba(0,0,0,.5);
}
.slot .slot-add {
  position: relative; z-index: 2;
  font-size: .95rem; line-height: 1.1; color: rgba(255,240,228,.62); padding: 0 16%;
  transition: opacity .15s ease;
}
.slot.filled { background:
    radial-gradient(circle at 40% 30%, #d4c6dc 0 4%, #ae9cba 24%, #8a7796 60%, #5f5069 100%); }
.slot.over { transform: scale(1.09); box-shadow: inset 0 5px 12px rgba(255,255,255,.28), 0 0 0 5px rgba(201,152,47,.6), 0 12px 22px -5px rgba(45,25,45,.6); }
.slot.over .slot-add { opacity: 0; }
.slot .item-card {
  position: relative; z-index: 3;
  width: 82%; pointer-events: none; border: none; background: none; box-shadow: none;
  animation: cae-en-olla .4s cubic-bezier(.3,1.6,.4,1) both;
}
@keyframes cae-en-olla { from { opacity: 0; transform: translateY(-34px) scale(1.3) rotate(-10deg); } }
.slot .item-card .name { color: #fff3e8; text-shadow: 0 1px 3px rgba(30,15,30,.7); }

.mesa-action { min-height: 0; display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .55rem; flex-wrap: wrap; }
.mesa-action:empty { display: none; margin-top: 0; }
.cook-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.9rem;
  font-size: 1.28rem; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #e06a4c 0%, var(--rojo) 55%, var(--rojo-d) 100%);
  border: none; border-bottom: 4px solid #8e2c17;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 3px rgba(45,38,25,.18), 0 10px 24px -8px rgba(200,68,44,.55);
  text-shadow: 0 -1px 0 rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease;
  animation: cook-in .25s cubic-bezier(.2, 1.2, .4, 1) both;
}
@keyframes cook-in { from { opacity: 0; transform: scale(.9); } }
.cook-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.cook-btn .cook-ic { width: 1.6rem; height: 1.6rem; }
.cook-btn.known { background: linear-gradient(180deg, #7da272, var(--verde) 45%, var(--verde-d)); border-color: rgba(60,90,50,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 3px rgba(45,38,25,.18), 0 10px 24px -8px rgba(76,106,69,.55); }
.cook-btn.guardar { background: var(--btn-white); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--emboss), 0 2px 6px rgba(45,38,25,.14); text-shadow: none; font-size: 1rem; }
/* "+ Agregar" convive con las acciones aprendidas, en blanco embosado */
.cook-btn.add {
  background: var(--btn-white); color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--emboss), 0 2px 6px rgba(45,38,25,.14); text-shadow: none;
  font-size: 1.05rem;
}
.cook-btn.add .cook-ic { display: none; }
.mesa-nope { font-family: var(--hand); font-size: 1.2rem; color: var(--ink-2); }
.mesa-clear { display: block; margin: .45rem auto 0; font-size: .85rem; color: #7d5a48; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   FICHAS (item-card)
   ============================================================ */

.item-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .5rem .3rem .45rem;
  background: linear-gradient(180deg, #ffffff, #f8f7f2);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--emboss), 0 4px 12px -6px rgba(45,38,25,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.item-card:hover { transform: translateY(-2px); z-index: 2; }
.item-card:active { transform: scale(.95); }
.item-card .icon { width: 2.7rem; height: 2.7rem; filter: drop-shadow(0 2px 2px rgba(45,38,25,.14)); }
.item-card .name { font-size: .78rem; line-height: 1.15; color: var(--ink); text-align: center; }
.item-card.dragging { opacity: .4; }
.item-card.spent { opacity: .35; }
.item-card.dull-tool { opacity: .5; border-style: dashed; }
.item-card .badge {
  position: absolute; top: -.4rem; right: -.35rem; min-width: 1.3rem; height: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #d95c42, var(--rojo-d));
  border-radius: 999px; padding: 0 .3rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 5px rgba(45,38,25,.25);
}
.item-card .wear { font-size: .6rem; color: var(--verde-d); letter-spacing: .08em; }
.item-card .wear.low { color: var(--oro); }
.item-card .wear.dull { color: var(--rojo); }
.item-card.shake { animation: shake .45s ease; }

/* ============================================================
   BOCETO → COLOR
   ============================================================ */

.boceto svg, .boceto .icon svg, span.boceto svg {
  filter: grayscale(1) brightness(1.12) contrast(.8) opacity(.65);
  transition: filter .4s ease;
}
.boceto { position: relative; }
.boceto::after {
  content: ''; position: absolute; inset: 10% 12%; pointer-events: none;
  border-radius: 12px; opacity: .3;
  background: repeating-linear-gradient(-38deg, transparent 0 4px, rgba(47,43,37,.09) 4px 5px);
}
.paint-in svg { animation: paint-fill 1.25s ease both; }
.paint-in { position: relative; overflow: visible; }
.paint-in::before {
  content: ''; position: absolute; inset: -4%; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.9) 46%, rgba(255,250,230,.55) 52%, transparent 66%);
  background-size: 300% 100%; background-position: 120% 0;
  animation: paint-sweep 1.25s ease both;
}
@keyframes paint-fill {
  0%   { filter: grayscale(1) brightness(1.12) contrast(.8) opacity(.65); }
  35%  { filter: grayscale(.7) brightness(1.06) opacity(.9); }
  100% { filter: none; }
}
/* el destello tiene que SALIR del icono al terminar: con background-size
   300% y un final de -140% la banda blanca se quedaba aparcada encima.
   Sobre el papel blanco de antes no se notaba; sobre la encimera cálida
   dejaba un parche. Se va del todo y además se desvanece. */
@keyframes paint-sweep {
  0%   { background-position: 120% 0; opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: -240% 0; opacity: 0; }
}

/* ============================================================
   NAVEGACIÓN FLOTANTE
   ============================================================ */

/* las pestañas asoman por el borde derecho, como los separadores de
   colores de un recetario real — no son botones flotando en el aire */
.float-nav {
  position: absolute; right: 0; top: 56%; transform: translateY(-50%);
  z-index: 46; display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
}
.float-nav.hidden { display: none; }
.fab {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem .55rem .6rem;
  background: linear-gradient(270deg, var(--page) 65%, var(--page-2));
  border-radius: 16px 0 0 16px;
  box-shadow: -4px 3px 12px -6px rgba(90,45,35,.5), inset 0 0 0 1px rgba(255,255,255,.6);
  transition: transform .16s var(--plop), padding-right .16s ease, box-shadow .16s ease;
  touch-action: manipulation;
}
.fab-icon {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffffff, #f2f0ea);
  border-radius: 50%;
  box-shadow: var(--emboss), 0 2px 4px rgba(45,38,25,.18);
}
.fab-main .fab-icon { width: 40px; height: 40px; padding: 7px; }
.fab-mini .fab-icon { width: 34px; height: 34px; padding: 6px; }
.fab-tag { font-size: .74rem; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
/* mercado: la pestaña principal, coral como el sello de la hueca —
   la que más invita a tocarla */
.fab-main {
  background: linear-gradient(270deg, #e8825c 55%, var(--rojo));
  box-shadow: -5px 4px 14px -4px rgba(150,45,25,.55), inset 0 0 0 1px rgba(255,255,255,.2);
}
.fab-main .fab-tag { color: #fff4ea; text-shadow: 0 1px 1px rgba(120,30,14,.4); }
.fab:active { transform: translateX(3px); padding-right: .35rem; }
.fab:active .fab-icon { transform: scale(.94); }

.float-back {
  position: absolute; left: .7rem; top: calc(env(safe-area-inset-top) + .55rem);
  z-index: 52; width: 44px; height: 44px; font-size: 1.25rem; color: var(--ink);
  background: linear-gradient(180deg, var(--page), var(--page-2));
  border: none; border-radius: 14px;
  box-shadow: var(--emboss), 0 2px 3px rgba(90,45,35,.12), 0 10px 22px -10px rgba(90,45,35,.45);
}
/* aviso de versión nueva: papel sobre la escena, con su botón de barro */
.update-aviso {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(140%);
  bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 120;
  display: flex; align-items: center; gap: .8rem;
  width: max-content; max-width: min(380px, calc(100% - 1.6rem));
  padding: .7rem .95rem;
  background: linear-gradient(178deg, var(--page), var(--page-2));
  border-left: 5px solid var(--rojo);
  border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(90,45,35,.6), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .4s var(--plop);
}
.update-aviso.visible { transform: translateX(-50%) translateY(0); }
.update-txt { font-size: .95rem; font-weight: 600; color: var(--ink); }
.update-btn {
  flex-shrink: 0; padding: .45rem 1rem;
  font-size: .95rem; font-weight: 700; color: #fff4ea;
  background: linear-gradient(180deg, #e06a4c, var(--rojo-d));
  border: none; border-bottom: 3px solid #8e2c17; border-radius: 11px;
  text-shadow: 0 1px 1px rgba(120,30,14,.5);
}
.update-btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.update-btn:disabled { opacity: .6; }

/* en pantallas angostas el rótulo del modo sobra: el puntito ya lo dice,
   y así el HUD entero cabe sin comerse su propio margen */
@media (max-width: 380px) {
  .hud-mode .mode-txt { display: none; }
  .hud-mode { padding: 0 .5rem; }
}

/* donde hay flecha de volver, el HUD se corre para no quedar debajo.
   Y como ahí no estás en servicio, la fama de la hueca no pinta nada:
   se oculta y así todo cabe sin apretujarse. */
body:has(.float-back:not(.hidden)) .hud { padding-left: 3.9rem; }
body:has(.float-back:not(.hidden)) .hud-hearts { display: none; }
.float-back.hidden { display: none; }
.float-back:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(45,38,25,.15); }

/* ============================================================
   RECETARIO — estantería con libros DE PIE
   ============================================================ */

#screen-shelf, #screen-receta, #screen-mercado {
  padding-top: calc(var(--hud-h) + env(safe-area-inset-top) + .6rem);
}
.page-head { text-align: center; padding: .7rem 1.2rem .3rem; }
.page-head h2 { font-size: 2.3rem; font-weight: 600; color: var(--rojo); }
.shelf-stats { display: flex; justify-content: center; gap: 2.2rem; margin: .4rem 0 .1rem; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat-n { font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.stat-l { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); }
.shelf-goal { font-size: 1.2rem; color: var(--azul); }

.shelf-books { padding: .8rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 2rem; }
/* cada región es una repisa: etiqueta vertical (ref. librería) + libros */
.shelf-row { display: grid; grid-template-columns: 1.5rem 1fr; gap: .5rem; align-items: end; }
.shelf-region {
  writing-mode: vertical-rl; transform: rotate(180deg);
  justify-self: center; align-self: end; padding-bottom: 1rem;
  font-size: .66rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
  border-left: 1px solid var(--line); padding-left: .45rem;
}
.shelf-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
  align-items: end;
  position: relative; padding-bottom: 13px;
}
/* la repisa donde se paran los libros: madera, no una barra blanca */
.shelf-grid::after {
  content: ''; position: absolute; left: -.5rem; right: -.5rem; bottom: 0; height: 10px;
  background: linear-gradient(180deg, #c79a6f 0 38%, #a87b52 38% 100%);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,235,210,.55), 0 9px 15px -8px rgba(90,45,35,.5);
}
.book {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem;
  background: linear-gradient(180deg, #ffffff, #f7f5ef);
  border: 1px solid var(--line);
  border-radius: 5px 12px 12px 5px;
  box-shadow: var(--emboss), 0 3px 5px rgba(45,38,25,.08), 0 14px 22px -12px rgba(45,38,25,.3);
  padding: 1rem .45rem .7rem;
  min-height: 158px;
  position: relative; margin-bottom: 2px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.book:hover { transform: translateY(-4px); }
.book:active { transform: scale(.97); }
/* lomo del libro */
.book::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(90deg, rgba(60,55,45,.14), rgba(60,55,45,.03));
  border-radius: 5px 0 0 5px;
}
.book.locked { border-style: dashed; background: none; box-shadow: none; }
.book.locked::before { display: none; }
.book-icon { width: 56px; height: 56px; filter: drop-shadow(0 3px 3px rgba(45,38,25,.15)); }
.book-icon.dim { opacity: .55; }
.book-title { font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.book-city { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.book-progress { min-height: 1.1rem; margin-top: auto; }
.book-progress .dots { color: var(--verde); font-size: .64rem; letter-spacing: .16em; }
.book-locked { font-size: 1rem; color: var(--ink-2); }
.stamp-mini {
  display: inline-block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rojo); border: 1.5px solid var(--rojo); border-radius: 6px; padding: .05rem .4rem;
  transform: rotate(-3deg); opacity: .85;
}
.shelf-locked { text-align: center; font-size: 1.15rem; color: var(--ink-2); }
.page-footnote { text-align: center; font-size: .9rem; font-style: italic; color: var(--ink-2); padding: 0 2rem 2.4rem; }

/* ============================================================
   LA HOJA — papel puesto sobre el mesón. Todo lo que no es la
   cocina se lee sobre papel, nunca flotando sobre la encimera
   (ref-recetario-sobre-la-escena).
   ============================================================ */

.hoja {
  position: relative; z-index: 1;
  max-width: 470px; margin: .3rem auto 0;
  padding: 1.1rem .9rem 1.4rem;
  border-radius: 8px 18px 10px 16px;
  background-image:
    var(--grain),
    linear-gradient(178deg, var(--page), var(--page-2) 72%, #f0e5d2);
  box-shadow: 0 16px 34px -18px rgba(90,45,35,.6), inset 0 1px 0 rgba(255,255,255,.65);
}
/* el margen rojo del cuaderno, a la izquierda */
.hoja::before {
  content: ''; position: absolute; left: 1.5rem; top: .5rem; bottom: .5rem; width: 1px;
  background: repeating-linear-gradient(180deg, rgba(200,68,44,.3) 0 6px, transparent 6px 12px);
  pointer-events: none;
}

/* ============================================================
   RECETA — EL MOLESKINE (una hoja por paso)
   ============================================================ */

.moleskine-wrap { max-width: 470px; margin: 0 auto; padding: 0 1.1rem 2.2rem; }
.back-link { font-size: .95rem; color: var(--ink-2); margin-bottom: .5rem; }

.mk-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.mk-dish { width: 82px; height: 82px; flex-shrink: 0; filter: drop-shadow(0 4px 5px rgba(45,38,25,.18)); }
.mk-head-txt { flex: 1; min-width: 0; }
.mk-head h2 { font-size: 2.1rem; font-weight: 600; color: var(--rojo); line-height: 1.02; }
.mk-city { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); margin-top: .25rem; }
.mk-intro { font-style: italic; font-size: .9rem; color: var(--ink-2); line-height: 1.45; margin-top: .3rem; }

/* el cuaderno: tapas redondeadas, banda elástica, cinta */
.mk-book {
  position: relative;
  background: linear-gradient(180deg, #fffefa, #f8f5ec);
  border: 1px solid var(--line);
  border-radius: 12px 20px 20px 12px;
  box-shadow: var(--emboss), 0 2px 3px rgba(45,38,25,.07), 0 28px 55px -22px rgba(45,38,25,.45);
  padding: 1.1rem 1.2rem .5rem;
}
/* pila de hojas debajo (el grosor del cuaderno) */
.mk-book::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: -5px; height: 5px;
  background:
    linear-gradient(180deg, #efece2 0 1.5px, #fff 1.5px 2.5px, #e8e4d8 2.5px 4px, #fff 4px 5px);
  border-radius: 0 0 14px 14px;
  z-index: -1;
}
/* la banda elástica */
.mk-band {
  position: absolute; right: 16px; top: -7px; bottom: -9px; width: 9px; z-index: 6;
  background: linear-gradient(90deg, #37322b, #5a5348 45%, #2b2723);
  border-radius: 5px;
  box-shadow: 1px 2px 5px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events: none;
}
/* la cinta marcapáginas */
.mk-ribbon {
  position: absolute; right: 42px; top: -5px; width: 17px; height: 54px; z-index: 5;
  background: linear-gradient(180deg, #d95c42, #b93a24);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
  box-shadow: 2px 3px 6px rgba(0,0,0,.25);
  pointer-events: none;
}

/* la HOJA: rayada, con número fantasma, gira al pasar */
.mk-page {
  position: relative; min-height: 300px;
  display: flex; flex-direction: column; justify-content: center; gap: .65rem;
  padding: .8rem 2rem .8rem .1rem;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(93,107,131,.11) 31px 32px);
  backface-visibility: hidden;
}
.mk-page::before {
  content: attr(data-ghost);
  position: absolute; right: -.2rem; top: -2.2rem;
  font-family: var(--serif); font-size: 8.5rem; font-weight: 700; line-height: 1;
  color: rgba(47,43,37,.055);
  pointer-events: none; user-select: none;
}
.mk-page.turn-r { transform-origin: left center; animation: mk-turn .32s ease both; }
.mk-page.turn-l { transform-origin: left center; animation: mk-turn-back .32s ease both; }
@keyframes mk-turn { 0% { transform: none; } 46% { transform: perspective(1300px) rotateY(-76deg); opacity: .75; } 100% { transform: none; } }
@keyframes mk-turn-back { 0% { transform: none; } 46% { transform: perspective(1300px) rotateY(76deg) ; opacity: .75; } 100% { transform: none; } }

.mk-state { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.mk-state.done { color: var(--verde-d); }
.mk-state.mem { color: var(--rojo); }
.mk-page .step-hint { font-family: var(--hand); font-size: 1.85rem; line-height: 1.25; color: var(--azul); }
.mk-page .step-line { font-size: 1.15rem; line-height: 1.7; color: var(--ink); }
.step-shopnote { font-size: .9rem; color: var(--ink-2); font-style: italic; }
.step-icons { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.step-icons .op { color: var(--ink-2); }
.mini-item {
  display: inline-flex; flex-direction: column; align-items: center; gap: .12rem;
  min-width: 3.4rem; padding: .35rem .3rem;
  background: rgba(255,255,255,.75); border: 1px solid var(--line-soft); border-radius: 12px;
}
.mini-item svg { width: 2rem; height: 2rem; }
.mini-item small { font-size: .66rem; color: var(--ink-2); text-align: center; line-height: 1.1; }
.mini-item.res { border-color: rgba(95,127,86,.4); background: #f3f7f0; }
.step-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.mk-memoria { font-style: italic; font-size: 1.08rem; line-height: 1.85; color: var(--ink); }
.mk-firma { font-size: 1.7rem; text-align: right; color: var(--ink); }

/* pasar de hoja */
.mk-nav {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  border-top: 1px dashed var(--line);
  margin-top: .5rem; padding: .55rem .1rem .5rem;
}
.mk-arrow {
  width: 44px; height: 44px; font-size: 1.5rem; line-height: 1; color: var(--ink);
  background: var(--btn-white);
  border: 1px solid var(--line); border-radius: 50%;
  box-shadow: var(--emboss), 0 2px 5px rgba(45,38,25,.14);
}
.mk-arrow:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(45,38,25,.14); }
.mk-arrow[disabled] { opacity: .25; box-shadow: none; cursor: default; }
.mk-dots { display: flex; align-items: center; gap: .5rem; }
.mk-dot {
  width: 10px; height: 10px; border-radius: 50%; padding: 0;
  background: #ddd9cd; box-shadow: inset 0 1px 2px rgba(45,38,25,.25);
  transition: transform .15s ease, background .15s ease;
}
.mk-dot.done { background: var(--verde); }
.mk-dot.on { background: var(--rojo); transform: scale(1.35); box-shadow: inset 0 1px 1px rgba(0,0,0,.2), 0 1px 3px rgba(200,68,44,.4); }
.mk-dot.mem { border-radius: 3px; transform: rotate(45deg) scale(.9); background: #d8b0a4; }
.mk-dot.mem.on { background: var(--rojo); transform: rotate(45deg) scale(1.15); }

.mk-progress { text-align: center; font-size: 1.2rem; color: var(--azul); margin: .8rem 0 .6rem; }

.stamp {
  align-self: flex-start; flex-shrink: 0;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; text-align: center;
  color: var(--rojo); border: 2px solid var(--rojo); border-radius: 8px;
  padding: .25rem .45rem; transform: rotate(5deg); opacity: .8; line-height: 1.3;
}
.stamp.small { position: absolute; top: 1rem; right: 1rem; }
.stamp.big { font-size: .72rem; margin: 0 auto .4rem; transform: rotate(-4deg); }

/* ============================================================
   MERCADO — la estantería de la lona (víveres de pie)
   ============================================================ */

/* LA LONA — el puesto es un toldo de tela tendido sobre la vereda, con
   la mercadería encima. Antes flotaba sobre el fondo y no se leía como
   superficie (ref-encimera-cenital: todo se apoya en algo). */
.mercado-wrap {
  position: relative; z-index: 1;
  max-width: 470px; margin: .2rem auto 0;
  padding: 0 1.1rem 2rem;
}
.mercado-wrap::before {
  content: ''; position: absolute; inset: 2.4rem -.2rem 1rem;
  z-index: -1; border-radius: 10px 18px 12px 16px;
  background-image:
    repeating-linear-gradient(94deg, rgba(160,110,80,.05) 0 3px, transparent 3px 22px),
    linear-gradient(178deg, var(--page), var(--page-2) 70%, #f0e5d2);
  box-shadow: 0 14px 30px -16px rgba(90,45,35,.55), inset 0 1px 0 rgba(255,255,255,.6);
}
.lona-top {
  position: relative; z-index: 1;
  height: 16px; margin-bottom: .9rem;
  border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(90deg, #cf4b33 0 26px, var(--page) 26px 52px);
  box-shadow: 0 6px 14px -6px rgba(90,45,35,.4), inset 0 1px 0 rgba(255,255,255,.45);
}
/* el borde ondulado del toldo */
.lona-top::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 9px;
  background: radial-gradient(circle at 13px 0, transparent 12px, #cf4b33 12px 13px, transparent 13px) 0 0 / 26px 9px repeat-x;
  opacity: .55;
}
.mercado-title { font-size: 2.1rem; font-weight: 600; color: var(--rojo); }
.mercado-sub { font-family: var(--hand); font-size: 1.35rem; color: var(--ink-2); margin: .1rem 0 .6rem; }
.market-section {
  display: flex; align-items: baseline; gap: .7rem;
  font-size: .72rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-2); border: none;
  margin: 1.7rem 0 1rem;
}
.market-section::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* víveres DE PIE en la repisa */
.market-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 1.1rem .4rem; align-items: end;
  position: relative; padding-bottom: 12px;
}
/* el canto de la tabla donde se apoya la mercadería: madera, no una
   barra blanca flotando */
.market-grid::after {
  content: ''; position: absolute; left: -.5rem; right: -.5rem; bottom: 0; height: 9px;
  background: linear-gradient(180deg, #c79a6f 0 38%, #a87b52 38% 100%);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,235,210,.55), 0 8px 14px -8px rgba(90,45,35,.5);
}
/* el mensaje de "aún no hay nada" ocupa la fila entera, no una columna */
.sell-empty, .market-empty {
  grid-column: 1 / -1; text-align: center;
  font-size: 1.15rem; color: #7d5a48; padding: .5rem 0 .9rem;
}
.market-item {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
  background: none; border: none; box-shadow: none;
  padding: .2rem .15rem .35rem;
  transition: transform .13s ease;
}
.market-item:hover { transform: translateY(-3px); }
.market-item:active { transform: translateY(1px); }
.market-item .icon { width: 3.1rem; height: 3.1rem; filter: drop-shadow(0 7px 4px rgba(45,38,25,.2)); }
.market-item .name { font-size: .84rem; line-height: 1.2; color: var(--ink); }
.market-item .have { color: var(--ink-2); font-size: .78rem; }
.price.tag {
  font-size: .84rem; font-weight: 600; color: var(--ink);
  background: var(--btn-white); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: var(--emboss), 0 1px 2px rgba(45,38,25,.1);
  padding: .18rem .55rem;
}
.price.tag.sell-tag { color: var(--verde-d); border-color: rgba(95,127,86,.4); }
.price.tag.toss-tag { color: var(--ink-2); }
.sell-empty { font-size: 1.15rem; color: var(--ink-2); }

.market-books { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.market-book {
  display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center;
  background: linear-gradient(180deg, #ffffff, #f8f7f2);
  border: 1px solid var(--line); border-radius: 8px 16px 16px 8px;
  box-shadow: var(--emboss), var(--card-shadow);
  padding: .9rem .7rem .8rem;
}
.mb-icon { width: 52px; height: 52px; }
.mb-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.mb-city { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.mb-blurb { font-size: 1.05rem; color: var(--ink-2); line-height: 1.25; }
.buy-btn {
  margin-top: .35rem; padding: .45rem 1.1rem;
  font-size: .95rem; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #d95c42, var(--rojo-d));
  border: 1px solid rgba(120,30,14,.5); border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -4px rgba(200,68,44,.55);
  text-shadow: 0 -1px 0 rgba(0,0,0,.15);
}
.buy-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.22); }
.quick-link { display: block; margin: 1.6rem auto 0; font-size: 1rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   DESPENSA — hoja inferior con blur
   ============================================================ */

.modal.sheet { align-items: flex-end; padding: 0; }
.sheet-card {
  width: 100%; max-width: var(--frame); margin: 0 auto;
  max-height: 74vh; display: flex; flex-direction: column;
  background: rgba(255, 255, 254, .93);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -20px 60px -20px rgba(45,38,25,.45), var(--emboss);
  padding: .7rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
  animation: sheet-up .38s cubic-bezier(.2, .95, .3, 1) both;
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: .4; } }
.sheet-card::before {
  content: ''; align-self: center; width: 44px; height: 5px; border-radius: 999px;
  background: rgba(60,55,45,.18); margin-bottom: .5rem; flex-shrink: 0;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.sheet-title { font-size: 1.7rem; color: var(--ink); }
.sheet-close {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: var(--ink-2); border-radius: 50%;
  background: var(--btn-white); border: 1px solid var(--line);
  box-shadow: var(--emboss), 0 1px 2px rgba(45,38,25,.1);
}
.sheet-need { font-size: .95rem; color: var(--ink-2); margin: .2rem 0 .5rem; flex-shrink: 0; }
.sheet-need b { color: var(--rojo); }
.sheet-body { overflow-y: auto; min-height: 0; }
.sheet-sec { margin-bottom: .8rem; }
.sheet-sec-title { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; margin-bottom: .45rem; }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .55rem; }
.sheet-grid .item-card { min-width: 0; }
.sheet-empty { color: var(--ink-2); font-size: 1.1rem; }
.pick-card .name { font-size: .74rem; }
.pick-card.needed { border-color: rgba(95,127,86,.6); box-shadow: var(--emboss), 0 0 0 3px rgba(143,174,126,.3), 0 4px 12px -6px rgba(45,38,25,.2); }
.pick-card.just-bought { animation: bought-glow 1.2s ease; }
@keyframes bought-glow { 0%, 60% { box-shadow: 0 0 0 4px rgba(201,152,47,.45); } }
.buy-card .buy-price { font-size: .78rem; font-weight: 700; color: var(--rojo); background: rgba(200,68,44,.07); border-radius: 8px; padding: .1rem .45rem; }

/* ============================================================
   MODALES
   ============================================================ */

.modal {
  position: fixed; inset: 0; z-index: 80;
  display: none; align-items: center; justify-content: center;
  padding: 1.3rem;
  background: rgba(240, 236, 226, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.modal.open { display: flex; animation: modal-bg .3s ease both; }
@keyframes modal-bg { from { opacity: 0; } }

.paso-card, .celebra-card, .visita-card {
  width: 100%; max-width: 380px; text-align: center; position: relative;
  background: linear-gradient(180deg, #ffffff, #faf9f5);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--emboss), var(--card-shadow-lg);
  padding: 1.6rem 1.4rem 1.4rem;
  animation: card-in .42s cubic-bezier(.2, 1.15, .35, 1) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(22px) scale(.96); } }
.paso-icon { display: block; width: 84px; height: 84px; margin: 0 auto .5rem; filter: drop-shadow(0 4px 6px rgba(45,38,25,.18)); }
.paso-name { font-size: 1.9rem; color: var(--ink); margin-bottom: .3rem; }
.paso-line { font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); }
.paso-tech { font-size: .95rem; color: var(--ink); margin-top: .5rem; }
.paso-tech .tech-chip { display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: -0.4rem; }
.paso-reward { font-size: 1.35rem; color: var(--rojo); margin: .5rem 0 .8rem; }
.paso-card .btn-main.wide, .celebra-card .btn-main.wide, .visita-card .btn-main.wide { margin-top: .7rem; }

.mishap-card { border-color: rgba(200,68,44,.35); }
.mishap-icon { filter: grayscale(.4) drop-shadow(0 4px 6px rgba(45,38,25,.18)); }
.mishap-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1rem; }

.celebra-name { font-size: 2.1rem; color: var(--rojo); }
.celebra-city { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .4rem; }
.celebra-line { font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); }
.celebra-sell { font-size: 1.2rem; color: var(--verde-d); margin-top: .4rem; }
.celebra-reward { font-size: 1.5rem; color: var(--rojo); margin-top: .3rem; }
.celebra-burst {
  width: 130px; height: 130px; margin: 0 auto .3rem;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(201,152,47,.14) 0%, transparent 65%);
  border-radius: 50%;
  animation: burst-spin 7s linear infinite;
}
@keyframes burst-spin { to { transform: rotate(360deg); } }
.celebra-burst span { display: block; width: 96px; height: 96px; animation: burst-spin 7s linear infinite reverse; filter: drop-shadow(0 5px 8px rgba(45,38,25,.2)); }

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -12px; width: 8px; height: 13px;
  background: var(--tone, var(--oro)); border-radius: 2px;
  animation: confetti-fall 1.6s ease-in both;
}
.confetti i:nth-child(2n) { border-radius: 50%; }
@keyframes confetti-fall { to { transform: translateY(110vh) rotate(320deg); opacity: .6; } }

.visita-card { border-color: rgba(201,152,47,.5); }
.visita-badge {
  position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%);
  width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.05rem;
  background: linear-gradient(180deg, #dcae4a, var(--oro));
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 8px rgba(160,110,20,.4);
}
.visita-want { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: 1.02rem; color: var(--ink); margin-top: .6rem; }
.visita-want .vw-ic { width: 2rem; height: 2rem; }

/* la carta de la abuela */
.carta-card {
  width: 100%; max-width: 400px; max-height: 88vh;
  display: flex; flex-direction: column;
  background:
    repeating-linear-gradient(180deg, transparent 0 32px, rgba(93,107,131,.14) 32px 33px),
    linear-gradient(180deg, #ffffff, #fbfaf6);
  border: 1px solid var(--line);
  border-left: 10px solid transparent;
  border-image: repeating-linear-gradient(180deg, #cf4b33 0 10px, #f6ece0 10px 20px) 20;
  border-radius: 4px 18px 18px 4px;
  box-shadow: var(--emboss), var(--card-shadow-lg);
  animation: card-in .45s cubic-bezier(.2, 1.15, .35, 1) both;
}
.carta-scroll { overflow-y: auto; min-height: 0; padding: 1.4rem 1.4rem .6rem; }
.carta-stamp {
  float: right; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--azul); border: 1.5px solid var(--azul); border-radius: 6px;
  padding: .15rem .45rem; transform: rotate(4deg); opacity: .7;
}
.carta-title { font-size: 1.7rem; font-weight: 600; color: var(--rojo); margin-bottom: .7rem; }
.carta-body p { font-size: 1.05rem; line-height: 1.9; margin-bottom: .8rem; }
.carta-body b { color: var(--rojo); }
.carta-firma { font-family: var(--hand); font-size: 1.6rem; color: var(--ink); text-align: right; margin: .4rem 0 .8rem; }
.carta-name label { display: block; font-family: var(--hand); font-size: 1.35rem; margin-bottom: .35rem; }
.carta-input {
  width: 100%; font: inherit; font-size: 1.1rem; color: var(--ink);
  background: var(--ivory); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: inset 0 2px 5px rgba(45,38,25,.08);
  padding: .7rem .9rem; outline: none;
}
.carta-input:focus { border-color: var(--rojo); box-shadow: inset 0 2px 5px rgba(45,38,25,.08), 0 0 0 3px rgba(200,68,44,.14); }
.carta-foot { flex-shrink: 0; padding: .8rem 1.4rem 1.2rem; }

/* intro */
.intro-card { text-align: left; }
.intro-list { list-style: none; display: flex; flex-direction: column; gap: .9rem; margin: .8rem 0; }
.intro-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .98rem; line-height: 1.55; color: var(--ink-2); }
.intro-list b { color: var(--ink); }
.intro-ic { flex-shrink: 0; width: 2.4rem; height: 2.4rem; }
.intro-tip { font-size: 1.2rem; color: var(--azul); }

/* ============================================================
   COACH y TOAST
   ============================================================ */

/* el coach vive en el borde inferior, nunca sobre los botones */
/* la guía vive en el flujo, entre la mesa y el mesón: así no tapa
   justamente lo que te está pidiendo que agarres */
.coach { flex-shrink: 0; align-self: center; max-width: min(320px, 84vw); margin: .3rem 0 .1rem; pointer-events: none; }
.coach-bubble {
  font-family: var(--hand); font-size: 1.3rem; line-height: 1.3; color: #fff; text-align: center;
  background: rgba(47, 43, 37, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 16px; padding: .55rem 1rem;
  box-shadow: 0 10px 26px -10px rgba(45,38,25,.5);
  animation: coach-float 3s ease-in-out infinite;
}
@keyframes coach-float { 50% { transform: translateY(-4px); } }

/* ---------- Escena de diálogo (novela visual) ----------
   El personaje al frente, su voz en manuscrita grande, y un solo
   botón: el juego espera a que termines de escuchar. */
.modal.escena { align-items: flex-end; padding: 0 0 0; }
.escena-card {
  width: 100%; max-width: var(--frame); margin: 0 auto;
  position: relative;
  background: linear-gradient(180deg, #ffffff, #faf8f3);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 60px -18px rgba(45,38,25,.5), var(--emboss);
  padding: 3.2rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom));
  animation: escena-up .4s cubic-bezier(.2, 1.05, .3, 1) both;
}
@keyframes escena-up { from { transform: translateY(55%); opacity: .3; } }
.escena-avatar {
  position: absolute; top: -46px; left: 1.3rem;
  width: 92px; height: 92px; padding: 10px;
  background: linear-gradient(180deg, #ffffff, #f4f1e9);
  border: 1px solid var(--line); border-radius: 50%;
  box-shadow: var(--emboss), 0 14px 30px -12px rgba(45,38,25,.45);
}
.escena-nombre {
  position: absolute; top: -14px; left: calc(1.3rem + 100px);
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rojo);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: .25rem .8rem;
  box-shadow: var(--emboss), 0 4px 10px -4px rgba(45,38,25,.3);
}
.escena-texto {
  font-family: var(--hand); font-size: 1.55rem; line-height: 1.45; color: var(--ink);
  min-height: 4.2rem; margin-bottom: 1rem;
}
.escena-ops { display: flex; flex-direction: column; gap: .55rem; }
.escena-ops .btn-main.wide { font-size: 1.1rem; }
.escena-ops .btn-ghost.wide { width: 100%; font-size: 1.02rem; }

/* banner grande estilo Duolingo: lo importante se VE */
.banner {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-140%);
  top: calc(env(safe-area-inset-top) + 8px); z-index: 97;
  width: min(420px, calc(100% - 1.6rem));
  display: flex; align-items: center; gap: .7rem;
  background: linear-gradient(180deg, #ffffff, #faf8f3);
  border: 1px solid var(--line); border-left: 5px solid var(--rojo);
  border-radius: 16px;
  box-shadow: var(--emboss), 0 18px 44px -14px rgba(45,38,25,.5);
  padding: .75rem .95rem;
  font-size: 1.02rem; font-weight: 600; line-height: 1.4; color: var(--ink);
  pointer-events: none; opacity: 0;
  transition: transform .38s cubic-bezier(.2, 1.15, .35, 1), opacity .3s ease;
}
.banner.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.banner .banner-ic {
  flex-shrink: 0; width: 2.1rem; height: 2.1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: #fff;
  background: linear-gradient(180deg, #d95c42, var(--rojo-d));
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(200,68,44,.4);
}
.banner .banner-txt { min-width: 0; }

.toast {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(16px);
  bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 95;
  max-width: min(380px, 86%);
  font-size: .98rem; color: #fff; text-align: center;
  background: rgba(47, 43, 37, .94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 14px; padding: .6rem 1.1rem;
  box-shadow: 0 12px 30px -10px rgba(45,38,25,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast[data-tone='seal'] { background: rgba(200, 68, 44, .95); }
.toast[data-tone='ink'] { background: rgba(93, 107, 131, .95); font-family: var(--hand); font-size: 1.25rem; }
.toast[data-tone='soft'] { background: rgba(47, 43, 37, .88); }

/* ============================================================
   JUICE
   ============================================================ */

.fly-coin {
  position: fixed; z-index: 120; width: 24px; height: 24px; pointer-events: none;
  transition: transform .8s cubic-bezier(.45, -.1, .6, 1), opacity .8s ease;
  filter: drop-shadow(0 2px 3px rgba(45,38,25,.3));
}
.serve-burst {
  position: fixed; z-index: 120; width: 34px; height: 34px; pointer-events: none;
  transform: translate(-50%, -50%);
  animation: serve-rise .95s ease-out both;
}
@keyframes serve-rise { to { transform: translate(-50%, -170%) scale(1.4); opacity: 0; } }
.burst { position: fixed; z-index: 119; pointer-events: none; }
.burst i {
  position: absolute; width: 7px; height: 10px; border-radius: 2px;
  animation: burst-fly .8s ease-out both;
}
@keyframes burst-fly { to { transform: translate(var(--dx), var(--dy)) rotate(220deg); opacity: 0; } }
.combo-pop {
  position: absolute; left: 50%; top: 34%; transform: translateX(-50%);
  z-index: 96; font-family: var(--hand); font-size: 2.2rem; font-weight: 700; color: var(--rojo);
  text-shadow: 0 2px 0 #fff, 0 5px 14px rgba(45,38,25,.25);
  animation: combo-rise 1s ease-out both; pointer-events: none;
}
@keyframes combo-rise { from { opacity: 0; transform: translateX(-50%) scale(.6); } 30% { opacity: 1; transform: translateX(-50%) scale(1.1); } to { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(1); } }

/* ============================================================
   ADAPTABLE — celular corto, tablet y escritorio
   ============================================================ */

/* pantalla corta: la mesa cede sitio para que el mesón siga alcanzable
   sin scroll — si hay que rebuscar, el arrastre deja de ser cómodo */
@media (max-height: 720px) {
  html { font-size: 16px; }
  .comensal { min-height: 116px; }
  .com-avatar { width: 52px; height: 52px; }
  .slot { width: clamp(78px, 22vw, 100px); height: clamp(78px, 22vw, 100px); }
  .mesa { padding: .5rem .6rem .45rem; }
  .ready-chip .item-card .icon { width: 48px; height: 48px; }
  .riddle-hint { font-size: 1.25rem; }
  .mk-page { min-height: 250px; }
  .cocina { padding-top: .35rem; gap: .25rem; }
  .cocina-riddle { font-size: .92rem; }
  .encimera { max-height: 60%; }
  .objeto { width: 54px; }
  .objeto-icono { width: 2rem; height: 2rem; }
  .coach { margin: .12rem 0 0; }
  .coach-bubble { font-size: .92rem; padding: .4rem .8rem; }
}

/* tablet: el cuaderno flota sobre la mesa de estudio */
@media (min-width: 640px) {
  #stage {
    height: calc(100dvh - 44px);
    margin: 22px auto;
    border-radius: 30px;
  }
  .hud { padding-top: .8rem; }
  .float-back { top: .8rem; }
  .comensal { padding-top: calc(var(--hud-h) + .4rem); }
}

@media (min-width: 768px) {
  :root { --frame: 740px; }
  html { font-size: 18px; }
  .com-scene { max-width: 560px; }
  .comensal { min-height: 190px; }
  .mostrador { padding: 0 2.2rem; }
  .ready-strip { justify-content: center; gap: 1.6rem; }
  .cocina { padding: 1.2rem 2.2rem .6rem; padding-right: 110px; }
  .mesa-persp { max-width: 560px; align-self: center; width: 100%; }
  .cocina-riddle { max-width: 560px; align-self: center; }
  .moleskine-wrap { max-width: 600px; }
  .mk-page { min-height: 340px; }
  .mercado-wrap { max-width: 640px; }
  .market-books { grid-template-columns: repeat(3, 1fr); }
  .shelf-books { max-width: 660px; margin: 0 auto; width: 100%; }
  .shelf-grid { grid-template-columns: repeat(4, 1fr); }
  .fab-main .fab-icon { width: 46px; height: 46px; }
  .fab-mini .fab-icon { width: 40px; height: 40px; }
  .fab-tag { font-size: .8rem; }
}

@media (min-width: 1080px) {
  :root { --frame: 920px; }
  .moleskine-wrap { max-width: 660px; }
  .mercado-wrap { max-width: 760px; }
  .shelf-books { max-width: 780px; }
  .shelf-grid { grid-template-columns: repeat(5, 1fr); }
  .com-scene { max-width: 620px; }
}

/* accesibilidad */
:focus-visible { outline: 2.5px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
button:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}