/* ============================================================
   ARCANA — 共通スタイルシート
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Rose gold palette */
  --gold: #c49472;
  --gold-light: #ddb896;
  --gold-pale: rgba(196,148,114,.14);

  /* Soft amethyst */
  --amethyst: #9b73bc;
  --amethyst-light: #c4a4e2;
  --amethyst-pale: rgba(155,115,188,.14);

  /* Dusty rose accent */
  --rose: #c8849e;
  --rose-pale: rgba(200,132,158,.12);

  /* Backward-compat aliases */
  --purple: #9b73bc;
  --purple-light: #c4a4e2;
  --purple-pale: rgba(155,115,188,.14);
  --pink: #c8849e;

  /* Background — warm deep indigo */
  --bg-dark: #0e0b1e;

  /* Text — WCAG AA on #0e0b1e */
  --text: #f2edf8;                       /* contrast ≈ 16:1 */
  --text-dim: rgba(242,237,248,.72);     /* contrast ≈ 10:1 */
  --text-muted: rgba(242,237,248,.56);   /* contrast ≈ 7.5:1 */

  /* Borders */
  --border: rgba(196,148,114,.22);
  --border-purple: rgba(155,115,188,.28);
  --border-rose: rgba(200,132,158,.22);

  /* Card surface */
  --card-bg: rgba(20,14,42,.88);

  /* Typography */
  --font-title: 'Cinzel Decorative', serif;
  --font-serif: 'Cinzel', serif;
  --font-body: 'Noto Serif JP', serif;

  /* Layout */
  --max-w: 860px;
  --max-w-wide: 1100px;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg-dark);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* Focus visible — accessibility */
:focus-visible {
  outline: 2px solid var(--amethyst-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   星空キャンバス
   ============================================================ */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   ページラッパー
   ============================================================ */
#page-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity .6s ease;
}
#page-wrap.visible { opacity: 1; }

/* ============================================================
   ヘッダー
   ============================================================ */
.site-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  background: rgba(14,11,30,.65);
}

/* スクロール追従ナビバー */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(14,11,30,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
  transform: translateY(-100%);
  transition: transform .3s ease;
}
.sticky-nav.visible {
  transform: translateY(0);
}
.sticky-nav-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 4px;
  justify-content: center;
}

.header-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo-symbol {
  font-size: .9rem;
  color: var(--gold);
  animation: twinkle 3.5s ease-in-out infinite;
}

.site-logo-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: var(--gold-light);
  letter-spacing: .28em;
  text-shadow: 0 0 24px rgba(221,184,150,.3);
}

.site-logo-by {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}
.site-logo-by-text {
  font-family: var(--font-serif);
  font-size: .6rem;
  color: var(--text-muted);
  letter-spacing: .05em;
}
.site-logo-uranavi {
  height: 18px;
  width: auto;
  display: block;
  opacity: .7;
}

@keyframes twinkle {
  0%,100% { opacity: .45; }
  50% { opacity: 1; text-shadow: 0 0 18px var(--gold); }
}

.site-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.nav-link {
  font-family: var(--font-serif);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--text-dim);
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all .2s ease;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: var(--gold-light);
  border-color: var(--border);
  background: var(--gold-pale);
}


/* ============================================================
   パンくず
   ============================================================ */
.breadcrumb {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px 24px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.breadcrumb-item {
  font-size: .72rem;
  color: var(--text-muted);
  letter-spacing: .05em;
}

.breadcrumb-item a {
  color: var(--text-muted);
  transition: color .2s ease;
}
.breadcrumb-item a:hover { color: var(--gold-light); }

.breadcrumb-sep {
  color: var(--text-muted);
  font-size: .65rem;
}

/* ============================================================
   フッター
   ============================================================ */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 48px 24px 32px;
  text-align: center;
}

.footer-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
}

.footer-logo {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: .3em;
  margin-bottom: 24px;
}

.footer-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}

.footer-cat-link {
  font-size: .72rem;
  color: var(--text-dim);
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  letter-spacing: .1em;
  transition: all .2s ease;
}
.footer-cat-link:hover { color: var(--gold-light); border-color: var(--gold); }

.footer-note {
  font-size: .7rem;
  color: var(--text-muted);
  letter-spacing: .1em;
  line-height: 1.8;
}

