/* ============================================================
   Dragon Wolf（黑白龍狼傳）遊戲主題 CSS
   配色：深紫黑底 + 金紅配色，--dw- 前綴
   ============================================================ */

/* ── CSS 變數 ────────────────────────────────────────────── */
:root {
    --dw-bg-primary:     #0D0A1A;   /* 深紫黑 */
    --dw-bg-secondary:   #1A1228;   /* 稍淺紫黑 */
    --dw-bg-reel:        #8B7355;   /* 滾輪背景（深棕金，像木框）*/
    --dw-accent-gold:    #FFD700;   /* 金色 */
    --dw-accent-red:     #E03030;   /* 紅色 */
    --dw-accent-purple:  #9B59B6;   /* 紫色 */
    --dw-text-primary:   #F5E6C8;   /* 米金色文字 */
    --dw-text-secondary: #B8967A;   /* 暗金色 */
    --dw-border-gold:    #C9A227;   /* 金色邊框 */
    --dw-border-dark:    #3D2B50;   /* 深紫邊框 */
    --dw-btn-gradient:   linear-gradient(135deg, #C9A227, #FFD700, #C9A227);
    --dw-btn-red:        linear-gradient(135deg, #8B0000, #E03030, #8B0000);
    --dw-shadow-gold:    rgba(255, 215, 0, 0.35);
    --dw-shadow-red:     rgba(224, 48, 48, 0.5);
    --dw-win-purple:     #8B2FC9;              /* 中獎暗紫主色 */
    --dw-win-purple-hi:  #B050E8;              /* 中獎暗紫高亮 */
    --dw-shadow-purple:  rgba(139, 47, 201, 0.65); /* 紫色光暈 */
    --dw-symbol-size-desktop: 90px;
    --dw-symbol-size-tablet:  72px;
    --dw-symbol-size-mobile:  calc((100vw - 40px) / 5);
    --dw-symbol-size-small:   54px;
}

/* ── Container ───────────────────────────────────────────── */
#dw-game-container {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    width:           100%;
    min-height:      100vh;
    min-height:      100dvh;
    background:      var(--dw-bg-primary);
    background-image: radial-gradient(ellipse at top, #2D1B4E 0%, #0D0A1A 60%);
    color:           var(--dw-text-primary);
    font-family:     'Segoe UI', Arial, sans-serif;
    overflow:        hidden;
    touch-action:    manipulation;
    box-sizing:      border-box;
}

/* ── 返回按鈕 ────────────────────────────────────────────── */
#dw-btn-return-lobby {
    position:    absolute;
    top:         8px;
    left:        10px;
    z-index:     100;
    padding:     6px 14px;
    background:  var(--dw-bg-secondary);
    color:       var(--dw-accent-gold);
    border:      1px solid var(--dw-border-gold);
    border-radius: 6px;
    font-size:   0.8rem;
    font-weight: 700;
    cursor:      pointer;
    transition:  background 0.2s, opacity 0.2s;
}
#dw-btn-return-lobby:hover:not(:disabled) {
    background: #2D1B4E;
}
#dw-btn-return-lobby:disabled,
#dw-btn-return-lobby.disabled {
    opacity:  0.4;
    cursor:   not-allowed;
}

/* ── 標題列 ──────────────────────────────────────────────── */
#dw-header {
    width:      100%;
    text-align: center;
    padding:    8px 4px 4px;
    background: linear-gradient(180deg, #1F1030 0%, transparent 100%);
}
#dw-header h1 {
    font-size:      1.25rem;
    font-weight:    900;
    letter-spacing: 2px;
    color:          var(--dw-accent-gold);
    text-shadow:    0 0 12px var(--dw-shadow-gold),
                    0 2px 4px rgba(0,0,0,0.8);
    margin:         0;
}
#dw-header .dw-subtitle {
    font-size:   0.72rem;
    color:       var(--dw-text-secondary);
    letter-spacing: 1px;
}

/* ── Info Bar ────────────────────────────────────────────── */
#dw-info-bar {
    display:         flex;
    justify-content: space-around;
    align-items:     center;
    width:           100%;
    max-width:       620px;
    padding:         4px 12px;
    gap:             8px;
}
.dw-info-box {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    background:     rgba(30, 15, 50, 0.7);
    border:         1px solid var(--dw-border-dark);
    border-radius:  8px;
    padding:        4px 14px;
    min-width:      80px;
}
.dw-info-label {
    font-size:   0.62rem;
    color:       var(--dw-text-secondary);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.dw-info-value {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--dw-accent-gold);
    letter-spacing: 0.5px;
}
#dw-win-amount {
    color:       var(--dw-accent-red);
    text-shadow: 0 0 8px var(--dw-shadow-red);
}

/* ── 滾輪區 ──────────────────────────────────────────────── */
#dw-reel-area {
    position:     relative;
    width:        100%;
    max-width:    590px;
    padding:      4px 8px;
    cursor:       pointer;
    user-select:  none;
    -webkit-user-select: none;
}

#dw-reel-grid {
    display:        grid;
    grid-template-columns: repeat(5, 1fr);
    gap:            4px;
    background:     var(--dw-bg-reel);
    border:         2px solid var(--dw-border-gold);
    border-radius:  12px;
    padding:        6px;
    box-shadow:     0 0 20px var(--dw-shadow-gold),
                    inset 0 0 30px rgba(0,0,0,0.5);
    position:       relative;
}

.dw-reel-viewport {
    overflow:     hidden;
    border-radius: 6px;
    background:   rgba(240, 228, 200, 0.92);  /* 宣紙米白色 */
    height:       calc(var(--dw-symbol-size-desktop) * 4);
    border:       1px solid rgba(201, 162, 39, 0.25);
    position:     relative;
}

.dw-reel-strip {
    position:        absolute;
    top:             0;
    left:            0;
    width:           100%;
    will-change:     transform;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
}

/* ── 符號 ────────────────────────────────────────────────── */
.dw-symbol {
    width:           var(--dw-symbol-size-desktop);
    height:          var(--dw-symbol-size-desktop);
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    transition:      filter 0.2s, transform 0.15s;
    box-sizing:      border-box;
}
.dw-symbol img {
    width:        100%;
    height:       100%;
    object-fit:   cover;
    border-radius: 8px;
    display:      block;
    pointer-events: none;
    user-select:  none;
}

/* 暗淡（非中獎）— 加強版：飽和度+亮度降低 + ::after 深色遮罩 */
.dw-symbol.dw-dimmed {
    filter:    saturate(0.12) brightness(0.6);
    transform: scale(0.91);
}
/* 深色遮罩覆蓋非中獎格，與中獎格製造強烈明暗對比 */
.dw-symbol.dw-dimmed::after {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    rgba(12, 6, 2, 0.55);
    border-radius: 8px;
    pointer-events: none;
}

/* 中獎高亮 — 換用高對比朱紅色，並疊加邊框描邊 */
.dw-symbol.dw-winning {
    animation: dw-win-pulse 0.65s ease-in-out infinite alternate;
    z-index:   5;
}

/* Scatter 紫色脈衝 — 加強亮度與邊框 */
.dw-symbol.dw-scatter-pulse {
    animation: dw-scatter-pulse 0.6s ease-in-out infinite alternate;
    z-index:   5;
}

/* M1 紅金色脈衝 — 加強亮度與邊框 */
.dw-symbol.dw-m1-pulse {
    animation: dw-m1-pulse 0.6s ease-in-out infinite alternate;
    z-index:   5;
}

