/* Unwrap: the five reveal styles (used by the gift and the maker's live preview) */
.rv { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---- 1. split-flap board ---- */
.bd { --cw: 28px; --gap: 3px; --ch: calc(var(--cw) * 1.38); background: linear-gradient(180deg, #1b1a20, #0f0e12); border-radius: 16px; padding: 12px 12px 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #2b2931, inset 0 2px 0 rgba(255, 255, 255, 0.06); max-width: 100%; transition: box-shadow 0.6s; }
.bd.settled { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #2b2931, 0 0 0 4px rgba(255, 210, 90, 0.15), 0 0 60px rgba(255, 200, 90, 0.25); }
.bd-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: #ffd25a; }
.bd-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffd25a; box-shadow: 0 0 10px #ffd25a; animation: blink 1s steps(2) infinite; }
.bd.settled .bd-dot { animation: none; background: #7cf29a; box-shadow: 0 0 10px #7cf29a; }
@keyframes blink { 50% { opacity: 0.2; } }
.bd-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bd-sp { flex: 1; }
.bd-emo { font-size: 18px; letter-spacing: 0; }
.bd-grid { display: flex; flex-direction: column; gap: var(--gap); align-items: center; }
.bd-row { display: flex; gap: var(--gap); }
.bd-row.gap { height: calc(var(--ch) * 0.35); }
.fl { position: relative; width: var(--cw); height: var(--ch); perspective: calc(var(--cw) * 8); font-family: var(--mono); font-weight: 700; font-size: calc(var(--cw) * 0.8); color: #f7f2e8; }
.bd-row.date .fl { color: #ffd25a; }
.hf, .lf { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: linear-gradient(180deg, #2d2b33, #232128); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tp, .lt { top: 0; border-radius: 3px 3px 0 0; }
.bt, .lb { bottom: 0; border-radius: 0 0 3px 3px; background: linear-gradient(180deg, #1d1c22, #26242b); }
.fl b { display: block; height: var(--ch); line-height: var(--ch); text-align: center; font-weight: 700; }
.bt b, .lb b { margin-top: calc(var(--ch) / -2); }
.lt { transform-origin: 50% 100%; z-index: 2; }
.lb { transform-origin: 50% 0; transform: rotateX(90deg); z-index: 2; }
.fl::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; background: rgba(0, 0, 0, 0.75); z-index: 3; }
.fl::before { content: ''; position: absolute; inset: 0; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 3px rgba(0, 0, 0, 0.5); z-index: 4; pointer-events: none; }

/* ---- 2. scratch-off ---- */
.sc-card { width: min(380px, 100%); background: linear-gradient(160deg, #fff7e3, #ffe9b8); color: #3a2400; border-radius: 18px; padding: 14px 14px 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 3px #e8c063, inset 0 0 0 6px #fff7e3, inset 0 0 0 7px rgba(200, 150, 50, 0.6); position: relative; }
.sc-top { display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 10px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8a5a00; }
.sc-kick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-area { position: relative; border-radius: 12px; overflow: hidden; min-height: 190px; aspect-ratio: 16 / 10; background: radial-gradient(circle at 50% 40%, #fffdf5, #fff1c9); box-shadow: inset 0 0 0 2px rgba(200, 150, 50, 0.4); }
.sc-under { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 16px; text-align: center; }
.sc-emoji { font-size: 40px; line-height: 1.1; }
.sc-amt { margin: 0; font-family: var(--display); font-size: clamp(34px, 11vw, 50px); line-height: 1; color: #1f7a4d; }
.sc-head { margin: 0; font-family: var(--display); font-size: clamp(20px, 6vw, 27px); line-height: 1.15; overflow-wrap: anywhere; }
.sc-date { margin: 4px 0 0; font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; color: #8a5a00; }
.sc-foil { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; transition: opacity 0.7s; }
.sc-foil.gone { opacity: 0; pointer-events: none; }
.sc-help { margin: 10px 0 0; text-align: center; font-size: 14px; font-weight: 600; color: #8a5a00; }
.sc-card.won .sc-help { visibility: hidden; }
.sc-card.won { animation: bump 0.5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bump { 40% { transform: scale(1.04); } }

/* ---- 3. golden ticket in an envelope ---- */
.tk-wrap { position: relative; width: min(370px, 100%); aspect-ratio: 370 / 330; transition: margin-bottom 0.6s ease; }
.tk-wrap.out { margin-bottom: calc(min(370px, 100%) * -0.27); }
.tk-ticket { position: absolute; left: 4%; right: 4%; bottom: 10%; height: 44%; z-index: 2; display: flex; border-radius: 10px; background: linear-gradient(115deg, #fbe7a1 0%, #e8bd52 30%, #fff1b8 48%, #d49d2c 70%, #f6d77c 100%); color: #3b2400; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.7s cubic-bezier(.2, .9, .3, 1.1); overflow: hidden; }
.tk-ticket::before { content: ''; position: absolute; inset: 6px; border: 1.5px dashed rgba(90, 55, 0, 0.45); border-radius: 6px; pointer-events: none; }
.tk-ticket::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-18deg); pointer-events: none; }
.tk-wrap.out .tk-ticket::after { animation: sweep 1.4s 0.3s ease-in-out 2; }
@keyframes sweep { to { left: 130%; } }
.tk-main { flex: 1; min-width: 0; padding: 12px 10px 12px 18px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.tk-kick { margin: 0; font-family: var(--mono); font-weight: 800; font-size: 11px; letter-spacing: 0.22em; color: #7a4f00; }
.tk-head { margin: 0; font-family: var(--display); font-size: clamp(18px, 5.6vw, 26px); line-height: 1.12; overflow-wrap: anywhere; }
.tk-date { margin: 2px 0 0; font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; color: #6a4300; }
.tk-stub { width: 27%; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px; border-left: 2px dashed rgba(90, 55, 0, 0.45); text-align: center; font-family: var(--mono); font-weight: 800; font-size: 10px; letter-spacing: 0.08em; color: #6a4300; position: relative; }
.tk-stub::before, .tk-stub::after { content: ''; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg0); }
.tk-stub::before { top: -8px; } .tk-stub::after { bottom: -8px; }
.tk-emo { font-size: 24px; letter-spacing: 0; }
.tk-admit { overflow-wrap: anywhere; max-width: 100%; }
.tk-env { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; border: 0; padding: 0; background: none; cursor: pointer; transition: transform 0.6s ease-in, opacity 0.6s; -webkit-tap-highlight-color: transparent; }
.env-back { position: absolute; inset: 0; z-index: 1; border-radius: 10px; background: linear-gradient(180deg, #a87412, #c99327); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.env-front { position: absolute; inset: 0; z-index: 3; border-radius: 10px; clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(170deg, #f3cc63, #d29d2e 70%, #c18b1f); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6%; }
.env-to { font-family: var(--display); font-size: 20px; color: #4a2e00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 4; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, #e5b445, #f5d77a); transform-origin: 50% 0; transform: perspective(700px) rotateX(0deg); transition: transform 0.55s cubic-bezier(0.45, 0, 0.2, 1), z-index 0s 0.27s; border-radius: 10px 10px 0 0; }
.env-seal { position: absolute; left: 50%; top: 56%; z-index: 5; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #e0485f, #9d0f27); color: #ffd6dc; font-size: 20px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 3px rgba(0, 0, 0, 0.12); transition: transform 0.3s, opacity 0.3s; animation: sealPulse 1.6s ease-in-out infinite; }
@keyframes sealPulse { 50% { transform: scale(1.1); } }
.tk-wrap.open .env-seal { transform: scale(0); opacity: 0; animation: none; }
.tk-wrap.open .env-flap { transform: perspective(700px) rotateX(180deg); z-index: 0; }
.tk-wrap.rise .tk-ticket { transform: translateY(-62%); }
.tk-wrap.out .tk-env { transform: translateY(60%); opacity: 0; pointer-events: none; }
.tk-wrap.out .tk-ticket { z-index: 6; transform: translateY(-58%) scale(1.06) rotate(-2deg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 210, 100, 0.4); }
.tk-help { margin: 0; font-size: 15px; color: var(--muted); text-align: center; }

/* ---- 4. gift card ---- */
.gc-wrap { perspective: 1200px; display: flex; justify-content: center; width: 100%; }
.gc-card { width: min(350px, 100%); aspect-ratio: 1.586; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 20px; -webkit-tap-highlight-color: transparent; animation: cardIn 0.7s cubic-bezier(.2, 1.1, .3, 1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px) rotate(-8deg) scale(0.85); } }
.gc-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(.3, 1.3, .4, 1); }
.gc-card.flipped .gc-inner { transform: rotateY(180deg); }
.gc-face { position: absolute; inset: 0; border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.gc-cover { background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.35), transparent 40%), linear-gradient(135deg, #ff8fa3 0%, #c86bfa 55%, #6a5cff 100%); color: #fff; }
.gc-cover::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-35deg, rgba(255, 255, 255, 0.08) 0 12px, transparent 12px 26px); }
.gc-chip { position: absolute; left: 8%; top: 22%; width: 15%; aspect-ratio: 1.3; border-radius: 6px; background: linear-gradient(135deg, #f8e3a3, #c9a14a); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.gc-emo { position: absolute; right: 8%; top: 12%; font-size: clamp(34px, 11vw, 48px); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); }
.gc-for { position: absolute; left: 8%; bottom: 14%; font-family: var(--display); font-size: clamp(20px, 6vw, 26px); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-tap { position: absolute; right: 8%; bottom: 15%; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.22); animation: blink 1.4s ease-in-out infinite; }
.gc-value { transform: rotateY(180deg); background: radial-gradient(circle at 20% 15%, rgba(255, 220, 140, 0.35), transparent 45%), linear-gradient(135deg, #1d2547 0%, #2c1d4a 60%, #431d3c 100%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px; text-align: center; }
.gc-lbl { font-family: var(--mono); font-weight: 800; font-size: 11px; letter-spacing: 0.24em; color: var(--gold-l); }
.gc-amt { font-family: var(--display); font-size: clamp(44px, 15vw, 66px); line-height: 1; background: linear-gradient(180deg, #fff3c4, #ffcf5a 60%, #d79a1d); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 10px rgba(255, 200, 90, 0.3)); }
.gc-amt.emo { color: initial; background: none; -webkit-background-clip: initial; background-clip: initial; }
.gc-head { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.86); max-width: 92%; overflow-wrap: anywhere; line-height: 1.3; }

/* ---- 5. photo ---- */
.ph { margin: 0; width: min(310px, 82%); background: #fbfaf6; padding: 12px 12px 16px; border-radius: 3px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(-50px) rotate(9deg) scale(0.9); transition: transform 0.8s cubic-bezier(.2, 1.3, .4, 1), opacity 0.4s; }
.ph.in { opacity: 1; transform: rotate(-2.5deg); }
.ph-frame { position: relative; aspect-ratio: 1; overflow: hidden; background: #1c1a20; }
.ph-art { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #ffe2a8, transparent 50%), radial-gradient(circle at 75% 80%, #ff9eb8, transparent 55%), linear-gradient(135deg, #8fd0ff, #b28cff); font-size: clamp(70px, 26vw, 110px); }
.ph-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-art, .ph-frame img { filter: brightness(0.12) sepia(0.9) blur(3px); transition: filter 2.6s ease-out; }
.ph.dev .ph-art, .ph.dev .ph-frame img { filter: none; }
.ph-cap { margin: 12px 4px 0; font-family: var(--display); font-size: clamp(21px, 6vw, 27px); line-height: 1.15; color: #2a1b12; text-align: center; overflow-wrap: anywhere; }

/* maker preview: slightly smaller */
.rv-preview .tk-wrap { width: min(320px, 100%); }
.rv-preview .gc-card { width: min(300px, 100%); }
.rv-preview .sc-card { width: min(330px, 100%); }
.rv-preview .sc-area { min-height: 160px; }
.rv-preview .ph { width: min(240px, 70%); }
.rv-preview .tk-stub::before, .rv-preview .tk-stub::after { background: #1e1427; }

/* short screens (phone landscape, small in-app browsers): keep each reveal inside the viewport */
@media (max-height: 560px) {
  .tk-wrap { width: min(370px, 100%, 92svh); }
  .tk-wrap.out { margin-bottom: calc(min(370px, 100%, 92svh) * -0.27); }
  .sc-card { width: min(380px, 100%, 110svh); }
  .sc-area { min-height: 130px; }
  .gc-card { width: min(350px, 100%, 95svh); }
  .ph { width: min(310px, 82%, 52svh); }
}