/*
 * デュエリストタイプ診断 — スタイル骨組み
 * アートディレクション: 案B（エディトリアル/トレカ風 称号カード）＋ 案C一滴（懐古質感）
 * 規律: anti-template / 意図的な階層・余白・タイポ / hover・focus・active を必ず設計 /
 *       タイプ非依存（タイプ固有色は --type-accent 経由でJSが流し込む）。
 * ⚠ 仮パレット。grillでブランドカラー＆type6色が確定したらトークンを差し替え。
 */

/* ============================ トークン ============================ */
:root {
  /* 仮ブランドパレット（夢元＝ノスタルジー×信頼感を意図した暗色ベース） */
  --bg:            #14110f;          /* 深い墨／古い卓の色 */
  --bg-raised:     #1d1916;
  --surface:       #262019;
  --ink:           #f3ece0;          /* 生成りの白 */
  --ink-dim:       #b8ab97;
  --line:          #3a2f25;
  --accent:        #c9a14a;          /* 箔押しゴールド（共通アクセント） */
  --type-accent:   var(--accent);    /* JSがtype固有色を流し込む。未設定時はゴールド */

  --font-display: "Zen Old Mincho", "Yu Mincho", serif;
  --font-body:    "Zen Kaku Gothic New", system-ui, sans-serif;

  --text-eyebrow: 0.78rem;
  --text-body:    clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --text-title:   clamp(2rem, 1.4rem + 3vw, 3.4rem);
  --text-card:    clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);

  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-section: clamp(2rem, 1.5rem + 4vw, 4rem);

  --radius: 14px;
  --radius-card: 20px;
  --dur: 240ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --maxw: 30rem;
}

/* ============================ ベース ============================ */
* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background:
    radial-gradient(120% 80% at 50% -10%, #2a2118 0%, var(--bg) 55%) fixed,
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 懐古質感（案C一滴）: 微細なグレイン。compositorに優しい固定背景 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#app {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-section) var(--space-3);
  display: flex;
  align-items: center;
}

.screen {
  width: 100%;
  animation: rise var(--dur) var(--ease);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================ タイポ階層 ============================ */
.eyebrow, .result-eyebrow, .card-eyebrow, .q-count {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.22em;
  text-transform: none;
  color: var(--ink-dim);
  margin: 0 0 var(--space-2);
}

.intro-title, .result-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-title);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  letter-spacing: 0.01em;
}

.result-title { color: var(--type-accent); }

.tagline {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.6vw, 1.35rem);
  color: var(--ink);
  margin: 0 0 var(--space-3);
  line-height: 1.6;
}

.intro-lead { color: var(--ink-dim); margin: 0 0 var(--space-4); }

.meta-note, .cta-note { font-size: 0.8rem; color: var(--ink-dim); margin: var(--space-2) 0 0; }

/* ============================ ボタン ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius);
  padding: 0.95rem 1.6rem;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px; /* タップ可能領域をWCAG推奨44pxへ */
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:focus-visible { outline: 2px solid var(--type-accent); outline-offset: 3px; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #e0c073);
  color: #1a140b;
  box-shadow: 0 10px 26px -12px rgba(201, 161, 74, 0.7);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(201,161,74,0.8); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--line);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--type-accent); }

.btn-share {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-share:hover { border-color: var(--type-accent); transform: translateY(-2px); }

.btn-cta {
  background: var(--type-accent);
  color: #160f06;
  width: 100%;
  box-shadow: 0 12px 28px -14px var(--type-accent);
}
.btn-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-cta:active { transform: translateY(0); }

/* ============================ 設問 ============================ */
.progress {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.progress-bar {
  display: block;
  height: 100%;
  background: var(--type-accent);
  transition: width var(--dur) var(--ease);
}

.q-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + 1.4vw, 1.9rem);
  line-height: 1.45;
  margin: 0 0 var(--space-4);
}

.options { display: flex; flex-direction: column; gap: var(--space-2); }

.option {
  text-align: left;
  background: var(--bg-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem 1.2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.option:hover { border-color: var(--type-accent); transform: translateX(4px); background: var(--surface); }
.option:active { transform: translateX(2px) scale(0.995); }
.option:focus-visible { outline: 2px solid var(--type-accent); outline-offset: 2px; }
.option.is-selected { border-color: var(--type-accent); background: var(--surface); }

.q-nav { margin-top: var(--space-4); }

/* ============================ 結果 称号カード ============================ */
.result-card {
  --card-accent: var(--type-accent);
  margin: var(--space-3) 0 var(--space-4);
  perspective: 1000px;
}

.card-frame {
  position: relative;
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25)),
    var(--surface);
  /* 箔押し風の二重枠（オリジナル枠・実カード枠を模倣しない抽象装飾） */
  /* フォールバック: color-mix非対応の旧WebViewでも枠・グローが消えないよう先に素の値を置く */
  border: 1px solid var(--card-accent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 55%, var(--line));
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4) inset,
    0 24px 60px -28px var(--card-accent),
    0 0 40px -20px var(--card-accent);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4) inset,
    0 24px 60px -28px color-mix(in srgb, var(--card-accent) 70%, transparent),
    0 0 40px -20px color-mix(in srgb, var(--card-accent) 60%, transparent);
  overflow: hidden;
}
/* ホロ風の斜めハイライト（案C一滴） */
.card-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%,
    color-mix(in srgb, var(--card-accent) 18%, transparent) 50%, transparent 65%);
  mix-blend-mode: screen;
}

.card-eyebrow {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--ink-dim);
  margin-bottom: var(--space-3);
}
.card-symbol {
  font-size: clamp(3rem, 2rem + 6vw, 5rem);
  line-height: 1;
  color: var(--card-accent);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--card-accent) 60%, transparent));
  margin-bottom: var(--space-2);
}
.card-subtitle {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  margin: 0 0 0.3rem;
}
.card-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-card);
  margin: 0 0 var(--space-2);
  color: var(--ink);
}
.card-catch {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--card-accent);
  margin: 0;
}

.result-body { color: var(--ink-dim); margin: 0 0 var(--space-4); }

.share-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.share-row .btn { flex: 1; min-width: 8rem; }

/* 極小幅(〜360px)では2ボタンが潰れる→縦積みで読みやすさ優先 */
@media (max-width: 360px) {
  .share-row { flex-direction: column; }
  .share-row .btn { flex: none; width: 100%; }
}

/* ============================ CTA ============================ */
.cta-block {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
  text-align: center;
}
.cta-lead { font-family: var(--font-display); margin: 0 0 var(--space-3); }

/* ============================ フッター / エラー ============================ */
.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-3);
  font-size: 0.72rem;
  color: var(--ink-dim);
  opacity: 0.7;
}

.error-detail {
  font-family: ui-monospace, monospace;
  color: #e08c8c;
  background: rgba(0,0,0,0.3);
  padding: var(--space-2);
  border-radius: var(--radius);
}