/* ==========================================================================
   动效与响应式：关键帧、入场、窄屏布局、减少动效
   放在最后加载，确保媒体查询覆盖前面的基础样式。
   ========================================================================== */

@keyframes moonFloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(7px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
@keyframes starDrift{to{background-position:0 160px,0 -120px,0 100px,0 -80px}}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,-25%) scale(.84)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-160px) scale(1.02)}
}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) translateX(8px)}to{opacity:1;transform:none}}
@keyframes bought{0%{transform:scale(1)}32%{transform:scale(1.012);background:rgba(184,220,196,.11)}100%{transform:scale(1)}}
@keyframes deny{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}55%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
@keyframes eclipse{0%{opacity:0}18%{opacity:1}72%{opacity:.9}100%{opacity:0}}
@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.topbar,.game-grid,.footer{animation:reveal .6s ease both}
.game-grid{animation-delay:.05s}
.footer{animation-delay:.12s}

@media (max-width:1100px){
  .tagline{display:none}
  .game-grid{grid-template-columns:minmax(0,1.2fr) minmax(370px,.82fr)}
  .moon{width:250px}
  .balance{font-size:58px}
}
@media (max-width:900px){
  .game-grid{grid-template-columns:1fr}
  .moon-card{height:auto;min-height:610px}
  .shop{height:auto;min-height:0}
  .scroll-list{max-height:560px}
  .top-mid{display:flex}
  .footer{margin-top:16px}
}
@media (max-width:640px){
  .app{padding:0 14px 20px}
  .topbar{padding:16px 0 14px;gap:12px}
  .brand-mark{width:36px;height:36px;font-size:24px}
  .brand h1{font-size:22px;letter-spacing:.12em}
  .brand p{display:none}
  .icon-btn{width:34px;height:34px}
  .top-mid{display:none}
  .game-grid{gap:12px}
  .panel{border-radius:18px}
  .moon-card{min-height:580px;padding:20px 18px 16px}
  .balance{font-size:46px;gap:8px}
  .balance small{font-size:10px}
  .rate-chip{padding:7px 10px}
  .rate-chip b{font-size:18px}
  .orb-wrap{min-height:285px}
  .moon{width:206px}
  .orbit-line{width:290px;height:290px}
  .orbit-ring{width:330px;height:108px}
  .resonance{width:94%;margin-bottom:11px}
  .resonance-head small{display:none}
  .stat-grid{grid-template-columns:1fr 1fr;gap:9px 0;padding:10px 0}
  .stat-grid>div{padding:0 10px}
  .stat-grid>div:nth-child(3){border-left:0;padding-left:0}
  .stat-grid b{font-size:17px}
  .goal-line{padding-top:11px;gap:7px}
  .goal-line p{font-size:11.5px}
  .shop-head{padding:19px 16px 13px}
  .shop-heading{margin-bottom:12px}
  .shop-heading h2{font-size:24px}
  .panel-bar{padding:9px 14px;font-size:10px}
  .buy-modes button{padding:5px 7px}
  .scroll-list{padding:0 12px 14px 16px;max-height:520px}
  .shop-card{grid-template-columns:34px minmax(0,1fr) 70px;gap:8px;padding:9px}
  .shop-glyph{width:34px;height:34px;font-size:18px}
  .shop-name{font-size:15.5px}
  .shop-desc{display:none}
  .price strong{font-size:17px}
  .archive{padding:12px 14px}
  .archive-bonus{font-size:10px}
  .ach{width:32px;height:32px;flex-basis:32px;font-size:15px}
  .footer-quote{display:none}
  .footer-line{gap:12px}
  .toast-stack{left:14px;right:14px;bottom:14px;align-items:stretch}
  .toast{width:auto}
  .modal{padding:24px 20px 20px}
  .modal h3{font-size:23px}
  .prestige-metrics b{font-size:16px}
  .prestige-hero{padding-left:4px;padding-right:4px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}