/* ═══════════════════════════════════
   占卜等待動畫 CSS
═══════════════════════════════════ */

/* 全螢幕覆蓋 */
#divination-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #030010;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s;
}

.dl-nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}

.dl-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    z-index: 2;
    width: 100%;
    max-width: 360px;
    padding: 0 20px;
}

/* 星星 */
@keyframes dl-tw { from{opacity:0.05} to{opacity:0.65} }

/* ── 文字 ── */
.dl-title {
    font-size: 18px;
    color: #e9d5ff;
    letter-spacing: 0.12em;
    font-family: Georgia, serif;
    text-align: center;
    text-shadow: 0 0 20px rgba(192,132,252,0.5);
}

.dl-sub {
    font-size: 13px;
    color: #7c6fa0;
    letter-spacing: 0.06em;
    font-family: Georgia, serif;
    text-align: center;
    min-height: 20px;
    margin-top: 6px;
}

.dl-text { text-align: center; }

.dl-dots span {
    display: inline-block;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #7c6fa0;
    margin: 0 2px;
    vertical-align: middle;
    animation: dl-db 1.4s ease-in-out infinite;
}
.dl-dots span:nth-child(2){animation-delay:0.2s}
.dl-dots span:nth-child(3){animation-delay:0.4s}
@keyframes dl-db{0%,80%,100%{transform:translateY(0);opacity:0.3}40%{transform:translateY(-5px);opacity:1}}

