/* ══════════════════════════════════════
   PREMIUM ─ 追加スタイル
   （../css/style.css を継承して上書き）
══════════════════════════════════════ */

/* プレミアムバッジ */
.premium-badge{
  display:inline-block;
  margin:10px 0 16px;
  padding:5px 22px;
  background:linear-gradient(135deg,rgba(201,169,110,.25),rgba(255,215,0,.15));
  border:1px solid rgba(201,169,110,.6);
  border-radius:99px;
  font-family:var(--display);
  font-size:.82rem;letter-spacing:.25em;
  color:var(--gold);
  text-shadow:0 0 12px rgba(201,169,110,.6);
  animation:premiumPulse 3s ease-in-out infinite;
}
@keyframes premiumPulse{
  0%,100%{box-shadow:0 0 15px rgba(201,169,110,.2)}
  50%    {box-shadow:0 0 30px rgba(201,169,110,.5)}
}

.premium-badge-sm{
  display:inline-block;
  padding:3px 14px;
  background:linear-gradient(135deg,rgba(201,169,110,.2),rgba(255,215,0,.1));
  border:1px solid rgba(201,169,110,.4);
  border-radius:99px;
  font-size:.72rem;letter-spacing:.2em;
  color:var(--gold);margin-bottom:6px;
}

/* プレミアム版AI鑑定ブロック（フル表示）*/
.reading-block.ai-reading-premium{
  background:linear-gradient(135deg,rgba(201,169,110,.1),rgba(123,47,255,.08),rgba(201,169,110,.05));
  border:1px solid rgba(201,169,110,.4);
  border-radius:12px;padding:20px 22px;margin-bottom:16px;
}
.reading-block.ai-reading-premium h4{
  color:var(--gold);font-size:.78rem;letter-spacing:.18em;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.reading-block.ai-reading-premium h4::before{
  content:'';display:inline-block;width:20px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.reading-block.ai-reading-premium h4::after{
  content:'';display:inline-block;width:20px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.reading-block.ai-reading-premium .reading-body{
  font-size:.88rem;line-height:2.1;color:var(--text);
}

/* プレミアム版 soul-card（ロックなし・強調）*/
.soul-card.premium{
  background:linear-gradient(135deg,rgba(201,169,110,.1),rgba(123,47,255,.08));
  border-color:rgba(201,169,110,.35);
}

/* プレミアム版 calcGrid（全item表示）*/
.calc-item.premium-item{
  border-color:rgba(201,169,110,.25);
  background:rgba(201,169,110,.05);
}

/* 全18占い解放バナー（天命タブ上部）*/
.premium-unlock-banner{
  text-align:center;
  background:linear-gradient(135deg,rgba(201,169,110,.1),rgba(123,47,255,.08));
  border:1px solid rgba(201,169,110,.4);
  border-radius:12px;padding:14px 20px;margin-bottom:20px;
  font-size:.8rem;color:var(--gold);letter-spacing:.1em;
}

/* タブ内の文字量バッジ */
.word-count-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(201,169,110,.1);border:1px solid rgba(201,169,110,.3);
  border-radius:99px;padding:3px 10px;
  font-size:.66rem;color:var(--gold);letter-spacing:.08em;margin-left:8px;
}

/* ─── 結果アクションボタン行 ─────────────────── */
.result-actions{
  display:flex;justify-content:center;align-items:center;gap:12px;
  margin:40px 0 20px;flex-wrap:wrap;
}

.btn-print{
  padding:11px 26px;
  background:linear-gradient(135deg,rgba(201,169,110,.2),rgba(255,215,0,.12));
  border:1px solid rgba(201,169,110,.5);
  border-radius:99px;
  color:var(--gold);font-size:.83rem;letter-spacing:.12em;
  cursor:pointer;transition:all .25s;
}
.btn-print:hover{
  background:linear-gradient(135deg,rgba(201,169,110,.35),rgba(255,215,0,.22));
  box-shadow:0 0 18px rgba(201,169,110,.3);
}

/* ─── 月運カレンダー ─────────────────────────── */
.monthly-hero{
  text-align:center;padding:24px 16px 20px;
}
.monthly-hero-icon{ font-size:2.2rem; }
.monthly-hero-title{
  font-family:var(--display);font-size:1.15rem;color:var(--gold);
  letter-spacing:.2em;margin:8px 0 4px;
}
.monthly-hero-sub{ font-size:.78rem;color:var(--muted);letter-spacing:.08em; }

.monthly-legend{ margin:0 0 16px; }
.monthly-summary-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.monthly-summary-item{
  padding:10px 14px;border-radius:10px;font-size:.78rem;
}
.monthly-summary-item span{ display:block;color:var(--muted);margin-bottom:3px; }
.monthly-summary-item strong{ color:var(--gold);font-size:.82rem; }
.monthly-summary-item.chance{ background:rgba(201,169,110,.08);border:1px solid rgba(201,169,110,.25); }
.monthly-summary-item.caution{ background:rgba(91,192,222,.06);border:1px solid rgba(91,192,222,.2); }

.monthly-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;margin-bottom:16px;
}
@media(max-width:480px){
  .monthly-grid{ grid-template-columns:repeat(2, 1fr); }
  .monthly-summary-row{ grid-template-columns:1fr; }
}

.monthly-card{
  position:relative;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:12px 10px 10px;
  text-align:center;transition:all .25s;
}
.monthly-card:hover{ background:rgba(255,255,255,.06); }
.monthly-card--now{
  border-color:rgba(201,169,110,.5);
  background:rgba(201,169,110,.07);
  box-shadow:0 0 18px rgba(201,169,110,.15);
}
.monthly-now-badge{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#c9a96e,#e8d5a3);
  color:#0a0a1a;font-size:.58rem;font-weight:700;letter-spacing:.12em;
  padding:2px 9px;border-radius:99px;
}
.monthly-header{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-bottom:4px;
}
.monthly-month-name{ font-size:.78rem;color:var(--muted); }
.monthly-num{ font-size:1.4rem;font-weight:700;line-height:1; }
.monthly-icon{ font-size:1rem; }
.monthly-title{ font-size:.72rem;font-weight:600;letter-spacing:.05em;margin-bottom:4px; }
.monthly-desc{ font-size:.65rem;color:var(--muted);line-height:1.55; }

.monthly-note{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:12px;
}
.monthly-note p{ font-size:.68rem;color:var(--muted);margin-bottom:4px;line-height:1.6; }

/* ─── 占い種類セレクター ──────────────────────── */
.focus-selector-wrap{ margin-bottom:14px; }

.focus-toggle-btn{
  width:100%;display:flex;align-items:center;gap:8px;
  padding:11px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,169,110,.3);
  border-radius:10px;
  color:var(--gold);font-size:.82rem;letter-spacing:.1em;
  cursor:pointer;transition:all .25s;text-align:left;
}
.focus-toggle-btn:hover,
.focus-toggle-btn--open{ background:rgba(201,169,110,.08);border-color:rgba(201,169,110,.5); }
.focus-toggle-icon{ font-size:.9rem; }
.focus-toggle-arrow{ margin-left:auto;font-size:.72rem;transition:transform .2s; }
.focus-count-badge{
  display:inline-flex;align-items:center;
  padding:2px 9px;border-radius:99px;
  background:rgba(201,169,110,.2);
  color:var(--gold);font-size:.68rem;font-weight:700;
}

.focus-panel{
  margin-top:8px;
  padding:14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
}
.focus-hint{
  font-size:.78rem;color:var(--muted);margin-bottom:6px;letter-spacing:.05em;
}
.focus-hint--small{
  font-size:.66rem;opacity:.75;margin-bottom:12px;
}
.focus-chips{
  display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;
}
.focus-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 13px;border-radius:99px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:var(--muted);font-size:.76rem;cursor:pointer;
  transition:all .2s;
}
.focus-chip:hover{ border-color:rgba(201,169,110,.4);color:var(--text); }
.focus-chip--on{
  background:linear-gradient(135deg,rgba(201,169,110,.2),rgba(255,215,0,.1));
  border-color:rgba(201,169,110,.6);
  color:var(--gold);
}
.focus-chip-icon{ font-size:.9rem; }
@keyframes chipShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
.focus-chip--shake{ animation:chipShake .35s ease; }

.focus-actions{
  display:flex;gap:8px;flex-wrap:wrap;
}
.focus-action-btn{
  padding:6px 14px;border-radius:99px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);font-size:.74rem;cursor:pointer;transition:all .2s;
}
.focus-action-btn:hover{ background:rgba(255,255,255,.1);color:var(--text); }
.focus-action-btn--lucky{
  background:rgba(201,169,110,.1);
  border-color:rgba(201,169,110,.4);color:var(--gold);
}
.focus-action-btn--lucky:hover{ background:rgba(201,169,110,.2); }

/* フォーカス選択時の強調（既存 calc-grid 互換） */
.calc-item--focused{
  border-color:rgba(201,169,110,.6) !important;
  background:rgba(201,169,110,.1) !important;
  box-shadow:0 0 10px rgba(201,169,110,.15);
}

/* ハイライト演出（data-fortune で指定されたカードを強調）── オーロラ多色枠 + スキャン + リボン */
.highlight-focus{
  position:relative;
  transform:scale(1.08);
  z-index:3;
  transition:transform .4s cubic-bezier(.2,.8,.3,1.1);
  animation:highlight-aurora 3.2s ease-in-out infinite;
  overflow:visible;
}
@keyframes highlight-aurora{
  0%,100% {
    box-shadow:
      0 0 0 3px rgba(201,169,110,.9),
      0 0 0 6px rgba(155,89,182,.45),
      0 0 42px 6px rgba(233,30,140,.35),
      0 0 72px 14px rgba(91,192,222,.22);
  }
  33% {
    box-shadow:
      0 0 0 3px rgba(255,215,120,1),
      0 0 0 6px rgba(233,30,140,.6),
      0 0 52px 8px rgba(91,192,222,.45),
      0 0 84px 18px rgba(155,89,182,.28);
  }
  66% {
    box-shadow:
      0 0 0 3px rgba(255,185,140,1),
      0 0 0 6px rgba(91,192,222,.55),
      0 0 48px 8px rgba(155,89,182,.5),
      0 0 90px 20px rgba(233,30,140,.25);
  }
}
/* 光のスキャン（カード表面を流れる） */
.highlight-focus::after{
  content:'';
  position:absolute;
  top:0; left:-40%;
  width:35%; height:100%;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.12) 45%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.12) 55%,
    transparent 100%);
  border-radius:inherit;
  animation:highlight-scan 3.5s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
  mix-blend-mode:screen;
}
@keyframes highlight-scan{
  0%       { left:-40%; opacity:0; }
  20%      { opacity:1; }
  80%      { opacity:1; }
  100%     { left:140%; opacity:0; }
}
/* 左上リボン「✦ 注目 ✦」 */
.highlight-ribbon{
  position:absolute;
  top:14px; left:-34px;
  padding:3px 38px;
  background:linear-gradient(90deg,#9b59b6 0%,#e91e8c 50%,#5bc0de 100%);
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.18em;
  transform:rotate(-35deg);
  box-shadow:0 3px 10px rgba(0,0,0,.45), 0 0 14px rgba(233,30,140,.5);
  z-index:4;
  pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  white-space:nowrap;
}

/* マイセレクションバナー */
.my-selection-banner{ }
.my-sel-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;
}
.my-sel-item{
  padding:10px 8px;
  background:rgba(201,169,110,.06);
  border:1px solid rgba(201,169,110,.3);
  border-radius:10px;text-align:center;
}
.my-sel-icon{ font-size:1.4rem;margin-bottom:3px; }
.my-sel-label{ font-size:.62rem;color:var(--muted);margin-bottom:2px; }
.my-sel-val{ font-size:.72rem;color:var(--gold);font-weight:600; }

/* ─── カード引きタブ ──────────────────────── */
.cardpick-hero{
  text-align:center;padding:20px 16px 16px;
}
.cardpick-hero-icon{ font-size:2rem; }
.cardpick-hero-title{
  font-family:var(--display);font-size:1.1rem;color:var(--gold);
  letter-spacing:.18em;margin:6px 0 4px;
}
.cardpick-hero-sub{ font-size:.78rem;color:var(--muted);margin-bottom:4px; }
.cardpick-focus-note{
  display:inline-block;padding:3px 12px;
  background:rgba(201,169,110,.1);border:1px solid rgba(201,169,110,.25);
  border-radius:99px;font-size:.68rem;color:var(--gold);
}

