/*
 * gundam-theme.css
 * RX-78 ガンダム カラーテーマ
 * 白・青・赤・黄 ベースの配色上書きファイル
 *
 * 使い方: pocketgamer.css と datalist.css の後に読み込む
 * <link rel="StyleSheet" type="text/css" href="gundam-theme.css">
 */

/* =============================================
   カラー変数定義
   RX-78 カラーパレット
   ============================================= */
:root {
  --rx78-white:      #f4f4f0;   /* 本体ホワイト */
  --rx78-blue:       #1a4a8a;   /* 濃紺ブルー */
  --rx78-blue-light: #2a6abf;   /* アクセントブルー */
  --rx78-blue-pale:  #d8e8f8;   /* 薄いブルー（背景用） */
  --rx78-red:        #cc2200;   /* シールドレッド */
  --rx78-red-light:  #e03318;   /* ホバー用レッド */
  --rx78-yellow:     #e8b800;   /* アンテナイエロー */
  --rx78-yellow-pale:#fff8d0;   /* 薄いイエロー（背景用） */
  --rx78-gray:       #6a7080;   /* フレームグレー */
  --rx78-dark:       #1a1e2a;   /* ダークネイビー */
  --rx78-border:     #b8c8dc;   /* ボーダー色 */
}

/* =============================================
   ベース・背景
   ============================================= */
body {
  background-color: var(--rx78-white);
  color: #1a1e2a;
}

/* =============================================
   リンク色
   ============================================= */
a:link    { color: var(--rx78-blue); }
a:visited { color: #1a5a8a; }
a:hover   { color: var(--rx78-red); }

/* =============================================
   ヘッダー
   ============================================= */
header {
  /* border-bottom: 3px solid var(--rx78-blue); */
  padding-bottom: 10px;
  /* background: linear-gradient(135deg, #f4f4f0 60%, var(--rx78-blue-pale) 100%); */
}

header h1 {
  color: var(--rx78-blue);
  font-weight: bold;
  letter-spacing: 0.02em;
}

/* =============================================
   ナビゲーション・タブ
   ============================================= */
nav ul.tab {
  border-bottom: 2px solid var(--rx78-blue);
  background-color: #eef3fa;
}

/* タブ下線の色: tab-blue クラスをガンダムブルーに */
nav ul.tab.tab-blue li.active {
  border-bottom: 3px solid var(--rx78-blue);
}

nav ul.tab.tab-blue li.active a {
  color: var(--rx78-blue);
  font-weight: bold;
}

nav ul.tab li a {
  color: var(--rx78-gray);
}

/* =============================================
   見出し (h2, h3)
   ============================================= */
h2 {
  color: var(--rx78-blue);
  border-left: 5px solid var(--rx78-blue);
  padding-left: 0.6rem;
  border-bottom: 1px solid var(--rx78-blue-pale);
  padding-bottom: 4px;
}

/* MAP タイトル h3.map-title のガンダムカラー上書き */
h3.map-title {
  color: var(--rx78-blue) !important;
  border-left: 3px solid var(--rx78-red);
  padding-left: 0.5rem;
  font-weight: bold;
}

/* チーム名 h3.team-name */
h3.team-name {
  color: var(--rx78-blue) !important;
  border-left: 3px solid var(--rx78-yellow);
  padding-left: 0.5rem;
}

/* =============================================
   注記テキスト (.h-green → ガンダムカラーに)
   ============================================= */
.h-green {
  color: var(--rx78-blue) !important;
}

/* =============================================
   datalist テーブル
   ============================================= */

/* ヘッダー行: 濃紺ブルー */
table.datalist th {
  background-color: var(--rx78-blue);
  color: #ffffff;
  border-color: var(--rx78-border);
}

/* テーブル枠 */
table.datalist {
  border-color: var(--rx78-border);
}

table.datalist th,
table.datalist td {
  border-color: var(--rx78-border);
}

/* ストライプ: 奇数行に薄いブルー */
table.datalist tr:nth-child(odd) td {
  background-color: #eef3fa;
}

table.datalist tr:nth-child(even) td {
  background-color: #f8fbff;
}

/* ホバー時に薄いイエロー（視認性アップ） */
table.datalist tr:hover td {
  background-color: var(--rx78-yellow-pale);
  transition: background-color 0.15s;
}

/* =============================================
   シナリオチャート内の注記
   ============================================= */
.shining > rect {
  fill: var(--rx78-red) !important;
  stroke: var(--rx78-yellow) !important;
  stroke-width: 4px;
}

/* =============================================
   更新履歴セクション
   ============================================= */
section.contents:last-of-type {
  border-top: 2px solid var(--rx78-blue-pale);
}

section.contents:last-of-type h3 {
  color: var(--rx78-gray);
  font-size: 1rem;
}

/* 情報提供者クレジット */
.thanks {
  color: var(--rx78-blue) !important;
}

/* =============================================
   フッター
   ============================================= */
footer {
  border-top: 2px solid var(--rx78-blue) !important;
  color: var(--rx78-gray);
  background-color: #eef3fa;
  padding: 0.75rem 1rem;
}

footer a:link,
footer a:visited {
  color: var(--rx78-blue);
  font-weight: bold;
}

/* =============================================
   セクション区切り装飾
   ============================================= */
section.contents {
  padding-bottom: 1.5rem;
}

/* =============================================
   ページ全体の余白アクセント（左ライン）
   ============================================= */
body::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--rx78-blue)  0%,
    var(--rx78-blue)  40%,
    var(--rx78-red)   40%,
    var(--rx78-red)   55%,
    var(--rx78-yellow)55%,
    var(--rx78-yellow)65%,
    var(--rx78-blue)  65%,
    var(--rx78-blue)  100%
  );
  z-index: 9999;
}