html,body{
    margin:0;
    height:100%;
    overflow:hidden;
    background:#061421;
}

/* ---------- Orientation ---------- */

@media (orientation:landscape){
.focus-frame{
    position:fixed;
    inset:0;
    margin:auto;
    width:min(88vw,calc(88vh*1.777));
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:15px;
}
.billboard-mask{
    position:absolute;
    left:25.4%;
    top:12.6%;
    width:50%;
    height:41.3%;
    overflow:hidden;
}

.back-btn{
    border-radius:8px;
    background:#f0c64d;
    color:#111;
    font:700 14px Arial,sans-serif;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
}

.back-btn:hover{
    background:#f6d97a;
}

.postcard-message{left:3%;top:4%;width:52%;font-size:2vw;}
.postcard-address{left:63%;top:26%;width:30%;font-size:1.3vw;}
.postcard-photo{left:6%;bottom:23%;width:18%;height:28%;}
.postcard-coat{right:5.5%;top:5.5%;width:10%;height:14%;}
.postcard-messenger-name{left:6%;bottom:16%;font-size:1.45vw;}
.postcard-messenger-title{left:6%;bottom:12%;font-size:1vw;}
.postcard-city{left:6%;bottom:8%;font-size:1.15vw;}
}

@media (orientation:portrait){
    .focus-frame{
        position:fixed;
        inset:0;
        width:100vw;
        height:90vh;
        overflow:hidden;
    }
    .billboard-mask{
        position:absolute;
        left:0;
        top:12.9%;
        width:100%;
        height:40.35%;
        overflow:hidden;
    }
    .postcard-message{left:4%;top:4%;width:54%;font-size:22px;}
    .postcard-address{left:63%;top:26%;width:30%;font-size:20px;}
    .postcard-photo{left:6%;bottom:23%;width:48%;height:28%;}
    .postcard-coat{right:3%;top:3%;width:20%;height:20%;}
    .postcard-messenger-name{left:6%;bottom:16%;font-size:18px;}
    .postcard-messenger-title{left:6%;bottom:12%;font-size:16px;}
    .postcard-city{left:6%;bottom:8%;font-size:16px;}
}

.scene{position:absolute;inset:0;background:url('../images/tour/billboard12.png') center/cover no-repeat;opacity:1;transition:opacity .8s ease;}
.cake-in,.cake-float{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;animation:kb 12s linear infinite alternate;}
.cake-in{transition:opacity .8s ease;}
.cake-float{opacity:0;z-index:100;pointer-events:none;transition:opacity 1.2s ease;border-radius:15px;box-shadow:0 0 15px 3px #000;transform-style:preserve-3d;perspective:1600px;}
.postcard-front,.postcard-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:15px;}
.postcard-front{background-size:cover;background-position:center;background-repeat:no-repeat;animation:kb 15s linear infinite alternate;}
.postcard-wrap{position:absolute;inset:0;transform-style:preserve-3d;}
.postcard-back{background:#efeccf;transform:rotateY(180deg);padding:3%;box-sizing:border-box;font-family:'Comic Sans MS',cursive,sans-serif;color:#23356b;}
.postcard-back:before{content:'';position:absolute;left:60%;top:0;bottom:0;border-left:1px dashed #777;}
.postcard-back:after{content:'';position:absolute;right:4%;top:4%;width:14%;height:18%;border:2px dashed #666;transform:rotate(-8deg);background:repeating-linear-gradient(45deg,#f6f0db,#f6f0db 8px,#e6e0c0 8px,#e6e0c0 16px);}
.postcard-message,.postcard-address,.postcard-messenger-name,.postcard-messenger-title,.postcard-city{position:absolute;font-family:'Comic Sans MS',cursive,sans-serif;}
.postcard-message{font-weight:bold;line-height:1.25;}
.postcard-address div{border-bottom:1px solid #bbb;margin-bottom:8px;padding-bottom:4px;}
.postcard-cake{position:absolute;right:3%;bottom:8%;width:29%;height:28%;background-size:contain;background-repeat:no-repeat;background-position:center;}
.postcard-photo{position:absolute;object-fit:cover;border-radius:8px;border:2px solid #666;}
.postcard-coat{position:absolute;object-fit:contain;transform:rotate(-8deg);z-index:5;}
.holo-panel{position:absolute;left:37%;bottom:12%;width:26%;height:18%;background:rgba(0,180,255,.12);border:1px solid rgba(0,255,255,.5);border-radius:10px;backdrop-filter:blur(6px);box-shadow:0 0 6px #000;z-index:15;}
.holo-map,#map{position:absolute;inset:8px;border-radius:8px;overflow:hidden;}
.bubble{opacity:0;   position:absolute;padding:10px 14px;background:#fff;border-radius:18px;font:bold 16px Arial;z-index:30;}
.girl-bubble{left:10%;top:42%;}
.boy-bubble{right:10%;top:42%;}
.remote-beam{position:absolute;left:37.5%;top:70%;width:10px;height:10px;border-radius:50px;background:red;transform-origin:left center;animation:beam 10s infinite;z-index:20;}
.player{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;gap:10px;background:rgba(0,0,0,.6);padding:8px 12px;border-radius:30px;}
.player button{
    border:0;
    background:#fff;
    border-radius:50%;
    width:28px;
    height:28px;
    font-size:12px;
    cursor:pointer;
}
.filmstrip-wrap{position:fixed;right:2%;bottom:5.3%;width:105px;height:70px;overflow:hidden;z-index:9999;}
.filmstrip{display:flex;gap:8px;transition:transform .6s ease;}
.thumb{width:100px;height:60px;flex:none;border:2px solid #fff;background-size:cover;background-position:center;border-radius:6px;}

@keyframes kb{from{transform:scale(1)}to{transform:scale(1.15)}}
@keyframes beam{0%,3%{width:0;opacity:0}4%,8%{width:22%;opacity:1}9%,100%{width:0;opacity:0}}
@keyframes grow{0%,12%{opacity:0;left:25%;top:12%;width:51%;height:43%}15%{opacity:1}32%,85%{opacity:1;left:0;top:0;width:100%;height:100%}100%{opacity:0;left:0;top:0;width:100%;height:100%}}
@keyframes flipcard{0%,78%{transform:rotateY(0)}84%,100%{transform:rotateY(180deg)}}
@keyframes boom{0%{transform:scale(.2) rotate(0);opacity:0}20%{opacity:1}100%{transform:scale(1.8) rotate(180deg);opacity:0}}

.audio-player{
    position:absolute;
    left:50%;
    bottom:58px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border-radius:40px;
    background:rgba(25,25,25,.82);
    backdrop-filter:blur(12px);
    color:white;
    z-index:9999;
}

.audio-player button{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    background:white;
    font-size:18px;
    transition:.25s;
}

.audio-player button:hover{
    transform:scale(1.12);
}

.audio-player input[type=range]{
    accent-color:#2db6ff;
}

#seekBar{
    width:180px;
}

#volumeBar{
    width:100px;
}

.time{
    width:45px;
    text-align:center;
    font:13px Arial;
}


.settings-popup{
    position:fixed;
    left:12px;
    right:12px;
    width:auto;
    top:12px;
    border-radius:20px;
    padding:18px;
    display:none;
    z-index:99999;
    box-sizing:border-box;
}

.settings-popup.show{
    display:block;
}

.settings-header{

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

    margin-bottom:18px;

    color:#fff;
    font:bold 20px Arial;

}

#closeSettings{

    border:0;
    background:none;
    color:#fff;
    font-size:28px;
    cursor:pointer;

}

#rotateNotice{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.85);
    color:#fff;
    font:700 24px Arial,sans-serif;
    z-index:999999;
}

#rotateNotice.show{
    display:flex;
}


#startScreen{
    position:fixed;
    inset:0;

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

    background:#000;

    cursor:pointer;

    z-index:99999;
}

#startScreen img{

    display:block;

    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;

    object-fit:contain;

    pointer-events:none;

}



.top-navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;

    height:62px;

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

    padding:0 18px;

    background:rgba(15,23,42,.82);
    backdrop-filter:blur(12px);

    z-index:99999;
}