/* ── 步驟條 ── */
.dl-steps {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dl-step {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    opacity: 0.3; transition: all 0.4s;
}
.dl-step.done  { opacity: 0.6; }
.dl-step.active{ opacity: 1; }
.dl-sdot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(192,132,252,0.3);
    border: 1px solid rgba(192,132,252,0.3);
    transition: all 0.4s;
}
.dl-step.done  .dl-sdot { background:#7c3aed; border-color:#c084fc; box-shadow:0 0 6px rgba(192,132,252,0.5); }
.dl-step.active .dl-sdot { background:#c084fc; border-color:#e9d5ff; animation:dl-ap 1.5s ease-in-out infinite; }
@keyframes dl-ap{0%,100%{box-shadow:0 0 8px rgba(192,132,252,0.4)}50%{box-shadow:0 0 18px rgba(192,132,252,1)}}
.dl-slabel { font-size: 9px; color: rgba(192,132,252,0.5); letter-spacing:0.06em; font-family:Georgia,serif; }
.dl-step.active .dl-slabel { color: #c084fc; }
.dl-sconn { width:22px; height:1px; background:rgba(192,132,252,0.2); margin-bottom:12px; }

/* ══════════════════════
   塔羅牌場景
══════════════════════ */
.dl-tarot-stage {
    position: relative;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}
.dl-tcard {
    position: absolute;
    width: 68px; height: 112px;
    border-radius: 8px;
    left: 50%; top: 50%;
    margin-left: -34px; margin-top: -56px;
    transform-origin: center 170px;
}
.dl-tinner {
    width: 100%; height: 100%;
    border-radius: 8px;
    border: 1px solid rgba(192,132,252,0.4);
    background: linear-gradient(160deg, #1a0a3a 0%, #0d0820 40%, #1a0535 100%);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.dl-tinner::before {
    content:''; position:absolute; inset:4px;
    border:1px solid rgba(192,132,252,0.15); border-radius:5px;
}
.dl-tinner::after {
    content:'✦'; font-size:16px;
    color:rgba(192,132,252,0.4);
    text-shadow:0 0 8px rgba(192,132,252,0.6);
}

/* 扇形動畫 */
@keyframes dl-fan-54deg {0%,100%{transform:rotate(-54deg) translateY(0)}50%{transform:rotate(-54deg) translateY(-7px)}}
@keyframes dl-fan-36deg {0%,100%{transform:rotate(-36deg) translateY(0)}50%{transform:rotate(-36deg) translateY(-9px)}}
@keyframes dl-fan-18deg {0%,100%{transform:rotate(-18deg) translateY(0)}50%{transform:rotate(-18deg) translateY(-11px)}}
@keyframes dl-fan0deg   {0%,100%{transform:rotate(0deg)   translateY(0)}50%{transform:rotate(0deg)   translateY(-13px)}}
@keyframes dl-fan18deg  {0%,100%{transform:rotate(18deg)  translateY(0)}50%{transform:rotate(18deg)  translateY(-11px)}}
@keyframes dl-fan36deg  {0%,100%{transform:rotate(36deg)  translateY(0)}50%{transform:rotate(36deg)  translateY(-9px)}}
@keyframes dl-fan54deg  {0%,100%{transform:rotate(54deg)  translateY(0)}50%{transform:rotate(54deg)  translateY(-7px)}}

.dl-tglow {
    position: absolute;
    width: 74px; height: 118px;
    left: 50%; top: 50%;
    margin-left: -37px; margin-top: -59px;
    border-radius: 8px;
    border: 1px solid rgba(251,191,36,0.5);
    background: linear-gradient(160deg, #2a1060, #150830);
    box-shadow: 0 0 25px rgba(192,132,252,0.5), inset 0 0 15px rgba(192,132,252,0.1);
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
    animation: dl-glowfloat 2.5s ease-in-out infinite;
}
.dl-tsymbol {
    font-size: 24px;
    animation: dl-symspin 8s linear infinite;
    filter: drop-shadow(0 0 8px rgba(192,132,252,0.8));
}
@keyframes dl-glowfloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.04)}}
@keyframes dl-symspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ══════════════════════
   易經銅錢場景
══════════════════════ */
.dl-iching-stage {
    display: flex; flex-direction: column;
    align-items: center; gap: 20px;
}
.dl-coins-row {
    display: flex; gap: 20px; align-items: flex-end;
}
.dl-coin3d {
    width: 50px; height: 50px;
    position: relative;
    transform-style: preserve-3d;
}
.dl-cfront, .dl-cback {
    position: absolute; inset: 0;
    border-radius: 50%;
    backface-visibility: hidden;
    display: flex; align-items: center; justify-content: center;
    font-family: Georgia, serif;
    font-size: 13px; font-weight: bold;
}
.dl-cfront {
    background: radial-gradient(circle at 30% 28%, #fef3c7, #d97706, #92400e);
    border: 1px solid rgba(251,191,36,0.7);
    box-shadow: 0 0 12px rgba(251,191,36,0.4);
    color: #fef3c7;
    transform: rotateY(0deg);
}
.dl-cback {
    background: radial-gradient(circle at 30% 28%, #ddd6fe, #7c3aed, #2e1065);
    border: 1px solid rgba(192,132,252,0.7);
    box-shadow: 0 0 12px rgba(192,132,252,0.4);
    color: #ddd6fe;
    transform: rotateY(180deg);
}
.dl-clabel {
    font-size: 10px;
    color: rgba(192,132,252,0.5);
    font-family: Georgia, serif;
    text-align: center;
    min-height: 15px;
    margin-top: 4px;
}
.dl-hex {
    display: flex; flex-direction: column;
    gap: 5px; align-items: center;
    min-height: 72px;
}
.dl-hline {
    display: flex; gap: 7px; align-items: center;
    opacity: 0; transform: translateX(-8px);
    transition: opacity 0.4s, transform 0.4s;
}
.dl-hline.show { opacity: 1; transform: translateX(0); }
.dl-hseg {
    height: 7px; border-radius: 4px;
    background: linear-gradient(90deg, rgba(251,191,36,0.5), rgba(251,191,36,0.95));
    box-shadow: 0 0 6px rgba(251,191,36,0.4);
}
.dl-hline.yang .dl-hseg { width: 80px; }
.dl-hline.yin  .dl-hseg { width: 34px; }

/* ══════════════════════
   水晶球場景
══════════════════════ */
.dl-crystal-stage {
    position: relative;
    width: 160px; height: 180px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.dl-cpulse {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(192,132,252,0.2);
    top: 50%; left: 50%;
    transform: translate(-50%,-55%);
    animation: dl-cpexp 3.5s ease-out infinite;
}
.dl-cpulse:nth-child(2){animation-delay:1.1s}
.dl-cpulse:nth-child(3){animation-delay:2.2s}
@keyframes dl-cpexp{0%{width:100px;height:100px;opacity:0.6}100%{width:210px;height:210px;opacity:0}}

.dl-cring1, .dl-cring2 {
    position: absolute;
    border-radius: 50%;
    border: 1px solid transparent;
}
.dl-cring1 {
    width: 150px; height: 150px;
    top: 5px; left: 5px;
    border-top-color: rgba(192,132,252,0.25);
    border-right-color: rgba(192,132,252,0.1);
    animation: dl-rspin 6s linear infinite;
}
.dl-cring2 {
    width: 130px; height: 130px;
    top: 15px; left: 15px;
    border-bottom-color: rgba(251,191,36,0.15);
    border-left-color: rgba(251,191,36,0.08);
    animation: dl-rspin 4s linear infinite reverse;
}
@keyframes dl-rspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.dl-cball {
    position: relative; z-index: 2;
    width: 106px; height: 106px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%,
        rgba(200,160,255,0.7) 0%,
        rgba(140,80,220,0.8) 30%,
        rgba(60,20,120,0.95) 70%,
        rgba(10,5,30,1) 100%);
    border: 1px solid rgba(192,132,252,0.45);
    overflow: hidden;
    animation: dl-cballp 3s ease-in-out infinite;
    box-shadow: 0 0 40px rgba(147,51,234,0.5), 0 0 80px rgba(147,51,234,0.2), inset 0 0 30px rgba(192,132,252,0.12);
}
@keyframes dl-cballp{0%,100%{box-shadow:0 0 40px rgba(147,51,234,0.5)}50%{box-shadow:0 0 65px rgba(147,51,234,0.8),0 0 20px rgba(251,191,36,0.15)}}

.dl-cmist {
    position: absolute; border-radius: 50%;
    opacity: 0; animation: dl-mist 4s ease-in-out infinite;
}
.dl-cmist:nth-child(1){width:65px;height:32px;background:rgba(192,132,252,0.12);top:22px;left:12px;animation-delay:0s}
.dl-cmist:nth-child(2){width:45px;height:22px;background:rgba(192,132,252,0.09);top:42px;left:28px;animation-delay:1.3s}
.dl-cmist:nth-child(3){width:55px;height:28px;background:rgba(251,191,36,0.07);top:32px;left:18px;animation-delay:2.6s}
@keyframes dl-mist{0%{opacity:0;transform:translateX(-8px)}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateX(8px)}}
.dl-chighlight{
    position:absolute; width:26px; height:14px;
    background:rgba(255,255,255,0.2); border-radius:50%;
    top:16px; left:20px; transform:rotate(-30deg); filter:blur(2px);
}
.dl-cbase {
    width:75px; height:14px;
    background:radial-gradient(ellipse,rgba(147,51,234,0.5),transparent);
    border-radius:50%; margin-top:5px; z-index:1;
    animation:dl-cbasep 3s ease-in-out infinite;
}
@keyframes dl-cbasep{0%,100%{opacity:0.5;transform:scaleX(1)}50%{opacity:0.8;transform:scaleX(1.15)}}

/* ══════════════════════
   數字命理場景
══════════════════════ */
.dl-num-stage {
    position: relative;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}
@keyframes dl-mfall{from{transform:translateY(0)}to{transform:translateY(220px)}}
.dl-matrix {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.dl-norbit, .dl-norbit2 {
    position: absolute; border-radius: 50%;
    border: 1px dashed rgba(251,191,36,0.15);
}
.dl-norbit  { width:130px; height:130px; animation:dl-rspin 5s linear infinite; }
.dl-norbit2 { width:115px; height:115px; border-color:rgba(192,132,252,0.1); animation:dl-rspin 7s linear infinite reverse; }
.dl-norbit::before, .dl-norbit2::before {
    content:''; position:absolute;
    border-radius:50%;
    top:-3.5px; left:50%; margin-left:-3.5px;
}
.dl-norbit::before  { width:7px;height:7px; background:#fbbf24; box-shadow:0 0 10px #fbbf24; }
.dl-norbit2::before { width:5px;height:5px; background:#c084fc; box-shadow:0 0 8px #c084fc; bottom:-2.5px; top:auto; }
.dl-ncore {
    position: relative; z-index: 5;
    width: 88px; height: 88px; border-radius: 50%;
    background: radial-gradient(circle,rgba(251,191,36,0.12) 0%,rgba(0,0,0,0) 70%);
    border: 1px solid rgba(251,191,36,0.3);
    display: flex; align-items: center; justify-content: center;
    animation: dl-ncorp 2.5s ease-in-out infinite;
}
@keyframes dl-ncorp{0%,100%{box-shadow:0 0 20px rgba(251,191,36,0.2)}50%{box-shadow:0 0 50px rgba(251,191,36,0.5)}}
.dl-nnum {
    font-size: 40px; font-weight: bold;
    color: #fbbf24; font-family: Georgia, serif;
    text-shadow: 0 0 20px rgba(251,191,36,0.8);
}

/* 手機版 */
@media (max-width: 480px) {
    .dl-inner {
        gap: 20px;
        max-width: 320px;
        padding: 0 14px;
    }
    .dl-title { font-size: 16px; }
    .dl-sub { font-size: 12px; }
    .dl-steps { transform: scale(0.92); }
    .dl-tarot-stage,
    .dl-num-stage { transform: scale(0.9); }
    .dl-iching-stage,
    .dl-crystal-stage { transform: scale(0.88); }
}