/* =========================================================
   全体設定
========================================================= */
body {
  font-family: "Noto Sans JP", sans-serif;
  background: url("../images/page_background.webp") no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  margin: 0;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); /* 半透明の黒 */
  z-index: -1; /* 背景として配置 */
}

/* =========================================================
   ヘッダー
========================================================= */
header {
  background: #062b46;
  padding: 1em;
  text-align: center;
}

header h1 {
  font-size: 2.0em;
}

header .subtitle {
  font-size: 1.4em;
  color: #aadfff;
}

nav a {
  color: #aadfff;
  margin: 0 1em;
  text-decoration: none;
}

/* =========================================================
   カード一覧（生物一覧ページ）
========================================================= */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 左寄せに調整 */
  gap: 0.8em; /* 横の隙間を少し狭く */
  padding: 1em 0.5em; /* 左右余白も軽く縮める */
}

.card {
  background: #133b5c;
  border-radius: 10px;
  width: calc(25% - 0.8em);
  padding: 0.4em 0.5em;
  text-align: center;
  box-shadow: 0 0 10px #000;
  box-sizing: border-box;
}

.card img {
  width: 100%;
  border-radius: 8px;
}

.mod-section h2 {
  margin: 1em 0 0.5em;
  border-bottom: 2px solid #00cfff;
  padding-bottom: 0.3em;
  font-size: 1.5em;
  color: #00cfff;
}

/* =========================================================
   生物個別ページ（メイン画像 & キャプション）
========================================================= */
.main-image-box {
  position: relative;
  text-align: left;
  margin-bottom: 1em;
}

.main-image {
  width: 100%;
  border-radius: 10px;
}

.img-caption-left {
  position: absolute;
  top: 40%;
  left: 5%;
  transform: translateY(-50%);
  background: rgba(0, 40, 80, 0.6);
  color: #fff;
  font-size: 0.95em;
  padding: 0.8em 1.2em;
  border-radius: 6px;
  max-width: 35%;
  line-height: 1.5;
}

.img-caption-left .caption-copy {
  font-style: italic;
  margin-bottom: 0.8em;
  color: #aadfff;
}

/* 左下キャプション（重ね表示） */
.img-caption-left {
  background: rgba(0, 20, 30, 0.8);
  border: 1px solid #00eaff66;
  border-left: 3px solid #00ffffaa;
  box-shadow: 0 0 12px #00ffff44 inset, 0 0 20px #00ffff22;
  padding: 1rem 1.2rem;
  border-radius: 8px;
  width: 250px;
  color: #bdeaff;
  font-family: "M PLUS 1p", "Noto Sans JP", sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  backdrop-filter: blur(3px);
}

/* ─ キャッチコピー（点滅する引用行） ─ */
.caption-copy {
  color: #00ffff;
  font-family: "Orbitron", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
  text-shadow: 0 0 10px #00ffffaa, 0 0 20px #00ffff55;
  animation: captionFlicker 6s ease-in-out infinite;
}

/* ─ 点滅アニメーション（PDA風） ─ */
@keyframes captionFlicker {
  0%, 100% { opacity: 1; }
  95% { opacity: 0.7; }
  97% { opacity: 0.3; }
  98% { opacity: 0.9; }
}

/* ─ 出典リンク（ホバーで光る） ─ */
.img-caption-left a {
  color: #00ffff;
  text-decoration: none;
  border-bottom: 1px dotted #00ffff88;
  transition: 0.3s;
}
.img-caption-left a:hover {
  color: #bdeaff;
  border-bottom: 1px solid #bdeaff;
}

/* =========================================================
   情報ボックス（概要・MOD・PDA画像など）
========================================================= */
.info-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 1em 0;
}

.info-box > div {
  flex: 1;
  background: #133b5c;
  border-radius: 10px;
  padding: 1em;
  box-shadow: 0 0 8px #000;
}

