/* ページ全体のスタイル */
body {
  margin: 0;
  background-color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #eeeeee;
  overflow: hidden;
}
/* カード全体のコンテナ */
#card-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: #eeeeee;
}
/* 動画プレーヤーのラッパー */
#player-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}
/* YouTubeプレーヤー本体 */
#player, #player iframe {
  width: 100%;
  height: 100%;
}
/* 字幕と操作ボタンの余白エリア */
#content-area {
  padding: 24px 60px;
  color: #111;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 操作ボタン全体のエリア */
#controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}
/* ボタンのスタイル */
.left-controls, .right-controls { display: flex; align-items: center; gap: 12px; }
#controls button {
  background-color: #dddddd;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
/* スマホでのタップ時に一瞬だけ色が変わるように設定 */
#controls button:active {
  background-color: #cccccc;
}
/* PCなどマウス操作の時だけホバーエフェクトを適用 */
@media (hover: hover) {
  #controls button:hover {
    background-color: #cccccc;
  }
}
/* ループボタンがONの時のスタイル */
#loop-btn.active {
  background-color: #FFFFFF;
}
/* ONのボタンはホバーしても色が変わらないようにする設定 */
@media (hover: hover) {
  #loop-btn.active:hover {
    background-color: #FFFFFF;
  }
}
#speed-btn { border-radius: 50%; }
/* 右側のモード切り替えボタン */
#controls #mode-btn {
  width: 80px;
  height: 40px;
  line-height: 1.2;
  color: #111;
  text-align: center;
  font-weight: 600;
}
/* 文字サイズを調整するボタンを指定 */
#controls #speed-btn, #controls #rewind-btn, #controls #mode-btn {
  font-size: 12px;
}
/* 字幕表示エリア */
#transcript {
  position: relative;
  flex-grow: 1;
  overflow-y: auto;
}
/* 英語と日本語字幕の共通スタイル */
#sub-en, #sub-jp {
  position: absolute;
  left: 0;
  right: 0;
  text-align: left;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  white-space: pre-wrap;
}
/* 英語字幕のスタイルと位置 */
#sub-en {
  top: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #111;
}
/* 日本語字幕のスタイルと位置 */
#sub-jp {
  top: calc(1.2rem * 1.6 * 4);
  font-size: 1rem;
  color: #666;
}
/* --- レスポンシブ対応 --- */
@media (min-width: 768px) {
  #card-container {
    max-width: 640px;
  }
}
@media (max-width: 767px) {
  #content-area {
    padding: 16px 32px;
  }
  #controls {
    margin-bottom: 16px;
  }
  #sub-en {
    font-size: 1.3rem;
  }
  #sub-jp {
    font-size: 1.1rem;
    top: calc(1.3rem * 1.6 * 4); 
  }
}
#citation-text {
  font-size: 0.3em;
  color: #cccccc;
  text-align: left;
  padding-top: 1em;
  flex-shrink: 0;
}
#citation-text a {
  color: #cccccc;
}