:root{
  /* Cocina cálida moderna */
  --bg-1:#fff4e6;
  --bg-2:#ffe6cc;
  --board-1:#fbe7c6;   /* superficie de prep */
  --board-2:#f4d8a8;
  --steel-1:#eef2f5;
  --steel-2:#aeb8c2;
  --steel-3:#7c8893;
  --ink:#3b2e25;
  --ink-soft:#8a7665;
  --card:#fffaf2;
  --line:#f1e2cd;
  --accent:#ff7a4d;    /* coral cálido */
  --accent-deep:#e85d2c;
  --danger:#ff4d4d;
  --gold:#ffb627;
  --shadow:0 6px 18px rgba(120,80,40,.14);
  /* Sprint 7A — escena de cocina (pared + encimera) */
  --wall-1:#ffe9d2;
  --wall-2:#ffdcb8;
  --wood-1:#c98a51;
  --wood-2:#a86a38;
  --wood-3:#8a5228;
  --counter-top:#e9b988;
}


*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:#c99761;
  display:flex;align-items:center;justify-content:center;
  min-height:100dvh;
  padding:max(10px,env(safe-area-inset-top)) 10px max(16px,env(safe-area-inset-bottom));
  overflow:hidden;
  overscroll-behavior:none;             /* mata el bounce/pull-to-refresh en móvil */
  user-select:none;-webkit-user-select:none;
}

/* ===== Sprint 7A — encimera inferior: da "suelo" a toda la escena =====
   Franja fija de madera cálida al pie de la ventana, detrás de .app y
   de los wings. 100% decorativa, cero impacto en layout/gameplay. */
.app{
  width:min(100%,420px);
  height:min(100dvh,860px);
  display:flex;flex-direction:column;
  gap:8px;
  position:relative;z-index:5;
  isolation:isolate;
}
/* A single warm glass sheet visually binds the HUD, ticket and board to
   the room without turning the center into an opaque white column. */
.app::before{
  content:"";
  position:absolute;
  inset:-8px -14px;
  z-index:-2;
  pointer-events:none;
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(255,252,246,.34),rgba(255,244,229,.24));
  border:1px solid rgba(255,255,255,.48);
  box-shadow:
    0 20px 55px rgba(73,43,20,.16),
    0 1px 0 rgba(255,255,255,.64) inset;
  backdrop-filter:blur(16px) saturate(.92);
  -webkit-backdrop-filter:blur(16px) saturate(.92);
}
/* Sprint 7A — sombra de contacto: ancla visualmente el bloque central
   a la encimera en vez de sentirse una tarjeta flotando aislada. */
.app::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-14px;height:26px;
  background:radial-gradient(50% 100% at 50% 0%, rgba(90,55,25,.22), transparent 75%);
  z-index:-1;pointer-events:none;
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:2px 4px;
}
.brand{display:flex;align-items:center;gap:8px;}
.brand-mark{font-size:24px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12));}
.brand-name{
  font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1;
}
.brand-name em{
  font-style:normal;color:var(--accent-deep);font-weight:800;
}
.brand-logo{
  height:32px;width:auto;max-width:150px;display:block;
  -webkit-user-drag:none;user-select:none;
  filter:drop-shadow(0 1px 2px rgba(120,70,35,.2));
}
.top-btns{display:flex;gap:8px;}
.icon-btn{
  width:40px;height:40px;border-radius:12px;border:none;
  background:var(--card);color:var(--ink-soft);
  font-size:21px;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .12s, color .12s;
}
.icon-btn:hover{color:var(--accent-deep);}
.icon-btn#helpBtn{font-weight:800;font-size:19px;}
.restart:active{transform:rotate(-180deg) scale(.92);}
#helpBtn:active{transform:scale(.92);}
#recordsBtn{font-size:18px;}
#recordsBtn:active{transform:scale(.92);}

/* ---------- Rango / título ---------- */
.rank-bar{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,252,246,.84);
  backdrop-filter:blur(10px) saturate(1.08);
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  border-radius:12px;padding:5px 11px;
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.5) inset;
}
.rank-emoji{font-size:21px;line-height:1;flex:0 0 auto;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));}
.rank-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
.rank-title{font-size:15px;font-weight:800;color:var(--ink);line-height:1;
  letter-spacing:-.01em;}
.rank-prog{height:6px;border-radius:5px;background:#efe5d4;overflow:hidden;}
.rank-fill{
  height:100%;width:0%;border-radius:5px;
  background:linear-gradient(90deg,#ffb627,#ff8c42);
  transition:width .4s cubic-bezier(.3,1.2,.5,1);
}
.rank-next{
  flex:0 0 auto;font-size:11px;font-weight:700;color:var(--ink-soft);
  white-space:nowrap;
}

/* ---------- Cartel de ascenso ---------- */
.promo{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.6);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(180deg,#fff,#fff3d6);
  padding:18px 30px;border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.3), inset 0 0 0 3px #ffcf5c;
  z-index:12;opacity:0;pointer-events:none;text-align:center;
}
.promo.show{animation:promoPop 1.9s cubic-bezier(.2,1.2,.4,1) forwards;}
@keyframes promoPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6);}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.08);}
  20%{transform:translate(-50%,-50%) scale(1);}
  80%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-55%) scale(.95);}
}
.promo-emoji{font-size:34px;}
.promo-label{font-size:13px;font-weight:800;letter-spacing:.18em;color:var(--accent-deep);}
.promo-title{font-size:24px;font-weight:900;color:var(--ink);letter-spacing:-.01em;}

