body { margin: 0; overflow: hidden; background-color: #333; /* 暗いグレーを基調に */ display: flex; flex-direction: column; align-items: center; font-family: sans-serif; color: #eee; /* テキスト色を明るく */ }
        #controls { margin: 10px; display: flex; gap: 10px; align-items: center; background-color: #444; /* 暗いグレー */ padding: 10px; border-radius: 8px; }
        #controls button { padding: 8px 15px; cursor: pointer; border: none; border-radius: 5px; font-size: 14px; color: white; transition: background-color 0.3s ease;background-color: #888; }
        #controls button:hover { opacity: 0.9; }
        #controls input[type="file"] { display: none; }
        #controls label { padding: 8px 15px; cursor: pointer; border: none; border-radius: 5px; background-color: #2196F3; color: white; font-size: 14px; transition: background-color 0.3s ease; }
        #controls label:hover { background-color: #0b7dda; }

#icon{
position: absolute;
left:8px;
top:8px;
height:60px;
width:auto;
opacity:0.7;
}
@media (max-width: 960px) {
   #icon{ display:none; }
}

        /* モデル編集ボタンのスタイル */
        #editModeButton { 
             padding: 8px 15px;
             cursor: pointer;
             border: none;
             border-radius: 5px;
             font-size: 14px;
             color: white;
             transition: background-color 0.3s ease;
             /* 色はJSで制御 */
         }
         #editModeButton:hover {
             opacity: 0.9;
         }


        /* 環境編集ボタンのスタイル */
         #environmentEditButton {
             padding: 8px 15px;
             cursor: pointer;
             border: none;
             border-radius: 5px;
             color: white;
             font-size: 14px;
             transition: background-color 0.3s ease;
         }
         #environmentEditButton:hover {
             background-color: #f44336; /* 少し濃いオレンジ */
         }


         /* モード切り替えボタンのスタイル */
         #modeToggle {
             padding: 8px 15px;
             cursor: pointer;
             border: none;
             border-radius: 5px;
             background-color: #ff9800; /* オレンジ */
             color: white;
             font-size: 14px;
             transition: background-color 0.3s ease;
         }
         #modeToggle:hover {
             background-color: #f57c00; /* 少し濃いオレンジ */
         }

        canvas { display: block; width: 100vw; height: calc(100vh - 80px); /* コントロールの高さを考慮して調整 */ }

        /* コントロール画面用のチルトコントロールスタイル (画面左下に移動) */
        #parentTiltControls {
            position: absolute; /* Canvasにオーバーラップさせる */
            bottom: 20px; /* 画面下からの距離 */
            left: 20px; /* 画面左からの距離 */
            display: flex;
            flex-direction: column; /* 縦に並べる */
            gap: 10px;
            background-color: rgba(68, 68, 68, 0.8); /* 暗いグレーの半透明背景 */
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* 影を濃く */
            z-index: 100; /* Canvasより手前に表示 */
            color: #eee; /* テキスト色を明るく */
        }
         #parentTiltControls .control-group {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 左寄せ */
            width: 150px; /* コントロールグループの幅を固定 */
        }
         #parentTiltControls .control-group label {
            margin-bottom: 5px;
            font-size: 12px;
            color: #ccc; /* ラベル色を明るく */
         }
         #parentTiltControls .control-group input[type="range"] {
            width: 100%; /* 親要素の幅に合わせる */
         }
         #parentTiltControls .control-group span {
            margin-top: 3px;
            font-size: 10px;
            text-align: right; /* 値を右寄せ */
            width: 100%; /* 親要素の幅に合わせる */
            color: #bbb; /* 値表示色を明るく */
         }


