/* =========================================
   ゆい♡らぶ 今日の恋占いページ専用スタイル
   - すべて .uranai-page スコープ配下に閉じる
   - メインテーマの style と干渉させない
========================================= */

.uranai-page {
  font-family: 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
  background: linear-gradient(160deg, #fff0f5 0%, #f3eaff 50%, #fff0fa 100%);
  color: #4a3050;
  font-size: 16px;
  line-height: 1.8;
  padding-bottom: 40px;
  position: relative;
  /* overflow: visible にして、降る星が下端の白い帯上にも自然にはみ出せるようにする */
  overflow: visible;
  isolation: isolate;
}

/* ===== ページ全体に降る星 ===== */
/* z-index を高く設定し、ヘッダー・フォーム上に重ねて表示する */
/* overflow: visible にして、ページ下端を超えて白い帯の上にも星を表示できる */
.uranai-page .uranai-falling-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  overflow: visible;
}

/* === 星ごとの個別アニメ（ばらばらの軌道・速度・タイミング） === */

/* 動きを抑えたいユーザー向けには非表示 */
@media (prefers-reduced-motion: reduce) {
  .uranai-page .uranai-falling-stars { display: none; }
}

.uranai-page *,
.uranai-page *::before,
.uranai-page *::after {
  box-sizing: border-box;
}

