/* ==========================================================
   爆弾タイマー  style.css
   ダークテーマ固定 / スマホ縦持ち最優先 / 見た目は body[data-phase] で切り替える
   ※このファイルにJSの都合は持ち込まない。IDはapp.jsの参照名に一致させること。
   ========================================================== */

:root{
  --bg:        #0d1016;   /* 通常背景 */
  --panel:     #171b24;   /* パネル */
  --fg:        #ffffff;   /* 文字 */
  --sub:       #8b94a6;   /* 補助 */
  --line:      #262c39;   /* 罫線 */
  --red:       #c2333a;   /* スタート／警告枠 */
  --warn-bg:   #2a0a0d;   /* WARNING背景 */
  --defused:   #0b2418;   /* DEFUSED背景 */
  --hz:        #f5c400;   /* ハザード黄 */
  --hz-ink:    #111111;   /* ハザード黒 */
  --hz-shadow: #7a6200;   /* 立体影 */

  --mono: ui-monospace, SFMono-Regular, Menlo, "SF Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--bg); }

body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:15px;               /* 本文15px（全アプリ共通の標準） */
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  transition:background-color .25s linear;

  /* ---- 長押しでの文字選択・コピーメニューを全面的に止める（iPhone実機バグ対応） ----
     -webkit-touch-callout:none が本命。user-select だけではiOSのポップアップは止まらない。
     ※ touch-action は一切いじらない（.wheel のスクロールと #vol の操作を壊さないため） */
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}

button{ font-family:inherit; color:inherit; }

/* body からの継承が効かないブラウザ向けに、ボタン類へ個別にも重ねる。
   子要素（絵文字・<small>・.face・.stripe）まで確実に効かせる。 */
.btn-defuse, .btn-defuse *,
.btn-start,  .btn-start *,
#btn-mute,   #btn-mute *,
#btn-again,  #btn-again *,
#btn-back,   #btn-back *,
#btn-retry,  #btn-retry *,
.toggle,     .toggle *,
#btn-test,   #btn-test *{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- 画面切り替え ---------- */
.screen{
  display:none;
  min-height:100dvh;
  padding:
    calc(var(--safe-t) + 14px)
    calc(var(--safe-r) + 16px)
    calc(var(--safe-b) + 14px)
    calc(var(--safe-l) + 16px);
  flex-direction:column;
  align-items:center;
}
.screen.active{ display:flex; }

/* data-phase を手で書き換えただけでも確認できるようにするフォールバック。
   .active が1つも無いときだけ効くので、JSの制御とは衝突しない。 */
body:not(:has(.screen.active))[data-phase="idle"]     #screen-setup,
body:not(:has(.screen.active))[data-phase="ready"]    #screen-run,
body:not(:has(.screen.active))[data-phase="running"]  #screen-run,
body:not(:has(.screen.active))[data-phase="warning"]  #screen-run,
body:not(:has(.screen.active))[data-phase="final"]    #screen-run,
body:not(:has(.screen.active))[data-phase="exploded"] #screen-result,
body:not(:has(.screen.active))[data-phase="defused"]  #screen-result{ display:flex; }

/* ==========================================================
   フェーズごとの背景・全画面演出
   ========================================================== */