.flip-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0;
}
@media(max-width:360px){ .flip-grid{ grid-template-columns:repeat(2,1fr); } }

/* カードフリップ */
.flip-card{
  perspective:800px;aspect-ratio:2/3;cursor:pointer;
}
.flip-card-inner{
  position:relative;width:100%;height:100%;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  transform-style:preserve-3d;
}
.flip-card.flipped .flip-card-inner{ transform:rotateY(180deg); }

.flip-card-front,
.flip-card-back{
  position:absolute;inset:0;
  border-radius:12px;
  backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 8px;text-align:center;
}
.flip-card-front{
  background:linear-gradient(135deg,rgba(10,10,40,.9),rgba(30,15,60,.9));
  border:1px solid rgba(201,169,110,.35);
}
.flip-card-front:hover{ border-color:rgba(201,169,110,.7);box-shadow:0 0 16px rgba(201,169,110,.2); }
.flip-card-star{ font-size:1.4rem;color:var(--gold);margin-bottom:4px;opacity:.7; }
.flip-card-num{ font-size:1.8rem;font-weight:700;color:var(--gold);line-height:1; }
.flip-card-hint{ font-size:.6rem;color:var(--muted);margin-top:6px;letter-spacing:.05em; }

.flip-card-back{
  background:linear-gradient(135deg,rgba(201,169,110,.15),rgba(123,47,255,.12),rgba(201,169,110,.08));
  border:1px solid rgba(201,169,110,.4);
  transform:rotateY(180deg);
  gap:4px;
}
.flip-card-icon{ font-size:1.6rem; }
.flip-card-type{ font-size:.62rem;color:var(--muted);letter-spacing:.08em; }
.flip-card-val{ font-size:.76rem;color:var(--gold);font-weight:600;margin:2px 0; }
.flip-card-msg{ font-size:.64rem;color:var(--text);line-height:1.55; }

.cardpick-actions{ text-align:center;margin-top:4px; }
.btn-reshuffle{
  padding:10px 24px;border-radius:99px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);font-size:.8rem;letter-spacing:.1em;cursor:pointer;transition:all .25s;
}
.btn-reshuffle:hover{ background:rgba(201,169,110,.12);border-color:rgba(201,169,110,.4);color:var(--gold); }

/* ─── 前回の鑑定復元バナー ──────────────────────── */
.restore-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(135deg,rgba(201,169,110,.12),rgba(123,47,255,.08));
  border:1px solid rgba(201,169,110,.35);
  border-radius:12px;padding:14px 18px;margin-bottom:18px;
  flex-wrap:wrap;
}
.restore-info{ display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--text); }
.restore-icon{ font-size:1.4rem; }
.restore-info strong{ color:var(--gold); }
.restore-info small{ display:block;color:var(--muted);font-size:.7rem; }
.btn-restore{
  padding:8px 18px;border-radius:99px;
  background:linear-gradient(135deg,rgba(201,169,110,.25),rgba(255,215,0,.15));
  border:1px solid rgba(201,169,110,.5);
  color:var(--gold);font-size:.78rem;letter-spacing:.1em;cursor:pointer;
  white-space:nowrap;transition:all .2s;
}
.btn-restore:hover{ background:linear-gradient(135deg,rgba(201,169,110,.4),rgba(255,215,0,.25)); }

/* 復元ボタン群＋プルダウン（相性診断：履歴が2件以上ある時） */
.restore-actions{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;
}
.btn-restore-select{
  padding:7px 10px;border-radius:10px;
  background:rgba(8,8,30,.85);
  border:1px solid rgba(201,169,110,.45);
  color:var(--gold);font-family:var(--serif,'Noto Serif JP',serif);
  font-size:.74rem;letter-spacing:.04em;cursor:pointer;
  max-width:220px;
}
.btn-restore-select:focus{ outline:none;border-color:rgba(232,213,163,.8); }
@media (max-width:540px){
  .restore-actions{ width:100%;justify-content:space-between; }
  .btn-restore-select{ flex:1;max-width:none;min-width:0; }
}

/* ─── 開運3カ条 ──────────────────────────────── */
.kaiun-card{ }
.kaiun-list{ display:flex;flex-direction:column;gap:12px; }
.kaiun-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
}
.kaiun-num{
  flex-shrink:0;
  width:24px;height:24px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(201,169,110,.3),rgba(201,169,110,.15));
  border:1px solid rgba(201,169,110,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;color:var(--gold);font-weight:700;
}
.kaiun-icon{ font-size:1.3rem;flex-shrink:0;margin-top:1px; }
.kaiun-body{ flex:1;min-width:0; }
.kaiun-title{ font-size:.82rem;color:var(--gold);margin-bottom:3px;font-weight:600; }
.kaiun-desc{ font-size:.75rem;color:var(--muted);line-height:1.65; }

/* ─── バイオリズム タブ ──────────────────────── */
.bio-hero{
  text-align:center;padding:20px 16px 16px;
}
.bio-hero-icon{ font-size:2rem; }
.bio-hero-title{
  font-family:var(--display);font-size:1.1rem;color:var(--gold);
  letter-spacing:.18em;margin:6px 0 4px;
}
.bio-hero-sub{ font-size:.76rem;color:var(--muted); }

.bio-today-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;
}
@media(max-width:480px){ .bio-today-grid{ grid-template-columns:1fr; } }

.bio-today-item{
  padding:12px 10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;text-align:center;
}
.bio-today-label{ font-size:.7rem;letter-spacing:.05em;margin-bottom:4px; }
.bio-today-val{ font-size:1.6rem;font-weight:700;line-height:1; }
.bio-today-status{ font-size:.72rem;color:var(--muted);margin:2px 0 6px; }
.bio-bar-track{
  height:5px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin-bottom:4px;
}
.bio-bar-fill{ height:100%;border-radius:99px;transition:width .6s ease; }
.bio-cycle-note{ font-size:.62rem;color:rgba(232,213,163,.4); }

.bio-chart-wrap{
  height:200px;margin-bottom:6px;
  position:relative;
}
.bio-chart-note{ text-align:center;font-size:.68rem;color:var(--muted);margin-bottom:16px; }

.bio-advice-list{ display:flex;flex-direction:column;gap:8px; }
.bio-advice-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,.03);
  border-left:2px solid rgba(201,169,110,.3);
  border-radius:0 8px 8px 0;
}
.bio-advice-icon{ font-size:1.2rem;flex-shrink:0; }
.bio-advice-text{ font-size:.78rem;color:var(--text);line-height:1.6; }

/* ─── 9年サイクル ──────────────────────────── */
.nine-year-section{ margin-bottom:20px; }
.nine-year-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
@media(max-width:480px){ .nine-year-grid{ grid-template-columns:repeat(3,1fr); } }

.cycle-cell{
  position:relative;
  padding:10px 8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;text-align:center;
}
.cycle-cell--now{
  border-color:rgba(201,169,110,.5);
  background:rgba(201,169,110,.08);
  box-shadow:0 0 14px rgba(201,169,110,.15);
}
.cycle-now-tag{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#c9a96e,#e8d5a3);
  color:#0a0a1a;font-size:.55rem;font-weight:700;
  padding:2px 8px;border-radius:99px;letter-spacing:.1em;
}
.cycle-year{ font-size:.66rem;color:var(--muted);margin-bottom:2px; }
.cycle-num{ font-size:1.5rem;font-weight:700;line-height:1; }
.cycle-icon{ font-size:.95rem;margin:2px 0; }
.cycle-title{ font-size:.62rem;font-weight:600;margin-bottom:3px; }
.cycle-desc{ font-size:.58rem;color:var(--muted);line-height:1.5; }

