body.feed-page main { min-height: 100dvh; background: radial-gradient(circle at 10% 18%, #fff 0 3px, transparent 4px), linear-gradient(#bfeaf2 0 295px, #fff8e7 295px); }
.feed-game { width: min(1020px, calc(100% - 40px)); margin: 30px auto 46px; position: relative; z-index: 1; }
.feed-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 21px; animation: feed-rise .55s ease-out both; }
.feed-heading > div:first-child > span { color: #2e7d87; font-size: 10px; letter-spacing: .16em; font-weight: 900; }
.feed-heading h1 { margin: 7px 0 8px; font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: -.05em; }
.feed-heading p { margin: 0; color: #526575; font-size: 13px; }
.feed-target { flex: 0 0 auto; min-width: 150px; padding: 8px 13px; border: 3px solid var(--ink); border-radius: 19px; background: #e8dcff; box-shadow: 5px 5px 0 var(--ink); text-align: center; }
.feed-target small, .feed-target span { display: block; font-size: 9px; font-weight: 900; }
.feed-target-visual { display: flex; align-items: center; justify-content: center; gap: 7px; }
.feed-target-visual b { display: block; color: #725ac6; font-size: 48px; line-height: 1; }
.feed-target-visual span { font-family: "Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size: 39px; line-height: 1; }
.feed-card { display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; border: 3px solid var(--ink); border-radius: 27px; background: #fff; box-shadow: 10px 10px 0 var(--ink); animation: feed-card-in .65s .1s cubic-bezier(.2,.8,.2,1) both; }
.feed-animal-stage { min-height: 470px; padding: 24px; border-right: 3px solid var(--ink); background: #dff5e5; box-shadow: inset 0 0 0 6px #4a8a6628; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background .18s ease, box-shadow .18s ease; }
.feed-animal-stage.is-hovered { background: #fff2bd; box-shadow: inset 0 0 0 9px #ff6b8870; }
.feed-animal-stage.is-overfed { background: #ece8f3; box-shadow: inset 0 0 0 9px #6f627b55; animation: feed-overfed-shake .4s ease-out; }
.feed-animal-stage.is-overfed .feed-mouth-label { border-color: #6f627b; background: #f7f4fa; animation: none; }
.feed-animal { font-family: "Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size: 150px; line-height: 1; user-select: none; filter: drop-shadow(0 8px 0 #25304722); }
.feed-animal.is-eating { animation: feed-chomp .38s ease-out; }
.feed-mouth-label { width: 190px; min-height: 72px; margin-top: 2px; border: 4px dashed #4a8a66; border-radius: 38px; background: #fff; display: grid; place-items: center; font-size: 36px; line-height: 1; text-align: center; animation: feed-mouth-pulse 2s ease-in-out infinite; }
.feed-progress { width: min(100%, 280px); margin-top: 24px; text-align: center; }
.feed-progress > span { font-size: 13px; font-weight: 900; }
#feedDots { min-height: 34px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }
#feedDots i { width: 27px; height: 27px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; }
#feedDots i.is-filled { background: var(--pink); box-shadow: inset 0 0 0 5px #fff; animation: feed-dot-pop .25s ease-out; }
.feed-food-panel { min-width: 0; padding: 27px; display: flex; flex-direction: column; justify-content: center; background: #fff2bd; }
.feed-panel-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.feed-panel-title span { display: block; color: #7c692e; font-size: 10px; letter-spacing: .1em; font-weight: 900; }
.feed-panel-title strong { display: block; margin-top: 6px; font-size: 22px; }
.feed-panel-actions { display: flex; align-items: center; gap: 9px; }
.feed-panel-title button { min-width: 50px; min-height: 46px; padding: 6px; border: 2px solid var(--ink); border-radius: 13px; background: var(--blue); box-shadow: 3px 3px 0 var(--ink); font-size: 22px; font-weight: 900; cursor: pointer; }
.feed-panel-title .feed-confirm { min-width: 112px; padding-inline: 14px; background: #ffda66; font-size: 17px; }
.feed-tray { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.food-piece { min-width: 0; min-height: 72px; aspect-ratio: 1; padding: 4px; border: 3px solid var(--ink); border-radius: 17px; background: #fff; box-shadow: 4px 4px 0 var(--ink); display: grid; place-items: center; cursor: grab; touch-action: none; transition: transform .16s ease, opacity .2s ease; }
.food-piece span { font-family: "Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size: clamp(46px, 6vw, 74px); line-height: 1; pointer-events: none; user-select: none; }
.food-piece:hover { transform: translateY(-3px) rotate(-2deg); }
.food-piece.is-dragging { opacity: .2; }
.food-piece.is-wrong { animation: feed-shake .34s; }
.food-piece.is-used { opacity: .12; transform: scale(.55); pointer-events: none; }
.food-piece:disabled { cursor: not-allowed; filter: grayscale(.65); }
.feed-food-panel > p { margin: 20px 0 0; color: #776a42; font-size: 15px; font-weight: 900; letter-spacing: .08em; text-align: center; }
.floating-food { position: fixed; z-index: 1000; width: 88px; height: 88px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 23px; background: #fff; box-shadow: 7px 7px 0 #25304755; font-family: "Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size: 60px; line-height: 1; pointer-events: none; transform: translate(-50%,-50%) rotate(5deg); }
.feed-toast { position: fixed; z-index: 2000; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); padding: 13px 22px; border: 3px solid var(--ink); border-radius: 16px; background: var(--pink); color: #fff; box-shadow: 5px 5px 0 var(--ink); font-weight: 900; text-align: center; animation: feed-toast-in .35s cubic-bezier(.2,.8,.2,1); }
.feed-toast.is-danger { background: #66576d; box-shadow: 5px 5px 0 #312b35; }
.feed-toast.is-warning { background: #f3a640; color: var(--ink); }
.feed-page footer { padding-bottom: env(safe-area-inset-bottom); }

@keyframes feed-rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes feed-card-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes feed-chomp { 0% { transform: scale(1); } 40% { transform: scale(1.13) rotate(-4deg); } 100% { transform: scale(1); } }
@keyframes feed-mouth-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes feed-dot-pop { 0% { transform: scale(.4); } 75% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes feed-shake { 25% { transform: translateX(-7px) rotate(-2deg); } 50% { transform: translateX(7px) rotate(2deg); } 75% { transform: translateX(-4px); } }
@keyframes feed-overfed-shake { 20% { transform: rotate(-2deg); } 40% { transform: rotate(2deg); } 60% { transform: rotate(-1deg); } 80% { transform: rotate(1deg); } }
@keyframes feed-toast-in { from { opacity: 0; transform: translate(-50%,-18px) scale(.9); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

@media (max-width: 760px) {
  .feed-page .topbar { width: calc(100% - 22px); min-height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .feed-page .brand { font-size: 0; gap: 0; }
  .feed-page .brand-mark { width: 28px; height: 28px; }
  .feed-page .mode-switch a { min-height: 38px; padding: 5px 6px; font-size: 8px; }
  .feed-game { width: calc(100% - 22px); margin: 14px auto 28px; }
  .feed-heading { align-items: center; margin-bottom: 12px; gap: 8px; }
  .feed-heading h1 { font-size: 31px; }
  .feed-heading p { max-width: 240px; font-size: 10px; line-height: 1.4; }
  .feed-target { min-width: 112px; padding: 6px 7px; border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); }
  .feed-target-visual b { font-size: 37px; }
  .feed-target-visual span { font-size: 31px; }
  .feed-card { grid-template-columns: 1fr; border-radius: 20px; box-shadow: 7px 7px 0 var(--ink); }
  .feed-animal-stage { min-height: 265px; padding: 13px; border-right: 0; border-bottom: 3px solid var(--ink); }
  .feed-animal { font-size: 105px; }
  .feed-mouth-label { width: 180px; min-height: 64px; font-size: 32px; }
  .feed-progress { margin-top: 12px; }
  #feedDots { min-height: 24px; margin-top: 6px; }
  #feedDots i { width: 21px; height: 21px; }
  .feed-food-panel { padding: 13px 12px 15px; }
  .feed-panel-title { margin-bottom: 10px; }
  .feed-panel-title strong { font-size: 17px; }
  .feed-panel-title button { min-height: 40px; }
  .feed-panel-actions { gap: 6px; }
  .feed-panel-title .feed-confirm { min-width: 92px; padding-inline: 9px; font-size: 14px; }
  .feed-tray { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .food-piece { min-height: 56px; aspect-ratio: auto; border-width: 2px; border-radius: 11px; box-shadow: 2px 3px 0 var(--ink); }
  .food-piece span { font-size: clamp(30px, 9vw, 48px); }
  .feed-food-panel > p { margin-top: 10px; font-size: 9px; }
  .feed-page footer { width: calc(100% - 22px); min-height: 50px; }
}

@media (max-height: 700px) and (max-width: 760px) {
  .feed-game { margin-top: 8px; }
  .feed-heading > div:first-child > span, .feed-heading p { display: none; }
  .feed-heading h1 { margin: 0; font-size: 28px; }
  .feed-animal-stage { min-height: 220px; }
  .feed-animal { font-size: 88px; }
  .feed-progress { margin-top: 8px; }
  .feed-food-panel { padding-block: 9px 11px; }
  .feed-food-panel > p { display: none; }
  .feed-page footer { min-height: 46px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .feed-heading, .feed-card, .feed-animal-stage, .feed-animal, .feed-mouth-label, #feedDots i, .food-piece, .feed-toast { animation: none !important; transition: none !important; }
}