/* =====================================================
 * じぶんトリセツ診断  –  shindan.css
 * スマホファースト設計
 * ===================================================== */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&family=M+PLUS+Rounded+1c:wght@400;700;900&display=swap');

/* ── CSS変数 ── */
#torisetu-app {
  --bg:      #fff8f0;
  --card:    #ffffff;
  --ink:     #2d2020;
  --muted:   #8a7a7a;
  --a1:      #ff6b6b;
  --a2:      #ffd93d;
  --a3:      #6bcfff;
  --a4:      #a29bfe;
  --border:  #e8d5c0;
  --radius:  16px;
  --font:    'M PLUS Rounded 1c', sans-serif;
}

/* ── ベース ── */
#torisetu-app {
  font-family: var(--font);
  background:  var(--bg);
  color:       var(--ink);
  position:    relative;
  padding:     0 16px 48px;
  max-width:   640px;
  margin:      0 auto;
  -webkit-tap-highlight-color: transparent;
}

/* 水玉背景 */
#torisetu-app::before {
  content:    '';
  position:   fixed;
  inset:      0;
  background: radial-gradient(circle, #e8d5c0 1px, transparent 1px) 0 0 / 28px 28px;
  opacity:    .45;
  pointer-events: none;
  z-index:    0;
}

/* =====================================================
 * スタート画面
 * ===================================================== */
#ts-start {
  position: relative;
  z-index:  1;
  animation: ts-fadeIn .5s ease;
}

/* ヘッダー */
.ts-header         { text-align: center; padding: 32px 0 24px; }
.ts-badge          {
  display: inline-block;
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  padding: 4px 14px; border-radius: 999px; margin-bottom: 14px;
}
.ts-title {
  font-family: 'Zen Kurenaido', serif;
  font-size: clamp(38px, 10vw, 64px);
  line-height: 1.1; letter-spacing: -1px;
}
.ts-title span     { color: var(--a1); }
.ts-subtitle       { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.8; }

/* カード共通 */
.ts-card {
  background:    var(--card);
  border:        2px solid var(--border);
  border-radius: var(--radius);
  padding:       22px 20px;
  margin-bottom: 16px;
  position:      relative; z-index: 1;
}
.ts-card-title     { font-size: 17px; font-weight: 900; margin-bottom: 10px; }
.ts-card-text      { font-size: 14px; line-height: 1.9; color: var(--muted); }
.ts-card-text-sm   { font-size: 13px; line-height: 1.8; color: var(--muted); margin-bottom: 14px; }
.ts-card-text strong { color: var(--ink); }

/* スペックチップ */
.ts-specs-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-top: 16px;
}
.ts-spec-chip {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  font-size: 12px;
}
.ts-spec-emoji { font-size: 24px; display: block; margin-bottom: 4px; }
.ts-spec-chip strong { font-weight: 900; display: block; font-size: 12px; }
.ts-spec-chip span   { font-size: 11px; color: var(--muted); }

/* スタートボタン */
.ts-btn-start {
  display: block; width: 100%;
  background: var(--ink); color: #fff;
  border: none; border-radius: var(--radius);
  font-family: var(--font); font-size: 18px; font-weight: 900;
  padding: 22px; cursor: pointer;
  box-shadow: 0 4px 0 #1a1010;
  letter-spacing: 1px;
  transition: transform .12s, box-shadow .12s;
  position: relative; z-index: 1;
}
.ts-btn-start:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a1010; }

/* =====================================================
 * 設問画面
 * ===================================================== */
#ts-quiz { position: relative; z-index: 1; }

