/* ================================================================
   KAMI CARD FORTUNE — 神様カード占い スタイル
   依存: hoshikami-fonts (Noto Serif JP)
   ================================================================ */

/* ── デザイントークン（このコンポーネント内） ── */
:root {
  --kc-bg-deep:     #04060f;
  --kc-bg-mid:      #0a0d1e;
  --kc-bg-card:     #0f1535;
  --kc-bg-card2:    #1a2050;
  --kc-gold:        #c9a84c;
  --kc-gold-light:  #e8d08a;
  --kc-gold-pale:   #f5e9c0;
  --kc-gold-glow:   rgba(201, 168, 76, 0.35);
  --kc-text-main:   #e8d08a;
  --kc-text-sub:    rgba(232, 208, 138, 0.65);
  --kc-text-body:   rgba(245, 233, 192, 0.80);
  --kc-radius-card: 8px;
  --kc-flip-dur:    0.72s;
}

/* ================================================================
   ① 外側コンテナ
   ================================================================ */
.kami-card-fortune {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 16px 64px;
  font-family: 'Noto Serif JP', 'Shippori Mincho', serif;
  color: var(--kc-text-main);
  box-sizing: border-box;
}

/* ================================================================
   ② イントロ
   ================================================================ */
.kami-card-intro {
  text-align: center;
  margin-bottom: 40px;
}

.kami-card-intro__eyebrow {
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  letter-spacing: 0.4em;
  color: var(--kc-gold);
  margin: 0 0 12px;
}

.kami-card-intro__title {
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 400;
  color: var(--kc-gold-pale);
  letter-spacing: 0.18em;
  margin: 0 0 16px;
  text-shadow: 0 0 24px var(--kc-gold-glow);
}

.kami-card-intro__desc {
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  color: var(--kc-text-sub);
  letter-spacing: 0.1em;
  line-height: 1.9;
  margin: 0;
}

/* ================================================================
   ③ カードデッキ（グリッド）
   ================================================================ */
.kami-card-deck {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* スマホ: 3列 */
  gap: 8px;
  width: 100%;
}

@media (min-width: 480px) {
  .kami-card-deck { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}

@media (min-width: 720px) {
  .kami-card-deck { grid-template-columns: repeat(5, 1fr); gap: 14px; }
}

/* ================================================================
   ④ カード — 共通・外枠
   ================================================================ */
.kami-card {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  perspective: 900px;
  cursor: pointer;

  /* 出現アニメーション（stagger は JS が --appear-delay をセット） */
  animation: kcCardAppear 0.55s ease both;
  animation-delay: var(--appear-delay, 0ms);
}

@keyframes kcCardAppear {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ホバー: 浮き上がり */
.kami-card:hover:not(.is-flipped):not(.is-disabled) {
  transform: translateY(-5px);
  transition: transform 0.28s ease;
}

/* 選択不可カード */
.kami-card.is-disabled {
  cursor: default;
  filter: brightness(0.45) saturate(0.3);
  transition: filter 0.5s ease;
}

/* フォーカス（キーボード） */
.kami-card:focus-visible {
  outline: 2px solid var(--kc-gold);
  outline-offset: 3px;
  border-radius: var(--kc-radius-card);
}

/* ================================================================
   ⑤ カード内部（3D flip 軸）
   ================================================================ */
.kami-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--kc-flip-dur) cubic-bezier(0.4, 0, 0.2, 1);
}

.kami-card.is-flipped .kami-card-inner {
  transform: rotateY(180deg);
}

/* ================================================================
   ⑥ カード面（表・裏 共通）
   ================================================================ */
.kami-card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--kc-radius-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ================================================================
   ⑦ 裏面（初期表示 — card.png 画像使用）
   ================================================================ */
