/* Deepotsav Diwali: a night sky, marigold torans, kandils, diyas the guest lights, fireworks and rangoli.
   All artwork is original SVG. Everything that moves animates transform and opacity only, so the shared
   link, the MP4 video and the PDF show the same motion (see public/css/storybook-invitation.css). */

/* ---------- Lettering ---------- */
@font-face { font-family: 'Yatra One'; src: url('../../fonts/storybook/YatraOne-Devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; font-display: swap; }
@font-face { font-family: 'Yatra One'; src: url('../../fonts/storybook/YatraOne-Latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }

body.dw[data-lang='en'] { --dw-script: 'Great Vibes', cursive; --dw-display: 'Playfair Display', Georgia, serif; --dw-text: 'Poppins', system-ui, sans-serif; }
body.dw:not([data-lang='en']) { --dw-script: 'Yatra One', 'Gotu', sans-serif; --dw-display: 'Yatra One', 'Gotu', sans-serif; --dw-text: 'Gotu', 'Noto Sans Devanagari', sans-serif; }

/* ---------- Colour themes (chosen in the editor) ---------- */
body.dw {
    --dw-top: #22030b; --dw-mid: #4d0a18; --dw-low: #7c1a1d; --dw-glow: rgba(255, 140, 40, .38);
    --dw-gold: #f5c76b; --dw-gold-deep: #d99a2b; --dw-cream: #fff1d6; --dw-ink: #4a0b14; --sb-accent: #d99a2b;
}
body.dw.theme-midnight { --dw-top: #03061a; --dw-mid: #0e1b4d; --dw-low: #2b2568; --dw-glow: rgba(255, 150, 60, .32); --dw-ink: #0e1b4d; }
body.dw.theme-peacock { --dw-top: #011a1c; --dw-mid: #05433f; --dw-low: #0c6157; --dw-glow: rgba(255, 170, 60, .3); --dw-ink: #05433f; }

html, body { touch-action: manipulation; }
body.dw {
    margin: 0; min-height: 100vh; display: flex; justify-content: center; overflow-x: hidden;
    background-color: var(--dw-top); color: var(--dw-cream); font-family: var(--dw-text); line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}
body.dw.doors-locked { overflow: hidden; height: 100vh; }
body.dw.doors-locked .app-wrapper { overflow: hidden; height: 100vh; }
.dw .app-wrapper { width: 100vw; max-width: 420px; position: relative; overflow-x: hidden; background-color: var(--dw-top); box-shadow: 0 0 40px rgba(0, 0, 0, .6); }

.dw .dw-scene, .dw #door-overlay {
    background-color: var(--dw-mid);
    background-image: radial-gradient(130% 55% at 50% 108%, var(--dw-glow), transparent 62%), linear-gradient(180deg, var(--dw-top) 0%, var(--dw-mid) 58%, var(--dw-low) 100%);
}
.dw .hero-section {
    min-height: 100vh; min-height: 100svh; position: relative; overflow: hidden; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 18px;
}
.dw .dw-content { position: relative; z-index: 4; width: 100%; max-width: 344px; display: flex; flex-direction: column; align-items: center; }

/* ---------- Sky: stars (no moon: Diwali falls on the new moon) ---------- */
.dw .dw-stars {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .75;
    background-image:
        radial-gradient(1.3px 1.3px at 22px 34px, #fff 60%, transparent 100%),
        radial-gradient(1px 1px at 128px 82px, rgba(255, 255, 255, .85) 60%, transparent 100%),
        radial-gradient(1.6px 1.6px at 206px 150px, #ffe9b8 60%, transparent 100%),
        radial-gradient(1px 1px at 72px 196px, rgba(255, 255, 255, .7) 60%, transparent 100%),
        radial-gradient(1.2px 1.2px at 240px 250px, #fff 60%, transparent 100%),
        radial-gradient(.9px .9px at 166px 18px, rgba(255, 255, 255, .8) 60%, transparent 100%);
    background-size: 270px 290px; background-repeat: repeat;
    -webkit-mask-image: linear-gradient(#000 0 45%, transparent 82%); mask-image: linear-gradient(#000 0 45%, transparent 82%);
}
.dw .dw-stars--twinkle { background-size: 310px 260px; background-position: 90px 50px; animation: dw-twinkle 3.4s ease-in-out infinite; }

/* ---------- Garlands and lanterns ---------- */
.dw .dw-toran-wrap { position: absolute; top: 0; left: 0; width: 100%; z-index: 5; pointer-events: none; }
.dw .dw-toran { display: block; width: 100%; height: auto; pointer-events: none; }
.dw #door-overlay > .dw-toran { position: absolute; top: 0; left: 0; z-index: 5; }
.dw .dw-kandil { position: absolute; top: 0; z-index: 4; width: 56px; pointer-events: none; }
.dw .dw-kandil img { width: 100%; display: block; }
.dw .dw-kandil--left { left: 14px; }
.dw .dw-kandil--right { right: 12px; width: 60px; }
.dw .dw-kandil--short { width: 50px; }
.dw .sb-sway { animation: dw-sway 5.5s ease-in-out infinite; transform-origin: 50% 0; }
.dw .dw-sway-late { animation-delay: -2.4s; animation-duration: 6.2s; }

.dw .dw-mandala { position: absolute; z-index: 1; width: 430px; max-width: none; left: 50%; top: 44%; translate: -50% -50%; opacity: .16; animation: dw-spin 90s linear infinite; pointer-events: none; }

/* ---------- Fireworks, embers and sky lanterns ---------- */
.dw .dw-fireworks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dw .dw-fw {
    position: absolute; left: var(--x); top: var(--y); width: calc(160px * var(--z, 1)); max-width: none; translate: -50% -50%;
    opacity: 0; animation: dw-burst 4.4s cubic-bezier(.12, .75, .3, 1) var(--d, 0s) infinite both;
}
.dw .dw-fw--once { animation: dw-burst-now 2.2s cubic-bezier(.12, .75, .3, 1) both; }
/* A rocket streaks up to each burst. */
.dw .dw-rocket {
    position: absolute; left: var(--x); top: var(--y); width: 3px; height: 54px; margin-left: -1.5px; border-radius: 3px; opacity: 0;
    background: linear-gradient(180deg, #fffbe6 0%, #ffd36b 22%, rgba(255, 150, 60, 0) 100%);
    animation: dw-rocket 4.4s cubic-bezier(.25, .6, .4, 1) var(--d, 0s) infinite both;
}
.dw .dw-embers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.dw .dw-ember {
    position: absolute; left: var(--x); bottom: -12px; width: 6px; height: 6px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, #fff6c4 0 30%, #ffb347 55%, rgba(255, 140, 40, 0) 72%);
    animation: dw-rise var(--s, 8s) linear var(--d, 0s) infinite both;
}
.dw .dw-sky-lanterns { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dw .dw-sky-lantern { position: absolute; left: var(--x); bottom: -100px; width: calc(48px * var(--z, 1)); opacity: 0; animation: dw-lantern 15s linear var(--d, 0s) infinite both; }

/* ---------- Diyas: one structure in three sizes (--w is the lamp width) ---------- */
.dw .dw-lamp, .dw .dw-diya, .dw .dw-mini-diya { position: relative; display: block; width: var(--w); height: calc(var(--w) * .9); flex: none; }
.dw .dw-lamp-diya, .dw .dw-diya-lamp, .dw .dw-mini-diya > img:last-child { position: absolute; left: 0; bottom: 0; width: 100%; max-width: none; z-index: 2; }
.dw .dw-lamp-fire, .dw .dw-diya-fire, .dw .dw-mini-fire {
    position: absolute; z-index: 3; left: calc(var(--w) * .4186); top: calc(var(--w) * .1144);
    width: calc(var(--w) * .19); height: calc(var(--w) * .342); transform-origin: 50% 100%;
}
.dw .dw-flicker { display: block; width: 100%; height: 100%; max-width: none; transform-origin: 50% 100%; animation: dw-flicker 1.7s ease-in-out infinite; }
.dw .dw-lamp-glow, .dw .dw-diya-glow, .dw .dw-mini-glow {
    position: absolute; z-index: 1; width: calc(var(--w) * 1.1); max-width: none; left: calc(var(--w) * -.0364); top: calc(var(--w) * -.265); pointer-events: none;
}
.dw .dw-mini-glow { animation: dw-glow-pulse 2.8s ease-in-out infinite; }

/* ---------- Opening: light the diya ---------- */
.dw #door-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; z-index: 9999; overflow: hidden; cursor: pointer; }
.dw #door-overlay:focus-visible { outline: 3px solid var(--dw-gold); outline-offset: -6px; }
.dw .dw-intro { position: absolute; z-index: 4; top: 16%; left: 0; right: 0; padding: 0 30px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.dw .dw-intro-host {
    margin: 18px 0 6px; font-family: var(--dw-script); font-size: 2.6rem; line-height: 1.15; color: var(--dw-gold);
    text-shadow: 0 2px 18px rgba(255, 170, 60, .45);
}
body.dw:not([data-lang='en']) .dw-intro-host { font-size: 2.1rem; line-height: 1.4; }
.dw .dw-intro-line { margin: 0; max-width: 300px; font-size: .95rem; line-height: 1.6; letter-spacing: .02em; color: var(--dw-cream); opacity: .9; }
.dw .dw-lamp { --w: 196px; position: absolute; z-index: 4; left: 50%; bottom: 17%; margin-left: -98px; }
.dw .dw-lamp-ring {
    position: absolute; z-index: 0; left: 50%; top: 62%; width: 128%; aspect-ratio: 1; margin-left: -64%; margin-top: -64%;
    border: 1.5px solid rgba(255, 211, 107, .55); border-radius: 50%; animation: dw-ring 2.4s ease-out infinite; pointer-events: none;
}
.dw .dw-lamp-fire { opacity: 0; transform: scale(.2); }
.dw .dw-lamp-glow { opacity: .28; transform: scale(.55); }
.dw .dw-tap {
    position: absolute; z-index: 4; left: 0; right: 0; bottom: 9%; margin: 0; padding: 0 24px; text-align: center;
    font-size: .78rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--dw-gold); animation: dw-breathe 2.4s ease-in-out infinite;
}
body.dw:not([data-lang='en']) .dw-tap { font-size: .95rem; letter-spacing: .04em; }
.dw .dw-bloom {
    position: absolute; z-index: 6; left: 50%; bottom: calc(17% + 72px); width: 90px; height: 90px; margin-left: -45px; border-radius: 50%;
    background: radial-gradient(circle, #fffbe8 0%, #ffe39a 32%, rgba(255, 196, 90, .75) 52%, rgba(255, 160, 60, 0) 70%);
    opacity: 0; transform: scale(0); pointer-events: none;
}
/* Shared link: tapping (or waiting) lights the flame, light fills the screen, the night opens. */
.dw #door-overlay.open { animation: dw-fade-out .9s ease 1.75s both; pointer-events: none; }
.dw #door-overlay.open .dw-lamp-fire { animation: dw-ignite .7s ease-out both; }
.dw #door-overlay.open .dw-lamp-glow { animation: dw-glow-in 1s ease-out .1s both; }
.dw #door-overlay.open .dw-bloom { animation: dw-bloom 1.5s cubic-bezier(.5, 0, .3, 1) .55s both; }
.dw #door-overlay.open .dw-tap, .dw #door-overlay.open .dw-lamp-ring { animation: dw-fade-out .3s ease both; }

/* ---------- Logo medallion (the host's logo, or the gold diya emblem) ---------- */
.dw .dw-logo-ring { position: relative; flex: none; border-radius: 50%; width: var(--size); height: var(--size); }
.dw .dw-logo-ring img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; border-radius: 50%; }
.dw .dw-logo-ring--intro { --size: 112px; }
.dw .dw-logo-ring--sm { --size: 66px; margin-bottom: 14px; }
.dw .dw-logo-ring--lg { --size: 118px; margin: 10px 0 6px; }
body.dw.dw-custom-logo .dw-logo-ring {
    padding: calc(var(--size) * .15); background: radial-gradient(circle, #fffdf6 0%, #fff4dc 70%, #f7e2b4 100%);
    box-shadow: 0 0 0 2px var(--dw-gold), 0 0 0 6px rgba(245, 199, 107, .22), 0 0 34px rgba(255, 190, 80, .45);
}
body.dw.dw-no-logo .dw-logo-ring { display: none !important; }

/* ---------- Text ---------- */
.dw .dw-gold {
    background: linear-gradient(180deg, #fff6d0 0%, #ffd77a 38%, #e3a43c 68%, #fff0b5 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.dw .dw-kicker { margin: 0 0 4px; font-size: .74rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #ffe2a6; }
body.dw:not([data-lang='en']) .dw-kicker { font-size: .95rem; letter-spacing: .02em; text-transform: none; }
.dw .dw-title { margin: 0; font-family: var(--dw-script); font-size: 4.1rem; font-weight: 400; line-height: 1.12; padding: 0 6px; filter: drop-shadow(0 3px 14px rgba(255, 166, 60, .5)); }
body.dw:not([data-lang='en']) .dw-title { font-size: 3rem; line-height: 1.35; }
.dw .dw-divider { width: 210px; height: auto; margin: 8px 0 12px; }
.dw .dw-message { margin: 0; max-width: 320px; font-size: .95rem; line-height: 1.75; color: var(--dw-cream); white-space: normal; }
body.dw:not([data-lang='en']) .dw-message { line-height: 1.85; }
.dw .dw-guest { margin: 0 0 6px; font-family: var(--dw-script); font-size: 1.9rem; line-height: 1.2; color: var(--dw-gold); }
body.dw:not([data-lang='en']) .dw-guest { font-size: 1.4rem; line-height: 1.5; }

/* ---------- 1. Greeting ---------- */
.dw .dw-greet { padding-top: 110px; padding-bottom: 150px; }
.dw .dw-diyas { display: flex; justify-content: center; gap: 4px; margin-top: 22px; }
.dw .dw-diya { --w: 64px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.dw .dw-diya:focus-visible { outline: 2px solid var(--dw-gold); outline-offset: 4px; }
.dw .dw-diya-fire, .dw .dw-diya-glow { opacity: 0; transform: scale(.3); transition: opacity .45s ease, transform .55s cubic-bezier(.2, 1.5, .4, 1); }
.dw .dw-diya.lit .dw-diya-fire { opacity: 1; transform: none; }
.dw .dw-diya.lit .dw-diya-glow { opacity: 1; transform: none; animation: dw-glow-pulse 2.6s ease-in-out .5s infinite; }
html:not(.sb-film) .dw .dw-diyas:not(.all-lit) .dw-diya:not(.lit) .dw-diya-lamp { animation: dw-nudge 2.6s ease-in-out calc(var(--n) * .16s) infinite; }
.dw .dw-diya-hint { margin: 10px 0 0; font-size: .8rem; letter-spacing: .06em; color: #ffe2a6; opacity: .85; }
.dw .dw-diya-done { display: none; margin: 10px 0 0; font-family: var(--dw-display); font-size: 1.05rem; color: var(--dw-gold); }
.dw .dw-diyas.all-lit ~ .dw-diya-hint { display: none; }
.dw .dw-diyas.all-lit ~ .dw-diya-done { display: block; animation: dw-pop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.dw .dw-rangoli-wrap { position: absolute; z-index: 2; left: 50%; bottom: -176px; width: 352px; margin-left: -176px; pointer-events: none; }
.dw .dw-rangoli-wrap--small { width: 270px; margin-left: -135px; bottom: -150px; }
.dw .dw-rangoli { display: block; width: 100%; max-width: none; animation: dw-spin 70s linear infinite; }

/* ---------- 2. Celebration ---------- */
.dw .dw-event { padding-top: 64px; padding-bottom: 96px; }
.dw .dw-lights { position: absolute; z-index: 3; top: 8px; left: 0; width: 100%; pointer-events: none; }
.dw .dw-lights img { display: block; width: 100%; }
.dw .dw-lights .dw-lights-glow { position: absolute; inset: 0; height: 100%; animation: dw-twinkle 2.2s ease-in-out infinite; }
.dw .dw-arch { position: relative; z-index: 4; width: 300px; min-height: 424px; display: flex; }
.dw .dw-arch-frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.dw .dw-arch-body { position: relative; width: 100%; padding: 118px 34px 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.dw .dw-event-title { margin: 6px 0 0; font-family: var(--dw-display); font-size: 1.85rem; font-weight: 700; line-height: 1.22; filter: drop-shadow(0 2px 10px rgba(255, 166, 60, .4)); }
body.dw:not([data-lang='en']) .dw-event-title { font-size: 1.75rem; font-weight: 400; line-height: 1.45; }
.dw .dw-date { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--dw-cream); }
.dw .dw-time { margin: 2px 0 0; font-size: .95rem; color: var(--dw-gold); }
.dw .dw-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(245, 199, 107, .35); font-size: .85rem; line-height: 1.7; color: #ffe8c2; width: 100%; }
.dw .dw-countdown { position: relative; z-index: 4; margin-top: 18px; display: flex; flex-direction: column; align-items: center; }
.dw .dw-countdown[hidden] { display: none !important; }
.dw .dw-countdown-label { margin: 0 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #ffe2a6; }
body.dw:not([data-lang='en']) .dw-countdown-label { font-size: .92rem; letter-spacing: .02em; text-transform: none; }
.dw .dw-count { display: flex; gap: 8px; }
.dw .dw-count span { width: 64px; padding: 8px 0 6px; border-radius: 12px; border: 1px solid rgba(245, 199, 107, .55); background: rgba(0, 0, 0, .22); display: flex; flex-direction: column; align-items: center; }
.dw .dw-count b { font-family: 'Playfair Display', Georgia, serif; font-size: 1.45rem; line-height: 1.1; color: var(--dw-gold); font-variant-numeric: tabular-nums; }
.dw .dw-count small { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #ffe8c2; opacity: .85; }
body.dw:not([data-lang='en']) .dw-count small { font-size: .72rem; letter-spacing: 0; }
.dw .dw-count-live { display: none; margin: 0; font-family: var(--dw-display); font-size: 1.1rem; color: var(--dw-gold); }
.dw .dw-countdown.is-live .dw-count, .dw .dw-countdown.is-live .dw-countdown-label { display: none; }
.dw .dw-countdown.is-live .dw-count-live { display: block; }
.dw .dw-calendar { margin-top: 14px; }
.dw .dw-diya-shelf { position: absolute; z-index: 3; left: 0; right: 0; bottom: 18px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 22px; pointer-events: none; }
.dw .dw-mini-diya { --w: 58px; }
.dw .dw-mini-diya:nth-child(2) { --w: 46px; margin-bottom: 6px; }

/* ---------- 3. Venue ---------- */
.dw .dw-venue { padding-bottom: 170px; }
.dw .dw-section-title { margin: 0; font-family: var(--dw-script); font-size: 3rem; font-weight: 400; line-height: 1.2; filter: drop-shadow(0 3px 12px rgba(255, 166, 60, .45)); }
body.dw:not([data-lang='en']) .dw-section-title { font-size: 2.2rem; line-height: 1.45; }
.dw .dw-venue-badge { position: relative; width: 84px; height: 84px; margin-bottom: 14px; }
.dw .dw-venue-glow { position: absolute; left: -38px; top: -38px; width: 160px; max-width: none; animation: dw-glow-pulse 3s ease-in-out infinite; }
.dw .dw-venue-pin {
    position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dw-ink);
    background: radial-gradient(circle at 50% 35%, #ffd77a, #d99a2b 60%, #9b5f12); box-shadow: 0 0 0 4px rgba(245, 199, 107, .25), 0 10px 30px rgba(0, 0, 0, .35);
}
.dw .dw-venue-pin svg { width: 38px; height: 38px; }
.dw .dw-address { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--dw-cream); }
.dw .dw-pin { display: inline-block; width: .9em; height: 1.1em; margin-right: 6px; color: var(--dw-gold); vertical-align: -.15em; }
.dw .dw-pin svg { display: block; width: 100%; height: 100%; }
.dw .map-container { width: 100%; margin-top: 18px; display: flex; flex-direction: column; align-items: center; }
.dw .map-container iframe { display: block; width: 100%; height: 160px; border: 0; border-radius: 16px; box-shadow: 0 0 0 1.5px rgba(245, 199, 107, .7), 0 10px 30px rgba(0, 0, 0, .35); }
.dw .btn-directions { margin-top: 16px; }
.dw .dw-town { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; pointer-events: none; }
.dw .dw-town img { display: block; width: 100%; }
.dw .dw-town .dw-town-glow { position: absolute; inset: 0; height: 100%; animation: dw-twinkle 2.8s ease-in-out infinite; }

/* ---------- 4. Wishes ---------- */
.dw .dw-wishes { padding-bottom: 150px; }
.dw .dw-host { margin: 4px 0 0; font-family: var(--dw-script); font-size: 2.55rem; font-weight: 400; line-height: 1.2; filter: drop-shadow(0 3px 12px rgba(255, 166, 60, .45)); }
body.dw:not([data-lang='en']) .dw-host { font-size: 2.1rem; line-height: 1.45; }
.dw .dw-contact { margin: 16px 0 0; font-size: 1rem; font-weight: 600; letter-spacing: .04em; color: var(--dw-gold); }
.dw .dw-contact-link { color: inherit; text-decoration: none; }
.dw .dw-contact-link[href] { border-bottom: 1px dashed rgba(245, 199, 107, .6); }
.dw .dw-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }

/* ---------- Buttons ---------- */
.dw .dw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 11px 24px; border-radius: 999px;
    border: 0; background: linear-gradient(180deg, #ffe39a, #e8a83a); color: var(--dw-ink) !important; text-decoration: none; cursor: pointer;
    font-family: var(--dw-text); font-size: .88rem; font-weight: 600; letter-spacing: .02em;
    box-shadow: 0 6px 22px rgba(255, 170, 60, .35), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .2s ease, box-shadow .2s ease;
}
.dw .dw-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255, 170, 60, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.dw .dw-btn:active { transform: scale(.97); }
.dw .dw-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.dw .dw-btn--ghost { background: rgba(0, 0, 0, .18); color: var(--dw-cream) !important; box-shadow: inset 0 0 0 1.5px rgba(245, 199, 107, .75); }
.dw .dw-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--dw-gold), 0 8px 24px rgba(0, 0, 0, .25); }
.dw .dw-cta[hidden] { display: none; }

/* ---------- 4. Surprise gift ---------- */
.dw .dw-gift { padding-top: 96px; padding-bottom: 60px; }
.dw .dw-gift .dw-section-title { font-size: 2.7rem; }
body.dw:not([data-lang='en']) .dw-gift .dw-section-title { font-size: 2rem; }
.dw .dw-gift-hint { margin: 8px 0 0; display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; letter-spacing: .04em; color: #ffe2a6; }
body.dw:not([data-lang='en']) .dw-gift-hint { font-size: .92rem; letter-spacing: 0; }
.dw .dw-taps { display: inline-flex; gap: 4px; }
.dw .dw-taps i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--dw-gold); transition: background .2s ease, transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.dw .dw-taps i.on { background: var(--dw-gold); transform: scale(1.25); }
.dw .dw-gift.opened .dw-gift-hint { opacity: 0 !important; transition: opacity .3s ease; }
/* Until it opens, bobbing question marks hold the card's place. */
.dw .dw-gift-slot { position: relative; width: 100%; max-width: 300px; min-height: 120px; margin: 16px 0 4px; display: flex; align-items: flex-end; }
.dw .dw-gift-tease { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; pointer-events: none; transition: opacity .3s ease, transform .4s ease; }
.dw .dw-gift-tease span { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--dw-gold); text-shadow: 0 0 18px rgba(255, 190, 80, .55); animation: dw-bob 2.4s ease-in-out infinite; }
.dw .dw-gift-tease span:nth-child(2) { font-size: 3.4rem; animation-delay: -.8s; }
.dw .dw-gift-tease span:nth-child(3) { animation-delay: -1.6s; }
.dw .dw-gift.opened .dw-gift-tease { opacity: 0; transform: scale(.6); }
.dw .dw-gift-card {
    position: relative; z-index: 3; width: 100%; margin: 0; padding: 18px 20px; border-radius: 18px;
    background: linear-gradient(180deg, #fffaf0, #fff0d2); color: #5a1420;
    box-shadow: 0 0 0 2px var(--dw-gold), 0 16px 40px rgba(0, 0, 0, .35), 0 0 46px rgba(255, 200, 90, .35);
    opacity: 0; transform: translateY(150px) scale(.3); transition: opacity .45s ease .35s, transform .9s cubic-bezier(.2, 1.35, .4, 1) .3s;
}
.dw .dw-gift.opened .dw-gift-card { opacity: 1; transform: none; }
.dw .dw-gift-message { margin: 0; font-family: var(--dw-display); font-size: 1.12rem; line-height: 1.5; }
body.dw:not([data-lang='en']) .dw-gift-message { font-family: var(--dw-text); font-size: 1rem; line-height: 1.7; }
.dw .dw-coupon { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.dw .dw-coupon[hidden] { display: none; }
.dw .dw-coupon-code { padding: 7px 14px; border: 2px dashed #d99a2b; border-radius: 10px; background: #fff; color: #7a1020; font: 700 1.05rem/1.2 'Poppins', sans-serif; letter-spacing: .14em; }
.dw .dw-copy { border: 0; border-radius: 999px; padding: 9px 15px; background: #7a1020; color: #fff; font: 600 .78rem/1 var(--dw-text); cursor: pointer; }
.dw .dw-copy:focus-visible { outline: 2px solid var(--dw-gold); outline-offset: 2px; }
.dw .dw-gift-stage { position: relative; z-index: 2; width: 220px; height: 236px; margin-top: 4px; }
.dw .dw-gift-glow { position: absolute; left: -70px; top: -40px; width: 360px; max-width: none; opacity: 0; transform: scale(.4); transition: opacity .6s ease, transform .8s ease; pointer-events: none; }
.dw .dw-gift.opened .dw-gift-glow { opacity: 1; transform: none; }
.dw .dw-gift-confetti { position: absolute; left: -40px; top: -70px; width: 300px; max-width: none; opacity: 0; pointer-events: none; }
.dw .dw-gift.opened .dw-gift-confetti { animation: dw-confetti 1.8s cubic-bezier(.15, .8, .3, 1) both; }
.dw .dw-gift-box { position: absolute; left: 10px; bottom: 0; width: 200px; height: 230px; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 100%; border-radius: 16px; }
.dw .dw-gift-box:focus-visible { outline: 2px solid var(--dw-gold); outline-offset: 6px; }
.dw .dw-gift-body { position: absolute; left: 0; bottom: 0; width: 200px; max-width: none; }
.dw .dw-gift-lid { position: absolute; left: -10px; top: 16px; width: 220px; max-width: none; transform-origin: 30% 80%; }
html:not(.sb-film) .dw .dw-gift:not(.opened) .dw-gift-box { animation: dw-invite 3.2s ease-in-out 1s infinite; }
html:not(.sb-film) .dw .dw-gift-box.dw-shake { animation: dw-wiggle .45s ease-in-out !important; }
.dw .dw-gift.opened .dw-gift-lid { animation: dw-lid-pop 1.1s cubic-bezier(.2, .7, .3, 1) forwards; }
.dw .dw-gift.opened .dw-gift-box { cursor: default; }

/* ---------- Things to play with on the link ---------- */
html:not(.sb-film) .dw .dw-kandil, html:not(.sb-film) .dw .dw-rangoli-wrap { pointer-events: auto; cursor: pointer; }
.dw .dw-kandil img.dw-swing { animation: dw-swing 1.9s cubic-bezier(.3, .7, .4, 1) both; }
.dw .dw-rangoli-spin { display: block; }
.dw .dw-rangoli-spin.dw-whirl { animation: dw-whirl 1.4s cubic-bezier(.15, .75, .25, 1); }
.dw .dw-gold { display: inline-block; }
html:not(.sb-film) .dw .dw-gold { cursor: pointer; }
.dw .dw-gold.dw-jelly { animation: dw-jelly .8s ease both; }
.dw .dw-diyas.all-lit .dw-diya { animation: dw-dance .65s ease-in-out calc(.4s + var(--n) * .09s) 3 both; }
body.dw .dw-toast {
    position: fixed; z-index: 9996; left: 50%; bottom: 94px; max-width: min(340px, calc(100vw - 32px)); padding: 10px 18px; border-radius: 999px;
    background: rgba(20, 6, 10, .84); color: #fff1d6; font: 600 .84rem/1.45 var(--dw-text); text-align: center; pointer-events: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(245, 199, 107, .5);
    opacity: 0; transform: translate(-50%, 18px); transition: opacity .35s ease, transform .4s cubic-bezier(.2, 1.4, .4, 1);
}
body.dw .dw-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Fireworks, sparkler and confetti canvas (shared link only) ---------- */
.dw-sparkles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9995; pointer-events: none; }

/* ---------- Music button: pause (while the song plays) and play ---------- */
.dw #audio-controls {
    width: 52px; height: 52px; bottom: 22px; overflow: visible; color: #3a1606;
    background: radial-gradient(circle at 34% 28%, #fff6cf, #f6c453 42%, #c8801f 100%);
    border: 2px solid rgba(255, 238, 190, .9);
    box-shadow: 0 0 0 4px rgba(255, 196, 90, .16), 0 10px 26px rgba(255, 130, 20, .45), inset 0 -3px 6px rgba(120, 50, 0, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.dw #audio-controls:active { transform: scale(.92); }
.dw #audio-controls svg { width: 20px; height: 20px; position: relative; z-index: 1; }
/* Sound rings while the song plays */
.dw #audio-controls::before, .dw #audio-controls::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255, 205, 110, .7);
    animation: dw-music-ring 2.4s ease-out infinite; pointer-events: none;
}
.dw #audio-controls::after { animation-delay: 1.2s; }
.dw #audio-controls.is-muted::before, .dw #audio-controls.is-muted::after { animation: none; opacity: 0; }
@keyframes dw-music-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.75); opacity: 0; } }
.dw .dw-music-tip {
    position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(8px, -50%); white-space: nowrap; pointer-events: none;
    padding: 8px 14px; border-radius: 999px; background: rgba(28, 6, 26, .88); color: #ffe7a8; border: 1px solid rgba(255, 210, 120, .45);
    font: 600 12.5px/1.2 'Poppins', system-ui, sans-serif; letter-spacing: .01em; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    opacity: 0; transition: opacity .35s ease, transform .35s ease;
}
.dw #audio-controls.tip .dw-music-tip { opacity: 1; transform: translate(0, -50%); }
.dw .dw-music-tip [data-l] { white-space: nowrap; }
.dw .dw-music-tip-off, .dw #audio-controls.is-muted .dw-music-tip-on { display: none; }
.dw #audio-controls.is-muted .dw-music-tip-off { display: inline; }
@media (prefers-reduced-motion: reduce) { .dw #audio-controls::before, .dw #audio-controls::after { animation: none; opacity: 0; } }


/* =====================================================================================================
   Premium style (new invitations; older ones stay Classic). Premium lettering (all under the SIL Open
   Font License, served from this site), gold-foil titles and gold frames; the match lights the diya;
   the welcome envelope opens on the invitation card; a page for the family.
   ===================================================================================================== */
@font-face { font-family: 'Cinzel Decorative'; src: url('../../fonts/storybook/CinzelDecorative-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cinzel Decorative'; src: url('../../fonts/storybook/CinzelDecorative-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../../fonts/storybook/CormorantGaramond-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../../fonts/storybook/CormorantGaramond-SemiBold.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../../fonts/storybook/CormorantGaramond-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Rozha One'; src: url('../../fonts/storybook/RozhaOne-Devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; font-display: swap; }
@font-face { font-family: 'Rozha One'; src: url('../../fonts/storybook/RozhaOne-Latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; font-display: swap; }
@font-face { font-family: 'Tiro Devanagari Hindi'; src: url('../../fonts/storybook/TiroDevanagariHindi-Devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; font-display: swap; }
@font-face { font-family: 'Tiro Devanagari Hindi'; src: url('../../fonts/storybook/TiroDevanagariHindi-Latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; font-display: swap; }
@font-face { font-family: 'Tiro Devanagari Marathi'; src: url('../../fonts/storybook/TiroDevanagariMarathi-Devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; font-display: swap; }
@font-face { font-family: 'Tiro Devanagari Marathi'; src: url('../../fonts/storybook/TiroDevanagariMarathi-Latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; font-display: swap; }
@font-face { font-family: 'Amita'; src: url('../../fonts/storybook/Amita-Bold-Devanagari.woff2') format('woff2'); font-weight: 400 700; font-display: swap;
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: 'Amita'; src: url('../../fonts/storybook/Amita-Bold-Latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }

/* English: Great Vibes for names and greetings, Cinzel Decorative for headings, Cormorant Garamond for text.
   Hindi and Marathi: Amita for names and greetings, Rozha One for headings, Tiro Devanagari for text. */
body.dw.dw-premium[data-lang='en'] { --dw-script: 'Great Vibes', cursive; --dw-display: 'Cinzel Decorative', 'Playfair Display', Georgia, serif; --dw-text: 'Cormorant Garamond', Georgia, serif; }
body.dw.dw-premium[data-lang='hi'] { --dw-script: 'Amita', 'Rozha One', serif; --dw-display: 'Rozha One', 'Yatra One', serif; --dw-text: 'Tiro Devanagari Hindi', 'Gotu', serif; }
body.dw.dw-premium[data-lang='mr'] { --dw-script: 'Amita', 'Rozha One', serif; --dw-display: 'Rozha One', 'Yatra One', serif; --dw-text: 'Tiro Devanagari Marathi', 'Gotu', serif; }
/* Cormorant is a delicate face: a little larger and heavier for reading on a phone. */
body.dw.dw-premium[data-lang='en'] { font-weight: 500; }
body.dw.dw-premium[data-lang='en'] .dw-message, body.dw.dw-premium[data-lang='en'] .dw-address { font-size: 1.12rem; line-height: 1.6; }
body.dw.dw-premium[data-lang='en'] .dw-intro-line, body.dw.dw-premium[data-lang='en'] .dw-note, body.dw.dw-premium[data-lang='en'] .dw-diya-hint { font-size: 1.02rem; }
body.dw.dw-premium[data-lang='en'] .dw-date { font-size: 1.2rem; }
body.dw.dw-premium[data-lang='en'] .dw-time, body.dw.dw-premium[data-lang='en'] .dw-contact { font-size: 1.08rem; }
body.dw.dw-premium[data-lang='en'] .dw-kicker, body.dw.dw-premium[data-lang='en'] .dw-countdown-label { font-family: 'Cinzel Decorative', serif; font-weight: 700; font-size: .7rem; letter-spacing: .2em; }
body.dw.dw-premium[data-lang='en'] .dw-btn, body.dw.dw-premium[data-lang='en'] .dw-toast { font-size: 1rem; font-weight: 600; }
body.dw.dw-premium .dw-count b { font-family: var(--dw-display); }
body.dw.dw-premium:not([data-lang='en']) .dw-message { font-size: 1.02rem; line-height: 1.9; }
body.dw.dw-premium .dw-greet .dw-guest { display: none !important; } /* greeted on the welcome page */

/* Gold foil: a slow shine travels across the gold lettering. */
body.dw-premium .dw-gold {
    background: linear-gradient(100deg, #fff4c8 0%, #ffd77a 20%, #d8962f 38%, #fff7d6 50%, #e3a43c 62%, #ffd77a 80%, #fff0b5 100%);
    background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    animation: dw-foil 7s ease-in-out infinite;
}
@keyframes dw-foil { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* A double gold frame with corner beads on every page. */
body.dw-premium .dw-scene::before, body.dw-premium #door-overlay::before {
    content: ''; position: absolute; inset: 10px; z-index: 6; pointer-events: none; border-radius: 24px;
    border: 1px solid rgba(245, 199, 107, .42); box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(245, 199, 107, .16);
}
body.dw-premium .dw-scene::after, body.dw-premium #door-overlay::after {
    content: ''; position: absolute; inset: 4px; z-index: 6; pointer-events: none;
    background:
        radial-gradient(circle at 14px 14px, var(--dw-gold) 0 2.6px, transparent 3.2px),
        radial-gradient(circle at calc(100% - 14px) 14px, var(--dw-gold) 0 2.6px, transparent 3.2px),
        radial-gradient(circle at 14px calc(100% - 14px), var(--dw-gold) 0 2.6px, transparent 3.2px),
        radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--dw-gold) 0 2.6px, transparent 3.2px);
}

/* ---------- Premium opening: strike the match, light the diya ---------- */
body.dw-premium #door-overlay .dw-intro, body.dw-premium #door-overlay .dw-tap { display: none; }
body:not(.dw-premium) .dw-matchbox, body:not(.dw-premium) .dw-match-hint, body:not(.dw-premium) .dw-for-you-wrap { display: none; }
.dw .dw-for-you-wrap { position: absolute; z-index: 4; top: 19%; left: 0; right: 0; padding: 0 30px; text-align: center; }
.dw .dw-for-you { margin: 0; font-family: var(--dw-script); font-size: 2.5rem; line-height: 1.22; color: var(--dw-gold); text-shadow: 0 2px 18px rgba(255, 170, 60, .45); }
body.dw:not([data-lang='en']) .dw-for-you { font-size: 2rem; line-height: 1.5; }
.dw .dw-guest--opening { margin-bottom: 8px; }
.dw .dw-matchbox { position: absolute; z-index: 5; width: 96px; height: 60px; left: min(calc(50% + 70px), calc(100% - 106px)); bottom: calc(17% - 34px); touch-action: none; cursor: grab; }
.dw .dw-matchbox-box { display: block; width: 96px; height: 60px; max-width: none; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
/* The swipe belongs to the box: its pictures never start the browser's own drag (or a phone's image menu). */
.dw .dw-matchbox { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dw .dw-matchbox img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
/* The head sits at (9px, 7px) of the stick; --to-x/--to-y carry it from the striker to the wick
   (measured on the link; these values are the video's 390 px screen). */
.dw .dw-match { position: absolute; z-index: 2; left: 6px; top: -9px; width: 80px; height: 14px; transform-origin: 9px 7px; --to-x: -110px; --to-y: -64px; }
.dw .dw-match-stick { display: block; width: 80px; height: 14px; max-width: none; }
.dw .dw-match-flame { position: absolute; left: 1px; top: -23px; width: 16px; height: 28px; opacity: 0; transform-origin: 50% 100%; }
.dw .dw-match-flame img { width: 100%; height: 100%; max-width: none; display: block; }
.dw .dw-match-hint {
    position: absolute; z-index: 4; left: 0; right: 0; bottom: 5.5%; margin: 0; padding: 0 26px; text-align: center;
    font-size: .95rem; font-weight: 600; letter-spacing: .05em; color: var(--dw-gold); animation: dw-breathe 2.4s ease-in-out infinite;
}
body.dw-premium[data-lang='en'] .dw-match-hint { font-size: 1.08rem; }
html:not(.sb-film) body.dw-premium #door-overlay:not(.striking) .dw-match { animation: dw-match-tease 2.8s ease-in-out 1.4s infinite; }
body.dw-premium #door-overlay.striking .dw-match { animation: dw-match-strike 1.75s cubic-bezier(.45, .05, .3, 1) both; }
body.dw-premium #door-overlay.striking .dw-match-flame { animation: dw-match-flame 1.75s linear both; }
body.dw-premium #door-overlay.striking .dw-match-hint, body.dw-premium #door-overlay.striking .dw-for-you-wrap,
body.dw-premium #door-overlay.striking .dw-lamp-ring { animation: dw-fade-out .45s ease both; }
body.dw-premium #door-overlay.lit .dw-lamp-fire { animation: dw-ignite .7s ease-out both; }
body.dw-premium #door-overlay.lit .dw-lamp-glow { animation: dw-glow-in 1s ease-out .1s both; }
/* Then the light fills the screen and the night opens on the welcome. */
body.dw-premium #door-overlay.open { animation: dw-fade-out .8s ease 1.1s both; }
body.dw-premium #door-overlay.open .dw-lamp-fire, body.dw-premium #door-overlay.open .dw-lamp-glow { animation: none; opacity: 1; transform: none; }
body.dw-premium #door-overlay.open .dw-bloom { animation: dw-bloom 1.3s cubic-bezier(.5, 0, .3, 1) .05s both; }
body.dw-premium #door-overlay.open .dw-matchbox { animation: dw-fade-out .4s ease both; }

/* ---------- Premium 1: welcome and the envelope ---------- */
.dw .dw-welcome { padding-top: 92px; padding-bottom: 70px; }
.dw .dw-welcome .dw-content { max-width: 330px; }
.dw .dw-welcome-title { margin: 0; font-family: var(--dw-script); font-size: 4.4rem; font-weight: 400; line-height: 1.1; filter: drop-shadow(0 3px 14px rgba(255, 166, 60, .5)); }
body.dw:not([data-lang='en']) .dw-welcome-title { font-size: 3.6rem; line-height: 1.3; }
.dw .dw-welcome .dw-divider { margin: 2px 0 4px; }
/* The envelope: champagne pearl paper. Its inside and liner (the theme's colour with gold motifs), the card
   inside, the pocket (side flaps, the bottom flap folded over them), the top flap (outside and liner, turning
   in 3D) and a red wax seal pressed with a diya. Opening (link; the video plays the same): the seal cracks in
   two and falls, the flap swings up, the card slides out as the envelope sinks, then the card comes forward
   and the envelope falls away. Sizes: envelope 300 × 210, card 264 × 288 (70% inside the envelope). */
.dw .dw-env-stage { position: relative; width: 300px; height: 350px; max-width: 100%; margin: 0 auto; }
.dw .dw-env-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.dw .dw-env-shadow { position: absolute; left: 50%; top: 270px; width: 290px; height: 34px; margin-left: -145px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.dw .dw-envelope { position: absolute; left: 50%; top: 70px; width: 300px; height: 210px; margin-left: -150px; perspective: 1100px; cursor: pointer; }
html:not(.sb-film) .dw .dw-welcome:not(.opened) .dw-envelope { animation: dw-env-float 4.6s ease-in-out infinite; }
html:not(.sb-film) .dw .dw-welcome:not(.opened) .dw-env-shadow { animation: dw-env-shadow 4.6s ease-in-out infinite; }
.dw .dw-env-back, .dw .dw-env-pocket, .dw .dw-env-flap-wrap { position: absolute; left: 0; top: 0; width: 100%; display: block; overflow: visible; }
.dw .dw-env-back { z-index: 0; height: 100%; border-radius: 7px; box-shadow: 0 22px 40px rgba(0, 0, 0, .42), 0 4px 10px rgba(0, 0, 0, .25); }
.dw .dw-env-pocket { z-index: 3; height: 100%; pointer-events: none; }
/* The flap's wrap moves with the envelope (and fades); the flap inside only turns. A fade on the turning element
   itself would flatten it, and the flap would show its outside again instead of the liner once open. */
.dw .dw-env-flap-wrap { z-index: 4; height: 71.43%; perspective: 1100px; perspective-origin: 50% 70%; pointer-events: none; }
.dw .dw-env-flap { position: absolute; inset: 0; display: block; transform-origin: 50% 0; transform-style: preserve-3d; }
.dw .dw-env-flap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dw .dw-env-flap .dw-flap-in { transform: rotateY(180deg); } /* the same shape, facing the other way */
/* The card: thick ivory stock, a gold foil double frame and filigree corners. */
.dw .dw-env-card {
    position: absolute; z-index: 2; left: 18px; bottom: 5px; width: 264px; height: 288px; padding: 26px 20px 22px; border-radius: 5px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #5a1420;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .15 0 0 0 -1.2 .66'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(130% 80% at 50% 0%, #fffef9 0%, #fff8e8 55%, #f6e7c4 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px rgba(190, 140, 50, .55), 0 2px 3px rgba(0, 0, 0, .18), 0 16px 34px rgba(0, 0, 0, .38);
    transform-origin: 50% 100%; transform: translateY(0) rotateX(0) scale(.7);
}
.dw .dw-env-card::before { content: ''; position: absolute; inset: 9px; border: 1.5px solid #d4a24a; border-radius: 3px; box-shadow: inset 0 0 0 3px #fffaf0, inset 0 0 0 4px rgba(212, 162, 74, .75); pointer-events: none; }
/* A sheen of light across the gold once the card is out. */
.dw .dw-env-card::after { content: ''; position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 42%, rgba(255, 246, 214, .75) 50%, transparent 58%); transform: translateX(-70%); pointer-events: none; opacity: 0; }
.dw .dw-card-corner { position: absolute; width: 46px; height: 46px; max-width: none; pointer-events: none; }
.dw .dw-card-corner--tl { left: 6px; top: 6px; }
.dw .dw-card-corner--tr { right: 6px; top: 6px; transform: scaleX(-1); }
.dw .dw-card-corner--bl { left: 6px; bottom: 6px; transform: scaleY(-1); }
.dw .dw-card-corner--br { right: 6px; bottom: 6px; transform: scale(-1); }
.dw .dw-env-card > :not(.dw-card-corner) { position: relative; }
.dw .dw-logo-ring--xs { --size: 48px; margin-bottom: 8px; }
.dw .dw-env-kicker { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #9b5f12; }
body.dw-premium[data-lang='en'] .dw-env-kicker { font-family: 'Cinzel Decorative', serif; font-size: .66rem; }
body.dw:not([data-lang='en']) .dw-env-kicker { font-size: 1rem; letter-spacing: .02em; text-transform: none; }
.dw .dw-env-host { margin: 4px 0 0; font-family: var(--dw-script); font-size: 2.5rem; font-weight: 400; line-height: 1.15; color: #7a1020; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
body.dw:not([data-lang='en']) .dw-env-host { font-size: 2rem; line-height: 1.45; }
.dw .dw-env-divider { width: 150px; height: auto; margin: 6px 0 8px; }
.dw .dw-env-line { margin: 0; max-width: 220px; font-size: 1.02rem; line-height: 1.5; color: #5a1420; }
body.dw-premium[data-lang='en'] .dw-env-line { font-style: italic; font-size: 1.12rem; }
/* The wax seal sits on the flap's point; it cracks in two when the guest taps. */
.dw .dw-env-seal { position: absolute; z-index: 6; left: 50%; top: 63.5%; width: 68px; height: 68px; margin: -34px 0 0 -34px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.dw .dw-env-seal::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 200, 110, .55), transparent); opacity: 0; pointer-events: none; }
html:not(.sb-film) .dw .dw-welcome:not(.opened) .dw-env-seal::before { animation: dw-seal-glow 2.2s ease-in-out 1s infinite; }
.dw .dw-seal-half { position: absolute; inset: 0; display: block; }
.dw .dw-seal-half img { display: block; width: 100%; height: 100%; max-width: none; }
.dw .dw-seal-half--l { clip-path: polygon(0 0, 54% 0, 47% 20%, 56% 39%, 45% 57%, 54% 77%, 48% 100%, 0 100%); }
.dw .dw-seal-half--r { clip-path: polygon(54% 0, 100% 0, 100% 100%, 48% 100%, 54% 77%, 45% 57%, 56% 39%, 47% 20%); }
.dw .dw-wax-bit { position: absolute; left: 50%; top: 52%; width: 5px; height: 4px; border-radius: 40% 60% 50% 45%; background: #9e1320; opacity: 0; }
.dw .dw-env-seal:focus-visible { outline: 2px solid var(--dw-gold); outline-offset: 4px; }
.dw .dw-env-hint { margin: 6px 0 0; font-size: .92rem; letter-spacing: .04em; color: #ffe2a6; }
body.dw-premium[data-lang='en'] .dw-env-hint { font-size: 1.05rem; }
.dw .dw-welcome.opened .dw-env-hint { opacity: 0 !important; transition: opacity .3s ease; }
/* Opening, on the link. */
.dw .dw-welcome.opened .dw-envelope { cursor: default; }
.dw .dw-welcome.opened .dw-env-seal { pointer-events: none; animation: dw-seal-press .24s ease-out both; }
.dw .dw-welcome.opened .dw-seal-half--l { animation: dw-seal-fall-l .95s cubic-bezier(.45, 0, .8, .45) .2s both; }
.dw .dw-welcome.opened .dw-seal-half--r { animation: dw-seal-fall-r .95s cubic-bezier(.45, 0, .8, .45) .24s both; }
.dw .dw-welcome.opened .dw-wax-bit { animation: dw-wax-bit .8s cubic-bezier(.45, 0, .8, .45) .22s both; }
.dw .dw-welcome.opened .dw-env-flap { animation: dw-flap-turn .96s cubic-bezier(.5, .05, .3, 1) .3s both; }
.dw .dw-welcome.opened .dw-env-flap-wrap { animation: dw-flap-follow 3.2s linear .3s both; }
.dw .dw-welcome.opened .dw-env-back, .dw .dw-welcome.opened .dw-env-pocket { animation: dw-env-sink 2.2s linear 1.3s both; }
.dw .dw-welcome.opened .dw-env-shadow { animation: dw-env-shadow-out 1s ease 1.3s both; }
.dw .dw-welcome.opened .dw-env-card { animation: dw-env-card-out 2.3s linear 1.25s both; }
.dw .dw-welcome.opened .dw-env-card::after { animation: dw-card-sheen 1.4s ease-in-out 3.6s both; }
.dw .dw-petals { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.dw .dw-petal { position: absolute; top: -24px; left: var(--x); width: 12px; height: 17px; border-radius: 60% 60% 55% 55% / 85% 85% 30% 30%; opacity: 0; }
.dw .dw-petal--m { background: radial-gradient(circle at 50% 30%, #ffd36b, #ff9f1c 70%); }
.dw .dw-petal--y { background: radial-gradient(circle at 50% 30%, #fff3a8, #ffcc33 70%); }
.dw .dw-petal--r { background: radial-gradient(circle at 50% 30%, #ff9fb0, #d81b60 75%); }
.dw .dw-welcome.opened .dw-petal { animation: dw-petal-fall 4.2s ease-in calc(2.3s + var(--d)) 2 both; }
/* After the card settles, a little arrow says there is more below. */
.dw .dw-scroll-cue { position: absolute; z-index: 5; left: 50%; bottom: 22px; width: 28px; height: 28px; margin-left: -14px; color: var(--dw-gold); opacity: 0; pointer-events: none; }
.dw .dw-scroll-cue svg { width: 100%; height: 100%; display: block; }
.dw .dw-welcome.opened .dw-scroll-cue { animation: dw-pop .5s ease 2.6s both, dw-cue 1.6s ease-in-out 3.1s infinite; }

/* ---------- Premium 2: who invites you ---------- */
.dw .dw-family { padding-top: 92px; padding-bottom: 128px; }
.dw .dw-family-frame { position: relative; margin: 14px 0 10px; display: flex; justify-content: center; }
.dw .dw-family-photo { display: none; width: 208px; height: 248px; max-width: none; object-fit: cover; border-radius: 104px 104px 18px 18px;
    box-shadow: 0 0 0 3px var(--dw-gold), 0 0 0 9px rgba(245, 199, 107, .2), 0 18px 44px rgba(0, 0, 0, .45); }
body.dw.dw-has-family-photo .dw-family-photo { display: block; }
body.dw.dw-has-family-photo .dw-family-frame .dw-logo-ring { display: none !important; }
.dw .dw-family-frame .dw-logo-ring--lg { margin: 4px 0; }
.dw .dw-family-members { margin: 6px 0 0; white-space: pre-line; font-size: 1.06rem; line-height: 1.85; color: var(--dw-cream); }
body.dw-premium[data-lang='en'] .dw-family-members { font-size: 1.24rem; line-height: 1.6; font-weight: 600; }
.dw .dw-family-note { margin: 12px 0 0; font-size: .98rem; color: #ffe2a6; }
body.dw-premium[data-lang='en'] .dw-family-note { font-style: italic; font-size: 1.14rem; }


/* ---------- Premium 3: the Diwali Mela (games in tabs) ---------- */
.dw .dw-mela { padding-top: 64px; padding-bottom: 54px; }
.dw .dw-mela-content { max-width: 362px; }
.dw .dw-mela .dw-section-title { font-size: 3rem; }
body.dw:not([data-lang='en']) .dw-mela .dw-section-title { font-size: 2.3rem; }
.dw .dw-mela-intro { margin: 2px 0 0; font-size: .98rem; color: #ffe2a6; }
body.dw-premium[data-lang='en'] .dw-mela-intro { font-size: 1.12rem; }
.dw .dw-off { display: none !important; }
/* The row of diyas: one per game, lit when it is won. */
.dw .dw-mela-lamps { display: flex; justify-content: center; gap: 4px; margin: 10px 0 2px; }
.dw .dw-mela-lamp, .dw .dw-gust-diya { position: relative; display: block; flex: none; width: var(--w); height: calc(var(--w) * .9); }
.dw .dw-mela-lamp { --w: 44px; }
.dw .dw-mela-lamp > img:not(.dw-mini-glow), .dw .dw-gust-diya > img:not(.dw-mini-glow) { position: absolute; left: 0; bottom: 0; width: 100%; max-width: none; z-index: 2; }
.dw .dw-mela-lamp .dw-mini-fire, .dw .dw-gust-diya .dw-mini-fire { opacity: 0; transform: scale(.3); transition: opacity .4s ease, transform .5s cubic-bezier(.2, 1.5, .4, 1); }
.dw .dw-mela-lamp:not(.lit) .dw-mini-glow, .dw .dw-gust-diya:not(.lit) .dw-mini-glow { animation: none; opacity: 0; }
.dw .dw-mela-lamp.lit .dw-mini-fire, .dw .dw-gust-diya.lit .dw-mini-fire { opacity: 1; transform: none; }
.dw .dw-mela-lamp:not(.lit) > img:not(.dw-mini-glow) { filter: saturate(.55) brightness(.75); }
/* Tabs: two rows of three. */
.dw .dw-mela-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.dw .dw-mela-tab {
    position: relative; display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 6px 8px; border-radius: 14px; cursor: pointer;
    border: 1px solid rgba(245, 199, 107, .45); background: rgba(0, 0, 0, .22); color: var(--dw-cream); text-align: left;
    font: 600 .74rem/1.15 var(--dw-text); transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
body.dw-premium[data-lang='en'] .dw-mela-tab { font-size: .86rem; }
.dw .dw-mela-tab img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.dw .dw-mela-tab[aria-selected='true'] { background: linear-gradient(180deg, #ffe39a, #e8a83a); color: var(--dw-ink); border-color: transparent; box-shadow: 0 6px 18px rgba(255, 170, 60, .35); }
.dw .dw-mela-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dw .dw-mela-tab:active { transform: scale(.97); }
.dw .dw-tab-won { position: absolute; top: -6px; right: -5px; width: 18px; height: 18px; border-radius: 50%; display: none; align-items: center; justify-content: center;
    background: #2f9e57; color: #fff; font: 700 .7rem/1 sans-serif; font-style: normal; box-shadow: 0 0 0 2px var(--dw-mid); }
.dw .dw-mela-tab.won .dw-tab-won { display: flex; }
/* The board: one game at a time. */
.dw .dw-mela-board {
    position: relative; width: 100%; height: 392px; margin-top: 12px; border-radius: 22px; overflow: hidden; touch-action: manipulation;
    background: radial-gradient(120% 80% at 50% 0%, rgba(255, 200, 110, .16), transparent 60%), linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .42));
    box-shadow: inset 0 0 0 1.5px rgba(245, 199, 107, .6), 0 18px 40px rgba(0, 0, 0, .35);
}
.dw .dw-game { position: absolute; inset: 0; }
.dw .dw-game[hidden] { display: none; }
.dw .dw-game-hud { position: absolute; z-index: 3; top: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.dw .dw-chip { padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .38); border: 1px solid rgba(245, 199, 107, .5); color: #ffe8c2; font: 600 .82rem/1.3 var(--dw-text); }
.dw .dw-game-stage { position: absolute; inset: 44px 10px 10px; }
.dw .dw-game-cover {
    position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 22px; text-align: center;
    background: radial-gradient(90% 70% at 50% 30%, rgba(77, 10, 24, .9), rgba(20, 3, 8, .94)); opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.dw .dw-game-cover.show { opacity: 1; pointer-events: auto; }
.dw .dw-game-icon { width: 76px; height: 76px; object-fit: contain; margin-bottom: 6px; animation: sb-float 4s ease-in-out infinite; }
.dw .dw-game-name { margin: 0; font-family: var(--dw-script); font-size: 2.3rem; font-weight: 400; line-height: 1.2; color: var(--dw-gold); }
body.dw:not([data-lang='en']) .dw-game-name { font-size: 1.85rem; line-height: 1.45; }
.dw .dw-game-howto { margin: 6px 0 0; max-width: 270px; font-size: .92rem; line-height: 1.55; color: var(--dw-cream); }
body.dw-premium[data-lang='en'] .dw-game-howto { font-size: 1.06rem; line-height: 1.4; }
.dw .dw-game-result { margin: 12px 0 0; padding: 7px 14px; border-radius: 12px; font-weight: 700; font-size: 1rem; line-height: 1.4; color: #fff1d6; background: rgba(255, 255, 255, .08); }
.dw .dw-game-result.is-win { color: var(--dw-ink); background: linear-gradient(180deg, #fff3c4, #ffd77a); animation: dw-pop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.dw .dw-game-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.dw .dw-game-buttons [hidden] { display: none; }

/* 1. Teen Patti */
.dw .dw-game--teenpatti .dw-game-stage { display: flex; flex-direction: column; justify-content: space-between; }
.dw .dw-tp-row { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 6px; }
.dw .dw-tp-label { grid-row: 1 / 3; margin: 0; font: 700 .78rem/1.2 var(--dw-text); color: #ffe2a6; text-align: left; }
.dw .dw-tp-hand { display: flex; gap: 8px; min-height: 92px; }
.dw .dw-tp-name { margin: 2px 0 0; min-height: 1.2em; font: 700 .86rem/1.2 var(--dw-text); color: var(--dw-gold); text-align: left; }
.dw .dw-tp-row.wins .dw-tp-name::after { content: ' 👑'; }
.dw .dw-tp-row.loses .dw-card { filter: brightness(.72); }
.dw .dw-tp-deck { position: relative; align-self: center; width: 46px; height: 64px; }
.dw .dw-tp-deck img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dw .dw-tp-deck img + img { transform: translate(3px, -3px) rotate(4deg); }
.dw .dw-card-slot { display: block; width: 62px; height: 88px; animation: dw-deal .45s cubic-bezier(.2, .8, .3, 1) calc(var(--n) * .16s) both; }
.dw .dw-card { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
.dw .dw-card.up { transform: none; }
.dw .dw-card-face, .dw .dw-card-back { position: absolute; inset: 0; border-radius: 8px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.dw .dw-card-back { width: 100%; height: 100%; max-width: none; transform: rotateY(180deg); }
.dw .dw-card-face { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #fffdf6, #fff1d4); color: #1d1416; box-shadow: 0 0 0 1px #e3b05a, 0 6px 14px rgba(0, 0, 0, .35); }
.dw .dw-card.red .dw-card-face { color: #c4161f; }
.dw .dw-card-face b { position: absolute; top: 4px; left: 6px; font: 700 1rem/1 'Cinzel Decorative', Georgia, serif; }
.dw .dw-card-face .dw-card-turned { top: auto; left: auto; bottom: 4px; right: 6px; transform: rotate(180deg); }
.dw .dw-card-face i { font-style: normal; font-size: 2rem; line-height: 1; }
.dw .dw-tp-row.wins .dw-card-face { box-shadow: 0 0 0 2px var(--dw-gold), 0 0 18px rgba(255, 200, 90, .65); }

/* 2. Pairs */
.dw .dw-pairs { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; }
.dw .dw-pair { position: relative; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; }
.dw .dw-pair-back, .dw .dw-pair-face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 9px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3, .7, .3, 1); }
.dw .dw-pair-back { max-width: none; object-fit: fill; }
.dw .dw-pair-face { display: flex; align-items: center; justify-content: center; transform: rotateY(-180deg); background: linear-gradient(180deg, #fffdf6, #fff1d4); box-shadow: 0 0 0 1px #e3b05a; }
.dw .dw-pair-face img { width: 72%; height: 72%; object-fit: contain; }
.dw .dw-pair.up .dw-pair-back { transform: rotateY(180deg); }
.dw .dw-pair.up .dw-pair-face { transform: none; }
.dw .dw-pair.matched .dw-pair-face { box-shadow: 0 0 0 2px #2f9e57, 0 0 16px rgba(120, 230, 150, .55); animation: dw-pop .5s ease both; }
.dw .dw-pair:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 9px; }

/* 3. Mithai Catch */
.dw .dw-game--mithai .dw-game-stage { overflow: hidden; touch-action: none; cursor: grab; border-radius: 14px; outline: none; }
.dw .dw-game--mithai .dw-game-stage:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.dw .dw-falling { position: absolute; inset: 0; }
.dw .dw-fall { position: absolute; left: 0; top: 0; width: 40px; height: 40px; max-width: none; pointer-events: none; will-change: transform; }
.dw .dw-fall.bad { width: 38px; height: 44px; }
.dw .dw-thali { position: absolute; left: 0; bottom: 2px; width: 104px; max-width: none; pointer-events: none; will-change: transform; }
.dw .dw-thali.hit { animation: dw-wiggle .45s ease-in-out; }

/* 4. Rangoli */
.dw .dw-game--rangoli .dw-game-stage { display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.dw .dw-rangoli-art { width: 262px; height: 262px; max-width: 100%; }
.dw .dw-rg-part { fill: rgba(255, 246, 224, .08); stroke: rgba(245, 199, 107, .75); stroke-width: 1.2; stroke-dasharray: 3 3; cursor: pointer; transition: fill .35s ease, stroke .35s ease; }
.dw .dw-rg-part[data-filled] { stroke: rgba(255, 246, 214, .9); stroke-dasharray: none; }
.dw .dw-rg-palette { display: flex; gap: 10px; padding-bottom: 2px; }
.dw .dw-rg-bowl { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); cursor: pointer;
    background: var(--c); background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .55), var(--c) 62%); transition: transform .2s ease, box-shadow .2s ease; }
.dw .dw-rg-bowl.on { transform: scale(1.18); border-color: #fff; box-shadow: 0 0 0 3px rgba(245, 199, 107, .7), 0 4px 12px rgba(0, 0, 0, .35); }
.dw .dw-rg-bowl:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* 5. Diya Jalao */
.dw .dw-diya-grid { height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; }
.dw .dw-gust-diya { --w: 74px; padding: 0; border: 0; background: none; cursor: pointer; }
.dw .dw-gust-diya:not(.lit) > img:not(.dw-mini-glow) { filter: brightness(.65) saturate(.6); }
.dw .dw-gust-diya:not(.lit) { animation: dw-nudge 1.4s ease-in-out infinite; }
.dw .dw-smoke { position: absolute; z-index: 4; left: 42%; top: 0; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(220, 220, 230, .7), transparent 70%); opacity: 0; pointer-events: none; }
.dw .dw-gust-diya.puff .dw-smoke { animation: dw-smoke .9s ease-out both; }

/* 6. Phatake Pop */
.dw .dw-rocket-sky { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; }
.dw .dw-sky-rocket { position: absolute; left: 0; top: 0; width: 36px; height: 90px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; will-change: transform; }
.dw .dw-sky-rocket img { width: 24px; height: 72px; max-width: none; display: block; margin: 0 auto; filter: drop-shadow(0 0 8px rgba(255, 200, 90, .6)); pointer-events: none; }
.dw .dw-sky-rocket.burst { animation: dw-fade-out .25s ease both; pointer-events: none; }

/* Every game won: the Diwali Champion. */
.dw .dw-champion { position: fixed; inset: 0; z-index: 9997; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(10, 2, 5, .62); opacity: 0; transition: opacity .3s ease; }
.dw .dw-champion[hidden] { display: none; }
.dw .dw-champion.show { opacity: 1; }
.dw .dw-champion-card {
    position: relative; width: 100%; max-width: 330px; padding: 66px 22px 22px; border-radius: 22px; text-align: center; color: #5a1420;
    background: radial-gradient(120% 70% at 50% 0%, #fffdf6 0%, #fff4dc 60%, #f7e2b4 100%);
    box-shadow: 0 0 0 2px var(--dw-gold), 0 0 0 8px rgba(245, 199, 107, .25), 0 30px 60px rgba(0, 0, 0, .5); transform: translateY(30px) scale(.9); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1);
}
.dw .dw-champion.show .dw-champion-card { transform: none; }
.dw .dw-champion-medal { position: absolute; left: 50%; top: -46px; width: 96px; height: 96px; margin-left: -48px; padding: 14px; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #fff6c4, #f2b84b 55%, #b9781a); box-shadow: 0 0 0 4px #fff3c4, 0 0 40px rgba(255, 200, 90, .7); animation: dw-glow-pulse 2.6s ease-in-out infinite; }
.dw .dw-champion-medal img { width: 100%; height: 100%; max-width: none; }
.dw .dw-champion-kicker { margin: 0; font: 700 .74rem/1.3 var(--dw-text); letter-spacing: .18em; text-transform: uppercase; color: #9b5f12; }
body.dw:not([data-lang='en']) .dw-champion-kicker { font-size: .95rem; letter-spacing: 0; text-transform: none; }
.dw .dw-champion-title { margin: 4px 0 0; font-family: var(--dw-script); font-size: 2.6rem; font-weight: 400; line-height: 1.15; color: #7a1020; }
body.dw:not([data-lang='en']) .dw-champion-title { font-size: 2.1rem; line-height: 1.45; }
.dw .dw-champion-message { margin: 10px 0 0; font-size: 1.02rem; line-height: 1.55; white-space: pre-line; }
body.dw-premium[data-lang='en'] .dw-champion-message { font-size: 1.14rem; }
.dw .dw-champion .dw-actions { margin-top: 16px; }
.dw .dw-champion .dw-btn--ghost { background: rgba(122, 16, 32, .08); color: #7a1020 !important; box-shadow: inset 0 0 0 1.5px rgba(122, 16, 32, .45); }

/* The video and the PDF: the games light up one by one, then the crown. On the link: hidden. */
html:not(.sb-film) .dw .dw-mela-showcase, html:not(.sb-film) .dw .dw-mela-play-link { display: none; }
.dw .dw-mela-showcase { position: absolute; inset: 0; z-index: 7; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 10px; padding: 18px 14px 66px; }
.dw .dw-showcase-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 16px; padding: 8px;
    border: 1px solid rgba(245, 199, 107, .45); background: rgba(0, 0, 0, .25); color: var(--dw-cream); font: 600 .8rem/1.2 var(--dw-text); text-align: center; }
body.dw-premium[data-lang='en'] .dw-showcase-tile { font-size: .92rem; }
.dw .dw-showcase-tile img { width: 54px; height: 54px; object-fit: contain; }
.dw .dw-showcase-crown { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center; font-family: var(--dw-script); font-size: 2rem; line-height: 1.2; color: var(--dw-gold); opacity: 0; }
body.dw:not([data-lang='en']) .dw-showcase-crown { font-size: 1.6rem; }
.dw .dw-mela-play-link { margin-top: 14px; display: inline-flex; padding: 9px 18px; border-radius: 999px; background: linear-gradient(180deg, #ffe39a, #e8a83a); color: var(--dw-ink); font: 700 .9rem/1.2 var(--dw-text); text-decoration: none; }


/* ---------- Premium 6: the Grand Finale ---------- */
.dw .dw-finale { padding-top: 64px; padding-bottom: 96px; }
.dw .dw-finale .dw-content { max-width: 362px; position: relative; z-index: 3; }
.dw .dw-finale-sky { z-index: 1; }
.dw .dw-finale-town { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; max-width: none; opacity: .95; pointer-events: none; }
.dw .dw-finale-title { margin: 2px 0 0; font-family: var(--dw-script); font-size: 4.2rem; font-weight: 400; line-height: 1.1; filter: drop-shadow(0 4px 18px rgba(255, 166, 60, .55)); }
body.dw:not([data-lang='en']) .dw-finale-title { font-size: 3.4rem; line-height: 1.35; }
.dw .dw-finale-sign { margin: 8px 0 0; font-family: var(--dw-script); font-size: 1.9rem; line-height: 1.25; color: var(--dw-gold); }
body.dw:not([data-lang='en']) .dw-finale-sign { font-size: 1.45rem; }
.dw .dw-finale-replay { margin-top: 16px; }
.dw .dw-finale-replay[disabled] { opacity: .55; cursor: default; }
/* The things to do: a panel with two tabs. */
.dw .dw-finale-play {
    width: 100%; margin-top: 22px; padding: 12px; border-radius: 20px; text-align: center;
    background: linear-gradient(180deg, rgba(20, 4, 14, .55), rgba(20, 4, 14, .35)); box-shadow: inset 0 0 0 1px rgba(245, 199, 107, .4), 0 14px 34px rgba(0, 0, 0, .3);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.dw .dw-finale-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .3); }
.dw .dw-finale-tab {
    padding: 9px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--dw-cream); cursor: pointer;
    font: 600 .86rem/1.2 var(--dw-text); letter-spacing: .01em; transition: background .25s ease, color .25s ease;
}
.dw .dw-finale-tab[aria-selected='true'] { background: linear-gradient(180deg, #ffe39a, #e8a83a); color: var(--dw-ink); box-shadow: 0 4px 14px rgba(255, 160, 50, .35); }
.dw .dw-finale-tab:focus-visible { outline: 2px solid var(--dw-gold); outline-offset: 2px; }
.dw .dw-pad-intro { margin: 12px 4px 10px; font-size: .92rem; line-height: 1.45; color: #ffe9c2; }
.dw .dw-pad-actions { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.dw .dw-pad-actions .dw-btn { padding: 10px 18px; font-size: .9rem; }
.dw .dw-pad-actions .dw-btn[disabled] { opacity: .45; cursor: default; }
/* Write in light: a night-sky board; the phuljhadi follows the finger. */
.dw .dw-light-board {
    position: relative; height: 240px; border-radius: 16px; overflow: hidden; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none;
    background: radial-gradient(120% 90% at 50% 110%, rgba(255, 140, 40, .18), transparent 60%), radial-gradient(1px 1px at 20% 30%, #fff8e0, transparent), radial-gradient(1px 1px at 70% 18%, #fff8e0, transparent), radial-gradient(1.4px 1.4px at 84% 60%, #fff8e0, transparent), radial-gradient(1px 1px at 38% 74%, #fff8e0, transparent), linear-gradient(180deg, #07020d, #160818 70%, #26091a);
    box-shadow: inset 0 0 0 1px rgba(245, 199, 107, .35), inset 0 10px 30px rgba(0, 0, 0, .5);
}
.dw .dw-light-trail, .dw .dw-light-sparks { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dw .dw-light-sparks { pointer-events: none; }
.dw .dw-phuljhadi { position: absolute; left: 0; top: 0; width: 14px; height: 120px; max-width: none; margin: -7px 0 0 -7px; transform-origin: 7px 7px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.dw .dw-light-hint { position: absolute; left: 0; right: 0; top: 44%; margin: 0; pointer-events: none; font: 600 .95rem/1.3 var(--dw-text); letter-spacing: .04em; color: rgba(255, 233, 184, .75); animation: dw-breathe 2.4s ease-in-out infinite; transition: opacity .3s ease; }
.dw .dw-light-board.drawn .dw-light-hint { opacity: 0; animation: none; }
/* Sky lanterns: each rises with its wish, drifts, and becomes a star. */
.dw .dw-lantern-sky {
    position: relative; height: 210px; border-radius: 16px; overflow: hidden;
    background: radial-gradient(120% 70% at 50% 120%, rgba(255, 150, 50, .22), transparent 62%), linear-gradient(180deg, #050210, #120720 65%, #24091c);
    box-shadow: inset 0 0 0 1px rgba(245, 199, 107, .35), inset 0 10px 30px rgba(0, 0, 0, .5);
}
.dw .dw-rising-lantern { position: absolute; left: var(--x); bottom: -84px; width: 140px; margin-left: -70px; display: flex; flex-direction: column; align-items: center; pointer-events: none; animation: dw-lantern-rise 7.5s cubic-bezier(.3, .1, .6, 1) both; }
.dw .dw-rising-lantern img { width: 44px; filter: drop-shadow(0 0 12px rgba(255, 170, 60, .85)); animation: dw-flicker 1.4s ease-in-out infinite; }
.dw .dw-rising-lantern span { margin-top: 4px; max-width: 140px; font: 500 .78rem/1.3 var(--dw-text); color: #ffe7b0; text-shadow: 0 0 8px rgba(255, 160, 60, .8); overflow-wrap: anywhere; }
.dw .dw-wish-star { position: absolute; top: 14px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #fff6d8; box-shadow: 0 0 8px 2px rgba(255, 220, 140, .85); animation: dw-twinkle 2.4s ease-in-out infinite; }
.dw .dw-wish-star:nth-child(3n) { top: 30px; animation-delay: -.8s; }
.dw .dw-wish-star:nth-child(3n + 1) { top: 22px; animation-delay: -1.6s; }
.dw .dw-lantern-form { display: flex; gap: 8px; margin-top: 12px; }
.dw .dw-lantern-form input {
    flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px; border: 1px solid rgba(245, 199, 107, .5); background: rgba(0, 0, 0, .35);
    color: #fff3dc; font: 500 .95rem/1.2 var(--dw-text);
}
.dw .dw-lantern-form input::placeholder { color: rgba(255, 233, 184, .55); }
.dw .dw-lantern-form input:focus { outline: 2px solid var(--dw-gold); outline-offset: 1px; }
.dw .dw-lantern-form .dw-btn { padding: 10px 18px; font-size: .92rem; white-space: nowrap; }
.dw .dw-finale-end { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.dw .dw-finale-end .dw-btn { font-size: .9rem; padding: 11px 18px; }
/* "Happy Diwali" written in light: the video and the PDF only. */
.dw .dw-light-script { display: none; position: relative; margin: 26px auto 0; width: max-content; max-width: 100%; }
.dw .dw-light-text {
    display: block; padding: 0 10px; font-family: var(--dw-script); font-size: 3.6rem; line-height: 1.3; color: #fff7dc; white-space: nowrap;
    text-shadow: 0 0 6px #fff1c4, 0 0 14px rgba(255, 196, 90, .95), 0 0 30px rgba(255, 140, 30, .8), 0 0 54px rgba(255, 110, 20, .55);
}
body.dw:not([data-lang='en']) .dw-light-text { font-size: 2.9rem; line-height: 1.5; }
.dw .dw-light-head { position: absolute; top: 58%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fffdf2; box-shadow: 0 0 10px 4px rgba(255, 220, 140, .95), 0 0 26px 10px rgba(255, 150, 40, .6), -8px -6px 0 -3px #ffe39a, 9px -8px 0 -3px #fff3c4, 7px 9px 0 -3px #ffd36b, -9px 7px 0 -3px #fff; opacity: 0; }
@keyframes dw-lantern-rise {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    55% { transform: translate(calc(var(--sway) * -.6), -170px) scale(.75); opacity: 1; }
    100% { transform: translate(var(--sway), -300px) scale(.38); opacity: 0; }
}
@keyframes dw-write { from { clip-path: inset(-30% 100% -30% -10%); } to { clip-path: inset(-30% -10% -30% -10%); } }
@keyframes dw-write-head { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* ---------- Premium 4: the Wishes Wall ---------- */
.dw .dw-wall { padding-top: 64px; padding-bottom: 60px; }
.dw .dw-wall-content { max-width: 362px; }
.dw .dw-wall .dw-section-title { font-size: 3rem; }
body.dw:not([data-lang='en']) .dw-wall .dw-section-title { font-size: 2.2rem; }
.dw .dw-wall-intro { margin: 2px 0 0; max-width: 300px; font-size: .98rem; color: #ffe2a6; }
body.dw-premium[data-lang='en'] .dw-wall-intro { font-size: 1.12rem; }
.dw .dw-wall-sky {
    position: relative; width: 100%; height: 330px; margin-top: 14px; border-radius: 22px; overflow: hidden;
    background: radial-gradient(120% 60% at 50% 110%, rgba(255, 150, 60, .3), transparent 60%), linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .12));
    box-shadow: inset 0 0 0 1.5px rgba(245, 199, 107, .55);
}
.dw .dw-wall-lanterns { position: absolute; inset: 0; }
.dw .dw-wall-lantern {
    position: absolute; left: var(--x); top: var(--y); width: 84px; margin-left: -42px; padding: 0; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px; animation: dw-wall-float 6s ease-in-out var(--d) infinite;
}
.dw .dw-wall-lantern img { width: 40px; height: auto; max-width: none; filter: drop-shadow(0 0 12px rgba(255, 190, 80, .75)); }
.dw .dw-wall-lantern span { max-width: 84px; padding: 1px 8px; border-radius: 999px; background: rgba(0, 0, 0, .4); color: #fff1d6; font: 600 .72rem/1.4 var(--dw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.dw-premium[data-lang='en'] .dw-wall-lantern span { font-size: .84rem; }
.dw .dw-wall-lantern:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 10px; }
.dw .dw-wall-lantern.fresh { animation: dw-wall-arrive 1.8s cubic-bezier(.2, .7, .3, 1) both, dw-wall-float 6s ease-in-out 1.8s infinite; }
/* Lantern colours: the same lantern, tinted. */
.dw .dw-lantern--rose img { filter: hue-rotate(-40deg) saturate(1.35) drop-shadow(0 0 12px rgba(255, 120, 160, .75)); }
.dw .dw-lantern--teal img { filter: hue-rotate(150deg) saturate(1.2) drop-shadow(0 0 12px rgba(90, 230, 210, .7)); }
.dw .dw-lantern--violet img { filter: hue-rotate(235deg) saturate(1.25) drop-shadow(0 0 12px rgba(190, 140, 255, .7)); }
.dw .dw-wall-empty { position: absolute; inset: auto 0 44%; margin: 0; padding: 0 20px; font-family: var(--dw-script); font-size: 1.8rem; line-height: 1.3; color: var(--dw-gold); }
.dw .dw-wall-empty[hidden] { display: none; }
body.dw:not([data-lang='en']) .dw-wall-empty { font-size: 1.45rem; }
.dw .dw-wall-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.dw .dw-wall-actions [hidden] { display: none; }
.dw .dw-wall-count { opacity: .8; }
.dw .dw-wall-form { width: 100%; margin-top: 14px; padding: 16px; border-radius: 18px; text-align: left; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1.5px rgba(245, 199, 107, .55); display: flex; flex-direction: column; gap: 10px; }
.dw .dw-wall-form[hidden], .dw .dw-wall-list[hidden], .dw .dw-wish-card[hidden] { display: none; }
.dw .dw-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.dw .dw-field { display: flex; flex-direction: column; gap: 4px; font: 600 .82rem/1.3 var(--dw-text); color: #ffe2a6; }
body.dw-premium[data-lang='en'] .dw-field { font-size: .95rem; }
.dw .dw-field input, .dw .dw-field textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(245, 199, 107, .55); background: rgba(255, 248, 230, .96); color: #3a0b14; font: 500 1rem/1.4 var(--dw-text); resize: vertical; }
.dw .dw-field input:focus, .dw .dw-field textarea:focus { outline: 2px solid var(--dw-gold); outline-offset: 1px; }
.dw .dw-wall-left { align-self: flex-end; font-weight: 500; opacity: .75; }
.dw .dw-wall-colours { display: flex; justify-content: center; gap: 12px; }
.dw .dw-wall-colour { position: relative; width: 48px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; }
.dw .dw-wall-colour input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dw .dw-wall-colour img { width: 30px; height: auto; max-width: none; }
.dw .dw-wall-colour:has(input:checked) { background: rgba(255, 215, 122, .18); box-shadow: inset 0 0 0 1.5px var(--dw-gold); }
.dw .dw-wall-colour input:focus-visible + img { outline: 2px solid #fff; outline-offset: 3px; }
.dw .dw-wall-status { min-height: 1.2em; margin: 0; font: 600 .86rem/1.4 var(--dw-text); color: #ffd0b0; text-align: center; }
.dw .dw-wall-status:empty { display: none; }
.dw .dw-wall-form .dw-btn { align-self: center; }
.dw .dw-wall-note { margin: 0; text-align: center; font-size: .76rem; color: #ffe2a6; opacity: .75; }
body.dw-premium[data-lang='en'] .dw-wall-note { font-size: .88rem; }
.dw .dw-wall-list { width: 100%; max-height: 300px; margin-top: 14px; padding: 4px; overflow-y: auto; display: grid; gap: 8px; text-align: left; }
.dw .dw-wall-item { padding: 10px 14px; border-radius: 14px; background: rgba(255, 248, 230, .94); color: #3a0b14; border-left: 5px solid #f2b84b; }
.dw .dw-wall-item.dw-lantern--rose { border-left-color: #e2557e; }
.dw .dw-wall-item.dw-lantern--teal { border-left-color: #1aa58f; }
.dw .dw-wall-item.dw-lantern--violet { border-left-color: #8c5ad6; }
.dw .dw-wall-item p { margin: 0; font-size: .98rem; line-height: 1.5; }
body.dw-premium[data-lang='en'] .dw-wall-item p { font-size: 1.08rem; }
.dw .dw-wall-item small { display: block; margin-top: 4px; font-weight: 700; color: #7a1020; }
/* One wish, read in full. */
.dw .dw-wish-card { position: fixed; inset: 0; z-index: 9997; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 2, 5, .55); opacity: 0; transition: opacity .25s ease; }
.dw .dw-wish-card.show { opacity: 1; }
.dw .dw-wish-card-inner { position: relative; width: 100%; max-width: 320px; padding: 56px 22px 20px; border-radius: 20px; text-align: center; color: #5a1420;
    background: radial-gradient(120% 70% at 50% 0%, #fffdf6, #fff1d4); box-shadow: 0 0 0 2px var(--dw-gold), 0 24px 50px rgba(0, 0, 0, .45); transform: scale(.9); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.dw .dw-wish-card.show .dw-wish-card-inner { transform: none; }
.dw .dw-wish-card-lantern { position: absolute; left: 50%; top: -38px; width: 56px; margin-left: -28px; max-width: none; filter: drop-shadow(0 0 16px rgba(255, 190, 80, .9)); }
.dw .dw-wish-card.dw-lantern--rose .dw-wish-card-lantern { filter: hue-rotate(-40deg) saturate(1.35) drop-shadow(0 0 16px rgba(255, 120, 160, .9)); }
.dw .dw-wish-card.dw-lantern--teal .dw-wish-card-lantern { filter: hue-rotate(150deg) saturate(1.2) drop-shadow(0 0 16px rgba(90, 230, 210, .9)); }
.dw .dw-wish-card.dw-lantern--violet .dw-wish-card-lantern { filter: hue-rotate(235deg) saturate(1.25) drop-shadow(0 0 16px rgba(190, 140, 255, .9)); }
.dw .dw-wish-card-message { margin: 0; font-size: 1.12rem; line-height: 1.6; }
body.dw-premium[data-lang='en'] .dw-wish-card-message { font-size: 1.25rem; font-style: italic; }
.dw .dw-wish-card-name { margin: 10px 0 14px; font-weight: 700; color: #7a1020; }
.dw .dw-wish-card .dw-btn--ghost { background: rgba(122, 16, 32, .08); color: #7a1020 !important; box-shadow: inset 0 0 0 1.5px rgba(122, 16, 32, .45); }
html:not(.sb-film) .dw .dw-wall .dw-mela-play-link { display: none; }

@keyframes dw-wall-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes dw-wall-arrive { 0% { opacity: 0; transform: translateY(330px) scale(.6); } 15% { opacity: 1; } 100% { opacity: 1; transform: none; } }

@keyframes dw-deal { from { opacity: 0; transform: translate(0, 60px) rotate(-12deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes dw-smoke { 0% { opacity: .9; transform: translateY(0) scale(.6); } 100% { opacity: 0; transform: translateY(-30px) scale(2.2); } }
@keyframes dw-tile-on { 0% { transform: none; background: rgba(0, 0, 0, .25); } 40% { transform: scale(1.08); background: rgba(255, 215, 122, .35); } 100% { transform: none; background: rgba(255, 215, 122, .16); box-shadow: 0 0 0 1.5px var(--dw-gold), 0 0 18px rgba(255, 200, 90, .35); } }

@keyframes dw-match-tease { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(12px); } 90% { transform: translateX(3px); } }
@keyframes dw-match-strike {
    0% { transform: none; opacity: 1; }
    22% { transform: translateX(28px); }
    30% { transform: translate(30px, -6px) rotate(8deg); }
    70%, 80% { transform: translate(calc(28px + var(--to-x)), var(--to-y)) rotate(34deg); opacity: 1; }
    100% { transform: translate(calc(44px + var(--to-x)), calc(var(--to-y) + 70px)) rotate(70deg); opacity: 0; }
}
@keyframes dw-match-flame { 0%, 22% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1.25); } 38%, 86% { opacity: 1; transform: rotate(-34deg); } 100% { opacity: 0; transform: rotate(-60deg) scale(.4); } }
@keyframes dw-env-float { 0%, 100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-7px) rotate(.4deg); } }
@keyframes dw-env-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .75; } }
@keyframes dw-env-shadow-out { to { transform: translateY(40px) scale(.8); opacity: 0; } }
@keyframes dw-seal-glow { 0%, 100% { opacity: .15; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes dw-seal-press { 0% { transform: scale(1); } 55% { transform: scale(.9); } 100% { transform: scale(.95); } }
@keyframes dw-seal-fall-l { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 16% { transform: translate(-6px, -2px) rotate(-9deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-48px, 175px) rotate(-80deg); opacity: 0; } }
@keyframes dw-seal-fall-r { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 16% { transform: translate(6px, -1px) rotate(8deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(54px, 185px) rotate(70deg); opacity: 0; } }
@keyframes dw-wax-bit { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
/* The flap swings up, toward the guest and over the top edge, showing its liner. Its wrap goes behind the card at
   the halfway point (the flap edge-on), then sinks and fades with the envelope. */
@keyframes dw-flap-turn { from { transform: rotateX(0deg); } to { transform: rotateX(180deg); } }
@keyframes dw-flap-follow {
    0% { transform: translateY(0); z-index: 4; opacity: 1; }
    15% { z-index: 4; }
    16% { z-index: 1; }
    30% { transform: translateY(0); opacity: 1; animation-timing-function: ease-in-out; }
    66% { transform: translateY(130px); opacity: 1; animation-timing-function: ease-in; }
    99% { visibility: visible; }
    100% { transform: translateY(260px); z-index: 1; opacity: 0; visibility: hidden; }
}
@keyframes dw-env-sink {
    0% { transform: translateY(0); opacity: 1; animation-timing-function: ease-in-out; }
    50% { transform: translateY(130px); opacity: 1; animation-timing-function: ease-in; }
    99% { visibility: visible; }
    100% { transform: translateY(260px); opacity: 0; visibility: hidden; }
}
/* The card slides out (tilting a little, as when pulled), then comes forward over the falling envelope. */
@keyframes dw-env-card-out {
    0% { transform: translateY(0) rotateX(0deg) scale(.7); z-index: 2; animation-timing-function: ease-in-out; }
    47% { transform: translateY(-92px) rotateX(9deg) scale(.7); z-index: 2; animation-timing-function: cubic-bezier(.2, .85, .25, 1.04); }
    48% { z-index: 7; }
    100% { transform: translateY(44px) rotateX(0deg) scale(1); z-index: 7; }
}
@keyframes dw-card-sheen { 0% { opacity: 1; transform: translateX(-70%); } 100% { opacity: 1; transform: translateX(70%); } }
@keyframes dw-petal-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 8% { opacity: 1; } 50% { transform: translate(24px, 440px) rotate(260deg); } 88% { opacity: .9; } 100% { opacity: 0; transform: translate(-16px, 880px) rotate(540deg); } }
@keyframes dw-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---------- Keyframes (transform and opacity only) ---------- */
@keyframes dw-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes dw-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes dw-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes dw-burst { 0%, 15% { opacity: 0; transform: scale(.08); } 18% { opacity: 1; } 50% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: translateY(22px) scale(1.07); } }
@keyframes dw-burst-now { 0% { opacity: 0; transform: scale(.08); } 7% { opacity: 1; } 42% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: translateY(22px) scale(1.07); } }
@keyframes dw-rocket { 0% { opacity: 0; transform: translateY(440px); } 3% { opacity: 1; } 15% { opacity: 1; transform: none; } 17%, 100% { opacity: 0; transform: none; } }
@keyframes dw-invite { 0%, 76%, 100% { transform: none; } 80% { transform: rotate(-6deg) scale(1.03); } 84% { transform: rotate(6deg) scale(1.04); } 88% { transform: rotate(-4deg); } 92% { transform: rotate(2deg); } }
@keyframes dw-wiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-9deg) scale(1.05); } 45% { transform: rotate(8deg) scale(1.07); } 70% { transform: rotate(-5deg); } 85% { transform: rotate(3deg); } }
@keyframes dw-wiggle-twice { 0%, 48%, 100% { transform: none; } 10% { transform: rotate(-9deg) scale(1.05); } 22% { transform: rotate(8deg) scale(1.07); } 35% { transform: rotate(-5deg); } 58% { transform: rotate(-10deg) scale(1.06); } 70% { transform: rotate(9deg) scale(1.08); } 84% { transform: rotate(-5deg); } }
@keyframes dw-lid-pop { 0% { opacity: 1; transform: none; } 35% { opacity: 1; transform: translate(-10px, -110px) rotate(-22deg); } 100% { opacity: 0; transform: translate(-90px, -40px) rotate(-70deg); } }
@keyframes dw-confetti { 0% { opacity: 0; transform: scale(.15); } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px) scale(1.25); } }
@keyframes dw-appear { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes dw-card-rise { from { opacity: 0; transform: translateY(150px) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes dw-swing { 0%, 100% { transform: rotate(0); } 12% { transform: rotate(24deg); } 30% { transform: rotate(-18deg); } 48% { transform: rotate(12deg); } 66% { transform: rotate(-7deg); } 84% { transform: rotate(3deg); } }
@keyframes dw-whirl { from { transform: rotate(0) scale(1); } 30% { transform: rotate(260deg) scale(1.06); } to { transform: rotate(720deg) scale(1); } }
@keyframes dw-jelly { 0%, 100% { transform: none; } 25% { transform: scale(1.18, .84); } 45% { transform: scale(.9, 1.12); } 65% { transform: scale(1.06, .95); } 82% { transform: scale(.98, 1.02); } }
@keyframes dw-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(6deg); } }
@keyframes dw-dance { 0%, 100% { transform: none; } 30% { transform: translateY(-10px) rotate(-6deg); } 60% { transform: translateY(0) rotate(5deg); } }
@keyframes dw-rise { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .95; } 80% { opacity: .7; } 100% { opacity: 0; transform: translate(26px, -560px); } }
@keyframes dw-lantern { 0% { opacity: 0; transform: translate(0, 0); } 8% { opacity: .95; } 50% { transform: translate(16px, -470px); } 90% { opacity: .85; } 100% { opacity: 0; transform: translate(-8px, -980px); } }
@keyframes dw-flicker { 0%, 100% { transform: scale(1, 1) rotate(-2deg); } 22% { transform: scale(1.05, .95) rotate(2deg); } 48% { transform: scale(.96, 1.06) rotate(-1deg); } 74% { transform: scale(1.04, .97) rotate(1.5deg); } }
@keyframes dw-glow-pulse { 0%, 100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes dw-ignite { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: none; } }
@keyframes dw-glow-in { from { opacity: .28; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes dw-bloom { 0% { opacity: 0; transform: scale(0); } 18% { opacity: 1; } 100% { opacity: 1; transform: scale(30); } }
@keyframes dw-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes dw-ring { 0% { opacity: .9; transform: scale(.62); } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes dw-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes dw-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-4px) rotate(-3deg); } 90% { transform: translateY(0) rotate(2deg); } }
@keyframes dw-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* ---------- Film (MP4, PDF, PNG): one timeline ----------
   The diya lights at --door-start, light fills the screen and fades into the greeting; there the five
   diyas light one by one. Countdown, buttons, map, the guest's name and the sparkler stay on the link. */
html.sb-film .dw .dw-tap, html.sb-film .dw .dw-lamp-ring, html.sb-film .dw .dw-countdown, html.sb-film .dw .dw-actions,
html.sb-film .dw .dw-diya-hint, html.sb-film .dw .dw-guest, html.sb-film .dw-sparkles, html.sb-film .dw .dw-fw--once { display: none !important; }
html.sb-film .dw #door-overlay { animation: dw-fade-out .9s ease calc(var(--door-start) + 2.05s) both; }
html.sb-film .dw .dw-lamp-fire { animation: dw-ignite .7s ease-out calc(var(--door-start) + .1s) both; }
html.sb-film .dw .dw-lamp-glow { animation: dw-glow-in 1s ease-out calc(var(--door-start) + .2s) both; }
html.sb-film .dw .dw-bloom { animation: dw-bloom 1.5s cubic-bezier(.5, 0, .3, 1) calc(var(--door-start) + .65s) both; }
html.sb-film .dw .dw-diya-fire { transition: none; animation: dw-ignite .6s ease-out calc(var(--scene-start) + 4.7s + var(--n) * .38s) both; }
html.sb-film .dw .dw-diya-glow { transition: none; animation: dw-glow-in .8s ease-out calc(var(--scene-start) + 4.8s + var(--n) * .38s) both; }
html.sb-film .dw .dw-diya { animation: dw-dance .65s ease-in-out calc(var(--scene-start) + 6.75s + var(--n) * .09s) 3 both; }
html.sb-film .dw .dw-gift-hint, html.sb-film .dw .dw-copy, html.sb-film .dw-toast { display: none !important; }
html.sb-film .dw .dw-gift-box { animation: dw-wiggle-twice 1.3s ease-in-out calc(var(--scene-start) + 1.9s) both; }
html.sb-film .dw .dw-gift-lid { animation: dw-lid-pop 1.1s cubic-bezier(.2, .7, .3, 1) calc(var(--scene-start) + 3.25s) both; }
html.sb-film .dw .dw-gift-glow { transition: none; animation: dw-appear .8s ease-out calc(var(--scene-start) + 3.25s) both; }
html.sb-film .dw .dw-gift-confetti { animation: dw-confetti 1.8s cubic-bezier(.15, .8, .3, 1) calc(var(--scene-start) + 3.3s) both; }
html.sb-film .dw .dw-gift-tease { transition: none; animation: dw-fade-out .4s ease calc(var(--scene-start) + 3.2s) both; }
html.sb-film .dw .dw-gift-card { transition: none; animation: dw-card-rise .9s cubic-bezier(.2, 1.35, .4, 1) calc(var(--scene-start) + 3.55s) both; }
html.sb-film .dw .dw-diya-done { display: block; animation: sb-up 1s cubic-bezier(.215, .61, .355, 1) calc(var(--scene-start) + 6.9s) both; }
html.sb-film .dw .dw-greet .dw-content, html.sb-film .dw .dw-event, html.sb-film .dw .dw-venue .dw-content { margin-top: 0; }
/* Premium in the video: the match strikes at --door-start and lights the diya, the light opens on the welcome,
   the envelope opens by itself and the card rises; then the family. */
html.sb-film .dw .dw-match-hint, html.sb-film .dw .dw-env-hint, html.sb-film .dw .dw-scroll-cue { display: none !important; }
html.sb-film body.dw-premium #door-overlay { animation: dw-fade-out .8s ease calc(var(--door-start) + 2.9s) both; }
html.sb-film body.dw-premium .dw-for-you-wrap { animation: dw-fade-out .5s ease calc(var(--door-start) + .25s) both; }
html.sb-film body.dw-premium .dw-match { animation: dw-match-strike 1.75s cubic-bezier(.45, .05, .3, 1) var(--door-start) both; }
html.sb-film body.dw-premium .dw-match-flame { animation: dw-match-flame 1.75s linear var(--door-start) both; }
html.sb-film body.dw-premium .dw-lamp-fire { animation: dw-ignite .7s ease-out calc(var(--door-start) + 1.35s) both; }
html.sb-film body.dw-premium .dw-lamp-glow { animation: dw-glow-in 1s ease-out calc(var(--door-start) + 1.45s) both; }
html.sb-film body.dw-premium .dw-bloom { animation: dw-bloom 1.3s cubic-bezier(.5, 0, .3, 1) calc(var(--door-start) + 1.85s) both; }
html.sb-film body.dw-premium .dw-matchbox-box { animation: dw-fade-out .5s ease calc(var(--door-start) + 1.9s) both; }
html.sb-film body.dw-premium #welcome { --sb-base: 3.1s; --dw-open: calc(var(--scene-start) + 5.4s); }
html.sb-film body.dw-premium .dw-env-seal { animation: dw-seal-press .24s ease-out var(--dw-open) both; }
html.sb-film body.dw-premium .dw-seal-half--l { animation: dw-seal-fall-l .95s cubic-bezier(.45, 0, .8, .45) calc(var(--dw-open) + .2s) both; }
html.sb-film body.dw-premium .dw-seal-half--r { animation: dw-seal-fall-r .95s cubic-bezier(.45, 0, .8, .45) calc(var(--dw-open) + .24s) both; }
html.sb-film body.dw-premium .dw-wax-bit { animation: dw-wax-bit .8s cubic-bezier(.45, 0, .8, .45) calc(var(--dw-open) + .22s) both; }
html.sb-film body.dw-premium .dw-env-flap { animation: dw-flap-turn .96s cubic-bezier(.5, .05, .3, 1) calc(var(--dw-open) + .3s) both; }
html.sb-film body.dw-premium .dw-env-flap-wrap { animation: dw-flap-follow 3.2s linear calc(var(--dw-open) + .3s) both; }
html.sb-film body.dw-premium .dw-env-back, html.sb-film body.dw-premium .dw-env-pocket { animation: dw-env-sink 2.2s linear calc(var(--dw-open) + 1.3s) both; }
html.sb-film body.dw-premium .dw-env-shadow { animation: dw-env-shadow-out 1s ease calc(var(--dw-open) + 1.3s) both; }
html.sb-film body.dw-premium .dw-env-card { animation: dw-env-card-out 2.3s linear calc(var(--dw-open) + 1.25s) both; }
html.sb-film body.dw-premium .dw-petal { animation: dw-petal-fall 4.2s ease-in calc(var(--dw-open) + 2.3s + var(--d)) both; }
html.sb-film body.dw-premium .dw-wall-actions, html.sb-film body.dw-premium .dw-wall-form, html.sb-film body.dw-premium .dw-wall-list, html.sb-film body.dw-premium .dw-wish-card { display: none !important; }
html.sb-film body.dw-premium .dw-wall-lantern { animation: dw-wall-arrive 1.6s cubic-bezier(.2, .7, .3, 1) calc(var(--scene-start) + 2.6s + var(--n) * .4s) both; }
html.sb-film body.dw-premium .dw-game, html.sb-film body.dw-premium .dw-champion { display: none !important; }
html.sb-film body.dw-premium .dw-mela-lamp .dw-mini-fire { transition: none; animation: dw-ignite .6s ease-out calc(var(--scene-start) + 3.4s + var(--n) * .55s) both; }
html.sb-film body.dw-premium .dw-mela-lamp .dw-mini-glow { animation: dw-glow-in .8s ease-out calc(var(--scene-start) + 3.5s + var(--n) * .55s) both; }
html.sb-film body.dw-premium .dw-showcase-tile { animation: dw-tile-on .8s ease-out calc(var(--scene-start) + 3.2s + var(--n) * .55s) both; }
html.sb-film body.dw-premium .dw-showcase-crown { animation: dw-pop .7s cubic-bezier(.2, 1.4, .4, 1) calc(var(--scene-start) + 6.9s) both; }
html.sb-film body.dw-premium .dw-finale-play, html.sb-film body.dw-premium .dw-finale-end, html.sb-film body.dw-premium .dw-finale-replay { display: none !important; }
html.sb-film body.dw-premium .dw-light-script { display: block; }
html.sb-film body.dw-premium .dw-light-text { animation: dw-write 2.8s cubic-bezier(.45, .1, .4, 1) calc(var(--scene-start) + 3.6s) both; }
html.sb-film body.dw-premium .dw-light-head { animation: dw-write-head 2.8s cubic-bezier(.45, .1, .4, 1) calc(var(--scene-start) + 3.6s) both; }
html.sb-film body.dw-premium .dw-mela-tab[aria-selected='true'] { background: rgba(0, 0, 0, .22); color: var(--dw-cream); border-color: rgba(245, 199, 107, .45); box-shadow: none; }

html.sb-film .dw .dw-arch { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
    html:not(.sb-film) .dw .dw-fw, html:not(.sb-film) .dw .dw-ember, html:not(.sb-film) .dw .dw-sky-lantern { display: none; }
    html:not(.sb-film) .dw .dw-mandala, html:not(.sb-film) .dw .dw-rangoli, html:not(.sb-film) .dw .dw-flicker,
    html:not(.sb-film) .dw .dw-stars--twinkle, html:not(.sb-film) .dw .dw-lamp-ring, html:not(.sb-film) .dw .dw-tap,
    html:not(.sb-film) .dw .dw-lights-glow, html:not(.sb-film) .dw .dw-town-glow, html:not(.sb-film) .dw .dw-mini-glow,
    html:not(.sb-film) .dw .dw-rocket, html:not(.sb-film) .dw .dw-gift-box, html:not(.sb-film) .dw .dw-diya, html:not(.sb-film) .dw .dw-gift-tease span { animation: none !important; }
    /* Premium: the envelope shows the card at once, nothing falls or shines. */
    html:not(.sb-film) body.dw-premium .dw-gold, html:not(.sb-film) .dw .dw-petal, html:not(.sb-film) .dw .dw-env-seal, html:not(.sb-film) .dw .dw-match { animation: none !important; }
    html:not(.sb-film) .dw .dw-welcome.opened .dw-env-card { animation: none !important; transform: translateY(44px) scale(1); z-index: 7; }
    html:not(.sb-film) .dw .dw-welcome.opened .dw-env-back, html:not(.sb-film) .dw .dw-welcome.opened .dw-env-pocket, html:not(.sb-film) .dw .dw-welcome.opened .dw-env-shadow,
    html:not(.sb-film) .dw .dw-welcome.opened .dw-env-flap-wrap, html:not(.sb-film) .dw .dw-welcome.opened .dw-env-seal { animation: none !important; opacity: 0; visibility: hidden; }
}