/* One continuous illustrated garden, with accessible search areas over the crowd. */
.hunt-memories { padding: 27px 0 12px; background: linear-gradient(#faf4db,#fff0f5); }
.hunt-memories h2 { margin: 9px 15px 17px; font-size: 25px; color: #98596e; }
.hunt-photo-strip { display: flex; gap: 15px; overflow-x: auto; padding: 10px 25px 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #d59caf transparent; }
.hunt-photo-strip figure { flex: 0 0 158px; margin: 0; padding: 7px 7px 12px; border: 1px solid #f0dbe1; border-radius: 10px; background: #fff; box-shadow: 0 7px 15px #98607620; scroll-snap-align: center; transform: rotate(-2deg); transition: transform .3s; }
.hunt-photo-strip figure:nth-child(even) { transform: rotate(2deg); }
.hunt-photo-strip figure:only-child { margin-inline: auto; }
.hunt-photo-strip figure:hover { transform: translateY(-4px); }
.hunt-photo-strip img { width: 100%; height: 200px; object-fit: contain; background: #fcf0f4; border-radius: 5px; display: block; }
.hunt-photo-strip figcaption { margin-top: 10px; font: italic 12px/1.4 'Fraunces',Georgia,serif; color: #98596e; }
@media(prefers-reduced-motion:reduce) { .hunt-photo-strip figure { transition: none; } }
.phone.hunt-active > .topbar, .phone.hunt-active > footer { display: none; }
.letter-hunt { padding: 0 0 20px; background: #faf4db; }
.hunt-navigation { height: 44px; padding: 0 17px; margin: 0; }
.hunt-back { padding: 10px 0; font-size: 11px; }
.hunt-step { font-size: 8px; letter-spacing: 1.5px; }
.hunt-nav-heart { color: #c78176; font-size: 21px; }
.hunt-scene { position: relative; width: 100%; aspect-ratio: 2 / 3; isolation: isolate; background: #ecdca7; }
.hunt-scenery { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: -1; }
.hunt-heading { position: absolute; left: 4%; right: 4%; top: 1%; background: #fffdf0ed; border: 2px dashed #dfc797; border-radius: 18px; padding: 12px 6px; box-shadow: 0 4px 0 #94763812; }
.letter-hunt .hunt-heading h1 { font: 700 15px/1.5 'DM Sans',sans-serif; letter-spacing: -.25px; margin: 0; }
.hunt-heading h1 span { color: #d77f77; }
.hunt-tip { position: absolute; top: 14%; left: 50%; transform: translateX(-50%) rotate(-1deg); white-space: nowrap; background: #ed98a2; color: #fff9ee; border: 1px solid #e38d98; border-radius: 12px; padding: 10px 19px; font-size: 12px; box-shadow: 0 4px 0 #c16d7526; }
.hunt-description { position: absolute; top: 22%; left: 8%; width: 84%; max-width: none; margin: 0; font-size: 10px; color: #89754c; }
.plush-grid { position: absolute; top: 30%; left: 0; width: 100%; height: 70%; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: repeat(5,minmax(0,1fr)); gap: 0; padding: 0; }
.plush-card, .plush-card:nth-child(3n+2), .plush-card:nth-child(3n) { min-height: 0; width: 100%; height: 100%; padding: 0; background: transparent; border: 0; border-radius: 40%; box-shadow: none; justify-content: center; isolation: isolate; }
.plush-marmot { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--hunt-art); background-repeat: no-repeat; background-size: 500% 714.2857%; background-position: var(--portrait-x) var(--portrait-y); clip-path: ellipse(45% 47% at 50% 52%); transform-origin: 50% 78%; will-change: transform, filter; animation-duration: var(--motion-duration); animation-delay: var(--motion-delay); animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.motion-bob .plush-marmot { animation-name: marmot-bob; }
.motion-sway .plush-marmot { animation-name: marmot-sway; }
.motion-breathe .plush-marmot { animation-name: marmot-breathe; }
.motion-nod .plush-marmot { animation-name: marmot-nod; }
.plush-card:not(:disabled):hover { background: #fff6c51a; }
.plush-card:not(:disabled):hover .plush-marmot { animation-play-state: paused; transform: translateY(-3px) scale(1.025); filter: brightness(1.04); }
.plush-card:not(:disabled):active { transform: scale(.94); background: #fff6c53b; }
.plush-card:focus-visible { outline-offset: -5px; outline: 2px dashed #fffbed; }
.plush-card.checked { opacity: 1; background: transparent; }
.plush-label { position: relative; z-index: 2; font-size: 0; margin: 0; }
.plush-card.checked .plush-label::after { content: '♡'; color: #fffcef; font-size: 27px; text-shadow: 0 2px 2px #8e683b; display: block; animation: envelope-pop .4s ease both; }
.plush-card.found { background: #fff4ae52; border: 2px dashed #fffbed; box-shadow: 0 0 18px #fff0a470; }
.plush-card.found .plush-marmot { animation: marmot-found .72s cubic-bezier(.2,.8,.3,1) both; }
.plush-card.found .plush-label { position: absolute; bottom: 2px; font-size: 10px; padding: 2px 5px; border-radius: 5px; background: #fffae8; color: #926943; }
.letter-clue { position: absolute; z-index: 3; width: 22px; height: 15px; bottom: 18%; left: 58%; background: #fff5d9; border: 1px solid #baa787; border-radius: 1px; transform: rotate(-18deg); box-shadow: 0 1px 2px #6e582d44; pointer-events: none; }
.letter-clue::before { content: ''; position: absolute; inset: 0; background: #e5d5b7; clip-path: polygon(0 0,50% 64%,100% 0,100% 12%,50% 75%,0 12%); }
.letter-clue span { font-size: 8px; color: #bf7772; position: absolute; top: 4px; left: 8px; }
.hidden-envelope { z-index: 4; bottom: 25%; font-size: 31px; }
.marmot-reaction { position: absolute; z-index: 5; left: 50%; top: 28%; color: #fffbed; font: 700 24px/1 serif; text-shadow: 0 2px 3px #8d663f; pointer-events: none; animation: marmot-reaction .72s ease-out both; }
.hunt-progress { position: absolute; bottom: 1.5%; left: 50%; transform: translateX(-50%); background: #fff9e7ed; color: #8e784d; font-size: 9px; padding: 6px 10px; white-space: nowrap; pointer-events: none; }
.hunt-feedback { margin: 15px 22px 7px; min-height: 34px; font-size: 12px; }
#read-secret { width: calc(100% - 40px); margin: 0 20px; }
.hunt-note { margin: 12px 20px 0; font-size: 9px; }
@keyframes marmot-bob { 0%,100% { transform: translateY(0) rotate(-.35deg); } 50% { transform: translateY(-2.5px) rotate(.35deg); } }
@keyframes marmot-sway { 0%,100% { transform: rotate(-.7deg) scale(1); } 50% { transform: rotate(.7deg) scale(1.008); } }
@keyframes marmot-breathe { 0%,100% { transform: scale(1); } 50% { transform: translateY(-1px) scale(1.012,1.018); } }
@keyframes marmot-nod { 0%,100% { transform: translateY(0) scaleY(1); } 45% { transform: translateY(1px) scaleY(.99); } 65% { transform: translateY(-2px) scaleY(1.008); } }
@keyframes marmot-found { 0% { transform: scale(1); } 35% { transform: translateY(-8px) rotate(-2deg) scale(1.035); } 65% { transform: translateY(-3px) rotate(2deg) scale(1.02); } 100% { transform: translateY(-4px) rotate(0) scale(1.025); } }
@keyframes marmot-reaction { 0% { opacity: 0; transform: translate(-50%,8px) scale(.4) rotate(-12deg); } 35% { opacity: 1; transform: translate(-50%,-5px) scale(1.15) rotate(7deg); } 100% { opacity: 0; transform: translate(-50%,-22px) scale(.85) rotate(0); } }
@media(max-width:360px) { .letter-hunt { padding-inline: 0; } .letter-hunt .hunt-heading h1 { font-size: 13px; } .hunt-heading { padding: 9px 5px; border-radius: 15px; } .hunt-tip { font-size: 10px; padding: 8px 14px; } .hunt-description { font-size: 9px; } .plush-grid { gap: 0; } .plush-card { min-height: 0; } }
@media(prefers-reduced-motion:reduce) { .plush-marmot, .plush-card.found .plush-marmot, .marmot-reaction { animation: none; transform: none; } .plush-card:not(:disabled):hover .plush-marmot { transform: none; filter: none; } }