/* ==========================================================
   omikuji.css
   晴れた後の「てるてるみくじ」（STEP T）
   ・晴れた後、画面の右側に独立した看板の画像（#omikuji-hit。看板全体がボタン）を置く（STEP AA）
     位置と大きさは js/main.js が画面の大きさ・人物の位置から計算して
     style に入れる（画面幅が変わっても、看板と吹き出し・猫の位置関係は同じ）
   ・タップするとおみくじの画面（#omikuji-modal）が開く
   ・中身は仮。内容とデザインが決まったら差し替える
========================================================== */

/* ---------- てるてるみくじの看板（STEP AA：独立した画像。看板全体がボタン） ----------
   ・雨の間は見えない。晴れの背景への切り替え（config.js weather.sunnyMs = 1.6秒）と
     同じ時間でふわっと現れる。クリア済みの再訪では最初から表示
   ・押しておみくじが開くのは、晴れの演出が終わった後（段階C・D。main.js で判定）
   ・位置と大きさは js/main.js（config.js の omikuji） */
.omikuji-hit {
  position: absolute;
  z-index: 24;                    /* 晴れの背景(3)・虹(5)より手前、タイトルカード(25)・人物(30)より奥 */
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease-in-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.omikuji-hit__img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
html.is-sunny .omikuji-hit {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- 晴れた後の猫（STEP AA：独立した画像・飾り） ----------
   看板の左下に、同じ石畳の上に座っているように置く（看板の脚に少し重なって手前）。
   タップは通すので、看板・「？」などの操作をじゃましない */
.weather-cat {
  position: absolute;
  z-index: 24;                    /* 看板と同じ高さ（HTMLで後ろにあるので看板より手前） */
  height: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease-in-out;
}
html.is-sunny .weather-cat {
  opacity: 1;
}

/* クリア済みの再訪・確認用で最初から晴れのときは、動きを付けない */
html.is-sunny-now .omikuji-hit,
html.is-sunny-now .weather-cat {
  transition: none;
}


/* ---------- おみくじの画面 ---------- */
.omikuji-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;                  /* パズルのモーダルと同じ高さ（同時には開かない） */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: rgba(0, 0, 0, 0.55);
}
.omikuji-modal.is-open {
  display: flex;
}

/* おみくじの紙（LP のカードと同じ：生成りの紙＋細い二重枠） */
.omikuji-panel {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 310px);
  padding: 26px 16px 26px;
  border: 1px solid rgba(42, 36, 32, 0.35);
  outline: 1px solid rgba(42, 36, 32, 0.2);
  outline-offset: -6px;
  border-radius: 4px;
  background-color: var(--lp-paper);
  background-image: var(--lp-noise);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  color: var(--lp-ink);
  text-align: center;
  animation: omikujiAppear 0.3s ease-out;
}

.omikuji-close {
  position: absolute;
  top: -34px;
  right: 10.5px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.omikuji-close svg {
  display: block;
  width: 100%;
  height: 100%;
}

.omikuji-title {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-green);
  font-family: var(--lp-font-mincho);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ---------- 画面の切り替え（引く前／引いている間／結果） ---------- */
.omikuji-view {
  display: none;
}
.omikuji-panel[data-view="start"] .omikuji-view--start,
.omikuji-panel[data-view="drawing"] .omikuji-view--drawing,
.omikuji-panel[data-view="result"] .omikuji-view--result {
  display: block;
}

.omikuji-lead {
  margin: 18px 0 0;
  font-family: var(--lp-font-mincho);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.omikuji-btn {
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
}

/* ---------- 引いている間：てるてる坊主がゆらゆら ---------- */
.omikuji-teru {
  display: block;
  width: 46px;
  height: auto;
  margin: 14px auto 2px;
  transform-origin: 50% 0;        /* ひもの輪を支点に揺れる */
  animation: omikujiSway 0.6s ease-in-out infinite alternate;
}

@keyframes omikujiSway {
  from { transform: rotate(-12deg); }
  to   { transform: rotate(12deg); }
}

/* ---------- 結果 ---------- */
.omikuji-intro {
  margin: 16px 0 0;
  color: var(--lp-ink-soft);
  font-family: var(--lp-font-mincho);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* 結果の札（縦長の紙片。おみくじの紙のように濃い紙＋細い枠） */
.omikuji-slip {
  position: relative;
  margin: 12px auto 0;
  padding: 14px 10px 16px;
  width: 180px;
  box-sizing: border-box;
  border: 1px solid rgba(42, 36, 32, 0.35);
  background-color: var(--lp-paper-deep);
  background-image: var(--lp-noise);
}

.omikuji-name {
  margin: 6px 0 0;
  font-family: var(--lp-font-mincho);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  white-space: nowrap;            /* 「曇のち晴」なども1行で */
}

.omikuji-message {
  margin: 16px 0 0;
  font-size: clamp(12px, 3.6vw, 13.5px);   /* 一番長い行（20文字）が、どの画面幅でも1行に収まる大きさ */
  line-height: 1.85;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: pre-line;          /* config.js の文章の改行記号を、そのまま改行にする */
}

/* 赤い印（大晴のときだけ。LP のチケット欄の「謎」の印と同じ作り） */
.omikuji-seal {
  display: none;
  position: absolute;
  top: -12px;
  right: -14px;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--lp-red);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--lp-paper), inset 0 0 0 3px var(--lp-red);
  background: var(--lp-paper);
  color: var(--lp-red);
  font-family: var(--lp-font-mincho);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.88;
  transform: rotate(-12deg);
}

/* ---------- 結果ごとの小さな天気のしるし（CSSで描く） ----------
   __a = 太陽（芥子色の丸）／ __b = 雲（紙色の丸みのある形）・雨 */
.omikuji-motif {
  position: relative;
  display: block;
  width: 56px;
  height: 34px;
  margin: 0 auto;
}
.omikuji-motif__a,
.omikuji-motif__b {
  position: absolute;
  display: block;
}
/* 太陽 */
.omikuji-motif__a {
  left: 50%;
  top: 4px;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: var(--lp-mustard);
  box-shadow: 0 0 0 3px rgba(200, 149, 46, 0.22);
}
/* 雲 */
.omikuji-motif__b {
  display: none;
  left: 6px;
  top: 14px;
  width: 30px;
  height: 14px;
  border: 1.5px solid var(--lp-ink-soft);
  border-radius: 10px;
  background: var(--lp-paper);
}
.omikuji-motif__b::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -9px;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--lp-ink-soft);
  border-bottom-color: transparent;
  border-radius: 50%;
  background: var(--lp-paper);
}