#tiltInfoDisplay {
    color: white; /* 文字色 */
    z-index: 100; /* 他の要素より手前に表示 */
    pointer-events: none; /* マウスイベントを無効化 */
    display: flex; /* ボタンとテキストを横並びに */
    align-items: center; /* 垂直方向中央揃え */
    margin-top: 10px; /* 上のコントロールグループとの間隔 */
}
#copyTiltInfoButton {
    pointer-events: auto; /* ボタンはマウスイベントを有効にする */
    padding: 2px 5px; /* ボタンのパディング調整 */
    font-size: 10px; /* ボタンのフォントサイズ調整 */
    cursor: pointer;
    border: none;
    border-radius: 3px;
    background-color: #555; /* ボタンの背景色 */
    color: white; /* ボタンのテキスト色 */
    transition: background-color 0.3s ease;
}
#copyTiltInfoButton:hover {
    background-color: #777; /* ホバー時の背景色 */
}


        /* 編集画面のスタイル (モデル編集と環境編集で共通化) */
        .edit-panel {
             position: absolute;
             top: 80px; 
             right: 10px;
             background-color: rgba(68, 68, 68, 0.9);
             padding: 15px;
             border-radius: 8px;
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
             flex-direction: column;
             gap: 10px;
             z-index: 100;
             width: 280px;
             color: #eee;
             max-height: calc(100vh - 110px);
             overflow-y: auto;
        }

     #modelListContent {
         /* Initially hidden, display: flex will be set by JS when needed */
         flex-direction: column; /* 子要素を縦に並べる */
         gap: 10px;
         /* .tab-content で display: none が初期設定されているので、ここでは display は設定しない */
     }

     #modelListContent h4 {
         margin: 0 0 5px 0;
         font-size: 14px;
         color: #ccc;
     }

     #modelListContent ul {
         list-style: none; /* デフォルトのリストマーカーを削除 */
         padding: 0;
         margin: 0;
     }

     #modelListContent li {
         background-color: #555; /* リスト項目の背景色 */
         padding: 8px;
         margin-bottom: 5px;
         border-radius: 4px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

     #modelListContent li:hover {
         background-color: #777; /* ホバー時の背景色 */
     }

     /* モデル一覧表示時はタブコンテナを非表示にする */
     .edit-panel .edit-tabs.hidden {
         display: none;
     }

     /* モデル一覧表示時はタブコンテンツを非表示にする */
     .edit-panel .tab-content.hidden {
          display: none;
     }


        .edit-panel h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            text-align: center;
            color: #eee; /* 見出し色を明るく */
        }

        /* タブコンテナのスタイル */
        .edit-panel .edit-tabs {
            display: flex;
            border-bottom: 1px solid #555; /* 暗い境界線 */
            margin-bottom: 10px;
        }

        .edit-panel .tab-button {
            padding: 8px 15px;
            cursor: pointer;
            border: none;
            background-color: transparent;
            font-size: 14px;
            outline: none;
            transition: background-color 0.3s ease;
            flex-grow: 1; /* タブを均等に配置 */
            text-align: center;
            color: #ccc; /* タブボタン色を明るく */
        }

        .edit-panel .tab-button.active {
            background-color: #555; /* アクティブなタブの背景色 */
            border-bottom: 2px solid #007bff; /* アクティブなタブの下線色 */
            color: #eee; /* アクティブなタブの色を明るく */
        }

        .edit-panel .tab-button:hover:not(.active) {
            background-color: #666; /* ホバー時の背景色 */
        }

        /* タブコンテンツのスタイル */
        .edit-panel .tab-content {
            display: none; /* Initially hidden */
            flex-direction: column;
            gap: 10px;
        }

        .edit-panel .tab-content.active {
            display: flex; /* Active tab content is displayed */
        }


        .edit-panel .control-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

         .edit-panel .control-row {
            display: flex;
            align-items: center;
            gap: 10px; /* 要素間のスペース */
         }


        .edit-panel .control-group label,
        .edit-panel .control-row label {
            font-size: 12px;
            color: #ccc; /* ラベル色を明るく */
            min-width: 60px; /* ラベルの最小幅を確保 */
        }

        .edit-panel .control-group input[type="range"],
        .edit-panel .control-row input[type="range"] {
            flex-grow: 1; /* スライダーが利用可能なスペースを埋める */
        }

        .edit-panel .control-group span,
        .edit-panel .control-row span {
             font-size: 10px;
             color: #bbb; /* 値表示色を明るく */
             text-align: right;
             min-width: 30px; /* 値表示の最小幅 */
        }

         .edit-panel .control-row input[type="color"] {
             padding: 0;
             border: none;
             background: none;
             cursor: pointer;
             width: 30px; /* カラーピッカーの幅 */
             height: 30px; /* カラーピッカーの高さ */
             flex-shrink: 0; /* 縮小させない */
         }


        .edit-panel .transform-section {
            border-bottom: 1px solid #555; /* 暗い境界線 */
            padding-bottom: 10px;
            margin-bottom: 10px;
        }

         .edit-panel .transform-section:last-child {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0;
         }

        /* モデル削除ボタンのスタイル (編集画面内に移動) */
         #deleteModelButton {
             padding: 8px 15px;
             cursor: pointer;
             border: none;
             border-radius: 5px;
             font-size: 14px;
             background-color: #dc3545; /* 赤 */
             color: white;
             opacity: 0.5; /* 最初は無効 */
             cursor: not-allowed;
             margin-top: 10px; /* スライダーとの間にスペース */
             align-self: center; /* 中央寄せ */
             transition: background-color 0.3s ease, opacity 0.3s ease;
         }
         #deleteModelButton:hover:not(:disabled) {
             background-color: #c82333;
         }
         #deleteModelButton:disabled {
             opacity: 0.5;
             cursor: not-allowed;
         }

         /* 表示タブ内のコントロールのスタイル */
         #displayControls .control-group {
             flex-direction: row; /* チェックボックスとラベルを横並びに */
             justify-content: space-between; /* 要素間にスペース */
             align-items: center; /* 垂直方向中央揃え */
         }

         #displayControls .control-row { 
             justify-content: space-between;
             align-items: center;
         }


         #displayControls .control-group label,
         #displayControls .control-row label { 
             margin-bottom: 0; /* マージンをリセット */
         }


         /* 環境編集パネルのスタイル */
         #environmentEditControls {
             /* .edit-panel クラスで共通スタイルを定義 */
         }

         /* 環境編集パネル内のタブコンテンツスタイル */
         #backgroundTabContent .control-row {
             justify-content: space-between;
             align-items: center;
         }
          #backgroundTabContent input[type="file"] { /* 背景画像ファイル入力 */
               display: none;
          }
           #backgroundTabContent label { /* 背景画像ファイル入力ラベル */
               padding: 8px 15px;
               cursor: pointer;
               border: none;
               border-radius: 5px;
               background-color: #2196F3; /* 青 */
               color: white;
               font-size: 12px; /* ラベルに合わせて小さく */
               transition: background-color 0.3s ease;
           }
           #backgroundTabContent label:hover {
               background-color: #0b7dda;
           }


          #lightingTabContent .control-group {
              margin-bottom: 10px; /* 光源グループ間のスペース */
              padding-bottom: 10px;
              border-bottom: 1px dashed #555; /* 暗い区切り線 */
          }
           #lightingTabContent .control-group:last-child {
               border-bottom: none;
               padding-bottom: 0;
               margin-bottom: 0;
           }

          #lightingTabContent h4 {
              margin: 0 0 8px 0;
              font-size: 14px;
              color: #ccc; /* 見出し色を明るく */
          }

          #lightingTabContent .control-row {
              justify-content: space-between;
              align-items: center;
          }

          #meshDisplayTabContent .control-group {
             flex-direction: row; /* チェックボックスとラベルを横並びに */
             justify-content: space-between; /* 要素間にスペース */
             align-items: center; /* 垂直方向中央揃え */
         }


 /* ヘルプオーバーレイのスタイル */
 #helpOverlay {
     position: fixed; /* 画面全体を覆うように固定 */
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒背景 */
     display: none; /* 初期状態では非表示 */
     justify-content: center; /* コンテンツを水平方向に中央揃え */
     align-items: center;   /* コンテンツを垂直方向に中央揃え */
     z-index: 1000; /* 他の要素より前面に表示 */
     color: white; /* テキスト色 */
 }

 /* ヘルプ内容を表示するボックスのスタイル */
 #helpContent {
            background-color: #444; /* 暗いグレーの背景 */
            color: #eee; /* 明るいテキスト色 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            max-width: 70%; /* 最大幅 */
            max-height: 80%; /* 最大高さ */
            overflow-y: auto; /* コンテンツが多すぎる場合はスクロール */
            position: relative; /* 閉じるボタンの位置指定のため */
 }

        #helpContent h3 {
            margin-top: 0;
            color: #eee;
            border-bottom:solid 1px #ddd;
        }

        #helpContent h4 {
             margin: 15px 0 5px 0;
             color: #ccc;
        }

         #helpContent ul {
             margin-top: 0;
             padding-left: 20px;
         }

         #helpContent li {
             margin-bottom: 5px;
         }

        #helpContent .copyright{
            font-size: 0.9em;
            text-align:center;
            margin-top:20px;
        }


        #helpContent .copyright a{
            color: #ddd;
        }

        #helpContent p a{
            color: #ddd;
        }

 /* ヘルプ内容ボックス内の閉じるボタンのスタイル */
 #closeHelpButton {
     position: absolute; /* 絶対配置 */
     top: 10px; /* 上端からの距離を調整 */
     right: 10px; /* 右端からの距離を調整 */
     font-size: 24px; /* '×' のサイズを調整 */
     font-weight: bold; /* '×' を太くする */
     color: #ccc; /* '×' の色 */
     background: none; /* 背景をなくす */
     border: none; /* ボーダーをなくす */
     cursor: pointer;
     padding: 5px; /* クリックしやすくするためのパディング */
     line-height: 1; /* 行の高さを調整 */
     transition: color 0.3s ease; /* 色のトランジション */
 }

 #closeHelpButton:hover {
     color: #fff; /* ホバー時の色を明るく */
 }

 #canvasContainer {
     position: relative; /* この要素を基準に子要素を絶対配置 */
     width: 100vw; /* Canvasと同じ幅 */
     height: calc(100vh - 80px); /* Canvasと同じ高さ */
     overflow: hidden; /* コンテナからはみ出す要素を隠す（念のため） */
     /* Flexboxレイアウトから外れるため、bodyのdisplay: flex; に影響されなくなる */
 }
 #cameraInfoDisplay {
     position: absolute; /* 親要素 #canvasContainer を基準に絶対配置 */
     top: 10px; /* Canvasの左上からの距離 */
     left: 10px; /* Canvasの左上からの距離 */
     color: white; /* 文字色 */
     font-family: monospace; /* 等幅フォントで見やすく */
     font-size: 12px; /* フォントサイズ */
     background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
     padding: 5px; /* 内側の余白 */
     border-radius: 3px; /* 角を丸く */
     z-index: 100; /* 他の要素より手前に表示 */
     pointer-events: none; /* カメラ操作の邪魔にならないように、マウスイベントを無効化 */
     display: flex; /* ボタンとテキストを横並びに */
     align-items: center; /* 垂直方向中央揃え */
 }
 #copyCameraInfoButton {
     /* pointer-events: none; の影響を受けないように解除 */
     pointer-events: auto;
     margin-right: 5px; /* ボタンとテキストの間に隙間 */
     padding: 2px 5px; /* ボタンのパディング調整 */
     font-size: 10px; /* ボタンのフォントサイズ調整 */
     cursor: pointer;
     border: none;
     border-radius: 3px;
     background-color: #555; /* ボタンの背景色 */
     color: white; /* ボタンのテキスト色 */
     transition: background-color 0.3s ease;
 }
 #copyCameraInfoButton:hover {
     background-color: #777; /* ホバー時の背景色 */
 }

