/* バルちゃんAR — 画面固定UI
   配色は操作イメージ図に合わせた「空港のネイビー＋シアン」。
   アクセントの #22d3ee / #0a9396 は vartique のティール系。 */

:root {
  --navy: #0b2540;
  --navy-soft: rgba(11, 37, 64, .72);
  --cyan: #22d3ee;
  --teal: #0a9396;
  --orange: #f59e0b;
}

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: #000;
  font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* 8th Wall のブランディング（ロゴ・ドメイン表示・スプラッシュ）を隠す。
   OSS版は自己ホスト前提なので出さなくてよい。 */
.poweredby-img,
[class*="poweredby"],
img[src*="8thwall"], img[src*="powered"] { display: none !important; }
.domain-view { visibility: hidden !important; }
#loadBackground, #loadImageContainer { display: none !important; }

/* 8th Wall の「モーションセンサー許可」プロンプトを本編の配色に合わせる。
   （8th Wall ランタイムが生成する要素をCSSで上書き。文言は js/prompt-i18n.js） */
.prompt-box-8w,
.prompt-box-8w * {
  font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif !important;
}
.prompt-box-8w {
  background: linear-gradient(165deg, #ffffff 0%, #e6f2f8 100%) !important;
  color: #0b2540 !important;
  border: 2px solid var(--teal) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(11, 37, 64, .3) !important;
}
.prompt-button-8w { font-weight: 800 !important; border-radius: 999px !important; }
.button-primary-8w { background: var(--teal) !important; color: #fff !important; border: none !important; }
.button-secondary-8w { background: rgba(11,37,64,.08) !important; color: #33566f !important; border: none !important; }

a-scene { position: fixed; inset: 0; z-index: 1; }
a-scene .a-canvas { background: transparent !important; }

/* ローカル確認用プレビュー：AR無しなので背景を敷く（本番はカメラ映像） */
html.preview, html.preview body {
  background: linear-gradient(180deg, #5fa8cc 0%, #bcdcec 58%, #dfe6ea 100%);
}

/* ---------- 上部の小さいボタン ---------- */
.pill {
  position: fixed; z-index: 30;
  top: calc(max(10px, env(safe-area-inset-top)) + 46px);
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: var(--navy-soft); color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer;
  backdrop-filter: blur(6px);
  display: none;
}
.pill.on { display: block; }
.pill:active { transform: scale(.95); }
/* 上段は3つを横1列に：置き直す（左）／ゲーム（中央）／カメラ切り替え（右）。 */
#place-btn { left: 14px;  top: max(12px, env(safe-area-inset-top)); }
#cam-btn   { right: 14px; top: max(12px, env(safe-area-inset-top)); }

/* ゲームは主役なので中央に置いて、ひとまわり大きくする。
   中央寄せに transform を使っているので、押したときの縮みにも
   translateX を書き足さないと真ん中からずれる。 */
#game-btn {
  left: 50%; transform: translateX(-50%);
  top: max(12px, env(safe-area-inset-top));
  padding: 11px 30px; font-size: 15px; font-weight: 900; letter-spacing: .06em;
  border-color: rgba(255,255,255,.3);
}
#game-btn:active { transform: translateX(-50%) scale(.95); }

/* アイコンだけの丸ボタン（カメラ切り替え） */
.pill.icon {
  width: 40px; height: 40px; padding: 0;
  display: none; align-items: center; justify-content: center;
}
.pill.icon.on { display: flex; }
.pill.icon svg { width: 22px; height: 22px; }

/* インカメラ（顔認識）モードでは操縦しないので、
   ジョイスティックも置き直しもゲームも出さない。 */
html.front #game-btn,
html.front #place-btn,
html.front #boost-wrap,
html.front #controls .ctl-left { display: none !important; }

/* ---------- 画面下のひとことガイド ----------
   app.js の hint() が文字を入れて .on を付けると、下からふわっと出る。
   （基底のスタイルが抜けていて素のテキストとして出ていたので足した） */
#hint {
  position: fixed; left: 50%; z-index: 25;
  bottom: calc(196px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 8px);
  max-width: min(84vw, 340px); text-align: center;
  padding: 8px 16px; border-radius: 999px;
  background: var(--navy-soft); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1.5;
  pointer-events: none;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
#hint.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 操作UI ---------- */
#controls {
  position: fixed; left: 0; right: 0;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: none;
  /* 左＝スティック／中央＝シャッター／右＝ブースト。
     シャッターだけは絶対配置で中央に置いている。space-between に任せると、
     左右のブロックの幅が違う（スティック約130px / ブースト約62px）ぶん
     中央がずれてしまうため。 */
  align-items: flex-end; justify-content: space-between;
  /* 右ブロックのラベル「長押しで動画」が操作子より横に広いので、
     端の余白を多めに取らないと画面外へ切れる */
  padding: 0 26px;
  pointer-events: none;   /* 中の操作子だけ拾う */
}
#controls.on { display: flex; }
.ctl-block {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  pointer-events: auto;
  touch-action: none;     /* ドラッグでページが動かないように */
  flex: 0 0 auto;
}
.ctl-label {
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  pointer-events: none; white-space: nowrap; line-height: 1.4;
}

/* 移動ジョイスティック */
#stick-base {
  position: relative;
  width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(18,48,78,.78), rgba(6,22,38,.82));
  border: 2px solid rgba(120, 205, 235, .5);
  box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 0 22px rgba(34,211,238,.12);
  cursor: grab;
}
#stick-base.active { border-color: var(--cyan); box-shadow: 0 6px 22px rgba(0,0,0,.5), inset 0 0 26px rgba(34,211,238,.28); }
#stick-knob {
  position: absolute; top: 50%; left: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff, #cfd8de 62%, #9fb0bb);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  transition: transform .08s linear;
  pointer-events: none;
}
#stick-base.active #stick-knob { transition: none; }
/* 十字の矢印（操作イメージ図の水色の矢印） */
.stick-arrow {
  position: absolute; width: 0; height: 0; pointer-events: none;
  border: 7px solid transparent;
}
.stick-arrow.up    { top: 8px;  left: 50%; margin-left: -7px; border-bottom-color: var(--cyan); border-top-width: 0; }
.stick-arrow.down  { bottom: 8px; left: 50%; margin-left: -7px; border-top-color: var(--cyan); border-bottom-width: 0; }
.stick-arrow.left  { left: 8px;  top: 50%; margin-top: -7px; border-right-color: var(--cyan); border-left-width: 0; }
.stick-arrow.right { right: 8px; top: 50%; margin-top: -7px; border-left-color: var(--cyan); border-right-width: 0; }

