/* ==========================================================================
   Scavenger Hunt styles
   Loaded separately (not in bundle) — only when a hunt is active.
   ========================================================================== */

/* Shared accent for the claim pill — recolor in one place. */
:root {
  --hunt-accent-gradient: linear-gradient(135deg, #FF69B4, #FFB6C1);
  --hunt-accent-shadow: 0 4px 12px rgba(255, 105, 180, 0.35);
  /* Shared by .hunt-last-find, .hunt-optout-card and .hunt-update-item --
     same card look, three times over. The dark-mode values are redefined
     ONCE below rather than per-selector: since each consumer's own rule
     already just does background: var(--hunt-card-bg) / border-color:
     var(--hunt-card-border), redefining the tokens here is all three need
     to pick up the dark look -- no separate [data-theme="dark"] .foo block
     per consumer restating the same two values (#782 review). */
  --hunt-card-bg: linear-gradient(135deg, rgba(255, 105, 180, 0.08), rgba(255, 182, 193, 0.12));
  --hunt-card-border: rgba(255, 105, 180, 0.2);
}
[data-theme="dark"] {
  --hunt-card-bg: linear-gradient(135deg, rgba(192, 64, 122, 0.15), rgba(232, 127, 170, 0.1));
  --hunt-card-border: rgba(192, 64, 122, 0.3);
}

/* ── Hidden eggs on pages ─────────────────────────────────── */
.hunt-egg {
  position: absolute;
  /* Ambient chrome nobody asked for (#768, same rule #761 gave the old
     FAB): above .hunt-pill (1001) so an item is never invisible under its
     own claim notice, below every bar/modal/toast the user invoked or that
     carries live state -- the floor is .pms-pick-counter-bar at 1010
     (board.css). Was 99999, which painted over an open modal and the
     Submit Picks bar.
     tests/test_hunt_fab_stacking.py derives that floor from the
     stylesheets rather than hardcoding it. */
  z-index: 1005;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.4s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: hunt-egg-wobble 3s ease-in-out infinite;
}
.hunt-egg:hover {
  animation: none;
  transform: scale(1.15);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.3));
}
.hunt-egg:active {
  transform: scale(0.95);
}
.hunt-egg svg { display: block; }

/* Size classes */
.hunt-egg--sm svg { width: 32px; height: 42px; }
.hunt-egg--md svg { width: 40px; height: 52px; }
.hunt-egg--lg svg { width: 48px; height: 62px; }
.hunt-egg--xl svg { width: 56px; height: 73px; }

/* Subtle wobble animation to help players notice eggs */
@keyframes hunt-egg-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  75% { transform: rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hunt-egg { animation: none !important; }
}

/* ── Bonus eggs (golden glow + sparkle animation) ──────────── */
.hunt-egg--bonus {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 16px rgba(255, 215, 0, 0.4));
  animation: hunt-egg-bonus-glow 2s ease-in-out infinite;
}
.hunt-egg--bonus:hover {
  animation: none;
  transform: scale(1.2);
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 24px rgba(255, 215, 0, 0.5));
}
@keyframes hunt-egg-bonus-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 16px rgba(255, 215, 0, 0.4)); transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.6)); }
  75% { transform: rotate(-3deg); }
}

