/* Not My Event: the look of "Diwali: A Journey of a Thousand Lights" (public/templates/diwali-journey-of-lights.html). Mobile first, and every scene fills the WHOLE screen: a city courtyard at night
   (the same picture for the first light, the festival and the invitation), a stone floor for the rangoli, a night garden for the tree. The drawings are made for the exact size of the screen by
   diwali-art.js, so nothing is a narrow strip in the middle. The scene's own words sit over the sky, its buttons sit at the bottom, and everything you can press is a real button or a focusable shape.
   Lights are drawn lit; here they are switched on by the class "on" (a diya, a person, a lantern), and the whole courtyard warms in steps (.warm, then .lit). Only transform and opacity move.
   Reduced motion (the phone's setting, or "Reduce motion" in the menu, or "Perfectly still" from the host) shows every scene finished and turns every loop off. */
:root {
  --night: #182747; --indigo: #1F254A; --deep: #050921; --gold: #DDBB73; --candle: #F4D58B; --saffron: #F2A43B; --rose: #DF4D91; --turq: #22AFA6; --purple: #7D4DB5;
  --accent: #DDBB73; --glow: #F4D58B; --ink: #1B1530; --paper: #FFF9EC; --muted: #6B5E7A; --ok: #1F7A4C; --bad: #B3261E;
  --display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif; --body: 'Nunito', system-ui, -apple-system, sans-serif;
  --top: calc(56px + env(safe-area-inset-top, 0px)); --bot: max(14px, env(safe-area-inset-bottom, 0px));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--deep); color: #FFF4DC; font-family: var(--body); font-weight: 600; -webkit-text-size-adjust: 100%; }
body { overflow: hidden; touch-action: manipulation; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #fff; color: var(--ink); font-weight: 800; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--purple); }

/* ---- the courtyard: the sky, the fireworks (they open BEHIND the rooftops), then the city and everyone in it ---- */
.world, .bgbox { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--deep); touch-action: none; }
.bgbox { display: none; }
body[data-scene-now="colors"] .world, body[data-scene-now="wishes"] .world, body[data-scene-now="festival"] .world { display: none; }
body[data-scene-now="colors"] #bg2, body[data-scene-now="wishes"] #bg3, body[data-scene-now="festival"] #bg4 { display: block; }
.dw-layer, .world canvas, .bgbox canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.dw-layer, .world canvas, .bgbox canvas, .layer { pointer-events: none; }
.layer { position: absolute; inset: 0; }
.dw-layer .hit, .dw-layer .pbody { pointer-events: all; cursor: pointer; fill: transparent; }
.dw-layer .mhit { pointer-events: all; cursor: pointer; fill: transparent; }
.world .lit-layer { opacity: 0; transition: opacity 1.8s ease; }
.world.warm .lit-layer { opacity: .35; } .world.lit .lit-layer { opacity: 1; }
.world .gar { opacity: .35; transition: opacity 1.8s ease; } .world.warm .gar { opacity: .6; } .world.lit .gar { opacity: 1; }
/* the strings of lights: every bulb is amber glass with a soft halo that lights the wall beside it (the .ba layer), and a white-hot moment runs along the string: the .bh layer fades in and out, one group of bulbs a little behind the last, so you can SEE the lights are on, not just a row of beads (and the painted fireworks breathe) */
.world .bp .bh { opacity: 0; animation: bheat 1.5s ease-in-out infinite; }
.world .bp1 .bh { animation-delay: -.25s; } .world .bp2 .bh { animation-delay: -.5s; } .world .bp3 .bh { animation-delay: -.75s; } .world .bp4 .bh { animation-delay: -1s; } .world .bp5 .bh { animation-delay: -1.25s; }
@keyframes bheat { 0%, 100% { opacity: 0; } 45% { opacity: 1; } }
.fwp { transform-box: fill-box; transform-origin: 50% 50%; animation: fwpulse 2.8s ease-in-out infinite alternate; }
@keyframes fwpulse { from { opacity: .45; transform: scale(.94); } to { opacity: 1; transform: scale(1.08); } }
.world .veil { opacity: .42; transition: opacity 1.8s ease; } .world.warm .veil { opacity: .28; } .world.lit .veil { opacity: 0; }

