/* 青い導入、暖色の対戦、寒色の協力で読むリズムを作る。斜めの切替で箱に分断しない。 */
.scene-editorial .play-scenes { background: #f5f9ff; padding-bottom: 40px; }
.scene-editorial .play-scenes-intro { position: relative; margin-bottom: 80px; }
.scene-editorial .play-scenes-intro .section-label { color: #075ace; font-weight: 900; letter-spacing: .15em; }
.scene-editorial .play-scenes-intro .section-label:after { background: #126ded; height: 3px; }
.scene-editorial .play-scenes-intro .scene-headline-accent { color: #0761d4; background: linear-gradient(transparent 81%, #ffe149 81%, #ffe149 95%, transparent 95%); }
.scene-editorial .play-scenes-lead { border-left: 3px solid #1473ee; padding-left: 22px; }
.scene-editorial .play-scene { --scene-accent: #c94012; --scene-color: #ff9d38; --scene-tint: #fff0dc; isolation: isolate; padding-block: 36px 50px; }
.scene-editorial .scene-coop { --scene-accent: #0064d7; --scene-color: #63b7ff; --scene-tint: #e2f1ff; margin-top: 68px; }
.scene-editorial .play-scene:before { content: ''; position: absolute; z-index: -1; top: -28px; bottom: -28px; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--scene-tint); clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }
.scene-editorial .scene-coop:before { clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%); }

/* ラベルと見出しを色の基点にし、本文は読みやすい濃紺を維持する。 */
.scene-editorial .play-scene-meta { gap: 0; margin-bottom: 25px; }
.scene-editorial .play-scene-number { align-self: stretch; display: grid; place-items: center; padding: 0 12px; background: var(--scene-accent); color: #fff; border: 0; border-right: 1px solid #ffffff60; font-size: 13px; font-weight: 700; }
.scene-editorial .play-scene-meta p { background: var(--scene-accent); color: #fff; padding: 9px 15px 10px; font-size: 15px; }
.scene-editorial .play-scene-count { margin-left: 13px; color: #405570; }
.scene-editorial .play-scene .scene-headline-accent { color: var(--scene-accent); }
.scene-editorial .play-scene h3:after { content: ''; display: block; width: 56px; height: 5px; margin-top: 25px; background: var(--scene-color); transform: skewX(-24deg); }
.scene-editorial .play-scene-features { border-top: 1px solid #183e6326; padding-top: 20px; margin-right: 24px; }
.scene-editorial .play-scene-features li:before { width: 6px; height: 6px; border-radius: 1px; transform: rotate(-12deg); }

/* 大きな色の円と控えめな英字を背後へ置き、写真・実画面・ヒーローを一つの舞台にする。 */
.scene-editorial .play-scene-stage:before { content: ''; position: absolute; z-index: -4; width: 78%; aspect-ratio: 1; left: 12%; top: 0; border-radius: 50%; background: linear-gradient(140deg, var(--scene-color), transparent 74%); opacity: .44; }
.scene-editorial .play-scene-stage:after { content: 'BATTLE' / ''; position: absolute; z-index: -2; right: 3%; top: 0; font: italic 900 clamp(55px, 7.4vw, 112px)/1 Arial, sans-serif; letter-spacing: -.055em; color: var(--scene-accent); opacity: .13; }
.scene-editorial .scene-coop .play-scene-stage:after { content: 'TOGETHER' / ''; right: auto; left: 2%; font-size: clamp(48px, 6.5vw, 96px); }
/* 各参加者の部屋を新しい素材に含め、共通の室内・床で一続きに見せない。 */
.scene-editorial .scene-room, .scene-editorial .scene-floor { display: none; }
.scene-editorial .scene-game-window { padding: 5px; border-color: #ffffff; background: #fff; box-shadow: 0 28px 30px -24px #20334980, 0 2px 6px #20334926; }
.scene-editorial .scene-people { bottom: 1%; }
/* 新しい人物の拳が実画面を隠さないよう、協力写真を既存の左側の領域へ収める。 */
.scene-editorial .scene-coop .scene-people { width: 86%; left: 1%; bottom: 5%; }
.scene-editorial .play-scene-stage figcaption { color: #526980; }
.scene-editorial .play-scenes-note { position: relative; margin-top: 55px; color: #526980; }

/* 操作説明も言語別の同じフィットネスモデルを使い、3動作の配置は変えない。 */
.scene-editorial .movement-art { background-image: url('assets/controls-ja-v16.webp'); }
html[lang=en] .scene-editorial .movement-art { background-image: url('assets/controls-en-v16.webp'); }

/* 視線と拳をこちらへ向けたヒーローで参加を誘い、下端へ既存CTAを置く。 */
.scene-editorial .closing { display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(580px, 56.25vw, 960px); background: #c9e5fc; }
.scene-editorial .closing-art { background-image: url('assets/closing-first-punch-v20.webp'); background-position: center; }
/* 明るい空に合わせて濃紺の文字へ切り替え、暗い幕を重ねず読みやすさを保つ。 */
.scene-editorial .closing-copy { position: relative; color: #071e3c; text-shadow: none; padding-top: 3vw; }
.scene-editorial .closing .section-label { color: #123c68; }
.scene-editorial .closing .section-label:after { background: currentColor; }
.scene-editorial .closing-download { margin-top: 8vw; }

/* タブレットでも導入文の横線と見出しの余白が詰まらないようにする。 */
@media (min-width: 761px) and (max-width: 1050px) {
  .scene-editorial .play-scene-meta p { font-size: 12px; padding-inline: 9px; }
  .scene-editorial .play-scene-count { margin-left: 8px; }
  .scene-editorial .play-scenes-lead { width: fit-content; }
}

/* スマホも同じ色の流れ。人物の安全余白を保ち、背景の円は画面外へ広げる。 */
@media (max-width: 760px) {
  /* 縦画面は上のコピーから原画へなじませ、ヒーローと炎を中央に収める。 */
  .scene-editorial .closing { display: block; min-height: 0; padding-top: 40px; }
  .scene-editorial .closing-copy { padding-top: 0; }
  .scene-editorial .closing-art { top: 190px; bottom: auto; height: 112vw; background-position: 78% center; mask-image: linear-gradient(transparent, #000 15%, #000 78%, transparent); }
  .scene-editorial .closing-download { margin-top: 91vw; }
  .scene-editorial .play-scenes-intro { margin-bottom: 52px; }
  .scene-editorial .play-scenes-lead { padding-left: 15px; border-left-width: 2px; }
  .scene-editorial .play-scene { padding: 28px 0 30px; }
  .scene-editorial .play-scene + .play-scene { margin-top: 58px; }
  .scene-editorial .play-scene:before { top: -15px; bottom: -20px; clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%); }
  .scene-editorial .scene-coop:before { clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%); }
  .scene-editorial .play-scene-meta { margin-bottom: 18px; }
  .scene-editorial .play-scene-number { padding-inline: 10px; font-size: 12px; }
  .scene-editorial .play-scene-meta p { padding: 8px 12px; font-size: 13px; }
  .scene-editorial .play-scene h3:after { width: 42px; height: 4px; margin-top: 18px; }
  .scene-editorial .play-scene-features { padding-top: 16px; margin-right: 0; }
  .scene-editorial .play-scene-stage { width: 104%; margin-top: 52px; }
  .scene-editorial .play-scene-stage:after { font-size: 53px; }
  .scene-editorial .scene-coop .play-scene-stage:after { font-size: 45px; }
  .scene-editorial .scene-people { bottom: 5%; }
  .scene-editorial .scene-game-window { padding: 3px; }
  .scene-editorial .play-scenes-note { margin-top: 40px; }
}