/**
 * Frontend Polish Phase2 — Visual QA
 * Figmaモック準拠の差分吸収（レイアウト構造は維持、トークン/余白/タップのみ）
 */

:root {
  /* ダークテーマ可読性: モックより一段明るい muted */
  --muted: #b0b6c2;
  --vqa-tap: 44px;
  --vqa-motion: 0.34s;
}

/* —— 共通: 余白・セーフエリア —— */
.page-home .home-chrome,
.page-screen .screen,
.page-races .screen {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.page-race-detail .screen {
  /* マスコット＋FAB＋ナビと本文の干渉を避ける */
  padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  gap: 12px;
}

.page-analysis .screen {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  gap: 14px;
}

.page-chat .chat-shell {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* —— タップ領域（44px 目安） —— */
.chip,
.tab-pill {
  min-height: var(--vqa-tap);
  height: auto;
  padding: 0 14px;
  font-size: 13px;
}

.date-tabs .tab-pill {
  min-width: 72px;
}

.race-item .fav-btn,
.fav-btn--icon {
  min-width: var(--vqa-tap);
  min-height: var(--vqa-tap);
  width: var(--vqa-tap);
  height: var(--vqa-tap);
  top: 6px;
  right: 6px;
}

.btn-detail {
  min-height: 36px;
  height: 36px;
  padding: 0 14px;
  font-size: 12px;
}

.chat-send {
  min-width: var(--vqa-tap);
  min-height: var(--vqa-tap);
}

.back-btn {
  min-width: var(--vqa-tap);
  min-height: var(--vqa-tap);
}

/* —— 文字サイズ / 視認性 —— */
.race-item-name {
  font-size: 13.5px;
  color: #c5cad4;
}

.race-item-meta {
  font-size: 12px;
  color: #b8bec8;
}

.analysis-lead,
.heat-note,
.race-filters-note {
  font-size: 12px;
  color: #b8bec8;
  line-height: 1.55;
}

.honmei-card h2 {
  font-size: 17px;
  letter-spacing: 0.01em;
}

.honmei-card p {
  font-size: 12.5px;
  color: #c2c8d2;
}

.score-row {
  gap: 10px;
  font-size: 12.5px;
}

.score-list {
  gap: 12px;
}

.score-row span {
  color: #c2c8d2;
}

.score-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.chart-card {
  padding: 14px;
}

.chart-card h3 {
  font-size: 14px;
  margin-bottom: 8px;
}

.fav-empty,
.fav-ai-empty p,
.pie-legend-empty,
.race-list-empty {
  color: #c0c6d0;
  font-size: 13px;
  line-height: 1.55;
}

/* —— レース詳細: 本命カード（Figma寄り） —— */
.page-race-detail .honmei-card {
  padding: 16px;
  gap: 14px;
  border-color: rgba(193, 162, 109, 0.34);
}

.page-race-detail .honmei-num {
  width: 52px;
  height: 52px;
  font-size: 28px;
}

.page-race-detail .pace-card {
  padding: 14px;
}

.page-race-detail .pace-card p {
  font-size: 13px;
  line-height: 1.6;
  color: #d0d5de;
}

.page-race-detail .fab-bet {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* 吹き出しが評価バーを覆わないよう短く・薄く */
.page-race-detail .mascot-ka0ba .mascot-bubble,
.page-analysis .mascot-ka0ba .mascot-bubble {
  max-width: min(168px, 46vw);
  font-size: 0.68rem;
  max-height: 5.6rem;
  overflow: hidden;
}

.page-race-detail .mascot-ka0ba {
  --mascot-h: clamp(96px, 18vh, 132px);
}

/* —— レース一覧カード —— */
.race-item {
  min-height: 96px;
  padding: 14px 12px 12px;
}

.race-conf {
  font-size: 28px;
  min-width: 80px;
}

.race-conf small {
  font-size: 10.5px;
}

/* —— ホーム —— */
.page-home .ai-cards {
  gap: 12px;
}

.page-home .ai-desc {
  font-size: 12px;
  color: #c5cad4;
  line-height: 1.45;
}

.page-home .fav-panel {
  border-color: rgba(193, 162, 109, 0.32);
}

.page-home .dash-label,
.page-home .dash-rank {
  font-size: 12px;
}

/* —— AI分析 —— */
.page-analysis .pie-layout {
  gap: 14px;
  align-items: center;
}

.page-analysis .pie-legend li {
  font-size: 12.5px;
  gap: 8px;
}

.page-analysis .fav-ai-empty {
  padding: 28px 16px;
}

.page-analysis .fav-ai-card {
  padding: 14px;
}

/* —— KAOBA —— */
.page-chat .chat-live2d-slot {
  margin: 0 0 6px;
  padding: 8px 10px;
  font-size: 10.5px;
  opacity: 0.92;
  border-style: solid;
  border-color: rgba(193, 162, 109, 0.28);
  background: rgba(16, 20, 28, 0.72);
}

.page-chat .chat-log {
  gap: 12px;
  scroll-padding-bottom: 12px;
}

.page-chat .msg-bubble {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 11px 13px;
}

.page-chat .chat-quick {
  padding-bottom: 4px;
}

.page-chat #chatInput {
  min-height: var(--vqa-tap);
  font-size: 15px;
}

/* —— アニメーション速度（落ち着いたモック感） —— */
@keyframes expect-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.race-item,
.msg,
.fav-ai-card,
.page-race-detail .screen > * {
  animation-duration: var(--vqa-motion);
}

.expect-skel {
  animation-duration: 1.45s;
}

.msg-typing__dot {
  animation-duration: 1.15s;
}

.score-bar > i {
  transition-duration: 0.65s;
}

.ai-card,
.race-item {
  transition-duration: 0.22s;
}

/* —— ローディング —— */
.expect-skel--card {
  height: 96px;
  border-radius: var(--radius, 16px);
}

.honmei-card.is-loading {
  border-style: dashed;
  border-color: rgba(193, 162, 109, 0.4);
}

.chart-card.is-loading .score-bar {
  opacity: 0.55;
}

/* —— レスポンシブ微調整 —— */
@media (max-width: 360px) {
  :root { --pad: 12px; }

  .race-conf {
    font-size: 24px;
    min-width: 72px;
    padding: 6px 8px;
  }

  .score-row {
    grid-template-columns: 76px 1fr auto;
    font-size: 12px;
  }

  .chip,
  .tab-pill {
    font-size: 12px;
    padding: 0 11px;
  }
}

@media (min-width: 430px) {
  .page-race-detail .honmei-card {
    padding: 18px 16px;
  }
}

/* コントラスト: ヒートマップ数値 */
.heatmap-table .hv,
.cond-table td {
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}