/* Drifter Tier Board (rev6)
 * 見出し(h1/h2/h3)をダーク基調＋明色文字に統一
 * ステータス表を濃紺背景×高コントラスト化
 */

:root{
  --bg:#0f141b;             /* さらに暗いベース */
  --panel:#171d25;
  --panel-weak:#1b232e;
  --border:#2b3441;
  --accent:#00c3ff;
  --text:#eaf2ff;           /* 明るめの白 */
  --muted:#b8c6d6;

  /* 補助 */
  --stripe-1: rgba(255,255,255,.03);
  --stripe-2: rgba(0,0,0,.20);

  /* skill色 */
  --str-red:#ff7070;
  --int-blue:#7db8ff;
  --heal-green:#70ff9c;
  --range-orange:#ffcf6b;   /* JP本文で使う .orange */
}

/* ===== Cocoonの見出しをこのページ範囲で上書き ===== */
#drifter-tier-page h1,
#drifter-tier-page h2,
#drifter-tier-page h3{
  all: unset;
  display:block;
  color: var(--text);
  background: linear-gradient( to right, rgba(0,195,255,.10), rgba(0,0,0,0) );
  padding: 10px 12px;
  border-left: 4px solid var(--accent);
  border-top: 1px solid rgba(255,255,255,.05);
  border-right: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
  border-radius: 6px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 16px;
}
#drifter-tier-page h1{ font-size:1.45rem; }
#drifter-tier-page h2{ font-size:1.20rem; }
#drifter-tier-page h3{ font-size:1.05rem; }

/* ページタイトル */
.weapons-container{ max-width:1200px; margin:36px auto 48px; padding:0 16px; }
.page-title{ margin:0 0 18px; letter-spacing:.01em; }

/* コンテナ */
.weapon-section{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 12px 16px;
}

/* タブ */
.category-bar{
  display:flex; gap:8px; overflow-x:auto;
  padding:8px; margin:0 0 14px;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
}
.category-btn{
  flex:0 0 auto; font-size:.87rem; font-weight:800; letter-spacing:.02em;
  color:#dbe6ef; background:var(--panel-weak);
  border:1px solid var(--border); border-radius:999px;
  padding:7px 12px; cursor:pointer; white-space:nowrap;
  transition:background .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.category-btn:hover{ transform:translateY(-1px); box-shadow:0 0 0 2px rgba(0,195,255,.14) inset; }
.category-btn.is-active{ color:#fff; border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,195,255,.26) inset; }

/* ティア表 */
.tier-row{
  display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:start;
  padding:8px 6px; border-bottom:1px dashed var(--border);
}
.tier-row:last-child{ border-bottom:none; }

.tier-label{
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; font-size:1.05rem; font-weight:900; color:#fff;
  border:2px solid var(--border); border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.2));
}
.tier-line{ display:flex; flex-wrap:wrap; gap:10px; min-height:64px; }
.drifter-ico{
  width:58px; height:58px; border-radius:14px; overflow:hidden;
  border:2px solid var(--border); background:var(--panel-weak);
  cursor:pointer; padding:0; line-height:0;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.drifter-ico img{ width:100%; height:100%; object-fit:cover; display:block; }
.drifter-ico:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,195,255,.18); }

/* 詳細 */
.result-panel{
  margin-top:12px; background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:12px;
}
.detail-head{
  display:flex; align-items:center; gap:12px; margin:4px 0 10px;
  padding:8px; border:1px solid var(--border); border-radius:10px; background:var(--panel-weak);
}
.detail-icon{ width:44px; height:44px; border-radius:10px; overflow:hidden; border:2px solid var(--accent); background:#0b1118; flex-shrink:0; }
.detail-icon img{ width:100%; height:100%; object-fit:cover; }
.detail-names{ display:flex; flex-direction:column; gap:2px; }
.detail-name{ font-weight:900; font-size:1.02rem; color:var(--text); }
.detail-id{ font-size:.82rem; color:var(--muted); }

.mini-title{
  font-size:.98rem; font-weight:800; color:var(--text);
  background: linear-gradient( to right, rgba(0,195,255,.10), rgba(0,0,0,0) );
  padding:6px 8px; border-left:3px solid var(--accent); border-radius:6px;
  margin:10px 0 8px;
}

.skill-box{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px dashed var(--border); }
.skill-box:first-child{ border-top:none; }
.skill-icon{ width:44px; height:44px; border-radius:10px; overflow:hidden; border:2px solid var(--accent); background:var(--panel-weak); flex-shrink:0; }
.skill-icon img{ width:100%; height:100%; object-fit:contain; }
.skill-text h3{ margin:0 0 6px; font-size:1rem; color:var(--text); }
.skill-text p{ margin:0; color:var(--muted); line-height:1.8; font-size:.95rem; }

/* ステータス表（濃紺×高コントラスト） */
.stat-table-wrap.dark{
  overflow:auto; border:1px solid var(--border); border-radius:10px; background:#0c1219;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.stat-table.dark{
  width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem; color:var(--text);
}
.stat-table.dark tbody tr:nth-child(odd){ background: var(--stripe-1); }
.stat-table.dark tbody tr:nth-child(even){ background: var(--stripe-2); }
.stat-table.dark th, .stat-table.dark td{ padding:10px 12px; border-bottom:1px solid #1f2833; }
.stat-table.dark th{
  text-align:left; color:#d7e7ff; font-weight:800; width:56%; letter-spacing:.02em;
}
.stat-table.dark td{
  text-align:right; color:#ffffff; font-variant-numeric: tabular-nums;
}
.stat-table.dark tr:last-child th, .stat-table.dark tr:last-child td{ border-bottom:none; }

/* JP本文の色（装飾タグに対応） */
.red{ color: var(--str-red); }
.blue{ color: var(--int-blue); }
.green{ color: var(--heal-green); }
.orange{ color: var(--range-orange); }  /* 範囲/時間などの橙強調 */

@media (max-width: 900px){
  .tier-row{ grid-template-columns:64px 1fr; }
  .detail-name{ font-size:1rem; }
}
/* === ステータス表 左右統一（左列thもストライプに揃える） === */
#drifter-tier-page .stat-table.dark th,
#drifter-tier-page .stat-table.dark td{
  background: transparent !important;   /* trのストライプを透過してそのまま表示 */
  color: #ffffff;                        /* 文字色も右列に合わせて白で統一 */
}

/* 左列のスタイル（背景は透過、文字だけ強調） */
#drifter-tier-page .stat-table.dark th{
  font-weight: 800;
  color: #eaf2ff;                        /* 少しだけ明るい白で項目名を区別 */
}

/* ストライプは行(tr)に付与。セル側は透過で受ける */
#drifter-tier-page .stat-table.dark tbody tr:nth-child(odd){ 
  background-color: var(--stripe-1);
}
#drifter-tier-page .stat-table.dark tbody tr:nth-child(even){
  background-color: var(--stripe-2);
}