/* =========================================================
   V89 HOME SCENE
   对齐任务页 / 背包页视觉
   大宠物 + 花园感 + 卡片动效
========================================================= */

.page[data-page="home"]{
  overflow:hidden !important;
}


/* =========================
   顶部
========================= */

.page[data-page="home"] .topbar{
  height:54px !important;
  min-height:54px !important;
  position:relative !important;
  z-index:30 !important;
}

.page[data-page="home"] .brand-mark{
  width:48px !important;
  height:48px !important;

  border-radius:50% !important;

  background:
    linear-gradient(
      145deg,
      #55a27e,
      #2d765c
    ) !important;

  box-shadow:
    0 8px 22px rgba(45,108,82,.17),
    inset 0 1px 0 rgba(255,255,255,.28) !important;

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

.page[data-page="home"] .top-actions{
  gap:9px !important;
}

.page[data-page="home"] .top-actions .round-btn{
  width:47px !important;
  height:47px !important;

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

  border:
    1px solid rgba(255,255,255,.98) !important;

  box-shadow:
    0 8px 20px rgba(60,48,38,.08) !important;
}


/* =========================
   页面结构
========================= */

.page[data-page="home"] .home-main{
  height:calc(100% - 54px) !important;

  display:grid !important;

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

  gap:10px !important;
}


/* =========================
   HERO
========================= */

.page[data-page="home"] #homePetHero{
  position:relative !important;

  min-height:0 !important;

  overflow:hidden !important;

  padding:
    18px 18px 14px !important;

  border-radius:
    31px !important;

  border:
    1px solid rgba(255,255,255,.95) !important;

  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(255,255,255,.98) 0%,
      rgba(243,250,233,.83) 22%,
      transparent 47%
    ),
    linear-gradient(
      155deg,
      #edf6df 0%,
      #f6f6e8 48%,
      #eef6e4 100%
    ) !important;

  box-shadow:
    0 14px 34px rgba(63,77,49,.105),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  isolation:isolate !important;
}


/* 去掉旧大圆效果 */
.page[data-page="home"] #homePetHero::before,
.page[data-page="home"] #homePetHero::after{
  display:none !important;
}


/* =========================
   花园底景
========================= */

.v89-garden{
  position:absolute !important;

  z-index:1 !important;

  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  height:36% !important;

  pointer-events:none !important;

  overflow:hidden !important;

  background:
    radial-gradient(
      ellipse at 8% 105%,
      #6aa35e 0 18%,
      transparent 19%
    ),
    radial-gradient(
      ellipse at 31% 109%,
      #87bd6d 0 22%,
      transparent 23%
    ),
    radial-gradient(
      ellipse at 55% 110%,
      #71a95c 0 25%,
      transparent 26%
    ),
    radial-gradient(
      ellipse at 82% 110%,
      #8bc070 0 25%,
      transparent 26%
    ),
    linear-gradient(
      to top,
      rgba(105,157,82,.25),
      transparent 75%
    ) !important;
}


.v89-garden::before{
  content:"🌼  ·  🌿   ·   🌼   🌱   ·   🌼" !important;

  position:absolute !important;

  left:10px !important;
  right:8px !important;
  bottom:6px !important;

  font-size:15px !important;
  letter-spacing:4px !important;

  opacity:.82 !important;

  white-space:nowrap !important;

  animation:
    v89GardenBreath
    4s ease-in-out
    infinite !important;
}


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

.page[data-page="home"] .hero-topline{
  position:relative !important;
  z-index:10 !important;
}

.page[data-page="home"] .hero-topline .eyebrow{
  color:#94776d !important;

  font-size:9px !important;

  font-weight:800 !important;

  letter-spacing:.25em !important;
}

.page[data-page="home"] .hero-topline h1{
  margin-top:5px !important;

  color:#221a17 !important;

  font-size:39px !important;

  line-height:1 !important;

  letter-spacing:-.045em !important;
}