/* =========================================================
   PDAデータバンク
========================================================= */
.pda-entry {
  margin-top: 2em;
  padding-top: 0.1em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  background-color: #1a3f5f;
  border: 2px solid #00cfff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,255,255,0.2);
}

.pda-entry h2 {
  font-size: 1.4em;
  color: #00ffff;
  border-bottom: 1px solid rgba(0,255,255,0.3);
  margin-bottom: 0.8em;
  padding-bottom: 0.2em;
}

.pda-image {
  text-align: center;
  margin-bottom: 1em;
}

.pda-image img {
  max-width: 600px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,255,255,0.2);
}

.pda-text p {
  color: #f0fbff;
  line-height: 1.6;
  margin-bottom: 1em;
}

/* 出典は淡い色で */
.pda-text .source-note {
  font-size: 0.9em;
  color: #aeefff;
  margin-top: 1em;
}

/* ===== PDAデータバンク出典注記 ===== */
.source-note {
  font-size: 0.85em;
  color: #a8d9ff;     /* 薄めの水色 */
  margin-top: 1em;
  font-style: italic; /* 斜体で注釈っぽく */
}

/* 特例危険度（例: ガルガンチュア専用） */
.danger-special {
  background: rgba(150, 0, 0, 0.7);
  color: #fff;
  font-weight: bold;
  padding: 0.5em 1em;
  border-radius: 6px;
  display: inline-block;
}

/* 生息地箇条書きスタイル */
.info-paragraph ul {
  margin: 0.5em 0 0.5em 1.2em;
  padding: 0;
}

.info-paragraph li {
  margin-bottom: 0.3em;
  line-height: 1.6;
}

section ul,
section li {
  color: #d0f6ff;   /* 本文と同じ薄い青 */
  line-height: 1.6;
}

/* =========================================================
   ギャラリー
========================================================= */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: flex-start; /* 左詰め */
}

.gallery figure {
  margin: 0;
  text-align: left;
  width: 300px;   /* 画像幅と同じに固定 */
}

.gallery figcaption {
  margin-top: 0.3em;
  font-size: 0.9em;
  color: #d0e6f5;
  word-wrap: break-word; /* 長文も枠内で折り返す */
}

.gallery img {
  width: 300px;       /* 固定幅にする */
  height: 200px;      /* 縦幅を揃える */
  object-fit: cover;  /* アスペクト比を維持しつつトリミング */
  border-radius: 8px;
  cursor: pointer;
  display: block;
}

.gallery figcaption {
  margin-top: 0.3em;
  font-size: 0.9em;
  color: #d0e6f5;
}

