.letter-hunt { padding: 8px 22px 22px; text-align: center; animation: hunt-enter .55s ease both; }
.hunt-navigation { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.hunt-back { border: 0; background: none; padding: 10px 0; font-size: 12px; color: #81735e; }
.hunt-step { font-size: 9px; letter-spacing: 1.5px; color: #8e906e; }
.letter-hunt h1 { font-size: 38px; margin: 15px 0 12px; }
.hunt-description { font-size: 12px; line-height: 1.8; color: #92806b; margin: 0 auto 16px; max-width: 290px; }
.hunt-progress { display: inline-flex; gap: 7px; align-items: center; border: 1px solid #dedec7; border-radius: 30px; padding: 8px 13px; background: #eef0df; color: #73815c; font-size: 11px; }
.plush-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 9px; padding: 22px 0 8px; }
.plush-card { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 116px; border: 1px solid #e4d8c5; border-radius: 20px; background: #f0e6d5; padding: 7px 2px 9px; box-shadow: 0 3px 0 #e2d6c2; transition: background .25s, opacity .25s, transform .25s; }
.plush-card:nth-child(3n+2) { background: #ece9d9; border-color: #dedec9; }
.plush-card:nth-child(3n) { background: #f2e3dc; border-color: #e7d5cb; }
.plush-card img { display: block; width: 100%; height: auto; pointer-events: none; transform: rotate(var(--tilt)); transition: transform .35s; }
.plush-card:nth-child(4n+2) img { filter: saturate(.7) brightness(1.07); }
.plush-card:nth-child(4n+3) img { filter: sepia(.12) brightness(.94); }
.plush-label { font-size: 9px; color: #9b836b; margin-top: -4px; }
.plush-card:not(:disabled):hover img { transform: translateY(-4px) rotate(0); }
.plush-card:not(:disabled):active { transform: scale(.95); }
.plush-card.checked { opacity: .55; box-shadow: none; background: #eeeadd; }
.plush-card.checked img { transform: rotate(0) scale(.88); }
.plush-card.found { background: #edf0d8; border-color: #93a374; box-shadow: 0 0 0 3px #9dac7925; }
.plush-card.found img { transform: translateY(-5px) rotate(-6deg); }
.hidden-envelope { position: absolute; bottom: 25px; font-size: 33px; animation: envelope-pop .65s ease both; filter: drop-shadow(0 3px 2px #98764b33); }
.hunt-feedback { min-height: 38px; margin: 10px 0 3px; font-size: 12px; line-height: 1.7; color: #89745e; }
.hunt-note { margin: 16px 0 0; font-size: 10px; color: #a89a84; }
.secret-envelope { margin: 9px auto 22px; width: 90px; height: 65px; background: #ecd4bc; border: 1px solid #d7b89a; border-radius: 8px; display: grid; place-items: center; font-size: 26px; color: #b56c72; position: relative; }
.secret-envelope::before { content: ''; position: absolute; width: 59px; height: 59px; top: -31px; border-right: 1px solid #d7b89a; border-bottom: 1px solid #d7b89a; transform: rotate(45deg); }
.secret-envelope span { z-index: 1; background: #ecd4bc; padding: 3px; border-radius: 50%; }
.secret-message { font-size: 14px; line-height: 1.9; color: #8a7461; overflow-wrap: anywhere; }
.secret-letter-page { width: min(100%,460px); max-width: 460px; max-height: 100svh; margin: auto; padding: 0; overflow: hidden auto; border: 0; border-radius: 28px; color: #6e3445; background: linear-gradient(145deg,#ffcddd,#f7aeca 48%,#e88eb5); box-shadow: 0 25px 100px #791f5666; }
.secret-letter-page::backdrop { background: #6e234c99; backdrop-filter: blur(8px) saturate(.8); }
.secret-close { position: fixed; z-index: 5; top: max(14px,env(safe-area-inset-top)); right: max(14px,calc((100vw - 460px)/2 + 14px)); display: grid; place-items: center; border: 1px solid #fff8; border-radius: 50%; background: #fff8; color: #a64b70; box-shadow: 0 5px 18px #85295530; }
.secret-letter-paper { position: relative; z-index: 2; width: calc(100% - 34px); min-height: calc(100svh - 44px); margin: 22px auto; padding: 50px 25px 28px; overflow: hidden; border: 1px solid #fff9; border-radius: 28px; background: radial-gradient(circle at 50% 0,#fff 0 8%,transparent 36%),linear-gradient(155deg,#fff9f7 0%,#fff0f5 52%,#ffe3ee 100%); box-shadow: 0 18px 50px #9c356033,inset 0 0 40px #fff8; }
.secret-letter-paper::before,.secret-letter-paper::after { content: ''; position: absolute; z-index: -1; width: 150px; height: 150px; border: 1px solid #e8a2bb66; border-radius: 50%; }
.secret-letter-paper::before { left: -90px; top: 28%; box-shadow: 38px 18px 0 -28px #f7bfd1; }
.secret-letter-paper::after { right: -105px; bottom: 12%; box-shadow: -35px -20px 0 -25px #f3b3ca; }
.secret-letter-page .eyebrow { color: #bc6685; }
.secret-letter-page h2 { color: #873c5a; font-size: clamp(34px,10vw,43px); text-shadow: 0 2px #fff; }
.secret-letter-page .secret-message { color: #824f61; line-height: 2; }
.secret-letter-page .signature { color: #bd527a; }
.secret-letter-page .primary { background: linear-gradient(135deg,#d95f8d,#b94372); box-shadow: 0 9px 22px #b23d6a42; }
.secret-letter-page .primary:hover { background: linear-gradient(135deg,#c9507e,#a93564); }
.secret-letter-page .text-button { color: #9c5870; }
.secret-divider { display: flex; align-items: center; gap: 10px; margin: 4px auto 18px; color: #d45f88; }
.secret-divider::before,.secret-divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg,transparent,#dd96af); }
.secret-divider::after { background: linear-gradient(90deg,#dd96af,transparent); }
.secret-divider span { font-size: 18px; }
.rose-corner { position: absolute; z-index: -1; font-size: 78px; opacity: .2; filter: saturate(.8); }
.rose-corner-left { left: -24px; top: -15px; transform: rotate(-28deg); }
.rose-corner-right { right: -27px; bottom: -12px; transform: rotate(25deg); }
.secret-letter-page .secret-envelope { margin-top: 5px; background: linear-gradient(145deg,#f5a9c2,#e47ba3); border-color: #cf668e; color: #fff2f7; box-shadow: 0 10px 25px #ae456d35; }
.secret-letter-page .secret-envelope::before { border-color: #cf668e; background: linear-gradient(135deg,#f9bfd1,#ec91b1); }
.secret-letter-page .secret-envelope span { background: #d55e89; color: #fff; box-shadow: 0 2px 8px #9f355d55; }
.our-memories { margin: 34px -8px 30px; padding-top: 27px; border-top: 1px solid #e9afc3; }
.memory-kicker,.video-heading small { color: #c56c8b; font-size: 8px; font-weight: 700; letter-spacing: 1.8px; }
.our-memories h3 { margin: 9px 0 23px; color: #873c5a; font: 600 27px/1.15 'Fraunces',Georgia,serif; letter-spacing: -.6px; }
.memory-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 12px; align-items: start; }
.memory-photo { margin: 0; padding: 7px 7px 11px; border: 1px solid #efd3dd; border-radius: 8px; background: #fffdfb; box-shadow: 0 7px 18px #9b486426; transform: rotate(-2deg); }
.memory-photo:nth-child(even) { margin-top: 17px; transform: rotate(2.2deg); }
.memory-photo:nth-child(4n+3) { transform: rotate(1deg); }
.memory-photo img,.placeholder-art { display: block; width: 100%; aspect-ratio: 1/1.08; border-radius: 4px; object-fit: cover; background: #f6cad9; }
.memory-photo figcaption { margin-top: 9px; color: #99566e; font: italic 12px/1.2 'Fraunces',Georgia,serif; }
.placeholder-art { display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 26% 22%,#fff8 0 4%,transparent 5%),linear-gradient(145deg,#fbd9e5,#ef9cba); }
.placeholder-art::before,.placeholder-art::after { content: ''; position: absolute; width: 75px; height: 75px; border: 1px solid #fff7; border-radius: 50%; }
.placeholder-art::before { left: -26px; bottom: -23px; }.placeholder-art::after { right: -31px; top: -20px; }
.placeholder-art span { color: #fff8f9; font: 500 48px/1 'Fraunces',serif; text-shadow: 0 3px 10px #a73f6938; }
.memory-video { margin: 35px -8px 30px; text-align: left; }
.video-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 13px; }
.video-heading>span { display: grid; place-items: center; flex: 0 0 38px; height: 38px; padding-left: 2px; border-radius: 50%; background: #d45b87; color: #fff; box-shadow: 0 6px 15px #b33d6840; font-size: 12px; }
.video-heading h3 { margin: 3px 0 0; color: #873c5a; font: 600 21px/1.2 'Fraunces',Georgia,serif; }
.memory-video video,.video-placeholder { display: block; width: 100%; aspect-ratio: 16/10; border: 6px solid #fff; border-radius: 19px; background: #7e3c57; box-shadow: 0 12px 28px #83344f30; object-fit: cover; }
.video-placeholder { display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; color: #fff; background: radial-gradient(circle at 50% 42%,#fff3 0 5%,transparent 6%),linear-gradient(145deg,#d97599,#a83f6a); }
.video-placeholder::before { content: '✦  ♡  ✦'; color: #ffdce8; font-size: 16px; letter-spacing: 8px; }
.video-placeholder p { margin: 0; font: 600 19px/1.45 'Fraunces',Georgia,serif; }.video-placeholder small { color: #ffe3ed; font: 400 11px/1.5 'DM Sans',sans-serif; }
.video-play { display: grid; place-items: center; width: 48px; height: 48px; padding-left: 3px; border: 1px solid #fff8; border-radius: 50%; background: #fff3; font-size: 15px; }
.love-quote { position: relative; margin: 44px 0 38px; padding: 34px 22px 28px; border-block: 1px solid #e5a4ba; color: #a34869; font: italic 600 18px/1.62 'Fraunces',Georgia,serif; text-wrap: balance; overflow-wrap: normal; }
.love-quote::before { content: '“'; position: static; display: block; height: 36px; margin: 0 auto 14px; padding: 0; background: transparent; color: #d36b91; font: 600 46px/1 Georgia,serif; transform: none; }
.secret-closing { margin-bottom: 20px; }
.rose-rain { position: fixed; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.flying-rose { position: absolute; left: var(--rose-left); top: -48px; font-size: 21px; opacity: .74; filter: drop-shadow(0 3px 3px #8d345833); animation: rose-fly var(--rose-duration) linear var(--rose-delay) infinite; }
.secret-letter-page.is-opening .secret-letter-paper { animation: secret-page-open .75s cubic-bezier(.18,.85,.28,1.08) both; }
.secret-letter-page.is-opening .secret-envelope { animation: secret-envelope-open .9s .12s cubic-bezier(.2,.8,.25,1) both; }
@keyframes hunt-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes envelope-pop { from { opacity: 0; transform: translateY(12px) scale(.4) rotate(-20deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(-9deg); } }
@keyframes secret-page-open { from { opacity: 0; transform: translateY(28px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes secret-envelope-open { 0% { opacity: 0; transform: translateY(18px) scale(.65) rotate(-8deg); } 55% { opacity: 1; transform: translateY(-5px) scale(1.08) rotate(4deg); } 100% { transform: translateY(0) scale(1) rotate(0); } }
@keyframes rose-fly { 0% { opacity: 0; transform: translate3d(0,-8vh,0) rotate(0) scale(var(--rose-scale)); } 12% { opacity: .9; } 55% { transform: translate3d(var(--rose-sway),50vh,0) rotate(190deg) scale(var(--rose-scale)); } 100% { opacity: 0; transform: translate3d(var(--rose-return),110vh,0) rotate(390deg) scale(var(--rose-scale)); } }
@media(max-width:360px) { .letter-hunt { padding-inline: 16px; } .letter-hunt h1 { font-size: 34px; } .plush-card { min-height: 101px; border-radius: 16px; } .plush-grid { gap: 9px 7px; } }
@media(max-width:460px) { .secret-letter-page { width: 100%; height: 100svh; border-radius: 0; } .secret-letter-paper { margin-top: max(16px,env(safe-area-inset-top)); margin-bottom: max(16px,env(safe-area-inset-bottom)); min-height: calc(100svh - 32px); } }
@media(prefers-reduced-motion:reduce) { .letter-hunt, .hidden-envelope, .secret-letter-page.is-opening .secret-letter-paper, .secret-letter-page.is-opening .secret-envelope, .flying-rose { animation: none; } .plush-card, .plush-card img { transition: none; } }