/* ============================================================
   DailyBrainer — Shared Additions CSS
   Version 1.1  |  April 2026

   INTEGRATION: Add to the bottom of your existing <style>
   block (or main CSS file) in every HTML page.
   ============================================================ */


/* ── Streak Display ──────────────────────────────────────── */

.streak-display-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin: 14px 0;
}

.streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(240, 192, 64, 0.12);
  border: 1px solid rgba(240, 192, 64, 0.28);
  border-radius: 40px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text, #f0f0f0);
  letter-spacing: 0.01em;
}

.streak-flame {
  animation: flicker 1.4s ease-in-out infinite alternate;
}

.streak-best {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--muted, #9ba3af);
  padding: 4px 10px;
}

.streak-best--new {
  color: #f0c040;
  font-weight: 700;
}

@keyframes flicker {
  0%   { opacity: 1;   transform: scale(1); }
  100% { opacity: 0.8; transform: scale(1.06); }
}


/* ── Ad Placeholders (hidden by default) ─────────────────── */
/*
   IMPORTANT: The existing per-page CSS in each HTML file sets
   .ad-placeholder { display:flex } which will override this rule
   unless you also fix it at the source. In each HTML file's own
   <style> block, find the .ad-placeholder rule and change:
     display: flex   →   display: none
   The AdManager.showAds() JS then restores display:block for
   returning users only. The !important here is a safety net.
*/

.ad-placeholder {
  display: none !important; /* hidden until AdManager.showAds() fires */
  text-align: center;
  margin: 16px auto;
  max-width: 728px;
}


/* ── Past-Puzzle Banner ──────────────────────────────────── */

.past-puzzle-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(96, 165, 250, 0.10);
  border-bottom: 1px solid rgba(96, 165, 250, 0.22);
  padding: 10px 20px;
  font-size: 0.85rem;
  color: var(--text, #f0f0f0);
  position: relative;
  z-index: 10;
}

.past-puzzle-today-link {
  color: #60a5fa;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.past-puzzle-today-link:hover {
  opacity: 0.75;
  text-decoration: underline;
}


/* ── Yesterday's Puzzle Button ───────────────────────────── */

.btn-yesterday {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted, #9ba3af);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  text-decoration: none;
}

.btn-yesterday:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--text, #f0f0f0);
}


/* ── Streak Container Placement ──────────────────────────── */

/* On the homepage, the streak container sits below the hero */
#streak-container-home {
  display: flex;
  justify-content: center;
  margin: 4px 0 20px;
}

/* On game pages, it sits below the result score */
#streak-container-game {
  display: flex;
  justify-content: center;
  margin: 16px 0 8px;
}