/* Feed the 5,000 — styles. All in-game sizes use cqw (1% of stage width) so the game scales to any screen. */
:root {
  --cream: #fff7e6; --cream-2: #ffeccd; --brown: #3b2a1a; --brown-2: #6b4a2b;
  --orange: #ff8a3d; --orange-d: #d9651a; --purple: #7b5cff; --green: #43b34a; --green-d: #2f8f36;
  --red: #ff5a5f; --gold: #ffd75e; --blue: #4fc1e0;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: #1a3552; font-family: Fredoka, "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: var(--brown); overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.stage {
  position: relative; width: min(100vw, 160vh); aspect-ratio: 16 / 10; container-type: size; overflow: hidden;
  background: linear-gradient(#6ec3ff 0%, #a9e1ff 45%, #dff4ff 60%);
  user-select: none; -webkit-user-select: none; touch-action: none; font-size: 1.7cqw; line-height: 1.3;
}
.stage.shake { animation: shake .4s; }
@keyframes shake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-1cqw, .4cqw); } 40% { transform: translate(1cqw, -.4cqw); } 60% { transform: translate(-.6cqw, .2cqw); } 80% { transform: translate(.6cqw, -.2cqw); } }
.art { display: block; width: 100%; height: auto; }
.bump { animation: bump .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes bump { 50% { transform: scale(1.15); } }
.pop-in { animation: popin .4s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes popin { from { transform: scale(0); opacity: 0; } }

/* ---- Background scene ---- */
.scene { position: absolute; inset: 0; overflow: hidden; }
.sun { position: absolute; left: 78%; top: 8%; width: 9cqw; height: 9cqw; border-radius: 50%; background: #fff1a8; box-shadow: 0 0 4cqw 2cqw rgba(255, 241, 168, .6), 0 0 12cqw 4cqw rgba(255, 241, 168, .25); animation: sunpulse 4s ease-in-out infinite; }
@keyframes sunpulse { 50% { transform: scale(1.06); } }
.cloud { position: absolute; left: 0; width: 12cqw; height: 4cqw; background: #fff; border-radius: 4cqw; opacity: .92; animation: drift linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 5cqw; height: 5cqw; left: 2cqw; top: -2.5cqw; }
.cloud::after { width: 6.5cqw; height: 6.5cqw; left: 5cqw; top: -3.5cqw; }
.c1 { top: 12%; animation-duration: 75s; }
.c2 { top: 5%; scale: .7; animation-duration: 95s; animation-delay: -30s; }
.c3 { top: 19%; scale: .55; animation-duration: 85s; animation-delay: -60s; }
@keyframes drift { from { translate: -20cqw 0; } to { translate: 110cqw 0; } }
.hills { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.boat { animation: bob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.boat2 { animation-delay: -1.5s; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(2deg); } }

/* ---- HUD ---- */
.hud { position: absolute; left: 0; right: 0; top: 0; height: 8cqw; display: flex; align-items: center; gap: 1cqw; padding: 0 1.5cqw; z-index: 20; }
.pill { background: var(--cream); border: .35cqw solid var(--brown); border-radius: 3cqw; padding: .5cqw 1.6cqw; font-weight: 700; font-size: 1.9cqw; box-shadow: 0 .4cqw 0 rgba(0, 0, 0, .15); display: flex; align-items: center; gap: .6cqw; white-space: nowrap; }
.hud-phase { background: var(--orange); color: #fff; border-color: var(--orange-d); }
.hud-score .star { color: #e0a400; }
.hud-combo { background: var(--purple); color: #fff; border-color: #5a3fd6; }
.hud-timer { margin-left: auto; font-variant-numeric: tabular-nums; min-width: 8cqw; justify-content: center; }
.hud-timer[hidden] + .hud-hearts { margin-left: auto; }
.hud-timer.urgent { background: var(--red); color: #fff; border-color: #c73c41; animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }
.hud-hearts { gap: .4cqw; padding: .5cqw 1cqw; }
.heart { width: 2.6cqw; display: block; transition: transform .3s; }
.heart .art-heart { fill: var(--red); }
.heart.lost .art-heart { fill: #cfc2b0; }
.heart.breaking { animation: heartbreak .7s forwards; }
@keyframes heartbreak { 30% { transform: scale(1.5) rotate(-15deg); } 100% { transform: scale(.7) rotate(20deg); opacity: .6; } }
.icon-btn { cursor: pointer; padding: .4cqw 1cqw; font-size: 2cqw; }

/* ---- Prompt banner ---- */
.prompt { position: absolute; left: 50%; top: 9.5cqw; translate: -50% 0; z-index: 15; background: rgba(255, 247, 230, .96); border: .35cqw solid var(--brown); border-radius: 2cqw; padding: .8cqw 2cqw; font-size: 2.1cqw; font-weight: 600; max-width: 84%; text-align: center; box-shadow: 0 .5cqw 0 rgba(0, 0, 0, .15); pointer-events: none; }
.prompt b { color: var(--orange-d); }

/* ---- Layers ---- */
.play { position: absolute; left: 0; right: 0; top: 8cqw; bottom: 0; z-index: 5; }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.overlay { position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(40, 25, 10, .35); backdrop-filter: blur(2px); }
.panel { background: var(--cream); border: .5cqw solid var(--brown); border-radius: 3cqw; padding: 2.2cqw 3.5cqw; width: min(84cqw, 94%); max-height: 94%; overflow: auto; text-align: center; box-shadow: 0 1cqw 0 rgba(0, 0, 0, .2); animation: panelin .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes panelin { from { transform: scale(.6) translateY(4cqw); opacity: 0; } }

/* ---- Buttons ---- */
.btn { cursor: pointer; border: .4cqw solid var(--orange-d); background: linear-gradient(var(--orange), #ff7a22); color: #fff; font-weight: 700; font-size: 2.2cqw; padding: 1cqw 3cqw; border-radius: 3cqw; box-shadow: 0 .6cqw 0 var(--orange-d), 0 .9cqw 1cqw rgba(0, 0, 0, .2); transition: transform .1s, box-shadow .1s; text-shadow: 0 .15cqw 0 rgba(0, 0, 0, .2); }
.btn:hover { transform: translateY(-.2cqw) scale(1.03); }
.btn:active { transform: translateY(.4cqw); box-shadow: 0 .2cqw 0 var(--orange-d); }
.btn-big { font-size: 3cqw; padding: 1.3cqw 4.5cqw; }
.btn-small { font-size: 1.9cqw; padding: .7cqw 2cqw; }
.btn-hot { background: linear-gradient(#ff6a3d, #e8442a); border-color: #b3301c; box-shadow: 0 .6cqw 0 #b3301c, 0 .9cqw 1cqw rgba(0, 0, 0, .2); }
.btn-ghost { background: #fff; color: var(--brown); border-color: var(--brown); box-shadow: 0 .6cqw 0 var(--brown-2); text-shadow: none; }
.btn-row { display: flex; gap: 1.5cqw; justify-content: center; margin-top: 1.8cqw; flex-wrap: wrap; }

/* ---- Title / tutorial / results panels ---- */
.title-art { display: flex; justify-content: center; align-items: center; gap: 1cqw; margin-bottom: .3cqw; }
.title-art .art { width: 6cqw; }
.title-art .art:nth-child(even) { width: 7.5cqw; }
.title-art .art-person, .title-art .art-person.kid { width: 8cqw; margin: 0; }
.title { font-size: 6.5cqw; margin: 0; line-height: 1.05; color: var(--orange-d); text-shadow: 0 .3cqw 0 #fff, 0 .6cqw 0 rgba(0, 0, 0, .12); letter-spacing: .02em; }
.title span { color: var(--purple); }
.title.win { color: var(--green-d); }
.title.lose { color: var(--purple); }
.subtitle { font-size: 2.6cqw; font-weight: 600; margin: .4cqw 0 1cqw; color: var(--brown-2); }
.intro-row { display: flex; align-items: center; gap: 2cqw; text-align: left; background: var(--cream-2); border-radius: 2cqw; padding: 1cqw 2cqw; margin: 0 auto; max-width: 66cqw; }
.intro-boy { position: relative; flex: 0 0 9cqw; }
.intro-boy .art-person { width: 9cqw; }
.boy-basket { position: absolute; left: 4.5cqw; bottom: 0; width: 6cqw; }
.intro { font-size: 2.1cqw; margin: 0; }
.tiny { font-size: 1.5cqw; opacity: .7; margin: 1cqw 0 0; }
.h2 { font-size: 4cqw; margin: 0 0 1cqw; color: var(--orange-d); }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; text-align: left; }
.step { display: flex; gap: 1.2cqw; align-items: center; background: var(--cream-2); border-radius: 1.5cqw; padding: .8cqw 1.2cqw; }
.step:last-child { grid-column: 1 / -1; }
.step-art { flex: 0 0 9.5cqw; display: flex; gap: .4cqw; align-items: center; justify-content: center; }
.step-art .art { width: 4.5cqw; flex: 0 0 auto; }
.step-title { font-weight: 700; font-size: 2cqw; color: var(--orange-d); }
.step-text { font-size: 1.7cqw; }
.step-text b { color: var(--orange-d); }
.hearts-note { display: flex; justify-content: center; align-items: center; gap: .5cqw; margin-top: 1.2cqw; font-size: 1.9cqw; font-weight: 600; }
.hearts-note .art { width: 2.4cqw; fill: var(--red); }
.final-score { font-size: 2.6cqw; margin: .3cqw 0; font-weight: 600; }
.final-score b { color: var(--orange-d); font-size: 4.2cqw; }
.stats { display: flex; justify-content: center; gap: 1.2cqw; margin: .8cqw 0; flex-wrap: wrap; }
.stats div { background: var(--cream-2); border-radius: 1.5cqw; padding: .6cqw 1.4cqw; font-size: 1.6cqw; min-width: 12cqw; }
.stats span { display: block; font-size: 2.8cqw; font-weight: 700; color: var(--purple); }
.note { font-size: 1.8cqw; margin: .8cqw 0 0; color: var(--brown-2); line-height: 1.35; }
.note span { font-size: 1.5cqw; opacity: .8; }

/* ---- Feedback effects ---- */
.pop { position: absolute; translate: -50% -50%; font-weight: 700; font-size: 2.6cqw; color: #fff; text-shadow: 0 .2cqw 0 var(--brown), 0 0 .8cqw rgba(0, 0, 0, .35); -webkit-text-stroke: .08cqw var(--brown); animation: popup 1s ease-out forwards; white-space: nowrap; z-index: 55; }
.pop.score { color: var(--gold); }
.pop.good { color: #9dff8a; }
.pop.great { color: #ffd75e; font-size: 3.4cqw; }
.pop.bad { color: #ff8a8a; }
.pop.warn { color: #ffd29a; }
.pop.combo { font-size: 6.5cqw; -webkit-text-stroke: .2cqw var(--brown); color: #ffd75e; text-shadow: 0 .5cqw 0 var(--purple), 0 .9cqw 1.5cqw rgba(0, 0, 0, .35); animation: comboPop 1.1s ease-out forwards; }
@keyframes popup { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { transform: translateY(-1cqw) scale(1.15); opacity: 1; } 100% { transform: translateY(-7cqw) scale(1); opacity: 0; } }
@keyframes comboPop { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 20% { transform: scale(1.2) rotate(3deg); opacity: 1; } 40% { transform: scale(1) rotate(0); } 100% { transform: scale(1.1) translateY(-3cqw); opacity: 0; } }
.spark { position: absolute; width: 1cqw; height: 1cqw; border-radius: 50%; background: #fff; translate: -50% -50%; animation: spark .7s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
.star-fx { position: absolute; width: 2.4cqw; translate: -50% -50%; fill: #ffd75e; filter: drop-shadow(0 0 .4cqw rgba(255, 215, 94, .8)); animation: starfly .9s ease-out forwards; }
@keyframes starfly { 0% { transform: translate(0, 0) rotate(0) scale(.2); } 30% { transform: translate(calc(var(--dx) * .4), calc(var(--dy) * .4)) rotate(60deg) scale(1.1); } 100% { transform: translate(var(--dx), var(--dy)) rotate(180deg) scale(0); opacity: 0; } }
.confetti { position: absolute; top: -3cqw; width: 1.4cqw; height: 1cqw; animation: confetti linear forwards; }
@keyframes confetti { to { transform: translate(var(--x), 72cqw) rotate(var(--r)); opacity: .7; } }
.flash { position: absolute; inset: 0; animation: flash .6s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.flyer { position: absolute; translate: -50% -50%; transition-property: left, top, transform; transition-timing-function: cubic-bezier(.3, .8, .4, 1); z-index: 60; }
.banner { position: absolute; left: 50%; top: 40%; translate: -50% -50%; text-align: center; animation: bannerin .5s cubic-bezier(.2, 1.4, .4, 1) both; z-index: 70; white-space: nowrap; }
.banner.out { animation: bannerout .38s ease-in forwards; }
.banner-main { font-size: 7cqw; font-weight: 700; color: #fff; -webkit-text-stroke: .25cqw var(--brown); text-shadow: 0 .6cqw 0 var(--brown), 0 1cqw 2cqw rgba(0, 0, 0, .3); line-height: 1; }
.banner-sub { font-size: 2.6cqw; font-weight: 600; color: var(--cream); background: var(--brown); display: inline-block; padding: .4cqw 2cqw; border-radius: 2cqw; margin-top: 1cqw; }
@keyframes bannerin { from { transform: scale(.3) rotate(-6deg); opacity: 0; } }
@keyframes bannerout { to { transform: scale(1.3); opacity: 0; } }

/* ---- Drag & drop ---- */
.draggable { cursor: grab; transition: transform .15s; }
.draggable:hover { transform: scale(1.06); }
.draggable.selected { outline: .45cqw dashed var(--purple); outline-offset: .3cqw; border-radius: 1.5cqw; animation: pulse .5s infinite alternate; }
.draggable.lifted { opacity: .3; }
.ghost { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 200; opacity: .95; filter: drop-shadow(0 1cqw 1cqw rgba(0, 0, 0, .3)); will-change: transform; }
.ghost.moving { scale: 1.1; }
[data-drop].drop-hover { filter: brightness(1.12) drop-shadow(0 0 1cqw #fff); }

/* ---- Shared bits ---- */
.label { font-weight: 700; font-size: 1.8cqw; background: var(--cream); border: .3cqw solid var(--brown); border-radius: 1.5cqw; padding: .2cqw 1.2cqw; display: inline-block; }
.tray { position: absolute; background: rgba(255, 247, 230, .92); border: .4cqw solid var(--brown); border-radius: 2cqw; padding: .8cqw 1cqw; text-align: center; box-shadow: 0 .5cqw 0 rgba(0, 0, 0, .15); }
.slots { display: flex; gap: .6cqw; justify-content: center; margin-top: .6cqw; flex-wrap: wrap; }
.slot { width: 5.2cqw; height: 4.4cqw; border: .3cqw dashed rgba(59, 42, 26, .4); border-radius: 1cqw; display: flex; align-items: center; justify-content: center; padding: .3cqw; background: rgba(255, 255, 255, .5); }
.slot.filled { border-style: solid; border-color: var(--green); background: #eaffea; }
.bench { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 9cqw, rgba(0, 0, 0, .05) 9cqw 9.5cqw), linear-gradient(#c78a45, #a86c26); border-top: .6cqw solid #8c5a1e; box-shadow: inset 0 1cqw 0 rgba(255, 255, 255, .15); }
.bread-scene, .fish-scene, .miracle-scene, .serve-scene, .baskets-scene { position: absolute; inset: 0; }

/* ---- Person moods ---- */
.art-person .eyes-happy, .art-person .brows-sad, .art-person .cheeks, .art-person .m-happy, .art-person .m-sad, .art-person .m-worried, .art-person .sweat { display: none; }
.mood-happy .art-person .eyes, .mood-happy .art-person .m-neutral { display: none; }
.mood-happy .art-person .eyes-happy, .mood-happy .art-person .cheeks, .mood-happy .art-person .m-happy { display: block; }
.mood-sad .art-person .m-neutral { display: none; }
.mood-sad .art-person .brows-sad, .mood-sad .art-person .m-sad { display: block; }
.mood-worried .art-person .m-neutral { display: none; }
.mood-worried .art-person .m-worried, .mood-worried .art-person .sweat, .mood-worried .art-person .brows-sad { display: block; }
.art-person.kid { width: 78%; margin: 22% auto 0; }

/* ---- Phase 1: Bread ---- */
.dough-station { position: absolute; left: 5%; bottom: 10%; width: 20cqw; text-align: center; }
.dough-slot { position: absolute; left: 50%; bottom: 50%; translate: -50% 0; width: 10cqw; height: 8cqw; z-index: 2; display: flex; align-items: flex-end; justify-content: center; }
.dough { width: 10cqw; }
.dough-station .label { position: absolute; left: 50%; bottom: -3cqw; translate: -50% 0; }
.oven-wrap { position: absolute; left: 50%; bottom: 9%; translate: -50% 0; width: 30cqw; cursor: pointer; transition: transform .15s; }
.oven-wrap.drop-hover { transform: scale(1.04); }
.oven-fire, .oven-fire2 { opacity: .4; transform-box: fill-box; transform-origin: bottom center; animation: flicker .5s infinite alternate; }
.oven-fire2 { animation-delay: -.25s; }
.oven-wrap.hot .oven-fire, .oven-wrap.hot .oven-fire2 { opacity: 1; }
@keyframes flicker { to { transform: scaleY(1.18) scaleX(.94); } }
.meter { position: absolute; left: 50%; top: 24%; translate: -50% 0; width: 32cqw; text-align: center; z-index: 6; }
.meter-bar { position: relative; height: 3.2cqw; border: .4cqw solid var(--brown); border-radius: 1.6cqw; overflow: hidden; display: flex; background: #fff; box-shadow: 0 .4cqw 0 rgba(0, 0, 0, .15); }
.zone.pale { background: #f6e8cc; }
.zone.golden { background: linear-gradient(#ffd75e, #f0b25a); }
.zone.burnt { background: #5a3a22; }
.marker { position: absolute; top: -.4cqw; bottom: -.4cqw; width: 1cqw; background: var(--red); border: .2cqw solid #fff; border-radius: .5cqw; translate: -50% 0; }
.meter .btn { margin-top: 1cqw; }
.bread-scene .tray { right: 4%; bottom: 12%; width: 32cqw; }

/* ---- Phase 2: Fish ---- */
.board-wrap { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; width: 46cqw; }
.fish-area { position: absolute; left: 12%; top: 14%; width: 76%; height: 66%; cursor: pointer; transition: transform .2s; }
.fish-area.wobble .fish-art { animation: wobble .25s infinite alternate; }
@keyframes wobble { from { transform: rotate(-3deg) translateY(-.3cqw); } to { transform: rotate(3deg) translateY(.3cqw); } }
.fish-area.clean { filter: drop-shadow(0 0 1.2cqw rgba(255, 255, 255, .95)); }
.fish-area.drop-hover { transform: scale(1.05); }
.spots { position: absolute; inset: 0; }
.spot { position: absolute; width: 3cqw; height: 2.1cqw; translate: -50% -50%; border-radius: 50%; background: radial-gradient(#93b7cb, #5f8aa3); border: .2cqw solid rgba(255, 255, 255, .55); box-shadow: inset 0 -.3cqw 0 rgba(0, 0, 0, .15); transition: transform .3s, opacity .3s; }
.spot.gone { transform: scale(1.7); opacity: 0; }
.shaker-station { position: absolute; right: 8%; bottom: 16%; width: 9cqw; text-align: center; }
.shaker-station .label { margin-bottom: .5cqw; }
.shaker { width: 8cqw; margin: 0 auto; }
.fish-tray { left: 4%; bottom: 14%; width: 20cqw; }
.fish-tray .slot { width: 7.5cqw; height: 5cqw; }
.herb { position: absolute; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #5a9a40; animation: herbfall .7s ease-in forwards; }
@keyframes herbfall { to { transform: translateY(9cqw) rotate(180deg); opacity: 0; } }

/* ---- Phase 3: Miracle ---- */
.miracle-scene { overflow: hidden; }
.rays { position: absolute; left: 50%; top: 32%; width: 130cqw; height: 130cqw; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, rgba(255, 241, 168, .6) 0 6deg, transparent 6deg 15deg); border-radius: 50%; opacity: 0; transition: opacity 1s; animation: spin 40s linear infinite; -webkit-mask: radial-gradient(circle, #000 0, transparent 55%); mask: radial-gradient(circle, #000 0, transparent 55%); }
.rays.on { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.jesus { position: absolute; left: 50%; top: 2%; translate: -50% 0; width: 20cqw; z-index: 2; transition: filter .8s; }
.jesus.bless { filter: drop-shadow(0 0 2cqw rgba(255, 241, 168, .95)); animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-.8cqw); } }
.onlookers { position: absolute; inset: 0; }
.onlooker { position: absolute; width: 8cqw; bottom: 24%; }
.onlooker.o0 { left: 5%; } .onlooker.o1 { left: 16%; bottom: 20%; } .onlooker.o2 { left: 27%; bottom: 27%; }
.onlooker.o3 { right: 27%; bottom: 27%; } .onlooker.o4 { right: 16%; bottom: 20%; } .onlooker.o5 { right: 5%; }
.cheer { animation: cheer .45s ease-in-out infinite alternate; }
@keyframes cheer { to { transform: translateY(-1.2cqw) rotate(3deg); } }
.offering { position: absolute; left: 50%; top: 40%; translate: -50% 0; width: 16cqw; cursor: pointer; z-index: 3; }
.offering.ready .offer-basket { animation: beckon .8s ease-in-out infinite alternate; filter: drop-shadow(0 0 1cqw #ffd75e); }
@keyframes beckon { to { transform: scale(1.08) translateY(-.6cqw); } }
.offering.glow .offer-basket { filter: drop-shadow(0 0 3cqw #fff1a8) brightness(1.15); }
.tap-hint { position: absolute; left: 50%; top: -3.4cqw; translate: -50% 0; background: var(--purple); color: #fff; font-weight: 700; font-size: 1.9cqw; padding: .3cqw 1.4cqw; border-radius: 1.5cqw; white-space: nowrap; animation: pulse .5s infinite alternate; }
.miracle-count { position: absolute; right: 4%; top: 30%; background: var(--cream); border: .35cqw solid var(--brown); border-radius: 2cqw; padding: .4cqw 1.8cqw; font-size: 2.1cqw; font-weight: 600; z-index: 4; box-shadow: 0 .4cqw 0 rgba(0, 0, 0, .15); }
.miracle-count b { color: var(--orange-d); }
.story { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; width: 72cqw; text-align: center; background: rgba(255, 247, 230, .96); border: .4cqw solid var(--brown); border-radius: 2cqw; padding: .9cqw 2cqw; font-size: 2.4cqw; font-weight: 600; z-index: 4; }
.story .big { font-size: 4.5cqw; color: var(--orange-d); display: block; animation: pulse .6s infinite alternate; }
#mcont { position: absolute; left: 50%; bottom: 20%; translate: -50% 0; z-index: 5; }
.mfood { position: absolute; width: 5cqw; translate: -50% -50%; animation: burst 2.6s cubic-bezier(.2, .8, .3, 1) forwards; z-index: 3; }
@keyframes burst { 0% { transform: translate(0, 0) rotate(0) scale(.2); opacity: 1; } 65% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); opacity: 0; } }

/* ---- Phase 4: Serve ---- */
.fed-bar { position: absolute; left: 1.5cqw; top: 6cqw; width: 30cqw; height: 3.2cqw; border: .4cqw solid var(--brown); border-radius: 2cqw; background: #fff; overflow: hidden; z-index: 6; }
.fed-fill { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #43b34a, #9dff8a); transition: width .4s; }
.fed-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.8cqw; }
.crowd { position: absolute; left: 0; right: 0; top: 0; bottom: 22%; }
.guest { position: absolute; width: 9cqw; translate: -50% -50%; cursor: pointer; transition: transform .2s; }
.guest .art-person { width: 100%; }
.guest.drop-hover { transform: scale(1.1); }
.bubble { position: absolute; left: 50%; bottom: calc(100% - 1cqw); translate: -50% 0; width: 7.5cqw; background: #fff; border: .35cqw solid var(--brown); border-radius: 1.5cqw; padding: .5cqw .6cqw .6cqw; box-shadow: 0 .4cqw 0 rgba(0, 0, 0, .15); z-index: 2; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -1.25cqw; translate: -50% 0; border: .7cqw solid transparent; border-top-color: var(--brown); border-bottom: 0; }
.want .art { width: 5cqw; margin: 0 auto; }
.patience { height: .9cqw; background: #eee; border-radius: .5cqw; overflow: hidden; margin-top: .4cqw; }
.patience i { display: block; height: 100%; background: var(--green); transform-origin: left; transition: background .3s; }
.impatient .patience i { background: var(--red); }
.impatient .bubble { animation: wiggle .3s infinite; }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
.bubble.wiggle { animation: wiggle .2s 2; }
.thanks { font-size: 3.5cqw; color: var(--red); line-height: 1.1; text-align: center; animation: pulse .3s infinite alternate; }
.thanks.sad { color: #888; }
.guest.served { animation: hop .4s ease-out; }
@keyframes hop { 50% { transform: translateY(-2cqw) scale(1.1); } }
.guest.leaving { animation: leave .65s ease-in forwards; }
@keyframes leave { to { transform: translateY(3cqw) scale(.6); opacity: 0; } }
.shake-x { animation: shakex .4s; }
@keyframes shakex { 20%, 60% { transform: translateX(-1cqw); } 40%, 80% { transform: translateX(1cqw); } }
.tray-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 9cqw, rgba(0, 0, 0, .05) 9cqw 9.5cqw), linear-gradient(#c78a45, #a86c26); border-top: .6cqw solid #8c5a1e; }
.foods { display: flex; justify-content: center; gap: 4cqw; height: 100%; align-items: center; }
.food-src { width: 11cqw; background: var(--cream); border: .4cqw solid var(--brown); border-radius: 1.5cqw; padding: .5cqw; text-align: center; box-shadow: 0 .5cqw 0 rgba(0, 0, 0, .2); }
.food-art .art { width: 7cqw; height: 4.5cqw; margin: 0 auto; }
.food-label { font-weight: 700; font-size: 1.7cqw; }

/* ---- Phase 5: Baskets ---- */
.basket-counter { position: absolute; left: 1.5cqw; top: 6cqw; display: flex; align-items: center; gap: 1cqw; background: var(--cream); border: .4cqw solid var(--brown); border-radius: 2cqw; padding: .3cqw 1.6cqw; font-size: 2.4cqw; font-weight: 600; z-index: 6; box-shadow: 0 .4cqw 0 rgba(0, 0, 0, .15); }
.basket-counter .art { width: 4.5cqw; }
.basket-counter b { color: var(--orange-d); }
.field { position: absolute; inset: 6cqw 0 0 0; }
.wild-basket { position: absolute; width: 9cqw; translate: -50% -50%; cursor: pointer; filter: drop-shadow(0 .6cqw .4cqw rgba(0, 0, 0, .25)); }
.wild-basket .art { animation: bobble 1.6s ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes bobble { 50% { transform: translateY(-1cqw) rotate(-4deg); } }
.wild-basket:hover .art { filter: brightness(1.1); }