/* --- 基本レイアウト --- */
body { 
    font-family: sans-serif; 
    display: flex; 
    height: 100vh; 
    margin: 0; 
}
nav { 
    width: 350px; 
    border-right: 1px solid #ccc; 
    padding: 10px; 
    height: 100%; 
    box-sizing: border-box; 
    overflow-y: auto; 
    flex-shrink: 0; /* サイドバーが縮まないように */
}
main { 
    flex-grow: 1; 
    padding: 20px; 
    height: 100%; 
    box-sizing: border-box; 
    overflow-y: auto; 
}

/* --- 履歴リスト (左側) --- */
#history-list { list-style: none; padding: 0; }
#history-list li {
    padding: 10px; 
    margin-bottom: 5px; 
    border: 1px solid #ddd;
    border-radius: 4px; 
    cursor: pointer;
    font-size: 0.9em;
}

#history-list li:hover { background-color: #f4f4f4; }
#history-list li.result-win { border-left: 5px solid #4caf50; } /* 勝ち */
#history-list li.result-lose { border-left: 5px solid #f44336; } /* 負け */
#history-list li.result-draw { border-left: 5px solid #ffeb3b; } /* 引き分け */
#history-list li.result-unknown { border-left: 5px solid #9e9e9e; } /* 未ラベル */
#history-list .map { font-weight: bold; }
#history-list .datetime { color: #666; font-size: 0.8em; }

/* --- 詳細表示 (右側) --- */
#match-details h2 { margin-top: 0; }

