/* ============================================================
   大会ページ専用: YouTube ステージ／タイトルブロック／LINEUP カルーセル／ルーレット
   出典: staging/rookie_hub_mock_v2/css/_new.css（2026-09-04 モック確定版）
   色は base.css のトークン（--pop --tealband --aqua2 --lemon --ink2 --font-pop --font-ui）のみ使う。
   ============================================================ */

/* ============================================================
   大会ページ ヒーロー動画（.hero-stage 直下の <video>。event.hero_video があれば集合ビジュアルの代わりに再生）
   ============================================================ */
.hero-stage .hero-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.hero-stage .hero-video[hidden], .hero-stage .group-img[hidden] { display: none; }

/* ============================================================
   大会ページ: YouTube ステージ ＋ タイトルブロック
   ============================================================ */
.hero-stage { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: #000; overflow: hidden; }
.hero-stage--yt { height: min(56.25vw, 78vh); }
.hero-stage .group-img { display: block; width: 100%; height: auto; }
.hero-stage .group-img[hidden] { display: none; }
.hero-yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hero-yt__sound {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  padding: 6px 12px; border-radius: 999px; border: 2px solid #fff; background: rgba(0,0,0,.55); color: #fff;
  font-family: var(--font-pop); font-weight: 900; font-size: 11.5px; cursor: pointer;
}
.hero-yt__sound[aria-pressed="true"] { background: var(--lemon); color: var(--ink2); border-color: var(--ink2); }
.hero-yt__sound:focus-visible { outline: 3px solid var(--lemon); outline-offset: 2px; }
.hero-pjcs--yt { background: #fff; padding-top: clamp(20px, 3.2vw, 44px); } /* 動画の上に余白（運営指摘 2026-09-14: ヘッダー直下に密着して窮屈） */
.hero-title {
  max-width: 1120px; margin: 0 auto; text-align: left;
  display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px clamp(18px,3vw,36px);
  padding: clamp(16px,2.6vw,28px) clamp(18px,3vw,36px) clamp(22px,3.4vw,40px);
}
.hero-title__logo { display: block; width: auto; height: clamp(72px, 8vw, 96px); filter: drop-shadow(0 4px 0 color-mix(in srgb, var(--ink2) 20%, transparent)); }
.hero-title__body { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.hero-title__body h1 { margin: 0; }
.hero-title__body .hero-lead { margin: 0; }
.hero-title .date-wrap { margin-top: 10px; }
.hero-title .date-pill { margin-top: 0; }
@media (max-width: 640px) {
  .hero-title { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero-title__body { justify-items: center; }
  .hero-title__logo { height: 72px; }
}

/* ============================================================
   大会ページ NOW セクション（開催ステータスのバッジ列）
   ============================================================ */
.now-badges { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   大会ページ LINEUP カルーセル（横スクロール・スナップ・自動スライド）／「一覧で見る」でグリッドへ
   ============================================================ */
.lineup-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lineup-head .section-head--inline { margin-bottom: 0; }
.lineup-wrap { position: relative; margin-top: 22px; }
.lineup-wrap[hidden], .cast-grid[hidden] { display: none; }
.lineup-track {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  /* 上下の余白はルーレット確定時の拡大（scale 1.06）＋リング 4px＋光 28px が overflow-y:hidden で切れないための
     クリップ領域確保（運営指摘 2026-09-11「大きくなる時、枠に収まって見切れる」）。見た目の位置は負のマージンで
     従来の 6px / 12px のまま */
  padding: 54px 4px 60px; margin: -48px 0 -48px; scrollbar-width: none;
}
.lineup-track::-webkit-scrollbar { display: none; }
.lineup-track:focus-visible { outline: 3px solid var(--tealband); outline-offset: 4px; border-radius: 12px; }
.lineup-track .cast-card { flex: 0 0 260px; scroll-snap-align: start; min-height: 0; }
@media (max-width: 640px) { .lineup-track .cast-card { flex-basis: 72vw; } .lineup-track { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .lineup-track { scroll-behavior: auto; } }
.lineup-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--pop); background: #fff; color: var(--pop);
  font-family: var(--font-ui); font-size: 22px; font-weight: 900; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--ink2) 22%, transparent); display: grid; place-items: center;
}
.lineup-nav:hover { background: var(--lemon); }
.lineup-nav:focus-visible { outline: 3px solid var(--tealband); outline-offset: 2px; }
.lineup-nav--prev { left: 0; } .lineup-nav--next { right: 0; }
@media (min-width: 901px) { .lineup-wrap { padding: 0 56px; } }
@media (max-width: 900px) { .lineup-nav { display: none; } }
.lineup-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; font-family: var(--font-pop); font-weight: 900; font-size: 12.5px; color: var(--ink2); }
.lineup-status .cnt { font-variant-numeric: tabular-nums; padding: 3px 12px; border-radius: 999px; background: #fff; border: 2px solid var(--aqua2); }
.lineup-dots { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 70%; }
.lineup-dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--pop) 28%, #fff); }
.lineup-dots i.is-on { background: var(--pop); }
@media (max-width: 640px) { .lineup-dots { display: none; } }

/* ============================================================
   大会ページ末尾: ポータルへの導線（ABOUT本文は置かない）／NOWセクションのステータス表示
   出典: portal.css（レビュー指摘で移設。大会ページはportal.cssを読み込まないため無効な
   CSSとして取り残されていた。.v-portal-cueはポータル（/）自体では未使用）
   ============================================================ */
.v-portal-cue {
  max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px,3vw,36px) clamp(24px,4vw,40px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.v-portal-cue p { margin: 0; font-family: var(--font-pop); font-weight: 900; font-size: 13.5px; color: var(--ink2); }
.v-portal-cue .links { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-pjcs { border-bottom: 3px solid var(--aqua2); }
.status-stamp { background: var(--green); color: var(--ink2); border-color: var(--ink2); }

/* ルーレット演出: 止まったカードを強調・他は暗く */
.lineup-track.is-roulette .cast-card { transition: filter .35s ease, transform .35s ease, box-shadow .35s ease; }
.lineup-track.is-roulette .cast-card.is-picked { transform: scale(1.06); box-shadow: 0 0 0 4px var(--lemon), 0 0 28px 6px color-mix(in srgb, var(--lemon) 80%, transparent); z-index: 2; background: #fff; }
.lineup-track.is-roulette .cast-card:not(.is-picked) { filter: brightness(.6) saturate(.7); }
.lineup-track.is-roulette .cast-card:hover { transform: none; }
.lineup-track.is-roulette .cast-card.is-picked:hover { transform: scale(1.06); }
#randomCastBtn[disabled] { opacity: .6; cursor: progress; }