/* WARNING … 赤背景を1.4秒周期でゆっくり明滅＋赤い枠 */
body[data-phase="warning"]{
  background:var(--warn-bg);
  animation:warn-pulse 1.4s ease-in-out infinite;
}
@keyframes warn-pulse{
  0%,100%{ background-color:#2a0a0d; }
  50%    { background-color:#4a1015; }
}

/* FINAL … 0.26秒周期で #e00014 ⇄ #3d0006 を steps(1,end) で切り替える全画面フラッシュ */
body[data-phase="final"]{
  background:#e00014;
  color:#fff;
  animation:final-flash .26s steps(1,end) infinite;
}
@keyframes final-flash{
  0%  { background-color:#e00014; }
  50% { background-color:#3d0006; }
  100%{ background-color:#e00014; }
}

body[data-phase="exploded"]{ background:var(--warn-bg); }
body[data-phase="defused"] { background:var(--defused); }

/* 赤い枠（WARNING / FINAL） */
body::after{
  content:"";
  position:fixed; inset:0;
  border:0 solid transparent;
  pointer-events:none;
  z-index:50;
  transition:border-color .2s linear;
}
body[data-phase="warning"]::after{ border:4px solid var(--red); }
body[data-phase="final"]::after  { border:4px solid #fff; }

@media (prefers-reduced-motion:reduce){
  body[data-phase="warning"],
  body[data-phase="final"]{ animation:none; }
}

/* ==========================================================
   1. セットアップ画面
   ========================================================== */
#screen-setup{ justify-content:flex-start; overflow-y:auto; gap:10px; }

.setup-head{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.setup-bomb{ font-size:26px; line-height:1; }
.setup-title{
  margin:0;
  font-size:20px;              /* 見出し20 */
  font-weight:800;
  letter-spacing:.16em;
  color:var(--fg);
}

/* 確定値表示 */
#readout{
  display:flex; align-items:baseline; justify-content:center; gap:2px;
  font-family:var(--mono);
  padding:6px 0 2px;
}
#ro-mmss{ font-size:52px; font-weight:700; letter-spacing:.02em; line-height:1.05; }
#ro-cs  { font-size:26px; font-weight:600; color:var(--sub); }

/* ---------- ホイール（ドラムピッカー） ---------- */
.picker{
  position:relative;
  width:100%;
  max-width:340px;
  margin:4px 0;
}
.picker .band{
  position:absolute;
  left:0; right:0;
  top:68px;                     /* .wheel(170px) の中央帯：68px + 34px/2 = 85px = 170/2 */
  height:34px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:10px;
  pointer-events:none;
}
.picker .cols{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.picker .unit{
  font-size:16px;
  color:var(--sub);
  padding-bottom:2px;
}
.wheel{
  height:170px;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:68px 0;               /* 先頭/末尾の数字も中央にスナップできるように */
  width:84px;
  text-align:center;
  font-family:var(--mono);
  touch-action:pan-y;
}
.wheel::-webkit-scrollbar{ display:none; }
.wheel > *{
  height:34px;
  line-height:34px;
  scroll-snap-align:center;
  font-size:26px;
  color:#5c6678;
  transition:color .12s linear;
}
.wheel > .sel{ color:#fff; }

/* ヒント行（0分0秒のとき警告文がJSで入る。空でも高さを確保） */
#setup-hint{
  min-height:20px;
  font-size:13px;               /* 補助13pxが下限 */
  color:var(--red);
  text-align:center;
}

/* ---------- パネル ---------- */
.panel{
  width:100%;
  max-width:400px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
}

/* トグル */
.toggles{ overflow:hidden; }
.toggle{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%;
  padding:13px 14px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  font-size:15px;
  text-align:left;
  cursor:pointer;
}
.toggle:last-child{ border-bottom:0; }
.tg-label{ flex:1; }
.tg-sw{
  flex:0 0 auto;
  width:46px; height:27px;
  border-radius:999px;
  background:#39414f;
  position:relative;
  transition:background-color .15s linear;
}
.tg-sw::after{
  content:"";
  position:absolute; top:3px; left:3px;
  width:21px; height:21px;
  border-radius:50%;
  background:#fff;
  transition:transform .15s ease;
}
.toggle[aria-pressed="true"] .tg-sw{ background:#2f9e5e; }
.toggle[aria-pressed="true"] .tg-sw::after{ transform:translateX(19px); }
.toggle[aria-pressed="false"] .tg-label{ color:var(--sub); }

/* 音量 */
.vol-row{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
}
.vol-label{ font-size:13px; color:var(--sub); flex:0 0 auto; }
#vol{
  flex:1 1 auto;
  min-width:0;
  height:28px;
  accent-color:var(--red);
  background:transparent;
}
#btn-test{
  flex:0 0 auto;
  padding:9px 12px;
  font-size:13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#222836;
  cursor:pointer;
}
#btn-test:active{ background:#2c3444; }

/* 注意書き */
.notice{
  width:100%; max-width:400px;
  margin:2px 0 0;
  font-size:13px;
  color:#e0b64a;
  text-align:center;
}

/* スタートボタン */
.btn-start{
  width:100%;
  max-width:400px;
  margin:8px 0 6px;
  padding:18px 12px;
  border:0;
  border-radius:16px;
  background:var(--red);
  color:#fff;
  font-size:24px;
  font-weight:800;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:0 0 0 3px var(--red), 0 6px 0 #6d1c21;
  transition:transform .05s linear, box-shadow .05s linear;
}
.btn-start small{
  display:block;
  margin-top:3px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.22em;
  opacity:.75;
}
.btn-start:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 0 0 3px var(--red), 0 3px 0 #6d1c21;
}
.btn-start:disabled{
  background:#4a2f32;
  color:#8f767a;
  box-shadow:0 0 0 3px #4a2f32, 0 6px 0 #33191c;
  cursor:default;
}

/* ==========================================================
   2. カウントダウン画面
   ========================================================== */
#screen-run{ position:relative; justify-content:space-between; gap:6px; }

/* ---------- ミュートボタン（右上・控えめ・解除ボタンから最遠） ----------
   絵文字（🔔 / 🔕）の出し分けはJSの textContent 側。CSSは色だけ変える。 */
.btn-mute{
  position:absolute;
  top:calc(var(--safe-t) + 8px);
  right:calc(var(--safe-r) + 8px);
  z-index:1;                    /* 解除ボタンより上に積まない。位置的にも重ならない */
  width:44px; height:44px;      /* タップ領域44×44を確保 */
  padding:0;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  line-height:1;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.42);
  opacity:.72;                  /* 視覚的には控えめ */
  cursor:pointer;
  transition:opacity .12s linear, border-color .12s linear, background-color .12s linear;
}
.btn-mute:active{ opacity:1; transform:scale(.94); }
/* ミュート中 … 明るく＋赤フチで「切ってある」と分かるようにする */
.btn-mute[aria-pressed="true"]{
  opacity:1;
  background:rgba(0,0,0,.55);
  border-color:#ff6b73;
  box-shadow:0 0 0 2px rgba(255,107,115,.3);
}
/* 全画面フラッシュ中でも埋もれないコントラスト */
body[data-phase="warning"] .btn-mute{ opacity:.85; border-color:rgba(255,255,255,.6); }
body[data-phase="final"] .btn-mute{
  opacity:1;
  background:rgba(0,0,0,.5);
  border-color:rgba(255,255,255,.9);
}
body[data-phase="final"] .btn-mute[aria-pressed="true"]{ border-color:#ffd0d3; }

#phase-label{
  font-size:16px;               /* 見出し16 */
  font-weight:700;
  letter-spacing:.24em;
  color:var(--sub);
  min-height:22px;
  padding:0 56px;               /* 右上のミュートボタンと重ならないよう左右を空ける */
}
body[data-phase="warning"] #phase-label{ color:#ff9aa1; }
body[data-phase="final"]   #phase-label{ color:#fff; }

#run-bomb{
  font-size:42px;
  line-height:1;
  min-height:44px;
}
body[data-phase="final"] #run-bomb{ font-size:34px; }

/* 残り時間 */
#run-time{
  display:flex; align-items:baseline; justify-content:center; gap:2px;
  font-family:var(--mono);
  width:100%;
}
#run-mmss{
  font-size:64px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.02;
}
#run-cs{
  font-size:32px;               /* 本体のおよそ半分 */
  font-weight:600;
  color:var(--sub);
}
body[data-phase="warning"] #run-cs{ color:#e3a2a7; }
body[data-phase="final"] #run-mmss{
  font-size:88px;               /* FINALは極大（80px以上） */
  color:#fff;
}
body[data-phase="final"] #run-cs{
  font-size:44px;
  color:rgba(255,255,255,.85);
}

