/* =============================================================
   GELATOlab Pairing UI v2 — 風味搭配介面整合樣式
   設計語言：沿用 app.css 酒紅 + 金色 + 象牙白色系
   ============================================================= */

/* ── 三球角色共用色 ──────────────────────────────────────────── */
.role-anchor   { background: #FDF8EE; color: #7A5A1E; border-color: #D4B87A55; }
.role-highlight{ background: #EBF5FF; color: #1D6FA4; border-color: #3498DB55; }
.role-cleanser { background: #EBF9F1; color: #2E7D52; border-color: #2ECC7155; }

/* ══════════════════════════════════════════════════════════════
   整合點 A：分頁使用時機提示列
   ══════════════════════════════════════════════════════════════ */
.pairing-tab-hints {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px;
  background: var(--ivory-dk, #F2EBE0);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--text-sm, #7A6860);
  line-height: 1.4;
}
.ptab-hint { white-space: nowrap; }
.ptab-hint strong { color: var(--text, #1A1018); }
.ptab-hint-sep { color: var(--border-gold, #D4B87A); font-size: 12px; }

/* ══════════════════════════════════════════════════════════════
   SVG 三角形共用
   ══════════════════════════════════════════════════════════════ */
.tri-balance-svg { display: block; flex-shrink: 0; }
.tri-balance-svg .tri-inner-shape { transition: d 0.4s ease, fill 0.3s ease; }
@keyframes _triDotIn { from { r: 0; opacity: 0; } to { opacity: 0.9; } }
.tri-anim circle[fill]:not([fill="none"]) { animation: _triDotIn 0.4s ease forwards; }

/* ══════════════════════════════════════════════════════════════
   整合點 B：推薦組合卡片 → 三球角色視覺區塊
   ══════════════════════════════════════════════════════════════ */
.combo-triangle-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--border, #E8D9C8);
  margin-top: 5px;
}
.combo-tri-visual { flex-shrink: 0; line-height: 0; }
.combo-tri-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.combo-tri-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-sm, #7A6860);
  letter-spacing: 0.3px;
}
.combo-tri-bal {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(62,170,111,0.12);
  color: #2E7D52;
  margin-left: 4px;
}
.combo-tri-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.combo-tri-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.combo-tri-chip-name { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════
   整合點 C：自由配對 → 三球角色引導面板
   ══════════════════════════════════════════════════════════════ */

/* 無選擇時：簡介橫幅（含空三角形預覽） */
.free-tri-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--gold-bg, #FDF8EE);
  border: 1px solid var(--border-gold, #D4B87A);
  border-radius: var(--radius, 12px);
  margin-bottom: 10px;
}
.free-tri-intro-visual {
  flex-shrink: 0;
  line-height: 0;
  opacity: 0.6;
}
.free-tri-intro-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1A1018);
  margin-bottom: 4px;
}
.free-tri-intro-desc {
  font-size: 11.5px;
  color: var(--text-sm, #7A6860);
  line-height: 1.6;
}

/* 角色標籤 badge（簡介與面板共用）*/
.tri-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 12px;
  border: 1px solid transparent;
  vertical-align: middle;
}

/* 有選擇時：角色分析面板 */
.free-tri-panel {
  background: var(--surface, #FFFDFB);
  border: 1.5px solid var(--border-gold, #D4B87A);
  border-radius: var(--radius, 12px);
  padding: 12px 14px;
  margin: 8px 0;
  box-shadow: var(--shadow-gold, 0 4px 20px rgba(200,160,85,.20));
}

.free-tri-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}
.free-tri-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text, #1A1018);
}
.free-tri-count {
  font-size: 11px;
  color: var(--text-sm, #7A6860);
}

/* 三角形 + 食材列表並排佈局 */
.free-tri-layout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 8px;
}
.free-tri-svg-wrap {
  flex-shrink: 0;
  line-height: 0;
  align-self: center;
}
.free-tri-details { flex: 1; min-width: 0; }

/* 已選食材角色行 */
.free-tri-assigned { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.free-tri-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.free-tri-ing-name { font-weight: 600; color: var(--text, #1A1018); flex: 1; }
.free-tri-score {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold, #C8A055);
  font-variant-numeric: tabular-nums;
}

/* 缺角建議行 */
.free-tri-suggests { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.free-tri-suggest-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  padding: 6px 8px;
  background: var(--ivory-dk, #F2EBE0);
  border-radius: 6px;
}
.free-tri-suggest-label { color: var(--text-sm, #7A6860); }
.free-tri-suggest-btn {
  background: var(--surface, #FFFDFB);
  border: 1.5px solid var(--border-gold, #D4B87A);
  color: var(--text-gold, #7A5A1E);
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.free-tri-suggest-btn:hover {
  background: var(--gold-bg, #FDF8EE);
  border-color: var(--gold, #C8A055);
}

/* 三球完備狀態 */
.free-tri-complete {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #2E7D52;
  background: rgba(62,170,111,0.08);
  border: 1px solid rgba(62,170,111,0.2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 6px;
}

/* 自動推薦連結 */
.free-tri-auto-link {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-sm, #7A6860);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.free-tri-calc-btn {
  background: none;
  border: 1px solid var(--burgundy, #7B1528);
  color: var(--burgundy, #7B1528);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11.5px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}
.free-tri-calc-btn:hover { background: var(--burgundy-bg, #FDF0F2); }

/* ══════════════════════════════════════════════════════════════
   功能 1：配對解釋卡片（free 子分頁）
   ══════════════════════════════════════════════════════════════ */
.pairing-explain-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-bg, #FDF8EE);
  border: 1px solid var(--border-gold, #D4B87A);
  color: var(--text-gold, #7A5A1E);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0 4px;
  transition: background 0.15s;
  user-select: none;
}
.pairing-explain-btn:hover { background: var(--gold, #C8A055); color: #fff; border-color: var(--gold, #C8A055); }

.pairing-explain-card {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.32s ease, opacity 0.28s ease, padding 0.28s ease;
  background: var(--surface, #FFFDFB);
  border-left: 3px solid var(--gold, #C8A055);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  margin: 0 8px 0 28px;
  padding: 0 12px;
}
.pairing-explain-card.open { max-height: 480px; opacity: 1; padding: 10px 12px; }

.explain-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.explain-compounds {
  font-size: 11.5px;
  color: var(--text-sm, #7A6860);
  margin-bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.compound-tag {
  background: var(--gold-bg, #FDF8EE);
  border: 1px solid var(--border-gold, #D4B87A);
  color: var(--text-gold, #7A5A1E);
  font-size: 10.5px;
  font-family: 'Courier New', monospace;
  padding: 1px 6px;
  border-radius: 4px;
}
.explain-text { font-size: 12px; color: var(--text, #1A1018); line-height: 1.55; }

/* GL-UX-04: 為什麼搭配 + 風險提醒 */
.explain-reasons { margin-top: 8px; }
.explain-reasons-title {
  font-size: 11.5px; font-weight: 700; color: var(--text-gold, #7A5A1E);
  margin-bottom: 4px; letter-spacing: 0.5px;
}
.explain-reasons-list {
  margin: 0; padding-left: 16px; list-style: '◆ ' outside;
  font-size: 12px; color: var(--text, #1A1018); line-height: 1.55;
}
.explain-reasons-list li { margin: 2px 0; }

.explain-risks {
  margin-top: 8px;
  background: #fff5f0;
  border-left: 3px solid #d35400;
  border-radius: 4px;
  padding: 6px 8px 6px 10px;
}
.explain-risks-title {
  font-size: 11.5px; font-weight: 700; color: #b54200;
  margin-bottom: 2px;
}
.explain-risks-list {
  margin: 0; padding-left: 14px; list-style: disc outside;
  font-size: 11.5px; color: #6b2900; line-height: 1.5;
}
.explain-risks-list li { margin: 1px 0; }

/* ══════════════════════════════════════════════════════════════
   功能 2：驚喜配對（combos 子分頁）
   ══════════════════════════════════════════════════════════════ */
.surprise-section { margin: 10px 0 16px; display: flex; flex-direction: column; gap: 10px; }

.surprise-btn {
  align-self: flex-start;
  background: linear-gradient(135deg, var(--burgundy, #7B1528) 0%, var(--burgundy-lt, #9B2035) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 8px);
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.15s;
  box-shadow: var(--shadow, 0 2px 16px rgba(123,21,40,.10));
}
.surprise-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.surprise-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.surprise-card {
  background: var(--surface, #FFFDFB);
  border: 1.5px solid var(--border, #E8D9C8);
  border-radius: var(--radius, 12px);
  padding: 14px 16px;
  box-shadow: var(--shadow-gold, 0 4px 20px rgba(200,160,85,.20));
}
@keyframes _surprise-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.surprise-card.surprise-anim { animation: _surprise-reveal 0.38s ease forwards; }

.surprise-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.surprise-badge {
  background: var(--burgundy-bg, #FDF0F2);
  color: var(--burgundy, #7B1528);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.surprise-score { font-size: 16px; font-weight: 700; color: var(--gold, #C8A055); }
.surprise-pair  { font-size: 15px; font-weight: 700; color: var(--text, #1A1018); margin-bottom: 5px; }
.surprise-wow   { font-size: 13px; color: var(--text-gold, #7A5A1E); margin-bottom: 6px; }
.surprise-explanation { font-size: 12.5px; color: var(--text-sm, #7A6860); line-height: 1.6; margin-bottom: 10px; }

.surprise-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.surprise-refresh {
  background: none;
  border: 1px solid var(--border-gold, #D4B87A);
  color: var(--text-gold, #7A5A1E);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.surprise-refresh:hover { background: var(--gold-bg, #FDF8EE); }
.surprise-to-free {
  background: var(--burgundy-bg, #FDF0F2);
  border: 1px solid var(--burgundy, #7B1528)30;
  color: var(--burgundy, #7B1528);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.surprise-to-free:hover { background: #f5d6da; }

/* ══════════════════════════════════════════════════════════════
   功能 3：三球黃金三角計算器（combos 子分頁）
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   功能 3：品種相似度矩陣（compare 子分頁）
   ══════════════════════════════════════════════════════════════ */
.similarity-matrix {
  background: var(--surface, #FFFDFB);
  border: 1.5px solid var(--border, #E8D9C8);
  border-radius: var(--radius, 12px);
  padding: 14px 16px;
  margin-top: 16px;
}
.matrix-title { font-size: 13px; font-weight: 700; color: var(--text, #1A1018); margin-bottom: 8px; }
.matrix-legend { display: flex; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.matrix-leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-sm, #7A6860); }
.matrix-leg-sw   { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.matrix-scroll   { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; }
.matrix-table    { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.matrix-corner   { background: transparent; }
.matrix-col-hd   { background: var(--ivory-dk, #F2EBE0); font-weight: 600; font-size: 11px; padding: 6px 8px; text-align: center; white-space: nowrap; border-bottom: 2px solid var(--border, #E8D9C8); }
.matrix-row-label{ background: var(--ivory-dk, #F2EBE0); font-weight: 600; font-size: 11px; padding: 6px 8px; white-space: nowrap; border-right: 2px solid var(--border, #E8D9C8); }
.matrix-table td,.matrix-table th { border: 1px solid rgba(0,0,0,0.05); }
.matrix-table td { text-align: center; padding: 6px 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; min-width: 46px; }
.matrix-cell-click { cursor: pointer; transition: filter 0.15s, transform 0.1s; }
.matrix-cell-click:hover { filter: brightness(0.88); transform: scale(1.06); z-index: 1; position: relative; }
.matrix-cell-diag { color: var(--text-sm, #7A6860) !important; background: var(--ivory-dk, #F2EBE0) !important; font-size: 16px; cursor: default; }
.matrix-detail-box { margin-top: 10px; background: var(--ivory-dk, #F2EBE0); border-radius: var(--radius-sm, 8px); padding: 10px 14px; border-left: 3px solid var(--gold, #C8A055); }
.matrix-det-pair  { font-size: 13px; font-weight: 700; color: var(--text, #1A1018); margin-bottom: 4px; }
.matrix-det-sim   { font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.matrix-det-desc  { font-size: 12px; color: var(--text-sm, #7A6860); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   行動裝置
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .pairing-tab-hints { gap: 4px; font-size: 10.5px; }
  .ptab-hint-sep { display: none; }
  .ptab-hint { width: 100%; }

  .combo-tri-chip-name { max-width: 56px; }
  .combo-triangle-strip { gap: 6px; }

  /* 自由配對：小螢幕改為上下堆疊 */
  .free-tri-intro { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .free-tri-layout { flex-direction: column; align-items: center; gap: 8px; }
  .free-tri-svg-wrap { align-self: center; }
  .free-tri-details { width: 100%; }

  .free-tri-suggest-row { gap: 4px; }
  .surprise-btn { width: 100%; text-align: center; }

  .matrix-table td,.matrix-table th { padding: 4px 5px; font-size: 10px; min-width: 38px; }
  .matrix-col-hd,.matrix-row-label { font-size: 10px; padding: 4px 5px; }
}