/* ============ dungeon.css: 探索画面(背景・進路選択・瀕死救出・財宝・煙玉演出等) ============ */
  .floor-badge { text-align: left; padding: 122px 0.6rem 0.6rem; }
  /* 階層表示を目立たせるため、単なるテキストから縁取り付きのバッジ(枠+背景+影)にした */
  .floor-badge span {
    display: inline-block; font-size: 1.45rem; font-weight: 800; color: var(--accent);
    letter-spacing: 0.05em; background: var(--panel-2); border: 1px solid var(--accent);
    border-radius: var(--radius-pill); padding: 0.4rem 1.5rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7); box-shadow: 0 2px 14px rgba(0,0,0,0.4);
  }
  /* 奉行所の依頼受注中、探索画面で対象の敵と残り層数を常に見えるようにするバッジ。
     依頼が無い時はdisplay:noneではなくvisibility:hiddenにして、常に同じ高さを確保しておく
     (display:noneで出し入れすると、下のログ欄が依頼の有無によって上下にずれてしまっていたため) */
  .quest-target-badge {
    text-align: center; margin: 0.3rem 1rem 0; font-size: 0.75rem; font-weight: 700; color: var(--accent);
    background: var(--panel-2); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 0.3rem 0.6rem;
    min-height: 1.6rem; box-sizing: border-box; visibility: hidden;
  }
  /* カラス変身中の「観察眼」: 次に行動する味方/敵のカードに出す青い矢印バッジ */
  .next-actor-badge {
    position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
    font-size: 0.62rem; font-weight: 700; color: #fff; white-space: nowrap;
    background: rgba(43,110,255,0.9); border-radius: var(--radius-pill); padding: 0.1rem 0.4rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6); box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    z-index: 6;
  }
  /* display:flex+justify-content:centerで、行数(1〜3行)に関わらず中身を垂直方向に正しく中央寄せする。
     内容がボックスの高さを超える(古いログが多く溜まった)場合はjustify-content自体が効かなくなり、
     自然に従来通りの上詰め+overflow-yスクロールへフォールバックするため、両方のケースが両立する */
  .dungeon-bg {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateZ(0);
    width: 100%; max-width: 480px; height: 100vh; height: 100dvh;
    background-size: cover; background-position: center; z-index: 0;
  }
  /* 探索背景への極弱の環境アニメーション(霧+木漏れ日)。既存の暗いグラデーションと同じ::afterに
     レイヤーとして重ね、position:absoluteの重なり順を追加せずに済ませている(新規要素は増やさない)。
     動きは50秒超の非常にゆっくりした往復のみ、不透明度もごく薄く、背景が主張しすぎないようにしてある */
  .dungeon-bg::after {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 55% 38% at 25% 28%, rgba(255,246,214,0.06), transparent 62%),
      radial-gradient(ellipse 48% 34% at 78% 68%, rgba(255,255,255,0.04), transparent 65%),
      linear-gradient(to bottom, rgba(20,24,27,0.2), rgba(20,24,27,0.55) 55%, rgba(20,24,27,0.88));
    background-size: 160% 160%, 160% 160%, 100% 100%;
    animation: dungeonAmbientDrift 55s ease-in-out infinite;
  }
  @keyframes dungeonAmbientDrift {
    0%, 100% { background-position: 20% 25%, 80% 70%, 0 0; }
    50% { background-position: 32% 18%, 68% 78%, 0 0; }
  }
  /* 「進む」「里に戻る」の移動演出で背景だけをscale/translateさせるための内側レイヤー。
     親(#dungeonBg)はposition:fixedの中央寄せ(translateX(-50%))を担うだけにし、画像と
     アニメーション対象はこの子要素に分離することで、アニメーションが中央寄せの位置指定を
     上書きして背景が右に寄って見えてしまう不具合を避ける */
  .dungeon-bg-inner { position: absolute; inset: 0; background-size: cover; background-position: center; }
  /* 野営の夜の行動選択シーンは背景の野営地イラストを見せたいため、共通の.dungeon-bgが持つ暗いグラデーションを外す */
  #campBg::after { background: none; animation: none; }
  /* z-indexは.party-bar(4)より高くする: 内側の.dungeon-top(z-index:5)はこのスタッキングコンテキストに
     閉じ込められるため、こちら自体を.party-barより上げないと瀕死アラートのボタンが増えた時に隠れてしまう。
     ただしflex:1で画面全体に引き伸ばされるため、pointer-events:noneにしないと実体の無い透明な部分が
     .party-bar(z-indexが低い)より手前になり、味方イラストのタップを奪ってしまう(実際に発生したバグ)。
     実際にクリックさせたい子要素(.dungeon-top/.bottom-actions)側だけpointer-events:autoで戻す */
  .dungeon-content { position: relative; z-index: 5; display: flex; flex-direction: column; flex: 1; padding-top: 16px; padding-bottom: 80px; pointer-events: none; }
  .dungeon-content > * { pointer-events: auto; }
  .dungeon-top {
    /* 戦闘画面の.battle-topと同じtop:0にする。z-indexも.battle-top(5)と同じにして
       .party-bar(4)より上にし、瀕死アラートのボタンが増えて縦に伸びた時に
       party-barに隠れてタップできなくなるのを防ぐ */
    position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateZ(0);
    width: 100%; max-width: 480px; z-index: 5;
  }
  /* #dungeonLogの開始Y座標を#battleLogと確実に一致させるための構造。以前はfloor-badge/
     quest-target-badge/criticalAlertが通常フローで縦に並び、その合計の高さ分だけ
     #dungeonLogが下に押し下げられていた(floor-badgeのpadding-topやmarginの数値をどれだけ
     調整しても、しょせん実際の合計高さと一致させる保証がなく、根本的にズレる作りだった)。
     .dungeon-info-rowを.enemy-row(height:176px固定)と全く同じ高さの箱にし、その直後に
     #dungeonLogを置くことで、戦闘画面の「.enemy-row(176px)→#battleLog」と全く同じ構造にする。
     中身(floor-badge等)は.dungeon-info-stackにまとめてposition:absoluteにし、
     実際の内容の高さが.dungeon-info-rowの高さ(176px)に一切影響しないようにしてある
     (瀕死アラートで中身が伸びる場合はこの170px枠をはみ出して表示されるが、それは
     .enemy-row側にも無い状況なので、はみ出し自体は許容している) */
  .dungeon-info-row { position: relative; height: 176px; }
  .dungeon-info-stack { position: absolute; top: 0; left: 0; right: 0; }
  /* ============ 瀕死救出アラート: 「和風の高級な告知札」演出 ============
     赤い確認ダイアログではなく、黒〜濃茶ベース+金の細枠の告知札に変更。表示/非表示ともごく短い
     scale+opacityの演出のみ(重い演出・常時アニメーションは無し)。ゲームロジック・イベント処理は
     一切変更せず、既存の#criticalAlert/onResolved/showCarryPicker等の仕組みをそのまま流用している */
  .critical-alert {
    background: linear-gradient(180deg, rgba(46,37,26,0.97) 0%, rgba(46,37,26,0.96) 45%, rgba(22,17,12,0.97) 100%);
    border: 1.5px solid var(--accent); border-radius: var(--radius-lg);
    box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1);
    padding: 0.8rem 1rem; margin: 0.55rem 1rem;
    animation: criticalAlertIn 0.15s ease-out;
  }
  @keyframes criticalAlertIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
  .critical-alert.critical-alert-closing { animation: criticalAlertOut 0.15s ease-in forwards; pointer-events: none; }
  @keyframes criticalAlertOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.97); } }
  /* 選択中は背景を暗くして「重大イベント」であることを示す。閉じれば自動的に消える(bodyクラス連動) */
  body.critical-alert-active::before {
    content: ""; position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; height: 100%; z-index: 2; pointer-events: none;
    background: rgba(0,0,0,0.23); opacity: 0; animation: pathDimIn 0.15s ease forwards;
  }
  /* 「読む画面」ではなく「2秒で理解できる画面」を目指し、情報量を最小限(タイトル/キャラ/名前・職業/
     残り時間/場所のみ)に絞り、上下の余白も詰めてコンパクトにしてある */
  .critical-alert-title {
    text-align: center; font-size: 1.28rem; font-weight: 800; color: #efe2c2;
    letter-spacing: 0.06em; margin: 0 0 0.5rem; text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  }
  .critical-alert-portrait { width: 128px; height: 128px; margin: 0 auto 0.45rem; }
  .critical-alert-portrait img { width: 100%; height: 100%; object-fit: contain; background: #353a44; border-radius: 8px; }
  .critical-alert-name { text-align: center; font-size: 1.1rem; font-weight: 800; color: #efe2c2; margin: 0; }
  .critical-alert-job { text-align: center; font-size: 0.7rem; color: #c7bda3; margin: 0 0 0.4rem; }
  .critical-alert-timer { display: flex; align-items: baseline; justify-content: center; gap: 0.35rem; margin: 0 0 0.35rem; }
  .critical-alert-timer-label { font-size: 0.7rem; color: #e08e84; font-weight: 600; }
  .critical-alert-timer-value { font-size: 1.75rem; font-weight: 800; color: var(--danger); text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
  .critical-alert-place { text-align: center; font-size: 0.74rem; color: #c7bda3; margin: 0 0 0.6rem; }
  .critical-alert-actions { display: flex; flex-direction: column; gap: 0.4rem; }
  .critical-alert-btn { min-height: 45px; }
  .critical-alert-skip-btn {
    padding: 0.35rem; font-size: 0.82rem; opacity: 0.82;
  }
  /* 進路選択パネル(critical-alertの赤枠とは別の専用デザイン。和風の落ち着いた高級感を出すため
     黒〜濃いグレーの半透明+細い金枠にしている) */
  .path-choice-panel {
    background: linear-gradient(180deg, rgba(26,22,18,0.92), rgba(12,11,9,0.90));
    border: 1px solid var(--accent); border-radius: var(--radius-lg);
    padding: 1rem 0.9rem; margin: 0.7rem 1rem;
    animation: pathChoiceFadeIn 0.2s ease forwards;
  }
  @keyframes pathChoiceFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .path-choice-title {
    text-align: center; font-size: 1.08rem; font-weight: 800; color: #ecdfc0;
    letter-spacing: 0.12em; margin: 0 0 0.85rem; text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  }
  /* 選択肢が1〜3択と可変のため、flex:1で均等割りにすると1択の時だけ異様に大きくなっていた。
     カード自体を固定サイズにしてjustify-content:centerで中央寄せし、選択肢数に関わらず同じ大きさで揃える */
  .path-choice-cards { display: flex; gap: 0.5rem; justify-content: center; }
  .path-card {
    /* 3択の時に横幅が親パネルからはみ出ていた不具合の修正: flex-shrinkを1にして、
       1〜2択の時は128pxのまま、3択で収まりきらない時だけ縮んで必ずパネル内に収まるようにする */
    flex: 0 1 128px; min-width: 0; width: 128px; height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.35rem; background: rgba(8,8,8,0.8); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md);
    color: #d8d0bf; opacity: 0.78; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  }
  .path-card .path-card-icon { font-size: 1.35rem; }
  .path-card .path-card-label { font-size: 0.72rem; white-space: normal; line-height: 1.25; }
  .path-card:hover, .path-card:active {
    transform: scale(1.03); border-color: var(--accent);
    box-shadow: 0 0 14px rgba(201,162,74,0.55); opacity: 1;
  }
  /* 進路選択を閉じるだけの「戻る」(里に戻る、ではない)。道カードより目立たせない控えめな見た目 */
  .path-choice-cancel {
    display: block; width: 100%; margin-top: 0.7rem; padding: 0.5rem;
    background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md);
    color: var(--text-muted); font-size: 0.78rem; font: inherit; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .path-choice-cancel:hover, .path-choice-cancel:active { border-color: var(--accent); color: var(--text); }
  /* 進路選択パネルの表示中は、視線をそちらへ集中させるため味方表示/操作ボタンを一時的に薄くする */
  body.path-choice-active #dungeonPartyBar, body.path-choice-active .bottom-actions {
    opacity: 0.65; transition: opacity 0.18s ease;
  }
  /* ============ 進路選択の演出(木札が縦に連なる「森の分岐」演出) ============
     既存の.path-choice-panel/.path-choice-cards/.path-cardはそのまま(横並びカード用の土台として)
     残し、ここでは新しいクラス(.path-tags-*)を追加するだけに留めて上書きする。ゲーム性・抽選ロジック・
     クリック時のコールバックは一切変更していない(見た目と演出のみ)。
     「常時揺れる/半透明すぎる/安っぽい」という指摘を受け、無限アニメーションを全廃し、
     動くのは表示された瞬間・押した瞬間・決定した瞬間だけにしてある(静止状態が基本) */
  /* ①③背景を20〜25%暗くし、選択中であることを分かりやすくする。.dungeon-bg(z-index:0)より前、
     .party-bar(z-index:4)より後ろに挟むことで、背景美術だけが沈み込み手前のUIには影響しない。
     真っ黒にはせず、木札の向こうに森がうっすら見える程度に留める */
  body.path-choice-active::before {
    content: ""; position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; height: 100%; z-index: 2; pointer-events: none;
    background: rgba(0,0,0,0.23); opacity: 0; animation: pathDimIn 0.15s ease forwards;
  }
  /* パネル自体は箱を持たず、木札だけが宙に浮くようにする(背景の写真をそのまま見せたいため) */
  .path-tags-panel { background: none; border: none; box-shadow: none; padding: 0; }
  /* ②木札を縦に並べる。木札同士は.path-tag-ropeという細い縄目(repeating-gradient)で繋ぐ(静止) */
  .path-choice-cards.path-tags-stack { flex-direction: column; align-items: center; gap: 0; }
  .path-tag-rope {
    display: block; width: 2px; height: 13px; margin: 0 auto;
    background: repeating-linear-gradient(to bottom, rgba(224,204,153,0.6) 0 3px, transparent 3px 6px);
  }
  /* ③木札本体: 焦げ茶の枠+上だけ薄く明るく/下だけ薄く暗いグラデーション+内側ハイライトで
     「木札の質感」を表現する(木目テクスチャ画像は不使用)。背景に溶けないよう90〜95%の
     不透明度にし、常時アニメーションは持たせない(静止が基本) */
  .path-tag {
    flex: 0 0 auto; width: min(78vw, 260px); height: auto; flex-direction: row; align-items: center; justify-content: flex-start;
    gap: 0.7rem; padding: 0.65rem 0.9rem; margin: 0.25rem 0; opacity: 1;
    background: linear-gradient(180deg, rgba(69,54,36,0.95) 0%, rgba(69,54,36,0.94) 45%, rgba(38,29,19,0.96) 100%);
    border: 1.5px solid #3a2a17; border-radius: 10px;
    box-shadow: 0 3px 7px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -6px 10px -6px rgba(0,0,0,0.35);
    transition: transform 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;
  }
  /* ⑤押した瞬間だけ軽く浮かせる(0.15秒、scale(1.03))。常時は動かさない。派手なグロー装飾も禁止 */
  .path-tag:hover, .path-tag:active {
    transform: scale(1.03); border-color: var(--accent); opacity: 1;
    box-shadow: 0 4px 9px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.14);
  }
  .path-tag .path-card-icon { font-size: 1.7rem; flex-shrink: 0; }
  .path-tag-text { display: flex; flex-direction: column; gap: 0.18rem; text-align: left; min-width: 0; }
  .path-tag .path-card-label { font-size: 0.95rem; font-weight: 800; color: #efe2c2; white-space: normal; line-height: 1.2; }
  .path-tag .path-card-desc { font-size: 0.64rem; color: #c7bda3; opacity: 0.85; line-height: 1.3; }
  /* ⑥決定演出: 選んだ木札だけ少し前へ出る(scale+わずかに浮く程度、光や輝きは付けない) */
  .path-tag.path-tag-selected {
    transform: scale(1.04) translateY(-2px); border-color: var(--accent); opacity: 1;
    box-shadow: 0 5px 11px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.14);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    z-index: 2; position: relative;
  }
  /* 選ばれなかった木札は0.15〜0.2秒でopacityのみフェードアウト(transformは動かさない) */
  .path-tag.path-tag-fading {
    transition: opacity 0.18s ease-out; opacity: 0; pointer-events: none;
  }
  .path-tags-stack.path-tags-locked .path-tag-rope { transition: opacity 0.15s ease-out; opacity: 0; }
  /* 財宝発見時のポップアップ(戦闘画面で敵が表示される高さに合わせ、ゴールドの量に応じた
     イラストだけを一瞬表示する。文字ラベルは含まないイラストを使う) */
  .treasure-popup {
    position: fixed; top: 110px; left: 50%; transform: translate(-50%, 0) translateZ(0);
    z-index: 20; pointer-events: none; display: flex; align-items: center; justify-content: center;
  }
  .treasure-popup img {
    width: 110px; max-width: 32vw; height: auto;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6));
    animation: treasurePop 1.8s ease forwards;
  }
  @keyframes treasurePop {
    0% { opacity: 0; transform: scale(0.7); }
    12% { opacity: 1; transform: scale(1.05); }
    20% { opacity: 1; transform: scale(1); }
    78% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.05); }
  }
  /* 宿泊時の夜明け演出: 朝→昼→夕→夜と背景をクロスフェードでめくっていき、最後(夜→朝)だけ
     暗転を挟んでから朝の映像で明ける。動画ファイルは使わず、背景イラストの重ね合わせ+
     JSで制御するopacity遷移だけで表現しているので読み込み負荷は増えない */
  /* 「進む」「里に戻る」の移動演出用の暗転オーバーレイ。背景画像自体(#dungeonBg)はJSでtransformを
     アニメーションさせ、こちらは画面全体を一瞬暗転させて処理を挟むための単純な黒幕 */
  .move-transition-black { position: fixed; inset: 0; z-index: 61; background: #000; opacity: 0; pointer-events: none; }
  /* 煙玉使用時、画面いっぱいに煙が広がって消える演出。複数の煙玉(radial-gradient+blur)を
     少しずつ時間差で膨らませて重ね、最後にまとめてフェードアウトさせることで自然な煙の広がりを表現する */
  .smoke-effect { position: fixed; inset: 0; z-index: 62; overflow: hidden; pointer-events: none; }
  .smoke-puff {
    position: absolute; width: 70vw; height: 70vw; max-width: 420px; max-height: 420px;
    border-radius: 50%; filter: blur(18px);
    background: radial-gradient(circle, rgba(210,210,205,0.95), rgba(160,160,155,0.55) 55%, rgba(160,160,155,0) 78%);
    opacity: 0; transform: scale(0.4);
    animation: smokePuffGrow 1.4s ease-out forwards;
  }
  .smoke-puff.p1 { left: -10%; top: 30%; animation-delay: 0s; }
  .smoke-puff.p2 { left: 25%; top: 10%; animation-delay: 0.08s; }
  .smoke-puff.p3 { left: 55%; top: 25%; animation-delay: 0.16s; }
  .smoke-puff.p4 { left: 10%; top: 45%; animation-delay: 0.22s; }
  .smoke-puff.p5 { left: 45%; top: 45%; animation-delay: 0.3s; }
  .smoke-puff.p6 { left: 70%; top: 15%; animation-delay: 0.12s; }
  @keyframes smokePuffGrow {
    0% { opacity: 0; transform: scale(0.4) translateY(0); }
    35% { opacity: 1; transform: scale(1) translateY(-4%); }
    75% { opacity: 0.95; transform: scale(1.25) translateY(-10%); }
    100% { opacity: 0; transform: scale(1.4) translateY(-16%); }
  }
  .critical-alert p { margin: 0.2rem 0; font-size: 0.82rem; }
  .bottom-actions {
    /* topはJSで味方表示の実測位置から毎回計算して設定する(戦闘画面と同じ仕組み) */
    position: fixed; top: 500px; left: 50%; transform: translateX(-50%) translateZ(0);
    width: 100%; max-width: 480px; box-sizing: border-box; z-index: 3;
    padding: 0.8rem 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem;
  }
  .bottom-actions button { flex: 1 1 auto; min-width: 90px; }
  /* 道具ボタンは他がhealBtn非表示等で奇数本になった時、行に1つだけ残ってflex:1 1 autoのまま
     横幅いっぱいに伸びてしまう(他のボタンだけ並んだ時より不自然に大きく見える)ため、
     他のボタンと同じくらいのサイズで頭打ちにする */
  #dungeonToolsBtn { flex: 0 1 160px; }