.feeding-page { background: radial-gradient(circle at 50% 2%, rgba(88,119,168,.42), transparent 30%), linear-gradient(180deg,#111b38 0%,#0c1227 70%); }
.feeding-hero { padding: 46px 20px 24px; text-align: center; }
.feeding-hero h1 { margin: 0; font-size: clamp(3.35rem,8vw,5.8rem); line-height: .88; letter-spacing: -.045em; }
.feeding-hero h1 span { color: var(--gold); }
.feeding-hero > p:last-child { max-width: 570px; margin: 18px auto 0; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }

.feeding-shell { width: min(850px,calc(100% - 28px)); min-height: 650px; margin: 10px auto 75px; padding: 15px; position: relative; border: 1px solid rgba(203,186,245,.2); border-radius: 30px; background: rgba(22,29,56,.9); box-shadow: var(--shadow); }
.feeding-topbar { min-height: 68px; padding: 5px 8px 13px; display: grid; grid-template-columns: 120px 1fr 120px; align-items: center; gap: 16px; }
.feeding-topbar > div:first-child { display: grid; text-align: center; }
.topbar-label { color: var(--muted); font-size: .63rem; font-weight: 900; letter-spacing: .13em; }
.feeding-topbar strong { color: var(--gold); font: 800 1.45rem/1.15 "Baloo 2"; }
.meal-progress { display: flex; justify-content: center; gap: 9px; }
.meal-dot { width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid rgba(203,186,245,.24); border-radius: 50%; color: rgba(255,255,255,.3); background: rgba(16,23,49,.72); font-size: .8rem; transition: .28s ease; }
.meal-dot.done { border-color: var(--mint); color: #143a34; background: var(--mint); box-shadow: 0 0 19px rgba(105,214,196,.35); transform: scale(1.08); }

.feeding-stage { min-height: 545px; padding: 22px clamp(12px,3vw,28px) 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(105,214,196,.2); border-radius: 23px; background: radial-gradient(circle at 50% 28%,rgba(86,142,146,.25),transparent 32%), linear-gradient(180deg,#172747 0%,#102d36 68%,#183d30 69%,#102a25 100%); isolation: isolate; }
.feeding-stage::before { content:""; position:absolute; inset:auto -10% -40px; height:185px; z-index:-1; background: radial-gradient(ellipse at 40% 0,#386044 0 42%,transparent 43%),radial-gradient(ellipse at 65% 20%,#2a5139 0 46%,transparent 47%); opacity:.85; }
.moon-glow { width: 62px; height: 62px; position:absolute; right:7%; top:5%; z-index:-1; display:grid; place-items:center; border-radius:50%; color:#fff0b1; background:rgba(246,212,123,.12); box-shadow:0 0 55px rgba(246,212,123,.25); font-size:52px; transform:rotate(-18deg); }
.tree { width: 120px; height: 390px; position:absolute; bottom:75px; z-index:-1; background:#091d22; border-radius:60% 60% 10px 10px; opacity:.68; }
.tree::before,.tree::after { content:""; position:absolute; border-radius:50%; background:#0e3432; }
.tree::before { width:210px; height:150px; left:-45px; top:-25px; }
.tree::after { width:160px; height:125px; left:-25px; top:70px; }
.tree-left { left:-80px; transform:rotate(5deg); }
.tree-right { right:-75px; transform:rotate(-5deg); }
.fireflies i { width:7px; height:7px; position:absolute; border-radius:50%; background:#ffe99c; box-shadow:0 0 13px #ffe17b; animation:firefly 2.2s ease-in-out infinite alternate; }
.fireflies i:nth-child(1){left:17%;top:27%}.fireflies i:nth-child(2){right:18%;top:38%;animation-delay:-.8s}.fireflies i:nth-child(3){left:10%;top:58%;animation-delay:-1.4s}.fireflies i:nth-child(4){right:9%;top:62%;animation-delay:-.3s}
@keyframes firefly { to { opacity:.22; transform:translateY(12px) scale(.75); } }

.question-bubble { min-height: 48px; margin: 2px 70px 9px; padding: 10px 22px; position:relative; display:grid; place-items:center; border:2px solid rgba(255,255,255,.72); border-radius:22px; color:#253049; background:#fff8e3; box-shadow:0 8px 20px rgba(0,0,0,.24); font:800 clamp(1.15rem,3vw,1.45rem) "Baloo 2"; text-align:center; }
.question-bubble::after { content:""; width:15px; height:15px; position:absolute; left:50%; bottom:-9px; border-right:2px solid rgba(255,255,255,.72); border-bottom:2px solid rgba(255,255,255,.72); background:#fff8e3; transform:translateX(-50%) rotate(45deg); }
.animal-card { width:170px; height:170px; position:relative; display:grid; place-items:center; border:3px solid rgba(246,212,123,.55); border-radius:48% 52% 44% 56%; background:radial-gradient(circle at 50% 34%,#fff7d7,#d5c782 67%,#827744 68%); box-shadow:0 17px 28px rgba(0,0,0,.35),0 0 35px rgba(246,212,123,.13); }
.animal-emoji { font-size:92px; line-height:1; filter:drop-shadow(0 8px 5px rgba(0,0,0,.18)); transform-origin:50% 90%; }
.animal-name { padding:5px 14px; position:absolute; bottom:-12px; border:2px solid rgba(255,255,255,.6); border-radius:99px; color:#162f30; background:var(--mint); box-shadow:0 5px 10px rgba(0,0,0,.2); font-weight:900; }
.animal-reaction { position:absolute; right:-13px; top:-8px; color:#e96191; font-size:32px; opacity:0; transform:scale(.4) rotate(-10deg); }
.animal-card.celebrate .animal-emoji { animation:happy-bounce .48s ease-in-out 2; }
.animal-card.celebrate .animal-reaction { animation:heart-pop 1s ease both; }
.animal-card.thinking .animal-emoji { animation:gentle-look .42s ease; }
@keyframes happy-bounce { 50% { transform:translateY(-11px) rotate(5deg) scale(1.05); } }
@keyframes heart-pop { 35%,75% { opacity:1; transform:scale(1.15) rotate(10deg); } 100% { opacity:0; transform:translateY(-24px) scale(.8); } }
@keyframes gentle-look { 35% { transform:rotate(-6deg); } 70% { transform:rotate(6deg); } }

.food-tray { width:min(590px,100%); margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.food-choice { min-height:116px; padding:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:3px solid rgba(203,186,245,.23); border-radius:24px; color:var(--ink); background:linear-gradient(155deg,rgba(63,69,106,.94),rgba(34,41,77,.96)); box-shadow:0 8px 0 #11192f,0 14px 22px rgba(0,0,0,.2); cursor:pointer; touch-action:manipulation; transition:transform .16s,border-color .16s,filter .16s; }
.food-choice:hover { transform:translateY(-4px); border-color:var(--gold); }
.food-choice:active { transform:translateY(5px); box-shadow:0 3px 0 #11192f; }
.food-choice-emoji { font-size:53px; line-height:1.05; filter:drop-shadow(0 5px 4px rgba(0,0,0,.2)); }
.food-choice-name { font-size:.91rem; font-weight:900; }
.food-choice.correct { border-color:var(--mint); background:linear-gradient(155deg,#3b8c7d,#235849); box-shadow:0 8px 0 #153f36,0 0 30px rgba(105,214,196,.38); }
.food-choice.wrong { animation:soft-wiggle .35s ease; border-color:#e990aa; filter:saturate(.65); }
.food-choice:disabled { cursor:default; }
@keyframes soft-wiggle { 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.feeding-status { min-height:27px; margin:17px 0 0; color:var(--gold); font-weight:900; text-align:center; }
.flying-food { position:fixed; z-index:50; pointer-events:none; font-size:52px; transition:transform .62s cubic-bezier(.2,.72,.25,1),opacity .62s; }
.celebration-star { position:absolute; z-index:4; color:#ffe689; font-size:25px; pointer-events:none; animation:star-burst .85s ease-out forwards; }
@keyframes star-burst { to { opacity:0; transform:translate(var(--star-x),var(--star-y)) rotate(140deg) scale(.35); } }

.feeding-overlay { position:absolute; inset:0; z-index:10; padding:18px; display:grid; place-items:center; border-radius:inherit; background:rgba(7,12,29,.72); backdrop-filter:blur(8px); }
.feeding-overlay.hidden { display:none; }
.feeding-overlay-card { width:min(485px,94%); padding:clamp(28px,5vw,44px); border:1px solid rgba(203,186,245,.34); border-radius:27px; text-align:center; background:linear-gradient(155deg,rgba(31,39,73,.98),rgba(32,23,54,.98)); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.feeding-overlay-card h2 { margin:0 0 10px; font-size:clamp(2rem,5vw,2.75rem); line-height:1.04; }
.feeding-overlay-card > p:not(.eyebrow) { margin:0 0 23px; color:var(--muted); line-height:1.55; }
.picnic-icon { width:108px; height:84px; margin:0 auto 18px; position:relative; display:flex; align-items:center; justify-content:center; border:1px solid rgba(246,212,123,.4); border-radius:48%; background:radial-gradient(circle,rgba(246,212,123,.14),transparent 70%); }
.picnic-icon span:first-child { font-size:56px; }.picnic-icon span:last-child { margin-left:-8px; align-self:flex-end; font-size:36px; transform:rotate(12deg); }

@media(max-width:600px){
  .feeding-hero{padding-top:36px}.feeding-hero h1{font-size:clamp(3rem,14vw,4rem)}
  .feeding-shell{padding:8px;border-radius:23px}.feeding-topbar{grid-template-columns:80px 1fr 92px;gap:7px;padding-inline:2px}.feeding-topbar .restart-button{font-size:.76rem}
  .meal-progress{gap:4px}.meal-dot{width:23px;height:23px;font-size:.63rem}
  .feeding-stage{min-height:520px;padding:19px 8px 20px}.question-bubble{margin-inline:45px;padding:8px 14px}
  .animal-card{width:145px;height:145px}.animal-emoji{font-size:78px}
  .food-tray{gap:7px;margin-top:27px}.food-choice{min-height:105px;padding:5px;border-radius:18px}.food-choice-emoji{font-size:45px}.food-choice-name{font-size:.75rem}
  .feeding-overlay{padding:8px}.feeding-overlay-card{padding:28px 19px}
}
@media(max-width:370px){.food-choice-name{font-size:.68rem}.animal-card{width:132px;height:132px}.animal-emoji{font-size:70px}}
@media(prefers-reduced-motion:reduce){.fireflies i{animation:none}}