/* Not My Event: the look of "Fellowship & Fun" (public/templates/fellowship-and-fun.html), a welcoming church family game-night invitation. Warm teal, cream, coral, sunflower, soft sage and walnut;
   Fredoka for the headlines, Nunito for everything a person has to read, Caveat for the small handwritten notes.
   Only transform and opacity are animated (never a blur, never the size of a scene), and every animation is switched off by the page's .rm class (reduced motion, or the host's "perfectly still"). */
:root {
  --teal: #215963; --teal2: #16424B; --teal3: #2F7783; --cream: #FFF4DB; --cream2: #F2E2BC; --coral: #E88776; --coral2: #C96B58; --sun: #EFCB66; --sun2: #D9AE3E; --sage: #98B7A0; --sage2: #6F9680; --walnut: #77513D; --walnut2: #58392A;
  --a: #E88776; --a2: #C4604C; --ink: #2A1F1A; --ui: rgba(22, 66, 75, .94); --hair: rgba(42, 31, 26, .16);
  --f-disp: 'Fredoka', 'Trebuchet MS', 'Segoe UI', sans-serif; --f-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-hand: 'Caveat', 'Segoe Print', cursive;
}
body[data-preset="sunny"] { --a: #EFCB66; --a2: #B98E1F; }
body[data-preset="coral"] { --a: #E88776; --a2: #B8543F; --ui: rgba(88, 57, 42, .94); }
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow: hidden; background: var(--teal2); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 8px; top: -64px; z-index: 300; padding: 12px 18px; background: var(--sun); color: var(--ink); font-weight: 800; text-decoration: none; border-radius: 12px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; box-shadow: 0 0 0 7px var(--teal2); }
.art { display: block; width: 100%; height: 100%; }

/* ---------- Buttons and the things that float over every scene ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--a); color: var(--ink); font-family: var(--f-disp); font-weight: 600; font-size: 18px; box-shadow: 0 5px 0 var(--walnut2), 0 10px 22px rgba(0, 0, 0, .25); text-decoration: none; text-align: center; line-height: 1.15; transition: transform .12s; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--walnut2); }
.btn.sun { background: var(--sun); }
.btn.ghost { background: var(--cream); color: var(--teal2); }
.btn.sage { background: var(--sage); color: var(--teal2); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.pulse { animation: btnpulse 1.6s ease-in-out infinite; }
@keyframes btnpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.chip { min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid rgba(255, 244, 219, .85); background: var(--ui); color: var(--cream); font-size: 15px; font-weight: 800; }
.linkish { background: none; border: 0; padding: 10px 6px; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }
.menu-btn { position: fixed; z-index: 60; top: max(10px, env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px)); display: inline-flex; align-items: center; gap: 8px; }
.dock { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 18px max(10px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); background: linear-gradient(rgba(22, 66, 75, 0), rgba(22, 66, 75, .82)); pointer-events: none; }
.dock > * { pointer-events: auto; }
.pill { white-space: nowrap; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--cream); color: var(--teal2); font-weight: 800; font-size: 15px; box-shadow: 0 4px 0 var(--walnut2); display: inline-flex; align-items: center; gap: 6px; }
.pill.pri { background: var(--sun); }
.pill.round { width: 46px; padding: 0; justify-content: center; font-size: 22px; line-height: 1; }
.pill:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--walnut2); }
#cap { position: fixed; z-index: 70; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; max-width: 86vw; padding: 6px 14px; border-radius: 10px; background: rgba(22, 66, 75, .92); color: var(--cream); font-size: 15px; line-height: 1.2; opacity: 0; pointer-events: none; transition: opacity .2s; text-align: center; }
#cap.on { opacity: 1; }
#net { position: fixed; z-index: 220; left: 0; right: 0; top: 0; padding: 10px 16px; background: var(--a2); color: #fff; text-align: center; font-weight: 700; font-size: 14px; }
body.busy #stage { pointer-events: none; }

/* ---------- Scenes: each is a picture drawn for the exact shape of the screen, with the real buttons laid over it ---------- */
#stage { position: fixed; inset: 0; }
.scene { position: absolute; inset: 0; overflow: hidden; display: none; background: var(--teal2); color: var(--cream); }
.scene.on { display: block; }
.scene.z1 { z-index: 1; } .scene.z2 { z-index: 2; }
.scene:focus { outline: none; }
.bg, .cam { position: absolute; inset: 0; }
.cam { transition: transform 1.25s cubic-bezier(.55, .05, .35, 1); will-change: transform; }
.cam.zoom { transform: scale(var(--zs, 3.2)); transform-origin: var(--zx, 50%) var(--zy, 60%); }
.over { position: absolute; inset: 0; pointer-events: none; }
.over > * { pointer-events: auto; }
.head { position: absolute; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); translate: -50% 0; width: min(92vw, 640px); text-align: center; pointer-events: none; }
.eyebrow { display: inline-block; font-family: var(--f-disp); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal2); background: var(--sun); padding: 3px 14px; border-radius: 999px; margin-bottom: 8px; }
.h2 { font-family: var(--f-disp); font-weight: 600; font-size: clamp(28px, 7.4vw, 46px); line-height: 1.05; color: var(--cream); text-shadow: 0 2px 0 var(--teal2), 0 0 14px rgba(22, 66, 75, .8); text-wrap: balance; }
.lead { margin-top: 6px; font-size: clamp(15px, 3.9vw, 18px); font-weight: 700; color: var(--cream); text-shadow: 0 1px 0 var(--teal2), 0 0 10px rgba(22, 66, 75, .9); text-wrap: balance; }
.cta-row { position: absolute; left: 0; right: 0; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 14px; pointer-events: none; }
.cta-row > * { pointer-events: auto; }
.hot { position: absolute; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 18px; background: transparent; }
.hot::after { content: ""; position: absolute; inset: 2%; border-radius: 18px; border: 3px dashed rgba(239, 203, 102, 0); transition: border-color .2s; }
.hot:hover::after, .hot:focus-visible::after { border-color: var(--sun); }
.hot.new::before { content: "?"; position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--sun); color: var(--teal2); font-family: var(--f-disp); font-weight: 700; font-size: 15px; line-height: 26px; text-align: center; animation: bob 1.6s ease-in-out infinite; }
.tag { position: absolute; translate: -50% 0; padding: 4px 12px; border-radius: 999px; background: var(--cream); color: var(--teal2); font-family: var(--f-disp); font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap; box-shadow: 0 3px 0 var(--walnut2); pointer-events: none; }
.tag.done::after { content: " ✓"; color: var(--sage2); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.note-card { position: absolute; left: 50%; translate: -50% 0; width: min(92vw, 520px); bottom: calc(138px + env(safe-area-inset-bottom, 0px)); padding: 12px 16px; border-radius: 16px; background: var(--cream); color: var(--ink); font-weight: 700; text-align: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); animation: pop .35s ease both; }
.note-card b { font-family: var(--f-disp); color: var(--teal2); display: block; font-size: 18px; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- The drawings' own gentle motion ---------- */
.bulb { animation: twinkle 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.tw { animation: twinkle 4.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.flick { animation: flick 3.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.flag { transform-box: fill-box; transform-origin: 50% 0; animation: sway 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.walk { animation: walk var(--dur, 16s) linear infinite; animation-delay: var(--d, 0s); }
.bob { transform-box: fill-box; animation: step .62s ease-in-out infinite; }
.steam { animation: steam 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.float { animation: float 4.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.wave { transform-box: fill-box; transform-origin: 0 100%; animation: wave 1.8s ease-in-out infinite; }
.cheer { animation: cheer 1.1s ease-in-out infinite; animation-delay: var(--d, 0s); }
.paper { transform-box: fill-box; transform-origin: 50% 0; animation: sway 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.chat { animation: chat 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.tent { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 3.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes flick { 0%, 100% { opacity: 1; } 40% { opacity: .82; } 70% { opacity: .94; } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes walk { 0% { transform: translateX(var(--x0)); opacity: 0; } 6% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes step { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes steam { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .55; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes wave { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } }
@keyframes cheer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes chat { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-6px); opacity: .5; } }
.door { transition: transform 1.1s cubic-bezier(.4, 0, .2, 1); transform-box: view-box; }
.spill, .spill-out { opacity: 0; transition: opacity 1.1s ease; }
.scene.open .door-l, .scene.open .door-r { transform: scaleX(.1); }
.scene.open .spill, .scene.open .spill-out { opacity: 1; }
.blk { transition: transform .9s cubic-bezier(.3, .8, .4, 1); }
.st-tower.topple .blk { transform: translate(calc(var(--i) * 14px - 30px), calc(var(--i) * 0px)) rotate(calc(var(--i) * 22deg - 40deg)); transition-duration: .55s; }
.st-bean.squish .bean { animation: squish .5s ease; }
@keyframes squish { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.78) scaleX(1.06); } }
.bean { transform-box: fill-box; transform-origin: 50% 100%; }
.st-balloons.pop-all .float { animation: float 4.5s ease-in-out infinite, boing .5s ease; }
@keyframes boing { 0%, 100% { scale: 1; } 40% { scale: 1.12; } }

/* ---------- Scene 1: the welcome ---------- */
.story { position: absolute; left: 50%; top: calc(66px + env(safe-area-inset-top, 0px)); translate: -50% 0; width: min(92vw, 620px); text-align: center; pointer-events: none; }
.story .k { font-family: var(--f-disp); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--sun); text-shadow: 0 1px 0 var(--teal2); }
.story h1 { font-family: var(--f-disp); font-weight: 600; font-size: clamp(32px, 9vw, 58px); line-height: 1.02; color: var(--cream); text-shadow: 0 3px 0 var(--teal2), 0 0 18px rgba(22, 66, 75, .75); margin: 2px 0 8px; text-wrap: balance; }
.story .s1, .story .s2 { font-family: var(--f-hand); font-weight: 700; font-size: clamp(22px, 5.6vw, 32px); line-height: 1.1; color: var(--cream); text-shadow: 0 2px 0 var(--teal2), 0 0 12px rgba(22, 66, 75, .85); opacity: 0; animation: fadein 1.1s ease forwards; }
.story .s1 { animation-delay: .5s; } .story .s2 { animation-delay: 2.1s; margin-top: 2px; }
@keyframes fadein { to { opacity: 1; } }
.sign { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; min-width: min(78vw, 300px); min-height: 68px; padding: 0 30px; border: 5px solid var(--walnut2); border-radius: 22px; background: linear-gradient(var(--sun), var(--sun2)); color: var(--walnut2); font-family: var(--f-disp); font-weight: 700; font-size: clamp(26px, 7vw, 34px); box-shadow: 0 0 0 4px rgba(255, 233, 168, .5), 0 0 34px 8px rgba(255, 217, 122, .55), 0 8px 0 var(--walnut2); animation: signglow 2.6s ease-in-out infinite; }
.sign:active { transform: translateY(5px); }
@keyframes signglow { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 233, 168, .45), 0 0 26px 4px rgba(255, 217, 122, .45), 0 8px 0 var(--walnut2); } 50% { box-shadow: 0 0 0 6px rgba(255, 233, 168, .7), 0 0 42px 12px rgba(255, 217, 122, .7), 0 8px 0 var(--walnut2); } }
.scene.open .sign { opacity: 0; transition: opacity .4s; pointer-events: none; }
.resume { position: absolute; left: 50%; translate: -50% 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Game sheets (a dialog for each game) and the other panels ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; background: rgba(22, 66, 75, .72); padding: 0; }
.sheetp { position: relative; width: min(100%, 640px); max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--cream); color: var(--ink); border-radius: 26px 26px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .35); }
.sheetp:focus { outline: none; }
@media (min-width: 700px) { .sheet-wrap { align-items: center; } .sheetp { border-radius: 26px; max-height: 90dvh; } }
.sheetp h2 { font-family: var(--f-disp); font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--teal2); padding-right: 40px; }
.x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--cream2); color: var(--teal2); font-size: 26px; line-height: 1; }
.sub { margin-top: 4px; color: #5a4a3e; font-size: 15.5px; font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
.bar { height: 10px; border-radius: 99px; background: var(--cream2); overflow: hidden; margin-top: 12px; }
.bar > i { display: block; height: 100%; width: 0; background: var(--a); border-radius: 99px; transition: width .3s; }
.stat { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; font-family: var(--f-disp); font-weight: 600; font-size: 17px; color: var(--teal2); }
.switch { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 15.5px; }
.switch input { width: 22px; height: 22px; accent-color: var(--teal); }
.qtext { margin-top: 12px; font-family: var(--f-disp); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--ink); text-wrap: balance; }
.opts { display: grid; gap: 10px; margin-top: 14px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 16px; border: 3px solid var(--cream2); border-radius: 16px; background: #fff; font-weight: 800; font-size: 17px; text-align: left; }
.opt:hover { border-color: var(--sage); }
.opt .l { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--cream2); display: grid; place-items: center; font-family: var(--f-disp); font-weight: 700; color: var(--teal2); }
.opt.right { border-color: #4E9A6B; background: #E5F4EA; } .opt.right .l { background: #4E9A6B; color: #fff; }
.opt.miss { border-color: var(--coral); background: #FCEDEA; }
.opt[disabled] { cursor: default; }
.fb { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--cream2); font-weight: 700; font-size: 15.5px; }
.fb b { display: block; font-family: var(--f-disp); font-size: 18px; color: var(--teal2); }
.result { text-align: center; padding: 10px 0; }
.result .big { font-family: var(--f-disp); font-weight: 700; font-size: 44px; color: var(--teal2); line-height: 1; }
.result p { margin-top: 8px; font-weight: 700; }
.pairs { display: flex; gap: 8px; margin-top: 14px; }
.pairs button { flex: 1; min-height: 48px; border-radius: 14px; border: 3px solid var(--cream2); background: #fff; font-weight: 800; }
.pairs button[aria-pressed="true"] { border-color: var(--teal); background: #E3F0F0; }
.mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.mem.n12 { grid-template-columns: repeat(4, 1fr); }
.mem.n8 { grid-template-columns: repeat(4, 1fr); }
.card { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; background: transparent; perspective: 600px; min-width: 44px; min-height: 44px; }
.card .in { position: absolute; inset: 0; transition: transform .38s; transform-style: preserve-3d; }
.card.up .in, .card.done .in { transform: rotateY(180deg); }
.card .fr, .card .bk { position: absolute; inset: 0; border-radius: 12px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 3px solid var(--walnut2); }
.card .bk { background: var(--teal) repeating-linear-gradient(45deg, rgba(239, 203, 102, .22) 0 6px, transparent 6px 14px); }
.card .bk::after { content: ""; width: 34%; aspect-ratio: 1; background: var(--sun); transform: rotate(45deg); border-radius: 4px; }
.card .fr { background: var(--cream); transform: rotateY(180deg); }
.card .fr svg { width: 74%; height: 74%; }
.card.done .fr { background: #E5F4EA; border-color: #4E9A6B; }
.field-box { position: relative; margin-top: 14px; height: min(52dvh, 440px); border-radius: 18px; overflow: hidden; background: linear-gradient(#9CD0D6, #FFF4DB); border: 3px solid var(--teal); touch-action: manipulation; }
.balloon { position: absolute; left: 0; top: 0; border: 0; padding: 0; background: transparent; border-radius: 50%; will-change: transform; }
.balloon svg { width: 100%; height: 100%; display: block; }
.puff { position: absolute; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; will-change: transform, opacity; }
.joy { position: absolute; left: 50%; translate: -50% 0; top: calc(132px + env(safe-area-inset-top, 0px)); width: min(94vw, 560px); }
.joy canvas { display: block; width: 100%; border-radius: 18px; background: rgba(22, 66, 75, .55); border: 3px solid var(--sun); touch-action: none; }
.joy-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 12px; border-radius: 14px; background: var(--ui); color: var(--cream); font-family: var(--f-disp); font-weight: 600; font-size: 18px; }
.joy-card { position: absolute; left: 50%; translate: -50% 0; top: calc(132px + env(safe-area-inset-top, 0px)); width: min(94vw, 460px); padding: 18px 16px; border-radius: 22px; background: var(--cream); color: var(--ink); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.joy-card h3 { font-family: var(--f-disp); font-weight: 600; font-size: 26px; color: var(--teal2); line-height: 1.1; }
.joy-card p { margin-top: 6px; font-weight: 700; font-size: 15.5px; }
.joy-card .row { justify-content: center; }
.joy-card .ttl { display: inline-block; margin: 10px 0 2px; padding: 6px 18px; border-radius: 999px; background: var(--sun); color: var(--teal2); font-family: var(--f-disp); font-weight: 700; font-size: 22px; }
.fold { animation: fold .8s ease-in both; }
@keyframes fold { to { transform: translate(18vw, 30vh) rotate(-12deg) scale(.3); opacity: 0; } }

/* ---------- Scene 3: the table ---------- */
.menu-card { position: absolute; left: 50%; translate: -50% 0; width: min(92vw, 380px); bottom: calc(140px + env(safe-area-inset-bottom, 0px)); padding: 14px 16px; border-radius: 18px; background: var(--cream); color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .32); }
.menu-card h3 { font-family: var(--f-disp); font-weight: 600; font-size: 20px; color: var(--teal2); }
.menu-card li { padding: 3px 0; font-weight: 700; font-size: 15.5px; }
.menu-card li span { display: block; font-weight: 600; font-size: 13.5px; color: #6a5a4d; }
.dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.dish { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 12px; border: 3px solid var(--cream2); border-radius: 18px; background: #fff; text-align: center; min-height: 44px; }
.dish.taken { opacity: .7; }
.dish svg { width: 64px; height: 64px; }
.dish .d-n { font-family: var(--f-disp); font-weight: 600; font-size: 16.5px; line-height: 1.1; color: var(--teal2); }
.dish .d-q { font-size: 12.5px; font-weight: 600; color: #6a5a4d; line-height: 1.25; }
.dish .d-s { margin-top: 2px; padding: 2px 10px; border-radius: 99px; background: #E5F4EA; color: #2E6B47; font-weight: 800; font-size: 12.5px; }
.dish .d-s.full { background: var(--cream2); color: #6a5a4d; } .dish .d-s.mine { background: var(--sun); color: var(--teal2); }
.dish.wide { grid-column: 1 / -1; flex-direction: row; justify-content: center; }
.pot-note { margin-top: 12px; font-weight: 700; font-size: 14.5px; color: #5a4a3e; }
.token { position: fixed; left: -90px; bottom: 30%; width: 70px; height: 70px; z-index: 40; pointer-events: none; }
.token.go { animation: roll 1.5s ease-in forwards; }
@keyframes roll { 0% { transform: translateX(0) rotate(0); } 100% { transform: translateX(calc(100vw + 180px)) rotate(900deg); } }
.v-bunting { position: fixed; inset: 0 0 auto 0; z-index: 40; height: 60px; pointer-events: none; overflow: hidden; }
.v-bunting.go { animation: slide .9s ease-in-out both; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---------- Scene 5: a seat is waiting ---------- */
.scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(64px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: center; }
.col { width: 100%; max-width: 600px; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.invcard { position: relative; width: min(94vw, 520px); perspective: 1400px; }
.inv-front, .inv-in { border-radius: 22px; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); }
.inv-in { background: var(--cream) repeating-linear-gradient(transparent 0 33px, rgba(33, 89, 99, .07) 33px 34px); color: var(--ink); padding: 22px 20px 24px; text-align: center; border: 3px solid var(--sun); }
.inv-front { position: absolute; inset: 0; z-index: 2; transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(var(--teal), var(--teal2)); border: 3px solid var(--sun); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--cream); text-align: center; padding: 20px; }
.inv-front .y { font-family: var(--f-disp); font-weight: 700; font-size: clamp(30px, 8vw, 44px); letter-spacing: .02em; color: var(--sun); }
.inv-front .t { font-family: var(--f-hand); font-weight: 700; font-size: 24px; }
.invcard.opening .inv-front { animation: cardopen 1.1s cubic-bezier(.5, 0, .2, 1) forwards; }
.invcard.opened .inv-front { display: none; }
@keyframes cardopen { to { transform: rotateY(-168deg); } }
.invcard.closed .inv-in { visibility: hidden; }
.i-kick { font-family: var(--f-disp); font-weight: 700; font-size: 15px; letter-spacing: .18em; color: var(--a2); }
.i-title { font-family: var(--f-disp); font-weight: 700; font-size: clamp(32px, 9vw, 48px); line-height: 1.02; color: var(--teal2); margin: 4px 0 6px; text-wrap: balance; }
.i-tag { font-family: var(--f-hand); font-weight: 700; font-size: 26px; color: var(--walnut); line-height: 1.1; }
.i-welcome { margin-top: 10px; font-weight: 600; font-size: 15.5px; color: #4a3a2f; }
.panel { width: 100%; background: var(--cream); color: var(--ink); border-radius: 20px; padding: 18px 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.panel h3 { font-family: var(--f-disp); font-weight: 600; font-size: 22px; color: var(--teal2); line-height: 1.1; }
.hint { font-size: 13.5px; color: #5a4a3e; margin-top: 6px; font-weight: 600; }
.det { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 12px; text-align: left; }
.det > div { min-width: 0; } .det > .wide { grid-column: 1 / -1; }
.det dt { font-family: var(--f-disp); font-weight: 600; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--a2); }
.det dd { font-weight: 800; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.det .small dd { font-weight: 700; font-size: 15px; }
.det .x, .det .dir { display: block; font-weight: 600; font-size: 14px; color: #5a4a3e; }
.det .ph { color: #8a7a6d; font-weight: 700; }
.dirlink { display: inline-block; margin-top: 6px; padding: 8px 14px; min-height: 44px; border-radius: 999px; background: var(--sage); color: var(--teal2); font-weight: 800; text-decoration: none; }
.sched { margin-top: 12px; text-align: left; }
.sched li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--hair); font-weight: 700; }
.sched li b { flex: none; min-width: 78px; font-family: var(--f-disp); color: var(--a2); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; justify-content: center; }
.field { margin-top: 14px; text-align: left; }
.field label, .flabel, legend { display: block; font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.field input[type="text"], .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 3px solid var(--cream2); border-radius: 14px; background: #fff; }
.field input:focus, .field textarea:focus { border-color: var(--teal3); outline: none; }
.field textarea { min-height: 84px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 14px 0 0; text-align: left; }
.choices { display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border: 3px solid var(--cream2); border-radius: 14px; background: #fff; font-weight: 800; }
.choice input { width: 22px; height: 22px; accent-color: var(--teal); flex: none; }
.choice:has(input:checked) { border-color: var(--teal3); background: #E8F2F2; }
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--sage); color: var(--teal2); font-size: 26px; font-weight: 800; }
.stepper output { min-width: 32px; text-align: center; font-family: var(--f-disp); font-weight: 700; font-size: 26px; }
.err { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: #FCEDEA; border: 2px solid var(--coral); color: #7A2E20; font-weight: 800; font-size: 14.5px; }
.ok-box { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #E5F4EA; border: 2px solid #4E9A6B; color: #1f5a3a; font-weight: 800; }
.confirm { margin-top: 14px; padding: 14px; border-radius: 16px; background: #fff; border: 3px dashed var(--sage2); text-align: center; }
.confirm .c-h { font-family: var(--f-disp); font-weight: 700; font-size: 22px; color: var(--teal2); }
.confirm li { font-weight: 700; padding: 1px 0; }
.tagline { font-family: var(--f-hand); font-weight: 700; font-size: 26px; color: var(--cream); text-shadow: 0 2px 0 var(--teal2); text-align: center; }
.empty { color: #6a5a4d; font-weight: 700; }

/* ---------- Hand-overs between scenes ---------- */
#veil { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.out-fade { animation: outfade .35s ease both; } .in-fade { animation: infade .35s ease both; }
.out-zoom { animation: outfade .9s ease-in both; } .in-zoom { animation: infade .9s ease both; }
@keyframes outfade { to { opacity: 0; } } @keyframes infade { from { opacity: 0; } to { opacity: 1; } }
.v-glow { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 62%), rgba(255, 233, 168, .95), rgba(255, 233, 168, 0) 62%); opacity: 0; animation: glowin 1.3s ease both; }
@keyframes glowin { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- The menu (scenes, replay, reduced motion) ---------- */
.menu-list { display: grid; gap: 8px; margin-top: 14px; }
.menu-list .btn { justify-content: flex-start; font-size: 17px; min-height: 52px; }
.menu-list .btn.cur { background: var(--sun); }

/* ---------- Reduced motion, a still invitation, and low-power phones ---------- */
html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition: none !important; }
html.rm .story .s1, html.rm .story .s2 { opacity: 1; }
html.rm .cam.zoom { transform: none; }
html.lite .bulb, html.lite .tw, html.lite .flag, html.lite .paper, html.lite .chat, html.lite .steam { animation: none !important; }
.sheet-wrap { overscroll-behavior: contain; }
body.modal #stage { pointer-events: none; }

/* ---------- Printing the confirmation: only the card ---------- */
@media print {
  body { overflow: visible; background: #fff; }
  body > *:not(#print-sheet) { display: none !important; }
  #print-sheet { display: block !important; position: static; color: #000; padding: 24px; font-family: var(--f-body); }
  #print-sheet h1 { font-family: var(--f-disp); font-size: 30px; margin: 0 0 6px; }
  #print-sheet p { font-size: 18px; margin: 4px 0; }
}
#print-sheet { display: none; }

@media (max-width: 380px) { .mem { gap: 7px; } .opt { font-size: 16px; } .sign { min-width: 70vw; } }
@media (max-height: 560px) and (orientation: landscape) { .head { top: 54px; } .h2 { font-size: 26px; } .lead { font-size: 14px; } .cta-row { bottom: 60px; } .sign { bottom: 70px; min-height: 56px; } .story h1 { font-size: 30px; } .joy, .joy-card { top: 104px; } }

/* People never bob, sway, rock, slide back and forth or run in a loop (the user, 2026-11-09). They stand still; legs that step and a wave are fine. */
.walk, .bob { animation: none !important; }