/* 導火線バー */
#fuse{
  width:100%;
  max-width:420px;
  height:12px;
  border-radius:999px;
  background:#242a35;
  overflow:hidden;
}
#fuse-bar{
  display:block;
  height:100%;
  width:100%;                   /* 幅はJSが更新する */
  border-radius:999px;
  background:linear-gradient(90deg,#f5c400,#ff7a18);
  transform-origin:left center;
}
body[data-phase="warning"] #fuse-bar{ background:linear-gradient(90deg,#ff7a18,#e0303a); }
body[data-phase="final"]   #fuse{ background:rgba(0,0,0,.35); }
body[data-phase="final"]   #fuse-bar{ background:#fff; }

/* 読み上げ中テキスト */
#say{
  min-height:24px;
  font-size:17px;               /* 見出し17 */
  font-weight:700;
  color:#ffd166;
  text-align:center;
}
body[data-phase="final"] #say{ color:#fff; }

/* ---------- 解除ボタン（黄×黒ハザード・画面のおよそ1/3） ---------- */
.btn-defuse{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:440px;
  min-height:31dvh;
  margin:4px 0 2px;
  padding:0;
  border:0;
  border-radius:18px;
  overflow:hidden;
  background:var(--hz);
  cursor:pointer;
  box-shadow:0 0 0 3px var(--hz), 0 6px 0 var(--hz-shadow);
  transition:transform .05s linear, box-shadow .05s linear;
}
.btn-defuse .stripe{
  display:block;
  flex:0 0 12px;
  height:12px;
  background:repeating-linear-gradient(45deg,#111 0 9px,#f5c400 9px 18px);
}
.btn-defuse .face{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:26px 16px;            /* 面を大きく取る */
  background:var(--hz);
  color:var(--hz-ink);
  font-size:40px;
  font-weight:900;
  letter-spacing:.14em;
}
.btn-defuse .face small{
  font-size:13px;
  font-weight:800;
  letter-spacing:.2em;
  opacity:.72;
}
.btn-defuse:active{
  transform:translateY(3px);
  box-shadow:0 0 0 3px var(--hz), 0 3px 0 var(--hz-shadow);
}

/* FINAL … 白く発光し、面が0.25秒周期で明滅 */
body[data-phase="final"] .btn-defuse{
  box-shadow:0 0 0 4px #fff, 0 0 26px 6px rgba(255,255,255,.6);
}
body[data-phase="final"] .btn-defuse:active{
  transform:translateY(3px);
  box-shadow:0 0 0 4px #fff, 0 0 18px 4px rgba(255,255,255,.5);
}
body[data-phase="final"] .btn-defuse .face{
  animation:defuse-blink .25s steps(1,end) infinite;
}
@keyframes defuse-blink{
  0%  { background-color:#f5c400; }
  50% { background-color:#fff6bd; }
  100%{ background-color:#f5c400; }
}
@media (prefers-reduced-motion:reduce){
  body[data-phase="final"] .btn-defuse .face{ animation:none; }
}

#run-hint{
  font-size:13px;
  color:var(--sub);
  min-height:20px;
}
body[data-phase="final"] #run-hint{ color:rgba(255,255,255,.75); }

/* 低い画面ではボタンを少しだけ抑える */
@media (max-height:640px){
  #run-mmss{ font-size:54px; }
  body[data-phase="final"] #run-mmss{ font-size:80px; }
  .btn-defuse{ min-height:28dvh; }
  .btn-defuse .face{ font-size:34px; padding:18px 14px; }
}

/* ==========================================================
   3. 結果画面
   ========================================================== */
/* 全画面写真（救われた世界）＋ MISSION CLEAR。#screen-boom と対になる画面。
   ★写真は明るいので、文字は「上1/3の空」だけに置く。画面全体は暗くしない。
   写真=::before / 上部だけの暗い帯=::after / 中身=z-index:2 */
#screen-result{
  position:relative;
  overflow:hidden;
  justify-content:flex-start;   /* 上詰め＝空の領域に文字を集める */
  align-items:center;
  gap:8px;
  text-align:center;
  /* 上は 10dvh 空ける＝MISSION CLEAR の上端を画面の1割あたりから始める。
     16px だと実機で上端にべったり付いて窮屈だったため（2026-09-05）。
     ★下げすぎの線は「時間の下端が画面の45%」。10dvh でも時間の下端は約31%までで、
       空(〜33%)と上部の暗い帯(〜55%)の内側に収まる。#res-sub(中央・約47%〜)とも重ならない。 */
  padding:
    calc(var(--safe-t) + 10dvh)
    calc(var(--safe-r) + 8px)
    calc(var(--safe-b) + 14px)
    calc(var(--safe-l) + 8px);
  background:#0b2418;
}

/* 写真（768×1376）。#screen-boom より控えめに8秒かけて拡大 */
#screen-result::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url("images/success.jpg?v=10");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1);
  transform-origin:center center;
  animation:clear-zoom 8s ease-out forwards;
}
@keyframes clear-zoom{
  from{ transform:scale(1); }
  to  { transform:scale(1.04); }
}

/* 上部にだけ暗い帯。中央より下は完全に透明＝花と人は明るいまま残す */
#screen-result::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.42) 18%,
    rgba(0,0,0,.22) 34%,
    rgba(0,0,0,.06) 45%,
    rgba(0,0,0,0)   55%);
}

