/* =============================================================
 * Цзы Вэй Доу Шу v3.1 — Sprint 12
 * Дизайн-токены по спецификации §6.1 + 4×4 сетка
 * ============================================================= */

:root {
  /* ---- Категории звёзд ---- */
  --star-main:       #1F4E80;   /* 14 главных — тёмно-синий */
  --star-lucky:      #52A852;   /* 6 благоприятных — зелёный */
  --star-unlucky:    #D9534F;   /* 6 неблагоприятных — красный */
  --star-aux:        #6B7280;   /* вспомогательные — серый */

  /* ---- Си Хуа (4 трансформации) ---- */
  --sihua-lu:        #16A34A;   /* 化禄 — зелёный (богатство) */
  --sihua-quan:      #DC2626;   /* 化权 — красный (власть) */
  --sihua-ke:        #2563EB;   /* 化科 — синий (репутация) */
  --sihua-ji:        #1F2937;   /* 化忌 — чёрный (препятствие) */

  /* ---- Яркость звёзд (廟旺得利平不陷) ---- */
  --bright-miao:     #16A34A;
  --bright-wang:     #65A30D;
  --bright-de:       #A3A3A3;
  --bright-li:       #A3A3A3;
  --bright-ping:     #A3A3A3;
  --bright-bu:       #DC2626;
  --bright-xian:     #B91C1C;

  /* ---- Слои Си Хуа ---- */
  --layer-natal:     #1F4E80;
  --layer-da-xian:   #7C3AED;
  --layer-liu-nian:  #EA580C;

  /* ---- Подсветка Сан Фан Сы Чжэн ---- */
  --triad-bg:        #FEF3C7;
  --opposite-bg:     #FECACA;
  --selected-bg:     #BFDBFE;
  --selected-border: #2563EB;

  /* ---- Базовая палитра ---- */
  --zw-bg:           #FAF8F1;
  --zw-cell-bg:      #FFFFFF;
  --zw-cell-border:  #E5E0D2;
  --zw-text:         #2A2A2A;
  --zw-text-muted:   #6B7280;
  --zw-accent:       #0F4C3A;
  --zw-gold:         #D4AF37;
}

/* =============================================================
 * Панель управления (слои + год)
 * ============================================================= */

.zwds-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--zw-bg);
  border: 1px solid var(--zw-cell-border);
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 13px;
}

.zwds-controls__label {
  font-weight: 600;
  color: var(--zw-text-muted);
}

.zwds-controls__layers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.layer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--zw-cell-border);
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--zw-text);
  transition: all 0.15s;
}

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

.layer-btn .layer-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.15s;
}

.layer-btn--natal .layer-dot    { background: var(--layer-natal); }
.layer-btn--da_xian .layer-dot  { background: var(--layer-da-xian); }
.layer-btn--liu_nian .layer-dot { background: var(--layer-liu-nian); }