/* プログレスバー */
.ts-progress-wrap { margin-bottom: 18px; }
.ts-progress-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.ts-progress-label { font-size: 13px; color: var(--muted); }
.ts-progress-count { font-size: 22px; font-weight: 900; color: var(--ink); }
.ts-progress-bg    { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.ts-progress-fill  {
  height: 100%;
  background: linear-gradient(90deg, var(--a1), var(--a2));
  border-radius: 999px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* セクションタグ */
.ts-section-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; padding: 4px 12px; border-radius: 999px;
  margin-bottom: 12px; color: #fff;
}
.ts-tag-energy { background: var(--a1); }
.ts-tag-logic  { background: #ff9f43; }
.ts-tag-task   { background: var(--a3); color: var(--ink); }
.ts-tag-mental { background: var(--a4); }

/* 設問カード */
.ts-question-card {
  background: var(--card); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 18px 16px 16px;
  margin-bottom: 12px;
  animation: ts-slideUp .3s cubic-bezier(.4,0,.2,1);
}
.ts-q-num  { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.ts-q-text { font-size: 16px; font-weight: 700; line-height: 1.75; margin-bottom: 16px; }

/* 回答ボタン */
.ts-answer-grid { display: grid; gap: 8px; }
.ts-answer-btn {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 2px solid var(--border);
  border-radius: 10px;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  color: var(--ink); padding: 13px 14px; cursor: pointer;
  text-align: left; width: 100%; min-height: 48px;
  transition: border-color .1s, background .1s, transform .1s;
  -webkit-appearance: none;
}
.ts-answer-btn:active  { transform: scale(.98); border-color: var(--a1); background: #fff0f0; }
.ts-answer-btn.selected { border-color: var(--a1); background: #fff0f0; }

/* ラジオドット */
.ts-dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid var(--border);
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
}
.ts-dot.filled,
.ts-answer-btn.selected .ts-dot {
  background: var(--a1); border-color: var(--a1);
}

/* =====================================================
 * ローディング画面
 * ===================================================== */
#ts-loading {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh;
}
.ts-loading-inner  { text-align: center; width: 100%; }
.ts-loading-gear   { font-size: 64px; display: block; animation: ts-spin 2s linear infinite; }
.ts-loading-title  { font-family: 'Zen Kurenaido', serif; font-size: 26px; margin: 18px 0 8px; }
.ts-loading-msg    { font-size: 14px; color: var(--muted); min-height: 22px; }
.ts-loading-bar-bg {
  margin: 22px auto 0;
  max-width: 280px; height: 6px;
  background: var(--border); border-radius: 999px; overflow: hidden;
}
.ts-loading-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--a1), var(--a2));
  border-radius: 999px; transition: width .45s;
}

/* =====================================================
 * 結果画面
 * ===================================================== */
#ts-result { position: relative; z-index: 1; }

