/* ============================================================
  玄序玄學工具 — 黃泉八煞 光猛現代風樣式
  ============================================================ */

/* --- 全域 Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #F8F6F3;
  --card-bg: #FFFFFF;
  --text-primary: #3E2723;
  --text-secondary: #5D4037;
  --text-muted: #8D6E63;
  --accent: #D4A574;
  --accent-dark: #B88850;
  --border: #E8E0D8;
  --shadow: rgba(62, 39, 35, 0.08);
  --danger: #DC3545;
  --success: #28A745;
  --warning: #FFC107;
  --info: #1E88E5;
  --radius: 12px;
  --radius-sm: 8px;
}

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

/* --- Layout --- */
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.app-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 1px;
  background: linear-gradient(135deg, #3E2723 0%, #D4A574 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.app-title small {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 8px;
}

.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* --- Card --- */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 2px 8px var(--shadow);
  margin-bottom: 16px;
}

.card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* --- Compass Column --- */
.compass-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 380px;
}

#compassCanvas {
  cursor: pointer;
  max-width: 100%;
}

/* Mobile pill selector — hidden on desktop */
.mobile-mountain-grid { display: none; }

/* --- 資訊 Panel --- */
#infoPanel { min-height: 200px; }

.info-placeholder {
  color: var(--text-muted);
  text-align: center;
  padding: 40px 0;
  font-size: 0.95rem;
}

.info-card {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.info-card:last-child { border-bottom: none; }

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #F0EBE3;
}
.info-row:last-child { border-bottom: none; }

.info-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.info-value {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.info-value-large {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.palace-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 1.1rem;
}

.direction-tag {
  display: inline-block;
  background: #F0EBE3;
  color: var(--text-secondary);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
}

.info-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.basha-card {
  background: #FFF5F5;
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 8px;
}

.sha-badge {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 1.1rem;
}

.formula-tag {
  display: inline-block;
  background: rgba(220,53,69,0.1);
  color: var(--danger);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.damage-desc {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--danger);
  line-height: 1.5;
  background: rgba(220,53,69,0.05);
  padding: 8px;
  border-radius: var(--radius-sm);
}

.sha-tag {
  display: inline-block;
  background: #FFF8E1;
  color: #8D6E63;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  margin: 2px;
}

/* --- 住戶輸入 --- */
.occupant-section { margin-bottom: 16px; }

.section-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.zodiac-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.zodiac-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.zodiac-btn:hover { border-color: var(--accent); }

.zodiac-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.role-group, .gender-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.role-btn, .gender-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.role-btn:hover, .gender-btn:hover { border-color: var(--accent); }

.role-btn.active, .gender-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.occ-name {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: inherit;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}

.occ-name:focus { outline: none; border-color: var(--accent); }

.occupant-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F0EBE3;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  font-size: 0.82rem;
}

.occ-tag-name {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 60px;
}

.occupant-tag .chip-detail {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.chip-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 4px;
}

/* --- 處所輸入 --- */
.palace-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.palace-toggle {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.palace-toggle:hover { border-color: var(--accent); }
.palace-toggle.active {
  color: #fff;
  border-color: var(--info);
  background: var(--info);
}
.palace-toggle.danger.active { background: var(--danger); border-color: var(--danger); }
.palace-toggle.warning.active { background: #FF9800; border-color: #FF9800; }

.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: inherit;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}

.form-input:focus { outline: none; border-color: var(--accent); }

/* --- 形煞輸入 --- */
.formsha-section {
  margin-bottom: 12px;
  padding: 10px;
  background: #FAFAFA;
  border-radius: var(--radius-sm);
}

.formsha-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.formsha-palace {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.formsha-entry {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}

.formsha-select, .distance-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-family: inherit;
  background: var(--card-bg);
  flex: 1;
}

.distance-select { flex: 0 0 80px; }

.form-sha-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: #FFF8E1;
  border-radius: 6px;
  font-size: 0.75rem;
  margin-bottom: 4px;
  border: 1px solid #FFE082;
}