/* ─── 追加ページへのナビゲーション ─────────────────── */
.extra-pages-nav {
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin:16px 0;
}
.extra-page-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 22px; border-radius:99px;
  background:linear-gradient(135deg,rgba(201,169,110,.1),rgba(123,47,255,.08));
  border:1px solid rgba(201,169,110,.35);
  color:var(--gold); font-size:.82rem; letter-spacing:.1em;
  text-decoration:none; transition:all .25s;
}
.extra-page-btn:hover {
  background:linear-gradient(135deg,rgba(201,169,110,.22),rgba(123,47,255,.16));
  box-shadow:0 0 16px rgba(201,169,110,.2);
  color:var(--gold-light,#e8d5a3);
}

/* ─── シェア画像ボタン ──────────────────────────── */
.btn-share-img {
  padding:11px 26px; border-radius:99px;
  background:linear-gradient(135deg,rgba(233,30,140,.15),rgba(123,47,255,.12));
  border:1px solid rgba(233,30,140,.4);
  color:#e91e8c; font-size:.83rem; letter-spacing:.12em; cursor:pointer; transition:all .25s;
}
.btn-share-img:hover {
  background:linear-gradient(135deg,rgba(233,30,140,.28),rgba(123,47,255,.22));
  box-shadow:0 0 18px rgba(233,30,140,.25);
}

/* ─── 開運おみくじ ──────────────────────────────── */
.omikuji-wrap { padding:20px; text-align:center; }
.omikuji-title { font-family:var(--display); color:var(--gold); font-size:.9rem; letter-spacing:.2em; margin-bottom:4px; }
.omikuji-sub { font-size:.74rem; color:var(--muted); margin-bottom:16px; }
.btn-omikuji {
  padding:14px 32px; border-radius:99px; font-size:.9rem;
  background:linear-gradient(135deg,rgba(201,169,110,.2),rgba(255,215,0,.12));
  border:1px solid rgba(201,169,110,.5); color:var(--gold); cursor:pointer;
  letter-spacing:.15em; transition:all .25s;
}
.btn-omikuji:hover { background:linear-gradient(135deg,rgba(201,169,110,.35),rgba(255,215,0,.22)); box-shadow:0 0 20px rgba(201,169,110,.3); }
@keyframes omikujiShake {
  0%,100%{transform:rotate(0)} 20%{transform:rotate(-15deg)} 40%{transform:rotate(15deg)}
  60%{transform:rotate(-10deg)} 80%{transform:rotate(10deg)}
}
.omikuji-stick { font-size:3rem; display:inline-block; }
.omikuji-result { margin:0 auto; max-width:400px; }
.omikuji-result--new { animation:fadeInUp .5s ease; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.omikuji-result-inner {
  background:linear-gradient(135deg,rgba(201,169,110,.1),rgba(123,47,255,.08));
  border:1px solid rgba(201,169,110,.4); border-radius:16px; padding:20px;
}
.omikuji-level { font-family:var(--display); font-size:2.2rem; font-weight:700; margin-bottom:12px; }
.omikuji-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.omikuji-item {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:8px; text-align:center;
}
.omikuji-item span { display:block; font-size:.66rem; color:var(--muted); margin-bottom:2px; }
.omikuji-item strong { font-size:.82rem; color:var(--gold); }
.omikuji-action { font-size:.78rem; color:var(--text); padding:10px; background:rgba(255,255,255,.03); border-radius:8px; line-height:1.7; }
.omikuji-already { font-size:.66rem; color:var(--muted); margin-top:8px; }

/* ─── クイックおみくじ（入力画面） ─────────────── */
.qo-divider {
  border:none; border-top:1px solid rgba(201,169,110,.18);
  margin:0 0 18px;
}
.quick-omikuji-wrap {
  padding:18px 16px 14px;
  text-align:center;
}
.quick-omikuji-title {
  font-family:var(--display); color:var(--gold);
  font-size:.82rem; letter-spacing:.22em; margin-bottom:3px;
}
.quick-omikuji-sub {
  font-size:.7rem; color:var(--muted); margin-bottom:14px;
}
.btn-quick-omikuji {
  padding:11px 28px; border-radius:99px; font-size:.85rem;
  background:linear-gradient(135deg,rgba(201,169,110,.18),rgba(255,215,0,.1));
  border:1px solid rgba(201,169,110,.45); color:var(--gold);
  cursor:pointer; letter-spacing:.12em; transition:all .25s;
}
.btn-quick-omikuji:hover {
  background:linear-gradient(135deg,rgba(201,169,110,.3),rgba(255,215,0,.18));
  box-shadow:0 0 18px rgba(201,169,110,.28);
}
.quick-omikuji-shake { text-align:center; padding:16px 0; }
.qo-stick { font-size:2.6rem; display:inline-block; }
.quick-omikuji-result {
  padding:14px 16px; text-align:center;
  background:linear-gradient(135deg,rgba(201,169,110,.08),rgba(123,47,255,.06));
  border:1px solid rgba(201,169,110,.3); border-radius:14px;
  margin:4px 0 6px;
}
.qo-result--new { animation:fadeInUp .5s ease; }
.qo-level {
  font-family:var(--display); font-size:2rem; font-weight:700;
  margin-bottom:8px; text-shadow:0 0 12px currentColor;
}
.qo-msg {
  font-size:.78rem; color:var(--text); line-height:1.7;
  margin-bottom:10px;
}
.qo-lucky-row {
  display:flex; justify-content:center; gap:16px;
  font-size:.74rem; color:var(--muted);
}
.qo-lucky-row strong { color:var(--gold); }
.qo-already {
  font-size:.64rem; color:var(--muted); margin-top:8px;
}

/* ─── ホロスコープ ───────────────────────────────── */
.horoscope-card {}
.horoscope-layout { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.horoscope-svg-wrap { flex-shrink:0; }
.horoscope-info { flex:1; min-width:140px; display:flex; flex-direction:column; gap:10px; }
.horoscope-info-item { padding:10px 12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:10px; }
.horo-label { font-size:.66rem; color:var(--muted); margin-bottom:2px; }
.horo-val { font-size:.88rem; color:var(--gold); font-weight:600; }
.horo-sub { font-size:.68rem; color:var(--muted); }

/* ─── 印刷・PDF出力用スタイル ──────────────────── */
@media print {
  /* 背景・装飾を消す */
  #starfield, .aurora-bg, .constellation-svg, .saturn-svg,
  .tab-nav, .result-actions, .extra-pages-nav, footer { display:none !important; }

  body, .page { background:#fff !important; color:#111 !important; }

  .card {
    background:#fff !important;
    border:1px solid #ddd !important;
    box-shadow:none !important;
    break-inside:avoid;
    margin-bottom:16px;
  }

  /* 入力フォームは非表示 */
  #input-section { display:none !important; }

  /* 結果セクションは強制表示 */
  #result-section { display:block !important; }

  /* 非アクティブなタブも全部印刷 */
  .tab-panel { display:block !important; }

  /* 読みやすいフォントサイズ */
  .reading-body { font-size:10pt; line-height:1.8; color:#111 !important; }
  h1, h4, .sec-title { color:#111 !important; }

  /* リング・グラフは簡易表示 */
  canvas { display:none !important; }
  svg.constellation-svg, svg.saturn-svg { display:none !important; }

  /* プレミアムバッジ色をシンプルに */
  .premium-badge, .premium-badge-sm {
    background:none !important;
    border:1px solid #aaa !important;
    color:#333 !important;
    box-shadow:none !important;
  }

  /* 鑑定書ヘッダーを印刷時表示 */
  .print-only-header { display:block !important; text-align:center; margin-bottom:10mm; }
  .print-title-main { font-size:22pt; font-family:'Noto Serif JP',serif; letter-spacing:.4em; color:#222; margin:0 0 4pt; }
  .print-title-sub  { font-size:9pt; letter-spacing:.2em; color:#666; margin:0 0 6pt; }
  .print-separator  { border-top:1.5px double #888; margin:6pt 0; }
  .print-meta       { font-size:8.5pt; color:#555; margin:4pt 0; }

  /* 鑑定印を印刷でも表示 */
  .kanteizumi-stamp { display:block !important; position:static !important; opacity:.6 !important; animation:none !important; width:70pt; height:70pt; margin:0 0 8pt auto; }

  /* 守護ポップアップ・儀式オーバーレイは非表示 */
  #guardian-vision, #ritual-overlay { display:none !important; }

  @page { margin:15mm 12mm; }
}


/* ══════════════════════════════════════
   ① 儀式演出オーバーレイ
══════════════════════════════════════ */
#ritual-overlay {
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(ellipse at center, rgba(15,8,35,.97) 0%, rgba(3,1,10,.99) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
}
#ritual-overlay.active  { opacity:1; pointer-events:all; }
#ritual-overlay.fade-out { opacity:0; }
body.ritual-lock{ overflow:hidden; }

.ritual-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(201,169,110,.5);
  animation:ritualExpand 2s ease-out forwards;
}
.ritual-ring-1 { width:100px; height:100px; animation-delay:0s; }
.ritual-ring-2 { width:220px; height:220px; animation-delay:.25s; }
.ritual-ring-3 { width:360px; height:360px; animation-delay:.5s; }
@keyframes ritualExpand {
  from { transform:scale(.05); opacity:0; }
  40%  { opacity:.8; }
  to   { transform:scale(1); opacity:.25; }
}
.ritual-symbol {
  font-size:4.5rem; color:var(--gold); z-index:1; margin-bottom:1.5rem;
  animation:ritualPulse 1.6s ease-in-out infinite;
  text-shadow:0 0 30px rgba(201,169,110,.7);
}
@keyframes ritualPulse {
  0%,100% { transform:scale(1);   text-shadow:0 0 20px rgba(201,169,110,.5); }
  50%     { transform:scale(1.12); text-shadow:0 0 50px rgba(201,169,110,1);  }
}
.ritual-text {
  font-family:'Noto Serif JP',serif; color:var(--gold);
  font-size:1.05rem; letter-spacing:.22em; z-index:1;
  animation:ritualFadeUp 1.8s ease-out both;
}
.ritual-subtext {
  color:rgba(201,169,110,.55); font-size:.78rem; letter-spacing:.14em;
  margin-top:.6rem; z-index:1;
  animation:ritualFadeUp 1.8s ease-out .35s both;
}
@keyframes ritualFadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* 儀式内スピナー＋循環メッセージ（結果到着まで表示） */
.ritual-loader {
  margin-top: 2.2rem;
  display: flex; flex-direction: column; align-items: center;
  z-index: 1;
  opacity: 0;
  transition: opacity .5s ease;
}
.ritual-loader.is-visible { opacity: 1; }
.ritual-loader-spinner {
  width: 42px; height: 42px;
  border: 2px solid rgba(201,169,110,.18);
  border-top-color: rgba(232,213,163,.9);
  border-radius: 50%;
  animation: spin 1.1s linear infinite;
  margin-bottom: 14px;
  box-shadow: 0 0 18px rgba(201,169,110,.25);
}
.ritual-loader-msg {
  color: rgba(232,213,163,.82);
  font-family: 'Noto Serif JP', serif;
  font-size: .82rem;
  letter-spacing: .14em;
  text-align: center;
  max-width: 22em;
  line-height: 1.6;
  animation: ritualMsgPulse 2.4s ease-in-out infinite;
}
@keyframes ritualMsgPulse {
  0%,100% { opacity: .72; }
  50%     { opacity: 1; }
}
@media (max-width:540px){
  .ritual-loader { margin-top: 1.8rem; }
  .ritual-loader-spinner { width: 36px; height: 36px; }
  .ritual-loader-msg { font-size: .74rem; padding: 0 20px; }
}


/* ══════════════════════════════════════
   ③ 鑑定印スタンプ
══════════════════════════════════════ */
.site-header { position:relative; }
.kanteizumi-stamp {
  position:absolute; top:8px; right:-4px;
  width:82px; height:82px;
  opacity:0; pointer-events:none;
  animation:stampIn .7s cubic-bezier(.175,.885,.32,1.275) 1.4s forwards;
}
@keyframes stampIn {
  from { opacity:0; transform:scale(2.2) rotate(-20deg); }
  to   { opacity:.82; transform:scale(1) rotate(-10deg); }
}


/* ══════════════════════════════════════
   ⑥ 今日の一言カード
══════════════════════════════════════ */
.today-word-card {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(201,169,110,.09), rgba(123,47,255,.07));
  border:1px solid rgba(201,169,110,.32); border-radius:16px;
  padding:20px 22px; margin-bottom:18px; text-align:center;
}
.today-word-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(201,169,110,.1) 0%, transparent 65%);
  pointer-events:none;
}
.today-word-icon { font-size:2rem; margin-bottom:6px; }
.today-word-from {
  font-size:.7rem; color:var(--gold); letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:10px;
}
.today-word-text {
  font-family:'Noto Serif JP',serif; font-style:italic;
  font-size:.9rem; color:var(--text); line-height:1.95;
}


/* ══════════════════════════════════════
   ⑤ 鑑定文フェードイン
══════════════════════════════════════ */
.reading-body p {
  opacity:0; transform:translateY(10px);
  transition:opacity .55s ease, transform .55s ease;
}
.reading-body p.para-visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════
   ⑤-2 鑑定文 Hero/Wisdom/Closing レイアウト
   → css/components_pr.css に切り出し済み（案A: Raycast × Apple）
   このブロックでは個別のpremium拡張のみ定義
══════════════════════════════════════ */

/* ---- 鑑定文中のフォーカス占術ワードを強調 ---- */
.focus-word{
  position:relative;
  display:inline-block;
  padding:1px 4px;
  margin:0 1px;
  color:#fff6de;
  font-weight:600;
  background:linear-gradient(180deg, rgba(201,169,110,0) 65%, rgba(233,30,140,.35) 65%, rgba(155,89,182,.35) 100%);
  border-radius:3px;
  text-shadow:0 0 10px rgba(255,215,140,.65);
  transition:background .3s ease;
}
.focus-word::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(201,169,110,.95), rgba(233,30,140,.9), rgba(91,192,222,.9));
  box-shadow:0 0 6px rgba(201,169,110,.6);
}
.focus-word:hover{
  background:linear-gradient(180deg, rgba(201,169,110,0) 55%, rgba(233,30,140,.5) 55%, rgba(155,89,182,.5) 100%);
}

/* ══════════════════════════════════════
   ⑤-3 結果画面上部：注目中の占術バー
══════════════════════════════════════ */
.focus-highlight-bar{
  display:none;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
  margin:12px 0 14px;
  padding:10px 16px;
  border-radius:14px;
  background:linear-gradient(100deg, rgba(155,89,182,.14) 0%, rgba(91,192,222,.1) 50%, rgba(233,30,140,.12) 100%);
  border:1px solid rgba(201,169,110,.4);
  box-shadow:0 6px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  animation:fhb-glow 4s ease-in-out infinite;
}
.focus-highlight-bar.is-active{ display:flex; }
@keyframes fhb-glow{
  0%,100% { box-shadow:0 6px 18px rgba(0,0,0,.3), 0 0 0 rgba(201,169,110,.15), inset 0 1px 0 rgba(255,255,255,.05); }
  50%     { box-shadow:0 6px 22px rgba(0,0,0,.35), 0 0 16px rgba(201,169,110,.3),  inset 0 1px 0 rgba(255,255,255,.07); }
}
.fhb-leadword{
  font-size:.72rem;
  letter-spacing:.28em;
  color:var(--gold);
  text-shadow:0 0 10px rgba(201,169,110,.5);
  white-space:nowrap;
}
.fhb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.fhb-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px 5px 10px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(201,169,110,.2), rgba(155,89,182,.2));
  border:1px solid rgba(201,169,110,.5);
  font-size:.78rem;
  color:#f5ecd7;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.fhb-icon{ font-size:.95rem; filter:drop-shadow(0 0 4px rgba(201,169,110,.5)); }
@media (max-width:520px){
  .focus-highlight-bar{ padding:8px 12px; gap:6px 10px; }
  .fhb-leadword{ letter-spacing:.2em; font-size:.65rem; }
  .fhb-chip{ font-size:.72rem; padding:4px 10px; }
}


/* ══════════════════════════════════════
   ⑧ 守護存在ビジョン（通知ポップアップ）
══════════════════════════════════════ */
#guardian-vision {
  position:fixed; z-index:9500;
  /* PC: 右下通知 */
  bottom:24px; right:24px;
  width:320px;
  background:linear-gradient(145deg, rgba(18,6,48,.96) 0%, rgba(10,3,30,.98) 100%);
  border:1px solid rgba(var(--gv-glow-rgb, 201,169,110),.35);
  border-radius:20px;
  box-shadow:
    0 8px 40px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 50px rgba(var(--gv-glow-rgb, 120,50,255),.18);
  backdrop-filter:blur(20px);
  overflow:hidden;
  cursor:default;
  animation:gvSlideInRight .5s cubic-bezier(.22,1,.36,1) forwards;
}
#guardian-vision[hidden] { display:none !important; }
#guardian-vision.gv-dismissing {
  animation:gvSlideOutRight .45s cubic-bezier(.55,0,1,.45) forwards;
}

@keyframes gvSlideInRight {
  from { opacity:0; transform:translateX(100px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes gvSlideOutRight {
  to   { opacity:0; transform:translateX(120px); }
}

/* スマホ: ボトムシート */
@media (max-width:640px) {
  #guardian-vision {
    bottom:0; right:0; left:0;
    width:100%; border-radius:22px 22px 0 0;
    border-bottom:none;
    animation:gvSlideUp .45s cubic-bezier(.22,1,.36,1) forwards;
  }
  #guardian-vision.gv-dismissing {
    animation:gvSlideDown .4s cubic-bezier(.55,0,1,.45) forwards;
  }
}
@keyframes gvSlideUp {
  from { transform:translateY(100%); opacity:.6; }
  to   { transform:translateY(0);    opacity:1; }
}
@keyframes gvSlideDown {
  to   { transform:translateY(110%); opacity:0; }
}

/* スワイプハンドル（スマホ用） */
.gv-swipe-handle {
  display:none;
  width:40px; height:4px;
  background:rgba(255,255,255,.18);
  border-radius:2px;
  margin:10px auto 0;
}
@media (max-width:640px) {
  .gv-swipe-handle { display:block; }
}

/* 内部レイアウト */
.gv-inner {
  padding:18px 22px 20px;
  position:relative;
}

.gv-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.gv-label {
  font-size:.6rem; color:var(--gold);
  letter-spacing:.2em;
}
.gv-close {
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.35); font-size:.85rem;
  padding:2px 4px; line-height:1;
  transition:color .2s;
}
.gv-close:hover { color:rgba(255,255,255,.7); }

.gv-visual {
  font-size:3.4rem; display:block; text-align:center;
  margin:0 auto 10px;
  filter:drop-shadow(0 0 16px rgba(var(--gv-glow-rgb, 201,169,110),.9))
         drop-shadow(0 0 40px rgba(var(--gv-glow-rgb, 120,50,255),.5));
  animation:gvFloat 4s ease-in-out infinite;
}
@keyframes gvFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%     { transform:translateY(-8px) scale(1.06); }
}

