/* ==========================================================
   game.css
   メインビジュアル（雨／晴れの高円寺）と謎解きの仕掛け用。
   位置・大きさの数値は js/config.js で調整します。
   （ここの var(--○○) の初期値は、config.js が読み込まれ
     なかったときの予備で、config.js と同じ値にしてあります）
========================================================== */

:root {
  --mv-max-w: 480px;
  --mv-w: min(100vw, var(--mv-max-w));

  --bg-pos-x: 50%;
  --bg-pos-y: 50%;
  --rain-opacity: 0.35;

  --teru-w: 0.20;
  --teru-top: -10px;

  --person-w: 0.35;
  --person-offset: 40px;
  --person-bottom: -40px;
}


/* ---------- メインビジュアル（1画面分） ---------- */

.mv {
  position: relative;
  width: var(--mv-w);
  height: 100vh;                 /* 古いブラウザ用 */
  height: 100svh;                /* アドレスバー表示時の高さで固定（スクロール中にガタつかない） */
  margin: 0 auto;
  overflow: hidden;
  touch-action: manipulation;    /* ダブルタップズームを抑える（ピンチズーム・スクロールは可能） */
  user-select: none;
  -webkit-user-select: none;
}

/* 画像の長押しメニュー・ドラッグを防ぐ */
.mv img {
  display: block;
  max-width: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}


/* ---------- 重なり順（数字が大きいほど手前） ----------
   雨の背景 1 → 晴れの背景 3・虹 5（後のSTEP）
   → てるてる坊主 20 → 雨 21 → 人物 30      ※ Elementor版と同じ順番
------------------------------------------------------- */

.mv__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* ---------- 背景 ----------
   雨・晴れの背景はどちらもこのクラスで、同じ領域・同じ拡大方法・
   同じ位置に重ねる（切り替えは透明度だけで行う → ズレない） */

.mv__bg {
  object-fit: cover;             /* 画面いっぱいに、はみ出た部分を切り取る */
  object-position: var(--bg-pos-x) var(--bg-pos-y);
}

#bg-rainy {
  z-index: 1;
}


/* ---------- てるてる坊主 ---------- */

.teruteru {
  position: absolute;
  z-index: 20;
  top: var(--teru-top);
  left: 50%;
  width: calc(var(--mv-w) * var(--teru-w));
  transform: translateX(-50%);
}

.teruteru img {
  width: 100%;
  height: auto;
}


/* ---------- 雨 ----------
   Elementor版と同じく、雨粒画像を画面全体に引き伸ばして重ねた静止状態。
   ・画像そのものの濃さ = config.js の rain.opacity（Elementor版 0.5 → 0.35 に調整）
   ・外枠 #weather-rain の濃さは STEP E で「弱まる→止む」に使う予定 */

.rain {
  z-index: 21;
  pointer-events: none;
}

.rain__img {
  width: 100%;
  height: 100%;
  object-fit: fill;              /* Elementor版と同じ「引き伸ばし」 */
  opacity: var(--rain-opacity);
}


/* ---------- 考え中の人物 ---------- */

.thinking-person {
  position: absolute;
  z-index: 30;
  bottom: var(--person-bottom);
  left: calc(50% + var(--person-offset));
  width: calc(var(--mv-w) * var(--person-w));
  transform: translateX(-50%);
  cursor: pointer;               /* 3回タップでパズル① first（見た目は変わらない） */
}

.thinking-person img {
  width: 100%;
  height: auto;
}

/* 頭の上の「？」のタップ範囲（STEP V）
   パズル①を完成させた後だけ表示（main.js が hidden を外す）。透明で見た目は変わらない。
   位置と大きさは人物の画像に対する割合（「？」の吹き出し：画像の左上 約 4〜31% × 1〜25%）
   なので、晴れて人物が移動しても一緒に動く。晴れた後は人物自体はタップを通すが、ここだけは押せる */
.thinking-person__question {
  position: absolute;
  left: 0;
  top: 1%;                       /* 吹き出しの上端から（タイトルカードのボタンに重ならない） */
  width: 34%;
  height: 26%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.thinking-person__question[hidden] {
  display: none;
}