.form-sha-tag .btn-remove {
  margin-left: auto;
  padding: 0 6px;
  font-size: 1rem;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--danger);
  cursor: pointer;
}

/* --- 按鈕 --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.btn-outline:hover { background: rgba(212,165,116,0.1); }

.btn-sm {
  padding: 4px 10px;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.btn-sm:hover { border-color: var(--accent); }

.btn-add-sha {
  color: var(--info);
  border-color: var(--info);
}
.btn-add-sha:hover { background: rgba(30,136,229,0.08); }

.btn-remove {
  color: var(--danger);
  border-color: var(--danger);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 2px 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.btn-remove:hover { background: rgba(220,53,69,0.1); border-radius: 4px; }

.btn-group {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-block { width: 100%; }

/* --- 評分結果 --- */
#scoringResult { min-height: 200px; }

.result-placeholder {
  color: var(--text-muted);
  text-align: center;
  padding: 40px 0;
  font-size: 0.9rem;
}

.empty-hint {
  color: var(--text-muted);
  text-align: center;
  padding: 12px 0;
  font-size: 0.85rem;
}

.risk-summary {
  text-align: center;
  padding: 20px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.risk-summary.risk-low { background: linear-gradient(135deg, #4CAF50, #81C784); color: #fff; }
.risk-summary.risk-mid { background: linear-gradient(135deg, #FFC107, #FFE082); color: #3E2723; }
.risk-summary.risk-high { background: linear-gradient(135deg, #FF9800, #FFB74D); color: #fff; }
.risk-summary.risk-critical { background: linear-gradient(135deg, #DC3545, #E57373); color: #fff; }

.risk-score-big {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.2;
}

.occupant-score-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
  transition: all 0.15s;
}
.risk-low { border-left: 4px solid #4CAF50; }
.risk-mid { border-left: 4px solid #FFC107; }
.risk-high { border-left: 4px solid #FF9800; }
.risk-critical { border-left: 4px solid #DC3545; }

.occ-score-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.occ-score-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.occ-score-tags {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex: 1;
}

.occ-score-value {
  font-size: 1.1rem;
  font-weight: 800;
}

.occ-score-breakdown {
  margin-top: 6px;
}

.basha-badge {
  display: inline-block;
  background: rgba(220,53,69,0.12);
  color: var(--danger);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 0.78rem;
  border-bottom: 1px solid #F5F0EB;
}
.breakdown-item:last-child { border-bottom: none; }

.breakdown-label {
  color: var(--text-muted);
}

.breakdown-value {
  font-weight: 600;
  color: var(--text-secondary);
}

.breakdown-zero {
  font-weight: 400;
  color: var(--text-muted);
}

/* --- 風險等級 Header (舊樣式, backward compat) --- */
.risk-header {
  text-align: center;
  padding: 20px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.risk-header.risk-extreme { background: linear-gradient(135deg, #DC3545, #E57373); }
.risk-header.risk-high { background: linear-gradient(135deg, #FF9800, #FFB74D); }
.risk-header.risk-medium { background: linear-gradient(135deg, #FFC107, #FFE082); }
.risk-header.risk-low { background: linear-gradient(135deg, #4CAF50, #81C784); }

.risk-score {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.risk-level {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin-top: 4px;
}

/* ============================================================
   手機 Responsive — 全面自適應
   ============================================================ */
@media (max-width: 768px) {
  .app-container { padding: 10px; }

  .app-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 10px 0; }

  .app-title { font-size: 1.3rem; letter-spacing: 0; }
  .app-title small { display: block; margin-left: 0; font-size: 0.85rem; margin-top: 2px; }

  .main-grid { grid-template-columns: 1fr; gap: 12px; }

  .card { padding: 14px; border-radius: 10px; margin-bottom: 10px; }

  .card-title { font-size: 1rem; margin-bottom: 10px; }

  /* Compass — smaller, click disabled, replaced by pills */
  .compass-wrapper { min-height: 220px; }
  #compassCanvas { width: 220px !important; height: 220px !important; cursor: default !important; }

  /* Mobile 24山 pill grid */
  .mobile-mountain-grid { display: block; margin-top: 12px; }
  .mobile-mountain-hint { font-size: 0.85rem; color: var(--text-muted); text-align: center; margin-bottom: 8px; }
  .mobile-mountain-row { display: flex; gap: 4px; justify-content: center; margin-bottom: 4px; }
  .mobile-mtn-btn {
    width: 54px; height: 44px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--card-bg); color: var(--text-secondary); font-size: 0.85rem;
    font-weight: 600; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; touch-action: manipulation;
  }
  .mobile-mtn-btn:active { transform: scale(0.95); }
  .mobile-mtn-btn.selected { background: #1E88E5; color: #fff; border-color: #1E88E5; }
  .mobile-mtn-btn.sha-highlight { color: #DC3545; font-weight: 800; }
  .mobile-mtn-btn.selected.sha-highlight { background: #1E88E5; color: #fff; }

  .info-card { padding: 8px 0; }
  .info-row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 0; }
  .info-label { font-size: 0.85rem; }
  .info-value { font-size: 1rem; }

  .form-input, .form-select { font-size: 1rem; padding: 10px 12px; }

  .section-label { font-size: 0.9rem; }

  .palace-grid { gap: 6px; }
  .palace-toggle { min-width: 44px; height: 44px; font-size: 0.85rem; padding: 0 8px; }

  /* 生肖 — 4 column grid for mobile */
  .zodiac-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .zodiac-btn { width: 100%; height: 48px; font-size: 0.9rem; padding: 0; }

  /* 角色 — 4 column grid */
  .role-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .role-btn { width: 100%; height: 44px; font-size: 0.85rem; padding: 0; }

  /* 性別 — 2 btn side by side */
  .gender-group { display: flex; gap: 8px; }
  .gender-btn { flex: 1; height: 48px; font-size: 1rem; padding: 0; }

  .occ-name { font-size: 1rem; padding: 12px; }

  /* 形煞輸入 — stack dropdowns + btn vertically */
  .formsha-select, .distance-select { font-size: 0.9rem; padding: 10px; width: 100%; }
  .formsha-entry { flex-direction: column; gap: 8px; }
  .formsha-entry select, .formsha-entry button { width: 100%; }

  .btn { font-size: 1rem; padding: 12px 16px; }
  .btn-block { padding: 14px; font-size: 1.05rem; }

  .occupant-tag { padding: 8px 12px; font-size: 0.9rem; gap: 8px; flex-wrap: wrap; }
  .btn-remove { font-size: 1.2rem; padding: 4px 10px; }

  .form-sha-tag { font-size: 0.85rem; padding: 4px 10px; }

  /* 評分結果手機版 */
  .risk-score { font-size: 2.2rem; }
  .risk-level { font-size: 1rem; }

  .occupant-score-card { padding: 12px; margin-bottom: 10px; }
  .occ-score-header { flex-wrap: wrap; gap: 6px; }
  .occ-score-name { font-size: 1rem; }
  .occ-score-tags { font-size: 0.8rem; }
  .occ-score-value { font-size: 1.3rem; }

  .basha-badge { font-size: 0.8rem; padding: 4px 10px; }

  .breakdown-item { font-size: 0.85rem; padding: 4px 0; }
  .breakdown-label { font-size: 0.85rem; }
  .breakdown-value { font-size: 0.9rem; }

  .risk-header { padding: 14px; margin-bottom: 12px; }

  /* 十五形煞參考手機版 */
  .form-sha-ref-container { grid-template-columns: 1fr 1fr; gap: 8px; }
  .form-sha-ref-item { padding: 10px; }
  .form-sha-ref-name { font-size: 0.85rem; }
  .form-sha-ref-type { font-size: 0.7rem; padding: 2px 8px; }
  .form-sha-ref-desc { font-size: 0.75rem; }

  /* 按鈕組 */
  .action-buttons { flex-direction: column; gap: 8px; }
  .action-buttons .btn { width: 100%; }

  .empty-hint { font-size: 0.85rem; padding: 12px; }
}