/* public/css/portal.css — ポータル（/）専用スタイル。
   出典: staging/rookie_hub_mock_v2/css/_new.css:158-316・:387-435（モックの正・確定済み）を
   ほぼ忠実に移植。var(--mockbar-h, 0px) はこの範囲に出現しない（モックの操作バー専用のため）。
   #fff/#ffffff 以外の直値hexは #000（X）と #ff0000（YouTube）のみで、いずれもブランド公式色
   （base.cssの.button--x等も同様に直値のまま扱っている）。--black は var(--pop)＝緑にマップされて
   おり変換すると誤色になるため、意図的にトークン化していない。 */

/* ============================================================
   ★ポータルヒーロー（第2版＝2回目の更新の復元）: 全面背景スライド＋案A フィルタ（一段軽く）
   ＋下部中央にロゴ → コピー → 「ROOKIE CHALLENGE 毎月開催」→ 日程バンド位置に NEXT。紺帯なし
   ============================================================ */
.p-hero { position: relative; background: var(--ink2); border-bottom: 3px solid var(--pop); }
.p-hero__stage { position: relative; overflow: hidden; width: 100%; height: min(56.25vw, 78vh, 760px); background: var(--ink2); }
.p-hero__slides { position: absolute; inset: 0; }
.p-hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1.1s ease; }
.p-hero__slide.is-on { opacity: 1; }
/* 開催中ビューと同じ濃さに統一（2026-09-03）: 彩度/明度フィルタ無し・全面/上端のかぶせ無し・下半分のみ ink2 0→75% */
.p-hero--filter .p-hero__slide { filter: none; }
.p-hero--filter .p-hero__scrim {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--ink2) 75%, transparent) 100%);
}
.p-hero__scrim { display: none; }
/* 重ね文言: 大会ページの logo-overlay（下部中央ロゴ）+ hero-date（リード・タイトル・日程バンド）に相当 */
.p-hero__over {
  position: absolute; inset: 0; display: grid; align-content: end; justify-items: center; gap: 6px;
  padding: 0 16px clamp(18px, 3.2vw, 36px); text-align: center; color: #fff; pointer-events: none;
}
.p-hero__over > * { pointer-events: auto; }
.p-hero__over img { display: block; width: clamp(200px, 30vw, 400px); height: auto; filter: drop-shadow(0 5px 0 color-mix(in srgb, var(--ink2) 55%, transparent)); margin-bottom: 4px; }
.p-hero__lead {
  margin: 0; font-family: var(--font-pop); font-weight: 900; font-size: clamp(12px, 1.9vw, 20px); line-height: 1.5;
  color: #fff; text-shadow: 0 2px 0 color-mix(in srgb, var(--ink2) 70%, transparent), 0 0 18px color-mix(in srgb, var(--ink2) 60%, transparent);
}
.p-hero__en {
  margin: 0; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-display); font-size: clamp(20px, 3.4vw, 40px); line-height: .95; letter-spacing: .01em; text-transform: uppercase;
  color: var(--lemon); text-shadow: 0 3px 0 color-mix(in srgb, var(--ink2) 65%, transparent);
}
.p-hero__en small { font-family: var(--font-pop); font-size: clamp(11px, 1.3vw, 15px); letter-spacing: .1em; color: var(--ink2); background: var(--lemon); border-radius: 999px; padding: 4px 12px; text-shadow: none; }
.p-hero__next {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
  padding: 10px 24px; border-radius: 18px; background: var(--pop); color: #fff;
  font-family: var(--font-pop); font-weight: 900; font-size: clamp(14px, 2.4vw, 26px); letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--ink2) 45%, transparent);
}
.p-hero__next b { font-family: var(--font-display); font-weight: 400; font-size: 1.1em; letter-spacing: .04em; }
.p-hero__next small { font-size: .6em; opacity: .9; }
.p-hero__cap {
  position: absolute; top: 3.5%; right: 3%; padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink2) 72%, transparent); color: #fff;
  font-family: var(--font-pop); font-weight: 900; font-size: clamp(10px, 1.2vw, 13px); letter-spacing: .06em;
}
.p-hero__dots { position: absolute; left: 3%; bottom: 3.5%; display: flex; gap: 5px; }
.p-hero__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); }
.p-hero__dots i.is-on { background: var(--lemon); }
/* ヒーロー右下の BackStage ロゴ（ユーザー要望 2026-09-05: スライドの右下に「BackStage 製」と分かるロゴ）。
   ドット（左下）と対になる位置。半透明の白地に載せてどのフライヤーの上でも読めるようにする */