#screen-result > *{ position:relative; z-index:2; }

/* 絵文字は写真の完成度に対して浮くので隠す。
   ★要素とIDは残すこと（app.js が #res-emoji を参照している）。CSSで隠すだけ。 */
#res-emoji{ display:none; }

/* MISSION CLEAR … 13文字なので GAME OVER(9文字)より字送りを詰めて1行を死守する。
   計算: 字幅合計 約8.2em + 字間 13×.05em=0.65em ＝ 約8.85em。
   320px幅(左右padding 8px → 使える幅304px)では 10.3vw=32.96px → 約292px で収まる。 */
#res-title{
  margin:0;
  width:100%;
  font-size:clamp(32px, 10.3vw, 72px);
  font-weight:900;
  line-height:1.06;
  letter-spacing:.05em;
  text-indent:.05em;            /* 字間ぶんの右余りを打ち消して中央に見せる */
  white-space:nowrap;
  color:#ffffff;
  text-shadow:
    0 2px 4px rgba(0,0,0,.92),
    0 4px 16px rgba(0,0,0,.78),
    0 0 40px rgba(0,0,0,.6);
}

/* 止めた時間 … 主役のひとつ。#res-title に次ぐ大きさ */
#res-time{
  display:flex; align-items:baseline; justify-content:center; gap:2px;
  font-family:var(--mono);
  color:#fff;
  text-shadow:
    0 2px 4px rgba(0,0,0,.92),
    0 4px 14px rgba(0,0,0,.75),
    0 0 34px rgba(0,0,0,.55);
}
/* 止めた時間がこの画面の主役。#res-title より大きくてよい。
   計算: 等幅は1文字0.6em。320px幅で mmss 41.6px×5字=125px + cs 20.8px×3字=37px ＝ 約164px（使える幅304px） */
