/* ===== Interactive extras: scratch, cat guide, booth, ticket, conch, toss, wall ===== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small-note{font-size:13px;margin-top:8px}

/* confetti layer */
#fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:58}

/* ---------- 5. scratch to reveal ---------- */
.scratch{position:relative;margin:18px auto 0;max-width:360px;padding:6px 0 10px;border-radius:22px;overflow:hidden}
.scratch-cover{position:absolute;inset:0;width:100%;height:100%;border-radius:22px;touch-action:none;cursor:grab;
  transition:opacity 1.2s var(--ease-out,ease)}
.scratch-cover.gone{opacity:0;pointer-events:none}
.scratch-skip{display:block;margin:10px auto 0;border:0;background:none;color:var(--muted);font:14px "Sarabun",sans-serif;cursor:pointer;text-decoration:underline dotted;text-underline-offset:4px}
.scratch-skip[hidden]{display:none}

/* ---------- 2. cat guide ---------- */
.cat-guide{position:fixed;right:10px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:57;display:flex;align-items:flex-end;gap:8px;
  transform:translate3d(140%,0,0);transition:transform 1.1s var(--ease-out,ease);pointer-events:none}
.cat-guide.show{transform:none}
.cat-guide.peek{transform:translate3d(38%,0,0) rotate(-8deg)}
.cat-bubble{pointer-events:auto;max-width:200px;background:rgba(255,255,255,.92);color:var(--ink);font-size:14px;line-height:1.45;
  padding:9px 13px;border-radius:16px 16px 4px 16px;box-shadow:0 8px 24px rgba(124,92,255,.18);
  opacity:0;transform:translate3d(10px,6px,0) scale(.92);transform-origin:100% 100%;transition:opacity .7s var(--ease-out,ease),transform .7s var(--ease-out,ease)}
.cat-bubble.on{opacity:1;transform:none}
.cat-face{pointer-events:auto;position:relative;width:66px;height:66px;flex:0 0 66px;border:0;border-radius:50%;cursor:pointer;padding:0;
  background:url(img/cat.jpg) no-repeat;background-size:430px auto;background-position:-188px -114px;
  box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(151,117,250,.35),0 10px 22px rgba(124,92,255,.25);animation:catBob 4.5s var(--ease-soft,ease-in-out) infinite}
.cat-face::before,.cat-face::after{content:"";position:absolute;top:-9px;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:18px solid #fff}
.cat-face::before{left:4px;transform:rotate(-22deg)}
.cat-face::after{right:4px;transform:rotate(22deg)}
.cat-face.boing{animation:catBoing .7s var(--ease-out,ease)}
@keyframes catBob{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-4px,0) rotate(-4deg)}}
@keyframes catBoing{0%{transform:scale(1)}30%{transform:scale(1.18,.86)}60%{transform:scale(.92,1.1) translateY(-8px)}100%{transform:scale(1)}}

