/* 首页专属：二次元品牌形象、月夜壁纸、星光与花瓣。保留游戏轮播交互。 */
#home-view {
  position: relative;
  isolation: isolate;
  background: #141c37;
}

.home-scene {
  position: fixed;
  z-index: 0;
  inset: 0 auto 0 50%;
  width: min(100%, 390px);
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  background: #182344;
}

.home-scene-wallpaper {
  position: absolute;
  inset: -16px;
  background: url("home-assets/moonlit-anime-garden-20261012.png") center center / cover no-repeat;
  animation: home-wallpaper-drift 30s ease-in-out infinite alternate;
}

.home-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 25, 53, 0.18), rgba(14, 20, 45, 0.28) 38%, rgba(12, 19, 40, 0.62));
}

.home-scene-aura {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 30% 43%, rgba(255, 208, 131, 0.16), transparent 30%),
    radial-gradient(ellipse at 78% 12%, rgba(197, 190, 255, 0.22), transparent 32%);
  animation: home-aura-drift 17s ease-in-out infinite alternate;
}

.home-scene-clouds {
  position: absolute;
  z-index: 1;
  left: -25%;
  right: -25%;
  bottom: 5%;
  height: 24%;
  opacity: 0.32;
  background:
    radial-gradient(ellipse at 15% 80%, rgba(151, 172, 217, 0.25), transparent 48%),
    radial-gradient(ellipse at 85% 72%, rgba(181, 167, 223, 0.25), transparent 43%);
  animation: home-cloud-drift 24s ease-in-out infinite alternate;
}

.home-scene-stars,
.home-scene-petals {
  position: absolute;
  z-index: 1;
  inset: 0;
}

.home-scene-stars i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #e7edff;
  box-shadow: 0 0 9px rgba(211, 220, 255, 0.72);
  opacity: 0.45;
  animation: home-star-glow 5s ease-in-out infinite alternate;
}

.home-scene-stars i:nth-child(1) { left: 10%; top: 9%; animation-delay: -2s; }
.home-scene-stars i:nth-child(2) { left: 81%; top: 16%; animation-delay: -4s; }
.home-scene-stars i:nth-child(3) { left: 23%; top: 28%; animation-delay: -1s; }
.home-scene-stars i:nth-child(4) { left: 93%; top: 43%; animation-delay: -3s; }
.home-scene-stars i:nth-child(5) { left: 67%; top: 7%; animation-delay: -2.5s; }
.home-scene-stars i:nth-child(6) { left: 7%; top: 69%; animation-delay: -4.5s; }
.home-scene-stars i:nth-child(7) { left: 57%; top: 83%; animation-delay: -1.5s; }
.home-scene-stars i:nth-child(8) { left: 87%; top: 91%; animation-delay: -3.5s; }

.home-scene-petals i {
  position: absolute;
  top: -12px;
  width: 7px;
  height: 4px;
  border-radius: 90% 10% 85% 15%;
  background: rgba(229, 219, 255, 0.68);
  opacity: 0;
  animation: home-petal-fall 22s linear infinite;
}

.home-scene-petals i:nth-child(1) { left: 6%; animation-delay: -6s; }
.home-scene-petals i:nth-child(2) { left: 24%; animation-delay: -15s; animation-duration: 27s; }
.home-scene-petals i:nth-child(3) { left: 42%; animation-delay: -10s; width: 5px; }
.home-scene-petals i:nth-child(4) { left: 61%; animation-delay: -20s; animation-duration: 30s; }
.home-scene-petals i:nth-child(5) { left: 76%; animation-delay: -3s; }
.home-scene-petals i:nth-child(6) { left: 85%; animation-delay: -12s; width: 5px; }
.home-scene-petals i:nth-child(7) { left: 97%; animation-delay: -18s; animation-duration: 26s; }

#home-view .page {
  z-index: 1;
  background: transparent;
}

#home-view .track-background {
  top: 76px;
  opacity: 0.46;
}

#home-view .topbar {
  top: 13px;
  left: 22px;
  width: 346px;
  height: 79px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

.home-brand-avatar {
  position: relative;
  flex: 0 0 65px;
  width: 65px;
  height: 65px;
  overflow: hidden;
  border: 1px solid rgba(228, 225, 255, 0.44);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(185, 206, 254, 0.3), rgba(135, 111, 203, 0.2));
  box-shadow: 0 4px 22px rgba(112, 143, 211, 0.24);
  animation: home-avatar-float 6s ease-in-out infinite alternate;
}

#home-view .topbar .home-brand-avatar img {
  top: -12%;
  left: -27.5%;
  width: 155%;
  height: 155%;
  object-fit: contain;
}

.home-brand-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.home-brand-copy strong {
  color: #f2f1ff;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.07em;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(29, 31, 63, 0.36);
}