.gv-name {
  font-family:'Noto Serif JP',serif;
  color:var(--gold); font-size:.85rem;
  letter-spacing:.12em; text-align:center;
  margin-bottom:10px;
}
.gv-msg {
  font-family:'Noto Serif JP',serif;
  color:rgba(215,205,255,.88);
  font-size:.8rem; line-height:1.9;
  text-align:center; margin:0 0 14px;
}
.gv-hint {
  font-size:.58rem; color:rgba(201,169,110,.3);
  letter-spacing:.18em; text-align:center;
}

/* 背景パーティクル（カード内装飾） */
.gv-inner::before {
  content:'';
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 15%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 75%, rgba(201,169,110,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 65%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 85%, rgba(180,140,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,.35) 0%, transparent 100%);
  animation:gvTwinkle 3s ease-in-out infinite alternate;
}
@keyframes gvTwinkle {
  from { opacity:.5; }
  to   { opacity:1; }
}


/* ══════════════════════════════════════
   入力タブ切り替え
══════════════════════════════════════ */
.input-tab-nav {
  display: flex;
  border-bottom: 1px solid rgba(201, 169, 110, 0.2);
  margin-bottom: 20px;
}
.input-tab-btn {
  flex: 1;
  padding: 12px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: .82rem;
  letter-spacing: .1em;
  cursor: pointer;
  transition: all .25s;
  margin-bottom: -1px;
}
.input-tab-btn:hover { color: var(--gold); }
.input-tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.input-panel[hidden] { display: none; }

/* ══════════════════════════════════════
   相性診断インラインフォーム
══════════════════════════════════════ */
.compat-inline-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 20px;
}
@media (max-width: 560px) {
  .compat-inline-grid {
    grid-template-columns: 1fr;
  }
  .compat-heart { text-align: center; }
}

.compat-person-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
}
.compat-person-label {
  font-size: .78rem;
  color: var(--gold);
  letter-spacing: .1em;
  margin: 0 0 12px;
  text-align: center;
}
.compat-heart {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #e91e8c;
  opacity: .7;
  padding-top: 48px;
}

/* 方法セレクター */
.compat-method-wrap { margin-bottom: 16px; }
.compat-method-label {
  font-size: .72rem;
  color: var(--gold);
  letter-spacing: .08em;
  margin: 0 0 10px;
  opacity: .85;
}
.compat-method-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}
.compat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 13px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: .76rem;
  cursor: pointer;
  transition: all .2s;
}
.compat-chip:hover { border-color: rgba(233, 30, 140, .4); color: var(--text); }
.compat-chip--on {
  background: linear-gradient(135deg, rgba(233, 30, 140, .15), rgba(201, 169, 110, .1));
  border-color: rgba(233, 30, 140, .5);
  color: #e91e8c;
}
.compat-method-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.compat-method-action-btn {
  padding: 5px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--muted);
  font-size: .72rem;
  cursor: pointer;
  transition: all .2s;
}
.compat-method-action-btn:hover { border-color: rgba(201, 169, 110, .4); color: var(--gold); }

/* 診断するボタン */
.btn-compat-submit {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(233, 30, 140, .22), rgba(123, 47, 255, .18));
  border: 1px solid rgba(233, 30, 140, .5);
  border-radius: 99px;
  color: #e91e8c;
  font-size: .88rem;
  letter-spacing: .12em;
  cursor: pointer;
  transition: all .25s;
}
.btn-compat-submit:hover {
  background: linear-gradient(135deg, rgba(233, 30, 140, .35), rgba(123, 47, 255, .28));
  box-shadow: 0 0 22px rgba(233, 30, 140, .22);
}
.btn-compat-submit:disabled { opacity: .5; cursor: not-allowed; }

/* 相性インライン結果 */
.compat-inline-result-wrap {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(201, 169, 110, 0.2);
}
.compat-result-names {
  text-align: center;
  font-size: .9rem;
  color: var(--gold);
  letter-spacing: .1em;
  margin-bottom: 16px;
}
.compat-total-score {
  text-align: center;
  margin-bottom: 20px;
}
.compat-total-num {
  font-size: 3.2rem;
  font-family: var(--display);
  color: #e91e8c;
  line-height: 1;
}
.compat-total-label {
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .1em;
  margin-top: 4px;
}
.compat-score-bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.compat-score-row { display: flex; align-items: center; gap: 10px; }
.compat-score-name { font-size: .72rem; color: var(--muted); width: 80px; flex-shrink: 0; }
.compat-score-bar-wrap {
  flex: 1; height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 99px; overflow: hidden;
}
.compat-score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #e91e8c, #9b59b6);
  border-radius: 99px;
  transition: width .8s ease;
}
.compat-score-val { font-size: .72rem; color: var(--gold); width: 34px; text-align: right; }
.compat-comment {
  background: rgba(233, 30, 140, .06);
  border: 1px solid rgba(233, 30, 140, .2);
  border-radius: 10px;
  padding: 14px;
  font-size: .8rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 14px;
}
.compat-lucky-items {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px;
}
.compat-lucky-item {
  padding: 5px 14px;
  border-radius: 99px;
  background: rgba(201, 169, 110, .08);
  border: 1px solid rgba(201, 169, 110, .25);
  font-size: .72rem;
  color: var(--gold);
}
.compat-detail-link {
  display: block; text-align: center;
  font-size: .75rem; color: var(--muted);
  text-decoration: none;
  padding: 8px;
  transition: color .2s;
}
.compat-detail-link:hover { color: var(--gold); }


/* ══════════════════════════════════════
   ★ デモプレビューセクション
   （公開前に削除予定）
══════════════════════════════════════ */
#demo-section {
  position:relative; z-index:10;
  padding:10px 0 30px;
}
.demo-banner {
  max-width:560px; margin:0 auto; padding:0 16px;
}
.demo-banner-inner {
  text-align:center;
  padding:24px 20px;
  background:rgba(201,169,110,.06);
  border:1px dashed rgba(201,169,110,.35);
  border-radius:14px;
}
.demo-banner-label {
  font-size:.72rem; letter-spacing:.2em; color:var(--gold);
  margin:0 0 8px; opacity:.8;
}
.demo-banner-desc {
  font-size:.8rem; color:var(--muted); line-height:1.7;
  margin:0 0 16px;
}
.btn-demo-preview {
  display:inline-block;
  padding:12px 32px;
  background:linear-gradient(135deg, rgba(201,169,110,.2), rgba(123,47,255,.15));
  border:1px solid rgba(201,169,110,.5);
  border-radius:99px;
  color:var(--gold); font-size:.85rem; letter-spacing:.12em;
  cursor:pointer; transition:all .25s;
}
.btn-demo-preview:hover {
  background:linear-gradient(135deg, rgba(201,169,110,.35), rgba(123,47,255,.28));
  box-shadow:0 0 20px rgba(201,169,110,.25);
}
.demo-banner-note {
  font-size:.65rem; color:var(--muted); opacity:.5;
  margin:12px 0 0;
}

/* ═══════════════════════════════
   天命タブ ビジュアルコンポーネント
═══════════════════════════════ */

