/* ホーム画面アプリ（全画面）で、ノッチ・ステータスバー・ホームバーに UI が隠れないようにする + 「ホーム画面に置く」案内（10-17）。
   env() が 0 の普通のブラウザでは、これまでの見た目と変わらない。
   --sat / --sab は検査で上書きできる（tools/pwa_ui.mjs が 47px / 34px を入れて撮る）。 */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }

/* タイトル: 絵は端まで。ロゴとボタンだけ避ける */
#s-title { padding-bottom: calc(12% + var(--sab)); }
.title-logo { top: calc(9% + var(--sat)); }

/* 見出しの帯（拠点・たいせん・ステージ・おまかせ・ガチャ・お知らせ）: 帯の背景は画面の背景のまま上へ伸ばす */
.bar { padding-top: var(--sat); height: calc(54px + var(--sat)); }
#s-home .bar { height: auto; padding-top: calc(6px + var(--sat)); }
#s-versus .bar { padding-top: var(--sat); }

/* 下: ボタン列・リストが、ホームバーの下に潜らない */
.home-foot { padding-bottom: calc(4px + var(--sab)); }
.gacha-foot { padding-bottom: var(--sab); }
#s-auto { padding-bottom: max(10px, var(--sab)); }
#s-news { padding-bottom: max(10px, var(--sab)); }
.stage-list { padding-bottom: calc(16px + var(--sab)); }
#s-versus #vs-levels { padding-bottom: calc(18px + var(--sab)); }

/* 戦闘: 上は「味方を長押し…」の帯と同じ紺、下は召喚カードの列と同じ紺で、枠として足す（盤面・カード列の大きさは変えない） */
#s-battle { border-top: var(--sat) solid #0d1530; border-bottom: var(--sab) solid #0d1530; }

/* ---------- 「ホーム画面に置く」案内 ---------- */
.pwa-modal { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: #000b;
  padding: calc(12px + var(--sat)) 12px calc(12px + var(--sab)); }
.pwa-modal[hidden] { display: none; }
.pwa-win { width: min(100%, 380px); max-height: 100%; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; padding: 14px 14px 12px; text-align: center; font-size: 13px; line-height: 1.6; }
.pwa-head { display: flex; align-items: center; gap: 10px; text-align: left; }
.pwa-head img { width: 56px; height: 56px; border-radius: 13px; border: 2px solid var(--line); flex: none; }
.pwa-head h3 { margin: 0; font-size: 17px; font-weight: normal; color: var(--gold); }
.pwa-why { margin: 2px 0 0; font-size: 12px; color: #cfe4ff; }
.pwa-steps { list-style: none; margin: 10px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.pwa-steps li { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; align-items: center; background: #18244a; border-radius: 8px; padding: 6px; }
.pwa-steps svg { width: 124px; height: auto; display: block; border-radius: 6px; }
.pwa-steps .t { font-size: 12px; line-height: 1.55; }
.pwa-steps .t b { color: var(--gold); margin-right: 4px; }
.pwa-steps .t small { display: block; font-size: 10.5px; opacity: .75; margin-top: 2px; line-height: 1.45; }
.pwa-plain { margin: 8px 0 4px; font-size: 12px; text-align: left; }
.pwa-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pwa-btns .btn { margin: 0; width: 100%; }
.pwa-btns .row { display: flex; gap: 8px; }
.pwa-btns .row .btn { flex: 1; font-size: 13px; }
.pwa-done { font-size: 11px; opacity: .7; margin-top: 6px; }
.pwa-ring { animation: pwaPulse 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pwaPulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pwa-ring { animation: none; } }
@media (max-width: 340px) { .pwa-steps li { grid-template-columns: 100px minmax(0, 1fr); } .pwa-steps svg { width: 100px; } }