/* ------------------------------------------------------------------
   六壬式盤 — 玄光星圖
   靛黑夜空、星塵微芒、地支流青光、三傳與貴人鎏金
------------------------------------------------------------------ */

:root {
  --void: #05070F;
  --night-1: #0C1124;
  --night-2: #141B33;

  --star: #E8EDFF;
  --star-dim: #7C89B8;
  --halo: #8E96D8;

  --cyan: #4FD6DE;
  --cyan-soft: #8CEDF2;
  --gold: #FFD873;

  --rule: rgba(124, 140, 220, 0.18);
  --rule-strong: rgba(124, 140, 220, 0.42);

  --display: 'Noto Serif TC', 'Songti TC', 'PMingLiU', 'MingLiU', 'Noto Serif CJK TC', serif;
  --body: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Heiti TC', 'Noto Sans CJK TC', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'PingFang TC', monospace;

  --pad: 1rem;
  --radius: 3px;
  --ease: cubic-bezier(0.22, 0.9, 0.24, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--void);
  color: var(--star);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  position: relative;
}

/* 夜空的星雲暈光。用固定定位的背景層而非 background-attachment: fixed —
   後者在 iOS Safari 獨立模式下會有重繪錯誤，滾動時把別處的內容糊到頁面頂端。 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(88, 74, 190, 0.28) 0%, transparent 70%),
    radial-gradient(70% 40% at 15% 30%, rgba(30, 120, 170, 0.14) 0%, transparent 70%),
    var(--void);
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding:
    env(safe-area-inset-top) calc(var(--pad) + env(safe-area-inset-right))
    calc(4rem + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));
}

/* ---------- 標頭與控制列 ---------- */

header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 2rem 0 1rem;
}

.mark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  color: var(--star);
}

.mark em {
  font-style: normal;
  color: var(--cyan);
  filter: drop-shadow(0 0 8px rgba(79, 214, 222, 0.55));
}

.tagline {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--halo);
  text-transform: uppercase;
}

.bar {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
}

input[type="datetime-local"], select, input[type="number"] {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--star);
  background: var(--night-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.55rem 0.6rem;
  min-width: 0;
}

input[type="datetime-local"] { flex: 1; }
input::-webkit-calendar-picker-indicator { filter: invert(0.8) hue-rotate(180deg); }

button {
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--star);
  background: var(--night-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

button:hover { background: #1D2647; }

button.primary {
  background: transparent;
  border-color: rgba(79, 214, 222, 0.55);
  color: var(--cyan-soft);
  text-shadow: 0 0 10px rgba(79, 214, 222, 0.5);
}

button.primary:hover {
  background: rgba(79, 214, 222, 0.10);
  box-shadow: 0 0 18px rgba(79, 214, 222, 0.18);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- 式盤 ---------- */

.board {
  position: relative;
  margin: 0 auto 1.25rem;
  max-width: 400px;
}

.board svg { display: block; width: 100%; height: auto; overflow: visible; }

/* 天盤整體旋轉 — 月將加時本身就是一次旋轉。
   旋轉中心由巢狀 translate 決定，不用 transform-origin：
   SVG 屬性的 rotate(角度 cx cy) 與 CSS 的 transform-origin 混用時
   Safari 會把兩者疊加，整個群組會被推出畫布並遭裁切。 */
#heaven,
#heaven text {
  transition: transform 900ms var(--ease);
}

.earth-zhi {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  fill: var(--star-dim);
}

/* 天盤地支：流青光 */
.heaven-zhi {
  font-family: var(--display);
  font-weight: 700;
  font-size: 23px;
  fill: var(--cyan-soft);
  filter: drop-shadow(0 0 6px rgba(79, 214, 222, 0.65));
}

/* 三傳所在：鎏金並加重輝光 */
.heaven-zhi.on-tri {
  fill: var(--gold);
  filter: drop-shadow(0 0 10px rgba(255, 216, 115, 0.85));
}

.gen-label {
  font-family: var(--body);
  font-weight: 400;
  font-size: 9.5px;
  fill: var(--halo);
}

.gen-label.noble {
  fill: var(--gold);
  filter: drop-shadow(0 0 6px rgba(255, 216, 115, 0.6));
}

.ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.ring.strong { stroke: var(--rule-strong); stroke-width: 1.25; }
.spoke { stroke: var(--rule); stroke-width: 0.75; }

/* 星塵：極慢的錯落閃爍 */
.star-dust circle {
  fill: var(--star);
  animation: twinkle var(--dur, 5s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.10; }
  50%      { opacity: 0.62; }
}

.core-day {
  font-family: var(--display);
  font-weight: 900;
  font-size: 30px;
  fill: var(--star);
  filter: drop-shadow(0 0 12px rgba(140, 237, 242, 0.35));
}

.core-sub {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--star-dim);
  letter-spacing: 0.08em;
}

/* ---------- 面板 ---------- */

section {
  background: var(--night-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.9rem 1rem 1rem;
  margin-bottom: 0.75rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--halo);
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.course {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.course-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.06em;
  color: var(--star);
}

.course-variant {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--cyan-soft);
  text-shadow: 0 0 10px rgba(79, 214, 222, 0.45);
}

.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.tag {
  font-family: var(--body);
  font-size: 0.6875rem;
  color: var(--halo);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

/* ---------- 四課 ---------- */

.lessons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }

.lesson {
  background: var(--night-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 0.25rem 0.6rem;
  text-align: center;
}

.lesson-no { font-family: var(--mono); font-size: 0.625rem; color: var(--halo); letter-spacing: 0.1em; }
.lesson-gen { font-family: var(--body); font-size: 0.6875rem; color: var(--star-dim); margin: 0.25rem 0 0.3rem; }

.lesson-up {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--cyan-soft);
  text-shadow: 0 0 12px rgba(79, 214, 222, 0.5);
  line-height: 1.15;
}

.lesson-low { font-family: var(--display); font-weight: 500; font-size: 1.375rem; color: var(--star-dim); line-height: 1.2; }

.lesson.picked {
  border-color: rgba(255, 216, 115, 0.7);
  box-shadow: 0 0 20px rgba(255, 216, 115, 0.14) inset;
}

/* ---------- 三傳 ---------- */

.tri { display: flex; align-items: center; gap: 0.4rem; }

.tri-cell {
  flex: 1;
  background: var(--night-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.55rem 0.25rem 0.65rem;
  text-align: center;
}

.tri-cell.initial {
  border-color: rgba(79, 214, 222, 0.55);
  box-shadow: 0 0 22px rgba(79, 214, 222, 0.12) inset;
}

.tri-no { font-family: var(--mono); font-size: 0.625rem; color: var(--halo); letter-spacing: 0.1em; }

.tri-zhi {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.75rem;
  color: var(--star);
  line-height: 1.2;
  margin-top: 0.15rem;
  text-shadow: 0 0 14px rgba(140, 237, 242, 0.35);
}

.tri-cell.initial .tri-zhi {
  color: var(--cyan-soft);
  text-shadow: 0 0 16px rgba(79, 214, 222, 0.6);
}

.tri-gen { font-family: var(--body); font-size: 0.6875rem; color: var(--star-dim); }
.tri-arrow { color: var(--halo); font-family: var(--mono); font-size: 0.875rem; }

/* ---------- 起課時依序浮現 ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.lessons > *, .tri > * { animation: rise 440ms var(--ease) both; }

/* 四課右起一課，故自最右一格先亮 */
.lessons > *:nth-child(1) { animation-delay: 180ms; }
.lessons > *:nth-child(2) { animation-delay: 120ms; }
.lessons > *:nth-child(3) { animation-delay: 60ms; }
.lessons > *:nth-child(4) { animation-delay: 0ms; }

.tri > *:nth-child(1) { animation-delay: 0ms; }
.tri > *:nth-child(2) { animation-delay: 70ms; }
.tri > *:nth-child(3) { animation-delay: 140ms; }
.tri > *:nth-child(4) { animation-delay: 210ms; }
.tri > *:nth-child(5) { animation-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  #heaven, #heaven text { transition: none; }
  .star-dust circle { animation: none; opacity: 0.35; }
  .lessons > *, .tri > * { animation: none; }
}

/* ---------- 取用說明 ---------- */

.reason { font-size: 0.875rem; line-height: 1.75; color: var(--star); margin: 0; }

.rule-id {
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--halo);
  margin-top: 0.6rem;
  letter-spacing: 0.06em;
}

/* ---------- 設定 ---------- */

details summary {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--halo);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  padding: 0.25rem 0;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: '▸ '; }
details[open] summary::before { content: '▾ '; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.85rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-size: 0.6875rem; color: var(--star-dim); }
.field.wide { grid-column: 1 / -1; }

