/* ==================================================
   BIRTHDAY ADVENTURE
   MOBILE RESPONSIVE SYSTEM
   VERSION : 1.0

   Scene 1 - Scene 8
   --------------------------------------------------
   Desktop CSS kekal dalam style.css.
   File ini hanya mengawal paparan mobile.
================================================== */


/* ==================================================
   MOBILE : GENERAL
================================================== */

@media screen and (max-width: 768px){

    /* ==============================================
       GLOBAL
    ============================================== */

    html,
    body{

        width:100%;
        min-width:0;

        margin:0;
        padding:0;

        overflow-x:hidden;

    }

    body{

        min-height:100dvh;

    }


    /* ==============================================
       APP
    ============================================== */

    #app{

        width:100%;
        min-height:100dvh;

        overflow-x:hidden;

    }


    /* ==============================================
       MUSIC BUTTON
    ============================================== */

    #musicToggle{

        top:15px;
        right:15px;

        width:46px;
        height:46px;

        font-size:21px;

    }


    /* ==================================================
       SCENE 1 : LOADING
    ================================================== */

    #loading-screen{

        position:fixed;

        inset:0;

        width:100%;
        height:100dvh;

        overflow:hidden;

    }


    /* Background */

    .loading-bg{

        position:absolute;

        inset:0;

        width:100%;
        height:100%;

        object-fit:cover;

    }


    /* Moon */

    .moon{

        top:28px;
        right:24px;

        width:64px;

        z-index:5;

    }


    /* Cloud */

    .cloud{

        left:50%;

        bottom:145px;

        width:min(270px,72vw);

        margin-left:min(-135px,-36vw);

        z-index:2;

    }


    /* Bear */

    .bear{

        left:50%;

        bottom:160px;

        width:min(135px,36vw);

        margin-left:min(-67.5px,-18vw);

        z-index:3;

    }


    /* Panda */

    #panda{

        bottom:145px;

        right:-180px;

        width:min(135px,36vw);

        z-index:4;

    }


    /* Speech Bubble */

    #speechBubble{

        top:92px;

        left:50%;

        width:calc(100% - 40px);

        max-width:330px;

        min-width:0;

        padding:14px 18px;

        box-sizing:border-box;

    }


    #speechText{

        font-size:17px;

        line-height:1.35;

    }


    /* Loading Panel */

    .loading-panel{

        left:50%;

        bottom:38px;

        width:calc(100% - 40px);

        max-width:335px;

        box-sizing:border-box;

        margin:0;

        transform:translateX(-50%);

        z-index:10;

    }


    .loading-panel h2{

        width:100%;

        margin:0 0 13px;

        font-size:17px;

        line-height:1.3;

        text-align:center;

        white-space:normal;

        overflow-wrap:normal;

        word-break:normal;

    }


    .loading-bar{

        width:100%;

        height:16px;

    }


    #loading-text{

        width:100%;

        margin-top:9px;

        font-size:14px;

        line-height:1.3;

        text-align:center;

    }


    /* ==================================================
       SCENE 2 : WELCOME
    ================================================== */

    #welcome-screen{

        width:100%;

        height:100dvh;

        min-height:100dvh;

        overflow:hidden;

    }


    .welcome-bg{

        width:100%;
        height:100%;

        object-fit:cover;

    }


    .balloon{

        top:50px;

        left:8%;

        width:min(90px,22vw);

    }


    .butterfly{

        top:135px;

        right:10%;

        width:min(52px,14vw);

    }


    .welcome-bear{

        left:2%;

        bottom:7vh;

        width:min(145px,32vw);

    }


    .welcome-panda{

        right:2%;

        bottom:7vh;

        width:min(145px,32vw);

    }


    .welcome-ui{

        position:relative;

        z-index:30;

        width:90%;

        max-width:380px;

        margin:0 auto;

        text-align:center;

    }


    #welcomeTitle{

        width:100%;

        font-size:clamp(36px,10vw,50px);

        line-height:1.05;

        text-align:center;

    }


    #welcomeSubtitle{

        width:100%;

        margin-top:14px;

        font-size:clamp(16px,4.6vw,20px);

        line-height:1.35;

        text-align:center;

    }


    #adventureBtn{

        width:min(82vw,300px);

        margin-top:28px;

        padding:14px 22px;

        font-size:18px;

        line-height:1.2;

        position:relative;

        z-index:40;

    }


    /* ==================================================
       SCENE 3 : MINI GAME
    ================================================== */

    #game-screen{

        width:100%;

        height:100dvh;

        overflow:hidden;

    }


    .game-bg{

        width:100%;

        height:100%;

        object-fit:cover;

    }


    .game-hud{

        top:14px;

        left:50%;

        width:94%;

        gap:6px;

    }


    .hud-card{

        flex:1 1 0;

        min-width:0;

        padding:8px 5px;

        border-radius:24px;

        font-size:13px;

        line-height:1.1;

    }


    .hud-card span{

        margin-top:4px;

        font-size:21px;

    }


    .game-bear{

        left:10px;

        bottom:58px;

        width:min(120px,29vw);

    }


    .game-panda{

        right:10px;

        bottom:58px;

        width:min(120px,29vw);

    }


    #game-message{

        left:50%;

        bottom:12px;

        width:calc(100% - 80px);

        max-width:300px;

        padding:9px 12px;

        border-radius:24px;

        font-size:14px;

        line-height:1.3;

        text-align:center;

        box-sizing:border-box;

    }


    .cake{

        width:min(78px,20vw);

    }


    .result-card{

        width:calc(100% - 40px);

        max-width:340px;

        padding:28px 20px;

        border-radius:24px;

    }


    .result-card h1{

        font-size:32px;

        line-height:1.15;

    }


    .result-card p{

        margin:18px 0;

        font-size:19px;

        line-height:1.35;

    }


    #resultButton{

        padding:12px 32px;

        font-size:18px;

    }


    /* ==================================================
       SCENE 4 : MEMORY GALLERY
    ================================================== */

    #gallery-screen{

        width:100%;

        height:100dvh;

        min-height:100dvh;

        overflow-y:auto;

        overflow-x:hidden;

        align-items:flex-start;

    }


    .gallery-content{

        width:100%;

        min-height:100dvh;

        padding:55px 10px 24px;

        box-sizing:border-box;

    }


    .gallery-title{

        width:100%;

        margin:0 0 10px;

        font-size:clamp(30px,8.5vw,42px);

        line-height:1.1;

        text-align:center;

    }


    .photo-wrapper{

        position:relative;

        width:min(94vw,360px);

        margin:0 auto;

    }


    .photo-mask{

        top:16%;

        left:14%;

        right:14%;

        bottom:16%;

        border-radius:18px;

    }


    .memory-photo,
    #gallery-video{

        width:100%;

        height:100%;

        object-fit:cover;

    }


    #gallery-caption{

        width:min(92vw,350px);

        max-width:none;

        margin:12px auto 0;

        padding:10px 13px;

        font-size:15px;

        line-height:1.4;

        box-sizing:border-box;

    }


    .gallery-navigation{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin:10px auto 0;

}


