/* Daily puzzle page. Green + cream — matches the zine palette. */

.puzzle-page {
  max-width: 900px;
  margin: 24px auto;
  padding: 0 16px;
}

.puzzle-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.puzzle-streak {
  text-align: right;
  min-width: 120px;
}

.streak-num {
  font: 700 42px/1 'Fraunces', Georgia, serif;
  color: #2f6f4a;
}

.streak-label {
  color: var(--text-muted, #666);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.puzzle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 780px) {
  .puzzle-layout { grid-template-columns: 1fr; }
}

.puzzle-board-col .board-wrap {
  max-width: 560px;
  margin: 0 auto;
}

.puzzle-controls {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: center;
}

.puzzle-side {
  padding: 16px;
  background: #fbf8f2;
  border: 1px solid #e6dfd0;
  border-radius: 10px;
}

.puzzle-status {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #e6dfd0;
}

.ps-turn {
  font: 600 18px/1.2 'Fraunces', Georgia, serif;
  color: #2f6f4a;
}

.ps-turn-bad  { color: #b3505a; }
.ps-turn-good { color: #2f6f4a; }
.ps-turn-wait { color: #7a6d55; }

.ps-hint { margin-top: 4px; }

.puzzle-meta div { margin-bottom: 6px; }

.themes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.theme-pill {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid #d9d0bd;
  border-radius: 999px;
  color: #7a6d55;
  background: #fff;
}

/* Home-feed Daily Puzzle card */
.daily-puzzle-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fbf8f2 0%, #eef4ea 100%);
  border: 1px solid #d5e4d1;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 12px;
}

.daily-puzzle-card:hover { border-color: #2f6f4a; }

.dp-icon {
  font-size: 28px;
  line-height: 1;
}

.dp-body { flex: 1; min-width: 0; }

.dp-title {
  font: 700 16px/1.2 'Fraunces', Georgia, serif;
  color: #2f6f4a;
  margin: 0 0 2px;
}

.dp-sub {
  font-size: 12.5px;
  color: #7a6d55;
}

.dp-streak {
  text-align: right;
  padding-left: 12px;
  border-left: 1px dashed #c8d4c1;
}

.dp-streak .n {
  display: block;
  font: 700 24px/1 'Fraunces', Georgia, serif;
  color: #2f6f4a;
}

.dp-streak .l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7a6d55;
}