/* bg.css — 背景の差し替え口（画面別）
 * ============================================================================
 * ★ 差し替えはこのファイルだけで完結させる。画像は src/assets/bg/（gen_bg.js が生成。原寸PNGはリポジトリ外）。
 *
 *   画面        横（landscape・2カラム）              縦（既定）
 *   ---------------------------------------------------------------------------
 *   hero      ★ index.html の <picture> が担当（srcset 1280 / 1440 / 1920）。ここでは ::after のグラデーションのみ
 *   quiz      bg_quiz_wide_1280 / _1920  ＋暗幕      bg_quiz_tall_720（720固定・確定）
 *   result    bg_result_wide_1280 / _1920 ＋端の沈め  bg_result_tall_720 / _1080 ＋端の沈め
 *   heaven    bg_heaven_wide_1280 / _1920           bg_heaven_tall_720 / _1080
 *
 * 切替条件（B案・theme.css 冒頭と同じ式。変えるときは全部いっしょに変える）
 *   縦＝既定。横＝ (min-width: 900px) and (min-height: 600px) and (orientation: landscape)
 *   解像度は幅と DPR で選ぶ：横 1280 → 1920（幅1281px以上 または 1.5dppx以上）／縦 720 → 1080（同）
 *   ヒーローの予算（1枚200KB以下）の基準は 1440（179KB）。1920 は大画面用に予算外で追加（srcset・index.html）。診断中の縦は 720 固定（確定）。
 *
 * 暗幕・グラデーションは CSS レイヤー（::after）。画像そのものの色調整はしない。
 *   ・ヒーロー：画像は右寄せ（渦が右）。左を画像の紺（--ink-800＝左端の実測色）へ延長し、コピーを左に置く
 *   ・診断中 PC：青い星雲が強いので暗幕 0.60 を重ね、縦版のヒストグラムに寄せる
 *                （実測：縦 平均L 9.7 / p90 21.5 ／ 横 24.0 / 51.4 → 暗幕後 ≈ 11.7 / 22）
 *   ・結果：横は右端の青の帯、縦は左の天の川を、端だけ弱く沈める（テキスト枠の外なので弱くてよい）
 * ============================================================================ */

.screen[data-bg] { background-color: var(--ink-800); }
.screen[data-bg]::before,
.screen[data-bg]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.screen[data-bg]::before {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
/* 画面より長いページでも背景は viewport に固定して敷く（スクロールで底が見えない） */
.screen[data-bg="quiz"]::before,  .screen[data-bg="quiz"]::after,
.screen[data-bg="result"]::before, .screen[data-bg="result"]::after,
.screen[data-bg="heaven"]::before, .screen[data-bg="heaven"]::after { position: fixed; }

/* ---------------------------------------------------------------- 縦（既定） */
.screen[data-bg="quiz"]::before   { background-image: url("../../src/assets/bg/bg_quiz_tall_720.webp"); }
.screen[data-bg="result"]::before { background-image: url("../../src/assets/bg/bg_result_tall_720.webp"); }
.screen[data-bg="heaven"]::before { background-image: url("../../src/assets/bg/bg_heaven_tall_720.webp"); }

@media (min-width: 721px), (min-resolution: 1.5dppx) {
  .screen[data-bg="result"]::before { background-image: url("../../src/assets/bg/bg_result_tall_1080.webp"); }
  .screen[data-bg="heaven"]::before { background-image: url("../../src/assets/bg/bg_heaven_tall_1080.webp"); }
  /* hero・quiz は 720 固定（hero 1080 は 386KB で予算超／quiz 1080 は 319KB のため削除・2026-09-14 確定） */
}

/* 縦：結果の左の天の川を弱く沈める */
.screen[data-bg="result"]::after {
  background: linear-gradient(90deg, rgba(4, 7, 15, 0.35) 0%, rgba(4, 7, 15, 0) 40%);
}
/* 縦：ヒーローに暗幕は掛けない（2026-09-16 削除。旧「35%透明→70%で0.75→最下部は紺」は下揃え時代のもので、
 * 上揃えにした今は読みやすさに寄与せず下半分の渦を隠すだけだった） */

/* ---------------------------------------------------------------- 横（2カラム） */
@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .screen[data-bg="quiz"]::before   { background-image: url("../../src/assets/bg/bg_quiz_wide_1280.webp"); }
  .screen[data-bg="result"]::before { background-image: url("../../src/assets/bg/bg_result_wide_1280.webp"); }
  .screen[data-bg="heaven"]::before { background-image: url("../../src/assets/bg/bg_heaven_wide_1280.webp"); }

  /* ヒーロー：左を画像の紺へ延長。コピーは左 46% 以内に置く（index.html .hero-copy） */
  .screen[data-bg="hero"]::after {
    background: linear-gradient(90deg, var(--ink-800) 0%, var(--ink-800) 18%, rgba(5, 11, 26, 0.85) 32%, rgba(5, 11, 26, 0) 56%);
  }
  /* 診断中：暗幕（黒〜紺の単色レイヤー）。不透明度 0.60 */
  .screen[data-bg="quiz"]::after { background: rgba(2, 4, 10, 0.60); }
  /* 結果：右端の青の帯を弱く沈める */
  .screen[data-bg="result"]::after {
    background: linear-gradient(270deg, rgba(4, 7, 15, 0.45) 0%, rgba(4, 7, 15, 0) 28%);
  }
}
@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) and (min-width: 1281px),
       (min-width: 900px) and (min-height: 600px) and (orientation: landscape) and (min-resolution: 1.5dppx) {
  .screen[data-bg="quiz"]::before   { background-image: url("../../src/assets/bg/bg_quiz_wide_1920.webp"); }
  .screen[data-bg="result"]::before { background-image: url("../../src/assets/bg/bg_result_wide_1920.webp"); }
  .screen[data-bg="heaven"]::before { background-image: url("../../src/assets/bg/bg_heaven_wide_1920.webp"); }
}