/* 剛放置的 Wild */
.dw-symbol.dw-wild-placed {
    animation: dw-wild-appear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Wild overlay：疊加在原始符號上，以 scale 動畫出現 */
.dw-wild-overlay {
    position:       absolute;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
    object-fit:     contain;
    z-index:        5;
    pointer-events: none;
    animation:      dw-wild-appear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── 訊息顯示 ────────────────────────────────────────────── */
#dw-message-display {
    position:    absolute;
    top:         50%;
    left:        50%;
    transform:   translate(-50%, -50%);
    background:  rgba(13, 10, 26, 0.88);
    color:       var(--dw-accent-gold);
    font-size:   1.1rem;
    font-weight: 700;
    padding:     8px 20px;
    border-radius: 8px;
    border:      1px solid var(--dw-border-gold);
    opacity:     0;
    pointer-events: none;
    z-index:     30;
    transition:  opacity 0.25s;
}
#dw-message-display.visible {
    opacity: 1;
}

/* ── Free Spins HUD ──────────────────────────────────────── */
#dw-fs-hud {
    width:      100%;
    max-width:  590px;
    text-align: center;
    padding:    4px 12px;
    background: linear-gradient(90deg, rgba(155, 89, 182, 0.2), rgba(224, 48, 48, 0.2));
    border:     1px solid var(--dw-accent-purple);
    border-radius: 8px;
    font-size:  0.82rem;
    color:      var(--dw-text-primary);
    display:    flex;
    justify-content: space-around;
}
#dw-fs-hud.hidden { display: none; }
#dw-fs-counter { color: #C39BDD; font-weight: 700; }
#dw-fs-win-display { color: var(--dw-accent-gold); font-weight: 700; }

/* ── 控制區 ──────────────────────────────────────────────── */
#dw-controls {
    display:        flex;
    flex-direction: row;
    align-items:    center;
    justify-content: center;
    width:          100%;
    max-width:      590px;
    padding:        8px 12px;
    gap:            12px;
}

#dw-left-controls {
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         6px;
    flex:        1;
}

#dw-bet-controls {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.dw-ctrl-btn {
    background:  rgba(30, 15, 50, 0.8);
    color:       var(--dw-accent-gold);
    border:      1px solid var(--dw-border-gold);
    border-radius: 6px;
    width:       32px;
    height:      32px;
    font-size:   1.1rem;
    font-weight: 700;
    cursor:      pointer;
    transition:  background 0.15s, transform 0.1s;
    display:     flex;
    align-items: center;
    justify-content: center;
}
.dw-ctrl-btn:hover:not(:disabled) {
    background: #2D1B4E;
    transform:  scale(1.05);
}
.dw-ctrl-btn:active:not(:disabled) {
    transform: scale(0.95);
}

#dw-bet-display {
    text-align:  center;
    min-width:   60px;
}
.dw-bet-label {
    font-size:  0.6rem;
    color:      var(--dw-text-secondary);
    font-weight: 700;
    letter-spacing: 0.5px;
}
#dw-bet-multiplier {
    font-size:  1.1rem;
    font-weight: 900;
    color:      var(--dw-accent-gold);
}

#dw-total-bet-display {
    text-align: center;
    font-size:  0.7rem;
    color:      var(--dw-text-secondary);
}

/* SPIN 按鈕 */
#dw-btn-spin {
    background:    var(--dw-btn-gradient);
    color:         #1A0A00;
    border:        none;
    border-radius: 50%;
    width:         90px;
    height:        90px;
    font-size:     1.1rem;
    font-weight:   900;
    letter-spacing: 1px;
    cursor:        pointer;
    box-shadow:    0 0 18px var(--dw-shadow-gold),
                   0 4px 12px rgba(0,0,0,0.6);
    transition:    transform 0.12s, box-shadow 0.12s;
    flex-shrink:   0;
}
#dw-btn-spin:hover:not(:disabled) {
    transform:  scale(1.06);
    box-shadow: 0 0 28px var(--dw-shadow-gold);
}
#dw-btn-spin:active:not(:disabled) {
    transform: scale(0.93);
}
#dw-btn-spin:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}
#dw-btn-spin.dw-btn-stop {
    background:  var(--dw-btn-red);
    box-shadow:  0 0 18px var(--dw-shadow-red);
    color:       #fff;
}

#dw-extra-controls {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    align-items:    center;
    flex:           1;
}
.dw-ctrl-btn.small {
    width:  64px;
    height: 28px;
    font-size: 0.65rem;
    letter-spacing: 0.5px;
}
.dw-ctrl-btn.active {
    background: #2D1B4E;
    border-color: var(--dw-accent-purple);
    color: var(--dw-accent-purple);
}

/* ── 底部按鈕列 ──────────────────────────────────────────── */
#dw-bottom-bar {
    display:         flex;
    justify-content: center;
    gap:             10px;
    padding:         6px;
    width:           100%;
    max-width:       590px;
}
.dw-icon-btn {
    background:  rgba(30, 15, 50, 0.7);
    color:       var(--dw-text-secondary);
    border:      1px solid var(--dw-border-dark);
    border-radius: 6px;
    padding:     5px 14px;
    font-size:   0.72rem;
    font-weight: 700;
    cursor:      pointer;
    letter-spacing: 0.5px;
    transition:  color 0.2s, border-color 0.2s;
}
.dw-icon-btn:hover {
    color:         var(--dw-accent-gold);
    border-color:  var(--dw-border-gold);
}

/* ── Overlay 通用 ────────────────────────────────────────── */
.dw-overlay {
    position:   fixed;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
    background: rgba(0,0,0,0.78);
    display:    flex;
    align-items: center;
    justify-content: center;
    z-index:    200;
    opacity:    0;
    pointer-events: none;
    transition: opacity 0.3s;
    touch-action: manipulation;         /* Fix: iOS double-tap zoom prevention */
}
.dw-overlay.dw-overlay-active {
    opacity:        1;
    pointer-events: all;
}
.dw-overlay.hidden {
    display: none;
}

.dw-overlay-box {
    background:    linear-gradient(160deg, #2D1B4E, #1A0A2E);
    border:        2px solid var(--dw-border-gold);
    border-radius: 16px;
    padding:       32px 40px;
    text-align:    center;
    box-shadow:    0 0 40px var(--dw-shadow-gold);
    max-width:     400px;
    width:         90%;
}
.dw-overlay-box h2 {
    font-size:   1.8rem;
    color:       var(--dw-accent-gold);
    margin:      0 0 12px;
    text-shadow: 0 0 16px var(--dw-shadow-gold);
}
.dw-overlay-box p {
    font-size:  1rem;
    color:      var(--dw-text-primary);
    margin:     6px 0;
}
.dw-overlay-box .dw-big-number {
    font-size:   2.2rem;
    font-weight: 900;
    color:       var(--dw-accent-gold);
    text-shadow: 0 0 16px var(--dw-shadow-gold);
    display:     block;
    margin:      8px 0;
}
.dw-btn-overlay {
    background:    var(--dw-btn-gradient);
    color:         #1A0A00;
    border:        none;
    border-radius: 8px;
    padding:       10px 36px;
    font-size:     1rem;
    font-weight:   900;
    cursor:        pointer;
    margin-top:    16px;
    letter-spacing: 1px;
    box-shadow:    0 0 12px var(--dw-shadow-gold);
    transition:    transform 0.12s;
}
.dw-btn-overlay:hover {
    transform: scale(1.04);
}

/* ── FS 轉場動畫（龍狼融合 → 水墨暈開 → 郎君綻放） ─────── */
#dw-fs-transition {
    position:        fixed;
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    z-index:         300;
    overflow:        hidden;
    pointer-events:  none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    touch-action:    manipulation;      /* Fix: iOS double-tap zoom prevention */
}
#dw-fs-transition.hidden { display: none; }

