html, body { margin:0; height:100%; background:#000; overflow:hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }
#videoLayer { position: fixed; inset: 0; z-index: 0; background:#000; object-fit: cover; width:100%; height:100%; }
#threeLayer { position: fixed; inset: 0; z-index: 1; width:100%; height:100%; display:block; }

#ui {
  position: fixed; left: 8px; right: 8px; top: 8px; z-index: 2;
  display: grid; grid-template-columns: auto auto 1fr auto auto auto; gap: 8px; align-items: center;
  background: rgba(0,0,0,.6); color:#fff; padding: 8px 10px; border-radius: 12px; font: 12px/1.3 system-ui;
}
select, button, label { font-size: 12px; }
select, button { padding: 6px 8px; border-radius: 8px; border: 0; }
button { background:#1e88e5; color:#fff; }
button.secondary { background:#424242; }

#detectBanner {
  position: fixed; right: 8px; top: 60px; z-index: 3;
  padding: 6px 10px; border-radius: 10px; font: 12px/1.3 system-ui;
  background: rgba(0,128,0,.85); color: #fff; display: none;
}

#debugToggle { display:flex; align-items:center; gap:6px; }
#log { white-space: nowrap; }

/* ===== Mobile-first UI overhaul ===== */

/* 安全領域（ノッチ対応） */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* 画面全体は現状維持 */
#videoLayer, #threeLayer { touch-action: manipulation; }

/* 旧：上部バー → 新：下部固定バー（モバイルで優先） */
#ui {
  position: fixed;
  left: 0; right: 0; bottom: 0; top: auto;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  background: rgba(0,0,0,.72);
  color: #fff;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  border-radius: 16px 16px 0 0;
  font: 14px/1.3 system-ui;
  backdrop-filter: blur(6px);
}

/* 左：主要操作，右：メニュー開閉 */
#ui .ui-main { display: flex; align-items: center; gap: 8px; overflow-x: auto; }
#ui .ui-tray { display:flex; align-items:center; justify-content:flex-end; gap:8px; }

/* 折りたたみセクション（詳細設定） */
#uiDetails {
  position: fixed;
  left: 0; right: 0; bottom: calc(56px + var(--safe-bottom));
  z-index: 2;
  background: rgba(0,0,0,.86);
  color: #fff;
  padding: 12px;
  display: none;
  border-top: 1px solid rgba(255,255,255,.12);
}
#uiDetails.open { display: block; }
#uiDetails .row { display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap; }

/* ボタン／セレクトのタップ最適化 */
button, select, label {
  font-size: 14px;
}
button, select {
  padding: 12px 14px;         /* 44px相当のタップ高さ */
  min-height: 44px;
  border-radius: 12px;
  border: 0;
}
button { background:#1e88e5; color:#fff; }
button.secondary { background:#424242; }

/* 小さな表示用の調整 */
#detectBanner {
  right: 8px;
  top: calc(8px + var(--safe-top));
  font: 12px/1.3 system-ui;
  padding: 6px 10px;
}

/* ラベル内セレクトを分離（モバイルで押しやすく） */
label { display:flex; align-items:center; gap:6px; }

/* 600px以上は横に余裕があるので，上部配置に戻す */
@media (min-width: 600px) {
  #ui {
    top: 8px; bottom: auto; left: 8px; right: 8px;
    border-radius: 12px;
    grid-template-columns: auto 1fr auto;
    padding-bottom: 8px;
  }
  #uiDetails {
    position: fixed;
    left: 8px; right: 8px;
    top: 60px; bottom: auto;
    border-radius: 12px;
  }
}

/* ログはモバイルでは隠し，詳細で表示 */
#log { display:none; }
#uiDetails #log { display:block; white-space:nowrap; overflow:auto; }

/* コンパクト化（旧デバッグ表示の可視化は詳細に移動） */
#debugToggle { display:none; }

/* ===== Camera Shutter Button ===== */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }

#captureBtn{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(72px + var(--safe-bottom)); /* 下部バーより少し上に */
  z-index: 4;
  width: 68px; height: 68px;
  border-radius: 999px;
  border: 0;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f2f2f2 60%, #e0e0e0 100%);
  box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
  outline: none;
}

#captureBtn::before{
  content:"";
  position:absolute; inset: 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
}

/* 押下アニメーション */
#captureBtn:active { transform: translateX(-50%) scale(0.96); }

/* 撮影時のフラッシュ（JSで .shot を一瞬付与） */
#captureBtn.shot::after{
  content:"";
  position: fixed; inset: 0;
  background: rgba(255,255,255,.6);
  animation: flash .18s ease-out;
  pointer-events: none;
}
@keyframes flash { from{opacity:.8} to{opacity:0} }

/* === Force the control bar to stay on TOP even on mobile === */
#ui {
  top: calc(8px + var(--safe-top));
  bottom: auto;
  left: 8px;
  right: 8px;
  border-radius: 12px;
  grid-template-columns: auto 1fr auto; /* 必要に応じて調整 */
  padding-bottom: 8px;
}

/* 詳細パネルも上側に出す（撮影ボタンと離す） */
#uiDetails {
  position: fixed;
  left: 8px; right: 8px;
  top: calc(60px + var(--safe-top));
  bottom: auto;
  border-radius: 12px;
}

/* === Fix: モバイルでUI文字が縦に割れる問題を防止（上書き） === */

/* ボタン／ラベル／セレクトの折り返しを禁止．CJKでも行内改行を抑止 */
#ui button,
#ui label,
#ui select {
  white-space: nowrap;       /* 強制的に1行表示 */
  word-break: keep-all;      /* 句読点以外では改行しない */
  text-overflow: ellipsis;   /* はみ出しは省略表示（必要に応じて） */
  overflow: hidden;
}

/* ツール群は縮まず，横に並べる（必要ならスクロール） */
#ui .ui-main {
  flex-wrap: nowrap;         /* 折り返さない */
}
#ui .ui-main > * {
  flex: 0 0 auto;            /* 縮小を禁止（wrapの元凶を遮断） */
}

/* セレクトの最大幅を端末幅に応じて制限（はみ出しにくく） */
@media (max-width: 599px) {
  #ui { overflow-x: visible; }     /* 親はそのまま */
  #ui .ui-main { overflow-x: auto; } /* 内側で横スクロール */
  #ui select { max-width: 44vw; }  /* ラベル付きでも潰れない目安値 */
}