/* =====================================================
   V87 FOOD BAG
   库存优先 · 2列 · 最多6个 · 可爱动效
===================================================== */


/* =========================
   整体布局
========================= */

.page[data-page="bag"]{
  display:grid !important;

  grid-template-rows:
    58px
    108px
    minmax(0,1fr) !important;

  gap:10px !important;

  overflow:hidden !important;
}


/* =========================
   标题
========================= */

.page[data-page="bag"] .simple-header{
  height:58px !important;
}

.page[data-page="bag"] .simple-header h2{
  font-size:31px !important;
  line-height:1.05 !important;
}

.page[data-page="bag"] .simple-header .round-btn{
  width:50px !important;
  height:50px !important;

  background:rgba(255,255,255,.95) !important;

  box-shadow:
    0 9px 22px rgba(61,47,37,.08) !important;

  animation:v87PawFloat 3s ease-in-out infinite !important;
}


/* =========================
   宠物横幅
========================= */

.page[data-page="bag"] .bag-pet-strip{
  height:108px !important;

  margin:0 !important;

  padding:
    15px
    142px
    15px
    18px !important;

  border-radius:27px !important;

  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(190,238,174,.30),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #73b982,
      #3c8262
    ) !important;

  box-shadow:
    0 10px 25px rgba(51,91,65,.13) !important;

  overflow:hidden !important;
}


.page[data-page="bag"] .bag-pet-strip::before{
  content:"✦" !important;

  position:absolute !important;

  z-index:2 !important;

  top:18px !important;
  right:135px !important;

  color:#ffe49d !important;

  font-size:15px !important;

  animation:v87Twinkle 1.9s ease-in-out infinite !important;
}


.page[data-page="bag"] .bag-pet-strip::after{
  content:"♡" !important;

  position:absolute !important;

  z-index:2 !important;

  right:122px !important;
  bottom:17px !important;

  color:#ffd2c7 !important;

  font-size:15px !important;

  animation:v87Heart 2.3s ease-in-out infinite !important;
}


.page[data-page="bag"] .bag-pet-strip small{
  display:inline-flex !important;

  width:max-content !important;

  padding:5px 10px !important;

  border-radius:999px !important;

  background:rgba(255,255,255,.13) !important;

  color:rgba(255,255,255,.80) !important;

  font-size:10px !important;
}


.page[data-page="bag"] .bag-pet-strip strong{
  margin-top:7px !important;

  font-size:16px !important;
  line-height:1.35 !important;

  color:#fff !important;
}


/* 宠物 */
.page[data-page="bag"] #bagPetImage{
  right:8px !important;
  bottom:-6px !important;

  width:137px !important;
  height:112px !important;

  object-fit:contain !important;
  object-position:center bottom !important;

  filter:
    drop-shadow(
      0 8px 8px rgba(23,60,42,.15)
    ) !important;

  animation:
    v87PetBounce
    3s ease-in-out
    infinite !important;
}


/* =========================
   食物网格
========================= */

.page[data-page="bag"] #foodGrid{
  min-height:0 !important;
  height:auto !important;

  margin:0 !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:9px !important;

  overflow:hidden !important;
}


/* 4个以内 */
.page[data-page="bag"]
#foodGrid[data-v87-rows="2"]{
  grid-template-rows:
    repeat(2,minmax(0,1fr)) !important;
}


/* 5-6个 */
.page[data-page="bag"]
#foodGrid[data-v87-rows="3"]{
  grid-template-rows:
    repeat(3,minmax(0,1fr)) !important;
}


/* 超过6个，背包内部滚 */
.page[data-page="bag"]
#foodGrid[data-v87-rows="scroll"]{
  grid-auto-rows:142px !important;

  overflow-y:auto !important;

  padding-right:2px !important;

  scrollbar-width:none !important;

  -webkit-overflow-scrolling:touch !important;
}


.page[data-page="bag"]
#foodGrid[data-v87-rows="scroll"]::-webkit-scrollbar{
  display:none !important;
}


/* =========================
   食物卡片
========================= */

.page[data-page="bag"] .food-v87-card{
  --rx:0deg;
  --ry:0deg;

  position:relative !important;

  min-width:0 !important;
  min-height:0 !important;

  overflow:hidden !important;

  padding:9px !important;

  display:grid !important;

  grid-template-columns:
    .82fr 1.18fr !important;

  grid-template-rows:
    minmax(0,1fr)
    auto
    30px !important;

  column-gap:4px !important;
  row-gap:3px !important;

  border-radius:22px !important;

  border:
    1px solid rgba(226,218,207,.82) !important;

  background:
    radial-gradient(
      140px circle
      at var(--mx,75%) var(--my,28%),
      rgba(255,255,255,.9),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      #fffefa,
      #faf7ef
    ) !important;

  box-shadow:
    0 7px 17px rgba(62,48,37,.065) !important;

  opacity:1 !important;

  transform:
    perspective(650px)
    rotateX(var(--rx))
    rotateY(var(--ry)) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;

  animation:
    v87CardIn
    .48s
    cubic-bezier(.2,.85,.3,1.08)
    both !important;

  animation-delay:
    calc(var(--i,0) * 45ms) !important;
}