.home-brand-copy span {
  color: #b2bbd7;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.home-header-badge {
  margin-left: auto;
  padding: 6px 8px;
  border: 1px solid rgba(205, 210, 251, 0.22);
  border-radius: 20px;
  color: #c7cbe5;
  background: rgba(25, 34, 65, 0.34);
  font-size: 9px;
  white-space: nowrap;
}

#home-view .section-title {
  top: 112px;
  left: 25px;
  flex-direction: row;
  gap: 1px;
  padding-left: 0;
  color: #e8ecff;
  font-size: 19px;
  font-weight: 550;
  letter-spacing: 0.04em;
  text-shadow: none;
}

#home-view .section-title::before { display: none; }

.home-selector-hint {
  position: absolute;
  z-index: 7;
  top: 118px;
  right: 25px;
  margin: 0;
  color: #a7b2d0;
  font-size: 9px;
  letter-spacing: 0.04em;
}

#home-view .main-card { top: 151px; }
#home-view .shared-base { top: 424px; opacity: 0.9; }
#home-view .arc-carousel { top: 85px; }

.home-review-heading {
  position: absolute;
  left: 25px;
  top: 546px;
  display: grid;
  gap: 7px;
}

.home-review-heading h2 {
  margin: 0;
  color: #ecedff;
  font-size: 20px;
  font-weight: 550;
  letter-spacing: 0.04em;
}

.home-review-heading > span {
  color: #adb7d1;
  font-size: 10px;
}

#home-view .home-review-count {
  left: auto;
  right: 25px;
  top: 549px;
  width: auto;
  min-width: 68px;
  min-height: 24px;
  padding: 5px 9px;
  border-color: rgba(205, 210, 251, 0.2);
  color: #cbd3f0;
  background: rgba(27, 39, 73, 0.62);
  font-size: 10px;
  font-weight: 400;
}

#home-view .home-review-preview {
  left: 24px;
  top: 604px;
  width: 342px;
  height: 123px;
  padding: 18px;
  border-color: rgba(206, 218, 255, 0.23);
  border-radius: 20px;
  color: #ebeeff;
  background: linear-gradient(130deg, rgba(58, 67, 102, 0.66), rgba(22, 34, 61, 0.8));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 26px rgba(6, 13, 31, 0.16);
}

#home-view .home-review-meta { color: #b4c6ea; font-size: 10px; }
#home-view .home-review-meta time { color: #96a7c8; }
#home-view .home-review-preview strong { margin-top: 10px; color: #e1e8ff; font-size: 12px; font-weight: 500; }
#home-view .home-review-preview p { margin-top: 7px; color: #c6d0e7; font-size: 11px; line-height: 1.6; }

#home-view .review-action {
  top: 746px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px;
  border: 1px solid rgba(215, 222, 255, 0.26);
  border-radius: 14px;
  color: #dee6ff;
  background: rgba(43, 57, 92, 0.73);
  font-size: 12px;
  font-weight: 500;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background 180ms ease, transform 180ms ease;
}

#home-view .review-action-center { left: 24px; width: 166px; }
#home-view .review-action-form { left: 200px; width: 166px; background: rgba(120, 143, 192, 0.28); }
#home-view .review-action span { color: #b7c9f2; font-size: 17px; font-weight: 400; }
#home-view .review-action:active { transform: translateY(2px); }
#home-view .review-action:focus-visible { outline-color: #c1cdf6; border-radius: 14px; }

body[data-app-view="home"] .site-icp-footer {
  position: relative;
  z-index: 1;
  background: #111c35;
}

body[data-app-view="home"] .site-icp-footer a { color: #99a9cb; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #home-view .home-review-preview,
  #home-view .review-action { background: rgba(28, 40, 68, 0.97); }
}

@keyframes home-wallpaper-drift {
  from { transform: scale(1.02) translate3d(-4px, 0, 0); }
  to { transform: scale(1.065) translate3d(4px, -6px, 0); }
}

@keyframes home-aura-drift {
  from { transform: translate3d(-3%, 0, 0); opacity: 0.6; }
  to { transform: translate3d(3%, -2%, 0); opacity: 1; }
}

@keyframes home-cloud-drift {
  from { transform: translate3d(-7%, 0, 0); }
  to { transform: translate3d(7%, -3%, 0); }
}

@keyframes home-star-glow {
  from { opacity: 0.18; transform: scale(0.85); }
  to { opacity: 0.78; transform: scale(1.1); }
}

@keyframes home-petal-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  12% { opacity: 0.45; }
  85% { opacity: 0.3; }
  100% { transform: translate3d(-44px, 108vh, 0) rotate(230deg); opacity: 0; }
}

@keyframes home-avatar-float {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-scene-wallpaper,
  .home-scene-aura,
  .home-scene-clouds,
  .home-scene-stars i,
  .home-scene-petals i,
  .home-brand-avatar { animation: none; }
  #home-view .review-action { transition: none; }
}