/* ============================================================
   layout.css — ページ構造・フォーム・ボタン・結果グリッドの配置
   ============================================================ */

:root {
  /* 追加質問のミニカード用の縮小カード幅（結果グリッドの --card-w の約60%）。
     tokens.css の --card-w を直接書き換えず、派生トークンとしてここで定義する。 */
  --followup-card-w: clamp(54px, 7.2vw, 90px);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- ヘッダー ---- */
header {
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  text-align: center;
  max-width: var(--content-max-width);
  margin: 0 auto;
  width: 100%;
}

.site-title {
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-sm);
}

.site-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 5.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

.site-tagline {
  display: block;
  margin-top: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--text-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

/* ---- メイン ---- */
main {
  flex: 1;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-section);
  display: flex;
  flex-direction: column;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

section[hidden] {
  display: none;
}

/* 項目2: 画面クロスフェード。
   a11y.js が旧画面へ .screen-leave（opacity 0 へ）を付与し、transitionend 後に
   hidden 切替 → 新画面へ .screen-enter（0 の初期値）を一瞬付けて 0→1 させる。
   フォーカス管理は a11y.js が維持する。reduced-motion は下部で即時化する。 */
main > section {
  opacity: 1;
  transition: opacity 350ms var(--ease-out-expo);
}

main > section.screen-leave {
  opacity: 0;
}

main > section.screen-enter {
  opacity: 0;
  transition: none;
}

/* ---- 質問入力画面 ---- */
#screen-question {
  padding-top: var(--space-lg);
}

#question-form {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-raised) 100%);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

#question-form label {
  font-family: var(--font-heading-ja);
  color: var(--accent-gold-soft);
  letter-spacing: var(--letter-spacing-wide);
  font-size: var(--text-lg);
}

#question-input {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  background: rgba(11, 7, 20, 0.55);
  border: 1px solid rgba(169, 155, 208, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  line-height: var(--line-height-body);
  transition: border-color var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}

#question-input::placeholder {
  color: var(--text-muted);
}

#question-input:focus-visible {
  border-color: var(--accent-gold);
  box-shadow: var(--glow-gold);
  outline: none;
}

/* ---- ボタン共通 ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent-gold-soft);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-heading-ja);
  letter-spacing: var(--letter-spacing-wide);
  font-size: var(--text-base);
  transition: transform var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-normal) var(--ease-out-expo),
    color var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}

.btn:hover {
  background: var(--accent-gold);
  color: var(--bg-void);
  transform: translateY(-2px);
  box-shadow: var(--glow-gold);
}

.btn:active {
  transform: translateY(0);
}

/* 金ボタン: 多段グラデ + ベベル + 光沢スイープ（hero の占うボタンと質感を統一） */
.btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #2A1B08;
  background: linear-gradient(
    180deg,
    #FCF3D8 0%,
    #F3E1AB 26%,
    #E4C67F 52%,
    #D2A659 78%,
    #B8863C 100%
  );
  border: 1px solid #A8792F;
  text-shadow: 0 1px 0 rgba(255, 248, 224, 0.6);
  box-shadow:
    0 8px 22px rgba(120, 84, 24, 0.38),
    0 0 0 1px rgba(248, 236, 198, 0.3),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.8),
    inset 0 -2px 3px rgba(120, 84, 24, 0.42);
}

/* 斜めの光沢帯（hover で走らせる。transform/opacity のみ） */
.btn-primary::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 40%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.14) 60%,
    transparent 100%
  );
  transform: translateX(0) skewX(-16deg);
  opacity: 0;
  transition: opacity var(--duration-fast) linear;
}

.btn-primary:hover::before {
  opacity: 1;
  animation: btn-gloss-sweep 720ms var(--ease-out-expo);
}

@keyframes btn-gloss-sweep {
  0% { transform: translateX(0) skewX(-16deg); }
  100% { transform: translateX(420%) skewX(-16deg); }
}