.footer-company-link {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-company-link:hover {
  color: var(--gold-light);
}

.footer-uranavi-link {
  display: inline-block;
  opacity: .75;
  transition: opacity .2s ease;
}
.footer-uranavi-link:hover {
  opacity: 1;
}
.footer-uranavi-logo {
  height: 32px;
  width: auto;
  display: block;
}

/* ============================================================
   TOPページ — ヒーロー
   ============================================================ */
.top-hero {
  text-align: center;
  padding: 80px 24px 60px;
  position: relative;
}

.hero-symbol {
  font-size: 1.8rem;
  color: var(--gold);
  display: block;
  margin-bottom: 22px;
  animation: twinkle 3.5s ease-in-out infinite;
  letter-spacing: .35em;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--gold-light);
  letter-spacing: .1em;
  line-height: 1.75;
  text-shadow: 0 0 48px rgba(221,184,150,.25);
  margin-bottom: 18px;
}

.hero-lead {
  font-size: .9rem;
  color: var(--text-dim);
  line-height: 2;
  letter-spacing: .04em;
  max-width: 480px;
  margin: 0 auto 40px;
}

.hero-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 380px;
  margin: 0 auto;
}
.hero-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose), transparent);
  opacity: .3;
}
.hero-divider-icon { color: var(--rose); font-size: .9rem; opacity: .6; }

/* ============================================================
   TOPページ — ピックアップ
   ============================================================ */
.top-pickup {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 24px 56px;
}

.section-label {
  font-family: var(--font-serif);
  font-size: .85rem;
  letter-spacing: .4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::before, .section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .2;
}

/* グラデーションボーダー付きカード */
.pickup-card {
  background: linear-gradient(135deg, rgba(155,115,188,.16), rgba(196,148,114,.1), rgba(200,132,158,.12));
  border-radius: var(--radius-lg);
  padding: 38px 44px;
  display: flex;
  align-items: center;
  gap: 40px;
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  /* gradient border via box-shadow + outline layering */
  box-shadow:
    inset 0 0 0 1px rgba(196,148,114,.25),
    0 4px 32px rgba(155,115,188,.1);
}

/* shimmer sweep on hover */
.pickup-card::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -40%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(242,237,248,.06) 50%,
    transparent 70%
  );
  transform: skewX(-15deg) translateX(-100%);
  transition: none;
}

.pickup-card:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(221,184,150,.45),
    0 16px 48px rgba(155,115,188,.22),
    0 4px 16px rgba(200,132,158,.12);
}

.pickup-card:hover::before {
  transform: skewX(-15deg) translateX(300%);
  transition: transform .7s ease;
}

.pickup-badge {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--font-serif);
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--gold-light);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold-pale);
}

.pickup-symbol {
  font-size: 3rem;
  color: var(--gold);
  flex-shrink: 0;
  filter: drop-shadow(0 0 18px rgba(196,148,114,.5));
}

.pickup-text { flex: 1; }
.pickup-cat {
  font-family: var(--font-serif);
  font-size: .85rem;
  letter-spacing: .25em;
  color: var(--amethyst-light);
  margin-bottom: 8px;
}
.pickup-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--gold-light);
  letter-spacing: .08em;
  margin-bottom: 10px;
  line-height: 1.65;
}
.pickup-desc {
  font-size: .82rem;
  color: var(--text-dim);
  line-height: 1.85;
  letter-spacing: .04em;
}
.pickup-arrow {
  color: var(--gold);
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform .3s ease;
}
.pickup-card:hover .pickup-arrow { transform: translateX(5px); }

/* ============================================================
   TOPページ — カテゴリグリッド
   ============================================================ */
.top-category {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 24px 64px;
}

.cat-section { margin-bottom: 52px; }

.cat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.cat-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--gold-light);
  letter-spacing: .2em;
}

.cat-title-en {
  font-size: .63rem;
  color: var(--text-muted);
  letter-spacing: .2em;
  display: block;
}

