/* Extracted from iching-divination.css — cast + hex display animations only */
:root {
  --ic-gold: var(--qmf-color-primary, #4f46e5);
  --ic-yang: var(--qmf-color-primary, #4f46e5);
  --ic-yin: var(--qmf-color-gray-700, #374151);
  --ic-primary: var(--qmf-text-primary, #111827);
  --ic-font-han: "Noto Serif SC", "Songti SC", serif;
  --qmf-text: var(--qmf-text-primary, #111827);
  --qmf-text-muted: var(--qmf-text-muted, #9ca3af);
  --qmf-border: var(--qmf-border-color, #e5e7eb);
  --qmf-bg: var(--qmf-bg-secondary, #f9fafb);
}
.hidden { display:none !important; }

/* ═══════ HEXAGRAM VISUAL ═══════ */
.hex-visual-row {
    display: flex; align-items: center; justify-content: center; gap: 22px;
    padding: 20px 0; flex-wrap: wrap;
}
.hex-column { text-align: center; min-width: 88px; }
.hex-label {
    font-size: 11px; font-weight: 600; color: var(--qmf-text-secondary, #4b5563);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
#nuclear-hex-col .hex-label {
    color: var(--qmf-color-info-dark, #1d4ed8);
    letter-spacing: .5px;
}
[data-theme="dark"] #nuclear-hex-col .hex-label { color: var(--qmf-color-info-light, #93c5fd); }
.hex-figure { display: flex; flex-direction: column-reverse; gap: 5px; align-items: center; }
.hex-line {
    height: 6px; border-radius: 2px; transition: background .3s;
}
.hex-line.yang { width: 60px; background: var(--ic-yang); }
.hex-line.yin { width: 60px; display: flex; gap: 10px; }
.hex-line.yin::before, .hex-line.yin::after {
    content: ''; flex: 1; height: 6px; background: var(--ic-yin); border-radius: 2px;
}
#nuclear-hex-col .hex-line.yang {
    background: var(--qmf-color-info, #3b82f6);
}
#nuclear-hex-col .hex-line.yin::before,
#nuclear-hex-col .hex-line.yin::after {
    background: var(--qmf-color-info-dark, #1d4ed8);
}
.hex-line.moving { position: relative; }
.hex-line.moving::after {
    content: '◯'; position: absolute; right: -20px; top: -5px; font-size: 12px;
    color: var(--ic-gold); font-weight: bold;
}
.hex-line.yin.moving::after { right: -20px; }

.hex-name {
    margin-top: 10px; font-size: 15px; font-weight: 800;
    color: var(--qmf-text);
}
.hex-name .han { font-size: 18px; display: block; color: var(--ic-primary); }
#nuclear-hex-col .hex-name .han { color: var(--qmf-color-info-dark, #1d4ed8); }
[data-theme="dark"] #nuclear-hex-col .hex-name .han { color: var(--qmf-color-info-light, #93c5fd); }

.hex-arrow {
    font-size: 18px; color: var(--ic-faint, var(--qmf-text-muted));
    opacity: 0.9; flex-shrink: 0;
}
#hex-arrow-to-nuclear { color: var(--qmf-color-info, #3b82f6); opacity: 0.7; }
[data-theme="dark"] #hex-arrow-to-nuclear { color: var(--qmf-color-info-light, #93c5fd); }

/* ─── Hex Visual Animations ─── */
@keyframes hexLineReveal {
    0% { opacity: 0; transform: scaleX(0); }
    60% { opacity: 1; transform: scaleX(1.08); }
    100% { opacity: 1; transform: scaleX(1); }
}
@keyframes hexLinePulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}
@keyframes hexArrowSlide {
    0% { opacity: 0; transform: translateX(-12px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes hexColFade {
    0% { opacity: 0; transform: translateY(10px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hexNameReveal {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes hexLabelDrop {
    0% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes movingGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
    50% { box-shadow: 0 0 8px 2px rgba(212,175,55,0.35); }
}
@keyframes nuclearGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.25); }
}

/* Animated state (added via JS) — sequence: Chủ → Hỗ → Biến */
.hex-visual-row.animated .hex-label {
    animation: hexLabelDrop 0.35s ease-out both;
}
.hex-visual-row.animated #primary-hex-col .hex-label { animation-delay: 0.02s; }
.hex-visual-row.animated #nuclear-hex-col .hex-label { animation-delay: 0.55s; }
.hex-visual-row.animated #changed-hex-col .hex-label { animation-delay: 1.05s; }

.hex-visual-row.animated .hex-line {
    opacity: 0; transform-origin: left center;
    animation: hexLineReveal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hex-visual-row.animated #primary-hex-col .hex-line:nth-child(1) { animation-delay: 0.08s; }
.hex-visual-row.animated #primary-hex-col .hex-line:nth-child(2) { animation-delay: 0.16s; }
.hex-visual-row.animated #primary-hex-col .hex-line:nth-child(3) { animation-delay: 0.24s; }
.hex-visual-row.animated #primary-hex-col .hex-line:nth-child(4) { animation-delay: 0.32s; }
.hex-visual-row.animated #primary-hex-col .hex-line:nth-child(5) { animation-delay: 0.40s; }
.hex-visual-row.animated #primary-hex-col .hex-line:nth-child(6) { animation-delay: 0.48s; }

.hex-visual-row.animated .hex-line.moving {
    animation: hexLineReveal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               movingGlow 1.6s ease-in-out 0.9s infinite;
    border-radius: 3px;
}

.hex-visual-row.animated #primary-hex-col .hex-name {
    animation: hexNameReveal 0.4s ease-out 0.55s both;
}

.hex-visual-row.animated #hex-arrow-to-nuclear {
    animation: hexArrowSlide 0.35s ease-out 0.58s both;
}
.hex-visual-row.animated #hex-arrow-to-nuclear i {
    display: inline-block;
    animation: nuclearGlow 2.2s ease-in-out 1s infinite;
}

.hex-visual-row.animated #nuclear-hex-col {
    animation: hexColFade 0.45s ease-out 0.62s both;
}
.hex-visual-row.animated #nuclear-hex-col .hex-line:nth-child(1) { animation-delay: 0.66s; }
.hex-visual-row.animated #nuclear-hex-col .hex-line:nth-child(2) { animation-delay: 0.72s; }
.hex-visual-row.animated #nuclear-hex-col .hex-line:nth-child(3) { animation-delay: 0.78s; }
.hex-visual-row.animated #nuclear-hex-col .hex-line:nth-child(4) { animation-delay: 0.84s; }
.hex-visual-row.animated #nuclear-hex-col .hex-line:nth-child(5) { animation-delay: 0.90s; }
.hex-visual-row.animated #nuclear-hex-col .hex-line:nth-child(6) { animation-delay: 0.96s; }
.hex-visual-row.animated #nuclear-hex-col .hex-name {
    animation: hexNameReveal 0.4s ease-out 1.02s both;
}

.hex-visual-row.animated #hex-arrow-to-changed {
    animation: hexArrowSlide 0.35s ease-out 1.08s both;
}
.hex-visual-row.animated #hex-arrow-to-changed i {
    display: inline-block;
    animation: hexLinePulse 2s ease-in-out 1.4s infinite;
}

.hex-visual-row.animated #changed-hex-col {
    animation: hexColFade 0.45s ease-out 1.12s both;
}
.hex-visual-row.animated #changed-hex-col .hex-line:nth-child(1) { animation-delay: 1.16s; }
.hex-visual-row.animated #changed-hex-col .hex-line:nth-child(2) { animation-delay: 1.22s; }
.hex-visual-row.animated #changed-hex-col .hex-line:nth-child(3) { animation-delay: 1.28s; }
.hex-visual-row.animated #changed-hex-col .hex-line:nth-child(4) { animation-delay: 1.34s; }
.hex-visual-row.animated #changed-hex-col .hex-line:nth-child(5) { animation-delay: 1.40s; }
.hex-visual-row.animated #changed-hex-col .hex-line:nth-child(6) { animation-delay: 1.46s; }

.hex-visual-row.animated #changed-hex-col .hex-name {
    animation: hexNameReveal 0.4s ease-out 1.52s both;
}

/* ═══════ CASTING OVERLAY (Enhanced 3D Coin) ═══════ */
.casting-overlay {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: radial-gradient(ellipse at center, #1a1510 0%, #0a0806 70%, #000 100%);
    flex-direction: column;
    align-items: center; justify-content: center; gap: 22px;
}
.casting-overlay.show { display: flex; }
.casting-title {
    font-size: 22px; font-weight: 800; color: var(--ic-gold);
    letter-spacing: 2px; text-align: center;
    text-shadow: 0 0 18px rgba(212,175,55,0.35);
}

/* ═══════ INTERPRET WAIT OVERLAY ═══════ */
.interpret-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2200;
    background: radial-gradient(ellipse at center, #1a1510 0%, #0a0806 70%, #000 100%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
}
.interpret-overlay.show {
    display: flex;
    animation: interpret-fade-in 0.35s ease-out;
}
.interpret-overlay__glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.22) 0%, transparent 70%);
    animation: interpret-pulse 2.2s ease-in-out infinite;
    pointer-events: none;
}
.interpret-overlay__logo {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.35));
    animation: interpret-logo-breathe 2.4s ease-in-out infinite;
}
.interpret-overlay__title {
    position: relative;
    z-index: 1;
    font-size: 20px;
    font-weight: 800;
    color: var(--ic-gold);
    letter-spacing: 1.5px;
    text-align: center;
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}
.interpret-overlay__sub {
    position: relative;
    z-index: 1;
    font-size: 13px;
    color: rgba(232, 220, 190, 0.72);
    text-align: center;
    max-width: 320px;
    line-height: 1.45;
    min-height: 2.1em;
    transition: opacity 0.25s ease;
}
.interpret-overlay__steps {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.interpret-step {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.25);
    transition: background 0.25s ease, transform 0.25s ease;
}
.interpret-step.active {
    background: var(--ic-gold);
    transform: scale(1.25);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.55);
}
.interpret-step.done {
    background: rgba(212, 175, 55, 0.7);
}
@keyframes interpret-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes interpret-pulse {
    0%, 100% { transform: scale(0.92); opacity: 0.55; }
    50% { transform: scale(1.08); opacity: 1; }
}
@keyframes interpret-logo-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .interpret-overlay.show,
    .interpret-overlay__glow,
    .interpret-overlay__logo {
        animation: none;
    }
}
.casting-subtitle {
    font-size: 13px; color: rgba(212,175,55,0.5); letter-spacing: 1px;
    text-align: center; margin-top: -14px;
}
.cast-engine-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ic-gold, #d4af37);
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 999px;
    padding: 6px 16px;
    margin: -4px auto 6px auto;
    letter-spacing: 0.5px;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.18);
    transition: opacity 0.35s ease, transform 0.35s ease;
    animation: cast-badge-pulse 2s ease-in-out infinite;
}
.cast-engine-badge::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ic-gold, #d4af37);
    box-shadow: 0 0 8px var(--ic-gold, #d4af37);
    animation: cast-badge-dot 1.2s ease-in-out infinite alternate;
}
@keyframes cast-badge-pulse {
    0%, 100% { opacity: 0.95; }
    50% { opacity: 0.65; }
}
@keyframes cast-badge-dot {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 1; }
}

