/* ==========================================================================
   FMS 縦持ちスプラッシュ (8番依頼 フェーズ3 / M0 新規部品)
   --------------------------------------------------------------------------
   スマホ縦持ちの「再生前」体験。既存スプラッシュ .fvTutorialScreenView(=再生ゲートの器)
   の子として A案レイアウト(Splash_sp_portlate_A.png)を DOM/CSS で描画する。

   ■ 適用条件(2026-07-21 A/B廃止 → 確定出し分け):
       body.fms-splash-active  (JSが「スマホ縦のhls.js端末」=shouldShowNewSplash 成立時に付与)
       AND  orientation: portrait
     → スマホ縦のnative HLS/スマホ横/タブレット/PC は現行 tutorial.jpg のまま(1pxも変えない)。
        端末・hls.js(isVideoTagBase)判定はJS側、CSSは縦向き(portrait)のみを担当する。

   ■ 不可侵: タップは .fms-splash → 親 .fvTutorialScreenView へバブリングして既存ゲートに
     到達する。JS側で stopPropagation / preventDefault を一切使わない(CSSは pointer-events を
     ブロックしない)。色は生値を書かず fms-tokens.css の変数を参照。!important は
     body.クラス連鎖の既存パターン拡張として 11番§11規則2の例外に該当。
   ========================================================================== */

/* (追記) 対象DOM(.fms-splash 一式)は js/fms-portrait-splash.js が条件成立時(body.fms-splash-active)
   にのみ生成する。非対象端末ではDOM自体が無いため、以下の規則は静的HTMLには一致しない(未使用ではない)。 */
/* 既定は全環境で非表示(二重防御)。JSは条件成立時のみ DOM を生成するが、
   万一生成されても縦向きになるまで表示しない。 */
.fms-splash {
  display: none;
}