/* ---------- 1. photo booth ---------- */
.booth-teaser{font-size:34px;letter-spacing:8px;margin:6px 0 2px}
.booth-teaser span{display:inline-block;animation:float 4s var(--ease-soft,ease-in-out) infinite}
.booth-teaser span:nth-child(2){animation-delay:-1.3s}.booth-teaser span:nth-child(3){animation-delay:-2.6s}
.booth-modal{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 12px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(160deg,#ffe3ef,#fff1dc 25%,#fffbd6 45%,#e3f9e5 62%,#e0f0ff 80%,#efe6ff)}
.booth-modal[hidden]{display:none}
.booth-top{width:100%;max-width:440px;display:flex;align-items:center;gap:10px}
.booth-x{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.8);font-size:18px;color:var(--ink);cursor:pointer;flex:0 0 40px}
.booth-poses{display:flex;gap:8px;overflow-x:auto;flex:1}
.booth-poses button{flex:0 0 52px;height:52px;border-radius:14px;border:0;padding:0;overflow:hidden;cursor:pointer;background:#fff;opacity:.6;transition:opacity .4s,box-shadow .4s}
.booth-poses button.on{opacity:1;box-shadow:0 0 0 3px #9775fa}
.booth-poses img{width:100%;height:100%;object-fit:cover}
.booth-stage{position:relative;width:min(92vw,420px,calc((100svh - 230px) * .8));aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#cfc6ea;touch-action:none;
  box-shadow:0 14px 40px rgba(124,92,255,.25)}
.booth-stage video,.booth-stage #boothPhoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.booth-stage video.mirror{transform:scaleX(-1)}
#boothCouple{position:absolute;cursor:grab;touch-action:none;filter:drop-shadow(0 6px 10px rgba(40,20,80,.25))}
.booth-frame{position:absolute;inset:0;pointer-events:none;border-radius:22px;box-shadow:inset 0 0 0 7px rgba(255,255,255,.9);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:14px;
  background:linear-gradient(transparent 72%,rgba(255,255,255,.55))}
.booth-frame::before{content:"";position:absolute;inset:7px;border-radius:16px;padding:4px;background:var(--rainbow);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.booth-frame b{font-family:"Charm",cursive;font-size:30px;line-height:1.3;background:linear-gradient(90deg,#f06595,#ff922b,#fab005,#40c057,#339af0,#845ef7);-webkit-background-clip:text;background-clip:text;color:transparent}
.booth-frame span{font-size:14px;color:var(--ink);letter-spacing:.15em}
.booth-msg{position:absolute;left:16px;right:16px;top:16px;z-index:3;text-align:center;color:var(--ink);font-size:14px;line-height:1.5;pointer-events:none}
.booth-msg:not(:empty){background:rgba(255,255,255,.88);border-radius:14px;padding:8px 12px}
.booth-ctrl{width:100%;max-width:440px;display:grid;gap:10px}
.booth-size{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.booth-size input{flex:1;accent-color:#9775fa}
.booth-btns{display:flex;align-items:center;justify-content:space-around}
.booth-flip{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.8);font-size:22px;display:grid;place-items:center;cursor:pointer}
.booth-shot{width:72px;height:72px;border-radius:50%;border:5px solid #fff;background:var(--rainbow);cursor:pointer;box-shadow:0 6px 20px rgba(124,92,255,.35)}
.booth-shot:active{transform:scale(.92)}
.booth-result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;font-size:14px;color:var(--muted);
  background:linear-gradient(160deg,#ffe3ef,#fffbd6 40%,#e0f0ff 75%,#efe6ff)}
.booth-result[hidden]{display:none}
.booth-result img{max-width:min(92vw,420px);max-height:68svh;border-radius:18px;box-shadow:0 14px 40px rgba(124,92,255,.25)}
.flash{position:fixed;inset:0;background:#fff;z-index:90;pointer-events:none;animation:flash .5s ease-out forwards}
@keyframes flash{from{opacity:.9}to{opacity:0}}

/* ---------- 7. ticket ---------- */
.ticket-name{max-width:320px;margin:0 auto 14px}
.ticket-name input{text-align:center;font-size:18px}
.ticket-img{width:min(100%,360px);margin:0 auto;filter:drop-shadow(0 14px 26px rgba(124,92,255,.22));animation:float 7s var(--ease-soft,ease-in-out) infinite}

/* ---------- 3. conch ---------- */
.conch-stage{position:relative;height:330px;max-width:380px;margin:8px auto 0;touch-action:pan-y}
#waterCv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.conch-shell{position:absolute;left:16%;top:22px;width:120px;height:80px;transform-origin:30% 50%;transform:rotate(-12deg);will-change:transform;filter:drop-shadow(0 6px 10px rgba(233,166,189,.45))}
.conch-hands{position:absolute;left:0;right:0;bottom:34px;display:flex;flex-direction:column;align-items:center}
.hands{font-size:52px;line-height:1;display:flex;gap:4px}
.hands span:first-child{transform:scaleX(-1) rotate(-8deg)}.hands span:last-child{transform:rotate(-8deg)}
.tray{margin-top:-6px;width:170px;height:34px;border-radius:0 0 90px 90px;background:linear-gradient(#ffe9a8,#f5c451);display:flex;justify-content:center;gap:2px;font-size:20px;padding-top:2px;box-shadow:0 6px 14px rgba(245,196,81,.35)}
.conch-meter{position:absolute;left:18%;right:18%;bottom:6px;height:8px;border-radius:8px;background:rgba(151,117,250,.15);overflow:hidden}
.conch-meter b{display:block;height:100%;width:0;background:var(--rainbow);border-radius:8px;transition:width .4s var(--ease-out,ease)}
#pourBtn{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.conch-form,.wall-form{display:grid;gap:10px;max-width:360px;margin:16px auto 0;text-align:center}
.conch-form[hidden]{display:none}
.conch-done{font-weight:600;color:var(--red)}

/* ---------- 4. toss ---------- */
.toss-count{font-size:18px;font-weight:600;margin:4px 0;background:linear-gradient(90deg,#f06595,#ff922b,#40c057,#339af0,#845ef7);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 6. blessing wall ---------- */
.sky{position:relative;height:380px;margin:10px -16px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.balloon{position:absolute;bottom:-190px;width:150px;display:flex;flex-direction:column;align-items:center;will-change:transform;animation:rise-b linear forwards}
.balloon .ball{width:58px;height:70px;border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),transparent 26%),var(--bc);position:relative;
  animation:sway-b 3.6s var(--ease-soft,ease-in-out) infinite alternate}
.balloon .ball::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid var(--bc);transform:rotate(180deg)}
.balloon .str{width:1px;height:22px;background:rgba(58,52,86,.3)}
.balloon .note{background:rgba(255,255,255,.9);border-radius:12px;padding:7px 10px;font-size:13px;line-height:1.45;color:var(--ink);box-shadow:0 6px 16px rgba(124,92,255,.12);text-align:center;word-break:break-word}
.balloon .note b{display:block;font-size:12px;color:var(--red);margin-top:2px}
@keyframes rise-b{to{transform:translate3d(var(--dx,0),-620px,0)}}
@keyframes sway-b{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.sky.static{height:auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:16px;-webkit-mask-image:none;mask-image:none}
.sky.static .balloon{position:static;animation:none}
.sky.static .ball,.sky.static .str{display:none}