/* 只讓下拉與文字欄位撐滿，核取方塊維持原生尺寸 */
.field select,
.field input:not([type="checkbox"]) { width: 100%; }

.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--star-dim);
  cursor: pointer;
}

.check input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--cyan);
}

.check span { flex: 1 1 auto; min-width: 0; }

footer {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.9;
  color: var(--star-dim);
  text-align: center;
  padding: 1.5rem 0 0;
}

.warn {
  font-size: 0.75rem;
  color: var(--gold);
  margin-top: 0.6rem;
  line-height: 1.6;
}

/* ================================================================
   VFX — 玄光流星版
   保留原靛黑 / 青光 / 鎏金配色，只增加動態層次
================================================================ */

/* 緩慢流動的極光星雲 */
body::before {
  background:
    radial-gradient(70% 45% at 18% 16%, rgba(79, 214, 222, 0.16) 0%, transparent 68%),
    radial-gradient(80% 48% at 84% 8%, rgba(126, 91, 220, 0.24) 0%, transparent 70%),
    radial-gradient(65% 50% at 50% 88%, rgba(29, 76, 155, 0.16) 0%, transparent 72%),
    var(--void);
  background-size: 130% 130%, 145% 145%, 135% 135%, auto;
  animation: nebulaDrift 16s ease-in-out infinite alternate;
}

/* 一道很淡的流星，不干擾閱讀 */
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  top: 9%;
  left: -35vw;
  width: 28vw;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(140,237,242,.18), rgba(232,237,255,.9));
  box-shadow: 0 0 9px rgba(79,214,222,.55);
  transform: rotate(-24deg);
  animation: meteor 9s ease-in infinite;
}

@keyframes nebulaDrift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; filter: saturate(.95); }
  50%  { background-position: 12% 8%, 88% 10%, 42% 92%, 0 0; filter: saturate(1.12); }
  100% { background-position: 4% 14%, 96% 4%, 58% 86%, 0 0; filter: saturate(1.02); }
}

@keyframes meteor {
  0%, 68% { opacity: 0; transform: translate3d(0,0,0) rotate(-24deg); }
  70% { opacity: .85; }
  78% { opacity: 0; transform: translate3d(150vw,58vh,0) rotate(-24deg); }
  100% { opacity: 0; }
}

/* 式盤外圈：雙層旋轉光環 */
.board::before,
.board::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  inset: 1.5%;
  z-index: -1;
}

.board::before {
  background: conic-gradient(from 0deg,
    transparent 0 10%, rgba(79,214,222,.34) 14%, transparent 19% 43%,
    rgba(255,216,115,.25) 48%, transparent 54% 77%, rgba(142,150,216,.30) 83%, transparent 90%);
  filter: blur(13px);
  opacity: .75;
  animation: haloSpin 18s linear infinite;
}

