/* hero-phone-v2 — 指揮、2026-09-28。オーナー「スマホのときのヒーローひどいな。キャラ被りすぎてるし、波の形状も気持ち悪い。ちゃんとしてくれ」
   スマホとタブレット（ポスター幅 999px 以下、390u のステージ）は、2×2 に詰めた構図をやめ、PC と同じ構図にする。
   - 一度に 2 人（hero-rotation-v2.js）。大きさ 180u、ステージ中央で左右対称、重なりなし。右の人は格子の 2 段（33.6u）高い。
     2 人とも波（rising-v9c.js：PC と同じ右上がりの階段、1 行ごとに 5R、前の段は 4 行下）の上に立つ。
   - PC と同じく、紫の段は体の後ろ、濃い前の段は足元の前を通る。
   - 名札は頭上 12u（PC と同じ、頭に合わせる規則）。
   - コピーの 1 行目は、コピーの幅にかかる見えている線から 32u 下（rising-v9c.js が格子から算出）。
   - ヒーローの下端（LIVE の黒い帯の始まり）は、操作リンクの下線のインクから 64px（767px 以下）／96px の位置（帯の規則、
     rising-v9c.js が算出）。 */
@container (max-width: 999px) {
  .ensemble-stage.ik .ik-wave-front { z-index: 7; }

  .ensemble-stage.ik .pf { --s: 180; }
  /* ローテーションが起動する前（または動かないとき）：中央の 2 枠が 2 人を受け持つ */
  .ensemble-stage.ik .p-hk,
  .ensemble-stage.ik .p-so { display: none; }
  .ensemble-stage.ik .p-ns { --x: 15; --y: 176.6; --lx: 90; --ly: -40; --la: -50%; }
  .ensemble-stage.ik .p-rk { --x: 195; --y: 143; --lx: 90; --ly: -40; --la: -50%; }

  /* --ik-copy-top（u）と --ik-poster-h（px）は rising-v9c.js が設定する。JS が動かないときの代わりの値は旧来のまま */
  .ensemble-stage.ik .ens-poster { height: var(--ik-poster-h, calc(var(--ik-copy-top, 400) * var(--u) + 132px)); }
  .ensemble-stage.ik .copy { top: calc(var(--ik-copy-top, 400) * var(--u)); }

  /* 入れ替え中の暗幕（hero-rotation-v1.css、旧 2×2 で沈むキャラがコピーの裏に透けたための対策）は使わない。今の構図では
     前の段（z-index 7）が沈むキャラを完全に隠すので不要で、12 秒ごとに帯と境目が明滅していた（独立レビュー）。 */
  .ensemble-stage.ik .copy::before { display: none; }
}

/* 揃え（docs/DESIGN-DETAIL-STANDARD.md）：ロゴとコピーは、スマホとタブレットのどの幅でもページの余白（16／20／24。LIVE 列の
   左端を hero-rotation-v2.js が --ik-gutter として測る）に立つ。390u のステージ（キャストと波）は中央に置く。以前はスマホで右寄せ、
   タブレットで中央寄せのステージの中に文字があったため、430px でコピーが LIVE 見出しより 40px 右、560px で 170px、768px で
   124px 右にずれていた。--off = 100cqw − 390u（rising-v6.css）なので、ステージの左端は off/2。 */
@container (max-width: 560px) {
  .ensemble-stage.ik .ens-stage-inner { left: 50%; right: auto; transform: translateX(-50%); }
}
@container (max-width: 999px) {
  .ensemble-stage.ik .copy {
    left: calc(var(--ik-gutter, var(--page-gutter, 20px)) - var(--off) / 2);
    right: calc(var(--ik-gutter, var(--page-gutter, 20px)) - var(--off) / 2);
  }
  /* ロゴのインクは箱の端から始まるので、箱も余白に立てる：金の印・リード・LIVE 見出しの左端が一致する（インクで測って
     1px 以内）。PC と同じ。以前は 4.5px はみ出していた。 */
  .ensemble-stage.ik .wm.s55-mark { left: calc(var(--ik-gutter, var(--page-gutter, 20px)) - var(--off) / 2); }
}

/* 配信中の印（LIVE）は、PC と同じく名札の上に置く（rising-v9b-title.css の PC の規則と同じ値）。印の文字の左端を名前の
   文字の左端にそろえる（印の内側の余白 4px 分だけ箱を左へ）。名札の横に並べると名札が長くなり、頭に合わせた名前の位置が
   ずれるため。名前は配信の有無で動かない。 */
@container (max-width: 999px) {
  .ensemble-stage.ik .tag a { position: relative; }
  .ensemble-stage.ik .tag .s13-live-badge.s55-live-badge:not([hidden]) {
    position: absolute;
    left: -4px;
    bottom: calc(100% + 2 * var(--u));
    top: auto;
    transform: none;
    white-space: nowrap;
  }
}
