/* /hunt/ "What are you hunting?" quiz. Built from site.css tokens: cream paper,
   aubergine ink, hot pink, acid yellow actions, Archivo, 2px ink outlines and
   hard offset shadows. Every selector is .hunt-prefixed. Motion is decoration
   only: site.css already stops animations for prefers-reduced-motion and the
   Pause motion toggle, and the transitions below are dropped there too. */

.hunt { max-width: 1040px; }
.hunt-kicker {
  display: inline-block; background: var(--ink); color: var(--paper); border-radius: 6px;
  padding: 5px 11px; font-size: 0.8rem; font-weight: 700; margin: 0 0 14px;
}

/* ---------- hero ---------- */
.hunt-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.6fr);
  gap: clamp(16px, 4vw, 40px); align-items: center;
  background: var(--hot); border: 2px solid var(--ink); border-radius: 28px;
  padding: clamp(22px, 5vw, 44px); overflow: hidden; margin-bottom: 26px;
}
.hunt-hero h1 { margin: 0 0 12px; }
.hunt-hero h1 .sticker-text { --st-size: clamp(2.1rem, 6.4vw, 4rem); }
.hunt-hero p { margin: 0; max-width: 46ch; font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.hunt-hero__radar { position: relative; justify-self: center; width: min(220px, 100%); }
.hunt-hero__mascot {
  position: absolute; right: -6px; bottom: -10px; width: 42%; height: auto;
  transform: rotate(8deg); filter: drop-shadow(3px 3px 0 var(--ink));
}

/* ---------- the radar scope (hero and reveal) ---------- */
.hunt-scope {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle, transparent 0 18%, rgba(255,244,230,0.18) 18.5% 19.5%, transparent 20% 38%,
      rgba(255,244,230,0.18) 38.5% 39.5%, transparent 40% 58%, rgba(255,244,230,0.18) 58.5% 59.5%, transparent 60%),
    linear-gradient(transparent calc(50% - 1px), rgba(255,244,230,0.18) 0 calc(50% + 1px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,244,230,0.18) 0 calc(50% + 1px), transparent 0),
    var(--ink);
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 rgba(28,16,48,0.35), inset 0 0 0 6px rgba(255,244,230,0.08);
}
.hunt-scope__sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,212,59,0) 0deg, rgba(255,212,59,0) 290deg, rgba(255,212,59,0.55) 358deg, rgba(255,212,59,0) 360deg);
  animation: hunt-sweep 3.2s linear infinite;
}
.hunt-blip, .hunt-ping {
  position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(255,212,59,0.25);
}
.hunt-blip { animation: hunt-blip 3.2s ease-out infinite; animation-delay: var(--d, 0s); }
.hunt-blip::after, .hunt-ping::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--acid); opacity: 0;
}
.hunt-blip::after { animation: hunt-ring 3.2s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes hunt-sweep { to { transform: rotate(360deg); } }
@keyframes hunt-blip { 0%, 100% { opacity: 0.25; } 8% { opacity: 1; } 40% { opacity: 0.5; } }
@keyframes hunt-ring { 0% { transform: scale(1); opacity: 0.9; } 40%, 100% { transform: scale(3.4); opacity: 0; } }

/* ---------- quiz ---------- */
.hunt-quiz {
  background: var(--card); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 4px 4px 0 var(--ink);
  padding: clamp(18px, 4vw, 34px); scroll-margin-top: 90px;
}
.hunt-progress { height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; }
.hunt-progress span {
  display: block; height: 100%; width: calc(var(--p, 0) * 100%); min-width: 10px; background: var(--hot);
  border-right: 2px solid var(--ink); transition: width 420ms cubic-bezier(.3, 1.4, .5, 1);
}
.hunt-loading, .hunt-noscript { margin: 18px 0 0; font-weight: 700; }
.hunt-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.hunt-q {
  padding: 0; margin: 20px 0 0; font-weight: 900; font-stretch: 75%; text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1;
}
.hunt-count { margin: 8px 0 0; font-size: 0.82rem; color: var(--muted); }
.hunt-hint { margin: 6px 0 0; color: var(--muted); font-weight: 600; }
.hunt-group { margin-top: 18px; }
.hunt-group__title {
  margin: 0 0 8px; font-weight: 900; font-stretch: 80%; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.04em;
}
.hunt-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.hunt-opt { position: relative; display: block; cursor: pointer; min-width: 0; }
.hunt-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hunt-opt__face {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 16px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(calc(var(--t, 0) * 0.5deg));
  transition: transform 160ms cubic-bezier(.3, 1.6, .5, 1), background-color 120ms ease-out, box-shadow 120ms ease-out;
}
.hunt-opt__face b { font-weight: 900; font-stretch: 85%; font-size: 1.15rem; line-height: 1.1; text-transform: uppercase; overflow-wrap: anywhere; }
.hunt-opt--brand .hunt-opt__face { min-height: 96px; }
.hunt-opt__img { width: 56px; height: 56px; flex: 0 0 auto; object-fit: contain; }
.hunt-opt:hover .hunt-opt__face { transform: rotate(0deg) translate(-1px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.hunt-opt input:focus-visible + .hunt-opt__face { outline: 3px solid var(--radar); outline-offset: 3px; }
.hunt-opt input:checked + .hunt-opt__face {
  background: var(--acid); transform: rotate(-1.5deg) scale(1.03); box-shadow: 5px 5px 0 var(--ink);
}
.hunt-opt input:checked + .hunt-opt__face::after {
  content: "\2713"; position: absolute; top: -12px; right: -10px; width: 34px; height: 34px;
  display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%;
  background: var(--hot); color: var(--card); font-weight: 900; font-size: 1.05rem;
  transform: rotate(-12deg); animation: hunt-stamp 320ms cubic-bezier(.3, 1.8, .5, 1);
}
.hunt-opt input:checked + .hunt-opt__face .hunt-opt__img { animation: hunt-hop 520ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hunt-stamp { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } }
@keyframes hunt-hop { 40% { transform: translateY(-10px) rotate(-8deg); } }
.hunt-react { min-height: 1.6em; margin: 18px 0 0; font-weight: 800; font-size: 1.05rem; color: var(--hot); }
.hunt-nav, .hunt-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.hunt-btn, .hunt-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 22px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--acid); color: var(--ink);
  font: 800 0.95rem/1.1 'Archivo', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer; transition: transform 110ms ease-out, box-shadow 110ms ease-out;
}
.hunt-btn:hover, .hunt-cta:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.hunt-btn:active, .hunt-cta:active { transform: translate(1px, 1px); box-shadow: none; }
.hunt-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.hunt-btn--ghost { background: transparent; }

/* ---------- result ---------- */
.hunt-result { scroll-margin-top: 90px; }
.hunt-reveal {
  display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: clamp(18px, 4vw, 40px); align-items: center;
  background: var(--hot); border: 2px solid var(--ink); border-radius: 28px; box-shadow: 4px 4px 0 var(--ink);
  padding: clamp(20px, 4vw, 40px);
}
.hunt-reveal__mascot {
  position: absolute; left: 50%; top: 50%; width: 52%; height: auto; transform: translate(-50%, -50%);
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.hunt-reveal__copy { min-width: 0; }
.hunt-reveal__copy .hunt-kicker { margin-bottom: 10px; }
.hunt-reveal h2 { margin: 0; outline: none; }
.hunt-reveal h2 .sticker-text { --st-size: clamp(2rem, 5.6vw, 3.6rem); --st-color: var(--acid); }
.hunt-reveal__line { margin: 14px 0 0; font-size: 1.12rem; font-weight: 600; max-width: 44ch; }
.hunt-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 16px 0 0; }
.hunt-chips li {
  background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 5px 12px;
  font-weight: 800; font-size: 0.8rem; text-transform: uppercase;
}
.hunt-ping { opacity: 0; transform: scale(0); }
.is-celebrating .hunt-ping { animation: hunt-ping-in 600ms cubic-bezier(.3, 1.8, .5, 1) forwards; animation-delay: var(--d, 0s); }
.is-celebrating .hunt-ping::after { animation: hunt-ring 1.6s ease-out infinite; animation-delay: var(--d, 0s); }
.hunt-result:not(.is-celebrating) .hunt-ping { opacity: 1; transform: none; }
.is-celebrating .hunt-reveal__mascot { animation: hunt-mascot-in 700ms cubic-bezier(.2, .9, .3, 1.3) 1.3s both; }
.is-celebrating .hunt-reveal__copy { animation: hunt-rise 600ms cubic-bezier(.2, .9, .3, 1.2) 1.5s both; }
.is-celebrating .hunt-card { animation: hunt-rise 520ms cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(1.8s + var(--i, 0) * 110ms); }
.is-celebrating .hunt-scope--big .hunt-scope__sweep { animation-duration: 1.1s; animation-iteration-count: 2; }
@keyframes hunt-ping-in { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hunt-mascot-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-25deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes hunt-rise { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }

.hunt-h { margin: 34px 0 6px; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.05; }
.hunt-sub { margin: 0 0 16px; color: var(--muted); max-width: 70ch; }
.hunt-watch { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.hunt-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--card); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); padding: 16px;
}
.hunt-card__head { display: flex; align-items: center; gap: 12px; }
.hunt-card__img { width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.hunt-card__names { min-width: 0; }
.hunt-card__brand { display: block; font-size: 0.75rem; color: var(--muted); }
.hunt-card__title { font-size: 1.3rem; line-height: 1.1; overflow-wrap: anywhere; }
.hunt-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--paper);
  font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em;
}
.hunt-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.hunt-badge[data-state="in"]::before { background: var(--in); }
.hunt-badge[data-state="out"]::before { background: var(--out); }
.hunt-card__fact { margin: 0; font-size: 0.92rem; line-height: 1.5; min-height: 2.8em; }
.hunt-card__link { margin-top: auto; font-weight: 800; color: var(--ink); }