.p-hero__brand {
  position: absolute; right: 3%; bottom: 3.5%; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px 5px 13px; border-radius: 999px; /* 左右を揃える（左を右より 1px 広く取ると視覚的に均等） */
  background: rgba(255,255,255,.88); text-decoration: none; color: var(--ink2);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink2) 25%, transparent);
  transition: transform 180ms ease;
}
.p-hero__brand-by { font-family: var(--font-ui); font-weight: 800; font-size: clamp(9px, 1vw, 11px); letter-spacing: .05em; color: var(--ink-muted); white-space: nowrap; line-height: 1; }
.p-hero__brand img { display: block; width: auto; height: clamp(20px, 2.7vw, 30px); }
.p-hero__brand:hover { transform: translateY(-2px); }
.p-hero__brand:focus-visible { outline: 3px solid var(--lemon); outline-offset: 2px; }
@media (max-width: 480px) { .p-hero__brand { padding: 4px 8px; } .p-hero__brand-by { display: none; } .p-hero__brand img { height: 20px; } }
@media (prefers-reduced-motion: reduce) { .p-hero__brand { transition: none; } }
/* 開催中: 集合ビジュアル固定（フィルター無し）。CTA は従属（白い小ピル） */
.p-hero--live .p-hero__slide { filter: none; }
.p-hero--live .p-hero__scrim { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--ink2) 75%, transparent) 100%); }
.p-hero__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 16px;
  border-radius: 999px; background: #fff; color: var(--ink2); border: 2px solid var(--ink2);
  font-family: var(--font-pop); font-weight: 900; font-size: clamp(12px, 1.4vw, 15px); white-space: nowrap;
  transition: transform 180ms ease;
}
.p-hero__cta:hover { transform: translateY(-3px); }
.p-hero__cta .status-dot { background: var(--coral); border-color: var(--ink2); }
/* 開催中バー（ヘッダー直下・1行・タップで大会ページ） */
.p-livebar {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  min-height: 46px; padding: 8px 14px; background: var(--coral); color: #fff; border-bottom: 3px solid var(--ink2);
  font-family: var(--font-pop); font-weight: 900; font-size: clamp(13px, 1.6vw, 17px); text-decoration: none;
}
.p-livebar .status-dot { background: #fff; border-color: #fff; }
.p-livebar b { font-family: var(--font-display); font-weight: 400; font-size: 1.15em; letter-spacing: .04em; }
.p-livebar .go { padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--coral); font-size: .85em; }
.p-livebar:hover .go { background: var(--lemon); color: var(--ink2); }
@media (max-width: 640px) {
  .p-hero__stage { height: min(118vw, 560px); }
  .p-hero__over { gap: 4px; padding-bottom: 14px; }
  .p-hero__over img { width: min(56vw, 230px); }
  .p-hero__lead { font-size: 12px; }
  .p-hero__next { font-size: 14px; padding: 8px 16px; }
}
@media (prefers-reduced-motion: reduce) { .p-hero__slide { transition: none; } }

/* ============================================================
   ★ポータル ABOUT（2段: ルキチャレとは / BackStageとは）
   ============================================================ */
