/* ============================================================
   app.css  -  Light theme: Golf green + sky blue
   ============================================================ */

/* ---- テキストカーソル（キャレット）の点滅を全域で非表示 ----
   画面再構築時にフォーカスが残ると点滅カーソルが見えることがあるため。
   本アプリにテキスト入力欄はない（将来入力欄を作る場合は個別に caret-color: auto を指定） */
* { caret-color: transparent; }
input[type="text"], input[type="number"], textarea, [contenteditable="true"] { caret-color: auto; }

/* ---- Safe area ---- */
:root {
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

/* ---- Video overlay canvas ---- */
#skeleton-canvas {
  position: absolute;
  pointer-events: none;
}

/* ---- 円形プログレス ---- */
.circle-progress {
  transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1);
}

/* ---- ゲージバー ---- */
.gauge-fill {
  transition: width 1.1s cubic-bezier(.4,0,.2,1);
}

/* ---- Safe area padding ---- */
.pb-safe { padding-bottom: calc(var(--sab) + 24px); }
.pt-safe { padding-top:    calc(var(--sat) + 12px); }

/* ---- 指定ステージ: 長押しの選択・コールアウト（スマホ振動の原因）を抑止 ---- */
.club-stage, .club-stage *, #modal-photo-box, #modal-photo-box * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* touch-callout/user-selectだけではAndroid系WebView（LINE内蔵ブラウザ含む）の
     長押しジェスチャー（触覚フィードバック=振動の発生源）を止めきれない。
     touch-actionでブラウザ標準のタッチジェスチャー処理自体を無効化し、
     JS(pointerdown/move/up)側の独自ドラッグ処理だけに委ねる */
  touch-action: none;
}

/* ---- マイクロインタラクション: ボタンのばね押し込み ---- */
.btn-ripple { transition: transform .16s cubic-bezier(.34,1.56,.64,1); }

/* ---- ボタンリップル ---- */
.btn-ripple {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 65%);
  border-radius: inherit;
  transform: scale(0);
  opacity: 1;
  transition: transform 0s, opacity 0.5s ease;
}
.btn-ripple:active::after {
  transform: scale(2.5);
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

/* ---- キャプチャフラッシュ ---- */
@keyframes capture-flash {
  0%   { opacity: 0; }
  18%  { opacity: 0.5; }
  100% { opacity: 0; }
}
.capture-flash {
  animation: capture-flash 0.55s ease both;
}

/* ---- アクティブドットグロー ---- */
@keyframes dot-glow {
  0%,100% { box-shadow: 0 0 0 0   rgba(34,197,94,0.5); }
  50%     { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
}
.dot-active-glow {
  animation: dot-glow 1.6s ease-in-out infinite;
}

/* ---- Analyzing オービタルリング ---- */
@keyframes orbit-cw  { to { transform: rotate( 360deg); } }
@keyframes orbit-ccw { to { transform: rotate(-360deg); } }
.orbit-slow   { animation: orbit-cw   7s   linear infinite; transform-origin: center; }
.orbit-medium { animation: orbit-ccw  4.5s linear infinite; transform-origin: center; }

/* ---- Analyzing パルス ---- */
@keyframes ping-green {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0; }
}
.ping-green {
  animation: ping-green 2.2s cubic-bezier(0,0,.2,1) infinite;
}

/* ---- グレード登場遅延 ---- */
.grade-delay { animation-delay: 0.75s; }

/* ---- フェーズドット接続線 ---- */
.phase-dot:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 5px;
  left: calc(50% + 8px);
  right: calc(-50% + 8px);
  height: 1.5px;
  background: #e5e7eb;
  transition: background .3s ease;
}
.phase-dot.is-done:not(:last-child)::after {
  background: #86efac;
}

/* ---- カード展開アニメーション ---- */
.card-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1);
}
.card-body.open {
  grid-template-rows: 1fr;
}
.card-body > div { overflow: hidden; }

/* ---- フェーズグループ折り畳み ---- */
.phase-group-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .30s cubic-bezier(.4,0,.2,1);
}
.phase-group-body.open {
  grid-template-rows: 1fr;
}
.phase-group-body > div { overflow: hidden; }
.phase-group-chevron {
  transition: transform .25s ease;
}
.phase-group-chevron.open {
  transform: rotate(0deg) !important;
}

/* ---- Shimmer ---- */
.shimmer-bg {
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
}