.btn-primary:hover {
  color: #2A1B08;
  transform: translateY(-2px);
  box-shadow:
    0 12px 30px rgba(150, 108, 32, 0.5),
    0 0 30px rgba(233, 212, 161, 0.55),
    0 0 0 1px rgba(248, 236, 198, 0.45),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(120, 84, 24, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    0 4px 12px rgba(120, 84, 24, 0.38),
    inset 0 2px 5px rgba(120, 84, 24, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 10px 26px rgba(150, 108, 32, 0.46),
    0 0 0 3px rgba(217, 178, 106, 0.5),
    0 0 26px rgba(233, 212, 161, 0.45),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.85);
}

.btn-ghost {
  border-color: rgba(169, 155, 208, 0.4);
  color: var(--text-muted);
}

.btn-ghost:hover {
  background: rgba(138, 111, 214, 0.16);
  color: var(--text);
  border-color: var(--accent-mystic);
  box-shadow: var(--glow-mystic);
}

#btn-divine {
  align-self: center;
  min-width: 12rem;
}

/* ---- シャッフル演出画面 ---- */
#screen-shuffle {
  min-height: 60vh;
  justify-content: center;
}

#shuffle-stage {
  position: relative;
  width: 100%;
  /* 束（1枚分）とdealグリッド（2行）の両方を収める。固定heightにすると
     グリッドが中央揃えで上下にあふれ、ヘッダーやスキップボタンに重なる。 */
  max-width: var(--content-max-width);
  min-height: clamp(220px, 40vh, 340px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#btn-skip {
  margin-top: var(--space-md);
}

/* ---- 結果画面 ---- */
#screen-result {
  align-items: stretch;
}

#result-capture {
  background: linear-gradient(165deg, var(--surface) 0%, var(--bg-deep) 100%);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

#result-question {
  font-family: var(--font-heading-ja);
  color: var(--text);
  font-size: var(--text-lg);
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
}

#result-text {
  color: var(--text);
  font-size: var(--text-base);
  line-height: var(--line-height-body);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#result-text h3 {
  font-size: var(--text-lg);
  color: var(--accent-gold-soft);
}

/* 総合ガイダンスは見出し+本文を1ブロックにまとめてフェードインさせるため、
   ラッパ内の縦間隔を明示する（#result-text の gap は要素間にしか効かない）。 */
.overall-guidance {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ---- 追加質問スレッド（#result-capture 内。PNG保存対象） ---- */
#followup-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#followup-thread:empty {
  display: none;
}

.followup-q {
  color: var(--accent-gold-soft);
  font-family: var(--font-heading-ja);
  font-size: var(--text-base);
  letter-spacing: var(--letter-spacing-wide);
  padding-top: var(--space-sm);
  border-top: var(--border-hairline);
}

.followup-a {
  color: var(--text);
  font-size: var(--text-base);
  line-height: var(--line-height-body);
}

.followup-error {
  color: var(--danger);
  font-size: var(--text-sm);
}

/* 追加質問のたびに引き直す6枚のミニカード行。
   結果グリッドより小さい専用カード幅トークンを持ち、モバイルは3列2行を維持する。 */
.followup-cards {
  --card-w: var(--followup-card-w);
  position: relative;
  display: grid;
  /* minmax(0,1fr): ラベルのmin-contentがトラック幅を押し広げて容器からはみ出すのを防ぐ */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-xs) var(--space-2xs);
  justify-items: center;
  padding-top: var(--space-sm);
  border-top: var(--border-hairline);
}

.followup-cards figure.card {
  width: 100%;
  max-width: var(--followup-card-w);
}

.followup-cards .card-label {
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
  text-align: center;
  max-width: 100%;
}

.followup-cards .card-orientation {
  font-size: 0.65rem;
}

.followup-pending {
  color: var(--text-muted);
  font-size: var(--text-sm);
  letter-spacing: var(--letter-spacing-wide);
  animation: waiting-pulse 1.8s var(--ease-in-out-soft) infinite;
}

