/* Milestone 17: Saved Puzzles uses the same overlay pattern as Library, School, and Stats. */
.saved-puzzles-overlay[hidden] {
  display: none;
}

.saved-puzzles-overlay {
  align-items: flex-start;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: max(34px, calc(env(safe-area-inset-bottom) + 24px));
}

.saved-puzzles-shell {
  width: min(1040px, 100%);
  max-height: none;
  grid-template-rows: auto auto;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.saved-puzzles-card.recent-panel {
  display: grid;
  gap: 14px;
  margin-top: 0;
  margin-bottom: max(20px, env(safe-area-inset-bottom));
  overflow: visible;
  border-radius: 24px;
  padding: clamp(16px, 3vw, 24px);
  box-shadow: var(--shadow-soft);
}

.saved-puzzles-card .recent-panel-header {
  margin-bottom: 0;
}

.saved-puzzles-card .recent-list {
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  align-items: stretch;
}

.saved-puzzles-card .recent-item {
  width: 100%;
  min-height: 244px;
}

@media (max-width: 640px) {
  .saved-puzzles-card .recent-list {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    padding-bottom: 0;
  }

  .saved-puzzles-card .recent-item {
    width: 100%;
    min-height: auto;
  }
}