/* ---- a diya: unlit it is a dark clay lamp with a small ember that breathes (so you can find it); lit it has its flame and its glow. The flame is a child group whose base is the wick, so it never leaves the wick. ---- */
.dy .fl, .dy .gl, .dy .pool, .bigd .fl, .bigd .gl, .dw-lan:not(.on) .lg, .dw-lan:not(.on) .lfl { opacity: 0; transition: opacity .6s ease; }
.dy.on .fl, .dy.on .gl, .dy.on .pool, .bigd.on .fl, .bigd.on .gl { opacity: 1; }
.fl { transform-box: fill-box; transform-origin: 50% 100%; }
.dy.on .fl, .bigd.on .fl, .dw-lan.on .fl, .dw-diya .fl, .dw-lamp .fl { animation: flick 1.4s ease-in-out infinite alternate; }
.dy.on .gl, .bigd.on .gl { animation: gflick 1.9s ease-in-out infinite alternate; }
.dy.on .wk, .bigd.on .wk, .dw-lan.on .lwk { opacity: 0; }
.dy:not(.on) .wk, .bigd:not(.on) .wk, .dw-lan:not(.on) .lwk { animation: ember 2.6s ease-in-out infinite; }
@keyframes flick { 0% { transform: scale(1, 1) rotate(-1.5deg); } 35% { transform: scale(.95, 1.07) rotate(1.2deg); } 70% { transform: scale(1.04, .94) rotate(-.8deg); } 100% { transform: scale(.97, 1.05) rotate(1.6deg); } }
@keyframes gflick { from { opacity: .82; } to { opacity: 1; } }
@keyframes ember { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
.dy.nudge .wk { animation-duration: .9s; }
.pg .pl { opacity: 0; transition: opacity 1.2s ease; } .pg.on .pl { opacity: 1; }
.dy.flare .fl { animation: flare .7s ease-out; } @keyframes flare { 0% { transform: scale(1); } 30% { transform: scale(1.5, 1.7); } 100% { transform: scale(1); } }

/* ---- the bar: one Menu button at the left (Event Details, RSVP, Skip to invitation, Reduce motion live in it) and the standard speaker at the right ---- */
#menu-wrap { position: fixed; z-index: 62; top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; }
#b-menu { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid rgba(244,213,139,.45); background: rgba(8,12,34,.72); color: #FFF4DC; font-weight: 800; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
#b-menu::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
#b-menu[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -2px); }
#menu { margin-top: 8px; min-width: 230px; max-width: calc(100vw - 16px); padding: 6px; border-radius: 18px; border: 2px solid rgba(244,213,139,.4); background: rgba(8,12,34,.96); display: grid; gap: 2px; box-shadow: 0 14px 34px rgba(0,0,0,.55); }
#menu button { min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: #FFF4DC; text-align: left; font-weight: 800; font-size: 15px; cursor: pointer; }
#menu button:hover, #menu button:focus-visible { background: rgba(244,213,139,.18); }
#menu button[aria-pressed="true"] { background: rgba(34,175,166,.28); }
#menu small { display: block; padding: 0 14px 8px; color: #CFC6E0; font-size: 12px; font-weight: 600; line-height: 1.35; }
body[data-scene-now="invite"] #b-skip, body[data-scene-now="invite"] #b-rsvp { display: none; }
#dots { position: fixed; z-index: 55; top: calc(20px + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0; display: flex; gap: 7px; }
#dots button { width: 12px; height: 12px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid rgba(244,213,139,.55); background: transparent; cursor: pointer; position: relative; }
#dots button::after { content: ''; position: absolute; inset: -16px -4px; }
#dots button.on { background: var(--candle); border-color: var(--candle); box-shadow: 0 0 8px var(--candle); }
#dots button.seen { background: rgba(244,213,139,.45); }
#dots button[disabled] { opacity: .35; cursor: default; }

/* ---- scenes: each one fills the screen. The empty parts let a touch through to the courtyard behind (so the sky and the candles can be tapped); only the words' own buttons catch it. ---- */
.scene { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.scene.in { animation: sceneIn .8s ease both; }
@keyframes sceneIn { from { opacity: 0; } to { opacity: 1; } }
.cap { position: absolute; left: 0; right: 0; top: clamp(58px, 9vh, 110px); margin: 0 auto; padding: 0 16px; max-width: min(96vw, 860px); text-align: center; pointer-events: none; z-index: 8; }
.cap h1, .cap h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.45rem, 3.4vw + .8rem, 3rem); line-height: 1.12; color: #FFF1D0; text-wrap: balance; text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 0 26px rgba(0,0,0,.7); }
.cap p { margin: .55em auto 0; max-width: 34em; font-size: clamp(.9rem, 1vw + .65rem, 1.15rem); font-weight: 700; line-height: 1.35; color: var(--glow); text-shadow: 0 1px 8px rgba(0,0,0,.95); }
.cap [data-nme-field] { pointer-events: auto; }
.cta { position: absolute; z-index: 30; left: 0; right: 0; bottom: var(--bot); display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; padding: 0 12px; pointer-events: none; }
.cta > * { pointer-events: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0) 55%), var(--accent); color: #1B1530; font-weight: 900; font-size: 16px; cursor: pointer; text-decoration: none; box-shadow: inset 0 -3px 6px rgba(0,0,0,.2), 0 4px 0 rgba(10,20,48,.7), 0 8px 18px rgba(0,0,0,.4); transition: transform .08s; }
.btn:active { transform: translateY(2px); }
.btn.big { min-height: 56px; padding: 0 30px; font-size: 18px; }
.btn.ghost { background: rgba(8,12,34,.78); color: #FFF4DC; box-shadow: inset 0 0 0 2px rgba(244,213,139,.55); }
.btn.go { animation: nudge 1.8s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
.btn[disabled] { opacity: .55; cursor: default; }
.link { background: none; border: 0; padding: 8px 4px; color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.count, .hint-line { position: absolute; z-index: 20; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 800; color: var(--candle); text-shadow: 0 1px 8px #000, 0 0 14px #000; pointer-events: none; padding: 0 14px; }
.count { bottom: calc(var(--bot) + 62px); } .hint-line { bottom: calc(var(--bot) + 60px); }
#bubble { position: fixed; z-index: 80; max-width: min(260px, 80vw); padding: 10px 14px; border-radius: 16px; background: #FFF4DC; color: #2B1A08; font: 800 15px/1.3 var(--body); text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.5); transform: translate(-50%, -112%); pointer-events: none; animation: bubIn .25s ease-out both; }
#bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: #FFF4DC; transform: translateX(-50%) rotate(45deg); }
#bubble.act { pointer-events: auto; } #bubble .link { color: #7A1812; padding: 2px 4px; }
@keyframes bubIn { from { opacity: 0; transform: translate(-50%, -100%); } to { opacity: 1; transform: translate(-50%, -112%); } }

/* ---- the golden thread: one line of light that travels from scene to scene ---- */
#thread { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 65; pointer-events: none; overflow: visible; }
#thread path { fill: none; stroke: var(--candle); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; vector-effect: non-scaling-stroke; }
#thread path.glow { stroke: #FFF6C8; stroke-width: 2; }
#thread.on path { opacity: .95; animation: draw 1.3s ease-in-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
#veil { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 55%, #FFE9A8, #F4B54B 40%, rgba(244,181,75,0) 75%); }
#veil.on { animation: veil .9s ease-in-out both; }
@keyframes veil { 0% { opacity: 0; } 45% { opacity: .65; } 100% { opacity: 0; } }

/* ---- scene 1: the first light. The big diya is a real button in the courtyard (it is placed by the page from the same numbers the drawing used). ---- */
#diya-btn { position: absolute; z-index: 6; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bigd svg { width: 100%; height: auto; display: block; overflow: visible; }
#diya-btn:not(.on)::after { content: ''; position: absolute; inset: -18% -12%; border-radius: 50%; border: 3px solid var(--candle); opacity: 0; animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.7); opacity: .85; } 100% { transform: scale(1.25); opacity: 0; } }
#diya-btn.hush::after { display: none; }
#s1 .cta .btn[hidden] { display: none; }
/* the lighting stick: a long brass stick with a flame on its tip, dragged to the big diya (the page sets its size and place). The "Light the Diya." button stays for keyboards and screen readers: out of sight until it is focused. */
#s1 .stick { position: absolute; z-index: 24; margin: 0; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transform-origin: 50% 92%; animation: stick-sway 3.2s ease-in-out infinite alternate; }
#s1 .stick[hidden], #s1 .stick-hint[hidden] { display: none; }
/* a scene lets every touch and click through to the courtyard behind it (.scene has pointer-events: none, and that is inherited), so what must be pressed says so: the stick, and the big diya */
#s1 .stick, #diya-btn { pointer-events: auto; }
#s1 .stick.held { cursor: grabbing; animation: none; }
#s1 .stick.back { transition: left .35s cubic-bezier(.3, 1.3, .5, 1), top .35s cubic-bezier(.3, 1.3, .5, 1); animation: none; }
#s1 .stick svg { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.stick-fl { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 1.1s ease-in-out infinite alternate; }
@keyframes stick-sway { from { transform: rotate(-3deg); } to { transform: rotate(2deg); } }
#s1 .stick-hint { position: absolute; z-index: 23; max-width: 150px; margin: 0; font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--candle); text-shadow: 0 1px 8px #000, 0 0 14px #000; pointer-events: none; }
#s1.stick-on #b-light:not(:focus) { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#diya-btn.near::after { opacity: 1; animation: none; border-width: 4px; transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { #s1 .stick, .stick-fl { animation: none; } }

/* ---- scene 2: the rangoli on a stone floor. The color bowls are real buttons; the rangoli is forty-one real, named shapes. ---- */
.fxo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; }
#rangoli { position: absolute; z-index: 6; pointer-events: auto; touch-action: none; }
.dw-rg { width: 100%; height: 100%; display: block; overflow: visible; }
.dw-rg [data-r] { cursor: pointer; outline: none; }
.dw-rg [data-r]:focus-visible { stroke: #fff; stroke-width: 7; stroke-dasharray: none; stroke-opacity: 1; }
.dw-rg .dw-new { animation: pop .35s ease-out; transform-box: fill-box; transform-origin: 50% 50%; } @keyframes pop { from { transform: scale(.9); opacity: .6; } to { transform: none; opacity: 1; } }
#rangoli.done::before { content: ''; position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(255,224,150,.55), rgba(255,224,150,0) 68%); animation: glowpulse 2.6s ease-in-out infinite alternate; pointer-events: none; z-index: -1; }
@keyframes glowpulse { from { opacity: .45; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
.tools { position: absolute; z-index: 22; left: 0; right: 0; bottom: calc(var(--bot) + 120px); display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0 10px; pointer-events: none; }
.tools > * { pointer-events: auto; }
.tools .btn { min-height: 42px; padding: 0 16px; font-size: 14px; }
.tools .btn[aria-pressed="true"] { background: #fff; color: #1B1530; }
.bowls { position: absolute; z-index: 22; left: 0; right: 0; bottom: calc(var(--bot) + 60px); display: flex; gap: clamp(4px, 1.2vw, 12px); justify-content: center; padding: 0 6px; pointer-events: none; }
.bowl { position: relative; display: flex; align-items: center; justify-content: center; width: clamp(40px, 9vw, 76px); height: clamp(44px, 7vw, 58px); padding: 0; border: 0; background: none; border-radius: 14px; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.bowl svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bowl[aria-pressed="true"] { outline: 3px solid #fff; outline-offset: 2px; background: rgba(255,255,255,.14); transform: translateY(-6px); }
.bowl::before { content: ''; position: absolute; inset: -6px; }
#s2 .prog { position: absolute; z-index: 20; left: 0; right: 0; bottom: calc(var(--bot) + 176px); text-align: center; font-size: 13px; font-weight: 800; color: var(--candle); text-shadow: 0 1px 8px #000; pointer-events: none; padding: 0 12px; }
#bf { position: absolute; z-index: 9; padding: 0; border: 0; background: none; cursor: pointer; opacity: .9; animation: flutter 6s ease-in-out infinite alternate; pointer-events: auto; }
#bf svg { width: 100%; height: auto; display: block; }
#bf::before { content: ''; position: absolute; inset: -10px; }
@keyframes flutter { from { transform: translate(0, 0) rotate(-6deg); } to { transform: translate(-30px, 16px) rotate(8deg); } }
.dw-wing { transform-origin: 50% 50%; animation: wings .5s ease-in-out infinite alternate; } @keyframes wings { from { transform: scaleX(1); } to { transform: scaleX(.55); } }

/* ---- scene 3: the tree of wishes. Lanterns hang on strings from the branches; an unlit one is a lantern you can light. ---- */
#lanterns { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.lan { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transform: translateX(-50%); transform-origin: 50% 0; animation: sway 4.5s ease-in-out infinite alternate; -webkit-tap-highlight-color: transparent; }
.lan:nth-child(2n) { animation-duration: 5.6s; animation-delay: -1.2s; }
.lan svg { width: 100%; height: auto; display: block; overflow: visible; }
.lan::before { content: ''; position: absolute; inset: -8px; }
.lan.mine::after { content: ''; position: absolute; inset: -10% -30%; border-radius: 50%; border: 2px solid #fff; opacity: .7; }
.lan .tag { position: absolute; top: 100%; left: 50%; width: 150px; margin-left: -75px; padding-top: 2px; font: 800 12px/1.25 var(--body); color: #FFF1D0; text-shadow: 0 1px 6px #000, 0 0 12px #000; text-align: center; pointer-events: none; }
@keyframes sway { from { transform: translateX(-50%) rotate(-2.5deg); } to { transform: translateX(-50%) rotate(2.5deg); } }
.wishbox { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; pointer-events: none; }
.wishbox .in { pointer-events: auto; width: min(660px, 100%); max-height: 56vh; overflow-y: auto; padding: 12px 14px; border-radius: 22px; border: 1px solid rgba(244,213,139,.4); background: rgba(5,9,26,.93); }
.wishbox .q { margin: 0 0 6px; font: 700 20px var(--display); color: var(--candle); }
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 6px 0 8px; }
.chips button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 66px; padding: 6px; border-radius: 14px; border: 2px solid rgba(244,213,139,.4); background: rgba(255,255,255,.06); color: #FFF4DC; font-weight: 800; font-size: 13px; line-height: 1.2; text-align: center; cursor: pointer; }
.chips button[aria-pressed="true"] { background: rgba(244,213,139,.26); border-color: #fff; }
.dw-ico { width: 34px; height: 30px; display: block; }
.wishbox input[type="text"] { width: 100%; min-height: 46px; padding: 8px 12px; border-radius: 12px; border: 2px solid rgba(244,213,139,.5); background: rgba(10,20,48,.9); color: #FFF4DC; font: inherit; font-size: 16px; }
#w-name-wrap { margin: 2px 0 8px; display: grid; gap: 4px; }
#w-name-wrap[hidden] { display: none; }
.wishbox textarea { width: 100%; min-height: 60px; padding: 10px 12px; border-radius: 12px; border: 2px solid rgba(244,213,139,.5); background: rgba(10,20,48,.9); color: #FFF4DC; font: inherit; font-size: 16px; resize: vertical; }
.wishbox .small { font-size: 13px; color: #CFC6E0; margin: 4px 0; }
.wishbox .state { margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; background: rgba(34,175,166,.18); box-shadow: inset 0 0 0 2px rgba(34,175,166,.55); font-size: 14px; }
.wishbox .btns { justify-content: center; margin-top: 8px; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; font-weight: 700; font-size: 14px; }
.check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--turq); flex: none; }
.modq { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(244,213,139,.12); box-shadow: inset 0 0 0 2px rgba(244,213,139,.5); }
.modq h3 { margin: 0 0 6px; font: 600 20px var(--display); color: var(--candle); } .modq ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.modq li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(10,20,48,.8); font-size: 14px; } .modq small { display: block; color: #CFC6E0; }
.modq .acts { display: flex; gap: 6px; } .modq button { min-height: 38px; padding: 0 12px; border-radius: 999px; border: 2px solid rgba(244,213,139,.5); background: transparent; color: #FFF4DC; font-weight: 800; cursor: pointer; }

/* ---- scene 4: the festival. The things to find are real buttons standing in the courtyard; the people greet you; the sky and the floor answer a touch. ---- */
.hs-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hs { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transform: translate(-50%, -100%); -webkit-tap-highlight-color: transparent; }
.hs svg { width: 100%; height: auto; display: block; overflow: visible; }
.hs::before { content: ''; position: absolute; inset: -10px; }
.hs.hint::after { content: ''; position: absolute; inset: -8%; border-radius: 50%; border: 2px solid rgba(244,213,139,.85); animation: ping 2.6s ease-out infinite; }
.hs.lamp { opacity: .6; } .hs.lamp:hover, .hs.lamp:focus-visible, .hs.lamp.on { opacity: 1; }
/* the golden lights (out-of-focus lamps) glimmer, brighten with every little diya that is lit, and flash when touched; a wisp of smoke drifts up from the lamp */
.bkl { transition: opacity 1s ease; opacity: .42; }
#bg4[data-glow="1"] .bkl { opacity: .52; } #bg4[data-glow="2"] .bkl { opacity: .62; } #bg4[data-glow="3"] .bkl { opacity: .72; } #bg4[data-glow="4"] .bkl { opacity: .82; } #bg4[data-glow="5"] .bkl { opacity: .92; } #bg4[data-glow="6"] .bkl { opacity: 1; }
.bk { transform-box: fill-box; transform-origin: 50% 50%; animation: twinkle 3.8s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
.bk.pop { animation: bpop .72s ease-out; } @keyframes bpop { 0% { transform: scale(1); } 30% { transform: scale(1.8); } 100% { transform: scale(1); } }
.smoke { transform-box: fill-box; animation: smoke 9s ease-in-out infinite; } @keyframes smoke { 0% { transform: translate(0, 14px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(14px, -34px); opacity: 0; } }
.hs.lamp.on .dy .fl, .hs.lamp.on .dy .gl { opacity: 1; }

.sweetcards { position: absolute; z-index: 26; left: 50%; translate: -50% 0; bottom: 18%; width: min(92%, 420px); padding: 12px 14px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 6px 0 rgba(0,0,0,.3), 0 18px 34px rgba(0,0,0,.45); animation: bubIn .3s ease-out both; }
.sweetcards .row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; } .sweetcards .dw-sweet { width: 56px; height: 56px; }
.sweetcards b { font: 600 24px var(--display); color: #7A3A12; display: block; } .sweetcards p { margin: 2px 0 0; font-size: 14px; line-height: 1.35; }
.sweetcards .nav { display: flex; justify-content: space-between; margin-top: 8px; }
.sweetcards .nav button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid #C8942F; background: #fff; font-weight: 800; cursor: pointer; }
.hostcard { position: absolute; z-index: 27; left: 50%; top: 40%; translate: -50% -50%; width: min(86%, 380px); padding: 22px 20px; border-radius: 16px; background: linear-gradient(135deg, #FFF3C8, #F4D58B); color: #3A2410; text-align: center; box-shadow: 0 0 0 4px #C8942F, 0 22px 44px rgba(0,0,0,.55); animation: bubIn .35s ease-out both; }
.hostcard h3 { margin: 0 0 8px; font: 600 28px var(--display); } .hostcard p { margin: 0 0 12px; font-size: 16px; line-height: 1.4; }

/* ---- scene 5: the doors and the invitation ---- */
#s5 .doors { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#s5 .dw-door { position: absolute; top: 0; width: 50%; height: 100%; display: block; }
#s5 .dw-door-l { left: 0; transform-origin: 0 50%; } #s5 .dw-door-r { right: 0; transform-origin: 100% 50%; }
#s5.open .dw-door-l { animation: doorL 1.6s ease-in-out forwards; } #s5.open .dw-door-r { animation: doorR 1.6s ease-in-out forwards; }
@keyframes doorL { to { transform: perspective(1000px) rotateY(-102deg); } } @keyframes doorR { to { transform: perspective(1000px) rotateY(102deg); } }
#s5.opened .doors, #s5.still .doors { display: none; }
#s5 .scroll { position: absolute; inset: 0; z-index: 30; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--top) + 18px) 14px calc(28px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; }
.card { width: min(100%, 560px); margin: 0 auto 16px; padding: 24px 20px 22px; background: var(--paper); border: 3px solid var(--gold); border-radius: 22px; box-shadow: 0 8px 0 rgba(0,0,0,.3), 0 20px 40px rgba(0,0,0,.45); color: var(--ink); }
.card h2 { margin: 0 0 6px; font: 600 clamp(28px, 7vw, 40px)/1.05 var(--display); color: #4A2A7A; }
.card h3 { margin: 16px 0 6px; font: 600 22px var(--display); color: #4A2A7A; }
.card p { margin: 0 0 10px; line-height: 1.45; } .card .small, .small { font-size: 14px; color: var(--muted); }
.invite { text-align: center; }
.invite .kick { margin: 0 0 6px; font-size: 13px; font-weight: 900; letter-spacing: .16em; color: #7A5A10; }
.invite .big { margin: 0; font: 600 clamp(34px, 9vw, 52px)/1.02 var(--display); color: #4A2A7A; }
.invite .happy { margin: 6px 0 10px; font: 600 clamp(26px, 7vw, 36px) var(--display); color: #B4541C; }
.invite .cult { margin: 0 0 8px; font: 600 22px var(--display); color: #7A3A8A; }
.invite .host { margin: 12px 0 2px; font-weight: 900; } .invite .when, .invite .where { margin: 0 0 4px; font-weight: 800; color: #3A2A5A; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .invite .btns { justify-content: center; }
.card .btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--gold), 0 4px 0 rgba(0,0,0,.14); }
.det { margin: 8px 0 0; display: grid; gap: 8px; } .det div { padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px #E8DDB8; }
.det dt { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .det dd { margin: 2px 0 0; font-weight: 800; overflow-wrap: anywhere; } .det dd small { display: block; font-weight: 600; color: var(--muted); }
.maps { margin: 8px 0 0; font-size: 14px; color: var(--muted); } .maps a { color: #4A2A7A; font-weight: 800; }
.field-row { display: grid; gap: 6px; margin: 12px 0; } .field-row label { font-weight: 800; font-size: 14px; color: var(--muted); }
input[type="text"], input[type="email"], textarea.f { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid #D9C196; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; }
textarea.f { min-height: 76px; resize: vertical; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; } .radios label { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--gold); background: #fff; font-weight: 900; cursor: pointer; } .radios input { accent-color: var(--purple); width: 18px; height: 18px; } .radios label:has(input:checked) { background: var(--accent); }
.stepper { display: inline-flex; align-items: center; gap: 12px; margin: 6px 0 10px; } .stepper button { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold); background: #fff; font: 600 26px var(--display); cursor: pointer; } .stepper output { min-width: 2ch; text-align: center; font: 600 26px var(--display); }
.err { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: #F6C7C2; color: #7A1812; font-weight: 800; }
.done { margin: 8px 0; padding: 14px; border-radius: 16px; background: #E4F5EA; box-shadow: inset 0 0 0 2px #5CB27E; } .done h3 { margin-top: 0; }
.keep { text-align: center; } .keep canvas { max-width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 0 rgba(0,0,0,.2); }
.nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; width: min(100%, 560px); margin: 0 auto; } .nav .link { color: #FFF4DC; text-shadow: 0 2px 0 #0007; }
.sheet { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 16px; background: rgba(5,9,26,.78); }
.sheet-in { width: min(100%, 520px); max-height: calc(100svh - 32px); overflow-y: auto; padding: 18px 16px; border-radius: 20px; border: 3px solid var(--gold); background: var(--paper); color: var(--ink); }
.sheet-in h2 { margin: 0 0 8px; font: 600 30px var(--display); color: #4A2A7A; }
#dlg-dishes .sheet-in { --cream: #1B1530; --muted: #6B5E7A; --line: rgba(27,21,48,.28); --chip-bg: rgba(27,21,48,.06); --row-bg: rgba(27,21,48,.06); --f-bg: #fff; --f-ink: #1B1530; --accent: #DDBB73; --ok: #1F7A4C; --bad: #B3261E; --p1: #DDBB73; --p2: #F2A43B; --p4: #FFF9EC; }

/* ---- scene 5 sits over the same courtyard, dimmed, so the words can be read ---- */
#s5::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(4,6,20,.55); pointer-events: none; }
#s5 .scroll { pointer-events: auto; }

/* ---- reduced motion: the phone's setting, "Reduce motion" in the menu, or "Perfectly still" from the host. Every scene shows finished; nothing loops. ---- */
html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; } }

/* ---- the accent a host can pick (from the palette only) ---- */
body[data-accent="saffron"] { --accent: #F2A43B; --glow: #FFD08A; } body[data-accent="rose"] { --accent: #DF4D91; --glow: #FFB3D6; } body[data-accent="turquoise"] { --accent: #22AFA6; --glow: #9BEAE4; }
@media (min-width: 760px) { #s5 .scroll { padding-left: 28px; padding-right: 28px; } }
@media (max-height: 520px) { .cap { top: 52px; } .cap h1, .cap h2 { font-size: clamp(1.2rem, 3vw, 1.8rem); } .cap p { display: none; } }