/* 高度レバー */
/* ---------- シャッター（#controls の右ブロック） ---------- */
/* 画面の真ん中に置く。左右のブロックの幅に影響されないよう絶対配置。 */
#shutter-wrap {
  display: none;
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
}
#shutter-wrap.on { display: flex; }
#shutter { position: relative; width: 62px; height: 62px; cursor: pointer; }
#shutter-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
#shutter-progress { transition: stroke-dashoffset .1s linear; }
#shutter-dot {
  position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  transition: transform .2s ease, background .2s ease;
  pointer-events: none;
}
#shutter.rec #shutter-dot { transform: scale(.9); background: #ef4444; box-shadow: 0 0 25px rgba(239,68,68,.7); }
/* ---------- プレビュー ---------- */
#preview {
  position: fixed; inset: 0; z-index: 60; background: #000;
  display: none; flex-direction: column;
}
#preview.on { display: flex; }
#preview .pv-media {
  position: relative; flex: 1; background: #171717;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#preview .pv-media img, #preview .pv-media video {
  width: 100%; height: 100%; object-fit: contain; display: none;
}
#preview .pv-media img.on, #preview .pv-media video.on { display: block; }
#pv-close {
  position: absolute; top: 14px; left: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
#pv-close svg { width: 22px; height: 22px; }
#preview .pv-bar {
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #000; border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#preview .pv-actions { display: flex; gap: 8px; }
#preview button {
  border: none; border-radius: 999px; cursor: pointer;
  font-weight: 800; font-size: 12px; color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
}
#pv-retry { padding: 12px 16px; background: rgba(255,255,255,.1); }
#pv-save  { padding: 12px 20px; background: #262626; }
#pv-share { padding: 12px 24px; background: var(--teal); box-shadow: 0 4px 15px rgba(10,147,150,.35); }
#pv-share:active, #pv-save:active { transform: scale(.95); }
#preview button svg { width: 16px; height: 16px; }