/* ------------------------------------------------------------------------ */
/* body.fms-splash-active(スマホ縦×hls.js) × 縦向き のみ                     */
/* 端末判定はJS(body.fms-splash-active付与)、縦横判定はCSS(下記 orientation)。 */
/* ------------------------------------------------------------------------ */
@media (orientation: portrait) {

  /* 現行 bitmap(tutorial.jpg) を抑止 = 縦持ち処置群では画像をフェッチしない。
     .fms-splash が不透明地で覆うため万一残っても表示は破綻しない(二重防御)。 */
  body.fms-splash-active #fvPlayer .fvTutorialScreenView {
    background-image: none !important;
    background-color: var(--fms-green-600, #00722F) !important;
  }

  /* スプラッシュ本体: プレーヤー箱(16:9)いっぱいに absolute 配置(フロー非影響=CLS中立) */
  body.fms-splash-active .fms-splash {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fms-space-4, 16px);
    padding: var(--fms-space-4, 16px);
    box-sizing: border-box;
    overflow: hidden;
    font-family: var(--fms-font-sans);
    /* ④ 背景ダイヤ地(画像不使用・トークンのみ・crisp)。ベース=green-600、
       菱形タイル=green-700 のオフセット市松で argyle を近似。 */
    background-color: var(--fms-green-600, #00722F);
    background-image:
      linear-gradient(45deg, var(--fms-green-700, #00612B) 25%, transparent 25%, transparent 75%, var(--fms-green-700, #00612B) 75%),
      linear-gradient(45deg, var(--fms-green-700, #00612B) 25%, transparent 25%, transparent 75%, var(--fms-green-700, #00612B) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
    /* タップ全域がゲート(偽ボタンは誠実)。カーソルで可タップ性を示す。 */
    cursor: pointer;
  }

  /* ② 機能価値コピー(従属): ◆ 観たい映像ワンタッチ! ◆ 金グラデ見出し */
  body.fms-splash-active .fms-splash__masthead {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--fms-space-2, 8px);
    font-size: var(--fms-text-lg, 16px);
    font-weight: var(--fms-weight-bold, 700);
    line-height: var(--fms-leading-tight, 1.1);
    white-space: nowrap;
    /* 金グラデ(装飾トークン)。非対応環境向けに solid fallback を先に指定。 */
    color: var(--fms-deco-gold-2, #C8A24B);
    background-image: linear-gradient(180deg, var(--fms-deco-gold-1, #F3E1A6), var(--fms-deco-gold-2, #C8A24B));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  }
  body.fms-splash-active .fms-splash__diamond {
    color: var(--fms-deco-gold-2, #C8A24B);
    -webkit-text-fill-color: var(--fms-deco-gold-2, #C8A24B);
    font-size: var(--fms-text-md, 14px);
  }

  /* ① 行動指示ユニット(主役): 白/クリームのピル + 金枠。非interactive(装飾)。 */
  body.fms-splash-active .fms-splash__cta {
    position: relative; /* .fms-splash__hand の absolute 基準(ピルの右下に置く) */
    display: flex;
    align-items: center;
    gap: var(--fms-space-2, 8px);
    max-width: 92%;
    padding: var(--fms-space-2, 8px) var(--fms-space-4, 16px);
    background-color: var(--fms-white, #FFFFFF);
    border: var(--fms-border-thick, 2px) solid var(--fms-deco-gold-2, #C8A24B);
    border-radius: var(--fms-radius-pill, 999px);
    box-shadow: var(--fms-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.35));
    transition: transform var(--fms-motion-fast, 120ms) var(--fms-ease-emph, cubic-bezier(0.32, 0.72, 0, 1)),
                filter var(--fms-motion-fast, 120ms) var(--fms-ease, ease);
    /* 装飾要素なのでポインタ操作は親(ゲート)にそのまま透過させる */
    pointer-events: none;
  }

  /* ▶ 緑丸に白三角 */
  body.fms-splash-active .fms-splash__play {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--fms-radius-circle, 50%);
    background-color: var(--fms-color-action, #00612B);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.fms-splash-active .fms-splash__play svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: var(--fms-white, #FFFFFF); /* ▶白三角 */
  }

  /* ①ラベル: 「タップで視聴スタート」緑700文字 on 白 = 7.65:1(AA) */
  body.fms-splash-active .fms-splash__label {
    font-size: var(--fms-text-2xl, 24px);
    font-weight: var(--fms-weight-bold, 700);
    line-height: var(--fms-leading-tight, 1.1);
    color: var(--fms-color-action, #00612B);
    white-space: nowrap;
  }

  /* タップ指 + バースト(右下・A案の手アイコン継承) */
  body.fms-splash-active .fms-splash__hand {
    position: absolute;
    right: var(--fms-space-2, 8px);
    bottom: -6px;
    width: 26px;
    height: 26px;
    color: var(--fms-white, #FFFFFF); /* 指(currentColor) */
    pointer-events: none;
  }
  /* バーストの光線は A案の赤を継承 */
  body.fms-splash-active .fms-splash__hand-ray {
    stroke: var(--fms-color-danger, #E53935);
  }

  /* ③ マスコット(馬+にんじん): 左下・ピルに重ねない。寸法予約でCLS対策(実画像比率)。 */
  body.fms-splash-active .fms-splash__mascot {
    position: absolute;
    left: var(--fms-space-3, 12px);
    bottom: var(--fms-space-3, 12px);
    width: 22%;
    max-width: 96px;
    height: auto;
    /* img/fms-mascot.png(288×273)の実比率で確定(2026-07-16 マージ)。
       発注者作成の切り抜き(img/carrotta.png 513×486)を表示3x相当へ縮小したもの。
       白キーラインは元スプラッシュ画像由来の縁取りで意図どおり(背景との境界を
       アニメ調のまま明瞭にする) */
    aspect-ratio: 288 / 273;
    object-fit: contain;
    pointer-events: none;
  }

  /* --- タップ応答(視覚のみ・ゲート無変更・3-補足7) --- */
  body.fms-splash-active .fms-splash.is-pressed .fms-splash__cta {
    transform: scale(0.97);
    filter: brightness(0.96);
  }
  body.fms-splash-active .fms-splash.is-pressed .fms-splash__hand {
    animation: fms-splash-burst var(--fms-motion-base, 200ms) var(--fms-ease, ease);
  }

  /* --- chat-join(YouTube出口ボタン)は再生前は伏せ、再生後(body.fms-played)に復帰 --- */
  /* モバイル縦持ちで実際に見えるのはヘッダの .chat-join-button--inline(実機スクショの赤ピル)。
     :not(.fms-played) で伏せ、再生後は自然に既存の display 定義へ戻す(排除でなく遅延=HBL配慮)。 */
  body.fms-splash-active:not(.fms-played) .chat-join-button {
    display: none !important;
  }
}

@keyframes fms-splash-burst {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.25); opacity: 0.85; }
  100% { transform: scale(1);   opacity: 1; }
}

/* prefers-reduced-motion: モーション無効化(11番§8: 新規部品必須) */
@media (prefers-reduced-motion: reduce) {
  body.fms-splash-active .fms-splash__cta {
    transition: none;
  }
  body.fms-splash-active .fms-splash.is-pressed .fms-splash__cta {
    transform: none;
    filter: brightness(0.96);
  }
  body.fms-splash-active .fms-splash.is-pressed .fms-splash__hand {
    animation: none;
  }
}