/* チーム・ボット・勝率の色分け */
.team-ally { background-color: #e8f5e9; } /* 味方 (自分含む) */
.team-enemy { background-color: #ffebee; } /* 敵 */
.player-name.is-bot { color: #999; font-style: italic; } /* ボット */
.player-name.is-self { font-weight: bold; color: #0056b3; } /* 自分 */
.wr-good { color: #d100e8; font-weight: bold; } /* 55%+ (紫) */
.wr-avg-good { color: #4caf50; } /* 50-55% (緑) */
.wr-avg-bad { color: #ff4d00; } /* 45-50% (黄) */
.wr-bad { color: #f43636; font-weight: bold; } /* 45%- (赤) */




/* ... (既存のスタイル) ... */

table { 
    border-collapse: collapse; 
    width: 100%; 
    margin-top: 15px; 
    font-size: 0.9em;
    table-layout: auto; /* 【修正】fixed を削除 (autoに戻す) */
}
th, td { 
    border: 1px solid #ddd; 
    /* padding: 8px; <-- 削除 (列ごとに指定) */
    padding: 6px 8px; /* デフォルトのpadding */
    text-align: left; 
    white-space: nowrap; /* 改行を防ぐ (これは維持) */
}

/* ... (既存のスタイル) ... */

/* Tier表示用のspanのスタイル (★ これが幅を揃えます) */
.tierSpan {
    display: inline-block;
    width: 45px;            /* "VIII" や "IX" が入る固定幅 */
    text-align: center;    /* 右揃え (X と VIII を揃えるため) */
    margin-right: 6px;
    font-weight: bold;
}



/* ... (既存のスタイル) ... */

th, td { 
    /* ... (既存の th, td スタイル) ... */
    position: relative; /* 【NEW】ゲージの基準にする */
    padding: 6px 8px;   /* テキスト用の余白 */
}

/* 【NEW】ゲージの上にテキストを乗せるためのspan */
.stat-text {
    position: relative; /* テキストが手前に来るように */
    z-index: 2;         /* ゲージ(z-index:1)より手前に表示 */
}

/* 【NEW】動的ゲージ（信頼区間ゲージ）本体 */
.ci-gauge {
    position: absolute; /* 親(td)の左上を基準に絶対配置 */
    top: 0;
    bottom: 0;
    z-index: 1;         /* テキスト(z-index:2)より奥に表示 */
    
    /* ゲージの色 (半透明の赤) */
    background-color: rgba(255, 0, 0, 0.3); 
}

/* (任意) 味方チームのゲージ色 */
.team-ally .ci-gauge {
    background-color: rgba(0, 128, 0, 0.15); /* 半透明の緑 */
}



/* ... (既存のスタイル) ... */

/* --- 【NEW】名前の色分け用クラス --- */
/* (上級者：色を濃くして目立たせる) */
.player-name.rank-purple { color: #d100e8 !important; font-weight: bold; }
.player-name.rank-blue { color: #00b0c8 !important; font-weight: bold; }
.player-name.rank-green { color: #4caf50 !important; font-weight: bold; }

/* (カモ：色は薄くするが、太字にして警告) */
/* 良くない (オレンジ) */
.player-name.rank-orange { 
    color: #ff5100 !important; /* 標準的なオレンジ */
    font-weight: bold; 
}

/* 悪い (赤) */
.player-name.rank-red { 
    color: #f43636 !important; /* 標準的な赤 */
    font-weight: bold;
    text-decoration: underline !important; /* ★赤だけ下線を追加 */
}
.player-name.rank-black { color: #212121 !important; font-weight: bold; }

/* (自分自身の色は、ランク色より優先する) */
.player-name.is-self { font-weight: bold; color: #0056b3 !important; } 

/* ... (既存の .ci-gauge, .tier-span など) ... */

/* 対空指数 */
.anti-air.rank-purple { color: #d100e8 !important; font-weight: bold; }
.anti-air.rank-green { color: #4caf50 !important; font-weight: bold; }
.anti-air.rank-yellow { color: #f4ae36 !important; font-weight: bold; }
.anti-air.rank-red { color: rgb(255, 0, 0) !important; font-weight: bold; }

/* 選択中のデータをわかりやすくする */
/* 2. 選択中のアイテム（基本スタイル） */
#history-list li.selected {
    background-color: #4a4a4a; /* 暗いグレー背景 */
    color: #ffffff;            /* 白文字 */
    /* border-left: 4px solid #ffcc00; /* 視認性アップのアクセント（お好みで） */
}

/* 3. 【重要】選択中のアイテムをホバーした時のスタイル */
/* これがないと背景が白くなって文字が消えます！ */
#history-list li.selected:hover {
    background-color: #333333; /* 選択中背景より少し暗くする（または同じ色にする） */
    color: #ffffff;            /* 白文字をキープ */
}

/* ボタンの基本スタイル */
.gemini-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;       /* ボタンのサイズ */
    height: 40px;
    border: none;
    background-color: transparent; /* 背景は透明 */
    border-radius: 50%; /* 丸くする */
    cursor: pointer;
    transition: background-color 0.2s ease; /* ホバー時のふわっとしたアニメーション */
    color: #5f6368;    /* アイコンの色 (グレー) */
}

/* ホバーした時の効果 (これが重要！) */
.gemini-copy-btn:hover {
    background-color: rgba(0, 0, 0, 0.08); /* 薄いグレーの背景を乗せる */
    color: #202124;    /* アイコンを少し濃くする */
}

/* クリックした時の効果 */
.gemini-copy-btn:active {
    background-color: rgba(0, 0, 0, 0.12);
}

/* アイコンのサイズ */
.gemini-copy-btn svg {
    width: 24px;
    height: 24px;
}

/* トーストの基本スタイル */
#toast-notification {
    visibility: hidden; /* 最初は隠す */
    min-width: 250px;
    background-color: #333; /* 背景色 (ダークグレー) */
    color: #fff;            /* 文字色 */
    text-align: center;
    border-radius: 4px;     /* 角を少し丸く */
    padding: 12px;          /* 内側の余白 */
    position: fixed;        /* 画面上の固定位置 */
    z-index: 1000;          /* 最前面に */
    left: 50%;              /* 左右中央寄せのテクニック */
    bottom: 30px;           /* 下からの距離 */
    transform: translateX(-50%); /* 左右中央寄せの補正 */
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s; /* ふわっとさせるアニメーション設定 */
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 表示状態のスタイル (JSでこのクラスを付け外しする) */
#toast-notification.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px; /* 少し浮き上がる演出 */
}