/* ---------- ローディング／スタート／エラー ---------- */
#loading {
  position: fixed; inset: 0; z-index: 100; background: var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .4s ease;
}
#loading.hidden { opacity: 0; pointer-events: none; }
#loading .spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.2); border-top-color: var(--cyan);
  animation: spin .9s linear infinite;
}
#loading .msg {
  color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: .18em; margin-top: 22px;
}
@keyframes spin { to { transform: rotate(360deg); } }

#start-screen {
  position: fixed; inset: 0; z-index: 90;
  background: linear-gradient(170deg, #0b2540 0%, #14496e 55%, #1c6f92 100%);
  display: none; align-items: center; justify-content: center;
}
#start-screen.on { display: flex; }
.start-inner { text-align: center; padding: 0 24px; }
.start-title {
  margin: 0; color: #fff; font-size: 40px; font-weight: 900; letter-spacing: .04em;
  text-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.start-sub {
  margin: 10px 0 44px; color: var(--cyan); font-size: 15px; font-weight: 800; letter-spacing: .04em;
}
.start-btn-wrap { position: relative; display: inline-block; }
.ripple-btn {
  position: absolute; inset: 0; border-radius: 999px; background: #fff;
  animation: rippleBtn 2s cubic-bezier(0,0,.2,1) infinite;
}
.ripple-btn.d1 { animation-delay: 1s; }
@keyframes rippleBtn {
  0%   { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.8); opacity: 0; }
}
#start-btn {
  position: relative; padding: 18px 62px; border: none; border-radius: 999px;
  background: var(--cyan); color: #06263a; font-size: 24px; font-weight: 900;
  letter-spacing: .06em; cursor: pointer;
  box-shadow: 0 10px 30px rgba(34,211,238,.35);
}
#start-btn:active { transform: scale(.95); }
.start-note {
  margin-top: 34px; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 700; line-height: 1.9;
}

#error-screen {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(120,10,20,.96);
  display: none; align-items: center; justify-content: center; text-align: center; padding: 40px;
}
#error-screen.on { display: flex; }
.err-title { color: #fff; font-size: 20px; font-weight: 900; margin: 0 0 14px; }
.err-msg { color: rgba(255,255,255,.6); font-size: 12px; margin: 0 0 30px; }
#error-reload {
  background: #fff; color: #000; font-weight: 900;
  padding: 14px 38px; border: none; border-radius: 999px; cursor: pointer;
}

/* 幅の狭い端末（iPhone SE など）では操作子を詰める */
@media (max-width: 350px) {
  #stick-base { width: 106px; height: 106px; }
  #stick-knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  #shutter { width: 54px; height: 54px; }
  #shutter-dot { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .ctl-label { font-size: 10px; }
}