.gallery-navigation button{

    width:148px;

    padding:11px 16px;

    font-size:17px;

}

    /* ==================================================
   SCENE 4 : MEMORY GALLERY COMPANION
   MOBILE
   #15C
================================================== */

#scene4-companion{

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:50;

}


#scene4-companion-panda{

    right:2%;

    bottom:18px;

    width:min(135px,34vw);

}

/* ==================================================
   SCENE 4 : MEMORY GALLERY COMPANION
   DESKTOP POSITION
================================================== */

#scene4-companion-bubble{

    position:absolute;

    /* Bubble duduk di kiri Panda */
    right:18%;

    /* Bubble berada di atas paras Panda */
    bottom:125px;

    width:360px;
    max-width:360px;

    padding:
        13px 17px 15px;

    border-radius:22px;

}

#scene4-companion-name{

    margin-bottom:5px;

    padding:
        3px 10px;

    font-size:12px;

}


#scene4-companion-text{

    font-size:16px;

    line-height:1.4;

}


#scene4-companion-bubble::before{

    top:7px;

    left:11px;

    font-size:11px;

}


#scene4-companion-bubble::after{

    right:11px;

    bottom:7px;

    font-size:9px;

}

/* ==================================================
   SCENE 5 : BIRTHDAY LETTER COMPANION
   MOBILE
================================================== */

#scene5-companion{

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:50;

}


#scene5-companion-panda{

    right:2%;

    bottom:18px;

    width:min(135px,34vw);

}


/* ==================================================
   SCENE 5 : COMPANION BUBBLE
   MOBILE FINAL POSITION
================================================== */

#scene5-companion-bubble{

    position:absolute;

    right:calc(2% + 105px);

    top:auto;

    bottom:55px;

    left:auto;

    width:205px;
    max-width:205px;

    padding:
        11px 13px 12px;

    border-radius:20px;

}

/* ==========================================
   SCENE 5 : MOBILE BUBBLE VISIBLE
========================================== */

#scene5-companion.show #scene5-companion-bubble{

    transform:
        translateY(0)
        scale(1);

}


#scene5-companion-name{

    margin-bottom:5px;

    padding:
        3px 10px;

    font-size:12px;

}


#scene5-companion-text{

    font-size:16px;

    line-height:1.4;

}


#scene5-companion-bubble::before{

    top:7px;

    left:11px;

    font-size:11px;

}


#scene5-companion-bubble::after{

    right:11px;

    bottom:7px;

}

    /* ==================================================
       SCENE 5 : BIRTHDAY LETTER
    ================================================== */

    #letter-screen{

        width:100%;

        height:100dvh;

        overflow-y:auto;

        overflow-x:hidden;

    }


    .letter-content{

        width:100%;

        min-height:100dvh;

        height:auto;

        padding:55px 15px 28px;

        box-sizing:border-box;

        justify-content:center;

    }


    .letter-title{

        width:100%;

        margin:0 0 15px;

        font-size:clamp(30px,8vw,44px);

        line-height:1.1;

        text-align:center;

    }


    .letter-paper{

        width:100%;

        max-width:355px;

        height:min(52dvh,390px);

        min-height:270px;

        padding:24px 22px;

        border-radius:22px;

    }


    #letterText{

        font-size:16px;

        line-height:1.65;

    }


    #letterNextBtn{

        margin-top:18px;

        padding:12px 34px;

        font-size:18px;

    }


    /* ==================================================
   SCENE 6 : PANDA COMPANION
   MOBILE
================================================== */

