/* 基本對話場景樣式 */
.ei-dialog-scene {
    position: relative;
    background-size: cover;
    background-position: center center;
    padding: 20px;
    min-height: 400px;
    box-sizing: border-box;
}

/* Loading overlay (optional, per scene) */
.ei-dialog-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
}
.ei-dialog-loading-panel {
    width: min(420px, 92%);
    background: rgba(0,0,0,0.72);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    padding: 16px 18px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
}
.ei-dialog-loading-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}
.ei-dialog-loading-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    overflow: hidden;
    margin: 0 0 10px 0;
}
.ei-dialog-loading-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: rgba(255,255,255,0.75);
    transition: width 120ms linear;
}
.ei-dialog-loading-text {
    font-size: 12px;
    opacity: 0.85;
}

.ei-dialog-next-btn.ei-dialog-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* 右上角靜音按鈕（扁平、黑底白字、半透明） */
.ei-dialog-mute-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    cursor: pointer;
    line-height: 1;
}
.ei-dialog-mute-btn:hover {
    background: rgba(0,0,0,0.75);
}
.ei-dialog-mute-btn:focus {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
}
.ei-dialog-mute-icon {
    display: inline-flex;
}
.ei-dialog-icon-mute {
    display: none;
}
.ei-dialog-mute-btn[data-muted="1"] .ei-dialog-icon-sound {
    display: none;
}
.ei-dialog-mute-btn[data-muted="1"] .ei-dialog-icon-mute {
    display: inline;
}

/* 開場圖片容器：左右 / 置中對齊，由 class 控制 */
.ei-dialog-opening-image-wrap {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
}
.ei-dialog-align-left {
    justify-content: flex-start;
}
.ei-dialog-align-center {
    justify-content: center;
}
.ei-dialog-align-right {
    justify-content: flex-end;
}
.ei-dialog-opening-image {
    display: inline-block;
}

/* 角色立繪，底部由 JS 對齊對話框頂端 */





/* 對話框 */
.ei-dialog-dialogue-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    width: 90%;
    background: rgba(var(--ei-dialog-box-bg-rgb,0,0,0), var(--ei-dialog-box-opacity,0.6));
    color: #fff;
    padding: 15px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 2px;
    border-color: #fff;
    border-radius: 8px;
    z-index: 10;
}

.ei-dialog-dialogue-text {
    min-height: 60px;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 10px;
    text-align: left;
}

.ei-dialog-text-align-left { text-align: left; }
.ei-dialog-text-align-center { text-align: center; }
.ei-dialog-text-align-right { text-align: right; }

.ei-dialog-dialogue-text p{margin:0;}
.ei-dialog-dialogue-text p + p{margin-top:0.6em;}
.ei-dialog-dialogue-text > :last-child{margin-bottom:0;}

/* 下一步按鈕位置控制 */
.ei-dialog-next-wrap {
    margin-top: 5px;
}
.ei-dialog-next-align-left {
    text-align: left;
}
.ei-dialog-next-align-center {
    text-align: center;
}
.ei-dialog-next-align-right {
    text-align: right;
}

