:root { --panel-bg: rgba(0, 0, 0, 0.6); }

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; background: #000; font-family: sans-serif;
}

#app-container {
    display: flex; flex-direction: column; width: 100vw; height: 100vh;
}

.video-wrapper {
    flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
}

video { width: 100%; height: 100%; object-fit: cover; }

/* 操作パネル：縦画面（ボトム配置） */
.control-panel {
    background: var(--panel-bg); display: flex; flex-direction: column;
    padding: 20px; gap: 15px;
}

.top-controls, .bottom-controls {
    display: flex; justify-content: space-between; align-items: center;
}

.center-controls { width: 100%; }
#zoom-range { width: 100%; accent-color: #ff4081; }

.icon-btn img { width: 35px; height: 35px; opacity: 0.8; }
.shutter-btn img { width: 50px; height: 50px; transition: transform 0.1s; }
.shutter-btn.main img { width: 70px; height: 70px; }
.shutter-btn:active { transform: scale(0.9); }

/* ★横画面対応（ランドスケープ）★ */
@media (orientation: landscape) {
    #app-container { flex-direction: row-reverse; }
    .control-panel {
        width: 120px; height: 100%; flex-direction: row;
        writing-mode: vertical-lr; /* 縦に並べるテクニックだみょん！ */
    }
    .top-controls, .bottom-controls { flex-direction: column; gap: 20px; }
    #zoom-range { height: 150px; appearance: slider-vertical; }
}