/* style.css — キジトラ猫の小太郎の星詠み占い（ディープブルーテーマ） */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-deep:      #050a1a;
  --bg-card:      rgba(8, 16, 44, 0.88);
  --bg-card2:     rgba(6, 18, 60, 0.92);
  --blue-light:   #88bbff;
  --blue-pale:    #c8deff;
  --blue-muted:   rgba(100, 160, 255, 0.58);
  --purple:       #a78bfa;
  --gold:         #ffe08a;
  --text-main:    #c8deff;
  --text-sub:     rgba(120, 175, 255, 0.62);
  --text-muted:   rgba(80, 140, 255, 0.38);
  --border:       rgba(70, 130, 255, 0.22);
  --border-glow:  rgba(80, 140, 255, 0.6);
  --radius-card:  16px;
  --radius-btn:   50px;
}

html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--text-main);
  font-family: 'Hiragino Sans', 'BIZ UDPGothic', 'Meiryo', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

#app {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== 星空背景（固定・全画面） ===== */
.stars-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom, #050a1a 0%, #030712 50%, #020510 100%);
}

/* 星雲グロー（参考 canvas の g1/g2/g3 を再現） */
.nebula {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 440px 440px at 25% 15%, rgba(30, 70, 180, 0.14) 0%, transparent 100%),
    radial-gradient(ellipse 360px 360px at 75% 28%, rgba(60, 20, 160, 0.10) 0%, transparent 100%),
    radial-gradient(ellipse 500px 500px at 50%  8%, rgba(40, 90, 220, 0.08) 0%, transparent 100%);
}

/* 星フィールド（参考 canvas の drawStars を box-shadow で再現） */
.stars-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.stars-field::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    /* bright stars (r > 1.2) */
     44px  55px 0 0.8px rgba(180, 210, 255, 0.70),
    320px  44px 0 0.7px rgba(180, 210, 255, 0.65),
    390px  72px 0 0.6px rgba(180, 210, 255, 0.55),
    450px  60px 0 0.6px rgba(180, 210, 255, 0.58),
    380px  20px 0 0.6px rgba(180, 210, 255, 0.55),
    350px 300px 0 0.6px rgba(180, 210, 255, 0.55),
    /* medium stars */
    180px  28px 0 0.4px rgba(180, 210, 255, 0.40),
    510px  18px 0 0.4px rgba(180, 210, 255, 0.40),
    130px 140px 0 0.5px rgba(180, 210, 255, 0.45),
    480px 110px 0 0.4px rgba(180, 210, 255, 0.40),
     70px 200px 0 0.5px rgba(180, 210, 255, 0.48),
    290px 100px 0 0.4px rgba(180, 210, 255, 0.38),
    160px  80px 0 0.4px rgba(180, 210, 255, 0.40),
    510px 160px 0 0.5px rgba(180, 210, 255, 0.45),
    240px 170px 0 0.4px rgba(180, 210, 255, 0.38),
    420px 200px 0 0.5px rgba(180, 210, 255, 0.50),
     60px 350px 0 0.4px rgba(180, 210, 255, 0.40),
    500px 280px 0 0.5px rgba(180, 210, 255, 0.45),
    100px 420px 0 0.4px rgba(180, 210, 255, 0.38),
     30px 180px 0 0.5px rgba(180, 210, 255, 0.45);
}

/* 明るい星のグロー */
.stars-field::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
     44px  55px 3px 1.5px rgba(220, 235, 255, 0.18),
    320px  44px 3px 1.5px rgba(220, 235, 255, 0.15),
    390px  72px 2px 1.0px rgba(220, 235, 255, 0.12),
    450px  60px 2px 1.0px rgba(220, 235, 255, 0.14),
    380px  20px 2px 1.0px rgba(220, 235, 255, 0.12);
}

/* ===== 流れ星 ===== */
.shooting-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.shooting-star {
  position: absolute;
  height: 1.2px;
  border-radius: 0.6px;
}

