/* A soft editorial frame for the bouquet chapter. */
#letter-dialog { isolation: isolate; border: 1px solid #e8b7c5; background: radial-gradient(ellipse at top,#fff2f6,transparent 55%),#fffaf3; padding: 46px 30px 34px; }
#letter-dialog::before { content: ''; position: absolute; inset: 12px; border: 1px solid #dda3b780; border-radius: 18px; pointer-events: none; z-index: -1; }
#letter-dialog .close { z-index: 3; right: 15px; top: 15px; width: 32px; height: 32px; border-radius: 50%; background: #fffaf3ed; color: #a4607a; }
#letter-dialog .letter-flowers { position: relative; z-index: 1; }
#letter-dialog.has-photo-background { background-image: linear-gradient(180deg,#fff5f959 0%,#fff8f3b8 32%,#fff8f3e8 58%,#fff5f4d9 100%),var(--letter-photo); background-size: cover; background-position: center top; background-repeat: no-repeat; }
#letter-dialog.has-photo-background .letter-message { color: #593e38; text-shadow: 0 1px 3px #fff; }
#letter-dialog.has-photo-background h2 { color: #623d42; text-shadow: 0 2px 6px #fff; }
#letter-dialog.has-photo-background .eyebrow { color: #765044; text-shadow: 0 1px 3px #fff; }
.letter-corner { position: absolute; width: 64px; height: 68px; pointer-events: none; z-index: -1; }
.letter-corner .corner-rose { position: absolute; left: 0; top: 7px; font-size: 34px; transform: rotate(-30deg); filter: drop-shadow(0 3px 3px #b4617d25); }
.letter-corner .corner-heart { position: absolute; right: 0; top: 7px; color: #d37c9c; font: 24px/1 Georgia,serif; animation: corner-heart-glow 3.8s ease-in-out infinite; }
.letter-corner .corner-heart-small { position: absolute; left: 13px; bottom: 0; font: 17px/1 Georgia,serif; color: #c987a0; animation: corner-heart-glow 3.8s -1.9s ease-in-out infinite; }
.letter-corner-tl { top: 5px; left: 5px; }
.letter-corner-tr { top: 5px; right: 5px; transform: scaleX(-1); }
.letter-corner-bl { bottom: 5px; left: 5px; transform: scaleY(-1); }
.letter-corner-br { bottom: 5px; right: 5px; transform: scale(-1); }
@keyframes corner-heart-glow { 0%,100% { opacity: .45; scale: .88; } 50% { opacity: 1; scale: 1.08; } }
@media(prefers-reduced-motion:reduce) { .letter-corner .corner-heart,.letter-corner .corner-heart-small { animation: none; } }
body { background: radial-gradient(ellipse at 15% 15%,#f8dfe7,transparent 45%),radial-gradient(ellipse at 90% 85%,#d9e3cb,transparent 45%),#eeeae3; }
.phone { background: #fcf9f3; box-shadow: 0 24px 100px #684a5320; }
.phone:not(.hunt-active) { background: radial-gradient(ellipse at 100% 10%,#fbe9ed,transparent 38%),radial-gradient(ellipse at 0 38%,#eaf0dd,transparent 45%),#fcf9f3; }
.phone:not(.hunt-active) .topbar { height: 74px; padding-inline: 25px; }
.brand { font-size: 21px; letter-spacing: -.8px; }
.brand>span { display: inline-block; animation: brand-bloom 9s ease-in-out infinite; }
.icon-button { width: 39px; height: 39px; border-color: #ffffff; background: #ffffff99; box-shadow: 0 4px 15px #7254590c; transition: background .2s,transform .2s; }
.icon-button:hover { background: #f8dce7; transform: rotate(-8deg); }
.icon-button[aria-pressed=true] { background: #efd3df; box-shadow: 0 0 0 5px #efd3df44; }
.sound-slash { top: 18px; left: 10px; }
.intro { padding: 10px 18px 0; }
.recipient { background: #ffffffb3; border-color: #fff; box-shadow: 0 5px 20px #96686a0b; padding: 9px 16px; color: #86665e; letter-spacing: .2px; }
.intro h1 { font-size: clamp(39px,11.6vw,51px); line-height: 1.04; margin: 20px 0 15px; letter-spacing: -2px; }
.intro h1 em { color: #ba6a83; position: relative; }
.intro h1 em::after { content: ''; position: absolute; height: 7px; border-radius: 50%; background: #eeb3c53b; left: 2%; right: 0; bottom: 2px; z-index: -1; transform: rotate(-3deg); }
.intro>p { font-size: 12px; color: #958276; line-height: 1.7; }
.progress-pill { padding: 9px 16px; background: #f0eee0; border: 1px solid #e5e6d5; color: #7a8259; font-size: 10px; box-shadow: inset 0 1px #fff; }
.garden { margin: 23px 18px 0; height: 295px; border: 1px solid #fff; border-radius: 110px 110px 27px 27px; background: radial-gradient(ellipse at 50% 10%,#fff9df 0,transparent 52%),linear-gradient(160deg,#ecf0da,#d9e3bd 65%,#b3c599); box-shadow: 0 15px 35px #66714c18,inset 0 0 25px #ffffff66; }
.garden::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 23% 40%,#fff9 0 2px,transparent 3px),radial-gradient(circle at 80% 28%,#fff9 0 2px,transparent 3px),radial-gradient(circle at 72% 70%,#fff9 0 1px,transparent 3px); animation: garden-glow 4s ease-in-out infinite; }
.garden .kapi { top: 45px; width: 222px; }
.garden .kapi-note { top: 27px; padding: 9px 13px; background: #fffdf1e8; border: 1px solid #fff; box-shadow: 0 6px 15px #76825315; }
.garden .basket { bottom: 13px; }
.garden .hill-back { top: 177px; }
.garden .hill-front { top: 224px; }
.garden .butterfly-one { left: 27px; top: 126px; }
.garden .butterfly-two { right: 22px; top: 90px; }
.garden .spark { animation: garden-glow 3s ease-in-out infinite alternate; }
.game-controls { margin: 16px 18px 0; padding: 18px 13px 13px; background: #ffffffa8; border: 1px solid #fff; border-radius: 23px; box-shadow: 0 8px 30px #a3817010; }
.instruction { color: #927a6c; font-size: 10px; gap: 10px; }
.instruction-line { width: 25px; background: #e9d8cf; }
.flower-tray { gap: 7px; margin-top: 15px; }
.flower-item { flex: 1; min-width: 0; max-width: 50px; width: auto; height: 54px; border-radius: 16px; background: linear-gradient(#fffdf9,#fbf2e9); border-color: #eeded3; box-shadow: 0 4px 0 #ecdcd044,0 4px 10px #a97f6b0a; transition: transform .25s,background .25s,box-shadow .25s; }
.flower-item:nth-child(even) { background: linear-gradient(#fffafb,#f8e9ef); border-color: #eddae3; }
.flower-item:not(:disabled):hover { transform: translateY(-6px) rotate(-5deg); box-shadow: 0 10px 18px #bb7e8b26; }
.flower-item:not(:disabled):active { transform: scale(.9); }
.flower-item.collected { background: #e8eedf; box-shadow: none; border-color: #dbe5d1; }
.tap-hint { margin: 14px 0 1px; }
.game-controls .primary { background: linear-gradient(115deg,#b56b82,#96566d); box-shadow: 0 7px 20px #aa66782b; border-radius: 15px; }
.phone:not(.hunt-active)>footer { padding: 23px 15px; }
.create-link { color: #987883; text-decoration: none; padding: 9px 16px; border-radius: 20px; border: 1px solid #eadde0; background: #fff8; }
.phone:not(.hunt-active) .intro,.phone:not(.hunt-active) .garden,.phone:not(.hunt-active) .game-controls { animation: modern-arrive .8s cubic-bezier(.2,.7,.3,1) both; }
.phone:not(.hunt-active) .garden { animation-delay: .12s; }
.phone:not(.hunt-active) .game-controls { animation-delay: .24s; }
@keyframes modern-arrive { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes garden-glow { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes brand-bloom { 0%,80%,100% { transform: rotate(0); } 90% { transform: rotate(60deg); } }
@media(min-width:600px) { .phone { margin: 24px auto; border-radius: 32px; min-height: calc(100svh - 48px); border: 1px solid #fff; } }
@media(max-width:360px) { .phone:not(.hunt-active) .topbar { height: 64px; } .intro h1 { font-size: 39px; } .garden { margin-inline: 13px; height: 278px; } .garden .kapi { top: 32px; } .garden .kapi-note { top: 17px; } .game-controls { margin-inline: 13px; padding-inline: 10px; } .flower-tray { gap: 5px; } .flower-item { font-size: 25px; height: 49px; } }
@media(prefers-reduced-motion:reduce) { .brand>span,.garden::after,.garden .spark,.phone:not(.hunt-active) .intro,.phone:not(.hunt-active) .garden,.phone:not(.hunt-active) .game-controls { animation: none; } }