.fortune-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.fortune-card {
  background: var(--card-bg);
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  text-decoration: none;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  display: block;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.fortune-card::after {
  content: '→';
  position: absolute;
  bottom: 14px;
  right: 16px;
  color: var(--gold);
  font-size: .75rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: all .3s ease;
}

.fortune-card:hover {
  border-color: rgba(196,148,114,.5);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(155,115,188,.2);
}

.fortune-card:hover::after { opacity: 1; transform: translateX(0); }

.fortune-card-symbol {
  font-size: 1.4rem;
  margin-bottom: 10px;
  display: block;
  filter: drop-shadow(0 0 8px currentColor);
}

.fortune-card-title {
  font-family: var(--font-serif);
  font-size: .88rem;
  color: var(--text);
  letter-spacing: .05em;
  line-height: 1.65;
  margin-bottom: 6px;
}

.fortune-card-desc {
  font-size: .7rem;
  color: var(--text-muted);
  letter-spacing: .04em;
  line-height: 1.65;
}

/* ============================================================
   占いページ — レイアウト
   ============================================================ */
.reading-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 36px 24px 80px;
}

.reading-page h1 {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  color: var(--gold-light);
  letter-spacing: .1em;
  line-height: 1.75;
  margin-bottom: 14px;
  text-shadow: 0 0 32px rgba(221,184,150,.25);
}

.reading-lead {
  font-size: .88rem;
  color: var(--text-dim);
  line-height: 2;
  letter-spacing: .04em;
  margin-bottom: 40px;
  max-width: 600px;
}

/* ============================================================
   占いページ — カード引きUI
   ============================================================ */
.reading-section {
  margin-bottom: 48px;
}

.reading-start-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 48px 0;
}

/* ============================================================
   カードデッキ — 複数枚の重なり表現
   ============================================================ */
.card-deck-wrap {
  position: relative;
  width: 152px;
  /* カード3枚分の高さ確保 */
  margin-bottom: 8px;
}

/* デッキの下2枚（影の枚) */
.card-deck-wrap::before,
.card-deck-wrap::after {
  content: '';
  position: absolute;
  width: 152px;
  top: 0; left: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #1c1035, #0f0826);
  border: 1px solid var(--border-purple);
  pointer-events: none;
}
.card-deck-wrap::after  { transform: translate(3px, 4px)  rotate(.8deg); z-index: 0; }
.card-deck-wrap::before { transform: translate(6px, 8px) rotate(1.6deg); z-index: -1; }

.start-card-placeholder {
  width: 152px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-purple);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #0e0b1e;
  z-index: 1;
  /* perspective はここではなく親で持たせる */
  transform-origin: center bottom;
  transition:
    transform .25s cubic-bezier(.25,.46,.45,.94),
    box-shadow .25s ease,
    border-color .25s ease;
  will-change: transform;
}

.card-back-img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: filter .25s ease;
  pointer-events: none;
  user-select: none;
}

/* ホバー — 少し持ち上がる */
.start-card-placeholder:hover {
  border-color: rgba(196,148,114,.6);
  box-shadow:
    0 12px 40px rgba(155,115,188,.5),
    0 4px 12px rgba(196,148,114,.25),
    0 0 0 1px rgba(196,148,114,.18);
  transform: translateY(-8px) rotate(-.5deg);
}
.start-card-placeholder:hover .card-back-img {
  filter: brightness(1.1);
}

/* タップ押下瞬間 */
.start-card-placeholder:active {
  transform: translateY(-4px) scale(.97) rotate(.3deg);
  box-shadow: 0 6px 20px rgba(155,115,188,.35);
  transition-duration: .1s;
}

/* ---- 引き抜きアニメーション ---- */
/* Phase 1: 手で掴んで持ち上げる */
.start-card-placeholder.anim-lift {
  animation: cardLift .35s cubic-bezier(.25,.46,.45,.94) forwards;
  pointer-events: none;
}
@keyframes cardLift {
  0%   { transform: translateY(0)    rotate(0deg)   scale(1);    }
  40%  { transform: translateY(-18px) rotate(-1.5deg) scale(1.04); }
  100% { transform: translateY(-28px) rotate(-2deg)  scale(1.06); }
}

/* Phase 2: 宙に浮いて小刻みに揺れる（息づかい感） */
.start-card-placeholder.anim-float {
  animation: cardFloat .5s ease-in-out forwards;
  pointer-events: none;
}
@keyframes cardFloat {
  0%   { transform: translateY(-28px) rotate(-2deg)   scale(1.06); }
  30%  { transform: translateY(-32px) rotate(-1deg)   scale(1.07); }
  60%  { transform: translateY(-26px) rotate(-2.5deg) scale(1.06); }
  100% { transform: translateY(-30px) rotate(-1.5deg) scale(1.065); }
}