/* コピーボタンのスタイル */
.copy-transform-button {
    pointer-events: auto; /* ボタンはマウスイベントを有効にする */
    padding: 2px 5px; /* ボタンのパディング調整 */
    font-size: 10px; /* ボタンのフォントサイズ調整 */
    cursor: pointer;
    border: none;
    border-radius: 3px;
    background-color: #555; /* ボタンの背景色 */
    color: white; /* ボタンのテキスト色 */
    transition: background-color 0.3s ease;
    margin-left: 5px; /* 見出しとの間隔 */
}
.copy-transform-button:hover {
    background-color: #777; /* ホバー時の背景色 */
}

/* コマンダボタンのスタイル */
#commanderButton {
     padding: 8px 15px;
     cursor: pointer;
     border: none;
     border-radius: 5px;
     font-size: 14px;
     color: white;
     transition: background-color 0.3s ease;
     /* 色はJSで制御 */
}
#commanderButton:hover {
    opacity: 0.9;
}
 /* コマンダ画面のスタイル */
 #commanderControls {
      width: 420px;
      top: 80px; /* コントロールバーの下から開始 */
      right: 10px; /* 右端からの距離 */
      bottom: 10px; /* 画面下からの距離 */
      height: calc(100vh - 120px); /* top + bottom + 間の高さ = 100vh になるように調整 (80 + 10 = 90) */
      max-height: none; /* 親クラスのmax-height指定を上書き */
      display: none; /* 初期状態では非表示 */
      flex-direction: column; /* 子要素を縦に並べる (edit-panelで既に設定済みだが念のため) */
      /* ボタンコンテナとテキストエリアの間に少し隙間を空ける */
      gap: 10px; /* ボタンコンテナとtextareaの間に隙間 */
 }

 /* コマンダボタンをまとめるコンテナのスタイル */
 #commanderControls .commander-buttons {
     display: flex; /* ボタンを横並びにする */
     gap: 10px; /* ボタン間の隙間 */
     justify-content: flex-end; /* 右寄せ */
     flex-shrink: 0; /* コンテナが縮小しないようにする */
 }

