/* ===============================
   トップページ専用スタイル
   =============================== */
.home-page {
  text-align: center;
  overflow-x: hidden;
}

/* セクション基本 */
.home-page main {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* 「最近追加された生物」カード */
.home-page .creature-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.home-page .card {
  background: rgba(0, 40, 60, 0.8);
  border: 1px solid #00eaff;
  border-radius: 10px;
  width: 250px;
  box-shadow: 0 0 10px #00eaff55;
  transition: transform 0.2s ease;
}

.home-page .card:hover {
  transform: scale(1.05);
}

.home-page .card img {
  width: 100%;
  border-bottom: 1px solid #00eaff55;
  border-radius: 10px 10px 0 0;
}

.home-page .card h3 {
  color: #7ee3ff;
  padding: 0.5rem;
}

/* 波アニメーション */
.home-page .wave {
  position: relative;
  width: 100%;
  height: 80px;
  overflow: hidden;
  margin-top: 3rem;
}

.home-page .wave-layer {
  position: absolute;
  width: 200%;
  height: 100%;
  background: rgba(0, 170, 255, 0.1);
  border-radius: 100%;
  animation: waveMove 8s linear infinite;
}

.home-page .wave-layer:nth-child(2) {
  background: rgba(0, 170, 255, 0.15);
  animation-delay: -4s;
}

@keyframes waveMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===============================
   MOD紹介カード（画像なしバージョン）
   =============================== */
.home-page .featured-mods {
  margin-top: 3rem;
}

.home-page .mod-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
}

.home-page .mod-cards .card {
  background: rgba(0, 40, 60, 0.85);
  border: 1px solid #00eaff;
  border-radius: 12px;
  width: 270px;
  padding: 1.2rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 12px #00eaff40;
}

.home-page .mod-cards .card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #00eaff66;
}

.home-page .mod-cards .card a {
  color: inherit;
  text-decoration: none;
}

.home-page .mod-cards .card h3 {
  color: #7ee3ff;
  font-size: 1.4rem; /* 🔹タイトルを大きく強調 */
  margin-bottom: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.home-page .mod-cards .card p {
  color: #d0f7ff;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ===============================
   PDAスキャンメッセージ
   =============================== */
.home-page .pda-scan {
  text-align: center;
  font-family: "Consolas", "Courier New", monospace;
  background: rgba(0, 40, 60, 0.7);
  border: 1px solid #00eaff80;
  border-radius: 10px;
  display: inline-block;
  padding: 0.6rem 1rem;
  margin: 1rem auto 1.5rem;
  box-shadow: 0 0 15px #00eaff55;
  animation: scan-flicker 3s infinite;
}

/* ✅ pタグとstrongの両方に色を強制 */
.home-page .pda-scan p,
.home-page .pda-scan strong {
  color: #b5f3ff !important; /* ← この1行が重要 */
}

@keyframes scan-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.home-page .creature-cards .card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
}

.home-page .creature-cards .card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #00eaff66;
}