/* レーダーチャート */
.tenme-radar-wrap {
  margin: 20px 0 8px;
  padding: 16px 0 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* 職業タグ */
.tenme-career-wrap {
  margin: 12px 0 20px;
}
.career-tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 4px 8px;
}
.career-tag {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: #e0d8f0;
  letter-spacing: .03em;
}
.career-tag[data-theme="souzou"] { border-color: rgba(233,30,140,.4); color: #f48fb1; }
.career-tag[data-theme="kodo"]   { border-color: rgba(230,126,34,.4);  color: #ffb74d; }
.career-tag[data-theme="taijin"] { border-color: rgba(91,192,222,.4);  color: #80deea; }
.career-tag[data-theme="naishi"] { border-color: rgba(155,89,182,.4);  color: #ce93d8; }
.career-tag[data-theme="kinun"]  { border-color: rgba(39,174,96,.4);   color: #a5d6a7; }
.career-tag[data-theme="aijo"]   { border-color: rgba(231,76,60,.4);   color: #ef9a9a; }

/* 強み/弱み */
.tenme-sw-wrap {
  margin: 20px 0;
  padding: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}
.sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.sw-col {
  padding: 10px 12px;
  border-radius: 10px;
}
.sw-strengths  { background: rgba(39,174,96,.08);  border: 1px solid rgba(39,174,96,.2); }
.sw-weaknesses { background: rgba(155,89,182,.08); border: 1px solid rgba(155,89,182,.2); }
.sw-header {
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: .04em;
}
.sw-strengths  .sw-header { color: #a5d6a7; }
.sw-weaknesses .sw-header { color: #ce93d8; }
.sw-item {
  font-size: .73rem;
  line-height: 1.7;
  padding: 2px 0;
}
.sw-item-pos { color: #c8e6c9; }
.sw-item-neg { color: #e1bee7; }

/* 個人年タイムライン */
.tenme-timeline-wrap {
  margin: 20px 0;
  padding: 16px 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.py-timeline {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 8px 4px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.py-node {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  min-width: 60px;
  text-align: center;
  position: relative;
  transition: all .2s;
}
.py-node.py-current {
  background: rgba(233,30,140,.15);
  border-color: rgba(233,30,140,.5);
  box-shadow: 0 0 14px rgba(233,30,140,.2);
}
.py-icon  { font-size: 1.2rem; line-height: 1; }
.py-num   { font-size: .65rem; color: var(--muted); }
.py-label { font-size: .7rem;  font-weight: 600; color: #e0d8f0; }
.py-active-badge {
  font-size: .6rem;
  color: #f48fb1;
  font-weight: 700;
  white-space: nowrap;
  margin-top: 2px;
}

/* ══════════════════════════════════════
   天命スクリーン
══════════════════════════════════════ */
.tenme-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: linear-gradient(160deg, #07001a 0%, #0d0028 40%, #010010 100%);
  overflow-y: auto;
  animation: tenmeScreenIn .5s cubic-bezier(.22,1,.36,1);
}
@keyframes tenmeScreenIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tenme-screen[hidden] { display: none !important; }

/* ══════════════════════════════════════
   共通トップバー（.app-topbar）
   ─ 個別鑑定 / 相性診断 / 天命 で共用
══════════════════════════════════════ */
.app-topbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid rgba(201,169,110,.2);
  position:sticky;
  top:0;
  background:rgba(7,0,26,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:200;
  gap:10px;
}
.app-topbar-left{ justify-self:start; }
.app-topbar-center{
  justify-self:center;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.1;
}
.app-topbar-right{ justify-self:end; }
.app-topbar-logo{
  font-family: var(--display, 'Cinzel', serif);
  font-size:.92rem;
  letter-spacing:.18em;
  color: rgba(232,213,163,.92);
  font-weight:600;
}
.app-topbar-badge{
  font-size:.6rem;
  letter-spacing:.12em;
  color: rgba(201,169,110,.7);
  margin-top:2px;
}
.app-topbar-btn{
  background:transparent;
  border:1px solid rgba(201,169,110,.4);
  border-radius:99px;
  color: var(--gold);
  font-family: var(--serif, 'Noto Serif JP', serif);
  font-size:.76rem;
  font-weight:500;
  padding:6px 14px;
  cursor:pointer;
  white-space:nowrap;
  transition: all .2s ease;
  line-height:1;
}
.app-topbar-btn:hover{
  background:rgba(201,169,110,.12);
  border-color:rgba(201,169,110,.7);
}
.app-topbar-btn:active{ transform:scale(.97); }
.app-topbar-btn--primary{
  background: linear-gradient(135deg, rgba(201,169,110,.25), rgba(155,89,182,.2));
  border-color: rgba(232,213,163,.55);
  color:#fff;
}
.app-topbar-btn--primary:hover{
  background: linear-gradient(135deg, rgba(201,169,110,.4), rgba(155,89,182,.3));
}

@media (max-width:540px){
  .app-topbar{ padding:10px 12px; gap:6px; }
  .app-topbar-logo{ font-size:.82rem; letter-spacing:.14em; }
  .app-topbar-badge{ font-size:.56rem; }
  .app-topbar-btn{
    font-size:.7rem;
    padding:6px 11px;
    max-width:110px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
@media (max-width:380px){
  .app-topbar-btn{ font-size:.66rem; padding:5px 9px; }
  .app-topbar-logo{ font-size:.76rem; letter-spacing:.1em; }
}

/* トップへ戻るFAB（天命スクリーン専用） */
.tenme-scroll-top{
  position: fixed;
  right: 18px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(201,169,110,.45);
  background: radial-gradient(circle at 30% 25%, rgba(212,168,83,.35) 0%, rgba(30,15,60,.92) 65%, rgba(15,8,35,.96) 100%);
  color: #ffe7b3;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(255,231,179,.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tenme-scroll-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tenme-scroll-top:hover{
  box-shadow: 0 6px 24px rgba(212,168,83,.35), 0 0 0 1px rgba(255,231,179,.25);
}
.tenme-scroll-top:active{ transform: translateY(1px); }
@media (max-width:640px){
  .tenme-scroll-top{
    right: 14px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

.tenme-screen-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 0 80px;
}

/* トップバー */
/* .tenme-screen-topbar は .app-topbar を併用するため、
   追加の上書きスタイルは不要（旧定義は .app-topbar に移行済み） */

/* ヒーロー */
.tenme-screen-hero {
  text-align: center;
  padding: 40px 20px 24px;
}
.tenme-screen-symbol {
  font-size: 2.8rem;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(201,169,110,.6);
  animation: tenmeGlow 3s ease-in-out infinite;
}
@keyframes tenmeGlow {
  0%,100% { text-shadow: 0 0 20px rgba(201,169,110,.4); }
  50%      { text-shadow: 0 0 50px rgba(201,169,110,.9); }
}
.tenme-screen-title {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: .15em;
  color: #fff;
  margin: 8px 0 6px;
  text-shadow: 0 0 24px rgba(201,169,110,.4);
}
.tenme-screen-subtitle {
  font-size: .82rem;
  color: var(--muted);
  letter-spacing: .08em;
}

/* 履歴バナー（前回生成日 + 再生成ボタン）*/
.tenme-history-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 16px 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
}
.tenme-history-bar-date {
  letter-spacing: 0.04em;
}
.tenme-history-bar-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.tenme-history-bar-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
}
@media (max-width: 540px) {
  .tenme-history-bar {
    margin: 0 10px 10px;
    padding: 8px 12px;
    font-size: 0.78rem;
  }
}

/* サブナビ */
.tenme-sub-nav {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 16px 16px;
}
/* スマホ：.app-topbar（約46px）の直下に追従 */
@media (max-width:540px){
  .tenme-sub-nav{
    position: sticky;
    top: 46px;
    z-index: 150;
    background: linear-gradient(180deg, rgba(7,0,26,.94) 0%, rgba(7,0,26,.82) 85%, rgba(7,0,26,0) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-top: 12px;
    padding-bottom: 14px;
    margin: 0 -16px 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .tenme-sub-nav::-webkit-scrollbar{ display:none; }
  .tenme-sub-btn{ flex-shrink: 0; }
}
.tenme-sub-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  color: var(--muted);
  font-size: .8rem;
  padding: 7px 18px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.tenme-sub-btn:hover {
  border-color: rgba(201,169,110,.4);
  color: var(--gold);
}
.tenme-sub-btn.active {
  background: linear-gradient(135deg, rgba(201,169,110,.2), rgba(255,215,0,.1));
  border-color: rgba(201,169,110,.6);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(201,169,110,.2);
}

/* コンテンツ */
.tenme-sub-content {
  padding: 0 20px;
  animation: tenmeSubIn .35s ease;
}
@keyframes tenmeSubIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tenme-section-block {
  padding-top: 8px;
}

/* ══════════════════════════════════════
   天命サブタブ フッター（前/次 + 5タブパレット）
   ══════════════════════════════════════ */
.tenme-sub-footer {
  margin: 40px 0 24px;
  padding: 28px 20px 24px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(201,169,110,.1) 0%, transparent 60%),
    linear-gradient(180deg, rgba(20,10,40,.55), rgba(10,6,28,.35));
  border: 1px solid rgba(201,169,110,.22);
  box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.tenme-sub-divider {
  text-align: center;
  color: rgba(201,169,110,.55);
  font-size: 1.1rem;
  letter-spacing: .4em;
  margin-bottom: 20px;
  position: relative;
}
.tenme-sub-divider::before,
.tenme-sub-divider::after {
  content: '';
  display: inline-block;
  width: 80px;
  height: 1px;
  vertical-align: middle;
  margin: 0 14px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.45), transparent);
}

/* 前/次 ペイジャー */
.tenme-sub-pager {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 24px;
}
.tenme-pager-spacer { flex: 1; }
.tenme-pager-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(201,169,110,.12), rgba(155,89,182,.12));
  border: 1px solid rgba(201,169,110,.38);
  border-radius: 14px;
  color: var(--gold);
  font-family: var(--serif);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
}
.tenme-pager-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(232,213,163,.8);
  background: linear-gradient(135deg, rgba(201,169,110,.22), rgba(155,89,182,.2));
  box-shadow: 0 8px 22px rgba(201,169,110,.28), 0 2px 6px rgba(0,0,0,.4);
}
.tenme-pager-btn:active { transform: translateY(0); }
.tenme-pager-next { justify-content: flex-end; text-align: right; }
.tenme-pager-arrow {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
}
.tenme-pager-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tenme-pager-col--right { align-items: flex-end; }
.tenme-pager-hint {
  font-size: .68rem;
  letter-spacing: .15em;
  color: rgba(201,169,110,.7);
  text-transform: uppercase;
}
.tenme-pager-target {
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tenme-pager-end {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px dashed rgba(201,169,110,.4);
  border-radius: 14px;
  color: rgba(201,169,110,.85);
  font-family: var(--serif);
  font-size: .85rem;
  letter-spacing: .1em;
  background: rgba(201,169,110,.04);
}
.tenme-pager-end-mark {
  color: rgba(201,169,110,.7);
  font-size: 1rem;
}

/* 5タブ選択パレット */
.tenme-sub-palette {
  padding-top: 18px;
  border-top: 1px solid rgba(201,169,110,.18);
}
.tenme-sub-palette-title {
  text-align: center;
  font-family: var(--serif);
  font-size: .72rem;
  letter-spacing: .3em;
  color: rgba(201,169,110,.65);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.tenme-sub-palette-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.tenme-palette-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: var(--muted);
  font-family: var(--serif);
  cursor: pointer;
  transition: all .2s ease;
  min-height: 62px;
}
.tenme-palette-btn:hover {
  border-color: rgba(201,169,110,.5);
  color: var(--gold);
  background: rgba(201,169,110,.08);
  transform: translateY(-2px);
}
.tenme-palette-btn.active {
  background: linear-gradient(135deg, rgba(201,169,110,.28), rgba(155,89,182,.2));
  border-color: rgba(232,213,163,.7);
  color: #fff;
  box-shadow: 0 0 16px rgba(201,169,110,.3), inset 0 1px 0 rgba(255,255,255,.1);
  cursor: default;
}
.tenme-palette-btn.active:hover { transform: none; }
.tenme-palette-icon {
  font-size: 1.15rem;
  line-height: 1;
}
.tenme-palette-label {
  font-size: .7rem;
  letter-spacing: .08em;
}

/* モバイル対応 */
@media (max-width: 540px) {
  .tenme-sub-footer {
    margin: 32px 0 20px;
    padding: 22px 14px 20px;
  }
  .tenme-sub-divider::before,
  .tenme-sub-divider::after { width: 40px; margin: 0 8px; }
  .tenme-sub-pager {
    flex-direction: column;
    gap: 10px;
  }
  .tenme-pager-btn { padding: 12px 14px; }
  .tenme-pager-target { font-size: .88rem; }
  .tenme-sub-palette-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
  }
  .tenme-palette-btn {
    min-height: 56px;
    padding: 8px 2px;
  }
  .tenme-palette-icon { font-size: 1rem; }
  .tenme-palette-label {
    font-size: .62rem;
    letter-spacing: .02em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tenme-pager-btn, .tenme-palette-btn { transition: none; }
  .tenme-pager-btn:hover, .tenme-palette-btn:hover { transform: none; }
}

/* ══════════════════════════════════════
   天命サブタブ 共通コンポーネント
══════════════════════════════════════ */

/* 鑑定テキストカード */
.ts-reading-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,169,110,.15);
  border-left: 3px solid rgba(201,169,110,.5);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.ts-reading-label {
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: 10px;
}
.ts-reading-text {
  font-size: .88rem;
  line-height: 1.95;
  color: #e0d8f0;
  white-space: pre-line;
}

/* セクションブロック余白 */
.ts-block {
  margin-bottom: 24px;
}

/* スキルバー */
.ts-skill-bars { display: flex; flex-direction: column; gap: 10px; }
.tsb-row {
  display: grid;
  grid-template-columns: 24px 52px 1fr 38px;
  align-items: center;
  gap: 8px;
}
.tsb-icon  { font-size: 1rem; text-align: center; }
.tsb-label { font-size: .75rem; color: #c8c0d8; white-space: nowrap; }
.tsb-track {
  height: 8px;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  overflow: hidden;
}
.tsb-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 1.1s cubic-bezier(.22,1,.36,1);
}
.tsb-pct  { font-size: .72rem; font-weight: 700; text-align: right; }

/* 輝ける環境カード */
.ts-env-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ts-env-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
  transition: border-color .2s;
}
.ts-env-card:hover { border-color: rgba(201,169,110,.35); }
.ts-env-icon  { font-size: 1.6rem; margin-bottom: 6px; }
.ts-env-label { font-size: .8rem; font-weight: 700; color: #e0d8f0; margin-bottom: 4px; }
.ts-env-desc  { font-size: .72rem; color: var(--muted); line-height: 1.5; }

/* 元素アーキタイプカード */
.ts-archetype-card {
  background: rgba(255,255,255,.04);
  border: 1px solid #e67e22; /* JS inline style で上書き */
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 24px rgba(230,126,34,.2); /* JS inline style で上書き */
}
.ts-arch-symbol {
  font-size: 2.4rem;
  margin-bottom: 6px;
  animation: tenmeGlow 3s ease-in-out infinite;
}
.ts-arch-el    { font-size: .72rem; color: var(--muted); letter-spacing: .1em; }
.ts-arch-title {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin: 6px 0 12px;
}
.ts-arch-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.ts-trait-tag {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 99px;
  font-size: .72rem;
  padding: 3px 10px;
  color: #c8c0d8;
}

/* 相性スタイルカード */
.ts-style-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,169,110,.2);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}
.ts-style-icon  { font-size: 2.2rem; margin-bottom: 8px; }
.ts-style-label {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 8px;
}
.ts-style-desc { font-size: .84rem; color: #e0d8f0; line-height: 1.7; margin-bottom: 8px; }
.ts-style-meta { font-size: .7rem; color: var(--muted); }

/* チームロールカード */
.ts-role-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 16px 18px;
}
.ts-role-star {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.ts-role-desc { font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.ts-role-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* 使命宣言カード */
.ts-mission-card {
  background: linear-gradient(135deg, rgba(233,30,140,.1), rgba(201,169,110,.06));
  border: 1px solid rgba(233,30,140,.3);
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ts-mission-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(233,30,140,.15), transparent 60%);
  pointer-events: none;
}
.ts-mission-lp {
  font-size: .72rem;
  letter-spacing: .15em;
  color: var(--muted);
  margin-bottom: 4px;
}
.ts-mission-title {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 14px;
}
.ts-mission-decl {
  font-size: .88rem;
  line-height: 1.85;
  color: #e0d8f0;
  margin-bottom: 16px;
  font-style: italic;
}
.ts-mission-signs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.ts-mission-sign {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  font-size: .75rem;
  padding: 4px 12px;
  color: #c8c0d8;
}

/* 総合天命テキストカード */
.ts-sougou-card {
  background: linear-gradient(160deg,
    rgba(201,169,110,.1) 0%,
    rgba(155,89,182,.06) 50%,
    rgba(233,30,140,.06) 100%);
  border: 1px solid rgba(201,169,110,.3);
  border-radius: 16px;
  padding: 22px 20px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.ts-sougou-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,110,.12) 0%, transparent 70%);
  pointer-events: none;
}
.ts-sougou-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ts-sougou-star {
  color: var(--gold);
  font-size: 1rem;
  text-shadow: 0 0 10px rgba(201,169,110,.6);
}
.ts-sougou-label {
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--gold);
}
.ts-sougou-text {
  font-size: .88rem;
  line-height: 2;
  color: #e8e0f4;
  white-space: pre-line;
}

/* ── スクロール連動リビールアニメーション ── */
.tenme-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s ease;
}
.tenme-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* チャンク間の星区切り */
.tenme-reveal-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px 0;
  color: rgba(201,169,110,.55);
  font-size: .95rem;
}
.tenme-reveal-divider span {
  display: inline-block;
  animation: trStarPulse 2s ease-in-out infinite;
}
.tenme-reveal-divider span:nth-child(2) { animation-delay: .35s; }
.tenme-reveal-divider span:nth-child(3) { animation-delay: .7s; }
@keyframes trStarPulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.25); text-shadow: 0 0 8px rgba(201,169,110,.7); }
}

/* 天命総合タブ・冒頭導入カード（星詠み師より） */
.sougou-intro-card {
  background: linear-gradient(150deg,
    rgba(155,89,182,.14) 0%,
    rgba(52,73,116,.08) 100%);
  border: 1px solid rgba(155,89,182,.4);
  border-radius: 14px;
  padding: 20px 20px;
  margin-bottom: 20px;
  font-size: .88rem;
  line-height: 2;
  color: #e0d8f0;
  white-space: pre-line;
}
.sougou-intro-label {
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .14em;
  color: rgba(180,130,220,.9);
  margin-bottom: 10px;
}

/* 天命総合タブ・末尾締めカード（星詠み師より） */
.sougou-close-card {
  background: linear-gradient(160deg,
    rgba(201,169,110,.12) 0%,
    rgba(201,169,110,.04) 100%);
  border: 1px solid rgba(201,169,110,.5);
  border-radius: 14px;
  padding: 20px 20px;
  margin-top: 28px;
  font-size: .88rem;
  line-height: 2;
  color: #f0eade;
  white-space: pre-line;
  box-shadow: 0 0 24px rgba(201,169,110,.07);
}
.sougou-close-label {
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--gold);
  margin-bottom: 10px;
}

/* 天命スクリーン内の .card は overflow を解除（SVGラベル等が切れないように）*/
.tenme-screen .card {
  overflow: visible;
}
.tenme-screen .card::before {
  border-radius: inherit;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   サンドイッチ構造（Phase 4 基盤 + A+B 装飾: 見出し/プルクォート）
   ══════════════════════════════════════════════════════════ */

.sandwich-section {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 20px 0;
}

/* ── AI intro / close カード ───────────────────────── */
.ss-intro,
.ss-close {
  position: relative;
  padding: 20px 22px 22px;
  background: linear-gradient(135deg,
    rgba(163, 137, 255, 0.14),
    rgba(98, 210, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(30, 10, 60, 0.35);
  animation: ssFadeInUp 0.7s ease both;
}
.ss-intro-label,
.ss-close-label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--gold, #f5d98a);
  text-align: center;
  margin-bottom: 10px;
  opacity: 0.92;
}
.ss-intro-text,
.ss-close-text {
  font-size: 0.98rem;
  line-height: 1.95;
  color: #f3efff;
  letter-spacing: 0.02em;
}

/* ── ブロック本体 ─────────────────────────────────── */
.ss-block {
  padding: 18px 20px 22px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  animation: ssFadeInUp 0.65s ease both;
}
.ss-block.ss-conclusion {
  background: linear-gradient(135deg,
    rgba(255, 210, 120, 0.10),
    rgba(255, 170, 230, 0.06));
  border-color: rgba(255, 210, 120, 0.22);
}
.ss-block.ss-caution {
  background: linear-gradient(135deg,
    rgba(255, 170, 100, 0.08),
    rgba(255, 100, 130, 0.05));
  border-color: rgba(255, 170, 100, 0.20);
}
.ss-body {
  font-size: 0.96rem;
  line-height: 2.05;
  color: #ece6ff;
  letter-spacing: 0.02em;
}
.ss-has-ruby ruby { ruby-position: over; }
.ss-has-ruby rt {
  font-size: 0.62em;
  color: rgba(245, 217, 138, 0.85);
  letter-spacing: 0.04em;
}
.ss-has-ruby .term-note {
  border-bottom: 1px dotted rgba(245, 217, 138, 0.55);
  cursor: help;
}

/* ── A: 装飾付き見出し ───────────────────────────── */
.ss-ornament-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 16px;
  padding-top: 4px;
  animation: ssHeadingGlow 1.1s ease both;
}
.ss-oh-line {
  flex: 1 1 auto;
  height: 1px;
  max-width: 140px;
  background: linear-gradient(90deg,
    transparent,
    rgba(245, 217, 138, 0.55),
    transparent);
  transform-origin: center;
  animation: ssLineDraw 0.9s ease both;
}
.ss-oh-line-l { animation-delay: 0.05s; }
.ss-oh-line-r { animation-delay: 0.15s; }
.ss-oh-icon {
  font-size: 1.15rem;
  filter: drop-shadow(0 0 6px rgba(245, 217, 138, 0.5));
  animation: ssIconPulse 2.4s ease-in-out infinite;
}
.ss-oh-label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold, #f5d98a);
  white-space: nowrap;
}

/* ── B: プルクォート（各ブロックの印象句） ───────── */
.ss-pullquote {
  position: relative;
  margin: 0 0 16px;
  padding: 14px 18px 14px 44px;
  background: linear-gradient(135deg,
    rgba(163, 137, 255, 0.10),
    rgba(98, 210, 255, 0.04));
  border-left: 3px solid rgba(245, 217, 138, 0.55);
  border-radius: 10px;
  font-size: 0.98rem;
  line-height: 1.85;
  color: #fff8e8;
  letter-spacing: 0.03em;
  font-style: italic;
  animation: ssFadeInUp 0.8s ease 0.1s both;
}
.ss-pq-mark {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 1.1rem;
  color: var(--gold, #f5d98a);
  filter: drop-shadow(0 0 4px rgba(245, 217, 138, 0.45));
  font-style: normal;
}
.ss-pq-text { display: block; }

/* ブロック色別でプルクォート左ラインもアクセント変更 */
.ss-conclusion .ss-pullquote { border-left-color: rgba(255, 210, 120, 0.75); }
.ss-caution    .ss-pullquote { border-left-color: rgba(255, 170, 100, 0.70); }

/* ══════════════════════════════════════════════════════════
   サンドイッチ内の専用コンポーネント
   ══════════════════════════════════════════════════════════ */

/* ── D-1: 3つの確かな強みカード ─────────────────── */
.strength-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 2px 0 4px;
}
.strength-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  background: linear-gradient(135deg,
    rgba(255, 210, 120, 0.10),
    rgba(163, 137, 255, 0.08));
  border: 1px solid rgba(245, 217, 138, 0.28);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(30, 10, 60, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: ssFadeInUp 0.7s ease both;
}
.strength-card:nth-child(1) { animation-delay: 0.05s; }
.strength-card:nth-child(2) { animation-delay: 0.15s; }
.strength-card:nth-child(3) { animation-delay: 0.25s; }
.strength-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(30, 10, 60, 0.42);
}
.sc-icon {
  font-size: 1.8rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(245, 217, 138, 0.5));
}
.sc-label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
  color: #fff8e8;
  letter-spacing: 0.02em;
}

