/* The Hunt page. Builds on ../styles.css (tokens, header, buttons, footer, age gate). */
.hunt main { display: block; }
.hunt main > section { scroll-margin-top: 90px; }
.hunt h2 em { color: #B5841A; }
.hunt-lede { font-size: clamp(17px, 1.35vw, 20px); max-width: 38em; }

/* ---------- 1. map hero ---------- */
.hunt-hero { padding: clamp(120px, 12vw, 160px) 0 clamp(48px, 6vw, 80px); }
.hunt-hero h1 { font-size: clamp(36px, 4.6vw, 64px); max-width: 15em; }
.hunt-hero h1 em { color: #B5841A; }
.hmap-hint { opacity: .8; margin-bottom: clamp(16px, 2vw, 24px); }
.only-touch { display: none; }
@media (hover: none), (pointer: coarse) { .only-desk { display: none; } .only-touch { display: inline; } }

.hmap-card { position: relative; background: #FBF7EF; border-radius: 28px; padding: clamp(8px, 2vw, 24px); box-shadow: 0 14px 36px rgba(60,51,39,.10); }
.hmap-svg { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 16px; --line: 1.6; --dash: 2.5 5; }
.hroute { fill: none; stroke: #E8743B; stroke-width: var(--line); stroke-dasharray: var(--dash); stroke-linecap: round; opacity: .28; transition: opacity .25s ease; }
.has-active .hroute { opacity: .1; }
.hroute.on { opacity: 1 !important; animation: hunt-dash 1.4s linear infinite; }
@keyframes hunt-dash { to { stroke-dashoffset: -30; } }
.hpin .dot { fill: #E8743B; stroke: #FBF7EF; stroke-width: 1.5; transition: r .2s ease; }
.hpin-open .dot { fill: #FBF7EF; stroke: #E8743B; stroke-width: 2; }
.hpin .pulse { fill: #E8743B; fill-opacity: 0; transform-box: fill-box; transform-origin: center; }
.hpin.on .dot { r: 6.5; }
.hpin.on .pulse { fill-opacity: .35; animation: hunt-pulse 1.8s ease-out infinite; }
@keyframes hunt-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.8); opacity: 0; } }
.hub-ring { fill: #FBF7EF; stroke: #5E8A36; stroke-width: 2.5; }

.hmap-tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 18px)); margin: clamp(8px, 2vw, 24px) 0 0 clamp(8px, 2vw, 24px);
  background: #2B241B; color: var(--cream); border-radius: 16px; padding: 12px 16px; min-width: 170px; max-width: 260px; pointer-events: none;
  box-shadow: 0 14px 30px -12px rgba(28,22,14,.5); }
.hmap-tip.below { transform: translate(-50%, 18px); }
.hmap-tip strong { display: block; font: 600 22px/1.1 var(--display); margin: 2px 0 4px; }
.hmap-tip span { display: block; font-size: 14px; }
.hmap-tip .tip-country { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--citrus); }

.hpin.dim, .hroute.dim { opacity: 0 !important; pointer-events: none; transition: opacity .3s ease; }
.hpin { transition: opacity .3s ease; }

.hregions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(16px, 2vw, 24px); }
.hregions button { font: 600 15px/1 var(--body); color: var(--brown); background: transparent; border: 0; border-radius: 999px; padding: 10px 16px;
  box-shadow: inset 0 0 0 1.5px rgba(60,51,39,.22); cursor: pointer; transition: background .2s ease, box-shadow .2s ease; white-space: nowrap; }
.hregions button span { display: inline-block; min-width: 1.6em; margin-left: 4px; padding: 2px 6px; border-radius: 999px; background: rgba(60,51,39,.08); font-size: 12px; }
.hregions button:hover { box-shadow: inset 0 0 0 1.5px var(--brown); }
.hregions button.on { background: var(--brown); color: var(--cream); box-shadow: none; }
.hregions button.on span { background: var(--citrus); color: var(--brown); }
@media (max-width: 760px) {
  .hregions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .hregions::-webkit-scrollbar { display: none; }
}

.hcity[hidden] { display: none; }
.hregion-explore { margin-top: 14px; }
.hregion-explore[hidden] { display: none; }
.hmap-tip .tip-go { color: var(--citrus); font-weight: 600; margin-top: 4px; }
a.hcity { color: inherit; }
.hcity-row { position: relative; margin-top: 12px; }
.hcity-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 48px; scrollbar-width: none; padding: 4px 48px 8px; }
.hcity-strip::-webkit-scrollbar { display: none; }
.hcity { flex: none; width: 190px; scroll-snap-align: start; text-decoration: none; background: #FFFDF8; border-radius: 18px; padding: 12px 14px;
  box-shadow: inset 0 0 0 1.5px rgba(60,51,39,.1); transition: background .2s ease, box-shadow .2s ease, transform .2s ease; }