.shooting-star::after {
  content: '';
  position: absolute;
  right: -1.4px;
  top: -1.4px;
  width: 2.8px;
  height: 2.8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 0 4px 1px rgba(200, 225, 255, 0.55);
}

/* 流れ星1: (80,60)→(180,20) */
.s1 {
  width: 108px;
  top: 40px;
  left: 76px;
  transform: rotate(-21.8deg);
  transform-origin: left center;
  background: linear-gradient(to right, transparent 0%, rgba(200, 225, 255, 0.45) 60%, rgba(255, 255, 255, 0.85) 100%);
}

/* 流れ星2: (350,40)→(430,10) */
.s2 {
  width: 86px;
  top: 25px;
  left: 347px;
  transform: rotate(-20.6deg);
  transform-origin: left center;
  background: linear-gradient(to right, transparent 0%, rgba(200, 225, 255, 0.45) 60%, rgba(255, 255, 255, 0.85) 100%);
}

/* 流れ星3: (460,130)→(520,100) */
.s3 {
  width: 67px;
  top: 115px;
  left: 457px;
  transform: rotate(-26.6deg);
  transform-origin: left center;
  background: linear-gradient(to right, transparent 0%, rgba(200, 225, 255, 0.45) 60%, rgba(255, 255, 255, 0.85) 100%);
}

/* ===== スクリーン切り替え ===== */
.screen {
  display: none;
  position: relative;
  min-height: 100vh;
  z-index: 1;
}
.screen.active { display: block; }

.content {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 20px 48px;
}

/* ===== 入力画面 ===== */
.app-header {
  text-align: center;
  padding: 48px 0 32px;
}

.header-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}

.header-star {
  font-size: 16px;
  color: rgba(100, 160, 255, 0.5);
}

.cat-icon {
  font-size: 52px;
  filter: drop-shadow(0 0 14px rgba(107, 159, 255, 0.55));
}

.app-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-shadow: 0 0 24px rgba(80, 140, 255, 0.4);
}

.app-subtitle {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-sub);
  letter-spacing: 0.1em;
}

.input-card {
  background: var(--bg-card);
  border: 0.8px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  backdrop-filter: blur(10px);
}

.input-group {
  margin-bottom: 24px;
}

.input-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--blue-muted);
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

.input-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

.date-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(5, 12, 35, 0.9);
  border: 0.8px solid var(--border);
  border-radius: 10px;
  color: var(--text-main);
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.date-input:focus {
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.12);
}

.theme-group {
  margin-bottom: 28px;
}

.theme-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.theme-btn {
  position: relative;
  cursor: pointer;
}

.theme-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-btn span {
  display: block;
  padding: 12px 10px;
  background: rgba(5, 12, 35, 0.7);
  border: 0.8px solid var(--border);
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--text-sub);
  transition: all 0.2s;
  letter-spacing: 0.02em;
}

.theme-btn input:checked + span {
  background: rgba(80, 140, 255, 0.14);
  border-color: var(--blue-light);
  color: var(--blue-pale);
  box-shadow: 0 0 12px rgba(80, 140, 255, 0.15);
}

.theme-btn:active span {
  transform: scale(0.97);
}

.btn-primary {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #3a6aff 0%, #5a4aff 100%);
  border: none;
  border-radius: var(--radius-btn);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 24px rgba(58, 106, 255, 0.38);
}
.btn-primary:hover  { transform: translateY(-1px); box-shadow: 0 6px 30px rgba(58, 106, 255, 0.48); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.app-footer {
  text-align: center;
  padding: 24px 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== ローディング画面 ===== */
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
}

.loading-icon {
  font-size: 48px;
  color: var(--blue-light);
  animation: spin 3s linear infinite;
  margin-bottom: 20px;
  text-shadow: 0 0 20px rgba(136, 187, 255, 0.8);
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-title {
  font-size: 18px;
  color: var(--text-main);
  margin-bottom: 32px;
  letter-spacing: 0.06em;
}

.calc-steps {
  min-height: 160px;
  width: 100%;
  max-width: 320px;
  background: var(--bg-card);
  border: 0.8px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 28px;
  text-align: left;
}

.calc-step {
  font-size: 14px;
  color: var(--blue-pale);
  padding: 4px 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  font-family: 'Courier New', monospace;
}
.calc-step.visible        { opacity: 1; transform: translateY(0); }
.calc-step:last-child     { color: var(--gold); font-weight: 700; margin-top: 8px; }

.loading-dots {
  display: flex;
  gap: 8px;
}
.loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-light);
  animation: dotBounce 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-8px); opacity: 1; }
}

