/* ══════════════════════════════════════════════════════════════
   hud-layout.css — HUD 配置の最終決定版
   index.html で最後に読み込むこと。
   以前は style.css / ui-refresh.css / festival.css / survival.css が
   それぞれ同じ ID に位置指定を書いていて、後勝ちで打ち消し合っていた。
   位置に関する指定はここへ集約する。
   ══════════════════════════════════════════════════════════════ */

:root {
  --hud-gap: 8px;
  --hud-edge: 12px;
  --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);
  /* 画面下の操作クラスタが占める高さ。ふきだしはこれより上に出す。 */
  --pad-h: 232px;
}

/* ── 左上スタック: ミニマップ → 天気 → 体力/空腹 ──────────────
   中身は flex で縦に積むので、各要素の個別 top 指定は無効化する。 */
#hud-left-stack {
  position: absolute;
  left: calc(var(--safe-l) + var(--hud-edge));
  top: calc(var(--safe-t) + 104px);
  width: 176px;
  display: flex;
  flex-direction: column;
  gap: var(--hud-gap);
  pointer-events: none;
  z-index: 30;
}

/* ── 右上スタック: フェスタ → レース → 住民クエスト ───────── */
#hud-right-stack {
  position: absolute;
  right: calc(var(--safe-r) + var(--hud-edge));
  /* hud-top（コイン表示とメニューボタン）の下に必ず来る高さ */
  top: calc(var(--safe-t) + 78px);
  width: 226px;
  display: flex;
  flex-direction: column;
  gap: var(--hud-gap);
  pointer-events: none;
  z-index: 30;
}

/* スタックに入れた要素は、自前の絶対配置をやめて流し込みにする */
#hud-left-stack > *,
#hud-right-stack > * {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}
#hud-left-stack > *[hidden],
#hud-right-stack > *[hidden] { display: none !important; }
/* レース中止ボタンなど、スタック内のボタンは押せるようにする */
#hud-left-stack button,
#hud-right-stack button { pointer-events: auto; }
#hud-left-stack #minimap canvas { width: 100%; height: auto; display: block; }

/* 体力・空腹は「体\n力」と折り返さないようにし、バーを伸縮させる */
#survival-hud label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#survival-hud label > progress { flex: 1 1 auto; min-width: 0; width: auto !important; }
#survival-hud label > b { flex: 0 0 auto; text-align: right; }
#survival-time, #survival-tip { display: block; white-space: normal; }

/* ── 画面下の操作クラスタ ────────────────────────────────
   スティック（左）と、アクションボタン群（右）。
   アクションは縦 flex なので、入店・攻撃・回避が増えても重ならない。 */
#touch-controls {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--safe-b) + 16px);
  padding: 0 calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 16px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 25;
}
.touch-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.touch-action-row { display: flex; align-items: flex-end; gap: 10px; }

/* 戦闘ボタンを操作クラスタの一員にする（旧: 画面右に独立配置） */
#combat-controls {
  position: static !important;
  inset: auto !important;
  display: flex;
  gap: 10px;
  z-index: auto;
}

/* ── タッチボタンの見た目を統一 ──────────────────────────
   以前は 52〜72px の円と、角丸の長方形（攻撃・回避）が混在し、
   さらに ≤650px で中身の span が全部隠れて「空の丸」になっていた。 */
#touch-controls .touch-btn,
#touch-controls #combat-controls button {
  width: 60px; height: 60px;
  min-width: 60px; min-height: 60px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
#touch-controls .touch-btn-jump { width: 68px; height: 68px; }

/* 上の display:flex は .hidden や #btnTouchDeliver の非表示より
   詳細度が高いので、隠すべきボタンを明示的に隠し直す。 */
#touch-controls .touch-btn.hidden,
#touch-controls .touch-btn[hidden],
#touch-controls #btnTouchDeliver { display: none !important; }

/* アイコンとラベルを必ず両方見せる（≤650px の一括 span 非表示を打ち消す） */
#touch-controls .touch-btn > span,
#touch-controls #combat-controls button > span {
  display: block !important;
  margin: 0 !important;
  font-size: 9px;
  line-height: 1.1;
  white-space: nowrap;
  letter-spacing: 0;
  font-weight: 700;
}
#touch-controls .touch-btn .ui-icon,
#touch-controls #combat-controls button .ui-icon { width: 18px; height: 18px; }
#touch-controls .touch-btn-jump .ui-icon { width: 20px; height: 20px; }

/* 攻撃・回避は戦闘中だとすぐ分かる配色にする */
#touch-controls #combat-controls #combat-attack {
  background: radial-gradient(circle at 30% 30%, #c2563f 0%, #7d2a1c 100%);
  border: 2px solid #ffb38a; color: #fff;
}
#touch-controls #combat-controls #combat-dodge {
  background: radial-gradient(circle at 30% 30%, #2f6f86 0%, #17384a 100%);
  border: 2px solid #8fd6ef; color: #fff;
}
#touch-controls #combat-controls button:disabled { opacity: .45; }

