/* 基礎設定 */
body {
    margin: 0;
    padding: 0;
    /*font-family: 'Comic Sans MS', 'Microsoft JhengHei', sans-serif;*/
    background-color: #fdfbf7;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* 背景：荒蕪庭院的示意 */
.background {
    position: absolute;
    inset: 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #eef7fb 0%,
            #f7f5f4 48%,
            #fff1f4 78%,
            #f8e8df 100%
        );

    z-index: -1;

    transition: background 1.2s ease;
}

.background::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 13%;

    background:
        linear-gradient(
            to bottom,
            rgba(220, 229, 211, 0.75),
            rgba(196, 211, 190, 0.9)
        );

    border-radius: 50% 50% 0 0 / 25px 25px 0 0;

    z-index: 0;

    pointer-events: none;
}

/* 穿山甲角色區塊 */
.character-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 20px;
}

.pangolin-sprite {
    width: 300px;
    /* 加上一個簡單的上下浮動呼吸動畫 */
    animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 對話框樣式 (致敬您的截圖風格) */
.dialog-box {
    width: 82%;
    max-width: 850px;

    /* RPG 對話框的奶油白半透明感 */
    background: rgba(255, 253, 250, 0.95);

    /* 雙層櫻花邊框感 */
    border: 3px solid #f4a7bd;
    outline: 6px solid rgba(255, 220, 230, 0.45);
    outline-offset: 3px;

    border-radius: 22px;

    box-shadow:
        0 14px 35px rgba(116, 72, 85, 0.12),
        inset 0 0 20px rgba(255, 235, 241, 0.4);

    padding: 28px 32px;

    margin-bottom: 25px;

    position: relative;
    box-sizing: border-box;

    min-height: 210px;

    display: flex;
    flex-direction: column;

    animation: dialogAppear 0.45s ease;
}

@keyframes dialogAppear {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 角色名稱標籤 */
.dialog-name {
    align-self: flex-start;

    color: #9f5268;

    font-size: 1.15rem;
    font-weight: bold;

    background: linear-gradient(
        135deg,
        #ffe9ef,
        #fff7f9
    );

    border: 2px solid #efb0c2;

    padding: 7px 20px;

    border-radius: 999px;

    margin-top: -47px;
    margin-bottom: 18px;

    box-shadow: 0 4px 12px rgba(180, 105, 130, 0.12);
}

/* 對話內容 */
.dialog-text {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #4f4648;
    flex-grow: 1;
    margin: 0;
    letter-spacing: 0.03em;
}

/* 操作按鈕區 */
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 20px;
}

.action-btn {
    border: none;

    padding: 11px 26px;

    font-size: 1rem;
    font-weight: 600;

    border-radius: 999px;

    cursor: pointer;

    font-family: inherit;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #eda4ba,
        #d77f9c
    );

    box-shadow: 0 6px 15px rgba(203, 110, 140, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.action-btn:hover {
    transform: translateY(-3px);

    box-shadow: 0 9px 20px rgba(203, 110, 140, 0.28);

    filter: brightness(1.04);
}

.action-btn:active {
    transform: translateY(0) scale(0.97);
}

.action-btn:active {
    transform: scale(0.95);
}

/* 隱藏元素用的 class */
.hidden {
    display: none !important;
}

/* 次要按鈕 (灰底) */
.btn-secondary {
    color: #8a6570;

    background: #fff7f9;

    border: 2px solid #efc0ce;

    box-shadow: none;
}

.btn-secondary:hover {
    background: #ffeef3;

    box-shadow: 0 6px 14px rgba(180, 105, 130, 0.12);
}

/* =========================
   故事進度條
========================= */

.story-progress {
    width: 75%;
    max-width: 680px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 25px;
}


/* 每一個故事節點 */
.progress-node {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 19px;

    background: rgba(255, 255, 255, 0.8);

    border: 2px solid #ead1d8;

    opacity: 0.5;

    transform: scale(0.88);

    transition:
        transform 0.35s ease,
        opacity 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


/* 目前進度 */
.progress-node.active {
    opacity: 1;

    transform: scale(1.15);

    background: #fff3f6;

    border-color: #e89cb3;

    box-shadow:
        0 0 0 5px rgba(244, 167, 189, 0.18),
        0 5px 14px rgba(180, 90, 120, 0.18);
}


/* 已完成 */
.progress-node.completed {
    opacity: 1;

    transform: scale(1);

    background: #ffe1e9;

    border-color: #e8a2b6;
}


/* 節點之間的線 */
.progress-line {
    width: 55px;
    height: 3px;

    background: #ead7dd;

    transition: background 0.4s ease;
}


/* 已走過的路線 */
.progress-line.completed {
    background: linear-gradient(
        to right,
        #efb0c2,
        #dd8ca7
    );
}

/* =========================
   故事場景
========================= */
.sky-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    top: -260px;
    right: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 207, 221, 0.4) 0%,
            rgba(255, 221, 231, 0.18) 42%,
            transparent 70%
        );

    filter: blur(15px);

    pointer-events: none;

    transition: all 1.2s ease;
}

/* 遠方森林 */
.forest {
    display: none;
}

/* =========================
   主櫻花樹
========================= */
.sakura-tree {
    display: none;
}

.crown-1 {
    width: 190px;
    height: 160px;

    top: 20px;
    left: 15px;
}


.crown-2 {
    width: 185px;
    height: 160px;

    top: 55px;
    left: 90px;
}