#scene6-companion{

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:50;

}


#scene6-companion-panda{

    right:2%;
    bottom:18px;

    width:min(135px,34vw);

}


/* ==================================================
   SCENE 6 : COMPANION BUBBLE
   MOBILE
   SIDE POSITION
================================================== */

#scene6-companion-bubble{

    position:absolute;

    /*
       Panda:
       right:2%;
       width:min(135px,34vw)

       Bubble berada di sebelah kiri Panda.
    */

    right:calc(2% + min(145px,36vw));

    bottom:55px;

    width:min(230px,58vw);

    max-width:230px;

    padding:
        11px 14px 12px;

    border-radius:20px;

}


#scene6-companion-name{

    margin-bottom:5px;

    padding:
        3px 10px;

    font-size:12px;

}


#scene6-companion-text{

    font-size:16px;

    line-height:1.4;

}


#scene6-companion-bubble::before{

    top:7px;
    left:11px;

    font-size:11px;

}


#scene6-companion-bubble::after{

    right:-7px;

    bottom:22px;

    width:14px;

    height:14px;

    background:
        rgba(255,250,252,.98);

    border-top:
        2px solid
        rgba(255,190,215,.65);

    border-right:
        2px solid
        rgba(255,190,215,.65);

    transform:
        rotate(45deg);

}

    /* ==================================================
       SCENE 6 : GIFT SELECTION
    ================================================== */

    #gift-screen{

        width:100%;

        height:100dvh;

        overflow-y:auto;

        overflow-x:hidden;

    }


    .gift-bg{

        width:100%;

        height:100%;

        object-fit:cover;

    }


    .gift-content{

        width:100%;

        min-height:100dvh;

        height:auto;

        padding:58px 10px 28px;

        box-sizing:border-box;

        justify-content:center;

    }


    .gift-title{

        width:100%;

        margin:0 0 8px;

        font-size:clamp(30px,8.5vw,43px);

        line-height:1.1;

        text-align:center;

    }


    .gift-instruction{

        width:min(92vw,350px);

        margin:8px auto;

        padding:8px 12px;

        font-size:15px;

        line-height:1.4;

        box-sizing:border-box;

    }


    .gift-container{

        width:100%;

        gap:7px;

        margin:14px auto;

    }


    .gift-box{

        flex:1 1 0;

        width:auto;

        height:auto;

        aspect-ratio:1 / 1;

        min-width:0;

        max-width:125px;

        padding:7px;

        border-radius:18px;

        box-sizing:border-box;

    }


    .gift-box img{

        width:78%;

        height:78%;

        object-fit:contain;

    }


    .gift-selection-message{

        width:min(92vw,350px);

        min-height:0;

        margin:10px auto 0;

        padding:7px 12px;

        font-size:14px;

        line-height:1.35;

        box-sizing:border-box;

    }


    .reveal-gift-btn{

        margin-top:10px;

        padding:11px 25px;

        font-size:16px;

    }


    /* ==================================================
       SCENE 7 : GIFT REVEAL
       Minimal adjustment because this scene was
       already working well on mobile.
    ================================================== */

    #gift-reveal-screen{

        width:100%;

        height:100dvh;

        overflow-y:auto;

        overflow-x:hidden;

    }


    .gift-reveal-content{

        width:100%;

        min-height:100dvh;

        height:auto;

        padding:55px 12px 28px;

        box-sizing:border-box;

        justify-content:center;

    }


    .gift-reveal-title{

        width:100%;

        font-size:clamp(30px,8.5vw,44px);

        line-height:1.1;

    }


    .gift-reveal-subtitle{

        width:92%;

        max-width:350px;

        font-size:15px;

        line-height:1.4;

    }


    .revealed-gift{

        width:min(210px,58vw);

        height:min(180px,30vh);

    }


    #revealed-gift-title{

        width:92%;

        font-size:23px;

        line-height:1.2;

    }


    .revealed-gift-message{

        width:min(92vw,360px);

        padding:12px 15px;

        font-size:15px;

        line-height:1.45;

    }


    #giftRevealContinueBtn{

        margin-top:16px;

        padding:11px 28px;

        font-size:16px;

    }


    /* ==================================================
       SCENE 8 : ENDING CELEBRATION
       Minimal adjustment because this scene was
       already working well on mobile.
    ================================================== */

    #ending-screen{

        width:100%;

        height:100dvh;

        overflow-y:auto;

        overflow-x:hidden;

    }


    .ending-content{

        width:100%;

        min-height:100dvh;

        height:auto;

        padding:55px 12px 28px;

        box-sizing:border-box;

        justify-content:center;

    }


    .ending-title{

        width:100%;

        font-size:clamp(30px,8.5vw,44px);

        line-height:1.1;

    }


    .ending-memory{

        width:min(78vw,320px);

        height:min(58vw,240px);

    }


    .ending-message{

        width:min(92vw,350px);

        margin:17px auto;

        font-size:16px;

        line-height:1.45;

    }


    #replayBtn{

        margin-top:4px;

        padding:11px 28px;

        font-size:16px;

    }

}


