/* tierlist.css - チャンピオンティアリスト用スタイル（方眼紙スタイル） */

/* --- グローバル設定 --- */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.tierlist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5em;
  background: #2a2a3a;
  padding: 1em 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  width: 100%;
  box-sizing: border-box;
}

.role-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 0.3em;
  background: transparent;
  padding: 0;
  margin-left: 10px;
}

.filter-controls {
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: flex-end;
  margin-right: 10px;
}

.filter-select {
  padding: 0.5em 1em;
  background: #1e1e2e;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-select:hover { border-color: #5e9cff; }
.filter-select:focus { outline: none; border-color: #5e9cff; box-shadow: 0 0 0 2px rgba(94,156,255,0.2); }

.role-tab {
  padding: 0.6em 1.2em;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #ccc;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 3em;
  text-align: center;
}
.role-tab:hover { background: rgba(255,255,255,0.05); color: #fff; }
.role-tab.active { background: linear-gradient(45deg,#5e9cff,#e6a3a8); color: #fff; }

.tier-group {
  margin-bottom: 2em;
  animation: fadeIn 0.3s ease;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
}
.tier-header {
  margin: 0.8em 0;
  color: #ffaa33;
  padding-bottom: 0.3em;
  font-size: 1.5em;
  text-align: left;
  padding-left: 10px;
  box-sizing: border-box;
}

.champion-table-container {
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  -webkit-overflow-scrolling: touch;
  position: relative; /* 固定位置のベース */
}

.champion-table {
  width: 100%;
  border-collapse: separate; /* 重要: セルを個別に扱うため */
  border-spacing: 0;
  margin-bottom: 1em;
  background: #2a2a3a;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* テーブルヘッダー */
.champion-table thead {
  position: sticky;
  top: 0;
  z-index: 20;
}

.champion-table th {
  background: #1e1e2e;
  color: #e0e0e0;
  padding: 0.8em 0.5em;
  text-align: center;
  font-weight: bold;
  border: 1px solid #444;
  position: sticky;
  top: 0;
  z-index: 20;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
.champion-table th:hover { background: #2a2a4a; }
.champion-table th.sorted { background: #3a3a5a; }
.champion-table th.sorted-asc::after { content: " ▲"; font-size:0.8em; }
.champion-table th.sorted-desc::after { content: " ▼"; font-size:0.8em; }
.champion-table th.no-sort { cursor: default; }
.champion-table th.no-sort:hover { background: #1e1e2e; }

/* 固定列の設定 */
.champion-table th:nth-child(1),
.champion-table th:nth-child(2),
.champion-table th:nth-child(3) {
  position: sticky;
  z-index: 30; /* ヘッダー+固定列の交差部分は最も前に */
  background: #1e1e2e;
}

.champion-table td:nth-child(1),
.champion-table td:nth-child(2),
.champion-table td:nth-child(3) {
  position: sticky;
  z-index: 10;
  background: #2a2a3a;
}

/* 固定列の位置指定 */
.champion-table th:nth-child(1),
.champion-table td:nth-child(1) {
  left: 0;
}

.champion-table th:nth-child(2),
.champion-table td:nth-child(2) {
  left: 32px; /* 第1列の幅 + ボーダー */
}

.champion-table th:nth-child(3),
.champion-table td:nth-child(3) {
  left: 64px; /* 第1列+第2列の幅 + ボーダー */
}

/* 列パディング */
.champion-table th:nth-child(1), 
.champion-table th:nth-child(2) { 
  padding: 0.8em 0.3em; 
}

.champion-table td:nth-child(1), 
.champion-table td:nth-child(2) { 
  padding: 0.4em 0.3em; 
}

/* チャンピオン列ヘッダー */
@media (min-width:769px) {
  .champion-table th:nth-child(3) { 
    text-align: center; 
    padding-left: 0; 
  }
  .champion-table td.cell-icon { 
    text-align: left; 
  }
}

/* 行・セル */
.champion-table tr { 
  transition: background-color 0.2s ease; 
}
.champion-table tr:hover {
  background-color: #3a3a4a;
}
.champion-table tbody tr td { 
  border-bottom: 1px solid #444; 
  border-right: 1px solid #444; 
}
.champion-table td { 
  padding: 0.4em 0.5em; 
  text-align: center; 
  border: 1px solid #444; 
  color: #e0e0e0; 
  white-space: nowrap; 
  vertical-align: middle; 
  box-sizing: border-box; 
}

.cell-rank { 
  width: 30px; 
  font-weight: bold; 
  color: #aaa; 
}
.cell-tier { 
  width: 30px; 
  font-weight: bold; 
  text-align: center; 
}
.cell-icon { 
  width: 180px; 
  display: table-cell; 
  vertical-align: middle; 
  border: 1px solid #444; 
  box-sizing: border-box; 
}
.cell-icon .champion-icon { 
  margin-right: 0.5em; 
  width: 32px; 
  height: 32px; 
  border-radius: 4px; 
  object-fit: cover; 
  border: 1px solid #444; 
  vertical-align: middle; 
}
.champion-name-display { 
  display: inline-block; 
  vertical-align: middle; 
  font-weight: bold; 
  white-space: nowrap; 
}

.champion-tier-badge { 
  width: 24px; 
  height: 24px; 
  border-radius: 50%; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  font-weight: bold; 
  font-size: 0.8em; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.4); 
  border: 2px solid rgba(255,255,255,0.1); 
  margin-right: 5px; 
  vertical-align: middle; 
}
.champion-tier-badge.tier-s { background: linear-gradient(135deg,#ffaa33,#ff8800); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.champion-tier-badge.tier-a { background: linear-gradient(135deg,#ff5555,#cc0000); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.champion-tier-badge.tier-b { background: linear-gradient(135deg,#55aaff,#0066cc); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.champion-tier-badge.tier-c { background: linear-gradient(135deg,#55dd55,#009900); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.champion-tier-badge.tier-d { background: linear-gradient(135deg,#aa88dd,#6633aa); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

.cell-games { min-width: 80px; color: #aaa; }
.cell-kda { min-width: 80px; color: #e6a3a8; }
.kda-high { color: #32c778 !important; font-weight: bold; }

/* ★勝率グラフ */
.cell-winrate { 
  position: relative; 
  height: 2.5em; /* セルの高さを固定 */
  vertical-align: middle;
  overflow: hidden; 
  min-width: 60px; 
  padding: 0 0.5em; /* 文字が読みやすいようにパディング */
  line-height: 2.5em; /* 文字を垂直中央に */
}
.cell-winrate .data-bar.winrate { 
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  height: 100%; 
  z-index: 0; 
  background: rgba(50,199,120,0.3); 
}
.winrate-high { color: #32c778 !important; font-weight: bold; }

/* 使用率・BAN率グラフ */
.cell-pickrate, .cell-banrate { 
  position: relative; 
  height: 2.5em;
  vertical-align: middle;
  overflow: hidden; 
  min-width: 60px; 
  padding: 0 0.5em;
  line-height: 2.5em;
}
.cell-pickrate .data-bar.pickrate { 
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  height: 100%; 
  z-index: 0; 
  background: rgba(94,156,255,0.3); 
}
.cell-banrate .data-bar.banrate { 
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  height: 100%; 
  z-index: 0; 
  background: rgba(255,107,107,0.3); 
}

/* データバー前面にテキスト表示 */
.cell-winrate, .cell-pickrate, .cell-banrate {
  position: relative;
  z-index: 1;
}

.cell-damage { min-width: 80px; color: #ffaa33; }
.cell-gold   { min-width: 80px; color: #ffdd33; }

.loading-container { text-align: center; padding: 2em; }
.loading-dots { display: flex; justify-content: center; margin-bottom: 0.5em; }
.loading-dots span { width: 8px; height: 8px; margin: 0 4px; background: #5e9cff; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-text { font-size: 0.9em; color: #888; }

@keyframes bounce { 0%,80%,100% { transform: scale(0); } 40% { transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.tier-group { opacity: 0; transform: translateY(10px); animation: fadeIn 0.3s ease forwards; }
.champion-table { opacity: 0; transform: translateY(5px); animation: fadeIn 0.3s ease forwards; }

/* モバイル対応 */
@media (max-width: 768px) {
  /* ヘッダーを2行に折り返し */
  .tierlist-header {
    flex-wrap: wrap;
  }
  
  /* 1行目：ロールタブ */
  .role-tabs {
    width: 100%;
    justify-content: center;
    margin-bottom: 0.5em;
    margin-left: 0;
  }
  
  /* 2行目：パッチ表示＆ランクプルダウン */
  .filter-controls {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    margin-right: 0;
  }
  
  /* パッチ表示を中央揃え */
  .filter-controls .patch-version {
    text-align: center;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  
  /* モバイル時はチャンピオン名非表示（アイコンのみ表示） */
  .champion-table td.cell-icon .champion-name-display {
    display: none;
  }
  
  /* モバイル時のチャンピオン列ヘッダーは非表示 */
  .champion-table th:nth-child(3) {
    font-size: 0;
    padding: 0.4em 0.2em;
  }
  
  .champion-table td.cell-icon {
    text-align: center;
    padding: 0.1em;
  }
}

/* レスポンシブ */
@media (max-width: 480px) {
  .container { padding: 0; }
  .champion-table-container { width: 100%; border-radius: 8px; }
  .champion-table { min-width: 650px; }
  .champion-table th, .champion-table td { padding: 0.3em 0.2em; font-size: 0.75em; }
  .champion-icon { width: 24px; height: 24px; }
  .champion-tier-badge { width: 18px; height: 18px; font-size: 0.65em; margin-right: 1px; border-width: 1px; }
  .cell-icon { padding: 0 0.1em; width: auto; min-width: 30px; }
  
  /* モバイル表示時の固定列の微調整 */
  .champion-table th:nth-child(1) { left: 0; padding: 0.3em 0.1em; width: 25px; }
  .champion-table th:nth-child(2) { left: 25px; padding: 0.3em 0.1em; width: 25px; }
  .champion-table th:nth-child(3) { left: 50px; padding: 0.3em 0.1em; width: 30px; }
  
  .champion-table td:nth-child(1) { left: 0; padding: 0.3em 0.1em; width: 25px; }
  .champion-table td:nth-child(2) { left: 25px; padding: 0.3em 0.1em; width: 25px; }
  .champion-table td:nth-child(3) { left: 50px; padding: 0.3em 0.1em; width: 30px; }
  
  /* モバイル表示時のセル高さ */
  .cell-winrate, .cell-pickrate, .cell-banrate {
    height: 2em;
    line-height: 2em;
  }
}

/* ハンバーガーメニュー - 位置修正版 */
.container {
  position: relative; /* これを追加 - 子要素の絶対位置の基準点になる */
}

.menu-toggle {
  position: absolute;
  top: 1.5em;
  right: 1.5em;
  width: 36px;
  height: 36px;
  background: #2a2a3a;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  z-index: 1000;
  border: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

/* ドロップダウンメニューも同様に修正 */
.dropdown-menu {
  position: absolute;
  top: 4.5em;
  right: 1.5em;
  /* 他のスタイルは変更なし */
}