/* コマンダボタンのスタイル (既存のbuttonスタイルを流用または調整) */
 #commanderControls .commander-buttons button {
      width: 30px; /* ボタンの幅を固定 (アイコンサイズに合わせて調整) */
      height: 30px; /* ボタンの高さを固定 (アイコンサイズに合わせて調整) */
      padding: 0; /* アイコン表示のためパディングをなくす */
      display: flex; /* アイコンをFlexboxで中央寄せするためにFlexコンテナ化 */
      justify-content: center; /* アイコンを水平方向中央寄せ */
      align-items: center; /* アイコンを垂直方向中央寄せ */
      cursor: pointer;
      border: none;
      border-radius: 5px;
      /* font-size はアイコンには直接影響しないが、念のため削除または調整 */
      color: white; /* アイコンの色 */
      transition: background-color 0.3s ease;
      background-color: #444; /* ボタンの背景色 */
      position: relative; /* 擬似要素の位置基準とする */
      overflow: hidden; 
 }

 #commanderControls .commander-buttons button:hover {
     opacity: 0.9;
      background-color: #555;
 }

 /* 再生ボタンのアイコン (三角形) */
 #playCommandButton::before {
     content: '';
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 0;
     height: 0;
     border-top: 8px solid transparent; /* 上側の透明なボーダー */
     border-bottom: 8px solid transparent; /* 下側の透明なボーダー */
     border-left: 12px solid white; /* 右向きの白い三角形 */
     /* border-left の色を button の color と合わせる */
     border-left-color: currentColor; /* 親要素のcolorを使用 */
 }

 /* 一時停止ボタンのアイコン (縦線2本) */
 #pauseCommandButton::before,
 #pauseCommandButton::after {
     content: '';
     display: block;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 4px; /* 線の太さ */
     height: 16px; /* 線の長さ */
     background-color: currentColor; /* 線の色 */
 }

 #pauseCommandButton::before {
     /* 左側の棒 */
     left: calc(50% - 6px); /* 中央から左に 5px オフセット */
 }

 #pauseCommandButton::after {
     /* 右側の棒 */
     right: calc(50% - 6px); /* 中央から右に 5px オフセット */
 }

