@charset "UTF-8";
/* アプリ固有UI(本番デザインwppr.cssへの追補)。状態表示・メッセージ・認証フォールバック等 */

/* SPAのビュー切り替え。1画面ずつ表示 */
[hidden] { display: none !important; }

/* 装飾の花びらが手前に重なり、メール認証フォーム等のクリックを奪うのを防ぐ */
.p-hero__rose,
.p-hero__deco {
  pointer-events: none;
}

/* グローバルメッセージ(エラー等) */
.c-message {
  min-height: 1.4em;
  margin: 1.6rem auto 0;
  padding: 0 1.2rem;
  max-width: 90%;
  color: #ffb4b4;
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  white-space: pre-line;
  word-break: break-word;
}
.c-message:empty { min-height: 0; margin-top: 0; }

/* 汎用CTAボタン(視聴する等。LINEアイコンなしの緑ピル) */
.c-cta {
  margin: 4rem auto 0;
  text-align: center;
}
.c-cta__link {
  display: block;
  margin: 0 auto;
  width: 73%;
  padding: 1.7rem 0 1.8rem;
  background-color: var(--color-green);
  border-radius: 100px;
  color: var(--color-white);
  font-size: 1.5rem;
  text-decoration: none;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) {
  .c-cta__link:hover { transform: scale(0.97); }
}

/* 残り時間の表示 */
.c-remaining {
  margin-top: 1.2rem;
  font-size: 1.4rem;
}
.c-remaining span {
  font-family: "Cardo", serif;
  font-size: 2.2rem;
  color: var(--color-yellow);
}

/* HDCP再生不可の端末向け案内(参加/ログインを塞ぐ) */
.c-unsupported {
  margin: 3.2rem auto 0;
  max-width: 88%;
  padding: 1.6rem;
  background: rgba(224, 179, 51, 0.12);
  border: 1px solid var(--color-yellow);
  border-radius: 8px;
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.7;
}
.c-unsupported small { color: rgba(255, 255, 255, 0.7); }
.c-unsupported a { color: var(--color-yellow); }

/* メール認証(検証用)フォールバック */
.c-altlogin {
  margin: 3.2rem auto 0;
  max-width: 82%;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  text-align: center;
}
.c-altlogin summary {
  cursor: pointer;
  font-size: 1.2rem;
  opacity: 0.7;
}
.c-altlogin input {
  width: 100%;
  margin: 0.8rem 0;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  color: var(--color-white);
  font-size: 1.4rem;
}
.c-altlogin button {
  width: 100%;
  padding: 1rem;
  margin-top: 0.4rem;
  border-radius: 100px;
  background-color: var(--color-green);
  color: var(--color-white);
  font-size: 1.3rem;
  cursor: pointer;
}

/* 再参加ボタン(完了・失効・離脱画面) */
.c-rejoin {
  margin-top: 2.4rem;
  text-align: center;
}
.c-rejoin__btn {
  display: inline-block;
  padding: 1.2rem 3.2rem;
  border: 1px solid var(--color-white);
  border-radius: 100px;
  color: var(--color-white);
  font-size: 1.3rem;
  background: transparent;
  cursor: pointer;
}

/* LINEアプリ内ブラウザ警告バナー */
.c-linebanner {
  margin: 1.6rem auto 0;
  max-width: 90%;
  padding: 1.2rem;
  background: rgba(224, 179, 51, 0.15);
  border: 1px solid var(--color-yellow);
  border-radius: 8px;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.6;
}
.c-linebanner__btn {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 1rem 2.4rem;
  background-color: var(--color-green);
  border-radius: 100px;
  color: var(--color-white);
  text-decoration: none;
  font-size: 1.3rem;
}

/* Brightcoveプレイヤーを枠内に収める。
   本番CSSは .p-movie__player-content video を絶対配置でフレームに充填するが、
   実体は <div id="player-container"> 内の <video-js> なので、同じ充填指定を与える */
.p-movie__player-content #player-container,
.p-thanks__player-content #player-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#player-container .video-js,
#player-container video {
  width: 100%;
  height: 100%;
  background-color: #000;
}

/* 保護映像(HW_SECURE / HDCP)のセキュアサーフェス合成対策。
   視聴中は、コンテンツを合成グループに隔離する mix-blend-mode の演出(::before)と、
   映像の上に被さる全画面固定オーバーレイ(::after)を無効化し、overflowも解放する。
   これらが残ると保護映像がオーバーレイ表示できず音声のみ(黒画面)になる。 */
body.watching .l-wrap__content::before,
body.watching .l-wrap::after { display: none !important; }
body.watching .l-wrap,
body.watching .l-wrap__inner,
body.watching .l-wrap__content { overflow: visible; }
/* 装飾フレーム(z-index:1)より映像を前面に出し、保護映像の上に要素を重ねない */
.p-movie__player-content { z-index: 2; }

/* 診断モード(?bare=1): 装飾フレームとCSS変形を外し、保護映像の合成問題を切り分ける */
body.bare .p-movie__player { left: 0; transform: none; width: 100%; }
body.bare .p-movie__player-frame { display: none; }
body.bare .p-movie__player-content {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  padding-top: 56.25%;
}