.ei-dialog-scene .ei-dialog-next-btn {
    display: inline-block;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    padding: 8px 16px;
    /* 用 !important 壓過主題或全站 button 樣式 */
    background: var(--ei-dialog-advance-btn-bg-color, #ffffff) !important;
    color: var(--ei-dialog-advance-btn-text-color, #000) !important;
    border-width: 2px;
    border-style: solid;
    border-color: var(--ei-dialog-next-btn-border-color, transparent);
    border-radius: 4px;
    cursor: pointer;
}

/* 「前往下一層」(mode=layer) 的選項按鈕：跟「下一步」共用配色（若有設定） */
.ei-dialog-choice-btn.ei-dialog-layer-btn {
    background: var(--ei-dialog-advance-btn-bg-color, #ffd966) !important;
    color: var(--ei-dialog-advance-btn-text-color, #000) !important;
}

.ei-dialog-choice-list {
    margin-top: 10px;
}

.ei-dialog-choice-btn {
    display: inline-block;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    margin-right: 8px;
    margin-bottom: 5px;
    padding: 8px 14px;
    border-radius: 4px;
    border-width: 2px;
    border-style: solid;
    border-color: var(--ei-dialog-choice-border-color, transparent);
    cursor: pointer;
    background: #ffd966;
    color: #000;
}





/* === EI Dialogue Scenes 1.3.9: 角色位置以對話框為基準（改為 flex，與開場圖片對齊邏輯一致） === */
.ei-dialog-scene .ei-dialog-character {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    z-index: 5; /* 永遠在對話框之後 */
}

.ei-dialog-opening-image-wrap {
    z-index: 9; /* 開場圖片貼著對話框上緣，但仍在對話框之後 */
}
.ei-dialog-scene .ei-dialog-character.ei-dialog-left {
    justify-content: flex-start;
}
.ei-dialog-scene .ei-dialog-character.ei-dialog-center {
    justify-content: center;
}
.ei-dialog-scene .ei-dialog-character.ei-dialog-right {
    justify-content: flex-end;
}
.ei-dialog-scene .ei-dialog-character img {
    display: block;
    max-width: 100%;
    height: auto;
    pointer-events: none;
}


@media (max-width: 768px) {
    .ei-dialog-scene {
        padding: 10px;
        min-height: 480px;
    }
    .ei-dialog-dialogue-box {
        bottom: 12px;
        width: 95%;
    }
    .ei-dialog-dialogue-text {
        min-height: 40px;
        font-size: 14px;
    }
    .ei-dialog-scene .ei-dialog-character img {
        max-width: 70%;
    }
}

/* --- Follow image steps: 圖片變化特效 --- */
.ei-dialog-fx-overlay{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    pointer-events: none;
    z-index: 25;
    opacity: 0;
}

/* Pixel canvas overlay (JS-driven pixelation) */
.ei-dialog-pixel-canvas{
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    opacity: 1;
}

/* Overlay animations */
.ei-dialog-fx-overlay.fx-flash,
.ei-dialog-fx-overlay.fx-flash_warp{
    background: rgba(255,255,255,1);
    animation: eiDialogFxFlash 420ms ease-out forwards;
}

.ei-dialog-fx-overlay.fx-glow{
    background: rgba(255,255,255,0.65);
    animation: eiDialogFxGlow 520ms ease-out forwards;
}

.ei-dialog-fx-overlay.fx-fade{
    background: rgba(0,0,0,0);
    animation: eiDialogFxFade 520ms ease-in-out forwards;
}

.ei-dialog-fx-overlay.fx-smoke{
    background: radial-gradient(circle at 50% 60%, rgba(255,255,255,0.75), rgba(255,255,255,0) 60%);
    filter: blur(2px);
    animation: eiDialogFxSmoke 700ms ease-in-out forwards;
}

.ei-dialog-fx-overlay.fx-glitch{
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0) 6px, rgba(255,255,255,0.35) 8px);
    animation: eiDialogFxGlitch 420ms steps(6, end) forwards;
}

.ei-dialog-fx-overlay.fx-pixel{
    background: rgba(255,255,255,0.0);
    animation: eiDialogFxPixel 520ms steps(7, end) forwards;
}

@keyframes eiDialogFxFlash{
    0%{opacity:0;}
    20%{opacity:1;}
    100%{opacity:0;}
}

@keyframes eiDialogFxGlow{
    0%{opacity:0;}
    25%{opacity:0.75;}
    100%{opacity:0;}
}

@keyframes eiDialogFxFade{
    0%{opacity:0;}
    35%{opacity:0.9;}
    100%{opacity:0;}
}

@keyframes eiDialogFxSmoke{
    0%{opacity:0; transform: translateY(6px) scale(0.95);}
    35%{opacity:0.95; transform: translateY(-2px) scale(1.02);}
    100%{opacity:0; transform: translateY(-10px) scale(1.05);}
}

@keyframes eiDialogFxGlitch{
    0%{opacity:0; transform: translateX(0);}
    15%{opacity:0.7; transform: translateX(-3px);}
    30%{opacity:0.2; transform: translateX(2px);}
    45%{opacity:0.8; transform: translateX(-1px);}
    100%{opacity:0; transform: translateX(0);}
}

@keyframes eiDialogFxPixel{
    0%{opacity:0;}
    20%{opacity:0.45;}
    60%{opacity:0.15;}
    100%{opacity:0;}
}

/* Wrap effects */
.ei-dialog-character.ei-fx-flash_warp{
    animation: eiDialogWarp 420ms ease-out forwards;
}

/* IMPORTANT: wrapper uses transform for positioning (baseY + deltaY),
   so we animate the IMG (not wrapper) to create a visible "warp".
*/
.ei-dialog-character.ei-fx-flash_warp img{
    animation: eiDialogImgWarp 420ms steps(6, end) forwards;
}
/* Warp wobble on the IMAGE (not the wrapper) so we don't fight positioning transforms */
.ei-dialog-character.ei-fx-flash_warp img{
    animation: eiDialogImgWarp 420ms steps(6, end) forwards;
}
.ei-dialog-character.ei-fx-glitch{
    animation: eiDialogJitter 420ms steps(6, end) forwards;
}
.ei-dialog-character.ei-fx-pixel{
    animation: eiDialogPixelShift 520ms steps(7, end) forwards;
}
.ei-dialog-character.ei-fx-glow{
    animation: eiDialogGlowWrap 420ms ease-out forwards;
}
.ei-dialog-character.ei-fx-flash{
    animation: eiDialogGlowWrap 420ms ease-out forwards;
}
.ei-dialog-character.ei-fx-fade{
    animation: eiDialogFadeWrap 520ms ease-in-out forwards;
}
.ei-dialog-character.ei-fx-smoke{
    animation: eiDialogFadeWrap 700ms ease-in-out forwards;
}

@keyframes eiDialogWarp{
    0%{filter:none;}
    18%{filter:brightness(1.55) contrast(1.25) saturate(1.2) blur(0.6px);}
    45%{filter:brightness(1.10) contrast(1.10) saturate(1.0) blur(0.2px);}
    70%{filter:brightness(0.95) contrast(1.05) saturate(0.95);}
    100%{filter:none;}
}

@keyframes eiDialogImgWarp{
    0%{transform:translate(0,0) skew(0deg,0deg);}
    16%{transform:translate(-2px,1px) skew(2deg,-1deg);}
    32%{transform:translate(2px,-1px) skew(-2deg,1deg);}
    48%{transform:translate(-1px,0px) skew(1deg,0deg);}
    64%{transform:translate(1px,1px) skew(-1deg,-1deg);}
    100%{transform:translate(0,0) skew(0deg,0deg);}
}

@keyframes eiDialogJitter{
    0%{filter:none;}
    20%{filter:contrast(1.25) brightness(1.1) hue-rotate(6deg);}
    40%{filter:contrast(1.05) brightness(0.95) hue-rotate(-6deg);}
    60%{filter:contrast(1.2) brightness(1.05) hue-rotate(4deg);}
    100%{filter:none;}
}

@keyframes eiDialogPixelShift{
    0%{filter:none;}
    30%{filter:saturate(1.25) contrast(1.15);}
    60%{filter:saturate(0.95) contrast(1.05);}
    100%{filter:none;}
}

@keyframes eiDialogGlowWrap{
    0%{filter:none;}
    20%{filter:brightness(1.45) contrast(1.1);}
    100%{filter:none;}
}

@keyframes eiDialogFadeWrap{
    0%{opacity:1;}
    35%{opacity:0.35;}
    70%{opacity:1;}
    100%{opacity:1;}
}


.ei-dialog-fx-overlay.fx-ripple{
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55), rgba(255,255,255,0.10) 35%, rgba(255,255,255,0) 60%);
    animation: eiDialogFxRipple 720ms ease-out forwards;
}
.ei-dialog-fx-overlay.fx-slice_shift{
    background: repeating-linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0) 10px, rgba(255,255,255,0.28) 13px, rgba(255,255,255,0.0) 16px);
    animation: eiDialogFxSlice 620ms steps(6, end) forwards;
}
.ei-dialog-fx-overlay.fx-invert_blink{
    background: rgba(255,255,255,0.85);
    mix-blend-mode: difference;
    animation: eiDialogFxInvertBlink 420ms steps(2, end) forwards;
}

