/* ⚠ box-sizing は「* の一括指定が効いていること」に依存させない。
   後から読まれる別のスタイルシート(拡張機能の注入など)に同じ詳細度の
   `* { box-sizing: ... }` があると、後勝ちで打ち消される。実際にそれが起きると
   width:100% + 左右padding のボタンが親カードより横に広がり、枠からはみ出す。
   はみ出しては困る要素には、個別にも border-box を書いておく。 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; overscroll-behavior: none;
  background: #000; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  touch-action: none; /* ジェスチャーは自前で処理するのでブラウザ標準のパン/ズームを止める */
}
/* width/height は指定しない。XRExtras.FullWindowCanvas が canvas.style.width/height を
   自分で管理するため、CSS側で 100% を指定すると競合して描画領域が縮む
   (実機で「右上1/4だけ表示」となった原因)。 */
#ar-canvas { position: fixed; top: 0; left: 0; display: block; touch-action: none; }

/* ⚠ iOS Safari では fixed 要素の 100% / inset:0 は「アドレスバーが隠れた状態の
   大きいビューポート」を基準にする。そのため中央寄せしたカードが実際に見えている
   範囲より下にずれ、いちばん下の要素(オレンジのボタンと注意書き)が画面外に
   はみ出す。dvh(表示中のビューポート高さ)を使ってこれを防ぐ。
   カードが画面より高い場合に切れないよう、スクロールと margin:auto も併用する
   (flexのalign-items:centerだけだと上端が切れて戻せなくなる)。 */
.overlay {
  box-sizing: border-box;
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 20;
  height: 100%;
  height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(0,0,0,0.72);
  padding:
    calc(24px + env(safe-area-inset-top))
    calc(24px + env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));
}
.overlay.hidden { display: none; }

.card {
  box-sizing: border-box;
  max-width: 360px; width: 100%;
  margin: auto; flex: none;
  text-align: center;
  background: rgba(20,20,20,0.9);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 28px 22px;
}
.card h1 { font-size: 1.15rem; margin: 0 0 10px; }
.card p { font-size: 0.92rem; line-height: 1.7; color: #d8d8d8; margin: 0 0 16px; }
.card p.fine { font-size: 0.78rem; color: #999; margin-top: 18px; margin-bottom: 0; }
.card pre.tech {
  margin: 14px 0 0; padding: 10px 12px;
  background: rgba(0,0,0,0.4); border-radius: 8px;
  font-size: 0.68rem; line-height: 1.5; color: #f0a060;
  text-align: left; white-space: pre-wrap; word-break: break-all;
}
.card pre.tech.hidden { display: none; }

.btn-primary {
  box-sizing: border-box;
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 999px;
  display: block; max-width: 100%;
  padding: 14px 28px; font-size: 1rem; font-weight: 600;
  background: #e8833a; color: #1a1206; cursor: pointer;
  width: 100%;
}
.btn-primary:active { opacity: 0.85; }

.spinner {
  width: 34px; height: 34px; margin: 0 auto 16px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #e8833a;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hint {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; justify-content: center;
  padding: 0 20px calc(28px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.hint.hidden { display: none; }
.hint-inner {
  box-sizing: border-box; max-width: 100%;
  background: rgba(0,0,0,0.68);
  border-radius: 999px;
  padding: 12px 20px;
  display: flex; align-items: center; gap: 10px;
}
.hint-inner p { margin: 0; font-size: 0.88rem; text-align: center; }
.hint-inner.small p { font-size: 0.82rem; }

.scan-icon {
  width: 20px; height: 20px; flex: none;
  border: 2px solid #e8833a; border-radius: 4px;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

.badge {
  position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  background: rgba(0,0,0,0.6);
  color: #f0c060;
  font-size: 0.74rem;
  padding: 6px 14px;
  border-radius: 999px;
}
.badge.hidden { display: none; }

/* 診断パネル(?debug=1)。実機の症状をスクリーンショット1枚で把握するため */
.debug {
  position: fixed; left: 0; top: calc(env(safe-area-inset-top)); z-index: 30;
  margin: 0; padding: 8px 10px;
  background: rgba(0,0,0,0.72); color: #7dd3a0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px; line-height: 1.5;
  white-space: pre; pointer-events: none;
}
.debug.hidden { display: none; }

.btn-fab {
  position: fixed; right: calc(18px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 15;
  width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,0.55);
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.btn-fab.hidden { display: none; }
.btn-fab:active { background: rgba(0,0,0,0.8); }

/* 追跡を見失っている間の警告。通常の案内(黒)と区別できるよう縁を橙にする */
.hint-inner.warn {
  border: 1px solid rgba(232,131,58,0.9);
  background: rgba(0,0,0,0.8);
}

/* 高さ補正の読み値。実寸未設定バッジと同時に出ても重ならないよう一段下げる */
.badge.badge-lower {
  top: calc(48px + env(safe-area-inset-top));
  color: #fff;
  font-variant-numeric: tabular-nums;
}