/* Yesterday's solutions. Mobile first; two columns from 1180px. */

.yesterday {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  padding: 12px var(--frame-pad) 40px;
}

.yesterday-title { display: flex; justify-content: space-between; align-items: center; }

.yesterday-title h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.01em;
}

.yesterday-date { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--cool-gray); }

.title-play { display: none; }

.yesterday-columns { display: flex; flex-direction: column; gap: 28px; }

.yesterday-side { display: flex; flex-direction: column; gap: 24px; }

/* The day's grid, small (40px tiles, 6px gaps). */
.mini-grid { display: grid; grid-template-columns: repeat(3, 40px); gap: 6px; }

.mini-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow-flat);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: var(--charcoal);
}

.mini-grid span.center { background: var(--accent); color: var(--white); }

.result { display: flex; flex-direction: column; gap: 12px; }

.not-played { font-size: 14px; line-height: 20px; color: var(--charcoal); }

.yesterday-words { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

.word-groups { display: flex; flex-direction: column; gap: 22px; }

.bottom-play .btn { display: flex; width: 100%; }

.yesterday-message { font-size: 16px; line-height: 24px; color: var(--mid-gray); }

.yesterday-message .btn { margin-top: 20px; }

.yesterday-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* for browsers without svh (Safari before 15.4) */
  min-height: 100svh;
}

.yesterday-page .site-footer { margin-top: auto; }

@media (min-width: 1180px) {
  .yesterday {
    gap: 40px;
    padding: 28px var(--frame-pad) 0;
  }

  .yesterday-title h1 { font-size: 40px; line-height: 46px; }

  .title-play { display: inline-flex; }

  .yesterday-columns { flex-direction: row; align-items: flex-start; gap: 120px; }

  .yesterday-side { width: 300px; flex-shrink: 0; gap: 32px; }

  .yesterday-words { flex: 1 1 0; gap: 24px; }

  .bottom-play { padding-top: 12px; }

  .bottom-play .btn { display: inline-flex; width: auto; }

  .yesterday-ad-row { padding: 56px 0; }

  html:not(.ads-preview) .yesterday { padding-bottom: 56px; }
}