/* ══════════════════════════════════════════════════════════════
   NEW 2048 — SVG 装饰动画
   只动 transform / opacity / stroke-dashoffset，保持 GPU 友好。
   所有动画都挂在 .deco / .svg-anim 作用域下，方便整体降级。
   ══════════════════════════════════════════════════════════════ */

/* ── 通用 ─────────────────────────────────────────────────── */
.deco-svg,
.board__deco,
.el-icon,
.rift-glyph,
.bh-glyph,
.tile-orn,
.logo-orbit,
.flourish {
  display: block;
  pointer-events: none;
  overflow: visible;
}

/* 旋转 / 缩放要绕自身中心 */
.deco-shape,
.rift-glyph__spin,
.bh-glyph__spin,
.tile-orn__spin,
.tile-orn__spin-rev,
.logo-orbit__spin,
.logo-orbit__spin-rev,
.flourish__gem,
.board-frame__pulse {
  transform-box: fill-box;
  transform-origin: center;
}

/* ══════════════════════════════════════════════════════════════
   1. 环境背景层
   ══════════════════════════════════════════════════════════════ */
.deco {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 0.6s ease;
}
/* 装饰层是 #app 的第一个子元素：#app 建立了独立层叠上下文，
   所以 z-index:-1 只会沉到其它内容之下，不会掉到 body 背景后面 */
.deco--ambient { z-index: -1; }

.deco-svg { width: 100%; height: 100%; }

@keyframes deco-spin {
  from { transform: rotate(var(--rot, 0deg)); }
  to { transform: rotate(calc(var(--rot, 0deg) + 360deg)); }
}
@keyframes deco-drift {
  0% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
  50% { transform: translate3d(0, -2.4vmin, 0) rotate(calc(var(--rot, 0deg) + 8deg)); }
  100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
}
@keyframes deco-breathe {
  0%, 100% { opacity: var(--o, 0.2); transform: scale(1) rotate(var(--rot, 0deg)); }
  50% { opacity: calc(var(--o, 0.2) * 2.1); transform: scale(1.09) rotate(calc(var(--rot, 0deg) + 5deg)); }
}

.deco-shape {
  opacity: var(--o, 0.18);
  animation-duration: var(--dur, 22s);
  animation-delay: var(--delay, 0s);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
}
.deco-shape--spin { animation-name: deco-spin; animation-timing-function: linear; }
.deco-shape--drift { animation-name: deco-drift; }
.deco-shape--breathe { animation-name: deco-breathe; }

@keyframes deco-orb {
  0%, 100% { opacity: 0.16; transform: scale(0.7); }
  50% { opacity: 0.85; transform: scale(1.5); }
}
.deco-orb {
  transform-box: fill-box;
  transform-origin: center;
  animation: deco-orb 5.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes deco-grid-slide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-25px, -25px, 0); }
}
.deco-grid {
  animation: deco-grid-slide 24s linear infinite;
}

/* 游戏页里把背景压暗，避免和棋盘抢注意力 */
#app[data-screen="game"] .deco--ambient { opacity: 0.26; }

/* ══════════════════════════════════════════════════════════════
   2. 元素图标（方块角标）
   ══════════════════════════════════════════════════════════════ */
.el-icon {
  width: 100%;
  height: 100%;
  /* 不用 drop-shadow：它是真滤镜，满盘 16 个同时动画时会掉帧 */
  paint-order: stroke fill;
}

@keyframes el-flicker {
  0%, 100% { transform: scale(1) translateY(0); opacity: 1; }
  35% { transform: scale(1.08, 0.94) translateY(0.4px); opacity: 0.92; }
  70% { transform: scale(0.95, 1.07) translateY(-0.5px); opacity: 1; }
}
.el-icon--fire .el-fire__body { transform-box: fill-box; transform-origin: bottom center; animation: el-flicker 0.9s ease-in-out infinite; }
.el-icon--fire .el-fire__core { transform-box: fill-box; transform-origin: bottom center; animation: el-flicker 0.55s ease-in-out infinite reverse; }