/* Content wrapper — fadeout 動畫放在這層，避免 position:fixed 父容器的 opacity 動畫
   導致 iOS Safari 合成器不獨立提升子元素合成層（#dw-trans-text 文字不顯示） */
#dw-trans-content {
    position: absolute;
    inset:    0;
    overflow: hidden;
}

/* 背景層 1：暗幕 */
#dw-trans-dark-bg {
    position:   absolute;
    inset:      0;
    background: rgba(5, 2, 15, 0.95);
    opacity:    0;
}
/* 背景層 2：水墨暈染（疊在暗幕上方） */
#dw-trans-ink-wash {
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse at 50% 48%,
                    rgba(40, 25, 60, 0.95) 0%,
                    rgba(20, 12, 35, 0.9) 30%,
                    rgba(8, 4, 18, 0.95) 60%,
                    rgba(2, 1, 8, 0.98) 100%);
    opacity:    0;
    z-index:    1;
}

/* 龍狼 wrapper（含殘影 + 主圖） */
#dw-trans-dragon-wrap,
#dw-trans-wolf-wrap {
    position:   absolute;
    width:      330px;
    height:     330px;
    top:        50%;
    z-index:    2;
}
#dw-trans-dragon-wrap {
    left:       -390px;
    transform:  translateY(-50%);
}
#dw-trans-wolf-wrap {
    left:       calc(100% + 390px);
    transform:  translateY(-50%) translateX(-50%) scaleX(-1);
}
#dw-trans-dragon,
#dw-trans-wolf {
    width:      100%;
    height:     100%;
    object-fit: contain;
    position:   relative;
    z-index:    2;
}
#dw-trans-dragon { filter: drop-shadow(0 0 25px rgba(20, 8, 60, 0.9)); }
#dw-trans-wolf   { filter: drop-shadow(0 0 25px rgba(180, 40, 40, 0.7)); }

/* 殘影 */
.dw-trans-ghost {
    position:       absolute;
    inset:          0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity:        0;
    pointer-events: none;
}
.dw-trans-ghost:nth-child(1) { filter: blur(3px); }
.dw-trans-ghost:nth-child(2) { filter: blur(6px); }
.dw-trans-ghost:nth-child(3) { filter: blur(10px); }

/* 水墨爆發圓 */
#dw-trans-ink-burst {
    position:      absolute;
    top:           50%;
    left:          50%;
    width:         0;
    height:        0;
    border-radius: 50%;
    transform:     translate(-50%, -50%);
    background:    radial-gradient(circle,
                       rgba(30, 15, 50, 0.98) 0%,
                       rgba(15, 8, 30, 0.95) 40%,
                       rgba(5, 2, 15, 0.9) 70%,
                       transparent 100%);
    z-index:       3;
    opacity:       0;
    pointer-events: none;
}

/* 速度線 */
#dw-trans-speed-lines {
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 8px,
        rgba(200, 180, 255, 0.08) 8px,
        rgba(200, 180, 255, 0.08) 9px
    );
    opacity:    0;
    z-index:    2;
    pointer-events: none;
}

/* 黑白郎君 + 光暈 */
#dw-trans-mw-wrap {
    position:    absolute;
    top:         50%;
    left:        50%;
    transform:   translate(-50%, -55%) scale(0);
    z-index:     5;
    text-align:  center;
}
#dw-trans-mw-glow {
    position:      absolute;
    top:           50%;
    left:          50%;
    width:         60px;
    height:        60px;
    border-radius: 50%;
    transform:     translate(-50%, -50%) translateZ(0);
    background:    radial-gradient(circle,
                       rgba(255, 200, 60, 0.8) 0%,
                       rgba(255, 170, 30, 0.4) 40%,
                       transparent 70%);
    opacity:       0;
    pointer-events: none;
    will-change:   opacity, width, height;
}
#dw-trans-mw {
    width:        360px;
    height:       360px;
    position:     relative;
    z-index:      1;
    transform:    translateZ(0);  /* promote to GPU layer */
}

/* 文字 */
#dw-trans-text {
    position:    absolute;
    bottom:      22%;
    left:        50%;
    transform:   translateX(-50%) translateY(30px);
    text-align:  center;
    opacity:     0;
    z-index:     6;
}
/* .dw-text-show 已廢棄 — 文字出現改由 CSS animation-delay 控制（見 .dw-trans-playing #dw-trans-text） */
#dw-trans-text p {
    font-size:   1.8rem;
    font-weight: 900;
    color:       var(--dw-accent-gold);
    text-shadow: 0 0 20px var(--dw-shadow-gold),
                 0 0 40px rgba(220, 180, 100, 0.3);
    margin:      0;
}
#dw-trans-spin-count {
    font-size:   3rem;
    font-weight: 900;
    color:       #fff;
    text-shadow: 0 0 20px var(--dw-shadow-gold),
                 0 0 40px rgba(220, 180, 100, 0.4);
}

/* ── FS 轉場動畫觸發（.dw-trans-playing） ──── */

/* Phase 1: 暗幕淡入 (0~0.4s) */
#dw-fs-transition.dw-trans-playing #dw-trans-dark-bg {
    animation: dw-dark-bg-in 0.4s ease-out forwards;
}

/* Phase 1: 龍狼衝刺入場 (0~2s)  — 放慢 50%，原 1s → 2s */
#dw-fs-transition.dw-trans-playing #dw-trans-dragon-wrap {
    animation: dw-dragon-rush 2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    mix-blend-mode: screen;
}
#dw-fs-transition.dw-trans-playing #dw-trans-wolf-wrap {
    animation: dw-wolf-rush 2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    mix-blend-mode: screen;
}

/* Phase 1: 殘影跟隨 (交錯延遲) — 等比 ×2 */
#dw-fs-transition.dw-trans-playing #dw-trans-dragon-wrap .dw-trans-ghost:nth-child(1) {
    animation: dw-ghost-trail 1.8s 0.08s ease-out forwards;
}
#dw-fs-transition.dw-trans-playing #dw-trans-dragon-wrap .dw-trans-ghost:nth-child(2) {
    animation: dw-ghost-trail 1.7s 0.16s ease-out forwards;
}
#dw-fs-transition.dw-trans-playing #dw-trans-dragon-wrap .dw-trans-ghost:nth-child(3) {
    animation: dw-ghost-trail 1.6s 0.24s ease-out forwards;
}
#dw-fs-transition.dw-trans-playing #dw-trans-wolf-wrap .dw-trans-ghost:nth-child(1) {
    animation: dw-ghost-trail 1.8s 0.08s ease-out forwards;
}
#dw-fs-transition.dw-trans-playing #dw-trans-wolf-wrap .dw-trans-ghost:nth-child(2) {
    animation: dw-ghost-trail 1.7s 0.16s ease-out forwards;
}
#dw-fs-transition.dw-trans-playing #dw-trans-wolf-wrap .dw-trans-ghost:nth-child(3) {
    animation: dw-ghost-trail 1.6s 0.24s ease-out forwards;
}

/* Phase 1: 速度線閃現 (0~1.6s) — 等比 ×2 */
#dw-fs-transition.dw-trans-playing #dw-trans-speed-lines {
    animation: dw-speed-flash 1.6s ease-out forwards;
}

/* Phase 2: 水墨爆發 (2~2.8s) — delay +1s */
#dw-fs-transition.dw-trans-playing #dw-trans-ink-burst {
    animation: dw-ink-expand 0.8s 1.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
#dw-fs-transition.dw-trans-playing #dw-trans-ink-wash {
    animation: dw-ink-wash-in 0.8s 2s ease-out forwards;
}

