/* リセットと基本設定 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #222; /* より明るい宇宙空間色に変更 */
    color: #fff; /* 全体の文字色を真っ白に */
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden; /* スクロールバーを隠す */
    position: relative;
}

#scale-wrapper {
    width: 1600px;
    height: 900px;
    transform-origin: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    flex-shrink: 0;
}

/* 16:9のレスポンシブコンテナ */
.app-container {
    width: 1600px;
    height: 900px;
    background-color: #333; /* コンテナの背景を明るく */
    display: flex;
    padding: 10px;
    gap: 10px;
}

/* パネル共通設定 */
.panel {
    background-color: #444; /* パネルをさらに明るくして浮き立たせる */
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

h2 {
    font-size: 1rem;
    margin-bottom: 10px;
    border-bottom: 1px solid #777; /* 見出しの下線も明るく */
    padding-bottom: 5px;
    color: #ccc;
}

/* 左側（HR図）は幅を広く取る */
.hr-diagram-panel {
    flex: 2; /* 右側の2倍の幅 */
    min-width: 0; /* 【追加】中身のCanvasに邪魔されず縮小できるようにする */
}

#hr-canvas-container {
    flex: 1;
    background-color: #000;
    border-radius: 4px;
    position: relative;
}

/* 右側コンテナ */
.right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0; /* 【追加】右側のパネル全体が縮めるようにする */
}

/* 【修正】3D天体ビューを大きく広げ、初期設定は中身のサイズに合わせる */
.star-3d-panel {
    flex: 1; /* 利用可能な縦幅をすべて使って大きく広げる */
    min-height: 0; /* 【追加】縦方向にも縮小できるようにする */
}

#star-3d-container {
    flex: 1;
    background-color: #000;
    border-radius: 4px;
    position: relative;
    /* 【追加】中のCanvasが縮むのを拒否してはみ出すのを防ぎ、強制的に縮小させる */
    overflow: hidden;
    min-height: 0; 
}


.control-panel {
    flex: none; /* 均等分割をやめ、2つのスライダーに必要な高さだけにする */
}


/* スライダー周りのデザイン */
.controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 5px;
}

.controls label {
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    color: #ddd; /* ラベルの文字色を明るく */
}

.controls span {
    font-weight: bold;
    color: #66b3ff; /* ハイライト色も少し明るく */
}

.controls input[type="range"] {
    width: 100%;
    cursor: pointer;
}

#hr-bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 背景グラフのレイヤー */
}

#scale-bar-container {
    position: absolute;
    bottom: 15px;
    left: 50%; 
    transform: translateX(-50%); /* 【修正】要素の幅の半分だけ左に戻し、完全に中央揃えにする */
    width: 100px;
    text-align: center;
    pointer-events: none;
    z-index: 10;
}

#scale-bar-text {
    color: #ffffff; /* 視認性を上げるため真っ白に変更 */
    font-size: 0.8rem;
    margin-bottom: 2px;
    /* 文字の周囲に黒い縁取り（シャドウ）を十字方向に追加 */
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
}

#scale-bar-line {
    border-bottom: 2px solid #ffffff; /* こちらも真っ白に変更 */
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    height: 6px;
    /* 線の周囲にも黒い影を追加 */
    filter: drop-shadow(1px 1px 1px #000) drop-shadow(-1px -1px 1px #000);
}

#hr-trajectory-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3; /* 【修正】3Dコンテナ(z-index:2)より手前に配置 */
    pointer-events: none; /* マウス操作を邪魔しないようにする */
}

#hr-3d-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* 【修正】背景(1)より手前、軌跡(3)より奥に配置 */
    pointer-events: none; /* HR図上の星はマウス操作させない */
}

#hr-labels-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4; /* 3Dコンテナより手前に配置 */
    pointer-events: none; /* マウス操作を邪魔しない */
    overflow: hidden; /* コンテナ外にはみ出た文字を隠す */
}

.star-label {
    position: absolute;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    /* 文字の周囲に黒い縁取り（シャドウ）を追加して視認性を高める */
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
    /* 星の中心座標から右側へずらし、高さは中央に合わせる */
    transform: translate(15px, -50%);
    pointer-events: none;
    white-space: nowrap; /* 改行させない */
}

/* === 天体ビュー内のコントロールUIの装飾 === */
.view-controls {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-display {
    color: #ddd;
    font-size: 0.9rem;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border: 1px solid #555;
}

.view-controls label {
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    color: #ddd;
    margin-top: 2px;
}

.playback-buttons {
    display: flex;
    gap: 10px;
    margin-top: 2px;
}

.playback-buttons button {
    flex: 1;
    padding: 6px;
    background: #555;
    color: #fff;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background 0.2s, border-color 0.2s;
}

.playback-buttons button:hover {
    background: #666;
    border-color: #888;
}

/* === 値のハイライト用スタイル（追加） === */
#age-value {
    color: #66b3ff; /* 経過年数の色（明るい青） */
    font-weight: bold; /* 文字を太くする */
}

#event-value {
    color: #ffcc00; /* 現在の状態の色（明るい黄色） */
    font-weight: bold; /* 文字を太くする */
}

/* === モード切り替えボタン === */
.mode-buttons {
    display: flex;
    gap: 5px;
}
.mode-buttons button {
    background: #333;
    color: #aaa;
    border: 1px solid #555;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}
.mode-buttons button.active {
    background: #0077ff;
    color: #fff;
    border-color: #0055cc;
    font-weight: bold;
}