.board::after {
  inset: 8%;
  border: 1px solid rgba(79,214,222,.10);
  box-shadow: 0 0 32px rgba(79,214,222,.09), inset 0 0 28px rgba(126,91,220,.08);
  animation: haloBreathe 4.8s ease-in-out infinite;
}

@keyframes haloSpin { to { transform: rotate(360deg); } }
@keyframes haloBreathe {
  0%,100% { opacity: .45; transform: scale(.985); }
  50% { opacity: 1; transform: scale(1.015); }
}

/* 盤線像星圖一樣呼吸；強環有微弱掃光感 */
.ring { animation: ringPulse 5.5s ease-in-out infinite; }
.ring.strong {
  stroke-dasharray: 4 7;
  animation: ringOrbit 22s linear infinite, ringPulse 4.2s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(79,214,222,.18));
}

@keyframes ringPulse {
  0%,100% { stroke-opacity: .55; }
  50% { stroke-opacity: 1; }
}
@keyframes ringOrbit { to { stroke-dashoffset: -132; } }

/* 天盤青字的光不是死亮，而是有節奏地浮動 */
.heaven-zhi { animation: cyanBreath 3.6s ease-in-out infinite; }
.heaven-zhi.on-tri { animation: goldBreath 2.2s ease-in-out infinite; }
.gen-label.noble { animation: nobleGlow 2.8s ease-in-out infinite; }

@keyframes cyanBreath {
  0%,100% { filter: drop-shadow(0 0 4px rgba(79,214,222,.42)); }
  50% { filter: drop-shadow(0 0 10px rgba(79,214,222,.88)); }
}
@keyframes goldBreath {
  0%,100% { filter: drop-shadow(0 0 6px rgba(255,216,115,.58)); }
  50% { filter: drop-shadow(0 0 15px rgba(255,216,115,1)); }
}
@keyframes nobleGlow {
  0%,100% { opacity: .82; filter: drop-shadow(0 0 4px rgba(255,216,115,.45)); }
  50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255,216,115,.9)); }
}

/* 中央日柱像星核一樣脈動 */
.core-day { animation: corePulse 3.4s ease-in-out infinite; }
@keyframes corePulse {
  0%,100% { filter: drop-shadow(0 0 8px rgba(140,237,242,.25)); }
  50% { filter: drop-shadow(0 0 18px rgba(140,237,242,.62)); }
}

/* 面板玻璃感 + 很淡的光線掃過 */
section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(12,17,36,.96), rgba(20,27,51,.76));
  box-shadow: inset 0 1px 0 rgba(232,237,255,.025), 0 10px 30px rgba(0,0,0,.12);
}
section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(140,237,242,.045) 46%, transparent 70%);
  transform: translateX(-130%);
  animation: panelSweep 11s ease-in-out infinite;
}
section:nth-of-type(2)::after { animation-delay: 1.4s; }
section:nth-of-type(3)::after { animation-delay: 2.8s; }
section:nth-of-type(4)::after { animation-delay: 4.2s; }
section:nth-of-type(5)::after { animation-delay: 5.6s; }
@keyframes panelSweep {
  0%, 72% { transform: translateX(-130%); }
  88%,100% { transform: translateX(150%); }
}

/* 起課鍵保持克制，但有能量脈衝 */
button.primary { animation: primaryPulse 3s ease-in-out infinite; }
@keyframes primaryPulse {
  0%,100% { box-shadow: 0 0 0 rgba(79,214,222,0); }
  50% { box-shadow: 0 0 20px rgba(79,214,222,.16), inset 0 0 14px rgba(79,214,222,.05); }
}