.p-about { max-width: 1120px; margin: 0 auto; padding: clamp(26px,4vw,48px) clamp(18px,3vw,36px) 8px; display: grid; gap: 16px; }
.p-about__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .p-about__grid { grid-template-columns: 1fr; } }
.p-card { border: 3px solid var(--aqua2); border-radius: 22px; background: #fff; padding: clamp(18px,3vw,30px); display: grid; gap: 12px; align-content: start; }
.p-card__eyebrow { margin: 0; font-family: var(--font-ui); font-size: 11px; font-weight: 900; letter-spacing: .16em; color: var(--teal-text); }
.p-card h2 { margin: 0; font-family: var(--font-pop); font-weight: 900; font-size: clamp(22px,2.8vw,30px); line-height: 1.25; color: var(--pop); text-wrap: balance; }
.p-card p { margin: 0; font-family: var(--font-ja); font-weight: 700; font-size: 13.5px; line-height: 1.9; color: var(--ink2); max-width: 60ch; }
.p-card p b { color: var(--pop); font-weight: 900; }
.p-card .bn-facts { justify-content: flex-start; margin-top: 2px; }
/* 経験値レベル制の説明（Lv.1〜100・10帯・MAXはLv.100。色は levels.js の LV_COLORS を帯単位で使用） */
/* .p-lv（Lv ラダー）のスタイルは base.css へ移動（大会ページの概要カードと共用・2026-09-14） */
/* BACK NUMBERS: ポータルでは ABOUT の下に独立セクションとして置く */
.bn-band--portal { border-top: none; background: transparent; padding-top: 8px; }
/* 「一覧で見る」は右端に置く（運営指示 2026-09-15: スマホで親指が届く位置に）。狭幅で折り返しても右寄せを保つ */
.bn-band--portal .bn-band__head { justify-content: space-between; align-items: flex-end; }
.bn-band--portal .bn-band__head .bn-listbtn { margin-left: auto; }
@media (max-width: 640px) {
  /* スマホ: 1 行目に見出し、2 行目に「過去の開催 ─ …」（左）と「一覧で見る」（右）を並べる（運営指示 2026-09-15） */
  .bn-band--portal .bn-band__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px; }
  .bn-band--portal .bn-band__head .bn-head-left { display: contents; }
  .bn-band--portal .bn-band__head h2 { grid-column: 1 / -1; }
  .bn-band--portal .bn-band__head p { grid-column: 1; margin: 0; }
  .bn-band--portal .bn-band__head .bn-listbtn { grid-column: 2; grid-row: 2; margin: 0; flex: 0 0 auto; }
}
.bn-band--portal .bn-band__head h2 {
  margin: 0; font-family: var(--font-pop); font-weight: 900; font-size: clamp(26px,4vw,44px); color: var(--pop); line-height: 1;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
}
.bn-band--portal .bn-band__head p { margin: 0 0 4px; width: fit-content; padding: 6px 10px; border-radius: 999px; background: var(--tealband); color: #fff; font-family: var(--font-pop); font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.bn-card { background: #fff; }
.bn-card .rec--main b { font-size: 22px; }
.bn-card .link-kind {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 7px;
  padding: 2px 9px; border-radius: 999px; font-family: var(--font-pop); font-size: 10px; font-weight: 900;
  border: 1.5px solid var(--pop); color: var(--pop); background: #fff;
}
.bn-card .link-kind--x { border-color: #000; color: #fff; background: #000; } /* X公式色。トークン化しない（--blackはvar(--pop)=緑） */
.bn-card .link-kind--rec { border-color: var(--ink-muted); color: var(--ink-muted); }
.bn-card .link-kind svg { width: 10px; height: 10px; fill: currentColor; }

/* フッター（アイコン付きリンク・ストアバッジ・BackStageロゴ）は base.css へ一本化した
   （コントローラ指摘: 大会ページがportal.cssを読まずロゴが原寸巨大表示になっていたため）。
   portal.css固有の追加ルールは無い（base.cssの定義がそのままポータルにも適用される）。 */

/* ============================================================
   ★大会ページ末尾: ポータルへの導線（ABOUT本文は置かない）
   ポータル（/）自体では未使用（大会ページのクラスは持たない）。
   .v-portal-cue／.hero-pjcs（大会ページの上書き）／.status-stamp は大会ページ専用の
   ため carousel.css へ移設した（レビュー指摘: portal.css は大会ページに読み込まれず、
   これらが無効なCSSとして取り残されていた）。.bn-listbtn は本ページ（BACK NUMBERS）と
   大会ページ（LINEUPの「一覧で見る」）の双方が使うため base.css へ移設した。
   ============================================================ */
.group-stage { background: #fff; }

/* ============================================================
   ★BACK NUMBERS 一覧表示（横流し ⇄ 縦一覧）
   ============================================================ */
.bn-band__head { justify-content: space-between; }
.bn-band__head .bn-head-left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.bn-viewport[hidden], .bn-list[hidden] { display: none; }
.bn-list { max-width: 1120px; margin: 4px auto 0; padding: 0 clamp(18px,3vw,36px); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; list-style: none; }
@media (max-width: 760px) { .bn-list { grid-template-columns: 1fr; padding: 0 10px; } }
.bn-row {
  display: grid; grid-template-columns: 128px minmax(0,1fr) auto; align-items: center; gap: 12px;
  border: 2px solid var(--aqua2); border-radius: 14px; background: #fff; padding: 8px 12px 8px 8px; color: var(--ink2);
  border-left: 8px solid var(--vol-accent, var(--aqua2)); transition: transform 180ms ease, background 180ms ease;
}
.bn-row:hover { transform: translateY(-2px); background: var(--lemon); }
.bn-row img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ink2) 20%, transparent); }
.bn-row .bn-row__main { display: grid; gap: 2px; min-width: 0; }
.bn-row .vol { font-family: var(--font-pop); font-weight: 900; font-size: 18px; color: var(--vol-accent, var(--pop)); line-height: 1; }
.bn-row .date { font-family: var(--font-ja); font-size: 11px; font-weight: 900; opacity: .75; }
.bn-row .cnt { font-family: var(--font-pop); font-weight: 900; font-size: 12px; }
.bn-row .cnt b { font-size: 16px; }
.bn-row .link-kind { margin-top: 0; }
@media (max-width: 480px) { .bn-row { grid-template-columns: 96px minmax(0,1fr); } .bn-row .link-kind { grid-column: 2; justify-self: start; } }