/* ==================================================
   EXTRA SMALL PHONES
   360px AND BELOW
================================================== */

@media screen and (max-width:360px){

    .loading-panel{

        bottom:28px;

        width:calc(100% - 30px);

    }


    .loading-panel h2{

        font-size:16px;

    }


    .cloud{

        bottom:140px;

    }


    .bear{

        bottom:155px;

        width:120px;

        margin-left:-60px;

    }


    #panda{

        bottom:140px;

        width:120px;

    }


    .welcome-bear,
    .welcome-panda{

        width:125px;

        bottom:6vh;

    }


    #welcomeTitle{

        font-size:34px;

    }


    #welcomeSubtitle{

        font-size:15px;

    }


    #adventureBtn{

        width:86vw;

        font-size:17px;

    }


    .game-hud{

        width:96%;

        gap:4px;

    }


    .hud-card{

        padding:7px 3px;

        font-size:11px;

    }


    .hud-card span{

        font-size:19px;

    }


    .game-bear,
    .game-panda{

        width:105px;

    }


    .letter-paper{

        min-height:250px;

        height:48dvh;

        padding:20px 18px;

    }


    #letterText{

        font-size:15px;

        line-height:1.55;

    }


    .gift-box{

        max-width:105px;

    }

}

/* ==========================================
   SCENE 0 : MOBILE
========================================== */

@media (max-width:768px){

    .letter-envelope{

        width:82vw;

        min-height:480px;

        padding:
            45px
            25px
            35px;

    }


    .letter-title{

        font-size:34px;

    }


    .recipient-name{

        font-size:26px;

    }


    .letter-message{

        font-size:15px;

        max-width:260px;

    }


    .letter-seal{

        width:76px;

        height:76px;

        font-size:29px;

    }


    .opening-sparkle{

        font-size:22px;

    }

}

/* ==================================================
   STEP 1D : MOBILE ENVELOPE
================================================== */

@media screen and (max-width:768px){

    .letter-envelope{

        width:min(390px, 92vw);

        height:420px;

    }


    .envelope-stage{

        width:100%;

        height:100%;

    }


    .envelope-paper{

        width:76%;

        height:76%;

        top:5%;

        transform:
            translateX(-50%)
            translateY(25px);

    }


    .envelope-body{

        width:100%;

        height:100%;

        object-fit:contain;

    }


    .envelope-flap{

        width:100%;

        top:8px;

    }


    .envelope-seal{

        width:76px;

        height:76px;

        top:50%;

    }

}

@media screen and (max-width:360px){

    .letter-envelope{

        width:92vw;

        height:390px;

    }


    .envelope-seal{

        width:70px;

        height:70px;

    }

}

/* ==================================================
   OPENING ENVELOPE — MOBILE CALIBRATION
================================================== */

@media screen and (max-width:768px){

    .letter-envelope{

        width:min(330px, 88vw);

        height:410px;

        transform:translateY(-18px);

    }


    .envelope-stage{

        width:100%;

        height:300px;

    }


    .envelope-body{

        width:100%;
        height:100%;

    }


    .envelope-flap{

        width:100%;

        top:0;

    }


    .envelope-paper{

        width:72%;
        height:72%;

        top:0;

        transform:
            translateX(-50%)
            translateY(18px);

    }


    .envelope-seal{

        width:68px;
        height:68px;

        top:50%;

    }


    .envelope-instruction{

        margin-top:8px;

    }

}


/* ==============================
   SMALL PHONE
============================== */

@media screen and (max-width:390px){

    .letter-envelope{

        width:320px;

        height:395px;

        transform:translateY(-12px);

    }


    .envelope-stage{

        height:285px;

    }


    .envelope-seal{

        width:64px;
        height:64px;

    }

}

/* ==================================================
   SCENE 0 — MOBILE ENVELOPE
   FINAL CALIBRATION PASS 01
================================================== */