/* ===== 結果画面 ===== */
.result-content {
  padding-top: 24px;
  padding-bottom: 60px;
}

.result-header {
  text-align: center;
  margin-bottom: 20px;
}

/* テーマバッジ（参考 canvas の roundRect バッジを再現） */
.theme-badge {
  display: inline-block;
  padding: 7px 22px;
  background: rgba(8, 25, 75, 0.88);
  border: 0.8px solid rgba(80, 140, 255, 0.60);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-light);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.result-date {
  font-size: 11px;
  color: rgba(100, 160, 255, 0.50);
  letter-spacing: 0.04em;
}

/* ===== 星座セクション ===== */
.zodiac-section {
  text-align: center;
  margin-bottom: 16px;
}

/* 星座シンボル（ハローリング付き） */
.zodiac-symbol-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  margin-bottom: 12px;
}

.zodiac-symbol {
  font-size: 72px;
  line-height: 1;
  color: rgba(140, 195, 255, 0.92);
  text-shadow:
    0 0 20px rgba(80, 140, 255, 0.5),
    0 0 40px rgba(80, 140, 255, 0.25);
  position: relative;
  z-index: 1;
  animation: symbolPulse 3s ease-in-out infinite;
}

@keyframes symbolPulse {
  0%, 100% {
    text-shadow:
      0 0 20px rgba(80, 140, 255, 0.5),
      0 0 40px rgba(80, 140, 255, 0.20);
  }
  50% {
    text-shadow:
      0 0 30px rgba(80, 140, 255, 0.85),
      0 0 60px rgba(80, 140, 255, 0.38);
  }
}

.zodiac-ring {
  position: absolute;
  border-radius: 50%;
  inset: 0;
  margin: auto;
}

.zodiac-ring-inner {
  width: 104px;
  height: 104px;
  border: 0.6px solid rgba(80, 140, 255, 0.12);
}

.zodiac-ring-outer {
  width: 128px;
  height: 128px;
  border: 0.5px solid rgba(80, 140, 255, 0.08);
}

.zodiac-name {
  font-size: 21px;
  font-weight: 500;
  color: var(--blue-pale);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.zodiac-keywords {
  font-size: 12px;
  color: rgba(120, 175, 255, 0.62);
  letter-spacing: 0.04em;
}

/* ===== 装飾セパレーター（参考 canvas の drawSeparator を再現） ===== */
.separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
}

.sep-line {
  width: 64px;
  height: 0.5px;
  background: rgba(100, 160, 255, 0.30);
  flex-shrink: 0;
}

.sep-diamond {
  font-size: 13px;
  color: rgba(120, 175, 255, 0.55);
  margin: 0 12px;
}

/* ===== ライフパスナンバーセクション ===== */
.lifepath-section {
  text-align: center;
  margin-bottom: 20px;
}

.lifepath-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.lifepath-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}

.lifepath-number {
  font-size: 48px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 0 20px rgba(255, 224, 138, 0.4);
}

.master-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 224, 138, 0.10);
  border: 0.8px solid rgba(255, 224, 138, 0.40);
  border-radius: 50px;
  font-size: 11px;
  color: var(--gold);
  white-space: nowrap;
}

.lifepath-keywords {
  font-size: 11px;
  color: rgba(100, 160, 255, 0.58);
  letter-spacing: 0.04em;
}

/* ===== 小太郎セクション（同心円リング） ===== */
.kotaro-section {
  text-align: center;
  margin: 16px 0 8px;
}

.kotaro-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
}

/* 背景塗り円 */
.kotaro-bg-circle {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(15, 40, 120, 0.10);
  inset: 0;
  margin: auto;
}