/* 終了ボタンのアイコン (四角形) */
 #stopCommandButton::before {
     content: '';
     display: block;
     position: absolute;
     top: 50%; 
     left: 50%;
     transform: translate(-50%, -50%);
     width: 14px; /* 四角の幅 */
     height: 14px; /* 四角の高さ */
     background-color: white; /* 四角の色 */
      /* background-color を button の color と合わせる */
     background-color: currentColor; /* 親要素のcolorを使用 */
 }

 /* 録画ボタンのアイコン */
 #recordCommandButton::before {
     content: '';
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 14px; /* 直径 */
     height: 14px; /* 直径 */
     background-color: white; /* 色 */
     border-radius: 50%; /* 円形にする */
     background-color: currentColor; /* 親要素のcolorを使用 */
 }

 #commanderControls h3 {
     /* 見出しの高さとマージン */
     flex-shrink: 0; /* 縮小させない */
     margin-top: 0; /* 上マージンを調整 (必要に応じて) */
     margin-bottom: 10px; /* 下マージンを調整 (必要に応じて) */
 }

 #commanderControls textarea {
      width: 100%; /* 親要素 (コマンダ画面) の幅に合わせる */
      flex-grow: 1; /* 利用可能な残りの高さを全て使用 */
      /* height: calc(100% - 30px); */ /* この固定高さ指定は不要になるか、flex-growに合わせて調整 */
      box-sizing: border-box; /* Paddingを含めてサイズを計算 */
      padding: 10px;
      border: 1px solid #555; /* 暗い境界線 */
      border-radius: 4px;
      background-color: #555; /* 暗い背景色 */
      color: #eee; /* 明るいテキスト色 */
      font-family: monospace; /* 等幅フォント */
      resize: vertical; /* 垂直方向のみサイズ変更可能にする（noneから変更） */
      outline: none; /* フォーカス時のアウトラインを非表示 */
      display: block; /* Flexアイテムとして正しく振る舞うように */
 }

          #otherTabContent h4 {
              margin: 0 0 8px 0;
              font-size: 14px;
              color: #ccc; /* 見出し色を明るく */
          }



 /* 録画ボタンがアクティブ（録画中）のスタイル */
 #recordCommandButton.recording::before {
     background-color: red; /* 録画中は赤色 */
     animation: blinkAnimation 1s infinite; /* 点滅アニメーション */
 }

 @keyframes blinkAnimation {
     0% { opacity: 1; }
     50% { opacity: 0.3; }
     100% { opacity: 1; }
 }