@media screen and (max-width: 768px){

    #opening-screen .envelope-stage{

    position: absolute;

    left: 50%;
    top: 41%;

    width: min(310px, 84vw);
    height: 290px;

    margin: 0;

    transform:
        translate(-50%, -50%);

    z-index: 10;

}


    /* ==============================
       LETTER PAPER
    ============================== */

    #opening-screen .envelope-paper{

        left: 50%;
        top: 0;

        width: 72%;
        height: 72%;

        transform:
            translateX(-50%)
            translateY(18px);

        z-index: 1;

    }


    /* ==============================
       ENVELOPE BODY
    ============================== */

    #opening-screen .envelope-body{

        left: 50%;
        top: 0;

        width: 100%;
        height: auto;

        transform:
            translateX(-50%);

        z-index: 3;

    }


    /* ==============================
       FLAP WRAP
    ============================== */

    #opening-screen .envelope-flap-wrap{

        left: 50%;
        top: 0;

        width: 100%;
        height: 220px;

        transform:
            translateX(-50%);

        perspective: 1200px;

        z-index: 5;

    }


    /* ==============================
       FLAP
    ============================== */

    #opening-screen .envelope-flap{

        left: 0;
        top: 0;

        width: 100%;
        height: 100%;

        object-fit: contain;

        transform-origin:
            50% 100%;

        transform-style:
            preserve-3d;

        backface-visibility:
            hidden;

    }


    /* ==============================
       WAX SEAL
    ============================== */

    #opening-screen .envelope-seal{

        left: 50%;
        top: 215px;

        width: 68px;
        height: 68px;

        transform:
            translate(-50%, -50%);

        z-index: 10;

    }


    /* ==============================
       INSTRUCTION
    ============================== */

    #opening-screen .envelope-instruction{

        position: absolute;

        left: 50%;
        top: auto;
        bottom: 5%;

        width: min(340px, 88vw);

        transform:
            translateX(-50%);

        text-align: center;

        z-index: 50;

    }


    #opening-screen .envelope-small-text{

        font-size: 11px;

        letter-spacing: 3px;

    }


    #opening-screen .envelope-title{

        font-size: clamp(
            28px,
            8vw,
            36px
        );

    }


    #opening-screen .envelope-recipient{

        width: 100%;

        font-size: 14px;

        line-height: 1.4;

    }


    #opening-screen .letter-hint{

        font-size: 14px;

        margin-top: 10px;

    }

}

/* ==================================================
   SCENE 0 — MOBILE ENVELOPE TEXT PANEL
   PREMIUM WHITE DECORATIVE CARD
================================================== */

@media screen and (max-width: 768px){

    /* ==========================================
       MAIN TEXT PANEL
    ========================================== */

    #opening-screen .envelope-instruction{

        position: absolute;

        left: 50%;
        bottom: 4%;

        width: min(330px, 88vw);

        padding: 18px 18px 16px;

        transform:
            translateX(-50%);

        text-align: center;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.97),
                rgba(255,248,251,0.95)
            );

        border:
            2px solid rgba(255,210,225,0.95);

        border-radius: 18px;

        box-shadow:
            0 8px 20px rgba(120,70,90,0.18),
            inset 0 0 0 1px rgba(255,255,255,0.8);

        backdrop-filter:
            blur(4px);

        -webkit-backdrop-filter:
            blur(4px);

        overflow: visible;

        z-index: 50;

    }


    /* ==========================================
       DECORATIVE INNER BORDER
    ========================================== */

    #opening-screen .envelope-instruction::before{

        content: "";

        position: absolute;

        inset: 7px;

        border:
            1px solid rgba(226,155,181,0.55);

        border-radius: 13px;

        pointer-events: none;

        z-index: 0;

    }


    /* ==========================================
       TOP LEFT DECORATION
    ========================================== */

    #opening-screen .envelope-instruction::after{

        content: "✿";

        position: absolute;

        top: -13px;
        left: 14px;

        width: 30px;
        height: 30px;

        display: flex;

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

        font-size: 20px;

        color: #e79ab5;

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

        border:
            1px solid rgba(231,154,181,0.55);

        border-radius: 50%;

        box-shadow:
            0 3px 8px rgba(120,70,90,0.12);

        z-index: 3;

    }


    /* ==========================================
       KEEP TEXT ABOVE DECORATION
    ========================================== */

    #opening-screen .envelope-instruction > *{

        position: relative;

        z-index: 2;

    }


    /* ==========================================
       SMALL TITLE
    ========================================== */

    #opening-screen .envelope-small-text{

        font-size: 11px;

        letter-spacing: 3px;

        line-height: 1.4;

        color: #c56d8d;

        text-shadow: none;

        opacity: 1;

        margin-bottom: 4px;

    }


    /* ==========================================
       MAIN TITLE
    ========================================== */

    #opening-screen .envelope-title{

        font-size: clamp(
            28px,
            8vw,
            34px
        );

        line-height: 1.1;

        color: #b94f76;

        text-shadow:
            0 1px 0 rgba(255,255,255,0.9);

        margin: 0;

    }


    /* ==========================================
       RECIPIENT / DESCRIPTION
    ========================================== */

    #opening-screen .envelope-recipient{

        width: 100%;

        margin-top: 6px;

        font-size: 13px;

        line-height: 1.45;

        color: #8c5268;

        text-shadow: none;

    }


    /* ==========================================
       OPEN HINT
    ========================================== */

    #opening-screen .letter-hint{

        margin-top: 8px;

        font-size: 13px;

        line-height: 1.4;

        font-weight: 600;

        color: #c45d83;

        text-shadow: none;

    }

}

/* ==================================================
   SCENE 0 — MOBILE CALIBRATION
================================================== */