.kami-card-face--back {
  background-image: url('../images/card.png');
  background-size: cover;
  background-position: center top;
  border: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

/* 画像内のデザインと重複するため非表示 */
.card-back-torii,
.card-back-label {
  display: none;
}

/* ホバー時: 金色グロー */
.kami-card:hover:not(.is-disabled) .kami-card-face--back {
  box-shadow:
    0 0 22px rgba(201, 168, 76, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.65);
}

/* ================================================================
   ⑧ 表面（フリップ後 — 神様画像 + 情報）
   ================================================================ */
.kami-card-face--front {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #0a0d1e 0%, #0f1535 55%, #1a2050 100%);
  border: 1px solid rgba(201, 168, 76, 0.55);
  box-shadow:
    0 0 18px rgba(201, 168, 76, 0.25),
    0 4px 20px rgba(0, 0, 0, 0.6);
  padding: 0;
  justify-content: flex-start;
}

/* 神様画像（カード上部 64%） */
.card-god-img {
  width: 100%;
  height: 64%;
  object-fit: cover;
  object-position: center top;
  display: block;
  flex-shrink: 0;
}

/* 神様情報ボックス（画像下） */
.card-god-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  gap: 3px;
  width: 100%;
  background: linear-gradient(
    0deg,
    rgba(4, 6, 15, 0.82) 0%,
    rgba(10, 13, 30, 0.55) 100%
  );
}

/* 神様名 */
.card-god-name {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(8px, 1.8vw, 12px);
  font-weight: 400;
  color: var(--kc-gold-light);
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: center;
}

/* キーワード */
.card-god-keyword {
  font-size: clamp(5.5px, 1.2vw, 8px);
  color: var(--kc-text-sub);
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.4;
  max-width: 92%;
}

/* 選択済みカードの輝き */
.kami-card.is-selected .kami-card-face--front {
  border-color: rgba(245, 233, 192, 0.85);
  box-shadow:
    0 0 24px rgba(201, 168, 76, 0.55),
    0 0 48px rgba(201, 168, 76, 0.22),
    0 4px 20px rgba(0, 0, 0, 0.6);
}

/* ================================================================
   ⑨ 光バーストエフェクト
   ================================================================ */
.kami-light-burst {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(245, 233, 192, 0.92) 0%,
    rgba(201, 168, 76,  0.50) 30%,
    rgba(201, 168, 76,  0.10) 60%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 20;
  animation: kcLightBurst 0.75s ease-out forwards;
}

@keyframes kcLightBurst {
  0%   { opacity: 0; transform: scale(0.2); }
  20%  { opacity: 1; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* ================================================================
   ⑩ 結果パネル
   ================================================================ */
.kami-result-panel {
  margin-top: 52px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s ease, transform 0.85s ease;
  pointer-events: none;
}

.kami-result-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ─ パネル内側 ─ */
.kami-result-inner {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(201, 168, 76, 0.06) 0%,
      transparent 55%),
    linear-gradient(160deg, #0a0d1e 0%, #0f1535 55%, #1a2050 100%);
  border: 1px solid rgba(201, 168, 76, 0.38);
  border-radius: 14px;
  padding: clamp(24px, 5vw, 48px) clamp(20px, 5vw, 48px);
  text-align: center;
  box-shadow:
    0 0 50px rgba(201, 168, 76, 0.08),
    inset 0 0 80px rgba(0, 0, 0, 0.35);
}

/* ─ ヘッダー ─ */
.kami-result-header {
  margin-bottom: 28px;
}

/* 神様画像（浮遊アニメ） */
.kami-result-img {
  display: block;
  width: clamp(100px, 22vw, 160px);
  height: clamp(100px, 22vw, 160px);
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.65);
  box-shadow:
    0 0 22px rgba(201, 168, 76, 0.40),
    0 0 55px rgba(201, 168, 76, 0.15);
  margin: 0 auto 20px;
  animation: kcSymbolFloat 3.5s ease-in-out infinite;
}

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

/* 神様名 */
.kami-result-name {
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  font-weight: 400;
  color: var(--kc-gold-pale);
  letter-spacing: 0.2em;
  margin: 0 0 6px;
  text-shadow: 0 0 20px var(--kc-gold-glow);
}

/* ローマ字 */
.kami-result-romanji {
  font-size: clamp(0.7rem, 2vw, 0.85rem);
  color: var(--kc-text-sub);
  letter-spacing: 0.25em;
  margin: 0 0 16px;
}

/* キーワードバッジ */
.kami-result-keyword {
  display: inline-block;
  border: 1px solid rgba(201, 168, 76, 0.48);
  padding: 6px 22px;
  border-radius: 20px;
  font-size: clamp(0.8rem, 2.2vw, 0.95rem);
  color: var(--kc-gold);
  letter-spacing: 0.18em;
  background: rgba(201, 168, 76, 0.06);
}

/* ─ 区切り線 ─ */
.kami-result-divider {
  width: 80px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 168, 76, 0.55),
    transparent
  );
  margin: 28px auto;
}

