/**
 * TICKET-305: Daily Puzzle and Archive Premium Retrofit
 *
 * Loaded on: single codeword_puzzle, puzzle archive, and daily-puzzle template.
 * Applies richer atmospheric styling (dark) / clean drafting-table (light).
 *
 * Rules:
 *  - Richer atmosphere than solver pages — but usability always wins
 *  - Progress must remain truthful and readable
 *  - No fake 98% cap behaviour (--flag-progress-cap remains 0)
 *  - Archive cards must stay scannable — resume markers compact
 *  - Edge and empty states must remain clearly usable
 */

/* ─── Shared puzzle container — TICKET-336: explicit card treatment ──────────── */
/*
 * .container is now a pure layout primitive (see premium.css). Re-apply the
 * full card treatment here so puzzle and archive pages retain their game surface.
 */

.puzzle-page .container,
.puzzle-archive-page .container {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  border-radius: 6px;
}

html.light-mode .puzzle-page .container,
html.light-mode .puzzle-archive-page .container {
  background-color: var(--surface-paper);
  border-color: var(--line-soft);
  box-shadow: var(--surface-stack-shadow);
}

/* ─── Puzzle header ──────────────────────────────────────────────────────────── */

.puzzle-header__title {
  font-family: var(--font-gnosis);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.12);
}

html.light-mode .puzzle-header__title {
  text-shadow: none;
  color: var(--ink-blueprint);
}