.kotaro-placeholder {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(12, 28, 80, 0.60);
  border: 0.8px solid rgba(70, 130, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  position: relative;
  z-index: 1;
}

.kotaro-ring {
  position: absolute;
  border-radius: 50%;
  inset: 0;
  margin: auto;
}

.kotaro-ring-inner {
  width: 99px;
  height: 99px;
  border: 0.8px solid rgba(60, 130, 255, 0.18);
}

.kotaro-ring-outer {
  width: 122px;
  height: 122px;
  border: 0.5px solid rgba(60, 130, 255, 0.10);
}

.kotaro-caption {
  font-size: 10px;
  color: rgba(80, 140, 255, 0.35);
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* ===== 吹き出し（参考 canvas の吹き出しを再現） ===== */
.reading-section {
  margin-bottom: 24px;
}

.speech-bubble {
  position: relative;
  background: var(--bg-card2);
  border: 0.8px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px 20px;
  overflow: hidden;
}

/* 三角ポインター（小太郎方向） */
.speech-bubble::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-width: 0 11px 10px;
  border-style: solid;
  border-color: transparent transparent var(--border);
}
.speech-bubble::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-width: 0 10px 9px;
  border-style: solid;
  border-color: transparent transparent rgba(6, 18, 60, 0.92);
}

/* 吹き出し上部アクセントライン（参考 canvas の上部細線を再現） */
.bubble-top-line {
  position: absolute;
  top: 10px;
  left: 16px;
  right: 16px;
  height: 0.5px;
  background: rgba(80, 140, 255, 0.15);
}

.reading-text {
  font-size: 15px;
  line-height: 1.85;
  color: var(--blue-pale);
  white-space: pre-wrap;
  text-align: left;
  margin-top: 8px;
}

/* ===== アクションボタン ===== */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.btn-share {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #3a6aff 0%, #5a4aff 100%);
  border: none;
  border-radius: var(--radius-btn);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(58, 106, 255, 0.32);
}
.btn-share:hover  { transform: translateY(-1px); }
.btn-share:active { transform: translateY(0); }

.btn-secondary {
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 0.8px solid var(--border);
  border-radius: var(--radius-btn);
  color: var(--blue-pale);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.btn-secondary:hover {
  background: rgba(80, 140, 255, 0.08);
  border-color: var(--blue-light);
}

.btn-detail {
  width: 100%;
  padding: 13px;
  background: transparent;
  border: 0.8px solid rgba(167, 139, 250, 0.40);
  border-radius: var(--radius-btn);
  color: var(--purple);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.btn-detail:hover {
  background: rgba(167, 139, 250, 0.08);
  border-color: var(--purple);
}

/* ===== 広告バナー ===== */
.ad-banner {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  min-height: 60px;
  background: var(--bg-card);
  border: 0.8px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-placeholder {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

/* ===== タロット誘導バナー ===== */
.tarot-banner {
  background: var(--bg-card);
  border: 0.8px solid rgba(167, 139, 250, 0.25);
  border-radius: 14px;
  padding: 16px 20px;
  text-align: center;
  margin-bottom: 20px;
}
.tarot-banner p    { font-size: 14px; color: var(--purple); margin-bottom: 4px; }
.tarot-banner span { font-size: 12px; color: var(--text-muted); }

/* ===== 結果画面フッター ===== */
.result-footer {
  text-align: center;
  padding-bottom: 8px;
}

.footer-rule {
  height: 0.4px;
  background: rgba(60, 120, 255, 0.15);
  margin-bottom: 10px;
}

.footer-text {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ===== トースト ===== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(20, 30, 70, 0.95);
  border: 0.8px solid var(--border);
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 14px;
  color: var(--text-main);
  transition: transform 0.3s ease;
  z-index: 999;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* ===== シェアカード モーダル ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 5, 16, 0.92);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.active { display: flex; }

.modal-card {
  background: var(--bg-card2);
  border: 0.8px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.modal-hint {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 14px;
}

.modal-card canvas {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
  display: block;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
}