/* Feed the Monster — theme styles */
.scene.themed { background:linear-gradient(180deg,#B9A3D6 0%, #C7B3DE 44%, #7FCBB4 45%, #6BB8A1 100%); }
#scene-feed.themed { background:linear-gradient(180deg,#B9A3D6 0%, #C7B3DE 58%, #C9A97E 59%, #B8956A 100%); }
.monster-holder { position:absolute; left:50%; top:8%; transform:translateX(-50%); width:min(48vw,300px); aspect-ratio:1; z-index:4; }
.monster-holder img, .monster-holder svg { width:100%; height:100%; object-fit:contain; }
.monster-holder.eating { animation:mon-lean .4s ease-in-out; }
@keyframes mon-lean { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.06)} }
.monster-holder.chewing { animation:mon-chew .22s ease-in-out 3; }
@keyframes mon-chew { 0%,100%{transform:translateX(-50%) scaleY(1)} 50%{transform:translateX(-50%) scaleY(.93)} }
.monster-holder.giggling { animation:mon-giggle .3s ease-in-out 3; }
@keyframes mon-giggle { 0%,100%{transform:translateX(-50%) rotate(0)} 25%{transform:translateX(-50%) rotate(-3deg)} 75%{transform:translateX(-50%) rotate(3deg)} }
.monster-holder.full { animation:mon-happy 1s ease-in-out infinite; }
@keyframes mon-happy { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-10px)} }
.ask-row { position:absolute; left:50%; transform:translateX(-50%); top:calc(8% + min(48vw,300px) + 6px); z-index:5; }
.plate-row { position:absolute; left:50%; transform:translateX(-50%); bottom:max(14px, env(safe-area-inset-bottom)); z-index:6; display:flex; gap:clamp(8px,2vw,18px); align-items:stretch; justify-content:center; width:calc(100% - 20px); max-width:640px; }
.food-card { position:relative; flex:1; max-width:190px; min-width:88px; min-height:44px; background:#fff; border:2px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 6px 16px rgba(30,42,74,.18); transition:transform .14s, border-color .14s; }
.food-card:active { transform:scale(.95); }
.food-card img { width:100%; aspect-ratio:1; object-fit:cover; }
.food-word { font-weight:700; color:var(--navy); font-size:clamp(.8rem,2.6vw,1rem); padding:6px 4px 8px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.food-card.flying { z-index:40; transition:all .62s cubic-bezier(.5,.05,.4,1); transform:scale(.3); opacity:.9; pointer-events:none; }
@media (max-height:640px) { .monster-holder { width:min(38vw,220px); } .ask-row { top:calc(8% + min(38vw,220px) + 4px); } }

.intro-cluster { position:absolute; left:4%; bottom:26%; z-index:4; display:flex; flex-direction:column; gap:16px; max-width:min(320px,60vw); }
.host-el { width:clamp(120px,22vw,200px); flex:none; aspect-ratio:1; animation:host-bob 2.6s ease-in-out infinite; }
@keyframes host-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.host-el svg, .host-el img { width:100%; height:100%; border-radius:18px; }
.host-bubble { font-size:.98rem; }
.intro-panel { position:absolute; right:3%; bottom:4%; z-index:5; background:rgba(255,251,245,.92); border-radius:22px; box-shadow:var(--shadow); padding:20px 22px; text-align:center; width:min(360px, 60vw); }
.intro-panel h1 { font-size:clamp(1.5rem,4.6vw,2.2rem); }
.intro-panel .tagline { color:var(--body); font-size:.95rem; line-height:1.45; margin:8px 0 14px; }
.intro-panel .micro { margin-top:10px; font-size:.78rem; color:var(--muted); }
@media (max-width:620px) {
  .intro-cluster { left:4%; bottom:auto; top:10%; max-width:70vw; flex-direction:row; align-items:flex-end; }
  .host-el { order:-1; }
  .host-bubble { align-self:flex-start; }
  .intro-panel { left:50%; right:auto; transform:translateX(-50%); bottom:3%; width:min(420px, calc(100vw - 24px)); }
}