/* ============================================================
   Trang "Thông điệp hôm nay" — lá bài mỗi ngày + bảng năng lượng
   tháng kiểu GitHub với các chú mèo năng lượng.
   ============================================================ */

.daily-header h1 {
  margin-bottom: 4px;
}
.daily-date {
  color: var(--ink-soft);
  text-transform: capitalize;
  margin-top: 0;
}

.daily-panel {
  max-width: 860px;
  margin: 24px auto 0;
  padding: clamp(20px, 4vw, 40px);
}

/* ---------- trạng thái chưa rút: 3 lá úp ---------- */
.daily-mascot {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto 20px;
}
.daily-mascot img {
  flex: 0 0 auto;
  width: clamp(84px, 14vw, 120px);
  height: auto;
}
.daily-speech {
  position: relative;
  background: var(--surface);
  border: 2px dashed var(--pink);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0;
}

.daily-pick-cards {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3vw, 24px);
}
.daily-pick-card {
  background: none;
  border: none;
  padding: 0;
  border-radius: 12px;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.daily-pick-card img {
  width: clamp(88px, 16vw, 130px);
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}
.daily-pick-card:nth-child(1) {
  transform: rotate(-6deg) translateY(6px);
}
.daily-pick-card:nth-child(3) {
  transform: rotate(6deg) translateY(6px);
}
.daily-pick-card:hover,
.daily-pick-card:focus-visible {
  transform: translateY(-10px);
  filter: brightness(1.05);
}
.daily-pick-card:disabled {
  opacity: 0.45;
  filter: grayscale(0.4);
}
.daily-pick-card.chosen {
  opacity: 1;
  filter: none;
  transform: translateY(-10px) scale(1.06);
  animation: daily-wiggle 0.9s ease infinite;
}
@keyframes daily-wiggle {
  0%, 100% { rotate: -2deg; }
  50% { rotate: 2deg; }
}
.daily-pick-status {
  text-align: center;
  min-height: 1.5em;
  margin: 14px 0 0;
}

/* ---------- kết quả ---------- */
.daily-result {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 4vw, 36px);
  align-items: start;
  animation: daily-pop 0.5s ease;
}
@keyframes daily-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.daily-card-side {
  text-align: center;
}
.daily-card {
  display: inline-block;
  perspective: 700px;
}
.daily-card img {
  width: clamp(130px, 20vw, 170px);
  height: auto;
  border-radius: 12px;
  border: 3px solid var(--gold);
  box-shadow: var(--shadow);
  animation: daily-flip 0.7s ease;
}
.daily-card.reversed img {
  transform: rotate(180deg);
}
@keyframes daily-flip {
  from { transform: rotateY(90deg); }
  to { transform: rotateY(0deg); }
}
.daily-card.reversed img {
  animation-name: daily-flip-rev;
}
@keyframes daily-flip-rev {
  from { transform: rotate(180deg) rotateY(90deg); }
  to { transform: rotate(180deg) rotateY(0deg); }
}
.daily-card-name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  margin: 10px 0 4px;
}
.daily-orient-badge {
  display: inline-block;
  padding: 2px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--mint);
  color: var(--mint-deep);
}
.daily-orient-badge.rev {
  background: var(--butter);
  color: var(--butter-deep);
}

.daily-energy-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--energy-color, var(--primary));
  box-shadow: var(--shadow-soft);
}
.daily-energy-blurb {
  margin: 10px 0 4px;
}
.daily-paragraphs p {
  margin: 0 0 0.9em;
}
/* JS thêm .show từng đoạn một cho cảm giác Mèo đang "thì thầm" */
.daily-paragraphs.typing p {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.daily-paragraphs.typing p.show {
  opacity: 1;
  transform: none;
}
.daily-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 12px 0 4px;
}
.daily-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.daily-note {
  margin: 6px 0 0;
  font-size: 0.92rem;
}

/* ---------- dải thống kê chuỗi ngày ---------- */
.daily-stats-section {
  padding-top: 0;
}
.daily-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}
.daily-stat {
  text-align: center;
  padding: 18px 10px 14px;
}
.daily-stat-num {
  font-family: var(--font-head);
  font-size: 2rem;
  line-height: 1.1;
  margin: 8px 0 2px;
  color: var(--primary-deep);
}
.daily-stat-label {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

/* ---------- bảng năng lượng tháng ---------- */
.daily-board-section {
  padding-top: 0;
}
.daily-board {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 32px);
}
.daily-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.daily-board-head h2 {
  margin: 0;
  font-size: 1.35rem;
}
.daily-board-nav {
  display: flex;
  gap: 8px;
}
.daily-board-hint {
  margin: 8px 0 18px;
  font-size: 0.95rem;
}

.daily-board-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}
.daily-grid {
  display: grid;
  grid-template-columns: repeat(7, 40px);
  gap: 7px;
  justify-content: center;
  min-width: 340px;
}
.daily-grid-weekday {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}
.daily-cell {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}
.daily-cell img {
  width: 24px;
  height: 24px;
}
.daily-cell-day {
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.daily-cell.blank {
  visibility: hidden;
}
/* thang đậm dần theo số lượt trải bài — kiểu GitHub, tông tím của tiệm */
.daily-cell.lv0 { background: #f7f2fb; }
.daily-cell.lv1 { background: #e9dcf6; }
.daily-cell.lv2 { background: #d3bcec; }
.daily-cell.lv3 { background: var(--primary); }
.daily-cell.lv4 { background: var(--primary-deep); }
.daily-cell.lv3 .daily-cell-day,
.daily-cell.lv4 .daily-cell-day {
  color: #fff;
}
.daily-cell.today {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
}
.daily-cell.future {
  border-style: dashed;
  background: transparent;
}
.daily-cell.future .daily-cell-day {
  opacity: 0.5;
}

.daily-legends {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.daily-legend-scale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}
.daily-legend-scale .daily-cell {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}
.daily-legend-energy {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
}
.daily-legend-energy li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.daily-guest-note {
  margin: 16px 0 0;
  font-size: 0.92rem;
}
.daily-guest-note .icon {
  vertical-align: -3px;
}

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  .daily-result {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .daily-message {
    text-align: left;
  }
  .daily-links {
    justify-content: center;
  }
  .daily-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .daily-mascot {
    flex-direction: column;
    text-align: center;
  }
  .daily-grid {
    grid-template-columns: repeat(7, 34px);
    gap: 5px;
  }
  .daily-cell {
    width: 34px;
    height: 34px;
  }
  .daily-cell img {
    width: 20px;
    height: 20px;
  }
}