/* ---- マスコットバウンス ---- */
@keyframes mascot-bounce {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  25%     { transform: translateY(-14px) rotate(4deg); }
  55%     { transform: translateY(-7px) rotate(-2deg); }
  75%     { transform: translateY(-11px) rotate(3deg); }
}
@keyframes mascot-shadow-pulse {
  0%,100% { transform: scaleX(1);   opacity: 0.25; }
  25%     { transform: scaleX(0.55); opacity: 0.10; }
  75%     { transform: scaleX(0.7);  opacity: 0.15; }
}
@keyframes mascot-blink {
  0%,90%,100% { scaleY: 1; }
  95%         { transform: scaleY(0.1); }
}
.mascot-ball {
  animation: mascot-bounce 2.4s cubic-bezier(.36,.07,.19,.97) infinite;
  transform-origin: center bottom;
}
.mascot-shadow {
  animation: mascot-shadow-pulse 2.4s cubic-bezier(.36,.07,.19,.97) infinite;
}
.mascot-eye-l, .mascot-eye-r {
  animation: mascot-blink 4s ease-in-out infinite;
  transform-origin: center;
}

/* ============================================================
   結果画面ダーク×ネオン刷新（.results-dark 配下のみ適用）
   既存のライト系Tailwindクラスをダークパレットに写像する
   ============================================================ */