#res-mmss{ font-size:clamp(40px, 13vw, 86px); font-weight:700; letter-spacing:.01em; }
#res-cs  { font-size:clamp(20px, 6.5vw, 43px); font-weight:700; }

/* ランクの一言 … 画面の縦中央へ。写真の中央は色が複雑なので、
   文字の高さぶんだけの横帯グラデーションを疑似要素で後ろに敷いて読ませる（写真全体は暗くしない） */
#res-sub{
  position:absolute;
  top:50%;
  left:calc(var(--safe-l) + 16px);
  right:calc(var(--safe-r) + 16px);
  transform:translateY(-50%);
  margin:0 auto;
  max-width:420px;
  font-size:clamp(20px, 5.5vw, 34px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:.01em;
  color:#fff;
  text-shadow:
    0 2px 4px rgba(0,0,0,.92),
    0 3px 12px rgba(0,0,0,.7),
    0 0 26px rgba(0,0,0,.5);
}
/* 文言が入る前（空）のときは帯だけが浮くので、まるごと隠す */
#res-sub:empty{ display:none; }
#res-sub::before{
  content:"";
  position:absolute;
  left:-50vw; right:-50vw;      /* 横は画面外まで伸ばす（#screen-result が overflow:hidden で切る） */
  top:-.62em; bottom:-.62em;    /* 帯は文字の高さぶんだけ */
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,0)   0%,
    rgba(0,0,0,.34) 26%,
    rgba(0,0,0,.45) 50%,
    rgba(0,0,0,.34) 74%,
    rgba(0,0,0,0)   100%);
}