.layer-btn.is-active {
  background: var(--zw-accent);
  border-color: var(--zw-accent);
  color: #fff;
}
.layer-btn.is-active .layer-dot { background: #fff; }

.zwds-controls__year {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.zwds-controls__year input {
  width: 80px;
  padding: 5px 8px;
  border: 1px solid var(--zw-cell-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}

/* =============================================================
 * Сетка 4×4
 * ============================================================= */

.zwds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(150px, auto));
  gap: 4px;
  padding: 6px;
  background: var(--zw-bg);
  border: 1px solid var(--zw-cell-border);
  border-radius: 12px;
  font-family: 'Manrope', 'PingFang SC', sans-serif;
}

/* ---- Дворцовая ячейка ---- */
.palace-cell {
  background: var(--zw-cell-bg);
  border: 1px solid var(--zw-cell-border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  min-height: 150px;
  outline: none;
}

.palace-cell:hover {
  border-color: var(--zw-accent);
  box-shadow: 0 2px 8px rgba(15, 76, 58, 0.08);
}

.palace-cell:focus-visible {
  border-color: var(--zw-accent);
  box-shadow: 0 0 0 2px rgba(15, 76, 58, 0.25);
}

/* ---- Состояния подсветки Сан Фан Сы Чжэн ---- */
.palace-cell.is-selected {
  background: var(--selected-bg);
  border-color: var(--selected-border);
  border-width: 2px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.palace-cell.is-opposite {
  background: var(--opposite-bg);
  border-color: #DC2626;
}

.palace-cell.is-triangle {
  background: var(--triad-bg);
  border-color: #D97706;
}

/* ---- Заголовок дворца ---- */
.palace-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  border-bottom: 1px dashed var(--zw-cell-border);
  padding-bottom: 4px;
}

.palace-header__left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.palace-name {
  font-weight: 700;
  color: var(--zw-accent);
  font-size: 13px;
}

.palace-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.palace-marker--life { background: var(--zw-gold); }
.palace-marker--body { background: var(--star-main); }

.palace-self-trans {
  color: var(--sihua-quan);
  font-size: 14px;
  font-weight: 700;
  cursor: help;
}

/* ---- Чан Шэн ---- */
.palace-chang-sheng {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-family: 'Cormorant Garamond', serif;
  cursor: help;
}
.palace-chang-sheng--good { background: #DCFCE7; color: #166534; }
.palace-chang-sheng--warn { background: #FEF3C7; color: #92400E; }
.palace-chang-sheng--bad  { background: #FEE2E2; color: #991B1B; }

/* ---- Звёзды ---- */
.palace-stars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  overflow: hidden;
  font-size: 12px;
}

.star {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
  flex-wrap: wrap;
}

.star--main    { color: var(--star-main); font-weight: 700; }
.star--lucky   { color: var(--star-lucky); font-weight: 500; }
.star--unlucky { color: var(--star-unlucky); font-weight: 500; }
.star--aux     { color: var(--star-aux); font-weight: 400; font-size: 11px; }

.star-name { white-space: nowrap; }

.star-brightness {
  display: inline-block;
  font-size: 9px;
  padding: 1px 3px;
  border-radius: 3px;
  background: #F3F4F6;
  font-weight: 600;
}
.star-brightness--miao { background: var(--bright-miao); color: #fff; }
.star-brightness--wang { background: var(--bright-wang); color: #fff; }
.star-brightness--de   { background: var(--bright-de); color: #fff; }
.star-brightness--li   { background: var(--bright-li); color: #fff; }
.star-brightness--ping { background: var(--bright-ping); color: #fff; }
.star-brightness--bu   { background: var(--bright-bu); color: #fff; }
.star-brightness--xian { background: var(--bright-xian); color: #fff; }

/* ---- Си Хуа теги на звёздах ---- */
.si-hua-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  cursor: help;
  position: relative;
}
.si-hua-tag--lu   { background: var(--sihua-lu); }
.si-hua-tag--quan { background: var(--sihua-quan); }
.si-hua-tag--ke   { background: var(--sihua-ke); }
.si-hua-tag--ji   { background: var(--sihua-ji); }

/* Источник Си Хуа — рамка-индикатор */
.si-hua-tag--src-da_xian  { box-shadow: 0 0 0 1.5px var(--layer-da-xian); }
.si-hua-tag--src-liu_nian { box-shadow: 0 0 0 1.5px var(--layer-liu-nian); }

/* ---- Скрытие слоя ---- */
.zwds-grid.hide-layer-natal    .si-hua-tag--src-natal    { display: none !important; }
.zwds-grid.hide-layer-da_xian  .si-hua-tag--src-da_xian  { display: none !important; }
.zwds-grid.hide-layer-liu_nian .si-hua-tag--src-liu_nian { display: none !important; }

/* ---- Заимствованные звёзды ---- */
.palace-borrowed {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 8px;
  border-left: 2px dotted var(--star-aux);
  font-style: italic;
  opacity: 0.85;
}
.palace-borrowed__label {
  font-size: 10px;
  color: var(--star-aux);
  font-weight: 700;
}

/* ---- Подвал дворца ---- */
.palace-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  border-top: 1px dashed var(--zw-cell-border);
  padding-top: 4px;
  margin-top: auto;
  color: var(--zw-text-muted);
}

.palace-footer__left { display: flex; gap: 4px; align-items: baseline; }
.palace-footer__right { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

.palace-stem {
  font-weight: 700;
  color: var(--zw-accent);
  font-size: 12px;
}
.palace-branch {
  font-size: 14px;
  font-weight: 700;
  color: var(--zw-text);
  font-family: 'Cormorant Garamond', serif;
}

.palace-da-xian {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background: #EFF6FF;
  color: var(--star-main);
  font-weight: 600;
}
.palace-da-xian.is-current {
  background: var(--layer-da-xian);
  color: #fff;
  font-weight: 700;
}

.palace-xiao-xian {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--zw-gold);
  color: #fff;
  font-weight: 700;
}

.palace-liu-nian {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--layer-liu-nian);
  color: #fff;
  font-weight: 700;
}

/* =============================================================
 * Центр 4×4 (2×2 объединённых)
 * ============================================================= */

.zwds-center {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF8F1 100%);
  border: 2px solid var(--zw-accent);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

.zwds-center__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--zw-accent);
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  border-bottom: 1px solid var(--zw-cell-border);
  padding-bottom: 8px;
}

.zwds-center__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 12px;
  margin: 0;
}
.zwds-center__meta dt {
  color: var(--zw-text-muted);
  font-weight: 500;
}
.zwds-center__meta dd {
  margin: 0;
  color: var(--zw-text);
  font-weight: 600;
}

.zwds-center__sihua {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--zw-cell-border);
}
.center-sihua-title {
  font-size: 11px;
  color: var(--zw-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  font-weight: 600;
}
.center-sihua-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 10px;
  font-size: 12px;
}
.center-sihua-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.center-sihua-star {
  font-weight: 700;
  color: var(--zw-text);
}
.center-sihua-loc {
  color: var(--zw-text-muted);
  font-size: 11px;
}

/* =============================================================
 * Информационная панель (Сяо Сянь + самотрансформации)
 * ============================================================= */

.zwds-info-panel {
  margin-top: 16px;
  padding: 14px 18px;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.zwds-info-panel__row {
  margin-bottom: 6px;
}
.zwds-info-panel__row:last-child { margin-bottom: 0; }

.self-trans-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  margin: 2px 4px 2px 0;
}

/* =============================================================
 * Легенда
 * ============================================================= */

.zwds-legend {
  margin-top: 16px;
  font-size: 12px;
  color: var(--zw-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  line-height: 1.5;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* =============================================================
 * Адаптив
 * ============================================================= */

@media (max-width: 1100px) {
  .zwds-grid {
    grid-template-rows: repeat(4, minmax(130px, auto));
  }
  .palace-cell { min-height: 130px; padding: 6px 8px; }
  .star { font-size: 11px; }
}

@media (max-width: 720px) {
  .zwds-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 6px;
  }
  .palace-cell {
    grid-row: auto !important;
    grid-column: 1 !important;
    min-height: auto;
  }
  .zwds-center {
    grid-row: auto !important;
    grid-column: 1 !important;
    order: -1;
  }
  .zwds-controls__year {
    margin-left: 0;
    width: 100%;
  }
}