/* ── Revealed eggs (revealer bonus) ────────────────────────── */
.hunt-egg--revealed {
  animation: hunt-egg-revealed-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hunt-egg-revealed-pulse {
  0%, 100% { opacity: 0.3; filter: drop-shadow(0 0 6px rgba(0, 191, 255, 0.5)); }
  50% { opacity: 0.6; filter: drop-shadow(0 0 14px rgba(0, 191, 255, 0.8)); }
}

/* ── Leaderboard: egg thumbnails ──────────────────────────── */
.hunt-egg-thumb {
  display: inline-block;
  width: 24px;
  height: 31px;
  vertical-align: middle;
}
.hunt-egg-thumb svg {
  width: 100%;
  height: 100%;
}
.hunt-egg-clickable {
  cursor: pointer;
  transition: transform 0.15s ease;
}
.hunt-egg-clickable:hover {
  transform: scale(1.15);
}
.hunt-egg-thumb--grid {
  width: 32px;
  height: 42px;
  margin: 4px;
}
.hunt-egg-thumb--bonus {
  position: relative;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
  border-radius: 50%;
  box-shadow: 0 0 0 2px #FFD700, 0 0 0 3px rgba(255, 215, 0, 0.3);
}
.hunt-player-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hunt-player-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.hunt-inline-eggs {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.hunt-egg-thumb-more {
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
  color: var(--pms-text-muted, #6c757d);
}
.lb-entry-wrap.lb-expanded .hunt-egg-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 12px;
  gap: 4px;
}

/* ── Leaderboard: your collection card ────────────────────── */
.hunt-your-card {
  padding: 16px;
  border-radius: 12px;
}

/* ── Reserved egg (anonymous user holding it) ────────────── */
.hunt-egg--reserved {
  opacity: 0.4;
  filter: grayscale(0.8) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: none;
  cursor: default;
}
.hunt-egg-reserve-badge {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Splash announcement modal ────────────────────────────── */
.hunt-splash-popup {
  border-radius: 16px !important;
  max-width: 520px !important;
  width: calc(100% - 24px) !important;
  margin: 12px !important;
}
@media (max-width: 575.98px) {
  .hunt-splash-popup {
    font-size: 0.9rem !important;
    padding: 16px 12px !important;
  }
  .hunt-splash-popup h2 {
    font-size: 1.15rem !important;
  }
  .hunt-splash-eggs svg {
    width: 20px;
    height: 26px;
  }
}
.hunt-splash-eggs {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 8px 0;
}
.hunt-splash-eggs svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  animation: hunt-egg-wobble 3s ease-in-out infinite;
}
.hunt-splash-eggs svg:nth-child(even) {
  animation-delay: -1.5s;
}
.hunt-splash-content {
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 12px;
}
.hunt-splash-countdown {
  text-align: center;
  font-size: 1.1rem;
  color: #FF69B4;
  margin: 12px 0;
}
.hunt-splash-prize {
  text-align: center;
  background: linear-gradient(135deg, #FFF8E1, #FFF3CD);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 0.9rem;
}
[data-theme="dark"] .hunt-splash-prize {
  background: linear-gradient(135deg, #3d3500, #4a3f00);
  color: #FFD700;
}
.hunt-splash-prize .bi-trophy-fill { color: #FFD700; font-size: 1.2rem; }

/* ── Pre-hunt countdown page (hunt_countdown.html; scoped via the
   html_class hook). The accent gradient endpoints are per-theme values
   from the Hunt model, passed inline as --hunt-accent-a/-b. ─────────── */
.hunt-countdown-page .hunt-cd-title {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 700;
}
.hunt-countdown-page .hunt-cd-card {
  background: linear-gradient(135deg, var(--hunt-accent-a, #FF69B4), var(--hunt-accent-b, #9B59B6));
  color: #fff;
  padding: 16px 24px;
  border-radius: 12px;
}
.hunt-countdown-page .hunt-cd-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}
.hunt-countdown-page .hunt-cd-digits {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hunt-countdown-page .hunt-cd-meta { font-size: 0.85rem; }
.hunt-countdown-page .hunt-splash-emoji { font-size: 28px; line-height: 1; }

/* ── Last finder banner ──────────────────────────────────── */
.hunt-last-find {
  text-align: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--hunt-card-bg);
  border: 1px solid var(--hunt-card-border);
  font-size: 0.9rem;
}
.hunt-last-find-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #FF69B4;
}
.hunt-last-find-name {
  font-weight: 700;
  color: #FF69B4;
}
.hunt-last-find-time {
  font-size: 0.8rem;
}
/* Dark mode: --hunt-card-bg/--hunt-card-border redefine themselves under
   [data-theme="dark"] at :root above -- no override needed here. */

/* ── Prize badge (allow long descriptions to wrap) ───────── */
.hunt-prize-badge {
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.4;
}

/* ── Nav icon (theme emoji, e.g. 🏈/🏀/🥚) ────────────────── */
.hunt-nav-icon { font-size: 0.95em; }

/* ── Theme support ────────────────────────────────────────── */
[data-theme="dark"] .hunt-egg {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* ── Claim pill: quiet notice near the bottom of the screen ────── */
/* Replaces the old corner toast for claims and small bonuses.     */
.hunt-pill {
  position: fixed;
  left: calc(16px + var(--pms-bottom-left-clearance, 0px));
  /* Mirrors .pms-bottom-anchor-aware in app.css: clear Google's bottom
     anchor ad (JS sets the custom property in board.js), the cookie
     banner while it is up, and the iOS home indicator. This is the same
     base offset the retired FAB used to sit at (#1041 removed it; the
     pill is now the only remaining bottom-anchored hunt element). */
  bottom: calc(20px + var(--pms-google-bottom-anchor-clearance, 0px) + env(safe-area-inset-bottom, 0px));
  /* Ambient chrome nobody asked for, so it must lose to every
     bottom-anchored bar the user invoked or that carries live state. The
     floor is .pms-pick-counter-bar at 1010 (board.css); 1000 clears every
     entry in that inventory while still floating over ordinary page
     chrome. tests/test_hunt_fab_stacking.py derives that floor from the
     stylesheets rather than hardcoding it, so a new lower bar fails the
     build. */
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  max-width: min(340px, calc(100vw - 32px));
  padding: 8px 14px;
  border-radius: 50px;
  background: var(--hunt-accent-gradient);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: var(--hunt-accent-shadow);
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.hunt-pill--visible { opacity: 1; transform: translateY(0) scale(1); }

/* While the cookie banner is up it owns the bottom of the viewport, so this
   moves above it — same rule app.css applies to .pms-bottom-anchor-aware. */
body.cookie-consent-visible .hunt-pill {
  bottom: calc(var(--cookie-banner-height, 120px) + 20px + var(--pms-google-bottom-anchor-clearance, 0px) + env(safe-area-inset-bottom, 0px));
}
@media (prefers-reduced-motion: reduce) {
  .hunt-pill { transition: opacity 0.25s ease; transform: none; }
}

/* ── Opt-out control (#765) ────────────────────────────────
   partials/_hunt_optout_control.html, included by both hunt_leaderboard.html
   and hunt_countdown.html. Opted-out is a full card, above the fold, since
   that's where the FAB and nav link both point and this is the switch
   someone arriving is looking for. Opted-in echoes .hunt-last-find's card
   look (both now pull --hunt-card-bg/--hunt-card-border, defined once at
   :root) but stays a single quiet line -- the hunt shouldn't apologise for
   itself to the people enjoying it. */
.hunt-optout-card {
  text-align: center;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--hunt-card-bg);
  border: 1px solid var(--hunt-card-border);
}
.hunt-optout-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.hunt-optout-body {
  color: var(--pms-text-muted, #6c757d);
  margin: 0 0 16px;
}
.hunt-optout-btn {
  background: var(--hunt-accent-gradient);
  color: #fff;
  border: none;
  box-shadow: var(--hunt-accent-shadow);
}
.hunt-optout-btn:hover,
.hunt-optout-btn:focus {
  background: var(--hunt-accent-gradient);
  color: #fff;
  filter: brightness(1.05);
}
.hunt-optout-quiet {
  text-align: center;
}
.hunt-optout-quiet-btn {
  color: var(--pms-text-muted, #6c757d);
  text-decoration: none;
  padding: 0;
}
.hunt-optout-quiet-btn:hover,
.hunt-optout-quiet-btn:focus {
  color: var(--pms-text-muted, #6c757d);
  text-decoration: underline;
}
/* Dark mode: --hunt-card-bg/--hunt-card-border redefine themselves under
   [data-theme="dark"] at :root above -- no override needed here. */

/* ── Updates section (#782) ──────────────────────────────────
   partials/_hunt_updates_section.html, included by both hunt_leaderboard.html
   and hunt_countdown.html (same reasoning as the opt-out control above it).
   A permanent home for every PUBLISHED announcement (is_active, show_after
   already passed), expired ones included, so a future change can shrink
   the modal chain to a one-line banner without losing anything a splash
   used to say. No real <h2>/<h3> here on purpose (see the partial's own
   comment) -- .hunt-updates-heading / .hunt-update-item-title are bold
   text via CSS, not heading elements. */
.hunt-updates-heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 12px;
}
.hunt-updates-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hunt-update-item {
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--hunt-card-bg);
  border: 1px solid var(--hunt-card-border);
}
.hunt-update-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.hunt-update-item-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
.hunt-update-item-date {
  font-size: 0.8rem;
  color: var(--pms-text-muted, #6c757d);
  white-space: nowrap;
}
.hunt-update-item-body {
  font-size: 0.92rem;
}
.hunt-update-item-body > :first-child { margin-top: 0; }
.hunt-update-item-body > :last-child { margin-bottom: 0; }
.hunt-updates-empty {
  text-align: center;
  padding: 16px;
}
/* Dark mode: --hunt-card-bg/--hunt-card-border redefine themselves under
   [data-theme="dark"] at :root above -- no override needed here. */

/* ── Prize winners section (#1406) ───────────────────────────
   hunt_leaderboard.html's <section id="winners">, directly after the
   Updates section above -- reuses .hunt-updates-heading for the title.
   Each announced winner is one compact row (period / name / entries /
   prize), not a full .hunt-update-item card: there is only ever one line
   of data per draw, never a body of arbitrary length. */
.hunt-winners-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.hunt-winner-row {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--hunt-card-bg);
  border: 1px solid var(--hunt-card-border);
  font-size: 0.92rem;
}
.hunt-winner-period,
.hunt-winner-prize {
  font-weight: 600;
}
.hunt-winner-sep {
  color: var(--pms-text-muted, #6c757d);
  margin: 0 2px;
}
.hunt-winners-explainer,
.hunt-winners-next-up {
  color: var(--pms-text-muted, #6c757d);
}
/* Dark mode: --hunt-card-bg/--hunt-card-border redefine themselves under
   [data-theme="dark"] at :root above -- no override needed here. */