/* 1. サイズ計算方法の統一 */
* {
    box-sizing: border-box; 
}

/* 2. ルート要素の高さを画面の高さに合わせる */
html {
    height: 100%;
}

/* 3. bodyの余白を消し、高さを確保する */
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* スクロールバーを非表示 */
    background-color: #000;
}

/* -------------------------------------- */
/* 4. ファイル選択ボタンのスタイル */
#video-file-input {
    position: fixed; /* 画面中央に固定 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30; /* 最前面 */
    padding: 20px;
    font-size: 1.2em;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: none;
    display: block; 
}

/* -------------------------------------- */
/* 5. ビデオプレイヤーのフルスクリーン設定 (fixed + vw/vhで確実に収める) */
#video-player {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;  /* ビューポート幅の100% */
    height: 100vh; /* ビューポート高さの100% */
    
    /* 縦横比を維持し、枠内からはみ出さないように収める */
    object-fit: contain; 
    
    z-index: 10;
    background-color: black; 
    display: none; /* 初期状態は非表示 */
}

/* -------------------------------------- */
/* 6. コントロールボタンコンテナのスタイル */
#control-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 20; /* ビデオより前面 */
    
    /* 縦に並べる */
    display: flex;
    flex-direction: column; 
    gap: 10px; 
}

/* 7. コントロールボタン共通のスタイル */
.control-button {
    font-size: 2em;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.5); 
    border: none;
    border-radius: 5px;
    cursor: pointer;
    backdrop-filter: blur(5px); 
}

body, #video-player {
    -ms-touch-action: manipulation; /* IE/Edge向け */
    touch-action: manipulation;     /* 標準 */
    
    /* 選択によるハイライト表示もついでに無効化（譜面研究には有用） */
    user-select: none;
    -webkit-user-select: none;
}

/* -------------------------------------- */
/* ★シークバーコンテナのスタイルを追加★ */
#seekbar-container {
    position: fixed;
    top: 0;       /* 画面の一番上に固定 */
    left: 0;
    width: 100vw; /* 画面幅いっぱいに広げる */
    z-index: 25;  /* コントロールボタンより少し前に配置 */
    padding: 0px 10px; /* バーが見やすいように少し上下にスペースを空ける */
    background-color: transparent; /* 半透明の背景 */
}

/* ★シークバー（input[type="range"]）のスタイル★ */
#seekbar {
    width: 100%; /* コンテナいっぱいに広げる */
    cursor: pointer;
}

/* -------------------------------------- */
/* 既存のコントロールボタンコンテナの配置を調整 */
#control-container {
    position: fixed;
    /* top の位置をシークバーの下にずらす */
    top: 50px; /* シークバーコンテナの高さ分（padding含む）を考慮して調整 */
    right: 20px;
    z-index: 20; 
    
    display: flex;
    flex-direction: column; 
    gap: 10px; 
}