/* Kids Cooking Game — bright, warm, playful kitchen */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  /* Stop iOS double-tap-to-zoom on every tap target (viewport user-scalable is
     ignored by Safari). Drag surfaces set touch-action:none via class, which
     out-specifies this. */
  touch-action: manipulation;
  /* Kill the long-press magnifier/callout and accidental text selection. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* No image/svg drag-off on long press. */
img, svg, a { -webkit-user-drag: none; user-drag: none; }
[hidden] { display: none !important; }

:root {
  --bg: #fff4e3;
  --bg2: #ffe8cc;
  --card: #ffffff;
  --ink: #5a4632;
  --ink-soft: #8a7460;
  --red: #f2545b;
  --orange: #ff9a3d;
  --yellow: #f5b83d;
  --green: #57a44b;
  --blue: #57a4e8;
  --purple: #8f6ad0;
  --shadow: 0 6px 0 rgba(90, 70, 50, .12);
  --radius: 22px;
  /* one ingredient tile, and the gap/padding around the drawer grid — the
     drawer height is derived from these so it lands on exactly two rows */
  --shelf-row: 100px;
  --shelf-col: 76px;
  --shelf-gap: 6px;
  --shelf-pad: 6px;
}

html, body {
  margin: 0; padding: 0;
  font-family: 'Baloo 2', 'Comic Sans MS', 'Segoe UI', system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 20%, #ffe0c2 0 60px, transparent 61px),
    radial-gradient(circle at 85% 15%, #ffdcd2 0 45px, transparent 46px),
    radial-gradient(circle at 90% 80%, #fbe7c0 0 70px, transparent 71px),
    radial-gradient(circle at 8% 85%, #fde4d8 0 50px, transparent 51px),
    linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--ink);
  min-height: 100vh;
  overscroll-behavior: none;
  touch-action: manipulation;
}

button { font-family: inherit; color: inherit; cursor: pointer; border: none; }
h1, h2 { margin: 0; }
svg { display: block; width: 100%; height: 100%; }

.screen { display: none; min-height: 100vh; }
/* positioned so the restaurant decor layer can sit behind the screens */
.screen.active { display: flex; flex-direction: column; position: relative; z-index: 1; }

/* ---------------- shared bits ---------------- */
.big-btn {
  background: linear-gradient(180deg, #ffb14e, var(--orange));
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  padding: 14px 30px;
  border-radius: 999px;
  box-shadow: 0 6px 0 #d97a20;
  transition: transform .12s, box-shadow .12s;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #d97a20; }
.big-btn.alt { background: linear-gradient(180deg, #6db8f0, var(--blue)); box-shadow: 0 6px 0 #3a7ab8; }
.big-btn.alt:active { box-shadow: 0 2px 0 #3a7ab8; }

.pill-btn {
  background: var(--card);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: var(--shadow);
}
.pill-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(90,70,50,.12); }

.icon-btn {
  background: var(--card);
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 800;
  box-shadow: var(--shadow);
  flex: none;
}
.icon-btn:active { transform: translateY(3px); }

.screen-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px 6px;
}
.screen-head h2 { flex: 1; font-size: 1.7rem; }
.points-chip {
  background: var(--card); border-radius: 999px; padding: 8px 14px;
  font-weight: 800; box-shadow: var(--shadow);
}

.stars { letter-spacing: 2px; font-size: 1.2rem; }
.star { color: #ddd0c0; }
.star.lit { color: var(--yellow); text-shadow: 0 1px 2px rgba(180,120,20,.4); }
.big-stars { font-size: 2.4rem; }

/* ---------------- welcome ---------------- */
.welcome-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: 30px 20px; text-align: center;
}
.game-title {
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  line-height: 1.05;
  color: var(--red);
  text-shadow: 0 3px 0 rgba(180, 60, 60, .18);
}
.game-title span { display: block; font-size: .55em; color: var(--orange); }
.points-badge {
  background: var(--card); padding: 10px 22px; border-radius: 999px;
  font-size: 1.3rem; font-weight: 800; box-shadow: var(--shadow);
}
.welcome-chef { width: min(240px, 55vw); animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-8px);} }
.start-btn { font-size: 1.6rem; padding: 18px 44px; }
.welcome-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------------- categories ---------------- */
.cat-grid {
  flex: 1; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 24px; align-content: center; max-width: 900px; margin: 0 auto; width: 100%;
}
.cat-card {
  background: var(--card); border-radius: var(--radius);
  padding: 26px 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform .15s;
}
.cat-card:hover { transform: translateY(-4px) rotate(-1deg); }
.cat-card:active { transform: translateY(2px); }
.cat-art { width: 120px; }
.cat-name { font-size: 1.5rem; font-weight: 800; }
.cat-tag { color: var(--ink-soft); }

/* ---------------- recipe list ---------------- */
.recipe-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  padding: 20px; max-width: 1000px; margin: 0 auto; width: 100%;
}
.recipe-card {
  background: var(--card); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .15s;
}
.recipe-card:hover { transform: translateY(-4px); }
.recipe-card:active { transform: translateY(2px); }
.recipe-art { width: 130px; }
.recipe-name { font-weight: 800; font-size: 1.1rem; text-align: center; }
.recipe-fun { color: var(--ink-soft); font-size: .92rem; text-align: center; }

/* ---------------- play screen ---------------- */
/* Use svh (SMALL viewport height): it always reserves space for Safari's
   toolbar whether it's expanded OR collapsed, so the Serve button is never
   overlapped. dvh would report the tall height while the bar is collapsed and
   let the floating bar cover the bottom of the button. */
#screen-play { height: 100vh; height: 100svh; overflow: hidden; }
.play-top {
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 4px;
}
.play-title { flex: 1; font-weight: 800; font-size: 1.2rem; text-align: center; }
.fun-name { display: block; font-weight: 600; font-size: .85rem; color: var(--ink-soft); }

.steps-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px 14px;
  margin: 0; list-style: none; flex: none;
  scrollbar-width: thin;
}
.step-pill {
  flex: none; display: flex; align-items: center; gap: 8px;
  background: var(--card); border-radius: 999px; padding: 7px 14px 7px 8px;
  box-shadow: 0 3px 0 rgba(90,70,50,.1); font-size: .92rem; max-width: 300px;
  border: 3px solid transparent;
}
.step-pill .step-num {
  background: var(--bg2); width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; flex: none;
}
.step-pill.current { border-color: var(--orange); animation: pulse-border 1.4s infinite; }
@keyframes pulse-border { 50% { border-color: #ffd2a0; } }
.step-pill.done { opacity: .75; background: #e9f6e4; }
.step-pill.done .step-num { background: var(--green); color: #fff; }
.step-pill.done .step-num::before { content: '✓'; }
.step-pill.done .step-num { font-size: 0; }
.step-pill.done .step-num::before { font-size: 1rem; }

.play-main {
  flex: 1; display: grid; gap: 10px; padding: 6px 14px;
  grid-template-columns: 150px 1fr auto;
  min-height: 0;
}
.play-main > * { min-width: 0; }
.tools { width: 96px; }
.panel-label {
  font-weight: 800; color: var(--ink-soft); font-size: .85rem;
  text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 4px 0;
}

.shelf {
  background: #fff8ec; border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-height: 0;
}
/* Two rows of ingredients, always — the drawer scrolls SIDEWAYS for the rest.
   Sideways is what makes the drag work: an upward pull towards the stations can
   never be mistaken for a scroll, so items stay grab-on-first-touch. Fixed row
   and column sizes keep "two rows" exact (names wrap to one or two lines). */
.shelf-items {
  padding: var(--shelf-pad); gap: var(--shelf-gap);
  display: grid;
  grid-template-rows: repeat(2, var(--shelf-row));
  grid-auto-flow: column;
  grid-auto-columns: var(--shelf-col);
  justify-content: start;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* the swipe cue next to the "Ingredients" label in Maker Mode */
.scroll-hint {
  font-size: .7rem; color: var(--orange); letter-spacing: 0;
  text-transform: none; margin-left: 6px;
}
.shelf-item {
  background: var(--card); border-radius: 14px; padding: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(90,70,50,.08);
  cursor: grab; user-select: none;
  /* touch-action:none so the browser NEVER steals a pull — a drag to a station
     is usually diagonal, and handing any axis to the browser cancels it
     mid-gesture. engine.js scrolls the shelf itself instead. */
  touch-action: none;
  transition: transform .12s;
}
.shelf-item:hover { transform: scale(1.05) rotate(-2deg); }
.shelf-art { width: 42px; height: 48px; pointer-events: none; }
.shelf-art svg { height: 100%; }
.shelf-name { font-size: .72rem; font-weight: 700; text-align: center; pointer-events: none; line-height: 1.1; }
.shelf-qty { font-size: .7rem; color: var(--orange); font-weight: 800; pointer-events: none; }
.shelf-extra { color: var(--purple); }

.workspace {
  background: linear-gradient(180deg, #fdeedd, #fbe3c8);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px; padding: 10px; min-height: 0; overflow-y: auto;
  position: relative; touch-action: none;
}
.workspace.spoon-cursor { cursor: crosshair; }
.workspace.knife-cursor { cursor: crosshair; }

.station {
  width: clamp(120px, 22vw, 175px);
  display: flex; flex-direction: column; align-items: center;
  border-radius: 18px; border: 3px dashed transparent; padding: 2px;
  position: relative; touch-action: none; user-select: none;
}
.station-label { font-size: .8rem; font-weight: 800; color: var(--ink-soft); }
.station-art { width: 100%; aspect-ratio: 1; }
.station.drop-target { border-color: var(--green); background: #e9f6e455; }
.station.dragging-src { opacity: .45; }
.station.stirring { border-color: var(--blue); }
.station.bounce { animation: st-bounce .35s; }
@keyframes st-bounce { 30% { transform: scale(1.06); } 60% { transform: scale(.97); } }
/* Board item: whole vs chopped pieces are both present, toggled in place so the
   SVG is never rebuilt mid-chop (see chopTap / boardItemSvg). */
.board-item .bi-chopped { display: none; }
.board-item.is-chopped .bi-whole { display: none; }
.board-item.is-chopped .bi-chopped { display: block; }
.cut-line { transition: opacity .1s; }
.station.chop-shake { animation: chopshake .18s; }
@keyframes chopshake { 40% { transform: translateX(-3px);} 80% { transform: translateX(3px);} }
.station.blend-shake { animation: blshake .12s infinite; }
@keyframes blshake { 25% { transform: translate(-2px, 1px) rotate(-1deg);} 75% { transform: translate(2px,-1px) rotate(1deg);} }
.station-hidden .station-art { opacity: .9; }
.in-oven-note {
  display: grid; place-items: center; height: 100%;
  color: var(--ink-soft); font-weight: 700; text-align: center;
}
.station-extra { min-height: 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }

.heat-btn {
  background: var(--card); border-radius: 999px; padding: 5px 12px;
  font-weight: 800; font-size: .82rem; box-shadow: 0 3px 0 rgba(90,70,50,.1);
}
.heat-btn.on { background: linear-gradient(180deg, #ff9a5e, #f2545b); color: #fff; }

.done-bar {
  width: 90%; height: 12px; border-radius: 999px; position: relative;
  background: linear-gradient(90deg, #f7e3c0 0%, #f5b83d 44%, #e8963d 76%, #6b4a30 100%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}
.done-zone {
  position: absolute; left: 44%; width: 32%; top: -3px; bottom: -3px;
  border: 2.5px solid var(--green); border-radius: 8px;
}
.done-needle {
  position: absolute; top: -6px; width: 4px; height: 24px;
  background: var(--ink); border-radius: 2px; transform: translateX(-50%);
}

.blend-btn {
  background: linear-gradient(180deg, #ff7a70, var(--red)); color: #fff;
  border-radius: 999px; padding: 7px 12px; font-weight: 800; font-size: .85rem;
  box-shadow: 0 4px 0 #b83038; touch-action: none;
}
.blend-btn.blending { transform: translateY(3px); box-shadow: 0 1px 0 #b83038; }

.flip-hint, .oven-hint {
  font-weight: 800; font-size: .85rem; color: var(--red);
  animation: hop .7s infinite;
}
.oven-hint { color: var(--ink-soft); animation: none; }
.oven-hint.dim { opacity: .7; font-weight: 600; }
@keyframes hop { 50% { transform: translateY(-4px); } }
.flip-blob { animation: flipblob .6s; transform-origin: 66px 82px; }
@keyframes flipblob {
  0% { transform: translateY(0) scaleY(1); }
  40% { transform: translateY(-34px) scaleY(-1); }
  100% { transform: translateY(0) scaleY(1); }
}

.tools {
  background: #fff8ec; border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 8px;
}
.tool-btn {
  background: var(--card); border-radius: 16px; width: 72px; padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-weight: 700; font-size: .8rem;
  box-shadow: 0 3px 0 rgba(90,70,50,.1);
  border: 3px solid transparent;
}
.tool-btn svg { width: 44px; height: 44px; }
.tool-btn.active { border-color: var(--blue); background: #eaf4fd; }

/* Pad past the iOS home indicator / bottom address bar so Serve isn't overlapped
   (needs viewport-fit=cover on the <meta viewport> for env() to be non-zero). */
.play-bottom { padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; flex: none; }
.serve-btn { width: min(420px, 100%); }

.drag-ghost {
  position: fixed; z-index: 60; width: 74px; height: 84px;
  transform: translate(-50%, -60%); pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.25));
  transition: rotate .15s;
}
.drag-ghost.ghost-container { width: 110px; height: 110px; }
.drag-ghost.tilt { rotate: -18deg; }

#stir-spoon {
  position: fixed; z-index: 55; width: 56px; height: 56px;
  transform: translate(-50%, -85%) rotate(20deg); pointer-events: none;
}

.floaty {
  position: fixed; z-index: 70; transform: translateX(-50%);
  font-weight: 800; color: var(--green); background: #ffffffee;
  padding: 4px 12px; border-radius: 999px; box-shadow: var(--shadow);
  animation: floatup 1.4s forwards; pointer-events: none; font-size: .95rem;
  white-space: nowrap;
}
@keyframes floatup { to { transform: translate(-50%, -46px); opacity: 0; } }

/* ---------------- pour overlay ---------------- */
#pour-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(80, 55, 30, .45);
  display: grid; place-items: center; padding: 16px;
}
.pour-card {
  background: var(--card); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,.25);
  padding: 18px 22px; width: min(460px, 96vw);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.pour-title { font-size: 1.3rem; font-weight: 800; }
.pour-stage { display: flex; align-items: flex-end; gap: 8px; position: relative; }
.pour-source { width: 76px; height: 90px; transition: transform .2s; transform-origin: bottom right; align-self: flex-start; }
.pour-source.tilted { transform: rotate(-40deg) translateY(6px); }
.pour-stream { position: absolute; left: 74px; top: 46px; width: 34px; height: 84px; }
.pour-dest { width: 130px; height: 130px; }
.pour-meter { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.meter-tube {
  width: 40px; height: 120px; border-radius: 12px;
  background: #f3ede2; border: 3px solid #d8c8b0; position: relative; overflow: visible;
}
.meter-fill {
  position: absolute; bottom: 0; left: 0; right: 0; height: 0%;
  border-radius: 0 0 9px 9px; transition: height .08s linear;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.12);
}
.meter-tick {
  position: absolute; left: -6px; right: -6px; height: 0;
  border-top: 3px dashed var(--red);
}
.meter-tick span {
  position: absolute; left: 100%; top: -0.8em; margin-left: 4px;
  color: var(--red); font-weight: 800; font-size: .85rem;
}
.meter-read { font-size: 1.1rem; }
.pour-hint { color: var(--ink-soft); text-align: center; }
.pour-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hold-btn { background: linear-gradient(180deg, #6db8f0, var(--blue)); box-shadow: 0 6px 0 #3a7ab8; touch-action: none; user-select: none; }
.hold-btn:active { box-shadow: 0 2px 0 #3a7ab8; }
.done-btn { background: linear-gradient(180deg, #7dc25b, var(--green)); box-shadow: 0 6px 0 #3f7a2c; }
.done-btn:active { box-shadow: 0 2px 0 #3f7a2c; }

/* ---------------- result screen ---------------- */
#screen-result { align-items: center; justify-content: flex-start; padding: 20px; overflow-y: auto; }
.result-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(560px, 100%); }
/* holds the "thank you" line and then the rating, so neither shifts the layout */
.bubble-slot { display: flex; align-items: center; justify-content: center; width: 100%; }
.bubble-slot.with-line { min-height: 76px; }
.taste-bubble {
  background: var(--card); border-radius: var(--radius); padding: 12px 20px;
  font-size: 1.15rem; font-weight: 700; box-shadow: var(--shadow);
  text-align: center; max-width: 92%; transform: scale(0);
}
.taste-bubble.pop { animation: pop-in .4s forwards; }
.rating-bubble {
  background: var(--card); border-radius: 999px; padding: 10px 26px;
  font-size: 2rem; font-weight: 800; box-shadow: var(--shadow);
  transform: scale(0);
}
.rating-bubble.pop { animation: pop-in .45s forwards; }
@keyframes pop-in { 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.rating-bubble.great { color: var(--green); }
.rating-bubble.ok { color: var(--orange); }
.rating-bubble.bad { color: var(--red); }
.eater { width: min(230px, 55vw); }
.result-dish { width: 130px; transition: transform .7s ease-in; }
.result-dish.to-mouth { transform: translateY(-130px) scale(.4); }

/* restaurant tasting: customer and chef sitting at the same table */
.table-scene {
  position: relative; width: min(460px, 100%); padding-bottom: 56%; overflow: hidden;
}
.table-scene > * { position: absolute; }
.scene-eater { left: 38%; transform: translateX(-50%); bottom: 20%; width: 44%; }
.scene-chef { left: 70%; transform: translateX(-50%); bottom: 20%; width: 32%; }
.scene-table { left: 15%; bottom: -6%; width: 70%; }
/* the plate starts on the table between the two of them, then goes to the mouth */
.table-scene .result-dish {
  left: 56%; bottom: 26%; width: 15%; transform: translateX(-50%);
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.12));
}
.table-scene .result-dish.to-mouth { transform: translateX(-50%) translate(-83px, -13px) scale(.45); }
.result-panel {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: 10px; opacity: 0;
}
.result-panel.rise { animation: rise .5s forwards; }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.eater-comment { font-size: 1.15rem; text-align: center; font-weight: 700; }
.result-points { font-size: 1.4rem; font-weight: 800; color: var(--orange); }
.feedback-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.feedback-item {
  display: flex; gap: 8px; align-items: flex-start;
  background: #fff8ec; padding: 8px 12px; border-radius: 12px; font-size: .98rem;
}
.feedback-item.major { background: #fdeaea; }
.feedback-item.minor { background: #fdf4e0; }
.feedback-item.good { background: #edf7e8; }
.fb-icon { flex: none; }
.result-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.great-job { font-size: 1.3rem; font-weight: 800; color: var(--purple); animation: hop 1s infinite; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti span {
  position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(560deg); } }

/* ---------------- outfits ---------------- */
.outfit-hint { text-align: center; color: var(--ink-soft); margin: 4px 0 0; }
.outfit-grid {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  padding: 18px; max-width: 950px; margin: 0 auto; width: 100%;
}
.outfit-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 4px solid transparent;
}
.outfit-card.selected { border-color: var(--green); }
.outfit-card.locked { opacity: .55; filter: grayscale(.6); }
.outfit-art { width: 110px; }
.outfit-name { font-weight: 800; text-align: center; font-size: .95rem; }
.outfit-cost { font-size: .85rem; color: var(--ink-soft); font-weight: 700; }

/* ---------------- restaurants ---------------- */
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.points-badge.coins { color: #b07a1a; }
.shop-grid {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  padding: 18px; max-width: 950px; margin: 0 auto; width: 100%;
}
.shop-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 4px solid transparent; transition: transform .15s;
}
.shop-card.mine { border-color: var(--green); }
.shop-card.locked { opacity: .55; filter: grayscale(.6); }
.shop-card:not(.locked):active { transform: translateY(3px); }
.shop-art { width: 140px; }
.shop-name { font-weight: 800; font-size: 1.15rem; text-align: center; }
.shop-tag { color: var(--ink-soft); font-size: .9rem; text-align: center; }
.shop-cost { font-weight: 800; color: var(--orange); margin-top: 4px; }

/* the room you are standing in while serving: wallpaper, floor, decorations */
body[data-shop] {
  background:
    repeating-linear-gradient(90deg, var(--wall) 0 34px, var(--wall2) 34px 68px) 0 0/100% 78% no-repeat,
    linear-gradient(180deg, #00000026 0 7px, var(--floor) 7px, #00000026 100%) 0 100%/100% 22% no-repeat,
    var(--wall);
  background-attachment: fixed;
}
/* the ceiling starts under the floating header bar */
#room-decor { position: fixed; left: 0; right: 0; top: 72px; bottom: 0; z-index: 0; pointer-events: none; }
#room-decor .decor { position: absolute; opacity: .9; }
/* the play screen fills the width, so only floor pieces survive while cooking */
#screen-play.active ~ #room-decor .decor.wall { display: none; }
@media (max-width: 820px) { #room-decor { display: none; } }

/* order / customer screen */
.queue-grid {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding: 10px 18px; max-width: 860px; margin: 0 auto; width: 100%;
}
/* clears the bunting/lamps hanging at the top of the room */
.queue-hint { margin-top: 24px; }
@media (max-width: 820px) { .queue-hint { margin-top: 0; } }

/* customers sit at their own table, right in the room — no card around them */
.queue-card {
  background: none; box-shadow: none; padding: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform .15s;
}
.queue-card:hover { transform: translateY(-5px); }
.queue-card:active { transform: translateY(3px); }
.queue-seat { display: flex; flex-direction: column; align-items: center; width: 100%; }
.queue-face { width: 122px; }
.queue-tablewrap { position: relative; width: 180px; margin-top: -14px; }
/* the order sits on the table beside them, not in front of their face */
.queue-dish {
  position: absolute; left: 50%; bottom: 52%; transform: translateX(-50%);
  width: 56px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.12));
}
.queue-name { font-weight: 800; font-size: 1.25rem; text-shadow: 0 1px 0 #ffffffaa; }
.queue-recipe { font-weight: 800; text-align: center; line-height: 1.2; text-shadow: 0 1px 0 #ffffffaa; }

.order-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 10px 20px 30px; text-align: center;
}
.order-eater { width: min(170px, 42vw); animation: bob 2.6s ease-in-out infinite; }
.order-bubble {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 22px; font-size: 1.25rem; line-height: 1.45; max-width: 520px;
}
.order-bubble.sad { color: var(--ink-soft); }
.order-dish { width: 110px; }
.order-note { color: var(--ink-soft); margin: 0; max-width: 460px; }

/* order bar on the play screen */
.service-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card); box-shadow: var(--shadow); border-radius: 999px;
  margin: 0 14px; padding: 6px 16px; font-weight: 700; flex-wrap: wrap;
}
.service-order { font-size: .98rem; }
.service-timer { font-weight: 800; font-size: 1.1rem; color: var(--green); }
.service-timer.hurry { color: var(--red); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.12);} }
.result-money { font-size: 1.35rem; font-weight: 800; color: #b07a1a; }

/* ---------------- maker mode ---------------- */
.maker-hint {
  text-align: center; color: var(--ink-soft); font-weight: 700;
  margin: 4px 14px 0; font-size: .95rem;
}
.play-bottom { position: relative; }
.save-recipe-btn {
  position: absolute; left: 14px; bottom: 50%; transform: translateY(50%);
  font-size: .95rem; padding: 10px 14px; z-index: 2;
}
.maker-bar { display: flex; justify-content: center; padding: 10px 18px 0; }
.created-card { border: 4px dashed #c9b8e8; }

/* name-your-food dialog */
.name-overlay {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(60, 40, 25, .45); padding: 20px;
}
.name-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; width: min(380px, 100%); display: flex; flex-direction: column;
  align-items: center; gap: 12px; text-align: center;
}
.name-dish { width: 96px; }
.name-card h3 { margin: 0; font-size: 1.4rem; }
.name-card input {
  font-family: inherit; font-size: 1.2rem; font-weight: 700; color: var(--ink);
  width: 100%; padding: 12px 16px; border-radius: 999px; text-align: center;
  border: 3px solid #e8dccb; background: #fffaf2; -webkit-user-select: text; user-select: text;
}
.name-card input:focus { outline: none; border-color: var(--orange); }
.name-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.center-floaty { left: 50% !important; top: 40% !important; transform: translateX(-50%); }

/* chef answering the customer, and a very unhappy tummy */
.taste-bubble.from-chef { background: #fff2dd; }
.eater.barfing, .scene-eater.barfing { animation: heave .5s ease-in-out 2; }
@keyframes heave {
  0%, 100% { transform: translate(-50%, 0) rotate(0); }
  40% { transform: translate(-50%, 6px) rotate(-3deg); }
}
.eater.barfing { animation-name: heave-plain; }
@keyframes heave-plain {
  0%, 100% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(6px) rotate(-3deg); }
}

/* ---------------- tutorial coach ---------------- */
#coach {
  position: fixed; right: 14px; bottom: 90px; z-index: 75;
  display: flex; align-items: flex-end; gap: 6px; max-width: min(420px, 80vw);
  pointer-events: none;
}
.coach-face { width: 64px; flex: none; animation: bob 2s infinite; }
.coach-bubble {
  background: var(--card); border-radius: 18px 18px 18px 4px;
  box-shadow: var(--shadow); padding: 10px 14px; font-weight: 700; font-size: .98rem;
  animation: rise .3s;
}

/* ---------------- play layout (phone, tablet & desktop) ---------------- */
/* ONE responsive stacked layout at every size so the ingredients GRID is
   visible everywhere: workspace on top, full-width no-scroll ingredient grid
   below, tools row, then Serve. The grid auto-fills columns to the viewport
   width, so it adapts from phone to desktop. */
  .play-main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
  }
  .workspace { order: 1; align-content: safe center; padding: 6px; }
  /* Cap the drawer so the cooking stations always keep the bulk of the screen.
     Typical recipes still show every ingredient at once in the compact grid;
     only unusually long ingredient lists scroll inside this capped height. */
  /* The drawer is exactly two ingredient rows tall and scrolls past that, so
     the cooking stations always keep the bulk of the screen no matter how long
     the ingredient list is (Maker Mode stocks the whole pantry). */
  .shelf { order: 2; flex: none; }
  .shelf .panel-label { display: none; }
  .shelf.shelf-big .panel-label { display: block; padding: 2px 0 0; }
  .shelf-item { width: auto; padding: 4px; }
  .tools { order: 3; flex-direction: row; justify-content: center; padding: 4px; width: auto; }
  .tools .panel-label { display: none; }
  .tool-btn { width: 84px; flex-direction: row; gap: 6px; }
  .tool-btn svg { width: 30px; height: 30px; }
  /* Size stations so ALL of them fit in ONE row inside the visible workspace.
     The workspace has touch-action:none (no scrolling), so any station that
     wraps below the fold is unreachable — every station must be on screen.
     20vw keeps 4 stations across a phone row (min 72px), capped at 150 on tablet. */
  .station { width: clamp(72px, 20vw, 150px); }
  .play-title { font-size: 1rem; }
  #coach { bottom: 76px; }

/* ---------------- phone only (short screens) ---------------- *
 * On a phone the whole play area is ~435px tall, so the stations, the
 * ingredient drawer, the tools row and the Serve button must all share it.
 * The workspace has touch-action:none (no scrolling), so every station has to
 * be fully on screen — these trims keep the tallest station (the Frying Pan
 * with its stove button) short enough to fit the single visible row. Tablets
 * and desktop have room to spare, so they keep the larger default art. */
@media (max-width: 640px) {
  /* NOTE: do NOT cap .station-art height here — that distorts the square art and
     shrinks the cutting-board contents so small the chopped pieces can't be
     grabbed. Keep art square; make the (tallest) Frying Pan fit by shrinking its
     stove button/row instead. */
  .station-label { font-size: .72rem; }
  .station-extra { min-height: 0; gap: 2px; }
  .heat-btn { padding: 2px 8px; font-size: .68rem; }
  .shelf-art { width: 38px; height: 42px; }
  :root { --shelf-row: 88px; --shelf-col: 68px; }   /* smaller art ⇒ smaller tiles */
  /* Maker Mode's "Make it a real food" button is pinned bottom-left, which on a
     phone lands on top of Serve. Narrow enough, they share the row instead. */
  .play-bottom.has-save { gap: 8px; }
  .has-save .save-recipe-btn { position: static; transform: none; flex: none; font-size: .8rem; padding: 10px 12px; }
  .has-save .serve-btn { width: auto; flex: 1; font-size: 1.1rem; padding: 12px 12px; }
}

/* ---------------- washing up ---------------- */
.dirty-bar {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  background: #fff3f3; border: 3px dashed #f0b0b0; border-radius: var(--radius);
  margin: 6px 18px 0; padding: 8px 14px; font-weight: 700; color: #a8574f;
}
.dirty-plate { background: none; padding: 0; width: 88px; flex: none; animation: nudge 1.8s ease-in-out infinite; }
.dirty-plate:active { transform: scale(.94); }
@keyframes nudge { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }

.wash-area {
  position: relative; width: min(420px, 92%); margin: 6px auto 0;
  touch-action: none; user-select: none;
}
.wash-sink { width: 100%; }
.wash-plate {
  position: absolute; left: 50%; top: 57%; transform: translate(-50%, -50%);
  width: 58%; transition: filter .3s; cursor: grab;
}
.wash-plate.soapy { filter: drop-shadow(0 0 10px #bfe4ff) brightness(1.06); }
.wash-plate.clean { filter: drop-shadow(0 0 12px #ffe9a8) brightness(1.1); }
.wash-bubbles, .wash-water { position: absolute; inset: 0; pointer-events: none; }
.bubble {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffffffee, #cfeffc99 60%, #a8d8f055);
  border: 1px solid #ffffffaa; animation: bubble-up 1.2s ease-out forwards;
}
@keyframes bubble-up {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(1.1); opacity: 0; }
}
.wash-water::after {
  content: ''; position: absolute; left: 50%; top: 12%; width: 16px; height: 44%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #a8d8f0cc, #dff2fb66);
  border-radius: 8px; animation: pour-run .3s linear infinite;
}
@keyframes pour-run { 0% { opacity: .75; } 50% { opacity: 1; } 100% { opacity: .75; } }

.wash-bar {
  width: min(420px, 92%); height: 14px; margin: 10px auto 0;
  background: #fff; border-radius: 999px; box-shadow: var(--shadow); overflow: hidden;
}
.wash-fill { height: 100%; width: 0; background: linear-gradient(90deg, #8ed0ee, var(--green)); transition: width .15s; }
.wash-tools { display: flex; gap: 12px; justify-content: center; padding: 14px; flex-wrap: wrap; }
.wash-tool { width: 104px; font-size: 1.6rem; }
.wash-tool svg { width: 56px; margin: 0 auto; }
.wash-tool span { display: block; font-size: .9rem; font-weight: 800; }
.wash-tool.active { border-color: var(--blue); background: #eaf6ff; }
.wash-done { display: flex; justify-content: center; padding: 0 18px 20px; }
.wash-btn { background: linear-gradient(180deg, #7fd0f0, #3fa8d8); box-shadow: 0 6px 0 #2b7fa8; }
.wash-btn:active { box-shadow: 0 2px 0 #2b7fa8; }

/* A kitchen with lots of stations (Maker Mode) does not fit on one screen, so
   that workspace scrolls. `pan-y` lets a vertical swipe scroll it while every
   drag still works; `no-zoom-skip` (see index.html) lets the touch actually
   reach the scroller. Recipes with a handful of stations are unchanged. */
.workspace.scrolly {
  touch-action: pan-y;
  align-content: flex-start;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.workspace.scrolly::after {
  content: ''; position: sticky; bottom: -10px; left: 0; width: 100%; height: 18px;
  flex: 0 0 100%; margin-bottom: -10px; pointer-events: none;
  background: linear-gradient(180deg, #fbe3c800, #fbe3c8);
}