/* ─ 短メッセージ ─ */
.kami-result-short-msg {
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 400;
  color: var(--kc-gold-pale);
  letter-spacing: 0.08em;
  line-height: 2;
  margin: 0 0 8px;
}

/* ─ 深層メッセージ ─ */
.kami-result-deep-label {
  font-size: clamp(0.7rem, 1.8vw, 0.8rem);
  letter-spacing: 0.35em;
  color: rgba(201, 168, 76, 0.55);
  margin: 0 0 10px;
}

.kami-result-deep-msg {
  font-size: clamp(0.82rem, 2.3vw, 0.95rem);
  color: var(--kc-text-body);
  line-height: 2.1;
  letter-spacing: 0.05em;
  text-align: justify;
  margin: 0;
}

/* ─ 今日の行動 ─ */
.kami-result-action-box {
  margin-top: 28px;
  background: rgba(201, 168, 76, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 10px;
  padding: clamp(16px, 3vw, 24px) clamp(16px, 4vw, 28px);
}

.kami-result-action-label {
  font-size: clamp(0.7rem, 1.8vw, 0.8rem);
  letter-spacing: 0.35em;
  color: var(--kc-gold);
  margin: 0 0 10px;
}

.kami-result-action-text {
  font-size: clamp(0.82rem, 2.3vw, 0.95rem);
  color: var(--kc-gold-light);
  line-height: 2;
  letter-spacing: 0.05em;
  margin: 0;
}

/* ─ もう一度ボタン ─ */
.kami-retry-btn {
  display: inline-block;
  margin-top: 32px;
  padding: 13px 36px;
  border: 1px solid rgba(201, 168, 76, 0.48);
  border-radius: 26px;
  background: transparent;
  color: var(--kc-gold);
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(0.82rem, 2.2vw, 0.95rem);
  letter-spacing: 0.25em;
  cursor: pointer;
  transition: background 0.28s ease, border-color 0.28s ease,
              color 0.28s ease, box-shadow 0.28s ease;
}

.kami-retry-btn:hover,
.kami-retry-btn:focus-visible {
  background: rgba(201, 168, 76, 0.12);
  border-color: rgba(201, 168, 76, 0.8);
  color: var(--kc-gold-pale);
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.22);
  outline: none;
}

/* ================================================================
   ⑪ 将来: 会員限定メッセージ枠（非表示デフォルト）
   ================================================================ */
.kami-result-member-msg {
  display: none;           /* PMPro 会員ログイン時に JS で表示 */
  margin-top: 20px;
  border-top: 1px solid rgba(201, 168, 76, 0.22);
  padding-top: 20px;
}

/* ================================================================
   ⑫ 将来: レアカード演出（クラス is-rare, is-ultra-rare）
   ================================================================ */
/* 例: .kami-card.is-ultra-rare .kami-card-face--back { ... } */

/* ================================================================
   ⑬ アクセシビリティ — モーション軽減
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .kami-card,
  .kami-card-inner,
  .kami-card:hover:not(.is-disabled),
  .kami-result-panel,
  .kami-result-symbol,
  .kami-light-burst { animation: none !important; transition: none !important; }
}