/* Phase 3: テーブルに伏せて置く（perspective で奥から倒れてくる） */
.card-deck-wrap.anim-place {
  perspective: 800px;
}
.start-card-placeholder.anim-place {
  animation: cardPlace .45s cubic-bezier(.22,1,.36,1) forwards;
  pointer-events: none;
}
@keyframes cardPlace {
  0%   { transform: translateY(-30px) rotate(-1.5deg) scale(1.065);  }
  55%  { transform: translateY(6px)   rotate(.4deg)   scale(.99) rotateX(8deg); }
  75%  { transform: translateY(-3px)  rotate(0deg)    scale(1.005); }
  100% { transform: translateY(0)     rotate(0deg)    scale(1);    }
}

/* フェードアウト（デッキを消す） */
.start-card-placeholder.anim-fadeout {
  animation: cardFadeOut .3s ease forwards;
  pointer-events: none;
}
@keyframes cardFadeOut {
  to { opacity: 0; transform: translateY(8px) scale(.95); }
}

.start-text {
  font-size: .82rem;
  color: var(--text-dim);
  letter-spacing: .1em;
  text-align: center;
  transition: opacity .3s ease;
}

/* ---- 読み込み中テキスト ---- */
.draw-status {
  font-family: var(--font-serif);
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--amethyst-light);
  text-align: center;
  opacity: 0;
  transition: opacity .4s ease;
}
.draw-status.visible { opacity: 1; }

/* カード引くボタン */
.btn-draw {
  background: linear-gradient(135deg, rgba(155,115,188,.28), rgba(196,148,114,.18));
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-light);
  font-family: var(--font-serif);
  font-size: .9rem;
  letter-spacing: .2em;
  padding: 15px 38px;
  cursor: pointer;
  transition: all .3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-draw:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(155,115,188,.35);
  background: linear-gradient(135deg, rgba(155,115,188,.38), rgba(196,148,114,.26));
}

.btn-draw.loading {
  pointer-events: none;
  opacity: .5;
}

/* ============================================================
   占いページ — 結果エリア
   ============================================================ */
#result-area {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

#result-area.visible { display: flex; }

/* ============================================================
   結果エリア — フリップシーン全体
   ============================================================ */
.flip-scene {
  perspective: 900px;
  width: 168px;
}

/* フリップ本体（表裏を内包） */
.flip-card {
  width: 168px;
  position: relative;
  transform-style: preserve-3d;
  /* フリップアニメーション */
  animation: cardFlip .9s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes cardFlip {
  0%   { transform: rotateY(0deg)   translateY(-20px) scale(1.06); }
  35%  { transform: rotateY(90deg)  translateY(-10px) scale(1.03); }
  65%  { transform: rotateY(180deg) translateY(0px)   scale(1.01); }
  82%  { transform: rotateY(180deg) translateY(-5px)  scale(1.015); }
  91%  { transform: rotateY(180deg) translateY(2px)   scale(.997); }
  100% { transform: rotateY(180deg) translateY(0)     scale(1); }
}

/* カード裏面（フリップ前に見える） */
.flip-card-back {
  width: 168px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: absolute;
  top: 0; left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--border-purple);
}
.flip-card-back img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* 結果カード本体 */
.result-tarot-card {
  width: 168px;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #1e1238, #100830);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
  box-shadow:
    0 0 48px rgba(155,115,188,.28),
    0 0 0 1px rgba(196,148,114,.1);
}

/* フリップ完了後の光沢スキャン */
.result-tarot-card::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -30%;
  width: 60%;
  height: 260%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,.12) 45%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.12) 55%,
    transparent 80%
  );
  transform: skewX(-12deg);
  pointer-events: none;
  z-index: 10;
  /* フリップ完了（0.9s）の少し後から */
  animation: cardShimmer .65s ease-in-out 1.0s forwards;
  opacity: 0;
}
@keyframes cardShimmer {
  0%   { opacity: 1; top: -100%; }
  100% { opacity: 0; top: 120%; }
}

/* 実際のカード画像 */
.result-card-img {
  width: 100%;
  display: block;
  aspect-ratio: 2 / 3.5;
  object-fit: cover;
  object-position: top;
  position: relative;
  z-index: 1;
}