/* ===== ページヘッダー ===== */
.uranai-page .uranai-header {
  background: linear-gradient(90deg, #ff8fb1 0%, #c77dff 100%);
  padding: 56px 20px 32px;
  text-align: center;
  box-shadow: 0 3px 12px rgba(199, 125, 255, 0.25);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* ===== 降る星のスタイル ===== */
.uranai-page .sp {
  position: absolute;
  top: -60px;
  opacity: 0;
  filter:
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 14px rgba(255, 220, 240, 0.7));
  animation: sp-fall 50s linear infinite;
  will-change: transform, opacity;
}

/* ゆ〜っくり降る・ページ下端〜白い帯の上でじわっと消えていく */
/* 70%まではくっきり → 70%以降ゆっくり薄くなり → 100%で完全に透明（フッター到達前に消える） */
@keyframes sp-fall {
  0%   { transform: translate(0, 0)         rotate(0deg)   scale(0.85); opacity: 0;    }
  3%   { opacity: 1;    }
  20%  { transform: translate(10px, 50vh)   rotate(40deg)  scale(1);    opacity: 1;    }
  40%  { transform: translate(-10px, 100vh) rotate(80deg)  scale(1.05); opacity: 1;    }
  60%  { transform: translate(8px, 150vh)   rotate(120deg) scale(1);    opacity: 1;    }
  72%  { transform: translate(-8px, 180vh)  rotate(150deg) scale(1);    opacity: 0.75; }
  82%  { transform: translate(6px, 210vh)   rotate(175deg) scale(0.97); opacity: 0.45; }
  90%  { transform: translate(-4px, 235vh)  rotate(195deg) scale(0.93); opacity: 0.2;  }
  96%  { transform: translate(2px, 255vh)   rotate(210deg) scale(0.9);  opacity: 0.06; }
  100% { transform: translate(0, 270vh)     rotate(220deg) scale(0.85); opacity: 0;    }
}

/* 16個の星：ページ全幅にバラける（速度40〜55秒で大幅にゆっくり） */
.uranai-page .sp--1  { left:  3%; font-size: 24px; animation-delay:  0s;   animation-duration: 48s; }
.uranai-page .sp--2  { left: 10%; font-size: 18px; animation-delay:  6s;   animation-duration: 54s; }
.uranai-page .sp--3  { left: 17%; font-size: 22px; animation-delay: 12s;   animation-duration: 50s; }
.uranai-page .sp--4  { left: 24%; font-size: 16px; animation-delay:  3s;   animation-duration: 56s; }
.uranai-page .sp--5  { left: 32%; font-size: 26px; animation-delay: 18s;   animation-duration: 52s; }
.uranai-page .sp--6  { left: 39%; font-size: 20px; animation-delay:  8s;   animation-duration: 46s; }
.uranai-page .sp--7  { left: 46%; font-size: 24px; animation-delay: 22s;   animation-duration: 55s; }
.uranai-page .sp--8  { left: 53%; font-size: 18px; animation-delay:  4s;   animation-duration: 48s; }
.uranai-page .sp--9  { left: 60%; font-size: 28px; animation-delay: 14s;   animation-duration: 53s; }
.uranai-page .sp--10 { left: 67%; font-size: 22px; animation-delay: 26s;   animation-duration: 50s; }
.uranai-page .sp--11 { left: 74%; font-size: 16px; animation-delay: 10s;   animation-duration: 56s; }
.uranai-page .sp--12 { left: 81%; font-size: 24px; animation-delay: 20s;   animation-duration: 47s; }
.uranai-page .sp--13 { left: 87%; font-size: 20px; animation-delay: 28s;   animation-duration: 52s; }
.uranai-page .sp--14 { left: 92%; font-size: 22px; animation-delay: 13s;   animation-duration: 54s; }
.uranai-page .sp--15 { left: 96%; font-size: 18px; animation-delay: 24s;   animation-duration: 49s; }
.uranai-page .sp--16 { left: 50%; font-size: 26px; animation-delay: 30s;   animation-duration: 53s; }
.uranai-page .uranai-site-name {
  font-size: 1.1rem;
  opacity: 0.9;
  letter-spacing: 0.05em;
  line-height: 2;
}
.uranai-page .uranai-header h1 {
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  margin: 14px 0 10px;
  text-shadow: 0 2px 8px rgba(100, 0, 80, 0.18);
  color: #fff;
  line-height: 2.2;
}
.uranai-page .uranai-subtitle {
  font-size: 0.95rem;
  color: #ffe8f5;
  line-height: 2.2;
}

/* ルビ（ふりがな）が見切れないように余白確保 */
.uranai-page ruby {
  ruby-position: over;
}
.uranai-page rt {
  font-size: 0.55em;
  line-height: 1;
  color: inherit;
}

/* ===== コンテナ ===== */
.uranai-page .uranai-container {
  max-width: 560px;
  margin: 28px auto 0;
  padding: 0 16px;
}

/* ===== カード ===== */
.uranai-page .uranai-card {
  background: #fff;
  border-radius: 24px;
  padding: 28px 24px 32px;
  box-shadow: 0 6px 30px rgba(199, 125, 255, 0.15);
}

/* ===== フォーム ===== */
.uranai-page .uranai-form-section h2 {
  font-size: 1.25rem;
  color: #c77dff;
  text-align: center;
  margin-bottom: 6px;
}
.uranai-page .uranai-intro {
  font-size: 0.95rem;
  text-align: center;
  color: #7a5a8a;
  margin-bottom: 24px;
}
.uranai-page .uranai-form-group {
  margin-bottom: 20px;
}
.uranai-page .uranai-form-group label {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  color: #7a3f9a;
  margin-bottom: 8px;
}
.uranai-page .uranai-form-group label .uranai-emoji {
  margin-right: 6px;
}

.uranai-page input[type="text"],
.uranai-page select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e0c8f0;
  border-radius: 14px;
  font-size: 1rem;
  color: #4a3050;
  background: #fdf6ff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
}
.uranai-page input[type="text"]::placeholder { color: #c0a8d0; }
.uranai-page input[type="text"]:focus,
.uranai-page select:focus {
  border-color: #c77dff;
  box-shadow: 0 0 0 3px rgba(199, 125, 255, 0.2);
}

.uranai-page .uranai-select-wrapper {
  position: relative;
}
.uranai-page .uranai-select-wrapper::after {
  content: '▼';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #c77dff;
  font-size: 0.8rem;
  pointer-events: none;
}

/* ===== ボタン：占う ===== */
.uranai-page .uranai-btn-uranai {
  width: 100%;
  padding: 18px;
  background: linear-gradient(90deg, #ff8fb1 0%, #c77dff 100%);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(199, 125, 255, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: 8px;
  font-family: inherit;
}
.uranai-page .uranai-btn-uranai:hover,
.uranai-page .uranai-btn-uranai:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(199, 125, 255, 0.5);
  outline: 3px solid #c77dff;
  outline-offset: 2px;
}
.uranai-page .uranai-btn-uranai:active { transform: translateY(0); }

/* ===== ローディング ===== */
.uranai-page #uranai-loading {
  display: none;
  text-align: center;
  padding: 32px 0 8px;
}
.uranai-page .uranai-stars-anim {
  font-size: 2rem;
  animation: uranai-pulse 1s infinite alternate;
}
@keyframes uranai-pulse {
  from { opacity: 0.4; transform: scale(0.95); }
  to   { opacity: 1;   transform: scale(1.05); }
}
.uranai-page #uranai-loading p {
  color: #c77dff;
  font-size: 1rem;
  margin-top: 10px;
}