.hcity strong { display: block; font: 600 20px/1.1 var(--display); margin: 2px 0 3px; }
.hcity-country { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9A7A1E; }
.hcity-drinks { display: block; font-size: 13px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcity.open .hcity-drinks { font-style: italic; }
.hcity.on { background: var(--citrus); box-shadow: none; transform: translateY(-2px); }
.hcity.on .hcity-country { color: var(--brown); }
.hcity-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--brown); color: var(--cream);
  font: 600 24px/1 var(--display); cursor: pointer; z-index: 2; box-shadow: 0 6px 16px rgba(60,51,39,.25); }
.hcity-nav.prev { left: 0; } .hcity-nav.next { right: 0; }
@media (hover: none), (pointer: coarse) {
  .hcity-nav { display: none; }
  .hcity-strip { scroll-snap-type: x mandatory; padding-inline: calc(50% - 110px); }
  .hcity { width: 220px; scroll-snap-align: center; }
}
@media (max-width: 760px) {
  .hunt-hero { padding-top: 104px; }
  .hmap-card { margin: 0 -8px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { .hroute.on, .hpin.on .pulse { animation: none; } }

/* ---------- 2. what ---------- */
.hunt-what { padding: clamp(72px, 10vw, 130px) 0 clamp(48px, 6vw, 80px); }
.hunt-what h2 { font-size: clamp(34px, 4.4vw, 60px); max-width: 16em; }
.hunt-three { list-style: none; padding: 0; margin: clamp(28px, 4vw, 48px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.hunt-three li { background: #FBF7EF; border-radius: 28px; padding: clamp(22px, 2.4vw, 32px); }
.hunt-three span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--citrus); font: 700 20px var(--display); margin-bottom: 14px; }
.hunt-three h3 { font-size: 28px; }
.hunt-three p { margin: 0; }
@media (max-width: 760px) { .hunt-three { grid-template-columns: 1fr; } }

/* ---------- 4. coming home ---------- */
.hunt-home { background: var(--mint); padding: clamp(72px, 10vw, 130px) 0; text-align: center; }
.hunt-home h2 { font-size: clamp(34px, 4.4vw, 60px); }
.hunt-home h2 em { color: var(--brown); text-decoration: underline; text-decoration-color: var(--citrus); text-decoration-thickness: .12em; text-underline-offset: .12em; }
.hunt-home-cans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 3vw, 40px); margin-top: clamp(28px, 4vw, 48px); }
.hunt-home-cans a { text-decoration: none; display: flex; flex-direction: column; align-items: center; }
.hunt-home-cans img { height: clamp(200px, 26vw, 360px); width: auto; filter: drop-shadow(0 18px 20px rgba(60,51,39,.25)); transition: transform .3s ease; }
.hunt-home-cans a:hover img { transform: translateY(-6px) rotate(-2deg); }
.hunt-home-cans span { font: 600 clamp(20px, 2vw, 28px)/1.1 var(--display); margin-top: 16px; }
.hunt-home-cans small { font-weight: 600; opacity: .7; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }

/* ---------- 5. vote: the cocktail race ---------- */
.hunt-vote { padding: clamp(72px, 10vw, 130px) 0; }
.hunt-vote h2 { font-size: clamp(34px, 4.4vw, 60px); max-width: 16em; }
.race-card { background: #FFFDF8; border-radius: 32px; padding: clamp(20px, 3.2vw, 40px); margin-top: clamp(20px, 3vw, 36px);
  box-shadow: 0 24px 50px -30px rgba(60,51,39,.45); position: relative; overflow: hidden; }
.race-card::before { content: ''; position: absolute; inset: auto 0 -60px 0; height: 140px; background: radial-gradient(60% 100% at 30% 100%, rgba(196,211,160,.45), transparent 70%), radial-gradient(50% 100% at 80% 100%, rgba(241,195,74,.35), transparent 70%); pointer-events: none; }
.race-top { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); margin-bottom: clamp(18px, 2.6vw, 30px); }
.race-clock { position: relative; width: clamp(104px, 11vw, 132px); flex: none; }
.race-clock svg { display: block; width: 100%; transform: rotate(-90deg); }
.clock-track { fill: none; stroke: rgba(60,51,39,.08); stroke-width: 12; }
.clock-fill { fill: none; stroke: #E8743B; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.3,.8,.3,1); }
.clock-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.clock-text strong { font: 700 clamp(32px, 3.4vw, 42px)/1 var(--display); }
.clock-text span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.clock-text small { font-size: 12px; opacity: .65; margin-top: 3px; }
.race-round { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9A7A1E; }
.vote-dot { width: 9px; height: 9px; border-radius: 50%; background: #E8743B; animation: hunt-blink 1.6s ease-in-out infinite; }
@keyframes hunt-blink { 50% { opacity: .25; } }
.race-buzz { font: 600 clamp(20px, 2.1vw, 28px)/1.2 var(--display); margin: 6px 0 4px; }
.race-total { margin: 0; font-size: 15px; opacity: .7; }

.race { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(10px, 1.4vw, 16px); position: relative; }
.lane { display: grid; grid-template-columns: minmax(120px, 170px) 1fr 76px 118px; gap: clamp(10px, 1.6vw, 18px); align-items: center; }
.lane-who strong { display: block; font: 600 clamp(18px, 1.6vw, 22px)/1.1 var(--display); }
.lane-who span { font-size: 13px; opacity: .7; }
.lane-track { position: relative; height: clamp(72px, 7vw, 90px); border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(60,51,39,.12) 0 10px, transparent 10px 20px) center / 100% 2px no-repeat, rgba(60,51,39,.04); }
.lane-fill { position: absolute; left: 0; top: 18%; bottom: 18%; width: 0; border-radius: 999px; background: var(--col); transition: width 1.6s cubic-bezier(.3,.8,.3,1); }
.lane-racer { position: absolute; top: 50%; left: 0; width: clamp(72px, 7.4vw, 96px); aspect-ratio: 3 / 4; transform: translate(-50%, -54%); transition: left 1.6s cubic-bezier(.3,.8,.3,1); z-index: 1; }
.lane-racer img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(60,51,39,.12)); }
.race.go .lane-fill { width: calc(var(--to) * .82); }
.race.go .lane-racer { left: calc(var(--to) * .82); animation: racer-bob 1.1s ease-in-out infinite; }
.lane:nth-child(2) .lane-racer { animation-delay: .15s; } .lane:nth-child(3) .lane-racer { animation-delay: .3s; }
.lane:nth-child(4) .lane-racer { animation-delay: .45s; } .lane:nth-child(5) .lane-racer { animation-delay: .6s; }
@keyframes racer-bob { 50% { transform: translate(-50%, -62%) rotate(-4deg); } }
.crown { position: absolute; left: 50%; top: -14px; transform: translateX(-50%) rotate(-12deg); font-size: 20px; }
.lane-flag { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 20px; opacity: .5; }
.leader .lane-flag { opacity: 1; }
.lane-pct strong { display: block; font: 700 clamp(22px, 2vw, 28px)/1 var(--display); }
.lane-pct span { font-size: 12px; opacity: .65; }
.leader .lane-pct strong { color: #E8743B; }
.lane-vote { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--citrus); color: var(--brown); font: 600 14px/1 var(--body); white-space: nowrap; transition: transform .15s ease; }
.lane-vote:hover { transform: translateY(-2px) rotate(-2deg); }
.lane-vote:active { transform: scale(.94); }
.lane-vote.voted { background: var(--brown); color: var(--cream); }
.confetti { position: absolute; left: 50%; top: 50%; width: 8px; height: 10px; border-radius: 2px; pointer-events: none; animation: confetti .9s ease-out forwards; }
@keyframes confetti { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
.race-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: clamp(20px, 2.6vw, 30px); position: relative; }
.race-foot .vote-note { margin: 0; font-size: 14px; opacity: .7; max-width: 34em; }
@media (max-width: 760px) {
  .lane { grid-template-columns: 1fr auto; grid-template-areas: "who pct" "track track" "vote vote"; gap: 6px 10px; padding-bottom: 12px; border-bottom: 1.5px dashed rgba(60,51,39,.1); }
  .lane-who { grid-area: who; } .lane-pct { grid-area: pct; text-align: right; } .lane-track { grid-area: track; margin-top: 16px; } .lane-vote { grid-area: vote; justify-self: start; padding: 8px 12px; }
  .race-top { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .lane-fill, .lane-racer, .clock-fill { transition: none; }
  .race.go .lane-racer { animation: none; }
}

/* ---------- 6. submit ---------- */
.hunt-submit { background: #FBF7EF; padding: clamp(72px, 10vw, 130px) 0; }
.hunt-submit h2 { font-size: clamp(34px, 4.4vw, 60px); max-width: 15em; }
.submit-form { max-width: 820px; margin-top: clamp(20px, 3vw, 36px); background: #FFFDF8; border-radius: 28px; padding: clamp(22px, 3.4vw, 40px); box-shadow: 0 24px 50px -30px rgba(60,51,39,.4); }
.submit-form fieldset { border: 0; padding: 0; margin: 0 0 26px; display: grid; gap: 16px; }
.submit-form legend { font: 600 24px var(--display); margin-bottom: 14px; }
.submit-form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.submit-form input:not([type=checkbox]), .submit-form textarea { font: 400 16px var(--body); color: var(--brown); padding: 13px 15px; border-radius: 14px; border: 1.5px solid rgba(60,51,39,.2); background: #fff; width: 100%; }
.submit-form textarea { resize: vertical; }
.submit-form [aria-invalid] { border-color: #B3432F !important; box-shadow: 0 0 0 3px rgba(179,67,47,.15); }
.submit-form .opt { font-weight: 400; opacity: .6; font-size: 13px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tags-label { font-weight: 600; font-size: 15px; display: block; margin-bottom: 8px; }
.tag-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-picks label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(60,51,39,.18); cursor: pointer; font-size: 14px; }
.tag-picks label:has(input:checked) { background: var(--mint); box-shadow: none; }
.tag-picks input { accent-color: #5E8A36; margin: 0; }
.submit-form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.submit-form .check input { margin-top: 4px; accent-color: #5E8A36; width: 18px; height: 18px; flex: none; }
.submit-msg { margin: 14px 0 0; font-weight: 600; }
.form-note { margin: 0; padding: 12px 14px; border-radius: 14px; background: #F7F0E1; font-size: 14px; line-height: 1.45; }
.submit-form.done fieldset, .submit-form.done .submit-btn { display: none; }
@media (max-width: 760px) { .row2 { grid-template-columns: 1fr; } }

/* ---------- 7. rules ---------- */
.hunt-rules { padding: clamp(72px, 10vw, 130px) 0; }
.hunt-rules h2 { font-size: clamp(34px, 4.4vw, 60px); }
.rounds { list-style: none; padding: 0; margin: clamp(24px, 3.4vw, 40px) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: r; }
.rounds li { counter-increment: r; background: #FBF7EF; border-radius: 24px; padding: 22px; display: grid; gap: 6px; align-content: start; border-top: 6px solid var(--citrus); }
.rounds li::before { content: 'Step ' counter(r); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9A7A1E; }
.rounds strong { font: 600 22px/1.15 var(--display); }
.rounds span { font-size: 15px; }
.faq { max-width: 820px; }
.faq details { border-bottom: 1.5px solid rgba(60,51,39,.12); padding: 18px 0; }
.faq summary { font: 600 20px var(--display); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: '+'; font-size: 26px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: 10px 0 0; max-width: 40em; }
@media (max-width: 900px) { .rounds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rounds { grid-template-columns: 1fr; } }

/* ---------- 8. community ---------- */
.hunt-community { background: #FBF7EF; padding: clamp(72px, 10vw, 130px) 0; }
.hunt-community h2 { font-size: clamp(34px, 4.4vw, 60px); }
.hunt-community .hunt-lede a { font-weight: 600; text-underline-offset: 4px; }
.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 24px); margin-top: clamp(20px, 3vw, 36px); }
.reel { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #2B241B; }
.reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel figcaption { position: absolute; inset: auto 0 0 0; padding: 40px 16px 16px; color: #FBF7EF; font-size: 14px; background: linear-gradient(0deg, rgba(28,22,14,.85), transparent); }
.reel figcaption b { display: block; font: 600 20px/1.1 var(--display); margin-bottom: 4px; }
.reel-empty { background: transparent; border: 2.5px dashed rgba(60,51,39,.25); display: grid; place-items: center; }
.reel-empty figcaption { position: static; background: none; color: var(--brown); text-align: center; padding: 20px; }
@media (max-width: 760px) { .reels { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 9. join ---------- */
.hunt-join { background: var(--citrus); padding: clamp(72px, 10vw, 130px) 0; text-align: center; }
.hunt-join h2 { font-size: clamp(40px, 5vw, 72px); }
.hunt-join .hunt-lede { margin: 0 auto 1.4em; }
.hunt-join .btn-primary { background: var(--brown); color: var(--cream); }
.join-note { font-size: 14px; opacity: .7; margin: 1em 0 0; }

/* small privacy line under the submit button */
.hunt .form-legal { font-size: 13px; opacity: .75; margin: 10px 0 0; text-align: center; }
.hunt .form-legal a { color: inherit; text-decoration: underline; }

.lane-vote { text-decoration: none; color: inherit; }