.nav-left,
.nav-right{
    display:flex;
    align-items:center;
}

.nav-center{
    display:flex;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.nav-center::-webkit-scrollbar{
    display:none;
}

.nav-btn{
    flex:0 0 auto;
}

.nav-btn:hover{
    background:#f0c64d;
    color:#111;
}

.nav-btn.active{
    background:#f0c64d;
    color:#111;
}

.back-btn{
    padding:8px 14px;
    border:0;
    border-radius:8px;
    background:#f0c64d;
    color:#111;
    font:700 14px Arial,sans-serif;
    cursor:pointer;
}

.player{
    display:flex;
    align-items:center;
    gap:6px;
}

.player button{
    width: 24px;
    height: 18px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

#counter{
    color:white;
    font-weight:bold;
    min-width:55px;
    text-align:center;
}

body{
    padding-top:62px;
}

@media(max-width:1100px){

    .top-navbar{
        height:auto;
        flex-direction:column;
        gap:10px;
        padding:10px;
    }

    body{
        padding-top:140px;
    }

    .nav-center{
        justify-content:center;
    }

}


.drawer-toggle{
    position:fixed;
    top:15px;
    left:15px;
    cursor:pointer;
    z-index:100001;
    width:44px;
    height:44px;
    border:none;
    border-radius:8px;
    background:rgba(20,20,20,.7);
    color:#fff;
    font-size:26px;
}
.drawer{
    position:fixed;
    top:0;
    left:-280px;
    width:280px;
    height:100%;
    background:#111;
    transition:left .3s;
    padding-top:70px;
    z-index:100000;
    }
.drawer.open{
    left:0;
}
.drawer a{
    display:block;padding:18px 24px;color:#fff;text-decoration:none;font:600 18px Arial;
}
.drawer a.active,.drawer a:hover{
    background:#f0c64d;color:#111;
}
.overlay{
    position:fixed;inset:0;
    display:none;
    background:rgba(0,0,0,.35);
    z-index:99999;
}
.overlay.show{
    display:block;
}
.player{
    position:fixed;
    top:0px;
    right:15px;
    z-index:100001;
    background:rgba(20,20,20,.7);
    padding:6px 10px;
    border-radius:8px;
    color:#fff;
    display:flex;
    gap:8px;
}


/* ===========================
   MOBILE
=========================== */

@media (max-width:768px){

.player{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}

.audio-player{

    position:static;

    transform:none;

    display:grid;

    grid-template-columns:
        repeat(5,40px)
        auto
        1fr;

    gap:10px;

    width:100%;

    padding:0;

    background:none;

    border-radius:0;

}

.audio-player button{

    width:40px;
    height:40px;
    font-size:16px;

}

#seekBar{

    grid-column:1/-1;

    width:100%;

}

#volumeBar{

    grid-column:1/-1;

    width:100%;

}

.settings-popup{

    left:10px;
    right:10px;
    bottom:10px;

    width:auto;

    padding:16px;

}

.settings-header{

    font-size:18px;

    margin-bottom:12px;

}

#counter{

    margin-left:auto;

    font-size:16px;

}

.time{

    width:auto;

    font-size:14px;

}

}