@media screen and (max-width: 768px) {

    /* ==========================================
       TEXT PANEL
    ========================================== */

    #opening-screen .envelope-instruction {

        width: min(330px, 88vw);

        padding: 18px 18px 16px;

        bottom: 4%;

    }


    /* ==========================================
       WHOLE ENVELOPE
    ========================================== */

    #opening-screen .envelope-stage {

        left: 50%;

        top: 39%;

        width: min(310px, 84vw);

        height: 290px;

    }


    /* ==========================================
   LETTER PAPER — MOBILE CLOSED STATE
========================================== */

#opening-screen .envelope-paper {

    left: 50%;

    top: 0;

    width: 72%;

    height: 72%;

    transform:
        translateX(-50%);

    z-index: 1;

    /* Hide the part of the letter
       that should remain inside
       the closed envelope */

    clip-path:
        inset(70px 0 0 0);

}


    /* ==========================================
       ENVELOPE BODY
    ========================================== */

    #opening-screen .envelope-body {

    left: 50%;

    top: 0;

    width: 100%;

    height: auto;

    transform:
        translateX(-50%);

}


    /* ==========================================
       FLAP WRAPPER
       LOCKED FOR NOW
    ========================================== */

    #opening-screen .envelope-flap-wrap {

    left: 50%;

    top: 34px;

    width: 100%;

    height: 200px;

    transform:
        translateX(-50%);

}


    /* ==========================================
       WAX SEAL
    ========================================== */

    #opening-screen .envelope-seal {

        left: 50%;

        top: 215px;

        width: 68px;

        height: 68px;

    }

}


/* ==================================================
   SCENE 0 — FINAL MOBILE CLOUD TRANSITION
================================================== */

@media screen and (max-width:768px){

    #scene0-cloud-transition{
        width:100%;
        height:100dvh;
    }


    #scene0-cloud-transition
    .scene0-cloud{

        width:360px;
        height:180px;

    }


    #scene0-cloud-transition
    .scene0-cloud-1{

        left:-150px;
        top:5%;

    }


    #scene0-cloud-transition
    .scene0-cloud-2{

        right:-150px;
        top:20%;

    }


    #scene0-cloud-transition
    .scene0-cloud-3{

        left:-170px;
        bottom:12%;

    }


    #scene0-cloud-transition
    .scene0-cloud-4{

        right:-170px;
        bottom:-20px;

    }


    /* ==========================================
       ENVELOPE
    ========================================== */

    #opening-screen
    .envelope-stage{

        width:min(310px,84vw);

        height:290px;

    }


    /* ==========================================
       SEAL
    ========================================== */

    #opening-screen
    .envelope-seal{

        width:68px;
        height:68px;

    }

}

/* ==================================================
   #13B.2A : PANDA VISUAL COMPANION
   MOBILE
================================================== */

@media screen and (max-width:768px){

    #companion-moment{

        left:50%;

        bottom:18px;

        width:
            calc(100% - 24px);

        min-height:115px;

        gap:4px;

        align-items:flex-end;

    }


    /* ==================================================
   #13B.2C : COMPANION CHARACTER SIZE
   MOBILE
================================================== */

#companion-character{

    width:125px;

    min-width:125px;

    height:150px;

}


    #companion-image{

        height:145px;

        max-width:125px;

    }


    /* ==============================
       DIALOGUE CARD
    ============================== */

    .companion-card{

    width:auto;

    max-width:
        calc(100vw - 140px);

    padding:
        12px 14px 13px;

    border-radius:20px;

}


    /* ==============================
       BUBBLE TAIL
    ============================== */

    .companion-card::before{

        left:-6px;

        bottom:20px;

        width:12px;

        height:12px;

    }


    /* ==============================
       NAME
    ============================== */

    .companion-name{

        margin-bottom:3px;

        font-size:11px;

    }


    /* ==============================
       MESSAGE
    ============================== */

    #companion-text{

        font-size:14px;

        line-height:1.35;

    }

}

/* ==================================================
   #13C.0 — SCENE 0 COMPANION
   MOBILE POSITION
================================================== */

@media screen and (max-width:768px){

    #scene0-companion{

        position:absolute;

        left:50%;

        bottom:175px;

        transform:
            translateX(-50%)
            translateY(25px);

        width:
            calc(100% - 30px);

        display:flex;

        flex-direction:row;

        align-items:center;

        justify-content:center;

        gap:10px;

        z-index:2000;

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:
            opacity .6s ease,
            transform .6s ease;

    }


    /* ==============================
       ACTIVE
    ============================== */

    #opening-screen.scene0-companion-active
    #scene0-companion{

        opacity:1;

        visibility:visible;

        transform:
            translateX(-50%)
            translateY(0);

    }


    /* ==============================
       PANDA
    ============================== */

    #scene0-companion-image{

        width:auto;

        height:145px;

        max-width:125px;

        object-fit:contain;

        object-position:
            center bottom;

        order:1;

        position:relative;

        z-index:2002;

    }


    /* ==================================================
   SCENE 2 — COMPANION BUBBLE
   MOBILE POLISH
================================================== */