/* 横持ち・低い画面では操作子を少し小さくして、画面を塞がないようにする */
@media (max-height: 620px) {
  #stick-base { width: 104px; height: 104px; }
  #stick-knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  #hint { bottom: calc(172px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 操作説明（START直後にふわっと出て自動で消える） ----------
   pointer-events を切ってあるので、この上をタップしても下の操作に届く。
   説明を読みながらそのままタップして飛べるほうが迷わない。 */
#howto {
  position: fixed; inset: 0; z-index: 45;
  /* 画面中央に置くとバルちゃんを隠してしまうので、操作UIの少し上に出す。
     説明を読みながら本人も見えているほうが、何を操作するのか伝わる。 */
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 22px calc(196px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s ease;
}
#howto.on { opacity: 1; }
.howto-card {
  width: 100%; max-width: 340px;
  background: rgba(10, 32, 54, .74);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  padding: 20px 20px 18px;
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
  /* ふわっと浮かび上がる */
  transform: translateY(10px) scale(.98);
  transition: transform .7s cubic-bezier(.2,.8,.3,1);
}
#howto.on .howto-card { transform: translateY(0) scale(1); }
.howto-row {
  display: flex; align-items: center; gap: 13px;
  color: #fff;
}
.howto-row + .howto-row { margin-top: 15px; }
.howto-ico {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: rgba(34, 211, 238, .16);
  color: var(--cyan);
}
.howto-ico svg { width: 23px; height: 23px; }
.howto-txt { font-size: 13px; line-height: 1.5; letter-spacing: .01em; }
.howto-txt b { font-weight: 800; }

@media (max-width: 350px) {
  .howto-card { padding: 16px; }
  .howto-txt { font-size: 12px; }
  .howto-ico { width: 34px; height: 34px; }
}

/* 低い画面では操作UIも縮むので、説明の位置も合わせて下げる */
@media (max-height: 620px) {
  #howto { padding-bottom: calc(172px + env(safe-area-inset-bottom, 0px)); }
  .howto-row + .howto-row { margin-top: 11px; }
  .howto-card { padding: 15px 16px; }
}


/* ---------- ゲームモード ---------- */

/* 画面上部のタイム／スコア。操作の邪魔をしないよう pointer-events は切る。 */
#game-hud {
  position: fixed; z-index: 35;
  top: max(12px, env(safe-area-inset-top)); left: 50%;
  transform: translate(-50%, -14px);
  display: none; align-items: center; gap: 14px;
  padding: 7px 16px; border-radius: 999px;
  background: var(--navy-soft); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  pointer-events: none;
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
}
#game-hud.on { display: flex; opacity: 1; transform: translate(-50%, 0); }
.gh-cell { display: flex; align-items: baseline; gap: 6px; }
.gh-k {
  color: rgba(255,255,255,.62); font-size: 10px; font-weight: 800; letter-spacing: .1em;
}
.gh-v {
  color: #fff; font-size: 20px; font-weight: 900; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; min-width: 2.2em; text-align: right;
}
/* 残り10秒からは赤くして脈打たせる */
#game-hud.hurry #gh-time { color: #fca5a5; animation: hurryPulse .8s ease-in-out infinite; }
@keyframes hurryPulse { 50% { opacity: .45; } }

/* スコア2倍のあいだだけ点く札 */
#gh-mult {
  display: none;
  padding: 3px 9px; border-radius: 999px;
  background: var(--orange); color: #3b2200;
  font-size: 12px; font-weight: 900; letter-spacing: .02em;
}
#gh-mult.on { display: block; }

/* 取った瞬間に出る、短い知らせ。謎ボックスの中身もここに出る。 */
#game-toast {
  position: fixed; z-index: 36;
  top: calc(max(12px, env(safe-area-inset-top)) + 54px); left: 50%;
  transform: translate(-50%, 6px);
  padding: 8px 18px; border-radius: 999px;
  background: rgba(16,185,129,.92); color: #fff;
  font-size: 14px; font-weight: 900; letter-spacing: .02em;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
#game-toast.on { opacity: 1; transform: translate(-50%, 0); }
#game-toast.bad { background: rgba(239,68,68,.92); }