.page[data-page="home"] .hero-topline .soft-pill{
  height:38px !important;

  padding:0 13px !important;

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

  border-radius:999px !important;

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

  border:
    1px solid rgba(200,191,182,.75) !important;

  color:#332b27 !important;

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

  box-shadow:
    0 5px 14px rgba(66,51,40,.045) !important;

  backdrop-filter:
    blur(12px) !important;

  -webkit-backdrop-filter:
    blur(12px) !important;
}


/* =========================
   V88状态 → V89视觉
========================= */

.page[data-page="home"] .hero-badges{
  display:none !important;
}

.v88-home-stats{
  position:absolute !important;

  z-index:12 !important;

  left:18px !important;
  top:96px !important;

  display:flex !important;

  gap:6px !important;
}

.v88-stat{
  height:30px !important;

  padding:0 10px !important;

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

  gap:4px !important;

  border-radius:999px !important;

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

  border:
    1px solid rgba(255,255,255,.97) !important;

  box-shadow:
    0 5px 13px rgba(61,52,42,.05) !important;

  color:#69736a !important;

  font-size:9.5px !important;

  backdrop-filter:
    blur(11px) !important;

  -webkit-backdrop-filter:
    blur(11px) !important;
}

.v88-stat b{
  color:#2e785a !important;

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


/* =========================
   今日任务卡
========================= */

.v88-home-progress{
  position:absolute !important;

  z-index:12 !important;

  left:18px !important;
  top:137px !important;

  width:142px !important;

  padding:
    9px 11px 10px !important;

  border-radius:
    17px !important;

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

  border:
    1px solid rgba(255,255,255,.93) !important;

  box-shadow:
    0 7px 18px rgba(61,52,42,.055) !important;

  backdrop-filter:
    blur(11px) !important;

  -webkit-backdrop-filter:
    blur(11px) !important;
}

.v88-progress-top{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;

  color:#574f49 !important;

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

.v88-progress-top b{
  color:#246c50 !important;

  font-size:12px !important;
  font-weight:900 !important;
}

.v88-progress-track{
  height:6px !important;

  margin-top:7px !important;

  border-radius:99px !important;

  overflow:hidden !important;

  background:
    rgba(55,102,70,.12) !important;
}

.v88-progress-fill{
  height:100% !important;

  border-radius:inherit !important;

  background:
    linear-gradient(
      90deg,
      #4fa774,
      #91cb63
    ) !important;

  box-shadow:
    0 0 9px rgba(74,160,100,.27) !important;

  transition:
    width .55s
    cubic-bezier(.2,.8,.2,1) !important;
}


/* =========================
   状态文字
========================= */

.v89-status-line{
  position:absolute !important;

  z-index:12 !important;

  left:19px !important;
  top:205px !important;

  max-width:165px !important;

  padding:
    6px 9px !important;

  border-radius:999px !important;

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

  color:#456350 !important;

  font-size:8.5px !important;
  font-weight:750 !important;

  white-space:nowrap !important;

  backdrop-filter:
    blur(7px) !important;

  -webkit-backdrop-filter:
    blur(7px) !important;
}


/* =========================
   超大宠物
========================= */

.page[data-page="home"] #homePetImage{
  position:absolute !important;

  z-index:6 !important;

  right:-5% !important;
  bottom:53px !important;

  width:min(78%,360px) !important;
  height:78% !important;

  object-fit:contain !important;

  object-position:
    center bottom !important;

  transform-origin:
    center bottom !important;

  filter:
    drop-shadow(
      0 16px 18px rgba(58,53,44,.15)
    ) !important;

  will-change:
    transform !important;

  animation:
    v89PetIdle
    4s ease-in-out
    infinite !important;
}


/* =========================
   光环
========================= */

.v89-pet-aura{
  position:absolute !important;

  z-index:4 !important;

  width:270px !important;
  height:270px !important;

  right:-4px !important;
  top:77px !important;

  border-radius:50% !important;

  border:
    1px solid rgba(111,168,102,.17) !important;

  box-shadow:
    inset 0 0 60px rgba(178,218,139,.10) !important;

  pointer-events:none !important;

  animation:
    v89Aura
    6s ease-in-out
    infinite !important;
}


/* =========================
   闪光
========================= */

.v89-fx{
  position:absolute !important;

  z-index:8 !important;

  pointer-events:none !important;

  color:#efc653 !important;

  animation:
    v89Spark
    2.1s ease-in-out
    infinite !important;
}

.v89-fx.fx1{
  right:36% !important;
  top:23% !important;
}

.v89-fx.fx2{
  right:14% !important;
  top:36% !important;

  animation-delay:
    -.7s !important;
}

.v89-fx.fx3{
  right:28% !important;
  top:54% !important;

  color:#fff !important;

  animation-delay:
    -1.25s !important;
}

.v89-fx.fx4{
  right:7% !important;
  top:60% !important;

  color:#e7b244 !important;

  font-size:8px !important;

  animation-delay:
    -1.6s !important;
}


/* 漂浮叶子 */

.v89-leaf{
  position:absolute !important;

  z-index:7 !important;

  pointer-events:none !important;

  font-size:12px !important;

  animation:
    v89Leaf
    5s ease-in-out
    infinite !important;
}

.v89-leaf.l1{
  left:44% !important;
  top:49% !important;
}

.v89-leaf.l2{
  right:7% !important;
  top:43% !important;

  animation-delay:
    -1.7s !important;
}

.v89-leaf.l3{
  left:37% !important;
  top:71% !important;

  animation-delay:
    -3.1s !important;
}


/* =========================
   下方绿色对话框
========================= */

.page[data-page="home"] .hero-caption{
  z-index:15 !important;

  left:14px !important;
  right:14px !important;
  bottom:13px !important;

  min-height:61px !important;

  padding:
    10px 10px
    10px 16px !important;

  border-radius:
    22px !important;

  background:
    linear-gradient(
      135deg,
      rgba(63,135,83,.95),
      rgba(29,89,66,.97)
    ) !important;

  border:
    1px solid rgba(255,255,255,.20) !important;

  box-shadow:
    0 13px 28px rgba(36,92,62,.22),
    inset 0 1px 0 rgba(255,255,255,.16) !important;

  backdrop-filter:
    blur(13px) !important;

  -webkit-backdrop-filter:
    blur(13px) !important;
}

.page[data-page="home"] .hero-caption small{
  margin-bottom:3px !important;

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

  font-size:9px !important;
}

.page[data-page="home"] .hero-caption strong{
  color:#fff !important;

  font-size:14px !important;
  font-weight:850 !important;
}

.page[data-page="home"] .hero-go{
  width:45px !important;
  height:45px !important;

  border-radius:50% !important;

  background:
    linear-gradient(
      145deg,
      #ffda8f,
      #f4b95f
    ) !important;

  color:#432c1f !important;

  font-size:25px !important;

  box-shadow:
    0 5px 0 #ce9451,
    0 8px 15px rgba(38,29,22,.15) !important;

  animation:
    v89Arrow
    2.2s ease-in-out
    infinite !important;
}


/* =========================
   四宫格
========================= */

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

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

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

  gap:9px !important;
}