/* Phase 3: 郎君綻放 (2.0~3.2s) — 對齊龍狼消失時間點，消除空白斷層 */
#dw-fs-transition.dw-trans-playing #dw-trans-mw-wrap {
    animation: dw-lord-bloom 1.2s 2.0s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#dw-fs-transition.dw-trans-playing #dw-trans-mw-glow {
    animation: dw-glow-expand 1.2s 2.0s ease-out forwards,
               dw-lord-glow-pulse 0.7s 3.2s ease-in-out 4;
}
/* Phase 3: 郎君 pulse（只用 transform，GPU 可合成） */
#dw-fs-transition.dw-trans-playing #dw-trans-mw {
    animation: dw-lord-pulse 0.35s 2.0s ease-in-out 5;
}

/* Phase 4: 文字出現 — delay +1s */
#dw-fs-transition.dw-trans-playing #dw-trans-text {
    animation: dw-text-appear 0.5s 4s ease-out forwards;
}

/* Phase 5: 整體淡出 — delay +1s
   放在 #dw-trans-content 而非 position:fixed 父容器，
   避免 iOS Safari 合成層合併導致子元素 animation forwards 不生效 */
#dw-fs-transition.dw-trans-playing #dw-trans-content {
    animation: dw-overlay-fadeout 0.8s 5.2s ease-in forwards;
}

/* ── 氣功 Overlay（降龍十八掌風格）──────────────────────── */
#dw-qigong-overlay {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        20;
    opacity:        0;
    transition:     opacity 0.25s;
    overflow:       hidden;
}
#dw-qigong-overlay.dw-qigong-active { opacity: 1; }
#dw-qigong-overlay.hidden { display: none; }

/* 角色圖片（放大 20%：54% → 65%，345px → 414px） */
#dw-qigong-m1 {
    position:       absolute;
    left:           0;
    top:            50%;
    width:          65%;
    max-width:      414px;
    height:         auto;
    transform:      translateY(-58%) translateX(-130%);
    filter:         drop-shadow(0 0 10px rgba(160,60,255,0.45));
    opacity:        0;
    pointer-events: none;
}

/* 蓄力收縮環 */
.dw-qg-charge-ring {
    position:       absolute;
    left:           28%;
    top:            38%;
    width:          180px;
    height:         180px;
    border-radius:  50%;
    border:         2px dashed rgba(220, 180, 100, 0.7);
    transform:      translate(-50%, -50%) scale(1);
    opacity:        0;
    pointer-events: none;
    box-shadow:     0 0 15px rgba(220, 180, 100, 0.3),
                    inset 0 0 15px rgba(220, 180, 100, 0.15);
}

/* 能量彈氣勁 */
.dw-qg-palm {
    position:       absolute;
    left:           30%;
    top:            45%;
    width:          40px;
    height:         40px;
    border-radius:  50%;
    background:     radial-gradient(circle at 35% 35%,
                        #fff 0%,
                        rgba(255, 240, 180, 0.95) 15%,
                        rgba(255, 200, 80, 0.9) 35%,
                        rgba(220, 140, 30, 0.7) 60%,
                        transparent 100%);
    transform:      translate(-50%, -50%) scale(0);
    opacity:        0;
    pointer-events: none;
    box-shadow:     0 0 12px rgba(255, 220, 100, 0.95),
                    0 0 25px rgba(255, 180, 50, 0.7),
                    0 0 50px rgba(220, 140, 30, 0.4);
}
/* 能量彈尾焰 */
.dw-qg-palm::before {
    content:        '';
    position:       absolute;
    top:            15%;
    left:           -60%;
    width:          80%;
    height:         70%;
    background:     linear-gradient(to right,
                        transparent 0%,
                        rgba(255, 200, 80, 0.3) 30%,
                        rgba(255, 180, 50, 0.5) 60%,
                        rgba(255, 220, 100, 0.3) 100%);
    border-radius:  50% 0 0 50%;
    filter:         blur(4px);
}

/* 螢幕震動（套用在 reel grid 上） */
#dw-reel-grid.dw-screen-shake,
#dw-reel-grid.dw-screen-shake-medium {
    animation: dw-shake 0.08s infinite alternate;
}
#dw-reel-grid.dw-screen-shake-small {
    animation: dw-shake-small 0.12s infinite alternate;
}
#dw-reel-grid.dw-screen-shake-large {
    animation: dw-shake-large 0.06s infinite alternate;
}

/* 隕石從右上角斜砸 Wild */
.dw-symbol.dw-wild-meteor {
    animation: dw-meteor-drop 0.35s cubic-bezier(0.6, 0, 1, 0.6) forwards !important;
    z-index: 10;
    overflow: visible;
}
/* 火焰尾跡（右上方向） */
.dw-symbol.dw-wild-meteor::after {
    content:        '';
    position:       absolute;
    top:            -90%;
    right:          -40%;
    width:          80%;
    height:         120%;
    background:     linear-gradient(to bottom left,
                        transparent 0%,
                        rgba(255, 200, 60, 0.5) 15%,
                        rgba(255, 140, 30, 0.8) 35%,
                        rgba(255, 80, 10, 0.6) 60%,
                        rgba(200, 40, 0, 0.3) 80%,
                        transparent 100%);
    filter:         blur(5px);
    border-radius:  40%;
    pointer-events: none;
    transform:      rotate(-40deg);
    animation:      dw-fire-trail 0.35s ease-out forwards;
}
/* 衝擊白光閃 */
.dw-symbol.dw-wild-meteor::before {
    content:        '';
    position:       absolute;
    inset:          -30%;
    border-radius:  50%;
    background:     radial-gradient(circle, rgba(255,255,255,0.7) 0%, transparent 70%);
    opacity:        0;
    pointer-events: none;
    animation:      dw-impact-flash 0.35s 0.25s ease-out forwards;
}

/* 著地衝擊波紋（更大更強） */
.dw-symbol.dw-wild-impact {
    animation: dw-impact-ripple 0.45s ease-out forwards !important;
    overflow: visible;
}
/* 衝擊環 */
.dw-symbol.dw-wild-impact::after {
    content:        '';
    position:       absolute;
    top:            50%;
    left:           50%;
    width:          0;
    height:         0;
    border-radius:  50%;
    border:         2px solid rgba(255, 180, 60, 0.8);
    transform:      translate(-50%, -50%);
    pointer-events: none;
    animation:      dw-shockwave-ring 0.4s ease-out forwards;
}

/* ── 氣功動畫觸發（.dw-qigong-active） ──── */

/* 角色：入場 → 蓄力 → 發射後震 → 淡出 */
#dw-qigong-overlay.dw-qigong-active #dw-qigong-m1 {
    animation:
        dw-qg-enter     0.50s 0.00s ease-out                         forwards,
        dw-qg-charge-v2 1.00s 0.50s ease-in-out                      forwards,
        dw-qg-fire-jolt 0.15s 1.50s cubic-bezier(0.1,0.8,0.3,1)     forwards,
        dw-qg-fadeout   0.50s 2.80s ease-in                          forwards;
}

/* 蓄力收縮環：三環交錯收縮 */
#dw-qigong-overlay.dw-qigong-active .dw-qg-charge-ring:nth-child(2) {
    animation: dw-ring-converge 0.9s 0.5s ease-in forwards;
}
#dw-qigong-overlay.dw-qigong-active .dw-qg-charge-ring:nth-child(3) {
    animation: dw-ring-converge 0.8s 0.7s ease-in forwards;
}
#dw-qigong-overlay.dw-qigong-active .dw-qg-charge-ring:nth-child(4) {
    animation: dw-ring-converge 0.7s 0.9s ease-in forwards;
}