.crown-3 {
    width: 180px;
    height: 150px;

    top: 100px;
    left: 35px;
}

/* =========================
   Scene 0
   荒蕪森林
========================= */

.background.scene-0 {
    background:
        linear-gradient(
            180deg,
            #e7f0f4 0%,
            #f5f4f1 52%,
            #f7eee9 100%
        );
}

.scene-0 .sakura-tree {
    filter: grayscale(0.65);
}

.scene-0 .tree-crown {
    opacity: 0.6;
}

/* =========================
   Scene 1
   櫻花開始萌芽
========================= */

.background.scene-1 {
    background:
        linear-gradient(
            180deg,
            #edf5f8 0%,
            #faf4f5 52%,
            #fae9eb 100%
        );
}

.scene-1 .tree-crown {
    background:
        radial-gradient(
            circle at 30% 30%,
            #ffeef3,
            #f4bdcc 55%,
            #e6a2b8 75%
        );

    filter: saturate(0.7);
}

.scene-1 .sakura-tree {
    transform: scale(1.02);
}

.background.scene-2 {
    background:
        linear-gradient(
            180deg,
            #edf6f9 0%,
            #fbf3f5 50%,
            #fbe5ea 100%
        );
}

.scene-2 .tree-crown {
    background:
        radial-gradient(
            circle at 30% 30%,
            #fff1f5,
            #f3b2c4 55%,
            #dc8da8 78%
        );
}

/* =========================
   AI 助教提示
========================= */

.helper-bubble {
    position: absolute;

    right: 25%;
    top: 25%;

    width: 75px;
    height: 75px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    font-size: 26px;

    background: rgba(255,255,255,0.92);

    border: 3px solid #f1b7c8;

    border-radius: 50% 50% 50% 15%;

    box-shadow:
        0 8px 22px rgba(163, 92, 116, 0.15);

    opacity: 0;

    transform:
        translateY(20px)
        scale(0.7);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}


.helper-icon {
    font-size: 23px;
}


.scene-3 .helper-bubble {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    animation: helperFloat 2.5s ease-in-out infinite;
}


@keyframes helperFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* =========================
   Quest 任務卡
========================= */

.quest-card {
    position: absolute;

    right: 12%;
    top: 22%;

    width: 180px;

    padding: 20px;

    border-radius: 18px;

    background:
        rgba(255, 250, 246, 0.94);

    border: 3px solid #e7aabd;

    box-shadow:
        0 12px 28px rgba(118, 72, 88, 0.15);

    opacity: 0;

    transform:
        translateX(40px)
        rotate(3deg);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.quest-title {
    font-weight: 800;

    letter-spacing: 0.15em;

    color: #b8637f;

    margin-bottom: 15px;
}


.quest-line {
    width: 100%;
    height: 9px;

    margin-bottom: 10px;

    border-radius: 999px;

    background: #ecd8de;
}


.quest-line.short {
    width: 65%;
}


.quest-check {
    position: absolute;

    right: 18px;
    bottom: 15px;

    width: 33px;
    height: 33px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #aad6b2;

    color: white;

    font-weight: bold;
}


.scene-4 .quest-card {
    opacity: 1;

    transform:
        translateX(0)
        rotate(3deg);
}

/* =========================
   最終獎盃
========================= */

.final-trophy {
    position: absolute;

    right: 15%;
    top: 20%;

    font-size: 75px;

    opacity: 0;

    transform:
        translateY(30px)
        scale(0.6);

    filter:
        drop-shadow(
            0 10px 15px
            rgba(116, 79, 40, 0.2)
        );

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.scene-5 .final-trophy {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    animation: trophyFloat 2.5s ease-in-out infinite;
}


@keyframes trophyFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.background.scene-5 {
    background:
        linear-gradient(
            to bottom,
            #f0ecfa 0%,
            #ffe7ef 45%,
            #f8ead9 100%
        );
}


.scene-5 .tree-crown {
    background:
        radial-gradient(
            circle at 35% 30%,
            #fff7fa,
            #ffcbd8 40%,
            #f19bb6 70%
        );

    filter:
        saturate(1.15)
        brightness(1.05);

    transform: scale(1.08);
}


.scene-5 .sakura-tree {
    transform: scale(1.08);
}

/* =========================
   飄落櫻花
========================= */

.petal {
    position: absolute;

    top: -40px;

    font-size: 18px;

    opacity: 0;

    pointer-events: none;
}


.scene-1 .petal,
.scene-2 .petal,
.scene-3 .petal,
.scene-4 .petal,
.scene-5 .petal {
    opacity: 0.7;

    animation:
        petalFall 8s linear infinite;
}


.petal-1 {
    left: 12%;
    animation-delay: 0s !important;
}

.petal-2 {
    left: 27%;
    animation-delay: 1.3s !important;
}

.petal-3 {
    left: 43%;
    animation-delay: 2.6s !important;
}

.petal-4 {
    left: 59%;
    animation-delay: 0.8s !important;
}

.petal-5 {
    left: 74%;
    animation-delay: 3.5s !important;
}

.petal-6 {
    left: 88%;
    animation-delay: 2s !important;
}


@keyframes petalFall {

    0% {
        transform:
            translateY(-50px)
            rotate(0deg);

        opacity: 0;
    }

    10% {
        opacity: 0.75;
    }

    100% {
        transform:
            translateY(105vh)
            translateX(100px)
            rotate(360deg);

        opacity: 0;
    }
}