.ei-dialog-character.ei-fx-shake_hard,
.ei-dialog-scene.ei-scene-fx-shake_hard{
    animation: eiDialogSceneShakeHard 560ms cubic-bezier(.2,.01,.2,1) forwards;
}
.ei-dialog-character.ei-fx-liquify img,
.ei-dialog-scene.ei-scene-fx-liquify{
    animation: eiDialogLiquify 760ms ease-in-out forwards;
}
.ei-dialog-character.ei-fx-zoom_burst,
.ei-dialog-scene.ei-scene-fx-zoom_burst{
    animation: eiDialogZoomBurst 520ms ease-out forwards;
}
.ei-dialog-character.ei-fx-ripple img,
.ei-dialog-scene.ei-scene-fx-ripple{
    animation: eiDialogRippleWarp 720ms ease-out forwards;
}
.ei-dialog-character.ei-fx-slice_shift,
.ei-dialog-scene.ei-scene-fx-slice_shift{
    animation: eiDialogSliceShift 620ms steps(6, end) forwards;
}
.ei-dialog-character.ei-fx-invert_blink,
.ei-dialog-scene.ei-scene-fx-invert_blink{
    animation: eiDialogInvertBlink 420ms steps(2, end) forwards;
}

@keyframes eiDialogFxRipple{
    0%{opacity:0; transform:scale(0.82); filter:blur(1px);}
    30%{opacity:0.95; transform:scale(1.02); filter:blur(0.2px);}
    100%{opacity:0; transform:scale(1.18); filter:blur(2px);}
}
@keyframes eiDialogFxSlice{
    0%{opacity:0; transform:translateX(0);}
    25%{opacity:0.7; transform:translateX(-8px);}
    50%{opacity:0.35; transform:translateX(7px);}
    100%{opacity:0; transform:translateX(0);}
}
@keyframes eiDialogFxInvertBlink{
    0%{opacity:0;}
    35%{opacity:1;}
    100%{opacity:0;}
}
@keyframes eiDialogSceneShakeHard{
    0%{transform:translateX(0);}
    10%{transform:translateX(-12px);}
    20%{transform:translateX(11px);}
    30%{transform:translateX(-10px);}
    40%{transform:translateX(9px);}
    50%{transform:translateX(-7px);}
    60%{transform:translateX(6px);}
    70%{transform:translateX(-4px);}
    80%{transform:translateX(3px);}
    100%{transform:translateX(0);}
}
@keyframes eiDialogLiquify{
    0%{transform:none; filter:none;}
    18%{transform:skew(4deg,-2deg) scale(1.02,0.98); filter:blur(0.8px) saturate(1.2);}
    40%{transform:skew(-5deg,2deg) scale(0.99,1.02); filter:blur(1.1px) saturate(0.92);}
    65%{transform:skew(3deg,-1deg) scale(1.01,0.99); filter:blur(0.5px) saturate(1.08);}
    100%{transform:none; filter:none;}
}
@keyframes eiDialogZoomBurst{
    0%{transform:scale(1); filter:none;}
    35%{transform:scale(1.08); filter:brightness(1.22) saturate(1.16);}
    100%{transform:scale(1); filter:none;}
}
@keyframes eiDialogRippleWarp{
    0%{transform:none; filter:none;}
    20%{transform:scale(1.01,0.98) skew(1deg,-1deg); filter:contrast(1.16) brightness(1.08);}
    50%{transform:scale(0.99,1.02) skew(-1deg,1deg); filter:contrast(1.05) brightness(0.98);}
    100%{transform:none; filter:none;}
}
@keyframes eiDialogSliceShift{
    0%{transform:none; filter:none;}
    20%{transform:translateX(-6px); filter:contrast(1.25) brightness(1.1);}
    40%{transform:translateX(6px); filter:contrast(0.95) brightness(0.96);}
    60%{transform:translateX(-3px); filter:contrast(1.1) brightness(1.03);}
    100%{transform:none; filter:none;}
}
@keyframes eiDialogInvertBlink{
    0%{filter:none;}
    35%{filter:invert(1) hue-rotate(180deg) contrast(1.18);}
    100%{filter:none;}
}