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

/* 右上角靜音按鈕（扁平、黑底白字、半透明） */
.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;
}

/* 下一步按鈕位置控制 */
.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;
    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;
    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: auto;
}


@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;}
}