.page[data-page="home"] .quick-card{
  position:relative !important;

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

  overflow:hidden !important;

  padding:
    10px 10px !important;

  display:grid !important;

  grid-template-columns:
    38px minmax(0,1fr) 10px !important;

  align-items:center !important;

  gap:8px !important;

  border-radius:
    21px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(252,249,242,.95)
    ) !important;

  border:
    1px solid rgba(255,255,255,.96) !important;

  box-shadow:
    0 7px 17px rgba(66,50,38,.07) !important;

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


.page[data-page="home"]
.quick-card:active{
  transform:
    scale(.965) !important;

  box-shadow:
    0 3px 8px rgba(66,50,38,.05) !important;
}


.page[data-page="home"] .quick-icon{
  width:38px !important;
  height:38px !important;

  border-radius:13px !important;

  display:grid !important;
  place-items:center !important;

  font-size:19px !important;

  z-index:4 !important;
}


.page[data-page="home"] .quick-card b{
  position:relative !important;
  z-index:4 !important;

  color:#211c19 !important;

  font-size:13px !important;
  font-weight:850 !important;
}


.page[data-page="home"] .quick-card small{
  position:relative !important;
  z-index:4 !important;

  display:block !important;

  margin-top:2px !important;

  max-width:100% !important;

  color:#91887f !important;

  font-size:8.5px !important;

  white-space:nowrap !important;

  overflow:hidden !important;

  text-overflow:ellipsis !important;
}


