/* 🍏 全体のレイアウト調整 */
body {
    background-color: black;
    text-align: center;
    cursor: url('./images/fork.png') 0 100, auto;  /* フォークカーソル */
    overflow: hidden; /* スクロールバーを消す */
}

/* 🖼 Front Image */
#front-image {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 55vw; /* Front画像を少し大きく */
    z-index: 1;
}

/* 🍽 Plate Image */
#plate-image {
    position: absolute;
    bottom: -1%;
    left: 51%;
    transform: translateX(-50%);
    width: 35vw; /* Plate画像を小さく */
    z-index: 4;
}

/* 🍏 フルーツコンテナ */
#fruit-container {
    position: relative; /* フルーツの親要素 */
    width: 100%;
    height: 100vh;
}

/* 🍇 フルーツ画像（クリック可能エリアを視覚化） */
.fruit {
    width: auto; /* サイズは後で調整しやすいように */
    cursor: inherit !important; /* フォークカーソルを維持 */
    position: absolute; /* 親要素の基準で自由に配置 */
    border: 2px solid transparent; /* クリック可能エリアを枠で表示 */
    transition: border 0.3s ease, transform 0.2s ease; /* なめらかに変化 */
    z-index: 5;
}

/* 🟡 フルーツのクリック範囲をホバーで可視化 */
.fruit:hover {
    border: 2px solid rgba(255, 255, 255, 0.8); /* 枠の色を変更（白） */
    transform: scale(0.95); /* ほんの少し縮小 */
}

/* 🍎 各フルーツの個別位置設定 */
#grape {
    left: 40%;
    bottom: 7%;
    width: 6vw;
    height: auto;
}

#kiwi {
    left: 50%;
    bottom: 14%;
    width: 6vw;
    height: auto;
}

#melon {
    left: 43.5%;
    bottom: 13%;
    width: 6vw;
    height: auto;
}

#pine {
    left: 50%;
    bottom: 4%;
    width: 7vw;
    height: auto;
}

#raspberry {
    left: 53%;
    bottom: 8.5%;
    width: 7vw;
    height: auto;
}

#strawberry {
    left: 45%;
    bottom: 4%;
    width: 6vw;
    height: auto;
}

#desk-image {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 120%;
    height: 23vh;
    z-index: 3;
}


/* 🎬 動画コンテナ（front.png の前後に配置可能） */
#video-container {
    position: absolute;
    top: 40%;  /* 画面中央 */
    left: 50.3%;  /* 画面中央 */
    transform: translate(-50%, -50%); /* 完全に中央寄せ */
    width: 100vw;  /* 画面の 60% 幅 */
    height: auto;
    max-width: 800px;  /* 最大幅を 800px に制限 */
    display: none;
    z-index: -1; /* 初期状態は front.png の後ろ */
}

/* 🎥 Cloudflare 動画 */
#experiment-video {
    width: 100%;  /* コンテナにフィット */
    height: auto;  /* アスペクト比維持 */
    object-fit: contain;  /* 比率を維持しつつ縮小 */
    background-color: black;
}

/* 🎬 事前に読み込む動画（非表示 & z-index: -1） */
#preload-videos video {
    position: absolute;
    top: 40%;  /* 画面中央 */
    left: 50.3%;  /* 画面中央 */
    transform: translate(-50%, -50%);  /* 完全に中央寄せ */
    width: 55vw;  /* 画面の 60% 幅 */
    max-width: 1200px;
    height: auto;
    object-fit: contain;
    display: none;
    z-index: -1;
}


/* ⏳ ローディング画面 */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* ⏳ ローディングメインテキスト */
#loading-text {
    font-size: 3vw;
    font-weight: bold;
    color: white;
    text-align: center;
    margin-bottom: 0.5vw;
}

/* ⏳ ローディングサブテキスト */
#loading-subtext {
    font-size: 1.8vw;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-style: italic;
    margin-bottom: 1vw;
}

/* 🔵 進捗バーコンテナ */
#progress-bar-container {
    width: 40vw;
    height: 1.5vw;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

/* 🔵 進捗バー本体 */
#progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ff7eb3, #ff758c);
    transition: width 0.2s ease-in-out;
}





/* 🏆 追加: ボタンの上でもフォークカーソルを維持 */
button {
    cursor: inherit !important;
}

/* 🏆 Experiment ボタンのコンテナ（横並びにする） */
#experiment-buttons {
    position: fixed;
    right: 14vw;
    bottom: 8vh;
    transform: translateX(50%); /* 中央に配置 */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9000;
}

/* 📢 説明テキスト（ボタンの上に配置） */
#experiment-text {
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-align: center;
    margin-bottom: 10px;
    z-index: 9000;
}

/* 🎯 Experiment ボタン（横並び） */
#experiment-button-container {
    display: flex;
    gap: 15px; /* ボタンの間隔 */
}

/* 🎯 Experiment ボタンのデザイン（円形） */
.experiment-btn {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ff7eb3, #ff758c);
    border: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border-radius: 50%; /* 円形 */
    cursor: pointer;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 🟡 ホバー時のデザイン */
.experiment-btn:hover {
    background: linear-gradient(135deg, #ff758c, #ff7eb3);
    transform: scale(1.1);
}

/* 🟢 ボタンが選択されたときの強調 */
.experiment-btn.selected {
    background: linear-gradient(135deg, #ff5678, #ff3456);
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

.fruit-wrapper {
    position: relative;
    display: inline-block;
}