/* ライトボックス背景 */
.lightbox {
  display: none; 
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

/* 拡大画像 */
.lightbox-content {
  display: block;
  margin: 5% auto;
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
}

/* 閉じるボタン */
.lightbox .close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

/* ===== 余談セクション ===== */
.trivia {
  background: rgba(255, 255, 255, 0.05); /* 薄いグレー寄りの青でコントラスト改善 */
  border-radius: 10px;
  padding: 1.2em;
  margin: 2em 0;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

.trivia h2 {
  color: #ffcc66; /* 黄色から青系に変更（視認性UP） */
  margin-top: 0;
  border-bottom: 1px solid rgba(100,180,255,0.4);
  padding-bottom: 0.2em;
}

.trivia ul {
  margin: 0;
  padding-left: 1.2em;
  list-style-type: disc; /* 箇条書きは● */
}

.trivia li {
  color: #e5f6ff;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

/* =========================================================
   メインコンテンツ余白
========================================================= */
main {
  padding: 1.5em 2em;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* =========================================================
   フッター
========================================================= */
footer {
  text-align: center;
  padding: 1em;
  background: #062b46;
  margin-top: 2em;
}

/* ===== 本文読みやすさ改善 ===== */

/* 見出しを水色で強調 */
main h2 {
  color: #00cfff; /* 明るいシアン */
  border-bottom: 1px solid rgba(0, 207, 255, 0.4);
  padding-bottom: 0.2em;
  margin-top: 1.5em;
}

/* 本文テキストは柔らかい白に */
main p {
  color: #d0e6f5; /* ほんのり青みのある白 */
  line-height: 1.7; /* 行間を広めに */
}

/* 白反転阻止 */
.cards img {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  background: none !important;
}

.card {
  background-color: #133b5c; /* 透過をやめて完全な色にする */
  box-sizing: border-box;
  overflow: hidden; /* 画像がカード外ににはみ出すのを防ぐ */
}

.card img {
  position: relative;
  z-index: 1; /* 背景より前に出す */
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ===== 「脅威と対処」見出しを赤色に ===== */
section.threat h2 {
  color: #e64b6f; /* 深紅：自然な警戒色 */
  border-bottom: 1px solid rgba(209, 75, 75, 0.4);
}

/* =========================
   全MOD生物一覧ページ
========================= */

.all-creatures-page {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* MODごとのセクション */
.mod-block {
  background-color: #ffffff;
  border: 2px solid #90e0ef;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
}

.mod-block h2 {
  border-left: 6px solid #0096c7;
  padding-left: 0.6rem;
  color: #023e8a;
  margin-top: 0;
}

.mod-block ul {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
}

.mod-block li {
  padding: 0.4rem 0;
  border-bottom: 1px solid #e0f7fa;
}
.mod-block li a {
  font-weight: bold;
  color: #0077b6;
}
.mod-block li a:hover {
  color: #00b4d8;
}

/* MODページリンク */
.mod-link {
  text-align: right;
  margin-top: 0.5rem;
}
.mod-link a {
  font-size: 0.9rem;
  color: #0096c7;
  text-decoration: underline;
}
.mod-link a:hover {
  color: #00b4d8;
}

/* 戻るリンク */
.return-links {
  text-align: center;
  margin-top: 2rem;
}
.return-links a {
  display: inline-block;
  margin: 0 0.5rem;
  padding: 0.4rem 0.8rem;
  background-color: #0096c7;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}
.return-links a:hover {
  background-color: #00b4d8;
}

/* =========================
   修正：生物カードサイズ調整
========================= */

/* De-ExtinctionなどのMODページ全体を中央寄せ＆最大幅制限 */
.mod-creature-list {
  max-width: 960px;
  margin: 0 auto;
}

/* 各カードの最大幅を制限してバランスを整える */
.creature-cards {
  justify-content: center;
}

.creature-card {
  max-width: 300px;
  margin: 0 auto;
}

/* 画像サイズをカード幅にフィットさせる */
.creature-card img {
  width: 100%;
  height: auto;      /* ← 高さ固定を解除 */
  aspect-ratio: 4 / 3; /* 横長比率を維持 */
  object-fit: cover;
  border-bottom: 2px solid #90e0ef;
}

/* スマホでも見やすい間隔調整 */
@media (max-width: 600px) {
  .creature-card {
    max-width: 90%;
  }
}

/* =========================
   De-Extinctionカードの横並び調整
========================= */

/* 親グリッドを中央寄せし、カードを2列に */
.creature-cards {
  display: flex;               /* ← グリッドからフレックスに変更 */
  justify-content: center;     /* 中央寄せ */
  gap: 1.5rem;                 /* カードの間隔 */
  flex-wrap: wrap;             /* 画面幅が狭いときは自動で縦に折り返す */
  margin-top: 1.5rem;
}

/* カード自体のサイズ */
.creature-card {
  width: 300px;                /* 固定幅で均等に並ぶ */
  max-width: 90vw;             /* スマホでの限界幅を設定 */
  background-color: #ffffff;
  border: 2px solid #90e0ef;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
  text-align: center;
}
.creature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

/* 画像とテキスト */
.creature-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 2px solid #90e0ef;
  border-radius: 10px 10px 0 0;
}
.creature-card h3 {
  margin: 0.6rem 0 0.3rem;
  color: #023e8a;
}
.creature-card p {
  font-size: 0.9rem;
  color: #333;
  padding: 0 1rem 1rem;
}

/* スマホ時は1列に戻す */
@media (max-width: 700px) {
  .creature-cards {
    flex-direction: column;
    align-items: center;
  }
}

/* =========================
   MOD個別ページカード調整（説明削除＋余白調整）
========================= */

/* キャプションを非表示 */
.creature-card p {
  display: none;
}

/* タイトル（h3）と画像の余白を詰める */
.creature-card {
  padding-bottom: 0.6rem; /* 下の余白を小さくする */
}

.creature-card h3 {
  margin: 0.4rem 0 0.3rem; /* タイトル上の隙間を軽く詰める */
}

/* 画像下のボーダーを細くしてスッキリさせる */
.creature-card img {
  border-bottom: 1px solid #90e0ef;
}

/* =========================
   各MOD紹介ページ（縦並び・シンプル版）
========================= */

.mod-list-vertical {
  max-width: 700px;          /* 全体の幅を広げる */
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* MODリンクカード（縦並び・シンプル） */
.mod-link-vertical {
  display: block;
  background-color: #ffffff;
  border: 2px solid #90e0ef;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  padding: 1.2rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}

.mod-link-vertical:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  background-color: #f8fcff;
}

.mod-link-vertical h2 {
  color: #023e8a;
  margin: 0 0 0.4rem 0;
}

.mod-link-vertical p {
  font-size: 0.95rem;
  color: #333;
  margin: 0;
  line-height: 1.6;
}

/* モバイル時（余白調整） */
@media (max-width: 600px) {
  .mod-list-vertical {
    max-width: 95%;
  }
}

/* ========================================
   全生物一覧カード（最終調整版）
======================================== */

/* カード一覧全体 */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ← ここで4枚固定！ */
  gap: 1.8rem;
  justify-items: center;
  margin-bottom: 2rem;
}

/* カード全体 */
.card {
  width: 280px;  /* 横幅を広げて元の印象に近づける */
  background-color: #fff;
  border: 2px solid #90e0ef;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  text-align: center;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  padding-bottom: 0.4rem; /* 「詳しく見る」削除分、縦の余白を詰める */
}

/* hoverでふわっと浮く */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  background-color: #f8fcff;
}

/* 画像 */
.card img {
  width: 100%;
  height: 170px; /* 縦を少し詰めてスリムに */
  object-fit: cover;
  border-bottom: 2px solid #90e0ef;
}

/* タイトル */
.card h3 {
  margin: 0.6rem 0 0.1rem;
  color: #023e8a;
  font-size: 1rem;
  line-height: 1.4;
}

/* リンク共通 */
.card a {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ========================================
   生物カードの縦幅を詰める（スリム版）
======================================== */

/* 全体 */
.card {
  width: 280px;
  background-color: #fff;
  border: 2px solid #90e0ef;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  text-align: center;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  padding-bottom: 0.1rem; /* ← ここをさらに詰める（以前は0.4rem） */
}

/* 画像 */
.card img {
  width: 100%;
  height: 165px; /* ← 5px詰める */
  object-fit: cover;
  border-bottom: 0px solid #90e0ef;
  box-shadow: 0 0 8px rgba(0,255,255,0.1);
}

/* タイトル */
.card h3 {
  margin: 0.5rem 0 1.0rem; /* ← 上下マージンをかなり詰める */
  color: #023e8a;
  font-size: 1.0rem;
  line-height: 1.3;
}

/* =========================
   MODセクション見出し装飾
========================= */

.mod-category {
  margin-bottom: 3rem;
}

.mod-category h2 {
  position: relative;
  font-size: 1.4rem;
  color: #0077b6;
  text-align: left;
  margin-bottom: 1.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 3px solid rgba(144, 224, 239, 0.6); /* 水色の下線 */
}

.mod-category h2::before {
  content: "◆";
  color: #90e0ef;
  margin-right: 0.4rem;
}

.related-mods {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.9rem;
}
.related-mods a {
  color: #0077b6;
  text-decoration: none;
  margin: 0 0.4rem;
}
.related-mods a:hover {
  text-decoration: underline;
}

/* ============================================
   PDAデータバンク：タイトル発光アニメ＋静止画像版
   ============================================ */

.pda-box {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(0, 40, 70, 0.9),
    rgba(0, 20, 40, 0.85)
  );
  border: 1px solid #00eaff;
  border-radius: 10px;
  box-shadow: 0 0 20px #00eaff55;
  padding: 1.5rem;
  margin: 2rem 0;
  font-family: "Consolas", "Courier New", monospace;
  color: #bdeaff;
}

/* ─ タイトル（発光＋点滅） ─ */
@keyframes titleGlow {
  0%, 100% {
    color: #00ffff;
    text-shadow:
      0 0 5px #00ffff88,
      0 0 12px #00ffff55;
  }
  50% {
    color: #aaffff;
    text-shadow:
      0 0 12px #00ffffaa,
      0 0 25px #00ffff66;
  }
}

.pda-box h2 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  animation: titleGlow 3s ease-in-out infinite; /* タイトルをゆっくり点滅 */
}

/* ─ 本文（水色） ─ */
.pda-box p,
.pda-box .pda-text p,
.pda-box li,
.pda-box strong,
.pda-box em {
  color: #bdeaff !important;
}

/* ─ 区切り線（透過シアン） ─ */
.pda-box hr {
  border: none;
  border-top: 1px solid #00eaff66;
  margin: 1rem 0;
}

/* ─ 出典・注釈（淡い発光） ─ */
.pda-box .source-note {
  color: #9fdcff;
  font-size: 0.85rem;
  opacity: 0.9;
}

/* ─ PDA画像（発光のみ・アニメなし） ─ */
.pda-box .pda-image img {
  display: block;
  margin: 1rem auto;
  max-width: 600px; /* ← 幅拡張 */
  border-radius: 6px;
  border: 1px solid #00eaff55;
  box-shadow:
    0 0 12px #00eaff66,
    0 0 24px #00eaff33;
  transition: transform 0.3s ease;
}

/* ===== タイトルをPDAノイズ風にチラつかせる ===== */
@keyframes glitchFlicker {
  0%, 100% {
    color: #00ffff;
    text-shadow:
      0 0 5px #00ffff88,
      0 0 12px #00ffff55;
    opacity: 1;
  }
  10% {
    opacity: 0.2;
    text-shadow: none;
  }
  12% {
    opacity: 1;
    text-shadow:
      0 0 10px #00ffffcc,
      0 0 18px #00ffff99;
  }
  14% {
    opacity: 0.3;
  }
  16% {
    opacity: 1;
  }
  60% {
    color: #aaffff;
    text-shadow:
      0 0 15px #00ffffaa,
      0 0 25px #00ffff66;
  }
  90% {
    opacity: 0.8;
  }
}

.pda-box h2 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  animation: glitchFlicker 3.5s infinite; /* チラつき速度 */
}

/* ============================================
   サイバー風ヘッダー（PDAデザイン統一・最終版）
   ============================================ */

header {
  text-align: center;
  padding: 2rem 0 1.5rem;
  border-bottom: 2px solid #00ffff33;
  /* 🔹グラデーションを明るめに戻す */
  background: linear-gradient(
    180deg,
    rgba(0, 40, 70, 0.9) 0%,
    rgba(0, 25, 45, 0.85) 100%
  );
  box-shadow: 0 0 20px #00ffff22;
  position: relative;
  overflow: hidden;
}

/* ===== 日本語タイトル（生物名） ===== */
header h1 {
  color: #00ffff;
  font-family: "M PLUS 1p", "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  letter-spacing: 1px;
  text-shadow: 0 0 10px #00ffff99, 0 0 20px #00ffff44;
  /* ✳ チラつき削除 */
}

/* ===== 英語サブタイトル ===== */
header .subtitle {
  font-family: "Orbitron", sans-serif;
  color: #bdeaff;
  font-size: 1.2rem; /* 🔹少し大きく調整 */
  margin-top: 0.3rem;
  opacity: 0.85;
  letter-spacing: 1px;
}

/* ===== ナビゲーション部分 ===== */
header nav {
  margin-top: 1rem;
}

header nav a {
  color: #bdeaff;
  margin: 0 0.8rem;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

header nav a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: #00eaff;
  transition: width 0.3s ease;
}

header nav a:hover {
  color: #00ffff;
}

header nav a:hover::after {
  width: 100%;
}

/* ===== 装飾的な光のライン演出 ===== */
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ffff55, transparent);
  animation: headerScanline 6s linear infinite;
}

@keyframes headerScanline {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(50%);
  }
}