/* ── D-2: 肯定文 ─────────────────────────────────── */
.affirmation-quote {
  position: relative;
  margin: 6px 0;
  padding: 22px 26px 22px 56px;
  background: linear-gradient(135deg,
    rgba(255, 210, 120, 0.12),
    rgba(163, 137, 255, 0.08));
  border: 1px solid rgba(245, 217, 138, 0.32);
  border-radius: 16px;
  font-size: 1.04rem;
  line-height: 1.95;
  color: #fff8e8;
  letter-spacing: 0.04em;
  font-weight: 500;
  text-align: center;
  box-shadow:
    0 8px 22px rgba(30, 10, 60, 0.35),
    inset 0 0 24px rgba(245, 217, 138, 0.06);
  animation: ssFadeInUp 0.8s ease both;
}
.aq-mark {
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 1.4rem;
  filter: drop-shadow(0 0 6px rgba(245, 217, 138, 0.5));
}
.aq-text { display: block; }

/* ── D-3: 周囲から言われる言葉 ───────────────────── */
.said-by-others {
  padding: 18px 20px 20px;
  background: rgba(98, 210, 255, 0.06);
  border: 1px dashed rgba(98, 210, 255, 0.32);
  border-radius: 14px;
  animation: ssFadeInUp 0.75s ease both;
}
.sbo-header {
  font-size: 0.88rem;
  font-weight: 600;
  color: #bfe9ff;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.sbo-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sbo-list li {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  font-size: 0.94rem;
  line-height: 1.7;
  color: #eaf5ff;
  letter-spacing: 0.03em;
}
.sbo-footer {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(245, 217, 138, 0.85);
  text-align: right;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════
   アニメーション定義
   ══════════════════════════════════════════════════════════ */
@keyframes ssFadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ssLineDraw {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes ssHeadingGlow {
  0%   { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes ssIconPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 6px rgba(245, 217, 138, 0.5)); }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 12px rgba(245, 217, 138, 0.8)); }
}