.results-dark {
  /* 背景は最背面の #bg-fx.bgfx-dark（ダーク版アニメ背景）に見せるため透過にする。
     router が results 遷移時に必ず #bg-fx を dark モードで表示する。 */
  background: transparent !important;
}
/* サーフェス */
.results-dark .bg-white    { background: #141c14 !important; }
.results-dark .bg-green-50 { background: #101a11 !important; }
.results-dark .bg-gray-100 { background: #1d281d !important; }
.results-dark .bg-sky-50, .results-dark .bg-teal-50,
.results-dark .bg-violet-50, .results-dark .bg-amber-50,
.results-dark .bg-orange-50, .results-dark .bg-red-50 { background: #18221a !important; }
.results-dark .bg-green-100, .results-dark .bg-sky-100, .results-dark .bg-amber-100,
.results-dark .bg-teal-100, .results-dark .bg-violet-100,
.results-dark .bg-orange-100, .results-dark .bg-red-100 { background: rgba(190,242,60,.13) !important; }
/* テキスト */
.results-dark .text-gray-800 { color: #eef5e7 !important; }
.results-dark .text-gray-700 { color: #d9e5cd !important; }
.results-dark .text-gray-600 { color: #b5c5a8 !important; }
.results-dark .text-gray-500 { color: #93a689 !important; }
.results-dark .text-gray-400 { color: #7b8f73 !important; }
.results-dark .text-gray-300 { color: #5d7057 !important; }
.results-dark .text-amber-700  { color: #fcd34d !important; }
.results-dark .text-sky-700    { color: #7dd3fc !important; }
.results-dark .text-green-700  { color: #a7f3d0 !important; }
.results-dark .text-teal-700   { color: #5eead4 !important; }
.results-dark .text-violet-700 { color: #c4b5fd !important; }
.results-dark .text-orange-700 { color: #fdba74 !important; }
.results-dark .text-amber-600  { color: #fbbf24 !important; }
/* ボーダー・影 */
.results-dark .border-gray-100, .results-dark .border-amber-100 { border-color: #26332a !important; }
.results-dark .border-green-200, .results-dark .border-amber-200,
.results-dark .border-sky-200, .results-dark .border-orange-200 { border-color: #2c3c2c !important; }
.results-dark .shadow-card, .results-dark .shadow-card-lg { box-shadow: 0 10px 32px rgba(0,0,0,.5) !important; }
/* スコアリング（極太数字＋ライムグロー） */
.results-dark #score-num {
  font-size: 3.4rem;
  color: #d9ff5e;
  text-shadow: 0 0 22px rgba(190,242,60,.45);
}
.results-dark #grade-letter { text-shadow: 0 0 36px rgba(190,242,60,.30); }
.results-dark svg circle[stroke="#dcfce7"] { stroke: #223122; }
/* メインCTA：ライム×黒のスポーティー */
.results-dark #btn-retry {
  background: linear-gradient(90deg, #bef23c, #7fe437) !important;
  color: #0c130a !important;
  box-shadow: 0 6px 26px rgba(190,242,60,.35) !important;
}

/* ---- 褒めカード（ここが上手い！）---- */
.results-dark .praise-card {
  background: linear-gradient(135deg, rgba(190,242,60,.15), rgba(190,242,60,.04));
  border: 1px solid rgba(190,242,60,.35);
  box-shadow: 0 8px 30px rgba(140,220,40,.10);
}
.results-dark .praise-title { color: #d9ff5e; }
.results-dark .praise-stat {
  color: #cfe8a8;
  background: rgba(190,242,60,.12);
  border: 1px solid rgba(190,242,60,.25);
  border-radius: 9999px;
  padding: 3px 9px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.results-dark .praise-chip {
  background: rgba(190,242,60,.16);
  color: #e6ffab;
  border: 1px solid rgba(190,242,60,.30);
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
}
.results-dark .praise-note { color: #b5c5a8; }
.results-dark .praise-best {
  color: #ffd75e;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 0 16px rgba(255,200,60,.4);
}

/* ============================================================
   全体モーション（静的すぎ対策）
   ============================================================ */
/* 背景の浮遊オーブ */
.bg-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(36px);
  opacity: .5;
  pointer-events: none;
  animation: orb-float 11s ease-in-out infinite alternate;
}
@keyframes orb-float {
  0%   { transform: translate(0, 0)       scale(1); }
  100% { transform: translate(24px, -32px) scale(1.18); }
}
/* ヒーロー画像のゆっくりズーム（Ken Burns） */
.hero-kenburns { animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns {
  0%   { transform: scale(1)    translateY(0); }
  100% { transform: scale(1.12) translateY(-8px); }
}
/* メインCTAの呼吸グロー */
.cta-glow { animation: cta-glow 2.4s ease-in-out infinite; }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(34,197,94,.38); }
  50%      { box-shadow: 0 4px 34px rgba(34,197,94,.72), 0 0 0 6px rgba(134,239,172,.20); }
}
/* アップロードエリアの呼吸ボーダー */
.upload-breathe { animation: upload-breathe 2.6s ease-in-out infinite; }
@keyframes upload-breathe {
  0%, 100% { border-color: #bbf7d0; }
  50%      { border-color: #4ade80; box-shadow: 0 0 0 7px rgba(74,222,128,.12); }
}

/* ---- 線の説明ミニラベル（クラブ指定・詳細モーダル） ---- */
.line-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  padding: 2px 7px;
  border-radius: 9999px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 6px rgba(0,0,0,.35);
}
/* 線名の小さい色文字ラベル（背景なし・縁取りで視認性を確保） */
.line-tag {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9);
}

/* ---- デイリースプラッシュ（1日1回のオープニング演出・CSS合成の動画風） ---- */
#daily-splash {
  position: fixed; inset: 0; z-index: 80; overflow: hidden;
  background: #06120a; cursor: pointer;
  animation: splash-in .4s ease both;
}
@keyframes splash-in { from { opacity: 0; } }
#daily-splash.splash-out {
  transition: opacity .9s cubic-bezier(.4,0,.3,1), transform .9s cubic-bezier(.4,0,.3,1);
  opacity: 0; transform: scale(1.06);   /* カメラが画面の奥へ抜けていく押し込みディゾルブ */
  pointer-events: none;
}
.splash-bg {
  position: absolute; inset: -6%;
  /* 下地の明るい緑グラデーション: 写真の読み込みが間に合わない/失敗しても真っ黒にならない保険 */
  background-color: #22c55e;
  background-image: linear-gradient(160deg, #22c55e, #4ade80 55%, #86efac);
  background-size: cover; background-position: center 30%;
  animation: splash-zoom 6.6s cubic-bezier(.25,.5,.35,1) both;   /* 退場フェード中もズームが止まらない長さ */
}
/* 写真は緑の上にこのレイヤーでフェードインさせる（緑→写真の急な切替＝目のチカチカを防ぐ）*/
.splash-photo {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center 30%;
  opacity: 0; transition: opacity .8s ease;
  animation: splash-zoom 6.6s cubic-bezier(.25,.5,.35,1) both;   /* 下地と同じズームで同期 */
}
@keyframes splash-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
.splash-flare {
  position: absolute; top: -30%; bottom: -30%; width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transform: translateX(-60vw) rotate(14deg);
  animation: splash-flare 1.1s ease-in-out 1.15s both;
  mix-blend-mode: screen;
}
@keyframes splash-flare { to { transform: translateX(130vw) rotate(14deg); } }
.splash-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding-bottom: 6vh;
}
.splash-kicker {
  font-size: 11px; font-weight: 900; letter-spacing: .35em;
  color: #eafff0; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,.75), 0 0 3px rgba(0,0,0,.6);
  animation: splash-rise .7s ease .35s both;
}
.splash-logo {
  font-size: 46px; font-weight: 900; line-height: 1.1; margin-top: 6px;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,.78), 0 0 4px rgba(0,0,0,.55), 0 0 26px rgba(190,242,60,.35);
  animation: splash-logo .8s cubic-bezier(.2,.9,.3,1.2) .65s both;
}
@keyframes splash-logo {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes splash-rise { from { opacity: 0; transform: translateY(10px); } }
.splash-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.splash-mascot {
  animation: splash-pop .55s cubic-bezier(.34,1.56,.64,1) 1.5s both;
}
@keyframes splash-pop { from { opacity: 0; transform: scale(.4) translateY(14px); } }
.splash-skip {
  position: absolute; bottom: calc(var(--sab) + 18px); left: 0; right: 0;
  text-align: center; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.75);
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
  animation: splash-rise .6s ease 1.9s both;
}

/* ---- ゲーム風画面遷移（transform/opacityのみ・60fps維持） ---- */
.screen-ghost {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow: hidden;
  pointer-events: none;
  background: #f0fdf4;
  will-change: transform, opacity;
}
.screen-exit-fwd  { animation: screen-out-l .36s cubic-bezier(.22,.9,.34,1) both; }
.screen-exit-back { animation: screen-out-r .36s cubic-bezier(.22,.9,.34,1) both; }
@keyframes screen-out-l { to { transform: translateX(-16%); opacity: 0; } }
@keyframes screen-out-r { to { transform: translateX(16%);  opacity: 0; } }
.screen-enter-fwd  { animation: screen-in-r .38s cubic-bezier(.22,.9,.34,1) both; }
.screen-enter-back { animation: screen-in-l .38s cubic-bezier(.22,.9,.34,1) both; }
@keyframes screen-in-r { from { transform: translateX(7%);  opacity: 0; } }
@keyframes screen-in-l { from { transform: translateX(-7%); opacity: 0; } }

/* ---- ペンギンのひとこと（手書き風吹き出し＋丸文字フォント） ---- */
.mascot-say {
  font-family: 'Hachi Maru Pop', 'Yomogi', cursive;
  color: #f0fdf4;
  /* 背景は完全透過（つぶやきの雰囲気）。写真に沈まないよう淡い光の縁取りだけ */
  text-shadow: 0 0 5px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.5);
  border: 1.6px solid rgba(240,253,244,.85);
  /* 四隅の半径を非対称にして「手で描いたゆがみ」を出す定番テクニック */
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  padding: 5px 10px 6px;
  transform: rotate(-2deg);
  transition: opacity .8s ease;
}
/* しっぽ: ペンギンに向かう手描きのカギ線 */
.mascot-say::after {
  content: '';
  position: absolute;
  right: 16px;
  bottom: -10px;
  width: 11px;
  height: 11px;
  border-right: 1.6px solid rgba(240,253,244,.85);
  border-bottom: 1.6px solid rgba(240,253,244,.85);
  border-bottom-right-radius: 14px 10px;
  transform: rotate(14deg);
}

/* ---- 新緑の木の葉（ホームのヒーロー演出） ---- */
.leaf-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity .7s ease;
}
.leaf {
  position: absolute;
  left: -26px;
  opacity: 0;
  animation: leaf-fly ease-in forwards;
  filter: drop-shadow(0 0 6px rgba(190,242,60,.85));
}
@keyframes leaf-fly {
  0%   { opacity: 0;   transform: translate(0, 0)            rotate(0deg); }
  12%  { opacity: 1; }
  40%  {               transform: translate(38vw, -14px)     rotate(140deg); }
  70%  { opacity: .95; transform: translate(72vw, 10px)      rotate(260deg); }
  100% { opacity: 0;   transform: translate(105vw, -6px)     rotate(360deg); }
}

/* ---- 自己ベスト紙吹雪 ---- */
.confetti-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -5vh;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: .85; transform: translateY(110vh) rotate(680deg); }
}

/* ============ 結果画面「くわしいレポート」全画面オーバーレイ ============ */
.results-detail {
  position: fixed; inset: 0; z-index: 85; overflow-y: auto;
  background: linear-gradient(180deg, #0a110b 0%, #0e1810 45%, #0a110b 100%);
  animation: rd-in .26s ease;
}
.results-detail.hidden { display: none; }
.rd-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 18px 12px;
  background: rgba(10, 17, 11, .88);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.rd-close {
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; font-weight: 800;
}
.rd-body { padding: 6px 0 40px; }
@keyframes rd-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ============ アニメーション背景（採用: 派手ブロブ＋色相シフト） ============
   最背面に固定で1枚だけ敷く。各画面のルート背景を透過にすると、この上に
   白いカードが乗る形になり読みやすさを保てる。解析系画面(analyzing/markPhases)では
   router が .bgfx-hidden を付けてアニメを止め、発熱・カクつきを防ぐ。 */
#bg-fx {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(160deg, #d1fae5, #ecfdf5);
}
#bg-fx.bgfx-hidden { display: none; }   /* 解析中はアニメを完全停止（GPU節約） */

/* 結果画面用のダーク版: 近黒地に深緑のグローを screen で重ね、ネオン調に馴染ませる */
#bg-fx.bgfx-dark { background: linear-gradient(180deg, #0a110b 0%, #0e1810 45%, #0a110b 100%); }
#bg-fx.bgfx-dark .bgfx-blob { mix-blend-mode: screen; opacity: .55; filter: blur(70px); }
#bg-fx.bgfx-dark .bgfx-blob.b1 { background: #15803d; }
#bg-fx.bgfx-dark .bgfx-blob.b2 { background: #047857; }
#bg-fx.bgfx-dark .bgfx-blob.b3 { background: #0f766e; opacity: .45; }
#bg-fx.bgfx-dark .bgfx-blob.b4 { background: #4d7c0f; }
#bg-fx.bgfx-dark .bgfx-blob.b5 { background: #16a34a; opacity: .5; }
#bg-fx.bgfx-dark .bgfx-blob.b6 { background: #0e7490; opacity: .4; }
/* spin(回転)＋hue(色相シフト)を同時に流す＝色そのものが移ろう */
.bgfx-field {
  position: absolute; inset: -12%;
  animation: bgfx-spin 30s linear infinite, bgfx-hue 9s ease-in-out infinite alternate;
}
.bgfx-blob {
  position: absolute; border-radius: 50%; filter: blur(58px);
  opacity: .9; mix-blend-mode: multiply; will-change: transform;
}
.bgfx-blob.b1 { width: 46vmax; height: 46vmax; left: -8vmax; top: -10vmax;  background: #16a34a; animation: bgfx-f1 8s  ease-in-out infinite alternate; }
.bgfx-blob.b2 { width: 40vmax; height: 40vmax; right: -8vmax; top: -6vmax;   background: #10b981; animation: bgfx-f2 10s ease-in-out infinite alternate; }
.bgfx-blob.b3 { width: 52vmax; height: 52vmax; right: -6vmax; bottom: -16vmax; background: #14b8a6; opacity: .75; animation: bgfx-f3 12s ease-in-out infinite alternate; }
.bgfx-blob.b4 { width: 38vmax; height: 38vmax; left: -6vmax; bottom: -12vmax; background: #84cc16; animation: bgfx-f4 9s  ease-in-out infinite alternate; }
.bgfx-blob.b5 { width: 34vmax; height: 34vmax; left: 36%; top: 26%;    background: #22c55e; opacity: .85; animation: bgfx-f2 11s ease-in-out infinite alternate-reverse; }
.bgfx-blob.b6 { width: 30vmax; height: 30vmax; left: 54%; bottom: 16%; background: #06b6d4; opacity: .55; animation: bgfx-f1 7s  ease-in-out infinite alternate-reverse; }
.bgfx-grain {
  position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
@keyframes bgfx-f1 { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(8vmax,6vmax) scale(1.12)} 66%{transform:translate(-5vmax,9vmax) scale(1.04)} 100%{transform:translate(6vmax,-5vmax) scale(1.14)} }
@keyframes bgfx-f2 { 0%{transform:translate(0,0) scale(1)} 30%{transform:translate(-8vmax,4vmax) scale(1.08)} 60%{transform:translate(-2vmax,-8vmax) scale(1.16)} 100%{transform:translate(-9vmax,6vmax) scale(1.05)} }
@keyframes bgfx-f3 { 0%{transform:translate(0,0) scale(1)} 40%{transform:translate(6vmax,-6vmax) scale(1.06)} 75%{transform:translate(-6vmax,-2vmax) scale(1.14)} 100%{transform:translate(4vmax,5vmax) scale(1.08)} }
@keyframes bgfx-f4 { 0%{transform:translate(0,0) scale(1)} 35%{transform:translate(-5vmax,-7vmax) scale(1.1)} 70%{transform:translate(8vmax,2vmax) scale(1.04)} 100%{transform:translate(-3vmax,7vmax) scale(1.13)} }
@keyframes bgfx-spin { to { transform: rotate(360deg); } }
@keyframes bgfx-hue {
  0%   { filter: hue-rotate(-48deg) saturate(1.3) brightness(1); }
  50%  { filter: hue-rotate(6deg)   saturate(1.5) brightness(1.09); }
  100% { filter: hue-rotate(64deg)  saturate(1.6) brightness(1); }
}
/* OSで「視差効果を減らす」設定の人にはアニメを止め、静的なグラデを残す */
@media (prefers-reduced-motion: reduce) {
  .bgfx-field, .bgfx-blob { animation: none !important; }
}

/* ============ アプリ内カメラ録画オーバーレイ ============ */
.rec-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rec-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.rec-panel[hidden] { display: none; }
.rec-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.rec-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px;
}
.rec-spacer { flex: 1; }
.rec-close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rec-preview.is-mirrored { transform: scaleX(-1); }   /* インカメラは鏡像プレビュー */
.rec-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  transition: opacity .25s ease;
}
.rec-switch:active { opacity: .6; }
.rec-switch[disabled] { opacity: .4; }
.rec-switch.is-off { opacity: 0; pointer-events: none; }
.rec-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: 6px 12px;
  border-radius: 999px;
}
.rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #ef4444;
  animation: rec-blink 1s steps(2, start) infinite;
}
@keyframes rec-blink { 50% { opacity: .25; } }
.rec-hint {
  position: relative;
  z-index: 2;
  margin: auto 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  border-radius: 16px;
  padding: 12px 16px;
  transition: opacity .4s ease;
}
.rec-hint p { font-size: 13px; font-weight: 700; line-height: 1.5; }
.rec-hint-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(34, 197, 94, .9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rec-hint.is-dim { opacity: 0; pointer-events: none; }
.rec-controls {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 0 max(26px, env(safe-area-inset-bottom));
}
.rec-shutter {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  border: 4px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .1s ease;
}
.rec-shutter:active { transform: scale(.92); }
.rec-shutter-in {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #ef4444;
  transition: border-radius .2s ease, width .2s ease, height .2s ease;
}
.rec-shutter.is-recording .rec-shutter-in {
  width: 30px;
  height: 30px;
  border-radius: 7px;   /* 停止＝四角 */
}
.rec-caption {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* ---- 撮影後の確認パネル ---- */
.rec-review-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.rec-review-bar {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0));
}
.rec-review-title {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.rec-actions { display: flex; gap: 10px; }
.rec-btn {
  flex: 1;
  height: 48px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
  transition: opacity .15s ease, transform .1s ease;
}
.rec-btn:active { transform: scale(.97); opacity: .8; }
.rec-btn-ghost {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .45);
}
/* 解析へ進む主動線。確実にタップできるよう大きく */
.rec-btn-primary {
  width: 100%;
  height: 64px;
  border-radius: 18px;
  font-size: 17px;
  letter-spacing: .02em;
  background: #22c55e;
  color: #fff;
  box-shadow: 0 8px 22px rgba(34, 197, 94, .5);
}
.rec-note {
  color: rgba(255, 255, 255, .85);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  padding: 0 4px;
}
.rec-note[hidden] { display: none; }
.rec-toast {
  position: absolute;
  left: 50%;
  bottom: 26%;
  transform: translateX(-50%);
  z-index: 5;
  max-width: 82%;
  background: rgba(0, 0, 0, .82);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  padding: 10px 16px;
  border-radius: 999px;
}
.rec-toast[hidden] { display: none; }