/* 有库存 */
.page[data-page="bag"]
.food-v87-card.has-stock{
  border-color:
    rgba(112,171,119,.26) !important;

  box-shadow:
    0 8px 19px rgba(61,116,74,.09) !important;
}


/* 有库存的小光点 */
.page[data-page="bag"]
.food-v87-card.has-stock::after{
  content:"✦" !important;

  position:absolute !important;

  top:10px !important;
  right:10px !important;

  color:#efc960 !important;

  font-size:10px !important;

  animation:
    v87Twinkle
    2s ease-in-out
    infinite !important;
}


/* 没库存不再整张变很淡 */
.page[data-page="bag"]
.food-v87-card.empty{
  opacity:.72 !important;

  filter:saturate(.78) !important;
}


/* 按压 */
.page[data-page="bag"]
.food-v87-card.v87-pressed{
  transform:
    perspective(650px)
    rotateX(var(--rx))
    rotateY(var(--ry))
    scale(.97) !important;
}


/* =========================
   左侧库存
========================= */

.food-v87-stock{
  grid-column:1 !important;
  grid-row:1 !important;

  align-self:center !important;

  min-width:0 !important;

  padding-left:2px !important;

  position:relative !important;
  z-index:3 !important;
}


.food-v87-stock-label{
  display:inline-flex !important;

  padding:3px 6px !important;

  border-radius:8px !important;

  background:#f1f5e9 !important;

  color:#62834f !important;

  font-size:8px !important;
  font-weight:800 !important;
}


.food-v87-number{
  display:block !important;

  margin-top:1px !important;

  color:#69a861 !important;

  font-size:36px !important;
  font-weight:900 !important;
  line-height:.95 !important;

  letter-spacing:-.04em !important;

  text-shadow:
    0 2px 0 rgba(255,255,255,.9) !important;
}


.has-stock .food-v87-number{
  animation:
    v87StockBreath
    2.7s ease-in-out
    infinite !important;
}


.food-v87-unit{
  margin-left:2px !important;

  color:#74906c !important;

  font-size:9px !important;
  font-style:normal !important;
  font-weight:700 !important;
}


/* =========================
   食物视觉区
========================= */

.food-v87-visual{
  grid-column:2 !important;
  grid-row:1 !important;

  min-width:0 !important;
  min-height:0 !important;

  position:relative !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:17px !important;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.98) 0 24%,
      rgba(248,239,216,.65) 49%,
      rgba(255,255,255,0) 72%
    ) !important;

  overflow:visible !important;
}


.food-v87-emoji{
  position:relative !important;
  z-index:2 !important;

  display:block !important;

  font-size:43px !important;
  line-height:1 !important;

  filter:
    drop-shadow(
      0 6px 7px rgba(83,59,34,.13)
    ) !important;

  transform-origin:center bottom !important;

  animation:
    v87FoodFloat
    3.2s
    ease-in-out
    infinite !important;

  animation-delay:
    calc(var(--i,0) * -.3s) !important;
}


.food-v87-glow{
  position:absolute !important;

  width:56px !important;
  height:20px !important;

  left:50% !important;
  bottom:6px !important;

  transform:
    translateX(-50%) !important;

  border-radius:50% !important;

  background:
    rgba(222,197,150,.15) !important;

  filter:blur(5px) !important;
}


/* =========================
   名字
========================= */

.food-v87-meta{
  grid-column:1 / -1 !important;
  grid-row:2 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  min-width:0 !important;

  padding:0 2px !important;
}


.food-v87-meta h3{
  margin:0 !important;

  color:#2a231f !important;

  font-size:12px !important;
  font-weight:850 !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}


.food-v87-feed-info{
  color:#a0968c !important;

  font-size:8px !important;

  white-space:nowrap !important;
}


/* 最爱 */
.food-v87-fav{
  position:absolute !important;
  z-index:5 !important;

  top:8px !important;
  right:8px !important;

  padding:4px 7px !important;

  border-radius:999px !important;

  background:
    rgba(226,241,217,.95) !important;

  color:#5a9156 !important;

  font-size:8px !important;
  font-weight:850 !important;

  box-shadow:
    0 3px 8px rgba(72,119,70,.08) !important;
}