/* ══════════════════════════════════════════════════════════
   レスポンシブ
   ══════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .strength-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .strength-card {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 14px;
  }
  .sc-icon   { font-size: 1.5rem; }
  .sc-label  { font-size: 0.9rem; text-align: left; }

  .ss-block { padding: 16px 14px 18px; }
  .ss-body  { font-size: 0.92rem; line-height: 1.95; }

  .ss-oh-line { max-width: 60px; }
  .ss-oh-label { font-size: 0.78rem; letter-spacing: 0.10em; }

  .ss-pullquote {
    padding: 12px 14px 12px 38px;
    font-size: 0.94rem;
  }
  .ss-pq-mark { left: 12px; top: 10px; font-size: 1rem; }

  .affirmation-quote {
    padding: 18px 18px 18px 46px;
    font-size: 0.98rem;
  }
  .aq-mark { left: 14px; top: 16px; font-size: 1.2rem; }
}

/* 動きの削減設定を尊重（アクセシビリティ）*/
@media (prefers-reduced-motion: reduce) {
  .ss-intro, .ss-close, .ss-block,
  .strength-card, .said-by-others,
  .affirmation-quote, .ss-pullquote,
  .ss-ornament-heading, .ss-oh-line,
  .ss-oh-icon {
    animation: none !important;
  }
}

/* ══════════════════════════════════════
   Hero/Wisdom/Closing SP最適化
   → css/components_pr.css に切り出し済み
   ここではホロスコープ等 premium 固有のSP調整のみ残す
══════════════════════════════════════ */
@media (max-width: 540px) {
  /* ホロスコープ: SVG を中央配置＋情報ブロックを下へ */
  .horoscope-layout{
    flex-direction:column;
    align-items:center;
    gap:14px;
  }
  .horoscope-svg-wrap{
    width:100%;
    display:flex;
    justify-content:center;
  }
  .horoscope-info{ width:100%; }
}

/* ══════════════════════════════════════
   ⑮ 相性診断 ─ 図解アニメ
   テーマカラーは css/components_pr.css に統一済み
   （総合=cosmic / 星座=love / 数秘=money / 九星=work / 本質=spiritual / 開運=special）
══════════════════════════════════════ */