/* 起課瞬間：整個式盤收束後爆亮一次 */
.board.cast-flash { animation: castFlash 820ms var(--ease); }
@keyframes castFlash {
  0% { transform: scale(1); filter: brightness(1); }
  32% { transform: scale(.985); filter: brightness(.92); }
  58% { transform: scale(1.018); filter: brightness(1.38); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .board::before, .board::after,
  .ring, .ring.strong, .heaven-zhi, .heaven-zhi.on-tri,
  .gen-label.noble, .core-day, section::after, button.primary,
  .board.cast-flash { animation: none !important; }
}

/* ===== VFX 2.0：明顯動態星盤 ===== */
body::before {
  background:
    radial-gradient(55% 42% at 20% 20%, rgba(45,230,255,.22), transparent 70%),
    radial-gradient(52% 44% at 82% 38%, rgba(128,75,255,.24), transparent 72%),
    radial-gradient(60% 48% at 48% 86%, rgba(255,190,70,.10), transparent 72%),
    #05070f;
  background-size: 130% 130%, 145% 145%, 125% 125%, auto;
  animation: auroraFlow 8s ease-in-out infinite alternate;
}
@keyframes auroraFlow {
  0% { background-position: -18% -10%, 118% 0%, 45% 115%, 0 0; filter:hue-rotate(0deg) saturate(1); }
  100% { background-position: 25% 22%, 70% 48%, 60% 72%, 0 0; filter:hue-rotate(22deg) saturate(1.35); }
}
.board { isolation:isolate; }
.board::before {
  inset:-4%; z-index:-1; filter:blur(8px); opacity:1;
  background: conic-gradient(from 0deg, transparent 0 5%, rgba(62,236,255,.85) 10%, transparent 16% 30%, rgba(142,92,255,.75) 38%, transparent 46% 62%, rgba(255,216,115,.7) 69%, transparent 77% 90%, rgba(62,236,255,.8) 96%, transparent);
  -webkit-mask:radial-gradient(circle, transparent 0 69%, #000 72% 77%, transparent 80%);
  mask:radial-gradient(circle, transparent 0 69%, #000 72% 77%, transparent 80%);
  animation: superOrbit 5.5s linear infinite;
}
.board::after {
  inset:5%; z-index:-1; border:0;
  background: conic-gradient(from 180deg, transparent 0 18%, rgba(79,214,222,.24) 24%, transparent 31% 56%, rgba(125,83,255,.20) 64%, transparent 72%);
  -webkit-mask:radial-gradient(circle, transparent 0 57%, #000 61% 63%, transparent 66%);
  mask:radial-gradient(circle, transparent 0 57%, #000 61% 63%, transparent 66%);
  animation: superOrbitReverse 9s linear infinite;
}
@keyframes superOrbit { to { transform:rotate(360deg); } }
@keyframes superOrbitReverse { to { transform:rotate(-360deg); } }
.board svg { filter: drop-shadow(0 0 9px rgba(79,214,222,.13)); animation: boardFloat 4s ease-in-out infinite; }
@keyframes boardFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-3px) scale(1.006)} }
.star-dust circle { animation: hyperTwinkle var(--dur,2.5s) ease-in-out var(--delay,0s) infinite; }
@keyframes hyperTwinkle { 0%,100%{opacity:.08} 45%{opacity:.25} 52%{opacity:1;filter:drop-shadow(0 0 3px #fff)} 60%{opacity:.18} }
.heaven-zhi { animation: cyanBreath2 1.8s ease-in-out infinite; }
@keyframes cyanBreath2 { 0%,100%{fill:#7cecf2;filter:drop-shadow(0 0 4px rgba(79,214,222,.55))} 50%{fill:#c4ffff;filter:drop-shadow(0 0 16px rgba(79,214,222,1))} }
.heaven-zhi.on-tri { animation: goldBreath2 1.25s ease-in-out infinite; }
@keyframes goldBreath2 { 0%,100%{fill:#ffd873;filter:drop-shadow(0 0 6px rgba(255,216,115,.7))} 50%{fill:#fff2b0;filter:drop-shadow(0 0 20px rgba(255,216,115,1))} }
.core-day { animation: corePulse2 1.8s ease-in-out infinite; }
@keyframes corePulse2 { 0%,100%{filter:drop-shadow(0 0 7px rgba(140,237,242,.3))} 50%{filter:drop-shadow(0 0 25px rgba(140,237,242,.95));fill:#fff} }
.board.cast-flash { animation: castFlash2 1.15s cubic-bezier(.2,.9,.2,1); }
@keyframes castFlash2 { 0%{transform:scale(1) rotate(0);filter:brightness(1)} 22%{transform:scale(.94) rotate(-1deg);filter:brightness(.8)} 48%{transform:scale(1.055) rotate(1deg);filter:brightness(2) drop-shadow(0 0 30px rgba(79,214,222,.8))} 70%{transform:scale(.99);filter:brightness(1.25)} 100%{transform:scale(1);filter:brightness(1)} }

/* ===== VFX 3.0：起課儀式 ===== */
.board.ritual { z-index:3; }
.board.ritual svg { animation:none; }
.board.ritual .earth-zhi { animation: earthIgnite 1.35s ease both; animation-delay: calc(var(--i) * 55ms); }
@keyframes earthIgnite { 0%{opacity:.22;filter:none} 45%{opacity:1;fill:#d8ffff;filter:drop-shadow(0 0 14px #63f5ff)} 100%{opacity:.8} }
.board.ritual #heaven { animation: heavenRitual 1.35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes heavenRitual { 0%{filter:brightness(.7);opacity:.65} 28%{filter:brightness(2.2) drop-shadow(0 0 18px #62efff);opacity:1} 65%{filter:brightness(1.35)} 100%{filter:brightness(1)} }
.board.ritual .core-day { animation: coreBurst 1.35s ease-out both; }
@keyframes coreBurst { 0%{opacity:.25;filter:blur(3px);transform:scale(.72);transform-origin:center} 38%{opacity:1;fill:#fff;filter:drop-shadow(0 0 30px #72f6ff);transform:scale(1.25)} 68%{filter:drop-shadow(0 0 24px #ffd873);transform:scale(.96)} 100%{transform:scale(1)} }
.board.ritual .on-tri { animation: triLock 1.35s ease both !important; }
@keyframes triLock { 0%,42%{opacity:.25;filter:none} 58%{opacity:1;fill:#fff6c9;filter:drop-shadow(0 0 25px #ffd873)} 75%{transform:scale(1.22)} 100%{transform:scale(1)} }
.board.ritual::before { animation: ritualOrbit .9s cubic-bezier(.1,.8,.2,1) both; }
@keyframes ritualOrbit { 0%{transform:rotate(0) scale(.95);filter:blur(10px);opacity:.3} 55%{transform:rotate(420deg) scale(1.08);filter:blur(5px);opacity:1} 100%{transform:rotate(520deg) scale(1);opacity:.8} }
.board.ritual::after { animation: ritualReverse 1.1s ease-out both; }
@keyframes ritualReverse { 0%{transform:rotate(0);opacity:.2} 60%{transform:rotate(-300deg);opacity:1} 100%{transform:rotate(-360deg);opacity:.6} }
.cast-shock { position:fixed; inset:0; pointer-events:none; z-index:99; background:radial-gradient(circle at 50% 38%,rgba(180,255,255,.34),rgba(72,222,255,.09) 22%,transparent 50%); animation:shock .72s ease-out forwards; }
@keyframes shock { 0%{opacity:0;transform:scale(.65)} 28%{opacity:1} 100%{opacity:0;transform:scale(1.35)} }

/* ===== VFX 4.0 十二天將顯形 ===== */
.spirit-stage{position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}
.spirit-avatar{position:absolute;left:50%;top:50%;width:52%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.35);opacity:0;filter:drop-shadow(0 0 18px currentColor);animation:spiritManifest 1.05s cubic-bezier(.15,.8,.2,1) forwards}
.spirit-avatar svg{width:100%;height:100%;overflow:visible}
.spirit-avatar .sigil{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 6;animation:sigilDraw .8s linear both}
.spirit-avatar .mist{fill:none;stroke:currentColor;stroke-width:7;opacity:.16;filter:blur(5px)}
.spirit-avatar .spirit-name{position:absolute;left:50%;bottom:-7%;transform:translateX(-50%);font-family:'Noto Serif TC',serif;font-weight:900;font-size:22px;letter-spacing:.28em;white-space:nowrap;text-shadow:0 0 16px currentColor}
.spirit-avatar.dragon{color:#65f4df}.spirit-avatar.tiger{color:#f4f7ff}.spirit-avatar.bird{color:#ffb05e}.spirit-avatar.tortoise{color:#8da4ff}.spirit-avatar.snake{color:#c18aff}.spirit-avatar.earthbeast{color:#ffd873}
@keyframes spiritManifest{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-12deg);filter:blur(10px) drop-shadow(0 0 0 currentColor)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(2deg);filter:blur(0) drop-shadow(0 0 30px currentColor)}72%{opacity:.92;transform:translate(-50%,-50%) scale(.98);filter:drop-shadow(0 0 18px currentColor)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18);filter:blur(2px) drop-shadow(0 0 8px currentColor)}}
@keyframes sigilDraw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
.gen-label.spirit-hit{animation:generalHit .75s ease-out both!important}
@keyframes generalHit{0%{fill:#fff;filter:drop-shadow(0 0 18px #fff);font-size:13px}50%{fill:#fff7c2;filter:drop-shadow(0 0 24px currentColor)}100%{}}
.board.spirit-summon{filter:brightness(1.08)}
@media (prefers-reduced-motion:reduce){.spirit-avatar,.spirit-avatar .sigil,.gen-label.spirit-hit{animation:none!important}}

/* ===== VFX 5.0 真・神獸動畫 ===== */
.beast-stage{position:absolute;inset:-8%;z-index:30;pointer-events:none;overflow:visible}
.beast{position:absolute;inset:0;opacity:0;transform-origin:center;will-change:transform,opacity,filter}
.beast-svg{position:absolute;width:76%;height:auto;left:12%;top:22%;overflow:visible;filter:drop-shadow(0 0 10px currentColor) drop-shadow(0 0 22px currentColor)}
.beast-svg *{vector-effect:non-scaling-stroke}
.beast-name{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);font-family:'Noto Serif TC',serif;font-size:26px;font-weight:900;letter-spacing:.34em;color:currentColor;text-shadow:0 0 10px currentColor,0 0 24px currentColor;opacity:0}
.beast-aura{position:absolute;left:50%;top:50%;width:56%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 42%),conic-gradient(from 0deg,transparent,currentColor,transparent,currentColor,transparent);filter:blur(10px);mix-blend-mode:screen}

/* 青龍 */
.beast-dragon{color:#62f5dd}
.beast-dragon .beast-svg path,.beast-dragon .beast-svg circle{fill:rgba(60,219,195,.20);stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.beast-dragon .dragon-body path{fill:rgba(44,190,171,.24)}
.beast-dragon .dragon-spine,.beast-dragon .dragon-belly{fill:none!important;stroke-width:14!important;opacity:.75}
.beast-dragon .dragon-belly{stroke-width:7!important;opacity:.46}
.beast-dragon .dragon-eye{fill:#fff!important;stroke:none!important;filter:drop-shadow(0 0 5px white)}
.beast-dragon .dragon-horn,.beast-dragon .dragon-whisker,.beast-dragon .dragon-claw path{fill:none!important;stroke-width:3!important}
.beast-dragon.play{animation:dragonFlight 2.25s cubic-bezier(.18,.73,.18,1) both}
.beast-dragon.play .dragon-tail{transform-origin:88px 78px;animation:dragonTail .42s ease-in-out infinite alternate}
.beast-dragon.play .dragon-head{transform-origin:260px 90px;animation:dragonHead .48s ease-in-out infinite alternate}
.beast-dragon.play .dragon-claw.front{animation:clawFlex .32s ease-in-out infinite alternate}
.beast-dragon.play .beast-name{animation:nameReveal 2.25s ease both}
.beast-dragon.play .beast-aura{animation:auraBurst 2.25s ease-out both}
@keyframes dragonFlight{0%{opacity:0;transform:translate(-42%,-24%) scale(.42) rotate(-12deg);filter:blur(6px)}18%{opacity:1;transform:translate(-15%,-10%) scale(.72) rotate(-5deg);filter:blur(0)}48%{transform:translate(8%,4%) scale(1.05) rotate(4deg)}72%{transform:translate(20%,-2%) scale(.94) rotate(-3deg)}100%{opacity:0;transform:translate(42%,-18%) scale(.48) rotate(12deg);filter:blur(4px)}}
@keyframes dragonTail{from{transform:rotate(-8deg)}to{transform:rotate(12deg)}}
@keyframes dragonHead{from{transform:rotate(-4deg) translateY(-1px)}to{transform:rotate(5deg) translateY(3px)}}
@keyframes clawFlex{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}

/* 白虎 */
.beast-tiger{color:#f6f8ff}
.beast-tiger .beast-svg path,.beast-tiger .beast-svg circle{fill:rgba(236,241,255,.18);stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.beast-tiger .tiger-stripe,.beast-tiger .tiger-fang{fill:none!important;stroke-width:6!important;opacity:.75}
.beast-tiger .tiger-eye{fill:#fff5b7!important;stroke:none!important;filter:drop-shadow(0 0 7px #fff2a8)}
.beast-tiger.play{animation:tigerRush 1.85s cubic-bezier(.18,.8,.2,1) both}
.beast-tiger.play .tiger-leg.fore{transform-origin:235px 110px;animation:tigerLeg .18s linear infinite alternate}
.beast-tiger.play .tiger-leg.hind{transform-origin:120px 112px;animation:tigerLeg .18s linear infinite alternate-reverse}
.beast-tiger.play .tiger-tail{transform-origin:80px 60px;animation:tigerTail .24s ease-in-out infinite alternate}
.beast-tiger.play .beast-name{animation:nameReveal 1.85s ease both}
.beast-tiger.play .beast-aura{animation:auraBurst 1.85s ease-out both}
@keyframes tigerRush{0%{opacity:0;transform:translate(-55%,6%) scale(.55);filter:blur(8px)}22%{opacity:1;transform:translate(-23%,0) scale(.82);filter:blur(0)}55%{transform:translate(3%,-2%) scale(1.08)}70%{transform:translate(10%,1%) scale(.98)}100%{opacity:0;transform:translate(54%,-4%) scale(.7);filter:blur(5px)}}
@keyframes tigerLeg{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
@keyframes tigerTail{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}

/* 朱雀 */
.beast-bird{color:#ff9f43}
.beast-bird .beast-svg path,.beast-bird .beast-svg circle{fill:rgba(255,120,45,.18);stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.beast-bird .bird-eye{fill:#fff9cf!important;stroke:none!important;filter:drop-shadow(0 0 7px #fff)}
.beast-bird .feather,.beast-bird .bird-tail path,.beast-bird .bird-crown{fill:none!important;stroke-width:3!important}
.beast-bird.play{animation:birdSoar 2.05s cubic-bezier(.2,.8,.2,1) both}
.beast-bird.play .bird-wing.left{transform-origin:151px 94px;animation:wingLeft .27s ease-in-out infinite alternate}
.beast-bird.play .bird-wing.right{transform-origin:194px 94px;animation:wingRight .27s ease-in-out infinite alternate}
.beast-bird.play .bird-tail{transform-origin:158px 124px;animation:birdTail .42s ease-in-out infinite alternate}
.beast-bird.play .beast-name{animation:nameReveal 2.05s ease both}
.beast-bird.play .beast-aura{animation:auraBurst 2.05s ease-out both}
@keyframes birdSoar{0%{opacity:0;transform:translate(-28%,28%) scale(.45) rotate(-10deg);filter:blur(7px)}25%{opacity:1;transform:translate(-10%,8%) scale(.78) rotate(-4deg);filter:blur(0)}58%{transform:translate(6%,-8%) scale(1.06) rotate(3deg)}100%{opacity:0;transform:translate(32%,-34%) scale(.55) rotate(11deg);filter:blur(5px)}}
@keyframes wingLeft{from{transform:rotate(14deg)}to{transform:rotate(-18deg)}}
@keyframes wingRight{from{transform:rotate(-14deg)}to{transform:rotate(18deg)}}
@keyframes birdTail{from{transform:rotate(-6deg)}to{transform:rotate(7deg)}}

/* 玄武 */
.beast-tortoise{color:#92a8ff}
.beast-tortoise .beast-svg path,.beast-tortoise .beast-svg circle,.beast-tortoise .beast-svg ellipse{fill:rgba(92,121,218,.18);stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.beast-tortoise .shell-line,.beast-tortoise .xuanwu-snake>path:first-child{fill:none!important;stroke-width:3!important}
.beast-tortoise .tortoise-eye{fill:#e9f3ff!important;stroke:none!important}
.beast-tortoise.play{animation:xuanwuRise 2.25s ease both}
.beast-tortoise.play .xuanwu-snake{transform-origin:78px 86px;animation:xuanwuSnake .5s ease-in-out infinite alternate}
.beast-tortoise.play .tortoise-leg.leg1{animation:slowStep .55s ease-in-out infinite alternate}
.beast-tortoise.play .tortoise-leg.leg2{animation:slowStep .55s ease-in-out infinite alternate-reverse}
.beast-tortoise.play .beast-name{animation:nameReveal 2.25s ease both}
.beast-tortoise.play .beast-aura{animation:auraBurst 2.25s ease-out both}
@keyframes xuanwuRise{0%{opacity:0;transform:translate(0,20%) scale(.55);filter:blur(8px) brightness(.7)}28%{opacity:1;transform:translate(0,7%) scale(.82);filter:blur(0) brightness(1.1)}62%{transform:translate(0,-2%) scale(1.03);filter:drop-shadow(0 0 20px currentColor)}100%{opacity:0;transform:translate(0,-8%) scale(1.12);filter:blur(4px)}}
@keyframes xuanwuSnake{from{transform:rotate(-7deg)}to{transform:rotate(8deg)}}
@keyframes slowStep{from{transform:translateY(0)}to{transform:translateY(5px)}}

/* 螣蛇 */
.beast-snake{color:#c98cff}
.beast-snake .beast-svg path,.beast-snake .beast-svg circle{fill:rgba(153,83,218,.15);stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.beast-snake .snake-body>path:first-child,.beast-snake .snake-glow{fill:none!important;stroke-width:16!important}
.beast-snake .snake-glow{stroke-width:5!important;opacity:.8;filter:drop-shadow(0 0 8px currentColor)}
.beast-snake .snake-eye{fill:#fff!important;stroke:none!important}
.beast-snake .snake-tongue{fill:none!important;stroke-width:3!important}
.beast-snake.play{animation:snakeOrbit 2.25s cubic-bezier(.2,.75,.2,1) both}
.beast-snake.play .snake-body{transform-origin:155px 96px;animation:snakeSlither .38s ease-in-out infinite alternate}
.beast-snake.play .snake-head{transform-origin:235px 102px;animation:snakeHead .28s ease-in-out infinite alternate}
.beast-snake.play .beast-name{animation:nameReveal 2.25s ease both}
.beast-snake.play .beast-aura{animation:auraBurst 2.25s ease-out both}
@keyframes snakeOrbit{0%{opacity:0;transform:translate(-18%,20%) scale(.52) rotate(-16deg);filter:blur(7px)}24%{opacity:1;transform:translate(-6%,8%) scale(.78) rotate(-6deg);filter:blur(0)}57%{transform:translate(5%,-2%) scale(1.04) rotate(7deg)}100%{opacity:0;transform:translate(22%,-20%) scale(.62) rotate(19deg);filter:blur(4px)}}
@keyframes snakeSlither{from{transform:skewX(-3deg) scaleY(.98)}to{transform:skewX(4deg) scaleY(1.03)}}
@keyframes snakeHead{from{transform:rotate(-5deg)}to{transform:rotate(7deg)}}

/* 共通 */
.beast.play .beast-aura{opacity:1}
@keyframes auraBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}35%{opacity:.72;transform:translate(-50%,-50%) scale(1.05) rotate(110deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55) rotate(280deg)}}
@keyframes nameReveal{0%,32%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.8)}48%,72%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);filter:drop-shadow(0 0 10px currentColor)}100%{opacity:0;transform:translateX(-50%) translateY(-8px) scale(1.05)}}
.gen-label.spirit-hit{animation:generalHitV5 .95s ease-out both!important}
@keyframes generalHitV5{0%{filter:drop-shadow(0 0 0 transparent)}35%{fill:#fff!important;filter:drop-shadow(0 0 18px currentColor) drop-shadow(0 0 28px currentColor);transform:scale(1.22);transform-origin:center}100%{transform:scale(1)}}
@media (max-width:520px){.beast-svg{width:92%;left:4%;top:24%}.beast-name{font-size:22px;bottom:6%}}
@media (prefers-reduced-motion:reduce){.beast,.beast *{animation:none!important}.beast{display:none!important}}

/* VFX 6.0 — 實體神獸，不再用線稿 */
.beast-stage-v6{position:absolute;inset:-14%;z-index:45;pointer-events:none;overflow:visible}
.beast-v6{position:absolute;inset:0;opacity:0;transform-origin:50% 50%;will-change:transform,opacity,filter}
.beast-v6-img{position:absolute;left:50%;top:50%;width:82%;height:82%;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 0 10px rgba(255,255,255,.55)) drop-shadow(0 0 28px currentColor);mix-blend-mode:screen}
.beast-v6-glow{position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,currentColor 0%,transparent 65%);filter:blur(34px);opacity:.18}
.beast-v6-name{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);font-family:'Noto Serif TC',serif;font-size:27px;font-weight:900;letter-spacing:.35em;color:currentColor;text-shadow:0 0 12px currentColor,0 0 30px currentColor;opacity:0}
.beast-v6-dragon{color:#5ef2d9}.beast-v6-tiger{color:#f5f7ff}.beast-v6-bird{color:#ff8b3d}.beast-v6-tortoise{color:#7b96ff}.beast-v6-snake{color:#c178ff}
.beast-v6-dragon.play{animation:v6Dragon 2.75s cubic-bezier(.14,.78,.17,1) both}
.beast-v6-tiger.play{animation:v6Tiger 2.45s cubic-bezier(.12,.77,.18,1) both}
.beast-v6-bird.play{animation:v6Bird 2.55s cubic-bezier(.13,.75,.19,1) both}
.beast-v6-tortoise.play{animation:v6Xuanwu 2.8s ease both}
.beast-v6-snake.play{animation:v6Snake 2.7s cubic-bezier(.15,.73,.18,1) both}
.beast-v6.play .beast-v6-name{animation:v6Name 2.5s ease both}
.beast-v6.play .beast-v6-glow{animation:v6Glow 2.5s ease both}

@keyframes v6Dragon{0%{opacity:0;transform:translate(-72%,-18%) scale(.42) rotate(-18deg);filter:blur(9px)}18%{opacity:1;filter:blur(0)}48%{transform:translate(8%,-8%) scale(1.12) rotate(7deg)}70%{transform:translate(-3%,4%) scale(.96) rotate(-2deg)}100%{opacity:0;transform:translate(34%,-18%) scale(.58) rotate(13deg);filter:blur(6px)}}
@keyframes v6Tiger{0%{opacity:0;transform:translate(-80%,20%) scale(.5);filter:blur(7px)}22%{opacity:1;filter:blur(0)}50%{transform:translate(7%,0) scale(1.16)}58%{transform:translate(4%,1%) scale(1.12) rotate(-2deg)}66%{transform:translate(6%,-1%) scale(1.16) rotate(2deg)}100%{opacity:0;transform:translate(45%,-5%) scale(.72);filter:blur(5px)}}
@keyframes v6Bird{0%{opacity:0;transform:translate(-16%,48%) scale(.44) rotate(-12deg);filter:blur(8px)}20%{opacity:1;filter:blur(0)}48%{transform:translate(3%,-7%) scale(1.14) rotate(4deg)}72%{transform:translate(-5%,-12%) scale(1.02) rotate(-3deg)}100%{opacity:0;transform:translate(23%,-55%) scale(.56) rotate(14deg);filter:blur(6px)}}
@keyframes v6Xuanwu{0%{opacity:0;transform:translate(0,24%) scale(.5);filter:blur(10px)}24%{opacity:1;filter:blur(0)}52%{transform:translate(0,0) scale(1.08)}76%{transform:translate(0,-2%) scale(1)}100%{opacity:0;transform:translate(0,-8%) scale(.78);filter:blur(6px)}}
@keyframes v6Snake{0%{opacity:0;transform:translate(-40%,22%) scale(.45) rotate(-22deg);filter:blur(9px)}20%{opacity:1;filter:blur(0)}45%{transform:translate(4%,-4%) scale(1.12) rotate(12deg)}68%{transform:translate(-4%,2%) scale(.98) rotate(-7deg)}100%{opacity:0;transform:translate(38%,-20%) scale(.62) rotate(25deg);filter:blur(6px)}}
@keyframes v6Name{0%,22%{opacity:0;transform:translateX(-50%) translateY(12px)}42%,72%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}
@keyframes v6Glow{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}35%{opacity:.28;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
@media(max-width:520px){.beast-v6-img{width:94%;height:94%}.beast-v6-name{font-size:22px;bottom:7%}}
@media(prefers-reduced-motion:reduce){.beast-v6{display:none!important}}

/* VFX 7.0 — 東方玄幻 × 星宿 × 半透明靈獸 */
.beast-stage-v6{inset:-20%;z-index:55;overflow:visible;filter:saturate(1.15)}
.beast-v6-img{width:96%;height:70%;object-fit:contain;mix-blend-mode:screen;opacity:.98;-webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 50%,#000 48%,rgba(0,0,0,.85) 66%,transparent 100%);mask-image:radial-gradient(ellipse 72% 62% at 50% 50%,#000 48%,rgba(0,0,0,.85) 66%,transparent 100%)}
.beast-v6-glow{width:86%;background:radial-gradient(circle,currentColor 0%,rgba(80,160,255,.16) 30%,transparent 70%);filter:blur(42px)}
.beast-v6-name{bottom:9%;font-size:25px;text-shadow:0 0 10px #000,0 0 16px currentColor,0 0 35px currentColor}
.beast-v6-dragon.play{animation:v7Dragon 3.4s cubic-bezier(.16,.8,.2,1) both}
.beast-v6-tiger.play{animation:v7Tiger 2.8s cubic-bezier(.12,.8,.2,1) both}
.beast-v6-bird.play{animation:v7Bird 3s cubic-bezier(.15,.75,.2,1) both}
.beast-v6-tortoise.play{animation:v7Xuanwu 3.2s ease both}
.beast-v6-snake.play{animation:v7Snake 3.1s cubic-bezier(.15,.75,.18,1) both}
@keyframes v7Dragon{0%{opacity:0;transform:translate(-42%,-28%) scale(.5) rotate(-24deg);filter:blur(12px) brightness(.7)}16%{opacity:.85;filter:blur(2px) brightness(1.3)}38%{transform:translate(8%,-16%) scale(1.08) rotate(6deg);filter:blur(0) brightness(1.45) drop-shadow(0 0 25px #29d9ff)}60%{transform:translate(5%,10%) scale(1.22) rotate(16deg);filter:brightness(1.3) drop-shadow(0 0 35px #36e6ff)}78%{transform:translate(-8%,4%) scale(.96) rotate(-3deg);opacity:.95}100%{opacity:0;transform:translate(2%,0) scale(.28) rotate(8deg);filter:blur(10px) brightness(2)}}
@keyframes v7Tiger{0%{opacity:0;transform:translate(-58%,8%) scale(.42);filter:blur(10px)}20%{opacity:.95;transform:translate(-18%,1%) scale(.8);filter:blur(1px) brightness(1.3)}48%{transform:translate(8%,-2%) scale(1.25);filter:brightness(1.55) drop-shadow(0 0 32px #dbe8ff)}68%{transform:translate(2%,1%) scale(1.12)}100%{opacity:0;transform:translate(0,0) scale(.3);filter:blur(10px) brightness(2)}}
@keyframes v7Bird{0%{opacity:0;transform:translate(-18%,42%) scale(.4) rotate(-14deg);filter:blur(12px)}20%{opacity:.9;filter:blur(1px) brightness(1.4)}48%{transform:translate(4%,-4%) scale(1.2) rotate(4deg);filter:brightness(1.6) drop-shadow(0 0 34px #ff5a24)}70%{transform:translate(-3%,-12%) scale(1.05) rotate(-4deg)}100%{opacity:0;transform:translate(0,0) scale(.28);filter:blur(10px) brightness(2.2)}}
@keyframes v7Xuanwu{0%{opacity:0;transform:translate(0,25%) scale(.45);filter:blur(13px)}25%{opacity:.9;filter:blur(1px) brightness(1.3)}52%{transform:translate(0,1%) scale(1.16);filter:brightness(1.45) drop-shadow(0 0 34px #557dff)}75%{transform:translate(0,-2%) scale(1.05)}100%{opacity:0;transform:translate(0,0) scale(.3);filter:blur(11px) brightness(2)}}
@keyframes v7Snake{0%{opacity:0;transform:translate(-32%,24%) scale(.42) rotate(-22deg);filter:blur(12px)}22%{opacity:.9;filter:blur(1px) brightness(1.35)}48%{transform:translate(5%,-3%) scale(1.2) rotate(11deg);filter:brightness(1.55) drop-shadow(0 0 34px #9e48ff)}70%{transform:translate(-4%,2%) scale(1.04) rotate(-8deg)}100%{opacity:0;transform:translate(0,0) scale(.28) rotate(4deg);filter:blur(10px) brightness(2.1)}}
.board.ritual::after{content:"";position:absolute;inset:8%;border-radius:50%;pointer-events:none;z-index:50;background:conic-gradient(from 0deg,transparent 0 12%,rgba(83,220,255,.45) 14%,transparent 17% 42%,rgba(255,198,77,.4) 45%,transparent 48% 73%,rgba(159,85,255,.38) 76%,transparent 80%);-webkit-mask:radial-gradient(circle,transparent 0 59%,#000 61% 64%,transparent 66%);mask:radial-gradient(circle,transparent 0 59%,#000 61% 64%,transparent 66%);animation:v7Seal 1.45s ease-out both}
@keyframes v7Seal{0%{opacity:0;transform:scale(.7) rotate(-45deg)}35%{opacity:1;transform:scale(1.04) rotate(55deg)}100%{opacity:0;transform:scale(1.18) rotate(150deg)}}
@media(max-width:520px){.beast-stage-v6{inset:-12%}.beast-v6-img{width:112%;height:76%}.beast-v6-name{bottom:5%;font-size:21px}}