:root {
  --pink: #ff8fb1;
  --pink-deep: #ff5fa2;
  --pink-soft: #ffd5e3;
  --cream: #fff7ee;
  --mint: #b8f0d6;
  --lilac: #d6c5ff;
  --yolk: #ffd166;
  --ink: #2b1e3a;
  --neon-purple: #9d4edd;
  --neon-pink:   #ff006e;
  --neon-cyan:   #00f5ff;
  --shadow: 0 6px 0 rgba(43,30,58,.18);
  --shadow-sm: 0 3px 0 rgba(43,30,58,.18);
  --neon-glow: 0 0 12px var(--neon-pink), 0 0 24px rgba(157,78,221,.4);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(160deg, #1a0a28 0%, #2a1340 55%, #1f0e30 100%);
  color: var(--ink);
  touch-action: manipulation;
}
/* In-mode scenes (bake/ramen/boba/etc.) keep the soft pastel background */
body:not(.scene-menu) {
  background: linear-gradient(160deg, #ffe4ef 0%, #fff7ee 55%, #e7e0ff 100%);
}
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; position: relative; }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }

#topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(8px);
  z-index: 10;
  border-bottom: 2px solid transparent;
  flex: 0 0 auto;
}
#topbar .back { width: 38px; height: 38px; font-size: 18px; }
#topbar .pill { padding: 5px 10px; font-size: 14px; }
.scene-menu #topbar {
  background: linear-gradient(180deg, #1a0a28 0%, #2a1340 100%);
  border-bottom: 2px solid var(--neon-pink);
  box-shadow: 0 2px 12px rgba(255,0,110,.4);
}
.scene-menu .pill {
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow-sm), 0 0 8px rgba(255,0,110,.4);
}
.pill {
  background: white; padding: 8px 14px; border-radius: 20px;
  font-weight: 800; font-size: 18px; box-shadow: var(--shadow-sm);
}
#heartsPill { background: #ffe6ee; }
#coinsPill { background: #fff3cf; }
#topbar .back {
  font-size: 22px; width: 44px; height: 44px; border-radius: 50%;
  border: none; background: var(--pink); color: white; box-shadow: var(--shadow);
}
#topbar .back:active { transform: translateY(2px); }
.scene-menu .back[data-go="menu"] { visibility: hidden; }
#topbar #heartsPill { margin-left: 0; }
#topbar .back[data-go="quests"]     { margin-left: auto; background: #6dc99a; color: white; }
#topbar .back[data-go="trophies"]   { background: var(--yolk); color: var(--ink); }
#topbar .back[data-go="shopUnlock"] { background: var(--lilac); color: var(--ink); }

#scene { flex: 1; position: relative; overflow: hidden; }

button { font-family: inherit; cursor: pointer; }
.btn {
  border: none; border-radius: 18px; padding: 14px 22px;
  font-size: 18px; font-weight: 800; color: white;
  background: var(--pink); box-shadow: var(--shadow);
}
.btn.alt { background: var(--lilac); color: var(--ink); }
.btn.go  { background: #6dc99a; }
.btn.warn{ background: #ff9b6a; }
.btn:active { transform: translateY(2px); }
.btn[disabled] { opacity: .4; box-shadow: var(--shadow-sm); }

/* ---------- BAKE SHOP MENU (interior scene) ---------- */
.shopview {
  position: relative; height: 100%; width: 100%; overflow: hidden;
}
.shopview .backdrop,
.shopview .backdrop-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.station-art img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.shop-title {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, #ff5fa2, #b067ff, #5fc8ff);
  color: white; font-weight: 900; font-size: clamp(20px, 3vw, 32px);
  padding: 8px 22px; border-radius: 22px;
  box-shadow: var(--shadow), inset 0 -4px 0 rgba(0,0,0,.15);
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 5;
}

/* Every button squashes when pressed — instant "iPad game" feel. Buttons that
   rely on transforms for positioning are excluded (they define their own). */
button:not(.station):not(.avatar-zone):not(.avatar-style-btn):not(.cafe-decor):not(.disco-zone) {
  transition: transform .08s;
}
button:not(.station):not(.avatar-zone):not(.avatar-style-btn):not(.cafe-decor):not(.disco-zone):active {
  transform: scale(.94);
}

/* Cafe progression banner — your level + fans toward the next tier */
.cafe-banner {
  position: absolute; top: 10px; left: 10px; z-index: 6;
  background: rgba(255,255,255,.92);
  border: 2px solid var(--pink-soft);
  border-radius: 18px; padding: 8px 14px;
  box-shadow: var(--shadow-sm);
  min-width: 196px; max-width: 46%;
  pointer-events: none;
}
.cafe-name { font-weight: 900; font-size: clamp(14px, 2vw, 20px); color: var(--pink-deep); line-height: 1.1; }
.cafe-tier { font-weight: 800; font-size: 12px; color: #7a5a86; margin-top: 1px; text-transform: capitalize; }
.cafe-bar { margin-top: 6px; height: 10px; border-radius: 999px; background: #eadcf3; overflow: hidden; }
.cafe-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ff5fa2, #b067ff, #5fc8ff);
}
.cafe-next { margin-top: 4px; font-weight: 800; font-size: 11px; color: #9a5a7a; }

/* Bought decor scattered around the cafe room — every piece is poke-able */
.cafe-decor-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cafe-decor {
  position: absolute;
  background: none; border: none; padding: 0; cursor: pointer;
  pointer-events: auto; line-height: 1;
  font-size: clamp(30px, 4.6vw, 54px);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
  animation: stationBob 3.2s ease-in-out infinite;
}
.cafe-decor.poked { animation: decorPoke .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes decorPoke {
  30% { transform: scale(1.45) rotate(-14deg); }
  65% { transform: scale(.88) rotate(10deg); }
}

/* Idol poke reaction (animate the inner character so centering is preserved) */
.avatar-zone.poked .avatar-character { animation: idolPoke .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes idolPoke {
  30% { transform: translateY(-16px) scale(1.06); }
  60% { transform: translateY(0) scale(.96); }
}
.avatar-style-btn {
  position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%);
  z-index: 5; border: 2px solid #fff; cursor: pointer;
  background: linear-gradient(180deg, #c8a6ff, #9a6bff);
  color: #fff; font-weight: 900; font-size: clamp(12px, 1.6vw, 15px);
  padding: 5px 14px; border-radius: 999px;
  box-shadow: var(--shadow-sm), inset 0 -3px 0 rgba(0,0,0,.12);
}
.avatar-style-btn:active { transform: translateX(-50%) scale(.92); }

/* Invisible hotspot over the painted disco ball; tapping it = party time */
.disco-zone {
  position: absolute; top: 5%; left: 40%; width: 20%; height: 24%;
  background: none; border: none; cursor: pointer; z-index: 3;
}
.shopview.party .backdrop-img { animation: partyLights 2s linear; }
@keyframes partyLights {
  0%, 100% { filter: none; }
  20% { filter: hue-rotate(50deg)  saturate(1.5) brightness(1.08); }
  45% { filter: hue-rotate(-60deg) saturate(1.6) brightness(1.12); }
  70% { filter: hue-rotate(120deg) saturate(1.5) brightness(1.08); }
}
/* everyone dances while the party lasts */
.shopview.party .station    { animation-duration: .5s; }
.shopview.party .cafe-decor { animation-duration: .45s; }

/* ---- The room itself changes as your cafe levels up ---- */
.shopview.tier-1 .backdrop-img { filter: saturate(.78) brightness(.96) sepia(.14); }
.shopview.tier-3 .backdrop-img { filter: saturate(1.18) brightness(1.05); }
.shopview.tier-4 .backdrop-img { filter: saturate(1.3) brightness(1.08); animation: stadiumGlow 5s ease-in-out infinite; }
@keyframes stadiumGlow { 50% { filter: saturate(1.5) brightness(1.15) hue-rotate(14deg); } }
/* neon wash for the top tiers */
.shopview.tier-3::after, .shopview.tier-4::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255,95,162,.20), transparent 52%),
    radial-gradient(ellipse at 82% 0%, rgba(95,200,255,.20), transparent 52%);
}
.shopview.tier-4::after {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255,95,162,.30), transparent 55%),
    radial-gradient(ellipse at 82% 0%, rgba(95,200,255,.30), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(176,103,255,.22), transparent 55%);
  animation: spotlightPulse 3.2s ease-in-out infinite;
}
@keyframes spotlightPulse { 50% { opacity: .55; } }

/* ---- Level-up celebration overlay ---- */
.levelup-ov {
  position: absolute; inset: 0; z-index: 9;
  display: grid; place-items: center;
  background: rgba(60, 20, 70, .45);
  animation: luFade .3s ease-out;
}
.levelup-ov.out { opacity: 0; transition: opacity .35s; }
@keyframes luFade { from { opacity: 0; } }
.levelup-card {
  background: white; border-radius: 26px; padding: 22px 34px; text-align: center;
  border: 4px solid var(--pink-soft);
  box-shadow: var(--shadow), 0 0 40px rgba(255,95,162,.5);
  animation: pop .45s cubic-bezier(.2,1.5,.4,1);
}
.levelup-card .lu-big { font-size: 56px; animation: idleBob 1.2s ease-in-out infinite; }
.levelup-card h2 {
  margin: 4px 0; font-size: 30px;
  background: linear-gradient(90deg, #ff5fa2, #b067ff, #5fc8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.levelup-card p { margin: 4px 0 10px; font-weight: 800; color: var(--ink); font-size: 17px; }
.levelup-card b { color: var(--pink-deep); font-size: 21px; }
.levelup-card .lu-tap { font-size: 12px; font-weight: 800; color: #b08ac0; animation: pulse 1.4s infinite; }

/* ---- Scene-enter pop (every scene change feels app-like) ---- */
#scene.scene-enter { animation: sceneEnter .22s ease-out; }
@keyframes sceneEnter { from { opacity: 0; transform: scale(.985); } }

/* soft contact shadow so the idol stands ON the floor, not over it */
.avatar-zone::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 62%; height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(40,10,50,.30), transparent 70%);
  pointer-events: none;
}
/* Decorate button — top-right candy pill */
.cafe-decorate-btn {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  border: 2px solid #fff; cursor: pointer;
  background: linear-gradient(180deg, #ff9ecb, #ff5fa2);
  color: #fff; font-weight: 900; font-size: clamp(13px, 1.8vw, 17px);
  padding: 8px 16px; border-radius: 999px;
  box-shadow: var(--shadow-sm), inset 0 -3px 0 rgba(0,0,0,.12);
}
.cafe-decorate-btn:active { transform: scale(.95); }

/* Today's-goals pill, just under the Decorate button */
.cafe-goals-pill {
  position: absolute; top: 72px; right: 10px; z-index: 6;
  border: 2px solid #fff; cursor: pointer;
  background: linear-gradient(180deg, #9ad0ff, #5fb0ff);
  color: #11406b; font-weight: 900; font-size: clamp(12px, 1.6vw, 15px);
  padding: 6px 13px; border-radius: 999px;
  box-shadow: var(--shadow-sm), inset 0 -3px 0 rgba(0,0,0,.1);
  animation: pulse 1.8s ease-in-out infinite;
}
.cafe-goals-pill:active { transform: scale(.95); }

/* Tier-locked decor card in the shop */
.unlock-card.locked { opacity: .55; }
.unlock-card.locked .buy { background: #cdbcd6; color: #fff; }

/* Station hotspots — sit on top of backdrop, glow + bob to invite tapping */
.station {
  position: absolute;
  border: none; background: transparent; padding: 0;
  width: clamp(80px, 11vw, 130px);
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  animation: stationBob 2.6s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.18));
  z-index: 3;
}
.station.bake  { animation-delay: 0s; }
.station.ramen { animation-delay: .15s; }
.station.serve { animation-delay: .3s; }
.station.boba  { animation-delay: .45s; }
.station.stage { animation-delay: .6s; }
.station.ramen .station-sign { background: #ff9a3c; color: white; }
.station.boba  .station-sign { background: #d8b08a; color: white; }
@keyframes stationBob { 50% { transform: translateY(-8px); } }

.station-art {
  width: 100%;
  height: clamp(64px, 8.5vw, 104px);
  background: transparent;
  padding: 0;
  transition: transform .15s;
  position: relative;
}
.station-art img {
  filter: drop-shadow(0 0 10px rgba(255,0,110,.6)) drop-shadow(0 4px 6px rgba(0,0,0,.3));
}
.station.ramen .station-art img { filter: drop-shadow(0 0 10px rgba(255,154,60,.7))  drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.station.serve .station-art img { filter: drop-shadow(0 0 10px rgba(108,200,154,.7)) drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.station.boba  .station-art img { filter: drop-shadow(0 0 10px rgba(0,245,255,.7))   drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.station.stage .station-art img { filter: drop-shadow(0 0 10px rgba(255,209,102,.7)) drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.station-art svg { width: 100%; height: 100%; display: block; }
.station-art::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 26px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.5), transparent 60%);
  opacity: 0; transition: opacity .2s;
}
.station:active .station-art { transform: scale(.95); }
.station-sign {
  margin-top: 6px;
  background: white;
  color: var(--ink);
  font-weight: 900; font-size: clamp(14px, 1.8vw, 20px);
  padding: 6px 14px; border-radius: 16px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  position: relative;
  z-index: 2;
}
.station.bake  .station-sign { background: var(--pink-soft); }
.station.serve .station-sign { background: var(--mint); }
.station.stage .station-sign { background: var(--yolk); }

/* Avatar standing on the shop floor */
.avatar-zone {
  position: absolute;
  left: 50%; bottom: 4%;
  transform: translateX(-50%);
  width: clamp(180px, 28vw, 320px);
  border: none; background: transparent;
  display: flex; flex-direction: column; align-items: center;
  padding: 0; cursor: pointer;
  z-index: 4;
  filter: drop-shadow(0 10px 0 rgba(0,0,0,.15));
}
.avatar-character {
  width: 100%; aspect-ratio: 1/1.6;
  animation: idleBob 2s ease-in-out infinite;
}
.avatar-character svg { width: 100%; height: 100%; }
.avatar-hint {
  margin-top: -4px;
  background: white; padding: 4px 12px; border-radius: 14px;
  font-weight: 800; font-size: 13px; color: var(--pink-deep);
  box-shadow: var(--shadow-sm);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.avatar-zone:active .avatar-character { transform: scale(.94); }

/* On phone, stack stations horizontally across the bottom */
@media (max-height: 520px) {
  .station { width: clamp(110px, 18vw, 180px); }
}
@media (max-width: 540px) {
  .station.bake  { left: 2% !important; bottom: 28% !important; width: 30vw; }
  .station.serve { left: 50% !important; transform: translateX(-50%); bottom: 28% !important; width: 32vw; }
  .station.stage { right: 2% !important; bottom: 28% !important; width: 30vw; }
  .avatar-zone   { bottom: 2%; width: 28vw; }
}

/* ---------- BAKE ---------- */
.bake:not(.station) { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); height: 100%; max-width: 100%; overflow: hidden; gap: 8px; padding: 8px; position: relative; }

/* ---- ARTFUL MIXING BOWL: hand-drawn bowl + living batter ---- */
.bowl.bowl-artful {
  background: none; border: none; box-shadow: none; border-radius: 0;
  /* sized against the WORKSPACE (container units) so it fits any screen height */
  width: min(52cqw, 340px, 62cqh); height: auto; aspect-ratio: 1 / 1;
  position: relative; touch-action: none;
}
.bowl-artful .bowl-art {
  width: 100%; height: 100%; object-fit: contain;
  pointer-events: none; -webkit-user-select: none; user-select: none;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.16));
}
.bowl-artful.armed .bowl-art {
  filter: drop-shadow(0 0 12px var(--neon-cyan)) drop-shadow(0 10px 14px rgba(0,0,0,.16));
}
/* the batter area sits over the bowl opening in the art */
.bowl-artful .bowl-inner {
  position: absolute; left: 15%; right: 15%; top: 28%; bottom: 46%;
  border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 2;
}
/* oversized fill so rotating while stirring never shows gaps */
.bowl-artful .bowl-inner .contents {
  position: absolute; left: -25%; right: -25%; bottom: -15%;
  width: auto; height: 0;
  border-radius: 48% 48% 0 0 / 14% 14% 0 0;
  transition: height .3s, background .3s;
}
/* the batter is a LIQUID: blended color (--batter), a lighter surface ellipse,
   marbled swirl that appears as you stir (--swirl 0→1), lumps that fade out */
.bowl-artful .bowl-inner .contents {
  background:
    conic-gradient(from 0deg at 50% 62%,
      rgba(255,255,255, calc(.30 * var(--swirl, 0))) 0 9%, transparent 9% 42%,
      rgba(0,0,0, calc(.09 * var(--swirl, 0))) 42% 56%, transparent 56% 78%,
      rgba(255,255,255, calc(.18 * var(--swirl, 0))) 78% 86%, transparent 86%),
    var(--batter, #ffd8a8);
  transition: height .3s, --batter .4s;
}
.bowl-artful .batter-surface {
  position: absolute; left: -4%; right: -4%; height: 18%;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 40% 35%, var(--batter-light, #fff0dc), var(--batter, #ffd8a8) 75%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.12);
  transition: bottom .3s, opacity .3s;
}
.bowl-artful .batter-lumps {
  position: absolute; left: 6%; right: 6%; height: 22%; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 40%, rgba(0,0,0,.14) 0 4px, transparent 5px),
    radial-gradient(circle at 55% 65%, rgba(255,255,255,.35) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 35%, rgba(0,0,0,.12) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 38% 75%, rgba(0,0,0,.10) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 70%, rgba(255,255,255,.3) 0 2.5px, transparent 3.5px);
  transition: bottom .3s;
}
.bowl-artful .batter-ripple {
  position: absolute; left: 50%; width: 30%; height: 12%;
  transform: translate(-50%, 50%); border-radius: 50%;
  border: 3px solid rgba(255,255,255,.7); pointer-events: none;
  animation: batterRipple .6s ease-out forwards;
}
@keyframes batterRipple { to { width: 110%; height: 34%; opacity: 0; border-width: 1px; } }
.ing-fall {
  position: fixed; z-index: 1250; font-size: 40px; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.3));
}
.bowl-artful .bowl-chunks { position: absolute; inset: 0; }
.bowl-artful .chunk {
  position: absolute; font-size: clamp(16px, 2.4vw, 24px); line-height: 1; opacity: .92;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
  animation: chunkBob 2.2s ease-in-out infinite alternate, chunkDrop .4s cubic-bezier(.2,1.5,.4,1);
  pointer-events: none;
}
@keyframes chunkBob  { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-6px) rotate(7deg); } }
@keyframes chunkDrop { from { transform: translateY(-40px) scale(.4); opacity: 0; } }
.bowl-artful.gulp .bowl-inner { animation: batterGulp .3s ease-out; }
@keyframes batterGulp { 40% { transform: scaleY(.92) scaleX(1.04); } }
.bowl-artful .mix-progress {
  /* hidden until stirring starts; sits just above the visible rim, not floating in the wall */
  position: absolute; left: 30%; right: 30%; top: 24%;
  height: 8px; background: rgba(90,40,80,.18); border: 2px solid #fff; border-radius: 8px; overflow: hidden; z-index: 5;
  opacity: 0; transition: opacity .3s;
}
.bowl-artful .mix-progress:has(.fill[style*="width"]) { opacity: 1; }

/* ---- ARTFUL OVEN: hand-drawn oven, window is the interactive zone ---- */
.oven-v2.oven-artful {
  background: none; border: none; box-shadow: none; padding: 0;
  /* closed.png is cropped to the oven itself (482×706); size by height so the
     whole oven is always visible and big */
  height: min(82cqh, 440px); width: auto; aspect-ratio: 482 / 706;
  position: relative; display: block;
}
.oven-artful .oven-art {
  width: 100%; height: 100%; object-fit: contain;
  pointer-events: none; -webkit-user-select: none; user-select: none;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.16));
}
.oven-artful .oven-window-zone {
  /* the painted window circle, in cropped-image coordinates */
  position: absolute; left: 25%; top: 40.5%; width: 48%; height: 32.5%; z-index: 3;
}
/* the oven "lights up" with a pulsing glow while baking (one consistent art,
   no image swap — the old lit image was a different-sized drawing) */
