/* 数星星的牧马人数字庄园｜2026中秋季节层
   目标：轻量、克制、可自动退场。所有选择器均以 ma26- 为前缀，避免污染现有页面。 */
:root {
  --ma26-paper: #F8F3EA;
  --ma26-ink: #2B2118;
  --ma26-text: #463A2E;
  --ma26-muted: #756757;
  --ma26-gold: #D89A2B;
  --ma26-green: #5E7F58;
  --ma26-night: #1F2933;
  --ma26-line: #E5D8C6;
}

html.ma26-active body {
  background-image:
    radial-gradient(circle at 92% 8%, rgba(216,154,43,.08), transparent 24rem),
    linear-gradient(180deg, rgba(255,249,239,.28), transparent 34rem);
}

.ma26-whisper {
  position: relative;
  z-index: 30;
  margin: 0;
  padding: 10px 52px 10px 18px;
  border-bottom: 1px solid rgba(216,154,43,.28);
  background: linear-gradient(90deg, rgba(31,41,51,.97), rgba(43,33,24,.94));
  color: #FFF9EF;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 8px 30px rgba(31,41,51,.08);
}

.ma26-whisper strong {
  color: #F5D58C;
  font-weight: 700;
}

.ma26-whisper a {
  color: #FFF4D4;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.ma26-whisper__close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #FFF9EF;
  cursor: pointer;
  font: inherit;
}

.ma26-whisper__close:hover,
.ma26-whisper__close:focus-visible {
  background: rgba(255,255,255,.16);
  outline: 2px solid rgba(245,213,140,.7);
  outline-offset: 2px;
}

.ma26-sky {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.ma26-moon {
  position: absolute;
  right: clamp(18px, 4vw, 64px);
  top: clamp(78px, 9vw, 118px);
  width: clamp(74px, 9vw, 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .20;
  background:
    radial-gradient(circle at 37% 33%, rgba(255,255,255,.96) 0 10%, transparent 11%),
    radial-gradient(circle at 64% 57%, rgba(126,103,60,.14) 0 8%, transparent 9%),
    radial-gradient(circle at 49% 71%, rgba(126,103,60,.10) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, #FFF7D6 0 58%, #EECF83 73%, #D89A2B 100%);
  box-shadow:
    0 0 30px rgba(216,154,43,.18),
    0 0 80px rgba(216,154,43,.12);
}

.ma26-petal {
  position: absolute;
  top: -18px;
  width: 7px;
  height: 11px;
  border-radius: 70% 30% 60% 40%;
  background: rgba(216,154,43,.46);
  transform: rotate(22deg);
  animation: ma26-fall linear infinite;
}
.ma26-petal:nth-child(2){left:8%;animation-duration:12s;animation-delay:-6s}
.ma26-petal:nth-child(3){left:19%;animation-duration:15s;animation-delay:-10s;transform:scale(.8) rotate(47deg)}
.ma26-petal:nth-child(4){left:34%;animation-duration:13s;animation-delay:-3s}
.ma26-petal:nth-child(5){left:51%;animation-duration:17s;animation-delay:-12s;transform:scale(.7) rotate(73deg)}
.ma26-petal:nth-child(6){left:67%;animation-duration:14s;animation-delay:-8s}
.ma26-petal:nth-child(7){left:79%;animation-duration:18s;animation-delay:-15s;transform:scale(.85) rotate(12deg)}
.ma26-petal:nth-child(8){left:92%;animation-duration:16s;animation-delay:-4s}

@keyframes ma26-fall {
  0% { transform: translate3d(0,-3vh,0) rotate(0deg); opacity: 0; }
  10% { opacity: .72; }
  55% { transform: translate3d(24px,52vh,0) rotate(160deg); opacity: .55; }
  100% { transform: translate3d(-18px,105vh,0) rotate(330deg); opacity: 0; }
}

@media (max-width: 720px) {
  .ma26-whisper { text-align: left; padding-left: 14px; font-size: 13px; }
  .ma26-moon { top: 88px; right: 12px; opacity: .13; }
  .ma26-petal { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .ma26-petal { display:none; }
}

@media print {
  .ma26-whisper, .ma26-sky { display:none !important; }
}