.page[data-page="home"] .quick-card i{
  position:relative !important;
  z-index:5 !important;

  color:#aaa198 !important;

  font-size:14px !important;
}


/* 右下角插画 */

.v89-card-art{
  position:absolute !important;

  z-index:2 !important;

  right:-5px !important;
  bottom:-7px !important;

  width:70px !important;
  height:60px !important;

  pointer-events:none !important;

  opacity:.96 !important;
}


.v89-card-art img{
  width:100% !important;
  height:100% !important;

  object-fit:contain !important;

  object-position:
    right bottom !important;

  filter:
    drop-shadow(
      0 5px 5px rgba(58,49,39,.10)
    ) !important;

  animation:
    v89MiniPet
    3.4s ease-in-out
    infinite !important;
}


.v89-card-art .v89-emoji{
  position:absolute !important;

  right:3px !important;
  bottom:4px !important;

  font-size:36px !important;

  filter:
    drop-shadow(
      0 5px 5px rgba(58,49,39,.10)
    ) !important;

  animation:
    v89MiniPet
    3.4s ease-in-out
    infinite !important;
}


/* 给文字留空间 */

.page[data-page="home"]
.quick-card > span:nth-child(2){
  padding-right:28px !important;
}


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

@keyframes v89PetIdle{
  0%,100%{
    transform:
      translate3d(0,0,0)
      rotate(0);
  }

  46%{
    transform:
      translate3d(0,-7px,0)
      rotate(-.45deg);
  }

  55%{
    transform:
      translate3d(0,-6px,0)
      rotate(.45deg);
  }
}


@keyframes v89Aura{
  0%,100%{
    opacity:.45;
    transform:scale(.97);
  }

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


@keyframes v89Spark{
  0%,100%{
    opacity:.20;

    transform:
      scale(.6)
      rotate(0);
  }

  50%{
    opacity:1;

    transform:
      scale(1.25)
      rotate(18deg);
  }
}


@keyframes v89Leaf{
  0%,100%{
    opacity:.40;

    transform:
      translate3d(0,0,0)
      rotate(-8deg);
  }

  50%{
    opacity:.95;

    transform:
      translate3d(8px,-8px,0)
      rotate(15deg);
  }
}


@keyframes v89Arrow{
  0%,100%{
    transform:translateX(0);
  }

  50%{
    transform:translateX(4px);
  }
}


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

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


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

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


@keyframes v89GardenBreath{
  0%,100%{
    opacity:.72;
    transform:translateY(0);
  }

  50%{
    opacity:.95;
    transform:translateY(-2px);
  }
}


/* =========================
   矮屏
========================= */

@media(max-height:760px){

  .page[data-page="home"] .topbar{
    height:48px !important;
    min-height:48px !important;
  }

  .page[data-page="home"] .brand-mark,
  .page[data-page="home"] .top-actions .round-btn{
    width:42px !important;
    height:42px !important;
  }

  .page[data-page="home"] .home-main{
    height:calc(100% - 48px) !important;

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

    gap:7px !important;
  }

  .page[data-page="home"] #homePetHero{
    padding:14px !important;
  }

  .page[data-page="home"] .hero-topline h1{
    font-size:32px !important;
  }

  .v88-home-stats{
    left:14px !important;
    top:80px !important;
  }

  .v88-home-progress{
    left:14px !important;
    top:117px !important;

    width:128px !important;
  }

  .v89-status-line{
    left:15px !important;
    top:180px !important;
  }

  .page[data-page="home"] #homePetImage{
    width:min(78%,330px) !important;
    height:75% !important;

    bottom:49px !important;
  }

}


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

  .page[data-page="home"] *,
  .page[data-page="home"] *::before,
  .page[data-page="home"] *::after{
    animation:none !important;
    transition:none !important;
  }

}