#scene2-companion-bubble{

    position:absolute;

    left:50%;

    top:30px;

    bottom:auto;

    transform:
        translateX(-50%)
        translateY(15px)
        scale(.96);

    width:
        calc(100% - 40px);

    max-width:340px;

    padding:
        12px 16px 14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(255,245,250,.96)
        );

    border:
        2px solid
        rgba(255,190,215,.65);

    border-radius:20px;

    box-shadow:
        0 12px 28px
        rgba(70,40,70,.14),

        0 0 18px
        rgba(255,205,225,.28);

    backdrop-filter:
        blur(10px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .45s ease,
        transform .45s
        cubic-bezier(.22,.8,.3,1);

    z-index:3000;
}


#scene2-companion-bubble.show{

    opacity:1;

    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);

}


.scene2-companion-name{

    font-size:12px;

    padding:
        3px 10px;

    margin-bottom:5px;

}


#scene2-companion-text{

    font-size:16px;

    line-height:1.4;

    margin:0;

}


/* Decorative sparkle */

#scene2-companion-bubble::before{

    content:"✦";

    position:absolute;

    top:6px;

    left:11px;

    font-size:10px;

    color:rgba(226,145,180,.75);

    animation:
        companionSparkle 2.4s
        ease-in-out infinite;

}


#scene2-companion-bubble::after{

    content:"✦";

    position:absolute;

    right:11px;

    bottom:7px;

    font-size:9px;

    color:rgba(226,145,180,.55);

    animation:
        companionSparkle 2.8s
        ease-in-out infinite
        reverse;

}


@keyframes companionSparkle{

    0%,
    100%{

        opacity:.35;

        transform:
            scale(.8)
            rotate(0deg);

    }

    50%{

        opacity:1;

        transform:
            scale(1.15)
            rotate(15deg);

    }

}


    /* ==============================
       BUBBLE TAIL
    ============================== */

    #scene0-companion-bubble::before{

        left:50%;

        top:-7px;

        bottom:auto;

        transform:
            translateX(-50%)
            rotate(45deg);

        width:14px;

        height:14px;

        border-left:none;

        border-bottom:none;

        border-top:
            2px solid
            rgba(255,183,211,.45);

        border-left:
            2px solid
            rgba(255,183,211,.45);

    }


    /* ==============================
       TEXT
    ============================== */

    #scene0-companion-text{

        font-size:13px;

        line-height:1.4;

        margin:0;

    }

}

/* ==================================================
   SCENE 3 — MOBILE COMPANION
   #14B
================================================== */

.game-panda.companion-visible,
.game-bear.companion-visible{

    top:210px;

    left:50%;

    right:auto;

    bottom:auto;

    width:min(145px,38vw);

    transform:
        translateX(-50%)
        scale(1);

    z-index:39;

}


/* Companion bubble */

#scene3-companion-bubble{

    top:80px;

    width:calc(100% - 40px);

    max-width:340px;

    padding:12px 16px 14px;

    border-radius:22px;

    z-index:40;

}


/* Companion text */

#scene3-companion-text{

    font-size:16px;

    line-height:1.35;

}


/* Companion name */

#scene3-companion-name{

    font-size:12px;

    padding:3px 10px;

}

/* ==================================================
   SCENE 4 : MEMORY GALLERY COMPANION
   MOBILE FINAL POSITION
================================================== */

@media screen and (max-width:768px){

    #scene4-companion-bubble{

        position:absolute;

        /*
           Panda:
           right:2%;
           bottom:18px;
           width:min(135px,34vw);

           Bubble diletakkan rapat
           di kiri-atas Panda.
        */

        right:calc(2% + 105px);

        top:auto;

        bottom:145px;

        left:auto;

        width:205px;
        max-width:205px;

        padding:
            11px 13px 12px;

        border-radius:20px;

    }


    /* ==========================================
       MOBILE BUBBLE VISIBLE
    ========================================== */

    #scene4-companion.show #scene4-companion-bubble{

        transform:
            translateY(0)
            scale(1);

    }

}

/* ==================================================
   SCENE 7 : COMPANION
   MOBILE
================================================== */

#scene7-companion{

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:50;

}


/* ==================================================
   CHARACTER
================================================== */

#scene7-companion-character{

    right:2%;

    bottom:18px;

    width:min(135px,34vw);

}


/* ==================================================
   DIALOGUE BUBBLE
   MOBILE SIDE POSITION
================================================== */

#scene7-companion-bubble{

    position:absolute;

    right:
        calc(
            2% +
            min(145px,36vw)
        );

    bottom:25px;

    width:min(230px,58vw);

    max-width:230px;

    padding:
        11px 14px 12px;

    border-radius:20px;

}


/* ==================================================
   NAME
================================================== */

#scene7-companion-name{

    margin-bottom:5px;

    padding:
        3px 10px;

    font-size:12px;

}


/* ==================================================
   TEXT
================================================== */

#scene7-companion-text{

    font-size:16px;

    line-height:1.4;

}


