/* Tử Vi tool — interpret block, hover, responsive, print */

.tuvi-interpret { margin: 32px 0; }
.interpret-block {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
}
.interpret-block h4 { margin: 0 0 6px; color: var(--accent); font-size: 1rem; }
.interpret-block p { margin: 0; color: var(--text); font-size: 0.95rem; line-height: 1.65; }

.tuvi-disclaimer {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  margin: 24px 0;
  padding: 12px;
  border-top: 1px dashed var(--border);
}
.tuvi-disclaimer a { color: var(--accent); text-decoration: underline; }

.palace.hl { outline: 2px dashed var(--accent); outline-offset: -4px; z-index: 2; }

.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  z-index: 50;
  animation: toast-in 0.2s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 900px) {
  .tuvi-chart {
    aspect-ratio: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .palace { grid-area: auto !important; min-height: 170px; }
  .tuvi-center { grid-area: auto !important; order: -1; min-height: 200px; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .tuvi-container { padding-top: 24px; }
  .tuvi-chart { grid-template-columns: 1fr; }
  .palace { min-height: 140px; }
  .tuvi-center { padding: 12px; }
  .center-block { font-size: 0.85rem; }
}

@media print {
  body { background: white !important; color: black !important; }
  .back-link, .tuvi-form-section, .footer, .tuvi-hero, .domain-badge { display: none !important; }
  .tuvi-container { padding: 12px; max-width: 100%; }
  .tuvi-chart { background: white; aspect-ratio: 1 / 1; max-width: 100%; page-break-inside: avoid; }
  .palace, .tuvi-center, .interpret-block { background: white !important; color: black !important; border: 1px solid #888 !important; }
  .palace-name, .center-name, .interpret-block h4 { color: black !important; }
  .mutagen { border: 1px solid currentColor; }
  .palace.is-soul { box-shadow: inset 0 0 0 2px black !important; }
  .palace.is-current-decadal, .palace.is-current-yearly { box-shadow: inset 0 0 0 1px #555 !important; }
  .toast { display: none !important; }
}