/* ロックオンは夜だけ出す（昼は邪魔なので消す） */
#btn-lockon { display: none !important; }
body.is-night #btn-lockon { display: flex !important; }

/* ── ライオンのふきだし: 操作クラスタより必ず上 ────────────
   style.css が top:75px、ui-refresh.css が bottom を指定していて
   両方効いた結果、縦に伸びた箱の下端がスティックに重なっていた。 */
.hud-bottom {
  position: absolute !important;
  top: auto !important;
  left: calc(var(--safe-l) + 16px);
  right: calc(var(--safe-r) + 16px);
  bottom: calc(var(--safe-b) + var(--pad-h));
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.hud-speech-bubble { max-width: min(430px, 100%); }

/* ── 目標バナー: 左スタックと横に並ぶ幅へ制限 ───────────── */
#transient-objective {
  position: absolute;
  top: calc(var(--safe-t) + 92px);
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 460px);
  z-index: 33;
}

/* 室内へ持ち込んだときの体力表示（カフェ・大聖堂の左下） */
#survival-hud.vitals-interior {
  position: absolute !important;
  left: calc(var(--safe-l) + 12px) !important;
  top: auto !important;
  bottom: calc(var(--safe-b) + 150px) !important;
  width: 168px !important;
  z-index: 42;
}
@media (max-height: 560px) {
  #survival-hud.vitals-interior { bottom: calc(var(--safe-b) + 116px) !important; }
}

/* ロックオンリングは JS が画面座標を直接入れるので fixed で固定 */
#lockon-hud {
  position: fixed !important;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
}

/* ══ タブレット・小さめ画面 (≤850px) ══════════════════════ */
@media (max-width: 850px) {
  #hud-left-stack  { left: calc(var(--safe-l) + 8px); top: calc(var(--safe-t) + 88px); width: 132px; }
  #hud-right-stack { right: calc(var(--safe-r) + 8px); top: calc(var(--safe-t) + 72px); width: 188px; }
  #transient-objective { top: calc(var(--safe-t) + 84px); max-width: calc(100vw - 300px); }
  #touch-controls { padding: 0 calc(var(--safe-r) + 12px) 0 calc(var(--safe-l) + 12px); }
  #touch-controls .touch-btn,
  #touch-controls #combat-controls button { width: 56px; height: 56px; min-width: 56px; min-height: 56px; }
  #touch-controls .touch-btn-jump { width: 62px; height: 62px; }
  .hud-speech-bubble { font-size: 12px; padding: 8px 12px; }
}

/* ══ スマートフォン (≤650px) ══════════════════════════════ */
@media (max-width: 650px) {
  :root { --pad-h: 214px; }
  #hud-left-stack  { top: calc(var(--safe-t) + 76px); width: 112px; }
  #hud-right-stack { top: calc(var(--safe-t) + 68px); width: min(200px, 58vw); }
  #hud-left-stack #survival-hud { font-size: 10px; padding: 7px 8px; }
  #hud-left-stack #survival-hud progress { width: 56px; }
  /* スマホは上部が左スタックと右スタックで埋まるので、
     目標バナーはふきだしのすぐ上（下部中央）へ置く。 */
  #transient-objective {
    top: auto;
    bottom: calc(var(--safe-b) + var(--pad-h) + 58px);
    max-width: calc(100vw - 32px);
    font-size: 12px;
  }
  #touch-controls .touch-btn,
  #touch-controls #combat-controls button { width: 52px; height: 52px; min-width: 52px; min-height: 52px; }
  #touch-controls .touch-btn-jump { width: 58px; height: 58px; }
  #touch-controls .touch-btn > span,
  #touch-controls #combat-controls button > span { font-size: 8px; }
}

/* ══ 高さが足りない横向き (≤560px) ════════════════════════
   ボタンを小さくし、ふきだしと左スタックを詰める。 */
@media (max-height: 560px) {
  :root { --pad-h: 176px; }
  #hud-left-stack { top: calc(var(--safe-t) + 70px); width: 116px; }
  #hud-left-stack #survival-tip { display: none; }
  #hud-left-stack #minimap span { display: none; }
  #hud-right-stack { top: calc(var(--safe-t) + 74px); }
  #transient-objective { top: calc(var(--safe-t) + 56px); }
  #touch-controls .touch-btn,
  #touch-controls #combat-controls button { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
  #touch-controls .touch-btn-jump { width: 54px; height: 54px; }
  #touch-controls .touch-btn .ui-icon,
  #touch-controls #combat-controls button .ui-icon { width: 16px; height: 16px; }
  /* 縦に余裕がないので、ふきだしは左スタックの右隣から始める */
  .hud-bottom { left: calc(var(--safe-l) + 140px); }
  .touch-stick-zone { width: 92px !important; height: 92px !important; }
  .touch-stick-knob { width: 38px !important; height: 38px !important; }
}