/* 大晴：小さな太陽＋控えめな光（光の筋）＋赤い印、名前は赤茶 */
.omikuji-panel[data-result="daisei"] .omikuji-motif__a {
  box-shadow: 0 0 0 4px rgba(200, 149, 46, 0.18), 0 0 14px 4px rgba(200, 149, 46, 0.35);
}
.omikuji-panel[data-result="daisei"] .omikuji-motif::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(200, 149, 46, 0.55) 0 6deg, transparent 6deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 15px, #000 16px, #000 21px, transparent 22px);
          mask: radial-gradient(circle, transparent 15px, #000 16px, #000 21px, transparent 22px);
}
.omikuji-panel[data-result="daisei"] .omikuji-name {
  color: var(--lp-red);
}
.omikuji-panel[data-result="daisei"] .omikuji-seal {
  display: grid;
}
.omikuji-panel[data-result="daisei"] .omikuji-slip {
  box-shadow: 0 0 0 3px rgba(200, 149, 46, 0.18);
}

/* 薄晴：太陽に薄い雲が少しかかる */
.omikuji-panel[data-result="usubare"] .omikuji-motif__b {
  display: block;
  left: 26px;
  top: 16px;
  opacity: 0.85;
}

/* 曇のち晴：雲の右上から太陽が顔を出す */
.omikuji-panel[data-result="kumori"] .omikuji-motif__a {
  left: auto;
  right: 8px;
  top: 2px;
  margin-left: 0;
  width: 18px;
  height: 18px;
}
.omikuji-panel[data-result="kumori"] .omikuji-motif__b {
  display: block;
}

/* 雨のち晴：雨の雲（短い雨の線）と、右上の太陽 */
.omikuji-panel[data-result="ame"] .omikuji-motif__a {
  left: auto;
  right: 8px;
  top: 2px;
  margin-left: 0;
  width: 18px;
  height: 18px;
}
.omikuji-panel[data-result="ame"] .omikuji-motif__b {
  display: block;
  top: 8px;
}
.omikuji-panel[data-result="ame"] .omikuji-motif__b::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  width: 20px;
  height: 8px;
  background: repeating-linear-gradient(105deg, transparent 0 4px, var(--lp-green) 4px 5.5px, transparent 5.5px 8px);
}

@keyframes omikujiAppear {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}


/* ---------- 「ここをタップしてね！」の吹き出し（STEP V） ----------
   看板のすぐ上に、紙のメモのような小さな吹き出し＋手描き風の点線の矢印で看板を指す。
   ふわっと上下にゆれて、タップできることに気づけるようにする（動きは小さく・ゆっくり）。
   位置は js/main.js が看板の位置から計算。押すとおみくじが開く */
.omikuji-guide {
  position: absolute;
  z-index: 24;                    /* 看板と同じ（タイトルカード・人物より奥） */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: omikujiGuideFloat 2.4s ease-in-out infinite;
}
.omikuji-guide[hidden] {
  display: none;
}

.omikuji-guide__text {
  display: block;
  padding: 4px 8px 5px;
  border: 1.5px solid #2a2420;
  border-radius: 10px 12px 9px 11px;   /* 少しいびつにして手描きの雰囲気 */
  background: #f7eedb;
  box-shadow: 2px 3px 0 rgba(42, 36, 32, 0.25);
  color: #2a2420;
  font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: rotate(-3deg);
}

.omikuji-guide__arrow {
  display: block;
  width: 16px;
  height: 20px;
  margin-top: -1px;
  animation: omikujiGuideArrow 1.2s ease-in-out infinite;
}

@keyframes omikujiGuideFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@keyframes omikujiGuideArrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .omikuji-guide,
  .omikuji-guide__arrow {
    animation: none;
  }
}

/* 動きを減らす設定の端末：ゆらゆらと開くときの動きを止める */
@media (prefers-reduced-motion: reduce) {
  .omikuji-panel,
  .omikuji-teru {
    animation: none;
  }
}