/* 結果ヘッダー */
.ts-result-header  { text-align: center; padding: 24px 0 20px; }
.ts-result-badge {
  display: inline-block; background: var(--a1); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  padding: 4px 14px; border-radius: 999px; margin-bottom: 12px;
}
.ts-result-typename {
  font-family: 'Zen Kurenaido', serif;
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1.3; color: var(--ink);
}
.ts-result-typesub { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* セクションタイトル */
.ts-section-title  { font-size: 15px; font-weight: 900; margin-bottom: 10px; }

/* スコアチャート */
.ts-score-grid     { display: grid; gap: 12px; }
.ts-score-row {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
}
.ts-score-header   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ts-score-label    { font-size: 13px; font-weight: 900; }
.ts-score-poles    { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ts-pole-hi,.ts-pole-lo { font-size: 10px; color: var(--muted); }
.ts-score-bar-bg   { height: 10px; background: var(--border); border-radius: 999px; overflow: hidden; }
.ts-score-bar-fill {
  height: 100%; width: 0; border-radius: 999px;
  transition: width 1s .3s cubic-bezier(.4,0,.2,1);
}
.ts-score-pct-row  { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.ts-score-typename { font-size: 12px; color: var(--muted); }

/* トリセツカード */
.ts-torisetu-card {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 20px; overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 5px 5px 0 var(--ink);
}

/* カードヘッダー */
.ts-tc-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px;
}
.ts-tc-header-left  { flex: 1; }
.ts-tc-axis-label   { font-size: 10px; letter-spacing: 2px; opacity: .7; font-weight: 700; margin-bottom: 4px; color: #fff; }
.ts-tc-title        { font-family: 'Zen Kurenaido', serif; font-size: 22px; line-height: 1.2; color: #fff; }
.ts-tc-emoji        { font-size: 42px; }

/* カードボディ */
.ts-tc-body         { padding: 20px 20px 18px; }
.ts-tc-desc         { font-size: 14px; line-height: 1.95; color: var(--ink); margin-bottom: 14px; }

/* 詳細説明 */
.ts-tc-detail {
  background: var(--bg); border-left: 3px solid var(--border);
  border-radius: 0 8px 8px 0; padding: 12px 14px;
  font-size: 13px; line-height: 1.85; color: var(--ink);
  margin-bottom: 14px;
}
.ts-detail-label    { font-size: 11px; font-weight: 900; color: var(--muted); display: block; margin-bottom: 6px; }

/* スペック一覧 */
.ts-tc-specs {
  border-top: 1.5px dashed var(--border);
  padding-top: 14px; display: grid; gap: 9px;
  margin-bottom: 14px;
}
.ts-spec-row        { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.65; }
.ts-spec-row-label {
  font-weight: 900; font-size: 11px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 6px; padding: 2px 7px;
  white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}

/* 警告ブロック */
.ts-warning-block {
  background: #fff8e1; border: 2px solid var(--a2);
  border-radius: 12px; padding: 12px 14px;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.75; margin-bottom: 10px;
}
.ts-warning-icon    { font-size: 20px; flex-shrink: 0; }

/* アドバイスブロック */
.ts-advice-block {
  background: #f0fff4; border: 2px solid #6bff9e;
  border-radius: 12px; padding: 12px 14px;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.75;
}
.ts-advice-icon     { font-size: 20px; flex-shrink: 0; }

/* バーコードカード */
.ts-barcode-area    { text-align: center; padding: 16px 10px; }
.ts-barcode-label   { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.ts-bar-line        { font-family: monospace; font-size: 24px; letter-spacing: 3px; line-height: 1.2; color: var(--ink); }
.ts-barcode-num     { font-family: monospace; font-size: 11px; letter-spacing: 2px; color: var(--muted); margin-top: 8px; }
.ts-barcode-note    { font-size: 11px; color: var(--muted); margin-top: 8px; }

/* リトライボタン */
.ts-btn-retry {
  display: block; width: 100%;
  background: transparent; border: 2px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--font); font-size: 15px; font-weight: 900;
  color: var(--ink); padding: 20px; cursor: pointer;
  transition: background .15s, color .15s;
  margin-top: 6px;
}
.ts-btn-retry:active { background: var(--ink); color: #fff; }

/* エラー */
.ts-error { padding: 24px; text-align: center; color: var(--a1); font-weight: 700; }

/* =====================================================
 * アニメーション
 * ===================================================== */
@keyframes ts-fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ts-slideUp { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: translateY(0); } }
@keyframes ts-spin    { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* スクロールReveal */
.ts-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s, transform .5s;
}
.ts-reveal.visible { opacity: 1; transform: translateY(0); }

/* =====================================================
 * 型番コード表示
 * ===================================================== */
.ts-type-code-display {
  font-family: monospace;
  font-size: clamp(38px, 11vw, 60px);
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.ts-code-label-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center; margin: 10px 0 6px;
}
.ts-code-label-chip {
  font-size: 11px; font-weight: 700;
  border: 1.5px solid; border-radius: 999px;
  padding: 3px 10px; background: #fff;
}

/* =====================================================
 * 相性診断セクション
 * ===================================================== */
.ts-compat-wrap, .ts-compat-section {
  margin-top: 8px;
}
.ts-compat-header { text-align: center; padding: 10px 0 18px; }
.ts-compat-badge {
  display: inline-block; background: #ff6b6b; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  padding: 4px 14px; border-radius: 999px; margin-bottom: 10px;
}
.ts-compat-title {
  font-family: 'Zen Kurenaido', serif;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.3; color: var(--ink); margin-bottom: 8px;
}
.ts-code-inline {
  font-family: monospace; font-size: 1.15em;
  font-weight: 900; letter-spacing: 3px;
  background: var(--ink); color: #fff;
  padding: 2px 8px; border-radius: 6px;
}
.ts-compat-sub {
  font-size: 13px; color: var(--muted); line-height: 1.8;
}

/* タブナビ */
.ts-tab-nav {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin-bottom: 16px;
}
.ts-tab-btn {
  background: var(--card); border: 2px solid var(--border);
  border-radius: 10px;
  font-family: var(--font); font-size: 12px; font-weight: 700;
  color: var(--muted); padding: 10px 4px; cursor: pointer;
  transition: all .15s; text-align: center;
  -webkit-appearance: none;
}
.ts-tab-btn.active {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.ts-tab-btn:active { transform: scale(.97); }

/* タブイントロ */
.ts-tab-intro {
  font-size: 13px; line-height: 1.85; color: var(--muted);
  background: var(--bg); border-left: 3px solid var(--border);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px; margin-bottom: 16px;
}
.ts-tab-intro strong { color: var(--ink); }

/* サブタイトル */
.ts-compat-subtitle {
  font-size: 14px; font-weight: 900;
  color: var(--ink); margin: 0 0 10px;
}

/* 相性カード共通 */
.ts-compat-card {
  background: var(--card);
  border-radius: 14px; overflow: hidden;
  margin-bottom: 14px;
  border: 2px solid var(--border);
}
.ts-compat-good    { border-color: #6bff9e; }
.ts-compat-caution { border-color: var(--a2); }
.ts-compat-fire    { border-color: #ff6b6b; }

.ts-compat-card-header {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 12px 14px 8px;
}
.ts-compat-card-left {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.ts-compat-code {
  font-family: monospace; font-size: 15px; font-weight: 900;
  letter-spacing: 2px; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 6px; padding: 2px 7px; flex-shrink: 0;
}
.ts-compat-type-name {
  font-size: 14px; font-weight: 900; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-compat-score-badge {
  font-size: 12px; font-weight: 900;
  padding: 4px 10px; border-radius: 999px;
  color: var(--ink); white-space: nowrap; flex-shrink: 0;
}
.ts-compat-type-desc {
  font-size: 12px; color: var(--muted); line-height: 1.7;
  padding: 0 14px 8px;
}

/* 相性スコアバー */
.ts-compat-bar-wrap { padding: 0 14px 10px; }
.ts-compat-bar-bg {
  height: 8px; background: var(--border);
  border-radius: 999px; overflow: hidden;
}
.ts-compat-bar-fill {
  height: 100%; width: 0; border-radius: 999px;
  transition: width .9s .2s cubic-bezier(.4,0,.2,1);
}

/* 理由テキスト */
.ts-compat-reasons {
  padding: 10px 14px 12px;
  border-top: 1.5px dashed var(--border);
}
.ts-compat-label {
  font-size: 11px; font-weight: 900; color: var(--muted);
  letter-spacing: 1px; margin-bottom: 6px;
}
.ts-compat-reason-text {
  font-size: 13px; line-height: 1.8; color: var(--ink);
  margin-bottom: 6px;
}
.ts-compat-summary {
  font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--bg); border-radius: 8px;
  padding: 8px 12px; margin-top: 8px;
  border-left: 3px solid var(--border);
}

/* 対処法ブロック */
.ts-compat-coping {
  display: flex; gap: 8px; align-items: flex-start;
  background: #f0fff4; border: 1.5px solid #6bff9e;
  border-radius: 10px; padding: 10px 12px;
  font-size: 13px; line-height: 1.75;
  margin: 0 14px 14px;
}
.ts-coping-icon { font-size: 18px; flex-shrink: 0; }

/* 全タイプ摩擦度一覧 */
.ts-compat-all-list { display: grid; gap: 8px; }
.ts-compat-all-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.ts-compat-all-left {
  display: flex; align-items: center; gap: 7px;
  width: 140px; flex-shrink: 0;
}
.ts-compat-code-sm {
  font-family: monospace; font-size: 12px; font-weight: 900;
  letter-spacing: 1px; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 4px; padding: 1px 5px; flex-shrink: 0;
}
.ts-compat-name-sm {
  font-size: 11px; color: var(--muted); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-compat-all-bar-wrap {
  flex: 1; display: flex; align-items: center; gap: 8px;
}
.ts-compat-bar-sm { height: 6px; flex: 1; }
.ts-compat-all-pct {
  font-size: 11px; font-weight: 900; color: var(--ink);
  width: 30px; text-align: right; flex-shrink: 0;
}

/* =====================================================
 * 相性カード追加スタイル
 * ===================================================== */
.ts-compat-score-wrap {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex-shrink: 0;
}
.ts-compat-star {
  font-size: 13px; letter-spacing: 1px; font-weight: 900;
}
.ts-compat-score-num {
  font-size: 18px; font-weight: 900; color: var(--ink);
}
.ts-compat-subtitle-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.ts-compat-subtitle-icon { font-size: 18px; flex-shrink: 0; }