/* ============================================================================
   采蘑菇的小红帽 · V2 FX 引擎层样式（css/fx.css）
   负责人：Lead（契约见 docs/POLISH.md §3）
   只放 FX 引擎自身需要的层样式：画布定位 + 屏幕震动关键帧。
   任何 UI 美化样式请写在 css/style.css（ui-glow 负责）。
   ========================================================================== */

/* 全屏特效画布：盖在五屏之上，弹窗层（z40）/toast（z60）之下 */
#fx-overlay {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 屏幕震动：由 XXL.FX.shake() 临时加在 .screen--active 上。
   用独立的 translate 属性（与 .screen 的 transform 过渡互不冲突）。 */
.screen.fx-quake {
  animation: fx-quake 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes fx-quake {
  0%,
  100% {
    translate: 0 0;
  }
  10% {
    translate: calc(var(--fx-quake-power, 8px) * -0.7) calc(var(--fx-quake-power, 8px) * 0.25);
  }
  25% {
    translate: calc(var(--fx-quake-power, 8px) * 0.8) calc(var(--fx-quake-power, 8px) * -0.3);
  }
  40% {
    translate: calc(var(--fx-quake-power, 8px) * -0.55) calc(var(--fx-quake-power, 8px) * 0.2);
  }
  55% {
    translate: calc(var(--fx-quake-power, 8px) * 0.45) calc(var(--fx-quake-power, 8px) * -0.15);
  }
  70% {
    translate: calc(var(--fx-quake-power, 8px) * -0.28) calc(var(--fx-quake-power, 8px) * 0.1);
  }
  85% {
    translate: calc(var(--fx-quake-power, 8px) * 0.18) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen.fx-quake {
    animation: none !important;
  }
}