.oven-artful.cooking .oven-glow { animation: ovenFlicker .9s ease-in-out infinite alternate; }
@keyframes ovenFlicker { from { opacity: .75; } to { opacity: 1; } }
.oven-artful.door-open .oven-window-zone { filter: drop-shadow(0 0 10px rgba(255,255,255,.65)); }
.oven-artful .oven-cavity {
  position: absolute; inset: 0; width: auto; height: auto;
  border-radius: 24%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #59344a, #241222 78%);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.oven-artful.door-open .oven-cavity { opacity: 1; pointer-events: auto; }
.oven-artful.cooking  .oven-cavity { opacity: 1; background: none; }
.oven-artful .cavity-pan-slot {
  position: absolute; left: 10%; right: 10%; top: 22%; bottom: 14%;
  width: auto; height: auto;
  border: 2px dashed rgba(255,255,255,.5); border-radius: 14px;
  display: grid; place-items: center; background: none;
}
.oven-artful.cooking .cavity-pan-slot,
.oven-artful .cavity-pan-slot:has(.cavity-placed-pan) { border-color: transparent; }
.oven-artful .cavity-slot-hint { font-size: 10px; font-weight: 800; color: rgba(255,255,255,.65); }
.oven-artful .oven-glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.oven-artful .oven-door {
  position: absolute; inset: -10%;
  background: none; border: none; cursor: pointer; z-index: 5; border-radius: 30%;
}
.oven-artful .oven-controls {
  position: absolute; left: 6%; right: 6%; bottom: 0;
  display: flex; justify-content: center; gap: 12px; z-index: 4;
}
.oven-artful .oven-progress {
  position: absolute; left: 22%; right: 22%; top: 1.5%;
  height: 9px; background: rgba(0,0,0,.18); border-radius: 6px; overflow: hidden; z-index: 4;
}

/* THE LIVE WATCHER — the ordering customer stands at the counter and reacts
   while you cook. Top-left, mirroring the order ticket at top-right. */
.watcher {
  position: absolute; top: 46px; left: 10px; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  pointer-events: none; max-width: 190px;
}
.watcher-face {
  font-size: clamp(40px, 6vw, 58px); line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
  animation: idleBob 2.4s ease-in-out infinite;
}
.watcher.excited .watcher-face { animation-duration: .55s; }
/* painted regulars: portrait + a small emoji MOOD badge that pops on reactions */
.watcher.has-portrait .watcher-face { position: relative; font-size: 0; line-height: 0; }
.watcher-portrait {
  width: clamp(64px, 9vw, 96px); height: auto; display: block;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.22));
}
.watcher-mood {
  position: absolute; right: -6px; bottom: -4px; font-size: clamp(20px, 3vw, 28px); line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));
}
.watcher-mood.pop { animation: idolPoke .5s cubic-bezier(.2,1.6,.4,1); }
.reveal .buyer .face { display: flex; align-items: flex-end; gap: 2px; }
.reveal .buyer .face .portrait { width: 72px; height: auto; display: block; }
.watcher.bounce  .watcher-face { animation: idolPoke .5s cubic-bezier(.2,1.6,.4,1); }
.watcher-bubble {
  background: #fff; border: 2px solid var(--pink-soft);
  border-radius: 14px 14px 14px 4px;
  padding: 5px 10px; font-weight: 800; font-size: 13px; color: var(--ink);
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(6px) scale(.8); transform-origin: bottom left;
  transition: opacity .18s, transform .18s;
}
.watcher.talking .watcher-bubble { opacity: 1; transform: none; }
.watcher-name {
  font-weight: 900; font-size: 11px; color: #fff;
  background: var(--pink-deep); border-radius: 999px; padding: 1px 8px;
  margin-top: -2px; box-shadow: var(--shadow-sm);
}
.watcher-name:empty { display: none; }
/* handing over food: the watcher becomes a glowing drop target */
.watcher.wants-food { pointer-events: auto; }
.watcher.wants-food .watcher-face { animation: idolPoke 1s cubic-bezier(.2,1.6,.4,1) infinite; }
.watcher.wants-food.armed .watcher-face { filter: drop-shadow(0 0 14px var(--neon-cyan)) drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.watcher-food {
  position: absolute; left: 86px; top: 34px; font-size: 54px; line-height: 1; z-index: 2;
  transform-origin: left center; transition: transform .18s cubic-bezier(.3,1.5,.5,1);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
}
.watcher-food.bite { animation: foodBite .28s ease-out; }
@keyframes foodBite { 30% { filter: brightness(1.4) drop-shadow(0 3px 4px rgba(0,0,0,.3)); } }
.watcher.eating .watcher-face { animation: chew .28s ease-in-out infinite alternate; }
@keyframes chew { to { transform: translateY(2px) scaleY(.92); } }
/* the plate you drag to the customer at serve time (wrapper does the
   centering so the button's press-squash doesn't fight translateX) */
.serve-plate-wrap {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 7;
}
.serve-plate {
  cursor: grab; border: 3px solid #fff;
  background: linear-gradient(180deg, #fff, #ffe9f3);
  border-radius: 999px; padding: 6px 18px 6px 12px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow), 0 0 0 4px rgba(255,95,162,.25);
  animation: pulse 1.4s ease-in-out infinite;
}
.serve-plate span  { font-size: 34px; line-height: 1; }
.serve-plate small { font-weight: 900; font-size: 12px; color: var(--pink-deep); }
.cake-canvas.served { opacity: .35; filter: grayscale(.4); transition: opacity .3s; }
.reveal .cust-name { font-weight: 900; font-size: 12px; color: var(--pink-deep); margin: -2px 0 4px; }

/* Order ticket — a customer's request pinned over the bake workspace */
.order-ticket {
  position: absolute; top: 48px; right: 10px; z-index: 6;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  max-width: 230px; cursor: pointer;
  background: #fffbe8; border: 2px dashed #e8b84a; border-radius: 14px;
  padding: 6px 10px;
  font-weight: 800; font-size: 12px; color: #7a5a20;
  box-shadow: var(--shadow-sm); transform: rotate(1.5deg);
}
.order-ticket .ot-emoji { font-size: 22px; line-height: 1; }
.order-ticket .ot-arrow { font-size: 11px; color: #a98a3a; }
.order-ticket small { flex-basis: 100%; font-size: 10px; font-weight: 700; color: #a98a3a; }
.order-ticket.ot-mini {
  transform: rotate(1.5deg) scale(.75); transform-origin: top right;
  opacity: .85; pointer-events: none;
}
/* request chips on the ticket — tick ✓ live as the player fulfills them */
.order-ticket .ot-with { font-size: 11px; color: #a98a3a; }
.order-ticket .ot-chip {
  position: relative; display: inline-grid; place-items: center;
  width: 30px; height: 30px; font-size: 19px; line-height: 1;
  background: #fff; border: 2px solid #ecd9a0; border-radius: 9px;
}
.order-ticket .ot-chip.done { border-color: #5aa06f; background: #e3f7e8; }
.order-ticket .ot-chip.done::after {
  content: "✓"; position: absolute; right: -7px; top: -8px;
  width: 16px; height: 16px; border-radius: 50%; font-size: 11px; font-weight: 900;
  background: #5aa06f; color: #fff; display: grid; place-items: center;
}
.order-ticket.hit { animation: ticketHit .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes ticketHit { 40% { transform: rotate(1.5deg) scale(1.12); } }
/* ---- SCOOP STEP RESKIN: kawaii bowl as the batter source, pastel pan ---- */
.scoop-wrap-v2 { overflow: auto; place-items: start center; }
.pan-picker h3 { font-size: 15px; margin-bottom: 8px; }
.pan-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pan-card { padding: 6px 6px 8px; border-radius: 14px; position: relative; gap: 2px; }
.pan-card .pan-emoji {
  position: absolute; top: 4px; right: 6px; font-size: 20px; line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.pan-preview { width: 74%; }
.pan-name  { font-size: 12px; }
.pan-count { font-size: 10px; }
.scoop-source-bowl.bowl-artful-src {
  width: min(30cqw, 200px, 62cqh); aspect-ratio: 1 / 1;
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
}
.bowl-artful-src .bowl-art {
  width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  -webkit-user-select: none; user-select: none;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.16));
}
.bowl-artful-src .bowl-inner {
  position: absolute; left: 15%; right: 15%; top: 28%; bottom: 46%;
  border-radius: 50%; overflow: hidden; pointer-events: none;
}
.bowl-artful-src .bowl-batter {
  position: absolute; left: -25%; right: -25%; bottom: -15%; height: 78%;
  border-radius: 48% 48% 0 0 / 14% 14% 0 0;
}
.scoop-stage-v2 .active-pan { flex: 0 1 auto; width: min(58%, 440px, 105cqh); }
.scoop-stage-v2 .pan-bg {
  background: linear-gradient(180deg, #ecd9f8, #cfb3e6);
  border: 4px solid #fff; border-radius: 22px;
  box-shadow: var(--shadow), inset 0 -6px 0 rgba(0,0,0,.08);
}
.scoop-stage-v2 .mold-cell {
  background: radial-gradient(circle at 35% 30%, #7a5646, #3d2619);
  box-shadow: inset 0 5px 10px rgba(0,0,0,.45), inset 0 -2px 0 rgba(255,255,255,.12);
}
/* oven: shrink the dials so they never spill out of the workspace, and make
   the emptied counter pan vanish instead of leaving a grey slab */
.oven-artful .oven-controls { bottom: -2%; gap: 8px; }
.oven-artful .dial { transform: scale(.82); transform-origin: top center; }
/* pastel knobs that belong on the painted oven (the neon-purple boxes clashed) */
.oven-artful .dial {
  background: linear-gradient(180deg, #fff6fb, #f3dcec);
  border: 3px solid #8a4a6e; border-radius: 16px;
  color: #6b3a58; box-shadow: 0 4px 0 #c99ab8; padding: 6px 8px;
}
.oven-artful .dial:active { transform: scale(.82) translateY(2px); box-shadow: 0 2px 0 #c99ab8; }
.oven-artful .dial-label { color: #a4547f; }
.oven-artful .dial-knob {
  background: radial-gradient(circle at 35% 30%, #ffe1f1, #e6a9cc 70%, #c98ab0);
  border: 3px solid #8a4a6e; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
}
.oven-artful .dial-pointer { background: #8a4a6e; box-shadow: none; width: 5px; }
.oven-artful .dial-value { background: #8a4a6e; color: #fff; }
/* THE DOOR: a glass panel over the window, hinged at the bottom, swings down to open */
.oven-artful .oven-window-zone { perspective: 520px; }
.oven-artful .oven-door-panel {
  position: absolute; inset: -3%; z-index: 4; pointer-events: none;
  transform-origin: 50% 100%; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,1.2,.5,1);
  border-radius: 26%;
}
.oven-artful .oven-door-glass {
  position: absolute; inset: 0; border-radius: 26%;
  background: linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,.18) 100%);
  border: 3px solid rgba(255,255,255,.55); box-sizing: border-box;
  transition: background .3s, border-color .3s;
}
.oven-artful .oven-door-handle {
  position: absolute; left: 22%; right: 22%; top: -9%; height: 8%;
  border-radius: 999px; background: linear-gradient(180deg, #fff, #d7b6dc);
  border: 2px solid #8a4a6e; box-shadow: 0 3px 0 rgba(0,0,0,.15);
}
.oven-artful.door-open .oven-door-panel { transform: rotateX(-90deg); opacity: 0; transition: transform .55s cubic-bezier(.4,1.2,.5,1), opacity .15s .4s; }   /* swings flat, then tucks away under the front panel */
.oven-artful.door-open .oven-door-glass {
  background: linear-gradient(160deg, #f6d9ee, #d7b6dc); border-color: #8a4a6e;   /* we now see the door's inside face */
}
.oven-artful.door-open .oven-window-zone { filter: none; }
.oven-artful.door-open .oven-door-handle { opacity: 0; transition: opacity .2s; }   /* tucked under the swung door */
/* the open cavity is round like the painted window, with a wire rack the pan sits on */
.oven-artful .oven-cavity { border-radius: 50%; }
.oven-artful .oven-cavity::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 58%; height: 10%;
  border-top: 3px solid rgba(255,255,255,.35); border-bottom: 3px solid rgba(255,255,255,.2);
  pointer-events: none;
}
.oven-artful.cooking .oven-cavity::before { display: none; }
/* legacy "TAP TO CLOSE" pill: sit it above the window, pastel, not behind the dials */
.oven-artful .oven-door::before { display: none; }
.oven-artful.door-open .oven-door::after { top: auto; bottom: 100%; margin-bottom: 2px; background: #8a4a6e; font-size: 11px; }
/* THE DOUGH: a dome that rises (scaleY) and browns (--dough) inside the pan */
.cavity-placed-pan .dough {
  position: absolute; left: 14%; right: 14%; bottom: 14%; height: 62%;
  border-radius: 50% 50% 46% 46% / 70% 70% 40% 40%;
  background: radial-gradient(ellipse at 40% 25%, color-mix(in srgb, var(--dough, #ffd8a8) 70%, #fff), var(--dough, #ffd8a8) 60%, color-mix(in srgb, var(--dough, #ffd8a8) 78%, #000) 100%);
  transform-origin: 50% 100%; transform: scaleY(var(--rise, .35));
  opacity: 0; transition: opacity .3s; z-index: 1;
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.12);
}
.cavity-placed-pan .dough.baking { opacity: 1; }
.cavity-placed-pan .dough::after {           /* the crack that opens on top as it bakes */
  content: ""; position: absolute; left: 32%; right: 32%; top: 16%; height: 10%;
  border-radius: 50%; background: color-mix(in srgb, var(--dough, #ffd8a8) 70%, #fff);
  opacity: var(--crack, 0); transform: scaleY(calc(var(--crack, 0) + .01));
}
.cavity-placed-pan .counter-pan-emoji { transition: opacity .4s; }
.oven-counter-area .counter-pan.placed { opacity: 0; pointer-events: none; transition: opacity .3s; }
/* the filled pan waiting on the counter — same pastel pan as the scoop step */
.oven-counter-area .counter-pan {
  width: min(24cqw, 170px, 42cqh);
  background: linear-gradient(180deg, #ecd9f8, #cfb3e6);
  border: 4px solid #fff; border-radius: 18px;
  box-shadow: var(--shadow), inset 0 -6px 0 rgba(0,0,0,.08);
}
.oven-counter-area .counter-pan-tray {
  background: radial-gradient(circle at 35% 30%, #7a5646, #3d2619);
  border: none; box-shadow: inset 0 5px 10px rgba(0,0,0,.45);
}
.oven-counter-area .counter-pan-label { font-size: 11px; color: #7a5a86; opacity: 1; }

/* ---- THE DIP (donuts / cake pops): drag the treat into a glaze pot ---- */
.dip-stage {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  width: 100%; height: 100%; padding: 12px; flex-wrap: wrap;
}
.dip-treat-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dip-treat {
  position: relative; width: 220px; height: 220px; cursor: grab; touch-action: none;
  animation: idleBob 2s ease-in-out infinite;
  /* the treat SVG's base sits ~7% above its box bottom — drop it onto the counter */
  transform: translateY(7%);
}
.dip-treat.dunked { animation: dunkDown .7s ease-in forwards; }
@keyframes dunkDown { 60% { transform: translateY(26px) scale(.92); opacity: .6; } 100% { transform: translateY(40px) scale(.85); opacity: 0; } }
.dip-label {
  font-weight: 900; font-size: 12px; color: var(--pink-deep);
  background: #fff; border-radius: 999px; padding: 3px 10px; box-shadow: var(--shadow-sm);
  animation: pulse 1.4s ease-in-out infinite;
}
.dip-pots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 44px; /* clear the mini order ticket */ }
.dip-pot {
  position: relative; width: 88px; height: 88px; border: none; cursor: pointer;
  border-radius: 14px 14px 24px 24px; background: #fff; box-shadow: var(--shadow-sm);
  display: grid; place-items: end center; padding-bottom: 6px;
  transition: transform .12s;
}
.dip-pot .dip-goo {
  position: absolute; left: 8%; right: 8%; top: 12%; height: 54%;
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  background: var(--g); box-shadow: inset 0 -8px 0 rgba(0,0,0,.12);
}
.dip-pot b { position: relative; font-size: 18px; }
.dip-pot.armed { transform: scale(1.1); box-shadow: 0 0 0 4px var(--neon-cyan), var(--shadow-sm); }
.dip-pot.dunk .dip-goo { animation: gooSplash .6s ease-out; }
@keyframes gooSplash { 30% { transform: scaleY(.7) scaleX(1.15); } 60% { transform: scaleY(1.15) scaleX(.95); } }
.dip-pot.locked { opacity: .45; filter: grayscale(.6); }
/* food-coloring drops in the tray */
.item.ing.dye { background: var(--dye); border-color: #fff; }
.item.ing.dye.sel { outline: 3px solid var(--pink-deep); outline-offset: 1px; }
/* locked pantry items (star ladder) */
.item.locked { opacity: .5; filter: grayscale(.6); position: relative; cursor: not-allowed; }
.item.locked .lock-tag {
  position: absolute; right: -4px; bottom: -4px;
  font-size: 9px; font-weight: 900; font-style: normal;
  background: #fff; color: #7a5a86; border-radius: 999px; padding: 1px 4px;
  box-shadow: var(--shadow-sm); opacity: 1; filter: none;
}
/* stars earned on the reveal card */
.order-stars { margin: 4px 0 2px; }
.order-stars .os-row { font-size: 26px; letter-spacing: 2px; }
.order-stars .os-star.on { display: inline-block; animation: starPop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes starPop { from { transform: scale(0) rotate(-40deg); } 60% { transform: scale(1.35) rotate(8deg); } to { transform: scale(1); } }
.order-stars .os-text { font-weight: 800; font-size: 12px; color: #9a5a7a; }
.order-stars.all .os-text { color: #b03060; font-size: 14px; }
.order-hit.unlock-hit { background: #e9f3ff; border-color: #9ad0ff; color: #11406b; }
.cafe-stars { margin-top: 3px; font-weight: 800; font-size: 11px; color: #8a6a10; }
/* ---- RECIPE BOOK (the collection spine) ---- */
.rb-bar {
  height: 12px; border-radius: 999px; background: #eadcf3;
  overflow: hidden; margin: 4px 0 14px; max-width: 420px;
}
.rb-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ff5fa2, #ffd166, #b067ff);
}
.rb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px; margin-top: 6px;
}
.rb-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fff; border: 3px solid #ffe0ef; border-radius: 14px;
  padding: 8px 4px; cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.rb-card .rb-icon { font-size: 26px; line-height: 1.1; }
.rb-card .rb-name { font-weight: 800; font-size: 11px; color: var(--pink-deep); line-height: 1.15; }
.rb-card.mystery {
  background: #f6effa; border-style: dashed; border-color: #d9c6e8;
}
.rb-card.mystery .rb-icon { opacity: .55; }
.rb-card.mystery .rb-name { color: #a58ab8; }
.rb-card.mystery.show-hint .rb-name { font-size: 9.5px; font-weight: 700; }
/* discovery banner on the bake reveal card */
.recipe-new {
  margin: 6px auto; display: inline-block;
  font-weight: 900; font-size: 15px; color: #6a3a9a;
  background: linear-gradient(90deg, #f3e5ff, #ffe9f4);
  border: 2px solid #d9b8ff; border-radius: 12px; padding: 6px 14px;
  animation: pop .45s cubic-bezier(.2,1.5,.4,1), pulse 1.6s ease-in-out .5s 3;
}
/* Recipe Book pill on the hub (under the goals pill) */
.cafe-recipes-pill {
  position: absolute; top: 124px; right: 10px; z-index: 6;
  border: 2px solid #fff; cursor: pointer;
  background: linear-gradient(180deg, #ffd98a, #ffb84d);
  color: #6b4a10; font-weight: 900; font-size: clamp(12px, 1.6vw, 15px);
  padding: 6px 13px; border-radius: 999px;
  box-shadow: var(--shadow-sm), inset 0 -3px 0 rgba(0,0,0,.1);
}
.cafe-recipes-pill:active { transform: scale(.95); }

/* bonus banner on the reveal card when the order was matched */
.order-hit {
  margin: 6px auto; display: inline-block;
  font-weight: 900; font-size: 14px; color: #b03060;
  background: #ffe3f0; border: 2px solid #ffb6d5;
  border-radius: 12px; padding: 5px 12px;
  animation: pop .4s cubic-bezier(.2,1.5,.4,1);
}
.steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  padding: 6px 12px;
}
.step {
  background: white; padding: 8px; border-radius: 14px;
  font-weight: 800; text-align: center; font-size: 13px;
  box-shadow: var(--shadow-sm); opacity: .45;
}
.step.on { opacity: 1; background: var(--pink); color: white; }
.step.done { opacity: 1; background: var(--mint); }

.workspace {
  position: relative; background: white; border-radius: 22px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.05);
  display: grid; place-items: center; overflow: hidden;
  min-height: 0;
}
/* The stations are illustrated kitchens, not white boxes. A soft wash keeps
   the play objects readable over the painted counters. */
.bake .workspace  {
  /* a CALM wall: soft pink plaster with tiny polka dots up top, a pastel tile
     backsplash behind the counter — the things on the shelves are the real,
     usable ones */
  background:
    repeating-linear-gradient(90deg,  rgba(255,255,255,.75) 0 2px, transparent 2px 7.5cqh) 0 68.6% / 100% 30% no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.75) 0 2px, transparent 2px 7.5cqh) 0 68.6% / 100% 30% no-repeat,
    linear-gradient(#f7d4e6, #f2c9df) 0 68.6% / 100% 30% no-repeat,
    radial-gradient(circle, rgba(255,255,255,.75) 0 2px, transparent 2.6px) 0 0 / 34px 34px repeat,
    linear-gradient(180deg, #fff6fa 0%, #ffe9f3 48%, #f9dcea 100%) no-repeat;
}

.ramen .workspace { background: #fff url('art/backgrounds/ramen.png') center 62% / cover no-repeat; }
.bake .workspace::before { display: none; }
.ramen .workspace::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.22) 60%, rgba(255,255,255,.34));
}
/* the ramen backdrop is a cool steel kitchen — warm it into the pastel world */
.ramen .workspace::before {
  background: linear-gradient(180deg, rgba(255,205,230,.42), rgba(255,236,246,.40) 55%, rgba(255,246,250,.55));
}
/* ---- GROUNDING: everything sits ON a counter (the Strawberry Shortcake
   rule). A clean pastel counter slab runs along the bottom of every station;
   the painted wall shows above it; play objects rest on the slab. ---- */
.ramen .workspace { background-position: center 22%; }
.bake .workspace::after, .ramen .workspace::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  z-index: 0; pointer-events: none;
  /* top surface (light, receding) over a darker front face — objects' bases
     sit right at the edge between them (≈40% up the slab) */
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #fbeef7 0%, #f3dcec 58%, #d9b6cf 60%, #e2c0d6 100%);
  border-top: 5px solid #fff;
  box-shadow: 0 -8px 18px rgba(120,60,110,.10);
}
/* stages bottom-anchor so objects rest on the counter */
/* objects' bases land just below the counter's front edge (the slab is 22%
   of the workspace height, so ~10cqh up reads as "resting on the counter").
   The workspace is a size container so cqw/cqh units resolve against it. */
.workspace { container-type: size; }
.bake .workspace { align-items: end; }
.bake .workspace > .bowl-artful { margin-bottom: 9cqh; }
.bake .workspace .scoop-stage-v2, .bake .workspace .oven-stage-v2,
.bake .workspace .dip-stage, .ramen .workspace .ramen-stage {
  align-items: flex-end; height: 100%; padding-bottom: 10cqh;
}
.bake .workspace > .scoop-wrap-v2 { height: 100%; }
.bake .workspace .dip-treat-wrap { align-self: flex-end; }
.bake .workspace .dip-pots { margin-top: 0; align-self: flex-end; }
/* The vessel PNGs carry transparent padding UNDER the object (measured:
   bowl 18.9%, oven 16%/13.4% lit, pot 21%, ramen bowl 17.2%). --lift drops
   each box by exactly that much so the VISIBLE base lands on the counter edge,
   and the contact shadow is anchored to the same visible base. */
.bowl-artful, .bowl-artful-src { --lift: 18.9%; }
.oven-v2.oven-artful { --lift: 3%; }   /* cropped art: only ~3% padding under the legs */
.ramen .vessel { --lift: 21%; }
.ramen .vessel.bowl-vessel { --lift: 17.2%; }
.ramen .reveal-bowl { --lift: 0%; }   /* the cloned bowl on the score card has no counter */
.bowl-artful, .bowl-artful-src, .oven-v2.oven-artful, .ramen .vessel { transform: translateY(var(--lift)); }
.oven-artful .oven-controls { bottom: 7%; left: 4%; right: 4%; }   /* on the oven's lower front panel */
.oven-artful .oven-progress { top: 1%; }

/* soft contact shadows under the objects that sit on the counter */
.bowl-artful::after, .bowl-artful-src::after, .oven-artful::after, .dip-treat::after,
.ramen .vessel::after, .scoop-stage-v2 .active-pan::after {
  content: ""; position: absolute; left: 14%; right: 14%; height: 6%;
  bottom: calc(var(--lift, 0%) - 3%);
  border-radius: 50%; background: radial-gradient(ellipse, rgba(90,40,80,.32), transparent 70%);
  pointer-events: none; z-index: -1;
}
.scoop-stage-v2 .active-pan { position: relative; }
/* lift the play stages above the wash WITHOUT touching absolute overlays
   (serve plate, reveal card, dip pots keep their own positioning) */
.bake .workspace > .bowl-artful, .bake .workspace > .scoop-wrap-v2, .bake .workspace > .oven-stage-v2,
.bake .workspace > .cake-canvas, .bake .workspace > .dip-stage, .ramen .workspace > .ramen-stage {
  position: relative; z-index: 1;
}
/* guide hand — points at the next thing to tap (pre-reader support) */
.guide-hand {
  position: absolute; font-size: 44px; pointer-events: none; z-index: 1300;
  transform: translate(-30%, -100%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
  animation: guideTap .9s ease-in-out infinite;
}
@keyframes guideTap {
  0%, 100% { transform: translate(-30%, -100%) scale(1); }
  50%      { transform: translate(-30%, -82%) scale(.88); }
}
.guide-hand.out { opacity: 0; transition: opacity .3s; }

.bowl {
  width: min(50vw, 320px); aspect-ratio: 1.2/1;
  border-radius: 0 0 50% 50% / 0 0 80% 80%;
  background: linear-gradient(180deg, #fff 0%, #f0e0d0 100%);
  box-shadow: inset 0 12px 24px rgba(0,0,0,.1), 0 12px 0 rgba(0,0,0,.06);
  position: relative; overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.bowl.stirring { cursor: grabbing; }
.bowl .contents {
  position: absolute; left: 8%; right: 8%; bottom: 0; height: 0%;
  background: linear-gradient(180deg, #ffd8a8 0%, #ffb87a 100%);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  transition: height .3s, background .3s;
  transform-origin: 50% 100%;
}
.bowl .mix-progress {
  position: absolute; left: 10%; right: 10%; top: 8px;
  height: 10px; background: rgba(43,30,58,.18);
  border-radius: 6px; overflow: hidden; z-index: 3;
}
.bowl .mix-progress .fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #ffd166, #ff5fa2, #b067ff);
  transition: width .1s linear;
}
/* ---------- Ingredient drop FX ---------- */
.bowl .pour-source {
  position: absolute; left: 50%; top: -20%;
  transform: translate(-50%, 0) rotate(0);
  font-size: 56px; pointer-events: none; z-index: 4;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
}
.bowl .milk-carton  { animation: tiltLeft .85s ease-in-out forwards; }
.bowl .powder-bag   { animation: tiltRight .7s ease-in-out forwards; }
@keyframes tiltLeft {
  0%   { transform: translate(-50%, 30%) rotate(0); opacity: 0; }
  20%  { transform: translate(-50%, 0)   rotate(0); opacity: 1; }
  60%  { transform: translate(-80%, 0)   rotate(-65deg); opacity: 1; }
  100% { transform: translate(-50%, -30%) rotate(0); opacity: 0; }
}
@keyframes tiltRight {
  0%   { transform: translate(-50%, 30%) rotate(0); opacity: 0; }
  25%  { transform: translate(-50%, 0)   rotate(0); opacity: 1; }
  65%  { transform: translate(-20%, 0)   rotate(55deg); opacity: 1; }
  100% { transform: translate(-50%, -25%) rotate(0); opacity: 0; }
}
.bowl .milk-stream {
  position: absolute; left: 50%; top: -10%;
  transform: translateX(-50%);
  width: 10px; height: 0;
  background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);
  border-radius: 8px;
  z-index: 3;
  animation: streamGrow .8s ease-out forwards;
}
@keyframes streamGrow {
  0%  { height: 0; opacity: 0; }
  30% { height: 70%; opacity: 1; }
  90% { height: 70%; opacity: 1; }
  100%{ height: 70%; opacity: 0; }
}
.bowl .puff {
  position: absolute; left: 50%; top: 15%;
  transform: translate(-50%, -50%) scale(0);
  width: 70%; height: 70%; border-radius: 50%;
  opacity: 0; z-index: 3;
  filter: blur(8px);
  animation: puff .7s ease-out forwards;
}
@keyframes puff {
  0%   { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  40%  { transform: translate(-50%, -50%) scale(1.1); opacity: .7; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}
.bowl .zap-bolt {
  position: absolute; left: 50%; top: 10%;
  transform: translate(-50%, -50%);
  font-size: 80px; pointer-events: none; z-index: 4;
  filter: drop-shadow(0 0 12px #fff066);
  animation: zapStrike .55s ease-out forwards;
}
@keyframes zapStrike {
  0%   { transform: translate(-50%, -120%) scale(.5) rotate(-20deg); opacity: 0; }
  35%  { transform: translate(-50%, -20%)  scale(1.3) rotate(0); opacity: 1; }
  80%  { transform: translate(-50%, 20%)   scale(1.1) rotate(10deg); opacity: 1; }
  100% { transform: translate(-50%, 40%)   scale(.8) rotate(0); opacity: 0; }
}
.bowl .zap-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.9), transparent 50%);
  opacity: 0; pointer-events: none; z-index: 3;
  animation: flash .5s ease-out forwards;
}
@keyframes flash {
  0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; }
}
.bowl .ice-cube {
  position: absolute; left: 50%; top: -10%;
  transform: translate(-50%, 0);
  font-size: 48px; pointer-events: none; z-index: 4;
  filter: drop-shadow(0 4px 8px rgba(120,180,255,.7));
  animation: iceFall .4s cubic-bezier(.5,0,.7,1) forwards;
}
@keyframes iceFall {
  from { top: -30%; transform: translate(-50%, 0) rotate(0); }
  to   { top: 50%;  transform: translate(-50%, 0) rotate(45deg); }
}
.bowl .ice-cube.shatter { animation: iceBurst .5s ease-out forwards; }
@keyframes iceBurst {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 0) scale(1.8); }
}
.bowl .ice-shard {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px; pointer-events: none; z-index: 4;
  animation: shardFly .7s ease-out forwards;
}
@keyframes shardFly {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(360deg); opacity: 0; }
}

/* ---------- Egg crack (2 taps) ---------- */
.bowl.rim-flash {
  box-shadow: inset 0 12px 24px rgba(0,0,0,.1), 0 0 0 4px var(--neon-pink), 0 12px 0 rgba(0,0,0,.06);
  transition: box-shadow .15s;
}
.bowl .crack-egg {
  position: absolute;
  transform: translate(-50%, 0);
  border: none; background: transparent;
  font-size: 56px; padding: 4px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
  z-index: 4;
  animation: eggWobble 0.6s ease-in-out infinite alternate;
  cursor: pointer;
}
.bowl .crack-egg.knock {
  animation: eggKnock .25s ease-out;
}
@keyframes eggKnock {
  0%   { transform: translate(-50%, 0) rotate(0); }
  35%  { transform: translate(-50%, 8px) rotate(-8deg); }
  70%  { transform: translate(-50%, -4px) rotate(6deg); }
  100% { transform: translate(-50%, 0) rotate(0); }
}
.bowl .crack-egg.cracked-once {
  /* slightly tilted, shows a visible crack with a ::after line */
  transform: translate(-50%, 0) rotate(-12deg);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)) brightness(0.95);
  position: relative;
}
.bowl .crack-egg.cracked-once::after {
  content: ""; position: absolute;
  left: 38%; top: 30%;
  width: 28%; height: 40%;
  background:
    linear-gradient(135deg, transparent 45%, #2b1e3a 45%, #2b1e3a 50%, transparent 50%),
    linear-gradient(45deg, transparent 45%, #2b1e3a 45%, #2b1e3a 50%, transparent 50%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px;
  background-repeat: no-repeat;
  opacity: .7;
  pointer-events: none;
}
@keyframes eggWobble {
  from { transform: translate(-50%, 0) rotate(-6deg); }
  to   { transform: translate(-50%, -3px) rotate(6deg); }
}
.bowl .crack-egg.cracking {
  animation: eggCrack 0.7s ease-out forwards;
}
@keyframes eggCrack {
  0%   { transform: translate(-50%, 0) scale(1); opacity: 1; }
  30%  { transform: translate(-50%, -12px) scale(1.15) rotate(0); opacity: 1; }
  100% { transform: translate(-50%, -8px) scale(1.4) rotate(0); opacity: 0; }
}
.bowl .yolk {
  position: absolute;
  transform: translate(-50%, 0);
  font-size: 36px;
  z-index: 3;
  animation: yolkFall 0.9s cubic-bezier(.5,0,.7,1) forwards;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
@keyframes yolkFall {
  from { top: 15%; opacity: 1; transform: translate(-50%, 0) scale(.7); }
  60%  { top: 65%; opacity: 1; transform: translate(-50%, 0) scale(1.2); }
  to   { top: 75%; opacity: 0; transform: translate(-50%, 0) scale(.4); }
}
.bowl .crack-hint {
  position: absolute;
  transform: translateX(-50%);
  font-size: 12px; font-weight: 900;
  color: var(--neon-pink);
  background: white; padding: 3px 8px; border-radius: 10px;
  box-shadow: var(--shadow-sm);
  z-index: 5;
  animation: pulse 0.8s ease-in-out infinite;
  white-space: nowrap;
}

.bowl .whisk {
  position: absolute;
  font-size: 56px;
  transform: translate(-50%, -50%) rotate(0);
  pointer-events: none;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.35));
  z-index: 2;
  animation: whiskSpin .25s linear infinite;
}
@keyframes whiskSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.bowl .splash {
  position: absolute; font-size: 40px; transform: translate(-50%, -50%);
  pointer-events: none; animation: splash .6s ease-out forwards;
}
@keyframes splash {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(1.4); opacity: 0; }
}

/* ---------- SCOOP STEP V2 (pan picker + scoop tools + draggable batter) ---------- */
.scoop-wrap-v2 { width: 100%; height: 100%; display: grid; place-items: center; padding: 8px; }

.pan-picker { width: 100%; max-width: 760px; padding: 8px; }
.pan-picker h3 { margin: 0 0 12px; text-align: center; color: var(--ink); font-size: 18px; }
.pan-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.pan-card {
  background: white; border: 3px solid transparent; border-radius: 18px;
  padding: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s;
}
.pan-card:active { transform: scale(.96); }
.pan-card:hover { border-color: var(--neon-pink); box-shadow: 0 0 12px rgba(255,0,110,.4); }
.pan-preview { width: 100%; aspect-ratio: 1; }
.pan-preview svg { width: 100%; height: 100%; }
.pan-name  { font-size: 14px; font-weight: 900; }
.pan-count { font-size: 11px; opacity: .65; }

.scoop-stage-v2 {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  width: 100%; height: 100%; padding: 8px;
}
.scoop-bowl-area { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.scoop-source-bowl {
  width: min(28vw, 180px); aspect-ratio: 1.2/1;
  border-radius: 0 0 50% 50% / 0 0 80% 80%;
  background: linear-gradient(180deg, #fff 0%, #f0e0d0 100%);
  box-shadow: inset 0 12px 24px rgba(0,0,0,.1), 0 12px 0 rgba(0,0,0,.06);
  position: relative; overflow: hidden;
  touch-action: none; cursor: grab;
  transition: transform .1s;
}
.scoop-source-bowl:active { transform: scale(.96); cursor: grabbing; }
.bowl-batter {
  position: absolute; left: 8%; right: 8%; bottom: 0; height: 65%;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}
.scoop-label { font-size: 12px; font-weight: 800; opacity: .65; text-transform: uppercase; letter-spacing: 1px; }

.active-pan {
  flex: 1; max-width: 460px; aspect-ratio: 1.4/1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.pan-bg {
  position: relative; width: 100%; height: 100%;
  background: linear-gradient(180deg, #888 0%, #555 100%);
  border-radius: 14px;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.4), 0 10px 0 rgba(0,0,0,.1);
}
.mold-cell {
  position: absolute; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 30% 30%, #3a2010, #1a0a04);
  box-shadow: inset 0 6px 10px rgba(0,0,0,.55);
  overflow: hidden;
  transition: outline-color .15s;
  outline: 3px solid transparent;
}
.mold-cell.hover {
  outline: 3px dashed var(--neon-pink);
  outline-offset: 2px;
}
.mold-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0%;
  transition: height .2s ease-out;
}
.pan-switch {
  border: none; padding: 6px 14px; border-radius: 14px;
  background: white; color: var(--ink);
  font-weight: 800; font-size: 13px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.scoop-pick { font-size: 36px; background: white !important; }
.scoop-pick.sel {
  background: var(--neon-pink) !important;
  outline: 3px solid var(--neon-purple);
  outline-offset: -3px;
  transform: scale(1.1);
}

.batter-ghost {
  position: fixed; pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 8px rgba(0,0,0,.4);
  display: grid; place-items: center;
  font-size: 28px;
  z-index: 1000;
  border: 2px solid rgba(0,0,0,.3);
}

/* ---------- SCOOP STEP (legacy v1 — kept for any stragglers) ---------- */
.scoop-wrap {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: 100%; height: 100%; padding: 14px;
}
.scoop-bowl { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scoop-bowl .scoop-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase; opacity: .6;
}
.bowl.mini {
  width: min(28vw, 180px); aspect-ratio: 1.2/1;
  cursor: default;
}
.scoop-wrap .arrow {
  font-size: 42px; font-weight: 900;
  color: var(--neon-purple);
  text-shadow: 0 0 10px rgba(157,78,221,.6);
  animation: arrowSlide 1s ease-in-out infinite alternate;
}
@keyframes arrowSlide {
  from { transform: translateX(-6px); }
  to   { transform: translateX(6px); }
}
.mold-tray {
  display: flex; gap: 12px; padding: 14px;
  background: linear-gradient(180deg, #888 0%, #555 100%);
  border-radius: 16px;
  box-shadow: var(--shadow), inset 0 -4px 0 rgba(0,0,0,.3);
}
.mold {
  width: 64px; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #444, #222);
  box-shadow: inset 0 4px 8px rgba(0,0,0,.5);
  display: grid; place-items: center;
  position: relative;
  transition: transform .2s;
}
.mold.full {
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.3), 0 0 12px rgba(255,200,150,.5);
  transform: scale(1.05);
}
.mold.drop-target.armed {
  outline: 3px dashed var(--neon-pink);
  outline-offset: 2px;
}
.mold-splat {
  position: absolute; inset: 10%;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  animation: splat .5s ease-out forwards;
}
@keyframes splat {
  0%   { transform: scale(.3); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ---------- OVEN STAGE v2 (door + cavity + counter pan) ---------- */
.oven-stage-v2 {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  width: 100%; height: 100%; padding: 8px;
}
.oven-counter-area {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
.counter-pan {
  position: relative;
  width: min(28vw, 180px); aspect-ratio: 1/1;
  background: linear-gradient(180deg, #d8b878 0%, #9a7848 100%);
  border-radius: 12px;
  box-shadow: var(--shadow), inset 0 4px 0 rgba(255,255,255,.2), inset 0 -6px 0 rgba(0,0,0,.3);
  display: grid; place-items: center;
  cursor: grab; touch-action: none;
  transition: transform .15s, opacity .3s;
}
.counter-pan:active { transform: scale(.96); cursor: grabbing; }
.counter-pan.placed { opacity: .25; pointer-events: none; }
.counter-pan-tray {
  width: 70%; aspect-ratio: 1.3/1;
  border-radius: 50% / 60%;
  background: radial-gradient(ellipse, #555 0%, #222 100%);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  border: 3px solid #5a3a14;
}
.counter-pan-batter {
  position: absolute; left: 10%; right: 10%; top: 20%; bottom: 10%;
  border-radius: 50%;
  opacity: .9;
}
.counter-pan-emoji {
  position: relative; font-size: 30px; z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.4));
}
.counter-pan-label {
  font-size: 12px; font-weight: 800; opacity: .65;
  text-transform: uppercase; letter-spacing: 1px;
}
.pan-flash-msg {
  position: absolute; top: -36px; left: 50%; transform: translateX(-50%);
  background: var(--neon-pink); color: white;
  font-weight: 900; font-size: 12px;
  padding: 5px 10px; border-radius: 12px;
  box-shadow: var(--shadow-sm);
  animation: flashPan 1.5s ease;
  white-space: nowrap;
}
@keyframes flashPan {
  0%, 80% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100%    { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

/* ---------- Window frame (holds cavity + door) ---------- */
.oven-window-frame {
  position: relative; aspect-ratio: 1.4/1;
  border-radius: 14px;
  overflow: hidden;
  border: 4px solid #4a2d6b;
  background: #0a0418;
}
.oven-cavity {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,200,80,.15) 0%, transparent 35%),
    radial-gradient(circle at 50% 60%, #2a1840 0%, #0a0418 100%);
  display: grid; place-items: center;
  z-index: 1;
}
.cavity-back {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 100%);
}
.cavity-rack {
  position: absolute; left: 8%; right: 8%; top: 60%;
  height: 4px;
  background: linear-gradient(90deg, #555, #888, #555);
  border-radius: 2px;
  box-shadow: 0 -1px 0 rgba(255,255,255,.2);
}
.cavity-pan-slot {
  position: absolute; left: 20%; right: 20%; top: 45%; bottom: 12%;
  border: 2px dashed rgba(255,200,80,.4);
  border-radius: 10px;
  display: grid; place-items: center;
  z-index: 2;
}
.cavity-slot-hint {
  font-size: 11px; color: rgba(255,200,80,.7);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 800;
}
.cavity-pan-slot.armed { border-color: var(--neon-pink); background: rgba(255,0,110,.15); }
.cavity-placed-pan {
  width: 90%; height: 90%;
  display: grid; place-items: center;
}
.cavity-placed-pan .counter-pan-tray {
  width: 100%; aspect-ratio: 1.3/1;
  border-color: #1a0a04;
}
.oven-window-frame .oven-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,180,80,.7), transparent 70%);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  filter: blur(6px);
  pointer-events: none;
  z-index: 3;
}
.oven-v2.cooking .oven-window-frame .oven-glow {
  opacity: 1;
  animation: bakeGlow 0.9s ease-in-out infinite alternate;
}

/* ---------- Door (covers cavity, swings down to open) ---------- */
.oven-door {
  position: absolute; inset: 0;
  border: none;
  background:
    linear-gradient(180deg, #3a2553 0%, #1f1335 100%);
  border-radius: 14px;
  cursor: pointer;
  z-index: 4;
  transition: transform .5s cubic-bezier(.5,1,.5,1), opacity .5s;
  transform-origin: 50% 100%;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.1), inset 0 -8px 0 rgba(0,0,0,.4);
  padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
}
.oven-door::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(255,0,110,.2) 100%);
  border-radius: 14px;
  pointer-events: none;
}
.door-glass {
  width: 70%; height: 60%;
  background: rgba(0,0,0,.5);
  border: 3px solid #5fc8ff;
  border-radius: 10px;
  position: relative;
  box-shadow: inset 0 0 16px rgba(0,245,255,.3);
}
.door-bars {
  position: absolute; inset: 6px; pointer-events: none;
  display: flex; justify-content: space-around; align-items: center;
}
.door-bars .bar {
  width: 3px; height: 80%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent);
}
.door-handle {
  width: 60%; height: 8px;
  background: linear-gradient(180deg, #cccccc, #888);
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0,0,0,.4);
}
/* Open state: door slides down (NOT rotates) so it stays a big tappable target */
.oven-v2.door-open .oven-door {
  transform: translateY(72%);
  opacity: .92;
  box-shadow: 0 -4px 12px rgba(0,0,0,.3), inset 0 4px 0 rgba(255,255,255,.15);
}
.oven-v2.door-open .oven-door::after {
  content: "TAP TO CLOSE 🚪";
  position: absolute; left: 50%; top: 8px;
  transform: translateX(-50%);
  background: var(--neon-pink); color: white;
  font-weight: 900; font-size: 13px;
  padding: 4px 12px; border-radius: 12px;
  white-space: nowrap;
  animation: pulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
.oven-v2.door-open .door-handle { height: 12px; }
/* When baking, hide cavity contents behind glowing door */
.oven-v2.cooking .door-glass {
  background: radial-gradient(ellipse, rgba(255,180,80,.85), rgba(255,80,80,.6));
  animation: bakeGlow 0.9s ease-in-out infinite alternate;
}

/* ---------- OVEN v2 (futuristic K-pop oven with dials) ---------- */
.oven-v2 {
  width: min(54vw, 380px);
  perspective: 800px;
  background:
    linear-gradient(180deg, #2b1e3a 0%, #1a0f2a 100%);
  border-radius: 22px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  box-shadow:
    0 0 0 3px var(--neon-purple),
    0 0 24px rgba(157,78,221,.55),
    inset 0 -6px 0 rgba(0,0,0,.4);
}
.oven-top {
  display: flex; gap: 6px; justify-content: center;
}
.oven-vent {
  width: 36px; height: 6px; border-radius: 3px;
  background: linear-gradient(180deg, #ff006e, #9d4edd);
  box-shadow: 0 0 8px rgba(255,0,110,.7);
}
.oven-window {
  position: relative; aspect-ratio: 1.4/1;
  background: radial-gradient(circle at center, #2a1840 0%, #0a0418 100%);
  border-radius: 14px;
  border: 4px solid #4a2d6b;
  overflow: hidden;
  display: grid; place-items: center;
}
.oven-window .oven-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,180,80,.7), transparent 70%);
  opacity: .45;
  transition: background .3s, opacity .3s;
  filter: blur(6px);
}
.oven-window .oven-bars {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; justify-content: space-around; align-items: center;
  padding: 0 18px;
}
.oven-window .oven-bars .bar {
  width: 4px; height: 70%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent);
  border-radius: 3px;
}
.oven-window .oven-content {
  position: relative; z-index: 2;
  font-size: 90px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
}
.oven-v2.cooking .oven-glow {
  animation: bakeGlow 0.9s ease-in-out infinite alternate;
  opacity: 1 !important;
}
@keyframes bakeGlow {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}
.oven-v2.cooking .oven-window { animation: shake 0.4s linear infinite; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.oven-controls {
  display: flex; gap: 12px; justify-content: center;
}
.dial {
  flex: 1;
  background: linear-gradient(180deg, #3a2553, #1f1335);
  border: 2px solid var(--neon-purple);
  border-radius: 14px;
  padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff;
  font-weight: 800; font-size: 11px; letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(157,78,221,.4);
}
.dial:active { transform: translateY(2px); }
.dial-label { color: var(--neon-cyan); font-size: 10px; }
.dial-knob {
  width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6e3aa8, #2b1e3a);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.5), 0 0 10px rgba(255,0,110,.5);
  position: relative;
  border: 2px solid #5fc8ff;
}
.dial-pointer {
  position: absolute; left: 50%; top: 8%;
  width: 4px; height: 40%;
  background: var(--neon-cyan);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--neon-cyan);
  transform-origin: 50% 100%;
  transition: transform .25s cubic-bezier(.3,1.4,.5,1);
}
.dial-value {
  background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 8px;
  font-size: 10px; color: #fff;
}
.oven-progress {
  height: 10px; background: rgba(0,0,0,.4);
  border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(157,78,221,.5);
}
.oven-progress .fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #00f5ff, #ff006e, #ffd166);
  transition: width .1s linear;
  box-shadow: 0 0 8px rgba(255,0,110,.6);
}

.cake-canvas {
  /* never taller than the workspace it lives in (short screens shrank the
     workspace under the decorate tray and the canvas overflowed off the top) */
  width: min(85vw, 560px, 98cqh); aspect-ratio: 1; border-radius: 28px;
  background:
    linear-gradient(180deg, #fff7fa 0%, #f3e1ec 100%);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.06), 0 10px 0 rgba(0,0,0,.06);
  position: relative; overflow: hidden;
}
.cake-canvas .baked {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 200px; filter: drop-shadow(0 6px 4px rgba(0,0,0,.2));
}
.cake-canvas { position: relative; }
.cake-canvas .baked    { z-index: 1; }
.cake-canvas .frost-clip {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
}
.cake-canvas .frost-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.cake-canvas .topping { z-index: 8; }
.cake-canvas.paint-ready { cursor: crosshair; touch-action: none; }
.frost-pick.sel { outline: 3px solid #2b1e3a; outline-offset: -3px; transform: scale(1.08); }
.dec-label {
  font-size: 10px; font-weight: 900; opacity: .6;
  align-self: center; padding: 0 6px;
  letter-spacing: 1px; flex: 0 0 auto;
}
.dec-spacer { width: 14px; flex: 0 0 auto; }
.dec-tool { background: #fff !important; }
.brush-size {
  background: #fff !important;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.brush-size[data-size="0.5"] { font-size: 36px; }
.brush-size[data-size="1.0"] { font-size: 24px; }
.brush-size[data-size="1.8"] { font-size: 20px; }
.brush-size[data-size="2.8"] { font-size: 22px; }
.brush-size.sel {
  background: var(--neon-pink) !important;
  color: white;
  outline: 3px solid var(--neon-purple);
  outline-offset: -3px;
  transform: scale(1.08);
}
.top-size {
  background: #fff !important;
  color: var(--ink);
  font-weight: 900;
  line-height: 1;
}
.top-size[data-tsize="0.6"] { font-size: 30px; }
.top-size[data-tsize="1.0"] { font-size: 22px; }
.top-size[data-tsize="1.5"] { font-size: 20px; }
.top-size[data-tsize="2.2"] { font-size: 22px; }
.top-size.sel {
  background: var(--yolk) !important;
  outline: 3px solid var(--neon-purple);
  outline-offset: -3px;
  transform: scale(1.08);
}
.cake-canvas .topping {
  position: absolute; font-size: 38px; transform: translate(-50%, -50%);
  pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

/* ---- tabbed decorate tray ---- */
.dec-tools-inline { display: flex; gap: 6px; margin-left: 6px; }
.dec-tools-inline .dec-tool {
  width: 40px; height: 40px; font-size: 22px; align-self: center;
}
.dec-panel { min-height: 76px; align-items: center; }
.shape-pick, .sprinkle-pick {
  background: #fff !important; font-size: 34px;
}
.shape-pick.sel, .sprinkle-pick.sel {
  background: var(--neon-pink) !important;
  outline: 3px solid var(--neon-purple); outline-offset: -3px;
  transform: scale(1.08);
}
.shape-size {
  background: #fff !important; color: var(--ink); font-weight: 900; line-height: 1;
}
.shape-size[data-ssize="0.7"] { font-size: 28px; }
.shape-size[data-ssize="1.0"] { font-size: 22px; }
.shape-size[data-ssize="1.5"] { font-size: 20px; }
.shape-size.sel {
  background: var(--yolk) !important;
  outline: 3px solid var(--neon-purple); outline-offset: -3px; transform: scale(1.08);
}
.sprinkle-layer { pointer-events: none; }

/* ---- brush-size popover (pops up when a frosting color is picked) ---- */
.size-pop {
  position: fixed; left: 50%; transform: translateX(-50%);
  z-index: 60; background: rgba(255,255,255,.97);
  border-radius: 18px; padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22), var(--neon-glow);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  animation: sizePopIn .18s ease-out;
}
.size-pop-title { font-size: 11px; font-weight: 900; letter-spacing: 1px; opacity: .65; }
.size-pop-row { display: flex; gap: 8px; }
.size-pop-btn {
  width: 52px; height: 52px; border: none; border-radius: 14px;
  background: var(--cream); box-shadow: var(--shadow-sm);
  display: grid; place-items: center; color: var(--ink); line-height: 1;
}
.size-pop-btn[data-m="0.6"] { font-size: 34px; }
.size-pop-btn[data-m="1.0"] { font-size: 24px; }
.size-pop-btn[data-m="1.4"] { font-size: 20px; }
.size-pop-btn[data-m="1.8"] { font-size: 22px; }
.size-pop-btn.sel {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  color: #fff; outline: 3px solid #fff; outline-offset: -4px; transform: scale(1.06);
}
@keyframes sizePopIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.tray {
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  padding: 10px; display: flex; gap: 10px; overflow-x: auto;
  border-radius: 18px;
}
.tray.tabbed {
  flex-direction: column; overflow-x: visible;
  gap: 8px;
}
.ing-tabs { display: flex; gap: 6px; min-width: 0; }
.ing-tab {
  flex: 1; border: none; padding: 8px 6px; font-weight: 800; font-size: 13px;
  border-radius: 14px; background: var(--cream);
  box-shadow: var(--shadow-sm);
}
.ing-tab.on {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  color: white; box-shadow: var(--shadow-sm), var(--neon-glow);
}
.ing-row {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px; min-width: 0;
}
.tray .item {
  flex: 0 0 auto; width: 72px; height: 72px;
  border-radius: 18px; border: none; background: white;
  font-size: 38px; box-shadow: var(--shadow);
  display: grid; place-items: center;
  touch-action: none;
}
.tray .item.sel { background: var(--pink); outline: 3px solid var(--pink-deep); }
.tray .item.locked { opacity: .35; }
.tray .item.locked::after {
  content: "🔒"; font-size: 22px; position: absolute;
}

.actions {
  display: flex; gap: 14px; padding: 10px 16px 14px;
  align-items: center;
}
.hint {
  font-size: 16px; font-weight: 800; color: var(--ink);
  opacity: .85; flex: 1;
}
/* Big primary "next stage" button — kid-friendly thumb target */
.actions .btn {
  font-size: 24px;
  padding: 20px 36px;
  min-height: 64px;
  border-radius: 22px;
  font-weight: 900;
  letter-spacing: 0.5px;
  flex: 0 0 auto;
}
.actions .btn:not([disabled]) {
  animation: actBtnPulse 1.4s ease-in-out infinite;
}
.actions .btn[disabled] { animation: none; }
@keyframes actBtnPulse {
  0%, 100% { transform: scale(1); box-shadow: var(--shadow); }
  50%      { transform: scale(1.04); box-shadow: var(--shadow), 0 0 18px rgba(255,143,177,.6); }
}

/* drag ghost (the thing that follows the finger) */
.drag-ghost {
  position: fixed; pointer-events: none;
  font-size: 56px; z-index: 1000;
  transform: translate(-50%, -50%) scale(1.15);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.3));
}
.drag-ghost.egg-ghost { font-size: 64px; }
.drag-ghost.egg-ghost.knock {
  animation: ghostKnock .22s ease-out;
}
@keyframes ghostKnock {
  0%   { transform: translate(-50%, -50%) scale(1.15); }
  50%  { transform: translate(-50%, -50%) scale(1.35) rotate(-15deg); }
  100% { transform: translate(-50%, -50%) scale(1.15) rotate(0); }
}
.drag-ghost.egg-ghost.cracked-once {
  /* tilted with a small visible crack mark */
  transform: translate(-50%, -50%) scale(1.15) rotate(-10deg);
  position: fixed;
}
.drag-ghost.egg-ghost.cracked-once::after {
  content: ""; position: absolute;
  left: 38%; top: 30%;
  width: 30%; height: 40%;
  background:
    linear-gradient(135deg, transparent 45%, #2b1e3a 45%, #2b1e3a 50%, transparent 50%) 0 0/8px 8px no-repeat,
    linear-gradient(45deg,  transparent 45%, #2b1e3a 45%, #2b1e3a 50%, transparent 50%) 0 5px/8px 8px no-repeat;
  opacity: .75;
  pointer-events: none;
}
.drag-ghost.egg-ghost.cracking {
  animation: ghostCrack .5s ease-out forwards;
}
@keyframes ghostCrack {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}
.drag-ghost.milk-ghost { font-size: 64px; transition: transform .15s; }
.drag-ghost.milk-ghost.pouring {
  transform: translate(-50%, -50%) scale(1.15) rotate(var(--tilt, -55deg));   /* tips further as you tilt the tablet */
}
.drag-ghost.shaker-ghost { font-size: 64px; }
.drag-ghost.shaker-ghost.shake {
  animation: ghostShake .18s ease-in-out;
}
@keyframes ghostShake {
  0%,100% { transform: translate(-50%, -50%) scale(1.15) rotate(0); }
  25%     { transform: translate(-50%, -50%) scale(1.2) rotate(-18deg); }
  75%     { transform: translate(-50%, -50%) scale(1.2) rotate(18deg); }
}
/* Floating hint shown near the finger during a gesture */
.drag-hint {
  position: fixed;
  transform: translate(-50%, -50%);
  background: var(--ink); color: white;
  font-weight: 900; font-size: 13px;
  padding: 5px 10px; border-radius: 12px;
  pointer-events: none; z-index: 1001;
  box-shadow: var(--shadow-sm);
  animation: pulse 1s ease-in-out infinite;
  white-space: nowrap;
}
/* pour counter that floats above the bowl during milk pour */
.bowl .pour-counter {
  position: absolute; left: 50%; top: -36px;
  transform: translateX(-50%);
  background: white; color: var(--ink);
  font-weight: 900; font-size: 14px;
  padding: 4px 10px; border-radius: 12px;
  box-shadow: var(--shadow-sm);
  z-index: 6; white-space: nowrap;
}
.bowl .crystal-puff {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 20px; color: white;
  filter: drop-shadow(0 0 4px white);
  pointer-events: none; z-index: 5;
  animation: crystalDrop .5s ease-out forwards;
}
@keyframes crystalDrop {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.5); }
  100% { opacity: 0; transform: translate(-50%, 100%) scale(1); }
}
.drop-target.armed { outline: 4px dashed var(--pink-deep); outline-offset: -4px; }

/* ---------- BAKE: reveal card + buyer ---------- */
.reveal {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
  display: grid; place-items: center; padding: 18px;
  opacity: 0; pointer-events: none; transition: opacity .3s;
  z-index: 5;
}
.reveal.show { opacity: 1; pointer-events: auto; }
.reveal .card {
  background: white; border-radius: 24px; padding: 18px 18px 14px;
  text-align: center; max-width: 380px; width: 100%;
  max-height: 100%; overflow-y: auto;   /* short screens: scroll the card, never clip the buttons */
  box-shadow: var(--shadow);
  animation: pop .35s cubic-bezier(.2,1.4,.5,1);
}
@keyframes pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.reveal .card.celebrate { animation: pop .35s cubic-bezier(.2,1.4,.5,1), cardWiggle .5s ease-in-out 2; }
@keyframes cardWiggle {
  0%,100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-1.5deg) scale(1.02); }
  75% { transform: rotate(1.5deg) scale(1.02); }
}
/* "saved to sticker book" note on the ramen reveal card */
.reveal .rv-saved {
  margin-top: 8px; font-weight: 800; font-size: 13px; color: var(--pink-deep, #d6377f);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.reveal .rv-saved.show { opacity: 1; transform: translateY(0); }
.reveal .badge {
  display: inline-block; padding: 4px 12px; border-radius: 12px;
  font-weight: 900; font-size: 14px; letter-spacing: 1px;
  margin-bottom: 6px;
}
.reveal .badge.legendary { background: conic-gradient(from 0deg, #ff5fa2, #ffd166, #b8f0d6, #5fc8ff, #b067ff, #ff5fa2); color: white; }
.reveal .badge.beautiful { background: #ffd5e3; color: #b03060; }
.reveal .badge.cool      { background: #c7e0ff; color: #2a4f8a; }
.reveal .badge.silly     { background: #ffe5a8; color: #8a6020; }
.reveal .badge.crazy     { background: #ffc6dc; color: #99004d; }
.reveal .badge.plain     { background: #eee; color: #555; }

.reveal h2 { margin: 6px 0; font-size: 22px; }
.reveal .blurb { font-size: 14px; opacity: .8; margin-bottom: 10px; }
.reveal .preview {
  position: relative; width: 160px; height: 160px;
  margin: 4px auto 8px;
  display: grid; place-items: center;
}
.reveal .preview .aura {
  position: absolute; inset: -20px; border-radius: 50%;
  opacity: .6; filter: blur(8px);
  animation: spin 6s linear infinite;
}
.reveal .preview .main {
  position: relative; font-size: 110px; line-height: 1;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.25));
}
.reveal .preview .orbit {
  position: absolute; font-size: 28px;
  animation: orbit 4s linear infinite;
}
@keyframes orbit {
  from { transform: rotate(0deg) translateX(70px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
}
.reveal .score-row {
  display: flex; justify-content: center; gap: 6px;
  margin: 8px 0 12px; font-weight: 900;
}
.reveal .scorebar {
  height: 10px; background: #eee; border-radius: 6px; overflow: hidden;
  margin: 0 0 12px;
}
.reveal .scorebar .fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #ff5fa2, #ffd166, #6dc99a);
  transition: width .8s cubic-bezier(.3,1.4,.5,1);
}
.reveal .buyer {
  display: flex; align-items: center; gap: 12px;
  background: var(--cream); border-radius: 18px; padding: 10px;
  margin: 6px 0; opacity: 0; transform: translateX(-50px);
  transition: opacity .4s, transform .4s;
}
.reveal .buyer.in { opacity: 1; transform: translateX(0); }
.reveal .buyer .face { font-size: 54px; }
.reveal .buyer .speech {
  flex: 1; text-align: left;
  background: white; padding: 8px 12px; border-radius: 14px;
  font-weight: 700; position: relative;
  box-shadow: var(--shadow-sm);
}
.reveal .buyer .speech::before {
  content: ""; position: absolute; left: -8px; top: 50%;
  border: 8px solid transparent; border-right-color: white;
  transform: translateY(-50%);
}
.reveal .buyer .price {
  font-weight: 900; color: #d8a700; font-size: 20px;
}
.reveal .reveal-actions { display: flex; gap: 8px; }
.reveal .reveal-actions .btn { flex: 1; }

/* ---------- Treat overlays (special ingredients) ---------- */
.overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
}
.overlay-charged::before, .overlay-charged::after {
  content: "⚡"; position: absolute; font-size: 28px;
  animation: zap 0.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px #fff066);
}
.overlay-charged::before { top: 5%; left: 15%; }
.overlay-charged::after  { bottom: 10%; right: 12%; animation-delay: 0.25s; }
@keyframes zap { from { opacity: .4; transform: scale(.9); } to { opacity: 1; transform: scale(1.2); } }

.overlay-frozen { background: radial-gradient(circle, rgba(170,220,255,.35), transparent 65%); }
.overlay-frozen::before {
  content: "🧊"; position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
  font-size: 32px;
  animation: floatY 2s ease-in-out infinite alternate;
}
@keyframes floatY { to { transform: translate(-50%, -8px); } }

.overlay-spicy::before, .overlay-spicy::after {
  content: "🔥"; position: absolute; font-size: 26px; bottom: 10%;
  animation: flicker 0.6s ease-in-out infinite alternate;
}
.overlay-spicy::before { left: 30%; }
.overlay-spicy::after  { right: 30%; animation-delay: 0.3s; }
@keyframes flicker { from { transform: translateY(0) scale(1); } to { transform: translateY(-6px) scale(1.15); } }

.overlay-boba::before, .overlay-boba::after,
.overlay-boba {
  /* small black dots scattered like tapioca pearls */
}
.overlay-boba {
  background:
    radial-gradient(circle 8px at 30% 60%, #2b1e3a 98%, transparent),
    radial-gradient(circle 8px at 50% 70%, #2b1e3a 98%, transparent),
    radial-gradient(circle 8px at 70% 65%, #2b1e3a 98%, transparent),
    radial-gradient(circle 6px at 40% 80%, #2b1e3a 98%, transparent),
    radial-gradient(circle 6px at 60% 80%, #2b1e3a 98%, transparent);
}

.overlay-coconut {
  background:
    radial-gradient(circle 3px at 25% 40%, white 98%, transparent),
    radial-gradient(circle 3px at 55% 30%, white 98%, transparent),
    radial-gradient(circle 3px at 75% 55%, white 98%, transparent),
    radial-gradient(circle 3px at 35% 65%, white 98%, transparent),
    radial-gradient(circle 3px at 65% 75%, white 98%, transparent);
  mix-blend-mode: screen;
}

.overlay-honey::after {
  content: ""; position: absolute; top: 8%; left: 20%; right: 20%;
  height: 30%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,184,77,.7), transparent 70%);
  filter: blur(4px);
}

.overlay-corn::before, .overlay-corn::after {
  content: "🌽"; position: absolute; font-size: 18px;
}
.overlay-corn::before { top: 20%; left: 12%; }
.overlay-corn::after  { bottom: 25%; right: 12%; }

.confetti {
  position: absolute; width: 8px; height: 14px; border-radius: 2px;
  pointer-events: none;
  animation: fall 1.6s linear forwards;
}
@keyframes fall {
  to { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}

/* ---------- RAMEN ---------- */
.ramen:not(.station), .boba:not(.station) {
  display: grid; grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  height: 100%; max-width: 100%; overflow: hidden;
  gap: 8px; padding: 8px;
  position: relative;
}
.boba .workspace {
  position: relative; background: white; border-radius: 22px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.05);
  display: grid; place-items: center; overflow: hidden;
  min-height: 0;
}
.ramen-stage, .boba-stage {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 14px; position: relative;
}
.stove {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.burner {
  width: 120px; height: 40px;
  background: radial-gradient(ellipse, #444, #222);
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.5);
}
.flame {
  position: absolute; left: 50%; top: -20px; transform-origin: 50% 100%;
  transform: translateX(-50%) scaleY(0.5);
  font-size: 40px; opacity: 0;
  transition: opacity .3s, transform .3s;
  animation: flameDance .25s ease-in-out infinite alternate;
}
.flame::before { content: "🔥"; }
@keyframes flameDance {
  from { transform: translateX(-50%) scaleY(.7) rotate(-4deg); }
  to   { transform: translateX(-50%) scaleY(.9) rotate(4deg); }
}
.knob {
  background: linear-gradient(180deg, #fff6fb, #f3dcec);
  border: 3px solid #8a4a6e;
  border-radius: 16px; padding: 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: #6b3a58; font-weight: 900; font-size: 11px;
  cursor: pointer; box-shadow: 0 4px 0 #c99ab8;
  align-self: center;
}
.knob:active { transform: translateY(2px); box-shadow: 0 2px 0 #c99ab8; }
.knob-label { color: #a4547f; letter-spacing: .5px; }
.knob-pointer {
  width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe1f1, #e6a9cc 70%, #c98ab0);
  position: relative; border: 3px solid #8a4a6e;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
  transition: transform .25s cubic-bezier(.3,1.4,.5,1);
}
.knob-pointer::after {
  content: ""; position: absolute; left: 50%; top: 10%;
  width: 5px; height: 40%;
  background: #8a4a6e; transform: translateX(-50%);
  border-radius: 3px;
}
.knob-value {
  background: #8a4a6e; color: white;
  padding: 2px 8px; border-radius: 8px; font-size: 10px;
}

/* Hand-drawn pot / bowl art with an interactive interior overlay */
.ramen .vessel {
  position: relative;
  width: min(60cqw, 340px, 82cqh); aspect-ratio: 1 / 1;
  display: block; touch-action: none;
}
.ramen .vessel-img {
  width: 100%; height: 100%; object-fit: contain;
  pointer-events: none; -webkit-user-select: none; user-select: none;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.18));
}
.ramen .vessel.armed .vessel-img {
  filter: drop-shadow(0 0 10px var(--neon-cyan)) drop-shadow(0 8px 12px rgba(0,0,0,.18));
}
/* the broth/noodle/topping area sits over the vessel's opening */
.ramen .vessel-inner {
  position: absolute; border-radius: 50%; overflow: hidden;
  z-index: 2; pointer-events: none;
}
.ramen .pot-vessel .vessel-inner  { left: 24%; right: 24%; top: 31%; bottom: 47%; }
.ramen .bowl-vessel .vessel-inner { left: 17%; right: 17%; top: 25%; bottom: 43%; }
.ramen .bowl-broth {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 35%, #ffb863, #ef8b2c 70%, #d9761c);
}
/* ---- THE BOIL: pot stands on a drawn hob; flames, water color, bubbles and
   steam all follow the HEAT dial ---- */
.ramen .range { display: flex; flex-direction: column; align-items: center; position: relative; }
.ramen .range .vessel { width: min(56cqw, 320px, 62cqh); z-index: 2; }
.ramen .range .pot-vessel::after { display: none; }   /* it stands on the hob, not the counter */
/* hob body sits BEHIND the pot, its grate ring aligned to the pot's visible base;
   the flame layer sits IN FRONT so the tongues lick up the pot's sides */
.ramen .hob { width: 70%; margin-top: -21%; position: relative; }
.ramen .hob svg { width: 100%; height: auto; display: block; overflow: visible; }
.ramen .hob .hob-body { position: relative; z-index: 1; }
.ramen .hob .hob-flames { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ramen .hob .flames { transform-origin: 70px 46px; transform: scaleY(0); transition: transform .35s; opacity: 0; }
.ramen .hob[data-heat="1"] .flames { transform: scaleY(.35) scaleX(.85); opacity: .8; }
.ramen .hob[data-heat="2"] .flames { transform: scaleY(.6); opacity: .9; }
.ramen .hob[data-heat="3"] .flames { transform: scaleY(.9) scaleX(1.06); opacity: .95; }
.ramen .hob .flick { transform-origin: 70px 46px; animation: flameFlick .16s ease-in-out infinite alternate; }
@keyframes flameFlick { from { transform: scaleY(.9) skewX(-3deg); } to { transform: scaleY(1.08) skewX(3deg); } }
/* water in the pot: cool → hot, then a rolling boil */
@property --wl { syntax: '<color>'; inherits: false; initial-value: #d6ecf8; }
@property --wd { syntax: '<color>'; inherits: false; initial-value: #9dcbe6; }
.ramen .water-inner { z-index: 2; }
.ramen .water {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, var(--wl), var(--wd) 80%);
  transition: --wl .6s, --wd .6s;
}
.ramen .pot-vessel[data-heat="1"] .water { --wl: #d9ecf3; --wd: #a6cfe0; }
.ramen .pot-vessel[data-heat="2"] .water { --wl: #eae9dc; --wd: #c9cfb3; }
.ramen .pot-vessel[data-heat="3"] .water { --wl: #fbefd6; --wd: #e8d3a2; }
.ramen .water.rolling { animation: waterRoll .5s ease-in-out infinite alternate; }
@keyframes waterRoll { from { transform: scaleY(1) translateY(0); } to { transform: scaleY(1.04) translateY(-2px); } }
.ramen .bubble-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ramen .bubble {
  position: absolute; bottom: 6%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, rgba(255,255,255,.35));
  border: 1px solid rgba(255,255,255,.75); pointer-events: none;
}
/* heat glow under a hot pot */
.ramen .pot-vessel::before {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: calc(var(--lift, 0%) - 4%); height: 14%;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(255,140,40,.55), transparent 70%);
  opacity: 0; transition: opacity .4s; pointer-events: none; z-index: -1;
}
.ramen .pot-vessel[data-heat="2"]::before { opacity: .5; }
.ramen .pot-vessel[data-heat="3"]::before { opacity: 1; }
/* steam wisps rising off a hot pot/bowl */
.ramen .steam {
  position: absolute; left: 0; right: 0; top: 6%; height: 30%;
  pointer-events: none; opacity: 0; transition: opacity .4s; z-index: 3;
}
.ramen .steam.on { opacity: .85; }
.ramen .steam::before, .ramen .steam::after {
  content: ""; position: absolute; bottom: 0; width: 10px; height: 100%;
  background: linear-gradient(to top, rgba(255,255,255,.55), rgba(255,255,255,0));
  border-radius: 50%; filter: blur(3px);
  animation: steamRise 2.4s ease-in-out infinite;
}
.ramen .steam::before { left: 42%; animation-delay: 0s; }
.ramen .steam::after  { left: 56%; animation-delay: 1.1s; }
@keyframes steamRise {
  0%   { transform: translateY(10px) scaleX(.8); opacity: 0; }
  40%  { opacity: .8; }
  100% { transform: translateY(-26px) scaleX(1.3); opacity: 0; }
}
.ramen .steam.hot::before, .ramen .steam.hot::after { width: 18px; filter: blur(5px); animation-duration: 1.6s; }
.ramen .steam.hot { height: 40%; top: -4%; }
.pot .stir-progress, .boba-stage .shake-progress {
  position: absolute; left: 18%; right: 18%; top: 22%;
  height: 8px; background: rgba(0,0,0,.35); border-radius: 5px; overflow: hidden;
  z-index: 5;
}
.pot .stir-progress .fill, .boba-stage .shake-progress .fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #ffd166, #ff5fa2, #b067ff);
  transition: width .1s linear;
  box-shadow: 0 0 6px rgba(255,80,160,.5);
}
.ramen .noodle-blob {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 72%; aspect-ratio: 1; z-index: 4;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.25));
}
.ramen .noodle-blob.in-bowl { width: 78%; }
.ramen .noodles { width: 100%; height: 100%; display: block; overflow: visible; }
/* dry block → loose strands: each strand starts squashed/straight and relaxes into its wave */
.ramen .noodles.soften .strand {
  transform-box: fill-box; transform-origin: center;
  animation: noodleSoften 1.4s cubic-bezier(.3,1.3,.5,1) both;
}
@keyframes noodleSoften {
  0%   { transform: scaleY(.15) scaleX(.7); opacity: .7; }
  60%  { transform: scaleY(1.15) scaleX(1.02); opacity: 1; }
  100% { transform: none; }
}
.ramen-topping {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 30px; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));
  z-index: 5;
}
/* the cloned bowl shown on the serve/reveal card */
.ramen .reveal-bowl { width: 200px; margin: 0 auto; }

/* broth flavor picker (first tab of the topping tray) */
.ramen .broth-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: auto; min-width: 66px; height: auto; padding: 6px 8px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.ramen .broth-pick .bp-swatch {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bt);
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.ramen .broth-pick.sel {
  outline: 3px solid var(--neon-pink); outline-offset: 1px; border-radius: 14px;
}
.chopsticks {
  position: absolute; font-size: 60px;
  transform: translate(-50%, -50%) rotate(-25deg);
  pointer-events: none; opacity: 0;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.3));
  z-index: 6;
}
.chopsticks.on { opacity: 1; }

/* ---------- BOBA ---------- */
.tea-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px; padding: 16px; max-width: 600px; width: 100%;
}
.tea-card {
  background: var(--c, var(--cream));
  border: 3px solid white;
  border-radius: 20px;
  padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
  box-shadow: var(--shadow);
  color: white; text-shadow: 0 2px 4px rgba(0,0,0,.4);
  font-weight: 900;
  transition: transform .15s;
}
.tea-card:active { transform: scale(.95); }
.tea-emoji { font-size: 56px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.tea-name { font-size: 14px; }

/* ---------- BOBA v2 (cup picker, liquid pouring, smiling-homie cup) ---------- */
.cup-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; padding: 12px; max-width: 720px;
}
.cup-pick-card {
  background: white; border: 3px solid transparent; border-radius: 18px;
  padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .15s, border-color .15s;
}
.cup-pick-card:hover { border-color: var(--neon-cyan); }
.cup-pick-card:active { transform: scale(.95); }
.cup-pick-svg { width: 100%; aspect-ratio: 1; }
.cup-pick-svg svg { width: 100%; height: 100%; }
.cup-pick-name { font-size: 13px; font-weight: 900; }

.cup-display {
  position: relative;
  width: min(50vw, 320px); aspect-ratio: 0.85/1;
  display: grid; place-items: center;
}
.cup-display .cup-svg { width: 100%; height: 100%; }
.cup-display .liquid-stream {
  position: absolute; left: 50%; top: -6%;
  transform: translateX(-50%);
  width: 8px; height: 90%;
  border-radius: 6px; opacity: 0;
  transition: opacity .15s;
  pointer-events: none; z-index: 3;
}
.cup-display .fill-meter {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  background: white; color: var(--ink); font-weight: 900;
  padding: 3px 10px; border-radius: 12px; font-size: 13px;
  box-shadow: var(--shadow-sm); z-index: 4;
}

/* Liquid bottles in the tray */
.liquid-bottle {
  position: relative;
  border: 3px solid #2b1e3a !important;
  box-shadow: var(--shadow-sm);
  font-size: 28px;
}
.drag-ghost.liquid-ghost {
  border: 3px solid #2b1e3a;
  border-radius: 12px;
  padding: 10px;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  font-size: 32px;
  transition: transform .15s;
}
.drag-ghost.liquid-ghost.pouring {
  transform: translate(-50%, -50%) scale(1.15) rotate(-50deg);
}

/* Floating toppings animation inside cup — drifts in a small loop */
.cup-svg .topping-float {
  animation: toppingFloat 2.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes toppingFloat {
  0%   { transform: translate(0, 0)               rotate(0deg); }
  25%  { transform: translate(var(--drift, 4px), -5px) rotate(8deg); }
  50%  { transform: translate(0, -8px)            rotate(0deg); }
  75%  { transform: translate(calc(var(--drift, 4px) * -1), -3px) rotate(-8deg); }
  100% { transform: translate(0, 0)               rotate(0deg); }
}
/* Legacy alias so any old code still animates */
.cup-svg .boba-float { animation: toppingFloat 2.4s ease-in-out infinite; }
/* Bubbles rising from bottom of cup */
.cup-svg .bubble-rise {
  animation: bubbleRise 3.5s linear infinite;
  opacity: 0;
}
@keyframes bubbleRise {
  0%   { opacity: 0; transform: translateY(0); }
  10%  { opacity: .8; }
  90%  { opacity: .6; }
  100% { opacity: 0; transform: translateY(-150px); }
}
/* Smiling homie face — blink occasionally */
.cup-svg .cup-face {
  animation: homieWobble 3s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes homieWobble {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.homie-cup .cup-svg { animation: homiePulse 1.8s ease-in-out infinite; }
@keyframes homiePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Old legacy cup styles — keep for backward-compat */
.cup {
  position: relative;
  width: min(34vw, 200px); aspect-ratio: 0.55/1;
  background: rgba(255,255,255,.15);
  border: 4px solid #5fc8ff;
  border-radius: 12px 12px 30% 30% / 12px 12px 18% 18%;
  overflow: hidden;
  box-shadow: 0 8px 0 rgba(0,0,0,.12);
}
.cup-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0%;
  transition: height .15s linear;
}
.cup .fill-label {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  background: white; color: var(--ink);
  font-weight: 900; font-size: 14px;
  padding: 2px 8px; border-radius: 10px;
  z-index: 6;
}
.cup-toppings {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
}
.cup-dot {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 22px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));
}
.cup .tea-stream {
  position: absolute; left: 50%; top: -8%;
  transform: translateX(-50%);
  width: 8px; height: 100%;
  border-radius: 6px;
  opacity: 0; transition: opacity .15s;
}
.cup .cup-cap {
  position: absolute; left: 50%; top: -8px;
  transform: translateX(-50%);
  font-size: 40px;
  z-index: 4;
}
.cup.capped { transition: transform .1s; }
.drag-ghost.teapot-ghost { font-size: 64px; transition: transform .15s; }
.drag-ghost.teapot-ghost.pouring {
  transform: translate(-50%, -50%) scale(1.15) rotate(-50deg);
}
.boba-stage .shake-progress {
  position: absolute; left: 20%; right: 20%; bottom: 12px;
  top: auto;
}

/* ---------- IDOL "Pick a Look" gallery ---------- */
.idol-looks {
  display: grid; grid-template-rows: 1fr auto;
  height: 100%; gap: 8px; padding: 8px;
}
.idol-stage {
  position: relative;
  background: radial-gradient(ellipse at 50% 90%, rgba(255,0,110,.45), transparent 60%),
              linear-gradient(180deg, #2a1340 0%, #1a0a28 100%);
  border-radius: 22px; overflow: hidden;
  border: 3px solid var(--neon-purple);
  box-shadow: 0 0 24px rgba(157,78,221,.4);
  display: grid; place-items: center;
}
.idol-spotlight {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 25% 10%, rgba(255,0,110,.5), transparent 40%),
    radial-gradient(circle at 75% 10%, rgba(0,245,255,.5), transparent 40%);
  animation: spin 8s linear infinite;
}
.idol-main {
  max-width: 60%; max-height: 90%; object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.4));
  animation: idleBob 2.4s ease-in-out infinite;
  z-index: 2;
}
.idol-name {
  position: absolute; bottom: 12px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple));
  color: white; font-weight: 900; font-size: 18px;
  padding: 6px 18px; border-radius: 16px;
  box-shadow: var(--shadow-sm);
  z-index: 3;
}
.looks-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px; padding: 4px; max-height: 230px;
  overflow-y: auto;
  background: rgba(255,255,255,.85); border-radius: 18px;
}
.look-card {
  position: relative;
  border: 3px solid transparent; border-radius: 14px;
  background: white; padding: 4px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: var(--shadow-sm);
}
.look-card img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.look-card .look-name { font-size: 11px; font-weight: 800; }
.look-card.selected { border-color: var(--neon-pink); box-shadow: 0 0 12px rgba(255,0,110,.5); }
.look-card.locked   { opacity: .55; filter: grayscale(.4); }
.look-card .look-cost {
  position: absolute; top: 4px; right: 4px;
  background: var(--yolk); color: var(--ink);
  font-size: 11px; font-weight: 900;
  padding: 2px 6px; border-radius: 8px;
}

/* customer face image rendering */
.customer .face img {
  width: 90px; height: 90px; object-fit: contain;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.12));
}

/* avatar look image on menu */
.avatar-character img {
  width: 100%; height: 100%; object-fit: contain;
}

/* ---------- IDOL ---------- */
.idol { display: grid; grid-template-columns: 1fr 320px; height: 100%; gap: 8px; padding: 8px; }
@media (max-width: 760px) { .idol { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } }

.idol .stage {
  position: relative; display: grid; place-items: center;
  background:
    radial-gradient(ellipse at center 90%, rgba(255,0,110,.35), transparent 60%),
    linear-gradient(180deg, #2a1340 0%, #1a0a28 100%);
  border-radius: 22px; overflow: hidden;
  border: 3px solid var(--neon-purple);
  box-shadow: 0 0 24px rgba(157,78,221,.4);
}
.idol .stage::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 5%, rgba(255,0,110,.5), transparent 40%),
    radial-gradient(circle at 80% 5%, rgba(0,245,255,.5), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.25), transparent 50%);
  pointer-events: none;
}
.idol .stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(255,0,110,.18) 80%, rgba(0,245,255,.25));
  border-top: 1px solid rgba(255,0,110,.5);
  pointer-events: none;
}
.spotlight {
  position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 100%, transparent 0deg, rgba(255,255,255,.4) 30deg, transparent 60deg);
  animation: spin 6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.character {
  position: relative; width: min(60vw, 280px); aspect-ratio: 1/1.7;
  animation: idleBob 2s ease-in-out infinite;
}
@keyframes idleBob { 50% { transform: translateY(-6px); } }
.character svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.picker {
  background: white; border-radius: 22px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow);
}
.picker .tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 2px dashed var(--pink); }
.picker .tabs button {
  flex: 1; border: none; padding: 10px 4px; font-weight: 800; font-size: 14px;
  border-radius: 14px; background: var(--cream);
}
.picker .tabs button.on { background: var(--pink); color: white; }
.picker .body { padding: 10px; overflow-y: auto; }
.picker .opts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.picker .opt {
  aspect-ratio: 1; border: none; border-radius: 16px;
  background: var(--cream); box-shadow: var(--shadow-sm);
  display: grid; place-items: center; position: relative;
  padding: 6px;
}
.picker .opt svg { width: 100%; height: 100%; }
.picker .opt.on { outline: 4px solid var(--pink); }
.picker .opt.locked { opacity: .4; }
.picker .opt .lock-cost {
  position: absolute; bottom: 2px; right: 4px;
  font-size: 11px; font-weight: 800; color: var(--ink);
  background: white; padding: 1px 5px; border-radius: 8px;
}
.picker .swatches {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
  padding-top: 12px; border-top: 1px dashed var(--pink);
}
.picker .swatch {
  width: 36px; height: 36px; border-radius: 50%; border: 3px solid white;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.picker .swatch.on { transform: scale(1.15); outline: 3px solid var(--ink); }

/* ---------- SHOP (queue + patience) ---------- */
.shop { display: grid; grid-template-rows: 1fr auto auto; height: 100%; }
.shop .scene-bg {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,.4) 100%),
    linear-gradient(180deg, #ffe4ef 0%, #d8e9ff 100%);
  overflow: hidden;
}
.shop .counter {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(180deg, #8e5a3c 0%, #6e4128 100%);
  box-shadow: inset 0 8px 0 rgba(255,255,255,.15);
}
.shop .counter::before {
  content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
  background: #c89572;
}
.queue {
  position: absolute; left: 0; right: 0; bottom: 30%;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 16px; padding: 0 20px 8px;
  pointer-events: none;
}
.customer {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: auto;
  animation: walkin .5s ease-out;
}
@keyframes walkin {
  from { transform: translateX(80vw); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.customer.leaving { animation: walkout .5s ease-in forwards; }
@keyframes walkout {
  to { transform: translateX(-80vw); opacity: 0; }
}
.customer .face {
  font-size: 90px; filter: drop-shadow(0 8px 0 rgba(0,0,0,.12));
  animation: idleBob 1.6s ease-in-out infinite;
}
.customer .bubble {
  background: white; padding: 8px 14px; border-radius: 18px;
  box-shadow: var(--shadow-sm); font-size: 38px;
  position: relative;
}
.customer .bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  border: 10px solid transparent; border-top-color: white;
  transform: translateX(-50%);
}
.customer .customer-name {
  font-size: 11px; font-weight: 800;
  background: rgba(43,30,58,.85); color: white;
  padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}
.customer.vip .customer-name {
  background: linear-gradient(90deg, #ffd166, #ff5fa2);
  box-shadow: 0 0 8px rgba(255,209,102,.6);
}
.customer.vip .face {
  filter: drop-shadow(0 0 12px rgba(255,209,102,.7)) drop-shadow(0 8px 0 rgba(0,0,0,.12));
}
.customer-speech {
  position: absolute; top: 28%; left: 50%;
  transform: translateX(-50%);
  background: white; color: var(--ink);
  padding: 6px 12px; border-radius: 14px;
  font-weight: 800; font-size: 14px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap; pointer-events: none;
  animation: speechPop .4s cubic-bezier(.2,1.5,.5,1), speechRise 1.5s ease-out forwards;
  z-index: 10;
}
@keyframes speechPop  { from { transform: translateX(-50%) scale(.3); opacity: 0; }
                         to   { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes speechRise { 0%, 60% { opacity: 1; }
                         100%    { opacity: 0; transform: translate(-50%, -28px) scale(1); } }

.daily-special {
  position: absolute; top: 8px; left: 12px;
  background: linear-gradient(90deg, #ffd166, #ff5fa2);
  color: var(--ink); font-weight: 900; font-size: 14px;
  padding: 6px 12px; border-radius: 14px;
  box-shadow: var(--shadow-sm);
  z-index: 5;
  display: flex; align-items: center; gap: 4px;
}
.daily-special span { font-size: 22px; }
.daily-special small { opacity: .85; margin-left: 4px; }

.shop .tray .item.is-special {
  position: relative;
}
.shop .tray .item.is-special::after {
  content: "2×"; position: absolute; top: -6px; right: -6px;
  background: var(--yolk); color: var(--ink);
  font-size: 11px; font-weight: 900;
  padding: 1px 5px; border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.customer .patience {
  width: 70px; height: 7px; background: rgba(0,0,0,.15);
  border-radius: 4px; overflow: hidden;
}
.customer .patience .fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #6dc99a, #ffd166, #ff6b6b);
  transition: width .2s linear;
}

.combo-banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--yolk); color: var(--ink); padding: 6px 16px;
  border-radius: 20px; font-weight: 900; font-size: 18px;
  box-shadow: var(--shadow-sm);
  opacity: 0; transition: opacity .2s, transform .2s;
}
.combo-banner.show { opacity: 1; transform: translate(-50%, 4px); }

/* ---------- STAGE ---------- */
.stage-game { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.song-picker { display: flex; gap: 8px; padding: 10px; overflow-x: auto; align-items: center; }
.song-picker button {
  flex: 0 0 auto; border: none; padding: 10px 16px; border-radius: 18px;
  font-weight: 800; font-size: 15px; background: white; box-shadow: var(--shadow-sm);
}
.song-picker button.on { background: var(--yolk); }

.beat-board {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #2b1e3a 0%, #4b2a6a 100%);
}
.stage-bg-idol {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 240px; opacity: .75;
  animation: dance 0.5s ease-in-out infinite alternate;
}
.stage-bg-idol svg { width: 100%; height: 100%; }
@keyframes dance { from { transform: translate(-50%, 0) rotate(-3deg); } to { transform: translate(-50%, -6px) rotate(3deg); } }
.disco {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 20% 10%, rgba(255,100,200,.25), transparent 30%),
              radial-gradient(circle at 80% 15%, rgba(120,255,200,.25), transparent 30%),
              radial-gradient(circle at 50% 5%, rgba(255,220,120,.25), transparent 30%);
  animation: disco 2s ease-in-out infinite alternate;
}
@keyframes disco { to { opacity: .5; } }

.score-hud {
  position: absolute; top: 8px; left: 12px; color: white;
  font-weight: 800; font-size: 16px;
  display: flex; flex-direction: column; gap: 4px;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.score-hud .combo { color: var(--yolk); }

.lane { position: absolute; top: 0; bottom: 0; width: 25%; border-right: 2px dashed rgba(255,255,255,.12); }
.lane:nth-of-type(1){ left: 0%; } .lane:nth-of-type(2){ left: 25%; }
.lane:nth-of-type(3){ left: 50%; } .lane:nth-of-type(4){ left: 75%; border-right: none; }
.hitline {
  position: absolute; left: 0; right: 0; bottom: 110px; height: 6px;
  background: linear-gradient(90deg, #ff5fa2, #5fc8ff);
  box-shadow: 0 0 18px #ff5fa2;
}
.note {
  position: absolute; width: 20%; left: 0; top: -90px; height: 80px;
  display: grid; place-items: center; font-size: 50px; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.6));
}
.judge {
  position: absolute; left: 50%; bottom: 130px;
  transform: translateX(-50%);
  font-weight: 900; font-size: 26px; color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  opacity: 0; transition: opacity .15s, transform .25s;
}
.judge.perfect { color: var(--yolk); }
.judge.show { opacity: 1; transform: translate(-50%, -10px); }

.tap-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: #1a1228; }
.tap-row button {
  height: 100px; border: none; font-size: 42px; color: white;
  background: linear-gradient(180deg, #6b3aa8, #3a1d63);
  border-top: 4px solid rgba(255,255,255,.2);
}
.tap-row button:active, .tap-row button.lit {
  background: linear-gradient(180deg, #ff5fa2, #b067ff);
}

/* Stage result overlay */
.result {
  position: absolute; inset: 0; background: rgba(0,0,0,.7); color: white;
  display: grid; place-items: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.result.show { opacity: 1; pointer-events: auto; }
.result .card {
  background: white; color: var(--ink); border-radius: 22px;
  padding: 24px 32px; text-align: center;
  box-shadow: var(--shadow);
}
.result h2 { margin: 0 0 8px; font-size: 28px; }
.result .stars { font-size: 56px; letter-spacing: 6px; }
.result .reward { margin: 12px 0; font-weight: 800; font-size: 20px; }

/* ---------- UNLOCK SHOP ---------- */
.unlock { padding: 16px; overflow-y: auto; height: 100%; }
.unlock h2 { margin: 0 0 8px; }
.unlock .section { margin-bottom: 22px; }
.unlock .grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.unlock-card {
  background: white; border-radius: 18px; padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: var(--shadow-sm); text-align: center;
}
.unlock-card .icon { font-size: 44px; line-height: 1; }
.unlock-card .icon svg { width: 60px; height: 60px; }
.unlock-card .name { font-size: 13px; font-weight: 700; }
.unlock-card .buy {
  border: none; padding: 6px 10px; border-radius: 12px;
  background: var(--yolk); font-weight: 800; font-size: 13px;
  box-shadow: var(--shadow-sm);
}
.unlock-card.owned .buy { background: var(--mint); }
.unlock-card.cannot .buy { background: #ddd; }

/* ---------- FX (toasts, sparkles) ---------- */
.toast {
  position: absolute; padding: 10px 18px; border-radius: 20px;
  background: white; font-weight: 800; box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0; transform: translateY(0);
  transition: opacity .3s, transform .6s;
}
.toast.show { opacity: 1; transform: translateY(-30px); }
/* ---------- Contextual hint card ---------- */
.hint-card {
  position: absolute;
  top: 70px; left: 50%;
  transform: translate(-50%, -130%);
  background: linear-gradient(135deg, #5fc8ff, #b067ff);
  color: white;
  border: 3px solid white;
  padding: 12px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow), 0 0 20px rgba(95,200,255,.5);
  pointer-events: auto;
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,1.5,.5,1), opacity .3s;
  max-width: min(90vw, 520px);
  z-index: 1100;
}
.hint-card.show { opacity: 1; transform: translate(-50%, 0); }
.hint-bubble { font-size: 28px; line-height: 1; }
.hint-text { flex: 1; line-height: 1.3; }
.hint-dismiss {
  flex-shrink: 0;
  border: none;
  background: white;
  color: var(--ink);
  font-weight: 900; font-size: 12px;
  padding: 6px 12px; border-radius: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.hint-dismiss:active { transform: translateY(2px); }

/* ---------- Achievement unlock toast ---------- */
.ach-toast {
  position: absolute; top: 80px; left: 50%;
  transform: translate(-50%, -120%);
  background: linear-gradient(135deg, #ffd166, #ff8fb1);
  color: var(--ink);
  border-radius: 20px;
  padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow), 0 0 20px rgba(255,209,102,.55);
  border: 3px solid white;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.2,1.5,.5,1), opacity .3s;
  opacity: 0;
  max-width: 360px;
  z-index: 1000;
}
.ach-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ach-toast.quest { background: linear-gradient(135deg, #b8f0d6, #5fc8ff); }
.ach-toast.quest .ach-reward { color: #2a4f8a; }
.ach-icon { font-size: 44px; line-height: 1; }
.ach-text { display: flex; flex-direction: column; gap: 2px; }
.ach-title { font-size: 11px; font-weight: 900; opacity: .7; letter-spacing: 1px; }
.ach-name  { font-size: 18px; font-weight: 900; }
.ach-reward { font-size: 13px; font-weight: 800; color: #b03060; }

/* ---------- Trophies grid ---------- */
.trophy-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  margin-top: 8px;
}
.trophy-card {
  background: white; border-radius: 18px; padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .15s;
}
.trophy-card.won {
  background: linear-gradient(135deg, #fff7d8, #ffe4ef);
  box-shadow: var(--shadow-sm), 0 0 12px rgba(255,209,102,.5);
}
.trophy-card.locked { opacity: .55; filter: grayscale(.5); }
.trophy-icon { font-size: 42px; }
.trophy-name { font-size: 14px; font-weight: 900; }
.trophy-desc { font-size: 12px; opacity: .75; line-height: 1.2; }
.trophy-reward {
  margin-top: 4px;
  background: var(--yolk); color: var(--ink);
  padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 800;
}

/* ---------- Daily quests list ---------- */
.quest-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.quest-card {
  background: white; border-radius: 18px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.quest-card.done {
  background: linear-gradient(135deg, #b8f0d6, #d4f5e3);
}
.quest-icon { font-size: 38px; line-height: 1; }
.quest-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.quest-name { font-size: 16px; font-weight: 900; }
.quest-desc { font-size: 12px; opacity: .75; }
.quest-bar {
  height: 8px; background: rgba(43,30,58,.12);
  border-radius: 5px; overflow: hidden;
  margin-top: 4px;
}
.quest-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff5fa2, #ffd166, #6dc99a);
  transition: width .3s;
}
.quest-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 800; opacity: .75;
}
.quest-reward { color: #d8a700; }
.quest-check {
  position: absolute; top: 8px; right: 12px;
  font-size: 28px; color: #2a8a4f;
  font-weight: 900;
}

.coin-pop {
  position: fixed; pointer-events: none; font-weight: 900;
  font-size: 28px; color: #d8a700;
  text-shadow: 0 2px 0 white;
  transition: transform 1s ease-out, opacity 1s;
}

/* ========================================================================
   SERVE MODE — restaurant (shift select, play, results, upgrades)
   ===================================================================== */
.serve-select, .serve-results {
  height: 100%; display: flex; flex-direction: column;
  padding: 12px; gap: 12px; overflow-y: auto;
  background: linear-gradient(180deg, #fff0f7, #ffe6f3);
}
.serve-head {
  display: flex; align-items: center; gap: 8px;
}
.serve-head h2 { flex: 1; text-align: center; margin: 0; font-size: clamp(18px, 2.6vw, 26px); color: var(--pink-deep); }
.srv-back, .srv-upgrades, .srv-coins {
  border: none; border-radius: 14px; padding: 8px 14px; font-weight: 800;
  font-size: 15px; cursor: pointer; box-shadow: var(--shadow-sm);
}
.srv-back { background: white; color: var(--ink); }
.srv-upgrades { background: var(--yolk); color: #5a4a00; }
.srv-coins { background: white; color: #b8860b; }

.shift-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; align-content: start;
}
.shift-card {
  border: none; border-radius: 20px; padding: 14px 10px; cursor: pointer;
  background: white; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .12s; text-align: center;
}
.shift-card:active { transform: scale(.96); }
.shift-card.locked { opacity: .55; filter: grayscale(.5); cursor: not-allowed; }
.shift-card.event {
  background: linear-gradient(160deg, #fff4c2, #ffd6ec);
  outline: 3px solid var(--yolk);
}
.shift-day { font-size: 12px; font-weight: 800; color: var(--pink); letter-spacing: .5px; }
.shift-name { font-weight: 900; font-size: 16px; color: var(--ink); }
.shift-stars { font-size: 18px; letter-spacing: 2px; }
.shift-goal { font-size: 12px; color: #888; font-weight: 700; }
.serve-cards { text-align: center; font-weight: 800; color: var(--pink-deep); }

/* Upgrade shop */
.upgrade-list { display: flex; flex-direction: column; gap: 10px; }
.upg-card {
  display: flex; align-items: center; gap: 12px;
  background: white; border-radius: 18px; padding: 10px 14px; box-shadow: var(--shadow-sm);
}
.upg-icon { font-size: 30px; }
.upg-info { flex: 1; }
.upg-name { font-weight: 900; font-size: 15px; color: var(--ink); }
.upg-name :first-child { letter-spacing: 2px; color: var(--pink); font-size: 12px; }
.upg-desc { font-size: 12.5px; color: #777; }
.upg-buy {
  border: none; border-radius: 14px; padding: 10px 14px; font-weight: 900;
  font-size: 14px; cursor: pointer; background: var(--mint); color: #0a5a36;
  box-shadow: var(--shadow-sm); min-width: 72px;
}
.upg-buy.cant { background: #eee; color: #aaa; }
.upg-buy.maxed { background: var(--yolk); color: #5a4a00; }

/* ---- Play layout: a little café ---- */
.serve-play {
  height: 100%; display: flex; flex-direction: column; gap: 0; padding: 0;
  background: #f4ddbf; overflow: hidden;
}
.serve-hud { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; }
.srv-quit {
  border: none; background: white; color: var(--ink); width: 34px; height: 34px;
  border-radius: 50%; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-sm); flex: 0 0 auto;
}
.hud-timer {
  flex: 1; height: 24px; background: #fff; border-radius: 13px; position: relative;
  overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.12);
}
.hud-timer-fill {
  position: absolute; inset: 0; width: 100%;
  background: linear-gradient(90deg, #6ee7a8, #9be15d); transition: width .1s linear;
}
.hud-timer-fill.low { background: linear-gradient(90deg, #ff9a6a, #ff5f6d); animation: timerFlash .8s infinite; }
@keyframes timerFlash { 50% { filter: brightness(1.15); } }
.hud-timer span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 900; font-size: 13px; color: #1a4a2a;
}
.hud-timer span::before { content: '⏱ '; }
.hud-coins { background: white; border-radius: 13px; padding: 6px 12px; font-weight: 900; color: #b8860b; box-shadow: var(--shadow-sm); white-space: nowrap; flex: 0 0 auto; }
.hud-coins small { color: #999; font-weight: 700; }

/* CAFÉ — pink wall with polka dots where customers stand */
.cafe {
  flex: 0 0 auto; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 14px 14px, rgba(255,255,255,.45) 3px, transparent 4px) 0 0 / 28px 28px,
    linear-gradient(180deg, #ffd0e8 0%, #ffbcdd 100%);
  box-shadow: inset 0 -8px 14px rgba(180,80,130,.18);
}
.serve-play .customers {
  display: flex; gap: 12px; align-items: flex-end; justify-content: safe center;
  min-height: 178px; overflow-x: auto; padding: 14px 12px 10px;
}
.serve-play .customer {
  flex: 0 0 auto; width: 96px; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  animation: custIn .4s cubic-bezier(.2,1.3,.5,1);
}
@keyframes custIn { from { transform: translateY(22px) scale(.7); opacity: 0; } }
/* order speech-bubble above the customer's head */
.order-bubble {
  background: #fff; border-radius: 14px; padding: 6px; min-height: 46px;
  display: flex; gap: 5px; justify-content: center; flex-wrap: wrap;
  box-shadow: 0 5px 12px rgba(140,60,100,.25); position: relative;
  border: 2.5px solid #ffd9ec;
}
.order-bubble::after {
  content: ''; position: absolute; bottom: -8px; left: 50%; width: 14px; height: 14px;
  transform: translateX(-50%) rotate(45deg); background: #fff;
  border-right: 2.5px solid #ffd9ec; border-bottom: 2.5px solid #ffd9ec;
}
.order-item {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #fff, #f0eef2);
  border-radius: 50%; box-shadow: inset 0 0 0 2px #e7e3ea, 0 1px 2px rgba(0,0,0,.08);
}
.order-item.served { background: radial-gradient(circle, #d6ffe2, #b6f4cb); box-shadow: inset 0 0 0 2px #8fe0a8; }
.oi-check { color: #1c9a52; font-weight: 900; font-size: 20px; }
.ti-art svg, .ri-art svg, .mi-art svg { width: 100%; height: 100%; display: block; }
.ti-art { width: 30px; height: 30px; }
/* character avatar */
.avatar {
  width: 56px; height: 56px; border-radius: 50%; position: relative;
  background: linear-gradient(160deg, #ffffff, #ffe7f3);
  display: grid; place-items: center; box-shadow: 0 5px 9px rgba(140,60,100,.28);
  border: 3px solid #fff;
}
.avatar-face { font-size: 32px; line-height: 1; }
.tip-badge {
  position: absolute; bottom: -5px; right: -7px; background: var(--yolk); color: #5a4a00;
  font-size: 10px; font-weight: 900; padding: 1px 6px; border-radius: 9px;
  box-shadow: 0 2px 4px rgba(0,0,0,.18); border: 2px solid #fff;
}
.serve-play .customer.vip .avatar { background: linear-gradient(160deg,#fff7d6,#ffe08a); box-shadow: 0 0 0 3px var(--yolk), 0 5px 9px rgba(0,0,0,.2); }
.serve-play .customer.vip .avatar::before { content: '👑'; position: absolute; top: -16px; font-size: 16px; }
.serve-play .customer.celeb .avatar { background: linear-gradient(160deg,#ffe6f3,#ff9fce); box-shadow: 0 0 0 3px #ff5fa2, 0 5px 12px rgba(255,95,162,.4); animation: celebGlow 1.2s infinite; }
.serve-play .customer.celeb .avatar::before { content: '⭐'; position: absolute; top: -16px; font-size: 16px; animation: spinStar 2s linear infinite; }
@keyframes celebGlow { 50% { box-shadow: 0 0 0 5px #ff8fc4, 0 5px 16px rgba(255,95,162,.6); } }
@keyframes spinStar { to { transform: rotate(360deg); } }
/* patience meter */
.serve-play .patience {
  width: 78px; height: 10px; background: rgba(255,255,255,.65); border-radius: 7px;
  overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}
.serve-play .patience .fill { height: 100%; width: 100%; background: linear-gradient(90deg,#3fcf6e,#8fe35a); transition: width .12s linear; }
.serve-play .patience .fill.urgent { background: linear-gradient(90deg,#ff9a3c,#ff4d5e); animation: timerFlash .6s infinite; }
.customer.happy-leave { animation: happyLeave .5s ease-in forwards; }
.customer.angry-leave { animation: angryLeave .5s ease-in forwards; }
@keyframes happyLeave { to { transform: translateY(-34px) scale(.7); opacity: 0; } }
@keyframes angryLeave { 30%{ transform: translateX(0) rotate(-6deg);} to { transform: translateX(50px) rotate(10deg); opacity: 0; } }

/* wooden counter edge separating café from kitchen */
.counter-edge {
  flex: 0 0 auto; height: 22px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #d99a5c 0%, #bd7d40 55%, #a96c30 100%);
  box-shadow: inset 0 3px 3px rgba(255,255,255,.35), 0 4px 8px rgba(0,0,0,.22);
}
.counter-grain {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(0,0,0,.07) 38px 40px);
}

/* PASS / ready shelf — finished plates */
.ready-shelf {
  flex: 0 0 auto; background: rgba(255,255,255,.4); padding: 8px 10px;
  display: flex; align-items: center; gap: 10px; min-height: 86px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.08);
}
.shelf-label { font-weight: 900; font-size: 13px; color: #8a5a2a; white-space: nowrap; }
.ready-items { display: flex; gap: 10px; flex: 1; overflow-x: auto; min-height: 72px; align-items: center; }
.ready-hint { color: #b08a5a; font-weight: 700; font-size: 12px; font-style: italic; }
.ready-items:has(.ready-item) .ready-hint { display: none; }
.ready-item {
  flex: 0 0 auto; width: 66px; height: 66px; border: none; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #fff 60%, #ececf2 100%);
  border-radius: 50%; padding: 6px; box-shadow: 0 4px 8px rgba(0,0,0,.18), inset 0 0 0 3px #fff;
  position: relative; transition: transform .12s; animation: readyPop .35s cubic-bezier(.2,1.4,.5,1);
}
@keyframes readyPop { from { transform: scale(.3) translateY(10px); opacity: 0; } }
.ready-item::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); pointer-events: none;
}
.ready-item:active { transform: scale(.9); }
.ready-item.q-perfect { box-shadow: 0 0 0 3px #ffcf3a, 0 4px 10px rgba(255,180,40,.5); animation: readyPop .35s cubic-bezier(.2,1.4,.5,1), perfectPulse 1.2s .35s infinite; }
@keyframes perfectPulse { 50% { box-shadow: 0 0 0 5px #ffe08a, 0 4px 12px rgba(255,180,40,.6); } }
.ready-item.q-burnt { filter: brightness(.78) sepia(.35); }
.ready-item.served { animation: servedFly .35s ease-in forwards; }
@keyframes servedFly { to { transform: translateY(-46px) scale(.4); opacity: 0; } }
.ri-art { width: 100%; height: 100%; }
.ri-badge { position: absolute; top: -4px; right: -4px; font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.ready-item.shake, .tray-chip.wrong { animation: shakeX .35s; }
@keyframes shakeX { 20%{transform:translateX(-6px)} 60%{transform:translateX(6px)} 80%{transform:translateX(-3px)} }

/* KITCHEN — menu (dish picker) + prep board */
.kitchen {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px 10px; overflow-y: auto;
  background: linear-gradient(180deg, #f4ddbf, #eccfa6);
}
.kitchen-label { font-weight: 900; font-size: 12px; color: #8a5a2a; padding-left: 2px; }
.menu-bar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; flex: 0 0 auto; }
.menu-item {
  flex: 0 0 auto; width: 84px; border: none; cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #fff3e9); border-radius: 16px; padding: 6px 4px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 3px 6px rgba(0,0,0,.14); transition: transform .12s; border-bottom: 3px solid #f0c69a;
}
.menu-item:active { transform: translateY(2px) scale(.96); }
.mi-art { width: 48px; height: 48px; }
.mi-name { font-size: 10px; font-weight: 800; color: var(--ink); text-align: center; line-height: 1.1; }
.mi-price { font-size: 11px; font-weight: 900; color: #b8860b; background:#fff7d6; border-radius:8px; padding:0 6px; }

.build-panel {
  flex: 1 1 auto; min-height: 128px;
  background:
    repeating-linear-gradient(90deg, #f6e7cf 0 26px, #f0ddbe 26px 28px);
  border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: inset 0 2px 6px rgba(120,80,30,.2), 0 2px 5px rgba(0,0,0,.1);
  border: 3px solid #e3c79b;
}
.build-idle { text-align: center; color: #a07c4a; font-weight: 800; padding: 30px 10px; line-height: 1.5; }
.build-head { display: flex; align-items: center; gap: 8px; }
.build-title { flex: 1; font-weight: 900; color: var(--pink-deep); font-size: 16px; }
.build-cancel { border: none; background: #fff; width: 28px; height: 28px; border-radius: 50%; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-sm); }
.build-steps {
  display: flex; align-items: center; gap: 4px; justify-content: center; flex-wrap: wrap;
  background: rgba(255,255,255,.55); border-radius: 12px; padding: 8px 6px;
}
.bstep {
  width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px;
  background: #fff; border-radius: 12px; opacity: .45; box-shadow: 0 2px 3px rgba(0,0,0,.1);
}
.bstep.active { opacity: 1; outline: 3px solid var(--pink); animation: pulse 1s infinite; }
.bstep.done { opacity: 1; background: #d6ffe2; outline: 2px solid #8fe0a8; }
.bstep-arrow { color: #c9a87a; font-weight: 900; }
.build-prompt { text-align: center; font-weight: 800; color: #8a5a2a; font-size: 13px; }
.build-tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tray-chip {
  border: none; cursor: pointer; background: linear-gradient(180deg,#fff,#fff1f7); border-radius: 16px;
  padding: 8px 10px; font-size: 26px; box-shadow: 0 3px 5px rgba(0,0,0,.14);
  display: flex; flex-direction: column; align-items: center; min-width: 60px; border-bottom: 3px solid #ffd0e6;
}
.tray-chip small { font-size: 9px; font-weight: 800; color: #888; margin-top: 1px; }
.tray-chip:active { transform: translateY(2px) scale(.95); }

/* cook timing */
.cook-zone { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 6px 0; }
.cook-bar {
  width: 92%; height: 30px; background: #f3e6d2; border-radius: 15px; position: relative; overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.18);
}
.cook-perfect {
  position: absolute; left: 72%; width: 22%; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, #9be15d, #9be15d 7px, #7ed957 7px, #7ed957 14px);
  opacity: .9; box-shadow: inset 0 0 0 2px #5db84a;
}
.cook-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg,#ffd07a,#ff7a3c); border-right: 3px solid #d8400a;
}
.cook-btn {
  border: none; cursor: pointer; background: var(--pink); color: white;
  font-weight: 900; font-size: 17px; padding: 13px 26px; border-radius: 18px;
  box-shadow: 0 4px 0 #d44b86, 0 5px 8px rgba(0,0,0,.2); animation: pulse 1s infinite;
}
.cook-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d44b86; }

/* results */
.serve-results { align-items: center; justify-content: center; text-align: center; }
.serve-results h2 { font-size: 28px; color: var(--pink-deep); margin: 0; }
.result-stars { display: flex; gap: 10px; font-size: 52px; }
.rstar { opacity: .35; transform: scale(.6); }
.rstar.on { opacity: 1; animation: starPop .5s ease-out forwards; }
@keyframes starPop { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.3); } 100% { transform: scale(1) rotate(0); } }
.result-coins { font-size: 24px; font-weight: 900; color: #b8860b; }
.result-goal { font-weight: 700; color: #777; }
.result-bonus { background: white; border-radius: 14px; padding: 10px 16px; font-weight: 800; color: var(--pink-deep); box-shadow: var(--shadow-sm); }
.result-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.rbtn { border: none; cursor: pointer; font-weight: 900; font-size: 16px; padding: 12px 22px; border-radius: 16px; box-shadow: var(--shadow-sm); }
.rbtn.replay { background: white; color: var(--ink); }
.rbtn.next { background: var(--mint); color: #0a5a36; }
.rbtn.done { background: var(--pink-soft); color: var(--pink-deep); }

/* ========================================================================
   SPECIAL ORDERS — silly customer reacts live while you make their treat
   ===================================================================== */
/* emoji-art station tile on the menu (no PNG) */
.station-art-emoji {
  display: grid; place-items: center;
  font-size: clamp(38px, 6vw, 60px);
  width: 100%; height: clamp(64px, 8.5vw, 104px);
  background: radial-gradient(circle at 50% 38%, #fff, #ffe4f1);
  border-radius: 18px; box-shadow: var(--shadow-sm);
}

.special:not(.station) {
  position: relative; height: 100%; display: flex; flex-direction: column;
  padding: 10px; gap: 8px; overflow: hidden;
  background: linear-gradient(180deg, #fff2c9 0%, #ffe0ef 55%, #f1e0ff 100%);
}
.special .srv-back {
  align-self: flex-start; border: none; border-radius: 14px; padding: 7px 14px;
  font-weight: 800; font-size: 15px; cursor: pointer; background: #fff; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.special-stage { flex: 1; display: flex; gap: 10px; min-height: 0; }
@media (max-width: 560px) { .special-stage { flex-direction: column; } }

/* customer panel */
.cust-panel {
  flex: 0 0 38%; max-width: 300px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; padding: 12px 10px;
  background: rgba(255,255,255,.55); border-radius: 22px; box-shadow: var(--shadow-sm);
  position: relative;
}
@media (max-width: 560px) { .cust-panel { flex: 0 0 auto; max-width: none; flex-direction: row; flex-wrap: wrap; justify-content: center; } }
.cust-avatar {
  font-size: clamp(56px, 12vw, 92px); line-height: 1;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.18));
}
.cust-avatar.react-love { animation: custLove .5s ease; }
.cust-avatar.react-hate { animation: custHate .5s ease; }
.cust-avatar.react-meh  { animation: custMeh .4s ease; }
@keyframes custLove { 0%{transform:scale(1)} 40%{transform:scale(1.25) rotate(-6deg)} 70%{transform:scale(1.1) rotate(5deg)} 100%{transform:scale(1)} }
@keyframes custHate { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px) rotate(-4deg)} 60%{transform:translateX(9px) rotate(4deg)} }
@keyframes custMeh  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.cust-name { font-weight: 900; font-size: 16px; color: var(--pink-deep); text-align: center; }
.cust-bubble {
  background: #fff; border-radius: 16px; padding: 10px 14px; font-weight: 800;
  color: var(--ink); font-size: 14px; text-align: center; line-height: 1.35;
  box-shadow: 0 4px 10px rgba(150,70,110,.18); position: relative; border: 2.5px solid #ffe0ef;
  min-height: 44px; width: 100%;
}
.cust-bubble::before {
  content: ''; position: absolute; top: -9px; left: 50%; width: 15px; height: 15px;
  transform: translateX(-50%) rotate(45deg); background: #fff;
  border-left: 2.5px solid #ffe0ef; border-top: 2.5px solid #ffe0ef;
}
.cust-bubble.pop { animation: bubblePop .3s ease; }
@keyframes bubblePop { 0%{transform:scale(.85)} 60%{transform:scale(1.06)} 100%{transform:scale(1)} }
.mood { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: auto; }
.mood-emoji { font-size: 26px; }
.mood-bar { flex: 1; height: 16px; background: #fff; border-radius: 9px; overflow: hidden; box-shadow: inset 0 2px 3px rgba(0,0,0,.12); }
.mood-fill { height: 100%; width: 50%; background: linear-gradient(90deg,#ffd166,#ffb84d); transition: width .25s ease, background .25s ease; }
.combo {
  --combo-hue: 30;
  font-weight: 900; font-size: 14px; color: #fff; text-align: center;
  padding: 4px 12px; border-radius: 14px; width: 100%;
  background: linear-gradient(90deg, hsl(var(--combo-hue),95%,55%), hsl(calc(var(--combo-hue) + 15),95%,60%));
  box-shadow: 0 3px 8px rgba(255,120,40,.4);
}
.combo.pop { animation: comboPop .4s cubic-bezier(.2,1.6,.5,1); }
@keyframes comboPop { 0%{transform:scale(.6) rotate(-4deg)} 60%{transform:scale(1.15) rotate(3deg)} 100%{transform:scale(1)} }
.sr-combo { font-weight: 900; color: #e8590c; font-size: 15px; }

/* make panel */
.make-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* step guide */
.step-bar { display: flex; gap: 6px; justify-content: center; }
.step {
  font-weight: 900; font-size: 12px; color: #b58aa3; background: rgba(255,255,255,.55);
  padding: 4px 10px; border-radius: 12px; transition: all .2s;
}
.step.active { color: #fff; background: var(--pink); box-shadow: 0 2px 6px rgba(212,75,134,.35); transform: scale(1.05); }
.step.done { color: #5aa06f; background: #e3f7e8; }
.step.done::after { content: ' ✓'; }

/* SQUARE dish stage — SVG fills it so the topping overlay lines up 1:1 */
.dish-stage {
  position: relative; width: 100%; max-width: 260px; aspect-ratio: 1 / 1;
  margin: 0 auto; align-self: center; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 60%, #ffffff, #ffeaf6 80%);
  border-radius: 20px; box-shadow: inset 0 2px 8px rgba(0,0,0,.06); overflow: hidden;
  touch-action: none;
}
.dish-svg { width: 100%; height: 100%; display: block; }
.topping-layer { position: absolute; inset: 0; pointer-events: none; }
.drop-hint {
  position: absolute; left: 50%; top: 10%; transform: translateX(-50%);
  font-weight: 800; font-size: 12px; color: #b07a96; background: rgba(255,255,255,.8);
  padding: 4px 10px; border-radius: 12px; pointer-events: none; white-space: nowrap;
  animation: pulse 1.6s ease-in-out infinite;
}
.placed-top {
  position: absolute; transform: translate(-50%,-50%);
  font-size: clamp(20px, 9vw, 30px); filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
.placed-top.drop { animation: topDrop .35s cubic-bezier(.2,1.5,.5,1); }
@keyframes topDrop { from { transform: translate(-50%,-180%) scale(.4); opacity: 0; } }

/* the object that follows the finger while dragging — JS drives its transform
   (velocity tilt + mass easing); these keyframes handle pickup/landing */
.drag-ghost {
  position: fixed; transform: translate(-50%,-58%) scale(.6); z-index: 1200;
  font-size: 40px; pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.3));
}
.drag-ghost.landing { animation: ghostLand .18s ease-out forwards; }
@keyframes ghostLand {
  40%  { transform: translate(-50%,-58%) scale(1.5, .8); opacity: 1; }
  100% { transform: translate(-50%,-45%) scale(.9, 1.05); opacity: 0; }
}
.drag-ghost.fizzle { animation: ghostFizzle .18s ease-in forwards; }
@keyframes ghostFizzle {
  100% { transform: translate(-50%,-58%) scale(.3); opacity: 0; }
}
.flourishes .top-btn.flourish { background: linear-gradient(180deg,#fff,#fff6e0); border-bottom-color: #ffe0a0; }

/* ---- Sticker book (gallery) ---- */
.gallery .sticker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; margin-top: 8px;
}
.sticker {
  background: #fff; border-radius: 18px; padding: 8px; text-align: center;
  box-shadow: var(--shadow-sm); border: 3px solid #ffe0ef;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.dish-stage.mini {
  width: 100%; max-width: 120px; aspect-ratio: 1 / 1; position: relative;
  background: radial-gradient(circle at 50% 60%, #fff, #ffeaf6 80%);
  border-radius: 14px; overflow: hidden; margin: 0;
}
.dish-stage.mini .placed-top { font-size: clamp(11px, 4.5vw, 16px); }
/* ramen bowl sticker (hand-drawn art + tinted broth interior) */
.ramen-thumb {
  width: 100%; max-width: 120px; aspect-ratio: 1 / 1; position: relative; margin: 0 auto;
}
.ramen-thumb > img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.15));
}
.ramen-thumb .rt-inner {
  position: absolute; left: 17%; right: 17%; top: 25%; bottom: 43%;
  border-radius: 50%; overflow: hidden;
}
.ramen-thumb .rt-noodle {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  font-size: clamp(16px, 7vw, 24px);
}
.ramen-thumb .placed-top {
  font-size: clamp(10px, 4vw, 15px); filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
.sticker-stars { font-size: 15px; letter-spacing: 1px; }
.sticker-name { font-weight: 800; font-size: 11px; color: var(--pink-deep); line-height: 1.2; }
.gallery-empty {
  text-align: center; padding: 30px 16px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; color: var(--ink);
}
.gallery-empty-emoji { font-size: 64px; }
.gallery-empty p { font-weight: 800; margin: 0; }
.gallery-empty-sub { font-weight: 600 !important; font-size: 13px; color: #9a5a7a; }
.gallery-empty .mk-btn { margin-top: 8px; }

.make-controls {
  background: rgba(255,255,255,.6); border-radius: 18px; padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 5px;
}
.ctrl-label { font-weight: 900; font-size: 12px; color: #9a5a7a; }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.18); transition: transform .1s;
}
.swatch:active { transform: scale(.9); }
.swatch.sel { outline: 3px solid var(--pink); outline-offset: 1px; transform: scale(1.12); }
.top-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.top-btn {
  width: 40px; height: 40px; border: none; border-radius: 13px; cursor: pointer;
  background: linear-gradient(180deg,#fff,#fff1f7); font-size: 22px;
  box-shadow: 0 2px 4px rgba(0,0,0,.14); border-bottom: 3px solid #ffd0e6; transition: transform .1s;
}
.top-btn:active { transform: translateY(2px) scale(.95); }
.make-actions { display: flex; gap: 8px; margin-top: 3px; }
.mk-btn { border: none; border-radius: 15px; font-weight: 900; font-size: 15px; cursor: pointer; padding: 11px 16px; box-shadow: var(--shadow-sm); }
.mk-btn.clear { background: #fff; color: var(--ink); }
.mk-btn.serve { flex: 1; background: var(--pink); color: #fff; box-shadow: 0 4px 0 #d44b86, 0 5px 8px rgba(0,0,0,.18); }
.mk-btn.serve:active { transform: translateY(3px); box-shadow: 0 1px 0 #d44b86; }

/* result overlay */
.special-result {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(40,20,40,.45); z-index: 20; animation: fadeIn .25s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
.sr-card {
  background: linear-gradient(180deg,#fff,#fff3fa); border-radius: 26px; padding: 22px 26px;
  text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,.3); max-width: 86%;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  animation: srPop .35s cubic-bezier(.2,1.4,.5,1);
}
@keyframes srPop { from { transform: scale(.7); opacity: 0; } }
.sr-face { font-size: 64px; }
.sr-stars { display: flex; gap: 8px; font-size: 40px; }
.sr-star { opacity: .4; transform: scale(.6); }
.sr-star.on { opacity: 1; animation: starPop .5s ease-out forwards; }
.sr-line { font-weight: 900; color: var(--pink-deep); font-size: 18px; }
.sr-coins { font-weight: 900; color: #b8860b; font-size: 20px; }
.sr-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ---- THE PANTRY: ingredients live on shelves + the counter, not in a menu ---- */
.pantry { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  --jar: clamp(26px, min(6cqw, 9cqh), 68px); --cjar: clamp(48px, min(8.8cqw, 15cqh), 96px); --plum: #5a2d4c; }

/* the HUTCH: a pastel beadboard wall unit with a scalloped valance and bunting,
   parked between the watcher (left) and the order ticket (right) */
.pantry .hutch {
  position: absolute; top: 1.5cqh; left: max(20%, 205px); right: max(24%, 250px);
  display: flex; flex-direction: column; gap: 2.5cqh; padding: max(14px, 4.5cqh) 12px 2cqh;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 10px, rgba(233,200,222,.35) 10px 12px),
    linear-gradient(180deg, #fff1f8, #f6dbeb);
  border: 3px solid #b98cb0; border-radius: 16px 16px 10px 10px;
  box-shadow: 0 10px 18px rgba(90,40,80,.14), inset 0 -8px 0 rgba(90,40,80,.06);
}
.pantry .hutch::before {                 /* scalloped valance */
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 16px;
  background: radial-gradient(circle at 50% 0, #ffd1e6 0 8px, transparent 9px) 0 0 / 22px 16px repeat-x;
  filter: drop-shadow(0 2px 0 #b98cb0);
}
.pantry .bunting { position: absolute; left: -6%; right: -6%; top: -8px; width: 112%; height: min(40px, 8cqh); overflow: visible; }
.pantry .shelf {
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  gap: .9cqw; padding: 0 6px 1.6cqh;
}
.pantry .shelf::after {                  /* the board: light top edge + darker front face */
  content: ""; position: absolute; left: -6px; right: -6px; bottom: -4px; height: 12px; border-radius: 4px;
  background: linear-gradient(180deg, #fff 0 35%, #e5c4dc 35%, #cfa6c5);
  border: 2.5px solid var(--plum); box-shadow: 0 6px 8px rgba(90,40,80,.18);
}
.pantry .shelf::before {                 /* two brackets under the board */
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -14px; height: 10px; pointer-events: none;
  background:
    linear-gradient(135deg, #e5c4dc 50%, transparent 50%) left  bottom / 12px 10px no-repeat,
    linear-gradient(225deg, #e5c4dc 50%, transparent 50%) right bottom / 12px 10px no-repeat;
}

/* items: the drawn container IS the button */
.pantry .item.ing, .pantry .item.ing.dye {
  pointer-events: auto; position: relative; background: none; border: none; box-shadow: none; padding: 0;
  display: block; width: calc(var(--jar) * var(--cw, 1)); height: auto; cursor: grab; touch-action: none;
  filter: drop-shadow(0 4px 3px rgba(90,40,80,.22));
  transition: transform .15s;
}
.pantry .item.ing > .container { display: block; width: 100%; height: auto; overflow: visible; --cw: 1; }
.pantry .item.ing:hover { transform: translateY(-2px) scale(1.04); }
.pantry .item.ing:active { transform: scale(.94); }
/* each container type has its own footprint (a sack is wider than a bottle) */
.pantry .item.ing:has(.container-sack)   { --cw: 1.18; } .pantry .item.ing:has(.container-shaker) { --cw: .86; }
.pantry .item.ing:has(.container-carton) { --cw: .92; }  .pantry .item.ing:has(.container-eggbox) { --cw: 1.4; }
.pantry .item.ing:has(.container-basket) { --cw: 1.28; } .pantry .item.ing:has(.container-cup)    { --cw: .9; }
.pantry .item.ing:has(.container-tub)    { --cw: 1.12; } .pantry .item.ing:has(.container-bottle) { --cw: .64; }

/* the basics on the counter, big, either side of the bowl, with contact shadows */
.pantry .counter-items {
  position: absolute; bottom: 9.5cqh; display: flex; align-items: flex-end; gap: 1.4cqw;
}
.pantry .counter-left  { left: 3%; }
.pantry .counter-right { right: 3%; }
.pantry .counter-items .item.ing { width: calc(var(--cjar) * var(--cw, 1)); }
.pantry .counter-items .item.ing::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -5px; height: 9px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(90,40,80,.28), transparent 70%); z-index: -1;
}

/* food coloring: a caddy (tray with a handle) above the right-hand counter items */
.pantry .dye-caddy {
  position: absolute; right: 3%; bottom: calc(9.5cqh + var(--cjar) * 1.25 + 26px);
  padding: 14px 8px 4px; border-radius: 10px;
  background: linear-gradient(180deg, #fff1f8, #f3d3e6); border: 2.5px solid var(--plum);
  box-shadow: 0 6px 8px rgba(90,40,80,.16);
}
.pantry .dye-caddy::before {             /* handle */
  content: ""; position: absolute; left: 50%; top: -12px; width: 44%; height: 16px; transform: translateX(-50%);
  border: 2.5px solid var(--plum); border-bottom: none; border-radius: 10px 10px 0 0; background: #ffd1e6;
}
.pantry .dye-rack { gap: 3px; padding: 0; }
.pantry .dye-rack::before, .pantry .dye-rack::after { display: none; }
.pantry .item.ing.dye.sel { filter: drop-shadow(0 0 6px var(--pink-deep)) drop-shadow(0 4px 3px rgba(90,40,80,.22)); }

/* drawer fronts on the counter's face */
.pantry .counter-front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 12.5cqh;
  display: flex; gap: 2.2%; padding: 1.6cqh 3% 1.4cqh; z-index: -1;
}
.pantry .drawer {
  flex: 1; border-radius: 9px; position: relative;
  background: linear-gradient(180deg, #fbe4f1, #e9c2dc); border: 2.5px solid #b98cb0;
  box-shadow: inset 0 -4px 0 rgba(90,40,80,.08);
}
.pantry .drawer::after {                 /* knob */
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #fff; border: 2.5px solid var(--plum);
}
.pantry .item.locked { opacity: .55; filter: grayscale(.5); cursor: not-allowed; }
.pantry .item.locked .lock-tag { right: -4px; bottom: 6px; }

/* ---- VECTOR ICONS: no emoji in the cooking loop ---- */
.ico { display: inline-block; vertical-align: middle; overflow: visible; }
.drag-ghost .ico, .cake-canvas .topping .ico, .bowl-artful .chunk .ico, .pan-card .pan-emoji .ico, .counter-pan-emoji .ico, .watcher-food .ico { display: block; }
.order-ticket .ot-chip .ico { width: 22px; height: 22px; }
.order-ticket small .ico { width: 14px; height: 14px; }
.order-ticket .ot-emoji { display: inline-block; }
.order-ticket .ot-emoji .puppet { width: 40px; height: 42px; display: block; }
.tray .item .ico, .dec-panel .item .ico { display: block; margin: auto; }
.reveal .buyer .face .rv-mood { font-size: 30px; line-height: 1; margin-left: -10px; }

/* ---- PUPPETS: rigged vector customers ---- */
.puppet { display: block; overflow: visible; }
.watcher.has-puppet .watcher-face { position: relative; font-size: 0; line-height: 0; }
.watcher .puppet { width: clamp(88px, 12vw, 132px); height: auto; filter: drop-shadow(0 5px 6px rgba(90,40,80,.25)); }
.reveal .buyer .face .puppet { width: 86px; height: auto; }
.pp-eyes { transform-box: fill-box; transform-origin: 50% 55%; animation: ppBlink 4.6s ease-in-out infinite; }
.puppet:nth-of-type(2n) .pp-eyes { animation-delay: 1.3s; }
@keyframes ppBlink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.06); } 97% { transform: scaleY(1); } }
.pp-head { transform-box: fill-box; transform-origin: 50% 100%; animation: ppSway 3.6s ease-in-out infinite alternate; }
@keyframes ppSway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.pp-body { transform-box: fill-box; transform-origin: 50% 100%; animation: ppBreathe 2.6s ease-in-out infinite alternate; }
@keyframes ppBreathe { from { transform: scaleY(1); } to { transform: scaleY(1.02); } }
.reveal .puppet .pp-head, .order-ticket .puppet .pp-head { animation: none; }
/* one mouth per mood */
.puppet .pp-mouth > * { display: none; }
.puppet[data-mood="happy"] .m-smile, .puppet[data-mood="excited"] .m-open, .puppet[data-mood="yum"] .m-yum,
.puppet[data-mood="grossed"] .m-grossed, .puppet[data-mood="o"] .m-o, .puppet[data-mood="flat"] .m-flat { display: block; }
.pp-brows, .b-left, .b-right { transform-box: fill-box; transform-origin: center; transition: transform .2s; }
.puppet[data-mood="excited"] .pp-brows, .puppet[data-mood="o"] .pp-brows { transform: translateY(-7px); }
.puppet[data-mood="grossed"] .b-left { transform: rotate(14deg); }
.puppet[data-mood="grossed"] .b-right { transform: rotate(-14deg); }
.puppet[data-mood="grossed"] .pp-blush { opacity: .15; }
.puppet[data-mood="excited"] .pp-eyes { transform: scale(1.08); animation: none; }
/* talking: the mouth flaps while the bubble is up */
.watcher.talking .puppet .pp-mouth > * { display: none; }
.watcher.talking .puppet .m-open { display: block; transform-box: fill-box; transform-origin: 50% 0; animation: ppTalk .16s ease-in-out infinite alternate; }
@keyframes ppTalk { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.watcher.excited .pp-body { animation: ppHop .5s cubic-bezier(.3,1.4,.5,1) infinite; }
@keyframes ppHop { 0%, 100% { transform: translateY(0) scaleY(1); } 40% { transform: translateY(-8px) scaleY(1.04); } 70% { transform: translateY(0) scaleY(.96); } }
/* eating: chew */
.watcher.eating .puppet .pp-mouth > * { display: none; }
.watcher.eating .puppet .m-open { display: block; transform-box: fill-box; transform-origin: 50% 0; animation: ppTalk .26s ease-in-out infinite alternate; }
.watcher.eating .pp-head { animation: ppChew .26s ease-in-out infinite alternate; }
@keyframes ppChew { from { transform: translateY(0); } to { transform: translateY(3px) scaleY(.97); } }
.watcher.has-puppet .watcher-food { left: 70%; top: 40%; }

/* the score card's preview is the real decorated treat, scaled to fit */
.reveal .preview .main.has-shot { width: 150px; height: 150px; font-size: 0; position: relative; overflow: visible; }
.reveal .preview .main .rv-shot {
  position: absolute; left: 50%; top: 50%; transform-origin: center;
  background: none; box-shadow: none; border-radius: 0; pointer-events: none;
}
.reveal .preview .main .rv-shot .drop-hint, .reveal .preview .main .rv-shot .paint-cursor { display: none; }

/* ---- the mix stage (js/mix/) sits over the bake shell during step 1 ---- */
.bake.mixing > :not(.mixstage-wrap) { visibility: hidden; }
.mixstage-wrap {
  position: absolute; inset: 0; z-index: 30; overflow: hidden;
  background: linear-gradient(180deg, #fff8fb 0%, #ffeaf3 72%, #f0d3e3 72%, #e3bcd2 100%);
  transition: opacity .42s ease;
}
.mixstage-wrap.leaving { opacity: 0; pointer-events: none; }
.mixstage-wrap .mxs { position: absolute; }

/* ---- top bar: drawn icons in pastel circles (no emoji); it floats over the
   bake scene so the kitchen runs edge to edge ---- */
#topbar .back { display: flex; align-items: center; justify-content: center; color: #fff; padding: 0; }
#topbar .back svg { display: block; }
#topbar .back[data-go="recipes"]  { background: #ffb6cf; }
#topbar .back[data-go="gallery"]  { background: #ff8fb1; }
#topbar .back[data-go="trophies"] { background: #ffd76a; color: #fff; }
#topbar .back[data-go="shopUnlock"] { background: #c9b6ff; color: #fff; }
#topbar #muteBtn { background: #ff9fc6; }
#topbar .pill { display: flex; align-items: center; gap: 6px; color: #5a2d4c; }
#topbar .pill-ico { display: block; }
body.scene-bake #topbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(255,248,251,.9), rgba(255,248,251,0));
  backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none;
}

/* ---- BAKE: full-screen kitchen for every step (matches the mix stage) ----
   The top bar floats over the scene (only its buttons take taps); the wall
   runs edge to edge; the steps are one small pill in the bar's free middle. */
body.scene-bake #topbar { background: none; pointer-events: none; }
body.scene-bake #topbar > * { pointer-events: auto; }
body.scene-bake .bake:not(.station) {
  padding: 0; gap: 0; grid-template-rows: minmax(0, 1fr) auto auto;
  background: linear-gradient(180deg, #ecc9dc 0%, #e3bcd2 100%);
}
body.scene-bake .bake .steps {
  position: absolute; top: 10px; left: calc(50% - 58px); transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 8px; box-sizing: border-box;
  border-radius: 19px; background: rgba(255,255,255,.96); box-shadow: 0 3px 0 rgba(90,40,80,.14);
  counter-reset: bstep;
}
body.scene-bake .bake .step {
  counter-increment: bstep; position: relative; flex: none;
  width: 20px; height: 20px; padding: 0; border-radius: 50%; box-shadow: none; opacity: 1;
  background: #f7dbe9; color: transparent; font-size: 0; overflow: hidden;
}
body.scene-bake .bake .step::before {
  content: counter(bstep); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #c79bb6;
}
body.scene-bake .bake .step.done { background: #5aa06f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 L5.2 8.4 L9 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
body.scene-bake .bake .step.done::before { content: none; }
body.scene-bake .bake .step.on {
  width: auto; height: 26px; padding: 0 10px; border-radius: 13px; overflow: visible;
  background: #ff8fb1; color: #fff; font-size: 12px; font-weight: 900; display: flex; align-items: center; white-space: nowrap;
}
body.scene-bake .bake .step.on::before { content: none; }
body.scene-bake .bake .workspace {
  border-radius: 0; box-shadow: none;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.9), rgba(255,255,255,0) 50%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 2.5px, transparent 2.5px 46px) 0 71% / 100% 24% no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.85) 0 2.5px, transparent 2.5px 46px) 0 71% / 100% 24% no-repeat,
    linear-gradient(#fce6f0, #fce6f0) 0 71% / 100% 24% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M16 23 C10 19 9 15 12 13.3 C14 12.3 15.4 13.2 16 14.5 C16.6 13.2 18 12.3 20 13.3 C23 15 22 19 16 23 Z' fill='%23ffd7e8'/%3E%3Cpath d='M48 55 C42 51 41 47 44 45.3 C46 44.3 47.4 45.2 48 46.5 C48.6 45.2 50 44.3 52 45.3 C55 47 54 51 48 55 Z' fill='%23ffd7e8'/%3E%3C/svg%3E") 0 0 / 64px 64px repeat,
    linear-gradient(180deg, #fff8fb 0%, #ffeaf3 100%);
}
/* the customer and the ticket sit just under the floating bar, like in the mix */
body.scene-bake .bake .order-ticket {
  top: 60px; right: 14px; transform: none; border-radius: 14px;
  background: #fff8d6; border: 2px dashed #e6c86a; box-shadow: 0 4px 8px rgba(90,40,80,.14);
}
body.scene-bake .bake .order-ticket.ot-mini { transform: scale(.78); transform-origin: top right; }
body.scene-bake .bake .order-ticket.hit { animation: ticketHitFlat .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes ticketHitFlat { 40% { transform: scale(1.1); } }
body.scene-bake .bake .watcher { top: 60px; left: 12px; }
body.scene-bake .bake .tray { margin: 8px 12px 0; border-radius: 18px; box-shadow: 0 4px 0 rgba(90,40,80,.12); }
body.scene-bake .bake .tray[hidden], body.scene-bake .bake .tray:empty { display: none; }
body.scene-bake .bake .actions { padding: 8px 14px 12px; align-items: center; }
body.scene-bake .bake .hint { color: #5a2d4c; }
body.scene-bake .bake .actions .btn {
  background: linear-gradient(180deg, #ffb6cf, #ff8fb1); color: #fff; border: 3px solid #fff; border-radius: 30px;
  box-shadow: 0 5px 0 #d97aa0, 0 8px 14px rgba(90,40,80,.22); padding: 12px 28px; min-height: 56px; font-size: 21px; font-weight: 900;
}
body.scene-bake .bake .actions .btn[disabled] { background: #f3d6e4; color: #fff; box-shadow: 0 5px 0 #e2b9cd; opacity: 1; }
#tempVal .pip, #timeVal .pip { display: inline-block; vertical-align: -1px; margin-left: 1px; }
/* decorate tabs: drawn icon + word */
.bake .ing-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.bake .ing-tab svg { width: 22px; height: 22px; flex: none; display: block; }
.bake .shape-pick svg, .bake .sprinkle-pick svg, .bake .dec-tool svg { display: block; margin: auto; }
.guide-hand svg { display: block; }
/* decorate: the treat sits on the counter in the kitchen, not on a card */
body.scene-bake .bake .cake-canvas { background: transparent; box-shadow: none; }
/* reveal card: drawn stars / coins / hearts sit on the text line */
.reveal .rv-ico, .reveal .badge svg, .reveal .os-text svg { display: inline-block; vertical-align: -3px; }
.reveal .os-star svg { display: block; }
.reveal .orbit svg { display: block; }
/* reveal card in the full-screen kitchen: starts below the floating bar,
   plum-tinted dim, stars in a row, name tag tucked under the face */
body.scene-bake .bake .reveal { padding: 62px 18px 14px; background: rgba(90,45,76,.45); }
.order-stars .os-row { display: flex; justify-content: center; gap: 4px; }
.order-stars .os-star { display: inline-block; }
.reveal .buyer { position: relative; }
.reveal .buyer .cust-name { position: absolute; left: 8px; bottom: -8px; margin: 0; background: #fff; padding: 1px 8px; border-radius: 999px; box-shadow: 0 2px 4px rgba(90,40,80,.15); white-space: nowrap; }
.reveal .buyer .price { white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.reveal .buyer { margin-bottom: 14px; }
.reveal .card { scrollbar-width: thin; }
/* narrow windows: the customer and the ticket shrink so they crowd the play area less */
@media (max-width: 960px) {
  body.scene-bake .bake .watcher .puppet { width: 72px; }
  body.scene-bake .bake .order-ticket:not(.ot-mini) { transform: scale(.82); transform-origin: top right; }
  body.scene-bake .bake .scoop-wrap-v2 { padding-top: 34px; }
}
/* wide screens: the kitchen continues past the stage edges (only top/bottom are clipped) */
.mixstage-wrap .mxs { overflow: visible; clip-path: inset(0 -3000px); -webkit-clip-path: inset(0 -3000px); }
.mixstage-wrap.entering { opacity: 0; }

/* ---- FREE BAKE on the hub: its station + the My Bakes album pill ---- */
.station.free { animation-delay: .2s; }
.station.free .station-sign { background: linear-gradient(180deg, #d7c2ff, #b39ae8); color: #fff; }
.station.free .station-art svg { filter: drop-shadow(0 0 10px rgba(255,159,198,.85)) drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.cafe-album-pill {
  position: absolute; top: 176px; right: 10px; z-index: 6;
  border: 2px solid #fff; cursor: pointer;
  background: linear-gradient(180deg, #c9b6ff, #a98ce6);
  color: #fff; font-weight: 900; font-size: clamp(12px, 1.6vw, 15px);
  padding: 6px 13px; border-radius: 999px;
  box-shadow: var(--shadow-sm), inset 0 -3px 0 rgba(0,0,0,.1);
}
.cafe-album-pill:active { transform: scale(.95); }

/* ---- FREE BAKE ending: the named instant photo of what you made ---- */
.reveal.creation .card { max-width: 400px; }
.reveal .badge.great { background: linear-gradient(90deg, #ffb6cf, #d7c2ff); color: #5a2d4c; }
.cr-photo {
  position: relative; margin: 8px auto 12px; width: 250px; padding: 12px 12px 58px; box-sizing: border-box;
  background: #fff; border-radius: 6px; transform: rotate(-2deg);
  box-shadow: 0 10px 22px rgba(90,40,80,.22), 0 0 0 1px rgba(90,40,80,.08);
  animation: crDrop .6s cubic-bezier(.3,1.4,.5,1);
}
@keyframes crDrop { from { transform: translateY(-40px) rotate(-8deg); opacity: 0; } to { transform: rotate(-2deg); opacity: 1; } }
.cr-img { width: 226px; height: 226px; border-radius: 4px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #fff, #ffe4f0 75%); }
.cr-img svg { width: 100%; height: 100%; display: block; }
.cr-label { position: absolute; left: 12px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; }
.cr-label span { flex: 1; font-weight: 900; font-size: 17px; color: #5a2d4c; line-height: 1.15; text-align: left; }
.cr-dice { flex: none; width: 42px; height: 42px; border-radius: 12px; border: 2px solid #f4b8d0; background: #fff5fa; display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .2s; }
.cr-dice:active { transform: rotate(40deg) scale(.9); }
.cr-saved { font-weight: 800; font-size: 14px; color: #8a6a86; margin: 2px 0 12px; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* ---- MY BAKES album ---- */
.album {
  position: absolute; inset: 0; overflow-y: auto; padding: 72px 18px 28px; box-sizing: border-box;
  background: radial-gradient(circle at 20% 10%, #fff6fb, #ffe6f1 60%, #f7d6e8);
}
.album-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 980px; margin: 0 auto 18px; }
.album-head h2 { margin: 0; font-size: 30px; font-weight: 900; color: #5a2d4c; }
.album-count { font-weight: 800; color: #8a6a86; flex: 1; }
.album-new {
  border: 3px solid #fff; background: linear-gradient(180deg, #ffb6cf, #ff5fa2); color: #fff;
  font-weight: 900; font-size: 16px; padding: 10px 18px; border-radius: 999px; box-shadow: 0 5px 0 #d9689a; cursor: pointer;
}
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px; max-width: 980px; margin: 0 auto; }
.album-photo {
  position: relative; margin: 0; background: #fff; padding: 10px 10px 12px; border-radius: 5px;
  box-shadow: 0 8px 18px rgba(90,40,80,.18); transform: rotate(var(--r));
  animation: albumIn .45s cubic-bezier(.3,1.4,.5,1) var(--d) both;
}
@keyframes albumIn { from { transform: translateY(20px) rotate(var(--r)) scale(.9); opacity: 0; } to { transform: rotate(var(--r)); opacity: 1; } }
.album-photo img, .album-noimg { display: block; width: 100%; aspect-ratio: 1; border-radius: 3px; object-fit: cover; background: #fff5fa; }
.album-noimg { display: grid; place-items: center; }
.album-photo figcaption { margin-top: 8px; font-weight: 900; font-size: 15px; color: #5a2d4c; line-height: 1.2; }
.album-photo figcaption small { display: block; font-weight: 700; font-size: 12px; color: #a98aa4; margin-top: 2px; }
.album-pin {
  position: absolute; left: 50%; top: -8px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; box-sizing: border-box;
  background: radial-gradient(circle at 35% 35%, #ffd1e6, #ff5fa2 70%); border: 2px solid #5a2d4c;
}
.album-empty { max-width: 420px; margin: 40px auto; text-align: center; color: #5a2d4c; }
.album-empty p { font-weight: 900; font-size: 22px; margin: 10px 0 4px; }
.album-empty .album-sub { font-weight: 700; font-size: 15px; color: #8a6a86; margin-bottom: 18px; }