/* 縦スワイプ自動再生フィード (genre-feed.html)。
   各問題を1画面分の <section class="feed-slide"> にし、コンテナ側の
   scroll-snap-type: y mandatory でスワイプ/縦スクロールが1問ずつ
   吸着するようにする。動画の自動再生・自動送りは feed.js が担当する。 */

/* ジャンルフィードはTikTok/Shorts型の全画面体験にするため、JS有効な
   閲覧者にはヘッダーとジャンル説明文(SEO/クローラー向けにHTML上は
   残す)を隠し、.feedがビューポート全体(100dvh)にぴったり収まる
   ようにする。隠さないと合計の高さがビューポートを超え、フィード
   本来のスクロールに入る前に外側のページスクロールが必要になる。 */
.js body.feed-page .site-header,
.js .feed-intro { display: none; }
.js body.feed-page .feed { margin-top: 0; }

.feed {
  max-width: 460px;
  margin: 18px auto 0;
  height: 100vh;
  height: 100dvh;
  max-height: 780px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  border-radius: var(--radius);
  background: var(--navy);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}

.feed-slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--text-on-navy);
}

.feed-media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #000;
  aspect-ratio: 9/16;
}
.feed-media .yt-player,
.feed-media iframe { width: 100%; height: 100%; border: 0; display: block; }


.feed-info {
  flex: 0 0 auto;
  padding: 14px 16px 18px;
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  overflow-y: auto;
  max-height: 42%;
}
.feed-kicker { color: var(--gold-bright); font-weight: 700; font-size: .78rem; margin: 0 0 4px; }
.feed-q { font-weight: 700; margin: 0 0 8px; line-height: 1.5; }
.feed-answer { color: var(--gold-bright); font-weight: 600; }
.feed-answer summary { cursor: pointer; color: var(--text-dim-on-navy); font-weight: 600; }
.feed-answer p { margin: 6px 0 0; color: var(--text-on-navy); font-weight: 400; font-size: .88rem; }
.feed-permalink { display: inline-block; margin-top: 8px; color: var(--gold-bright); font-size: .82rem; }

/* 選択肢(A-D)。フィード(紺背景)でも問題単独ページ(明るい背景)でも
   同じ見た目になるよう、カード背景/枠線/文字色は変数で統一する。
   正誤の色(correct/wrong)だけ両方の背景で読めるよう白文字固定にする。 */
.options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
}
.opt-btn {
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: .88rem;
  line-height: 1.35;
}
.opt-btn:disabled { cursor: default; opacity: .95; }
.opt-btn.correct { background: var(--ok); border-color: var(--ok); color: #fff; }
.opt-btn.wrong { background: var(--danger); border-color: var(--danger); color: #fff; }

/* 最初の1問目だけ表示するスワイプ誘導ヒント。数秒後 or 一度スクロール
   したら消え、以後はlocalStorageで二度と出さない(feed.js側で制御)。
   .feed-media は position:relative なので、その中に絶対配置すれば
   1問目のスライドが画面外へ流れるのと一緒に自然に見えなくなる。 */
.swipe-hint {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: hint-fade-in .4s ease .6s forwards;
  transition: opacity .3s ease;
}
.swipe-hint.hint-hidden { opacity: 0 !important; }
.swipe-hint .hint-icon { font-size: 1.5rem; animation: hint-bounce 1.1s ease-in-out infinite; }
@keyframes hint-fade-in { to { opacity: 1; } }
@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* キャラクター用タイル。ジャンルタイルの絵文字の代わりに、そのキャラの
   代表カットを丸くトリミングして使う(20人を絵文字だけで区別するのは
   無理があるため)。 */
.cat-tile .avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 4px; display: block;
}

.mute-toggle {
  display: block;
  margin: 10px auto 0;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
}
.mute-toggle.unmuted::before { content: "🔊 "; }

@media (max-width: 640px) {
  .feed { max-width: 100%; margin: 12px 0 0; border-radius: 0; }
}