/* 掌印氣勁：依序飛出 */
#dw-qigong-overlay.dw-qigong-active #dw-qg-palm-0 {
    animation: dw-palm-fire 0.5s 1.50s cubic-bezier(0.2, 0, 0.6, 1) forwards;
}
#dw-qigong-overlay.dw-qigong-active #dw-qg-palm-1 {
    animation: dw-palm-fire 0.5s 1.60s cubic-bezier(0.2, 0, 0.6, 1) forwards;
}
#dw-qigong-overlay.dw-qigong-active #dw-qg-palm-2 {
    animation: dw-palm-fire 0.5s 1.70s cubic-bezier(0.2, 0, 0.6, 1) forwards;
}
#dw-qigong-overlay.dw-qigong-active #dw-qg-palm-3 {
    animation: dw-palm-fire 0.5s 1.80s cubic-bezier(0.2, 0, 0.6, 1) forwards;
}
#dw-qigong-overlay.dw-qigong-active #dw-qg-palm-4 {
    animation: dw-palm-fire 0.5s 1.90s cubic-bezier(0.2, 0, 0.6, 1) forwards;
}

/* 入場：從左側飛入 + 輕微 overshoot */
@keyframes dw-qg-enter {
    0%   { opacity: 0;   transform: translateY(-58%) translateX(-130%); }
    65%  { opacity: 1;   transform: translateY(-58%) translateX(4%); }
    100% { opacity: 1;   transform: translateY(-58%) translateX(0%); }
}

/* 蓄力 v2：更強烈的光暈+亮度+縮放 */
@keyframes dw-qg-charge-v2 {
    0%   { filter: drop-shadow(0 0 10px rgba(220,180,100,0.4)); transform: translateY(-58%) translateX(0%) scale(1); }
    25%  { filter: drop-shadow(0 0 20px rgba(220,180,100,0.6)) brightness(1.05); transform: translateY(-58%) translateX(0%) scale(1.02); }
    50%  { filter: drop-shadow(0 0 30px rgba(255,220,130,0.8)) brightness(1.12); transform: translateY(-58%) translateX(0%) scale(1.04); }
    75%  { filter: drop-shadow(0 0 40px rgba(255,240,160,0.9)) brightness(1.2); transform: translateY(-58%) translateX(-1%) scale(1.06); }
    100% { filter: drop-shadow(0 0 50px rgba(255,255,200,1.0)) brightness(1.3); transform: translateY(-58%) translateX(-2%) scale(1.08); }
}

/* 發射瞬間：角色向後震退 */
@keyframes dw-qg-fire-jolt {
    0%   { transform: translateY(-58%) translateX(-2%) scale(1.08); }
    40%  { transform: translateY(-58%) translateX(-6%) scale(1.00); }
    100% { transform: translateY(-58%) translateX(-3%) scale(1.02); }
}

/* 淡出：退場 */
@keyframes dw-qg-fadeout {
    0%   { opacity: 1; transform: translateY(-58%) translateX(-3%) scale(1.02); }
    100% { opacity: 0; transform: translateY(-58%) translateX(-15%) scale(0.92); }
}

/* 收縮環：從大到小收到掌心 */
@keyframes dw-ring-converge {
    0%   { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    80%  { opacity: 0.5; transform: translate(-50%, -50%) scale(0.15); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(0); }
}

/* 掌印飛出：放大→向右飛射 */
@keyframes dw-palm-fire {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    100% { opacity: 0; transform: translate(calc(70vw - 50%), calc(-50% + 0px)) scale(0.6); }
}

/* 螢幕震動（強化版）— 位移加大至 12px，節奏更強烈 */
@keyframes dw-shake {
    0%   { transform: translate(-12px,  6px) rotate(-1deg); }
    20%  { transform: translate( 12px, -8px) rotate( 1deg); }
    40%  { transform: translate(-10px, 10px) rotate(-1deg); }
    60%  { transform: translate( 10px, -6px) rotate( 0.5deg); }
    80%  { transform: translate( -6px,  8px) rotate(-0.5deg); }
    100% { transform: translate(  0px,  0px) rotate( 0deg); }
}
/* 小震動（2-4 顆，第一階段） */
@keyframes dw-shake-small {
    0%   { transform: translate(-4px,  2px) rotate(-0.3deg); }
    25%  { transform: translate( 4px, -3px) rotate( 0.3deg); }
    50%  { transform: translate(-3px,  3px) rotate(-0.2deg); }
    75%  { transform: translate( 3px, -2px) rotate( 0.2deg); }
    100% { transform: translate( 0px,  0px) rotate( 0deg); }
}
/* 大震動（9-16 顆，第三階段） */
@keyframes dw-shake-large {
    0%   { transform: translate(-20px, 10px) rotate(-1.5deg); }
    20%  { transform: translate( 20px,-13px) rotate( 1.5deg); }
    40%  { transform: translate(-16px, 16px) rotate(-1.5deg); }
    60%  { transform: translate( 16px, -9px) rotate( 0.8deg); }
    80%  { transform: translate(-10px, 13px) rotate(-0.8deg); }
    100% { transform: translate(  0px,  0px) rotate( 0deg); }
}

/* ── 分級聚氣蓄力動畫 ─────────────────────────────────── */
/* Tier 1：弱金光（共 1.5s charge） */
@keyframes dw-qg-charge-t1 {
    0%   { filter: drop-shadow(0 0 10px rgba(220,180,100,0.4)); transform: translateY(-58%) translateX(0%) scale(1.00); }
    40%  { filter: drop-shadow(0 0 20px rgba(220,180,100,0.6)) brightness(1.06); transform: translateY(-58%) translateX(0%) scale(1.02); }
    70%  { filter: drop-shadow(0 0 14px rgba(220,180,100,0.5)) brightness(1.03); transform: translateY(-58%) translateX(-0.5%) scale(1.01); }
    100% { filter: drop-shadow(0 0 28px rgba(255,220,130,0.7)) brightness(1.12); transform: translateY(-58%) translateX(-1%) scale(1.05); }
}
/* Tier 2：弱→中金光（共 3.5s charge，43% 為相位切換） */
@keyframes dw-qg-charge-t2 {
    0%   { filter: drop-shadow(0 0 10px rgba(220,180,100,0.4)); transform: translateY(-58%) scale(1.00); }
    20%  { filter: drop-shadow(0 0 22px rgba(220,180,100,0.65)) brightness(1.06); transform: translateY(-58%) scale(1.02); }
    40%  { filter: drop-shadow(0 0 16px rgba(220,180,100,0.55)) brightness(1.04); transform: translateY(-58%) scale(1.01); }
    46%  { filter: drop-shadow(0 0 50px rgba(255,230,100,1.0)) brightness(1.25); transform: translateY(-58%) scale(1.07); }
    60%  { filter: drop-shadow(0 0 45px rgba(255,240,160,0.85)) brightness(1.22); transform: translateY(-58%) scale(1.05); }
    80%  { filter: drop-shadow(0 0 35px rgba(255,220,130,0.82)) brightness(1.20); transform: translateY(-58%) scale(1.04); }
    100% { filter: drop-shadow(0 0 55px rgba(255,240,160,0.92)) brightness(1.30); transform: translateY(-58%) translateX(-2%) scale(1.08); }
}
/* Tier 3：弱→中→強金光（共 6.5s charge，29%/60% 為相位切換） */
@keyframes dw-qg-charge-t3 {
    0%   { filter: drop-shadow(0 0 10px rgba(220,180,100,0.4)); transform: translateY(-58%) scale(1.00); }
    14%  { filter: drop-shadow(0 0 20px rgba(220,180,100,0.6)) brightness(1.05); transform: translateY(-58%) scale(1.02); }
    27%  { filter: drop-shadow(0 0 14px rgba(220,180,100,0.5)) brightness(1.03); transform: translateY(-58%) scale(1.01); }
    31%  { filter: drop-shadow(0 0 55px rgba(255,230,100,1.0)) brightness(1.28); transform: translateY(-58%) scale(1.07); }
    45%  { filter: drop-shadow(0 0 50px rgba(255,240,160,0.88)) brightness(1.26); transform: translateY(-58%) scale(1.05); }
    57%  { filter: drop-shadow(0 0 40px rgba(255,220,130,0.85)) brightness(1.22); transform: translateY(-58%) scale(1.04); }
    62%  { filter: drop-shadow(0 0 85px rgba(255,255,200,1.0)) brightness(1.60); transform: translateY(-58%) scale(1.12); }
    78%  { filter: drop-shadow(0 0 95px rgba(255,255,200,0.92)) brightness(1.65); transform: translateY(-58%) scale(1.10); }
    92%  { filter: drop-shadow(0 0 75px rgba(255,240,180,0.88)) brightness(1.60); transform: translateY(-58%) scale(1.09); }
    100% { filter: drop-shadow(0 0 105px rgba(255,255,220,1.0)) brightness(1.80); transform: translateY(-58%) translateX(-2%) scale(1.15); }
}

/* ── Tier 分級：角色動畫 ──────────────────────────────── */
/* 取代舊的 .dw-qigong-active #dw-qigong-m1 規則，使用 tier 類別覆蓋 */
#dw-qigong-overlay.dw-tier1.dw-qigong-active #dw-qigong-m1 {
    animation:
        dw-qg-enter     0.50s 0.00s ease-out                         forwards,
        dw-qg-charge-t1 1.50s 0.50s ease-in-out                      forwards,
        dw-qg-fire-jolt 0.15s 2.00s cubic-bezier(0.1,0.8,0.3,1)     forwards,
        dw-qg-fadeout   0.50s 3.30s ease-in                          forwards;
}
#dw-qigong-overlay.dw-tier2.dw-qigong-active #dw-qigong-m1 {
    animation:
        dw-qg-enter     0.50s 0.00s ease-out                         forwards,
        dw-qg-charge-t2 3.50s 0.50s ease-in-out                      forwards,
        dw-qg-fire-jolt 0.15s 4.00s cubic-bezier(0.1,0.8,0.3,1)     forwards,
        dw-qg-fadeout   0.50s 5.30s ease-in                          forwards;
}
#dw-qigong-overlay.dw-tier3.dw-qigong-active #dw-qigong-m1 {
    animation:
        dw-qg-enter     0.50s 0.00s ease-out                         forwards,
        dw-qg-charge-t3 6.50s 0.50s ease-in-out                      forwards,
        dw-qg-fire-jolt 0.15s 7.00s cubic-bezier(0.1,0.8,0.3,1)     forwards,
        dw-qg-fadeout   0.50s 8.30s ease-in                          forwards;
}

