/* ============================================================
   Interior — стили отдельной страницы «виртуального интерьера».
   Подключается в views/memorial/interior.php:
     <link rel="stylesheet" href="/css/interior.css">
   Грузится ТОЛЬКО на этой странице, поэтому правила на html/body
   здесь безопасны и ни с чем на сайте не конфликтуют.
   ============================================================ */

*{margin:0;box-sizing:border-box;}
html,body{height:100%;margin:0;overflow:hidden;background:#0c0c0e;}
body{font-family:Arial, sans-serif;}

/* область просмотра: сцена всегда во всю высоту экрана; если она шире экрана
   (вертикальный телефон) — двигаем её пальцем влево/вправо. Вертикального
   скролла нет, страница не прокручивается, кнопки всегда на месте. */
.pan{
    position:fixed;inset:0;
    overflow-x:auto;overflow-y:hidden;
    white-space:nowrap;text-align:center;font-size:0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.pan::-webkit-scrollbar{display:none;}

/* сцена 16:9 во всю высоту */
.stage{
    position:relative;
    display:inline-block;vertical-align:middle;
    height:100%;
    aspect-ratio:16/9;
    background:#000;
    overflow:hidden;
    box-shadow:0 0 70px rgba(0,0,0,.7);
}
.scene{
    position:absolute;inset:0;
    opacity:0;visibility:hidden;
    transition:opacity .6s ease;
}
.scene.active{opacity:1;visibility:visible;}
.scene video{width:100%;height:100%;object-fit:cover;display:block;background:#000;}

/* портрет, вложенный точно в рамку (координаты в % от кадра) */
.portrait{position:absolute;overflow:hidden;background:#111;}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;}

/* переключатель сцен */
.switch{
    position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
    display:flex;gap:8px;z-index:10;
    background:rgba(0,0,0,.4);backdrop-filter:blur(6px);
    padding:8px;border-radius:4px;
}
.switch button{
    border:1px solid rgba(255,255,255,.25);
    background:transparent;color:#eee;
    padding:8px 18px;border-radius:4px;
    font-size:14px;font-weight:600;cursor:pointer;
    transition:all .2s;white-space:nowrap;
}
.switch button:hover{border-color:#c8a24a;color:#fff;}
.switch button.active{background:#c8a24a;border-color:#c8a24a;color:#fff;}

/* шестерёнка (настройки/музыка) в правом верхнем углу */
.gear{
    position:fixed;top:18px;right:18px;z-index:11;
    width:44px;height:44px;border-radius:50%;
    background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.22);
    color:#eee;font-size:21px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s;
}
.gear:hover{border-color:#c8a24a;color:#fff;transform:rotate(30deg);}
.panel{
    position:fixed;top:70px;right:18px;z-index:11;
    width:250px;max-width:calc(100vw - 36px);
    background:rgba(15,15,20,.92);backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.18);border-radius:4px;
    padding:14px;color:#eee;display:none;
    box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.panel.open{display:block;}
.panel-h{opacity:.65;margin-bottom:8px;font-size:13px;}
.panel select{
    width:100%;padding:8px;border-radius:4px;
    background:rgba(255,255,255,.1);color:#fff;border:none;
    font-size:13px;margin-bottom:10px;
}
.panel select option{background:#1a1a2e;}
.panel .mbtn{
    width:100%;padding:9px;border:none;border-radius:4px;cursor:pointer;
    font-size:14px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);
    transition:filter .2s,background .2s;
}
.panel .mbtn.playing{background:#4a7c3a;}
.panel .mbtn:hover{filter:brightness(1.12);}
.panel-guest{font-size:14px;line-height:1.5;}
.panel-guest a{color:#c8a24a;text-decoration:none;font-weight:600;}

/* кнопка возврата */
.back{
    position:fixed;top:18px;left:18px;z-index:10;
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 16px;border-radius:4px;
    background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.22);
    color:#eee;text-decoration:none;font-size:14px;font-weight:600;
    transition:all .2s;
}
.back:hover{border-color:#c8a24a;color:#fff;}

@media(max-width:600px){
    .switch button{padding:8px 13px;font-size:13px;}
}