/* 二人の縁を結ぶ「魂の糸」SVG 図解（総合タブ先頭に配置）*/
.cr-bond-bridge{
  position:relative;
  margin:12px 0 18px;
  padding:22px 16px 16px;
  border-radius:18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(233,30,140,.12) 0%, transparent 70%),
    linear-gradient(135deg, rgba(30,10,60,.5) 0%, rgba(10,8,40,.5) 100%);
  border:1px solid rgba(240,140,200,.28);
  overflow:hidden;
  animation:pr-hero-in .9s cubic-bezier(.22,.9,.3,1) both;
}
.cr-bond-bridge::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%);
  animation:bond-scan 5.5s linear infinite;
}
.cr-bond-bridge-title{
  text-align:center; font-size:.7rem; letter-spacing:.32em;
  color:rgba(255,215,200,.75); margin-bottom:10px;
  text-shadow:0 0 10px rgba(240,140,200,.5);
}
.cr-bond-svg{ display:block; width:100%; max-width:520px; margin:0 auto; height:auto; }
.cr-bond-orb-a{ fill:rgba(233,30,140,.85); filter:drop-shadow(0 0 10px rgba(233,30,140,.8)); animation:bond-pulse 3s ease-in-out infinite; }
.cr-bond-orb-b{ fill:rgba(123,47,255,.85); filter:drop-shadow(0 0 10px rgba(123,47,255,.8)); animation:bond-pulse 3s ease-in-out .75s infinite; }
.cr-bond-line{
  stroke:url(#bondLineGrad); stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:6 5; filter:drop-shadow(0 0 6px rgba(240,140,200,.6));
  animation:bond-dash 4.5s linear infinite;
}
.cr-bond-heart{
  fill:rgba(255,215,240,.95); font-size:18px; text-anchor:middle;
  filter:drop-shadow(0 0 10px rgba(255,140,200,.85));
  animation:bond-heart-beat 1.6s ease-in-out infinite;
}
.cr-bond-ripple{
  fill:none; stroke:rgba(240,140,200,.5); stroke-width:1;
  transform-origin:center; transform-box:fill-box;
  animation:bond-ripple 3.2s ease-out infinite;
}
.cr-bond-ripple.r2{ animation-delay:1.1s; stroke:rgba(123,47,255,.45); }
.cr-bond-ripple.r3{ animation-delay:2.2s; stroke:rgba(201,169,110,.4); }
.cr-bond-lbl{
  display:flex; justify-content:space-around; margin-top:8px;
  font-size:.78rem; color:rgba(232,213,200,.85); letter-spacing:.05em;
}
.cr-bond-lbl strong{ color:#ffcfe3; font-weight:600; }
@keyframes bond-pulse{
  0%,100% { opacity:.85; transform-origin:center; }
  50%     { opacity:1; }
}
@keyframes bond-dash{
  0%   { stroke-dashoffset:0; }
  100% { stroke-dashoffset:-44; }
}
@keyframes bond-heart-beat{
  0%,100% { transform:scale(1); opacity:.95; }
  15%     { transform:scale(1.18); opacity:1; }
  30%     { transform:scale(1); opacity:.9; }
  45%     { transform:scale(1.12); opacity:1; }
}
@keyframes bond-ripple{
  0%   { r:14; opacity:.85; }
  100% { r:54; opacity:0; }
}
@keyframes bond-scan{
  0%   { transform:translateX(-50%); }
  100% { transform:translateX(50%); }
}

/* vis カードの入場スタッガー */
.cr-vis-in{ opacity:0; transform:translateY(14px); animation:cr-vis-in-kf .75s cubic-bezier(.22,.9,.3,1) forwards; }
.cr-tab-panel.active .cr-vis-in{ animation-delay:.1s; }
@keyframes cr-vis-in-kf{
  0%   { opacity:0; transform:translateY(14px); filter:blur(2px); }
  60%  { filter:blur(0); }
  100% { opacity:1; transform:translateY(0); filter:blur(0); }
}

/* ネームバッジのハートを強めに拍動 */
.cr-heart{ display:inline-block; animation:bond-heart-beat 1.6s ease-in-out infinite; }

/* 総合タブ: スコアカードのリング外周に残光 */
.cr-score-card{ position:relative; }
.cr-score-card::after{
  content:''; position:absolute; inset:-2px;
  border-radius:20px; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(240,140,200,.12) 50%, transparent 70%);
  animation:bond-scan 7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cr-bond-orb-a, .cr-bond-orb-b, .cr-bond-line, .cr-bond-heart,
  .cr-bond-ripple, .cr-bond-bridge::before, .cr-heart,
  .cr-vis-in, .cr-score-card::after {
    animation:none !important;
  }
  .cr-vis-in{ opacity:1; transform:none; }
}

/* ===========================================================
   30日予測カレンダー（Phase 5）
   =========================================================== */
#forecast-30day-container{
  margin-top:24px;
  padding:22px 20px;
  background:linear-gradient(145deg, rgba(20,26,60,.85), rgba(40,30,70,.85));
  border:1px solid rgba(180,160,255,.25);
  border-radius:18px;
  box-shadow:0 4px 24px rgba(0,0,0,.25);
}
.forecast-30day-hero{
  display:flex; align-items:center; gap:12px;
  padding-bottom:14px; margin-bottom:18px;
  border-bottom:1px solid rgba(180,160,255,.2);
}
.forecast-30day-icon{ font-size:28px; flex-shrink:0; }
.forecast-30day-title{
  font-size:18px; font-weight:700;
  color:#ffe7b3;
  letter-spacing:.5px;
}
.forecast-30day-sub{
  font-size:12px; color:rgba(220,210,255,.7);
  margin-top:2px;
  line-height:1.5;
}
@media (max-width:640px){
  .forecast-30day-hero{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
  }
  .forecast-30day-icon{ font-size:32px; }
  .forecast-30day-title{ font-size:16px; }
  .forecast-30day-sub{ font-size:11px; }
}
.forecast-30day-loading{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 20px; gap:14px;
  min-height:180px;
}
.forecast-30day-spinner{
  width:42px; height:42px;
  border:3px solid rgba(180,160,255,.2);
  border-top-color:#d0b3ff;
  border-radius:50%;
  animation:forecast-spin .9s linear infinite;
}
@keyframes forecast-spin{ to { transform:rotate(360deg); } }
.forecast-30day-loading-text{
  font-size:13px; color:rgba(220,210,255,.8);
}
.forecast-30day-error{
  padding:24px; text-align:center;
  font-size:13px; color:#ff9e9e;
  border:1px dashed rgba(255,150,150,.4);
  border-radius:12px;
  background:rgba(60,20,30,.3);
}
.forecast-30day-summary{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin-bottom:14px;
}
.forecast-summary-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(180,160,255,.25);
  background:rgba(30,24,60,.5);
}
.forecast-summary--best{ border-color:rgba(255,220,120,.45); }
.forecast-summary--worst{ border-color:rgba(180,200,255,.35); }
.forecast-summary-icon{ font-size:22px; flex-shrink:0; }
.forecast-summary-label{
  font-size:11px; color:rgba(220,210,255,.7);
  margin-bottom:2px;
}
.forecast-summary-item strong{
  display:block; font-size:15px; color:#fff;
  margin-bottom:4px;
}
.forecast-summary-sub{
  font-size:11px; color:rgba(220,210,255,.65);
  line-height:1.4;
}
.forecast-legend{
  display:flex; flex-wrap:wrap; gap:8px 14px;
  padding:10px 12px;
  margin-bottom:14px;
  font-size:11px;
  background:rgba(20,16,40,.5);
  border-radius:10px;
}
.forecast-legend-item{
  display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap;
}
.forecast-legend-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
}
.forecast-30day-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
}
.forecast-day-cell{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:8px 4px;
  border:1.5px solid;
  border-radius:10px;
  min-height:90px;
  text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.forecast-day-cell:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.forecast-day-date{
  font-size:11px; color:#fff;
  font-weight:600;
}
.forecast-day-wd{
  font-size:10px; color:rgba(220,210,255,.6);
  margin-left:2px;
}
.forecast-day-icon{
  font-size:20px; margin:4px 0 2px;
}
.forecast-day-label{
  font-size:10px; font-weight:600;
  line-height:1.2;
}
.forecast-day-theme{
  font-size:9px; color:rgba(220,210,255,.65);
  margin-top:2px;
  line-height:1.2;
}
.forecast-30day-note{
  margin-top:14px;
  padding:10px 12px;
  font-size:11px; color:rgba(220,210,255,.65);
  border-top:1px dashed rgba(180,160,255,.2);
  text-align:center;
  line-height:1.6;
}
@media (max-width:640px){
  .forecast-30day-summary{ grid-template-columns:1fr; }
  .forecast-30day-grid{ grid-template-columns:repeat(5, 1fr); gap:4px; }
  .forecast-day-cell{ min-height:82px; padding:6px 3px; }
  .forecast-day-icon{ font-size:18px; }
}

/* ===========================================================
   判定理由パネル（Phase 6 トランスペアレンシーUI）
   =========================================================== */
.bias-insight-panel{
  margin-top:16px;
  border:1px solid rgba(180,160,255,.25);
  border-radius:14px;
  background:rgba(22,18,48,.72);
  overflow:hidden;
}
.bias-insight-toggle{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding:12px 16px;
  background:transparent;
  border:none;
  color:#ffe7b3;
  font-size:13px; font-weight:600;
  cursor:pointer;
  transition:background .15s ease;
}
.bias-insight-toggle:hover{
  background:rgba(180,160,255,.08);
}
.bias-insight-toggle-icon{
  font-size:14px; opacity:.7;
  transition:transform .2s ease;
}
.bias-insight-panel.is-open .bias-insight-toggle-icon{
  transform:rotate(180deg);
}
.bias-insight-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  padding:0 16px;
}
.bias-insight-panel.is-open .bias-insight-body{
  max-height:1400px;
  padding:8px 16px 16px;
  border-top:1px solid rgba(180,160,255,.15);
}
.bias-insight-summary{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  margin-bottom:12px;
  border-radius:10px;
  background:rgba(40,30,70,.6);
}
.bias-insight-summary-icon{ font-size:22px; }
.bias-insight-summary-label{
  font-size:13px; font-weight:600; color:#fff;
}
.bias-insight-summary-score{
  font-size:11px; color:rgba(220,210,255,.65);
}
.bias-source-row{
  display:grid; grid-template-columns:110px 1fr auto; gap:10px; align-items:center;
  padding:8px 0;
  border-bottom:1px dashed rgba(180,160,255,.15);
  font-size:12px;
}
.bias-source-row:last-child{ border-bottom:none; }
.bias-source-label{
  color:rgba(220,210,255,.85);
  font-weight:600;
}
.bias-source-bar{
  position:relative;
  height:6px;
  background:rgba(60,50,100,.5);
  border-radius:3px;
  overflow:hidden;
}
.bias-source-bar-fill{
  position:absolute; top:0; bottom:0;
  border-radius:3px;
  transition:width .3s ease;
}
.bias-source-bar--positive .bias-source-bar-fill{ background:linear-gradient(90deg, #7fd390, #ffda77); left:50%; }
.bias-source-bar--negative .bias-source-bar-fill{ background:linear-gradient(270deg, #9db4ff, #b496e6); right:50%; }
.bias-source-bar--neutral .bias-source-bar-fill{ background:rgba(200,200,220,.35); left:45%; width:10%; }
.bias-source-score{
  font-size:11px; font-weight:600;
  color:#ffe7b3;
  text-align:right;
  min-width:88px;
  letter-spacing:.3px;
  white-space:nowrap;
}
@media (max-width:640px){
  .bias-source-row{ grid-template-columns:78px 1fr auto; gap:6px; }
  .bias-source-score{ min-width:72px; font-size:10px; }
  .bias-source-label{ font-size:11px; }
}
.bias-insight-reasons{
  margin-top:10px; padding:10px 12px;
  background:rgba(15,12,35,.5);
  border-radius:10px;
  font-size:11px; color:rgba(220,210,255,.75);
  line-height:1.6;
}
.bias-insight-reasons-title{
  font-size:11px; color:rgba(220,210,255,.55);
  margin-bottom:4px;
  text-transform:uppercase; letter-spacing:.5px;
}
.bias-insight-reasons ul{
  margin:0; padding-left:18px;
}
.bias-insight-reasons li{ margin:3px 0; }
.bias-insight-history{
  margin-top:8px; padding:8px 12px;
  font-size:11px; color:rgba(200,190,240,.7);
  background:rgba(20,16,40,.55);
  border-radius:8px;
  border-left:2px solid rgba(180,160,255,.35);
}
@media (max-width:640px){
  .bias-source-row{ grid-template-columns:90px 1fr auto; gap:8px; font-size:11px; }
  .bias-source-label{ font-size:11px; }
}

/* ════════════════════════════════════════
   Phase 1.5-A: 本日の星詠み（プレミアム版）
   #premium-daily-card-slot に動的注入される
════════════════════════════════════════ */
.premium-daily-card{
  background:linear-gradient(165deg,rgba(28,20,55,.92) 0%,rgba(46,28,80,.88) 50%,rgba(28,20,55,.92) 100%);
  border:1px solid rgba(201,169,110,.45);
  box-shadow:0 0 0 1px rgba(201,169,110,.15) inset, 0 8px 28px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}
.premium-daily-card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 20% 0%,rgba(201,169,110,.18) 0%,transparent 50%),
             radial-gradient(circle at 80% 100%,rgba(155,89,182,.16) 0%,transparent 50%);
  pointer-events:none;
}
.premium-daily-card .daily-header{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid rgba(201,169,110,.25);
  padding-bottom:10px; margin-bottom:14px;
  position:relative;
}
.premium-daily-card .daily-title{
  font-family:'Cinzel','Noto Serif JP',serif;
  color:var(--gold,#c9a96e);
  font-size:1.05rem; font-weight:600; letter-spacing:.06em;
}
.premium-daily-card .daily-date{
  color:rgba(232,213,163,.78); font-size:.78rem; letter-spacing:.04em;
}
.premium-daily-card .today-message{
  white-space:pre-line;
  line-height:1.95;
  padding:18px 4px;
  color:rgba(245,238,220,.95);
  font-size:.95rem;
  position:relative;
}
.premium-daily-card .daily-focus-response{
  margin-top:14px; padding:14px 16px;
  background:rgba(201,169,110,.08);
  border-left:3px solid rgba(201,169,110,.6);
  border-radius:8px;
  position:relative;
}
.premium-daily-card .daily-focus-response .focus-label{
  font-size:.82rem; color:var(--gold,#c9a96e);
  margin:0 0 8px; font-weight:600;
}
.premium-daily-card .daily-focus-response > div{
  white-space:pre-line; line-height:1.85; font-size:.9rem;
  color:rgba(245,238,220,.92);
}
.premium-daily-card .daily-lucky-row{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:14px;
  position:relative;
}
.premium-daily-card .lucky-chip{
  background:rgba(201,169,110,.15);
  border:1px solid rgba(201,169,110,.4);
  color:rgba(245,238,220,.95);
  padding:5px 12px; border-radius:14px;
  font-size:.78rem; letter-spacing:.04em;
}
.premium-daily-card .daily-warning{
  margin-top:12px; padding:10px 14px;
  background:rgba(231,76,60,.1);
  border-left:3px solid rgba(231,76,60,.55);
  border-radius:6px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  font-size:.82rem;
  position:relative;
}
.premium-daily-card .daily-warning .warn-time{
  color:#ff8a7d; font-weight:600; white-space:nowrap;
}
.premium-daily-card .daily-warning .warn-advice{
  color:rgba(245,238,220,.88);
}
.premium-daily-card .daily-focus-input{
  margin-top:18px; padding-top:16px;
  border-top:1px dashed rgba(201,169,110,.25);
  position:relative;
}
.premium-daily-card .daily-focus-input summary{
  cursor:pointer; color:var(--gold,#c9a96e);
  font-size:.85rem; letter-spacing:.04em;
  list-style:none; padding:6px 0;
}
.premium-daily-card .daily-focus-input summary::-webkit-details-marker{ display:none; }
.premium-daily-card .daily-focus-input textarea{
  width:100%; box-sizing:border-box;
  margin-top:10px; padding:10px 12px;
  background:rgba(20,16,40,.65);
  border:1px solid rgba(201,169,110,.3);
  border-radius:8px;
  color:rgba(245,238,220,.95);
  font-family:inherit; font-size:.88rem;
  resize:vertical; min-height:64px;
}
.premium-daily-card .daily-focus-input textarea:focus{
  outline:none;
  border-color:rgba(201,169,110,.7);
  box-shadow:0 0 0 2px rgba(201,169,110,.2);
}
.premium-daily-card .focus-submit-btn{
  margin-top:10px; padding:8px 18px;
  background:linear-gradient(135deg,#c9a96e 0%,#e8d5a3 100%);
  color:#1c1437; border:none; border-radius:8px;
  font-size:.85rem; font-weight:600; letter-spacing:.03em;
  cursor:pointer;
}
.premium-daily-card .focus-submit-btn:hover{
  filter:brightness(1.1);
}
.premium-daily-card .daily-focus-input .hint{
  font-size:.72rem; color:rgba(232,213,163,.6);
  margin:6px 0 0;
}
.premium-daily-card .daily-cache-note{
  margin-top:10px;
  font-size:.7rem; color:rgba(232,213,163,.55);
  text-align:right; font-style:italic;
}

/* ローディング状態 */
.premium-daily-card-loading .premium-daily-loading{
  text-align:center; padding:24px 0;
  color:rgba(232,213,163,.78);
  font-size:.88rem;
  position:relative;
}
.premium-daily-loading-spinner{
  width:36px; height:36px; margin:0 auto 14px;
  border:3px solid rgba(201,169,110,.18);
  border-top-color:var(--gold,#c9a96e);
  border-radius:50%;
  animation:premium-daily-spin 1s linear infinite;
}
@keyframes premium-daily-spin{ to{ transform:rotate(360deg); } }

/* アップセルバナー（無料ログイン時 / 未認証時） */
.premium-daily-card.daily-upsell-banner .upsell-cta{
  margin-top:14px; padding:14px;
  background:rgba(201,169,110,.08);
  border:1px dashed rgba(201,169,110,.4);
  border-radius:8px;
  text-align:center;
  position:relative;
}
.premium-daily-card.daily-upsell-banner .upsell-msg{
  margin:0 0 10px; font-size:.88rem;
  color:rgba(245,238,220,.92);
}
.premium-daily-card.daily-upsell-banner .upsell-btn{
  display:inline-block; padding:9px 22px;
  background:linear-gradient(135deg,#c9a96e 0%,#e8d5a3 100%);
  color:#1c1437; text-decoration:none;
  border-radius:8px; font-weight:600;
  font-size:.88rem; letter-spacing:.04em;
}
.premium-daily-card.daily-upsell-banner .upsell-btn:hover{
  filter:brightness(1.1);
}

@media (max-width:640px){
  .premium-daily-card .today-message{ font-size:.9rem; line-height:1.85; padding:14px 2px; }
  .premium-daily-card .daily-header{ flex-direction:column; align-items:flex-start; gap:4px; }
  .premium-daily-card .lucky-chip{ font-size:.74rem; padding:4px 10px; }
}

/* ══════════════════════════════════════
   Phase 1.5-B: 進行図ブロック（使命タブ）
══════════════════════════════════════ */
.ts-progression-block{
  margin-top:18px;
}
.ts-progression-block .sec-title{
  text-align:center;
  font-size:.95rem;
  letter-spacing:.06em;
  color:#e8d5a3;
}
.ts-prog-card{
  background:linear-gradient(135deg, rgba(201,169,110,.08) 0%, rgba(233,30,140,.06) 100%);
  border:1px solid rgba(201,169,110,.3);
  border-radius:14px;
  padding:16px 18px;
  margin:0 auto;
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:0 2px 12px rgba(28,20,55,.25);
}
.ts-prog-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:6px 0;
  border-bottom:1px dashed rgba(201,169,110,.18);
}
.ts-prog-row:last-of-type{
  border-bottom:none;
}
.ts-prog-label{
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.04em;
}
.ts-prog-value{
  font-size:.92rem;
  color:#e8d5a3;
  font-weight:600;
  letter-spacing:.03em;
}
.ts-prog-phase{
  margin-top:8px;
  text-align:center;
  font-size:.85rem;
  color:#e91e8c;
  font-weight:600;
  letter-spacing:.06em;
  padding:8px 12px;
  background:rgba(233,30,140,.08);
  border-radius:8px;
}
.ts-prog-text{
  margin-top:14px;
  padding:14px 18px;
  background:rgba(255,255,255,.03);
  border-left:3px solid #c9a96e;
  border-radius:6px;
  font-size:.86rem;
  line-height:1.85;
  color:#d8d2e0;
  letter-spacing:.02em;
}
@media (max-width:640px){
  .ts-prog-card{ padding:14px; }
  .ts-prog-value{ font-size:.86rem; }
  .ts-prog-text{ font-size:.82rem; padding:12px 14px; }
}

/* ── 天命占い独立パネル ─────────────────── */
.tenme-standalone-desc {
  text-align: center;
  color: #c9a96e;
  font-size: .9rem;
  line-height: 1.7;
  margin: 8px 0 24px;
}
.tenme-standalone-btn-wrap {
  text-align: center;
  margin: 0 0 16px;
}
.tenme-standalone-note {
  text-align: center;
  color: #9a8fa8;
  font-size: .78rem;
  margin: 0;
}

/* ── reading-extra 段落スペース（v2 対応）── */
.reading-extra p {
  margin: 0 0 1.2em 0;
  line-height: 1.85;
  text-indent: 1em;
}
.reading-extra p:first-child { margin-top: 0; }
.reading-extra p:last-child  { margin-bottom: 0; }