:root { --glow: #3fd47a; --accent: #8be24f; --accent-deep: #3c8a16; }
.menu-monster { width: min(52vw, 260px); margin: 1vh 0 3vh; animation: hop 1.6s ease-in-out infinite; }
.menu-monster svg { width: 100%; }
.bubble { flex: 1; max-width: 560px; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 6px 18px; cursor: pointer;
  background: var(--pill); color: var(--ink); border-radius: 26px; box-shadow: var(--shine), 0 6px 10px rgba(8,4,30,.35); }
.bubble.pop { animation: boing .5s var(--spring); }
.want-num { font-size: 2.6rem; line-height: 1; min-width: 1.2em; text-align: center; color: #e2450f; }
.want-slots { display: flex; flex-wrap: wrap; gap: 2px 4px; font-size: clamp(1.3rem, 4vw, 1.9rem); line-height: 1.1; }
.slot { filter: grayscale(1) opacity(.3); transition: filter .2s, transform .3s var(--spring); }
.slot.full { filter: none; transform: scale(1.15); }
.stars { min-width: 58px; text-align: right; font-size: 1.3rem; white-space: nowrap; }
.stage { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; padding: 8px; }
.monster { height: 100%; max-height: 100%; aspect-ratio: 1; max-width: 92vw; position: relative; transition: transform .3s var(--spring); }
.monster svg { width: 100%; height: 100%; overflow: visible; }
.monster .open { display: none; } .monster.hungry .open { display: inline; } .monster.hungry .shut { display: none; }
.monster.chomp { animation: chomp .35s ease; }
@keyframes chomp { 30% { transform: scale(1.08,.9); } 60% { transform: scale(.96,1.05); } }
.monster.happy { animation: hop .5s var(--spring) 3; }
.monster.yuck { animation: nope .5s; }
.monster.target { filter: drop-shadow(0 0 18px #fff8); }
.count-pop { position: fixed; z-index: 30; font-size: 3.4rem; pointer-events: none; transform: translate(-50%,-50%); text-shadow: 0 3px 8px rgba(0,0,0,.4);
  animation: rise 1s ease-out forwards; }
@keyframes rise { to { transform: translate(-50%,-180%); opacity: 0; } }