.contact-form {
  background: rgba(0, 40, 70, 0.6);
  padding: 1.5rem;
  border-radius: 10px;
  max-width: 500px;
  margin: 1rem auto;
  box-shadow: 0 0 15px #00ffff33;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.3rem;
  border: 1px solid #00eaff66;
  border-radius: 5px;
  background-color: rgba(0, 20, 30, 0.8);
  color: #bdeaff;
  font-family: "M PLUS 1p", sans-serif;
}

.contact-form button {
  margin-top: 1rem;
  background: #00ffff;
  border: none;
  color: #002030;
  font-weight: bold;
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.contact-form button:hover {
  background: #33ffff;
}

/* ============================================
   💠 カード部分を常に黒系で固定（ライトモード対策）
============================================ */

/* 生物カード・MODカード共通 */
.creature-card,
.mod-card,
.card {
  background-color: #001018 !important;  /* 深い黒青 */
  color: #bdeaff;                        /* 明るい水色テキスト */
  border: 1px solid #00eaff33;
  box-shadow: 0 0 15px #00ffff22;
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* ホバー時にわずかに光る */
.creature-card:hover,
.mod-card:hover,
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 25px #00ffff44;
}

/* カード内リンクのテキスト色 */
.creature-card a,
.mod-card a {
  color: #bdeaff;
  text-decoration: none;
}

.creature-card a:hover,
.mod-card a:hover {
  color: #00ffff;
}

/* タイトル文字の調整（MOD名・生物名など） */
.creature-card h3,
.mod-card h3 {
  color: #00ffff;
  text-shadow: 0 0 8px #00ffff55;
}

/* ============================================
   💠 MOD一覧ページ：リンクカードを黒系で固定
============================================ */

/* MODリンク全体（横長カード） */
.mod-link-vertical {
  display: block;
  background-color: #001018; /* 深い黒青で固定 */
  color: #bdeaff;
  border: 1px solid #00eaff33;
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  margin: 1rem auto;
  max-width: 800px;
  text-decoration: none;
  box-shadow: 0 0 15px #00ffff22;
  transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ホバーで淡く発光 */
.mod-link-vertical:hover {
  transform: translateY(-4px);
  border-color: #00ffff66;
  box-shadow: 0 0 25px #00ffff44;
}

/* タイトル部分（MOD名） */
.mod-link-vertical h2 {
  color: #00ffff;
  font-family: "Orbitron", "M PLUS 1p", sans-serif;
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
  text-shadow: 0 0 8px #00ffff55;
}

/* 説明文 */
.mod-link-vertical p {
  color: #bdeaff;
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
}

/* ============================================
   💠 MODカードの横幅を統一
============================================ */

/* MODカード全体を中央揃えで統一幅に */
.mod-list-vertical {
  display: flex;
  flex-direction: column;
  align-items: center; /* ✅ 横方向を中央にそろえる */
  gap: 1.2rem; /* カード間の隙間 */
}

/* 各カード（幅を統一） */
.mod-link-vertical {
  display: block;
  width: 90%;        /* ✅ 画面幅に対して90%に統一 */
  max-width: 800px;  /* ✅ 上限を800pxに固定 */
  box-sizing: border-box;
}

/* ============================================
   💠 全生物一覧ページ：リンク下線削除＋文字明るく
============================================ */

/* カード全体のリンク（下線削除） */
.cards .card {
  text-decoration: none !important; /* ✅ 強制的に消す */
  color: inherit; /* ✅ 子要素の色設定を優先 */
}

/* 生物名タイトル */
.cards .card h3 {
  color: #a6f4ff; /* 少し明るめの水色 */
  text-shadow: 0 0 8px #00ffff66, 0 0 16px #00ffff44;
  font-family: "M PLUS 1p", "Noto Sans JP", sans-serif;
  font-size: 1rem;
  margin-top: 0.5rem;
  text-align: center;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* ホバー時（発光強め） */
.cards .card:hover h3 {
  color: #00ffff;
  text-shadow: 0 0 10px #00ffffaa, 0 0 22px #00ffff77;
}

/* ===== 全ページ共通のリンクカラー設定 ===== */
a {
  color: #66e0ff; /* 淡い水色（読みやすい） */
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #00ffff; /* ホバーで発光シアン */
  text-decoration: underline;
}

/* =============================================
   スマホ・タブレット対応（画面幅768px以下）
============================================= */
@media screen and (max-width: 768px) {

  /* 全体の余白を少し広く */
  body {
    padding: 1rem;
    font-size: 0.95rem;
  }

  /* 見出しを少し小さく */
  h1, h2 {
    font-size: 1.3rem;
    text-align: center;
  }

  /* ヘッダーのナビを縦並びに */
  header nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  header nav a {
    margin: 0.4rem 0;
    font-size: 1rem;
  }

  /* カード一覧（生物一覧・MOD一覧など）を1列に */
  .card-container, .mod-list-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .card, .mod-link-vertical {
    width: 90%;
    margin-bottom: 1rem;
  }

  /* メイン画像とキャプションの調整 */
  .main-image-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .img-caption-left {
    position: static;
    width: 90%;
    margin-top: 1rem;
    transform: none;
  }

  /* PDAボックスの画像サイズ調整 */
  .pda-image img {
    max-width: 100%;
    height: auto;
  }

  /* ギャラリー画像を縦に並べる */
  .gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .gallery figure {
    width: 90%;
    margin-bottom: 1.2rem;
  }
}

/* =============================================
   スマホ対応（全生物一覧カードの見切れ防止）
============================================= */
@media screen and (max-width: 768px) {

  /* 一覧全体：中央寄せ＋縦並び */
  .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  /* 各カード */
  .card {
    flex: 1 1 90%;       /* 幅を自動で90%に調整 */
    max-width: 400px;    /* 横幅の上限を指定 */
    margin: 0 auto;
  }

  /* カード内の画像 */
  .card img {
    width: 100%;
    height: auto;        /* 高さは比率維持 */
    object-fit: cover;
    border-radius: 6px;
  }
}
/* =========================================================
   サンビーム号通信イベント
========================================================= */
.sunbeam-event {
  background: rgba(0, 60, 80, 0.4); /* 青緑の半透明 */
  border-left: 4px solid #00e0ff;
  border-radius: 10px;
  padding: 1.5em;
  margin: 2em 0;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
}

.sunbeam-event h2 {
  color: #80f7ff;
  border-bottom: 1px solid rgba(128, 247, 255, 0.4);
  margin-bottom: 1em;
}

.sunbeam-event .dialogue p {
  color: #d0f6ff;
  line-height: 1.6;
  margin: 0.4em 0;
  font-family: "Noto Sans JP", sans-serif;
}

.sunbeam-event .dialogue strong {
  color: #8eefff; /* 話者名を明るいシアンで */
}

.sunbeam-event .sunbeam-image {
  text-align: center;
  margin-top: 1.5em;
}

.sunbeam-event .sunbeam-image img {
  max-width: 700px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}