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;
}
.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/billboard1.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{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%;bottom: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:22px;height:22px;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;}
.firework-left,.firework-right{position:fixed;top:50%;width:180px;height:180px;transform:translateY(-50%);pointer-events:none;z-index:9998;}
.firework-left{left:1%;}
.firework-right{right:1%;}
.firework-left:before,.firework-left:after,.firework-right:before,.firework-right:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0,#ff0 0 3px,transparent 4px),radial-gradient(circle at 100% 50%,#f00 0 3px,transparent 4px),radial-gradient(circle at 50% 100%,#0ff 0 3px,transparent 4px),radial-gradient(circle at 0 50%,#fff 0 3px,transparent 4px);animation:boom 2s infinite;}
.firework-left:after,.firework-right:after{animation-delay:1s;}
@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}}