/* ── 3D Coin ── */
.coin-tray { display: flex; gap: 32px; perspective: 600px; }
.coin-3d {
    width: 72px; height: 72px; perspective: 600px; cursor: default;
}
.coin-3d__inner {
    width: 100%; height: 100%; position: relative;
    transform-style: preserve-3d;
    transition: transform 0.15s;
}
.coin-3d__face {
    position: absolute; inset: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 900; backface-visibility: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.5), inset 0 2px 6px rgba(255,255,255,0.15);
}
.coin-3d__front {
    background: radial-gradient(circle at 38% 35%, #f0d870, #b8941f 55%, #8a6d15 100%);
    color: #3d2800;
    border: 2.5px solid #c9a02c;
}
.coin-3d__back {
    background: radial-gradient(circle at 62% 65%, #e8c84a, #a07818 55%, #705010 100%);
    color: #2a1a00;
    border: 2.5px solid #a88020;
    transform: rotateY(180deg);
}
/* Toss animation */
.coin-3d.tossing .coin-3d__inner {
    animation: coinToss3D 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.coin-3d.tossing:nth-child(2) .coin-3d__inner { animation-delay: 0.08s; }
.coin-3d.tossing:nth-child(3) .coin-3d__inner { animation-delay: 0.16s; }
@keyframes coinToss3D {
    0%   { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
    20%  { transform: translateY(-80px) rotateX(180deg) rotateY(90deg); }
    40%  { transform: translateY(-110px) rotateX(400deg) rotateY(200deg); }
    60%  { transform: translateY(-60px) rotateX(600deg) rotateY(320deg); }
    80%  { transform: translateY(-15px) rotateX(700deg) rotateY(350deg); }
    100% { transform: translateY(0) rotateX(720deg) rotateY(360deg); }
}
/* Land on heads (front = 龍 = yang) */
.coin-3d.land-heads .coin-3d__inner {
    transform: rotateY(0deg) rotateX(0deg);
    transition: transform 0.25s ease-out;
}
/* Land on tails (back = 文 = yin) */
.coin-3d.land-tails .coin-3d__inner {
    transform: rotateY(180deg) rotateX(0deg);
    transition: transform 0.25s ease-out;
}
/* Bounce landing */
.coin-3d.landed {
    animation: coinBounce 0.35s ease-out;
}
@keyframes coinBounce {
    0%   { transform: translateY(-8px); }
    50%  { transform: translateY(3px); }
    100% { transform: translateY(0); }
}
/* Result row */
.coin-result-row {
    display: flex; gap: 14px; align-items: center; min-height: 28px;
    font-size: 14px; color: rgba(255,255,255,0.7);
}
.coin-result-row .cr-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.coin-result-row .cr-chip.yang-chip {
    background: rgba(220,38,38,0.2); color: #f87171; border: 1px solid rgba(220,38,38,0.3);
}
.coin-result-row .cr-chip.yin-chip {
    background: rgba(37,99,235,0.2); color: #60a5fa; border: 1px solid rgba(37,99,235,0.3);
}
.coin-result-row .cr-chip.moving-chip {
    background: rgba(212,175,55,0.2); color: #d4af37; border: 1px solid rgba(212,175,55,0.4);
}

/* Progress & text (keep existing) */
.casting-progress {
    display: flex; gap: 8px; align-items: center;
}
.casting-line {
    width: 36px; height: 6px; border-radius: 3px;
    background: rgba(255,255,255,0.15); transition: all 0.4s ease;
}
.casting-line.done { background: var(--ic-gold); box-shadow: 0 0 8px rgba(212,175,55,0.5); }
.casting-text {
    font-size: 14px; color: rgba(255,255,255,0.6);
    text-align: center;
}

.cast-skip-btn {
    margin-top: 8px;
    padding: 8px 22px;
    border-radius: 999px;
    border: 1px solid rgba(212,175,55,0.45);
    background: rgba(212,175,55,0.12);
    color: rgba(232, 213, 163, 0.95);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    z-index: 2;
    pointer-events: auto;
}
.cast-skip-btn:hover,
.cast-skip-btn:focus-visible {
    background: rgba(212,175,55,0.22);
    border-color: rgba(212,175,55,0.7);
    outline: none;
}

.casting-overlay.is-waiting .casting-text {
    color: rgba(212,175,55,0.8);
}

/* ═══════ MEIHUA OVERLAY (梅花易數) ═══════ */
.meihua-overlay {
    display: none; position: fixed; inset: 0; z-index: 2050;
    background: radial-gradient(ellipse at 50% 40%, #1a0a1e 0%, #0d0512 60%, #000 100%);
    flex-direction: column; align-items: center; justify-content: center;
    overflow: hidden;
}
.meihua-overlay.show { display: flex; }

/* Floating blossom particles */
.meihua-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.meihua-bg .mb-petal {
    position: absolute; width: 12px; height: 12px;
    background: radial-gradient(circle, rgba(250,204,21,0.75), rgba(250,204,21,0) 70%);
    border-radius: 50% 0 50% 50%;
    animation: meihuaFall linear infinite;
    opacity: 0;
}
@keyframes meihuaFall {
    0%   { opacity: 0; transform: translateY(-20px) rotate(0deg) scale(0.5); }
    15%  { opacity: 0.8; }
    85%  { opacity: 0.6; }
    100% { opacity: 0; transform: translateY(105vh) rotate(360deg) scale(1.2); }
}

.meihua-inner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    max-width: 420px; width: 90%;
}
.meihua-title {
    font-size: 28px; font-weight: 900; color: #d4af37;
    text-shadow: 0 0 24px rgba(212,175,55,0.4), 0 2px 4px rgba(0,0,0,0.6);
    font-family: var(--ic-font-han);
    letter-spacing: 6px;
}
.meihua-subtitle {
    font-size: 13px; color: rgba(212,175,55,0.6); letter-spacing: 1.5px;
    margin-top: -8px;
}

/* Blossom ring SVG */
.meihua-blossom-ring { width: 180px; height: 180px; }
.meihua-svg { width: 100%; height: 100%; }
.meihua-petal {
    fill: rgba(250, 204, 21, 0.25); stroke: rgba(250, 204, 21, 0.6); stroke-width: 1.5;
    transition: fill 0.4s ease, stroke 0.4s ease, filter 0.4s ease;
    /* Do NOT set CSS transform/transform-origin here — it overrides SVG
       transform="rotate(… 120 120)" and collapses all petals into one. */
}
.meihua-petal.lit {
    fill: rgba(250, 204, 21, 0.85); stroke: rgba(250, 204, 21, 1);
    filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.8));
}
.meihua-center {
    fill: rgba(212,175,55,0.15); stroke: rgba(212,175,55,0.5); stroke-width: 1.5;
    transition: fill 0.5s;
}
.meihua-center.lit {
    fill: rgba(212,175,55,0.4);
    filter: drop-shadow(0 0 10px rgba(212,175,55,0.5));
}
.meihua-center-text {
    fill: rgba(212,175,55,0.6); font-size: 22px;
    transition: fill 0.5s;
}
.meihua-center.lit + .meihua-center-text,
.meihua-center-text.lit { fill: #d4af37; }

/* Spinning animation for blossom */
.meihua-petals { transform-origin: 120px 120px; }
.meihua-petals.spinning { animation: meihuaSpin 2s ease-in-out; }
@keyframes meihuaSpin {
    0%   { transform: rotate(0deg) scale(1); }
    30%  { transform: rotate(180deg) scale(1.1); }
    60%  { transform: rotate(300deg) scale(0.95); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Numbers display */
.meihua-numbers {
    display: flex; gap: 10px; align-items: center; min-height: 42px;
}
.meihua-num-box {
    width: 42px; height: 50px; border-radius: 8px;
    background: rgba(212,175,55,0.08); border: 1.5px solid rgba(212,175,55,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; color: #d4af37;
    font-family: var(--ic-font-han);
    transition: all 0.4s ease;
    opacity: 0; transform: translateY(10px);
}
.meihua-num-box.show {
    opacity: 1; transform: translateY(0);
}
.meihua-num-box.highlight {
    background: rgba(212,175,55,0.2); border-color: #d4af37;
    box-shadow: 0 0 14px rgba(212,175,55,0.3);
}

/* Narrative */
.meihua-narrative {
    font-size: 14px; color: rgba(255,255,255,0.8);
    text-align: center; min-height: 22px;
    transition: opacity 0.3s;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    line-height: 1.6;
}

/* Trigram row */
.meihua-trigram-row {
    display: flex; align-items: center; gap: 20px; min-height: 60px;
}
.meihua-tri {
    text-align: center; opacity: 0; transform: scale(0.8);
    transition: all 0.5s ease;
}
.meihua-tri.show { opacity: 1; transform: scale(1); }
.meihua-tri-label {
    font-size: 11px; color: rgba(236,72,153,0.6); font-weight: 700;
    letter-spacing: 1px; margin-bottom: 4px;
}
.meihua-tri-symbol {
    font-size: 32px; color: #ec4899;
    text-shadow: 0 0 12px rgba(236,72,153,0.4);
}
.meihua-tri-arrow {
    font-size: 20px; color: rgba(212,175,55,0.4);
    opacity: 0; transition: opacity 0.5s;
}
.meihua-tri-arrow.show { opacity: 1; }

/* Responsive */
@media (max-width: 640px) {
    .coin-tray { gap: 20px; }
    .coin-3d { width: 58px; height: 58px; }
    .coin-3d__face { font-size: 20px; }
    .meihua-title { font-size: 22px; letter-spacing: 4px; }
    .meihua-blossom-ring { width: 140px; height: 140px; }
}


/* ═══════════════════════════════════════════════════════════════════
   YARROW STALK (蓍草) OVERLAY
   ═══════════════════════════════════════════════════════════════════ */
.yarrow-overlay {
    display: none; position: fixed; inset: 0; z-index: 2100;
    background: radial-gradient(ellipse at center, #1a1208 0%, #0d0a04 70%, #000 100%);
    flex-direction: column; align-items: center; justify-content: center;
    overflow: hidden;
}
.yarrow-overlay.show { display: flex; }

/* Floating particles background */
.yarrow-bg-particles {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.yarrow-bg-particles .yp {
    position: absolute; width: 2px; border-radius: 1px;
    background: linear-gradient(180deg, rgba(212,175,55,0.3), transparent);
    animation: yarrowFloat linear infinite;
    opacity: 0;
}
@keyframes yarrowFloat {
    0%   { opacity: 0; transform: translateY(100vh) rotate(0deg); }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-20px) rotate(15deg); }
}

.yarrow-inner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    max-width: 620px; width: 90%;
}

.yarrow-title {
    font-size: 22px; font-weight: 800; letter-spacing: 2px;
    color: #d4af37;
    text-shadow: 0 0 20px rgba(212,175,55,0.4), 0 2px 4px rgba(0,0,0,0.6);
    text-align: center;
}
.yarrow-subtitle {
    font-size: 13px; color: rgba(212,175,55,0.6); letter-spacing: 1px;
    text-align: center; margin-top: -10px;
}

/* Canvas stage */
.yarrow-stage {
    width: 100%; max-width: 560px;
    background: radial-gradient(ellipse at 50% 80%, rgba(60,40,10,0.5) 0%, transparent 70%);
    border-radius: 16px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
#yarrow-canvas {
    width: 100%; height: auto;
    image-rendering: auto;
}

/* Step narrative */
.yarrow-narrative {
    font-size: 14px; color: rgba(255,255,255,0.85);
    text-align: center; min-height: 22px;
    transition: opacity 0.3s;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    padding: 0 12px;
    line-height: 1.6;
}

/* Line progress dots */
.yarrow-line-progress {
    display: flex; gap: 12px; align-items: center;
}
.yarrow-line-dot {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(212,175,55,0.25);
    color: rgba(212,175,55,0.4);
    font-size: 13px; font-weight: 700;
    transition: all 0.4s ease;
    position: relative;
}
.yarrow-line-dot.active {
    border-color: #d4af37; color: #d4af37;
    box-shadow: 0 0 12px rgba(212,175,55,0.4);
    animation: dotPulse 1.5s ease-in-out infinite;
}
.yarrow-line-dot.done {
    border-color: #10b981; color: #fff;
    background: #10b981;
    box-shadow: 0 0 8px rgba(16,185,129,0.4);
    animation: none;
}
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(212,175,55,0.3); }
    50% { box-shadow: 0 0 20px rgba(212,175,55,0.6); }
}

/* Round info */
.yarrow-round-info {
    font-size: 12px; color: rgba(255,255,255,0.5);
    letter-spacing: 0.5px;
}

/* Skip hint */
.yarrow-skip-hint {
    font-size: 11px; color: rgba(212,175,55,0.45);
    letter-spacing: 0.4px; text-align: center;
    opacity: 1; transition: opacity 0.3s;
    cursor: default; user-select: none;
}

.yarrow-overlay.is-waiting .yarrow-round-info {
    color: rgba(212,175,55,0.75);
    animation: yarrowWaitPulse 1.6s ease-in-out infinite;
}
@keyframes yarrowWaitPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
.yarrow-overlay .cast-skip-btn,
.meihua-overlay .cast-skip-btn {
    margin-top: 16px;
}

/* Responsive */
@media (max-width: 640px) {
    .yarrow-title { font-size: 17px; }
    .yarrow-stage { max-width: 100%; }
    #yarrow-canvas { height: 180px; }
    .yarrow-line-dot { width: 28px; height: 28px; font-size: 11px; }
}