/* ---- 追加質問エリア（#result-capture の外。フォーム・チップ） ---- */
#followup-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

#followup-area[hidden] {
  display: none;
}

#followup-lead {
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

#followup-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
}

#followup-suggestions:empty {
  display: none;
}

.suggestion-chip {
  position: relative;
  border: 1px solid rgba(217, 178, 106, 0.5);
  border-radius: 999px;
  /* 淡い金の面 + 上端のハイライト線で立体感を出す */
  background:
    linear-gradient(180deg, rgba(233, 212, 161, 0.16) 0%, rgba(217, 178, 106, 0.06) 100%);
  color: var(--accent-gold-soft);
  padding: var(--space-2xs) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(120, 84, 24, 0.18);
  transition: transform var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-normal) var(--ease-out-expo),
    border-color var(--duration-normal) var(--ease-out-expo),
    color var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}

.suggestion-chip:hover {
  background: linear-gradient(180deg, #F3E1AB 0%, #E4C67F 55%, #D2A659 100%);
  color: #2A1B08;
  border-color: rgba(248, 236, 198, 0.7);
  transform: translateY(-2px);
  text-shadow: 0 1px 0 rgba(255, 248, 224, 0.5);
  box-shadow:
    0 6px 16px rgba(120, 84, 24, 0.34),
    0 0 18px rgba(233, 212, 161, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.suggestion-chip:active {
  transform: translateY(0);
}

.suggestion-chip:focus-visible {
  outline: none;
  box-shadow: var(--glow-gold);
}

.suggestion-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

#followup-form {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* 面色 + 微細ノイズテクスチャ（質問フォームと同じ質感言語） */
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-raised) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
}

/* 内側 1px の淡いハイライト線（二重枠） */
#followup-form::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--radius-lg) - 4px);
  border: 1px solid rgba(233, 212, 161, 0.1);
  pointer-events: none;
}

#followup-input {
  width: 100%;
  resize: vertical;
  background: rgba(11, 7, 20, 0.55);
  border: 1px solid rgba(169, 155, 208, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  color: var(--text);
  line-height: var(--line-height-body);
  transition: border-color var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}

#followup-input::placeholder {
  color: var(--text-muted);
}

#followup-input:focus-visible {
  outline: none;
  border-color: rgba(233, 212, 161, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(233, 212, 161, 0.4),
    0 0 0 1px rgba(217, 178, 106, 0.3),
    0 0 22px rgba(217, 178, 106, 0.3);
}

#followup-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#btn-followup {
  align-self: center;
  min-width: 10rem;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

#result-status {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  min-height: 1.2em;
}

/* ---- フッター ---- */
footer {
  position: relative;
  padding: var(--space-lg);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-xs);
  border-top: none;
}

/* フッター上部の細い金ライン + 中央の星飾り（single border を装飾へ格上げ） */
.footer-ornament {
  display: block;
  width: min(560px, 84vw);
  height: 16px;
  margin: 0 auto var(--space-sm);
  position: relative;
}

.footer-ornament::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(217, 178, 106, 0.5) 30%, rgba(233, 212, 161, 0.7) 50%, rgba(217, 178, 106, 0.5) 70%, transparent);
  opacity: 0.9;
}

/* 中央の小さな四芒星 + 左右の点 */
.footer-ornament::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--accent-gold-soft);
  box-shadow:
    0 0 8px rgba(217, 178, 106, 0.7),
    -22px 0 0 -2.5px var(--accent-gold),
    22px 0 0 -2.5px var(--accent-gold);
}

/* ---- レスポンシブ ---- */
@media (max-width: 480px) {
  header {
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }

  main {
    padding: 0 var(--space-md) var(--space-xl);
  }

  #question-form {
    padding: var(--space-md);
  }

  #followup-form {
    padding: var(--space-sm);
  }

  .followup-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-2xs);
  }

  .result-actions {
    flex-direction: column;
    align-items: stretch;
  }
}