/* ── Tier 分級：蓄力收縮環（在 charge 最後 0.7s 收縮） ── */
/* Tier 1：fire at 2s，ring 開始於 1.3-1.5s */
#dw-qigong-overlay.dw-tier1.dw-qigong-active .dw-qg-charge-ring:nth-child(2) { animation: dw-ring-converge 0.9s 1.3s ease-in forwards; }
#dw-qigong-overlay.dw-tier1.dw-qigong-active .dw-qg-charge-ring:nth-child(3) { animation: dw-ring-converge 0.8s 1.4s ease-in forwards; }
#dw-qigong-overlay.dw-tier1.dw-qigong-active .dw-qg-charge-ring:nth-child(4) { animation: dw-ring-converge 0.7s 1.5s ease-in forwards; }
/* Tier 2：fire at 4s，ring 開始於 3.3-3.5s */
#dw-qigong-overlay.dw-tier2.dw-qigong-active .dw-qg-charge-ring:nth-child(2) { animation: dw-ring-converge 0.9s 3.3s ease-in forwards; }
#dw-qigong-overlay.dw-tier2.dw-qigong-active .dw-qg-charge-ring:nth-child(3) { animation: dw-ring-converge 0.8s 3.4s ease-in forwards; }
#dw-qigong-overlay.dw-tier2.dw-qigong-active .dw-qg-charge-ring:nth-child(4) { animation: dw-ring-converge 0.7s 3.5s ease-in forwards; }
/* Tier 3：fire at 7s，ring 開始於 6.3-6.5s */
#dw-qigong-overlay.dw-tier3.dw-qigong-active .dw-qg-charge-ring:nth-child(2) { animation: dw-ring-converge 0.9s 6.3s ease-in forwards; }
#dw-qigong-overlay.dw-tier3.dw-qigong-active .dw-qg-charge-ring:nth-child(3) { animation: dw-ring-converge 0.8s 6.4s ease-in forwards; }
#dw-qigong-overlay.dw-tier3.dw-qigong-active .dw-qg-charge-ring:nth-child(4) { animation: dw-ring-converge 0.7s 6.5s ease-in forwards; }

/* ── 壓制舊的掌印飛出（tier 模式改用單顆氣功球） ──────── */
#dw-qigong-overlay.dw-tier1.dw-qigong-active #dw-qg-palm-0,
#dw-qigong-overlay.dw-tier1.dw-qigong-active #dw-qg-palm-1,
#dw-qigong-overlay.dw-tier1.dw-qigong-active #dw-qg-palm-2,
#dw-qigong-overlay.dw-tier1.dw-qigong-active #dw-qg-palm-3,
#dw-qigong-overlay.dw-tier1.dw-qigong-active #dw-qg-palm-4,
#dw-qigong-overlay.dw-tier2.dw-qigong-active #dw-qg-palm-0,
#dw-qigong-overlay.dw-tier2.dw-qigong-active #dw-qg-palm-1,
#dw-qigong-overlay.dw-tier2.dw-qigong-active #dw-qg-palm-2,
#dw-qigong-overlay.dw-tier2.dw-qigong-active #dw-qg-palm-3,
#dw-qigong-overlay.dw-tier2.dw-qigong-active #dw-qg-palm-4,
#dw-qigong-overlay.dw-tier3.dw-qigong-active #dw-qg-palm-0,
#dw-qigong-overlay.dw-tier3.dw-qigong-active #dw-qg-palm-1,
#dw-qigong-overlay.dw-tier3.dw-qigong-active #dw-qg-palm-2,
#dw-qigong-overlay.dw-tier3.dw-qigong-active #dw-qg-palm-3,
#dw-qigong-overlay.dw-tier3.dw-qigong-active #dw-qg-palm-4 { animation: none !important; }

/* ── 氣功球（單顆，依 tier 大小不同） ────────────────── */
#dw-qg-ball {
    position:       absolute;
    left:           30%;
    top:            42%;
    border-radius:  50%;
    background:     radial-gradient(circle at 35% 35%,
                        #fff 0%,
                        rgba(255, 240, 180, 0.95) 15%,
                        rgba(255, 200, 80, 0.9) 35%,
                        rgba(220, 140, 30, 0.7) 60%,
                        transparent 100%);
    transform:      translate(-50%, -50%) scale(0);
    opacity:        0;
    pointer-events: none;
    box-shadow:     0 0 20px rgba(255, 220, 100, 0.9),
                    0 0 50px rgba(255, 180, 50, 0.7),
                    0 0 100px rgba(220, 140, 30, 0.4);
}
#dw-qg-ball::before {
    content:        '';
    position:       absolute;
    top:            20%;
    left:           -55%;
    width:          75%;
    height:         60%;
    background:     linear-gradient(to right,
                        transparent 0%,
                        rgba(255,200,80,0.3) 30%,
                        rgba(255,180,50,0.5) 60%,
                        rgba(255,220,100,0.3) 100%);
    border-radius:  50% 0 0 50%;
    filter:         blur(6px);
}
#dw-qg-ball.dw-ball-small  { width:  80px; height:  80px; }
#dw-qg-ball.dw-ball-medium { width: 160px; height: 160px; }
#dw-qg-ball.dw-ball-large  { width: 320px; height: 320px; }

