/* Munch (js/games/snack-safari.js): a hungry monster, its order in a speech bubble,
   and a picnic cloth of food to tap or drag into its mouth. */

.game-room .stage[data-scene="snack-safari"]:has(.munch-scene) {
  height: clamp(360px, calc(100svh - 300px - var(--room-feedback-space, 0px)), 820px);
  min-height: 360px; padding: clamp(8px, 1.2vw, 16px);
}
.game-room .stage[data-scene="snack-safari"]:has(.munch-scene) > .stage-inner { height: 100%; }
.munch-scene {
  position: relative; height: 100%; min-height: 320px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(8px, 2vw, 22px); padding: clamp(10px, 1.6vw, 20px); border-radius: 24px; overflow: hidden;
  background: radial-gradient(ellipse at 80% 110%, #9fdc8f 0 40%, transparent 41%), linear-gradient(180deg, #d7f1ff 0%, #eef9e4 55%, #cfeeb5 100%);
  user-select: none; -webkit-user-select: none;
}
/* the picnic cloth */
.munch-cloth {
  min-height: 0; border-radius: 22px; padding: clamp(10px, 1.6vw, 18px); display: grid; align-content: center;
  background-color: #fff6f2;
  background-image: repeating-linear-gradient(90deg, #f7c6c3 0 22px, transparent 22px 44px), repeating-linear-gradient(0deg, #f7c6c380 0 22px, transparent 22px 44px);
  box-shadow: 0 6px 0 #e3a8a4, inset 0 0 0 4px #fff;
}
.munch-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(74px, 12vh, 104px), 1fr)); gap: clamp(8px, 1.4vw, 14px); justify-items: center; align-content: center; }
.munch-food {
  position: relative; width: clamp(74px, 12vh, 104px); aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; cursor: grab;
  background: radial-gradient(circle at 50% 55%, #fff 0 58%, #f1ece4 59% 64%, #fff 65%); box-shadow: 0 5px 0 #d9cfc4, 0 8px 14px #6b4a3a1a;
  display: grid; place-items: center; touch-action: none; z-index: 1; transition: transform .2s;
  -webkit-tap-highlight-color: transparent;
}
.munch-food.dragging { cursor: grabbing; z-index: 20; transition: none; box-shadow: 0 16px 28px #6b4a3a40; }
.munch-food.eaten { visibility: hidden; }
.munch-food.wait { animation: munch-wait .4s; }
@keyframes munch-wait { 50% { scale: .9; } }
.munch-food.glow { animation: munch-glow 1.2s ease-in-out 3; }
@keyframes munch-glow { 50% { box-shadow: 0 0 0 9px #ffd54f99, 0 5px 0 #d9cfc4; scale: 1.08; } }
.munch-food-face { position: relative; font-size: clamp(40px, 7vh, 60px); line-height: 1; pointer-events: none; }
.munch-letter {
  position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(22px, 3.6vh, 32px)/1 Fredoka, system-ui, sans-serif;
  color: #5b3417; text-shadow: 0 0 4px #fff, 0 0 2px #fff, 0 0 1px #fff;
}
/* the monster's side */
.munch-side { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: end; gap: 6px; }
.munch-bubble {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: clamp(60px, 9vh, 84px); padding: 8px 18px;
  border-radius: 26px; background: #fff; box-shadow: 0 5px 0 #b9d7c4; font: 700 clamp(26px, 4.4vh, 40px)/1 Fredoka, system-ui, sans-serif; color: #264a40;
}
.munch-bubble::after { content: ""; position: absolute; bottom: -14px; left: 50%; border: 10px solid transparent; border-top: 14px solid #fff; transform: translateX(-50%); }
.munch-scene[data-listening="true"] .munch-bubble { animation: munch-say 1.1s ease-in-out infinite; }
@keyframes munch-say { 50% { transform: scale(1.05); } }
.munch-order-face { display: inline-flex; align-items: center; gap: 10px; }
.munch-order-chip { display: inline-flex; align-items: center; gap: 4px; }
.munch-order-chip span, .munch-example, .munch-cookie-call > span { font-size: clamp(34px, 6vh, 52px); }
.munch-plus { color: #7a9b8c; }
.munch-swatch { width: clamp(38px, 6vh, 54px); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 -4px 0 #0000001f, 0 0 0 4px #fff, 0 0 0 6px #264a4022; }
.munch-sound-letter { font-size: clamp(34px, 6vh, 52px); color: #744591; }
.munch-cookie-call { position: relative; display: inline-grid; place-items: center; }
.munch-cookie-call .munch-letter { font-size: clamp(24px, 4vh, 34px); }

.munch-creature { --size: min(100%, clamp(160px, 42vh, 320px)); position: relative; width: var(--size); aspect-ratio: 1; align-self: center; }
.munch-monster { width: 100%; height: 100%; overflow: visible; }
.munch-monster .munch-mouth, .munch-monster .munch-body, .munch-monster .munch-eyes, .munch-monster .munch-pupils { transform-box: fill-box; transform-origin: center; transition: transform .2s; }
.munch-monster .munch-lids { opacity: 0; }
.munch-creature[data-mood="hungry"] .munch-monster { animation: munch-idle 2.6s ease-in-out infinite; }
.munch-creature[data-mood="hungry"] .munch-mouth { transform: scaleY(.75); }
.munch-creature[data-mood="open"] .munch-mouth { transform: scale(1.12, 1.45); }
.munch-creature[data-mood="open"] .munch-eyes { transform: scale(1.06); }
.munch-creature[data-mood="chomp"] .munch-mouth { animation: munch-chomp .34s ease-in-out 2; }
.munch-creature[data-mood="yuck"] .munch-monster { animation: munch-yuck .45s ease-in-out 2; }
.munch-creature[data-mood="yuck"] .munch-mouth { transform: scale(1.1, 1.2); }
.munch-creature[data-mood="yuck"] .munch-lids { opacity: 1; }
.munch-creature[data-mood="happy"] .munch-monster { animation: munch-happy .5s ease-in-out 3; }
.munch-creature[data-mood="happy"] .munch-lids { opacity: 1; transform: translateY(-4px); }
@keyframes munch-idle { 50% { transform: translateY(-2%) rotate(-1deg); } }
@keyframes munch-chomp { 0%, 100% { transform: scaleY(1.1); } 50% { transform: scaleY(.08); } }
@keyframes munch-yuck { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes munch-happy { 50% { transform: translateY(-9%) scale(1.03); } }
.munch-tummy {
  position: absolute; left: 30%; top: 56%; width: 40%; height: 31%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 1px; padding: 4px; pointer-events: none;
}
.munch-bite { position: relative; font-size: clamp(14px, 2.6vh, 22px); line-height: 1; animation: munch-in .3s cubic-bezier(.3, 1.6, .5, 1); }
.munch-bite.had { opacity: .9; animation: none; }
.munch-bite b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 10px Fredoka, sans-serif; color: #5b3417; }
@keyframes munch-in { from { transform: scale(0); } }
.munch-orders { display: flex; gap: 8px; }
.munch-orders i { width: 14px; height: 14px; border-radius: 50%; background: #ffffffa8; box-shadow: inset 0 0 0 2px #264a4033; }
.munch-orders i.done { background: #ffc93c; box-shadow: none; }

/* phones held upright: the monster on top, the food below where thumbs are */
@media (orientation: portrait), (max-width: 700px) {
  .munch-scene { grid-template-columns: 1fr; grid-template-rows: minmax(0, .95fr) minmax(0, 1.05fr); }
  .munch-side { order: -1; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: 1fr; }
  .munch-creature { --size: min(100%, clamp(120px, 24vh, 240px)); }
  .munch-food { width: clamp(64px, 18vw, 92px); }
  .munch-shelf { grid-template-columns: repeat(auto-fill, minmax(clamp(64px, 18vw, 92px), 1fr)); gap: 8px; }
  .munch-food-face { font-size: clamp(34px, 9vw, 52px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .munch-creature { --size: min(100%, 36vh); }
  .munch-food { width: clamp(56px, 14vh, 78px); }
  .munch-shelf { grid-template-columns: repeat(auto-fill, minmax(clamp(56px, 14vh, 78px), 1fr)); }
  .munch-food-face { font-size: clamp(30px, 8vh, 44px); }
}
html.quiet .munch-creature .munch-monster, .munch-scene.paused .munch-monster { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .munch-creature .munch-monster, .munch-scene[data-listening="true"] .munch-bubble { animation: none !important; } }