/* A small wedding gift shop: one jar, one unfolding paper wish. */
.hero-edition .fortune-entry { position: relative; z-index: 2; pointer-events: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; width: 48px; min-height: 53px; padding: 3px; background: none; outline: none; border-radius: 0; color: var(--cream); }
.fortune-entry>span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--cream); color: var(--red); font: 23px/1 var(--serif); outline: 1px solid #fff4e466; outline-offset: 3px; transition: transform .3s; }
.fortune-entry>small { font: 8px/1.2 var(--sans); letter-spacing: .15em; white-space: nowrap; }
.fortune-entry:hover>span { transform: rotate(-12deg); }
.fortune-entry:focus-visible { outline: 1px solid var(--cream); outline-offset: 3px; }
.postcard-fortune { display: flex; width: 100%; align-items: center; gap: 13px; margin: 20px 0 0; padding: 17px 0; border-top: 1px dashed #b7222d55; border-bottom: 1px dashed #b7222d55; text-align: left; color: #982633; }
.postcard-fortune .gift-seal { flex: 0 0 35px; width: 35px; height: 41px; display: grid; place-items: center; border: 1px solid #b7222d66; transform: rotate(-7deg); font: 26px/1 var(--serif); }
.postcard-fortune>span:nth-child(2) { flex: 1; }
.postcard-fortune strong { display: block; font: 400 17px/1.5 var(--serif); }
.postcard-fortune small { display: block; margin-top: 5px; font: 11px/1.6 var(--sans); color: #986d63; }
.postcard-fortune>span:last-child { font: 22px Georgia,serif; }
.fortune-dialog { --fortune-red: #ad2531; --fortune-cream: #fff1dc; width: min(100%,440px); max-width: 440px; max-height: 94svh; margin: auto; padding: 0 25px 18px; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 3px; color: var(--fortune-cream); background: var(--fortune-red); box-shadow: 0 18px 90px #330c1b55; scrollbar-width: thin; scrollbar-color: #ebbb9877 transparent; }
.fortune-dialog::backdrop { background: #2e0e19d9; backdrop-filter: blur(7px); }
.fortune-dialog[open] { animation: fortune-shop-open .45s cubic-bezier(.2,.7,.2,1) both; }
.fortune-dialog button:focus-visible,.fortune-dialog a:focus-visible { outline: 2px solid #fff1dc; outline-offset: 4px; }
.fortune-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 63px; border-bottom: 1px solid #fff1dc42; }
.fortune-header>span { font: 12px/1.6 var(--serif); letter-spacing: .08em; }
.fortune-header i,.fortune-signature i { font-family: Georgia,serif; font-style: italic; }
.fortune-header button { flex: 0 0 44px; width: 44px; height: 44px; margin-right: -12px; color: #fff1dc; font: 27px/1 var(--sans); }
.fortune-heading { text-align: center; padding-top: 23px; }
.fortune-kicker { font: 8px/1.6 var(--sans); letter-spacing: .22em; color: #edb8a4; }
#fortune-title { max-width: 8em; margin: 9px auto 11px; font: 400 32px/1.38 var(--serif); letter-spacing: .09em; }
#fortune-intro,#fortune-gift-note { font: 11px/1.7 var(--sans); color: #f1ccb7; }
#fortune-gift-note { margin-top: 5px; color: #fff1dc; }
.fortune-theatre { position: relative; width: 100%; height: 290px; max-width: 350px; margin: 15px auto 0; isolation: isolate; }
.fortune-paper-moon { position: absolute; width: 82%; height: 200px; left: 9%; top: 10px; border: 1px solid #fff1dc50; border-radius: 48% 48% 0 0 / 60% 60% 0 0; background: #c8434529; }
.fortune-paper-moon:before { content: ''; position: absolute; inset: 6px; border: 1px solid #fff1dc15; border-radius: inherit; }
.fortune-paper-moon>span { display: block; margin-top: 16px; text-align: center; font: 10px/1.75 var(--serif); letter-spacing: .3em; color: #f9d2b3; }
.fortune-figure { position: absolute; z-index: 1; width: 48%; height: 214px; object-fit: contain; bottom: 53px; pointer-events: none; filter: drop-shadow(0 4px 1px #681a2420); }
.fortune-groom { left: -1%; transform: rotate(-6deg); transform-origin: 50% 100%; }
.fortune-bride { right: -1%; transform: rotate(6deg); transform-origin: 50% 100%; }
.fortune-vessel { position: absolute; z-index: 2; left: calc(50% - 63px); bottom: 34px; width: 126px; height: 218px; padding: 0; touch-action: pan-x pinch-zoom; user-select: none; cursor: grab; -webkit-user-select: none; transform-origin: 50% 90%; }
.fortune-vessel:active { cursor: grabbing; }
.fortune-sticks { position: absolute; width: 94px; height: 118px; top: 11px; left: 16px; }
.fortune-sticks i { position: absolute; bottom: 0; width: 16px; height: 110px; background: #ffe2ad; border: 1px solid #a8653e; border-radius: 4px 4px 1px 1px; color: #a83031; box-shadow: inset -3px 0 #e5b984; font: normal 12px/1.7 var(--serif); padding-top: 9px; }
.fortune-sticks i:nth-child(1) { left: 5px; transform: rotate(-17deg); height: 100px; }
.fortune-sticks i:nth-child(2) { left: 25px; transform: rotate(-7deg); height: 119px; }
.fortune-sticks i:nth-child(3) { z-index: 2; left: 42px; height: 132px; width: 19px; background: #ffefd0; transform: rotate(3deg); }
.fortune-sticks i:nth-child(4) { left: 61px; transform: rotate(13deg); height: 112px; }
.fortune-sticks i:nth-child(5) { left: 78px; transform: rotate(20deg); height: 96px; }
.fortune-jar { position: absolute; z-index: 3; left: 6px; bottom: 0; width: 114px; height: 126px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffe3bb; background: linear-gradient(90deg,#921d2b,#c23a3d 38%,#b42b35 78%,#94212d); border: 1px solid #f3c18d; border-radius: 0 0 45% 45% / 0 0 12% 12%; box-shadow: inset 5px 0 #fff0d710,inset -5px 0 #5c13221f,0 8px 15px #6b132d40; }
.fortune-jar:before { content: ''; position: absolute; inset: 12px 8px 10px; border: 1px solid #f5c38d77; border-radius: 0 0 40% 40% / 0 0 10% 10%; }
.fortune-jar-rim { position: absolute; top: -6px; left: -1px; width: calc(100% + 2px); height: 11px; border-radius: 50%; border: 2px solid #f0bf90; background: #75202b; }
.fortune-jar b { margin-top: 9px; font: 44px/1.2 var(--serif); text-shadow: 0 1px #79222b; }
.fortune-jar small { margin-top: 7px; font: 9px/1.5 var(--serif); letter-spacing: .16em; }
.fortune-table-shadow { position: absolute; z-index: -1; bottom: -5px; width: 145px; height: 17px; left: -9px; background: #64182755; border-radius: 50%; filter: blur(5px); }
.fortune-theatre-caption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: #f5c3ac; font: 10px/1.6 var(--serif); letter-spacing: .07em; }
.fortune-primary { width: 100%; min-height: 50px; padding: 13px 15px; border: 1px solid var(--fortune-cream); background: var(--fortune-cream); color: #a42632; font: 16px/1.5 var(--serif); letter-spacing: .06em; transition: transform .2s,background .2s; }
.fortune-primary:enabled:active { transform: scale(.98); }
.fortune-draw { display: flex; align-items: center; justify-content: space-between; margin-top: 21px; }
.fortune-draw>span { font: 22px/1 Georgia,serif; }
.fortune-pull-hint { margin-top: 10px; font: 10px/1.6 var(--sans); text-align: center; color: #eeb9a5; }
.fortune-dialog[data-fortune-state=drawing] .fortune-vessel { animation: fortune-jar-shake .65s ease-in-out both; }
.fortune-dialog[data-fortune-state=drawing] .fortune-chosen-stick { animation: fortune-stick-rise .85s .6s cubic-bezier(.2,.8,.2,1) both; }
.fortune-dialog[data-fortune-state=drawing] .fortune-groom { animation: fortune-groom-bounce 1s ease both; }
.fortune-dialog[data-fortune-state=drawing] .fortune-bride { animation: fortune-bride-bounce 1s .15s ease both; }
.fortune-ticket { position: relative; isolation: isolate; margin: 22px auto 0; padding: 24px 23px 16px; color: #8b2934; background: var(--fortune-cream); transform-origin: center top; box-shadow: 0 8px 18px #57112430; border-top: 5px solid #e8b899; border-bottom: 5px solid #e8b899; }
.fortune-ticket-rule { position: absolute; z-index: -1; inset: 8px; border: 1px solid #b43a3b55; pointer-events: none; }
.fortune-ticket-top { display: flex; justify-content: space-between; align-items: center; font: 10px/1.6 var(--sans); letter-spacing: .15em; }
.fortune-ticket-top b { font: inherit; font-variant-numeric: tabular-nums; }
.fortune-ticket-to { margin: 25px 0 10px; text-align: center; font: 12px/1.7 var(--serif); letter-spacing: .14em; }
.fortune-word { margin: 0 auto; width: 2.7em; text-align: center; word-break: break-all; font: 400 48px/1.22 var(--serif); letter-spacing: .18em; text-indent: .18em; }
.fortune-line { margin: 15px auto 0; text-align: center; max-width: 22em; font: 13px/1.8 var(--serif); }
.fortune-little-star { display: block; margin: 12px auto 9px; text-align: center; color: #b23039; font: 18px/1.2 Georgia,serif; }
.fortune-note { max-width: 22em; margin: 0 auto 19px; text-align: center; color: #936052; font: 11px/1.9 var(--sans); }
.fortune-ticket-bottom { position: relative; padding-top: 16px; border-top: 1px dashed #b73b3b50; }
.fortune-ticket-bottom:before,.fortune-ticket-bottom:after { content: ''; position: absolute; top: -7px; width: 12px; height: 12px; background: var(--fortune-red); border-radius: 50%; }
.fortune-ticket-bottom:before { left: -29px; }.fortune-ticket-bottom:after { right: -29px; }
.fortune-ticket-couple { display: flex; justify-content: center; height: 77px; margin-bottom: 6px; }
.fortune-ticket-couple img { width: 57px; height: 80px; object-fit: contain; }
.fortune-ticket-couple img:first-child { transform: rotate(-6deg); }.fortune-ticket-couple img:last-child { transform: rotate(6deg); }
.fortune-signature { text-align: center; }.fortune-signature p { font: 13px/1.7 var(--serif); }.fortune-signature small { font: 8px/1.6 var(--sans); color: #a07565; letter-spacing: .06em; }
.fortune-stamp { position: absolute; right: -4px; top: 19px; width: 60px; height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; color: #b42b35; border: 2px solid currentColor; border-radius: 50%; outline: 1px solid #b42b35; outline-offset: -5px; transform: rotate(13deg); opacity: .85; }
.fortune-stamp>span { font: 8px/1.4 var(--serif); }.fortune-stamp>b { font: 25px/1 var(--serif); }
.fortune-dialog[data-fortune-state=revealed] .fortune-ticket { animation: fortune-paper-unfold .65s cubic-bezier(.16,.7,.2,1) both; }
.fortune-dialog[data-fortune-state=revealed] .fortune-stamp { animation: fortune-stamp-land .45s .35s both; }
.fortune-result-actions { margin-top: 21px; }
.fortune-again { display: block; margin: 7px auto 0; min-height: 44px; padding: 8px 12px; font: 12px/1.6 var(--serif); color: #f5ceba; }
.fortune-again>span { margin-left: 8px; font-size: 16px; }
.fortune-status { font: 11px/1.8 var(--sans); text-align: center; margin: 11px 0 0; color: #fff1dc; }
.fortune-status:empty { display: none; }
.fortune-storage-note { font: 9px/1.7 var(--sans); text-align: center; color: #eab7a3; margin-top: 13px; }
.fortune-image-view { margin-top: 20px; }.fortune-image-view>p { text-align: center; font: 12px/1.7 var(--sans); color: #ffdfc4; margin-bottom: 15px; }
#fortune-image { display: block; width: 100%; height: auto; object-fit: contain; -webkit-touch-callout: default; user-select: auto; }
.fortune-image-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 12px; }
.fortune-image-actions button,.fortune-image-actions a { display: flex; align-items: center; min-height: 44px; font: 12px/1.5 var(--sans); color: #fff1dc; text-underline-offset: 5px; }
.fortune-dialog[data-fortune-state=revealed] .fortune-heading,.fortune-dialog[data-fortune-state=image] .fortune-heading { padding-top: 16px; }
.fortune-dialog[data-fortune-state=revealed] #fortune-title,.fortune-dialog[data-fortune-state=image] #fortune-title { max-width: none; font-size: 24px; margin: 7px 0; }
.fortune-dialog[data-fortune-state=revealed] .fortune-kicker,.fortune-dialog[data-fortune-state=image] .fortune-kicker { display: none; }
@keyframes fortune-shop-open { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fortune-jar-shake { 0%,100% { transform: rotate(0); } 15% { transform: rotate(-12deg); } 35% { transform: rotate(11deg); } 55% { transform: rotate(-9deg); } 75% { transform: rotate(5deg); } }
@keyframes fortune-stick-rise { 0% { transform: rotate(3deg); } 70% { transform: translateY(-65px) rotate(-7deg); } 100% { transform: translateY(-92px) rotate(-4deg); } }
@keyframes fortune-groom-bounce { 0%,100% { transform: rotate(-6deg); } 40% { transform: translateY(-8px) rotate(-9deg); } }
@keyframes fortune-bride-bounce { 0%,100% { transform: rotate(6deg); } 50% { transform: translateY(-7px) rotate(10deg); } }
@keyframes fortune-paper-unfold { from { opacity: .2; transform: perspective(800px) rotateX(-25deg) translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes fortune-stamp-land { from { opacity: 0; transform: rotate(5deg) scale(1.7); } to { opacity: .85; transform: rotate(13deg) scale(1); } }
@media (max-width:360px) { .fortune-dialog { padding: 0 21px 16px; }.fortune-header>span { font-size: 11px; }#fortune-title { font-size: 29px; }.fortune-theatre { height: 265px; }.fortune-figure { height: 192px; }.fortune-paper-moon { height: 180px; }.fortune-vessel { transform: scale(.91); transform-origin: 50% 100%; }.fortune-ticket { padding: 21px 20px 14px; }.fortune-ticket-bottom:before { left: -26px; }.fortune-ticket-bottom:after { right: -26px; }.fortune-stamp { width: 53px; height: 53px; right: -5px; }.fortune-stamp>b { font-size: 22px; }.fortune-word { font-size: 43px; }.fortune-line { font-size: 12px; } }
@media (max-height:700px) { .fortune-heading { padding-top: 16px; }#fortune-title { font-size: 28px; }.fortune-theatre { height: 244px; margin-top: 10px; }.fortune-figure { height: 180px; }.fortune-paper-moon { height: 165px; }.fortune-vessel { height: 190px; }.fortune-jar { height: 111px; }.fortune-sticks { top: 15px; }.fortune-draw { margin-top: 17px; } }
@media (prefers-reduced-motion:reduce) { .fortune-dialog[open],.fortune-dialog * { animation: none !important; transition: none !important; } }
/* Live announcements remain available without repeating the card's copy. */
.fortune-status[data-kind=info] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero-edition { padding-top: max(5px,env(safe-area-inset-top)); padding-bottom: 5px; }