@keyframes dw-qg-ball-fire {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
    30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    100% { opacity: 0; transform: translate(calc(75vw - 50%), -50%) scale(0.5); }
}
#dw-qg-ball.dw-ball-fire {
    animation: dw-qg-ball-fire 0.6s cubic-bezier(0.2, 0, 0.6, 1) forwards;
}

/* Wild 從右上角斜砸 */
@keyframes dw-meteor-drop {
    0%   { transform: translate(80px, -150px) scale(0.4) rotate(25deg); opacity: 0; filter: brightness(3); }
    30%  { opacity: 1; filter: brightness(2); }
    75%  { transform: translate(2px, 4px) scale(1.08) rotate(-2deg); filter: brightness(1.4); }
    90%  { transform: translate(-1px, -2px) scale(0.96) rotate(1deg); filter: brightness(1.1); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
}

/* 火焰尾跡消散 */
@keyframes dw-fire-trail {
    0%   { opacity: 1; }
    50%  { opacity: 0.5; }
    100% { opacity: 0; }
}

/* 衝擊白光閃 */
@keyframes dw-impact-flash {
    0%   { opacity: 0; transform: scale(0.5); }
    30%  { opacity: 0.9; transform: scale(1.2); }
    100% { opacity: 0;  transform: scale(1.5); }
}

/* 著地衝擊波紋（更大更持久） */
@keyframes dw-impact-ripple {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 180, 60, 0.8), 0 0 0 0 rgba(255, 100, 20, 0.5); }
    20%  { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(255, 180, 60, 0.6), 0 0 25px rgba(255, 100, 20, 0.4); }
    50%  { transform: scale(0.97); }
    100% { transform: scale(1); box-shadow: 0 0 0 20px rgba(255, 180, 60, 0), 0 0 40px rgba(255, 100, 20, 0); }
}

/* 衝擊擴散環 */
@keyframes dw-shockwave-ring {
    0%   { width: 0; height: 0; opacity: 0.9; border-width: 3px; }
    100% { width: 120px; height: 120px; opacity: 0; border-width: 1px; }
}

/* ── Retrigger Overlay ───────────────────────────────────── */
#dw-retrigger-overlay {
    position:    absolute;
    top:         50%;
    left:        50%;
    transform:   translate(-50%, -50%) scale(0);
    background:  linear-gradient(135deg, rgba(155,89,182,0.95), rgba(80,20,120,0.95));
    border:      2px solid var(--dw-accent-gold);
    border-radius: 12px;
    padding:     12px 30px;
    text-align:  center;
    color:       var(--dw-accent-gold);
    font-size:   1.4rem;
    font-weight: 900;
    z-index:     50;
    pointer-events: none;
    box-shadow:  0 0 24px var(--dw-shadow-gold);
}
#dw-retrigger-overlay.hidden { display: none; }
#dw-retrigger-overlay.dw-retrigger-active {
    animation: dw-retrigger-pop 1.5s ease-out forwards;
}

/* ── Paytable ────────────────────────────────────────────── */
#dw-paytable-overlay {
    overflow-y: auto;
    align-items: flex-start;
    padding:    20px;
}
#dw-paytable-modal {
    background:  linear-gradient(160deg, #1A1228, #0D0A1A);
    border:      2px solid var(--dw-border-gold);
    border-radius: 16px;
    padding:     24px;
    width:       100%;
    max-width:   520px;
    position:    relative;
}
#dw-paytable-modal h2 {
    text-align:  center;
    font-size:   1.5rem;
    color:       var(--dw-accent-gold);
    margin:      0 0 16px;
    letter-spacing: 2px;
}
#dw-paytable-close {
    position:   absolute;
    top:        12px;
    right:      16px;
    background: transparent;
    border:     none;
    color:      var(--dw-text-secondary);
    font-size:  1.6rem;
    cursor:     pointer;
    line-height: 1;
    padding:    0;
}
#dw-paytable-close:hover { color: var(--dw-accent-gold); }

