/* style.css */

/* Google Fonts - Orbitron (SF風のモダンなフォント), Noto Sans JP (読みやすい日本語フォント) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap');

/* 全体の基本設定 */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box; /* パディングやボーダーを幅に含める */
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* 複数色のグラデーション背景をよりダイナミックに */
  background: linear-gradient(135deg, #1A0D3B, #3B0D4B, #0D1A3B); /* 深いパープルからブルーへのグラデ */
  color: #E0E0E0; /* 全体の文字色 */
  font-family: 'Noto Sans JP', sans-serif; /* 日本語は読みやすく */
  overflow: hidden; /* スクロールバーを非表示にする */
  line-height: 1.6;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.3); /* 全体に控えめなネオン効果 */
}

/* ヘッダーとフッター */
header, footer {
  height: 70px; /* 少し高さを出す */
  background: rgba(30, 10, 60, 0.7); /* 半透明で深みのある背景 */
  backdrop-filter: blur(8px); /* フロストガラス効果を強く */
  border-bottom: 1px solid rgba(0, 255, 255, 0.2); /* アクセントカラーの細いボーダー */
  display: flex;
  align-items: center;
  padding: 0 2rem; /* パディングを増やす */
  justify-content: space-between;
  font-size: 1.1rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6); /* 強いシャドウ */
  z-index: 10; /* 最前面に表示 */
  position: relative; /* z-indexを有効にするため */
}

footer {
  justify-content: center;
  font-size: 1.4rem; /* さらに大きく */
  color: #B0B0B0;
  letter-spacing: 0.1em; /* 文字間隔を広げる */
  cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease, transform 0.2s ease;
  border-top: 1px solid rgba(0, 255, 255, 0.2); /* 上にもボーダー */
  border-bottom: none; /* 下のボーダーは不要 */
}

footer:hover {
  background: rgba(50, 15, 80, 0.8);
  color: #00FFFF; /* ホバーで鮮やかなシアンに */
  transform: translateY(-3px); /* 少し浮き上がる */
}

/* スライドコンテナ (Swiperの親コンテナ) */
.swiper {
  width: 100%;
  height: calc(100% - 140px); /* ヘッダー・フッターの高さに合わせて調整 */
  padding: 0 30px; /* 左右に30pxの余白を追加 */
  box-sizing: border-box; /* パディングをwidth内に含めるようにする */
}

/* 各スライド (単語が表示される部分) */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  user-select: none;
  cursor: pointer;
  padding: 2.5rem;
  box-sizing: border-box;
  flex-shrink: 0;
  background: linear-gradient(160deg, #301050, #150530); /* スライドのグラデーション背景 */
  border-radius: 25px; /* 角丸をさらに大きく */
  
  /* ★修正点★ border を完全に削除します。枠として認識されている可能性が高いです。 */
  border: none; 
  /* box-shadow を調整して、ボーダーがなくても立体感とネオン効果を維持します。 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(0, 255, 255, 0.4); /* 外側と内側にネオン影 */
  
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.4s ease; /* 弾むようなアニメーション */
}

.swiper-slide:hover {
  transform: scale(1.03); /* ホバーで少し拡大 */
  /* ホバー時の影をさらに強化します。 */
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), inset 0 0 25px #FF00FF; /* ホバーで強烈なネオンシャドウ */
  /* border-color は border が無いので不要になりますが、念のため削除 */
  /* border-color: #FF00FF; */ 
}

/* 単語を表示する要素 */
.word {
  pointer-events: none; /* クリックイベントが単語自体ではなくスライドに伝わるようにする */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 1.2;
  word-wrap: break-word; /* 長い単語の改行 */
  word-break: break-word; /* 単語の途中で改行を許可 */
  color: #fff; /* 白い文字色 */
  font-family: 'Orbitron', sans-serif; /* SF風フォントを適用 */
  
  /* ネオン効果と同時に、線状に見えないように調整 */
  text-shadow: 
    0 0 8px #00FFFF,   /* 最初の影（少しぼかす）*/
    0 0 15px #00FFFF,  /* 2番目の影（もう少しぼかす）*/
    0 0 25px rgba(0, 255, 255, 0.6); /* 3番目の影（さらにぼかす）*/
  
  transition: color 0.3s ease, text-shadow 0.3s ease;

  /* 文字サイズを画面幅に連動させる */
  font-size: clamp(3rem, 10vw, 6rem); /* 最小3rem, 理想10vw, 最大6rem */
}

/* トグルスイッチのコンテナ */
.toggle-container {
  display: flex;
  align-items: center;
  gap: 1rem; /* 間隔をさらに広げる */
  font-size: 1rem;
  color: #E0E0E0;
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

/* トグルスイッチ本体 */
.toggle-switch {
  width: 60px; /* 幅をさらに広く */
  height: 30px; /* 高さを高く */
  background: #333; /* オフの状態の色 */
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: background 0.4s ease, box-shadow 0.4s ease;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7); /* 凹み感を強く */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* トグルスイッチの丸いつまみ */
.toggle-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px; /* サイズ調整 */
  height: 24px;
  background: #B0B0B0; /* スイッチの色 */
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), background 0.4s ease; /* 弾むようなアニメーション */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* トグルスイッチがアクティブな状態 */
.toggle-switch.active {
  background: #00FFFF; /* アクティブ時に鮮やかなシアンに */
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7), 0 0 15px #00FFFF; /* ネオンシャドウを追加 */
}

.toggle-switch.active::before {
  transform: translateX(30px); /* スライド距離調整 */
  background: #FF00FF; /* アクティブ時のスイッチの色をフューシャに */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 10px #FF00FF; /* ネオンシャドウを追加 */
}

/* カテゴリ情報のコンテナ */
.category-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1rem;
}

/* カテゴリ名 */
#category-name {
  font-size: 1.4rem; /* カテゴリ名を大きく */
  font-weight: bold;
  color: #FFFFFF;
  font-family: 'Orbitron', sans-serif; /* SF風フォントを適用 */
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5); /* ネオンエフェクト */
}

/* 単語カウンター */
.word-counter {
  font-size: 0.9rem;
  color: #999;
  margin-top: 5px;
  text-shadow: none; /* カウンターのネオンは弱め */
}

/* メニュー画面 (カテゴリ選択画面) */
#menu-screen {
  background: #1A0D3B; /* 背景色を全体に合わせる */
  padding: 2rem; /* パディングを増やす */
  box-sizing: border-box;
  gap: 1.5rem; /* メニュータイルの間隔を広げる */
}

/* 各メニュータイル */
#menu-screen > div {
  background: linear-gradient(135deg, #301050, #150530); /* メニュータイルのグラデーション */
  color: #E0E0E0;
  border-radius: 18px; /* 角丸を調整 */
  padding: 2rem;
  /* flexboxを使って内容を中央揃えにする */
  display: flex; /* flexコンテナにする */
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); /* 強めのシャドウ */
  border: 1px solid rgba(0, 255, 255, 0.3); /* 薄いネオンボーダー */
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  font-weight: bold;
  font-family: 'Orbitron', sans-serif; /* SF風フォントを適用 */
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

#menu-screen > div:hover {
  background: linear-gradient(135deg, #401560, #200840); /* ホバー時のグラデーション */
  transform: translateY(-8px) scale(1.02); /* 大きく浮き上がり、わずかに拡大 */
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.5), 0 0 25px #FF00FF; /* ホバーで強烈なネオンシャドウ */
  border-color: #FF00FF; /* ホバーでフューシャに */
}