/* =========================================================
   Doordle — public archive styles
   Layers on top of doordle.css (same CSS variables / palette).
   Covers the /quiz index, the replayable day pages, and the 404.
   ========================================================= */

/* --- Top bar --------------------------------------------------------- */
.dq-arch-top{
  width:100%;max-width:1000px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 20px 0;gap:16px;
}
.dq-arch-brand{
  font-size:26px;color:var(--text);text-decoration:none;letter-spacing:.01em;
}
.dq-arch-brand span{color:var(--red)}
.dq-arch-nav{display:flex;gap:20px}
.dq-arch-nav a{
  color:var(--muted);text-decoration:none;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 0;border-bottom:2px solid transparent;transition:.15s;
}
.dq-arch-nav a:hover{color:var(--text)}
.dq-arch-nav a[aria-current="page"]{color:var(--text);border-color:var(--red)}

/* --- Main content column --------------------------------------------- */
.dq-arch-main{
  flex:1;width:100%;max-width:1000px;margin:0 auto;padding:48px 20px 60px;
}
.dq-arch-title{font-size:clamp(38px,7vw,68px);line-height:.95;margin:6px 0 14px;color:var(--text)}
.dq-arch-title::after{content:".";color:var(--red)}
.dq-arch-intro{color:var(--muted);font-weight:300;font-size:18px;max-width:560px;margin:0 0 26px}
.dq-arch-empty{color:var(--muted);font-weight:300}

/* --- Index grid ------------------------------------------------------ */
.dq-arch-grid{
  list-style:none;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.dq-arch-card a{
  display:flex;flex-direction:column;gap:12px;height:100%;
  padding:22px 20px;background:var(--surface);border:1px solid var(--border);
  text-decoration:none;transition:.15s;
}
.dq-arch-card a:hover{border-color:var(--red);transform:translateY(-3px)}
.dq-arch-date{font-size:20px;color:var(--text);line-height:1.2}
.dq-arch-cats{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.dq-arch-chip{
  font-size:11px;letter-spacing:.04em;color:var(--muted);
  background:var(--card);border:1px solid var(--border);padding:3px 9px;border-radius:2px;
}
.dq-arch-play{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);
  display:inline-flex;align-items:center;gap:7px;
}

/* --- Pagination ------------------------------------------------------ */
.dq-arch-pager{
  display:flex;align-items:center;justify-content:center;gap:22px;margin-top:40px;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
}
.dq-arch-pager a{color:var(--red);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.dq-arch-pager a:hover{color:var(--red-2)}
.dq-arch-pager-pos{color:var(--faint)}

/* =========================================================
   Day page — replay hero + recap
   ========================================================= */

/* Date strip above the playable game */
.dq-arch-daybar{
  width:100%;max-width:1000px;margin:18px auto 0;padding:0 20px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.dq-arch-daybar .lbl{display:inline-flex;align-items:center;gap:7px}
.dq-arch-daydate{font-size:16px;color:var(--muted)}

/* Keep the replay as a tall hero rather than eating the whole viewport, so the
   recap below it is discoverable (the live game lets .game-area take flex:1). */
.dq-arch-day .game-area{
  flex:0 0 auto;min-height:min(78vh,680px);padding-top:34px;
}

/* Recap wrapper sits in the normal flow below the hero */
.dq-arch-recap-wrap{padding-top:8px}

.dq-recap{border-top:1px solid var(--border);padding-top:32px}
.dq-recap h2{font-size:clamp(26px,4vw,38px);margin:6px 0 10px;color:var(--text)}
.dq-recap-note{color:var(--muted);font-weight:300;max-width:620px;margin:0 0 26px}
.dq-recap-list{list-style:none;counter-reset:dqq;display:flex;flex-direction:column;gap:18px}
.dq-recap-item{
  position:relative;padding:20px 20px 20px 58px;
  background:var(--surface);border:1px solid var(--border);
}
.dq-recap-item::before{
  counter-increment:dqq;content:counter(dqq);
  position:absolute;left:18px;top:18px;
  font-family:'Special Elite','Courier New',monospace;font-size:22px;color:var(--red);
}
.dq-recap-q{font-size:18px;color:var(--text);margin:0 0 10px;line-height:1.4}
.dq-recap-chip{display:inline-block;margin-bottom:6px}
.dq-recap-ans{margin-top:8px}
.dq-recap-ans summary{
  cursor:pointer;color:var(--red);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  list-style:none;display:inline-flex;align-items:center;gap:8px;
}
.dq-recap-ans summary::-webkit-details-marker{display:none}
.dq-recap-ans summary::before{content:"\f0d7";font-family:"Font Awesome 6 Free";font-weight:900;font-size:11px}
.dq-recap-ans[open] summary::before{content:"\f0d8"}
.dq-recap-opts{list-style:none;margin:14px 0 0;display:flex;flex-direction:column;gap:7px}
.dq-recap-opts li{
  display:flex;align-items:center;gap:11px;padding:9px 12px;
  background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:15px;
}
.dq-recap-opts li.is-correct{
  color:var(--text);border-color:var(--red);background:var(--red-d);font-weight:600;
}
.dq-recap-opts li.is-correct .fa-check{margin-left:auto;color:var(--red)}
.dq-recap-key{
  font-family:'Special Elite','Courier New',monospace;font-size:13px;color:var(--faint);
  width:18px;text-align:center;flex:none;
}

/* Prev / All / Next */
.dq-arch-daynav{
  display:flex;align-items:stretch;justify-content:space-between;gap:14px;margin-top:40px;
}
.dq-arch-daynav-link{
  display:flex;align-items:center;gap:12px;flex:1;max-width:46%;
  padding:16px 18px;background:var(--surface);border:1px solid var(--border);
  text-decoration:none;color:var(--text);transition:.15s;
}
.dq-arch-daynav-link:hover{border-color:var(--red)}
.dq-arch-daynav-next{justify-content:flex-end;text-align:right}
.dq-arch-daynav-link span span{display:block}
.dq-arch-daynav-lbl{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:2px;
}
.dq-arch-daynav i{color:var(--red)}
.dq-arch-daynav-all{
  align-self:center;color:var(--muted);text-decoration:none;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.dq-arch-daynav-all:hover{color:var(--text)}

/* Play-today call to action */
.dq-arch-today-cta{
  text-align:center;margin-top:48px;padding-top:34px;border-top:1px solid var(--border);
}
.dq-arch-today-cta p{color:var(--muted);font-weight:300;margin:0 0 16px}
.dq-arch-btn{
  display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:13px 30px;transition:.15s;
}
.dq-arch-btn:hover{background:var(--red-2)}
.dq-arch-btn-ghost{background:none;border:1px solid var(--border-hi);color:var(--text)}
.dq-arch-btn-ghost:hover{background:none;border-color:var(--text)}

/* 404 */
.dq-arch-404 .dq-arch-main{text-align:center}
.dq-arch-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}

/* Ad placeholders — invisible until real ads are dropped in (data-ad-slot) */
.dq-ad{margin:14px 0}
.dq-ad:empty{margin:0}

/* History replay marker (used inside doordle.css's .doordle-history) */
.dq-replay-badge{color:var(--red);font-size:11px;margin-right:5px;opacity:.85}

@media (max-width:640px){
  .dq-arch-main{padding:32px 16px 48px}
  .dq-arch-daynav{flex-direction:column}
  .dq-arch-daynav-link{max-width:none}
  .dq-arch-daynav-all{order:3}
}