/* 終了画面 */
#game-over {
  position: fixed; inset: 0; z-index: 80;
  display: none; align-items: center; justify-content: center;
  background: rgba(4,14,26,.72); backdrop-filter: blur(4px);
}
#game-over.on { display: flex; }
.go-card {
  text-align: center; padding: 30px 38px; border-radius: 22px;
  background: var(--navy-soft); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.go-title {
  margin: 0; color: var(--cyan); font-size: 15px; font-weight: 900; letter-spacing: .16em;
}
.go-score { margin: 10px 0 2px; color: #fff; font-size: 54px; font-weight: 900; line-height: 1; }
.go-unit { font-size: 16px; font-weight: 800; margin-left: 4px; }
.go-best { margin: 0 0 22px; color: rgba(255,255,255,.6); font-size: 12px; font-weight: 700; }
.go-btns { display: flex; gap: 10px; justify-content: center; }
.go-btns button {
  border: none; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 900; padding: 13px 24px; color: #06263a;
  background: var(--cyan);
}
#go-close { background: rgba(255,255,255,.14); color: #fff; }
.go-btns button:active { transform: scale(.95); }


/* ---------- ブースト ----------
   シャッターの左どなりに置く。押しているあいだだけオレンジに点いて、
   いま速い状態だと分かるようにしている。 */
#boost-wrap { display: none; }
#boost-wrap.on { display: flex; }
#boost-btn {
  width: 62px; height: 62px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  background: var(--navy-soft); backdrop-filter: blur(6px);
  color: var(--cyan); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
#boost-btn svg { width: 28px; height: 28px; }
#boost-btn.active {
  background: var(--orange); color: #fff; border-color: #fff;
  transform: scale(.92);
  box-shadow: 0 0 26px rgba(245,158,11,.75);
}

/* インカメラではスティックもブーストも無いので、シャッターを中央に置く。
   （#controls の justify-content を上書きするため、ファイルの最後に置く） */
html.front #controls { justify-content: center; }


/* 顔認識の確認用の表示（?debug のときだけ）。実機で1枚撮ってもらう用。 */
#face-debug { display: none; }
html.debug #face-debug {
  display: block;
  position: fixed; z-index: 60;
  left: 8px; bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  margin: 0; padding: 8px 10px; border-radius: 8px;
  background: rgba(0,0,0,.66); color: #9ef;
  font: 700 10px/1.45 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre; pointer-events: none;
}


/* ---------- ゲーム開始前の説明とカウントダウン ---------- */
#game-intro {
  position: fixed; inset: 0; z-index: 78;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  background: rgba(4,14,26,.74); backdrop-filter: blur(5px);
  /* カウントダウン中のタップは「飛ばす」だけに使う。
     下へ抜けるとバルちゃんが浮いてしまう。 */
  touch-action: none;
}
#game-intro.on { display: flex; }

.gi-card {
  padding: 22px 26px; border-radius: 20px;
  background: var(--navy-soft); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  min-width: 264px;
}
.gi-title {
  margin: 0 0 16px; text-align: center;
  color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: .14em;
}
.gi-row { display: flex; align-items: center; gap: 13px; }
.gi-row + .gi-row { margin-top: 14px; }
/* 実際に降ってくる色をそのまま丸で見せる（色は js が config から入れる） */
.gi-dot { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; }
.gi-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.gi-txt b { color: #fff; font-size: 14px; font-weight: 800; }
.gi-txt i { color: rgba(255,255,255,.62); font-size: 11px; font-weight: 700; font-style: normal; }

#gi-count {
  color: #fff; font-size: 62px; font-weight: 900; line-height: 1;
  text-shadow: 0 6px 26px rgba(0,0,0,.5);
  animation: giPop .45s cubic-bezier(.2,1.4,.4,1);
}
#gi-count.go { color: var(--cyan); font-size: 40px; letter-spacing: .08em; }
/* 拡大だけで弾ませる。opacity は動かさない。
   0% を opacity:0 にしていたら、アニメの再生し直しの兼ね合いで
   数字が透明のままになることがあった（実測）。 */
@keyframes giPop {
  0%   { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.gi-hint {
  margin: 0; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 700; letter-spacing: .04em;
}