/* 次回予告（大会ページが実在する場合）: 帯カード・一覧行・ヒーローのピルをリンクにする（portal.js nextInfo 参照）。
   ポータル専用なので base.css には置かない（base.css を触ると vol1〜11 の再凍結が必要になる） */
/* 既存バグ修正（2026-09-11）: 上の .bn-card { background:#fff } が base.css の .bn-card--next（暗色地・白文字）を
   同じ詳細度・後読みで上書きし、白地に白文字で日付・文言が見えなくなっていた（本番の COMING SOON カードでも発生）。
   詳細度を上げて暗色地を復元する */
.bn-card.bn-card--next, .bn-card.bn-card--next:hover { background: var(--ink); color: #fff; }
.bn-card--next .date { opacity: .9; }
.bn-card--next .tag { color: var(--ink2); }                 /* 明るいタグ地の上で白文字にならないよう文字色を固定 */
.bn-card--upcoming .bn-thumb { border-bottom-color: var(--green); }
.bn-card--upcoming .rec--main b { color: var(--green); }
.bn-row--next { border-left-color: var(--green); background: color-mix(in srgb, var(--green) 22%, #fff); }
.bn-row .bn-row__nothumb { display: grid; place-items: center; aspect-ratio: 16/9; border-radius: 8px; background: var(--ink2); color: var(--green); font-family: var(--font-pop); font-weight: 900; font-size: 11px; }
.bn-row .link-kind--next {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 10px; border: 1px solid var(--pop); border-radius: 999px;
  font-family: var(--font-pop); font-size: 11px; font-weight: 900; line-height: 1.4;
  color: var(--pop); background: #fff; white-space: nowrap;
}
.p-hero__next--link { transition: transform 180ms ease, background 180ms ease; }
.p-hero__next--link:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--pop) 85%, #fff); }
.p-hero__next--link:focus-visible { outline: 3px solid var(--lemon); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .p-hero__next--link { transition: none; } }
/* 開催後（結果発表中）: ヒーロー CTA は開催中 CTA と同じ白ピルを暖色の点で区別。BN の暫定カード/行は過去回と
   完全に同じ体裁（運営指示「過去同様に」）のため専用スタイルは持たない */
.p-hero__cta--result .status-dot { background: var(--lemon); border-color: var(--ink2); }

/* ============================================================
   ★大会ページ ヒーロー動画（event.hero_video があれば集合ビジュアルの代わりに再生）
   ポータル（/）自体では未使用。ブリーフ指定の範囲どおり残す（上の★大会ページ末尾と同様）。
   ============================================================ */
.group-stage .hero-video { display: block; width: 100%; aspect-ratio: 16 / 8.2; object-fit: cover; background: #fff; }
.group-stage .hero-video[hidden], .group-stage .group-img[hidden] { display: none; }

/* ============================================================
   ★ABOUT: これまでの歩み（縦タイムライン 4 段）
   ============================================================ */
.p-timeline { list-style: none; margin: 4px 0 0; padding: 0 0 0 14px; display: grid; gap: 10px; border-left: 3px solid var(--aqua2); }
.p-timeline li { position: relative; display: grid; gap: 3px; padding-left: 10px; }
.p-timeline li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--tl, var(--aqua2)); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--tl, var(--aqua2)); }
.p-timeline .tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-timeline .tl-vol { font-family: var(--font-pop); font-weight: 900; font-size: 11px; color: #fff; background: var(--tl, var(--aqua2)); border-radius: 999px; padding: 2px 10px; letter-spacing: .04em; }
.p-timeline .tl-when { font-family: var(--font-ui); font-size: 11px; font-weight: 900; color: var(--teal-text); letter-spacing: .06em; }
.p-timeline p { margin: 0; font-size: 13px; }
.p-card h3 { margin: 6px 0 0; font-family: var(--font-pop); font-weight: 900; font-size: 15px; color: var(--pop); }


/* ポータル最下部の共有操作 */
.portal-share { justify-content: center; margin: 0; padding: 24px 18px 40px; }
.portal-share[hidden] { display: none; }