@keyframes el-spin-slow { to { transform: rotate(360deg); } }
@keyframes el-shimmer { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.el-icon--ice .el-ice__spokes { transform-box: fill-box; transform-origin: center; animation: el-spin-slow 9s linear infinite; }
.el-icon--ice .el-ice__core { animation: el-shimmer 2.2s ease-in-out infinite; }

@keyframes el-bubble {
  0% { transform: translateY(2.5px) scale(0.6); opacity: 0; }
  30% { opacity: 0.95; }
  100% { transform: translateY(-6px) scale(1.05); opacity: 0; }
}
.el-icon--poison .el-poison__bubble { transform-box: fill-box; transform-origin: center; animation: el-bubble 1.9s ease-out infinite; }
.el-icon--poison .el-poison__bubble--b { animation-delay: 0.55s; animation-duration: 2.3s; }
.el-icon--poison .el-poison__bubble--c { animation-delay: 1.1s; animation-duration: 2.6s; }

@keyframes el-twinkle {
  0%, 100% { transform: rotate(0deg) scale(0.92); opacity: 0.9; }
  50% { transform: rotate(28deg) scale(1.12); opacity: 1; }
}
.el-icon--star .el-star__body { transform-box: fill-box; transform-origin: center; animation: el-twinkle 2.4s ease-in-out infinite; }
@keyframes el-spark { 0%, 60%, 100% { opacity: 0; transform: scale(0.3); } 70% { opacity: 1; transform: scale(1.3); } 85% { opacity: 0; transform: scale(0.6); } }
.el-icon--star .el-star__spark { transform-box: fill-box; transform-origin: center; animation: el-spark 2.4s ease-out infinite; }

@keyframes el-bolt { 0%, 88%, 100% { opacity: 1; } 90% { opacity: 0.35; } 92% { opacity: 1; } 94% { opacity: 0.5; } 96% { opacity: 1; } }
.el-icon--thunder .el-thunder__body { animation: el-bolt 2.6s steps(1, end) infinite; }

.tile__badge {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
}
.tile[data-element="fire"] .tile__badge { color: var(--el-fire); }
.tile[data-element="ice"] .tile__badge { color: var(--el-ice); }
.tile[data-element="poison"] .tile__badge { color: var(--el-poison); }
.tile[data-element="star"] .tile__badge { color: var(--el-star); }
.tile[data-element="thunder"] .tile__badge { color: var(--el-thunder); }

/* ══════════════════════════════════════════════════════════════
   3. 裂隙 / 黑洞
   ══════════════════════════════════════════════════════════════ */
.rift-glyph,
.bh-glyph {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
}
@keyframes glyph-spin { to { transform: rotate(360deg); } }
@keyframes glyph-spin-rev { to { transform: rotate(-360deg); } }
.rift-glyph__spin { animation: glyph-spin 14s linear infinite; }
.bh-glyph__spin { animation: glyph-spin 5.5s linear infinite; }

@keyframes rift-pull {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(0, 26px) scale(0.2); opacity: 0; }
}
.rift-glyph__mote { transform-box: fill-box; transform-origin: center; animation: rift-pull 3.2s ease-in infinite; }
.rift-glyph__mote--b { animation-delay: 1s; animation-duration: 3.6s; }
.rift-glyph__mote--c { animation-delay: 2s; animation-duration: 4.1s; }

@keyframes rift-core { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.35); opacity: 1; } }
.rift-glyph__core, .bh-glyph__core { transform-box: fill-box; transform-origin: center; animation: rift-core 3.4s ease-in-out infinite; }
.bh-glyph__core { animation-duration: 1.5s; }
@keyframes bh-halo { 0%, 100% { transform: scale(1); opacity: 0.45; } 50% { transform: scale(1.22); opacity: 0.9; } }
.bh-glyph__halo { transform-box: fill-box; transform-origin: center; animation: bh-halo 1.5s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════
   4. 高级方块装饰环
   ══════════════════════════════════════════════════════════════ */
.tile-orn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.62;
  mix-blend-mode: soft-light;
}
.tile-orn__spin { animation: glyph-spin 16s linear infinite; }
.tile-orn__spin-rev { animation: glyph-spin-rev 24s linear infinite; }
@keyframes orn-ticks { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }
.tile-orn__ticks { animation: orn-ticks 3s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════
   5. 棋盘边框装饰
   ══════════════════════════════════════════════════════════════ */
.board__deco {
  position: absolute;
  inset: calc(var(--gap) * -1 - 2px);
  width: auto;
  height: auto;
  color: var(--c-accent);
  opacity: 0.5;
  transition: color 0.5s ease, opacity 0.5s ease;
}
@keyframes frame-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.8; } }
.board-frame__corner { animation: frame-breathe 4.5s ease-in-out infinite; }
.board-frame__corner:nth-child(2) { animation-delay: 1.1s; }
.board-frame__corner:nth-child(3) { animation-delay: 2.2s; }
.board-frame__corner:nth-child(4) { animation-delay: 3.3s; }
@keyframes frame-dash { to { stroke-dashoffset: -88; } }
.board-frame__pulse { animation: frame-dash 9s linear infinite; }
@keyframes frame-dot { 0%, 100% { transform: scale(0.7); opacity: 0.5; } 50% { transform: scale(1.35); opacity: 1; } }
.board-frame__dot { transform-box: fill-box; transform-origin: center; animation: frame-dot 2.6s ease-in-out infinite; }