/* ==================================================
   BUBBLE TAIL
================================================== */

#scene7-companion-bubble::after{

    right:-7px;

    bottom:22px;

    width:14px;

    height:14px;

    background:
        rgba(255,250,252,.98);

    border-top:
        2px solid
        rgba(255,190,215,.65);

    border-right:
        2px solid
        rgba(255,190,215,.65);

    transform:
        rotate(45deg);

}

/* ==================================================
   SCENE 8 : COMPANION
   MOBILE
================================================== */

#scene8-companion{

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:50;

}


/* ==================================================
   CHARACTER
================================================== */

#scene8-companion-character{

    right:2%;

    bottom:18px;

    width:min(135px,34vw);

}


/* ==================================================
   DIALOGUE BUBBLE
   MOBILE SIDE POSITION
================================================== */

#scene8-companion-bubble{

    position:absolute;

    right:
        calc(
            2% +
            min(145px,36vw)
        );

    bottom:25px;

    width:min(230px,58vw);

    max-width:230px;

    padding:
        11px 14px 12px;

    border-radius:20px;

}


/* ==================================================
   NAME
================================================== */

#scene8-companion-name{

    margin-bottom:5px;

    padding:
        3px 10px;

    font-size:12px;

}


/* ==================================================
   TEXT
================================================== */

#scene8-companion-text{

    font-size:16px;

    line-height:1.4;

}


/* ==================================================
   BUBBLE TAIL
================================================== */

#scene8-companion-bubble::after{

    right:-7px;

    bottom:22px;

    width:14px;

    height:14px;

    background:
        rgba(255,250,252,.98);

    border-top:
        2px solid
        rgba(255,190,215,.65);

    border-right:
        2px solid
        rgba(255,190,215,.65);

    transform:
        rotate(45deg);

}

/* ==================================================
   GLOBAL VOICE SKIP
   MOBILE
================================================== */

#voiceSkipBtn{

    right:18px;

    bottom:82px;

    min-width:96px;

    padding:
        9px 15px;

    font-size:12px;

}

/* ==================================================
   FINAL MOBILE COMPANION SAFE ZONE
   STEP M1
   Character + Bubble tidak menutup Skip
================================================== */

@media screen and (max-width:768px){

    /* ==========================================
       GLOBAL SKIP SAFE ZONE
    ========================================== */

    #voiceSkipBtn{

        right:18px;
        bottom:82px;

        min-width:96px;

        z-index:9999;

    }


    /* ==========================================
       SCENE 4
       Panda kekal kanan bawah
       Bubble kekal di kiri Panda
    ========================================== */

    #scene4-companion-panda{

        right:2%;
        bottom:55px;

        width:min(135px,34vw);

    }


    #scene4-companion-bubble{

        right:calc(2% + 105px);

        bottom:55px;

        width:min(205px,52vw);
        max-width:205px;

    }


    /* ==========================================
       SCENE 5
       Panda kekal kanan bawah
       Bubble berada di kiri Panda
    ========================================== */

    #scene5-companion-panda{

        right:2%;
        bottom:55px;

        width:min(135px,34vw);

    }


    #scene5-companion-bubble{

        right:calc(2% + 105px);

        bottom:125px;

        width:min(205px,52vw);
        max-width:205px;

    }


    /* ==========================================
       SCENE 6
       Sudah stabil — kekalkan
    ========================================== */

    #scene6-companion-panda{

        right:2%;
        bottom:55px;

        width:min(135px,34vw);

    }


    #scene6-companion-bubble{

        right:calc(2% + min(145px,36vw));

        bottom:55px;

        width:min(230px,58vw);
        max-width:230px;

    }


    /* ==========================================
       SCENE 7
       Character kanan
       Bubble kiri character
       Jauhkan daripada Skip
    ========================================== */

    #scene7-companion-character{

        right:2%;
        bottom:55px;

        width:min(135px,34vw);

    }


    #scene7-companion-bubble{

        right:calc(2% + min(145px,36vw));

        bottom:55px;

        width:min(230px,58vw);
        max-width:230px;

    }


    /* ==========================================
       SCENE 8
       Character kanan
       Bubble kiri character
       Jauhkan daripada Skip
    ========================================== */

    #scene8-companion-character{

        right:2%;
        bottom:55px;

        width:min(135px,34vw);

    }


    #scene8-companion-bubble{

        right:calc(2% + min(145px,36vw));

        bottom:55px;

        width:min(230px,58vw);
        max-width:230px;

    }

}

/* ==================================================
   M1.5 — MOBILE SKIP BUTTON POSITION
   GLOBAL POSITION
================================================== */

@media screen and (max-width:768px){

    #voiceSkipBtn{

        right:10px !important;

        bottom:20px !important;

    }

}

/* ==================================================
   M1.6 — SCENE 3 MOBILE SKIP POSITION
   Naikkan Skip supaya tidak menutup game message
================================================== */

@media screen and (max-width:768px){

    body.scene3-active #voiceSkipBtn{

        right:10px !important;

        /* Naik daripada 35px → 90px */
        bottom:90px !important;

    }

}