/* ===== 解剖学整体院 プロトタイプ スタイル ===== */

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ===== モバイル実機対応：下部ボタンがフッターナビ／画面下端に隠れて押せない問題の修正 ===== */
/* URLバーの伸縮を考慮した動的ビューポート高さ（body は h-screen を外しこちらで指定） */
body {
  height: 100vh;   /* dvh 非対応ブラウザ向けフォールバック */
  height: 100dvh;
}
/* メイン下部の余白を、フッターナビの高さ＋セーフエリア分しっかり確保 */
main {
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)) !important;
}
/* フッターナビをセーフエリア（ホームインジケータ）分だけ持ち上げる */
nav {
  padding-bottom: calc(0.25rem + env(safe-area-inset-bottom)) !important;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* フェーズ切替フェード */
.phase-enter { animation: phaseIn 0.25s ease-out; }
@keyframes phaseIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 人体図（触診） ===== */
.bodymap-frame {
  position: relative;
  width: 100%;
  /* 縦長の人体比率 */
  padding-top: 150%;
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
  border-radius: 1rem;
  border: 2px solid #e2e8f0;
  overflow: hidden;
}
/* デフォルメ人体シルエット */
.bodymap-silhouette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.silhouette-head {
  position: absolute;
  left: 50%; top: 3%;
  width: 18%; padding-top: 18%;
  transform: translateX(-50%);
  background: #c7d2fe;
  border-radius: 50%;
}
.silhouette-body {
  position: absolute;
  left: 50%; top: 18%;
  width: 46%; height: 60%;
  transform: translateX(-50%);
  background: #c7d2fe;
  border-radius: 40% 40% 30% 30% / 18% 18% 12% 12%;
}
.silhouette-arm {
  position: absolute;
  top: 20%;
  width: 9%; height: 32%;
  background: #c7d2fe;
  border-radius: 40%;
}
.silhouette-arm.left  { left: 17%; }
.silhouette-arm.right { right: 17%; }
.silhouette-leg {
  position: absolute;
  top: 69%;
  width: 11%; height: 29%;
  background: #c7d2fe;
  border-radius: 30%;
}
.silhouette-leg.left  { left: 36%; }
.silhouette-leg.right { right: 36%; }

/* タップ領域 */
.bodymap-block {
  position: absolute;
  border-radius: 0.5rem;
  background: rgba(99, 102, 241, 0.06);
  border: 1px dashed rgba(99, 102, 241, 0.35);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.bodymap-block:active { transform: scale(0.95); }
.bodymap-block.tapped { border-style: solid; }
.bodymap-block.r-hit       { background: rgba(239, 68, 68, 0.55);  border-color: #dc2626; }
.bodymap-block.r-close     { background: rgba(16, 185, 129, 0.45); border-color: #059669; }
.bodymap-block.r-miss_pain { background: rgba(249, 115, 22, 0.40); border-color: #ea580c; }
.bodymap-block.r-none      { background: rgba(148, 163, 184, 0.30); border-color: #94a3b8; }

/* 触診リアクション吹き出し */
.palp-reaction {
  animation: phaseIn 0.2s ease-out;
}

/* ===== 推理スロット ===== */
.slot {
  border: 2px dashed #cbd5e1;
  border-radius: 0.75rem;
  min-height: 64px;
  transition: border-color 0.15s, background 0.15s;
}
.slot.filled { border-style: solid; }
.slot.primary.filled   { border-color: #2563eb; background: #eff6ff; }
.slot.secondary.filled { border-color: #7c3aed; background: #f5f3ff; }

/* ===== 手技固有操作 ===== */
.tech-operation {
  position: relative;
  width: 100%;
  height: 220px;
  border: 2px solid #cbd5e1;
  border-radius: 1rem;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
  background: #f8fafc;
}
.tech-operation.is-locked {
  pointer-events: none;
  opacity: 0.85;
}
.tech-operation-message {
  min-height: 42px;
  margin-top: 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}
.tech-operation-message.is-info { color: #475569; background: #f1f5f9; }
.tech-operation-message.is-active { color: #1d4ed8; background: #dbeafe; }
.tech-operation-message.is-retry { color: #c2410c; background: #ffedd5; }
.tech-operation-message.is-success { color: #047857; background: #d1fae5; }
.tech-operation-message.is-error { color: #b91c1c; background: #fee2e2; }

/* 指圧：長押しゲージ */
.shiatsu-operation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: radial-gradient(circle at center, #fffbeb, #f8fafc 70%);
}
.shiatsu-target {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 4px solid #f59e0b;
  background: #fef3c7;
  color: #92400e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 14px rgba(245, 158, 11, 0.22);
  transition: transform 0.15s, box-shadow 0.15s;
}
.shiatsu-operation.is-active .shiatsu-target {
  transform: scale(0.94);
  box-shadow: inset 0 3px 10px rgba(146, 64, 14, 0.22);
}
.operation-gauge {
  width: 82%;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      #e2e8f0 0%, #e2e8f0 51%,
      #bbf7d0 51%, #bbf7d0 87%,
      #fecaca 87%, #fecaca 100%);
  border: 1px solid #cbd5e1;
}
.operation-gauge-fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #60a5fa;
  transition: background 0.1s;
}
.operation-gauge-fill.is-success-range { background: #22c55e; }
.operation-gauge-fill.is-too-long { background: #ef4444; }
.operation-gauge-labels {
  width: 82%;
  display: flex;
  justify-content: space-between;
  margin-top: -0.75rem;
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 700;
}

/* 筋膜リリース：スワイプ */
.fascia-operation {
  background: linear-gradient(135deg, #faf5ff, #f5f3ff);
}
.fascia-haze-lines {
  position: absolute;
  inset: 12%;
  border-radius: 1rem;
  background: repeating-linear-gradient(120deg, rgba(168,85,247,0.3) 0 12px, rgba(124,58,237,0.12) 12px 24px);
  filter: blur(1px);
}
.operation-center-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6d28d9;
  pointer-events: none;
}
.fascia-trail {
  position: absolute;
  width: 0;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c084fc, #7c3aed);
  box-shadow: 0 0 16px rgba(126, 34, 206, 0.45);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}
.fascia-trail.is-visible { opacity: 0.9; }

/* ストレッチ：ドラッグ */
.stretch-operation {
  background: linear-gradient(90deg, #ecfeff, #f0fdf4);
}
.stretch-guide {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #a5f3fc 0 18px, #cffafe 18px 30px);
}
.stretch-goal {
  position: absolute;
  right: 7%;
  top: 24%;
  width: 27%;
  height: 52%;
  border: 3px dashed #10b981;
  border-radius: 1rem;
  background: rgba(167, 243, 208, 0.55);
  color: #047857;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
}
.stretch-handle {
  position: absolute;
  left: 16%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border: 3px solid #0891b2;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 5px 14px rgba(8, 145, 178, 0.25);
  cursor: grab;
  touch-action: none;
}
.stretch-handle.is-active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.08);
}

/* スラスト：タイミングタップ */
.thrust-operation {
  height: 190px;
  padding: 3rem 1rem 1rem;
  text-align: center;
  background: linear-gradient(180deg, #fff1f2, #fff);
}
.thrust-track {
  position: relative;
  width: 100%;
  height: 56px;
  margin-bottom: 2rem;
  border-radius: 0.75rem;
  border: 2px solid #cbd5e1;
  background: #e2e8f0;
}
.thrust-success-zone {
  position: absolute;
  left: 34%;
  top: 0;
  width: 32%;
  height: 100%;
  background: #bbf7d0;
  border-left: 2px solid #22c55e;
  border-right: 2px solid #22c55e;
  color: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
}
.thrust-marker {
  position: absolute;
  top: -30px;
  left: 3%;
  color: #ef4444;
  font-size: 1.7rem;
  line-height: 1;
  animation: thrustTiming 1.7s ease-in-out infinite alternate;
}
@keyframes thrustTiming {
  from { left: 3%; }
  to { left: calc(97% - 1.7rem); }
}

/* ===== 評価★ ===== */
.star-pop { display: inline-block; animation: starPop 0.4s cubic-bezier(0.175,0.885,0.32,1.275) backwards; }
.star-pop:nth-child(1){ animation-delay: 0.1s; }
.star-pop:nth-child(2){ animation-delay: 0.3s; }
.star-pop:nth-child(3){ animation-delay: 0.5s; }
@keyframes starPop {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* =========================================================
   手技ごとの決め演出
   ========================================================= */
.fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 共通：演出テキスト */
.fx-text {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 4px 4px 10px rgba(0,0,0,0.4);
}

/* --- 指圧：ジワ〜（波紋が広がりフェード） --- */
.fx-shiatsu .fx-ripple {
  position: absolute;
  top: 45%; left: 50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 6px solid #f59e0b;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 1.2s ease-out forwards;
}
.fx-shiatsu .fx-ripple.d2 { animation-delay: 0.2s; border-color: #fbbf24; }
.fx-shiatsu .fx-ripple.d3 { animation-delay: 0.4s; border-color: #fcd34d; }
@keyframes ripple {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(7); opacity: 0; }
}
.fx-shiatsu .fx-text { color: #d97706; animation: jiwaText 1.4s ease-out forwards; }
@keyframes jiwaText {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

/* --- 筋膜リリース：ズルッ（紫の靄が横スライドで剥がれる） --- */
.fx-fascia .fx-haze {
  position: absolute;
  top: 30%; left: 0;
  width: 100%; height: 40%;
  background: repeating-linear-gradient(115deg, rgba(168,85,247,0.55) 0px, rgba(139,92,246,0.45) 14px, rgba(192,132,252,0.5) 28px);
  animation: peelOff 0.9s cubic-bezier(0.65,0,0.35,1) forwards;
}
@keyframes peelOff {
  0%   { transform: translateX(0) skewX(0deg); opacity: 0.9; }
  100% { transform: translateX(120%) skewX(-12deg); opacity: 0; }
}
.fx-fascia .fx-text { color: #7c3aed; animation: zuruText 1s ease-out forwards; }
@keyframes zuruText {
  0%   { opacity: 0; transform: translate(-90%, -50%); }
  40%  { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(40%, -50%); }
}

/* --- ストレッチ：ピキッ→スーッ（可動域メーターが伸びる） --- */
.fx-stretch .fx-meter {
  position: absolute;
  top: 48%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; height: 18px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.fx-stretch .fx-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #34d399, #06b6d4);
  border-radius: 999px;
  animation: meterFill 1.1s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes meterFill {
  0%   { width: 8%; }
  20%  { width: 12%; }  /* ピキッ（一瞬の引っかかり） */
  100% { width: 100%; } /* スーッ */
}
.fx-stretch .fx-text { color: #0891b2; animation: jiwaText 1.3s ease-out forwards; }

/* --- スラスト：ボキィ（旧プロト踏襲：popIn + 画面揺れ） --- */
.fx-thrust .fx-text {
  color: #ef4444;
  font-size: 3.5rem;
  animation: bokiPop 0.9s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
@keyframes bokiPop {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  50%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* 画面揺れ（スラスト時 body に付与） */
.shake-active { animation: shake 0.4s; }
@keyframes shake {
  0%,100% { transform: translate(0,0) rotate(0); }
  20% { transform: translate(-3px, 1px) rotate(-0.6deg); }
  40% { transform: translate(3px, -2px) rotate(0.6deg); }
  60% { transform: translate(-2px, 2px) rotate(-0.4deg); }
  80% { transform: translate(2px, 1px) rotate(0.4deg); }
}

/* フラッシュ（命中時の閃光） */
.fx-flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  animation: flash 0.5s ease-out forwards;
}
@keyframes flash {
  0% { opacity: 0; }
  15% { opacity: 0.7; }
  100% { opacity: 0; }
}