/* ===== 結果 ===== */
.uranai-page #uranai-result { display: none; }

.uranai-page .uranai-result-header {
  text-align: center;
  margin-bottom: 20px;
}
.uranai-page .uranai-big-emoji {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 8px;
  animation: uranai-floatUp 0.6s ease;
}
@keyframes uranai-floatUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.uranai-page .uranai-result-header h2 {
  font-size: 1.4rem;
  color: #c77dff;
}
.uranai-page .uranai-name-label {
  font-size: 1rem;
  color: #7a5a8a;
  margin-top: 4px;
}

/* ラッキー情報 */
.uranai-page .uranai-lucky-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.uranai-page .uranai-lucky-item {
  flex: 1;
  min-width: 120px;
  background: linear-gradient(135deg, #fff0fa 0%, #f3eaff 100%);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
}
.uranai-page .uranai-l-label {
  font-size: 0.8rem;
  color: #a06abf;
  margin-bottom: 4px;
}
.uranai-page .uranai-l-value {
  font-size: 1.1rem;
  font-weight: bold;
  color: #7a3f9a;
}

/* メッセージ */
.uranai-page .uranai-result-message {
  background: linear-gradient(135deg, #fff8fc 0%, #f5eeff 100%);
  border-left: 4px solid #ff8fb1;
  border-radius: 0 14px 14px 0;
  padding: 18px 20px;
  margin-bottom: 20px;
  font-size: 1rem;
  color: #4a3050;
  line-height: 2;
  white-space: pre-line;
}

/* アドバイス */
.uranai-page .uranai-advice-box {
  background: #fff0f5;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 24px;
}
.uranai-page .uranai-advice-title {
  font-size: 1rem;
  font-weight: bold;
  color: #ff8fb1;
  margin-bottom: 8px;
}
.uranai-page .uranai-advice-box p {
  font-size: 0.95rem;
  color: #5a3a6a;
  line-height: 1.9;
}

/* もう一度ボタン */
.uranai-page .uranai-btn-retry {
  width: 100%;
  padding: 16px;
  background: #fff;
  color: #c77dff;
  border: 2px solid #c77dff;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  letter-spacing: 0.06em;
  font-family: inherit;
}
.uranai-page .uranai-btn-retry:hover,
.uranai-page .uranai-btn-retry:focus {
  background: #f3eaff;
  outline: 3px solid #c77dff;
  outline-offset: 2px;
}

/* エラー */
.uranai-page .uranai-error-msg {
  color: #e05580;
  font-size: 0.9rem;
  margin-top: 6px;
  display: none;
}

/* ディスクレーマー */
.uranai-page .uranai-disclaimer {
  text-align: center;
  color: #b09ac0;
  font-size: 0.85rem;
  padding: 20px 10px 0;
}

/* ===== レスポンシブ ===== */
@media (max-width: 400px) {
  .uranai-page .uranai-header h1 { font-size: 1.5rem; }
  .uranai-page .uranai-card { padding: 22px 16px 26px; }
  .uranai-page .uranai-lucky-row { flex-direction: column; }
}