/* ---------- HUD ---------- */
.hud{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px;align-items:stretch;
}
.hud-card{
  /* vidrio esmerilado: deja entrever la escena detrás -> sensación inmersiva */
  background:rgba(255,250,242,.82);
  backdrop-filter:blur(10px) saturate(1.08);
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  border-radius:12px;
  padding:6px 11px;
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.5) inset;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
}
.hud-label{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
}
.hud-value{font-size:21px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.score-card{min-width:92px;}
.score-row{display:flex;align-items:center;gap:8px;}
.level-pill{
  font-size:11px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  padding:2px 8px;border-radius:20px;letter-spacing:.04em;
  box-shadow:0 2px 5px rgba(232,93,44,.35);
}
.level-pill.bump{animation:pillBump .45s ease;}
@keyframes pillBump{
  0%{transform:scale(1);}
  40%{transform:scale(1.35);}
  100%{transform:scale(1);}
}
.next-inner{display:flex;align-items:center;gap:8px;}
.next-chip{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;font-size:26px;line-height:1;
}
.next-name{font-size:14px;font-weight:700;color:var(--ink);}

/* ---------- Ticket de cocina (Order) ---------- */
.order-zone{
  position:relative;
  flex:0 0 auto;
  min-width:0;
}
.ticket{
  position:relative;
  flex:0 0 auto;   /* FIX: sin esto el ticket se comprime y overflow:hidden
                      te CORTA la barra de tiempo cuando los slots hacen wrap */
  background:linear-gradient(180deg,rgba(255,254,251,.86),rgba(253,246,234,.86));
  backdrop-filter:blur(10px) saturate(1.08);
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  border-radius:6px;
  /* Sprint 7A: más presencia contra el nuevo fondo de escena, para que
     se distinga con claridad como el elemento #1 de la jerarquía */
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.5) inset;
  padding:7px 11px 8px;
  overflow:hidden;
  /* borde perforado de comanda arriba y abajo */
  -webkit-mask:
    radial-gradient(circle 4px at 6px -1px, transparent 98%, #000) 0 0/14px 100%,
    radial-gradient(circle 4px at 6px calc(100% + 1px), transparent 98%, #000) 0 100%/14px 100%;
  mask:
    radial-gradient(circle 4px at 6px -1px, transparent 98%, #000) 0 0/14px 100%,
    radial-gradient(circle 4px at 6px calc(100% + 1px), transparent 98%, #000) 0 100%/14px 100%;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
}
.ticket::before{
  /* franja de color de comanda a la izquierda */
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--accent);
}
.ticket-head{
  display:flex;align-items:center;gap:5px;
  padding-bottom:5px;margin-bottom:5px;
  border-bottom:1.5px dashed var(--line);
}
.ticket-clip{font-size:13px;}
.ticket-title{
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);flex:0 0 auto;
}
.ticket-dish{
  font-size:13.5px;font-weight:800;color:var(--accent-deep);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ticket-dish::before{
  content:"·";margin-right:5px;color:var(--ink-soft);font-weight:800;
}
.ticket-reward{
  margin-left:auto;
  background:linear-gradient(180deg,#fff0c2,#ffd96b);
  color:#9a6a00;font-weight:800;font-size:13px;
  padding:2px 9px;border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(154,106,0,.18);
  flex:0 0 auto;
}
.ticket-body{display:flex;align-items:center;gap:8px;}
.ticket-slots{display:flex;gap:5px;flex:1 1 auto;flex-wrap:wrap;min-width:0;}
/* con 3 ingredientes el espacio aprieta: achicamos el slot para que entren
   en UNA fila. El icono ya dice qué es; el nombre pasa a ser secundario. */
.ticket-slots.compact{gap:4px;}
.ticket-slots.compact .slot{padding:3px 5px;min-width:0;flex:1 1 0;}
.ticket-slots.compact .slot-name{font-size:9px;max-width:52px;}
.ticket-slots.compact .slot-line{gap:3px;}
.slot{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  background:#fbf3e4;border-radius:10px;padding:4px 8px;min-width:44px;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .2s, box-shadow .2s;
}
.slot-line{display:flex;align-items:center;gap:5px;}
.slot-icon{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  font-size:20px;line-height:1;filter:grayscale(.25);opacity:.72;transition:.2s;
}
.slot-name{
  font-size:10px;font-weight:800;line-height:1.05;letter-spacing:-.01em;
  color:var(--ink-soft);max-width:96px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:.72;transition:.2s;
}
.slot-qty{font-size:10.5px;font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.slot.ready{box-shadow:inset 0 0 0 2px #2e9e4f;background:#e3f9ec;transform:translateY(-1px);}
.slot.ready .slot-icon{filter:none;opacity:1;}
.slot.ready .slot-name{color:#247a3f;opacity:1;}
.slot.ready .slot-qty{color:#1f8a43;}
.serve-btn{
  flex:0 0 auto;border:none;border-radius:13px;
  padding:11px 18px;font-weight:900;font-size:14px;font-family:inherit;
  letter-spacing:.03em;
  display:flex;align-items:center;gap:6px;justify-content:center;
  color:#fff;cursor:not-allowed;
  /* ESTADO INACTIVO: coral apagado pero CLARAMENTE un botón (no gris plano) */
  background:linear-gradient(180deg,#f2a883,#e08862);
  box-shadow:0 4px 0 #c26a45, 0 3px 8px rgba(180,90,50,.25);
  transition:transform .12s, box-shadow .12s, filter .12s;
  filter:saturate(.7) opacity(.92);
}
.serve-btn::before{
  content:"🍽️";font-size:15px;line-height:1;
}
.serve-btn.glow{
  /* ESTADO ACTIVO: verde vibrante. El movimiento ya NO vive acá:
     lo gestionan las clases de estado del Sprint 7B (pop -> loop -> remind),
     así no hay un bounce constante corriendo de fondo. */
  background:linear-gradient(180deg,#7bd66a,#3fa83c);
  box-shadow:0 4px 0 #2f7d2a, 0 0 18px rgba(80,200,90,.6);
  cursor:pointer;filter:none;
}
.serve-btn.glow:active{transform:translateY(3px);box-shadow:0 0 0 #2f7d2a;animation:none;}
@keyframes serveBounce{
  0%,100%{transform:translateY(0) scale(1);}
  40%    {transform:translateY(-4px) scale(1.04);}
  55%    {transform:translateY(-4px) scale(1.04);}
}
/* racha inminente: la próxima servida da plato-bonus (aro dorado) */
.serve-btn.streak-hot{
  box-shadow:0 4px 0 #c26a45, 0 0 0 2px var(--gold), 0 0 14px rgba(255,182,39,.6);
}
.serve-btn.glow.streak-hot{
  box-shadow:0 4px 0 #2f7d2a, 0 0 0 2px var(--gold), 0 0 16px rgba(255,182,39,.75);
}
.ticket-status{
  font-size:11px;font-weight:700;line-height:1.15;
  color:var(--ink-soft);
  margin-top:5px;
  display:flex;align-items:center;gap:5px;
}
.ticket-status::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent-deep);flex:0 0 auto;transition:.2s;
}
.ticket-status.ready{color:#1f8a43;font-weight:800;}
.ticket-status.ready::before{background:#2e9e4f;box-shadow:0 0 7px rgba(46,158,79,.65);}

/* estado sutil del ticket cuando la comanda está lista */
/* ===== SEÑAL "COMANDA LISTA" (onboarding) ===== */
.ticket.is-ready::before{background:#2e9e4f;width:6px;}
.ticket.is-ready{
  /* glow verde que PULSA: imposible de ignorar. Antes era un borde finito
     que nadie notaba -> por eso no entendían que podían emplatar. */
  box-shadow:var(--shadow), 0 0 0 2.5px #2e9e4f, 0 0 16px rgba(46,158,79,.5);
  animation:ticketReady 1.1s ease-in-out infinite;
}
@keyframes ticketReady{
  0%,100%{box-shadow:var(--shadow), 0 0 0 2.5px #2e9e4f, 0 0 12px rgba(46,158,79,.4);}
  50%    {box-shadow:var(--shadow), 0 0 0 3px  #35b85a, 0 0 22px rgba(46,158,79,.7);}
}
/* badge "READY" que aparece en la esquina del ticket cuando está listo */
.ticket.is-ready .ticket-reward{
  background:linear-gradient(180deg,#7be08f,#3fa85c);
  color:#0c4a22;box-shadow:inset 0 0 0 1px rgba(12,74,34,.25);
}

.ticket-timer{
  height:5px;border-radius:4px;background:#efe5d4;
  margin-top:6px;overflow:hidden;
}
.ticket-timer-fill{
  height:100%;width:100%;border-radius:4px;
  background:linear-gradient(90deg,#7bd66a,#3fa83c);
  transition:width .15s linear;
}
.ticket.expired{animation:ticketExpire .5s ease;}
@keyframes ticketExpire{
  0%{background:#ffd9d4;}
  100%{background:#fffdf7;}
}
.ticket-stamp{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:900;letter-spacing:.08em;
  color:#2e9e4f;
  border:4px solid #2e9e4f;border-radius:8px;
  background:rgba(255,253,247,.82);
  transform:rotate(-9deg) scale(1.25);
  opacity:0;pointer-events:none;
}
.ticket.done .ticket-stamp{animation:stamp .8s ease forwards;}
@keyframes stamp{
  0%{opacity:0;transform:rotate(-9deg) scale(1.6);}
  25%{opacity:1;transform:rotate(-9deg) scale(1);}
  70%{opacity:1;transform:rotate(-9deg) scale(1);}
  100%{opacity:0;transform:rotate(-9deg) scale(1);}
}

/* ---------- Stage ---------- */
.stage{
  position:relative;
  flex:1 1 auto;
  border-radius:18px;
  overflow:hidden;
  min-height:0;
  /* la estación se apoya sobre la mesada: sombra abajo, luz arriba, y
     ahora (Sprint 7A) también borde + sombra interior para sensación
     de recipiente de vidrio/prep real, no una tarjeta plana. */
  box-shadow:
    0 10px 24px rgba(120,80,40,.18),
    0 1px 0 rgba(255,255,255,.7) inset,
    0 0 0 1.5px rgba(120,75,35,.16) inset,
    inset 0 14px 22px -14px rgba(60,35,15,.30),
    inset 0 -10px 18px -12px rgba(60,35,15,.22);
  display:flex;
}
#board{
  width:100%;height:100%;
  display:block;
  touch-action:none;
  cursor:pointer;
  will-change:transform;   /* screen shake: transform CSS, compuesto por GPU */
}
/* Sprint 7A — reflejo/gloss superior muy sutil, puramente decorativo.
   position:absolute -> no participa del layout flex del .stage,
   así el canvas nunca cambia de tamaño. pointer-events:none -> nunca
   intercepta drops/taps del juego. */
.stage::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 10%, transparent 22%);
  pointer-events:none;
}
.stage::after{
  content:"";position:absolute;inset:0;z-index:1;
  /* reflejos laterales muy discretos, tipo vidrio */
  background:
    linear-gradient(90deg, rgba(255,255,255,.10) 0%, transparent 6%),
    linear-gradient(270deg, rgba(255,255,255,.08) 0%, transparent 6%);
  pointer-events:none;
}

/* Arcade heat: gameplay activity raises the visual pulse in three steps.
   These layers never affect layout, hit testing or the physics canvas. */
@keyframes stageImpact{
  0%{filter:brightness(1) saturate(1);transform:scale(1);}
  22%{filter:brightness(1.18) saturate(1.3);transform:scale(1.007);}
  58%{filter:brightness(1.06) saturate(1.12);transform:scale(.998);}
  100%{filter:brightness(1) saturate(1);transform:scale(1);}
}
@keyframes stationPulse{
  0%,100%{opacity:.32;filter:saturate(1);}
  50%{opacity:.78;filter:saturate(1.45) brightness(1.12);}
}
@keyframes rankHot{
  0%,100%{filter:brightness(1);box-shadow:0 0 0 rgba(255,182,39,0);}
  50%{filter:brightness(1.28);box-shadow:0 0 12px rgba(255,182,39,.85);}
}
.stage.stage-impact{animation:stageImpact .42s cubic-bezier(.2,1.15,.35,1);}
.stage[data-juice="1"]::after{animation:stationPulse 1.8s ease-in-out infinite;}
.stage[data-juice="2"]::after{animation:stationPulse 1.05s ease-in-out infinite;}
.stage[data-juice="3"]::after{animation:stationPulse .62s ease-in-out infinite;}
.app[data-juice="2"] .rank-fill{animation:rankHot 1.1s ease-in-out infinite;}
.app[data-juice="3"] .rank-fill{animation:rankHot .65s ease-in-out infinite;}

/* ---------- Overlay ---------- */
.overlay{
  position:fixed;inset:0;              /* fixed = cubre toda la pantalla, no solo el tablero */
  /* velo cálido y SUAVE: deja ver el fondo, blur fuerte para el look esmerilado */
  background:rgba(59,46,37,.30);
  backdrop-filter:blur(8px) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);   /* Safari/iOS */
  display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:40;   /* arriba del tablero, DEBAJO de splash(60)/title(50): no tapa el inicio */
  transition:opacity .25s;
  overflow-y:auto;
}
.overlay.hidden{opacity:0;pointer-events:none;}
.overlay-inner{
  background:var(--card);
  border-radius:20px;
  padding:26px 22px;
  text-align:center;
  max-width:320px;
  width:100%;
  max-height:calc(100vh - 40px);       /* nunca más alto que la pantalla */
  overflow-y:auto;                     /* la lista de records scrollea dentro del pop-up */
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  -webkit-overflow-scrolling:touch;    /* scroll suave en iOS */
}
.overlay-emoji{font-size:42px;margin-bottom:6px;}
.overlay-logo{
  display:block;width:min(72%,240px);height:auto;margin:0 auto 10px;
  filter:drop-shadow(0 4px 8px rgba(120,70,35,.22));
  -webkit-user-drag:none;user-select:none;
}
.overlay-logo[hidden],.overlay-title[hidden]{display:none;}
.overlay-title{font-size:23px;font-weight:800;margin-bottom:8px;letter-spacing:-.02em;}
.overlay-text{font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin-bottom:18px;}
.play-btn{
  border:none;cursor:pointer;
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  color:#fff;font-weight:800;font-size:16px;letter-spacing:.01em;
  padding:13px 26px;border-radius:14px;
  box-shadow:0 5px 0 #c54a1f, 0 8px 16px rgba(232,93,44,.35);
  transition:transform .1s, box-shadow .1s;
}
.play-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #c54a1f;}
.menu-btn{
  display:block;margin:10px auto 0;
  border:none;cursor:pointer;background:transparent;
  color:var(--ink-soft);font-family:inherit;font-weight:800;
  font-size:13px;letter-spacing:.1em;padding:10px 18px;
  min-height:44px;border-radius:12px;
  transition:color .12s, background .12s;
  -webkit-tap-highlight-color:transparent;
}
.menu-btn:hover{color:var(--accent-deep);}
.menu-btn:active{background:rgba(0,0,0,.05);}
.menu-btn[hidden]{display:none;}

/* ---------- Ladder ---------- */
.ladder{
  display:flex;gap:4px;overflow:hidden;justify-content:space-between;
  padding:3px 2px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.ladder::-webkit-scrollbar{display:none;}
.ladder-step{
  flex:1 1 0;min-width:0;max-width:32px;
  display:flex;align-items:center;justify-content:center;
  width:auto;height:30px;border-radius:9px;
  background:var(--card);font-size:16px;
  box-shadow:0 2px 6px rgba(120,80,40,.1);
  opacity:.55;transition:opacity .2s, transform .2s;
}
.ladder-step.reached{opacity:1;transform:translateY(-1px);}
.ladder-arrow{display:none;}

/* ---------- Tutorial de bienvenida ---------- */
.tut[hidden]{display:none;}
.tut{
  position:fixed;inset:0;z-index:50;
}
.tut-highlight{
  position:fixed;border-radius:16px;
  box-shadow:0 0 0 9999px rgba(30,20,12,.72);
  outline:3px solid #ffcf5c;outline-offset:2px;
  transition:all .3s cubic-bezier(.3,1,.4,1);
  pointer-events:none;
}
.tut-card{
  position:fixed;
  background:var(--card);border-radius:16px;
  padding:16px 16px 12px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  width:min(86vw,320px);
  transition:top .3s, left .3s;
}
.tut-text{font-size:14.5px;line-height:1.5;color:var(--ink);margin-bottom:12px;}
.tut-text b{color:var(--accent-deep);}
.tut-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.tut-skip{
  background:none;border:none;color:var(--ink-soft);
  font-size:13px;font-family:inherit;cursor:pointer;font-weight:700;
  padding:6px 4px;
}
.tut-dots{display:flex;gap:5px;}
.tut-dots .dot{
  width:7px;height:7px;border-radius:50%;background:#e3d6c2;transition:background .2s;
}
.tut-dots .dot.on{background:var(--accent);}
.tut-next{
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  color:#fff;border:none;border-radius:11px;
  padding:10px 18px;font-size:14px;font-weight:800;font-family:inherit;
  cursor:pointer;box-shadow:0 3px 0 #c54a1f;
  transition:transform .1s, box-shadow .1s;
}
.tut-next:active{transform:translateY(3px);box-shadow:0 0 0 #c54a1f;}

/* ---------- Récords / historial ---------- */
.records{
  margin-top:14px;text-align:left;
  border-top:1px solid var(--line);padding-top:12px;
}
.rec-best{font-size:13.5px;color:var(--ink);margin-bottom:9px;text-align:center;}
.rec-best b{color:var(--accent-deep);}
.rec-title{
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:6px;
}
.rec-list{display:flex;flex-direction:column;gap:4px;}
.rec-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:13px;color:var(--ink);
  background:#fbf3e4;border-radius:8px;padding:5px 10px;
}
.rec-row span:last-child{
  font-weight:800;color:var(--accent-deep);font-variant-numeric:tabular-nums;
}
.record-flag{display:inline-block;margin-top:6px;color:#e8a200;font-weight:800;font-size:14px;}
.rec-reset{
  display:block;margin:12px auto 0;
  background:none;border:none;color:var(--ink-soft);
  font-size:12px;font-family:inherit;text-decoration:underline;cursor:pointer;
}


/* ---------- Iconos de item (Sprint 4.1) ----------
   Una sola clase para TODOS los lugares donde aparece un ingrediente:
   Next, slots de la comanda y ladder. El PNG llena el contenedor;
   si no hay PNG, el emoji ocupa exactamente el mismo hueco. */
.item-img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  -webkit-user-drag:none;user-select:none;
  image-rendering:auto;
}
.item-emoji{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;line-height:1;
}
/* el PNG del Next respira un poco más que su caja */
.next-chip .item-img{transform:scale(1.12);}
/* en el ladder el icono llena casi toda la casilla */
.ladder-step .item-img{transform:scale(1.06);}
.ladder-step .item-emoji{font-size:16px;}
/* los slots apagados se ven grises; al completarse, el icono se enciende */
.slot-icon .item-emoji{font-size:20px;}


/* =========================================================
   Sprint 5B — Splash / Loader / Title / Modals
   Todo vive por ENCIMA de .app. La física sigue sin arrancar
   hasta que se toca START SERVICE (idéntico a antes).
   ========================================================= */

/* ----- Logo tipográfico temporal (reemplazable por PNG en 5C) ----- */
.boot-logo, .title-logo{
  display:flex;flex-direction:column;align-items:center;
  line-height:.9;letter-spacing:.02em;
  text-shadow:0 2px 0 rgba(150,80,40,.12);
}

/* ---------- Logo PNG (rebrand Stack 'n Plate) ---------- */
.logo-img{
  display:block;
  width:min(78vw, 340px);
  height:auto;
  filter:drop-shadow(0 6px 12px rgba(120,70,35,.25));
  -webkit-user-drag:none;user-select:none;
}
/* en pantallas bajitas, achicar para que no empuje los botones fuera */
@media (max-height:680px){
  .logo-img{width:min(64vw, 280px);}
}
@media (max-height:560px){
  .logo-img{width:min(52vw, 230px);}
}

/* (logo de texto viejo eliminado — ahora se usa PNG) */


/* ----- Splash ----- */
.boot{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;
  background:
    radial-gradient(120% 80% at 50% 32%, #fff3e2, #ffe4cf 70%, #ffd9bf);
  padding:max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  animation:bootFade .4s ease both;
}
.boot.hide{animation:bootOut .45s ease forwards;}
.boot-glow{
  position:absolute;width:min(80vw,420px);height:min(80vw,420px);
  border-radius:50%;top:28%;left:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,209,110,.5), transparent 62%);
  filter:blur(6px);animation:glowPulse 2.4s ease-in-out infinite;
}
.boot-logo{position:relative;z-index:1;animation:logoPop .55s cubic-bezier(.2,1.2,.35,1) both;}
.boot-sub{
  position:relative;z-index:1;
  font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--accent-deep);text-transform:uppercase;
}
/* loader de 3 puntos */
.boot-loader{display:flex;gap:9px;z-index:1;}
.boot-loader span{
  width:11px;height:11px;border-radius:50%;
  background:var(--accent);
  animation:dotBounce 1s ease-in-out infinite;
}
.boot-loader span:nth-child(2){animation-delay:.15s;}
.boot-loader span:nth-child(3){animation-delay:.3s;}

/* ----- Title Screen ----- */
.title{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(130% 90% at 50% 18%, #fff4e6, #ffe7d2 62%, #ffdcc4);
  padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  animation:titleIn .45s ease both;
}
.title.out{animation:titleOut .38s ease forwards;}
.title-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:16px;width:100%;max-width:400px;text-align:center;
}
.title-logo{animation:logoPop .6s cubic-bezier(.2,1.2,.35,1) .1s both;}
.title-tagline{
  font-size:15px;font-weight:700;color:var(--ink-soft);
  letter-spacing:.01em;margin:2px 0 6px;
}
.title-actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:300px;}

/* botones */
.t-btn{
  border:none;cursor:pointer;border-radius:16px;
  font-family:inherit;font-weight:900;letter-spacing:.06em;
  min-height:56px;padding:0 20px;font-size:18px;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.t-btn:active{transform:translateY(2px) scale(.99);}
.t-primary{
  color:#fff;
  background:linear-gradient(180deg, #ff8a5b, var(--accent-deep));
  box-shadow:0 6px 0 #c94a1f, 0 10px 20px rgba(200,74,31,.3);
}
.t-primary:active{box-shadow:0 2px 0 #c94a1f, 0 5px 12px rgba(200,74,31,.3);}
.t-secondary{
  color:var(--accent-deep);background:var(--card);
  box-shadow:0 4px 0 #f0d9c3, 0 8px 16px rgba(150,90,50,.14);
  min-height:50px;font-size:16px;
}
.t-secondary:active{box-shadow:0 1px 0 #f0d9c3;}
.t-records{
  border:none;cursor:pointer;background:transparent;
  color:var(--ink-soft);font-family:inherit;font-weight:800;
  font-size:13px;letter-spacing:.14em;padding:8px;margin-top:2px;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.t-records:active{color:var(--accent-deep);}
.t-primary.glowing{animation:btnGlow 1.8s ease-in-out infinite;}

/* decoración: tickets flotando + vapor */
.title-decor{position:absolute;inset:0;z-index:1;pointer-events:none;}
.tk{
  position:absolute;width:82px;height:56px;border-radius:8px;
  background:#fffdf7;opacity:.5;
  box-shadow:0 8px 18px rgba(150,90,50,.14);
  border-top:5px dashed #f2c9a8;
}
.tk1{top:14%;left:-18px;transform:rotate(-11deg);animation:sway 5s ease-in-out infinite;}
.tk2{bottom:12%;right:-16px;transform:rotate(9deg);animation:sway 6s ease-in-out infinite .5s;}
.steam{
  position:absolute;bottom:26%;width:8px;height:46px;border-radius:8px;
  background:linear-gradient(to top, rgba(255,255,255,.6), transparent);
  filter:blur(2px);opacity:0;
}
.steam.s1{left:30%;animation:steam 3.4s ease-in-out infinite;}
.steam.s2{left:50%;animation:steam 3.4s ease-in-out infinite 1.1s;}
.steam.s3{left:70%;animation:steam 3.4s ease-in-out infinite 2.2s;}

/* ----- Modales (How to Play + Records) ----- */
.htp{
  position:fixed;inset:0;z-index:70;
  display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(60,40,25,.44);
  animation:fadeIn .2s ease both;
}
/* CRÍTICO: sin esto, display:flex le gana al atributo hidden y el modal
   queda SIEMPRE visible (los cierres corren pero el CSS los ignora). */
.htp[hidden]{display:none !important;}
.title[hidden]{display:none !important;}
.boot[hidden]{display:none !important;}
.htp-close{
  position:absolute;top:10px;right:12px;
  width:34px;height:34px;border:none;border-radius:50%;
  background:rgba(0,0,0,.06);color:var(--ink-soft);
  font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.htp-close:active{background:rgba(0,0,0,.12);}
.htp-card{
  position:relative;
  width:100%;max-width:360px;
  background:var(--card);border-radius:22px;
  padding:24px 22px;
  box-shadow:0 20px 50px rgba(90,50,25,.35);
  animation:cardPop .3s cubic-bezier(.2,1.1,.35,1) both;
  max-height:calc(100vh - 44px);overflow-y:auto;
}
.htp-title{
  margin:0 0 14px;text-align:center;
  font-size:22px;font-weight:900;letter-spacing:.06em;color:var(--accent-deep);
}
.htp-list{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
.htp-list li{
  position:relative;padding-left:26px;
  font-size:15px;line-height:1.4;color:var(--ink);
}
.htp-list li::before{
  content:"";position:absolute;left:6px;top:7px;
  width:8px;height:8px;border-radius:50%;background:var(--accent);
}
.htp-ok{width:100%;}
.rec-modal-body{margin-bottom:16px;}

/* ---------------- Keyframes ---------------- */
@keyframes bootFade{from{opacity:0}to{opacity:1}}
@keyframes bootOut{to{opacity:0;visibility:hidden}}
@keyframes titleIn{from{opacity:0}to{opacity:1}}
@keyframes titleOut{to{opacity:0;transform:scale(1.04)}}
@keyframes logoPop{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes glowPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes dotBounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-9px);opacity:1}}
@keyframes sway{0%,100%{transform:rotate(-11deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-10px)}}
@keyframes steam{0%{opacity:0;transform:translateY(0) scaleX(1)}30%{opacity:.7}100%{opacity:0;transform:translateY(-40px) scaleX(1.6)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes cardPop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes btnGlow{0%,100%{box-shadow:0 6px 0 #c94a1f, 0 10px 20px rgba(200,74,31,.3)}50%{box-shadow:0 6px 0 #c94a1f, 0 10px 26px rgba(255,150,70,.7)}}

/* pantallas pequeñas: el logo no debe cortarse */
@media (max-height:640px){
  .t-btn{min-height:50px;}
}
@media (max-width:340px){
  .brand-logo{height:28px;}
  .icon-btn{width:38px;height:38px;font-size:19px;}
}

/* accesibilidad: sin animación decorativa si el usuario lo pide */
@media (prefers-reduced-motion:reduce){
  .boot,.boot.hide,.title,.title.out,.boot-logo,.title-logo,
  .boot-glow,.boot-loader span,.tk,.steam,.htp,.htp-card,
  .t-primary.glowing{
    animation:none !important;
  }
  .steam,.boot-glow{opacity:.4;}
  .title.out{opacity:0;}
  .boot.hide{opacity:0;visibility:hidden;}
}


/* =========================================================
   FTUE — First-Time User Experience (onboarding visual)
   Solo aparece la PRIMERA vez, hasta que el jugador emplata
   su primer plato. Después nunca más. Todo controlado por JS.
   ========================================================= */

/* banner de objetivo: "Complete your first dish!" */
.ftue-hint{
  text-align:center;
  font-size:13px;font-weight:900;letter-spacing:.02em;
  color:#fff;
  background:linear-gradient(180deg,#3fb85f,#2e9e4f);
  padding:7px 14px;border-radius:20px;
  margin:0 auto 8px;width:fit-content;max-width:90%;
  box-shadow:0 4px 12px rgba(46,158,79,.4);
  animation:ftueHintIn .4s ease both, ftueHintPulse 1.4s ease-in-out .4s infinite;
}
.ftue-hint[hidden]{display:none;}
@keyframes ftueHintIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
@keyframes ftueHintPulse{50%{transform:scale(1.04);}}

/* flecha animada apuntando al botón SERVE */
.ftue-arrow{
  position:absolute;
  right:6px;top:50%;
  font-size:26px;
  pointer-events:none;z-index:5;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
  animation:ftueArrowNudge .7s ease-in-out infinite;
}
.ftue-arrow[hidden]{display:none;}
@keyframes ftueArrowNudge{
  0%,100%{transform:translate(0,-50%);}
  50%    {transform:translate(-8px,-50%);}
}

/* glow extra en el botón SERVE cuando el onboarding está activo */
.serve-btn.ftue-highlight{
  box-shadow:0 4px 0 #2f7d2a, 0 0 0 3px #ffd24d, 0 0 22px rgba(255,210,77,.8) !important;
}

/* zona de emplatado (todo el ticket) resaltada en el onboarding */
.ticket.ftue-active{
  box-shadow:var(--shadow), 0 0 0 3px #ffd24d, 0 0 24px rgba(255,210,77,.55);
}

@media (prefers-reduced-motion:reduce){
  .ftue-hint,.ftue-arrow{animation:none !important;}
}

/* mensaje de OBJETIVO tras el primer plato: dorado, se siente como recompensa
   y refuerza la meta del juego ("emplatar = sobrevivir") */
.ftue-hint.ftue-mission{
  background:linear-gradient(180deg,#ffd76b,#e9a020);
  color:#5a3a00;
  box-shadow:0 4px 14px rgba(233,160,32,.45);
}

/* =========================================================
   Dish Presentation Card — hero shot del plato al servir.
   Sistema 100% data-driven: cada receta apunta a un PNG en
   assets/dishes/. Si la imagen no existe (arte pendiente),
   cae a un fallback digno en vez de romperse.
   ========================================================= */
.dish-card{
  position:fixed;inset:0;z-index:90;         /* por encima de TODO, incluso records(40) */
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(59,46,37,.35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
.dish-card.visible{opacity:1;}
.dish-card.hidden{display:none;}

.dish-card-inner{
  background:linear-gradient(180deg,#fffdf7,#fff3e2);
  border-radius:22px;
  padding:22px 28px 20px;
  text-align:center;
  box-shadow:0 20px 50px rgba(120,70,35,.35), 0 0 0 1px rgba(232,93,44,.08);
  max-width:280px;width:100%;
  transform:scale(.82) translateY(10px);
  opacity:0;
  transition:transform .32s cubic-bezier(.2,1.3,.4,1), opacity .22s ease;
}
.dish-card.visible .dish-card-inner{transform:scale(1) translateY(0);opacity:1;}

.dish-card-img-wrap{
  width:150px;height:150px;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  border-radius:18px;
  background:radial-gradient(circle at 50% 35%, rgba(255,196,131,.35), rgba(255,196,131,0) 70%);
}
.dish-card-img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  filter:drop-shadow(0 8px 14px rgba(120,70,35,.3));
  -webkit-user-drag:none;user-select:none;
}
/* fallback: si la imagen no carga (arte del plato pendiente), mostramos un
   marco discreto en vez de un ícono roto. object-fit + onerror lo maneja JS. */
.dish-card-img.fallback{
  padding:22px;box-sizing:border-box;
  background:#fff;border:2.5px dashed #e8c9a8;border-radius:14px;
}

.dish-card-name{
  font-weight:900;font-size:18px;color:var(--ink);letter-spacing:-.01em;
  margin-bottom:4px;
}
.dish-card-served{
  font-weight:800;font-size:12px;letter-spacing:.08em;
  color:#2e9e4f;margin-bottom:6px;
}
.dish-card-reward{
  display:inline-block;
  font-weight:900;font-size:17px;color:#b3550f;
  background:#ffe9cf;border-radius:20px;padding:4px 16px;
}

@media (prefers-reduced-motion:reduce){
  .dish-card,.dish-card-inner{transition:none !important;}
}

/* (Stage Wings + Kitchen Service Belts removidos — reemplazados por el escenario inmersivo) */

/* =========================================================
   SPRINT 7B — SERVE EMPHASIS
   Secuencia: pop (680ms) -> pulso vivo -> recordatorio
   puntual cada ~3.2s. Sólo transform/box-shadow: no mueve el
   panel de orden ni genera layout shift.
   ========================================================= */
.app{
  --serve-pop-peak:1.11;
  --serve-pop-lift:-6px;
  --serve-loop-peak:1.03;
  --cook-x:1px;
  --cook-x-back:-1px;
  --cook-lift:-4px;
  --cook-rot:1deg;
  --cook-rot-back:-.75deg;
  --cook-scale:.74;
  --cook-scale-peak:.75;
}
.app[data-juice="1"]{
  --serve-pop-peak:1.13;
  --serve-pop-lift:-7px;
  --serve-loop-peak:1.04;
  --cook-x:2px;
  --cook-x-back:-1px;
  --cook-lift:-6px;
  --cook-rot:1.6deg;
  --cook-rot-back:-1.2deg;
  --cook-scale-peak:.76;
}
.app[data-juice="2"]{
  --serve-pop-peak:1.16;
  --serve-pop-lift:-9px;
  --serve-loop-peak:1.055;
  --cook-x:3px;
  --cook-x-back:-2px;
  --cook-lift:-8px;
  --cook-rot:2.5deg;
  --cook-rot-back:-1.9deg;
  --cook-scale-peak:.77;
}
.app[data-juice="3"]{
  --serve-pop-peak:1.20;
  --serve-pop-lift:-11px;
  --serve-loop-peak:1.075;
  --cook-x:5px;
  --cook-x-back:-4px;
  --cook-lift:-12px;
  --cook-rot:3.8deg;
  --cook-rot-back:-2.8deg;
  --cook-scale-peak:.80;
}
@keyframes servePop{
  0%  {transform:scale(1)    translateY(0)   rotate(0);}
  25% {transform:scale(var(--serve-pop-peak)) translateY(var(--serve-pop-lift)) rotate(-2deg);}
  47% {transform:scale(.96)  translateY(2px) rotate(1.8deg);}
  70% {transform:scale(1.05) translateY(-3px) rotate(-1deg);}
  100%{transform:scale(1)    translateY(0)   rotate(0);}
}
.serve-btn.serve-pop{
  animation:servePop .68s cubic-bezier(.25,1.45,.4,1) both;
  box-shadow:0 4px 0 #2f7d2a, 0 0 26px rgba(255,214,120,.88), 0 0 0 3px rgba(255,214,120,.48);
}
.app[data-juice="2"] .serve-btn.serve-pop{
  box-shadow:0 4px 0 #2f7d2a,0 0 36px rgba(255,214,120,.96),0 0 0 4px rgba(255,214,120,.58);
}
.app[data-juice="3"] .serve-btn.serve-pop{
  box-shadow:0 4px 0 #2f7d2a,0 0 46px rgba(255,214,120,1),0 0 0 6px rgba(255,214,120,.72);
}

/* pulso de reposo: lento (2s) y de baja amplitud, poco molesto */
@keyframes serveLoop{
  0%,100%{transform:scale(1);
          box-shadow:0 4px 0 #2f7d2a, 0 0 14px rgba(120,220,120,.5);}
  50%    {transform:scale(var(--serve-loop-peak)) translateY(-2px);
          box-shadow:0 4px 0 #2f7d2a, 0 0 34px rgba(255,214,120,.92),0 0 0 3px rgba(255,214,120,.4);}
}
.serve-btn.serve-loop{animation:serveLoop 1.35s ease-in-out infinite;}
.app[data-juice="2"] .serve-btn.serve-loop{animation-duration:1s;}
.app[data-juice="3"] .serve-btn.serve-loop{animation-duration:.72s;}

/* recordatorio: un bounce + micro-shake horizontal, UNA vez */
@keyframes serveRemind{
  0%  {transform:translate(0,0)     scale(1);}
  16% {transform:translate(0,-12px) scale(1.12) rotate(-2deg);}
  32% {transform:translate(-6px,1px) scale(1.02) rotate(2deg);}
  48% {transform:translate(6px,-1px) scale(1.03) rotate(-2deg);}
  62% {transform:translate(-5px,0)   scale(1.01);}
  76% {transform:translate(5px,0)    scale(1.01);}
  100%{transform:translate(0,0)     scale(1);}
}
.serve-btn.serve-remind{
  animation:serveRemind .78s ease-in-out both;
  box-shadow:0 4px 0 #2f7d2a, 0 0 24px rgba(255,214,120,.9);
}
/* movimiento reducido: color + glow, sin desplazamiento */
.serve-btn.serve-loop-static{
  box-shadow:0 4px 0 #2f7d2a, 0 0 20px rgba(255,214,120,.75), 0 0 0 2px rgba(255,214,120,.5);
}

/* =========================================================
   SPRINT 7B — CHEF REACTIVE LAYER
   Anchored to the order zone and driven by the existing states.
   Desktop uses the full figure beside SERVE; smaller layouts use
   the closer bust crop directly beneath the action.
   ========================================================= */
.chef{
  position:absolute;
  z-index:8;
  pointer-events:none;
  --chef-h:clamp(280px,36vh,340px);
  --chef-w:min(250px,calc((100vw - 420px) / 2 - 18px));
  height:var(--chef-h);
  width:var(--chef-w);
  /* The fingertip overlaps the ticket edge slightly while the body remains
     entirely in the side lane, visually joining the chef to SERVE. */
  left:calc(100% - 8px);
  right:auto;
  top:-4px;
  bottom:auto;
  transition:opacity .35s ease, filter .3s ease;
}
.chef.chef-off{opacity:0;transform:translateY(14px) scale(.94);}

.chef-visual,
.chef-art{
  width:100%;height:100%;
}
.chef-visual{
  /* The ready artwork points back toward the adjacent SERVE button. */
  transform:scaleX(-1);
  transform-origin:center;
}
.chef-art{
  background-repeat:no-repeat;background-position:center bottom;background-size:contain;
  filter:drop-shadow(0 6px 10px rgba(120,70,35,.3));
  transition:transform .3s ease;
}
/* --- estados --- */
/* idle rotativo: 4 poses de "trabajo" que el chef alterna en reposo */
.chef[data-state="idle"]         .chef-art{background-image:url("assets/chef-v2/chef-idle.png");}
.chef[data-state="memorizing"]   .chef-art{background-image:url("assets/chef-v2/chef-memorizing.png");}
.chef[data-state="thinking"]     .chef-art,
.chef[data-state="evaluating"]   .chef-art{background-image:url("assets/chef-v2/chef-evaluating.png");}
.chef[data-state="cooking"]      .chef-art{background-image:url("assets/chef-v2/chef-cooking.png");}
/* estados reactivos del gameplay */
.chef[data-state="order-ready"]  .chef-art{background-image:url("assets/chef-v2/chef-pointing.png");}
.chef[data-state="serve-success"] .chef-art{background-image:url("assets/chef-v2/chef-victory.png");}
.chef[data-state="order-danger"] .chef-art{background-image:url("assets/chef-v2/chef-worried.png");}
.chef[data-state="board-danger"] .chef-art{background-image:url("assets/chef-v2/chef-alarmed.png");}
.chef[data-state="order-failed"] .chef-art{background-image:url("assets/chef-v2/chef-defeat.png");}

@keyframes chefBreathe{0%,100%{transform:translateY(0)    scale(1);}
                       50%    {transform:translateY(-2px) scale(1.01);}}
@keyframes chefCook   {0%,100%{transform:translateY(0) rotate(-.5deg);}
                       38%    {transform:translate(var(--cook-x),var(--cook-lift)) rotate(var(--cook-rot));}
                       68%    {transform:translate(var(--cook-x-back),-2px) rotate(var(--cook-rot-back));}}
@keyframes chefCookMobile{
  0%,100%{transform:translate(0,-5px) scale(var(--cook-scale)) rotate(-1deg);}
  38%    {transform:translate(var(--cook-x),var(--cook-lift)) scale(var(--cook-scale-peak)) rotate(var(--cook-rot));}
  68%    {transform:translate(var(--cook-x-back),-6px) scale(.75) rotate(var(--cook-rot-back));}
}
@keyframes chefPoint  {0%,100%{transform:translateX(0)    rotate(0);}
                       50%    {transform:translateX(9px)  rotate(5deg);}}
@keyframes chefPointUp{0%,100%{transform:translateY(0)    rotate(0);}
                       50%    {transform:translateY(-9px) rotate(-2deg);}}
@keyframes chefCheer  {0%,100%{transform:translateY(0)    scale(1);}
                       25%    {transform:translateY(-19px) scale(1.13) rotate(-2deg);}
                       52%    {transform:translateY(2px) scale(.98) rotate(2deg);}
                       72%    {transform:translateY(-8px) scale(1.05);}}
@keyframes chefNervous{0%,100%{transform:translateX(0);}
                       25%    {transform:translateX(-4px) rotate(-1deg);}
                       75%    {transform:translateX(4px) rotate(1deg);}}

.chef[data-state="idle"]          .chef-art,
.chef[data-state="memorizing"]    .chef-art,
.chef[data-state="thinking"]      .chef-art,
.chef[data-state="evaluating"]    .chef-art{animation:chefBreathe 4.2s ease-in-out infinite;}
.chef[data-state="cooking"]       .chef-art{animation:chefCook 2.15s ease-in-out infinite;}
.chef[data-state="order-ready"]   .chef-art{animation:chefPoint   .9s ease-in-out infinite;}
.chef[data-state="serve-success"] .chef-art{animation:chefCheer   .9s  ease-in-out 1;}
.chef[data-state="order-danger"]  .chef-art{animation:chefNervous 1.5s ease-in-out infinite;}
.chef[data-state="board-danger"]  .chef-art{animation:chefNervous 1.1s ease-in-out infinite;}
.app[data-juice="1"] .chef[data-state="cooking"] .chef-art{animation-duration:1.6s;}
.app[data-juice="2"] .chef[data-state="cooking"] .chef-art{animation-duration:1.15s;}
.app[data-juice="3"] .chef[data-state="cooking"] .chef-art{animation-duration:.78s;}

/* burbuja de la primera partida: sólo hasta el primer emplatado */
.chef-bubble{
  position:absolute;top:42%;left:-62px;
  background:var(--card);color:var(--ink);
  font-size:11px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  padding:5px 10px;border-radius:11px;
  box-shadow:0 4px 10px rgba(120,70,35,.28), 0 0 0 2px #ffcf5c inset;
}
.chef-bubble[hidden]{display:none;}

/* The bust crop keeps facial expressions readable on tablet and mobile. */
@media (max-width:999px){
  /* Mobile compact: prioritize the station without shrinking touch targets. */
  .app{gap:5px;}
  .topbar{padding:0 2px;}
  .brand-logo{height:29px;}
  .top-btns{gap:6px;}

  .rank-bar{gap:7px;padding:4px 9px;}
  .rank-emoji{font-size:19px;}
  .rank-info{gap:2px;}
  .rank-title{font-size:14px;}
  .rank-prog{height:4px;}

  /* Score and Next become one continuous information strip. */
  .hud{
    gap:0;
    overflow:hidden;
    border-radius:12px;
    background:rgba(255,250,242,.84);
    box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.5) inset;
  }
  .hud-card{
    min-height:44px;
    padding:4px 9px;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .score-card{min-width:88px;border-right:1px solid var(--line);}
  .hud-label{font-size:8.5px;}
  .hud-value{font-size:20px;}
  .level-pill{font-size:10px;padding:2px 7px;}
  .next-inner{gap:6px;}
  .next-chip{width:27px;height:27px;font-size:23px;}
  .next-name{font-size:13px;}

  /* Three-part orders remain on one row using icon + quantity. */
  .ticket{padding:6px 9px 7px;}
  .ticket-head{padding-bottom:3px;margin-bottom:4px;}
  .ticket-title{display:none;}
  .ticket-dish::before{display:none;}
  .ticket-body{gap:6px;}
  .ticket-slots{gap:4px;flex-wrap:nowrap;}
  .ticket-slots.compact .slot{padding:3px 4px;}
  .ticket-slots.compact .slot-name{display:none;}
  .slot{padding:3px 6px;}
  .slot-icon{width:20px;height:20px;font-size:18px;}
  .slot-name{font-size:9px;max-width:70px;}
  .slot-qty{font-size:10px;}
  .serve-btn{min-height:40px;padding:9px 14px;font-size:13px;}
  .ticket-status{
    margin-top:3px;
    font-size:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .ticket-timer{margin-top:4px;}

  .app::before{
    inset:-6px -4px;
    border-radius:22px;
    backdrop-filter:blur(12px) saturate(.94);
    -webkit-backdrop-filter:blur(12px) saturate(.94);
  }

  /* The station paints above the chef so its top rim naturally masks the
     lower body, making him appear from behind the board. */
  .stage{z-index:9;}

  .chef-visual{transform:none;}
  .chef-art{background-position:center top;}
  .chef[data-state="idle"]         .chef-art{background-image:url("assets/chef-v2/mobile/chef-idle.png");}
  .chef[data-state="memorizing"]   .chef-art{background-image:url("assets/chef-v2/mobile/chef-memorizing.png");}
  .chef[data-state="thinking"]     .chef-art,
  .chef[data-state="evaluating"]   .chef-art{background-image:url("assets/chef-v2/mobile/chef-evaluating.png");}
  .chef[data-state="cooking"]      .chef-art{background-image:url("assets/chef-v2/mobile/chef-cooking.png");}
  .chef[data-state="cooking"]      .chef-art{
    background-position:right top;
    transform-origin:top right;
    animation:chefCookMobile 1.8s ease-in-out infinite;
  }
  .chef[data-state="order-ready"]  .chef-art{
    background-image:url("assets/chef-v2/mobile/chef-pointing-up.png");
    animation:chefPointUp 1.1s ease-in-out infinite;
  }
  .chef[data-state="serve-success"] .chef-art{background-image:url("assets/chef-v2/mobile/chef-victory.png");}
  .chef[data-state="order-danger"] .chef-art{background-image:url("assets/chef-v2/mobile/chef-worried.png");}
  .chef[data-state="board-danger"] .chef-art{background-image:url("assets/chef-v2/mobile/chef-alarmed.png");}
  .chef[data-state="order-failed"] .chef-art{background-image:url("assets/chef-v2/mobile/chef-defeat.png");}

  /*
    Reserve a shallow strip beneath the ticket. The bust overlaps only the
    action corner; status and timer keep a protected lane on the left.
  */
  .order-zone{padding-bottom:36px;}
  .order-zone .ticket-status{padding-right:112px;}
  .order-zone .ticket-timer{margin-right:112px;}
  .chef{
    position:absolute;
    --chef-h:auto;--chef-w:auto;
    width:128px;height:128px;
    left:auto;right:-2px;top:62px;bottom:auto;
    opacity:.88;
    transform:translateY(8px);
    transition:transform .38s cubic-bezier(.3,1.2,.4,1),opacity .3s ease;
  }
  .chef[data-state="order-ready"],
  .chef[data-state="serve-success"],
  .chef[data-state="order-danger"],
  .chef[data-state="board-danger"],
  .chef[data-state="order-failed"]{
    opacity:1;transform:translateY(-2px);
  }
  .chef.chef-off{opacity:0;transform:translateY(8px) scale(.94);}
  .chef-bubble{display:none;}
}
@media (max-width:420px){
  .order-zone{padding-bottom:32px;}
  .order-zone .ticket-status{padding-right:104px;}
  .order-zone .ticket-timer{margin-right:104px;}
  .chef{width:120px;height:120px;right:-2px;top:62px;}
}

/* movimiento reducido: cambia de expresión, sin animaciones continuas */
@media (prefers-reduced-motion:reduce){
  .serve-btn.serve-pop,
  .serve-btn.serve-loop,
  .serve-btn.serve-remind{animation:none !important;}
  .chef-art{animation:none !important;}
  .chef{transition:opacity .3s ease;}
  .stage.stage-impact,
  .stage[data-juice]::after,
  .rank-fill,
  .ticket.is-ready,
  .level-pill.bump{animation:none !important;}
}

/* ============================================================
   ESCENA INMERSIVA — habitación continua con props reales
   (assets Higgsfield). Piso cruza todo el ancho por detrás
   del juego; props colgados y apoyados a los lados enmarcan
   el centro. pointer-events:none global.
   ============================================================ */

/* One master background: no seams, duplicated props or mismatched horizon. */
.room-floor{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  background:
    #c99761 url("assets/scene/background-room.png") center center/cover no-repeat;
  transform:translateZ(0);
}
.room-floor::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(75% 72% at 50% 42%,transparent 48%,rgba(66,38,18,.10) 100%),
    linear-gradient(180deg,rgba(255,244,222,.04),rgba(92,51,22,.05));
}

.scene{
  display:none;position:fixed;top:0;bottom:0;
  width:calc((100vw - 420px)/2);
  max-width:540px;
  z-index:2;pointer-events:none;overflow:visible;
}
.scene-left{left:0;} .scene-right{right:0;}
@media (min-width:1000px){ .scene{display:block;} }

/* ---- MARCOS (mismos que antes, con platos y retratos reales) ---- */
.frame{
  position:absolute;border-radius:6px;
  filter:drop-shadow(0 7px 12px rgba(61,35,16,.20));
}
.frame-wood{padding:8px;background:linear-gradient(145deg,#b5824e,#8a5f34);
  box-shadow:0 8px 16px rgba(80,50,20,.28),0 0 0 2px rgba(120,80,40,.5) inset,0 2px 3px rgba(255,255,255,.28) inset;}
.frame-mat{background:linear-gradient(160deg,#fdf3e2,#f3e2c8);border-radius:2px;padding:7px;height:100%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(150,110,60,.15) inset,0 2px 5px rgba(90,55,25,.12) inset;}
.frame-mat img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(90,55,25,.25));}
.f-portrait .frame-mat{background:linear-gradient(160deg,#efe4d2,#e2d0b6);}
.frame-badge{padding:11px 9px;text-align:center;background:linear-gradient(160deg,#fdf6e6,#f2e6cc);
  box-shadow:0 6px 13px rgba(80,50,20,.28),0 0 0 3px #b5824e,0 0 0 5px #8a5f34;}
.badge-star{display:block;font-size:24px;color:var(--gold);line-height:1;filter:drop-shadow(0 1px 1px rgba(120,80,20,.4));}
.badge-text{display:block;font-size:10px;font-weight:900;letter-spacing:.05em;color:#8a5f34;margin-top:3px;line-height:1.15;}
.frame-brunch{background:linear-gradient(160deg,#fdf6e6,#f0e2c4);}
.badge-crown{display:block;font-size:20px;color:var(--gold);line-height:1;}
.badge-text2{display:block;font-size:10px;font-weight:900;letter-spacing:.04em;color:#8a5f34;margin-top:2px;line-height:1.2;}
.badge-text2 b{font-size:12px;color:var(--accent-deep);}

/* Gallery row: every frame lives on clear upper wall, away from plants,
   wainscoting and the chef's action lane. */
.f-l1{width:112px;height:98px;top:10%;left:60%;transform:rotate(-2deg);}
.f-l2{width:74px;top:12%;left:5%;transform:rotate(2deg);}
.f-l3{width:76px;height:96px;top:25%;left:28%;transform:rotate(1deg);}
.f-r1{width:112px;height:98px;top:10%;left:50%;transform:rotate(2deg);}
.f-r2{width:74px;top:12%;right:2%;transform:rotate(-2deg);}
.f-r3{width:76px;height:96px;top:25%;left:65%;transform:rotate(-1deg);}

/* Narrow desktop: preserve the chef lane and keep only two left-side frames. */
@media (min-width:1000px) and (max-width:1279px){
  .scene{max-width:none;}
  .scene-right{display:none;}
  .f-l2{display:none;}
  .frame{transform:none !important;}
  .f-l1{width:98px;height:90px;top:15%;right:8%;left:auto;}
  .f-l3{width:82px;height:102px;top:17%;left:6%;right:auto;}
}