.hunt-money {
  display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; margin-top: 30px;
  background: var(--acid); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 4px 4px 0 var(--ink);
  padding: clamp(18px, 4vw, 32px);
}
.hunt-money--xmas { background: var(--hot); }
.hunt-money__mascot { width: 96px; height: 96px; flex: 0 0 auto; transform: rotate(-6deg); filter: drop-shadow(3px 3px 0 var(--ink)); }
.hunt-money__copy { flex: 1 1 300px; min-width: 0; }
.hunt-money__title { font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.05; margin: 0 0 8px; }
.hunt-money__copy p { margin: 0 0 10px; font-weight: 600; max-width: 62ch; }
.hunt-money__copy a:not(.hunt-cta) { font-weight: 800; }
.hunt-money__btns { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 14px !important; }
.hunt-money--xmas .hunt-cta { box-shadow: 3px 3px 0 var(--ink); }
.hunt-fine { font-size: 0.85rem; font-weight: 500 !important; }

.hunt-free { margin-top: 26px; }
.hunt-free__lead { margin: 0 0 10px; font-weight: 800; }
.hunt-free .capture { margin: 0; }
.hunt-share-status { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.hunt-actions { margin-top: 26px; }

/* ---------- entry points on other pages are in site.css (.hunt-entry) ---------- */

@media (max-width: 760px) {
  .hunt-hero { grid-template-columns: 1fr; }
  .hunt-hero__radar { width: 150px; justify-self: start; position: absolute; right: -36px; top: -30px; opacity: 0.35; }
  .hunt-hero__mascot { display: none; }
  .hunt-hero__copy { position: relative; z-index: 1; }
  .hunt-reveal { grid-template-columns: 1fr; justify-items: start; }
  .hunt-reveal .hunt-scope--big { width: min(220px, 70vw); justify-self: center; }
  .hunt-opts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hunt-opt__face { min-height: 64px; padding: 12px; gap: 8px; }
  .hunt-opt--brand .hunt-opt__face { flex-direction: column; align-items: flex-start; }
  .hunt-opt__face b { font-size: 1rem; }
  .hunt-opt__img { width: 44px; height: 44px; }
  .hunt-nav .hunt-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hunt-opt__face, .hunt-progress span, .hunt-btn, .hunt-cta { transition: none; }
  .hunt-ping { opacity: 1; transform: none; }
}
.motion-paused .hunt-opt__face, .motion-paused .hunt-progress span { transition: none; }
.motion-paused .hunt-ping { opacity: 1; transform: none; }