/* 分数阶段越高，边框越亮 */
#app[data-board-stage="0"] .board__deco { color: #5f7bb5; opacity: 0.35; }
#app[data-board-stage="1"] .board__deco { color: var(--c-accent); opacity: 0.5; }
#app[data-board-stage="2"] .board__deco { color: var(--c-accent-2); opacity: 0.62; }
#app[data-board-stage="3"] .board__deco { color: var(--c-gold); opacity: 0.75; }
#app[data-board-stage="4"] .board__deco { color: var(--c-danger); opacity: 0.85; }
.board[data-danger="1"] .board__deco { color: var(--c-danger); opacity: 1; }
@keyframes frame-alarm { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.board[data-danger="1"] .board-frame__corner { animation: frame-alarm 1s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════
   6. 启动页 Logo 轨道
   ══════════════════════════════════════════════════════════════ */
.logo-wrap { position: relative; display: grid; place-items: center; padding: 6px; }
.logo-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(112vw, 460px);
  height: min(112vw, 460px);
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.85;
}
.logo-orbit__spin { animation: glyph-spin 42s linear infinite; }
.logo-orbit__spin-rev { animation: glyph-spin-rev 64s linear infinite; }
@keyframes sat-orbit { to { transform: rotate(360deg); } }
.logo-orbit__sat { transform-box: fill-box; transform-origin: center; animation: sat-orbit 19s linear infinite; }
.logo-orbit__sat-b { animation-delay: -6s; }
.logo-orbit__sat-c { animation-delay: -12s; }

/* ══════════════════════════════════════════════════════════════
   7. 面板标题装饰线
   ══════════════════════════════════════════════════════════════ */
.flourish {
  display: block;
  width: 100%;
  height: 7px;
  margin-top: 5px;
  color: var(--c-accent);
  opacity: 0.5;
}
.panel__title { display: block; }
.panel__title .flourish { max-width: 240px; }
@keyframes flourish-dash { to { stroke-dashoffset: -64; } }
.flourish__line { animation: flourish-dash 6s linear infinite; }
@keyframes flourish-gem { 0%, 100% { transform: rotate(0deg) scale(0.85); opacity: 0.7; } 50% { transform: rotate(180deg) scale(1.15); opacity: 1; } }
.flourish__gem { animation: flourish-gem 3.2s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════
   8. 降级：减少动效 / 低性能设备
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .deco-shape, .deco-orb, .deco-grid,
  .el-icon *, .rift-glyph *, .bh-glyph *, .tile-orn *,
  .board__deco *, .logo-orbit *, .flourish * {
    animation: none !important;
  }
}
#app[data-motion="reduced"] .deco-shape,
#app[data-motion="reduced"] .deco-orb,
#app[data-motion="reduced"] .deco-grid,
#app[data-motion="reduced"] .el-icon *,
#app[data-motion="reduced"] .rift-glyph *,
#app[data-motion="reduced"] .bh-glyph *,
#app[data-motion="reduced"] .tile-orn *,
#app[data-motion="reduced"] .board__deco *,
#app[data-motion="reduced"] .logo-orbit *,
#app[data-motion="reduced"] .flourish * {
  animation: none !important;
}

@media (max-width: 420px) {
  .deco-shape { opacity: calc(var(--o, 0.18) * 0.7); }
}