/* カード名フッター */
.result-card-footer {
  padding: 10px 12px 12px;
  text-align: center;
  background: rgba(14,11,30,.92);
  border-top: 1px solid rgba(196,148,114,.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.result-card-glow-bg {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  opacity: .2;
  pointer-events: none;
  z-index: 0;
}

/* テキスト部分のフェードイン（カードより遅らせる） */
.result-body-wrap {
  opacity: 0;
  transform: translateY(16px);
  animation: resultBodyIn .6s ease .85s forwards;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
@keyframes resultBodyIn {
  to { opacity: 1; transform: translateY(0); }
}

/* フォールバック（画像なし時） */
.result-card-symbol {
  font-size: 2.8rem;
  filter: drop-shadow(0 0 15px currentColor);
  animation: symbolGlow 3.5s ease-in-out infinite;
  position: relative;
  z-index: 1;
  padding: 40px 0 10px;
  text-align: center;
}

@keyframes symbolGlow {
  0%,100% { filter: drop-shadow(0 0 10px currentColor); }
  50%      { filter: drop-shadow(0 0 28px currentColor); }
}

.result-card-number {
  font-family: var(--font-serif);
  font-size: .6rem;
  color: var(--text-muted);
  letter-spacing: .3em;
}

.result-card-name-jp {
  font-family: var(--font-serif);
  font-size: .92rem;
  color: var(--gold-light);
  letter-spacing: .15em;
}

.result-card-name-en {
  font-size: .56rem;
  color: var(--text-dim);
  letter-spacing: .1em;
}

/* 結果テキスト */
.result-body {
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.result-body h2 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--gold-light);
  letter-spacing: .1em;
  line-height: 1.75;
  margin-bottom: 20px;
  text-shadow: 0 0 24px rgba(221,184,150,.25);
}

.result-text {
  font-size: .9rem;
  color: var(--text-dim);
  line-height: 2.2;
  letter-spacing: .05em;
  margin-bottom: 20px;
  text-align: left;
}

.result-advice {
  font-size: .82rem;
  color: var(--amethyst-light);
  font-style: italic;
  letter-spacing: .06em;
  line-height: 1.85;
  padding: 16px 20px;
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-sm);
  background: var(--amethyst-pale);
  text-align: left;
}

.result-advice::before {
  content: '✦ ';
  color: var(--rose);
  font-style: normal;
}

/* もう一度占うボタン */
.btn-retry {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-family: var(--font-serif);
  font-size: .8rem;
  letter-spacing: .2em;
  padding: 12px 28px;
  cursor: pointer;
  transition: all .3s ease;
}

.btn-retry:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  box-shadow: 0 0 20px rgba(196,148,114,.18);
}

/* ============================================================
   占いページ — SEOコンテンツ
   ============================================================ */
.seo-section {
  margin-top: 60px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}

.seo-section h2 {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--gold-light);
  letter-spacing: .15em;
  margin-bottom: 16px;
}

.seo-section p {
  font-size: .84rem;
  color: var(--text-dim);
  line-height: 2.2;
  letter-spacing: .04em;
  margin-bottom: 32px;
}

/* 関連占いグリッド */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.related-card {
  background: var(--card-bg);
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-decoration: none;
  transition: transform .3s ease, border-color .3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.related-card:hover {
  border-color: rgba(196,148,114,.45);
  transform: translateY(-2px);
}

.related-card-symbol { font-size: 1.2rem; }
.related-card-title {
  font-size: .8rem;
  color: var(--text);
  letter-spacing: .06em;
  line-height: 1.5;
}

/* ============================================================
   ユーティリティ
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 768px) {
  .site-nav { display: none; }
  .pickup-card { flex-direction: column; text-align: center; padding: 30px 24px; gap: 24px; }
  .pickup-symbol { font-size: 2.2rem; }
  .pickup-arrow { display: none; }
  .fortune-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: 1.5rem; }
  .pickup-title { font-size: .95rem; }
  .reading-page h1 { font-size: 1.25rem; }
  .result-body h2 { font-size: 1rem; }
}

@media (max-width: 480px) {
  .fortune-grid  { grid-template-columns: 1fr 1fr; }
  .related-grid  { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   スクロールバー・選択
   ============================================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0a0818; }
::-webkit-scrollbar-thumb { background: rgba(155,115,188,.28); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(155,115,188,.45); }
::selection { background: rgba(155,115,188,.28); color: var(--text); }