/* ボタン2つ … 花と人の上に重なるので白地×黒文字＋濃い落ち影で必ず読ませる */
#screen-result .res-actions{
  position:absolute;
  left:calc(var(--safe-l) + 16px);
  right:calc(var(--safe-r) + 16px);
  bottom:calc(var(--safe-b) + 30px);
  z-index:3;
  display:flex;
  gap:10px;
  width:auto;
  max-width:440px;
  margin:0 auto;
}
#btn-again,#btn-back{
  flex:1 1 0;
  min-width:0;
  padding:17px 8px;
  font-size:clamp(15px, 4.3vw, 18px);
  font-weight:800;
  white-space:nowrap;           /* 「もう一度試す」を必ず1行に収める */
  border:0;
  border-radius:14px;
  background:#fff;
  color:#111;
  cursor:pointer;
  box-shadow:0 0 0 3px #fff, 0 6px 0 #8f939c, 0 10px 28px rgba(0,0,0,.55);
  transition:transform .05s linear, box-shadow .05s linear;
}
#btn-again:active,#btn-back:active{
  transform:translateY(3px);
  box-shadow:0 0 0 3px #fff, 0 3px 0 #8f939c, 0 6px 18px rgba(0,0,0,.5);
}
/* 「設定へ」は副次操作なので、白地のまま少しだけ落ち着かせる */
#btn-back{ background:#eef0f3; color:#242a35; box-shadow:0 0 0 3px #eef0f3, 0 6px 0 #8f939c, 0 10px 28px rgba(0,0,0,.55); }
#btn-back:active{ box-shadow:0 0 0 3px #eef0f3, 0 3px 0 #8f939c, 0 6px 18px rgba(0,0,0,.5); }

@media (prefers-reduced-motion:reduce){
  #screen-result::before{ animation:none; }
}

/* ==========================================================
   4. 爆発画面（GAME OVER・全画面写真）
   写真は ::before、暗い覆いは ::after。中身は z-index:2 で上に置く。
   ※ 画像パス images/gameover.jpg は固定（田中さんが同名で上書きする）
   ========================================================== */
#screen-boom{
  position:relative;
  overflow:hidden;
  justify-content:center;
  align-items:center;
  padding:
    calc(var(--safe-t) + 14px)
    calc(var(--safe-r) + 10px)
    calc(var(--safe-b) + 14px)
    calc(var(--safe-l) + 10px);
  background:#000;
}

/* 写真（縦長768×1344）を画面いっぱいに。表示された瞬間から6秒かけてゆっくり拡大 */
#screen-boom::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url("images/gameover.jpg?v=10");   /* index.html の preload と同一URLにする */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1);
  transform-origin:center center;
  animation:boom-zoom 6s ease-out forwards;
}
@keyframes boom-zoom{
  from{ transform:scale(1); }
  to  { transform:scale(1.06); }
}

/* 暗い覆い（写真が見えなくなるほど暗くしない） */
#screen-boom::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.50) 0%,
    rgba(0,0,0,.30) 42%,
    rgba(0,0,0,.62) 100%);
}

#screen-boom > *{ position:relative; z-index:2; }

#boom-title{
  margin:0;
  width:100%;
  text-align:center;
  font-size:clamp(44px, 13vw, 80px);   /* 画面幅いっぱいに近い特大 */
  font-weight:900;
  line-height:1.05;
  letter-spacing:.12em;
  text-indent:.12em;                    /* 字間ぶんの右余りを打ち消して中央に見せる */
  color:#fff3f2;                        /* ごく薄い赤みのある白 */
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 6px 20px rgba(0,0,0,.85),
    0 0 46px rgba(0,0,0,.7);
}

/* もう一度トライする … 既定は非表示。JSが #screen-boom に .ready を付けたときだけ現れる */
#btn-retry{
  position:absolute;
  left:calc(var(--safe-l) + 16px);
  right:calc(var(--safe-r) + 16px);
  bottom:calc(var(--safe-b) + 30px);
  z-index:3;
  margin:0 auto;
  max-width:440px;
  padding:19px 12px;
  border:0;
  border-radius:15px;
  background:#fff;
  color:#111;
  font-size:19px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 0 0 3px #fff, 0 6px 0 #8f939c, 0 10px 28px rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease;
}
#screen-boom.ready #btn-retry{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
#screen-boom.ready #btn-retry:active{
  transform:translateY(3px);
  box-shadow:0 0 0 3px #fff, 0 3px 0 #8f939c, 0 6px 18px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion:reduce){
  #screen-boom::before{ animation:none; }
  #btn-retry{ transition:opacity .6s ease; transform:none; }
  #screen-boom.ready #btn-retry{ transform:none; }
}