.puzzle-header__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.puzzle-date {
  font-family: var(--font-logic);
  font-size: 0.875rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

html.light-mode .puzzle-date {
  color: var(--ink-slate);
}

/* ─── Difficulty badges ──────────────────────────────────────────────────────── */

.puzzle-difficulty {
  font-family: var(--font-logic);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.puzzle-difficulty--easy {
  color: var(--gold-cerebral);
  border-color: rgba(212, 175, 55, 0.3);
  background-color: rgba(212, 175, 55, 0.08);
}

.puzzle-difficulty--normal {
  color: var(--vellum-muted);
  border-color: var(--border-subtle);
  background-color: transparent;
}

.puzzle-difficulty--hard {
  color: var(--crimson-neural);
  border-color: rgba(190, 18, 60, 0.3);
  background-color: rgba(190, 18, 60, 0.08);
}

html.light-mode .puzzle-difficulty--easy {
  color: var(--amber-logic);
  border-color: rgba(180, 83, 9, 0.25);
  background-color: var(--amber-soft);
}

html.light-mode .puzzle-difficulty--hard {
  color: var(--rose-urgency);
  border-color: rgba(159, 18, 57, 0.25);
  background-color: rgba(159, 18, 57, 0.06);
}

/* ─── Puzzle subnav ──────────────────────────────────────────────────────────── */

.puzzle-subnav {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin: 1.5rem 0;
  padding: 0.625rem 0;
}

html.light-mode .puzzle-subnav {
  border-color: var(--line-soft);
}

.puzzle-subnav__link {
  font-family: var(--font-logic);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}

.puzzle-subnav__link:hover {
  color: var(--accent);
  text-decoration: none;
  opacity: 1;
}

.puzzle-subnav__link--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ─── Puzzle area ────────────────────────────────────────────────────────────── */

.puzzle-area {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

html.light-mode .puzzle-area {
  background-color: var(--vellum-base);
  border-color: var(--line-soft);
}

/* Grid rendered by puzzle.js */
.puzzle-grid {
  font-family: var(--font-logic);
  color: var(--text-primary);
}

html.light-mode .puzzle-grid {
  color: var(--ink-blueprint);
}

/* Progress bar — truthful, no fake cap */
.puzzle-status {
  font-family: var(--font-logic);
  font-size: 0.875rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

/* Breathing pulse on progress bar (daily puzzle only, respects reduced-motion) */
.puzzle-progress-bar {
  height: 3px;
  background-color: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.puzzle-progress-bar__fill {
  height: 100%;
  background-color: var(--accent);
  border-radius: 2px;
  transition: width var(--dur-slow) var(--ease-shutter);
  animation: cws-progress-breathe var(--dur-breathe) ease-in-out infinite;
}

html.light-mode .puzzle-progress-bar__fill {
  background-color: var(--amber-logic);
  animation: none; /* flatter in light mode */
}

@keyframes cws-progress-breathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* ─── Puzzle controls ────────────────────────────────────────────────────────── */

.puzzle-controls {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.puzzle-btn {
  font-family: var(--font-logic);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  background-color: transparent;
  color: var(--text-muted);
}

.puzzle-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.puzzle-btn--reveal {
  color: var(--accent);
  border-color: rgba(212, 175, 55, 0.3);
}

.puzzle-btn--reveal:hover {
  background-color: var(--accent-glow);
}

html.light-mode .puzzle-btn--reveal {
  color: var(--amber-logic);
  border-color: rgba(180, 83, 9, 0.3);
}

html.light-mode .puzzle-btn--reveal:hover {
  background-color: var(--amber-soft);
}

/* ─── Completion message ─────────────────────────────────────────────────────── */

.puzzle-complete {
  padding: 1.5rem;
  background-color: var(--reward-glow);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 4px;
  text-align: center;
}

html.light-mode .puzzle-complete {
  background-color: var(--amber-soft);
  border-color: rgba(180, 83, 9, 0.2);
}

.puzzle-complete__message {
  font-family: var(--font-gnosis);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

html.light-mode .puzzle-complete__message {
  color: var(--amber-logic);
}

.puzzle-complete__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.puzzle-complete__cta {
  font-family: var(--font-logic);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 1.25rem;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}

.puzzle-complete__cta--primary {
  background-color: var(--accent);
  color: var(--ink-nocturnal);
}

html.light-mode .puzzle-complete__cta--primary {
  background-color: var(--amber-logic);
  color: #fff;
}

.puzzle-complete__cta--secondary {
  background-color: transparent;
  color: var(--accent);
  border-color: var(--border-subtle);
}

html.light-mode .puzzle-complete__cta--secondary {
  color: var(--amber-logic);
}

/* ─── Comparison summary (post-reveal — TICKET-316) ─────────────────────────── */

.puzzle-complete__comparison {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

html.light-mode .puzzle-complete__comparison {
  border-bottom-color: rgba(180, 83, 9, 0.12);
}

.puzzle-comparison__solved-of {
  font-family: var(--font-logic);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.puzzle-comparison__stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

.puzzle-comparison__stat {
  font-family: var(--font-logic);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.puzzle-comparison__count {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
}

.puzzle-comparison__stat--correct   .puzzle-comparison__count { color: var(--accent); }
.puzzle-comparison__stat--incorrect .puzzle-comparison__count { color: var(--text-muted); }
.puzzle-comparison__stat--unanswered .puzzle-comparison__count { color: var(--text-muted); }

html.light-mode .puzzle-comparison__stat--correct .puzzle-comparison__count { color: var(--amber-logic); }

/* ─── Puzzle support content (TICKET-323, 324, 325, 326) ────────────────────── */

.puzzle-support {
  margin-top: 2.5rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Inline legend note — very compact, sits just below the play area */
.puzzle-support__legend-note {
  font-family: var(--font-logic);
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin: 0;
}

html.light-mode .puzzle-support__legend-note {
  color: var(--ink-slate);
}

/* Individual panels (how-to-play, tips) */
.puzzle-support__panel {
  /* no extra box — content flows naturally */
}

.puzzle-support__heading {
  font-family: var(--font-gnosis);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
}

html.light-mode .puzzle-support__heading {
  color: var(--ink-blueprint);
}

.puzzle-support__subheading {
  font-family: var(--font-gnosis);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1.25rem 0 0.5rem;
}

html.light-mode .puzzle-support__subheading {
  color: var(--ink-slate);
}

/* Ordered steps */
.puzzle-support__steps {
  font-family: var(--font-logic);
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
  padding-left: 1.25rem;
  margin: 0;
}

.puzzle-support__steps li + li {
  margin-top: 0.4rem;
}

html.light-mode .puzzle-support__steps {
  color: var(--ink-slate);
}

/* Definition list for controls */
.puzzle-support__controls {
  font-family: var(--font-logic);
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  align-items: baseline;
}

.puzzle-support__controls dt {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.puzzle-support__controls dd {
  margin: 0;
}

html.light-mode .puzzle-support__controls dt { color: var(--ink-blueprint); }
html.light-mode .puzzle-support__controls dd { color: var(--ink-slate); }

/* Unordered tips list */
.puzzle-support__tips {
  font-family: var(--font-logic);
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
  padding-left: 1.25rem;
  margin: 0;
}

.puzzle-support__tips li + li {
  margin-top: 0.4rem;
}

html.light-mode .puzzle-support__tips {
  color: var(--ink-slate);
}

/* Guide CTA paragraph */
.puzzle-support__guide-cta {
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.25rem;
}

.puzzle-support__guide-text {
  font-family: var(--font-logic);
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

html.light-mode .puzzle-support__guide-text {
  color: var(--ink-slate);
}

/* Inline links within support content */
.puzzle-support__link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.puzzle-support__link:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
}

html.light-mode .puzzle-support__link {
  color: var(--amber-logic);
}

/* Notification signup block (TICKET-326 — renders only when backend exists) */
.puzzle-support__signup {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1rem 1.25rem;
}

.puzzle-support__signup-text {
  font-family: var(--font-logic);
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

html.light-mode .puzzle-support__signup {
  background-color: var(--amber-soft);
  border-color: rgba(180, 83, 9, 0.12);
}

/* Mobile: tighten definition list layout on narrow viewports */
@media ( max-width: 480px ) {
  .puzzle-support__controls {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .puzzle-support__controls dt {
    margin-top: 0.75rem;
  }

  .puzzle-support__controls dt:first-child {
    margin-top: 0;
  }
}

/* ─── Archive header ─────────────────────────────────────────────────────────── */

.puzzle-archive-header__title {
  font-family: var(--font-gnosis);
  letter-spacing: 0.16em;
  color: var(--text-primary);
}

html.light-mode .puzzle-archive-header__title {
  color: var(--ink-blueprint);
}

.puzzle-archive-header__desc {
  font-family: var(--font-logic);
  font-size: 0.9rem;
  color: var(--text-muted);
}

html.light-mode .puzzle-archive-header__desc {
  color: var(--ink-slate);
}

/* ─── "Today's puzzle" featured CTA ─────────────────────────────────────────── */

.puzzle-archive-today {
  background-color: var(--bg-panel);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

html.light-mode .puzzle-archive-today {
  background-color: var(--vellum-base);
  border-color: rgba(180, 83, 9, 0.2);
  box-shadow: var(--surface-stack-shadow);
}

.puzzle-archive-today__label {
  font-family: var(--font-logic);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

html.light-mode .puzzle-archive-today__label {
  color: var(--amber-logic);
}

.puzzle-archive-today__title {
  font-family: var(--font-gnosis);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

html.light-mode .puzzle-archive-today__title {
  color: var(--ink-blueprint);
}

.puzzle-archive-today__btn {
  font-family: var(--font-logic);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-color: var(--accent);
  color: var(--ink-nocturnal);
  font-size: 0.875rem;
}

html.light-mode .puzzle-archive-today__btn {
  background-color: var(--amber-logic);
  color: #fff;
}

/* ─── Archive card list ──────────────────────────────────────────────────────── */

.puzzle-archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px; /* stacked card effect */
  background-color: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  overflow: hidden;
}

html.light-mode .puzzle-archive-list {
  background-color: var(--line-soft);
  border-color: var(--line-soft);
}

/* ─── Individual archive card ────────────────────────────────────────────────── */

.puzzle-card {
  background-color: var(--bg-surface);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  transition: background-color var(--dur-fast);
}

.puzzle-card:hover {
  background-color: var(--bg-panel);
}

html.light-mode .puzzle-card {
  background-color: var(--surface-paper);
}

html.light-mode .puzzle-card:hover {
  background-color: var(--vellum-base);
}

.puzzle-card__meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.puzzle-card__date {
  font-family: var(--font-logic);
  font-size: 0.775rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

html.light-mode .puzzle-card__date {
  color: var(--ink-slate);
}

/* Resume/progress marker */
.puzzle-card__marker {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  flex-shrink: 0;
  /* Hidden by default — archive-progress.js shows it for in-progress puzzles */
  display: none;
}

.puzzle-card[data-status="in-progress"] .puzzle-card__marker {
  display: inline-block;
  animation: cws-progress-breathe var(--dur-breathe) ease-in-out infinite;
}

.puzzle-card__title {
  font-family: var(--font-logic);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  border: none;
  padding: 0;
}

.puzzle-card__link {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.puzzle-card__link:hover {
  color: var(--accent);
  text-decoration: none;
  opacity: 1;
}

html.light-mode .puzzle-card__title {
  color: var(--ink-blueprint);
}

html.light-mode .puzzle-card__link:hover {
  color: var(--amber-logic);
}

.puzzle-card__summary {
  font-family: var(--font-logic);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

html.light-mode .puzzle-card__summary {
  color: var(--ink-slate);
}

.puzzle-card__cta {
  font-family: var(--font-logic);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  align-self: flex-start;
  transition: opacity var(--dur-fast);
}

.puzzle-card__cta:hover {
  opacity: 0.7;
  text-decoration: none;
}

html.light-mode .puzzle-card__cta {
  color: var(--amber-logic);
}

/* ─── Archive empty state ────────────────────────────────────────────────────── */

.puzzle-archive-empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-logic);
}

.puzzle-archive-empty__cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  background-color: var(--accent);
  color: var(--ink-nocturnal);
  font-family: var(--font-logic);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  text-decoration: none;
}

html.light-mode .puzzle-archive-empty__cta {
  background-color: var(--amber-logic);
  color: #fff;
}

/* ─── Archive pagination ─────────────────────────────────────────────────────── */

.puzzle-archive-pagination {
  margin-top: 2rem;
  font-family: var(--font-logic);
  font-size: 0.875rem;
}

.puzzle-archive-pagination .page-numbers {
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.puzzle-archive-pagination .page-numbers:hover,
.puzzle-archive-pagination .page-numbers.current {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

html.light-mode .puzzle-archive-pagination .page-numbers:hover,
html.light-mode .puzzle-archive-pagination .page-numbers.current {
  color: var(--amber-logic);
  border-color: var(--amber-logic);
}

/* ─── Archive filter / sort controls (TICKET-261) ───────────────────────────── */

.archive-controls {
  border-bottom-color: var(--border-subtle);
}

.archive-controls__label {
  font-family: var(--font-logic);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.archive-filter-btn,
.archive-sort-btn {
  font-family: var(--font-logic);
  color: var(--text-muted);
  border-color: var(--border-subtle);
  background-color: transparent;
}

.archive-filter-btn:hover,
.archive-sort-btn:hover {
  background-color: var(--bg-panel);
  border-color: var(--accent);
  color: var(--accent);
}

.archive-filter-btn--active,
.archive-sort-btn--active {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--ink-nocturnal);
}

.archive-filter-btn--active:hover,
.archive-sort-btn--active:hover {
  background-color: var(--accent);
  opacity: 0.85;
}

html.light-mode .archive-filter-btn,
html.light-mode .archive-sort-btn {
  color: var(--ink-slate);
  border-color: var(--line-soft);
}

html.light-mode .archive-filter-btn:hover,
html.light-mode .archive-sort-btn:hover {
  background-color: var(--vellum-base);
  border-color: var(--amber-logic);
  color: var(--amber-logic);
}

html.light-mode .archive-filter-btn--active,
html.light-mode .archive-sort-btn--active {
  background-color: var(--amber-logic);
  border-color: var(--amber-logic);
  color: #fff;
}

html.light-mode .archive-filter-btn--active:hover,
html.light-mode .archive-sort-btn--active:hover {
  opacity: 0.9;
}

/* ─── Archive filter no-match state (TICKET-261) ────────────────────────────── */

.archive-filter-no-match {
  font-family: var(--font-logic);
  background-color: var(--bg-panel);
  border-color: var(--border-subtle);
}

html.light-mode .archive-filter-no-match {
  background-color: var(--vellum-base);
  border-color: var(--line-soft);
}

.archive-filter-no-match__message {
  font-family: var(--font-logic);
  color: var(--text-muted);
}

.archive-filter-no-match__reset {
  font-family: var(--font-logic);
  letter-spacing: 0.05em;
  background-color: var(--accent);
  color: var(--ink-nocturnal);
}

.archive-filter-no-match__reset:hover {
  background-color: var(--accent);
  opacity: 0.85;
}

html.light-mode .archive-filter-no-match__reset {
  background-color: var(--amber-logic);
  color: #fff;
}

.archive-filter-no-match__solver {
  font-family: var(--font-logic);
  color: var(--text-muted);
}

html.light-mode .archive-filter-no-match__solver {
  color: var(--ink-slate);
}

html.light-mode .archive-filter-no-match__solver:hover {
  color: var(--amber-logic);
}

/* ─── Mobile adjustments ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .puzzle-controls {
    flex-direction: column;
  }

  .puzzle-complete__actions {
    flex-direction: column;
  }

  .puzzle-archive-today {
    padding: 1rem;
  }
}