/* =========================
   喂食按钮
========================= */

.page[data-page="bag"]
.food-v87-card .feed-cta{
  grid-column:1 / -1 !important;
  grid-row:3 !important;

  width:100% !important;
  height:30px !important;

  margin:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:5px !important;

  border-radius:999px !important;

  color:#fff !important;

  font-size:10px !important;
  font-weight:850 !important;

  background:
    linear-gradient(
      180deg,
      #76bd72,
      #4b9760
    ) !important;

  border:
    1px solid rgba(69,143,81,.25) !important;

  box-shadow:
    0 4px 0 #3d7f50,
    0 7px 14px rgba(60,121,72,.15) !important;

  transition:
    transform .15s ease,
    box-shadow .15s ease !important;
}


.page[data-page="bag"]
.food-v87-card
.feed-cta:not(:disabled):active{
  transform:
    translateY(3px)
    scale(.985) !important;

  box-shadow:
    0 1px 0 #3d7f50 !important;
}


/* 无库存 */
.page[data-page="bag"]
.food-v87-card
.feed-cta:disabled{
  color:#a99f94 !important;

  background:#eee9e2 !important;

  border-color:transparent !important;

  box-shadow:none !important;
}


/* =========================
   有库存排序提示
========================= */

.v87-stock-summary{
  position:absolute !important;

  z-index:20 !important;

  right:78px !important;

  top:18px !important;

  height:26px !important;

  padding:0 10px !important;

  display:flex !important;
  align-items:center !important;

  border-radius:999px !important;

  background:#e8f2e7 !important;

  color:#56815c !important;

  font-size:9px !important;
  font-weight:800 !important;
}


/* =========================
   动画
========================= */

@keyframes v87CardIn{
  from{
    opacity:0;

    transform:
      translateY(12px)
      scale(.96);
  }

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }
}


@keyframes v87FoodFloat{
  0%,100%{
    transform:
      translateY(0)
      rotate(-1deg);
  }

  50%{
    transform:
      translateY(-4px)
      rotate(2deg);
  }
}


@keyframes v87PetBounce{
  0%,100%{
    transform:
      translateY(0)
      rotate(0deg);
  }

  50%{
    transform:
      translateY(-4px)
      rotate(-1deg);
  }
}


@keyframes v87StockBreath{
  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.045);
  }
}


@keyframes v87Twinkle{
  0%,100%{
    opacity:.35;
    transform:scale(.75) rotate(0);
  }

  50%{
    opacity:1;
    transform:scale(1.15) rotate(15deg);
  }
}


@keyframes v87Heart{
  0%,100%{
    opacity:.45;
    transform:
      translateY(0)
      scale(.9);
  }

  50%{
    opacity:1;
    transform:
      translateY(-5px)
      scale(1.08);
  }
}


@keyframes v87PawFloat{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-3px);
  }
}


/* =========================
   小屏
========================= */

@media(max-height:760px){

  .page[data-page="bag"]{
    grid-template-rows:
      52px
      92px
      minmax(0,1fr) !important;

    gap:7px !important;
  }


  .page[data-page="bag"]
  .simple-header{
    height:52px !important;
  }


  .page[data-page="bag"]
  .simple-header h2{
    font-size:27px !important;
  }


  .page[data-page="bag"]
  .bag-pet-strip{
    height:92px !important;

    padding:
      11px
      122px
      11px
      14px !important;
  }


  .page[data-page="bag"]
  #bagPetImage{
    width:117px !important;
    height:96px !important;
  }


  .page[data-page="bag"]
  .bag-pet-strip strong{
    font-size:14px !important;
  }


  .page[data-page="bag"]
  #foodGrid{
    gap:7px !important;
  }


  .page[data-page="bag"]
  .food-v87-card{
    border-radius:18px !important;

    padding:7px !important;

    grid-template-rows:
      minmax(0,1fr)
      auto
      25px !important;
  }


  .food-v87-number{
    font-size:29px !important;
  }


  .food-v87-emoji{
    font-size:34px !important;
  }


  .food-v87-meta h3{
    font-size:10.5px !important;
  }


  .page[data-page="bag"]
  .food-v87-card .feed-cta{
    height:25px !important;

    font-size:9px !important;
  }

}


/* 减少动态 */
@media(prefers-reduced-motion:reduce){

  .food-v87-card,
  .food-v87-emoji,
  .food-v87-number,
  #bagPetImage,
  .bag-pet-strip::before,
  .bag-pet-strip::after,
  .page[data-page="bag"] .round-btn{
    animation:none !important;
  }

}