body{

    margin:0;

    background:#000;

    overflow:hidden;

    font-family:sans-serif;

}

.video-container{

    position:relative;

    width:100vw;

    height:100vh;

    height:100dvh;

    overflow:hidden;

}

/* ชั้นปุ่ม — JS จัดขนาดให้ตรงกรอบวิดีโอ (ไม่รวมแถบดำ) */

.hotspot-layer{

    position:absolute;

    top:0;

    left:0;

    pointer-events:none;

    z-index:5;

}

.hotspot-layer .hotspot{

    pointer-events:auto;

    -webkit-tap-highlight-color:transparent;

    touch-action:manipulation;

}

video{

    width:100%;

    height:100%;

    object-fit:contain;

    background:#000;

}

/* HOTSPOT */

.hotspot{

    position:absolute;

    border:none;

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

    cursor:pointer;

    transition:0.3s;

}

/* HOVER / แตะบนมือถือ */

.hotspot:hover,
.hotspot:active{

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

    box-shadow:0 0 25px cyan;

}

@media (max-width:768px){

    .hotspot{

        min-height:44px;

    }

}

/* AMBI PUR = ซ้าย */

#btnAmbi{

    left:2%;

    bottom:5%;

    width:40%;

    height:18%;

}

/* GLADE = ขวา */

#btnGlade{

    right:2%;

    bottom:5%;

    width:40%;

    height:18%;

}

/* เลือกกลิ่น (Path1 / Path2) — กลางล่าง */

#btnChooseScent{

    left:25%;

    bottom:8%;

    width:50%;

    height:22%;

}

/* เลือกแนวทาง (Continue) — กลางล่าง */

#btnChooseDirection{

    left:20%;

    bottom:12%;

    width:60%;

    height:28%;

}

.hidden{

    display:none;

}

/* หน้าจอเริ่มเล่น */

.start-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,0.35);

    z-index:10;

    cursor:pointer;

}

.start-overlay.hidden{

    display:none;

}

.start-btn{

    padding:16px 32px;

    font-size:1.25rem;

    font-weight:600;

    color:#fff;

    background:rgba(0,120,200,0.85);

    border:2px solid #fff;

    border-radius:999px;

    cursor:pointer;

    pointer-events:none;

}