.dw-pt-section { margin-bottom: 20px; }
.dw-pt-title {
    font-size:  1rem;
    font-weight: 700;
    color:      var(--dw-accent-gold);
    border-bottom: 1px solid var(--dw-border-dark);
    padding-bottom: 4px;
    margin:     0 0 8px;
}
.dw-pt-title.dw-pt-free { color: var(--dw-accent-purple); }
.dw-pt-note {
    font-size:  0.75rem;
    color:      var(--dw-text-secondary);
    margin:     0 0 8px;
}
.dw-pt-note.dw-pt-free { color: #C39BDD; }

.dw-pt-table {
    width:          100%;
    border-collapse: collapse;
    font-size:      0.82rem;
}
.dw-pt-table th,
.dw-pt-table td {
    text-align:  center;
    padding:     5px 6px;
    border-bottom: 1px solid rgba(61, 43, 80, 0.5);
    color:       var(--dw-text-primary);
}
.dw-pt-table th {
    color:       var(--dw-text-secondary);
    font-size:   0.72rem;
    font-weight: 700;
}
.dw-pt-table td:first-child { text-align: left; }
.dw-pt-table tr.dw-pt-highlight td { color: var(--dw-accent-gold); font-weight: 700; }
.dw-pt-icon {
    width:  22px;
    height: 22px;
    vertical-align: middle;
    margin-right: 4px;
}
.dw-pt-icon-lg {
    width:  40px;
    height: 40px;
    vertical-align: middle;
    margin-right: 8px;
    flex-shrink: 0;
}
.dw-pt-special { display: flex; flex-direction: column; gap: 10px; }
.dw-pt-special-item {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-size:   0.8rem;
    color:       var(--dw-text-primary);
    line-height: 1.5;
}

/* ── Keyframe Animations ─────────────────────────────────── */
/* dw-win-pulse — 暗紫高對比色（宣紙米色背景上明顯），加描邊 */
@keyframes dw-win-pulse {
    from {
        filter:       brightness(1.05) saturate(1.3) drop-shadow(0 0 6px rgba(139,47,201,0.95));
        transform:    scale(1.08);
        box-shadow:   inset 0 0 10px rgba(139,47,201,0.35), 0 0 0 2px rgba(139,47,201,0.85);
        background:   rgba(100,20,160,0.09);
        border-radius: 10px;
    }
    to {
        filter:       brightness(1.28) saturate(1.75) drop-shadow(0 0 14px var(--dw-win-purple)) drop-shadow(0 0 22px rgba(139,47,201,0.55));
        transform:    scale(1.15);
        box-shadow:   inset 0 0 18px rgba(176,80,232,0.30), 0 0 0 3px var(--dw-win-purple);
        background:   rgba(139,47,201,0.15);
        border-radius: 10px;
    }
}
/* dw-scatter-pulse — 強化紫色光暈 + 描邊 */
@keyframes dw-scatter-pulse {
    from {
        filter:       brightness(1.15) drop-shadow(0 0 8px rgba(92,10,140,0.95));
        transform:    scale(1.05);
        box-shadow:   0 0 0 2px rgba(92,10,140,0.80);
        border-radius: 10px;
    }
    to {
        filter:       brightness(1.4) drop-shadow(0 0 18px #7B2FBE) drop-shadow(0 0 28px rgba(139,47,201,0.55));
        transform:    scale(1.12);
        box-shadow:   0 0 0 3px var(--dw-win-purple);
        border-radius: 10px;
    }
}
/* dw-m1-pulse — 強化暗紫光暈 + 描邊 */
@keyframes dw-m1-pulse {
    from {
        filter:       brightness(1.15) drop-shadow(0 0 8px rgba(139,47,201,0.95));
        transform:    scale(1.05);
        box-shadow:   0 0 0 2px rgba(139,47,201,0.80);
        border-radius: 10px;
    }
    to {
        filter:       brightness(1.4) drop-shadow(0 0 16px var(--dw-win-purple)) drop-shadow(0 0 26px rgba(176,80,232,0.6));
        transform:    scale(1.14);
        box-shadow:   0 0 0 3px var(--dw-win-purple-hi);
        border-radius: 10px;
    }
}
@keyframes dw-wild-appear {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; filter: brightness(2); }
    60%  { transform: scale(1.2) rotate(5deg); opacity: 1; filter: brightness(1.5); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
}
/* ── FS 轉場 Keyframes ───────────────────────────────────── */

/* 暗幕淡入 */
@keyframes dw-dark-bg-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 龍衝刺（左→中心完全重疊→縮小消失） */
@keyframes dw-dragon-rush {
    0%   { left: -390px; opacity: 1; transform: translateY(-50%) translateX(-50%) scale(1); }
    45%  { left: 50%; opacity: 1; transform: translateY(-50%) translateX(-50%) scale(1.05); }
    58%  { left: 50%; opacity: 0.62; transform: translateY(-50%) translateX(-50%) scale(1); }
    72%  { left: 50%; opacity: 0.62; transform: translateY(-50%) translateX(-50%) scale(1); }
    85%  { left: 50%; opacity: 0; transform: translateY(-50%) translateX(-50%) scale(0.3); }
    100% { left: 50%; opacity: 0; transform: translateY(-50%) translateX(-50%) scale(0); }
}

/* 狼衝刺（右→中心完全重疊→縮小消失），改用 left 確保與龍同一中心點 */
@keyframes dw-wolf-rush {
    0%   { left: calc(100% + 390px); opacity: 1; transform: translateY(-50%) translateX(-50%) scaleX(-1) scale(1); }
    45%  { left: 50%; opacity: 1; transform: translateY(-50%) translateX(-50%) scaleX(-1) scale(1.05); }
    58%  { left: 50%; opacity: 0.62; transform: translateY(-50%) translateX(-50%) scaleX(-1) scale(1); }
    72%  { left: 50%; opacity: 0.62; transform: translateY(-50%) translateX(-50%) scaleX(-1) scale(1); }
    85%  { left: 50%; opacity: 0; transform: translateY(-50%) translateX(-50%) scaleX(-1) scale(0.3); }
    100% { left: 50%; opacity: 0; transform: translateY(-50%) translateX(-50%) scaleX(-1) scale(0); }
}

/* 殘影跟隨 */
@keyframes dw-ghost-trail {
    0%   { opacity: 0; }
    20%  { opacity: 0.5; }
    60%  { opacity: 0.3; }
    100% { opacity: 0; }
}

/* 速度線閃現 */
@keyframes dw-speed-flash {
    0%   { opacity: 0; }
    15%  { opacity: 0.6; }
    40%  { opacity: 0.3; }
    100% { opacity: 0; }
}

/* 水墨爆發圓擴展 */
@keyframes dw-ink-expand {
    0%   { width: 0; height: 0; opacity: 0.9; }
    60%  { opacity: 0.95; }
    100% { width: 250vmax; height: 250vmax; opacity: 1; }
}

/* 水墨暈染背景淡入 */
@keyframes dw-ink-wash-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 郎君綻放（從墨水中心由小到大，縮小至 80% = 1.5×0.8=1.2） */
@keyframes dw-lord-bloom {
    0%   { transform: translate(-50%, -55%) scale(0); opacity: 0; }
    50%  { transform: translate(-50%, -55%) scale(1.42); opacity: 1; }
    75%  { transform: translate(-50%, -55%) scale(1.14); opacity: 1; }
    100% { transform: translate(-50%, -55%) scale(1.2); opacity: 1; }
}

/* 金光脈衝（glow div，只用 opacity — GPU 可合成，不凍結主線程） */
@keyframes dw-lord-glow-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* 狂傲 pulse（笑聲期間縮放） */
@keyframes dw-lord-pulse {
    0%, 100% { transform: scale(1.0); }
    50%      { transform: scale(1.15); }
}

/* 光暈擴展 — 結束時保持較高 opacity 以便脈衝接手 */
@keyframes dw-glow-expand {
    0%   { width: 60px; height: 60px; opacity: 0; }
    30%  { opacity: 0.8; }
    100% { width: 550px; height: 550px; opacity: 0.5; }
}

/* 文字上滑出現 */
@keyframes dw-text-appear {
    from { opacity: 0; transform: translateX(-50%) translateY(30px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 整體淡出 */
@keyframes dw-overlay-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes dw-retrigger-pop {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    30%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
    85%  { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}

/* ── RWD ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dw-symbol {
        width:  var(--dw-symbol-size-tablet);
        height: var(--dw-symbol-size-tablet);
    }
    .dw-reel-viewport {
        height: calc(var(--dw-symbol-size-tablet) * 4);
    }
    #dw-btn-spin { width: 78px; height: 78px; font-size: 1rem; }
    /* FS 轉場 RWD */
    #dw-trans-dragon-wrap,
    #dw-trans-wolf-wrap { width: 270px; height: 270px; }
    #dw-trans-mw { width: 300px; height: 300px; }
    .dw-qg-palm { width: 42px; height: 42px; }
    .dw-qg-charge-ring { width: 140px; height: 140px; }
}
@media (max-width: 480px) {
    #dw-game-container {
        height: 100dvh;
        height: -webkit-fill-available;
        min-height: 0;
        max-height: 100dvh;
        overflow: hidden;
    }
    .dw-symbol {
        width:  var(--dw-symbol-size-mobile);
        height: var(--dw-symbol-size-mobile);
    }
    .dw-reel-viewport {
        height: calc(var(--dw-symbol-size-mobile) * 4);
    }
    #dw-btn-spin { width: 70px; height: 70px; font-size: 0.9rem; }
    #dw-header h1 { font-size: 1rem; }
    /* FS 轉場 RWD */
    #dw-trans-dragon-wrap,
    #dw-trans-wolf-wrap { width: 210px; height: 210px; }
    #dw-trans-mw { width: 240px; height: 240px; }
    #dw-trans-text p { font-size: 1.4rem; }
    #dw-trans-spin-count { font-size: 2.2rem; }
    .dw-qg-palm { width: 36px; height: 36px; }
    .dw-qg-charge-ring { width: 110px; height: 110px; }
    #dw-qigong-m1 { max-width: 324px; }
}
@media (max-width: 360px) {
    .dw-symbol {
        width:  var(--dw-symbol-size-small);
        height: var(--dw-symbol-size-small);
    }
    .dw-reel-viewport {
        height: calc(var(--dw-symbol-size-small) * 4);
    }
    #dw-trans-dragon-wrap,
    #dw-trans-wolf-wrap { width: 165px; height: 165px; }
    #dw-trans-mw { width: 195px; height: 195px; }
}